@charset "UTF-8";
/* =========================================================================
   GOLDER — Hotel Investment Advisors
   design_handoff/SPEC.md のライト版を実装したもの。

     · 文字組みが主役。写真は補助。装飾は罫線とゴールドの細線のみ
     · 角丸なし・影なし。境界は 1px 罫線
     · 字送り（letter-spacing）と負の margin-right による右端補正が生命線

   数値（clamp / letter-spacing / duration / easing）は SPEC の確定値。
   「改善」のつもりで触らないこと。
   ========================================================================= */

/* 見出し用・数字だけの明朝サブセット（Noto Serif JP 可変・約4KB）。
   Cormorant の数字は x ハイトが低く、和文見出しに混ざると小文字のように
   見えて誤植と受け取られる。unicode-range で 0-9 だけこちらに向け、
   欧文は従来どおり Cormorant、和文は Noto Serif JP に落とす。 */
@font-face {
  font-family: "GH Serif Digits";
  src: url("../fonts/notoserifjp-digits.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0030-0039;
}

:root {
  /* paper — 白地。JLL・リゾートトラスト系の「法人サイトとして信用できる見え方」を優先する。
     生成り／クリームは雰囲気は出るが、大型案件を託す相手としては軽く見える。
     区切りは地色の差ではなく、白・薄いグレー・ヘアラインで作る。 */
  --paper-rgb:  255 255 255;  /* #FFFFFF — ベース。半透明合成に使うので分解して持つ */
  --paper:      rgb(var(--paper-rgb));
  --paper-2:    #F5F5F3;  /* セクション背景 2 */
  --paper-3:    #EFEFEC;  /* セクション背景 3（FAQ・フッター） */
  --paper-hero: #FFFFFF;  /* ヒーロー／CTA */

  /* ink。半透明で重ねる箇所が多いので RGB も分解して持つ */
  --ink-rgb:    20 22 20;
  --ink:        #141614;
  --ink-head:   #0F110F;
  /* 副次テキストの薄さは AA 下限（比 4.5）ぎりぎりまで落とさない。
     和文は字画が多く、薄いと本文として読めない。 */
  --ink-soft:   rgb(var(--ink-rgb) / .78);
  --ink-mute:   rgb(var(--ink-rgb) / .72);
  --ink-faint:  rgb(var(--ink-rgb) / .72);

  /* 反転帯（The Gold Standard） */
  --deep:       #131714;
  --deep-ink:   #F0F0E9;
  --deep-soft:  rgba(240, 240, 233, .72);

  /* accent */
  --gold-rgb:   198 166 100;
  --gold2-rgb:  146 115 52;
  --g-gold:     #C6A664;  /* 刻印・罫線。ベタ塗りには使わない */
  --g-gold-2:   #866B2F;  /* 文字・リンク。#8C6F31 だとコントラスト比 4.24 で WCAG AA 未達だったため微調整 */
  --gold-deep:  #D8BE86;  /* 反転帯の上のゴールド */
  --assay:      #5A6B5E;  /* 第 2 アクセント（試金の緑）。数値・単位・検証済みの印にのみ使う。比 5.03 */

  /* lines */
  --hair:       rgb(var(--ink-rgb) / .14);
  --hair-soft:  rgb(var(--ink-rgb) / .11);
  --hair-deep:  rgb(var(--gold-rgb) / .32);

  --wrap:   1500px;
  --wrap-m: 1200px;
  --pad-x:  clamp(22px, 6vw, 120px);
  --sec-y:  clamp(96px, 15vh, 190px);

  /* 写真が入るまでのプレースホルダ地 */
  --ph-a: #DBDBD3;
  --ph-b: #C2C2B9;

  /* スクロールバー */
  --sb-track:   #E6E5DF;
  --sb-thumb:   #C3C3BA;
  --sb-thumb-h: #A2A29A;

  /* 入力エラー。アクセントとは別系統の意味色 */
  --bad:     #A4574C;
  --bad-bg:  #F4E9E4;
  --bad-ink: #7D3B32;

  /* 大きな見出しだけ明朝（ブランドの character）、本文と UI はゴシック（可読性と信頼感）。
     等幅大文字のラベルはラボ／スタートアップの記号になり、仲介業者としては軽く見えるので使わない。
     20px 以下の文字は原則すべて --sans。 */
  --serif: "GH Serif Digits", "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --label: var(--sans);
  --num:   var(--sans);

  --ease: cubic-bezier(.16, 1, .3, 1);   /* 標準 */
  --clip: cubic-bezier(.76, 0, .24, 1);  /* クリップ系（ローダー・メニュー） */
}

/* ADR・稼働率・客室数・価格——数値は本文に埋めず、計測値として組む。 */
.num, .fig {
  font-family: var(--num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: .02em;
}

/* 言語ごとの CJK 書体。見出しの明朝と本文のゴシックを言語ごとに差し替える。 */
.lang-ko {
  --serif: "GH Serif Digits", "Cormorant Garamond", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --sans:  "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;
}
.lang-zh-hans {
  --serif: "GH Serif Digits", "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --sans:  "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
}
.lang-zh-hant {
  --serif: "GH Serif Digits", "Cormorant Garamond", "Noto Serif TC", "Songti TC", serif;
  --sans:  "Noto Sans TC", -apple-system, "PingFang TC", sans-serif;
}
/* 約物の詰めは日本語向けの指定なので、他言語では外す。 */
.lang-ko, .lang-zh-hans, .lang-zh-hant { font-feature-settings: normal; }

/* このサイトはライト（明るい地）のみ。
   OS のダーク設定に追随する実装を一度入れたが、黒地は本件の見え方に合わないため撤去した。
   色はすべてトークン経由で書いてあるので、必要になったら :root のトークンを
   別ブロックで再定義するだけで足りる。個別のコンポーネントに生の色を書かないこと。 */

/* 読み上げ専用。見た目には出さないが、支援技術には読ませる。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  background: var(--paper);
  /* OS がダークでも、フォームコントロールとスクロールバーを暗転させない */
  color-scheme: light;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  /* ゴシックの和文に広い字送りを掛けると素人の組版に見える。詰めすぎない程度に留める。 */
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 300; margin: 0;
  /* 和文の大きな見出しは行長を揃える。語中で割れるのを避ける。 */
  text-wrap: balance;
  line-break: strict;
  /* Cormorant の既定はオールドスタイル数字で、和文見出しの中では
     小文字のように見えて誤植に見える。見出しはライニング数字で組む。 */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--g-gold); color: #0B0B0C; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-h); }

/* 旧グレインノイズ（feTurbulence）はここにあった。
   一度 96px の目盛りに置き換えたが、position:fixed の全面オーバーレイは
   本文の上に線を引くことになり、見出しも本文も読みにくくなったため撤去した。
   「計測されている」という含みは、ヒーローの図・等幅のラベルと tabular-nums・
   ヘアラインの罫線・Services の工程帯が既に担っている。ここに戻さないこと。 */

/* ---------- layout ---------- */
.wrap    { width: 100%; max-width: var(--wrap);   margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--m { width: 100%; max-width: var(--wrap-m); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--s { width: 100%; max-width: 980px;         margin-inline: auto; padding-inline: var(--pad-x); }

.sec { position: relative; padding-block: var(--sec-y); scroll-margin-top: 70px; }
.sec--paper2 { background: var(--paper-2); }
.sec--paper3 { background: var(--paper-3); }
.sec--white  { background: var(--paper); }
.sec--tight  { padding-block: clamp(64px, 9vh, 130px); }
.sec--hair-top { border-top: 1px solid var(--hair); }
/* 同じ地色のセクションが隣り合うと境目が消えるので、罫線で区切る。 */
.sec--paper2 + .sec--paper2,
.sec--paper3 + .sec--paper3,
.sec--white  + .sec--white { border-top: 1px solid var(--hair); }

/* 反転帯 */
.sec--deep { background: var(--deep); color: var(--deep-ink); }
.sec--deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 90% at 50% 0%, rgb(var(--gold-rgb) / .14) 0%, rgb(var(--gold-rgb) / 0) 68%);
}
.sec--deep > * { position: relative; }

/* CTA 帯 */
.sec--cta { background: var(--paper-hero); }

/* =========================================================================
   共通タイポ
   ========================================================================= */

/* eyebrow は「42px のゴールド罫 ＋ 等幅の小さな欧文ラベル」。 */
.eyebrow {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--label);
  font-size: 11px; font-weight: 300;
  letter-spacing: .16em;
  color: var(--g-gold-2);
  line-height: 2;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.eyebrow::before {
  content: ""; display: block; flex: none;
  width: 42px; height: 1px; background: var(--g-gold);
}
.sec-head--center .eyebrow, .ctaband .eyebrow, .statement .eyebrow { justify-content: center; }
.sec-head--center .eyebrow::after, .ctaband .eyebrow::after, .statement .eyebrow::after {
  content: ""; display: block; flex: none;
  width: 36px; height: 1px; background: var(--g-gold);
}
.sec--deep .eyebrow { color: var(--gold-deep); }
.sec--deep .eyebrow::before, .sec--deep .eyebrow::after { background: rgb(var(--gold-rgb) / .7); }

.sec-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 46em; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-title {
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.6;
  letter-spacing: .05em;
  color: var(--ink-head);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.sec-title:last-child { margin-bottom: 0; }
.sec--deep .sec-title { color: var(--deep-ink); }

/* 見出し中の強調はゴールド。イタリックは欧文のみ——和文に斜体を掛けると
   合成イタリックになって字形が崩れるため、CJK 言語では立体のままにする。 */
.accent { color: var(--g-gold-2); font-style: normal; }
.lang-en .accent { font-style: italic; }
.sec--deep .accent { color: var(--gold-deep); }

.sec-lead {
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.1;
  letter-spacing: .09em;
  color: var(--ink-soft);
  max-width: 44em;
}
.sec-head--center .sec-lead { margin-inline: auto; }
.sec--deep .sec-lead { color: var(--deep-soft); }
.sec-lead + .sec-lead { margin-top: 1.5em; }

/* =========================================================================
   リンクとボタン
   ========================================================================= */

/* 既定は「等幅の欧文ラベル ＋ 40px の罫」。 */
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: clamp(28px, 3.4vw, 46px); }
.sec-head--center .btns, .ctaband .btns { justify-content: center; }

.lnk {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--label);
  font-size: 11px; font-weight: 300;
  letter-spacing: .16em;
  line-height: 2;
  color: var(--g-gold-2);
  transition: color .5s var(--ease);
}
.lnk::after {
  content: ""; display: block; flex: none;
  width: 40px; height: 1px; background: currentColor;
  transition: width .6s var(--ease);
}
.lnk:hover { color: var(--ink-head); }
.lnk:hover::after { width: 58px; }
.sec--deep .lnk { color: var(--gold-deep); }
.sec--deep .lnk:hover { color: var(--deep-ink); }

