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

/* under page
--------------------------------------------------------- */

/* header
-------------------------------------------------*/
#container_under .headArea{
	padding-bottom: calc(10vw + 10px);  
  position: relative;
  overflow: hidden;
  background-image:url("../img/hdbg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 48vh;
	}
#container_under .headArea::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #FFF500;  /* 三角部分 */ 
  border-left: 100vw solid transparent;
	}
#container_under .headArea h1.exActiv_logo{
  width: 560px;
  margin: 0 auto 1em;
	}
#container_under .headArea .tvklogo{
	width: 80px;
  margin: 1em;
	}
#container_under .headArea .tvklogo:hover{
  opacity: 0.5;
	transition-duration: 0.5s;
	}
	
@media screen and (max-width:768px) {
  #container_under .headArea{min-height:32vh;}
  #container_under .headArea h1.exActiv_logo{max-width:90%; margin: 2em auto;}
}

/* two-tone color set
---------------------- */
#container_under .twotone {
  background: linear-gradient(10deg, #FFF 0%, #FFF 50%, #FFF500 50%, #FFF500 100%);
  display: flex;
  width: 100%;
  min-height: 640px;
	}
#container_under .twotoneRev {
  background: linear-gradient(-10deg, #FFF500 0%, #FFF500 50%, #FFF 50%, #FFF 100%);
  display: flex;
  width: 100%;
  min-height: 640px;
	}
#container_under .mainArea{
  display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: 2em auto;
	}
#container_under .contBox{
  width:1200px;
	max-width: 100%;
	margin: 2.5em auto 0;
	line-height: 1.8em;
	}
#container_under .movieBox{
  width:100%;
  margin: 1.5em 1em 100px;
  line-height: 2em;
  }
#container_under .youtubeWrap{
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	}
#container_under .youtubeBox{
  width: 45%;
  max-width: 100%;
  margin: 0 2em 2em 0;
	}
.movieLink{
  position:relative;
	width:100%;
  padding-top:56.25%;
	box-shadow: 0px 0px 10px #d3d3d3;
  border: solid 2px #FFF;
  border-radius: 4px;
	}
.movieLink a:hover{opacity: 0.5;}
.movieLink img{
  position:absolute;
	top:0;right:0;
  width:100% !important;
  height:100% !important;
	}
@media screen and (max-width:768px) {
  #container_under .mainArea{flex-direction:column;max-width: 100%;}
	#container_under .contBox{max-width:100%;}
	#container_under .movieBox{width:95%;margin: 1.5em auto;}
  #container_under .youtubeWrap{flex-direction: column;}
	#container_under .youtubeBox{width: 100%;}
}