/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/*=================================
layout
=================================*/
*{
    box-sizing: border-box;
}
body{
	font-size: 16px;
    /*font-family: "Sawarabi Gothic", "Noto Sans JP", sans-serif;*/
    font-family: "IBM Plex Sans JP", sans-serif;
	overflow-x: hidden;
	color: #90755b;
	background-color: #fff;
    overflow-x: auto;
    /*min-width: 1300px;*/
    width: 100%;
}

content_all_wrap{
    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;}
.fade,
.fadeup{
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
}
/*==================
load
==================*/
#load{
	z-index: 100;
	width:100%;
	height:100vh;
	top: 0;
	text-align: center;
    background-color: #e1d5c8;
	position: fixed;
}
#load p {
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 35%;
    width: 100%;
}

/*==================
header
==================*/
/*.content_all_wrap{
        position: relative;
}*/
.header_wrap{
    height: 100vh;
    position: fixed;
    z-index: 4;
    margin-top: 17%;
    margin-left: 1%;
    width: 21%;
    max-width: 300px;
}
header{
	/*width: 30%;*/
	/*max-width: 470px;*/
	/*max-width: 360px;*/
	float: left;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	text-align: center;
    
    /*min-width: 270px;*/
}
#header_nav{
	display: block;
    padding: 18% 0;
    background-image: url("../img/nav/nav_box_bottom_frame.png"),url("../img/nav/nav_box_top_frame.png");
    background-position: bottom center, top center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100%;
	margin: -5% 0 0 0;
}
#sp_nav{
	display:none;
}
.header_tw{
	position: absolute;
    top: 10px;
    left: 10px;
}
.header_tw:hover{
	opacity: 0.7;
}

#sp_logo{}
#sp_logo a{
	max-width: 480px;
	width: 50%;
	display: inline-block;
	margin: 2% 0 0 2%;
	position: absolute;
	z-index: 5;
	
}
#sp_logo a img{
	width: 100%;
}
header .logo{
	display: inline-block;
	width: 100%;
	max-width: 400px;
}
header .logo img{
	width: 100%;
}
nav{
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
    background-image: url("../img/nav/nav_box_bottom.png"),url("../img/nav/nav_box_top.png"),url("../img/nav/nav_box.png");
    background-position: bottom center, top center, center;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 100%;
    padding: 1.5em 1.0em;
}
nav a{
	display: inline-block;
	width: 100%;
	position: relative;
}
nav a img{
	background-position: center top;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
}
nav a.nav_top img{background-image: url(../img/nav/nav_top_off.png);}
nav a.nav_top:hover img,
nav a.nav_top.select img{background-image: url(../img/nav/nav_top_on.png);}

nav a.nav_creator img{background-image: url(../img/nav/nav_creator_off.png);}
nav a.nav_creator:hover  img,
nav a.nav_creator.select img{background-image: url(../img/nav/nav_creator_on.png);}

nav a.nav_story img{background-image: url(../img/nav/nav_story_off.png);}
nav a.nav_story:hover  img,
nav a.nav_story.select  img{background-image: url(../img/nav/nav_story_on.png);}

nav a.nav_chara img{background-image: url(../img/nav/nav_chara_off.png);}
nav a.nav_chara:hover  img,
nav a.nav_chara.select  img{background-image: url(../img/nav/nav_chara_on.png);}

nav a.nav_system img{background-image: url(../img/nav/nav_system_off.png);}
nav a.nav_system:hover  img,
nav a.nav_system.select img{background-image: url(../img/nav/nav_system_on.png);}

nav a.nav_sound img{background-image: url(../img/nav/nav_sound_off.png);}
nav a.nav_sound:hover  img,
nav a.nav_sound.select img{background-image: url(../img/nav/nav_sound_on.png);}

nav a.nav_special img{background-image: url(../img/nav/nav_special_off.png);}
nav a.nav_special:hover  img,
nav a.nav_special.select img{background-image: url(../img/nav/nav_special_on.png);}

nav a.nav_info img{background-image: url(../img/nav/nav_info_off.png);}
nav a.nav_info:hover  img,
nav a.nav_info.select img{background-image: url(../img/nav/nav_info_on.png);}

nav a img.new{
	width: 20%;
	max-width: 74px;
	position: absolute;
	background-image: none;
}

nav a:hover img.new,
nav a.select img.new{
	background-image: none;
}

header .lng_sw {
	position: absolute;
	margin: 0 auto;
	top:92%;
	color:#000;
	width: 100%;
}



#pagetop{
	width: 80px;
	text-align: center;
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	z-index: 3;
}
#pagetop img{
	width: 100%;
	background-size: 100%;
}
#pagetop:hover{
    opacity: 0.7;
}


/**/
#sp_menu_btn{
	display: none;
}
#sp_menu_btn{
	position: relative;
	background:#FFF;
	cursor: pointer;
	width: 50px;
	height:50px;
	border-radius: 25px;
	border:#68c3c5 solid 2px;
}

#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: 14px;
	height: 3px;
	border-radius: 2px;
	background: #68c3c5;
	width: 45%;
 }

