/*
 * トップページ（index.php）の PC 版。幅 1024px から（page_header の media で読み分け）。
 *
 * スマホ版（home.sp.css）の部品をそのまま使い、大きさと列の数だけ PC 向けに直す（HTML はスマホと同じ）。
 * 2026-11-10 夜に 3 案（A 検索｜券・地図｜エリア、B 地図が表紙、C 1 本の列）を比べ、ユーザー「なるべくスマホと雰囲気を変えたくない」で
 * C を「スマホと同じ並び・同じ部品を 56rem で」に寄せた形に決めた（docs/design_requirements.md 12-2）。
 *   ヘッダー → 面（本番のまま。本文いっぱい、写真 10 列 × 2 段）→ その下は 56rem の 1 本: 検索 → ジャンル 5 つ → 黄色い券の帯 → 全店へ
 *   → エリアの目次（3 列）→ いま営業中（4 列 × 2 段）→ おすすめ → 委員会について → Blog（3 枚ずつ ‹ › で送る）。
 * 新しい部品は作らない（券は黄色い帯のまま、地図は置かない）。白い紙も入れない（スマホのトップに白い枠が無い）。
 */

@import url("home.sp.css");

/* 1 画面目は本番のまま（ユーザー 2026-11-10 夜「ファーストビューは今の本番のままでいい」）:
   PC はナビのあるヘッダーを出し、面は本文の幅いっぱいの横長（写真 10 列 × 2 段）。面の上の街並みの線は要らない */
.has-nav:has(.home) .site-header { display: contents; }   /* base.css の PC と同じ（帯を固定するため箱を消す） */
.home { padding-top: var(--sp-5); }
.cover__bar { display: none; }

/* ===== ロゴの面（横長） ===== */
.cover { margin: 0; overflow: hidden; border-radius: 0.5rem; }
.cover__photos { grid-template-columns: repeat(10, 1fr); }
.cover__logo { top: 0; }   /* 街並みの線がないので面全体の真ん中に */
.cover__tagline { font-size: var(--fs-lg); }
.cover__title { font-size: 4.25rem; }
.cover__lead { font-size: var(--fs-lg); }
.cover__lead br { display: none; }   /* 横に余裕があるので 1 行で */

/* ===== 面の下: スマホと同じ並びを 56rem の 1 本で（2026-11-10） ===== */
.home > :not(.cover) { max-width: 56rem; margin-inline: auto; width: 100%; }

/* 探す道具（検索 → ジャンル → 券 → 全店）: スマホと同じ順。幅は列いっぱい */
.cover__search { margin-top: var(--sp-6); }
.genre5 { gap: var(--sp-3); }
.genre5 a { padding: var(--sp-3) 0; font-size: var(--fs-md); transition: background-color .15s; }
/* 券の帯はスマホの黄色のまま。高さと字だけ PC の大きさに（店の数を右端に大きく） */
.coupon-cta { min-height: 3.75rem; padding: 0 var(--sp-4) 0 var(--sp-3); gap: var(--sp-3); }
.coupon-cta__icon .icon { width: 1.4rem; height: 1.4rem; }
.coupon-cta__label { font-size: var(--fs-lg); }
.coupon-cta__text small { font-size: var(--fs-sm); }
.coupon-cta__sub { font-size: var(--fs-md); }
.coupon-cta__sub b { font-size: 1.5rem; line-height: 1; }

/* エリア: 目次を 3 列（スマホは 2 列） */
.areas__list { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-6); }
.areas__list a { font-size: var(--fs-md); }

/* いま営業中: 横に送らず 4 列 × 2 段（8 店） */
.shelf__row {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0; padding: 0;
  overflow: visible;
}
.shelf__row:not(.shelf__row--news):not(.shelf__row--themes) > li:nth-child(n + 9) { display: none; }
/* おすすめ商店紹介: 新しいテーマを 3 つ、横に送らず 1 段（4 つ目からは「すべて見る」の先） */
.shelf__row--themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shelf__row--themes > li:nth-child(n + 4) { display: none; }
/* Blog: 3 枚ずつ 1 段、‹ › で送る（折り返して 2 段にしない） */
.shelf__row--news {
  grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * var(--sp-4)) / 3);
  overflow-x: auto;   /* 送り方（scroll-snap・バーを出さない）はスマホの .shelf__row のまま */
}
.shelf-nav:not([hidden]) { display: flex; gap: var(--sp-2); margin-left: auto; align-self: center; }
.shelf-nav__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: var(--rule); border-radius: 50%;
  background: var(--c-paper); color: var(--c-rose-deep);
}
.shelf-nav__btn .icon { width: 1rem; height: 1rem; }
.shelf-nav__btn[data-shelf-prev] .icon { transform: scaleX(-1); }
.shelf-nav__btn:disabled { opacity: 0.35; cursor: default; }
.shelf-nav__btn:hover:not(:disabled) { background: var(--c-sakura-deep); }

/* 委員会について: スマホと同じ罫で挟む形のまま、幅だけ列いっぱい（幅は上の .home > :not(.cover) の 56rem） */
.about p { text-align: start; }