/* ═══════════════════════════════════════════════════════════════
   INTEPRAL トップページ（新設計・2026-08-25）
   ・色は 地 #F6F5F0 ／ 文字 #18233B ／ アクセント #5546A8 の3つだけ
   ・中身の幅は 1180px の1種類だけ。全面に敷くのはヒーローだけ
   ・選択した状態はコーポレートカラー（行は面が塗られ、文字リンクは文字色）
   site.css は読み込まない（.top / .wrap / h2 の指定が衝突するため）。
   ドックのCSSだけ site.css から移してある。
   ═══════════════════════════════════════════════════════════════ */

/* ── 文字サイズの基準（2026-08-31 髙橋さん指示「全体的に文字が小さい」）──
   個々の font-size を触ると数百箇所になり事故る。ルートを 110% にして
   rem 指定を一律で1.1倍にする。clamp の中の vw は変わらないため、
   小さい下限値（英字ラベルの .62rem など）が確実に持ち上がる。 */
html{font-size:110%}

:root{
  /* 🚩 --ink-3 は #8A92A6 だと紙の上で2.85しかなく、小さい字のAA(4.5)を割る。
     site.css 側で #656C7D に直したが、こちらを直し忘れていた（実測で発覚）。 */
  --paper:#F6F5F0; --ink:#18233B; --ink-2:#5A6379; --ink-3:#656C7D;
  --line:rgba(24,35,59,.16); --line-2:rgba(24,35,59,.08);
  --principle:#5546A8;   /* コーポレートカラー。選択した状態はこれ */
  --principle-d:#3E3184; /* すでに紫の要素を選択したとき用 */
  --principle-l:#6D5FC4; /* 明るい紫 */
  --peri:#B7B9DC;        /* ペリウィンクル。差し色の罫の明るい側 */
  --rowpad:clamp(12px,1.4vw,22px); /* 行の左右の余白。面が字を包むために要る */
  --deep:#0F1626;                    /* イントロの中だけで使う */
  --w:1180px;                        /* 中身の幅。全セクション共通 */
  --hh:clamp(58px,6vw,72px);         /* ヘッダーの高さ。ヒーローの高さ計算に使う */
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --min:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --grot:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* site.css を読まないので、必要なリセットはここで持つ。
   これが無いと ul に箇条書きの点が出る（工程帯で実際に出た）。 */
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
/* キーボードで辿ったときも「選択＝コーポレートカラー」を同じ見た目で出す。
   面が塗られる行は輪郭を内側に出す（面の外に出ると罫線と重なって濁る）。 */
:focus-visible{outline:2px solid var(--principle);outline-offset:2px}
.svc a:focus-visible,.news a:focus-visible{outline-color:var(--paper);outline-offset:-4px}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);line-height:1.9;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--w),92vw);margin-inline:auto}

/* ══════════════════════════════════════════════════════
   イントロ（初回のみ・全画面・1.5秒）
   紫の面が下から埋まる → INTEGRAL が現れる → G→P → 面が上へ抜ける
   🚩 既定は display:none。html.intro が付いたときだけ出る（上の判定スクリプト）
   🚩 動かすのは transform だけ。表示の有無は display で決める
      （opacityに頼ると、クロックが止まったとき「透明だが画面を覆う」板が残る）
   ══════════════════════════════════════════════════════ */
#opening{display:none}
html.intro #opening{
  display:grid;place-items:center;position:fixed;inset:0;z-index:300;
  overflow:hidden;transform:translateY(0);
  transition:transform .46s cubic-bezier(.7,0,.2,1);
}
html.intro #opening.out{transform:translateY(-100%)}
#opening[hidden]{display:none!important}

#opening .fill{
  position:absolute;inset:0;background:var(--principle);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .38s cubic-bezier(.7,0,.2,1);
}
#opening.on .fill{transform:scaleY(1)}

#opening .oclip{position:relative;z-index:2;overflow:hidden;padding:.12em 0}
#opening .oword{
  font-family:var(--grot);font-weight:700;line-height:1;color:var(--paper);
  font-size:clamp(1.5rem,7vw,4.4rem);letter-spacing:.13em;white-space:nowrap;
  transform:translateY(108%);
  transition:transform .42s cubic-bezier(.7,0,.2,1) .16s;
}
#opening.on .oword{transform:none}

#opening .osw{position:relative;display:inline-block;letter-spacing:0}
#opening .osw i{letter-spacing:0}
#opening .osw i{font-style:normal;transition:transform .3s ease, color .3s ease, background-color .3s ease}
#opening .osw .og{display:inline-block;color:var(--paper)}
#opening .osw .op{
  position:absolute;left:0;top:0;width:100%;text-align:center;
  transform:translateY(.5em);color:rgba(246,245,240,0);
}
#opening.swapped .osw .og{transform:translateY(-.5em);color:rgba(246,245,240,0)}
#opening.swapped .osw .op{transform:none;color:var(--paper)}

/* ══════════════════════════════════════════════════════
   ヒーロー v3（サントリー式）
   実測したサントリーの3要素をそのまま踏む：
     ① べた塗りの鮮やかなブランド色（サントリーは水色 rgb(91,194,220)）
     ② 面の上に浮かぶ複数のタイル（サントリーは動画 640/480/400/640px）
     ③ 26秒周期の無限ループ（終わらない＝待たせない）
   うちのタイルは「システムの画面」。INTEPRALが作るものそのもの。
   🚩 動かすのは transform だけ。止まっても位置がずれて見えるだけで済む。
   ══════════════════════════════════════════════════════ */
#hero{
  /* 🚩 100svh にするとヘッダー(73px)の下から始まる分だけ1画面を超え、
     下端に置いた帯が画面外へ落ちる（実測）。ヘッダー高を引く。 */
  min-height:calc(100svh - var(--hh));background:var(--principle);color:var(--paper);
  display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;
}

/* ── ① 浮かぶ画面タイル。中央は空けて文字を邪魔しない ── */
#hero .tile{
  position:absolute;z-index:1;pointer-events:none;
  background:rgba(24,35,59,.34);border:1px solid rgba(246,245,240,.24);
  overflow:hidden;
}
#hero .tile img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
/* 写真のタイルは彩度を落として紫の面に馴染ませる。
   そのままだと写真だけが浮いて、べた塗り1色の統一が壊れる。 */
