@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho+B1:wght@400;500;600&display=swap");

:root {
  --ink: #30493d;
  --ink-soft: #64786c;
  --sage: #78a98d;
  --sage-deep: #4f7a65;
  --mint: #edf7ef;
  --white: #fffefa;
  --gold: #bf9d58;
  --serif: "Shippori Mincho B1", "Yu Mincho", serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --latin: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 2026-08-30: body.hibiki-v3 に scoping し、hibiki-v2 と共存時 (sub-page) に palette を上書きする */
body.hibiki-v3 {
  margin: 0;
  overflow-x: hidden;
  background: var(--mint);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.8;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(120, 169, 141, 0.28); }
:focus-visible { outline: 2px solid #6f9f84; outline-offset: 4px; }

.cosmos {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(249, 253, 249, 0.48) 45%, rgba(239, 248, 241, 0.9) 77%, #edf7ef 100%),
    url("line-assets/hibiki-v3/hero-katakamu-light.png") center top / 100% auto no-repeat,
    var(--mint);
}
.cosmos::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(90deg, rgba(247, 253, 247, 0.36), transparent 28%, transparent 72%, rgba(247, 253, 247, 0.36));
  pointer-events: none;
}
.cosmosNoise {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.siteHeader {
  position: relative;
  z-index: 10;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(79, 122, 101, 0.18);
}
.brand img { width: 196px; }
.siteNav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--sage-deep);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.siteNav a { text-decoration: none; opacity: 0.76; transition: opacity 0.2s, transform 0.2s; }
.siteNav a:hover { opacity: 1; }
.siteNav .navCta {
  padding: 9px 20px;
  border: 1px solid rgba(79, 122, 101, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  opacity: 1;
}

/* ===== NAVDROP-BLOCK BEGIN (2026-09-08 追加)
   対象: .hibiki-v2 を持たないページ (hibiki-v3 単独 = index.html /
   hibiki-sf = success-frequency.html)。
   理由: hibiki-v2.css:1048- の .navDrop ポップオーバーは
   `.hibiki-v2 .siteNav .navDrop*` にスコープされ、body に
   .hibiki-v2 が無いページには一切効かない。index.html にある
   `.tn-nav-drop*` (1235-1298行) は実マークアップの `.navDrop` と
   クラス名が一致せず不発 — そちらは *-v1.html 用の遺産なので
   本 diff では触らない。
   body:not(.hibiki-v2) で限定するため、既に正常な
   recovery-sound.html / wealth-recovery-sound.html / news.html
   (いずれも body class に .hibiki-v2 を含む) には一切マッチしない。

   2026-09-08 追記 (回帰修正): ポップオーバー化の副作用で 1024px 幅の
   「新着」等が 21px に潰れる回帰が実測された (.navDrop が閉状態でも発生)。
   原因: .navDrop > summary にだけ white-space:nowrap を与えたため summary
   が縮まなくなり、同じ flex 行の他の .siteNav > a が代わりに圧縮された。
   対策は 2 つ:
   (1) .siteNav > a / .navCta にも nowrap を与えて文字単位の折返しを禁止、
   (2) 901-1179px の帯だけ gap を 30→20px に縮め、実測不足分 (22-24px) を
   吸収する (7 gap × 10px = 70px 空くので余裕あり)。1180px 以上は
   元の gap 30px のまま (実測で充分足りている)。
   ===== */
body:not(.hibiki-v2) .siteNav > a,
body:not(.hibiki-v2) .siteNav .navCta {
  white-space: nowrap;
}
body:not(.hibiki-v2) .siteNav .navDrop {
  position: relative;
}
body:not(.hibiki-v2) .siteNav .navDrop > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
body:not(.hibiki-v2) .siteNav .navDrop > summary::-webkit-details-marker { display: none; }
body:not(.hibiki-v2) .siteNav .navDrop > summary::marker { content: ""; }
body:not(.hibiki-v2) .siteNav .navDropMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 180px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(79, 122, 101, 0.28);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(46, 79, 61, 0.16);
  backdrop-filter: blur(10px);
  z-index: 200;
}
body:not(.hibiki-v2) .siteNav .navDrop:not([open]) .navDropMenu {
  display: none;
}
body:not(.hibiki-v2) .siteNav .navDropMenu a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  color: #2f4a3d;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
}
body:not(.hibiki-v2) .siteNav .navDropMenu a:hover,
body:not(.hibiki-v2) .siteNav .navDropMenu a[aria-current="page"] {
  background: rgba(79, 122, 101, 0.12);
}
body:not(.hibiki-v2) .siteNav .navDropMenu a:focus-visible {
  outline: 2px solid rgba(79, 122, 101, 0.75);
  outline-offset: 2px;
}
/* モバイル (≤900px) は既存の縦積みナビ (386-435行 / 486-550行) に合わせ、
   ポップオーバーを解除して縦 1 列に戻す。761-900px 帯は Issue #11/#12 の
   wrap 帯なのでこちら側 (縦 1 列) に含める。 */
