@charset "utf-8";
/* Clearfix
--------------------------------------*/
.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
.space-bottom5 {
	margin-bottom:5px;
}
.space-bottom10 {
	margin-bottom:10px;
}
img {
	vertical-align:bottom;
}
/* Footer
--------------------------------------*/
div.under_navi {
	margin-bottom:20px;
}
div.under_navi a.btn {
	display: block;
	margin: 5px auto;
	width: 60%;
	height: 28px;
	xborder-radius: 10px;
	border: 1px solid #FFD88D;
	text-decoration: none;
	color: #ff8800;
	line-height: 28px;
	font-size: 14px;
	text-align:center;
	letter-spacing: 0.1em;
	text-shadow:
 0 0 2px white, 0 0 2px white, 0 1px 1px rgba(204,204,204,.3), 0 -1px 2px rgba(204,204,204,.3);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFDF3), to(#FFECA3));
	box-shadow:
 1px 1px 1px rgba(255,255,255,.5) inset, 1px 1px 7px rgba(255,255,255,.4) inset, -1px -1px 1px rgba(255,255,255,.2) inset, -1px -1px 4px rgba(255,255,255,.1) inset;
	-webkit-box-shadow:
 1px 1px 1px rgba(255,255,255,.5) inset, 1px 1px 7px rgba(255,255,255,.4) inset, -1px -1px 1px rgba(255,255,255,.2) inset, -1px -1px 4px rgba(255,255,255,.1) inset;
	-moz-box-shadow:
 1px 1px 1px rgba(255,255,255,.5) inset, 1px 1px 7px rgba(255,255,255,.4) inset, -1px -1px 1px rgba(255,255,255,.2) inset, -1px -1px 4px rgba(255,255,255,.1) inset;
}
.footer_banner {
	margin:20px 0;
}
/* Top
--------------------------------------*/
.w_100 {
	width:100%;
}
#pgm_main {
}
#story_episode {
	text-align:center;
	margin:5% 5% 6% 5%;	
}
#story_episode img {
	vertical-align:middle;
	margin:0 0 1% 1%;
	}
#story_episode a {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:110%;
	padding:5% 15%;
	background:#4dd8e2;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-moz-box-shadow: 1px 1px 5px #525252;
	-webkit-box-shadow: 1px 1px 5px #525252;
	box-shadow: 1px 1px 5px #525252;
}

#head_area {
	display:-webkit-inline-box;
	display:-moz-inline-box;
	display:-ms-inline-box;
	display:flex-inline-box;
	width:100%;
}
#head_img1 {
	width:75%;
}
#head_img2 {
	width:25%;
}
.txt_area {
	background:#FFF;
	padding:2%;
	margin:1% 3%;
}
div.link {
	padding:1% 0;
	color:#fff;
	text-align:center;
	background:#fff;
	border-top:1px solid #CCC;
}
div.link {
	color:#666;
}
#top_logo {
	text-align:center;
	padding: 0 30%;
}
#top_back a {
	text-decoration: none;
	color: #333;
	display: block;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(99%, #dddddd));
	margin: 3% 30%;
	padding: 2%;
	text-align: center;
	border: #CCC 1px solid;
}
.block_area {
	margin:2% 0;
}
.block_area2 {
	padding: 0 2% 2% 2%;
}
#official {
	padding:0 2%;
}
.kami_bg {
	padding:2% 5% 3% 7%;
}
.txt1 {
	color:#e95098;
	font-weight:bold;
}
#cast_area {
	display: none;
}
#staff_cast {
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-box;
	display: flex-inline-box;
	width: 96%;
	padding:2%;
}
#staff_cast li {
	width: 50%;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	text-align:center;
	border:1px solid #59dbe6;
	padding:10px 0;
}
.default1 {
	background:#59dbe6;
	color:#FFFFFF;
}
.default2 {
	background:#fff;
	color:#59dbe6;
}
#staff_cast #tab1 {
	position:relative;
}
.arrow_on:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 5px;
	width: 6px;
	height: 6px;
	margin: -4px 0 0 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#staff_cast #tab2 {
	position:relative;
}
.arrow_off:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 5px;
	width: 6px;
	height: 6px;
	margin: -4px 0 0 0;
	border-top: solid 2px #59dbe6;
	border-right: solid 2px #59dbe6;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.chara {
	border-bottom:1px solid #d5d5d5;
}
#chara_img1 {
	background:url(../img/chara1.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img2 {
	background:url(../img/chara2.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img3 {
	background:url(../img/chara3.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img4 {
	background:url(../img/chara4.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img5 {
	background:url(../img/chara5.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img6 {
	background:url(../img/chara6.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img7 {
	background:url(../img/chara7.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img8 {
	background:url(../img/chara8.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img9 {
	background:url(../img/chara9.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
#chara_img10 {
	background:url(../img/chara10.jpg) no-repeat;
	height: 0;
	padding-top: 53%;
	background-size: contain;
	position:relative;
}
.chara_btn {
	position:absolute;
	top:65%;
	left:3%;
	color:#59dbe6;
	border:1px solid #59dbe6;
	padding:2% 6% 2% 2%;
}
.chara_btn:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 7px;
	width: 6px;
	height: 6px;
	margin: -4px 0 0 0;
	border-top: solid 2px #59dbe6;
	border-right: solid 2px #59dbe6;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.chara_detail {
	color:#FFF;
	padding:2%;
	display:none;
}
.chara_men {
	background:#00a6b9;
}
.chara_women {
	background:#d75773;
}
/*あらすじ*/
#story_sect {
	background:#33b9c9;
	padding:2%;
	color:#fff;
}
#story_exp {
	color:#4ec5ce;
	padding:0 3%;
}
#story_navi {
	background:#FFF;
}
#story_navi a {
	color:#000000;
	text-decoration:none;
	padding:5% 2%;
	display:block;
	border-bottom:1px solid #CCC;
}
#story_navi li:first-child {
	border-top:1px solid #CCC;
}
.story_arrow {
	float:right;
}
#story_navi a:after {
	display: block;
	content: "";
	position: absolute;
	right: 10px;
	width: 6px;
	height: 6px;
	margin: -20px 0 0 0;
	border-top: solid 2px #29d8ed;
	border-right: solid 2px #29d8ed;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#story_area {
	padding:1% 0 2% 0;
}
#mov_link {
	margin:7% 0 8% 0;
	text-align:center;
}
#mov_link a {
	background:#e9546b;
	padding:4% 5%;
	color:#FFFFFF;
	text-decoration:none;
	-moz-box-shadow: 0px 0px 3px #999999;
	-webkit-box-shadow: 0px 0px 3px #999999;
	box-shadow: 0px 0px 3px #999999;
}