/* お問い合わせ（入力・確認）と完了ページで共通の見た目 */
:root{
  --paper:#f3f1ec; --ink:#141414; --sub:#66625b; --line:#d6d2c8; --error:#b3261e;
  --latin:"Inter","Zen Kaku Gothic New","Helvetica Neue",Arial,sans-serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:20px;
  /* 文字サイズの段（本文15pxを基準に等比） */
  --fs-label:12px; --fs-note:13px; --fs-body:15px; --fs-lead:17px; --fs-h3:21px; --fs-h2:30px; --fs-input:18px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:500; font-size:var(--fs-body); line-height:1.8; -webkit-font-smoothing:antialiased; font-feature-settings:"palt";}
h1,h2,p,ul,ol,dl,dd{margin:0; padding:0;}
ol,ul{list-style:none;}
a{color:inherit;}
[hidden]{display:none !important;}
.mask{display:block; overflow:hidden;}
.mask > span{display:block;}

/* ---------- 冒頭 ---------- */
.hero{min-height:70svh; display:flex; flex-direction:column; justify-content:flex-end; padding:76px var(--gutter) 34px; position:relative;}
/* 上の帯は、スクロールしても画面の上に固定する */
.hero__top{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center; height:58px; padding:0 var(--gutter); background:var(--paper);}
.hero__top::after{content:""; position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; height:1px; background:var(--ink);}
.hero__brand{font-size:var(--fs-note); font-weight:700; letter-spacing:.08em; text-decoration:none;}
.hero__label{font-family:var(--latin); font-weight:500; font-size:var(--fs-lead); line-height:1.2;}
.hero__display{font-family:var(--latin); font-weight:600; font-size:24.5vw; line-height:.8; letter-spacing:-.055em; margin-left:-.05em;}
.hero__display--thanks{font-size:26.5vw;}
.hero__display .mask{padding:.06em .04em .14em 0;}
.hero__title{font-size:var(--fs-h3); font-weight:700; letter-spacing:.06em; line-height:1.5; margin-top:6px;}
.hero__lead{margin-top:14px; color:var(--sub); max-width:30em;}
.hero__badge{position:absolute; right:var(--gutter); top:25%; width:92px; height:92px;}
.hero__badge svg{width:100%; height:100%; display:block; animation:spin 22s linear infinite;}
.hero__badge text{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.22em; fill:var(--ink);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 段階の表示（入力・確認・完了） ---------- */
.main{padding:0 var(--gutter);}
.steps{display:flex; gap:22px; padding:0 0 18px; font-size:var(--fs-note); color:var(--sub);}
.steps__item{display:flex; align-items:baseline; gap:6px; position:relative;}
.steps__no{font-family:var(--latin); font-size:var(--fs-label); font-variant-numeric:tabular-nums;}
.steps__item.is-current{color:var(--ink); font-weight:700;}
.steps__item.is-current::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--ink);}

/* ---------- 入力 ---------- */
.field{position:relative; display:grid; grid-template-columns:34px 1fr; column-gap:8px; padding:22px 0 20px; border-top:1px solid var(--ink);}
.field__no{font-size:var(--fs-note); line-height:1.9; color:var(--sub); font-variant-numeric:tabular-nums;}
.field__label{display:flex; align-items:center; gap:10px; font-size:var(--fs-lead); font-weight:700; line-height:1.6;}
.field__req{font-size:var(--fs-label); font-weight:500; line-height:1.4; border:1px solid var(--ink); border-radius:999px; padding:1px 9px 2px;}
.field__req--opt{border-color:var(--line); color:var(--sub);}
.field__body{grid-column:2; position:relative; margin-top:6px;}
.field__input{display:block; width:100%; font:inherit; font-size:var(--fs-input); line-height:1.7; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 0; outline:0; -webkit-appearance:none; appearance:none;}
textarea.field__input{min-height:8.5em; resize:none; overflow:hidden;}
/* 入力中は、下の線が左から伸びる */
.field__line{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--ease);}
.field__input:focus ~ .field__line{transform:none;}
.field.is-error .field__input{border-bottom-color:var(--error);}
.field.is-error .field__line{background:var(--error); transform:none;}
.field__error{grid-column:2; font-size:var(--fs-note); color:var(--error); margin-top:6px;}
.field__error:empty{display:none;}
.trap{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* ---------- 確認 ---------- */
.confirm__head{border-top:1px solid var(--ink); padding:24px 0 22px;}
.confirm__title{font-size:var(--fs-h2); font-weight:700; line-height:1.4; letter-spacing:.02em; outline:0;}
.confirm__lead{margin-top:8px; color:var(--sub); max-width:34em;}
.summary__row{display:grid; grid-template-columns:34px 1fr; column-gap:8px; padding:18px 0 20px; border-top:1px solid var(--ink);}
.summary__term{font-size:var(--fs-note); color:var(--sub); line-height:1.9;}
.summary__value{grid-column:2; font-size:var(--fs-input); line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px;}

/* ---------- ボタン ---------- */
.actions{border-top:1px solid var(--ink); padding:24px 0 0; display:grid; gap:20px;}
.actions__note{font-size:var(--fs-note); color:var(--sub); max-width:34em;}
.actions__status{font-size:var(--fs-note); color:var(--error);}
.actions__status:empty{display:none;}
.actions__buttons{display:grid; gap:12px;}
.btn{display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; min-height:64px; padding:0 28px; font:inherit; font-size:var(--fs-lead); font-weight:700; letter-spacing:.06em; color:var(--paper); background:var(--ink); border:1px solid var(--ink); border-radius:999px; cursor:pointer; text-decoration:none; transition:background .35s, color .35s, opacity .3s;}
.btn__arrow{font-family:var(--latin); font-weight:400; font-size:1.3em; line-height:1; transition:transform .6s var(--ease);}
.btn--ghost{color:var(--ink); background:transparent; justify-content:flex-start;}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:4px;}
.btn[disabled]{opacity:.5; cursor:progress;}

