/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*=================================
layout
=================================*/
body{
	font-family: 'Noto Sans JP', sans-serif;
	background-image:url(../img/footer/footer_bg.png), url(../img/common/bg.jpg);
	background-repeat: no-repeat ,repeat;
	background-position: bottom center, center;
	background-size: auto, 10%;
	font-size: 16px;
}
img{vertical-align: baseline;}

#wrap{
	max-width: 1770px;
	width: 100%;
	margin: 0 auto;
}

/*表示*/
.view_pc{display: block;}
.view_pc_tb{display: block;}
.view_tb{display:none;}
.view_tb_sp{display:none;}
.view_sp{display:none;}
/*==================
header
==================*/
header{
	width: 30%;
	/*max-width: 470px;*/
	/*max-width: 360px;*/
	float: left;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	text-align: center;
}
#header_nav{
	display: block;
}
#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;
}
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_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_gallery img{background-image: url(../img/nav/nav_gallery_off.png);}
nav a.nav_gallery:hover  img,
nav a.nav_gallery.select img{background-image: url(../img/nav/nav_gallery_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_movie img{background-image: url(../img/nav/nav_movie_off.png);}
nav a.nav_movie:hover  img,
nav a.nav_movie.select img{background-image: url(../img/nav/nav_movie_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;
}

#pagetop{
	width: 80px;
	text-align: center;
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	z-index: 3;
}
#pagetop img{
	width: 100%;
	background-image: url(../img/common/pagetop_off.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
#pagetop:hover img{
	background-image: url(../img/common/pagetop_on.png);
}

/**/
#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;
}
/*==================
footer
==================*/
footer{
	width: 100%;
	margin-top: 10%;
}

#footer_wrap{width: 100%;margin: 0 auto;padding: 1.0em 0 0 0 ;}
footer a{display: inline-block;}
footer a:hover{opacity: 0.7;}
.footer_sns{
	text-align:center;
	padding: 1.0em 0 ;
}
.footer_sns a{max-width: 40px; margin:4px;}
.footer_sns a img{width: 100%; max-width: 40px;}
.footer_sw{text-align:center;margin-bottom: 10px; }
.footer_sw img{max-width: 60px; width: 100%;}
.footer_banner{text-align:center;margin-bottom: 10px;}
.footer_notice{text-align:center; background-color: #f9f9e8;padding: 1.0em 0;}
.footer_copy{text-align:center;width: 100%;font-size: 12px; padding: 1.0em 0 2.0em 0; box-sizing: border-box;background-color: #f9f9e8;}
/*==================
load
==================*/
#load {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #68c3c5;
  z-index: 9999999;
  text-align:center;
  color:#fff;
}

#load_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#load_img img{
	animation-name:load_icon;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
}
@keyframes load_icon{
	0% {
	transform: rotateY(0deg);
	}
	10% {
	transform: rotateY(0deg);
	}

	100% {
	/*transform: rotateY(360deg);*/
		transform: rotateY(180deg);
	}
}
.load_bg1,
.load_bg2{
  display:block;
}

.load_bg1{
	content: "";
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	bottom:50%;
	left:0;
	transform: scaleY(1);
	background-color: #68c3c5;
}
.load_bg2{
	content: "";
	position:fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 50%;
	left:0;
	transform: scaleY(1);
	background-color: #68c3c5;
}
.loaded1{
	animation-name:load1;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}
.loaded2{
	animation-name:load2;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes load1{
  0% {
    transform-origin:top;
    transform:scaleY(1);
  }

  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}
@keyframes load2{
  0% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}


@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}
/*==================
common
==================*/
.wrap_contents{
	width: 70%;
	max-width: 1300px;
	float: left;
	box-sizing: border-box;
}
.btn{
	width: 100%;
    max-width: 250px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    padding: 0.5em;
    border-radius: 30px;
    margin: 10px auto 0px;
    background-color: #99823b;
	color: #fbfbe9;
}
.btn:hover{
	background-color: #ff778b;
}
.border_line{
	border:solid 10px;
	border-image-source:url("../img/common/border.jpg");
	border-image-slice:10;
}
.sub_nav{
	text-align: center;
	width: 100%;
	padding-top: 5%;
}
.sub_nav h3{
	margin: 0 auto 1.0em auto;
}
.sub_nav h3 img{
	max-width: 690px;
	width: 90%;
}
.sub_nav a{
	display: inline-block;
	background-position: center;
	width: 19.5%;
	max-width: 340px;
	background-size: 100%;
	position: relative;
}
.sub_nav a img{
	width: 100%;
	max-width: 340px;
	background-size: 100%;
	background-position: center;
}
.sub_nav a img.new{
	background-image: none;
}
.sub_nav a.select{}

/*==================
top
==================*/
#key{
	max-width: 900px;
	width: 80%;
	margin:80px auto 0 auto;
	position: relative;
}

.wideslider,
.wideslider * {
margin: 0;
padding: 0;
}

