/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/

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


/*=================================
layout
=================================*/
body{
}

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;}

/**/
.new{
	position: absolute;
	border: none;
	width: auto;
	top: 0;
	left: 0;
	background-color: #f71313;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 9px;
	padding: 0.3em;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	
}
.new:hover{
	border: none;
	opacity: 1.0;
}

/*==================
header
==================*/
header{
	padding:10px 0 ;
	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;
}
header .logo{
	float: left;
	width: 11%;
}
header .logo a:hover{
	opacity: 0.7;
}
#sp_nav{
	position: fixed;
	right: 0px;
	top: 0px;
	width: 50px;
	display: none;
}

nav{
	text-align: center;
	float: right;
	width: 78%;
	padding-right: 11%;
}
nav a{
	font-family: 'Noto Serif', serif;
	display: inline-block;
	width: 19%;
	max-width: 180px;
	margin: 0 0.5%;
	color: #000;
	position: relative;
}
nav span{
	display: inline-block;
	width: 100%;
	border-bottom: 10px solid #CCC;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.0em;
}
nav a.select span,nav a:hover span{
	border-bottom: 10px solid #ffd42d;
}
nav small{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
}

/*pagetop*/
#pagetop{
	width: 40px;
	text-align: center;
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	background-color: #a79a66;
	z-index: 11;
}

/*==================
footer
==================*/
footer{
	width: 100%;
	background-image: url(../img/common/line_img.jpg);
	background-repeat: repeat-x;
	background-position: top;
	padding-top: 10px;
}
#footer_wrap{width: 90%;margin: 0 auto;}
#footer_wrap a{display: inline-block;}
#footer_wrap a:hover{opacity: 0.7;}
.footer_sns{text-align:center; padding-top:20px; margin-bottom:10px;}
.footer_sns a{max-width: 40px; margin:4px;}
.footer_ps{text-align:center;margin-bottom: 10px;}
.footer_banner{text-align:center;margin-bottom: 10px;}
.footer_notice{text-align:center; margin-bottom: 10px;}
.footer_copy{text-align:center; padding-bottom: 20px;}

footer .wrap_box{
	max-width: 700px;
	width: 100%;
	margin: 10px auto;
}
footer .icon_box{
	float: left;
	width: 22%;
	padding: 2%;
	box-sizing: border-box;
}
footer .badge_box{
	/*float: right;*/
	width: 100%;
	text-align: center;
	padding-top: 2%;
	margin: 0 auto;
	max-width: 600px;
	margin-bottom: 10px;
}
footer .badge_box a{
	margin: 1%;
	width: 30%;
	box-sizing: border-box;
	display: inline-block;
}
footer a.badge_amazon{
	width: 26%; 
}

footer .badge_box a img{
	width: 100%;
}

footer .spec_table{
	margin: 0 auto;
	max-width: 300px;
	width: 100%;
}
footer .spec_table th{
	text-align: left;
	width: 80px;
}

/*==================
load
==================*/
#load{
	background-color: #FFF;
	z-index: 100;
	position:fixed;
	width:100%;
	height:100%;
	top: 0;
}
/*==================
common
==================*/
.wid{
	width: 100%;
}
.btn{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	background-color: #d2caa9;
	padding: 1.2em;
	
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	
	width: 100%;
	max-width: 300px;
	display: inline-block;
	text-align: center;
	margin:  10px auto 0 auto;
	border: 2px solid #fff;
	box-sizing: border-box;
	color: #000;
}
.btn:hover{
	opacity: 0.7;
}

.btn .icon,.btn .arrow,.btn .sitelink{width: 15px;margin-left: 2px;}
.center_box{
	width: 90%;
	text-align: center;
	margin: 0 auto;
}

.read{
	font-family: 'Noto Serif', serif;
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
	width: 90%;
}
.read span{
	display: inline-block;
	width: 100%;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.0em;
	border-bottom: 10px solid #ffd42d;
}
.read small{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
}

