/* =========================================================
   KGS style.css
   Ken Global Studio コーポレートサイト

   目次
   00. 欧文フォント（自己ホスト）
   01. トークン定義（色・書体・サイズ・余白）
   02. リセットとベース
   03. 共通パーツ（ボタン・カード・セクション枠）
   04. ヘッダー / ナビゲーション
   05. S1 ヒーロー
   06. S2 USECASE（実績）
   07. S3 SERVICES（事業内容）
   08. S4 MEMBERS
   09. S5 NEWS
   10. S6 CONTACT
   11. S7 ABOUT
   12. S8 フッター
   13. モーダル
   14. 下層ページ（プライバシーポリシー等）
   15. Cookie同意バナー / 言語のご案内
   16. ニュース記事ページ（/news/*.html）

   余白の原則：margin / padding / gap は 8の倍数。
   どうしても収まらない場合のみ 4の倍数を使う。
   値の直書きはしない。必要になったら :root にトークンを足す。
   ========================================================= */

/* ---------------------------------------------------------
   00. 欧文フォント（自己ホスト）
   Funnel Display は OFL-1.1。可変フォント1ファイルで 600〜800 を賄う。
   Google Fonts から読むと、社内ネットワークやアプリ内ブラウザで
   遮断されたときに Roboto へ落ちて別物の見た目になるため自前で持つ。
   ⚠️ HTML側の <link rel="preload" ... crossorigin> と対。片方だけ消さないこと
   --------------------------------------------------------- */
/* ⚠️ いまは Funnel Display も Google Fonts から読んでいます（HTMLの <link>）。
      自己ホストに切り替えるときは、次の3つを同時に行ってください。
        1. assets/fonts/funnel-display-var.woff2 を置く
           （Google Fonts の「Get font」→ ダウンロード → 可変版の woff2。約17.7KB）
        2. 下のコメントを外す
        3. HTML 4枚の <head> で、Funnel Display の preload 行のコメントを外し、
           Google Fonts の <link> から family=Funnel+Display… を外す
      切り替える理由：社内ネットワークやアプリ内ブラウザで
      fonts.googleapis.com が遮断されると Roboto に落ち、FVの印象が別物になるため。
      速度は落ちません（別ドメイン2つ分の接続確立が消えるため）
*/
/*
@font-face{
  font-family:'Funnel Display';
  src:url('/assets/fonts/funnel-display-var.woff2') format('woff2-variations');
  font-weight:600 800;
  font-style:normal;
  font-display:swap;
}
*/
/* ---- 01. トークン ---- */
:root{
  /* ブランドカラー。KGS_RGB.ai のガイドラインシートに
     「COLOR RGB / R0 G0 B0 / R0 G160 B235 / R0 G90 B170」と明記されている3色が原本。
     PNGのロゴ素材は #02409B / #26A7E2 とずれていたので、こちらに合わせて作り直した。
     --navy-dark と --navy-mid は、この #005AAA と同じ色相のまま明度だけ振った派生色。
     暗い面と白地の見出しに必要な重さを、勝手な色を足さずに作るため */
  --black:#000000;      --navy:#005aaa;       --navy-dark:#002b52;  --navy-mid:#00417a;
  --blue:#00a0eb;       --blue-light:#3dc1ff; --blue-pale:#e5f7ff;
  /* 白地に置く小さい文字用。ブランドの水色 #00a0eb は白地で 2.9:1 しかなく、
     11pxのラベルが読めない（読者は40〜60代）。同じ色相を暗くして 5.0:1 にしたもの。
     線や帯などの装飾には --blue をそのまま使う */
  --blue-text:#0076ad;
  /* FVの方眼と、その交点に置くドット。
     ドットはキャンバスに描くので JS から読む値だが、
     調整はここだけで済むようトークンにしてある（単位も含めてここで持つ） */
  --fv-grid:rgba(0,90,170,.09); --fv-grid-size:48px;
  --fv-dot:0,90,170;            --fv-dot-alpha:.26;
  --fv-dot-r:2.1;                --fv-dot-radius:190;
  --fv-dot-push:24;
  --fv-mark-op:.16;              /* SP・TBのマークの濃さ。PCは64emで1に戻す */
  --white:#fff;         --off-white:#f8f9fc;
  --gray-100:#f2f4f8;   --gray-200:#e2e6ee;   --gray-400:#9aa3b8;
  --gray-600:#5a6380;   --gray-800:#2b3050;

  --font-en:'Funnel Display','Helvetica Neue',Arial,sans-serif;
  --font-ja:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --fs-hero:    clamp(2.8rem, 8.5vw, 9rem);
  --fs-hero-ja: clamp(2.125rem, 5.6vw, 4.5rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h2-en:   clamp(1.8rem, 3.5vw, 3.2rem);
  --fs-sub:     clamp(1.125rem, 2vw, 1.5rem);
  --fs-h4:      clamp(1.0625rem, 1.3vw, 1.125rem);
  --fs-body:    1rem;
  --fs-card:    0.9375rem;
  --fs-caption: 0.8125rem;
  /* ラベル用（SECTION LABEL・カテゴリ・小さいボタン文字）。11px 相当 */
  --fs-label:   0.6875rem;
  --lh-body:1.7; --lh-dense:1.6;

  /* 余白：すべて8の倍数 */
  --sec-y:56px;  --gutter:24px;  --header-h:64px;  --hero-pb:56px;
  --gap-card:16px; --pad-card:16px;
}

/* PCはカーソルで動くぶんドットが目に入るので、静止時は薄めでよい。
   スマホは出現アニメが終われば動かないので、少し濃くして存在を残す */
@media (min-width:64em){:root{--fv-dot-alpha:.20}}
@media (min-width:48em){:root{--sec-y:72px;--gutter:40px;--gap-card:24px;--pad-card:24px}}
@media (min-width:64em){:root{--sec-y:80px;--gutter:80px;--header-h:72px}}

/* ---- 02. ベース ---- */
*{box-sizing:border-box}
/* 本文は500（Medium）。400だと余白の広い面で文字が痩せて見える */
body{margin:0;font-weight:500;background:var(--white);color:var(--gray-600);font-family:var(--font-ja);
  word-break:auto-phrase;   /* 和文を文節で折り返す。未対応ブラウザは従来どおり */
  line-break:strict;
  font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* スクロールで現れる。translate プロパティを使うのは、
   カードのホバー（transform: translateY）と競合させないため */
.reveal{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s ease}
.reveal.is-shown{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:0;transition:none}}

/* ---- 03. 共通パーツ ---- */
.section{padding:var(--sec-y) var(--gutter);position:relative}
.section--tint{background:var(--off-white)}
.container{max-width:1280px;margin-inline:auto;position:relative;z-index:1}

/* 薄い格子（叩き台のCONTACTバナーから流用。48px = 8の倍数） */
.section--grid{overflow:hidden}
.section--grid::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,27,110,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,27,110,.05) 1px,transparent 1px);
  background-size:48px 48px}
/* 薄いドット。格子と同じ48pxグリッドの交点に置き、主張しない濃さにする */
.section--dots{overflow:hidden}
.section--dots::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(13,27,110,.22) 1px,transparent 0);
  background-size:24px 24px}
.section--grid-dark::before{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
.deco-glow{position:absolute;top:-20%;right:-5%;width:50vw;height:50vw;border-radius:50%;
  background:radial-gradient(rgba(41,170,226,.2) 0%,transparent 65%);pointer-events:none}

/* セクション見出し */
.section__header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid var(--gray-200);position:relative}
.section__header::after{content:"";position:absolute;bottom:-2px;left:0;width:80px;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue))}
.section--dark .section__header{border-bottom-color:rgba(255,255,255,.18)}
.section--dark .section__header::after{background:linear-gradient(90deg,var(--blue),var(--blue-light))}
.section__label{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.3em;
  color:var(--blue-text);margin:0 0 8px;line-height:1}
.section__title{font-family:var(--font-ja);font-size:var(--fs-h2);font-weight:700;
  letter-spacing:.02em;line-height:1.2;color:var(--navy-dark);margin:0}
.section__title--en{font-family:var(--font-en);font-size:var(--fs-h2-en);font-weight:800;
  letter-spacing:-.01em;line-height:1}
.section--dark .section__title{color:var(--white)}
/* 指で押せる高さを確保する。文字の高さのままだと25pxしかない */
.section__link{min-height:44px;display:inline-flex;align-items:center;font-family:var(--font-en);font-size:var(--fs-caption);font-weight:700;
  letter-spacing:.18em;color:var(--blue-text);display:flex;align-items:center;gap:8px;
  white-space:nowrap;transition:gap .2s,color .2s}
.section__link::after{content:"→"}
@media (hover:hover){.section__link:hover{gap:16px;color:var(--navy)}}
.section__sub{font-family:var(--font-ja);font-size:var(--fs-sub);font-weight:700;line-height:1.4;
  color:var(--navy-dark);margin:0 0 16px;letter-spacing:.02em}
.section--dark .section__sub{color:var(--white)}
.section__lead{margin:0 0 40px;max-width:64ch;font-size:var(--fs-card);
  line-height:var(--lh-body);color:var(--gray-600)}
.section__lead--br{max-width:none}   /* 改行を明示している段落 */
.section--dark .section__lead{color:rgba(255,255,255,.72)}
/* PCでだけ改行する。SPでは自動の折り返しに任せる */
.br-pc{display:none}
@media (min-width:64em){.br-pc{display:inline}}
.br-sp{display:inline}
@media (min-width:64em){.br-sp{display:none}}
.section__sub--mid{margin-top:48px}   /* セクション中ほどに置く中見出し */

.btn{display:inline-block;text-align:center;font-family:var(--font-ja);font-size:var(--fs-card);
  font-weight:700;letter-spacing:.08em;line-height:1.7;padding:16px 32px;border-radius:2px;
  transition:background .2s,transform .2s,color .2s}
.btn--white{background:var(--white);color:var(--navy-dark)}
.btn--navy{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:var(--white)}
@media (hover:hover){
  .btn--white:hover{background:rgba(255,255,255,.85);transform:translateY(-2px)}
  .btn--navy:hover{transform:translateY(-2px)}
}

/* 写真が未支給の枠 */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px;text-align:center;background:var(--gray-100)}
.ph__what{font-family:var(--font-ja);font-weight:700;font-size:12.5px;line-height:1.5;color:var(--navy-dark)}
.ph__spec{font-family:var(--font-mono);font-size:10px;color:var(--gray-400)}
.ph--16x9{aspect-ratio:16/9}
.ph--3x4{aspect-ratio:3/4}

/* ---- 04. ヘッダー ---- */
.header{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:8px;
  height:var(--header-h);padding:0 var(--gutter);background:transparent;
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
/* FVが白地なので暗い膜は不要。透過のまま、文字とロゴは最初から濃い色にする */
.header.is-scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom-color:var(--gray-200)}
/* ロゴは白版とカラー版を重ね、ヘッダーの状態で入れ替える */
/* flex:none がないと、ヘッダーが混み合うSPでリンクごと縮んでロゴが横に潰れる */
.header__logo{position:relative;margin-right:auto;flex:none;
  display:flex;align-items:center;min-height:44px;line-height:0}
/* max-width:none は全体の img ルール（max-width:100%）に潰されないため */
.header__logo-img{height:20px;width:auto;max-width:none;display:block;transition:opacity .3s ease}
@media (min-width:64em){.header__logo-img{height:32px}}
/* 地が明るいので白ロゴは使わない。カラー版だけを出す */
.header__logo-img--light{display:none}
.header__logo-img--dark{position:static;opacity:1}
.header__nav{display:none}
@media (min-width:64em){.header__nav{display:flex;gap:32px;align-items:center;margin:0 auto}
  .header{gap:16px}}
.header__nav a{font-family:var(--font-ja);font-size:14px;font-weight:700;
  letter-spacing:.06em;color:var(--gray-800);padding:8px 0;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s}
.header__nav a.is-active{color:var(--navy);border-bottom-color:var(--blue)}
@media (hover:hover){.header__nav a:hover{color:var(--navy)}}
/* SPは幅が足りないので隠し、モバイルメニューの中に置く */
/* 言語切替は国旗。JP/EN の文字だと、英語話者が「JP」を行き先と読むか現在地と読むかで迷う。
   旗なら、今どちらを見ていて、押すとどちらへ行くのかが一目で分かる */