.slider img {
    width: 100%;
    object-fit: cover;
}
.slider_prev,
.slider_next {
top: 0;
overflow: hidden;
position: absolute;
z-index: 10;
cursor: pointer;
}
.slider_prev {background: #ffc9cb url(../img/slider/prev.png) no-repeat right center;}
.slider_next {background: #ffc9cb url(../img/slider/next.png) no-repeat left center;}

/**/
.slick-dots li button:before{
	
}
.slick-dots li.slick-active button:before{}

.pagination a {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0 3px;
	display: inline-block;
	overflow: hidden;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
	position: relative;
	background-size: 100%;
	background-image: url(../img/top/slider_point_off.png);
}
.pagination a.active {
	opacity: 1.0;
	background-image: url(../img/top/slider_point_on.png);
}

/**/
#top_pv{
	text-align: center;
	position: relative;
	margin: 10% 0 0 0 ;
}
.pv_read{
	width: 70%;
	display: inline-block;
	max-width: 890px;
	position: absolute;
	top: -20%;
	z-index: 2;
}
.pv{
	width: 70%;
	display: inline-block;
	position: relative;
	max-width: 890px;
}
.pv::after{
	content: "";
	width: 8em;
	height: 8em;
	display: block;
	position: absolute;
	transition: all 300ms 0s ease;
	opacity: 0.9;
	transform: scale(1);
	margin-top: -4em;
	margin-left: -4em;
	top: 50%;
	left: 50%;
	z-index: 2;
	background-image: url(../img/top/pv_play.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.pv:hover::after{
	transform: scale(1.2);
	opacity: 0.7;
}
/**/
#top .wrap_box{
	max-width: 1300px;
	width: 90%;
	margin: 3% auto 1.5% auto;
	text-align: center;
}
#top .wrap_box .news_box{
	/*border: 1px solid #fff;*/
	background-color: rgba(251,251,233,0.50);
	width: 49%;
	box-sizing: border-box;
	padding: 1.0em;
	float: right;
	/*height: 300px;*/
	overflow-x: auto;
	color: #99823b;
	
}
#top .wrap_box .news_box dl{
	background-color: #fbfbe9;
	margin: 0.5em 0;
	text-align: left;
}

#top .wrap_box .news_box dl.more_news{
	display: none;
}
#top .wrap_box .news_box dl dt{
	padding: 0.4em 0.4em 0 0.4em;
}
#top .wrap_box .news_box dl dd{
	padding: 0.2em 0.5em 0.5em 0.5em;
}
#top .wrap_box .news_box dl dd a{
	text-decoration: underline;
	padding: 0.1em;
	color: #99823b;
	color: #ff778b;
}
#top .wrap_box .news_box dl dd a:hover{
	opacity: 0.7;
}
/**/
#top .wrap_box .twitter_wrap{
	background-color: rgba(251,251,233,0.50);
	width: 49%;
	box-sizing: border-box;
	float: left;
	padding: 1.0rem;
}
#top .wrap_box .twitter_box_in{
	height: 300px;
}
/**/
#top .product{
	background-color: rgba(118,92,81,0.60);
	box-sizing: border-box;
	max-width: 1300px;
	width: 90%;
	margin: 3% auto 10% auto;
	padding: 1.0em;
}

#top .product .jacket{
	width: 49%;
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	box-sizing: border-box;
}
#top .product .jacket img{
	width: 100%;
	max-width: 500px;
}
#top .product .spec{
	width: 50%;
	max-width: 550px;
	display: inline-block;
	padding: 2%;
	vertical-align: middle;
	box-sizing: border-box;
}
#top .product .spec table{
	text-indent: initial;
    border-spacing: 2px;
	border-collapse: separate;
}
#top .product .spec table th{
	padding: 2px 10px;
	color: #fbfbea;
	background-color: #4aa59e;
	vertical-align: middle;
	white-space: nowrap;
}
#top .product .spec table td{
	width: 100%;
	color: #fbfbea;
	padding-left: 10px;
	vertical-align: middle;
}

/**/
.countdown{
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
}
.countImg{
	width: 100%;
}
.countplay{
	cursor: pointer;
	position: absolute;
	
	max-width: 300px;
	width: 15%;
	background-repeat: no-repeat;
	background-size: 100%;
}
.countplay:hover{
	opacity: 0.7;
}
.countdown .play-bt{
	background-image: url(../count/btn.png);
}
.countdown .stop-bt{
	background-image: url(../count/btn_on.png);
}
.countdown .sv{
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
.count_btn{
}
.count_btn img{
	width: 100%;
}
.btn_0 .countplay{
	left: 54%; top: 66%;
}
.btn_1 .countplay{
	left: 55%; top: 66%;
}
.btn_2 .countplay{
	left: 55%; top: 66%;
}
.btn_3 .countplay{
	left: 55%; top: 66%;
}
.btn_4 .countplay{
	left: 55%; top: 66%;
}
.btn_5 .countplay{
	left: 55%; top: 66%;
}
.btn_6 .countplay{
	left: 55%; top: 66%;
}
.btn_7 .countplay{
	left: 5%; top: 67%;
}
.btn_8 .countplay{
	left: 82%; top: 67%;
}
.btn_9 .countplay{
	left: 5%; top: 67%;
}
.btn_10 .countplay{
	left: 82%; top: 67%;
}



/*==================
story
==================*/
#story{}

#story .sub_nav{}
#story .sub_nav .sub_nav_story img{
	background-image: url(../img/story/sub_nav1.png);
}
#story .sub_nav .sub_nav_story:hover  img,
#story .sub_nav .select .sub_nav_story  img{
	background-image: url(../img/story/sub_nav1_on.png);
}

#story .sub_nav .sub_nav_word img{
	background-image: url(../img/story/sub_nav2.png);
}
#story .sub_nav .sub_nav_word:hover  img,
#story .sub_nav .select .sub_nav_word  img{
	background-image: url(../img/story/sub_nav2_on.png);
}
#story .sub_nav img.new,
#story .sub_nav a:hover img.new,
#story .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: 4%;
} 

.story_box{
	margin: 0 auto;
	width: 90%;
	max-width: 900px;
	color: #692c10;
	text-align: center;
}
.story_box p{
	text-align: left;
	font-size: 1.2em;
	margin: 1.0em auto;
}
.word_box{
	margin: 2.0em auto;
	width: 90%;
	max-width: 900px;
	color: #692c10;
	text-align: center;
	padding-top: 1.0em;
}
.word_box article{
}
.word_box article h3{
	text-align: center;
	width: 100%;
	margin-top: -1.5em;
	position: relative;
}
.word_box article h3 img{
	width: 100%;
	max-width: 800px;
}
.word_box article h3 .new{
	width: 10%;
	max-width: 74px;
	position: absolute;
	top: 30%;
	left: 10%;
}

