/* ============================================================
   WIRE Brand Repo. — エディトリアル記事（標準投稿 / post）
   公開URL: /corp/articles/{ID}/   テンプレート: post/single.php

   - すべて .wbr 配下にスコープ。テーマ共通CSS（base.css / common.css）と同居する
   - base.css は h1-h6 の margin:0・font-weight:inherit、p の margin:0、
     body の word-break:break-all / letter-spacing:.08em まで踏み込むため、
     .wbr 配下だけブラウザ既定相当へ戻す（:where() で詳細度を (0,1,0) に抑え、
     この下のクラス規則が常に勝つようにする）
   - 意匠の正本は lp-25th/mockups/interview-01-daiwahouse_feature.html
   ============================================================ */

/* ---- 単位について ----
   このテーマは base.css で html{font-size:62.5%} を敷いており 1rem = 10px。
   意匠の正本（モック）は 1rem = 16px 前提で組んであるため、rem をそのまま持ち込むと
   本文幅もカラムも 62.5% に縮む。したがって post.css では rem を使わず px で持つ。 */

/* ---- base.css リセットの打ち消し（.wbr 配下限定） ---- */
body.wbr_body { min-width: auto; }                 /* base.css body{min-width:1320px} */
body.wbr_body .fixed-bnr { display: none !important; }  /* 追従DLバナーは記事の導線と競合 */
.wbr :where(*) { line-break: auto; word-break: normal; word-wrap: normal; }
.wbr :where(h1, h2, h3, h4, h5, h6) { font-weight: bold; }
.wbr :where(h1) { font-size: 2em; margin: .67em 0; }
.wbr :where(h2) { font-size: 1.5em; margin: .83em 0; }
.wbr :where(h3) { font-size: 1.17em; margin: 1em 0; }
.wbr :where(p) { margin: 1em 0; }
.wbr :where(em) { font-style: italic; }
.wbr :where(figure) { margin: 1em 0; line-height: normal; }
.wbr :where(a) { color: inherit; text-decoration: none; transition: color .2s; }
.wbr :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.wbr :where(img) { max-width: 100%; height: auto; display: block; }
@media screen and (min-width: 768px) {
  /* base.css の a:hover 下線付与を打ち消す（同詳細度・後勝ち） */
  :where(.wbr) a:hover, :where(.wbr) a:active, :where(.wbr) a:focus { text-decoration: none; }
}
:where(.wbr) a img:hover { opacity: 1; filter: none; }  /* lp.css の a img:hover 打ち消し */

/* ============================================================
     大和ハウス 特別インタビュー ― 上質エディトリアル モックアップ
     .lp25 デザインシステム（navy/gold・明朝）準拠 / 校正前・社内レビュー用
     ============================================================ */
.wbr, .wbr *, .wbr *::before, .wbr *::after { box-sizing: border-box; }

/* ---- ブランド定数（テーマ非依存） ---- */
.wbr {
  color-scheme: light dark;
  --navy:       #14253E;
  --navy-deep:  #0B1A2E;
  --navy-dark:  #040B1A;
  --gold:       #B8985A;
  --gold-light: #D4BA7F;
  --gold-deep:  #8A7340;
  --gold-ed:    #C3A86B;   /* 編集記号用の金（灰味を含むシャンパンゴールド） */
  --hairline:   rgba(184,152,90,0.55);
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'HGS明朝E', serif;
  --sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --measure: 800px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- テーマトークン：昼（既定）----
     すべての明暗差はこの3ブロックのトークンだけで表現する。
     個別要素を @media 内で上書きしない＝トグルで必ず両方向に反転するため。 */
.wbr, html[data-theme="light"] .wbr {
  --page-bg:    #F5F6F8;
  --card-bg:    #ffffff;
  --memo-bg:    #FBFAF7;
  --ink:        #1a2332;
  --ink-soft:   #3f4a5a;
  --ink-mute:   #6b7688;
  --line:       #dfe3ea;
  --accent-ink: #14253E;   /* 大きな見せ場の文字色＝濃紺 */
}

/* ---- テーマトークン：夜（OS設定）---- */
@media (prefers-color-scheme: dark) {
  .wbr {
    --page-bg:    #0c1626;
    --card-bg:    #12203a;
    --memo-bg:    rgba(184,152,90,.06);
    --ink:        #f2f5fa;
    --ink-soft:   #c7d0dd;
    --ink-mute:   #8b98ab;
    --line:       rgba(255,255,255,0.14);
    --accent-ink: #D4BA7F; /* 同上＝金（濃紺地では紺が沈むため） */
  }

}

/* ---- テーマトークン：夜（ビューアのトグル）----
     詳細度 (0,2,0) が上の @media 内 :root (0,1,0) に勝つので、
     OS設定と逆向きのトグルでも確実に反転する ---- */
html[data-theme="dark"] .wbr {
  --page-bg:    #0c1626;
  --card-bg:    #12203a;
  --memo-bg:    rgba(184,152,90,.06);
  --ink:        #f2f5fa;
  --ink-soft:   #c7d0dd;
  --ink-mute:   #8b98ab;
  --line:       rgba(255,255,255,0.14);
  --accent-ink: #D4BA7F;
}

.wbr {
  background: var(--page-bg);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
}

.wbr img {
  max-width: 100%; height: auto; display: block;
}

/* 本番 .lp25 と同じ規約：リンクの既定下線は出さず、境界線で示す */
.wbr a {
  color: inherit; text-decoration: none; transition: color .2s;
}

.wbr ::selection {
  background: rgba(184,152,90,0.28);
}

.wbr .wrap {
  max-width: 1088px; margin: 0 auto; padding: 0 24px;
}

.wbr .measure {
  max-width: var(--measure); margin-left: auto; margin-right: auto;
}

.wbr .nb {
  white-space: nowrap;
}

/* ---- DRAFT ribbon ---- */
.wbr .draft-flag {
  position: fixed; z-index: 50; top: 14px; right: -46px;
  transform: rotate(45deg);
  background: rgba(20,37,62,0.92); color: var(--gold-light);
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; font-weight: 700;
  padding: 6px 60px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  pointer-events: none;
}

/* ---- eyebrow ornament (dash + dot) ---- */
.wbr .eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .5em; text-transform: none;
  display: inline-flex; align-items: center; gap: 13px;
  color: var(--gold-deep);
}

