@charset "UTF-8";

/* ==================================================================
CSS information
style info :「INDEX」 用
================================================================== */


/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { width: 100%; min-height: 833px; position: relative; background: #FFF; }
#mv-inner {}


#mainvisual { position: relative; width: 100%; height: auto; }
#mainvisual:before { content: ""; display: block; padding-top: 52.0625%; }
#mv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


#visual { width: 100%; height: auto; position: absolute; top: 0; left: 50%; margin-left: -800px; z-index: 0;}
@media screen and (min-width: 1601px) {
#visual { width: 100%; height: auto; position: relative; top: 0; left: inherit; margin-left: inherit; z-index: 0;}
#visual img { width: 100%; height: auto;}
}

.nojs { display: none;}


/* #mainlogo
-------------------------------------------------------- */
#mainlogo { position: absolute; top: 40px; left: 50%; margin-left: -350px; z-index: 1; text-align: center; }
#mainlogo img { position: relative;}

#bnr { position: absolute; bottom: 12px; left: 50%; margin-left: -100px; z-index: 2; text-align: center; width: 196px; height: 170px;}
#bnr .btn { position: relative;}
#bnr .light1 { position: absolute; top: -10px; left: 20px; opacity: 0; z-index: 1;}
#bnr .light2 { position: absolute; bottom: -20px; right: -30px; opacity: 0; z-index: 2;}
#bnr .light3 { position: absolute; bottom: -50px; left: -30px; opacity: 0; z-index: 3;}


#infobox { position: absolute; bottom: 12px; right: 20px; z-index: 3; text-align: center; width: 344px; height: 256px; background: url(../_img/index/infobox_bg.png) 0 0 no-repeat;}
#infobox .bnr01 { margin-top: -5px; float: left; margin-bottom: 10px;}
#infobox .bnr02 { margin-bottom: 10px;}
#infobox .bnr03 { margin-top: -5px; float: left; margin-bottom: 10px;}
#infobox .btn_movie { position: relative; z-index: 4; text-align: center; width: 324px; height: 125px; margin-left: 10px; clear:both;}
#infobox .btn_movie p { position: absolute; display: block; width: 148px; top: 31px; left: 10px;}
#infobox .btn_movie .v1 { left: 10px;}
#infobox .btn_movie .v2 { left: 166px;}




/* --------------------------------------------------------
#spec
-------------------------------------------------------- */
#spec { width: 100%; position: relative; background: #2d1407; padding: 14px 0; }


#spec .spec-box { position: relative; width: 906px; margin: 0 auto; }
#spec .spec-box .btnset { position: absolute; top: 0; left: 0;}
#spec .spec-box .btnset li { position: absolute;}
#spec .spec-box .btnset .cero { top: 54px; left: 95px;}
#spec .spec-box .btnset .line_v { top: 0px; left: 648px;}
#spec .spec-box .btnset .btn_detail { top: 0px; left: 393px;}
#spec .spec-box .btnset .btn_support { top: 33px; left: 393px;}
#spec .spec-box .btnset .btn_twitter { top: 0px; left: 665px;}
#spec .spec-box .btnset .btn_theme { top: 34px; left: 665px;}
#spec .spec-box .btnset .btn_guide { top: 61px; left: 534px;}


/* ----------------------------
   eshop バナー
---------------------------- */
.bnr-eshop-sale{
 width: 100%;
 background: url(../_img/index/bnr_eshop_bg.png);
 position: relative;
 z-index: 10;
}
.bnr-eshop-sale::before{
 content: "";
 display: block;
 width: 100%;
 height: 2px;
 background: #FFF;
 left: 0;
 bottom: 0;
 position: absolute;
}
.bnr-eshop-sale a{
 display: block;
 max-width: 960px;
 margin: 0 auto;
 width: 70%;
}
.bnr-eshop-sale a img{
 max-width: 960px;
 width: 100%;
 height: auto;
}
.no-touchevents .bnr-eshop-sale a{
 -webkit-transition: opacity 0.15s linear;
 transition: opacity 0.15s linear;
}
.no-touchevents .bnr-eshop-sale a:hover{
 opacity: 0.85;
}