.sub_nav{
	width: 100%;
	background-color: #eeeeee;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}
.sub_nav a{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	background-color: #fff;
	padding: 0.8em;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	width: 32.3%;
	max-width: 160px;
	display: inline-block;
	text-align: center;
	margin:  0 auto;
	box-sizing: border-box;
	color: #000;
	margin: 0.5% 0.5%;
	position: relative;
	
}

.sub_nav a:hover,.sub_nav a.selected{
	background-color: #ffd42d;
}


/*==================
NEWS
==================*/
/*カテゴリー*/
.ctAll{
	background-color: #000;
}
.ctGame{
	background-color: #218fb0;
}
.ctCampaign{
	background-color: #ffb846;
}
.ctMedia{
	background-color: #39c98e;
}
.ctOthers{
	background-color: #f95959;
}
/*記事一覧*/
.news{
	max-width: 1300px;
	width: 96%;
	margin: 0 auto;
	padding: 2% 0 ;
}

.news section{
	width: 24%;
	box-sizing: border-box;
	margin: 0.5%;
	overflow: hidden;
	background-color: #FFF;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	
	
	text-align: left;
	float: left;
}
.news section a{
	display: inline-block;
	width: 100%;
	color: #000;
}
.news section a:hover .thum{
	opacity: 0.5;
}
.news section .thum{
}
.news section .thum img{width: 100%;}
.news section .in{
	padding: 1%;
	box-sizing: border-box;
	min-height: 60px;
}
.news section .ymd{
	font-size: 13px;
	font-family: 'Noto Serif', serif;
	/*font-weight: bold;*/
	margin-right: 2px;
}
.news section .category{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	color: #FFF;
	font-size: 13px;
	/*font-weight: bold;*/
	padding: 0 0.5em;
	display: inline-block;
}
.news section .txt{
	font-family: 'Noto Sans JP', sans-serif; 
	font-size: 13px;
	font-weight: 100;
}

/*newsページ*/
.newspage{
	background-color: #eeeeee;
	padding: 30px 0;
}
.newspage .news{
	max-width: 1000px;
	padding: 2% 4% ;
	box-sizing: border-box;
}
.newspage .news section{
	width: 31.3%;
	margin: 1%;
}
.category_list{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}
.category_list div{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	padding: 1% 4%;
	margin: 0.5%;
	display: inline-block;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.category_list div:hover{
	opacity: 0.7;
}
#btnMore{
	cursor: pointer;
}
/*記事*/
#news_wrap{
	font-family: 'Noto Sans JP', sans-serif; 
	width: 96%;
	margin: 0 auto;
	max-width: 800px;
}
#news_wrap .thum_img{
	width: 100%;
}
#news_wrap #news_list{
	margin-top: 20px;
}
#news_wrap #news_list h2{
	font-size: 24px;
}

#news_wrap #news_list a{
	color: #ff1493;
}
#news_wrap #news_list a:hover{
	opacity: 0.7;
}

#news_wrap .category_read{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	padding: 1% 4%;
	margin: 0.5%;
	display: inline-block;
	text-align: center;
	color: #fff;
}
#news_wrap #news_ba a{
	padding: 1% 4%;
	margin: 0.5%;
	display: inline-block;
	text-align: center;
	color: #000;
	background-color: #d2caa9;
}
#news_wrap #news_ba a:hover{
	opacity: 0.7;
}
#news_wrap #news_pan{
	margin: 10px auto;
}
#news_wrap #news_pan a{
	display: inline-block;
	text-align: center;
	color: #000;
}

#news_wrap #news_pan a:hover{
	opacity: 0.7;
}
#news_wrap #news_pan .prev{
	float: left;
}
#news_wrap #news_pan .next{
	float: right;
}

#news_wrap .item {
    padding-left: 1em;
    text-indent: -1em;
    display: inline-block;
    margin: 0 0;
    /*font-size: 13px;*/
}
.tableLine table {
    border-top: 1px solid #6F9DFF;
    border-left: 1px solid #6F9DFF;
    margin-top: 10px;
    margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.6em;
}
.tableLine table td {
    border-bottom: 1px solid #6F9DFF;
    border-right: 1px solid #6F9DFF;
    padding: 0.3em;
    text-align: center;
	background: #fff;
}
.tableLine table td.bgColor {
    color: #006;
    background: #DDE9FF;
}
.tableLine .red {
    color: #900;
    font-weight: bold;
}

