:root{--ink:#111214;--ink2:#1c1d21;--paper:#f3efe8;--red:#e0261b;--yel:#ffc81e;--mut:#8b877f;--en:"Anton",Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.85;overflow-x:hidden}
a{color:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%}
.eb{font-family:var(--en);font-size:13px;letter-spacing:.24em;color:var(--yel)}

/* 読み込み */
.ld{position:fixed;inset:0;z-index:50;background:var(--ink);display:grid;place-items:center;pointer-events:none}
.ld p{font-family:var(--en);font-size:clamp(40px,8vw,110px);line-height:1;display:flex;gap:.25em;overflow:hidden}
.ld span{display:block}
.ld span+span{color:var(--red)}
html:not(.js) .ld{display:none}

/* ヘッダー */
.hd{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,3vw,40px);mix-blend-mode:normal}
.logo{display:block;position:relative}
.logo img{display:block;height:50px;width:auto;transition:opacity .15s}
.logo-w{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.logo-k{position:absolute;left:0;top:0;opacity:0}
.hd.is-light .logo-w{opacity:0}
.hd.is-light .logo-k{opacity:1}
.logo small{display:block;font-size:10px;font-weight:700;color:var(--yel);letter-spacing:.1em}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:900;text-decoration:none;padding:11px 20px;border-radius:3px;position:relative;overflow:hidden;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--yel);transform:translateY(101%);transition:transform .35s cubic-bezier(.7,0,.2,1)}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn{isolation:isolate}
.btn::before{z-index:-1}
.btn-l{font-size:clamp(15px,1.5vw,19px);padding:18px 34px}

