spec@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*----------------------------------------
	style
----------------------------------------*/

/*----------------------------------------
	box
----------------------------------------*/


body{

-webkit-text-size-adjust: 100%;
-ms-interpolation-mode: bicubic;
background-color:#000;
color:#FFF;


}


#back_img{
    /*background:url(../images/back.jpg) top center no-repeat;*/
    /*background-attachment:fixed;*/
    background-color:#e90000;
    width:100%;
    height:100%;
    z-index:-600;

}

.last{
    z-index:-580;
}



#container{
    width:100%;
    max-width:908px;
    margin:0 auto;
}

#main{
    padding-bottom:25px;
    /*background:url(../images/background_under.jpg) bottom center no-repeat;*/
}


#shadow{
    width:100%;
    max-width:1000px;
    margin:0 auto;

    background:url(../images/shadow.png) repeat-y;
    background-size:contain;
}

/*----------------------------------------
	common_menu
----------------------------------------*/

#common_menu{
    width:100%;
    position:relative;
    background-image:url(../images/menu/menu_black_base.png);
    background-repeat:repeat;
    padding-top:47px;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.7);
    z-index:800;

}


#menu{
    height:55px;
    background-image:url(../images/menu/menu_red_base.png);
    background-repeat:repeat-x;
    width:100%;
    position:relative;
    z-index:810;
    }

#menu_box{
    width:100%;
    height:95px;
    display:block;
    position:relative;
    z-index:850;
    top:0;
}


.menu_logo{
    display:block;
    margin-top:4px;
    margin-left:22px;
    z-index:850;
}

.menu_sns{
    display: block;
    width: 300px;
    position: absolute;
    z-index: 850;
    right: 33px;
    top: 2px;
}

.menu_sns img{
    float:right;
    margin-left:15px;
}

.shop_link{
    float:right;
    margin-left:15px;
    margin-top:0px;
}

#menu_link{
    height: 46px;
    display: block;
    position: absolute;
    z-index: 850;
    left: 175px;
    bottom: 5px;
    border-left:1px solid #CCC;
}

#menu_link ul{


}

#menu_link li{
    float:left;
    border-right:1px solid #CCC;
    height:46px;
    display:inline-block;
}

#menu_link li img{
    display:block;
    z-index: 860;
}


#menu01{
    width:144px;
    height:46px;
    display:block;
    cursor:pointer;
    position:relative;
    background:url(../images/menu/menu01_n.png) no-repeat;
    z-index: 850;
}

#menu02{
    width:244px;
    height:46px;
    display:block;
    cursor:pointer;
    position:relative;
    background:url(../images/menu/menu02_n.png) no-repeat;
    z-index: 850;
}

#menu03{
    width:167px;
    height:46px;
    display:block;
    cursor:pointer;
    position:relative;
    background:url(../images/menu/menu03_n.png) no-repeat;
    z-index: 850;
}

#menu04{
    width:164px;
    height:46px;
    display:block;
    cursor:pointer;
    position:relative;
    background:url(../images/menu/menu04_n.png) no-repeat;
    z-index: 850;
}



#menu01_o{
    width:144px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu01_o.png) no-repeat;
    z-index: 850;

}

#menu02_o{
    width:244px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu02_o.png) no-repeat;
    z-index: 850;

}

#menu03_o{
    width:167px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu03_o.png) no-repeat;
    z-index: 850;

}

#menu04_o{
    width:164px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu04_o.png) no-repeat;
    z-index: 850;

}

#menu01_f{
    width:144px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu01_o.png) no-repeat;
    z-index: 850;

}

#menu02_f{
    width:244px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu02_o.png) no-repeat;
    z-index: 850;

}

#menu03_f{
    width:167px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu03_o.png) no-repeat;
    z-index: 850;

}

#menu04_f{
    width:164px;
    height:46px;
    display:block;
    cursor:pointer;
    position:absolute;
    top:0;
    left:0;
    background:url(../images/menu/menu04_o.png) no-repeat;
    z-index: 850;

}

.menu_new{
    position:absolute;
    display:inline_block;
    width:35px;
    top:0px;
    left:50%;
    margin-left:-18px;
    z-index:850;
    cursor:pointer;
}

.menu_update{
    position:absolute;
    display:inline_block;
    width:65px;
    top:0px;
    left:50%;
    margin-left:-33px;
    z-index:850;
    cursor:pointer;
}


/*----------------------------------------
	2nd page
----------------------------------------*/


#second_wrap{
    width:100%;
    max-width:950px;
    margin:-99px auto 0;
    background-image:url(../images/2nd/gold_back.jpg);
    background-repeat:repeat-y;
    background-position:center -20px;
    background-color:#000;
    height:100%;
    z-index:0
}

#content_base_top{
    background-image:url(../images/2nd/2nd_black_top.jpg);
    background-repeat:no-repeat;
    z-index:800;
    position:relative;
    display:block;
    width:90px;
    height:40px;
    margin:0 auto;
}