#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: 18px;
	left: 13px;
	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: 30px;
	left: 13px;
	transform: translateY(-6px) rotate(45deg);
	width: 50%;
}
/**/
#sp_menu.open_st {
	transform: translateX(0);
}
#sp_menu.close_st {
	transform: translateX(100vw);
}
#sp_menu {
	width: 100vw;
	background-color: #fff;
	transition: transform .3s;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 3;
	display: none;
	padding-top: 80px;
}
#sp_menu #sp_menu_link a{
	font-size: 4.0vw;
	display: inline-block;
	padding: 1.0em 2.0em;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #68c3c5;
	text-align: left;
	background-position: right 2% center;
	background-repeat: no-repeat;
	background-size: 60%;
	color: #68c3c5;
}
#sp_menu #sp_menu_link a:nth-child(1){
	border-top: 1px solid #68c3c5;
	background-image: url(../img/teaser/sp_menu1.jpg);
}
#sp_menu #sp_menu_link a:nth-child(2){
	background-image: url(../img/teaser/sp_menu2.jpg);
}
#sp_menu #sp_menu_link a:nth-child(3){
	background-image: url(../img/teaser/sp_menu3.jpg);
}
#sp_menu #sp_menu_link a:hover{
	opacity: 0.7;
}
#sp_menu #sp_tw_box{
	background-image: url(../img/teaser/sp_chara1.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 30%;
	box-sizing: border-box;
	padding: 6.0em 5.0em 5.0em 5.0em;
	text-align: left;
	font-size: 2.8vw;
	max-width: 85%;
	margin: 0 10% 0 4%;
}
#sp_menu #sp_tw_box .sp_tw_box_in{
	clear: both;
	
}
#sp_menu #sp_tw_box .sp_tw_box_in a{
	float: left;
	width: 3.5em;
}
#sp_menu #sp_tw_box .sp_tw_box_in a img{
	width: 100%;
}
#sp_menu #sp_tw_box .sp_tw_box_in .tw_txt{
	float: left;;
	display: inline-block;
}
/*==================
contents
==================*/
#contents{
	width: 100%;
	text-align: center;
	padding: 1% 0 2% 0;
    min-height: 100vh;
    
    background-image: url("../img/common/bg.jpg");
    background-attachment: fixed;
    
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.contents_wrap_second{
    width: 80%;
    float: right;
}

#contents h2{
	width: 75%;
	margin: 0 auto;
}
#contents h3.read{
    color: #000;
    display: inline-block;
    text-align: center;
    padding: 0.5em;
    /*border-left: #000 solid 10px;
    background-color: #ff8f4a;
    max-width: 400px;*/
    width: 100%;
    font-size: 2.0em;
}
#contents h3.read img{
    width: 90%;
}

#sub_nav{
	padding: 1.5em 0;
	text-align: center;
	font-size: 1.4em;
}
#sub_nav a{
	display: inline-block;
	color: #ff8f4a;
	min-width: 160px;
	padding: 0.5em 0.5em;
	margin: 0.2em;
	font-weight: bold;
	position: relative;

    border: solid 5px #7e8d3a;
    border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    
    box-shadow: 0px 0px 4px 0px #000;
    
    color: #e1d5c8;
    background-color: #623b30;
    
}
#sub_nav a:hover,
#sub_nav a.selected{
    border-color: #c16f46;
    /*background-color: #ff8f4a;
    color: #000;
    border-color: #000;*/
}
#sub_nav .new{
	left: -0.5em;
    top: -0.5em;
    position: absolute;
    width: 2.0em;
}
.l_space{
	color: #fff;
	letter-spacing: -0.13em;
}
.br_box{
	display: block;
}
.btn{
    margin-top: 1.0em;
	letter-spacing: 0.1em;
	font-weight: bold;
	background-color: #353768;
	padding: 0.8em;
	width: 70%;
	max-width: 400px;
	box-sizing: border-box;
	color: #fff;
	display: inline-block;
	text-align: center;
	border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
	font-size: 1.2em;
    border: 2px solid #fff295;
	font-family: "Merriweather Sans", sans-serif;
	letter-spacing: 0.2px;
}
.c_box{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.popup_icon{
    position: absolute;
    bottom: -0.5em;
    right:  -0.5em;
    width: 20%;
}
.second_header{
    background-image: url("../img/common/bg3.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border-bottom: 10px solid #7a4d38;
    padding: 2.0em 0;
}
.second_header #pc_logo{
    float: left;
    margin-left: 2%;
    width: 20%;
    max-width: 365%px;
}
.second_header #pc_logo img{
    width: 100%;
}
.second_header #pc_logo:hover{
    opacity: 0.7;
}
.second_header h2{
    float: right;
    width: 78%;
    margin: 0 auto;
    text-align: center;
}
.second_header h2 img{
    width: 80%;
    max-width: 980px;
}
.br_pc_txt{
    display: block;
}
.br_sp_txt{
    display: inline-block;
}

/*==================
top
==================*/
#top{
	position: relative;
}
/*#top #contents{
    background-image: url("../img/top/bg.jpg");
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    padding: 0;
}*/
#top #key{
    width: 100%;
    position: relative;
}
#top #key img{
    width: 100%;
}
#top #key .more_btn1{
    position: absolute;
    right: 1%;
    top: 43%;
    width: 20%;
}
#top #key .more_btn1:hover{
    opacity: 0.7;
}
#top h2{
    width: 90%;
    margin: 0 auto;
    max-width: 980px;
}
#top h2 img{
    width: 100%;
}
#top_contents{
    background-image: url("../img/common/bg2.jpg");
    /*background-repeat: repeat-y;*/
    background-attachment: fixed;
    
    background-color: #000;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
	border-top: solid 10px #7a4d38;
}
/* トップニュース・バナー */
.top_info_box{
    background-color: #e1d5c8;
    border-bottom: solid 10px #7a4d38;
    border-top: solid 10px #7a4d38;
    padding: 3% 0 ;
}
#top .news_box{
    /*margin-bottom: 2.0em;*/
    max-width: 1400px;
    margin: 0 auto 2.0em auto;
}
#top .news_box .slick-dots{
    position: static;
}
/**/
.topNews {
	box-sizing: border-box;
	padding: 0 3%;
	overflow: hidden;
}
.topNews .slide {
	box-sizing: border-box;
	width: 90%;
	margin: auto;
}
.topNews a {
	box-sizing: border-box;
	display: inline-block;
	background: #ffffff;
	/*margin: 0.1%;*/
	margin: 5px;
    box-shadow: 3px 3px #9d764c;
    color: #000;
	/*border: solid 2px var(--gold);*/
}
.topNews a:hover {
    background-color:#e1d5c8; 
}
.topNews a img {
	display: block;
	width: 100%;
	margin: auto;
}
.topNews a dl {
	padding: 10px;
}
.topNews a dt {
	display: inline-block;
	color: #fff;
	line-height: 1;
	background: #9d764c;
	padding: 3px 5px;
	margin-bottom: 5px;
}
/**/

