﻿@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap");:root{--w:750}@media (min-width: 750px){:root{--w:1300}}*{box-sizing:border-box;margin:0;padding:0;outline:none}html{background:#0059bd}ul li{list-style-type:none}img{width:100%;height:auto;vertical-align:bottom;line-height:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;image-rendering:-webkit-optimize-contrast}_::-webkit-full-page-media,_:future,:root img{image-rendering:auto}main{overflow:hidden;display:block}.pc{display:none}@media (min-width: 750px){.sp{display:none}.pc{display:block}}a{color:#fff;text-decoration:underline}a:hover{text-decoration:none}.r{color:red;font-weight:bold}::selection{background:#0f0f6d;color:#FFF}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-thumb{background:#FFF}.js-anime-showUP{opacity:0;transform:translate(0, 100px)}.js-anime-showUP.s{opacity:1;transform:translate(0, 0);transition:opacity 0.5s 0.5s,transform 1s 0s cubic-bezier(0.680, -0.550, 0.265, 1.550)}.js-anime-fadeIn{opacity:0}.js-anime-fadeIn.s{opacity:1;transition:opacity 0.5s 0s}.js-anime-slideIn{transform:translate(-100%, 0)}.js-anime-slideIn.s{transform:translate(0, 0);transition:transform 0.5s 0s}body{position:relative;overflow-x:hidden;z-index:0;font-family:"Noto Sans JP", sans-serif, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", "Yu Gothic UI", "Arial", sans-serif;font-size:3.46667vw;font-weight:500;line-height:1.3;letter-spacing:0;color:#fff;background:transparent;text-align:center}@media (min-width: 750px){body{font-size:1.23077vw}}@media (min-width: 750px) and (min-width: 1300px){body{font-size:16px}}p,li:not(:has(img)){transform:rotateZ(0.03deg)}h1,h2,h3,h4,h5,h6{font-size:0;line-height:0}#snav{display:flex;justify-content:center;flex-wrap:wrap;margin:20vw auto 3.33333vw auto}@media (min-width: 750px){#snav{margin:9.23077vw auto 3.07692vw auto}}@media (min-width: 750px) and (min-width: 1300px){#snav{margin:120px auto 40px auto}}#snav li{position:relative;width:46.66667vw}#snav li a{display:block}@media (hover: hover), (-ms-high-contrast: none){#snav li a{transition:scale 0.5s}#snav li a:hover{scale:1.05}}@media (min-width: 750px){#snav li{width:36vw;max-width:468px}}#snav li.new:after{content:"";position:absolute;top:0;left:0;background:url(../../collabo_corocoro2023/images/ico_new.png) left top no-repeat;background-size:contain;width:13.2vw;left:0;padding-bottom:20%;pointer-events:none;transform:translate(-20%, 0)}@media (min-width: 750px){#snav li.new:after{width:7.61538vw;max-width:99px}}#snav li.additional:after{content:"";position:absolute;top:0;left:0;background:url(../../locationtest-202409/images/ico_additional.png) left top no-repeat;background-size:contain;width:16.53333vw;left:0;padding-bottom:20%;pointer-events:none;transform:translate(-20%, 0)}@media (min-width: 750px){#snav li.additional:after{width:9.53846vw;max-width:124px}}#contents a:has(img[src*="btn"]){display:block}@media (hover: hover), (-ms-high-contrast: none){#contents a:has(img[src*="btn"]){transition:scale 0.5s}#contents a:has(img[src*="btn"]):hover{scale:1.05}}#ssnav{display:grid;margin:10.66667vw auto 10.66667vw auto;gap:calc(min(calc(32 / var(--w) * 100vw), 32px))}@media (max-width: 750px){#ssnav{width:89.33333vw}}@media (min-width: 750px){#ssnav{width:84.61538vw;max-width:1100px;grid-template-columns:repeat(auto-fit, clamp(calc(50% - calc(16 / var(--w) * 100vw)), calc(10 / var(--w) * 100vw), 535px));margin:4.61538vw auto 4.61538vw auto}}@media (min-width: 750px) and (min-width: 1300px){#ssnav{margin:60px auto 60px auto}}#ssnav li{position:relative}#ssnav li a{display:block}@media (hover: hover), (-ms-high-contrast: none){#ssnav li a{transition:scale 0.5s}#ssnav li a:hover{scale:1.05}}.contentCol{display:grid;gap:calc(min(calc(60 / var(--w) * 100vw), 60px));width:calc(min(calc(var(--w_col) / var(--w) * 100vw), calc(var(--w_col) * 1px)));margin-inline:auto}@media (max-width: 750px){.contentCol{--w_col:630}}@media (min-width: 750px){.contentCol{--w_col:1100}}.img{width:calc(min(calc(var(--w_col) / var(--w) * 100vw), calc(var(--w_col) * 1px)));margin-inline:auto}#mvCol{--bubble_sec:30s;--w_col_sp:684;--w_col_pc:1154;overflow:hidden;position:relative;z-index:0;background:linear-gradient(to bottom, #0059bd, #342cc7);padding-bottom:calc(min(calc(230 / var(--w) * 100vw), 230px));mask:linear-gradient(to bottom, transparent 0%, #0059bd 10px)}@keyframes bubble{0%{translate:0 100%}90%{opacity:1}100%{translate:0 -100%;opacity:0}}.img{display:block}@media (max-width: 750px){.img{width:calc(min(calc(var(--w_col_sp) / var(--w) * 100vw), calc(var(--w_col_sp) * 1px)))}}@media (min-width: 750px){.img{width:calc(min(calc(var(--w_col_pc) / var(--w) * 100vw), calc(var(--w_col_pc) * 1px)))}}#trspCol{position:relative;z-index:20;background:linear-gradient(to bottom, #1e2098 0%, #333fd3 30%, #7f377c 70%, #971111 100%);display:grid;gap:calc(min(calc(60 / var(--w) * 100vw), 60px));padding-top:calc(min(calc(130 / var(--w) * 100vw), 130px));margin-top:calc(max(calc(-200 / var(--w) * 100vw), -200px));mask:url(../images/wave_top.svg) repeat-x top center/calc(min(calc(4000 / var(--w) * 100vw), 4000px)) auto,url(../images/wave_bottom.svg) repeat-x bottom center/calc(min(calc(4000 / var(--w) * 100vw), 4000px)) auto,linear-gradient(to bottom, transparent calc(min(calc(260 / var(--w) * 100vw), 260px)), #1e2098 calc(min(calc(260 / var(--w) * 100vw), 260px)), #971111 calc(100% - min(calc(260 / var(--w) * 100vw), 260px)), transparent calc(100% - min(calc(260 / var(--w) * 100vw), 260px)))}#trspCol:before{content:"";position:absolute;z-index:-1;inset:0;background:url(../images/texture.webp) repeat center/auto}#trspCol h2{--w_col_sp:328;--w_col_pc:328}#trspCol .boxMovie{position:relative}#trspCol .boxMovie .linkMovie{position:absolute;top:calc(210 / 1733 * 100%);left:50%;background:#FFF;aspect-ratio:450 / 253;width:calc(450 / 630 * 100%);height:auto;translate:-50% 0;line-height:0;font-size:0;opacity:0}#trspCol .boxMovie .linkMovie span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(0px 0px 99.9% 99.9%);clip-path:inset(0px 0px 99.9% 99.9%);border:0}@media (min-width: 750px){#trspCol .boxMovie .linkMovie{top:calc(142 / 546 * 100%);left:calc(30 / 1100 * 100%);width:calc(286 / 1100 * 100%);translate:0 0}}@media (hover: hover) and (pointer: fine){#trspCol .boxMovie .linkMovie{transition:opacity 0.5s}#trspCol .boxMovie .linkMovie:hover{opacity:0.2}}#trspCol #trspColInner{display:grid;gap:calc(min(calc(64 / var(--w) * 100vw), 64px));background:color-mix(in srgb, #120941, transparent 50%);padding-block:calc(min(calc(230 / var(--w) * 100vw), 230px));mask:url(../images/wave_top.svg) repeat-x top center/calc(min(calc(4000 / var(--w) * 100vw), 4000px)) auto,linear-gradient(to bottom, transparent calc(min(calc(260 / var(--w) * 100vw), 260px)), #000 calc(min(calc(260 / var(--w) * 100vw), 260px)))}#trspCol #trspColInner>.img:nth-child(1){--w_col_sp:523;--w_col_pc:998}#trspCol #trspColInner>.img:nth-child(2){--w_col_sp:559;--w_col_pc:852}#trspCol #trspColInner>.img:nth-child(3){--w_col_sp:480;--w_col_pc:480}#trspCol #trspColInner>.img:nth-child(4){--w_col_sp:630;--w_col_pc:909}#taikoCol{position:relative;z-index:10;display:grid;gap:calc(min(calc(64 / var(--w) * 100vw), 64px));background:url(../images/bg_taiko.webp) repeat center/75px auto,#FFF;margin-top:calc(max(calc(-200 / var(--w) * 100vw), -200px));padding-block:calc(min(calc(330 / var(--w) * 100vw), 330px)) calc(min(calc(230 / var(--w) * 100vw), 230px));mask:url(../images/wave_bottom.svg) repeat-x bottom center/calc(min(calc(4000 / var(--w) * 100vw), 4000px)) auto,linear-gradient(to bottom, #FFF, #FFF calc(100% - min(calc(260 / var(--w) * 100vw), 260px)), transparent calc(100% - min(calc(260 / var(--w) * 100vw), 260px)))}#taikoCol h2{--w_col_sp:502;--w_col_pc:502}#taikoCol ul{display:grid;gap:1rem}@media (min-width: 750px){#taikoCol ul{grid-template-columns:repeat(2, 1fr)}}#aboutCol{--bubble_sec:100s;overflow:hidden;position:relative;z-index:0;display:grid;gap:calc(min(calc(72 / var(--w) * 100vw), 72px));background:url(../images/bg_footer.webp) no-repeat bottom/100% auto,linear-gradient(to bottom, #0059bd, #342cc7);width:100%;margin-top:calc(max(calc(-200 / var(--w) * 100vw), -200px));padding-block:calc(min(calc(330 / var(--w) * 100vw), 330px)) calc(min(calc(100 / var(--w) * 100vw), 100px))}#aboutCol #taikoAboutCol,#aboutCol #trspAboutCol{position:relative;z-index:0}#aboutCol #taikoAboutCol ul,#aboutCol #trspAboutCol ul{position:absolute;bottom:0;left:50%;translate:-50% 0;display:grid}@media (max-width: 750px){#aboutCol #taikoAboutCol ul,#aboutCol #trspAboutCol ul{gap:calc(24 / var(--w) * 100vw);width:calc(510 / 630 * 100%);bottom:calc(min(calc(60 / var(--w) * 100vw), 60px))}}@media (min-width: 750px){#aboutCol #taikoAboutCol ul,#aboutCol #trspAboutCol ul{grid-template-columns:repeat(auto-fit, calc(min((33% - 2rem / 3), 365px)));gap:1rem;bottom:calc(min(calc(60 / var(--w) * 100vw), 60px));width:calc(960 / 1100 * 100%)}}#aboutCol #attentionCol{display:grid;gap:calc(min(calc(40 / var(--w) * 100vw), 40px));font-weight:300}@media (min-width: 750px){#aboutCol #attentionCol{--w_col:960}}#aboutCol #attentionCol h3{font-size:2rem;font-weight:700;line-height:1}#aboutCol #attentionCol ul{display:grid;gap:0.5em;text-align:left}#aboutCol #attentionCol ul li{padding-left:1em;text-indent:-1em}#aboutCol #attentionCol small{font-size:0.8rem}.bubble:before,.bubble::after{content:"";position:absolute;z-index:-1;top:0;width:50%;height:100%;translate:0 100%}.bubble:before{left:-25%;background:url(../images/img_bubble_l.webp) no-repeat center center/calc(min(calc(450 / var(--w) * 100vw), 450px));animation:bubble var(--bubble_sec) 0s linear infinite}.bubble:after{right:-25%;background:url(../images/img_bubble_r.webp) no-repeat center center/calc(min(calc(450 / var(--w) * 100vw), 450px));animation:bubble var(--bubble_sec) 0s linear infinite}@media (min-width: 750px){.bubble:before,.bubble::after{width:calc(max(min(calc(450 / var(--w) * 100vw), 450px), calc((100vw - min(calc(1100 / var(--w) * 100vw), 1100px)) / 2)))}.bubble:before{left:calc(calc((100vw - min(calc(1100 / var(--w) * 100vw), 1100px)) / 2 * -1))}.bubble:after{right:calc(calc((100vw - min(calc(1100 / var(--w) * 100vw), 1100px)) / 2 * -1))}}@media (min-width: 1300px){.bubble:before{left:0}.bubble:after{right:0}}