.word_box article section{
	background-color: #dff1e3;
	margin-bottom: 3.0em;
	padding-bottom: 5.0em;
	
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 100%;
}
.word_box article .word_txt{
	text-align: left;
	padding: 1.0em;
	width: 60%;
	box-sizing: border-box;
}
.word_box article .word_1 .word_txt{
	width: 100%;
}
.word_2{
	background-image:url(../img/story/word/w2_bg.png);
}
.word_3{
	background-image:url(../img/story/word/w3_bg.png);
}
.word_4{
	background-image:url(../img/story/word/w4_bg.png);
}
.word_5{
	background-image:url(../img/story/word/w5_bg.png);
}
.word_6{
	background-image:url(../img/story/word/w6_bg.png);
}

/*==================
chara
==================*/
#chara .sub_nav{}
#chara .sub_nav .sub_nav_main img{
	background-image: url(../img/chara/sub_nav_main.png);
}
#chara .sub_nav .sub_nav_main:hover  img,
#chara .sub_nav .select .sub_nav_main  img{
	background-image: url(../img/chara/sub_nav_main_on.png);
}

#chara .sub_nav .sub_nav_sub img{
	background-image: url(../img/chara/sub_nav_sub.png);
}
#chara .sub_nav .sub_nav_sub:hover  img,
#chara .sub_nav .select .sub_nav_sub img{
	background-image: url(../img/chara/sub_nav_sub_on.png);
}

#chara .sub_nav img.new,
#chara .sub_nav a:hover img.new,
#chara .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: 4%;
} 

.chara_select_box{
	text-align: center;
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
}
.chara_select{
	cursor: pointer;
	display: inline-block;
	width: 30%;
	margin: 1%;
	position: relative;
}

.chara_select .chara_select_icon{
	background-color:#ddd1bf;
	width: 100%;
	max-width: 285px;
}
.chara_select:hover .chara_select_icon{
	background-color:#ff778b;
}
.chara_select .chara_select_name{
	width: 100%;
	max-width: 285px;
}

.chara_select  .new{
	position: absolute;
	max-width: 70px;
	width: 15%;
	left: 5%;
	bottom: 5%;
}

/**/
.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 13;
}
.modal__bg{
	
	background-image: url(../img/common/bg.jpg);
	height: 100vh;
	position: absolute;
	width: 100%;
	background-size: 10%;
	/*background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;*/
}
.modal__content{
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
    height: 100vh;
	box-sizing: border-box;
}
.modal_close{
	float: right;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10;
	max-width: 60px;
	width: 7%;
	min-width: 40px;
}
/**/
.modal__content {
    scrollbar-width: thin;
	scrollbar-color: #D4AA70 #e4e4e4;
}
.modal__content::-webkit-scrollbar {
    width: 10px;
}
.modal__content::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
} 
.modal__content::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
}
/**/
.chara_box{
	width: 96%;
	margin: 0 auto;
	max-width: 1500px;
	padding-bottom: 20%;
}
.chara_image{
	float: right;
	width: 65%;
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	max-width: 1224px;
}
.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_intro{
	float: left;
	width: 45%;
	max-width: 700px;
	margin: 7% 0 0 0;
	position: absolute;
}
.chara_intro .chara_name_wrap{}
.chara_intro .chara_name_wrap .chara_name{
	display: inline-block;
	margin: 0 ;
}
.chara_intro .chara_name_wrap .chara_name img{
	width: 100%;
}

.chara_words{
	width: 90%;
	margin: 0 auto;
	max-width: 590px;
}
.chara_txt_line{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.float_left{
	float: left;
	margin-left: 20px;
	max-width: 200px;
}
.float_right{
	float: right;
	margin-right: 20px;
	max-width: 200px;
}
.chara_intro .chara_txt{
	text-align: left;
	padding: 0 1.0em;
	box-sizing: border-box;
	color: #692c10;
	width: 90%;
	margin: 0 auto;
	max-width: 590px;
}
.next_chara{
	position: absolute;
	width: 100%;
	bottom: 0;
}
.sticky{
	bottom: 0;
	position: -webkit-sticky;
	position: sticky;
	z-index: 2;
}

.js-modal-next{
	max-width: 200px;
	width: 10%;
	color: #b5903d;
	font-size: 1.2vw;
	position: relative;
	padding-bottom: 5%;
}
.js-modal-next img{
	width: 100%;
}
.js-modal-next .icon{
	background-color: #ddd1bf;
}
.js-modal-next:hover .icon{
	background-color: #ff778b;
}
.prev_arr{
	width: 100%;
	background-image: url(../img/chara/arr_left.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	margin: -13% 0 0 0;
	position: absolute;
}
.next_arr{
	width: 100%;
	background-image: url(../img/chara/arr_right.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	text-align: center;
	margin: -13% 0 0 0;
	position: absolute;
}
.chara_cos{
	width: 25%;
	display: inline-block;
	margin: -2% 0.5% 0 0.5%;
}
.cCos-bt{
	display: inline-block;
	/*width: 25%;*/
	width: 100%;
	/*margin: -2% 0.5% 0 0.5% ;*/
	box-sizing: border-box;
	cursor: pointer;
	max-width: 218px;
}
.cCos-bt img{
	width: 100%;
	vertical-align: bottom;
}
.chara_cos .selected{
	display: none;
}

/**/
.chara_box .chara_sv{
	float: right;
	cursor: pointer;
	width: 70%;
	padding-top: 6%;
}
.chara_box .chara_sv .sv_on{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.chara_box .chara_sv .sv_box{
}
.chara_box .chara_sv .sv_box .sv{
	width: 30%;
	display: inline-block;
	margin: 1%;
	float: left;
	position: relative;
}
.chara_box .chara_sv .cvplay{
	width: 100%;
	display: inline-block;
	position: relative;
	max-width: 150px;
}
.chara_box .chara_sv .cvplay img{
	width: 100%;
}
.chara_box .chara_sv .cvplay img.new{
	position: absolute;
	left: 0;
	top: 0;
	width: 45%;
	z-index: 3;
}
.chara_box .chara_sv .cvplay:hover .sv_on,
.chara_box .chara_sv a.stop-bt .sv_on{
	opacity: 1;
}

/*==================
gallery
==================*/
#gallery .sub_nav{}
#gallery .sub_nav .sub_nav_main img{
}

#gallery .cg_select_box{
	text-align: center;
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
}
#gallery .cg_select_box a{
	cursor: pointer;
	display: inline-block;
	width: 22%;
	margin: 1%;
	position: relative;
}
#gallery .cg_select_box a.no_image{
	cursor: inherit;
	pointer-events: none;
}
#gallery .cg_select_box a img{
	width: 100%;
	max-width: 285px;
}