#top #top_banner{
    text-align: center;
}
#top #top_banner .top_banner_wrap{
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
    padding: 1% 0;
}
#top #top_banner a{
	display: inline-block;
	max-width: 620px;
	width: 50%;
	margin: 0.5%;
}
#top #top_banner a img{
	max-width: 600px;
	width: 100%;
}
/* 参加クリエイター */
#top_creater{
    background-image: url("../img/common/bg.jpg");
    background-attachment: fixed;
    
    background-color: #000;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 5% 0;
    border-bottom: solid 10px #7a4d38;
	
}
#top_creater .creater_list{
    color: #301f15;
    font-size: min(2vw, 36px);
    text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white,0px 0px 3px white,1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
    width: 60%;
    margin: 0 auto;
    line-height: 1.4em;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
#top_creater .creater_list th{
    vertical-align:top;
    text-align: right;
    font-weight: 600;
    padding-right: 0.5em;
    font-size: min(2vw, 26px);
}
#top_creater .creater_list td{
    text-align: left;
    font-weight: 600;
}

/* 物語 */
#top_story{padding: 5% 0;}
#top_story p{
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: bold;
    color: #301f15;
	line-height: 1.5em;
}
.wrap_story_box{
    
    color: #301f15;
    font-size: min(2vw, 36px);

    line-height: 1.6em;
    font-weight: 500;
    max-width: 1300px;
    width: 90%;
    margin: 0 auto;
    background-image: url("../img/top/story_bg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 40%;
    min-height: 19.5em;
}
#top_story .wrap_story_box{
    text-shadow: 1px 1px 20px white, 1px -1px 10px white, 1px 0px 0px white,0px 1px 0px white,-1px 1px 0px white, 0 0 1em white, 2px 2px 0 white, -2px -2px 0 white, -2px 0px 0 white, 2px 0px 0 white;
}

.wrap_story_box p{
    text-align: left;
    padding-left: 15%;
}
.story_pop{
    float: left;
    padding-left: 15%;
}

.story_pop a{
    display: inline-block;
    position: relative;
    margin: 0.5em;
    max-width: 40%;
    float: left;
}
.story_pop a:hover{
    opacity: 0.7;
}

/* キャラクター */
#top_chara{padding: 5% 0;}
#top_chara .top_chara_image{
    width: 100%;
}
#top_chara .top_chara_image img{
    width: 100%;
}
/* スペシャル */
#top_special{padding: 5% 0;}

/**/
.top_movie{
	width: 80%;
    /*float: right;*/
	max-width: 980px;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	bottom: 0;
	text-align: center;
    margin-top: 2%;
}
.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: 384px;*/
	width: 85%;
}
.top_movie a:after{
	content: "";
	width: 8em;
	height: 8em;
	display: block;
	position:absolute;
	transition: all 300ms 0s ease;
	opacity: 0.6;
	transform: scale(1);
	margin-top: -4em;
	margin-left: -4em;
	top:50%;
	left:50%;
	z-index: 4;
	background-image: url("../img/common/play.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.top_movie a:hover:after{
	transform: scale(0.8);
	opacity: 1;
}

/**/

#top_product{padding: 5% 0;}
.product_info_box{
    width: 90%;
    margin: 0 auto;
    background-color: #eddccc;
    border: #90755b 10px solid;
    box-shadow: 0px 0px 30px 0px rgba(144,117,91,0.70)  inset;
    padding-bottom: 2.0em;
    max-width: 1200px;
    box-sizing: border-box;
	letter-spacing: 0.05em;
}
.product_info_box p{
    font-size: min(2vw, 26px);
    margin: 1.0em auto;
}
.product_info_box .jacket{
    margin-top: 30px;
}

/*  */


.product_info{
	margin: 0 auto;
    max-width: 800px;
    width: 100%;
	margin-top: 2%;
}

table.product,
table.staff{
	width:90%;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	line-height:1.5;
}
table.product th{
	font-weight: normal;
	padding: 0.5%;
	width: 40%;
	background-color: #90755b;
	color: #ffffff;
	text-align: center;
    font-weight: bold;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
}

table.product td,
table.staff td{
	font-weight: bold;
	padding-left:3px;
    width: 100%;
    display: inline-block;
    color: #90755b;
	text-align: left;
	border-bottom: 1px solid #90755b;
	padding-left: 20px;
}



/*==================
story
==================*/
.story_box{
    background-image: url("../img/story/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
    background-color: #000;
}
#story{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
    padding: 2.0em 0;
    float: right;
    width: 80%;
}

#story .wrap_story_box{
    background-image: none;
    max-width: 1200px;
	letter-spacing: -0.03em;
	line-height: 1.5em;
	text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white,0px 0px 3px white,1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-weight: bold;
}
#story .diagram{
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
#story .diagram img{
    width: 100%;
}

/*==================
creator
==================*/
#story section{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    
}
#story section article{
    width: 100%;
    background-color: #eddccc;
    border: #90755b 2px solid;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
    margin: 1.0em auto;
}
.creator_name{
    padding-top: 1%;
    color: #301f15;
    font-size: min(2vw, 36px);
    text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white, 0px 0px 3px white, 1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
    line-height: 1.0em;
    font-weight: 600;
	font-family: "Noto Serif JP", serif;
	letter-spacing: 0.02em;
}
.creator_comment{
    margin-top: 1.0em;
    padding: 1.0em 5em;

    border-top: 4px solid #9e7549;
    border-bottom: 4px solid #9e7549;
    font-size: min(2vw, 18px);
        text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white, 0px 0px 3px white, 1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
    color: #301f15;
}

.creator_comment .sm_txt{
	 font-size: 14px;
}

.designer .creator_name{
    padding: 2.0em 0 1.5em  0;
}
.designer .creator_comment{
    border-top: none;
    border-bottom: none;
    padding-right: 20%;
	margin-top: -1em;
	margin-bottom: 1em;
}
.member1{
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../img/creator/bg1.jpg");
    background-size: 40%;
}
.member2{
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../img/creator/bg2.jpg");
    background-size: 40%;
}
.member3{
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../img/creator/bg3.jpg");
    background-size: 40%;
}
.member4{
    background-repeat: no-repeat;
    background-position: right top;
    background-image: url("../img/creator/bg4.jpg");
    background-size: 40%;
}



#story section .story_pop{
    text-align: center;
    float: none;
    padding: 0;
}
#story section .story_pop a{
    float: none;
}

