@charset "UTF-8";

#loader{
width: 100vw;
height: 100dvh;
position: fixed;
top:0;
left: 0;
background: #0d064b;
z-index: 10;
}
#loaderIcon{
position: absolute;
width: 38%;
aspect-ratio:740/640;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loaderIcon img{
position: absolute;
top: 0;
left: 0;
}
#loaderIcon img:nth-last-of-type(1){
position: relative;
transform-origin: 75% bottom; /* 底を支点にスケール */
animation: bounce 1.4s infinite;
}
@keyframes bounce {
  0%   { transform: rotate(-5.5deg); }
  25%  {  transform: rotate(1deg); }
  50%  { transform: rotate(-5.5deg); }
  100% { transform: rotate(-5.5deg); }
}

.loaderFloat {
--amplitude: 1.2vw;   /* 上下の移動幅 */
--duration: 2.0s;    /* 往復の所要時間 */
--timing: cubic-bezier(.22,.9,.35,1); /* 優しいイージング */
}
.loaderFloat:nth-of-type(2n) {
animation: loaderFloatY1 var(--duration) ease-in-out infinite;
}
.loaderFloat:nth-of-type(2n+1) {
animation: loaderFloatY2 var(--duration) ease-in-out infinite;
}

@keyframes loaderFloatY1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(-1 * var(--amplitude))); }
  100% { transform: translateY(0); }
}

@keyframes loaderFloatY2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(0.6 * var(--amplitude))); }
  100% { transform: translateY(0); }
}

.ctsWrap{
overflow: hidden;
}
main{
position: relative;
width: 100vw;
height: 100lvh;
overflow: hidden;
min-height: 141vw;
min-height: 183vw;
max-height: 210vw;
}
h1{
width: 80%;
margin: 8% auto 0 auto;
background: url("images/main_logo.png?1211") center center no-repeat;
background-size: 100%;
aspect-ratio:1360/580;
z-index: 1;
}
#catch{
font-size: 0;
position: absolute;
z-index: 1;
background: url("images/main_catch.png") center center no-repeat;
background-size: 100%;
aspect-ratio:80/860;
width: 5%;
left: 47.5%;
bottom: 27%;
}
#roadshow{
font-size: 0;
position: absolute;
z-index: 1;
background: url("images/main_roadshow.png") center center no-repeat;
background-size: 100%;
aspect-ratio:780/340;
width: 44%;
left: 28%;
bottom: 14%;
}
#bg, #shin{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
#bg{
background: url("images/main_bg_mobile.jpg") center center no-repeat;
background-size: cover;
}
#shin{
background: url("images/main_shin_mobile.png") center center no-repeat;
background-size: cover;
}
.sns{
position: absolute;
bottom: 3vw;
left: 0;
}
.sns a{
display: inline-block;
width: 15%;
margin-right: -1vw;
}

.cts{
transform-origin:top 0;
background: url("images/bg_firework_l.png") -250% 0 repeat-y, url("images/bg_firework_r.png") 500% 0 repeat-y, url("images/bg_wave_l.png") 0% 0% repeat-y, url("images/bg_wave_r.png") 100% 0% repeat-y, linear-gradient(180deg, rgba(224, 103, 186, 1) 0%, rgba(115, 62, 194, 1) 100%);
background-size: 90%, 90%, 40%, 40%, 100%;
padding: 5vw 0 0 0;
opacity: 0;
transition: 2.4s all;
}
.cts.active{
opacity: 1;
}
#movie,
#news{
padding-top: 20vw;
margin: 0 auto;
}
footer{
padding-top: 5vw;
margin: 0 auto;
}
h1,h2,h3,h4,h5{
display: block;
font-size: 0;
}
#movie h2,
#news h2{
display: block;
width: 75%;
margin: 0 auto 7vw auto;
aspect-ratio:760/170;
}
#movie h2{
background: url("images/heading_movie.png");
background-size: 100%;
}
#news h2{
background: url("images/heading_news.png");
background-size: 100%;
}
#movie h2::before,
#news h2::before,
#movie h2::after,
#news h2::after{
content: "";
aspect-ratio:1520/340;
width: 100%;
position: absolute;
top:0;
left: 0;
--amplitude: 2.8vw;   /* 上下の移動幅 */
--duration: 2.8s;    /* 往復の所要時間 */
--timing: cubic-bezier(.22,.9,.35,1); /* 優しいイージング */
}
#movie h2::before,
#news h2::before{
background: url("images/heading_h1.png");
background-size: 100%;
animation: floatY1 var(--duration) ease-in-out infinite;
}
#movie h2::after,
#news h2::after{
background: url("images/heading_h2.png");
background-size: 100%;
animation: floatY2 var(--duration) ease-in-out infinite;
}