#gallery .cg_select_box a .new{
	position: absolute;
	max-width: 70px;
	width: 25%;
	left: 0%;
	top: 0%;
}
/**/
.gallery_view_box{
	max-width: 1200px;
	margin: 80px auto 0 auto;
}
.gallery_view_box .cg{
	text-align: center;
	width: 100%;
}
.gallery_view_box .cg img{
	width: 100%;
	max-width: 1000px;
}
/*==================
system
==================*/
.system_box{
	background-color: #dff1e3;
	color: #692c10;
	padding: 1.0em;
	box-sizing: border-box;
	width: 90%;
	margin: 3.0em auto;
}
.system_box h3{
	text-align: center;
	width: 100%;
	margin-top: -7%;
	position: relative;
}
.system_box h3 img{
	width: 100%;
	max-width: 800px;
}
.system_box h3 .new{
	width: 10%;
	max-width: 60px;
	left: 10%;
	top: 32%;
	position: absolute;
}
.system_box strong{
	font-weight: normal;
	background-color: #b5903d;
	color: #fbfbe9;
	display: inline-block;
	padding: 0.5em;
	border-radius: 1.0em;
	-webkit-border-radius: 1.0em;
	-moz-border-radius: 1.0em;
}

/*==================
sound
==================*/
#sound .sub_nav{}
#sound .sub_nav .sub_nav_bgm img{
	background-image: url(../img/sound/sub_nav_bgm.png);
}
#sound .sub_nav .sub_nav_bgm:hover  img,
#sound .sub_nav .select .sub_nav_bgm  img{
	background-image: url(../img/sound/sub_nav_bgm_on.png);
}
#sound .sub_nav .sub_nav_theme img{
	background-image: url(../img/sound/sub_nav_op.png);
}
#sound .sub_nav .sub_nav_theme:hover  img,
#sound .sub_nav .select .sub_nav_theme  img{
	background-image: url(../img/sound/sub_nav_op_on.png);
}

#sound .sub_nav img.new,
#sound .sub_nav a:hover img.new,
#sound .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: 4%;
} 

.bgm_box{
	margin: 0 auto;
	width: 90%;
	max-width: 900px;
}
.bgm_audition{
	max-width: 680px;
	width: 90%;
	margin: 1.5em auto 10% auto;
}
.bgm_audition section{
	width: 100%;
	margin-bottom: 3%;
}
.bgm_audition section h3{
	background-color: #b5903d;
	color: #fbfbe9;
	padding: 0.1em 0.3em;
	font-size: 2.0em;
	box-sizing: border-box;
	font-weight: normal;
}
.bgm_audition section h3 .new{
	width: 1.35em;
}
.bgm_audition section .bgm_img{
	width: 100%;
	vertical-align: bottom;
}
.bgm_audition .ppq-audio-player{
	background-color: #fbfbe9 ;
}
.artist{
	background-color: #dff1e3;
	color: #692c10;
	padding: 1.0em;
	box-sizing: border-box;
	width: 90%;
	margin: 0 auto;
}
.artist h3{
	text-align: center;
	width: 100%;
	margin-top: -7%;
}
.artist h3 img{
	width: 100%;
	max-width: 800px;
}
.artist strong{
	font-weight: normal;
	background-color: #b5903d;
	color: #fbfbe9;
	display: inline-block;
	padding: 0.5em;
	border-radius: 1.0em;
	-webkit-border-radius: 1.0em;
	-moz-border-radius: 1.0em;
}
.op_title{
	background-color: #dff1e3;
	color: #692c10;
	padding: 1.0em 1.0em 2.0em 1.0em;
	box-sizing: border-box;
	width: 90%;
	margin: 3.0em auto 3.0em auto;
	text-align: center;
}
.op_title strong{
	font-weight: normal;
	background-color: #b5903d;
	color: #fbfbe9;
	display: inline-block;
	padding: 0.5em;
	border-radius: 1.0em;
	-webkit-border-radius: 1.0em;
	-moz-border-radius: 1.0em;
}
.op_title h4{
	text-align: center;
	width: 100%;
	margin-top: -7%;
}
.op_title h4 img{
	width: 100%;
	max-width: 800px;
}
.photo{
	width: 100%;
	text-align: center;
}
.photo img{
	width: 100%;
	margin: 0 auto;
	max-width: 500px;
}

/*==================
movie
==================*/
#movie{}

#movie .sub_nav{}
#movie .sub_nav .sub_nav_pv img{
	background-image: url(../img/movie/sub_nav_pv.png);
}
#movie .sub_nav .sub_nav_pv:hover  img,
#movie .sub_nav .select .sub_nav_pv  img{
	background-image: url(../img/movie/sub_nav_pv_on.png);
}

