/**
 * pc.css — PC レスポンシブ拡張
 *
 * モバイル基本設計 (480px frame) を維持しつつ、≥1024px で多カラム化。
 * モック: mocks/pc/飯塚AGGマルシェ PC TOP.html を参考に実装。
 *
 * ブレイクポイント:
 *   - 〜767px:  モバイル原本 (変更なし)
 *   - 768〜1023px: タブレット (frame拡張・grid調整のみ)
 *   - 1024px〜: PC専用レイアウト (横並び・多カラム)
 *   - 1280px〜: 中央寄せ + 左右に和柄装飾
 */

/* ════════════════════════════════════════════════════════════
 * PC・タブレット (768px 〜)
 *
 * モバイル (<768px) の縦長480pxレイアウトと、PC (≥768px) の多カラム
 * レイアウトを切り替える。タブレット中間幅 (720pxフレームなど) を作ると
 * 縦書きタイトルが伸びて崩れるため、768px以上は一律でPC仕様にする。
 * ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

	body {
		padding-bottom: 0; /* btm-tab 廃止 */
	}

	/* ─── フレーム拡張 ─── */
	.frame {
		max-width: 1280px;
		min-height: 0;
	}

	/* ─── 下部タブナビ非表示 (PC不要) ─── */
	.btm-tab { display: none !important; }

	/* ─── ナビゲーション PC化 ─── */
	.nav { padding: 0; }
	.nav-row { padding: 16px 32px; gap: 24px; }

	.nav--front .brand-link {
		flex: 0 0 auto;
		text-align: left;
	}
	.nav--front .brand-logo {
		width: 180px;
		max-height: 44px;
	}
	.nav--front .brand { font-size: 22px; }
	.nav--front .brand-en { font-size: 10px; letter-spacing: 3px; }

	.desktop-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}
	.desktop-nav a {
		padding: 6px 8px;
		font-family: var(--font-serif);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 1px;
		text-align: center;
		white-space: nowrap;
	}
	.desktop-nav a span {
		display: block;
		font-family: var(--font-mono);
		font-size: 9px;
		letter-spacing: 2px;
		color: var(--ink-mute);
		margin-top: 2px;
	}

	.nav-row .menu-btn { display: none; } /* PCはハンバーガー不要 */
	.nav-row .icon-btn,
	.nav-row .search-btn-icon,
	.nav-row .cart-icon,
	.nav-row .back {
		width: 44px; height: 44px;
	}

	/* ─── サブページナビ: 戻る + タイトルの左寄せ → 中央 ─── */
	.nav--sub .nav-row .title { font-size: 19px; }

	/* ─── ヒーロー: 横並び (横書きタイトル左 + 商品グリッド右) ─── */
	.hero {
		display: grid !important;
		grid-template-columns: 1.15fr 1fr;
		height: 540px;
		min-height: 540px;
		position: relative;
	}
	.hero-text {
		position: relative !important;
		width: auto !important;
		padding: 72px 64px 56px !important;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		gap: 24px;
		z-index: 2;
	}
	/* PC: 縦書きタイトル → 横書きに切替 (モック準拠) */
	.vertical-title {
		writing-mode: horizontal-tb !important;
		text-orientation: unset !important;
		font-size: 60px !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		line-height: 1.18 !important;
		letter-spacing: 6px !important;
		margin: 0 !important;
		text-shadow: 0 2px 16px rgba(0,0,0,.4);
	}
	.vertical-title .ch {
		display: inline-block;
	}
	.hero-tagline {
		margin-top: 0;
	}
	.tagline-en {
		font-size: 12px;
		letter-spacing: 5px;
		margin-bottom: 16px;
	}
	.tagline-jp {
		font-family: var(--font-serif);
		font-size: 17px;
		line-height: 1.9;
		max-width: 480px;
		opacity: .85;
	}

	.hero-strip {
		position: relative !important;
		width: auto !important;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 1fr;
		gap: 4px;
	}
	.hero-track {
		display: contents; /* grid内で展開 */
	}
	.hero-tile {
		height: auto;
		min-height: 0;
		margin-bottom: 0;
	}
	.hero-tile .tile-kanji { font-size: 200px; }

	.hero-strip::before { display: none; }
	.hero-strip::after  { display: none; }
	.scroll-hint        { display: none; } /* PCではスクロール促し不要 */

	/* ─── 検索バー — PC時は浮かさず、ヒーロー直下に配置 ─── */
	.search-bar {
		max-width: 720px;
		margin: 32px auto 0 !important;
		padding: 8px 8px 8px 20px;
	}
	.search-bar .q { font-size: 15px; }
	.search-bar .search-btn { padding: 14px 28px; }

	/* ─── ニュースティッカー ─── */
	.ticker { padding: 14px 40px; margin-top: 0 !important; }
	.ticker-label { padding: 8px 16px; font-size: 13px; letter-spacing: 3px; }

	/* ─── セクションタイトル — 余白タイトに ─── */
	.section-title {
		padding: 48px 16px 28px;
	}
	.section-title .jp { font-size: 32px; }
	.section-title .bar { margin: 14px auto 0; }

	/* ─── 検索バー後の余白を詰める ─── */
	.search-bar { margin-bottom: 0; }

	/* ─── カテゴリ横スクロール → グリッド ─── */
	.cat-row {
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		gap: 16px;
		padding: 0 40px 60px;
		overflow-x: visible;
	}
	.cat-card {
		width: auto;
	}
	.cat-card .kanji { font-size: 56px; }

	/* ─── 特集 (ed-large + ed-rows 横並び) ─── */
	.featured {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		gap: 18px;
		max-width: 1120px;
		margin: 0 auto;
		padding: 0 32px 48px;
		align-items: start;
	}
	.ed-large {
		margin: 0;
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		background: #fff;
		border: 1px solid rgba(0,0,0,.06);
		box-shadow: 0 1px 0 rgba(0,0,0,.03);
	}
	.ed-large .img {
		aspect-ratio: auto;
		height: 260px;
	}
	.ed-large .img .big-kanji {
		font-size: clamp(96px, 15vw, 170px);
	}
	.ed-large .cat-pill {
		margin-bottom: 10px;
		font-size: 11px;
	}
	.ed-large .title {
		font-size: 23px;
		line-height: 1.35;
	}
	.ed-large .copy {
		border-top: 0;
		padding: 18px 18px 16px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;
	}
	.ed-large .copy-text {
		font-size: 14px;
		line-height: 1.7;
		margin: 0 0 14px;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* ed-row を縦積みで右カラムへ */
	.featured > .ed-row {
		grid-column: 2;
		min-height: 0;
		padding: 14px;
		border: 1px solid rgba(0,0,0,.06);
		border-bottom: 1px solid rgba(0,0,0,.06);
	}
	.ed-row .thumb {
		width: 96px;
		height: 96px;
	}
	.ed-row .thumb .mini-kanji {
		font-size: 52px;
	}
	.ed-row .title {
		font-size: 17px;
		line-height: 1.35;
		margin-bottom: 5px;
	}
	.ed-row .copy-text {
		font-size: 12px;
		line-height: 1.55;
	}

	/* ─── 季節 ─── */
	.season {
		padding: 80px 64px;
	}
	.season-jp { font-size: 48px; }
	.season-bg-kanji { font-size: 480px; }

	/* ─── エリア (5+2 = 7件、横2列に) ─── */
	.areas {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 48px;
		padding: 10px 40px 40px;
	}
	.areas .section-title {
		grid-column: 1 / -1; /* タイトルは全幅 */
	}
	.area-tile { padding: 24px 0; }
	.area-tile .name { font-size: 24px; }

	/* ─── front-page セクション全体の整理 ─── */
	.front-page .section-title {
		grid-column: 1 / -1;
	}
	.cat-section .section-title,
	.featured + .section-title {
		grid-column: auto; /* グリッドコンテキスト外なら従来通り */
	}

	/* season の背景漢字を frame 内に収める */
	.season {
		overflow: hidden;
	}
	.season-bg-kanji {
		font-size: 360px !important;
		right: -60px !important;
	}

	/* ─── 出店募集 CTA ─── */
	.apply-cta {
		margin: 60px 40px;
		padding: 60px 80px;
	}
	.apply-cta .jp { font-size: 40px; }
	.apply-cta .sub { max-width: 480px; }

	/* ─── 商品一覧アーカイブ ─── */
	.product-archive .products { grid-template-columns: repeat(4, 1fr); padding: 24px 40px; }
	.hero--category {
		padding: 60px 64px;
	}
	.hero--category .jp { font-size: 44px; }
	.chips-wrap { padding: 0 24px; }

	/* ─── お気に入りグリッド ─── */
	.wish-grid { grid-template-columns: repeat(4, 1fr); padding: 16px 40px; }

	/* ─── マイページ ─── */
	.profile-hero {
		padding: 48px 64px 36px;
	}
	.profile-row { gap: 24px; }
	.avatar {
		width: 80px; height: 80px;
	}
	.avatar .avatar-ch { font-size: 36px; }
	.uname { font-size: 26px; letter-spacing: 3px; }

	.stats { padding: 32px 40px; gap: 16px; }
	.stat .n { font-size: 28px; }

	.section { margin: 24px 40px 0; }

	.quick-grid { grid-template-columns: repeat(4, 1fr); }
	.menu-list { padding: 8px 0; }

	/* ─── 注文履歴 ─── */
	.order-summary { padding: 48px 64px; }
	.summary-grid { gap: 32px; }
	.sm-item .n { font-size: 32px; }
	.orders-list { padding: 24px 40px; }
	.order-card { padding: 0; }
	.tracking { padding: 16px 24px; }

	/* ─── ログイン / 新規登録 ─── */
	.auth {
		max-width: 540px;
		margin: 40px auto;
		background: #fff;
		box-shadow: 0 4px 24px rgba(0,0,0,.08);
	}
	.auth-hero { padding: 48px 32px 36px; }
	.auth-hero .jp { font-size: 32px; }

	/* ─── カート / チェックアウト ─── */
	.cart-form {
		display: grid;
		grid-template-columns: 1fr 380px;
		gap: 40px;
		padding: 32px 40px 100px;
	}
	.cart-hero {
		grid-column: 1 / -1;
		margin: 0;
	}
	.cart-items {
		grid-column: 1;
		padding: 0;
	}
	.cart-summary,
	.coupon {
		grid-column: 2;
		margin: 0 0 16px;
	}
	.cart-foot {
		bottom: 0;
		max-width: 1280px;
	}

	.co-steps { padding: 32px 64px 16px; }
	.co-sect { padding: 32px 40px; }

	/* ─── 注文完了 ─── */
	.thankyou-hero { padding: 80px 32px 100px; }
	.thankyou-hero .jp { font-size: 36px; }
	.order-card { margin: -36px 80px 0; padding: 32px; }

	/* ─── 商品詳細 ─── */
	.product-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		padding: 32px 40px;
	}
	.product-gallery {
		aspect-ratio: 1/1;
	}
	.product-tabs {
		grid-column: 1 / -1;
	}

	/* ─── 店舗詳細 (Dokan store) ─── */
	.shop-hero {
		height: 480px;
	}
	.shop-info {
		padding: 32px 64px;
	}

	/* ─── 記事 ─── */
	.article-single {
		max-width: 800px;
		margin: 0 auto;
	}
	.article-hero,
	.article-hero.has-mobile-image { aspect-ratio: 16/9; }
	.article-title { font-size: 36px; }
	.article-content { padding: 0 60px 60px; font-size: 16px; }

	/* ─── フッター 多カラム ─── */
	.site-footer {
		padding: 80px 64px 40px;
	}
	.site-footer .brand { font-size: 28px; }
	.site-footer .links {
		gap: 16px 32px;
		font-size: 14px;
	}
}

/* ════════════════════════════════════════════════════════════
 * PC ワイド (1280px 〜) — 左右に和柄装飾
 * ════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
	body {
		background: var(--paper);
	}
	body::before,
	body::after {
		content: '';
		position: fixed;
		top: 0; bottom: 0;
		width: calc((100vw - 1280px) / 2);
		pointer-events: none;
		background:
			repeating-linear-gradient(
				0deg,
				rgba(96,200,232,0.06) 0 1px,
				transparent 1px 14px
			),
			radial-gradient(circle at center, rgba(96,200,232,0.05), transparent 70%);
		z-index: 0;
	}
	body::before { left: 0; }
	body::after  { right: 0; }
}