/* ヒーロー・CTA・ヘッダーの主要導線。
   一番大事な導線は「押せることが一目で分かる」ことを優先し、濃いインクのベタで塗る。
   凝った罫線の箱より、法人サイトとしてはこちらのほうが信用される。 */
.hero .btns .lnk,
.ctaband .btns .lnk,
.header-cta .lnk {
  font-family: var(--sans);
  font-size: 15px; font-weight: 500; letter-spacing: .06em;
  color: var(--ink-head);
  background: transparent;
  border: 1px solid rgb(var(--ink-rgb) / .32);
  padding: 0 clamp(26px, 3.2vw, 44px);
  min-height: 58px;
  gap: 0;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.hero .btns .lnk::after,
.ctaband .btns .lnk::after,
.header-cta .lnk::after { display: none; }

/* 第一導線＝濃いインクのベタ。ゴールドは細い下線で残す。 */
.hero .btns .lnk:first-child,
.ctaband .btns .lnk:first-child {
  color: #FFFFFF;
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 0 var(--g-gold);
}
.hero .btns .lnk:first-child:hover,
.ctaband .btns .lnk:first-child:hover { background: #2C302B; border-color: #2C302B; }

/* 第二導線＝罫線のみ。 */
.hero .btns .lnk:not(:first-child):hover,
.ctaband .btns .lnk:not(:first-child):hover {
  border-color: var(--ink); background: rgb(var(--ink-rgb) / .05);
}

.header-cta .lnk {
  font-size: 14px; min-height: 0; padding: 13px 22px;
  color: #FFFFFF; background: var(--ink); border-color: var(--ink);
}
.header-cta .lnk:hover { background: #2C302B; border-color: #2C302B; color: #FFFFFF; }

/* フォーム送信ボタン。第一導線と同じ扱い。 */
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 clamp(30px, 3.6vw, 54px);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .06em;
  color: #FFFFFF; background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 0 var(--g-gold);
  transition: background-color .35s ease, border-color .35s ease;
}
.btn-solid:hover { background: #2C302B; border-color: #2C302B; }

/* =========================================================================
   ローダー — 1150ms 後に上へ抜ける
   ========================================================================= */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--paper-hero);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s var(--clip);
}
.loader[data-open="true"] { clip-path: inset(0 0 100% 0); }
.loader[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────
   ローダーの設計図（2026-08-14）

   ホテルの図面が線から起こされていく数秒を最初に見せ、その手前に
   ブランドを置く。建物が建っていく演出ではなく、資産の構造を読み解いて
   いく印象を優先する。トップの本文には一切かからない（本文の上に線が
   乗ると読みにくくなる。2026-08-09 に一度やった失敗）。

   要素ごとに --i（連番）が入っているので、animation-delay を
   calc(var(--i) * 実時間) で出せば、要素の数だけセレクタを書かずに
   順番に現れる。外部ライブラリは使わない。
   ────────────────────────────────────────────────────────── */
.loader--bp { display: grid; place-items: center; gap: 0; }
.loader--bp > * { grid-area: 1 / 1; }        /* 図面とブランドを重ねる */

.loader__draw {
  width: min(88vw, 980px);
  opacity: .62;                               /* ブランド名の可読性を優先 */
  pointer-events: none;
}
.loader__draw svg { width: 100%; height: auto; display: block; overflow: visible; }

.loader__brand {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  /* z-index を必ず立てる。position:relative だけではスタッキングコンテキストが
     できず、下の ::before（z-index:-1）が図面より後ろへ抜けて地が効かない。 */
  position: relative; z-index: 1;
}
/* 図面の線がブランド名に重なるので、文字の周りだけ地を作る。
   薄く敷くだけでは線が透けて字が濁った（実際に一度そうなった）。
   中心は完全に不透明にし、外へ向けて図面へ溶かす。 */
.loader--bp .loader__brand::before {
  content: "";
  position: absolute; inset: -54px clamp(-140px, -9vw, -70px);
  background: radial-gradient(ellipse at center,
    var(--paper-hero) 0%, var(--paper-hero) 46%,
    rgb(var(--paper-rgb) / .86) 66%, rgb(var(--paper-rgb) / 0) 100%);
  z-index: -1;
}

/* 図面は 2 秒強で描き切る。ヒーローに置いていたときより速く、
   待たされている感じにならない範囲に収める。 */
.loader__draw svg g > * {
  opacity: 0;
  animation: bpInk 620ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--bp-base, 0ms) + var(--i, 0) * 4.5ms);
}
@keyframes bpInk { from { opacity: 0; } to { opacity: 1; } }

/* 描く順序＝図面を起こす順 */
.loader__draw #bp-grid       { --bp-base: 0ms; }
.loader__draw #bp-structure  { --bp-base: 240ms; }
.loader__draw #bp-facade     { --bp-base: 620ms; }
.loader__draw #bp-windows    { --bp-base: 860ms; }
.loader__draw #bp-section    { --bp-base: 1120ms; }
.loader__draw #bp-plan       { --bp-base: 1300ms; }
.loader__draw #bp-room       { --bp-base: 1620ms; }
.loader__draw #bp-dimensions { --bp-base: 1780ms; }
.loader__draw #bp-gold       { --bp-base: 1900ms; }
.loader__draw #bp-labels     { --bp-base: 2050ms; }

/* 外形と地盤だけは、ペンで引くように線を伸ばす。
   pathLength を 1 に正規化してあるので、実長に関係なく同じ尺で描ける。
   rect には pathLength を使っていない（対応がまちまちで点線になる）。 */
.loader__draw #bp-structure > line,
.loader__draw #bp-structure > path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation:
    bpInk 200ms ease forwards,
    bpDraw 720ms cubic-bezier(.33, .1, .2, 1) forwards;
  animation-delay: calc(var(--bp-base) + var(--i, 0) * 34ms);
}
@keyframes bpDraw { to { stroke-dashoffset: 0; } }

/* 金は図面ごとの入れ子グループ。まとめ役の g 自体は動かさず、
   中の線だけをアニメーションさせる（二重にフェードさせない）。 */
.loader__draw #bp-gold > g { opacity: 1; animation: none; }

/* 狭い画面では細部を落とし、立面図と平面図だけを見せる。
   小さく描くと線が潰れて、密度だけが残って読めなくなる。
   **対応する金も一緒に消すこと。** 図面を消して金だけ残すと、
   短い金の線が宙に浮いて見える（実際にそうなった）。 */
@media (max-width: 720px) {
  .loader__draw { width: 94vw; opacity: .5; }
  .loader__draw #bp-dimensions,
  .loader__draw #bp-room,
  .loader__draw #bp-section,
  .loader__draw #bp-labels,
  .loader__draw #bp-gold-room,
  .loader__draw #bp-gold-section { display: none; }
  .loader__draw svg g > * { animation-delay: calc(var(--bp-base, 0ms) * .7 + var(--i, 0) * 3ms); }
}

@media (prefers-reduced-motion: reduce) {
  .loader__draw svg g > *,
  .loader__draw #bp-structure > line,
  .loader__draw #bp-structure > path { opacity: 1; animation: none; stroke-dashoffset: 0; }
}
.loader__mark {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(30px, 5vw, 58px); letter-spacing: .42em; margin-right: -.42em;
  color: var(--ink); line-height: 1;
}
.loader__rule { display: block; width: min(220px, 40vw); height: 1px; background: var(--g-gold); transform-origin: left; }
.loader__sub {
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .18em; margin-right: -.18em;
  color: rgb(var(--ink-rgb) / .7); line-height: 1;
}

/* =========================================================================
   ヘッダー
   ========================================================================= */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0);
  background-color: rgb(var(--paper-rgb) / 0);
  transition: background-color .8s ease, padding .8s var(--ease), border-color .8s ease;
  padding-block: 32px;
}
.site-header[data-mode="solid"] {
  padding-block: 18px;
  background-color: rgb(var(--paper-rgb) / .78);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border-bottom-color: var(--hair);
}
.header-inner {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(20px, 4.4vw, 64px);
}

