/* TOP layout, independent of theme CSS. Values preserve the pre-migration layout. */
@font-face{font-family:FontAwesome;src:url('./fonts/fontawesome-webfont.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:block}
.top-page{--top-copy-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;--static-shell-background-image:none;margin:0;font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.5}
.top-page::before{content:none}
.top-page main,.top-page main *{box-sizing:border-box}
.top-page main{position:relative;z-index:1}
.top-page img{max-width:100%;height:auto}
.top-page main p{margin:0 0 16px}
.top-page main h2,.top-page main h4,.top-page main h5{margin:0 0 16px}
.top-page main .gridContainer{width:90%;max-width:1232px;margin-inline:auto;padding-inline:15px}
.top-page main .row{display:flex;flex-wrap:wrap;margin-inline:-15px}
.top-page main .middle-sm{align-items:center}
.top-page main .col-xs-12{width:100%}
.top-page main .text-center{text-align:center}
.top-page .content-section{position:relative;padding:80px 0;font-size:14px;line-height:1.6}
.top-page .fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased}
.fa-microphone::before{content:'\f130'}.fa-desktop::before{content:'\f108'}.fa-database::before{content:'\f1c0'}.fa-download::before{content:'\f019'}
/* Original hero: four backgrounds, centered crop and 24% black overlay. */
.top-page .header-homepage{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100svh;padding-top:70px;color:#f2f2f2;background:#020000;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:-2}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1s linear}
.hero-slides img.is-previous{opacity:1;z-index:0;transition:none}
.hero-slides img.is-active{opacity:1;z-index:1}
.header-homepage::before{content:'';position:absolute;inset:0;background:#000;opacity:.24;z-index:-1;pointer-events:none}
.top-page .header-description{width:100%;margin-block:0}
.top-page .header-description-row{padding-block:32px}
.header-content{width:100%;padding-inline:15px}
.header-description .align-holder{width:80%;margin-inline:auto;text-align:center}
.hero-title{font:300 56px/1.14 "Open Sans",Helvetica,Arial,sans-serif;letter-spacing:.9px;margin:0 0 20px}
.top-page .header-subtitle{font:300 20.8px/1.3 "Noto Sans JP",sans-serif;letter-spacing:normal;margin:0 0 20px}
.top-page .button{display:inline-flex;align-items:center;justify-content:center;gap:0;width:190px;max-width:100%;height:50px;padding:0 24px;border:2px solid #16d9e5;border-radius:5px;background:transparent;color:#16d9e5;font:600 17px/1.6 var(--top-copy-font);letter-spacing:1px;text-decoration:none;vertical-align:middle;transition:color .3s,background-color .3s,border-color .3s}
.top-page .button:is(:hover,:focus-visible){background:#16d9e5;color:#07171a}
.header-buttons-wrapper .button{margin:0 15px 15px}
.header-homepage-arrow-c{position:absolute;bottom:0;left:0;right:0;text-align:center}
.header-homepage-arrow{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;padding:10px;color:white;animation:hero-arrow-bounce 2s infinite}
.header-homepage-arrow svg{width:42px;height:42px;fill:none;stroke:currentColor;stroke-width:2}
@keyframes hero-arrow-bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
/* Feature copy retains its typography and three-column / one-column break. */
#features-2 .spaced-cols{margin-bottom:-30px}
#features-2 .col-md-4{width:33.333333%;padding:32px;margin-bottom:30px}
#features-2 i.icon{font-size:80px;line-height:96.4286px;width:171.4286px;height:171.4286px;padding:40px;border-radius:100%;margin-bottom:45px;box-shadow:0 10px 30px rgba(49,52,57,.3),0 10px 30px rgba(0,0,0,.08)}
#features-2 i.color1{color:#2dbdf0;background:#2dbdf026}
#features-2 i.color4{color:#79bdc9;background:#79c9d626}
#features-2 i.color2{color:#0acfbf;background:#0acfbf26}
#features-2 h5{font:400 19px/1.5 var(--top-copy-font);letter-spacing:.035em;margin-bottom:16px}
#features-2 p,#about-1 p{font:350 14px/1.6 var(--top-copy-font);letter-spacing:.035em}
#about-1 p{margin-bottom:18px}
#features-2 p{margin:0}
#features-2 p span,#features-2 h5 span,#about-1 p span,#about-1 h5 span{font:inherit;letter-spacing:inherit}
/* ABOUT keeps the original column proportions and overlapping photographs. */
#about-1 .col-sm-5{width:41.666667%;padding-inline:15px;text-align:left}
#about-1 .col-sm-7{width:58.333333%;padding-inline:15px}
#about-1 h5{font:300 26px/1.4 "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;letter-spacing:.075em;margin-bottom:24px}
#about-1 .button{margin:0 3px 12px 0}
.image-group-side-3-img{text-align:center;display:flow-root}
.image-group-side-3-img>a{display:inline-block;max-width:100%;font:14px/22.4px var(--top-copy-font)}
.image-group-side-3-img .topimg{display:block;float:left;position:relative;width:80%;margin-left:10%}
.image-group-side-3-img .rightimg{display:block;float:right;width:80%;margin-top:-25%;position:relative}
.image-group-side-3-img .leftimg{float:left;width:60%;margin-top:-50%;position:relative;text-align:left}
.image-group-side-3-img .leftimg img{vertical-align:baseline}
.image-group-side-3-img .shadow-large{clip-path:ellipse(50% 50% at 50% 50%)}
/* Sponsor wordmarks, serif credits and animation retain their own styling. */
#sponsor .spaced-cols{margin-bottom:-30px}
#sponsor .spaced-cols>.col-padding{width:100%;padding:32px;margin-bottom:30px;text-align:center}
#sponsor .spaced-cols>.col-padding>.row{margin:0}
#sponsor img.face{width:80vw;max-width:500px;height:auto;margin:8px 0;vertical-align:baseline}
#sponsor h4{font:500 38.4px/28px "Noto Serif JP",serif;letter-spacing:1px;margin:25px 0}
#sponsor .spaced-cols>div:nth-child(2) h4{font-size:25.6px}
#sponsor .italic{font:400 16px/24px "Noto Serif JP",serif;margin:0}
#sponsor .italic span{font-weight:300}
#sponsor .top-character-preview__heading p{font:400 14px/1.7 var(--top-copy-font);letter-spacing:.012em}
@media(max-width:1023px){
 .hero-title{font-size:49px}.top-page .header-subtitle{font-size:18.2px}
 #features-2 .col-md-4{width:100%;padding:28px}
 #about-1 .button{margin-bottom:10.5px}
 #features-2 i.icon{font-size:70px;line-height:84.375px;width:150px;height:150px;padding:35px;margin-bottom:39.375px}
 #sponsor .spaced-cols>.col-padding{padding:28px}
 #sponsor img.face{margin-block:7px}
 #sponsor h4{font-size:33.6px;line-height:24.5px;letter-spacing:.875px}
 #sponsor .spaced-cols>div:nth-child(2) h4{font-size:22.4px}
 #sponsor .italic{font-size:14px;line-height:21px}
}
@media(max-width:767px){
 .top-page main .gridContainer{width:100%}
 .top-page .content-section{padding-block:48px}
 .header-description .align-holder{width:100%}
 #features-2 .col-md-4{padding:0 15px}
 #features-2 h5{font-size:17px}
 #about-1 h5{font-size:23px}
 #about-1 .col-sm-5,#about-1 .col-sm-7{width:100%}
 #about-1 .col-sm-7{margin-bottom:28px}
 #sponsor .spaced-cols>.col-padding{padding:0 15px}
}
@media(prefers-reduced-motion:reduce){.hero-slides img,.top-page .button{transition:none}.header-homepage-arrow,#sponsor .spaced-cols img,#sponsor .sponsor-logo-effect-gold::after{animation:none!important}}

.top-page .button .fa{font-size:25.5px;line-height:25.5px;margin-right:6.375px;vertical-align:middle}

.fa-angle-down::before{content:"\f107"}.header-homepage-arrow .fa{font-size:42px;line-height:42px}
.top-page .static-page-header a,.top-page .static-page-footer a,.top-page .static-offcanvas a,.header-homepage-arrow{text-decoration:none}
@media(max-width:767px){.top-page :is(#character,#news,#sponsor)>.gridContainer{padding-inline:20px}}

/* One body-copy specification for feature text, ABOUT and section introductions. */
.top-page :is(#features-2,#about-1) p{font:350 14px/1.6 var(--top-copy-font);letter-spacing:.035em;color:#55565c}

#news .top-news-scroll{height:560px;overflow-y:auto;scrollbar-color:#a5cbd2 transparent;padding:8px;scrollbar-gutter:stable}#news .top-news-scroll:focus-visible{outline:2px solid #78b9c5;outline-offset:2px}

/* Project entry and News share a two-column area on desktop. */
.top-page main .top-project-news-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.top-project-news-grid>section{min-width:0;margin:0!important;padding:0!important}
.top-project-card{display:block;position:relative;overflow:hidden;border:2px solid #a5cbd2;border-radius:8px;background:#f8fbfc;box-shadow:0 3px 12px rgba(61,89,98,.10);transition:border-color .3s,box-shadow .3s}
.top-project-card img{display:block;width:100%;height:auto;margin:0}
.top-project-card svg{position:absolute;right:16px;bottom:16px;width:28px;height:28px;fill:none;stroke:white;stroke-width:2;filter:drop-shadow(0 1px 3px #355f6a);transition:transform .3s}
.top-project-card:hover,.top-project-card:focus-visible{border-color:#78b9c5;box-shadow:0 6px 20px rgba(61,89,98,.16)}
.top-project-card:hover svg{transform:translateX(4px)}
.top-project-card:focus-visible{outline:2px solid #597b86;outline-offset:4px}
.top-page #project-entry .top-character-preview__heading h2::before,.top-page #project-entry .top-character-preview__heading::after{background:#79c9d6!important}
@media(max-width:1023px){.top-page main .top-project-news-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
@media(prefers-reduced-motion:reduce){.top-project-card,.top-project-card svg{transition:none}}
.top-page #project-entry .top-character-preview__heading::after{content:"";display:block;width:100%}

.top-entry-stack{display:grid;gap:48px;min-width:0}
.top-entry-stack>section{min-width:0;margin:0!important;padding:0!important}
.top-project-card{border-radius:28px 0 28px 0;isolation:isolate;aspect-ratio:12/5}
.top-project-card img{width:100%;height:100%;object-fit:cover;object-position:center}
.top-project-card::after{content:"";position:absolute;inset:0;z-index:1;background:#79c9d6;opacity:0;transition:opacity .3s ease}
.top-project-card:is(:hover,:focus-visible)::after{opacity:.86}
.top-project-card .top-entry-action{position:absolute;right:22px;bottom:20px;z-index:2;display:flex;align-items:center;gap:14px;color:white;font:500 16px/1.4 "Segoe UI",sans-serif;letter-spacing:.06em;opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path .35s ease,opacity .25s ease}
.top-project-card .top-entry-action svg{position:static;width:24px;height:24px;filter:none;stroke:currentColor}
.top-project-card:is(:hover,:focus-visible) .top-entry-action{opacity:1;clip-path:inset(0)}
.top-project-card.entry-pending{opacity:0;transform:translateY(20px)}
.top-project-card.entry-visible{animation:top-entry-reveal .7s ease-out both}
@keyframes top-entry-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.top-page #download-entry .top-character-preview__heading h2::before,.top-page #download-entry .top-character-preview__heading::after{background:#79c9d6!important}
.top-page #download-entry .top-character-preview__heading::after{content:"";display:block;width:100%}
@media(hover:none){.top-project-card .top-entry-action{opacity:1;clip-path:inset(0);text-shadow:0 1px 3px #355f6a}}
@media(prefers-reduced-motion:reduce){.top-project-card.entry-pending{opacity:1;transform:none}.top-project-card.entry-visible{animation:none}.top-project-card::after,.top-project-card .top-entry-action{transition:none}}
.top-page .top-entry-stack .top-character-preview__heading h2{margin:0!important;text-align:left}
/* Let News cards use the full column, retaining a visible, narrow scroll control. */
.top-page .top-light-content .top-project-news #news .top-news-panel{border:0;border-radius:0;background:transparent;padding:0;box-shadow:none}
.top-page #news .top-news-scroll{scrollbar-width:thin;scrollbar-color:#a5cbd2 transparent;padding:8px;}
.top-page #news .top-news-scroll::-webkit-scrollbar{width:8px}
.top-page #news .top-news-scroll::-webkit-scrollbar-track{background:transparent}
.top-page #news .top-news-scroll::-webkit-scrollbar-thumb{background:#a5cbd2;border-radius:8px}
.top-page #news .top-news-scroll::-webkit-scrollbar-thumb:hover{background:#78b9c5}


.top-project-card img{transition:transform .3s ease}.top-project-card:is(:hover,:focus-visible) img{transform:scale(1.08);filter:none}
@media(prefers-reduced-motion:reduce){.top-project-card img{transition:none}}

/* Reduce TOP's major section spacing to two thirds. */
.top-page:not(.about-page) .content-section{padding-block:calc(80px * 2 / 3)}
.top-page #about-entry .top-character-preview__heading h2::before,.top-page #about-entry .top-character-preview__heading::after{background:#79c9d6!important}
.top-page #about-entry .top-character-preview__heading::after{content:"";display:block;width:100%}
.about-page main{padding-top:100px}
.about-page .about-title{color:#79c9d6;font:300 40px/1.2 "Segoe UI",sans-serif;letter-spacing:.08em;margin:0}
.about-page .about-title small{font:400 16px/1.4 var(--top-copy-font);letter-spacing:.08em;margin-left:20px}
.top-page:not(.about-page) #character.content-section{padding-block:calc(64px * 2 / 3)}
@media(max-width:767px){.top-page:not(.about-page) .content-section{padding-block:32px}.top-page:not(.about-page) #character.content-section{padding-block:calc(38px * 2 / 3)}}
.about-page main{padding-top:0}.about-page .top-light-content{padding-top:110px}
@media(max-width:1023px){.top-project-news-grid>#news{order:-1}}
/* Match the opening gap to the combined padding between major sections. */
.top-page:not(.about-page) #character.content-section{padding-top:96px}
@media(max-width:767px){.top-page:not(.about-page) #character.content-section{padding-top:calc(86px * 2 / 3)}}