.header__lang{display:none;align-items:center;gap:6px}
.header__lang a,.header__lang .is-current{display:grid;place-items:center;
  /* 旗は2枚とも viewBox 900×600（3:2）。箱も3:2にしておくと、
     letterbox も切り抜きも起きず、2枚がまったく同じ大きさで並ぶ */
  width:30px;height:20px;overflow:hidden;
  border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);
  opacity:.5;transition:opacity .2s}
/* いま見ている言語だけ不透明にする（枠線や下線を足すと旗の中の色と喧嘩する） */
.header__lang .is-current{opacity:1}
@media (hover:hover){.header__lang a:hover{opacity:1}}
/* PCではヘッダーに出す。この1行が無いと display:none のままで、
   SPはモバイルメニュー内、PCはどこにも無い状態になる */
@media (min-width:64em){.header__lang{display:flex}}
.header__cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;font-size:12px;letter-spacing:.02em;white-space:nowrap;
  background:var(--navy);border:1px solid var(--navy);color:#fff;
  transition:background .25s,border-color .25s}
@media (hover:hover){.header__cta:hover{background:var(--navy-mid);border-color:var(--navy-mid)}}
@media (min-width:64em){.header__cta{padding:8px 24px;font-size:14px;letter-spacing:.06em}}
.header__burger{display:grid;place-items:center;width:48px;height:48px;margin-right:-8px}
@media (min-width:64em){.header__burger{display:none}}
.header__burger span{display:block;width:24px;height:2px;background:var(--navy-dark);position:relative}
.header__burger span::before,.header__burger span::after{content:'';position:absolute;left:0;width:24px;height:2px;background:var(--navy-dark)}
.header__burger span::before{top:-8px}
.header__burger span::after{top:8px}
.mobile-menu{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;justify-content:center;
  gap:8px;padding:0 var(--gutter);background:linear-gradient(160deg,var(--navy-dark),var(--black))}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-family:var(--font-ja);font-weight:700;font-size:clamp(1.5rem,6vw,2.25rem);
  letter-spacing:.04em;color:var(--white);padding:8px 0}
/* メニュー内の言語切替。ヘッダーより広く取れるので大きく置く */
/* 旗どうしの間隔。指で押す対象なので、誤タップしない距離を置く */
.mobile-menu__lang{display:flex;align-items:center;gap:20px;margin-top:32px}
/* メニュー内はタップ領域を確保したいので、旗を大きめに置く */
/* ⚠️ padding:0 と line-height:0 は .mobile-menu a の打ち消し。
   あちらは大きなメニュー項目用に padding:8px 0 と大きな行送りを持っていて、
   それが効いたままだと旗の入る領域が潰れる。
   旧版のユニオンジャックは slice（切り抜き）で埋めていたので気づけなかった */
.mobile-menu__lang a,.mobile-menu__lang .is-current{position:relative;
  display:grid;place-items:center;padding:0;line-height:0;
  width:42px;height:28px;
  opacity:.55;transition:opacity .2s}
/* 枠線と角丸は svg 側に持たせる。a に overflow:hidden を掛けると
   下の ::after（タップ領域）まで切り取られてしまうため */
.mobile-menu__lang svg{display:block;width:100%;height:100%;
  border:1px solid rgba(255,255,255,.3);border-radius:4px}
.mobile-menu__lang .is-current svg{border-color:transparent}
.mobile-menu__lang .is-current{opacity:1}
/* ⚠️ 見た目は42×28のままで、指で押せる範囲だけ 54×44 に広げる。
   仕様のタップ領域44px以上を満たすための領域で、見た目には出ない */
.mobile-menu__lang a::after{content:"";position:absolute;inset:-8px -6px}
.mobile-menu__close{position:absolute;top:16px;right:16px;width:48px;height:48px;color:#fff;font-size:26px}

/* ---- 05. S1 ヒーロー ---- */
/* 白地＋格子。直下の Why KGS がネイビーなので、FVも紺にすると
   ページ上部が一つの塊になる。明るく始めて、帯を最初の重量にする */
/* SPは余った高さを中央で割らず上に寄せる。中央寄せだと余りが上下に分かれ、
   FVニュースの下だけ広く見えてしまう（下は padding-bottom ＝ --sec-y ちょうどにしたい）。
   PCは 05c で center に戻している */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 40px) var(--gutter) var(--hero-pb);overflow:hidden;background:var(--off-white)}
.hero__bg{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(var(--fv-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fv-grid) 1px,transparent 1px);
  background-size:var(--fv-grid-size) var(--fv-grid-size)}
/* 方眼の交点に置くドットを描くキャンバス。
   方眼の線（.hero__bg）はCSSのまま動かさない。動くのはこのドットだけ。
   マウスがない端末・動きを減らす設定では main.js が初期化しないので、
   この要素は空のまま残る（空のキャンバスは描画コストを持たない） */
.hero__cv{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero__cv{display:none}}
/* ロゴマーク。SP・TB はモックアップどおり右上に大きく置き、
   右側をたっぷり画面外へ逃がす。ペン先（縦0.99の位置）は必ず見える高さに収める。
   数値はいただいた PNG モックアップの実測から出している
   （SP: 左端60% / 幅68vw、PC: 円の最上部を「Global」の l の上端に合わせる） */
/* SP・タブレットはホバーが無いぶん、マークが画面に残り続ける。
   フルカラーのまま置くとロゴタイプと面積を奪い合うので、
   ネイビー単色をごく薄く敷いて地の模様に落とす。
   PC（64em以上）はホバーでドットが動くため、マークまで薄くすると
   ドットと同じ明度帯に入って図と地の区別がつかなくなる。だから濃いまま */
.hero__mark{position:absolute;z-index:0;pointer-events:none;
  width:68vw;height:auto;opacity:var(--fv-mark-op);
  top:calc(var(--header-h) + 12px);right:-28vw}
/* TB は SP のモックアップをそのまま引き伸ばした見え方にする。
   PC の指定（下記 64em）を継承させないため、ここでは何も上書きしない */
@media (min-width:64em){
  /* PCはロゴタイプ「Ken Global Studio」と天地の中心を揃える。
     マークの絵柄は画像の縦0.0033〜0.9944に入っていて中心とほぼ一致するので、
     画像そのものの中心をロゴタイプの中心に合わせればよい。
     ヒーローの中身は上下中央寄せで、ロゴタイプの中心はヒーロー中央から
     常に 44px 上（窓の幅・高さが変わっても一定）。実測値。
       top = (50% - 44px) - 高さ/2
     大きさと左右位置はモックアップの実測のまま動かしていない */
  .hero__mark{width:auto;height:calc(53.6% + 94px);top:calc(23.2% - 91px);bottom:auto;right:-3.6%;opacity:1}
}
.hero__inner{position:relative;z-index:1;max-width:1280px;margin-inline:auto;width:100%}
.hero__catch{font-family:var(--font-en);font-style:italic;font-weight:600;
  font-size:clamp(.9rem,1.3vw,1.05rem);color:var(--gray-400);margin:0 0 8px;line-height:1.45}
.hero__title{width:fit-content;font-family:var(--font-en);font-size:var(--fs-hero);font-weight:700;
  letter-spacing:.08em;line-height:.88;color:var(--navy);margin:0 0 24px}
@media (min-width:48em){.hero__title{letter-spacing:.18em}}
/* 2026-09-10 コピー差し替え。和文見出し用の修飾子。
   旧版（Ken / Global / Studio）に戻すときは HTML 側のコメントを入れ替えるだけでよい。
   欧文ロゴタイプ用の字間・行送りをそのまま使うと和文が間延びするので、ここで上書きする */
.hero__title--ja{font-family:var(--font-ja);font-size:var(--fs-hero-ja);
  letter-spacing:.04em;line-height:1.4}
@media (min-width:48em){.hero__title--ja{letter-spacing:.04em}}
/* 「知」はベタ塗りの四角で抜く。ナレッジシェア支援の4段と同じ扱いにして、
   ページの離れた2か所で同じ記号として読ませる。
   四角＝見出しと同じ --navy、文字＝ヒーローの地色。組み合わせは 6.7:1 */
.hero__title-em{--key-ink:var(--navy);--key-paper:var(--off-white)}
/* 旧版に戻すときは上を消して下のどちらかを生かす
   .hero__title-em{color:var(--black)}                                              ← 黒だけ
   .hero__title-em{font-family:var(--font-serif);font-weight:700;color:var(--black)} ← 明朝＋黒 */
/* 「知」を四角で抜く。
   ⚠️ 四角を「文字の入った箱」として作ると、中央寄せの基準が書体の ascent/descent に
      なるため、同じ Noto Sans JP でも配信元（Google Fonts の可変版／静的版）で
      位置が変わる。実機で左下にずれたのはこれが原因。
   そこで四角は疑似要素で描き、vertical-align＝ベースライン基準で置く。
   和文書体の字面（＝仮想ボディ）はベースラインの -0.12em〜+0.88em に入る約束なので、
   上下 0.1em ずつの余白を足した 1.2em 角を -0.22em に沈めれば天地が揃う。
   ベースラインは書体が変わっても動かないので、この置き方なら metric に依存しない。
   横は、和文1文字の送りが 1em で字面がその中央にあることを使う：
   四角(1.2em)を描いたあと margin-right:-1.1em でペンを戻し、文字を 0.1em 内側から描く */
.hero__title--ja{position:relative;z-index:0}
/* margin-right は四角の左右の余白を目で見て等しくするためのもの。
   四角(1.2em)は文字の送り(1em)より広いので、何もしないと右だけ詰まる。
   前後の「る」「を」のインクから四角の辺までを8倍解像度で測って決めた値 */
.hero__title-em{font-style:normal;font-weight:700;letter-spacing:0;
  margin-right:.15em;color:var(--key-paper)}
.hero__title-em::before{content:"";display:inline-block;
  /* margin-right の -1.065em は実測値。理屈では -1.1em（＝四角1.2em − 余白0.1em）だが、
     この書体の「知」の字面が送りの中央よりわずかに左にあるぶんを足している */
  width:1.2em;height:1.2em;margin-right:-1.065em;vertical-align:-.22em;
  background:var(--key-ink);position:relative;z-index:-1}

/* ---- 英語版のFV見出し ----
   和文は「1文字＝1em角」なので四角で抜けるが、欧文にその約束はない。
   単語を塗りつぶすハイライトに置き換える（疑似要素の四角は消す）。
   box-decoration-break:clone は、行をまたいだときに両端とも角が付くようにするため */
.hero__title--en{font-family:var(--font-en);font-weight:800;
  letter-spacing:-.01em;line-height:1.15}
