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

/* Common settings
--------------------------------------------------------- */
*,*:before,*:after{box-sizing:border-box}
html,body {height:100%; margin:0 auto; border:0; font-size:100%;}
a {text-decoration:none;}
img {max-width:100%;image-rendering: -webkit-optimize-contrast;}

body{
	font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
	color: #112777;
	background-color: #FFF500;
	}

.contBox h2, .contBox h3, .contBox h4{
  font-weight: 700;
  }
#container .mainArea aside a {
  color: #112777;
	font-weight: 700;
  transition: all .4s;
  }
#container .mainArea aside a:hover{
  color: #EC008C;
}
/* header
-------------------------------------------------*/
#container .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 .headArea::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #FFF500;  /* 三角部分 */ 
  border-left: 100vw solid transparent;
	}
#container .headArea .h_cap{
	max-width: 100%;
	}
#container .headArea h1.exActiv_logo{
  width: 640px;
  margin: 0 auto 2em;
	}
#container .headArea .tvklogo{
	width: 80px;
  margin: 1em;
	}
#container .headArea .tvklogo:hover{
  opacity: 0.5;
	transition-duration: 0.5s;
	}
#container .headArea .caption{
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
	text-align: justify;
	color: #000;
	line-height: 2em;
	font-weight: bolder;
	}
@media screen and (max-width:768px) {
  #container .headArea{min-height:40vh;}
  #container .headArea h1.exActiv_logo{max-width:90%; margin: 2em auto;}
	#container .headArea .caption{max-width:85%; }
}	
/* Main
--------------------------------------------------------- */
/* two-tone color set
---------------------- */
#container .twotone {
  background: linear-gradient(10deg, #FFF 0%, #FFF 50%, #FFF500 50%, #FFF500 100%);
  display: flex;
  width: 100%;
  min-height: 640px;
	}
#container .twotoneRev {
  background: linear-gradient(-10deg, #FFF500 0%, #FFF500 50%, #FFF 50%, #FFF 100%);
  display: flex;
  width: 100%;
  min-height: 640px;
	}

#container .mainArea{
  display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: 2em auto;
	}
#container .mainArea article{
  width: 74%;
	}
#container .mainArea aside{
  width: 28%;
  }
.contBox{
  max-width: 100%;
	margin: 2.5em auto 0;
	line-height: 1.8em;
	}
.contBox h2 {
  position: relative;
  display: inline-block;
  left: -50px;	
	padding: 0 0 0 10px;
  font-size: 1.2em;
  text-align: right;
  border-bottom: solid 3px #112777;
  line-height: 1.8em;
  min-width: 240px;
	}
.contBox .variousBox{
  width: 85%;
  margin: 1.5em 1em;
	}
#container .twotoneRev .mainArea {
	width: 100%;
}
#container .twotoneRev .mainArea article{
	width: 100%;
}
/*--------------------------------------*/
.variousBox ul.spoNav{
  display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	}
.variousBox ul.spoNav li{
	width: 30%;
  border: solid 2px #112777;
	background-color: #FFF;
  border-radius: 5px;
  margin: 0.5em;
	padding: 0.5em;
	min-height:100px;
	text-align: center;
	font-size: 0.9em;
  }
