@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@100..900&family=RocknRoll+One&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a,
button {
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, background-image 0.3s ease, background 0.3s ease;
  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, background-image 0.3s ease, background 0.3s ease;
  color: #0B0000;
}
@media (any-hover: hover) {
  a:hover,
  button:hover {
    opacity: 0.6;
  }
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
@media screen and (max-width: 767px) {
  img {
    width: 100%;
  }
}

table {
  width: 100%;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=submit],
textarea {
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
  border-radius: 0;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus {
  outline: 0;
}

textarea {
  resize: vertical;
}
textarea:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: #767676;
}

::-moz-placeholder {
  color: #767676;
}

:-ms-input-placeholder {
  color: #767676;
}

::-ms-input-placeholder {
  color: #767676;
}

::placeholder {
  color: #767676;
}

/* ---------------------------------------
  html , body
-----------------------------------------*/
html {
  font-size: 62.5%;
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  color: #0B0000;
}
@media screen and (max-width: 1300px) {
  html {
    font-size: 0.7692307692vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.6666666667vw;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  overflow: auto;
  position: relative;
  background-color: #FFF1DD;
}
body.active {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .body_inner {
    overflow-x: hidden;
  }
}

/* ---------------------------------------
  .wrap
-----------------------------------------*/
.wrap {
  width: 100rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .wrap {
    width: 30rem;
  }
}

/* ---------------------------------------
  css animation
-----------------------------------------*/
.fadeUp {
  opacity: 0;
  -webkit-transform: translateY(60px);
          transform: translateY(60px);
  -webkit-transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
  transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.fadeUp.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.fadeLeft {
  opacity: 0;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
  -webkit-transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
  transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.fadeLeft.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.fadeRight {
  opacity: 0;
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  -webkit-transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
  transition: 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.fadeRight.active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.zoomIn {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.zoomIn.active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.clipPath {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  -webkit-transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.clipPath.active {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* ---------------------------------------
  menu
-----------------------------------------*/
.menu {
  position: fixed;
  top: 20px;
  right: 3.927rem;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  .menu {
    top: 1rem;
    right: 1.127rem;
  }
}

.btn_hamburger {
  width: 6rem;
  height: 6rem;
  border-radius: 3rem;
  z-index: 999;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  position: relative;
  background: #732F0A;
  cursor: pointer;
  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;
}
@media screen and (max-width: 767px) {
  .btn_hamburger {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
  }
}
.btn_hamburger .inner {
  width: 3.174rem;
  height: 1.6rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn_hamburger .inner {
    width: 2.4rem;
    height: 2rem;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .btn_hamburger .inner {
    width: 2.117rem;
    height: 1.3rem;
  }
}
.btn_hamburger span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  display: block;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  position: absolute;
}
.btn_hamburger span:nth-of-type(2) {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.btn_hamburger span:nth-of-type(3) {
  bottom: 0;
}
@media (any-hover: hover) {
  .btn_hamburger:hover {
    opacity: 0.6;
  }
}
.btn_hamburger.active span {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  background-color: #fff;
  top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .btn_hamburger.active span {
    top: 0.6rem;
  }
}
.btn_hamburger.active span:nth-of-type(1) {
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
}
.btn_hamburger.active span:nth-of-type(2) {
  display: none;
}
.btn_hamburger.active span:nth-of-type(3) {
  -webkit-transform: rotate(-45deg) translateY(-50%);
          transform: rotate(-45deg) translateY(-50%);
}

.hamburger {
  background: url(../img/bg_menu.png) no-repeat top/contain;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: opacity 0.4s ease 0s, -webkit-transform 0.4s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: opacity 0.4s ease 0s, -webkit-transform 0.4s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: opacity 0.4s ease 0s, transform 0.4s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  transition: opacity 0.4s ease 0s, transform 0.4s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s, -webkit-transform 0.4s cubic-bezier(0.45, 0.05, 0.3, 0.93) 0s;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
  width: 45.2rem;
  height: 100rem;
}
@media screen and (max-width: 767px) {
  .hamburger {
    width: 100vw;
    height: 100%;
    background: none;
    overflow-y: scroll;
    max-height: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0.958rem 0 1.286rem;
  }
}
.hamburger .btn_hamburger {
  position: absolute;
  right: 2.108rem;
  top: 2.173rem;
}
@media screen and (max-width: 767px) {
  .hamburger .btn_hamburger {
    right: 2.371rem;
    top: 2.16rem;
  }
}
.hamburger .nav_inner {
  padding: 0.989rem 2.732rem 0 3.645rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
  height: 100vh;
}
@media screen and (max-width: 767px) {
  .hamburger .nav_inner {
    width: 36.2rem;
    height: 74.6rem;
    background: url(../img/bg_menu_sp.png) no-repeat left top/100% auto;
    padding: 1.756rem 2.245rem 4.726rem;
    position: relative;
    overflow: hidden;
  }
}
.hamburger .logo_mh {
  width: 15.8rem;
}
@media screen and (max-width: 767px) {
  .hamburger .logo_mh {
    width: 13rem;
  }
}
.hamburger nav {
  margin-top: 4.909rem;
}
@media screen and (max-width: 767px) {
  .hamburger nav {
    margin-top: 2.611rem;
  }
}
.hamburger nav .list li {
  width: 27.8rem;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .hamburger nav .list li {
    width: 24.9rem;
    margin: 0 auto;
  }
}
.hamburger nav .list li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  display: block;
}
@media (any-hover: hover) {
  .hamburger nav .list li a:hover {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .hamburger nav .list li:nth-of-type(even) {
    margin-left: 0;
  }
}
.hamburger nav .list li + li {
  margin-top: 2rem;
}
.hamburger .logo_coco {
  width: 22rem;
  margin: 7.45rem auto 0;
}
@media screen and (max-width: 767px) {
  .hamburger .logo_coco {
    width: 19.7rem;
    margin-top: 7.517rem;
  }
}
.hamburger .copyright {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  line-height: 120%;
  margin-top: 2.2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .hamburger .copyright {
    margin-top: 1.979rem;
    font-size: 1.08rem;
  }
}
.hamburger.active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.bg_hamburger {
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
}
.bg_hamburger.active {
  display: block;
}

/* ---------------------------------------
  header
-----------------------------------------*/
header {
  height: 102px;
  padding: 0 3rem;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  header {
    height: 6rem;
    padding: 0 1.403rem;
  }
}
header .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
}
header .logo {
  width: 29.45rem;
}
@media screen and (max-width: 767px) {
  header .logo {
    width: 17rem;
  }
}

/* ---------------------------------------
  footer
-----------------------------------------*/
footer {
  background: #fff;
  padding: 3.9rem 0 9rem;
  border-top: solid 3px #D0DB54;
  position: relative;
}
@media screen and (max-width: 767px) {
  footer {
    border-top: none;
    padding: 9.869rem 0 0.5rem;
  }
}
footer .wrap {
  position: relative;
}
@media screen and (max-width: 767px) {
  footer .wrap {
    width: 100%;
  }
}
footer .logo {
  width: 27.8rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  footer .logo {
    padding-top: 3.1rem;
    width: 100%;
    border-top: solid 3px #D0DB54;
  }
}
@media screen and (max-width: 767px) {
  footer .logo img {
    width: 19.5rem;
    margin: 0 auto;
    display: block;
  }
}
footer .copyright {
  font-size: 1.2rem;
  text-align: center;
  color: #732F0A;
  margin-top: 4.5rem;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 767px) {
  footer .copyright {
    font-size: 1.1rem;
    margin-top: 3.2rem;
  }
}
footer .sns_list {
  position: absolute;
  top: 0.8rem;
  right: -1.22rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 1.3rem;
}
@media screen and (max-width: 767px) {
  footer .sns_list {
    top: -6.7rem;
    right: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
}
footer .sns_list li {
  width: 3.82rem;
}
@media screen and (max-width: 767px) {
  footer .sns_list li {
    width: 3.761rem;
  }
}
footer #pagetop {
  position: absolute;
  right: 4.184rem;
  top: -7.047rem;
  width: 14.2rem;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  footer #pagetop {
    right: 0.759rem;
    top: -5.915rem;
    width: 10.813rem;
  }
}
@media (any-hover: hover) {
  footer #pagetop:hover {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}

/* ---------------------------------------
  main
-----------------------------------------*/
main {
  display: block;
}

/* ---------------------------------------
  .bg
-----------------------------------------*/
.bg_01 {
  background: url(../img/bg_mv_top.png) no-repeat top/100% auto, url(../img/bg_01.png) no-repeat 0 -1px/100% auto;
  padding-bottom: 32.233rem;
}
@media screen and (max-width: 767px) {
  .bg_01 {
    background: url(../img/bg_mv_top_sp.png) no-repeat top/100% auto, url(../img/bg_01_sp.png) no-repeat 0 -1px/100% auto;
    padding-bottom: 8rem;
  }
}

.bg_02 .circle,
.bg_03 .circle,
.bg_04 .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 17.1621621622vw;
  z-index: 1;
  opacity: 0.7;
  mix-blend-mode: multiply;
  background: url(../img/moyou.png) no-repeat top/100% auto;
}
@media screen and (max-width: 767px) {
  .bg_02 .circle,
  .bg_03 .circle,
  .bg_04 .circle {
    width: 300%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 16vw;
    background-image: url(../img/moyou_sp.png);
  }
}

.bg_02 {
  position: relative;
  margin-top: -25.7rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bg_02 {
    margin-top: -7rem;
  }
}
.bg_02::before {
  content: "";
  width: 100vw;
  height: 17.2972972973vw;
  background: url(../img/bg_2_top.png) no-repeat top/cover;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .bg_02::before {
    background-image: url(../img/bg_2_top_sp.png);
    height: 16.5333333333vw;
  }
}
.bg_02::after {
  content: "";
  width: 100vw;
  height: 100%;
  background: url(../img/bg_2.jpg) repeat top;
  position: absolute;
  left: 0;
  top: 17.1621621622vw;
}
@media screen and (max-width: 767px) {
  .bg_02::after {
    top: 16vw;
  }
}
.bg_02 .circle {
  top: 17.1621621622vw;
}
@media screen and (max-width: 767px) {
  .bg_02 .circle {
    top: 16vw;
  }
}

.bg_03 {
  position: relative;
  margin-top: -41rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bg_03 {
    margin-top: -19.048rem;
  }
}
.bg_03::before {
  content: "";
  width: 100vw;
  height: 6.3513513514vw;
  background: url(../img/bg_3_top.png) no-repeat top/cover;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .bg_03::before {
    height: 16.5333333333vw;
    background-image: url(../img/bg_3_top_sp.png);
  }
}
.bg_03::after {
  content: "";
  width: 100vw;
  height: 100%;
  background: url(../img/bg_3.jpg) repeat top;
  position: absolute;
  left: 0;
  top: 6.2162162162vw;
}
@media screen and (max-width: 767px) {
  .bg_03::after {
    width: 200%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 16vw;
  }
}
.bg_03 .circle {
  top: 6.2162162162vw;
}
@media screen and (max-width: 767px) {
  .bg_03 .circle {
    top: 16vw;
  }
}

.bg_04 {
  position: relative;
  margin-top: -41.4rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bg_04 {
    margin-top: -20.3rem;
  }
}
.bg_04::before {
  content: "";
  width: 100vw;
  height: 6.4189189189vw;
  background: url(../img/bg_4_top.png) no-repeat top/cover;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .bg_04::before {
    height: 16.5333333333vw;
    background-image: url(../img/bg_4_top_sp.png);
  }
}
.bg_04::after {
  content: "";
  width: 100vw;
  height: 100%;
  background: url(../img/bg_4.jpg) repeat top;
  position: absolute;
  left: 0;
  top: 6.2837837838vw;
}
@media screen and (max-width: 767px) {
  .bg_04::after {
    top: 4.0540540541vw;
  }
}
.bg_04 .circle {
  top: 6.2837837838vw;
}
@media screen and (max-width: 767px) {
  .bg_04 .circle {
    top: 4.0540540541vw;
  }
}

/* ---------------------------------------
  #mv
-----------------------------------------*/
#mv {
  padding-top: 3.5810810811vw;
}
@media screen and (max-width: 767px) {
  #mv {
    padding-top: 12.5333333333vw;
  }
}
@media screen and (max-width: 767px) {
  #mv .wrap {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #mv .ttl_img {
    width: 36.436rem;
    margin: 0 auto;
  }
}
#mv .campaign_box {
  width: 60.7rem;
  height: 4.7rem;
  background: url(../img/bg_campaign.png) no-repeat center/contain;
  margin: 1.612rem auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "RocknRoll One", sans-serif;
  padding-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  #mv .campaign_box {
    width: 30.3rem;
    height: 4.8rem;
    background-image: url(../img/bg_campaign_sp.png);
    margin-top: 1.495rem;
    padding-top: 0;
  }
}
#mv .campaign_box .cm_ttl {
  font-size: 1.8rem;
  color: #fff;
  line-height: 180%;
  padding-left: 1.826rem;
  letter-spacing: -0.05em;
}
@media screen and (max-width: 767px) {
  #mv .campaign_box .cm_ttl {
    font-size: 1.199rem;
    padding-left: 1.257rem;
    padding-top: 1.4rem;
  }
}
#mv .campaign_box .cm_detail {
  font-size: 2rem;
  color: #D4261A;
  line-height: 180%;
  padding-left: 3.02rem;
}
@media screen and (max-width: 767px) {
  #mv .campaign_box .cm_detail {
    font-size: 1.4rem;
    line-height: 140%;
    padding-left: 2.941rem;
    padding-top: 0.5rem;
  }
}

