@charset "utf-8";
/* CSS Document */
/* season5決定バナーを掲載するために追記 */


.sample img {
  max-width: 100%;
  width: 200px;
}

/* 画面幅が800px以上のとき */
@media only screen and (min-width: 280px) {
  .sample img {
    width: 96%;
	  margin: 1rem auto;
	  max-width: 1023px;
  }
}

/* 画面幅が1200px以上のとき */
@media only screen and (min-width: 1024px) {
  .sample img {
	  max-width: 1200px;
    width: 90%;
	  margin: 1rem auto;
    border: solid 3px bold; /* 例：1200px以上でのみ線で囲む */
  }
}



.center{
	text-align: center;
	display: block;
	margin: 2rem auto;
}
.img_pc{
	display: block;
}
.img_s{
		display: none;
	width: 94%;
	margin:1rem auto;
	height: auto;
}
/* season5決定バナーを掲載するために追記 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html{
font-size: 62.5%;
}

img {
max-width: 100%;

}

a:hover img {
  opacity: 0.8;
}



/*body{
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
}*/

body{
font-family: 'Noto Sans JP', sans-serif; 
letter-spacing: 0.1rem;
font-weight: 500;
color: #FFFFFF;
}

  
 div#wrapper{
 /*max-width: 2000px;*/
 margin: 0 auto;
 text-align: center;
 }
 

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

/* season5決定バナーを掲載するために追記 */
.center{
	text-align: center;
	display: block;
	margin: 2rem auto;
}
.img_s{
	display: block;
	width: 90%;
	margin:2rem auto;
	height: auto;
}
.img_pc{
	display: none;
}
/* season5決定バナーを掲載するために追記 */	
	
	
.smp{
display: none;
}

body{
background: #064652 url("../img/bk_img.png") repeat-y center top;
}


 header#header h1{
 width: 100%;
 height: 887px;
 background: url(../img/top03_img.png) no-repeat center top;
 margin: 0 auto;
 margin-bottom: 5rem;
 font-size: 0px;
 }
 
 
 /*　番宣動画　*/
 
 div#movie{
    width: 97%;
    max-width: 1200px;
    margin: 0 auto;
	margin-bottom: 5rem;
 }

div#movie .tvo-video{
    height: calc(97vw * 0.5625);
	max-height: calc(1200px * 0.5625);
 }
 
 
 /*　coming soon　*/
 
 div#coming_soon{	
	width: 97%;
    max-width: 980px;
    margin: 0 auto;
	margin-bottom: 8rem;

 }

div#contets_wrap{
margin: 0 auto;
text-align: center;
max-width: 1200px;
padding: 0 1rem;
}

section#catch{
margin-bottom: 5rem;
}
 
 section#cast{
width: 100%;
/* (画像の高さ / 画像の横幅) × 100 */
padding-top: calc(524 / 1200 * 100% - 159px);
background: url("../img/cast.jpg") no-repeat center center;
background-size:contain;
font-size: 0;
 display: flex;
 justify-content: space-around;
 margin-bottom: 5rem;
 }
 
 section#cast div.name{
margin-bottom: 5px;
 }
 
 section#season4_top{
margin-bottom: 5rem;
}

 section#con_3{
margin-bottom: 5rem;
}
 
 section#midokoro_3{
margin-bottom: 5rem;
}
 
 section#next_season5{
margin-bottom: 5rem;
}

/*　これまでの放送　*/

section#tver p{
font-size: 1.8rem;
padding: 0.5rem;
margin-bottom: 5rem;
text-decoration: underline;
}

section#tver p a{
color: #FFFFFF;
}

section#koremade{
border: solid 4px #FFFFFF;
width: 100%;
margin-bottom: 5rem;
padding: 2rem;
}

section#koremade div.box{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 2.5rem;
}

section#koremade div.border{
border-bottom: dashed 1px #FFFFFF;
width: 90%;
margin: 0 auto;
}

section#koremade div.box span{
display: block;
flex-basis:40%;
margin:  2rem 0;
}


/*　これまでの放送ここまで　*/
 
 
section#season_bnr{
max-width: 1200px;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-bottom: 1rem;
 } 
 
 section#season_bnr div.bnr{
 flex-basis: 32%;
 /*padding: 1rem;*/
 }
 

 
section#youtube_kajipon{
 margin: 0 auto;
 margin-bottom: 5rem;
 } 
 


}

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

.pc{
display: none;
}

body{
background: #064652 url("../img/bk_img_smp.jpg") center top;
}
 
header#header h1{
width: 100%;
/* (画像の高さ / 画像の横幅) × 100 */
padding-top: calc(1220 / 750 * 100%);
background: url("../img/top02_img_smp.png") no-repeat center top;
background-size:contain;
font-size: 0;
 }
 
 
 /*　番宣動画　*/
 
 div#movie {
        width: 97%;
        margin: 0 auto;
		margin-top: 5rem;
	margin-bottom: 5rem;
    }
 
 div#movie .tvo-video{
    height: calc(97vw * 0.5625);
 }
 
  /*　coming soon　*/
 
 div#coming_soon{
    margin: 0 1rem;
	margin-bottom: 5rem;
 }
 

 
div#contets_wrap{
margin: 0 auto;
text-align: center;
padding: 0 1rem;
}

section#catch{
margin-bottom: 5rem;
}

 section#cast{
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
 margin-bottom: 4rem;
 }
 
 section#cast div.name{
margin-bottom: 1rem;
padding: 1rem;
flex-basis: 50%;
 }

section#season4_top{
margin-bottom: 5rem;
}

 section#con_3{
margin-bottom: 5rem;
}
 
 section#midokoro_3{
margin-bottom: 5rem;
}
 
 section#next_season5{
margin-bottom: 5rem;
}

/*　これまでの放送　*/

section#tver p{
font-size: 1.8rem;
padding: 0.5rem;
margin-bottom: 5rem;
text-decoration: underline;
}

section#tver p a{
color: #FFFFFF;
}

section#koremade{
border: solid 2px #FFFFFF;
width: 100%;
/*display: flex;*/
/*justify-content: space-around;
align-items: center;*/
margin-bottom: 5rem;
padding: 2rem;
}

section#koremade div.border{
border-bottom: dashed 1px #FFFFFF;
margin: 0 auto;
}

section#koremade div.box span{
display: block;
margin:  2rem 0;
}

/*　これまでの放送ここまで　*/

 
section#season_bnr{
display: flex;
flex-direction: column;
margin: 0 auto;
 } 
 
 section#season_bnr div.bnr{
 padding: 1rem;
 }
 
 
section#youtube_kajipon{
padding: 0 1rem;
 margin: 0 auto;
 margin-top: 1rem;
 margin-bottom: 5rem;
 } 
 
 
 }