@charset "utf-8";
a:hover{ text-decoration: none;}

.engl{ font-size: 44px; font-family: 'Kaushan Script', cursive;}

body{ background: #222;}
.Left.set{ top: 120px; opacity: 0; -webkit-transition:0.6s ease-in-out; -moz-transition:0.6s ease-in-out; -o-transition:0.6s ease-in-out; transition:0.6s ease-in-out;}
.Right.set{ top: 120px; opacity: 0; -webkit-transition:0.6s 0.4s ease-in-out; -moz-transition:0.6s 0.4s ease-in-out; -o-transition:0.6s 0.4s ease-in-out; transition:0.6s 0.4s ease-in-out;}
.Left.setView, 
.Right.setView{top: 0px; opacity: 1;}


::selection {
    background: #ffcc33;
    color: #000;
}



/*-------------------------
 #ito1
---------------------------*/
#ito1_1, 
#ito1_2,
#ito1_1 span, 
#ito1_1 div{-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}

#ito1_1{ width: 100%; height: 55%; position: fixed; left: 0; top: 0; z-index: 2; background:#ffcc33;}

#ito1_1 span, 
#ito1_1 div{ width:26%; height: auto; max-width: 320px; position: absolute; left: 50%; margin-left: -160px; bottom:-22px; z-index: 2;}

#ito1_1 span { background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover; opacity: 1;}
#ito1_1 div { background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover; z-index: 1; opacity: 0;}

body.tab-btn #ito1_1 span{opacity: 0;}
body.tab-btn #ito1_1 div{opacity: 1;}

#ito1_1 span.link3:hover { background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover; opacity: 1;
-webkit-animation: mvbk 3.0s linear ;
-moz-animation: mvbk 3.0s linear ;
-ms-animation: mvbk 3.0s linear ;
-o-animation: mvbk 3.0s linear ;
animation: mvbk 3.0s linear ;
}



@media screen and (max-width: 1200px) {
#ito1_1 span, 
#ito1_1 div{ bottom:-5%;}

}


@media screen and (max-width: 940px) {
#ito1_1 span, 
#ito1_1 div{ width:260px; max-width:auto; margin-left:-130px; bottom:-18px;}

}

@media screen and (max-width: 600px) {
#ito1_1{ height: 50%;}

}












@keyframes mvbk {
0%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
20%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
21%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
40%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
41%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
60%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
61%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
80%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
81%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
100%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
}
@-webkit-keyframes mvbk {
0%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
20%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
21%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
40%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
41%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
60%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
61%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
80%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
81%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
100%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
}
@-moz-keyframes mvbk {
0%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
20%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
21%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
40%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
41%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
60%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
61%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
80%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
81%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
100%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
}
@-ms-keyframes mvbk {
0%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
20%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
21%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
40%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
41%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
60%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
61%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
80%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
81%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
100%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
}
@-o-keyframes mvbk {
0%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
20%{ background: url(../../img/mv/03.png) 50% 50% no-repeat; background-size: cover;}
21%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
40%{ background: url(../../img/mv/04.png) 50% 50% no-repeat; background-size: cover;}
41%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
60%{ background: url(../../img/mv/05.png) 50% 50% no-repeat; background-size: cover;}
61%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
80%{ background: url(../../img/mv/02.png) 50% 50% no-repeat; background-size: cover;}
81%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
100%{ background: url(../../img/mv/01.png) 50% 50% no-repeat; background-size: cover;}
}









#ito1_1 span a.f, 
#ito1_1 span a.i{ width: 60%; position: absolute; max-width: 200px; transition:0.6s -webkit-transition:0.6s ease-in-out; -moz-transition:0.6s ease-in-out; -o-transition:0.6s ease-in-out; transition:0.6s ease-in-out; opacity: 0; z-index: 1;}

#ito1_1 span.link1 a.a1, 
#ito1_1 span.link1 a.a2{ opacity: 1; z-index: 10;}

#ito1_1 span.link2 a.b1, 
#ito1_1 span.link2 a.b2{ opacity: 1; z-index: 10;}

#ito1_1 span.link3 a.c1, 
#ito1_1 span.link3 a.c2{ opacity: 1; z-index: 10;}

#ito1_1 span.link4 a.d1, 
#ito1_1 span.link4 a.d2{ opacity: 1; z-index: 10;}

#ito1_1 span.link5 a.e1, 
#ito1_1 span.link5 a.e2{ opacity: 1; z-index: 10;}












#ito1_1 span a.f{ top: 20%; left:-15%; 
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
}