#movie .sub_nav .sub_nav_pm img{
	background-image: url(../img/movie/sub_nav_pm.png);
}
#movie .sub_nav .sub_nav_pm:hover  img,
#movie .sub_nav .select .sub_nav_pm img{
	background-image: url(../img/movie/sub_nav_pm_on.png);
}
#movie .sub_nav img.new,
#movie .sub_nav a:hover img.new,
#movie .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: 4%;
} 
#movie .pv_in{
	position: relative;
	width: 48%;
	margin: 1% 0.5% 8% 0.5%;
	box-sizing: border-box;
	display: inline-block;
}
#movie .pv_in .pv{
	width: 100%;
}
#movie .pv_in .pv_read{
	width: 100%;
}
#movie .pv_in .new{
	position: absolute;
	z-index: 3;
	left: 0;
	top: -11%;
	width: 14%;
	max-width: 72px;
}
#movie .pv_box{
	padding-top: 4%;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#movie .pm_box .pv_in{
	width: 80%;
	margin: 10% auto;
}
/*pm*/
#pm_sub_nav{
	margin-bottom: 3.0em;
}
#pm_sub_nav a{
	cursor: pointer;
	display: inline-block;
	width: 13%;
	margin: 1%;
	position: relative;
}
#pm_sub_nav a .chara_select_icon{
	background-color:#ddd1bf;
	width: 100%;
	max-width: 285px;
}
#pm_sub_nav a .chara_select_icon:hover,
#pm_sub_nav a.select .chara_select_icon{
	background-color:#ff778b;
}
#pm_sub_nav a .new{
	position: absolute;
	left: 0;
	top: 0;
	width: 40%;
}

/*==================
special
==================*/
#special{}

#special .sub_nav{}
#special .sub_nav .sub_nav_icon img{
	background-image: url(../img/special/sub_nav_icon.png);
}
#special .sub_nav .sub_nav_icon:hover  img,
#special .sub_nav .select .sub_nav_icon  img{
	background-image: url(../img/special/sub_nav_icon_on.png);
}

#special .sub_nav .sub_nav_header img{
	background-image: url(../img/special/sub_nav_header.png);
}
#special .sub_nav .sub_nav_header:hover  img,
#special .sub_nav .select .sub_nav_header img{
	background-image: url(../img/special/sub_nav_header_on.png);
}

#special .sub_nav .sub_nav_wallpaper img{
	background-image: url(../img/special/sub_nav_wallpaper.png);
}
#special .sub_nav .sub_nav_wallpaper:hover  img,
#special .sub_nav .select .sub_nav_wallpaper img{
	background-image: url(../img/special/sub_nav_wallpaper_on.png);
}

#special .sub_nav .sub_nav_comment img{
	background-image: url(../img/special/sub_nav_comment.png);
}
#special .sub_nav .sub_nav_comment:hover  img,
#special .sub_nav .select .sub_nav_comment img{
	background-image: url(../img/special/sub_nav_comment_on.png);
}

#special .sub_nav .sub_nav_ss img{
	background-image: url(../img/special/sub_nav_ss.png);
}
#special .sub_nav .sub_nav_ss:hover  img,
#special .sub_nav .select .sub_nav_ss img{
	background-image: url(../img/special/sub_nav_ss_on.png);
}
#special .sub_nav .sub_nav_backnum img{
	background-image: url(../img/special/sub_nav_backnum.png);
}
#special .sub_nav .sub_nav_backnum:hover  img,
#special .sub_nav .select .sub_nav_backnum img{
	background-image: url(../img/special/sub_nav_backnum_on.png);
}

#special .sub_nav img.new,
#special .sub_nav a:hover img.new,
#special .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: -3%;
} 

.twitter_icon_box{}
.twitter_icon_box section{
	width: 90%;
	text-align: center;
	margin: 1.0em auto;
}
.twitter_icon_box section img{
	width: 30%;
	margin: 1%;
	max-width: 300px;
}
.twitter_header_box{}
.twitter_header_box section{
	width: 90%;
	text-align: center;
	margin: 1.0em auto;
}
.twitter_header_box section img{
	width: 46%;
	margin: 1%;
	max-width: 500px;
}
.backnum_box section{
	width: 90%;
	text-align: center;
	margin: 1.0em auto;
}
.backnum_box section img{
	width: 31%;
	margin: 0.5%;
	max-width: 500px;
}
.backnum_box section a:hover{
	opacity: 0.6;
}
.twitter_icon_box section.new_box,
.twitter_header_box section.new_box{
	position: relative;
}
.twitter_icon_box section.new_box span{
	position: relative;
	display: inline-block;
	width: 30%;
	margin: 1%;
	max-width: 300px;
}
.twitter_header_box section.new_box span{
	position: relative;
	display: inline-block;
	width: 46%;
	margin: 1%;
	max-width: 500px;
}
.twitter_icon_box section.new_box span img,
.twitter_header_box section.new_box span img{
	width: 100%;
}
.twitter_icon_box section.new_box span img.new{
	max-width: 74px;
	width: 30%;
	position: absolute;
	left: 0;
	top: 0;
}

.twitter_header_box section.new_box span img.new{
	max-width: 74px;
	width: 20%;
	position: absolute;
	left: 0;
	top: 0;
}
/**/
.wallpaper_box{
	width: 100%;
	margin: 5% auto;
	max-width: 800px;
	text-align: center;
}
.wallpaper_box img{
	width: 100%;
}
.wallpaper_box section{
	width: 33%;
	max-width: 200px;
	/*float: left;*/
	margin: 1%;
	box-sizing: border-box;
	display: inline-block;
}
.wallpaper_box section a{
	display: inline-block;
	background-color: #fbfbe9;
	color: #92d8d3;
	box-sizing: border-box;
	padding: 0.5em;
	width: 100%;
	margin: 0.5%;
}
.wallpaper_box section a:hover{
	color: #fbfbe9;
	background-color: #ff778b;
}




