/****************************************
		2. レイアウト 
*****************************************/
@charset "UTF-8";
/*////////////////////////////////////////////////////////////////////////
基本
////////////////////////////////////////////////////////////////////////*/
/*
フォント
*/

/*ゴシック*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabigothic.css');
/*明朝*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
/*アルファベット　font-family: 'PT Serif', serif;*/
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
/*アルファベット　font-family: 'Noto Serif', serif;*/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

/*////////////////////////////////////////////////////////////////////////
全体ボックス
////////////////////////////////////////////////////////////////////////*/

body{
	background-color: #000;
}

#wrapper{
	width:100%;
}

img{vertical-align: bottom;}

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

.all_bg_bk70{background-image: url(../img/bk_70.png);}

/*==================
header
==================*/
header{
	width: 100%;
	background: #000;
	padding: 10px;
	box-sizing: border-box;
}
header nav{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
}
header nav a{
	position: relative;
	font-size:20px;
	font-weight: bold;
	font-family: 'Noto Serif', serif;
	display: inline-block;
	color: #dee6c2;
	padding: 1.0em ;
}

header nav a span.new{}

header nav a:hover{
	background-image: url(../img/header/nav_bg_left.png), url(../img/header/nav_bg_right.png);
	background-position: left top,right bottom;
	background-repeat: no-repeat,no-repeat;
}
header nav a.selected{
	color: #fff;
	text-shadow: 0px 0px 3px #3a97a2, 1px 0px 3px #3a97a2, 1px 1px 3px #3a97a2, 0px 1px 3px #3a97a2;
	background-image: url(../img/header/nav_bg_left.png), url(../img/header/nav_bg_right.png);
	background-position: left top,right bottom;
	background-repeat: no-repeat,no-repeat;
}

header nav a.no_select{
	pointer-events: none;
	opacity:0.5;
}

#pagetop{
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	z-index: 1;
}
#pagetop:hover{
	opacity: 0.7;
}
.new{
	position: absolute;
	font-size: 10px;
	width: 100%;
	color: #fff;
	bottom: 0;
	left: 0;
	background-color: #3a97a2;
	padding: 0.1em 0;
	font-family: 'Noto Serif', serif;
	text-align:center;
}

/*==================
footer
==================*/
footer{
	width: 100%;
	background-color: #000;
	padding: 2em 1em 4em 1em;
	box-sizing: border-box;
	font-size: 12px;
}
footer p { text-align:center; color:#FFFFFF;}
footer p img { margin-right: 20px;}
footer #sns_box a:hover{opacity: 0.7;}
footer #banner_box a:hover{opacity: 0.7;}
footer #banner_box img{
	box-sizing: border-box;
	width:100%;
	margin-right:20px;
}
footer .logo_top {margin: 40px 15px 20px 0;}
footer .logo_top img{margin-right:30px;}
footer .logo_top a:hover{opacity: 0.7;}
footer .lrgtxt {text-align:center; font-weight:bold; font-size:16px; margin-bottom:10px;}
/*==================
load
==================*/
#loader-bg{
	position:fixed;
	z-index:100;
	width:100%;
	height:100%;
	background-color:#000;
}
#loader{
	text-align:center;
	margin-top:25%;
	color: #dee6c2;
	font-family: 'Noto Serif', serif;
	font-size: 21px;
	font-weight: bold;
}
/*==================
CONTENT
==================*/
#content{
	width: 100%;
	background-image: url(../img/teaser/wrapper_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	padding: 0 0 0 0;
}

/*colorbox*/
.popup{ background:#FFFFFF;}

/*title_read*/
.title_read{
	width: 100%;
	background-color: #262a36;
	padding-top: 10px;
	padding-bottom: 10px;
}
.title_read .bg{
	width: 100%;
	background-color: #262a36;
	border-bottom: 4px solid #343e47;
}


.title_read .wrap{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
}
.title_read .wrap p{
	font-family: 'Noto Serif', serif;
	font-size: 21px;
	font-weight: bold;
	color: #c8b58a;
	font-size: 60px;
}

.title_read_{
	width: 60%;
	background-color: #262a36;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0 auto;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 30px;
	font-weight: bold;
	color: #c8b58a;
	border-left: 8px solid #c8b58a;
	padding-left:15px;
}
.title_read_ .bg{
	width: 100%;
	background-color: #262a36;
	border-bottom: 4px solid #343e47;
}


/*sub_nav*/
.sub_nav{
	width: 100%;
	background-color: #84492b;
	background-image: url(../img/bg_pattern2.png);
	background-size: 60px;
}
.sub_nav .wrap{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}
.sub_nav .wrap .txt_nav{
	background-color: #2b2d3c;
	border: 2px solid #dee6c2;
	display: inline-block;
	color: #dee6c2;
	padding: 0.5em;
	font-size: 20px;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	margin: 0.3%;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-weight: bold;
}
.sub_nav .wrap .txt_nav:hover{
	background-color: #441e1b;
	color: #fff;
	border-color: #fff;
}
.sub_nav .wrap .selected{
	background-color: #441e1b;
	color: #fff;
	border-color: #3a97a2;
}

/*==================
TOP
==================*/
#top_bg{
	width: 100%;
	background-color: #000;
}
#top_wrap{
	width: 100%;
	margin: 0 auto;
	max-width: 1600px;
	box-sizing: border-box;
	background-color: #000;
}
#top_wrap #key{
	width: 75%;
	box-sizing: border-box;
	float: left;
}
/*サイド*/
#top_wrap .side_box{
	width: 25%;
	box-sizing: border-box;
	float: right;
	padding: 0 1.5% 1% 1%;
	max-width: 400px;
}
#top_wrap .side_box .logo{
	margin-bottom: 10px;
}


