body{overflow-x:hidden}.page{overflow:clip}.cms-story{--cms-pink:#ff69bd;--cms-lav:#a99cff;position:relative;z-index:2;isolation:isolate;color:#f7f5ff;background:radial-gradient(circle at 76% 14%,rgba(116,65,168,.22),transparent 34%),radial-gradient(circle at 18% 76%,rgba(55,78,158,.13),transparent 34%),linear-gradient(135deg,#0c1220 0%,#101426 46%,#171127 100%)}
.cms-story-intro{position:relative;z-index:2;max-width:1540px;margin:auto;padding:clamp(70px,7vw,110px) clamp(28px,5vw,80px) 10px}
.cms-story-kicker,.cms-story-outro small{margin:0 0 22px;color:#ff8bc9;font-size:12px;font-weight:800;letter-spacing:.32em}
.cms-story-intro h2{max-width:1280px;margin:0;font-size:clamp(42px,4.4vw,72px);line-height:1.2;letter-spacing:-.045em}
.cms-story-intro h2 span{color:#ff8dcc;background:linear-gradient(90deg,#ff86c8,#b8a0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cms-story-intro>p:last-child{max-width:830px;margin:30px 0 0;color:#b9bfd0;font-size:clamp(15px,1.25vw,19px);font-weight:700;line-height:2}
.cms-story-stage{position:relative;height:380vh}
.cms-story-sticky{position:sticky;top:68px;display:grid;grid-template-columns:minmax(0,68%) minmax(300px,32%);align-items:center;gap:clamp(24px,3vw,52px);min-height:calc(100svh - 68px);max-width:1540px;margin:auto;padding:28px clamp(28px,5vw,80px) 42px}
.cms-story-product{--cms-x:50%;--cms-y:50%;position:relative;order:1}.cms-story-product::before{position:absolute;inset:-12%;z-index:-1;content:"";background:radial-gradient(circle at var(--cms-x) var(--cms-y),rgba(255,92,190,.19),transparent 30%);filter:blur(18px);opacity:.8;transition:opacity .3s ease}.cms-story-copy{order:2;position:relative;min-height:660px;padding-left:38px;border-left:1px solid rgba(153,163,196,.3)}
.cms-story-copy-item{position:absolute;inset:8px 0 auto 38px;opacity:0;transform:translateY(16px);transition:opacity .38s ease,transform .45s ease;pointer-events:none}
.cms-story-copy-item.is-active{opacity:1;transform:translateY(0)}
.cms-story-number{display:inline-block;color:#ff83c6;font-size:18px;font-weight:900;line-height:1;letter-spacing:.06em}
.cms-story-copy-item small{display:inline-block;margin-left:12px;color:#aeb5cb;font-weight:800;letter-spacing:.26em}
.cms-story-copy-item h3{margin:18px 0 10px;font-size:clamp(25px,2.1vw,36px);line-height:1.35}
.cms-story-copy-item p{max-width:430px;margin:0;color:#bac0d1;font-size:14px;font-weight:700;line-height:1.8}
.cms-story-progress{position:absolute;right:0;bottom:0;left:38px;margin:0;padding:0;list-style:none}
.cms-story-progress::before{position:absolute;top:8px;bottom:8px;left:-39px;width:1px;content:"";background:linear-gradient(to bottom,#ff75c1 0 var(--cms-progress,0%),#49526c var(--cms-progress,0%) 100%);transition:background .45s ease}
.cms-story-progress li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:2px 10px;align-items:center;min-height:82px;margin:0 0 10px;padding:12px 16px;color:#727c96;border:1px solid rgba(129,140,176,.28);border-radius:12px;background:rgba(13,19,38,.46);font-size:10px;letter-spacing:.18em;transition:color .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
.cms-story-progress li b{grid-row:1/3;font-size:18px}.cms-story-progress li em{color:#d7dced;font-size:16px;font-style:normal;font-weight:800;letter-spacing:0}.cms-story-progress li:last-child{margin:0}.cms-story-progress li::before{position:absolute;left:-44px;width:11px;height:11px;border:1px solid #69738e;border-radius:50%;content:"";background:#111629;transition:.3s ease}
.cms-story-progress li.is-active{color:#ff86c8;border-color:rgba(255,105,189,.75);background:rgba(255,74,177,.08);box-shadow:0 0 28px rgba(255,82,174,.12)}.cms-story-progress li.is-active::before{border-color:#ff89ca;background:#ff89ca;box-shadow:0 0 20px rgba(255,105,189,.65)}
.cms-story-device{position:relative;overflow:hidden;border:1px solid rgba(174,183,223,.42);border-radius:clamp(14px,2vw,30px);background:#091222;box-shadow:0 35px 90px rgba(0,0,0,.42),0 0 55px rgba(118,72,199,.13)}
.cms-story-device img{display:block;width:100%;height:auto}.cms-story-device-mobile{display:none}
.cms-story-dim{position:absolute;inset:0;background:rgba(4,9,20,.17);pointer-events:none}
.cms-story-highlight{position:absolute;z-index:3;top:21%;left:20%;width:42%;height:74%;border:1px solid rgba(255,104,190,.92);border-radius:12px;background:rgba(255,82,174,.06);box-shadow:0 0 0 1px rgba(255,82,174,.2),0 0 32px rgba(255,82,174,.32);transition:top .5s ease,left .5s ease,width .5s ease,height .5s ease,opacity .35s ease}
.cms-story-highlight::before{position:absolute;inset:-1px;content:"";border-radius:inherit;background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.16) 45%,transparent 70%);transform:translateX(-115%);animation:cms-scan 3.2s ease-in-out infinite}
.cms-story-highlight::after{position:absolute;top:-29px;left:0;padding:5px 9px;border:1px solid rgba(255,126,199,.55);border-radius:999px;color:#ffd4eb;background:rgba(17,21,40,.92);content:"DIARY / LIVE";font-size:9px;font-weight:800;letter-spacing:.14em;white-space:nowrap}
.cms-story[data-step="1"] .cms-story-highlight::after{content:"SHIFT / UPDATED"}.cms-story[data-step="2"] .cms-story-highlight::after{content:"PRICE / EDITABLE"}.cms-story[data-step="3"] .cms-story-highlight::after{content:"NEWS / PUBLISHED"}
@keyframes cms-scan{0%,35%{transform:translateX(-115%)}70%,100%{transform:translateX(115%)}}
.cms-story[data-step="1"] .cms-story-device-desktop .cms-story-highlight{top:22%;left:64%;width:33%;height:27%}
.cms-story[data-step="2"] .cms-story-device-desktop .cms-story-highlight{top:38%;left:4.5%;width:15.5%;height:12%}
.cms-story[data-step="3"] .cms-story-device-desktop .cms-story-highlight{top:77%;left:64%;width:33%;height:19%}
.cms-story-triggers{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none}.cms-story-triggers>div{min-height:100vh}
.cms-story-outro{position:relative;padding:clamp(80px,10vw,150px) 24px;text-align:center;background:linear-gradient(180deg,transparent 0,rgba(22,18,40,.42) 42%,#171329 100%)}.cms-story-outro::after{position:absolute;right:0;bottom:-80px;left:0;height:180px;content:"";pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(156,91,212,.14),transparent 65%);filter:blur(24px)}.cms-story-outro p{margin:16px 0 0;font-size:clamp(28px,4vw,54px);font-weight:800;line-height:1.5}
@media(max-width:1024px){.cms-story{overflow:visible}.cms-story-intro{padding:80px 24px 28px;text-align:center}.cms-story-intro h2{font-size:clamp(38px,8vw,64px)}.cms-story-stage{height:auto;padding-bottom:44px}.cms-story-sticky{top:70px;display:block;min-height:auto;height:50svh;padding:8px 18px 0}.cms-story-copy,.cms-story-device-desktop{display:none}.cms-story-product{height:100%}.cms-story-device-mobile{display:block;width:min(82vw,400px);height:100%;margin:auto;border-radius:26px}.cms-story-device-mobile img{width:100%;height:100%;object-fit:contain}.cms-story-device-mobile .cms-story-highlight{top:18%;left:10%;width:80%;height:28%;border-radius:14px}.cms-story[data-step="1"] .cms-story-device-mobile .cms-story-highlight{top:70%;left:10%;width:80%;height:12%}.cms-story[data-step="2"] .cms-story-device-mobile .cms-story-highlight{top:5%;left:67%;width:22%;height:8%}.cms-story[data-step="3"] .cms-story-device-mobile .cms-story-highlight{top:48%;left:10%;width:80%;height:20%}.cms-story-triggers{position:relative;inset:auto;display:block;z-index:4;margin-top:12px;padding:0 22px 0 58px}.cms-story-triggers::before{position:absolute;top:22px;bottom:22px;left:35px;width:1px;content:"";background:#46516a}.cms-story-triggers>div{position:relative;display:block;min-height:0;margin-bottom:12px;padding:23px 48px 23px 22px;border:1px solid rgba(125,137,175,.32);border-radius:14px;background:rgba(16,22,43,.78);box-shadow:0 12px 30px rgba(0,0,0,.1);transition:border-color .3s ease,background .3s ease,transform .3s ease}.cms-story-triggers>div::before{position:absolute;top:50%;left:-29px;width:11px;height:11px;border:1px solid #6c7691;border-radius:50%;content:"";background:#111629;transform:translateY(-50%)}.cms-story-triggers>div::after{position:static;display:block;width:auto;white-space:pre-wrap;color:#b9bfd0;font-size:14px;font-weight:700;line-height:1.75}.cms-story-triggers>div:nth-child(1)::after{content:"01  DIARY\A写メ日記を更新。\A写真を選んで、文章を書いて公開するだけ。"}.cms-story-triggers>div:nth-child(2)::after{content:"02  SHIFT\A出勤情報を変更。\A急な変更も管理画面からすぐに反映。"}.cms-story-triggers>div:nth-child(3)::after{content:"03  PRICE\A料金・コースを変更。\A制作会社へ連絡せず店舗側で変更。"}.cms-story-triggers>div:nth-child(4)::after{content:"04  NEWS\Aお知らせを掲載。\A伝えたい内容をその場で作成・公開。"}.cms-story-triggers>div::marker{display:none}.cms-story-triggers>div.is-active{border-color:rgba(255,112,193,.82);background:linear-gradient(100deg,rgba(255,69,176,.12),rgba(87,63,153,.13));transform:translateX(4px);box-shadow:0 0 28px rgba(255,74,177,.12)}.cms-story-triggers>div.is-active::before{border-color:#ff84c7;background:#ff84c7;box-shadow:0 0 18px rgba(255,105,189,.7)}.cms-story-triggers>div.is-active::after{color:#fff}.cms-story-outro{padding:72px 24px 90px}}
@media(max-width:480px){.cms-story-intro>p:last-child br{display:none}.cms-story-sticky{top:62px;height:48svh}.cms-story-device-mobile{width:min(88vw,360px)}.cms-story-triggers{margin-top:8px}}
@media(max-width:1024px){.cms-story-sticky{z-index:5}}
@media(prefers-reduced-motion:reduce){.cms-story-copy-item,.cms-story-progress li,.cms-story-progress li::before,.cms-story-highlight{transition:none!important}.cms-story-highlight::before{animation:none}.cms-story-product::before{display:none}}