@keyframes floatY1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(-1 * var(--amplitude))); }
  100% { transform: translateY(0); }
}

@keyframes floatY2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(0.6 * var(--amplitude))); }
  100% { transform: translateY(0); }
}
.newsWrap h3,
.newsWrap h4,
.newsWrap h5{
width: 100%;
margin: 0 auto;
}
#movie iframe{
width: 92%;
margin: 0 auto;
aspect-ratio:16/9;
border-radius: 2vw;
}
#news{
color: #7B581B;
}
.newsWrap{
position: relative;
width: 92%;
margin: 5vw auto;
background: #FFFFE0;
border: solid 1vw #E2D57A;
border-radius: 8vw;
padding: 7vw 5vw 20vw 5vw;
}
.newsWrap::before {
content: "";
background: url("images/news_c_h_mobile.png");
background-size: 100%;
aspect-ratio:1880/340;
width: 98vw;
position: absolute;
top:-2vw;
left: -4vw;
}
.newsWrap::after {
content: "";
background: url("images/news_c_f_mobile.png");
background-size: 100%;
aspect-ratio:1880/340;
width: 98vw;
position: absolute;
bottom:-2vw;
left: -4vw;
}
.newsWrap p{
text-align: justify;
line-height: 1.7;
margin-top: 1rem;
}
.newsWrap p.date{
text-align: center;
font-size: 0.8rem;
line-height: 1;
margin-bottom: 1rem;
}
.newsWrap p.heading{
text-align: center;
font-size: 1.15rem;
line-height: 1.4;
font-weight: bold;
}
#news251213 h3{
background: url("images/news_1213_1.png?1209") center center no-repeat;
background-size: 100%;
aspect-ratio:1520/780;
}
#news251213 h4{
background: url("images/news_1213_2.png") center center no-repeat;
background-size: 100%;
aspect-ratio:1520/300;
margin-top: 10vw;
}
#news251213 h5{
aspect-ratio:1520/200;
margin-top: 10vw;
}
#news251213 h5:nth-of-type(1){
background: url("images/news_1213_3.png") center center no-repeat;
background-size: 100%;
}
#news251213 h5:nth-of-type(2){
background: url("images/news_1213_4.png") center center no-repeat;
background-size: 100%;
}
#news251213 h5:nth-of-type(3){
background: url("images/news_1213_5.png") center center no-repeat;
background-size: 100%;
}

#movieMark{
display: block;
margin: 0 auto;
width: 40%;
transform: scale(0.15);
transition: 0.5s all;
}
#movieMark.active{
transform: scale(1);
}
#policy{
display: block;
font-size: 0.75rem;
color: white;
text-decoration: none;
margin: 1rem auto;
}
#policy a{
color: white;
text-decoration: none;
}
#toho{
display: block;
margin: 0 auto;
width: 25%;
}
#cr{
display: block;
font-size: 0.5rem;
color: white;
padding: 0.75em 0;
}

