:root {
  --black: #333;
  --white: #fff;
  --pink: #E4007F;
  --lightpink: #ED91C5;
  --yellow: #FFF23F;
  --gray: #999;
  --gray1: #C2C2C2;
  --gray3: #EBEBEB;
}

#kv {
  position: relative;
  z-index: 1;
}
#kv .kv-video-wrap {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  background-color: var(--yellow);
}
#kv .kv-video-wrap img {
  width: 100%;
  max-width: 100vw;
  aspect-ratio: 16/9;
}
#kv .kv-video-movie {
  max-width: 1440px;
  margin: auto;
}
#kv .kv-video-movie img {
  width: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#kv .kv-video-movie video {
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 16/9;
}
#kv .kv-btns {
  position: absolute;
}
#kv .kv-btns.btn-skipmovie {
  top: min(4.854368932%, 30px);
  right: min(3.0769230769%, 30px);
}
#kv .kv-btns.btn-skipmovie button {
  width: min(80vw, 126px);
  padding: 0.8em 0;
  font-size: 12px;
  color: var(--pink);
  text-indent: -8px;
  background: url("../../../assets/img/common/icon-skip.svg") no-repeat calc(100% - 1em) 50%/8px auto var(--white);
  border: solid 1px var(--pink);
}
#kv .kv-btns.btn-quiz {
  position: absolute;
  bottom: min(5%, 50px);
  display: block;
  margin-left: 50vw;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
#kv .kv-btns.btn-quiz a {
  width: min(43.5897435897vw, 354px);
  padding: 0.38em 0 0.52em;
  font-size: min(5.1282051282vw, 36px);
  font-weight: bold;
  color: var(--white);
  letter-spacing: 1px;
  background-color: var(--pink);
  border: solid 3px var(--white);
}
#kv .kv-btns button, #kv .kv-btns a {
  position: relative;
  z-index: 2;
  display: block;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  border-radius: 50px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#kv .kv-btns button:hover, #kv .kv-btns a:hover {
  color: var(--white);
  background-color: var(--lightpink);
}

#check .quiz {
  padding: 0 20px;
  margin: 40px auto;
}
@media screen and (max-width: calc(768px - 1px)) {
  #check .quiz {
    padding: 0;
  }
}
#check .quiz-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: calc(768px - 1px)) {
  #check .quiz-wrap {
    gap: 0 16px;
  }
}
#check .quiz-btns {
  width: 448px;
  text-align: center;
}
@media screen and (max-width: calc(768px - 1px)) {
  #check .quiz-btns {
    width: 160px;
  }
}
#check .quiz-btns a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
#check .quiz-btns a img {
  width: 100%;
  vertical-align: bottom;
}
#check .quiz-btns a:hover::before {
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.5) translate(50%, 50%);
      -ms-transform: scale(0.5) translate(50%, 50%);
          transform: scale(0.5) translate(50%, 50%);
}
#check .quiz-btns.btn-quiz a:hover::before {
  content: url("../img/lp/btn-quiz-re.png");
}
@media screen and (max-width: calc(768px - 1px)) {
  #check .quiz-btns.btn-quiz a:hover::before {
    content: url("../img/lp/btn-quiz-re-sp.png");
  }
}
#check .quiz-btns.btn-challenge a:hover::before {
  content: url("../img/lp/btn-challenge-re.png");
}
@media screen and (max-width: calc(768px - 1px)) {
  #check .quiz-btns.btn-challenge a:hover::before {
    content: url("../img/lp/btn-challenge-re-sp.png");
  }
}

#contents {
  overflow: hidden;
}
#contents .content .about {
  background-color: var(--pink);
}
#contents .content .about-wrap {
  position: relative;
  max-width: 1440px;
  min-height: 905px;
  margin: auto;
  background: url("../img/lp/about-bg.png") no-repeat min(11.1111111111%, 160px) clamp(14.8611111111%, 14.8611111111vw, 214px)/min(31.1111111111%, 448px) auto;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-wrap {
    min-height: 1238px;
    padding-bottom: 60px;
    background: url("../img/lp/about-bg.png") no-repeat 50% 4.8465266559%/222px auto;
  }
}
#contents .content .about-ttl {
  position: absolute;
  top: clamp(5.5555555556%, 5.5555555556vw, 80px);
  left: min(17.3611111111%, 250px);
  z-index: 1;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-ttl {
    top: 43px;
    left: 6.9230769231%;
  }
}
#contents .content .about-ttl img {
  width: clamp(33.2638888889%, 33.2638888889vw, 479px);
  max-width: 479px;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-ttl img {
    width: 64.1025641026%;
    min-width: 250px;
  }
}
#contents .content .about-content {
  position: absolute;
  top: 140px;
  right: min(11.1111111111%, 160px);
  z-index: 0;
  width: min(44.4444444444%, 640px);
  max-width: 640px;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content {
    top: 30.0484652666%;
    right: -50%;
    left: 50%;
    min-width: 100vw;
    max-width: min(95.3846153846%, 372px);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
#contents .content .about-content-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  width: clamp(44.4444444444%, 44.4444444444vw, 640px);
  max-width: 640px;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content-lists {
    width: 336px;
    max-width: 336px;
    margin: auto;
  }
}
#contents .content .about-content-lists-item {
  width: clamp(44.4444444444%, 44.4444444444vw, 544px);
  max-width: 544px;
}
#contents .content .about-content-lists-item a {
  color: var(--pink);
  text-decoration: underline;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