/*==================
chara
==================*/
.chara_wrap_bg{
    background-image: url("../img/chara/chara_bg.jpg");
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
}
.chara_wrap_bg h3.read{
    margin-top: 1.0em;
}
.chara_wrap{
    position: relative;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
#contents_chara{
	/*width: 100%;*/
    text-align: center;
    padding: 1% 0 2% 0;
    width: 80%;
    float: right;
}
#chara{
	overflow: hidden;
    min-height: 1100px;
}
/**/
.chara_select{
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}
.chara_select a{
    display: inline-block;
    max-width: 300px;
    box-shadow: 0px 0px 10px 0px rgba(144,117,91,0.90);
    position: relative;
}
.chara_select a:hover{
    opacity: 0.7;
}
.chara_select a img{
    width: 100%;
}
.chara_select .main_chara_select{
    margin-bottom: 1.0em;
}
.chara_select .main_chara_select a{
    width: 30%;
    margin: 1%;
}
.chara_select .chara_select_mini a{
    width: 17%;
    margin: 1%;
}


/**/
.chara_list_inpage{
    background-color: #e1d5c8;
    border-bottom: solid 10px #7a4d38;
    border-top: solid 10px #7a4d38;
    padding: 3% 0;
    text-align: center;
}


/**/

#chara .chara_intro{
	position: absolute;
	max-width: 610px;
	width: 50%;
	top: 23%;
	right: 2%;
    z-index: 2;
}
/**/
.chara_image{
	position: relative;
    text-align: right;
}
.chara_image{
	/*width: 70%;*/
    width: 64%;
	max-width: 1056px;
	float: left;
	position: relative;
	overflow: hidden;
	min-height: 700px;
}

.chara_image img{
	width: 100%;
	pointer-events: none;
}
.chara_image img.target{
	position: absolute;
	top:0;
	right: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
}
/**/
.chara_name{
	margin-bottom: 2%;
    width: 100%;
	box-sizing: border-box;
    text-align: center;
}
.chara_read{
    width: 100%;
	box-sizing: border-box;
    text-align: center;
}
.chara_read img{
    width: 100%;
}
.chara_txt{
    color: #9e7549;
	max-width: 610px;
	text-align: left;
	letter-spacing: 0.0em;
	padding: 1.0em;
	margin-bottom: 2%;
	box-sizing: border-box;
    background-color: #eddccc;
    border: #90755b 2px solid;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
    font-size: min(2vw, 18px);
    
}

.chara_txt p{
	border-top: 4px solid #9e7549;
	padding-top: 0.5em;
	margin-top: 0.5em;
    text-align: right;
    font-size: min(2vw, 24px);
}
.chara_txt small {
	font-size:18px;	
}
.chara_slide_box{
    width: 80%;
    margin: 1.0em auto;
}
.chara_slide_box img{
    border: #9e7549 2px solid;
}
.chara_movie_box{
    max-width: 484px;
    margin: 0 auto;
    text-align: center;
    width: 80%;
	display: none;
}
.chara_movie_box a{
    display: inline-block;
    width: 100%;
    position: relative;
}
.chara_movie_box a:hover{
    opacity: 0.7;
}
.chara_movie_box a .new{
    left: 0;
    top: -0.5em;
    width: 4.0em;
    position: absolute;
}

/*==================
system
==================*/
#system{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}
#system .box{
    width: 90%;
    max-width: 1300px;
    margin: 2em auto;
    padding: 0 0 0 0;
    box-sizing: border-box;
    
    
    background-color: #eddccc;
    border: #90755b 10px solid;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
    padding-bottom: 2.0em;
}
.system_menu{
    width: 100%;
    margin: 0 auto;
    max-width: 1100px;
}
.system_menu a{
    display: inline-block;
    padding: 0.5em;
    color: #fff;
    background-color: #90755b;
    border: 5px double #e6d5c1;
    border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    font-size: 1.2em;
    margin: 0.5%;
    line-height: 1.4em;
    min-width: 6.0em;
    position: relative;
}
.system_menu a:hover{
    background-color: #623b30;
}
.system_menu a .new{
    left: -0.5em;
    top: -0.5em;
    position: absolute;
    width: 2.0em;
}
.system_box h4{
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #fff;
    background-color: #90755b;
    padding: 0 0 0.5em 0;
    width: 100%;
    font-size: min(3.6vw, 36px);
    letter-spacing: 0em;
}

.system_slide_box{
    width: 80%;
    margin: 1.0em auto;
}
.system_slide_box img{
    border: #9e7549 2px solid;
    width: 100%;
}

/*==================
sound
==================*/

