/* -----------------------------------------------------------
   FONT
------------------------------------------------------------*/
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: noto-sans-cjk-jp, sans-serif;
	font-weight: 700;
	font-style: normal;
}
@font-face {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* -----------------------------------------------------------
   BASE
------------------------------------------------------------*/
.inner{width:100%;}
#contents main h3{
background:#ff4189;
color: #fff;
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 900;
text-align: center;
border-left:none;
margin-bottom:10px;
}

#contents main h3 span{color: #333; line-height: 0.5em}
  #contents main h3 .ch{background-color: #fdf562;padding:5px;}
#contents main .txt-s {font-size: 60%;color:#FFFFFF; }
#contents main p{font-family: noto-sans-cjk-jp, sans-serif;font-weight: 700;color: #0f172e;text-align: center;}
@media all and (min-width: 768px) {
  #main-box{padding-bottom: 10px; }
  #contents{padding: 2px 0 0; }
  #contents main{width: 90%;margin: 0 auto;}
  #contents h3{padding: 10px;line-height: 1.2;}
  #contents main h3 span{padding: 6px 10px 6px 0;    margin-right: 10px;}
  #contents main p{ font-size: 150%;line-height: 1.4;}
}

@media all and (max-width: 767px) {
  #contents{padding: 4px 0 0;}
  #contents main{width: 95%;padding: 10px 0;margin: 0 auto;}
  #contents h3{ font-size: 110%;padding: 10px;line-height: 1.2;margin-bottom: 10px;}
  #contents main h3 span{padding: 3px 6px 3px 2px; margin-right: 10px; }
  #contents main p{line-height: 1.4; padding: 0 10px;margin-bottom: 10px;}
}

/* -----------------------------------------------------------
   YOUTUBE-IMG
------------------------------------------------------------*/
.y-player{
	width: 100%;
	margin: 0 auto;
  background-color: #000;
  position: relative;
  line-height: 0;
}

.y-player p , .comingsoon p{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: #fdd953;
  color: #02366d !important;
}

@media all and (max-width: 767px) {
	.y-player{
		position: relative;
		padding-top: 56.25%;
		margin-bottom: 8px;
	}
	.y-player iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
}


/* -----------------------------------------------------------
   LIST
------------------------------------------------------------*/
#ch_list{ list-style: none; display: flex;}
#ch_list a{display: block;background-color: #ff4189;text-decoration: none;color: #fff;font-family: noto-sans-cjk-jp, sans-serif;font-weight: 900;}
#ch_list a:hover{ background-color: #fdd953; transition: 0.5s ;}
#ch_list li:nth-child(2n){ margin-right: 0;}
#ch_list .ch{background-color: #fdf562;color: #233054;}
#ch_list .txt{display: block;line-height: 1.4;text-align: left;}

@media all and (min-width: 768px) {
  #ch_list{margin-top: 20px; }
  #ch_list li {width: 50%;margin-right: .5%;font-size:85%;}
  #ch_list a{font-size: 130%;padding: 30px 10px;line-height: 1.2;}
  #ch_list .ch{font-size: 80%;padding: 4px 8px;margin-right: 10px;}
  #ch_list .txt{margin-top: 10px;font-weight: 400;font-size: 60%;height:50px;}
}
@media all and (max-width: 767px) {
  #ch_list{margin-top: 10px;flex-wrap: wrap;}
  #ch_list li{width: 100%;margin-bottom: 5px;}
  #ch_list a{font-size: 110%;padding: 10px;line-height: 1.2;}
  #ch_list .ch{font-size: 80%;padding: 3px 6px;margin-right: 10px;}
  #ch_list .txt{margin-top: 10px;font-weight: 400;font-size: 80%; }
}