/*==================
top
==================*/
#key{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.top{}

/*store*/
.top .store{
	width: 100%;
	box-sizing: border-box;
	padding: 2%;
	background-image: url(../img/top/bg_item_left_bottom.png),url(../img/top/bg_item_right_bottom.png);
	background-repeat:no-repeat, no-repeat;
	background-position: left bottom,right bottom;
	background-size:20%, 20%, auto;
}
.top .store .box{
	background-color: #b21717;
	width: 90% ;
	margin:  0 auto;
	padding: 1%;
	box-sizing: border-box;
	max-width: 700px;
	box-shadow: 0px 0px 20px 0px  rgba(128,27,27,0.60) inset,0px 0px 15px -4px #514130;
	-moz-box-shadow: 0px 0px 20px 0px  rgba(128,27,27,0.60) inset,0px 0px 15px -4px #514130;
	-webkit-box-shadow: 0px 0px 20px 0px  rgba(128,27,27,0.60) inset,0px 0px 15px -4px #514130;
}
.top .store .in_box{
	border: 2px solid #a79a66;
}
.top .store .in_box .wrap_box{
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}
.top .store .icon_box{
	float: left;
	width: 22%;
	padding: 2%;
	box-sizing: border-box;
}
.top .store .badge_box{
	/*float: right;*/
	width: 100%;
	text-align: center;
	padding-top: 2%;
	max-width: 600px;
	margin: 0 auto;
}
.top .store .badge_box a{
	margin: 1%;
	width: 30%;
	box-sizing: border-box;
	display: inline-block;
}
.top .store .badge_box a.badge_amazon{
	width: 26%; 
}

.top .store .badge_box a img{
	width: 100%;
}
/*banner*/
.top .banner{
	width: 100%;
	padding: 1% 0;
	background-image: url(../img/top/bg_item_left_top.png),url(../img/top/bg_item_right_top.png),url(../img/common/bg_stripe.jpg);
	background-repeat:no-repeat, no-repeat,repeat;
	background-position: left top ,right top, center;
	background-size:20%, 20%, auto;
	border-top: 2px solid #d2caa9;
	border-bottom: 2px solid #d2caa9;
}

.top .slick-slide{
	text-align: center;
	box-sizing: border-box;
	margin: 0.2%;
}
.top .slick-slide a:hover{
	opacity: 0.7;
}
.top .slick-slide img{
	width: 100%;
}

.top .slick-prev::before,.top .slick-next::before{
	color: #acacac;
}
.top .slick-dots li{
	height: 10px;
	width: 10px;
}
.top .slick-dots li button::before{
	height: 10px ;
	width: 10px;
	line-height: 10px;
	font-size: 10px;
}
/**/
.top .card_img .slick-slide{
	margin: 7px;
}
.top .card_img p{
	font-family: 'Noto Sans JP', sans-serif;
	color: #000;
	/*background-color: #fff;*/
	padding: 0.5em;
	text-shadow: #fff 1px 1px 0px;
	/*
	font-weight: bold;
	color: #248882;
	text-shadow: #fff 1px 1px 0px, #e8cc3d 2px 2px 1px, #e8cc3d 2px 0px 1px,#e8cc3d 0px 2px 1px;
	*/
	/*text-shadow: 2px 2px 0px #fff;*/
}
.top .card_img .slick-dots{
	opacity: 0;
	pointer-events: none;
	margin-bottom: -20px;
}
.top .card_img .slick-prev:before, .top .card_img .slick-next:before{
	opacity: 0;
}

/*news*/
.top .news_box{
	background-color: #eeeeee;
	text-align: center;
	padding: 30px 0;
}

