@charset "utf-8";
/*
*{letter-spacing:1.5px; font-family:'Kosugi Maru', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;}
*/
*{letter-spacing:1.5px; font-family:'Kosugi', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;}


a:hover{ text-decoration: none;}

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

.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: #f0f0f0;
    color: #000;
}



/*-------------------------
 #ltd
---------------------------*/
#mv{height:100vh; background: #fff; margin-bottom: 100px;}
#mv h1{ height: 10vh; text-align: center; display: table;}
#mv h1 b{ display: table-cell; vertical-align:middle; font-size: 20px; letter-spacing: 6px;}

#ltd { height: 86vh; width: 96%; margin: 0 2%;}
#ltd .image{ width:240px; height: 240px; position: absolute; left: 50%; top: 50%; margin: -120px 0 0 -120px; z-index: 1000000;}
#ltd .image.pc{ display: block;}
#ltd .image.sp{ display: none;}

#ltd .box { width: 50%; height: 50%; position: absolute;}
#ltd .box::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.7); z-index: 10000;}
#ltd .box.now::before{ content: none; display: none;}

#ltd .box#b1{ left: 0; top: 0;}
#ltd .box#b2{ right: 0; top: 0;}
#ltd .box#b3{ left: 0; bottom: 0;}
#ltd .box#b4{ right: 0; bottom: 0;}

#ltd .box dl{ width: 80%; float: left; margin: 5% 10% 0; z-index: 100; position: relative;}
#ltd .box dl *{ color: #ddd; text-align: center;}
#ltd .box.now dl *{ color: #fff;}
#ltd .box dl > *{ width: 100%; float: left;}

#ltd .box dl dt{ font-weight: bold; line-height: 1.2em; padding: 5% 0 10px;}
#ltd .box#b1.now dl dt{
text-shadow:2px 2px 0 #019fe8, -2px -2px 0 #019fe8,
              -2px 2px 0 #019fe8, 2px -2px 0 #019fe8,
              0px 2px 0 #019fe8,  0 -2px 0 #019fe8,
              -2px 0 0 #019fe8, 2px 0 0 #019fe8;
}
#ltd .box#b2.now dl dt{
text-shadow:2px 2px 0 #fe2820, -2px -2px 0 #fe2820,
              -2px 2px 0 #fe2820, 2px -2px 0 #fe2820,
              0px 2px 0 #fe2820,  0 -2px 0 #fe2820,
              -2px 0 0 #fe2820, 2px 0 0 #fe2820;
}
#ltd .box#b3.now dl dt{
text-shadow:2px 2px 0 #e3216a, -2px -2px 0 #e3216a,
              -2px 2px 0 #e3216a, 2px -2px 0 #e3216a,
              0px 2px 0 #e3216a,  0 -2px 0 #e3216a,
              -2px 0 0 #e3216a, 2px 0 0 #e3216a;
}
#ltd .box#b4.now dl dt{
text-shadow:2px 2px 0 #295eaa, -2px -2px 0 #295eaa,
              -2px 2px 0 #295eaa, 2px -2px 0 #295eaa,
              0px 2px 0 #295eaa,  0 -2px 0 #295eaa,
              -2px 0 0 #295eaa, 2px 0 0 #295eaa;
}






#ltd .box dl dt > span{ display: block; font-size: 48px;}
#ltd .box dl dt > span span{ font-size: 24px; vertical-align: text-top; line-height:64px; padding:10px 0 0 ;}

#ltd .box dl dd{ border-radius: 10px; padding: 1% 5%;}


#ltd .box dl dd span{ display: block; font-size: 20px;}


#ltd .box.now dd{ background:rgba(255,255,255,0.4);}
#ltd .box.now dd span{ color: #000;}

#ltd .box .bk{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; -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;}
#ltd .box#b1 .bk{ background: url(../../img/bk/bk1.jpg) no-repeat 50% 20%; background-size: 100% auto; opacity:1;}
#ltd .box#b2 .bk{ background: url(../../img/bk/bk2.jpg) no-repeat 50% 20%; background-size: 100% auto; opacity:1;}
#ltd .box#b3 .bk{ background: url(../../img/bk/bk3.jpg) no-repeat 50% 60%; background-size: 100% auto; opacity:1;}
#ltd .box#b4 .bk{ background: url(../../img/bk/bk4.jpg) no-repeat 50% 10%; background-size: 100% auto; opacity:1;}


#ltd .box#b1.now:hover .bk{ background: url(../../img/bk/bk1.jpg) no-repeat 50% 20%; background-size: 110% auto; opacity: 0.86;}
#ltd .box#b2.now:hover .bk{ background: url(../../img/bk/bk2.jpg) no-repeat 50% 20%; background-size: 110% auto; opacity: 0.86;}
#ltd .box#b3.now:hover .bk{ background: url(../../img/bk/bk3.jpg) no-repeat 50% 60%; background-size: 110% auto; opacity: 0.86;}
#ltd .box#b4.now:hover .bk{ background: url(../../img/bk/bk4.jpg) no-repeat 50% 10%; background-size: 110% auto; opacity: 0.86;}


#ltd .box a{ display: none;}
#ltd .box.now a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10000; display: block;}




@media screen and (max-width: 1200px) {
#ltd .box dl dt > span{ display: block; font-size: 4vw;}
#ltd .box dl dt > span span{ font-size: 24px; line-height:6vw;}
#ltd .box dl dd span{font-size: 1.6vw;}
}
@media screen and (max-width: 980px) {
#ltd .box#b1 .bk{ background: url(../../img/bk/bk1.jpg) no-repeat 50% 20%; background-size: cover;}
#ltd .box#b2 .bk{ background: url(../../img/bk/bk2.jpg) no-repeat 50% 20%; background-size: cover;}
#ltd .box#b3 .bk{ background: url(../../img/bk/bk3.jpg) no-repeat 50% 60%; background-size: cover;}
#ltd .box#b4 .bk{ background: url(../../img/bk/bk4.jpg) no-repeat 50% 10%; background-size: cover;}
}