.wbr .eyebrow::before {
  content: ''; width: 40px; height: 7px; opacity: .7; flex: none;
  background:
  linear-gradient(currentColor, currentColor) left center / 26px 1px no-repeat,
  radial-gradient(circle at center, currentColor 50%, transparent 51%) right center / 7px 7px no-repeat;
}

/* ============================================================
     HERO ― 静かな濃紺の地。金は「編集記号」としてのみ使う
     （SPECIAL INTERVIEW／タイトルの引用符／タイトル下の罫線 の3か所に限定）
     発光・ぼかし・光彩は使わない。
     ============================================================ */
.wbr .hero {
  position: relative; overflow: hidden;
  color: #fff;
  /* 本番LP（.lp25::before）と同じ環境光：青＝左上、金＝右下。輪郭を持つ装飾ではなく空気感 */
  background:
  radial-gradient(ellipse 70% 80% at 18% 22%, rgba(35,140,235,0.22), transparent 58%),
  radial-gradient(ellipse 65% 68% at 82% 72%, rgba(184,152,90,0.18), transparent 60%),
  radial-gradient(ellipse 60% 54% at 50% 100%, rgba(10,96,182,0.15), transparent 65%),
  linear-gradient(152deg, #0A1B31 0%, #081628 56%, #061426 100%);
}

/* 粒状ノイズで奥行きを足す（本番LP .lp25::after と同値） */
.wbr .hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 文字列（左）と写真（右）を、下端でそろえる */
.wbr .hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.02fr;
  align-items: end; gap: clamp(28px,4vw,60px);
  padding: clamp(76px,10vh,132px) 0 clamp(76px,10vh,132px);
}

/* 文字列は写真に対して上下中央に置く（写真は下端そろえのまま） */
.wbr .hero__text {
  align-self: center;
  padding-left: max(24px, calc((100vw - 1088px) / 2)); padding-right: 8px;
}

.wbr .hero__figure {
  margin: 0;
}

/* 支給トリミングをそのまま全画角で表示（object-fit による再切り出しはしない） */
.wbr .hero__photo {
  display: block; width: 100%; height: auto;
}

/* ---- ヒーローの文字組み（タイトル＞リード＞クレジットの三段階を明確に） ---- */
/* 和文まじりのため明朝。.eyebrow の欧文用設定（sans／字送り .5em）を打ち消す */
.wbr .hero__kicker {
  font-family: var(--serif); font-size: 15.5px; font-weight: 500;
  letter-spacing: .16em; color: var(--gold-ed);
  margin: 0 0 34px;   /* <p> の既定 margin-top:1em が効いてしまうため 0 を明示 */
}

.wbr .hero__company {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .16em; font-weight: 400;
  color: rgba(255,255,255,.72); margin: 0 0 26px;
}