#contents .content .about-content-lists-item a:hover {
  color: var(--lightpink);
  text-decoration: none;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content-lists-item {
    width: 336px;
    max-width: 336px;
  }
}
#contents .content .about-content-lists-item:first-of-type .about-list-item {
  background: url("../img/lp/about-text-bg1.png") no-repeat 100% 100%/min(36.7647058824%, 200px) auto var(--white);
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content-lists-item:first-of-type .about-list-item {
    min-height: 269px;
    background: url("../img/lp/about-text-bg1.png") no-repeat 50% 100%/145px auto var(--white);
  }
}
#contents .content .about-content-lists-item:last-of-type {
  margin-left: clamp(6.6666666667%, 6.6666666667vw, 96px);
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content-lists-item:last-of-type {
    margin-left: auto;
  }
}
#contents .content .about-content-lists-item:last-of-type .about-list-item {
  padding: clamp(2.2222222222%, 2.2222222222vw, 32px) clamp(2.2222222222%, 2.2222222222vw, 32px) clamp(2.2222222222%, 2.2222222222vw, 32px) clamp(13.1944444444%, 13.1944444444vw, 190px);
  background: url("../img/lp/about-text-bg2.png") no-repeat 0 100%/min(36.7647058824%, 200px) auto var(--white);
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-content-lists-item:last-of-type .about-list-item {
    min-height: 360px;
    padding: 16px 25px;
    background: url("../img/lp/about-text-bg2.png") no-repeat 50% 100%/145px auto var(--white);
  }
}
#contents .content .about-list-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 120px;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.33;
  color: var(--yellow);
  text-align: center;
  border: solid 3px var(--white);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-list-ttl {
    height: 80px;
    font-size: 22px;
    line-height: 1.36;
    border-radius: 15px 15px 0 0;
  }
}
#contents .content .about-list-item {
  min-height: 205px;
  padding: clamp(2.2222222222%, 2.2222222222vw, 32px) clamp(13.1944444444%, 13.1944444444vw, 190px) clamp(2.2222222222%, 2.2222222222vw, 32px) clamp(2.2222222222%, 2.2222222222vw, 32px);
  font-weight: bold;
  line-height: 1.625;
  background-color: var(--white);
  border: solid 3px var(--white);
  border-top: 0;
  border-radius: 0 0 30px 30px;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .about-list-item {
    padding: 16px 25px;
    font-size: 15px;
    border-radius: 0 0 15px 15px;
  }
}
#contents .content .notice {
  background-color: var(--yellow);
}
#contents .content .notice-wrap {
  position: relative;
  max-width: 1440px;
  min-height: clamp(104.4444444444%, 104.4444444444vh, 1504px);
  padding: 80px 0;
  margin: auto;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .notice-wrap {
    min-height: 1105px;
    padding: 60px 0;
  }
}
#contents .content .notice-content {
  max-width: 926px;
  margin: auto;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .notice-content {
    max-width: 336px;
  }
}
#contents .content .notice-content .btns {
  margin-top: 56px;
}
#contents .content .notice-content .btns .btn {
  display: block;
  width: 90%;
  max-width: 448px;
  padding: 20px 0;
  margin: 0 auto 72px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--white);
  text-align: center;
  background-color: var(--pink);
  border-radius: 50px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
@media screen and (max-width: calc(768px - 1px)) {
  #contents .content .notice-content .btns .btn {
    max-width: 286px;
    margin: 0 auto 40px;
    font-size: 20px;
  }
}
#contents .content .notice-content .btns .btn:hover {
  background-color: var(--lightpink);
}

.modal__wrap {
  aspect-ratio: 16/9;
}
@media screen and (max-width: calc(768px - 1px)) {
  .modal__close {
    top: -8vw;
    right: -4vw;
  }
}
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1002;
  width: 920px;
  max-width: 95%;
  aspect-ratio: 16/9;
  padding: 0;
  background: #000;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.modal__video-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.modal__video-container video {
  z-index: 1005;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .modal__video-container video {
    width: 100%;
    aspect-ratio: 16/9;
  }
}
@media screen and (max-width: calc(768px - 1px)) {
  .modal__video-container video {
    width: 103%;
    height: 103%;
  }
}