#hero .tile.photo img{opacity:.62;filter:grayscale(1) contrast(1.06)}
#hero .tile.photo{background:rgba(24,35,59,.5)}
#hero .tA{left:2.5%;top:9%;width:min(30vw,400px);aspect-ratio:16/10;animation:dr1 26s ease-in-out infinite}
#hero .tB{right:3%;top:13%;width:min(23vw,300px);aspect-ratio:16/10;animation:dr2 31s ease-in-out infinite}
#hero .tC{left:7%;bottom:9%;width:min(20vw,260px);aspect-ratio:16/10;animation:dr3 23s ease-in-out infinite}
#hero .tD{right:1.5%;bottom:12%;width:min(31vw,420px);aspect-ratio:16/10;animation:dr4 34s ease-in-out infinite}
@keyframes dr1{0%,100%{transform:translate(0,0)}50%{transform:translate(2.2%,-3.4%)}}
@keyframes dr2{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.8%,3.2%)}}
@keyframes dr3{0%,100%{transform:translate(0,0)}50%{transform:translate(3.2%,2.4%)}}
@keyframes dr4{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.2%,-2.8%)}}
@media (max-width:900px){
  #hero .tB,#hero .tC{display:none}
  #hero .tA{width:44vw;top:6%}
  #hero .tD{width:46vw;bottom:9%}
}

/* ── 中央のかたまり ── */
#hero .in{width:min(var(--w),92vw);text-align:center;position:relative;z-index:3}
#hero .word{
  font-family:var(--grot);font-weight:700;line-height:1;
  font-size:clamp(1.7rem,8vw,5.4rem);letter-spacing:.13em;white-space:nowrap;
}
/* G と P を同じ場所に重ねて入れ替える。
   🚩 両方を absolute にすると .sw の高さが 0 になり文字が箱の外へ落ちる（実測）。
      G を通常フローに残して箱を作り、P だけを上に重ねる。
   🚩 入れ替え前は P を見せない。下から覗かせるとGと重なって字が潰れる（実測）。
      クロックが止まっても「INTEGRAL がきれいに読める」状態で止まる。 */
/* 🚩 字送り(.13em)は文字の「右側」にだけ足される。
   そのため G の箱＝字幅＋右の余白 になり、棒を箱の左右に置くと
   右の隙間だけ広くなる（＝Pが左に寄って見える）。
   スロットの中だけ字送りを切って、箱を字幅ぴったりにする。 */
#hero .sw{position:relative;display:inline-block;letter-spacing:0}
#hero .sw i{letter-spacing:0}
#hero .sw i{font-style:normal;transition:transform .55s cubic-bezier(.7,0,.2,1), color .55s ease, background-color .55s ease}
#hero .sw .g{display:inline-block;color:var(--paper)}
#hero .sw .p{
  position:absolute;left:0;top:0;width:100%;text-align:center;
  transform:translateY(.5em);color:rgba(246,245,240,0);
}
#hero.swapped .sw .g{transform:translateY(-.5em);color:rgba(246,245,240,0)}
/* 入れ替わると P は「紙色の面に紫の字」になる。紫地の上で紫は読めないため反転させる */
#hero.swapped .sw .p{transform:none;color:var(--paper)}


/* ── Pを縦棒で挟む（ヘッダーの INTE|P|RAL と同じ扱い）──────────
   紫の面の上では紫のPが読めないため、文字はすべて紙色にし、
   「Pだけ特別」であることは縦棒の位置で示す。
   🚩 棒は入れ替わりと同時に立ち上がる（scaleY 0→1）。動かすのは transform だけ。
      入れ替わる前は棒が無い＝INTEGRAL として正しく読める。 */
#hero .bar,#opening .bar{
  display:inline-block;width:max(2px,.042em);height:.72em;
  background:rgba(246,245,240,.55);
  margin:0 .13em;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .4s cubic-bezier(.7,0,.2,1) .12s;
}
#hero.swapped .bar,#opening.swapped .bar{transform:scaleY(1)}

#hero .en{
  margin-top:2.6em;font-family:var(--grot);font-size:clamp(.6rem,1.1vw,.75rem);
  letter-spacing:.3em;color:rgba(246,245,240,.82);
}
#hero .ja{
  margin-top:1.25em;font-family:var(--min);font-weight:400;
  font-size:clamp(.95rem,2.1vw,1.42rem);line-height:2.15;letter-spacing:.045em;
}
#hero .co{margin-top:2.4em;font-size:.76rem;letter-spacing:.16em;color:rgba(246,245,240,.66)}

/* ── ③ 下端をゆっくり流れる帯。26秒周期・無限 ── */
#hero .strip{
  position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;
  border-top:1px solid rgba(246,245,240,.2);padding:.85em 0;
}
#hero .strip .run{
  display:flex;gap:3.4em;white-space:nowrap;width:max-content;
  font-family:var(--grot);font-size:.6rem;letter-spacing:.24em;
  color:rgba(246,245,240,.62);animation:run 26s linear infinite;
}
#hero .strip span::after{content:"／";margin-left:3.4em;opacity:.42}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#hero .cue{
  position:absolute;left:50%;bottom:calc(.85em * 2 + 1.4rem + 16px);z-index:3;
  font-family:var(--grot);font-size:.56rem;letter-spacing:.22em;
  color:rgba(246,245,240,.7);transform:translateX(-50%);
}
#hero .cue i{display:block;width:1px;height:24px;margin:.7em auto 0;
  background:rgba(246,245,240,.5);animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}}

@media (prefers-reduced-motion:reduce){
  #hero .tile,#hero .strip .run,#hero .cue i{animation:none}
  #hero .sw .g{color:rgba(246,245,240,0);transform:translateY(-.5em)}
  #hero .sw .p{transform:none;color:var(--paper)}
  #hero .bar{transform:scaleY(1)}
}

/* ══════════════════════════════════════════════════════
   ヘッダー。地は本文と同じ1色
   ══════════════════════════════════════════════════════ */
header.top{
  position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid var(--line);
}
header.top .wrap{display:flex;align-items:center;gap:2em;height:var(--hh)}
.brand{font-family:var(--grot);font-weight:700;font-size:1rem;letter-spacing:.16em}
.brand .p{color:var(--principle)}
.brand .b{color:var(--principle);opacity:.42;font-weight:400;margin:0 .1em}
/* 🚩 項目をヘッダーいっぱいの高さにする。
   そうしないと配下メニューが top:100% ＝項目の下端（ヘッダーの内側）から出て、
   ヘッダーの罫線を跨いでしまう。項目を全高にすればヘッダーの下端から出る。 */
nav{margin-left:auto;display:flex;align-items:stretch;align-self:stretch;
  gap:clamp(10px,1.4vw,22px)}

/* ── 項目。カーソルを合わせると英語が日本語に「回って」変わる ──
   🚩 配下メニューは項目に直接くっつける。間に隙間があると、
      カーソルを動かしている途中で閉じてしまう（髙橋さん指摘）。
      .item の高さをヘッダーいっぱいにして、メニューはその直下から始める。 */
.item{position:relative;display:flex;align-items:center;height:100%;perspective:760px}
.item > a,.item > button{
  background:none;border:0;cursor:pointer;padding:0;display:block;
}