.bgmbtn:hover,
.stop-bt{
}
.artist,
.sound_info{
	background-color: #000;
	padding: 1.0em;
	width: 90%;
	max-width: 1000px;
	margin: 2em auto;
	border: 3px double #604f3f;
	box-sizing: border-box;
    
        background-color: #eddccc;
    border: #90755b 2px solid;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
    
        font-size: min(2vw, 18px);
    text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white, 0px 0px 3px white, 1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
    color: #301f15;
}
.artist h3{}
.artist .comment strong,
.artist h4,
.sound_info h4{ color: #9e7549;}
.artist .profile{
	padding: 0.5em 0;
}
.artist .profile p{
	text-align: left;
}
.artist p{
	padding:0 2em;
}
.artist .comment{
	text-align: left;
	/*border-top: 1px solid #604f3f;*/
	padding:0 0 0.5em 0;
}
.sound_info .sound_title{
	padding: 1.5em 0;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	
}
.sound_info .sound_txt{
	padding: 0.5em 0;
	border-top: 1px solid #604f3f;
	line-height: 1.6em;
}
.sound_info h3{
	font-size: max(2vw, 20px); 
}
.sound_info{
	margin: 3em auto;
}
.artist .comment a{
	color: #000;
	background-color: #604f3f;
	display: inline-block;
	padding: 0.5em;
}
.artist .comment a:hover{
	opacity: 0.7;
}
.artist .comment strong{
    display: inline-block;
    background-color: #9e7549;
    text-shadow: none;
    color: #fff;
    padding: 0.5em;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5em;
}
/**/
.bgm_audition{
	max-width: 680px;
	width: 90%;
	margin: 1.0em auto 1.0em auto
}
.bgm_audition section{
	width: 100%;
	margin-bottom: 3%;
    
    background-color: #623b30;
    
    border: solid 2px #90755b;
    border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    overflow: hidden;
    color: #e1d5c8;
    text-shadow:none;
}
.bgm_audition section h3.bgm_title{
    font-size: 1.6em;
    
}
.bgm_audition .ppq-audio-player{
	background-color: #623b30;
}
.bgm_audition .ppq-audio-player .player-time{
    width: 5.0em;
}
.bgm_audition .ppq-audio-player{
    height: 72px;
}
.bgm_audition .ppq-audio-player .play-pause-btn .play-pause-icon:after,
.bgm_audition .ppq-audio-player.player-playing .play-pause-icon:after{
    background-image: url("../js/bgm_icon.png");
}
.bgm_audition .bgm_info{
    padding-top: 0.5em;
}

/*==================
special
==================*/

/**/
.special_movie{
	width: 80%;
    /*float: right;*/
	max-width: 980px;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	position: relative;
	bottom: 0;
	text-align: center;
    margin-top: 2%;
}
.special_movie .thum{
	position: relative;
	background-color: #fff;
}
.special_movie .thumImg{
	width: 100%;
	display: block;
	/*padding-top: 56.25%;*/
	position: relative;
	z-index: 3;
}
.special_movie .thum img{
	position:absolute;
	z-index:-1;
	top:0;
}
.special_movie a{
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:5;
	display: inline-table;
	/*max-width: 384px;*/
	width: 85%;
    
    margin-bottom: 2.0em;
    position: relative;
}
.special_movie a:after{
	content: "";
	width: 8em;
	height: 8em;
	display: block;
	position:absolute;
	transition: all 300ms 0s ease;
	opacity: 0.6;
	transform: scale(1);
	margin-top: -4em;
	margin-left: -4em;
	top:50%;
	left:50%;
	z-index: 4;
	background-image: url("../img/common/play.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.special_movie a:hover:after{
	transform: scale(0.8);
	opacity: 1;
}
.special_movie .movie_title{
    font-family: "Noto Serif JP", serif;
    color: #e1d5c8;
    background-color: #623b30;
    font-size: min(3vw, 18px);
    padding: 0.5em 0;
}
/**/
.comic{}
.comic hr{
    background-color: #90755b;
    border: none;
    height: 2px;
    margin: 1.0em 0;
}
.comic img.comic_image{
    max-width: 350px;
    width: 90%;
}

/*==================
info
==================*/
#info{
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}
#info .box{
    width: 90%;
    max-width: 1300px;
    margin: 2em auto;
    padding: 0 0 0 0;
    box-sizing: border-box;
    
    
    background-color: #eddccc;
    border: #90755b 10px solid;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
    padding-bottom: 2.0em;
    
}
#info .product_info{
	width: 100%;
	float: none;
	max-width: 585px;
}
#info .jacket{
	width: 100%;
	float: none;
	/*max-width: 500px;*/
	margin: 0 auto;
}
#info .jacket img{
    width: 100%;
}

/**/
#info .box .txt{
    text-align: left;
}
#info .box .txt h4{
    padding: 0.5em 1.0em;
    background-color: #90755b;
    color: #eddccc;
}
#info .box .txt p{
    padding: 0.5em 1.0em;
}
#info .box .txt ul.caution{
    padding: 0.5em;
    border: dotted 1px #90755b;
    width: 96%;
    margin: 0 auto;
    color: #90755b;
}
/*特典*/
#reservation,
#limited,
#shop{
	padding-bottom: 4%;
}

#reservation .readme,
#limited .readme,
#shop .readme{
	
}
ul.caution li {
	padding-left: 2em;
	text-indent: -1em;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	max-width: 1300px;
	margin: 0 auto;
}
ul.caution li::before{
	display: inline-block;
	text-indent: 0em;
}
#reservation section,
#limited section,
#shop section{
	background-color: #fff;
    color: #90755b;
    box-sizing: border-box;
    border: 6px solid #90755b;
}
section .sample_img{
	width: 100%;
	max-width: 800px;
}
section .shop_img{
	width: 100%;
	max-width: 800px;
	padding: 2% 4%
}
section .sample_img img,
section .shop_img img{
	width: 100%;
}
section .txt{
	text-align: left;
}

section hr{
	width: 90%;
}

#reservation section h3,
#limited section h3,
#shop section h3{
    background-color: #90755b;
    color: #eddccc;
	font-size: 1.3vw;
	font-weight: normal;
	padding: 0.2em 0;
}
#reservation section h4,
#limited section h4,
#shop section h4{
    padding: 0.5em 1.0em;
    background-color: #90755b;
    color: #eddccc;
    margin: 0.15em;
	text-align: center;
}
#shop .caution{
    color: #000;
    text-shadow: 1px 1px 2px white, 1px 0px 2px white, 0px 0px 2px white, 0px 0px 3px white, 1px 1px 3px white, 0 0 1em white, 0.5em 0.5em 1em white, 0 0 0.2em white;
}
#shop section .caution{
    text-shadow: none;
    color: #90755b;
	margin-top: 10px;
	padding: 1% 5%;
}

#reservation section p,
#limited section p,
#shop section p{
	padding: 0.5em;
}

section .txt strong{
	margin-bottom: 0.5em;
	display: inline-block;
}
section .txt span{
	border: 3px double #604f3f;
	display: inline-block;
	padding: 0.5em;
	box-sizing: border-box;
	width: 100%;
	margin: 0.5em 0;
}
/**/
#reservation section ,
#limited section {
	width: 90%;
	margin: 4% auto 0 auto;
	max-width: 1300px;
}
#reservation section .sample_img,
#limited section .sample_img{
	float: left;
	width: 50%;
}
#reservation section .txt,
#limited section .txt{
	float: right;
	width: 50%;
	padding: 1.0em;
	box-sizing: border-box;
}