.brand { display: flex; flex-direction: column; gap: 7px; margin-right: auto; }
.brand__mark {
  font-family: "Cormorant Garamond", serif; font-weight: 400;
  font-size: clamp(19px, 2vw, 25px); letter-spacing: .4em; margin-right: -.4em;
  color: var(--ink); line-height: 1; white-space: nowrap;
}
.brand__sub {
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .2em; margin-right: -.2em;
  color: rgb(var(--ink-rgb) / .68); line-height: 1; white-space: nowrap;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav a {
  font-family: var(--sans); font-weight: 300;
  font-size: 13.5px; letter-spacing: .14em;
  color: rgb(var(--ink-rgb) / .82); white-space: nowrap;
  transition: color .5s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--g-gold-2); }

.header-actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }

/* 言語切替 */
.langsw { position: relative; }
.langsw__btn {
  display: flex; align-items: center; gap: .7em; padding: 8px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .78); transition: color .5s ease;
}
.langsw__btn:hover { color: var(--g-gold-2); }
.langsw__btn svg { width: 13px; height: 13px; flex: none; opacity: .75; }
.langsw__btn .chev { width: 8px; height: 8px; transition: transform .5s var(--ease); }
.langsw[data-open="true"] .chev { transform: rotate(180deg); }
.langsw__list {
  position: absolute; right: 0; top: calc(100% + 14px); min-width: 200px;
  background: var(--paper); border: 1px solid var(--hair);
  padding: 8px 0; display: none;
}
.langsw[data-open="true"] .langsw__list { display: block; }
.langsw__list a {
  display: block; padding: 11px 24px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 300; letter-spacing: .12em;
  color: var(--ink); transition: background-color .4s ease, color .4s ease;
}
.langsw__list a:hover { background: var(--paper-2); }
.langsw__list a[aria-current="true"] { color: var(--g-gold-2); }

/* メニューボタン（2 本線、上が長い） */
.navtoggle {
  display: none; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 5px; width: 24px;
  background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--ink);
}
.navtoggle span {
  display: block; height: 1px; background: currentColor;
  transition: transform .45s var(--ease), opacity .3s ease, width .45s var(--ease);
}
.navtoggle span:nth-child(1) { width: 24px; }
.navtoggle span:nth-child(2) { width: 14.4px; }
body.nav-open .navtoggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.nav-open .navtoggle span:nth-child(2) { width: 24px; transform: translateY(-3px) rotate(-45deg); }

/* =========================================================================
   ヒーロー — 写真は淡いスクリムの下。文字は地の色の上に置く
   ========================================================================= */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(100svh, 980px);
  background: var(--paper-hero);
  color: var(--ink);
}
.hero__media { position: absolute; inset: -7%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: gKen 30s ease-in-out infinite alternate; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--paper-rgb) / .9) 0%, rgb(var(--paper-rgb) / .72) 32%, rgb(var(--paper-rgb) / .74) 64%, rgb(var(--paper-rgb) / .95) 100%);
  opacity: .86;
}
/* 写真が未設定のときは何も敷かない（地の白のまま）。
   ここには一時期「坪単価順と収益順を結ぶ図」を置いていたが、本文と重なるうえ
   ヒーローの主役としては別案を検討することになったため撤去した（2026-08-09）。
   写真が入れば .hero__media 側の通常経路（写真＋スクリム）が効く。 */
.hero__media--empty { background: var(--paper-hero); }
.hero__media--empty::after { display: none; }
/* ヒーロー背景の動画。ポスター＋遅延読み込み（main.js の data-lazy）で
   LCP に影響させない。 */
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* 写真用のスクリムでは暗い映像に負けて本文が沈む。動画は気配だけ見せる
   （左テキストの可読性が最優先＝2026-08 デザイン法）。 */
.hero__media--video::after {
  background:
    linear-gradient(180deg, rgb(var(--paper-rgb) / .95) 0%, rgb(var(--paper-rgb) / .86) 34%, rgb(var(--paper-rgb) / .87) 64%, rgb(var(--paper-rgb) / .97) 100%);
  opacity: 1;
}


.hero .wrap {
  position: relative; z-index: 2;
  padding-block: clamp(130px, 17vh, 190px) clamp(80px, 11vh, 120px);
  display: flex; flex-direction: column; gap: clamp(22px, 3.2vh, 40px);
}
.hero .eyebrow { margin-bottom: 0; font-size: 10.5px; letter-spacing: .18em; margin-right: -.18em; }
.hero .eyebrow::before { width: clamp(28px, 4vw, 60px); background: rgb(var(--gold2-rgb) / .7); }
.hero__title {
  max-width: 16em;
  font-size: clamp(32px, 5.6vw, 88px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: .04em;
  color: var(--ink-head);
}
.hero__lead {
  max-width: 46em;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 2.15; letter-spacing: .09em;
  color: var(--ink-soft);
}
/* 導線を先、証跡バーを後ろに置く（描画順は render.php 側が marks → btns）。 */
.hero .btns { order: 1; margin-top: clamp(4px, 1.2vh, 14px); }
.hero__marks {
  order: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
  margin-top: clamp(18px, 4vh, 44px);
  border: 1px solid var(--hair);
}
.hero__marks li {
  padding: 18px 20px;
  background: rgb(var(--paper-rgb) / .72);
  font-size: 13px; line-height: 1.9; letter-spacing: .1em;
  color: rgb(var(--ink-rgb) / .8);
}
.hero__marks li + li { border-left: 1px solid var(--hair); }
.hero__scroll {
  position: absolute; left: var(--pad-x); bottom: clamp(22px, 4vh, 40px); z-index: 3;
  display: flex; align-items: flex-end; gap: 14px;
}
.hero__scroll::before { content: ""; display: block; width: 1px; height: 56px; background: var(--g-gold); }
.hero__scroll::after {
  content: "SCROLL";
  font-family: var(--label); font-weight: 300; font-size: 10px; letter-spacing: .16em;
  color: var(--ink-faint); padding-bottom: 2px;
}
@keyframes gKen {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1.5%, 0); }
}

/* =========================================================================
   vhero — フルスクリーン動画ヒーロー。中央にブランド、下端にスクロール指標。
   直後に従来のヒーロー（ホテル売買に、確かな基準を。）が続く構成。
   ========================================================================= */
.vhero {
  position: relative; overflow: hidden;
  height: 100svh; min-height: 540px;
  background: var(--deep);
}
.vhero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 動画は素で見せる。白文字の可読性に必要な最小限の暗がりだけ足す。 */
.vhero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .32) 0%, rgb(0 0 0 / .12) 42%, rgb(0 0 0 / .40) 100%);
}
.vhero__brand {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 2.4vh, 24px); text-align: center; color: #FFFFFF;
}
.vhero__mark {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(46px, 7vw, 100px);
  letter-spacing: .4em; margin-right: -.4em; line-height: 1.1;
  text-shadow: 0 2px 34px rgb(0 0 0 / .4);
}
.vhero__rule { width: 76px; height: 1px; background: var(--gold-deep); }
.vhero__sub {
  font-family: var(--label); font-weight: 300;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase;
  color: rgb(255 255 255 / .88);
}
.vhero .hero__scroll::before { background: var(--gold-deep); }
.vhero .hero__scroll::after { color: rgb(255 255 255 / .75); }
/* 最上部（透明ヘッダー）が動画に重なる間は、ヘッダーの文字を白にする */
body.has-vhero .site-header[data-mode="clear"] .brand__mark,
body.has-vhero .site-header[data-mode="clear"] .brand__sub,
body.has-vhero .site-header[data-mode="clear"] .nav a,
body.has-vhero .site-header[data-mode="clear"] .langsw__btn { color: #FFFFFF; }

/* 下層ページのヒーロー */
.phero {
  position: relative; overflow: hidden;
  background: var(--paper-hero); color: var(--ink);
  padding-block: clamp(150px, 20vh, 220px) clamp(56px, 8vh, 96px);
}
.phero__media { position: absolute; inset: -5%; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--paper-rgb) / .92) 0%, rgb(var(--paper-rgb) / .82) 45%, rgb(var(--paper-rgb) / .96) 100%);
}
.phero__media--empty { background: radial-gradient(120% 100% at 60% 25%, var(--ph-a) 0%, var(--ph-b) 55%, var(--ph-b) 100%); }
.phero .wrap { position: relative; z-index: 2; }
.phero__title {
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 1.5; letter-spacing: .05em;
  color: var(--ink-head); margin-bottom: clamp(18px, 2vw, 26px);
}
.phero__lead {
  max-width: 44em; font-size: clamp(14px, 1.05vw, 15px);
  line-height: 2.15; letter-spacing: .09em; color: var(--ink-soft);
}
.crumb {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: clamp(20px, 2.4vw, 30px);
}
.crumb a { transition: color .5s ease; }
.crumb a:hover { color: var(--g-gold-2); }
.crumb i { font-style: normal; margin-inline: .9em; }

/* =========================================================================
   statement — 中央寄せの主張ブロック（反転帯で使う）
   ========================================================================= */
.statement { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(26px, 3.4vw, 46px); max-width: 920px; }
.statement__title {
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.5; letter-spacing: .08em;
  color: var(--deep-ink);
}
.sec:not(.sec--deep) .statement__title { color: var(--ink-head); }
.statement__paras { display: grid; gap: 26px; max-width: 820px; text-align: left; }
.statement__paras p {
  font-size: clamp(14.5px, 1.05vw, 15px);
  line-height: 2.25; letter-spacing: .09em;
  color: var(--deep-soft);
}
.sec:not(.sec--deep) .statement__paras p { color: var(--ink-soft); }
.statement__kicker {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.4vw, 36px); line-height: 1.5; letter-spacing: .03em;
  color: var(--gold-deep);
}
.sec:not(.sec--deep) .statement__kicker { color: var(--g-gold-2); }

