@charset "utf-8";
/* CSS Document */

.bg{
	background: url("../images/bg.jpg") no-repeat center top;
	background-size: cover;
}

.deco > span{
	width:47px;
	height:47px;
	display:block;
	background: url("../images/page/deco.png") no-repeat;
	background-size:100%;
	position:absolute;
}

.deco > span:nth-child(1){
	left:20px;
	top:80px;
}
.deco > span:nth-child(2){
	right:20px;
	top:80px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.deco > span:nth-child(3){
	left:20px;
	bottom:30px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.deco > span:nth-child(4){
	right:20px;
	bottom:30px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.box{
	height:100vh;
}

.snap{
	height:auto;
	min-height:100%;
	min-height:100vh;
}

/*

MOVIE

*/
section#movie{
	min-height:900px;
	height:100vh;
}

section#movie div.movieArea{
	padding:100px 0 50px;
	transition:0.5s;
}

section#movie div.movieArea .Title{
	margin:0 auto 30px;
}

section#movie > iframe{
	margin:0 auto;
}

@media screen and (min-height: 1000px) {
	section#movie div.movieArea .Title{
	margin:0 auto 5%;
}
}
/*

INTRODUCTION

*/

section#intro{
width: 100%;
height: 100vh;
overflow: hidden;
}


@-webkit-keyframes bgInt {
0% { transform: scale(1.04, 1.04); }
100%   { transform: scale(1.0, 1.0); }
}

@keyframes bgInt {
0% { transform: scale(1.04, 1.04); }
100%   { transform: scale(1.0, 1.0); }
}

div#introBg{
	width:100%;
	height:100%;
	overflow: none;
	background:url("../images/page/intro_bg.jpg") no-repeat center top;
	background-size:cover;
	transform-origin:center top;
	backface-visibility:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-animation: bgInt 3s ease-out;
	animation-duration: bgInt 3s ease-out;
}

section#intro div.introArea{
	padding:100px 0 50px;
	width:100%;
	height:100%;
}

section#intro div.introArea .Title{
	margin:2% auto 30px;
	animation-delay: 1s;
}

section#intro div.introArea .subTitle{
	margin:0 auto 20px;
}

.introText{
	width:57%;
	height:62%;
	margin:5% auto 0;
	/*border:solid 1px #FFF;*/
	background:url("../images/page/intro_txt_all.png") no-repeat center top;
	background-size:contain;
	transform-origin:center bottom;
	animation-delay: 1s;
	animation-duration: 5s ease-in;
}

section#intro div.introArea p{
	text-indent:-9999px;
}

/*CHARA*/

section#chara{
	height:100vh;
	min-height:720px;
	padding-bottom:50px;
}

section#chara div.characterArea{
	padding:100px 0 0;
}

section#chara div.characterArea .Title{
	margin:0 auto 0;
}

div.chart{
	width:1100px;
	height:662px;
	background: url("../images/page/chart_bg.png") no-repeat;
	background-size:100%;
	margin:2% auto 2%;
	position:relative;
	transition:3s;
}

/*@media screen and (min-width: 1500px) {
	div.chart{
	-webkit-transform-origin:center top;
	-moz-transform-origin:center top;
	-ms-transform-origin:center top;
	transform-origin:center top;
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	margin:3% auto 5%;
	}
	section#chara{
		height:auto!important;
		min-height:100vh;
	}
}*/

@media screen and (min-height: 1000px) {
	div.chart{
	-webkit-transform-origin:center top;
	-moz-transform-origin:center top;
	-ms-transform-origin:center top;
	transform-origin:center top;
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	margin:3% auto 2%;
	}
}

div.chart a{
	display:block;
	position:absolute;
	transition: 0.5s;
	/*background:rgba(255,255,255,0.5);*/
}