/**/
#ss_sub_nav{
	text-align: center;
	margin: 5% auto;
}
#ss_sub_nav a{
	cursor: pointer;
	display: inline-block;
	width: 13%;
	margin: 1%;
	position: relative;
}
#ss_sub_nav a .chara_select_icon:hover,
#ss_sub_nav a.select .chara_select_icon
{
	background-color: #ff778b;
}
#ss_sub_nav a .chara_select_icon {
    background-color: #ddd1bf;
    width: 100%;
    max-width: 285px;
}
#ss_sub_nav a:nth-child(1) .chara_select_icon {
    background-color: #b9acf4;
}
#ss_sub_nav a:nth-child(2) .chara_select_icon {
    background-color: #bff7f6;
}
#ss_sub_nav a:nth-child(3) .chara_select_icon {
    background-color: #ffc7ce;
}
#ss_sub_nav a:nth-child(4) .chara_select_icon {
    background-color: #e45d47;
}
#ss_sub_nav a:nth-child(5) .chara_select_icon {
    background-color: #88bd89;
}
#ss_sub_nav a .chara_select_icon:hover,
#ss_sub_nav a.select .chara_select_icon
{
	background-color: #ff778b;
}
#ss_sub_nav a .new{
	position: absolute;
	width: 35%;
}

.ss_box{
	text-align: center;
	width: 90%;
	margin: 0 auto;
}

/**/
.cast_comment{
	max-width: 800px;
	width: 94%;
	margin: 7% auto;
	padding-bottom: 20px;
	
	background-color: #dff1e3;
	color: #692c10;
	padding: 1em 1em 2em 1em;
	box-sizing: border-box;
	width: 90%;
	margin: 3em auto 3em auto;
}

.cast_comment article{
	text-align: left;
	padding: 5% 2%;
	font-size: 16px;
}
.cast_comment article section{
	margin-bottom: 30px;
}

.cast_comment article section h4{
	font-size: 21px;
	padding: 0.5em;
}
.cast_comment article section .cast_name{
	min-height: 200px;
	max-height: 200px;
	box-sizing: border-box;
	background-repeat:  no-repeat;
	background-position: top right;
	position: relative;
	color: #fbfbe9;
	background-color: #4fbbc5;
}

.cast_comment article section.cast_01 .cast_name{
	background-image: url(../img/special/comment/bg_01.png);
	background-color: #816abd;
}
.cast_comment article section.cast_02 .cast_name{
	background-image: url(../img/special/comment/bg_02.png);
	background-color: #46809e;
}
.cast_comment article section.cast_03 .cast_name{
	background-image: url(../img/special/comment/bg_03.png);
	background-color: #b35e9c;
}
.cast_comment article section.cast_04 .cast_name{
	background-image: url(../img/special/comment/bg_04.png);
	background-color: #d74545;
}
.cast_comment article section.cast_05 .cast_name{
	background-image: url(../img/special/comment/bg_05.png);
	background-color: #458b4a;
}
.cast_comment article section.cast_01 .cast_name{
	text-shadow: 1px 1px 1px #816abd,1px 0px 1px #816abd,-1px -1px 1px #816abd,-1px 0px 1px #816abd,2px 2px 1px #816abd,2px 0px 1px #816abd,-2px -2px 1px #816abd,-2px 0px 1px #816abd;
}
.cast_comment article section.cast_02 .cast_name{
	text-shadow: 1px 1px 1px #46809e,1px 0px 1px #46809e,-1px -1px 1px #46809e,-1px 0px 1px #46809e,2px 2px 1px #46809e,2px 0px 1px #46809e,-2px -2px 1px #46809e,-2px 0px 1px #46809e;
}
.cast_comment article section.cast_03 .cast_name{
	text-shadow: 1px 1px 1px #b35e9c,1px 0px 1px #b35e9c,-1px -1px 1px #b35e9c,-1px 0px 1px #b35e9c,2px 2px 1px #b35e9c,2px 0px 1px #b35e9c,-2px -2px 1px #b35e9c,-2px 0px 1px #b35e9c;
}
.cast_comment article section.cast_04 .cast_name{
	text-shadow: 1px 1px 1px #d74545,1px 0px 1px #d74545,-1px -1px 1px #d74545,-1px 0px 1px #d74545,2px 2px 1px #d74545,2px 0px 1px #d74545,-2px -2px 1px #d74545,-2px 0px 1px #d74545;
}
.cast_comment article section.cast_05 .cast_name{
	text-shadow: 1px 1px 1px #458b4a,1px 0px 1px #458b4a,-1px -1px 1px #458b4a,-1px 0px 1px #458b4a,2px 2px 1px #458b4a,2px 0px 1px #458b4a,-2px -2px 1px #458b4a,-2px 0px 1px #458b4a;
}

.cast_comment article section .cast_name p{
	padding: 10% 3%;
}
.cast_comment article section .cast_name span{
	font-size: 30px;
}
.cast_comment article section .cast_name small{}
.cast_comment article section .txt_q{
	padding:  0.6em 0.3em;
	font-weight: bold;
	background-color: #b5903d;
    color: #fbfbe9;
}
.cast_comment article section .txt_a{
	padding: 0.3em;
	margin-bottom: 10px;
}
/*==================
info
==================*/
#info{}

#info .sub_nav{}
#info .sub_nav .sub_nav_spec img{
	background-image: url(../info/img/sub_nav_info.png);
}
#info .sub_nav .sub_nav_spec:hover  img,
#info .sub_nav .select .sub_nav_spec  img{
	background-image: url(../info/img/sub_nav_info_on.png);
}

#info .sub_nav .sub_nav_patch img{
	background-image: url(../info/img/sub_nav_patch.png);
}
#info .sub_nav .sub_nav_patch:hover  img,
#info .sub_nav .select .sub_nav_patch  img{
	background-image: url(../info/img/sub_nav_patch_on.png);
}

