/* 土台。★どの画面にも必ずあるもの——地・文字・器・ヘッダーだけ。
 *
 * ★部品（ボタン・カード・行）はここに置かない。components.css。
 *   置くと「文字の大きさを変えたい」だけで部品の山を読むことになる。
 */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink1);
  color: var(--t1);
  /* ★本文は Noto Sans JP を先頭に固定（2026-09-07）。webフォントは
   *   inc/layout.php が読む。★端末のOS任せ（游ゴシック/Hiragino…）だと
   *   機種ごとに顔が変わり、Xへ出す画像とも食い違うため。ラテンは Segoe/system。
   *   ★読めない環境では従来どおり OS のゴシックに落ちる（display=swap）。 */
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI",
               "Hiragino Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }

/* ★チップもヘッダーのボタンも <a>（JSで状態を持たず、GETで遷移する）。
 *   リンクの既定の色と下線を消して、押しボタンの見た目に戻す。 */
a { color: inherit; }
.chip, .hd-btn, .linkbtn, a.btn { text-decoration: none; }

/* ★スマホで見る前提。画面が広いときは中央に寄せて幅を抑える
 *   （カードは1列で読むものなので、広げても読みにくくなるだけ）。 */
.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ink1);
}

/* ★★上の余白は左右と**同じ値**（--edge-pad）。
 *
 * ■ なぜここで持つのか（2026-08-25に直した）
 *   以前は「最初に来る要素の margin / padding」任せだった。その結果
 *   ヘッダーの下が画面ごとに **8px（.doc）/ 14px（.notice）/ 18px（.buy）/
 *   30px（.sec-t）** とばらばらで、左右の16pxとも合っていなかった。
 *   ★同じ余白を要素ごとに書くと、必ずこうなる。**入れ物が持つ。**
 *   ★下は24px のまま。足元は指が触れるので、上より広いほうが具合がよい。 */
/* ★★下は**ホームバーのぶんを足す**（2026-08-26）。
 *   ★ノッチのある機種をホーム画面に追加して起動すると、画面のいちばん下に
 *     34px ほどの横棒（ホームインジケータ）が重なる。24px しか空けていないと、
 *     足元の法令リンクがその下に潜って**押せなくなる**。
 *   ★env() には既定値を書く（解さない相手で calc ごと無効にならないように）。
 *   ★ブラウザのタブで見ているときは 0 なので、いままでと変わらない。 */
.body {
  flex: 1;
  padding: var(--edge-pad) var(--edge-pad)
           calc(24px + env(safe-area-inset-bottom, 0px));
}
/* ★最初に見えている要素の上余白は殺す（.body が持つので二重になる）。
 *   ★h1.sr-only は position:absolute で場所を取らないが、**要素としては最初**。
 *     だから :first-child ではなく「.sr-only の次」を指す。
 *   ★2段目まで見るのは、子の margin が親をすり抜けて（margin collapsing）
 *     入れ物の余白に足し算されるため。#feed の中の .notice がこれに当たる。
 *
 * ★★消すのは margin だけ。**padding には触らないこと**（2026-08-25に踏んだ）。
 *   一度 padding-top も0にしたところ、地と枠線を持つ箱（.notice）の
 *   **中の余白**まで消えて、見出しが枠の上辺にくっついた。
 *   ★margin は「箱の外の隙間」、padding は「箱の中の余白」。
 *     外の隙間を入れ物に寄せる話なので、中身に手を出す理由が無い。
 *   ★外の隙間を padding で作っていた箱（.buy / .doc）は、
 *     その指定そのものを外した（下の .body の padding が受け持つ）。 */
.body > .sr-only + * { margin-top: 0; }
.body > .sr-only + * > :first-child { margin-top: 0; }

/* 非同期で差し替えている最中。
 * ★中身が消えたのか読み込み中なのかが分からない時間を作らない。 */
[aria-busy="true"] { opacity: .5; transition: opacity .1s; }

/* ★★目には出さないが、読み上げと検索には出す（見出し h1 に使う）。
 * ★display:none や visibility:hidden にしないこと——それだと
 *   読み上げからも検索からも**同じように消える**。意味が無くなる。
 * ★1px の窓に押し込んで切り取る、という枯れた手。文字はそこに在る。 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- ヘッダー */
