/*
 * トップページ（index.php）のスマホ版。幅 1023px まで（page_header の media で読み分け）。
 * PC 版は home.pc.css で別に作る。
 *
 * 上から: ロゴの面（敷き詰めた写真に濃いローズ、白いロゴ）→ 検索 → ジャンル 5 つ → クーポンの帯 → 全店の一覧へ
 *        → エリア → いま営業中 → お知らせ → 委員会について。
 * 1 画面目（664px、下のタブの上まで）に、ロゴの面からクーポンの帯まで入るようにしてある。
 */

.home { padding-top: 0; padding-bottom: 0; } /* 下はフッターの余白だけで足りる */
/* トップはヘッダーを出さない（題字と「ひとつまち」が 2 回続かないように。街並みの線は面の上端に描く） */
.has-nav:has(.home) .site-header { display: none; }

/* ===== 1 画面目: ロゴの面 ===== */
/* 店の写真を 5 列 × 4 段に小さく敷き詰め、白黒にして濃いローズをかぶせる（写真の出来のばらつきを消す）。
   その上に、上端の街並みの線と、真ん中のロゴのまとまり（白い文字） */
.cover { position: relative; margin: 0 calc(var(--sp-4) * -1); text-align: center; color: var(--c-paper); }
.cover__photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.cover__photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(0.9); }
.cover::after { content: ""; position: absolute; inset: 0; background: rgb(142 92 88 / 0.82); }   /* --c-rose-deep */
/* 幅の広いスマホ・タブレット（520〜1023px。520px で高さ 260px。これより狭いとロゴのまとまり約 215px が入りきらない）: 5 列 × 4 段のままだと高さが幅の 0.8 倍（600px で 480px）になり、1 画面目がロゴの面だけで埋まる。
   6 列 × 3 段（18 枚。残り 2 枚は出さない）にして幅の 0.5 倍に（600px で 300px = 375px のスマホと同じ高さ。2026-11-12） */
/* 上限を付ける: home.pc.css がこのファイルを @import するので、付けないと PC（10 列 × 2 段 = 20 枚）でも 19・20 枚目が消えて右下が空く（2026-11-13） */
@media (min-width: 32.5rem) and (max-width: 63.99rem) {
  .cover__photos { grid-template-columns: repeat(6, 1fr); }
  .cover__photos img:nth-child(n + 19) { display: none; }
}

/* 街並みの線はヘッダーの位置に、左端から右端まで */
.cover__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.cover .skyline {
  --sky-house-w: 6.75rem; --sky-school-w: 5.8rem; --sky-people-h: 1.5rem; --sky-gap: 0.75rem;   /* 絵の大きさ（css/base.css の .skyline） */
  height: 3rem; color: var(--c-paper); border-bottom: 3px solid var(--c-paper);
}
.cover .skyline__house { height: 2.35rem; }
.cover .skyline__school { height: 2.2rem; }

/* 面全体ではなく、街並みの線（3rem）の下の領域の真ん中に置く */
.cover__logo { position: absolute; left: 0; right: 0; top: 3rem; bottom: 0; z-index: 1; display: grid; align-content: center; }
.cover__tagline { font-size: var(--fs-md); letter-spacing: 0.35em; text-indent: 0.35em; }
/* 字間は最後の字の後ろにも付くので、同じだけ頭を空けて真ん中にそろえる */
.cover__title { font-size: 3.3rem; line-height: 1.2; letter-spacing: 0.08em; text-indent: 0.08em; white-space: nowrap; font-weight: 500; }
.cover__lead { margin-top: var(--sp-2); font-size: var(--fs-md); line-height: 1.6; }
.cover__lead b { padding: 0 0.1em; font-size: 1.6rem; font-weight: 500; background: linear-gradient(transparent 60%, rgb(240 230 153 / 0.55) 60%); }

.search-box {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--c-paper);
  border: 1px solid var(--c-rose);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
}
.search-box__icon { color: var(--c-rose); }
.search-box input {
  flex: 1; min-width: 0;
  height: 2.75rem;
  border: 0; background: none; outline: none;
  font-size: max(var(--fs-md), 16px); /* 16px 未満だと iPhone がフォーカス時に拡大する */
  color: var(--c-ink);
}
/* 例の言葉は打った字より薄く（--c-ink-placeholder、白地で 4.56:1）。言葉は 2 つに減らして 320px でも切れないように
   （「美容院など」まであると 320px で途中で切れていた。mock/search-box.php の D 案：2026-11-08） */
.search-box input::placeholder { color: var(--c-ink-placeholder); }
.search-box:focus-within { outline: 2px solid var(--c-rose-deep); outline-offset: 2px; }
/* 「探す」は枠の高さいっぱい（44px）にして、枠とのすき間を上下・右で同じにする（2026-11-11。.btn--sm の 36px のままだと
   上下 9px・右 5px で、ボタンが枠の中で右に寄って浮いて見えた。複数の人から指摘）。字も本文の大きさに */
