/* =========================================================
   MiAI面談（社内用LP）
   ワイヤー：Figma「MiAI社内用LP」node 21:326
   トンマナ：MiAIプロダクトサイト（lp.miai-app.com）の色・書体・ボタンに合わせる
   ========================================================= */
:root{
  --ink:#101010;            /* 本文・見出し */
  --ink-2:#5e5e5e;          /* 説明文 */
  --muted:#888;             /* 補足・コピーライト */
  --paper:#f4f2ef;          /* 地（温かみのあるオフホワイト） */
  --paper-2:#faf9f7;        /* 地の明るい方 */
  --card:#fff;
  --line:rgba(98,98,98,.18);
  --ph:#ebe8e4;             /* 画像の仮置き */
  --accent:#FF2400;         /* コーポレートカラー（刷新後・miai-corporate と同じ） */
  --accent-2:#ff6a48;       /* グラデーションの明るい側 */
  --accent-soft:#ffebe7;

  --font:"Inter Tight","Noto Sans JP",-apple-system,"system-ui","Helvetica Neue",HelveticaNeue,"ヒラギノ角ゴ Pro W3",Roboto,"Segoe UI",Meiryo,sans-serif;
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --shadow-s:0 6px 20px rgba(0,0,0,.06);
  --neu:-6px 7px 10px rgba(0,0,0,.05),inset -2px 2px 3px rgba(255,255,255,.9);
  --neu-hover:-6px 9px 14px rgba(0,0,0,.08),inset -2px 2px 3px rgba(255,255,255,.9);
  --r-s:8px; --r:16px; --r-l:24px; --r-xl:40px;
  --w:1152px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  font-feature-settings:"palt"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
p{text-wrap:pretty}   /* 文末の1文字だけが次の行に落ちるのを防ぐ */
.wrap{max-width:calc(var(--w) + 128px);margin:0 auto;padding-inline:64px}
.sec{padding-block:96px}
.sec-ttl{font-size:32px;font-weight:700;line-height:1.4;letter-spacing:.04em;text-align:center}
.sec-ttl em{font-style:normal;color:var(--accent)}
.brk-sp{display:none}
.en{font-family:"Inter Tight",sans-serif}

/* ---------- ボタン（プロダクトサイトと同じ：黒の塗り／白のふくらみ） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 32px;border-radius:999px;font-weight:700;font-size:14px;
  letter-spacing:.06em;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.2)}
.btn--ghost{background:#fbfbfb;color:var(--accent);box-shadow:var(--neu)}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:var(--neu-hover)}
.btn--lg{height:60px;min-width:220px;font-size:15px}
.btn--sm{height:40px;padding:0 22px;font-size:13px}
/* 遷移先が未定のボタンは押せない状態にしておく（README「先方から集めるもの」） */
.btn[aria-disabled="true"]{cursor:default}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;height:72px;
  background:rgba(250,249,247,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.is-scrolled{border-bottom-color:var(--line);background:rgba(250,249,247,.94)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:14px}
.logo .mark{width:31px;height:31px}
.logo .type{width:87px;height:32px}
/* ヘッダーのロゴだけ小さく。フッターは上の大きさのまま */
.site-header .logo{gap:10px}
.site-header .logo .mark{width:24px;height:24px}
.site-header .logo .type{width:67px;height:25px}
.brand-sub{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.gnav{display:flex;align-items:center;gap:32px}
.gnav-links{display:flex;gap:28px;font-size:14px;font-weight:600}
.gnav-links a{position:relative;padding:4px 0}
.gnav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.gnav-links a:hover::after{transform:scaleX(1)}

/* ---------- FV ---------- */
.kv{position:relative;overflow:hidden;padding-block:120px 128px;
  background:radial-gradient(1200px 600px at 80% 20%,#fff 0%,rgba(255,255,255,0) 60%),var(--paper-2)}
.kv-orb{position:absolute;border-radius:50%;pointer-events:none}
.kv-orb--2{width:56px;height:56px;right:34%;top:64px;background:radial-gradient(circle at 30% 30%,#ff7a5c,var(--accent))}
.kv-orb--3{width:28px;height:28px;left:7%;bottom:88px;background:radial-gradient(circle at 30% 30%,#ff7a5c,var(--accent))}
.kv-inner{position:relative;display:grid;align-items:center;row-gap:8px;column-gap:20px;
  grid-template-columns:minmax(min-content,640px) minmax(280px,420px);
  grid-template-areas:"ttl image" "line image" "sub image"}
.kv-ttl{grid-area:ttl;max-width:640px;font-size:52px;font-weight:700;line-height:1.35;letter-spacing:.04em;white-space:nowrap}
.kv-ttl .hl{display:inline-block;color:var(--accent);background:#fff;border-radius:10px;
  padding:0 .12em;margin:0 .06em;box-shadow:var(--shadow-s)}
/* キービジュアル見出し直下の装飾ライン(左：アクセントカラーの太い線／右：グレーの細い線) */
.kv-divider{grid-area:line;display:flex;align-items:center;max-width:640px;margin:20px 0 4px}
.kv-divider-accent{flex:0 0 auto;width:72px;height:3px;border-radius:2px;background:var(--accent)}
.kv-divider-rest{flex:1 1 auto;height:1px;background:var(--line)}
/* 見出し＋直後のscope-noteを1つのまとまりに見せるため、ここの余白は詰める
   (ボタンとの間はkv-actionsのmargin-topで広くとって分離する) */
.kv-ttl .product{display:flex;align-items:baseline;gap:12px;margin-top:10px;margin-bottom:8px;font-size:64px;font-weight:800;letter-spacing:.01em;white-space:normal}
.kv-ttl .product small{font-size:14px;font-weight:700;color:var(--ink-2);letter-spacing:.1em}
.scope{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-2)}
.scope-note{font-size:18px;color:#101010;letter-spacing:.14em}
/* 見出し＋scope-noteのまとまりから、ボタンのまとまりをはっきり分離する */
.kv-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:56px}
.kv-sub{grid-area:sub;max-width:640px}
.kv-image{grid-area:image}
.kv-image img{display:block;width:130%;max-width:none;height:auto}

/* ---------- 導入企業ロゴ ---------- */
/* ロゴ画像の地が白なので、帯も白でそろえる */
.clients{background:#fff;padding-block:36px;overflow:hidden}
.clients-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.clients-set{display:flex;align-items:center;gap:32px;padding-right:32px}
/* 各社ロゴは原寸の縦横比がバラバラなので、lp.miai-app.com と同じ
   180x82.5 の箱に object-fit:contain で収めて見た目のサイズを揃える */
.clients-set img{width:180px;height:82.5px;object-fit:contain}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- お悩み ---------- */
.pain .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pain-card{background:var(--card);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.pain-card .ph{height:auto;aspect-ratio:3/2;overflow:hidden}
.pain-card .ph img{width:100%;height:100%;object-fit:contain;opacity:1}
.pain-card h3{margin-top:24px;font-size:18px;font-weight:700;line-height:1.55;text-align:center}
.pain-card p{margin-top:12px;font-size:14px;color:var(--ink-2);line-height:1.8}
.bridge{margin-top:72px;text-align:center}
.bridge p{font-size:26px;font-weight:700;letter-spacing:.04em}
.bridge p .hl{color:var(--accent)}
.bridge .arrow{width:88px;height:40px;margin:24px auto 0;background:linear-gradient(180deg,var(--accent-2),var(--accent));
  clip-path:polygon(0 0,100% 0,50% 100%)}

/* 画像の仮置き（写真・図版が届いたら <img> に差し替える） */
.ph{display:grid;place-items:center;background:var(--ph);border-radius:12px;color:var(--muted)}
.ph img{width:24px;height:24px;opacity:.55}

/* ---------- 解決 ----------
   lp.miai-app.com の「導入企業で出ている、実際の数字」セクション同様、
   オレンジの背景がぼんやり動くデザインにする。参考元はWebGL(canvas)だが、
   ここでは同じ見た目のねらいを、既存の .kv-orb と同じ手法(円をCSS
   アニメーションで漂わせる)で軽量に再現している。filter:blur/backdrop-filter は
   重い上に環境によって描画が不安定になることがあるため使わず、グラデーション
   自体を多段の stop でなだらかにすることでぼかして見せている。
   色は参考元(#ED5303)に合わせず、このLPのコーポレートカラー(--accent)に。 */
.solution{position:relative;overflow:hidden;padding-block:120px;isolation:isolate}
.solution .ttl-wrap{text-align:center}
.solution-bg{position:absolute;inset:0;z-index:-1;background:var(--accent)}
.solution-bg::before,.solution-bg::after{content:"";position:absolute;inset:-20%}
.solution-bg::before{
  background:
    radial-gradient(40% 40% at 22% 28%,rgba(255,255,255,.38) 0%,rgba(255,255,255,.22) 32%,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 75%),
    radial-gradient(44% 44% at 82% 70%,var(--accent-2) 0%,rgba(255,106,72,.55) 32%,rgba(255,106,72,.18) 55%,rgba(255,106,72,0) 75%);
  animation:solutionDrift1 11s ease-in-out infinite;
}
.solution-bg::after{
  background:
    radial-gradient(36% 36% at 78% 18%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.16) 32%,rgba(255,255,255,.05) 55%,rgba(255,255,255,0) 75%),
    radial-gradient(42% 42% at 18% 78%,rgba(120,10,0,.42) 0%,rgba(120,10,0,.24) 32%,rgba(120,10,0,.08) 55%,rgba(120,10,0,0) 75%);
  animation:solutionDrift2 13.5s ease-in-out infinite;
}
/* lp.miai-app.com のWebGLメッシュに近づけるため、2点往復ではなく
   複数キーフレームで不規則に動かし、周期も短くして動きを強くしている */
@keyframes solutionDrift1{
  0%{transform:translate(-14%,-10%) scale(1) rotate(0deg)}
  25%{transform:translate(10%,-14%) scale(1.28) rotate(9deg)}
  50%{transform:translate(16%,12%) scale(1.05) rotate(-6deg)}
  75%{transform:translate(-10%,14%) scale(1.32) rotate(5deg)}
  100%{transform:translate(-14%,-10%) scale(1) rotate(0deg)}
}
@keyframes solutionDrift2{
  0%{transform:translate(12%,10%) scale(1.15) rotate(0deg)}
  30%{transform:translate(-14%,6%) scale(1) rotate(-8deg)}
  60%{transform:translate(-8%,-14%) scale(1.3) rotate(6deg)}
  100%{transform:translate(12%,10%) scale(1.15) rotate(0deg)}
}
.solution .sec-ttl{color:#fff}
.solution .sec-ttl em{color:var(--accent);background:#fff;border-radius:10px;
  padding:0 .12em;margin:0 .06em;box-shadow:var(--shadow-s)}
.solution-list{max-width:960px;margin:48px auto 0;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-l);
  box-shadow:var(--shadow);overflow:hidden}
.solution-row{display:grid;grid-template-columns:80px 1fr 420px;gap:28px;align-items:center;padding:30px 44px}
.solution-row + .solution-row{border-top:1px solid rgba(255,255,255,.24)}
.solution-row .no{font-size:36px;font-weight:800;color:#fff;line-height:1}
.solution-row h3{font-size:22px;font-weight:700;line-height:1.5;color:#fff}
.solution-row p{font-size:16px;font-weight:700;color:#fff}

/* ---------- 導入効果（カルーセル） ---------- */
.usecase{overflow:hidden;background:var(--paper-2)}
.carousel{position:relative;margin-top:56px}
.carousel-view{position:relative;height:380px}
.carousel-track{position:absolute;top:0;left:50%;display:flex;gap:24px;will-change:transform}
.carousel-track.is-anim{transition:transform .7s var(--ease)}
.voice{flex:0 0 720px;height:360px;display:flex;background:var(--card);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow);opacity:.45;transform:scale(.94);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.voice.is-active{opacity:1;transform:none}
.voice .ph{flex:0 0 280px;border-radius:0}
/* 実写を入れたカードだけ、写真の比率(1145x1374)に合わせて幅を調整し見切れを防ぐ */
.voice-photo{flex:0 0 300px;overflow:hidden}
/* picture要素はデフォルトで高さがコンテンツに依存するため、明示的に100%を与えて img の height:100% を効かせる */
.voice-photo picture{display:block;width:100%;height:100%}
.voice-photo img{width:100%;height:100%;object-fit:cover;opacity:1}
.voice-body{padding:40px 36px;display:flex;flex-direction:column;gap:16px}
.role{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--accent);
  border-radius:4px;padding:4px 10px;line-height:1.4}
.voice h3{font-size:21px;font-weight:700;line-height:1.5}
.voice p{font-size:14px;color:var(--ink-2);line-height:1.9}
.carousel-btn{position:absolute;top:157px;z-index:2;width:48px;height:48px;border-radius:50%;border:0;
  background:#fbfbfb;box-shadow:var(--neu);cursor:pointer;display:grid;place-items:center;
  transition:transform .3s var(--ease),box-shadow .3s}
.carousel-btn:hover{transform:scale(1.06);box-shadow:var(--neu-hover)}
.carousel-btn::before{content:"";width:10px;height:10px;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
.carousel-btn--prev{left:calc(50% - 384px)}
.carousel-btn--prev::before{transform:translateX(2px) rotate(-135deg)}
.carousel-btn--next{right:calc(50% - 384px)}
.carousel-btn--next::before{transform:translateX(-2px) rotate(45deg)}
.dots{display:flex;justify-content:center;gap:12px;margin-top:20px}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#d6d2cd;cursor:pointer;
  transition:width .4s var(--ease),background .4s}
.dots button.is-active{width:28px;background:var(--accent)}

/* ---------- 中間CV ---------- */
.cv-mid{padding-block:0 96px;background:var(--paper-2)}
.cv-mid-box{background:var(--card);border-radius:var(--r-xl);padding:64px;text-align:center;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
.cv-mid-box::before{content:"";position:absolute;width:280px;height:280px;left:-90px;bottom:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,72,.3),rgba(255,36,0,0) 70%)}
.cv-mid-box::after{content:"";position:absolute;width:220px;height:220px;right:-60px;top:-100px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,72,.26),rgba(255,36,0,0) 70%)}
.cv-mid h2{position:relative;font-size:26px;font-weight:700;line-height:1.5}
.cv-mid h2 .hl{color:var(--accent)}
.cv-mid p{position:relative;margin-top:14px;font-size:15px;color:var(--ink-2)}
.cv-mid .btn-row{position:relative;justify-content:center;margin-top:32px}

/* ---------- できること ---------- */
.feature-rows{display:flex;flex-direction:column;gap:72px;margin-top:64px}
.feature-row{display:grid;grid-template-columns:520px 1fr;gap:64px;align-items:center}
.feature-row.is-rev{grid-template-columns:1fr 520px}
.feature-row.is-rev .feature-fig{order:2}
.feature-fig{position:relative}
.feature-fig .ph{height:320px;border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.feature-fig .ph::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;left:-60px;top:-70px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));opacity:.9}
.feature-row.is-rev .feature-fig .ph::before{left:auto;right:-60px;top:auto;bottom:-70px}
.feature-fig .ph img{position:relative;width:100%;height:100%;object-fit:cover;opacity:1}
.feature-fig .ph:has(img[src$=".svg"]) img{width:24px;height:24px;object-fit:contain}
.feature-head{display:flex;align-items:center;gap:14px}
.feature-head .no{font-size:40px;font-weight:800;color:var(--accent);line-height:1}
.feature-head h3{font-size:26px;font-weight:700;line-height:1.45}
.feature-txt p{margin-top:20px;font-size:15px;color:var(--ink-2);line-height:1.95}

/* ---------- 特徴 ---------- */
.strength{background:var(--paper-2)}
.strength .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.strength-item{text-align:center}
.strength-icon{width:140px;height:140px;margin:0 auto;border-radius:50%;background:var(--accent-soft);
  display:grid;place-items:center}
.strength-icon img{width:64px;height:64px}
.strength-item h3{margin-top:24px;font-size:16px;font-weight:700;line-height:1.6;text-wrap:balance}
.strength-item p{margin-top:10px;font-size:13px;color:var(--ink-2);line-height:1.75}

/* ---------- 採用面談バナー ---------- */
.recruit{padding-block:24px 96px;background:var(--paper-2)}
.recruit-banner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:48px 56px;
  border-radius:var(--r-l);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(110deg,var(--accent) 0%,var(--accent-2) 100%)}
.recruit-banner::after{content:"";position:absolute;right:220px;top:-80px;width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.12)}
.recruit-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent);
  background:#fff;border-radius:4px;padding:3px 10px}
.recruit-banner h2{margin-top:12px;font-size:26px;font-weight:700;letter-spacing:.04em}
.recruit-banner .btn{position:relative;z-index:1;background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.recruit-banner .btn:hover{transform:translateY(-2px)}
.recruit-banner .btn .arw{color:var(--accent)}

/* ---------- 導入までの流れ ---------- */
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;position:relative}
.flow-steps::before{content:"";position:absolute;top:32px;left:12.5%;right:12.5%;height:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px);opacity:.5}
.step{position:relative;text-align:center}
.step .num{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-size:24px;font-weight:800;
  box-shadow:0 8px 18px rgba(255,36,0,.26)}
.step h3{margin-top:20px;font-size:17px;font-weight:700}
.step p{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.75;padding-inline:8px}

/* ---------- FAQ ---------- */
.faq{background:var(--paper-2)}
.faq-list{max-width:960px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-s)}
.faq-item summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 28px;cursor:pointer;
  font-size:16px;font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q,.faq-a-label{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:800}
.faq-q{background:var(--accent);color:#fff}
.faq-item summary .t{flex:1 1 auto}
.faq-toggle{position:relative;flex:0 0 auto;width:13px;height:13px}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:0;top:5.75px;width:13px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease)}
.faq-toggle::after{transform:rotate(90deg)}
.faq-item[open] .faq-toggle::after{transform:rotate(0)}
.faq-a{display:flex;gap:16px;padding:0 28px 24px;font-size:14px;color:var(--ink-2)}
.faq-a-label{background:var(--accent-soft);color:var(--accent)}
.faq-a p{padding-top:4px}

