@charset "utf-8";
/* CSS Document */
.dsr_mainbody h1{margin-bottom: 24px;}
.dsr_wightbg{
  max-width: 1200px;
  margin: auto;
  padding: 32px 16px 80px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 30px #0ff;
}

.dsr_txt01{
  margin-bottom: 20px;
  text-align: center;
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
}
.dsr_campaign{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 776px;
  min-height: 50px;
  margin: 0 auto 20px;
  padding: 8px 16px;
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
  font-weight: bold;
  color: #FF0000;
  border: 1px solid #FF0000;
}
.dsr_txt02{
  margin-bottom: 32px;
  text-align: center;
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
  font-weight: bold;
}

.dsr_requirements{
  max-width: 1100px;
  margin: auto;
}
.dsr_flxttl{
  display: flex;
  justify-content: space-between;
}
.dsr_flxttl p{
  width: 100%;
  text-align: center;
  font-size: clamp(0.875rem, 0.462rem + 1.54vw, 1.25rem);/*14-20 430-820*/
  font-weight: bold;
  color: #FFFFFF;
  padding: 0.2em 0;
}
.dsr_flxttl p:first-of-type{background-color: #144A88;}
.dsr_flxttl p span{display: inline-block;}
.dsr_requirements dl{
  border-top: 2px solid #144A88;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}
.dsr_requirements dl:nth-of-type(3){
  border-top: 2px dotted #144A88;
}
.dsr_requirements dl:last-of-type{
  margin-bottom: 3em;  
  border-bottom: 2px solid #144A88;
}
.dsr_requirements dl dt,
.dsr_requirements dl dd{
  padding: 8px;
}
.dsr_requirements dl dt{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #DCF5F5;
  width: 25%;
  font-size: clamp(0.75rem, 0.474rem + 1.03vw, 1rem);/*12-16 430-820*/
}
.dsr_requirements dl dt h5{
  text-align: center;
  letter-spacing: 0.06em;
  font-weight: bold;
}

.dsr_requirements dl dd{
  width: 85%;
}
.dsr_requirements dl dd > *:nth-last-child(n+2){margin-bottom: 16px;}

.dsr_requirements dl dd p{
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
}

.dsr_requirements dl dd > div {
  display: flex;
  align-items:center;
  
  flex-wrap: wrap;
}
.dsr_requirements dl dd > div > div {width: 280px;}

.dsr_requirements dl dd > div > p{
  width: calc(100% - 280px);
  padding: 0 8px;
  font-size: 1em;
}


.dsr_colmttl{
  position: relative;
  max-width: 1100px;
  height: 50px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.06em;
  font-size: clamp(0.75rem, 0.474rem + 1.03vw, 1rem);/*12-16 430-820*/
  color: #FFFFFF;
  background-color: #000000;
}
.dsr_colmttl::before,
.dsr_colmttl::after{
  content: "";
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
}
.dsr_colmttl::before{
  left: 0;
  top: 0;
  background-image: linear-gradient(to right bottom, #11B1D2 0, #11B1D2 50%, transparent 50%, transparent 100%);
}
.dsr_colmttl::after{
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right bottom, transparent 0, transparent 50%, #11B1D2 50%, #11B1D2 100%);
}
.dsr_requirements ol{
  max-width: 920px;
  margin: 0 auto 20px;
}
.dsr_requirements ol li:nth-last-of-type(n+2){margin-bottom: 8px;}
.dsr_requirements ol li{
  padding-left: 2.75em;
  text-indent: -2.75em;
  font-weight: bold;
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
}
.dsr_requirements ol li span{font-weight: normal;}

.dsr_requirements dl dd > div > div > a{
  display: block;
  max-width: 300px;
  height: 50px;
  margin: auto;
  padding: 12px 0;
  text-align: center;
  font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 25px;
}
.dsr_requirements dl dd > div > div:first-of-type > a{
  margin-bottom: 20px;
  background-color: rgba(20,74,136,0.84);
}
.dsr_requirements dl dd > div > div:nth-of-type(2) > a{background-color: rgba(99,63,161,0.84);}
.dsr_requirements dl dd > div > div:first-of-type p{
  font-size: clamp(0.875rem, 0.462rem + 1.54vw, 1.25rem);/*14-20 430-820*/
  font-weight: bold;
}
.dsr_requirements dl dd > div > div:first-of-type span a{
  text-decoration: underline;
  font-size: clamp(0.75rem, 0.612rem + 0.51vw, 0.875rem);/*12-14 430-820*/
  font-weight: bold;
  color: #0F8AA4;
}

.dsr_requirements ul{
  max-width: 920px;
  margin: 0 auto 20px;
}
.dsr_requirements ul li:nth-last-of-type(n+2){margin-bottom: 8px;}
.dsr_requirements ul li{font-size: clamp(0.75rem, 0.337rem + 1.54vw, 1.125rem);/*12-18 430-820*/}


.dsr_eventflx{
  display: flex;
  justify-content: center;
}
.dsr_eventcaption{
  background-color:rgba(0,0,0,1);
  width:410px;
  text-align:center;
  font-weight:bold;
  padding:1em;
  line-height:1.75;
  
  color:#FFFFFF;
}
.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%;
}




@media screen and (min-width:821px){
  .dsr_requirements dl dd > div > div > a:hover{opacity: 0.5;}
  .dsr_requirements dl dd > div > div:first-of-type span a:hover{text-decoration: none;}

  .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){
.dsr_txt01{text-align: left;}
  .dsr_eventflx{flex-wrap: wrap;}
  .dsr_eventvideo{width: 410px;}
  .dsr_requirements dl{flex-wrap: wrap;}
  .dsr_requirements dl dt,
  .dsr_requirements dl dd{width: 100%;}
  .dsr_requirements dl dt br{display: none;}
  .dsr_requirements dl dd > div > div{margin:0 auto 1em; width: 60%;}
  .dsr_requirements dl dd > div > p{width: 100%; font-size: 0.875em;}

}
@media screen and (max-width:430px){
  .dsr_wightbg{padding: 24px 8px 40px;}

  .dsr_flxttl p span{font-size: 0.75rem;}

  .dsr_requirements dl dd > *:nth-last-child(n+2){margin-bottom: 8px;}
  .dsr_requirements dl dd > div > p{text-align: left;}

  .dsr_mvarea h2 span{display: block;}
  .dsr_wrap_movie div {width: 90%;}


}