:root{--star:#ffdb91;--ink:#483c60;--muted:#71677f;--purple:#7760ba;--pink:#e28fb1;--line:rgba(123,96,159,.15);--shadow:0 .875rem 3.125rem rgba(107,76,137,.065)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6.875rem}body{margin:0;color:var(--ink);background:#f7f3fc;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:1rem;line-height:1.9;overflow-wrap:anywhere}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;height:auto;display:block}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.55}p+p{margin-top:1.125rem}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:.1875rem solid var(--purple);outline-offset:.3125rem}.wrap{width:min(70rem,calc(100% - 4rem));margin-inline:auto}.glass{background:rgba(255,255,255,.62);border:.0625rem solid rgba(255,255,255,.95);box-shadow:var(--shadow);backdrop-filter:blur(1.25rem)}.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 8% 35%,#fbe3ef,transparent 48%),radial-gradient(ellipse at 86% 15%,#e6e0ff,transparent 50%),radial-gradient(ellipse at 75% 85%,#fff5d9,transparent 43%)}.ambient i{position:absolute;width:40vw;height:40vw;border-radius:50%;filter:blur(5rem);opacity:.25;background:#ffd5e4;top:20%;left:-15%;transform:translate(var(--dx,0rem),var(--dy,0rem));transition:transform 2s ease-out}.ambient i:nth-child(2){background:#c4b4ff;left:70%;top:5%}.ambient i:nth-child(3){background:#ffeab3;left:50%;top:80%}.site-header{position:sticky;top:1.25rem;z-index:10;width:min(75rem,calc(100% - 3rem));height:4.875rem;margin:1.25rem auto 0;border-radius:1.5rem;display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem}.brand{width:9.6875rem;flex-shrink:0}.brand img{width:100%;margin-block:-1rem}.site-header nav{display:flex;align-items:center;gap:1.875rem;font-size:.875rem;font-weight:700}.site-header nav a{transition:color .2s}.site-header nav a:hover,.text-link:hover{color:var(--purple)}.menu-toggle{display:none}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.19em;color:var(--purple)}h1{font-size:clamp(1.5625rem,3vw,2.25rem);letter-spacing:.14em;font-weight:700}.button{display:inline-flex;justify-content:center;align-items:center;gap:2rem;padding:.9375rem 1.75rem;border-radius:6.1875rem;font-size:.875rem;font-weight:700;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-.1875rem);box-shadow:0 .625rem 1.75rem #8464b12e}.button:active{transform:translateY(0) scale(.97);transition-duration:.1s}.primary{color:white;background:#8166b3;box-shadow:0 .375rem 1.25rem #8464b122}.text-link{font-size:.875rem;font-weight:700}.section{padding-top:6.875rem}.section-heading h2{font-size:clamp(1.625rem,3vw,2.25rem);letter-spacing:.04em;margin-top:.625rem}.section-heading>p:last-child:not(.eyebrow){margin-top:1rem;color:var(--muted)}.about{display:grid;grid-template-columns:1fr 1.8fr;gap:3.75rem;align-items:center}.about-card{padding:2.875rem 3rem;border-radius:1.875rem;position:relative}.lead{font-size:1.5rem;font-weight:700;line-height:1.7;margin-bottom:1.5rem}.about-card>p:not(.lead){color:var(--muted)}.heading-row{display:flex;justify-content:space-between;gap:1.5rem;align-items:end;margin-bottom:1.875rem}.pill{display:inline-block;align-self:center;border:.0625rem solid #d8cbe7;background:#ffffff66;border-radius:6.1875rem;padding:.375rem 1rem;color:#78648f;font-size:.75rem}.centered{text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.125rem}.steps article{padding:1.875rem;border-radius:1.5rem}.step-number{font-size:2.125rem;font-family:Georgia,serif;font-style:italic;color:#b79bcb}.steps h3{font-size:1.0625rem;margin:.875rem 0 .75rem}.steps p{font-size:.875rem;color:var(--muted)}.faq-section{display:grid;grid-template-columns:1fr 1.8fr;gap:3.75rem}.faq-list{display:grid;gap:.75rem}.faq-list details{border-radius:1rem;overflow:hidden}.faq-list summary{padding:1.1875rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;gap:1.25rem;font-size:.875rem;font-weight:700;list-style:none;transition:background .2s,color .2s}.faq-list summary:hover{color:var(--purple)}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--purple);transition:transform .25s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{padding:0 1.5rem 1.375rem;font-size:.875rem;color:var(--muted)}.closing{text-align:center;padding-block:6.25rem 4.375rem}.closing>span{color:var(--star);font-size:1.875rem}.closing p{font-size:1.5rem;letter-spacing:.12em;margin:.75rem 0 1.375rem}footer{border-top:.0625rem solid var(--line);padding-block:1.5625rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;font-size:.75rem;color:var(--muted)}footer>span{font-size:1.125rem;font-weight:700}footer small{font-size:.75rem}footer p{letter-spacing:.12em}.skip-link{position:fixed;top:-6.25rem;left:1.25rem;background:white;padding:.625rem 1.25rem;z-index:30}.skip-link:focus{top:.625rem}.reveal.is-pending{opacity:0;transform:translateY(1.125rem)}.reveal{transition:opacity .7s ease,transform .7s ease} @media(max-width:56.25rem){.site-header nav{gap:1rem;font-size:.75rem}.site-header{padding-inline:1.25rem}.brand{width:8.125rem}.about,.faq-section{grid-template-columns:1fr;gap:1.75rem}.about .section-heading h2 br{display:none}.section{padding-top:5rem}.steps article{padding:1.5rem}} @media(max-width:40rem){.wrap{width:calc(100% - 2.25rem)}.site-header{top:.75rem;margin-top:.75rem;width:calc(100% - 1.5rem);height:4rem;border-radius:1.25rem}.brand{width:8.125rem}.menu-toggle{display:flex;gap:.75rem;align-items:center;border:0;color:var(--ink);background:transparent;font-size:.875rem;padding:.5rem;cursor:pointer}.menu-toggle span{font-size:1.25rem}.site-header nav{display:none;position:absolute;top:4.625rem;left:0;right:0;background:#fffcfe;border:.0625rem solid white;box-shadow:var(--shadow);padding:1.25rem;border-radius:1.25rem;font-size:.875rem}.site-header nav.is-open{display:flex;align-items:stretch;flex-direction:column;gap:0}.site-header nav a{padding:.75rem 1rem}h1{font-size:1.5625rem;letter-spacing:.09em}.button{padding:.875rem 1.75rem}.section{padding-top:4.375rem}.about-card{padding:2rem 1.625rem;border-radius:1.5rem}.lead{font-size:1.375rem}.about-card>p:not(.lead){font-size:.875rem}.heading-row{align-items:start;flex-direction:column;gap:.9375rem}.heading-row .pill{align-self:start}.steps{grid-template-columns:1fr}.steps{gap:.875rem}.steps article{padding:1.5rem 1.75rem}.step-number{font-size:1.75rem}.steps h3{margin-top:.3125rem}.faq-list summary{padding:1.125rem;font-size:.875rem}.faq-list details p{padding-inline:1.125rem}.closing{padding-block:4.0625rem 2.8125rem}.closing p{font-size:1.375rem}footer{flex-direction:column;gap:.5rem;text-align:center}footer p{margin:0}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]){scroll-behavior:auto}html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after{transition:none!important;animation:none!important}html:not([data-motion="full"]) .reveal.is-pending{opacity:1;transform:none}} /* Quiet directional markers; the surrounding links retain their full hit areas. */ .direction{display:inline-block;flex-shrink:0;width:0;height:0;vertical-align:middle;opacity:.72;border-left:.4375rem solid transparent;border-right:.4375rem solid transparent;filter:drop-shadow(0 .0625rem .0625rem rgba(72,60,96,.12))}.direction-down{border-top:.625rem solid currentColor}.direction-up{border-bottom:.625rem solid currentColor}.text-link .direction{margin-left:.5rem} /* Inspired by Samp/koh4ru_portfolio/cast.html's floating quick-nav. */ .section-nav{position:fixed;right:1.25rem;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;gap:.375rem;width:9.875rem;padding:.625rem;border-radius:1.25rem;transition:background .2s,box-shadow .2s}.section-nav:hover,.section-nav:focus-within{background:rgba(255,255,255,.9);box-shadow:0 .875rem 2.125rem #79639620}.section-nav a{position:relative;display:flex;align-items:center;min-height:2.75rem;padding:.5625rem .5rem .5625rem 1.5rem;border-radius:.75rem;font-size:.875rem;font-weight:700;line-height:1.5;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s}.section-nav a::before{content:"";position:absolute;left:.5625rem;top:50%;width:.375rem;height:.375rem;background:var(--purple);border-radius:50%;opacity:0;transform:translateY(-50%) scale(.5);transition:opacity .2s,transform .2s}.section-nav a:hover{background:#f1eafa;color:var(--ink)}.section-nav a[aria-current="location"]{background:#eee6f9;color:var(--ink)}.section-nav a[aria-current="location"]::before{opacity:1;transform:translateY(-50%) scale(1)} @media(max-width:92.5rem){body{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0rem))}html{scroll-padding-bottom:6.25rem}.section-nav{top:auto;bottom:max(.75rem,env(safe-area-inset-bottom,0rem));left:.75rem;right:.75rem;width:auto;transform:none;flex-direction:row;gap:.25rem;padding:.5rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-radius:1.125rem}.section-nav a{flex-shrink:0;padding-right:.875rem}.section-nav a:focus-visible{outline-offset:-.1875rem}}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.gallery-placeholder{min-height:18.75rem;text-align:center;border-radius:1.75rem;padding:2rem;background:linear-gradient(140deg,#ffffffaa,#f3eafa88)}.gallery-placeholder:nth-child(2){background:linear-gradient(140deg,#ffffffaa,#fbe8f088)}.gallery-motif{display:block;font-size:3rem;line-height:1.4;color:var(--star);margin-bottom:1.25rem}.gallery-placeholder:nth-child(2) .gallery-motif{color:var(--pink)}.gallery-placeholder h3{font-size:1.3125rem;margin:.625rem 0}.gallery-placeholder>p:not(.eyebrow){font-size:.875rem;color:var(--muted)}.gallery-placeholder .pill{margin-top:1.375rem}.page-loader{background:radial-gradient(ellipse at 15% 25%,#fbe3ef,transparent 65%),radial-gradient(ellipse at 85% 70%,#e6ddfc,transparent 65%),#f7f3fc}.loader-card{width:min(27.5rem,100%);text-align:center;padding:1.25rem 1.875rem 2rem;border-radius:1.875rem}.loader-card img{width:100%;margin:0 auto -.5rem}.loader-card progress{display:block;width:100%;height:.5rem;border:0;border-radius:6.1875rem;overflow:hidden;margin:1.25rem auto .625rem;background:#e9e0f3;accent-color:var(--purple)}.loader-card progress::-webkit-progress-bar{background:#e9e0f3}.loader-card progress::-webkit-progress-value{background:linear-gradient(90deg,#c5b0e8,#e5a7c4);border-radius:6.1875rem}.loader-card progress::-moz-progress-bar{background:#b699d6}.loader-count{font-size:.75rem;color:var(--muted)}.loader-card button{border:0;background:transparent;color:var(--muted);font-size:.75rem;min-height:2.75rem;margin-top:.625rem;padding:.625rem;cursor:pointer;text-decoration:underline;text-underline-offset:.25rem} @media(max-width:40rem){.gallery-grid{grid-template-columns:1fr}.gallery-placeholder{min-height:16.25rem;padding:1.75rem}}.direction-right{border:0;border-top:.40625rem solid transparent;border-bottom:.40625rem solid transparent;border-left:.625rem solid currentColor}.direction-left{border:0;border-top:.40625rem solid transparent;border-bottom:.40625rem solid transparent;border-right:.625rem solid currentColor}.cast-page .section{padding-top:3.125rem}.cast-page .section-heading{margin:2rem 0 1.25rem}.cast-page h1{font-size:clamp(1.6875rem,3vw,2.25rem)}.members-notice{text-align:center;font-size:.875rem;color:var(--muted);margin-bottom:2.25rem}.member-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.member-card{border-radius:1.5rem;overflow:hidden}.member-photo{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;background:linear-gradient(140deg,#f2e7fa,#f9e7ef);color:#9b7aab}.member-photo>span:first-child{font-size:3rem;line-height:1}.member-photo>span:last-child{font-size:.625rem;letter-spacing:.1em}.member-card:nth-child(2n) .member-photo{background:linear-gradient(140deg,#ece8ff,#faedf4)}.member-info{padding:1.5rem}.member-info h2{font-size:1.125rem;margin:.625rem 0}.member-info>p:last-child{font-size:.875rem;color:var(--muted)}.site-header a[aria-current="page"]{color:var(--purple);text-decoration:underline;text-underline-offset:.375rem} @media(max-width:56.25rem){.member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:40rem){.member-grid{grid-template-columns:1fr}}.gallery-preview{min-height:8.125rem;display:grid;place-items:center;margin-bottom:1.25rem;border-radius:1.125rem;background:#ffffff55;overflow:hidden}.gallery-preview .gallery-motif{margin:0}.gallery-preview img{width:100%;aspect-ratio:16/10;object-fit:cover}.member-photo img{width:100%;height:100%;object-fit:cover}.gallery-album{grid-column:1/-1;padding:1rem;min-height:0}.gallery-album .gallery-preview{margin:0;background:transparent}.gallery-preview.is-album{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1rem}.gallery-preview.is-album img{height:auto;aspect-ratio:16/9;border-radius:0} @media(max-width:40rem){.gallery-album{padding:.75rem}.gallery-preview.is-album{grid-template-columns:1fr;gap:.75rem}}.visit-actions{text-align:center;margin-top:1.875rem} /* Landing composition based on Samp/koh4ru_portfolio/index.html: a single wide card with the portrait overlapping its right edge. */ .sr-only{position:absolute!important;width:.0625rem!important;height:.0625rem!important;padding:0!important;margin:-.0625rem!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.ambient i{animation:ambient-drift 14s ease-in-out infinite alternate}.ambient i:nth-child(2){animation-delay:-6s}.ambient i:nth-child(3){animation-delay:-10s}.reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}.reveal.is-pending{transform:translateY(2.25rem)}.section-nav{transition:opacity .35s,visibility .35s,background .2s} @keyframes landing-arrive{from{opacity:0;translate:0 1.125rem}to{opacity:1;translate:0 0}}@keyframes ambient-drift{from{translate:-.75rem -.625rem}to{translate:1.25rem 1.5rem}} /* Speech stays to the portrait's right; clamp its outer edge to the viewport. */ /* Lift the speech bubble and give large displays a fuller main composition. */ /* Final landing layout: keep the logo, shortcuts, portrait and speech bubble separated. */ .ambient::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#a98bca20 .075rem,transparent .0875rem);background-size:2.125rem 2.125rem;mask-image:linear-gradient(to bottom,#0008,transparent 82%)} @keyframes dialogue-in{from{opacity:0;transform:translateX(-1rem) translateY(.5rem) scale(.94);filter:blur(.1875rem)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes dialogue-out{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translateX(.75rem) translateY(-.5rem) scale(.96);filter:blur(.125rem)}} /* News */ .news-page{min-height:100vh}.news-hero{padding-top:5.625rem;text-align:center}.news-hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-top:.625rem}.news-hero>p:last-child{color:var(--muted);margin-top:.875rem}.news-list{display:grid;gap:1.125rem;max-width:56.25rem;margin:2.8125rem auto 0}.news-card{display:grid;grid-template-columns:9.375rem 1fr;gap:1.75rem;padding:1.75rem 2rem;border-radius:1.5rem}.news-card time{font-size:.8125rem;color:var(--purple);letter-spacing:.08em}.news-card h2{font-size:1.1875rem;margin-bottom:.5rem}.news-card p{color:var(--muted);font-size:.875rem}.news-empty{padding:3.375rem 1.875rem;border-radius:1.875rem;text-align:center}.news-empty .news-symbol{display:block;color:var(--star);font-size:3.125rem;margin-bottom:.75rem}.top-jump{position:fixed;right:1.375rem;bottom:1.375rem;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;width:4.375rem;height:4.375rem;border-radius:1.375rem;color:var(--purple);font-size:.6875rem;font-weight:700;letter-spacing:.12em;transition:transform .25s,box-shadow .25s}.top-jump:hover{transform:translateY(-.1875rem);box-shadow:0 .875rem 1.75rem #8464b12e}.top-jump:active{transform:translateY(0) scale(.94);transition-duration:.1s}.top-jump .direction{margin-bottom:.3125rem} @media(max-width:40rem){.news-hero{padding-top:3.75rem}.news-card{grid-template-columns:1fr;gap:.5rem;padding:1.5rem}.top-jump{right:.75rem;bottom:.75rem;width:3.875rem;height:3.875rem}} /* Keep shortcuts below the logo at every desktop size. */ /* Softer layered background without scattered decorative stars. */ .ambient{background:radial-gradient(ellipse at 8% 22%,#f8d7e8 0,transparent 42%),radial-gradient(ellipse at 92% 16%,#dcd2fb 0,transparent 44%),radial-gradient(ellipse at 78% 88%,#ffe9b8 0,transparent 38%),linear-gradient(145deg,#faf7fd,#f5effb 48%,#fff8fb)}.ambient::before{background-image:linear-gradient(125deg,transparent 0 46%,#ffffff40 47% 49%,transparent 50% 100%),radial-gradient(circle,#9d81bf17 .075rem,transparent .0875rem);background-size:15rem 15rem,2.125rem 2.125rem;mask-image:linear-gradient(to bottom,#000a,transparent 95%)}.ambient::after{content:"";position:absolute;width:32.5rem;height:32.5rem;right:-11.25rem;top:32%;border:4.5rem solid #ffffff2f;border-radius:50%;box-shadow:-51.25rem 32.5rem 0 2.375rem #edcce52a;pointer-events:none}.news-empty .news-symbol{font-weight:300}.gallery-page{min-height:calc(100vh - 7.5rem)}.gallery-hero{padding-top:5.625rem;text-align:center}.gallery-hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-top:.625rem}.gallery-hero>p:last-child{color:var(--muted);margin-top:.875rem}.gallery-page .gallery-grid{padding-bottom:6.25rem}.contact-card{width:min(45rem,100%);margin:2.8125rem auto 6.25rem;padding:4rem 2.5rem;border-radius:2rem}.contact-card p{color:var(--muted);margin-top:.875rem} @media(max-width:40rem){.gallery-hero{padding-top:3.75rem}.contact-card{margin-top:2rem;padding:2.75rem 1.5rem}} @media(max-width:92.5rem){.top-jump{bottom:6.25rem}} /* Large, layered page rhythm inspired by editorial character sites. */ .wrap{width:min(76.25rem,calc(100% - 4.5rem))}.section{padding-top:clamp(5.75rem,10vw,9.375rem)}.ambient::before{inset:-10rem;background-position:var(--pattern-x,0) var(--pattern-y,0),var(--dot-x,0) var(--dot-y,0);animation:ambient-pattern 36s linear infinite}.ambient::after{right:-10.625rem;top:28%;transform:translate3d(0,var(--ring-y,0),0) rotate(var(--ring-turn,0deg));animation:ambient-ring 18s ease-in-out infinite alternate}.ambient i{opacity:.32;filter:blur(5.75rem)}.ambient i:first-child{width:48vw;height:48vw;background:#f4bfd9}.ambient i:nth-child(2){width:44vw;height:44vw;background:#bfaef0}.ambient i:nth-child(3){width:46vw;height:46vw;background:#ffe09a} @keyframes ambient-pattern{to{background-position:15rem -15rem,-4.25rem 4.25rem}} @keyframes ambient-ring{from{margin-top:-1.5rem;margin-right:0}to{margin-top:2.375rem;margin-right:3.375rem}} /* Homepage news sits directly after the main visual and stays editable through news-database.js. */ .home-news{position:relative;width:100%;padding:clamp(4.375rem,8vw,7.1875rem) 0;overflow:hidden;isolation:isolate}.home-news::before{content:"NEWS";position:absolute;z-index:-1;left:max(1.5rem,calc((100vw - 88.75rem)/2));top:0;color:#ffffff6e;font:800 clamp(6.875rem,19vw,18.75rem)/.8 Georgia,serif;letter-spacing:-.08em;pointer-events:none}.home-news::after{content:"";position:absolute;z-index:-2;inset:2.125rem 0;background:linear-gradient(105deg,#eadffcaa,#fff6f9d6 48%,#ffedc8a6);border-block:.0625rem solid #ffffffc9;transform:skewY(-1.4deg)}.home-news-inner{position:relative}.home-news-heading{align-items:end;margin-bottom:2.125rem}.home-news-heading h2{font-size:clamp(2.5rem,6vw,4.875rem);line-height:1;letter-spacing:-.025em}.news-view-all{display:inline-flex;align-items:center;gap:1rem;padding:.75rem .125rem}.home-news-list{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1.125rem}.home-news-list .news-card{min-height:16.25rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.home-news-list .news-empty{grid-column:1/-1}.news-empty-home{min-height:13.125rem;display:flex;align-items:center;justify-content:center;gap:1.75rem;text-align:left;background:linear-gradient(135deg,#ffffffc9,#ffffff78)}.news-empty-home .news-symbol{margin:0;font-size:4.375rem}.news-empty h3{font-size:clamp(1.25rem,2vw,1.625rem)}.news-empty p{color:var(--muted);margin-top:.375rem}.news-card{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}.news-card:hover{transform:translateY(-.375rem);box-shadow:0 1.5rem 3rem #79589322}.news-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:1rem}.news-card-body{position:relative;z-index:1}.news-card-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;font-size:.75rem;letter-spacing:.1em;color:var(--purple)}.news-card-meta span{padding:.125rem .5625rem;border-radius:6.1875rem;background:#eee5fa}.news-card h3{font-size:1.1875rem;line-height:1.55}.news-card-summary{margin-top:.5rem;color:var(--muted);font-size:.875rem}.news-card-link{position:absolute;inset:0;z-index:2} @media(max-width:56.25rem){.wrap{width:min(100% - 3rem,56.25rem)}.home-news-list{grid-template-columns:1fr 1fr}.home-news::before{font-size:24vw}} @media(max-width:40rem){.wrap{width:calc(100% - 2.25rem)}.section{padding-top:4.875rem}.home-news{padding:4.5rem 0 3.875rem}.home-news::before{left:.75rem;top:1.375rem;font-size:30vw}.home-news::after{inset:1.5rem 0}.home-news-heading{flex-direction:row;align-items:end}.home-news-heading h2{font-size:2.6875rem}.home-news-list{grid-template-columns:1fr}.home-news-list .news-card{min-height:0}.news-empty-home{min-height:11.875rem;padding:2.125rem 1.375rem;gap:1.125rem}.news-empty-home .news-symbol{font-size:3rem}.ambient::after{width:22.5rem;height:22.5rem;border-width:2.875rem}} /* A wider desktop header gives the top of the landing page a stronger frame. */ @media(min-width:75rem){.site-header{width:min(105rem,calc(100% - 3rem));height:6rem;padding-inline:2.875rem;border-radius:1.875rem}.brand{width:13.125rem}.site-header nav{gap:2.75rem;font-size:.96875rem}} /* Keep the cast artwork above every visual layer inside the landing composition. */ /* Keep every portrait inside the landing section; per-cast visual scale comes from cast-database.js. */ /* Cast profile details and optional external destinations. */ .member-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem}.member-social-link{display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;min-width:7rem;padding:.625rem .9375rem;border:.0625rem solid #d7cae5;border-radius:6.1875rem;background:#ffffffa6;color:var(--purple);font-size:.75rem;font-weight:700;letter-spacing:.08em;transition:transform .25s,background .25s,box-shadow .25s}.member-social-link:hover{transform:translateY(-.125rem);background:#fff;box-shadow:0 .5625rem 1.375rem #79589318} /* Landing layout from the annotated reference: NAV / centered logo / contact, then one full visual. */ .landing-header{position:absolute;top:1.5rem;left:2.25rem;right:2.25rem;z-index:40;width:auto;max-width:none;height:7.25rem;margin:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}.landing-nav{position:absolute;left:0;top:0;display:flex;height:4.75rem;padding:0 1.875rem;border-radius:2.375rem;gap:1.875rem}.landing-brand{position:absolute;left:50%;top:0;display:grid;place-items:center;width:8.25rem;height:7.25rem;padding:.8125rem;border-radius:0 0 1.5rem 1.5rem;transform:translateX(-50%)}.landing-brand img{width:100%;height:100%;margin:0;object-fit:contain}.landing-contact{position:absolute;right:0;top:0;display:inline-flex;align-items:center;justify-content:center;gap:1.125rem;min-width:13.75rem;height:4.75rem;padding:0 1.75rem;border-radius:2.375rem;font-size:.875rem;font-weight:700}.landing-contact span{font-size:1.1875rem}.mobile-contact-link{display:none}.landing-header .landing-brand{top:-1.5rem;height:9.125rem}.split-header{position:relative;top:auto;left:auto;right:auto;z-index:40;width:calc(100% - 4.5rem);max-width:none;height:7.25rem;margin:1.5rem 2.25rem 0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}.split-header .landing-brand{height:7.25rem} @media(max-width:74.9375rem) and (min-width:40.0625rem){.landing-header{left:1.5rem;right:1.5rem}.split-header{width:calc(100% - 3rem);margin-inline:1.5rem}.landing-nav{gap:1.125rem;padding-inline:1.375rem}.landing-brand{width:7rem;height:6.375rem}.landing-header .landing-brand{top:-1.5rem;height:8.125rem}.split-header .landing-brand{height:6.375rem}.landing-contact{min-width:11.25rem}} @media(max-width:40rem){.landing-header,.split-header{top:.75rem;left:.75rem;right:.75rem;width:auto;height:4rem;padding:0 .75rem;border:.0625rem solid white;border-radius:1.25rem;background:#fffcfede;box-shadow:var(--shadow);backdrop-filter:blur(1.25rem)}.landing-header{position:absolute}.split-header{position:relative;top:auto;left:auto;right:auto;margin:.75rem .75rem 0}.landing-brand,.landing-header .landing-brand,.split-header .landing-brand{left:.875rem;top:0;width:8.125rem;height:4rem;padding:0;background:none;border:0;box-shadow:none;transform:none}.landing-brand img{margin:0}.landing-header .menu-toggle,.split-header .menu-toggle{position:absolute;right:.625rem;z-index:3}.landing-contact{display:none}.landing-nav{position:absolute;top:4.625rem;left:0;right:0;height:auto;padding:1.25rem;border-radius:1.25rem}.landing-nav .mobile-contact-link{display:block}}img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.home-news{z-index:12}.section-nav{z-index:60} /* Keep the full visible portrait inside the first panel, including its click jump. */ /* Brighter pink-and-blue art direction. */ :root{--star:#ffd56f;--ink:#3f3f68;--muted:#6f708e;--purple:#7169c7;--pink:#ef87b5;--blue:#70a9eb;--line:rgba(104,132,199,.17);--shadow:0 1rem 3rem rgba(86,105,171,.1)}body{background:#f8f5fc}.ambient{background:radial-gradient(ellipse at 5% 18%,#ffd9e9 0,transparent 42%),radial-gradient(ellipse at 90% 14%,#cfe5ff 0,transparent 44%),radial-gradient(ellipse at 78% 85%,#ffe9be 0,transparent 36%),linear-gradient(145deg,#fff9fc,#f2f6ff 52%,#fff8fb)}.ambient i:first-child{background:#ffabc9}.ambient i:nth-child(2){background:#87bdf6}.ambient i:nth-child(3){background:#ffd16e}.primary{background:linear-gradient(115deg,#e77daf,#7776d6 52%,#6aa9e8);box-shadow:0 .625rem 1.5625rem #8978cf2b}.eyebrow{color:#637fd0}.about-card{background:linear-gradient(135deg,#fff8fcbb,#edf6ffb8)}.steps article:nth-child(1){background:linear-gradient(145deg,#fff,#ffeaf3b8)}.steps article:nth-child(2){background:linear-gradient(145deg,#fff,#e7f3ffc4)}.steps article:nth-child(3){background:linear-gradient(145deg,#fff,#fff2d4b8)} /* The horizontal shadow logo uses a matching wide top tab on every page. */ .landing-brand{width:16.25rem;padding:.5rem 1.125rem;border-radius:0 0 2.125rem 2.125rem;background:linear-gradient(145deg,#fffdfede,#f5f7ffdc)}.landing-brand img{filter:drop-shadow(0 .5625rem .5rem #675f8a28)}.landing-header .landing-brand,.split-header .landing-brand{top:-1.5rem;width:16.25rem;height:8.75rem} /* Animated landing backdrop and typographic welcome. */ @media(max-width:74.9375rem) and (min-width:40.0625rem){.landing-brand,.landing-header .landing-brand,.split-header .landing-brand{top:-1.5rem;width:13.125rem;height:7.875rem}} @media(max-width:51.25rem) and (min-width:40.0625rem){.landing-brand,.split-header .landing-brand{width:10.625rem}.landing-nav{gap:.6875rem;padding-inline:1rem}.landing-contact{min-width:9.375rem;padding-inline:1.125rem}.site-header nav{font-size:.6875rem}} @media(max-width:40rem){.landing-brand,.landing-header .landing-brand,.split-header .landing-brand{left:.875rem;top:50%;width:9.75rem;height:4rem;padding:.125rem .25rem;border-radius:0;background:none;transform:translateY(-50%);overflow:hidden}.landing-brand img{height:4.8rem;transform:translateY(-.18rem) scale(1.08);transform-origin:center}} /* Scale every rem-based measurement with the viewport and the user's font preference. */ html{font-size:clamp(87.5%,calc(82% + .25vw),112.5%)} .member-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;margin:.875rem 0 0}.member-meta div{padding:.625rem .75rem;border:.0625rem solid rgba(215,202,229,.7);border-radius:1rem;background:#ffffff8f}.member-meta dt{font-size:.625rem;font-weight:700;letter-spacing:.14em;color:var(--purple)}.member-meta dd{margin:.1875rem 0 0;font-size:.875rem;color:var(--ink);font-weight:700}.member-photo img{object-position:center top} @media(max-width:40rem){.member-meta{grid-template-columns:1fr 1fr}} /* Cast list and profile pages */ .member-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease}.member-card:hover{transform:translateY(-.25rem);box-shadow:0 1.125rem 2.75rem rgba(86,105,171,.14)}.member-card:focus-visible{outline:.1875rem solid rgba(113,105,199,.45);outline-offset:.25rem}.member-card .member-info{display:flex;flex:1;flex-direction:column}.member-card .member-info>.member-card-hint{margin-top:auto;padding-top:.75rem;text-align:right;color:var(--cast-accent-ink);font-size:.75rem;font-weight:700;letter-spacing:.1em}.cast-detail-page{min-height:calc(100vh - 7.5rem)}.cast-detail{position:relative;display:grid;grid-template-columns:minmax(20rem,1.08fr) minmax(0,.92fr);gap:2rem;align-items:center;padding-top:7rem;padding-bottom:0}.cast-detail-visual{display:grid;place-items:center;min-height:42rem;padding:2rem;border-radius:2rem;overflow:hidden;background:linear-gradient(145deg,#fff8fbcc,#eef5ffcc)}.cast-detail-visual img{width:100%;height:40rem;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 1.25rem 1.75rem rgba(86,73,112,.18))}.cast-detail-info{padding:2.5rem;border-radius:2rem}.cast-detail-info h1{font-size:clamp(2.25rem,5vw,4rem);line-height:1.08;margin:.5rem 0 1.5rem;color:var(--ink)}.cast-detail-signature{position:absolute;right:1%;bottom:20%;z-index:9;width:auto;max-width:46%;max-height:12rem;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 .45rem .7rem rgba(72,60,96,.2));transform:rotate(-4deg);transform-origin:right bottom;pointer-events:none;user-select:none;-webkit-user-drag:none} @media(max-width:40rem){.cast-detail-signature{right:-1%;bottom:7%;max-width:50%;max-height:8.5rem}}.cast-detail-meta{margin-top:0;margin-bottom:1.5rem}.cast-detail-info .button{margin-top:1.75rem}.cast-detail-back{position:absolute;top:2rem;left:0;z-index:4;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .25rem;color:var(--purple);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-decoration:none;transition:color .2s ease,transform .2s ease}.cast-detail-back:hover{color:var(--pink);transform:translateX(-.1875rem)}.cast-detail-back:focus-visible{outline:.1875rem solid rgba(113,105,199,.4);outline-offset:.25rem;border-radius:.25rem}.cast-detail-empty{position:relative;padding-top:7rem}.cast-detail-empty .contact-card{margin-top:0} @media(max-width:56.25rem){.cast-detail{grid-template-columns:1fr;padding-top:4.5rem}.cast-detail-back{top:.75rem}.cast-detail-visual{min-height:35rem}.cast-detail-visual img{height:34rem}} @media(max-width:40rem){.cast-detail{gap:1.125rem;padding-top:3.5rem;padding-bottom:0}.cast-detail-back{top:.375rem;left:.25rem}.cast-detail-visual{min-height:29rem;padding:1.25rem;border-radius:1.5rem}.cast-detail-visual img{height:28rem}.cast-detail-info{padding:1.625rem;border-radius:1.5rem}.cast-detail-info h1{font-size:2.25rem}} /* Cast card transition */ .member-card.is-opening{z-index:3;animation:cast-card-open .42s cubic-bezier(.16,1,.3,1) both}.is-cast-card-leaving .member-card:not(.is-opening){animation:cast-card-fade .32s ease both}.cast-detail-visual{animation:cast-detail-visual-in .7s cubic-bezier(.16,1,.3,1) both}.cast-detail-info{animation:cast-detail-info-in .72s cubic-bezier(.16,1,.3,1) .08s both} @keyframes cast-card-open{0%{transform:translateY(0) scale(1);filter:blur(0);opacity:1}55%{transform:translateY(-.75rem) scale(1.035);filter:blur(0);opacity:1}100%{transform:translateY(1.25rem) scale(.96);filter:blur(.25rem);opacity:0}} @keyframes cast-card-fade{to{transform:translateY(.75rem) scale(.98);opacity:0;filter:blur(.1875rem)}} @keyframes cast-detail-visual-in{from{opacity:0;transform:translateY(1.5rem) scale(.94);filter:blur(.375rem)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes cast-detail-info-in{from{opacity:0;transform:translateY(1rem);filter:blur(.25rem)}to{opacity:1;transform:none;filter:blur(0)}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .member-card.is-opening,html:not([data-motion="full"]) .is-cast-card-leaving .member-card:not(.is-opening),html:not([data-motion="full"]) .cast-detail-visual,html:not([data-motion="full"]) .cast-detail-info{animation:none}} /* News layout refinements: homepage uses title-only strips; archive keeps full cards. */ .home-news-list{display:grid;grid-template-columns:1fr;gap:.75rem;max-width:56.25rem;margin-top:1.75rem}.home-news-list .news-card{min-height:0;display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem 1.25rem;border-radius:1.125rem}.home-news-list .news-card h3{min-width:0;font-size:1rem;line-height:1.55;margin:0;color:var(--ink)}.news-card-detail{display:inline-flex;align-items:center;gap:.625rem;color:var(--purple);font-size:.75rem;font-weight:700;white-space:nowrap}.home-news-list .news-card:hover{transform:translateX(.25rem);box-shadow:0 .875rem 1.75rem #79589318}.news-list{display:grid;gap:1.125rem;max-width:56.25rem;margin:2.8125rem auto 0}.news-list .news-card{display:grid;grid-template-columns:1fr;gap:1rem;padding:1.5rem 1.75rem;border-radius:1.25rem}.news-list .news-card:has(.news-card-image){grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);align-items:start}.news-list .news-card-body{min-width:0}.news-list .news-card h3{font-size:1.1875rem;line-height:1.55;margin:0}.news-list .news-card-summary{line-height:1.85;max-width:44rem}.news-card-action{width:max-content;margin-top:1.25rem;gap:1rem} @media(max-width:40rem){.home-news-list{margin-top:1.25rem}.home-news-list .news-card{grid-template-columns:4.25rem minmax(0,1fr) auto;gap:.625rem;padding:.9375rem .875rem;border-radius:1rem}.home-news-list .news-card h3{font-size:.875rem}.news-card-detail{gap:.375rem;font-size:.6875rem}.news-list .news-card,.news-list .news-card:has(.news-card-image){grid-template-columns:1fr;padding:1.25rem}.news-list .news-card-summary{font-size:.8125rem}} /* Responsive landing composition: preserve header spacing and keep dialogue readable. */ @media(max-width:85rem) and (min-width:68.0625rem){.landing-brand,.landing-header .landing-brand,.split-header .landing-brand{width:13.5rem;height:7.75rem}.landing-nav{gap:clamp(.75rem,1.15vw,1.125rem);padding-inline:clamp(1.125rem,1.8vw,1.5rem)}.landing-contact{min-width:11rem;padding-inline:1.25rem} } @media(max-width:68rem) and (min-width:51.3125rem){.landing-brand,.landing-header .landing-brand,.split-header .landing-brand{width:10.625rem;height:7.25rem}.landing-nav{gap:.6875rem;padding-inline:1rem}.landing-contact{min-width:9.375rem;padding-inline:1.125rem} } /* Cast detail poke interaction. */ .cast-detail-visual{position:relative;min-height:42rem;padding:0 0 12rem;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible;clip-path:inset(-100vh -100vw 0 -100vw)}.cast-detail-poke{position:relative;z-index:2;display:grid;place-items:end center;width:100%;min-height:42rem;padding:0;border:0;background:transparent;cursor:pointer;color:inherit}.cast-detail-poke[aria-disabled="true"]{cursor:default}.cast-detail-poke img{position:relative;z-index:2;width:100%;height:40rem;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 1.25rem 1.75rem rgba(86,73,112,.18));transform-origin:50% 100%}.cast-detail-bubble{position:absolute;right:4%;top:12%;z-index:1;display:flex;align-items:center;justify-content:center;width:min(16rem,42%);min-height:6.5rem;margin:0;padding:1rem 1.25rem;border:.0625rem solid #fff;border-radius:1.5rem;background:#ffffffd8;box-shadow:0 .75rem 1.75rem rgba(86,73,112,.1);color:var(--ink);font-size:.9375rem;line-height:1.7;text-align:center;visibility:hidden;opacity:0;transform:translateY(.5rem) scale(.96);pointer-events:none}.cast-detail-bubble::after{content:"";position:absolute;left:50%;bottom:-.6875rem;border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.75rem solid #ffffffd8;transform:translateX(-50%)}.cast-detail-bubble.is-visible{visibility:visible;opacity:1;animation:dialogue-in .42s cubic-bezier(.16,1,.3,1) both}.cast-detail-bubble.is-hiding{visibility:visible;animation:dialogue-out .42s ease both} @media(max-width:56.25rem){.cast-detail-visual{min-height:35rem}.cast-detail-poke{min-height:35rem}.cast-detail-poke img{height:34rem}.cast-detail-bubble{right:2%;top:8%;width:min(15rem,48%)}} @media(max-width:40rem){.cast-detail-visual{min-height:29rem;padding:0 0 8rem}.cast-detail-poke{min-height:29rem}.cast-detail-poke img{height:28rem}.cast-detail-bubble{right:-.25rem;top:1.5rem;width:48%;min-height:5.75rem;padding:.75rem;font-size:.8125rem;border-radius:1.125rem}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) }.cast-detail-static{cursor:default}.cast-detail-static img{pointer-events:none} /* Cast avatar backgrounds follow each cast support color. */ .member-card{--cast-accent:#8e75d6;--cast-accent-soft:#f2e7fa;--cast-accent-mid:#d9c8ff;--cast-accent-ink:#6346a7}.member-card:nth-child(n) .member-photo{position:relative;isolation:isolate;overflow:hidden;background:var(--cast-accent-soft);color:var(--cast-accent-ink)}.member-photo::before,.member-photo::after{display:none}.member-photo img{position:relative;z-index:1;filter:drop-shadow(0 .75rem .75rem rgba(72,60,96,.12))}.member-info .eyebrow,.member-card-hint{color:var(--cast-accent-ink)}.member-card:hover .member-photo img{filter:drop-shadow(0 .875rem .875rem rgba(72,60,96,.15));transform:scale(1.045)}.member-photo img{transition:transform .4s cubic-bezier(.16,1,.3,1)}.member-card .member-info>.member-card-hint{transition:transform .25s ease}.member-card:hover .member-card-hint{transform:translateX(.25rem)}.generation-tag{position:absolute;z-index:2;top:.75rem;left:.75rem;padding:.25rem .6875rem;border-radius:6.1875rem;background:rgba(255,255,255,.88);color:var(--cast-accent-ink);font-size:.6875rem;font-weight:800;letter-spacing:.05em;box-shadow:0 .25rem .75rem rgba(86,73,112,.12)} /* Official X links. */ .visit-actions{display:flex;justify-content:center;align-items:center;gap:.875rem;flex-wrap:wrap}.visit-actions [aria-disabled=true]{border:.0625rem solid rgba(128,105,217,.18);background:#e9e4f5;color:#8b82a4;cursor:not-allowed;box-shadow:none}.visit-actions [aria-disabled=true]:hover{transform:none;box-shadow:none}.official-x,.official-group{border:.0625rem solid rgba(128,105,217,.3);background:linear-gradient(115deg,#ffffffed,#f1edffeb);color:var(--purple);box-shadow:0 .375rem 1rem rgba(128,105,217,.1)}.official-x span,.official-group span{font-size:.75rem;margin-left:.125rem}.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem;margin:1.75rem 0 0}.about-welcome{color:var(--muted)}.about{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem);isolation:isolate}.about-heading{grid-column:1/-1;margin-bottom:clamp(.75rem,2vw,1.5rem)}.about-card{position:relative;z-index:2;grid-column:1/9;grid-row:2;align-self:center;min-height:24rem;padding-right:clamp(4rem,8vw,7rem)}.about-poster{--poster-x:-5%;--poster-hover-x:-7%;--poster-away-x:18%;--poster-angle:3.5deg;--poster-away-angle:15deg;position:relative;z-index:3;grid-column:8/13;grid-row:2;align-self:center;justify-self:start;width:115%;margin-block:-2rem;padding:.5rem;border-radius:1.75rem;overflow:visible;background:#ffffffc7;opacity:1;transform:translate3d(var(--poster-x),0,0) rotate(var(--poster-angle)) scale(1);box-shadow:0 1.75rem 3.75rem rgba(86,105,171,.2);transition:opacity .72s ease,transform 1s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;will-change:transform,opacity}.about-poster::before{content:"";position:absolute;z-index:-1;inset:3% -4% -3% 4%;border-radius:1.75rem;background:linear-gradient(145deg,#f3a6c666,#86bdf066);transform:rotate(-4deg);box-shadow:0 1rem 2.5rem rgba(113,105,199,.12)}.has-poster-motion .about-poster:not(.is-in-view){opacity:0;transform:translate3d(var(--poster-away-x),4.5rem,0) rotate(var(--poster-away-angle)) scale(.84)}.about-poster.is-in-view:hover,.about-poster:hover{transform:translate3d(var(--poster-hover-x),-.75rem,0) rotate(1deg) scale(1.035);box-shadow:0 2rem 4.25rem rgba(86,105,171,.24)}.about-poster img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:877/1200;object-fit:contain;border-radius:1.375rem;user-select:none;-webkit-user-drag:none}.about-facts div{padding:1rem 1.125rem;border:.0625rem solid rgba(201,223,255,.9);border-radius:1.125rem;background:#ffffff8f}.about-facts dt{color:#637fd0;font-size:.6875rem;font-weight:700;letter-spacing:.14em}.about-facts dd{margin:.25rem 0 0;color:var(--ink);font-size:1rem;font-weight:700} @media(max-width:68.75rem) and (min-width:40.0625rem){.about-card{grid-column:1/9;padding-right:clamp(2.5rem,6vw,4.5rem)}.about-poster{--poster-x:-3%;--poster-hover-x:-5%;--poster-away-x:15%;--poster-angle:3deg;--poster-away-angle:13deg;grid-column:8/13;width:110%;margin-block:-1rem}} @media(max-width:40rem){.about{grid-template-columns:1fr}.about-heading,.about-card,.about-poster{grid-column:1;grid-row:auto}.about-card{min-height:0;padding-right:1.625rem}.about-facts{grid-template-columns:1fr}.about-poster{--poster-x:0%;--poster-hover-x:0%;--poster-away-x:12%;--poster-angle:2deg;--poster-away-angle:11deg;width:min(92%,22rem);margin-block:.5rem;justify-self:center}}.faq-section{padding-bottom:clamp(4rem,8vw,7rem)}.home-news,.about,#visit,.faq-section{position:relative;isolation:isolate}.home-news::before,.about::before,#visit::before,.faq-section::before{position:absolute;z-index:-1;font:800 clamp(6.875rem,16vw,16rem)/.8 Georgia,serif;letter-spacing:-.08em;opacity:.24;pointer-events:none;white-space:nowrap}.home-news::before{content:"NEWS";left:max(1.5rem,calc((100vw - 88.75rem)/2));top:0;color:#fff}.about::before{content:"ABOUT";left:clamp(-4rem,-4vw,-1.5rem);top:clamp(7rem,13vw,10rem);color:#e98fb5}#visit::before{content:"VISIT";right:clamp(-3rem,-3vw,-1rem);top:clamp(7rem,12vw,9rem);color:#79afe3}.faq-section::before{content:"FAQ";left:clamp(-3rem,-3vw,-1rem);top:clamp(6rem,11vw,8rem);color:#aa94d2} @media(max-width:40rem){.home-news::before,.about::before,#visit::before,.faq-section::before{font-size:clamp(4.75rem,25vw,7rem);opacity:.18}.about::before{top:7.5rem;left:-1rem}#visit::before{top:8rem;right:-.5rem}.faq-section::before{top:7rem;left:-.5rem}}.visit-note{font-size:.75rem;text-align:center;color:var(--muted);margin-top:1.375rem} @media(max-width:40rem){.visit-actions{align-items:stretch}.visit-actions .button{width:100%;max-width:20rem}.visit-note{text-align:left}} /* Date-only timestamps for homepage news strips. */ .home-news-list .news-card time{color:#637fd0;font-size:.75rem;font-weight:700;letter-spacing:.04em;white-space:nowrap} @media(max-width:40rem){.home-news-list .news-card time{font-size:.6875rem;letter-spacing:0}}.news-list .news-card:target{border-color:rgba(113,105,199,.42);box-shadow:0 1rem 2.5rem rgba(86,105,171,.16)} /* Keep each visible portrait fully inside the profile section and above the footer. */ .cast-detail-visual{min-height:clamp(34rem,70vh,46rem);padding:0;overflow:visible;clip-path:none}.cast-detail-poke{width:min(82%,34rem);height:clamp(32rem,68vh,44rem);min-height:0;aspect-ratio:auto;justify-self:center;overflow:visible}.cast-detail-portrait-layer{position:absolute;inset:0;display:block;pointer-events:none;transform-origin:50% 50%}.cast-detail-poke img{width:100%;max-width:none;height:100%;margin:0;object-fit:contain;object-position:center;transform-origin:50% 100%}.cast-detail-bubble{top:4%} @media(max-width:56.25rem){.cast-detail-visual{min-height:clamp(31rem,64vh,39rem)}.cast-detail-poke{height:clamp(29rem,62vh,37rem)}.cast-detail-bubble{top:3%}} @media(max-width:40rem){.cast-detail-visual{min-height:clamp(27rem,60vh,33rem);padding:0}.cast-detail-poke{width:78%;height:clamp(25rem,58vh,31rem);min-height:0}.cast-detail-bubble{top:.5rem}} /* Keep the section words equally present while retaining their own colors. */ .home-news::before,.about::before,#visit::before,.faq-section::before{opacity:.22}.home-news::before{color:#91abd9}.about::before{color:#df9db8}#visit::before{color:#86acd3}.faq-section::before{color:#aa99cc} /* Fit the tightly cropped logo without the old transparent-margin compensation. */ .brand img{margin:0}.landing-brand img{width:100%;height:100%;margin:0;object-fit:contain;transform:none}.landing-header .landing-brand,.split-header .landing-brand{width:16.25rem;height:6.25rem;padding:1rem 1.125rem} @media(min-width:40.0625rem){.landing-brand img{width:86%;justify-self:center} }.loader-card img{width:min(100%,20rem);height:auto;margin:.5rem auto 1.25rem} @media(min-width:40.0625rem) and (max-width:74.9375rem){.landing-header .landing-brand,.split-header .landing-brand{width:13.125rem;height:5.5rem;padding:.875rem 1rem} } @media(max-width:40rem){.landing-header .landing-brand,.split-header .landing-brand{width:9.75rem;height:3.25rem;padding:.375rem .25rem;overflow:visible}.landing-brand img{height:100%;transform:none} }.header-contact-group{position:absolute;right:0;top:0;display:flex;align-items:center;gap:.625rem}.header-contact-group .landing-contact{position:static}.social-bubble{display:grid;place-items:center;flex-shrink:0;width:2.875rem;height:2.875rem;border:1px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(255,255,255,.62);color:var(--purple);box-shadow:var(--shadow);backdrop-filter:blur(1.25rem);transition:transform .2s,background .2s}.social-bubble:hover{color:var(--purple);background:rgba(255,255,255,.9);transform:translateY(-2px)}.social-bubble svg{display:block}.mobile-contact-group{display:none} @media(max-width:40rem){.header-contact-group{display:none}.landing-nav .mobile-contact-group{display:flex;align-items:center;justify-content:center;gap:1rem}.landing-header .landing-brand,.split-header .landing-brand{top:44%}.landing-header .menu-toggle,.split-header .menu-toggle{min-height:2.75rem;padding:.45rem .8rem;border:.0625rem solid rgba(128,105,217,.14);border-radius:1.375rem;background:rgba(255,255,255,.72);font-size:.875rem;font-weight:800;letter-spacing:.06em;line-height:1}.menu-toggle span{display:grid;place-items:center;font-weight:700;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1)}.menu-toggle[aria-expanded="true"] span{transform:rotate(135deg)}.landing-nav .mobile-contact-group{margin-top:.7rem;padding-top:1rem;border-top:.0625rem solid rgba(128,105,217,.12)}.landing-nav .mobile-contact-group .social-bubble{width:3rem;height:3rem;padding:0;border-radius:50%;color:#fff;background:var(--ink);box-shadow:0 .45rem 1.1rem rgba(72,69,96,.16)}.landing-nav .mobile-contact-group .social-bubble svg{display:block;width:1.15rem;height:1.15rem;margin:0;transform:none}.landing-nav .mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.55rem 1.35rem;border:.0625rem solid rgba(128,105,217,.16);border-radius:1.5rem;color:#fff;background:linear-gradient(100deg,var(--pink),var(--purple));box-shadow:0 .45rem 1.1rem rgba(128,105,217,.18);font-weight:800;letter-spacing:.04em;line-height:1.2} } /* Mobile spacing and control widths. */ @media(max-width:40rem){.heading-row{gap:1.5rem;margin-bottom:2.125rem}.home-news-heading{align-items:center}.visit-actions{align-items:center;gap:.75rem;margin-top:2.375rem}.visit-actions .button{width:auto;max-width:none;padding-inline:1.25rem}.home-news::before,.about::before,#visit::before,.faq-section::before{opacity:.18} } /* Keep TOP clear of the bottom navigation on tablet and smaller desktops. */ @media(min-width:40.0625rem) and (max-width:92.5rem){body:has(.section-nav) .top-jump{bottom:calc(6rem + env(safe-area-inset-bottom,0rem))} } /* Mobile pages scroll without a fixed section navigation bar. */ @media(max-width:40rem){.section-nav{display:none}body{padding-bottom:0}html{scroll-padding-bottom:1rem}.top-jump{right: max(.75rem,env(safe-area-inset-right,0rem));bottom:calc(.75rem + env(safe-area-inset-bottom,0rem))} } /* Page transition uses the softer 1.0 palette. */ .page-transition{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;pointer-events:none;visibility:hidden;isolation:isolate}.page-transition::before,.page-transition-wash{position:absolute;inset:-12% -10% auto;width:120%;height:124%;border-radius:48% 52% 46% 54% / 9% 11% 8% 10%;transform-origin:50% 50%}.page-transition::before{content:"";z-index:1;background:linear-gradient(115deg,var(--pink) 0 42%,#a68dce 66%,var(--purple) 100%)}.page-transition-wash{z-index:0;background:linear-gradient(110deg,var(--star),#fff5d9);transform:translateY(5%) rotate(-.6deg)}.page-transition::after{content:"";position:absolute;z-index:3;left:50%;top:50%;width:1rem;height:1rem;border:.15rem solid rgba(255,255,255,.88);border-radius:50%;box-shadow:-11rem -5rem 0 .22rem rgba(255,255,255,.75),10rem -7rem 0 .05rem rgba(255,255,255,.86),-8rem 8rem 0 .1rem rgba(255,255,255,.7),12rem 6rem 0 .28rem rgba(255,255,255,.62);transform:translate(-50%,-50%)}.page-transition-logo{position:relative;z-index:4;width:min(19rem,58vw);padding:1rem 1.4rem;border:.125rem solid rgba(255,255,255,.95);border-radius:1.25rem;background:rgba(255,255,255,.92);box-shadow:0 .65rem 2rem rgba(72,60,96,.14);transform:rotate(-2deg)}.page-transition-spark{position:absolute;z-index:3;left:50%;bottom:12%;width:.75rem;height:.75rem;border-radius:50%;background:#fff;box-shadow:5rem -5rem 0 .12rem #fff,-6rem -2rem 0 .22rem #fff,9rem -10rem 0 #fff,-10rem -11rem 0 .08rem #fff}.page-transition-progress{position:absolute;z-index:5;left:50%;top:calc(50% + 7rem);width:min(18rem,64vw);height:.5rem;border:.1rem solid rgba(255,255,255,.88);border-radius:6rem;background:rgba(255,255,255,.25);overflow:hidden;transform:translateX(-50%)}.page-transition-progress i{display:block;width:var(--load-progress,0%);height:100%;border-radius:inherit;background:#fff;transition:width .2s ease}.page-transition.is-holding{visibility:visible}.page-transition.is-entering{visibility:visible;animation:page-transition-hide 1.45s both}.page-transition.is-entering::before{animation:page-liquid-drain 1.15s .2s cubic-bezier(.55,0,.2,1) both}.page-transition.is-entering .page-transition-wash{animation:page-liquid-drain-back 1.2s .1s cubic-bezier(.55,0,.2,1) both}.page-transition.is-entering .page-transition-logo{animation:page-transition-logo-out .42s .48s ease-in both}.page-transition.is-entering .page-transition-progress{animation:page-transition-logo-out .35s .35s ease-in both}.page-transition.is-entering::after,.page-transition.is-entering .page-transition-spark{animation:page-transition-bubbles-out .82s .08s ease-out both}.page-transition.is-leaving{visibility:visible}.page-transition.is-leaving::before{animation:page-liquid-fill .78s cubic-bezier(.55,0,.2,1) both}.page-transition.is-leaving .page-transition-wash{animation:page-liquid-fill-back .84s .05s cubic-bezier(.55,0,.2,1) both}.page-transition.is-leaving .page-transition-logo{animation:page-transition-logo-in .38s .4s cubic-bezier(.16,1,.3,1) both}.page-transition.is-leaving::after,.page-transition.is-leaving .page-transition-spark{animation:page-transition-bubbles-in .7s .15s ease-out both}.page-transition:not(.is-holding):not(.is-entering) .page-transition-progress{display:none} @keyframes page-transition-hide{99%{visibility:visible}100%{visibility:hidden}}@keyframes page-liquid-drain{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-42%) rotate(-1deg)}100%{transform:translateY(-118%) rotate(.7deg)}}@keyframes page-liquid-drain-back{0%{transform:translateY(5%) rotate(-.6deg)}48%{transform:translateY(-36%) rotate(.8deg)}100%{transform:translateY(-116%) rotate(-.5deg)}}@keyframes page-liquid-fill{0%{transform:translateY(118%) rotate(-.8deg)}55%{transform:translateY(43%) rotate(.7deg)}100%{transform:translateY(0) rotate(0)}}@keyframes page-liquid-fill-back{0%{transform:translateY(124%) rotate(.7deg)}58%{transform:translateY(49%) rotate(-.7deg)}100%{transform:translateY(5%) rotate(-.6deg)}}@keyframes page-transition-logo-out{to{opacity:0;transform:translateY(-1.4rem) rotate(4deg) scale(.86)}}@keyframes page-transition-logo-in{from{opacity:0;transform:translateY(2rem) rotate(-7deg) scale(.7)}to{opacity:1;transform:rotate(-2deg) scale(1)}}@keyframes page-transition-bubbles-out{to{opacity:0;transform:translate(-50%,-12rem) scale(1.5)}}@keyframes page-transition-bubbles-in{from{opacity:0;transform:translate(-50%,8rem) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} /* Vivid palette pass: keeps the 1.0 layout while borrowing the game edition's color energy. */ :root{--star:#ffd85d;--ink:#484560;--muted:#6f6980;--purple:#8069d9;--pink:#f36f9f;--blue:#63b9ec;--mint:#65d6bd;--line:rgba(103,82,154,.2);--shadow:0 .875rem 2.75rem rgba(99,75,137,.13)}body{background:#fff8fc}.ambient{background:radial-gradient(ellipse at 8% 35%,#ffd9e9,transparent 48%),radial-gradient(ellipse at 86% 15%,#ddd4ff,transparent 50%),radial-gradient(ellipse at 75% 85%,#fff0b9,transparent 43%)}.ambient i{opacity:.34;background:#ffabc9}.ambient i:nth-child(2){background:#a99cff}.ambient i:nth-child(3){background:#ffe078}.glass{background:rgba(255,255,255,.74);border-color:#fff;box-shadow:var(--shadow)}.primary{background:var(--purple);box-shadow:0 .4rem 1.25rem rgba(128,105,217,.28)}.landing-contact{color:#fff;background:var(--pink);box-shadow:0 .4rem 1.25rem rgba(243,111,159,.25)}.social-bubble{color:var(--purple);border-color:#fff;background:rgba(255,255,255,.8)}.eyebrow,.text-link,.news-card time,.home-news-list .news-card time{color:var(--purple)}.pill{border-color:rgba(128,105,217,.28);color:#6650b4;background:#f3efff}.step-number{color:var(--pink)}.about-poster::before{background:linear-gradient(145deg,rgba(243,111,159,.55),rgba(99,185,236,.5))}.about-facts div{border-color:rgba(99,185,236,.38);background:rgba(255,255,255,.78)}.about-facts dt{color:#4e91c3}.steps article:nth-child(1){border:.0625rem solid rgba(243,111,159,.2);background:#fff}.steps article:nth-child(2){border:.0625rem solid rgba(99,185,236,.22);background:#fff}.steps article:nth-child(3){border:.0625rem solid rgba(255,216,93,.28);background:#fff}.faq-list details{border:.0625rem solid rgba(128,105,217,.14)}.faq-list details:nth-child(odd){border-left:.25rem solid var(--blue)}.faq-list details:nth-child(even){border-left:.25rem solid var(--pink)}.home-news::before{color:#79afe3}.about::before{color:#e67fab}#visit::before{color:#63b9ec}.faq-section::before{color:#9b83dc}.news-card,.member-card,.gallery-placeholder,.contact-card{border:.0625rem solid rgba(128,105,217,.14)}.top-jump{color:#fff;background:var(--purple);border-color:#fff}.page-loader{background:radial-gradient(ellipse at 15% 25%,#ffdce9,transparent 65%),radial-gradient(ellipse at 85% 70%,#dcd4ff,transparent 65%),#fff8fc}.loader-card progress::-webkit-progress-value{background:linear-gradient(90deg,var(--purple),var(--pink))}.loader-card progress::-moz-progress-bar{background:var(--purple)} /* Rounded card system inspired by the game edition. */ .about-card,.news-card,.member-card,.gallery-placeholder,.contact-card,.cast-detail-info,.steps article,.faq-list details{border:.0625rem solid rgba(128,105,217,.16);border-radius:1.25rem;background:#fff;box-shadow:0 .7rem 1.8rem rgba(86,73,112,.11)}.about-card{overflow:hidden;border-left:.4rem solid var(--pink);background:linear-gradient(135deg,#fff,#fff5fa)}.news-card{border-top:.32rem solid var(--purple)}.home-news-list .news-card:nth-child(3n+1){border-top-color:var(--pink)}.home-news-list .news-card:nth-child(3n+2){border-top-color:var(--blue)}.home-news-list .news-card:nth-child(3n){border-top-color:var(--mint)}.news-list .news-card:nth-child(3n+1){border-top-color:var(--pink)}.news-list .news-card:nth-child(3n+2){border-top-color:var(--blue)}.news-list .news-card:nth-child(3n){border-top-color:var(--purple)}.news-card-image{border-radius:.85rem}.member-card{position:relative;border-top:.34rem solid var(--cast-accent,var(--purple))}.member-info{background:#fff}.member-card:hover,.news-card:hover,.gallery-placeholder:hover{transform:translateY(-.3rem);box-shadow:0 1.15rem 2.4rem rgba(86,73,112,.16)}.steps article{position:relative;overflow:hidden;border-top:.5rem solid var(--pink)}.steps article:nth-child(2){border-top-color:var(--blue)}.steps article:nth-child(3){border-top-color:var(--star)}.faq-list details{border-left:.32rem solid var(--blue)}.faq-list details:nth-child(even){border-left-color:var(--pink)}.faq-list summary{background:rgba(255,255,255,.92)}.gallery-placeholder{overflow:hidden;border-top:.34rem solid var(--blue);background:#fff}.gallery-placeholder:nth-child(even){border-top-color:var(--pink);background:#fff}.contact-card{border-top:.4rem solid var(--star);background:#fff}.cast-detail-info{overflow:hidden;border-top:.4rem solid var(--cast-accent,var(--purple));background:#fff} /* Keep the two desktop header actions on one shared height. */ .header-contact-group{height:4.75rem;align-items:stretch}.header-contact-group .social-bubble,.header-contact-group .landing-contact{height:4.75rem;min-height:4.75rem;margin:0}.header-contact-group .social-bubble{width:4.75rem;border-radius:2.375rem}.header-contact-group .landing-contact{align-self:stretch} @media(max-width:40rem){.about-card,.news-card,.member-card,.gallery-placeholder,.contact-card,.cast-detail-info,.steps article,.faq-list details{border-radius:1rem}} /* Pages without the floating section navigation do not reserve its tablet space. */ @media(min-width:40.0625rem) and (max-width:92.5rem){body:not(:has(.section-nav)){padding-bottom:0}body:not(:has(.section-nav)) .top-jump{bottom:1.375rem}} /* Gallery albums show only photography until the event information is requested. */ .gallery-album{position:relative;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;text-align:left;cursor:default}.gallery-album .gallery-preview{position:relative;border-radius:0;overflow:visible}.gallery-photo{position:relative;margin:0;border-radius:1.25rem;overflow:hidden;isolation:isolate;background:#fff;box-shadow:0 .7rem 1.8rem rgba(86,73,112,.11)}.gallery-photo img{transition:transform .7s cubic-bezier(.16,1,.3,1),filter .45s ease}.gallery-photo-info{position:absolute;z-index:2;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:5rem 1.25rem 1.125rem;color:#fff;background:linear-gradient(to top,rgba(45,37,67,.82),rgba(45,37,67,.48) 48%,transparent);opacity:0;transform:translateY(1.25rem);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}.gallery-album-date{font-size:.75rem;font-weight:800;letter-spacing:.14em}.gallery-photo-info strong{font-size:clamp(1rem,1.8vw,1.375rem);line-height:1.3;letter-spacing:.04em}.gallery-album:hover{transform:none;box-shadow:none}.gallery-photo:hover .gallery-photo-info,.gallery-photo:focus-visible .gallery-photo-info{opacity:1;transform:none}.gallery-photo:hover img,.gallery-photo:focus-visible img{transform:scale(1.035);filter:saturate(1.06) brightness(.9)} @media(max-width:40rem){.gallery-photo{border-radius:1rem}.gallery-photo-info{padding:4rem 1rem 1rem;opacity:1;transform:none}.gallery-photo-info strong{font-size:1.0625rem}.gallery-album-date{font-size:.6875rem}} /* Non-interactive final slot on the cast roster. */ .member-card-coming-soon{--cast-accent:#a9a6b0;--cast-accent-soft:#eeeeF1;--cast-accent-mid:#d7d5dc;--cast-accent-ink:#77737e;border-top-color:#aaa7b1;color:#77737e;cursor:default;filter:saturate(.35);opacity:.78}.member-card-coming-soon:hover{transform:translateY(-.3rem);box-shadow:0 1.15rem 2.4rem rgba(86,73,112,.16)}.member-card-coming-soon .member-photo{background:linear-gradient(145deg,#f2f2f4,#dedee3)}.member-card-coming-soon .member-info{background:#f8f8f9}.member-card-coming-soon .member-info h2{letter-spacing:.08em}.coming-soon-mark{display:grid;place-items:center;width:4.5rem;aspect-ratio:1;border:.125rem dashed #aaa7b1;border-radius:50%;font-size:2rem;font-weight:800;color:#8d8993} /* Keep the cast roster compact and centered at every viewport width. */ .cast-page .member-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),15rem));justify-content:center;gap:1.25rem}.cast-page .member-info{padding:1.15rem 1.25rem}.cast-page .member-info h2{margin:.45rem 0;font-size:1.05rem} .cast-detail-info.has-caption h1{margin-bottom:.65rem}.cast-detail-caption{max-width:32rem;margin:0 0 1.5rem;color:var(--muted);font-size:.875rem;line-height:1.9;white-space:pre-line} .faq-inline-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:.65rem;color:var(--purple);font-weight:700;text-decoration:underline;text-decoration-color:rgba(128,105,217,.35);text-underline-offset:.3rem}.faq-inline-link:hover{color:var(--pink);text-decoration-color:currentColor}.faq-inline-link .direction{flex:none;transform:scale(.72)} @media(max-width:40rem){.cast-page .member-grid{grid-template-columns:minmax(0,19rem)}} /* Clean white hero board lets the character and floating motion carry the color. */ @keyframes hero-tap-pulse{50%{transform:scale(1.08) rotate(4deg)}} /* Use the same TAP marker on interactive cast portraits. */ .cast-detail-poke:not(.cast-detail-static)::after{content:"TAP!";position:absolute;left:3%;top:12%;z-index:8;display:grid;place-items:center;width:4.2rem;aspect-ratio:1;border:.16rem solid #fff;border-radius:50%;color:#fff;background:var(--pink);box-shadow:0 .28rem 0 rgba(194,61,110,.2),0 .65rem 1.4rem rgba(243,111,159,.2);font-size:.78rem;font-weight:900;line-height:1;animation:hero-tap-pulse 1.8s ease-in-out infinite;pointer-events:none} @media(max-width:56.25rem){.cast-detail-poke:not(.cast-detail-static)::after{left:1%;top:10%;width:3.6rem}} @media(max-width:40rem){.cast-detail-poke:not(.cast-detail-static)::after{left:-6%;top:9%;width:3.25rem;font-size:.7rem}} /* Canonical homepage hero. Keep all placement rules together so deployment uses one cascade. */ .hero{position:relative;text-align:center;isolation:isolate} .hero-at-top .section-nav{opacity:0;visibility:hidden;pointer-events:none} .hero-minimal.wrap{z-index:11;display:block;width:100%;min-height:100svh;padding:9.625rem 1.75rem 1.875rem;overflow:visible;clip-path:none} .hero-minimal .hero-stage{position:relative;display:block;width:100%;height:clamp(40.625rem,calc(100svh - 11.5rem),56rem);min-height:0;margin:0;overflow:hidden;isolation:isolate;border:.0625rem solid #fff;border-radius:2.75rem;background:#fff;box-shadow:0 1.2rem 3.5rem rgba(86,73,112,.13),inset 0 0 0 .0625rem rgba(128,105,217,.08)} .hero-minimal .hero-stage::before{content:"";position:absolute;z-index:2;inset:1.5rem;border:.0625rem solid rgba(128,105,217,.1);border-radius:1.75rem;pointer-events:none} .hero-minimal .hero-character{display:contents} .hero-minimal .hero-copy{position:absolute;z-index:3;left:9%;top:50%;width:39%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(1.75rem,4vh,3.5rem)} .hero-minimal .hero-intro{width:100%;height:auto;text-align:center;pointer-events:none;animation:landing-arrive 1s ease-out both} .hero-minimal .hero-welcome{font-size:clamp(3.25rem,6.2vw,6.125rem);font-weight:900;line-height:1.02;letter-spacing:-.055em;color:#45466e;text-shadow:0 .625rem 1.875rem #738fc423} .hero-welcome span,.hero-welcome strong{display:block} .hero-logo{width:clamp(15rem,36vw,30rem);margin:0 auto .1em;filter:drop-shadow(0 .875rem 1.75rem rgba(115,143,196,.28));opacity:0;animation:hero-logo-in .9s cubic-bezier(.34,1.56,.64,1) .1s both} .hero-logo img{width:100%} .hero-welcome strong{position:relative;margin-top:.06em;font-weight:900;background:linear-gradient(100deg,#e86faa 4%,#7876d5 52%,#559ee5);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .hero-slogan{display:inline-block;margin:.6em auto 0;padding:.4em 1.25rem;border-radius:6.1875rem;background:linear-gradient(100deg,rgba(243,111,159,.14),rgba(128,105,217,.14));box-shadow:inset 0 0 0 .0625rem rgba(128,105,217,.2);font-size:clamp(.8125rem,1.2vw,1rem);font-weight:800;letter-spacing:.04em;color:#7a5aa8;opacity:0;animation:landing-arrive .9s .35s ease-out both} .hero-minimal .hero-deco{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none} .hero-minimal .hero-deco i{position:absolute;display:block;border-radius:50%} .hero-minimal .hero-deco .is-square{border-radius:1.25rem} .hero-minimal .hero-deco .deco-a{left:-5%;top:-8%;width:16rem;height:16rem;background:radial-gradient(circle at 32% 30%,#ffd9e6,transparent 70%),var(--pink);opacity:.14} .hero-minimal .hero-deco .deco-b{left:4%;bottom:6%;width:7.5rem;height:7.5rem;background:var(--purple);opacity:.1} .hero-minimal .hero-deco .deco-c{right:-3%;top:12%;width:12rem;height:12rem;background:var(--blue);opacity:.1} .hero-minimal .hero-deco .deco-d{right:16%;bottom:-4%;width:6rem;height:6rem;background:var(--star);opacity:.16} .hero-minimal .hero-deco .deco-e{left:41%;top:6%;width:2.25rem;height:2.25rem;background:var(--star);opacity:.28;rotate:18deg} .hero-minimal .hero-deco .deco-f{right:9%;top:34%;width:1.75rem;height:1.75rem;background:var(--pink);opacity:.22;rotate:-12deg} @keyframes hero-logo-in{0%{opacity:0;scale:.6;rotate:-9deg}55%{opacity:1;scale:1.08;rotate:3deg}100%{opacity:1;scale:1;rotate:0deg}} @media(prefers-reduced-motion:reduce){.hero-logo{animation:none;opacity:1}.hero-slogan{animation:none;opacity:1}} .hero-minimal .character-button{position:absolute;z-index:6;right:7%;bottom:1.5rem;display:block;width:46%;height:calc(100% - 3rem);margin:0;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;color:var(--purple);cursor:pointer;transform:none;transition:none} .hero-minimal .character-button:active{transform:none} .hero-minimal .character-button img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transform-origin:50% 100%;animation:none;filter:drop-shadow(0 1.125rem 1.375rem #73518416)} .hero-minimal .character-button [hidden],#character-image[hidden]{display:none} .hero-minimal .character-button::after{content:"TAP!";position:absolute;z-index:8;right:7%;bottom:7%;display:grid;place-items:center;width:4.2rem;aspect-ratio:1;border:.16rem solid #fff;border-radius:50%;color:#fff;background:var(--pink);box-shadow:0 .28rem 0 rgba(194,61,110,.2),0 .65rem 1.4rem rgba(243,111,159,.2);font-size:.78rem;font-weight:900;line-height:1;animation:hero-tap-pulse 1.8s ease-in-out infinite;pointer-events:none} .hero-minimal .character-bubble{position:absolute;z-index:8;right:6%;top:12%;display:flex;align-items:center;justify-content:center;width:clamp(13rem,20vw,17rem);max-width:30%;height:auto;min-height:7.5rem;margin:0;padding:1rem 1.25rem;border:.0625rem solid #fff;border-radius:1.5rem;background:#ffffffde;box-shadow:0 .75rem 1.75rem rgba(86,73,112,.1);font-size:.9375rem;line-height:1.7;visibility:hidden;opacity:0;transform:translateY(.5rem) scale(.96);pointer-events:none} .hero-minimal .character-bubble::after{content:"";position:absolute;left:18%;bottom:-.6875rem;border:0;border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.75rem solid #ffffffde;transform:translateX(-50%)} .hero-minimal .character-bubble.is-visible{visibility:visible;opacity:1;animation:dialogue-in .42s cubic-bezier(.16,1,.3,1) both} .hero-minimal .character-bubble.is-hiding{visibility:visible;animation:dialogue-out .42s ease both} .hero-minimal #character-sound{position:absolute;z-index:9;right:2rem;bottom:1.5rem;margin:0} .hero-quick-nav{position:relative;z-index:9;display:flex;align-items:center;justify-content:center;gap:1rem;max-width:none;flex-wrap:wrap;pointer-events:auto;animation:landing-arrive 1s .18s ease-out both} .hero-quick-nav .button{min-width:11.25rem;min-height:3rem;padding:.875rem 1.375rem;gap:1rem} .hero-quick-nav .primary{background:linear-gradient(100deg,#ee7fae 4%,#8a7ee0 55%,#63acec);box-shadow:0 .625rem 1.75rem rgba(137,110,204,.38)} .hero-quick-nav .primary:hover{box-shadow:0 .875rem 2.25rem rgba(137,110,204,.46)} .hero-quick-nav .quick-secondary{border-color:rgba(230,140,180,.4);background:linear-gradient(115deg,#fffdfe,#fff0f6);color:#a1588b} .hero-quick-nav .quick-secondary:hover{border-color:rgba(230,140,180,.62)} .quick-secondary{border:.0625rem solid #c9dfff;background:linear-gradient(115deg,#ffffffdc,#eef7ffdb);color:#557fc2} .hero-minimal .hero-motion{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none} .hero-minimal .hero-motion i{position:absolute;left:var(--shape-x,10%);top:var(--shape-y,10%);display:block;width:var(--shape-size,3.375rem);height:var(--shape-size,3.375rem);background:linear-gradient(145deg,#ffd3e4,var(--pink));clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);filter:drop-shadow(0 .375rem .75rem rgba(113,105,199,.14));opacity:var(--shape-opacity,.32);will-change:transform,opacity;animation:landing-shape-float var(--shape-duration,14s) ease-in-out var(--shape-delay,0s) infinite alternate,hero-motion-twinkle 3.2s ease-in-out var(--shape-delay,0s) infinite} .hero-minimal .hero-motion i:nth-child(3n+2){background:linear-gradient(145deg,#d9cdff,var(--purple))} .hero-minimal .hero-motion i:nth-child(3n){background:linear-gradient(145deg,#fff1d2,var(--star))} @keyframes hero-motion-twinkle{0%,100%{opacity:calc(var(--shape-opacity,.32) * .6)}50%{opacity:calc(var(--shape-opacity,.32) * 1.6)}} @keyframes landing-shape-float{to{transform:translate3d(var(--shape-drift-x,1rem),var(--shape-drift-y,-1rem),0) rotate(var(--shape-turn,12deg)) scale(1.08)}} @media(max-width:85rem) and (min-width:51.3125rem){ .hero-minimal .hero-copy{left:6%;width:38%} .hero-quick-nav{gap:.625rem;flex-wrap:wrap} .hero-quick-nav .button{min-width:9.375rem;padding:.75rem .9375rem} .hero-minimal .character-button{right:7.5%;bottom:1.125rem;width:48%;height:calc(100% - 2.25rem)} .hero-minimal .character-bubble{right:4%;top:10%;max-width:28%} } @media(max-width:51.25rem) and (min-width:40.0625rem){ .hero-minimal.wrap{padding:8.75rem 1.25rem 1.625rem} .hero-minimal .hero-stage{height:clamp(38.125rem,calc(100svh - 10.375rem),46rem);border-radius:2.25rem} .hero-minimal .hero-copy{left:5%;width:40%} .hero-minimal .hero-welcome{font-size:clamp(2.875rem,6.5vw,4.625rem)} .hero-logo{width:clamp(12.5rem,37vw,21rem)} .hero-quick-nav{flex-wrap:wrap} .hero-minimal .character-button{right:3%;width:51%} .hero-minimal .character-bubble{right:2%;top:8%;width:14rem;max-width:34%;min-height:6.5rem;font-size:.875rem} .hero-minimal .character-button::after{right:5%;bottom:6%;width:3.6rem} } @media(max-width:40rem){ .hero-minimal.wrap{min-height:auto;padding:5.875rem 0 2.25rem} .hero-minimal .hero-stage{display:flex;flex-direction:column;justify-content:center;gap:1.75rem;width:min(92%,30rem);height:auto;min-height:0;margin-inline:auto;padding:2.75rem 1rem;border-radius:1.875rem} .hero-minimal .hero-stage::before{inset:.75rem;border-radius:1.375rem} .hero-minimal .hero-copy{display:contents} .hero-minimal .hero-intro{width:100%;height:auto} .hero-minimal .hero-welcome{font-size:clamp(2.4375rem,12vw,3.375rem);line-height:1.06} .hero-logo{width:clamp(10.5rem,66vw,16.5rem)} .hero-minimal .character-button,.hero-minimal .character-bubble,.hero-minimal #character-sound{display:none} .hero-quick-nav{width:100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem} .hero-quick-nav .button{width:auto;min-width:0;flex:0 1 auto;padding:.75rem 1rem;font-size:.8125rem;white-space:nowrap} .hero-minimal .hero-motion i{max-width:4.375rem;max-height:4.375rem} } @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .hero-minimal .character-button img{animation:none}} /* Keep the NEWS archive clear of the footer divider. */ .news-page #news-list{padding-bottom:clamp(5rem,8vw,8rem)} @media(max-width:40rem){.news-page #news-list{padding-bottom:4.5rem}} /* Keep archive introductions connected to their content without a second title block. */ .news-page #news-list{padding-top:clamp(2.5rem,4.5vw,4rem)} .news-page .news-list{margin-top:0} .gallery-page>.section{padding-top:clamp(2.75rem,5vw,4.5rem)} @media(max-width:40rem){.news-page #news-list,.gallery-page>.section{padding-top:2.25rem}} /* Clean white page field and NEWS-style cards for the visit steps. */ body{background:#fff} .ambient{background:radial-gradient(ellipse at 4% 18%,rgba(255,211,231,.72) 0,transparent 38%),radial-gradient(ellipse at 96% 16%,rgba(207,229,255,.76) 0,transparent 40%),linear-gradient(180deg,#fff 0,#fff 58%,#fffafd 100%)} .ambient i{opacity:.16;filter:blur(6.5rem)} .ambient i:first-child{background:#ffb9d3} .ambient i:nth-child(2){background:#9dccfa} .ambient i:nth-child(3){background:#e7dcff;opacity:.1} .steps article,.steps article:nth-child(1),.steps article:nth-child(2),.steps article:nth-child(3){border:.0625rem solid rgba(128,105,217,.14);border-top-width:.6875rem;background:#fff;box-shadow:0 .7rem 1.8rem rgba(86,73,112,.11)} .steps article:nth-child(1){border-top-color:var(--pink)} .steps article:nth-child(2){border-top-color:var(--blue)} .steps article:nth-child(3){border-top-color:var(--star)} .hero-minimal .hero-stage{border:0;box-shadow:0 1.2rem 3.5rem rgba(86,73,112,.13)} .hero-minimal .hero-stage::before{display:none} .hero-minimal .character-button{bottom:0;height:calc(100% - 1.5rem)} .hero-minimal .character-button img{animation:hero-idle-bob 4.5s ease-in-out infinite} @keyframes hero-idle-bob{0%,100%{translate:0 0}50%{translate:0 -.625rem}} /* Two clear participation paths: advance reservation and same-day request invite. */ .visit-switch{display:flex;justify-content:center;align-items:center;gap:.75rem;width:max-content;max-width:100%;margin:1.75rem auto 0;padding:.375rem;border:.0625rem solid rgba(113,105,199,.16);border-radius:6rem;background:rgba(255,255,255,.78);box-shadow:0 .6rem 1.5rem rgba(86,73,112,.08)} .visit-switch-button{min-width:10rem;min-height:3.25rem;padding:.75rem 1.5rem;border:.0625rem solid transparent;border-radius:6rem;background:transparent;color:var(--muted);font-weight:800;cursor:pointer;transition:color .25s,background .25s,box-shadow .25s,transform .25s}.visit-switch-button:active{transform:scale(.96);transition-duration:.1s} .visit-switch-button:hover{color:var(--purple);transform:translateY(-.1rem)} .visit-switch-button.is-active{color:#fff;background:linear-gradient(115deg,var(--pink),var(--purple) 56%,var(--blue));box-shadow:0 .45rem 1.1rem rgba(113,105,199,.22)} .visit-panels{position:relative;margin-top:2.25rem;overflow:hidden;transition:height .45s cubic-bezier(.16,1,.3,1)} .visit-method-panel{animation:visit-panel-in .42s cubic-bezier(.16,1,.3,1) both} .visit-method-panel[hidden]{display:none} .visit-method-panel .steps{margin-top:0} @keyframes visit-panel-in{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}} @media(max-width:40rem){.visit-switch{gap:.375rem;margin-top:1.375rem}.visit-switch-button{min-width:0;padding-inline:1.25rem}.visit-panels{margin-top:1.5rem}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .visit-panels{transition:none}} /* Responsive audit: contain decorative overflow without changing vertical scrolling. */ html,body{overflow-x:clip} @media(min-width:120rem){.hero-minimal.wrap{max-width:120rem;margin-inline:auto;min-height:auto}} .cast-detail-bubble{z-index:10} /* Switch to the compact header before the three desktop groups collide. */ @media(max-width:56.25rem){ .landing-header,.split-header{top:.75rem;left:.75rem;right:.75rem;width:auto;height:4rem;padding:0 .75rem;border:.0625rem solid white;border-radius:1.25rem;background:#fffcfede;box-shadow:var(--shadow);backdrop-filter:blur(1.25rem)} .landing-header{position:absolute}.split-header{position:relative;top:auto;left:auto;right:auto;margin:.75rem .75rem 0} .landing-header .landing-brand,.split-header .landing-brand{left:.875rem;top:44%;width:9.75rem;height:3.25rem;padding:.375rem .25rem;border-radius:0;background:none;border:0;box-shadow:none;transform:translateY(-50%)} .landing-brand img{width:100%;height:100%;transform:none} .header-contact-group{display:none} .site-header .menu-toggle{display:flex;align-items:center;gap:.75rem;position:absolute;right:.625rem;z-index:3;min-height:2.75rem;padding:.45rem .8rem;border:.0625rem solid rgba(128,105,217,.14);border-radius:1.375rem;background:#fff;color:var(--ink);font-size:.875rem;font-weight:800;line-height:1} .site-header nav{display:none;position:absolute;top:4.625rem;left:0;right:0;height:auto;max-height:calc(100svh - 6rem);overflow-y:auto;padding:1rem;border-radius:1.25rem;background:#fffcfe;font-size:.875rem} .site-header nav.is-open{display:flex;align-items:stretch;flex-direction:column;gap:0} .site-header nav a{padding:.75rem 1rem} .landing-nav .mobile-contact-group{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem;padding-top:.75rem;border-top:.0625rem solid var(--line)} .landing-nav .mobile-contact-group .social-bubble{width:3rem;height:3rem;padding:0;flex-shrink:0} .landing-nav .mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.55rem 1rem;border-radius:1.5rem;color:#fff;background:var(--pink);font-weight:800} } @media(max-width:22rem){.visit-switch{width:100%;gap:.2rem}.visit-switch-button{flex:1;padding-inline:.6rem;white-space:nowrap;font-size:.85rem}} @media(max-width:22rem){ .landing-header .landing-brand,.split-header .landing-brand{max-width:calc(100% - 8rem)} .home-news-heading{flex-direction:column;align-items:flex-start;gap:.75rem} .home-news-heading h2{white-space:nowrap} } /* Consistency pass: give the standalone pages the same editorial watermark and entrance motion the homepage sections already use, and fix two spots where scroll-reveal was missing from otherwise-identical content blocks. */ .gallery-hero,.news-hero{position:relative;isolation:isolate;animation:landing-arrive .8s ease-out both} .gallery-hero::before,.news-hero::before{position:absolute;left:0;right:0;top:clamp(.25rem,3vw,1.75rem);z-index:-1;text-align:center;font:800 clamp(4.25rem,13vw,10.5rem)/.8 Georgia,serif;letter-spacing:-.06em;opacity:.16;pointer-events:none;white-space:nowrap} .gallery-hero::before{content:"GALLERY";color:var(--blue)} .news-hero::before{content:"NEWS";color:var(--purple)} .cast-page .section-heading{animation:landing-arrive .8s ease-out both} @media(max-width:40rem){.gallery-hero::before,.news-hero::before{font-size:clamp(3.25rem,20vw,5rem);opacity:.14}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .gallery-hero,html:not([data-motion="full"]) .news-hero,html:not([data-motion="full"]) .cast-page .section-heading{animation:none}} /* Small delight touches on otherwise-static icons, matching the ambient/hero motion language. */ .gallery-motif{display:inline-block;animation:motif-bob 3.6s ease-in-out infinite} @keyframes motif-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.375rem)}} @media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .gallery-motif{animation:none}} /* Hero quick nav: keep the buttons above the zoomed character image so they stay clickable. */ .hero-minimal .hero-copy{z-index:7;pointer-events:none} .hero-minimal .hero-quick-nav{pointer-events:auto} /* Hero quick nav: cute press animation (js/pages/quick-nav.js). */ .hero-quick-nav .button:active{transform:scale(.9,.86);transition-duration:.08s} .hero-quick-nav .button.is-boing{animation:quick-boing .5s cubic-bezier(.3,1.6,.5,1) both} @keyframes quick-boing{0%{transform:scale(.88,.82)}35%{transform:scale(1.1,.94)}60%{transform:scale(.97,1.06)}80%{transform:scale(1.02,.99)}100%{transform:scale(1)}} .quick-burst{position:fixed;z-index:950;width:0;height:0;pointer-events:none} .quick-burst span{position:absolute;left:0;top:0;font-size:var(--size);line-height:1;font-weight:700;text-shadow:0 .1rem .35rem #fff;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:quick-burst .8s cubic-bezier(.2,.9,.3,1) forwards} @keyframes quick-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(1.1)}} /* ==== 2026-09 CMS 化で追加：募集ボタンの受付外表示・お知らせ通知・お知らせ個別ページ・404 ==== */ .button.is-disabled{cursor:not-allowed;background:#d9d3e6;color:#6f6980;box-shadow:none;transform:none} .button.is-disabled:hover{transform:none;box-shadow:none} .push-section{max-width:56.25rem;margin-top:2.25rem} .push-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem 1.5rem;padding:1.5rem 1.75rem;border:.0625rem solid rgba(128,105,217,.16);border-left:.4rem solid var(--pink);border-radius:1.25rem;background:linear-gradient(135deg,#fff,#fff5fa);box-shadow:0 .7rem 1.8rem rgba(86,73,112,.11)} .push-card[hidden]{display:none} .push-icon{display:grid;place-items:center;width:3.25rem;aspect-ratio:1;border-radius:50%;background:#ffe5f2;color:var(--pink);font-size:1.5rem;font-weight:700} .push-copy h2{font-size:1.125rem;margin:.25rem 0 .375rem;letter-spacing:.04em} .push-message{color:var(--muted);font-size:.875rem;line-height:1.75} .push-hint{margin-top:.375rem!important;color:var(--muted);font-size:.75rem;line-height:1.7} .push-button{gap:1rem;border:0;white-space:nowrap;cursor:pointer;font-family:inherit} .push-card [hidden]{display:none!important} .push-button:disabled{opacity:.7;cursor:progress;transform:none} .push-card[data-push-state="subscribed"]{border-left-color:var(--mint,#65d6bd)} .push-card[data-push-state="subscribed"] .push-icon{background:#e3f8f2;color:#2f9b83} .push-card[data-push-state="subscribed"] .push-button{background:#fff;color:var(--purple);border:.0625rem solid rgba(128,105,217,.35);box-shadow:none} .push-card[data-push-state="denied"],.push-card[data-push-state="unsupported"],.push-card[data-push-state="ios"]{border-left-color:var(--blue,#63b9ec)} .push-card[data-push-state="error"] .push-message{color:#b52568} .news-card-more{display:inline-flex;align-items:center;gap:.75rem;margin-top:1rem;color:var(--purple);position:relative;z-index:3} .news-card-more+.news-card-action,.news-card-action+.news-card-more{margin-left:1.25rem} .news-article-page .wrap{max-width:56.25rem} #news-article-root{position:relative;padding-top:5.625rem;padding-bottom:6.25rem} .news-article-back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.5rem .25rem;color:var(--purple);font-size:.75rem;font-weight:700;letter-spacing:.06em;transition:color .2s ease,transform .2s ease} .news-article-back:hover{color:var(--pink);transform:translateX(-.1875rem)} .news-article{padding:2.5rem 2.75rem;border:.0625rem solid rgba(128,105,217,.16);border-top:.4rem solid var(--pink);border-radius:1.25rem;background:#fff;box-shadow:0 .7rem 1.8rem rgba(86,73,112,.11)} .news-article-title{font-size:clamp(1.5rem,3.4vw,2.25rem);letter-spacing:.04em;line-height:1.5;margin-top:.5rem} .news-article-cover{width:100%;margin-top:1.75rem;border-radius:.85rem;aspect-ratio:16/9;object-fit:cover} .news-article-lead{margin-top:1.5rem!important;font-weight:700;line-height:1.9} .news-article-body{margin-top:1.5rem;line-height:2} .news-article-body p{color:var(--ink)} .news-article-body p+p,.news-article-body ul+p,.news-article-body h2+p{margin-top:1.125rem} .news-article-body h2{margin:2rem 0 .75rem;padding-left:.875rem;border-left:.3rem solid var(--purple);font-size:1.1875rem;letter-spacing:.04em} .news-article-body ul{margin:1rem 0;padding-left:1.4rem} .news-article-body li::marker{color:var(--pink)} .news-article-link{color:var(--purple);text-decoration:underline;text-underline-offset:.25rem;word-break:break-all} .news-article .news-card-action{margin-top:2rem} .news-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.875rem;margin-top:2.25rem} .news-gallery.is-single{grid-template-columns:1fr} .news-gallery-item{margin:0} .news-gallery-open{display:block;width:100%;padding:0;border:0;border-radius:.85rem;overflow:hidden;background:#f3eefb;cursor:zoom-in} .news-gallery-open img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s cubic-bezier(.16,1,.3,1)} .news-gallery.is-single .news-gallery-open img{aspect-ratio:auto;max-height:36rem;object-fit:contain} .news-gallery-open:hover img{transform:scale(1.03)} .news-gallery-item figcaption{margin-top:.5rem;color:var(--muted);font-size:.8125rem;line-height:1.6} .news-lightbox{width:min(92vw,80rem);max-height:92vh;padding:0;border:0;border-radius:1.25rem;background:transparent;overflow:visible} .news-lightbox::backdrop{background:rgba(40,30,58,.78);backdrop-filter:blur(.25rem)} .news-lightbox figure{margin:0;text-align:center} .news-lightbox img{max-width:100%;max-height:82vh;margin:0 auto;border-radius:1rem;object-fit:contain} .news-lightbox figcaption{margin-top:.75rem;color:#fff;font-size:.875rem} .news-lightbox-close{position:absolute;top:-3rem;right:0;padding:.5rem 1rem;border:0;border-radius:6.1875rem;background:#fff;color:var(--purple);font-weight:700;font-size:.8125rem;cursor:pointer} .news-lightbox-nav{position:absolute;top:50%;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-top:-1.375rem;border:0;border-radius:50%;background:#fffffff0;color:var(--purple);cursor:pointer;box-shadow:0 .5rem 1rem rgba(40,30,58,.25)} .news-lightbox-nav.is-prev{left:.75rem} .news-lightbox-nav.is-next{right:.75rem} .news-lightbox-nav[hidden]{display:none} .news-preview-banner{position:sticky;top:6.5rem;z-index:5;margin-bottom:1rem;padding:.75rem 1.25rem;border-radius:1rem;background:#fff3c9;color:#7a5a00;font-size:.875rem;font-weight:700;text-align:center;box-shadow:0 .5rem 1.25rem rgba(122,90,0,.12)} .not-found-card{text-align:center} .not-found-card h1{margin-top:.625rem} .not-found-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem} .not-found-actions .button{gap:1rem} @media(max-width:40rem){ .push-section{margin-top:1.5rem} .push-card{grid-template-columns:auto minmax(0,1fr);padding:1.25rem;border-radius:1rem} .push-icon{width:2.75rem;font-size:1.25rem} .push-button{grid-column:1/-1;width:100%} #news-article-root{padding-top:3.75rem;padding-bottom:4.375rem} .news-article{padding:1.5rem 1.25rem;border-radius:1rem} .news-gallery{grid-template-columns:1fr 1fr;gap:.5rem} .news-gallery.is-single{grid-template-columns:1fr} .news-lightbox-close{top:-2.75rem} .news-lightbox-nav{width:2.375rem;height:2.375rem} .news-card-more+.news-card-action,.news-card-action+.news-card-more{margin-left:0} } /* 読み込み画面：見た目はページ切り替えの画面（.page-transition）と共通。 .page-loader は読み上げ用の状態表示と「読み込みを待たずに表示」ボタンだけを重ねます。 */ .page-loader{background:transparent!important} .page-loader .loader-card{width:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:max(1rem,6vh)} .page-loader .loader-card>:not(#skip-loading){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .page-loader #skip-loading{margin:0;padding:.625rem 1.25rem;border:.0625rem solid rgba(255,255,255,.7);border-radius:6rem;background:rgba(255,255,255,.18);color:#fff;font-weight:700;text-decoration:none;backdrop-filter:blur(.5rem)} .page-loader #skip-loading:hover{background:rgba(255,255,255,.3)} .is-loading .page-transition .page-transition-progress{display:block} /* ギャラリー：写真をクリックで拡大表示 */ .gallery-photo[role="button"]{cursor:zoom-in} .gallery-photo:focus-visible{outline:.1875rem solid var(--purple);outline-offset:.25rem} .has-lightbox{overflow:hidden} .gallery-lightbox img{opacity:0;transform:scale(.985);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1);user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom} .gallery-lightbox img.is-shown{opacity:1;transform:none} .gallery-lightbox figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25rem .875rem;text-align:center} .gallery-lightbox-date{font-size:.75rem;font-weight:800;letter-spacing:.14em;opacity:.85} .gallery-lightbox figcaption strong{font-size:1rem;letter-spacing:.04em} .gallery-lightbox-count{font-size:.75rem;opacity:.75;font-variant-numeric:tabular-nums} .gallery-lightbox-count:empty{display:none} .gallery-lightbox[open]{animation:gallery-lightbox-in .3s ease both} .gallery-lightbox[open]::backdrop{animation:gallery-backdrop-in .3s ease both} @keyframes gallery-lightbox-in{from{opacity:0;transform:scale(.97)}} @keyframes gallery-backdrop-in{from{opacity:0}} @media(max-width:40rem){.gallery-lightbox .news-lightbox-nav{top:auto;bottom:-3.5rem;margin-top:0}.gallery-lightbox .news-lightbox-nav.is-prev{left:calc(50% - 3.25rem)}.gallery-lightbox .news-lightbox-nav.is-next{right:calc(50% - 3.25rem)}.gallery-lightbox figcaption{margin-bottom:4rem}} /* お知らせページのページ送り（10件ずつ） */ .news-pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;max-width:56.25rem;margin:2.25rem auto 0;flex-wrap:wrap} .news-page-numbers{display:flex;align-items:center;gap:.375rem} .news-page-link{display:inline-grid;place-items:center;min-width:2.75rem;height:2.75rem;padding:0 .875rem;border:.0625rem solid rgba(128,105,217,.2);border-radius:6rem;background:rgba(255,255,255,.8);color:var(--purple);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums;transition:background .2s,color .2s,transform .2s,box-shadow .2s} .news-page-link:hover{transform:translateY(-.125rem);box-shadow:0 .5rem 1.25rem rgba(128,105,217,.18)} .news-page-link[aria-current="page"]{border-color:transparent;background:var(--purple);color:#fff;box-shadow:0 .4rem 1.1rem rgba(128,105,217,.28)} .news-page-link.is-disabled{opacity:.4;pointer-events:none} .news-page-gap{color:var(--muted);padding:0 .25rem} @media(max-width:40rem){.news-pagination{gap:.5rem}.news-page-link{min-width:2.5rem;height:2.5rem;padding:0 .75rem}} .support-swatch{display:inline-block;width:.75em;height:.75em;margin-right:.4em;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 .125rem #fff,0 0 0 .1875rem rgba(72,60,96,.18);vertical-align:-.05em}