/* ============================================================
   maru-M  base.css — 全ページ共通（トークン・ヘッダー・フッター・部品）
   ページ固有のスタイルは assets/css/<page>.css に書く
   ============================================================ */
:root{
  --red:#9e0a21;--red-top:#b20f22;--red-deep:#8a0a20;--red-dark:#910013;--red-bright:#c4252e;
  --hdr:#a0061a;--gray:#e6e6e6;--panel:#f1f1f1;--card:#e7e7e7;
  --ink:#333333;--ink-2:#4d4d4d;--ink-3:#999999;--w:#ffffff;--w2:#e6e6e6;--w3:#dfe1e0;--yellow:#ffff00;
  --card-line:rgba(230,40,50,.65);
  --u:min(1px,calc(100vw / 1920));          /* 1920px設計の1pt。幅に比例して縮む */
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  --futura:"Jost","Futura","Avenir Next",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--w);background:var(--red);font-size:16px;line-height:1.8;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit}
.r{color:var(--red-dark)}
.d{color:var(--ink)}
.in{width:min(1414px,calc(100% - 48px));margin:0 auto}
.red-sec{background:linear-gradient(180deg,var(--red-deep) 0%,var(--red-top) 100%)}
.gray-sec{background:var(--gray);color:var(--ink)}
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:max(60px,calc(94 * var(--u)));display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc(56 * var(--u))) 0 max(20px,calc(80 * var(--u)));padding-top:env(safe-area-inset-top);background:linear-gradient(90deg,#ab061b 0%,#9a0619 55%,#8d0618 100%);box-shadow:0 2px 18px rgba(40,0,6,.35);transform:translateY(-100%);animation:hdrIn .9s var(--ease) .2s forwards}
@keyframes hdrIn{to{transform:none}}
.hdr .logo img{height:max(22px,calc(34 * var(--u)));width:auto;transition:transform .4s var(--ease)}
.hdr .logo:hover img{transform:scale(1.04)}
.hdr nav{display:flex;align-items:center;gap:max(18px,calc(52 * var(--u)))}
.hdr nav a{font-size:clamp(13px,1.146vw,22px);letter-spacing:.08em;color:#cccccc;transition:color .3s;position:relative;padding:4px 0}
.hdr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--yellow);transition:right .35s var(--ease)}
.hdr nav a:hover,.hdr nav a.on{color:var(--yellow)}
.hdr nav a:hover::after{right:0}
.hdr .right{display:flex;align-items:center}
.burger{margin-left:max(10px,calc(40 * var(--u)));width:max(30px,calc(44 * var(--u)));height:max(22px,calc(30 * var(--u)));background:none;border:0;cursor:pointer;position:relative;display:block}
.burger span{position:absolute;left:0;right:0;height:2px;background:#fff;transition:transform .35s,opacity .3s,top .35s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:50%;margin-top:-1px}.burger span:nth-child(3){top:calc(100% - 2px)}
body.menu .burger span:nth-child(1){top:50%;transform:rotate(45deg)}
body.menu .burger span:nth-child(2){opacity:0}
body.menu .burger span:nth-child(3){top:50%;transform:rotate(-45deg)}
.menu-ov{position:fixed;inset:0;z-index:40;background:rgba(120,6,22,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,32px);opacity:0;pointer-events:none;transition:opacity .4s}
body.menu .menu-ov{opacity:1;pointer-events:auto}
.menu-ov a{font-size:clamp(22px,2.4vw,34px);font-weight:700;letter-spacing:.15em;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,color .3s}
.menu-ov a:hover{color:var(--yellow)}
body.menu .menu-ov a{opacity:1;transform:none}
.menu-ov a:nth-child(2){transition-delay:.05s}.menu-ov a:nth-child(3){transition-delay:.1s}.menu-ov a:nth-child(4){transition-delay:.15s}.menu-ov a:nth-child(5){transition-delay:.2s}.menu-ov a:nth-child(6){transition-delay:.25s}
.menu-ov .sub{margin-top:clamp(10px,3vh,28px);display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.menu-ov .sub a{font-size:clamp(13px,1.1vw,16px);font-weight:400;letter-spacing:.12em;color:rgba(255,255,255,.75)}

/* ---------- 見出し・文字部品 ---------- */
.h2{font-weight:900;font-size:clamp(24px,3.07vw,59px);letter-spacing:.12em;color:var(--w2);text-align:center;line-height:1.4}
.lab{font-family:var(--futura);font-weight:500;letter-spacing:.42em;padding-left:.42em;color:var(--ink);font-size:clamp(15px,2.19vw,42px);line-height:1}
.big{font-weight:900;letter-spacing:.18em;padding-left:.18em;font-size:clamp(28px,3.65vw,70px);line-height:1.15;margin-top:clamp(12px,1.3vw,26px)}
.big .wo{font-size:.75em}
.fut{font-family:var(--futura);font-style:italic;font-weight:500;letter-spacing:.2em;padding-left:.2em;font-size:clamp(30px,3.65vw,70px);line-height:1.1;margin-top:clamp(12px,1.3vw,26px);text-transform:uppercase}
.fut.xl{font-size:clamp(32px,4.2vw,80.7px)}
.body{margin-top:clamp(22px,3vw,58px);font-weight:500;letter-spacing:.14em;color:#000;font-size:clamp(14px,1.73vw,33.2px);line-height:1.75}
.body .w{display:inline-block}

/* ---------- ボタン ---------- */
.btn-red{display:inline-flex;align-items:center;justify-content:center;height:max(56px,calc(120 * var(--u)));padding:0 clamp(34px,5.2vw,100px);border-radius:999px;border:0;cursor:pointer;background:linear-gradient(90deg,#b1101f 0%,#8d0a19 100%);color:#fff;font-weight:900;letter-spacing:.14em;font-size:clamp(17px,2.6vw,50px);box-shadow:0 12px 26px rgba(60,0,8,.35),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .25s var(--ease),box-shadow .3s;will-change:transform;white-space:nowrap;position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-red:hover::after{transform:translateX(120%)}
.btn-red:hover{box-shadow:0 20px 40px rgba(60,0,8,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-red small{font-size:.72em;font-weight:900}
.btn-red.sm{height:max(52px,calc(100 * var(--u)));font-size:clamp(16px,2.08vw,40px);padding:0 clamp(30px,4.7vw,90px)}

/* ---------- フォーム ---------- */
.form{margin:calc(120 * var(--u)) auto 0;max-width:1080px;text-align:left}
.fld{position:relative;margin-bottom:clamp(12px,1.9vw,36px);border-left:max(10px,calc(18 * var(--u))) solid var(--red);border-right:max(10px,calc(18 * var(--u))) solid var(--red);background:#fff;transition:border-color .3s}
.fld input,.fld textarea{display:block;width:100%;border:0;background:#fff;color:var(--ink);padding:0 clamp(14px,1.9vw,36px);height:max(54px,calc(70 * var(--u)));font-size:clamp(16px,1.19vw,22.8px);letter-spacing:.06em;outline:none;border-radius:0;-webkit-appearance:none}
.fld textarea{height:max(220px,calc(520 * var(--u)));padding:clamp(14px,1.4vw,26px) clamp(14px,1.9vw,36px);resize:vertical;line-height:1.7}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.fld:focus-within{border-color:var(--red-bright);box-shadow:0 0 0 3px rgba(158,10,33,.16)}
.form .submit{text-align:center;margin-top:clamp(28px,4.8vw,92px)}
.form .ok{display:none;padding:clamp(20px,2vw,40px);text-align:center;font-weight:700;letter-spacing:.1em;font-size:clamp(15px,1.5vw,26px)}
.form.sent .ok{display:block}.form.sent .fields{display:none}
.hp{position:absolute;left:-9999px;opacity:0}

/* ---------- フッター ---------- */
.ft{background:linear-gradient(180deg,#900a20 0%,#b61022 100%);padding:calc(110 * var(--u)) 0 max(24px,calc(44 * var(--u) + env(safe-area-inset-bottom)));position:relative;overflow:hidden}
.ft .mark{position:absolute;right:-4%;bottom:-18%;width:clamp(240px,26vw,500px);aspect-ratio:207/196;background:rgba(255,255,255,.05);-webkit-mask:url(../logo/symbol-white.svg) center/contain no-repeat;mask:url(../logo/symbol-white.svg) center/contain no-repeat;pointer-events:none}
.ft .in{position:relative}
.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1280px;margin:0 auto}
.ft .brand img{height:max(26px,calc(40 * var(--u)));width:auto}
.ft .brand p{margin-top:22px;font-weight:300;font-size:clamp(13px,.9vw,16px);letter-spacing:.08em;line-height:2;color:rgba(255,255,255,.85)}
.ft .brand .tag{font-family:var(--futura);font-style:italic;letter-spacing:.2em;color:rgba(255,255,255,.6);margin-top:14px;font-size:13px}
.ft h4{font-family:var(--futura);font-weight:500;letter-spacing:.32em;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:18px}
.ft li{margin:0 0 10px}
.ft li a{font-size:clamp(13px,.9vw,16px);letter-spacing:.1em;font-weight:400;color:rgba(255,255,255,.88);position:relative;padding-left:16px;transition:color .3s}
.ft li a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:rgba(255,255,255,.6);transition:width .3s,background .3s}
.ft li a:hover{color:var(--yellow)}.ft li a:hover::before{width:11px;background:var(--yellow)}
.ft li small{display:block;padding-left:16px;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-top:-2px}
.ft .bottom{max-width:1280px;margin:calc(90 * var(--u)) auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.ft .bottom .fut{font-size:12px;margin:0;letter-spacing:.3em;padding:0}
.totop{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,transform .3s var(--ease)}
.totop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.totop:hover{background:#fff;color:var(--red);transform:translateY(-3px)}

/* ---------- スクロール出現（共通） ----------
   .rv       : 22px上がりながらフェードイン
   .rv-chars : 文字ごとに時間差で出現（base.jsが<span>に分割）
   .rv-line  : 罫線が左から伸びる
   .rv-wipe  : 上から下へ描き出される（画像向け） */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.rv-chars .ch{display:inline-block;white-space:pre;opacity:0;transform:translateY(.5em) rotate(4deg);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 35ms)}
.rv-chars.is-in .ch{opacity:1;transform:none}
.rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.rv-line.is-in{transform:none}
.rv-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.rv-wipe.is-in{clip-path:inset(0 0 0 0)}
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.is-in>*{opacity:1;transform:none}
.stagger.is-in>*:nth-child(2){transition-delay:.1s}.stagger.is-in>*:nth-child(3){transition-delay:.2s}.stagger.is-in>*:nth-child(4){transition-delay:.3s}.stagger.is-in>*:nth-child(5){transition-delay:.4s}.stagger.is-in>*:nth-child(6){transition-delay:.5s}

/* ---------- レスポンシブ（共通） ---------- */
@media (max-width:860px){
  .hdr nav{display:none}
  .ft{padding:60px 0 24px}
  .ft .cols{grid-template-columns:1fr;gap:34px}
  .ft .bottom{margin-top:50px;flex-direction:column;align-items:flex-start}
  .ft .mark{width:220px;right:-10%;bottom:-6%}
  .form{margin-top:40px}
}
@media (max-width:480px){
  .h2{font-size:21px;letter-spacing:.08em}
  .fut{font-size:26px;letter-spacing:.12em;padding-left:.12em}
  .fut.xl{font-size:25px}
  .big{font-size:30px}
  .body{font-size:14px;letter-spacing:.06em;line-height:1.9}
  .body br{display:none}
  .body .w{display:inline-block;margin:0 .2em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hdr{animation:none;transform:none}
  .rv,.rv-chars .ch,.rv-line,.rv-wipe,.stagger>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;animation:none!important}
}