#ito1_1 span a.i{ top: 16%; right: -15%;
transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
}

#ito1_1 span:hover a.f, 
#ito1_1 span:hover a.i{
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);}



#ito1_1 span:hover a.f:hover{
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

#ito1_1 span:hover a.i:hover{
transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
}




@media screen and (max-width: 600px) {
#ito1_1 span a.f{ top: 30%; left:-25%; }
#ito1_1 span a.i{ top: 30%; right: -25%;}
}
























#ito1_1 span a img{ position: relative; z-index: -100; width: 100%; height: auto;}
#ito1_2{ width: 100%; height: 45%; position: fixed; left: 0; bottom: 0; z-index: 1; background:#e40683;}


body.tab-btn #ito1_1{ top: -25%;}
body.tab-btn #ito1_2{ height: 75%;}

body.tab-btn #ito1_1 div { bottom:-5px;}


/**/
#pagemenu{ width: 360px; height: 200px; padding: 10px 0; border: solid 1px #fff; position: fixed; top:65%; left: 50%; margin: 0 0 0 -180px; z-index: 100; border-radius: 8px;}

#pagemenu li{ width: 100%; padding: 0 12% 0 18%; font-size: 18px; line-height: 44px; color: #fff; position: relative; cursor: pointer;}
#pagemenu li::before{content: "▶"; position: absolute; top: 50%; margin-top: -24px; left:30px; font-size:16px; display: none;}
#pagemenu li:hover::before, 
#pagemenu li.view::before{display: block;}