/* ヒーロー */
.hero{position:relative}
.hero-pin{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000}
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover}
.hero-b img{filter:grayscale(1) contrast(1.05) brightness(.8)}
.hero-a{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 150px),linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 48%,rgba(0,0,0,0) 75%),linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 35%)}
.tag{position:absolute;top:50%;font-family:var(--en);font-size:clamp(14px,1.3vw,18px);letter-spacing:.3em;padding:4px 10px;background:rgba(0,0,0,.55)}
.tag-b{left:clamp(16px,3vw,40px);top:auto;bottom:40px}
.tag-a{right:clamp(16px,3vw,40px);top:auto;bottom:40px;background:var(--red);opacity:0}
.hero-copy{position:absolute;left:clamp(16px,6vw,96px);bottom:clamp(90px,16vh,170px);right:16px}
.h1{font-weight:900;font-size:clamp(24px,min(5.6vw,9.5vh),80px);line-height:1.18;letter-spacing:-.02em;margin:14px 0 18px}
.ln{display:block;overflow:hidden;white-space:nowrap}
.ln .ch{display:inline-block;will-change:transform}
.lead{font-size:clamp(14px,1.25vw,17px);color:#ddd;max-width:34em;text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere}
.hero-copy2{pointer-events:none}
.hero-copy2 .btn{pointer-events:auto;opacity:0}
.h1-2 .ln:last-child{color:var(--yel)}
.hero-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.15)}
.hero-bar i{display:block;height:100%;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
.hint{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);font-family:var(--en);font-size:12px;letter-spacing:.35em;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{50%{transform:translate(-50%,8px);opacity:.4}}

/* テロップ */
.marq{background:var(--red);color:#fff;padding:22px 0;overflow:hidden}
.mq{white-space:nowrap;font-weight:900;font-size:clamp(26px,4vw,54px);line-height:1.4;letter-spacing:-.01em}
.mq p{display:inline-block;will-change:transform}
.mq-r{color:var(--ink)}

/* 5つの場面 */
.scn{position:relative;background:var(--paper);color:var(--ink)}
.scn-pin{height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px);padding:80px 0 30px}
.scn-head{padding:0 clamp(16px,6vw,96px)}
.scn .eb{color:var(--red)}
.h2{font-weight:900;font-size:clamp(26px,3.4vw,50px);line-height:1.3;letter-spacing:-.02em;margin-top:8px}
.scn-track{display:flex;gap:clamp(16px,2.4vw,36px);padding:0 clamp(16px,6vw,96px);width:max-content;will-change:transform}
.pn{position:relative;width:min(78vw,980px);display:grid;grid-template-columns:1.25fr 1fr;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.pn figure{overflow:hidden;height:min(58vh,520px)}
.pn img{width:115%;max-width:none;height:100%;object-fit:cover;will-change:transform}
.pn-tx{padding:clamp(20px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.pn-tx b{font-family:var(--en);font-weight:400;font-size:clamp(54px,6vw,96px);line-height:1;color:var(--red)}
.pn-tx h3{font-size:clamp(22px,2.2vw,32px);font-weight:900;margin:12px 0 10px;line-height:1.3}
.pn-tx p{font-size:15px;color:#3a3833}
.pn-tx ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pn-tx li{font-size:13px;font-weight:700;border:1.5px solid var(--ink);padding:3px 10px;border-radius:3px}
.scn-num{position:absolute;right:clamp(16px,6vw,96px);top:96px;font-family:var(--en);font-size:18px;letter-spacing:.1em;color:var(--mut)}
.scn-num span{color:var(--ink);font-size:44px;vertical-align:-6px}

/* ヒュッと出る商品カード */
.gd{position:absolute;z-index:2;background:#fff;padding:8px 8px 6px;border-radius:3px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transform:rotate(-4deg);transition:transform .3s}
.gd img{width:100%;height:auto;display:block}
.gd span{display:block;font-size:11px;font-weight:700;color:var(--ink);text-align:center;margin-top:5px;white-space:nowrap}
.gd:hover{transform:rotate(0) scale(1.05)}
.pn .gd{left:calc(55.5% - 300px);bottom:24px;width:280px}
.pn .gd-v{width:84px;left:calc(55.5% - 110px);bottom:18px}
.big-gd{position:absolute;z-index:1;right:clamp(16px,6vw,96px);top:22%;width:min(34vw,420px);height:min(40vw,440px)}
.big-gd .gd-b1{width:72%;right:0;top:0;transform:rotate(5deg)}
.big-gd .gd-b2{width:58%;left:0;bottom:0;transform:rotate(-6deg)}

/* 納車 */
.big{position:relative}
.big-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.big-ph{position:absolute;inset:-6% 0}
.big-ph img{width:100%;height:100%;object-fit:cover}
.big-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.15) 60%),linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.big-tx{position:relative;z-index:1;padding:0 clamp(16px,6vw,96px) clamp(60px,12vh,120px);max-width:760px}
.big-tx p:last-child{color:#ddd;margin-top:16px;max-width:32em}
.dl-stage{position:absolute;z-index:2;right:clamp(16px,6vw,96px);top:50%;transform:translateY(-50%);width:min(34vw,440px);height:min(64vh,560px)}
.dl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden}
.dl-im{background:#fff;padding:12px;border-radius:3px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.dl-im img{width:100%;height:min(40vh,340px);object-fit:contain;display:block}
.dl figcaption{margin-top:16px;color:#eee;font-size:14px;line-height:1.7}
.dl figcaption b{display:block;font-size:clamp(20px,2vw,28px);font-weight:900;color:#fff;margin-bottom:4px}
.dl-n{position:absolute;right:0;top:-34px;font-family:var(--en);color:#aaa;letter-spacing:.1em}
.dl-n span{color:var(--yel);font-size:26px}
html:not(.js) .dl:first-child{opacity:1;visibility:visible}

/* 取り扱いグッズ */
.lu{background:var(--paper);color:var(--ink);padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.lu .eb{color:var(--red)}
.lu-head{padding:0 clamp(16px,6vw,96px);margin-bottom:clamp(30px,5vw,60px)}
.lu-head p:last-child{color:#3a3833;margin-top:14px;max-width:36em}
.lu-rows{display:grid;gap:clamp(26px,3vw,44px)}
.lu-row{display:flex;gap:clamp(24px,3vw,48px);width:max-content;will-change:transform}
.lu-c{flex:0 0 auto;width:clamp(180px,20vw,290px);transition:transform .25s}
.lu-c img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.lu-cut img{object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.lu-ph img{object-fit:cover;border-radius:3px;box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
.lu-c figcaption{padding-top:10px;color:var(--ink);font-weight:900;font-size:clamp(14px,1.2vw,17px);line-height:1.35}
.lu-c small{display:block;font-size:11px;font-weight:700;color:var(--red);letter-spacing:.04em}
.lu-c:hover{transform:translateY(-6px)}

/* のぼり旗1本から */
.one{position:relative;background:linear-gradient(180deg,#bfe0f3 0%,#e9f4fa 100%);color:var(--ink);padding:clamp(80px,10vw,140px) 0 0;overflow:hidden}
.one .eb{color:var(--red)}
.one-tx{display:grid;grid-template-columns:auto minmax(0,30em);gap:clamp(20px,5vw,90px);align-items:end;padding:0 clamp(16px,6vw,96px)}
.one-tx>p{color:#2f3a42}
.one-row{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,34px);margin-top:clamp(40px,6vw,80px);padding:0 16px}
.nb{position:relative;width:clamp(56px,7.4vw,124px);flex:0 0 auto;padding-right:6px}
.nb::after{content:"";position:absolute;right:0;top:-10px;bottom:-60px;width:5px;background:linear-gradient(90deg,#d9dde0,#fff,#b9bfc4);border-radius:2px}
.nb::before{content:"";position:absolute;right:-12px;bottom:-66px;width:30px;height:12px;background:#e9ecee;border-radius:3px 3px 0 0;box-shadow:0 2px 0 #c3c8cc}
.nb img{width:100%;height:auto;transform-origin:100% 0;animation:sway 3.2s ease-in-out infinite alternate;box-shadow:6px 10px 18px -10px rgba(0,0,0,.35)}
.nb:nth-child(2n) img{animation-duration:2.7s;animation-delay:-1.1s}
.nb:nth-child(3n) img{animation-duration:3.6s;animation-delay:-2s}
.nb:hover img{animation-play-state:paused;transform:scale(1.06)}
@keyframes sway{0%{transform:skewY(-1.5deg) scaleX(.97)}100%{transform:skewY(1.5deg) scaleX(1)}}
.one-ground{height:110px;background:#5d6166;margin-top:-30px;border-top:6px solid #8b8f94}

/* 利用条件 */
.cond{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;background:var(--ink);padding:clamp(80px,10vw,140px) clamp(16px,6vw,96px);border-top:6px solid var(--yel)}
.cond-tx p:not(.eb){color:#ddd;margin-top:14px;max-width:30em}
.cond-tx b{color:#fff}
.cond-r{position:relative}
.cond-img{display:block;width:92%;height:auto;margin:0 auto -14%;position:relative;z-index:1;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
.cond-warn{border-left:0;background:rgba(255,200,30,.12);color:#ffe7a3 !important;padding:10px 14px;border-radius:3px}
.cond-s{font-size:13px;font-weight:700;margin-top:14px}
.cond-card{padding-top:calc(14% + 20px) !important;background:var(--yel);color:var(--ink);border-radius:3px;padding:clamp(28px,4vw,52px);box-shadow:10px 10px 0 var(--red)}
.cond-k{font-weight:900;font-size:clamp(14px,1.3vw,17px);border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:10px}
.cond-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;line-height:1}
.cond-p b,.cond-y{white-space:nowrap}
.cond-m{flex-basis:100%;font-weight:900;font-size:clamp(16px,1.6vw,22px)}
.cond-p b{font-family:var(--en);font-weight:400;font-size:clamp(76px,9vw,140px);letter-spacing:.01em}
.cond-y{font-weight:900;font-size:clamp(22px,2.2vw,32px)}
.cond-y small{font-size:.55em}
.end-s{position:relative;font-size:12px;color:#ffe9e6;margin-top:18px;max-width:30em}

/* 相談 */
.end{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);height:100vh;height:100svh;background:var(--red)}
.end-ph{position:relative;overflow:hidden;background:#1d1f23}
.end-track{display:flex;height:100%;will-change:transform}
.es{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#3a3d43 0%,#1d1f23 70%)}
.es img{width:84%;height:auto;box-shadow:0 30px 60px -18px rgba(0,0,0,.75);transform:rotate(-2deg)}
.es:nth-child(odd) img{transform:rotate(2deg)}
.es figcaption{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(18px,4vh,40px);color:#fff;font-weight:900;font-size:clamp(15px,1.4vw,19px)}
.es figcaption span{display:block;font-family:var(--en);font-weight:400;font-size:12px;letter-spacing:.24em;color:var(--yel)}
.es-all{overflow:hidden}
.es-all img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;box-shadow:none;transform:rotate(-3deg) scale(1.08) !important;filter:brightness(.42) saturate(1.1)}
.es-all .all-tx{position:relative;left:auto;bottom:auto;text-align:center;color:#fff}
.all-tx em{display:block;font-style:normal;font-size:clamp(22px,2.6vw,38px);font-weight:900;margin:6px 0 clamp(14px,3vh,28px)}
.all-st{display:flex;justify-content:center;gap:clamp(18px,3vw,48px)}
.all-st p{font-size:clamp(12px,1vw,14px);font-weight:700;line-height:1.5}
.all-st b{display:block;font-weight:900;font-size:clamp(18px,1.8vw,26px);line-height:1}
.all-st i{font-style:normal;font-family:var(--en);font-weight:400;font-size:clamp(52px,6vw,96px);color:var(--yel);margin-right:4px}
.all-st small{display:block;font-size:11px;color:#ccc;font-weight:500}
.all-ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(16px,3vh,28px) auto 0;max-width:34em;padding:0 12px}
.all-ul li{font-size:clamp(12px,1vw,14px);font-weight:900;background:#fff;color:var(--ink);padding:5px 12px;border-radius:3px}
.es-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;box-shadow:none;transform:none !important}
.end-in{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,8vw,120px) clamp(20px,5vw,80px);color:#fff}
.end-big{position:absolute;left:0;bottom:-.12em;font-family:var(--en);font-size:clamp(90px,13vw,220px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);pointer-events:none;will-change:transform}
.end .eb{color:var(--ink);position:relative}
.end .h2{position:relative;margin:12px 0 18px;font-size:clamp(24px,2.7vw,42px);word-break:keep-all}
.end-p{position:relative;color:#ffe9e6;max-width:26em;margin-bottom:34px}
.btn-w{position:relative;align-self:flex-start;background:#fff;color:var(--ink);display:inline-flex;gap:14px;align-items:center}
.btn-w span{font-family:var(--en);transition:transform .3s}
.btn-w:hover span{transform:translateX(6px)}
.ft{background:#000;color:#888;text-align:center;font-size:13px;padding:24px 16px}

@media (max-width:760px){
  .logo img{height:36px}
  .h1{font-size:clamp(24px,7.4vw,34px)}
  .hd .btn{padding:8px 13px;font-size:14px}
  .one-tx{grid-template-columns:1fr}
  .end{grid-template-columns:1fr}
  .dl-stage{left:16px;right:16px;width:auto;top:84px;transform:none;height:44vh}
  .dl-im img{height:24vh}
  .dl figcaption{font-size:13px;margin-top:10px}
  .dl figcaption b{font-size:18px}
  .dl-n{top:auto;bottom:-10px}
  .big-tx p:last-child{font-size:13px;line-height:1.7}
  .cond{grid-template-columns:1fr}
  .end-ph{height:auto}
  .end-in{padding:28px 20px}
  .end .h2{font-size:22px;margin:6px 0 10px}
  .end-p{margin-bottom:18px;font-size:14px}
  .es img{width:80%}
  .end{grid-template-rows:48svh 1fr}
  .es-all{align-items:flex-end;padding-bottom:14px}
  .all-tx>span,.all-st small{display:none}
  .all-st i{font-size:38px}
  .all-st p{font-size:11px}
  .all-st b{font-size:15px}
  .all-tx em{font-size:18px;margin:0 0 8px}
  .all-ul{margin-top:10px;gap:5px}
  .all-ul li{font-size:11px;padding:2px 7px}
  .nb:nth-child(n+6){display:none}
  .nb{width:15vw}
  .pn{width:84vw;grid-template-columns:1fr}
  .pn .gd{width:150px;left:auto;right:10px;bottom:auto;top:calc(34vh - 120px)}
  .pn .gd-v{width:54px;top:calc(34vh - 150px)}
  .big-gd{width:52vw;height:50vw;top:90px;right:12px}
  .pn figure{height:34vh}
  .pn-tx{padding:18px 20px 22px}
  .pn-tx b{font-size:44px}
  .pn-tx h3{margin:6px 0}
  .pn-tx p{font-size:14px;line-height:1.7}
  .scn-pin{padding-top:76px;gap:14px}
  .scn-num{top:auto;bottom:18px}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 120px),linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.15) 100%)}
}
/* 動きなし(JSなし・動きを減らす設定) */
html:not(.js) .hero-a{clip-path:none}
html:not(.js) .hero-copy:not(.hero-copy2),html:not(.js) .tag-b,html:not(.js) .hint{display:none}
html:not(.js) .tag-a,html:not(.js) .hero-copy2 .btn{opacity:1}
html:not(.js) .scn-pin{height:auto;padding:80px 0}
html:not(.js) .scn-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}
html:not(.js) .pn{flex:0 0 auto;scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){.hint,.nb img{animation:none}}
.hd .btn{box-shadow:0 0 0 2px rgba(255,255,255,.9)}