/****************************************
		2. レイアウト
*****************************************/

/*
フォント
*/
@import url('https://fonts.googleapis.com/css?family=Federo');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);


/*=================================
layout
=================================*/

body{
	background-color:#fff;
}
img{vertical-align: bottom;}

/*=================================
ヘッダー
=================================*/
header{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

header #logo{
	width: 30%;
	max-width: 320px;
	float: left;
}
header #logo:hover{opacity: 0.7;}
header #logo img{
	max-width: 320px;
	width: 100%;
}

nav{
	font-family: 'Federo', sans-serif;
	float: right;
	max-width: 800px;
	width: 70%;
	box-sizing: border-box;
	margin-top:40px;
}
nav ul{}
nav ul li{
	text-align: center;
	height: 80px;
	width: 100%;
	float: left;
	color: #2c6eb7;
	font-size: 18px;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	line-height: 1.0;
	position: relative;
	
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
nav a{
	display: inline-block;
	background-color: #fcfafa;
	width: 25%;
	vertical-align: bottom;
}

nav a:nth-child(2),
nav a:nth-child(4),
nav a:nth-child(5),
nav a:nth-child(7){background-color: #f8f6f6;}

nav a:hover{
	opacity: 0.7;
	background-image: url(../img/nav/a.png), url(../img/nav/c.png);
	background-position: bottom right, top left;
	background-repeat: no-repeat, no-repeat;
}
nav a.select{
	background-image: url(../img/nav/a.png), url(../img/nav/c.png);
	background-position: bottom right, top left;
	background-repeat: no-repeat, no-repeat;
}

.no_select{
	opacity: 0.2;
	pointer-events: none;
}

/*=================================
配置
=================================*/
#wrapper{
	width:100%;
	position: relative;
	background-image: url(../img/bg_wt.png),url(../img/bg.jpg);
	background-repeat: no-repeat,repeat;
	background-position: top center ,center;
	border-bottom: 1px #2c6eb7 solid;
	border-top: 1px #2c6eb7 solid;
}

#box_second{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}
.read{
	font-size: 60px;
	color: #7e7e7e;
	font-family: 'Federo', sans-serif;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 59%, #f8f6f6 59%, #f8f6f6 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	line-height: 1.2em;
	margin-bottom: 20px;
	padding: 0.5%;
}
#contents_wrap{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
#sub_menu{
	background-color:#f8f6f6;
	color: #FFF;
	padding:0.5%;
}
#sub_menu a{
	background-color: #b8b8b8;
	display: inline-block;
	color: #FFF;
	padding: 12px;
	margin: 0.5%;
}
#sub_menu a:hover,#sub_menu a.selected{background-color: #8eadd0;}

#contents{
	background-color:#f8f6f6;
	padding: 2%;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 30px;
	position: relative;
}

.contents_bg{
	background-image: url(../img/contents_side_a.png), url(../img/contents_side_b.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, top right;
}
.font_style{
	color: #7e7e7e;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.font_style2{
	color: #1A1A1A;
	color: #555555;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
/*=================================
装飾
=================================*/
.new{
	position: absolute;
	top: 0;
	left: 0;
	background-color:#AF1518;
	color: #FFF;
	text-shadow: none;
	font-size: 13px;
	padding: 3px 3px 3px 3px;
	font-family: 'Federo', sans-serif;
}
.newContents{
	background-color:#AF1518;
	font-family: 'Federo', sans-serif;
	color: #FFF;
	text-shadow: none;
	font-size: 11px;
	padding:0 3px;
	margin-right: 2px;
}
/*=================================
フッター
=================================*/
footer{
	width:100%;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

footer a:hover{opacity: 0.7;}

.footer_banner img{width: 100%; box-sizing: border-box;}
.footer_banner a{margin-bottom: 5px;display: inline-block;}

#footer_wrap{width:96%; margin:0 auto;}


/*ロード*/
#loader{
	height: 100%;
	width: 100%;
	position: absolute; 
	z-index: 10;
	background-color: #FFF;
	position:fixed;
	background-color: rgba(255,255,255,0.70);/*背景色：不透明70％*/
}
#loadcount {
	font-family: 'Marvel', sans-serif;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 25px;
	color: #8b8b8b;
	margin-top: 15%;
	padding-top: 10%;
}
/*=================================
トップ
=================================*/
.box_top{background-color: #FFF;}

#key{
	width: 100%;
	position: relative;
	float: left;
	box-sizing: border-box;
}
#key img{
	width: 100%;
	margin: 0 auto;
}