/* ---------------------------------------
  .anc_box
-----------------------------------------*/
.anc_box {
  margin-top: 9.253rem;
}
@media screen and (max-width: 767px) {
  .anc_box {
    margin-top: 3.485rem;
  }
}
@media screen and (max-width: 767px) {
  .anc_box .wrap {
    width: 35.379rem;
  }
}
.anc_box .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .anc_box .list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.anc_box .list a {
  display: block;
}
@media screen and (max-width: 767px) {
  .anc_box .list li {
    width: 17.3rem;
  }
}
.anc_box .list li a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
@media (any-hover: hover) {
  .anc_box .list li a:hover {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
    opacity: 1;
  }
}
.anc_box .list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  .anc_box .list li:nth-of-type(1) {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .anc_box .list li:nth-of-type(1) a {
    display: block;
    width: 17.3rem;
    margin: 0 auto;
  }
}
.anc_box .list li:nth-of-type(2) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.anc_box .list li:nth-of-type(3) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
.anc_box .list li:nth-of-type(n+2) {
  margin-top: 0.783rem;
}

/* ---------------------------------------
  #about
-----------------------------------------*/
#about {
  margin: 9.423rem auto 0;
  width: 111.8rem;
  height: 53.1rem;
  background: url(../img/bg_about.png) no-repeat center/cover;
  position: relative;
  padding-top: 7.5rem;
}
@media screen and (max-width: 767px) {
  #about {
    margin-top: 6.805rem;
    width: 34.6rem;
    height: 59.4rem;
    background-image: url(../img/bg_about_sp.png);
    padding-top: 4.68rem;
  }
}
#about .ttl {
  width: 62.825rem;
  position: absolute;
  left: 50%;
  top: -6.064rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  #about .ttl {
    width: 31.294rem;
    top: -4.498rem;
  }
}
#about .ttl.active {
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
}
#about .logo_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
@media screen and (max-width: 767px) {
  #about .logo_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#about .logo_box .logo_mhw {
  width: 41.6rem;
}
@media screen and (max-width: 767px) {
  #about .logo_box .logo_mhw {
    width: 22.6rem;
  }
}
#about .logo_box .logo_x {
  width: 12.8rem;
  margin-left: 2.092rem;
}
@media screen and (max-width: 767px) {
  #about .logo_box .logo_x {
    width: 5.929rem;
    margin-left: 0;
    margin-top: 0.637rem;
  }
}
#about .logo_box .logo_coco {
  width: 37.616rem;
  margin-left: 2.266rem;
}
@media screen and (max-width: 767px) {
  #about .logo_box .logo_coco {
    width: 22.826rem;
    margin-left: 0;
    margin-top: 1.309rem;
  }
}
#about .txt {
  font-family: "RocknRoll One", sans-serif;
  font-size: 2.465rem;
  line-height: 200%;
  text-align: center;
  margin-top: -1.5rem;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
@media screen and (max-width: 767px) {
  #about .txt {
    font-size: 1.4rem;
    line-height: 180%;
    margin-top: 1.699rem;
  }
}
#about .point_01 {
  width: 31.1rem;
  position: absolute;
  left: -5.236rem;
  bottom: -1.992rem;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
@media screen and (max-width: 767px) {
  #about .point_01 {
    width: 16.43rem;
    left: 3.451rem;
    bottom: 3.742rem;
  }
}
#about .point_02 {
  width: 21.7rem;
  position: absolute;
  right: 1.84rem;
  bottom: -1.405rem;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
@media screen and (max-width: 767px) {
  #about .point_02 {
    width: 11.621rem;
    right: 5.537rem;
    bottom: 3.3rem;
  }
}

/* ---------------------------------------
  .sub_ttl
-----------------------------------------*/
.sub_ttl {
  width: 55.4rem;
  height: 6.9rem;
  line-height: 6.9rem;
  font-family: "RocknRoll One", sans-serif;
  font-size: 2.465rem;
  text-align: center;
  color: #FFE1AD;
  background: url(../img/bg_ttl.png) no-repeat top/contain;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .sub_ttl {
    width: 29.8rem;
    height: 4.6rem;
    line-height: 4.6rem;
    font-size: 2.2rem;
    background-image: url(../img/bg_ttl_sp.png);
  }
}