#info .sub_nav .sub_nav_reservation img{
	background-image: url(../info/img/sub_nav_reservation.png);
}
#info .sub_nav .sub_nav_reservation:hover  img,
#info .sub_nav .select .sub_nav_reservation  img{
	background-image: url(../info/img/sub_nav_reservation_on.png);
}

#info .sub_nav .sub_nav_limited img{
	background-image: url(../info/img/sub_nav_limited.png);
}
#info .sub_nav .sub_nav_limited:hover  img,
#info .sub_nav .select .sub_nav_limited  img{
	background-image: url(../info/img/sub_nav_limited_on.png);
}

#info .sub_nav .sub_nav_shop img{
	background-image: url(../info/img/sub_nav_shop.png);
}
#info .sub_nav .sub_nav_shop:hover  img,
#info .sub_nav .select .sub_nav_shop  img{
	background-image: url(../info/img/sub_nav_shop_on.png);
}

#info .sub_nav .sub_nav_news img{
	background-image: url(../info/img/sub_nav_news.png);
}
#info .sub_nav .sub_nav_news:hover  img,
#info .sub_nav .select .sub_nav_news img{
	background-image: url(../info/img/sub_nav_news_on.png);
}
#info .sub_nav img.new,
#info .sub_nav a:hover img.new,
#info .sub_nav .select img.new{
	background-image: none;
	width: 20%;
	max-width: 74px;
	position: absolute;
	top: 15%;
	left: 4%;
}
#info .product{
	background-color: rgba(118,92,81,0.60);
	box-sizing: border-box;
	max-width: 800px;
	width: 90%;
	margin: 3% auto 10% auto;
	padding: 1.0em;
	text-align: center;
}
#info .product .jacket{
	display: inline-block;
	text-align: right;
	box-sizing: border-box;
	
	width: 100%;
		text-align: center;
}
#info .product .jacket img{
	width: 100%;
	max-width: 800px;
}
#info .product .spec{
	max-width: 550px;
	display: inline-block;
	padding: 2%;
	vertical-align: middle;
	box-sizing: border-box;
	
	width: 100%;
}
#info .product .spec table{
	text-indent: initial;
    border-spacing: 2px;
	border-collapse: separate;
}
#info .product .spec table th{
	padding: 2px 10px;
	color: #fbfbea;
	background-color: #4aa59e;
	vertical-align: middle;
	white-space: nowrap;
}
#info .product .spec table td{
	width: 100%;
	color: #fbfbea;
	padding-left: 10px;
	vertical-align: middle;
	text-align: left;
}
/**/
#info .news_box{
	background-color: rgba(251,251,233,0.50);
	width: 80%;
	margin: 2.0em auto;
	box-sizing: border-box;
	padding: 1.0em;
	overflow-x: auto;
	color: #99823b;
}
#info .news_box dl{
	background-color: #fbfbe9;
	margin: 0.5em 0;
	text-align: left;
}
#info .news_box dl dt{
	padding: 0.4em 0.4em 0 0.4em;
}
#info .news_box dl dd{
	padding: 0.2em 0.5em 0.5em 0.5em;
}
#info .news_box dl dd a{
	text-decoration: underline;
	padding: 0.1em;
	color: #99823b;
	color: #ff778b;
}
#info .news_box dl dd a:hover{
	opacity: 0.7;
}

/*-------*/
.bonus_info h2{
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
	background-color: #68c3c5;
	color: #fff;
}
.bonus_info h3{
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 0.3em;
	background-color: #68c3c5;
	color: #fff;
    margin-bottom: 0.2em;
}
.bonus_info h4{
	line-height: 1.2em;
	font-weight: normal;
	background-color: #b5903d;
	color: #fbfbe9;
	padding: 0.5em;
	border-radius: 1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1.0em;
	margin-bottom: 1px;
}
.bonus_info .detail{
	line-height: 1.2em;
	padding: 0.3em 0 0.3em 1.0em;
	box-sizing: border-box;
}
.bonus_info .line_box{
	border: #b5903d solid 1px;
	padding: 0.3em;
	margin: 0.5em 0.3em;
}
.bonus_info .txt_wrap{
	padding: 0.5em;
}
.bonus_info .set{
	padding: 0.2em;
	border: #b5903d solid 1px;
	margin: 0.3em 0;
}
.bonus_info .readme{
	box-sizing: border-box;
	padding: 0 1%;
}
.bonus_info .readme p{
	padding-left: 1em;
	text-indent: -1em;
	display: inline-block;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	line-height: 1.2em;
}
.bonus_info {
	max-width: 1100px;
	text-align: left;
	width: 96%;
	margin: 0 auto;
	color: #692c10;
}

.bonus_info .bonus_info h2{
	background-color: #000;
	line-height: 1.2em;
}

.bonus_info  section{
	float: left;
	width: 48%;
	margin: 1%;
	box-sizing: border-box;
	background-color: #dff1e3;
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 100%;

	padding-bottom: 0.3em;
}
.bonus_info section img,
.bonus_info img{
	width: 100%;
}

.bonus_box section{
	width: 100%;
	margin: 1% auto;
	float: none;
}

.store_link{
    padding: 0.3em 0 0.3em 0.3em;
	border: double 3px #fff;
	display: inline-block;
	width: 90%;
	margin: 0.2em 5%;
	box-sizing: border-box;
	
	text-align: center;
    background-color: #68c3c5;
    color: #fff;
	font-weight: normal;
}
.bonus_info section .store_link img{
	width: 1.1em;
	vertical-align: middle;
	margin-left: 0.2em;
}
.store_link:hover{
	opacity: 0.7;
}



