@charset "UTF-8";

/* animation keyframes
================================================= */
@keyframes fade-hero {
  0% { transform: translateY(10vw); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-recommend {
  0% { transform: translateX(-3vw); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fade-detail {
  0% { transform: translateY(10vw); }
  100% { opacity: 1; transform: translateY(0); }
}

/* header
================================================= */
header {
	width: 100%;
	background:#23b0de url("../image/back_header.png") repeat-x;
	background-size: auto 120%;
	overflow: hidden;
	z-index: -6;
	position: relative;
	opacity: 0;
	animation: fade-hero 1.0s 1.0s ease-out forwards;
	
}
header h1 {
	max-width: 1325px;
	margin: 0 auto;
}
header h1 img {
	position: relative;
	
}
@media print, screen and (min-width: 600px) {
header { width: 104%; margin: 0 -2% auto; background-size: auto 728px; }
}
@media print, screen and (min-width: 1366px) {
header { width: 100%; margin: 0 auto; }
}


/* main
================================================= */
main > div:not(.recommend) {
	padding: 5% 0;
}
main > div:not(.recommend) > section {
  width: 90%;
  max-width: 1230px;
  margin: 0 auto;
}
@media print, screen and (min-width: 600px) {
  main > div:not(.recommend) { padding: 5% 0; }
  main > div:not(.recommend) > section { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media print, screen and (min-width: 960px) {
  main > div:not(.recommend) { padding: 70px 0; }
}

/* scroll fede-in */
.scroll-fade-in {
	opacity: 0;
}
.scroll-fade-in.show {
   animation: fade-detail 1.5s ease-out forwards;
}

/* recommend */
div.recommend {
  background: #ffffff;
}
div.recommend .scroll-fade-in {
  opacity: 0;
}
div.recommend .scroll-fade-in.show {
  animation: fade-recommend 1.0s ease-out forwards;
}
div.recommend .scroll-fade-in.show-smp {
  animation: fade-recommend 1.0s 1.0s ease-out forwards;
}
div.recommend h2 {
  width: 92%;
  margin: 0 auto;
}
@media print, screen and (min-width: 960px) {
	div.recommend h2 { width: 100%; max-width: 1325px; }
}
@media print, screen and (min-width: 1366px) {
}

/* tv */
div.tv {
	background: #fff;
	background-image: linear-gradient(rgba(222, 222, 222, 1), rgba(242, 242, 242, 1) 4%, rgba(255, 255, 255, 1) 6%);
	overflow: hidden;
}
div.tv h2 {
  width: 100%;
  margin: 0 auto 7%;
}
div.tv h3 {
	margin-top: 7%;
	margin-bottom: 0.5em;
	padding: 0.1em 0.5em;
	border-left: 7px solid #53AFC6;
	border-radius: 2px;
	background: #0999bd;
  color: #fff;
}
div.tv div.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  margin: 0 auto 3%;
  padding: 56.25% 0 0;
  background: #000;
}
div.tv div.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.tv img.tv-photo { margin-bottom: 2%; }
div.tv dt {
  margin-top: 0.3em;
  color: #088DAE;
  font-weight: bold;
  text-indent: -0.4em;
}
div.tv figure {
	width: 90%;
	margin: 0 auto;
}

a.banner {
  display: block;
  width: 80%;
  min-width: 150px;
  max-width: 320px;
  margin-top: 0.8em;
  border: 1px solid #666;
}
div.tv .stream {
	width: 100%;
	max-width: 420px;
	margin: 0 auto 7%;
}

.pict_box { display: flex; flex-wrap: wrap; justify-content: center; margin: 3% auto; }
.pict_box_unit:first-of-type { margin-bottom: 3%; }
.pict_box_unit { width: 90%; }

@media print, screen and (min-width: 600px) {
  div.tv h2 { width: 85%; max-width: 1100px; margin-bottom: 5%; }
  div.tv section div.col-a { width: 64%; }
  div.tv section div.col-b { width: 31%; }
  div.tv div.col-b h3:first-child { margin-top: 0; }
  .pict_box { justify-content: space-between; }
  .pict_box_unit:first-of-type { margin-bottom: 0; }
  .pict_box_unit { width: 47.5%; }
}
@media print, screen and (min-width: 960px) {
	div.tv .stream { width: 90%; max-width: 600px; margin-bottom: 40px; }
}

/* event */
div.event {
  background-image: linear-gradient(rgba(98, 204, 241, 1), rgba(162, 216, 222, 1) 10%, rgba(162, 216, 222, 1) 60%, rgba(246, 244, 223, 1) 80%);
  overflow: hidden;
}
div.event h2 {
  width: 100%;
  margin-bottom: 10%;
}
div.event h2 img {
  width: 70%;
  margin: 0 auto;
}
div.event h3 {
  display: flex;
  align-items: center;
  margin-top: 8%;
  margin-bottom: 0.3em;
  color: #0788b2;
  font-size: 1.15em;
  line-height: 1.6;
}
div.event h3::before {
  content: '';
  display: inline-block;
  width: 0.25em;
  height: 1.1em;
  margin-right: 0.3em;
  border-radius: 1px;
  background: #0788b2;
}
@media print, screen and (min-width: 600px) {
  div.event h2 { margin-bottom: 2%; }
  div.event h2 img { width: 45%; max-width: 470px; }
  div.event div.col { width: 47.5%; }
}
@media print, screen and (min-width: 960px) {
  div.event h3 { font-size: 1.5em; margin-top: 40px; }
}

/* button */
a.btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0.4em 0 0.8em;
  padding: 1em 0.8em;
  border-radius: 2px;
  background: #c0081f;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: .2s;
}
a.btn:hover,
a.btn:active {
  background: #F19300;
}

.comingsoon_txt{
	display: block;
	width: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	color: #041837;
}
@media print, screen and (min-width: 600px) {
.comingsoon_txt{
	font-size: 2.0rem;
}
}

/*** 雪玉（共通） ***/
.snows div{z-index: -3; /*重ね順*/
  position: fixed; /*画面固定*/
  top: -250px; /*初期位置*/
  left: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9; 
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  /* 範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉2 ***/
.snows div:nth-child(2){
  width: 10px;
  height: 10px;
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;
  animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(3){
  width: 12px;
  height: 12px;
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite;
  animation-delay: 6s;
}

/*** 大きめの雪玉 ***/
.snows div:nth-child(4){
  width: 15px;
  height: 15px;
  box-shadow:
    40vw -200px #fff,
    80vw 220px #fff;
  animation: fall 7s linear infinite;
  animation-delay: 4s;
}

@keyframes fall{
  0%{ top: -250px; }
  100% { top: calc(100% + 250px); }
}