#top_wrap .side_box .news_box{
	color: #dee6c2;
	width: 100%;
	background-color: #262a36;
	border: 1px solid #dee6c2;
	padding: 2%;
	box-sizing: border-box;
	margin-top: 20px;
}
#top_wrap .side_box .news_box .more{
	width: 100%;
	background-color: #000;
	text-align: right;
	display: inline-block;
	box-sizing: border-box;
	padding: 4px;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-weight: bold;
	color: #fff;
}
#top_wrap .side_box .news_box .more:hover{
	color: #fff;
	background-color: #3a97a2;
}
#top_wrap .side_box .news_box .log{
	background-color: #010a24;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	padding: 4px;
	box-sizing: border-box;
	font-weight: bold;
}
#top_wrap .side_box .news_box .log:nth-child(odd){
	background-color: #0d1428;
}

#top_wrap .side_box .news_box .log .ymd{}

#top_wrap .side_box .news_box .log a{
	color: #fff;
	background-color: #000;
}
#top_wrap .side_box .news_box .log a:hover{
	color: #fff;
	background-color: #3a97a2;
}
#top_wrap .side_box .news_box .read{
	font-family: 'Noto Serif', serif;
	font-size: 21px;
	font-weight: bold;
}

#top_wrap .side_box .side_banner{
	width: 100%;
	display: inline-block;
	margin: 10px 0 0 0;
}
#top_wrap .side_box .side_banner:hover{
	opacity: 0.7;
}
#top_wrap .side_box .side_banner img{
	width: 100%;
	border: 1px solid #dee6c2;
	box-sizing: border-box;
}

/*製品情報*/
#top_product_info{
	width: 100%;
	border-top: 10px solid #000;
	background-color: #262a36;
	box-sizing: border-box;
	padding: 20px 0 30px 0;
	background-color: #84492b;
	background-image: url(../img/bg_pattern1.png);
	background-repeat: repeat;
	background-size: 80px;
	box-shadow: 0px 0px 50px 0px rgba(106,45,24,1.00) inset;
	
}
#top_product_info .read{
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	color: #dee6c2;
	font-weight: bold;
	font-family: 'Noto Serif', serif;
	font-size: 48px;
}

#top_product_info .box{
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
}
#top_product_info .box .jacket{
	width: 50%;
	float: left;
}
#top_product_info .box .info_txt{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	width: 50%;
	float: right;
	padding: 2%;
	box-sizing: border-box;
}
#top_product_info .box .info_txt .spec{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	line-height:1.4;
	font-size: 16px;
}
#top_product_info .box .info_txt .spec th{
	text-align:center;
	padding: 6px;
	width: 130px;
	/*font-size: 14px;*/
	font-weight: bold;
	background-color: #262a36;
	color: #c8b58a;
}
#top_product_info .box .info_txt .spec td{
	padding-left:10px;
	/*font-size: 14px;*/
	color: #dee6c2;
	font-weight: bold;
}

/*バナーエリア*/
#top_banner_area{
	width: 100%;
	background-color: #181c2a;
	padding: 10px;
	box-sizing: border-box;
	border-top: 1px solid #dee6c2;
	border-bottom: 1px solid #dee6c2;
}
#top_banner_area .box{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
}
#top_banner_area .box a{
	width: 24%;
	display: inline-block;
	margin: 0.5%;
}
#top_banner_area .box a img{
	width: 100%;
}

#order_ban {
    width:200px; 
	height: 300px;
	text-align:center; 
	margin:10px 20px; 
	background-color:#fff; 
	color:#000000;
	font-size:15px;
}
#order_ban img { margin:20px 0 5px 0;}
#order_ban a{ color: #666666; font-weight:bold;}
#order_ban a:hover { color: #999999;}
.list_sp { margin:0 7px;}