/* ★スクロールしても動かない。中身側に入れると一緒に流れる。 */
.hd {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--brand);
  /* ★★上の余白のぶんだけ**背を伸ばす**（2026-08-26に直した）。
   *
   * ■ 何が起きていたか
   *   このサイトは全体が box-sizing: border-box。つまり height は**枠込み**。
   *   ★height:52px に padding-top を足すと、**中身の高さがそのぶん減る**。
   *   ★ホーム画面に追加して起動すると（apple-mobile-web-app-status-bar-style が
   *     black-translucent なので画面のいちばん上から描く）、
   *     env(safe-area-inset-top) が 20px（iPhone 7）〜47px（ノッチ機）になり、
   *     52px のうち 20〜47px を余白が食って、ロゴと歯車が潰れていた。
   *   ★ブラウザのタブで見ているときは env() が 0 なので**崩れない**。
   *     だから手元では一度も再現しない——実機でホーム画面に追加して初めて出る。
   * ★calc の中の env() には既定値を書く。env() を解さない相手では
   *   calc ごと無効になり、height が消えてしまう。
   */
  height: calc(52px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  /* ★★下に影を落とす。★スクロールで中身が**下をくぐる**ことを見せるため。
   *   影が無いと、留まっているのか一緒に流れているのかが分からない。
   * ★色は黒の 25%。地（--brand）に別の色を混ぜない——
   *   暗い色で落とすと、明るいテーマにしたとき影だけ浮く。
   * ★ぼかしは広めに、下方向だけ。輪郭が出ると「線」に見えて、
   *   区切りが二重（影＋線）になる。 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
/* ロゴ。★濃紺のヘッダーに**白の毛筆を直に置く**。
 * ★★字はSVGのパスではなく**本物の文字**（inc/boot.php の SITE_NAME）。
 *   パスで持つと、名前を変えるたびに字を起こし直すことになる。
 * ★白地の札はやめた。地を敷くと「札」に見える——
 *   名前は札ではなく、そこに書いてあるもの。
 * ★★判子と同じ毛筆（--font-brush）。結果に捺す判子とヘッダーの名前が
 *   同じ筆に見えることで、画面全体が1つの「銘」でつながる。 */
/* ★ロゴと段階を縦に積む入れ物。★行間を詰める（1）——
 *   既定の行間だとヘッダー（52px）に収まらず、名前が上に押し出される。 */
.hd-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
/* ★★いまの段階（先行公開期間）。**小さく、薄く**。
 *   名前より目立つと、商品名が「先行公開期間」に見える。
 * ★字間を空ける。9pxの漢字は詰まって見えるので、離すと読める。
 * ★期間を過ぎると inc/boot.php の site_phase() が空を返し、この行ごと消える。 */
.hd-phase {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .16em;
  /* ★字間を空けたぶん右に余る。半文字ぶん戻して中心をそろえる。 */
  margin-right: -.16em;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}
/* ★★ログイン中の印。**左端に絶対配置**（.hd-btn と対）。
 *   流れに入れると、印の有無でロゴの中心がずれる——
 *   ログインした瞬間に名前が横に動くのは、気持ちの悪い挙動。
 * ★丸は装飾。意味は文字が持っているので、読み上げには丸を出さない。 */
.hd-login {
  position: absolute;
  left: var(--edge-pad);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}
.hd-login::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35D07F; /* raw-ok ★点いている印。札の緑（--badge-ok）より明るく */
  /* ★にじみ。点だけだと汚れに見える。淡い輪を1枚置くと「点いている」に見える。 */
  box-shadow: 0 0 0 2px rgba(53, 208, 127, .22);
}
/* ---------------------------------------------------------------- 道案内の帯 */
/* ★★ヘッダーの直下。全ページに出る（inc/layout.php の global_nav）。
 * ★留めない。ヘッダー（52px）まで留まっているので、帯も留めると
 *   スマホの画面が上から3割埋まって、肝心の中身が見えなくなる。
 * ★地は敷かない。ヘッダーの影がそのまま落ちるので、線1本で足りる。
 *   ★地を敷くと「2段目のヘッダー」に見えて、重たくなる。 */
.gnav {
  border-bottom: 1px solid var(--edge);
  /* ★万一項目が増えて入りきらなくなっても、はみ出して押せなくならないように。
   *   ★いまは4つで収まる（320pxでも余る）ので、普段は働かない。 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gnav::-webkit-scrollbar { display: none; }
.gnav-in {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 calc(var(--edge-pad) - 10px);
  white-space: nowrap;
}
.gnav-a {
  padding: 13px 10px 11px;
  font-size: 13px;
  color: var(--t3);
  text-decoration: none;
  /* ★下線ぶんの場所を先に取る。立ったときだけ動くと、押すたびに行が揺れる。 */
  border-bottom: 2px solid transparent;
  transition: color .14s;
}
.gnav-a:hover { color: var(--t1); }
/* ★いま居るところ。★字を明るくして下に1本。★下線は**帯の線に重ねる**ので、
 *   飾りが増えるわけではない（もともと在る線が、そこだけ濃くなる）。 */
