/**
 * レスポンシブ対応
 * プロトタイプのブレークポイント体系に準拠
 */

/* ==========================================================================
   タブレット以下（1024px以下）
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.container {
		padding: 0 var(--spacing-md);
	}

	.section-title {
		font-size: var(--text-2xl);
	}

	h2.section-title {
		font-size: var(--text-2xl);
	}

	h1.section-title {
		font-size: var(--text-3xl);
	}
}

/* ==========================================================================
   モバイル（768px以下）
   ========================================================================== */
@media screen and (max-width: 768px) {
	/* ヘッダー */
	.header {
		height: 64px;
	}

	.logo {
		height: 64px;
		font-size: var(--text-base);
	}

	.mobile-nav-toggle {
		height: 64px;
	}

	/* ナビゲーション */
	.nav-link {
		height: 64px;
	}

	/* コンテナ */
	.container {
		padding: 0 var(--spacing-sm);
	}

	/* セクション */
	.section {
		margin-bottom: var(--spacing-xl);
	}

	.section-title {
		font-size: var(--text-3xl);
		margin-bottom: var(--spacing-8);
	}

	h1.section-title {
		font-size: var(--text-4xl);
		margin-bottom: var(--spacing-8);
	}

	h2.section-title {
		font-size: var(--text-3xl);
		margin-bottom: var(--spacing-6);
	}

	.section-subtitle {
		font-size: var(--text-base);
	}

	/* テキストを基本左揃えに */
	.card-content,
	.card-content p,
	.card-content h1,
	.card-content h2,
	.card-content h3,
	.card-content h4,
	.card-content h5,
	.card-content h6,
	.card-content ul,
	.card-content ol,
	.card-content li,
	.entry-content,
	.entry-content p,
	.entry-content h1,
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content h5,
	.entry-content h6,
	.entry-content ul,
	.entry-content ol,
	.entry-content li {
		text-align: left;
	}
	
	/* セクションタイトルは中央揃えのまま */
	.section-title {
		text-align: center;
	}
	
	/* ボタン */
	.btn {
		width: auto;
		max-width: 180px;
		white-space: normal;
		line-height: var(--leading-normal);
		flex-direction: column;
		gap: var(--spacing-xs);
		padding: var(--spacing-2) var(--spacing-3);
	}
	
	/* btn-primaryの幅を文字列に合わせて詰める */
	.btn-primary {
		padding-left: var(--spacing-3);
		padding-right: var(--spacing-3);
	}
	
	/* ボタン内のspanをブロック要素にして確実に改行 */
	.btn span {
		display: block;
	}
	
	/* ボタンやクリック可能な要素は中央揃え */
	.btn,
	.card-content .btn,
	.card-actions .btn,
	.entry-content .btn,
	.btn-group,
	.card-actions {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* ボタングループ内のボタンも中央揃え */
	.btn-group .btn {
		margin-left: auto;
		margin-right: auto;
	}

	/* 営業時間ヒーローカード */
	.hours-card {
		padding: var(--spacing-lg);
	}

	.hours-current {
		font-size: var(--text-xl);
	}

	/* フッター */
	.footer {
		padding: var(--spacing-lg) 0 var(--spacing-md) 0;
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	/* メイン */
	.main,
	.site-main {
		padding-bottom: var(--spacing-md);
	}

	.main:not(:has(.hero)),
	.site-main:not(:has(.hero)) {
		padding-top: var(--spacing-8);
	}

	.main.no-hero,
	.site-main.no-hero {
		padding-top: var(--spacing-8);
	}

	/* カード */
	.card-image {
		height: 180px;
	}

	.card-content {
		padding: var(--spacing-3);
		text-align: left;
	}
	
	.card-content p {
		margin-top: var(--spacing-2);
		margin-bottom: var(--spacing-2);
	}
	
	.card-content p:first-child {
		margin-top: 0;
	}
	
	.card-content p:last-child {
		margin-bottom: 0;
	}

	.card-header {
		padding: var(--spacing-3) var(--spacing-3) var(--spacing-xs) var(--spacing-3);
	}

	.card-actions {
		padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3);
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	/* カードタイトルは中央揃えのまま */
	.card-title {
		text-align: center;
	}

	/* ヒーロー */
	.hero {
		padding: var(--spacing-12) 0 var(--spacing-8) 0;
		min-height: 50vh;
	}

	.hero-title {
		font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
	}

	.hero-subtitle,
	.hero-catchphrase {
		font-size: clamp(var(--text-base), 3vw, var(--text-xl));
	}

	/* グリッド */
	.grid-golden,
	.grid-silver {
		grid-template-columns: 1fr;
		gap: var(--spacing-4);
	}
	
	/* テーブル */
	table {
		font-size: var(--text-sm);
		width: 100%;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	table thead,
	table tbody,
	table tr {
		display: block;
		width: 100%;
	}
	
	table th,
	table td {
		display: block;
		width: 100%;
		text-align: left;
		padding: var(--spacing-2);
		border-bottom: 1px solid rgba(27, 67, 50, 0.1);
	}
	
	table th {
		font-weight: var(--font-semibold);
		background-color: rgba(27, 67, 50, 0.05);
	}
	
	/* リスト */
	ul, ol {
		padding-left: var(--spacing-4);
		margin-left: 0;
	}
	
	/* 見出しの余白調整 */
	h1, h2, h3, h4, h5, h6 {
		margin-top: var(--spacing-3);
		margin-bottom: var(--spacing-2);
	}
	
	h1:first-child,
	h2:first-child,
	h3:first-child,
	h4:first-child,
	h5:first-child,
	h6:first-child {
		margin-top: 0;
	}
	
	/* 段落の余白調整 */
	p {
		margin-top: var(--spacing-2);
		margin-bottom: var(--spacing-2);
	}
	
	p:first-child {
		margin-top: 0;
	}
	
	p:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   小さいモバイル（480px以下）
   ========================================================================== */
@media screen and (max-width: 480px) {
	/* ヘッダー */
	.header {
		height: 56px;
	}

	.logo {
		height: 56px;
		font-size: var(--text-sm);
	}

	.mobile-nav-toggle {
		height: 56px;
	}

	/* コンテナ */
	.container {
		padding: 0 var(--spacing-xs);
	}

	/* セクション */
	.section-title {
		font-size: var(--text-2xl);
		margin-bottom: var(--spacing-6);
	}

	h1.section-title {
		font-size: var(--text-3xl);
		margin-bottom: var(--spacing-6);
	}

	h2.section-title {
		font-size: var(--text-2xl);
		margin-bottom: var(--spacing-5);
	}

	/* カード */
	.card-image {
		height: 150px;
	}

	.card-content {
		padding: var(--spacing-2);
		text-align: left;
	}
	
	.card-content p {
		margin-top: var(--spacing-xs);
		margin-bottom: var(--spacing-xs);
	}
	
	.card-content p:first-child {
		margin-top: 0;
	}
	
	.card-content p:last-child {
		margin-bottom: 0;
	}

	.card-header {
		padding: var(--spacing-2) var(--spacing-2) var(--spacing-xs) var(--spacing-2);
	}

	.card-actions {
		padding: var(--spacing-xs) var(--spacing-2) var(--spacing-2) var(--spacing-2);
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	/* ボタンの幅をさらに調整 */
	.btn {
		max-width: 160px;
		font-size: var(--text-sm);
	}

	/* ヒーロー */
	.hero {
		padding: var(--spacing-10) 0 var(--spacing-6) 0;
		min-height: 40vh;
	}

	.hero-title {
		font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
	}

	.hero-subtitle,
	.hero-catchphrase {
		font-size: clamp(var(--text-sm), 3vw, var(--text-lg));
	}
}