/* 開業ストーリーの段落（2026-10-19）：お店ができていく3D動画＋4段階の札＋最後にスマホへサイト。トップと開業ページで共用 */
.ks{--ks-ink:#0b252b;--ks-teal:#0B4F57;--ks-coral:#E2612A;--ks-mint:#8fd6da;color:#fff}
.ks-box{container-type:inline-size;display:grid;gap:18px}
.ks-inner{display:grid;gap:14px}
.ks-stage{position:relative;overflow:hidden;border-radius:18px;background:var(--ks-ink);aspect-ratio:16/10;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ks-stage .ks-poster,.ks-stage .ks-poster img,.ks-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%;display:block;margin:0;max-width:none}
.ks-stage video{opacity:0;transition:opacity .8s ease}
.ks.playing .ks-stage video,.ks.opened:not(.still) .ks-stage video{opacity:1}
.ks-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,37,43,0) 55%,rgba(11,37,43,.55) 100%);opacity:0;transition:opacity .8s ease}
.ks.opened .ks-stage:after{opacity:1}
.ks-cap{position:absolute;z-index:2;left:16px;top:14px;font-size:12px;font-weight:700;line-height:1.4;color:#fff;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 13px;border-radius:999px;white-space:nowrap}
.ks-cap .en{letter-spacing:.22em;font-size:10px;opacity:.8;margin-right:9px}
.ks-replay{position:absolute;z-index:3;left:16px;bottom:16px;width:38px;height:38px;padding:0;border-radius:50%;font-size:17px;line-height:36px;text-align:center;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.ks.opened:not(.still) .ks-replay{opacity:1;pointer-events:auto}
.ks-phone{position:absolute;z-index:3;right:5%;bottom:7%;width:clamp(100px,19cqw,190px);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;opacity:0;transform:translateY(50px) rotate(4deg);transition:opacity .7s ease,transform 1s cubic-bezier(.2,1.2,.4,1);pointer-events:none}
.ks.opened .ks-phone,.ks-phone:focus-visible{opacity:1;transform:none;pointer-events:auto}
.ks-phone-frame{display:block;width:100%;aspect-ratio:360/740;border-radius:clamp(16px,2.8cqw,28px);padding:clamp(5px,.8cqw,8px);background:#11171a;box-shadow:0 0 0 2px #3a4246 inset,0 26px 50px rgba(0,0,0,.55),0 0 70px rgba(255,190,120,.25);overflow:hidden;position:relative}
.ks-phone-frame:before{content:"";position:absolute;z-index:1;left:50%;top:8%;width:30%;height:2.2%;transform:translateX(-50%);border-radius:10px;background:#11171a}
.ks-phone-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:clamp(11px,2cqw,21px);margin:0;max-width:none}
.ks-phone-cap{font-size:12px;font-weight:700;line-height:1.4;background:rgba(255,255,255,.95);color:var(--ks-teal);padding:6px 13px;border-radius:999px;white-space:nowrap}
.ks-phone-cap b{margin-left:8px;color:var(--ks-coral)}
.ks-phone:hover .ks-phone-frame{transform:translateY(-3px)}
/* 4段階の札（狭いときは2×2、広いときは動画の右に縦並び） */
.ks-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;counter-reset:ks}
.ks-steps li{counter-increment:ks;position:relative;margin:0;padding:10px 12px 10px 42px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:rgba(255,255,255,.62);transition:background .45s,border-color .45s,color .45s}
.ks-steps li:before{content:counter(ks);position:absolute;left:12px;top:11px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:rgba(255,255,255,.16);font-size:12px;font-weight:700}
.ks-steps b{display:block;font-size:15px;line-height:1.4;color:inherit}
.ks-steps span{display:block;font-size:11.5px;line-height:1.5;margin-top:2px}
.ks-steps li.done{color:#fff}
.ks-steps li.done:before{content:"✓";background:var(--ks-mint);color:var(--ks-ink)}
.ks-steps li.on{color:#fff;background:var(--ks-coral);border-color:var(--ks-coral)}
.ks-steps li.on:before{background:#fff;color:var(--ks-coral)}
.ks-note{font-size:12px;line-height:1.7;color:rgba(255,255,255,.7);margin:0}
@container (min-width:560px){.ks-steps{grid-template-columns:repeat(4,1fr)}}
@container (min-width:900px){
 .ks-inner{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:center}
 .ks-steps{grid-template-columns:1fr;gap:12px}
 .ks-steps li{padding:14px 16px 14px 50px}
 .ks-steps li:before{left:14px;top:15px;width:26px;height:26px;line-height:26px;font-size:13px}
 .ks-steps b{font-size:17px}
 .ks-steps span{font-size:12.5px}
}
@media(max-width:600px){
 .ks-stage{aspect-ratio:540/862;border-radius:14px}
 .ks-stage .ks-poster,.ks-stage .ks-poster img,.ks-stage video{object-position:50% 45%}
 .ks-stage:after{background:linear-gradient(180deg,rgba(11,37,43,0) 50%,rgba(11,37,43,.6) 100%)}
 .ks-cap{left:10px;top:10px;font-size:11px;padding:5px 10px}
 .ks-cap .en{display:none}
 .ks-replay{left:12px;bottom:12px;width:34px;height:34px;line-height:32px;font-size:15px}
 .ks-phone{width:118px;right:12px;bottom:12px;gap:6px}
 .ks-phone-cap{font-size:10.5px;padding:4px 9px}
 .ks-phone-cap b{display:none}
 .ks-steps li{padding:9px 10px 9px 38px}
 .ks-steps li:before{left:10px;top:10px;width:20px;height:20px;line-height:20px;font-size:11px}
 .ks-steps b{font-size:14px}
 .ks-steps span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.ks-phone,.ks-stage video,.ks-steps li,.ks-stage:after{transition:none}.ks-phone{transform:none}}

/* トップでの置き方（濃い青緑の帯） */
.home .ks-sec{background:radial-gradient(120% 90% at 85% 0%,#12545b 0%,#0b2f35 55%,#0a2328 100%);color:#fff}
.home .ks-sec .h-eyebrow{color:var(--ks-mint)}
.home .ks-sec .h-title{color:#fff}
.home .ks-sec .h-head .h-lead2{color:rgba(255,255,255,.82)}
.home .ks-sec .h-head{margin-bottom:34px}
/* 開業ページでの置き方（記事の中の濃い箱） */
.art .ks-card{margin:26px 0 34px;padding:22px 20px 20px;border-radius:20px;background:radial-gradient(120% 90% at 85% 0%,#12545b 0%,#0b2f35 60%,#0a2328 100%)}
.art .ks-card h2{color:#fff;margin:0 0 8px;border:0;padding:0;font-size:22px;line-height:1.5;background:none}
.art .ks-card h2:before,.art .ks-card h2:after{display:none}
.art .ks-card .ks-lead{color:rgba(255,255,255,.85);font-size:14.5px;line-height:1.8;margin:0 0 16px}
.art .ks-card .ks-eyebrow{display:block;color:var(--ks-mint);font-size:12px;font-weight:700;letter-spacing:.2em;margin-bottom:4px}
@media(max-width:600px){.art .ks-card{padding:18px 14px 16px;margin-inline:-4px}.art .ks-card h2{font-size:19px}}
.ks{line-height:1.6}
@media(min-width:1080px){.art .ks-card{margin-left:-130px;margin-right:-130px;padding:28px 28px 24px}}
/* 画面の高さに収める（PC：見出し＋動画が1画面に入るように動画の幅を抑える） */
@media(min-width:901px){
 .home .ks-sec{padding:84px 0}
 .home .ks-sec .h-eyebrow{font-size:clamp(36px,3.4vw,52px);margin-bottom:8px}
 .home .ks-sec .h-head{margin-bottom:26px}
 .home .ks-sec .h-title{margin-bottom:12px}
 .ks-stage{width:min(100%,calc((100svh - 360px) * 1.6));min-width:min(100%,560px);justify-self:end}
}
/* スマホ：4段階の札を動画の上に1列で。動画は画面の高さの7割まで */
@media(max-width:600px){
 .ks-inner{gap:10px}
 .ks-steps{order:-1;grid-template-columns:repeat(4,1fr);gap:5px}
 .ks-steps li{padding:7px 2px 7px;text-align:center;border-radius:10px}
 .ks-steps li:before{position:static;display:block;margin:0 auto 3px;width:18px;height:18px;line-height:18px;font-size:10px}
 .ks-steps b{font-size:12px;line-height:1.3;white-space:nowrap}
 .ks-steps span{display:none}
 .ks-stage{width:min(100%,calc(64svh * 540 / 862));justify-self:center}
}
@media(min-width:601px){.ks-phone{width:clamp(96px,min(19cqw,calc((100svh - 360px) * .4 - 20px)),190px)}}
.ks-phone{align-items:flex-end}
.ks-phone-cap{margin-right:-4px}