/* =========================================================
   YOUR PARTNER — LP（index.html）専用スタイル
   foundations は css/design-system.css を参照（先に読み込むこと）。
   ========================================================= */

/* ---------- ヘッダー ---------- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:40;
  transition:background .3s, box-shadow .3s, backdrop-filter .3s;}
.navbar{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{font-family:var(--geo); font-weight:600; font-size:18px; letter-spacing:.14em; color:#fff;
  transition:color .3s; display:flex; align-items:baseline;}
.brand small{font-family:var(--sans); font-size:10px; letter-spacing:.05em; margin-left:8px; font-weight:400; opacity:.7;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a{font-size:13px; color:rgba(255,255,255,.9); transition:color .25s;}
.nav a:hover{color:#fff;}
.nav .pill{font-size:13px; padding:10px 22px; border-radius:30px; border:1.5px solid rgba(255,255,255,.5); color:#fff;}
.nav .pill:hover{background:rgba(255,255,255,.12);}
/* スクロール後：白面に切替 */
.site-header.scrolled{background:rgba(247,248,251,.86); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line);}
.site-header.scrolled .brand{color:var(--brand);}
.site-header.scrolled .nav a{color:var(--ink);}
.site-header.scrolled .nav a:hover{color:var(--brand);}
.site-header.scrolled .nav .pill{border-color:var(--brand); color:var(--brand);}
.site-header.scrolled .nav .pill:hover{background:var(--brand-tint);}

/* ---------- ヒーロー ---------- */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; color:#fff; overflow:hidden;}
.hero-photo{position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; object-position:72% 45%; z-index:0; will-change:transform;}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,13,28,.78) 0%, rgba(12,13,28,.45) 36%, rgba(12,13,28,.05) 66%),
    linear-gradient(0deg, rgba(12,13,28,.55), transparent 42%);}
.hero-inner{position:relative; z-index:2; width:100%;}
.hero h1{color:#fff; font-size:clamp(34px,5.6vw,60px); font-weight:700; line-height:1.42; margin-bottom:30px; text-wrap:balance;}
.hero h1 .mark{position:relative; white-space:nowrap;}
.hero h1 .mark::after{content:""; position:absolute; left:0; right:0; bottom:.02em; height:.13em; background:var(--accent); opacity:.92;
  transform:scaleX(1); transform-origin:left;}
@keyframes underline{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.hero.is-in h1 .mark::after{animation:underline .7s .55s cubic-bezier(.2,.7,.2,1) both;}
.hero p.sub{color:rgba(255,255,255,.86); font-size:clamp(15px,1.6vw,18px); font-weight:300; letter-spacing:.04em; margin-bottom:42px;}
.scrollcue{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--geo); font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.6); text-align:center;}
.scrollcue span{display:block; width:1px; height:42px; margin:10px auto 0; background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:cue 2s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:scaleY(.4); opacity:.4; transform-origin:top;}50%{transform:scaleY(1); opacity:1; transform-origin:top;}}

/* ---------- スマホ専用改行 ----------
   <br class="sp"> はスマホ（≤560px）でのみ改行として働く。 */
br.sp{display:none;}
@media (max-width:560px){
  br.sp{display:inline;}
}