div.chart a#takuboku{
	width:203px;
	height:211px;
	top:230px;
	left:459px;
	background: url("../images/page/btn_c01.png") no-repeat;
	background-size:contain;
}
div.chart a#kyosuke{
	width:197px;
	height:215px;
	top:226px;
	left:826px;
	background: url("../images/page/btn_c02.png") no-repeat;
	background-size:contain;
}
div.chart a#kodo{
	width:156px;
	height:182px;
	top:13px;
	left:663px;
	background: url("../images/page/btn_c03.png") no-repeat;
	background-size:contain;
}
div.chart a#taro{
	width:163px;
	height:182px;
	top:480px;
	left:663px;
	background: url("../images/page/btn_c04.png") no-repeat;
	background-size:contain;
}
div.chart a#isamu{
	width:161px;
	height:185px;
	top:175px;
	left:173px;
	background: url("../images/page/btn_c05.png") no-repeat;
	background-size:contain;
}
div.chart a#saku{
	width:162px;
	height:180px;
	top:384px;
	left:178px;
	background: url("../images/page/btn_c06.png") no-repeat;
	background-size:contain;
}
div.chart a#ryu{
	width:154px;
	height:175px;
	top:184px;
	left:5px;
	background: url("../images/page/btn_c07.png") no-repeat;
	background-size:contain;
}

div.chart a#bokusui{
	width:157px;
	height:180px;
	top:480px;
	left:346px;
	background: url("../images/page/btn_c08.png") no-repeat;
	background-size:contain;
}

#soseki{
	position:absolute;
	width:112px;
	height:125px;
	top:16px;
	left:168px;
	background: url("../images/page/btn_c09.png") no-repeat;
	background-size:contain;
}

#ogai{
	position:absolute;
	width:110px;
	height:125px;
	top:18px;
	left:343px;
	background:rgba(0,0,0,0.1);
	background: url("../images/page/btn_c10.png") no-repeat;
	background-size:contain;
}

/*

STAFF & CAST

*/

section#staff{
	width:100%;
	height:100vh;
	min-height:700px;
	overflow: hidden;
}

section#staff div.staffArea{
	width:94%;
	min-width:1032px;
	padding:100px 0 50px;
	margin:0 auto;
	position:relative;
}

section#staff div.staffArea .Title{
	margin:0 auto 30px;
}

section#staff div.staffArea > dl{
	text-indent:-99999px;
}

@-webkit-keyframes txtStf {
from { transform: scale(1.1, 1.1) ; }
to   { transform: scale(1.0, 1.0) ; }
}

@keyframes txtStf {
from { transform: scale(1.1, 1.1) ; }
to   { transform: scale(1.0, 1.0) ; }
}

section#staff div.staffArea .staff_txt{
	width:35%;
	height:50%;
	background:url("../images/page/staff_txt01.png") no-repeat;
	background-size: 100%;
	position:absolute;
	left:3%;
	top:20%;
	/*-webkit-animation: txtStf 2s ease-out;
	animation-duration: txtStf 2s ease-out;*/
}

section#staff div.staffArea .cast_txt{
	width:22.5%;
	height:50%;
	background:url("../images/page/staff_txt02.png") no-repeat;
	background-size: 100%;
	position:absolute;
	right:5%;
	top:20%;
	/*-webkit-animation: txtStf 2s ease-out;
	animation-duration: txtStf 2s ease-out;*/
}

@-webkit-keyframes bgstf {
0% { transform: translate(0, 2%); }
100%   { transform: translate(0, 0); }
}

@keyframes bgstf {
0% { transform: translate(0, 2%); }
100%   { transform: translate(0, 0); }
}

#staffBg{
background: url("../images/page/staff_bg.jpg") no-repeat center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
transform-origin:center top;
-webkit-animation: bgstf 1s ease-out;
animation-duration: bgstf 1s ease-out;
}

/*

STORY

*/
section#story{
}

section#story div.storyArea{
	width:80%;
	max-width:1180px;
	margin:0 auto;
	padding:100px 0 0;
	transition:0.5s;
}

section#story div.storyArea .Title{
	margin:0 auto 30px;
}

ul#storyList{
	width:90%;
	margin:0 auto 0.5em;
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: row;
  	flex-direction: row;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

ul#storyList li{
	width:15%;
	height:43px;
	margin:0 auto 1em;
	position:relative;
}

ul#storyList li.pre{
	background:rgba(207,171,95,0.9);
}

ul#storyList li.pre img{
	width:60%;
	margin:8% auto 0;
}

ul#storyList li img.secList
{
	width:106%;
	position:absolute;
	left:-3%;
	top:-6px;
	cursor:pointer;
	transition:0.5s;
}

ul#storyList li img.secList:hover{
	opacity:0.5;
}

