@charset "utf-8";

#catch {
  padding-bottom: min(8.9vw, 100px);
  background-color: #fff;
  background-image: url(../img/catch_bg_sp.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
#catch_ttl {
  margin: max(-1.4vw, -20px) auto 0;
  width: 85%;
  max-width: 976px;
}
.catch_txt {
  margin: min(1vw, 12px) auto 0;
  width: 92%;
  max-width: 1032px;
}
.catch_txt2 {
  margin-top: min(3.94vw, 60px);
  font-size: min(3.4vw, 1.625rem);
  text-align: center;
}
.catch_img {
  margin: 7.57vw auto 0;
  max-width: 1920px;

}
.btn {
  margin: min(8.9vw, 100px) auto 0;
  width: 65%;
  max-width: 650px;
}

#ad_movie {
  padding: min(13vw, 148px) 0;
  background-image: url(../img/ad_movie_bg_sp.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.movie {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.movie iframe {
  width: 100%;
  height: 100%;
}

#about {
  padding-top: min(12.85vw, 148px);
  background-image: url(../img/about_bg_sp.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.logo {
  margin: 0 auto;
  width: 70%;
  max-width: 488px;
}
#about_ttl {
  margin: min(7.28vw, 84px) auto 0;
  width: 60%;
  max-width: 448px;
}
.about_txt {
  margin: min(5.28vw, 64px) 0 auto;
  font-size: min(3.3vw, 1.625rem);
  text-align: center;
}
.about_kc {
  margin: min(5.22vw, 52px) 0 auto;
  display: flex;
  gap: min(2.42vw, 28px);
}
.about_kc li {
  flex: 1;
}
#about .movie {
  margin-top: min(12vw, 138px);
  z-index: 1;
}
.about_img {
  margin-top: max(-2.36vw, -28px);
}

.guidelines_wrap  {
  overflow-x: hidden;
}
.guidelines_wrap .wrap {
  padding: min(13.14vw, 154px) 0;
}
#guidelines dl:not(:first-of-type) {
  margin-top: min(13vw, 154px);
}
#guidelines dl:last-of-type {
  margin-bottom: min(20vw, 214px);
}
#guidelines dt img,
.faq_ttl img {
  margin: 0 auto;
  width: auto;
  height: 6.5vw;
  max-height: 54px;
}
#guidelines dd,
.faq_list {
  margin-top: min(4.28vw, 50px);
}
#guidelines .area {
  position: relative;
}
#guidelines .area_map {
  width: 110%;
  position: absolute;
  bottom: -8%;
  left: 12%;
  z-index: 1;
}