/* ---------------------------------------
  .step_list
-----------------------------------------*/
@media screen and (max-width: 767px) {
  .step_list_box {
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 1.326rem;
    scrollbar-color: #732F0A #732F0A;
    position: relative;
  }
}

.step_list {
  margin-top: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 4.481rem;
}
@media screen and (max-width: 767px) {
  .step_list {
    margin-top: 2.653rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0 2.8rem;
  }
}
.step_list li {
  width: 30.6rem;
  height: 30.5em;
  background: url(../img/bg_step.png) no-repeat top/contain;
  position: relative;
}
@media screen and (max-width: 767px) {
  .step_list li {
    width: 25rem;
    height: 25rem;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}
.step_list li .num {
  width: 15.8rem;
  height: 6.9rem;
  background: url(../img/img_step.png) no-repeat top/contain;
  font-size: 2.055rem;
  color: #fff;
  padding-left: 4.3rem;
  padding-top: 1.4rem;
  font-family: "RocknRoll One", sans-serif;
  position: absolute;
  top: -1.754rem;
  left: 7.586rem;
}
@media screen and (max-width: 767px) {
  .step_list li .num {
    width: 10.4rem;
    height: 4.5rem;
    font-size: 1.632rem;
    padding-left: 2.3rem;
    padding-top: 0.6rem;
    top: -0.615rem;
    left: 7.18rem;
  }
}
.step_list li .num span {
  font-size: 3.287rem;
}
@media screen and (max-width: 767px) {
  .step_list li .num span {
    font-size: 2.611rem;
  }
}
.step_list li .txt {
  font-size: 1.644rem;
  text-align: center;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  .step_list li .txt {
    font-size: 1.4rem;
  }
}
.step_list li .att {
  font-size: 1.233rem;
  text-align: center;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  .step_list li .att {
    margin-top: 0.8rem;
  }
}
.step_list li .img {
  position: absolute;
}
.step_list li:nth-of-type(n+2)::before {
  content: "";
  width: 3.5rem;
  height: 6.6rem;
  background: url(../img/icon_slide_next.svg) no-repeat top/contain;
  position: absolute;
  left: -4rem;
  top: 11.235rem;
}
@media screen and (max-width: 767px) {
  .step_list li:nth-of-type(n+2)::before {
    width: 2.8rem;
    height: 5.1rem;
    left: -2.8rem;
    top: 10rem;
  }
}

.scroll_hint_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.scroll_hint_box .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12rem;
  height: auto;
  border-radius: 1.5rem;
  background: rgba(43, 43, 43, 0.85);
  padding: 3.75rem 0 2.6rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
.scroll_hint_box .icon::before {
  content: "";
  width: 3.6rem;
  height: 4.6rem;
  background-image: url(../img/icn_scroll_hint_hand_white.svg);
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.scroll_hint_box .icon::after {
  content: "";
  top: 2.1rem;
  left: 50%;
  margin-left: 0;
  width: 5.65rem;
  height: 1.75rem;
  background-image: url(../img/icn_scroll_hint_arrow_white.svg);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}
.scroll_hint_box .icon .txt {
  font-size: 0;
  margin-top: 1rem;
  width: 100%;
  height: 1rem;
  position: relative;
  color: #FFF;
  display: block;
}
.scroll_hint_box .icon .txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 9.35rem;
  height: 1rem;
  background: url(../img/txt_scrollable_white.svg) center/contain no-repeat;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.scroll_hint_box.hide {
  opacity: 0;
}
.scroll_hint_box.active .icon {
  opacity: 1;
}
.scroll_hint_box.active .icon::before {
  -webkit-animation: scroll-hint-appear 1.2s linear;
          animation: scroll-hint-appear 1.2s linear;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
  display: inline-block;
}

@-webkit-keyframes scroll-hint-appear {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    opacity: 0;
  }
}

@keyframes scroll-hint-appear {
  0% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    opacity: 0;
  }
}
/* ---------------------------------------
  .btn_box
-----------------------------------------*/
.btn_box {
  width: 39.037rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .btn_box {
    width: 100%;
  }
}
.btn_box .img {
  position: absolute;
}
.btn_box .btn {
  width: 100%;
}
.btn_box .btn a {
  position: relative;
  display: block;
}
.btn_box .btn a span {
  width: 100%;
  height: 7.396rem;
  border-radius: 5.057rem;
  background-color: #D4261A;
  color: #FFE1AD;
  font-size: 2.26rem;
  font-family: "RocknRoll One", sans-serif;
  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;
  border: solid 3px #732F0A;
  position: relative;
  z-index: 1;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
@media screen and (max-width: 767px) {
  .btn_box .btn a span {
    height: 5.498rem;
    border-radius: 3.759rem;
    font-size: 1.8rem;
    border-width: 2px;
  }
}
.btn_box .btn a span::after {
  content: "";
  width: 1.6rem;
  height: 3.1rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 2.541rem;
  background: url(../img/icon_btn.svg) no-repeat top/contain;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .btn_box .btn a span::after {
    width: 1.2rem;
    height: 2.3rem;
    right: 1.928rem;
  }
}
.btn_box .btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 5.057rem;
  background-color: #5A2508;
  position: absolute;
  right: -0.411rem;
  bottom: -0.616rem;
}
@media screen and (max-width: 767px) {
  .btn_box .btn a::before {
    border-radius: 3.759rem;
    bottom: -0.458rem;
  }
}
@media (any-hover: hover) {
  .btn_box .btn a:hover {
    opacity: 1;
  }
}
.btn_box .btn a:hover span {
  -webkit-transform: translateY(0.616rem) translateX(0.411rem);
          transform: translateY(0.616rem) translateX(0.411rem);
}
.btn_box .btn.black a span {
  color: #fff;
  background-color: #0B0000;
  border-color: #0B0000;
}
.btn_box .btn.black a span::after {
  background-image: url(../img/icon_btn_white.svg);
}
.btn_box .btn.black a::before {
  background-color: #FFCF3B;
}
.btn_box .att {
  text-align: center;
  font-size: 1.233rem;
  line-height: 170%;
  color: #D4261A;
  margin-top: 1.75rem;
}
@media screen and (max-width: 767px) {
  .btn_box .att {
    font-size: 1.198rem;
    line-height: 150%;
    margin-top: 0.871rem;
  }
}

