@charset "utf-8";


/* ベース */
body{ height: 100%; background: #000; -webkit-text-size-adjust: 100%; }
*{ margin: 0; padding: 0; border:none; list-style: none; box-sizing: border-box; }
h1 , h2 , h3 , h4 , h5 , h6{ font-weight: normal; }
img{ vertical-align: text-bottom; }


/* フォント */
*{
font-family: "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
font-weight: 400;
font-style: normal;
color: #fff;
line-height: 1.8em;
text-shadow: 0 0 10px #00d2ff;
}
::selection{ background: rgba(133, 133, 133, 0.5); color: #fff; }
/* ボタンリンク */
.bt-link{ transition: all 0.8s ease; animation: all 0.8s ease; box-shadow: 0px 0px 30px rgba(239, 61, 255, 0.0); }
.bt-link:hover{
-webkit-animation-name: pulse;
animation-name: pulse;
/*box-shadow: 0px 0px 30px #ff9dbf;*/
}
.no-link{ opacity: 0.2; cursor: default !important; }
.font-link{
color: #fff;
font-weight: 600;
transition: all 0.8s ease; animation: all 0.8s ease;
border-bottom: 1px #00d2ff solid !important;
}
.font-link:hover{ opacity: 0.5; }


/* main */
main{
width: 100%;
max-width: 2560px;
min-width: 700px;
position: relative;
margin: 0 auto;
}
/* main bg */
main > .bg{
width: 100%;
height: 100%;
background: #090036;
position: absolute;
top: 0;
left: 0;
}
main > .bg .grad{
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%);
position: absolute;
top: 0;
left: 0;
}
/* main 星 */
main > .bg .star {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.star-dot { display: block; }


.wp{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}


/* フッター */
footer{
width: 100%;
background: #fff;
max-width: 2560px;
min-width: 700px;
position: relative;
margin: 0 auto;
padding: 30px 5%;
}
footer p{
width: 100%;
font-size: 16px;
color: #090036;
font-style: normal;
text-align: center;
position: relative;
margin: 0 auto;
text-shadow: none;
}


/* ボタンベース */
.bt-base{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.bt-base a{
width: auto;
background: #fff;
display: inline-block;
font-size: 18px;
color: #090036;
text-decoration: none;
position: relative;
margin: 0 10px;
padding: 10px 25px;
border-radius: 10px;
text-shadow: none;
box-shadow: 0 0 10px rgba(0,210,255,0.5);
}


/* main -------------------- */


#top{
width: 100%;
position: relative;
}
#top .ef-line{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 波線エフェクトのスタイル */
.wave-svg {
position: absolute;
top: 40%;
left: 0;
width: 100%;
height: 300px; /* 波の振れ幅に合わせた高さ */
transform: translateY(-50%);
pointer-events: none;
overflow: visible;
}
.wave-path {
transform-origin: center;
animation: wave-animation 6s ease-in-out infinite alternate;
}
@keyframes wave-animation {
    from { transform: scaleY(0.4) translateY(-30px); }
    to { transform: scaleY(1.8) translateY(30px); }
}
#top .box{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
#top .box .bg{
width: 100%;
display: flex;
position: relative;
}
#top .box .bg > div{
width: 25%;
height: 100%;
overflow: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
mask-image: linear-gradient(to top, transparent 10%, black 50%);
}
#top .box .bg img{
display: block;
position: relative;
}
#top .box .bg .grad{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
  #top .box .bg > div:nth-child(1) .grad{ background: linear-gradient(to top, rgba(132,213,185,1.0) 0%, rgba(132,213,185,0) 90%); }
  #top .box .bg > div:nth-child(2) .grad{ background: linear-gradient(to top, rgba(197,132,213,1.0) 0%, rgba(197,132,213,0) 90%); }
  #top .box .bg > div:nth-child(3) .grad{ background: linear-gradient(to top, rgba(213,132,168,1.0) 0%, rgba(213,132,168,0) 90%); }
  #top .box .bg > div:nth-child(4) .grad{ background: linear-gradient(to top, rgba(255,136,136,1.0) 0%, rgba(255,136,136,0) 90%); }
#top .box .img{
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 15%;
left: 0;
}
#top .box .img img{
display: block;
position: relative;
}
#top .box .item{
width: 100%;
position: absolute;
bottom: 0;
}
#top .box .item > div{
width: 100%;
max-width: 1560px;
position: relative;
margin: 0 auto;
}
#top .box .item h1{
width: 100%;
position: relative;
margin: 0 0 -8%;
}
#top .box .item p{
width: 100%;
position: relative;
}
#top .box .item h1 img,
#top .box .item p img{
width: 100%;
display: block;
position: relative;
}


#info{
width: 100%;
position: relative;
padding: 50px calc(5% - 15px) 0;
}
#info ul{
width: 100%;
max-width: 1630px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto -30px;
}
#info ul li{
width: calc(50% - 30px);
position: relative;
margin: 0 15px 30px;
}
#info ul li a{
width: 100%;
overflow: hidden;
background: rgba(0,0,0,0.25);
display: block;
position: relative;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,210,255,0.5);
transition: background-color 0.5s ease;
}
#info ul li a:hover{ background: rgba(0,210,255,0.2); }
#info ul li a img{
width: 100%;
display: block;
position: relative;
}


