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

/*==========pc-style==========*/
@media screen and (min-width: 751px) {
	/*==========intoro==========*/
	body{
		width:100%;
		min-width:1180px;
		height:auto;
		b
	}
	.wrap{
		position:relative;
		height:auto;
		margin:-22px 0 0 0;
		background:url(../images/top_bg.jpg) repeat #21332e;
		background-attachment:fixed;
	}
	.main_contents{
		padding:54px 0 100px 0;
	}
	.main_contents h2{
		width:894px;
		margin-left:23%;
	}	
	li.btn1{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story01.png) no-repeat ;
	}
	li.btn2{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story02.png) no-repeat ;
	}
	li.btn3{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story03.png) no-repeat ;
	}
	li.btn4{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story04.png) no-repeat ;
	}
	li.btn5{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story05.png) no-repeat ;
	}
	li.btn6{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story06.png) no-repeat ;
	}
	li.btn7{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story07.png) no-repeat ;
	}
	li.btn8{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story08.png) no-repeat ;
	}
	li.btn9{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story09.png) no-repeat ;
	}
	li.btn10{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story10.png) no-repeat ;
	}
	li.btn11{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story11.png) no-repeat ;
	}
	li.btn12{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/story12.png) no-repeat ;
	}
	li.btn-1-6{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt01.png) no-repeat ;
	}
	li.btn-7-12{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt02.png) no-repeat ;
	}
	li.btn-2nd{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt03.png) no-repeat ;
	}
	li.btn-3rd{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt04.png) no-repeat ;
	}
	li.btn-4th{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt05.png) no-repeat ;
	}
	li.btn1.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story01_active.png) no-repeat ;
	}
	li.btn2.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story02_active.png) no-repeat ;
	}
	li.btn3.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story03_active.png) no-repeat ;
	}
	li.btn4.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story04_active.png) no-repeat ;
	}
	li.btn5.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story05_active.png) no-repeat ;
	}
	li.btn6.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story06_active.png) no-repeat ;
	}
	li.btn7.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story07_active.png) no-repeat ;
	}
	li.btn8.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story08_active.png) no-repeat ;
	}
	li.btn9.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story09_active.png) no-repeat ;
	}
	li.btn10.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story10_active.png) no-repeat ;
	}
	li.btn11.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story11_active.png) no-repeat ;
	}
	li.btn12.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/story12_active.png) no-repeat ;
	}
	li.btn-1-6.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/201709/bt01.png) no-repeat ;
	}
	li.btn-7-12.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/201709/bt02.png) no-repeat ;
	}
	li.btn-2nd.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/201709/bt03.png) no-repeat ;
	}
	li.btn-3rd.active{
		display:inline-block;
		width:180px;
		height:60px;
		background:url(../images/story/201709/bt04.png) no-repeat ;
	}
	li.btn-4th.active{
		display:inline-block;
		width:180px;
		height:60px;
		cursor:pointer;
		background:url(../images/story/201709/bt05.png) no-repeat ;
	}
	.story_wrap{
		width:895px;
		height:auto;
		background:#fff;
	}
	.main_contents ul{
		width:895px;
		margin-left:23%;
		padding-top:20px;
	}
	.main_contents ul li{
		display:inline-block;
		padding:20px 10px 0 0;
	}
	.story_img{
		width:798px;
		height:450px;
		margin:auto;
		padding-top:50px;
	}
	.story_cast{
		width:742px;
		margin:20px 0 0 50px;
	}
	.tab1 .story_h{
		width:742px;
		padding:20px 0 30px 50px;
	}
	.tab2 .story_h{
		width:742px;
		padding:20px 0 30px 50px;
	}
	.tab3 .story_h{
		width:510px;
		padding:20px 0 30px 50px;
	}
	.tab4 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab5 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab6 .story_h{
		width:710px;
		padding:20px 0 30px 50px;
	}
	.tab7 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab8 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab9 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab10 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab11 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.tab12 .story_h{
		width:798px;
		padding:20px 0 30px 50px;
	}
	.story_wrap iframe{
		padding:0px 0 50px 50px;
	}
	.story_wrap{
		margin-left:23%;
	}
	.main_contents ul li p{
		opacity:0;
	}
}
@media screen and (max-width:750px) {
	/*==========index==========*/
	body{
		width:750px;
		height:auto;
		background:url(../images/sp/s_top_bg.jpg) repeat #21332e;
		background-attachment:fixed;
		background-size:cover;
	}
	.main_contents{
		position:relative;
		width:750px;
		padding-top:210px;
	}
	.main_contents h2{
		width:710px;
		margin:auto;
	}	
	li.btn1{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story01.jpg) no-repeat;
	}
	li.btn2{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story02.jpg) no-repeat;
	}
	li.btn3{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story03.jpg) no-repeat;
	}
	li.btn4{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story04.jpg) no-repeat;
	}
	li.btn5{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story05.jpg) no-repeat;
	}
	li.btn6{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story06.jpg) no-repeat;
	}
	li.btn7{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story07.jpg) no-repeat;
	}
	li.btn8{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story08.jpg) no-repeat;
	}
	li.btn9{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story09.jpg) no-repeat;
	}
	li.btn10{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story10.jpg) no-repeat;
	}
	li.btn11{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story11.jpg) no-repeat;
	}
	li.btn12{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/s_story12.jpg) no-repeat;
	}
	li.btn-1-6{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/201709/bt01.png) no-repeat;
	}
	li.btn-7-12{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/201709/bt02.png) no-repeat;
	}
	li.btn-2nd{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/201709/bt03.png) no-repeat;
	}
	li.btn-3rd{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/201709/bt04.png) no-repeat;
	}
	li.btn-4th{
		display:inline-block;
		width:218px;
		height:73px;
		cursor:pointer;
		background:url(../images/sp/201709/bt05.png) no-repeat;
	}
	li.btn1.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story01_active.jpg) no-repeat;
	}
	li.btn2.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story02_active.jpg) no-repeat;
	}
	li.btn3.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story03_active.jpg) no-repeat;
	}
	li.btn4.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story04_active.jpg) no-repeat;
	}
	li.btn5.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story05_active.jpg) no-repeat;
	}
	li.btn6.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story06_active.jpg) no-repeat;
	}
	li.btn7.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story07_active.jpg) no-repeat;
	}
	li.btn7.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story07_active.jpg) no-repeat;
	}
	li.btn8.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story08_active.jpg) no-repeat;
	}
	li.btn9.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story09_active.jpg) no-repeat;
	}
	li.btn10.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story10_active.jpg) no-repeat;
	}
	li.btn11.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story11_active.jpg) no-repeat;
	}
	li.btn12.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/s_story12_active.jpg) no-repeat;
	}
	li.btn-1-6.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/201709/bt01.png) no-repeat;
	}
	li.btn-7-12.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/201709/bt02.png) no-repeat;
	}
	li.btn-2nd.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/201709/bt03.png) no-repeat;
	}
	li.btn-4th.active{
		display:inline-block;
		width:218px;
		height:73px;
		background:url(../images/sp/201709/bt05.png) no-repeat;
	}
	.story_wrap{
		width:710px;
		height:auto;
		background:#fff;
	}
	.main_contents ul{
		width:710px;
		margin:auto;
		padding-top:20px;
	}
	.main_contents ul li{
		display:inline-block;
		padding:20px 10px 0 0;
	}
	.story_img{
		width:710px;
		height:450px;
		margin:auto;
	}
	.story_cast{
		width:568px;
		padding:0 0 0 30px;
	}
	.story_h{
		width:650px;
		padding:30px 0 30px 30px;
	}
	.story_wrap iframe{
		padding:0px 0 50px 30px;
	}
	.story_wrap{
		width:710px;
		margin:auto;
		margin-top:30px;
	}
	.main_contents ul li p{
		opacity:0;
	}

}