@charset "UTF-8";
/*キャンペーン*/
.end {
 position: relative;
 overflow: hidden;
}
.end_overlay {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: rgba(85,85,85,.8);
 z-index: 10;
 text-align: center;
}
.end_overlay p {
 margin-top: 150px;
 font-size: 30px;
 font-weight: bold;
}
img {
 width: 100%;
}
footer {
 color: #FFF;
 position: relative;
 background: #fc8e3d;
 background: -moz-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
 background: -webkit-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
 background: linear-gradient(to right, #fc8e3d 0%, #ff0576 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8e3d', endColorstr='#ff0576', GradientType=1);
 height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1;
 font-size: 12px;
}
.wrapper {
 color: #fff;
 background: #000;
 font-family: "noto-sans-cjk-jp", sans-serif;
 font-weight: 300;
 font-style: normal;
 padding-top: 60px;
}
.bold {
  font-weight: 500;
}
.sp {
 display: none;
}
.mt00 {
  margin-top:0 !important;
}
.opacity {
  display: block;
  transition: .3s;
}
.opacity:hover {
  opacity: .6;
  transition: .3s;
}
.contents {
  margin: 0 auto;
}
#js-lp-cta-fixed {
  display: none;
  margin: 0;
}
#js-lp-cta-fixed.is-fixed {
  display: block;
}
.slider {
  visibility: hidden;
}
.slider.slick-initialized {
  visibility: unset;
}

/* ==========================================================================
btn
========================================================================== */
.btn a {
   position: relative;
   margin: 15px 0 0;
   background: #fc8e3d;
   background: -moz-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
   background: -webkit-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
   background: linear-gradient(to right, #fc8e3d 0%, #ff0576 100%);
   color: #fff;
   font-size: 19px;
   font-weight: 700;
   text-align: center;
   width: 100%;
   height: 65px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border-radius: 100px;
   box-sizing: border-box;
}
.btn a span {
   display: block;
   background-image: url(../images/playbtn.png);
   background-size: 100% 100%;
   width: 20px;
   height: 20px;
   margin-left: 10px;
}
.btn a span.dli-chevron-right {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 30px;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 12px;
  height: 12px;
  border: 2.5px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translate(-25%,-50%) rotate(45deg);
  background: none;
  margin-left: 0;
}
.btn.team_01 a {
 background: #fff;
 color: #000;
}

.btn.team_01 a span.dli-chevron-right {
  color: #000;
}
.btn_notes {
 margin-top: 5px;
 font-size: 13px;
 text-align: center;
}
.btn_notes a {
 text-decoration: underline;
}
.btn_notes + .btn a {
 
}
.game .game_info .btn_notes + .btn {
 margin-top: 10px;
}
#how::before {
    display: block;
    content: '';
    padding-top: 120px;
    margin-top: -120px;
}
/* ==========================================================================
fv
========================================================================== */
body {
 background: #000;
}
.fv_lead {
 width: 100%;
 margin: 0 0 0;
 padding: 25px 0 15px;
 text-align: center;
 font-size: 40px;
 color: #fff;
 font-weight: 700;
}
h1 {
	text-align: center;
	background: #000;
	width: 100%;
}
h1 img {
	width: 90%;
}
/* ==========================================================================
slider
========================================================================== */
.container {
  margin: 0 auto;
  padding: 0 0 35px;
  width: 100%;
 background: url("../images/livestreaming.webp") repeat-x top center/1100px;
}
.slider {
	mask:linear-gradient(to left, transparent, black 5%, black 95%, transparent);
}
.slider_flex {
  height: auto;
  opacity: .6;
  transform: scale(.9);
  transition: opacity .3s, transform .3s;
  width: 100%;
}
.slider .slider_flex.slick-center {
  opacity: 1;
  transform: scale(1);
}
.slick-img img {
  height: auto;
  width: 100%;
}

.common_footer_wrapper {
 overflow: hidden;
}
.footer_logo a {
  display: block;
  background-image: url(../images/logo.svg);
  background-size: 100% 100%;
  width: calc(130px);
  height: calc(130px / 494.58 * 217.28);
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
/* ==========================================================================
anker
========================================================================== */
#anker {
 display: -webkit-flex;
 display: flex;
 justify-content: space-between;
 max-width: 900px;
 margin: 0 auto 10px;
 width: 100%;
 border-left: 2px solid #727272;
 border-right: 2px solid #727272;
}
#anker li {
 width: 33.3%;
}
#anker li:nth-of-type(2) {
 border-left: 2px solid #727272;
 border-right: 2px solid #727272;
}
#anker li a {
 display: block;
 padding: .5em 0;
 color: #fff;
 text-align: center;
}
.dli-chevron-down {
  display: block;
  margin: 10px auto 0;
  color: #E51A12;
  line-height: 1;
  width: .8em;
  height: .8em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}