@media screen and (max-width: 900px) {
#mv h1 b{ font-size:14px; letter-spacing: 2px; padding-left:25%;}

#ltd .image{ width:140px; height: 140px; left:-2%; top:-10vh; margin:0 0 0 0;}
#ltd .image.pc{ display: none;}
#ltd .image.sp{ display: block;}

#ltd .box { width: 100%; height: 25%; position: absolute;}
#ltd .box#b1{ left: 0; top: 0;}
#ltd .box#b2{ left: 0; right: auto; top: 25%;}
#ltd .box#b3{ left: 0; bottom: auto; top: 50%;}
#ltd .box#b4{ left: 0; right: auto; bottom: auto; top: 75%;}

#ltd .box dl{ width: 100%; margin:0;}
#ltd .box dl dt{ font-weight: bold; line-height: 1em; padding: 4% 0 0;}
#ltd .box dl dt > span{ display: block; font-size: 5vh;}
#ltd .box dl dt > span span{ font-size: 2vh; line-height:7.4vh;}


#ltd .box.now dd{ background: none; text-align: center;}
#ltd .box.now dd span{ display: inline-block; margin: 0 auto; padding: 5px 30px; border-radius: 10px; background:rgba(255,255,255,0.4); color:#fff;}
#ltd .box#b1.now dd span{ background: #019fe8;}
#ltd .box#b2.now dd span{ background: #fe2820;}
#ltd .box#b3.now dd span{ background: #e3216a;}
#ltd .box#b4.now dd span{ background: #295eaa;}

#ltd .box dl dd span.pc{ display: none;}
#ltd .box dl dd span{font-size: 3.2vw;}


}




@media screen and (max-width: 700px) {
#mv h1 b{letter-spacing: 0px;}
#ltd .image{ width:110px; height: 110px;}
#ltd .box::before{ background: rgba(0,0,0,0.8);}

}












/*-------------------------
 #pre
---------------------------*/
#pre{height:100vh; background: #fff; overflow: hidden;}

#pre > *{ height: 100%; position: absolute; top: 0;}

#pre .right{ width: 50%; right: 0;}
#pre .right .inner{ width: 90%; float: left; margin:5% 5% 0;}
#pre .right .inner > *{ width: 100%; float: left;}
#pre .right .inner .common{ margin-bottom: 10%; }
#pre .right .inner .common span{font-size: 20px; line-height: 5.0vh; letter-spacing: 3px;}

#pre .right .inner h2{ font-size: 30px;}
#pre .right .inner h2 a{ text-decoration: none;}
#pre .right .inner h2 a:hover{ text-decoration:underline;}
#pre .right .inner h2 span{ display: block; margin-bottom: 15px; font-size: 20px;}
#pre .right .inner h2 span a{ }

#pre .right .inner .info{}
#pre .right .inner .info span{ font-size: 20px; line-height: 5.0vh;}

/**/
#pre .left{ width:50%; min-height: 100vh; left: 0; display: block; bottom: 0; right: 0; background: #000; position: relative;}
#pre .left span{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; bottom: 0; right: 0;}
#pre .left .cBK2{background: url(../../img/bk/bk2.jpg) no-repeat 50% 20%; background-size:auto 100%; opacity: 0.7;}
#pre .left .cBK3{background: url(../../img/bk/bk3.jpg) no-repeat 50% 20%; background-size:auto 100%; opacity: 0.7;}
#pre .left .cBK4{background: url(../../img/bk/bk4.jpg) no-repeat 50% 20%; background-size:auto 100%; opacity: 0.7;}



#pre .right .set{ display: block; padding-top: 10px; -webkit-transition:0.9s ease-in-out; -moz-transition:0.9s ease-in-out; -o-transition:0.9s ease-in-out; transition:0.9s ease-in-out; opacity:0;}

#pre .right .setView{ opacity: 1; padding-top: 0;}




@media screen and (max-width: 1400px) {
#pre .right .inner { margin:0 5% 0;}
#pre .right .inner .common span, 
#pre .right .inner .info span{ display: inline;}
#pre .right .inner .common span .pc, 
#pre .right .inner .info span .pc{ display: none;}
#pre .right .inner .common span{ line-height:4.0vh;}
}

@media screen and (max-width: 1200px) {
#pre .right .inner .common span{ line-height:3.4vh;}
}


@media screen and (max-width:960px) {
#pre{height:auto; min-height:100vh; margin-bottom: 80px;}
#pre .left{ width: 40%;}

#pre .right{ width: 60%; position: relative; float: right; height: auto;}
#pre .right .inner .common span, 
#pre .right .inner .info span{font-size:18px; line-height: 3vh;}

#pre .right .inner h2{ font-size: 30px;}
#pre .right .inner h2 span{ display: block; margin-bottom: 15px; font-size: 20px;}

}



@media screen and (max-width:750px) {
#pre .left{ width: 35%;}
#pre .right{ width: 65%;}

#pre .right .inner .common span, 
#pre .right .inner .info span{font-size:3.0vw; line-height:1.6em; letter-spacing: 1px;}

#pre .right .inner h2{ font-size:5vw; margin: 30px 0 0px;}
#pre .right .inner h2 span{}


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

#pre .right .inner .common span, 
#pre .right .inner .info span{font-size:3.4vw;}
}


















.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; }

}