/* ============================================================
   AI活用研修サービス LP — FV ／ プランA–E ／ 実績 ／ 顧客ロゴ ／ お問い合わせ
   欧文 Cormorant Garamond Light / 和文 Zen Kaku Gothic New
   写真は全点 彩度 -14%（デザインレシピ準拠）で書き出し済み
   ============================================================ */
:root{
  --blue-950:#0A3A63; --blue-900:#0E4877; --blue-800:#12558C;
  --blue-700:#1A6BA8; --blue-500:#2E7FB8;
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.80); --fg-3:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.26); --rule-2:rgba(255,255,255,.16);
  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s5:80px;
  --pad:clamp(24px,6.2vw,104px);
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",Georgia,serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --ease-in:cubic-bezier(.2,.8,.2,1);
  --h1-w:300; --h1-ls:-.008em; --h1-lh:.88; --h1-max:152px; --h1-vw:9.8vw;
  --label-w:400; --num-w:400;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0; background:var(--blue-800); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;}
a{color:inherit}
:focus-visible{outline:2px solid #FFF; outline-offset:3px; border-radius:2px}
img{display:block; max-width:100%}

/* ---------- 面 ---------- */
.stage{position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden;}
.bg{position:absolute; inset:0; pointer-events:none;}
.bg-base{background:
    radial-gradient(120% 95% at 88% 88%, var(--blue-500) 0%, rgba(46,127,184,0) 58%),
    radial-gradient(92% 72% at 8% 4%, var(--blue-950) 0%, rgba(10,58,99,0) 64%),
    linear-gradient(152deg, var(--blue-900) 0%, var(--blue-800) 46%, var(--blue-700) 100%);}
.bg-cloud{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='5' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:130% 130%; background-position:center; opacity:.55; mix-blend-mode:soft-light;}
.bg-grain{background-image:url("../img/grain.png");
  background-repeat:repeat; background-size:180px 180px; opacity:.46; z-index:3;}
@media (min-resolution:2dppx){ .bg-grain{background-size:120px 120px; opacity:.52;}
}


/* ---------- ヘッダー ---------- */
.bar{position:relative; z-index:10; display:flex; align-items:center; gap:var(--s3);
  padding:18px var(--pad); border-bottom:1px solid var(--rule-2);}
.brand{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:.14em; text-decoration:none; white-space:nowrap;}
.bar nav{display:flex; gap:var(--s3); margin-left:auto; font-size:13.5px; color:var(--fg-2);}
.bar nav a{text-decoration:none; padding:2px 0; border-bottom:1px solid transparent; transition:border-color 200ms var(--ease-in), color 320ms ease-out;}
.bar nav a:hover{color:var(--fg); border-bottom-color:var(--rule);}
.btn{display:inline-flex; align-items:center; gap:10px; background:#FFF; color:var(--blue-950);
  font-family:var(--sans); font-weight:700; font-size:14.5px; line-height:1; padding:14px 22px;
  border:1px solid #FFF; border-radius:3px; text-decoration:none; white-space:nowrap;
  transition:transform 200ms var(--ease-in), background-color 320ms ease-out, box-shadow 320ms ease-out;
  box-shadow:0 1px 2px rgba(6,32,55,.18);}
.btn:hover{background:#EDF4FA; transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(6,32,55,.5);}
.btn .arw{font-family:var(--serif); font-size:16px; transform:translateY(-1px);}
.bar .btn{padding:11px 18px; font-size:13.5px;}

/* ---------- 共通タイポ ---------- */
.eyebrow{font-family:var(--serif); font-weight:var(--label-w); font-size:14px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-2); display:flex; align-items:center; gap:14px;}
.eyebrow::after{content:""; height:1px; flex:1; max-width:220px; background:var(--rule);}
h1{margin:var(--s1) 0 0; font-family:var(--serif); font-weight:var(--h1-w);
  font-size:clamp(50px,var(--h1-vw),var(--h1-max)); line-height:var(--h1-lh); letter-spacing:var(--h1-ls); text-wrap:balance;}
h1 .l2{display:block;}
.jp{margin:var(--s3) 0 0; font-weight:700; font-size:clamp(19px,2.3vw,28px); line-height:1.5; letter-spacing:.01em; text-wrap:balance;}
.jp em{font-style:normal; border-bottom:2px solid rgba(255,255,255,.55); padding-bottom:2px;}
.lede{margin:var(--s3) 0 0; max-width:31em; font-size:15px; line-height:1.9; color:var(--fg-2);}
.actions{display:flex; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap; margin-top:var(--s5);}
.textlink{font-size:14.5px; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule);
  padding-bottom:3px; display:inline-flex; align-items:center; gap:9px;
  transition:border-color 200ms var(--ease-in), gap 320ms ease-out;}
.textlink:hover{border-bottom-color:#FFF; gap:13px;}
.textlink .arw{font-family:var(--serif);}

/* ---------- 写真の共通処理 ---------- */
.plan img:not(.bg-photo){filter:contrast(1.02);}
figure{margin:0}
figure img{border-radius:8px; border:1px solid rgba(255,255,255,.20); width:100%; object-fit:cover;}

/* =========== A：1枚・右half（ぼかし境界で面に溶かす） =========== */
[data-p="a"] .split{position:relative; z-index:5; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 46%; align-items:center; min-height:0;}
[data-p="a"] .copy{padding:var(--s5) clamp(32px,5vw,80px) var(--s5) var(--pad);}
[data-p="a"] .shot{position:relative; align-self:stretch; overflow:hidden; isolation:isolate;
  -webkit-mask-image:linear-gradient(96deg, transparent 0%, rgba(0,0,0,.5) 13%, #000 30%);
          mask-image:linear-gradient(96deg, transparent 0%, rgba(0,0,0,.5) 13%, #000 30%);}
/* 写真そのものは自然な明るさに戻す（書き出し時に落とした彩度も CSS で復元） */
[data-p="a"] .shot img{width:100%; height:100%; object-fit:cover; object-position:58% 46%;
  filter:saturate(1.16) contrast(1.02) brightness(1.06);}
/* 青は左端だけに濃くかけ、中ほどで抜いて右は素の色を出す */
[data-p="a"] .shot .tint{position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(96deg,
    rgba(12,62,104,.94) 0%,
    rgba(16,80,132,.66) 20%,
    rgba(20,92,150,.32) 40%,
    rgba(24,104,166,.10) 58%,
    rgba(24,104,166,0)  72%);}
/* 粒子も同じ範囲だけ重ねて、面と写真の境目を消す */
[data-p="a"] .shot .tint-grain{position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("../img/grain.png");
  background-repeat:repeat; background-size:180px 180px;
  -webkit-mask-image:linear-gradient(96deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.15) 55%, transparent 72%);
          mask-image:linear-gradient(96deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.15) 55%, transparent 72%);
  opacity:.40;}

@media (prefers-reduced-motion:reduce){*{transition-duration:1ms !important; animation:none !important}
}


/* ---------- 低い画面高 ---------- */
@media (min-width:900px) and (max-height:820px){
  #app{--h1-max:116px; --h1-vw:8.2vw;}
  [data-p="a"] .copy{padding-top:var(--s4); padding-bottom:var(--s4);}
  [data-p="a"] .cue{display:none}
  .lede{font-size:14.5px}
  .actions{margin-top:var(--s4)}
}


/* ---------- モバイル ---------- */
@media (max-width:900px){
  .bar nav{display:none}
  [data-p="a"] .split{grid-template-columns:1fr;}
  [data-p="a"] .copy{padding:var(--s5) var(--pad) var(--s4);}
  [data-p="a"] .cue{display:none}
  .actions{margin-top:var(--s4)}
  [data-p="a"] .shot{height:54vw; min-height:230px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
            mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
    }
  [data-p="a"] .shot img{object-position:58% 38%;}
  [data-p="a"] .shot .tint{background:linear-gradient(180deg,
    rgba(12,62,104,.94) 0%, rgba(16,80,132,.66) 20%, rgba(20,92,150,.32) 42%,
    rgba(24,104,166,.10) 60%, rgba(24,104,166,0) 74%);}
  [data-p="a"] .shot .tint-grain{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.15) 56%, transparent 74%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.15) 56%, transparent 74%);}
}
/* iOS：文字の自動拡大（text autosizing）を止める。ページ全体の見え方をCSSの指定どおりに保つ */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}


