/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');
/*=================================
layout
=================================*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: YuMincho,'Yu Mincho','Noto Serif JP',"Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	color: #fff;
	background-image: url(../img/common/bg.jpg);
	background-color: #000;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	font-size: 16px;

}
.fadeup ,
.fade {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
}
img{vertical-align: bottom;}
:root {
	--bg-base: #000;
	--line-color: #820000;
	--dt-color: #a08f50;
}

/*表示*/
.view_pc{display: block;}
.view_pc_tb{display: block;}
.view_tb{display:none;}
.view_tb_sp{display:none;}
.view_sp{display:none;}

/*==================
footer
==================*/
footer{
	width: 100%;
	background-color: #000;
	text-align: center;
	font-family: arial;
	font-size: 15px;
}
#footer_wrap{width: 100%;margin: 0 auto;background-color: #000;padding: 1.0em 0 50px 0 ;}
footer a{display: inline-block;}
footer a:hover{opacity: 0.7;}
.footer_copy{text-align:center;width: 100%;font-size: 12px; padding: 0.4em; box-sizing: border-box; background-color: #4f0000;}


footer #snsBox,
footer #companyBox {
	padding: 10px 0;
}
footer #snsBox a {
	display: inline-block;
	vertical-align: bottom;
	width: 40px;
	margin: 2px;
}
footer #snsBox a img {
	display: block;
	width: 100%;
}
footer #companyBox a img {
	display: block;
	width: auto;
	margin: auto;
	margin-bottom: 13px;
}
footer #companyBox a {
	box-sizing: border-box;
	display: inline-block;
	color: #fff;
	font-size: 13px!important;
	padding: 0;
	margin: 3px;
}
/*==================
load
==================*/
#load {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999999;
  text-align:center;
  color:#fff;
}
#load p{
	position: absolute;
	text-align:center;
	top: 50%;
	width: 100%;
}
#pagetop {
    width: 80px;
    text-align: center;
    position: fixed;
    right: 1%;
    bottom: 1%;
    cursor: pointer;
    z-index: 3;
}
#pagetop img{
	width: 100%;
}

/*==================
header
==================*/
header{
	width: 100%;
	box-sizing: border-box;
	background-color: #4f0000;
	padding: 1% 0;
	padding-left: 13%;
}
#header_wrap{
	width: 96%;
	margin: 0 auto;
	max-width: 1540px;
}
header nav{
	float: left;
	width: 80%;
	margin-top: 1%;
}
header #logo{
	float: left;
	width: 20%;

}
header #logo a{
	display: inline-block;
	width: 100%;
}
header #logo a:hover{
	opacity: 0.7;
}
header #logo a img{
	width: 100%;	
	
}
header nav a{
	display: inline-block;
	background-image: url(../img/nav/nav_bg.jpg);
	background-size: 100%;
	width: 10%;
	margin: 1%;
	max-width: 120px;
	position: relative;
}

header nav a:hover img,
header nav a.select img{
	background-image: url(../img/nav/nav_on.png);
	background-size: 100%;
}

header nav a img{
	width: 100%;
}

header nav a .new{
	position: absolute;
	top: -4%;
	left: -1%;
	width: 18%;
	opacity: 1;
	z-index: 1;
	max-width: 30px;
}

/**/
#sp_menu_btn{
	display: none;
}
#sp_menu_btn{
	position: relative;
	background:#000;
	cursor: pointer;
	width: 50px;
	height:50px;
}
#sp_menu_btn .openbtn-area{
	transition: all .6s;
	width:50px;
	height:50px;
}
#sp_menu_btn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 11px;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	width: 50%;
}
#sp_menu_btn span:nth-of-type(1) {
	top:15px; 
}
#sp_menu_btn span:nth-of-type(2) {
	top:23px;
}
#sp_menu_btn span:nth-of-type(3) {
	top:31px;
}
#sp_menu_btn.active .openbtn-area{
	transform: rotate(360deg);
}
#sp_menu_btn.active span:nth-of-type(1) {
	top: 17px;
	left: 12px;
	transform: translateY(6px) rotate(-45deg);
	width: 50%;
}
#sp_menu_btn.active span:nth-of-type(2) {
	opacity: 0;
}
#sp_menu_btn.active span:nth-of-type(3){
	top: 29px;
	left: 12px;
	transform: translateY(-6px) rotate(45deg);
	width: 50%;
}