/* ---------- 最終CV ---------- */
.cv-final{position:relative;overflow:hidden;background:var(--accent);color:#fff;text-align:center;
  border-radius:var(--r-xl);padding-block:104px}
/* 「解決」セクション(.solution-bg)と同じメッシュ状グラデーションにして、動きをはっきり見せる */
.cv-final::before,.cv-final::after{content:"";position:absolute;inset:-20%}
.cv-final::before{
  background:
    radial-gradient(40% 40% at 22% 28%,rgba(255,255,255,.38) 0%,rgba(255,255,255,.22) 32%,rgba(255,255,255,.08) 55%,rgba(255,255,255,0) 75%),
    radial-gradient(44% 44% at 82% 70%,var(--accent-2) 0%,rgba(255,106,72,.55) 32%,rgba(255,106,72,.18) 55%,rgba(255,106,72,0) 75%);
  animation:solutionDrift1 11s ease-in-out infinite;
}
.cv-final::after{
  background:
    radial-gradient(36% 36% at 78% 18%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.16) 32%,rgba(255,255,255,.05) 55%,rgba(255,255,255,0) 75%),
    radial-gradient(42% 42% at 18% 78%,rgba(120,10,0,.42) 0%,rgba(120,10,0,.24) 32%,rgba(120,10,0,.08) 55%,rgba(120,10,0,0) 75%);
  animation:solutionDrift2 13.5s ease-in-out infinite;
}
.cv-final .wrap{position:relative;z-index:1}
.cv-final h2{font-size:34px;font-weight:700;line-height:1.5;letter-spacing:.04em}
.cv-final p{margin-top:16px;font-size:15px;opacity:.92}
.cv-final .btn-row{justify-content:center;margin-top:40px}
.cv-final .btn--ghost{color:var(--accent)}