.hero__title--en .hero__title-em::before{content:none}
.hero__title--en .hero__title-em{display:inline;margin-right:0;vertical-align:baseline;
  padding:.02em .14em .08em;background:var(--key-ink);color:var(--key-paper);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* 引用の行頭は、和文なら「、英語なら “。ぶら下げる量が違う */
[lang="en"] .strength-band__quote-line:first-child{text-indent:-.28em}
.hero__desc{max-width:42ch;margin:0 0 40px;font-size:var(--fs-card);line-height:2;color:var(--gray-600)}
@media (min-width:64em){.hero__desc{max-width:none}}  /* PCは改行を明示するので幅制限を外す */
/* 2026-09-13 SPも100svhにした。スクロール前に Why KGS が覗くと、
   FVが途中で切れた印象になるため。余った高さは上下に振り分ける（justify-content:center） */
.hero__desc-extra{display:none}
@media (min-width:48em){.hero__desc-extra{display:inline}}
.hero__cta .btn{width:100%}
@media (min-width:48em){.hero__cta .btn{width:auto;min-width:288px}}

/* ---- 05b. FVのタグ帯（無限スクロール） ---- */
.marquee{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__list{display:flex;gap:8px;margin:0 8px 0 0;padding:0;list-style:none;flex-shrink:0}
.hero__tags{margin-top:16px;width:100vw;margin-left:calc(50% - 50vw)}
/* PCは画面いっぱいに流すと帯が間延びするので、ロゴタイプの幅に収める
   （実際の幅は main.js が Ken Global Studio の実寸から算出して入れる） */
@media (min-width:64em){.hero__tags{width:auto;margin-left:0}}
/* 角丸はサイト共通の4px。完全な丸だとカードやボタンのトーンから浮くため */
.tag-pill{display:inline-flex;align-items:center;padding:8px 16px;border-radius:4px;
  background:var(--white);border:1px solid var(--navy);
  color:var(--navy);font-size:var(--fs-caption);font-weight:700;line-height:1;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap}
  .marquee{-webkit-mask-image:none;mask-image:none}
}


/* ---- 05c. FVニュースカルーセル ---- */
/* お知らせの最新3件をFVに出す。中身は data/news.json から main.js が組む。
   PCは hero を2カラムにして右に縦の帯として流し、SPはタグ帯の下に1枚ずつ置く */
@media (min-width:64em){
  /* PCは2カラムなので、中身は上下中央に戻す */
  .hero{justify-content:center}
  .hero__inner{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
  .hero__text{grid-column:1;min-width:0}
  .hero__news{grid-column:2;grid-row:1;position:relative;align-self:center}
  /* PCはこの位置をニュースが占めるので、ロゴマークは出さない */
  .hero__mark-wrap{display:none}
}
/* SPでもロゴマークは出さない（方眼＋ドットだけの背景にする）。
   ⚠️ 本番では <picture> ごと消すこと。display:none でも画像の読み込みは走る */
.hero__mark-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;display:none}

/* SP: タグ帯とニュースのあいだを広く取る。
   2026-09-13 FVを100svhにしたので、ここが詰まって見えないよう --sec-y より広げた */
.hero__news{position:relative;z-index:1;
  margin-top:calc(var(--sec-y) + 24px);
  margin-bottom:0}
@media (min-width:64em){.hero__news{margin-block:0}}

/* --- 見出しラベル --- */
/* SP は Why KGS と同じ形の小ラベル（Latest Story）。PCでは「─ NEWS ─」に変わる */
/* ⚠️ line-height:1 にしないこと。行ボックスがフォントサイズと同じ高さになるため、
   欧文書体によっては字の上端が行ボックスからはみ出す。親で切られると頭が欠ける。
   高さは下の height と align-items:center で決めているので、行間は余裕を持たせてよい */
.hero__news-label{margin:0 0 16px;
  font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;letter-spacing:.3em;
  line-height:1.3;color:var(--navy)}
.hero__news-label-pc{display:none}
@media (min-width:64em){
  /* 高さはロゴタイプ「Ken」1行分（--fs-hero × line-height .88）に合わせる。
     単独で置く帯なので、級数も --fs-label のままだと余白に負ける */
  .hero__news-label{display:flex;align-items:center;gap:16px;
    height:calc(var(--fs-hero) * .88);margin:0 0 24px;font-size:var(--fs-h4)}
  .hero__news-label::before,.hero__news-label::after{content:"";flex:1 1 auto;height:1px;
    background:var(--navy);opacity:.35}
  .hero__news-label-pc{display:inline}
  .hero__news-label-sp{display:none}
}

/* --- 入れ物 --- */
/* viewport = 上下ボタンの基準箱（＝トラックと同じ高さ）
   track    = 表示窓。PCは上下端をマスクでフェードさせる
   list     = 実際に translateY で動く帯 */
.hero__news-viewport{position:relative}
.hero__news-track{position:relative;overflow:hidden}
.hero__news-list{position:relative}

/* --- SP: アクティブな1枚だけを中央に置く。次のカードは覗かせない --- */
/* 幅は左右ボタン（28px・外へ4px出すので内端は端から24px）に当たらない範囲まで。
   さらに8pxずつ逃がして片側32px、計64pxを空ける */
.hero__news-card{position:absolute;top:0;left:50%;
  width:min(calc(100% - 64px),320px);margin-inline:auto;
  display:flex;flex-direction:row;gap:0;
  background:var(--white);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;transform:translateX(-50%)}
.hero__news-card.is-active{position:relative;top:auto;left:auto;
  opacity:1;pointer-events:auto;transform:none}
/* カードが低いほどサムネの見え方が素直になるので、SPは高さを稼ぐ要素を持たせない
   （日付の枠なし・詰めた余白）。枠はPCだけで復活させる */
.hero__news-card-thumb{display:flex;align-items:center;justify-content:center;
  flex:0 0 50%;width:50%;min-height:0;overflow:hidden}
.hero__news-card-thumb img{width:100%;height:100%;object-fit:cover}
/* ロゴのように切り抜きたくない画像。news-card__thumb--logo と同じ考え方 */
.hero__news-card-thumb--logo{background:var(--black)}
.hero__news-card-thumb--logo img{object-fit:contain;padding:6%}
.hero__news-card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:8px 12px}
.hero__news-card-date{display:inline-block;margin:0 0 3px;padding:0;
  font-family:var(--font-en);font-size:var(--fs-caption);line-height:1.5;color:var(--gray-600);
  border:0}
.hero__news-card-title{display:-webkit-box;overflow:hidden;margin:0;
  font-size:var(--fs-caption);font-weight:500;line-height:1.45;color:var(--gray-800);
  -webkit-line-clamp:2;-webkit-box-orient:vertical}

/* --- PC: カードの箱は持たせず、角丸サムネ→日付→見出しを地の上に直に置く --- */
@media (min-width:64em){
  /* トラックの高さは main.js が「カード高さ ＋（カード間＋のぞかせ量）× 2」で入れる。
     vh 基準にすると窓の高さ次第で前後のカードが完全に隠れるため。
     下の値は JS が動かなかったときの保険 */
  .hero__news{--news-label-block:calc(var(--fs-hero) * .88 + 24px);
    --news-track-h:calc(min(74vh,660px) - var(--news-label-block))}
  /* ホバーで1.05倍になったぶんが overflow:hidden で切られるので、
     左右に12pxずつ逃げ幅を作る。負のマージンで相殺するので、
     見た目の列幅（340px）は変わらない */
  .hero__news-track{height:var(--news-track-h);margin-inline:-12px;padding-inline:12px;
    /* フェード幅を広く取ると前後のカードが透明域に飲まれるので、上下とも5%に留める */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}
  .hero__news-list{display:flex;flex-direction:column;gap:56px;will-change:transform}

  .hero__news-card{position:static;top:auto;left:auto;
    flex:0 0 auto;flex-direction:column;
    width:100%;max-width:none;margin-inline:0;
    opacity:1;pointer-events:auto;
    background:none;border-radius:0;overflow:visible;box-shadow:none;
    transition:none;transform:none}
  /* 角丸を付けるのはサムネイルだけ。16/9 の高さを8割に詰めた比率（9 × .8 = 7.2 → 20/9） */
  .hero__news-card-thumb{flex:none;width:100%;aspect-ratio:20/9;min-height:auto;
    border-radius:8px;overflow:hidden}
  .hero__news-card-body{display:block;flex:none;min-width:0;padding:0}
  /* 日付の枠：地が方眼なので背景は不透明の白で塞ぐ。枠線はブランドのネイビー */
  .hero__news-card-date{margin:16px 0 0;padding:2px 8px;
    line-height:1.6;background:var(--white);border:1px solid var(--navy);border-radius:2px}
  .hero__news-card-title{margin:12px 0 0;font-size:var(--fs-card);-webkit-line-clamp:3}
}

/* ホバーで持ち上げる。PCはカードの箱（枠・影）を持たないので、
   拡大だけだと比較対象が無く、数％では気づかれない。
   実績カードと同じくサムネに影を落として、浮いたことを分かるようにする */
@media (hover:hover){
  .hero__news-card{transition:opacity .35s ease,transform .3s ease}
  .hero__news-card:hover{transform:scale(1.05)}
  .hero__news-card-thumb{transition:box-shadow .3s ease}
  .hero__news-card:hover .hero__news-card-thumb{box-shadow:0 12px 28px rgba(10,20,48,.18)}
}

/* --- SP: prev / next ボタン（左右） --- */
/* 当たり判定は44px角（SPのタップ領域の下限）。見た目の丸は ::before の28px。
   ボタン自体を28pxにすると押しにくく、44pxの丸にするとカードに寄りすぎる */
.hero__news-prev,.hero__news-next{position:absolute;top:50%;z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  color:var(--gray-600);
  background:none;border:none;
  cursor:pointer;transform:translateY(-50%)}
.hero__news-prev::before,.hero__news-next::before{content:"";position:absolute;
  width:28px;height:28px;
  background:rgba(255,255,255,.7);border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.1);backdrop-filter:blur(4px)}
.hero__news-prev{left:-12px}
.hero__news-next{right:-12px}
.hero__news-prev svg,.hero__news-next svg{position:relative;width:16px;height:16px}
/* PC: 丸いアウトラインボタンにして、帯の上端と下端に重ねる */
@media (min-width:64em){
  /* PCは見た目の丸をボタン自体に持たせるので、::before は使わない */
  .hero__news-prev::before,.hero__news-next::before{content:none}
  .hero__news-prev,.hero__news-next{left:50%;right:auto;
    width:48px;height:48px;margin:0;
    background:var(--white);border:1px solid var(--gray-200);border-radius:50%;
    box-shadow:0 1px 6px rgba(0,0,0,.06);backdrop-filter:none;
    transition:background .2s,color .2s,border-color .2s;transform:translateX(-50%)}
  .hero__news-prev{top:0;bottom:auto}
  .hero__news-next{top:auto;bottom:32px}
  /* 左右向きのシェブロンを上下向きにする */
  .hero__news-prev svg,.hero__news-next svg{width:20px;height:20px;transform:rotate(90deg)}
}
@media (min-width:64em) and (hover:hover){
  .hero__news-prev:hover,.hero__news-next:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
}

/* ---- 06. S2 建設に強い（スリムな帯） ---- */
.strength-band::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--navy-mid))}
.strength-band{position:relative;overflow:hidden;padding:var(--sec-y) var(--gutter);
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-mid) 55%,var(--navy) 100%);color:#fff}
.strength-band__inner{position:relative;z-index:1;max-width:1280px;margin-inline:auto;
  display:grid;grid-template-columns:1fr;
  /* 線の上下が左右のマージンと同じ余白になるよう、間隔を --gutter の2倍にする */
  gap:calc(var(--gutter) * 2)}
/* 旧版は見出しが短かったので左を狭くしていた（1fr 1.3fr）。
   A案は引用が見出しの位置に来るぶん、左を少し広げる */
@media (min-width:64em){.strength-band__inner{grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
  /* ラベルの高さぶん本文を下げ、タイトルの1行目と天地を揃える */
  .strength-band__body{padding-top:calc(11px + 8px)}}
.strength-band__label{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.3em;
  color:var(--blue-light);margin:0 0 8px;line-height:1}
.strength-band__title{font-family:var(--font-ja);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.4;color:#fff;margin:0;letter-spacing:.02em}
/* 見出しは白一色。ラベルの Why KGS と同じ水色だと視線が散る */
.strength-band__title em{font-style:normal;color:inherit}
/* 2026-09-10 A案：引用が見出しの位置に入る。
   2文の対句なので、どこで折り返るかを字数まかせにすると対に見えない。
   1文＝2行と決め打ちし、文と文のあいだを空けて塊で読ませる。
   text-indent の負値は、行頭の「を欄外に逃がして本文の左端と字面を揃えるため
   （＝ぶら下げ。padding で相殺すると今度は2行目が下がってしまう） */
.strength-band__title--quote{font-size:clamp(1.1875rem,2.4vw,2rem);line-height:1.7;
  letter-spacing:0}
/* 引用符。SPだけに出す。
   PCは左右2カラムで、引用の1行目と右カラム本文の1行目の天地を揃えている。
   ここに記号が入るとその分だけ引用が下がり、揃えようとすると右カラムの上に
   大きな空きが出る。だからPCでは出さない（display:none） */
.strength-band__mark{display:block;width:36px;height:auto;margin:20px 0 18px;
  fill:var(--blue-light)}
@media (min-width:64em){.strength-band__mark{display:none}}

/* 背景に敷くほうの引用符。SPでは出さない（文字の下に大きな図形が来ると読みにくい）。
   引用の右下に、閉じ引用のつもりで左右反転して置く。
   z-index を持たせず position だけで前後を決めると本文より前に出てしまうので、
   親に stacking context を作って -1 に落とす。
   色は白の 7%。これ以上濃いと方眼と喧嘩して背景に見えなくなる */
.strength-band__mark--bg{display:none}
@media (min-width:64em){
  .strength-band__head{position:relative;z-index:0}
  .strength-band__mark--bg{display:block;position:absolute;z-index:-1;
    /* 文字に重なってよい前提。右端に寄せると右カラムに近すぎるので内側へ寄せる */
    right:16%;bottom:-44px;width:clamp(150px,13vw,200px);height:auto;margin:0;
    transform:scaleX(-1);fill:rgba(255,255,255,.07);pointer-events:none}
}

/* text-indent は継承するので、各行に 0 を置いてから先頭の1つだけ戻す。
   これをしないと2文目の頭（制）まで欄外へ出て、字面の左端が揃わない */
.strength-band__quote-line{display:block;text-indent:0}
.strength-band__quote-line:first-child{text-indent:-.55em}
.strength-band__quote-line + .strength-band__quote-line{margin-top:.7em}
.strength-band__body{position:relative;display:flex;flex-direction:column;gap:24px}
/* タイトルとの境目。行間を詰めて字色を白で揃えたぶん切れ目が弱くなったので、
   細い線で受ける。端に向けて消すことで、区切りが硬くなりすぎないようにする */
.strength-band__body::before{content:"";position:absolute;left:0;right:0;
  top:calc(var(--gutter) * -1);height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,0))}