/* ══ サイコロが回る演出 ══════════════════════════════════
   平面を裏返すのではなく、立方体を1面ぶん転がして次の面を出す。
   出てくる面はコーポレートカラー。
   ・display:grid で英語と日本語を同じマスに重ねる
     → 箱の幅が「広い方の文字」に自動で合う（NEWS と お知らせ のような逆転に耐える）
   ・面の奥行き translateZ は箱の高さの半分。ここが合わないと立方体にならず
     面が浮いたり食い込んだりする
   🚩 面には当たり判定を持たせない。90度回した面は投影されて隣の項目まで覆い、
      透明でも操作を奪う（実測：SERVICES に合わせると APPROACH の「進め方」が横取りし、
      検証ツールのhoverが30秒タイムアウトした）。
   ══════════════════════════════════════════════════════ */
.cube{
  /* 🚩 1辺は rem で持つ。em にすると面ごとの文字サイズで解決され、
     英語の面と日本語の面で奥行きが変わって立方体にならない
     （実測：英語 translateZ 13.2px ／ 日本語 15.6px でずれていた）。 */
  --ch:2rem;                      /* 箱の高さ＝立方体の1辺 */
  position:relative;display:grid;transform-style:preserve-3d;
  transition:transform .46s cubic-bezier(.62,0,.22,1);
  pointer-events:none;
}
.cube > span{
  grid-area:1/1;display:flex;align-items:center;justify-content:center;
  height:var(--ch);padding:0 .95em;white-space:nowrap;
  backface-visibility:hidden;pointer-events:none;
}
.cube .f-en{
  font-family:var(--grot);font-size:.66rem;letter-spacing:.18em;color:var(--ink-2);
  transform:translateZ(calc(var(--ch) / 2));
  transition:color .2s ease;
}
.cube .f-ja{
  font-family:var(--jp);font-size:.78rem;letter-spacing:.08em;font-weight:600;
  color:var(--paper);background:var(--principle);
  transform:rotateX(90deg) translateZ(calc(var(--ch) / 2));
}
.item:hover .cube,.item:focus-within .cube{transform:rotateX(-90deg)}
.item:hover .f-en,.item:focus-within .f-en{color:var(--principle)}

/* ── タッチ端末では日本語ラベルを前面に固定する ──────────────
   このナビは英語を表示し、ホバーで日本語へ3D反転する設計。
   🚩 タッチ端末にはホバーが無いため反転が一度も起きず、日本語が
      永久に見えない（実測：.f-ja は opacity:0 のまま）。日本語で探す人が
      多い狭い画面ほど影響が大きいので、hover:none では役割を入れ替える。 */
@media (hover:none){
  .cube{transform:rotateX(-90deg)}
  .cube .f-ja{color:var(--ink);background:none;font-weight:500}
}


/* 配下メニュー。隙間なしで下に貼り付く */
.drop{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(-6px);
  min-width:13.5rem;background:var(--paper);border:1px solid var(--line);
  padding:.4em 0;opacity:0;pointer-events:none;z-index:90;
  transition:opacity .18s ease, transform .18s ease;
}
.item:hover .drop,.item:focus-within .drop{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.drop a{
  display:block;font-family:var(--jp);font-size:.82rem;letter-spacing:.01em;
  color:var(--ink);padding:.62em 1.1em;transition:background .16s ease,color .16s ease;
}
/* 選択＝コーポレートカラー（サイト共通のルール） */
.drop a:hover,.drop a:focus-visible{background:var(--principle);color:var(--paper)}

nav a.cta{
  /* サイコロのタイル(2rem)より高くする。主行動なので同じ大きさにしない。
     ナビ書き換えの副作用で32pxまで縮んでいたのを戻す。 */
  display:flex;align-items:center;align-self:center;height:2.75rem;
  font-family:var(--jp);font-size:.8rem;letter-spacing:.02em;font-weight:600;
  color:var(--paper);background:var(--principle);padding:0 1.6em;margin-left:.9em;
}
nav a.cta:hover,nav a.cta:focus-visible{background:var(--principle-d);color:var(--paper)}
@media (max-width:940px){ nav .item{display:none} }

/* ══════════════════════════════════════════════════════
   本文。色の面を使わず、罫線と余白だけで区切る
   ══════════════════════════════════════════════════════ */
section{padding:clamp(56px,8vw,132px) 0;border-bottom:1px solid var(--line-2)}
.k{font-family:var(--grot);font-size:.6rem;letter-spacing:.26em;color:var(--principle)}
h2{margin-top:1.1em;font-size:clamp(1.3rem,3.1vw,2.05rem);font-weight:700;line-height:1.5;
  letter-spacing:.005em;max-width:26em}
/* 章見出しを h1 に格上げしたページ（お知らせ・サイトマップ・企業理念）用。
   見た目は h2 と完全に同じにする。
   🚩 `.wrap` 直下に限定するのが肝。ヒーローの h1 は #hero > .in の中なので
      ここには該当せず、巨大な章見出しの体裁を持ち込まない。 */
section > .wrap > h1{margin-top:1.1em;font-size:clamp(1.3rem,3.1vw,2.05rem);font-weight:700;
  line-height:1.5;letter-spacing:.005em;max-width:26em}
.body{margin-top:1.5em;font-size:.94rem;color:var(--ink-2);max-width:40em}
.body b{color:var(--ink);font-weight:600}
.more{
  display:inline-block;margin-top:2em;font-size:.84rem;font-weight:600;color:var(--principle);
  border-bottom:1px solid currentColor;padding-bottom:.2em;
}
.more:hover,.more:focus-visible{color:var(--principle-d)}

/* ── 企業理念。明朝は理念・約束・締めの言葉だけに使う ── */
#philosophy h2{
  font-family:var(--min);font-weight:400;font-size:clamp(1.3rem,3.4vw,2.3rem);
  line-height:2;letter-spacing:.03em;max-width:none;
}
#philosophy .sub{
  margin-top:1.4em;font-family:var(--grot);font-size:.66rem;letter-spacing:.26em;color:var(--ink-3);
}

/* ── サービス。囲みも塗りも使わず、罫線で4本並べる ── */
.svc{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--line)}
.svc a{
  display:grid;grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr) auto;
  gap:clamp(12px,2vw,32px);align-items:baseline;
  padding:clamp(18px,2.2vw,30px) var(--rowpad);
  border-bottom:1px solid var(--line);
  /* 🚩 余白ぶんだけ外へ広げる。こうしないと
     ・余白なし → 面の縁に数字と矢印が接して切れて見える（実測 はみ出し0px）
     ・余白だけ → 文字が見出しより内側にずれて「幅が合っていない」状態になる
     負の margin で外へ出すことで、文字の左端は見出しと揃ったまま面だけ広がる。 */
  margin-inline:calc(-1 * var(--rowpad));
}
.svc a:hover,.svc a:focus-visible{background:var(--principle);color:var(--paper)}
/* 子要素の色は個別に指定してあるので、塗ったときは全部上書きする。
   🚩 上書きを1つ忘れると「紫の面に濃紺の字」になって読めなくなる。
   補助文字は .82 の紙色（.72だと小さい字でコントラスト4.5を割る）。 */