/* ---------------------------------------
  #quest1
-----------------------------------------*/
#quest1 {
  padding-top: 20.2472972973vw;
  overflow: hidden;
  padding-bottom: 51.362rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #quest1 {
    padding-top: 33.16vw;
    padding-bottom: 30.089rem;
  }
}
#quest1 .bg_box {
  background: url(../img/bg_quest01.png) no-repeat top/contain;
  width: 123.769rem;
  height: 210.572rem;
  margin: 0 auto;
  position: relative;
  padding: 7.96rem 0 12.108rem;
}
@media screen and (max-width: 767px) {
  #quest1 .bg_box {
    background-image: url(../img/bg_quest01_sp.png);
    width: 34.5rem;
    height: 219.3rem;
    padding: 5.194rem 0 7.89rem;
    margin: 0 0 0 1.327rem;
  }
}
#quest1 .point_top {
  position: absolute;
  right: -13.7rem;
  top: -31.009rem;
  width: 48.5rem;
}
@media screen and (max-width: 1500px) {
  #quest1 .point_top {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest1 .point_top {
    width: 16.808rem;
    height: 17.8rem;
    top: -10.127rem;
    right: -2.199rem;
  }
}
#quest1 .point_bottom {
  position: absolute;
  left: -21.176rem;
  bottom: -12.873rem;
  width: 56.8rem;
}
@media screen and (max-width: 1500px) {
  #quest1 .point_bottom {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest1 .point_bottom {
    left: -5.527rem;
    bottom: -3.107rem;
    width: 21.42rem;
  }
}
#quest1 .point_bottom2 {
  position: absolute;
  right: -13.632rem;
  bottom: -32.8rem;
  width: 42rem;
  z-index: 1;
}
@media screen and (max-width: 1500px) {
  #quest1 .point_bottom2 {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest1 .point_bottom2 {
    right: -3.661rem;
    bottom: -25.7rem;
    width: 18.612rem;
  }
}
#quest1 .ttl_box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#quest1 .ttl_box .sec_ttl {
  width: 59.2rem;
}
@media screen and (max-width: 767px) {
  #quest1 .ttl_box .sec_ttl {
    width: 31.1rem;
    margin-left: -0.459rem;
  }
}
#quest1 .ttl_box .point_01 {
  position: absolute;
  left: -39.7rem;
  top: 7.575rem;
  width: 44.3rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest1 .ttl_box .point_01 {
    left: -3.1rem;
    top: auto;
    bottom: -13.221rem;
    width: 29.032rem;
    z-index: 1;
  }
}
#quest1 .ttl_box .point_02 {
  position: absolute;
  right: -17.4rem;
  top: 21.2rem;
  width: 21.3rem;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest1 .ttl_box .point_02 {
    right: -1.018rem;
    top: auto;
    bottom: -12.056rem;
    width: 9.747rem;
  }
}
#quest1 .lead {
  font-family: "RocknRoll One", sans-serif;
  font-size: 2.26rem;
  line-height: 180%;
  letter-spacing: -0.05em;
  text-align: center;
  margin-top: 5.3rem;
}
@media screen and (max-width: 767px) {
  #quest1 .lead {
    margin-top: 14.906rem;
    font-size: 1.6rem;
  }
}
#quest1 .lead strong {
  font-size: 2.876rem;
  color: #D4261A;
  background-color: #FFCF3B;
}
@media screen and (max-width: 767px) {
  #quest1 .lead strong {
    font-size: 1.6rem;
  }
}
#quest1 .period_box {
  width: 74.1rem;
  height: 10.3rem;
  background: url(../img/bg_quest01_att.png) no-repeat top/contain;
  padding: 2.053rem 7.678rem 0 5.863rem;
  position: relative;
  margin: 3.314rem auto;
}
@media screen and (max-width: 767px) {
  #quest1 .period_box {
    width: 30.6rem;
    height: 18.6rem;
    margin-left: -0.12rem;
    background-image: url(../img/bg_quest01_att_sp.png);
    padding: 3.001rem 2.223rem 0 2.32rem;
    margin-top: 5.488rem;
  }
}
#quest1 .period_box .period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.644rem;
}
@media screen and (max-width: 767px) {
  #quest1 .period_box .period {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 1.4rem;
  }
}
#quest1 .period_box .period dt {
  font-family: "RocknRoll One", sans-serif;
  line-height: 170%;
}
#quest1 .period_box .period dd {
  margin-left: 0.229rem;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  #quest1 .period_box .period dd {
    margin-left: 0;
    margin-top: 1rem;
  }
}
#quest1 .period_box .point_01 {
  position: absolute;
  left: -1.841rem;
  top: 0.438rem;
  width: 5.6rem;
}
@media screen and (max-width: 767px) {
  #quest1 .period_box .point_01 {
    left: 0.259rem;
    top: -1.403rem;
    width: 7.338rem;
  }
}
#quest1 .period_box .point_02 {
  position: absolute;
  right: -7.123rem;
  top: -2.433rem;
  width: 14.5rem;
}
@media screen and (max-width: 767px) {
  #quest1 .period_box .point_02 {
    right: -0.98rem;
    top: -4.198rem;
    width: 7.96rem;
  }
}
#quest1 .slide_box {
  margin-top: 4.325rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box {
    margin-top: 8.418rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    position: relative;
  }
}
#quest1 .slide_box .slide_main {
  width: 37rem;
  margin-left: 10.8rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main {
    width: 23.57rem;
    margin: 0 auto;
  }
}
#quest1 .slide_box .slide_main .list .txt {
  font-family: "RocknRoll One", sans-serif;
  margin-top: 4.4rem;
  text-align: center;
  font-size: 1.8rem;
  line-height: 170%;
  color: #732F0A;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main .list .txt {
    margin-top: 3.44rem;
    font-size: 1.4rem;
  }
}
#quest1 .slide_box .slide_main .slick-dotted.slick-slider {
  margin-bottom: 0;
}
#quest1 .slide_box .slide_main .slick-prev,
#quest1 .slide_box .slide_main .slick-next {
  width: 3.6rem;
  height: 6.8rem;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  top: 15.188rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main .slick-prev,
  #quest1 .slide_box .slide_main .slick-next {
    width: 2.8rem;
    height: 5.3rem;
    top: 9.114rem;
  }
}
#quest1 .slide_box .slide_main .slick-prev::before,
#quest1 .slide_box .slide_main .slick-next::before {
  content: none;
}
#quest1 .slide_box .slide_main .slick-prev {
  background: url(../img/icon_slide_prev.svg) no-repeat top/contain;
  left: -4.3rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main .slick-prev {
    left: -3.461rem;
  }
}
#quest1 .slide_box .slide_main .slick-next {
  background: url(../img/icon_slide_next.svg) no-repeat top/contain;
  right: -4.3rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main .slick-next {
    right: -3.461rem;
  }
}
#quest1 .slide_box .slide_main .slick-dots {
  bottom: 4.5rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_main .slick-dots {
    bottom: auto;
    top: 24.49rem;
  }
}
#quest1 .slide_box .slide_main .slick-dots li {
  width: 1.4rem;
  height: 1.6rem;
  margin: 0 0.25rem;
}
#quest1 .slide_box .slide_main .slick-dots li button {
  width: 100%;
  height: 100%;
  background: url(../img/icon_slide_dot.svg) no-repeat top/contain;
}
#quest1 .slide_box .slide_main .slick-dots li button::before {
  content: none;
}
#quest1 .slide_box .slide_main .slick-dots li.slick-active button {
  background-image: url(../img/icon_slide_dot_active.svg);
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum {
    margin-top: 3.139rem;
    width: 100%;
  }
}
#quest1 .slide_box .slide_thum .thum_box {
  margin-left: 8.764rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .thum_box {
    margin-left: 0;
  }
}
#quest1 .slide_box .slide_thum .lead {
  font-family: "RocknRoll One", sans-serif;
  font-size: 1.849rem;
  line-height: 140%;
  letter-spacing: -0.01rem;
  color: #D4261A;
  -webkit-text-stroke: 3px #fff;
  text-stroke: 3px #fff;
  paint-order: stroke;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .lead {
    position: absolute;
    top: -4.4rem;
    left: 0;
    right: 0;
  }
}
#quest1 .slide_box .slide_thum .lead::before {
  content: "";
  width: 2.4rem;
  height: 2.7rem;
  background: url(../img/icon_quest01_slide01.svg) no-repeat top/contain;
  position: absolute;
  top: 0.2rem;
  left: -2.306rem;
}
#quest1 .slide_box .slide_thum .lead::after {
  content: "";
  width: 2.4rem;
  height: 2.6rem;
  background: url(../img/icon_quest01_slide02.svg) no-repeat top/contain;
  position: absolute;
  top: 0.3rem;
  right: -2rem;
}
#quest1 .slide_box .slide_thum .lead span {
  font-size: 2.876rem;
}
#quest1 .slide_box .slide_thum .list {
  width: 33.285rem;
  margin-top: 0.828rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .list {
    width: 27.6rem;
    margin: 0 auto;
  }
}
#quest1 .slide_box .slide_thum .list li {
  width: 10.273rem !important;
  margin-right: 1.233rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .list li {
    width: 8.5rem !important;
    margin-right: 1.034rem;
  }
}
#quest1 .slide_box .slide_thum .list li:nth-of-type(3n) {
  margin-right: 0;
}
#quest1 .slide_box .slide_thum .list li:nth-of-type(n+4) {
  margin-top: 1.233rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .list li:nth-of-type(n+4) {
    margin-top: 1.033rem;
  }
}
#quest1 .slide_box .slide_thum .att {
  width: 33.285rem;
  display: inline-block;
  font-size: 1.233rem;
  text-align: right;
  color: #732F0A;
  margin-top: 1.345rem;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .att {
    width: 27.6rem;
    margin: 0.656rem auto 0;
    display: block;
  }
}
#quest1 .slide_box .slide_thum .txt_secret {
  margin-top: 1.575rem;
  margin-left: 5.227rem;
  width: 39.6rem;
  height: 11.8rem;
  position: relative;
  background: url(../img/bg_quest01_secret.png) no-repeat top/contain;
  padding: 3.202rem 0 0 10.24rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .txt_secret {
    margin-top: 1.721rem;
    margin-left: 0.527rem;
    width: 29.3rem;
    height: 8.7rem;
    padding: 2.3rem 0 0 7.298rem;
  }
}
#quest1 .slide_box .slide_thum .txt_secret .txt {
  font-size: 1.849rem;
  line-height: 140%;
  color: #D4261A;
  font-family: "RocknRoll One", sans-serif;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .txt_secret .txt {
    font-size: 1.4rem;
  }
}
#quest1 .slide_box .slide_thum .txt_secret .point_01 {
  position: absolute;
  left: -0.852rem;
  top: -1.575rem;
  width: 9.4rem;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .txt_secret .point_01 {
    left: -0.388rem;
    top: -1.051rem;
    width: 6.869rem;
  }
}
#quest1 .slide_box .slide_thum .txt_secret .point_02 {
  position: absolute;
  right: -1.322rem;
  top: 0;
  width: 13em;
}
@media screen and (max-width: 767px) {
  #quest1 .slide_box .slide_thum .txt_secret .point_02 {
    right: -1.112rem;
    width: 7.533rem;
  }
}
#quest1 .slide_box .slide_thum .slick-track {
  -webkit-transform: unset !important;
          transform: unset !important;
}
#quest1 .slide_box .slide_thum .slick-current {
  position: relative;
}
#quest1 .slide_box .slide_thum .slick-current::before {
  content: "";
  width: 100%;
  height: 100%;
  border: solid 4px #D4261A;
  position: absolute;
  left: 0;
  top: 0;
}
#quest1 .howto {
  margin-top: 8rem;
}
@media screen and (max-width: 767px) {
  #quest1 .howto {
    margin-top: 4.034rem;
  }
}
#quest1 .howto .step_list li {
  padding-top: 6.6rem;
}
@media screen and (max-width: 767px) {
  #quest1 .howto .step_list li {
    padding-top: 4.1rem;
  }
}
#quest1 .howto .step_list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest1 .howto .step_list li:nth-of-type(1) {
    padding-top: 4.8rem;
  }
}
#quest1 .howto .step_list li:nth-of-type(1) .img {
  left: 8.985rem;
  bottom: 3.002rem;
  width: 13.7rem;
}
@media screen and (max-width: 767px) {
  #quest1 .howto .step_list li:nth-of-type(1) .img {
    left: 7.842rem;
    bottom: 2.662rem;
    width: 10.348rem;
  }
}
#quest1 .howto .step_list li:nth-of-type(2) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
#quest1 .howto .step_list li:nth-of-type(2) .img {
  left: 8.764rem;
  bottom: 0.183rem;
  width: 12.8rem;
}
@media screen and (max-width: 767px) {
  #quest1 .howto .step_list li:nth-of-type(2) .img {
    left: 7.472rem;
    bottom: -0.502rem;
    width: 9.5rem;
  }
}
#quest1 .howto .step_list li:nth-of-type(3) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
#quest1 .howto .step_list li:nth-of-type(3) .img {
  left: 8.193rem;
  bottom: 2.513rem;
  width: 15.5rem;
}
@media screen and (max-width: 767px) {
  #quest1 .howto .step_list li:nth-of-type(3) .img {
    left: 5.811rem;
    bottom: 0;
    width: 14.378rem;
  }
}
#quest1 .btn_box {
  margin-top: 10.639rem;
}
@media screen and (max-width: 767px) {
  #quest1 .btn_box {
    margin-top: 10.878rem;
  }
}
#quest1 .btn_box .img {
  top: -8.921rem;
  left: 10.575rem;
}
@media screen and (max-width: 767px) {
  #quest1 .btn_box .img {
    top: -8.334rem;
    left: 5.95rem;
  }
}

