body {
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#fff;
	width: 100%;
	height:100%;
	font-size:12px;
	line-height:1.5em;
	color:#000;
	margin: 0px;
}

h1,h2,h3,h4,h5,h6{
	text-indent:0;
	position:relative;
}

#wrap{
	width: 100%;
    height: 100%;
}

#content{
background-size: 100% auto;
width: 375px;
margin: 0 auto;
padding-top:5px;
}

.bg{
background: url("../images/bg.jpg") repeat-y;
}

/*

INTRO

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

section#intro{
	width:375px;
	height:743px;
	margin:40px 0 0;
	/*background: url("../images/page/sp_intro_bg.jpg") no-repeat center top;
	background-size:cover; 
	transform-origin:center left;
	backface-visibility:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-animation: bgint 5s ease-out;
	animation-duration: bgint 5s ease-out;*/
	overflow: hidden!important;
	position:relative;
}

section#intro p > span{
	display:none;
}

div#introBg{
	width:100vw;
	height:100%;
	background: url("../images/page/sp_intro_bg.jpg") no-repeat center -1px;
	background-size:cover; 
	transform-origin:center left;
	backface-visibility:hidden;
	-webkit-backface-visibility: hidden;
	-webkit-animation: bgint 5s ease-out;
	animation-duration: bgint 5s ease-out;
}

div.introArea{
	width:96%;
	margin:0 auto;
	padding:40px 0 0;
	text-align: center;
	overflow: hidden;
}

div.introArea img{
	width:100%;
	height:auto;
}

section#intro div.introArea h1{
	width:50%;
	margin:0 auto 15px;
}
section#intro div.introArea h2{
	width:100%;
	margin:0 auto 35px;
	animation-duration: 10s;
}
section#intro div.introArea p.txt01{
	width:72%;
	margin:0 8% 150px 22%;
	animation-duration: 3s;
}
section#intro div.introArea p.txt02{
	width:56%;
	margin:0 41% 0 3%;
	animation-duration: 3s;
}

/*

CHARACTER

*/
section#chara{
	width:100%;
	height:auto;
	margin:40px 0 0;
}

div.chartArea{
	width:100%;
	margin:0;
	padding:40px 0 30px;
	text-align: center;
}

section#chara img{
	width:100%;
	height:auto;
}

section#chara div.chartArea h1{
	width:45%;
	margin:0 auto 15px;
}

div.chart{
	width:342px;
	height:550px;
	margin:0 16px 0;
	text-align: center;
	background: url("../images/page/sp_chara_chart.png") no-repeat center top;
	background-size:100%;
	position:relative;
}

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

div.chart a#takuboku{
	width:128px;
	height:128px;
	top:192px;
	left:80px;
}
div.chart a#kyosuke{
	width:125px;
	height:128px;
	top:2px;
	left:140px;
}
div.chart a#kodo{
	width:100px;
	height:108px;
	top:55px;
	left:5px;
}
div.chart a#taro{
	width:100px;
	height:105px;
	top:130px;
	right:-2px;
}
div.chart a#isamu{
	width:95px;
	height:105px;
	top:355px;
	left:115px;
}
div.chart a#saku{
	width:95px;
	height:105px;
	top:400px;
	right:20px;
}
div.chart a#ryu{
	width:95px;
	height:105px;
	top:443px;
	left:25px;
}

div.chart a#bokusui{
	width:100px;
	height:107px;
	top:275px;
	right:2px;
}

div.characterArea{
	width:100%;
	margin:0;
	text-align: center;
}

div.characterArea dl{
	width:100%;
}

div.characterArea dl dt{
	position:relative;
}

div.characterArea dl dt span.btn_opn{
	display:block;
	width:35px;
	height:16px;
	background: url("../images/page/sp_btn_opn.png") no-repeat;
	background-size:contain;
	position:absolute;
	right:10px;
	top:16px;
}

div.characterArea dl dd{
	display:none;
}


@-webkit-keyframes chdet {
0% { opacity: 0; }
100%   { opacity: 1; }
}

@keyframes chdet {
0% { opacity: 0; }
100%   { opacity: 1; }
}
div.characterArea dl dd.pic{
	display:block;
	width:100%;
	height:300px;
	position:absolute;
	left:0;
	top:0;
	-webkit-animation: chdet 1s ease;
	animation-duration: chdet 1s ease;
}

div.characterArea dl dd.cap{
	display:block;
	width:70%;
	text-align: left;
	margin:0 0 0 20px;
	-webkit-animation: chdet 1s ease;
	animation-duration: chdet 1s ease;
	
}

