/**************** PC ****************/

/* PC用 */

/**************** PC ****************/

@media only screen and (min-width:751px){

body {
	}
	
/*-----------WRAP-BLOCK-------------*/
	
	#header {
		width:100%;
		height:1050px;
	}
	#headwrap {
		width:1100px;
		margin: 0 auto;
	}
	
	#main {
		width:100%;
		margin: 0 auto;
	}

	

/*-----------#header-------------*/
	
	#header {
		background: url(../img/index/mainimage.png) center 95px no-repeat;
		position: relative;	}
	#headwrap {
		position: relative;
	}
	#headwrap h1 {
		text-align: right;
		margin-top: 0px;
	}
	#headwrap p {
		position: absolute;
		width: 100%;
	}
	#headwrap p#read01 { left:38px; top:455px; }
	#headwrap p#read02 { left:38px; top:635px; }
	#headwrap p#schedule { text-align: center; top:800px; left: 50%; transform: translateX(-50%);}

	#header .btm {
		position: absolute;
		bottom: 0;
		width:100%;
		height:5em;
		background:url(../img/common/topbg2.png) center bottom repeat-x;
	}

/*----------- MAIN NAVI-------------*/

	#topnavi {
		width:100%;
		height:105px;
		background:url(../img/common/menu_bg.png) center top repeat-x;
	}
	#topnavi ul {
		width:1100px;
		margin: 0 auto;
		display:flex ;
		
		font-size: 150%;
		font-weight: bold;
	}
	
	#topnavi ul li {
		height:95px;
		line-height:1.4;
		margin: 0;
	}

	#topnavi ul li a {
		height:95px;
		color: #000;
		text-decoration: none;
		display: block;
		text-align: center;
		vertical-align: middle;

	}
	
	#topnavi ul li#navi01 a { width:128px; padding-right: 15px; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi02 a { width:184px; padding-right: 15px; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi03 a { width:161px; padding-right: 15px; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi04 a { width:176px; padding-right: 15px; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi05 a { width:236px; padding-right: 15px; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi06 a { width:139px;}


	.fixed {
		  position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  z-index: 10;
	}
	
/*----------- SNS AREA-------------*/

#sns {
		width:1000px;
		margin: 0 auto;
		padding: 1em 0;

	}
	
/*----------- MAIN AREA-------------*/
	#main {
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}

	.pinkarea {
		/*background:url(../img/common/topbg.png) center top repeat-x;*/
		padding-top: 5em;
	}
	.pinkarea .btm {
		width:100%;
		height:5em;
		background:url(../img/common/topbg_btm.png) center bottom repeat-x;
	}
	.pinkarea .btm.pink02 {
		width:100%;
		height:5em;
		background:url(../img/common/topbg_btm2.png) center bottom repeat-x;
	}
	
	#introduction,
	#chart {
		width:100%;
		background:url(../img/bg_pinklace.png) center top repeat;
	}
	
	.skyarea {
		background:url(../img/common/bg_sky01.jpg) center top no-repeat;
		background-size:cover;
		padding-top: 2em;
	}
	.skyarea.sky02 {
		background:url(../img/common/bg_sky02.jpg) center top no-repeat;
		background-size:auto;
	}
	.skyarea .btm {
		width:100%;
		height:5em;
		background:url(../img/common/topbg2.png) center bottom repeat-x;
	}
	
	.skyarea.sky02 .btm3 {
		height:5em;
		width:100%;
		background:url(../img/common/topbg_btm3.png) center bottom repeat-x;
	}
	
	#main .pinkarea section {
		width:1100px;
		margin: 0 auto ;
		padding-top: 3em;
	}
	
	#main .skyarea section {
		width:1100px;
		margin: 0 auto ;
		padding-bottom:2em;
	}
	
	#main section h1 {
	text-align: center;
	margin: 0 auto 3em auto;
	}
	
	#main section p {
		color: #fff;
		padding:0.5em 5em 2em 5em ;
	}
	
	

