*{
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: #7CB9B6;
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); }
}

#menuBtn{
position:fixed;
top:0;
right:0;
width:9%;
cursor:pointer;
z-index:998;
}
#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:30%;
}
#menu .btn img{
margin-top:2%;
width:100%;
}
#menu .sns{
margin:2% auto 0 auto;
width:30%;
}
#menu .sns img{
display:inline-block;
width:18%;
}

#main{
position:relative;
}
#main .front {
position:absolute;
top:0;
left:0;
opacity:0;
}
#main .logo{
position:absolute;
top:1%;
left:0;
width:31%;
}
#main .roadshow{
position:absolute;
top:12%;
left:2%;
width:27%;
}
#main .catch{
position:absolute;
top:3%;
left:50%;
transform:translateX(-50%);
width:10%;
}
#main .sns{
position:absolute;
bottom:13%;
right:2%;
width:31%;
}
#main .sns img{
display:inline-block;
width:18%;
}
#main .banner{
position:absolute;
bottom:2%;
left:50%;
transform:translateX(-50%);
width: 25%;
}

#info_eizo_bg{
padding:0 0 4% 0;
background: linear-gradient(180deg, rgb(86, 227, 222), rgb(0, 150, 180));
}
#information p.credit .small{
font-size:0.8rem
}
#information p.credit a{
color:#000;
}
#information .mvtc{
margin:3% auto 0 auto;
}
#information .mvtc div{
display:inline-block;
margin:0 2%;
width:20%;
}

h2{
position:relative;
display: block;
margin: 0 auto 0 auto;
width: 38%;
font-size: 0;
}
#eizo{
margin-top:4%;
}
#eizo .content{
margin:0 auto;
width:70%;
}
#eizo h2{
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%;
}

#ohanashi{
background:
url(images/bg_wave_l.png) 0% 0% repeat-y,
url(images/bg_wave_r.png) 100% 0% repeat-y;
background-size: 20%, 20%;
}
#ohanashi .main{
position:relative;
}
#ohanashi .main .series{
position:absolute;
top:2%;
right:2%;
width:11%;
}
#ohanashi .main .catch{
position:absolute;
bottom:39%;
left:50%;
transform:translateX(-50%);
width:62%;
}
#ohanashi h2{
margin-top: -28%;
aspect-ratio:760/139;
background: url("images/ohanashi_midashi.png");
background-size: 100%;
}
#ohanashi .textArea{
position:relative;
margin:2% auto 0 auto;
width:64%;
z-index:1;
}
#ohanashi .middle{
padding: 3% 0 12% 0;
background:url(images/ohanashi_middle_pc.png) repeat-y;
background-size: contain;
}
#ohanashi .text > picture:nth-child(1) img{
width:88%;
}
#ohanashi .text >  picture:nth-child(2) img{
margin-top:3%;
width:88%;
}
#ohanashi .text >  picture:nth-child(3) img{
margin-top:3%;
width:78%;
}
#ohanashi .text >  picture:nth-child(4) img{
margin-top:3%;
width:78%;
}
#ohanashi .kumo_top{
position:absolute;
top: -2%;
left: 50%;
transform: translateX(-50%);
width: 124%;
}
#ohanashi .kumo_bottom{
position:absolute;
bottom:-2%;
left:50%;
transform:translateX(-50%);
width:105%;
}
#ohanashi .cut_bg{
position:relative;
margin-top:-5%;
z-index:0;
}
#ohanashi .cut{
position:absolute;
top:57%;
}

footer{
padding:2% 0;
background:
url(images/bg_wave_l.png) 0% 0% repeat-y,
url(images/bg_wave_r.png) 100% 0% repeat-y,
linear-gradient(180deg, rgb(224, 103, 186), rgb(114, 41, 179));
background-size: 20%, 20%;
}
footer .icon{
margin:0 auto;
width:16%;
}
footer .toho{
margin:1% 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: 17%;
}

/*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 {
right: unset;
left: 0;
width:17%;
}

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

#main .catch {
top: 4%;
width: 22%;
}
#main .logo {
top: 66%;
left: 50%;
transform:translateX(-50%);
width: 91%;
}
#main .roadshow{
position:absolute;
top:81%;
left:50%;
transform:translateX(-50%);
width: 81%;
}
#main .sns{
position:absolute;
bottom:unset;
right:unset;
top:91%;
left:50%;
transform:translateX(-50%);
width:80%;
}

#info_eizo_bg{
padding:4% 0 4% 0;
background: linear-gradient(180deg, rgb(44, 218, 218), rgb(0, 150, 180));
}
#information .banner{
margin:0 auto 0 auto;
width: 92%;
}
#information p.credit{
margin-top:8%;
font-size:0.8rem
}
#information p.credit .small{
font-size:0.7rem
}
#information .mvtc div{
display:inline-block;
margin:0 1%;
width:44%;
}

h2{
width: 80%;
}
#eizo .content{
width:96%;
}
#eizo h2{
margin-top:8%;
}
#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 .main .catch {
bottom: 30%;
width: 96%;
}
#ohanashi h2 {
margin-top: -15%;
}
#ohanashi .textArea{
margin:8% auto 0 auto;
padding:0 3%;
width:94%;
}
#ohanashi .middle{
padding: 10% 0 12% 0;
background:url(images/ohanashi_middle.png) repeat-y;
background-size: contain;
}
#ohanashi .text > picture:nth-child(2) img,
#ohanashi .text > picture:nth-child(3) img,
#ohanashi .text > picture:nth-child(4) img{
margin-top:8%;
}
#ohanashi .text  picture:nth-child(3) img{
width:92%;
}
#ohanashi .kumo_top{
top: -0.5%;
width: 100%;
}
#ohanashi .kumo_bottom{
bottom:-0.5%;
width:100%;
}
#ohanashi .cut_bg{
margin-top:-15%;
overflow:hidden;
}
#ohanashi .cut_bg > img{
margin-left:-60%;
width:220%;
}

footer{
padding:4% 0;
}
footer .icon{
width:38%;
}
footer .toho{
margin:1% auto 0 auto;
width:19%;
}
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;*/
}
}