/**/
#shop .box{
	max-width: 1300px;
	width: 96%;
	margin: 0 auto;
}
#shop .box section{
	float: left;
	width: 48%;
	margin: 1%;
    background-color: #eddccc;
    box-shadow: 0px 0px 30px 0px rgba(144, 117, 91, 0.70) inset;
}
#shop .box section .txt{
	padding: 0.5em;
}
#shop .box section .set{
	border: 1px solid #90755b;
	padding:0;
	margin: 0.5em 0;
}
#shop .box section .set .read{
	border: none;
	color: #fff;
    margin: 0;
}
.shop_link{
	background-color: #604f3f;
	padding: 0.7em 0.3em;
	color: #000;
	display: inline-block;
	font-weight: bold;
	width: 100%;
	box-sizing: border-box;
	margin: 0.5em 0;
	text-align: center;
}
.shop_lin0k img{
	width: 1.0em;
}
.shop_link:hover{
	opacity: 0.7;
}
.shop_link_box{
    padding: 0.5em 0;
}
.shop_link_box .if_logo{
}


.shop_link_box p{
    font-weight: bold;
	display: inline-block;
	width: 200px;
	text-align: center;
}

.shop_link_box a{
    display: inline-block;
    padding: 0.5em 1.0em;
    margin: 0.2em;
	margin-bottom: 1em;
    font-weight: bold;
    position: relative;
    
    border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    box-shadow: 0px 0px 4px 0px #000;
    color: #e1d5c8;
    background-color: #623b30;
    border: solid 5px #7e8d3a;
    
    min-width: 70%;
    
}
.shop_link_box a:hover{
    border-color: #c16f46;
}

.shop_link_box a .new{
    left: -0.5em;
    top: -0.5em;
    position: absolute;
    width: 2.0em;
}

.shop_link_box .pl_btn{
  display: inline-block;
  text-align: center;
  width: 30%;
  color: #fff;
	border-right: solid 1px #7e8d3a;
}
.shop_link_box div.pl_btn:last-child {
border:0;
}

.shop_link_box .pl_btn a{
    display: inline-block;
    padding: 0.5em 1.0em;
    margin: 0.2em;
	margin-bottom: 1em;
    font-weight: bold;
    position: relative;
    
    border-radius: 1.8em;
    -webkit-border-radius: 1.8em;
    -moz-border-radius: 1.8em;
    box-shadow: 0px 0px 4px 0px #000;
    color: #e1d5c8;
    background-color: #623b30;
    border: solid 5px #7e8d3a;
    
    min-width: 10.0em;
    
}


.shop_link_box table {
	width:100%;
	border-collapse:collapse;
	table-layout: fixed;
}
.shop_link_box table td {
	box-sizing: border-box;
	border-collapse: collapse;
	border: solid 0.5px #90755b;
	padding: 1%;
	text-align:center;
}

.shop_link_box table td.lnk_btn { font-size: max(0.8vw, 10px); }
.shop_link_box table td.lnk_btn a{ padding:5% 13%; }
.shop_link_box table td.logo_img img{ width: 60%;}
.shop_link_box table td.shop_logo img{ width:75%; min-width: 90px; background-color: #FFF; padding: 0 10px; margin-top:8px;}


/*countdown*/
.countPop{
	width: 30%;
	display: inline-block;
	cursor: pointer;
}
#top #top_banner .countPop a{
	width: 100%;
}

#top #top_banner .countPop  .play_mark{
	opacity: 0;
}
#top #top_banner .countPop .stop-bt .play_mark{
	-webkit-animation: flash 2s linear infinite;
    -moz-animation: flash 2s linear infinite;
    -ms-animation: flash 2s linear infinite;
    -o-animation: flash 2s linear infinite;
    animation: flash 2s linear infinite;
}
/*キーフレーム*/
@-webkit-keyframes flash {
	0% { opacity:0.5;}
	50% { opacity:1.0;}
	100% { opacity:0.5;}
}
@-moz-keyframes flash {
	0% { opacity:0.5;}
	50% { opacity:1.0;}
	100% { opacity:0.5;}
	
}
@-ms-keyframes flash {
	0% { opacity:0.5;}
	50% { opacity:1.0;}
	100% { opacity:0.5;}
}
@-o-keyframes flash {
	0% { opacity:0.5;}
	50% { opacity:1.0;}
	100% { opacity:0.5;}
}
@keyframes flash {
	0% { opacity:0.5;}
	50% { opacity:1.0;}
	100% { opacity:0.5;}
}
#count_day{
	display: inline-block;
	width: 30%;
	max-width: 600%;
	margin: 0.5%;
	cursor: pointer;
	position: relative;
}
#top #top_banner #count_day a{
	width: 100%;
}
#count_day .play_mark{
	opacity: 0;
}
#count_day .stop-bt .play_mark{
	-webkit-animation: flash 2s linear infinite;
    -moz-animation: flash 2s linear infinite;
    -ms-animation: flash 2s linear infinite;
    -o-animation: flash 2s linear infinite;
    animation: flash 2s linear infinite;
}
.backnumber{
	max-width: 1300px;
	padding-bottom: 5%;
	margin: 0 auto;
	width: 90%;
}
/**/
.backnumber{
	max-width: 1300px;
	padding-bottom: 5%;
	margin: 0 auto;
	width: 90%;
}
.backnumber a{
	box-shadow: 1px 1px 5px 0px rgba(0,174,255,0.50), -1px -1px 5px 0px rgba(0,174,255,0.50);
	display: inline-block;
}
.contgents_inbox{
	max-width: 1000px;
	width: 90%;
	margin: 1.0em auto;
}
.rule{
	width: 100%;
    padding: 1%;
    box-sizing: border-box;
    border: 3px double #604f3f;
	text-align: left;
	background-color: #000;
	margin: 1.0em auto;
	line-height: 1.6em;
	max-width: 1300px;
}
.rule strong{
	color: #fff;
    background-color: #604f3f;
    padding: 0.3em;
	display: inline-block;
	margin-top: 0.5em;
	box-sizing: border-box;
	width: 100%;
}
.rule span{
	border: 1px solid #604f3f;
	background-color: #000;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding: 1.0em;	
}
.chara_vote{
	max-width: 1000px;
	margin: 1em auto;
}
.chara_vote img{
	width: 14%;
}

