@charset "UTF-8";
/* ==========================================================================
   parts.css — 共通パーツ（ヘッダー／グローバルナビ／フッター／利用者の声モーダル）
   --------------------------------------------------------------------------
   一次資料:
     specs/00_共有シンボル.md            … S-01 / S-02 / S-03 / S-06 / S-07 の逐語実測値
     （§7 の利用者の声モーダルだけは設計ツリーに無く、現行サイトの実測が一次資料。§7 の注記参照）
     specs/_確定事項_ブレークポイント.md … BP4段・display 明示ルールの正本
     codex_handoff_静的24ページ.md §2-1/§2-5/§2-9

   読み込み順（inc/enqueue.php）:
     ordinary-fonts → ordinary-base(base.css) → ordinary-tokens(tokens.css)
     → ordinary-style(style.css) → ordinary-parts(このファイル)
   ＝ base.css の .o-header / ユーティリティを、ここで上書きしてよい。

   ブレークポイント規約（base.css §0 と同じ・厳守）:
     R1. ソース順は必ず 1140 → 840 → 540 → 320
     R2. display の切替は狭い側にも明示的に書く（継承・ソース順に頼らない）
     R3. 1本のセレクタのMQブロックを分散させない
     R4. 375px では 1140 / 840 / 540 の3本が同時適用される

   このファイルに「推測で作った値」は入れていない。
   抽出データに無い指定は TODO コメントで明示している。
   ========================================================================== */


/* ==========================================================================
   0. 共通部品
   ========================================================================== */

/* --------------------------------------------------------------------------
   0-1. スキップリンク
   仕様書には無い。キーボード操作の到達性のために足した最小限の補助。
   遷移先の #content はページテンプレート側の <main id="content"> を想定する。
   -------------------------------------------------------------------------- */
