*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
width:100%;
vertical-align:bottom;
}
li{
list-style-type: none;
}

#loader{
width: 100vw;
height: 100dvh;
position: fixed;
top:0;
left: 0;
background: #C4A3D4;
z-index: 999;
}
#loaderIcon{
position: absolute;
width: 17%;
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: 0.6vw;   /* 上下の移動幅 */
--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); }
}

#container{
overflow:hidden;
}

#menuBtn{
position:fixed;
top:0;
left:0;
width:9%;
cursor:pointer;
z-index:998;
opacity:0;
}
#menuBtn.active{
animation-name:fuwafuwa;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1s;
}
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px);
}
}
#menuClose{
position:absolute;
top:0;
left:0;
display:none;
}
#menu{
position: fixed;
top: 0;
padding:2% 0 0 0;
width: 100%;
height:100vh;
background: linear-gradient(180deg, rgb(44, 4, 161), rgb(209, 15, 180));
display:none;
z-index:997;
}
#menu .logo{
margin:1% auto 0 auto;
width:35%;
}
#menu .btn{
margin:0 auto 0 auto;
width:40%;
}
#menu .btn img{
margin-top:2%;
width:49%;
}
#menu .sns{
margin:2% auto 0 auto;
width:30%;
}
#menu .sns img{
display:inline-block;
width:18%;
}

#main{
position:relative;
opacity:0
}
#main .logo{
position:absolute;
top:0;
right:0;
width:30%;
opacity:0
}
#main .roadshow{
position:absolute;
top:8.5%;
right:3%;
width:23%;
opacity:0
}
#main .catch{
position:absolute;
top: 7%;
left: 2%;
width: 4.3%;
opacity:0
}
#main .sns{
position:absolute;
bottom:30.5%;
left:50%;
transform:translateX(-50%);
width:26%;
opacity:0
}
#main .sns img{
display:inline-block;
width:18%;
}
#main .icon{
position:absolute;
right:1%;
bottom:15%;
width:12%;
opacity:0
}
#main .credit{
position:absolute;
bottom:19.5%;
left:50%;
transform:translateX(-50%);
width:58%;
}
#main .banner{
position:absolute;
bottom:14.5%;
left:50%;
transform:translateX(-50%);
/*width: 65%;*//*3つ*/
width: 75%;/*4つ*/
}
#main .banner img{
margin:0 0.5%;
/*width: 28%;*//*3つ*/
width: 23%;/*4つ*/
}
#main .mvtc{
position:absolute;
bottom:10.5%;
left:50%;
transform:translateX(-50%);
/*width: 25%;*/
width: 84%;
}
#main .mvtc div{
display:inline-block;
margin:0 0.5%;
width:20%;
}
#main .oshiridama_0{
position:absolute;
top:0;
left:0;
/*opacity:0;*/
 animation-name:oshiridama_0;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1.2s;
}
@keyframes oshiridama_0 {
0% {
transform: translate(0%,0%);
scale:0.9;
}
100% {
transform: translate(0%,-0.1%);
scale:1;
}
}
#main .oshiridama_1{
position:absolute;
top:0;
left:0;
/*opacity:0;*/
 animation-name:oshiridama_1;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;
}
@keyframes oshiridama_1 {
0% {
transform: translate(0%,0%);
scale:0.9;
}
100% {
transform: translate(0%,1.5%);
scale:1;
}
}

#cloud_0{
position:relative;
margin-top: -18%;
pointer-events: none;
}

h2{
position:relative;
display: block;
margin: 0 auto 0 auto;
font-size: 0;
}

#eizo{
margin-top: -22%;
padding: 13% 0 17% 0;
background: url("images/eizo_middle_pc.jpg");
}
#eizo > picture:nth-child(1){
margin-top:-20%;
}
#eizo .content{
margin:0 auto;
width:70%;
}
#eizo h2{
width: 54%;
aspect-ratio:760/149;
background: url("images/eizo_midashi.png");
background-size: 100%;
}
#eizo h2::before,#ohanashi h2::before,
#eizo h2::after,#ohanashi h2::after{
content: "";
aspect-ratio:1520/340;
width: 100%;
position: absolute;
top:0;
left: 0;
--amplitude: 1vw;   /* 上下の移動幅 */
--duration: 2.8s;    /* 往復の所要時間 */
--timing: cubic-bezier(.22,.9,.35,1); /* 優しいイージング */
}
#eizo h2::before,#ohanashi h2::before{
background: url("images/h1.png");
background-size: 100%;
animation: floatY1 var(--duration) ease-in-out infinite;
}
#eizo h2::after,#ohanashi h2::after{
background: url("images/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); }
}