.wbr .hero__title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1.32; letter-spacing: .02em;
  margin: 0; color: #fff; text-wrap: balance;
}

/* タイトル2行目以降（改行区切り）。主文に対して一段静かに */
.wbr .hero__title .hero__title-sub {
  display: inline-block;
  font-size: .62em; font-weight: 500;
  line-height: 1.5; letter-spacing: .03em;
  margin-top: .5em; color: #E4E9F0;
}

.wbr .hero__title .q {
  font-size: .72em; font-weight: 500; color: var(--gold-ed);
}

.wbr .hero__title .q--close {
  margin-left: -.24em;
}

.wbr .hero__sub {
  position: relative;
  font-family: var(--serif); font-size: clamp(13.5px,1.12vw,15.5px);
  letter-spacing: .02em; line-height: 1.72; color: #C5CCD5;
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(195,168,107,.55); max-width: 432px;
}

/* 罫線の上を、金の一筋がゆっくり左から右へ通る。
     4.5秒かけて渡り、以降は消えたまま待つ（10秒周期）＝視界の端で気づく程度に留める */
.wbr .hero__sub::after {
  content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232,211,163,.85), transparent);
  background-size: 36% 100%; background-repeat: no-repeat;
  animation: wbr-sub-sheen 10s cubic-bezier(.42,0,.58,1) infinite;
}

@keyframes wbr-sub-sheen {
    0%        { background-position: -38% 0; opacity: 0; }
    5%        { opacity: 1; }
    40%       { background-position: 138% 0; opacity: 1; }
    47%, 100% { background-position: 138% 0; opacity: 0; }
}

.wbr .hero__byline {
  font-family: var(--sans); font-size: 12px; letter-spacing: .03em; line-height: 1.85;
  color: rgba(255,255,255,.5); margin: 20px 0 0;
}

/* ============================================================
     MASTHEAD ― 発行者（編集主体）と掲載情報
     WIRE Brand Repo. ＝ 固有名称／PR WIRE Editorial Studio ＝ 肩書き
     ============================================================ */
/* 紺地の帯。ヒーローから続く「発行者の領域」として扱う。
     地が常に紺なので、中の色はページのテーマに依存させない */
.wbr .masthead {
  background: #0A1B31;
}

/* 夜は本文地も暗いため、帯が沈んで見えなくなる。地を一段だけ持ち上げて帯として読ませる */
@media (prefers-color-scheme: dark) {
  .wbr .masthead {
    background: #101F38;
  }

}

html[data-theme="dark"]  .masthead .wbr {
  background: #101F38;
}

html[data-theme="light"] .masthead .wbr {
  background: #0A1B31;
}

.wbr .masthead__inner {
  /* 本文カラムと左右をそろえる。.wrap の左右 padding(24px) を足した幅にすることで、
  広い画面では本文と同じ 320–1120、狭い画面では padding が残って端に張り付かない */
  max-width: calc(var(--measure) + 48px);
  display: flex; align-items: flex-end; gap: 0;
  padding-top: clamp(30px,4vh,46px); padding-bottom: clamp(26px,3.4vh,34px);
}

.wbr .masthead__mark {
  flex: none;
}

/* 確定ロゴ（wire-brand-repo horizontal）。字形はパス化済みで、閲覧環境に
     Futura PT が無くても化けない。色は昼夜でキットの2配色を差し替える */
.wbr .masthead__logo {
  --logo-w: clamp(198px, 21vw, 258px);
  display: block; width: var(--logo-w); height: auto;
  /* viewBox に含むクリアスペース（0.55W＝132単位＝幅の6.112%）を打ち消して
  箱の縁とインクの縁をそろえる。保護余白は帯の padding 側で確保する */
  margin: calc(var(--logo-w) * -0.06112);
}

/* 帯が常に紺地のため、キットの navy 配色で固定（テーマで切り替えない） */
.wbr .logo-ink {
  fill: #FFFFFF;
}

.wbr .logo-gold {
  fill: #D4BA7F;
}

.wbr .masthead__meta {
  flex: 1; font-family: var(--sans); font-size: 12.5px; line-height: 1;
  letter-spacing: .06em; color: rgba(255,255,255,.60);
  margin: 0 0 0 clamp(26px, 3.4vw, 52px);   /* ロゴのインク右端からのアキ */
  display: flex; align-items: baseline; gap: 12px;
}

.wbr .masthead__sep {
  color: rgba(255,255,255,.24);
}

.wbr .masthead__share {
  flex: none; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none;
}

.wbr .masthead__share a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26); color: rgba(255,255,255,.70);
  transition: color .2s, border-color .2s;
}