/*==================
ストーリー
==================*/
#story{
	text-align: center;
	padding: 80px 30px 80px 30px;
}
#story h3{}
#story p{
	font-size: 20px;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	color: #fff;
	font-weight: bold;
	text-shadow: 0px 0px 3px #0a69a5, 1px 0px 3px #0a69a5, 1px 1px 3px #0a69a5, 0px 1px 3px #0a69a5, 2px 1px 3px #0a69a5,0px 3px 3px #0a69a5;
}
/*==================
キャラクター
==================*/

.sub_nav .chara_nav{
	background-color: #2b2d3c;
	border: 2px solid #dee6c2;
	display: inline-block;
	margin: 0.5%;
	max-width: 54px;
	width: 10%;
	position: relative;
	
	box-sizing: border-box;
	overflow: hidden;
}
.sub_nav .chara_nav img{
	width: 100%;
}
.sub_nav .chara_nav .new{
	font-size:8px;
	top: 1%;
	bottom: auto;
	left: -30%;
	
	text-align:center;
	transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
	display:inline-block;
	border-top:solid 1px #FFF;
	border-bottom:solid 1px #FFF;
	z-index:10;
}
.sub_nav .chara_nav:hover{
	background-color: #441e1b;
	border-color: #fff;
}
.sub_nav .selected{
	background-color: #441e1b;
	border-color: #3a97a2;
}
/**/
#chara_wrap_bg{
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 100%;
}
.chara_wrap{
	width: 100%; 
	max-width: 1600px;
	margin: 0 auto;
}

.chara_intro_box{
	/*padding: 4% 0 0 1%;*/
	padding: 4% 0 33% 1%;
}
.chara_intro_box .chara_name{
	width: 60%;
	max-width: 800px;
}
.chara_intro_box .chara_name img{
	width: 100%;
}

/*★*/
.chara_intro_box .chara_txt{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
	width: 40%;
	line-height: 23px;
	max-width: 640px;
	background-image: url(../img/bk_80.png);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding: 1.0em;
	margin-top: 20px;
}

.chara_intro_box .chara_movie{
	width: 38%;
	padding: 1.0em;
}
.chara_intro_box .chara_movie #movie_box{
	width:100%;
	max-width:850px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
}

.chara_intro_box .chara_movie #movie_box li{
	box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 1%;
    margin: auto;
	padding-bottom:20px;
}
.chara_intro_box .chara_movie #movie_box li .youtube{
	position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 10px;
}
.chara_intro_box .chara_movie #movie_box li .youtube iframe{
	border:solid 4px #000;
	background-color: #000;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
/*==================
システム
==================*/
#system{
	width: 100%;
	box-sizing: border-box;
	padding: 1%;
	color: #FFF;
}

/**共通**/
#system .div_wrap{
	width: 96%;
	max-width: 1300px;
	margin: 0 auto;
	background-image: url(../img/bk_60.png);
	box-sizing: border-box;
	padding: 2%;
}
#system .div_wrap .caution:before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
#system .div_wrap .caution{
	color: red;
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	margin: 10px 0;
	font-size: 13px;
}

#system .div_wrap .title_read{
	width: 100%;
	border-left: 8px solid #c8b58a;
	color: #c8b58a;
	font-size: 32px;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	box-sizing: border-box;
	padding: 0.5em;
	font-weight: bold;
}/*ページ見出し*/

#system .div_wrap p{
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	/*font-weight: bold;*/
	font-size: 16px;
}

#system .div_wrap h5{
	margin: 0 auto;
	max-width: 1300px;
	width: 96%;
	box-sizing: border-box;
	padding: 1.0em 0.5em;
}/*見出し*/

#system .div_wrap h5 p{
	font-size: 24px;
	text-shadow: 0px 0px 3px #0a69a5, 1px 0px 3px #0a69a5, 1px 1px 3px #0a69a5, 0px 1px 3px #0a69a5, 2px 1px 3px #0a69a5,0px 3px 3px #0a69a5;
}
#system .div_wrap h5 small{
	font-size: 16px;
}

#system .div_wrap .w_50{
	width: 48%;
	margin: 1%;
}
#system .div_wrap .center_box{
	margin: 0 auto;
	max-width: 1000px;
	width: 90%;
}

#system .div_wrap .img_border{
	box-sizing: border-box;
	border: 1px solid #c8b58a;
	overflow: hidden;
}
#system .div_wrap .img_border:after{
	content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}


#system .div_wrap .popup{
	display: inline-block;
	max-width: 500px;
}
#system .div_wrap .popup:hover{
	opacity: 0.7;
}
#system .div_wrap .readme{
	width: 90%;
	margin: 0 auto;
	font-size: 13px;
	padding: 10px 0 10px 0;
	box-sizing: border-box;
	max-width: 1300px;
	color: #fff;
}/*テキスト*/