#content_base{
    background-image:url(../images/vita/vita_base_b.jpg);
    background-repeat:repeat-y;
    width:908px;
    position:relative;
    display:block;
    z-index:800;
    margin:-1px auto 0px;
    text-align:center;


}

#content_base_f{
    width:880px;
    position:relative;
    display:block;
    z-index:800;
    margin:0 auto 0px;
    text-align:center;
}

#second_base_btm{
    background:url(../images/2nd/2nd_black_base_foot.jpg) no-repeat;
    width:880px;
    height:120px;
    display:block;
    position:relative;
    margin-top:15px;
}


/*top アコーディオン*/

#top_topc_bnr dt{
    display:block;
    width:207px;
    height:53px;
    background:url(../images/top/prev_topic_bt.png) no-repeat;
    cursor:pointer;
    margin:15px auto 20px;
}

#top_topc_bnr dt.active{
    background:url(../images/top/hidden_topc_bt.png) no-repeat;
}


#top_topc_bnr dd{
    width:100%;
    margin-top:20px;
    max-width:868px;
    margin:0 auto;
    display:none;
    position:relative;
}


#top_topc_bnr img{
margin:8px 13px ;
float:left;
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5) inset;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5) inset;
-o-box-shadow: 5px 5px 5px rgba(0,0,0,0.5) inset;
-ms-box-shadow: 5px 5px 5px rgba(0,0,0,0.5) inset;
}


/*----------------------------------------
	material
----------------------------------------*/

#caption{
    text-align:center;
}


#footer{
    width:100%;
    height:152px;
    background:url(../images/foot_base.jpg) repeat-x;
    text-align:center;
    padding:35px 0 0;
}


/*----------------------------------------
	Switch
----------------------------------------*/

#content{ padding:40px 0; overflow:hidden;}
.content_inner{ width:920px; margin:0 auto 0; }
.content_inner2{ width:880px; margin:0 auto 0; position:relative;}

h2{ font-size:30px; text-align:center; display:block;width:740px; margin:0 auto 0;}
h2 img { width: 130px; margin-right:20px;}
h2 .table { display:table;}
h2 .td { display:table-cell; vertical-align:middle; font-size:40px;}

#device{ width:928px; height:717px; background:url('../images/switch/device.jpg');margin:20px auto 0;}

.readText{ padding:40px 0 80px; text-align:center;}
.readText h3{ font-weight:600; font-size:32px; text-align:center; padding-bottom:15px;}

#pickup{ color:#ddd;position:relative; z-index:1; padding: 200px 0;}
#pickup:before {
  content: '';
  position: absolute;
  display:block;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #ddd;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  z-index: -1;
  background-image:url('../images/switch/chara.png');
  background-size:2100px;
  background-position:center bottom;
  background-repeat:no-repeat;
}
#pickup:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 360px;
  margin: 3% -10% 0;
  background: #fff;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  z-index: -1;
}
#pickup h5{ color:#333;}
#pickup p{ color:#333;}
#pickup p .min { font-weight:400; color:#333; font-size:13px; line-height:1.3; display:block; padding:10px 0 0; line-height:1.6;}


