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

/* PC用 */

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

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

	#wrap {
		background-image: url(../img/topmainimageback.jpg);
		background-position: center top;
		background-repeat: no-repeat;
	}
	#header {
		width:100%;
		height:697px;
		background-image:url(../img/topmainimage.jpg);
		background-position: center top;
		background-repeat:no-repeat;
		position: relative;
	}
	#header #headmain {
		width:1000px;
		margin: auto;
		position: relative;
	}


	#header #headmain h1 {
		margin: 0;
		padding: 0;
		position: absolute;
		top:45px;
		left:0;
	}
	#header #headmain #schedule {
		position: absolute;
		top:250px;
		left:40px;
	}
	#header #headmain #catch {
		position: absolute;
		top:220px;
		right:460px;
	}
	
	#header #headmain #sns {
		width:40%;
		position: absolute;
		top:70px;
		text-align: right;
		right:0;
	}
	#header #headmain #sns img {
		margin-left: 0.5em;
	}
	#header #headmain #sns img:hover {
		opacity: 0.4;
		
	}
	#header #headmain #start {
		position: absolute;
		top:580px;
		right:0;
	}
	#header #headmain #movie {
		position: absolute;
		top:480px;
		right:0;
	}
	#header #headmain a:hover #movie {
		opacity: 0.5;
	}
	
	#header #headmain #present {
		position: absolute;
		top:550px;
		left:50px;
	}
	
	#header #OST {
		position: absolute;
		top:525px;
		right:0;
		text-align: right;
	}
	#header #OST img {
		width:50%;
	}
	#OST2 {display: none;}
	#smpTOParea {display: none;}
	
/*-----------------------menu-------------------------*/
	
	
#menu {
	width:100%;
	background-color:rgba( 235, 73, 148, 1 );
	}
#menu ul {
	width:100%;	
	margin: 0 auto;
	display: flex;
	flex-flow: row;
	justify-content: center;
	list-style-type: none;
	font-family: 'rounded-mplus-1pb';
	font-size: 140%;/*160%*/
	overflow:hidden;
	height:50px;
	}
	#menu ul li {
	overflow:hidden;
	height:50px;
	margin:0;
		overflow: hidden;
		text-align: center;
	}
	#menu ul li a {
	display:inline-block;
		height:50px;
	color: #fff;	
	text-decoration: none;
	padding: 0.5em 1.2em 0 1.8em;/*0.3em 1.5em 0 1.7em;*/
	line-height:1.2;
	box-sizing:border-box;
  position: relative;
		background: url(../img/icon_fire.png) 0.7em center no-repeat;
	}
	#menu ul li a span { display: block;font-size: 50%;}
	
	#menu ul li a:hover {
  color: rgba( 235, 73, 148, 1 );
	line-height: 1.2;
		height:50px;
	background: url(../img/icon_fire2.png) 0.2em center no-repeat;
	transition: .3s all;
	background-color:rgba( 194, 21, 99, 0.5 );

	}
	
	
#menu ul li a  {
  box-sizing:border-box;
  position: relative;
}
#menu ul li a::before,
#menu ul li a::after {
   box-sizing:border-box;}
   
   /*　buttonG　*/
.buttonG {
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonG::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba( 235, 73, 148, 1 );
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonG::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color:rgba( 194, 21, 99, 0.5 );
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index:-1;
}
.buttonG:hover {
  color: rgba(147,162,0,1);
}
.buttonG:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
	


/*-----------------------news-------------------------*/
	
	#news {
		background-color: #f1368b;
	}
	#news h2 { text-align: center; margin-bottom: 2em;}
	#news dl {
		width:1000px;
		margin: 0 auto 1em auto;
		border-bottom: #fff 1px dashed;
		padding: 0 0 1em 0;
	}
	
	#news dl:after {content: "."; display: block; 	height: 0; 	clear: both; visibility: hidden;}
	
	#news dl dt {
		width:12%;
		margin: 0;
		background-color: #f7dce8;
		color: #f1368b;
		font-weight: bold;
		float: left;
		text-align: center;
		padding-top: 0.3em;
	}
	#news dl dd {
		width:85%;
		margin: 0;
		float: right;
		color:#fff;
		line-height: 1.25;
	}
	#news dl dd.newstitle {
		font-size: 130%;
		font-weight: bold;
		margin-bottom: 0.3em;
	}
	#news dl dd.newstitle span {
		display: inline-block;
		font-size:70%;
		background-color: #fff;
		color: #f1368b;
		font-weight: bold;
		padding: 0.2em 1em 0;
		line-height: 1.2;
	}
	#news dl dd a {
	color: #fff;
	text-decoration: underline;
	}
	#news dl dd a:hover {
	text-decoration: none;
	}

}



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

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

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

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