/*PC*/
@media screen and (min-width:768px){

#loaderIcon{
width: 17%;
}
.loaderFloat {
--amplitude: 0.6vw;   /* 上下の移動幅 */
}

main{
height: 100lvh;
min-height: 48vw;
max-height: 75vw;
}
h1{
width: 42%;
margin: 0.5vw auto 0 0.5vw;
}
#catch{
width: 2.5%;
left: auto;
right: 2.5vw;
bottom: auto;
top: 2.5vw;
filter: drop-shadow(0 0 2vw #020068) drop-shadow(0 0 1vw #020068);
}
#roadshow{
width: 21%;
left: 11%;
bottom: auto;
top: 17vw;
filter: drop-shadow(0 0 2vw #020068) drop-shadow(0 0 1vw #020068);
}
#bg, #shin{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
#bg{
background: url("images/main_bg_pc.jpg") center center no-repeat;
background-size: cover;
}
#shin{
background: url("images/main_shin_pc.png") center center no-repeat;
background-size: cover;
}
.sns{
bottom: 1.0vw;
left: 1.0vw;
text-align: left;
}
.sns a{
width: 6%;
}

.cts{
background:url("images/bg_firework_l.png") -20% 0% repeat-y, url("images/bg_firework_r.png") 120% 0% repeat-y, url("images/bg_wave_l.png") 0% 0% repeat-y, url("images/bg_wave_r.png") 100% 0% repeat-y, linear-gradient(180deg, rgba(224, 103, 186, 1) 0%, rgba(115, 62, 194, 1) 100%);
background-size: 45%, 45%, 20%, 20%, 100%;
}
#movie,
#news,
footer{
width: 88%;
max-width: 1080px;
}
#movie{
padding-top: 5vw;
}
#news{
padding-top: 10vw;
}
footer{
padding-top: 0;
}
#movie h2,
#news h2{
width: 40%;
margin: 0 auto 5vw auto;
}
#movie h2::before,
#news h2::before,
#movie h2::after,
#news h2::after{
--amplitude: 1.0vw;   /* 上下の移動幅 */
}
#movie iframe{
border-radius: 1.5vw;
}
.newsWrap h4,
.newsWrap h5{
width: 75%;
}
.newsWrap{
border: solid 0.6vw #E2D57A;
border-radius: 6vw;
padding: 7vw 7vw 14vw 7vw;
}
.newsWrap::before {
content: "";
background: url("images/news_c_h_pc.png");
background-size: 100%;
aspect-ratio:2240/360;
width: 118%;
left: -9%;
top:-2vw;
}
.newsWrap::after {
content: "";
background: url("images/news_c_f_pc.png");
background-size: 100%;
aspect-ratio:2240/360;
width: 118%;
left: -9%;
bottom:-3vw;
}
.newsWrap p.heading{
font-size: 1.25rem;
}
.newsWrap h3{
margin-top: 1rem;
}
#news251213 h4{
display: block;
width: 60%;
margin-top: 5vw;
}
#news251213 h5{
display: block;
width: 70%;
margin-top: 5vw;
}
#movieMark{
width: 24%;
}
#toho{
width: 10%;
}

}


/*PC*/
@media screen and (min-width:1080px){

#movie{
padding-top: calc(1080px*0.05);
}
#news{
padding-top: calc(1080px*0.1);
}
#movie h2,
#news h2{
margin-bottom: calc(1080px*0.05);
}
.newsWrap{
border: solid calc(1080px*0.006) #E2D57A;
border-radius: calc(1080px*0.06);
padding: calc(1080px*0.07) calc(1080px*0.07) calc(1080px*0.14) calc(1080px*0.07);
}
.newsWrap::before {
top: calc(-1080px*0.02);
}
.newsWrap::after {
bottom: calc(-1080px*0.03);
}
#news251213 h4{
margin-top: calc(1080px*0.05);
}
#news251213 h5{
margin-top: calc(1080px*0.05);
}

}