/*top*/
.lp_cta_fixed {
   display: none;
   width: 95px;
   transition: all 3s ease-in-out;
}
 
 .lp_cta_fixed.is-fixed {
   display: block;
   width: 95px;
   position: fixed;
   bottom: 30px;
   right: 5px;
   z-index: 99;
   text-align: center;
   transition: all 3s ease-in-out;
 }
 
  .lp_cta_fixed.is-fixed a {
   display: block;
   transition: all .3s;
 }
 
  .lp_cta_fixed.is-fixed a:hover {
   opacity: .5; 
   transition: all .3s;
 }
/* ==========================================================================
contents
========================================================================== */
/*アンカー*/
#info::before,
#campaign::before,
#related::before {
    display: block;
    content: '';
    padding-top: 60px;
    margin-top: -60px;
}
/*flex*/
.flex_box {
  display: -webkit-flex;
  display: flex;
}
.flex_box.ai {
  -webkit-align-items: center;
  align-items: center;
}
.flex_box.js {
  justify-content: space-between;
}
.contents_inner {
 max-width: 1800px;
 width: 80%;
 margin: auto;
}
.contents_box {
 padding: 80px 0
}
.title {
 padding: 25px 0 10px;
 font-size: 45px;
 background: url("../images/info.webp") repeat-x top left/auto 1.8em;
 font-weight: 700;
 letter-spacing: 6px;
}
.title.campaign {
 background-image: url("../images/campaign.webp");
}
.title.related {
 background-image: url("../images/related.webp");
}
.title.contents {
 background-image: url("../images/contents.webp");
}
.title.schedule {
 background-image: url("../images/schedule.webp");
}
/*lead*/
.img.a {
}
.lead {
 padding: 35px 0 50px;
 text-align: center;
 color: #fff;
 margin: auto;
 font-size: 25px;
 font-weight: 700;
 line-height: 120%;
 background: url("../images/livestreaming.webp") repeat-x center/1100px;
}
.lead span {
 margin-top: 20px;
 display: block;
 font-size: 40px;
 color: #fc8e3d;
 background: linear-gradient(to right, #fc8e3d 0%, #ff0576 100%); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 line-height: 100%;
}
/* ==========================================================================
campaign
========================================================================== */
.contents.yet {
 position: relative;
 height: 70vh;
}
.contents.yet p {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 margin-top: 60px;
 font-size: 50px;
 color: #fff;
 font-weight: 700;
 opacity: .2;
}
.cp_box {
 padding-top: 50px;
 background: rgba(255,255,255,.1);
}
.cp_box > li {
 max-width: 1100px;
 margin: auto;
 padding: 80px 0;
}
.cp_box > li:nth-of-type(n+2) {
 border-top: 1px solid rgba(255,255,255,.5);
}
.cp_box > li:first-of-type {
 padding-top: 0;
}
.btn_flex {
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: 30px auto 0;
}
.btn_flex .btn {
	width: 48%;
}
.btn_flex .btn a{
	display: block;
	height: auto;
	padding: 15px 0;
}
.btn_flex .btn.entry a {
	background:#3323AD;
	padding: 26px 0;
}
.btn_flex .btn a span.small {
	font-size: 14px;
	font-weight: 400;
	display: inline;
}
.cp_title {
 position: relative;
 margin-top: 0px;
 padding-bottom: 20px;
 font-size: 27px;
 text-align: center;
 font-weight: 700;
 color: #FFFFFF;
 /*background: linear-gradient(to right, rgb(252, 142, 61) 0%, rgb(255, 5, 118) 100%) text;
 -webkit-text-fill-color: transparent;*/
}
.cp_title span {
	background: linear-gradient(to right, rgb(252, 142, 61) 0%, rgb(255, 5, 118) 100%) text;
 -webkit-text-fill-color: transparent;
 display: inline-block;
 padding-bottom: 15px;
}
.cp_title::before {
 position: absolute;
 content: '';
 display: block;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 2px;
 background: linear-gradient(to right, rgb(252, 142, 61) 0%, rgb(255, 5, 118) 100%);
}
.cp_flex {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}
.cp_im {
	width: 35%;
}
.cp_info dt.cp_lead {
	font-size: 18px;
	line-height: 140%;
}
.cp_info {
 margin-top: 40px;
 width: 60%	;
}
.cp_info dt {
 font-size: 15px;
}
.cp_info dt:nth-of-type(n+2) {
 margin-top: 25px;
}
.cp_info dd {
 margin-top: 10px;
 font-size: 14px;
}
.cp_list li:nth-of-type(n+2) {
 margin-top: 5px;
}
.cp_notes {
 margin-top: 10px;
 font-size: 13px;
}
.cp_notes li:nth-of-type(n+2) {
 margin-top: 5px;
}
/*tokuten*/
.tokuten_scroll {
  margin-top: 4em;
  padding: 2em;
  background: #3b3b3b;
  color: #fff;
}
.tokuten_scroll .inn {
  padding-right: 2em;
  height: 230px;
  overflow-y: scroll;
  text-align: left;
}
.tokuten_scroll .inn .inn_box {
  margin-bottom: 2em;
}
.tokuten_scroll .inn .inn_box > ul > li {
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: 0.3em;
}
/* ==========================================================================
football_copy
========================================================================== */
#football_copy {
 padding: 1.5em;
 background: url("../images/bg_copy.webp") 0 0/11px;
 text-align: center;
 font-size: 13px;
 line-height: 150%;
}
.bottom_bn {
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 max-width: 900px;
 margin: auto;
 padding-top: 70px;
 padding-bottom: 70px;
}
.bottom_bn > li {
 width: 48.5%;
 margin-right: 3%;
}
 .bottom_sns.sns p {
  display: inline-block;
 }
 .bottom_sns.sns p:first-of-type {
  margin-left: 0px;
 }
 .bottom_sns {
  text-align: center;
  padding-bottom: 50px;
 }
 .bottom_sns.sns a {
  position: relative;
  width: 48px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
   transition: .5s;
 }