#c01,#c02,#c03,#c04,
#c05,#c06,#c07,#c08{
	/*margin:0 auto 2px;*/
}



div.chara_det{
	width:100%;
	margin:0;
	padding:300px 0 20px;
	background:rgba(255,255,255,0.5);
	position:relative;
	display:none;
}

span.btn_cls{
	display:block;
	width:35px;
	height:35px;
	background: url("../images/btn_close.png") no-repeat;
	background-size:contain;
	position:absolute;
	right:10px;
	bottom:20px;
	-webkit-animation: chdet 1s ease;
	animation-duration: chdet 1s ease;
}

div.chara_det#chara01 .pic{
	background:url("../images/page/sp_chara01.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara02 .pic{
	background:url("../images/page/sp_chara02.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara03 .pic{
	background:url("../images/page/sp_chara03.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara04 .pic{
	background:url("../images/page/sp_chara04.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara05 .pic{
	background:url("../images/page/sp_chara05.png") no-repeat center 10px;
	background-size:90%;
	height:320px;
}
div.chara_det#chara06 .pic{
	background:url("../images/page/sp_chara06.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara07 .pic{
	background:url("../images/page/sp_chara07.png") no-repeat center 10px;
	background-size:90%;
}
div.chara_det#chara08 .pic{
	background:url("../images/page/sp_chara08.png") no-repeat center 10px;
	background-size:90%;
}

div.chara_det#chara05{
	padding-top:320px;
}
/*

STAFF & CAST

*/
section#staff{
	width:100%;
	margin:40px 0 0;
	padding-bottom:320px;
	background:url("../images/page/sp_staff_bg.jpg")no-repeat center bottom;
	background-size:100%; 
}

section#staff dl{
	display:none;
}

div.staffArea{
	width:80%;
	margin:0 auto;
	padding:40px 0 0;
	text-align: center;
	position:relative;
}

div.staffArea img{
	width:100%;
	height:auto;
}

section#staff div.staffArea h1{
	width:98%;
	margin:0 auto 30px;
}
section#staff div.staffArea h2{
	width:12%;
	margin:0 auto 30px;
}
section#staff div.staffArea .staff_txt{
	width:90%;
	margin:0 auto 30px;
}
section#staff div.staffArea .cast_txt{
	width:90%;
	margin:0 auto;
}

section#staff div.staffArea hr.das{
	border-top:dashed 1px #282425;
	height:1px;
	margin:0 auto 40px;
}

section#staff div.staffArea hr.sol{
	border-top:solid 1px #282425;
	height:1px;
	margin:0 auto 40px;
}

div.staffArea{
}

/*
STORY
*/
section#story{
	width:100%;
	height:auto;
	margin:40px 0 0;
}

div.storyArea{
	width:100%;
	margin:0;
	padding:40px 0 30px;
	text-align: center;
}

section#story div.storyArea h1{
	width:49%;
	margin:0 auto 15px;
}

section#story div.storyArea h1 img{
	width:100%;
}

ul#storyList{
	width:90%;
	margin:0 auto 1.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:30%;
	height:30px;
	margin:0 auto 0.8em;
	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:-5px;
}

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

div.storyBox{
	width:87%;
	margin:0 auto 2em;
	padding-top:70px;
	margin-top:-70px;
}

div.storyBox img.storyNum{
	width:45%;
	margin:0 auto 1.2em;
}

div.storyBox h4{
	font-size:1.6em;
	margin:0 auto 1em;
	text-align: center;
	font-weight:bold;
}


div.storyStill{
	text-align: center;
	margin:0 auto 1em;
}

div.storyStill img{
	width:100%;
	margin:0 auto 0.5em;
}

div.storyText{
	width:100%;
	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;
	letter-spacing:0.04em;
}

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

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

div.storyText p.guest{
	text-align: center;
}

div.storyText p.storyStaff{
	background:rgba(255,255,255,0.4);
	padding:1em;
	display:block;
	border-radius:3px;
}

div.storyText p.storyStaff span{
	display:inline-block;
	font-size:0.8em;
	margin-right:1em;
}

/*

MUSIC

*/
section#music{
	width:100%;
	height:auto;
	margin:40px 0 0;
	/*background:url("https://kimikoe.com/kitsutsuki/sp/images/page/sp_music_bg.jpg")no-repeat center bottom;
	background-size:100%; */
	background:#B7282D;
}