/*==================
contents
==================*/
.contents{
	width: 100%;
	box-sizing: border-box;
}
.select_box{
	background-color: #000;
	padding: 1.0em 0;
	text-align: center;
}
.select_box a{
	display: inline-block;
	box-sizing: border-box;
	margin:0.25%;
	position: relative;
	color: #fff;
	border: 1px solid #4f0000;
	box-shadow: 5px 5px 0 #4f0000;
	-mos-box-shadow: 5px 5px 0 #4f0000;
	-webkit-box-shadow: 5px 5px0 #4f0000;
	padding: 0.5em;
	
	transition: background .2s;
    -webkit-transition: background .2s;
    -moz-transform: background .2s;
   /* overflow: hidden;*/
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #820000 50%);
    background-position: 0 0;
    background-size: auto 200%;

}
.select_box a img{
	width: 100%;
}
.select_box a .new{
	position: absolute;
	top: -10%;
	left: -10%;
	opacity: 1;
	z-index: 1;
	max-width: 30px;
	width: 1.0em;
}
.select_box a:hover{
	background-position: 0 -100%;
	border: 1px solid #000;
}
.select_box a.selected{
	background-color: #820000;
	border: 1px solid #000;
}
.btn{
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 1.0em;
	margin: 0 auto;
	min-width: 300px;
	text-align: center;
	box-shadow: 5px 5px 0 #4f0000;
	-mos-box-shadow: 5px 5px 0 #4f0000;
	-webkit-box-shadow: 5px 5px0 #4f0000;
	
	transition: background .2s;
    -webkit-transition: background .2s;
    -moz-transform: background .2s;
    overflow: hidden;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #820000 50%);
    background-position: 0 0;
    background-size: auto 200%;
	border: 1px solid #000;
}
.btn:hover{
	background-position: 0 -100%;
	border: 1px solid #000;
}
/*==================
top
==================*/
#top{}
#top #key{
	width: 100%;
	position: relative;
}
#top #key img{
	width: 100%;
}
/**/
.top_movie{
	width: 100%;
	max-width: 960px;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	/*position: absolute;*/
	bottom: 0;
	text-align: center;
	aspect-ratio: 16 / 9;
}
.top_movie iframe {
  width: 100%;
  height: 100%;
}

.top_movie .movie_line{
	position: absolute;
	top: -6%;
	right: -5%;
	z-index: 4;
	width: 30%;
}
.top_movie .thum{
	position: relative;
	background-color: #fff;
}
.top_movie .thumImg{
	width: 100%;
	display: block;
	/*padding-top: 56.25%;*/
	position: relative;
	z-index: 3;
}
.top_movie .thum img{
	position:absolute;
	z-index:-1;
	top:0;
}
.top_movie a{
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:45;
	display: inline-table;
	max-width: 940px;
	width: 85%;
}
.top_movie a:after{
	content: "";
	width: 10em;
	height: 10em;
	display: block;
	position:absolute;
	transition: all 300ms 0s ease;
	opacity: 0.6;
	transform: scale(1);
	margin-top: -4em;
	margin-left: -4em;
	top:42%;
	left:48%;
	z-index: 4;
	background-image: url("../img/common/movie.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top_movie a:hover:after{
	transform: scale(0.8);
	opacity: 1;
}

.top_movie_bg{
	text-align: center;
	background-image: url(../img/common/contents_bottom.png), url(../img/common/contents_top.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom center, top center;
	background-size: 100%, 100%;
	padding: 3.0em 0;
}

.top_movie_title{
	position: absolute;
	right: 0;
	bottom: -10%;
	z-index: 3;
	width: 60%;
	max-width: 544px;
}

/**/

#top .banner_box_info,
#top .banner_box_connect{
	width: 100%;
	text-align: center;
	padding: 1.0em 0;
}
#top .banner_box_info{
	background-color: #4f0000;
	
}
#top .banner_box_info a,
#top .banner_box_connect a{
	display: inline-block;
	max-width: 400px;
	width: 30%;
	margin: 0.5%;
	box-sizing: border-box;
	border: #000 2px solid;
}
#top .banner_box_info a:hover,
#top .banner_box_connect a:hover{
	opacity: 0.7;
}
#top .banner_box_info a img,
#top .banner_box_connect a img{
	width: 100%;
}

/**/

#news_box{
	background-color: #000;
	width: 100%;
	position: relative;
	border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}
#news_box .news_box_wrap{
	max-width: 1300px;
	padding: 0 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

