/* ========================================================================== agent-roman — main.css（design v65.18 / 2026-07-17 生成） ★手で編集しない：正本＝design-preview/index.html。 再生成＝ python3 design-preview/tools/build-theme-assets.py --deploy 本番専用の追補は theme-tail.css を編集して再生成する。 ========================================================================== */ :root{--gnav-safe:calc(clamp(20px,2.6vw,38px) + 96px + 22px); /* v35→v48: 左中央ハンバーガー（96px円）の安全域＝円の右端+余白（テキストはこの内側に置かない） */ --ink:#0A0A0D; --ink-2:#101015; --ink-3:#17171E; --bone:#F6F2E9; --bone-2:#EBE4D5; --ash:#8C887B; --ash-dim:#56534A; --wine:#7E2636; --wine-lit:#C13C55; --teal:#2C6C7C; --teal-lit:#48AEC6; --olive:#A9A25A; --olive-lit:#D3C778; --line-d:rgba(246,242,233,.14); --line-l:rgba(10,10,13,.13); --dim:rgba(246,242,233,.68); --faint:rgba(246,242,233,.40); --jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif; --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif; /* 映画の言葉＝明朝（コピー・理念・見出し） */ --en:"Bricolage Grotesque","Hiragino Sans",system-ui,sans-serif; --ct:1280px; --ctw:1560px; --e:cubic-bezier(.19,1,.22,1); --sp:clamp(5.5rem,12vw,10rem); --ls-voice:.06em; --lh-voice:2.4; /* 明朝本文（映画の言葉）の共通の呼吸＝字間/行間を全ページで揃える（blkのみ中央組み・1画面収まり優先で2.6を維持） */} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--jp);font-size:16px;line-height:1.85;letter-spacing:.02em;font-feature-settings:"palt";line-break:strict;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip} /* line-break:strict＝禁則。overflow-x:clip＝hiddenはiOS Safariで全stickyを殺す（罠9）。clipなら切り抜きだけでstickyが生きる（非対応ブラウザはhiddenへフォールバック） */ img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-weight:900;line-height:1.28;letter-spacing:.01em} p{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--wine);color:var(--bone)} /* ページ全体のスクロールバーも世界観に合わせて細く暗く */ ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{background:var(--ash-dim);border-radius:8px;border:2px solid var(--ink)} :focus-visible{outline:2px solid var(--olive-lit);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .en{font-family:var(--en)} /* ラベルの色ルール＝一色に統一：暗い面では「映写光の金」、白い紙面ではwine（.light側で上書き）。 tealは背景のグラデの中だけに使う＝色の役割を固定して全ページの統一感を出す */ .eyebrow{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--olive-lit);display:inline-block} .ct{max-width:var(--ct);margin-inline:auto;padding-inline:clamp(20px,5vw,60px);padding-left:max(clamp(20px,5vw,60px),var(--gnav-safe))} .ctw{max-width:var(--ctw)} .sec{padding-block:var(--sp)} /* cursor: 映写ドット */ .cur,.cur2{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:screen;will-change:transform;translate:-50% -50%} /* v15.8: カーソル＝スポットライト。中心の点は常に光彩を放ち、外リングはフォーカス（拡大）時だけ灯る */ body.cur-hy{--curc:var(--wine-lit);--curr:193,60,85} body.cur-ez{--curc:var(--teal-lit);--curr:72,174,198} .cur{width:7px;height:7px;background:var(--curc,var(--olive-lit));transition:width .3s var(--e),height .3s var(--e),background .3s,box-shadow .3s ease; box-shadow:0 0 6px rgba(var(--curr,211,199,120),.95),0 0 16px rgba(var(--curr,211,199,120),.55),0 0 32px rgba(var(--curr,211,199,120),.28)} .cur2{width:40px;height:40px;border:1px solid rgba(var(--curr,211,199,120),.5);transition:width .35s var(--e),height .35s var(--e),border-color .35s,opacity .35s,box-shadow .35s ease} body.cur-big .cur{width:0;height:0} body.cur-big .cur2{width:74px;height:74px;border-color:var(--curc,var(--olive-lit)); box-shadow:0 0 14px rgba(var(--curr,211,199,120),.5),0 0 36px rgba(var(--curr,211,199,120),.24),inset 0 0 16px rgba(var(--curr,211,199,120),.26)} body.touch .cur,body.touch .cur2{display:none} @media(pointer:coarse){ .cur,.cur2{display:none} } /* buttons */ /* ボタン：ピル型はポップに寄るため、シャープな額縁型（radius 2px）＝映画クレジットの品 */ .btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--en);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:1em 2.1em;border:1px solid var(--faint);color:var(--bone);cursor:pointer;background:none;transition:.5s var(--e);position:relative;overflow:hidden;border-radius:2px} /* ホバーの塗りは単色wine＝グラデの過剰さを抜いて品を保つ */ .btn::before{content:"";position:absolute;inset:0;background:var(--wine);transform:translateY(101%);transition:transform .55s var(--e);z-index:-1} .btn:hover{border-color:transparent} .btn:hover::before{transform:translateY(0)} .btn--solid{background:var(--wine);border-color:transparent} .btn--solid::before{background:var(--wine-lit)} .btn--sm{padding:.62em 1.35em;font-size:.74rem} @media(max-width:940px),(pointer:coarse){ .btn--sm{min-height:44px} } /* タッチ端末＋狭幅で44px確保（デスクトップの見た目は不変・v58.1でmax-width追加） */ .btn--light{color:var(--ink);border-color:var(--line-l)} .btn--light:hover{color:var(--bone)} .ar{transition:transform .5s var(--e)} .btn:hover .ar{transform:translateX(5px)} /* preview shell */ /* タブが増えても折り返してバーを太らせない */ /* 最新看板だけを表示し、旧版の長い履歴はDOMに保全 */ .hd{position:fixed;inset-inline:0;top:0;z-index:400;pointer-events:none;mix-blend-mode:difference} .hd__in{display:flex;align-items:center;justify-content:space-between;padding:1.35rem clamp(20px,5vw,60px)} .hd__logo{pointer-events:auto;font-family:"EB Garamond",var(--serif);font-weight:600;font-size:1.24rem;letter-spacing:.02em;color:#fff} .hd__ct{pointer-events:auto;display:inline-flex;align-items:center;gap:.6em;font-family:var(--en);font-weight:600;font-size:.78rem;letter-spacing:.24em;color:#fff;position:relative;padding:.3em 0} .hd__ct::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e)} .hd__ct:hover::after{transform:scaleX(1)} /* ホバーは白の罫＝差の合成でどの背景でも反転して見える */ .hd__mail{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .gnav__btn{position:fixed;left:clamp(20px,2.6vw,38px);top:50%;transform:translateY(-50%);z-index:5600;width:96px;height:96px; display:grid;place-items:center;background:none;border:0;cursor:pointer;mix-blend-mode:difference;transition:opacity .55s ease,visibility 0s} body.ft-visible:not(.gnav-open) .gnav__btn{opacity:0;pointer-events:none} .gnav__ring{position:absolute;inset:0;width:100%;height:100%} /* v48.4: リング回転を撤去＝回転がマスクごと回り穴が6時にズレていた真因。12時始まりはarc単体の回転で維持 */ .gnav__ring circle{fill:none;stroke:#fff} /* v48.3: 円の欠きはSVGマスク（HTML側#gnavRingMask）が担う＝dash計算のズレで文字を貫く事故を根治。dashは素の一周に戻す */ .gnav__ring .bg{stroke-width:1;opacity:.9} .gnav__ring .arc{stroke-width:1.6;stroke-dasharray:306.6;stroke-dashoffset:306.6;transition:stroke-dashoffset .95s var(--e);transform:rotate(-90deg);transform-origin:center;transform-box:fill-box} /* 2πr(r=48.8)。文字帯はmaskが欠く */ .gnav__btn:hover .gnav__ring .arc{stroke-dashoffset:0} /* ホバー＝円弧が時計回りに一周（映写リールの気配） */ .gnav__core{position:absolute;inset:0} .gnav__lbl{position:absolute;left:0;top:50%;translate:-60% -50%;font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;display:grid;text-align:center} .gnav__lbl .m,.gnav__lbl .c{grid-area:1/1;transition:opacity .4s ease} .gnav__lbl .c{opacity:0} .gnav-open .gnav__lbl .m{opacity:0} .gnav-open .gnav__lbl .c{opacity:1} .gnav__ico{position:absolute;left:50%;top:50%;translate:-50% -50%;width:22px;height:16px;display:grid;place-items:center} .gnav__ico i{grid-area:1/1;width:22px;height:1.7px;background:#fff;transition:transform .5s var(--e),opacity .35s ease,width .4s var(--e),margin .4s var(--e)} .gnav__ico i:nth-child(1){transform:translateY(-6px)} .gnav__ico i:nth-child(3){transform:translateY(6px)} .gnav__btn:hover .gnav__ico i:nth-child(1){width:15px;margin-right:7px} /* 線の段差呼吸（押せる気配・v34から継承） */ .gnav__btn:hover .gnav__ico i:nth-child(3){width:15px;margin-left:7px} .gnav-open .gnav__ico i:nth-child(1){transform:rotate(45deg);width:23px;margin:0} .gnav-open .gnav__ico i:nth-child(2){opacity:0} .gnav-open .gnav__ico i:nth-child(3){transform:rotate(-45deg);width:23px;margin:0} @media(max-width:640px){ .gnav__btn{width:76px;height:76px} .gnav__lbl{font-size:.5rem;translate:-52% -50%} } /* 狭幅=跨りを浅く（画面端に触れない） */ /* ===== v34 全画面メニュー（whatever式の大文字リスト×自社の語彙＝黒・骨白・金・ヘアライン） ===== */ .gnav{position:fixed;inset:0;z-index:5500;background:#08080B;visibility:hidden;pointer-events:none; clip-path:circle(0px at clamp(68px,calc(2.6vw + 48px),86px) 50%);transition:clip-path .8s var(--e),visibility 0s linear .8s} /* ボタン（96px円）中心から円が開く */ .gnav-open .gnav{visibility:visible;pointer-events:auto;clip-path:circle(150% at clamp(68px,calc(2.6vw + 48px),86px) 50%);transition:clip-path .8s var(--e)} .gnav__bgv{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease;pointer-events:none} .gnav__bgv.on{opacity:1} .gnav__bgv video{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.6)} .gnav__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.6) 42%,rgba(8,8,11,.34) 68%,rgba(8,8,11,.72) 100%),linear-gradient(0deg,rgba(8,8,11,.6),transparent 42%)} /* 左=リスト・右=案内・下=SNSの可読性 */ .gnav__grain{position:absolute;inset:0;z-index:2;opacity:.4;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E")} .gnav__in{position:absolute;left:clamp(90px,16vw,240px);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:clamp(.3rem,1.4svh,.9rem)} /* v36.1: 内側へ寄せる（左右の離れすぎ解消） */ .gnav__in>*{opacity:0;transform:translateY(20px);filter:blur(7px); transition:opacity .5s ease,transform .65s var(--e),filter .5s ease} /* 子5つ（項目4+Company群）が時差で現像 */ .gnav-open .gnav__in>*{opacity:1;transform:none;filter:none} .gnav-open .gnav__in>*:nth-child(1){transition-delay:.28s} .gnav-open .gnav__in>*:nth-child(2){transition-delay:.34s} .gnav-open .gnav__in>*:nth-child(3){transition-delay:.40s} .gnav-open .gnav__in>*:nth-child(4){transition-delay:.46s} .gnav-open .gnav__in>*:nth-child(5){transition-delay:.52s} .gnav__i{display:flex;align-items:baseline;gap:1.3em} .gnav__i .en{font-family:var(--en);font-weight:700;font-variation-settings:"opsz" 96;font-size:clamp(1.9rem,6svh,3.3rem);line-height:1.15;letter-spacing:.02em;color:var(--bone);transition:color .35s,transform .5s var(--e)} .gnav__i .jp{font-family:var(--serif);font-weight:600;font-size:.7rem;letter-spacing:.18em;color:var(--ash);transition:color .35s} .gnav__i:hover .en{color:var(--olive-lit);transform:translateX(10px)} /* ホバー＝金が灯って一歩前へ（自社の色） */ .gnav__i:hover .n,.gnav__i:hover .jp{color:var(--olive-lit)} .gnav__grp{display:flex;flex-direction:column} .gnav__sub{display:flex;flex-wrap:wrap;gap:.8rem 2rem;padding-left:.15rem;max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);margin-top:0; transition:max-height .5s var(--e),opacity .4s ease,transform .5s var(--e),margin-top .5s var(--e)} .gnav__grp:hover .gnav__sub,.gnav__grp:focus-within .gnav__sub{max-height:3.6em;opacity:1;transform:none;margin-top:.4rem} .gnav__sub a{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.14em;color:var(--dim);transition:color .3s} .gnav__sub a em{font-style:normal;font-family:var(--jp);font-weight:500;font-size:.64rem;letter-spacing:.14em;color:var(--ash);margin-left:.6em} .gnav__sub a:hover{color:var(--olive-lit)} @media(max-width:940px),(pointer:coarse){ .gnav__sub{max-height:none;opacity:1;transform:none;margin-top:.35rem;overflow:visible;gap:.1rem 1.5rem} .gnav__sub a{display:inline-flex;align-items:center;padding:.9em .2em;font-size:.78rem} } /* v36: 右カラム＝相談導線（whatever式の配置×自社の言葉） */ .gnav__aside{position:absolute;right:clamp(64px,13vw,260px);top:50%;transform:translateY(-50%);z-index:3;max-width:340px; opacity:0;filter:blur(5px);transition:opacity .55s ease .6s,filter .55s ease .6s} /* v36.1: 内側へ寄せる（左右の離れすぎ解消） */ .gnav-open .gnav__aside{opacity:1;filter:none} .gnav__msg{font-family:var(--serif);font-weight:600;font-size:.8rem;line-height:2.2;letter-spacing:.1em;color:var(--dim)} .gnav__cta{display:inline-flex;align-items:center;gap:.65em;margin-top:1.2rem;padding-bottom:.4em;color:var(--bone); border-bottom:1px solid rgba(246,242,233,.4);transition:color .3s,border-color .3s} .gnav__cta .en{font-family:var(--en);font-weight:700;font-variation-settings:"opsz" 96;font-size:1.5rem;letter-spacing:.08em;line-height:1} .gnav__cta .jp{font-family:var(--jp);font-weight:600;font-size:.72rem;letter-spacing:.16em;color:var(--dim);transition:color .3s} .gnav__mail{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .gnav__cta .ar{margin-left:.2em;display:inline-block;transition:transform .4s var(--e)} .gnav__cta:hover{color:var(--olive-lit);border-color:var(--olive-lit)} .gnav__cta:hover .jp{color:var(--olive-lit)} .gnav__cta:hover .ar{transform:translateX(5px)} /* v36: SNS＝右下（ヘアラインの円＝自社の線の語彙。リンクは後日＝JSがpreventDefault） */ .gnav__sns{position:absolute;right:clamp(64px,13vw,260px);bottom:clamp(1.8rem,6svh,3.4rem);z-index:3;display:flex;gap:.9rem; opacity:0;transition:opacity .55s ease .72s} /* v36.1: 右カラムと同じ内側基準に揃える */ .gnav-open .gnav__sns{opacity:1} .gnav__sns a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-d);border-radius:50%;color:var(--dim);transition:color .3s,border-color .3s,transform .4s var(--e)} .gnav__sns a:hover{color:var(--olive-lit);border-color:rgba(211,199,120,.5);transform:translateY(-3px)} .gnav__sns svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .gnav__sns .fb svg{fill:currentColor;stroke:none} /* Facebookのfはグリフ塗り */ @media(max-width:940px){ .gnav__aside,.gnav__sns{display:none} } /* 狭幅＝右カラムは畳んでリスト優先 */ body.gnav-open{overflow:hidden} /* メニュー中は背面のスクロールを止める（閉じたら戻す＝罠9の恒常hiddenとは別物） */ @media(prefers-reduced-motion:reduce){ .gnav{transition:none} .gnav-open .gnav{transition:none} .gnav__in>*,.gnav-open .gnav__in>*{transition:none;opacity:1;transform:none;filter:none} .gnav__aside,.gnav-open .gnav__aside,.gnav__sns,.gnav-open .gnav__sns{transition:none;opacity:1;filter:none} .gnav__bgv{display:none} /* reduce＝ホバー動画なし */ } /* --- News「ミシン目→切り取り」：金の針が章の上端を縫い→章全体が半券のように切り取られて落ち着く --- */ .nsec{position:relative} .nsec__tear{position:absolute;top:0;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);height:1px;pointer-events:none} .nsec__tear::before,.nsec__tear::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border:1px solid rgba(246,242,233,.28); border-radius:50%;background:#0A0A0D;opacity:0;transition:opacity .5s ease} /* 半券のパンチ穴＝縫い始めと縫い終わり */ .nsec__tear::before{left:-15px} .nsec__tear::after{right:-15px;transition-delay:.6s} .nsec.play .nsec__tear::before,.nsec.play .nsec__tear::after{opacity:1} .js .stz{clip-path:inset(0 100% 0 0)} /* .jsゲート（罠22）＝JS不達時は線を隠さない */ .stz{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(246,242,233,.34) 0 7px,transparent 7px 16px)} .nsec.play .stz{animation:nStitch .58s linear .05s both} @keyframes nStitch{to{clip-path:inset(0 0 0 0)} } .ndl{position:absolute;top:-2px;left:0;width:26px;height:5px;border-radius:3px;opacity:0;mix-blend-mode:screen; background:linear-gradient(90deg,transparent,rgba(255,253,244,.9));box-shadow:0 0 14px rgba(211,199,120,.9),0 0 30px rgba(211,199,120,.45)} /* 縫い針の光 */ .nsec.play .ndl{animation:nNeedle .58s linear .05s both} @keyframes nNeedle{0%{left:0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:calc(100% - 10px);opacity:0} } .nsec.play .nsec__tear{animation:nRest .8s ease 1.4s both} /* ちぎった後は痕として薄く残る */ @keyframes nRest{to{opacity:.35} } /* 切り取り＝罫より下（章の中身全部）が、毟られた半券として微回転で落ち着く */ .js .nsec>.ct{opacity:0} .nsec.play>.ct{animation:nTear 1.05s cubic-bezier(.2,.9,.25,1.08) .62s both;transform-origin:12% -60px} @keyframes nTear{0%{opacity:0;transform:rotate(-1.9deg) translateY(-26px)} 40%{opacity:1} 62%{transform:rotate(.7deg) translateY(4px)} 82%{transform:rotate(-.22deg) translateY(-1px)} 100%{opacity:1;transform:none} } /* 券の差し込み＝旧rvの差し込み回転を継承（切り取りが落ち着いてから・--i=札番） */ .js .nsec .tkt{opacity:0;transform:translateY(34px) rotate(1.6deg)} .nsec.play .tkt{animation:nTkt .9s var(--e) both;animation-delay:calc(1.15s + var(--i,0)*.1s)} @keyframes nTkt{to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){.ndl{display:none} .js .nsec>.ct,.js .nsec .tkt{opacity:1;animation:none;transform:none;filter:none} .js .stz{clip-path:none} .nsec__tear{opacity:.35} .nsec__tear::before,.nsec__tear::after{opacity:1;transition:none} } /* ============ HERO / REEL 01 ============ */ /* ============ v46 BEYOND THE SCREEN（2026-07-11） ============ Statementを「2本目のHero」から、Heroの見え方を壊すショット／リバースショットへ変更。 映画記号や光の装飾は足さず、完成映像の面を横切って“その先にいる人”側へ回り込む。 コピーは確定稿を一字も変えず、結論より先に社員・会社・まちの変化を見せる編集へ反転した。 JS変数：--sx=スクリーン移動(vw) --sr=Y回転(deg) --ss=接近 --so=面の残存 --amb=スクリーンから漏れる残光 --wf=証言の退場 --fo=映像面側の一文 */ .blk{position:relative;background:#050506} .blk__tall{height:360vh;position:relative} /* v46: 480vhの長い現像を撤去。離散した3カットで抜ける */ .blk__pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#050506;perspective:1400px;perspective-origin:50% 46%} .blk__pin .hero{position:absolute;inset:0;z-index:4;height:100%;min-height:0;transform-style:preserve-3d;backface-visibility:hidden; transform-origin:100% 50%;opacity:var(--so,1); transform:translate3d(calc(var(--sx,0)*1vw),0,0) rotateY(calc(var(--sr,0)*-1deg)) scale(calc(1 + var(--ss,0)*.08)); box-shadow:calc(var(--sr,0)*-.32px) 0 calc(var(--sr,0)*1.1px) rgba(211,199,120,calc(var(--sr,0)*.004)),calc(var(--sr,0)*-.15px) 0 calc(var(--sr,0)*.45px) rgba(0,0,0,.82)} .blk__pin .hero::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;border-left:1px solid rgba(246,242,233,calc(var(--sr,0)*.009)); background:linear-gradient(90deg,rgba(255,253,244,calc(var(--sr,0)*.0018)),transparent 7%)} /* スクリーンの厚みは線一本。額縁にはしない */ .blk__pin .hero__vid{filter:saturate(calc(1.05 - var(--ss,0)*.18)) contrast(1.05) brightness(calc(.82 - var(--ss,0)*.18));transform:scale(1.06)} .blk__void{position:absolute;inset:0;z-index:2;background: radial-gradient(ellipse 58% 86% at 96% 50%,rgba(211,199,120,calc(var(--amb,0)*.075)),transparent 63%), radial-gradient(ellipse 44% 52% at 72% 50%,rgba(126,38,54,calc(var(--amb,0)*.09)),transparent 72%),#050506} .blk__void::after{content:"";position:absolute;right:-6vw;top:0;width:24vw;height:100%;opacity:var(--amb,0);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(246,242,233,.035) 78%,rgba(211,199,120,.1));filter:blur(16px)} /* 一文をスクリーンの表裏に分ける。文そのものが映像の境界を越える */ .blk__onscreen{position:absolute;z-index:7;left:clamp(28px,7.5vw,120px);bottom:clamp(72px,12svh,128px);margin:0; font-family:var(--serif);font-weight:600;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.8;letter-spacing:.11em;color:rgba(246,242,233,.86); opacity:var(--fo,0);transform:translateX(calc((1 - var(--fo,0))*-18px));text-shadow:0 2px 22px rgba(0,0,0,.75)} .blk__beyond{position:absolute;left:clamp(32px,8vw,128px);top:clamp(92px,17svh,162px);margin:0; font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,2.25vw,2.2rem);line-height:1.75;letter-spacing:.12em;color:var(--bone); opacity:calc(var(--o,0)*(1 - var(--wf,0)));transform:translate3d(calc((1 - var(--o,0))*28px),0,0);clip-path:inset(0 calc((1 - var(--o,0))*100%) 0 0)} .blk__reduce-lead{display:none} .blk__witnesses{position:absolute;inset:0;font-family:var(--serif);font-weight:600;color:rgba(246,242,233,.7);letter-spacing:.09em} .blk__witness{position:absolute;margin:0;max-width:34em;font-size:clamp(.92rem,1.16vw,1.08rem);line-height:2; opacity:calc(var(--o,0)*(1 - var(--wf,0)));transform:translate3d(calc((1 - var(--o,0))*22px),0,0)} .blk__witness::before{content:"";display:inline-block;width:clamp(30px,4vw,62px);height:1px;margin-right:1.15em;vertical-align:.34em; background:linear-gradient(90deg,rgba(211,199,120,.82),rgba(211,199,120,.08));transform:scaleX(var(--o,0));transform-origin:0 50%} .blk__witness--1{left:clamp(32px,8vw,128px);top:37%} .blk__witness--2{left:clamp(70px,18vw,300px);top:51%} .blk__witness--3{left:clamp(42px,11vw,174px);top:65%} /* 結論は証言の後に一度だけ定着。中央ポスターをやめ、スクリーンが退いた余白を組版にする */ .blk__msg{position:absolute;inset:0;z-index:6;pointer-events:none;padding:clamp(86px,14svh,132px) clamp(28px,7.5vw,120px) clamp(54px,8svh,88px);padding-left:max(clamp(28px,7.5vw,120px),var(--gnav-safe))} .blk__msg [data-stm]{opacity:var(--o,0)} .blk__eb{display:block;color:rgba(246,242,233,.42);letter-spacing:.34em;transform:translateX(calc((1 - var(--o,0))*-18px))} .blk__ttl{margin:clamp(38px,7svh,72px) 0 0;max-width:88vw;font-family:var(--serif);font-weight:600;line-height:1.45;letter-spacing:.105em;color:var(--bone);text-align:left; clip-path:inset(0 calc((1 - var(--o,0))*100%) 0 0);transform:translateX(calc((1 - var(--o,0))*-24px));text-shadow:0 1px 26px rgba(0,0,0,.55)} .blk__ttl-pre{display:block;font-size:clamp(1.25rem,2.15vw,2.1rem);color:rgba(246,242,233,.68)} .blk__ttl-main{display:block;margin-top:.45em;font-size:clamp(2.15rem,4.55vw,4.75rem);white-space:nowrap} .blk__body{position:absolute;left:max(clamp(28px,7.5vw,120px),var(--gnav-safe));bottom:calc(clamp(54px,9svh,94px) + 200px);max-width:34em;margin:0;/* v65.14: 左端も安全域準拠（他コンテンツと揃え・上のpadding-leftと同式） */ font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,1.02vw,.98rem);line-height:2.35;letter-spacing:.085em;color:rgba(246,242,233,.69);text-align:left} .blk__body p{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*14px));text-shadow:0 1px 16px rgba(0,0,0,.7)} .blk__sig{margin-top:1.25em;font-family:var(--en);font-weight:600;font-size:.82em;letter-spacing:.26em;color:rgba(246,242,233,.52)} .blk__seal{display:inline-grid;place-items:center;width:1.8em;height:1.8em;margin-left:1em;vertical-align:-.4em;background:none;color:rgba(246,242,233,.66); font-family:var(--serif);font-weight:700;font-size:.78em;letter-spacing:0;border:1px solid rgba(246,242,233,.32);border-radius:2px} @media(max-width:820px){ .blk__pin{perspective:900px} .blk__pin .hero{transform:translate3d(calc(var(--sx,0)*1.18vw),0,0) rotateY(calc(var(--sr,0)*-.72deg)) scale(calc(1 + var(--ss,0)*.05))} .blk__onscreen{left:7vw;bottom:12svh;max-width:72vw;font-size:.92rem;line-height:1.85} .blk__beyond{left:7vw;right:7vw;top:16svh;font-size:clamp(1.15rem,5vw,1.55rem)} .blk__witness{left:7vw;right:7vw;max-width:none;font-size:.9rem;line-height:1.85} .blk__witness--1{top:35%} .blk__witness--2{top:49%} .blk__witness--3{top:63%} .blk__msg{padding:14svh 7vw 7svh} .blk__ttl{margin-top:calc(6svh + 40px);max-width:93vw;line-height:1.48} .blk__ttl-pre{font-size:clamp(1rem,4.7vw,1.3rem)} .blk__ttl-main{font-size:clamp(1.75rem,7.8vw,2.55rem);white-space:normal} .blk__body{left:7vw;right:7vw;bottom:calc(7svh + 60px);max-width:none;font-size:.88rem;line-height:2.05} .blk__pin .hero::after{border-left:0;background:none} } @media(max-height:700px) and (min-width:821px){ .blk__msg{padding-top:12svh} .blk__ttl{margin-top:4svh} .blk__ttl-main{font-size:min(4.2vw,3.35rem)} .blk__body{bottom:6svh;line-height:1.95;font-size:.86rem} .blk__sig{margin-top:.8em} } /* reduced-motion＝Heroの次に「向こう側」と結論を静的な二章で置く。情報は一つも消さない */ @media (prefers-reduced-motion:reduce){ .blk__tall{height:auto} .blk__pin{position:relative;height:auto;overflow:visible;perspective:none} .blk__pin .hero{position:relative;inset:auto;height:100svh;min-height:640px;opacity:1;transform:none;box-shadow:none} .blk__onscreen,.blk__beyond{display:none} .blk__void{position:relative;inset:auto;min-height:auto;padding:clamp(5rem,12vw,8rem) clamp(24px,8vw,120px);background:#050506} .blk__void::after{display:none} .blk__reduce-lead{display:block;margin:0 0 3.5em;font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,3vw,2.2rem);line-height:1.8;letter-spacing:.1em;color:var(--bone)} .blk__witnesses{position:static} .blk__witness{position:static;max-width:none;margin-top:1.8em;opacity:1;transform:none} .blk__witness::before{transform:none} .blk__msg{position:relative;inset:auto;min-height:72svh;padding:clamp(5rem,12vw,8rem) clamp(24px,8vw,120px)} .blk__msg [data-stm],.blk__body p{opacity:1;transform:none} .blk__ttl{clip-path:none;transform:none} .blk__body{position:static;max-width:34em;margin:4rem 0 0 auto} .blk__ttl-main{white-space:normal} } /* JSが無効、またはメイン初期化が完走しなかった時も本文を消さない。 headのno-js切替だけでは「途中失敗」を救えないため、末尾でjs-readyが立つまで静的完成形を維持する。 */ .no-js .blk__tall,.js:not(.js-ready) .blk__tall{height:auto} .no-js .blk__pin,.js:not(.js-ready) .blk__pin{position:relative;height:auto;overflow:visible;perspective:none} .no-js .blk__pin .hero,.js:not(.js-ready) .blk__pin .hero{position:relative;inset:auto;height:100svh;min-height:640px;opacity:1!important;transform:none!important;box-shadow:none} .no-js .blk__onscreen,.no-js .blk__beyond,.js:not(.js-ready) .blk__onscreen,.js:not(.js-ready) .blk__beyond{display:none} .no-js .blk__void,.js:not(.js-ready) .blk__void{position:relative;inset:auto;min-height:auto;padding:clamp(5rem,12vw,8rem) clamp(24px,8vw,120px);background:#050506} .no-js .blk__void::after,.js:not(.js-ready) .blk__void::after{display:none} .no-js .blk__reduce-lead,.js:not(.js-ready) .blk__reduce-lead{display:block;margin:0 0 3.5em;font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,3vw,2.2rem);line-height:1.8;letter-spacing:.1em;color:var(--bone)} .no-js .blk__witnesses,.js:not(.js-ready) .blk__witnesses{position:static} .no-js .blk__witness,.js:not(.js-ready) .blk__witness{position:static;max-width:none;margin-top:1.8em;opacity:1!important;transform:none!important} .no-js .blk__witness::before,.js:not(.js-ready) .blk__witness::before{transform:none} .no-js .blk__msg,.js:not(.js-ready) .blk__msg{position:relative;inset:auto;min-height:72svh;padding:clamp(5rem,12vw,8rem) clamp(24px,8vw,120px)} .no-js .blk__msg [data-stm],.no-js .blk__body p,.js:not(.js-ready) .blk__msg [data-stm],.js:not(.js-ready) .blk__body p{opacity:1!important;transform:none!important} .no-js .blk__ttl,.js:not(.js-ready) .blk__ttl{clip-path:none;transform:none} .no-js .blk__body,.js:not(.js-ready) .blk__body{position:static;max-width:34em;margin:4rem 0 0 auto} .no-js .blk__ttl-main,.js:not(.js-ready) .blk__ttl-main{white-space:normal} .hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000} .hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;filter:saturate(1.05) contrast(1.05) brightness(.82);transform:scale(1.06)} .hero__grade{position:absolute;inset:0;background: radial-gradient(60% 55% at 20% 78%,rgba(126,38,54,.34),transparent 60%), radial-gradient(60% 55% at 85% 20%,rgba(44,108,124,.30),transparent 60%), linear-gradient(180deg,rgba(6,6,8,.42) 0%,transparent 30%,rgba(6,6,8,.55) 78%,rgba(10,10,13,.96) 100%)} .hero__grain{position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");opacity:.14;mix-blend-mode:overlay;animation:grain 5s steps(5) infinite;pointer-events:none} @keyframes grain{0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-2%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(2%,3%)} 100%{transform:translate(0,0)} } .hero__spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,45%),rgba(211,199,120,.14),rgba(72,174,198,.06) 34%,transparent 62%);pointer-events:none} /* 縦書きコピーが左に立つため、説明（eyebrow/サブ/ボタン）は右下へ＝ポスターのクレジット位置 */ .hero__in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding-bottom:clamp(3rem,8vh,6rem);padding-right:clamp(3.5rem,7vw,7rem)} .hero__kick{display:flex;align-items:center;gap:1em;margin-bottom:1.6rem;flex-direction:row-reverse} .hero__kick .ln{width:54px;height:1px;background:var(--olive-lit)} /* コピー＝日本映画のポスターの型：明朝の縦書き2列。画面の左に静かに立てる */ /* height:max-content＝内容ぶんの高さを確保し、画面が低くても列が勝手に折り返さない（文字崩れ防止） */ /* 字間.06em＝開演アニメの最終値と同じ。白ステートメントの縦書き見出しとも揃える（縦書き明朝の共通仕様） */ .hero__ttl{position:absolute;left:max(clamp(24px,7vw,110px),var(--gnav-safe));top:50%;transform:translateY(-52%);z-index:3;writing-mode:vertical-rl;text-align:left;height:max-content;font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.4rem);font-weight:800;line-height:1;letter-spacing:.06em;text-shadow:0 2px 50px rgba(0,0,0,.55)} .hero__ttl .vln{display:block;white-space:nowrap;padding-left:clamp(.55em,1.3vw,.9em)} /* nowrap＝列内の折返し禁止 */ .hero__ttl .vln:nth-child(2){padding-top:1.7em} /* 雁行＝二列目を一段下げる（ポスターの組み） */ .hero__ttl .accent{color:var(--bone)} @media(max-width:720px){ .hero__ttl{font-size:clamp(1.35rem,5.6vw,1.8rem);top:39%} .hero__kick .eyebrow{font-size:.56rem;letter-spacing:.2em;white-space:nowrap} /* 縦書きコピーと交差しないよう1行に畳む */ .hero__kick .ln{width:26px} } /* サブコピー＝詩の3行。明朝・行固定で余白ごと組む */ .hero__sub{margin-top:1.9rem;font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,1.4vw,1.06rem);color:var(--dim);line-height:2.3;letter-spacing:.08em} .hero__act{display:flex;gap:2.6rem;flex-wrap:wrap;margin-top:2.2rem;justify-content:flex-end;align-items:center} /* ヒーローの誘導＝ボタンでなく「ライン・リンク」。映像の上に置くのは線と文字だけ */ .lnk{display:inline-flex;align-items:center;gap:.8em;font-family:var(--en);font-weight:600;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);padding:.5em 0;position:relative} .lnk::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35;transform-origin:left;transition:opacity .5s,transform .5s var(--e)} .lnk:hover::after{opacity:1;transform:scaleX(1)} .lnk:hover{color:var(--olive-lit)} .lnk--gold{color:var(--olive-lit)} .lnk--wine{color:var(--wine-lit)} .lnk--teal{color:var(--teal-lit)} /* 拠点リンクのホバー＝金に変えず「自分の色のまま、静かに光る」（明度アップ+自色の柔らかいハロー） */ .lnk--wine:hover{color:var(--wine-lit);filter:brightness(1.22);text-shadow:0 0 14px rgba(193,60,85,.55)} .lnk--teal:hover{color:var(--teal-lit);filter:brightness(1.22);text-shadow:0 0 14px rgba(72,174,198,.55)} .lnk .ar{transition:transform .5s var(--e)} .lnk:hover .ar{transform:translateX(6px)} /* 右レール NOW SHOWING */ .hero__rail{position:absolute;top:clamp(120px,17svh,170px);right:clamp(18px,4vw,44px);z-index:3;display:flex;align-items:flex-start;gap:1em;writing-mode:vertical-rl} .hero__rail .dot{width:7px;height:7px;border-radius:50%;background:var(--wine-lit);box-shadow:0 0 14px var(--wine-lit);animation:blink 1.6s infinite} @keyframes blink{50%{opacity:.25} } .hero__rail .lb{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim)} @media(max-width:720px){ .hero__rail{display:none} } .hero__scroll{position:absolute;left:clamp(20px,5vw,60px);bottom:1.8rem;z-index:3;font-family:var(--en);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);display:flex;align-items:center;gap:.9em} .hero__scroll .bar{width:44px;height:1px;background:var(--line-d);position:relative;overflow:hidden} .hero__scroll .bar::after{content:"";position:absolute;left:-40%;top:0;height:100%;width:40%;background:var(--olive-lit);animation:cue 2.4s var(--e) infinite} @keyframes cue{to{left:110%} } .hero__mute{position:absolute;right:clamp(20px,5vw,60px);bottom:1.8rem;z-index:4;display:flex;align-items:center;gap:.6em;background:rgba(6,6,8,.4);border:1px solid var(--line-d);color:var(--dim);font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:.55em 1em;border-radius:2px;cursor:pointer;backdrop-filter:blur(6px);transition:.4s} .hero__mute:hover{color:var(--bone);border-color:var(--olive-lit)} @media(max-width:720px){ .hero__mute{right:16px} } .hero__nws{position:absolute;left:50%;translate:-50% 0;bottom:1.95rem;z-index:3;display:flex;align-items:center;gap:.85em;max-width:min(44vw,540px);color:inherit;text-decoration:none} .hero__nws .d{flex:none;width:7px;height:7px;border-radius:50%;background:var(--wine-lit);box-shadow:0 0 10px var(--wine-lit);animation:blink 2.6s steps(1) infinite} /* 上映中ランプの明滅＝RECと同じ語彙 */ .hero__nws .dt{flex:none;font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.18em;color:var(--ash);font-variant-numeric:tabular-nums} .hero__nws .t{font-family:var(--serif);font-weight:600;font-size:.8rem;letter-spacing:.05em;color:rgba(246,242,233,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;padding-bottom:2px;transition:color .4s} .hero__nws .t::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--olive-lit);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)} .hero__nws:hover .t{color:var(--bone)} .hero__nws:hover .t::after{transform:none} @media(max-width:940px){ .hero__nws{display:none} } /* 下端の帯が狭い幅では出さない（News章とNewsページが受ける） */ /* ============ 白 STATEMENT ============ 単調だった一枚テキストを編集的に： ①見出しは行ごとに「窓」から立ち上がるマスクリビール ②紙面の奥に巨大なゴースト輪郭文字（Story）で奥行き ③見出し左上にwineのL字＝フィルムフレームの角 ④本文の結びに署名 */ .light{background:var(--bone);color:var(--ink);position:relative;overflow:hidden} .light .eyebrow{color:var(--wine)} /* 紙の質感：ごく薄い紙目（映写のノイズと対になる、印刷物の肌） */ .light::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:multiply;pointer-events:none} @media(pointer:coarse){ .light::after{display:none} } /* トンボ＝印刷の版面マーク。四隅に極細のL字（この紙面が「刷り物」であることの気配） */ .light__tp{position:absolute;width:16px;height:16px;pointer-events:none;border:0 solid rgba(10,10,13,.3);z-index:3} .light__tp.tl{left:clamp(14px,2.2vw,26px);top:clamp(14px,2.2vw,26px);border-left-width:1px;border-top-width:1px} .light__tp.tr{right:clamp(14px,2.2vw,26px);top:clamp(14px,2.2vw,26px);border-right-width:1px;border-top-width:1px} .light__tp.bl{left:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);border-left-width:1px;border-bottom-width:1px} .light__tp.br{right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);border-right-width:1px;border-bottom-width:1px} /* ノンブル（ページ番号）＝右下に静かに */ .light__pg{position:absolute;right:clamp(20px,5vw,60px);bottom:clamp(14px,2.2vw,26px);font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(10,10,13,.42);z-index:3} /* ============ WORKS = SCREENING ROOM ============ */ .stage{position:relative;background:var(--ink)} .stage__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3.4rem)} /* セクション見出しの共通型＝eyebrow（英ラベル）＋明朝の日本語見出し。全セクションでこの一つの型に統一 */ .stage__ttl{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.6;letter-spacing:.04em;margin-top:.9rem} .stage__lead{color:var(--dim);max-width:32ch;font-size:.92rem;text-wrap:balance} /* balance＝末尾に一文字だけ残る醜い折返しを防ぐ */ /* ============ v15: 開演のカメラ（Reel 03の序章） ============ シネマカメラの超繊細線画。①レンズのリング群が波紋のように内から外へ広がって生まれ、 遅れてボディの輪郭が描かれる ②回転しながらズームイン（クロスフェード併用） ③背面の モニターに実映像（埋め込み動画）が浮かぶ ④以降はモニターへ没入し続け、巨大化した映像の まま次のセクション（同じ代表作カード）へマッチカット＝フェードアウトはしない。 実機（箱型シネマカメラ）を研究した造形だが、ブランドを特定できる要素（ロゴ・型番・色）は持たせない */ .cam__tall{height:320vh} .cam__pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden} /* transform-origin＝モニターの「見かけ」中心（43.79% 50%）。背面は面の反転×箱の反転＝二重ミラーで 見かけ中心が仕込み(41.63%)より+2.17%右に出る（実測較正 2026-07-07）。ズームは常にこの点へ沈む */ .cam__scene{position:relative;width:min(78vw,780px);aspect-ratio:920/620;max-height:74svh;opacity:0; transform-origin:43.79% 50%;will-change:transform} /* 序章の背景＝黒に近いネイビー×ワインレッドのスモーク・グラデーション＋モニターへのスポットライト。 レンズ誕生〜回転の間だけ灯り（JSがopacity駆動）、没入が始まると黒へ返して映像を主役にする */ .cam__bg{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden} .cam__bg::before{content:'';position:absolute;inset:-22%; background:radial-gradient(60% 80% at 18% 30%,rgba(15,21,44,.9),transparent 62%), radial-gradient(70% 90% at 82% 76%,rgba(126,38,54,.5),transparent 64%), radial-gradient(50% 70% at 72% 18%,rgba(17,25,52,.62),transparent 66%); filter:blur(46px);animation:camSmoke 24s ease-in-out infinite alternate} .cam__bg::after{content:'';position:absolute;inset:-28%; background:radial-gradient(55% 75% at 30% 72%,rgba(126,38,54,.34),transparent 60%), radial-gradient(46% 62% at 76% 38%,rgba(20,28,58,.55),transparent 62%); filter:blur(56px);animation:camSmoke2 31s ease-in-out infinite alternate} @keyframes camSmoke{0%{transform:translate(-3%,-2%) rotate(0deg) scale(1)} 100%{transform:translate(3%,3.5%) rotate(4deg) scale(1.1)} } @keyframes camSmoke2{0%{transform:translate(3%,2%) scale(1.06)} 100%{transform:translate(-3.5%,-2.5%) scale(1)} } .cam__spot{position:absolute;inset:0;display:block; background:radial-gradient(36% 50% at 47.5% 50%,rgba(246,242,233,.11),rgba(246,242,233,.04) 46%,transparent 72%); animation:camBreathe 7s ease-in-out infinite} @keyframes camBreathe{0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} } /* 本物の3Dボックス：共有パースの下で3面（前・側・背）を実寸で箱に組み、箱ごと回す。 面を個別に回すとバラバラに見える（v15.2の反省）＝perspective-originとpreserve-3dの共有が一体感の正体 */ .cam__persp{position:absolute;inset:0;perspective:1600px;perspective-origin:51.087% 50%} .cam3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:51.087% 50%} /* 回転軸＝ボディ中心（x=470/920） */ /* 遮蔽＝ボディの「形」にだけ下地(.bgf)を敷く。面全体を不透明にすると余白まで他面を隠す（v15.3-4の実測） v15.6：筐体は半透明ブラック（透明度75%＝不透明度25%）。形ごとにfill-opacityを掛けると重なり部分が濃く出るため、 面単位の.bgfgグループにopacityを掛けて一枚のスモークガラスとして透かす */ .cam__face{position:absolute;inset:0;backface-visibility:hidden} .cam__face svg .bgf{fill:var(--ink);stroke:none} .cam__face svg .bgfg{opacity:calc(var(--cd,0)*.25 + var(--sold,0)*.22)} .cam__face svg .tds{opacity:calc(1 - var(--sold,0))} /* v32.2: 上部突起の線画＝固体化とともに3D小箱（.cam__s3）へ交代 */ .cam__front svg .fR.tds{opacity:calc(var(--cd,0)*(1 - var(--sold,0)))} /* REC赤＝描画で現れ、固体化で3D側へ引き継ぐ */ /* v32.2 上部突起の3D化（シュー/デッキの小箱）＋角の丸みの実体（コーナーポスト）。--s3v=固体化×畳み（JSが配給） */ .cam__s3{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none} .cam__mp{position:absolute;opacity:calc(var(--s3v,0)*.5);background:linear-gradient(180deg,#14151c,#0d0e13); /* v39: スモーク同調 */ box-shadow:inset 0 0 0 1px rgba(246,242,233,.13),inset 0 1px 0 rgba(246,242,233,.10)} .cam__mp.s{transform-origin:0 50%;background:linear-gradient(180deg,#0e0f14,#090a0e)} /* 側面＝光が回らない */ .cam__mp.t{box-shadow:inset 0 0 0 1px rgba(246,242,233,.16)} /* 天面＝縁がわずかに立つ */ .cam__cnr{position:absolute;opacity:calc(var(--s3v,0)*.5)} /* 角の1/4円柱の細板（色はJSが角度で配る）。v39: スモーク同調 */ .cam__barrel{position:absolute;left:54.130%;top:50.323%;width:0;height:0;transform-style:preserve-3d} .cam__barrel>*{opacity:var(--brl,0)} .cam__strip{position:absolute;top:0;transform-origin:50% 0; background:linear-gradient(180deg,rgba(255,253,244,.10),rgba(255,253,244,0) 22%),var(--sc,#15161b)} .cam__strip::after{content:"";position:absolute;inset:0;opacity:.5; background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 2px,transparent 2px 14px)} /* 鏡筒の溝リング */ .cam__rim{position:absolute;border-radius:50%;border:2px solid rgba(246,242,233,.5); box-shadow:inset 0 0 0 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.5)} /* フードの前端リム */ .cam__rim::before{content:"";position:absolute;inset:5%;border-radius:50%;border:1px solid rgba(211,199,120,.28)} .cam__glass{position:absolute;border-radius:50%; background: radial-gradient(7% 7% at 50% 50%,rgba(150,170,225,.35),rgba(18,22,38,.9) 60%,transparent 75%), radial-gradient(38% 38% at 36% 32%,rgba(120,150,210,.15),transparent 62%), radial-gradient(30% 30% at 66% 70%,rgba(211,199,120,.08),transparent 65%), repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.028) 0 1.5%,transparent 1.5% 7%), radial-gradient(closest-side,#1b2030 0%,#12141d 36%,#0a0b12 64%,#05060a 100%); box-shadow:inset 0 0 34px rgba(0,0,0,.85),inset 0 2px 10px rgba(255,255,255,.05)} /* 前玉＝深い硝子（瞳の反射・コーティング層の同心） */ .cam__glass::before{content:"";position:absolute;left:18%;top:12%;width:34%;height:20%;border-radius:50%; background:radial-gradient(closest-side,rgba(190,210,255,.20),transparent 70%);transform:rotate(-28deg)} /* 空の映り込み */ .cam__glass::after{content:"";position:absolute;left:56%;top:58%;width:16%;height:9%;border-radius:50%; background:radial-gradient(closest-side,rgba(211,199,120,.22),transparent 70%);transform:rotate(-24deg)} /* 金コーティングの返し */ /* v32.1 レンズ前面の段差リング（フォーカスリング/ステップダウン）＝正面のイラスト感を実体に置き換える */ .cam__lring{position:absolute;border-radius:50%;background:#14151b; box-shadow:inset 0 0 0 1px rgba(246,242,233,.10),inset 0 3px 8px rgba(255,255,255,.05),inset 0 -4px 10px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.45)} .cam__lring::before{content:"";position:absolute;inset:8%;border-radius:50%;background:#0b0c11; box-shadow:inset 0 1px 0 rgba(246,242,233,.07),inset 0 0 18px rgba(0,0,0,.8)} .cam__plate{position:absolute;opacity:calc(var(--sold,0)*.5);border-radius:12px; background:linear-gradient(90deg,#0c0d12,#15161d 30%,#191a22 50%,#14151c 72%,#0b0c10); box-shadow:inset 0 1px 0 rgba(246,242,233,.15),inset 0 -1px 0 rgba(246,242,233,.09),inset 0 0 26px rgba(0,0,0,.55)} .cam__plate.top{background: /* v39: FX3風のアクセサリーネジ穴列（文字なしの実機ディテール） */ radial-gradient(circle at 38% 50%,rgba(246,242,233,.22) 0 1.1%,transparent 2.4%), radial-gradient(circle at 46% 50%,rgba(246,242,233,.22) 0 1.1%,transparent 2.4%), radial-gradient(circle at 54% 50%,rgba(246,242,233,.22) 0 1.1%,transparent 2.4%), linear-gradient(90deg,#0c0d12,#15161d 30%,#191a22 50%,#14151c 72%,#0b0c10)} .cam__plate.bot{background:linear-gradient(90deg,#08090d,#0e0f14 40%,#101118 60%,#08090d); box-shadow:inset 0 1px 0 rgba(246,242,233,.08),inset 0 0 30px rgba(0,0,0,.7)} /* 底は暗く（光が回らない） */ .cam__gshadow{position:absolute;left:50%;bottom:5.5%;width:58%;height:7%;transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 72%);opacity:0;pointer-events:none} /* 接地影＝回転で伸縮 */ /* 箱の組み立て：前後面＝奥行き±110・側面＝幅方向+268（--d2/--w2はJSが描画実寸pxで毎フレーム設定） */ .cam__front{transform:translateZ(var(--d2,0px))} .cam__back{transform:rotateY(180deg) translateZ(var(--d2,0px))} .cam__side{transform:rotateY(90deg) translateZ(var(--w2,0px))} .cam__face svg{width:100%;height:100%;display:block} .cam__face svg *{fill:none;stroke-linecap:round;stroke-linejoin:round} /* 線の三階調＝主輪郭・部品・気配。細く・淡く・密に＝上質さは線の痩せで出す。金は映写光、wineはRECの赤 */ .cam__face svg .cA{stroke:rgba(246,242,233,.55);stroke-width:1.05} .cam__face svg .cB{stroke:rgba(246,242,233,.30);stroke-width:.65} .cam__face svg .cC{stroke:rgba(246,242,233,.14);stroke-width:.55} .cam__face svg .cG{stroke:rgba(211,199,120,.34);stroke-width:.8} .cam__face svg .fD{fill:rgba(246,242,233,.5);stroke:none} .cam__face svg .fT{fill:rgba(211,199,120,.5);stroke:none} .cam__face svg .fR{fill:rgba(193,60,85,.6);stroke:none} .cam__face svg .tlyd{fill:rgba(211,199,120,.22);stroke:none} .cam__face svg .nk{stroke:rgba(246,242,233,.18);stroke-dasharray:1.6 3.4} /* ローレット（刻み）はdash表現 */ /* ボディ＝--cd（0→1）で線が描かれる。レンズ＝.lz（内→外へ、1本ずつゆっくり「なぞって」描かれる＝JSがdashoffsetを順駆動） */ .cam__front svg .dr{stroke-dasharray:100;stroke-dashoffset:calc(100*(1 - var(--cd,0)))} /* 塗り（REC赤芯・タリー金・点）はdashが効かない＝--cdに連動して現れる（波紋期に浮かせない）。レンズ中心点(.lz)は波紋が管理 */ .cam__front svg .fT,.cam__front svg .fR,.cam__front svg .fD:not(.lz){opacity:var(--cd,0)} .cam__front svg .lz{opacity:0} .cam__front svg .lz:not(.nk){stroke-dasharray:100;stroke-dashoffset:100} /* ローレット(.nk)は刻みdashと衝突するためopacityのみで出す */ .cam__front svg .lzw{stroke:rgba(211,199,120,.3);stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0} /* 波紋の先導波 */ .cam__catch{position:absolute;top:50%;transform:translateY(-50%);margin:0;z-index:3; left:max(var(--gnav-safe),calc(50% - min(39vw,390px) - 4.5rem)); /* カメラの左肩のすぐ外＝大画面でも離れすぎない。v35: 最小値はハンバーガー安全域 */ writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.45rem); letter-spacing:.34em;line-height:2;color:rgba(246,242,233,.92);white-space:nowrap; opacity:0;filter:blur(6px);pointer-events:none} .cam__catch .g{color:var(--olive-lit)} .cam__mon{position:absolute;left:24.457%;top:35.242%;width:34.348%;height:29.516%} .mon__scr{position:absolute;inset:0;background:var(--ink);overflow:hidden} .mon__scr svg{position:absolute;inset:0;width:100%;height:100%} /* 枠＝映像を囲む直角フレーム。終盤にカメラの縁が消えた後、映像と共に最後まで残る主役。 v15.7：白一本線をやめ三層の額縁へ＝マットな黒ベゼル面＋映像窓すぐ外の金ヘアライン＋外縁の極細オフホワイト */ .mon__scr svg .mzB{fill:url(#monBz);stroke:none} /* ベゼル面（fill-rule:evenoddで映像窓をくり抜く） */ .mon__scr svg .mzG{stroke:rgba(211,199,120,.48);stroke-width:.55} /* 金ヘアライン＝ズーム終点で約1.4px */ .mon__scr svg .mzW{stroke:rgba(246,242,233,.30);stroke-width:.8} /* 外縁の気配 */ /* 画面（304x171＝正確に16:9）は白線の内側に上下左右均等の余白6で収まる */ .mon__img{position:absolute;left:1.899%;top:3.279%;width:96.203%;height:93.443%;object-fit:cover;opacity:0;filter:blur(9px);transform:scale(1.05);transition:opacity 1.2s var(--e),filter 1.2s var(--e),transform 1.2s var(--e)} .cam__scene.v-on .mon__img{opacity:.96;filter:blur(0);transform:scale(1)} /* ふわりと浮かび上がる（にじみ現像と同語彙） */ .mon__scr{transition:box-shadow 1.2s ease} .cam__scene.v-on .mon__scr{box-shadow:0 0 36px rgba(211,199,120,.10)} /* 没入後＝深い影の上に光だまり（スポットライトが当たっている気配）を足す */ .cam__scene.zin .mon__scr{box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 90px rgba(246,242,233,.07),0 0 34px rgba(211,199,120,.12)} /* 動く実映像＝埋め込み動画。画面が正確に16:9なので歪み・クロップなしでぴったり収まる。 iframe自体を1280x720で実体レイアウトし、scale縮小で嵌める＝プレイヤーが高解像度ストリームを選ぶ（低画質対策） */ .mon__vid{position:absolute;left:1.899%;top:3.279%;width:96.203%;height:93.443%;overflow:hidden;opacity:0;transition:opacity 1s ease .2s} .cam__scene.v-on .mon__vid{opacity:1} .mon__vid iframe{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;pointer-events:none;transform-origin:0 0} .mon__rec{position:absolute;left:8.5%;top:10.5%;display:flex;align-items:center;gap:.4em;font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.2em;color:rgba(246,242,233,.85);opacity:0;transition:opacity .5s ease} .mon__rec i{width:7px;height:7px;border-radius:50%;background:var(--wine-lit);box-shadow:0 0 8px rgba(193,60,85,.8);animation:camBlink 1.6s infinite} .cam__scene.rec-on .mon__rec{opacity:1} .cam__scene.rec-on .tlyd{fill:rgba(211,199,120,.95);filter:drop-shadow(0 0 4px rgba(211,199,120,.8));animation:camBlink 1.6s infinite} /* 背面タリーも灯る */ @keyframes camBlink{0%,54%{opacity:1} 55%,100%{opacity:.18} } .cam__cap{position:absolute;left:0;right:0;bottom:-2.2rem;display:flex;justify-content:space-between;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);transition:opacity .6s ease} .cam__cap .on-air{color:var(--wine-lit)} .cam__scene.zin .cam__cap{opacity:0} /* 没入が始まったらキャプションは退場 */ /* v15.7: 没入スポットライト＝線画の退場と反比例に、上からの柔らかな光が作品へ落ちる。 外側ラッパーをJSがopacity駆動し、光そのものは::before（camBreathe呼吸のopacityと衝突させない）。 mix-blend-mode:screen＝黒にだけ光が乗る＝映像を白く濁らせない */ .cam__spotz{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none} .cam__spotz::before{content:'';position:absolute;inset:0;mix-blend-mode:screen; background:radial-gradient(56% 44% at 50% -4%,rgba(246,242,233,.17),transparent 66%), linear-gradient(180deg,rgba(246,242,233,.055),rgba(246,242,233,.015) 46%,transparent 72%), radial-gradient(40% 54% at 50% 46%,rgba(246,242,233,.06),transparent 72%); animation:camBreathe 9s ease-in-out infinite} /* v15.7: 作品情報＝ズームが固定される頃、終点モニターの左下ににじみから定着。小さく・繊細に。 位置＝終点モニター（パネル高50svh・幅=50svh×316/183≒86.3svh）の左端に揃える。文言はWPで差し替え可能（本番はWPBakery属性出力） */ .cam__info{position:absolute;z-index:4;left:calc(50% - 43.17svh);top:calc(50% + 25svh + 2.1rem);max-width:min(52ch,76vw);opacity:0;pointer-events:none} .cam__info-eyebrow{display:block;font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--olive-lit);margin-bottom:.55rem} .cam__info-ttl{margin:0 0 .4rem;font-family:var(--serif);font-weight:600;font-size:.98rem;letter-spacing:.06em;color:rgba(246,242,233,.94)} .cam__info-desc{margin:0;font-family:var(--jp);font-weight:400;font-size:.7rem;letter-spacing:.05em;line-height:1.9;color:var(--dim)} /* 和文本文＝--jp（--enだと和文がフォールバック任せ＝三権分立違反） */ .cam__info-desc .m{display:block;color:var(--ash);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.35rem} .cam__info-go{margin:1rem 0 0;font-size:.78rem} /* 作品詳細への導線（v16.1）＝情報の続きに静かに置く */ /* v15.7: 再生ボタン＝終点のモニター中心（＝画面中心・実測較正済み）。細いリング＋金のパルス。ズーム完了後だけ現れる */ .cam__play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;padding:0; border:1px solid rgba(246,242,233,.55);background:rgba(10,10,13,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:border-color .4s,background .4s} .cam__play svg{width:22px;height:22px;fill:rgba(246,242,233,.9);transform:translateX(2px);transition:fill .4s,transform .4s var(--e)} .cam__play::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(211,199,120,.4);animation:camPulse 3.2s ease-out infinite} @keyframes camPulse{0%{transform:scale(1);opacity:.7} 70%,100%{transform:scale(1.55);opacity:0} } .cam__play:hover{border-color:rgba(211,199,120,.85);background:rgba(10,10,13,.55)} .cam__play:hover svg{fill:var(--olive-lit);transform:translateX(2px) scale(1.12)} /* v15.7: フルスクリーン・モーダル＝再生ボタンから、ふわっと浮かぶ上映室。音あり・コントロールあり */ .cam__modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .55s var(--e),visibility 0s linear .55s} /* ヘッダー(z400)より上＝上映中はナビも沈む */ .cam__modal.on{opacity:1;visibility:visible;transition:opacity .55s var(--e)} .cam__modal-bg{position:absolute;inset:0;background:rgba(6,6,9,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer} .cam__modal-box{position:relative;width:min(88vw,calc((100svh - 10rem)*1.7778));margin:0} /* ✕（上2.7rem）とキャプション（下）込みで必ず画面内に収まる高さ */ .cam__modal-player{position:relative;aspect-ratio:16/9;background:#000;outline:1px solid rgba(211,199,120,.35);outline-offset:-1px; box-shadow:0 40px 140px rgba(0,0,0,.8),0 0 60px rgba(246,242,233,.05); transform:translateY(14px) scale(.97);filter:blur(6px);transition:transform .65s var(--e),filter .65s var(--e)} .cam__modal.on .cam__modal-player{transform:none;filter:blur(0)} .cam__modal-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .cam__modal-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem; font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)} .cam__modal-links{display:flex;gap:1.8rem;align-items:baseline;white-space:nowrap} .cam__modal-more{color:var(--olive-lit);text-decoration:none;display:inline-flex;align-items:center;gap:.5em} .cam__modal-more .ar{transition:transform .3s var(--e)} .cam__modal-more:hover .ar{transform:translateX(4px)} .cam__modal-x{position:absolute;right:0;top:-2.7rem;width:32px;height:32px;border:0;background:none;padding:6px;cursor:pointer;color:rgba(246,242,233,.7);transition:color .3s,transform .5s var(--e)} .cam__modal-x svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1.2;fill:none} .cam__modal-x:hover{color:var(--olive-lit);transform:rotate(90deg)} @media(max-width:860px){ .cam__scene{width:min(92vw,560px)} .cam__tall{height:260vh} .cam__catch{left:max(var(--gnav-safe),calc(50% - min(46vw,280px) - 2.6rem));font-size:1rem} .cam__info-ttl{font-size:.9rem} .cam__modal-box{width:min(94vw,calc((100svh - 10rem)*1.7778))} } /* 縦向き画面＝ズーム上限がモニター幅80vw基準に変わる（v15.5）ため、作品情報の座標も幅基準へ */ @media(orientation:portrait){ .cam__info{left:10vw;top:calc(50% + 23.2vw + 1.4rem)} } @media (prefers-reduced-motion:reduce){ .cam__tall{height:auto} .cam__pin{position:static;height:auto;padding:clamp(3rem,7vw,5rem) 0} .cam__scene{opacity:1} .cam__front,.cam__side,.cam__barrel,.cam__gshadow,.cam__plate,.cam__s3{display:none} /* 静的＝背面＋モニターの完成形だけ見せる（動画は差さない・v32鏡筒/蓋/小箱/接地影も不要） */ .cam3d{transform:none} .cam__back{transform:none} .cam__catch{opacity:1;filter:none} .cam__bg,.cam__spotz{display:none} /* スモーク・スポットライトは動きを減らす設定では出さない */ .cam__info,.cam__play{opacity:1;pointer-events:auto} /* 静的完成形＝作品情報と再生ボタンは常設（モーダルは明示クリック＝動作する） */ .cam__play::after{animation:none} .cam__modal,.cam__modal-player{transition:none} } /* film card (hover→再生)。旧featured帯（.feat）はv15.8で削除済み＝git履歴のarticle.featを参照 */ .film{position:absolute;inset:0;overflow:hidden;background:var(--ink-2)} .film__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e),opacity .6s;filter:brightness(.86)} .film:hover .film__img{transform:scale(1.06)} .film__vid{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease .1s} .film__vid.on{opacity:1} /* 16:9動画をコンテナ基準で「はみ出しゼロの最小カバー」にする（vh/vw基準だと小さな窓で見切れる） */ .film__vid iframe{position:absolute;top:50%;left:50%;width:111.2%;height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none} /* 16:10カード用（横だけ5.5%ずつクロップ） */ /* v52: .wgrid（16:9カード用iframe補正）は本体撤去に伴い削除 */ .film__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,6,8,.15) 0%,transparent 34%,rgba(6,6,8,.86) 100%);transition:opacity .5s} .film:hover .film__scrim{opacity:.72} .film__lume{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .6s var(--e);mix-blend-mode:screen;background:radial-gradient(120% 90% at 50% 26%,rgba(211,199,120,.20),transparent 60%);pointer-events:none} .film:hover .film__lume,.film.is-lit .film__lume{opacity:1} .film__frame{position:absolute;inset:0;z-index:3;border:1px solid transparent;transition:border-color .6s var(--e);pointer-events:none} .film:hover .film__frame,.film.is-lit .film__frame{border-color:rgba(211,199,120,.42)} .film__body{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:clamp(1rem,2.6vw,2rem);transition:transform .7s var(--e)} .film:hover .film__body{transform:translateY(-5px)} .film__meta{display:flex;gap:1em;align-items:center;font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7em;flex-wrap:wrap} .film__cat{color:var(--olive-lit)} .film__cl{color:var(--dim)} .film__yr{color:var(--ash)} .film__ttl{font-size:clamp(1.1rem,2vw,1.55rem);font-weight:700;line-height:1.4;text-wrap:balance} /* v15.9: 再生ボタン＝ホバーで現れ、クリックでフルスクリーン・モーダル上映（開演のカメラの再生ボタンと同語彙）。 インライン再生はミュートの「予告」のまま＝ボタンが「ちゃんと観る」への入口。 ボタンはa.film（作品詳細へのリンク）の外・article直下に置く（インタラクティブ要素の入れ子は不可）＝JSが全カードへ注入 */ .film__play{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:4;width:58px;height:58px;padding:0;display:grid;place-items:center; border:1px solid rgba(246,242,233,.55);border-radius:50%;background:rgba(10,10,13,.34);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); cursor:pointer;opacity:0;scale:.86;pointer-events:none;transition:opacity .45s ease,scale .45s var(--e),border-color .3s,background .3s} .film__play svg{width:17px;height:17px;fill:rgba(246,242,233,.92);transform:translateX(1.5px);transition:fill .3s} .film__play::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(211,199,120,.4);animation:camPulse 3.2s ease-out infinite} .film:hover .film__play,.film.is-lit .film__play{opacity:1;scale:1;pointer-events:auto} .film__play:hover{border-color:rgba(211,199,120,.85);background:rgba(10,10,13,.6)} .film__play:hover svg{fill:var(--olive-lit)} /* v16.1: 「作品詳細 →」＝カード全体クリック（詳細遷移）の可視化。ホバーでタイトルの下にふわりと現れる（JSが注入） */ .film__more{display:inline-flex;align-items:center;gap:.55em;margin-top:.9em;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--olive-lit);white-space:nowrap;position:relative;transform-origin:left center; opacity:0;transform:translateY(6px);transition:opacity .45s ease .06s,transform .5s var(--e) .06s,color .3s,text-shadow .3s} .film__more .ar{transition:transform .3s var(--e)} .film:hover .film__more,.film.is-lit .film__more{opacity:1;transform:none} a.film:hover .film__more .ar{transform:translateX(4px)} .film__more::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--olive-lit);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)} .film .film__more:hover{transform:scale(1.16);color:#EDE3AC;text-shadow:0 0 16px rgba(211,199,120,.6)} .film .film__more:hover::after{transform:scaleX(1)} .film .film__more:hover .ar{transform:translateX(5px)} .film__badge{position:absolute;top:clamp(1rem,2vw,1.4rem);left:clamp(1rem,2vw,1.4rem);z-index:3;display:none;align-items:center;gap:.5em;font-family:var(--en);font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:rgba(126,38,54,.7);padding:.4em .8em;border-radius:2px;backdrop-filter:blur(4px)} .film__badge .d{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s infinite} .film__vid.on ~ .film__badge{display:flex} /* reel: 横スクロール */ .reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,38%);gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.4rem;margin-inline:calc(-1*clamp(20px,5vw,60px));padding-inline:clamp(20px,5vw,60px);scrollbar-width:thin;scrollbar-color:var(--ash-dim) transparent} .reel::-webkit-scrollbar{height:5px} .reel::-webkit-scrollbar-thumb{background:var(--ash-dim);border-radius:10px} /* v16.2根治: 「.reel .film」だと外側article.filmと内側a.film（同じ.filmクラス）の両方に当たり、 a.filmのposition:absolute;inset:0がrelative(inline)に潰れて0x0＝サムネ・タイトル・作品詳細が全て不可視だった（v13からの潜伏バグ） */ .reel article.film{position:relative;aspect-ratio:16/10;scroll-snap-align:start;border-radius:2px} @media(max-width:600px){ .reel{grid-auto-columns:82%} } /* INDEX = call sheet + sticky preview */ /* v28: 章の看板＝巨大な「WORKS」抜き文字。ホバー中の作品の映像が文字の中を満たす（作品自身がタイトルを塗る） */ /* Film Index：左=一覧リスト／右=プレビュー。右カラムを主役に（v28→v43で右端フルブリード） */ .index{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,3vw,3.4rem);margin-top:clamp(2.4rem,5vw,4rem);align-items:start} .index__hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line-d);padding-bottom:.9rem;margin-bottom:.4rem} .index__hd .t{font-family:var(--en);font-weight:800;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)} .index__hd .n{font-family:var(--en);font-size:.72rem;color:var(--ash)} .ix{display:grid;grid-template-columns:2.6em 1fr auto;gap:1.2rem;align-items:center;padding:clamp(1rem,2vw,1.4rem) .2rem;border-bottom:1px solid var(--line-d);transition:padding-left .5s var(--e),background .5s;position:relative} .ix::before{content:"";position:absolute;left:0;top:0;height:100%;width:2px;background:linear-gradient(var(--olive-lit),var(--teal-lit));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e)} .ix:hover{padding-left:1.4rem} .ix:hover::before,.ix.is-lit::before{transform:scaleY(1)} .ix__n{font-family:var(--en);font-weight:600;font-size:.74rem;color:var(--ash);letter-spacing:.05em;font-variant-numeric:tabular-nums} .ix__t{font-size:clamp(1rem,1.7vw,1.28rem);font-weight:700;line-height:1.4;transition:color .4s} .ix:hover .ix__t{color:var(--olive-lit)} .ix__c{font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);white-space:nowrap} .ix__thumb{display:none} .index__stage{position:sticky;top:80px;height:auto;aspect-ratio:16/9;margin-right:calc(-1 * (max(0px,(100vw - var(--ctw))/2) + clamp(20px,5vw,60px)));border-radius:2px 0 0 2px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-d);border-right:0} .index__prev{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s var(--e),transform 1.2s var(--e);transform:scale(1.04);filter:brightness(.9)} .index__prev.on{opacity:1;transform:none} /* v43.1: 待機映像＝ロゴのアニメ（ロマンくん）。DOM順で最下層＝ホバーの作品プレビュー(prev/stgv)が上に被さる */ .index__idle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(.66)} .index__stage.has-idle{background:#fdfdfc} .index__stgv{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .5s} .index__stgv.on{opacity:1} .index__stgv iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:0;pointer-events:none} /* v28: 縦長の窓を16:9動画がカバー（中央クロップ＝黒帯なし） */ @media(max-width:860px){ .index{grid-template-columns:1fr} .index__stage{display:none} .ix{grid-template-columns:2.2em 1fr;grid-template-rows:auto auto} .ix__c{grid-column:2} .ix__thumb{display:block;grid-column:1/-1;aspect-ratio:16/9;border-radius:2px;overflow:hidden;margin-top:.6rem} .ix__thumb img{width:100%;height:100%;object-fit:cover} } /* v17: Film Indexの絞り込み（作品/メイキング/ドキュメンタリー）＝Worksページの.filterと同じ作法の小型版。 本番はWPのカテゴリ（映像作品/メイキング/ドキュメンタリー）で行を出力し、このボタンで絞る */ .ixf{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;padding:.9rem .2rem .1rem} .ixf button{background:none;border:0;font-family:var(--en);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);cursor:pointer;padding:.3em 0;position:relative;transition:color .35s} .ixf button:hover{color:var(--bone)} .ixf button.on{color:var(--olive-lit)} .ixf button.on::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--olive-lit)} .ix.ix-off{display:none} /* 絞り込みで外れた行＝コールシートから抜く（残った行は下のfadeで入り直す） */ .ix.ix-in{animation:ixIn .55s var(--e) both} @keyframes ixIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } .oshot{margin-inline:calc(50% - 50vw);background:#040404;border-block:1px solid var(--line-d);padding:clamp(4rem,8vw,7rem) 0 0;margin-block:clamp(3rem,6vw,5rem) 0;position:relative} .sec:has(.oshot){padding-bottom:0} /* ↑v40: overflow:hiddenを外した＝先祖にoverflowがあるとpinのstickyが死ぬ。はみ出す物は全て.oshot__pin(overflow:hidden)内 */ .oshot::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(211,199,120,.05),transparent 70%);pointer-events:none} .oshot__in{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,5vw,60px);padding-left:max(clamp(20px,5vw,60px),var(--gnav-safe));position:relative} /* v35: 左はハンバーガー安全域 */ .oshot__head{text-align:center;margin-bottom:clamp(1.2rem,2.5vw,2rem)} .oshot__ttl{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4vw,2.9rem);letter-spacing:.08em;line-height:1.5;margin:.7em 0 .55em} .oshot__lead{max-width:38em;margin-inline:auto;font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,1.2vw,.99rem);line-height:2.3;letter-spacing:.06em;color:var(--dim)} .oshot__tall{height:480vh;position:relative;margin-top:clamp(1.2rem,2.5vw,2rem)} .oshot__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#030304} .oshot__stage{position:absolute;inset:0;will-change:transform} /* 部屋+映像を一枚でドリフト＝着地ズレを構造的に起こさない */ .oshot__scene{position:absolute;opacity:0;will-change:opacity} .oshot__room{position:absolute;inset:0;width:100%;height:100%} .oshot__dimr{position:absolute;inset:0;background:#020203;opacity:0;pointer-events:none} /* 幕4a＝部屋の灯だけ沈む（スクリーンの光は残る） */ /* 映像面＝射影変換のmorph面。基準箱(16:9 cover)をJSが実寸で置き、transformだけで飛ばす（iframeのリサイズはしない） */ .oshot__vf{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;background:var(--ink-2);overflow:hidden;will-change:transform} .oshot__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.9);transition:opacity 1.2s ease} .oshot.play-on .oshot__poster{opacity:0} /* iframeが回り始めたらポスターは静かに退く */ .oshot__ifr,.oshot__ifr iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .oshot__ifr iframe{pointer-events:none} /* クリックは常にこちらのUI（モーダル再生）が受ける */ /* 計器盤＝ビューポート基準のレイヤー（映像面はcoverではみ出すため計器を載せない）。opacityはスクラブがhudxに配給 */ .oshot__hudx{position:absolute;inset:0;z-index:5;pointer-events:none} .oshot__vin{position:absolute;inset:0;background:radial-gradient(ellipse 100% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5));pointer-events:none;z-index:2} .oshot__grain{position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.12;mix-blend-mode:overlay;pointer-events:none;z-index:2;animation:grain 1.4s steps(4) infinite} /* HUD＝ファインダーの計器。装飾なので読み上げ対象外 */ .oshot__hud{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--en);font-weight:600;color:rgba(246,242,233,.72);opacity:0;transition:opacity 1s ease .25s} .oshot.rec-on .oshot__hud{opacity:1} .oshot__cap{position:absolute;left:50%;bottom:clamp(18px,4.5svh,44px);transform:translateX(-50%);z-index:6;margin:0;text-align:center;opacity:0;pointer-events:none} .oshot__cap .en{display:block;font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(211,199,120,.78)} .oshot__cap .jp{display:block;margin-top:.55em;font-family:var(--serif);font-weight:600;font-size:clamp(.82rem,1.05vw,.92rem);letter-spacing:.1em;color:rgba(246,242,233,.82);text-shadow:0 1px 14px rgba(0,0,0,.65)} .oshot__dima{position:absolute;inset:0;background:#040404;opacity:0;pointer-events:none;z-index:7} /* 幕5b＝全暗転 */ /* v40: 全画面ファインダーの計器は「セーフエリア枠」として上端をヘッダーの下へ逃がす（本番=ロゴ/CONTACTと衝突しない） */ .oshot__crn{position:absolute;width:20px;height:20px;border:0 solid rgba(246,242,233,.4)} .oshot__crn.c1{left:22px;top:clamp(72px,10svh,104px);border-left-width:1px;border-top-width:1px} .oshot__crn.c2{right:22px;top:clamp(72px,10svh,104px);border-right-width:1px;border-top-width:1px} .oshot__crn.c3{left:22px;bottom:44px;border-left-width:1px;border-bottom-width:1px} .oshot__crn.c4{right:22px;bottom:44px;border-right-width:1px;border-bottom-width:1px} .oshot__rec{position:absolute;left:34px;top:clamp(84px,11.6svh,118px);display:inline-flex;align-items:center;gap:.55em;font-size:.72rem;letter-spacing:.3em} .oshot__rec .d{width:9px;height:9px;border-radius:50%;background:var(--wine-lit);box-shadow:0 0 12px var(--wine-lit)} .oshot.rec-on .oshot__rec .d{animation:blink 1.3s steps(1) infinite} .oshot__tc{position:absolute;right:34px;top:clamp(84px,11.6svh,118px);font-size:.72rem;letter-spacing:.18em;font-variant-numeric:tabular-nums} .oshot__slate{position:absolute;left:26px;bottom:20px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,242,233,.55)} .oshot__fps{position:absolute;right:26px;bottom:20px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,242,233,.55)} /* REC起動＝画面に入った瞬間、映像が「電源が入る」ように一度またたく */ .oshot.rec-on .oshot__vf{animation:memFlick .5s steps(2,end) 1} @keyframes memFlick{0%{filter:brightness(.3)} 50%{filter:brightness(1.25)} 100%{filter:brightness(1)} } /* 再生ボタン＝開演のカメラ／グリッドカードと同じ語彙（円環+金）。v40=映像面の外（射影で歪ませない）・中心はJSが随伴 */ .oshot__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:6;width:64px;height:64px;border-radius:50%;border:1px solid rgba(211,199,120,.75);background:rgba(8,8,8,.42);color:var(--bone);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:background .4s,border-color .4s} .oshot__play svg{width:22px;height:22px;fill:currentColor;translate:1px 0} .oshot__play:hover{background:rgba(211,199,120,.2);border-color:var(--olive-lit)} /* 幕5＝余韻の黒地の中央に結びの言葉がじわっと現像（v40.2）。opacity/blur/浮きはJSがスクラブ配給・リンクはfo>.5でクリック可 */ .oshot__fin{position:absolute;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;row-gap:clamp(1.3rem,3svh,2rem);text-align:center;padding-inline:clamp(20px,5vw,60px);opacity:0;pointer-events:none} .oshot__q{font-family:var(--serif);font-weight:600;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:2.5;letter-spacing:.09em;color:rgba(246,242,233,.85);margin:0;text-shadow:0 1px 16px rgba(0,0,0,.6)} .oshot__go{margin:0;white-space:nowrap} @media(max-width:940px){ .oshot__tall{height:400vh} } @media(max-width:760px){ .oshot__grain{display:none} /* ノイズはモバイルで切って軽く（off__grainと同じ方針） */ .oshot__rec,.oshot__tc{top:clamp(64px,9svh,88px)} .oshot__rec{left:16px} .oshot__tc{right:16px} .oshot__slate{left:16px;bottom:12px} .oshot__fps{display:none} } @media(prefers-reduced-motion:reduce){ .oshot.rec-on .oshot__vf{animation:none} .oshot.rec-on .oshot__rec .d{animation:none} .oshot__grain{animation:none} .oshot__tall{height:auto} /* reduce＝スクラブせず「試写室に掛かった完成形」を一枚で（JSが一度だけ配置） */ .oshot__pin{position:relative} .oshot__fin{opacity:1;pointer-events:auto;align-content:end;padding-bottom:13svh} /* reduce＝結びは下寄りに静的表示（銘板の上・JSはfinを触らない） */ } /* ============ SERVICES = 四つの事業（チャプター行） ============ 映像ジャンルの一覧（旧4パネル）は「映像制作事業」の中のタグへ降格。 事業はFilm Indexと同じ「コールシート＝行」の言語で読ませる（サイト内の様式を増やさない） */ .biz{--bizStrip:clamp(92px,13svh,124px);--bizH:min(72svh,640px);margin-top:clamp(2.5rem,5vw,4rem)} .biz__row{position:sticky;top:var(--bizStrip);height:var(--bizH);min-height:max-content;align-content:start; /* min-height＝低窓×最終カードでも中身を切らない保険（等式より無破綻を優先） */ display:grid;grid-template-columns:6.5em 1fr 1.6fr;gap:clamp(1.2rem,3vw,3rem);padding:clamp(1.6rem,3vw,2.4rem) .2rem; background:var(--ink);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d); transition:background .6s ease,padding-left .5s var(--e)} .biz__row::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:64px;pointer-events:none; background:linear-gradient(180deg,rgba(10,10,13,0),var(--ink))} /* 透明側=--ink(#0A0A0D)のalpha0＝Safariの黒混ざり防止 */ .biz__row:first-child::after{content:none} @media(prefers-reduced-motion:reduce){ .biz__row::after{display:none} } .biz__row:nth-child(2){top:calc(var(--bizStrip)*2);height:calc(var(--bizH) - var(--bizStrip))} .biz__row:nth-child(3){top:calc(var(--bizStrip)*3);height:calc(var(--bizH) - var(--bizStrip)*2)} .biz__row:nth-child(4){top:calc(var(--bizStrip)*4);height:calc(var(--bizH) - var(--bizStrip)*3)} @media(max-width:940px){ .biz__row,.biz__row:nth-child(n){height:auto;min-height:60svh} } /* 狭幅＝内容優先（高さ固定を解除） */ @media(prefers-reduced-motion:reduce){ .biz__row,.biz__row:nth-child(n){position:static;height:auto;min-height:0} } /* reduce＝従来の静的リスト */ /* 左端の光条＝ホバーで各事業のアクセント色が灯る（Film Indexの行と同じ作法） */ .biz__row::before{content:"";position:absolute;left:0;top:0;height:100%;width:2px;background:var(--ac,var(--olive-lit));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--e)} .biz__row:hover{padding-left:1.2rem;background:linear-gradient(90deg,rgba(246,242,233,.03),transparent 70%),var(--ink)} /* v38: 地色を重ねる＝段積み中に下の行が透けない */ .biz__row:hover::before{transform:scaleY(1)} .biz--1{--ac:var(--teal-lit)} .biz--2{--ac:var(--wine-lit)} .biz--3{--ac:var(--olive-lit)} .biz--4{--ac:var(--bone)} .biz__n{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.18em;color:var(--ash);text-transform:uppercase;padding-top:.5em;font-variant-numeric:tabular-nums} .biz__t{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:900;line-height:1.4} .biz__en{display:block;margin-top:.55em;font-family:var(--en);font-weight:600;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ac,var(--olive-lit))} .biz__copy{font-family:var(--serif);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:.05em;margin-bottom:.7em} /* 事業の一言＝映画の言葉なので明朝 */ .biz__desc{color:var(--dim);font-size:.92rem;max-width:52ch} .biz__tags{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.15em} .biz__tags li{font-size:.72rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line-d);border-radius:2px;padding:.32em .8em} .biz__go{margin-top:1.4em} /* .rv.inのtransitionにホバー挙動が潰されないよう明示的に合成 */ .biz__row.rv.in{transition:background .6s ease,padding-left .5s var(--e),opacity 1s var(--e),transform 1s var(--e)} @media(max-width:820px){ .biz{--bizStrip:0px} .biz__row{position:relative;top:auto;height:auto;min-height:0;grid-template-columns:1fr;gap:.9rem;padding:1.7rem .2rem 1.7rem 1.15rem} .biz__row::after{content:none} /* 被さりフェード＝重なり自体が無いので切る */ .biz__row:hover{padding-left:1.15rem} .biz__n{padding-top:0} } /* ============ FROM KUMAMOTO = 熊本→世界 スクロール・ジャーニー（v14） ============ 到達すると画面に固定され（sticky）、スクロールで4段に進む： Step1 日本列島ドット＋「ここでしか撮れない、光がある。」（v50コピー刷新）→ Step2 県へズーム＋早野ビル線画 → Step3 線がほどけて江津湖Baseへ再構成＋光点が移動 → Step4 県地図に4点（2拠点＋熊本城＋江津湖）＋結び。 実装は既存語彙（sticky＋進行度スクラブ＋canvas＋pathLength=100）のみ・追加ライブラリなし */ .kmap{background:#050507;position:relative;overflow:clip} /* hiddenはstickyを殺す（罠9）→clip */ .kmap::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 72% 55%,rgba(44,108,124,.07),transparent 65%);pointer-events:none} .kmap__tall{height:460vh;position:relative} /* ジャーニーの尺（スクラブの分母） */ .kmap__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden} .kmap__bgv{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .kmap__bgv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;filter:saturate(1.0) brightness(.5)} .kmap__bgv video.on{opacity:1} .kmap__bgsc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.84) 0%,rgba(10,10,13,.6) 30%,rgba(10,10,13,.62) 46%,rgba(10,10,13,.96) 60%,#0A0A0D 72%)} @media(prefers-reduced-motion:reduce){ .kmap__bgv{display:none} } /* reduce＝実写レイヤーなし */ .kmap__frame{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;width:100%} /* --- 左＝章のコピー（ステップで入れ替わる。絶対配置の重ね＝場所は一つ） --- */ .kmap__copy{position:relative;min-height:min(72svh,620px)} .kmap__step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .9s var(--e);pointer-events:none} .kmap__step.on{opacity:1;transform:none;pointer-events:auto} .kmap__ttl{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.6;letter-spacing:.04em;margin-top:.9rem} .kmap__en{font-family:var(--en);font-weight:600;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);margin-top:1.2rem} .kmap__body{margin-top:1.7rem;font-family:var(--serif);font-weight:600;line-height:var(--lh-voice);letter-spacing:var(--ls-voice);color:var(--dim);font-size:clamp(.92rem,1.25vw,1rem)} /* 思想の文＝明朝・呼吸は共通トークン */ .kmap__facts{display:flex;gap:clamp(1.8rem,3.5vw,3rem);margin:2.4rem 0 0} .kmap__facts dt{font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)} .kmap__facts dd{margin:.4em 0 0;font-size:.9rem;color:var(--bone)} /* 拠点の章（Step2/3）：ラベル＋線画＋短いコピー。説明は一文だけ＝1画面に詰め込まない */ .kmap__set{font-family:var(--en);font-weight:600;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive-lit)} .kmap__aTtl{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.8;letter-spacing:.05em;margin:1rem 0 0} .kmap__aDesc{margin:1.1rem 0 0;color:var(--dim);font-size:.9rem;line-height:2.1;max-width:42ch} .kmap__go{margin-top:1.4rem} .kmap__art{position:relative;margin-top:1.5rem;border-radius:2px;overflow:hidden;max-width:100%;align-self:flex-start} /* flex子のstretchで枠が横に伸びる事故の防止 */ .kmap__art.a-hayano{aspect-ratio:1311/1536;height:min(44svh,420px);width:auto} /* 縦長＝街のビル */ .kmap__art.a-ezuko{aspect-ratio:4/3;width:min(100%,430px)} /* 横長＝水辺のBase */ .kmap__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* --- 右＝地図の舞台（日本ドット→熊本県線画） --- */ .kmap__stage{position:relative;width:100%;aspect-ratio:1000/1118;max-height:min(76svh,640px)} .kmap__cv{position:absolute;inset:0;width:100%;height:100%} .kmap__cap{position:absolute;left:0;right:0;bottom:-.6rem;display:flex;justify-content:space-between;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)} /* 熊本県地図（リアル線画）：輪郭は--ppで描かれる。opacityはJSがスクラブ */ /* 熊本市ズーム（v14.5）：ホットゾーン・拠点の点・左の拠点記載のどれかに触れると、市の中心へ大きく寄る（scale4.25）。 ズームは内側の.pf__world（SVGユーザー座標のg）に掛ける＝レターボックス誤差なしで市中心(277.6,209.8)へ正確に寄る。 発火はJSが.zoom-onクラスで一元管理（:hasをやめ、左のコピー側ホバーでも同じズームが走る＝左右連動）。 地図データはv14.5で全面再生成＝県49市町村union＋5区union（同一ソース・国土数値情報由来＝形が現実と厳密一致） */ .kmap__pref{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible} .pf__world{transition:transform 1.25s var(--e);transform-origin:277.6px 209.8px;will-change:transform} .kmap__stage.zoom-on .pf__world{transform:scale(4.25)} .pf__hot{fill:transparent;pointer-events:all} /* 透明の当たり判定（熊本市域を囲う不可視の矩形） */ .pf__geo,.pf__cur{pointer-events:none} /* 非リンクの光だまり・地名・光点がホバーを横取り→チャタリング防止（罠15） */ .pf__city{stroke:rgba(211,199,120,.85);stroke-width:.34;fill:none;stroke-linecap:round;stroke-linejoin:round; opacity:0;transition:opacity 1.2s ease .15s,filter 1.2s ease .15s;filter:drop-shadow(0 0 3px rgba(211,199,120,.35))} /* 熊本市輪郭＝ズームで浮き出て光彩をまとう */ .pf__ol,.pf__grid{transition:opacity 1.1s ease,filter 1.1s ease} .kmap__stage.zoom-on .pf__ol{opacity:.13;filter:blur(1.2px)} .kmap__stage.zoom-on .pf__grid{opacity:0} .kmap__stage.zoom-on .pf__city{opacity:1; filter:drop-shadow(0 0 1.5px rgba(211,199,120,.9)) drop-shadow(0 0 5px rgba(211,199,120,.5)) drop-shadow(0 0 12px rgba(211,199,120,.25))} .kmap__stage.zoom-on .pf__geo{opacity:0} .pf__ld,circle.pf__dot,.pf__gl{transition:all 1.25s var(--e)} .pf__tag{transition:transform 1.25s var(--e)} /* 拠点ラベル＝ズーム中は点に随伴し逆スケールで実寸のまま（1/4.25=.2353） */ /* ズーム中のラベル位置＝市境界線の実座標をサンプリングして「線と重ならない」オフセットを機械探索した値（2026-07-08） 早野=(-30,-2)＝境界線の外の暗部へ・江津湖=(-90,94)＝市内部南の空白へ。動かす時は同じ探索で再検証 */ .kmap__stage.zoom-on .pf__tag.t-hy{transform:translate(280.6px,219.1px) scale(.2353) translate(-280.6px,-219.1px) translate(-26px,-16px)} /* ベースを(-4,14)動かした分を補正＝ズーム時の実効オフセットは検証済みの(-30,-2) */ .kmap__stage.zoom-on .pf__tag.t-ez{transform:translate(292.8px,221.6px) scale(.2353) translate(-292.8px,-221.6px) translate(-90px,94px)} .kmap__stage.zoom-on .pf__ld{opacity:0} /* ズーム中は点とラベルが近接＝引出線は退場 */ .kmap__stage.zoom-on circle.pf__dot{r:.85px} /* 左右連動のフォーカス：f-hy/f-ez＝該当拠点が主役、他方は沈む */ .kmap__stage.zoom-on.f-hy #ptEzuko,.kmap__stage.zoom-on.f-ez #ptHayano{opacity:.3} .kmap__stage.f-hy #ptHayano .pf__lb,.kmap__stage.f-ez #ptEzuko .pf__lb{fill:var(--bc)} .kmap__stage.f-hy #ptHayano circle.pf__dot,.kmap__stage.f-ez #ptEzuko circle.pf__dot{filter:drop-shadow(0 0 6px rgba(var(--bcr),.9))} .pf__ol{stroke:rgba(246,242,233,.5);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:calc(100 * (1 - var(--pp,0)))} .pf__grid{stroke:rgba(246,242,233,.05);stroke-width:1;stroke-dasharray:2 7} /* 計器の点線（航路図と同語彙） */ /* 点とラベル：拠点＝金・象徴（熊本城/江津湖）＝ふわっとした光だまり。onで灯る */ .pf__pt{opacity:0;transition:opacity .7s ease} .pf__pt.on{opacity:1} #ptHayano{--bc:var(--wine-lit);--bcr:193,60,85} #ptEzuko{--bc:var(--teal-lit);--bcr:72,174,198} .pf__pt circle.pf__dot{fill:var(--bc,var(--olive-lit))} .pf__gl{opacity:.8} /* 象徴＝輪郭のない光（radialGradient）。拠点の点より一段引く */ /* 地名・拠点ラベルは地色のハロー付き＝境界線と重なっても文字が読める（地図のラベル定石。strokeが文字の下＝paint-order） */ .pf__lb{font-family:var(--en);font-weight:600;font-size:10.5px;letter-spacing:.2em;fill:rgba(246,242,233,.85);text-transform:uppercase;paint-order:stroke;stroke:#0A0A0D;stroke-width:3px;stroke-linejoin:round} .pf__jb{font-family:var(--jp);font-weight:500;font-size:11px;letter-spacing:.14em;fill:rgba(246,242,233,.55);paint-order:stroke;stroke:#0A0A0D;stroke-width:3px;stroke-linejoin:round} .pf__ld{stroke:rgba(246,242,233,.28);stroke-width:1} /* ラベル引出線 */ a.pf__pt{cursor:pointer} a.pf__pt .pf__lb{fill:var(--bc)} /* 英字ラベルは常時それぞれの識別色＝一目で別の場所と分かる */ a.pf__pt:hover .pf__lb,a.pf__pt:focus-visible .pf__lb{fill:var(--bc)} a.pf__pt:hover circle.pf__dot{filter:drop-shadow(0 0 6px rgba(var(--bcr),.9))} /* 拠点ポインター：ホバーで円がひらき、スポットライトが灯り、円の中に実写が浮かぶ */ .pf__ring{fill:rgba(var(--bcr),.05);stroke:rgba(var(--bcr),.4);stroke-width:1;r:5px; transition:r .65s var(--e),fill .65s ease,stroke .65s ease,stroke-width 1.25s var(--e)} .kmap__stage.zoom-on .pf__ring{r:1.45px;stroke-width:.24} /* 円がひらく演出＝点への直接ホバーに加え、左の記載ホバー（.f-hy/.f-ez）でも同じ芝居が走る（左右連動 v14.5） */ a.pf__pt:hover .pf__ring,a.pf__pt:focus-visible .pf__ring,.kmap__stage.f-hy #ptHayano .pf__ring,.kmap__stage.f-ez #ptEzuko .pf__ring{r:11px !important;fill:rgba(var(--bcr),.08);stroke:rgba(var(--bcr),.8)} /* 写真のクリップ円は固定r=30（defs内は:hoverが届かない罠）。開閉の芝居はリングrとimage opacityで */ .pf__im{opacity:0;transition:opacity .6s ease .08s;pointer-events:none} a.pf__pt:hover .pf__im,a.pf__pt:focus-visible .pf__im,.kmap__stage.f-hy #ptHayano .pf__im,.kmap__stage.f-ez #ptEzuko .pf__im{opacity:.55} /* 円の中の実写＝半透明 */ .pf__spot{opacity:0;transition:opacity .7s ease;pointer-events:none} a.pf__pt:hover .pf__spot,a.pf__pt:focus-visible .pf__spot,.kmap__stage.f-hy #ptHayano .pf__spot,.kmap__stage.f-ez #ptEzuko .pf__spot{opacity:1} /* 上から差すスポットライト */ /* 現在地マーカー＝早野ビル→江津湖Baseへ滑走する光点（JSが座標を補間） */ .pf__cur{opacity:0} .pf__cur .c1{fill:var(--bone)} .pf__cur .c2{fill:none;stroke:rgba(211,199,120,.55);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:campRing 3.2s ease-out infinite} /* Step4：拠点の点に静かな鼓動 */ .pf__pt.pulse circle{transform-box:fill-box;transform-origin:center;animation:campPulse 3.2s ease-in-out infinite} @media(max-width:860px){ .kmap__bgsc{background:linear-gradient(180deg,rgba(10,10,13,.88) 0%,rgba(10,10,13,.62) 32%,rgba(10,10,13,.68) 66%,rgba(10,10,13,.92) 100%)} .kmap__frame{grid-template-columns:1fr;gap:1.2rem;align-content:center} .kmap__copy{min-height:0;height:44svh} .kmap__step{justify-content:flex-end;padding-bottom:.5rem} .kmap__art.a-hayano{height:min(26svh,240px);margin-top:1rem} .kmap__art.a-ezuko{width:min(100%,300px);margin-top:1rem} .kmap__aDesc{display:none} /* モバイルはコピーだけ＝詰め込まない */ .kmap__stage{max-width:430px;margin-inline:auto;max-height:46svh} .kmap__facts{flex-wrap:wrap;gap:1.2rem} } /* reduced-motion：固定もスクラブもやめ、Step1の完成形＋県地図の4点を静的に見せる */ @media (prefers-reduced-motion:reduce){ .kmap__tall{height:auto} .kmap__pin{position:relative;height:auto;padding:clamp(3rem,7vw,5rem) 0} .kmap__copy{min-height:0} .kmap__step{display:flex;position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:2.2rem} /* 全章コピーを縦積みで静的表示＝「消すのではなく完成形を見せる」（拠点導線も残す） */ .pf__ol{stroke-dashoffset:0} .pf__world{transition:none} .kmap__stage.zoom-on .pf__world{transform:none} /* 動きを減らす設定＝ホバーズームも切る */ } .msg__pt{position:sticky;top:84px;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--ink-2)} .msg__pt img{width:100%;height:100%;object-fit:cover;object-position:66% 50%;filter:saturate(.92) contrast(1.04);transition:transform 1.8s var(--e)} .msg__pt:hover img{transform:scale(1.03)} .msg__pt::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 62%,rgba(7,7,9,.55));pointer-events:none} /* 足元を沈めてキャプションを立てる */ .msg__pt::after{content:"";position:absolute;inset:12px;z-index:3;border:1px solid rgba(246,242,233,.16);pointer-events:none} /* フィルムフレーム内枠（Officeと同じ言語） */ .msg__cap{position:absolute;left:1.2rem;bottom:1rem;z-index:4;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,242,233,.85)} /* 写真が未配置でも紙面が破綻しない暗幕フォールバック */ .msg__pt.nopic img{display:none} .msg__pt.nopic{background:radial-gradient(90% 80% at 60% 30%,rgba(126,38,54,.35),transparent 60%),radial-gradient(80% 90% at 20% 85%,rgba(44,108,124,.22),transparent 60%),var(--ink-2)} .msg__miss{display:none} .msg__pt.nopic .msg__miss{display:block;position:absolute;inset:0;z-index:3;display:grid;place-items:center;font-family:var(--en);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);text-align:center;line-height:2} .cog__txt>p{--rp:0%;color:transparent;background:linear-gradient(180deg,var(--bone) calc(var(--rp) - 4%),rgba(246,242,233,.26) calc(var(--rp) + 9%));-webkit-background-clip:text;background-clip:text} @media (prefers-reduced-motion:reduce){ .cog__txt>p{color:var(--dim);background:none} } /* 動きを減らす設定では常時表示 */ .no-js .cog__txt>p,.js:not(.js-ready) .cog__txt>p{color:var(--dim);background:none} /* JSが動かない環境では未読26%のまま固まる＝常時表示に落とす（罠22） */ .msg__sign{margin-top:2.8rem;font-family:var(--serif);color:var(--bone);line-height:2.1} .msg__sign .co{display:block;font-size:.86em;color:var(--dim)} .msg__sign .nm{font-size:1.16em;font-weight:700;letter-spacing:.1em} @media(max-width:860px){ .msg__pt{position:relative;top:0;max-width:430px;aspect-ratio:4/5} /* モバイルはstickyを解除して縦長に */ } /* ============ OFFICE ============ */ /* v59: .off系（Company拠点章の部品）は章削除に伴い撤去（使用者ゼロを二重grepで確認） */ /* ============ v41: NEWS＝劇場の半券（チケット） ============ お知らせ1件＝入場半券。ポスター窓（サムネ=WPアイキャッチ）・刻印の日付・座席種別風カテゴリスタンプ・ 右端はミシン目+ADMIT ONEの半券スタブ（上下のパンチ穴=地色の半円が角で切り欠きになる）。 ホバー＝半券が浮いてわずかに傾き、縁とスタブに金が灯る。出現＝rv+回転（もぎりたてが差し込まれる）。 TOPと一覧ページで同じ部品（同じ部品=同じ動き） */ .nws{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem);margin-top:clamp(1.6rem,3vw,2.4rem)} .tkt{position:relative;display:grid;grid-template-columns:1fr 46px;background:var(--ink-2);border:1px solid rgba(246,242,233,.1);border-radius:2px;overflow:hidden;color:inherit;box-shadow:0 14px 34px rgba(0,0,0,.32);translate:0 0;rotate:0deg;transition:translate .5s var(--e),rotate .5s var(--e),border-color .45s,box-shadow .5s var(--e)} .tkt:hover{translate:0 -6px;rotate:-.5deg;border-color:rgba(211,199,120,.5);box-shadow:0 26px 54px rgba(0,0,0,.5)} .tkt__main{display:flex;flex-direction:column;min-width:0} .tkt__ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#101014} .tkt__ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.92);transition:transform 1.1s var(--e),filter .6s} .tkt:hover .tkt__ph img{transform:scale(1.05);filter:brightness(1) saturate(1)} .tkt__lume{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;background:radial-gradient(80% 90% at 50% 20%,rgba(211,199,120,.15),transparent 62%);transition:opacity .6s var(--e);pointer-events:none} .tkt:hover .tkt__lume{opacity:1} .tkt__body{padding:.95rem 1.05rem 1.1rem;display:grid;gap:.5rem;align-content:start} .tkt__meta{display:flex;align-items:center;gap:.9em} .tkt__dt{font-family:var(--en);font-weight:600;font-size:.68rem;letter-spacing:.14em;color:var(--ash);font-variant-numeric:tabular-nums} .tkt__cat{font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wine-lit);border:1px solid rgba(126,38,54,.7);border-radius:2px;padding:.28em .8em} /* 座席種別のスタンプ＝wine系1色（カテゴリで色を増やさない） */ .tkt__t{font-family:var(--serif);font-weight:700;font-size:clamp(.9rem,1.05vw,1rem);line-height:1.8;letter-spacing:.04em;color:var(--bone);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 半券スタブ＝右の縦帯。ミシン目の破線＋縦書きADMIT ONE＋上下パンチ穴 */ .tkt__stub{position:relative;border-left:1px dashed rgba(246,242,233,.22);display:grid;place-items:center;background:rgba(255,255,255,.016)} .tkt__stub .en{writing-mode:vertical-rl;font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ash);transition:color .4s} .tkt:hover .tkt__stub .en{color:var(--olive-lit)} .tkt__stub::before,.tkt__stub::after{content:"";position:absolute;left:-7px;width:13px;height:13px;border-radius:50%;background:var(--ink)} .tkt__stub::before{top:-7px} .tkt__stub::after{bottom:-7px} /* 出現＝もぎりたての半券が差し込まれる（rvの隠しに回転を重ねる。罠1＝transitionは全プロパティ合成で明示） */ .js .nws .tkt.rv{transform:translateY(34px) rotate(1.6deg)} .nws .tkt.rv.in{transform:none;transition:opacity .95s var(--e),transform .95s var(--e),translate .5s var(--e),rotate .5s var(--e),border-color .45s,box-shadow .5s var(--e)} /* フィルタの絞り込み（Film Indexと同じ呼吸＝ixIn再利用） */ .tkt.off{display:none} .tkt.pop{animation:ixIn .55s var(--e) both} @media(max-width:940px){ .nws{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .nws{grid-template-columns:1fr} .tkt{grid-template-columns:1fr 42px} } .sled{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);margin-top:.9rem} .sled__btn{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-d);border-radius:50%;background:none;color:var(--dim);cursor:pointer;transition:color .3s,border-color .3s,transform .4s var(--e),opacity .4s} .sled__btn:hover{color:var(--olive-lit);border-color:rgba(211,199,120,.5);transform:translateY(-2px)} .sled__btn[disabled]{opacity:.22;pointer-events:none} .sled__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .sled__bar{position:relative;flex:1;height:22px;cursor:pointer} .sled__bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--line-d)} .sled__fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:linear-gradient(90deg,rgba(211,199,120,.22),var(--olive-lit));pointer-events:none} .sled__fill::after{content:"";position:absolute;right:-3px;top:50%;translate:0 -50%;width:7px;height:7px;border-radius:50%;background:var(--olive-lit);box-shadow:0 0 12px var(--olive-lit),0 0 26px rgba(211,199,120,.45)} /* 走った光の先端 */ .sled__num{flex:none;font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.18em;color:var(--ash);font-variant-numeric:tabular-nums;display:inline-flex;gap:.55em;align-items:baseline} .sled__num b{color:var(--bone);font-weight:700} .sled-host.sled-host{scrollbar-width:none;padding-bottom:.4rem} .sled-host.sled-host::-webkit-scrollbar{display:none} @media(max-width:640px){ .sled__btn{width:34px;height:34px} .sled{gap:.8rem} } .nws--slide{--nwsgap:clamp(1.1rem,2.4vw,1.8rem);display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(max(270px,calc((100vw - 120px - 2*var(--nwsgap))/3.2)),420px);gap:var(--nwsgap);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:1.2rem;margin-inline:calc(-1*clamp(20px,5vw,60px));padding-inline:clamp(20px,5vw,60px);scrollbar-width:thin;scrollbar-color:var(--ash-dim) transparent;touch-action:pan-x pan-y} /* ↑3.2枚=可視幅に3枚+4枚目の頭が3割覗く。⚠️罠: 暗黙グリッドトラック(grid-auto-columns)の%は横スクロールコンテナで解決されずminへ落ちる＝vwで書く */ .nws--slide .tkt{scroll-snap-align:start} .nws--slide.dragging{scroll-snap-type:none;cursor:grabbing} .nws--slide.dragging .tkt{pointer-events:none} /* ドラッグ中はカードのhover/クリックを殺す＝掴んで滑らせる手応えに集中 */ @media(max-width:940px){ .nws--slide{grid-template-columns:none;grid-auto-columns:min(68vw,340px)} } @media(max-width:640px){ .nws--slide{grid-template-columns:none;grid-auto-columns:82vw} } /* ============ CTA ============ */ .cta{position:relative;text-align:center;padding-block:clamp(6rem,13vw,9rem);overflow:hidden;background:var(--ink)} .cta__bg{position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 55%,rgba(126,38,54,.3),transparent 60%),radial-gradient(50% 60% at 18% 24%,rgba(44,108,124,.22),transparent 55%),radial-gradient(46% 60% at 84% 30%,rgba(169,162,90,.16),transparent 58%),var(--ink)} .cta__spot{position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(211,199,120,.13),transparent 60%);pointer-events:none} .cta__in{position:relative;z-index:2} .cta__ttl{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.6;letter-spacing:.04em;text-wrap:balance;margin:.5em 0} /* サイズはセクション見出しの共通トークンと同値 */ .cta__body{color:var(--dim);margin-bottom:2rem} /* ============ FOOTER ============ */ .ft{position:relative;overflow:hidden;border-top:1px solid var(--line-d);background:#070709} .ft__bg{position:absolute;inset:0;background:url(../img/footer.jpg) center 38%/cover no-repeat;transform:scale(1.07);transition:transform 2.8s var(--e);will-change:transform} .ft.in-view .ft__bg{transform:scale(1)} .ft__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,9,.92) 0%,rgba(7,7,9,.72) 34%,rgba(7,7,9,.6) 62%,rgba(7,7,9,.82) 100%),radial-gradient(120% 90% at 18% 30%,rgba(7,7,9,.5),transparent 60%)} .ft__in{position:relative;z-index:2;max-width:var(--ctw);margin-inline:auto;padding:clamp(4rem,8vw,6.5rem) clamp(20px,5vw,60px) 1.6rem;padding-left:max(clamp(20px,5vw,60px),var(--gnav-safe))} .ft__msg{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;line-height:1.7;letter-spacing:.05em;margin-bottom:clamp(2.5rem,5vw,4rem);text-shadow:0 1px 18px rgba(0,0,0,.55)} .ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding-bottom:2.2rem} .ft__logo{font-family:"EB Garamond",var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.02em;margin-bottom:.6em;display:flex;align-items:center;gap:.6em;text-shadow:0 1px 12px rgba(0,0,0,.5)} .ft__tag,.ft__adr{color:rgba(246,242,233,.74);font-size:.85rem;margin-bottom:.3em;text-shadow:0 1px 10px rgba(0,0,0,.55)} .ft__nav{display:grid;gap:.8rem;align-content:start} .ft__nav a{font-family:var(--en);font-weight:600;font-size:.88rem;letter-spacing:.05em;color:rgba(246,242,233,.9);text-shadow:0 1px 10px rgba(0,0,0,.6);transition:color .35s} .ft__nav a:hover{color:var(--olive-lit)} .ft__sns{display:flex;gap:.7rem;margin-bottom:1.4rem} .ft__sns a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(246,242,233,.32);border-radius:50%;color:rgba(246,242,233,.88);background:rgba(8,8,10,.28);transition:color .3s,border-color .3s,transform .4s var(--e)} .ft__sns a:hover{color:var(--olive-lit);border-color:rgba(211,199,120,.55);transform:translateY(-3px)} .ft__sns svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .ft__sns a[aria-label="Facebook"] svg{fill:currentColor;stroke:none} /* 巨大ワードマーク＝終幕の看板。EB Garamond（ヘッダーと同じ筆）・写真に白抜き・下端で静かに構える */ .ft__mark{display:block;text-align:center;font-family:"EB Garamond",var(--serif);font-weight:600;font-size:clamp(3.2rem,11.5vw,10rem);line-height:1.04;letter-spacing:.015em;color:rgba(246,242,233,.94);white-space:nowrap;margin:clamp(1.5rem,4vw,3rem) 0 clamp(1rem,2.5vw,1.8rem);text-shadow:0 2px 34px rgba(0,0,0,.45);user-select:none} .ft__bot{display:flex;justify-content:space-between;align-items:center;padding-top:1.4rem;border-top:1px solid rgba(246,242,233,.16);font-size:.74rem;color:rgba(246,242,233,.55)} .ft__bot a{color:inherit;transition:color .35s} .ft__bot a:hover{color:var(--olive-lit)} @media(max-width:760px){ .ft__grid{grid-template-columns:1fr;gap:1.8rem} .ft__bot{flex-direction:column;gap:.7rem} } @media(prefers-reduced-motion:reduce){ .ft__bg{transform:none;transition:none} } @media(max-width:760px){ .ft__grid{grid-template-columns:1fr} .ft__bot{flex-direction:column;gap:.8rem} } /* WORKS一覧 hero */ .whero{position:relative;padding:clamp(6.5rem,14vh,9rem) 0 clamp(2rem,4vh,3rem);overflow:hidden} .whero__bg{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 0%,rgba(44,108,124,.2),transparent 60%),var(--ink)} .whero .ct{position:relative;z-index:2} /* absoluteの背景がstaticな本文より上に描画される事故の防止（eyebrow/リードが背景に沈んでいた） */ /* ページ見出しもセクション共通型（eyebrow＋明朝）。サイズだけページの格に合わせて大きく */ .whero__ttl{font-family:var(--serif);font-size:clamp(2.1rem,5.6vw,4.2rem);font-weight:700;line-height:1.5;letter-spacing:.04em;text-wrap:balance;margin-top:1.1rem} .whero__lead{margin-top:1.4rem;color:var(--dim)} .filter{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding-bottom:1rem;margin-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line-d)} .filter button{background:none;border:0;font-family:var(--en);font-weight:600;font-size:.76rem;letter-spacing:.08em;color:var(--ash);cursor:pointer;padding:.3em 0;position:relative;transition:color .35s} .filter button i{font-style:normal;font-size:.62em;letter-spacing:.14em;color:var(--ash-dim);margin-left:.5em;transition:color .35s} .filter button.on i{color:rgba(211,199,120,.6)} .filter button:hover{color:var(--bone)} .filter button.on{color:var(--olive-lit)} /* v64: News一覧＝札の掛け替え（wkIn/wkOutキーフレームを共用＝v52と同じ呼吸） */ .js #nwsG2 .tkt{opacity:0} #nwsG2 .tkt[hidden]{display:none} #nwsG2 .tkt.in{animation:wkIn .9s var(--e) both;animation-delay:var(--d,0s)} #nwsG2 .tkt.out{animation:wkOut .34s cubic-bezier(.55,0,.85,.36) both;animation-delay:var(--do,0s)} @media(prefers-reduced-motion:reduce){ .js #nwsG2 .tkt{opacity:1;animation:none} } .filter button.on::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--olive-lit)} /* 旧.wgrid（モザイク型グリッド）はv52で撤去＝Works Explorerへ全面刷新（実装は2f3282f以前に保全） */ .wx{padding-top:clamp(.5rem,1.5vw,1.5rem);padding-bottom:clamp(3rem,5vw,5rem)} .wx__wrap{display:grid;grid-template-columns:clamp(196px,16vw,248px) 1fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:start} .wx__rail{position:sticky;top:clamp(84px,12svh,120px);display:flex;flex-direction:column;gap:clamp(1.6rem,2.6svh,2.4rem)} .wx__cnt{margin:0;font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)} .wx__cnt b{display:block;margin-top:.4rem;font-size:clamp(2.1rem,3.1vw,3rem);line-height:1;letter-spacing:.05em;color:var(--bone)} .wx__cnt b em{font-style:normal;font-size:.34em;letter-spacing:.22em;color:var(--ash);margin-left:.5em} .wx__cnt b.tick{animation:wxTick .55s var(--e)} @keyframes wxTick{0%{opacity:0;transform:translateY(.5em);filter:blur(5px)} 100%{opacity:1;transform:none;filter:none} } .wx__lb{margin:0 0 .55rem;font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ash-dim)} .wx__cats,.wx__yrs{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem} .wx__cats button,.wx__yrs button{position:relative;display:flex;align-items:baseline;gap:.55em;padding:.3em 0;background:none;border:0;cursor:pointer; font-family:var(--en);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ash); transition:color .35s,transform .5s var(--e)} .wx__cats button{font-size:clamp(.84rem,.95vw,.94rem)} .wx__yrs button{font-size:clamp(.76rem,.85vw,.84rem)} .wx__arch{border-top:1px solid var(--line-d);padding-top:.7rem;margin-top:.2rem} .wx__arch-sum{display:flex;align-items:center;gap:.55em;padding:.15em 0;cursor:pointer;list-style:none;user-select:none} .wx__arch-sum::-webkit-details-marker{display:none} .wx__arch-sum .wx__lb{margin:0} .wx__arch-cur{font-family:var(--en);font-weight:600;font-size:.8rem;letter-spacing:.08em;color:var(--olive-lit);margin-left:auto} .wx__arch-cv{width:13px;height:13px;stroke:var(--ash);fill:none;stroke-width:1.7;transition:transform .38s var(--e);flex:0 0 auto} .wx__arch[open] .wx__arch-cv{transform:rotate(180deg)} .wx__arch[open] .wx__arch-cur{color:var(--ash-dim)} /* 開いている間は現在値の主張を弱め、下のリストへ視線を送る */ .wx__arch:not([open]) .wx__yrs{display:none} /* v65.16: 閉じたら年リストを隠す＝.wx__yrs{display:flex}がUAのdetails非表示を上書きしてしまうのを打ち消す（これが無いと畳めない） */ .wx__arch[open] .wx__yrs{padding-top:.6rem;animation:wxArchIn .4s var(--e)} @keyframes wxArchIn{from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:none} } .wx__cats button i,.wx__yrs button i{font-style:normal;font-size:.6em;letter-spacing:.16em;color:var(--ash-dim);transition:color .35s} .wx__cats button:hover,.wx__yrs button:hover{color:var(--bone)} .wx__cats button.on,.wx__yrs button.on{color:var(--olive-lit);transform:translateX(10px)} .wx__cats button.on i,.wx__yrs button.on i{color:rgba(211,199,120,.6)} .wx__cats button::before,.wx__yrs button::before{content:"";position:absolute;left:-16px;top:50%;width:10px;height:1px;background:var(--olive-lit); transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)} /* 活性＝左から金の短線が刺さる */ .wx__cats button.on::before,.wx__yrs button.on::before{transform:scaleX(1)} /* --- グリッド（2列・シアーと3D起こしの座） --- */ .wx__main{min-width:0} .wx__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.2vw,44px) clamp(18px,2.2vw,30px);perspective:1200px;will-change:transform} .wkc[hidden]{display:none} .wkc>a{display:block;color:inherit;text-decoration:none} .wkc__ph{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#0D0D11;isolation:isolate} .wkc__ph img{width:100%;height:100%;object-fit:cover;display:block;transform:translateY(var(--py,0px)) scale(1.14);will-change:transform; filter:saturate(1.02) contrast(1.03) brightness(.94);transition:filter .6s var(--e)} /* scale1.14=視差の逃げ代 */ .wkc:hover .wkc__ph img{filter:saturate(1.06) contrast(1.05) brightness(1.02)} .wkc__vid{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease .1s;pointer-events:none;background:#000} .wkc__vid iframe{width:100%;height:100%;border:0;pointer-events:none} .wkc__vid.on{opacity:1} .wkc__ph::before{content:"";position:absolute;inset:0;z-index:2;border:1px solid transparent;transition:border-color .55s var(--e);pointer-events:none} .wkc:hover .wkc__ph::before{border-color:rgba(211,199,120,.4)} /* 触れると額縁に金の線＝灯りが入る */ .wkc__ph::after{content:"";position:absolute;inset:-30% -60%;z-index:3;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,transparent 43%,rgba(255,253,244,.16) 50%,transparent 57%); transform:translateX(-78%);transition:transform .95s var(--e)} /* 映写光の斜めグレア＝一閃 */ .wkc:hover .wkc__ph::after{transform:translateX(78%)} .wkc__meta{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1em;margin-top:.8rem;padding-top:.72rem;border-top:1px solid var(--line-d)} .wkc__meta::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,var(--olive-lit),rgba(211,199,120,.05)); transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--e)} .wkc:hover .wkc__meta::before{transform:scaleX(1)} /* 罫が金で灯る */ .wkc__dt{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.2em;color:var(--ash)} .wkc__t{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(.92rem,1.1vw,1.06rem);letter-spacing:.06em;line-height:1.75;color:var(--bone);transition:color .45s} .wkc:hover .wkc__t{color:#EDE3AC} .wkc__cat{font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap; color:rgba(211,199,120,.78);border:1px solid rgba(211,199,120,.26);border-radius:99px;padding:.32em .75em} /* 登場（一覧が視界に入った時＝.play）と、絞り込み/ページ替えの「札の掛け替え」 */ .js .wx .wkc{opacity:0} .wx.play .wkc.in{animation:wkIn .9s var(--e) both;animation-delay:var(--d,0s)} @keyframes wkIn{0%{opacity:0;transform:translateY(66px) rotateX(16deg) scale(.96);filter:blur(9px) brightness(1.9)} 55%{opacity:1;filter:blur(0) brightness(1.28)} 100%{opacity:1;transform:none;filter:none} } .wx.play .wkc.out{animation:wkOut .34s cubic-bezier(.55,0,.85,.36) both;animation-delay:var(--do,0s)} @keyframes wkOut{to{opacity:0;transform:translateY(-38px) rotateX(-14deg) scale(.96);filter:blur(7px)} } /* --- ページャー（16件=8行MAX・v47操作デッキと同じヘアライン円の筆） --- */ .wx__pager{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-top:clamp(2.4rem,4.5vw,3.6rem)} .wx__pgn{display:flex;gap:.2rem;margin-right:auto} .wx__pgn button{position:relative;min-width:42px;height:42px;padding:0 .5em;background:none;border:0;cursor:pointer; font-family:var(--en);font-weight:600;font-size:.8rem;letter-spacing:.16em;color:var(--ash);transition:color .35s} .wx__pgn button::after{content:"";position:absolute;left:50%;bottom:7px;width:15px;height:1px;background:var(--olive-lit); transform:translateX(-50%) scaleX(0);transition:transform .45s var(--e)} .wx__pgn button:hover{color:var(--bone)} .wx__pgn button.on{color:var(--olive-lit)} .wx__pgn button.on::after{transform:translateX(-50%) scaleX(1)} .wx__pgb{display:grid;place-items:center;width:52px;height:52px;background:none;border:1px solid rgba(246,242,233,.22);border-radius:50%; color:var(--bone);cursor:pointer;transition:border-color .4s,color .4s,opacity .4s,transform .4s var(--e)} .wx__pgb svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .wx__pgb:disabled{opacity:.26;cursor:default} .wx__pgb:not(:disabled):hover{border-color:rgba(211,199,120,.66);color:var(--olive-lit);transform:translateY(-2px)} @media(max-width:900px){ .wx__wrap{grid-template-columns:1fr;gap:1.8rem} .wx__rail{position:static;flex-direction:column;gap:1.2rem} .wx__cats,.wx__yrs{flex-direction:row;flex-wrap:wrap;gap:.1rem 1.5rem} .wx__cats button.on,.wx__yrs button.on{transform:none} .wx__cats button::before,.wx__yrs button::before{left:auto;right:0;top:auto;bottom:2px;width:100%;transform-origin:0 50%} } @media(max-width:640px){ .wx__grid{grid-template-columns:1fr;gap:30px} } .wring{position:relative;height:min(70svh,660px);overflow:hidden;display:grid;place-items:center;touch-action:pan-y} .wring__eb{position:absolute;top:clamp(1.8rem,4.5svh,3rem);left:50%;transform:translateX(-50%);z-index:2} .wring__stage{width:100%;height:100%;display:grid;place-items:center;perspective:clamp(1100px,120vw,2400px);perspective-origin:50% 60%} .wring__ring{position:relative;width:var(--cw);aspect-ratio:16/9;transform-style:preserve-3d;will-change:transform;cursor:grab} .wring__ring.grab{cursor:grabbing} .wring__card{position:absolute;inset:0;border-radius:3px;overflow:hidden; transform:rotateY(var(--a,0deg)) translateZ(var(--r,420px)) rotateZ(var(--tz,0deg)); box-shadow:0 26px 70px rgba(0,0,0,.55)} .wring__card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .wring__card::after{content:"";position:absolute;inset:0;background:#050506;opacity:var(--dm,0);pointer-events:none} /* 奥行きの減光 */ .no-js .wring{display:none} @media(prefers-reduced-motion:reduce){ .wring{display:none} } /* 回転が本体の章＝止まった輪は出さない */ .wring{--cw:clamp(240px,26vw,430px)} @media(min-width:641px){ .wring__stage{transform:translateY(-40px)} } /* v65.18: PCのみ輪全体を40px上へ＝一覧との視覚距離を詰める（translateは消失点ごと動く=投影不変。transformはstage側=ringのJS transformと衝突しない） */ @media(max-width:640px){ .wring{--cw:clamp(190px,58vw,300px);height:72svh} } /* WORK詳細 */ .whero2{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden} .whero2__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)} .whero2__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,6,8,.4),transparent 40%,rgba(6,6,8,.94) 100%)} .whero2__spot{position:absolute;inset:0;z-index:2;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(211,199,120,.14),transparent 60%);pointer-events:none} .whero2__in{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,9vh,6rem)} .whero2__meta{font-family:var(--en);font-weight:600;font-size:.76rem;letter-spacing:.16em;color:var(--olive-lit);margin-bottom:1.2rem;text-transform:uppercase} .whero2__ttl{font-family:var(--serif);font-size:clamp(1.9rem,5vw,3.7rem);font-weight:700;line-height:1.5;letter-spacing:.04em;max-width:22ch;text-wrap:balance} .whero2__st{margin-top:1.2rem;font-weight:500;color:var(--dim);max-width:44ch;line-height:2.1} .screening{background:radial-gradient(90% 70% at 50% 0%,var(--ink-2),var(--ink) 75%);padding-block:var(--sp)} .theater{max-width:1200px;margin-inline:auto;position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px;box-shadow:0 50px 130px rgba(0,0,0,.6)} .theater__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:opacity .5s} .theater__vin{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,transparent 45%,rgba(0,0,0,.6))} .theater__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(118px,13vw,158px);aspect-ratio:1; display:grid;place-items:center;background:rgba(5,5,6,.42);border:1px solid rgba(246,242,233,.34);border-radius:50%; backdrop-filter:blur(7px);color:var(--bone);cursor:pointer;transition:transform .55s var(--e),border-color .5s,background .5s,box-shadow .6s} .theater__play:hover{transform:translate(-50%,-50%) scale(1.07);border-color:rgba(211,199,120,.72);background:rgba(5,5,6,.55);box-shadow:0 0 44px rgba(211,199,120,.18)} .snp__ring{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);animation:snpSpin 16s linear infinite} /* 円周テキストが回る */ .snp__ring text{font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;fill:rgba(246,242,233,.92)} @keyframes snpSpin{to{transform:rotate(360deg)} } .snp__tri svg{width:clamp(20px,2.2vw,26px);height:auto;fill:var(--bone);display:block;margin-left:3px} .theater__ifr{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .5s} .theater.playing .theater__ifr{opacity:1;pointer-events:auto} .theater.playing .theater__img,.theater.playing .theater__play,.theater.playing .theater__vin{opacity:0;pointer-events:none} .theater__ifr iframe{width:100%;height:100%;border:0} .wmeta{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,5rem)} .wmeta__desc{font-weight:500;font-size:1.02rem;line-height:2.2;color:var(--dim)} .wmeta__dl{display:grid;gap:.9rem;align-content:start} .wmeta__row{display:grid;grid-template-columns:8em 1fr;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-d)} .wmeta__row dt{font-family:var(--en);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);padding-top:.3em} .wmeta__row dd{margin:0;font-size:.95rem} @media(max-width:760px){ .wmeta{grid-template-columns:1fr} } .sn-open{padding-top:clamp(78px,10.5svh,112px)} .sn-head{margin-bottom:clamp(1.1rem,2.4svh,1.8rem)} .sn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.9em;margin:0 0 1.1rem} .sn-meta span{font-size:.78rem;letter-spacing:.14em;color:var(--ash)} .sn-meta .sn-cat{font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(211,199,120,.78);border:1px solid rgba(211,199,120,.26);border-radius:99px;padding:.32em .75em} /* Works Explorerのチップと同じ筆 */ .sn-ttl{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,2.9vw,2.6rem);line-height:1.5;letter-spacing:.08em;color:var(--bone)} .sn-sub{display:block;margin-top:.45em;font-size:.44em;letter-spacing:.2em;color:var(--dim)} .sn-open .theater{width:min(100%,calc(58svh*16/9));margin-inline:auto} /* ファーストビューに収める＝高さ主導で幅を決める */ .sn-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:min(100%,calc(58svh*16/9));margin:1.15rem auto 0} .sn-lead{margin:0;font-size:.9rem;line-height:2;letter-spacing:.1em;color:var(--dim)} .sn-cinema{display:inline-flex;align-items:center;gap:.7em;flex-shrink:0;background:none;border:1px solid rgba(246,242,233,.24);border-radius:99px; color:var(--bone);font-size:.78rem;letter-spacing:.22em;padding:.72em 1.4em;cursor:pointer;transition:border-color .4s,color .4s,background .4s} .sn-cinema svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .sn-cinema:hover{border-color:rgba(211,199,120,.66);color:var(--olive-lit);background:rgba(211,199,120,.06)} @media(max-width:640px){ .sn-bar{flex-direction:column;align-items:flex-start;gap:1rem} } .story{display:flex;flex-direction:column;gap:clamp(4.5rem,9vw,8rem);padding-block:clamp(1rem,2vw,2rem)} .stb{position:relative} .stb__lb{display:block;position:relative;z-index:1;margin-bottom:1.4rem; font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ash)} .stb--lead .stb__lead{position:relative;z-index:1;max-width:30em;margin:0;font-family:var(--serif);font-weight:600; font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:2;letter-spacing:.08em;color:var(--bone)} .stb--duo{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.8rem,4vw,4rem);align-items:center} .stb--duo .stb__ph{margin:0;margin-left:calc(-1*clamp(0px,2vw,28px))} /* 写真が少し外へ食み出す＝誌面の呼吸 */ .stb--duo.rev .stb__ph{order:2;margin-left:0;margin-right:calc(-1*clamp(0px,2vw,28px))} .stb__ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block;box-shadow:0 22px 54px rgba(0,0,0,.4)} .stb__ph figcaption{margin-top:.7rem;font-size:.72rem;letter-spacing:.14em;color:var(--ash)} .stb__tx h3{margin:0 0 1.1em;font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.55rem);letter-spacing:.1em;color:var(--bone)} .stb__tx p{margin:0;font-size:.95rem;line-height:2.3;letter-spacing:.06em;color:var(--dim)} .stb--wide{margin:0;overflow:hidden; margin-left:calc(-1*max(clamp(20px,5vw,60px),var(--gnav-safe)));margin-right:calc(-1*clamp(20px,5vw,60px))} /* 全幅ブリード＝.ctの左右パディング（左は--gnav-safe・非対称）を正確に打ち消す。 100vw方式は非対称パディング+flex子で原点がズレる（実測41px・罠33と同族）→ct箱端方式が確実。超ワイドではctw幅で額装＝意図 */ .stb--wide img{width:100%;height:min(72svh,640px);object-fit:cover;display:block;transform:translateY(var(--py,0px)) scale(1.1)} /* scale=視差の逃げ代 */ .stb--wide figcaption{position:absolute;right:clamp(20px,5vw,60px);bottom:1.1rem;font-size:.72rem;letter-spacing:.16em; color:rgba(246,242,233,.78);text-shadow:0 1px 14px rgba(0,0,0,.75)} .stb--quote{max-width:34em;margin-inline:auto;text-align:center;padding-block:clamp(.5rem,2vw,1.5rem)} .stb--quote::before{content:"「";position:absolute;top:-.42em;left:50%;transform:translateX(-2.1em);z-index:0; font-family:var(--serif);font-size:clamp(4rem,7vw,6.5rem);line-height:1;color:rgba(211,199,120,.15);pointer-events:none} .stb--quote p{position:relative;z-index:1;margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.7rem);line-height:2.1;letter-spacing:.1em;color:var(--bone)} .stb--quote cite{display:block;margin-top:1.6rem;font-style:normal;font-size:.78rem;letter-spacing:.2em;color:var(--ash)} .stb--quote cite::before{content:"";display:inline-block;width:2.2em;height:1px;background:var(--olive-lit);vertical-align:.3em;margin-right:1em} .stb--gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:start} .stb--gallery figure{position:relative;margin:0;transition:transform .6s var(--e)} .stb--gallery figure:nth-child(1){transform:rotate(-1.8deg)} .stb--gallery figure:nth-child(2){transform:translateY(clamp(1.2rem,3vw,2.6rem)) rotate(1.2deg)} .stb--gallery figure:nth-child(3){transform:rotate(-.8deg) translateY(.6rem)} .stb--gallery figure:hover{transform:none} /* 触れると姿勢を正す＝現場写真の遊び */ .stb--gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;display:block;box-shadow:0 18px 44px rgba(0,0,0,.42)} .stb--gallery figcaption{margin-top:.6rem;font-size:.7rem;letter-spacing:.14em;color:var(--ash)} .stb--voice{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem)} .stb--voice .vc{padding:clamp(1.4rem,2.6vw,2.2rem);border:1px solid var(--line-d);border-radius:2px; background:linear-gradient(160deg,rgba(246,242,233,.025),transparent 55%)} .vc__role{font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(211,199,120,.75)} .vc__name{margin:.7em 0 1em;font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:.1em;color:var(--bone)} .vc__tx{margin:0;font-size:.9rem;line-height:2.2;color:var(--dim)} @media(max-width:820px){ .stb--duo,.stb--voice{grid-template-columns:1fr} .stb--duo .stb__ph,.stb--duo.rev .stb__ph{order:0;margin:0} .stb--gallery{grid-template-columns:1fr 1fr} } .reel--quad{grid-auto-columns:minmax(210px,23.4%)} @media(max-width:900px){ .reel--quad{grid-auto-columns:minmax(200px,44%)} } @media(max-width:600px){ .reel--quad{grid-auto-columns:78%} } .ofv{position:relative;overflow:hidden;min-height:100svh;display:grid;align-items:center;padding-block:clamp(70px,9svh,110px) clamp(2rem,5svh,3.5rem)} .ofv__bgv video{filter:saturate(.92) brightness(.42)} /* 地図の可読を守る暗さ */ .ofv>.ct{position:relative;z-index:1} /* 背景動画の上に内容 */ .ofv__grid{display:grid;grid-template-columns:minmax(300px,5fr) 6fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%} .ofv__eb{color:var(--olive-lit)} .ofv__ttl{margin:1.4rem 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.75;letter-spacing:.1em;color:var(--bone)} .ofv__lead{margin:1.6rem 0 0;font-size:.95rem;line-height:2.2;letter-spacing:.08em;color:var(--dim)} .ofv__links{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;margin-top:2.2rem} .ofv__hint{margin-top:1.5rem;font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash-dim)} .ofv__stage .kmap__cap{opacity:1} /* クローン側は常時表示（TOPはスクラブ出現） */ @media(max-width:900px){ .ofv{min-height:auto;padding-top:clamp(84px,12svh,110px)} .ofv__grid{grid-template-columns:1fr;gap:2.2rem} .ofv__stage{max-height:56svh} } /* --- 拠点章のラッパー＝識別色の供給元 --- */ .ofb--hy{--acc:var(--wine-lit);--accr:193,60,85} .ofb--ez{--acc:var(--teal-lit);--accr:72,174,198} /* --- メディアの帯＝フィルムストリップ（写真/動画+タグ+説明・横スクロール+sled操作） --- */ .ofstrip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,31vw,470px);gap:clamp(20px,2.4vw,34px); overflow-x:auto;padding-bottom:1.2rem;cursor:grab; margin-left:calc(-1*max(clamp(20px,5vw,60px),var(--gnav-safe)));margin-right:calc(-1*clamp(20px,5vw,60px)); /* ct箱端ブリード（左は--gnav-safe・v53 wideと同式） */ padding-left:max(clamp(20px,5vw,60px),var(--gnav-safe));padding-right:clamp(20px,5vw,60px); scrollbar-width:none} .ofstrip.grabbing{cursor:grabbing} .ofstrip.grabbing .ofs{pointer-events:none} /* 掴んでる間は札のhoverを殺す＝滑りに集中（v45ドラッグと同思想） */ .ofstrip::-webkit-scrollbar{display:none} /* 操作はsled+ホイール+ドラッグに集約 */ .ofs{margin:0} /* figureのUA余白(16px 40px)を殺す＝コラム内で痩せる事故の根治 */ .ofs:nth-child(even){margin-top:clamp(36px,4.8vw,80px)} .ofs__ph{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:#0D0D11; transform:skewX(var(--sk,0deg));will-change:transform} .ofs__ph img,.ofs__ph video{width:100%;height:100%;object-fit:cover;display:block; transform:translateX(var(--ix,0px)) scale(1.14);transition:transform .5s var(--e)} /* scale=パララックスの逃げ代・--ixはJSが供給 */ .ofs:hover .ofs__ph img,.ofs:hover .ofs__ph video{transform:translateX(var(--ix,0px)) scale(1.19)} .ofs__ph::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .5s;pointer-events:none} .ofs:hover .ofs__ph::after{border-color:rgba(var(--accr,211,199,120),.45)} /* 触れると拠点色の額縁 */ .ofs__tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase; color:var(--bone);background:rgba(5,5,6,.55);border:1px solid rgba(var(--accr,211,199,120),.5);border-radius:99px;padding:.34em .8em;backdrop-filter:blur(4px)} .ofs__cap{margin:.75rem 0 0;font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.08em;color:var(--bone)} .ofs__tx{margin:.45rem 0 0;font-size:.82rem;line-height:1.95;letter-spacing:.05em;color:var(--dim)} @media(max-width:600px){ .ofstrip{grid-auto-columns:64vw} .ofs:nth-child(even){margin-top:22px} } /* 罠34準拠＝vw指定。縦長カードはスマホ64vw */ /* --- アクセス（ダーク地図+交通案内） --- */ .ofacc{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start} .ofmap{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;border:1px solid var(--line-d);background:#0D0D11} .ofmap iframe{width:100%;height:100%;border:0;display:block;pointer-events:none; /* 誤スクロール防止＝タップで解禁 */ filter:invert(92%) hue-rotate(180deg) saturate(.62) brightness(.92) contrast(.95)} /* 世界観に合わせたダーク地図 */ .ofmap.live iframe{pointer-events:auto} .ofmap__shield{position:absolute;inset:0;z-index:2;display:grid;place-items:center;cursor:pointer;background:rgba(5,5,6,.18);transition:opacity .45s,visibility .45s} .ofmap__shield span{font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone); background:rgba(5,5,6,.6);border:1px solid rgba(246,242,233,.3);border-radius:99px;padding:.7em 1.5em;backdrop-filter:blur(5px)} .ofmap.live .ofmap__shield{opacity:0;visibility:hidden} .ofacc__dl{display:grid;gap:.85rem;align-content:start} .ofacc__row{display:grid;grid-template-columns:6.5em 1fr;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line-d)} .ofacc__row dt{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);padding-top:.3em} .ofacc__row dd{margin:0;font-size:.88rem;line-height:1.9;color:var(--dim)} .ofacc__btn{display:inline-flex;align-items:center;gap:.7em;margin-top:.4rem;justify-self:start; border:1px solid rgba(var(--accr,211,199,120),.4);border-radius:99px;padding:.7em 1.4em;color:var(--bone); font-size:.78rem;letter-spacing:.18em;text-decoration:none;transition:border-color .4s,color .4s,background .4s} .ofacc__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ofacc__btn:hover{border-color:var(--acc,var(--olive-lit));color:var(--acc,var(--olive-lit));background:rgba(var(--accr,211,199,120),.06)} .ofb__cross{display:flex;justify-content:flex-end;margin-top:clamp(2rem,4vw,3rem)} @media(max-width:820px){ .ofacc{grid-template-columns:1fr} } .svh{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;padding-block:clamp(90px,13svh,140px) clamp(3rem,7svh,5rem)} .svh__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .svh__bg video,.svh__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;filter:saturate(.9) brightness(.34)} .svh.is-1 .svh__bg .m1,.svh.is-2 .svh__bg .m2,.svh.is-3 .svh__bg .m3,.svh.is-4 .svh__bg .m4{opacity:1} .svh__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,13,.92) 0%,rgba(10,10,13,.66) 46%,rgba(10,10,13,.4) 100%)} .svh>.ct{position:relative;z-index:1} .svh__ttl{margin:1.4rem 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.7;letter-spacing:.1em;color:var(--bone)} .svh__lead{margin:1.5rem 0 0;font-size:.95rem;line-height:2.1;letter-spacing:.08em;color:var(--dim)} /* 番号インデックス＝hoverで背景に各事業の気配・クリックで章へ滑走 */ .svix{margin-top:clamp(2.2rem,4.5svh,3.4rem);display:flex;flex-direction:column;border-top:1px solid var(--line-d)} .svix a{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:1.2em; padding:clamp(.9rem,1.8svh,1.3rem) .2rem;border-bottom:1px solid var(--line-d);color:inherit;text-decoration:none; transition:padding-left .5s var(--e),background .5s} .svix a:hover{padding-left:1.2rem;background:linear-gradient(90deg,rgba(211,199,120,.05),transparent 70%)} .svix__no{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.22em;color:rgba(211,199,120,.7)} .svix__t{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:.1em;color:var(--bone);transition:color .4s} .svix a:hover .svix__t{color:#EDE3AC} .svix__en{font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)} .svix__ar{font-family:var(--en);color:var(--ash);transition:transform .5s var(--e),color .4s} .svix a:hover .svix__ar{transform:translateX(8px);color:var(--olive-lit)} /* --- 4事業の章＝フルスクリーンの上映プログラム --- */ .svch{position:relative;min-height:92svh;display:grid;align-items:center;padding-block:clamp(3.5rem,8svh,6rem)} .svch__grid{display:grid;grid-template-columns:6.2fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center} .svch.rev .svch__grid{grid-template-columns:5fr 6.2fr} .svch.rev .svch__media{order:2} .svch__media{position:relative;isolation:isolate} .svch__ph{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:#0D0D11;box-shadow:0 34px 90px rgba(0,0,0,.5)} .svch__ph img,.svch__ph video{width:100%;height:100%;object-fit:cover;display:block;transform:translateY(var(--py,0px)) scale(1.12);filter:saturate(.98) brightness(.9)} /* --py=視差 */ .svch__ph::after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,transparent 43%,rgba(255,253,244,.13) 50%,transparent 57%);transform:translateX(-80%);transition:transform 1s var(--e)} .svch:hover .svch__ph::after{transform:translateX(80%)} /* 映写光の一閃＝共通の筆 */ .svch__no{position:absolute;z-index:2;right:-.18em;top:-.72em;font-family:var(--en);font-weight:600;font-size:clamp(4.6rem,9vw,8.4rem);line-height:1; color:transparent;-webkit-text-stroke:1px rgba(246,242,233,.22);pointer-events:none;letter-spacing:.02em} /* 番組番号＝媒体に半分乗る抜き数字 */ .svch.rev .svch__no{right:auto;left:-.18em} .svch__pr{font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(211,199,120,.75)} .svch__t{margin:.9rem 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.75;letter-spacing:.09em;color:var(--bone)} .svch__jp{display:block;margin-top:.6em;font-size:.5em;letter-spacing:.22em;color:var(--ash)} .svch__d{margin:1.4rem 0 0;max-width:34em;font-size:.94rem;line-height:2.25;letter-spacing:.06em;color:var(--dim)} .svch__tags{display:flex;flex-wrap:wrap;gap:.6rem .7rem;margin-top:1.6rem} .svch__tags span{font-size:.74rem;letter-spacing:.12em;color:var(--bone-2);border:1px solid rgba(246,242,233,.2);border-radius:99px;padding:.42em .95em;transition:border-color .4s,color .4s} .svch:hover .svch__tags span{border-color:rgba(211,199,120,.35)} .svch__act{margin-top:2rem} .svnav{position:fixed;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:1.1rem; opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s} body.sv-on .svnav{opacity:1;visibility:visible} .svnav a{position:relative;display:block;width:9px;height:9px;border:1px solid rgba(246,242,233,.4);border-radius:50%;transition:background .4s,border-color .4s,transform .4s var(--e)} .svnav a.on{background:var(--olive-lit);border-color:var(--olive-lit);transform:scale(1.25)} .svnav a i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-style:normal;white-space:nowrap; font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash); opacity:0;transition:opacity .35s} .svnav a:hover i,.svnav a.on i{opacity:1} /* --- Process＝金の線が降りて工程が灯る --- */ .svproc{position:relative;margin-top:1.8rem;padding-left:clamp(1.6rem,3vw,2.6rem)} .svproc::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line-d)} /* 線路 */ .svproc__bar{position:absolute;left:6px;top:6px;width:1px;height:calc(var(--pp,0)*100%);max-height:calc(100% - 12px); background:linear-gradient(180deg,var(--olive-lit),rgba(211,199,120,.25));box-shadow:0 0 10px rgba(211,199,120,.5)} /* 進行の金線 */ .svproc__it{position:relative;padding:1.1rem 0 1.5rem;opacity:.32;transform:translateX(10px);transition:opacity .7s var(--e),transform .7s var(--e)} .svproc__it.on{opacity:1;transform:none} .svproc__it::before{content:"";position:absolute;left:calc(-1*clamp(1.6rem,3vw,2.6rem) + 3px);top:1.65rem;width:7px;height:7px;border-radius:50%; background:#0A0A0D;border:1px solid rgba(246,242,233,.4);transition:background .5s,border-color .5s,box-shadow .5s} .svproc__it.on::before{background:var(--olive-lit);border-color:var(--olive-lit);box-shadow:0 0 10px rgba(211,199,120,.7)} /* 灯る */ .svproc__n{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(211,199,120,.7)} .svproc__t{margin:.5rem 0 .4rem;font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:.08em;color:var(--bone)} .svproc__d{margin:0;max-width:38em;font-size:.9rem;line-height:2.1;color:var(--dim)} /* --- Fee＝考え方を三枚の券で --- */ .svfee{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem);margin-top:1.8rem} .svfee__c{position:relative;padding:clamp(1.3rem,2.4vw,2rem);border:1px solid var(--line-d);border-radius:2px; background:linear-gradient(165deg,rgba(246,242,233,.03),transparent 55%);transition:border-color .5s,transform .5s var(--e)} .svfee__c:hover{border-color:rgba(211,199,120,.4);transform:translateY(-4px)} .svfee__c::before{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;border-radius:50%;background:#0A0A0D;border:1px solid var(--line-d)} /* 半券のパンチ穴 */ .svfee__n{font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.3em;color:rgba(211,199,120,.7)} .svfee__t{margin:.8rem 0 .7rem;font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:.1em;color:var(--bone)} .svfee__d{margin:0;font-size:.86rem;line-height:2.05;color:var(--dim)} @media(max-width:940px){ .svnav{display:none} .svch{min-height:auto} .svch__grid,.svch.rev .svch__grid{grid-template-columns:1fr} .svch.rev .svch__media{order:0} .svch__no{font-size:clamp(3.6rem,16vw,5.5rem)} .svfee{grid-template-columns:1fr} .svix a{grid-template-columns:auto 1fr auto} .svix__en{display:none} } .memx{padding-block:clamp(2.2rem,5svh,4rem)} .memx__grid{display:grid;grid-template-columns:6fr 5.5fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center} .memx.rev .memx__grid{grid-template-columns:5.5fr 6fr} .memx.rev .memx__ph{order:2;margin-right:calc(-1*clamp(20px,5vw,60px));margin-left:0} /* 写真は紙面の外へブリード（ct箱端方式） */ .memx__ph{margin-left:calc(-1*max(clamp(20px,5vw,60px),var(--gnav-safe)))} .memx__ph img{width:100%;height:min(78svh,720px);object-fit:cover;display:block;border-radius:2px;box-shadow:0 34px 90px rgba(0,0,0,.5)} .memx__lb{font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(211,199,120,.75)} .memx__en{margin:.9rem 0 0;font-family:var(--en);font-weight:600;font-size:clamp(2rem,4.6vw,4rem);line-height:1.04;letter-spacing:.04em;color:var(--bone)} .memx__nm{margin:1rem 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:.14em;color:var(--bone)} .memx__rl{display:inline-block;margin-top:.9rem;font-size:.72rem;letter-spacing:.18em;color:rgba(211,199,120,.78);border:1px solid rgba(211,199,120,.26);border-radius:99px;padding:.4em 1em} .memx__tx{margin:1.3rem 0 0;max-width:34em;font-size:.92rem;line-height:2.2;letter-spacing:.06em;color:var(--dim)} .memx__act{margin:1.8rem 0 0} .pbtn{display:inline-flex;align-items:center;gap:1.1em;background:none;border:0;padding:.3em .2em;color:var(--bone);cursor:pointer} .pbtn__c{position:relative;display:grid;place-items:center;width:48px;height:48px;flex-shrink:0} .pbtn__c svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} /* 円弧は12時始まり */ .pbtn__c .tr{fill:none;stroke:rgba(246,242,233,.26);stroke-width:1} .pbtn__c .arc{fill:none;stroke:var(--olive-lit);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--e)} .pbtn:hover .pbtn__c .arc,.pbtn:focus-visible .pbtn__c .arc{stroke-dashoffset:0} /* 金の円弧が一周 */ .pbtn__c i{position:absolute;width:13px;height:1.4px;background:var(--bone);transition:background .45s,transform .6s var(--e)} .pbtn__c i:last-child{transform:rotate(90deg)} .pbtn:hover .pbtn__c i{background:var(--olive-lit)} .pbtn:hover .pbtn__c i:first-child{transform:rotate(180deg)} .pbtn:hover .pbtn__c i:last-child{transform:rotate(270deg)} /* ＋ごと90°回る */ .pbtn__tx{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;font-size:.86rem;letter-spacing:.16em;transition:letter-spacing .5s var(--e)} .pbtn__tx em{font-style:normal;font-family:var(--en);font-weight:600;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);transition:color .45s} .pbtn:hover .pbtn__tx{letter-spacing:.24em} .pbtn:hover .pbtn__tx em{color:rgba(211,199,120,.8)} .pbtn__tx::after{content:"";width:100%;height:1px;background:linear-gradient(90deg,var(--olive-lit),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e)} .pbtn:hover .pbtn__tx::after{transform:scaleX(1)} /* 罫が金で走る */ .memx__ph{cursor:pointer;overflow:hidden;border-radius:2px} .memx__ph img{filter:grayscale(1) contrast(1.05) brightness(.96);transition:filter .8s ease,transform .9s var(--e)} .memx__ph:hover img,.memx__ph:focus-visible img,.memx:has(.pbtn:hover) .memx__ph img{filter:grayscale(0) contrast(1.02);transform:scale(1.045)} .memx__ph::after{content:"";position:absolute;inset:-30% -60%;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,transparent 44%,rgba(255,253,244,.14) 50%,transparent 56%);transform:translateX(-80%);transition:transform 1s var(--e)} .memx__ph:hover::after,.memx:has(.pbtn:hover) .memx__ph::after{transform:translateX(80%)} /* 一閃＝共通の筆 */ .memx__ph{position:relative} /* v63.1: 登場の振り付け＝写真ワイプ+EN名の行起こし+要素の時差現像。背後に巨大ゴースト名がドリフト */ .memx{overflow:hidden} .memx__bg{position:absolute;z-index:0;top:50%;left:0;transform:translateY(-50%);white-space:nowrap;pointer-events:none; font-family:var(--en);font-weight:600;font-size:clamp(7rem,19vw,17rem);line-height:1;letter-spacing:.06em; color:transparent;-webkit-text-stroke:1px rgba(246,242,233,.07);opacity:0;transition:opacity 1.2s ease .5s} .memx.play .memx__bg{opacity:1;animation:memDrift 60s linear infinite} .memx.rev .memx__bg{left:auto;right:0;animation-direction:reverse} @keyframes memDrift{from{translate:0 0} to{translate:-6% 0} } .memx__grid{position:relative;z-index:1} .js .memx .memx__ph{clip-path:inset(0 100% 0 0)} .js .memx.rev .memx__ph{clip-path:inset(0 0 0 100%)} .memx.play .memx__ph{animation:memWipe 1.15s var(--e) .1s both} @keyframes memWipe{to{clip-path:inset(0 0 0 0)} } .memx.play .memx__ph img{animation:memZoom 1.6s var(--e) .1s backwards} /* both禁止＝完走後にhoverズームへ主導権を返す */ @keyframes memZoom{from{transform:scale(1.22)} to{transform:scale(1)} } .memx__en span{display:block;overflow:hidden} .memx__en i{display:block;font-style:normal;transform:translateY(112%)} .memx.play .memx__en i{animation:memRise .9s var(--e) both} .memx.play .memx__en span:nth-child(1) i{animation-delay:.45s} .memx.play .memx__en span:nth-child(2) i{animation-delay:.58s} @keyframes memRise{to{transform:translateY(0)} } .js .memx .memx__lb,.js .memx .memx__nm,.js .memx .memx__rl,.js .memx .memx__tx,.js .memx .memx__act{opacity:0;transform:translateY(16px)} .memx.play .memx__lb,.memx.play .memx__nm,.memx.play .memx__rl,.memx.play .memx__tx,.memx.play .memx__act{animation:memIn .8s var(--e) both} .memx.play .memx__lb{animation-delay:.35s} .memx.play .memx__nm{animation-delay:.72s} .memx.play .memx__rl{animation-delay:.82s} .memx.play .memx__tx{animation-delay:.92s} .memx.play .memx__act{animation-delay:1.05s} @keyframes memIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} } @media(max-width:900px){.memx__grid,.memx.rev .memx__grid{grid-template-columns:1fr} .memx.rev .memx__ph{order:0;margin:0} .memx__ph{margin:0} .memx__ph img{height:min(52svh,440px)} .memx__bg{font-size:clamp(4.5rem,22vw,8rem)} } @media(prefers-reduced-motion:reduce){.js .memx .memx__ph{clip-path:none} .memx__en i{transform:none} .js .memx .memx__lb,.js .memx .memx__nm,.js .memx .memx__rl,.js .memx .memx__tx,.js .memx .memx__act{opacity:1;transform:none} .memx.play .memx__bg{animation:none} .memx__ph img{filter:grayscale(0)} /* reduce=最初から色（演出なし） */ } /* --- 詳細ポップアップ＝✕常設・ESC/背景クリックで閉じる・中身はパネル内スクロール --- */ .mmx{position:fixed;inset:0;z-index:540;display:grid;place-items:center;padding:clamp(14px,3vw,40px); opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s} .mmx.on{opacity:1;visibility:visible} .mmx__scrim{position:absolute;inset:0;background:rgba(5,5,6,.78);backdrop-filter:blur(6px);cursor:pointer} .mmx__panel{position:relative;display:grid;grid-template-columns:5fr 7fr;width:min(1060px,100%);max-height:min(86svh,760px); overflow:hidden;background:#101015;border:1px solid rgba(246,242,233,.14);border-radius:3px;box-shadow:0 60px 140px rgba(0,0,0,.6); transform:translateY(16px) scale(.985);transition:transform .5s var(--e)} .mmx.on .mmx__panel{transform:none} .mmx__ph{min-height:0} .mmx__ph img{width:100%;height:100%;object-fit:cover;display:block} .mmx__bd{min-height:0;overflow-y:auto;padding:clamp(1.6rem,3.2vw,2.8rem);scrollbar-width:thin;scrollbar-color:var(--ash-dim) transparent} .mmx__en{margin:.8rem 0 0;font-family:var(--en);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:.04em;color:var(--bone)} .mmx__nm{margin:.7rem 0 0;font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:.14em;color:var(--bone)} .mmx__txt{margin-top:1.5rem} .mmx__txt p{margin:0 0 1.15em;font-size:.9rem;line-height:2.15;letter-spacing:.05em;color:var(--dim)} .mmx__x{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:46px;height:46px; background:rgba(5,5,6,.55);border:1px solid rgba(246,242,233,.3);border-radius:50%;color:var(--bone);cursor:pointer; backdrop-filter:blur(5px);transition:border-color .4s,color .4s,transform .45s var(--e)} .mmx__x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round} .mmx__x:hover{border-color:rgba(211,199,120,.7);color:var(--olive-lit);transform:rotate(90deg)} .mmx__phlb{position:absolute;left:14px;bottom:12px;font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,242,233,.7);text-shadow:0 1px 10px rgba(0,0,0,.8)} .mmx__ph{position:relative} .mmx__dl{display:grid;gap:.7rem;margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line-d)} .mmx__dl>div{display:grid;grid-template-columns:9em 1fr;gap:1rem} .mmx__dl dt{font-size:.72rem;letter-spacing:.18em;color:var(--ash);padding-top:.25em} .mmx__dl dd{margin:0;font-size:.86rem;line-height:1.95;color:var(--dim)} .mmx__gal{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.8rem} .mmx__gal figure{margin:0} .mmx__gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:block} .mmx__gal figcaption{margin-top:.5rem;font-size:.68rem;letter-spacing:.14em;color:var(--ash)} .mmx__h4{margin:2rem 0 .8rem;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(211,199,120,.75)} .mmx__tbl{display:grid;gap:0;margin:0;border-top:1px solid var(--line-d)} .mmx__tbl>div{display:grid;grid-template-columns:5em 1fr;gap:1rem;padding:.72rem .1rem;border-bottom:1px solid var(--line-d)} .mmx__tbl dt{font-family:var(--en);font-weight:600;font-size:.78rem;letter-spacing:.14em;color:var(--ash);padding-top:.15em} .mmx__tbl dd{margin:0;font-size:.86rem;line-height:1.9;color:var(--dim)} body.mmx-lock{overflow:hidden} @media(max-width:760px){ .mmx__panel{grid-template-columns:1fr;max-height:92svh;overflow-y:auto} .mmx__ph img{height:38svh} .mmx__bd{overflow:visible} } @media(prefers-reduced-motion:reduce){ .svh__bg video,.svh__bg img{transition:none} .svch__ph::after{display:none} .svproc__it{opacity:1;transform:none} .svproc__bar{height:100%} } /* ============ v27: ヘッダー Companyドロップダウン（Philosophy/拠点案内もこの傘下へ） ============ */ .hd__nav .hd__mbx a::after{content:none} /* navの下線演出はメニュー項目には出さない */ /* ============ v27: Company統合ページ（挨拶/概要/沿革/Member＝ページ内アンカー） ============ */ #co-greet,#co-about,#co-history,#co-member,#of-hy,#of-ez{scroll-margin-top:84px} /* 固定ヘッダー分の着地余白 */ .cog{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:clamp(1.8rem,4.5vw,4.5rem);margin-top:2.2rem} .cog__txt{margin-top:1.4rem;font-family:var(--serif);font-weight:600;font-size:clamp(.92rem,1.2vw,1rem);line-height:var(--lh-voice);letter-spacing:var(--ls-voice);color:var(--dim);max-width:46ch} .cog__txt p+p{margin-top:1.5em} .cog__txt .u2{color:var(--wine-lit);font-style:normal} @media(max-width:820px){ .cog{grid-template-columns:1fr} } /* ============ v27: 沿革クロニクル＝「歩み」×「その時代の作品」の切り替えスクラブ ============ sticky pin×420vh。スクロールで年が進み、左=歩み（受賞・講師・拠点）、右=その年の作品がコンパクトに流れる。 モード切替（歩み/作品）で主役を入れ替え。reduced-motion/モバイル=静的積み上げ+横スクロール帯 */ .chr{--laneOp:.72;--cdw:clamp(150px,15vw,210px)} .chr.m-works{--laneOp:1;--cdw:clamp(170px,18vw,250px)} .chr.m-works .chr__ms p{display:none} /* 作品モード＝歩みは見出しだけ残す */ .chr__tall{height:420vh;position:relative} .chr__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center} .chr__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(1.6rem,4vw,4rem);align-items:center;width:100%} .chr__year{font-family:var(--en);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(3.4rem,7vw,6rem);line-height:1;letter-spacing:.04em;color:var(--bone)} /* opsz96＝巨大表示の彫り */ .chr__year.tick{animation:chrTick .55s var(--e)} @keyframes chrTick{0%{opacity:.15;filter:blur(7px);transform:translateY(.16em)} 100%{opacity:1;filter:none;transform:none} } .chr__mode{display:inline-flex;gap:.3em;margin-top:1.5rem;border:1px solid var(--line-d);border-radius:2px;padding:.24em} /* ピル型→額縁型2px（自社規定：ピルはポップに寄る） */ .chr__mode button{border:0;background:none;color:var(--ash);font-family:var(--jp);font-weight:600;font-size:.72rem;letter-spacing:.22em;padding:.45em 1.25em;border-radius:2px;cursor:pointer;transition:.35s} .chr__mode button.on{color:var(--ink);background:var(--olive-lit)} .chr__mss{position:relative;margin-top:1.7rem;min-height:11em} .chr__ms{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .6s ease,transform .6s var(--e),filter .6s ease;pointer-events:none} .chr__ms.on{opacity:1;transform:none;filter:none} .chr__ms .tag{font-family:var(--en);font-weight:700;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--olive-lit)} .chr__ms h3{margin-top:.55em;font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,1.55vw,1.38rem);letter-spacing:.06em;line-height:1.85;color:var(--bone)} .chr__ms p{margin-top:.8em;font-size:.84rem;line-height:2.05;color:var(--dim);max-width:36ch} .chr__lanes{position:relative;height:min(56svh,470px)} .chr__era{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(.8rem,1.6vw,1.3rem);opacity:0;transition:opacity .55s ease;pointer-events:none} .chr__era.on{opacity:var(--laneOp)} .chr__lane{display:flex;gap:clamp(.7rem,1.2vw,1rem);will-change:transform} .chr__lane.l2{margin-left:clamp(2rem,5vw,4.5rem)} /* 2本目は位相をずらす＝流れの視差 */ .chr__cd{flex:none;width:var(--cdw);aspect-ratio:16/9;position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line-d);background:linear-gradient(135deg,#15161c,#0b0b0f);transition:width .5s var(--e)} /* 角丸2px統一 */ .chr__cd::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 120% at 22% 0%,rgba(211,199,120,.13),transparent 62%)} .chr__cd:nth-child(2n)::before{background:radial-gradient(130% 120% at 80% 0%,rgba(72,174,198,.13),transparent 62%)} .chr__cd:nth-child(3n)::before{background:radial-gradient(130% 120% at 50% 100%,rgba(193,60,85,.14),transparent 62%)} .chr__cd .yr{position:absolute;top:.65em;left:.85em;font-family:var(--en);font-weight:700;font-size:.55rem;letter-spacing:.22em;color:rgba(246,242,233,.5)} .chr__cd b{position:absolute;left:.85em;right:.85em;bottom:.7em;font-weight:600;font-size:.67rem;letter-spacing:.06em;line-height:1.6;color:var(--bone)} /* v30: 沿革の背景＝年代ごとの代表映像がスクロールで切り替わる（クロスフェード＋スクロール連動ケンバーンズ）。 素材は仮（hist-YYYY.jpg・Flickr CC＝後日それぞれの実素材/動画へ差し替え）。言葉側（左）を深く落として可読性を守る */ .chr__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#08080b} .chr__bgi{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;will-change:opacity} .chr__bgi.on{opacity:1} .chr__bgi img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transform-origin:60% 45%; /* 記憶の映像＝やや退色・沈める下地。金/ワインの語彙を殺さず、実写が入っても喧嘩しない */ filter:grayscale(.34) contrast(1.05) brightness(.58) saturate(.82)} .chr__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(6,6,9,.96) 0%,rgba(6,6,9,.86) 32%,rgba(6,6,9,.5) 66%,rgba(6,6,9,.72) 100%), linear-gradient(0deg,rgba(6,6,9,.84),rgba(6,6,9,.12) 42%,rgba(6,6,9,.62))} .chr__grid{position:relative;z-index:2} /* 言葉・年号・レーンは背景の上へ */ /* 静的モード（reduced-motion／モバイル）＝年ごとの積み上げ+ネイティブ横スクロール帯 */ @media (prefers-reduced-motion:reduce),(max-width:820px){ .chr__tall{height:auto} .chr__pin{position:relative;height:auto;overflow:visible} .chr__bg{display:none} /* v30: フルブリード背景はデスクトップのスクラブ専用。モバイル/reduceは静的積み上げ */ .chr__grid{grid-template-columns:1fr;align-items:start} .chr__year,.chr__mode{display:none} .chr__mss{min-height:0;margin-top:.4rem} .chr__ms{position:relative;opacity:1;transform:none;filter:none;pointer-events:auto;margin-top:1.8rem} .chr__lanes{height:auto;margin-top:.6rem} .chr__era{position:relative;inset:auto;opacity:1;pointer-events:auto;margin-top:1.6rem} .chr__era::before{content:attr(data-year);display:block;font-family:var(--en);font-weight:800;font-size:1.5rem;letter-spacing:.06em;color:var(--bone);margin-bottom:.6rem} .chr__lane{overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch} .chr__lane.l2{margin-left:0} } /* ============ OPENING = 開演（幕開け＋スポットライト） ============ */ @property --ir{syntax:'';inherits:false;initial-value:9%} .open{position:fixed;inset:0;z-index:7000;pointer-events:none;visibility:hidden} .open.done{display:none} .hero__iris{position:absolute;inset:0;z-index:2;pointer-events:none;display:none} .hero__ttl .ch{display:inline-block} @media(prefers-reduced-motion:no-preference){ .open{visibility:visible} /* ベルベットの緞帳（v26）＝参考写真準拠：①襞は細かく多く・山は彩度の高い赤の光・谷は深い影（コントラスト強） ②起毛=細かいノイズ＋大きなムラ（クラッシュベルベットの艶ムラ）の二層 ③襞の傾斜は非対称（光は狭く・影へは長く落ちる）。 ※displacement系フィルタは罠24（ガビガビ）＝使わない。すべてグラデとノイズの重ねで作る */ .open__c{position:absolute;top:-2%;bottom:-2%;width:51%;transform-origin:top center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.32'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg,rgba(0,0,0,.50) 0px,rgba(0,0,0,.12) 14px,rgba(224,58,50,.12) 21px,rgba(0,0,0,.14) 30px,rgba(0,0,0,.52) 47px), repeating-linear-gradient(90deg,rgba(0,0,0,.78) 0px,rgba(0,0,0,.22) 26px,rgba(226,56,48,.24) 35px,rgba(0,0,0,.24) 46px,rgba(0,0,0,.80) 96px), repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0px,rgba(0,0,0,0) 92px,rgba(0,0,0,.10) 166px,rgba(0,0,0,0) 206px,rgba(0,0,0,.58) 251px), linear-gradient(180deg,rgba(255,216,196,.10),rgba(255,216,196,0) 14%,rgba(0,0,0,0) 50%,rgba(0,0,0,.32) 84%,rgba(0,0,0,.55) 100%), linear-gradient(90deg,#1C0407 0%,#3C0A15 46%,#24060C 76%,#0E0203 100%); background-blend-mode:soft-light,soft-light,normal,normal,normal,normal,normal} /* 合わせ目＝先端の折り返し（返しの艶と、その奥の影）。緞帳の「厚み」はここで出る */ .open__c::after{content:"";position:absolute;top:0;bottom:0;width:96px} .open__c.l::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.38) 52%,rgba(255,238,214,.10) 80%,rgba(8,2,4,.92) 100%)} .open__c.r::after{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.38) 52%,rgba(255,238,214,.10) 80%,rgba(8,2,4,.92) 100%)} /* v26: 開きは2.7秒＝ゆっくり。skewX=裾が一拍遅れてついてくる（布の重さ）・背景ドリフト=襞が外側へ寄り集まる（引かれて布が畳まれる） */ .open__c.l{left:0;box-shadow:inset -46px 0 70px -34px rgba(0,0,0,.85);animation:opCl 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards,opClB 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards} .open__c.r{right:0;box-shadow:inset 46px 0 70px -34px rgba(0,0,0,.85);animation:opCr 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards,opCrB 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards} /* v65.11 R0：ロマンくん／ロマンスちゃんが、合わせ目から左右へ小走りして幕を開ける。 外箱は幕と同じ尺・イージングで移動し、内箱だけを細かく上下させる＝translate競合なし。 ロマンスちゃんは暫定造形を参照した方向確認用素材。キャラクター確定後は同名画像の差し替えだけで済む。 */ .open__cast{--cast-w:clamp(92px,9.5vw,148px);position:absolute;left:50%;bottom:clamp(24px,7svh,74px);z-index:5;width:var(--cast-w);opacity:0;will-change:transform,opacity} .open__cast.l{translate:-88% 0;animation:opCastL 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards} .open__cast.r{translate:-12% 0;animation:opCastR 2.7s cubic-bezier(.66,0,.16,1) 1.1s forwards} .open__cast-step{position:relative;display:block;width:100%;transform-origin:50% 92%;animation:opTrot .22s steps(2,end) 1.1s 13} .open__cast-step::after{content:"";position:absolute;left:23%;right:23%;bottom:3%;height:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(246,242,233,.34),transparent 68%);filter:blur(2px);opacity:.42;animation:opPuff .22s steps(2,end) 1.1s 13} .open__cast img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 12px rgba(0,0,0,.4))} .open__glow{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;background:radial-gradient(46% 58% at 50% 44%,rgba(246,242,233,.17),rgba(211,199,120,.05) 46%,transparent 72%);animation:opGlow 1.3s ease .12s forwards} .open__slit{position:absolute;left:50%;top:5%;bottom:5%;width:2px;translate:-50%;background:linear-gradient(180deg,transparent,rgba(246,242,233,.95) 28% 72%,transparent);opacity:0;animation:opSlit 1.5s ease .3s forwards} .hero__iris{display:block;background:radial-gradient(circle at 50% 46%,transparent var(--ir,9%),rgba(4,4,6,.99) calc(var(--ir,9%) + 30%));animation:opIris 2.4s cubic-bezier(.6,.04,.25,1) 1.55s forwards} /* v26: 開きを2.7秒に伸ばした分、後続は+0.55s連鎖シフト（文字が幕より先に出ない） */ body.boot .hd{opacity:0;animation:opFade .9s ease 4.1s forwards} body.boot .hero__kick{opacity:0;animation:opUp .9s var(--e) 2.4s forwards} body.boot .hero__kick .ln{transform:scaleX(0);transform-origin:left;animation:opLn .9s var(--e) 2.6s forwards} body.boot .hero__ttl{animation:opTtl 2.6s var(--e) 2.6s both} /* 字間が広→締まる＝タイトルカードの貫禄 */ body.boot .hero__ttl .ch{opacity:0;transform:translateY(.14em);filter:blur(10px);animation:opCh 1.5s var(--e) var(--d,2.65s) forwards} /* にじみ出るように */ body.boot .hero__sub{opacity:0;animation:opUp 1s var(--e) 3.75s forwards} body.boot .hero__act{opacity:0;animation:opUp 1s var(--e) 4.1s forwards} body.boot .hero__rail,body.boot .hero__scroll,body.boot .hero__mute{opacity:0;animation:opFade 1.1s ease 4.5s forwards} body.boot .hero__nws{opacity:0;animation:opFade 1.1s ease 4.7s forwards} /* v41: 注目Newsはレールの半拍あとに灯る */ } /* 裾の遅れ（skewX）＝中盤で最大1.2度・端で戻る。やりすぎない布の柔らかさ */ @keyframes opCl{0%{transform:translateX(0) skewX(0)} 55%{transform:translateX(-44%) skewX(1.2deg)} 100%{transform:translateX(-103%) skewX(0)} } @keyframes opCr{0%{transform:translateX(0) skewX(0)} 55%{transform:translateX(44%) skewX(-1.2deg)} 100%{transform:translateX(103%) skewX(0)} } @keyframes opCastL{0%{opacity:0;transform:translateX(0)} 4%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateX(-53vw)} } @keyframes opCastR{0%{opacity:0;transform:translateX(0)} 4%{opacity:1} 88%{opacity:1} 100%{opacity:0;transform:translateX(53vw)} } @keyframes opTrot{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-6px) rotate(1.4deg)} } @keyframes opPuff{0%,100%{opacity:.18;transform:scaleX(.72)} 50%{opacity:.5;transform:scaleX(1)} } /* 襞の寄り集まり＝布が引かれて畳まれる（fold3層だけを外側へ・周期の違いでひらひらの視差） */ @keyframes opClB{to{background-position:0 0,0 0,-34px 0,-60px 0,-98px 0,0 0,0 0} } @keyframes opCrB{to{background-position:0 0,0 0,34px 0,60px 0,98px 0,0 0,0 0} } @keyframes opGlow{0%{opacity:0} 16%{opacity:.9} 30%{opacity:.3} 46%{opacity:1} 62%{opacity:.5} 100%{opacity:.95} } @keyframes opSlit{0%{opacity:0;transform:scaleY(.12)} 30%{opacity:1;transform:scaleY(1)} 78%{opacity:1} 100%{opacity:0} } @keyframes opIris{to{--ir:125%;opacity:0} } @keyframes opFade{to{opacity:1} } @keyframes opUp{0%{opacity:0;transform:translateY(26px)} 100%{opacity:1;transform:none} } @keyframes opCh{to{opacity:1;transform:none;filter:blur(0)} } @keyframes opTtl{from{letter-spacing:.18em} to{letter-spacing:.06em} } /* 終値はCSSベースの.06emと一致させる */ @keyframes opLn{to{transform:scaleX(1)} } @media(max-width:600px) and (prefers-reduced-motion:no-preference){.open__cast{--cast-w:clamp(76px,23vw,104px);bottom:clamp(18px,8svh,58px)} } .spl{position:relative;background:#030304;overflow:clip;isolation:isolate;--irw:min(68svh,42vw)} /* アイリス径＝定着した看板・左下コピーと衝突しない実測値 */ .spl__tall{height:820vh} /* v60: プロローグ（Why+全景航路図）分の+160vh。既存パートの絶対尺は維持 */ .spl__pin{position:sticky;top:0;height:100svh;overflow:hidden;background: radial-gradient(72% 88% at 60% 54%,rgba(126,38,54,.07),transparent 62%), radial-gradient(60% 74% at 16% 60%,rgba(44,108,124,.055),transparent 64%),#030304} .spl__pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;background-image: linear-gradient(rgba(246,242,233,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(246,242,233,.017) 1px,transparent 1px);background-size:100% 25%,25% 100%; -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 76%);mask-image:radial-gradient(ellipse at center,#000,transparent 76%)} /* z1＝海の上にフィルムの質感を残す */ /* v57: 海のレイヤー＝SPOTLIGHTの舞台は海。幕開けは黒い劇場、看板の定着とともに海が現れる（JSがopacity駆動） */ .spl__ocean{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none} .spl__obase{position:absolute;inset:0;background: radial-gradient(90% 60% at 62% 58%,rgba(44,108,124,.12),transparent 66%), linear-gradient(180deg,#07121E 0%,#050E18 46%,#0A1C2C 57%,#02070D 100%)} .spl__bg{position:absolute;inset:0;opacity:0;visibility:hidden} .spl__bg svg{width:100%;height:100%;display:block} /* 実写差し替えスロット：.spl__bg 内に を置くだけでSVG風景の上に実写が乗る。トーンはサイトの闇に沈める */ .spl__bgph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--phf,saturate(.62) brightness(.5) contrast(1.05))} /* 幕別に調整するときは .spl__bg[data-spl-bg="N"]{--phf:…} で。には onerror="this.remove()" を付けて欠損時はSVG風景に戻す */ .spl__scrim{position:absolute;inset:0;background: linear-gradient(76deg,rgba(2,5,9,.8) 0%,rgba(2,5,9,.38) 34%,transparent 58%), linear-gradient(270deg,rgba(2,5,9,.48),transparent 20%), linear-gradient(0deg,rgba(2,5,9,.55),transparent 42%), linear-gradient(180deg,rgba(2,5,9,.5),transparent 30%)} /* 左下コピー・上部看板・右レール（朝焼けの明帯対策）の可読性 */ .spl__head{position:absolute;z-index:8;left:max(clamp(20px,5vw,60px),var(--gnav-safe));top:clamp(92px,13svh,138px);display:flex;gap:1.2rem;align-items:center} .spl__head::before{content:"";width:clamp(30px,5vw,72px);height:1px;background:linear-gradient(90deg,var(--olive-lit),transparent)} .spl__head .eyebrow{font-size:.64rem;color:rgba(211,199,120,.82)} .spl__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5} /* 光錐＝天井の灯体（apex固定・首振り）。conic＝角度で自然減衰＋縦マスク＝床へ向けて消える（v16踏襲） */ .spl__beam{position:absolute;z-index:3;left:50%;top:-10svh;width:170svh;height:140svh;translate:-50% 0;transform-origin:50% 0; pointer-events:none;mix-blend-mode:screen;filter:blur(6px);opacity:0;will-change:transform,opacity; background:conic-gradient(from 0deg at 50% 0%,transparent 47%,rgba(246,242,233,.08) 48.2%,rgba(246,242,233,.34) 50%,rgba(246,242,233,.08) 51.8%,transparent 53%); -webkit-mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.72) 48%,transparent 97%); mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.72) 48%,transparent 97%)} .spl__beam.b2{background:conic-gradient(from 0deg at 50% 0%,transparent 47.4%,rgba(211,199,120,.07) 48.5%,rgba(211,199,120,.24) 50%,rgba(193,60,85,.08) 51.5%,transparent 52.6%)} /* 床の光だまり＝光錐の底に追従（JSがtranslateX駆動） */ .spl__pool{position:absolute;z-index:2;left:50%;bottom:3svh;width:66svh;height:12svh;translate:-50% 0;pointer-events:none;opacity:0; background:radial-gradient(50% 50% at 50% 50%,rgba(246,242,233,.13),rgba(211,199,120,.05) 55%,transparent 78%);filter:blur(9px);mix-blend-mode:screen} /* SPOTLIGHT＝章の看板。探し当てられた後は上部に定着し、四幕の間もずっと「この光の中」を示し続ける */ .spl__word{position:absolute;z-index:6;left:50%;top:33%;display:flex;white-space:nowrap;pointer-events:none; font-family:var(--en);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(2.3rem,6.2vw,5.8rem);letter-spacing:.3em;line-height:1; transform:translateX(-50%) translateY(-50%);will-change:transform} .spl__word span{color:rgba(246,242,233,.07)} .spl__wsub{position:absolute;z-index:6;left:50%;top:19%;translate:-50% 0;display:flex;gap:1rem;align-items:center;opacity:0;pointer-events:none; font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(211,199,120,.8)} .spl__wsub::before,.spl__wsub::after{content:"";width:44px;height:1px;background:rgba(211,199,120,.35)} /* 四幕＝光だまり（アイリス）の中に現像される場面。開閉はJSが --iris（0〜1）で駆動 */ .spl__scene{position:absolute;inset:0;pointer-events:none} .spl__halo{position:absolute;z-index:1;left:60%;top:56%;translate:-50% -50%;width:calc(var(--irw)*1.55);aspect-ratio:1;border-radius:50%; opacity:calc(var(--iris,1)*.85);background:radial-gradient(closest-side,rgba(211,199,120,.075),rgba(246,242,233,.02) 55%,transparent 74%); filter:blur(18px);mix-blend-mode:screen} .spl__iris{position:absolute;z-index:2;left:60%;top:56%;translate:-50% -50%;width:var(--irw);aspect-ratio:1; clip-path:circle(calc(var(--iris,1)*50.5%) at 50% 50%); background:radial-gradient(closest-side,rgba(246,242,233,.05),rgba(211,199,120,.026) 52%,transparent 78%)} .spl__art{width:100%;height:100%;display:block} /* v57: 旧線画ユーティリティ（.ln/.dot等）は風景画SVG化で消費者ゼロ＝撤去済み */ .spl__cdir{font-family:var(--en);font-weight:600;font-size:30px;letter-spacing:.14em;fill:rgba(246,242,233,.5)} .spl__pro{position:absolute;z-index:5;left:max(clamp(20px,6vw,90px),var(--gnav-safe));top:28svh;width:min(44vw,540px);text-align:left;opacity:0;pointer-events:none;will-change:opacity,transform} .spl__prokick{display:flex;gap:1rem;align-items:center;font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(211,199,120,.8)} .spl__prokick::before{content:"";width:36px;height:1px;background:rgba(211,199,120,.32)} .spl__prottl{margin-top:1.3rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.9;letter-spacing:.06em;color:var(--bone);text-wrap:balance} @media(min-width:941px){ .spl__prottl{font-size:min(clamp(1.5rem,2.7vw,2.5rem),3.6svh)} } .spl__prolead{margin:1.3rem 0 0;max-width:40ch;font-family:var(--serif);font-weight:600;font-size:clamp(.86rem,1.1vw,.96rem);line-height:2.25;letter-spacing:.07em;color:rgba(246,242,233,.62)} /* 海図＝プロローグの主役。下半分にフルブリード（言葉は海図の左上の空に浮かぶ）。JSがopacity/上昇/金線/寄港地点灯を駆動 */ .spl__map{position:absolute;z-index:4;left:50%;bottom:max(2svh,18px);translate:-50% 0;width:min(92vw,1440px);opacity:0;pointer-events:none;will-change:opacity,transform} .spl__map .chlbl{font-family:var(--en);font-weight:800;font-size:40px;letter-spacing:.18em;fill:var(--bone)} .spl__map .chlbl--core{fill:#D3C778} .spl__map .chvb{font-family:var(--jp);font-weight:600;font-size:25px;letter-spacing:.3em;fill:rgba(246,242,233,.6)} /* 舟の灯のまたたき＝塵と同種の「空気の演出」だけ時間で動かす（スクラブ規律の例外・reduceでは静止） */ .chboat__glow{animation:chBoatTw 3.6s ease-in-out infinite} @keyframes chBoatTw{0%,100%{opacity:.55} 45%{opacity:1} 62%{opacity:.72} } @media(prefers-reduced-motion:reduce){.chboat__glow{animation:none} } /* 静的モード専用の全景リスト（デスクトップでは海図が担う）。行スタイルはここで定義し、各静的モードはdisplayだけ起こす */ .spl__steps{display:none;list-style:none;margin:0;padding:0} .spl__steps li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:1.2rem;padding:1.05rem 2px;border-bottom:1px solid var(--line-d)} .spl__steps li:first-child{border-top:1px solid var(--line-d)} .spl__steps b{font-family:var(--en);font-weight:800;font-size:1.35rem;letter-spacing:.14em;color:var(--bone)} .spl__steps i{font-style:normal;font-size:.8rem;letter-spacing:.12em;color:var(--dim);justify-self:end} .spl__wheel{position:absolute;z-index:2;left:60%;top:56%;translate:-50% -50%;width:calc(var(--irw)*1.3);aspect-ratio:1;pointer-events:none;opacity:0;will-change:transform,opacity; -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 76%,transparent 92%); mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 76%,transparent 92%)} /* 下弧は闇に沈める＝操舵台に隠れる舵輪の構図。左下コピーとの交差もここで消える */ .spl__wheel svg{width:100%;height:100%;display:block;overflow:visible} .spl__ghost{position:absolute;z-index:1;right:-.02em;top:50%;transform:translateY(-50%);opacity:0; font-family:var(--en);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(7rem,18vw,18rem);line-height:.78;letter-spacing:-.045em; color:transparent;-webkit-text-stroke:1px rgba(246,242,233,.06);text-transform:uppercase;white-space:nowrap} .spl__copy{position:absolute;z-index:4;left:max(clamp(20px,7vw,110px),var(--gnav-safe));bottom:clamp(86px,12svh,132px);max-width:min(38vw,500px);opacity:0} .spl__no{display:flex;align-items:center;gap:.85rem;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.28em;color:var(--olive-lit);text-transform:uppercase} .spl__no::after{content:"";width:72px;height:1px;background:linear-gradient(90deg,rgba(211,199,120,.7),transparent)} .spl__en{display:block;margin-top:.95rem;font-family:var(--en);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1;letter-spacing:.14em;color:var(--bone)} .spl__verb{margin-top:.75rem;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,5.2vw,5.6rem);line-height:1.18;letter-spacing:.06em;color:var(--bone)} /* 明朝の字間はサイト共通帯（.04〜.06em）に揃える */ .spl__desc{margin-top:1.25rem;max-width:38ch;font-family:var(--serif);font-weight:600;font-size:clamp(.86rem,1.1vw,.98rem);line-height:2.2;letter-spacing:.07em;color:rgba(246,242,233,.64)} /* 進行の目次（右）＝フィルムリーダーのカウンター＋四幕の名。看板の定着とともに現れる。 v59: 目次は操縦桿を兼ねる（クリックで各幕へ）。看板の定着前は visibility ごと眠らせる＝不可視のボタンがTab/クリックを受けない */ .spl__rail{position:absolute;z-index:7;right:clamp(26px,4vw,62px);top:50%;translate:0 -50%;display:grid;gap:1.5rem;justify-items:end;opacity:var(--spl-rail,0);visibility:hidden;pointer-events:none} .spl__rail.live{visibility:visible;pointer-events:auto} .spl__lead{position:relative;width:58px;height:58px;margin-bottom:.7rem;border:1px solid rgba(246,242,233,.24);border-radius:50%} .spl__lead::before{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:rgba(246,242,233,.12)} .spl__lead::after{content:"";position:absolute;top:50%;left:-6px;right:-6px;height:1px;background:rgba(246,242,233,.12)} .spl__lead b{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,#030304 58%,transparent 62%); font-family:var(--en);font-weight:600;font-size:.92rem;letter-spacing:.08em;color:var(--olive-lit);font-variant-numeric:tabular-nums} .spl__tick{display:grid;grid-template-columns:auto 46px;align-items:center;gap:.8rem;color:rgba(246,242,233,.22);transition:color .45s ease; border:0;background:none;padding:.2em 0;font:inherit;cursor:pointer} /* v59: button化のUA打ち消し */ .spl__tick b{font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.2em;text-align:right} .spl__tick i{display:block;justify-self:end;width:22px;height:1px;background:currentColor;transition:width .55s var(--e),box-shadow .45s} .spl__tick:hover{color:rgba(246,242,233,.55)} .spl__tick:focus-visible{outline:1px solid rgba(211,199,120,.8);outline-offset:5px} .spl__tick.on,.spl__tick.on:hover{color:var(--olive-lit)} @media(pointer:coarse){ .spl__tick{min-height:44px} } .spl__tick.on i{width:46px;box-shadow:0 0 12px rgba(211,199,120,.6)} /* 終幕＝二本の光が交差した中心に、一枚のスクリーンとコピーが定着する */ .spl__final{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform} /* visibility＝不可視のCTAがTabフォーカスを受けないように */ .spl__screen{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(72vw,1100px);aspect-ratio:16/9;border:1px solid rgba(246,242,233,.16); box-shadow:0 0 90px rgba(211,199,120,.05),inset 0 0 120px rgba(246,242,233,.02)} .spl__screen::before,.spl__screen::after{content:"";position:absolute;width:clamp(32px,6vw,84px);height:clamp(32px,6vw,84px);border-color:rgba(211,199,120,.7);border-style:solid} .spl__screen::before{left:-1px;top:-1px;border-width:1px 0 0 1px} .spl__screen::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0} /* v61: スクリーンに映写が始まる＝背景動画（取り急ぎtopview.mp4・本番差し替え）。トーンは闇に沈め、スクリムがコピーの可読性を守る */ .spl__filmv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.52) contrast(1.04)} .spl__filmsc{position:absolute;inset:0;background:radial-gradient(92% 84% at 50% 46%,rgba(2,5,9,.2),rgba(2,5,9,.66)),linear-gradient(0deg,rgba(2,5,9,.5),transparent 42%)} /* v61: 乗船券CTA＝「見る」でなく「乗る」。Service章Fee半券と同じ筆（パンチ穴+ミシン目・角丸2px規律の額装） */ .spl__ticket{position:relative;display:inline-flex;align-items:stretch;text-decoration:none;border:1px solid rgba(246,242,233,.3);background:rgba(3,3,4,.74);border-radius:2px;transition:transform .45s var(--e),box-shadow .45s,border-color .45s} .spl__ticket::before,.spl__ticket::after{content:"";position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#030304;border:1px solid rgba(246,242,233,.3);translate:0 -50%} .spl__ticket::before{left:-7px} .spl__ticket::after{right:-7px} .spl__tkl{display:flex;flex-direction:column;gap:.4rem;justify-content:center;padding:1.05rem 1.7rem;text-align:left} .spl__tkl b{font-family:var(--en);font-weight:800;font-size:.9rem;letter-spacing:.24em;color:var(--bone)} .spl__tkl i{font-style:normal;font-family:var(--en);font-weight:600;font-size:.53rem;letter-spacing:.18em;color:rgba(211,199,120,.78);text-transform:uppercase} .spl__tkr{display:flex;align-items:center;gap:.6rem;padding:1.05rem 1.5rem;border-left:1px dashed rgba(246,242,233,.38);font-weight:600;font-size:.85rem;letter-spacing:.12em;color:var(--bone);white-space:nowrap} .spl__ticket .ar{transition:translate .35s var(--e)} .spl__ticket:hover{transform:translateY(-3px);border-color:rgba(211,199,120,.55);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 30px rgba(211,199,120,.09)} .spl__ticket:hover .ar{translate:4px 0} .spl__ticket:focus-visible{outline:2px solid var(--olive-lit);outline-offset:4px} .spl__finalin{position:relative;z-index:2;max-width:min(84vw,820px);padding:2rem} .spl__path{display:flex;gap:.9rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:1.6rem; font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.24em;color:rgba(211,199,120,.78);text-transform:uppercase} .spl__path i{width:26px;height:1px;background:linear-gradient(90deg,rgba(211,199,120,.55),rgba(211,199,120,.12))} .spl__finalttl{margin-top:1.4rem;text-shadow:0 2px 28px rgba(2,5,9,.6);font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4.9vw,4.9rem);line-height:1.55;letter-spacing:.06em;text-wrap:balance} .spl__finallead{margin:1.7rem auto 0;max-width:50ch;font-family:var(--serif);font-weight:600;font-size:clamp(.86rem,1.15vw,1rem);line-height:2.25;letter-spacing:.07em;color:var(--dim)} .spl__finalact{margin-top:2rem} @media(max-width:940px){ .spl__tall{height:auto} .spl__pin{position:relative;height:auto;padding:clamp(9rem,24vw,11rem) 0 7rem} .spl__head{position:relative;left:auto;top:auto;margin:0 20px 3rem;padding-left:max(0px,calc(var(--gnav-safe) - 20px));opacity:1!important} .spl__beam,.spl__pool,.spl__dust,.spl__rail,.spl__ocean,.spl__wheel{display:none} /* 静的表示＝海はアイリスの絵が運ぶ。動かない舵輪は嘘になる＝出さない */ /* JS初期化（lApply(0,0)）が焼き込むインラインのopacity/色に負けないよう、静的表示は!importantで守る（罠＝v55と同じ守り方） */ .spl__word{position:relative;left:auto;top:auto;transform:none!important;justify-content:center;margin-bottom:.9rem;font-size:clamp(1.7rem,8.4vw,3rem);letter-spacing:.2em} .spl__word span{color:rgba(246,242,233,.88)!important;text-shadow:0 0 18px rgba(211,199,120,.3)!important} .spl__wsub{position:relative;left:auto;top:auto;translate:0 0;justify-content:center;opacity:1!important;margin-bottom:4.5rem} .spl__pro{position:relative;left:auto;top:auto;translate:0 0;width:auto;margin:0 20px 5rem;opacity:1!important;transform:none!important;pointer-events:auto} .spl__map{display:none} /* v61: 海図は縮むと読めない＝縦リスト(.spl__steps)が全景を運ぶ */ .spl__steps{display:block;margin:0 20px 5.5rem} .spl__filmv{opacity:1!important} /* JS初期化の焼き込み(opacity 0)に負けない＝静的では常時映写 */ .spl__ticket{max-width:100%} .spl__tkl{padding:1rem 1.1rem} .spl__tkl i{font-size:.55rem;letter-spacing:.08em} .spl__tkr{padding:1rem 1.05rem} .spl__scene{position:relative;inset:auto;padding:0 20px;margin-bottom:5.5rem;pointer-events:auto} .spl__halo{display:none} .spl__iris{position:relative;left:auto;top:auto;translate:0 0;width:min(86vw,520px);margin:0 auto;clip-path:none} .spl__ghost{opacity:1!important;right:0;top:12%;transform:none!important;font-size:clamp(4.6rem,24vw,7.5rem)} .spl__copy{position:relative;left:auto;bottom:auto;opacity:1!important;transform:none!important;max-width:none;margin-top:2.2rem;padding-left:max(0px,calc(var(--gnav-safe) - 20px))} .spl__verb{font-size:clamp(2rem,10vw,3.2rem);white-space:nowrap} .spl__desc{font-size:.9rem} .spl__final{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;min-height:90svh;margin-top:2rem;padding:7rem 20px;pointer-events:auto!important} .spl__screen{width:calc(100vw - 40px)} .spl__finalin{padding:1rem 0} } @media(prefers-reduced-motion:reduce){ .spl__tall{height:auto} .spl__pin{position:relative;height:auto;padding:7rem 0} .spl__head{position:relative;left:auto;top:auto;margin:0 max(20px,var(--gnav-safe)) 3rem} .spl__beam,.spl__pool,.spl__dust,.spl__rail,.spl__ocean,.spl__wheel{display:none} .spl__word{position:relative;left:auto;top:auto;transform:none;justify-content:center;margin-bottom:.9rem} .spl__word span{color:rgba(246,242,233,.88);text-shadow:0 0 18px rgba(211,199,120,.3)} .spl__wsub{position:relative;left:auto;top:auto;translate:0 0;justify-content:center;opacity:1;margin-bottom:4rem} .spl__pro{position:relative;left:auto;top:auto;translate:0 0;width:auto;margin:0 auto 5rem;max-width:820px;padding:0 clamp(20px,5vw,60px);opacity:1;pointer-events:auto} .spl__map{display:none} .spl__steps{display:block;margin:0 auto 5rem;max-width:820px;padding:0 clamp(20px,5vw,60px)} .spl__filmv{opacity:1!important} .spl__scene{position:relative;inset:auto;margin-bottom:5rem;padding:0 clamp(20px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;pointer-events:auto} .spl__halo{display:none} .spl__iris{position:relative;left:auto;top:auto;translate:0 0;clip-path:none;width:min(52svh,38vw);justify-self:center} .spl__ghost{display:none} .spl__copy{position:relative;left:auto;bottom:auto;opacity:1;order:-1;margin-left:max(0px,calc(var(--gnav-safe) - clamp(20px,5vw,60px)))} .spl__final{position:relative;inset:auto;opacity:1;visibility:visible;transform:none!important;min-height:90svh;pointer-events:auto} } /* 375px×reduceはモバイルの一段だけを採用（二重の段組みにしない） */ @media(max-width:940px) and (prefers-reduced-motion:reduce){ .spl__pin{padding:clamp(9rem,24vw,11rem) 0 7rem} .spl__head{margin:0 20px 3rem;padding-left:max(0px,calc(var(--gnav-safe) - 20px))} .spl__scene{display:block;padding:0 20px} .spl__iris{width:min(86vw,520px);margin:0 auto} .spl__copy{order:0;margin:2.2rem 0 0;padding-left:max(0px,calc(var(--gnav-safe) - 20px))} .spl__pro{margin:0 20px 5rem;padding:0;max-width:none} } /* JSが途中で止まっても、看板・四幕・結論を静的に読める */ .no-js .spl__tall,.js:not(.js-ready) .spl__tall{height:auto} .no-js .spl__pin,.js:not(.js-ready) .spl__pin{position:relative;height:auto;padding:7rem 0} .no-js .spl__head,.js:not(.js-ready) .spl__head{position:relative;left:auto;top:auto;margin:0 max(20px,var(--gnav-safe)) 3rem;opacity:1!important} .no-js .spl__beam,.no-js .spl__pool,.no-js .spl__dust,.no-js .spl__rail,.no-js .spl__ocean,.no-js .spl__wheel, .js:not(.js-ready) .spl__beam,.js:not(.js-ready) .spl__pool,.js:not(.js-ready) .spl__dust,.js:not(.js-ready) .spl__rail,.js:not(.js-ready) .spl__ocean,.js:not(.js-ready) .spl__wheel{display:none} .no-js .spl__word,.js:not(.js-ready) .spl__word{position:relative;left:auto;top:auto;transform:none!important;justify-content:center;margin-bottom:.9rem} .no-js .spl__word span,.js:not(.js-ready) .spl__word span{color:rgba(246,242,233,.88)!important} .no-js .spl__wsub,.js:not(.js-ready) .spl__wsub{position:relative;left:auto;top:auto;translate:0 0;justify-content:center;opacity:1!important;margin-bottom:4rem} .no-js .spl__pro,.js:not(.js-ready) .spl__pro{position:relative;left:auto;top:auto;translate:0 0;width:auto;margin:0 auto 5rem;max-width:820px;padding:0 clamp(20px,5vw,60px);opacity:1!important;transform:none!important;pointer-events:auto} .no-js .spl__map,.js:not(.js-ready) .spl__map{display:none} .no-js .spl__steps,.js:not(.js-ready) .spl__steps{display:block;margin:0 auto 5rem;max-width:820px;padding:0 clamp(20px,5vw,60px)} .no-js .spl__filmv,.js:not(.js-ready) .spl__filmv{opacity:1!important} .no-js .spl__scene,.js:not(.js-ready) .spl__scene{position:relative;inset:auto;margin:0 auto 5rem;max-width:1100px;padding:0 clamp(20px,5vw,60px)} .no-js .spl__halo,.js:not(.js-ready) .spl__halo{display:none} .no-js .spl__iris,.js:not(.js-ready) .spl__iris{position:relative;left:auto;top:auto;translate:0 0;clip-path:none;margin:0 auto;width:min(60svh,60vw)} .no-js .spl__ghost,.js:not(.js-ready) .spl__ghost{display:none} .no-js .spl__copy,.js:not(.js-ready) .spl__copy{position:relative;left:auto;bottom:auto;opacity:1!important;transform:none!important;margin-top:2rem} .no-js .spl__final,.js:not(.js-ready) .spl__final{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;min-height:90svh;pointer-events:auto!important} .spc{position:relative;background:#050506;overflow:clip} .spc__intro{position:relative;z-index:2;padding-top:var(--sp)} .spc__lead{margin-top:1.4rem;max-width:56ch;font-family:var(--serif);font-weight:600;font-size:clamp(.9rem,1.15vw,1rem);line-height:2.2;letter-spacing:.06em;color:var(--dim)} .spc__tall{height:460vh} .spc__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(1.5rem,3.5vw,4rem);padding-left:max(clamp(20px,5vw,60px),var(--gnav-safe));padding-right:clamp(20px,5vw,60px)} /* 景ごとの空気＝背景の照明が交代する（01=骨白の素灯り/02=金/03=ワインの温度/04=teal＝海と街） */ .spc__air{position:absolute;inset:0;pointer-events:none;z-index:0} .spc__air i{position:absolute;inset:0;opacity:0} .spc__air .a0{background:radial-gradient(58% 52% at 30% 40%,rgba(246,242,233,.05),transparent 68%)} .spc__air .a1{background:radial-gradient(60% 56% at 32% 46%,rgba(211,199,120,.075),transparent 66%)} .spc__air .a2{background:radial-gradient(62% 58% at 34% 52%,rgba(193,60,85,.07),transparent 66%)} .spc__air .a3{background:radial-gradient(72% 66% at 38% 50%,rgba(72,174,198,.075),transparent 70%)} /* 景の大英字＝彫りの残像（prin__ghost/spl__ghostと同じ語彙）。図の背面で言葉の骨格を支える */ .spc__gw{position:absolute;left:38%;top:50%;transform:translate(-50%,-50%);font-family:var(--en);font-weight:800;font-size:clamp(5rem,13vw,12rem);letter-spacing:.03em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(246,242,233,.055);text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;z-index:0} /* 章の栞＝スティッキー中も今どの幕かを失わない */ .spc__mark{position:absolute;left:max(clamp(20px,5vw,60px),var(--gnav-safe));top:clamp(1.6rem,4vh,2.8rem);z-index:3;font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(211,199,120,.7);opacity:0} /* 進入後にJSが灯す＝イントロの眉と二重に見せない */ .spc__loop{position:relative;z-index:1;margin:0} .spc__loop svg{width:100%;height:auto;max-height:88svh;display:block;overflow:visible} .spc__loop text{paint-order:stroke;stroke:#050506;stroke-width:6px;stroke-linejoin:round} /* 地色ハロー＝どの線と重なっても読める（罠35の定石） */ .spc .chlbl2{font-family:var(--jp);font-weight:700;font-size:28px;fill:var(--bone);letter-spacing:.08em} .spc .chno{font-family:var(--en);font-weight:700;font-size:18px;fill:rgba(211,199,120,.85);letter-spacing:.2em} .spc .chcen{font-family:var(--en);font-weight:800;font-size:34px;fill:rgba(246,242,233,.66);letter-spacing:.24em} .spc .chsp{font-family:var(--en);font-weight:700;font-size:23px;fill:#D3C778;letter-spacing:.3em} .spc .chspj{font-family:var(--jp);font-weight:600;font-size:17px;fill:rgba(246,242,233,.6);letter-spacing:.22em} /* 循環の流れ＝金の破線が回りつづける（塵・舟の灯と同種の「空気」の時間アニメ。reduceは静止） */ .spc__flow{animation:spcFlow 1.7s linear infinite} @keyframes spcFlow{to{stroke-dashoffset:-12} } /* スポンサーの輪（点線）＝ゆっくり回りつづける＝支えることは動詞（止まった額縁にしない） */ .spc__orb{transform-origin:470px 400px;animation:spcOrb 90s linear infinite} @keyframes spcOrb{to{transform:rotate(360deg)} } @media(prefers-reduced-motion:reduce){.spc__flow,.spc__orb{animation:none} } /* 4景のことば（右列）＝blkの証言と同じ交代劇。--oはJSが毎フレーム書く */ .spc__caps{position:relative;z-index:2;height:100%;min-width:0} .spc__cap{position:absolute;left:0;right:0;top:50%;opacity:var(--o,1);transform:translateY(calc(-50% + (1 - var(--o,1))*26px));pointer-events:none} .spc__capno{display:flex;align-items:center;gap:.9rem;font-family:var(--en);font-weight:600;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive-lit)} .spc__capno::before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--olive-lit),transparent)} .spc__cap h3{margin:1.1em 0 .8em;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.5vw,2.35rem);line-height:1.85;letter-spacing:.05em;color:var(--bone);text-wrap:balance} .spc__cap p{margin:0;max-width:38ch;font-size:.92rem;line-height:2.15;letter-spacing:.04em;color:var(--dim)} /* 進行の栞（左下）＝4景のレール。splRailの語彙 */ .spc__rail{position:absolute;left:max(clamp(20px,5vw,60px),var(--gnav-safe));bottom:clamp(1.6rem,4vh,2.6rem);z-index:3;display:flex;align-items:center;gap:.5rem} .spc__rail button{position:relative;width:40px;height:28px;background:none;border:0;padding:0;cursor:pointer} .spc__rail button::before{content:"";position:absolute;left:0;right:0;top:13.5px;height:1px;background:rgba(246,242,233,.22);transition:background .4s,box-shadow .4s} .spc__rail button.on::before{background:var(--olive-lit);box-shadow:0 0 12px rgba(211,199,120,.55)} .spc__rail button:focus-visible{outline:2px solid var(--olive-lit);outline-offset:2px} @media(pointer:coarse){ .spc__rail button{width:44px;height:44px} .spc__rail button::before{top:21.5px} } .spc__rail i{margin-right:.6rem;font-style:normal;font-family:var(--en);font-weight:600;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ash)} /* 受けの間＝得るもの3点（.proc--3の型を継ぐ）→締めの一行→対の券 */ .spc__after{position:relative;z-index:2;padding-top:clamp(4rem,9vh,6.5rem);padding-bottom:var(--sp)} /* 劇場の退場（栞レール）と受けの間に呼吸を置く */ .spc__close{margin:clamp(3rem,6vw,4.5rem) auto 0;text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,2rem);line-height:2;letter-spacing:.07em;color:var(--bone);text-wrap:balance} .spc__acts{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:clamp(2.2rem,4.5vw,3.4rem);justify-content:center} .spc__tk2 .spl__tkl b{color:#D3C778} /* スポンサー券＝金の名義（支える側＝意味を運ぶ金の役割） */ .spc__tk2{border-color:rgba(211,199,120,.45)} /* 主賓の券＝金の枠。章の主語がスポンサーになったため先頭・強調 */ @media(max-width:480px){ /* v63: 循環図は箱端までブリード。v62.1のgnav-safe分(-138px)はpinが.ctでなくなったため過剰＝左が画面外へ切れる（実測）。pinのpadding 20pxだけ戻す */ .spc__loop{margin-left:-20px;margin-right:-20px} .spc .spc__loop .chlbl2{font-size:32px} /* ブリード後スケール＝実寸13px級を保証。詳細度＝後続の≤940ブロック(40px)に勝たせる */ .spl__ticket{flex-direction:column;align-items:stretch} .spl__ticket::before,.spl__ticket::after{display:none} .spl__tkr{position:relative;border-left:0;border-top:1px dashed rgba(246,242,233,.38);justify-content:space-between} .spl__tkr::before,.spl__tkr::after{content:"";position:absolute;top:-7px;width:13px;height:13px;border-radius:50%;background:#030304;border:1px solid rgba(246,242,233,.3)} .spl__tkr::before{left:-7px} .spl__tkr::after{right:-7px} /* 実効コンテンツ幅217px（.ctの左安全域138px仕様）に名義1行で収める */ .spl__tkl{padding:.95rem 1rem} .spl__tkl b{font-size:.8rem;letter-spacing:.18em} .spl__tkr{padding:.95rem .8rem;letter-spacing:.08em} } /* ---- 静的フォールバック＝完成形の一枚（≤940px／reduce／no-js の三重ゲート・splと同じ守り方） ---- JSが焼き込むインラインstyle・属性に負けないよう!importantで守る（罠＝v55と同じ）。 .spc__draw＝描き込みアニメ対象（dasharrayを解除）／.spc__fx＝芝居の途中でだけ出る部材（静的では隠す） */ @media(max-width:940px){ .spc__tall{height:auto} .spc__pin{position:relative;height:auto;display:block;overflow:visible;padding:0 20px} .spc__air,.spc__gw,.spc__mark,.spc__rail{display:none} .spc__caps{position:static;height:auto;display:grid;gap:2.6rem;margin-top:2.6rem} .spc__cap{position:static;opacity:1!important;transform:none!important;pointer-events:auto} .spc .spc__draw{stroke-dasharray:none!important;stroke-dashoffset:0!important} .spc .spc__on{opacity:1!important} .spc .spc__fx{opacity:0!important} .spc .chlbl2{font-size:40px} .spc .chno{font-size:28px} .spc .chsp{font-size:36px} .spc .chspj{font-size:32px} .spc .chcen{font-size:48px} .spc__acts{flex-direction:column;align-items:stretch} .spc__acts .spl__ticket{justify-content:space-between} } @media(prefers-reduced-motion:reduce){ .spc__tall{height:auto} .spc__pin{position:relative;height:auto;display:block;overflow:visible;padding:0 clamp(20px,5vw,60px) 0 max(clamp(20px,5vw,60px),var(--gnav-safe))} .spc__air,.spc__gw,.spc__mark,.spc__rail{display:none} .spc__caps{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:2.6rem 3.5rem;margin-top:3rem} .spc__cap{position:static;opacity:1!important;transform:none!important;pointer-events:auto} .spc .spc__draw{stroke-dasharray:none!important;stroke-dashoffset:0!important} .spc .spc__on{opacity:1!important} .spc .spc__fx{opacity:0!important} .spc__loop svg{max-height:none;max-width:min(88vw,760px);margin-inline:auto} } @media(max-width:940px) and (prefers-reduced-motion:reduce){ .spc__pin{padding:0 20px} .spc__caps{grid-template-columns:1fr} .spc__loop svg{max-width:none} } .no-js .spc__tall,.js:not(.js-ready) .spc__tall{height:auto} .no-js .spc__pin,.js:not(.js-ready) .spc__pin{position:relative;height:auto;display:block;overflow:visible;padding:0 clamp(20px,5vw,60px) 0 max(clamp(20px,5vw,60px),var(--gnav-safe))} .no-js .spc__air,.no-js .spc__gw,.no-js .spc__mark,.no-js .spc__rail, .js:not(.js-ready) .spc__air,.js:not(.js-ready) .spc__gw,.js:not(.js-ready) .spc__mark,.js:not(.js-ready) .spc__rail{display:none} .no-js .spc__caps,.js:not(.js-ready) .spc__caps{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:2.6rem 3.5rem;margin-top:3rem} .no-js .spc__cap,.js:not(.js-ready) .spc__cap{position:static;opacity:1!important;transform:none!important;pointer-events:auto} .no-js .spc .spc__draw,.js:not(.js-ready) .spc .spc__draw{stroke-dasharray:none!important;stroke-dashoffset:0!important} .no-js .spc .spc__on,.js:not(.js-ready) .spc .spc__on{opacity:1!important} .no-js .spc .spc__fx,.js:not(.js-ready) .spc .spc__fx{opacity:0!important} .no-js .spc__loop svg,.js:not(.js-ready) .spc__loop svg{max-height:none;max-width:min(88vw,760px);margin-inline:auto} .splt{position:relative;background:#030304;overflow:clip} .splt__tall{height:300vh} .splt__pin{position:sticky;top:0;height:100svh;overflow:hidden} .splt__head{position:absolute;z-index:8;left:max(clamp(20px,5vw,60px),var(--gnav-safe));top:clamp(92px,13svh,138px);display:flex;gap:1.2rem;align-items:center;opacity:0} .splt__head::before{content:"";width:clamp(30px,5vw,72px);height:1px;background:linear-gradient(90deg,var(--olive-lit),transparent)} .splt__head .eyebrow{font-size:.64rem;color:rgba(211,199,120,.82)} .splt__beam{position:absolute;z-index:3;left:50%;top:-10svh;width:170svh;height:140svh;translate:-50% 0;transform-origin:50% 0; pointer-events:none;mix-blend-mode:screen;filter:blur(6px);opacity:0;will-change:transform,opacity; background:conic-gradient(from 0deg at 50% 0%,transparent 47%,rgba(246,242,233,.08) 48.2%,rgba(246,242,233,.34) 50%,rgba(246,242,233,.08) 51.8%,transparent 53%); -webkit-mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.72) 48%,transparent 97%); mask-image:linear-gradient(180deg,#000 4%,rgba(0,0,0,.72) 48%,transparent 97%)} .splt__pool{position:absolute;z-index:2;left:50%;bottom:3svh;width:66svh;height:12svh;translate:-50% 0;pointer-events:none;opacity:0; background:radial-gradient(50% 50% at 50% 50%,rgba(246,242,233,.13),rgba(211,199,120,.05) 55%,transparent 78%);filter:blur(9px);mix-blend-mode:screen} .splt__stage{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-inline:clamp(20px,5vw,60px)} .splt__wsub{display:flex;gap:1rem;align-items:center;opacity:0;font-family:var(--en);font-weight:600;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(211,199,120,.8)} .splt__wsub::before,.splt__wsub::after{content:"";width:44px;height:1px;background:rgba(211,199,120,.35)} .splt__word{display:flex;white-space:nowrap;margin-top:1.7rem;font-family:var(--en);font-weight:800;font-variation-settings:"opsz" 96;font-size:clamp(2.3rem,6.2vw,5.8rem);letter-spacing:.3em;line-height:1} .splt__word span{color:rgba(246,242,233,.07)} .splt__lead{margin:2.8rem 0 0;opacity:0;transform:translateY(18px);font-family:var(--serif);font-weight:600;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:2.3;letter-spacing:.08em;color:var(--dim)} .splt__act{margin:2.4rem 0 0;opacity:0;transform:translateY(18px);pointer-events:none;visibility:hidden} /* 静的フォールバック＝三重ゲート（≤940／reduce／no-js）：予告の完成形一枚（点灯済みの看板+一行+券） */ @media(max-width:940px){ .splt{padding:clamp(9rem,24vw,12rem) 0 clamp(5rem,12vw,7rem)} .splt__tall{height:auto} .splt__pin{position:relative;height:auto;overflow:visible} .splt__beam,.splt__pool{display:none} .splt__head{position:relative;left:auto;top:auto;margin:0 20px 3rem;opacity:1!important;padding-left:max(0px,calc(var(--gnav-safe) - 20px))} .splt__stage{position:relative;inset:auto;padding:0 20px} .splt__word{font-size:clamp(1.7rem,8.4vw,3rem);letter-spacing:.2em} .splt__word span{color:rgba(246,242,233,.88)!important;text-shadow:0 0 18px rgba(211,199,120,.3)!important} .splt__wsub{opacity:1!important} .splt__lead,.splt__act{opacity:1!important;transform:none!important} .splt__act{pointer-events:auto!important;visibility:visible!important} } @media(prefers-reduced-motion:reduce){ .splt{padding:7rem 0 6rem} .splt__tall{height:auto} .splt__pin{position:relative;height:auto;overflow:visible} .splt__beam,.splt__pool{display:none} .splt__head{position:relative;left:auto;top:auto;margin:0 max(20px,var(--gnav-safe)) 3rem;opacity:1!important} .splt__stage{position:relative;inset:auto} .splt__word span{color:rgba(246,242,233,.88)!important;text-shadow:0 0 18px rgba(211,199,120,.3)!important} .splt__wsub{opacity:1!important} .splt__lead,.splt__act{opacity:1!important;transform:none!important} .splt__act{pointer-events:auto!important;visibility:visible!important} } .no-js .splt,.js:not(.js-ready) .splt{padding:7rem 0 6rem} .no-js .splt__tall,.js:not(.js-ready) .splt__tall{height:auto} .no-js .splt__pin,.js:not(.js-ready) .splt__pin{position:relative;height:auto;overflow:visible} .no-js .splt__beam,.no-js .splt__pool,.js:not(.js-ready) .splt__beam,.js:not(.js-ready) .splt__pool{display:none} .no-js .splt__head,.js:not(.js-ready) .splt__head{position:relative;left:auto;top:auto;margin:0 max(20px,var(--gnav-safe)) 3rem;opacity:1!important} .no-js .splt__stage,.js:not(.js-ready) .splt__stage{position:relative;inset:auto} .no-js .splt__word span,.js:not(.js-ready) .splt__word span{color:rgba(246,242,233,.88)!important} .no-js .splt__wsub,.no-js .splt__lead,.no-js .splt__act,.js:not(.js-ready) .splt__wsub,.js:not(.js-ready) .splt__lead,.js:not(.js-ready) .splt__act{opacity:1!important;transform:none!important;pointer-events:auto!important;visibility:visible!important} /* ============ WORK PRINCIPLE = 暗転の間（スクロールで文字が灯る） ============ */ .prin{position:relative;background:#050507;height:300vh} .prin__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-inline:clamp(20px,5vw,60px)} .prin__ghost{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + (.5 - var(--p,0))*10%),-50%);font-family:var(--en);font-weight:800;font-size:clamp(4.4rem,16vw,14rem);line-height:.92;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(246,242,233,.06);text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:calc(.45 + var(--p,0)*.55)} /* v17.2: 進むほど英字の彫りが浮かぶ */ .prin__cone{position:absolute;left:50%;top:-12%;width:150%;height:74%;pointer-events:none;transform-origin:50% 0;transform:translateX(-50%) rotate(calc((var(--p,0) - .5)*12deg));background:conic-gradient(from 180deg at 50% 0%,transparent 46%,rgba(246,242,233,.055) 50%,transparent 54%)} /* v17.2: 二本目の光錐＝ワインの残光が逆位相で首を振る（一本きりの単調さ対策・SPA/開演と同じ多灯の語彙） */ .prin__cone--2{transform:translateX(-50%) rotate(calc((.5 - var(--p,0))*9deg));background:conic-gradient(from 180deg at 50% 0%,transparent 47%,rgba(193,60,85,.05) 50%,transparent 53%)} .prin__beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(44% 32% at calc(18% + var(--p,0)*64%) 47%,rgba(211,199,120,.17),rgba(72,174,198,.06) 46%,transparent 72%);animation:prinAir 6.5s ease-in-out infinite alternate} /* v17.2: 光が呼吸する（空気） */ @keyframes prinAir{from{opacity:.7} to{opacity:1} } .prin__cap{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--olive-lit);margin-bottom:2.2rem;position:relative} /* v17.2: 進行度で左右に金の飾り線が伸びる＝スクラブの手応えを静かに可視化 */ .prin__cap::before,.prin__cap::after{content:"";position:absolute;top:50%;height:1px;width:calc(var(--p,0)*54px)} .prin__cap::before{right:calc(100% + 1.2em);background:linear-gradient(90deg,transparent,rgba(211,199,120,.6))} .prin__cap::after{left:calc(100% + 1.2em);background:linear-gradient(270deg,transparent,rgba(211,199,120,.6))} .prin__word{position:relative;width:100%;color:var(--bone);font-family:var(--serif);font-size:clamp(2.1rem,6vw,5rem);font-weight:700;line-height:1.5;letter-spacing:.06em;text-wrap:balance;max-width:20ch} /* 原則の言葉も明朝で。width:100%＝幅をflexのfit-contentに委ねない（罠20の再発ガード：spanだらけの行はmax-contentが1文字に潰れることがある） */ .prin__word .pc{color:rgba(246,242,233,.075);filter:blur(3.5px);transform:translateY(.1em);transition:color .5s ease,text-shadow .5s ease,filter .65s ease,transform .8s var(--e);display:inline-block} /* v17.2: 未点灯＝未現像（にじんで沈む）。transformを効かせるためinline-block */ .prin__word .pc.on{color:var(--bone);filter:blur(0);transform:none;animation:pcIgnite .85s ease-out 1} /* 灯る瞬間、一度だけ強く光って定着 */ @keyframes pcIgnite{0%{text-shadow:0 0 30px rgba(211,199,120,.8),0 0 64px rgba(211,199,120,.3)} 100%{text-shadow:0 0 0 rgba(211,199,120,0)} } .prin__word .pc.hot{color:var(--olive-lit);text-shadow:0 0 30px rgba(211,199,120,.5)} .prin.done .prin__word{animation:prinBloom 1.25s ease-out 1} /* v17.2: 全文が灯った瞬間の残響（text-shadowは子へ継承） */ @keyframes prinBloom{0%{text-shadow:0 0 0 rgba(211,199,120,0)} 28%{text-shadow:0 0 44px rgba(211,199,120,.42),0 0 96px rgba(211,199,120,.18)} 100%{text-shadow:0 0 0 rgba(211,199,120,0)} } .prin__word .pc.mem.on{background:linear-gradient(96deg,var(--olive-lit),var(--teal-lit));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--olive-lit)} .prin__sub{margin-top:2.4rem;color:var(--dim);line-height:2.25;position:relative;opacity:0;transform:translateY(16px);transition:opacity .9s var(--e),transform .9s var(--e)} .prin__act{margin-top:2rem;position:relative;opacity:0;transform:translateY(16px);transition:opacity .9s var(--e) .14s,transform .9s var(--e) .14s} .prin.done .prin__sub,.prin.done .prin__act{opacity:1;transform:none} /* ============ SCROLL POLISH ============ */ .js .rvm{clip-path:inset(0 0 102% 0)} /* .jsゲート（罠22） */ .rvm.in{clip-path:inset(-2% 0 -10% 0);transition:clip-path 1.15s var(--e) .05s} .hero__vid{will-change:transform} .cta::before{content:"";position:absolute;left:50%;top:-8%;width:140%;height:78%;transform:translateX(-50%);transform-origin:50% 0;background:conic-gradient(from 180deg at 50% 0%,transparent 45.5%,rgba(211,199,120,.07) 50%,transparent 54.5%);animation:ctaSway 12s ease-in-out infinite alternate;pointer-events:none} @keyframes ctaSway{from{transform:translateX(-50%) rotate(-4deg)} to{transform:translateX(-50%) rotate(4deg)} } /* reveal */ .js .rv{opacity:0;transform:translateY(30px)} /* .jsゲート＝JS不達時は隠さない（罠22） */ .rv.in{opacity:1;transform:none;transition:opacity 1s var(--e),transform 1s var(--e)} /* .rv.in のtransitionに負けないよう、ホバー挙動を持つ要素は明示的に合成する */ .ix.rv.in{transition:padding-left .5s var(--e),background .5s,opacity 1s var(--e),transform 1s var(--e)} .rv-d1.in{transition-delay:.08s} .rv-d2.in{transition-delay:.16s} .rv-d3.in{transition-delay:.24s} .foot-c{margin-top:clamp(2.5rem,5vw,4rem);text-align:center} /* ===== v13: 子ページ（Philosophy / Service詳細 / CAMP / Company / News / Contact）===== */ /* 白面の原則（Philosophy）：三つの原則 */ .tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,4rem)} .tenet{border-top:1px solid rgba(10,10,13,.22);padding-top:1.5rem} .tenet__n{font-family:var(--en);font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--wine)} .tenet__t{font-family:var(--serif);font-weight:700;font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.9;letter-spacing:.05em;margin:.75em 0 .45em} .tenet__d{font-size:.88rem;color:rgba(10,10,13,.6);line-height:2.05} /* 工程・カリキュラムの段組み（Service詳細＝4列／CAMP＝3列） */ .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.3rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem)} .proc--3{grid-template-columns:repeat(3,1fr)} .proc__it{position:relative;border-top:1px solid var(--line-d);padding-top:1.35rem} .proc__it::before{content:"";position:absolute;top:-1px;left:0;width:2.4em;height:1px;background:var(--olive-lit)} /* 罫の頭だけ映写光 */ .proc__n{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--olive-lit)} .proc__t{font-weight:900;font-size:1.05rem;margin:.65em 0 .45em;line-height:1.5} .proc__d{color:var(--dim);font-size:.87rem;line-height:2} /* FAQ（Service詳細・CAMP） */ .faq{margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line-d)} .faq details{border-bottom:1px solid var(--line-d)} .faq summary{cursor:pointer;padding:1.3rem .2rem;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;transition:color .35s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"＋";color:var(--ash);font-weight:400;flex:none} .faq details[open] summary{color:var(--olive-lit)} .faq details[open] summary::after{content:"−"} .faq .a{padding:0 .2rem 1.5rem;color:var(--dim);font-size:.9rem;line-height:2.1;max-width:62ch} /* 行リンク（他の事業への導線） */ .rowlinks{border-top:1px solid var(--line-d);margin-top:1.2rem} .rowlinks a{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.3rem .2rem;border-bottom:1px solid var(--line-d);transition:padding-left .45s var(--e),background .5s} .rowlinks a:hover{padding-left:1rem;background:linear-gradient(90deg,rgba(246,242,233,.03),transparent 70%)} .rowlinks .t{font-weight:900;font-size:1.02rem} .rowlinks .en{font-family:var(--en);font-weight:600;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)} /* 白面の要項テーブル（CAMP募集要項など）：暗幕用のwmetaを白面に馴染ませる */ .light .wmeta__row{border-color:rgba(10,10,13,.16)} .light .wmeta__row dt{color:rgba(10,10,13,.48)} .light .wmeta__desc{color:rgba(10,10,13,.72)} /* 沿革（Company）＝v27で .chr クロニクルへ置換済み（旧.histはgit履歴参照） */ /* News一覧 */ .nlist{border-top:1px solid var(--line-d);margin-top:clamp(1.6rem,3vw,2.2rem)} .nlist a{display:grid;grid-template-columns:7.5em 7.5em 1fr auto;gap:clamp(1rem,2.5vw,1.8rem);align-items:baseline;padding:1.5rem .2rem;border-bottom:1px solid var(--line-d);transition:background .5s,padding-left .45s var(--e)} .nlist a:hover{background:linear-gradient(90deg,rgba(246,242,233,.03),transparent 70%);padding-left:1rem} .nlist .dt{font-family:var(--en);font-weight:600;font-size:.76rem;letter-spacing:.12em;color:var(--ash);font-variant-numeric:tabular-nums} .nlist .cat{font-size:.68rem;letter-spacing:.08em;color:var(--dim);border:1px solid var(--line-d);border-radius:2px;padding:.28em .75em;justify-self:start;white-space:nowrap} .nlist .t{font-weight:700;font-size:1.02rem;line-height:1.7} .nlist .go{color:var(--ash);transition:transform .4s var(--e),color .4s} .nlist a:hover .go{transform:translateX(6px);color:var(--olive-lit)} .pgn{display:flex;gap:.4rem;justify-content:center;margin-top:clamp(2rem,4vw,3rem)} .pgn a{font-family:var(--en);font-weight:600;font-size:.8rem;min-width:2.4em;text-align:center;padding:.55em .4em;border:1px solid transparent;border-radius:2px;color:var(--ash);transition:.35s} .pgn a:hover{color:var(--bone)} .pgn a.on{color:var(--olive-lit);border-color:var(--line-d)} /* News詳細（記事の紙面） */ .art__meta{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap} .art__body{max-width:40em;margin-top:clamp(2rem,4vw,3rem);color:var(--dim);font-size:.97rem;line-height:2.3} .art__body p+p{margin-top:1.6em} .art__body h2{font-family:var(--serif);color:var(--bone);font-size:1.28rem;font-weight:700;letter-spacing:.04em;line-height:1.8;margin:2.3em 0 1em;padding-left:.85em;border-left:2px solid var(--wine-lit)} .art__ph{aspect-ratio:16/9;margin:2.2em 0;display:grid;place-items:center;border:1px solid var(--line-d);border-radius:2px;background:radial-gradient(70% 80% at 30% 20%,rgba(44,108,124,.16),transparent 60%),radial-gradient(70% 80% at 80% 90%,rgba(126,38,54,.14),transparent 60%),var(--ink-2);color:var(--ash);font-family:var(--en);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase} .art__back{margin-top:clamp(2.5rem,4vw,3.5rem)} /* Contact（フォーム） */ .cgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start} .cinfo p{color:var(--dim);font-size:.94rem;line-height:2.2} .cinfo .wmeta__dl{margin-top:2rem} .form{display:grid;gap:1.35rem} .form__row{display:grid;gap:1.35rem;grid-template-columns:1fr 1fr} .form label{display:block;font-size:.8rem;letter-spacing:.06em;color:var(--dim)} /* gridだと「必須」が別行に落ちるためblock */ .form label input,.form label select,.form label textarea{margin-top:.55em} .form .req{color:var(--wine-lit);margin-left:.45em;font-size:.85em} .form input,.form select,.form textarea{background:rgba(246,242,233,.04);border:1px solid var(--line-d);border-radius:2px;color:var(--bone);font-family:var(--jp);font-size:.95rem;padding:.85em 1em;width:100%;box-sizing:border-box;transition:border-color .4s,background .4s;appearance:none} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--olive-lit);background:rgba(246,242,233,.07)} .form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--olive-lit);outline-offset:2px} /* キーボード操作の可視リングは殺さない */ .form select{background-image:linear-gradient(45deg,transparent 49%,var(--ash) 50%),linear-gradient(-45deg,transparent 49%,var(--ash) 50%);background-position:calc(100% - 1.3em) 50%,calc(100% - 1em) 50%;background-size:.32em .32em;background-repeat:no-repeat} .form textarea{min-height:9.5em;resize:vertical} .form .agree{display:flex;gap:.7em;align-items:baseline;font-size:.8rem;color:var(--dim)} .form .agree input{width:auto;appearance:auto;accent-color:var(--wine)} .form .note{font-size:.76rem;color:var(--ash);line-height:1.9} @media(max-width:860px){ .tenets{grid-template-columns:1fr;gap:1.6rem} .proc,.proc--3{grid-template-columns:1fr 1fr;gap:1.4rem} .hist__row{grid-template-columns:1fr;gap:.35rem;padding:1.2rem .2rem} .nlist a{display:block;padding:1.3rem .2rem} .nlist .cat{display:inline-block;margin-left:1em} .nlist .t{display:block;margin-top:.6em} .nlist .go{display:none} .cgrid{grid-template-columns:1fr} .form__row{grid-template-columns:1fr} } /* ===== v13.1: SPOTLIGHTエコシステム全景（CAMPページ・クリッカブル線画）===== */ .eco{position:relative;margin:clamp(1.5rem,3vw,2.5rem) 0 clamp(2.5rem,5vw,4rem)} .eco__svg{width:100%;height:auto;display:block} .eco__ln{stroke:rgba(246,242,233,.6);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round} .eco__ln.gold{stroke:var(--olive-lit)} .eco__ln.faint{stroke:rgba(246,242,233,.26)} /* 線が引かれていく出現（pathLength=100で尺を統一。--ldは部位ごとの時差） */ .eco .d{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s var(--e) var(--ld,0s),stroke .45s ease} .eco.rv.in .d{stroke-dashoffset:0} .eco__tx{opacity:0;transition:opacity .9s ease calc(var(--ld,0s) + .9s)} .eco.rv.in .eco__tx{opacity:1} .eco__lb{font-family:var(--en);font-weight:600;font-size:16px;letter-spacing:.24em;fill:var(--bone);transition:fill .45s ease} .eco__bd{font-family:var(--en);font-weight:700;font-size:19px;letter-spacing:.2em;fill:var(--bone);transition:fill .45s ease} /* 看板の中の文字 */ .eco__vb{font-family:var(--jp);font-weight:500;font-size:12px;letter-spacing:.24em;fill:rgba(246,242,233,.52)} .eco__hit{fill:transparent;pointer-events:all} /* 場所ごとのホバー／フォーカス＝映写光が灯る */ .eco__g{cursor:pointer;outline:none} .eco__g:hover .eco__ln,.eco__g:focus-visible .eco__ln{stroke:var(--olive-lit)} .eco__g:hover .eco__lb,.eco__g:hover .eco__bd,.eco__g:focus-visible .eco__lb,.eco__g:focus-visible .eco__bd{fill:var(--olive-lit)} .eco__hint{margin-top:.9rem;font-size:.78rem;letter-spacing:.06em;color:var(--ash)} /* クリックで飛んだ章を一瞬灯す */ .biz__row.hit{background:linear-gradient(90deg,rgba(211,199,120,.07),transparent 70%);padding-left:1.2rem} .biz__row.hit::before{transform:scaleY(1)} .eco__vb--s{font-size:11px} /* 看板の中に収める小サイズ（インラインstyleだとモバイル拡大が効かないためクラスで） */ @media(max-width:860px){ .eco__lb{font-size:26px} .eco__bd{font-size:28px} .eco__vb{font-size:20px} .eco__vb--s{font-size:17px} } /* SVGごと縮むためラベルは大きめに */ @media (prefers-reduced-motion:reduce){ .eco .d{stroke-dashoffset:0;transition:none} .eco__tx{opacity:1;transition:none} } .shead{margin-bottom:clamp(2.5rem,5vw,4rem)} .shead--c{text-align:center} /* Services/Officeの見出しも他セクションと同じ型＝eyebrow＋明朝（巨大な欧文ゴシックは型の乱れだったため廃止） */ .shead__t{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;letter-spacing:.04em;margin:.9rem 0 .5rem;line-height:1.6} .shead__l{color:var(--dim);max-width:56ch} .shead--c .shead__l{margin-inline:auto} /* ============ モバイル最適化：重い装飾を切り、タップ域を確保 ============ */ @media(pointer:coarse){ .hero__grain{display:none} /* ノイズテクスチャはモバイルで切って軽く（.off__grainはv59で部品ごと撤去） */ .lnk{padding:.85em 0} /* 44px前後のタップ域 */ .filter button{padding:.6em .5em} } @media(max-width:480px){ .hero__sub{font-size:.82rem;line-height:2.1} .hero__act{gap:1.6rem} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto} .rvm{clip-path:none} .lm__i{transform:none} /* 行リビールも無効化＝即表示 */ .open,.hero__iris{display:none} .prin{height:auto} .prin__sticky{position:static;height:auto;padding-block:var(--sp)} .prin__word .pc{color:var(--bone)} .prin__sub,.prin__act{opacity:1;transform:none} /* v10演出の停止：地図はJS側で静止画を一度だけ描く */ } html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .kmap__mhead{display:none} /* モバイル専用（v65.1） */ @media(max-width:940px){ :root{--gnav-safe:clamp(20px,5vw,60px)} /* 左安全域の解放＝.ctの左padding正常化（v48の円が右上へ移るため） */ /* ③ハンバーガー＝右上・56px・ラベル非表示。CONTACT(hd__ct)はメニュー内gnav__ctaへ格納＝非表示 */ .gnav__btn{left:auto;right:12px;top:12px;transform:none;width:56px;height:56px} .gnav__lb{display:none} .hd__ct{display:none} body.ft-visible:not(.gnav-open) .gnav__btn{opacity:1;pointer-events:auto} /* モバイルは常時アクセス可（v65.7: hero-visible退場はPC含め全廃＝上書き不要に） */ .gnav{clip-path:circle(0px at calc(100% - 40px) 40px)} /* 開帳の起点もボタン（右上）へ */ .gnav-open .gnav{clip-path:circle(165% at calc(100% - 40px) 40px)} /* 沿革クロニクルのモバイル帯＝ページを押し広げる既存バグの封じ込め（帯内スクロールへ・v65 QAで発覚） */ .chr__mss,.chr__ms{max-width:100%} .chr__ms{overflow-x:auto;scrollbar-width:thin} .chr__ms h3{white-space:normal;max-width:100%} .chr__grid{grid-template-columns:minmax(0,1fr)} /* 真因＝沿革グリッドの列定義がモバイルで169%のまま＝1列化の指定漏れ（634px列がページを押し広げ） */ } @media(max-width:820px){ .blk__pin .hero{transform:translate3d(calc(var(--sx,0)*1.75vw),0,0) rotateY(calc(var(--sr,0)*-.72deg)) scale(calc(1 + var(--ss,0)*.05))} .blk__pin .hero .hero__vid{filter:saturate(calc(1.05 - var(--ss,0)*.18 - var(--mb,0)*.3)) contrast(1.05) brightness(calc(.82 - var(--ss,0)*.18 - var(--mb,0)*.45)) blur(calc(var(--mb,0)*14px))} /* v65.9: ぼかし対象を動画素材だけに＝面の上の文字はボケない。既存グレード(256行の--ss連動)を土台に--mb分のblur/減光を加算＝メインビジュ通常時(--mb=0)の色味は不変 */ .blk__void{z-index:5;background: radial-gradient(ellipse 58% 86% at 96% 50%,rgba(211,199,120,calc(var(--amb,0)*.075)),transparent 63%), radial-gradient(ellipse 44% 52% at 72% 50%,rgba(126,38,54,calc(var(--amb,0)*.09)),transparent 72%)} .blk__witness{right:7vw;max-width:none;font-size:.92rem;line-height:2;text-align:center;text-shadow:0 1px 16px rgba(0,0,0,.9)} .blk__witness--1{left:7vw} .blk__witness--2{left:7vw} .blk__witness--3{left:7vw} .blk__beyond{right:7vw;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.85)} .cam__catch{writing-mode:horizontal-tb;left:6vw;right:6vw;top:9svh;transform:none;height:auto; font-size:1.02rem;line-height:2;letter-spacing:.14em;text-align:left} .cam__catch .vln{display:inline;padding:0} /* ④v65.1改: 地図は全幅のまま高さをsvhで制御＝コピー+地図がスマホ1画面に必ず収まる（九州が画面外に溢れる真因はピン内容の縦溢れ） */ .kmap__stage{width:auto;margin-inline:calc(-1*clamp(20px,5vw,60px));aspect-ratio:auto;height:min(46svh,420px);max-height:none} /* aspect解除＝全幅375×svh高の箱（カンバスは中でレターボックス） */ .kmap__copy .kmap__ttl{font-size:1.5rem;line-height:1.7} .kmap__body{font-size:.85rem;line-height:1.9} .kmap__facts{font-size:.82rem} .kmap__art.a-hayano{height:min(30svh,250px)} .kmap__art.a-ezuko{width:min(100%,340px)} /* 章替えの道標＝Statementが終わった直後に金のeyebrow帯（通常フロー・ピンの手前） */ .kmap__mhead{display:flex;align-items:center;gap:1em;padding:2.4rem clamp(20px,5vw,60px) .2rem; font-family:var(--en);font-weight:600;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive-lit)} .kmap__mhead i{flex:0 0 clamp(28px,9vw,54px);height:1px;background:linear-gradient(90deg,var(--olive-lit),rgba(211,199,120,.1))} /* ①メインキャッチ＝左寄せの微調整（安全域解放後の残り分） */ .hero__ttl{left:6vw} .hero__sub{padding-left:0} /* 全体磨き＝見出し系の左揃え徹底・チップ折返しの呼吸 */ .svix a:hover{padding-left:.6rem} .filter{gap:.4rem 1.25rem} } /* ========================================================================== theme-tail.css — 本番専用の追補（プレビューには無い・WP作法） build-theme-assets.py が生成する main.css の末尾に自動結合される。 ここを編集したら再生成するだけで本番CSSに反映される（正本はこのファイル）。 ※旧モバイルメニュー（.hd__toggle/.mnav/body.nav-open）は v38 で廃止＝ 全画面メニュー .gnav（プレビュー本体に含まれる）がモバイルを兼ねる。 ========================================================================== */ /* WP標準：スクリーンリーダー用テキストとスキップリンク */ .screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important} .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink-2);color:var(--bone);padding:.8em 1.4em} .skip-link:focus{left:0} /* 旧ヘルパー互換の別名（ar_btn等が出す .ar-* を新デザインで受ける保険） */ .ar-btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--en);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:1em 2.1em;border:1px solid var(--faint);color:var(--bone);cursor:pointer;background:none;transition:.5s var(--e);position:relative;overflow:hidden;border-radius:2px;text-decoration:none} .ar-btn--solid,.ar-btn--primary{background:var(--wine);border-color:var(--wine)} .ar-btn:hover{border-color:var(--olive-lit);color:var(--olive-lit)} .ar-btn--solid:hover,.ar-btn--primary:hover{background:var(--wine-lit);border-color:var(--wine-lit);color:var(--bone)} .ar-eyebrow{font-family:var(--en);font-weight:600;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--olive-lit);display:inline-block} .ar-container{max-width:var(--ct);margin-inline:auto;padding-inline:clamp(20px,5vw,60px)} /* 記事本文（the_content既定＝News詳細の.art__bodyと同じ紙面） */ .entry-body{max-width:40em;color:var(--dim);font-size:.97rem;line-height:2.3} .entry-body p+p{margin-top:1.6em} .entry-body h2{font-family:var(--serif);color:var(--bone);font-size:1.28rem;font-weight:700;letter-spacing:.04em;line-height:1.8;margin:2.3em 0 1em;padding-left:.85em;border-left:2px solid var(--wine-lit)} .entry-body h3{font-family:var(--serif);color:var(--bone);font-size:1.1rem;font-weight:700;margin:2em 0 .8em} .entry-body img{max-width:100%;height:auto;border-radius:2px} .entry-body a{color:var(--olive-lit);text-decoration:underline;text-underline-offset:.2em} .entry-body ul,.entry-body ol{padding-left:1.4em} /* リンク遷移型フィルタ（アーカイブ実装用。正本CSSの.filterはbutton用のためにも同スタイルを与える） */ .filter a{font-family:var(--en);font-weight:600;font-size:.76rem;letter-spacing:.08em;color:var(--ash);padding:.3em 0;position:relative;transition:color .35s} .filter a:hover{color:var(--bone)}.filter a.on{color:var(--olive-lit)} .filter a.on::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--olive-lit)} @media(pointer:coarse){.filter a{padding:.6em .5em}} /* リンク遷移型ページャー（News一覧v64用。正本CSSの.wx__pgnはbutton用のため/にも同スタイルを与える。 端ページの丸ボタンは＝buttonの:disabledと同じ濃度で、hoverはpointer-eventsで殺す） */ .wx__pgn a,.wx__pgn span{position:relative;display:grid;place-items:center;min-width:42px;height:42px;padding:0 .5em; font-family:var(--en);font-weight:600;font-size:.8rem;letter-spacing:.16em;color:var(--ash);transition:color .35s} .wx__pgn a::after,.wx__pgn span::after{content:"";position:absolute;left:50%;bottom:7px;width:15px;height:1px;background:var(--olive-lit); transform:translateX(-50%) scaleX(0);transition:transform .45s var(--e)} .wx__pgn a:hover{color:var(--bone)} .wx__pgn a.on,.wx__pgn span.on{color:var(--olive-lit)} .wx__pgn a.on::after,.wx__pgn span.on::after{transform:translateX(-50%) scaleX(1)} .wx__pgb[aria-disabled="true"]{opacity:.26;cursor:default;pointer-events:none} /* WPBakery編集画面での視認性（暗幕の中でも編集できる最低限） */ .vc_editor .sec,.compose-mode .sec{outline:1px dashed rgba(246,242,233,.2)} /* --- Hero背景のYouTube/Vimeo埋め込み -------------------------------------- 16:9のiframeを画面いっぱいにcover配置する。posterはラッパーの背景画像で敷き、 iframeが描画されるまでの黒抜けを防ぐ。背景専用なので操作は受け付けない。 */ .hero__vid--embed{background-size:cover;background-position:center} /* 各項は16:9のペア（100vw⇔56.25vw / 177.78vh⇔100vh / 1137.8px⇔640px）。 pxフロアは静的フォールバック時の hero min-height:640px 対応＝低いウィンドウでも帯を出さない。 */ .hero__vid--embed iframe{position:absolute;top:50%;left:50%;width:max(100vw,177.78vh,1137.8px);height:max(56.25vw,100vh,640px);transform:translate(-50%,-50%);border:0;pointer-events:none} /* WPBakery全幅行（data-vc-full-width）の矯正。 js_composerは全幅行に overflow:hidden を敷くが、これが祖先にあると position:sticky（Heroのピン・幕間スクラブ・事業チャプター段積み）が全滅する。 横はみ出しは body の overflow-x:clip が既に受けているので visible に戻して問題ない。 */ .vc_row[data-vc-full-width]{overflow:visible}