/* ---------- 下端の空きに意味を持たせる（次セクションへの導線） ---------- */
/* スクロール導線：線は縦。下方向を指す合図なので、横棒では意味が合わない。
   文字は横組みのまま上に置き、そこから線を下へ落とす。
   縦組みにすると全高160px超になり、FVのCTAとぶつかるため採らない。 */
[data-p="a"] .cue{position:absolute; left:var(--pad); bottom:0; z-index:6; margin:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  font-family:var(--serif); font-weight:var(--label-w); font-size:12.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fg-2);}
[data-p="a"] .cue::after{content:""; width:1px; height:58px; margin-left:1px;
  background:var(--rule); transform-origin:top center;}

/* ---------- 入りのシーケンス（入り200ms・離脱320ms／グラデは動かさない） ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.anim{animation:rise 620ms var(--ease-in) both;}
.d1{animation-delay:60ms}
.d2{animation-delay:150ms}
.d3{animation-delay:240ms}
.d4{animation-delay:330ms}
.d5{animation-delay:420ms}
.d6{animation-delay:520ms}
[data-p="a"] .shot{animation:fadein 900ms var(--ease-in) 120ms both;}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms !important; animation:none !important}}

/* ============================================================
   セカンドビュー：プランA–E（白地・軽い面）
   ・面は白。青は文字と1px罫としてのみ
   ・欧文ラベル(小) → 和文サービス名(大) の2段
   ・余白は 8 / 24 / 48 / 80 の4値だけで構成
   ・A–E は「企業の現在地」の段階順なので、連番が情報として機能する
   ============================================================ */
.programs{
  --l-bg:#FFFFFF; --l-tint:#F5F8FB; --l-rule:#E3E6EB;
  --l-ink:#15191F; --l-ink-2:#5B6672;
  --l-blue:#12558C; --l-blue-2:#2E7FB8; --l-blue-pale:#C3D8EA;
  position:relative; background:#FFFFFF; color:#15191F;
  padding:clamp(72px,9vw,148px) 0 clamp(64px,8vw,128px);
}
/* 目印の帯がブルーからの橋渡しを担うようになったので、この上端のぼかしは不要 */
.pg-inner{position:relative; max-width:1240px; margin:0 auto; padding:0 var(--pad);}

.eyebrow-l{margin:0; font-family:var(--serif); font-weight:400; font-size:14px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--l-blue); display:flex; align-items:center; gap:14px;}
.eyebrow-l::after{content:""; height:1px; flex:1; max-width:180px; background:var(--l-blue-pale);}
.programs h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.42; letter-spacing:.005em; color:var(--l-ink); text-wrap:balance;}
.pg-lede{margin:var(--s3) 0 0; max-width:34em; font-size:15.5px; line-height:1.95; color:var(--l-ink-2);}
.pg-lede strong{color:var(--l-ink); font-weight:700; box-shadow:inset 0 -8px 0 rgba(46,127,184,.16);}

.rows{margin-top:var(--s5); border-top:1px solid var(--l-rule);}
.row{display:grid; grid-template-columns:clamp(84px,8.5vw,140px) minmax(0,1fr);
  gap:clamp(20px,3.2vw,56px); align-items:start;
  padding:clamp(28px,3.4vw,44px) clamp(12px,1.6vw,24px);
  border-bottom:1px solid var(--l-rule); text-decoration:none; color:inherit;
  transition:background-color 320ms ease-out;}
.row:hover{background:var(--l-tint);}

.row .ltr{display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(56px,6.4vw,104px); line-height:.82; letter-spacing:-.01em;
  color:var(--l-blue-pale); transition:color 320ms ease-out;}
.row .ltr::after{content:""; display:block; width:30px; height:2px; margin-top:14px;
  background:var(--l-blue-pale); transition:background-color 320ms ease-out, width 200ms var(--ease-in);}
.row:hover .ltr{color:var(--l-blue-2);}
.row:hover .ltr::after{background:var(--l-blue-2); width:44px;}

.row .main{display:block;}
.row .eng{display:block; font-family:var(--serif); font-weight:400; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--l-blue);}
.row .name{display:block; margin-top:var(--s1); font-weight:700;
  font-size:clamp(21px,2.5vw,34px); line-height:1.4; letter-spacing:.005em; color:var(--l-ink);}
.pending{display:inline-block; transform:translateY(-4px); margin-left:10px; padding:3px 9px 4px;
  font-family:var(--sans); font-weight:500; font-size:11.5px; letter-spacing:.04em; line-height:1;
  color:#8A5A12; background:#FBF2DF; border:1px solid #EBD8AC; border-radius:2px; white-space:nowrap;}
.row .target{display:inline-flex; align-items:center; gap:10px; margin-top:var(--s3);
  font-size:13px; line-height:1.5; color:var(--l-ink); background:var(--l-tint);
  border:1px solid var(--l-rule); border-radius:2px; padding:6px 12px 7px;}
.row .target i{font-style:normal; font-family:var(--serif); font-weight:400; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--l-blue);
  padding-right:10px; border-right:1px solid var(--l-rule);
  white-space:nowrap; flex:none; align-self:stretch; display:flex; align-items:center;}