div.musicAreaWrap{
	width:100%;
	padding-bottom:30px;
	position:relative;
}

section#music div.musicAreaWrap h1{
	width:50%;
	padding-top:40px;
	margin:0 auto 20px;
}

div.musicArea{
	width:90%;
	background:#FFFAF2;
	margin:0 auto;
	padding:40px 0 20px;
	text-align: center;
	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.musicAreaWrap img{
	width:100%;
	height:auto;
}

img.mbg_top{
	position:absolute;
	left:0;
	top:0;
}

img.mbg_btm{
	position:absolute;
	left:0;
	bottom:0;
}

div.musicArea ul#musicBtnList{
	width:90%;
	position:absolute;
	left:5%;
	top:2em;
	text-align: left;
	z-index:10;
}

div.musicArea ul#musicBtnList li{
	width:47%;
	height:auto;
	margin:0 1% 0.2em;
	display:inline-block;
}

div.musicArea ul#musicBtnList li img{
	width:100%;
}

div.musicArea ul#musicBtnList a{
	padding:0.5em 0;
}

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

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


div.musicFlame{
	width:96%;
	background: url("../images/page/sp_musicFlame_mdl.jpg") repeat-y center top;
	background-size: 100%;
	margin:-10px auto 0;
	padding:65px 0 30px;
}

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

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

div.musicFlame hr{
	width:84%;
	margin:1em 8% 3em;
	height:1px;
	background-color:#231815;
	border:0;
}

div.musicItem{
	width:80%;
	margin:0 auto 3em;
}

div.musicItem#opening,
div.musicItem#ending,
div.musicItem#soundtrack{
	margin-top:-80px;
	padding-top:80px;
}

div.musicItem div.musicText{
	width:100%;
	text-align: left;
}

ul#slider{
	width:100%;
	text-align: center;
}

ul#slider li{
	font-size:0.9em;
	font-weight:bold;
	text-align: center;
}

ul#slider li img{
	width:74%;
	margin:0em 10%;
}

img.musicImage{
	width:68%!important;
	margin:0em 16% 1.5em;
}

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

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

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


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

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.comp{
	font-weight:bold;
	font-size:1.1em;
	line-height:1.3em;
	margin:0 0 1em;
}

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

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

div.musicLabel{
	width:60%;
	margin:0 auto 1em;
	text-align: center;
	font-size:bold;
	font-weight:bold;
	padding:0 0.5em;
	vertical-align: middle;
	position:relative;
}

div.musicBnr{
	width:80%;
	margin:0 auto;
	position:relative;
}

div.musicBnr img{
	width:40%;
	margin-left:10px;
	display:inline-block;
}

div.musicYokoku{
	width:110%;
	position:absolute;
	left:-5%;
	bottom:-40px;
}

div.musicYokoku img{
	width:100%;
}

div#opPriv,
div.musicItem#stInd{
	margin:2em auto 0;
	width:100%;
	display:none;
}

div.musicItem#stInd{
	padding-top:1.5em;
	padding-bottom:1em;
	/*border-bottom:dashed 1px #333;*/
	margin-bottom:2em;
}

div#opPriv h5,
div#stInd h5{
	width:100%;
}

div.privBox{
	border-bottom:dashed 1px #333;
	padding:1.5em 0 1.5em;
}

div.indBox{
	padding:1em 0;	
	text-align: left;
}

div.privBox img{
	width:40%;
	display:inline-block;
	margin-right:5%;
	vertical-align: top;
}

div.privBox .privInfo{
	width:50%;
	display:inline-block;
	text-align: left;
}

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

div.musicItem .privBox p{
	font-weight:bold;
	font-size:1.1em;
	line-height:1.3em;
	margin-bottom:1em;
}

div.musicItem .indBox p{
	font-weight:bold;
	font-size:1.2em;
	line-height:1.3em;
	margin-bottom:0.5em;
	margin-left:1em;
}

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

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

div.musicItem .indBox ul li{
	font-weight:bold;
	font-size:0.9em;
	line-height:1.2em;
	margin-bottom:0.5em;
	display:block;
	margin-left:2.5em;
	text-align: left;
}

div.musicItem .indBox ul li > span{
	font-size:0.8em;
}

div.musicItem #btn_op_back{
	width:52%;
	margin:2em 24% 0;
}

div.musicItem #btn_st_back{
	width:52%;
	margin:1em 24% 1em;
}

div.musicItem #btn_op_priv{
	width:52%;
	margin:1em 0 0 24%;
}