#system .div_wrap .ss_img{
	width: 90%;
	margin: 0 auto;
	max-width: 1300px;
	text-align: center;
}/*画像*/

#system .div_wrap .border_box{
	box-sizing: border-box;
	border: 1px solid #c8b58a;
	padding: 3%;
	margin: 2%;
}
#system .div_wrap .border_box img{
    vertical-align: -webkit-baseline-middle;
}

#system .div_wrap .in_box{
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
	background-color: #441e1b;
	margin: 1% 0;
	border-radius: 10px;
}
#system .div_wrap .list_box{
	width: 100%;
	box-sizing: border-box;
	background-color: #441e1b;
	margin: 1% 0;
	border-radius: 10px;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 16px;
}

#system .div_wrap .list_box h6{
	font-size: 16px;
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
	color: #c8b58a;
	background-color: #262a36;
	border-left: 6px solid #c8b58a;
}
#system .div_wrap h6 .in_box{
	color: #FFF;
	font-weight: normal;
}

#system .div_wrap .list_box .float_l{
	/*float: left;*/
	width: 100%;
	/*margin: 1%;*/
	box-sizing: border-box;
}
#system .div_wrap .list_box .float_r{
	/*float: right;*/
	width: 96%;
	margin: 1% auto;
	box-sizing: border-box;
}

#system .div_wrap .list_box .formation_box{
	width: 50%;
	/*border-bottom: 1px solid #776f5e;*/
	box-sizing: border-box;
	float: left;
	padding: 2%
}
#system .div_wrap .list_box .formation_box:nth-child(2),#system .div_wrap .list_box .formation_box:nth-child(5){
	background-color: #331a18;
}
#system .div_wrap .list_box .formation_box:nth-child(5){
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
}


#system .div_wrap .border_box section{
	padding: 1%;
}
#system .div_wrap .border_box hr{
	border: none;
	height: 1px;
	background-color:#776f5e ;
}

#system .div_wrap span.num{
	padding: 0.4em;
	color: #c8b58a;
	font-weight: bold;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 21px;
}
#system .div_wrap p span{
	color: #c8b58a;
	color: #e3ae7e;
	font-weight: bold;
	text-shadow: #000 1px 1px 0px;
}
#system .div_wrap span.cell{
	border-radius: 10px;
	padding: 0.3em;
	display: inline-block;
	background-color: #262a36;
	color: #FFF;
	margin: 0.3em;
	text-shadow: none;
}
#system table.txt_list{
	color: #fff;
	font-weight: normal;
	padding: 1%;
	margin: 1% 0;
	width: 100%;
}
#system table.txt_list th{
	text-align: left;
	width: 140px;
	padding: 0.3em;
	box-sizing: border-box;
	background-color: #c8b58a;
	color: #262a36;
}
#system table.txt_list tr{
	margin-bottom: 1%;
	display: inline-block;
	width: 100%;
}
#system table.txt_list td{
	padding: 0 1%;
	width: 80%;
}

#system table.icon_cell{
	color: #fff;
	font-weight: normal;
	padding: 1%;
	margin: 1% 0;
}
#system table.icon_cell tr{
	float: left;
	min-width: 460px;
	margin-bottom: 1%;
}
#system table.icon_cell th{
	border: 1px solid #c8b58a;
	box-sizing: border-box;
}
#system table.icon_cell th img{
	max-width: 50px;
}
#system table.icon_cell td{
	padding: 0 1%;
	width: 100%;
	box-sizing: border-box;
	min-width: 400px;
}
#system table.type_cell{
	color: #fff;
	font-weight: normal;
	padding: 1%;
	margin: 1% 0;
	width: 100%;
}
#system table.type_cell tr{
	float: left;
	min-width: 100px;
	margin-bottom: 1%;
	
}
#system table.type_cell th{
	border: 1px solid #c8b58a;
	box-sizing: border-box;
}
#system table.type_cell th img{
	max-width: 50px;
}
#system table.type_cell td{
	padding: 0 1%;
	width: 100%;
	box-sizing: border-box;
	min-width: 80px;
}
#system table.status_cell{
	color: #fff;
	font-weight: normal;
	padding: 1%;
	margin: 1% 0;
	width: 100%;
}
#system table.status_cell tr{
	float: left;
	min-width: 235px;
	margin-bottom: 1%;
	width: 33%;
	box-sizing: border-box;
}
#system table.status_cell th{
	border: 1px solid #c8b58a;
	box-sizing: border-box;
}
#system table.status_cell th.status_name{
	display: inline-block;
	width: 97%;
	background-color: #c8b58a;
	color: #262a36;
	padding: 0.3em;
}
#system table.status_cell th img{
	max-width: 50px;
}
#system table.status_cell td{
	padding: 0 1%;
	width: 100%;
	box-sizing: border-box;
	min-width: 80px;
}