/* =========================================================================
   positioning / pillars — 罫線で仕切った 3 カラム
   ========================================================================= */
.cols3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.cols3 > * {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(30px, 3vw, 46px) clamp(22px, 2.4vw, 38px);
}
.cols3 > * + * { border-left: 1px solid var(--hair); }
.sec--deep .cols3, .sec--deep .cols3 > * + * { border-color: var(--hair-deep); }
.colitem__title {
  font-weight: 400; font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.8; letter-spacing: .1em; color: var(--ink-head);
}
.sec--deep .colitem__title { color: var(--deep-ink); }
.colitem__body { font-size: 14px; line-height: 2.05; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .72); }
.sec--deep .colitem__body { color: var(--deep-soft); }

/* =========================================================================
   services — 罫線の行。ホバーでゴールドの下線が伸びる
   ========================================================================= */
.sindex { border-top: 1px solid var(--hair); }
.sitem {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 10px clamp(14px, 2vw, 32px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.sitem::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--g-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.sitem:hover::after { transform: scaleX(1); }
.sitem__en {
  font-family: var(--label); font-weight: 300;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 2; margin-bottom: 10px;
}
.sitem__ja {
  font-size: clamp(17px, 1.7vw, 25px); line-height: 1.7; letter-spacing: .12em;
  color: var(--ink-head);
}
.sitem__body { font-size: 14px; line-height: 2.1; letter-spacing: .09em; color: rgb(var(--ink-rgb) / .72); }

/* =========================================================================
   audience（For You）— 写真上・本文下・黒CTA帯のカード（2026-08-12 改訂）
   claude.ai/design「GOLDER landing page component」準拠。
   ========================================================================= */
/* render.php では .wrap の外に置かれるので、ここで同じ幅に揃える。 */
.audience {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x);
}
.aud {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair-deep);
  background: var(--paper);
  color: var(--ink-head);
  overflow: hidden;
  transition: border-color .5s var(--ease);
}
.aud:hover { border-color: rgb(var(--gold-rgb) / .6); }

.aud__media { height: clamp(160px, 14vw, 200px); overflow: hidden; flex: none; }
.aud__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 2s var(--ease);
}
.aud:hover .aud__media img { transform: scale(1.06); }
/* 写真が入るまでの空スロット。旧デザインの淡いグラデーションを流用する。 */
.aud__media--empty {
  height: clamp(160px, 14vw, 200px); flex: none;
  background: radial-gradient(110% 90% at 40% 25%, var(--ph-a) 0%, var(--ph-b) 70%);
}
.aud:nth-child(2) .aud__media--empty { background: radial-gradient(110% 90% at 55% 30%, var(--ph-a) 0%, var(--ph-b) 70%); }

.aud__inner {
  display: flex; flex-direction: column; gap: 12px; flex: 1;
  padding: clamp(24px, 2.4vw, 30px) clamp(22px, 2.2vw, 26px) clamp(26px, 2.6vw, 30px);
}
.aud__label {
  font-family: var(--label); font-weight: 400;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2;
}
.aud__title { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; letter-spacing: .08em; color: var(--ink-head); }
.aud__body { font-size: 13px; line-height: 2.1; letter-spacing: .06em; color: rgb(var(--ink-rgb) / .74); flex: 1; }
/* CTA はカード内リンクの視覚表現（実体は span、カード全体が a）。 */
.aud__more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--paper);
  padding: 14px 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.6;
  transition: background .45s var(--ease);
}
.aud__more i { font-style: normal; font-family: var(--serif); }
.aud:hover .aud__more { background: var(--g-gold-2); }

/* =========================================================================
   coverage — ラベル ＋ 罫線のチップ
   ========================================================================= */
/* ラベル列は固定幅。auto-fit にすると空のラベル列が 1fr まで広がり、
   左半分が空いてチップが右へ寄ってしまう。 */
.covgroup {
  display: grid;
  grid-template-columns: minmax(0, clamp(150px, 16vw, 240px)) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 40px);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--hair);
}
.covgroup:last-child { border-bottom: 1px solid var(--hair); }
.covgroup__label {
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2.1; padding-top: 6px;
}
.tags { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.tags li {
  padding: 10px 18px; border: 1px solid rgb(var(--ink-rgb) / .16);
  font-size: 13.5px; line-height: 1.9; letter-spacing: .08em;
  color: rgb(var(--ink-rgb) / .8);
}
.sec--deep .covgroup { border-color: var(--hair-deep); }
.sec--deep .covgroup__label { color: var(--gold-deep); }
.sec--deep .tags li { color: var(--deep-soft); border-color: var(--hair-deep); }

/* =========================================================================
   steps — 白カードの3列グリッド、黒丸の連番（2026-08-12 改訂）
   claude.ai/design「GOLDER landing page component」準拠。
   ========================================================================= */
.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 20px);
  counter-reset: st;
}
.step {
  counter-increment: st;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper);
  border: 1px solid var(--hair-deep);
  padding: clamp(26px, 2.6vw, 30px) clamp(22px, 2.4vw, 26px) clamp(24px, 2.6vw, 28px);
}
.step__head { display: flex; align-items: center; gap: 12px; }
/* 連番はここだけ。実際に順序のある工程なので、番号が情報を持つ。 */
.step__no {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--num); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; line-height: 1;
}
.step__no::before { content: counter(st); }
.step__tag {
  display: inline-block; padding: 3px 10px;
  border: 1px solid rgb(var(--gold2-rgb) / .55);
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--g-gold-2); line-height: 1.9;
}
.step__title { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; letter-spacing: .08em; color: var(--ink-head); }
.step__body { font-size: 13px; line-height: 2.05; letter-spacing: .05em; color: rgb(var(--ink-rgb) / .72); }

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   splits — 長文のサービス詳細
   ========================================================================= */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 90px); align-items: start;
  padding-block: clamp(38px, 4.6vw, 74px);
  border-top: 1px solid var(--hair);
}
.split:last-child { border-bottom: 1px solid var(--hair); }
.split__meta {
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2; margin-bottom: 18px;
}
.split__title { font-size: clamp(19px, 2.1vw, 28px); line-height: 1.75; letter-spacing: .1em; color: var(--ink-head); }
.split__body { font-size: 14.5px; line-height: 2.15; letter-spacing: .08em; color: var(--ink-soft); }
.split__body + .split__body { margin-top: 1.5em; }
.deflist { margin-top: 32px; border-top: 1px solid var(--hair); }
.deflist li { padding-block: 18px; border-bottom: 1px solid var(--hair); }
.deflist strong {
  display: block; font-weight: 400; font-size: 14.5px; letter-spacing: .1em;
  color: var(--ink-head); margin-bottom: 8px;
}
.deflist span { display: block; font-size: 14px; line-height: 2.0; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .72); }

/* =========================================================================
   checklist
   ========================================================================= */
.checklist {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 clamp(28px, 4vw, 72px);
  border-top: 1px solid var(--hair);
}
.checklist li {
  display: grid; grid-template-columns: 26px 1fr; gap: 0 6px;
  padding-block: 18px; border-bottom: 1px solid var(--hair);
  font-size: 14.5px; line-height: 2.0; letter-spacing: .08em; color: var(--ink-soft);
}
.checklist li::before {
  content: ""; width: 9px; height: 9px;
  border: 1px solid var(--g-gold); transform: rotate(45deg); translate: 0 1em;
}
.checklist li > span { display: none; }

/* =========================================================================
   projshow — 開発プロジェクトのメディアカード（大きなタイポを写真・動画に重ねる）
   ========================================================================= */