.search-box .btn { min-height: 2.75rem; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.cover__search { margin-top: var(--sp-4); }

/* ===== クーポンを使う（冊子の券の黄色の帯） ===== */
.coupon-cta {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  min-height: 3.25rem;
  padding: 0 var(--sp-3) 0 var(--sp-2);
  background: var(--c-ticket-yellow);
  border: 1px solid #d9cc63;
  border-radius: 999px;
  color: var(--c-ink);
}
.coupon-cta__icon { display: inline-flex; flex: none; padding: 0.4rem; border-radius: 50%; background: var(--c-paper); color: var(--c-rose-deep); }
.coupon-cta__icon .icon { width: 1.25rem; height: 1.25rem; }
.coupon-cta__text { display: grid; line-height: 1.3; }
.coupon-cta__label { font-size: var(--fs-md); }
.coupon-cta__text small { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.coupon-cta__sub { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.coupon-cta__sub b { font-weight: inherit; }   /* 数字は PC の券で大きくする（home.pc.css）。スマホは同じ大きさ */
.coupon-cta__arrow { width: 1.25rem; height: 1.25rem; flex: none; }
.coupon-cta:active { background: #ebdf7e; }

/* ===== ジャンル 5 つ ===== */
.genre5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); margin-top: var(--sp-3); }
.genre5 a {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: var(--sp-2) 0; border-radius: 0.75rem; background: var(--c-paper); border: 1px solid var(--c-rose-pale);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--c-ink);
}
.genre5 .genre-mark { width: 2.1rem; height: 2.1rem; margin-bottom: 0.1rem; }
.genre5 a:active { background: var(--c-sakura-deep); }

/* ===== 見出し（どのまとまりも同じ形: ローズの文字＋下線、右に「すべて見る」） ===== */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: var(--rule);
}
.sec-head__title { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 500; color: var(--c-rose-deep); }
.sec-head__more { display: inline-flex; align-items: center; gap: 0.2em; flex: none; font-size: var(--fs-sm); color: var(--c-rose-deep); }
.sec-head__more .icon { width: 1rem; height: 1rem; }

.areas, .shelf { margin-top: var(--sp-8); }

/* ===== 全店の一覧へ ===== */
.all-shops {
  display: flex; align-items: center; justify-content: center; gap: 0.3em;
  min-height: 3rem; margin-top: var(--sp-3);
  border: 1px solid var(--c-rose); border-radius: 999px; background: var(--c-paper);
  color: var(--c-rose-deep); font-size: var(--fs-md);
}
.all-shops .icon { width: 1.1rem; height: 1.1rem; }
.all-shops:active { background: var(--c-sakura-deep); }

/* ===== エリアから探す（2 列の目次） ===== */
.areas__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); }   /* sp-4 だと幅 360px で「国立駅南口（西）」などが 2 行になる */
.areas__list li { border-bottom: var(--rule-dash); }
.areas__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 2.75rem; font-size: var(--fs-sm); }
.areas__list small { flex-shrink: 0; white-space: nowrap; font-size: var(--fs-xs); color: var(--c-ink-soft); }   /* 「16 店」を割らない */

/* ===== いま営業中のお店・お知らせ（指で横に送る列。1.5 枚ずつ見せて続きがあると分かるように） ===== */
.shelf__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(64%, 15rem);   /* 375px の画面では 64% = 約 220px。幅が 410px を超えるあたりから 15rem（240px）で止める。止めないと 600px で 1 枚 350px、1000px で 600px を超えて、写真 1 枚で画面が埋まる（2026-11-12） */
  gap: var(--sp-3);
  margin: var(--sp-3) calc(var(--sp-4) * -1) 0; padding: 0 var(--sp-4) var(--sp-2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--sp-4);
  scrollbar-width: none;
}
.shelf__row::-webkit-scrollbar { display: none; }
.shelf__row > li { display: flex; scroll-snap-align: start; }
.shelf__row--news { grid-auto-columns: min(82%, 19.25rem); }   /* 375px では 82% = 約 280px。同じ理由で 19.25rem（308px）で止める */
.shelf__row--news .news-item { flex: 1; flex-direction: column; background: var(--c-paper); border: var(--rule); padding: var(--sp-3); }
.shelf__row--news .news-item__img { width: 100%; aspect-ratio: 16 / 9; }
/* Blog の ‹ ›（js/shelf-slider.js）。スマホは指で送るので出さない。PC は home.pc.css */
.shelf-nav { display: none; }

/* ===== おすすめ商店紹介（テーマのコマの棚。公開中のテーマがあるときだけ） =====
   コマそのもの（.theme-card）は css/components.css（お知らせのページの一覧でも同じコマを使う）。ここは棚の並べ方だけ */
.shelf__row--themes { grid-auto-columns: min(80%, 19rem); }

/* ホバー（PC。決まりは css/tokens.css） */
@media (hover: hover) and (pointer: fine) {
  .genre5 a:hover, .all-shops:hover { background: var(--c-sakura-deep); }
  .coupon-cta:hover { background: #ebdf7e; }
  .areas__list a:hover { background: var(--c-sakura-deep); }
  .sec-head__more:hover { color: var(--c-ink); }
}

/* ===== 一橋祭運営委員会について（箱に入れず、罫で挟む） ===== */
/* the whole block (and so its two rules) is the body's 21em column (21 x --fs-sm = 18.375rem), centred: the rules end where the text does (担当 2026-11-08). PC widens it again (home.pc.css) */
.about {
  max-width: calc(21 * var(--fs-sm));
  margin-top: var(--sp-8);
  margin-inline: auto;
  padding: var(--sp-5) 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.about__title { font-size: var(--fs-lg); letter-spacing: 0.2em; margin-bottom: var(--sp-3); text-align: center; font-weight: 500; color: var(--c-rose-deep); }
/* body: fills the 21em .about column (about 21 characters a line); justified so both edges stay straight (担当 2026-11-08) */
.about p { font-size: var(--fs-sm); line-height: 1.9; color: var(--c-ink-soft); text-align: justify; }
.about p + p { margin-top: var(--sp-2); }
/* 幅の広いスマホ・タブレット（520px〜）: 21 字の列のままだと、広い画面の真ん中に細い柱が立つ。PC と同じに、罫で挟む形のまま幅いっぱい・左ぞろえ（2026-11-12） */
@media (min-width: 32.5rem) {
  .about { max-width: none; }
  .about p { text-align: start; }
}