/* ---------- 共感 ---------- */
.empathy{text-align:center;}
.empathy h2{font-size:clamp(24px,3.4vw,38px);}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); margin-top:64px;}
.tile{display:flex; flex-direction:column; align-items:center; gap:20px;}
.tile .ic{width:84px; height:84px; border-radius:50%; border:1.5px solid var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center; background:var(--surface); transition:.25s;}
.tile:hover .ic{background:var(--brand); color:#fff; transform:translateY(-4px); box-shadow:0 12px 30px rgba(46,49,146,.18);}
.tile .ic .num{font-family:var(--geo); font-size:13px; letter-spacing:.1em;}
.tile p{font-size:14px; font-weight:500; color:var(--ink-strong);}

/* ---------- 共通：スプリット ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,90px); align-items:center;}
.split.rev .txt{order:2;}
.photo{position:relative; border-radius:14px; overflow:hidden; background:#11141e;
  box-shadow:0 30px 70px rgba(32,35,95,.14);}
.photo img{width:100%; height:100%; object-fit:cover;}
.concept h2{font-size:clamp(26px,4vw,44px); line-height:1.5; margin-bottom:22px;}
.concept .photo{aspect-ratio:4/5;}
.concept .txt{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.concept .txt .btn{margin-top:18px;}

/* ---------- 4領域 ---------- */
.services{background:linear-gradient(180deg,#fff,#fbfcfe); text-align:center;}
.services h2{font-size:clamp(24px,3.4vw,38px);}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,26px); margin-top:64px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:38px 26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; text-align:left;
  transition:transform .25s, box-shadow .25s, border-color .25s;}
.card:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(32,35,95,.1); border-color:var(--brand-tint);}
.card .ic{width:66px; height:66px; color:var(--brand);}
.card .no{font-family:var(--geo); font-size:11px; letter-spacing:.2em; color:var(--accent-ink);}
.card h3{font-size:19px; line-height:1.5;}
.card p{font-size:13px; line-height:1.95; color:#6f6f78;}

/* ---------- 伴走スタイル（3つの約束） ---------- */
.style{text-align:center; transition:background .35s ease;}
.style h2{font-size:clamp(24px,3.4vw,38px);}
.promises{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,5vw,60px); margin-top:68px;}
.promise{display:flex; flex-direction:column; align-items:center; gap:22px;}
.promise .ghost{display:none;}
.promise h3{font-size:19px;}
.promise p{font-size:13px; color:#6f6f78; line-height:1.95; max-width:18em;}
.promise .ic img{display:block; object-fit:contain;}

/* ===== 見せ方 K：背景に極大番号（エディトリアル） ===== */
.style[data-os="K"] .promises{gap:clamp(20px,2.6vw,34px); margin-top:60px;}
.style[data-os="K"] .promise{position:relative; align-items:flex-start; text-align:left; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:34px 28px 30px;
  overflow:hidden; box-shadow:0 14px 40px rgba(32,35,95,.05); transition:transform .25s, box-shadow .25s;}
.style[data-os="K"] .promise:hover{transform:translateY(-5px); box-shadow:0 22px 48px rgba(32,35,95,.1);}
.style[data-os="K"] .promise .ghost{display:block; position:absolute; top:-20px; right:4px; z-index:0;
  font-family:var(--geo); font-size:118px; font-weight:600; color:var(--brand-tint); line-height:1;}
.style[data-os="K"] .promise .ic{position:relative; z-index:1; width:84px; height:84px;
  display:flex; align-items:center; justify-content:center;}
.style[data-os="K"] .promise .ic img{width:100%; height:100%;}
.style[data-os="K"] .promise h3,.style[data-os="K"] .promise p{position:relative; z-index:1;}

/* ---------- なぜCARVANCL ---------- */
.why{background:#fff;}
.why .photo{aspect-ratio:5/4;}
.why h2{font-size:clamp(24px,3.4vw,38px); line-height:1.5; margin-bottom:22px;}
.why .txt{display:flex; flex-direction:column; align-items:flex-start;}
.stats{display:flex; gap:clamp(32px,5vw,56px); margin-top:36px; flex-wrap:wrap;}
.stat{display:flex; flex-direction:column;}
.stat .num{font-family:var(--geo); font-size:42px; font-weight:600; color:var(--brand); line-height:1;}
.stat .num.sm{font-size:24px; line-height:1.5;}
.stat .lb{font-size:12px; color:#8a8a93; margin-top:9px; letter-spacing:.06em;}

/* ---------- 伴走の流れ ---------- */
.flow{background:var(--brand-tint); text-align:center;}
.flow h2{font-size:clamp(24px,3.4vw,38px);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,32px); margin-top:68px; position:relative;}
.step{position:relative; display:flex; flex-direction:column; align-items:center; gap:18px;}
.step .cwrap{position:relative; z-index:2;}
.step .circle{width:118px; height:118px; border-radius:50%; background:#fff; border:1.5px solid var(--brand);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 14px 34px rgba(32,35,95,.08);}
.step .badge{position:absolute; top:-3px; right:-3px; z-index:3; width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; font-family:var(--geo); font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(217,120,123,.35);}
.step .circle img{width:62%; height:62%; object-fit:contain; display:block;}
.step h3{font-size:17px; font-weight:600;}
.step::after{content:""; position:absolute; top:58px; left:calc(50% + 67px); width:calc(100% - 134px); height:0;
  border-top:1.5px dashed color-mix(in oklab,var(--brand) 40%, transparent); z-index:1;}
.step:last-child::after{display:none;}

/* ---------- CTA ---------- */
.cta{position:relative; color:#fff; text-align:center; overflow:hidden; min-height:62vh;
  display:flex; align-items:center;}
.cta-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 42%; z-index:0;}
.cta-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(12,13,28,.62), rgba(12,13,28,.28) 55%, rgba(12,13,28,.5));}
.cta-inner{position:relative; z-index:2; width:100%;}
.cta h2{color:#fff; font-size:clamp(26px,3.8vw,44px); line-height:1.6; margin-bottom:38px;}

/* ---------- フッター ---------- */
footer{background:#fff; border-top:1px solid var(--line); padding:60px 0 44px;}
.foot{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:36px;}
.foot .brand{color:var(--brand); display:flex; margin-bottom:12px;}
.foot .cr{font-family:var(--geo); font-size:11px; color:#a3a3ac; letter-spacing:.08em;}
.fnav{display:flex; gap:clamp(36px,6vw,64px); flex-wrap:wrap;}
.fcol{display:flex; flex-direction:column; gap:11px;}
.fcol .ttl{font-size:12px; font-weight:600; color:var(--ink-strong); margin-bottom:4px;}
.fcol a{font-size:12px; color:#74747c;}
.fcol a:hover{color:var(--brand);}

/* ---------- 下層ページ用ヒーロー（会社概要・お問い合わせで共用） ----------
   元は css/company.css にあったが、複数ページで使うためここへ移動。 */
.page-hero{position:relative; background:var(--brand-deep); color:#fff; overflow:hidden;
  padding:clamp(150px,20vh,210px) 0 clamp(70px,9vw,100px);}
.page-hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% 0%, color-mix(in oklab,var(--accent) 26%, transparent), transparent 52%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in oklab,var(--brand) 60%, transparent), transparent 60%);}
.page-hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:5px 5px; mix-blend-mode:overlay;}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .eyebrow{color:#fff;}
.page-hero h1{font-family:var(--serif); color:#fff; font-weight:700; font-size:clamp(34px,5.4vw,58px);
  letter-spacing:.04em; line-height:1.4; margin:24px 0 0;}
.page-hero .crumb{font-family:var(--geo); font-size:12px; letter-spacing:.16em; color:rgba(255,255,255,.6); margin-top:26px;}
.page-hero .crumb a{color:rgba(255,255,255,.6);}
.page-hero .crumb a:hover{color:#fff;}
@media (max-width:900px){
  .page-hero{padding:clamp(120px,18vh,160px) 0 clamp(56px,9vw,80px);}
}

/* =========================================================
   モーション：上質なスクロール演出（リッチ版）
   方針：可視の最終状態を base にし、is-in 時のみ隠れた状態から animation で現す。
   → no-JS・スクショ・印刷でも内容が必ず見える。
   ========================================================= */
@keyframes rise{from{opacity:0; transform:translateY(22px) scale(.985);} to{opacity:1; transform:none;}}
@keyframes heroRise{from{opacity:0; transform:translateY(28px); filter:blur(7px);} to{opacity:1; transform:none; filter:blur(0);}}
@keyframes kenburns{from{scale:1.14;} to{scale:1;}}
@keyframes imgReveal{from{clip-path:inset(0 0 100% 0); transform:scale(1.14);} to{clip-path:inset(0 0 0 0); transform:scale(1);}}
@keyframes lineGrow{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes dotPop{0%{transform:scale(.2); opacity:0;} 60%{transform:scale(1.35);} 100%{transform:scale(1); opacity:1;}}

[data-reveal].is-in{animation:rise .75s cubic-bezier(.2,.7,.2,1) both;}
/* グリッド子要素のスタッガー */
.tiles.is-in .tile, .cards.is-in .card, .promises.is-in .promise, .steps.is-in .step{
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.is-in .tile:nth-child(2), .is-in .card:nth-child(2), .is-in .promise:nth-child(2), .is-in .step:nth-child(2){animation-delay:.1s;}
.is-in .tile:nth-child(3), .is-in .card:nth-child(3), .is-in .promise:nth-child(3), .is-in .step:nth-child(3){animation-delay:.2s;}
.is-in .tile:nth-child(4), .is-in .card:nth-child(4), .is-in .step:nth-child(4){animation-delay:.3s;}

/* アイブロウのコーラルドットがポップ */
.eyebrow.is-in::before{animation:dotPop 1s cubic-bezier(.2,.7,.2,1) .12s both;}

/* 写真は内側でワイプ＋寄り（コンテナの影は保持） */
.photo[data-reveal].is-in img{animation:imgReveal 1.15s cubic-bezier(.6,.04,.1,1) both;}

/* ヒーロー：写真は Ken Burns、コピーはブラー＋上げで段階表示 */
.hero-photo{animation:kenburns 14s cubic-bezier(.2,.5,.2,1) both;}
.hero.is-in .hero-inner > *{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both;}
.hero.is-in .hero-inner > *:nth-child(2){animation-delay:.14s;}
.hero.is-in .hero-inner > *:nth-child(3){animation-delay:.28s;}
.hero.is-in .hero-inner > *:nth-child(4){animation-delay:.42s;}

/* フロー：点線コネクタが順に伸びる */
.step::after{transform-origin:left center;}
.steps.is-in .step::after{animation:lineGrow .55s cubic-bezier(.4,0,.2,1) both;}
.steps.is-in .step:nth-child(1)::after{animation-delay:.35s;}
.steps.is-in .step:nth-child(2)::after{animation-delay:.55s;}
.steps.is-in .step:nth-child(3)::after{animation-delay:.75s;}

/* CTA：スクロールインで Ken Burns */
.cta-photo[data-kenburns].kb{animation:kenburns 8s cubic-bezier(.2,.5,.2,1) both;}

/* ---------- JS有効時のみ：リビール前は隠す ----------
   <head> の1行スクリプトが html に .js を付与する。
   素のHTML（no-JS）や印刷では .js が付かない／screen 限定のため常に可視のまま。
   ＝「可視 base」の方針を保ちつつ、アニメ開始前に終了状態が見えるチラつきを防ぐ。 */
@media screen and (prefers-reduced-motion: no-preference){
  .js [data-reveal]:not(.is-in){opacity:0;}
  .js .hero:not(.is-in) .hero-inner > *{opacity:0;}
  .js .cta-photo[data-kenburns]:not(.kb){scale:1.14;}
}

/* スクロール進捗バー */
.progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:50;
  background:linear-gradient(90deg, var(--brand), var(--accent)); transition:width .12s linear;}

/* ナビ下線 / カードアイコンの微反応 */
.nav a:not(.pill){position:relative;}
.nav a:not(.pill)::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s;}
.nav a:not(.pill):hover::after{transform:scaleX(1);}
.card .ic{transition:transform .25s;}
.card:hover .ic{transform:scale(1.08) translateY(-2px);}

/* ハンバーガー（モバイルのみ表示） */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; z-index:60;}
.nav-toggle span{display:block; height:2px; width:100%; background:#fff; border-radius:2px;
  transition:transform .3s, opacity .2s, background .3s;}
.site-header.scrolled .nav-toggle span{background:var(--brand);}
.site-header.nav-open .nav-toggle span{background:var(--brand);}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal].is-in,.tiles.is-in .tile,.cards.is-in .card,.promises.is-in .promise,.steps.is-in .step,
  .hero.is-in .hero-inner>*,.photo[data-reveal].is-in img,.steps.is-in .step::after,
  .eyebrow.is-in::before,.hero-photo,.cta-photo[data-kenburns].kb{animation:none !important;}
  .photo[data-reveal].is-in img{clip-path:none !important;}
  .hero h1 .mark::after{transform:scaleX(1) !important;}
  .scrollcue span{animation:none;}
  .hero-photo{position:absolute; inset:0; height:100%; scale:1 !important;}
  .progress{display:none;}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr); gap:22px;}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:48px;}
  .step::after{display:none;}
}
@media (max-width:900px){
  section{padding:clamp(64px,11vw,96px) 0;}
  .split{grid-template-columns:1fr; gap:36px;}
  .split.rev .txt{order:0;}
  .concept .photo,.why .photo,.message .photo{aspect-ratio:16/10;}
  .promises{grid-template-columns:1fr; max-width:400px; margin-inline:auto;}

  /* モバイルナビ：ハンバーガー＋スライドダウン */
  .nav-toggle{display:flex;}
  .nav{position:fixed; top:0; left:0; right:0; height:auto; padding:84px 28px 30px;
    flex-direction:column; align-items:stretch; gap:0; background:rgba(247,248,251,.98);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 16px 36px rgba(20,22,40,.14);
    transform:translateY(-102%); transition:transform .38s cubic-bezier(.2,.7,.2,1); z-index:50;}
  .site-header.nav-open .nav{transform:translateY(0);}
  .nav a{color:var(--ink); font-size:16px; padding:17px 4px; border-bottom:1px solid var(--line);}
  .nav a:not(.pill)::after{display:none;}
  .nav a.pill{border:1.5px solid var(--brand); color:var(--brand); text-align:center; justify-content:center;
    margin-top:22px; padding:15px; font-size:15px;}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr; max-width:400px; margin-inline:auto; gap:30px;}
  .tiles{grid-template-columns:repeat(2,1fr); max-width:340px; margin-inline:auto; gap:48px 20px;}
  .steps{grid-template-columns:repeat(2,1fr); gap:18px; row-gap:36px;}
  .navbar{height:64px;}
  .hero h1 br{display:none;}
  .scrollcue{display:none;}
  .foot{flex-direction:column; gap:30px;}
  .btn{padding:14px 28px;}
}
@media (max-width:380px){
  .steps{grid-template-columns:1fr; max-width:220px; margin-inline:auto;}
}