.projshow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: clamp(28px, 3.2vw, 44px) clamp(18px, 2.2vw, 28px);
}
.pshow { display: block; color: var(--ink-head); }
.pshow__media {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1.04;           /* 高さを固定してレイアウトシフトを出さない */
  background: var(--ph-a);
}
.pshow__media > img, .pshow__media > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 2s var(--ease);
}
.pshow:hover .pshow__media > img, .pshow:hover .pshow__media > video { transform: scale(1.04); }
.pshow__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .04) 42%, rgb(0 0 0 / .24) 100%);
}
.pshow__name {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding-inline: 6%;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 54px); letter-spacing: .14em;
  color: #FFFFFF; text-shadow: 0 1px 26px rgb(0 0 0 / .38);
}
.pshow__badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  background: #FFFFFF; color: var(--ink-head);
  font-family: var(--label); font-size: 10px; letter-spacing: .16em;
  padding: 5px 11px;
}
.pshow__loc {
  margin-top: 18px;
  font-family: var(--label); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pshow__body { margin-top: 8px; font-size: 14px; line-height: 1.95; letter-spacing: .06em; color: var(--ink-soft); }
.pshow__status { margin-top: 8px; font-size: 12.5px; letter-spacing: .1em; color: var(--g-gold-2); }

/* スマホ＝横スワイプのカルーセル（次のカードが右端に覗く、マガジンの誌面感）。
   NOT A HOTEL のラインナップと同じ操作感。カードが1枚でも成立する。 */
@media (max-width: 760px) {
  .projshow {
    display: flex;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    gap: 14px;
    scrollbar-width: none;
  }
  .projshow::-webkit-scrollbar { display: none; }
  .projshow .pshow { flex: 0 0 84%; scroll-snap-align: start; }
  .pshow__name { font-size: clamp(26px, 8vw, 40px); }
}

/* =========================================================================
   figures — 概念図・図版。白地にヘアライン枠、キャプションは図の下
   ========================================================================= */
/* グリッドアイテムの min-width:auto が中身の最小幅を外へ押し広げ、
   スマホでページ全体が横スクロールになる事故を防ぐ（2026-08-18 実発生）。 */
.figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
.diagram { margin: 0; min-width: 0; }
.diagram__frame {
  border: 1px solid var(--hair); background: #FFFFFF;
  padding: clamp(12px, 2vw, 32px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.diagram__frame img { display: block; width: 100%; height: auto; }
/* 最小幅はSVGの図面だけ。小さくすると寸法や注記が読めなくなるため、
   狭い画面ではフレーム内の横スクロールで読ませる。写真には適用しない。 */
.diagram__frame img[src$=".svg"],
.diagram__frame img[src*=".svg?"] { min-width: 560px; }
.diagram__cap {
  margin-top: 16px; font-size: 12.5px; line-height: 2.0;
  letter-spacing: .09em; color: var(--ink-mute);
}
.diagram__cap::before { content: "\2014\00a0"; color: var(--g-gold); }

/* =========================================================================
   cards — 罫線 1 本だけの素の見出しブロック
   ========================================================================= */
.cards { display: grid; gap: clamp(24px, 3.2vw, 56px); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* 2列は「2列」の意味で使う。auto-fit だと広い画面で3列になり、
   4項目のときに 3+1 の不揃いな並びになる（2026-08-29 に実際そうなった）。 */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .cards--2 { grid-template-columns: minmax(0, 1fr); } }
.card { padding-top: 26px; border-top: 1px solid var(--hair); }
.card__title { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.8; letter-spacing: .1em; color: var(--ink-head); margin-bottom: 16px; }
.card__body { font-size: 14px; line-height: 2.05; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .72); }

/* =========================================================================
   FAQ — 開閉は max-height + opacity + padding（.9s）
   ========================================================================= */
.faq { border-top: 1px solid rgb(var(--ink-rgb) / .14); }
.faq__item { border-bottom: 1px solid rgb(var(--ink-rgb) / .14); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  width: 100%; padding: clamp(22px, 2.4vw, 30px) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(15px, 1.35vw, 18px); line-height: 1.8; letter-spacing: .1em;
  color: var(--ink-head);
  transition: color .5s ease;
}
.faq__q:hover { color: var(--g-gold-2); }
.faq__q .icn { position: relative; flex: none; width: 18px; height: 18px; margin-top: .45em; transition: transform .6s var(--ease); }
.faq__q .icn::before, .faq__q .icn::after {
  content: ""; position: absolute; left: 1px; top: 8.5px;
  width: 16px; height: 1px; background: var(--g-gold-2);
}
.faq__q .icn::after { transform: rotate(90deg); }
.faq__item[data-open="true"] .icn { transform: rotate(45deg); }
.faq__a {
  max-height: 0; overflow: hidden; opacity: 0;
  padding-bottom: 0;
  max-width: 60em;
  font-size: 14.5px; line-height: 2.15; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .76);
  transition: max-height .9s var(--ease), opacity .9s ease, padding .9s var(--ease);
}
.faq__item[data-open="true"] .faq__a { max-height: 900px; opacity: 1; padding-bottom: clamp(24px, 2.6vw, 34px); }
/* JS が無い環境では常に開いた状態にする。 */
html:not(.js) .faq__a { max-height: none; opacity: 1; padding-bottom: clamp(24px, 2.6vw, 34px); }

/* =========================================================================
   info table（会社概要など）
   ========================================================================= */
.itable { border-top: 0; }
.itable__row {
  display: grid; grid-template-columns: clamp(88px, 10vw, 140px) 1fr;
  gap: clamp(14px, 2vw, 32px);
  padding-block: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--hair);
}
.itable__row:last-child { border-bottom: 1px solid var(--hair); }
.itable__k {
  font-family: var(--label); font-weight: 300;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 2; padding-top: 6px;
}
.itable__k[lang="ja"] { font-family: var(--sans); text-transform: none; letter-spacing: .14em; font-size: 13.5px; padding-top: 0; }
.itable__v { font-size: 14.5px; line-height: 2.05; letter-spacing: .1em; color: rgb(var(--ink-rgb) / .82); }

/* =========================================================================
   insights
   ========================================================================= */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3.2vw, 52px); }
.post { display: block; }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ph-a); margin-bottom: 24px; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.post:hover .post__media img { transform: scale(1.06); }
.post__date {
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); line-height: 2; margin-bottom: 12px;
}
.post__title { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.8; letter-spacing: .1em; color: var(--ink-head); transition: color .5s ease; }
.post:hover .post__title { color: var(--g-gold-2); }
.post__excerpt { margin-top: 14px; font-size: 14px; line-height: 2.0; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .72); }

/* 記事が無いときの「準備中」。 */
.empty-note {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(56px, 9vw, 110px) clamp(22px, 4vw, 60px);
  border: 1px solid var(--hair); text-align: center;
  font-size: clamp(18px, 2vw, 28px); letter-spacing: .14em; color: var(--ink-head);
}
.empty-note::before {
  content: "COMING SOON";
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .16em; color: var(--g-gold-2);
}

/* =========================================================================
   CTA 帯
   ========================================================================= */
.ctaband { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(22px, 3vw, 40px); max-width: 1100px; }
.ctaband__title {
  max-width: 18em;
  font-size: clamp(26px, 4.4vw, 64px); line-height: 1.55; letter-spacing: .07em;
  color: var(--ink-head);
}
.sec--deep .ctaband__title { color: var(--deep-ink); }
.ctaband__body {
  max-width: 44em;
  font-size: clamp(14.5px, 1.1vw, 15px); line-height: 2.2; letter-spacing: .1em;
  color: rgb(var(--ink-rgb) / .76);
}
.sec--deep .ctaband__body { color: var(--deep-soft); }
.ctaband .btns { margin-top: 0; }
.ctaband__tel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 860px;
  margin-top: clamp(6px, 2vh, 18px); padding-top: clamp(22px, 2.8vw, 38px);
  border-top: 1px solid rgb(var(--ink-rgb) / .14);
}
.ctaband__tel small {
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.ctaband__tel b {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(24px, 2.8vw, 34px); letter-spacing: .06em; color: var(--g-gold-2);
}
.sec--deep .ctaband__tel { border-top-color: var(--hair-deep); }
.sec--deep .ctaband__tel b { color: var(--gold-deep); }

/* =========================================================================
   フォーム
   ========================================================================= */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .78fr); gap: clamp(36px, 5vw, 92px); align-items: start; }
.form-intro { max-width: 44em; font-size: 14.5px; line-height: 2.15; letter-spacing: .09em; color: var(--ink-soft); margin-bottom: clamp(30px, 4vw, 46px); }
.form-grid { display: grid; gap: 36px; }
.field { display: grid; gap: 10px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; }
.field label {
  display: flex; align-items: center; gap: 1em;
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 2;
}
.field label[data-ja="1"] { font-family: var(--sans); text-transform: none; letter-spacing: .14em; font-size: 13.5px; color: var(--ink-head); }
.req, .opt {
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 2;
}
.req { color: var(--g-gold-2); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.opt { color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; font-weight: 300;
  line-height: 2; letter-spacing: .08em; color: var(--ink);
  padding: 12px 2px; background: transparent;
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
  transition: border-color .6s var(--ease);
}
/* 矢印はベタ塗りの三角ではなく、言語切替と同じ細いシェブロンで揃える。 */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238C6F31' stroke-width='1.2'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
  background-position: right 2px center;
  background-size: 11px 11px; background-repeat: no-repeat;
}
.field textarea { min-height: 190px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--g-gold); }
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--ink-rgb) / .3); }
.field__note { font-size: 13px; line-height: 2.1; letter-spacing: .08em; color: var(--ink-faint); }
.form-privacy { padding-top: 28px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 2.05; letter-spacing: .08em; color: var(--ink-faint); }
.hpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formmsg {
  padding: 22px 26px; margin-bottom: 40px; border-left: 1px solid;
  font-size: 14.5px; line-height: 2.0; letter-spacing: .08em;
}
.formmsg--ok { border-color: var(--g-gold); background: var(--paper-2); color: var(--ink-head); }
.formmsg--ng { border-color: var(--bad); background: var(--bad-bg); color: var(--bad-ink); }

.contact-side { display: grid; align-content: start; }
.contact-card { padding-block: 28px; border-top: 1px solid var(--hair); }
.contact-card:last-child { border-bottom: 1px solid var(--hair); }
.contact-card h3 {
  font-family: var(--label); font-weight: 300;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2; margin-bottom: 14px;
}
.contact-card .big {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: 27px; letter-spacing: .06em; color: var(--g-gold-2); line-height: 1.6; margin-bottom: 8px;
}
.contact-card p { font-size: 14px; line-height: 2.0; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .74); }

/* =========================================================================
   note（注記）
   ========================================================================= */
.note {
  max-width: 78ch; padding-left: 24px; border-left: 1px solid var(--g-gold);
  font-size: 13px; line-height: 2.05; letter-spacing: .08em; color: var(--ink-mute);
}
.sec--deep .note { color: var(--deep-soft); border-left-color: var(--gold-deep); }

/* =========================================================================
   legal（業法上の立場の明記）— 目立たせるが煽らない。罫線で囲む。
   ========================================================================= */