#faq {
  margin-top: min(13vw, 148px);
}
.faq_list {
  font-size: .75rem;
  line-height: 1.5;
}
.faq_list details {
  background: #ededed;
}
.faq_list details:not(:first-of-type) {
  margin-top: 1em;
}
.faq_list summary {
  padding: 1em;
  font-weight: 700;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
  cursor: pointer;
}
.faq_list summary::before,
.faq_list summary::after {
  content: '';
  width: 1em;
  border-bottom: 1px solid var(--txt-color);
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.faq_list summary::before {
  transform: rotate(-90deg);
  transition: .3s;
}
.faq_list details[open] summary {
  color: #fff;
  background: var(--gradient);
}
.faq_list details[open] summary::before,
.faq_list details[open] summary::after {
  border-bottom-color: #fff;
}
.faq_list details[open] summary::before {
  transform: rotate(0deg);
}
.faq_list summary p {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
.faq_list summary p::before,
.faq_list .answer::before {
  content: '';
  margin-top: .3em;
  width: 1em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
}
.faq_list summary p::before {
  aspect-ratio: 22 / 29;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.38 33.88'%3E%3Cpath d='M13.55 31.94c-1.98-1.3-3.47-3.03-4.45-5.2-2.8-.63-5.02-2.11-6.65-4.44S0 16.99 0 13.38c0-2.8.5-5.2 1.49-7.21s2.39-3.53 4.18-4.58C7.47.54 9.55.01 11.93.01s4.47.52 6.27 1.58c1.8 1.05 3.19 2.58 4.18 4.6s1.49 4.42 1.49 7.19q0 5.115-2.19 8.52c-1.46 2.28-3.46 3.81-6 4.6.56.84 1.35 1.46 2.36 1.85 1.02.4 2.11.59 3.27.59 1.03 0 2.01-.16 2.94-.49L25.37 33c-1.12.58-2.71.88-4.76.88-2.73 0-5.09-.65-7.07-1.94-1.98-1.3-3.47-3.03-4.45-5.2Zm2.46-12.29c.99-1.5 1.49-3.6 1.49-6.28 0-2.5-.5-4.46-1.49-5.88q-1.485-2.13-4.08-2.13c-2.595 0-3.08.71-4.06 2.12s-1.47 3.38-1.47 5.9q0 4.065 1.47 6.3c1.47 2.235 2.33 2.24 4.06 2.24s3.09-.75 4.08-2.26Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.38 33.88'%3E%3Cpath d='M13.55 31.94c-1.98-1.3-3.47-3.03-4.45-5.2-2.8-.63-5.02-2.11-6.65-4.44S0 16.99 0 13.38c0-2.8.5-5.2 1.49-7.21s2.39-3.53 4.18-4.58C7.47.54 9.55.01 11.93.01s4.47.52 6.27 1.58c1.8 1.05 3.19 2.58 4.18 4.6s1.49 4.42 1.49 7.19q0 5.115-2.19 8.52c-1.46 2.28-3.46 3.81-6 4.6.56.84 1.35 1.46 2.36 1.85 1.02.4 2.11.59 3.27.59 1.03 0 2.01-.16 2.94-.49L25.37 33c-1.12.58-2.71.88-4.76.88-2.73 0-5.09-.65-7.07-1.94-1.98-1.3-3.47-3.03-4.45-5.2Zm2.46-12.29c.99-1.5 1.49-3.6 1.49-6.28 0-2.5-.5-4.46-1.49-5.88q-1.485-2.13-4.08-2.13c-2.595 0-3.08.71-4.06 2.12s-1.47 3.38-1.47 5.9q0 4.065 1.47 6.3c1.47 2.235 2.33 2.24 4.06 2.24s3.09-.75 4.08-2.26Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--txt-color);
}
.faq_list details[open] summary p::before {
  background-color: #fff;
}
.faq_list .answer {
  padding: 1em;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
.faq_list .answer::before {
  aspect-ratio: 103 / 113;
  background-image: url(../img/a.svg);
}

.contact {
  margin-top: min(8.9vw, 100px);
  font-size: min(3.6vw, 1rem);
  text-align: center;
}
.contact a {
  color: #808080;
}

@media (min-width: 744px) {
  #catch {
    background-image: image-set(url(../img/catch_bg.png) 1x, url(../img/catch_bg@2x.png) 2x);
  }
  #ad_movie {
    background-image: image-set(url(../img/ad_movie_bg.png) 1x, url(../img/ad_movie_bg@2x.png) 2x);
  }
  .faq_list {
    font-size: 1rem;
  }
}


@media (min-width: 1280px) {
  #catch {
    background-size: auto;
  }
  .catch_img {
    margin-top: 4vw;
  }
  #about {
    background-image: image-set(url(../img/about_bg.png) 1x, url(../img/about_bg@2x.png) 2x);
    background-size: auto;
  }
  #guidelines .area_map {
    left: 20%;
  }
  .faq_list {
    font-size: 1.375rem;
  }
}


@media (min-width: 1441px) {
  .guidelines_wrap {
    background-image: image-set(url(../img/guidelines_bg.png) 1x, url(../img/guidelines_bg@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
}


@media (min-width: 1536px) {
  .catch_img {
    margin-top: 0;
  }
}