.row .desc{display:block; margin-top:14px; max-width:44em; font-size:14.5px; line-height:1.95; color:var(--l-ink-2);}

.row .go{align-self:center; display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14px; color:var(--l-blue); border-bottom:1px solid var(--l-blue-pale); padding-bottom:3px;
  transition:border-color 200ms var(--ease-in), gap 320ms ease-out;}
.row .go .arw{font-family:var(--serif); font-size:15px;}
.row:hover .go{border-bottom-color:var(--l-blue); gap:14px;}

.pg-foot{margin:var(--s4) 0 0; font-size:14.5px; line-height:1.95; color:var(--l-ink-2);}
.textlink-l{display:inline-flex; align-items:center; gap:9px; margin-left:6px; color:var(--l-blue);
  text-decoration:none; border-bottom:1px solid var(--l-blue-pale); padding-bottom:2px;
  transition:border-color 200ms var(--ease-in), gap 320ms ease-out;}
.textlink-l .arw{font-family:var(--serif);}
.textlink-l:hover{border-bottom-color:var(--l-blue); gap:13px;}
.programs :focus-visible{outline:2px solid var(--l-blue); outline-offset:3px;}

@media (max-width:900px){
  .row{grid-template-columns:56px minmax(0,1fr); gap:16px 18px;}
  .row .ltr{font-size:46px;}
  .row .ltr::after{width:22px; margin-top:10px;}
  .row .go{grid-column:2; align-self:start; margin-top:var(--s3);}
  .row .target{margin-top:var(--s2); display:flex; align-items:flex-start;}
  .row .target i{align-self:flex-start; padding-top:1px;}
  .rows{margin-top:var(--s4);}
}

/* ============================================================
   実績（Works）— 研修実績 ＋ 開発実績
   ・プラン節と区別するため、ごく薄い面（#F5F8FB）に載せる
   ・画像は差し替え前提のプレースホルダー。空白ではなく枠として設計する
   ・順序に意味がないため、ここでは連番を使わない
   ============================================================ */
.works{
  --l-bg:#F5F8FB; --l-rule:#E3E6EB; --l-ink:#15191F; --l-ink-2:#5B6672; --l-ink-3:#8A93A0;
  --l-blue:#12558C; --l-blue-2:#2E7FB8; --l-blue-pale:#C3D8EA;
  position:relative; background:#F5F8FB; color:#15191F;
  padding:clamp(72px,9vw,132px) 0 clamp(72px,9vw,132px);
  border-top:1px solid var(--l-rule);
}
.works h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.42; letter-spacing:.005em; color:var(--l-ink);}
.works .pg-lede{color:var(--l-ink-2);}
.works :focus-visible{outline:2px solid var(--l-blue); outline-offset:3px;}

/* グループ見出し：欧文ラベル(小) → 和文(大) の2段、罫で面を割る */
.wgroup{margin-top:var(--s5);}
.wg-head{display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4);
  font-weight:700; font-size:clamp(17px,1.9vw,22px); letter-spacing:.01em; color:var(--l-ink);
  padding-top:var(--s3); border-top:1px solid var(--l-rule);}
.wg-eng{font-family:var(--serif); font-weight:400; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--l-blue); padding-right:var(--s3);
  border-right:1px solid var(--l-rule);}

/* 画像プレースホルダー */
.ph{position:relative; aspect-ratio:var(--r,16/9); border-radius:4px;
  background:
    repeating-linear-gradient(135deg, rgba(18,85,140,.045) 0 10px, rgba(18,85,140,0) 10px 20px),
    #EEF3F8;
  border:1px dashed var(--l-blue-pale);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;}
.ph-l{font-family:var(--serif); font-weight:400; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--l-blue-2);}
.ph-t{font-size:12px; color:var(--l-ink-3); padding:0 16px; text-align:center; line-height:1.6;}
/* height:auto は必須。HTMLのheight属性（CLS対策で入れている）が
   プレゼンテーション・ヒントとして効いてしまい、aspect-ratio が無効化されて
   縦長に伸びるため。width と height の両方が決まると aspect-ratio は使われない。 */
.w-img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:4px;
  border:1px solid var(--l-rule); filter:saturate(1.05) contrast(1.02);}
.d-img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:4px;
  border:1px solid var(--l-rule); background:#FFFFFF;}

/* 研修実績：2カラム */
/* 研修実績は3件になったので3カラム（開発実績と同じ列数に揃える） */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.work{background:#FFFFFF; border:1px solid var(--l-rule); border-radius:2px;
  padding:clamp(18px,1.8vw,24px); box-shadow:0 1px 2px rgba(21,25,31,.04);
  transition:border-color 320ms ease-out, box-shadow 320ms ease-out;}
.work:hover{border-color:var(--l-blue-pale); box-shadow:0 10px 30px -20px rgba(18,85,140,.45);}
.work .w-body{margin-top:var(--s3);}
.w-eng{margin:0; font-family:var(--serif); font-weight:400; font-size:12.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--l-blue);}
.work .w-name{margin:var(--s1) 0 0; font-weight:700; font-size:clamp(16px,1.5vw,20px);
  line-height:1.4; letter-spacing:.005em; color:var(--l-ink);}
.work .w-name em{font-style:normal; font-weight:500; font-size:.66em; margin-left:.2em;
  color:var(--l-ink-2); white-space:nowrap;}
.work .w-kind{margin:10px 0 0; display:block; font-size:13px; color:var(--l-ink-2);}
.work .w-text{margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid var(--l-rule);
  font-size:13.5px; line-height:1.9; color:var(--l-ink-2);}

/* 開発実績：3カラム */
.dev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);}
.dev{background:#FFFFFF; border:1px solid var(--l-rule); border-radius:2px;
  padding:clamp(18px,1.8vw,24px); box-shadow:0 1px 2px rgba(21,25,31,.04);
  transition:border-color 320ms ease-out, box-shadow 320ms ease-out;}
.dev:hover{border-color:var(--l-blue-pale); box-shadow:0 10px 30px -20px rgba(18,85,140,.45);}
.dev .d-body{margin-top:var(--s3);}
.dev .d-name{margin:var(--s1) 0 0; font-weight:700; font-size:clamp(16px,1.55vw,20px);
  line-height:1.5; letter-spacing:.005em; color:var(--l-ink);}
.dev .d-text{margin:12px 0 0; font-size:13.5px; line-height:1.9; color:var(--l-ink-2);}

.works-note{margin:var(--s5) 0 0; padding-top:var(--s3); border-top:1px solid var(--l-rule);
  font-size:13.5px; line-height:1.9; color:var(--l-ink-2);}

@media (max-width:900px){
  .work-grid,.dev-grid{grid-template-columns:1fr; gap:var(--s2);}
  .work .w-name{font-size:20px;}
  .wgroup{margin-top:var(--s4);}
  .works-note{margin-top:var(--s4);}
}