.o-skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--o-header-z) + 10);
  padding: 12px 20px;
  background: var(--o-c-navy, #082b34);
  color: var(--o-c-white, #ffffff);
  font-size: 14px;
  font-weight: 700;
}
.o-skip-link:focus{
  left: 0;
}

/* --------------------------------------------------------------------------
   0-2. アイコン（Material Icons のリガチャ）
   現行サイトは Material Icons と Font Awesome を併用している（handoff §2-9）。
   TODO(§2-9): 2ライブラリ併用を避け SVGスプライトへ一本化する方針。
     スプライト整備後、この .o-icon は <svg><use> に置き換えて削除できる。
     それまでは Material Icons（Google Fonts）を読み込んでリガチャで出す。
     ウェブフォントが落ちた場合はリガチャ名がそのまま文字として見えるため、
     一本化は速度だけでなく表示崩れの観点でも早めに済ませたい。
   -------------------------------------------------------------------------- */
.o-icon{
  font-family: "Material Icons", "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   0-3. ハンバーガーボタン
   S-02 / S-06 の実測値: Material Icons `dehaze` / font-size 24px /
   color #000000 / padding 10px
   表示切替は各ヘッダー側で定義する（BPが異なるため）。
   -------------------------------------------------------------------------- */
.o-hamburger{
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--o-c-black, #000000);
  line-height: 1;
}
.o-hamburger .o-icon{
  font-size: 24px;
}

/* --------------------------------------------------------------------------
   0-4. オフキャンバス
   ★中身は完全に未確認（00_共有シンボル.md §4-1 / handoff §8-B2）。
     ここのスタイルはデザイン再現ではなく、暫定の器。採取後に丸ごと差し替える。
   -------------------------------------------------------------------------- */
.o-offcanvas{
  position: fixed;
  inset: 0;
  z-index: calc(var(--o-header-z) + 5);
}
.o-offcanvas[hidden]{
  display: none;
}
.o-offcanvas__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(8, 43, 52, 0.5);
}
.o-offcanvas__panel{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  padding: 80px 24px 40px;
  overflow-y: auto;
  background: var(--s-color-2c90be8a, #fbf8f5);
  font-family: var(--s-font-f88553ee);
}
.o-offcanvas__close{
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 10px;
  color: var(--o-c-black, #000000);
  line-height: 1;
}
.o-offcanvas__close .o-icon{
  font-size: 24px;
}
.o-offcanvas__list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.o-offcanvas__link,
.o-offcanvas__heading{
  display: block;
  padding: 12px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--o-c-navy-deep, #14314a);
  line-height: 1.4;
}
.o-offcanvas__heading{
  opacity: .7;
}
.o-offcanvas__item--level2 .o-offcanvas__link{
  padding-left: 24px;
  font-size: 15px;
}

/* 末尾CTA（任意・2026-09-15 追加。いまは S-03 企業向けだけが渡す）。
   なぜ: S-03 は @mini（320px以下）でバー内のCTAが物理的に入らず（実測 359.9px > 320px）、
     メニュー内が唯一の「無料相談」導線になるため。
   値の根拠: S-03 バー内CTA（.o-hdr-ftc__cta-link）の実測値をそのまま使う。
     height 40px / border-radius 4px / font 14px・700 / color #082b34 / アイコン 34x34（24px）。
     ＝ 新しい色や寸法を作っていない。padding-left はメニュー項目（.o-offcanvas__link の 8px）に揃える。
   margin-top は項目の上下 padding（12px）と同値。 */
.o-offcanvas__cta{
  margin-top: 12px;
}
.o-offcanvas__cta-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #082b34;
  line-height: 1.25;
  white-space: nowrap;
}
.o-offcanvas__cta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 24px;
}


/* ==========================================================================
   1. S-01 グローバルフッター（bd0ae354 / 全29ルート共通）
   --------------------------------------------------------------------------
   実測値:
     背景 #082b34ff / padding 50px 48px 50px（@mobile 50px 48px 100px）/ width 100% / 中央寄せ
     内側コンテナ width 1080px / 3カラム（各 33.3% / gap 20px / 上段 height 190px）
     @mobile: flex-direction column、各カラム width 100%
     テキスト共通 var(--s-font-f88553ee) / 14px / 700 / #f9fafbff / letter-spacing .1em / line-height 1.6
     ロゴ width 300px / height auto / margin 0 0 11px 0 / リンク `/`
     コピーライト 11px / 700 / #f9fafbff / letter-spacing .1em
   ========================================================================== */
.o-footer{
  width: 100%;
  padding: 50px 48px 50px;
  background: #082b34;
  color: #f9fafb;
  font-family: var(--s-font-f88553ee);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.o-footer__inner{
  width: 100%;
  max-width: 1080px;
}

/* 現行サイト実測（1440x900・2026-09-13）:
   カラム間の gap は 0。3カラムが各 360px（=1080/3）で並ぶ。
   高さは固定 190px ではなく、いちばん高いカラム（サービス6項目＝234px）で決まる。
   当初 height:190px / gap:20px で組んでいたため、フッターが 92px 低かった。 */
.o-footer__cols{
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: 190px;
}

.o-footer__col{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 33.333%;
}

.o-footer__logo{
  width: 300px;
  height: auto;
  margin: 0 0 11px 0;
}

/* カラム内の縦間隔は 20px（現行実測）。
   サービス6項目 = 22.4px x 6 + 20px x 5 = 234.4px でカラム高と一致する。 */
.o-footer__list{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-footer__link{
  display: inline-block;
  /* タップ領域の拡張（2026-09-14）。
     なぜ: 文字の行ボックスが 22px しかなく、全ページ・全幅で audit の tinyTargets に
     9件挙がっていた（例 375px「プライバシーポリシー」154x22）。現行サイトも同じ 22px
     （＝移行によるズレではなく元からの状態）だが、指の当たり判定としては小さすぎる。
     根拠: リンクの行ピッチは gap:20px ＋ 行高 22px ＝ 42px あり、リンク間に 20px の空きがある。
     padding で 22→40px に広げ、同値の負マージンで打ち消すので
     行ピッチ・リンクの x/y・フッター高は 1px も動かない（実測で確認済み）。
     ※ 副作用として audit の overflowsBox に li.o-footer__item（overTop 9 / overBottom 9）が
       全ページで1件出る。これは「背景も枠も無い padding が li の箱から 9px はみ出している」
       だけで、見た目にも重なりにも影響しない既知のノイズ。隣のリンクの当たり判定とも
       2px 空く（行ピッチ 42px − 当たり判定 40px）。 */
  padding-block: 9px;
  margin-block: -9px;
}
.o-footer__link:hover{
  text-decoration: underline;
}

/* 現行実測: カラム下端からコピーライト上端まで 48px。
   水平位置は footer の align-items:center で中央に置かれる（設計ツリー bd0ae354 ルート）。
   ここが幅いっぱいのブロックのままだと text-align:left が効いて左端に貼り付く。
   現行実測 2026-09-14: x=649(1440) / 313(768) / 116(375) ＝ いずれも水平中央。 */
.o-footer__copyright{
  width: fit-content;
  margin: 48px auto 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* R1: 1140 → 840 → 540 → 320 */
@media screen and (max-width: 1140px){
  .o-footer__cols{ display: flex; flex-direction: row; min-height: 190px; }
  .o-footer__col{ width: 33.3%; }
}
@media screen and (max-width: 840px){
  .o-footer__cols{ display: flex; flex-direction: row; min-height: 190px; }
  .o-footer__col{ width: 33.3%; }
  /* 設計ツリー bd0ae354 /0（7949c36d）@tablet: margin 0 0 20px 0。
     base の 48px のままだと 840px 以下でフッターが現行より 28px 高くなっていた。
     現行実測 2026-09-14: 最終リンク下端→コピーライト上端 = 20px（375 / 768 とも）。 */
  .o-footer__copyright{ margin-top: 20px; }
}
@media screen and (max-width: 540px){
  /* 下の 100px は設計ツリーの実測値。画面下に固定バーを置くページ（campain / liteblue の
     #footerbar は実測 148px）ではこれでは足りず、コピーライトがバーに埋まる。
     その場合は共通側を触らず、ページ側の CSS で .o-footer の padding-bottom を
     「固定要素の実測高 ＋ ガター」に上書きすること（2026-09-14 申し送り）。 */
  .o-footer{ padding: 50px 48px 100px; }
  .o-footer__cols{ display: flex; flex-direction: column; gap: 20px; min-height: 0; }
  .o-footer__col{ width: 100%; }
  .o-footer__copyright{ margin-top: 20px; }
  /* 設計ツリー bd0ae354 @mobile: ロゴ列（ce793d68）は alignItems center、
     会社列（92ffa420）とサービス列（d634f761）は alignItems flex-end。
     現行実測 2026-09-14: 430px でロゴ x=65（列 48..382 の中央）、
     375/430 ともリンクの右端が 327 / 382（= 画面幅 - padding 48）で揃う。
     移行時にここが左揃えのままで、スマホのフッターだけ並びが現行と違っていた。 */
  .o-footer__col--logo{ align-items: center; }
  .o-footer__col--company .o-footer__list,
  .o-footer__col--service .o-footer__list{ align-items: flex-end; }
}
@media screen and (max-width: 320px){
  .o-footer{ padding: 50px 48px 100px; }
  .o-footer__cols{ display: flex; flex-direction: column; gap: 20px; min-height: 0; }
  .o-footer__col{ width: 100%; }
  .o-footer__copyright{ margin-top: 20px; }
  .o-footer__col--logo{ align-items: center; }
  .o-footer__col--company .o-footer__list,
  .o-footer__col--service .o-footer__list{ align-items: flex-end; }
}


/* ==========================================================================
   2. S-02 グローバルヘッダー（180cdd0f・コーポレート現行）
   --------------------------------------------------------------------------
   実測値:
     position:fixed / top:0 left:0 right:0 / height:80px / width:100% / padding:0 30px
     background var(--s-color-2c90be8a)（= #fbf8f5ff）/ backdrop-filter: blur(0px)
     @mobile: background transparent / padding 0 10px
     ロゴ width 300px（@mobile 200px）/ margin-left -50px / hover opacity .7 scale 1.05 600ms
     ナビ親Box display:flex → @mobile / @tablet で none / gap 10px
     ナビ項目 16px / 700 / #14314a / line-height 1.4 / border-radius 36px / padding 8px 10px
              hover background #f6f2efff
     ドロップダウン panel: background var(--s-color-2c90be8a) / border-radius 8px /
              padding 12px / gap 10px / width 120% / margin-top 27px
     子項目 16px / 700 / #14314a / letter-spacing .05em / border-radius 32px /
              padding 8px 12px / hover background rgb(242,241,238)
     ハンバーガー 24px / #000000 / padding 10px /
              display:none → @mobile flex / @tablet flex / @small none
   ========================================================================== */
.o-header.o-header--corporate{
  height: 80px;
  padding: 0 30px;
  background: var(--s-color-2c90be8a);
  /* 実測値。blur(0px) は事実上なにも起きないが、原文どおり残す */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}


/* TODO: 中身の並べ方（justify-content）は抽出データに無い。
   ロゴ左・ナビ右の space-between としている。実機で要確認。 */
.o-hdr-corp__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.o-hdr-corp__logo{
  width: 300px;
  height: auto;
  margin-left: -50px;
  /* ロゴ画像は左に 50px はみ出す作り（現行サイトも同じ）。
     base.css の img{max-width:100%} が効くと親リンクの幅で頭打ちになり、
     375px 幅で 200px のはずのロゴが 150px に潰れていた。
     現行の算出値どおり、はみ出し分 50px を足して打ち消す。
     ★上下方向のはみ出しも意図どおり（2026-09-14 に現行サイトを実測して確認）。
       現行 /company: 1440/768 で img x=-20 y=-44 w=300 h=169、375 で x=-40 y=-16 w=200 h=113。
       ローカルも同値。80px のヘッダー枠に対して上下 16px（375）/ 44px（768・1440）
       はみ出すのは元デザインどおりで、ロゴ画像の余白部分なので見た目は破綻しない。
       audit の offscreen（img.o-hdr-corp__logo）と overflowsBox（div.o-hdr-corp__inner）は
       この1件ぶんが全 S-02 ページで恒常的に出る＝既知として扱ってよい。 */
  max-width: calc(100% + 50px);
  transition: opacity 600ms, transform 600ms;
}
.o-hdr-corp__logo-link:hover .o-hdr-corp__logo{
  opacity: .7;
  transform: scale(1.05);
}

.o-hdr-corp__right{
  display: flex;
  align-items: center;
}

.o-hdr-corp__nav{
  display: flex;
}
.o-hdr-corp__list{
  display: flex;
  align-items: center;
  gap: 10px;
}
.o-hdr-corp__item{
  position: relative;
}

.o-hdr-corp__link{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 36px;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #14314a;
  line-height: 1.4;
  white-space: nowrap;
}
.o-hdr-corp__link:hover{
  background: #f6f2ef;
}

/* ドロップダウン。開閉は header.js が hidden 属性を出し入れして行う
   （STUDIO 側も input[type=button] ＋ state:{"isClose":true} のクリック開閉）。 */
.o-hdr-corp__panel{
  position: absolute;
  top: 100%;
  left: 0;
  width: 120%;
  margin-top: 27px;
  padding: 12px;
  border-radius: 8px;
  background: var(--s-color-2c90be8a);
  display: flex;
  z-index: 1;
}
.o-hdr-corp__panel[hidden]{
  display: none;
}
.o-hdr-corp__sublist{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.o-hdr-corp__sublink{
  display: block;
  padding: 8px 12px;
  border-radius: 32px;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #14314a;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.o-hdr-corp__sublink:hover{
  background: rgb(242, 241, 238);
}

.o-hdr-corp__hamburger{
  display: none;
}

/* R1: 1140 → 840 → 540 → 320。R2: 狭い側にも display を明示する

   ★ --o-header-h の上書きについて（2026-09-14）
     S-02 は全幅で height:80px 固定（上の各ブロックのとおり）なのに、base.css の
     トークン --o-header-h は @tablet 以下で 60px になる。base.css 80行の注記
     「80px 固定のヘッダー（S-02 等）は各コンポーネント側で --o-header-h を上書きすること」
     が未実施で、840px 以下では .o-has-fixed-header の margin-top と
     html の scroll-padding-top（アンカー着地）が 20px 足りなかった。
     ＝ 本文の上端 20px が不透明なヘッダー（#fbf8f5）に隠れる／アンカーがヘッダーの下に潜る。
     現行サイトは全幅でコンテンツが y=80 から始まる（2026-09-14 実測・/company 768: ヒーロー y=80）。
     scroll-padding-top は html に付いているので html 側で上書きする必要がある。
     body 側の併記は :has() 非対応環境で margin-top だけでも効かせるための保険。
     ページ側クラスは header.php の body_class('o-header-type-' . ordinary_header_slug())。 */
@media screen and (max-width: 1140px){
  .o-header.o-header--corporate{ height: 80px; }
  .o-hdr-corp__nav{ display: flex; }
  .o-hdr-corp__hamburger{ display: none; }
}
@media screen and (max-width: 840px){
  .o-header.o-header--corporate{ height: 80px; }
  html:has(body.o-header-type-corporate){ --o-header-h: 80px; }
  body.o-header-type-corporate{ --o-header-h: 80px; }
  .o-hdr-corp__nav{ display: none; }
  .o-hdr-corp__hamburger{ display: flex; }
}
@media screen and (max-width: 540px){
  .o-header.o-header--corporate{
    height: 80px;
    padding: 0 10px;
    background: transparent;
  }
  html:has(body.o-header-type-corporate){ --o-header-h: 80px; }
  body.o-header-type-corporate{ --o-header-h: 80px; }
  .o-hdr-corp__logo{ width: 200px; }
  .o-hdr-corp__nav{ display: none; }
  .o-hdr-corp__hamburger{ display: flex; }
}
@media screen and (max-width: 320px){
  /* TODO: @mini の指定は抽出データに無い。@mobile の状態を引き継ぐ形で明示している
     （R2「狭い側にも display を書く」に従い、継承任せにしない）。 */
  .o-header.o-header--corporate{
    height: 80px;
    padding: 0 10px;
    background: transparent;
  }
  html:has(body.o-header-type-corporate){ --o-header-h: 80px; }
  body.o-header-type-corporate{ --o-header-h: 80px; }
  .o-hdr-corp__logo{ width: 200px; }
  .o-hdr-corp__nav{ display: none; }
  .o-hdr-corp__hamburger{ display: flex; }
}


/* ==========================================================================
   3. S-03 O-DINARY for the Company ヘッダー（5bbd47c7）
   --------------------------------------------------------------------------
   実測値:
     ルート <div>: position:fixed / top:0 / width:100%
                   transition: 800ms ease-in-out / transition-delay: 300ms
                   → base.css の .o-header が --o-header-transition で持っている
     <header>: background #ffffffff / height 80px（@tablet 60px）
               backdrop-filter blur(20px)（@small は contrast(100%) blur(50px)・handoff §2-5）
               box-shadow 3px 3px 5px rgba(0,0,0,0.2) / z-index 5 / padding 0 20px（@small 0 40px）
     ロゴ: O 40px/700/レインボーグラデ、`-` 32px/500/#082b34、D I N A R Y 32px/700/#082b34
           letter-spacing .01em / var(--s-font-f88553ee)
           サブ `For The COMPANY` 14px / 500 / #082b34 / var(--s-font-2a993387)
     ナビ: display:flex → @mini none / @mobile none
           16px / 700 / #082b34（子項目のみ letter-spacing .05em）
     CTA: padding 0 40px / margin 10px 0 / border-radius 4px / hover scale 1.05 600ms
   ========================================================================== */
.o-header.o-header--ftc{
  /* 高さは内側の <header> が持つ。ルートは transition の器 */
  height: auto;
  background: transparent;
}

.o-hdr-ftc__bar{
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  background: #ffffff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.o-hdr-ftc__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* ---- ロゴ（テキスト組み・画像なし） ---- */
.o-hdr-ftc__logo{
  display: flex;
  flex-direction: column;
  font-family: var(--s-font-f88553ee);
  letter-spacing: 0.01em;
  line-height: 1;
}
.o-hdr-ftc__logo-mark{
  display: flex;
  align-items: baseline;
}
.o-hdr-ftc__logo-o{
  font-size: 40px;
  font-weight: 700;
  /* var(--s-color-b8818987) は rainbow のグラデーション。
     color には使えないため background-clip: text で文字に載せる（tokens.css の注記どおり）。 */
  background: var(--s-color-b8818987);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.o-hdr-ftc__logo-hyphen{
  font-size: 32px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  color: #082b34;
}
.o-hdr-ftc__logo-char{
  font-size: 32px;
  font-weight: 700;
  color: #082b34;
}
.o-hdr-ftc__logo-sub{
  font-family: var(--s-font-2a993387);
  font-size: 14px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  color: #082b34;
}

/* ---- ナビ ---- */
.o-hdr-ftc__nav{
  display: flex;
  /* ロゴ・CTAとの取り合いでナビが縮み、リンクの文字が折り返すのを止める（2026-09-14）。
     詳細は下の @840 ブロックのコメントを参照。 */
  flex: none;
}
.o-hdr-ftc__list{
  display: flex;
  align-items: center;
}
.o-hdr-ftc__item{
  position: relative;
}
.o-hdr-ftc__link{
  display: inline-block;
  padding: 8px 10px;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #082b34;
  line-height: 1.4;
  /* 現行サイトのナビ項目は全幅で1行のまま横にあふれる（折り返さない）。
     2026-09-14 実測 /forthecompany: 541px でも 768px でも各項目 h=22 の1行で、
     右へはみ出したぶんが画面外に切れるだけ。S-02 の .o-hdr-corp__link と同じ扱い。 */
  white-space: nowrap;
}

/* ⚠ ドロップダウンパネルの寸法・背景・影は抽出データに無い（未確認）。
   S-03 ヘッダー自身の値（白地・同じ影）に合わせた最小限。実機に合わせて要調整。
   親にリンクがある項目があるため、開閉は hover / focus-within で行う。
   このナビは @mobile 以下で非表示＝ポインタ環境専用なので実害は無い。 */
.o-hdr-ftc__panel{
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 100%;
  padding: 12px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.o-hdr-ftc__item--has-children:hover .o-hdr-ftc__panel,
.o-hdr-ftc__item--has-children:focus-within .o-hdr-ftc__panel{
  display: block;
}
/* JS（クリック開閉）で開いた場合も同じ見た目にする */
.o-hdr-ftc__item.is-open .o-hdr-ftc__panel{
  display: block;
}
.o-hdr-ftc__sublist{
  display: flex;
  flex-direction: column;
}
.o-hdr-ftc__sublink{
  display: block;
  padding: 8px 10px;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #082b34;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ---- 右端グループ（CTA ＋ ハンバーガー） ---- */
/* 2026-09-15 追加。なぜ: ハンバーガーを inner の直下に置くと space-between が
   ロゴ / CTA / ハンバーガーを等間隔に散らし、541px で CTA がバー中央に浮いた（実測: 各間隔 73.4px）。
   CTA とハンバーガーを1グループにすると、ロゴ左・グループ右の2点配置に戻る。
   根拠: S-02 の .o-hdr-corp__right が同じ作り（parts.css §2）。
   グループ内の間隔は指定しない。CTA の右 padding 10px ＋ ハンバーガーの padding 10px ＝ 20px で、
   S-03 のバー左右 padding（@tablet 20px）と同じ間隔になるため、新しい値を作る必要がない。 */
.o-hdr-ftc__right{
  display: flex;
  align-items: center;
}

/* ---- 右端CTA ---- */
/* 抽出データの `padding: 0 40px` はヘッダーバー側の値を拾ったもので、CTA 自身の値ではなかった。
   現行サイトを各幅で実測して置き換えている（2026-09-14）:
     幅        CTAボックス  ラベル      アイコン
     1440      150x40      12px/700    34x34 (24px)
     1000/840  146x40      12px/700    34x34
     540/375/320 161x40    14px/700    34x34
   ラベルは全幅で1行（高さ15〜17px）。折り返させないこと。
   TODO: 背景色・文字色は抽出データにも実測にも無い（現行は透過＋継承色）。ナビと同じ #082b34 のまま。 */
.o-hdr-ftc__cta-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin: 10px 0;
  padding: 0 10px 0 15px;
  border-radius: 4px;
  font-family: var(--s-font-f88553ee);
  font-size: 12px;
  font-weight: 700;
  color: #082b34;
  line-height: 1.25;
  /* 375px 幅でロゴと取り合いになり3行に折り返していた。現行は全幅1行。 */
  white-space: nowrap;
  transition: transform 600ms;
}
.o-hdr-ftc__cta-link:hover{
  transform: scale(1.05);
}
.o-hdr-ftc__cta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 24px;
}
/* ラベル末尾の <br> は逐語再現。inline-flex 内で余計な改行にならないよう潰す */
.o-hdr-ftc__cta-label br{
  display: none;
}

/* ---- ハンバーガー（2026-09-15 追加・要確認③の解消） ----
   S-02 / S-06 と同じ .o-hamburger（dehaze 24px / padding 10px ＝ 44x44）を使う。
   表示は下の @media で切り替える。既定は非表示（S-02 の .o-hdr-corp__hamburger と同じ書き方）。 */
.o-hdr-ftc__hamburger{
  display: none;
}

/* R1: 1140 → 840 → 745 → 540 → 320
   ★ 745px は共通BP（1140/840/540/320）から外れる値。理由（2026-09-15 実測）:
     @tablet（840以下）のヘッダー内容物は ロゴ145.2 ＋ ナビ351.3 ＋ CTA165 ＝ 661.5px、
     バーの左右 padding が 20px ずつなので、1行に収まる最小幅は 701.5px → 702px。
     ただし 702px ちょうどでは3要素が隙間ゼロで接する。ロゴ⇔ナビ・ナビ⇔CTA に
     20px 以上の間隔を残すには 661.5 + 40(padding) + 40(間隔2つ) ＝ 741.5px → 742px 必要。
     745px を境界にすると、ナビを出す最小幅 746px で間隔が 22.25px ずつ確保できる。
     ＝ 746px 以上はナビ、745px 以下はハンバーガー。
     修正前は 541〜701px でCTAの右端が画面外に出ていた（audit offscreen 541px:4件 / 680px:2件）。 */
@media screen and (max-width: 1140px){
  .o-hdr-ftc__bar{
    height: 80px;
    padding: 0 40px;
    -webkit-backdrop-filter: contrast(100%) blur(50px);
    backdrop-filter: contrast(100%) blur(50px);
  }
  .o-hdr-ftc__nav{ display: flex; }
  /* R2: 狭い側だけでなくここにも display を明示する（2026-09-15） */
  .o-hdr-ftc__hamburger{ display: none; }
  .o-hdr-ftc__cta{ display: block; }
}
@media screen and (max-width: 840px){
  /* 実測（2026-09-14）: @tablet はロゴが 28px に縮む。O も本文字と同じ 28px で、
     base の 40px/32px の2段構えではなくなる。サブテキストは 14px のまま。
     これで 60px のバーに収まる（旧 TODO「詰まり具合を確認」への回答）。 */
  /* padding は 40px ではなく 20px（2026-09-14 訂正）。
     設計ツリー 5bbd47c7 /0（ac2a0bcc）の @tablet は padding "0px 20px 0px 20px"。
     40px なのは @small（1140以下）のほう。現行サイトも実測で 768px / 541px とも
     header の padding は 0px 20px（ロゴ左端 x=20）。40px のままだと左右で 40px ぶん
     場所を無駄にし、541〜745px でナビがロゴとCTAに押し潰される帯が広がっていた。 */
  .o-hdr-ftc__bar{ height: 60px; padding: 0 20px; }
  /* 541〜745px で、ナビ3リンクが1文字ずつ縦に積まれて 60px のバーの上下へ
     最大 56px はみ出し、ヒーローの文字に重なっていた（修正前 audit_541: overflowsBox
     div.o-hdr-ftc__inner overTop 56 / overBottom 56、audit_700: orphans 3件・各 h=61）。
     原因は .o-hdr-ftc__link に white-space 指定が無く、flex アイテムが縮んで折り返したこと。
     ナビ側は base の white-space:nowrap ＋ flex:none で1行に固定し、ロゴとCTAも縮ませない。
     ＝ 現行サイトと同じ「1行のまま右へあふれて画面外で切れる」挙動に戻す。
     ※ 旧注記「541〜680px では CTA の右端が画面外に出る（CEO判断事項として申し送る）」は
        2026-09-15 の CEO 承認で解消。745px 以下はハンバーガーに切り替える（下のブロック）。 */
  .o-hdr-ftc__nav{ display: flex; }
  /* .o-hdr-ftc__right を 2026-09-15 に追加。inner の flex アイテムは
     ロゴ / ナビ / 右端グループ の3つになったため、右端グループも縮ませない
     （縮むとCTAの文字が折り返す。この帯で過去に起きた不具合と同じ原因）。 */
  .o-hdr-ftc__logo,
  .o-hdr-ftc__cta-link,
  .o-hdr-ftc__right{ flex: none; }
  .o-hdr-ftc__logo-o,
  .o-hdr-ftc__logo-hyphen,
  .o-hdr-ftc__logo-char{ font-size: 28px; }
  .o-hdr-ftc__hamburger{ display: none; }
  .o-hdr-ftc__cta{ display: block; }
}
@media screen and (max-width: 745px){
  /* 2026-09-15 追加。ナビ → ハンバーガーの切替。境界の根拠は上の R1 コメント。
     ロゴ・CTA・バー高さは @tablet の値を引き継ぐ（この帯で変える理由が無い）。
     収まり（実測・745px）: ロゴ145.2 ＋ ハンバーガー44 ＋ CTA165 ＋ padding40 ＝ 394.2px。 */
  .o-hdr-ftc__nav{ display: none; }
  .o-hdr-ftc__hamburger{ display: flex; }
  .o-hdr-ftc__cta{ display: block; }
}
@media screen and (max-width: 540px){
  .o-hdr-ftc__bar{ height: 60px; padding: 0 20px; }
  /* ✅ 要確認③ 解消（2026-09-15）。ナビは引き続き非表示、代わりに上の 745px ブロックで
     出したハンバーガーが #o-offcanvas を開く（S-02 / S-06 と同じ仕組み）。 */
  .o-hdr-ftc__nav{ display: none; }
  .o-hdr-ftc__hamburger{ display: flex; }
  /* 2026-09-15: この帯だけバー内のCTAを落とし、オフキャンバス内の
     .o-offcanvas__cta が「無料相談」導線を引き取る。
     なぜ 540px で落とすか（実測）:
       @mobile の3点は ロゴ94.9 ＋ ハンバーガー44 ＋ CTA181 ＝ 319.9px、
       バー padding 40px を足して 359.9px。つまり必要幅は 360px。
       共通BPの @mini（320px）では 39.9px ぶん入らず、321〜359px も同様に入らない。
       360px はちょうど 0.1px しか余らず、フォントメトリクスが少し変われば破綻する。
       ＝「CTAを残せる下限」を共通BPの上に置くと 540 が最も近い安全な線。
       S-06（.o-hdr-legacy__cta）も @mobile でCTAを落としてハンバーガーだけにしており、作りが揃う。
     541〜745px はCTAを残す（394.2px で収まる。上の 745px ブロック）。 */
  .o-hdr-ftc__cta{ display: none; }
  /* 実測（2026-09-14）: 540 / 375 / 320 とも同じ値。ロゴ18px・サブ11px・CTA14px。 */
  .o-hdr-ftc__logo-o,
  .o-hdr-ftc__logo-hyphen,
  .o-hdr-ftc__logo-char{ font-size: 18px; }
  .o-hdr-ftc__logo-sub{ font-size: 11px; }
  .o-hdr-ftc__cta-link{ font-size: 14px; }
}
@media screen and (max-width: 320px){
  /* ロゴ・CTA・バー高さは実測上 @mobile と同値。上の 540px ブロックが効くので
     指定は不要だが、「@mini でも変わらない」ことを確認済みとして明示しておく。 */
  .o-hdr-ftc__bar{ height: 60px; padding: 0 20px; }
  .o-hdr-ftc__nav{ display: none; }
  .o-hdr-ftc__hamburger{ display: flex; }
  /* 上の 540px ブロックと同じ（R2: 狭い側にも明示する）。
     バー内は ロゴ94.9 ＋ ハンバーガー44 ＋ padding40 ＝ 178.9px で 320px に余裕で収まる。 */
  .o-hdr-ftc__cta{ display: none; }
}


/* ==========================================================================
   4. S-07 Re:Blue 専用ヘッダー（11925a39）
   --------------------------------------------------------------------------
   実測値:
     position:fixed / height 80px / padding 0 30px / background transparent
     backdrop-filter blur(50px) / filter brightness(120%)
     @mobile: background linear-gradient(90deg, #3399df80, #72dfee80)
              backdrop-filter brightness(90%) blur(10px) / padding 0
     @mini: display:none
     背景レイヤー: background var(--s-color-04ab6cae) / absolute / z-index -3 / 100%×100%
     ロゴ width 146px（@mobile は親グループ width 20% / padding 5px）
     PCナビ 15px（@tablet 12px）/ 600 / #f9fafbff / padding 10px 5px 3px 5px
            display:flex → @mini none / @mobile none / @tablet flex
     LINE CTA 16px / 700 / #f9fafb / background var(--s-color-12a2a4e5)
            border 1px solid #f9fafbff / border-radius 27px
            box-shadow 5px 5px 5px rgba(0,0,0,0.2) / hover scale 1.05
            @mobile none / @tablet none ＝ デスクトップのみ
     モバイルアンカーバー display:none → @mini flex / @mobile flex（@mobile で width 80%）
            ラベル 20px/400/#333333 →@mobile 10px/500/#ffffff（中央寄せ）
            アイコン 24px/#333333 →@mobile 20px/#ffffff
   ========================================================================== */
.o-header.o-header--reblue{
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 30px;
  background: transparent;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  filter: brightness(120%);
}

/* 旧注記「var(--s-color-04ab6cae) は実値が未解決」は解消済み（2026-09-14 確認）。
   tokens.css 100行に --s-color-04ab6cae: #369bdcff が入っており、実描画で
   rgb(54,155,220) が出ている（/reblue 375 / 1440 とも .o-hdr-rb__bg が 80px で描画）。
   z-index:-3 だが親の .o-header が position:fixed ＋ transform ＋ will-change で
   stacking context を作っているため、ルートの負レイヤーへ落ちて消えることはない
   （/reblue のページ側で起きた z-index:-1 の事故と同じ条件をここでは満たしている）。 */
/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
   親 .o-header--reblue に filter:brightness(120%) が掛かるため、地色 #369bdc は
   実描画で #41baff まで明るくなり、ナビ（15px/600 の #f9fafb）との比が 2.17 しかない
   （ピクセル実測。getComputedStyle では背面レイヤーが見えないので画素で測った）。
   色相そのままに、描画結果が派生トークン #2976a7 になる前補正値
   var(--o-c-brand-blue-d-x120) #22628b を置く（0x22*1.2=41 / 0x62*1.2=118 / 0x8b*1.2=167）。
   実描画で白文字との比は 4.9 台。tokens.css の元トークン #369bdc は不変。 */
.o-hdr-rb__bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background: var(--o-c-brand-blue-d-x120);
}

.o-hdr-rb__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  height: 100%;
}

.o-hdr-rb__logo{
  width: 146px;
  height: auto;
}

.o-hdr-rb__nav{
  display: flex;
}
.o-hdr-rb__list{
  display: flex;
  align-items: center;
}
.o-hdr-rb__link{
  display: inline-block;
  padding: 10px 5px 3px 5px;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.4;
}

.o-hdr-rb__line{
  display: flex;
}
.o-hdr-rb__line-link{
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #f9fafb;
  border-radius: 27px;
  background: var(--s-color-12a2a4e5);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #f9fafb;
  line-height: 1.4;
  transition: transform 300ms;
}
/* TODO: LINE CTA の padding は抽出データに無い（border-radius 27px から逆算した暫定値）。
   実機で当たりを取って確定させること。 */
.o-hdr-rb__line-link:hover{
  transform: scale(1.05);
}

/* ---- モバイル専用アンカーバー ---- */
.o-hdr-rb__anchors{
  display: none;
}
.o-hdr-rb__anchor-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.o-hdr-rb__anchor-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--s-font-f88553ee);
}
.o-hdr-rb__anchor-icon{
  font-size: 24px;
  color: #333333;
}
.o-hdr-rb__anchor-label{
  font-size: 20px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  color: #333333;
}

/* R1: 1140 → 840 → 540 → 320 */
@media screen and (max-width: 1140px){
  .o-header.o-header--reblue{ display: flex; height: 80px; padding: 0 30px; }
  .o-hdr-rb__nav{ display: flex; }
  .o-hdr-rb__line{ display: flex; }
  .o-hdr-rb__anchors{ display: none; }
}
@media screen and (max-width: 840px){
  .o-header.o-header--reblue{ display: flex; height: 80px; padding: 0 30px; }
  /* S-02 と同じ事情（上の S-02 節の★を参照）。S-07 も全幅 80px 固定なので
     base.css の @tablet 以下 60px のままだと html の scroll-padding-top が 20px 足りない。
     /reblue は #event / #voice-1 / #concept / #questions の4本のページ内アンカーを
     ヘッダーナビとモバイルアンカーバーの両方から使うため、着地位置が実際にずれていた。
     実測（2026-09-14・修正前）: 375/768 で #concept の着地 top=60px（ヘッダー高 80px）、
     1440 では top=80px。＝ 840px 以下だけ 20px ぶんヘッダーの下に潜っていた。 */
  html:has(body.o-header-type-reblue){ --o-header-h: 80px; }
  body.o-header-type-reblue{ --o-header-h: 80px; }
  .o-hdr-rb__nav{ display: flex; }
  .o-hdr-rb__link{ font-size: 12px; }
  .o-hdr-rb__line{ display: none; }
  .o-hdr-rb__anchors{ display: none; }
}
@media screen and (max-width: 540px){
  .o-header.o-header--reblue{
    display: flex;
    height: 80px;
    padding: 0;
    background: linear-gradient(90deg, #3399df80, #72dfee80);
    -webkit-backdrop-filter: brightness(90%) blur(10px);
    backdrop-filter: brightness(90%) blur(10px);
  }
  html:has(body.o-header-type-reblue){ --o-header-h: 80px; }
  body.o-header-type-reblue{ --o-header-h: 80px; }
  /* 実測は「ロゴの親グループ width:20% / padding:5px」。
     マークアップ上はロゴグループが __inner の中にあるため、__inner を 20% に絞る */
  .o-hdr-rb__inner{ display: flex; flex: 0 0 20%; width: 20%; }
  .o-hdr-rb__logo-group{ width: 100%; padding: 5px; }
  .o-hdr-rb__logo{ width: 100%; }
  .o-hdr-rb__nav{ display: none; }
  .o-hdr-rb__line{ display: none; }
  .o-hdr-rb__anchors{ display: flex; width: 80%; }
  .o-hdr-rb__anchor-icon{ font-size: 20px; color: #ffffff; }
  .o-hdr-rb__anchor-label{
    font-size: 10px;
    font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
    color: #ffffff;
    text-align: center;
  }
}
@media screen and (max-width: 320px){
  /* @mini はヘッダーごと非表示（実測）。
     ＝ アンカーバーの「@mini: flex」は親が消えるため実際には描画されない。
        原文の指定をそのまま残しつつ、親の none を明示する。 */
  .o-header.o-header--reblue{ display: none; }
  /* ヘッダーが消える幅なのでアンカー着地のオフセットも 0 にする（2026-09-14）。
     上の 840/540 ブロックで 80px にした値をここで打ち消さないと、
     固定ヘッダーが無いのに scroll-padding-top が 80px 残る。 */
  html:has(body.o-header-type-reblue){ --o-header-h: 0px; }
  body.o-header-type-reblue{ --o-header-h: 0px; }
  .o-hdr-rb__nav{ display: none; }
  .o-hdr-rb__line{ display: none; }
  .o-hdr-rb__anchors{ display: flex; width: 80%; }
}


/* ==========================================================================
   5. S-06 旧グローバルヘッダー（edfad48e・レガシー）
   --------------------------------------------------------------------------
   ⚠ 存続させるか S-02 に統一するかは CEO 未決（handoff §8-A9・統一を推奨）。
     統一する場合は inc/parts.php の ordinary_legacy_header_routes() を空にする。

   実測値:
     position:fixed / height 80px / padding 0 30px
     background #fffbf5ff（@mobile #fff7ecff）/ justify-content: space-between
     ロゴ width 300px / margin-left -80px（@mobile -67px）
     ナビ 2段組（上段 10px/600 ＋ 下段ブランド名）
     右端CTA `限定クーポン配布中 !` 16px / 700 / #f9fafb
     ハンバーガー 24px / #000000 / padding 10px / display:none → @mobile flex / @tablet flex
   ========================================================================== */
.o-header.o-header--legacy{
  height: 80px;
  padding: 0 30px;
  background: #fffbf5;
}
.o-hdr-legacy__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.o-hdr-legacy__logo{
  width: 300px;
  height: auto;
  margin-left: -80px;
  /* S-02 のロゴと同じ事情。base.css の img{max-width:100%} が親リンクの幅で
     頭打ちにするため、はみ出し分（負のマージンと同値）を足して打ち消す。
     これが無いと 375px 幅でロゴが 217px → 150px に潰れていた。 */
  max-width: calc(100% + 80px);
}

.o-hdr-legacy__nav{
  display: flex;
}
.o-hdr-legacy__list{
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
/* TODO: ナビ項目どうしの間隔（gap:20px）は抽出データに無い暫定値。実機で確定させること。 */

.o-hdr-legacy__link{
  display: flex;
  flex-direction: column;
  font-family: var(--s-font-f88553ee);
  line-height: 1.4;
}
.o-hdr-legacy__top{
  font-size: 10px;
  font-weight: 600;
  /* TODO: 上段カテゴリ名には下段と同じグラデーション値が color に入っている
     （＝ background-clip:text 相当）。ただし `LGBTQメディア` については
     下段が1文字ずつの単色（レインボー）のため上段に何を当てるかが未確認。
     ここでは既定色のままにし、グラデ3件だけ下の個別指定で載せている。 */
  color: #082b34;
}
.o-hdr-legacy__brand{
  font-weight: 600;
}
.o-hdr-legacy__brand--letters{
  display: inline-flex;
}
/* 1文字ずつの色は PHP 側で style 属性として出力している（逐語の実値のため） */
.o-hdr-legacy__letter{
  font-size: 16px;
  font-weight: 600;
}

/* グラデーション文字（背景 → background-clip:text） */
.o-hdr-legacy__item--reblue .o-hdr-legacy__top,
.o-hdr-legacy__item--reblue .o-hdr-legacy__brand{
  background: linear-gradient(90deg, #036eb8, #0fa9db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.o-hdr-legacy__item--stories .o-hdr-legacy__top,
.o-hdr-legacy__item--stories .o-hdr-legacy__brand{
  background: linear-gradient(90deg, #13ae67, #74ee90);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.o-hdr-legacy__item--wedding .o-hdr-legacy__top,
.o-hdr-legacy__item--wedding .o-hdr-legacy__brand{
  background: linear-gradient(90deg, #e24d5c, #e31796);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.o-hdr-legacy__item--reblue .o-hdr-legacy__brand,
.o-hdr-legacy__item--stories .o-hdr-legacy__brand{
  font-size: 16px;
}
.o-hdr-legacy__item--wedding .o-hdr-legacy__brand,
.o-hdr-legacy__item--project .o-hdr-legacy__brand{
  font-size: 15px;
}
.o-hdr-legacy__item--project .o-hdr-legacy__brand{
  color: #082b34;
}

.o-hdr-legacy__right{
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 旧TODO「CTA のボックス（背景色・角丸・余白）は抽出データに無い」は誤りだった（2026-09-14 訂正）。
   設計ツリー specs/symbolviews/edfad48e-….json の /1/1（uuid 6eab87de）に箱の値がある:
     background #03bd0fff / borderRadius 16px / boxShadow 1px 3px 10px rgba(0,0,0,.1)
     padding 5px 10px 5px / margin 0 0 0 20px / display flex・column・align/justify center
     transitionDuration 300ms / :hover boxShadow 1px 3px 20px rgba(0,0,0,.1) + scale 1.05
     @tablet・@mobile display none
   子テキスト（uuid 6a1fdda1）: #f9fafb / 16px / 700 / lineHeight 1.4 / textAlign center。
   箱が無いまま白文字だけを地色 #fffbf5 に置いていたため、PC幅でCTAが完全に消えていた
   （修正前 audit_1440 lowContrast: ratio 1.01 / fg rgb(249,250,251) / bg rgb(255,251,245)）。
   現行サイトも緑のピル型ボタン（実測 174x32 @x1236,y24 / bg rgb(3,189,15) / radius 16px）。
   border は設計値が NaNpx（＝無効）なので付けない。
   ★ 2026-09-15: 上の申し送り（「白文字 / #03bd0f は比 2.42・CEO判断事項」）に CEO が
     「直してOK」と回答。色相そのままに 29% 暗くした派生 var(--o-c-line-green-d) #02860b
     へ差し替えた（#f9fafb 文字との比 2.42 → 4.55・16px/700 なので要 4.5）。
     現行サイトの実測原値 #03bd0f は本コメントに記録として残す。 */
.o-hdr-legacy__cta{
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0 0 0 20px;
  padding: 5px 10px 5px;
  border-radius: 16px;
  background: var(--o-c-line-green-d);
  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1);
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  color: #f9fafb;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition-duration: 300ms;
}
.o-hdr-legacy__cta:hover{
  box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.o-hdr-legacy__hamburger{
  display: none;
}

/* R1: 1140 → 840 → 540 → 320 */
@media screen and (max-width: 1140px){
  .o-header.o-header--legacy{ height: 80px; background: #fffbf5; }
  .o-hdr-legacy__nav{ display: flex; }
  .o-hdr-legacy__hamburger{ display: none; }
}
@media screen and (max-width: 840px){
  .o-header.o-header--legacy{ height: 80px; background: #fffbf5; }
  /* S-02 / S-07 と同じ事情（S-02 節の★を参照）。S-06 も全幅 80px 固定なので、
     base.css の @tablet 以下 60px のままだと html の scroll-padding-top が 20px 足りず、
     スキップリンク（#content）を含むアンカー着地がヘッダーの下に 20px 潜る。2026-09-14 */
  html:has(body.o-header-type-legacy){ --o-header-h: 80px; }
  body.o-header-type-legacy{ --o-header-h: 80px; }
  /* ⚠ 実測では O-DINARY のロゴ文字が @tablet で 60px になる（原文どおり）。
     ただし下の display:none でナビごと隠れるため、この 60px は実際には描画されない。
     原文の値として残すが、見た目に影響しないので調整不要（旧 TODO への回答）。 */
  .o-hdr-legacy__letter{ font-size: 60px; }
  /* 設計ツリー edfad48e 実測: ナビもCTAも @tablet / @mobile とも display:none で、
     ハンバーガーだけが flex になる。現行サイトを 375px で計測しても
     ナビは 44x44 に畳まれ、ハンバーガー（dehaze）だけが出ていた。
     ここを flex にしていたためナビが 419px に広がり、375px 幅で右側が切れていた。 */
  .o-hdr-legacy__nav{ display: none; }
  .o-hdr-legacy__cta{ display: none; }
  .o-hdr-legacy__hamburger{ display: flex; }
}
@media screen and (max-width: 540px){
  .o-header.o-header--legacy{ height: 80px; background: #fff7ec; }
  html:has(body.o-header-type-legacy){ --o-header-h: 80px; }
  body.o-header-type-legacy{ --o-header-h: 80px; }
  /* 設計ツリー @mobile: ロゴの器を 150px に絞る（現行実測も A が w150） */
  .o-hdr-legacy__logo-link{ width: 150px; }
  .o-hdr-legacy__logo{ margin-left: -67px; max-width: calc(100% + 67px); }
  .o-hdr-legacy__letter{ font-size: 36px; }
  .o-hdr-legacy__nav{ display: none; }
  .o-hdr-legacy__cta{ display: none; }
  .o-hdr-legacy__hamburger{ display: flex; }
}
@media screen and (max-width: 320px){
  /* TODO: @mini の指定は抽出データに無い。@mobile を引き継ぐ形で明示している。 */
  .o-header.o-header--legacy{ height: 80px; background: #fff7ec; }
  html:has(body.o-header-type-legacy){ --o-header-h: 80px; }
  body.o-header-type-legacy{ --o-header-h: 80px; }
  .o-hdr-legacy__logo-link{ width: 150px; }
  .o-hdr-legacy__logo{ margin-left: -67px; max-width: calc(100% + 67px); }
  .o-hdr-legacy__letter{ font-size: 36px; }
  .o-hdr-legacy__nav{ display: none; }
  .o-hdr-legacy__cta{ display: none; }
  .o-hdr-legacy__hamburger{ display: flex; }
}


/* ==========================================================================
   6. モーション配慮
   base.css が .o-header の transition を prefers-reduced-motion で切っている。
   ここでは hover の拡大・不透明度変化も止める。
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .o-hdr-corp__logo,
  .o-hdr-ftc__cta-link,
  .o-hdr-rb__line-link,
  .o-hdr-legacy__cta{        /* 2026-09-14: 箱化に伴い hover の拡大が入ったので追加 */
    transition: none;
  }
  .o-hdr-corp__logo-link:hover .o-hdr-corp__logo,
  .o-hdr-ftc__cta-link:hover,
  .o-hdr-rb__line-link:hover,
  .o-hdr-legacy__cta:hover{
    transform: none;
  }
}


/* ==========================================================================
   7. 利用者の声モーダル（.vo-dialog — /voice と /reblue の共通コンポーネント）
   --------------------------------------------------------------------------
   なぜ parts.css にあるか（2026-09-15）:
     原文 STUDIO では、/voice のカードも /reblue #voice-1 のカードも
     **同一のモーダル** `studio-modal://x8zYTAlF/{{slug}}` を開く。
     実測でも 1440 / 768 でパネル寸法・余白・字形が完全に一致した
     （live 1440: 両ページとも li 720x572.27 @360,163.86 ／ live 768: 384x577.83 @192,161.08。
       計測: scratchpad modal/reblue/live_voice_modal.json ／ live_reblue_modal.json）。
     2026-09-14 に voice.css §5 として /voice 専用に書いたが、/reblue でも同じものが要るため
     **値を変えずにここへ移設**した。reblue.css へ写して二重管理にするより、
     1か所に置いて両ページから同じクラスで使うほうが破綻しない。
     マークアップは template-parts/voice-modal.php、開閉は assets/js/voice-modal.js。

   他ページへの影響:
     `.vo-` はこのモーダルと voice.css のカードでしか使っていない（2026-09-15 grep 済み）。
     `<dialog class="vo-dialog">` を出すページ以外では1つもマッチしないため、
     全ページ読み込みの parts.css に置いても描画は変わらない。

   値の出典:
     すべて現行モーダルの実測（2026-09-14 /voice ＋ 2026-09-15 /reblue で再確認。
     1440 / 768 / 430 / 375）。設計ツリーには無い（モーダルのページビュー
     index.json "x8zYTAlF/:slug" ・uuid 6a81bcff は specs/ に未収録）。

   現行の構造（1440 実測）:
     背景: fixed 全面 rgba(0,0,0,0.16)（design-canvas__modal__base）
     パネル: li 720x572（max-width:50%）/ padding 20px 30px 30px / radius 16px / #fbf6f6 /
             shadow 3px 3px 5px rgba(0,0,0,.2) / column / align-items:flex-start / 縦横中央
       ├ main   column / gap 8px / width 100%
       │  ├ service  column / gap 5px / align-items:center
       │  │   ├ 小見出し 11px / 500 / #14314a（カードと違い @mobile でも出る）
       │  │   └ バッジ padding 8px 25px / radius 20.5px / 地色 accent / 文字 16px / 700 / #14314a
       │  ├ person   column / gap 3px / align-items:center（幅は内容幅 281px）
       │  │   ├ row  gap 10px … アバター 60x60 radius 64 ＋ 名前 18px / 700 / .1em / #082b34
       │  │   └ 属性 h2 11px / 700 / .1em / #082b34b3 / width 100%
       │  └ text     column / gap 10px / width 100%
       │      ├ 見出し 24px / 700 / .1em / {{color.value}}
       │      ├ 本文   margin-top 10px / 18px / 500 / .15em / 1.4 / #082b34cb
       │      └ CTA a  margin-top 20px / padding 10px 25px / radius 20.5px / 地色 accent
       │                文字 16px / 700 / #14314a ＋ play_arrow 24px（→ 223x44）
       └ 閉じる button padding 20px 0 / width 100% / 右寄せ / 文字 18px / 500 ＋ close 24px
             色は accent に brightness(75%) saturate(185%)（カードの「詳しく見る」と同じ処理）
     @tablet: パネル align-items:center / main・service justify-content:space-between / 本文 13px
     @mobile: パネル max-width calc(100% - 40px) / padding 30px 20px / gap 20px /
              person align-items:flex-start / 見出し letter-spacing normal / 本文 16px
   font-weight はこのテーマの他所と同じく 400→500 / 500→700 に1段階上げている（CEO指示 2026-09-01）。
   hover の scale（現行はカードの :hover がモーダルの li にも掛かっている）は再現しない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   7-0. アクセント色の暗い派生（--vo-accent-d）
   2026-09-15 に voice.css §4 からここへ移設（値は変えていない）。
   `.vo-card__more-text`（voice.css・/voice のカード）と `.vo-dialog__close`（下）の
   両方が使うため、モーダルと同じ場所に置く。
   原文は filter:brightness(75%) saturate(185%) でアクセント色を暗くして文字にしているが、
   filter は描画時にしか効かず CSS の color と実際の描画色が食い違うため、
   色相そのままに黒方向へ混ぜた固定値を当てる方式に替えてある（CEO決定 2026-09-15「直してOK」）。
   アクセント色は inc/voices.php の accent を style="--vo-accent:…" で1件ごとに流し込む3色。
   カード地／モーダル地 #fbf6f6 に対するコントラスト比:
     #ffb1b1 → 43%暗 #916565（1.61 → 4.61）   Lu-Lu Wedding
     #cbe9ef → 51%暗 #637275（1.19 → 4.68）   Re:Blue
     #b7f4b2 → 51%暗 #5a7857（1.18 → 4.61）   Lu-Lu Stories
   未登録のアクセント色が来たときは既定の #082b34（ネイビー）に落ちる＝読める側に倒れる。
   -------------------------------------------------------------------------- */
[style*="--vo-accent:#ffb1b1"] { --vo-accent-d: #916565; }
[style*="--vo-accent:#cbe9ef"] { --vo-accent-d: #637275; }
[style*="--vo-accent:#b7f4b2"] { --vo-accent-d: #5a7857; }

/*
 * <dialog> 自体はビューポート全面の透明な箱にし、見た目のパネルは .vo-dialog__panel に持たせる。
 *   - 背景クリックで閉じる判定（JS: event.target が dialog 自身）が、パネルの padding 部分では
 *     誤発火しないようにするため。
 *   - パネルがビューポートより高いとき（長い本文 × 低い画面）は dialog の中でスクロールさせる。
 *     現行は fixed / overflow:visible でスクロールできない（もともとの不便）ので、ここは補い。
 *     overscroll-behavior:contain で背面のページへスクロールが伝わらないようにする。
 *   - UA スタイル（margin:auto / max-width・max-height calc(100% - 6px - 2em) / border / padding /
 *     background）を打ち消す。display は閉じているとき UA の display:none を残す必要があるため
 *     [open] にだけ書く（.vo-dialog { display:flex } と書くと閉じたモーダルが全部見える）。
 */
.vo-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vo-dialog[open] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

/* 現行の背景: rgba(0,0,0,0.16)（design-canvas__modal__base の実測） */
.vo-dialog::backdrop {
  background: rgba(0, 0, 0, 0.16);
}

/*
 * パネル。margin:auto が縦中央寄せ（現行 1440: y164 = 20 + (860 - 572) / 2）。
 * justify-content:center と違い、パネルが dialog より高いときは上端から並んでスクロールできる。
 * tabindex="-1" にして JS がフォーカスを当てる（showModal 既定の「最初のフォーカス可能要素＝CTA」に
 * 飛んで本文の先頭が画面外に出るのを防ぐ）。Tab では到達しない要素なのでリングは出さない。
 */
.vo-dialog__panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 50%;
  margin: auto;
  padding: 20px 30px 30px;
  background: #fbf6f6ff;
  border-radius: 16px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

.vo-dialog__panel:focus {
  outline: 0;
}

/* 現行: column / gap 8px / align-items:flex-start / width 100%（660px = パネル内幅） */
.vo-dialog__main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0;
}

/* 現行: column / gap 5px / align-items:center / width 100% */
.vo-dialog__service {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  padding: 0;
}

/* 11px / 500 / 1.4 / #14314a。カードと違い、モーダルでは全断面で表示（現行 375 でも描画されている） */
.vo-dialog__service-note {
  color: #14314a;
  font-family: var(--s-font-f88553ee);
  font-size: 11px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}

/* 現行: padding 8px 25px / radius 20.5px / 地色 accent（→ 170x38） */
.vo-dialog__badge {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 8px 25px;
  background: var(--vo-accent, transparent);
  border-radius: 20.5px;
}

/* 16px / 700 / 1.4 / #14314a */
.vo-dialog__badge-text {
  color: #14314a;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* 現行: column / gap 3px / align-items:center。幅は内容幅（281px = 60 + 10 + 名前） */
.vo-dialog__person {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

/* 現行: row / gap 10px / align-items:center */
.vo-dialog__person-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
}

/* 現行: 60x60 / radius 64px / 地色 accent / background-size cover */
.vo-dialog__avatar {
  display: block;
  flex: none;
  width: 60px;
  height: 60px;
  background: var(--vo-accent, transparent);
  border-radius: 64px;
  object-fit: cover;
}

/* 18px / 700 / .1em / 1.4 / #082b34 / center */
.vo-dialog__name {
  margin: 0;
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 11px / 700 / .1em / 1.4 / #082b34b3 / width 100%（person の幅いっぱい） */
.vo-dialog__attr {
  flex: none;
  width: 100%;
  margin: 0;
  color: #082b34b3;
  font-family: var(--s-font-f88553ee);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
}

/* 現行: column / gap 10px / align-items:flex-start / width 100% */
.vo-dialog__text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
}

/* 24px / 700 / .1em / 1.4 / 文字色は1件ごと。text-wrap:balance はカードの見出しと同じ補い（voice-03） */
.vo-dialog__headline {
  margin: 0;
  color: var(--vo-headline, #082b34);
  font-family: var(--s-font-f88553ee);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: left;
  text-wrap: balance;
}

/*
 * 18px / 500 / .15em / 1.4 / #082b34cb（現行 rgba(8,43,52,0.796)）。
 *
 * ★ 2026-09-15 修正: margin 0 → 10px 0 0。
 *   なぜ: 現行モーダルの本文には gap:10px とは別に margin-top:10px が付いており、
 *     見出しと本文の間隔は 20px。移設前の voice.css は margin:0 だったため 10px しかなく、
 *     パネル高さが現行より 10px 低かった。
 *   根拠（実測 2026-09-15・live と localhost:8080 を同条件で計測）:
 *     live  1440 見出し下端 370.62 → 本文 y 390.63（20.01px）／ panel h 572.27
 *     local 1440 見出し下端 …      → 本文 y …     （10.00px）／ panel h 562.27
 *     768 / 430 / 375 も同様に全幅で 20px 対 10px・panel h は一律 10px 低かった
 *     （live 577.83 / 672.25 / 739.42 に対し local 567.83 / 662.25 / 729.42）。
 *     CTA 側は gap 10px + margin-top 20px = 30px で現行と一致していたので、
 *     本文だけ margin の写し漏れだった。計測ファイル:
 *     scratchpad modal/reblue/live_voice_modal.json ／ local_voice_before.json
 */
.vo-dialog__body {
  margin: 10px 0 0;
  color: #082b34cb;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-align: left;
}

/* 現行: a / margin 20px 0 0 / padding 10px 25px / radius 20.5px / 地色 accent / row / gap 5px（→ 223x44） */
.vo-dialog__cta {
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 5px;
  margin: 20px 0 0;
  padding: 10px 25px;
  background: var(--vo-accent, transparent);
  border-radius: 20.5px;
}

/* 16px / 700 / 1.4 / #14314a */
.vo-dialog__cta-text {
  color: #14314a;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/* play_arrow 24px / #14314a */
.vo-dialog__cta-icon {
  color: #14314a;
  font-size: 24px;
}

/*
 * 閉じる。現行: button / padding 20px 0 / width 100% / row / justify-content:flex-end。
 * 文字色はバッジと同じ accent で、「詳しく見る」と同じ filter で暗く濃くしている
 * （現行実測: color rgb(255,177,177) + filter brightness(0.75) saturate(1.85)）。
 * filter は文字とアイコンの両方に掛かるよう button に当てる。背景・枠・padding のリセットは base.css。
 */
.vo-dialog__close {
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 0;
  /* 2026-09-15 コントラスト調整。理由と値は .vo-card__more-text の注記と同じ
     （モーダルの地色 #fbf6f6 もカードと同値なので同じ派生を使う）。 */
  color: var(--vo-accent-d, #082b34);
}

/* 18px / 500 / 1.4 */
.vo-dialog__close-text {
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}

/* close 24px */
.vo-dialog__close-icon {
  font-size: 24px;
}

/* ---- @small（~1140px）: モーダルに上書きは無い（現行 1140 実測で base と同値） ---- */

/* ---- @tablet（~840px）。現行モーダル 768 実測 ---- */
@media screen and (max-width: 840px) {

  .vo-dialog__panel {
    align-items: center;
    align-content: center;
  }

  .vo-dialog__main,
  .vo-dialog__service {
    justify-content: space-between;
  }

  .vo-dialog__body {
    font-size: 13px;
  }
}

/* ---- @mobile（~540px）。現行モーダル 375 / 430 実測 ---- */
@media screen and (max-width: 540px) {

  .vo-dialog__panel {
    gap: 20px;
    max-width: calc(100% - 40px);
    padding: 30px 20px;
  }

  .vo-dialog__person {
    align-items: flex-start;
    align-content: flex-start;
  }

  .vo-dialog__headline {
    letter-spacing: normal;
  }

  .vo-dialog__body {
    font-size: 16px;
  }
}

/* ---- @mini（~320px）: モーダルに上書きは無い（現行 320 実測で @mobile と同値） ---- */