/* =========================================================
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同意バナー / 言語のご案内
余白の原則：margin / padding / gap は 8の倍数。
どうしても収まらない場合のみ 4の倍数を使う。
値の直書きはしない。必要になったら :root にトークンを足す。
========================================================= */
/* ---------------------------------------------------------
00. 欧文フォント（自己ホスト）
Funnel Display は OFL-1.1。可変フォント1ファイルで 600〜800 を賄う。
Google Fonts から読むと、社内ネットワークやアプリ内ブラウザで
遮断されたときに Roboto へ落ちて別物の見た目になるため自前で持つ。
⚠️ HTML側の と対。片方だけ消さないこと
--------------------------------------------------------- */
/* ⚠️ いまは Funnel Display も Google Fonts から読んでいます（HTMLの ）。
自己ホストに切り替えるときは、次の3つを同時に行ってください。
1. assets/fonts/funnel-display-var.woff2 を置く
（Google Fonts の「Get font」→ ダウンロード → 可変版の woff2。約17.7KB）
2. 下のコメントを外す
3. HTML 4枚の で、Funnel Display の preload 行のコメントを外し、
Google Fonts の から 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-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;
--lh-body:1.7; --lh-dense:1.6;
/* 余白：すべて8の倍数 */
--sec-y:56px; --gutter:24px; --header-h:64px;
--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は幅が足りないので隠し、モバイルメニューの中に置く */
.header__lang{display:none;align-items:center;font-family:var(--font-en);
font-weight:700;font-size:13px;letter-spacing:.06em}
/* 指で押せる大きさ（縦44px）を確保する。文字だけだと小さすぎて押せない */
.header__lang a,.header__lang .is-current{display:grid;place-items:center;
min-width:34px;height:44px;color:var(--gray-400);transition:color .2s}
.header__lang .is-current{color:var(--navy-dark)}
.header__lang-sep{color:var(--gray-400)}
@media (hover:hover){.header__lang a:hover{color:var(--navy)}}
/* 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:8px;margin-top:32px;
font-family:var(--font-en);font-weight:700;font-size:18px;letter-spacing:.08em}
.mobile-menu__lang a,.mobile-menu__lang .is-current{display:grid;place-items:center;
min-width:56px;height:52px;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:rgba(255,255,255,.7)}
.mobile-menu__lang .is-current{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.mobile-menu__close{position:absolute;top:16px;right:16px;width:48px;height:48px;color:#fff;font-size:26px}
/* ---- 05. S1 ヒーロー ---- */
/* 白地＋格子。直下の Why KGS がネイビーなので、FVも紺にすると
ページ上部が一つの塊になる。明るく始めて、帯を最初の重量にする */
.hero{position:relative;min-height:76svh;display:flex;flex-direction:column;justify-content:center;
padding:calc(var(--header-h) + 40px) var(--gutter) 56px;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}}
.hero__desc{max-width:42ch;margin:0 0 32px;font-size:var(--fs-card);line-height:2;color:var(--gray-600)}
@media (min-width:64em){.hero__desc{max-width:none}} /* PCは改行を明示するので幅制限を外す */
@media (min-width:48em){.hero{min-height:100svh}} /* SPだけ短くし、次の見出しが覗くようにする */
.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:8px;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}
}
/* ---- 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)}
@media (min-width:64em){.strength-band__inner{grid-template-columns:1fr 1.3fr;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}
.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{display:block;width:100%;height:100%;border:0}
/* 事業内容の 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);gap:var(--gap-card)}
@media (min-width:64em){.st-list{grid-template-columns:repeat(4,1fr)}}
/* 白地にネイビーの枠線。外側の角丸はサイト共通の4pxのまま、
見出しブロックの下端だけ大きく丸めて、見出しと本文の境界をつくる */
.st-item{display:flex;flex-direction:column;
background:var(--white);border:1px solid var(--navy);border-radius:4px;overflow:hidden}
/* 見出しは4枚とも2行なので高さは自然に揃う。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}}
/* 見出しは大きく。小さいとネイビーの面が空いて見え、カードが痩せる */
.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)}
/* ---- 09. S5 メンバー ---- */
.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}
.member-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){
.member-card:hover{box-shadow:0 16px 40px rgba(13,27,110,.12);transform:translateY(-8px);border-color:transparent}
.member-card:hover::before{transform:scaleX(1)}
}
.member-card.is-focus{box-shadow:0 16px 40px rgba(13,27,110,.12);border-color:transparent}
.member-card.is-focus::before{transform:scaleX(1)}
.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}
.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{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}