/*----------- introduction AREA-------------*/
	#main #introduction h2 {
		text-align: center;
		color: #fff;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;

	}
	
	#main #introduction h4 {
		color: #33b5ff;
	}
	#main #introduction p {
		margin-bottom: ;
	}
	
	#introduction section {
		background-color:#ff3399 ;
		padding-bottom: 1em;
	}

/*----------- NEXT AREA-------------*/

	#nextOAarea h1 {
	}
	#nextOAarea h2 {
		font-size:3em;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}
	#nextOAarea h3 {
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1;
	}
	#pubOA {
		margin-bottom: 0;
	}
	
	#pubSubtitle {
		margin-bottom: 0.5em;
	}
	.photo {
		width:100%;
		display: flex;
		align-items: flex-start;
		margin-bottom: 1em;
	}
	.photo img {
		width:50%;
	}
	
	.oaarea {
		padding: 0.5em 0 0 0;
		background-color:#2089f2;
	}

/*----------- Story AREA-------------*/

		.mb60{
			margin-bottom: 60px;
		}	
		.swiper-container{
			text-align: center;
		}
		.swiper-container .swiper-slide img{
			max-width: 100%;
			width: 100%;
			height: auto;
		}
		.prettyprint{
			border: none;
			background: #fafafa;
			color: #697d86;
		}
		#thumbs {
	        height: 20%;
	        box-sizing: border-box;
	        padding: 10px 0;
			color: #fff;
			text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;
	    }
	    #thumbs .swiper-slide {
	        width: 20%;
	        height: 100%;
	        opacity: 0.6;
	        cursor: pointer;
	    }
	    #thumbs .swiper-slide-active {
	        opacity: 1;
	    }
		
		#slider .storyphoto {
			display: flex;
			margin-bottom: 1.5em;
			align-items: flex-start;
		}
	#slider .storyphoto img {
		width:50%;
	}
	
	#slider h4 {
		font-size:228%;
		margin-bottom: 0.5em;
	}
	#slider h5 {
		color: #fff;
		font-weight: bold;
		font-size:138%;
	}
	#slider p {
		text-align: left;
		margin-bottom: 1.5em;
	}
	
	#thumbs .swiper-slide {
		position: relative;
	}
	#thumbs .swiper-slide span {
		display: block;
		text-align: center;
		position: absolute;
		left: 35%;
		top: 38%;
		font-size: 180%;
		font-weight: bold;
	}




	
	
/*----------- chart AREA-------------*/
	#chart section {
		background-color:#ff8ac5 ;
	}
	#chart p img {
		width:100%;
	}
	
	
/*----------- cast staff AREA-------------*/	
	.castarea {
		background-color:rgba(255,255,255,0.80);
		width:1000px;
		margin: 0 auto 1em;
		display: flex;
		justify-content:space-between;
		align-items: flex-start;
	}
	.castarea img {
		width:302px;
		height: auto;
	}
	
	.castarea dl {
		width:658px;
		padding: 20px 20px 0 25px;
	}
	.castarea dt {
		margin-bottom: 1.5em;
	}
	
	
	.castarea h2 {
		color: #228aed;
		font-weight: bold;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}.castarea h2 span { font-size: 70%;}
	.castarea h3 {
		color: #228aed;
		font-size: 130%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}
	.castarea h4 {
		font-size: 110%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}

	
	.staffarea {
		background-color:rgba(255,255,255,0.80);
		width:1000px;
		margin: 0 auto 1em;
		display: block;
	}
	
	.staffarea dl {
		width:100%;
		padding: 20px 0 ;
		text-align: center;
	}
	.staffarea dl dt {
		color: #228aed;
		font-weight: bold;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}
	

/* バナー */
	#kdrbnr {
		text-align: center;
		padding-top: 3em;
	}


}



/**************** MOBILE ****************/

/* モニター幅750px以下 */

/**************** MOBILE ****************/

@media only screen and (max-width:750px){

/*-----------WRAP-BLOCK-------------*/
	
	#header {
		width:100%;
		height:auto;
	}
	#headwrap {
		width:100%;
		margin: 0 auto;
		height:1200px;
	}
	
	#main {
		width:100%;
		margin: 0 auto;
	}

	