#news_box .read{
	background-color: #4f0000;
	padding: 1.0em 0.5em;
	font-size: 1.6em;
	/*text-shadow: 0px 0px 2px #ae8ab0, 1px 0px 2px #ae8ab0, 1px 1px 2px #ae8ab0, 0px 1px 2px #ae8ab0;*/
	font-family: 'Cardo', serif;
	text-align: center;
	max-width: 200px;
	width: 20%;
	float: left;
	box-sizing: border-box;;
}
#news_box .read a{
	background-color: #000;
	display: inline-block;
	font-size: 0.8em;
	padding: 0 0.5em;
	box-sizing: border-box;
	text-shadow: none;
	color: #fff;
}
#news_box .read a:hover{
	opacity: 0.7;
}

#news_box .log_box{
	float: left;
	padding: 1.5% 0 1.5% 1%;
	width: 80%;
	box-sizing: border-box;
}
.log_box{
	text-align: left;
}
.log_box .log{
}
.log_box .ymd{
	color: #fff;
	background-color: #4f0000;
	font-family: 'Cardo', serif;
	font-size: 1.2em;
	/*float: left;*/
	padding: 0.3em;
	display: inline-block;
}
.log_box .notice{
	margin-top: 0.2em;
}

.log_box .notice a{
	padding: 0.3em;
	display: inline-block;
	color: #fff;
	background-color: #820000;
}
.log_box .notice a:hover{
	opacity: 0.7;
}
/**/
#top .top_product{
	width: 100%;
	background-image: url(../img/common/bg3.jpg);
	background-color: #000;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
	padding: 3% 0 5% 0;
}

#top .product{
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin:0 auto;
	padding: 1.0em;
}

#top .product .jacket{
	width: 49%;
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	box-sizing: border-box;
}
#top .product .jacket img{
	width: 100%;
	max-width: 300px;
}
#top .product .spec{
	width: 50%;
	max-width: 550px;
	display: inline-block;
	padding: 2%;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
}
#top .product .spec table{
	text-indent: initial;
    border-spacing: 2px;
	border-collapse: separate;
	margin-bottom: 1.0em;
}
#top .product .spec table th{
	padding: 2px 10px;
	color: #fff;
	background-color: #000;
	vertical-align: middle;
	white-space: nowrap;
}
#top .product .spec table td{
	width: 100%;
	padding-left: 10px;
	vertical-align: middle;
	text-align: left;
}
/*TOP COUNT*/
#top .countdown{
	cursor: pointer;
	position: absolute;
	width: 34%;
	bottom: 1%;
	right: 1%;
	max-width: 400px;
}
#top .countdown img{
	width: 100%;
}
#top .countdown a{
	margin: 1%;
	background-color: #000;
	cursor: pointer;
	display: inline-block;
}
#top .countdown a:hover{
	opacity: 0.9;
}
#top .countdown .countPop{
	width: 48%;
	float: left;
}

/*==================
story
==================*/
#story{
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../img/story/bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
}
#story .box{
	margin: 0 auto;
	padding: 5% 0;
	max-width: 1100px;
	width: 90%;
	text-align: center;
	font-size: 21px;
	font-weight: bold;
	text-shadow: #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px;
	letter-spacing: -0.04em;	
}
#story .box img{
	/*max-width: 960px;*/
	width: 100%;
}
#story .box span{
	color: #ff0000;
}
#story .box strong{
	font-size: 1.2em;
	color: #ff0000;
}
#story .box h3{
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}


/*==================
chara
==================*/
#chara{
	background-size: 100% auto;
}
#chara #select_nav img.subnav_top{
	float: right;
}

#chara #select_nav a img{
	width:100%;
}
#chara #select_nav a{
	margin: 0.3% 0.3% 0.3% 0.3%;
	width: 8.49%;
	max-width: 80px;
	display: inline-block;
	box-sizing: border-box;
	z-index: 1;
	opacity: 0.5;
	position: relative;
	float: right;
	border: 1px solid #000;
}
#chara #select_nav a:hover,.chara #select_nav a.selected{
	opacity: 1.0;
}
/*-----------*/
#chara .box{
	width: 100%;
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../img/chara/chara_bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
}
#chara .box #chara_wrap{
	max-width: 1600px;
	width: 100%;
	position: relative;
	margin: 0 auto;
	min-height: 900px;
}