/* ---------------------------------------
  #quest1_modal
-----------------------------------------*/
#prize_acquisition {
  padding: 5rem 0;
}
#prize_acquisition .bg_box {
  width: 123.769rem;
  height: 104.296rem;
  background: url(../img/modal_bg.png) no-repeat top/contain;
  margin: 0 auto;
  padding: 7.739rem 0 10.806rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .bg_box {
    width: 34.445rem;
    height: 88.976rem;
    background-image: url(../img/modal_bg_sp.png);
  }
}
#prize_acquisition .ttl {
  width: 39.264rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .ttl {
    width: 20.993rem;
  }
}
#prize_acquisition .sub_ttl {
  margin-top: 2.848rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .sub_ttl {
    margin-top: 2.035rem;
    font-size: 1.8rem;
  }
}
#prize_acquisition .lead {
  font-family: "RocknRoll One", sans-serif;
  font-size: 2rem;
  line-height: 180%;
  letter-spacing: -0.05em;
  text-align: center;
  margin-top: 3.05rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .lead {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}
#prize_acquisition .lead strong {
  font-size: 2.4rem;
  color: #D4261A;
  background-color: #FFCF3B;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .lead strong {
    font-size: 1.6rem;
  }
}
#prize_acquisition .schedule {
  font-family: "RocknRoll One", sans-serif;
  font-size: 1.8rem;
  line-height: 140%;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .schedule {
    font-size: 1.4rem;
  }
}
#prize_acquisition .prize_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2rem;
  margin: 4.074rem auto 0;
  width: 47.4rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .prize_list {
    margin-top: 2.353rem;
    width: 100%;
    gap: 0.8rem 0;
  }
}
#prize_acquisition .prize_list li {
  width: 15rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .prize_list li {
    width: 9.5rem;
  }
}
#prize_acquisition .att_list {
  margin: 4.025rem auto 0;
  width: 84rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .att_list {
    width: 100%;
    margin-top: 2.373rem;
  }
}
#prize_acquisition .att_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.6rem;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .att_list li {
    font-size: 1.3rem;
  }
}
#prize_acquisition .att_list li::before {
  content: "※";
  margin-right: 1.056rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .att_list li::before {
    margin-right: 0;
  }
}
#prize_acquisition .mfp-close {
  display: none;
}
#prize_acquisition .btn_modal_close {
  position: absolute;
  right: -6.4rem;
  top: -2.387rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
  width: 6rem;
}
@media screen and (max-width: 767px) {
  #prize_acquisition .btn_modal_close {
    width: 4rem;
    right: -0.491rem;
    top: -4.5rem;
  }
}
@media (any-hover: hover) {
  #prize_acquisition .btn_modal_close:hover {
    opacity: 0.6;
  }
}

.mfp-bg {
  opacity: 0.6;
  background: #000;
}

/* ---------------------------------------
  #quest2
-----------------------------------------*/
#quest2 {
  padding-top: 12.1722972973vw;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #quest2 {
    padding-top: 28.16vw;
  }
}
#quest2 .bg_box {
  background: url(../img/bg_quest02.png) no-repeat top/contain;
  width: 123.784rem;
  height: 271.553rem;
  margin: 0 auto;
  position: relative;
  padding: 6.819rem 0 12.314rem;
}
@media screen and (max-width: 767px) {
  #quest2 .bg_box {
    background-image: url(../img/bg_quest02_sp.png);
    width: 34.468rem;
    height: 271.011rem;
    padding: 4.903rem 0 8.128rem;
  }
}
#quest2 .ttl_box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#quest2 .ttl_box .sec_ttl {
  width: 59.1rem;
}
@media screen and (max-width: 767px) {
  #quest2 .ttl_box .sec_ttl {
    width: 31.128rem;
    margin-left: 0.425rem;
  }
}
#quest2 .ttl_box .point_01 {
  position: absolute;
  left: -19.831rem;
  top: 16.41rem;
  width: 21.9rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest2 .ttl_box .point_01 {
    left: -0.766rem;
    top: auto;
    bottom: -7.101rem;
    width: 10.037rem;
  }
}
#quest2 .ttl_box .point_02 {
  position: absolute;
  right: -29.027rem;
  top: 0.91rem;
  width: 32.5rem;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest2 .ttl_box .point_02 {
    right: auto;
    left: 5.912rem;
    top: auto;
    bottom: -11.2rem;
    width: 27.6rem;
  }
}
#quest2 .lead {
  font-family: "RocknRoll One", sans-serif;
  font-size: 2.26rem;
  line-height: 180%;
  letter-spacing: -0.05em;
  text-align: center;
  margin-top: 3.727rem;
}
@media screen and (max-width: 767px) {
  #quest2 .lead {
    font-size: 1.6rem;
    margin-top: 10.846rem;
  }
}
#quest2 .lead strong {
  font-size: 2.876rem;
  color: #D4261A;
  background-color: #FFCF3B;
  padding: 0 1rem;
}
@media screen and (max-width: 767px) {
  #quest2 .lead strong {
    font-size: 1.6rem;
  }
}
#quest2 .period_box {
  width: 74.6rem;
  height: 17.2rem;
  background: url(../img/bg_quest02_att.png) no-repeat top/contain;
  padding: 2.051rem 12.315rem 0 5.973rem;
  position: relative;
  margin: 2.372rem auto 0;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box {
    width: 30.6rem;
    height: 28.1rem;
    padding: 3.001rem 2.223rem 0 2.32rem;
    margin-top: 4.688rem;
    margin-left: -0.552rem;
    background-image: url(../img/bg_quest02_att_sp.png);
  }
}
#quest2 .period_box .period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .period {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  #quest2 .period_box .period dt:nth-of-type(n+2),
  #quest2 .period_box .period dd:nth-of-type(n+2) {
    margin-top: 0.714rem;
  }
}
#quest2 .period_box .period dt {
  font-family: "RocknRoll One", sans-serif;
  line-height: 170%;
  font-size: 1.644rem;
  width: 18.109rem;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .period dt {
    font-size: 1.4rem;
    width: 100%;
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .period dt:nth-of-type(n+2) {
    margin-top: 2rem;
  }
}
#quest2 .period_box .period dd {
  margin-left: 0.229rem;
  line-height: 170%;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .period dd {
    margin-left: 0;
    margin-top: 0.2rem;
    font-size: 1.4rem;
  }
}
#quest2 .period_box .point_01 {
  position: absolute;
  left: -1.88rem;
  top: 3.305rem;
  width: 5.6rem;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .point_01 {
    left: 0.259rem;
    top: -1.403rem;
    width: 7.338rem;
  }
}
#quest2 .period_box .point_02 {
  position: absolute;
  right: -5.277rem;
  top: 2.517rem;
  width: 14.5rem;
}
@media screen and (max-width: 767px) {
  #quest2 .period_box .point_02 {
    right: -0.836rem;
    top: -3.3rem;
    width: 7.96rem;
  }
}
#quest2 .prize_box {
  margin-top: 5.592rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box {
    margin-top: 0;
  }
}
#quest2 .prize_box .list {
  margin-top: 5.178rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list {
    margin-top: 4.577rem;
  }
}
#quest2 .prize_box .list li {
  width: 50%;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li {
    width: 100%;
  }
}
#quest2 .prize_box .list li .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#quest2 .prize_box .list li .img_box {
  width: 20.6rem;
  border: solid 4px #732F0A;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .img_box {
    width: 13rem;
    border-width: 3px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}