/*-----------#header-------------*/
	
	#header {
		background: url(../img/index/mainimage_smp.jpg) center top no-repeat;
		position: relative;
		background-size:contain;
	}
	#headwrap {
		vertical-align: bottom;
	}
	#headwrap h1 {
		text-align: right;
	}#headwrap h1 img { width:65%;}
	#headwrap p {
		position: absolute;
		width: 100%;
	}
	#headwrap p img {
		
	}
	#headwrap p#read01 { text-align: left; bottom:580px; } #headwrap p#read01 img {width:75%;}
	#headwrap p#read02 { text-align: right; bottom:480px;  } #headwrap p#read02 img {width:90%;}
	#headwrap p#schedule { text-align: center; position: absolute; bottom:350px; }#headwrap p#schedule img {width:90%;}

	#header .btm {
		position: absolute;
		bottom: 0;
		width:100%;
		height:5em;
		background:url(../img/common/topbg2.png) center bottom repeat-x;
	}

/*----------- MAIN NAVI-------------*/

	#topnavi {
		width:95%;
		height:auto;
		/*background:url(../img/common/menu_bg.png) center top repeat-x;*/
		background-color: #fff;
		position: absolute;
		bottom:1.5em;
		left: 50%; transform: translateX(-50%);
		border-radius: 10px 10px 10px 10px;
	}
	#topnavi ul {
		width:100%;
		margin: 0 auto;
		display:flex ;
		flex-wrap: wrap;
		font-size: 150%;
		font-weight: bold;
	}
	
	#topnavi ul li {
		width:50%;
		height:95px;
		line-height:1.4;
		margin: 0;
	}

	#topnavi ul li a {
		height:95px;
		color: #000;
		text-decoration: none;
		display: block;
		text-align: center;
		vertical-align: middle;

	}
	
	#topnavi ul li#navi01 a { width:100%; padding-right: 0; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi02 a { width:100%; padding-right: 0; }
	#topnavi ul li#navi03 a { width:100%; padding-right: 0; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi04 a { width:100%; padding-right: 0;}
	#topnavi ul li#navi05 a { width:100%; padding-right: 0; background:url(../img/common/point.png) right center no-repeat;}
	#topnavi ul li#navi06 a { width:100%;}



	
/*----------- SNS AREA-------------*/


	
/*----------- MAIN AREA-------------*/
	#main {
		font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}
	#main h1 img {
	width:80%;
	}

	.pinkarea {
		/*background:url(../img/common/topbg.png) center top repeat-x;*/
		padding-top: 5em;
	}
	.pinkarea .btm {
		width:100%;
		height:5em;
		background:url(../img/common/topbg_btm.png) center bottom repeat-x;
	}
	.pinkarea .btm.pink02 {
		width:100%;
		height:5em;
		background:url(../img/common/topbg_btm2.png) center bottom repeat-x;
	}
	
	#introduction,
	#chart {
		width:100%;
		background:url(../img/bg_pinklace.png) center top repeat;
	}
	
	.skyarea {
		background:url(../img/common/bg_sky01.jpg) center top no-repeat;
		background-size:cover;
		padding-top: 2em;
	}
	.skyarea.sky02 {
		background:url(../img/common/bg_sky02.jpg) center top no-repeat;
		background-size:cover;
	}
	.skyarea .btm {
		width:100%;
		height:5em;
		background:url(../img/common/topbg2.png) center bottom repeat-x;
	}
	
	.skyarea.sky02 .btm3 {
		height:5em;
		width:100%;
		background:url(../img/common/topbg_btm3.png) center bottom repeat-x;
	}
	
	#main .pinkarea section {
		width:100%;
		margin: 0 auto ;
		padding-top: 3em;
	}
	
	#main .skyarea section {
		width:100%;
		margin: 0 auto ;
		padding-bottom:2em;
	}
	
	#main section h1 {
	text-align: center;
	margin: 0 auto 3em auto;
	}
	
	#main section p {
		color: #fff;
		padding:0.5em 2em 2em 2em;
	}
	
	