/*==================
サウンド★
==================*/
#sound{
	width: 100%;
	box-sizing: border-box;
	padding: 1%;
	
	color: #FFF;
}

/**共通**/
#sound .div_wrap{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	background-image: url(../img/bk_60.png);
	box-sizing: border-box;
	padding: 2%;
}
#sound .div_wrap .caution:before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
#sound .div_wrap .caution{
	color: red;
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	margin: 10px 0;
	font-size: 13px;
}

#sound .div_wrap .title_read{
	width: 100%;
	border-left: 8px solid #c8b58a;
	color: #c8b58a;
	font-size: 32px;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	box-sizing: border-box;
	padding: 0.5em;
	font-weight: bold;
}/*ページ見出し*/

/*見出し*/

#sound .div_wrap .readme{
	width: 90%;
	margin: 0 auto;
	font-size: 13px;
	padding: 10px 0 10px 0;
	box-sizing: border-box;
	max-width: 1300px;
	color: #fff;
}/*テキスト*/


/*楽曲情報*/
#sound .div_wrap .music_info{
	width: 100%;
	padding: 1.0em 0;
	box-sizing: border-box;
	margin-bottom: 40px;
}

#sound .div_wrap .music_info .box{
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding: 3.0em 1.0em 3.0em 1.0em;
	line-height: 1.5em;
	
	background-image: url(../img/sound/musictitle_bg.png);
	background-repeat: no-repeat;
	background-position: center;
	
}
#sound .div_wrap .music_info small{
	background-color: #262a36;
	color: #c8b58a;
	padding: 4px;
	display: inline-block;
	border-radius: 4px;
	font-weight: bold;
}
#sound .div_wrap .music_info h4{
	font-family: 'Noto Serif',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	width: 100%;
	font-size: 26px;
	padding: 0.5em;
	margin: 5px auto;
	box-sizing: border-box;
	color: #c8b58a;
}
/*アーティスト情報*/
#sound .div_wrap .artist_info{
	width: 100%;
}
#sound .div_wrap .artist_info h4{}


#sound .div_wrap .artist_info section{
	width: 100%;
	margin: 2% 0;
	box-sizing: border-box;
	border: 1px solid #c8b58a;
	
	background: #000;
	background:
		linear-gradient(-45deg,#c8b58a 15px, transparent 0) right,
		linear-gradient(135deg,#c8b58a 15px, transparent 0) right
		;
	
}

#sound .div_wrap .artist_info section .profile{
	float: right;
	display: insline-block;
	box-sizing: border-box;
	width: 73%;
	padding: 1% 1% 1% 1%;
}

#sound .div_wrap .artist_info section .photo{
	float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 27%;
	text-align: center;
	padding: 1% 0 1% 1%;
}

#sound .div_wrap .artist_info section .name{
	font-family: 'Noto Serif', serif;
	font-size: 21px;
	font-weight: bold;
	color: #c8b58a;
	padding: 0.2em 0;
}

#sound .div_wrap .artist_info section .read{
	font-family: 'Noto Serif', serif;
	font-size: 16px;
	font-weight: bold;
	color: #c8b58a;
	padding: 0 0 0.2em 0;
}

#sound .div_wrap .artist_info section .txt{
	margin-bottom: 10px;
	margin-right:20px;
}

#sound .div_wrap .artist_info .site_link{
	color: #fff;
	background-color: #3a97a2;
	display: inline-block;
	padding: 0.4em;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	margin: 4px;
}
#sound .div_wrap .artist_info .site_link:hover{
	background-color: #a2453a;
}


/*==================
特典
==================*/

 .link_img{
	width: 100%;
	max-width: 15px;
	margin-left: 4px;
}
.dia_mark{
	color: #fff;
}

/*インフォナビ*/

#shop_info{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	background-image: url(../img/bk_60.png);
	box-sizing: border-box;
	padding: 2%;
}/*枠*/

#shop_info .title_read{
	width: 100%;
	border-left: 8px solid #c8b58a;
	color: #c8b58a;
	font-size: 32px;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	box-sizing: border-box;
	padding: 0.5em;
	font-weight: bold;
}/*ページ見出し*/
#shop_info .readme{
	width: 90%;
	margin: 0 auto;
	font-size: 13px;
	padding: 10px 0 10px 0;
	box-sizing: border-box;
	max-width: 1600px;
	color: #fff;
}/*テキスト*/
#shop_info .type_read{
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	font-size: 32px;
	
	color: #dee6c2;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-weight: bold;
	/*padding: 0.2em;*/
	margin-bottom: 10px;
}/*種類見出し*/
#shop_info .type_read span{
	border-bottom: 1px solid #dee6c2;
	width: 100%;
	display: inline-block;
}
#shop_info .type_read small{
	font-size:21px;
}