.wbr .masthead__share a:hover, .wbr .masthead__share a:focus-visible {
  color: #fff; border-color: var(--gold-ed); outline: none;
}

.wbr .masthead__share svg {
  width: 26px; height: 26px; fill: currentColor;
}

@media (max-width: 720px) {
  .wbr .masthead__inner {
    flex-wrap: wrap; align-items: flex-start; gap: 14px;
  }

  .wbr .masthead__meta {
    order: 3; flex: 1 0 100%;
  }

  .wbr .masthead__share {
    margin-left: auto;
  }

}

/* ============================================================
     LEAD
     ============================================================ */
.wbr .lead {
  padding: clamp(56px,8vh,96px) 0 clamp(40px,6vh,64px);
}

.wbr .lead__body {
  font-size: clamp(17px,1.7vw,19px); line-height: 2.0; color: var(--ink);
}

.wbr .lead__body p {
  margin: 0 0 1.4em;
}

.wbr .lead__body p:first-child::first-letter {
  font-family: var(--serif); font-size: 3.4em; float: left; line-height: .82;
  padding: 6px 12px 0 0; color: var(--accent-ink); font-weight: 600;
}

.wbr .lead__standout {
  font-family: var(--serif); font-weight: 600; color: var(--accent-ink);
  font-size: clamp(19px,2.1vw,24px); line-height: 1.7; letter-spacing: .02em;
  margin: 8px 0 1.4em !important; float: none;
}

/* ---- profile card ---- */
.wbr .profile {
  margin: 44px auto 0; max-width: var(--measure);
  background: var(--card-bg); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 2px;
  padding: 26px 30px;
}

.wbr .profile__name {
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink);
  margin: 0 0 4px; letter-spacing: .04em;
}

.wbr .profile__name span {
  font-size: 13px; color: var(--ink-mute); font-weight: 400; margin-left: 10px; letter-spacing: .08em;
}

.wbr .profile__role {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .1em; color: var(--gold-deep); margin: 0 0 14px;
}

.wbr .profile__bio {
  font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); margin: 0;
}

/* ---- CHAPTER 01 の背景：紙焼き／新幹線の時代を、白マスク越しに薄く敷く ---- */
.wbr .chapter--bg {
  position: relative; isolation: isolate;
}

.wbr .chapter--bg::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* 記事ごとの章背景。single.php が main[style] の --wbr-ch01-bg に asset dir 由来のURLを渡す */
  background-image: var(--wbr-ch01-bg, url(../../images/post/interview-01-daiwahouse/ch01-bg.webp));
  background-size: cover; background-position: 78% 42%; background-repeat: no-repeat;
  opacity: .34;
  /* 2枚のマスクを掛け合わせる（intersect）。
     ① 本文が乗る左〜中央へ向けて消し込む（右の余白側にだけ絵を残す）
     ② 章の上端・下端で消し込む。これが無いとセクション境界で絵が断ち切られ、
        隣の章との間に横一文字の切れ目が出る */
  -webkit-mask-image:
    linear-gradient(100deg, transparent 4%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.55) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
  mask-image:
    linear-gradient(100deg, transparent 4%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.55) 62%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;   /* 旧WebKit構文 */
  mask-composite: intersect;
}

/* 夜は紙の質感が濁るため、さらに沈める */
@media (prefers-color-scheme: dark) {
  .wbr .chapter--bg::before {
    opacity: .13;
  }

}

html[data-theme="dark"] .chapter--bg::before .wbr {
  opacity: .13;
}

html[data-theme="light"] .chapter--bg::before .wbr {
  opacity: .34;
}

/* ============================================================
     CHAPTERS
     ============================================================ */
.wbr .chapter {
  padding: clamp(48px,7vh,84px) 0; border-top: 1px solid var(--line);
}

.wbr .chapter__head {
  margin-bottom: 40px;
}

.wbr .chapter__no {
  font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--gold-deep);
  font-feature-settings: "tnum"; margin: 0 0 18px; display: flex; align-items: center; gap: 14px;
}

.wbr .chapter__no::after {
  content:''; flex:1; height:1px; background: var(--hairline); max-width: 120px;
}

.wbr .chapter__title {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(25px,3.2vw,38px); line-height: 1.45; letter-spacing: .02em;
  margin: 0; text-wrap: balance;
}

.wbr .chapter__title small {
  display:block; font-size: .58em; color: var(--ink-mute); font-weight: 400; margin-top: 12px; letter-spacing:.04em;
}

.wbr .prose p {
  font-size: 17px; line-height: 2.05; color: var(--ink-soft); margin: 0 0 1.5em; text-align: justify;
}