.svc a:hover .nm,.svc a:focus-visible .nm{color:var(--paper)}
.svc a:hover .n,.svc a:focus-visible .n,
.svc a:hover .ds,.svc a:focus-visible .ds{color:rgba(246,245,240,.82)}
.svc a:hover .ar,.svc a:focus-visible .ar{color:var(--paper)}
.svc .n{font-family:var(--grot);font-size:.62rem;letter-spacing:.14em;color:var(--ink-3)}
.svc .nm{font-size:1.02rem;font-weight:600}
.svc .ds{font-size:.85rem;color:var(--ink-2);line-height:1.85}
.svc .ar{font-family:var(--grot);color:var(--ink-3);font-size:.9rem}

@media (max-width:760px){
  .svc a{grid-template-columns:2.2rem minmax(0,1fr);row-gap:.4em}
  .svc .ds{grid-column:2}
  .svc .ar{display:none}
}

/* ── お知らせ ── */
.newshead{display:flex;align-items:baseline;gap:1.4em}
.newshead .all{margin-left:auto;font-family:var(--grot);font-size:.62rem;letter-spacing:.18em;
  color:var(--principle)}
.newshead .all:hover,.newshead .all:focus-visible{color:var(--principle-d)}
.news{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.news a{display:grid;grid-template-columns:7.4rem 6rem minmax(0,1fr);gap:clamp(12px,2vw,28px);
  align-items:baseline;padding:clamp(16px,2vw,26px) var(--rowpad);
  border-bottom:1px solid var(--line);
  margin-inline:calc(-1 * var(--rowpad))}
.news a:hover,.news a:focus-visible{background:var(--principle);color:var(--paper)}
.news a:hover .t,.news a:focus-visible .t{color:var(--paper)}
.news a:hover .d,.news a:focus-visible .d{color:rgba(246,245,240,.82)}
.news a:hover .c,.news a:focus-visible .c{
  color:rgba(246,245,240,.9);border-color:rgba(246,245,240,.45);
}
.news .d{font-family:var(--grot);font-size:.78rem;color:var(--ink-2)}
.news .c{font-size:.68rem;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line);padding:.2em .7em;justify-self:start}
.news .t{font-size:.94rem;font-weight:500}

@media (max-width:760px){
  .news a{grid-template-columns:auto auto;row-gap:.5em}
  .news .t{grid-column:1/-1}
}

/* ── 締め。塗りの帯をやめ、罫線だけにする ── */
#contact .row{
  margin-top:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:auto 1fr;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);
  max-width:56rem;
}
#contact .btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:1.6em;
  min-width:13rem;padding:1.1em 1.9em;background:var(--principle);color:var(--paper);
  font-size:.92rem;font-weight:600;
}
#contact .btn:hover,#contact .btn:focus-visible{background:var(--principle-d)}
#contact dl{display:flex;border-left:1px solid var(--line)}
#contact dl div{display:flex;flex-direction:column;justify-content:center;
  padding:.9em clamp(14px,1.8vw,26px)}
#contact dl div+div{border-left:1px solid var(--line-2)}
#contact dt{font-family:var(--grot);font-size:.56rem;letter-spacing:.2em;color:var(--ink-2)}
#contact dd{font-size:.82rem;margin-top:.3em}
@media (max-width:760px){
  #contact .row{grid-template-columns:1fr}
  #contact dl{border-left:0;border-top:1px solid var(--line);flex-wrap:wrap}
  #contact dl div{flex:1 1 100%;padding-inline:0}
  #contact dl div+div{border-left:0;border-top:1px solid var(--line-2)}
}





/* ═══════════════════════════════════════════════════════════════════════════
   問い合わせドック（右下・全15ページ常駐）  ★ここが唯一の定義
   2026-08-25 統合。以前は3世代（オフ白版 → Z案 → D3版）が重なっており、
   ①古い color:var(--ink) を継承して見出しが濃紺の地に濃紺で消える
   ②内側の .top がサイトのヘッダー .top（z-index:80・紙色）と衝突して白い箱になる
   という事故を2件起こしたため、1つにまとめて上書き合戦を解消した。
   触るときはこのブロックだけを直す。別の場所に追記しないこと。

   設計：
   ・D3（濃紺の面）＋A1（面のオーロラ）。髙橋さん決定 2026-08-25
   ・オーロラの色はブランド3色のみ。周期2.17/2.83/2.50秒（等速の12倍速・指定）
   ・動かすのは transform だけ。opacity は動かさない
     → 進行が絞られる環境で「見えないのにクリックできる要素」を作らないため
   ・内側の要素名は .dhead など、サイト共通クラスと衝突しない名前を使う
   ═══════════════════════════════════════════════════════════════════════════ */

.dock{
  position:fixed;right:16px;bottom:16px;z-index:70;
  width:min(318px,calc(100vw - 32px));
  background:var(--deep);border:1px solid rgba(183,185,220,.3);
  color:var(--paper);padding:0;overflow:hidden;isolation:isolate;
  opacity:1;transform:none;pointer-events:auto;transition:none;
}
.dock[hidden]{display:none}
.dock:not([hidden]){animation:dock-in .42s var(--e) both}
@keyframes dock-in{from{transform:translateY(12px)}to{transform:none}}
.dock .in{position:relative;z-index:3;padding:15px 16px 16px;color:var(--paper)}

/* ── オーロラ（面） ───────────────────────────────────── */
/* 光量と振幅：暗幕(.50)で約半分に減衰し、blurで拡散するため、
   ここが弱いと「動いていても見えない」状態になる。実測して知覚できる値にした。
   輪郭を出すため blur は 26px → 18px。 */
.dock .aur{position:absolute;inset:-45%;z-index:1;pointer-events:none;filter:blur(18px)}
.dock .aur span{position:absolute;display:block;border-radius:50%;will-change:transform}
.dock .aur span:nth-child(1){width:72%;height:60%;left:-14%;top:10%;
  background:radial-gradient(circle,rgba(85,70,168,.92),transparent 68%);
  animation:dock-a1 2.17s ease-in-out infinite}
.dock .aur span:nth-child(2){width:62%;height:54%;right:-16%;top:34%;
  background:radial-gradient(circle,rgba(109,95,196,.62),transparent 68%);
  animation:dock-a2 2.83s ease-in-out infinite}
.dock .aur span:nth-child(3){width:54%;height:48%;left:6%;bottom:-14%;
  background:radial-gradient(circle,rgba(183,185,220,.30),transparent 68%);
  animation:dock-a3 2.50s ease-in-out infinite}