#eizo .eizoArea{
position: relative;
margin:5% auto 0 auto;
width: 95%;
aspect-ratio:16/9;
}
#eizo iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#eizo .btn{
margin:0 auto 0 auto;
width: 100%;
}
#eizo .btn img{
display:inline-block;
margin:2% 1% 0 1%;
width:30%;
}

#cloud_1{
position:relative;
margin-top: -18%;
z-index:1;
}

#ohanashi{
position:relative;
margin-top: -18%;
overflow:hidden;
z-index:0;
}
#ohanashi .catch{
position: absolute;
top: 7%;
left: 50%;
transform: translateX(-50%);
width: 90%;
}
#ohanashi .series{
position:absolute;
top:12%;
right:2%;
width:11%;
}
#ohanashi #cut_0{
position:absolute;
top:27%;
left: -1%;
width: 102%;
transform: rotate(-7deg); 
}
#ohanashi #cut_1{
position:absolute;
top:79%;
left: -1%;
width: 102%;
transform: rotate(-7deg); 
}

#ohanashi h2{
position:absolute;
top:36%;
left: 50%;
transform: translateX(-50%);
width: 38%;
aspect-ratio:760/139;
background: url("images/ohanashi_midashi.png");
background-size: 100%;
}
#ohanashi #text_0{
position:absolute;
top:40%;
left: 50%;
transform: translateX(-50%);
width:75%;
}
#ohanashi #text_1{
position:absolute;
top: 72%;
left: 50%;
transform: translateX(-50%);
width: 98%;
}
#ohanashi #text_2{
position:absolute;
top: 85%;
left: 2%;
width: 74%;
}

#cloud_2{
position:relative;
margin-top: -18%;
z-index:2;
}
#cloud_2 .oshiridama_0{
position:absolute;
top:15%;
left: 50%;
transform: translateX(-50%);
width:88%;
 animation-name:oshiridama_2;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1.2s;
 transform-origin: 0% 50%;
}
@keyframes oshiridama_2 {
0% {
transform: translate(-50%,0%);
scale:0.9;
}
100% {
transform: translate(-50%,0%);
scale:1;
}
}
#cloud_2 .oshiridama_1{
position:absolute;
top: 13%;
left: 46%;
transform: translateX(-50%);
width: 58%;
 animation-name:oshiridama_3;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;
 transform-origin: 0% 50%;
}
@keyframes oshiridama_3 {
0% {
transform: translate(-50%,0%);
scale:0.9;
}
100% {
transform: translate(-50%,0%);
scale:1;
}
}

#link {
position:relative;
margin-top: -21%;
}
#link .content{
position:absolute;
left:0;
bottom:2%;
}
#link ul{
display:table;
table-layout:fixed;
margin:0 auto;
width:98%;
}
#link li{
display:table-cell;
vertical-align:middle;
}
#link li:nth-of-type(1){
width:30%;
}
#link li:nth-of-type(2){
width:70%;
}
#link p{
margin-top:-3%;
font-size:0.7rem;
color:#fff;
}
#link .btn{
text-align:right;
}
#link .btn img{
display:inline-block;
margin:1% 0.5% 0 0.5%;
width:23%;
}

footer{
padding:2% 0;
background:linear-gradient(180deg, rgb(224, 103, 186), rgb(114, 41, 179));
}
footer .toho{
margin:0 auto 0 auto;
width:8%;
}
footer p, footer a{
margin-top:1%;
font-size:0.7rem;
color:#fff;
}
footer .banner div {
display: inline-block;
margin: 2% 0.5% 0 0.5%;
width: 12%;
}

