/* 足場道場 在庫売り出しページ（2026-10-30 社長指示：動きがあって印象に残る集客ページ・足場道場のブランドが分かる）
 * 色：黒と黄（現場の注意の色）に、足場道場の青 #1a7cc0 と赤 #e60023 を差す。書体は足場道場と同じ Anton ＋ Noto Sans JP。
 * 動き：文字が集まる・帯が流れる・切り抜きが回りながら入る・値段が数え上がる・踏板の山がせり上がる（会社の動きの見本帳から）。
 * 値段と売り切れは足場見積システムの「売り出しの値段」から読む。読めない時は下に書いた最初の値段のまま出す。 */
:root{
  --kuro:#0f0e0c; --kuro2:#1b1a17; --ki:#ffd400; --ao:#1a7cc0; --aka:#e60023; --line:#06c755; --shiro:#fff; --usui:#b9b5ab;
  --tora:repeating-linear-gradient(-45deg,var(--ki) 0 18px,var(--kuro) 18px 36px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--kuro);color:var(--shiro);font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:500;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.num{font-family:Anton,"Noto Sans JP",sans-serif;letter-spacing:.02em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ── 上の帯 ── */
.top{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);border-bottom:2px solid var(--ki)}
.top .wrap{display:flex;align-items:center;gap:12px;height:62px}
.top img{width:42px;height:42px;object-fit:contain}
.brand{line-height:1.2}
.brand b{display:block;font-size:18px;font-weight:900}
.brand small{color:var(--ao);font-size:11px;font-weight:700;letter-spacing:1px}
.top .tel{margin-left:auto;text-decoration:none;text-align:right;line-height:1.1}
.top .tel small{display:block;font-size:10px;color:var(--usui)}
.top .tel span{font-size:22px;color:var(--ki)}

/* ── 幕開け ── */
.hero{position:relative;min-height:calc(100svh - 62px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero picture,.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;animation:yoru 14s ease-out both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.78) 45%,rgba(10,9,8,.15) 100%)}
@keyframes yoru{from{transform:scale(1.18)}to{transform:scale(1)}}
.hero .wrap{width:100%;padding-top:48px;padding-bottom:96px}
.kicker{display:inline-block;background:var(--aka);color:#fff;font-weight:900;font-size:14px;padding:4px 12px;transform:skewX(-10deg);margin-bottom:18px}
.kicker span{display:inline-block;transform:skewX(10deg)}
.midashi{font-weight:900;font-size:clamp(46px,9.4vw,112px);line-height:1.05;letter-spacing:-.02em}
.midashi .c{display:inline-block;opacity:0}
.midashi .ki{color:var(--ki)}
body.in .midashi .c{animation:atsumaru .9s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i) * 45ms + .15s)}
@keyframes atsumaru{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.6);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
.fuku{margin-top:20px;font-size:clamp(16px,2.2vw,22px);font-weight:700;max-width:34em;opacity:0}
body.in .fuku{animation:ukabu .8s 1s both}
@keyframes ukabu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-price{margin-top:26px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;opacity:0}
body.in .hero-price{animation:ukabu .8s 1.25s both}
.hero-price .label{background:var(--ki);color:var(--kuro);font-weight:900;padding:6px 12px;font-size:15px}
.hero-price .yen{font-size:clamp(64px,10vw,120px);line-height:.9;color:var(--ki)}
.hero-price .yen small{font-size:.32em;color:#fff;margin-left:4px}
.hero-price .zei{font-size:14px;color:var(--usui)}
.hero .cut{position:absolute;right:-4%;bottom:12%;width:min(56vw,700px);z-index:-1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:tobikomu 1.4s .5s cubic-bezier(.2,.9,.2,1) both,fuwa 5s 2s ease-in-out infinite}
@keyframes tobikomu{from{opacity:0;transform:translate(60%,-30%) rotate(38deg)}to{opacity:1;transform:rotate(-8deg)}}
@keyframes fuwa{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-14px)}}
/* 右上の印：ChatGPTで作った絵（今がチャンス！在庫大放出・下の黒い帯は空）。帯の上に「○月○日（○）まで」を重ねる。
 * 終わりの日は足場見積システムの「売り出しの値段」で変える（読めない時は data-end の日） */