.wbr .prose p.dialog {
  color: var(--ink);
}

/* 話者表記：引用符の代わりに氏名＋コロンで発言者を示す */
.wbr .speaker {
  font-weight: 600; color: var(--ink); margin-right: .3em;
  font-feature-settings: "palt"; white-space: nowrap;
}

.wbr .prose .lead-in {
  color: var(--ink); font-weight: 500;
}

/* pull quote ― 特大引用 */
.wbr .pull {
  /* 本文（--measure）より狭くして、抜き出しであることを幅でも示す */
  margin: 72px auto 68px; padding: 0; position: relative; text-align: center;
  max-width: 560px;
}

.wbr .pull__mark {
  font-family: var(--serif); color: var(--gold); opacity:.5; font-size: 60px; line-height: .2; display:block; margin-bottom: 8px;
}

.wbr .pull q {
  quotes: none;
}

.wbr .pull__text {
  font-family: var(--serif); font-weight: 600; color: var(--accent-ink);
  font-size: clamp(22px,3vw,32px); line-height: 1.7; letter-spacing: .03em;
}

/* pull quote on navy (章の“決め”に1回だけ) */
.wbr .pull--dark {
  max-width: none; margin: 84px 0 78px;
  padding: clamp(48px,6vw,76px) clamp(28px,5vw,64px);
  background: linear-gradient(155deg, var(--navy), var(--navy-deep)); border-radius: 2px;
}

.wbr .pull--dark .pull__text {
  display: block; max-width: 496px; margin-inline: auto;
}

.wbr .pull--dark .pull__text {
  color: #fff;
}

.wbr .pull--dark .pull__mark {
  color: var(--gold-light); opacity:.65;
}

.wbr .pull--dark .pull__cite {
  font-family: var(--sans); font-size: 12px; letter-spacing:.14em; color: var(--gold-light); margin-top: 22px;
}

/* 実践メモ（TIPS）aside */
.wbr .memo {
  margin: 36px 0; background: var(--memo-bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 22px 26px;
}

.wbr .memo__label {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--gold-deep);
  display:flex; align-items:center; gap:10px; margin-bottom: 12px;
}

.wbr .memo__label::before {
  content:''; width:16px; height:16px; flex:none; border-radius:50%;
  border:1.5px solid var(--gold); background: radial-gradient(circle at 50% 42%, var(--gold) 0 2px, transparent 2px); opacity:.9;
}

.wbr .memo__body {
  font-size: 14px; line-height: 1.9; color: var(--ink-soft); margin: 0;
}

/* 資料 figure（申込書 / 応接室） */
.wbr .figure {
  margin: 40px 0;
}

.wbr .figure__frame {
  position: relative; border: 1px solid var(--line); background: var(--card-bg);
  aspect-ratio: 4 / 3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding: 24px; text-align:center; overflow:hidden;
}

/* 資料（申込書）：紙そのものなので実寸比で置き、枠線だけ添える */
.wbr .figure__frame--doc {
  aspect-ratio: auto; padding: 0; background: #fff; overflow: hidden;
}

.wbr .figure__frame--doc img {
  display: block; width: 100%; height: auto;
}

/* 夜は白紙が眩しいので一段落とす */
@media (prefers-color-scheme: dark) {
  .wbr .figure__frame--doc img {
    filter: brightness(.86);
  }

}

html[data-theme="dark"]  .figure__frame--doc img .wbr {
  filter: brightness(.86);
}

html[data-theme="light"] .figure__frame--doc img .wbr {
  filter: none;
}

/* 実写を入れる枠：base の padding / aspect-ratio を打ち消す（後置で確実に勝たせる） */
.wbr .figure__frame--photo {
  padding: 0; aspect-ratio: 3 / 2; border-color: var(--line);
}

.wbr .figure__frame--photo img {
  width: 100%; height: 100%; object-fit: cover;
}

.wbr .figure__en {
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em; color: var(--gold-deep);
}

.wbr .figure__rule {
  width: 30px; height: 1px; background: var(--gold);
}

.wbr .figure__label {
  font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing:.06em;
}

.wbr .figure__ph-note {
  font-family: var(--sans); font-size: 10.5px; letter-spacing:.06em; color: var(--ink-mute);
}

.wbr .figure figcaption {
  font-family: var(--sans); font-size: 12px; color: var(--ink-mute); margin-top: 12px; line-height:1.7; letter-spacing:.02em;
}

/* ============================================================
     FACTBOX + CLOSE
     ============================================================ */
.wbr .close {
  border-top: 1px solid var(--line); padding: clamp(48px,7vh,80px) 0 0;
}