/* PCはタイトルと本文が左右に分かれていて境目が明確なので、線は出さない */
@media (min-width:64em){
  .strength-band__body::before{display:none}
}
.strength-band__note{margin:0;font-size:1rem;line-height:1.8;color:#fff}

/* ---- 07. S3 実績 ---- */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--gap-card)}
@media (min-width:48em){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.card-grid--3{grid-template-columns:repeat(3,1fr)}}
.card-grid--2{grid-template-columns:1fr}
@media (min-width:48em){.card-grid--2{grid-template-columns:repeat(2,1fr)}}
.uc-card{position:relative;display:block;width:100%;text-align:left;background:var(--white);
  border:1px solid var(--gray-200);border-radius:4px;overflow:hidden;
  transition:transform .22s,box-shadow .22s,border-color .3s}
.uc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--navy),var(--blue));transform:scaleX(0);
  transform-origin:left center;transition:transform .3s}
@media (hover:hover){
  .uc-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(10,20,48,.1);border-color:transparent}
  .uc-card:hover::before{transform:scaleX(1)}
  .uc-card:hover .uc-card__thumb img{filter:grayscale(0);transform:scale(1.04)}
  .uc-card:hover .uc-card__arrow{opacity:1;gap:8px}
}
/* タッチ端末：スクロールで画面中央に来たカードを、ホバーと同じ見え方にする。
   浮き上がり（transform）はスクロール中にガタつくため入れない */
.uc-card.is-focus{box-shadow:0 16px 32px rgba(10,20,48,.1);border-color:transparent}
.uc-card.is-focus::before{transform:scaleX(1)}
.uc-card.is-focus .uc-card__thumb img{filter:grayscale(0)}
.uc-card.is-focus .uc-card__arrow{opacity:1;gap:8px}
.uc-card__thumb{width:100%;aspect-ratio:16/9;background:var(--gray-100);overflow:hidden}
.uc-card__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:filter .3s,transform .3s}
.uc-card__body{padding:var(--pad-card)}
.uc-card__meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.uc-card__client{font-family:var(--font-en);font-size:var(--fs-caption);font-weight:600;
  letter-spacing:.05em;color:var(--gray-400)}
.uc-card__tag{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));padding:4px 8px;border-radius:1px}
.uc-card__ttl{font-size:var(--fs-card);font-weight:500;line-height:1.55;color:var(--gray-800);margin:0}
/* ---------------------------------------------------------
   07b. PR動画
   --------------------------------------------------------- */
/* サムネイルだけ先に出し、クリックされてから YouTube を読み込む。
   iframe を最初から置くと、まだ再生しない人の表示まで遅くなるため */
.movie{position:relative;width:100%;max-width:960px;margin-inline:auto;
  aspect-ratio:16/9;background:var(--gray-100);border-radius:4px;overflow:hidden}
.movie__poster{position:relative;display:block;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer}
.movie__poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.movie__poster::after{content:"";position:absolute;inset:0;
  background:rgba(9,18,85,.35);transition:background .3s}
/* 再生ボタンだけは正円。三角と円は再生の記号として世界共通なので、
   サイト共通の角丸4pxの例外にする */
.movie__btn{position:absolute;top:50%;left:50%;z-index:1;
  display:grid;place-items:center;width:64px;height:64px;
  background:rgba(255,255,255,.92);border-radius:50%;
  transform:translate(-50%,-50%);transition:transform .3s,background .3s}
@media (min-width:64em){.movie__btn{width:80px;height:80px}}
.movie__btn::before{content:"";width:0;height:0;margin-left:5px;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid var(--navy)}
@media (min-width:64em){.movie__btn::before{
  border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:23px solid var(--navy)}}
.movie__time{position:absolute;right:12px;bottom:12px;z-index:1;
  padding:4px 10px;background:rgba(9,18,85,.85);border-radius:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--white)}
@media (hover:hover){
  .movie__poster:hover img{transform:scale(1.04)}
  .movie__poster:hover::after{background:rgba(9,18,85,.18)}
  .movie__poster:hover .movie__btn{transform:translate(-50%,-50%) scale(1.06);background:var(--white)}
}
.movie iframe,
.movie video{display:block;width:100%;height:100%;border:0;background:#000}
/* 音が出ることの断り書き。読めればよいので、あえて目立たせない */
.movie__note{max-width:960px;margin:12px auto 0;font-size:var(--fs-caption);
  line-height:1.6;color:var(--gray-400)}

/* 事業内容の VIEW DETAIL と同じ組みにする（英字ラベルなので font-en・字間広め） */
.uc-card__arrow{display:flex;align-items:center;justify-content:flex-end;margin:8px 0 0;
  font-family:var(--font-en);font-weight:700;font-size:var(--fs-caption);letter-spacing:.18em;
  color:var(--blue-text);gap:4px;opacity:.6;transition:opacity .2s,gap .2s}
.uc-card__arrow::after{content:"→"}

/* ---- 08. S4 事業内容 ---- */
.domain-list{display:grid;grid-template-columns:1fr;gap:var(--gap-card)}
@media (min-width:48em){.domain-list{grid-template-columns:repeat(3,1fr)}}
.domain-card{width:100%;text-align:left;display:block;border-radius:4px;overflow:hidden;
  border:1px solid var(--gray-200)}
.domain-card__head{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:200px;padding:24px;overflow:hidden;width:100%;text-align:left}
@media (min-width:48em){.domain-card__head{height:280px}}
@media (min-width:64em){.domain-card__head{height:384px}}
/* 写真をゆっくり寄せる。実績カードと反応の強さを揃えるため */
.domain-card__ph{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s ease}
.domain-card__ph--consulting{background-image:url('/assets/img/service/consulting.webp')}
.domain-card__ph--creative{background-image:url('/assets/img/service/creative.webp')}
.domain-card__ph--flagship{background-image:url('/assets/img/service/flagship.webp')}
.domain-card__overlay{position:absolute;inset:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(9,18,85,.42) 0%,rgba(9,18,85,.52) 45%,rgba(9,18,85,.88) 100%)}
.domain-card__content{position:relative;z-index:1}
.domain-card__name{font-family:var(--font-en);font-weight:800;font-size:22px;letter-spacing:.06em;
  color:#fff;margin:0 0 8px;line-height:1.2}
.domain-card__desc{margin:0 0 8px;font-size:var(--fs-card);color:rgba(255,255,255,.82);line-height:var(--lh-dense)}
/* 3枚を横に並べたとき、説明が1行のカードだけ見出しが下がるのを防ぐ。
   2行ぶんの高さを確保して、名前と VIEW DETAIL の位置を揃える */
@media (min-width:48em){
  .domain-card__desc{min-height:calc(var(--fs-card) * var(--lh-dense) * 2)}}
.domain-card__arrow{display:inline-block;font-family:var(--font-en);font-weight:700;
  font-size:var(--fs-caption);letter-spacing:.18em;color:var(--blue-light);
  transition:transform .25s ease}
.domain-card{transition:transform .3s ease,box-shadow .3s ease}
.domain-card.is-expanded .domain-card__overlay{opacity:1}
@media (hover:hover){
  .domain-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(9,18,85,.18)}
  .domain-card:hover .domain-card__ph{transform:scale(1.06)}
  .domain-card:hover .domain-card__overlay{opacity:.7}
  .domain-card:hover .domain-card__arrow{transform:translateX(6px)}
}
/* タッチ端末はスクロールで焦点が合ったときに同じ見え方にする */
.domain-card.is-focus .domain-card__overlay{opacity:.7}
.domain-card.is-focus .domain-card__ph{transform:scale(1.04)}
.domain-card.is-focus .domain-card__arrow{transform:translateX(6px)}
.domain-card__panel{display:none;padding:24px;background:var(--white)}
.domain-card.is-expanded .domain-card__panel{display:block}
.domain-card__panel dl{margin:0;display:flex;flex-direction:column;gap:16px}
.domain-card__panel dt{font-family:var(--font-ja);font-weight:700;font-size:var(--fs-card);
  color:var(--navy-dark);margin-bottom:0}
.domain-card__panel dd{margin:0;font-size:var(--fs-card);line-height:var(--lh-dense);color:var(--gray-600)}

.cat-list{display:grid;grid-template-columns:1fr;gap:var(--gap-card)}
@media (min-width:48em){.cat-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.cat-list{grid-template-columns:repeat(4,1fr)}}
.cat-card{position:relative;overflow:hidden;background:var(--white);
  border:1px solid var(--gray-200);border-radius:4px;padding:var(--pad-card)}
.cat-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue));transform:scaleX(0);transform-origin:left center}
.cat-card__no{display:block;font-family:var(--font-en);font-size:40px;font-weight:800;
  line-height:1;letter-spacing:.02em;color:var(--blue-pale);margin-bottom:8px}
.cat-card__ttl{font-family:var(--font-ja);font-weight:700;font-size:var(--fs-h4);
  line-height:1.5;color:var(--navy-dark);margin:0 0 8px}
.cat-card__desc{margin:0;font-size:var(--fs-card);line-height:var(--lh-dense)}

.st-list{display:grid;grid-template-columns:repeat(2,1fr);
  /* ⚠️ row-gap は 0 固定。カード1枚が2行を占めるので、row-gap を入れると
     その隙間がカードの内側（ネイビーの帯と白い本文のあいだ）に開いてしまう。
     カード同士の縦の間隔は下の margin-bottom で作り、
     最終行のぶんをリスト側の負のマージンで打ち消す */
  column-gap:var(--gap-card);row-gap:0;grid-auto-rows:auto;
  margin-bottom:calc(var(--gap-card) * -1)}
@media (min-width:64em){.st-list{grid-template-columns:repeat(4,1fr)}}
/* 白地にネイビーの枠線。外側の角丸はサイト共通の4pxのまま、
   見出しブロックの下端だけ大きく丸めて、見出しと本文の境界をつくる */
.st-item{display:flex;flex-direction:column;grid-row:span 2;margin-bottom:var(--gap-card);
  background:var(--white);border:1px solid var(--navy);border-radius:4px;overflow:hidden}
/* subgrid が使えるときだけ flex から grid に切り替える。
   ⚠️ この @supports は .st-item{display:flex} より後ろに置くこと。
      前に置くと後勝ちで flex に戻り、帯の高さが揃わない */
@supports (grid-template-rows:subgrid){
  .st-item{display:grid;grid-template-rows:subgrid}
}
/* 見出しは4枚とも「英語1行＋日本語1行」なので高さは自然に揃う。min-height を使わず、
   上下を同じ padding にして帯の天地を等しくする。
   帯の下端は角丸なし。外枠の4pxとの二重の丸みをなくして直線で切る */
.st-item__head{flex:none;padding:16px;
  /* グラデーションはやめてベタ塗り。枠線と同じ --navy にして、
     カード全体が1色でまとまるようにする */
  background:var(--navy)}