/* 振幅を大きく取る。translate 16% では知覚下限を割っていた */
@keyframes dock-a1{0%,100%{transform:translate3d(-6%,-4%,0) scale(.92)}
  50%{transform:translate3d(38%,26%,0) scale(1.34)}}
@keyframes dock-a2{0%,100%{transform:translate3d(6%,8%,0) scale(1.28)}
  50%{transform:translate3d(-32%,-26%,0) scale(.9)}}
@keyframes dock-a3{0%,100%{transform:translate3d(-4%,6%,0) scale(.94)}
  50%{transform:translate3d(28%,-30%,0) scale(1.36)}}

/* オーロラの上でも本文が読めるように敷く暗幕。実測：見出し10.45／補足5.97（AA以上） */
.dock .veil{position:absolute;inset:0;z-index:2;background:rgba(15,22,38,.50);pointer-events:none}

/* ── 上段（.top はヘッダーと衝突するので .dhead） ─────────── */
.dock .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dock .dhead .st{
  display:flex;align-items:center;gap:.55em;margin:0;text-transform:none;
  font-family:var(--grot);font-size:.58rem;font-weight:700;letter-spacing:.18em;color:#B0A8E8;
}
.dock .dhead .st i{width:5px;height:5px;background:currentColor;display:block;
  animation:dock-lamp 2.4s ease-in-out infinite}
@keyframes dock-lamp{0%,100%{opacity:.28}50%{opacity:1}}
.dock .x{all:unset;cursor:pointer;font-family:var(--grot);font-size:.56rem;font-weight:700;
  letter-spacing:.16em;color:rgba(183,185,220,.72)}
.dock .x:hover,.dock .x:focus-visible{color:var(--paper)}

/* ── 見出しと補足 ────────────────────────────────────── */
.dock .t{font-family:var(--min);font-weight:400;font-size:1.12rem;line-height:1.5;
  letter-spacing:-.01em;margin:13px 0 0;max-width:none;color:var(--paper)}
.dock .sub{margin:5px 0 0;font-size:.75rem;line-height:1.7;max-width:none;color:var(--peri)}

/* ── CTA：ラベルと矢印をひとまとめに中央へ（板に見せない） ──── */
.dock .go{
  display:flex;align-items:center;justify-content:center;gap:.75em;
  margin-top:13px;height:48px;padding:0;border:0;text-decoration:none;
  background:var(--principle);color:var(--paper);
  font-size:.9rem;font-weight:700;letter-spacing:.02em;
  transition:background .26s var(--e);
}
.dock .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .26s var(--e)}
.dock .go:hover,.dock .go:focus-visible{background:var(--violet-l)}
.dock .go:hover svg{transform:translateX(4px)}

/* ── 条件（実測値のみ） ─────────────────────────────── */
.dock .fx{margin:8px 0 0;font-family:var(--grot);font-size:.64rem;letter-spacing:.06em;
  display:flex;gap:.5em;flex-wrap:wrap;max-width:none;color:var(--peri)}
.dock .fx b{font-weight:400}
.dock .fx s{text-decoration:none;color:rgba(183,185,220,.4)}

/* ── AIに聞かせる4社（CTAの半分の高さ＝副に回す） ──────────── */
.dock .aihd{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(183,185,220,.18);
  font-size:.7rem;max-width:none;color:var(--peri)}