.box { width: 410px; }
.box h5 { font-size:26px; color:#333; position:relative; display:block; padding: 0 0 20px 60px; font-weight:600; line-height:1.2;}
.box h5 span { font-size:18px; color:#333;}

.box.num1{ margin:-20px 0 210px; }

.box.num2{ margin: 0px 0 60px; }
.box.num3{ margin: 0px 0 80px; }

.box.num1 h5:before{ content:'1.'; color:#e90000; font-style:italic; display:inline; font-size:60px; position:absolute; top:-0; left:-10px; transform:scale(0.8,1);}
.box.num2 h5:before{ content:'2.'; color:#e90000; font-style:italic; display:inline; font-size:60px; position:absolute; top:-0; left:-10px; transform:scale(0.8,1);}
.box.num3 h5:before{ content:'3.'; color:#e90000; font-style:italic; display:inline; font-size:60px; position:absolute; top:-0; left:-10px; transform:scale(0.8,1);}

.box.num1 .img_photo { position:absolute; top:-190px; right: -30px; }

.btn_min { background-color:#fff; color:#e90000; padding:6px 20px; border-radius:4px; font-size:14px; display:inline-block; margin:20px 0 0; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); font-weight:400; }

#spec { margin:-90px auto 0; padding-bottom:40px; }
.spec_inner { width:800px; margin:0 auto 0;}
#spec .txt{ float:left; margin-left:40px;}
#spec .img_pack{ float:left; width:200px;}
.btn_reserve{ background-color:#fff; color:#e90000; padding:10px 50px; border-radius:4px; font-size:20px; display:inline-block; margin:20px 0 0; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); font-weight:600;}
#spec h5 { font-size:24px; font-weight:400; padding-bottom:10px;}
#spec li { display:table; padding-bottom:5px; }
#spec li .th { display:table-cell; width:160px; }



/*window*/
#wrapper_dlclist { background-color:#fff; color:#666;}
#wrapper_dlclist h2 { color:#666; font-size:28px; text-align:center; width:100%; padding-bottom:30px;color:#e90000;}
#wrapper_dlclist .inner{ padding:40px 30px; }
#wrapper_dlclist li {list-style:none; font-weight:600; font-size:16px; display:inline-block; padding:0 0 20px; color:#333;margin-before: 0em;}
#wrapper_dlclist span {display:inline; font-size:14px; padding-left:1em; color:#666;}
#wrapper_dlclist ul { display:block;}
#wrapper_dlclist h3 { font-size:20px; border-bottom:1px solid #666; margin:0 0 20px;}

.attention {width:900px;margin:0 auto 0; text-align:right; font-weight:400; font-size:12px; }

.off{color:#632208; padding:5px 16px; font-size:16px; margin-top:10px; background-color:#ffca00;border-radius:3px;line-height:1;}
.off .bold{color:#632208; font-weight:800; font-size:18px;}


.hide_notsp{display:none;}
.hide_notpc{display:inline;}


/*SP*/
.sp h2{ font-size:30px; text-align:center; display:block;width:100%; margin:0 auto 0;}
.sp h2 img { width: 240px;margin:0;}
.sp h2 .td { font-size:62px;text-align:left;line-height:1.3;}
.sp h2 .td:nth-child(2){padding-left:30px;}

.sp #device{margin-top:40px;}

.sp .readText h3{ font-size:60px; line-height:1.3; margin-bottom:30px;}
.sp .readText p{ font-size:35px; text-align:left; line-height:1.6;}


.sp .hide_notsp{display:inline;}
.sp .hide_notpc{display:none;}

.sp .box { width: 100%; }
.sp p { font-size:35px; }
.sp h5 {font-size:67px;padding-left:120px;}
.sp h5 span {font-size:40px;}

.sp .box.num1 h5:before{ content:'1.'; color:#e90000; font-style:italic; display:inline; font-size:140px; position:absolute; top:-0; left:-20px; transform:scale(0.8,1);}
.sp .box.num2 h5:before{ content:'2.'; color:#e90000; font-style:italic; display:inline; font-size:140px; position:absolute; top:-0; left:-20px; transform:scale(0.8,1);}
.sp .box.num3 h5:before{ content:'3.'; color:#e90000; font-style:italic; display:inline; font-size:140px; position:absolute; top:-0; left:-20px; transform:scale(0.8,1);}


.sp #pickup:before {
  content: '';
  position: absolute;
  display:block;
  top: 0;
  left: 0;
  width: 200%;
  height: 2600px;
  margin: 3% -40% 0;
  background: #ddd;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  z-index: -1;
  /*background-image:url('../images/switch/chara.png');*/
  background-size:2100px;
  background-position:center bottom;
  background-repeat:no-repeat;
}

.sp #pickup:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 1320px;
  margin: 3% -10% 0;
  background: #fff;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
  z-index: -1;
}

.sp .box.num1 .img_photo { position:relative;top:auto;left:auto; margin-top:40px; width:92%;}

.sp .box.num1{ margin:-40px 0 210px; }
.sp #pickup p .min { font-weight:400; color:#333; font-size:28px; line-height:1.3; display:block; padding:10px 0 0; line-height:1.6;}
.sp .btn_min { background-color:#fff; color:#e90000; padding:30px 0px; border-radius:4px; font-size:40px; display:inline-block; margin:20px 0 0; box-shadow: 4px 4px 0px rgba(0,0,0,0.2); font-weight:400; width:100%;text-align:center;}

.sp .box.num2{ margin: 0px 0 120px; }
.sp #spec { margin:-40px auto 0; padding-bottom:40px; }
.sp .spec_inner { width:90%; margin:0 auto 0;}
.sp #spec .txt{width:100%; margin-left:0px; margin-top:60px;}

.sp #spec .img_pack{ width:400px; display:block; margin:0 auto; float:none;}
.sp #spec h5 { padding-left:0px; font-size:45px;}
.sp #spec li .th { font-size:30px; width:300px;}
.sp #spec li .td { font-size:30px; }

.sp .off{color:#632208; padding:20px 16px; font-size:25px; margin-top:20px; background-color:#ffca00;border-radius:3px;line-height:1;text-align:center;}
.sp .off .bold{ font-size:25px;}

.sp .btn_reserve{ width:100%; padding:20px 0;text-align:center; font-size:50px; margin:70px 0 50px;}

/*.sp #wrapper_dlclist li {font-size:30px;}
.sp #wrapper_dlclist h2 {font-size:50px;}
.sp #wrapper_dlclist h3 {font-size:30px;}
.sp #wrapper_dlclist span {font-size:26px;}*/