@media (min-width:64em){.st-item__head{padding:20px}}
/* 日本語見出しの上に小さく英語を置く。担当領域（CONSULTING/CREATIVE/OPERATION）の表示。
   色は --blue-pale。--blue-light だとネイビー地に対して3.2:1しかなく、
   11pxの文字には足りない（--blue-pale なら約5.8:1） */
.st-item__en{font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;line-height:1.4;color:var(--blue-pale);margin:0 0 6px}
@media (min-width:64em){.st-item__en{margin-bottom:8px}}
/* 見出しは大きく。小さいとネイビーの面が空いて見え、カードが痩せる */
.st-item__ttl{font-family:var(--font-ja);font-weight:700;font-size:1.0625rem;line-height:1.55;
  letter-spacing:.01em;color:var(--white);margin:0}
@media (min-width:64em){.st-item__ttl{font-size:1.625rem;line-height:1.5}}
.st-item__body{padding:16px}
@media (min-width:64em){.st-item__body{padding:20px}}
.st-item__txt{margin:0;font-size:0.875rem;line-height:1.9;color:var(--navy-dark)}
/* 2026-09-11 カード本文の「知」は四角をやめた。本文は左から右へ流して読む場所で、
   行の中にベタ塗りの箱があると読みが止まる（14pxの行に対して四角は16.8pxあり、
   行から膨らむ）。四角はFVの1か所だけにして、そこを見せ場にする。
   カードは span を残してあるので、下の .flow__key を生かせば戻せる */
.flow__key{font-style:normal;font-weight:inherit}

/* ---- 08b. ナレッジシェア支援：4ステップの流れ ---- */
/* 背景は --navy を白に混ぜた4段。左から右へ濃くなり、最後だけベタで着地させる。
   文字色は各段でコントラストを実測して決めている（いずれも4.5:1以上）：
     step1 #d9e6f2 → --navy-dark 11.3:1 ／ step2 #a6c5e1 → 8.0:1 ／ step3 #669ccc → 4.9:1
     step4 --navy → 白 6.9:1、--blue-pale 6.3:1
   ⚠️ step3 の上に --navy を置くと 2.4:1 しかない。英語も --navy-dark にすること */
.flow{--step1:#d9e6f2;--step2:#a6c5e1;--step3:#669ccc;
  list-style:none;margin:0;padding:0;display:grid;gap:12px}
.flow__item{display:flex;flex-direction:column;min-width:0}
.flow__step{margin:0 0 6px;font-family:var(--font-en);line-height:1;color:var(--navy)}
.flow__step-label{display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.18em}
.flow__step-no{display:block;font-size:1.75rem;font-weight:800;letter-spacing:.02em;margin-top:2px}
/* SPは下向きの矢羽根にして縦に流す。最後の1枚だけ切っ先をなくして流れを止める */
.flow__box{flex:1;background:var(--step1);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px));
  padding:16px 16px 30px}
.flow__item:nth-child(2) .flow__box{background:var(--step2)}
.flow__item:nth-child(3) .flow__box{background:var(--step3)}
.flow__item:nth-child(4) .flow__box{background:var(--navy);clip-path:none;padding-bottom:16px}
.flow__en{margin:0 0 4px;font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;line-height:1.4;color:var(--navy-dark)}
.flow__ttl{margin:0 0 8px;font-family:var(--font-ja);font-weight:700;font-size:1.0625rem;
  line-height:1.5;letter-spacing:.01em;color:var(--navy-dark)}
.flow__txt{margin:0;font-size:0.875rem;line-height:1.9;color:var(--navy-dark)}
/* 各段の担当領域。FVの .tag-pill と同じ角丸4pxだが、
   ⚠️ 色は currentColor。段ごとに本文色が違う（1〜3段は濃紺、4段目は白）ので、
      固定色にするとどこかで必ずコントラストが落ちる。背景は敷かない。
   ⚠️ .flow__txt の外側にあるので、4段目の白文字指定にこの要素も含めること */
.flow__tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;
  list-style:none;color:var(--navy-dark)}
.flow__tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;
  border:1px solid currentColor;font-size:var(--fs-label);font-weight:700;
  line-height:1.4;letter-spacing:.02em;white-space:nowrap}
/* 4段の本文に1文字ずつ出てくる「知」を拾う。FVの「散らばる『知』を、」と同じ語。
   ⚠️ 色は変えないこと。背景が4段階あり、どの色を選んでも
      薄い段か濃い段のどちらかでコントラストが落ちる（例：--navy は step3 で2.4:1）。
      太さと下線なら currentColor のままなので4段すべてで成立する */
/* 「知」はベタの四角で抜く（枠線ではなく塗り）。
   四角の色＝本文と同じ濃さ、文字＝その段の背景色。
   段ごとに背景が違うので、抜き文字の色も段ごとに持たせる。
   コントラストは枠線版と同じ組み合わせなので step1 11.3:1／step2 8.0:1／
   step3 4.9:1／step4 6.9:1 で、いずれも4.5:1以上 */
/* 四角を戻すときに使う段ごとの色。いまは .flow__key が使っていない
.flow__box{--key-ink:var(--navy-dark);--key-paper:var(--step1)}
.flow__item:nth-child(2) .flow__box{--key-paper:var(--step2)}
.flow__item:nth-child(3) .flow__box{--key-paper:var(--step3)}
.flow__item:nth-child(4) .flow__box{--key-ink:var(--white);--key-paper:var(--navy)}
*/
/* 一文字を四角で抜く共通の形。FVの「知」と4段の本文で使う。
   padding で囲うと文字の左右と上下で余白が変わって四角が横長になるので、
   幅と高さに同じ em を持たせて中央に置く。
   1.2em は字面（約0.9em）に対する余白が最小限で、行間の文字に触れない上限。
   左右マージンの相殺は、四角のぶん行が詰まって
   末尾に「す。」だけ落ちる折り返しが出るのを防ぐため。
   vertical-align は実測値。四角の天地中心を前後の漢字の字面中心に合わせている */
/* 2026-09-11 カード本文の「知」は四角をやめた。本文は左から右へ流して読む場所で、
   行の中にベタ塗りの箱があると読みが止まる（14pxの行に対して四角は16.8pxあり、
   行から膨らむ）。四角はFVの1か所だけにして、そこを見せ場にする。
   カードは span を残してあるので、下の .flow__key を生かせば戻せる */
.flow__key{font-style:normal;font-weight:inherit}
/* 「知」を四角で抜く。
   ⚠️ 四角を「文字の入った箱」として作ると、中央寄せの基準が書体の ascent/descent に
      なるため、同じ Noto Sans JP でも配信元（Google Fonts の可変版／静的版）で
      位置が変わる。実機で左下にずれたのはこれが原因。
   そこで四角は疑似要素で描き、vertical-align＝ベースライン基準で置く。
   和文書体の字面（＝仮想ボディ）はベースラインの -0.12em〜+0.88em に入る約束なので、
   上下 0.1em ずつの余白を足した 1.2em 角を -0.22em に沈めれば天地が揃う。
   ベースラインは書体が変わっても動かないので、この置き方なら metric に依存しない。
   横は、和文1文字の送りが 1em で字面がその中央にあることを使う：
   四角(1.2em)を描いたあと margin-right:-1.1em でペンを戻し、文字を 0.1em 内側から描く */
.hero__title--ja{position:relative;z-index:0}
/* margin-right は四角の左右の余白を目で見て等しくするためのもの。
   四角(1.2em)は文字の送り(1em)より広いので、何もしないと右だけ詰まる。
   前後の「る」「を」のインクから四角の辺までを8倍解像度で測って決めた値 */
.hero__title-em{font-style:normal;font-weight:700;letter-spacing:0;
  margin-right:.15em;color:var(--key-paper)}
.hero__title-em::before{content:"";display:inline-block;
  /* margin-right の -1.065em は実測値。理屈では -1.1em（＝四角1.2em − 余白0.1em）だが、
     この書体の「知」の字面が送りの中央よりわずかに左にあるぶんを足している */
  width:1.2em;height:1.2em;margin-right:-1.065em;vertical-align:-.22em;
  background:var(--key-ink);position:relative;z-index:-1}
.flow__item:nth-child(4) :is(.flow__ttl,.flow__txt,.flow__tags){color:var(--white)}
.flow__item:nth-child(4) .flow__en{color:var(--blue-pale)}
@media (min-width:64em){
  /* PCは右向きの矢羽根を横一列に。切っ先の分だけ次を左へ寄せて噛み合わせる */
  .flow{display:flex;gap:0}
  .flow__item{flex:1 1 0}
  .flow__item + .flow__item{margin-left:-24px}
  .flow__step-no{font-size:2.25rem}
  .flow__box{padding:20px 32px 24px 48px;
    clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%,24px 50%)}
  /* 先頭だけ左の切り欠きをなくして、流れの起点にする */
  .flow__item:first-child .flow__box{padding-left:28px;
    clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%)}
  .flow__item:nth-child(4) .flow__box{padding-bottom:24px;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%,24px 50%)}
  .flow__ttl{font-size:1.25rem}
}

/* ---- 09. S5 メンバー ---- */
/* コアメンバーとプロジェクトパートナーを見出しで分ける。
   ⚠️ パートナーはKGSの社員ではない。バッジだけだと見落とされるので、
      見出しと注記のレベルで区別すること（main.js renderMembers と対） */
.member-group + .member-group{margin-top:var(--sec-y)}
.member-group__ttl{margin:0;font-size:var(--fs-h4);font-weight:700;color:var(--navy-dark)}
.member-group__note{margin:8px 0 0;font-size:var(--fs-caption);color:var(--gray-600)}
.member-group__head + .member-list{margin-top:20px}
/* 5人以上のときだけ横スクロール（main.js が member-list--scroll を付ける）。
   4カラムに収まらず最後の1人が次行に取り残されるのを避けるため。
   ⚠️ 詳細度に注意。後ろの .member-list{display:grid} に負けるので2クラスで書く。
   ⚠️ overflow-x:auto は上下左右すべてを切る。カードはホバーで8px浮き、影は
      0 16px 40px なので下へ28px・左右へ20px はみ出す。この逃げ幅を padding で
      確保し、同じ量の負マージンで打ち消している（見た目の位置は変わらない）。
      数値を小さくすると影がまた途中で切れるので減らさないこと。
      ネイティブのスクロールバーは下端＝影の逃げ幅のさらに下に出て離れて見えるため隠し、
      右端のぼかしと「横にスクロールできます」でスクロールできることを示す */
/* 逃げ幅の計算が合うよう、直前の見出しブロックのマージンは殺す */
.member-group__head:has(+ .member-list--scroll){margin-bottom:0}
.member-list.member-list--scroll{display:flex;gap:var(--gap-card);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin:4px calc((var(--gutter) + 24px) * -1) -44px -24px;
  padding:28px 24px 44px;
  /* ⚠️ これが無いと scroll-snap が padding-left を無視して24px分スクロールし、
     左端がグリッドとずれる */
  scroll-padding-left:24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* 右端をぼかして「まだ続く」ことを見せる。最後までスクロールすると消える */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 64px),transparent 100%)}
.member-list.member-list--scroll:has(> :last-child:hover),
.member-list.member-list--scroll:focus-within{-webkit-mask-image:none;mask-image:none}
/* カード幅は4カラムのグリッドと同じ。5枚目がのぞくのでスクロールできると分かる */
.member-list.member-list--scroll > *{flex:0 0 min(70%,240px);scroll-snap-align:start}
@media (min-width:64em){
  /* 右の負のマージンぶん親が広いので、その幅を引いてグリッドと同じカード幅にする */
  .member-list.member-list--scroll > *{flex:0 0 calc((100% - var(--gutter) - var(--gap-card) * 3) / 4)}
}
.member-list.member-list--scroll > :last-child{margin-right:var(--gutter)}
.member-list.member-list--scroll::-webkit-scrollbar{display:none}
/* 横スクロール列の前後ボタン。見出しの右に置く。
   ⚠️ 文章で「横にスクロールできます」と書かないこと。ボタンで示す。
   ⚠️ スマホは指でなぞれるので出さない（44pxのボタン2つは幅を食いすぎる） */
