/* ===== fv (hero) ===== */
/* ===== fv ===== */
html{scroll-behavior:smooth}
body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
button{font:inherit;cursor:pointer;border:none;background:none}
/* ===== Header ===== */
/* ===== Hero ===== */
.hero{
    position:relative;
    padding-top:var(--header-h);
    min-height:750px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center bottom;   /* 台座(画像下部)を常にヒーロー下端に固定 */
  }
.hero-inner{
    width:100%;max-width:1021px;margin:0 auto;
    padding:64px 24px;
    display:flex;align-items:center;justify-content:center;gap:40px;
  }
.hero-copy-col{
    display:flex;flex-direction:column;gap:60px;
    max-width:580px;flex-shrink:0;
  }
.hero-copy{display:flex;flex-direction:column;gap:32px}
.hero-title{font-weight:900;font-size:48px;line-height:1.6}
.hero-title .l1{color:var(--blue)}
.hero-title .l2{color:var(--ink)}
.hero-sub{font-weight:500;font-size:28px;line-height:1.6;color:var(--text)}
/* CTA */
.cta{display:flex;flex-direction:column;align-items:center;gap:4px;width:320px}
.hero-visual{position:relative;width:441px;height:630px;flex-shrink:0;overflow:hidden}
.hero-visual img{
    position:absolute;left:-80%;top:-6%;
    width:238%;height:111%;max-width:none;object-fit:contain;
  }
/* ===== Mobile nav ===== */
/* ===== Responsive ===== */
@media (max-width:900px){
/* SP: Figma SP_FV(928:8873)準拠。テキスト → スマホ画像 → CTA の縦積み・中央寄せ */
.hero{min-height:auto}
.hero-inner{flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 20px 40px;gap:24px;text-align:center}
.hero-copy-col{display:contents}
/* 見出しはFigmaでは画面幅いっぱい(390px)に置かれるため、左右paddingの外へ広げる */
.hero-copy{order:1;gap:16px;margin:0 -20px}
.hero-title{font-size:clamp(24px, 8.2vw, 32px);font-weight:700;line-height:1.6}
.hero-sub{font-size:16px;font-weight:400;line-height:1.6;letter-spacing:.01em}
/* スマホ画像: 290×408 の枠に合成画像をFigmaと同じ割合でクロップ */
.hero-visual{order:2;width:290px;max-width:none;height:408px;margin:0}
.hero-visual img{left:-131.98%;top:-13.45%;width:326.43%;height:155.6%;transform:none}
/* CTA: 350px幅・ボタンは全幅60px・注釈は14px Bold */
.cta{order:3;width:350px;max-width:100%;gap:2px}
.cta .cta-badge{font-size:14px;font-weight:700;padding:0 22px}
.btn-primary{height:60px;padding:8px 16px}
.btn-primary .btn-text{font-size:18px}
.btn-primary i{font-size:20px}
}