.dock .ai{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px;font-size:inherit}
.dock .ai a{
  display:flex;align-items:center;gap:.45em;height:30px;padding:0 8px;
  border:1px solid rgba(183,185,220,.3);text-decoration:none;
  font-family:var(--grot);font-size:.68rem;font-weight:600;
  color:var(--paper);background:rgba(10,14,23,.42);
  transition:border-color .2s var(--e),color .2s var(--e),background .2s var(--e);
}
.dock .ai a svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock .ai a:hover,.dock .ai a:focus-visible{
  border-color:#B0A8E8;color:#B0A8E8;background:rgba(85,70,168,.24)}

@media (max-width:400px){
  .dock{left:10px;right:10px;bottom:10px;width:auto}
  .dock .ai{grid-template-columns:1fr}
}
/* 動きを減らす設定：オーロラとランプを止める（配色と本文はそのまま） */
@media (prefers-reduced-motion:reduce){
  .dock:not([hidden]){animation:none}
  .dock .aur span,.dock .dhead .st i{animation:none}
}

/* ナビの影を削除（サイト全体で影を使わない方針に統一）。
   ドロップダウンの境界は 1px のヘアラインと不透明な地で担保する。 */
.nav .drop{box-shadow:none}
@media (max-width:1120px){ .nav{box-shadow:none} }

/* ═══ プライバシーポリシー等の長文ページ（2026-08-25） ═══
   本文は読ませることが目的なので、計測幅を絞って行間を広く取る。
   表は横スクロール（.tbl-scroll）に載せる。 */

/* ═══════════════════════════════════════════════════════════════
   スマホのナビ（2026-08-25 追加）
   モックでは940px以下でナビを隠していたが、そのまま公開すると
   スマホから「相談する」以外どこにも行けなくなる。
   横スクロールできる1行にして、配下メニューは出さない
   （触る端末では hover が無いため、項目を押したら親ページへ行く）。
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:940px){
  nav .item{display:flex}          /* モックの display:none を打ち消す */
  header.top .wrap{gap:.9em}
  nav{gap:.1em;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  .cube{--ch:1.9rem}
  .cube > span{padding:0 .58em}
  .cube .f-en{font-size:.56rem;letter-spacing:.1em}
  .cube .f-ja{font-size:.7rem}
  .drop{display:none}
  /* 🚩 CTAは横スクロールの中にあると画面外へ流れて見えなくなる（実測）。
     sticky で右端に留め、常に見える状態にする。 */
  nav a.cta{height:2.3rem;font-size:.72rem;padding:0 1em;margin-left:.5em;flex:0 0 auto;
    position:sticky;right:0;z-index:2}
  .brand{flex:0 0 auto}
}

/* スキップリンク（site.css を読まないので、ここで持つ） */
.skip{position:absolute;left:-9999px;top:auto;z-index:300;
  background:var(--ink);color:var(--paper);padding:.7em 1.1em;font-size:.82rem}
.skip:focus{left:1rem;top:.5rem}

/* ═══════════════════════════════════════════════════════════════
   サイトマップの一覧（/sitemap/）
   罫線と字下げだけで階層を出す。色の面は使わない。
   選択した行はコーポレートカラー（サイト共通のルール）。
   ═══════════════════════════════════════════════════════════════ */
.maplist{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.maplist a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2em;align-items:baseline;
  padding:.9em var(--rowpad);margin-inline:calc(-1 * var(--rowpad));
  border-bottom:1px solid var(--line-2);
}
.maplist a:hover,.maplist a:focus-visible{background:var(--principle);color:var(--paper)}
.maplist .nm{font-size:.92rem;font-weight:600}
.maplist .u{font-family:var(--grot);font-size:.72rem;color:var(--ink-2)}

/* ── 定義リスト（採用・英語版・記事のまとめで使う）─────────────
   下層ページ側の .f-tl と同じ見た目。top.css には --s3 等の間隔変数が
   無いので、こちらの流儀（clampの直書き）で同じ寸法を作る。 */
.f-tl{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.f-tl li{
  display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:clamp(12px,1.6vw,22px);padding-block:.85em;
  border-bottom:1px solid var(--line-2);line-height:1.85;font-size:.92rem;
}
@media (max-width:640px){ .f-tl li{grid-template-columns:1fr;gap:.15em} }
.f-tl .y{
  font-family:var(--grot);font-size:.72rem;color:var(--principle);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}

/* ── 見出し＋説明の縦積み（採用ページの「こういう人と」）───────── */
.rlist{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.rlist .ritem{padding-block:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--line-2)}
.rlist .rt{font-size:1.02rem;font-weight:700;line-height:1.6}
.rlist .rb{margin-top:.6em;font-size:.92rem;line-height:1.9;color:var(--ink-2);max-width:44em}
.rlist .rb em{font-family:var(--grot);font-style:italic;color:var(--ink)}
.maplist a:hover .u,.maplist a:focus-visible .u{color:rgba(246,245,240,.82)}
.maplist a.sub{padding-left:calc(var(--rowpad) + clamp(16px,2.4vw,34px))}
.maplist a.sub .nm{font-weight:400;font-size:.86rem}


/* ═══════════════════════════════════════════════════════════════
   見出しの下の差し色（2026-08-25 追加）
   色数は増やさない。既にあるブランドの紫で濃淡のグラデーションを作る。
   長さは控えめ（最大150px）。面を塗らず、線1本だけに留める。
   ヒーローには入れない（h2が無い＝入らない）。
   ═══════════════════════════════════════════════════════════════ */
section h2::after,
section > .wrap > h1::after{
  content:"";display:block;
  width:clamp(88px,10vw,150px);height:3px;border-radius:2px;
  margin-top:clamp(18px,2.2vw,30px);
  background:linear-gradient(90deg,var(--peri),var(--principle));
}
/* 企業理念はMissionそのものなので、線は少し離して置く */
#philosophy h2::after{margin-top:clamp(24px,2.8vw,38px)}
#creed > .wrap > h1::after{margin-top:clamp(24px,2.8vw,38px)}
#philosophy .sub{margin-top:1.9em}
.body{margin-top:clamp(20px,2.4vw,32px)}


/* ═══════════════════════════════════════════════════════════════
   フッター（2026-08-25 サントリー型に変更）
   上段＝列組みのリンク群／下段＝社名・締めの言葉・著作権・補助リンク。
   上段の地は新しい色を足さず、文字色 #18233B の4%を敷くだけにする
   （「色は3つだけ」の原則を崩さないため）。
   選択した状態はサイト共通のルールどおりコーポレートカラー。
   ═══════════════════════════════════════════════════════════════ */
footer{border-top:1px solid var(--line);padding:0}
footer .fmain{background:rgba(24,35,59,.04);padding:clamp(38px,5vw,72px) 0}
footer .fcols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,40px);
}
footer .fcol{display:flex;flex-direction:column;align-items:flex-start}
footer .fh{
  font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:.9em;
  padding-bottom:.7em;border-bottom:1px solid var(--line);align-self:stretch;
}
footer .fcol a{
  font-size:.8rem;line-height:1.6;color:var(--ink-2);
  padding:.42em .5em;margin-inline:-.5em;
  transition:background .16s ease,color .16s ease;
}
footer .fcol a:hover,footer .fcol a:focus-visible{background:var(--principle);color:var(--paper)}

footer .fbase{padding:clamp(30px,4vw,56px) 0 clamp(24px,3vw,40px)}
footer .fsign{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9em 2em}
footer .fmark{
  font-family:var(--grot);font-weight:700;font-size:clamp(1rem,2vw,1.32rem);
  letter-spacing:.14em;color:var(--ink);line-height:1;
}
footer .fmark .bar{
  display:inline-block;width:2px;height:.72em;background:var(--principle);
  margin:0 .16em;transform:none;
}
footer .fcreed{font-family:var(--min);font-size:.84rem;color:var(--ink-2);letter-spacing:.03em}

footer .fbot{
  margin-top:clamp(24px,3vw,40px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.8em 2em;
}
footer .fcopy{font-family:var(--grot);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3)}
footer .futil{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center}
footer .futil a{font-size:.76rem;color:var(--ink-2);padding:.3em .8em}
footer .futil a + a{border-left:1px solid var(--line)}
footer .futil a:hover,footer .futil a:focus-visible{color:var(--principle)}
@media (max-width:620px){
  footer .futil{margin-left:0}
  footer .futil a{padding-inline:0}
  footer .futil a + a{border-left:0;margin-left:1.2em}
}

/* ═══════════════════════════════════════════════════════════════
   スマホではドックを出さない（2026-08-25）
   🚩 390pxの画面に318pxのパネルが乗り、フッターのリンクを覆って押せなくなる
      （検証ツールのhoverがドックに阻まれて発覚）。
   ヘッダーのCTAをスマホでも常時見える形（sticky）にしたので、
   相談への入口は失われない。
   ※ 旧15ページ側（site.css）にも同じ対処が必要。配色統一のときに入れる。
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .dock{display:none}
}

/* フッターとの重なり対策は cta.js の「合流」に置き換えた（2026-08-26） */

/* ═══════════════════════════════════════════════════════════════
   意見書（意見書_本番トップの扱いと引き継ぎ_2026-08-25）の5点
   ・新しい背景色は与えない。面を増やすと「ブツ切れ」に逆戻りする
   ・グリッドは repeat(N,minmax(0,1fr))。素の 1fr は最小コンテンツ幅で
     押し広げられ、390pxで横スクロールが出る
   ・section の共通 border-bottom を打ち消す箇所は個別に指定する
     （li 側で罫線を引くと二重線になる）
   ═══════════════════════════════════════════════════════════════ */

/* ── Heroの事業1行。明朝にしない（明朝は理念だけ＝書体で「変えないもの」を指す約束）── */
/* 🚩 h1 に格上げしたので font-weight を明示する。素の h1 は 600 で、
      指定しないとヒーローの1行だけ太くなる（見た目が変わる）。 */
#hero .lead{
  font-weight:400;
  margin-top:1.5em;font-family:var(--jp);font-size:clamp(.82rem,1.5vw,.98rem);
  letter-spacing:.02em;color:rgba(246,245,240,.9);
}
#hero .co{margin-top:2.1em}   /* 1行増えた分を詰めて1画面を守る */