/* ---------- 完了 ---------- */
.thanks{border-top:1px solid var(--ink); padding-top:24px;}
.thanks__title{font-size:min(var(--fs-h2), 6.1vw); font-weight:700; line-height:1.4; letter-spacing:.02em;}
.thanks__text{margin-top:10px; color:var(--sub); max-width:34em;}
.thanks .actions{margin-top:34px;}

/* ---------- 末尾 ---------- */
.footer{margin-top:96px; background:var(--ink); color:var(--paper); padding:56px var(--gutter) 22px; overflow:hidden;}
.footer__mark{font-size:14.6vw; font-weight:700; line-height:1.15; letter-spacing:-.02em; white-space:nowrap;}
.footer__row{display:flex; justify-content:space-between; align-items:baseline; margin-top:40px; border-top:1px solid rgba(243,241,236,.3); padding-top:12px;}
.footer__label{font-family:var(--latin); font-weight:500; font-size:var(--fs-lead);}
.footer__copy{font-size:var(--fs-label); letter-spacing:.08em;}

/* ---------- 動き（スクリプトが動く時だけ隠す） ---------- */
.is-js .hero .mask > span{transform:translateY(110%); transition:transform 1.3s var(--ease);}
.is-js.is-loaded .hero .mask > span{transform:none;}
.is-js .hero__title .mask > span{transition-delay:.12s;}
.is-js .hero__lead, .is-js .hero__badge, .is-js .hero__top{opacity:0; transition:opacity 1s .5s;}
.is-js.is-loaded .hero__lead, .is-js.is-loaded .hero__badge, .is-js.is-loaded .hero__top{opacity:1;}
.is-js .js-reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.is-js .js-reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .is-js *, .is-js *::before{transition:none !important; animation:none !important;}
  .is-js .hero .mask > span, .is-js .js-reveal{transform:none; opacity:1;}
  .is-js .hero__lead, .is-js .hero__badge, .is-js .hero__top{opacity:1;}
}

/* ---------- PC ---------- */
@media (min-width:860px){
  :root{--gutter:clamp(32px,4.4vw,72px); --fs-note:14px; --fs-body:16px; --fs-lead:20px; --fs-h3:25px; --fs-h2:44px; --fs-input:24px;}
  .hero{padding-top:88px; padding-bottom:56px; min-height:74svh;}
  .hero__top{height:66px;}
  .hero__main{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,30%); align-items:end; column-gap:4vw;}
  .hero__display{font-size:17vw; grid-row:1 / span 2;}
  .hero__display--thanks{font-size:18vw;}
  .hero__title{margin:0; align-self:end;}
  .hero__lead{margin:14px 0 2.4vw;}
  .hero__badge{top:auto; bottom:calc(17vw * .9 + 70px); width:124px; height:124px;}
  .steps{gap:34px; padding-bottom:26px;}
  .field{grid-template-columns:64px 26% 1fr; column-gap:24px; padding:34px 0 30px; align-items:start;}
  .field__label{padding-top:8px;}
  .field__body{grid-column:3; margin-top:0;}
  .field__error{grid-column:3;}
  .field__no{line-height:2.7;}
  .confirm__head{padding:38px 0 34px;}
  .summary__row{grid-template-columns:64px 26% 1fr; column-gap:24px; padding:28px 0 30px; align-items:baseline;}
  .summary__term{font-size:var(--fs-lead); font-weight:700; color:var(--ink);}
  .summary__value{grid-column:3; margin-top:0;}
  .actions{grid-template-columns:1fr auto; align-items:center; padding-top:34px; column-gap:40px;}
  .actions__buttons{grid-auto-flow:column; grid-auto-columns:max-content; justify-content:end;}
  .actions__status{grid-column:1;}
  .btn{min-height:72px; padding:0 34px; min-width:300px;}
  .btn--ghost{min-width:0;}
  .thanks{padding-top:38px;}
  .thanks .actions{grid-template-columns:auto; justify-content:start;}
  .footer{margin-top:180px; padding-top:96px;}
  .footer__mark{font-size:15vw;}
}
@media (hover:hover){
  .btn:hover{background:var(--paper); color:var(--ink);}
  .btn--ghost:hover{background:var(--ink); color:var(--paper);}
  .btn:hover .btn__arrow{transform:translateX(6px);}
  .btn--ghost:hover .btn__arrow{transform:translateX(-6px);}
  .hero__brand{transition:opacity .3s;}
  .hero__brand:hover{opacity:.55;}
}