.chara_select_box{
	max-width: 1060px;
	margin: 0 auto;
	width: 90%;
}
.chara_select_box a{
	float: left;
	max-width: 100px;
	width: 10%;
	opacity: 0.7;
	padding: 0;
	box-shadow: none;
	border: 1px solid #000;
}
.chara_select_box a .new{
	top: 0;
	left: 0;
}
.chara_select_box a img{
	width: 100%;
}
.chara_select_box a.selected,.chara_select_box a:hover{
	opacity: 1.0;
}
/*-----------*/

.chara_image{
	position: relative;
	float: right;
	width: 100%;
}
.chara_image img{width: 100%;}

.chara_image .serif{
	width: 70%;
}
/**/
.chara_cos{
	position: absolute;
	right: 3%;
	bottom: 10%;
	z-index: 2;
	width: 14%;
}
.chara_cos .read_img{
}
.cos_btn{
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
	max-width: 200px;
}
.cos_btn p{
	width: 100%;
}

a.cCos-bt{
	float:left;
	cursor:pointer;
	position:relative;
	display:inline-block;
	width: 70.0%;
	box-sizing: border-box;
	margin: 0;
	position: relative;
}

.cos_btn p a{
	/*margin: 5px;*/
	/*border: 1px solid #FFF;*/
	display: inline-block;
	/*background-color: #505050;*/
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}
.cos_btn p a.selected,.cos_btn p a:hover{
	/*background-color: #820000;*/
}

.chara_image .viewImg{opacity: 1.0;}
.chara_image .target{
	width: 60%;
	position: absolute;
	top: 10%;
	right: 0;
	opacity: 0;
}
/*-----------*/
.chara_intro{
	position: absolute;
	top: 14%;
	left: 10%;
	z-index: 2;
	width: 40%;
	max-width: 660px;
}

.chara_name{
}
.chara_name img{
	width: 100%;
}
/**/
.chara_txt{
	clear: both;
	background-color: #000;
	padding: 0.5em;
	margin-top: 2%;
}
/**/
.chara_sv{
	margin: 0 1% 1% 0;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	padding-top: 2%;
}
.chara_sv .read_img{
	/*float: right;*/
	/*width: 23%;*/
	width: 100%;
}
.chara a.stop-bt{
	position: relative;
}
.chara a.play-bt{
}

.voice{
	text-align: center;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}
.voice a{
	margin: 0.5%;
	display: inline-block;
	cursor: pointer;
	position: relative;
	width: 32%;
	max-width: 140px;
	float: left;
	box-sizing: border-box;
	background-image: url(../img/chara/sv_bg.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 100%;
}
.sv_on{
	opacity: 0.0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
a.cvplay:hover .sv_on, 
#chara_wrap .stop-bt .sv_on{
	opacity: 1.0;
}
.cosView a .cos_on{
	opacity: 0.0;
	position: absolute;
	top: 0;
	right: 0;
}
.cosView a:hover .cos_on,
.cosView a.selected .cos_on{
	opacity: 1.0;
}
/*.chara a.stop-bt:hover .sv_on{
	opacity: 1.0;
}*/
/*==================
gallery
==================*/
#gallery{
}
#gallery .box{
	text-align: center;
	width: 100%;
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../img/gallery/bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
}
#gallery .box .cg{
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin:0 auto 0 auto;
	padding: 2.0em 1.0em;
}
#gallery .select_box_wrap{
	width: 100%;
	background-color: #000;
}
#gallery .select_box{
	
}
#gallery .select_box{
	max-width: 1060px;
	margin: 0 auto;
	width: 90%;
}
#gallery .select_box a{
	float: left;
	max-width: 100px;
	width: 10%;
	padding: 0;
	box-shadow: none;
	border: 1px solid #000;
	opacity: 0.7;
}
#gallery .select_box a .new{
	top: 0;
	left: 0;
	width: 1.0em;
}
#gallery .select_box a img{
	width: 100%;
}
#gallery .select_box a.selected,
#gallery .select_box a:hover{
	opacity: 1.0;
}