/* ==========================================================================
---812---
========================================================================== */
@media screen and (max-width: 812px) {
 .slick-prev, .slick-next {
  display: none !important;
 }
 .parallax-01.a {
    background:  url("../images/contents_bg_01_sp.webp");
    background-size: cover;
 }
 .parallax-01.b {
    background:  url("../images/contents_bg_02_sp.webp");
    background-size: cover;
 }
 .parallax-01.c {
    background:  url("../images/contents_bg_03_sp.webp");
    background-size: cover;
 }
 .p-nav__list li span.sakura.none {
  background: #A6A6A6;
  pointer-events: none;
 }
 .p-nav__list li a.none {
  pointer-events: none;
 }
 .fv_banner {
  padding-top: 1em;
 }
 .fv_banner + .contents_block {
  margin-top: 0.5em;
 }
  body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: 100%;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
  }
 .sp {
  display: block;
 }
 .pc {
  display: none;
 }
 .wrapper {
  position: relative;
  background: none;
  padding-top: 50px;
 }
 .home {
  position: fixed;
  top: 14px;
  left: 10px;
  width: 20%;
  max-width: 130px;
  z-index: 1000;
 }
 
/* ==========================================================================
contents
========================================================================== */
 .contents {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
 }
 .container {
background: none;
 }
 .fv_lead {
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 5vw;
   background: url("../images/livestreaming.webp") repeat-x center/110%;
 }
 #anker li a {
  font-size: 3vw;
 }
 .lead {
  font-size: 3.5vw;
  line-height: 160%;
  background: url("../images/livestreaming.webp") repeat-x center/110%;
 }
 .lead span {
  font-size: 5.5vw;
 }
 .img {
    width: 100%;
    height: 40vh;
  background: none;
}
 .img::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(../images/contents_bg_01.webp);
background-size:cover;
 }

.img.b {
    background-image: url("../images/contents_bg_02.webp");
}
.img.c {
    background-image: url("../images/contents_bg_03.webp");
}
 .title {
    padding: 25px 0 10px;
    font-size: 6vw;
    background: url(../images/info.webp) repeat-x top left / auto 2em;
    font-weight: 700;
    letter-spacing: 6px;
}
 .contents_inner {
  width: 100%;
 }
 .contents_box {
  padding-top: 40px;
 }
/* ==========================================================================
campaign
========================================================================== */
 .cp_box > li {
 padding: 50px 0;
}
 .cp_box > li.pb_0 {
 padding-bottom: 0px;
}
.cp_box > li:last-of-type(n+2) {
 padding-bottom: 0;
}
 .cp_title {
  margin-top: 0;
  padding-bottom: 10px;
  font-size: 18px;
	line-height: 140%;
 }
 .cp_box {
  padding: 30px 15px 0;
 }
 .end_overlay p {
  font-size: 20px;
 }
 .cp_flex {
	margin-top: 30px;
	flex-direction: column;
}
.cp_im {
	width: 100%;
}