/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1100px) {
/*==================
TOP
==================*/
	#top .wrap_box .twitter_wrap{
		float: none;
		width: 100%;
	}
	#top .wrap_box .news_box{
		float: none;
		width: 100%;
		margin-bottom: 2%;
	}
	#top .product .jacket{
		width: 100%;
		text-align: center;
	}
	#top .product .spec{
		width: 100%;
	}
}/*media:1018*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
	body{
		font-size: 3.0vw;
	}
	
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}
/*==================
header
==================*/
	header{
		width: 100%;
		max-width: none;
		float: none;
		position: fixed;
		z-index: 3;
	}
	#sp_logo{}
	
	nav{
		text-align: center;
	}
	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-image:url(../img/common/bg.jpg);
		position: fixed;
		transition: all .3s;
		/*opacity: 0;*/
		display: none;
		z-index: 3;
	}
	header .logo{
	max-width: none;
}
nav{
	max-width: none;
}
#sp_nav{
	margin: 10px 20px;
	display: block;
	width: 40px;
	height: 40px;
	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;
	float: right;
}
#click_btn{
	margin-top: 6px;
	margin-right: 3px;
	margin-left: 3px;
}
#nav-toggle{
	display: block;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 1200;
	float: right;
}

#nav-toggle div {
    position: relative;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #92d8d3;
    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);
}
/*==================
footer
==================*/
	footer{}
	#footer_wrap .footer_copy{
		padding-bottom: 100px;
	}
/*==================
common
==================*/
	.wrap_contents{
		width: 100%;
		max-width: 1300px;
		float: none;
		padding-top: 16%;
	}
	.sub_nav a{
		width: 48%;
	}
/*==================
TOP
==================*/
	#top{
		/*padding-top: 3.0em;*/
	}
	#key{
		width: 80%;
		margin-top: 60px;
	}
	#slider_bg{
		padding: 15% 0 2% 0;
	}
	.pagination{
		top: -2.5em;
	}
	.pagination a{
		width: 2em;
		height: 2em;
	}
/*==================
story
==================*/
	em.br_box{
		display: block;
	}
	.word_box article section{
		padding-bottom: 0;
	}
	.word_box article section{
		background-size: 110%;
	}
/*==================
chara
==================*/
	.chara_box{
		position: relative;
		padding-bottom: 50%;
	}
	.chara_select .new{
		left: 0;
		width: 21%;
	}
	.chara_image{
		float: none;
		width: 130%;
		position: absolute;
		margin-top: 15%;
		margin-left: -22%;
	}
	.chara_intro{
		float: none;
		width: 100%;
		position: inherit;
		margin-top: 1%;
	}
	
	.modal_close{
		width: 60px;
	}
	.chara_name{
		width: 70%;
	}
	.chara_txt_line,
	.chara_words,
	.chara_intro .chara_txt{
		width: 74%;
	}
	.chara_cos{
		margin-bottom: 130%;
	}
	.sub_chara .chara_cos{
		margin-bottom: 160%;
	}
	.cCos-bt{
	}
	.js-modal-next{
		width: 20%;
		padding-bottom: 20%;
	}
	.prev_arr,
	.next_arr{
	}
	.float_left{
		margin-left: 1%;
	}
	.float_right{
		margin-right: 3%;
	}
	.chara_box .chara_sv{
		clear: both;
		width: 80%;
		margin: 0 10%;
		padding: 0;
	}
/*==================
gallery
==================*/
	#gallery .cg_select_box a{
		width: 30%;
	}
/*==================
system
==================*/
	.system_box h3{
		margin-top: -1.8em;
		width: 120%;
		margin-left: -10%;
	}
/*==================
sound
==================*/
	.artist h3,.op_title h4{
		margin-top: -1.8em;
		width: 120%;
		margin-left: -10%;
	}
/*==================
movie
==================*/
	#movie .pv_in{
		width: 80%;
		margin: 10% auto;
	}
/*==================
info
==================*/	
	.bonus_info  section{
		float: none;
		width: 100%;
		margin: 1% auto;
	}
/*==================
special
==================*/
	#ss_sub_nav {
		width: 80%;
		margin: 1.0em auto;
	}
	#ss_sub_nav a{
		width: 26%;
	}
	#pm_sub_nav a{
		width: 30%;
	}
	.ss_box{
		width: 100%;
	}
	.backnum_box section img{
		width: 46%;
		margin: 1%;
		max-width: 500px;
	}
	
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
	body{
		font-size: 3.4vw;
	}
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: none;}
.view_tb{display:none;}
.view_tb_sp{display:block;}
.view_sp{display:block;}
	
	#pagetop{
		width: 40px;
	}
	
	#teaser section{
		padding: 15% 0 5% 0;
	}
	#teaser section .intro .txt{
		width: 100%;
	}
/*==================
footer
==================*/
	footer{}
	#footer_wrap{
	}
/*==================
chara
==================*/
.chara_select{
	width: 40%;
	margin: 2%;
	}
	.js-modal-next{
		font-size: 2.7vw;
	}
	.prev_arr, .next_arr{
	}
/*==================
special
==================*/	
.twitter_icon_box section img{
	width: 46%;
	margin: 1%;
	max-width: 300px;
}
.twitter_header_box section img{
	width: 90%;
	margin: 1%;
	max-width: 500px;
}
.backnum_box section img{
	width: 46%;
	margin: 1%;
	max-width: 500px;
}
.twitter_icon_box section.new_box span{
	width: 46%;
	margin: 1%;
	max-width: 300px;
}
.twitter_header_box section.new_box span{
	width: 90%;
	margin: 1%;
	max-width: 500px;
}
	.cast_comment article section .cast_name{
		background-size: 100%, auto;
		min-height: 10px;
	}
	.cast_comment article,
	.cast_comment article section h4{
		font-size: 3.6vw;
	}
	.cast_comment article section .cast_name span{
		font-size: 6.0vw;
	}

	
}/*media:480*/