/*==================
system
==================*/
#system{
	background-image: url(../img/system/bg.png);
	background-repeat: no-repeat;
	background-position: top right;
}
#system .box{
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin: 5% auto 5% auto;
	padding: 2.0em 1.0em;
	text-align: center;
}
#system .box section{
	background-color: rgba(0,0,0,0.70);
	display: inline-block;
	box-sizing: border-box;
	padding: 0.5em;
		
	width: 48%;
	margin: 1%;
	float: left;
}
#system .box section.center_box{
	float: none;
}
#system .box section p{
	font-weight: bold;
	padding: 0.5em;
	font-size: 1.2em;
}
/*==================
sound
==================*/
#sound{
	text-align: center;
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../img/sound/bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
	min-height: 90vh;
	padding-top: 4.0em;
	padding-bottom: 4.0em;
}
#sound .box{
	/*background-color: rgba(0,0,0,0.70);*/
	max-width: 900px;
	margin: 0 auto;
	padding: 3.0em 0;
	background-color: rgba(0,0,0,0.70);
	width: 90%;
}
#sound .box .sound_box{
	padding: 0.5em;
	box-sizing: border-box;
	margin-bottom: 1.0em;
}
#sound .box .sound_box h3{
	font-size: 1.4em;
}
#sound .box .sound_box h3 span{
	font-size: 0.6em;
	background-color: var(--line-color);
	padding: 0.3em;
	margin-bottom: 0.8em;
	display: inline-block;
}
#sound .box .sound_box span{
	font-size: 1.2em;
}

/*==================
movie
==================*/
#movie{
	text-align: center;
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../img/movie/bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
	min-height: 90vh;
	padding-top: 4.0em;
}
.movie_select_big{
	/*margin: 4em 0 1em 0;*/
	margin-bottom: 5%;
}

.movie_select_big .new{
	z-index: 4;
	position: absolute;
	left: 7%;
	top: 0;
	width: 7%;
	min-width: 30px;
	max-width: 100px;
}
/**/
#movie .top_movie{
	width: 48%;
	max-width: 960px;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	/*position: absolute;*/
	bottom: 0;
	text-align: center;
	/*float: left;*/
	margin-bottom: 5%;
	margin-top: 3%;
}
#movie .top_movie .movie_line{
	position: absolute;
	top: -6%;
	right: -5%;
	z-index: 4;
	width: 30%;
}
#movie .top_movie .thum{
	position: relative;
	background-color: #fff;
}
#movie .top_movie .thumImg{
	width: 100%;
	display: block;
	/*padding-top: 56.25%;*/
	position: relative;
	z-index: 3;
}
#movie .top_movie .thum img{
	position:absolute;
	z-index:-1;
	top:0;
}
#movie .top_movie a{
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:45;
	display: inline-table;
	max-width: 940px;
	width: 85%;
}
#movie .top_movie a:after{
	content: "";
	width: 10em;
	height: 10em;
	display: block;
	position:absolute;
	transition: all 300ms 0s ease;
	opacity: 0.6;
	transform: scale(1);
	margin-top: -4em;
	margin-left: -4em;
	top:42%;
	left:48%;
	z-index: 4;
	background-image: url("../img/common/movie.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#movie .top_movie a:hover:after{
	transform: scale(0.8);
	opacity: 1;
}

#movie .top_movie_title{
	position: absolute;
	right: 0;
	bottom: -10%;
	z-index: 3;
	width: 60%;
	max-width: 544px;
}


/*==================
info
==================*/

#product{
	background-image: url(../img/common/contents_top.png),url(../img/common/contents_bottom.png),url(../info/img/bg.png);
	background-repeat: no-repeat , no-repeat, no-repeat;
	background-position: center top, center bottom, top right;
	min-height: 90vh;
	padding-top: 4.0em;
	padding-bottom: 4.0em;
}


#product .box{
	/*border: 1px solid #fff;*/
	background-color: rgba(0,0,0,0.70);
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin: 0 auto;
	padding: 2.0em 1.0em;
	text-align: center;
}

#product .jacket{
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	/*text-align: right;*/
	box-sizing: border-box;
	text-align: center;
}
#product .jacket img{
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
#product .spec{
	width: 100%;
	max-width: 550px;
	display: inline-block;
	padding: 2%;
	vertical-align: middle;
	box-sizing: border-box;
	margin: 0 auto;
}
#product .spec table{
	text-indent: initial;
    border-spacing: 2px;
	border-collapse: separate;
}
#product .spec table th{
	padding: 2px 10px;
	color: #fff;
	background-color: #4f0000;
	vertical-align: middle;
	white-space: nowrap;
}
#product .spec table td{
	width: 100%;
	padding-left: 10px;
	vertical-align: middle;
}
/*-------*/