/* ---------- フッター（lp.miai-app.com の footer 構成に合わせる：上部CTA＋ぼかしグロー＋3カラム） ---------- */
/* FAQとフッターを1枚の背景として扱い、ぼかしグローがセクション境界で見切れないようにする */
.faq-footer-bg{position:relative;overflow:hidden;background:var(--paper-2)}
.footer{position:relative;background:var(--paper-2);color:var(--ink)}
.footer-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;pointer-events:none}
.footer-glow--left{width:280px;height:280px;left:-90px;top:10px;background:var(--accent)}
.footer-glow--right{width:280px;height:280px;right:-90px;top:150px;background:var(--accent-2)}
.footer-cta{position:relative;text-align:center;padding-block:88px 80px}
.footer-cta h2{font-size:30px;font-weight:700;line-height:1.55}
.footer-cta p{max-width:520px;margin:16px auto 0;font-size:15px;color:var(--ink-2);line-height:1.9}
.footer-cta .btn-row{justify-content:center;margin-top:32px}
.footer-grid{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;
  padding-top:48px;border-top:1px solid var(--line)}
.footer-brand{max-width:360px}
.footer .logo .type,.footer .logo .mark{filter:none}
.footer-logo{display:inline-flex;align-items:center;gap:14px}
.footer-brand p{margin-top:20px;font-size:12px;line-height:1.9;color:var(--ink-2)}
.footer-copy{margin-top:24px;font-size:11px;color:var(--muted)}
.footer-col h4{margin:0;font-size:15px;font-weight:700}
.footer-col ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;
  font-size:13px;color:var(--ink-2)}