#story02,#story03,#story04,#story05,#story06,#story07,
#story08,#story09,#story10,#story11,#story12{
	display:none;
}

div.storyStill{
	width:89%;
	text-align: center;
	margin:0 auto 1.5em;
}

div.storyStill img{
	width:33%;
	border-right:solid 1px #EADDA3;
}

div.storyText{
	width:90%;
	text-align: center;
	margin:0 auto;
	position:relative;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
	font-size:0.9em;
}

div.storyText img.storyNum{
	width:8%;
	position:absolute;
	left:0;
	top:0;
}

div.storyText p{
	text-align: left;
	font-size:1.1em;
	line-height:1.2em;
	margin:0 0 1em 11%;
}

div.storyText p span{
	font-size:0.8em;
}

div.storyText p.storyTitle{
	font-size:1.6em;
	font-weight:bold;
	line-height:1.2em;
	margin:0 0 0.5em 11%;
	text-indent:-0.1em;
}

div.storyText p.storyStaff{
	width:87%;
	background:rgba(255,255,255,0.4);
	padding:0.5em 0 0.5em 1em;
	font-size:0.9em;
	/*text-indent:1em;*/
	display:block;
	line-height:1.5em;
	border-radius:2px;
}

div.storyText p.storyStaff span{
	display:inline-block;
	font-size:1.0em;
}


@media screen and (min-height: 1000px) {
	div.storyArea{
	-webkit-transform-origin:center top;
	-moz-transform-origin:center top;
	-ms-transform-origin:center top;
	transform-origin:center top;
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	margin:3% auto 2%;
	}
	
	section#story div.storyArea .Title{
	margin:0 auto 5%;
}
}

/*

MUSIC

*/
section#music{
	width:100%;
	height:auto;
	background: url("../images/page/music_bg.jpg") no-repeat center top;
	background-size: cover;
	padding-bottom:20px;
}

div.musicAreaWrap{
	padding:100px 0 120px;
	margin:0;
}
section#music .Title{
	margin:0 auto 30px;	
}

div.musicArea{
	width:1100px;
	background:#FFFAF2;
	margin:0 auto;
	padding:80px 0;
	position:relative;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}

div.musicArea ul#musicBtnList{
	width:100%;
	position:absolute;
	left:0;
	top:2.5em;
}

div.musicArea ul#musicBtnList li{
	width:250px;
	height:32px;
	margin:0 1%;
	display:inline-block;
	transition:0.5s;
}

div.musicArea ul#musicBtnList li > span{
	display:none;
}

div.musicArea ul#musicBtnList li:hover{
	opacity:0.5;
	cursor:pointer;
}

ul#musicBtnList li#btn_op{
	background: url("../images/page/btn_op_wh.jpg") no-repeat center top;
	background-size: contain;
}

ul#musicBtnList li#btn_op.active{
	background: url("../images/page/btn_op_bla.jpg") no-repeat center top;
	background-size: contain;
}

ul#musicBtnList li#btn_ed{
	background: url("../images/page/btn_ed_wh.jpg") no-repeat center top;
	background-size: contain;
}

ul#musicBtnList li#btn_ed.active{
	background: url("../images/page/btn_ed_bla.jpg") no-repeat center top;
	background-size: contain;
}

ul#musicBtnList li#btn_st{
	background: url("../images/page/btn_st_wh.jpg") no-repeat center top;
	background-size: contain;
}

ul#musicBtnList li#btn_st.active{
	background: url("../images/page/btn_st_bla.jpg") no-repeat center top;
	background-size: contain;
}


div.musicFlame{
	width:99%;
	background: url("../images/page/musicFlame_mdl.jpg") repeat-y center top;
	background-size: 100%;
	margin:0 auto;
	padding:40px 0 0;
}

div.musicArea img.flame_top{
	position:absolute;
	left:0.5%;
	top:8px;
}

div.musicArea img.flame_btm{
	position:absolute;
	left:0.5%;
	bottom:8px;
}

@-webkit-keyframes music {
from { opacity: 0; }
to   { opacity: 1; }
}

@keyframes music {
from { opacity: 0; }
to   { opacity: 1; }
}

div.musicItem{
	width:88%;
	margin:0 auto;
	-webkit-animation: music 1.5s ease-out;
	animation-duration: music 1.5s ease-out;
}