.legal {
  border-top: 1px solid var(--g-gold);
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(30px, 3.4vw, 52px);
}
.legal__label {
  font-family: var(--label); font-weight: 300;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2; margin-bottom: 22px;
}
.legal__title {
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.85; letter-spacing: .1em;
  color: var(--ink-head); margin-bottom: 26px; max-width: 30em;
}
.legal__items { display: grid; gap: 0; }
.legal__items li {
  display: grid; grid-template-columns: minmax(0, clamp(150px, 15vw, 230px)) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 40px);
  padding-block: 20px; border-top: 1px solid var(--hair-soft);
}
.legal__items li:first-child { border-top: 0; }
.legal__k {
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2.1;
}
.legal__k[data-cjk="1"] { text-transform: none; letter-spacing: .14em; font-size: 13.5px; font-family: var(--sans); }
.legal__v { font-size: 14.5px; line-height: 2.08; letter-spacing: .07em; color: var(--ink-soft); }
/* 免許番号・条番号などはオールドスタイル数字だと誤読を招くので等高数字に固定する。 */
.legal__k, .legal__v, .legal__foot, .footer-note, .itable__v, .note, .form-privacy, .field__note {
  font-variant-numeric: lining-nums;
  font-feature-settings: "palt" 1, "lnum" 1;
}
.legal__foot {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hair-soft);
  font-size: 13px; line-height: 2.05; letter-spacing: .08em; color: var(--ink-mute);
}
@media (max-width: 760px) {
  .legal__items li { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================================
   全幅の写真帯
   ========================================================================= */
.figure { position: relative; overflow: hidden; height: clamp(300px, 42vw, 620px); background: var(--ph-a); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--empty { background: radial-gradient(120% 100% at 50% 30%, var(--ph-a) 0%, var(--ph-b) 70%); }

/* =========================================================================
   フッター
   ========================================================================= */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--paper-3);
  border-top: 1px solid var(--hair-soft);
  padding-block: clamp(46px, 7vh, 84px) 0;
}
/* 地に敷く大きなワードマーク（装飾。読み上げ対象にしない）。 */
.site-footer::before {
  content: "GOLDER" / "";
  position: absolute; left: var(--pad-x); bottom: 4%;
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(54px, 15.5vw, 250px); line-height: .9;
  letter-spacing: .1em; margin-right: -.1em;
  /* 本文の可読性を優先し、地紋として認識される濃度に留める。 */
  color: rgb(var(--ink-rgb) / .05);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.site-footer > .wrap { position: relative; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(30px, 4.5vw, 72px);
  padding-bottom: clamp(36px, 5vh, 60px);
}
.footer-brand .brand__mark { font-size: 23px; color: var(--ink); }
.footer-brand .brand__sub { margin-top: 8px; }
.footer-brand p { max-width: 40ch; margin-top: 24px; font-size: 13.5px; line-height: 2.08; letter-spacing: .08em; color: rgb(var(--ink-rgb) / .7); }
.footer-col__label {
  font-family: var(--label); font-weight: 300;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-gold-2); line-height: 2; margin-bottom: 22px;
}
/* 公式アカウント。フッターのリンク列と同じ見え方に揃える。 */
.footer-social { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.footer-social a {
  font-family: var(--label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .7); transition: color .5s ease;
}
.footer-social a:hover { color: var(--g-gold-2); }

.footer-col li + li { margin-top: 13px; }
.footer-col a { font-size: 12.5px; letter-spacing: .14em; color: rgb(var(--ink-rgb) / .7); transition: color .5s ease; }
.footer-col a:hover { color: var(--g-gold-2); }
/* 業法上の立場の注記（全ページのフッターに常時表示） */
.footer-note {
  max-width: 96ch; padding-top: clamp(24px, 3.4vh, 40px);
  border-top: 1px solid var(--hair-soft);
  font-size: 12px; line-height: 2.05; letter-spacing: .08em; color: var(--ink-faint);
}
.footer-note + .footer-bottom { border-top: 0; padding-top: clamp(20px, 3vh, 34px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px clamp(16px, 2.2vw, 34px); justify-content: space-between;
  padding-block: clamp(26px, 4vh, 46px);
  border-top: 1px solid var(--hair-soft);
  font-family: var(--label); font-weight: 300;
  font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); line-height: 2.0;
}

/* =========================================================================
   記事本文（WordPress 投稿）
   ========================================================================= */
.article { font-size: 15.5px; line-height: 2.2; letter-spacing: .08em; color: var(--ink-soft); }
.article > * + * { margin-top: 1.6em; }
.article h2 {
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.8; letter-spacing: .1em; color: var(--ink-head);
  margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--hair);
}
.article h3 { font-size: clamp(17px, 1.8vw, 22px); line-height: 1.8; letter-spacing: .1em; color: var(--ink-head); margin-top: 2em; }
.article a { color: var(--g-gold-2); border-bottom: 1px solid rgb(var(--gold2-rgb) / .4); }
.article a:hover { border-bottom-color: var(--g-gold-2); }
.article strong { font-weight: 400; color: var(--ink-head); }
.article ul, .article ol { padding-left: 1.4em; }
.article ul { list-style: none; }
.article ul li { position: relative; padding-left: 4px; }
.article ul li::before { content: ""; position: absolute; left: -1.2em; top: 1.2em; width: 7px; height: 1px; background: var(--g-gold); }
.article ol { list-style: decimal; }
.article li + li { margin-top: .6em; }
.article blockquote { padding-left: 24px; border-left: 1px solid var(--g-gold); color: var(--ink-mute); }
.article img, .article figure { margin-block: 2.4em; }
.article figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }
/* 都市間比較は9列あり、幅を詰めると和文が一文字ずつ折り返して読めなくなる。
   潰さずに、表だけを横スクロールさせる。display:block と max-width を明示する
   こと。figure が table 化していると overflow が無視され、表の min-width が
   ページ全体を横に広げる（実機幅 390px でヘッダーが画面外に出た）。 */
.article figure.wp-block-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.article table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.article th, .article td { padding: 14px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
/* 見出し列に最低幅を与える。与えないと、列数の多い表（都市間比較は9列）で
   1列目が潰れ、「ホテル期待利回り（2026年4月）」が7行に割れて読めなくなる。 */
.article table :is(th, td):first-child { min-width: 6.5em; }
.article th {
  font-family: var(--label); font-weight: 300;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--g-gold-2);
}