.gnav-a.on {
  color: var(--t1);
  font-weight: 600;
  border-bottom-color: var(--t1);
}
/* ★★予報（ホーム）は**いつも少し立てておく**。ここが本編で、ほかは説明。
 *   ★立っている印（.on）とは別物。あちらは「いま居るところ」、
 *     こちらは「行き先の重さ」。 */
.gnav-a.gnav-main { color: var(--t2); font-weight: 600; }
.gnav-a.gnav-main.on { color: var(--t1); }

/* ★★スマホでは帯を**横いっぱい**に使う（2026-08-26）。
 *   ★狭い画面ほど、余った右側が空いているのがそのまま「使えていない場所」になる。
 *     指で押すものなので、押せる面積は広いほうがいい。
 *   ★予報だけ広く取る。行き先の重さを幅で示す（上の .gnav-main と同じ考え）。
 *
 * ★★flex-basis は **auto のまま**にする（0 にしない）。
 *   0 にすると箱の幅が重みだけで決まるので、
 *   いちばん長い「サービス」（12px×4字＝48px）が 320px の画面で箱に入らず、
 *   nowrap のまま**隣にはみ出す**。auto なら字の幅が先に確保され、
 *   余りだけが重みで配られるので、名前を足しても崩れない。
 *   ★この計算は tools/_smoke_guard.php が実際に検算している。 */
@media (max-width: 559px) {
  .gnav-in {
    padding: 0;
    /* ★横いっぱいに詰めるので、はみ出したときの横流しは要らない。 */
    gap: 0;
  }
  .gnav-a {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 4px; padding-right: 4px;
    text-align: center;
  }
  /* ★余った幅の取り分。ほかの3倍。 */
  .gnav-a.gnav-main { flex-grow: 3; }
}

.hd-mark {
  display: block;
  color: #fff;
  font-family: var(--font-brush);
  /* ★太字にしない。Yuji Syuku は太さが1つしか無いので、bold を指定すると
   *   ブラウザが**機械的に太らせて**筆の線が潰れる。 */
  font-weight: 400;
  /* ★かな4文字。地に直に置くぶん大きくできる（札の内寸に縛られない）。 */
  font-size: 24px;
  letter-spacing: .08em;
  /* ★字間を空けたぶん、右端に余りが出る。1文字ぶん詰めて中央に戻す。 */
  margin-right: -.08em;
  line-height: 1.15;
  white-space: nowrap;
}
/* ---------------------------------------------------------------- 足元 */

/* ★お知らせの流れる帯（2026-09-13）。ナビの下・10px・右→左・無限ループ。
 *   ★流れきったあと数秒おいてから、また右端から入る（keyframes 78%〜100% で待つ）。
 *   ★色は添え字（--t3）／地は帯（--band）。両テーマとも tokens.css の値でそろう。
 *   ★JS を使わない（CSPを汚さない）。動きを止めたい人には流さず折り返す。 */
.news {
  overflow: hidden;
  background: var(--band);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  line-height: 2.0;
}
.news-run {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;          /* ★右端から始める */
  color: var(--t3);
  will-change: transform;
  animation: news-run 30s linear infinite;
}
.news-i { margin-right: 3em; }
.news-i time { color: var(--t3); }
.news-t { margin: 0 .5em; color: var(--accent); font-weight: 600; }
@keyframes news-run {
  0%   { transform: translateX(0); }
  78%  { transform: translateX(-100%); }   /* ★流れきる */
  100% { transform: translateX(-100%); }   /* ★数秒待ってから 0% へ戻る */
}
@media (prefers-reduced-motion: reduce) {
  .news { line-height: 1.6; }
  .news-run { animation: none; padding-left: var(--edge-pad); white-space: normal; }
  .news-i { display: inline-block; margin: 2px 1em 2px 0; }
}
/* ★法令のページへの口。**全ページの下**に置く（inc/layout.php の layout_foot）。
 *   特商法の表記は「消費者が容易に到達できる」ことが要る＝1回で行けること。
 * ★目立たせない。読む物ではなく、**探したときに必ずある**もの。 */