div.musicItem#opPriv,
div.musicItem#stInd{
	border-bottom:solid 1px #000;
	margin:-1em auto 1.5em;
	display:none;
}

div.musicItem#opPriv .privBox{
	width:14%;
	margin:1em 0.8% 1em 0.8%;
	display:inline-block;
	vertical-align: top;
}

div.musicItem#stInd .indBox{
	width:46%;
	margin:1.2em 0.5% 2em 1%;
	display:inline-block;
	vertical-align: top;
	position:relative;
}

div.musicItem#stInd div.indBox:nth-child(2){
	border-right:solid 1px #000;
}

div.musicItem#stInd .indBox p{
	text-align: left;
	font-weight:bold;
	margin-bottom:0.5em;
}

div.musicItem#stInd .indBox ul{
	position:relative;
}

div.musicItem#stInd .indBox ul li{
	font-size:0.8em;
	line-height:1.5em;
	display:inline-block;
	width:45%;
	text-align: left;
	vertical-align: top;
	font-weight:bold;
}

div.musicItem#stInd .indBox ul li span{
	font-size:0.9em;
}

div.musicItem#opPriv .privBox h6{
	text-indent: 0;
	position:relative;
	padding:0.2em 0 0.1em;
	margin-bottom:0.8em;
	background:#000;
	color:#FFF;
	font-size:0.8em;
	font-weight:bold;
	text-align: center;
}

div.musicItem#opPriv .privBox:nth-child(6) h6{
	font-size:0.7em;
	padding:0.2em 0 0.2em;
	line-height:12px;
}

div.musicItem#opPriv .privBox img{
	width:100%;
}

div.musicItem#opPriv .privBox p{
	font-weight:bold;
	font-size:0.9em;
	line-height:1.2em;
	margin-bottom:0.5em;
}

div.musicItem#opPriv .privBox p.priv2{
	 font-size:0.8em;
	font-weight:normal;
}

div.musicItem#opPriv .privBox p span{
	display:block;
	letter-spacing: -0.1em;
}

div.musicItem#opPriv #btn_op_back,
div.musicItem#stInd #btn_st_back{
	width:24%;
	margin:0 auto 1.5em;
	transition:0.2s;
}

div.musicItem #btn_op_priv{
	width:50%;
	margin:-3em 0 1em 25%;
	transition:0.5s;
}

#btn_op_priv:hover,
#btn_op_back:hover,
#btn_st_ind:hover,
#btn_st_back:hover{
	opacity:0.5;
	cursor:pointer;
}

div.musicItem#ending{
	display:none;
}

div.musicArea.active #opening{
	display:none;
}

div.musicArea.active #ending{
	display:block;
}

div.musicArea #soundtrack{
	display:none;
}

div.musicItem div.musicText{
	width:52%;
	text-align: left;
	display:inline-block;
}

div.musicItem .musicImage{
	width:45%;
	display:inline-block;
	vertical-align: top;
	margin-left:2%;
}

div.musicItem .musicImage span{
	width:47%;
	display:inline-block;
	margin:0em 1.2%;
	text-align: center;
	font-size:0.8em;
	font-weight:bold;
}

div.musicItem .musicImage span.only{
	width:60%;
	margin-bottom: 35px;
}

div.musicItem .musicImage span img{
	width:100%;
	margin:0;
}



div.musicItem h4,
div.musicItem h5{
	text-indent:0;
	position:relative;
}

div.musicItem h4{
	font-weight:bold;
	letter-spacing:0.1em;
	font-size:1.5em;
	line-height:1.6em;
	margin:0.5em 0 1em;
}

div.musicItem h4 span{
	font-size:0.9em;
	letter-spacing:0em;
}


div.musicItem h5{
	font-weight:bold;
	font-size:1em;
}

div.musicItem h5 img{
	width:100%;
}

div.musicItem p.comp{
	font-weight:bold;
	font-size:1.1em;
	line-height:1.3em;
	margin:-0.5em 0 1.2em;
}

div.musicItem p.det{
	font-weight:bold;
	font-size:1.1em;
	line-height:1.3em;
	margin:0 0 1.5em;
}

div.musicItem p span{
	font-size:0.8em;
}