#box_side{
	box-sizing: border-box;
	width: 1300px;
	margin: 0 auto;
	position: absolute;
}
#news{
	background-color: #2c6eb7;
	color: #FFF;
	width: 300px;
	padding: 2%;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	margin: 15px;
}
#news strong{}
#news p{
	border-bottom:1px solid #FFF;
	margin-bottom: 3px;
	font-size:12.5px;
}
#news_head{
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-bottom: 4px;
}
#news_list{overflow: auto;height: 130px;line-height: 1.4em;}

#box_side a{width: 100%; margin-bottom: 3px; display: inline-block;}
#box_side a:hover{opacity: 0.7;}
#box_side img{width: 100%;}

#box_side #news_list a{color: #FFF; margin-bottom: 0;padding: 3px 0;}
#box_side #news_list a:hover{
	background-color: #000;
	background-image: url(../img/bg.jpg);
	opacity: 1.0;
}
.movie_bn{position:absolute;}
.movie_bn_top{position:absolute; z-index: 1;}
.fade{
	-webkit-animation: light1 20s linear infinite;
	-moz-animation: light1 20s linear infinite;
	-ms-animation: light1 20s linear infinite;
	-o-animation: light1 20s linear infinite;
	animation: light1 20s linear infinite;
}
.order_link{
	color: #fff;
	background-color:#fff;
	width: 300px;
	margin: 15px;
}
.order_link img{
	height:105%;
	box-sizing: border-box;
}

.order_link a:hover{
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}

#order_ban {
    width:250px; 
	height: 330px !important;
	text-align:center; 
	background-color:#fff; 
	color:#000000;
	font-size:15px;
	padding-top: 10px;
}
#order_ban img { margin:20px 0 5px 0;}
#order_ban a{ color: #666666; font-weight:bold;}
#order_ban a:hover { 
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
.list_sp { margin:0 7px;}

/*キーフレーム*/
@-webkit-keyframes light1 {
	40% { opacity:1.0;}
	43% { opacity:0.0;}
	85% { opacity:0.0;}
	88% { opacity:1.0;}
}
@-moz-keyframes light1 {
	40% { opacity:1.0;}
	43% { opacity:0.0;}
	85% { opacity:0.0;}
	88% { opacity:1.0;}
}
@-ms-keyframes light1 {
	40% { opacity:1.0;}
	43% { opacity:0.0;}
	85% { opacity:0.0;}
	88% { opacity:1.0;}
}
@-o-keyframes light1 {
	40% { opacity:1.0;}
	43% { opacity:0.0;}
	85% { opacity:0.0;}
	88% { opacity:1.0;}
}
@keyframes light1 {
	40% { opacity:1.0;}
	43% { opacity:0.0;}
	85% { opacity:0.0;}
	88% { opacity:1.0;}
}

/*=================================
シリーズ説明
=================================*/
.intro_logo{
	width: 100%;
	text-align: center;
	color: #555555;
}
.intro_logo img{width: 100%;}

