@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&family=Crimson+Text:wght@700&family=Oswald:wght@200..700&display=swap);
#nav{position:fixed;right:0;z-index:99}
#nav a{font-weight:700;font-family:Oswald;text-decoration:none}
@media screen and (min-width:1025px){#nav{top:16px;padding:0 40px;border-radius:20px 0 0 20px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}
#nav a{color:#3296c8;font-size:16px;line-height:32px}
#nav ul{display:inline-flex;flex-direction:row}
#nav li{display:inline-flex;flex-direction:row;align-items:center}
#nav li:not(:first-child)::before {display: inline-block;width: 8px;aspect-ratio: 1 / 1;margin: 0 5px;content: "";border: 2px solid #3296c8;transform: rotate(45deg);box-sizing: border-box;vertical-align: middle;} 
@media screen and (max-width:1024px){#nav{display:none;top:0;left:0;bottom:0;padding:40px 16px;background:#81d1e9}
#nav a{color:#fff;font-size:64px;line-height:1.25}}
@media screen and (max-width:1024px) and (max-width:599px){#nav a{font-size:12vmin}}
@media screen and (max-width:1024px){.navOpen #nav{display:grid;place-items:center;overflow-y:scroll}
#nav ul{display:flex;flex-direction:column}
#nav li:not(:first-child){margin-top:16px}}
#navOpener{place-items:center;position:fixed;bottom:20vh;right:0;z-index:100;width:72px;height:48px;border:1px solid rgba(255,255,255,.2);border-right:0;border-radius:24px 0 0 24px;background:#81d1e9;cursor:pointer;transition:.3s}
@media screen and (min-width:1025px){#navOpener{display:none}}
@media screen and (max-width:1024px){#navOpener{display:grid}}
#navOpener:hover{transform:scale(1.25)}
#navOpener>span{display:inline-block;position:relative;aspect-ratio:1/1;width:24px}
#navOpener>span span,#navOpener>span::after,#navOpener>span::before{display:inline-block;position:absolute;left:50%;width:80%;height:10%;margin-left:-40%;border-radius:50px;background:#fff;content:""}
#navOpener>span span{top:50%;margin-top:-5%;transition:.3s}
#navOpener>span::before{top:20%;margin-top:-5%}#navOpener>span::after{bottom:20%;margin-bottom:-5%}
#navOpener.on>span span{width:10%;margin-left:-5%}
#navOpener.on>span::before{top:50%;transform:rotate(45deg);transition:top 150ms,transform 150ms 150ms}
#navOpener.on>span::after{bottom:50%;transform:rotate(-45deg);transition:bottom 150ms,transform 150ms 150ms}
#navOpener.off>span::before{transition:top 150ms 150ms,transform 150ms}
#navOpener.off>span::after{transition:bottom 150ms 150ms,transform 150ms}html{scroll-behavior:smooth}body{overflow-y:auto;color:1e4687;font-size:14px;line-height:1.5;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;text-align:center;word-break:break-all}
@media screen and (max-width:599px){body{font-size:14px}}body.isModal{overflow-y:hidden}img{vertical-align:bottom}

#background {position: fixed;inset: 0;z-index: -2;background: url(../image/bg.png) center center / cover no-repeat;}
#background #particles-js{position:fixed;top:0;right:0;bottom:0;left:0}
@keyframes logo{0%{opacity:0;transform:scale(1.5);filter:blur(20px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes chara{0%{opacity:0}100%{opacity:1}}

#header{width:100%;max-width:1024px;margin:0 auto;padding-top:40px;padding-bottom:40px}
#header h1{bottom:0;z-index:10}
#header h1 img{width:70%;height:auto;opacity:0;animation:logo .5s ease-out .2s 1 forwards}
#header picture img{width:100%;height:auto;opacity:0;animation:chara 1s ease-in 0s 1 forwards}
@media screen and (max-width:599px){#header{display:flex;flex-direction:column-reverse;padding-bottom:0;overflow-x:hidden}#header h1{position:relative;margin-top:-40px}#header h1 img{width:100%}#header picture img{width:110%;max-width:600px;margin:0 -5vw}}.description{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 0;max-width:1024px;margin:20px auto 0}
@media screen and (max-width:599px){.description{margin:40px auto 0}}.description span{position:relative;padding:0 .25em;background:linear-gradient(to right,#a48f6c,#a99067 30%,#c09856 70%,#c49955);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:400;font-size:32px;line-height:1.25;font-family:"BIZ UDPMincho",serif}
@media screen and (max-width:599px){.description span{font-size:7vw}}.description span::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:#fff}


main .delay:not(#cast){opacity:0;transform:translateY(100px);transition:opacity 2s,transform 1.5s}
main .delay:not(#cast).active{opacity:1;transform:translateY(0)}
main #cast.delay>*{opacity:0;transform:translateY(100px);transition:opacity 2s,transform 1.5s}
main #cast.delay.active>*{opacity:1;transform:translateY(0)}
main section{padding:40px 4%}
main section h2{color:#FFFFFF;font-weight:400;font-size:80px;line-height:1;font-family:Oswald;text-shadow:0 4px 0 #ffef8f;font-family: "Zen Maru Gothic", sans-serif;font-weight:400;font-style:normal;}
@media screen and (max-width:599px){main section h2{font-size:64px}}
main section h2~*{max-width:768px;margin:20px auto 0}
main section .bold,main section h3,main section h4,main section h5{font-weight:700}
main .tempTable{display:grid;text-align:left;gap:8px 16px}
main .tempTable.clm2{grid-template-columns:max-content 1fr}
@media screen and (max-width:599px){main .tempTable.clm2{grid-template-columns:auto}}
main .tempTable.clm3{grid-template-columns:max-content 1fr 1fr}
@media screen and (max-width:1024px){main .tempTable.clm3{grid-template-columns:max-content 1fr}}
@media screen and (max-width:1024px) and (min-width:600px){main .tempTable.clm3>:nth-child(3n+1){grid-row:span 2}}
@media screen and (max-width:599px){main .tempTable.clm3{grid-template-columns:auto}}
main .tempTable.frClm2{grid-template-columns:repeat(2,1fr)}
@media screen and (max-width:599px){main .tempTable.frClm2{grid-template-columns:auto}}
main .tempTable.frClm3{grid-template-columns:repeat(3,1fr)}
@media screen and (max-width:1024px){main .tempTable.frClm3{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:599px){main .tempTable.frClm3{grid-template-columns:repeat(1,1fr)}}
main .tempTable.frClm4{grid-template-columns:repeat(4,1fr)}
@media screen and (max-width:1024px){main .tempTable.frClm4{grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:599px){main .tempTable.frClm4{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:599px){main .tempTable{gap:4px}}
@media screen and (min-width:600px){main .tempTable .span{grid-column:1/-1}}main .tempTable img{width:100%;height:auto}main .tempTable h4,main .tempTable>h3{color:#ffed80}main .tempTable h4+div>:not(:first-child),main .tempTable>h3+div>:not(:first-child){margin-top:4px}
@media screen and (max-width:599px){main .tempTable h3~h3,main .tempTable h4~h4{margin-top:8px}}
main .tempList{text-align:left}
main .tempList>*{display:grid;grid-template-columns:max-content 1fr}
main .tempList>::before{content:"・"}
main .tempList.kome>::before{content:"※"}
main .tempList>:not(:first-child){margin-top:4px}
main .buttonBlock>*{display:inline-block;position:relative;max-width:480px;width:100%;padding:16px;border-radius:4px;color:#fff;font-weight:700;font-size:20px;line-height:1}
@media screen and (max-width:599px){main .buttonBlock>*{font-size:16px}}
main .buttonBlock>a{background:#007ec3;transition:transform .3s}
main .buttonBlock > a::after {position: absolute;top: 50%;right: 0.5em;width: 0;height: 0;margin-top: -6px;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 12px solid currentColor;content: "";}
main .buttonBlock>a:hover{transform:scale(1.05)}
main .buttonBlock span{background:#aaa}
main .asideBlock{padding:20px;border-radius:8px;background:rgba(255,255,255,.75)}
main h3,h5,li,p {color:#1e4687;}
main .tempTable .color{color:#007ec3;}

#ticket #ticketHead{margin:40px auto}
#ticket #ticketHead ul{display:grid;grid-template-columns:repeat(2,1fr);padding:4px;background:rgba(38,49,76,.15);border-radius:3em;font-weight:700;font-size:20px}
@media screen and (max-width:599px){#ticket #ticketHead ul{font-size:16px}}
#ticket #ticketHead li{padding:.5em 0;border-radius:3em;background:0 0;color:#1e4687}
#ticket #ticketHead .two{width:200%}
#ticket #ticketHead li.active{background:#1e4687;color:#fff}
#ticket #ticketHead li:not(.active){cursor:pointer}
#ticket .buttonBlock{margin:40px auto!important}
#ticket .ticketSection{display:none}
#ticket .ticketSection.isShow{display:block}
#ticket .ticketSection>:not(:first-child){margin:20px auto 0}
#ticket .ticketBlock:not(:first-child){margin:40px auto 0}
#ticket .ticketBlock h3{display:flex;align-items:center;color:#1e4687;font-weight:400;line-height:1}
#ticket .ticketBlock h3 .type{font-size:32px}
#ticket .ticketBlock .center{padding-top:20px;justify-content: center;}
@media screen and (max-width:599px){#ticket .ticketBlock h3 .type{font-size:20px}}
@media screen and (min-width:600px){#ticket .ticketBlock h3 .type{display:flex;align-items:center;flex-grow:1;text-align:center}
#ticket .ticketBlock h3 .type::after{flex-grow:1;height:12px;margin:0 8px;background:url(../image/border.svg) 0 0 repeat-x;content:""}}
#ticket .ticketBlock h3 .price{font-weight:400;font-size:40px;font-family:Oswald}
@media screen and (max-width:599px){#ticket .ticketBlock h3 .price{font-size:40px}}
@media screen and (max-width:599px){#ticket .ticketBlock h3{flex-direction:column;gap:4px}
#ticket .ticketBlock h3::after,#ticket .ticketBlock h3::before{display:block;width:100%;height:7px;background:url(../image/border.svg) 0 0 repeat-x;content:""}
#ticket .ticketBlock h3::before{margin-bottom:4px}
#ticket .ticketBlock h3::after{margin-top:4px}
#ticket .ticketBlock h3:not(:last-of-type){margin-bottom:0}
#ticket .ticketBlock h3:not(:last-of-type)::after{height:.01em;background:0 0}}
#ticket .ticketBlock .back {background-color: rgba(255, 255, 255, 0.7);padding:10px 10px 10px 10px;border-radius: 10px;margin-bottom:10px;}
#ticket .ticketBlock .tempTable a:has(img){margin:8px auto}
#ticket .ticketBlock .tempTable .diff{color:#ff316a}
#ticket .ticketBlock .tempTable h5:not(:first-child){margin-top:8px}

#cast{background:rgba(255,255,255,.25);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
#cast ul{max-width:1024px;gap:20px 0;display:inline-flex;flex-wrap:wrap;justify-content:center}
#cast ul>*{width:calc(100% / 7)}
#cast ul>* img{width:100%;height:auto}
#cast ul li:has(img[src*=clara]) p { color: #FA7D09;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=rona]) p { color: #426EFD;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=kaname]) p { color: #01BC3E;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=kotoha]) p { color: #FF98FF;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=kyouka]) p { color: #FF1A1A;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=ayumu]) p { color: #8833FF;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul li:has(img[src*=hanon]) p { color: #4EC0EB;font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal; }
#cast ul img+p{font-size:20px;line-height:1.75}
#cast p{font-size:clamp(6px, 1.9vw, 20px);line-height:1.75}
@media screen and (max-width:599px){#cast ul img+p{font-size:16px}}
#cast ul p+p{font-weight:700;font-size:14px;line-height:1;font-family:"Crimson Text"}
@media screen and (max-width:599px){#cast ul p+p{font-size:12px}}

#goods .goodsList{gap:8px 0;display:inline-flex;flex-wrap:wrap;justify-content:center}
#goods .goodsList>*{width:50%}
@media screen and (max-width:1024px){#goods .goodsList>*{width:50%}}
@media screen and (max-width:599px){#goods .goodsList>*{width:50%}}
#goods .goodsList>* img{width:100%;height:auto}
#goods .goodsList li:nth-child(odd){padding-right:4px}
#goods .goodsList li:nth-child(even){padding-left:4px}
#goods .goodsList+p{margin-top:8px;font-size:12px;text-align:left}
@media screen and (max-width:599px){#goods .goodsList+p{font-size:12px}}

#attention .accordion{text-align:left}
#attention .accordion>:nth-child(odd){cursor:pointer}
#attention .accordion>:nth-child(even){visibility:hidden;opacity:0;height:0;overflow:hidden;transition:.3s}
#attention .accordion .isOpen+:nth-child(even){visibility:visible;opacity:1;height:auto;overflow:auto}
#attention .accordion>:nth-child(odd){position:relative;padding:8px 40px 8px 16px;border-radius:4px;background-color:#1e4687;color:#fff;font-weight:700;font-size:16px}
@media screen and (max-width:599px){#attention .accordion>:nth-child(odd){font-size:16px}}
#attention .accordion>:nth-child(odd):not(:first-child){margin-top:20px}
#attention .accordion>:nth-child(odd)::before,#attention .accordion>:nth-child(odd)::after{content:"";position:absolute;top:50%;right:16px;width:20px;height:2px;background:#fff;border-radius:1px;transform-origin:center;transition:transform .25s ease;}
#attention .accordion>:nth-child(odd)::before{transform:translateY(-50%);}
#attention .accordion>:nth-child(odd)::after{transform:translateY(-50%) rotate(90deg);}
#attention .accordion>:nth-child(odd).isOpen::after{transform:translateY(-50%) rotate(180deg);}
#attention .accordion>:nth-child(odd).isOpen+*{margin:16px auto 40px}
#attention .accordion>:nth-child(odd).isOpen+:last-child{margin-bottom:0}
#attention .accordion>:nth-child(even)>:not(:first-child){margin-top:4px}
#attention .accordion>:nth-child(even) h4{margin-bottom:8px;color:#ffffff}
#attention .accordion>:nth-child(even) h4:not(:first-child){margin-top:16px}
#attention .accordion>:nth-child(even) h5:not(:first-child){margin-top:8px}
#attention .accordion>:nth-child(even) .strong{font-size:16px;text-decoration:underline}
@media screen and (max-width:599px){#attention .accordion>:nth-child(even) .strong{font-size:16px}}
#attention .accordion>:nth-child(even) .red{color: red;}
#attention .accordion>:nth-child(even) .under{text-decoration: underline;}

#contact{padding:40px 4%}
#contact span{text-wrap:nowrap}
#contact .buttonBlock{margin-top:16px}

#footer{padding:20px;background:#1e4687;color:#fff}
#footer ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:8px;margin-bottom:8px}
#footer ul img{width:auto;height:48px}
#footer ul img[src*=official]{height:40px}
#footer .copylight{font-size:12px}
@media screen and (max-width:599px){#footer .copylight{font-size:12px}}

#access .under{text-decoration: underline;}