#quest2 .prize_box .list li .txt_box {
  margin-left: 2.17rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .txt_box {
    margin-left: 1.605rem;
  }
}
#quest2 .prize_box .list li .course_box {
  margin-top: 1.71rem;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .course_box {
    margin-top: 0;
  }
}
#quest2 .prize_box .list li .course_box .course {
  width: 15.2rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .course_box .course {
    width: 12.5rem;
  }
}
#quest2 .prize_box .list li .course_box .people {
  position: absolute;
}
#quest2 .prize_box .list li .course_box .people._100 {
  width: 21.6rem;
  top: -8.3rem;
  right: -12.1rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .course_box .people._100 {
    width: 16.2rem;
    top: -7.036rem;
    right: -7.078rem;
  }
}
#quest2 .prize_box .list li .course_box .people._50 {
  width: 19.4rem;
  top: -7.7rem;
  right: -10.4rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .course_box .people._50 {
    width: 14.5rem;
    top: -6.281rem;
    right: -5.871rem;
  }
}
#quest2 .prize_box .list li .course_box .people._200 {
  width: 14rem;
  top: -2rem;
  right: -5.2rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .course_box .people._200 {
    width: 15rem;
    top: -3.992rem;
    right: -7.492rem;
  }
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .prize_name {
    font-size: 1.6rem;
    margin-top: 0.726rem;
  }
}
#quest2 .prize_box .list li .prize_name span {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .prize_name span {
    font-size: 1.4rem;
  }
}
#quest2 .prize_box .list li .att {
  font-size: 1.233rem;
  line-height: 170%;
  margin-top: 0.676rem;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li .att {
    font-size: 1.2rem;
    margin-top: 0.656rem;
  }
}
#quest2 .prize_box .list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li:nth-of-type(1) .prize_name {
    width: 13.4rem;
  }
}
#quest2 .prize_box .list li:nth-of-type(2) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li:nth-of-type(2) .prize_name {
    width: 11.7rem;
  }
}
#quest2 .prize_box .list li:nth-of-type(3) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li:nth-of-type(3) .prize_name {
    width: 13.1rem;
  }
}
#quest2 .prize_box .list li:nth-of-type(4) {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li:nth-of-type(4) .prize_name {
    width: 15.8rem;
  }
}
@media screen and (max-width: 767px) {
  #quest2 .prize_box .list li:nth-of-type(n+2) {
    margin-top: 3.9rem;
  }
}
@media screen and (min-width: 768px) {
  #quest2 .prize_box .list li:nth-of-type(n+3) {
    margin-top: 5.833rem;
  }
}
#quest2 .howto {
  margin-top: 7.517rem;
}
@media screen and (max-width: 767px) {
  #quest2 .howto {
    margin-top: 4.445rem;
  }
}
#quest2 .howto .step_list li {
  padding-top: 8.61rem;
}
#quest2 .howto .step_list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(1) {
    padding-top: 6.817rem;
  }
}
#quest2 .howto .step_list li:nth-of-type(1) .img {
  left: 10.511rem;
  bottom: 2.482rem;
  width: 9.8rem;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(1) .img {
    left: 8.869rem;
    bottom: 2.48rem;
    width: 7.516rem;
  }
}
#quest2 .howto .step_list li:nth-of-type(2) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(2) {
    padding-top: 6.475rem;
  }
}
#quest2 .howto .step_list li:nth-of-type(2) .img {
  left: 13.207rem;
  bottom: 2.552rem;
  width: 7.8rem;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(2) .img {
    left: 7.472rem;
    bottom: 2.098rem;
    width: 8.09rem;
  }
}
#quest2 .howto .step_list li:nth-of-type(3) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(3) {
    padding-top: 6.683rem;
  }
}
#quest2 .howto .step_list li:nth-of-type(3) .img {
  left: 1.143rem;
  bottom: 0.65rem;
  width: 29.5rem;
}
@media screen and (max-width: 767px) {
  #quest2 .howto .step_list li:nth-of-type(3) .img {
    left: 0.137rem;
    bottom: 1.156rem;
    width: 25.898rem;
  }
}
#quest2 .btn_box {
  margin-top: 11.054rem;
}
@media screen and (max-width: 767px) {
  #quest2 .btn_box {
    margin-top: 10.241rem;
  }
}
#quest2 .btn_box .img {
  left: 10.719rem;
  top: -7.957rem;
}
@media screen and (max-width: 767px) {
  #quest2 .btn_box .img {
    left: 7.993rem;
    top: -7.274rem;
  }
}
#quest2 .agreement_box {
  margin-top: 6.065rem;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box {
    margin-top: 4.546rem;
  }
}
#quest2 .agreement_box .ttl {
  width: 30.1rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .ttl {
    width: 18.1rem;
  }
}
#quest2 .agreement_box .inner {
  background: #fff;
  padding: 5.1rem 5rem;
  margin-top: 2.464rem;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .inner {
    padding: 2.753rem 1.089rem 2.947rem 2.2rem;
    margin-top: 1.654rem;
  }
}
#quest2 .agreement_box .list {
  height: 25.3rem;
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .list {
    height: 36rem;
    padding-right: 1.1rem;
  }
}
#quest2 .agreement_box .list li {
  line-height: 170%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .list li {
    font-size: 1.4rem;
  }
}
#quest2 .agreement_box .list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #0B0000;
  margin: 1.2rem 1rem 0 1rem;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .list li::before {
    width: 3px;
    height: 3px;
    border-radius: 1.5px;
    margin: 0.5rem 1rem 0 0;
  }
}
#quest2 .agreement_box .list li:nth-of-type(n+2) {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  #quest2 .agreement_box .list li:nth-of-type(n+2) {
    margin-top: 1.4rem;
  }
}