.intro_txt1{ width: 80%; font-size: 17px;margin: 2%; padding-left:8%;  auto 1% auto; color:#555555; font-family:Arial, Helvetica, sans-serif;}
.intro_txt2{
	font-size: 17px;margin: 5% auto;
	background-color: #fff;
	padding:2% 4%;
	color:#555555;
	max-width: 740px;
	font-family:Arial, Helvetica, sans-serif;
}
.intro_read{
	font-size: 20px;
	font-weight: bold;
	color: #7e7e7e;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 59%, #f8f6f6 59%, #f8f6f6 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	line-height: 1.2em;
	margin-bottom: 10px;
	padding: 0.5%;
}
/*=================================
ストーリー
=================================*/
.story_sub_menu{max-width:424px;}

.story_bg1{
	background-image: url(../img/contents_side_a.png), url(../img/contents_side_b.png),url(../img/story/story_bg1.jpg);
}
.story_bg2{
	background-image: url(../img/contents_side_a.png), url(../img/contents_side_b.png),url(../img/story/story_bg2.jpg);
}
.story_bg3{
	background-image: url(../img/contents_side_a.png), url(../img/contents_side_b.png),url(../img/story/story_bg3.jpg);
}
.story_bg1,
.story_bg2,
.story_bg3{
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: bottom left, top right, bottom right;
	background-size: auto, auto, 100%;
	min-height: 720px;
}

.story_logo{
	width: 100%;
	max-width: 446px;
}
.story_logo img{width: 100%;}



.story_txt1{font-size: 16px;margin: 2% 0 1% 1%;}
.story_txt2{font-size: 18px;margin: 5% 0 1% 1%;}
.story_txt3{font-size: 40px;margin: 4% 0 1% 1%;}

span.f_pink{color:#ff4598;}
span.f_red{color: #e30011;}
span.f_yellow{color: #ddc10c;}


/*=================================
キャラクター
=================================*/
#contents_wrap .chara_bg{padding: 2% 0 0 2%;}

#chara_image{ position: relative;}
/*#chara_image img{width: 100%;max-width: 550px;}*/
#chara_image img{width: 100%;max-width: 800px;}
#chara_image .chara_img{position: absolute;bottom: 0;right: 0;opacity: 0;}
#chara_image .targrt{position: absolute;bottom: 0;right: 0;opacity: 1;}

#chara_txt_box{position: absolute; width: 50%;top:8%;}
.chara_name{background-color: #FFF; max-width:445px;}
.chara_name .name{
	font-size: 60px;
	border-bottom: 1px solid #7e7e7e;
	color: #7e7e7e;
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝","Sawarabi Mincho", serif;
	padding: 2% 0 0 2%;
}
.chara_name .spell{font-size: 14px;color: #7e7e7e;margin: 6px 0 0 2%;}
.chara_name .cv_name{font-size: 14px;color: #7e7e7e;margin: 3% 0 0 2%;padding: 0 0 3% 0;}

.chara_txt1{font-size: 14px;margin: 6% 0 1% 1%;}

.chara_cos{max-width: 445px;margin: 6% 0 0 0;font-size: 14px;}
.chara_cos .chara_cos_head{border-bottom: 1px solid #7e7e7e;padding: 0 0 0 1%;}
.chara_cos .chara_cos_body{}
.chara_cos .chara_cos_body .btn{
	cursor: pointer;
	background-color: #b8b8b8;
	display: inline-block;
	color: #FFF;
	padding: 12px;
	margin: 1%;
}
.chara_cos .chara_cos_body .btn:hover{
	background-color: #8eadd0;
}
.chara_cos .chara_cos_body .select_btn{
	background-color: #8eadd0;
}
#chara_subchara{}

#contents_wrap .subchara_bg{
	padding: 2% 0 0 0;
}
.subchara_box{
	border-bottom: 1px solid #7e7e7e;
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 50%;
	margin-top: 20px;
	margin-bottom: 20px;
}
.subchara_box .space{display: none; width: 90%;margin: 0 auto}
.subchara_box .chara_name{margin-bottom: 1%;}
.subchara_txt1{font-size: 14px;margin: 20px 0 50px 1%;}

/*=================================
システム
=================================*/
.system_txt_h{float: left;width: 48%;padding-top: 30px;color:#555555;}
.system_txt_h span{color: #2c6eb7;}
.system_img_h{float: left;width: 48%;}
.system_img_h img{width: 100%;}
.system_img_h p{width: 98%; background-color: #FFF;padding: 1%;}
.system_img_h p span{
	font-weight: bold;
	width: 100%;
	color: #1A1A1A;
	display: block;
	text-shadow: #FFF 1px 1px 0px, #ac8824 2px 2px 1px;
	background: -moz-linear-gradient(top, transparent 0%, transparent 59%, #ac8824 59%, #ac8824 100%);
	background: -webkit-linear-gradient(top, transparent 0%,transparent 59%,#ac8824 59%,#ac8824 100%);
	background: linear-gradient(to bottom, transparent 0%,transparent 59%,#ac8824 59%,#ac8824 100%);
	font-size: 20px;
	margin-bottom: 4px;
}

.system_add{margin:0 1%;}
.system_box_a{
	width: 100%;
	background-repeat: no-repeat;
	background-position: top right;
	min-height: 460px;
}
.system_box_a_add{
	width: 100%;
	min-height: auto;
}

.system_bg_1{background-image: url(../img/system/system_img2_.png);}
.system_bg_2{background-image: url(../img/system/system_img2_.png);}

.system_read{
	font-size: 28px;
	color:#1A1A1A;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	background: -moz-linear-gradient(top, transparent 0%, transparent 59%, #ac8824 59%, #ac8824 100%);
	background: -webkit-linear-gradient(top, transparent 0%,transparent 59%,#ac8824 59%,#ac8824 100%);
	background: linear-gradient(to bottom, transparent 0%,transparent 59%,#ac8824 59%,#ac8824 100%);
	line-height: 1.2em;
	margin-bottom: 20px;
	padding: 0.8%;
	
	text-shadow: #FFF 1px 1px 0px, #ac8824 2px 2px 1px;
	
}

/*=================================
ギャラリー
=================================*/
.gallery_read{
	font-size: 24px;
	margin: 2% 0 1% 0;
	padding: 0.5%;
	border-left: 4px solid;
	border-bottom: 1px solid;
}

.r_pink{color:#ff4598;border-color:#ff4598;}
.r_red{color:#e30011;border-color:#e30011;}
.r_yellow{color:#ddc10c;border-color:#ddc10c;}

.cg_box{width: 100%;padding-bottom: 30px;}
.cg_box a{width:19%;margin: 0.5%;display: inline-block;box-sizing: border-box;max-width: 160px;border:double 3px #7e7e7e; position: relative;}
.cg_box a img{width: 100%;}
.cg_box a:hover{border-color:#FFF;}


.cg_box p {
  position: absolute;
  top: 0px;/*画像の左上に配置*/
  left: 0px;
  margin: 0; /*余計な隙間を除く*/
  color: #FFF;
  font-family: 'Federo', sans-serif;
  background-color:#AF1518;
  font-size: 10px;
  line-height: 1;/*行高は1に*/
  padding: 3px 7px;/*文字周りの余白*/
  }

/*=================================
サウンド
=================================*/
.sound_txt{
	font-size: 16px;margin: 5% 0;
	background-color: #fff;
	padding:2% 4%;
	max-width: 740px;
	text-align: center;
	width: 40%;
	margin: 1%;
	float: left;
	line-height: 1.5em;
}
.sound_txt span{
	font-size: 30px;
	color: #2c6eb7;
	line-height: 2.0em;
}
/*=================================
スペシャル
=================================*/
/*ムービー*/
#movieBox li {
	display: inline-block;
	width: 60%;
	padding: 1% 19%;
}
#movieBox .movie_title{
	color: #8c8c8c;
	font-size: 16px;
	background-color:#7e7e7e;
	color: #FFF;
	padding: 1%;
	width: 100.3%;
	box-sizing: border-box;
}
#movieBox .youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 30px;
    border: solid 1px #ccc;
}
#movieBox .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
/*=================================
インフォメーション
=================================*/
.jacket{margin: 20px auto; width: 90%;max-width: 600px;}
.jacket img{width: 100%;}
.product_info{margin: 20px auto;width: 90%;max-width: 560px;}

.product{width: 100%; font-family:Arial, Helvetica, sans-serif; font-size:15px;}
.product th{text-shadow: none;color: #FFF; background-color: #b8b8b8;padding: 1.5%;width: 30%;}
.product td{background-color: #FFF;padding: 1%;}

.order_info { height:250px; padding:50px 0 0 30px;}
.order_info a:hover { 
opacity: .8;
-webkit-opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
.order_links { display:inline-block; margin-left:50px; max-width: 240px;}

/*予約・限定特典*/
.shop_box article.box_pre{
	box-sizing: border-box;
	border: solid 2px #0b57ac;
	width: 99%;
	margin: 0.5%;
	float: left;
	margin-top: 10px;
	background-color: #b8b8b8;
}
/*店舗特典*/
.shop_wrap{width: 90%;margin: 0 auto;}

.shop_box article.box_a{
	box-sizing: border-box;
	border: solid 2px #0b57ac;
	width: 49%;
	margin: 0.5%;
	float: left;
	margin-top: 10px;
	background-color: #b8b8b8;
}
.shop_box .shop_in{
	margin: 1% 0.5% 1% 0.5%;
	background-color: #FFF;
	padding: 0.5%;
}

.shop_box .image{
	line-height: 0;
	box-sizing: border-box;
}
.shop_box .image img{
	width: 100%;
	box-sizing: border-box;
}
.shop_box {
	width: 90%;
	max-width: 1260px;
	box-sizing: border-box;
	margin: 10px auto;
	padding-bottom: 20px;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
}
.shop_box article h2{
	font-size: 21px;
	font-weight: bold;
	color: #FFF;
	padding: 1%;
	background-color: #000;
	background-image: url(../img/bg.jpg);
}
.shop_box article h3{
	background-color: #0b57ac;
	color: #FFF;
	padding: 4px;
	margin-bottom: 6px;
	font-weight: normal;
}
.shop_box article small{
	color: #c00;
}

.shop_set{background-color: #e4c350;padding: 0.5%;color: #0b57ac;text-shadow: 1px 1px 1px #FFF;}
.shop_set span{color:#FFF;}
#info .txt_shop{line-height: 1.2em;}

a.buy_btn{
	display: inline-block;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	background-color: #2c6eb7;
	border-bottom: 4px solid #0A0C8F;
	color: #FFF;
	padding: 10px;
	width: 70%;
	font-weight:bold;
	margin: 10px 15%;
	text-align: center;
	box-sizing: border-box;
}
a.buy_btn:hover{
	background-color: #e4c350;
	border-bottom: 4px solid  #E49E2C;
	color: #000;
}

/*DLC情報*/
.update_box{
	width: 94%;
	max-width: 1260px;
	box-sizing: border-box;
	margin: 10px auto;
	padding-bottom: 20px;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	padding: 2%;
	background-color: #FFF;
}

.update_box .update_ymd{
	width: 100%;
	font-weight: bold;
	font-size: 18px;
	color: #7e7e7e;
	box-sizing: border-box;
	background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 59%, #f8f6f6 59%, #f8f6f6 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 59%,#f8f6f6 59%,#f8f6f6 100%);
	line-height: 1.2em;
	margin-bottom: 10px;
	padding: 0.5%;
}
.update_box .update{
	width: 100%;
	background-color: #FFF;
	margin: 10px 0 10px 0;
}
.update_box .detail{
	padding: 1%;
}
.update_box .detail img{
	width: 49%;
	margin: 0.5%;
	box-sizing: border-box;
	border: 1px solid #7e7e7e;
}
.update_box .contents_name{
	font-size: 21px;
	font-weight: bold;
	color: #FFF;
	padding: 0% 1% 0% 1%;
}
.update_box .contents_name span.type{
	background-color: #FFF;
	font-size: 11px;
	padding: 0 4px 0 4px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.update_box .contents_name small{
	font-size:11px;
	font-weight: bold;
	margin-left: 2px;
}

.toll{border:1px solid #e87485;}
.free{border:1px solid #0b57ac;}
.re_flee{border:1px solid #0b57ac;}

.toll .contents_name{background-color: #e87485;}
.free .contents_name{background-color: #0b57ac;}
.re_flee .contents_name{background-color: #0b57ac;}

.toll span.type{color: #e87485;}
.free span.type{color: #0b57ac;}
.re_flee span.type{color: #0b57ac;}

/*//////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 1921px) {
/*=================================
配置
=================================*/
#wrapper{
	background-image: url(../img/bg_wt.png),url(../img/bg.jpg);
	background-repeat: no-repeat,repeat;
	background-position: top center ,center;
	background-size: 100%, auto;
}

}/*media-min:1921*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 960px) {
/*=================================
ストーリー
=================================*/
	
.story_txt1{font-size: 16px;margin: 2% 0 1% 1%;}
.story_txt2{font-size: 18px;margin: 5% 0 1% 1%;}
.story_txt3{font-size: 4.6vw;margin: 4% 0 1% 1%;}
.order_info { padding:0px;}
.order_links  { width: 20%; min-width:150px;}

}
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {

/*=================================
配置
=================================*/	
.read{
	font-size: 46px;
}
/*=================================
ヘッダー
=================================*/
header{padding: 0;}
header #logo{float: none; width: 100%;margin: 0 auto; text-align: center;display: block;}
header #logo img{width: 60%;}
nav{float: none;width: 100%;}
nav ul li{font-size: 14px;height: 50px;}

/*=================================
トップ
=================================*/
#key{
	width: 100%;
	float: none;
}
#box_side{
	width: 92%;
	margin: 0 auto;
	padding-bottom: 10px;
	padding-top: 10px;
	float: none;
	position:static;
}
#news{
    position:static;
	width: 95%;
}
.order_link{
	width: 97%;
	position: static;
	margin-left: 10px;
}

/*=================================
シリーズ説明
=================================*/
.intro_txt1{font-size: 13px;}
.intro_txt2{font-size: 13px;}
/*=================================
ストーリー
=================================*/
.story_bg1,.story_bg2,.story_bg3{
	background-position: bottom left, top right, bottom right;
	background-size:auto,auto,100%;
	min-height: 600px;
}
.story_logo{
	margin-top: 10px;
	width: 96%;
}
/*=================================
キャラクター
=================================*/
#contents_wrap .chara_bg{padding: 2% 0 0 0;}
#chara_image{overflow: hidden;padding-top:36%;}
#chara_image img{max-width: 1050px;}
#chara_image .chara_img{left: -40%;width: 140%;}
#chara_txt_box{position: relative;width: 100%;margin: 0 auto;}
.chara_name{ max-width: none;}
.chara_name .name{
	font-size: 60px;
	padding: 2% 0 0 2%;
}
.chara_name .spell{margin: 6px 0 0 2%;}
.chara_name .cv_name{margin: 3% 0 0 2%;padding: 0 0 3% 0;}

.chara_txt1{margin: 5% 3.5% 1% 3.5%;padding-bottom: 5%;width: 93%;}

.chara_cos{margin: 6% auto 0 auto;width: 94%;}
.chara_cos{
	position: absolute;
	margin-top: 0;
	top:-50%;
	max-width: none;
	width: 100%;
}
.chara_cos .chara_cos_head{padding: 0 0 0 1%;}
	
.chara_cos .chara_cos_head{
	background-color: rgba(255,255,255,0.40);
	padding: 1%;
}
.chara_cos .chara_cos_body{}
.chara_cos .chara_cos_body .btn{
}
.subchara_box{
	background-position: top right 40%;
	background-repeat: no-repeat;
	background-size: 90%;
}
.subchara_box .space{display: block;}
	
/*=================================
システム
=================================*/
.system_txt_h{float: none;width: 100%;padding-top: 30px;margin: 0 auto;}
.system_img_h{float: none;width: 100%;margin: 0 auto;}

.system_box_a{
	width: 100%;
	background-image: url(../img/system/system_img2_.png);
	background-repeat: no-repeat;
	background-position: top 120px right 9%;
	background-size: 120%;
	min-height: 460px;
}
.system_box_a_add{
	width: 100%;
	min-height:  auto;
}
	

.system_read{
}
/*=================================
ギャラリー
=================================*/
.gallery_read{
	font-size: 24px;
	margin: 3% 0 1% 0;
}

/*=================================
サウンド
=================================*/
.sound_txt{
	font-size: 16px;
	margin: 5% auto;
	background-color: #fff;
	padding:2% 4%;
	max-width: 740px;
	text-align: center;
	width: 90%;
	margin: 1%;
	float: none;
}
/*=================================
スペシャル
=================================*/
/*ムービー*/
#movieBox li {
	display: inline-block;
	width: 90%;
	padding: 1% 5%;
}
/*=================================
インフォメーション
=================================*/
.shop_box article.box_a{
	width: 99%;
	margin: 2% 0.5% 2% 0.5%;
	float: none;
}
}/*media:768*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
/*=================================
ヘッダー
=================================*/
header{padding: 0;}
header #logo{float: none; width: 100%;margin: 0 auto; text-align: center;display: block;}
nav{float: none;width: 100%;}
nav ul li{font-size: 10px;height: 30px;}

nav a{width: 50%;}
nav a:nth-child(2), nav a:nth-child(4), nav a:nth-child(5), nav a:nth-child(7) {
    background-color:#fcfafa;
}
nav a:nth-child(2),
nav a:nth-child(3),
nav a:nth-child(6),
nav a:nth-child(7){
	background-color: #f8f6f6;
}
nav a.select,nav a:hover{
	background-size: 10%;
}
/*=================================
配置
=================================*/	
.read{
	font-size: calc(40px + 15 * ((100vw - 320px) / 704));
	font-size:9.0vw;
	height: 50px;
}
#sub_menu a{
	padding: 2%;
	font-size: 3.6vw;
}
.contents_bg{
	background-size: 21px;
}
/*=================================
フッター
=================================*/
.footer_banner a{width: 49%;box-sizing: border-box;}

	
#loadcount {
	padding-top: 24%;
}
/*=================================
装飾
=================================*/
.new{
	font-size: 10px;
}
/*=================================
トップ
=================================*/

/*=================================
シリーズ説明
=================================*/
.intro_logo{font-size: 2.8vw;}
.intro_txt1{font-size: 2.8vw;margin: 5% 0 0 0;}
.intro_txt2{font-size: 4.0vw;}
.intro_read{font-size: 6.0vw;}
/*=================================
ストーリー
=================================*/
.story_bg1,.story_bg2,.story_bg3{
	background-position: bottom left, top right, bottom right;
	background-size:21px,21px,120%;
	min-height: 600px;
}
.story_logo{
	width: 96%;
	margin: 10px auto; 
}
.story_txt1{font-size: 4.0vw;}
.story_txt2{font-size: 5.0vw;margin: 10% 0 1% 1%;}
.story_txt3{font-size: 6.0vw; margin: 10% 0 68% 1%;}
/*=================================
キャラクター
=================================*/
.chara_name{margin: 0 0 0 0;}	
.chara_name .name{
	font-size: 60px;
	padding: 2% 0 0 2%;
	font-size: 14.0vw;
}
.chara_txt1{font-size: 3.6vw;}
.chara_cos{top:-43%;}
.chara_cos .chara_cos_body .btn{
	padding: 2%;
	font-size: 3.6vw;
}

/*=================================
システム
=================================*/
.system_txt_h{font-size:4.0vw;}
.system_img_h p{font-size:4.0vw;}
.system_img_h p span{font-size:6.0vw;}
	
.system_box_a{
	min-height: 360px;
}
.system_box_a_add{
	min-height: auto;
}

.system_read{font-size:6.0vw;}
/*=================================
ギャラリー
=================================*/
.gallery_read{font-size:6.0vw;}
/*=================================
サウンド
=================================*/
.sound_txt{font-size:4.0vw;margin: 2% auto;}
.sound_txt span{font-size:6.0vw;}
	
/*=================================
スペシャル
=================================*/
/*=================================
インフォメーション
=================================*/	
.product{font-size: 4.0vw;}
.shop_box article h2{font-size: 5.0vw;}
.readme{font-size: 4.0vw;margin-top: 10px;}
/*DLC情報*/
.update_box .update_ymd{
	font-size: 5.5vw;
}
.update_box .contents_name{
	font-size: 6.0vw;
}
.update_box .detail img{
	width: 99%;
	margin: 0.5%;
}	
	
}/*media:480*/