#wrap {
		background-image: url(../img/topmainimageback.jpg);
		background-position: center top;
		background-repeat: no-repeat;
	background-color: #e5d7dd ;
	}
	#header {
		width:100%;
		height:auto;
		background-image:none;
		position: relative;
	}
	/*#header #headmain {
		width:100%;
		margin: auto;
		position: relative;
	}*/
	#header #headmain {
		display:none;
	}


	#header #headmain h1 {
		margin: 0;
		padding: 0;
		position: absolute;
		top:90px;
		left:1em;
	}#header #headmain h1 img {width:80%;}
	
	#header #headmain #schedule {
		position: absolute;
		top:240px;
		left:1.5em;
	}#header #headmain img#schedule {width:50%;}
	
	#header #headmain #catch {
		position: absolute;
		top:300px;
		right:55%;
		left:45%;
	}

		
	#header #headmain #sns {
		width:40%;
		position: absolute;
		top:620px;
		right:10px;
		text-align: right;
	}
	#header #headmain #sns img {
		margin-right: 0.5em;
	}
	#header #headmain #sns img:hover {
		opacity: 0.4;
		
	}
	
	#header #headmain #start {
		position: absolute;
		top:610px;
		left: 1em;
	}
	#header #headmain img#start {width:70%;}
	
	#header #headmain #movie {
		position: absolute;
		top:480px;
		right: 0.5em;
	}
	
	#header #headmain img#movie {width:40%;}
	
	#header #headmain a:hover #movie {
		opacity: 0.5;
	}
	#header #headmain #present {
		position: absolute;
		top:600px;
		left:0.5em;
	}
	#header #headmain img#present {width:50%;}
	
/*-----------------------menu-------------------------*/
	
	
#menu {
	width:100%;
	background-color:rgba( 235, 73, 148, 1 );
	font-size: 80%;
	}
#menu ul {
	width:100%;	
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	font-family: 'rounded-mplus-1pb';
	font-size: 120%;
	overflow:hidden;
	height:80px;
	}
	#menu ul li {
	overflow:hidden;
	height:40px;
		width: 33%;
	margin:0;
		overflow: hidden;
		text-align: center;
	}
	#menu ul li a {
	display:inline-block;
		height:40px;
		width: 100%;
	color: #fff;	
	text-decoration: none;
	padding: 0.5em 0 0 0;
	line-height:1.2;
	box-sizing:border-box;
  position: relative;
		background: url(../img/icon_fire.png) 0.7em center no-repeat;
	}
	#menu ul li a span { display: block;font-size: 70%;}
	
	#menu ul li a:hover {
  color: rgba( 235, 73, 148, 1 );
	line-height: 1.2;
		height:40px;
	background: url(../img/icon_fire2.png) 0.2em center no-repeat;
	transition: .3s all;
	background-color:rgba( 194, 21, 99, 0.5 );

	}
	
	
#menu ul li a  {
  box-sizing:border-box;
  position: relative;
}
#menu ul li a::before,
#menu ul li a::after {
   box-sizing:border-box;}
   
   /*　buttonG　*/
.buttonG {
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
}
.buttonG::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba( 235, 73, 148, 1 );
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.buttonG::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color:rgba( 194, 21, 99, 0.5 );
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index:-1;
}
.buttonG:hover {
  color: rgba(147,162,0,1);
}
.buttonG:hover::after {
  transform: scale(1,1);
  opacity: 1;
}
	
#OST {display: none;}
#OST2 {
	display: block;
	width:100%;
	margin: 0;
	padding: 0;
	}
#OST2 img {
		width:100%;
	}
#smpTOParea img {
		width:100%;
	}

/*-----------------------news-------------------------*/
	
	#news {
		background-color: #f1368b;
		padding-bottom: 1em;
	}
	#news h2 { text-align: center; margin-bottom: 2em;}
	#news dl {
		width:94%;
		margin: 0 auto 0 auto;
		border-bottom: #fff 1px dashed;
		padding: 1em 0 1em 0;
	}
	
	#news dl:after {content: "."; display: block; 	height: 0; 	clear: both; visibility: hidden;}
	
	#news dl dt {
		width:auto;
		display: inline-block;
		margin: 0 0 0.5em;
		background-color: #f7dce8;
		color: #f1368b;
		font-weight: bold;
		float: none;
		text-align: center;
		padding: 0.3em 0.5em 0;
		word-break: break-all;
	}
	#news dl dd {
		width:100%;
		margin: 0;
		float: none;
		color:#fff;
		line-height: 1.25;
	}#news dl dd a { color: #fff;}
	#news dl dd.newstitle {
		font-size: 130%;
		font-weight: bold;
		margin-bottom: 0.3em;
	}
	#news dl dd.newstitle span {
		display: inline-block;
		font-size:70%;
		background-color: #fff;
		color: #f1368b;
		font-weight: bold;
		padding: 0.2em 1em 0;
		line-height: 1.2;
	}


	
	
}