/* ---------------------------------------
  #qa
-----------------------------------------*/
#qa {
  margin-top: 7.005rem;
  padding-bottom: 48.701rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #qa {
    margin-top: 4.8rem;
    padding-bottom: 25.945rem;
  }
}
#qa .wrap {
  position: relative;
}
@media screen and (max-width: 767px) {
  #qa .wrap {
    width: 33.7rem;
  }
}
#qa .sec_ttl {
  width: 26.1rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #qa .sec_ttl {
    width: 14rem;
  }
}
#qa .point_bottom {
  position: absolute;
  left: -35.713rem;
  bottom: -23.287rem;
  width: 46.2rem;
}
@media screen and (max-width: 1500px) {
  #qa .point_bottom {
    left: -25rem;
  }
}
@media screen and (max-width: 767px) {
  #qa .point_bottom {
    left: -8.149rem;
    bottom: -12.277rem;
    width: 22.707rem;
  }
}
#qa .qa_clm {
  margin-top: 4.287rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_clm {
    margin-top: 2.4rem;
  }
}
#qa .qa_clm + .qa_clm {
  margin-top: 5.996rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_clm + .qa_clm {
    margin-top: 4.844rem;
  }
}
#qa .qa_ttl {
  width: 54.8rem;
  height: 5.9rem;
  line-height: 5.9rem;
  background: url(../img/bg_qa_sub.png) no-repeat top/contain;
  font-size: 2rem;
  font-family: "RocknRoll One", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #qa .qa_ttl {
    width: 33.7rem;
    height: 4.7rem;
    line-height: 4.7rem;
    background-image: url(../img/bg_qa_sub_sp.png);
    font-size: 1.6rem;
  }
}
#qa .qa_list {
  counter-reset: listnum;
  margin-top: 2.783rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_list {
    margin-top: 2.4rem;
  }
}
#qa .qa_list li {
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  padding-left: 13.52rem;
  padding-top: 2.158rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_list li {
    padding-left: 2.92rem;
    padding-top: 2.07rem;
  }
}
#qa .qa_list li::before {
  counter-increment: listnum;
  content: "Q" counter(listnum);
  font-family: "RocknRoll One", sans-serif;
  color: #FFCF3B;
  font-size: 3.2rem;
  position: absolute;
  left: 3.47rem;
  top: 2.5rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_list li::before {
    font-size: 2rem;
    left: 1.995rem;
    top: 2.5rem;
  }
}
#qa .qa_list li .q_txt {
  font-size: 1.8rem;
  font-family: "RocknRoll One", sans-serif;
  line-height: 170%;
}
@media screen and (max-width: 767px) {
  #qa .qa_list li .q_txt {
    font-size: 1.6rem;
    padding-left: 4.6rem;
    line-height: 140%;
    max-width: 28.73rem;
  }
}
#qa .qa_list li .a_txt {
  margin-top: 3.869rem;
  font-size: 1.6rem;
  line-height: 170%;
  max-width: 80rem;
}
@media screen and (max-width: 767px) {
  #qa .qa_list li .a_txt {
    margin-top: 4.013rem;
    font-size: 1.4rem;
    max-width: 28.5rem;
  }
}
#qa .qa_list li .a_txt a {
  text-decoration: underline;
}
#qa .qa_list li + li {
  margin-top: 1.4rem;
}
#qa .qa_list._01 li:nth-of-type(1) {
  height: 20.4rem;
  background-image: url(../img/bg_qa_01_1.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(1) {
    height: 28.1rem;
    background-image: url(../img/bg_qa_01_1_sp.png);
  }
}
#qa .qa_list._01 li:nth-of-type(2) {
  height: 17.6rem;
  background-image: url(../img/bg_qa_01_2.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(2) {
    height: 21.1rem;
    background-image: url(../img/bg_qa_01_2_sp.png);
  }
}
#qa .qa_list._01 li:nth-of-type(3) {
  height: 15rem;
  background-image: url(../img/bg_qa_01_3.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(3) {
    height: 21rem;
    background-image: url(../img/bg_qa_01_3_sp.png);
  }
}
#qa .qa_list._01 li:nth-of-type(4) {
  height: 15rem;
  background-image: url(../img/bg_qa_01_4.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(4) {
    height: 18.9rem;
    background-image: url(../img/bg_qa_01_4_sp.png);
  }
}
#qa .qa_list._01 li:nth-of-type(5) {
  height: 20.8rem;
  background-image: url(../img/bg_qa_01_5.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(5) {
    height: 32.3rem;
    background-image: url(../img/bg_qa_01_5_sp.png);
  }
}
#qa .qa_list._01 li:nth-of-type(6) {
  height: 17.6rem;
  background-image: url(../img/bg_qa_01_2.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._01 li:nth-of-type(6) {
    height: 25.4rem;
    background-image: url(../img/bg_qa_01_6_sp.png);
  }
}
#qa .qa_list._02 li:nth-of-type(1) {
  height: 20.4rem;
  background-image: url(../img/bg_qa_02_1.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._02 li:nth-of-type(1) {
    height: 27.8rem;
    background-image: url(../img/bg_qa_02_1_sp.png);
  }
}
#qa .qa_list._02 li:nth-of-type(2) {
  height: 17.5rem;
  background-image: url(../img/bg_qa_02_2.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._02 li:nth-of-type(2) {
    height: 21rem;
    background-image: url(../img/bg_qa_02_2_sp.png);
  }
}
#qa .qa_list._02 li:nth-of-type(3) {
  height: 20.4rem;
  background-image: url(../img/bg_qa_02_1.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._02 li:nth-of-type(3) {
    height: 27.8rem;
    background-image: url(../img/bg_qa_02_1_sp.png);
  }
}
#qa .qa_list._02 li:nth-of-type(4) {
  height: 17.6rem;
  background-image: url(../img/bg_qa_02_4.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._02 li:nth-of-type(4) {
    height: 21.7rem;
    background-image: url(../img/bg_qa_02_4_sp.png);
    padding-top: 3rem;
  }
}
#qa .qa_list._02 li:nth-of-type(5) {
  height: 14.7rem;
  background-image: url(../img/bg_qa_02_5.png);
}
@media screen and (max-width: 767px) {
  #qa .qa_list._02 li:nth-of-type(5) {
    height: 18.3rem;
    background-image: url(../img/bg_qa_02_5_sp.png);
  }
}

