/* =========================================================
   CROWN PREVIEW 14 — refresh
   ========================================================= */

/* ---------- OPENING v10：全画面の札幌 → 家族 → 扉 → 札幌の頂点へ ---------- */
html:has(.op3.on){overflow:hidden}
.op3{position:fixed;inset:0;z-index:300;background:#070b0e;overflow:hidden;visibility:hidden;opacity:0;transition:opacity 1s ease,visibility 1s;font-family:'Noto Serif JP','Yu Mincho',serif;--pow:0}
.op3.on{visibility:visible;opacity:1}
.op3.fly{opacity:0;pointer-events:none}

/* scenes */
.op-sc{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease}
.op-sc.on{opacity:1;z-index:2}
.op-sc.was{opacity:1;z-index:1}
.op-sc img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;will-change:transform;user-select:none}
.op-sc.fam img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.op-sc:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000c 0%,#0006 26%,#0000 55%),radial-gradient(ellipse at 50% 50%,#0000 55%,#0007 100%);pointer-events:none}
.op-sc.fam:after{background:linear-gradient(0deg,#0009,#0005),radial-gradient(ellipse at center,#0000 40%,#000a 100%)}
.op-sc.on.fam img{animation:opFamZoom 4.6s ease-out both}
@keyframes opFamZoom{from{transform:scale(1.16)}to{transform:scale(1.02)}}

/* words */
.op-words{position:absolute;inset:0;z-index:6;display:grid;place-items:end center;padding:0 5vw 13vh;pointer-events:none}
.op-w{grid-area:1/1;margin:0;text-align:center;opacity:0;transition:opacity .45s}
.op-w.on{opacity:1}
.op-w br.sp{display:none}
.op-w small{display:block;font:600 clamp(11px,1.05vw,14px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.55em;padding-left:.55em;color:#f6d892;margin-bottom:18px;text-shadow:0 2px 10px #000c;opacity:0}
.op-w.on small{animation:opFade .8s .1s both}
.op-w b{display:block;font:900 clamp(38px,6.6vw,112px)/1.25 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.1em;padding-left:.1em;color:#fff;text-shadow:0 0 30px #0009,0 6px 40px #000c;white-space:nowrap}
.op-w b:after{content:'';display:block;height:2px;width:0;margin:22px auto 0;background:linear-gradient(90deg,#0000,#f6d892,#fff3c9,#f6d892,#0000);transition:width 1.3s .5s cubic-bezier(.2,.8,.2,1)}
.op-w.on b:after{width:62%}
.op3 .c{display:inline-block;opacity:0}
.op-w.on .c{animation:opChar .9s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--i)*60ms)}
@keyframes opChar{0%{opacity:0;transform:translateY(.35em) scale(1.45);filter:blur(12px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes opFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* question */
.op-q{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:0 6vw;text-align:center;pointer-events:none}
.op-q p{margin:0;font:700 clamp(24px,3.6vw,56px)/1.65 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.1em;color:#fff;text-shadow:0 4px 30px #000e}
.op-q .q2{color:#f6d892;font-size:clamp(22px,3.1vw,48px)}
.op3.q1 .q1 .c,.op3.q2 .q2 .c{animation:opQ .7s ease-out both;animation-delay:calc(var(--i)*55ms)}
@keyframes opQ{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.op3.gate .op-q,.op3.gate .op-words{opacity:0;transition:opacity .3s}

/* gate & doors */
.op-gate{position:absolute;inset:0;z-index:8;visibility:hidden;opacity:0;perspective:1700px;perspective-origin:50% 50%}
.op3.gate .op-gate{visibility:visible;opacity:1;scale:1.14;transition:opacity .25s,scale 3.6s cubic-bezier(.5,0,.9,.6)}
.op3.open .op-gate{scale:1;transition:scale 2.4s cubic-bezier(.15,.85,.2,1)}
.op-stage{position:absolute;inset:0;overflow:hidden}
.op-stage img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.45);filter:blur(12px) brightness(.55) saturate(1.2)}
.op3.open .op-stage img{transform:scale(1);filter:none;transition:transform 3s cubic-bezier(.12,.85,.2,1),filter 1.4s ease}
.op-light{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 35% 70% at 50% 50%,#fff8e2,#ffd98acc 30%,#0000 70%);opacity:calc(var(--pow)*.9);transition:opacity .4s}
.op-door{position:absolute;top:0;bottom:0;width:50.4%;z-index:2;overflow:hidden;transform:translateX(var(--off,0));backface-visibility:hidden}
.op-door.l{left:0;transform-origin:0 50%;--off:-102%}
.op-door.r{right:0;transform-origin:100% 50%;--off:102%}
.op3.shut .op-door{--off:0%;transition:transform .55s cubic-bezier(.8,0,.25,1)}
.op3.open .op-door.l{transform:rotateY(-108deg);transition:transform 1.35s cubic-bezier(.7,0,.18,1)}
.op3.open .op-door.r{transform:rotateY(108deg);transition:transform 1.35s cubic-bezier(.7,0,.18,1)}
.op-panel{position:absolute;inset:0;background:linear-gradient(90deg,#0d151d,#17222d 45%,#0f1820),repeating-linear-gradient(90deg,#ffffff05 0 2px,#0000 2px 9px);box-shadow:inset 0 0 160px #000c}
.op-panel:before{content:'';position:absolute;inset:6% 9%;border:1px solid #e2b65c70;box-shadow:inset 0 0 0 12px #0000,inset 0 0 0 13px #e2b65c33}
.op-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#0000 30%,#f6d89222 48%,#0000 60%);background-size:250% 100%;background-position:120% 0;transition:background-position 1s}
.op3.beat .op-panel:after{background-position:-20% 0}
.op-door.l .op-panel:before{right:3%}.op-door.r .op-panel:before{left:3%}
.op-door:after{content:'';position:absolute;top:43%;height:14%;width:7px;border-radius:4px;background:linear-gradient(#fff3c9,#c99a3e 50%,#8a6020);box-shadow:0 0 12px #f6d89266}
.op-door.l:after{right:4%}.op-door.r:after{left:4%}
.op-half{position:absolute;top:50%;width:min(46vh,42vw);aspect-ratio:1;transform:translate(50%,-50%)}
.op-door.l .op-half{right:0}
.op-door.r .op-half{left:0;transform:translate(-50%,-50%)}
.op-demb{width:100%;height:100%;filter:drop-shadow(0 0 calc(10px + var(--pow)*30px) #f6d89288)}
.op-seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:3;background:#fffaf0;opacity:calc(.15 + var(--pow)*.85);box-shadow:0 0 calc(8px + var(--pow)*70px) calc(1px + var(--pow)*16px) #ffd98a;transition:opacity .3s,box-shadow .3s}
.op3.open .op-seam,.op3.open .op-light{opacity:0;transition:opacity .4s}
.op3.beat .op-gate{animation:opBeat .5s cubic-bezier(.3,0,.3,1)}
@keyframes opBeat{0%{translate:0 0}12%{translate:-7px 3px}24%{translate:6px -3px}36%{translate:-4px 2px}52%{translate:2px 0}100%{translate:0 0}}
.op3.slam .op-gate{animation:opBeat .45s}

.op-count{position:absolute;inset:0;z-index:9;display:grid;place-items:center;pointer-events:none}
.op-count span{grid-area:1/1;font:600 clamp(70px,15vw,250px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.14em;padding-left:.14em;color:#0000;-webkit-text-stroke:1.5px #f6d892;opacity:0;white-space:nowrap}
.op-count span.on{animation:opCount .8s cubic-bezier(.2,.8,.3,1) both}
@keyframes opCount{0%{opacity:0;transform:scale(1.6);filter:blur(6px)}20%{opacity:.95;filter:none}100%{opacity:0;transform:scale(.92)}}

/* final */
.op-final{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4vw;pointer-events:none;visibility:hidden}
.op-final:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 52%,#000a,#0000 75%);opacity:0;transition:opacity 1s}
.op3.summit .op-final{visibility:visible}
.op3.summit .op-final:before{opacity:1}
.op-mark{display:flex;flex-direction:column;align-items:center;opacity:0}
.op-emb{width:clamp(92px,14vh,160px);height:auto;filter:drop-shadow(0 0 26px #f6d892aa) drop-shadow(0 6px 18px #000a)}
.op-wm b{display:block;margin-top:14px;font:600 clamp(26px,3.6vw,50px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.48em;padding-left:.48em;background:linear-gradient(100deg,#c99a3e 0%,#fff3c9 35%,#e2b65c 55%,#fff0bd 80%,#c99a3e 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:#0000;filter:drop-shadow(0 2px 8px #000c)}
.op-wm span{display:block;margin:12px auto 0;padding:10px 0 0 .5em;border-top:1px solid #f6d89266;font:600 clamp(9px,.85vw,12px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.5em;color:#f6d892dd;width:max-content}
.op-summit{margin:3.4vh 0 0;font:900 clamp(50px,10vw,176px)/1.15 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.08em;padding-left:.08em;color:#fff;text-shadow:0 0 50px #f6d89299,0 8px 50px #000d;opacity:0;white-space:nowrap}
.op-tag{margin:2.6vh 0 0;font:700 clamp(15px,1.9vw,26px)/1.6 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.16em;color:#fff4d8;text-shadow:0 2px 18px #000e;opacity:0}
.op3.summit .op-summit{animation:opSlam .8s cubic-bezier(.2,1.25,.3,1) both}
.op3.summit .op-mark{animation:opDrop 1.1s .5s cubic-bezier(.2,1.2,.3,1) both}
.op3.summit .op-wm b{animation:opGold 2.4s 1.2s ease-in-out both}
.op3.summit .op-tag{animation:opFade 1s 1.15s both}
.op3.summit .op-emb .emb-shine{animation:embShine 1.3s 1.25s ease-in-out both}
.op3.beat .op-demb .emb-shine{animation:embShine .7s ease-in-out}
@keyframes opSlam{0%{opacity:0;transform:scale(3.4);filter:blur(18px)}55%{opacity:1;filter:blur(0)}78%{transform:scale(.96)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes opDrop{0%{opacity:0;transform:translateY(-50px) scale(.5) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes opGold{from{background-position:100% 0}to{background-position:0 0}}
.emb-shine{transform:translateX(0) skewX(-20deg)}
@keyframes embShine{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(360px) skewX(-20deg)}}

.op-fx{position:absolute;inset:0;z-index:12;width:100%;height:100%;pointer-events:none}
.op-flash{position:absolute;inset:0;z-index:13;background:radial-gradient(circle at 50% 50%,#fff 0,#fffaf0 35%,#ffe3a6 100%);opacity:0;pointer-events:none}
.op3.open .op-flash{animation:opFlash 1.2s ease-out}
@keyframes opFlash{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.op-vig{position:absolute;inset:0;z-index:14;pointer-events:none;box-shadow:inset 0 0 20vmin #000b}
.op-skip{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;background:#0007;border:1px solid #f6d89299;color:#f6d892;font:600 11px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.3em;padding:11px 16px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.op-skip:hover{background:#f6d89233}

@media(max-width:760px){
 .op-words{padding-bottom:16vh}
 .op-w br.sp{display:block}
 .op-w b{font-size:clamp(26px,8vw,42px);letter-spacing:.05em;padding-left:.05em;white-space:normal;line-height:1.45}
 .op-w small{letter-spacing:.36em;font-size:10px}
 .op-q p{font-size:clamp(20px,5.6vw,30px)}
 .op-q .q2{font-size:clamp(18px,5vw,26px)}
 .op-summit{font-size:clamp(40px,12.6vw,68px)}
 .op-tag{font-size:clamp(13px,3.7vw,17px);letter-spacing:.08em}
 .op-half{width:62vw}
}

/* ---------- HERO：大通公園（11:11）＋ あなたと同じ未来を ---------- */
.hero-frame.summer{background-image:linear-gradient(90deg,#07100eb8,#07100e18 62%,#07100e00),linear-gradient(0deg,#07100ea0,#07100e00 48%),url('assets/odori-hero.jpg')!important;background-size:cover,cover,cover!important;background-position:center,center,50% 34%!important}
.hero-frame.winter{display:block!important;background-image:linear-gradient(90deg,#0a1a24a8,#0a1a2414 62%,#0a1a2400),linear-gradient(0deg,#0a1a2490,#0a1a2400 48%),url('assets/together-sunrise.jpg')!important;background-size:cover,cover,cover!important;background-position:center,center,40% 50%!important}
.cx-hero-crown{display:none!important}
.hero .hx-logo{position:absolute;right:3.5%;top:10%;z-index:4;width:min(380px,25vw);text-align:center;pointer-events:none;opacity:0}
body.cx-crown-in .hero .hx-logo{animation:hxIn 1.5s cubic-bezier(.2,1.15,.3,1) both}
.hx-img{position:relative;display:block}
.hx-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 36px #fff3d0b0) drop-shadow(0 10px 26px #000a);animation:hxGlow 4.5s 1.6s ease-in-out infinite}
.hx-shine{position:absolute;inset:0;-webkit-mask:url('assets/crown-logo.png') center/100% 100% no-repeat;mask:url('assets/crown-logo.png') center/100% 100% no-repeat;background:linear-gradient(105deg,#0000 0,#fff8 40%,#fff 50%,#fff8 60%,#0000 100%) no-repeat;background-size:34% 100%;background-position:-60% 0;mix-blend-mode:screen;animation:hxShine 5.5s 1.8s ease-in-out infinite}
.hx-star{position:absolute;width:30px;height:30px;background:radial-gradient(circle,#fff 0 20%,#fff3c9 45%,#f6d892 70%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);opacity:0;filter:drop-shadow(0 0 6px #fff)}
.hx-star.s1{top:2%;left:62%;animation:hxTwinkle 5.5s 2.3s infinite}
.hx-star.s2{top:34%;left:6%;width:20px;height:20px;animation:hxTwinkle 5.5s 2.9s infinite}
.hx-star.s3{top:66%;left:86%;width:24px;height:24px;animation:hxTwinkle 5.5s 3.3s infinite}
.hx-cap{display:block;margin-top:14px;font:600 clamp(11px,1vw,14px)/1.6 'Cormorant Garamond',Georgia,serif;letter-spacing:.42em;padding-left:.42em;color:#fff;text-shadow:0 2px 14px #000d}
@keyframes hxIn{0%{opacity:0;transform:scale(2.6);filter:blur(18px) brightness(2.2)}55%{opacity:1;filter:blur(0) brightness(1.7)}80%{transform:scale(.97)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes hxShine{0%{background-position:-60% 0}35%,100%{background-position:160% 0}}
@keyframes hxGlow{0%,100%{filter:drop-shadow(0 0 30px #fff3d0a0) drop-shadow(0 10px 26px #000a)}50%{filter:drop-shadow(0 0 56px #fff6dcdd) drop-shadow(0 10px 26px #000a)}}
@keyframes hxTwinkle{0%,100%{opacity:0;transform:scale(0) rotate(0)}6%{opacity:1;transform:scale(1.15) rotate(45deg)}14%{opacity:0;transform:scale(0) rotate(90deg)}}
@media(max-width:760px){.hero .hx-logo{width:33vw;right:3%;top:8.5%}.hx-cap{display:none}}

/* ---------- MISSION / VISION：見出しがボーン ---------- */
.mvv-section .editorial-heading>*{display:block;width:max-content;transform-origin:20% 60%}
.motion .mission .editorial-heading:not(.visible)>*,.motion .vision .editorial-heading:not(.visible)>*{opacity:0}
.mission .editorial-heading.visible>span,.vision .editorial-heading.visible>span{animation:popBoom .85s cubic-bezier(.2,.9,.3,1) both}
.mission .editorial-heading.visible>strong,.vision .editorial-heading.visible>strong{animation:popBoom 1.05s .16s cubic-bezier(.2,.9,.3,1) both,cxGold 6s 1.3s linear infinite}
@keyframes popBoom{0%{opacity:0;transform:scale(.2);filter:blur(20px)}55%{opacity:1;transform:scale(1.14);filter:blur(0)}76%{transform:scale(.97)}100%{opacity:1;transform:scale(1);filter:none}}
.vision h2.cx-zoom.in .cx-ch{animation:chBoom .75s cubic-bezier(.2,1.45,.35,1) both!important;animation-delay:calc(.35s + var(--i)*48ms)!important;display:inline-block}
@keyframes chBoom{0%{opacity:0;transform:scale(2.8);filter:blur(10px)}60%{opacity:1;filter:none}100%{opacity:1;transform:none;filter:none}}

/* ---------- VALUES：晴れた写真に／握手写真をシネマ表示 ---------- */
.values .cx-vrows .value-card:nth-child(1){--vbg:url('assets/op-s1.jpg')!important}
.values .cx-vrows .value-card:nth-child(2){--vbg:url('assets/vision-station.jpg')!important}
.values .cx-acc .value-card:nth-child(1) .cx-v-ph{background-position:72% 40%!important}
.values .cx-acc .value-card:nth-child(2) .cx-v-ph{background-position:50% 35%!important}
.cx-tb{position:relative;overflow:hidden}
.cx-vstage .cx-tb-img{clip-path:inset(0 50% 0 50%);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1)}
.cx-tb.tb-in .cx-tb-img{clip-path:inset(0 0 0 0)}
.cx-tb:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#0000 35%,#fff6dc55 48%,#0000 60%);background-size:260% 100%;background-position:130% 0}
.cx-tb.tb-in:after{animation:tbSweep 2.2s 1.3s ease-in-out both}
@keyframes tbSweep{to{background-position:-30% 0}}
.cx-tb-list{position:absolute;left:4%;bottom:7%;z-index:2;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.cx-tb-list li{opacity:0;transform:translateX(-30px);transition:opacity .7s,transform .7s cubic-bezier(.2,.9,.3,1)}
.cx-tb.tb-in .cx-tb-list li{opacity:1;transform:none}
.cx-tb.tb-in .cx-tb-list li:nth-child(1){transition-delay:1.5s}.cx-tb.tb-in .cx-tb-list li:nth-child(2){transition-delay:1.7s}.cx-tb.tb-in .cx-tb-list li:nth-child(3){transition-delay:1.9s}
.cx-tb-list button{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 14px;border:1px solid #f6d89299;border-radius:999px;background:#0c1a16b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:700 clamp(13px,1.15vw,17px)/1.4 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.08em;cursor:pointer;text-align:left;transition:background .3s,transform .3s}
.cx-tb-list button:hover{background:#c99a3ecc;transform:translateX(6px)}
.cx-tb-list b{font:600 clamp(18px,1.6vw,24px)/1 'Cormorant Garamond',Georgia,serif;color:#f6d892}
.cx-tb-list button:hover b{color:#fff}
@media(max-width:760px){.cx-tb-list{left:3%;bottom:4%;gap:6px}.cx-tb-list button{padding:7px 12px 7px 9px;font-size:11px;gap:8px}.cx-tb-list b{font-size:15px}}

/* ---------- 4つのサポート：大きく・太く・ゆっくり ---------- */
.cx-gal{padding:36px 0 64px!important}
.cx-gal-row{animation-duration:72s!important;gap:28px!important}
.cx-gp{flex-basis:min(60vw,860px)!important}
.cx-gp .cap span{font-weight:900!important;font-size:clamp(20px,2.2vw,34px)!important;letter-spacing:.06em!important;text-shadow:0 2px 14px #000c!important}
.cx-gp .cap b{font-size:clamp(40px,4.4vw,68px)!important}
.cx-gp .cap small{font-size:12px!important;font-weight:700}
.cx-gp .d{font-size:16px!important;font-weight:700!important;line-height:1.95!important;color:#27302b!important}
.cx-gp .cx-partners li{font-weight:700}
@media(max-width:860px){.cx-gal-row{animation-duration:48s!important}.cx-gp{flex-basis:90vw!important}.cx-gp .d{font-size:14.5px!important}}

/* ---------- 会社情報：コンパクトに ---------- */
.cx-co-head{margin-bottom:28px!important}
.cx-co-head h2{margin:6px 0 10px!important}

/* ---------- お問い合わせ：背景がボーンと迫る ---------- */
.contact .cx-recbg>.records{transform:translateX(-50%) scale(.55)!important;filter:blur(8px);opacity:0;transition:transform 1.8s cubic-bezier(.16,.9,.25,1),filter 1.4s,opacity 1s}
.contact.zin .cx-recbg>.records{transform:translateX(-50%) scale(1.04)!important;filter:none;opacity:1}
.contact .cx-ct-no1{transition:transform 1.4s .35s cubic-bezier(.2,1.3,.3,1),opacity 1s .35s}
.contact:not(.zin) .cx-ct-no1{transform:scale(.3);opacity:0}

@media(prefers-reduced-motion:reduce){.op3{display:none!important}.cx-vstage .cx-tb-img{clip-path:none}.cx-tb-list li{opacity:1;transform:none}.contact .cx-recbg>.records{transform:translateX(-50%) scale(1.04)!important;filter:none;opacity:1}}

/* =========== PREVIEW 15 =========== */
/* オープニング：ChatGPTの3枚を全体が見えるように */
.op-sc.band{background:#05080c}
.op-sc.band:before{content:'';position:absolute;inset:-6%;background:var(--img) center/cover;filter:blur(26px) brightness(.5) saturate(1.2)}
.op-sc.band img{top:50%!important;left:0!important;width:100%!important;height:auto!important;translate:0 -50%;box-shadow:0 30px 90px #000c}
@media(max-aspect-ratio:1/1){.op-sc.band img{width:200%!important;left:-50%!important}}
.op-sc.hs img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 22%}
.op-sc.hs.on img{animation:opBoon .9s cubic-bezier(.16,1.3,.3,1) both}
@keyframes opBoon{0%{transform:scale(1.3);filter:brightness(2) blur(8px)}100%{transform:none;filter:none}}
.op-sc.band:after,.op-sc.hs:after{background:linear-gradient(0deg,#000a 0%,#0004 24%,#0000 50%)}
/* 扉・数字・粒子をやめて、白い紙に本物のロゴ */
.op-door,.op-seam,.op-light,.op-count,.op-fx{display:none!important}
.op-logo{position:absolute;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 46%,#fff 0%,#fffdf8 60%,#f4ecda 100%);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.op3.logo .op-logo{opacity:1;visibility:visible}
.op-logo-in{position:relative;width:min(44vw,460px)}
.op-logo-in img{display:block;width:100%;height:auto;opacity:0;filter:drop-shadow(0 20px 34px #8a5f1a33)}
.op3.logo .op-logo-in img{animation:opLogoIn 1.5s .2s cubic-bezier(.22,.8,.2,1) both}
@keyframes opLogoIn{0%{opacity:0;transform:translateY(16px) scale(.95);filter:blur(10px)}60%{opacity:1;filter:blur(0) drop-shadow(0 20px 34px #8a5f1a33)}100%{opacity:1;transform:none;filter:drop-shadow(0 20px 34px #8a5f1a33)}}
.op-sheen{position:absolute;inset:0;-webkit-mask:url('assets/crown-logo.png') center/100% 100% no-repeat;mask:url('assets/crown-logo.png') center/100% 100% no-repeat;background:linear-gradient(105deg,#0000 0,#fff9 42%,#fff 50%,#fff9 58%,#0000 100%) no-repeat;background-size:30% 100%;background-position:-60% 0}
.op3.logo .op-sheen{animation:opSheen 1.4s 1.1s ease-in-out both}
@keyframes opSheen{to{background-position:160% 0}}
.op-gl{position:absolute;width:26px;height:26px;background:radial-gradient(circle,#fff 0 22%,#fff3c9 48%,#e2b65c 72%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);opacity:0;filter:drop-shadow(0 0 6px #f6d892)}
.op-gl.g1{top:4%;left:58%}.op-gl.g2{top:30%;left:18%;width:18px;height:18px}.op-gl.g3{top:62%;left:82%;width:22px;height:22px}.op-gl.g4{top:84%;left:30%;width:16px;height:16px}
.op3.logo .op-gl{animation:opGlint 1.1s ease-in-out both}
.op3.logo .g1{animation-delay:1.5s}.op3.logo .g2{animation-delay:1.8s}.op3.logo .g3{animation-delay:2.05s}.op3.logo .g4{animation-delay:2.3s}
@keyframes opGlint{0%,100%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.2) rotate(45deg)}}
/* 大通公園（昼）で「札幌の頂点へ。」 */
.op3.open .op-gate{scale:1!important}
.op-stage img{transform:scale(1.12);filter:none}
.op3.open .op-stage img{transform:scale(1);transition:transform 4s cubic-bezier(.12,.85,.2,1)}
.op3.open .op-flash{animation:opFlash 1s ease-out}
.op-real{width:clamp(150px,20vh,240px);height:auto;filter:drop-shadow(0 0 30px #fff3d0aa) drop-shadow(0 8px 20px #000a)}

/* VALUE：写真（テレビ塔 11:11／札幌駅／ノルベサの観覧車） */
.values .cx-vrows .value-card:nth-child(1){--vbg:url('assets/val-tower2.jpg')!important}
.values .cx-vrows .value-card:nth-child(3){--vbg:url('assets/val-wheel2.jpg')!important}
.values .cx-acc .value-card:nth-child(1) .cx-v-ph{background-position:54% 62%!important}
.values .cx-acc .value-card:nth-child(3) .cx-v-ph{background-position:40% 50%!important}
.cx-tb-list span{font-family:'Cormorant Garamond',Georgia,serif!important;letter-spacing:.2em!important;font-weight:700!important}

/* 4つのサポート：黒帯なし・大きく・文字そろえ・速く */
.cx-gal-row{animation-duration:42s!important}
@media(max-width:860px){.cx-gal-row{animation-duration:30s!important}}
.cx-gp{flex-basis:min(64vw,900px)!important}
.cx-gp .ph{aspect-ratio:2.2/1!important;background:var(--img) center/cover no-repeat!important}
.cx-gp .ph:before{display:none!important}
.cx-gp .ph:after{background:var(--img) center/cover no-repeat!important}
.cx-gp .cap{padding:0 0 5.2% 5.4%!important;width:62%!important;background:linear-gradient(90deg,#000b 0%,#0006 55%,#0000 100%)!important}
.cx-gp .cap b{font:600 clamp(44px,5vw,80px)/1 'Cormorant Garamond',Georgia,serif!important;color:#fff}
.cx-gp .cap small{font:600 clamp(11px,1vw,15px)/1 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.34em!important;color:#fff;margin:12px 0 8px!important}
.cx-gp .cap span{font:700 clamp(20px,2.3vw,36px)/1.4 'Noto Serif JP','Yu Mincho',serif!important;letter-spacing:.06em!important;color:#fff}
.cx-gp .d{font-size:clamp(16px,1.25vw,19px)!important;line-height:2!important}
.cx-gp .cx-partners li{font-size:14px!important}
@media(max-width:860px){.cx-gp{flex-basis:92vw!important}}

/* 会社情報：金の社名と、きらびやかな独立開業 */
.company h2.cx-gold{font-size:clamp(46px,6.4vw,96px)!important;background-image:linear-gradient(100deg,#6e4410 0%,#7f5014 36%,#fff7d4 47%,#ffe9a6 53%,#7f5014 64%,#6e4410 100%)!important;background-size:260% 100%!important;filter:drop-shadow(0 2px 0 #fff1bc) drop-shadow(0 10px 20px #5a3a0a33)!important;animation:cxSweep 3.6s cubic-bezier(.5,0,.3,1) infinite!important}
.cx-launch{display:inline-flex!important;align-items:center;gap:18px;margin:18px auto 0!important;padding:14px 30px 14px 18px;border-radius:999px;background:linear-gradient(120deg,#6e4410,#c99a3e 30%,#fff1b4 50%,#c99a3e 70%,#6e4410);background-size:260% 100%;animation:cxSweep 4s cubic-bezier(.5,0,.3,1) infinite;box-shadow:0 16px 40px #8a5f1a55,inset 0 0 0 1px #fff6;position:relative}
.cx-l-crown img{width:44px;display:block;filter:drop-shadow(0 2px 4px #0005)}
.cx-l-date{font:600 clamp(28px,3vw,44px)/1 'Cormorant Garamond',Georgia,serif;color:#2a1c08;letter-spacing:.12em}
.cx-l-sep{width:1px;height:38px;background:#2a1c0866}
.cx-l-txt{font:900 clamp(22px,2.2vw,32px)/1.1 'Noto Serif JP','Yu Mincho',serif;color:#2a1c08;letter-spacing:.2em;text-align:left;padding:0!important;border:0!important}
.cx-l-txt small{display:block;font:700 10px/1 Georgia,serif;letter-spacing:.4em;color:#4a2f0c;margin-bottom:6px}
.company .company-launch span:last-child{border:0!important}
.values .cx-acc .value-card:nth-child(1) .cx-v-ph{background-position:50% 30%!important}
.company h2.cx-gold{background-image:linear-gradient(100deg,#5a3608 0%,#8a5a18 25%,#c99a3e 42%,#f3d58d 50%,#c99a3e 58%,#8a5a18 75%,#5a3608 100%)!important;filter:drop-shadow(0 6px 14px #5a3a0a40)!important}
.cx-launch{background:linear-gradient(120deg,#d9b569,#fff3c9 30%,#e2b65c 50%,#fff1b4 70%,#c99a3e)!important;background-size:260% 100%!important}
.cx-l-txt,.cx-l-date{color:#3a2506!important}
.op-real{width:clamp(200px,26vh,320px)!important}
.company h2.cx-gold{text-shadow:none!important}
/* =========== PREVIEW 16 =========== */
/* 札幌の街・売却も購入も：写真を全面に */
.op-sc.band:before{display:none}
.op-sc.band img{top:0!important;left:0!important;width:100%!important;height:100%!important;translate:none!important;object-fit:cover;object-position:50% 50%;box-shadow:none}
@media(max-aspect-ratio:1/1){.op-sc.band img{width:100%!important;left:0!important}}
.op-sc.hs img{object-position:50% 40%}
/* ライブ会場のCROWN */
.op-fx{display:block!important}
.op3.flash .op-flash{animation:opFlash .7s ease-out}
.op-live{position:absolute;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 120%,#1a1206 0%,#050403 55%,#000 100%);opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;overflow:hidden}
.op3.live .op-live{opacity:1;visibility:visible}
.lv-haze{position:absolute;inset:-10%;background:radial-gradient(ellipse at 30% 60%,#ffffff0d,#0000 45%),radial-gradient(ellipse at 70% 40%,#ffe7b00f,#0000 50%);animation:lvHaze 8s linear infinite alternate}
@keyframes lvHaze{to{transform:translateX(4%) scale(1.06)}}
.lv-beam{position:absolute;bottom:-6%;width:16vw;height:135vh;margin-left:-8vw;transform-origin:50% 100%;clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);background:linear-gradient(0deg,#fff6dccc 0%,#ffe2a066 30%,#ffd88a14 75%,#0000 100%);mix-blend-mode:screen;filter:blur(3px);opacity:0}
.lv-beam.l1{left:8%}.lv-beam.l2{left:20%}.lv-beam.l3{left:32%}.lv-beam.r1{left:68%}.lv-beam.r2{left:80%}.lv-beam.r3{left:92%}
.op3.live .lv-beam{animation:lvSweep 1.9s cubic-bezier(.4,0,.2,1) forwards}
.op3.live .lv-beam.l1{--a:-38deg;--b:24deg;animation-delay:.25s}.op3.live .lv-beam.r1{--a:38deg;--b:-24deg;animation-delay:.25s}
.op3.live .lv-beam.l2{--a:30deg;--b:16deg;animation-delay:.45s}.op3.live .lv-beam.r2{--a:-30deg;--b:-16deg;animation-delay:.45s}
.op3.live .lv-beam.l3{--a:-20deg;--b:8deg;animation-delay:.65s}.op3.live .lv-beam.r3{--a:20deg;--b:-8deg;animation-delay:.65s}
@keyframes lvSweep{0%{opacity:0;transform:rotate(var(--a))}25%{opacity:1}100%{opacity:1;transform:rotate(var(--b))}}
.op3.lvon .lv-beam{animation:lvSway 3s ease-in-out infinite alternate;opacity:1;transform:rotate(var(--b))}
@keyframes lvSway{from{transform:rotate(var(--b))}to{transform:rotate(calc(var(--b) * -.6))}}
.lv-top{position:absolute;left:50%;top:-20%;width:60vw;height:110vh;margin-left:-30vw;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(180deg,#fffaf0e6 0%,#ffe9b84d 45%,#0000 85%);mix-blend-mode:screen;filter:blur(6px);opacity:0}
.op3.lvon .lv-top{animation:lvTop 1s ease-out forwards}
@keyframes lvTop{0%{opacity:0}30%{opacity:1}100%{opacity:.75}}
.lv-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:radial-gradient(ellipse at 50% 100%,#ffd98a33,#0000 60%);opacity:0;transition:opacity 1s}
.op3.lvon .lv-floor{opacity:1}
.lv-logo{position:absolute;left:50%;top:44%;width:min(50vw,560px);translate:-50% -50%;opacity:0}
.lv-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 30px #ffcf7a66) drop-shadow(0 18px 40px #000)}
.op3.lvon .lv-logo{animation:lvLogo 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes lvLogo{0%{opacity:0;transform:scale(1.5);filter:brightness(3) blur(14px)}45%{opacity:1;filter:brightness(1.6) blur(0)}100%{opacity:1;transform:none;filter:none}}
.lv-sheen{position:absolute;inset:0;-webkit-mask:url('assets/crown-logo.png') center/100% 100% no-repeat;mask:url('assets/crown-logo.png') center/100% 100% no-repeat;background:linear-gradient(105deg,#0000 0,#fff8 42%,#fff 50%,#fff8 58%,#0000 100%) no-repeat;background-size:30% 100%;background-position:-60% 0}
.op3.lvon .lv-sheen{animation:lvSheen 1.4s 1.2s ease-in-out forwards}
@keyframes lvSheen{to{background-position:160% 0}}
.lv-sub{position:absolute;left:0;right:0;top:calc(44% + min(17vw,190px));text-align:center;margin:0;font:600 clamp(12px,1.3vw,16px)/1.9 'Cormorant Garamond',serif;letter-spacing:.5em;color:#f3d58d;opacity:0}
.lv-sub span{display:block;font-size:.8em;letter-spacing:.42em;color:#fff6dcb3}
.op3.lvon .lv-sub{animation:lvSub 1s 1.1s ease-out forwards}
@keyframes lvSub{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 札幌の頂点へ：昼 → 夜 */
.op-stage{position:absolute;inset:0}
.op-stage img{position:absolute;inset:0}
.op-stage .op-night{opacity:0;transition:opacity 1.6s ease}
.op3.night .op-stage .op-night{opacity:1}
.op3.open .op-stage .op-night{transform:scale(1.04)}
.op-sc.band img{width:auto!important;height:100%!important;max-width:none!important;object-fit:fill;left:0!important;top:0!important}
@media(max-aspect-ratio:1/1){.op-sc.band img{width:auto!important}}
/* サポート：4枚とも同じ字体・太さ・大きさ（太く大きく） */
.cx-gp .ph .cap{position:absolute!important;left:0!important;bottom:0!important;top:auto!important;width:70%!important;padding:0 0 5% 5.4%!important;background:linear-gradient(90deg,#000c 0%,#0007 55%,#0000 100%)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important}
.cx-gp .ph .cap b{display:block!important;font:700 clamp(56px,6.4vw,104px)/1 'Cormorant Garamond',Georgia,serif!important;color:#fff!important;letter-spacing:.02em!important;margin:0!important}
.cx-gp .ph .cap small{display:block!important;font:700 clamp(13px,1.2vw,18px)/1 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.34em!important;color:#fff!important;margin:14px 0 10px!important}
.cx-gp .ph .cap span{display:block!important;font:900 clamp(26px,2.9vw,46px)/1.35 'Noto Serif JP','Yu Mincho',serif!important;letter-spacing:.05em!important;color:#fff!important;text-shadow:0 2px 16px #000c!important}
.op3.flash .op-flash{animation:lvFlash .8s ease-out}
@keyframes lvFlash{0%{opacity:0}15%{opacity:.55}100%{opacity:0}}
.op3.lvon .lv-top{animation:lvTop 1s ease-out forwards}
@keyframes lvTop{0%{opacity:0}30%{opacity:.8}100%{opacity:.45}}
.lv-beam{background:linear-gradient(0deg,#fff6dcaa 0%,#ffe2a04d 30%,#ffd88a10 75%,#0000 100%)}
/* =========== PREVIEW 17 =========== */
/* 1・2枚目：スライドせず、固定の写真を引きで */
.op-sc.band img{width:100%!important;height:100%!important;object-fit:cover!important;transform-origin:50% 50%}
.op-sc.band.b1 img{object-position:24% 50%}
.op-sc.band.b2 img{object-position:4% 50%}
/* CROWN：ビジネスライクな登場 */
.op-live{display:none!important}
.op-brand{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#1a1d22 0%,#0d0f12 55%,#07080a 100%);opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.op3.brand .op-brand{opacity:1;visibility:visible}
.ob-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.ob-logo{position:relative;width:min(34vw,380px);opacity:0}
.ob-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 30px #000c)}
.op3.brand .ob-logo{animation:obLogo 1.6s .5s cubic-bezier(.22,.8,.2,1) forwards}
@keyframes obLogo{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ob-sheen{position:absolute;inset:0;-webkit-mask:url('assets/crown-logo.png') center/100% 100% no-repeat;mask:url('assets/crown-logo.png') center/100% 100% no-repeat;background:linear-gradient(105deg,#0000 0,#fff6 44%,#fffd 50%,#fff6 56%,#0000 100%) no-repeat;background-size:28% 100%;background-position:-60% 0}
.op3.brand .ob-sheen{animation:obSheen 1.6s 1.9s ease-in-out forwards}
@keyframes obSheen{to{background-position:160% 0}}
.ob-line{display:block;width:min(46vw,520px);height:1px;margin:34px 0 22px;background:linear-gradient(90deg,#0000,#c9a35a 20%,#f3d58d 50%,#c9a35a 80%,#0000);transform:scaleX(0)}
.op3.brand .ob-line{animation:obLine 1.2s 1.3s cubic-bezier(.6,0,.2,1) forwards}
@keyframes obLine{to{transform:scaleX(1)}}
.ob-sub,.ob-date{margin:0;font:600 clamp(11px,1.05vw,14px)/1.8 'Cormorant Garamond',Georgia,serif;letter-spacing:.5em;color:#e9d3a2;opacity:0;padding-left:.5em}
.ob-date{color:#ffffff8c;letter-spacing:.42em;margin-top:6px}
.op3.brand .ob-sub{animation:obTxt 1s 1.9s ease-out forwards}
.op3.brand .ob-date{animation:obTxt 1s 2.2s ease-out forwards}
@keyframes obTxt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* トップ画面（昼の大通・テレビ塔）へ飛び込む */
.op3.fly{transition:opacity .9s .25s ease!important}
.op3.fly .ob-in{transform:scale(1.9);opacity:0;filter:blur(6px);transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .8s .2s,filter .8s .2s}
/* サポート：カードをひと回り大きく */
.cx-gp{flex-basis:min(76vw,1080px)!important}
@media(max-width:860px){.cx-gp{flex-basis:94vw!important}}
/* =========== PREVIEW 18 =========== */
/* 1・2枚目：ChatGPTの写真を1枚まるごと（16:9に仕立て直し）・固定で */
.op-sc.band.b1 img,.op-sc.band.b2 img{object-position:50% 50%!important}
@media(max-aspect-ratio:1/1){.op-sc.band.b1 img{object-position:30% 50%!important}.op-sc.band.b2 img{object-position:40% 50%!important}}
/* CROWN：夜の札幌を背に、光の線 → ロゴ */
.op-brand{background:#07090c!important}
.ob-bg{position:absolute;inset:0;overflow:hidden}
.ob-bg img{width:100%;height:100%;object-fit:cover;opacity:.0;filter:blur(10px) brightness(.45) saturate(1.1);transform:scale(1.12)}
.op3.brand .ob-bg img{animation:obBg 4.6s ease-out forwards}
@keyframes obBg{to{opacity:.55;transform:scale(1.02)}}
.ob-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#0000 0%,#05070acc 62%,#05070a 100%)}
.ob-streak{position:absolute;left:0;right:0;top:46%;height:2px;margin-top:-1px;background:linear-gradient(90deg,#0000 0%,#f3d58d 45%,#fff 50%,#f3d58d 55%,#0000 100%);background-size:40% 100%;background-repeat:no-repeat;background-position:-50% 0;filter:drop-shadow(0 0 8px #f3d58d);opacity:0}
.op3.brand .ob-streak{animation:obStreak 1.3s .25s cubic-bezier(.6,0,.3,1) forwards}
@keyframes obStreak{0%{opacity:1;background-position:-50% 0}85%{opacity:1}100%{opacity:0;background-position:150% 0}}
.ob-logo{clip-path:inset(50% 0 50% 0);animation:none!important}
.op3.brand .ob-logo{animation:obReveal 1.3s 1.05s cubic-bezier(.7,0,.2,1) forwards!important}
@keyframes obReveal{to{clip-path:inset(-20% -20% -20% -20%)}}
.ob-logo img{position:relative;z-index:1}
.ob-bloom{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#f3d58d55 0%,#c9a35a22 35%,#0000 65%);opacity:0;z-index:0}
.op3.brand .ob-bloom{animation:obBloom 2.4s 1.2s ease-out forwards}
@keyframes obBloom{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:.55;transform:scale(1)}}
.ob-sheen{z-index:2}
.op3.brand .ob-sheen{animation:obSheen 1.5s 2.4s ease-in-out forwards!important}
.op3.brand .ob-line{animation:obLine 1.1s 2.1s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt 1s 2.5s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt 1s 2.8s ease-out forwards!important}
/* 着地：夜が円く開いて昼の大通へ、ロゴは右上のロゴの位置へ */
@property --hole{syntax:'<length>';inherits:false;initial-value:0px}
.op3.land{background:transparent!important}
.op3.land .op-brand{background:transparent!important}
.op3.land .ob-bg{-webkit-mask:radial-gradient(circle at 50% 46%,#0000 var(--hole),#000 calc(var(--hole) + 80px));mask:radial-gradient(circle at 50% 46%,#0000 var(--hole),#000 calc(var(--hole) + 80px));animation:obHole 1.3s cubic-bezier(.65,0,.25,1) forwards}
@keyframes obHole{to{--hole:150vmax}}
.op3.land .ob-line,.op3.land .ob-sub,.op3.land .ob-date,.op3.land .ob-bloom,.op3.land .ob-streak{opacity:0!important;transition:opacity .4s;animation:none!important}
.op3.land .op-fx,.op3.land .op-vig,.op3.land .op-sc,.op3.land .op-q,.op3.land .op-words{opacity:0!important;transition:opacity .5s}
.op3.land .ob-logo{clip-path:none!important}
body.cx-landed .hero .hx-logo{animation:none!important;opacity:0}

@keyframes obReveal{to{clip-path:inset(-60% -60% -60% -60%)}}
.ob-bloom{width:150%;background:radial-gradient(circle,#f3d58d4d 0%,#c9a35a1f 32%,#0000 62%)}
/* =========== PREVIEW 19 =========== */
/* 1・2枚目：黒い部分をなくし、全面写真 */
.op-sc.band:after{background:linear-gradient(0deg,#0005 0%,#0000 40%)!important}
.op3 .op-vig{opacity:.35}
.op-w b{text-shadow:0 2px 6px #000a,0 6px 40px #000c!important}
.op-w small{text-shadow:0 1px 8px #000c}
/* CROWN：大きく、ボーンと */
.ob-logo{width:min(56vw,640px)!important}
.op3.brand .ob-logo{clip-path:none!important;animation:obBoom 1.4s 1.1s cubic-bezier(.12,.9,.2,1) both!important}
@keyframes obBoom{0%{opacity:0;transform:scale(1.9);filter:brightness(3.2) blur(14px)}18%{opacity:1;filter:brightness(2.2) blur(0)}45%{transform:scale(.97);filter:brightness(1.3)}70%{transform:scale(1.01)}100%{opacity:1;transform:none;filter:none}}
.op3.land .ob-logo{opacity:1!important;animation:none!important;filter:none!important}
.op3.shake .op-brand{animation:obShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes obShake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}
.op3.flash .op-flash{animation:obFlash .8s ease-out!important;background:radial-gradient(circle at 50% 44%,#fff 0%,#fff3d0 30%,#f3d58d55 60%,#0000 80%)!important}
@keyframes obFlash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.op3.brand .ob-bloom{animation:obBloom 2.4s 1.15s ease-out forwards!important}
.op3.brand .ob-line{animation:obLine 1.1s 1.9s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt 1s 2.2s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt 1s 2.5s ease-out forwards!important}
.op3.brand .ob-sheen{animation:obSheen 1.4s 2.3s ease-in-out forwards!important}
.ob-sub{font-size:clamp(12px,1.25vw,17px)!important}
/* 札幌の頂点へ。：1行で、1文字ずつボンボンと */
.hero .hero-declaration.hd{display:block!important;white-space:nowrap!important;font-size:clamp(44px,8.2vw,150px)!important;line-height:1.15!important;letter-spacing:.04em!important;margin:12px 0 26px!important;filter:drop-shadow(0 6px 26px #0009);animation:none!important;opacity:1!important;transform:none!important}
.hero .hd-c{display:inline-block;color:#fff6dc;font-family:'Noto Serif JP','Yu Mincho',serif;font-weight:900;opacity:0;transform:scale(2.4);filter:blur(10px)}
.hero .hd-c.g{-webkit-text-fill-color:transparent;background:linear-gradient(115deg,#fffbe8 4%,#fff1b4 24%,#d3a544 42%,#fff9dd 56%,#e9c269 72%,#fff5c7 95%);-webkit-background-clip:text;background-clip:text}
.hero .hd-go .hd-c{animation:hdPop .62s calc(var(--k) * .14s) cubic-bezier(.2,1.6,.35,1) forwards}
@keyframes hdPop{0%{opacity:0;transform:scale(2.4);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
/* 大切な人にできる仕事を、すべての人に。：大きく */
.hero h1{font-size:clamp(24px,3.2vw,52px)!important;line-height:1.5!important;letter-spacing:.06em!important}
@media(max-width:760px){.hero h1{font-size:clamp(22px,6.2vw,34px)!important}}
@media(prefers-reduced-motion:reduce){.hero .hd-c{opacity:1;transform:none;filter:none}}
/* =========== PREVIEW 20：大人の、高級感のあるCROWN =========== */
.op-sc.band img{width:100%!important;height:100%!important;object-fit:cover!important}
.op-sc.band.b1 img{object-position:24% 50%!important}
.op-sc.band.b2 img{object-position:4% 50%!important}
.op3.brand .op-fx,.op3.brand .ob-streak{display:none!important}
.op3.brand .ob-logo{animation:obLux 3s .6s cubic-bezier(.25,.1,.25,1) both!important}
@keyframes obLux{0%{opacity:0;transform:scale(1.06);filter:brightness(.15) blur(5px)}55%{opacity:1;filter:brightness(.85) blur(0)}100%{opacity:1;transform:none;filter:brightness(1)}}
.op3.brand .ob-bloom{animation:obGlow 4s .9s ease-out both!important}
@keyframes obGlow{0%{opacity:0;transform:scale(.85)}100%{opacity:.6;transform:none}}
.ob-bloom{background:radial-gradient(circle,#e9c98a33 0%,#c9a35a14 38%,#0000 64%)!important}
.ob-sheen{background:linear-gradient(105deg,#0000 0,#fff3 44%,#fff9 50%,#fff3 56%,#0000 100%) no-repeat!important;background-size:24% 100%!important;background-position:-60% 0!important}
.op3.brand .ob-sheen{animation:obSheen 2.4s 3.1s cubic-bezier(.45,0,.25,1) forwards!important}
.op3.brand .ob-line{animation:obLine 1.6s 2.6s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt 1.4s 3.2s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt 1.4s 3.6s ease-out forwards!important}
.ob-line{margin:30px 0 20px!important;width:min(40vw,460px)!important}
.op3.brand .ob-bg img{animation:obBg 6s ease-out forwards!important}
/* トップ画面へ：静かに溶けるように */
.op3.land{opacity:0!important;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)!important;background:#07090c!important}
.op3.land .op-brand{background:#07090c!important}
.op3.land .ob-bg{-webkit-mask:none!important;mask:none!important;animation:none!important}
.op3.land .ob-in{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.op3.land .ob-line,.op3.land .ob-sub,.op3.land .ob-date{opacity:1!important}
body.cx-landed .hero .hx-logo{opacity:0;animation:hxSoft 1.8s .9s ease both!important}
body.cx-landed-on .hero .hx-logo{opacity:1}
@keyframes hxSoft{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 札幌の頂点へ。：上品にゆっくり */
.hero .hd-go .hd-c{animation:hdLux 1.4s calc(var(--k) * .09s) cubic-bezier(.25,.1,.25,1) forwards!important}
@keyframes hdLux{0%{opacity:0;transform:translateY(14px);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
.hero .hd-c{transform:translateY(14px)}
.hero .hx-star{display:none!important}

/* オープニング1・2枚目：文字入りの写真を背景いっぱいに */
.op3 .op-sc.band.full img{object-position:50% 50%!important}
.op3 .op-sc.band.full:after{background:radial-gradient(ellipse at 50% 50%,#0000 60%,#0005 100%)!important}
@media(max-aspect-ratio:4/3){
 .op3 .op-sc.band.full:before{display:block!important;content:'';position:absolute;inset:-6%;background:var(--img) center/cover;filter:blur(22px) brightness(.55) saturate(1.2)}
 .op3 .op-sc.band.full img{object-fit:contain!important;width:150%!important;left:-25%!important}
}
/* =========== PREVIEW 21 =========== */
/* 2枚目：札幌駅・ステラプレイスの夜景 */
.op3 .op-sc.band.b2 img{object-position:4% 50%!important}
/* CROWN：白に金（静かな映画のような登場はそのまま） */
.op3 .op-brand,.op3.land .op-brand{background:radial-gradient(ellipse at 50% 44%,#ffffff 0%,#fdfaf3 55%,#f3ead6 100%)!important}
.op3.brand{background:#fdfaf3!important}
.op3.land{background:#fdfaf3!important}
.op3 .ob-bg{display:none!important}
.op3 .ob-logo img{filter:drop-shadow(0 18px 30px #8a5f1a40)!important}
.op3 .ob-bloom{background:radial-gradient(circle,#f3d58d40 0%,#e9c98a1a 38%,#fff0 64%)!important}
.op3 .ob-line{background:linear-gradient(90deg,#0000,#b8862f 20%,#d9b25e 50%,#b8862f 80%,#0000)!important}
.op3 .ob-sub{color:#8a5f1a!important}
.op3 .ob-date{color:#a07a3c!important}
.op3.brand .op-vig{opacity:0!important}
@keyframes obLux{0%{opacity:0;transform:scale(1.06);filter:blur(6px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
/* VALUES：開いたカードの英語を大きく */
.values .cx-acc .value-card.act .value-en{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:700!important;font-size:clamp(30px,3.4vw,58px)!important;letter-spacing:.14em!important;line-height:1.05!important;color:#f3d58d!important;margin:6px 0 14px!important;text-shadow:0 2px 18px #000a}
/* 会社概要：CROWNを品のある欧文書体に */
.company h2.cx-gold .cx-co-en{font-family:'Cormorant Garamond','Times New Roman',serif;font-weight:700;letter-spacing:.16em;font-size:1.12em;margin-left:.2em}
/* =========== PREVIEW 22 =========== */
/* 1枚目：大通公園の春夏秋冬 */
.op3 .op-sc.sea img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;left:0!important;top:0!important}
.op3 .op-sc.sea:after{background:linear-gradient(0deg,#000a 0%,#0004 30%,#0000 55%)!important}
/* 2枚目：札幌といえば（ステラプレイス・ノルベサ・大倉山・時計台）をテンポよく */
.op3 .op-sc.mont{background:#000}
.op3 .op-sc.mont img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08)}
.op3 .op-sc.mont img.cut{opacity:1;animation:mCut 1.2s cubic-bezier(.2,.7,.2,1) forwards;z-index:1}
@keyframes mCut{from{transform:scale(1.1)}to{transform:scale(1.02)}}
.op3 .op-sc.mont:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,#000a 0%,#0004 30%,#0000 55%)}
/* 握手：扉ではなく、静かに寄っていく映画的な入り */
.op3 .op-sc.hs.on img{animation:hsCine 3.4s cubic-bezier(.2,.6,.2,1) both!important}
@keyframes hsCine{0%{transform:scale(1.14);filter:brightness(.55) saturate(.9)}35%{filter:brightness(1) saturate(1)}100%{transform:scale(1.02);filter:none}}
/* CROWN：黒に金を採用・丸い光はなし */
.op3 .op-brand,.op3.land .op-brand{background:#07090c!important}
.op3.brand,.op3.land{background:#07090c!important}
.op3 .ob-bg{display:block!important}
.op3 .ob-bloom{display:none!important}
.op3 .ob-logo img{filter:drop-shadow(0 14px 30px #000c)!important}
.op3 .ob-line{background:linear-gradient(90deg,#0000,#c9a35a 20%,#f3d58d 50%,#c9a35a 80%,#0000)!important}
.op3 .ob-sub{color:#e9d3a2!important}
.op3 .ob-date{color:#ffffff8c!important}
/* ロゴは下から上へ、すっと現れる（ビジネスライクに） */
.op3.brand .ob-logo{animation:obRise 1.8s .5s cubic-bezier(.7,0,.2,1) both!important}
@keyframes obRise{0%{opacity:1;clip-path:inset(100% 0 0 0);transform:translateY(24px)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
/* 札幌の頂点へ。：ドン、ドン、ドンと1文字ずつ */
.hero .hd-go .hd-c{animation:hdDon .42s calc(var(--k) * .2s) cubic-bezier(.2,.9,.25,1) forwards!important}
@keyframes hdDon{0%{opacity:0;transform:scale(1.9)}60%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:none}}
.hero .hd-c{transform:scale(1.9)}
/* 4つのサポート：説明文を横幅いっぱい・太く */
.cx-gp .cp{display:block!important;max-width:none!important}
.cx-gp .cp .d{max-width:none!important;width:100%!important;font-weight:700!important;font-size:clamp(16px,1.3vw,20px)!important;line-height:1.85!important}
/* =========== PREVIEW 23 =========== */
.op3 .op-sc.b1 img{object-position:50% 62%!important}
.op3 .op-sc.b2 img{object-position:40% 50%!important}
/* CROWN：もっと金色に */
.op3 .ob-logo img{filter:brightness(1.28) saturate(1.35) contrast(1.06) drop-shadow(0 0 22px #f3d58d55) drop-shadow(0 14px 30px #000c)!important}
/* 札幌の頂点へ。：上から降りて、ドンと着地 → 「札幌」に金の光 */
.hero .hd-go .hd-c{animation:hdLand .55s calc(var(--k) * .16s) cubic-bezier(.2,.9,.25,1.15) forwards!important}
@keyframes hdLand{0%{opacity:0;transform:translateY(-60px) scale(1.35)}60%{opacity:1;transform:translateY(4px) scale(.98)}100%{opacity:1;transform:none}}
.hero .hd-c{transform:translateY(-60px) scale(1.35)}
.hero .hd-go .hd-c.g{background-size:250% 100%!important;animation:hdLand .55s calc(var(--k) * .16s) cubic-bezier(.2,.9,.25,1.15) forwards,hdShine 1.6s 1.4s ease-in-out forwards!important}
@keyframes hdShine{from{background-position:100% 0}to{background-position:0 0}}
.hero .hero-declaration.hd{position:relative}
.hero .hero-declaration.hd:after{content:'';position:absolute;left:0;bottom:-10px;height:2px;width:min(100%,9em);background:linear-gradient(90deg,#f3d58d,#c9a35a 60%,#0000);transform:scaleX(0);transform-origin:left}
.hero .hero-declaration.hd-go:after{animation:hdRule 1s 1.25s cubic-bezier(.6,0,.2,1) forwards}
@keyframes hdRule{to{transform:scaleX(1)}}
/* 大切な人にできる仕事を、すべての人に。：1行ずつ光と一緒に現れる */
.hero h1 .h1l{display:block;clip-path:inset(0 100% 0 0);opacity:.2}
.hero:has(.hd-go) h1 .h1l{animation:h1Wipe 1.1s cubic-bezier(.6,0,.2,1) forwards}
.hero:has(.hd-go) h1 .h1l:nth-child(1){animation-delay:1.7s}
.hero:has(.hd-go) h1 .h1l:nth-child(2){animation-delay:2.1s;color:#f6e3b0}
@keyframes h1Wipe{0%{clip-path:inset(0 100% 0 0);opacity:.2}100%{clip-path:inset(0 0 0 0);opacity:1}}
/* VALUES：握手写真 — 扉ではなく、映画のスクリーンのように上下から開く */
.cx-vstage .cx-tb-img{clip-path:inset(46% 0 46% 0)!important;filter:brightness(.35) saturate(.8);transition:clip-path 1.5s cubic-bezier(.7,0,.2,1),filter 1.8s .6s ease!important}
.cx-tb.tb-in .cx-tb-img{clip-path:inset(0 0 0 0)!important;filter:none}
/* =========== PREVIEW 24 =========== */
/* 1・2枚目：ChatGPTで作った写真（文字入り）をそのまま全面に */
.op3 .op-sc.b1 img,.op3 .op-sc.b2 img{object-position:50% 50%!important}
.op3 .op-sc.sea:after{background:radial-gradient(ellipse at 50% 50%,#0000 65%,#0004 100%)!important}
/* CROWN（黒）：光らせすぎず、本物の金属の金に */
.op3 .ob-logo img{filter:brightness(1.06) saturate(1.12) contrast(1.04) drop-shadow(0 18px 34px #000)!important}
.op3 .ob-sheen{background:linear-gradient(105deg,#0000 0,#fff0 40%,#fff5 50%,#fff0 60%,#0000 100%) no-repeat!important;background-size:22% 100%!important}
.op3 .ob-bg img{opacity:.35!important}
/* トップ画面のフィナーレ：札幌の頂点へ。→ 大切な人に… → CROWNのロゴ */
.hero .hd-go .hd-c{animation:hdSlam .5s calc(var(--k) * .15s) cubic-bezier(.16,1,.3,1) forwards!important}
@keyframes hdSlam{0%{opacity:0;transform:scale(3.2);filter:blur(14px)}45%{opacity:1;filter:blur(0)}70%{transform:scale(.94)}100%{opacity:1;transform:none;filter:none}}
.hero .hd-c{transform:scale(3.2)}
.hero .hd-go .hd-c.g{animation:hdSlam .5s calc(var(--k) * .15s) cubic-bezier(.16,1,.3,1) forwards,hdShine 1.4s 1.3s ease-in-out forwards!important}
.hero .hero-declaration.hd:before{content:'';position:absolute;inset:-10% -5%;background:linear-gradient(100deg,#0000 40%,#fff6dc99 50%,#0000 60%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:overlay;pointer-events:none;opacity:0}
.hero .hero-declaration.hd-go:before{animation:hdFlare 1.2s 1.15s cubic-bezier(.5,0,.3,1) forwards}
@keyframes hdFlare{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}
.hero:has(.hd-go) h1 .h1l:nth-child(1){animation-delay:1.6s!important}
.hero:has(.hd-go) h1 .h1l:nth-child(2){animation-delay:2s!important}
/* 最後にCROWNのロゴが、重みをもって着地 */
body.cx-landed .hero .hx-logo{opacity:0;animation:hxImpact 1.3s 3.4s cubic-bezier(.16,1,.3,1) both!important}
@keyframes hxImpact{0%{opacity:0;transform:scale(2.4) translateY(-20px);filter:blur(16px) brightness(1.6)}50%{opacity:1;filter:blur(0) brightness(1.15)}75%{transform:scale(.97)}100%{opacity:1;transform:none;filter:none}}
body.cx-landed-on .hero .hx-logo{opacity:initial}
body.cx-landed .hero .hx-img{position:relative;overflow:hidden}
body.cx-landed .hero .hx-img:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,#0000 35%,#fff8 50%,#0000 65%);background-size:250% 100%;background-position:130% 0;-webkit-mask:url('assets/crown-logo.png') center/contain no-repeat;mask:url('assets/crown-logo.png') center/contain no-repeat;animation:hxSheen 1.4s 4.4s ease-in-out forwards}
@keyframes hxSheen{to{background-position:-30% 0}}
/* =========== PREVIEW 25 =========== */
/* 画面の切り替えを、ひと呼吸早く */
.op3 .op-sc{transition:opacity .55s ease!important}
/* CROWN：金の2本線が上下に開いて“額縁”をつくり、光のラインが上へ走ってロゴが現れる */
.ob-fr{position:absolute;left:50%;width:min(62vw,760px);height:1px;margin-left:calc(min(62vw,760px) / -2);background:linear-gradient(90deg,#0000,#c9a35a 18%,#f3d58d 50%,#c9a35a 82%,#0000);transform:scaleX(0);top:50%;z-index:3;opacity:.9}
.op3.brand .ob-fr{animation:obFrame 1.3s .15s cubic-bezier(.7,0,.2,1) forwards}
.op3.brand .ob-fr.t{--y:-34vh}.op3.brand .ob-fr.b{--y:30vh}
@keyframes obFrame{0%{transform:translateY(0) scaleX(0)}45%{transform:translateY(0) scaleX(1)}100%{transform:translateY(var(--y)) scaleX(1)}}
.ob-scan{position:absolute;left:0;right:0;top:50%;height:2px;z-index:4;background:linear-gradient(90deg,#0000,#fff3d0 30%,#fff 50%,#fff3d0 70%,#0000);box-shadow:0 0 18px 4px #f3d58d55;opacity:0}
.op3.brand .ob-scan{animation:obScan 1.1s 1.2s cubic-bezier(.6,0,.3,1) forwards}
@keyframes obScan{0%{opacity:0;transform:translateY(22vh)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(-30vh)}}
.op3.brand .ob-logo{animation:obUnveil 1.1s 1.2s cubic-bezier(.6,0,.3,1) both!important}
@keyframes obUnveil{0%{opacity:1;clip-path:inset(100% -10% -10% -10%)}100%{opacity:1;clip-path:inset(-10% -10% -10% -10%)}}
.op3.brand .ob-line{animation:obLine 1s 2.2s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt .9s 2.5s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .9s 2.75s ease-out forwards!important}
.op3.brand .ob-sheen{animation:obSheen 1.3s 2.9s cubic-bezier(.45,0,.25,1) forwards!important}
.op3.land .ob-fr{opacity:0;transition:opacity .5s}
/* 札幌の頂点へ。：ビジネスライクに、行ごとに下からスッと（文字は大きく、動きは端正に） */
.hero .hero-declaration.hd{overflow:hidden;padding-bottom:.08em}
.hero .hd-c{transform:translateY(105%);opacity:1!important;filter:none!important}
.hero .hd-go .hd-c{animation:hdUp .9s calc(var(--k) * .045s) cubic-bezier(.7,0,.2,1) forwards!important}
.hero .hd-go .hd-c.g{animation:hdUp .9s calc(var(--k) * .045s) cubic-bezier(.7,0,.2,1) forwards,hdShine 1.4s 1s ease-in-out forwards!important}
@keyframes hdUp{from{transform:translateY(105%)}to{transform:none}}
.hero .hero-declaration.hd:before{display:none!important}
.hero .hero-declaration.hd-go:after{animation:hdRule .9s .85s cubic-bezier(.6,0,.2,1) forwards!important}
.hero:has(.hd-go) h1 .h1l{animation:h1Up .8s cubic-bezier(.7,0,.2,1) forwards!important;clip-path:inset(0 0 0 0)!important;opacity:0}
.hero:has(.hd-go) h1 .h1l:nth-child(1){animation-delay:1.05s!important}
.hero:has(.hd-go) h1 .h1l:nth-child(2){animation-delay:1.25s!important}
@keyframes h1Up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* トップ右上のロゴ：大きく、はっきり見えるように（サポートのロゴと同じ存在感） */
.hero .hx-logo{width:min(470px,31vw)!important;right:3%!important;top:8%!important}
.hero .hx-logo:before{content:'';position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1.4;translate:-50% -50%;background:radial-gradient(ellipse,#0d1a1f99 0%,#0d1a1f44 40%,#0000 70%);z-index:-1}
.hero .hx-img img{filter:drop-shadow(0 0 34px #fff2c8cc) drop-shadow(0 10px 24px #000a)!important}
.hero .hx-cap{font-size:15px!important;letter-spacing:.42em!important;text-shadow:0 2px 10px #000c}
body.cx-landed .hero .hx-logo{animation:hxPon 1s 2.1s cubic-bezier(.2,1.25,.35,1) both!important}
@keyframes hxPon{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
body.cx-landed .hero .hx-img:after{animation:hxSheen 1.3s 3s ease-in-out forwards!important}
/* =========== PREVIEW 26 =========== */
.op3 .op-sc{transition:opacity .45s ease!important}
/* CROWN：白に金。中心から光が広がるようにロゴが現れる（上下に動く線はなし） */
.op3 .op-brand,.op3.land .op-brand{background:radial-gradient(ellipse at 50% 46%,#ffffff 0%,#fbf7ee 55%,#efe4cc 100%)!important}
.op3.brand,.op3.land{background:#fbf7ee!important}
.op3 .ob-bg,.op3 .ob-fr,.op3 .ob-scan,.op3 .ob-streak,.op3 .ob-bloom{display:none!important}
.op3 .ob-logo img{filter:drop-shadow(0 16px 26px #8a5f1a38)!important}
.op3.brand .ob-logo{animation:obIris 1.5s .25s cubic-bezier(.55,0,.15,1) both!important}
@keyframes obIris{0%{opacity:1;clip-path:circle(0% at 50% 45%);transform:scale(1.06)}100%{opacity:1;clip-path:circle(80% at 50% 45%);transform:none}}
.op3 .ob-sheen{background:linear-gradient(105deg,#0000 0,#fff0 40%,#fffb 50%,#fff0 60%,#0000 100%) no-repeat!important;background-size:24% 100%!important}
.op3.brand .ob-sheen{animation:obSheen 1.3s 1.6s cubic-bezier(.45,0,.25,1) forwards!important}
.op3 .ob-line{background:linear-gradient(90deg,#0000,#b8862f 20%,#d9b25e 50%,#b8862f 80%,#0000)!important}
.op3.brand .ob-line{animation:obLine .9s 1.4s cubic-bezier(.6,0,.2,1) forwards!important}
.op3 .ob-sub{color:#8a5f1a!important}.op3 .ob-date{color:#a07a3c!important}
.op3.brand .ob-sub{animation:obTxt .8s 1.7s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 1.9s ease-out forwards!important}
.op3.brand .op-vig{opacity:0!important}
/* MISSION／VISION／VALUES：大見出しがボーンと */
.mvv-section .editorial-heading:not(.visible)>*{opacity:0}
.mvv-section .editorial-heading.visible>span{animation:mvvBoom .9s cubic-bezier(.18,1.4,.35,1) both!important}
.mvv-section .editorial-heading.visible>strong{animation:mvvBoom 1.1s .18s cubic-bezier(.18,1.4,.35,1) both,cxGold 6s 1.4s linear infinite!important}
@keyframes mvvBoom{0%{opacity:0;transform:scale(.25);filter:blur(10px)}55%{opacity:1;filter:blur(0)}75%{transform:scale(1.06)}100%{opacity:1;transform:none;filter:none}}
/* VALUES：握手写真をポップアップで（金のフチでアクセント） */
.cx-vstage .cx-tb-img{clip-path:none!important;filter:none!important;opacity:0;transform:scale(.78) translateY(40px);border-radius:18px;box-shadow:0 0 0 2px #e2b65c,0 30px 80px #0006;transition:transform 1s cubic-bezier(.18,1.35,.35,1),opacity .5s,border-radius 1s .6s!important}
.cx-tb.tb-in .cx-tb-img{opacity:1;transform:none;border-radius:0}
/* PARTNERSHIP／HOSPITALITY／PERSONAL BRAND：大きな白文字でボーンと */
.cx-tb-list{gap:14px!important}
.cx-tb-list button{background:#0c1a16cc!important;border:1px solid #f3d58d!important;padding:14px 28px 14px 18px!important}
.cx-tb-list button b{font:700 clamp(22px,2.4vw,34px)/1 'Cormorant Garamond',Georgia,serif!important;color:#f3d58d!important}
.cx-tb-list button span{font:700 clamp(22px,2.6vw,40px)/1.1 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.14em!important;color:#fff!important}
.cx-tb-list li{transform:scale(.5)!important;transform-origin:left center;transition:opacity .4s,transform .7s cubic-bezier(.18,1.5,.35,1)!important}
.cx-tb.tb-in .cx-tb-list li{transform:none!important}
.cx-tb.tb-in .cx-tb-list li:nth-child(1){transition-delay:.9s!important}.cx-tb.tb-in .cx-tb-list li:nth-child(2){transition-delay:1.1s!important}.cx-tb.tb-in .cx-tb-list li:nth-child(3){transition-delay:1.3s!important}
/* 01〜03のカード：新しい文章が切れずに全部読めるように */
.values .cx-acc .value-card.act .cx-v-tx p:not(.value-en){max-height:640px!important}
/* 4つのサポート：ひとテンポ早く */
.cx-gal-row{animation-duration:30s!important}
@media(max-width:860px){.cx-gal-row{animation-duration:22s!important}}
/* 情熱の炎マーク（代表挨拶） */
.cx-flame{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px}
.cx-flame svg{width:30px;height:42px;filter:drop-shadow(0 0 10px #f3d58d88);transform-origin:50% 100%;animation:flame 2.2s ease-in-out infinite}
.cx-flame small{font:700 12px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.42em;color:#b8862f}
@keyframes flame{0%,100%{transform:scale(1,1) rotate(-1deg)}30%{transform:scale(.97,1.05) rotate(1.5deg)}60%{transform:scale(1.02,.97) rotate(-.5deg)}}
.cx-flame .f-in{animation:flameIn 1.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes flameIn{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
@media(prefers-reduced-motion:reduce){.cx-flame svg,.cx-flame .f-in{animation:none}}
.cx-flame svg{width:46px!important;height:64px!important}
.cx-flame small{font-size:15px!important;letter-spacing:.5em!important}
/* =========== PREVIEW 27 =========== */
.op3 .op-sc{transition:opacity .4s ease!important}
/* CROWN：実物のロゴ写真（大理石の壁）。照明が走って点灯 → カメラがゆっくり寄る */
.op3 .ob-in .ob-logo{display:none!important}
.ob-photo{position:absolute;inset:0;overflow:hidden;background:#000}
.ob-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:brightness(.04) saturate(.6);transform:scale(1.14)}
.op3.brand .ob-photo img{animation:obLights 3.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes obLights{0%{filter:brightness(.04) saturate(.6);transform:scale(1.14)}30%{filter:brightness(.28) saturate(.8)}48%{filter:brightness(1.05) saturate(1)}100%{filter:brightness(1) saturate(1);transform:scale(1)}}
.ob-light{position:absolute;inset:-10%;background:linear-gradient(100deg,#0000 30%,#fff7e0aa 47%,#fff 50%,#fff7e0aa 53%,#0000 70%);background-size:300% 100%;background-position:120% 0;mix-blend-mode:soft-light;opacity:0}
.op3.brand .ob-light{animation:obBeam 1.5s .35s cubic-bezier(.55,0,.3,1) forwards}
@keyframes obBeam{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}
.op3 .ob-in{position:absolute;left:0;right:0;bottom:7%;z-index:2}
.op3 .ob-line{background:linear-gradient(90deg,#0000,#b8862f 20%,#d9b25e 50%,#b8862f 80%,#0000)!important;margin:0 auto 16px!important}
.op3.brand .ob-line{animation:obLine .9s 1.9s cubic-bezier(.6,0,.2,1) forwards!important}
.op3 .ob-sub{color:#7a5415!important;font-size:clamp(12px,1.25vw,17px)!important}
.op3 .ob-date{color:#9a7432!important}
.op3.brand .ob-sub{animation:obTxt .8s 2.1s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 2.3s ease-out forwards!important}
.op3.land{background:#f6f2ea!important}
.op3.land .ob-photo img{transform:scale(1)!important;filter:none!important;animation:none!important}
/* トップの右上ロゴは外して、見出しを主役に */
.hero .hx-logo{display:none!important}
/* VALUES：ビジネスシーンを映画のように（色味と金の額縁） */
.cx-vstage .cx-tb-img{filter:contrast(1.06) saturate(1.05)!important}
.cx-tb{position:relative}
.cx-tb:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a1410cc 0%,#0a141066 32%,#0000 60%),linear-gradient(0deg,#0a1410aa 0%,#0000 35%)}
/* PARTNERSHIP／HOSPITALITY／PERSONAL BRAND：黒いボタンをやめ、金の番号と白い大文字＋金の下線 */
.cx-tb-list{gap:6px!important;left:5%!important;bottom:9%!important}
.cx-tb-list button{background:none!important;border:0!important;border-radius:0!important;padding:8px 0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;position:relative;gap:18px!important}
.cx-tb-list button:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,#f3d58d,#f3d58d00);transform:scaleX(.25);transform-origin:left;transition:transform .5s}
.cx-tb-list button:hover:after{transform:scaleX(1)}
.cx-tb-list button b{font:600 clamp(18px,1.8vw,26px)/1 'Cormorant Garamond',Georgia,serif!important;color:#f3d58d!important;min-width:2.2em}
.cx-tb-list button span{font:700 clamp(26px,3.2vw,48px)/1.05 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.12em!important;color:#fff!important;text-shadow:0 2px 20px #000a}
/* 4つのサポート：カードを少しコンパクトに */
.cx-gp{flex-basis:min(60vw,820px)!important}
@media(max-width:860px){.cx-gp{flex-basis:90vw!important}}
/* 情熱の炎：PERSONAL BRANDのカードへ */
.values .cx-flame{display:flex!important;margin:4px 0 8px!important}
.values .cx-flame small{color:#f3d58d!important}
.values .cx-acc .value-card:not(.act) .cx-flame{display:none!important}
/* 会社概要：株式会社 / CROWN を格調高く */
.company h2.cx-co-title{display:flex!important;flex-direction:column;align-items:center;gap:6px;background:none!important;-webkit-text-fill-color:initial!important;animation:none!important;filter:none!important;line-height:1!important}
.company h2.cx-co-title small{font:700 clamp(14px,1.3vw,18px)/1 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.9em;padding-left:.9em;color:#8a5f1a;-webkit-text-fill-color:#8a5f1a}
.company h2.cx-co-title .cx-co-en{display:flex;align-items:center;gap:.4em;margin:0!important;font:700 clamp(64px,8.4vw,128px)/1 'Cormorant Garamond','Times New Roman',serif!important;letter-spacing:.18em!important;padding-left:.18em;background:linear-gradient(100deg,#6b4310 0%,#9a6a1f 30%,#d7aa52 46%,#f6e2a8 52%,#c99a3e 60%,#6b4310 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cxSweep 6s linear infinite}
.company h2.cx-co-title .cx-co-en:before,.company h2.cx-co-title .cx-co-en:after{content:'';width:clamp(30px,6vw,90px);height:1px;background:linear-gradient(90deg,#b8862f00,#b8862f)}
.company h2.cx-co-title .cx-co-en:after{background:linear-gradient(90deg,#b8862f,#b8862f00)}
.company h2.cx-co-title em{font:600 clamp(11px,1vw,14px)/1 'Cormorant Garamond',Georgia,serif;font-style:normal;letter-spacing:.6em;padding-left:.6em;color:#9a7432;-webkit-text-fill-color:#9a7432;margin-top:6px}
/* VALUES：長くなった文章が見出しと重ならないように */
@media(min-width:861px){.values .cx-vstage .value-grid.cx-acc{height:min(92vh,860px)!important}}
.values .cx-acc .value-card.act .cx-v-tx p:not(.value-en){font-size:14px!important;line-height:1.85!important;margin:0 0 8px!important}
.cx-tb:before{z-index:1!important}
.cx-tb-list{z-index:3!important}
.values .cx-acc .value-card.act .cx-flame{position:absolute!important;top:24px;right:26px;margin:0!important;flex-direction:column;align-items:center;gap:6px!important}
/* =========== PREVIEW 28 =========== */
/* CROWN誕生：白い大理石の上で、Cが金に満ち、王冠が降りて戴冠 → CROWNの文字 */
.op3 .ob-photo{display:none!important}
.ob-marble{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,#fffefb 0%,#fffdf8f2 26%,#fffdf800 58%),url('assets/marble.jpg') center/cover no-repeat;transform:scale(1.04)}
.op3.brand .ob-marble{animation:obMarble 4.6s ease-out forwards}
@keyframes obMarble{to{transform:none}}
.ob-birth{position:absolute;left:50%;top:44%;width:min(52vw,600px);aspect-ratio:653/435;translate:-50% -50%;z-index:2}
.ob-birth img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 22px #8a5f1a40)}
.ob-birth .b-c{clip-path:inset(78% 0 21.4% 0);opacity:0}
.ob-birth .b-crown{opacity:0;transform:translateY(-70vh)}
.ob-birth .b-text{opacity:0}
.op3.brand .ob-birth .b-c{animation:bC 1.1s .25s cubic-bezier(.6,0,.2,1) forwards}
@keyframes bC{0%{opacity:1;clip-path:inset(78% 0 21.4% 0);filter:brightness(1.8) drop-shadow(0 14px 22px #8a5f1a40)}100%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(1) drop-shadow(0 14px 22px #8a5f1a40)}}
.op3.brand .ob-birth .b-crown{animation:bCrown 1s 1.15s cubic-bezier(.3,0,.15,1) forwards}
@keyframes bCrown{0%{opacity:0;transform:translateY(-38vh)}25%{opacity:1}100%{opacity:1;transform:none}}
.ob-birth .b-glint{position:absolute;left:30%;right:30%;top:33%;height:2px;background:linear-gradient(90deg,#0000,#fff6d6 30%,#fff 50%,#fff6d6 70%,#0000);box-shadow:0 0 16px 4px #f3d58d88;opacity:0;transform:scaleX(.2)}
.op3.brand .ob-birth .b-glint{animation:bGlint .7s 2.1s ease-out forwards}
@keyframes bGlint{0%{opacity:0;transform:scaleX(.2)}30%{opacity:1;transform:scaleX(1.25)}100%{opacity:0;transform:scaleX(1.6)}}
.op3.brand .ob-birth .b-text{animation:bText 1s 2.25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bText{0%{opacity:0;transform:scaleX(1.18);filter:blur(6px)}100%{opacity:1;transform:none;filter:drop-shadow(0 14px 22px #8a5f1a40)}}
.ob-birth .b-sheen{position:absolute;inset:0;-webkit-mask:url('assets/crown-logo.png') center/100% 100% no-repeat;mask:url('assets/crown-logo.png') center/100% 100% no-repeat;background:linear-gradient(105deg,#0000 0,#fff0 40%,#fffc 50%,#fff0 60%,#0000 100%) no-repeat;background-size:26% 100%;background-position:-60% 0}
.op3.brand .ob-birth .b-sheen{animation:obSheen 1.3s 3.1s cubic-bezier(.45,0,.25,1) forwards}
.op3 .ob-in{bottom:9%!important}
.op3.brand .ob-line{animation:obLine .9s 2.7s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt .8s 2.95s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 3.15s ease-out forwards!important}
.op3.land .ob-birth{transform:scale(1.03);transition:transform 1.5s}
/* OUR MISSIONの一文：ポーンとポップアップ */
.mission h2.cx-drop .cx-ch{display:inline-block}
.mission h2.cx-drop.in .cx-ch{animation:chPop .7s calc(var(--i) * .045s) cubic-bezier(.18,1.6,.35,1) both!important}
@keyframes chPop{0%{opacity:0;transform:scale(.2) translateY(20px)}100%{opacity:1;transform:none}}
/* VALUES：握手の写真は暗くしない */
.cx-tb:before{display:none!important}
.cx-tb-list button span{text-shadow:0 2px 6px #0009,0 4px 28px #000c!important}
.cx-tb-list button b{text-shadow:0 2px 8px #000a}
/* 会社概要：株式会社 CROWN を1行に */
.company h2.cx-co-title .cx-co-row{display:flex;align-items:center;gap:.5em}
.company h2.cx-co-title .cx-co-row small{letter-spacing:.3em!important;padding-left:0!important;font-size:clamp(20px,2.4vw,36px)!important}
.company h2.cx-co-title .cx-co-en{font-size:clamp(56px,7.4vw,112px)!important}
.company h2.cx-co-title .cx-co-en:before,.company h2.cx-co-title .cx-co-en:after{display:none}
/* ヘッダー：CROWN＋右にロゴ */
.cx-brand{display:flex!important;flex-direction:row!important;align-items:center;gap:12px}
.cx-brand small{display:none!important}
.cx-brand-logo{height:44px;width:auto;filter:drop-shadow(0 0 10px #f3d58d55)}
@media(max-width:760px){.cx-brand-logo{height:34px}}
/* =========== PREVIEW 29 =========== */
/* 2枚目：晴れた昼の札幌駅 */
.op3 .op-sc.b2 img{object-position:50% 60%!important}
.op3 .op-sc.b2:after{background:linear-gradient(0deg,#0009 0%,#0003 32%,#0000 55%)!important}
/* CROWN爆誕：「5期連続No.1」→「独立開業。」→ ロゴが叩き込まれる */
.ob-birth .b-c,.ob-birth .b-crown,.ob-birth .b-text,.ob-birth .b-glint{display:none!important}
.ob-seq p{position:absolute;left:0;right:0;top:50%;translate:0 -50%;margin:0;text-align:center;opacity:0;z-index:3}
.ob-seq small{display:block;font:600 clamp(13px,1.3vw,18px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.6em;padding-left:.6em;color:#8a5f1a;margin-bottom:18px}
.ob-seq b{display:block;font:900 clamp(56px,8.6vw,140px)/1.05 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.04em;color:#1d2420}
.ob-seq b em{font:700 1.15em/1 'Cormorant Garamond',Georgia,serif;font-style:normal;margin-left:.15em;background:linear-gradient(100deg,#6b4310,#c99a3e 40%,#f6e2a8 52%,#b8862f 64%,#6b4310);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.op3.brand .ob-seq .s1{animation:seqCard 1.25s .1s cubic-bezier(.2,.8,.2,1) forwards}
.op3.brand .ob-seq .s2{animation:seqCard 1.1s 1.4s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes seqCard{0%{opacity:0;transform:scale(1.25);filter:blur(8px)}22%{opacity:1;transform:scale(1);filter:blur(0)}78%{opacity:1;transform:scale(.97)}100%{opacity:0;transform:scale(.94);filter:blur(4px)}}
.ob-birth .b-full{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 18px 28px #8a5f1a50)}
.op3.brand .ob-birth .b-full{animation:bImpact .7s 2.55s cubic-bezier(.12,1,.3,1) forwards}
@keyframes bImpact{0%{opacity:0;transform:scale(2.3);filter:blur(16px) brightness(1.6)}60%{opacity:1;filter:blur(0) brightness(1.15) drop-shadow(0 18px 28px #8a5f1a50)}100%{opacity:1;transform:none;filter:drop-shadow(0 18px 28px #8a5f1a50)}}
.ob-birth .b-flare{position:absolute;left:50%;top:50%;width:160vw;height:3px;margin-left:-80vw;background:linear-gradient(90deg,#0000,#f3d58d 35%,#fff 50%,#f3d58d 65%,#0000);box-shadow:0 0 30px 8px #f3d58d77;opacity:0;transform:scaleX(0)}
.op3.brand .ob-birth .b-flare{animation:bFlare .9s 2.75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes bFlare{0%{opacity:1;transform:scaleX(0)}40%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1) scaleY(.3)}}
.op3.brand .ob-marble{animation:obPulse 4.8s ease-out forwards!important}
@keyframes obPulse{0%,52%{filter:none;transform:scale(1.04)}57%{filter:brightness(1.12)}70%{filter:none}100%{transform:none}}
.op3.brand .ob-birth .b-sheen{animation:obSheen 1.2s 3.5s cubic-bezier(.45,0,.25,1) forwards!important}
.op3.brand .ob-line{animation:obLine .8s 3.3s cubic-bezier(.6,0,.2,1) forwards!important}
.op3 .ob-sub{font:700 clamp(16px,1.8vw,26px)/1.4 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.42em!important;color:#6b4310!important}
.op3.brand .ob-sub{animation:obTxt .8s 3.5s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 3.75s ease-out forwards!important}
.op3.brand .op-q,.op3.brand .op-words{opacity:0!important;transition:opacity .25s!important}
/* =========== PREVIEW 30 =========== */
/* 家族への問い：ゆっくり、かみしめるように */
.op3.q1 .q1 .c,.op3.q2 .q2 .c{animation:opQ 1.1s ease-out both!important;animation-delay:calc(var(--i)*85ms)!important}
.op3 .op-sc.fam.on img{animation-duration:6s!important}
/* 5期連続No.1は外す */
.ob-seq{display:none!important}
/* 独立開業。：金の炎がドンと燃え上がる */
.ob-ign{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:3;opacity:0}
.op3.brand .ob-ign{animation:ignShow 1.95s forwards}
@keyframes ignShow{0%,100%{opacity:1}88%{opacity:1}100%{opacity:0}}
.ig-flame{display:block;width:clamp(90px,10vw,150px);transform-origin:50% 100%;transform:scale(0,0);filter:drop-shadow(0 0 30px #f3d58daa) drop-shadow(0 12px 24px #8a5f1a55)}
.ig-flame svg{display:block;width:100%;height:auto}
.op3.brand .ig-flame{animation:ignite .65s .1s cubic-bezier(.2,1.6,.35,1) forwards,flick 1.2s .75s ease-in-out infinite}
@keyframes ignite{0%{transform:scale(.2,0)}60%{transform:scale(1.08,1.18)}100%{transform:scale(1,1)}}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-1deg)}50%{transform:scale(.97,1.06) rotate(1.2deg)}}
.ig-flame .ig-in{transform-origin:50% 100%;animation:flameIn 1s ease-in-out infinite}
.ob-ign p{margin:0;text-align:center}
.ob-ign small{display:block;font:600 clamp(13px,1.3vw,18px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.5em;padding-left:.5em;color:#8a5f1a;margin-bottom:14px;opacity:0}
.ob-ign b{display:block;font:900 clamp(60px,9vw,150px)/1 'Noto Serif JP','Yu Mincho',serif;letter-spacing:.06em;color:#1d2420;opacity:0}
.op3.brand .ob-ign b{animation:ignSlam .5s .45s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ignSlam{0%{opacity:0;transform:scale(1.7)}100%{opacity:1;transform:none}}
.op3.brand .ob-ign small{animation:obTxt .6s .75s ease-out forwards}
/* 炎の光が画面を満たし、その中からロゴが現れる */
.ob-flash2{position:absolute;inset:0;z-index:4;background:radial-gradient(circle at 50% 46%,#fffdf6 0%,#fff6dc 35%,#f6e7c4 70%,#efdcb0 100%);opacity:0;pointer-events:none}
.op3.brand .ob-flash2{animation:ignFlash .9s 1.6s ease-in-out forwards}
@keyframes ignFlash{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.op3.brand .ob-birth .b-full{animation:bRise 1.1s 1.95s cubic-bezier(.2,.8,.2,1) forwards!important}
@keyframes bRise{0%{opacity:0;transform:scale(1.08)}100%{opacity:1;transform:none}}
.ob-birth{z-index:5!important}
.op3 .ob-in{z-index:6!important}
.op3.brand .ob-birth .b-sheen{animation:obSheen 1.3s 2.7s cubic-bezier(.45,0,.25,1) forwards!important}
.op3.brand .ob-marble{animation:none!important}
.op3.brand .ob-line{animation:obLine .8s 2.55s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt .8s 2.75s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 2.95s ease-out forwards!important}
.ig-flame{width:clamp(130px,14vw,210px)!important;filter:drop-shadow(0 0 46px #f3d58dcc) drop-shadow(0 16px 30px #8a5f1a66)!important}
/* =========== PREVIEW 31 =========== */
/* 家族への問い：さらにゆっくり */
.op3.q1 .q1 .c,.op3.q2 .q2 .c{animation:opQ 1.4s ease-out both!important;animation-delay:calc(var(--i)*110ms)!important}
.op3 .op-sc.fam.on img{animation-duration:7.5s!important}
/* CROWN：大理石にロゴが静かに現れ、キランと光るだけ */
.ob-ign,.ob-flash2{display:none!important}
.op3.brand .ob-birth .b-full{animation:bCalm 1.2s .3s cubic-bezier(.2,.7,.2,1) forwards!important}
@keyframes bCalm{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.op3.brand .ob-birth .b-sheen{animation:obSheen 1.1s 1.5s cubic-bezier(.45,0,.25,1) forwards!important}
.ob-birth .b-star{position:absolute;left:50%;top:-1%;width:clamp(34px,4vw,56px);aspect-ratio:1;translate:-50% -50%;opacity:0;transform:scale(0) rotate(0);background:radial-gradient(circle,#fff 0 8%,#fff0 9%),conic-gradient(from 0deg,#0000 0 10%,#fff 12.5%,#0000 15% 35%,#fff 37.5%,#0000 40% 60%,#fff 62.5%,#0000 65% 85%,#fff 87.5%,#0000 90%);-webkit-mask:radial-gradient(circle,#000 0 30%,#0000 62%);mask:radial-gradient(circle,#000 0 30%,#0000 62%);filter:drop-shadow(0 0 8px #fff3c9)}
.op3.brand .ob-birth .b-star{animation:kiran .75s 2.35s ease-out forwards}
@keyframes kiran{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.15) rotate(45deg)}100%{opacity:0;transform:scale(.3) rotate(90deg)}}
.op3.brand .ob-line{animation:obLine .8s 1.3s cubic-bezier(.6,0,.2,1) forwards!important}
.op3.brand .ob-sub{animation:obTxt .8s 1.55s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt .8s 1.75s ease-out forwards!important}
/* =========== PREVIEW 32 =========== */
/* 家族の写真が白くやわらかく溶け、その中でピントが合うようにロゴが現れる（光らせない） */
.op3 .op-brand{transition:opacity 1.3s ease,visibility 1.3s!important}
.op3.brand .op-sc.fam img{filter:blur(16px) brightness(1.5) saturate(.7)!important;transition:filter 1.3s ease!important}
.op3 .ob-birth .b-sheen,.op3 .ob-birth .b-star{display:none!important}
.op3.brand .ob-marble{animation:mbIn 4.3s ease-out forwards!important}
@keyframes mbIn{from{transform:scale(1.06)}to{transform:none}}
.op3.brand .ob-birth .b-full{animation:bFocus 1.9s .7s cubic-bezier(.25,.1,.25,1) forwards!important}
@keyframes bFocus{0%{opacity:0;transform:scale(1.04);filter:blur(14px)}45%{opacity:1}100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 18px 28px #8a5f1a45)}}
.op3 .ob-line{width:min(30vw,340px)!important}
.op3.brand .ob-line{animation:obLine 1s 2.1s cubic-bezier(.6,0,.2,1) forwards!important}
.op3 .ob-sub{font:600 clamp(18px,1.9vw,28px)/1.5 'Noto Serif JP','Yu Mincho',serif!important;letter-spacing:.32em!important;padding-left:.32em;color:#5a3a0c!important}
.op3 .ob-date{font:600 clamp(11px,1vw,14px)/1.6 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.5em!important;color:#9a7432!important;margin-top:8px!important}
.op3.brand .ob-sub{animation:obTxt 1.1s 2.4s ease-out forwards!important}
.op3.brand .ob-date{animation:obTxt 1.1s 2.75s ease-out forwards!important}
/* トップ画面へは、カメラが寄りながら静かに */
.op3.land .ob-birth{transform:scale(1.06)!important;transition:transform 1.6s cubic-bezier(.4,0,.2,1)!important}
/* =========== PREVIEW 33 =========== */
/* 札幌の街とともに。：写真の中央に（売却も購入も・期待を超えていくと同じ白文字） */
.op-words .op-w:first-child{align-self:center;margin:24vh 0 0}
/* 白文字が、ダダダダダンと1文字ずつ打ち込まれる */
.op-w.on .c{animation:opDan .42s cubic-bezier(.2,1.25,.35,1) both!important;animation-delay:calc(var(--i)*75ms + 80ms)!important}
@keyframes opDan{0%{opacity:0;transform:translateY(-.4em) scale(1.7)}55%{opacity:1;transform:translateY(.03em) scale(.96)}100%{opacity:1;transform:none}}
/* 大切な人にできる仕事を、すべての人に。：大きく、ボーンと */
.hero h1{font-size:clamp(30px,4.1vw,68px)!important;line-height:1.45!important;letter-spacing:.05em!important;text-shadow:0 2px 6px #0008,0 6px 30px #0009}
.hero:has(.hd-go) h1 .h1l{animation:h1Boom .75s cubic-bezier(.18,1.45,.35,1) forwards!important;transform-origin:left center}
@keyframes h1Boom{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
/* =========== PREVIEW 34 =========== */
.op-words .op-w:first-child{align-self:end!important;margin:0!important}
/* 札幌のNo.1へ。 */
.hero .hd-c.no1{font-family:'Cormorant Garamond',Georgia,serif!important;font-weight:700!important;font-size:1.12em;letter-spacing:.02em;margin:0 .06em;background:linear-gradient(115deg,#fffbe8 4%,#fff1b4 24%,#d3a544 42%,#fff9dd 56%,#e9c269 72%,#fff5c7 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* 大切な人にできる仕事を、すべての人に。：明朝体で凛と */
.hero h1,.hero h1 .h1l{font-family:'Noto Serif JP','Yu Mincho','Hiragino Mincho ProN',serif!important;font-weight:700!important;letter-spacing:.08em!important}
.hero h1 .h1l:nth-child(2){color:#f6e3b0!important}
/* 代表写真：新しい写真をそのまま枠に（白いフレームと下のぼかしはそのまま） */
.portrait-scene .portrait-original{clip-path:none!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:38% 18%!important;transform:none!important;max-width:none!important}
.portrait-scene .portrait-original{object-position:20% 20%!important}
/* =========== PREVIEW 36 =========== */
/* 札幌の街とともに。：元のクリアな写真のまま、文字のラインを2・3枚目にそろえる */
.op3 .op-sc.b1 img{scale:1.23;transform-origin:50% 0!important;filter:none!important}
.op3 .op-sc.b1:after,.op3 .op-sc.b1:before{display:none!important}
.op3 .op-sc.b1~.op-vig{opacity:0}
.op3:has(.op-sc.b1.on) .op-vig{opacity:0!important}
.portrait-scene .portrait-original{object-position:30% 22%!important}
/* =========== PREVIEW 37 =========== */
/* 1枚目：文字なしの大通公園。他の2枚と同じ位置に白文字 */
.op3 .op-sc.b1 img{scale:1!important;object-position:50% 50%!important}
.op3 .op-sc.b1:after{display:block!important;content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0008 0%,#0003 30%,#0000 55%)!important}
/* CROWNのロゴを大きく */
.ob-birth{width:min(68vw,820px)!important;top:42%!important}
.op3 .ob-in{bottom:6%!important}
/* 札幌の頂点へ。：大きく、力強く */
.hero .hero-declaration.hd{font-size:clamp(52px,10vw,180px)!important;letter-spacing:.02em!important}
.hero .hd-c{font-weight:900!important}
.hero .hd-go .hd-c{animation:hdPower .7s calc(var(--k) * .07s) cubic-bezier(.2,1.15,.3,1) forwards!important}
.hero .hd-go .hd-c.g{animation:hdPower .7s calc(var(--k) * .07s) cubic-bezier(.2,1.15,.3,1) forwards,hdShine 1.4s 1s ease-in-out forwards!important}
@keyframes hdPower{0%{transform:translateY(105%)}100%{transform:none}}
.hero .hero-declaration.hd:after{height:3px!important;width:min(100%,6em)!important;bottom:-14px!important}
/* 大切な人にできる仕事を、すべての人に。：大きく、金の縦線を添えて */
.hero h1{font-size:clamp(32px,4.6vw,78px)!important;padding-left:.6em;border-left:4px solid #e2b65c;margin-top:28px!important}
.hero h1 .h1l:nth-child(2){background:linear-gradient(100deg,#fff6dc,#f3d58d 40%,#fff1c4 60%,#e2b65c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .h1l:nth-child(2){background:none!important;-webkit-text-fill-color:#f6e3b0!important;color:#f6e3b0!important}
/* =========== PREVIEW 38：緩急を整える =========== */
.op3.q1 .q1 .c,.op3.q2 .q2 .c{animation:opQ 1.1s ease-out both!important;animation-delay:calc(var(--i)*80ms)!important}
.op3 .op-sc.fam.on img{animation-duration:6s!important}
/* =========== PREVIEW 39 =========== */
/* 家族への問い：白く明るい、清潔感のある画面に */
.op3 .op-sc.fam:after{background:linear-gradient(0deg,#ffffffd9 0%,#ffffffb3 45%,#ffffff8c 100%)!important}
.op3 .op-sc.fam img{filter:brightness(1.08) saturate(1.05)}
.op3:has(.op-sc.fam.on) .op-vig{opacity:0!important}
.op3 .op-q p{color:#1f2a24!important;text-shadow:0 0 18px #fff,0 0 2px #fff!important}
.op3 .op-q .q2{color:#8a5f1a!important}
/* CROWNのロゴ：少し小さく */
.ob-birth{width:min(54vw,640px)!important;top:43%!important}
/* =========== PREVIEW 40 =========== */
/* 家族への問い：明るく温かい陽だまりの中で（白い膜はやめる） */
.op3 .op-sc.fam img{filter:brightness(1.1) saturate(1.15) sepia(.08)!important}
.op3 .op-sc.fam:after{background:linear-gradient(100deg,#fff8eccc 0%,#fff8ec99 32%,#fff8ec22 58%,#fff0 75%),radial-gradient(ellipse at 80% 10%,#ffd99a55,#fff0 55%)!important}
.op3 .op-q{align-items:flex-start!important;text-align:left!important;padding:0 7vw!important}
.op3 .op-q p{color:#3a2a14!important;text-shadow:0 0 22px #fff8ec,0 0 3px #fff!important}
.op3 .op-q .q2{color:#a06a12!important}
/* =========== PREVIEW 41 =========== */
/* トップ：虹のくっきりした大通公園＋花火 */
.hero-frame.summer{background-image:linear-gradient(90deg,#07100e99,#07100e10 62%,#07100e00),linear-gradient(0deg,#07100e80,#07100e00 45%),url('assets/hero-f96.jpg')!important;background-size:cover!important;background-position:50% 40%!important}
.cx-fw{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .hero-content{position:relative;z-index:3}
/* 家族への問い：白文字＋金で統一 */
.op3 .op-sc.fam:after{background:linear-gradient(100deg,#2a1d0ecc 0%,#2a1d0e88 34%,#2a1d0e22 60%,#0000 78%)!important}
.op3 .op-q p{color:#fff!important;text-shadow:0 2px 6px #0008,0 6px 30px #000a!important}
.op3 .op-q .q2{color:#f3d58d!important}
/* =========== PREVIEW 43 =========== */
/* 家族への問い：くすみをなくし、陽だまりの金色の光で */
.op3 .op-sc.fam img{filter:brightness(1.12) saturate(1.15)!important}
.op3 .op-sc.fam:after{background:radial-gradient(ellipse 55% 60% at 22% 50%,#c98a2e8c 0%,#c98a2e4d 45%,#c98a2e00 75%),linear-gradient(100deg,#b9842d40 0%,#b9842d00 55%)!important}
.op3 .op-q p{color:#fff!important;text-shadow:0 1px 3px #6b4310cc,0 4px 22px #6b4310b3!important}
.op3 .op-q .q2{color:#fff1c4!important;text-shadow:0 1px 3px #6b4310dd,0 4px 22px #6b4310cc!important}
.op3 .op-sc.fam:after{background:radial-gradient(ellipse 55% 62% at 22% 50%,#a8701fa6 0%,#b9842d66 45%,#c98a2e00 75%),linear-gradient(100deg,#a8701f4d 0%,#a8701f00 55%)!important}
.op3 .op-q .q2{color:#ffe08a!important;text-shadow:0 1px 3px #4a2e08,0 4px 24px #4a2e08e6!important}
/* =========== PREVIEW 44 =========== */
/* 家族への問い：文字は揺らさず、静かにフェードで */
.op3.q1 .q1 .c,.op3.q2 .q2 .c{animation:qFade .9s ease-out both!important;animation-delay:calc(var(--i)*70ms)!important;transform:none!important;filter:none!important}
@keyframes qFade{from{opacity:0}to{opacity:1}}
.op3 .op-q .q2{color:#f3d58d!important}
.op3 .op-sc.fam.on img{animation:none!important;transform:scale(1.03)!important}
/* =========== PREVIEW 45 =========== */
/* VISION：札幌駅・テレビ塔（11:11）・ノルベサの夜景を、ゆっくり横に見渡す */
.vision .vision-background i{display:none!important}
.vision .vision-background i:first-child{display:block!important;opacity:1!important;animation:none!important;background:url('assets/opv2.jpg') 0% 50%/auto 100% no-repeat!important}
.vision.vs-on .vision-background i:first-child{animation:vPan 32s ease-in-out infinite alternate!important}
@keyframes vPan{from{background-position:0% 50%}to{background-position:100% 50%}}
/* VALUES：01 晴天のテレビ塔（11:11）／02 太陽の札幌駅／03 ノルベサの観覧車 */
.values .cx-vrows .value-card:nth-child(1){--vbg:url('assets/val-tower3.jpg')!important}
.values .cx-vrows .value-card:nth-child(2){--vbg:url('assets/stn-day-sun.jpg')!important}
.values .cx-vrows .value-card:nth-child(3){--vbg:url('assets/val-wheel3.jpg')!important}
.values .cx-acc .value-card:nth-child(1) .cx-v-ph{background-position:50% 30%!important}
.values .cx-acc .value-card:nth-child(2) .cx-v-ph{background-position:62% 20%!important}
.values .cx-acc .value-card:nth-child(3) .cx-v-ph{background-position:50% 40%!important}
/* あなたと、同じ未来を見つめて。：金の光でデコレーション */
.cx-sf{position:relative}
.cx-s-hero-bg .cx-sf em{background:linear-gradient(100deg,#fff 0%,#fff6dc 35%,#f3d58d 47%,#fff 53%,#fff6dc 65%,#fff 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:sfShine 5s ease-in-out infinite!important;filter:drop-shadow(0 0 18px #f3d58d88) drop-shadow(0 4px 24px #0009)!important}
@keyframes sfShine{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
.sf-line{display:block;height:2px;width:0;margin-top:22px;background:linear-gradient(90deg,#f3d58d,#fff6dc 50%,#f3d58d00);box-shadow:0 0 14px #f3d58daa;transition:width 1.6s .6s cubic-bezier(.2,.8,.2,1)}
.cx-sf.visible .sf-line{width:min(70%,520px)}
.sf-sp{position:absolute;width:14px;height:14px;background:radial-gradient(circle,#fff 0 15%,#fff0 16%),conic-gradient(from 45deg,#0000 0 20%,#fff6dc 25%,#0000 30% 45%,#fff6dc 50%,#0000 55% 70%,#fff6dc 75%,#0000 80% 95%,#fff6dc 100%);-webkit-mask:radial-gradient(circle,#000 0 25%,#0000 60%);mask:radial-gradient(circle,#000 0 25%,#0000 60%);filter:drop-shadow(0 0 6px #f3d58d);opacity:0;animation:sfTw 3.2s ease-in-out infinite}
.sf-sp.s1{left:-2%;top:30%;animation-delay:.2s}.sf-sp.s2{left:62%;top:36%;animation-delay:1.1s;width:18px;height:18px}.sf-sp.s3{left:44%;top:4%;animation-delay:1.9s}.sf-sp.s4{left:30%;top:88%;animation-delay:2.6s;width:10px;height:10px}
@keyframes sfTw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}60%{opacity:.8}}
@media(prefers-reduced-motion:reduce){.cx-sf em,.sf-sp{animation:none!important}}
/* VISION：札幌の街を見渡す空撮（テレビ塔11:11）をゆっくり寄りで */
.vision .vision-background i:first-child{background:url('assets/odori-hero.jpg') 50% 40%/cover no-repeat!important;animation:none!important}
.vision.vs-on .vision-background i:first-child{animation:vZoom 24s ease-in-out infinite alternate!important}
@keyframes vZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
/* 同じ未来を：はっきりした金色＋やわらかく脈打つ光 */
.cx-s-hero-bg .cx-sf em{background:none!important;-webkit-text-fill-color:#f6dc9a!important;color:#f6dc9a!important;filter:none!important;text-shadow:0 2px 6px #0009,0 0 26px #f3d58d99!important;animation:sfGlow 3.6s ease-in-out infinite!important}
@keyframes sfGlow{0%,100%{text-shadow:0 2px 6px #0009,0 0 18px #f3d58d66}50%{text-shadow:0 2px 6px #0009,0 0 38px #fff1c4cc,0 0 70px #f3d58d77}}
.sf-sp{z-index:2}
/* =========== PREVIEW 46 =========== */
/* 家族への問い：VISIONと同じ“白く澄んだ”左側。くすみゼロ */
.op3 .op-sc.fam img{filter:brightness(1.1) saturate(1.1)!important}
.op3 .op-sc.fam:after{background:linear-gradient(100deg,#ffffffeb 0%,#fffffff0 18%,#ffffffb3 40%,#ffffff33 60%,#fff0 75%)!important}
.op3 .op-q p{color:#1d2420!important;text-shadow:none!important}
.op3 .op-q .q2{color:transparent!important;background:linear-gradient(100deg,#9a6a1f 0%,#c99a3e 35%,#e2b65c 55%,#b8862f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.op3 .op-q .q2 .c{-webkit-text-fill-color:transparent}
/* CROWN：ロゴと「2026年11月 独立開業」の間を詰める */
.ob-birth{top:40%!important}
.op3 .ob-in{bottom:auto!important;top:calc(40% + min(54vw,640px) * 435 / 653 / 2 + 22px)!important}
.op3 .ob-line{margin:0 auto 14px!important}
/* VALUES：握手写真 — 2人が左右から歩み寄り、中央で手が重なる */
.cx-vstage .cx-tb-img{background-image:none!important;opacity:1!important;transform:none!important;box-shadow:none!important;border-radius:0!important;position:relative}
.cx-vstage .cx-tb-img:before,.cx-vstage .cx-tb-img:after{content:'';position:absolute;inset:0;background:url('assets/handshake.jpg') 50% 18%/cover no-repeat;transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity 1s ease,filter 1.3s}
.cx-vstage .cx-tb-img:before{clip-path:inset(0 50% 0 0);transform:translateX(-18%);opacity:0;filter:blur(4px)}
.cx-vstage .cx-tb-img:after{clip-path:inset(0 0 0 50%);transform:translateX(18%);opacity:0;filter:blur(4px)}
.cx-tb.tb-in .cx-tb-img:before,.cx-tb.tb-in .cx-tb-img:after{transform:none;opacity:1;filter:none}
.cx-tb .cx-hs-flash{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,#0000,#fff6dc 40%,#fff 50%,#fff6dc 60%,#0000);box-shadow:0 0 30px 8px #f3d58d88;opacity:0;z-index:2;pointer-events:none}
.cx-tb.tb-in .cx-hs-flash{animation:hsFlash 1s 1.15s ease-out forwards}
@keyframes hsFlash{0%{opacity:0;transform:scaleY(.2)}35%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1) scaleX(6)}}
/* 4つのサポート：黒いグラデーションをやめ、白く明るいカードで */
.cx-gp .ph .cap{width:auto!important;max-width:64%!important;left:4%!important;bottom:6%!important;padding:18px 28px 20px!important;border-radius:14px!important;background:#ffffffe0!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 40px #0002}
.cx-gp .ph .cap b{color:transparent!important;background:linear-gradient(100deg,#9a6a1f,#e2b65c 50%,#b8862f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;font-size:clamp(40px,4.4vw,72px)!important}
.cx-gp .ph .cap small{color:#9a7432!important}
.cx-gp .ph .cap span{color:#1d2420!important;text-shadow:none!important;font-size:clamp(20px,2.2vw,34px)!important}
.op3 .op-q .q2{background:none!important;color:#b8862f!important;-webkit-text-fill-color:#b8862f!important}
.op3 .op-q .q2 .c{-webkit-text-fill-color:#b8862f!important}
.cx-gp .ph .cap{top:auto!important;height:auto!important;right:auto!important;justify-content:flex-end!important}
/* =========== PREVIEW 47 =========== */
/* CROWN：ロゴと「独立開業」の間を少しだけ広げる */
.op3 .ob-in{top:calc(40% + min(54vw,640px) * 435 / 653 / 2 + 46px)!important}
.op3 .ob-line{margin:0 auto 20px!important}
/* OUR MISSION の一文：VISIONと同じポップアップ */
.mission h2.cx-drop.in .cx-ch{animation:chBoom .75s cubic-bezier(.2,1.45,.35,1) both!important;animation-delay:calc(.35s + var(--i)*48ms)!important;display:inline-block}
/* 4つのサポート：白い板をやめ、写真を活かす。暗くしすぎない柔らかな影 */
.cx-gp .ph .cap{max-width:none!important;width:62%!important;left:0!important;bottom:0!important;padding:0 0 5% 5.4%!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(90deg,#1c222b66 0%,#1c222b38 45%,#1c222b00 100%)!important;isolation:isolate}
.cx-gp .ph .cap:before{content:'';position:absolute;inset:-30% 0 0 0;z-index:-1;backdrop-filter:blur(7px) brightness(.96);-webkit-backdrop-filter:blur(7px) brightness(.96);-webkit-mask:radial-gradient(120% 100% at 0 100%,#000 45%,#0000 80%);mask:radial-gradient(120% 100% at 0 100%,#000 45%,#0000 80%);pointer-events:none}
.cx-gp .ph .cap b{background:linear-gradient(100deg,#f3d58d,#fff6dc 45%,#e2b65c)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:clamp(56px,6.4vw,104px)!important;filter:drop-shadow(0 2px 10px #0006)}
.cx-gp .ph .cap small{color:#fff!important;text-shadow:0 1px 8px #0008}
.cx-gp .ph .cap span{color:#fff!important;text-shadow:0 2px 14px #0009,0 0 2px #0006!important;font-size:clamp(26px,2.9vw,46px)!important}
#strategy .ph{--img:url('assets/sv-p1x.jpg')!important}
#renovation .ph{--img:url('assets/sv-p3x.jpg')!important}
/* 03 リフォーム：照明がきらめく */
#renovation .ph:before{display:block!important;content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
 radial-gradient(circle at 31% 3%,#fff 0 1.5px,#fff6dc66 3px,#0000 9px),
 radial-gradient(circle at 56% 14%,#fff 0 1.5px,#fff6dc66 3px,#0000 10px),
 radial-gradient(circle at 74% 6%,#fff 0 1.5px,#fff6dc66 3px,#0000 9px),
 radial-gradient(circle at 87% 20%,#fff 0 1.5px,#fff6dc66 3px,#0000 9px),
 radial-gradient(circle at 63% 46%,#fff 0 1.5px,#fff6dc55 3px,#0000 8px);animation:svTw 3.2s ease-in-out infinite}
#renovation .ph:after{animation:svGlow 6s ease-in-out infinite alternate}
@keyframes svTw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes svGlow{from{filter:brightness(1) saturate(1)}to{filter:brightness(1.07) saturate(1.08)}}