#about{
width: 100%;
position: relative;
padding: 150px 5%;
}
#about .item{
width: 100%;
max-width: 800px;
position: relative;
margin: 0 auto;
}
#about h2{
width: 100%;
font-size: 35px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#about p{
width: 100%;
font-size: 18px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#about img{
width: 100%;
display: block;
position: relative;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,210,255,0.5);
}


#list{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#list .item{
width: 100%;
max-width: 800px;
position: relative;
margin: 0 auto;
}
#list h2{
width: 100%;
font-size: 35px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#list .video{
width: 100%;
overflow: hidden;
position: relative;
margin: 0 0 50px;
aspect-ratio: 16 / 9;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,210,255,0.5);
}
#list .video iframe{
width: 100%;
height: 100%;
}
#list dl{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 0 30px;
}
#list dl h3{
width: 100%;
font-size: 18px;
position: relative;
}
#list dl dt{
width: 50%;
font-size: 18px;
position: relative;
padding: 0 10px 0 0;
}
#list dl hr{
width: 100%;
position: relative;
margin: 20px auto;
border-bottom: 1px #3a355f solid;
}
#list dl hr:nth-child(2){ border-bottom: 1px #9d9db1 solid; }
#list dl dd{
width: 50%;
font-size: 18px;
position: relative;
padding: 0 0 0 10px;
}
#list dl dt p{  /* No. */
width: 30px;
display: inline-block;
font-size: 18px;
position: relative;
}


#bonus{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#bonus h2{
width: 100%;
font-size: 35px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#bonus .ef-line{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
mix-blend-mode: luminosity;
}
#bonus .item{
width: 100%;
max-width: 800px;
background: rgba(0,0,0,0.25);
position: relative;
margin: 0 auto 50px;
padding: 50px;
/*border: rgba(255, 255, 255, 0.5) 1px solid;*/
border-radius: 15px;
box-shadow: 0 0 20px rgba(0,210,255,0.5);
}
#bonus .item h3{
width: 100%;
font-size: 32px;
line-height: 1.2em;
text-align: center;
position: relative;
margin: 0 0 20px;
}
#bonus h3 span{
font-size: 20px;
line-height: 1.2em;
}
#bonus p{
width: 100%;
font-size: 18px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#bonus img{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
#bonus dl{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 0 20px;
padding: 15px;
border: #fff 1px solid;
border-radius: 10px;
}
  /*
  #bonus #c01 dl{
  padding: 0;
  border: none;
  border-radius: 0;
  }
  */
#bonus dl p{
font-size: 16px;
text-align: left;
margin: 0 0 10px;
}
#bonus dl dt{
width: 16px;
position: relative;
margin: 0 5px 5px 0;
}
  #bonus #c01 dl dt{ width: 64px; }
#bonus dl dd{
width: calc(100% - 21px);
position: relative;
margin: 0 0 5px;
}
  #bonus #c01 dl dd{ width: calc(100% - 70px) }
#bonus dl span{
width: 100%;
display: block;
font-size: 14px;
position: relative;
margin: 10px 0 0 0;
}
#bonus span.note{
width: 100%;
display: block;
font-size: 14px;
position: relative;
}
#bonus .item .box{
width: 100%;
position: relative;
/*
padding: 15px;
border: #fff 1px solid;
border-radius: 10px;
*/
}


#spec{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#spec h2{
width: 100%;
font-size: 35px;
text-align: center;
position: relative;
margin: 0 0 50px;
}
#spec dl{
width: 100%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
#spec dl dt{
width: 130px;
font-size: 18px;
position: relative;
}
#spec dl dd{
width: calc(100% - 130px);
font-size: 18px;
position: relative;
}
#spec dl hr{
width: 100%;
position: relative;
margin: 10px auto;
border-bottom: 1px #3a355f solid;
}



#end{
width: 100%;
position: relative;
margin: 0 0 -2px;
padding: 100px 5% 0;
}
#end .bg{
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 40%, rgba(46,157,183,1.0) 75%, rgba(46,157,183,0) 100%);
position: absolute;
top: 0;
left: 0;
}
#end .bg .ef-smoke{
width: 100%;
height: 302px;
background: url(../img/_ef01.webp) repeat-x bottom;
position: absolute;
bottom: 0;
left: 0;
animation: smoke01 60s linear infinite;
}
@keyframes smoke01{
0%{ background-position: 0 center; }
100%{ background-position: -2560px center; }
}
#end p{
width: 100%;
max-width: 1560px;
position: relative;
margin: 0 auto;
}
#end p img{
width: 100%;
display: block;
position: relative;
}







/* レスポンシブ */


@media screen and (min-width: 2561px){



}


@media screen and (max-width: 1600px){



}


@media screen and (max-width: 1400px){



}


@media screen and (max-width: 1200px){

  #top .box .img img{ width: 800px;}
  #top .box .bg img{ width: 300px; }

  #info ul li{ width: calc(100% - 30px); }

}


/* end */