/* ---------------------------------------
  #quest3
-----------------------------------------*/
#quest3 {
  padding-top: 12.3986486486vw;
  padding-bottom: 24.956rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #quest3 {
    padding-top: 25.3333333333vw;
    padding-bottom: 21.943rem;
  }
}
#quest3 .bg_box {
  background: url(../img/bg_quest03.png) no-repeat top/contain;
  width: 123.516rem;
  height: 215.795rem;
  margin: 0 auto;
  position: relative;
  padding: 8.342rem 0 13.327rem;
}
@media screen and (max-width: 767px) {
  #quest3 .bg_box {
    background-image: url(../img/bg_quest03_sp.png);
    width: 34.468rem;
    height: 225.298rem;
    padding: 6.701rem 0 8.426rem;
  }
}
#quest3 .point_top {
  position: absolute;
  right: -10.896rem;
  top: -17.341rem;
  width: 32rem;
}
@media screen and (max-width: 1500px) {
  #quest3 .point_top {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest3 .point_top {
    right: -3.001rem;
    top: -9.086rem;
    width: 14.726rem;
  }
}
#quest3 .point_bottom {
  position: absolute;
  left: -17.934rem;
  bottom: -10.186rem;
  width: 45.4rem;
}
@media screen and (max-width: 1500px) {
  #quest3 .point_bottom {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest3 .point_bottom {
    left: -5.761rem;
    bottom: -8.297rem;
    width: 18.858rem;
  }
}
#quest3 .point_bottom2 {
  position: absolute;
  right: -17.133rem;
  bottom: -22.27rem;
  width: 44rem;
}
@media screen and (max-width: 1500px) {
  #quest3 .point_bottom2 {
    right: -5rem;
  }
}
@media screen and (max-width: 767px) {
  #quest3 .point_bottom2 {
    right: -7.716rem;
    bottom: -10.202rem;
    width: 19.13rem;
  }
}
#quest3 .ttl_box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#quest3 .ttl_box .sec_ttl {
  width: 59.1rem;
}
@media screen and (max-width: 767px) {
  #quest3 .ttl_box .sec_ttl {
    width: 31.135rem;
  }
}
#quest3 .ttl_box .point_01 {
  position: absolute;
  left: -37.585em;
  top: -2.309rem;
  width: 41.3rem;
}
@media screen and (max-width: 767px) {
  #quest3 .ttl_box .point_01 {
    left: -2.662rem;
    top: auto;
    bottom: -13.134rem;
    width: 27.654rem;
  }
}
#quest3 .ttl_box .point_02 {
  position: absolute;
  right: -13.986rem;
  top: 13.33rem;
  width: 19rem;
}
@media screen and (max-width: 767px) {
  #quest3 .ttl_box .point_02 {
    right: -0.947rem;
    top: auto;
    bottom: -9.563rem;
    width: 8.166rem;
  }
}
#quest3 .lead {
  font-family: "RocknRoll One", sans-serif;
  font-size: 2.26rem;
  line-height: 180%;
  letter-spacing: -0.05em;
  text-align: center;
  margin-top: 3.72rem;
}
@media screen and (max-width: 767px) {
  #quest3 .lead {
    font-size: 1.6rem;
    margin-top: 13.94rem;
  }
}
#quest3 .lead strong {
  font-size: 2.876rem;
  color: #D4261A;
  background-color: #FFCF3B;
  padding: 0 1.5rem;
}
@media screen and (max-width: 767px) {
  #quest3 .lead strong {
    font-size: 1.6rem;
    padding: 0.3rem 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  #quest3 .lead strong.pr_0_pc {
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest3 .lead strong.pr_0_sp {
    padding-right: 0;
  }
}
@media screen and (min-width: 768px) {
  #quest3 .lead strong.pl_0_pc {
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  #quest3 .lead strong.pl_0_sp {
    padding-left: 0;
  }
}
#quest3 .lead a {
  text-decoration: underline;
}
#quest3 .period_box {
  width: 65.4rem;
  height: 6.2rem;
  background: url(../img/bg_quest03_att.png) no-repeat top/contain;
  padding: 1.45rem 3.72rem 0 6.15rem;
  position: relative;
  margin: 1.546rem auto;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box {
    width: 30.5rem;
    height: 11.3rem;
    background-image: url(../img/bg_quest03_att_sp.png);
    padding: 3.001rem 2.223rem 0 2.32rem;
    margin-top: 4.882rem;
  }
}
#quest3 .period_box .period {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box .period {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#quest3 .period_box .period dt {
  font-family: "RocknRoll One", sans-serif;
  line-height: 170%;
  font-size: 1.849rem;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box .period dt {
    font-size: 1.4rem;
  }
}
#quest3 .period_box .period dd {
  margin-left: 2.2rem;
  line-height: 170%;
  font-size: 1.849rem;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box .period dd {
    margin-left: 0;
    margin-top: 0.2rem;
    font-size: 1.4rem;
  }
}
#quest3 .period_box .point_01 {
  position: absolute;
  left: -2.488rem;
  top: -1.112rem;
  width: 5.3rem;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box .point_01 {
    left: 0.259rem;
    top: -1.403rem;
    width: 7.338rem;
  }
}
#quest3 .period_box .point_02 {
  position: absolute;
  right: -10.313rem;
  top: -2.695rem;
  width: 14.5rem;
}
@media screen and (max-width: 767px) {
  #quest3 .period_box .point_02 {
    right: -0.837rem;
    top: -3.3rem;
    width: 7.961rem;
  }
}
#quest3 .prize_box {
  margin-top: 5.61rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box {
    margin-top: 4.8rem;
  }
}
#quest3 .prize_box .list {
  margin-top: 3.142rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list {
    margin-top: 2.386rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (min-width: 768px) {
  #quest3 .prize_box .list li .img {
    margin: 0 auto;
  }
}
#quest3 .prize_box .list li .txt {
  text-align: center;
  line-height: 140%;
  font-size: 2.055rem;
  margin-top: 0.676rem;
  color: #732F0A;
  font-family: "RocknRoll One", sans-serif;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li .txt {
    font-size: 1.4rem;
    margin-top: 0.396rem;
  }
}
#quest3 .prize_box .list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(1) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    margin-right: 0.986rem;
    margin-top: 2.314rem;
  }
}
#quest3 .prize_box .list li:nth-of-type(1) .img {
  width: 12.2rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(1) .img {
    width: 7.827rem;
  }
}
#quest3 .prize_box .list li:nth-of-type(2) {
  margin-left: 1.444rem;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(2) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-left: 0;
  }
}
#quest3 .prize_box .list li:nth-of-type(2) .img {
  width: 28rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(2) .img {
    width: 17.882rem;
  }
}
#quest3 .prize_box .list li:nth-of-type(3) {
  margin-left: 2.536rem;
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(3) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-left: 1.327rem;
    margin-right: 1.917rem;
  }
}
#quest3 .prize_box .list li:nth-of-type(3) .img {
  width: 12.3rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .list li:nth-of-type(3) .img {
    width: 7.845rem;
  }
}
#quest3 .prize_box .wchance_box {
  position: relative;
  margin: 9.887rem auto 0;
  background: url(../img/bg_wchance.png) no-repeat top/contain;
  width: 65.5rem;
  height: 17.1rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box {
    margin-top: 9.675rem;
    background-image: url(../img/bg_wchance_sp.png);
    width: 100%;
    height: 30.7rem;
  }
}
#quest3 .prize_box .wchance_box::before {
  content: "＋";
  font-size: 6.011rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -9.3rem;
  color: #732F0A;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box::before {
    font-size: 6.4rem;
    top: -9.4rem;
  }
}
#quest3 .prize_box .wchance_box .ttl {
  position: absolute;
  left: 18.885rem;
  top: -4.532rem;
  width: 26.9rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .ttl {
    left: 3.963rem;
    top: -4.457rem;
    width: 22.5rem;
  }
}
#quest3 .prize_box .wchance_box .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
#quest3 .prize_box .wchance_box .img_box {
  margin-left: 1.145rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .img_box {
    margin: 2.081rem auto 0;
  }
}
#quest3 .prize_box .wchance_box .img_box .img {
  width: 22.1rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .img_box .img {
    width: 24.103rem;
  }
}
#quest3 .prize_box .wchance_box .img_box .att {
  font-size: 1.233rem;
  line-height: 170%;
  margin-top: -1.6rem;
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .img_box .att {
    font-size: 1.2rem;
    margin-top: -0.5rem;
    margin-left: 0;
    text-align: center;
  }
}
#quest3 .prize_box .wchance_box .txt_box {
  margin-left: 6.36rem;
  font-size: 1.644rem;
  line-height: 170%;
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .txt_box {
    font-size: 1.4rem;
    margin-top: 3.273rem;
    margin-left: 2.04rem;
    padding-top: 0;
  }
}
#quest3 .prize_box .wchance_box .txt_box span {
  font-size: 2.055rem;
  color: #D4261A;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .txt_box span {
    font-size: 1.6rem;
  }
}
#quest3 .prize_box .wchance_box .point {
  position: absolute;
  right: -7.775rem;
  bottom: 0;
  width: 18.6rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .wchance_box .point {
    right: -0.698rem;
    bottom: -3.319rem;
    width: 12.049rem;
  }
}
#quest3 .prize_box .point_prize {
  position: absolute;
  left: 0.639rem;
  top: 8.284rem;
  width: 27.7rem;
}
@media screen and (max-width: 767px) {
  #quest3 .prize_box .point_prize {
    left: -1.166rem;
    top: 19.7rem;
    width: 19.19rem;
  }
}
#quest3 .howto {
  margin-top: 7.141rem;
}
@media screen and (max-width: 767px) {
  #quest3 .howto {
    margin-top: 6.812rem;
  }
}
#quest3 .howto .step_list li {
  padding-top: 7.421rem;
}
#quest3 .howto .step_list li:nth-of-type(1) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(1) {
    padding-top: 6.817rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(1) .txt_x {
  color: #0476E1;
}
#quest3 .howto .step_list li:nth-of-type(1) .img {
  left: 10.946rem;
  bottom: 3.195rem;
  width: 9rem;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(1) .img {
    left: 9.092rem;
    bottom: 1.486rem;
    width: 6.816rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(2) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(2) {
    padding-top: 6.475rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(2) .btn_box {
  width: 22.6rem;
  margin-top: 1.154rem;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(2) .btn_box {
    width: 18.145rem;
    margin-top: 1.222rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(2) .btn_box a span {
  height: 5.136rem;
  border-radius: 4.468rem;
  background-color: #0B0000;
  color: #fff;
  font-size: 1.639rem;
  border: none;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(2) .btn_box a span {
    height: 4.124rem;
    border-radius: 3.587rem;
    font-size: 1.4rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(2) .btn_box a span::after {
  width: 1.4rem;
  height: 2.5rem;
  background-image: url(../img/icon_btn_white.svg);
  right: 2.207rem;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(2) .btn_box a span::after {
    width: 1rem;
    height: 1.8rem;
    right: 1.772rem;
  }
}
#quest3 .howto .step_list li:nth-of-type(2) .btn_box a::before {
  border-radius: 4.468rem;
  background-color: #FFCF3B;
  right: 0;
  bottom: -0.442rem;
}
@media (any-hover: hover) {
  #quest3 .howto .step_list li:nth-of-type(2) .btn_box a:hover span {
    -webkit-transform: translateY(0.442rem);
            transform: translateY(0.442rem);
  }
}
#quest3 .howto .step_list li:nth-of-type(3) {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
@media screen and (max-width: 767px) {
  #quest3 .howto .step_list li:nth-of-type(3) {
    padding-top: 4.905rem;
  }
}
#quest3 .howto + .btn_box {
  margin-top: 4.98rem;
}
#quest3 .btn_box {
  margin-top: 9.752rem;
}
@media screen and (max-width: 767px) {
  #quest3 .btn_box {
    margin-top: 9.322rem;
  }
}
#quest3 .btn_box .img {
  left: 10.333rem;
  top: -9.333rem;
  width: 18.764rem;
}
@media screen and (max-width: 767px) {
  #quest3 .btn_box .img {
    left: 6.658rem;
    top: -8.673rem;
    width: 17.421rem;
  }
}

/* ---------------------------------------
  #related_sites
-----------------------------------------*/
#related_sites {
  background: url(../img/bg_05.png) no-repeat top/100% auto;
  margin-top: -14.6rem;
  padding-top: 17.3rem;
  padding-bottom: 16.687rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  #related_sites {
    background-image: url(../img/bg_05_sp.png);
    margin-top: -18rem;
    padding-top: 7.44rem;
    padding-bottom: 10.1rem;
  }
}
#related_sites .wrap {
  position: relative;
}
#related_sites .ttl_box {
  position: relative;
  width: 38.4rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #related_sites .ttl_box {
    width: 16.2rem;
  }
}
#related_sites .ttl_box .sec_ttl {
  width: 100%;
}
#related_sites .ttl_box .point_01 {
  position: absolute;
  left: -17.8rem;
  top: -7.8rem;
  width: 17.1rem;
}
@media screen and (max-width: 767px) {
  #related_sites .ttl_box .point_01 {
    left: -9.6rem;
    top: 0.617rem;
    width: 8.841rem;
  }
}
#related_sites .ttl_box .point_02 {
  position: absolute;
  right: -19.1rem;
  top: -7.5rem;
  width: 17.5rem;
}
@media screen and (max-width: 767px) {
  #related_sites .ttl_box .point_02 {
    right: -9.6rem;
    top: 0.674rem;
    width: 9.131rem;
  }
}
#related_sites .list {
  margin-top: 3.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #related_sites .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.923rem 0;
  }
}
@media screen and (max-width: 767px) {
  #related_sites .list li {
    width: 100% !important;
  }
}
#related_sites .list li:nth-of-type(1) {
  width: 31.3rem;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
#related_sites .list li:nth-of-type(2) {
  width: 31.5rem;
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
#related_sites .list li:nth-of-type(3) {
  width: 31.6rem;
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

/* ---------------------------------------
  表示・非表示処理
-----------------------------------------*/
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}