@media (max-width: 900px) {
  body:not(.hibiki-v2) .siteNav .navDropMenu {
    position: static;
    top: auto; right: auto; left: auto;
    min-width: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    z-index: auto;
  }
  body:not(.hibiki-v2) .siteNav .navDrop:not([open]) .navDropMenu {
    display: none;
  }
}
/* 901-1179px の帯だけ gap を詰めて 1 行に収める (回帰修正、上記コメント参照)。
   901 / 960 / 1024 / 1100px の必要幅はいずれも新 gap で収まる (計算値、後述コメント)。
   1180px 以上は現状の gap 30px のままにする (実測で充分足りている)。 */
@media (min-width: 901px) and (max-width: 1179px) {
  body:not(.hibiki-v2) .siteNav {
    gap: 20px;
  }
}
/* ===== NAVDROP-BLOCK END ===== */

.hero {
  position: relative;
  z-index: 2;
  min-height: 730px;
  padding: 100px 24px 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.eyebrow {
  margin: 0 0 24px;
  color: #647e70;
  font-family: var(--latin);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
}
.hero h1 {
  margin: 0;
  color: #2c4739;
  font-family: var(--serif);
  font-size: clamp(40px, 5.8vw, 72px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.07em;
  text-wrap: balance;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.94));
}
.hero h1 span { display: block; }
.heroLead {
  margin: 31px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #476052;
  font-family: var(--serif);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 2.05;
  letter-spacing: 0.065em;
}
.heroLead strong { color: #365747; font-weight: 600; }
.heroCta {
  min-width: min(380px, 100%);
  margin-top: 42px;
  padding: 15px 27px;
  display: flex;
  justify-content: center;
  gap: 22px;
  border: 1px solid rgba(79, 122, 101, 0.18);
  border-radius: 999px;
  background: linear-gradient(120deg, #6f9f84, #86b49a);
  box-shadow: 0 18px 42px rgba(76, 118, 96, 0.18);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.heroCta:hover { transform: translateY(-2px); box-shadow: 0 22px 48px rgba(76, 118, 96, 0.24); }

.soundStage {
  position: relative;
  z-index: 3;
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px clamp(24px, 7vw, 78px) 64px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 42px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.88), rgba(244, 251, 246, 0.78));
  box-shadow: 0 38px 100px rgba(68, 107, 86, 0.16), inset 0 1px rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px);
}
.soundStageIntro h2 {
  margin: 0 0 8px;
  color: #304d3f;
  font-family: var(--serif);
  font-size: clamp(27px, 4.8vw, 42px);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.soundStageIntro > span {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.nameForm { max-width: 500px; margin: 34px auto 0; text-align: left; }
.nameForm label {
  display: block;
  margin: 0 0 8px 5px;
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.15em;
}
.nameForm > div {
  padding: 5px;
  display: flex;
  border: 1px solid rgba(93, 137, 113, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 3px rgba(73, 105, 87, 0.06);
}
.nameForm > div:focus-within {
  border-color: rgba(79, 122, 101, 0.62);
  box-shadow: 0 0 0 4px rgba(120, 169, 141, 0.12);
}
.nameForm input {
  min-width: 0;
  flex: 1;
  padding: 8px 18px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  letter-spacing: 0.1em;
}
.nameForm input:focus-visible { outline: 0; }
.nameForm button {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #6f9f84;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.signature { margin: 32px 0 28px; }
.kataLine { display: flex; justify-content: center; gap: 5px; overflow: hidden; }
.kataLine > span {
  width: 34px;
  opacity: 0.72;
  animation: kataFloat 4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.kataLine img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: sepia(1) saturate(0.82) hue-rotate(3deg) drop-shadow(0 1px 4px rgba(165, 129, 62, 0.18));
}
.kataLine small { display: block; color: #a7864d; font-size: 8px; }
.signature > p {
  margin: 10px 0 3px;
  color: #365344;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.22em;
}
.signature > small {
  color: #819087;
  font-family: var(--latin);
  font-size: 9px;
  letter-spacing: 0.16em;
}
@keyframes kataFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.modeTabs {
  max-width: 500px;
  margin: 34px auto 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.modeTabs button {
  position: relative;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(93, 137, 113, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.68);
  color: #6f8277;
  cursor: pointer;
  transition: 0.25s ease;
}
.modeTabs button span { font-family: var(--serif); font-size: 17px; }
.modeTabs button small { font-size: 10px; letter-spacing: 0.1em; }
.modeTabs button.active {
  border-color: var(--mode-accent);
  background: color-mix(in srgb, var(--mode-accent) 12%, #fff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--mode-accent) 18%, transparent);
  color: #345141;
}

.earthWrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 5px auto 0;
  display: grid;
  place-items: center;
}
.earthButton {
  position: relative;
  z-index: 3;
  width: 230px;
  height: 230px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 15px 24px rgba(65, 108, 91, 0.18));
  transition: transform 0.35s, filter 0.35s;
}
.earthButton:hover { transform: scale(1.025); filter: brightness(1.06) drop-shadow(0 17px 28px rgba(65, 108, 91, 0.22)); }
.earthButton:focus-visible { border-radius: 50%; }
.earthButton img { width: 100%; height: 100%; object-fit: contain; }
.earthButton span {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.86);
  font-size: 9px;
  letter-spacing: 0.2em;
}
.orbit { position: absolute; inset: 22px; border: 1px solid rgba(99, 153, 132, 0.2); border-radius: 50%; }
.orbitTwo { inset: 47px 15px; transform: rotate(62deg); }
.isPlaying .earthButton { animation: earthPulse 3.2s ease-in-out infinite; }
.isPlaying .orbitOne { animation: orbitSpin 8s linear infinite; }
.isPlaying .orbitTwo { animation: orbitSpinTwo 10s linear infinite reverse; }
@keyframes earthPulse { 50% { transform: scale(1.045); filter: brightness(1.12) drop-shadow(0 0 25px rgba(83, 143, 120, 0.35)); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinTwo { from { transform: rotate(62deg); } to { transform: rotate(422deg); } }
.modeLabel {
  margin: -5px 0 12px;
  color: #6b8878;
  font-family: var(--latin);
  font-size: 9px;
  letter-spacing: 0.34em;
}
.progress { max-width: 500px; margin: 0 auto; }
.progressTrack { height: 1px; background: rgba(79, 122, 101, 0.18); }
.progressTrack span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #79a98e, #b6cda8);
  transition: width 0.1s linear;
}
.progressMeta {
  margin-top: 11px;
  display: flex;
  justify-content: space-between;
  color: #819087;
  font-family: var(--latin);
  font-size: 9px;
  letter-spacing: 0.15em;
}
.soundNote {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  padding: 66px 0 100px;
  color: #5c7467;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-align: center;
}

footer {
  padding: 52px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border-top: 1px solid rgba(79, 122, 101, 0.14);
  background: #f8fcf8;
  color: #718378;
  text-align: center;
}
footer img { width: 190px; margin-bottom: 8px; }
footer p { margin: 0; font-family: var(--serif); font-size: 12px; letter-spacing: 0.08em; }
footer span { font-family: var(--latin); font-size: 9px; letter-spacing: 0.16em; }

@media (max-width: 760px) {
  .cosmos {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(249, 253, 249, 0.56) 37%, rgba(239, 248, 241, 0.94) 67%, #edf7ef 100%),
      url("line-assets/hibiki-v3/hero-katakamu-light.png") center 72px / auto 620px no-repeat,
      var(--mint);
  }
  /* ── モバイルナビ再設計 (2026-09-05) ──
     旧: .siteNav が flex nowrap のまま各項目内で文字が折り返し、
         1 文字ずつ縦に積まれて「縦書き状」に崩れていた (390px で高さ 194px)。
     新: ヘッダーを縦積みにし、ナビは項目単位で wrap させる。
         各項目は white-space:nowrap で文字を割らず、44px のタップ領域を持つ。 */
  .siteHeader {
    width: calc(100% - 36px); padding: 14px 0;
    flex-direction: column; align-items: center; gap: 10px;
  }
  .brand img { width: 158px; }
  .siteNav {
    flex-wrap: wrap;                 /* 項目単位で折り返す */
    justify-content: center;
    gap: 6px 10px;
    font-size: 13px; letter-spacing: 0.04em;
    width: 100%;
  }
  .siteNav > a,
  .siteNav .navDrop > summary {
    white-space: nowrap;             /* 文字を途中で割らない = 縦書き化の防止 */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 12px;   /* タップ領域 44px 以上 */
    line-height: 1.2;
  }
  .siteNav .navDropMenu a {
    white-space: nowrap;
    display: flex; align-items: center;
    min-height: 44px; padding: 0 14px;
  }
  .siteNav .navCta { padding: 0 18px; font-size: 13px; min-height: 44px; }
  .hero { min-height: 680px; padding: 82px 20px 110px; }
  .eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: 0.22em; }
  .hero h1 { font-size: clamp(34px, 10.6vw, 49px); line-height: 1.48; letter-spacing: 0.035em; }
  .heroLead { margin-top: 24px; gap: 10px; font-size: 13px; line-height: 1.95; letter-spacing: 0.03em; }
  .heroLead span br { display: none; }
  .heroCta { min-width: 0; width: min(350px, 100%); margin-top: 34px; padding-inline: 19px; font-size: 11px; letter-spacing: 0.06em; }
  .soundStage { width: calc(100% - 24px); padding: 54px 18px 47px; border-radius: 28px; }
  .soundStageIntro h2 { font-size: 27px; line-height: 1.55; letter-spacing: 0.04em; }
  .nameForm > div { border-radius: 22px; }
  .nameForm input { padding-inline: 12px; }
  .nameForm button { padding-inline: 14px; font-size: 10px; }
  .kataLine { gap: 1px; }
  .kataLine > span { width: 25px; }
  .kataLine img { width: 24px; height: 24px; }
  .modeTabs { gap: 7px; }
  .modeTabs button { padding: 12px 6px; gap: 6px; }
  .earthWrap { width: 245px; height: 245px; }
  .earthButton { width: 205px; height: 205px; }
  .soundNote { padding: 52px 0 76px; font-size: 13px; line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kataLine > span,
  .isPlaying .earthButton,
  .isPlaying .orbitOne,
  .isPlaying .orbitTwo { animation: none; }
}

/* ── 生年月日ラベルの補足 (2026-09-05) ──
   本文より少し薄いが WCAG AA を満たす濃度。#4b6558 on #fffefa = 6.1:1。
   スマホで不自然な 1 文字折返しをしないよう、補足のみ改行可能にする。 */
.tn-label-note {
  color: #4b6558;
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  /* 全角スペースを改行位置に使い、補足だけを次行へ落とす */
  .tn-label-note { display: inline-block; }
}

/* 入力欄を label 付きグループにする (2026-09-05)。
   狭幅では 1 列に落ち、広幅では横並び。min-width:0 で溢れを防ぐ。 */
.nameFormRow { flex-wrap: wrap; }
.tn-field-group {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 240px; min-width: 0;
}
.tn-field-group > label {
  font-size: 15px; line-height: 1.7; text-align: left;
}
@media (max-width: 760px) {
  .tn-field-group { flex: 1 1 100%; }
}

/* ── モバイルナビの統一 (2026-09-05 / 2026-09-07 Issue #11 で 900px へ拡張) ──
   TOP を基準に、全ページで「横書き・項目単位で折り返し」に揃える。
   hibiki-v2.css:199-220 の折り畳み式ハンバーガーは使わない。
   v3.css は v2.css の後に読み込まれるため、同一詳細度で後勝ちする。

   breakpoint は **hibiki-v2.css:167 の @media (max-width: 900px) と揃える**。
   以前ここが 760px だったため 761-900px に穴があり、
   「v2 の折り畳みナビ (max-height:0) が効くのにハンバーガーは v3 が
   display:none !important で消している」= **ナビが 1 つも見えない**状態だった
   (実測 2026-09-07: 800/844/900px で可視リンク 8 件すべて高さ 0)。
   さらに navDrop を開くと固定ヘッダーがタイトルへ重なっていた。 */
.v2NavCheck, .v2NavToggle { display: none !important; }

@media (max-width: 900px) {
  .hibiki-v2 .siteHeader {
    flex-direction: column; align-items: center; gap: 10px;
  }
  .hibiki-v2 .siteNav {
    order: 0; width: 100%;
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 6px 10px;
    max-height: none; overflow: visible;
    padding: 0; margin-top: 0;
    border-top: 0;
    font-size: 13px; letter-spacing: 0.04em;
  }
  .hibiki-v2 .siteNav > a,
  .hibiki-v2 .siteNav .navDrop > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; white-space: nowrap;
    min-height: 44px; padding: 0 12px; font-size: 13px;
    line-height: 1.2;
  }
  .hibiki-v2 .siteNav .navDropMenu a {
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; min-height: 44px; padding: 0 14px;
  }
  .hibiki-v2 .siteNav .navCta { padding: 0 18px; min-height: 44px; font-size: 13px; }

  /* ── 固定ヘッダーとタイトルの重なり修正 (Issue #11 / 2026-09-07) ──
     原因: .hibiki-v2 .siteHeader は position:fixed (hibiki-v2.css:89) で
     文書フローから外れるのに、それを補う body の padding-top は
     66px / 58px + banner という **固定値** (hibiki-v2.css:229,240) だった。
     一方すぐ上のブロックが mobile nav を常時 wrap 表示へ上書きしているため、
     ヘッダーの実高は 268-318px になり、差分がそのままタイトルへ重なっていた
     (実測: 320px で 144-170px、390px で 94-120px)。

     修正: モバイルではヘッダーを **文書フローへ戻す**。実高がそのまま
     レイアウトに反映されるので、ページごとの固定 px 調整が要らなくなる。
     TOP (index.html = hibiki-v3 のみ) は元からこの形で重なっていない。

     body の padding-top は、フロー外に残る唯一の要素である
     テストサーバ警告バナー (test-server-banner.js: position:fixed; top:0)
     の高さぶんだけにする。バナーが無い環境では 0 になる。

     常時表示の横書き wrap メニューと 44px タップ領域はそのまま維持する。
     desktop (>900px) の position:fixed は変更しない。
     (このブロックの breakpoint は hibiki-v2.css:167 と同じ 900px) */
  .hibiki-v2 .siteHeader { position: static; }
  body.hibiki-v2, body.hibiki-v2-inner { padding-top: var(--v2-banner-height, 0px); }

  /* v2 クラスを持たない TOP (hibiki-v3 のみ) は 761-900px で v3 の desktop nav が当たり、
     flex-wrap:nowrap + white-space:normal のため項目が潰れて「新着」が 17px 幅 =
     1 文字ずつ縦に折れていた (実測 2026-09-07: 844x390 の横向き)。
     v2 / v3 どちらのページでも、この帯では項目単位で折り返し・文字は割らない。 */
  .siteNav { flex-wrap: wrap; justify-content: center; }
  /* 44px タップ領域は ≤760px のブロックにしか無く、761-900px では 22px しか
     なかった (実測 2026-09-07)。この帯にも同じ最小寸法を効かせる。 */
  .siteNav > a,
  .siteNav .navDrop > summary,
  .siteNav .navDropMenu a,
  .siteNav .navCta {
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; line-height: 1.2;
  }
}

/* 固定バナー分のスクロール余白 (2026-09-05)。
   test-server-banner.js が --v2-banner-height を公開する。
   これが無いと、スクロールで要素がバナーの下に隠れてタップできない。 */
html { scroll-padding-top: calc(var(--v2-banner-height, 41px) + 12px); }
input, button, a[href^="#"], :target {
  scroll-margin-top: calc(var(--v2-banner-height, 41px) + 12px);
}