/*----------- introduction AREA-------------*/
#main #introduction h2 {
		text-align: center;
		color: #fff;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;

	}
	
	#main #introduction h4 {
		color: #33b5ff;
	}
	#main #introduction p {
		margin-bottom: ;
	}
	
	#introduction section {
		background-color:#ff3399 ;
	}

/*----------- NEXT AREA-------------*/

	#nextOAarea h1 {
	}
	#nextOAarea h2 {
		font-size:3em;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}
	#nextOAarea h3 {
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1;
	}
	#pubOA {
		margin-bottom: 0;
	}
	
	#pubSubtitle {
		margin-bottom: 0.5em;
	}
	.photo {
		width:100%;
		display: flex;
		align-items: flex-start;
		margin-bottom: 1em;
	}
	.photo img {
		width:50%;
	}
	
	.oaarea {
		padding: 0.5em 0 0 0;
		background-color:#2089f2;
	}

/*----------- Story AREA-------------*/

		.mb60{
			margin-bottom: 60px;
		}	
		.swiper-container{
			text-align: center;
		}
		.swiper-container .swiper-slide img{
			max-width: 100%;
			width: 100%;
			height: auto;
		}
		.prettyprint{
			border: none;
			background: #fafafa;
			color: #697d86;
		}
		#thumbs {
	        height: 20%;
	        box-sizing: border-box;
	        padding: 10px 0;
			color: #fff;
			text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;
	    }
	    #thumbs .swiper-slide {
	        width: 20%;
	        height: 100%;
	        opacity: 0.6;
	        cursor: pointer;
	    }
	    #thumbs .swiper-slide-active {
	        opacity: 1;
	    }
		
		#slider .storyphoto {
			display: flex;
			margin-bottom: 1.5em;
			align-items: flex-start;
		}
	#slider .storyphoto img {
		width:50%;
	}
	
	#slider h4 {
		font-size:228%;
		margin-bottom: 0.5em;
	}
	#slider h5 {
		color: #fff;
		font-weight: bold;
		font-size:138%;
	}
	#slider p {
		text-align: left;
		margin-bottom: 1.5em;
	}
	
	#thumbs .swiper-slide {
		position: relative;
	}
	#thumbs .swiper-slide span {
		display: block;
		text-align: center;
		position: absolute;
		left: 35%;
		top: 38%;
		font-size: 180%;
		font-weight: bold;
	}




	
	
/*----------- chart AREA-------------*/
	#chart section {
		background-color:#ff8ac5 ;
	}
	#chart p img {
		width:100%;
	}
	
	
/*----------- cast staff AREA-------------*/	
	.castarea {
		background-color:rgba(255,255,255,0.80);
		width:100%;
		margin: 0 auto 1em;
		display:block;
		justify-content:space-between;
	}
	.castarea img {
		width:100%;
	}
	
	.castarea dl {
		width:100%;
		padding: 20px 0 2em 0;
	}
	.castarea dt {
		margin-bottom: 1.5em;
	}
	.castarea dt,
	.castarea dd {
		width:90%;
		margin: 0 auto;
	}
	
	
	.castarea h2 {
		color: #228aed;
		font-weight: bold;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}.castarea h2 span { font-size: 70%;}
	.castarea h3 {
		color: #228aed;
		font-size: 130%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}
	.castarea h4 {
		font-size: 110%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}
	
		.staffarea {
		background-color:rgba(255,255,255,0.80);
		width:100%;
		margin: 0 auto 1em;
		display: block;
	}
	
	.staffarea dl {
		width:100%;
		padding: 20px 0 ;
		text-align: center;
	}
	.staffarea dl dt {
		color: #228aed;
		font-weight: bold;
		font-size: 184%;
		font-family: 'M PLUS 1p', sans-serif;
		font-weight:bold;
	}
	
/* バナー */
	#kdrbnr {
		text-align: center;
		padding-top: 1em;
	}
	#kdrbnr img {
		width:98%;
	}
}