div.musicItem p.musicCap{
	font-size:0.9em;
	line-height:1.5em;
	margin:0 0 1em;
	min-height:8em;
}

div.musicLabel{
	width:72%;
	margin:0 auto;
	text-align: left;
	font-weight:bold;
	padding:15px 0.5em 0;
	vertical-align: middle;
	position:relative;
}

div.musicLabel div.musicBnr{
	width:auto;
	position:absolute;
	right:0;
	top:0;
}

div.musicLabel div.musicBnr img{
	vertical-align: middle;
	margin-left:10px;
	display:inline-block;
}

img.musicYokoku{
	width:106%;
	position:absolute;
	left:-3%;
	bottom:-40px;
}

@media screen and (min-height: 1000px) {
	div.musicArea{
	-webkit-transform-origin:center top;
	-moz-transform-origin:center top;
	-ms-transform-origin:center top;
	transform-origin:center top;
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
	margin:3% auto 2%;
	}
	
	section#music .Title{
	margin:0 auto 5%;
}
}

/*

ONAIR

*/
section#onair{
	width:100%;
	height:auto!important;
	background:#D2B74E;
	position: relative;
	padding-bottom:10px;
}

div.onairAreaWrap{
	padding:100px 0 0;
	margin:0 0 50px;
}

div.onairArea{
	width:1100px;
	/*height:570px;*/
	height:auto!important;
	margin:0 auto 0;
	text-align: center;
	background:#DBD3B1 url("../images/page/onair_bg2.png")repeat-y left;
	background-size:100%;
	position:relative;
	border:solid 1px #000;
}

div.onair_bgTop{
	width:1100px;
	height:143px;
	background: url("../images/page/onair_bg1.png")no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	top:-1px;
}

div.onair_bgBottom{
	width:1100px;
	height:143px;
	background:url("../images/page/onair_bg1.png")no-repeat;
	background-size:100%;
	position:absolute;
	left:0;
	bottom:0;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

section#onair div.onairArea .Title{
	position:absolute;
	left:50%;
	top:10px;
	margin-left:-135px;
}
section#onair div.onairArea .subTitle{
	width:52%;
	margin:120px auto 20px;
	animation-duration: 1s;
}
section#onair div.onairArea .onair_txt{
	margin:0 auto 20px;
	animation-duration: 1s;
	/*animation-delay: 0.5s;*/
}

section#onair div.onairArea dl.tv {
	width:500px;
	text-align:center;
	margin:0 auto 50px;
}

section#onair div.onairArea dl.tv dt{
	width:12em;
	background:#000;
	margin:0 1em 1em 0;
	padding:3px 2px 1px;
	border-radius:5px;
	color:#FFF;
	font-weight:bold;
	font-size:1em;
	display:inline-block;
}
section#onair div.onairArea dl.stream {
	width:600px;
	text-align:center;
	margin:0 auto 30px;
}

section#onair div.onairArea dl.stream dt{
	width:16em;
	background:#005842;
	margin:0 1em 1em 0;
	padding:3px 2px 1px;
	border-radius:5px;
	color:#FFF;
	font-weight:bold;
	font-size:0.9em;
	display:inline-block;
}

section#onair div.onairArea dl dt span{
	font-size:0.8em;
}

section#onair div.onairArea dl dd{
	font-size:1em;
	margin:0 auto 1.2em;
	display:inline-block;
	vertical-align: baseline;
}
section#onair div.onairArea dl.stream a{
	transition: 0.5s;	
}
section#onair div.onairArea dl.stream a > dd{
	color:#000;
}

section#onair div.streamcaution{
	margin:0 auto 100px;
	text-align: center;
}

section#onair div.streamcaution p{
	color:#005842;
	font-size:0.8em;
	margin-bottom:0.8em;
}

#btnpagetop{
	position: fixed;
	width:50px;
	height:50px;
	bottom: 20px;
	right: 20px;
	z-index: 50;
	opacity: 0.9;
}

/*

footer

*/

#footer{
	background:#FFFFFF;
	width:100%;
	height:20px;
	padding:10px 0 0;
	position:absolute;
	left:0;
	bottom:0;
	z-index:10;
}

#copyright{
	background:url("../images/copyright.png") no-repeat center;
	background-size:contain;
	width:200px;
	height:10px;
	margin:0 auto;
}