#shop_info article{
	width: 32%;
	float: left;
	margin: 0.6%;
	color: #fff;
	box-sizing: border-box;
	border: 1px solid #c8b58a;
}/*各店枠*/

#shop_info article section{
	padding: 1%;
}
#shop_info article section img{
	width: 100%;
}/*サンプル*/

#shop_info .caution:before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
#shop_info .caution{
	color: #fff;
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	margin: 0 0;
	font-size: 13px;
}

#shop_info article h3{
	font-size: 21px;
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box;
	color: #c8b58a;
	background-color: #262a36;
	border-left: 6px solid #c8b58a;
	
}/*店名*/
#shop_info article .shop_link{
	text-align: center;
	padding: 1em;
	margin: 3% 5% 1% 5%;
	box-sizing: border-box;
	width: 90%;
	background-color: cadetblue;
	display: inline-block;
	color: #FFF;
}/*各店リンク*/
#shop_info article .shop_link:hover{
	background-color: orange;
}
#shop_info article .shop_link .link_img{
	width: 100%;
	max-width: 15px;
	margin-left: 4px;
}
#shop_info article h3.wrap{
	font-size: 18px;
	width: 100%;
	padding: 0.2em;
	box-sizing: border-box;
	color: #c8b58a;
	background-color: #441e1b;
	border: none;
	margin: 4px 0 0 0;
}

#shop_info article h4,#shop_info article p.shop_h4{
	font-size: 16px;
	padding: 0.5em;
	background-color: #262a36;
	margin: 4px 0 0 0;
	color: #c8b58a;
}/*特典名*/
#shop_info article h4.span{
	color: #fff;
}
#shop_info article .txt{
	font-size: 13px;
	padding: 0.5em;
}/*テキスト*/

/*==================
予約・限定版特典
==================*/
/***予約***/
#reservation_info{
}/*枠*/


/***限定版***/
#limited_info{
}/*枠*/

/**共通**/
#reservation_info,
#limited_info{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	background-image: url(../img/bk_60.png);
	box-sizing: border-box;
	padding: 2%;
}
#reservation_info .caution:before,
#limited_info .caution:before{
	content: "※";
	display: inline-block;
	text-indent: 0em;
}
#reservation_info .caution,
#limited_info .caution{
	color: red;
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	margin: 10px 0;
	font-size: 13px;
}

#reservation_info .title_read,
#limited_info .title_read{
	width: 100%;
	border-left: 8px solid #c8b58a;
	color: #c8b58a;
	font-size: 32px;
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	box-sizing: border-box;
	padding: 0.5em;
	font-weight: bold;
}/*ページ見出し*/

/*見出し*/

#reservation_info .readme,
#limited_info .readme{
	width: 90%;
	margin: 0 auto;
	font-size: 13px;
	padding: 10px 0 10px 0;
	box-sizing: border-box;
	max-width: 1300px;
	color: #fff;
}/*テキスト*/

#reservation_info .sample_img,
#limited_info .sample_img{
	width: 90%;
	margin: 0 auto;
	max-width: 1300px;
}/*サンプル*/

#reservation_info article,
#limited_info article{
	width: 90%;
	margin: 0 auto;
	max-width: 1300px;
}
#reservation_info article section,
#limited_info article section{
	width: 100%;
	margin: 10px auto;
	font-size: 16px;
	color: #fff;
}

#reservation_info h4,
#limited_info h4{
	width: 100%;
	font-size: 16px;
	padding: 0.5em;
	margin: 5px auto;
	box-sizing: border-box;
	color: #c8b58a;
	background-color: #262a36;
}
/*==================
更新履歴
==================*/
#log_info{
	width: 100%;
	color: #fff;
	max-width: 960px;
	margin: 0 auto;
	min-height: 300px;
}

#log_info .box{
	color: #dee6c2;
	width: 100%;
	/*background-color: #262a36;
	border: 1px solid #dee6c2;*/
	padding: 2%;
	box-sizing: border-box;
	background-image: url(../img/bk_60.png);
}

#log_info .box .log{
	background-color: #010a24;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	padding: 4px;
	box-sizing: border-box;
	/*font-weight: bold;*/
	font-size: 16px;
	font-weight: normal;
}
#log_info .box .log:nth-child(odd){
	background-color: #0d1428;
}

#log_info .box .log .ymd{}

#log_info .box .read{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 21px;
	font-weight: bold;
	padding: 0.5em;
}

/*==================
製品情報
==================*/
#info{
	width: 100%;
	box-sizing: border-box;
	padding: 1%;
}