#product h1 {
	background-color: #820000;
	border: 1px solid #000;
	padding: 0.3em 0;
	text-align: left;
	width: 99.2%;

	display: inline-block;
	box-sizing: border-box;
	margin:0.25%;
	position: relative;
	color: #fff;
	box-shadow: 5px 5px 0 #4f0000;
	-mos-box-shadow: 5px 5px 0 #4f0000;
	-webkit-box-shadow: 5px 5px0 #4f0000;
	padding: 0.1em 0.5em;
	
	transition: background .2s;
    -webkit-transition: background .2s;
    -moz-transform: background .2s;
   /* overflow: hidden;*/
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #820000 50%);
    background-position: 0 0;
    background-size: auto 100%;
	font-size:max(1.5vw,20px);
	margin-top: 4%;
	margin-bottom: 1%;
}


#product h2{
	padding: 0.3em;
	text-align: center;
}
#product h3{
	line-height: 1.2em;
	color: #fff;
	background-color: var(--line-color) ;
	padding: 0.3em 0 0.3em 0.3em;
}
#product h4{
	border-top: var(--line-color) solid 1px;
	border-left: var(--line-color) solid 10px;
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
}

#product .detail{
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 1.0em;
	box-sizing: border-box;
}
#product .line_box{
	border: var(--line-color) solid 1px;
	padding: 0.3em;
	margin: 0.5em 0.3em;
}

#product p{
	margin-left: 1.5em;
}
#product .order_btn img{
	width:25%!important;
}
#product .order_btn{
	border-top: var(--line-color) solid 1px;
	border-left: var(--line-color) solid 10px;
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
	margin: 1em;
}
#product .shop_list{
	padding: 1em;
	border-bottom: var(--line-color) solid 1px;
	width: 95%;
	text-align: center;
}
#product .shop_list img{
	width: 30%!important;
	
}

#product .set{
	padding: 0.2em;
	border: var(--line-color) solid 1px;
	margin: 0.3em 0;
}
#product .readme{
	box-sizing: border-box;
	padding: 0 1%;
}
#product .readme p{
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	line-height: 1.2em;
}
#product .bonus_info{
	text-align: left;
	max-width: 1100px;
	padding: 5%;
	margin-top: 5%;
}
#product .bonus_info h2{
	background-color: #000;
	border: var(--line-color) solid 1px;
	line-height: 1.2em;
}
#product .shop_info{
	text-align: left;
	
}
#product .shop_info section{
	width: 48%;
	margin: 0 auto;
	box-sizing: border-box;
	border: var(--line-color) solid 1px;
	background-color: #000;
	padding-bottom: 0.5em;
	text-align: center;
}
#product .shop_info section img,
#product .bonus_info img{
	width: 100%;
}
#product .shop_info section span{
	color:#96736C;
}

#product .shop_info section2{
	float: left;
	width: 98%;
	margin: 1%;
	box-sizing: border-box;
	border: var(--line-color) solid 1px;
	background-color: #000;
	padding-bottom: 0.5em;
}
#product .shop_info section2 .order_btn{
	border-top: var(--line-color) solid 1px;
	border-left: var(--line-color) solid 10px;
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
	margin: 1em;
	width: 40%;
	display: inline-block;
}
#product .shop_info section3{
	width: 98%;
	margin: 0 auto;
	border: var(--line-color) solid 1px!important;
	background-color: #000;
	padding-bottom: 0.5em;
	text-align: center;
}
#product .shop_info section .order_btn{
	border-top: var(--line-color) solid 1px;
	border-left: var(--line-color) solid 10px;
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
	margin: 1em;
	width: 80%;
	display: inline-block;
	
}
#product .shop_info section .order_btn img {
	width: 18%!important;
}
.store_link{
    background-color: var(--line-color);
    padding: 0.3em 0 0.3em 0.3em;
	border: double 3px #000;
	display: inline-block;
	width: 50%;
	margin: 0.2em 5%;
	box-sizing: border-box;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
#product .shop_info section .store_link img{
	width: 1.0em;
	vertical-align: middle;
}
.store_link:hover{
	opacity: 0.7;
}


#product .log_box{
	max-width: 800px;
	margin: 0 auto;
	min-height: 90vh;
}
#product .log_box .notice{
	border-bottom: 1px solid #4f0000;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	padding-bottom: 0.5em;
}