/* ============================================================
   顧客ロゴ（Clients）
   ・ロゴ画像はレベルゼロのサイトのものをそのまま使用
   ・元画像と同じ倍率関係を保つため、全タイルを同一寸法（264×112）で切り出している
     （個別に max-height を当てるとロゴ間の大小関係が崩れるため）
   ・地色は元画像の #FAFAF2 に合わせ、切り抜きの縁が出ないようにしている
   ============================================================ */
.clients{
  --l-rule:#E4E4E4; --l-ink:#15191F; --l-ink-2:#5B6672; --l-ink-3:#8A93A0;
  --l-blue:#12558C; --l-blue-pale:#C3D8EA;
  position:relative; background:#FFFFFF; color:#15191F;
  padding:clamp(72px,9vw,132px) 0 clamp(64px,8vw,116px);
  border-top:1px solid var(--l-rule);
}
.clients h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.42; letter-spacing:.005em; color:var(--l-ink);}
.clients .pg-lede{color:var(--l-ink-2);}
.clients .eyebrow-l::after{background:#DCD9CB;}

.logo-grid{list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,2vw,26px) clamp(2px,0.6vw,8px);
  align-items:center;}
.logo-grid li{margin:0; display:flex; align-items:center; justify-content:center;}
.logo-grid img{display:block; width:100%; height:auto;}

.clients .pg-inner{max-width:1360px;}
.clients-note{margin:var(--s5) 0 0; padding-top:var(--s3); border-top:1px solid var(--l-rule);
  font-size:12.5px; line-height:1.9; color:var(--l-ink-3);}

@media (max-width:1100px){ .logo-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:760px){
  .logo-grid{grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s2); margin-top:var(--s4);}
  .clients-note{margin-top:var(--s4);}
}

/* ============================================================
   お問い合わせ（Contact）
   項目・必須指定・同意文・ボタン文言は採用ブランディングLPを踏襲。
   面はFVのブルーに戻し、ページを同じ世界で閉じる。
   ============================================================ */
.contact{position:relative; overflow:hidden; background:var(--blue-800); color:var(--fg);
  padding:clamp(72px,9vw,140px) 0 clamp(72px,9vw,132px);}
.ct-inner{position:relative; z-index:5; max-width:1240px; margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,96px); align-items:start;}

.ct-lead h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(25px,3.3vw,40px); line-height:1.45; letter-spacing:.005em; color:var(--fg);}
.ct-lede{margin:var(--s3) 0 0; max-width:32em; font-size:15px; line-height:1.95; color:var(--fg-2);}
.ct-meta{margin:var(--s4) 0 0; display:grid; gap:0; border-top:1px solid var(--rule-2);}
.ct-meta > div{display:grid; grid-template-columns:120px 1fr; gap:var(--s2);
  padding:12px 0; border-bottom:1px solid var(--rule-2);}
.ct-meta dt{margin:0; font-family:var(--serif); font-weight:var(--label-w); font-size:12.5px;
  letter-spacing:.18em; color:var(--fg-2);}
.ct-meta dd{margin:0; font-size:14.5px; color:var(--fg);}

/* フォーム */
.ct-form{display:block;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);}
.field{margin-bottom:var(--s3);}
.grid2 .field{margin-bottom:0;}
.field label{display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-size:13.5px; font-weight:500; color:var(--fg);}
.req,.opt{font-size:10.5px; font-weight:700; letter-spacing:.06em; line-height:1;
  padding:4px 7px 5px; border-radius:2px;}
.req{color:var(--blue-950); background:#FFFFFF;}
.opt{color:var(--fg-2); background:transparent; border:1px solid var(--rule-2); font-weight:500;}

.field input,.field textarea{
  display:block; width:100%; font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--fg);
  background:rgba(255,255,255,.07); border:1px solid var(--rule-2); border-radius:3px;
  padding:13px 14px; transition:border-color 200ms var(--ease-in), background-color 320ms ease-out;
  -webkit-appearance:none; appearance:none;}