/* ★★ここに**サイトの道案内は置かない**（理由は inc/legal.php）。
 *   同じ行き先が上の帯に全ページ出ているので、置くと丸ごと重複する。
 *   ★足元は法令の3枚だけ。義務で置いてあるもので、読ませる物ではない。
 * ★札（枠と地）にしない。飾ると、本文より足元のほうが目立つ。 */
.foot {
  margin: 44px 0 0;
  padding: 20px 0 4px;
  border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 12px; color: var(--t3);
}
.foot a {
  color: var(--t3); text-decoration: none;
  transition: color .14s;
}
.foot a:hover { color: var(--t2); }

/* ★★いま開いているページ。リンクにしない——押しても何も起きない＝押し損。
 * ★★以前はほかより**暗く**していたが、それだと居場所を示すはずの印が
 *   並びの中でいちばん目立たないという逆のことになっていた（2026-08-26に直した）。
 * ★★丸印はやめた。**字の重さと明るさの2つ**で足りる——
 *   まわりが --t3 の細字なので、--t2 の太字は並びの中で確実に浮く。
 *   ★示し方はサイト全体で1つに決める（読み物の .page-nav-here と同じ作り）。 */
.foot-here { color: var(--t2); font-weight: 600; }

/* ★「動きを減らす」を選んでいる人には、色や線の移り変わりも出さない。 */
@media (prefers-reduced-motion: reduce) {
  .gnav-a, .foot a { transition: none; }
}

/* ---------------------------------------------------------------- 上に戻る口 */
/* ★★2画面ぶん送ったら右下に出る（js/top.js が作って出し入れする）。
 *
 * ■ ★重なりの順（css/flash.css の一覧と同じ並び）
 *     ヘッダー 10 ／ **上に戻る 15** ／ 期間の選択 20 ／ 写真 30 ／
 *     通知 40 ／ 年齢 50
 *   ★モーダルより**下**に置く。上に置くと、写真を大きく見ている最中や
 *     通知が出ている最中に、丸だけが浮いて残る。
 *   ★本文より上には居る（読んでいる字に隠れない）。
 *
 * ■ ★置き場所は右下。★左下にしない——親指の届く側は端末と持ち手で変わるが、
 *   「戻る・進む」の類はブラウザが左に置くので、そこと取り合わない。
 * ★下端は safe-area ぶん上げる。iPhone のホームバーに重ねない。 */
.totop {
  position: fixed;
  z-index: 15;
  right: var(--edge-pad);
  bottom: calc(var(--edge-pad) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  /* ★指で押せる大きさ（44px）。小さくすると、いちばん急いでいる人が外す。 */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  /* ★地を敷く。★透けさせない——下を字が流れると、矢印が読めなくなる。 */
  background: var(--ink3);
  color: var(--t1);
  cursor: pointer;
  /* ★★出入りをふわりと。★下から少し上がって出る＝「上へ行く」向きと揃う。 */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s, border-color .14s;
}
.totop.on { opacity: 1; transform: translateY(0); }
.totop:hover { border-color: var(--line2); background: var(--ink4); }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.totop svg { width: 20px; height: 20px; }
/* ★★写真を大きく見ている間は出さない。★あちらは画面いっぱいなので、
 *   丸が残ると写真の上の汚れに見える（重なりの順では隠れるが、
 *   端末によっては fixed どうしの前後が入れ替わる）。 */
body.bl-on .totop { display: none; }
/* ★「動きを減らす」人には、出入りも動かさない（js/top.js は送り方も変える）。 */
@media (prefers-reduced-motion: reduce) {
  .totop { transition: none; transform: none; }
  .totop.on { transform: none; }
}
/* ★著作権表示。法令の口より**さらに引く**。読む物ですらなく、
 *   「誰のものか」を示すためだけに置いてある。 */
.foot-c {
  margin-top: 10px;
  padding-bottom: 4px;
  font-size: 11px; color: var(--line2);
}

/* ★戻るも歯車も**同じ位置（右端）**に置く。左右に飛ぶと目が追う先が画面ごとに
 *   変わって押し間違いのもとになる。 */
.hd-btn {
  position: absolute;
  right: var(--edge-pad);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  /* ★アイコンだけだと「押せる物」に見えないので枠を付ける。
   *   枠は白50%・地は白10%。濃紺の上でうっすら浮く程度にしてロゴより目立たせない。 */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.5);
  cursor: pointer;
}
.hd-btn:active { background: rgba(255,255,255,.2); }
.hd-btn svg { width: 20px; height: 20px; fill: #fff; }