/*==================
special
==================*/
#special{
	background-image: url(../img/special/bg.png);
	background-repeat: no-repeat;
	background-position: top right;
}
#special .box{
	background-color: rgba(0,0,0,0.70);
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin: 5% auto 5% auto;
	padding: 2.0em 1.0em;
	text-align: center;
}
#special .box h3{
	padding: 0.5em;
	margin: 0.5em 0 0.5em 0;
	background-color: #000;
}
#special .wallpaper{
	max-width: 900px;
}
#special .box .wall_pc{
	width: 27%;
	margin: 2%;
	display: inline-block;
}
#special .box .wall_sp{
	width: 30%;
	margin: 1%;
	display: inline-block;
}
#special .box .wall_pc img,
#special .box .wall_sp img{
	width: 100%;
}
#special .box .wall_sp a,
#special .box .wall_pc a{
	background-color: #820000;
	color: #fff;
	padding: 0.3em;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #fff;
}
#special .box .wall_sp a:hover,
#special .box .wall_pc a:hover{
	opacity: 0.7;
}


/*カウントダウンバックナンバー*/
.special_contents .backnum{
	max-width: 800px;
	width: 94%;
	margin: 7% auto;
	background-image: url(../img/common/bk70.png);
	background-repeat: repeat;
	background-size: auto;
}

.special_contents .backnum article{
	text-align: left;
	padding: 3% 2%;
	font-size: 16px;
}
.special_contents .backnum article section{
	margin-bottom: 2%;
}

.backnum_txt{
	background-position: left top,center;
	background-repeat: no-repeat ,repeat;
	background-size: 70%,auto;
	width: 100%;
	border: 1px solid #c09645;
	text-shadow: 1px 1px 0px #000,1px 0px 0px #000,0px 1px 0px #000,0px 1px 1px #000,1px 1px 1px #000,1px 1px 2px #000,1px 0px 2px #000,0px 1px 2px #000;
}
/*アンケート*/
#special .box_wrap{
	text-align: left;
}
#special .box_wrap h2{
	text-align: center;
	margin-bottom: 0.5em;
}
#special .box_wrap .readme{
	background-color: #000;
	padding: 1.0em;
	box-sizing: border-box;
	border: 1px solid #fff;
	margin-bottom: 1.5em;
}
#special .box_wrap .rule{
	background-color: #000;
	padding: 1.0em;
	box-sizing: border-box;
	border: 1px solid #fff;
	margin-bottom: 1.5em;
}
#special .box_wrap .rule p{
	margin: 0.5em 0.3em;
	box-sizing: border-box;
}
#special .box_wrap span{
	font-weight: bold;
	color: #b5a993;
	padding: 0.5em;
	border: 1px solid #b5a993;
	display: inline-block;
}

/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1100px) {
/*==================
info
==================*/
	#product .shop_info section{
		float: none;
		width: 100%;
		margin: 2% 0;
	}
	
}/*max-width: 1300px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
	body{
		font-size: 2.2vw;
	}
	
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}
/*==================
header
==================*/
	#sp_menu {
		display: block;
	}
	#sp_menu_btn{
		display: inline-block;
		left: 0;
		top: 0;
		z-index: 10;
		position: fixed;
		left: 1%;
		top: 1%;
	}
	header{
		width: 100%;
		background-image: none;
		border-left: none;
		position: fixed;
		transition: all .3s;
		opacity: 0;
		display: none;
		z-index: 5;
		text-align: center;
	}
	header.open_st {
		opacity: 1;
		display: block;
		height: 100vh;
	}
	header.close_st {
		opacity: 0;
		display: none;
	}
	#header_wrap{
		width: 100%;
		overflow-y: auto;
		padding-top: 12%;
	}
	header nav{
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		width: 90%;
		float: none;
	}
	header nav a{
		float: left;
		display: inline-block;
		width: 50%;
		max-width: 120px;
	}
	header #logo{
		width: 50%;
		float: none;
		margin: 0 auto;
		margin-bottom: 2%;
	}
	#pagetop{
		right: 1%;
		width: 50px;
	}
/*==================
contents
==================*/
	.contents{
		width: 100%;
		float: none;
	}
	.select_box{
		padding: 0.5em 0.5em 0.5em 3.8em;
	}
	.select_box a{
		/*width: 13%;*/
		font-size: 1.6em;
		margin: 0.5%;
	}
/*==================
top
==================*/
	#news_box{
		border: none;
		border-top: none;
		border-bottom: none;
	}
	#news_box .news_box_wrap{
		padding: 0;
	}
	#news_box .read{
		width: 30%;
		padding: 1.5em 0.5em;
	}
	#news_box .log_box{
		width: 70%;
		padding: 2.5% 0 2.5% 2.5%;
	}
	
	
	#top .wrap_box .news_box{
		width: 100%;
		margin-bottom: 5%;
	}
	#top .banner_box_info a,
	#top .banner_box_connect a{
		width: 44%;
	}
	#top .product{
		margin-top: 5%;
	}
	#top .product .jacket{
		text-align: center;
		width: 100%;
	}
	#top .product .spec{
		width: 100%;
	}
	/*TOP COUNT*/