.footer-col a:hover{color:var(--accent)}
.footer-col [aria-disabled="true"]{cursor:default}
.footer-legal{position:relative;display:flex;justify-content:center;gap:24px;margin-top:40px;padding-top:20px;
  border-top:1px solid var(--line);font-size:11px;color:var(--muted)}

/* ---------- スマホ用の下部CTA（PCでは出さない） ---------- */
.sp-cta{display:none}

/* ---------- 表示アニメーション ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .clients-track{animation:none}
  .solution-bg::before,.solution-bg::after{animation:none}
  .cv-final::before,.cv-final::after{animation:none}
}

/* =========================================================
   スマホ（〜900px）
   ID指定は使わない。PC版のクラス指定をここで上書きする。
   ========================================================= */
@media (max-width:900px){
  body{font-size:14px}
  html{scroll-padding-top:64px}
  .wrap{padding-inline:20px}
  .sec{padding-block:56px}
  /* balance：「〜ありません／か？」のように末尾だけが行に残るのを避ける */
  .sec-ttl{font-size:21px;line-height:1.5;letter-spacing:.02em;text-wrap:balance}
  .brk-sp{display:inline}
  .cv-mid h2,.cv-final h2,.bridge p,.recruit-banner h2{text-wrap:balance}

  /* ボタン：指で押せる高さを保ちつつ、横幅いっぱいに */
  .btn--lg{height:56px;width:100%;min-width:0}
  .btn-row{gap:12px}

  /* ヘッダー：ナビは畳み、申し込みボタン1つだけ残す */
  .site-header{height:56px;transition:transform .35s var(--ease),border-color .3s,background .3s}
  /* 下へ送ると隠れ、上へ戻すと出てくる（下部のCTAと重ならないように） */
  .site-header.is-hidden{transform:translateY(-100%)}
  .site-header .wrap{gap:12px}
  .brand{gap:8px}
  .brand-sub{display:none}
  .gnav-links{display:none}
  .gnav{gap:0}
  .site-header .btn--ghost{display:none}

  /* FV: lp.miai-app.com と同じ順(見出し→画像→サブタイトル+ボタン)にする */
  .kv{padding-block:48px 56px}
  .kv-inner{grid-template-columns:1fr;grid-template-areas:"ttl" "line" "image" "sub";align-items:stretch;gap:0}
  .kv-divider{margin:16px 0}
  .kv-divider-accent{width:56px}
  .kv-ttl{font-size:29px;line-height:1.45;white-space:normal}
  .kv-ttl .product{font-size:36px;margin-top:6px;margin-bottom:8px;gap:8px}
  .kv-ttl .product small{font-size:11px}
  .scope{gap:8px;font-size:12px}
  .kv-actions{flex-direction:column;align-items:center;margin-top:48px}
  .kv-actions .btn{width:335px;max-width:100%}
  .kv-image{max-width:280px;margin-inline:auto}
  /* width:130%で広げた画像が右にはみ出して見切れるので、左右均等にはみ出す形で中央に寄せる。
     (replaced要素+%widthではmargin:autoによる中央寄せが効かなかったため、
     はみ出し分(280*0.3=84)の半分を負のmarginで直接引いている) */
  .kv-image img{margin-left:-42px}
  /* 小さい丸は文字に重なるので、スマホでは出さない */
  .kv-orb--2,.kv-orb--3{display:none}

  /* 導入企業ロゴ */
  .clients{padding-block:24px}
  .clients-track{animation-duration:32s}

  /* お悩み */
  .pain .grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .pain-card{padding:24px 20px}
  .pain-card h3{margin-top:18px;font-size:16px}
  .pain-card p{font-size:13px}
  .bridge{margin-top:40px}
  .bridge p{font-size:18px;line-height:1.6}
  .bridge .arrow{width:56px;height:26px;margin-top:18px}

  /* 解決 */
  .solution{padding-block:56px}
  .solution-list{margin-top:32px;border-radius:var(--r)}
  .solution-row{grid-template-columns:auto 1fr;gap:6px 14px;padding:22px 20px;align-items:start}
  .solution-row .no{font-size:26px;padding-top:2px}
  .solution-row h3{font-size:16px}
  .solution-row p{grid-column:2;font-size:13px;width:auto}

  /* 導入効果：写真を上、文章を下に積む */
  .carousel{margin-top:32px}
  .carousel-view{height:auto}
  /* 高さを中身に持たせたいので absolute をやめる。中央寄せの計算（left:50%）は残す */
  .carousel-track{position:relative;gap:16px}
  .carousel-track.is-anim{transition:transform .6s var(--ease)}
  .voice{flex-basis:300px;height:auto;min-height:420px;flex-direction:column;border-radius:var(--r)}
  .voice .ph{flex:0 0 150px;width:100%;border-radius:0}
  /* 写真カードはカード全幅×高さ200pxに収める。SP用に横長トリミング済みの画像を使うため中央クロップでよい */
  .voice .ph.voice-photo{flex:0 0 auto;width:100%;height:200px}
  .voice-body{padding:20px;gap:12px}
  .voice h3{font-size:17px}
  .voice p{font-size:13px;line-height:1.8}
  .carousel-btn{display:none}
  .dots{margin-top:16px}

  /* 中間CV */
  .cv-mid{padding-bottom:56px}
  .cv-mid-box{padding:36px 20px;border-radius:var(--r-l)}
  .cv-mid h2{font-size:19px;line-height:1.6}
  .cv-mid p{font-size:13px;margin-top:12px}
  .cv-mid .btn-row{flex-direction:column;margin-top:24px}

  /* できること */
  .feature-rows{gap:48px;margin-top:36px}
  .feature-row,.feature-row.is-rev{grid-template-columns:1fr;gap:20px}
  .feature-row.is-rev .feature-fig{order:0}
  .feature-fig .ph{height:200px;border-radius:var(--r)}
  .feature-fig .ph::before,.feature-row.is-rev .feature-fig .ph::before{width:120px;height:120px;left:-40px;top:-45px;right:auto;bottom:auto}
  .feature-head{gap:10px}
  .feature-head .no{font-size:28px}
  .feature-head h3{font-size:19px}
  .feature-txt p{margin-top:12px;font-size:13px;line-height:1.85}

  /* 特徴 */
  .strength .grid{grid-template-columns:1fr;gap:40px;margin-top:32px}
  .strength-icon{width:110px;height:110px}
  .strength-icon img{width:50px;height:50px}
  .strength-item h3{font-size:15px;margin-top:20px}
  .strength-item p{font-size:12.5px}

  /* 採用面談バナー */
  .recruit{padding-bottom:56px}
  .recruit-banner{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 20px;border-radius:var(--r)}
  .recruit-banner h2{font-size:19px;line-height:1.6}
  .recruit-banner::after{right:-60px;top:-100px}
  .recruit-banner .btn{width:100%}

  /* 導入までの流れ：番号を左、文章を右に置いた縦のフローにする */
  .flow-steps{grid-template-columns:1fr;gap:0;margin-top:32px}
  .flow-steps::before{display:none}
  .step{display:grid;grid-template-columns:52px 1fr;gap:0 16px;text-align:left;padding-bottom:28px}
  .step:last-child{padding-bottom:0}
  /* 番号どうしをつなぐ縦線。最後の段には引かない */
  .step::before{content:"";grid-column:1;grid-row:2;justify-self:center;width:2px;margin:10px 0 -28px;
    background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.45}
  .step:last-child::before{display:none}
  .step .num{grid-column:1;grid-row:1;width:52px;height:52px;font-size:20px;margin:0}
  .step h3{grid-column:2;grid-row:1;margin-top:0;align-self:center;font-size:16px}
  .step p{grid-column:2;grid-row:2;margin-top:6px;font-size:12px;padding-inline:0}

  /* FAQ */
  .faq-list{margin-top:32px;gap:10px}
  .faq-item summary{gap:12px;padding:16px;font-size:14px;line-height:1.6}
  .faq-q,.faq-a-label{width:26px;height:26px;font-size:12px}
  .faq-a{gap:12px;padding:0 16px 18px;font-size:13px}

  /* 最終CV */
  .cv-final{padding-block:64px;border-radius:var(--r-l)}
  .cv-final h2{font-size:22px;line-height:1.6}
  .cv-final p{font-size:13px}
  .cv-final .btn-row{flex-direction:column;margin-top:28px}

  /* フッター */
  /* SPは横幅に対してグローが大きく文字にかぶって読みにくいため、範囲を狭める */
  .footer-glow--left,.footer-glow--right{width:160px;height:160px}
  .footer-glow--left{left:-70px}
  .footer-glow--right{right:-70px}
  .footer-cta{padding-block:56px 48px}
  .footer-cta h2{font-size:22px}
  .footer-cta p{font-size:13px}
  .footer-cta .btn-row{flex-direction:column}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .footer-brand{max-width:none}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:10px;margin-top:32px}

  /* 画面下に貼りつく申し込みボタン。FVを過ぎてから出す */
  .sp-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(250,249,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .45s var(--ease)}
  .sp-cta.is-in{transform:none}
  .sp-cta .btn{flex:1 1 0;height:48px;padding:0 12px;min-width:0;font-size:13px}
  /* 下部CTAの分だけ、最後まで読めるよう余白を足す */
  .footer-legal{padding-bottom:64px}
}