#product_info{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 30px 0 30px 0;
	
}
#product_info .read{
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	color: #dee6c2;
	font-weight: bold;
	font-family: 'Noto Serif', serif;
	font-size: 48px;
}

#product_info .box{
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	background-color: #84492b;
	background-image: url(../img/bg_pattern1.png);
	background-repeat: repeat;
	background-size: 80px;
	box-shadow: 0px 0px 50px 0px rgba(106,45,24,1.00) inset;
}
#product_info .box .jacket{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}
#product_info .box .info_txt{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	width: 100%;
	padding: 2%;
	box-sizing: border-box;
}
#product_info .box .info_txt .spec{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	line-height:1.5;
	max-width: 650px;
	margin: 0 auto;
	font-size: 16px;
}
#product_info .box .info_txt .spec th{
	text-align:center;
	padding: 6px;
	width: 130px;
	/*font-size: 14px;*/
	font-weight: bold;
	background-color: #262a36;
	color: #c8b58a;
}
#product_info .box .info_txt .spec td{
	padding-left:10px;
	/*font-size: 14px;*/
	color: #dee6c2;
	font-weight: bold;
}


/*==================
Gallery
==================*/

#gallery {
padding: 50px 30px 80px 30px;
}
#gallery_box{
	margin:auto;
	text-align:center;
}
#gallery_box a {
	position: relative;
	display: inline-block;
	width:100%;
	max-width: 300px;
	margin: 5px 2px;
}
#gallery_box img{
	vertical-align:bottom;
	margin: 5px 5px;
	border:solid 1px #dee6c2;
}

#gallery img:hover{
	border:solid 1px #9ca188;
}


#gallery_box p {
  position: absolute;
  top: 6px;/*画像の左上に配置*/
  left: 6px;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: #408080;/*背景色*/
  font-size: 11px;
  line-height: 1;/*行高は1に*/
  padding: 3px 10px;/*文字周りの余白*/
  }


/*==================
ムービー
==================*/
#movie{
	width: 100%;
	padding: 7% 2% 10% 2%;
	box-sizing: border-box;
	text-align: center !important;
	margin: 0 auto;
}
#movie article{
	width: 90%;
	text-align: center !important;
	margin: 0 auto;
}
#movie article a{
	float: left;
	width: 30%;
	padding: 1%;
	box-sizing: border-box;
	background-color: #000;
	margin: 1%;
	border: 1px solid #000
}
#movie article a:hover{
	border-color: #fff;
	background-color: #3a97a2;
}

#movie article section{
	width: 100%;
}
#movie article section .ss_image{
	width: 100%;
}
#movie article section p{
	font-size: 16px;
	color: #fff;
	padding: 0.4em;
	font-family: "Yu Gothic", "YuGothic","Sawarabi Gothic","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-weight: bold;
	font-size: 16px;
}


/*==================
システム
==================*/
#system{
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	background-color: #FFF;
}/*枠*/

/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
/*表示*/
.view_pc{display: none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}

/*==================
TOP
==================*/
#top_wrap #key{
	width: 100%;
	
	float:none;
}
/*サイド*/
#top_wrap .side_box{
	width: 90%;
	margin: 0 auto;
	padding: 0;
	float:none;
	max-width: none;
}
#top_wrap .side_box .news_box{
	margin-bottom: 10px;
}
#top_wrap .side_box .banner_box {
	/*width: 100%;
	text-align: center;*/
	width: 200%;
	text-align: left;
}
#top_wrap .side_box .side_banner{
	width: 48%;
	margin: 1%;
}
/*トップ製品情報*/
#top_product_info .box .jacket{
	width: 100%;
	float: none;
}
#top_product_info .box .info_txt{
	width: 100%;
	float: none;
}
/*==================
ストーリー
==================*/
#story{
}
#story h3{}
#story p{
	font-size: 18px;
	text-align: left;
}
/*==================
キャラクター
==================*/
#chara_wrap_bg{
	background-size: 200%;
	background-position: top right 10%;
}
.chara_intro_box{
	padding: 100% 0 20px 0;
	width: 100%;
}

.chara_intro_box .chara_name{
	width: 100%;
}
.chara_intro_box .chara_txt{
	width: 90%;
	margin: 15px auto 0 auto;
	box-sizing: border-box;
}
	
.chara_intro_box .chara_movie{
	width: 90%;
	box-sizing: border-box;
	padding: 0;
	margin: 10px auto;
}
/*==================
システム
==================*/
#system table.txt_list th{
	min-width: inherit;
display: block;
width: 100%;
box-sizing: border-box;
}

	
	
