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

.tss_wrap sup{
  font-size: 0.675rem;
  vertical-align: super;
}
.tss_wrap{
  background-color: #000;
}
.tss_wrap::before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height:100svh;
  background-image: url(../img/bg.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

.dsr_body::before{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.dsr_body.active::before{opacity: 1;}


.dsr_kv_area{
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  left: 0;
  animation-name:fadeInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

.dsr_kv_area h1{
  text-align: center;
  animation-name:fadeInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  transform: skew(0, -8deg);
}

@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}


.dsr_slider,
.dsr_slider2{
  position: relative;
  width:110%;
}


.dsr_slider{transform: skew(8deg, -8deg)translate(-1vw, -4vh);}
.dsr_slider2{transform: skew(8deg, -8deg)translate(-1vw, 2vh);}

.dsr_headervideowrap{
  width: 100%;
  max-width:800px;
  margin:0 auto;
  position: relative;
  z-index: 99;
  padding-bottom:24px;
}

.dsr_headervideo{
  width:100%;
  aspect-ratio:16/9;
}
.dsr_headervideo iframe {
  width: 100%;
  height: 100%;
  /*box-shadow: 0px 0px 30px #0ff;*/
}
.dsr_wrap_top{
  max-width: 800px;
  width: 100%;
  box-shadow: 0px 0px 30px #FFDD00;
  margin: 0 auto 6em;
}
.dsr_wrap_top .dsr_txt{
  color:#FFF;
  padding:0 1.5em 2em;
  text-shadow: 1px 1px 4px #473212;
}

.dsr_container{
  position: relative;
  z-index: 5;
  padding-top: 15vh;
  padding-top: 15svh;
}
.dsr_body img{max-width: 100%;}
.dsr_wrap{
  max-width: 800px;
  width: 100%;
  background: linear-gradient(315deg, rgba(0,119,255,0.9) 0%, rgba(0,0,0,0.9) 20.08%, rgba(0,0,0,0.90) 83.3%,rgba(154,0,255,0.9) 100%);
  box-shadow: 0px 0px 30px #0ff;
  padding:2em 3em 3em;
  margin: 0 auto 6em;
}

.dsr_headbox{
  background: linear-gradient(135deg, #f0e391 0%, #cc9d2b 8.36%, #000 28.87%, #000 77.4%, #fb0 100%);
}

.dsr_hd_spbnr{
  width:88%;
  margin:auto;
  padding-bottom:2.5em;
}

.dsr_hd_spbnr ul{
  display:flex;
  justify-content: space-between;
}

.dsr_hd_spbnr ul li{
  width:30%;
}

.dsr_copy{
  text-align: center;
  margin-top: -2em;
  margin-bottom: 1em;
}
.dsr_wrap .dsr_txt{
  font-size: clamp(0.875rem, 0.806rem + 0.26vw, 1rem) /*1200-428 16-14px*/;
  line-height: 2;
  color: #fff;
  text-indent: 1em;
}
.dsr_txt_r{
  text-align: right;
}
.dsr_rulebox{
  border-top:solid 1px #FFF;
  margin-top:24px;
  color:#FFF;
}
.dsr_rulettl{
  text-align: center;
  font-size:1.5em;
  font-weight:bold;
  padding:1em 0;
}
.dsr_rulebox > div img{
  width:100%;
  max-width:640px;
  display:block;
  margin:auto;
}
.dsr_ruletxt{
  padding-top:1.5em;
  line-height:1.75;
}



.dsr_news{margin-bottom: 80px;}
.dsr_news h2{
  margin-bottom: 40px;
  text-align: center;
}
.dsr_newslist{margin-bottom: 48px;}
.dsr_newslist .slick-track{
  display: flex;
}
.dsr_newslist .slick-list{
  padding: 30px 0;
  margin:0 auto;
}
.dsr_newslistbox{
  margin-right: 0;
  margin-bottom: 0;
}
.dsr_newslistbox a h3{
  height:3em;
  -webkit-line-clamp: 2;
}
.dsr_news .slick-slide{
  margin: 0 8px;
  height:auto !important;
}
.dsr_news .slick-slide > div{
  display: flex;
  height:100%;
}
.dsr_inforeadmore a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  margin: auto;
  text-align: center;
  font-size: 0.875rem;
  color: #FFFFFF;
  border-radius: 20px;
  background: linear-gradient(to right, rgba(154,0,255,0.9) 0%, rgba(0,0,0,0.9) 48.77%, rgba(0,0,0,0.9) 51.07%, rgba(0,119,255,0.9) 100%);
  box-shadow: 0px 0px 30px #00FFFF;
}

.dsr_newslistbox a .dsr_infotxt {
  -webkit-line-clamp: 5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  flex:1;
}


.dsr_event{
  width:100%;
  box-shadow: 0px 0px 30px #00FFFF;
  color:#FFFFFF;
  margin-bottom:6em;
}
.dsr_eventbg{padding: 40px 0;}
.dsr_eventbox{
  width:96%;
  max-width:800px;
  margin: 0 auto 16px;
  text-align:center;
  position:relative;
  z-index:2;
}
.dsr_eventbox > p{
  margin-bottom: 14px;
  font-size:clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  font-weight:bold;
  line-height:1.65;
}
.dsr_eventvoice > p{
  font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  font-weight:bold;
}
.dsr_eventflx{
  display: flex;
  justify-content: center;
}
.dsr_eventcaption{
  background-color:rgba(0,0,0,0.68);
  width:410px;
  text-align:center;
  font-weight:bold;
  padding:1em;
  line-height:1.75;
}
.dsr_eventcaption > p:first-of-type{
  color:#C5FF00;
  font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
}
.dsr_eventcaption > p:nth-of-type(2){font-size:1em;}
.dsr_eventcaption > p:nth-of-type(2) span{
  font-size:0.875em;
  font-weight:normal;
}
.dsr_eventcaption > p:last-of-type{font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);}
.dsr_eventcaption > p:last-of-type a{color:#FFFFFF;}
.dsr_eventcaption > p:last-of-type span{
  font-size:0.875rem;
  font-weight:normal;
  display:block;
  margin-top:-0.5em;
}
.dsr_eventvideo{
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #FFFFFF;
  cursor: pointer;
}
.dsr_eventvideo::before{
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 36px);
  top: calc(50% - 36px);
  transform: scale(1);
  border-radius: 50%;
  border: 4px solid transparent;
  background-color: rgba(0,140,255,0.5);
  width: 64px;
  height: 64px;
  z-index: 30;
  transition: all .5s;
  filter: drop-shadow(1px 2px 2px rgba(22,31,41,0.6));
  pointer-events:none;
}
.dsr_eventvideo::after{
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 9px);
  transform: scale(1);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 15px 0 15px 25px;
  z-index: 31;
  transition: transform .5s;
  filter:drop-shadow(0 0 4px rgba(0,0,0,0.4));
  pointer-events:none;
}
.dsr_eventvideo img{
  width: 100%;
  height: 100%;
}