.btn_view{
	border: 3px double #604f3f;
	width: 90%;
	margin: 1.0em auto;
	background-color: #000;
	max-width: 400px;
	padding: 1.0em;
	font-size: 1.6em;
	box-sizing: border-box;
	cursor: pointer;
}
.btn:hover{
    opacity: 0.7;
}
#result{
	background-color: #000;
	width: 100%;
	display: none;
}
#result .rank{
	padding: 2.0em 0;
}
#result .rank h4{
	margin: 2.0em auto 1.0em auto;
}
#result .rank img{
	width: 30%;
	display: inline-block;
	box-sizing: border-box;
	max-width: 400px;	
}

.rank_box{
	max-width: 1300px;
	margin: 0 auto;
	text-align: left;
}
#contents .rank_box h2{
	font-size: 1.6em;
	padding: 1.0em;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background-color: #604f3f;
	color: #000;
	margin: 2.0em 0 1.0em 0;
}
.rank_box .lines{
	margin: 0 auto;
	width: 90%;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.70);
	border: 3px double #604f3f;
	padding: 1.0em;
	font-size: 1.2em;
}
.rank_box .rank_chara{
	position: relative;
	width: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	padding-top: 42%;
	padding-bottom: 2%;
}
.rank_chara_img{
	width: 100%;
	max-width: 1300px;
}
.rank_bg{
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
}
.rank_box .user_comment{
	padding: 1em;
	box-sizing: border-box;
	
}
.rank_box .user_comment span{
	font-size: 1.6em;
	color: #604f3f;
}
.rank_box .user_comment p{
	line-height: 1.6em;
	width: 94%;
	box-sizing: border-box;
	margin: 0.2em auto;
	border-bottom: 1px dotted #604f3f;
	padding: 0.2em 0;
}


.vote_illust{
	padding: 5em 0;
	background-image: url(../vote/img/illust_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
.vote_illust p{
	margin-bottom: 2.0em;
	display: inline-block;
	background-color: #000;
	padding: 0.5em;
}
.vote_illust a{
	display: inline-block;
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
	border: 1px solid #fff;
}
.vote_illust a:hover{
	opacity: 0.7;
}


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

.shop_link_box a{
    
    min-width: 80%;
    
}
.shop_link_box .pl_btn{
  display: block;
	width: 80%;
	border-right: none;
	margin: 0 auto;
}
.shop_link_box .pl_btn img{
	vertical-align: middle;
	margin-right: 3%;
}
	
}



/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1300px) {
/*==================
header
==================*/
	/*header{
		background-size: 7%;
	}
    .header_wrap{
        width: 100%;
    }
    nav{
        padding-left: 18%;
    }
    */
/*==================
common
==================*/
    .c_box{
    width: 80%;
    margin: 0 5% 0 15%;
    text-align: center;
}
/*==================
chara
==================*/
    #chara{
        min-height: auto;
    }
    .chara_txt{
        font-size: min(1.2vw);
    }
	/*.chara_image{
		width: 100%;
		max-width: 1200px;
		float: right;
	}
	.chara_image .chara_illust{
		width: 70%;
	}
	#chara .chara_wrap{
		background-size: 50%, 50%, 30%;
	}*/
	/*#chara .chara_intro{
		left: 2%;
	}*/
}/*max-width: 1300px*/


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


.shop_link_box table td.lnk_btn { font-size: max(0.5vw, 8px); }
.shop_link_box table td.lnk_btn a { min-width: 5em; }

}

/*//////////////////////////////////////////////////////////////////////*/
@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;}
	
	body{
		font-size: 13px;
        min-width: 0px;
        width: 100%;
	}
    #load p {
        top: 35%;
        width: 80%;
        left: 10%;
    }
    .c_box{
        width: 100%;
        margin: 0;
    }
    .second_header{
        padding-top: 14em;
    }
    .second_header h2{
        width: 100%;
        float: none;
        margin: 0 auto;
    }
    .br_pc_txt{
        display: inline-block;
    }
    .br_sp_txt{
        display: block;
    }
    .contents_wrap_second{
        width: 100%;
        float: none;
    }
/*==================
header
==================*/
    .header_wrap{
        width: 0;
    }
    header{
		width: 100%;
		max-width: none;
		float: none;
		position: fixed;
		z-index: 3;
	}
	#sp_logo{}
	
	nav{
		text-align: center;
        padding: 5em 0;
	}
	nav a{
		width: 60%;
	}
	header .logo{
		width: 55%;
		margin: 10% auto 0 auto;
	}
	#header_nav{
		height: 100vh;
		float: right;
		text-align: center;
		box-sizing: border-box;
		position: fixed;
		right: 0;
		top: 0;
		overflow-y: auto;
		width: 100%;
        background-color: rgba(255,255,255,0.70);
		position: fixed;
		transition: all .3s;
		display: none;
		z-index: 3;
        padding: 0;
        background-image: none;
	}
	header .logo{
	max-width: none;
}
nav{
	max-width: none;
}
header .lng_sw {
	top:82%;
}	
	
#sp_nav{
	margin: 10px 20px;
	display: block;
	width: 70px;
	height: 70px;
	z-index: 11;
	/*border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;*/
	position: relative;
	/*background-color: #fbfbe9;
	border-radius: 30px;*/
	/*padding: 0.5em;*/
    padding: 16px 12px;
	float: right;
    
    background-image: url("../img/nav/sp_nav.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#click_btn{
	margin-top: 6px;
	margin-right: 3px;
	margin-left: 3px;
}
#nav-toggle{
	display: block;
    right: 12px;
    top: 14px;
    width: 40px;
    height: 45px;
    cursor: pointer;
    z-index: 1200;
	float: right;
}

#nav-toggle div {
    position: relative;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #fff;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	
}
#nav-toggle span:nth-child(1) {
    top: 0px;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

.open{
	position: absolute;
}
	
/*#nav-toggle：切り替えアニメーション*/
.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}
	
/*==================
contentss
==================*/
	#contents{
        min-height: 0;
	}
	#sub_nav{
		font-size: 14px;
	}
	#sub_nav a{
		/*width: 20%;*/
		min-width: 0;
        font-size: 3.6vw;
	}
	.br_box{
		display: inherit;
	}