#top .countdown{
	width: 35%;
}
/*==================
story
==================*/
	#story{
		padding: 10% 0;
		background-size: 100%, 100%, 30%;
	}
	#story .box{
		text-align: left;
		font-size: 1.6em;
		width: 80%;
	}
	#story .box strong{
		font-size: 1.6em;
	}
	#story em{
		display: block;
	}
/*==================
chara
==================*/
	#chara{
		overflow: hidden;
	}
	#chara .select_box{
		padding-top: 15%;
		padding: 15% 0 0 0;
	}
	#chara .select_box a{
		width: 15.2%;
		margin: 0.6%;
	}
	#chara .box{
		background-size: 100%, 100%, 20%;
	}
	.chara_intro{
		width: 96%;
		left: 2%;
		top: 40%;
	}
	.chara_txt{
		background-color: rgba(0,0,0,0.80);
		padding: 1.0em;
	}
	.chara_sv{
		background-color: rgba(0,0,0,0.80);
		margin: 0;
	}
	.chara_image .serif{
		width: 150%;
	}
	.chara_image .target{
		width: 140%;
		top: 4%;
		right: -20%;
	}
	.chara_cos{
		top: 2%;
		left: 0;
		width: 25%;
	}
	.voice{
		width: 60%;
	}
/*==================
gallery
==================*/
	#gallery{
		/*padding: 70px 0 5% 0;*/
		min-height: 0;
	}
	#gallery .select_box_wrap{
		padding: 70px 0 0 0;
	}
	#gallery .box{
		min-height: 0px;
		background-size: 100%, 100%, 30%;
	}
	
	#gallery .select_box a{
		width: 15.2%;
		margin: 0.6%;
	}
/*==================
system
==================*/
	#system .select_box{
		padding-top: 15%;
	}
	#system .box section{
		float: none;
		width: 96%;
		margin: 2% auto;
	}
/*==================
sound
==================*/
	#sound {
		padding: 10% 0;
		padding-top: 15%;
		background-size: 100%, 100%, 30%;
	}
	#sound .box{
		font-size: 1.4em;
	}
/*==================
movie
==================*/
	#movie {
		padding: 10% 0;
		padding-top: 15%;
		background-size: 100%, 100%, 30%;
	}
	#movie .top_movie{
	width: 100%;
	float: none;
	margin-bottom: 5%;
}
/*==================
special
==================*/
	#special .select_box{
		padding-top: 15%;
	}
	#special .box .wall_pc{
		width: 38%;
	}
/*==================
product
==================*/
	#product .select_box{
		padding-top: 15%;
	}
	
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
	body{
		font-size: 3.2vw;
		background-size: 260%;
		background-attachment: fixed;
	}
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: none;}
.view_tb{display:none;}
.view_tb_sp{display:block;}
.view_sp{display:block;}
/*==================
header
==================*/
/*==================
footer
==================*/
	footer{}
	#footer_wrap{
		padding-bottom: 70px;
	}
/*==================
story
==================*/
	#story{
		padding: 15% 0;
	}
	#story .box{
		font-size: 1.2em;
		width: 90%;
	}
	#story .box strong{
		font-size: 1.6em;
	}
/*==================
chara
==================*/
/*==================
system
==================*/
#system .box img{
	width: 100%;
	float: none;
}
/*==================
info
==================*/
	#product h2{
		font-size: 4.2vw;
	}
/*=================================
special
=================================*/	
	.special_contents .cast_comment article section .cast_name{
		background-size: 100%, auto;
		min-height: 10px;
	}
	.special_contents .cast_comment article,
	.special_contents .cast_comment article section h4{
		font-size: 3.6vw;
	}
	.special_contents .cast_comment article section .cast_name span{
		font-size: 6.0vw;
	}
	.backnum_txt{
		font-size: 3.2vw;
	}
	.backnum_txt_in{
		width: 65%;
		margin: 0 0 0 35%;
		padding: 1.0em;
		box-sizing: border-box;
		background-color: rgba(0,0,0,0.40);
	}
	
	.special_contents .backnum article section{
		background-size: 100% , auto;
		min-height: 20em;
	}
	
}/*media:480*/