/* ---- FACT の背景：取材が行われた会議室。本文中の写真と同じ部屋 ---- */
.wbr .close {
  position: relative; isolation: isolate;
}

.wbr .close::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url(../../images/post/interview-01-daiwahouse/fact-bg.webp);
  background-size: cover; background-position: 50% 62%; background-repeat: no-repeat;
  opacity: .20;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 22%, #000 55%, rgba(0,0,0,.5) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 22%, #000 55%, rgba(0,0,0,.5) 92%, transparent 100%);
}

@media (prefers-color-scheme: dark) {
  .wbr .close::before {
    opacity: .11;
  }

}

html[data-theme="dark"]  .close::before .wbr {
  opacity: .11;
}

html[data-theme="light"] .close::before .wbr {
  opacity: .20;
}

.wbr .factbox {
  max-width: var(--measure); margin: 0 auto;
}

.wbr .factbox__head {
  margin-bottom: 22px;
}

.wbr .factbox dl {
  margin: 0; border-top: 1px solid var(--line);
}

.wbr .factbox .row {
  display: grid; grid-template-columns: 192px 1fr; gap: 0;
  border-bottom: 1px solid var(--line);
}

.wbr .factbox dt {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .06em; color: var(--ink-mute);
  padding: 14px 16px 14px 0; background: transparent;
}

.wbr .factbox dd {
  margin: 0; padding: 14px 0; font-size: 14.5px; color: var(--ink); line-height:1.8;
}

.wbr .factbox dd small {
  color: var(--ink-mute); font-size: 12px;
}

.wbr .credit {
  max-width: var(--measure); margin: 40px auto 0; font-family: var(--sans);
  font-size: 12.5px; line-height: 1.95; color: var(--ink-mute); letter-spacing: .02em;
}

.wbr .anniv-note {
  max-width: var(--measure); margin: 20px auto 0; padding: 18px 22px;
  border: 1px dashed var(--line); border-radius: 4px; font-family: var(--sans); font-size: 12px;
  color: var(--ink-mute); line-height: 1.8;
}

/* ---- 記事末の導線：紺帯の上に、LP「ともに、次の25年を。」と同じ半透明ボックス ---- */
.wbr .closing-cta {
  background: #0A1B31;
}

@media (prefers-color-scheme: dark) {
  .wbr .closing-cta {
    background: #101F38;
  }

}

html[data-theme="dark"]  .closing-cta .wbr {
  background: #101F38;
}

html[data-theme="light"] .closing-cta .wbr {
  background: #0A1B31;
}

.wbr .closing-cta__inner {
  max-width: calc(var(--measure) + 48px);   /* 本文カラムと左右をそろえる */
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding-top: clamp(44px,6vh,68px); padding-bottom: clamp(48px,7vh,76px);
}

.wbr .closing-cta__item {
  display: flex; flex-direction: column; gap: 9px;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 2px; padding: 26px 26px 22px;
  transition: background .25s, transform .3s var(--ease);
}

.wbr .closing-cta__item:hover, .wbr .closing-cta__item:focus-visible {
  background: rgba(255,255,255,.12); transform: translateY(-4px); outline: none;
}

.wbr .closing-cta__eyebrow {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .24em; color: var(--gold-ed);
}

.wbr .closing-cta__title {
  font-family: var(--serif); font-size: clamp(16px,1.7vw,18.5px); font-weight: 600;
  color: #fff; letter-spacing: .03em; line-height: 1.5;
}

.wbr .closing-cta__note {
  font-size: 12.5px; line-height: 1.85; color: rgba(255,255,255,.62);
}

.wbr .closing-cta__go {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.88); margin-top: auto; padding-top: 12px;
}

@media (max-width: 720px) {
  .wbr .closing-cta__inner {
    grid-template-columns: 1fr; gap: 14px;
  }

}

/* ---- 25周年に寄せて（記事末の囲み）----
   語り手から当社宛にいただいたメッセージ。記事の締め（――信頼を守る。）を
   弱めないよう、FACT のあとに置き、見出しで「本文ではない」ことを明示する。
   金の輪郭は使わず、地に沈む静かな箱にとどめる（推薦文に見せない）。 */
.wbr .voice {
  max-width: var(--measure); margin: 30px auto 0;
  background: var(--memo-bg); border: 1px solid var(--line); border-radius: 2px;
  padding: 26px 28px 22px;
}
.wbr .voice__label {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em;
  color: var(--gold-deep); margin: 0 0 12px;
}
.wbr .voice__text { font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); margin: 0; }
.wbr .voice__cite {
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
  color: var(--ink-mute); margin: 14px 0 0; text-align: right;
}