/*introduction*/
.top .introduction{
	text-align: center;
	padding: 30px 0;
	background-image: url(../img/common/contents_bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
/*pv*/
.top .pv{
	width: 100%;
	padding: 30px 0;
	background-image: url(../img/common/bg_star.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100%;
	background-attachment: fixed;
	position: relative;
}
.top .pv .read{
	color: #fff;
}

.top .pv .btn{
	color: #FFF;
	background-color: transparent;
	background-image: url(../img/common/bk_50.png);
}

.top .pv #movie_box{
	width:100%;
	max-width:660px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
}


.top .pv #movie_box li{
	box-sizing: border-box;
    display: inline-block;
    width: 94%;
    padding: 1%;
    margin: auto;
	padding-bottom:20px;
	position: relative;
}

.top .pv #movie_box li .youtube{
	position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-bottom: 10px;
}

.top .pv #movie_box li .youtube iframe{
	border:solid 1px #FFF;
	background-color: #FFF;
	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;
}

/*twitter*/
.top .twitter{
	width: 100%;
	padding: 30px 0;
}
.top .twitter .btn{
	color: #FFF;
	background-color: #0167b8;
}
.top .twidget{
	max-width: 600px;
	height: 398px;
	width: 90%;
	margin: 20px auto 30px auto;
	border: 1px solid #a79a66;
	box-shadow: 10px 20px 0 #d2caa9;
	-mos-box-shadow: 10px 20px 0 #d2caa9;
	-webkit-box-shadow: 10px 20px 0 #d2caa9;
}

/*spec*/
.top .spec{
	width: 100%;
	background-image: url(../img/common/spec_bg.jpg);
	padding: 20px 2%;
	box-sizing: border-box;
}
.top .spec .box{
	background-color: #FFF;
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	border: 1px solid #a79a66;
	padding: 0.5%;
	box-sizing: border-box;
}