/*==================
top
==================*/
	#top{
		overflow: hidden;
	}
    
    
	#top #top_banner{
		/*padding-top: 5%;*/
	}
	#top #top_banner a{
		width: 80%;
		margin-bottom: 2%;
	}
    
    /**/
    #top_creater .creater_list{
        font-size: min(4vw, 36px);
        width: 100%;
    }
    #top_creater .creater_list th{
        font-size: min(3vw, 36px);
    }
    #top_chara .top_chara_image{
        width: 90%;
        margin: 0 auto;
    }
    /**/
    .wrap_story_box{
        font-size: min(3.5vw, 36px);
        width: 100%;
        background-size: 60%;
        background-position: 12.5em top;
        min-height: 21.5em;
    }
    .wrap_story_box p{
        padding-left: 5%;
    }
    .story_pop{
        float: none;
        padding-left: 10%;
    }
    /**/
    
	.countPop{
		width: 100%;
		max-width: 600px;
		margin-bottom: 1%;
	}
	#top #top_banner a.illust_pop{
		max-width: 600px;
		margin-bottom: 3%;
	}

	#top_product{
		/*padding-bottom: 10%;*/
	}
	#top_product .product_info,
	#top_product .jacket{
		float: none;
		width: 80%;
		max-width: 500px;
		margin: 0 auto;
	}
	.jacket img{
		width: 100%;
		float: none;
	}
    .product_info_box{
        width: 100%;
        border: #90755b 5px solid;
    }
    .product_info_box p{
        font-size: min(3vw, 26px);
    }
/*==================
chara
==================*/
    #chara{
        padding-bottom: 130%;
        min-height: auto;
    }
	#contents_chara{
		background-size: auto , auto;
        width: 100%;
        float: none;
	}
    .chara_select{
        padding: 2.0em 1em;
    }
    .chara_select .chara_select_mini a{
        width: 22%;
    }
    
    .chara_list_inpage .chara_select .chara_select_mini a{
        width: 17%;
    }
    
	.chara_image{
		width: 130%;
        /*margin-right: -15%;*/
        margin-left: -10%;
	}
	.chara_image .chara_illust{
		width: 110%;
		margin-left: -10%;
	}
	#sub_nav .br_box{
		display: inline-block;
	}
	#chara .chara_wrap{
		background-size: 70%, 70%,45%;
	}
	#chara .chara_name{
		/*margin-top: 50%;*/
	}
    #chara .chara_read{
        /*margin-top: 135%;*/
        margin-top: 170%;
    }
    #chara .chara_name img{
    }
	#chara .chara_intro{
        
		width: 100%;
		padding-bottom:4%;
		box-sizing: border-box;
		margin: 0 auto;
		left: 0;
		top: 0;
	}
    .chara_serif{
        width: 27%;
    }
    .chara_txt{
        font-size: min(3vw);
    }
    .chara_txt p{
        font-size: min(3.5vw);
    }
/*==================
story
==================*/
    #story{
        float: none;
        width: 100%;
    }
    #story .story_read{
        margin-top: -20.5%;
    }
	#story .txt{
		width: 90%;
		margin: 0 auto;
		font-size: 1.2em;
        text-align: left;
        padding-top: 50%;
        padding-bottom:4%;
	}
	#story .txt strong{
		font-size: 1.4em;
	}
	#story .txt em,
	#world section p em{
		display: block;
	}
	#world section h3{
		font-size: 1.4em;
	}
	
/*==================
creator
==================*/    
    .creator_name{
        padding-top: 0.5em;
    font-size: min(3.6vw);
}
.creator_comment{
    font-size: min(3vw);
    text-align: left;
}
    .member1,.member2,.member3,.member4{
        background-size: 60%;
    }
/*==================
system
==================*/
    
/*==================
special
==================*/
	#twitter_item .box{
		width: 94%;
	}
	#twitter_item .box .twitter_icon img{
		width: 20%;
		margin: 0.5%;
	}
	#castcomment section{
		width: 100%;
		background-size: 180px;
	}
	#castcomment section .cast_name_wrap{
		font-size: 21px;
		margin: 25px auto;
	}
	#castcomment section .cast_name_wrap .cast_name{
		padding-left: 110px;
	}
/*==================
sound
==================*/
    .artist, .sound_info{
        font-size: min(3vw);
    }
/*==================
info
==================*/
	#reservation section .sample_img,
	#limited section .sample_img{
		float: none;
		width: 100%;
	}
	#reservation section .txt,
	#limited section .txt{
		float: none;
		width: 100%;
	}
	/**/
	#shop .box{
		width: 90%;
	}
	#shop .box section{
		float: none;
		width: 100%;
		margin: 2% 0;
	}
	
	/*countdown*/
	#count_day{
		width: 80%;
	}
	.backnumber #count_day{
		width: 47%;
		margin: 2% 1%;
		box-sizing: border-box;
	}
	.chara_vote img{
		width: 20%;
	}
		
	
}/*max-width: 768px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 620px) {
	header .lng_sw {
	top:60%;
}	
/*==================
chara
==================*/
    #chara .chara_read{
        margin-top: 135%;
    }
}
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
/*表示*/
body{
	font-size: 2.8vw;
}

/*==================
contents
==================*/
	#contents{
		padding: 1% 0 4% 0; 
	}
	#pagetop{
		width: 50px;
	}
	#sub_nav{
		font-size: 3.0vw;
	}
	#sub_nav a{
	}
	#sub_nav a em{
		display: block;
	}
	.br_box{
		display: inherit;
	}
/*==================
top
==================*/	
/*==================
story
==================*/
	#story .txt{
		font-size: 2.8vw;
	}
	#story .txt strong{
		font-size: 3.0vw;
	}
	#world section h3{
		font-size: 3.2vw;
	}
/*==================
chara
==================*/
    #chara{
        padding-bottom: 90%;
    }
	#contents_chara{
		padding: 1% 0 4% 0; 
	}
    .chara_voice .sample_voice{
        width: 30%;
    }
/*==================
system
==================*/
	
}/*media:480*/