/* ── 工程帯 ── */
#scope{border-bottom:1px solid var(--line-2);padding:clamp(40px,5vw,76px) 0}
#scope .lede{font-size:clamp(1.05rem,2.2vw,1.42rem);font-weight:700;line-height:1.6;max-width:30em}
#scope .note{margin-top:.9em;font-size:.88rem;color:var(--ink-2);max-width:42em;line-height:1.9}
#scope .steps{
  margin-top:clamp(22px,2.8vw,38px);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);
}
#scope .steps li{
  padding:clamp(14px,1.6vw,20px) clamp(8px,1vw,14px);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line-2);
}
#scope .steps li:first-child{border-left:0}
#scope .steps .n{display:block;font-family:var(--grot);font-size:.58rem;letter-spacing:.16em;color:var(--principle)}
#scope .steps .s{display:block;margin-top:.5em;font-size:.82rem;font-weight:600;line-height:1.55}
@media (max-width:900px){ #scope .steps{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ #scope .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── 相談の入口（#entry）──────────────────────────────
   🚩 #scope .steps を流用すると6列グリッドに押し込まれ、番号と本文が
      同じ行にくっつく。文が長いので1行1件の縦積みにする。 */
#entry .steps{
  margin-top:clamp(22px,2.8vw,38px);display:block;
  border-top:1px solid var(--line);
}
#entry .steps li{
  display:grid;grid-template-columns:minmax(0,3.2rem) minmax(0,1fr);
  align-items:baseline;gap:clamp(10px,1.4vw,20px);
  padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--line-2);
}
#entry .steps .n{font-family:var(--grot);font-size:.62rem;letter-spacing:.14em;color:var(--principle)}
#entry .steps .s{font-size:clamp(.95rem,1.9vw,1.12rem);font-weight:600;line-height:1.6}
@media (max-width:560px){
  #entry .steps li{grid-template-columns:1fr;gap:.3em}
}

/* ── サービスの対応範囲（1行説明の下）── */
.svc a{grid-template-rows:auto auto}
.svc .sc{
  grid-column:3;grid-row:2;margin-top:.5em;
  font-size:.74rem;line-height:1.85;color:var(--ink-3);
}
/* 🚩 面を塗ったら子要素の色を全部上書きする。1つ忘れると紫の面に濃紺の字が出る。
   補助文字は .82 の紙色（.72 だと小さい字でコントラスト4.5を割る）。 */
.svc a:hover .sc,.svc a:focus-visible .sc{color:rgba(246,245,240,.82)}
@media (max-width:760px){ .svc .sc{grid-column:2;grid-row:auto} }

/* ── CURRENT WORK ── */
.works{margin-top:clamp(24px,3vw,42px);border-top:1px solid var(--line)}
/* 🚩 右端に文字を置かない。ドック（右下・318px幅）が固定で乗るため、
   右寄せの列は必ずその下に隠れる（実測：役割と担当範囲が読めなくなっていた）。
   全部左寄せにし、長い文には max-width を持たせて右端まで伸ばさない。 */
.works a{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:.2em clamp(14px,2vw,32px);align-items:start;
  padding:clamp(20px,2.4vw,32px) var(--rowpad);margin-inline:calc(-1 * var(--rowpad));
  border-bottom:1px solid var(--line);
}
.works a:hover,.works a:focus-visible{background:var(--principle);color:var(--paper)}
.works .wn{grid-row:1/5;font-family:var(--grot);font-size:.62rem;letter-spacing:.14em;color:var(--ink-3);padding-top:.3em}
.works .wt{grid-column:2;font-size:1rem;font-weight:600;line-height:1.6;max-width:34em}
.works .wr{grid-column:2;font-family:var(--grot);font-size:.66rem;letter-spacing:.1em;
  color:var(--principle);margin-top:.5em}
.works .wj{grid-column:2;font-size:.84rem;line-height:1.9;color:var(--ink-2);margin-top:.55em;max-width:44em}
.works .ws{grid-column:2;font-size:.72rem;line-height:1.8;color:var(--ink-3);margin-top:.5em;max-width:44em}
.works a:hover .wt,.works a:focus-visible .wt{color:var(--paper)}
.works a:hover .wn,.works a:focus-visible .wn,
.works a:hover .wj,.works a:focus-visible .wj,
.works a:hover .wr,.works a:focus-visible .wr,
.works a:hover .ws,.works a:focus-visible .ws{color:rgba(246,245,240,.82)}
.fine{margin-top:1.3em;font-size:.76rem;color:var(--ink-3)}
@media (max-width:760px){ .works a{grid-template-columns:2.2rem minmax(0,1fr)} }

/* ── 体制 ── */
.struct{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.struct .r{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:clamp(12px,2vw,32px);
  padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--line-2);
}
.struct dt{font-size:.86rem;font-weight:600}
.struct dd{font-size:.86rem;line-height:1.95;color:var(--ink-2)}
@media (max-width:640px){ .struct .r{grid-template-columns:minmax(0,1fr);gap:.4em} }

/* ═══════════════════════════════════════════════════════════════
   読み物ページ（/about/philosophy/ など）
   明朝は理念の言葉だけ。本文はゴシック。
   ═══════════════════════════════════════════════════════════════ */
.doc{margin-top:clamp(22px,2.8vw,36px);max-width:44em}
.doc p{font-size:.92rem;line-height:2.1;color:var(--ink-2)}
.doc p + p{margin-top:1.5em}
.doc p b{color:var(--ink);font-weight:600}
.doc p.strong{color:var(--ink);font-weight:600}
.doc blockquote{
  margin:1.8em 0;padding:1.2em 0 1.2em 1.4em;border-left:2px solid var(--principle);
}
.doc blockquote .q{
  font-family:var(--grot);font-size:clamp(.92rem,1.8vw,1.16rem);letter-spacing:.06em;
  color:var(--ink);font-weight:600;line-height:1.6;
}
.doc blockquote .qj{
  margin-top:.6em;font-family:var(--min);font-size:.94rem;color:var(--ink-2);line-height:1.9;
}
/* G → P の置き換えを図として見せる */
.doc .swap{
  margin:1.6em 0;font-family:var(--grot);font-weight:700;
  font-size:clamp(1.05rem,2.6vw,1.8rem);letter-spacing:.1em;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em;line-height:1.3;
}
.doc .swap .g{color:var(--ink-3)}
.doc .swap .p{color:var(--principle)}
.doc .swap .ar{font-weight:400;color:var(--ink-3);font-size:.8em}
/* 理念ページの大見出しは明朝（理念の言葉そのものだから） */
#creed h2{
  font-family:var(--min);font-weight:400;
  font-size:clamp(1.25rem,3.2vw,2.1rem);line-height:2;letter-spacing:.03em;max-width:none;
}
#creed .sub{margin-top:1.9em;font-family:var(--grot);font-size:.66rem;letter-spacing:.26em;color:var(--ink-3)}
#belief .struct dt{font-family:var(--grot);font-size:.8rem;letter-spacing:.06em}