.txtD{width: 360px; position: fixed; top:65%; left: 50%; margin: -40px 0 0 -180px; z-index: 100; border-radius: 8px; color: #fff; text-align: center; font-weight: bold; font-size: 18px;}




@media screen and (max-width: 700px) {
#pagemenu{ top:58%; height: 180px;}
.txtD{ top: 58%; font-size: 16px; margin:-34px 0 0 -180px; }
#pagemenu li{ font-size: 16px; line-height: 40px;}
}
@media screen and (max-width: 600px) {
#ito1_2{ height: 50%;}
}

@media screen and (max-width: 520px) {
#pagemenu{ width: 320px; margin: 0 0 0 -160px;}
.txtD{ width: 320px; margin: -34px 0 0 -160px;}
#pagemenu li::before{margin-top: -20px; }
}















/*-------------------------
 .box
---------------------------*/
.box{ width: 100%; height: 100%; position: fixed; top: 100vh; left: 0%; z-index: 200; overflow-y: scroll; overflow-x: hidden; -webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}


.box.view{ top: 0;}
.inner{ width: 90%; min-height:90%; float: left; margin: 10% 5% 0; padding: 0 50px 50px; background: #fff; border-radius: 30px 30px 0 0; -moz-border-radius: 30px 30px 0 0; -webkit-border-radius: 30px 30px 0 0; -o-border-radius: 30px 30px 0 0; -ms-border-radius: 30px 30px 0 0;}


.inner .tab-Close{ width: 100px; height: 100px; position: fixed; left: 50%; top: -300px; cursor: pointer; margin-left: -50px; z-index: 10000; transition:0.6s -webkit-transition:0.6s ease-in-out; -moz-transition:0.6s ease-in-out; -o-transition:0.6s ease-in-out; transition:0.6s ease-in-out; opacity: 0;}
body.tab-btn .inner .tab-Close{ top:20px; opacity: 1;}

.inner .tab-Close img{ width: 100%; height: auto;}


@media screen and (max-width: 980px) {
.inner{ width: 92%; margin: 10% 4% 0; padding: 0 3% 50px; border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0;}
}

@media screen and (max-width:700px) {
.inner{ padding: 30px 2% 50px; border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0;}

body.tab-btn .inner .tab-Close{ top:-0px;}

}


/*-------------------------
 .ito2
---------------------------*/
.ito2 {}
.ito2 .inner{}
.ito2 .inner p, 
.ito2 .inner ul, 
.ito2 .inner dl { width: 94%; max-width: 800px; margin:auto;}

.ito2 .inner dl dt, 
.ito2 .inner dl dd{ width: 100%; float: left;}


.ito2 .inner p{ padding-top: 40px; margin-bottom: 10px; font-size: 60px; line-height: 1.2em; font-weight: bold;}
.ito2 .inner p img{ width: 100%; height: auto; max-width: 900px; margin: 5px 0 15px;}
.ito2 .inner ul{}
.ito2 .inner ul li{ width: 100%; float: left; font-size: 26px; margin:0 0 60px; padding-left: 50px; position: relative;}
.ito2 .inner ul li span{ position: absolute; left: 0px; top: 10px; width: 30px; line-height: 30px; background:#ffcc33; text-align: center; font-size: 22px; display: block; border-radius: 100%; -moz-border-radius: 100%;
-webkit-border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
}
.ito2 .inner dl{ background:#ffcc33; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius:10px; -ms-border-radius: 10px;}
.ito2 .inner dl dt{ font-size: 28px; font-weight: bold; margin-bottom: 5px;}
.ito2 .inner dl dd{ font-size: 20px;}
.ito2 .inner dl dd.p{font-size: 18px; background: #fff; padding:10px 15px; margin-top: 15px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius:10px; -ms-border-radius: 10px;}



@media screen and (max-width: 980px) {
.ito2 .inner p{ font-size:50px;}
}
@media screen and (max-width: 800px) {
.ito2 .inner p{ font-size:40px;}
.ito2 .inner dl dt{ font-size: 24px;}
.ito2 .inner ul li, 
.ito2 .inner dl dd{ font-size: 20px;}
.ito2 .inner ul li span{font-size: 18px;}
}

@media screen and (max-width: 600px) {
.ito2 .inner p{ font-size:6vw;}
.ito2 .inner ul li{ margin:0 0 30px; font-size: 18px;}
.ito2 .inner dl dt{ font-size: 20px;}
.ito2 .inner dl dd, 
.ito2 .inner dl dd.p{ font-size: 14px;}
.ito2 .inner p img{ margin: 10px 0 15px;}

}

/*-------------------------
 .ito3
---------------------------*/
.ito3 {}
.ito3 .inner{ padding-top: 50px;}

.ito3 .inner > dl { width: 96%; max-width: 1200px; margin:auto;}

.ito3 .inner > dl > dt{ width: 100%; float: left; text-align: center; margin: 40px 0 30px;}
.ito3 .inner > dl > dt span{ color: #fff; padding: 5px 45px; display: inline-block; background: #e40683; font-size:30px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius:12px; -ms-border-radius: 12px;}

.ito3 .inner > dl > dd{ width: 48%; margin-bottom: 40px; display: inline-block;}
.ito3 .inner > dl > dd.s{ float: right;}
.ito3 .inner > dl > dd.f{ float:left;}



.ito3 .inner > dl > dd .subtit{width: 100%; float: left; text-align: center;}

.ito3 .inner > dl > dd .subtit span{ padding: 3px 30px; margin-bottom: 12px; display: inline-block; background: #dfdfdf; font-size:15px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius:6px; -ms-border-radius: 6px;}


/**/
.ito3 .inner > dl > dd ul{ width: 100%; float: left;}
.ito3 .inner > dl > dd ul li{ width: 49%; display: inline-block; cursor: pointer;}

.ito3 .inner > dl > dd ul li *{-webkit-transition:0.3s ease-in-out; -moz-transition:0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;}

.ito3 .inner > dl > dd ul li:nth-child(odd){ float: left;}
.ito3 .inner > dl > dd ul li:nth-child(even){ float:right;}
.ito3 .inner > dl > dd ul li span{ width: 100%; height: auto; margin-bottom: 5px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius:8px; -ms-border-radius: 8px; overflow: hidden; background: #000; display: block;}



.ito3 .inner > dl > dd ul li img{ width: 100%; height: auto;}
.ito3 .inner > dl > dd ul li:hover img{ opacity: 0.5;}
.ito3 .inner > dl > dd ul li b{ font-size: 18px; display: block; line-height: 1.4em; height:70px; text-align: center;}

.ito3 .inner > dl > dd ul li:hover b{ text-decoration: underline; color: #e40683;}

@media screen and (max-width: 980px) {
.ito3 .inner > dl > dt span{ width: 100%; font-size:22px;}
.ito3 .inner > dl > dd .subtit span{ width: 100%; font-size:16px; padding: 5px 0;}
.ito3 .inner > dl > dd{ width: 100%; margin-bottom: 20px;}
.ito3 .inner > dl > dd.s{ float: left;}
.ito3 .inner > dl > dd ul li b{ height:auto; }

}


@media screen and (max-width: 640px) {
.ito3 .inner > dl > dd ul li{ width: 100%; margin-bottom: 60px;}
.ito3 .inner > dl > dt span{ font-size:18px;}

}


@media screen and (max-width: 480px) {
.ito3 .inner > dl > dd ul li{ margin-bottom: 40px;}
}





/**/
body.tab-btn2{ height: 100%; overflow: hidden; display: block;}

body.tab-btn2 .ito3{ z-index: 1000000000;}




.ito3 .inner dl dd .sonobox{
display: none;
width: 100%; height: 100%; position: fixed; z-index: 1000010000100001; background: #fff; left: 0%; top: 0%; overflow-x: hidden; overflow-y: auto;
}
.ito3 .inner dl dd .sonobox.view{ display: block;}

.ito3 .inner dl dd .sonobox div{ width: 100%; margin: 0 auto; max-width: 700px; overflow-x: hidden; overflow-y: auto;}


.ito3 .inner dl dd .sonobox div dl, 
.ito3 .inner dl dd .sonobox div dl dt, 
.ito3 .inner dl dd .sonobox div dl dd{ width: 100%; float:left;}

.ito3 .inner dl dd .sonobox div dl{ padding-bottom: 140px;}
.ito3 .inner dl dd .sonobox div dl dt{ width: 100%; float: left; text-align: center; margin: 40px 0 30px;}


.ito3 .inner dl dd .sonobox div dl dt span{ color: #fff; padding: 5px 30px; display: inline-block; background: #e40683; font-size:30px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius:12px; -ms-border-radius: 12px;}


.ito3 .inner dl dd .sonobox div dl dd{ margin-bottom: 50px;}

.ito3 .inner dl dd .sonobox div dl dd img{ width: 50%; float: left; display: inline-block;}
.ito3 .inner dl dd .sonobox div dl dd span{ width: 45%; float: right; display: inline-block; font-size: 20px; line-height: 1.4em; margin-bottom: 15px;}
.ito3 .inner dl dd .sonobox div dl dd span.gu{ margin-bottom: 20px; color: #e40683;}

.ito3 .inner dl dd .sonobox div .tab-Close2{ width: 100%; line-height: 80px; text-align: center; position: fixed; left: 0; bottom: 0px; background:#ffcc33; font-size: 24px; font-weight: bold; cursor: pointer;}
.ito3 .inner dl dd .sonobox div .tab-Close2:hover{ color: #fff; background: #000;}


@media screen and (max-width: 800px) {
.ito3 .inner dl dd .sonobox div dl dt span{ font-size: 26px;}
.ito3 .inner dl dd .sonobox div dl{ width: 94%; margin: 0 3%;}
}

@media screen and (max-width: 600px) {
.ito3 .inner dl dd .sonobox div dl dt span{ font-size: 22px;}

.ito3 .inner dl dd .sonobox div dl dd img{ width: 100%; margin: 20px 0 15px;}
.ito3 .inner dl dd .sonobox div dl dd span{ width: 100%; padding: 0 3%;}

}
@media screen and (max-width: 480px) {
.ito3 .inner dl dd .sonobox div dl dt span{ font-size: 18px;}
.ito3 .inner dl dd .sonobox div dl dd span{ font-size: 16px;}
.ito3 .inner dl dd .sonobox div .tab-Close2{ opacity: 0.9;}

}






/*-------------------------
 .ito2
---------------------------*/
.ito4 {}
.ito4 .inner{ padding-top: 50px;}
.ito4 .inner dl { width: 94%; max-width: 900px; margin:auto;}

.ito4 .inner dl dt, 
.ito4 .inner dl dd{ width: 100%; float: left; font-size: 20px; padding-left: 20px; position: relative;}

.ito4 .inner dl dt{ font-weight: bold; padding: 10px auto; border-bottom: dotted 1px #ccc; color: #e40683;}
.ito4 .inner dl dd{ margin: 10px 0 30px;}

.ito4 .inner dl dt::before, 
.ito4 .inner dl dd::before{ width: 30px; line-height: 30px; text-align: center; display: block; position: absolute; left:-10px; top: -2px;} 

.ito4 .inner dl dt::before { content: "Q";}
.ito4 .inner dl dd::before { content: "A";}


@media screen and (max-width: 600px) {
.ito4 .inner dl dt, 
.ito4 .inner dl dd, 
.ito4 .inner dl dt::before, 
.ito4 .inner dl dd::before{ font-size: 16px;}

}











.snsBtn{ display: none; 
position: fixed; right: 20px; bottom: 20px; z-index: 10000; border-radius: 8px; border-bottom: solid 8px #0a70af; background:#0a70af;}
.snsBtn:hover{border-bottom: solid 0px #0a70af; margin-top: 8px;}
.snsBtn img{ width: 100px; height: auto; border-radius: 8px; overflow: hidden;}


@media screen and (max-width: 500px) {
.snsBtn{ right: 10px; bottom: 10px;}
.snsBtn img{ width: 70px; }
}