.hanko{position:absolute;right:4%;top:5%;width:clamp(150px,22vw,300px);aspect-ratio:1;transform:rotate(8deg);opacity:0;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));container-type:inline-size}
.hanko img{width:100%;height:100%}
.hanko .made{position:absolute;left:16%;right:16%;top:75.8%;height:8.6%;display:flex;align-items:center;justify-content:center;color:var(--ki);font-weight:900;font-size:6.4cqw;line-height:1;letter-spacing:.02em;white-space:nowrap;transform:rotate(-.6deg)}
.hanko .made[hidden]{display:none}
body.in .hanko{animation:osu .5s 1.7s cubic-bezier(.3,1.6,.5,1) both,dokun 1.6s 2.4s ease-in-out infinite}
@keyframes osu{from{opacity:0;transform:rotate(8deg) scale(2.6)}to{opacity:1;transform:rotate(8deg) scale(1)}}
@keyframes dokun{0%,100%{transform:rotate(8deg) scale(1)}12%{transform:rotate(8deg) scale(1.07)}24%{transform:rotate(8deg) scale(1)}36%{transform:rotate(8deg) scale(1.04)}48%{transform:rotate(8deg) scale(1)}}
.kicker b{font-weight:900;color:var(--ki);white-space:nowrap}
.iime{position:absolute;right:12px;bottom:70px;font-size:11px;color:rgba(255,255,255,.6)}