.field textarea{resize:vertical; min-height:150px;}
.field input:hover,.field textarea:hover{border-color:var(--rule);}
.field input:focus,.field textarea:focus{outline:none; border-color:#FFFFFF; background:rgba(255,255,255,.12);}
.field.is-error input,.field.is-error textarea{border-color:#F0A99B; background:rgba(240,169,155,.10);}

.privacy{margin:var(--s2) 0 var(--s3); font-size:13px; line-height:1.8; color:var(--fg-2);}
.privacy a{color:var(--fg); border-bottom:1px solid var(--rule); padding-bottom:1px; text-decoration:none;
  transition:border-color 200ms var(--ease-in);}
.privacy a:hover{border-bottom-color:#FFFFFF;}

/* 同意チェック（採用ブランディングLPと同じ扱い。必須） */
.agree{display:flex; align-items:flex-start; gap:12px; margin:var(--s2) 0 var(--s3);
  font-size:13px; line-height:1.8; color:var(--fg-2); cursor:pointer;}
.agree input{flex:0 0 auto; width:18px; height:18px; margin:5px 0 0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid var(--rule-2); border-radius:2px;
  transition:border-color 200ms var(--ease-in), background-color 200ms var(--ease-in);}
.agree input:hover{border-color:var(--rule);}
.agree input:checked{background:#FFFFFF; border-color:#FFFFFF;}
.agree input:checked::after{content:""; display:block; width:10px; height:5px; margin:3px auto 0;
  border-left:1.6px solid var(--blue-950); border-bottom:1.6px solid var(--blue-950);
  transform:rotate(-45deg);}
.agree a{color:var(--fg); border-bottom:1px solid var(--rule); padding-bottom:1px;
  text-decoration:none; transition:border-color 200ms var(--ease-in);}
.agree a:hover{border-bottom-color:#FFFFFF;}
.agree.is-error input{border-color:#F0A99B; background:rgba(240,169,155,.10);}
.agree.is-error span{color:#F5C2B7;}

/* スパム対策：人間には見えない項目。ボットが入力すると受け側で破棄する */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}

/* 送信完了 */
.ct-done{border:1px solid var(--rule-2); padding:clamp(28px,3.4vw,44px);
  background:rgba(255,255,255,.06);}
.ct-done h3{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(19px,1.9vw,24px); line-height:1.5; color:var(--fg);}
.ct-done p:last-child{margin:var(--s2) 0 0; font-size:14.5px; line-height:1.9; color:var(--fg-2);}

.btn.submit{width:100%; justify-content:center; padding:18px 24px; font-size:15.5px;}
.form-status{margin:var(--s2) 0 0; font-size:13px; line-height:1.8; min-height:1.2em; color:var(--fg-2);}
.form-status.is-error{color:#F5C2B7;}
.form-status.is-ok{color:#BFE0C6;}

@media (max-width:900px){
  .ct-inner{grid-template-columns:minmax(0,1fr); gap:var(--s5);}
  .grid2{grid-template-columns:1fr; gap:var(--s3);}
  .grid2 .field{margin-bottom:0;}
  .ct-meta > div{grid-template-columns:100px 1fr;}
}

/* ============================================================
   ヘッダー
   ・最上部：帯なし。FVに溶かす。可読性は上端のスクリムだけで確保する
   ・スクロール後：ブルーの帯＋ブラーが立ち上がる
   ・fixed にして、FVは画面いっぱい（100svh）を保つ
   ============================================================ */
#app{--bar-h:78px;}
.bar{position:fixed; top:0; left:0; right:0; z-index:30;
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color 320ms ease-out, border-color 320ms ease-out, box-shadow 320ms ease-out;}
/* 帯なし状態でも文字が沈まないよう、上端にだけごく薄いスクリムを敷く */
.bar::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,42,73,.60) 0%, rgba(8,42,73,.28) 55%, rgba(8,42,73,0) 100%);
  transition:opacity 320ms ease-out;}
.bar.is-stuck{background:rgba(10,54,92,.90); border-bottom-color:rgba(255,255,255,.14);
  box-shadow:0 10px 30px -24px rgba(0,0,0,.8); backdrop-filter:blur(12px) saturate(1.2);}
.bar.is-stuck::before{opacity:0;}

.brand{display:block; line-height:0;}
.brand img{display:block; height:clamp(20px,2.1vw,26px); width:auto;}

[data-p="a"] .stage{min-height:100svh;}
[data-p="a"] .split{padding-top:var(--bar-h);}
[data-p="a"] .cue{bottom:var(--s4);}
#program,#cases,#clients,#contact{scroll-margin-top:calc(var(--bar-h) + 8px);}
.grid2{margin-bottom:var(--s3);}
@media (max-width:900px){
  #app{--bar-h:66px;}
  [data-p="a"] .split{padding-top:0;}
  [data-p="a"] .copy{padding-top:calc(var(--s5) + var(--bar-h));}
}

/* FVの欧文ラベルを外したので、見出しが最初の要素になる */
[data-p="a"] h1{margin-top:0;}

/* 人物線画は既定では出さない（C案でのみ表示する） */
.row .ill-wrap{display:none;}

/* 追従ダイアグラムは既定では出さない（D案でのみ表示する） */
.track{display:none;}

/* ============================================================
   よくあるご質問
   ・details / summary で組む（JSなし・キーボード操作とスクリーンリーダー対応が既定で効く）
   ・1問目だけ開いた状態にして、開けることを示す
   ============================================================ */
.faq{
  --l-rule:#E3E7EC; --l-ink:#15191F; --l-ink-2:#4B5560; --l-ink-3:#78838E;
  --l-blue:#12558C; --l-blue-pale:#C3D8EA;
  position:relative; background:#F4F4F4; color:#15191F;
  padding:clamp(72px,9vw,132px) 0 clamp(72px,9vw,128px);
  border-top:1px solid var(--l-rule);
}
.faq h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.42; color:var(--l-ink);}
.faq .pg-lede{color:var(--l-ink-2);}
.faq :focus-visible{outline:2px solid var(--l-ink); outline-offset:3px;}

.qa-list{margin-top:var(--s5); border-top:1px solid var(--l-rule); max-width:900px;}
.qa{border-bottom:1px solid var(--l-rule);}
.qa summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:auto minmax(0,1fr) 28px; align-items:start; gap:var(--s2);
  padding:clamp(20px,2.2vw,26px) 0;}
.qa summary::-webkit-details-marker{display:none;}
.qa-q{font-family:var(--serif); font-weight:400; font-size:clamp(19px,2vw,25px);
  line-height:1; color:var(--l-blue-pale); padding-top:2px;
  transition:color 320ms ease-out;}
.qa-t{font-weight:700; font-size:clamp(15px,1.6vw,18px); line-height:1.7;
  letter-spacing:.005em; color:var(--l-ink);}
/* ＋／－のマーク */
.qa summary::after{content:""; grid-column:3; justify-self:end; align-self:center;
  width:14px; height:14px; position:relative;
  background:
    linear-gradient(var(--l-ink),var(--l-ink)) center/14px 1px no-repeat,
    linear-gradient(var(--l-ink),var(--l-ink)) center/1px 14px no-repeat;
  transition:transform 200ms var(--ease-in), background-size 200ms var(--ease-in);}
.qa[open] summary::after{
  background:linear-gradient(var(--l-ink),var(--l-ink)) center/14px 1px no-repeat;
  transform:rotate(180deg);}
.qa:hover .qa-q{color:var(--l-ink);}
.qa-a{padding:0 clamp(28px,3vw,44px) clamp(22px,2.4vw,30px) clamp(30px,3.2vw,44px);}
.qa-a p{margin:0; font-size:14.5px; line-height:1.98; color:var(--l-ink-2); max-width:46em;}

@media (max-width:900px){
  .qa-list{margin-top:var(--s4);}
  .qa summary{grid-template-columns:auto minmax(0,1fr) 22px; gap:12px;}
  .qa-a{padding-left:var(--s4); padding-right:0;}
}

/* ============================================================
   フッター
   構造とリンクの並びは採用ブランディングLPを踏襲。
   CONTACTのブルーより一段沈めた濃紺にして、ページの底として閉じる。
   ============================================================ */
.site-foot{background:#082C4B; color:#FFFFFF; border-top:1px solid rgba(255,255,255,.12);}
.ft-inner{max-width:1240px; margin:0 auto; padding:clamp(56px,7vw,88px) var(--pad) clamp(40px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);
  align-items:start;}

.ft-logo{display:block; height:clamp(20px,2.1vw,26px); width:auto;}
.ft-tag{margin:var(--s3) 0 0; font-size:15px; line-height:1.85; color:rgba(255,255,255,.86);}
.ft-en{margin:10px 0 0; font-family:var(--serif); font-weight:400; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.56);}

.ft-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.4vw,48px);}
.ft-col{min-width:0;}
.ft-h{margin:0 0 var(--s2); padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--serif); font-weight:400; font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.62);}
.ft-col ul{list-style:none; margin:0; padding:0;}
.ft-col li{margin:0;}
.ft-col a{display:inline-block; padding:6px 0; font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.82); text-decoration:none;
  border-bottom:1px solid transparent; transition:color 320ms ease-out, border-color 200ms var(--ease-in);}