.member-group__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.carousel-nav{display:none;gap:8px;flex:none}
@media (min-width:48em){.carousel-nav{display:flex}}
.carousel-nav__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--gray-200);
  background:var(--white);color:var(--navy);display:grid;place-items:center;cursor:pointer;
  font-size:1rem;line-height:1;
  transition:background .25s,border-color .25s,color .25s,opacity .25s,transform .18s}
.carousel-nav__btn--prev::after{content:"\2190"}
.carousel-nav__btn--next::after{content:"\2192"}
.carousel-nav__btn:disabled{opacity:.3;cursor:default}
/* 押した手応え。ボタン自体が少し沈む */
.carousel-nav__btn:not(:disabled):active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.carousel-nav__btn{transition:none}
  .carousel-nav__btn:not(:disabled):active{transform:none}}
@media (hover:hover){
  .carousel-nav__btn:not(:disabled):hover{background:var(--navy);border-color:transparent;color:var(--white)}
}
.member-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-card)}
@media (min-width:64em){.member-list{grid-template-columns:repeat(4,1fr)}}
.member-card{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;background:var(--white);
  border:1px solid var(--gray-200);border-radius:4px;overflow:hidden;
  transition:box-shadow .3s,transform .3s,border-color .3s}
/* ⚠️ --link はトップだけ（押すとメンバーページへ）。
   メンバーページのカード（--static）はどこへも飛ばないので、動かさないこと */
.member-card--link{color:inherit;text-decoration:none}
.member-card--link::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--navy),var(--blue));transform:scaleX(0);
  transform-origin:left center;transition:transform .3s}
@media (hover:hover){
  .member-card--link:hover{box-shadow:0 16px 40px rgba(13,27,110,.12);transform:translateY(-8px);border-color:transparent}
  .member-card--link:hover::before{transform:scaleX(1)}
}
.member-card--link.is-focus{box-shadow:0 16px 40px rgba(13,27,110,.12);border-color:transparent}
.member-card--link.is-focus::before{transform:scaleX(1)}
/* 右下の矢印。「このカードは押せる」の合図なので、文言は置かない。
   ⚠️ ↗ は字形がフォント任せで崩れるため、サイト共通の → を45度回して使う */
.member-card--link .member-card__body{padding-bottom:calc(var(--pad-card) + 22px)}
.member-card__arrow{position:absolute;right:var(--pad-card);bottom:calc(var(--pad-card) - 4px);
  display:grid;place-items:center;width:20px;height:20px;
  font-size:1.0625rem;line-height:1;color:var(--blue);transition:transform .3s}
.member-card__arrow::after{content:"→";display:block;transform:rotate(-45deg)}
@media (hover:hover){.member-card--link:hover .member-card__arrow{transform:translate(3px,-3px)}}
.member-card__photo{aspect-ratio:3/4;background:var(--gray-100);overflow:hidden}
.member-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.member-card__body{padding:var(--pad-card);flex:1}
.member-card__name{font-family:var(--font-en);font-size:var(--fs-h4);font-weight:800;
  color:var(--navy-dark);margin:0 0 8px;line-height:1.2}
/* 氏名を日本語にしたので、日本語版だけ和文フォントに。
   欧文フォント指定のままだと氏名がフォールバックしてウェイトが揃わない */
[lang="ja"] .member-card__name{font-family:var(--font-ja);font-weight:700;letter-spacing:.02em}
.member-card__role{font-size:var(--fs-caption);color:var(--gray-600);margin:0 0 8px}
/* ⚠️ トップのメンバーカードでは使っていない（役職と内容が重複するため）。
   モーダルや個人ページで使う想定で残してある */
.member-card__tags{display:flex;flex-wrap:wrap;gap:8px}
.member-card__tag{font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.05em;
  padding:4px 8px;background:var(--blue-pale);color:var(--navy);border-radius:2px}

/* ---- 10. S6 お知らせ（横スクロール） ---- */
/* 左端は他セクションと揃え、右端だけ画面外へ抜けるようにする */
.news-scroll{display:flex;gap:var(--gap-card);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 0 16px;margin:0 calc(var(--gutter) * -1) 0 0;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--gray-400) transparent}
.news-scroll > :last-child{margin-right:var(--gutter)}
.news-scroll::-webkit-scrollbar{height:8px}
.news-scroll::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:8px}
.news-scroll::-webkit-scrollbar-track{background:var(--gray-200);border-radius:8px}
/* お知らせ一覧ページ。トップは横スクロール、一覧ページはグリッドで同じカードを使う。
   ⚠️ .news-card の flex 指定はグリッドの子では効かないので、打ち消し不要 */
.news-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media (min-width:48em){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.news-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.news-card{position:relative;flex:0 0 280px;scroll-snap-align:start;background:var(--white);
  border:1px solid var(--gray-200);border-radius:4px;overflow:hidden;
  transition:transform .22s,box-shadow .22s}
@media (min-width:48em){.news-card{flex:0 0 360px}}
@media (hover:hover){.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(10,20,48,.1)}}
.news-card.is-focus{box-shadow:0 16px 32px rgba(10,20,48,.1)}
.news-card__thumb{aspect-ratio:16/9;background:var(--gray-100);overflow:hidden}
.news-card__thumb img{width:100%;height:100%;object-fit:cover}
.news-card__thumb--logo{background:#000}
.news-card__thumb--logo img{object-fit:contain;padding:24px}
.news-card__body{padding:var(--pad-card)}
.news-card__meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.news-card__date{font-family:var(--font-en);font-size:var(--fs-caption);font-weight:600;letter-spacing:.05em;color:var(--gray-400)}
.news-card__cat{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#fff;background:linear-gradient(135deg,var(--navy),var(--blue));padding:4px 8px;border-radius:1px}
.news-card__ttl{font-size:var(--fs-card);font-weight:500;line-height:1.55;color:var(--gray-800);margin:0}
.news-hint{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-family:var(--font-en);
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--gray-400)}

/* ---- 11. S7 お問い合わせ ---- */
.contact{position:relative;overflow:hidden;padding:var(--sec-y) var(--gutter);
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-mid) 50%,var(--navy) 100%)}
.contact__grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:48em){.contact__grid{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field__label{font-size:var(--fs-caption);font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.field__req{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--blue-light)}
.field__opt{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.15em;color:rgba(255,255,255,.45)}
.field input,.field select,.field textarea{width:100%;min-height:56px;padding:16px;
  font-family:var(--font-ja);font-size:1rem;line-height:1.5;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.3);border-radius:2px;transition:border-color .2s,background .2s}
.field textarea{min-height:144px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);
  background-position:calc(100% - 24px) 24px,calc(100% - 16px) 24px;background-size:8px 8px,8px 8px;background-repeat:no-repeat}
.field select option{background:var(--navy-dark);color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-light);
  background:rgba(255,255,255,.12);outline:2px solid rgba(77,200,245,.4)}
.contact__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__privacy{display:flex;align-items:flex-start;gap:8px;margin-top:24px;
  font-size:var(--fs-caption);color:rgba(255,255,255,.75);line-height:1.7}
.contact__privacy input{width:24px;height:24px;min-height:0;flex:none;margin-top:0;accent-color:var(--blue)}
/* 文中のリンクも指で押せるように。行の高さを崩さないよう、
   padding で当たり判定だけを広げて同じ分だけ margin で戻す */
.contact__privacy a{display:inline-block;padding:14px 2px;margin:-14px 0;
  color:var(--blue-light);text-decoration:underline}
.contact__submit{margin-top:32px}
.contact__submit .btn{width:100%}
@media (min-width:48em){.contact__submit .btn{width:auto;min-width:288px}}

/* ---- 12. S8 ABOUT ---- */
.about__inner{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media (min-width:64em){.about__inner{grid-template-columns:1fr 1.4fr;gap:48px}}
.about__logo{width:auto;max-width:112px;margin:0 0 16px}
.about__body{margin:0 0 16px;font-size:var(--fs-card);line-height:var(--lh-body)}
.company-table{width:100%;border-collapse:collapse}
.company-table tr{border-bottom:1px solid var(--gray-200)}
.company-table tr:first-child{border-top:1px solid var(--gray-200)}
.company-table th{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.15em;
  color:var(--blue-text);text-align:left;padding:16px 24px 16px 0;white-space:nowrap;width:136px;vertical-align:top}
.company-table td{font-size:var(--fs-card);color:var(--gray-800);padding:16px 0;line-height:1.7}
@media (max-width:47.99em){
  .company-table th,.company-table td{display:block;width:auto;padding:0}
  .company-table th{padding-top:16px}
  .company-table td{padding:0 0 16px}
}

/* ---- 13. フッター ---- */
.footer{background:var(--black);color:rgba(255,255,255,.7);padding:56px var(--gutter) 24px}
.footer__inner{max-width:1280px;margin-inline:auto}
.footer__top{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:40px}
@media (min-width:48em){.footer__top{grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}}
.footer__logo{width:200px;margin:0 0 16px;filter:brightness(0) invert(1)}
.footer__brand-text{margin:0;font-size:var(--fs-caption);line-height:1.9;color:rgba(255,255,255,.7)}
.footer__motto{margin:16px 0 0;font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.footer__col-title{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.28em;
  color:#fff;margin:0 0 16px}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.footer__col li{display:flex;align-items:center;gap:8px}
.footer__col li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--blue);flex:none}
/* 指で押せる高さを確保する。文字の高さのままだと25pxしかない */
.footer__col a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-caption);color:rgba(255,255,255,.7)}
@media (hover:hover){.footer__col a:hover{color:var(--blue-light)}}
.footer__bottom{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.footer__copy{font-size:var(--fs-caption);color:rgba(255,255,255,.45);margin:0}
.footer__policy{margin-left:auto;display:flex;gap:24px}
.footer__policy a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-caption);color:rgba(255,255,255,.7)}

/* ---- 13b. 言語切替のご案内（日本語以外のブラウザにだけ出す） ---- */
/* 画面下の帯ではなく、中央のダイアログにしている。
   帯は見落とされやすい（実際「一度も見ていない」という指摘が出た）。
   ⚠️ ダイアログなので、閉じる手段は3つ用意する（×・背景タップ・Escキー）。
      モーダルと同じ約束にしてある */
.lang-notice{position:fixed;inset:0;z-index:85;display:none;place-items:center;padding:var(--gutter)}
.lang-notice.is-shown{display:grid}
.lang-notice__backdrop{position:absolute;inset:0;background:rgba(9,18,85,.6);backdrop-filter:blur(3px)}
.lang-notice__panel{position:relative;width:min(420px,100%);padding:40px 28px 28px;
  text-align:center;color:#fff;background:var(--navy-dark);border-radius:4px;
  animation:fadeIn .25s ease}
.lang-notice__txt{margin:0 0 24px;font-size:1rem;line-height:1.7}
/* 2つのボタンは同じ大きさ。「どちらを押しても進める」ことを見た目で示す。
   片方だけ塗りつぶすと、もう片方が選べないように見える */
.lang-notice__actions{display:grid;gap:8px}
.lang-notice__btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 16px;
  font-family:var(--font-ja);font-weight:700;font-size:14px;line-height:1.3;
  border-radius:4px;transition:background .2s,border-color .2s,color .2s}
/* 主：白の枠線＋ごく薄い白の面。ネイビーの上で浮きすぎない */
.lang-notice__btn--yes{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.7)}
@media (hover:hover){.lang-notice__btn--yes:hover{background:rgba(255,255,255,.22)}}
/* 副：枠線だけ。押せることは分かるが、視線は主のほうへ */
.lang-notice__btn--no{color:rgba(255,255,255,.75);background:transparent;border:1px solid rgba(255,255,255,.28)}
@media (hover:hover){.lang-notice__btn--no:hover{color:#fff;border-color:rgba(255,255,255,.5)}}
.lang-notice__close{position:absolute;top:4px;right:4px;display:grid;place-items:center;
  width:44px;height:44px;font-size:20px;line-height:1;color:rgba(255,255,255,.7)}

/* ---- 14. モーダル ---- */
.modal{position:fixed;inset:0;z-index:80;display:none}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(9,18,85,.72);backdrop-filter:blur(3px)}
.modal__panel{position:absolute;inset:0;background:var(--white);overflow-y:auto;
  padding:64px var(--gutter) 56px;animation:slideUp .3s ease}
@media (min-width:48em){
  .modal__panel{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
    width:min(720px,92vw);max-height:86vh;padding:48px;border-radius:4px;animation:fadeIn .25s ease}
}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__close{position:absolute;top:16px;right:16px;width:48px;height:48px;display:grid;
  place-items:center;font-size:24px;color:var(--gray-600)}
.modal__label{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.3em;
  color:var(--blue-text);margin:0 0 8px}
.modal__title{font-family:var(--font-ja);font-weight:700;font-size:clamp(1.25rem,3vw,1.75rem);
  line-height:1.4;color:var(--navy-dark);margin:0 0 24px;padding-bottom:16px;
  border-bottom:2px solid var(--gray-200);position:relative}
.modal__title::after{content:"";position:absolute;bottom:-2px;left:0;width:64px;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue))}
.modal__body{display:flex;flex-direction:column;gap:24px}
.modal__block h4{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.25em;
  color:var(--blue-text);margin:0 0 8px}
