@charset "UTF-8";
/* ==========================================================
  フォント========================================================== */
/* ==========================================================
  EXTEND
========================================================== */
/* ===================================================================
CSS information
 file name  :style.scss
 style info :共通のスタイル
=================================================================== */
html {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
    background: #fff;
  }
}
@media screen and (min-width: 1921px) {
  html {
    font-size: 0.9vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 3.4vw;
    background: #000;
  }
}

body {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
  background: #fff;
}

/* ==========================================================
  HEADER
========================================================== */
header {
  position: relative;
  z-index: 9999;
  background: #000;
  width: 100%;
}
header img {
  vertical-align: baseline;
}
header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2.8rem;
}
@media screen and (min-width: 768px) {
  header .inner {
    padding: 0 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  header .inner {
    padding: 0 1rem;
  }
}
header .inner .logo {
  width: 10.6rem;
}
header .inner .rBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header .inner .rBox .x {
  height: 1.4rem;
}
header .inner .rBox .x img {
  width: auto;
  height: 100%;
}
header .inner .rBox .series {
  font-size: 0.8125rem;
  border-left: solid 1px #565454;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 1.5rem;
  padding-left: 1em;
  margin-left: 1em;
}
header .inner .rBox .series a {
  color: #fff;
  text-decoration: none;
}

/* ==========================================================
  FOOTER
========================================================== */
footer {
  position: relative;
  z-index: 9999;
  background: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  footer {
    height: 2.8rem;
  }
}
@media screen and (max-width: 767px) {
  footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    padding: 4vw 0;
  }
}
@media screen and (min-width: 768px) {
  footer .bnr {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  footer .bnr {
    width: 60%;
    margin: 0 auto 4vw;
  }
}
footer .bnr img {
  border-radius: 0.5rem;
}
footer small {
  color: #aaa;
  font-size: 0.75rem;
}

/* ==========================================================
  WRAP
========================================================== */
.wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: calc(100vh - 5.6rem);
  }
}