.ft-col a:hover{color:#FFFFFF; border-bottom-color:rgba(255,255,255,.5);}

.ft-base{border-top:1px solid rgba(255,255,255,.12);}
.ft-copy{max-width:1240px; margin:0 auto; padding:var(--s3) var(--pad);
  font-family:var(--serif); font-weight:400; font-size:12px; letter-spacing:.16em;
  color:rgba(255,255,255,.52);}
.site-foot :focus-visible{outline:2px solid #FFFFFF; outline-offset:3px;}

@media (max-width:820px){
  .ft-inner{grid-template-columns:1fr; gap:var(--s5);}
  .ft-cols{gap:var(--s4);}
}

/* ============================================================
   モーション
   ・原則は「入りは速く、離脱は遅い」非対称。イージングは1種類に統一
   ・動かすのは opacity と transform だけ（合成のみで済み、再レイアウトしない）
   ・面のグラデーションと粒子は動かさない
   ・.anim-on＝FVの入り（必ず可視で終わる）／.motion＝スクロール・リビール
   ・.motion は監視の準備が終わってから付ける。途中で失敗しても何も隠れない
   ・prefers-reduced-motion では全部止める
   ============================================================ */
:root{--ease-out-soft:cubic-bezier(.22,.61,.36,1);}

/* --- スクロール・リビール --- */
.motion [data-rv]{opacity:0; transform:translateY(14px);
  transition:opacity 660ms var(--ease-in), transform 660ms var(--ease-in);
  transition-delay:var(--d,0ms);}
.motion [data-rv].is-in{opacity:1; transform:none;}
/* 行の中で、A–Eの文字だけ一段遅れて出る */
.motion .row[data-rv] .ltr{opacity:0; transform:translateY(10px);
  transition:opacity 560ms var(--ease-in), transform 560ms var(--ease-in);
  transition-delay:calc(var(--d,0ms) + 150ms);}
.motion .row[data-rv].is-in .ltr{opacity:1; transform:none;}

/* --- FV：見出しを行ごとにマスクから立ち上げる --- */
/* マスクの箱は文字幅ぴったり（max-content）にする。
   見出しはコピー列より広く、以前から意図的にはみ出しているため、
   横方向まで切ってはいけない。切るのは縦だけ。
   加えて行間0.88では下がりが収まらないので、下に逃げを作る。 */
h1 .ln{display:block; width:max-content; max-width:none;
  overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em;}
h1 .ln i{display:block; font-style:normal;}
.anim-on h1 .ln i{transform:translateY(130%); animation:lineUp 1000ms var(--ease-in) both;}
.anim-on h1 .ln:nth-child(1) i{animation-delay:120ms;}
.anim-on h1 .ln:nth-child(2) i{animation-delay:250ms;}
@keyframes lineUp{from{transform:translateY(130%)} to{transform:none}}

/* --- FV：写真はゆっくり落ち着く（1.05倍から等倍へ） --- */
.anim-on [data-p="a"] .shot img{animation:settle 1800ms var(--ease-out-soft) both;}
@keyframes settle{from{transform:scale(1.05)} to{transform:none}}

/* --- FV：スクロール導線の縦線が下へ引かれて戻る --- */
.anim-on [data-p="a"] .cue::after{animation:cueDraw 2800ms ease-in-out 1600ms infinite;}
@keyframes cueDraw{0%{transform:scaleY(.12)} 45%{transform:scaleY(1)} 100%{transform:scaleY(.12)}}

/* --- 画像はホバーでわずかに寄る（カードが overflow:hidden のため枠は動かない） --- */
.w-img,.d-img{transition:transform 720ms var(--ease-out-soft);}
.work:hover .w-img,.dev:hover .d-img{transform:scale(1.025);}

/* --- ボタンの矢印がひと押し進む --- */
.btn .arw{transition:transform 200ms var(--ease-in);}
.btn:hover .arw{transform:translate(4px,-1px);}

/* --- FAQ：開いたときに答えが持ち上がる --- */
.anim-on .qa[open] .qa-a{animation:qaIn 440ms var(--ease-in) both;}
@keyframes qaIn{from{opacity:0; transform:translateY(-7px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .motion [data-rv],
  .motion .row[data-rv] .ltr{opacity:1 !important; transform:none !important; transition:none !important;}
  .anim-on h1 .ln i,
  .anim-on [data-p="a"] .shot img,
  .anim-on [data-p="a"] .cue::after,
  .anim-on .qa[open] .qa-a{animation:none !important; transform:none !important;}
  .w-img,.d-img,.btn .arw{transition:none !important;}
}

/* ============================================================
   画面高に応じたFVの追い込み
   ノートPC（〜960px）ではコピーが下端まで届き、スクロール導線と重なる。
   見出しを詰め、下に導線ぶんの逃げを作る。さらに低い画面では導線を隠す。
   ============================================================ */
@media (min-width:900px) and (max-height:960px){
  #app{--h1-max:122px; --h1-vw:8.4vw;}
  [data-p="a"] .copy{padding-top:var(--s4); padding-bottom:calc(var(--s4) + 112px);}
  .actions{margin-top:var(--s4);}
  [data-p="a"] .cue{display:flex;}
}
/* 〜900px：写真がコピーの下に回り込むため、絶対配置の導線が写真の明部に乗って
   読めなくなる（実測1.6:1）。狭幅では導線を出さない。
   コピー上に逃がす余地はなく（CTAと重なる）、写真上にスクリムを敷くのは
   「面は白／色は発光」の原則に反するため採らない。 */
@media (max-width:900px){
  [data-p="a"] .cue{display:none;}
}

@media (min-width:900px) and (max-height:730px){
  #app{--h1-max:98px; --h1-vw:7.1vw;}
  [data-p="a"] .copy{padding-bottom:var(--s4);}
  [data-p="a"] .cue{display:none;}
}

/* ============================================================
   FV直下の目印5点
   ・濃紺のベタ帯をやめ、淡い面に点線の円を重ねる。強調は「円と細線」で作り、
     文字を太らせない（太字で押すと安く見えるため）
   ・円は重ねて、5つが1つの群れとして読めるようにする
   ・条件つきの主張は円の中に入れず、下の注記に逃がす
   ============================================================ */
.marks{position:relative; overflow:hidden; color:#1B2430;
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #E9F0F6 0%, #F5F9FB 52%, #FFFFFF 100%);
  padding:clamp(46px,5.4vw,80px) 0 clamp(28px,3.2vw,46px);}
.mk-inner{max-width:1400px; margin:0 auto; padding:0 var(--pad);}

.mk-row{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;}
.mk-item{margin:0; flex:0 0 auto;}
.mk-item + .mk-item{margin-left:clamp(-30px,-2.1vw,-13px);}

.mk-ring{position:relative; display:block; width:clamp(134px,17.1vw,242px); aspect-ratio:1/1;}
.mk-circle{position:absolute; inset:0; width:100%; height:100%; color:#8B98A3;}
.mk-body{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(6px,.85vw,12px);
  padding:0 13%; text-align:center;}

.mk-ic{width:clamp(29px,3.3vw,45px); height:auto; color:#4C6377;}
.mk-jp{font-weight:500; font-size:clamp(12.5px,1.4vw,19px); line-height:1.35;
  letter-spacing:.01em; color:#16202B; word-break:auto-phrase;}
.mk-jp.mk-jp-long{font-size:clamp(11px,1.14vw,15px); letter-spacing:-.01em; white-space:nowrap;}
.mk-en{font-family:var(--serif); font-weight:400; font-size:clamp(8.5px,.76vw,11px);
  letter-spacing:.15em; text-transform:uppercase; color:#647380; line-height:1.4;}

.mk-note{margin:clamp(14px,1.9vw,26px) 0 0; text-align:center;
  font-size:11.5px; line-height:1.85; color:#647380;}

@media (max-width:1000px){
  .mk-item + .mk-item{margin-left:-12px;}
  .mk-item:nth-child(4){margin-left:0;}
  .mk-ring{width:clamp(128px,22.5vw,178px);}
  .mk-note{font-size:11px; text-align:left;}
}
@media (max-width:600px){
  .mk-item + .mk-item{margin-left:-8px;}
  .mk-item:nth-child(3){margin-left:0;}
  .mk-ring{width:min(43vw,164px);}
}

/* 和文の語中改行を防ぐ（「事／業成長」のような折れ方を止める） */
.jp,.lede,.pg-lede,.ct-lede,.mk-note{word-break:auto-phrase; line-break:strict;}

/* ============================================================
   極端に狭い画面（Safariの「ページの拡大／縮小」150%以上＝CSS幅260px前後）
   ヘッダーのロゴ＋ボタンが1行に収まらず、ページ全体がはみ出すのを防ぐ。
   320px以下：詰める（矢印を隠し、余白と文字を小さく）
   270px以下：ヘッダーを固定から外して2行に折り返す
   ============================================================ */
@media (max-width:320px){
  /* 見出しの最小サイズ50pxだと「Training」1語が286px幅を要求し、ページ全体がはみ出す */
  h1{font-size:clamp(34px,16vw,50px);}
  .bar{gap:12px; padding:14px 16px;}
  .brand img{height:18px;}
  .bar .btn{padding:9px 12px; font-size:12.5px; gap:6px; white-space:nowrap;}
  .bar .btn .arw{display:none;}
  /* FVのCTA：nowrapのボタンが1行で収まらないと画面幅を押し広げる */
  [data-p="a"] .actions{flex-direction:column; align-items:stretch;}
  [data-p="a"] .actions .btn{white-space:normal; justify-content:center; text-align:center; padding:14px 16px; font-size:14px;}
  /* プラン行：文字（A〜E）と本文の列を詰める */
  .row{grid-template-columns:40px minmax(0,1fr); gap:12px 12px;}
  .row .ltr{font-size:34px;}
  .row .eng,.row .name{white-space:normal; overflow-wrap:anywhere;}
  /* 5つの目印：2列で収める */
  .mk-ring{width:clamp(104px,44vw,128px);}
  /* フッターの2列・問い合わせのメタ表・プラン行の対象欄を1列に */
  .ft-cols{grid-template-columns:1fr; gap:var(--s3);}
  .ct-meta > div{grid-template-columns:1fr; gap:2px;}
  .row .target{display:block; padding:8px 10px;}
  .row .target i{display:inline-block; margin:0 6px 4px 0;}
}
@media (max-width:270px){
  .bar{position:relative; flex-wrap:wrap; row-gap:10px;}
  .bar .btn{flex:1 1 100%; justify-content:center;}
  #app{--bar-h:0px;}
  [data-p="a"] .copy{padding-top:var(--s4);}
}

/* 低い画面（ノートPC 1440×620 など）でFVのCTAが折り返し線の下に落ちないよう詰める */
@media (min-width:901px) and (max-height:680px){
  .plan .copy{padding-top:28px;}
  .plan .jp{margin-top:16px;}
  .plan .lede{margin-top:16px;}
  .plan .actions{margin-top:28px;}
}

/* ============================================================
   AIブログ（海外一次情報のみ・毎営業日更新）
   ・本文はLPに置かない。カードは画像・日付・出所・見出しのみ
   ・カードはAIブログの記事詳細へリンク（新しいタブ）
   ============================================================ */
.news{
  --l-rule:#E3E7EC; --l-ink:#15191F; --l-ink-2:#4B5560; --l-ink-3:#78838E;
  --l-blue:#12558C; --l-blue-2:#2E7FB8; --l-blue-pale:#C3D8EA; --l-tint:#F2F6FA;
  position:relative; background:#FFFFFF; color:#15191F;
  padding:clamp(72px,9vw,132px) 0 clamp(72px,9vw,128px);
  border-top:1px solid var(--l-rule);
}
.news h2{margin:var(--s1) 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(26px,3.6vw,44px); line-height:1.42; color:var(--l-ink);}
.news .pg-lede{color:var(--l-ink-2);}
.news :focus-visible{outline:2px solid var(--l-ink); outline-offset:3px;}
.news-list{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--l-rule);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px);}
.news-card{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--l-rule); border-radius:2px; overflow:hidden; background:#FFFFFF;
  transition:border-color 240ms var(--ease-in), box-shadow 320ms ease-out;}
.news-card:hover{border-color:var(--l-blue-pale); box-shadow:0 10px 28px rgba(18,85,140,.10);}
.news-card figure{margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--l-tint);}
.news-card figure img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 640ms var(--ease-in);}
.news-card:hover figure img{transform:scale(1.03);}
.news-card .nc-body{display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; gap:12px;}
.news-meta{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.04em; color:var(--l-ink-2);}
.news-meta time{font-weight:700; color:var(--l-ink);}
.news-meta .src{color:var(--l-blue); font-weight:700;}
.news-meta .cat{font-weight:500; font-size:11px; letter-spacing:.06em; color:var(--l-blue);
  background:var(--l-tint); border:1px solid var(--l-blue-pale); border-radius:2px; padding:2px 8px 3px;}
.news-card h3{margin:0; font-weight:700; font-size:15.5px; line-height:1.72;
  letter-spacing:.005em; color:var(--l-ink);}
.news .pg-head{position:relative;}
.news-more{position:absolute; right:0; bottom:6px; margin:0;}
.news-note{margin:var(--s3) 0 0; font-size:13px; line-height:1.9; color:var(--l-ink-3);}
@media (max-width:1100px){ .news-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .news-list{grid-template-columns:1fr;}
  .news-more{position:static; display:block; margin-top:var(--s3);} }

/* ============================================================
   B案：セクションの欧文ラベルを、FVと同じ Cormorant で大きく置く
   ・横の罫は外す（大きさそのものが区切りになるため、罫は過剰）
   ・ウェイトは300のまま。大きくしても和文見出しの読み順を奪わない
   ・参考デッキの「中表紙＝超特大欧文＋小さい和文」の関係を、
     セクション扉として弱めに適用したもの
   ============================================================ */
.eyebrow-l,
.contact .eyebrow{
  display:block;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(46px,6.6vw,104px);
  line-height:.96;
  letter-spacing:.012em;
  text-transform:uppercase;
  gap:0;
}
.eyebrow-l::after,
.contact .eyebrow::after{content:none; display:none;}

.programs .eyebrow-l,
.works .eyebrow-l,
.clients .eyebrow-l{color:#15191F;}
/* ブルー面では「黒」に相当するのが白。ここだけ白で同じ強さを出す */
.contact .eyebrow{color:rgba(255,255,255,.86);}

/* 欧文が主役になったぶん、沿える和文見出しは一段落とす */
.programs h2,
.works h2,
.clients h2{margin-top:14px; font-size:clamp(21px,2.85vw,33px); line-height:1.5;}
.ct-lead h2{margin-top:14px; font-size:clamp(20px,2.6vw,30px); line-height:1.5;}

@media (max-width:900px){
  .eyebrow-l,.contact .eyebrow{font-size:clamp(38px,11vw,58px);}
  .programs h2,.works h2,.clients h2{margin-top:12px; font-size:clamp(19px,5.4vw,24px);}
  .ct-lead h2{margin-top:12px; font-size:clamp(19px,5.2vw,23px);}
}

/* ============================================================
   B案：和文は Noto Sans JP に置き換え、見出しのウェイトを一段落とす
   ・Zen Kaku Gothic New より字面が小さく、線が均質。欧文Cormorantの
     静けさと衝突しない
   ・見出し 700 → 500、サービス名など中見出し 700 → 600
   ============================================================ */
:root{--sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;}

.programs h2,
.works h2,
.clients h2,
.ct-lead h2{font-weight:500; letter-spacing:.01em;}

.jp{font-weight:600;}
.row .name,
.work .w-name,
.dev .d-name,
.wg-head{font-weight:600;}
.pg-lede strong{font-weight:600;}

/* ============================================================
   B案：明るい面をモノトーンに寄せる
   ・トークンを差し替えるだけで、水色→グレー／グレー文字→黒 が一括で通る
   ・カードは「画像は縁まで、本文だけ内側に余白」の構造へ。影は持たせない
   ・ブルーはFVとCONTACTだけに残し、中間のセクションから色を抜く
   ============================================================ */
.programs,
.works,
.clients,
.faq,
.news{
  --l-blue:#15191F;      /* 小さい欧文ラベル：黒 */
  --l-blue-2:#8A8A8A;    /* ホバーなどの中間色：グレー */
  --l-blue-pale:#D5D5D5; /* 水色だったもの：淡いグレー */
  --l-ink-2:#15191F;     /* 本文のグレー：黒 */
  --l-ink-3:#575757;
  --l-rule:#E2E2E2;
  --l-tint:#F5F5F5;
}
.works{background:#F4F4F4;}
.clients{--l-rule:#E4E1D8;}
.programs::before{background:none;}

/* 見出し下の強調はグレーの下地に */
.pg-lede strong{box-shadow:inset 0 -8px 0 rgba(0,0,0,.07);}

/* A–E の文字：淡いグレー → ホバーで黒 */
.row .ltr{color:#D5D5D5;}
.row .ltr::after{background:#D5D5D5;}
.row:hover .ltr{color:#15191F;}
.row:hover .ltr::after{background:#15191F;}
.row:hover{background:#F6F6F6;}

/* カード：角丸なし・影なし・1px罫のみ。画像は縁まで、本文だけ内側に余白 */
.work,
.dev{padding:0; border:1px solid var(--l-rule); border-radius:0; background:#FFFFFF;
  box-shadow:none; overflow:hidden;}
.work:hover,
.dev:hover{border-color:#B9B9B9; box-shadow:none;}
.work .w-body,
.dev .d-body{margin-top:0; padding:clamp(20px,2vw,28px);}
.w-img,
.d-img,
.ph{border-radius:0; border:0; border-bottom:1px solid var(--l-rule);}
.ph{background:repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 10px, rgba(0,0,0,0) 10px 20px), #F2F2F2;}
.ph-l{color:#8A8A8A;}
.ph-t{color:#6B6B6B;}

/* チップ・バッジもモノトーンに */
.row .target{background:#F5F5F5; border-color:var(--l-rule); color:#15191F;}
.row .target i{color:#15191F; border-right-color:var(--l-rule);}
.pending{color:#4A4A4A; background:#F0F0F0; border-color:#DADADA;}

/* リンク：黒文字＋グレー罫、ホバーで罫が黒に */
.row .go,
.textlink-l{color:#15191F; border-bottom-color:#C9C9C9;}
.row:hover .go,
.textlink-l:hover{border-bottom-color:#15191F;}

/* 注記はわずかに落とす程度に */
.works-note,
.clients-note{color:#4B4B4B;}

/* ============================================================
   B案（改）：セクションの欧文ラベルを小さく・グレーに戻す
   ・線は引き続きなし
   ・欧文が小さくなったぶん、和文見出しはサイズを戻す（ウェイトは500のまま）
   ============================================================ */
.eyebrow-l,
.contact .eyebrow{
  font-size:13px;
  line-height:1.4;
  letter-spacing:.26em;
  font-weight:400;
}
.programs .eyebrow-l,
.works .eyebrow-l,
.clients .eyebrow-l{color:#707070;}
.contact .eyebrow{color:rgba(255,255,255,.60);}

.programs h2,
.works h2,
.clients h2{margin-top:var(--s1); font-size:clamp(24px,3.2vw,38px); line-height:1.45;}
.ct-lead h2{margin-top:var(--s1); font-size:clamp(23px,3vw,35px); line-height:1.45;}

@media (max-width:900px){
  .eyebrow-l,.contact .eyebrow{font-size:12px; letter-spacing:.22em;}
  .programs h2,.works h2,.clients h2{margin-top:var(--s1); font-size:clamp(21px,6vw,27px);}
  .ct-lead h2{margin-top:var(--s1); font-size:clamp(20px,5.6vw,26px);}
}

/* FAQもモノトーンに揃える */
.faq{--l-ink-2:#15191F; --l-rule:#E2E2E2;}
.faq .qa-q{color:#D5D5D5;}
.faq .qa:hover .qa-q{color:#15191F;}

/* 「詳しく見る」を外したので、行は2カラム */
.row{grid-template-columns:clamp(78px,7.8vw,124px) minmax(0,1fr);}

/* AIブログもモノトーンに揃える（B案の「明るい面から色を抜く」規律に合わせる） */
.news{--l-ink-2:#15191F; --l-rule:#E2E2E2; --l-tint:#F5F5F5;}
.news .news-card:hover{border-color:#B9B9B9; box-shadow:none;}