.modal__block p{margin:0;font-size:var(--fs-card);line-height:var(--lh-body)}
body.is-locked{position:fixed;width:100%;overflow:hidden}
/* ---------------------------------------------------------
   下層ページ（プライバシーポリシー等）
   トップと同じ style.css を読み込み、この節だけを足せば増やせる
   --------------------------------------------------------- */
.legal{padding:calc(var(--header-h) + 56px) var(--gutter) 80px;background:var(--white)}
@media (min-width:64em){.legal{padding-top:calc(var(--header-h) + 88px)}}
.legal__inner{max-width:800px;margin-inline:auto}
.legal__label{font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.3em;
  color:var(--blue-text);margin:0 0 8px;line-height:1}
.legal__title{font-family:var(--font-ja);font-size:var(--fs-h2);font-weight:700;letter-spacing:.02em;
  line-height:1.3;color:var(--navy-dark);margin:0 0 24px;padding-bottom:16px;
  border-bottom:2px solid var(--gray-200);position:relative}
.legal__title::after{content:"";position:absolute;bottom:-2px;left:0;width:80px;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue))}
.legal__lead{margin:0 0 8px;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-800)}
.legal__sec{margin-top:40px}
.legal__sec h2{font-family:var(--font-ja);font-size:1.125rem;font-weight:700;line-height:1.5;
  color:var(--navy-dark);margin:0 0 12px;padding-left:12px;border-left:3px solid var(--navy)}
.legal__sec h3{font-size:var(--fs-card);font-weight:700;color:var(--navy-dark);margin:20px 0 6px}
.legal__sec p{margin:0 0 12px;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-800)}
.legal__sec ul{margin:0 0 12px;padding-left:1.25em}
.legal__sec li{font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-800);margin-bottom:4px}
.legal__note{font-size:var(--fs-caption)!important;color:var(--gray-600)!important}
.legal__table{width:100%;border-collapse:collapse}
.legal__table th,.legal__table td{border-bottom:1px solid var(--gray-200);padding:12px 0;
  font-size:var(--fs-card);line-height:1.7;text-align:left;vertical-align:top;color:var(--gray-800)}
.legal__table th{width:200px;font-weight:700;color:var(--navy-dark);padding-right:16px;
  line-break:strict}
@media (max-width:47.99em){
  .legal__table th,.legal__table td{display:block;border:0;padding:0}
  .legal__table th{width:auto;padding-top:12px}
  .legal__table td{padding-bottom:12px;border-bottom:1px solid var(--gray-200)}
}
/* ⚠️ 確定していない箇所。公開前にこのクラスを検索して、残っていないことを確認する */
.legal__todo{display:inline-block;padding:2px 8px;margin-right:4px;border-radius:2px;
  background:#fdecec;border:1px solid #e9a1a1;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:#b02a2a}
.legal__date{margin-top:48px;padding-top:16px;border-top:1px solid var(--gray-200);
  font-size:var(--fs-caption);color:var(--gray-600)}


/* ---------------------------------------------------------
   15. Cookie同意バナー
   GA4 の計測は、ここで「同意する」が押されるまで走らない。
   プライバシーポリシー第6項の「初回アクセス時におたずねします」と対になっている。
   選択は localStorage に保存し、2回目以降は出さない
   --------------------------------------------------------- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;flex-wrap:wrap;align-items:center;gap:12px 24px;
  padding:16px var(--gutter);
  background:var(--navy-dark);color:rgba(255,255,255,.88);
  font-size:var(--fs-caption);line-height:1.7}
.consent.is-shown{display:flex}
.consent__txt{flex:1 1 32ch;margin:0}
.consent__txt a{color:var(--blue-light);text-decoration:underline}
.consent__actions{display:flex;gap:8px;flex:none;margin-left:auto}
.consent__btn{padding:10px 20px;border-radius:4px;
  font-family:inherit;font-size:var(--fs-caption);font-weight:700;line-height:1;
  white-space:nowrap;cursor:pointer}
.consent__btn--yes{background:var(--white);color:var(--navy-dark);border:1px solid var(--white)}
.consent__btn--no{background:transparent;color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.45)}
@media (hover:hover){
  .consent__btn--yes:hover{background:var(--blue-pale)}
  .consent__btn--no:hover{background:rgba(255,255,255,.12)}
}
@media (max-width:47.99em){
  .consent__actions{width:100%;margin-left:0}
  .consent__btn{flex:1 1 0}
}

/* ---------------------------------------------------------
   お問い合わせフォームの送信結果（1行）
   --------------------------------------------------------- */
.contact__status{min-height:1.5em;margin:16px 0 0;text-align:center;
  font-size:var(--fs-caption);line-height:1.7;color:rgba(255,255,255,.75)}
.contact__status.is-done{color:var(--blue-light)}
.contact__status.is-error{color:#ffb4b4}

/* ---------------------------------------------------------
   16. ニュース記事ページ（/news/*.html）
   --------------------------------------------------------- */
/* ヘッダー・フッター・カード・ボタンはトップと同じものを使う。
   ここに書くのは記事本文まわりだけ。値はすべて :root のトークンから取る */

/* 記事はヒーローが紺なので、ヘッダーは最初から白で置く。
   トップは白地のFVに透過で重なる作りなので、同じ挙動だと紺の上に溶ける */
.header--solid{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom-color:var(--gray-200)}
/* ⚠️ 'is-past-hero' は main.js の initArticleHeader と対になっています。
      片方だけ変えるとヘッダーが白のままになります */
.header--solid.is-past-hero{background:var(--navy);backdrop-filter:none;
  border-bottom-color:transparent}
/* 地の明暗が入れ替わるので、ロゴ・ナビ・ボタン・旗も一緒に反転させる */
.header--solid.is-past-hero .header__logo-img--dark{display:none}
.header--solid.is-past-hero .header__logo-img--light{display:block}
.header--solid.is-past-hero .header__nav a{color:var(--white)}
.header--solid.is-past-hero .header__nav a.is-active{color:var(--blue-light);border-bottom-color:var(--blue-light)}
/* 紺地の上では紺ボタンが沈むので白抜きにする */
.header--solid.is-past-hero .header__cta{color:var(--navy);background:var(--white);border-color:var(--white)}
.header--solid.is-past-hero .header__lang a,
.header--solid.is-past-hero .header__lang .is-current{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.header--solid.is-past-hero .header__burger span,
.header--solid.is-past-hero .header__burger span::before,
.header--solid.is-past-hero .header__burger span::after{background:var(--white)}
@media (min-width:64em) and (hover:hover){
  .header--solid.is-past-hero .header__nav a:hover{color:var(--blue-light)}
  .header--solid.is-past-hero .header__cta:hover{background:var(--blue-pale);border-color:var(--blue-pale)}
}

/* ---- 記事ヒーロー（紺帯） ---- */
.article-hero{position:relative;overflow:hidden;
  padding:calc(var(--header-h) + 40px) var(--gutter) 40px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-mid) 55%,var(--navy) 100%)}
/* 他セクションと同じ3pxのアクセント罫 */
.article-hero::after{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--navy-mid))}
.article-hero__inner{max-width:840px;margin-inline:auto}
.article-hero__meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.article-hero__date{font-family:var(--font-en);font-size:var(--fs-caption);font-weight:600;
  letter-spacing:.05em;color:rgba(255,255,255,.72)}
/* カテゴリはお知らせと同じ NEWS / INFO / EVENT。
   紺帯の上に置くので、カード側の紺グラデを反転して白地・紺文字にする */
.article-hero__cat{padding:4px 10px;
  font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  color:var(--navy-dark);background:var(--white);border-radius:2px}
.article-hero__title{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:1.6;color:var(--white)}

/* ---- アイキャッチ：帯の下。実績・ニュースと同じ16:9 ---- */
.article-eyecatch{margin:0;padding:var(--sec-y) var(--gutter) 0}
.article-eyecatch__frame{max-width:840px;margin-inline:auto;aspect-ratio:16/9;
  overflow:hidden;background:var(--gray-100);border-radius:4px}
.article-eyecatch__frame img{display:block;width:100%;height:100%;object-fit:cover}
/* ロゴのように切り抜きたくない画像 */
.article-eyecatch__frame--logo{background:var(--black)}
.article-eyecatch__frame--logo img{object-fit:contain;padding:8%}

/* ---- 本文 ---- */
.article-body{max-width:840px;margin-inline:auto;padding:var(--sec-y) var(--gutter) 0}
.article-body__lead{margin:0 0 32px;padding-left:20px;
  font-size:var(--fs-h4);font-weight:500;line-height:1.9;color:var(--gray-800);
  border-left:3px solid var(--navy)}
.article-body p{margin:0 0 28px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-800)}
.article-body h2{margin:40px 0 16px;
  font-size:var(--fs-sub);font-weight:700;line-height:1.4;color:var(--navy-dark)}
.article-body ul{margin:0 0 28px;padding-left:1.25em}
.article-body li{margin-bottom:8px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-800)}
/* ⚠️ .btn を除外している理由：この指定は .btn--navy より詳細度が高いので、
      除外しないとボタンの文字色まで --blue-text になり、紺地に約1.3:1で乗る */
.article-body a:not(.btn){color:var(--blue-text);text-underline-offset:3px}
.article-body__action{margin:0 0 28px}
/* 本文が未入稿の記事。リード文だけで下の導線に続く */
.article-body--lead-only{padding-bottom:0}

/* ---- 代表メッセージ ---- */
/* 長文なので、読み手が息をつげる場所を作るのが主目的。
   ①掲げる言葉 ②引用 ③対句の行 ④転換の1文 ⑤締め の5か所だけ扱いを変え、
   残りは同じリズムの本文で通す。文言は一字も変えていない */
.ceo-photo{display:grid;place-items:center;background:var(--gray-100);
  color:var(--gray-400);font-size:var(--fs-caption);letter-spacing:.1em}

/* ⚠️ セレクタに p を足しているのは詳細度のため。
   .article-body p（0,1,1）が効いているので、.ceo-lead（0,1,0）だけでは負けて
   本文サイズのまま表示される */
/* 冒頭の掲げる言葉。見出しではないので --font-ja のまま、大きさと行間で立てる */
p.ceo-lead{margin:0 0 20px;font-family:var(--font-ja);font-weight:700;
  font-size:clamp(1.25rem,3.2vw,1.875rem);line-height:1.7;letter-spacing:.01em;
  color:var(--navy-dark)}
p.ceo-standfirst{margin:0 0 40px;font-size:var(--fs-h4);font-weight:500;
  line-height:1.9;color:var(--gray-800)}

/* 頂いた言葉。カギ括弧を字面として持たせず、罫と余白で引用だと分かるようにする */
.ceo-quote{margin:0 0 28px;padding:4px 0 4px 20px;border-left:3px solid var(--navy)}
.ceo-quote p{margin:0;font-family:var(--font-ja);font-weight:700;
  font-size:clamp(1.0625rem,2.2vw,1.375rem);line-height:1.7;color:var(--navy-dark)}
.ceo-quote p::before{content:"「"}
.ceo-quote p::after{content:"」"}

/* 対句の行と、話が転換する1文。本文より一段大きくして、拾い読みでも目に入るようにする */
p.ceo-line{margin:36px 0 28px;font-family:var(--font-ja);font-weight:700;
  font-size:clamp(1.0625rem,2.4vw,1.5rem);line-height:1.6;
  letter-spacing:.02em;color:var(--navy)}