/* ページ送り */
.pagination { display: flex; flex-wrap: wrap; gap: 10px; }
.pagination .page-numbers {
  min-width: 46px; padding: 13px 15px; text-align: center;
  font-family: var(--label); font-size: 12.5px; letter-spacing: .12em; color: var(--ink-soft);
  border: 1px solid var(--hair); transition: border-color .5s ease, color .5s ease;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current { border-color: var(--g-gold); color: var(--g-gold-2); }
.pagination .screen-reader-text { position: absolute; left: -9999px; }

/* =========================================================================
   リビール
   ========================================================================= */
/* JS が動く環境でのみ隠す。素の HTML では常に見えること。 */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.3s ease, transform 1.3s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .loader { display: none; }
  .hero__media img { animation: none; }
  .aud__media, .post__media img, .site-header { transition: none; }
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
/* ナビが7項目になり、切り替え直前（1261px）で言語切替と詰まるようになった。
   その手前の帯域だけ字送りと間隔を締めて余裕を作る。項目を減らさずに済む。 */
@media (max-width: 1400px) {
  .nav { gap: 16px; }
  .nav a { font-size: 13px; letter-spacing: .1em; }
}

@media (max-width: 1260px) {
  .nav { display: none; }
  .navtoggle { display: flex; }
  /* backdrop-filter を持つ要素は子孫の position:fixed の基準（containing block）に
     なる。メニューを開いている間だけ外さないと、パネルがヘッダーの箱に閉じ込められる。 */
  body.nav-open .site-header {
    background-color: rgb(var(--paper-rgb) / .97);
    border-bottom-color: var(--hair);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.nav-open .nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: 96px 0 0; z-index: 70;
    /* 背後の見出しが透けると読みにくいので、パネルは不透明にする。 */
    background: var(--paper);
    padding: clamp(24px, 5vh, 50px) var(--pad-x) 120px;
    overflow-y: auto;
  }
  body.nav-open .nav a {
    width: 100%; padding: 22px 0;
    font-size: 15px; letter-spacing: .16em; color: var(--ink);
    border-bottom: 1px solid var(--hair);
  }
}
@media (max-width: 900px) {
  .split, .contact-layout, .footer-top { grid-template-columns: 1fr; }
  .split { gap: 24px; }
  .covgroup { grid-template-columns: 1fr; gap: 14px; }
  .covgroup__label { padding-top: 0; }
  .sitem { grid-template-columns: 1fr; gap: 8px; }
  .sitem__body { grid-column: 1; }
  .hero__marks li + li { border-left: 0; border-top: 1px solid var(--hair); }
}
@media (max-width: 620px) {
  /* ヘッダーが窮屈なので普段は隠すが、メニューを開いたら必ず出す。
     これを消すとスマートフォンから問い合わせへ辿り着く導線が無くなる。 */
  .header-cta { display: none; }
  body.nav-open .header-cta {
    display: block; position: fixed; z-index: 71;
    left: var(--pad-x); right: var(--pad-x); bottom: clamp(28px, 5vh, 48px);
  }
  body.nav-open .header-cta .lnk { justify-content: center; width: 100%; padding: 18px 24px; }
  .itable__row { grid-template-columns: 1fr; gap: 6px; }
  .itable__k { padding-top: 0; }
  .sitem { grid-template-columns: 1fr; gap: 8px; }
  .sitem__body { grid-column: 1; }
  .hero__marks { grid-template-columns: 1fr; }
  /* 縦積みになる導線は幅を揃える。長さの違いがそのまま段差に見えるため。 */
  .hero .btns, .ctaband .btns { display: grid; gap: 12px; width: 100%; }
  .hero .btns .lnk, .ctaband .btns .lnk { justify-content: center; padding-inline: 20px; }
  /* iOS Safari は 16px 未満の入力欄でフォーカス時に自動ズームする。 */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* =========================================================================
   印刷 / PDF 書き出し
   ・A4横。用紙余白は 0 にし、セクション自身の余白で持たせる
   ・背景と罫線は必ず出す（print-color-adjust）。これが無いと
     反転帯（The Gold Standard・CTA）が白抜けして意味が変わる
   ・ナビゲーションはPDFでは不要なので落とす。1120pxの分岐に
     かかって崩れる事故も同時に防げる
   ========================================================================= */
@media print {
  @page { size: A4 landscape; margin: 0; }

  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: var(--paper);
  }

  /* 画面用の演出は落とす */
  .loader,
  .hero__scroll,
  .nav,
  .navtoggle,
  .langsw,
  .header-cta,
  .crumb { display: none !important; }

  /* 追従ヘッダーは印刷で全ページに重なるので静的にする */
  .site-header {
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
  }
  .site-header .brand__mark,
  .site-header .brand__sub { color: var(--ink-head) !important; }

  /* 出現アニメーションは無効化（JSが走らない環境でも本文を出す） */
  .rv, .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* 画面高に依存する高さを紙の高さに合わせる */
  .hero { min-height: auto !important; padding-block: 64px 56px !important; }
  .hero .wrap { transform: none !important; opacity: 1 !important; }

  .phero { padding-block: 64px 56px !important; }
  .sec { padding-block: 38px !important; }

  /* 途中で切りたくない塊。
     ヒーローや反転帯のような「1ページ分の高さがある塊」まで avoid にすると、
     入りきらない場合に丸ごと次ページへ送られ、前のページが大きく空く。
     avoid は必ず、1ページに収まる小さい単位だけに留めること。 */
  .sitem, .step, .split, .faq__item, .colitem, .aud,
  .covgroup, .itable__row, .contact-card, .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 見出しだけがページ末尾に取り残されるのを防ぐ */
  .sec-title { break-after: avoid; page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  /* 反転帯のラジアルグラデーションは印刷時に大きなラスタ画像になり、
     ファイルサイズを押し上げるだけで見た目はほぼ変わらない。 */
  .sec--deep::before { display: none !important; }

  /* FAQ は畳んでいると中身が出ないので、印刷では全て開く */
  .faq__a { display: block !important; }
  .faq__q .icn { display: none !important; }

  /* リンクは下線を消してインクを減らす */
  .lnk::after { display: none !important; }
}

/* =========================================================================
   servicegrid — 罫線で仕切ったサービス一覧
   ・番号はイタリックのセリフ体＋短い金罫
   ・右下に金の線画（assets/img/services/*.svg）とコーナーの三角
   ・7項目なので3列だと最終行に空きが出る。空セルも罫線だけ描いて
     グリッドを閉じる（欠けていると崩れて見える）
   ========================================================================= */
/* 2026-08-12 デザイン改訂：罫線の表組みから、区分帯＋アイコン付き白カードへ。
   claude.ai/design「GOLDER landing page component」準拠。
   外側は区分の件数に比例した列（--svc-cols: 2fr 2fr 3fr）、
   各区分の中は件数ぶんの等幅列（--svc-n）。カード幅が区分を跨いで揃う。 */
.svcgroups {
  display: grid;
  grid-template-columns: var(--svc-cols, repeat(3, 1fr));
  gap: clamp(20px, 2.2vw, 28px);
  align-items: start;
}
.svc__band {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-family: var(--label); font-weight: 600;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-head); line-height: 1.6;
}
.svc__band::after {
  content: ""; flex: 1; height: 1px; background: var(--hair-deep);
}
.svc__cards {
  display: grid;
  grid-template-columns: repeat(var(--svc-n, 3), minmax(0, 1fr));
  gap: 12px;
}
.svc__card {
  background: var(--paper);
  border: 1px solid var(--hair-deep);
  padding: clamp(24px, 2.4vw, 28px) clamp(14px, 1.4vw, 18px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.svc__icon { flex: none; }
.svc__en {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  line-height: 1.55; letter-spacing: .02em;
  color: var(--ink-head);
}
.svc__ja {
  font-size: 12px; line-height: 1.8; letter-spacing: .04em;
  color: rgb(var(--ink-rgb) / .7);
}
.note--center { text-align: center; max-width: none; padding-left: 0; border-left: 0; }

/* 狭い幅では区分ごとの比例配分をやめて縦に積む。 */
@media (max-width: 1100px) {
  .svcgroups { grid-template-columns: minmax(0, 1fr); }
  .svc__cards { grid-template-columns: repeat(var(--svc-n, 3), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .svc__cards { break-inside: auto; }
  .svc__card { break-inside: avoid; }
}

/* =========================================================================
   レポート一覧（/research/）
   記事カードと違い、地域・版・ページ数を面で見せる。罫線で仕切るだけで
   カード・影・角丸は使わない（サイト全体の規則）。
   ========================================================================= */
.reports { border-top: 1px solid var(--hair); }
.report {
  display: flex; align-items: baseline; gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--hair);
  transition: background-color .4s ease;
}
.report:hover { background: var(--paper-2); }
.report__main { flex: 1; min-width: 0; }
.report__region {
  font-size: 11px; letter-spacing: .16em; color: var(--g-gold-2);
  margin-bottom: 8px;
}
.report__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.5; letter-spacing: .04em;
  color: var(--ink-head); margin-bottom: 10px;
}
.report__excerpt { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.report__meta {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 11px; letter-spacing: .12em; color: var(--ink-mute);
}
@media (max-width: 720px) {
  .report { flex-direction: column; gap: 12px; }
  .report__meta { flex-direction: row; gap: 16px; align-items: baseline; }
}

/* 同意チェック。ラベル行を持たず、文面そのものがラベルになる。 */
.checkfield { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.checkfield input { margin-top: 4px; width: 15px; height: 15px; flex: none; accent-color: var(--g-gold-2); }
.checkfield span { font-size: 13px; line-height: 1.85; color: var(--ink-soft); }

/* =========================================================================
   Cookie 同意バナー（GH_GA4_ID 設定時のみ出力される）
   ========================================================================= */
/* hidden 属性より .cookiebar の display:flex が勝ってしまい「同意しても消えない」
   事故が起きた。属性側を明示的に最優先にする。 */
.cookiebar[hidden] { display: none !important; }
.cookiebar {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  max-width: 720px; margin-inline: auto;
  padding: 16px 20px;
  background: var(--paper); border: 1px solid var(--hair-deep);
  box-shadow: 0 8px 40px rgb(0 0 0 / .12);
}
.cookiebar__text { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink); flex: 1 1 320px; }
.cookiebar__text a { color: var(--gold-text); text-decoration: underline; }
.cookiebar__btns { display: flex; gap: 10px; flex: none; }
.cookiebar__accept, .cookiebar__decline {
  font-family: inherit; font-size: 12.5px; letter-spacing: .08em; cursor: pointer;
  padding: 10px 18px; border: 1px solid var(--ink-head);
}
.cookiebar__accept { background: var(--ink-head); color: #fff; }
.cookiebar__decline { background: transparent; color: var(--ink-head); }

/* =========================================================================
   レポート内グラフ（/research/ の記事本文用）
   本文は wp-cli 経由で kses を通るため SVG が使えない。div とインライン
   width/height だけで組み、伸びるアニメーションは main.js が .is-in を
   付けた時に発火させる（未対応環境でもグラフ自体は最初から見える）。
   ========================================================================= */
.gh-chart { margin: 28px 0 8px; }
.gh-chart__title { font-size: 13px; letter-spacing: .12em; color: var(--gold-text); margin: 0 0 14px; }
.gh-chart__note { font-size: 12px; color: var(--ink-soft); margin-top: 10px; line-height: 1.7; }

/* 横棒 */
/* 数値の列は固定幅で確保する。auto にすると、狭い画面で棒（1fr）が伸びきって
   数値が画面外へ押し出される（2026-08-13 に実機幅 390px で発生）。
   1fr も minmax(0,1fr) と明示し、確実に縮むようにしておく。 */
.gh-row { display: grid; grid-template-columns: minmax(96px, 9em) minmax(0, 1fr) 52px; gap: 10px; align-items: center; margin-bottom: 9px; }
.gh-lab { font-size: 12.5px; color: var(--ink); }
.gh-track { background: rgb(0 0 0 / .05); height: 14px; position: relative; overflow: hidden; }
.gh-fill { display: block; height: 100%; background: #3A3A3A; }
.gh-fill--gold { background: var(--gold, #B08A3E); background: #B08A3E; }
.gh-fill--soft { background: #9A9A9A; }
.gh-row--sub { margin-top: -6px; }
.gh-row--sub .gh-track { height: 6px; }
.gh-row--sub .gh-lab, .gh-row--sub .gh-val { font-size: 10.5px; color: var(--ink-soft); }
.gh-val { font-size: 12.5px; font-weight: 600; color: var(--ink-head); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* 縦棒（月別）
   棒の領域は grid の 1fr 行として独立させる。flex で組むと、棒の height:%
   が「数値・月ラベルを含む全体の高さ」に対して解決されて合計がはみ出し、
   flex の縮小で全部の棒が同じ高さに潰れる（2026-08-13 に実際に起きた）。 */
.gh-cols { display: flex; align-items: flex-end; gap: 6px; height: 200px; margin-top: 6px; position: relative; }
.gh-col {
  /* min-width:0 が無いと、数値の文字数（「81」と「71.6」）で列幅が変わって
     棒の太さが不揃いになる。実測で 12.5px と 22.5px に割れていた。 */
  flex: 1; min-width: 0; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center; align-items: end; gap: 6px;
}
.gh-col__bar { width: 100%; max-width: 34px; background: #3A3A3A; align-self: end; }
.gh-col__bar--gold { background: #B08A3E; }
.gh-col__v { font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gh-col__m { font-size: 10.5px; color: var(--ink); white-space: nowrap; }

/* 伸びるアニメーション：JS が .gh-chart に .is-in を付けるまで 0 に潰しておき、
   付いた瞬間にインライン値へ transition で戻す。JS 無効なら最初から実寸。 */
.js .gh-chart:not(.is-in) .gh-fill { width: 0 !important; }
.js .gh-chart:not(.is-in) .gh-col__bar { height: 0 !important; }
.gh-fill { transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
.gh-col__bar { transition: height 1.1s cubic-bezier(.22,.61,.36,1); }
.gh-chart.is-in .gh-fill { transition-delay: var(--d, 0s); }
.gh-chart.is-in .gh-col__bar { transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .js .gh-chart:not(.is-in) .gh-fill { width: auto !important; }
  .js .gh-chart:not(.is-in) .gh-col__bar { height: auto !important; }
  .gh-fill, .gh-col__bar { transition: none; }
}

/* 棒の時間差（インラインdelayはWPに削られるためnth-childで） */
.gh-chart.is-in .gh-row:nth-of-type(1) .gh-fill { transition-delay: 0.00s; }
.gh-chart.is-in .gh-row:nth-of-type(2) .gh-fill { transition-delay: 0.06s; }
.gh-chart.is-in .gh-row:nth-of-type(3) .gh-fill { transition-delay: 0.12s; }
.gh-chart.is-in .gh-row:nth-of-type(4) .gh-fill { transition-delay: 0.18s; }
.gh-chart.is-in .gh-row:nth-of-type(5) .gh-fill { transition-delay: 0.24s; }
.gh-chart.is-in .gh-row:nth-of-type(6) .gh-fill { transition-delay: 0.30s; }
.gh-chart.is-in .gh-row:nth-of-type(7) .gh-fill { transition-delay: 0.36s; }
.gh-chart.is-in .gh-row:nth-of-type(8) .gh-fill { transition-delay: 0.42s; }
.gh-chart.is-in .gh-row:nth-of-type(9) .gh-fill { transition-delay: 0.48s; }
.gh-chart.is-in .gh-row:nth-of-type(10) .gh-fill { transition-delay: 0.54s; }
.gh-chart.is-in .gh-row:nth-of-type(11) .gh-fill { transition-delay: 0.60s; }
.gh-chart.is-in .gh-row:nth-of-type(12) .gh-fill { transition-delay: 0.66s; }
.gh-chart.is-in .gh-row:nth-of-type(13) .gh-fill { transition-delay: 0.72s; }
.gh-chart.is-in .gh-row:nth-of-type(14) .gh-fill { transition-delay: 0.78s; }
.gh-chart.is-in .gh-row:nth-of-type(15) .gh-fill { transition-delay: 0.84s; }
.gh-chart.is-in .gh-row:nth-of-type(16) .gh-fill { transition-delay: 0.90s; }
.gh-chart.is-in .gh-col:nth-child(1) .gh-col__bar { transition-delay: 0.00s; }
.gh-chart.is-in .gh-col:nth-child(2) .gh-col__bar { transition-delay: 0.05s; }
.gh-chart.is-in .gh-col:nth-child(3) .gh-col__bar { transition-delay: 0.10s; }
.gh-chart.is-in .gh-col:nth-child(4) .gh-col__bar { transition-delay: 0.15s; }
.gh-chart.is-in .gh-col:nth-child(5) .gh-col__bar { transition-delay: 0.20s; }
.gh-chart.is-in .gh-col:nth-child(6) .gh-col__bar { transition-delay: 0.25s; }
.gh-chart.is-in .gh-col:nth-child(7) .gh-col__bar { transition-delay: 0.30s; }
.gh-chart.is-in .gh-col:nth-child(8) .gh-col__bar { transition-delay: 0.35s; }
.gh-chart.is-in .gh-col:nth-child(9) .gh-col__bar { transition-delay: 0.40s; }
.gh-chart.is-in .gh-col:nth-child(10) .gh-col__bar { transition-delay: 0.45s; }
.gh-chart.is-in .gh-col:nth-child(11) .gh-col__bar { transition-delay: 0.50s; }
.gh-chart.is-in .gh-col:nth-child(12) .gh-col__bar { transition-delay: 0.55s; }

/* ── レポート：KPIタイル・評価マーク・リスク重要度（2026-08-13）
   概要ページの視覚要素。数値の出所は regions/*.json のみで、
   ここは見せ方だけを担う。白カード＋ヘアライン＋天辺ゴールドの線、
   角丸と影は使わない（golder_design_law）。 ── */
.gh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gh-kpi {
  background: var(--paper);
  border: 1px solid var(--hair-deep);
  border-top: 2px solid var(--g-gold);
  padding: 18px 16px 16px;
}
.gh-kpi__v, .gh-kpi__l, .gh-kpi__n { display: block; }
.gh-kpi__v {
  font-family: var(--num);
  font-size: clamp(23px, 2.3vw, 29px); font-weight: 600;
  letter-spacing: .01em; line-height: 1.2;
  color: var(--ink-head); font-variant-numeric: tabular-nums;
}
.gh-kpi__l { font-size: 12px; letter-spacing: .04em; line-height: 1.6; color: var(--ink); margin-top: 7px; }
.gh-kpi__n { font-size: 11px; line-height: 1.6; color: var(--ink-mute); margin-top: 3px; }
@media (max-width: 720px) { .gh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* タイルはグラフと同じ .is-in 契機でひとつずつ立ち上がる */
.gh-kpi { transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.js .gh-chart:not(.is-in) .gh-kpi { opacity: 0; transform: translateY(10px); }
.gh-chart.is-in .gh-kpi:nth-child(2) { transition-delay: .08s; }
.gh-chart.is-in .gh-kpi:nth-child(3) { transition-delay: .16s; }
.gh-chart.is-in .gh-kpi:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .gh-chart:not(.is-in) .gh-kpi { opacity: 1; transform: none; }
  .gh-kpi { transition: none; }
}

/* 市場評価の◎○△。色ではなく枠で階調を作る（ゴールド枠＝最上位のみ） */
.gh-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: 2px;
  border: 1px solid; font-size: 12.5px; line-height: 1;
  background: var(--paper); vertical-align: -6px;
}
.gh-mark--top  { color: var(--g-gold-2); border-color: var(--g-gold); }
.gh-mark--good { color: var(--ink); border-color: rgb(var(--ink-rgb) / .38); }
.gh-mark--warn { color: var(--ink-soft); border-color: var(--hair-deep); background: var(--paper-2); }

/* リスク重要度の帯。高＝インクのベタ（第一導線と同じ扱い）、中＝薄インク、低＝枠のみ */
.gh-sev {
  display: inline-block; min-width: 3.2em; text-align: center;
  padding: 3px 10px; font-size: 11.5px; letter-spacing: .14em;
  font-family: var(--sans); white-space: nowrap;
}
.gh-sev--high { background: var(--ink); color: var(--paper); }
.gh-sev--mid  { background: rgb(var(--ink-rgb) / .10); color: var(--ink); }
.gh-sev--low  { border: 1px solid var(--hair-deep); color: var(--ink-soft); padding: 2px 9px; }

/* 概要ダッシュボードの詳細ページ導線 */
.gh-more { font-size: 12.5px; margin: 6px 0 26px; }
.gh-more a { color: var(--g-gold-2); }

/* 記事冒頭の目次。読み手が最初にページ構成を掴むためのもの。
   白カード＋ヘアライン、番号は本文より薄く。 */
.gh-toc {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-left: 2px solid var(--g-gold);
  padding: 18px 22px 16px;
  margin: 30px 0 34px;
}
.gh-toc__title {
  font-size: 12px; letter-spacing: .18em; color: var(--gold-text, var(--g-gold-2));
  margin: 0 0 10px;
}
.gh-toc ol {
  margin: 0; padding-left: 1.4em;
  columns: 2; column-gap: 32px;
}
.gh-toc li {
  font-size: 13px; line-height: 1.9;
  break-inside: avoid;
  color: var(--ink-mute);
}
.gh-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.gh-toc a:hover { color: var(--g-gold-2); border-bottom-color: var(--g-gold); }
@media (max-width: 640px) { .gh-toc ol { columns: 1; } }
h2[id^="sec-"] { scroll-margin-top: 90px; }

/* 狭い画面：12本の縦棒と、9列の表が読めるようにする */
@media (max-width: 720px) {
  .gh-cols { gap: 3px; height: 180px; }
  .gh-col__v { font-size: 9px; }
  .gh-col__m { font-size: 10px; }
  .article th, .article td { padding: 11px 10px; font-size: 13px; }
  .gh-row { grid-template-columns: minmax(64px, 6.4em) minmax(0, 1fr) 46px; gap: 8px; }
  .gh-lab { font-size: 12px; }
}
.gh-col__v, .gh-col__m { white-space: nowrap; }