.mobile{
display:none;
}
.mobile_inline{
display:none;
}

/*swiper*/
.swiper-wrapper {
transition-timing-function: linear;
}
.swiper-slide {
width: 26%;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 1%;
right:1%;
width: 100px;
height: 123px;
background: url(images/menu_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}
#cboxOverlay {
opacity: 0.8 !important;
}


@media (max-width: 639px) {
#loaderIcon{
width: 38%;
}
.loaderFloat {
--amplitude: 1.2vw;   /* 上下の移動幅 */
}

#container{
overflow:hidden;
}

#menuBtn {
width:17%;
}

#menu .logo{
width:85%;
}
#menu .btn{
width:85%;
}
#menu .btn img{
margin-top:4%;
}
#menu .sns{
margin:4% auto 0 auto;
width:85%;
}

#main .logo {
top: 66%;
right:unset;
left: 50%;
transform:translateX(-50%);
width: 70%;
}
#main .roadshow{
position:absolute;
top:82%;
right:unset;
left:50%;
transform:translateX(-50%);
width: 52%;
}
#main .catch {
top: 1%;
left: unset;
right: 0%;
width: 8%;
}
#main .sns{
position:absolute;
bottom:unset;
right:unset;
top:90%;
width:85%;
}
#main .icon{
position:absolute;
right:1%;
bottom:9%;
width:16%;
}

#gradation{
padding:4% 0 20% 0;
background:linear-gradient(180deg, #edb29a 10%, rgb(205, 124, 77) 50%);
}
#gradation .credit{
margin:0 auto;
width:96%;
opacity:0;
}
#gradation .banner{
margin:2% auto 0 auto;
width: 80%;
}
#gradation .banner img{
margin:2% auto 0 auto;
width: 100%;
}
#gradation .mvtc{
margin:4% auto 0 auto;
width: 88%;
}
#gradation .mvtc div{
display:inline-block;
margin:0 1%;
width:44%;
}

#eizo{
}
#eizo .content{
width:96%;
}
#eizo h2{
margin-top:10%;
width: 77%;
}
#eizo h2::before,#ohanashi h2::before,
#eizo h2::after,#ohanashi h2::after{
--amplitude: 2.8vw;   /* 上下の移動幅 */
--duration: 2.8s;    /* 往復の所要時間 */
}
#eizo .eizoArea{
width: 94%;
}
#eizo .btn{
margin:2% auto 0 auto;
width: 100%;
}
#eizo .btn img{
width:45%;
}

#ohanashi .catch {
top: 4%;
width: 94%;
}
#ohanashi .series{
top:7%;
width:12%;
}
#ohanashi #cut_0{
top:14%;
}
#ohanashi h2 {
top:22%;
width: 77%;
}
#ohanashi #text_0{
top:26.5%;
width:94%;
}
#ohanashi #cut_1{
top:84%;
}
#ohanashi #text_1{
top:76.5%;
}
#ohanashi #text_2 {
top: 89%;
width: 68%;
}
#cloud_2 .oshiridama_0 {
top: 18%;
left: 48%;
transform: translateX(-50%);
width: 100%;
}
#cloud_2 .oshiridama_1{
top:20%;
left: 48%;
width:38%;
}

#link ul{
display:block;
width:98%;
}
#link li{
display:block;
}
#link li:nth-of-type(1){
width:100%;
}
#link li:nth-of-type(2){
width:100%;
}
#link p{
font-size:0.6rem;
}
#link .btn{
text-align:center;
}
#link .btn img{
display:inline-block;
margin:1.5% 0.5% 0 0.5%;
width:44%;
}

footer{
padding:4% 0;
}
footer .toho{
margin:1% auto 0 auto;
width:25%;
}
footer p, footer a{
margin-top:2%;
font-size:0.6rem;
}
footer .banner div {
margin: 4% 0.5% 0 0.5%;
width: 30%;
}

.pc{
display:none;
}
.mobile{
display:block;
}
.mobile_inline{
display:inline;
}

/*swiper*/
.swiper-slide {
width: 38%;
}

/*colorbox*/
#cboxClose {
width: 15%;
/*height: 40px;*/
}
}