div.musicItem #btn_st_ind{
	width:52%;
	margin:1em auto 0em;
}
/*

ONAIR

*/
section#onair{
	width:100%;
	margin:40px 0 0;
	padding:30px 0 30px;
	background:#D2B74E;
}

div.onairArea{
	width:96%;
	margin:0 auto;
	padding:8px 0 48px;
	text-align: center;
	background: url("../images/page/sp_onair_bg2.jpg")repeat-y left 81px;
	background-size:100%;
	position:relative;
}

div.onairArea img{
	width:100%;
	height:auto;
}

div.onairArea img.onair_bgTop{
	position:absolute;
	left:0;
	top:0;
}

div.onairArea img.onair_bgBottom{
	position:absolute;
	left:0;
	bottom:0;
	transform: rotate(180deg);
}

section#onair div.onairArea h1{
	width:60%;
	margin:0 auto 2.5em;
}
section#onair div.onairArea h2{
	width:75%;
	margin:0 auto 0.8em;
	animation-duration: 1.5s;
}
section#onair div.onairArea .onair_txt{
	width:75%;
	margin:0 auto 0.8em;
	/*animation-duration: 3s;
	animation-delay: 0.8s;*/
	animation-duration: 1.5s;
}

section#onair div.onairArea dl.tv {
	text-align:center;
	margin:0 auto 2.5em;
}

section#onair div.onairArea dl.tv dt{
	width:23em;
	background:#000;
	margin:0 auto 0.5em;
	padding:3px 2px 1px;
	border-radius:5px;
	color:#FFF;
	font-weight:bold;
	font-size:0.9em;
}

section#onair div.onairArea dl.stream {
	text-align:center;
	margin:0 auto 2.5em;
}

section#onair div.onairArea dl.stream dt{
	width:23em;
	background:#005842;
	margin:0 auto 0.5em;
	padding:3px 2px 1px;
	border-radius:5px;
	color:#FFF;
	font-weight:bold;
	font-size:0.9em;
}
section#onair div.onairArea dl dt span{
	font-size:0.7em;
}

section#onair div.onairArea dl dd{
	font-size:1em;
	margin:0 auto 1.5em;
}

section#onair div.onairArea dl.stream a{
	text-decoration: none;
}

section#onair div.onairArea dl.stream a:hover{
	opacity: 0.7;
}

section#onair div.onairArea dl.stream a > dd{
	color:#000;
}

section#onair div.streamcaution{
	margin:0 auto 2.5em;
	text-align: left;
	width:75%;
}

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

/*

bnr

*/

#bnrSarea{
width: 100%;
text-align: center;
padding: 0 0 20px;
}

#bnrSarea img{ margin: 2px;}

/*GOODS*/
section#kttkgoods{
	width:100%;
	padding:40px 0;
	margin:40px 0 0;
	text-align: center;
}

div.goodsArea{
	width:85%;
	padding:0;
}

div.Title{
	width:55%;
	margin:0 auto 20px;
}

div.Title img{
	width:100%;
}

div.goodsArea dl#goodsList{
	margin:0 auto;
}

dl#goodsList div.goodsItem{
	width:100%;
	margin:0 auto 3em;
	text-align: left;
	position:relative;
	display:block;
	vertical-align: top;
}

#goodsList div.goodsItem dt{
	width:100%;
	margin:0 0 0.5em;
	position:relative;
}

#goodsList div.goodsItem dt img:first-child{
	width:100%;
}

#goodsList div.goodsItem dt .newicon{
	width:18%;
	position:absolute;
	right:0;
	bottom:0;
}

#goodsList div.goodsItem dd{
	font-size:0.7em;
	line-height:1.3em;
	color:#000;
	width:auto;
	display:inline-block;
}

#goodsList div.goodsItem dd span{
	font-size:0.8em;
}

#goodsList div.goodsItem dd a{
	color:#000;
}

#goodsList div.goodsItem dd a:hover{
	text-decoration: none;
}

#goodsList div.goodsItem dd.goodsName{
	display:none;
}


/*

sns

*/

#snsall{
width: 297px;
height:20px;
padding:20px 0;
margin: 0 auto;
}

#snsall #sns{
display:inline;
margin:0;
float:left;
}

#snsall #sns li{
height:20px;
display:inline;
float:left;
padding:0;
margin-right:5px;
}

#snsall #sns li.fbbtn{ width:137px;}
#snsall #sns li.twitterbtn{ width:75px;}
#snsall #sns li.linebtn{ width:70px;}

/**/