@charset "utf-8";
html {position: relative; height: 100%;}
body {
  font: 400 16px/2.0 "Noto Sans JP", sans-serif;
  color: #221e1f;
  -webkit-font-smoothing: antialiased;
}

h3,.h3{font-size: 3.0rem; font-weight: 600; line-height: 1.4; letter-spacing: 1.5px; text-align: center; margin: 0 0 40px; padding: 0;}
h3 span{display: block; font-size: 1.4rem; font-weight: normal; color: #989898; letter-spacing: 7px;}

a{transition:.2s; text-decoration: none;}
a:hover,
a:focus,
a:active{text-decoration:none; cursor:pointer;}
a:hover {opacity: 0.75;}

.color-red{color: #e40000;}
.color-blue{color: #325896;}
.color-green{color: #20c997;}

#js-pagetop {line-height: 0;}

/*========= Layout =========*/
section:not(#hero) {padding: 100px 0; position: relative;}
.container{width: 1130px; height: 100%; margin: 0 auto; padding: 0; position: relative;}
.flex{display: flex; justify-content: space-between; align-items: flex-start;}

/*Tablet*/
@media (max-width: 1200px) {
  .container{width: 90%; height: 100%;}
}

/*smart phone*/
@media (max-width: 1023px) {
  body {font: 400 13.5px/1.75 "Noto Sans JP", sans-serif;}
  h3,.h3{font-size: 1.65rem; margin: 0 0 20px;}
  h3 span{font-size: 0.9rem; line-height: 2.0rem;}
  section:not(#hero) {padding: 50px 0;}
  .container{width: 90%; height: 100%;}
}

/* bgScroll */
#vl__bgScroll{width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; z-index: -1;
background-image: url(../images/vl/vl_content_bg.jpg); background-position: 0; background-repeat: repeat; background-size: cover;}


/*========= main =========*/
#hero{position: relative; overflow: hidden;}
#hero .entrance{width: 100vw; height: calc(90vh); background-image: url(../images/vl/vl_hero_bg.jpg); background-size: 100vw 140vh; margin: 0 auto; text-align: center; position: relative; animation: bgscroll 40s linear infinite;}
#hero .entrance div{position: absolute; top: 50%; left: 50%; margin: -90px 0 0 -450px;}
#hero .scroll {width: 80px; margin: 0 auto 40px; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; color: #325897; font-weight: 400; letter-spacing: 5px;}
#hero .scroll span {width: 32px; height: 60px; margin-left: -15px; border: solid 3px #325897; border-radius: 50px; box-sizing: border-box; position: absolute; top: -65px; left: 50%;
-webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px;}
#hero .scroll span::before {content: ''; width: 12px; height: 12px; margin-left: -6px; background-color: #325897; border-radius: 50%; position: absolute; top: 8px; left: 50%;  box-sizing: border-box;
-webkit-animation: wheel 1.5s infinite; animation: wheel 1.5s infinite;
-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%;}

/*large*/
@media (max-width: 1201px /* 1200px ~ 1024px  */) {
  #hero .entrance{width: 100vw; height: calc(90vh); background-size: 200% 100vh;}
}
/*Medium*/
@media (max-width: 1023px /* 1023px ~ 768px  */) {
  #hero .entrance{width: 100vw; height: calc(90vh); background-size: 200% 70vh;}
  #hero .entrance div{width: 48%; top: 45%; margin: -25%;}
  #hero .entrance div img{width: 100%;}
  #hero .scroll {width: 75px; margin: 0 auto 30px; font-size: 0.75rem;}
  #hero .scroll span {width: 28px; height: 55px; margin-left: -14px; top: -58px; left: 50%;}
}
@media (max-width: 768px /* 768px ~ 501px  */) {
  #hero .entrance div{width: 66%; top: 45%; margin: -33%;}
  #hero .entrance div img{width: 100%;}
}

  /*Small*/
@media (max-width: 500px /* 500px ~ */) {
  #hero .entrance div{width: 90%; top: 45%; margin: -45%;}
  #hero .entrance div img{width: 100%;}
}

/*========= about =========*/
#about{background: #fff;}
#about p.intro{font-size: 1.45rem; font-weight: 600; line-height: 2.5rem; text-align: center;}
#about .innner{position: relative; padding: 270px; margin: 60px 0;}
#about .innner:last-of-type{margin: 60px 0 0;}
#about .innner .detail{position: absolute; top: 0; left: 0; background: #ccc; color: #fff; width: 285px; padding: 70px;}
#about .innner.red .detail{background: #ce3037; top: 120px; right: 0; left: auto; padding: 70px 50px 70px 400px;}
#about .innner.blue .detail{background: #325896; top: 0; right: auto; left: 0; padding: 70px 400px 70px 50px;}
#about .innner .image{position: absolute; z-index: 1; width: 768px; overflow: hidden;}
#about .innner.red .image{top: 0; right: 0; left: 0;}
#about .innner.blue .image{top: 120px; right: 0; left: auto;}
#about .innner.red .image:before,
#about .innner.blue .image:before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 300%; height: 100%; transform: skewX( 19deg) translate(-50%,0); transform-origin: 0 50% 0; transition: all 1000ms ease-in-out;}
#about .innner.red .image.scrollAnimShape:before,
#about .innner.blue .image.scrollAnimShape:before{transform: skewX( 19deg) translate(50%,0);}
#about .innner.red .image:before{background: #ce3037;}
#about .innner.blue .image:before{background: #325896;}
#about .innner .detail h4{font-size: 2.0rem; font-weight: 600; line-height: 3.0rem; margin: 0 0 10px;}

/*tablet*/
@media (max-width: 1200px /* 1200px ~ 1024px  */) {
  #about .innner.red .detail{top: 120px; right: 0; left: auto; padding: 4% 4% 4% 30%;}
  #about .innner.blue .detail{top: 0; right: auto; left: 0; padding: 4% 30% 4% 4%;}
  #about .innner .image{width: 65%;}
  #about .innner .image img{width: 100%;}
}

/*smart phone*/
@media (max-width: 1023px) {
  #about p.intro{font-size: 0.9rem;line-height: 1.75rem;}
  #about .innner{position: relative; padding: 0; margin: 30px 0;}
  #about .innner:last-of-type{margin: 0;}
  #about .innner .detail{position: static; width: 90%;}
  #about .innner.red .detail{top: auto; padding: 5%;}
  #about .innner.blue .detail{top: auto; padding: 5%;}
  #about .innner .image{position: relative; width: 100%;}
  #about .innner .image img{width: 100%;}
  #about .innner.blue .image{top: auto; right: auto; left: auto;}
  #about .innner .detail h4{font-size: 1.4rem; line-height: 1.85rem; margin: 0 0 5px;}
}

/*========= structure =========*/
#structure p.tips{text-align: center; font-size: 1.4rem; margin: -20px 0 0;}
#structure .innner .st__toggle{position: relative; margin: 25px 0; padding: 60px 0 0; transform: translateY(240px); opacity: 0;}
#structure .innner .st__toggle.active .toggleArea{display: block;}
#structure .innner .toggleBtn{display: block; width: 100%; height: auto; background: #8d9db4; color: #fff; position: absolute; top: 0; right: 0; z-index: 10; cursor: pointer;}
#structure .innner .toggleBtn p{font-size: 1.5rem; padding: 8px 25px 5px;}
#structure .innner .toggleBtn span::before{content: ''; display: block; width: 25px; height: 7px; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; transition: .2s;}
#structure .innner .toggleBtn span::after{content: ''; display: block; width: 25px; height: 7px; background-color: #fff; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; transition: .2s;}
#structure .innner .toggleBtn span::before{transform: rotate(90deg);}
#structure .innner .toggleBtn.open span::before,
#structure .innner .st__toggle.active .toggleBtn span::before{transform: rotate(270deg); opacity: 0;}
#structure .innner .toggleBtn.open span::after,
#structure .innner .st__toggle.active .toggleBtn span::after{transform: rotate(180deg);}
#structure .innner .st__toggle.active .toggleBtn.open span::before{transform: rotate(-180deg); opacity: 1;}
#structure .innner .st__toggle.active .toggleBtn.open span::after{transform: rotate(90deg);}
#structure .innner .toggleArea{display: none; background-color: #fff; margin: -2px 0 0; padding: 40px; border: 2px solid #8d9db4;}
#structure .innner .toggleArea.open{display: block;}
#structure .innner .toggleArea .detail h4{font-size: 1.1rem; font-weight: 600; margin: 15px 0;}
#structure .innner .toggleArea .detail h4:before{content: ""; display: inline-block; background: #8d9db4; width: 5px; height: 25px; margin: 0 7px -6px 0;}
#structure .innner .toggleArea .detail .case p.tips{margin: 20px 0; text-align: left; font-size: 1.0rem;}
#structure .innner .toggleArea .detail .case:last-of-type p.tips{margin: 20px 0 0;}
#structure .innner .toggleArea .detail .case{border: 2px solid #325896; padding: 50px 60px; position: relative;}
#structure .innner .toggleArea .detail .case h5{font-weight: 600; margin: 15px 0;}
#structure .innner .toggleArea .detail .case h5:before{content: ""; display: inline-block; background: #8d9db4; width: 5px; height: 25px; margin: 0 7px -6px 0;}
#structure .innner .toggleArea .detail .case h6{text-align: center; font-size: 1.45rem; margin: 20px auto;}
#structure .innner .toggleArea .detail .case .tag{position: absolute; top: 0; left: 0; background: #325896; font-size: 1.0rem; line-height: 1; color: #fff; padding: 12px 20px;}
#structure .innner .toggleArea .detail .case img{width: 100%; margin: 0; padding: 0;}
#structure .innner .toggleArea .detail .case .teamBox{position: relative; border: 2px solid #ccc; margin: 30px 0;}
#structure .innner .toggleArea .detail .case .teamBox:last-of-type{margin: 30px 0 0 !important;}
#structure .innner .toggleArea .detail .case .teamBox_vs{position: relative; margin: 30px 0;}
#structure .innner .toggleArea .detail .case .teamBox_vs .image{margin: 10px 60px;}
#structure .innner .toggleArea .detail .case .teamBox.team__A{border: 2px solid #325896;}
#structure .innner .toggleArea .detail .case .teamBox.team__A ul{align-items: center;}
#structure .innner .toggleArea .detail .case .teamBox.team__A ul > li{width: 100%; padding: 0 50px;}
#structure .innner .toggleArea .detail .case .teamBox.team__A ul > li:first-child{width: 200px; background: #325896; font-size: 1.9rem; line-height: 1; color: #fff; text-align: center; padding: 65px 25px;}
#structure .innner .toggleArea .detail .case .teamBox.team__B,
#structure .innner .toggleArea .detail .case .teamBox.team__C,
#structure .innner .toggleArea .detail .case .teamBox.team__D{position: relative; border: 5px solid #ccc; padding: 60px 50px 30px; margin: 0 0 25px;}
#structure .innner .toggleArea .detail .case .teamBox.team__B{border: 5px solid #ce3037;}
#structure .innner .toggleArea .detail .case .teamBox.team__B .tag{background: #ce3037; width: 140px; font-size: 1.25rem; text-align: center;}
#structure .innner .toggleArea .detail .case .teamBox.team__C{border: 5px solid #28b8e1;}
#structure .innner .toggleArea .detail .case .teamBox.team__C .tag{background: #28b8e1; width: 140px; font-size: 1.25rem; text-align: center;}
#structure .innner .toggleArea .detail .case .teamBox.team__D{border: 5px solid #41a46d;}
#structure .innner .toggleArea .detail .case .teamBox.team__D .tag{background: #41a46d; width: 140px; font-size: 1.25rem; text-align: center;}
#structure .innner .toggleArea .detail .case .caseBox{position: relative; padding: 60px 30px 30px; margin: 0 0 15px;}
#structure .innner .toggleArea .detail .case .caseBox.cs_blue{border: 2px solid #325896;}
#structure .innner .toggleArea .detail .case .caseBox.cs_red{border: 2px solid #ce3037;}
#structure .innner .toggleArea .detail .case .caseBox.cs_blue .tag{background: #325896;}
#structure .innner .toggleArea .detail .case .caseBox.cs_red .tag{background: #ce3037;}
#structure .innner .toggleArea .detail .case ul > li{width: 48%;}
#structure .innner .toggleArea .detail .case ul.score > li{width: 50%;}
#structure .innner .toggleArea .detail .case table{width: 100%;}
#structure .innner .toggleArea .detail .case th{width: 150px;}
#structure .innner .toggleArea .detail .case th,
#structure .innner .toggleArea .detail .case td{font-size: 1.2rem; border: 2px solid #cccccc; text-align: center;}
#structure .innner .toggleArea .detail .case .band{background: #ccc; color: #fff; font-size: 1.2rem; text-align: center; line-height: 1; padding: 15px;}
#structure .innner .toggleArea .detail .case .band.b__blue{background: #325896;}
#structure .innner .toggleArea .detail .case .band.b__red{background: #ce3037;}
#structure .innner .toggleArea .detail .case.none__border{border: none; padding: 0;}

/*smart phone*/
@media (max-width: 1023px) {
  #structure p.tips{font-size: 1.1rem; margin: -10px 0 0;}
  #structure .innner .st__toggle{padding: 45px 0 0;}
  #structure .innner .st__toggle:last-of-type{margin: 25px 0 0;}
  #structure .innner .toggleBtn p{font-size: 1.1rem; padding: 8px 15px 5px;}
  #structure .innner .toggleBtn span::before{content: ''; width: 20px; height: 4px; right: 15px;}
  #structure .innner .toggleBtn span::after{content: ''; width: 20px; height: 4px; right: 15px;}
  #structure .innner .toggleArea{padding: 20px;}
  #structure .innner .toggleArea .detail h4{font-size: 1.0rem;}
  #structure .innner .toggleArea .detail h4:before{content: ""; width: 6px; margin: 0 5px -6px 0;}
  #structure .innner .toggleArea .detail .case p.tips{margin: 15px 0; font-size: 0.75rem; line-height: 1.4rem;}
  #structure .innner .toggleArea .detail .case:last-of-type p.tips{margin: 15px 0 0;}
  #structure .innner .toggleArea .detail .case{padding: 12.5% 5% 5%;}
  #structure .innner .toggleArea .detail .case h6{font-size: 1.25rem; line-height: 1.75rem;}
  #structure .innner .toggleArea .detail .case .tag{font-size: 0.9rem; padding: 10px 15px;}
  #structure .innner .toggleArea .detail .case .teamBox{margin: 15px 0;}
  #structure .innner .toggleArea .detail .case .teamBox:last-of-type{margin: 15px 0 0 !important;}
  #structure .innner .toggleArea .detail .case .teamBox_vs{margin: 15px 0;}
  #structure .innner .toggleArea .detail .case .teamBox_vs .image{margin: 10px 0;}
  #structure .innner .toggleArea .detail .case .teamBox.team__A ul{align-items: center; display: block;}
  #structure .innner .toggleArea .detail .case .teamBox.team__A ul > li{width: 80%; margin: 0 auto; padding: 15px 0;}
  #structure .innner .toggleArea .detail .case .teamBox.team__A ul > li:first-child{width: 100%; font-size: 0.9rem; padding: 10px 0;}
  #structure .innner .toggleArea .detail .case .teamBox.team__B,
  #structure .innner .toggleArea .detail .case .teamBox.team__C,
  #structure .innner .toggleArea .detail .case .teamBox.team__D{padding: 17% 2.5% 5%; margin: 0 0 20px;}
  #structure .innner .toggleArea .detail .case .teamBox.team__B{border: 3px solid #ce3037;}
  #structure .innner .toggleArea .detail .case .teamBox.team__C{border: 3px solid #28b8e1;}
  #structure .innner .toggleArea .detail .case .teamBox.team__D{border: 3px solid #41a46d;}
  #structure .innner .toggleArea .detail .case .teamBox.team__B .tag,
  #structure .innner .toggleArea .detail .case .teamBox.team__C .tag,
  #structure .innner .toggleArea .detail .case .teamBox.team__D .tag{width: 55px; font-size: 0.85rem;}
  #structure .innner .toggleArea .detail .case .caseBox{padding: 17% 2.5% 5%; margin: 0 0 5px;}
  #structure .innner .toggleArea .detail .case ul.flex{display: block;}
  #structure .innner .toggleArea .detail .case ul > li{width: 100%; margin-bottom: 20px;}
  #structure .innner .toggleArea .detail .case ul > li:last-child{margin-bottom: 0;}
  #structure .innner .toggleArea .detail .case ul.score > li{width: 100%; margin-bottom: -2px;}
  #structure .innner .toggleArea .detail .case th{width: 60px;}
  #structure .innner .toggleArea .detail .case th,
  #structure .innner .toggleArea .detail .case td{font-size: 1.0rem; padding: 1.5%;}
  #structure .innner .toggleArea .detail .case .band{font-size: 0.8rem; padding: 12px;}
}

/*========= howto =========*/
#howto{background: #fff;}
#howto .inner{width: 900px; margin: 0 auto 50px; background: #efefef; padding: 50px 70px; transform: translateY(240px); opacity: 0;}
#howto .slick-dotted.slick-slider {margin: 0;}
#howto .slick-dots {bottom: -100px;}
#howto .slick-dots li {background: #b2b2b2; height: 15px; width: 15px; margin: 0 10px;}
#howto .slick-dots li.slick-active, #howto .slick-dots li:hover {background: #fe2f3d !important;}
#howto .slick-slide img {width: 100%;}
#howto .slick-prev,
#howto .slick-next {opacity: 0.65; width: 0; height: 0;
border-style: solid; border-width: 50px 0 50px 70px; border-color: transparent transparent transparent #fe2f3d;}
#howto .slick-prev:hover,
#howto .slick-prev:focus,
#howto .slick-next:hover,
#howto .slick-next:focus {outline: none; background: transparent; color: transparent; }
#howto .slick-prev:hover:before,
#howto .slick-prev:focus:before,
#howto .slick-next:hover:before,
#howto .slick-next:focus:before {opacity: 1; }
#howto .slick-prev.slick-disabled:before,
#howto .slick-next.slick-disabled:before {opacity: 0.25; }
#howto .slick-prev:before,
#howto .slick-next:before {line-height: 1; color: #fe2f3d;}
#howto .slick-prev {left: -185px; transform: rotate(180deg);}
[dir="rtl"] .slick-prev {left: auto; right: -185px;}
#howto .slick-prev:before {content: "";}
[dir="rtl"] .slick-prev:before {content: "";}
#howto .slick-next {right: -185px; transform: rotate(0deg);}
[dir="rtl"] .slick-next {left: -185px; right: auto;}
#howto .slick-next:before {content: "";}
[dir="rtl"] .slick-next:before {content: "";}
#slick-howto .slider-item{margin: 0 10px;}
#slick-howto .slider-item .detail h4{font-size: 1.7rem; text-align: center; margin-bottom: 25px;}
#slick-howto .slider-item .detail h4 span{display: inline-block; background: #fe2f3d; color: #fff; font-size: 1.15rem; line-height: 1; padding: 7px 25px; border-radius: 30px; vertical-align: 4px; margin: 0 10px 0 0;}
#slick-howto .slider-item .detail div{margin-bottom: 25px;}
#slick-howto .slider-item .detail p{font-size: 1.1rem; line-height: 2.0rem;}
#slick-howto .slider-item .detail p small{display: block; line-height: 1.25rem;}
.lb-nav{display: none !important;}

/*tablet*/
@media (max-width: 1200px /* 1200px ~ 1024px  */) {
  #howto .inner{width: 768px;}
}

/*smart phone*/
@media (max-width: 1023px) {
  #howto .inner{width: 100%; margin: 0 auto 25px; padding: 4%;}
  #howto .slick-dots {bottom: -55px;}
  #howto .slick-dots li {margin: 0 7px;}
  #slick-howto .slider-item .detail h4{font-size: 1.15rem; margin-bottom: 15px;}
  #slick-howto .slider-item .detail h4 span{font-size: 0.8rem; padding: 6px 10px 5px; vertical-align: 1px; margin: 0 6px 0 0;}
  #slick-howto .slider-item .detail div{margin-bottom: 15px;}
  #slick-howto .slider-item .detail p{font-size: 1.0rem; line-height: 1.75rem;}
}

/*========= entry =========*/
#entry{}
#entry p.intro{font-size: 1.45rem; font-weight: 600; line-height: 2.5rem; text-align: center; margin-bottom: 40px;}
#entry ul{display: flex; justify-content: space-between; align-items: center; text-align: center;}
#entry ul li h4{background: #47668a; color: #fff; font-size: 1.5rem; line-height: 1; font-weight: 600; padding: 20px; margin-bottom: 15px;}
#entry ul li h4 span{display: block; font-size: 0.85rem; line-height: 1; margin: 8px 0 -2px;}
#entry ul li div{}

/*smart phone*/
@media (max-width: 1023px) {}

/* == scroll anim ============================================ */
.scrollAnimShape{}
.vl__fadeIn{transition: all 500ms ease-in-out; transform: translateY(0) !important; opacity: 1 !important;}

/* == keyframes ============================================ */
@keyframes wheel {
  0%   {transform: translate(0, 0); opacity: 1;}
  60%  {transform: translate(0, 10px); opacity: 0;}
  100% {opacity: 0;}
}

@keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 0 -140vh;}
}

/* == core ================================================== */

@media (max-width: 1023px) {}