.top .spec .box .wrap_box{
	border: 1px solid #a79a66;
	background-image: url(../img/common/line_bg_left_bottom.png),url(../img/common/line_bg_right_bottom[.png),
		url(../img/common/line_bg_left_top.png),url(../img/common/line_bg_right_top.png);
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position: left bottom,right bottom, left top, right top;
	padding: 2%;
}
.top .spec .box section{
	width: 49%;
	float: left;
	margin: 0.5%;
}

.top .spec .box section:nth-child(1),
.top .spec .box section:nth-child(2){
	border-bottom: 1px solid #a79a66;
}


.top .spec .box .store_link{
	width: 100%;
	text-align: center;
	padding: 1%;
	box-sizing: border-box;
}
.top .spec .box .store_link a{
	width: 45%;
	display: inline-block;
	margin: 0 1%;
}
.top .spec .box .store_link a img{
	width: 100%;
	max-width: 180px;
}
.top .spec .box .spec_table{
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
}
.top .spec .box .spec_table th{
	text-align: left;
	min-width: 70px;
}
    
.top .spec .box .txt{
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
}
.top .spec .box .caution{
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
	font-size: 11px;
}

.top .spec .box .caution span{
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	margin: 0 0;
}
.top .spec .box .caution span:before {
	content: "※";
	display: inline-block;
	text-indent: 0em;
}

.top .spec .box hr{
	border: none;
	height: 1px;
	background-color: #a79a66;
}


/*==================
world
==================*/
/*世界観*/
.world{
	text-align: center;
	padding: 30px 0 50px 0;
	background-image: url(../img/common/contents_bg_wt.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
.part {
	width: 90%;
	margin: 0 auto;
	max-width: 960px;
}

.part p.txt_read{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 21px;
	text-align: left;
	padding-left:40px;
	background-image: url(../img/common/txt_read_icon.png);
	background-repeat: no-repeat;
	background-position: left;
}
.part p.txt_f_r{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	font-size: 16px;
	text-align: right;
	margin-top: 10px;
}

.part div{
	width: 100%;
}

.part img{
	width: 20%;
	max-width: 192px;
}

/*イラストレーター*/
.illustrator{}

.part .btn{
	width: 32.3%;
	margin: 0.5%;
	border: none;
	float: left;
}
/**/

/*用語集*/
.keyword_list{
	font-family: "Yu Mincho", "YuMincho","Sawarabi Mincho","ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝",serif;
	text-align: left;
	
	box-shadow: 10px 20px 0 #d2caa9;
	-mos-box-shadow: 10px 20px 0 #d2caa9;
	-webkit-box-shadow: 10px 20px 0 #d2caa9;
	
	border: 1px solid #d2caa9;
}
.keyword_list section{
	background-image: url(../img/common/wt_70.png);
	padding: 1.0em;
	font-size: 16px;
	border-bottom: 1px dotted #a79a66;
}
.keyword_list section:nth-last-child(1){
	border-bottom: none;
}
.keyword_list section span{
	/*color: #a79a66;*/
	color: #8b7f4f;
	font-weight: bold;
	display: inline-block;
	padding: 0.2em;
	margin-bottom: 2px;
	font-size: 21px;
	
	box-sizing: border-box;
	width: 100%;
	
	background-image: -webkit-linear-gradient(45deg, #f8f7f2 0%, #d2caa9 100%);
	background-image: linear-gradient(45deg, #f8f7f2 0%, #d2caa9 100%);
	
	text-shadow: #FFF 1px 1px 0px;
}
/*==================
CHARACTER
==================*/
.chara{}
.sub_nav .chara_select a{
	padding: 0;
	width: 9%;
	max-width: 100px;
	/*min-width: 60px;*/
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.sub_nav .chara_select a img{
	width: 100%;
	max-width: 100px;
}
.chara_list{
	width: 90%;
	max-width: 960px;
	margin: 20px auto;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	text-align: center;
}
.chara_list .chara_cate_1{
	background-color: #d2caa9;
	width: 100%;
	background-image: url(../img/world/chara/list_bg_left.png),url(../img/world/chara/list_bg_right.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left,right;
	margin: 10px auto 10px auto;
}

.chara_list .chara_cate_other{
	background-color: #3a3a3a;
	width: 100%;
	background-image: url(../img/world/chara/list_bg_left.png),url(../img/world/chara/list_bg_right.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left,right;
	margin: 10px auto 10px auto;
}


.chara_list .chara_select{
	margin-bottom: 30px;
}
.chara_list .chara_select img{
	width: 100%;
}
.chara_list .chara_select a{
	max-width: 150px;
	width: 19%;
	margin: 0.5%;
	display: inline-block;
	position: relative;
}
.chara_list .chara_select a:hover{
	opacity: 0.7;
}

.chara_list .chara_txt_1{
	background-color: #fff;
	margin: 10px auto;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
	padding: 1.0em;
	text-align: left;
	color: #272727;
	border:  solid 2px #d2caa9;
}
/*キャラ個別*/
.chara_wrap{
	width: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	overflow: hidden;
}
.chara_bg_aled{
	background-color: #8acfff;
	background-image: url(../img/world/chara/aled_bg.png);
}
.chara_bg_j{
	background-color: #ffb197;
	background-image: url(../img/world/chara/j_bg.png);
}
.chara_bg_sariel{
	background-color: #d5f1ff;
	background-image: url(../img/world/chara/sariel_bg.png);
}
.chara_bg_arel{
	background-color: #ffcdab;
	background-image: url(../img/world/chara/arel_bg.png);
}
.chara_bg_rasiel{
	background-color: #d5d5ff;
	background-image: url(../img/world/chara/rasiel_bg.png);
}

.chara_bg_other{
	background-color: #c9c8c8;
	background-image: url(../img/world/chara/other_bg.png);
	max-height: 1000px;
}


.chara_box{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
}
.chara_box .chara_image{
	width: 70%;
	pointer-events: none;
}
.chara_box .chara_intro{
	position: absolute;
	right: 1%;
	top: 0;
	width: 49%;
	max-width: 650px;
}
.chara_box .chara_intro .chara_name{
	position: relative;
	margin-top: 20px;
	z-index: 0;
}
.chara_box .chara_intro .chara_name .name_img{
	position: absolute; left: 0; top: 0;
}

.chara_box .chara_intro .chara_txt{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	background-color: #FFF;
	margin: 0 auto;
	width: 100%;
	max-width: 650px;
	border: 1px solid #a79a66;
	padding: 0.5%;
	box-sizing: border-box;
}
.chara_box .chara_intro .chara_txt .wrap_box{
	border: 1px solid #a79a66;
    background-image: url(../img/common/line_bg_left_bottom.png),url(../img/common/line_bg_right_bottom[.png), url(../img/common/line_bg_left_top.png),url(../img/common/line_bg_right_top.png);
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
    background-position: left bottom,right bottom, left top, right top;
	background-size: 20px;
    padding: 2%;
}
.chara_box .chara_intro .chara_profile{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 13px;
	color: #555555;
	display: inline-block;
	margin: 10px auto;
	width: 100%;
	padding-left: 10px;
	position: relative;
	box-sizing: border-box;
	background-image: url(../img/common/wt_70.png);
}
/*キャラ別ライン色*/
.border_color_aled::before {
	border-left: solid 10px #1b76b6;
	height: 50%;
	position: absolute;z-index: 1;left: 0;top: 0;
	content: "";
}
.border_color_j::before {
	border-left: solid 10px #cc3300;
	height: 50%;
	position: absolute;z-index: 1;left: 0;top: 0;
	content: "";
}
.border_color_sariel::before {
	border-left: solid 10px #3daadf;
	height: 50%;
	position: absolute;z-index: 1;left: 0;top: 0;
	content: "";
}
.border_color_arel::before {
	border-left: solid 10px #ff9650;
	height: 50%;
	position: absolute;z-index: 1;left: 0;top: 0;
	content: "";
}
.border_color_rasiel::before {
	border-left: solid 10px #9999ff;
	height: 50%;
	position: absolute;z-index: 1;left: 0;top: 0;
	content: "";
}
/**/
.chara_box .chara_intro .chara_profile::after {
	border-left: solid 10px #fff;
	width: 100%;
	height: 100%;
	position: absolute;bottom: 0;left: 0;
	content: "";
}

.chara_box .chara_intro .chara_profile div{
	width: 50%;
	float: left;
	padding: 2%;
	box-sizing: border-box;
	
}

.chara_box .chara_intro .chara_profile p{
	padding: 0.2em;
	
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	
	color: #fff;
	background-color: #555555;
	display: inline-block;
	margin: 0.5%;
	
	text-shadow: none;
}

.chara_box .chara_intro .chara_sd{
	margin-top: 10px;
	pointer-events: none;
}

/*==================
system
==================*/
.system{
	text-align: center;
	padding: 30px 0 0 0;
	background-image: url(../img/common/contents_bg_wt.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
.system .read{
	margin-bottom: 2%;
}




/*//////////////////////////////////////////////////////////////////////*/
@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;}

/*==================
header
==================*/
header {
    position: relative;
    display: -webkit-block;
    display: block;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
header .logo{
	float: none;
	width: 20%;
	text-align: center;
	margin: 0 auto 1% auto;
}
nav{
	float: none;
	width: 100%;
	padding-right: 0;
	margin: 0 auto;
}
	
nav a span{
	font-size: 16px;
}

/*==================
news
==================*/
.top .news{width:94%;}
.newspage .news section,
	.top .news section{
	width: 48%;
	box-sizing: border-box;
	margin: 1%;
	overflow: hidden;
	background-color: #FFF;
		
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
		
	text-align: left;
	float: left;
}
	
	
/*==================
world
==================*/
/*世界観*/
.world{
	background-size: contain;
}
	
/*キャラクター選択*/
.chara_list .chara_cate_1,.chara_list .chara_cate_other{
	background-size: cover;
}
	
.chara_select .new{
	font-size: 1.2vw;
	-webkit-transform: scale(0.7);
    -webkit-transform-origin:0 0;
}
/*キャラクター*/
.chara_box{
	padding-bottom: 30px;
}
.chara_bg_other {
	max-height: none;
}
.chara_box .chara_image{
	width: 100%;
}
.chara_box .chara_intro{
	width: 100%;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	right: auto;
	margin-top: -75%;
	margin-left:auto;
	margin-right:auto;
}
.chara_box .chara_intro .chara_profile{
	background-image: url(../img/common/wt_70.png);
}
	
.chara_box .chara_intro .chara_txt,
.chara_box .chara_intro .chara_profile,
.chara_box .chara_intro .chara_sd{
	width: 90%;
	margin: 5px 5%;

}
	
}/*max-width: 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;}

/**/
.new{
	white-space: nowrap;
	overflow: hidden;
	/*text-indent: 200%;*/
    font-size: 1.8vw;
	/*border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;*/
	/*width: 0.7em;
	height: 0.7em;*/
	/*padding: 0;*/
	/*top: 10%;*/
	top: -16%;
}
	
/*==================
footer
==================*/
footer{
	padding-bottom: 40px;
}
#footer_wrap{width: 96%;}
/*#footer_wrap section{float: left;width: 50%;box-sizing: border-box;}*/
.footer_sns{}
.footer_sns a{max-width: 35px;min-width: 30px; margin:2%;width: 30%; box-sizing: border-box;}
.footer_sns a img{width: 100%;}
.footer_ps{}
/*.footer_banner{padding-top: 10px;}*/
.footer_banner a{width: 40%;}
.footer_notice{}
.footer_copy{
	font-size: 3.2vw;
	}
footer .spec_table{
	font-size: 3.2vw;
	max-width: 270px;
}
/*==================
header
==================*/
header {
	z-index: 10;
	padding: 0;
}
header .logo{
	width: 30%;
	text-align: center;
	margin: 0 auto 0  auto;
	width: 120px;
	float: left;
}

nav{
	float: none;
	width: 100%;
	padding-right: 0;
	margin: 0 auto;
}
	
#sp_nav{
	width: 50px;
	display: block;
	cursor: pointer;
	z-index: 20;
}
#sp_nav:hover{opacity: 0.7;}
nav a{
	width: 100%;
	margin-bottom: 20px;
}
nav a span{
	font-size: 3.6vw;
	border-bottom: 4px solid #ccc;
}
nav a.select span, nav a:hover span{
	border-bottom: 4px solid #ffd42d;
}
	
nav a small{
	font-size: 2.6vw;
}
nav{
	width: 80%;
	margin: 0 auto;
	min-width: auto;
	max-width: 100%;
	padding: 55px 10% 0 10%;
	position:fixed;
	height:100%;
	top: 0;
	display: none;
	background-image: url(../img/common/wt_85.png);
}
/*==================
common
==================*/	
.sub_nav a{
	font-size: 3.2vw;
	width: auto;
	padding: 0.6em;
}
.read span{
	font-size: 6.0vw;
}
.read small{
	font-size: 3.2vw;
}
.btn{
		font-size: 3.2vw;
		margin-top: 10px;
}
/*==================
news
==================*/
.news section .txt,
.news section .category,
.news section .ymd{
	font-size: 3.2vw;
}
.category_list div{
	font-size: 3.6vw;
	width: 39%;
}
/**/	
#news_wrap{
	font-size: 3.2vw;
}
#news_wrap #news_list h2{
	font-size: 6.0vw;
}
.tableLine table {
	font-size: 3.2vw;
}
	
/*==================
top
==================*/
/*spec*/
.top .spec .box .wrap_box{
	padding-bottom: 4%;
}
.top .spec .box section{
	width: 90%;
	margin: 0 auto;
	float: none;
	border-bottom: 1px solid #a79a66 ;
	padding: 5px 0;
	font-size: 3.6vw;
}	
.top .spec .box section:nth-child(4){
	border: none;
}
.top .spec .box .store_link{
	padding: 10px;
	}
.top .spec .box .store_link a{
	width: 37%;
}
.top .spec .box .caution{
	font-size: 2.6vw;
}
/*==================
world
==================*/
/*世界観*/
.world,
.part p.txt_f_r
{
	font-size: 3.2vw;
}
.part p.txt_read{
	font-size: 3.2vw;
	height: 40px;
	line-height: 40px;
}
	
/*キャラクター*/
.chara_box .chara_intro{
	margin-top: -72%;
}
	
.chara_list .chara_txt_1,
.chara_box,
.chara_box .chara_intro .chara_txt .wrap_box,
.chara_box .chara_intro .chara_profile
{
	font-size: 3.2vw;
}
	
/*用語集*/
.keyword_list section{font-size: 3.2vw;}
.keyword_list section span{font-size: 6.0vw;}

/*==================
system
==================*/
.system{
}
.system .center_box{
	width: 100%;
}

}/*media:480*/