.cp_info {
 margin-top: 20px;
 width: 100%	;
}
 .cp_info dt {
  font-size: 13px;
 }
 .cp_info dt.cp_lead {
	font-size: 16px;
	line-height: 140%;
}
 .cp_info dd {
  font-size: 12px;

 }
 .btn_flex {
	width: 100%;
	margin: 30px auto 0;
	flex-direction: column;
}
.btn_flex .btn {
	width: 100%;
}
.btn_flex .btn a{
	padding: 15px 0;
	font-size: 16px;
}
.btn_flex .btn.entry a {
	padding: 26px 0;
}
.btn_flex .btn a span.small {
	font-size: 13px;
}
/* tokuten*/
 .tokuten_scroll {
  padding: 2em 1.3em;
  font-size: 12px;
 }
 .tokuten_scroll .inn {
  padding-right: 0.5em;
 }
 footer  {
  height: 40px;
 }
 /* ==========================================================================
bottom_bn
========================================================================== */
  .bottom_bn {
  width: 75%;
  max-width: 400px;
  padding-top: 10px;
 }
 .bottom_bn > li {
  width: 100%;
  margin-right: 0;
 }
 .bottom_bn > li:nth-of-type(n+2) {
  margin-top: 10px;
 }
}/*end812*/

@media screen and (min-width: 813px) {
.parallax-01 {
    background-attachment: fixed ;
}
/* ==========================================================================
header
========================================================================== */
header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 padding: 0 1.5em;
 background: #000;
}
header .home {
 width: 120px;
 padding: 1.2em 0;
 margin-right: 30px;
}
header .right {
 margin: 0 0 0 auto;
}
header .right p {
 position: relative;
 display: inline-block;
 margin-top: 5px;
 margin-left: 10px;
 font-size: 15px;
 line-height: 70%;
}
 header .right p a {
  display: block;
  padding: 1em 0.5em;
  color: #fff;
 }
 header .sns {
  padding-top: 7px;
 }
 .bottom_sns.sns p,
 header .sns p {
  display: inline-block;
 }
 .bottom_sns {
  text-align: center;
  padding-bottom: 50px;
 }
 .bottom_sns.sns a,
 header .sns a {
  position: relative;
  width: 48px;
  margin-right: 10px;
  display: inline-block;
  text-align: center;
   transition: .5s;
 }
 header .sns a img {
  width: 90%;
 }
  header .sns p a::after,
 header .right p::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background: #fc8e3d;
  background: -moz-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
  background: -webkit-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
  background: linear-gradient(to right, #fc8e3d 0%, #ff0576 100%);
  bottom: -5px;
  left:0;
  transform: scale(0,1);
  transform-origin:  right top;
  transition: transform 0.3s;
 }
 header .sns > p a:hover::after,
 header .right p:hover::after {
  transform: scale(1,1);
  transform-origin:  left top;
 }
  header .right p.current::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 3px;
  background: #fc8e3d;
  background: -moz-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
  background: -webkit-linear-gradient(left, #fc8e3d 0%, #ff0576 100%);
  background: linear-gradient(to right, #fc8e3d 0%, #ff0576 100%);
  bottom: -5px; 
  transform: scale(1,1);
 }
#related .flex_box > li:nth-of-type(4n) {
 margin-right: 0;
}
#related .flex_box > li:nth-of-type(n+5) {
 margin-top: 50px;
}
  .footer_fix {
      margin: 2% auto;
  }
  .lp_cta_fixed .lp_fv_cta_btn {
      width: min(44vw, 450px);
  }
  .bottom_bn > li:nth-of-type(2n) {
 margin-right: 0;
}
 .bottom_bn > li:nth-of-type(n+3) {
 margin-top: 15px;
}
  .guest {
  width: 59%;
 }
 .assistant {
  width: 39%;
 }
}
/* ==========================================================================
---1100---
========================================================================== */
@media screen and (max-width: 1100px)and (min-width: 813px) {
 .fv_lead  {
  font-size: 30px;
 }
 header .right p {
  font-size: 11px;
 }
 .contents_inner {
  width: 90%;
 }
 .game_info_list > li {
  font-size: 15px;
 }
 .game h4 {
  font-size: 18px;
 }
 .game h4 span {
  font-size: 20px;
 }
 .event_info h5 {
  font-size: 18px;
 }
 .event_works_info h6 {
  font-size: 18px; 
 }
 .btn a {
  font-size: 16px;
 }
}