.variousBox ul.spoNav li a{color: #112777;}
.variousBox ul.spoNav li:hover{
  opacity: 0.6;
	transition-duration: 0.5s;
	}
.variousBox ul.spoNav li a span {line-height: 1.2em;}
.variousBox ul.spoNav li a span::before {
	content: "";
	display: block;
	background-size: 100% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	margin: 0.5em auto;
	}
.variousBox ul.spoNav li#nav_rugby a span::before {display:block;background-image: url("../img/pict_rugby26.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_hockey a span::before {display:block;background-image: url("../img/pict_hockey.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_wait a span::before {display:block;background-image: url("../img/pict_waitlifting.png");width:66px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_shorinji a span::before {display:block;background-image:url("../img/pict_shorinji.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_sumo a span::before {display:block;background-image:url("../img/pict_sumo.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_fencing a span::before {display:block;background-image:url("../img/pict_fencing.png");width:100px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_cheer a span::before {display:block;background-image:url("../img/pict_cheer.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_soccer a span::before {display:block;background-image: url("../img/pict_soccer26.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
.variousBox ul.spoNav li#nav_volleyball a span::before {display:block;background-image: url("../img/pict_volleyball26.png");width:60px;height:60px;image-rendering: -webkit-optimize-contrast;}
/*--------------------------------------*/
.contBox.schedule ul{
  display: flex;
	flex-wrap: wrap;
  justify-content: flex-start;
	}
.contBox.schedule li{
  width: 30%;
	border-bottom: solid 1px #112777;
	margin: 1em 0.5em;
	font-size: 0.8em;
	min-height: 72px;
	}

@media screen and (max-width:768px) {
  #container .mainArea{flex-direction:column;}
	#container .mainArea article, #container .mainArea aside{width:100%;}
	.contBox .variousBox{
    max-width: 100%;
    margin: 1.5em auto;
		}
	.contBox h2 {left: 0;}
	
	.variousBox ul.spoNav{justify-content:center;}
	.variousBox ul.spoNav li{width: 45%;font-size: 0.7em}
	
	.contBox.schedule ul{justify-content:space-between;}
	.contBox.schedule li{width: 45%;}
}

/* label
-------------------------------------------------*/
ul.list [class^="c-"]{
  display: inline-block;
  min-width: 80px;
  margin-right: .5em;
  color: #FFF;
  font-size: 0.85em;
  text-align: center;
	}
.c-rugby, .c-hockey, .c-wait, .c-shorinji, .c-sumo, .c-fencing, .c-cheer, .c-soccer, .c-volleyball{
  margin-left: 0.5em;
  padding: 0.3em 0.5em;
	/*display: inline-block;*/
	/*width: 4.5em;*/
	line-height: 1.3em;
	min-height: 1.3em;
	text-align: center;
	font-size: 0.9em;
	border-radius: 4px;
	}
.label_dis{display: inline!important;}
.c-rugby{background:#FF0000;}
.c-hockey{background:#19C600;}
.c-wait{background:#EC008C;}
.c-shorinji{background:#102FA0;}
.c-sumo{background:#FF7900;}
.c-fencing{background:#00AEEF;}
.c-cheer{background:#9A27FF;}
.c-soccer{background:#333333;}
.c-volleyball{background:#f87000;}

/* banner
-------------------------------------------------*/
.bnrBox{
  width: 100%;
  margin: 2em 0 2em 1.5em;
  /*text-align: center;*/
  }
.bnrBox img{
  width: 300px;
  height: auto;
  margin: 0 1em 0.5em 0;
  cursor: pointer;
  transition-duration: 0.5s;
	border:1px #112777 solid;
  }
.bnrBox img:hover{
  opacity: 0.5;
  transition-duration: 0.5s;
  }
@media screen and (max-width:768px) {
  .bnrBox{max-width:100%;margin: 2em auto;text-align: center;}
  .bnrBox img{max-width: 100%;margin:0 auto;}
}

/* button
-------------------------------------------------*/
.btnBox {
  text-align: center;
  font-weight: 700;
	width: 100%;
  }
.spbtn,a.spbtn {
  position: relative;
  display: inline-block;
	width:calc(100% - 40%);
	font-size: 1em;
  line-height: 3.5;
  padding: 1rem 4rem;
	margin: 1em auto;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-decoration: none;
  color: #112777;
  background-color: #FFF;
	border:2px #112777 solid;
	border-radius: 0.5rem;	
	}
.spbtn:hover,a.spbtn:hover {
  color: #fff;
  background: #112777;
	}
@media screen and (max-width:767px){
  .btnBox{
    width: 85%;
    margin: 1em auto;
		}
	.spbtn,a.spbtn{
		width: 100%;
		padding: 5px 20px;
		margin: 5px auto;
	}
}

.variousBox ul.spoNav26{
  display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	}
.variousBox ul.spoNav26 li{
	width: 100%;
  border: solid 2px #112777;
	background-color: #FFF;
  border-radius: 5px;
  margin: 0.5em;
	padding: 0.5em;
	min-height:60px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.variousBox ul.spoNav26 li a:hover{
  opacity: 0.6;
	transition-duration: 0.5s;
}
@media screen and (max-width:767px){
	.variousBox ul.spoNav26 li{
		min-height: auto;
		padding: 0;
		margin: 0 auto 10px;
		min-height: 60px;
	}
	.contBox .variousBox{
		width: 90%;
		
	}
}



/* YouTube
-------------------------------------------------*/
.movieBox{
  width:85%;
  margin: 1.5em 1em 100px;
  line-height: 2em;
  }
.movieBox h3{
  width: 100%;
  text-align: center;
  margin: 1em 0 1.5em;
  font-size: 0.9em;
  background-size: 30%;
  padding: 0.1em 1em;
  color: #fff;
  border-radius: 100vh;
  }
#rugby.movieBox h3{background-color: #FF0000;}
#hockey.movieBox h3{background-color: #19C600;}
#wait.movieBox h3{background-color: #EC008C;}
#shorinji.movieBox h3{background-color: #102FA0;}
#sumo.movieBox h3{background-color: #FF7900;}
#fencing.movieBox h3{background-color: #00AEEF;}
#cheer.movieBox h3{background-color: #9A27FF;}
#soccer.movieBox h3{background-color: #333333;}
#volleyball.movieBox h3{background-color: #f87000;}

.movieBox h4{
  font-size: 1.5em;
	margin: 0.5em 0;
	line-height: 1.5em;
	}
.movieBox p{
  font-size: 1em;
  border-bottom: solid 2px #112777;
  line-height: 2.4em;
	margin-bottom: 1.5em;
	}
/* YouTube埋込 */
.youtube{
  position:relative;
  width:100%;
  padding-top:56.25%;
	box-shadow: 0px 0px 10px #d3d3d3;
  border: solid 2px #FFF;
  border-radius: 4px;
  }
.youtube iframe {
  position:absolute;
  top:0;right:0;
  width:100% !important;
  height:100% !important;
	border-radius: 4px;
}

.movieList{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.movieListBox{
	width: calc(100% / 2 - 15px);
	margin-right: 30px;
}
.movieListBox:nth-child(even) {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
	.movieListBox{
		width:100%;
		margin:1em auto;
		padding: 0 0 10px 0;
        border-bottom: 2px solid #112777;
	}
	.movieList{
		justify-content: center;
		flex-direction: column;
	}
}

.cs img{
  width: 100%;
  margin: 0 auto;
  }
@media screen and (max-width:767px){
  .movieBox{width:85%;line-height:1.8em;margin:1.5em auto 100px;}
	.movieBox h3{width: 70%;}
	.movieBox h4{font-size: 1.2em;}
  }
/* a-side
-------------------------------------------------*/
.contBox .themeBox{
  margin: 1.5em 1em;
	}
.contBox .themeBox P.t_ttl{
  font-weight: bolder;
	font-size: 1.2em;
	margin: 1em 0;
	border-bottom: solid 1px #112777;
	}
.contBox .themeBox P.t_artist{
  font-size: 1em;
  border-bottom: solid 1px #112777;
  margin-bottom: 0.8em;
	}
.contBox .themeBox P.t_cap{
  font-size: 0.8em;
	margin-bottom: 1em;
	text-align: justify;
	border-bottom: 2px solid;
	padding: 10px 0;
}
.contBox .themeBox a img:hover{
  opacity: 0.5;
  transition-duration: 0.5s;
  }
@media screen and (max-width:767px){
  .contBox .themeBox{
    width: 85%;
    margin: 2em auto;
		}
  }
/* pagetopLink
-------------------------------------------------*/
#page-top a{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00AEEF;
  border-radius: 50px;
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1em;
  transition: all 0.3s;
	}
#page-top a:hover{background: #112777;}
#page-top {
	position: fixed;
	right: 16px;
	bottom: 0;
	z-index: 3;
	opacity: 0;
	transform: translateY(100px);
	}
#page-top.UpMove{animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
    }
  to {
    opacity: 1;
    transform: translateY(0);
    }
  }
#page-top.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
  from {
  	opacity: 1;
    transform: translateY(0);
    }
  to {
  	opacity: 1;
    transform: translateY(100px);
    }
  }
@media screen and (max-width:767px){
  #page-top {bottom: 56px;}
	}

/* footer
-------------------------------------------------*/
footer{
	display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;
  -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
  -ms-flex-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
  margin-top: auto;
  padding:16px;
  font-size:0.9em;
  background-color: #112777;
  color: #FFF;
	width: 100%;
	min-height: 80px;
  }
.footLogo:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
  }
.copyright{
  -ms-flex-flex-item-align:center;
	-webkit-align-self:center;
	align-self:center;
	margin: 0 auto;
  }
@media screen and (max-width:768px) {
  .footLogo, .copyright{margin: 0 auto;}
}


/* Universal use
--------------------------------------------------------- */
/* テキスト - SPのみ
------------------------*/
@media screen and (max-width:767px){
  .brSP:before{content:"\A";display:block}
  .hiddenSP,.forPC,.forTB{display:none}
}
/* テキスト - TBのみ
------------------------*/
@media screen and (min-width:768px) and (max-device-width:991px){
  .brTB:before{content:"\A";display:block}
  .hiddenTB,.forPC,.forSP{display:none}
}
/* テキスト - PC
------------------------*/
@media screen and (min-width:992px){
  .brPC:before{content:"\A";display:block}
  .hiddenPC,.forTB,.forSP{display:none}
}

.txtL{text-align:left}
.txtR{text-align:right}
.txtC{text-align:center}

.fontSS{font-size:0.5em!important;}
.fontS{font-size:0.8em!important;}
.fontM{font-size:1.2em!important;}
.fontMM{font-size:1.3em!important; line-height:1.6em!important;}
.fontL{font-size:1.5em!important;line-height:1.8!important;}
.fontLL{font-size:2em}

.pl1em{padding-left:1em !important}
.pl2em{padding-left:2em !important}
.pb0{padding-bottom:0 !important}
.pb5{padding-bottom:5px !important}
.pb10{padding-bottom:10px !important}
.mb0{margin-bottom:0 !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb1em{margin-bottom:1em !important}
.mb2em{margin-bottom:2em !important}
.mb3em{margin-bottom:3em !important}
.mb12em{margin-bottom:12em !important}
.mt0{margin-top:0 !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt1em{margin-top:1em !important}
.mt2em{margin-top:2em !important}
.mt3em{margin-top:3em !important}
.ml0{margin-left:0 !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.mr0{margin-right:0 !important}
.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}



/* Loading animation
--------------------------------------------------------- */
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 9999999;
	text-align:center;
	color:#2782DC;
	}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

/*========= 画面遷移のためのCSS ===============*/
body{background:#FFF;/*遷移アニメーションと同じ色を指定*/}
body.appear{background:#2782DC;/*画面を開いた後の背景色を指定*/}

/*画面遷移アニメーション*/
.splashbg1,.splashbg2{display: none;}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,body.appear .splashbg2{display:block;}

/*右に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left:50%;
    transform: scaleX(1);
    background-color: #FFF;/*伸びる背景色の設定*/
		}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(1);
		}
	50% {transform-origin:right;}
	100% {
		transform-origin:right;
		transform:scaleX(0);
		}
	}

/*左に消えるエリア*/
body.appear .splashbg2{
	animation-name:PageAnime2;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	right:50%;
    transform: scaleX(1);
    background-color: #FFF;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:right;
		transform:scaleX(1);
		}
	50% {transform-origin:left;}
	100% {
		transform-origin:left;
		transform:scaleX(0);
		}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{opacity: 0;/*はじめは透過0に*/}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
@keyframes PageAnimeAppear{
	0% {opacity: 0;}
	100% {opacity: 1;}
}