.dsr_mvarea{
  padding: 40px 16px 72px;
  background: linear-gradient(135deg,rgba(154, 0, 255, 0.9) 0%, rgba(0,0,0,0.9) 20.08%, rgba(0,0,0,0.9) 83.3%, rgba(0, 119, 255,0.9) 100%);
  opacity: 0.9;
  filter: drop-shadow(0px 0px 30px #0ff);
}
.dsr_mvarea h2{
  width: fit-content;
  line-height: 2;
  margin:0 auto 14px;
  padding: 0 40px;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  background-image: url(../img/il_ball.png), url(../img/il_ball.png);
  background-position: left center, right center;
  background-repeat: no-repeat;
}
.dsr_ttl_intro{color: #FFF;}
.dsr_ttl_project{color: #4FEF6F;}
.dsr_ttl_news{color: #C184FF;}
.dsr_wrap_movie{
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  width: 100%;
  margin:0 auto 40px;
  gap: 1em;
}
.dsr_wrap_movie_alignleft{
  justify-content:flex-start;
}
.dsr_wrap_movie div{
  position: relative;
  width: calc((100% - 3em) / 4);
  aspect-ratio:16/9;
  background: #f5f5f5;
  color: #000;
  cursor: pointer;
}
.dsr_wrap_movie div::before{
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 36px);
  top: calc(50% - 36px);
  transform: scale(1);
  border-radius: 50%;
  border: 4px solid transparent;
  background-color: rgba(0,140,255,0.5);
  width: 64px;
  height: 64px;
  z-index: 30;
  transition: all .5s;
  filter: drop-shadow(1px 2px 2px rgba(22,31,41,0.6));
  pointer-events: none;
}
.dsr_wrap_movie div::after{
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 9px);
  transform: scale(1);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 15px 0 15px 25px;
  z-index: 31;
  transition: transform .5s;
  filter:drop-shadow(0 0 4px rgba(0,0,0,0.4));
  pointer-events: none;
}
.dsr_wrap_movie div img{
  width: 100%;
  height: 100%;
}

.dsr_announcement{
  max-width: 800px;
  margin: 0 auto 32px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(154, 0, 255, 0.39) 0%, rgba(0, 119, 255, 0.39) 100%);
}
.dsr_announcement h3{
  line-height: 1.5;
  margin-bottom: 8px;
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  color: #FFFFFF;
}
.dsr_announcement > p{
  line-height: 1.5;
  text-align: center;
  font-size: 0.875rem;
  color: #FFFFFF;
}
.dsr_announcement > p:nth-of-type(2){margin-bottom: 18px;}
.dsr_team{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dsr_team div:nth-of-type(1){width: 420px;}
.dsr_team div:nth-of-type(2){width: 280px;}
.dsr_team div h4{
  margin-bottom: 14px;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
}
.dsr_team div dl{
  display: flex;
  flex-wrap: wrap;
  line-height: 2;
}
.dsr_team div dl dt{
  width: 7em;
  font-size: 0.875rem;
  color: #FFFFFF;
}
.dsr_team div dl dd{
  width: calc(100% - 7em);
  font-size: 0.875rem;
  color: #FFFFFF;
}
.dsr_result{color:#FFFFFF;}
.dsr_result dt{
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 0.875rem;
  text-align: center;
}
.dsr_result dd{
  display: flex;
  justify-content: center;
  line-height: 2;
  font-weight: bold;
  font-size: 0.875rem;
}

.dsr_anm-adj.dsr_announcement{
  background: linear-gradient(135deg, rgb(130 0 0) 0%, rgb(141 15 8) 100%);
}
.dsr_anm-adj .dsr_team div:nth-of-type(1) {
  width: 410px;
}
.dsr_anm-adj .dsr_team div:nth-of-type(2) {
  width: 290px;
}
.dsr_anm-adj  .dsr_result dd{
  display: block;
}
dl.dsr_result-adj{
  display: flex;
  flex-wrap: wrap;
}
dl.dsr_result-adj:nth-last-of-type(n + 2){
  margin-bottom: 16px;
}
dl.dsr_result-adj dt{
  text-align: left;
  width: 38%;
  margin-bottom: 0;
}
dl.dsr_result-adj dd{
  width: calc(100% - 38%);
}


.dsr_rtw2025 h2{
  padding-top:1em;
}

.dsr_rtw2025 .dsr_txt span{
  color:#FFEE00;
  font-weight:bold;
}


.dsr_footer{
  position: relative;
  width: 100%;
  background-color: #000000;
  padding: 2em;
  text-align: center;
}
.dsr_footer a img{
  background-color:#FFF;
}


/*-- fadeの調整 --*/
.dsr_fadeup{
  opacity: 0;
  transform: translateY(150px);
  transition: transform 0.75s, opacity 0.5s;
}
.dsr_fadeup.active{
  opacity: 1.5;
  transform: translateY(0);
}


.drn_fadein{
  transform: translateX(3%);
}

.drn_fadeout{
  transform: translateX(180%);
}







@media screen and (max-width: 1880px) {
  .dsr_eventbg{
    background-size:auto 100%;
    background-position:center center;
  }
}

@media screen and (max-width: 1200px) {
  .dsr_wrap_movie {
    flex-wrap: wrap;
    justify-content: center;
  }
  .dsr_wrap_movie div{
    width: 48%;
  }
}

@media screen and (min-width: 821px) {
  .dsr_inforeadmore a:hover{background: #0077FF;}

  .dsr_eventvideo:hover::before{
    transform: scale(1.5);
    border: 4px solid #FFFFFF;
    background-color: transparent;
  }
  .dsr_eventvideo:hover::after{transform: scale(1.5);}
  .dsr_wrap_movie div:hover::before{
    transform: scale(1.5);
    border: 4px solid #FFFFFF;
    background-color: transparent;
  }
  .dsr_wrap_movie div:hover::after{transform: scale(1.5);}
  .dsr_footer a:hover{opacity:0.5;}
}

@media screen and (max-width: 820px) {
  .tss_wrap{padding-bottom:42px;}
  
  .dsr_slider{transform: skew(8deg, -8deg)translate(-1vw, -1.5vh);}
  .dsr_slider2{transform:  skew(8deg, -8deg)translate(-1vw, 2vh);}

  .dsr_wrap {
    padding: 2em;
    margin: 0 auto 2em;
  }
  
  .dsr_newslist{
    padding:0 8px;
    margin-bottom:8px;
  }

  
  .dsr_copy{margin-top: -1em;}
  .dsr_headbox .dsr_copy{margin-top:0;}
  .dsr_headervideowrap{padding-bottom:0;}
  .dsr_headbox{margin-top:-16px;}
  
  .dsr_footer {
    padding: 2em 2em 30vw;
  }
  
  .dsr_footer a{
    display: block;
    width: 70%;
    margin: auto;
  }
  
  .dsr_fadeup{
    transition: transform 1s, opacity 1s;
  }
 
 
  .dsr_eventbox > p{
    width:88%;
    margin:1em auto;
    text-align:left;
  }
  .dsr_eventflx{flex-wrap: wrap;}
  .dsr_eventvideo{width: 410px;}
  
  .dsr_mvarea h2{
    font-size: 0.985em;
    margin-bottom: 16px;
  }
  .dsr_team{
    flex-wrap: wrap;
    justify-content: center;
  }
  .dsr_team div:nth-of-type(1),
  .dsr_team div:nth-of-type(2){
    width: 100%;
    max-width: 420px;
  }
  .dsr_team div:nth-of-type(1){margin-bottom: 8px;}
  .dsr_result > div:first-of-type{
    flex-direction: column-reverse;
  }
  .dsr_retxt{
    text-align: center;
    padding-top:16px;
  }
  .dsr_reboxflx ul{
    text-align: center;
  }
  .dsr_ruletxt{
    font-size: clamp(0.875rem, 0.806rem + 0.26vw, 1rem) /*1200-428 16-14px*/;
  }


  dl.dsr_result-adj dd {
    text-align: center;
    width: 100%;
  }
  dl.dsr_result-adj dt {
    text-align: center;
    width: 100%;
  }

}/*800end*/

/*-- ロゴのアニメーション --*/
h1 img{
  animation:3s ease-in 1s infinite alternate forwards running logoblinking;
  filter: drop-shadow(0px 0px 30px #0080ff);
  width:80%;
  display:block;
  margin:auto;
}

@keyframes logoblinking{
  0%{
    filter: drop-shadow(0px 0px 20px #0080ff);
  }
  25%{
    filter: drop-shadow(0px 0px 20px #0ff);
  }
  50%{
    filter: drop-shadow(0px 0px 20px #0ff);
  }
  75%{
    filter: drop-shadow(0px 0px 20px #0ff);
  }
  100%{
    filter: drop-shadow(0px 0px 30px #0080ff);
  }
}




@media screen and (max-width: 430px) {
  .dsr_slider{transform: skew(8deg, -8deg)translate(-40vw, -5vh);}
  .dsr_slider,
  .dsr_slider2{
    width:150%;
  }
  
  .dsr_wrap {padding: 2em 1em;}
  .dsr_wrap.dsr_bgwhite {
    padding: 1em 0.5em 2em;
  }

  .dsr_mvarea h2 span{display: block;}
  .dsr_wrap_movie div {width: 90%;}
  .dsr_announcement{padding: 16px;}
  .dsr_team div dl{
    max-width: 240px;
    margin: auto;
  }
  .dsr_team div dl dt,
  .dsr_team div dl dd{font-size: 0.75rem;}

}