/* ── 流れる帯 ── */
.obi{background:var(--ki);color:var(--kuro);overflow:hidden;white-space:nowrap;border-block:4px solid var(--kuro);position:relative;z-index:2}
.obi.tora{background:var(--tora);height:14px;border:0}
.obi .track{display:inline-flex;animation:nagare 22s linear infinite}
.obi .group{display:inline-flex;gap:40px;padding:12px 20px;font-weight:900;font-size:20px}
.obi .group>span::before{content:"▶";margin-right:10px;color:var(--aka)}
@keyframes nagare{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 見出しの共通 ── */
section{padding:88px 0}
.sec-ttl{font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.25;margin-bottom:12px}
.sec-ttl em{font-style:normal;color:var(--ki)}
.sec-en{font-family:Anton,sans-serif;color:var(--ao);font-size:15px;letter-spacing:.2em}
.sec-lead{color:var(--usui);max-width:40em}

/* ── 値段のカード ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.card{position:relative;background:var(--kuro2);border:2px solid #333;border-radius:14px;padding:22px 22px 26px;overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--ki)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--tora)}
.card .zu{height:190px;display:grid;place-items:center;margin:8px 0 14px}
.card .zu img{max-height:190px;width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));opacity:0;transform:translateY(-60px) rotate(-14deg)}
.card.deru .zu img{animation:fuda .9s cubic-bezier(.2,1.3,.4,1) both,yureru 4s 1s ease-in-out infinite}
@keyframes fuda{from{opacity:0;transform:translateY(-60px) rotate(-14deg)}to{opacity:1;transform:rotate(3deg)}}
@keyframes yureru{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-2deg) translateY(-6px)}}
.card h3{font-weight:900;font-size:22px;line-height:1.3}
.card .spec{color:var(--usui);font-size:14px}
.card .mi{position:relative;margin:12px 0 4px;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.card .mi img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .mi img{transform:scale(1.06)}
.card .mi figcaption{position:absolute;left:8px;top:8px;background:var(--ki);color:var(--kuro);font-weight:900;font-size:12px;padding:2px 8px;border-radius:4px}
.card.soldout .mi img{filter:grayscale(1) opacity(.5)}
.card .price{margin-top:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card .price .yen{font-size:56px;line-height:1;color:var(--ki)}
.card .price .tani{font-weight:900}
.card .zei{font-size:13px;color:var(--usui)}
.card .sold{display:none;position:absolute;top:56px;left:50%;transform:translateX(-50%) rotate(-12deg);border:4px solid var(--aka);color:var(--aka);background:rgba(255,255,255,.95);font-weight:900;font-size:28px;padding:4px 18px;letter-spacing:.1em}
.card.soldout .sold{display:block}
.card.soldout .price .yen{color:#777;text-decoration:line-through}
.card.soldout .zu img{filter:grayscale(1) opacity(.5)}
.chuui{margin-top:18px;font-size:12px;color:var(--usui)}

/* ── せり上がる山 ── */
.yama{background:linear-gradient(180deg,var(--kuro) 0%,#16140f 100%);position:relative;overflow:hidden}
.yama .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.yama .pile{will-change:transform;transform:translateY(var(--y,120px)) scale(var(--s,.85));filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
.riyuu{list-style:none;margin-top:26px;display:grid;gap:16px}
.riyuu li{display:flex;gap:14px;align-items:flex-start;background:#1f1d19;border-left:6px solid var(--ki);padding:14px 16px;border-radius:0 10px 10px 0}
.riyuu .n{font-family:Anton,sans-serif;font-size:30px;line-height:1;color:var(--ki);min-width:1.4em}
.riyuu b{display:block;font-weight:900;font-size:18px}
.riyuu p{color:var(--usui);font-size:14px}
.jitsu{margin-top:22px;display:flex;gap:14px;align-items:center;background:#1f1d19;border-radius:10px;padding:12px}
.jitsu img{width:110px;height:110px;object-fit:cover;border-radius:8px}
.jitsu p{font-size:13px;color:var(--usui)}
.jitsu b{color:#fff}

/* ── 受け渡し・流れ ── */
.uke{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.uke div{background:#fff;color:var(--kuro);border-radius:12px;padding:20px}
.uke .yard{width:calc(100% + 40px);margin:-20px -20px 14px;height:150px;object-fit:cover;border-radius:12px 12px 0 0;display:block}
.uke h4{font-weight:900;font-size:19px;color:var(--ao)}
.uke p{font-size:14px;margin-top:6px}
.uke .big{font-family:Anton,sans-serif;font-size:34px;color:var(--aka);line-height:1.1}
.nagare{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.nagare li{list-style:none;background:var(--kuro2);border:1px solid #333;border-radius:12px;padding:18px;position:relative}
.nagare li::before{counter-increment:s;content:"STEP " counter(s);font-family:Anton,sans-serif;color:var(--ki);letter-spacing:.1em}
.nagare b{display:block;font-weight:900;font-size:17px;margin-top:4px}
.nagare p{font-size:13px;color:var(--usui)}

/* ── 運営 ── */
.unei{background:var(--ao);color:#fff}
.unei .wrap{display:flex;gap:28px;align-items:center}
.unei img{width:150px;flex:none}
.unei p{font-size:15px}

/* ── 問い合わせ ── */
.cta{text-align:center;background:radial-gradient(circle at 50% 0%,#2a2616 0%,var(--kuro) 70%)}
.btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:300px;padding:14px 28px;border-radius:60px;text-decoration:none;font-weight:900;box-shadow:0 6px 0 rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.btn small{font-size:12px;font-weight:700}
.btn .dai{font-size:22px}
.btn-line{background:var(--line);color:#fff;animation:myaku 2.2s ease-in-out infinite}
.btn-tel{background:var(--ki);color:var(--kuro)}
.btn-tel .dai{font-family:Anton,sans-serif;font-size:28px;letter-spacing:.04em}
@keyframes myaku{0%,100%{box-shadow:0 6px 0 rgba(0,0,0,.45),0 0 0 0 rgba(6,199,85,.55)}50%{box-shadow:0 6px 0 rgba(0,0,0,.45),0 0 0 16px rgba(6,199,85,0)}}
.form-link{display:inline-block;margin-top:18px;color:var(--usui);font-size:14px}
.rei{margin:22px auto 0;max-width:520px;background:#fff;color:var(--kuro);border-radius:14px;padding:14px 18px;text-align:left;font-size:14px;position:relative}
.rei::before{content:"LINEの例";position:absolute;top:-12px;left:16px;background:var(--line);color:#fff;font-size:12px;font-weight:900;padding:2px 10px;border-radius:20px}

footer{background:#000;color:var(--usui);font-size:13px;padding:30px 16px 110px;text-align:center;line-height:1.8}
footer b{color:#fff}

/* ── スマホの下に固定のボタン ── */
.fixed-cta{display:none}

/* ── 出てくる動き（見えたら） ── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.9,.25,1)}
.reveal.deru{opacity:1;transform:none}

@media (max-width:860px){
  .cards,.uke{grid-template-columns:1fr}
  .nagare{grid-template-columns:1fr 1fr}
  .yama .wrap{grid-template-columns:1fr}
  /* スマホでは画面の幅に収める。動きで1.05倍になっても右が切れないよう88%にする（2026-10-31 社長「右側、スマホで切れています」） */
  .yama .pile{width:88%;max-width:400px;margin:0 auto}
  .hero .cut{width:92vw;right:-18%;bottom:auto;top:52%;opacity:.55}
  .hanko{width:150px;right:1%;top:1%}
  .hero .kicker{max-width:calc(100% - 140px)}
  .unei .wrap{flex-direction:column;text-align:center}
  /* 見出しの色の付いた言葉は、途中で折り返さず1かたまりで次の行へ（2026-10-31） */
  .sec-ttl em{display:inline-block}
  section{padding:64px 0}
  .top .tel span{font-size:18px}
  .btn{min-width:0;width:100%}
  .fixed-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:8px;background:rgba(0,0,0,.92);border-top:2px solid var(--ki)}
  .fixed-cta a{flex:1;text-align:center;text-decoration:none;font-weight:900;border-radius:40px;padding:12px 6px;font-size:15px}
  .fixed-cta .l{background:var(--line);color:#fff}
  .fixed-cta .t{background:var(--ki);color:var(--kuro)}
}

/* 動きを減らす設定の人には、最初から出しておき、動かさない */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .midashi .c,.fuku,.hero-price,.hanko,.reveal,.card .zu img{opacity:1!important;transform:none!important;filter:none!important}
  .hanko{transform:rotate(8deg)!important}
  .yama .pile{transform:none!important}
}