/* =============================================================
   HANNARI 採用LP v2 ｜ layout.css
   スマホ特設サイトの骨格。平らな色面を積み上げるエディトリアル構造。
   ============================================================= */

.site{
  max-width:var(--w-col);
  margin-inline:auto;
  background:var(--c-cream);
  position:relative;
  overflow-x:clip;
  box-shadow:0 0 80px rgba(40,32,20,.16);
}
@media (min-width:600px){
  body{background:
    radial-gradient(900px 500px at 50% 0%, #efe8da 0%, transparent 65%),
    var(--c-cream-2);}
}

/* ---- ヘッダー ---- */
.hdr{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--w-col);z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px var(--sp-gut);
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-solid{background:rgba(244,239,227,.94);backdrop-filter:blur(10px);border-bottom-color:var(--c-line);}
.hdr__logo{font-family:var(--ff-disp);font-weight:700;font-size:14px;letter-spacing:.36em;color:#fff;transition:color .35s var(--ease);}
.hdr.is-solid .hdr__logo{color:var(--c-ink);}
.hdr__cta{font-size:11.5px;font-weight:700;padding:7px 14px;border-radius:100px;background:var(--c-clay);color:#fff;white-space:nowrap;}

/* ---- 色面（章の地） ---- */
.blk{position:relative;padding:var(--sp-sec) var(--sp-gut);}
.blk--cream{background:var(--c-cream);}
.blk--cream2{background:var(--c-cream-2);}
.blk--ink{background:var(--c-ink);color:#cfc7b8;}
.blk--clay{background:var(--c-clay);color:#f6e8e2;}
.blk--sage{background:var(--c-sage);color:#f2f4ec;}
.blk--gold{background:var(--c-gold);color:#fff8ea;}
.blk--ink h1,.blk--ink h2,.blk--ink h3,
.blk--clay h1,.blk--clay h2,.blk--clay h3,
.blk--sage h1,.blk--sage h2,.blk--sage h3,
.blk--gold h1,.blk--gold h2,.blk--gold h3{color:#fff;}
.blk--ink strong,.blk--clay strong,.blk--sage strong,.blk--gold strong{color:#fff;}
.blk--flush{padding-left:0;padding-right:0;}
.blk--flush > *{padding-inline:var(--sp-gut);}
.blk--flush > .shot,.blk--flush > .full{padding-inline:0;}
.blk--tight{padding-top:clamp(38px,10vw,54px);padding-bottom:clamp(38px,10vw,54px);}

/* ---- FV ---- */
.fv{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--sp-gut) calc(var(--bar-h) + 42px);
  background:linear-gradient(168deg,#2b241b,#4b3f2d 60%,#2f281e);
  overflow:hidden;isolation:isolate;
}
.fv__media{position:absolute;inset:0;z-index:-2;}
.fv__media img{width:100%;height:100%;object-fit:cover;}
.fv::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(18,14,9,.5) 0%,rgba(18,14,9,.12) 40%,rgba(18,14,9,.86) 100%);}
.fv__mega{
  font-family:var(--ff-disp);font-weight:700;
  font-size:var(--fs-mega);line-height:.94;letter-spacing:-.045em;
  color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.4);
}
.fv__mega em{font-style:normal;color:var(--c-gold-l);}
.fv__sub{margin-top:22px;font-size:14.5px;line-height:1.9;color:#ece2d0;font-weight:500;}
.fv__vtag{
  position:absolute;top:74px;right:0;z-index:3;
  writing-mode:vertical-rl;
  background:var(--c-clay);color:#fff;
  font-size:11px;letter-spacing:.22em;font-weight:700;
  padding:15px 7px;
}
.fv__scroll{
  position:absolute;left:var(--sp-gut);bottom:calc(var(--bar-h) + 14px);
  font-size:9px;letter-spacing:.24em;color:rgba(247,242,231,.6);
  display:flex;align-items:center;gap:8px;
}
.fv__scroll::after{content:"";width:34px;height:1px;background:rgba(247,242,231,.5);
  transform-origin:left;animation:sc 2.4s var(--ease) infinite;}
@keyframes sc{0%{transform:scaleX(0);}45%{transform:scaleX(1);}100%{transform:scaleX(0);transform-origin:right;}}

/* ---- 下部固定CTA ---- */
.bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--w-col);z-index:45;
  display:grid;grid-template-columns:1fr 1.25fr;
  background:var(--c-ink);
  padding-bottom:env(safe-area-inset-bottom);
}
.bar a{
  height:var(--bar-h);display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-disp);font-size:13px;font-weight:700;color:var(--c-on-dark);letter-spacing:.04em;
}
.bar a.is-primary{background:var(--c-clay);color:#fff;}

/* ---- フッター ---- */
.ftr{
  background:var(--c-ink);color:#a89e8d;
  padding:38px var(--sp-gut) calc(var(--bar-h) + 30px);
  text-align:center;font-size:var(--fs-xs);line-height:2.1;
}
.ftr__logo{font-family:var(--ff-disp);font-size:15px;letter-spacing:.36em;color:#fff;margin-bottom:12px;}

/* ---- 現れ方 ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
.rv-d1{transition-delay:.1s;}
.rv-d2{transition-delay:.2s;}