@media (max-width: 720px) {
  .wbr .voice { padding: 22px 20px 18px; }
}

/* ---- 発行元と相談窓口（記事末）----
   紺帯（closing-cta）のあと、ここで白地へ戻して共通フッターへ接続する
   （白地でフッターに繋ぐのがサイトの決まり）。

   ■ ここだけは夜でも白地にする。
   共通フッターがダーク非対応で明るいままなので、記事側が暗いままだと
   接続点で明暗がぶつかる。この節でトークンを昼の値に戻し、
   記事の地 → 白 → フッター と繋げる。
   トークンは .colophon 自身に宣言するので、.wbr 側の夜の値（@media でも
   data-theme トグルでも）は継承されず、この節の中だけが常に昼になる。 */
.wbr .colophon {
  --page-bg:    #ffffff;   /* 記事の地（#F5F6F8）ではなく純白。フッターの白と直に繋ぐ */
  --card-bg:    #F1F3F7;   /* 純白の上なので、従ボタンのホバー面は地より暗い側へ取る */
  --ink:        #1a2332;
  --ink-soft:   #3f4a5a;
  --ink-mute:   #6b7688;
  --line:       #dfe3ea;
  --accent-ink: #14253E;
  background: var(--page-bg);
}

.wbr .colophon__inner {
  max-width: calc(var(--measure) + 48px);   /* 本文カラムと左右をそろえる */
  padding-top: clamp(40px,6vh,64px); padding-bottom: clamp(44px,7vh,72px);
  /* 本文幅では説明文と横並びにする余地がないので、最初から縦積みで固定する
     （space-between + wrap にすると幅次第で並びが変わって落ち着かない） */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(22px,3vh,30px);
}

.wbr .colophon__eyebrow { margin-bottom: 10px; }
.wbr .colophon__name {
  font-family: var(--sans); font-size: 15.5px; font-weight: 700;
  color: var(--ink); letter-spacing: .06em; margin-bottom: 7px;
}
.wbr .colophon__note { font-size: 13px; line-height: 1.9; color: var(--ink-soft); }

.wbr .colophon__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wbr .colophon__btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .06em; line-height: 1;
  transition: background-color .2s, color .2s, border-color .2s;
}
/* 主（媒体資料）は金、従（お問い合わせ）は地の罫色。色相で主従を分ける。
   ホバーで金を敷いたときの文字は濃紺固定（白だと金の上でコントラストが出ない）。 */
.wbr .colophon__btn--kit { border-color: var(--gold); color: var(--ink); font-weight: 700; }
.wbr .colophon__btn--kit:hover,
.wbr .colophon__btn--kit:focus-visible { background: var(--gold); color: var(--navy); }
.wbr .colophon__btn--contact { border-color: var(--line); color: var(--ink-soft); }
.wbr .colophon__btn--contact:hover,
.wbr .colophon__btn--contact:focus-visible {
  border-color: var(--ink-mute); background: var(--card-bg); color: var(--ink);
}

@media (max-width: 600px) {
  .wbr .colophon__inner { align-items: stretch; gap: 22px; }
  .wbr .colophon__actions { flex-wrap: nowrap; }
  .wbr .colophon__btn { justify-content: center; flex: 1; padding: 13px 16px; }
}