/* ── 「準備中」バッジ（サービス名の後ろに小さく付ける）───────── */
.soon{
  display:inline-block;margin-left:.7em;padding:.18em .6em;
  font-family:var(--jp);font-style:normal;font-size:.62em;font-weight:600;
  letter-spacing:.06em;line-height:1.5;vertical-align:middle;
  color:var(--principle);border:1px solid currentColor;border-radius:2px;
}
.s-navy .soon,.s-violet .soon,.s-deepest .soon{color:inherit;opacity:.72}

/* ── ドック内のAIロゴも塗りに切り替える（2026-08-31）──────────
   ドックは濃紺の面。ロゴの原色（黒・橙・4色）はここでは沈む／浮くので、
   紙色に寄せて統一する。Googleの4色だけは形が崩れないよう白に置き換える。 */
.dock .ai a svg.lg{width:13px;height:13px;stroke:none;fill:currentColor;color:rgba(246,245,240,.82)}
.dock .ai a svg.lg-google path{fill:currentColor}
.dock .ai a:hover svg.lg,.dock .ai a:focus-visible svg.lg{color:var(--paper)}

/* ═══════════════════════════════════════════════════════════════
   理念ページ #why（案C 暗転／2026-08-31 髙橋さん採用）
   本番LPの理念セクションと同じ組み方をこちらにも適用する。
   紙色のページの中でここだけ濃紺に反転させ、上端に全幅の写真帯を置く。
   🚩 既存ルールは一切書き換えず、#why の中だけに効く形で足している。
      （前に site.css 側を直して対象ページが top.css を読んでいた事故がある）
   ═══════════════════════════════════════════════════════════════ */
#why{
  --navy:#141C2E;   /* ローカル定義。:root を触らないので他ページに影響しない */
  background:var(--navy);color:var(--paper);position:relative;
  overflow:hidden;padding:0;border-bottom:0;
}
/* 上端の写真帯。下端だけ濃紺に溶かす（暗くしすぎると何が写っているか分からない） */
#why .band{position:relative;height:clamp(190px,24vw,320px);overflow:hidden}
#why .band img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(1.06);opacity:.95}
#why .band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,28,46,.04) 0%,rgba(20,28,46,.3) 44%,
    rgba(20,28,46,.86) 80%,var(--navy) 100%)}
#why .band .cap{position:absolute;left:0;right:0;bottom:1.1em;z-index:2}
#why .band .cap span{font-family:var(--grot);font-size:.6rem;letter-spacing:.2em;
  color:rgba(246,245,240,.5)}
#why .in{padding:clamp(6px,1vw,14px) 0 clamp(56px,8vw,120px)}
#why .k{color:var(--peri)}
#why h2{margin-top:1.05em;font-size:clamp(1.56rem,3.9vw,2.72rem);font-weight:700;
  line-height:1.36;letter-spacing:-.008em;max-width:17em;color:var(--paper)}
/* 🚩 全セクション共通の紫グラデ罫（section h2::after）を殺し、1pxの直線にする。
      あの罫が「よくあるテンプレ感」の正体だった。 */
#why h2::after{display:none}
#why .rule{width:64px;height:1px;background:rgba(246,245,240,.42);
  margin-top:clamp(22px,2.6vw,34px)}
#why .lede{margin-top:clamp(26px,3vw,42px);font-size:clamp(1.1rem,2.5vw,1.52rem);
  font-weight:500;line-height:1.8;letter-spacing:.01em;max-width:20em;color:var(--paper)}
/* 日本の強さ＝3つの断章。罫だけで組む（散文にすると密度が落ちる） */
#why .strata{margin-top:clamp(26px,3.2vw,44px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(246,245,240,.16);margin-bottom:0;padding:0;list-style:none}
#why .strata li{padding:1.35em 1.4em 1.35em 0;
  border-right:1px solid rgba(246,245,240,.1)}
#why .strata li:last-child{border-right:0}
#why .strata li+li{padding-left:1.4em}
#why .strata .n{font-family:var(--grot);font-size:.64rem;letter-spacing:.16em;
  color:var(--peri);font-variant-numeric:tabular-nums}
#why .strata .t{display:block;margin-top:.75em;font-size:.95rem;font-weight:500;
  line-height:1.75;color:rgba(246,245,240,.94)}
/* 問題／答えの左右対比。ここがこの案の芯 */
#why .duo{margin-top:clamp(34px,4.2vw,62px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,64px)}
#why .duo>div{padding-top:1.5em;border-top:1px solid rgba(246,245,240,.16)}
#why .duo .lbl{font-family:var(--grot);font-size:.6rem;letter-spacing:.2em;
  color:rgba(246,245,240,.46)}
#why .duo p{margin-top:1em;font-size:1rem;line-height:1.98;
  color:rgba(246,245,240,.82);max-width:24em}
#why .duo .ans{border-top-color:var(--peri)}
#why .duo .ans .lbl{color:var(--peri)}
#why .duo .ans p{color:var(--paper);font-size:clamp(1.02rem,2.2vw,1.2rem);
  font-weight:500;line-height:1.9}
#why .duo .ans b{font-weight:600;
  border-bottom:1px solid rgba(183,185,220,.5);padding-bottom:.06em}
/* 締め。明朝はこの1行だけ */
#why .creed{margin-top:clamp(38px,4.6vw,72px);padding:clamp(1.5em,2vw,2em) 0;
  border-top:1px solid rgba(246,245,240,.22);border-bottom:1px solid rgba(246,245,240,.22);
  font-family:var(--min);font-size:clamp(1.06rem,2.4vw,1.42rem);line-height:2.05;
  letter-spacing:.06em;text-align:center;color:var(--paper)}
#why .creed s{text-decoration:none;color:rgba(246,245,240,.34);margin:0 .9em}
#why .origin{margin-top:1.9em;font-size:.84rem;color:rgba(246,245,240,.58);
  line-height:1.95;max-width:46em}
#why .origin b{color:rgba(246,245,240,.9);font-weight:500}
/* 濃紺の上なので導線の色を明るい側に振る */
#why .more{color:var(--peri)}
#why .more:hover,#why .more:focus-visible{color:var(--paper)}
@media (max-width:760px){
  #why .strata{grid-template-columns:1fr}
  #why .strata li{border-right:0;border-bottom:1px solid rgba(246,245,240,.1);
    padding:1.1em 0}
  #why .strata li+li{padding-left:0}
  #why .duo{grid-template-columns:1fr;gap:1.9em}
  #why .creed{text-align:left}
  #why .creed s{display:block;height:0;margin:0;overflow:hidden}
}