#system table.icon_cell tr{
	min-width: inherit;
	width: 100%;
}
#system table.icon_cell th img{
	width: 30px;
}
#system table.icon_cell td{
	min-width: inherit;
}
#system table.type_cell th img{
	width: 30px;
}
#system table.type_cell td{
	min-width: 10px;
}
#system table.status_cell tr{
	width: 100%;
	min-width: auto;
	margin-bottom: 2%;
}
#system table.status_cell th.status_name{
	text-align: left;
}
#system table.status_cell th img{
	width: 30px;
}
/*==================
特典
==================*/
#shop_info article{
	width: 48%;
	margin: 0.5%;
}
/*==================
ムービー
==================*/
#movie article a{
	width: 48%;
}
	
}/*-- media:768px --*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
/*表示*/
.view_pc{display: none;}
.view_pc_tb{display: none;}
.view_tb{display:none;}
.view_tb_sp{display:block;}
.view_sp{display:block;}
/*==================
CONTENT
==================*/
.title_read .wrap p{
	font-size: 10.0vw;
}
.sub_nav .wrap .txt_nav{
	font-size: 3.6vw;
}
	
/*==================
load
==================*/
#loader{padding-top: 40%;}
	
/*==================
header
==================*/
header{
	padding: 1%;
}
header nav{}
header nav a{
	font-size: 3.2vw;
	padding: 0;
	width: 25%;
	box-sizing: border-box;
	min-height: 40px;
	line-height: 1.0;
	display: flex;
	position: relative;
	
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	float: left;
}
header nav a:hover,
header nav a.selected{
	background-size: 20px;
}
	
	
/*==================
footer
==================*/
footer #banner_box img{
		width: 49%;
		box-sizing: border-box;
}
#sns_box a img{
	width: 30px;
	margin-right:3px !important;
}
.sns_icon { margin-left:2px;}
/*==================
背景
==================*/
#content{
	background: none;
}
#content::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background:  url(../img/teaser/wrapper_bg.jpg) center/cover no-repeat;
    -webkit-background-size: cover;
}
/*==================
TOP
==================*/
#top_product_info .read{
	font-size: 10.0vw;
}
#top_product_info .box .info_txt .spec{
	font-size: 3.6vw;
}
#top_product_info .box .info_txt .spec th{
	width: 70px;
}
/*==================
ストーリー
==================*/
#story{
	padding: 10% 10% 10% 10%;
}
#story h3{}
#story p{
	font-size: 3.6vw;
}
/*==================
キャラクター
==================*/

.sub_nav .chara_nav .new{
	font-size: 1.8vw;
	}
.chara_intro_box .chara_txt{
	font-size: 3.6vw;
}

/*==================
システム
==================*/
#system .div_wrap .title_read{font-size: 4.0vw;}
#system .div_wrap .list_box .float_l{float: none;width: 98%;}

#system .div_wrap .list_box .float_r{float: none;width: 45%;margin: 0 auto;}
#system .div_wrap h5 p{font-size: 5.4vw;}
#system .div_wrap p{font-size: 3.4vw;}
#system .div_wrap .list_box{font-size: 3.4vw;}
#system .div_wrap span.num{font-size: 3.6vw;}
#system .div_wrap .readme{font-size: 3.2vw;}
#system .div_wrap .list_box h6{font-size: 3.4vw;}
#system .div_wrap .list_box .formation_box{
	width: 100%;
}
#system .div_wrap .list_box .formation_box:nth-child(2){
	background-color: transparent;
}
#system .div_wrap .list_box .formation_box:nth-child(3),#system .div_wrap .list_box .formation_box:nth-child(5){
	background-color: #331a18;
}
#system .div_wrap .list_box .formation_box:nth-child(5){
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-bottom-left-radius: 10px;
}
#system table.icon_cell{}

	#system table.type_cell tr{
		min-width: auto;
		width: 33%;
	}
	#system table.type_cell th img{
		width: 25px;
	}
/*==================
ムービー
=================*/
#movie article section p{
	font-size: 3.6vw;
}
/*==================
製品情報
=================*/
#product_info .box .info_txt .spec{
	font-size: 3.6vw;
}
/**/	
#reservation_info .readme, #limited_info .readme{
	font-size: 3.2vw;
}
#reservation_info article section,
#limited_info article section{
	font-size: 3.6vw;
}
#reservation_info .title_read, #limited_info .title_read{
	font-size: 4.0vw;
}
/**/
#log_info .box .read,#log_info .box .log{
	font-size: 3.6vw;
}
/**/
#shop_info article{
	width: 98%;
	margin: 1%;
}
#shop_info .readme,#shop_info .caution{
	font-size: 3.2vw;
}
#shop_info .title_read,#shop_info .type_read{font-size: 4.0vw;}
#shop_info .type_read small,#shop_info article h3,#shop_info article p.shop_h4,
#shop_info article h4,#shop_info article h3.wrap{font-size: 3.6vw;}
}/*-- media:480px --*/