/* ----------------------------------------------------- */
/* 統一されたシーン構造                                */
/* ----------------------------------------------------- */
.scene-container {
  position: relative;
  -webkit-transition: -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1);
  transition: -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1);
  transition: transform 7s cubic-bezier(0.6, 0, 0.2, 1);
  transition: transform 7s cubic-bezier(0.6, 0, 0.2, 1), -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1);
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .scene-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transform-origin: center calc(100% - 12.5rem);
            transform-origin: center calc(100% - 12.5rem);
    height: calc(100vh - 5.6rem);
    padding-bottom: 6vh;
  }
}
@media screen and (max-width: 767px) {
  .scene-container {
    -webkit-transform-origin: center calc(100% - 10rem);
            transform-origin: center calc(100% - 10rem);
    padding-bottom: 11vw;
  }
}
.scene-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-transform: translateZ(-2rem) scale(1);
          transform: translateZ(-2rem) scale(1);
}
@media screen and (min-width: 768px) {
  .scene-container::before {
    background-image: url(../img/bg_room_pc.jpg);
    background-size: auto 100%;
  }
}
@media screen and (max-width: 767px) {
  .scene-container::before {
    background-image: url(../img/bg_room_sp.jpg);
    background-size: cover;
  }
}
.scene-container .logoBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1000;
}
@media screen and (min-width: 768px) {
  .scene-container .logoBox {
    position: absolute;
    top: 0;
    left: 1.5rem;
    width: 25.625rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1500px) {
  .scene-container .logoBox {
    width: 20rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .scene-container .logoBox {
    width: 15rem;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .logoBox {
    position: relative;
    top: 4vw;
    margin-bottom: 6vw;
  }
}
.scene-container .logoBox h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .scene-container .logoBox h1 {
    background: url(../img/bg_logo-frame.png) no-repeat right center/100% auto;
    aspect-ratio: 410/288;
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .logoBox h1 {
    width: 70%;
    margin-bottom: 1.5rem;
  }
}
.scene-container .logoBox h1 span {
  display: block;
  position: relative;
  width: 80%;
}
.scene-container .logoBox .btnMovie {
  display: block;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  .scene-container .logoBox .btnMovie {
    width: 76%;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .logoBox .btnMovie {
    width: 52%;
  }
}
.scene-container .logoBox #btnLastDoor {
  display: block;
}
@media screen and (min-width: 768px) {
  .scene-container .logoBox #btnLastDoor {
    width: 76%;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .logoBox #btnLastDoor {
    width: 52%;
  }
}
.scene-container h2 {
  position: absolute;
  z-index: 1000;
}
@media screen and (min-width: 768px) {
  .scene-container h2 {
    bottom: 2rem;
    right: 1.5rem;
    width: 14.4375rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1500px) {
  .scene-container h2 {
    width: 12rem;
  }
}
@media screen and (max-width: 767px) {
  .scene-container h2 {
    bottom: 0.5rem;
    right: 0.5rem;
    width: 26vw;
  }
}
@media screen and (min-width: 768px) {
  .scene-container .bnr {
    position: absolute;
    z-index: 1000;
    bottom: 2rem;
    left: 1.5rem;
    width: 20rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .scene-container .bnr {
    width: 16rem;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .bnr {
    display: none;
  }
}
.scene-container .bnr img {
  border-radius: 0.5rem;
}
.scene-container.type-initial {
  position: relative;
  z-index: 10;
}
.scene-container.type-overlay {
  position: fixed;
  left: 0;
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
  -webkit-transition: opacity 3s ease-in-out 4s;
  transition: opacity 3s ease-in-out 4s;
}
.scene-container.type-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.scene-container.zoom-active {
  -webkit-transform: scale(25);
          transform: scale(25);
}
@media screen and (max-width: 767px) {
  .scene-container.zoom-active::before {
    opacity: 0;
    -webkit-transition: opacity 1.5s ease-in 1s;
    transition: opacity 1.5s ease-in 1s;
  }
}
.scene-container.zoom-active.type-overlay {
  -webkit-transition: -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1) !important;
  transition: -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1) !important;
  transition: transform 7s cubic-bezier(0.6, 0, 0.2, 1) !important;
  transition: transform 7s cubic-bezier(0.6, 0, 0.2, 1), -webkit-transform 7s cubic-bezier(0.6, 0, 0.2, 1) !important;
}
.scene-container.zoom-active::after {
  opacity: 0.3;
}
.scene-container.zoom-active .scene-image {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 2s ease-in 3s;
  transition: opacity 2s ease-in 3s;
}
.scene-container::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  -webkit-transition: opacity 7s ease-in-out;
  transition: opacity 7s ease-in-out;
  mix-blend-mode: overlay;
}
@media screen and (max-width: 767px) {
  .scene-container.mobile-done {
    display: none;
  }
  .scene-container.mobile-done + .scene-container {
    position: relative !important;
  }
}
.scene-container .curtain {
  width: auto;
  aspect-ratio: 738/996;
  position: absolute;
  top: 0;
  z-index: 500;
  background-repeat: no-repeat;
  background-size: auto 100%;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .scene-container .curtain {
    height: 100%;
  }
}
@media screen and (max-width: 1020px) {
  .scene-container .curtain {
    height: 60%;
  }
}
@media screen and (max-width: 767px) {
  .scene-container .curtain {
    height: 22%;
  }
}
.scene-container .curtain.curtain-l {
  left: 0;
  background-position: top left;
}
@media screen and (min-width: 768px) {
  .scene-container .curtain.curtain-l {
    background-image: url(../img/bg_curtain_l_pc.png);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .scene-container .curtain.curtain-l {
    left: -10vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .scene-container .curtain.curtain-l {
    left: -16vw;
  }
}
@media screen and (max-width: 1020px) {
  .scene-container .curtain.curtain-l {
    left: 0;
    background-image: url(../img/bg_curtain_l_sp.png);
  }
}
.scene-container .curtain.curtain-r {
  right: 0;
  background-position: top right;
}
@media screen and (min-width: 768px) {
  .scene-container .curtain.curtain-r {
    background-image: url(../img/bg_curtain_r_pc.png);
  }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .scene-container .curtain.curtain-r {
    right: -10vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1020px) {
  .scene-container .curtain.curtain-r {
    right: -16vw;
  }
}
@media screen and (max-width: 1020px) {
  .scene-container .curtain.curtain-r {
    right: 0;
    background-image: url(../img/bg_curtain_r_sp.png);
  }
}

.scene-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 50;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.scene-content .scene-image {
  position: relative;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  z-index: 60;
}
@media screen and (min-width: 768px) {
  .scene-content .scene-image {
    width: 70vh;
  }
}
@media screen and (max-height: 700px) and (min-width: 768px) {
  .scene-content .scene-image {
    width: 64vh;
  }
}
@media screen and (max-width: 767px) {
  .scene-content .scene-image {
    width: 90vw;
  }
}
.scene-content .scene-image:after {
  content: "";
  position: absolute;
  width: 5rem;
  aspect-ratio: 150/128;
  background: url(../img/icn_loupe.png) no-repeat center center/100% auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .scene-content .scene-image:after {
    bottom: 5rem;
    right: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .scene-content .scene-image:after {
    bottom: 3.4rem;
    right: 3.4rem;
    width: 3rem;
  }
}
.scene-content .door-frame {
  aspect-ratio: 279/392;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 100;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 80rem;
          perspective: 80rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-filter: drop-shadow(0 0.4rem 1rem rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 0.4rem 1rem rgba(0, 0, 0, 0.2));
}
@media screen and (min-width: 768px) {
  .scene-content .door-frame {
    width: 26vh;
  }
}
@media screen and (max-height: 700px) and (min-width: 768px) {
  .scene-content .door-frame {
    width: 24vh;
  }
}
@media screen and (max-width: 767px) {
  .scene-content .door-frame {
    width: 42vw;
  }
}
.scene-content .door-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_door_open.png) no-repeat center/cover;
  z-index: 200;
  pointer-events: none;
}
.scene-content .door-frame.lock {
  pointer-events: none;
}
.scene-content .door-frame.lock::before {
  background-image: url(../img/img_door_close_0428.png);
}
.scene-content .door-frame.lock .door {
  display: none;
}
.scene-content .door-frame.lock .footprints {
  display: none;
}
.scene-content .door-frame .door {
  aspect-ratio: 1194/2390;
  position: relative;
  top: 0.35rem;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
  will-change: transform;
  width: 60.8%;
}
@media screen and (min-width: 768px) {
  .scene-content .door-frame .door:hover .door-leaf-left:not(.open), .scene-content .door-frame .door.is-hovered .door-leaf-left:not(.open) {
    -webkit-transform: translateX(-8%);
            transform: translateX(-8%);
  }
}
@media screen and (min-width: 768px) {
  .scene-content .door-frame .door:hover .door-leaf-right:not(.open), .scene-content .door-frame .door.is-hovered .door-leaf-right:not(.open) {
    -webkit-transform: translateX(8%);
            transform: translateX(8%);
  }
}
.scene-content .door-frame .door::after {
  content: "";
  position: absolute;
  z-index: 0;
  -webkit-transform: translateZ(-1rem);
          transform: translateZ(-1rem);
  border-radius: inherit;
  pointer-events: none;
  -webkit-box-shadow: inset 0 0 2rem rgb(255, 255, 255);
          box-shadow: inset 0 0 2rem rgb(255, 255, 255);
  width: 100%;
  height: 100%;
}
.scene-content .door-frame .door .aurora-canvas {
  position: absolute;
  z-index: -1;
  -webkit-transform: translateZ(-1rem);
          transform: translateZ(-1rem);
  border-radius: inherit;
  pointer-events: none;
}
.scene-content .door-frame .door .door-leaf {
  height: 100%;
  position: absolute;
  top: 0;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* ホバー用の滑らかな曲線*/
  overflow: hidden;
}
.scene-content .door-frame .door .door-leaf .door-front {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.scene-content .door-frame .door .door-leaf-left {
  width: 60%;
  left: 0;
  z-index: 10;
}
.scene-content .door-frame .door .door-leaf-left .door-front {
  background: url(../img/bg_door_l.png) no-repeat 0 0/100% 100%;
}
.scene-content .door-frame .door .door-leaf-left.open {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); /* 全開閉用の滑らかな曲線*/
}
.scene-content .door-frame .door .door-leaf-right {
  width: 78%;
  right: 0;
  z-index: 11;
}
.scene-content .door-frame .door .door-leaf-right .door-front {
  background: url(../img/bg_door_r.png) no-repeat 0 0/100% 100%;
}
.scene-content .door-frame .door .door-leaf-right.open {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.568, 0, 0.2, 1);
  transition: -webkit-transform 1.5s cubic-bezier(0.568, 0, 0.2, 1);
  transition: transform 1.5s cubic-bezier(0.568, 0, 0.2, 1);
  transition: transform 1.5s cubic-bezier(0.568, 0, 0.2, 1), -webkit-transform 1.5s cubic-bezier(0.568, 0, 0.2, 1); /* 全開閉用の滑らかな曲線*/
}
.scene-content .door-frame .footprints {
  position: absolute;
  left: 17%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  aspect-ratio: 501/181;
  background: url(../img/img_footprints.png) no-repeat center bottom/contain;
  z-index: 150;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .scene-content .door-frame .footprints {
    bottom: -22%;
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .scene-content .door-frame .footprints {
    bottom: -20%;
    width: 70%;
  }
}

.detailBox {
  background: url(../img/ptn_character.png) repeat center center/2.5rem;
  border-radius: 3.375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem 0;
}
@media screen and (min-width: 768px) {
  .detailBox {
    padding: 5rem 3.75rem 3.75rem;
  }
}
@media screen and (max-width: 767px) {
  .detailBox {
    padding: 12vw 6vw;
  }
}
@media screen and (min-width: 768px) {
  .detailBox .main {
    width: 15rem;
  }
}
@media screen and (max-width: 767px) {
  .detailBox .main {
    width: 50%;
  }
}
.detailBox dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 1.5rem 0;
  width: 100%;
}
.detailBox dl dt {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  border-radius: 100rem;
  background: #956890;
  padding: 1.25rem 0.625rem;
}
.detailBox dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .detailBox dl dd figure {
    width: 8rem;
  }
}
@media screen and (max-width: 767px) {
  .detailBox dl dd figure {
    width: 30%;
  }
}
.detailBox dl dd p {
  color: #391c07;
  line-height: 1.875rem;
  padding-right: 1em;
}
@media screen and (min-width: 768px) {
  .detailBox dl dd p {
    width: calc(100% - 8rem - 1rem);
    max-height: 7.5rem;
  }
}
@media screen and (max-width: 767px) {
  .detailBox dl dd p {
    width: calc(70% - 1rem);
    height: 10rem;
  }
}
.detailBox dl dd p::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
.detailBox dl dd p .simplebar-scrollbar:before {
  background: #000;
  opacity: 0.2;
}
@media screen and (max-width: 767px) {
  .detailBox dl dd.test {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    gap: 1rem 0;
  }
}
@media screen and (max-width: 767px) {
  .detailBox dl dd.test p {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .detailBox#detail02 .main, .detailBox#detail03 .main, .detailBox#detail04 .main, .detailBox#detail05 .main, .detailBox#detail08 .main {
    width: 20rem;
  }
}
@media screen and (max-width: 767px) {
  .detailBox#detail02 .main, .detailBox#detail03 .main, .detailBox#detail04 .main, .detailBox#detail05 .main, .detailBox#detail08 .main {
    width: 70%;
  }
}