p.ceo-pivot{margin:36px 0 28px;font-weight:700;
  font-size:var(--fs-h4);line-height:1.9;color:var(--navy-dark)}

/* 3つの対句。行頭に短い罫を置くだけで、箇条書きの点は使わない */
.ceo-list{list-style:none;margin:0 0 28px;padding:0}
.ceo-list li{position:relative;margin:0 0 10px;padding-left:24px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-800)}
.ceo-list li::before{content:"";position:absolute;left:0;top:calc(var(--lh-body) * .5em);
  width:14px;height:2px;background:var(--blue-light)}

/* 締め。冒頭と対になるので同じ大きさに戻し、上に罫を引いて区切る */
p.ceo-close{margin:48px 0 32px;padding-top:40px;
  border-top:1px solid var(--gray-200);
  font-family:var(--font-ja);font-weight:700;
  font-size:clamp(1.125rem,2.6vw,1.625rem);line-height:1.7;
  color:var(--navy-dark)}

/* 署名は右寄せ。本文の流れから外れていることを位置で示す */
p.ceo-sign{margin:0 0 48px;text-align:right;
  font-size:var(--fs-card);line-height:2;color:var(--gray-600)}
pp.ceo-sign strong{font-size:var(--fs-body);color:var(--navy-dark)}

/* 経歴。本文ではなく資料なので、地を敷いて本文と切り離す */
.ceo-profile{margin:0;padding:24px;background:var(--off-white);border-radius:4px}
.ceo-profile > div + div{margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-200)}
.ceo-profile dt{margin:0 0 6px;font-family:var(--font-en);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.14em;color:var(--navy)}
.ceo-profile dd{margin:0;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-800)}
@media (min-width:48em){
  .ceo-profile{padding:32px}
  .ceo-profile > div{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
  .ceo-profile dt{margin:0;padding-top:4px}
}

/* ---- 記事下の導線 ---- */
.article-foot{max-width:840px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:32px var(--gutter) var(--sec-y)}
.article-foot__rule{max-width:840px;margin:32px auto 0;height:1px;background:var(--gray-200)}
/* min-height:44px は SPのタップ領域の下限。文字高だけだと19pxしかない */
.article-foot__link{display:inline-flex;align-items:center;min-height:44px;gap:8px;
  font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  color:var(--gray-600);text-decoration:none;transition:color .2s}
@media (hover:hover){.article-foot__link:hover{color:var(--navy)}}

/* ---- 関連ニュース ---- */
.related{background:var(--off-white);border-top:1px solid var(--gray-200)}
/* トップのお知らせは横スクロール。関連は最大3件なのでグリッドで置く。
   件数が2でも3でもカードの大きさが変わらないよう幅を固定して中央に寄せる */
.related__grid{display:grid;grid-template-columns:1fr;justify-content:center;
  gap:var(--gap-card);margin-top:24px}
@media (min-width:48em){.related__grid{grid-template-columns:repeat(auto-fit,minmax(0,410px))}}
.related__grid .news-card{flex:none;width:100%}

/* =========================================================
   KGSとできること（S3.5）
   先頭の1件だけ写真＋本文の横並び（PC）、残りは2カラム。
   中身は data/can-do.json から main.js renderCanDo が描く
   ========================================================= */
.cd-card{display:block;width:100%;text-align:left;background:var(--white);
  border:1px solid var(--gray-200);border-radius:4px;overflow:hidden;
  transition:box-shadow .3s,transform .3s,border-color .3s}
a.cd-card{color:inherit;text-decoration:none}
@media (hover:hover){
  a.cd-card:hover{box-shadow:0 16px 40px rgba(13,27,110,.12);transform:translateY(-6px);border-color:transparent}
  a.cd-card:hover .cd-card__photo img{transform:scale(1.03)}
}
.cd-card.is-focus{box-shadow:0 16px 40px rgba(13,27,110,.12);border-color:transparent}
.cd-card__photo{width:100%;aspect-ratio:16/9;background:var(--gray-100);overflow:hidden}
.cd-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cd-card__body{padding:var(--pad-card)}
.cd-card__kind{margin:0 0 8px;font-family:var(--font-en);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.12em;color:var(--navy)}
.cd-card__ttl{margin:0 0 10px;font-size:var(--fs-h4);font-weight:700;
  line-height:1.5;color:var(--navy-dark)}
.cd-card__desc{margin:0;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-600)}
.cd-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cd-card__tag{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border:1px solid var(--navy);border-radius:4px;color:var(--navy);white-space:nowrap}
.cd-card__more{display:inline-block;margin-top:14px;font-size:var(--fs-caption);
  font-weight:700;color:var(--navy)}
.cd-card__more::after{content:" →"}
.cd-grid{display:grid;grid-template-columns:1fr;gap:var(--gap-card)}
.cd-card--lead{margin-bottom:var(--gap-card)}
.cando__more{margin:24px 0 0;font-size:var(--fs-caption);line-height:1.9;color:var(--gray-600)}
.cando__link{margin:8px 0 0}

/* ---- 09b. サービスページ（/services.html） ---- */
/* 冒頭だけ地色をブランドカラー #005AAA に。白のボタンを浮かせるため。
   ⚠️ --navy-dark / --navy-mid は明度を振った派生色。ここでは使わないこと */
.svc-head{background:var(--navy)}
/* section--dark が面倒を見ていないラベルと導線だけ、地色に合わせて明るくする。
   ⚠️ --blue-text / --blue-light は #005AAA 上で 4.5:1 に届かないので使わない */
.svc-head .section__label,
.svc-head .section__link{color:var(--blue-pale)}
@media (hover:hover){.svc-head .section__link:hover{color:var(--white)}}
/* 目次ボタン。参考にした「文字＋小さな丸い矢印」だけだと押せると分かりにくいので、
   枠を付けてボタンにしている。
   ⚠️ スマホ3カラム／PC1行（7項目）。項目を増やすとPCで折り返すので、
      増やすときは can-do.json の nav を短くするか、列数を見直すこと */
/* ⚠️ 1fr の最小値は min-content なので、ラベルが長い列だけ広がって幅が揃わない。
   minmax(0,1fr) にして必ず等幅にすること */
.svc-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:28px 0 0}
@media (min-width:64em){.svc-nav{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:36px}}
.svc-nav__btn{display:grid;grid-template-rows:auto 1fr auto;gap:6px;min-height:104px;
  padding:12px;border:1px solid var(--gray-200);border-radius:4px;background:var(--white);
  color:var(--navy-dark);text-decoration:none;
  transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.svc-nav__no{font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.08em;line-height:1.2;color:var(--blue-text)}
/* 長いラベルが入っても枠から出ないように、どこでも折り返させる */
.svc-nav__label{font-size:var(--fs-caption);font-weight:700;line-height:1.5;letter-spacing:.01em;
  overflow-wrap:anywhere}
/* 「下のセクションへ飛ぶ」ことを示す丸い下向き矢印 */
.svc-nav__icon{justify-self:end;display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--blue-pale);transition:background .25s}
.svc-nav__icon::after{content:"\2193";font-size:12px;line-height:1;color:var(--navy)}
/* ボタンは地色の上でも白のまま。ホバーだけ薄いブルーに沈める */
@media (hover:hover){
  .svc-nav__btn:hover{background:var(--blue-pale);border-color:transparent;
    transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,43,82,.22)}
  .svc-nav__btn:hover .svc-nav__icon{background:var(--navy)}
  .svc-nav__btn:hover .svc-nav__icon::after{color:var(--white)}
}
/* 各サービス。背景を1つおきに変えて、どこで切り替わるか分かるようにする */
/* ⚠️ 目次から飛んだとき、既定の scroll-margin-top（ヘッダー高）だと
   セクション上下の余白ぶん見出しが下に沈む。余白を差し引いた位置で止める */
.svc-sec{padding:var(--sec-y) var(--gutter);
  scroll-margin-top:calc(var(--header-h) + 24px - var(--sec-y))}
.svc-sec--tint{background:var(--gray-100)}
.svc-sec__kind{margin:0 0 8px;font-family:var(--font-en);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.18em;color:var(--blue-text)}
.svc-sec__ttl{margin:0 0 24px;font-size:var(--fs-sub);font-weight:700;line-height:1.5;color:var(--navy-dark)}
.svc-sec__body{display:grid;gap:24px}
@media (min-width:64em){.svc-sec__body{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.svc-sec__photo{aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--gray-200)}
.svc-sec__photo img{width:100%;height:100%;object-fit:cover}
.svc-sec__desc{margin:0;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-600)}
@media (min-width:64em){.svc-sec__desc{font-size:var(--fs-body)}}
.svc-sec__label{margin:24px 0 0;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.18em;color:var(--navy-dark)}
.svc-sec__tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.svc-sec__tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:4px;
  border:1px solid var(--gray-400);font-size:var(--fs-label);font-weight:700;
  line-height:1.4;letter-spacing:.02em;color:var(--navy-dark);white-space:nowrap}
.svc-sec__back{margin:28px 0 0}
@media (min-width:48em){
  .cd-grid{grid-template-columns:repeat(2,1fr)}
}
/* 先頭の1件は本文側をネイビーで塗って、他のカードと差をつける。
   ⚠️ 地色が変わるので、タグの枠と文字も白に寄せること */
/* ⚠️ 地色はブランドカラー #005AAA（--navy）。--navy-dark は明度を落とした
   派生色で、01だけ別の色に見えてしまうので使わないこと */
.cd-card--lead .cd-card__body{background:var(--navy)}
.cd-card--lead .cd-card__kind{color:var(--blue-pale)}
.cd-card--lead .cd-card__ttl{color:var(--white)}
.cd-card--lead .cd-card__desc{color:var(--blue-pale)}
.cd-card--lead .cd-card__tag{border-color:rgba(255,255,255,.55);color:var(--white)}
.cd-card--lead .cd-card__more{color:var(--white)}
@media (min-width:64em){
  /* 先頭の1件だけ写真を左、本文を右に。幅は1:1、写真は本文の高さいっぱいまで伸ばす */
  /* 高さは下の2カラムのカードに合わせる（写真16:9＋本文ぶん）。
     揃っていないと、同じ種類の要素に見えなくなる */
  .cd-card--lead{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:560px}
  .cd-card--lead .cd-card__photo{height:100%;aspect-ratio:auto}
  .cd-card--lead .cd-card__body{padding:48px;display:flex;flex-direction:column;justify-content:center}
  .cd-card--lead .cd-card__ttl--lead{font-size:var(--fs-sub);line-height:1.5}
  .cd-card--lead .cd-card__desc{font-size:var(--fs-body)}
}

/* =========================================================
   メンバーページ（members.html）
   ========================================================= */
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin:0;padding-block:20px;font-size:var(--fs-caption);color:var(--gray-400)}
.breadcrumb a{color:var(--navy);min-height:44px;display:inline-flex;align-items:center}

/* 代表メッセージ。写真と本文の2カラム（PC）。
   ⚠️ 本文は news/ceo-message.html の抜粋。片方だけ直さないこと（main.js renderFounder） */
.founder{display:grid;grid-template-columns:1fr;background:var(--gray-100);
  border:1px solid var(--gray-200);border-radius:4px;overflow:hidden}
.founder__photo{width:100%;aspect-ratio:3/4;max-height:520px;overflow:hidden;background:var(--gray-200)}
.founder__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.founder__body{padding:var(--pad-card)}
.founder__ttl{margin:0 0 16px;font-size:var(--fs-sub);font-weight:700;line-height:1.5;color:var(--navy-dark)}
.founder__txt{margin:0 0 20px;font-size:var(--fs-card);line-height:var(--lh-body);color:var(--gray-600)}
.founder__sign{margin:0 0 16px;font-size:var(--fs-caption);color:var(--navy-dark)}
@media (min-width:64em){
  .founder{grid-template-columns:.8fr 1.2fr;align-items:stretch}
  .founder__photo{aspect-ratio:auto;height:100%;max-height:none}
  .founder__body{padding:56px;display:flex;flex-direction:column;justify-content:center}
  .founder__txt{font-size:var(--fs-body)}
}

/* メンバーページだけ、カードに1人ずつのリード文を出す */
.member-card__lead{margin:12px 0 0;font-size:var(--fs-caption);line-height:1.9;color:var(--gray-600)}