.wbr a:focus-visible, .wbr button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ---- reveal ---- */
.wbr [data-reveal] {
  opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.wbr [data-reveal].is-in {
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .wbr [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none;
  }

  .wbr {
    scroll-behavior: auto;
  }

  .wbr .hero__sub::after {
    animation: none; opacity: 0;
  }

  /* 光の一筋は止める */
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  /* 縦積み：写真が上、文字が下。固定・追従はしない（素直にスクロールする）。
       flex にするのは order で写真を先頭へ回すため（block だと order が効かない）。
       align-items は PC の end を必ず打ち消す：縦並びの flex では横方向の指定になり、
       文字ブロックが右寄せ＋内容幅に縮んでしまう */
  .wbr .hero__inner {
    display: flex; flex-direction: column; align-items: stretch; padding: 0;
    gap: 0;   /* PC の gap（写真と文字の間に 28px 空いていた）を打ち消す */
    /* 1stビューを画面高に。svh はアドレスバーの伸縮で高さが暴れないため */
    min-height: 100vh; min-height: 100svh;
  }

  .wbr .hero__figure {
    order: -1; align-self: auto; width: 100%; flex: none;
  }

  /* 写真の下に残った領域を占め、その中で文字を上下中央に置く */
  .wbr .hero__text {
    align-self: auto; flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 24px;
  }

  .wbr .nb {
    white-space: normal;
  }

  /* 狭い画面では折り返しを許す（見切れ防止） */
  .wbr .factbox .row {
    grid-template-columns: 136px 1fr;
  }

}

@media (max-width: 560px) {
  .wbr {
    font-size: 16px;
  }

  .wbr .factbox .row {
    grid-template-columns: 1fr; gap: 0;
  }

  .wbr .factbox dt {
    padding-bottom: 2px;
  }

  .wbr .factbox dd {
    padding-top: 4px; padding-bottom: 16px;
  }

}


/* ============================================================
   記事専用ヘッダー（post/_site-header.php）
   コーポレート共通ヘッダーの代わりに出す細い紺帯。
   ヒーロー・マストヘッドと地続きの「発行元の領域」として扱うため、
   帯／ヒーロー／マストヘッドは同じ紺で繋げる。
   ============================================================ */
.wbr-siteheader {
  background: #0A1B31;
  position: sticky; top: 0; z-index: 60;
  /* 最上部ではヒーローと同じ紺なので境目を出さない。離れて初めて影を置く */
  transition: box-shadow .25s;
}
.wbr-siteheader.is-stuck { box-shadow: 0 2px 16px rgba(0,0,0,.28); }

/* ヘッダーは <main class="wbr"> の外に出るため、.wbr にスコープした変数も .wrap も
   届かない。この帯だけは値を自前で持たせて自己完結させる。
   base.css は @media(min-width:768px) で a:hover に下線を足すため、
   帯の中のリンクは「下線＋border-bottom」で線が2本に見える。ここで下線を殺す。 */
.wbr-siteheader a { text-decoration: none; }
.wbr-siteheader a:hover,
.wbr-siteheader a:active,
.wbr-siteheader a:focus { text-decoration: none; }

.wbr-siteheader__inner {
  max-width: 848px;          /* 本文カラム（800px）＋ 左右 padding 24px */
  margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center;
  gap: 24px; min-height: 66px;   /* ロゴ36px＋クリアスペース上下14.1px（0.55W）を満たす高さ */
  box-sizing: border-box;
}
.wbr-siteheader__brand { display: block; flex: none; transition: opacity .2s; text-decoration: none; }
.wbr-siteheader, .wbr-siteheader * { box-sizing: border-box; }
.wbr-siteheader__brand:hover { opacity: .82; }
/* ロックアップはブランドキットの納品SVG（standard）から起こした比率。
   eyebrow が 0.43W と大きいぶん、旧版より天地が深い。PR WIRE のキャップ高を
   従来と同じ約18pxに保つには 36px 必要（30pxだと 14.9px まで痩せる）。
   クリアスペース 0.55W ＝ 14.1px は帯の min-height 側で確保する。 */
.wbr-siteheader__logo { display: block; height: 36px; width: auto; }
.wbr-siteheader__logo .hb-name    { fill: #FFFFFF; }
.wbr-siteheader__logo .hb-eyebrow { fill: #D4BA7F; }
.wbr-siteheader__nav {
  margin-left: auto;         /* ナビとCTAを右側でひとかたまりにする */
  display: flex; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 12.5px; letter-spacing: .06em;
  /* flexアイテムの既定 min-width:auto は内容幅を下回れない＝収まらないとき折り返さず
     はみ出す。0 にして「縮む → 折り返す」を効かせる（横スクロールを出さない保険） */
  min-width: 0;
}
.wbr-siteheader__nav a {
  color: rgba(255,255,255,.72); padding-bottom: 3px;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.wbr-siteheader__nav a:hover,
.wbr-siteheader__nav a:focus-visible { color: #fff; border-color: #C3A86B; outline: none; }

@media (max-width: 720px) {
  .wbr-siteheader__inner { min-height: 58px; gap: 14px; }
  .wbr-siteheader__logo { height: 30px; }
  .wbr-siteheader__nav { font-size: 11.5px; gap: 14px; }
}

/* スマホ実機幅（375px）だと「特別インタビュー」＋「25周年特設サイト」で
   ロゴを含めた1行が収まりきらない。級数と余白を詰め、それでも足りない幅では
   「25周年特設サイト」を落とす（行き先は記事末の導線に必ずある）。 */
@media (max-width: 480px) {
  .wbr-siteheader__inner { padding: 0 18px; gap: 10px; }
  .wbr-siteheader__logo { height: 27px; }
  .wbr-siteheader__nav { font-size: 11px; gap: 12px; letter-spacing: .03em; }
}
@media (max-width: 400px) {
  .wbr-siteheader__navitem--wide { display: none; }
}