@charset "UTF-8";
/*
**************************************************************************
*	fields ULTRAMAN style.css
**************************************************************************/
:root {
  --fonts-notosansjp: "Noto Sans JP", sans-serif;
  --fonts-notoserifjp: "Noto Serif JP", serif;
  --fonts-newtegomin: "New Tegomin", serif;
  --color-black: #000;
  --color-white: #fff;
  --color-red: #FF3700;
  --color-blue: #6D7CEC;
  --color-cyan: #00C5FF;
  --color-gray1: #191919;
  --color-gray2: #292929;
  --color-gray3: #535353;
  --color-gray4: #9B9B9B;
  --color-gray5: #EDEDED;
  --color-brown: #AC7000;
  --color-base: var(--color-gray5);
  --color-footer: var(--color-black);
  --color-complete1: var(--color-black);
  --color-complete2: var(--color-gray2);
  --text-shadows1: 0 0 5px rgba(0, 0, 0, 0.8);
  --text-shadows2: 0 0 14px rgba(0, 0, 0, 0.8);
  --btn-shadows: 0 0 6px rgba(255, 55, 0, 0.92);
  --text-stroke: rgb(172, 112, 0) 1px 0px 0px,
  	rgb(172, 112, 0) 0.540302px 0.841471px 0px,
  	rgb(172, 112, 0) -0.416147px 0.909297px 0px,
  	rgb(172, 112, 0) -0.989992px 0.14112px 0px,
  	rgb(172, 112, 0) -0.653644px -0.756802px 0px,
  	rgb(172, 112, 0) 0.283662px -0.958924px 0px,
  	rgb(172, 112, 0) 0.96017px -0.279415px 0px;
  --text-stroke2: rgb(172, 112, 0) 0.5px 0px 0px,
  	rgb(172, 112, 0) 0.5px 0.5px 0px,
  	rgb(172, 112, 0) -0.25px 0.25px 0px,
  	rgb(172, 112, 0) -0.25px 0.25px 0px,
  	rgb(172, 112, 0) -0.25px -0.25px 0px,
  	rgb(172, 112, 0) 0.25px -0.25px 0px,
  	rgb(172, 112, 0) 0.25px -0.25px 0px;
  --easing-cubic1: cubic-bezier(0, 0, .2, 1);
}

/* --------------------------------------------------
		共通
-------------------------------------------------- */
.complete-limit {
  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;
  -ms-flex-wrap: wrap;
  z-index: 1;
  position: relative;
      flex-wrap: wrap;
  padding: 24px 20px;
  gap: 8px 24px;
  background-color: var(--color-complete1);
}
.kv .complete-limit {
  display: none;
}
.l-footer .complete-limit {
  background-color: var(--color-complete2);
}
.complete-limit__text {
  color: var(--color-white);
  font-weight: 700;
  font-size: calc(28 / 10 * 1rem);
  line-height: 1.3928571429;
  letter-spacing: calc(200 / 1000 * 1em);
}
.l-footer .complete-limit__text {
  line-height: 1.2580645161;
}
.complete-limit__notice {
  color: var(--color-white);
  font-weight: 400;
  font-size: calc(14 / 10 * 1rem);
  line-height: 1.7142857143;
  letter-spacing: calc(25 / 1000 * 1em);
}

.c-section {
  padding-right: 20px;
  padding-left: 20px;
}

.c-sec-ttl {
  z-index: 1;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 24px 84px 0;
}
.c-sec-ttl__orn {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  -webkit-filter: blur(6px);
          filter: blur(6px);
}
.c-sec-ttl__orn img {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
}
.c-sec-ttl__main {
  -webkit-filter: drop-shadow(0 0 6px #fff);
  translate: 0 100%;
          filter: drop-shadow(0 0 6px #fff);
  opacity: 0;
}
.c-sec-ttl.is-view .c-sec-ttl__orn {
  -webkit-transition: -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: filter 0.8s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  -webkit-filter: blur(0);
          filter: blur(0);
}
.c-sec-ttl.is-view .c-sec-ttl__orn img {
  -webkit-transition: clip-path 1s cubic-bezier(0.5, 0, 0.5, 1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.c-sec-ttl.is-view .c-sec-ttl__main {
  -webkit-transition: opacity 0.6s 0.2s, translate 1s 0.2s cubic-bezier(0, 0, 0, 1);
  translate: 0;
  opacity: 1;
  transition: opacity 0.6s 0.2s, translate 1s 0.2s cubic-bezier(0, 0, 0, 1);
}

.pagenav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  position: relative;
          justify-content: center;
  padding: 64px 20px 100px;
  gap: 20px;
}
.pagenav::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/navline.svg") center bottom no-repeat;
  content: "";
  pointer-events: none;
}

/* --------------------------------------------------
	MARK:Movie
-------------------------------------------------- */
.movie {
  margin-bottom: 150px;
  padding-top: 100px;
}
.movie .c-sec-ttl {
  margin-bottom: 56px;
}
.movie-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 553px;
  margin-inline: auto;
  gap: 40px;
}
.movie-body__btn {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
  display: block;
          appearance: none;
  width: 100%;
  max-width: 553px;
  margin-inline: auto;
  padding: 0;
  border: none;
  background-color: var(--color-gray2);
  cursor: pointer;
}
.movie-body__btn::before {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: var(--color-black);
  content: "";
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.5, 0, 0.5, 1);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.5, 0, 0.5, 1);
}
.movie-body__btn:hover::before {
  opacity: 0.75;
}
.movie-body__img {
  width: 100%;
  height: auto;
}
.movie-body__frame {
  z-index: 2;
  position: absolute;
  width: 100%;
  inset: 0;
}

/* --------------------------------------------------
	MARK:Concept
-------------------------------------------------- */
.concept {
  position: relative;
  margin-bottom: 156px;
  padding-block: 110px 110px;
}
.concept-bg {
  position: absolute;
  max-width: 1200px;
  margin: auto;
  inset: 0;
  background: url(../img/bg_paper-l_lower--ori.png) no-repeat center bottom, url(../img/bg_paper-l_upper.png) no-repeat center top;
  background-size: 1200px auto;
  -webkit-filter: drop-shadow(0 23px 3px rgba(0, 0, 0, 0.0784));
          filter: drop-shadow(0 23px 3px rgba(0, 0, 0, 0.0784));
}
.concept .c-container {
  position: relative;
  max-width: 960px;
}
.concept .c-sec-ttl {
  margin-bottom: 56px;
}
.concept__lead {
  margin-bottom: 37px;
  color: var(--color-brown);
  font-size: 3.2rem;
  line-height: 1.5625;
  font-family: var(--fonts-newtegomin);
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow: var(--text-stroke);
}
.concept__lead:before, .concept__lead:after {
  content: "～";
}
.concept__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
}
.concept-fig {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 55.434782608%;
}
.concept-fig__img {
  width: 100%;
  height: auto;
}
.concept__txt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 41.739130434%;
  padding-bottom: 80px;
}

/* --------------------------------------------------
		MARK:story
-------------------------------------------------- */
.story {
  margin-bottom: 160px;
  padding-top: 24px;
}
.story .c-container {
  position: relative;
}
.story-bg {
  position: absolute;
  inset: 0 20px;
  background: url(../img/bg_story-lt.svg) no-repeat left top, url(../img/bg_story-rt.svg) no-repeat right top, url(../img/bg_story-rb.svg) no-repeat right bottom, url(../img/bg_story-lb.svg) no-repeat left bottom;
}
.story__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 83px 72px 83px 62px;
}
.story__body {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 36.00451467%;
  padding-top: 15px;
}
.story .c-sec-ttl {
  margin-bottom: 50px;
  padding-inline: 34px;
}
.story__fig {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 56.5462753%;
}

/* --------------------------------------------------
		MARK:character
-------------------------------------------------- */
.character {
  padding-block: 100px 148px;
  background-color: rgba(235, 232, 211, 0.79);
}
.character .c-container {
  max-width: 1166px;
}
.character .c-sec-ttl {
  margin-bottom: 56px;
}
.character .char-slide {
  position: relative;
}
.character .char-slide-main .splide__slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
}
.character .char-slide-main .splide__slide.is-active .char-slide-main__img img {
  translate: 0;
  opacity: 1;
}
.character .char-slide-main .splide__arrows {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 375/300;
  width: 100%;
}
.character .char-slide-main .splide__arrow {
  width: 50px;
  height: 50px;
  opacity: 1;
}
.character .char-slide-main .splide__arrow::before {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 20px;
  translate: calc(-50% - 2px) -50%;
  background: url("../img/icon-arrow.svg") center no-repeat;
  background-size: contain;
  content: "";
}
.character .char-slide-main .splide__arrow::after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #AC7001;
  content: "";
  -webkit-filter: blur(3px);
  z-index: 1;
  clip-path: circle(50% at 50% 50%);
          filter: blur(3px);
  opacity: 0.33;
}
.character .char-slide-main .splide__arrow svg {
  display: none;
}
.character .char-slide-main .splide__arrow--prev {
  left: -16px;
}
.character .char-slide-main .splide__arrow--next {
  right: -16px;
  translate: 0 -2px;
}
.character .char-slide-main .splide__arrow--next::before {
  translate: calc(-50% + 2px) -50%;
  scale: -1 1;
}
.character .char-slide-main__img {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  background: url("../img/frame_character_pc.svg") right top no-repeat;
  background-size: contain;
}
.character .char-slide-main__img img {
  translate: 24% 0;
  opacity: 0;
  -webkit-transition: opacity 0.4s 1.2s cubic-bezier(0, 0, 0, 1), translate 0.6s 1.2s cubic-bezier(0, 0, 0, 1);
  transition: opacity 0.4s 1.2s cubic-bezier(0, 0, 0, 1), translate 0.6s 1.2s cubic-bezier(0, 0, 0, 1);
}
.character .char-slide-main__introduction {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 524px;
          flex: 0 0 524px;
  -webkit-margin-before: 32px;
  position: relative;
  width: 100%;
  max-width: 524px;
          margin-block-start: 32px;
}
.character .char-slide-main__inner {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  min-height: 456px;
  padding: clamp(34px, 5.1177072671vw, 50px) clamp(26px, 3.275332651vw, 40px);
  gap: 16px;
  background: url("../img/bg_paper_character_pc.png") center top no-repeat;
  background-size: 100% 100%;
}
.character .char-slide-main__ttl {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  gap: 0;
  color: var(--color-brown);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.6129032258;
  font-family: var(--fonts-newtegomin);
  text-shadow: var(--text-stroke2);
}
.character .char-slide-main__ttl .is-name {
  letter-spacing: calc(-15 / 1000 * 1em);
}
.character .char-slide-main__ttl .is-cv {
  font-size: 2rem;
}
.character .char-slide-main__txt {
  color: #4D4645;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
}
.character .char-slide-thumbnail {
  z-index: 5;
  position: absolute;
  top: 522px;
  right: 0;
  max-width: 532px;
}
.character .char-slide-thumbnail .splide:not(.is-active) .splide__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px 10px;
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}
.character .char-slide-thumbnail .splide:not(.is-active) .splide__slide {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.character .char-slide-thumbnail .splide__track {
  overflow: visible;
}
.character .char-slide-thumbnail .splide__slide.is-active .char-slide-thumbbtn {
  background-color: #E0E06F;
}
.character .char-slide-thumbnail .splide__slide.is-active .char-slide-thumbbtn img {
  opacity: 1;
}
.character .char-slide-thumbnail .splide__slide.is-active .char-slide-thumbbtn::after {
  border-width: 5px;
  opacity: 1;
}
.character .char-slide-thumbbtn {
  position: relative;
  width: 80px;
  height: 50px;
  border: none;
  background: none;
  background-color: #888175;
  cursor: pointer;
  -webkit-transition: background-color 0.4s cubic-bezier(0, 0, 0, 1);
  transition: background-color 0.4s cubic-bezier(0, 0, 0, 1);
}
.character .char-slide-thumbbtn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
  position: absolute;
  top: 0;
  left: 0;
     object-position: center;
  opacity: 0.7;
  -webkit-transition: opacity 0.4s cubic-bezier(0, 0, 0, 1);
  transition: opacity 0.4s cubic-bezier(0, 0, 0, 1);
}
.character .char-slide-thumbbtn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 10px);
  height: calc(100% - 8px);
  border: 0px solid var(--color-white);
  content: "";
  -webkit-box-shadow: 0px 0px 10px #ac7000;
  translate: -50% -50%;
          box-shadow: 0px 0px 10px #ac7000;
  opacity: 0;
  -webkit-transition: opacity 0.4s, border-width 0.4s cubic-bezier(0, 0, 0, 1);
  transition: opacity 0.4s, border-width 0.4s cubic-bezier(0, 0, 0, 1);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.character .char-slide-thumbbtn[aria-current=true] {
  background-color: #E0E06F;
}
.character .char-slide-thumbbtn[aria-current=true] img {
  opacity: 1;
}
.character .char-slide-thumbbtn[aria-current=true]::after {
  border-width: 5px;
  opacity: 1;
}
.character .char-slide-thumbbtn:hover {
  background-color: #E0E06F;
}
.character .char-slide-thumbbtn:hover img {
  opacity: 1;
}
.character .char-slide-thumbbtn:hover::after {
  border-width: 5px;
  opacity: 1;
}

/* --------------------------------------------------
		MARK:machine
-------------------------------------------------- */
.machine {
  position: relative;
  margin-bottom: 80px;
  padding-block: 92px 64px;
}
.machine-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #333;
  pointer-events: none;
}
.machine-bg #machine_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.machine-bg #machine_bg video.vjs-tech {
  -o-object-fit: cover;
     object-fit: cover;
}
.machine .c-container {
  position: relative;
}
.machine-ttl {
  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;
  row-gap: 26px;
          align-items: center;
  margin-bottom: 42px;
}
.machine-ttl__orn {
  -webkit-filter: blur(6px);
          filter: blur(6px);
}
.machine-ttl__orn img {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  opacity: 0.37;
}
.machine-ttl__main {
  opacity: 0;
  -webkit-filter: blur(10px);
  margin-top: -4.210932%;
          filter: blur(10px);
}
.machine-ttl.is-view .machine-ttl__orn {
  -webkit-transition: -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  transition: filter 0.8s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 0.8s cubic-bezier(0.5, 0, 0.5, 1);
  -webkit-filter: blur(0);
          filter: blur(0);
}
.machine-ttl.is-view .machine-ttl__orn img {
  -webkit-transition: clip-path 1s cubic-bezier(0.5, 0, 0.5, 1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1s cubic-bezier(0.5, 0, 0.5, 1);
}
.machine-ttl.is-view .machine-ttl__main {
  -webkit-transition: opacity 0.4s 0.2s, -webkit-filter 1s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 1;
  transition: opacity 0.4s 0.2s, -webkit-filter 1s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
  transition: opacity 0.4s 0.2s, filter 1s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
  transition: opacity 0.4s 0.2s, filter 1s 0.2s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 1s 0.2s cubic-bezier(0.5, 0, 0.5, 1);
  -webkit-filter: blur(0);
          filter: blur(0);
}
.machine__lead {
  margin-bottom: 56px;
  color: #fff;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.3913043478;
  font-family: var(--fonts-notoserifjp);
  text-align: center;
}
.machine__lead:before, .machine__lead:after {
  content: "～";
}
.machine-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.machine-contents__full-size {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 49.12%;
  padding-inline: 6.56862745%;
  -webkit-filter: drop-shadow(0 0 20px #E9ED8A);
          filter: drop-shadow(0 0 20px #E9ED8A);
}
.machine-contents__body {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}
.machine-contents__desc {
  margin-bottom: 124px;
  color: #fff;
  font-size: clamp(15px, 2.1494370522vw, 21px);
  line-height: 2.2380952381;
}
.machine-contents__point-img {
  position: relative;
  -webkit-margin-after: -124px;
          margin-block-end: -124px;
  translate: 0 -124px;
}
.machine-contents__point-size__img {
  max-width: 1104px;
}

/* --------------------------------------------------
		MARK:Point
-------------------------------------------------- */
.point {
  position: relative;
  margin-bottom: 135px;
}
.point-bg {
  position: absolute;
  max-width: 1200px;
  margin: auto;
  inset: 0;
  background: url(../img/bg_paper-l_lower.png) no-repeat center bottom, url(../img/bg_paper-l_upper.png) no-repeat center top;
  background-size: 1200px auto;
  -webkit-filter: drop-shadow(0 23px 3px rgba(0, 0, 0, 0.0784));
          filter: drop-shadow(0 23px 3px rgba(0, 0, 0, 0.0784));
}
.point .c-container {
  position: relative;
  padding-block: 100px 94px;
}
.point .c-sec-ttl {
  margin-bottom: 24px;
}
.point__lead {
  width: 100%;
  max-width: 815px;
  margin: 0 auto 26px;
}
.point__desc {
  width: 100%;
  max-width: 815px;
  margin: 0 auto 36px;
  padding-inline: 38px;
}
.point-v-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 0 45px;
}
.point-v-list__item {
  translate: 0 40%;
  opacity: 0;
}
.point-v-list__item img {
  max-width: unset;
}
.point-v-list__item--roxy img {
  width: calc(100% + 20px);
}
.point-v-list__item--sylphy img {
  width: calc(100% + 30px);
}
.point-v-list__item--eris img {
  width: calc(100% + 20px);
}
.point-v-list.is-view .point-v-list__item {
  -webkit-transition: opacity 0.3s, translate 0.6s cubic-bezier(0, 0, 0, 1);
  translate: 0;
  opacity: 1;
  transition: opacity 0.3s, translate 0.6s cubic-bezier(0, 0, 0, 1);
}
.point-v-list.is-view .point-v-list__item--sylphy {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.point-v-list.is-view .point-v-list__item--eris {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

/* --------------------------------------------------
		MARK:Flow
-------------------------------------------------- */
.flow {
  padding-top: 100px;
  padding-bottom: 60px;
  background: url(../img/bg_gameflowwrap.png) center top repeat-y;
  background-size: 100% auto;
}
.flow.is-fan {
  padding-bottom: 96px;
}
.flow .c-container {
  position: relative;
  max-width: 1166px;
}
.flow .c-sec-ttl {
  margin-bottom: 56px;
  padding-inline: 82px;
}
.flow .c-sec-ttl__orn img {
  opacity: 0.3;
}
.flow__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
}
.flow__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------------------
		MARK:Flow 特記事項
-------------------------------------------------- */
.specialnote {
  position: relative;
}
.specialnote .specialnote-bg {
  z-index: 0;
  position: sticky;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100vh;
  -webkit-margin-after: calc(-100vh + 80px);
          margin-block-end: calc(-100vh + 80px);
}
.specialnote .specialnote-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.specialnote .specialnote-ttl {
  text-align: center;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}
.specialnote .specialnote-lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: 20px;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}
.specialnote .specialnote-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  max-width: 1194px;
  margin-inline: auto;
  padding-block: 40px 80px;
  gap: 20px;
}
.specialnote .specialnote-container.vstoc .specialnote-img {
  max-width: 1126px;
  margin-inline: auto;
}

.vheroine {
  position: relative;
  overflow: clip;
}
.vheroine .vheroine-bg {
  z-index: 0;
  position: sticky;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100vh;
  -webkit-margin-after: calc(-100vh + 80px);
          margin-block-end: calc(-100vh + 80px);
}
.vheroine .vheroine-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.vheroine .vheroine-container {
  z-index: 1;
  position: relative;
}
.vheroine .heroineeffect {
  -webkit-padding-after: 68px;
          padding-block-end: 68px;
}
.vheroine .heroineeffect .vheroine-ttl {
  text-align: center;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
.vheroine .heroineeffect-vzone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}
.vheroine .heroineeffect-vzone .vheroine-pic {
  position: relative;
  opacity: 0;
}
.vheroine .heroineeffect-vzone.is-view .vheroine-pic {
  -webkit-animation: slideUp 0.6s var(--easing-cubic1) forwards;
          animation: slideUp 0.6s var(--easing-cubic1) forwards;
}
.vheroine .heroineeffect .vheroine-effect {
  translate: 0 -16px;
  -webkit-filter: blur(6px);
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
          filter: blur(6px);
}
.vheroine .heroineeffect .vheroine-effect.is-view {
  -webkit-filter: blur(0);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          filter: blur(0);
  -webkit-transition: clip-path 0.6s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 0.6s cubic-bezier(0.5, 0, 0.5, 1);
  transition: clip-path 0.6s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 0.6s cubic-bezier(0.5, 0, 0.5, 1);
  transition: clip-path 0.6s cubic-bezier(0.5, 0, 0.5, 1), filter 0.6s cubic-bezier(0.5, 0, 0.5, 1);
  transition: clip-path 0.6s cubic-bezier(0.5, 0, 0.5, 1), filter 0.6s cubic-bezier(0.5, 0, 0.5, 1), -webkit-filter 0.6s cubic-bezier(0.5, 0, 0.5, 1);
}
.vheroine .doubleheroine {
  width: 100%;
  max-width: 1166px;
  margin-inline: auto;
  -webkit-padding-after: 64px;
          padding-block-end: 64px;
}
.vheroine .doubleheroine .doubleheroine-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 1166px;
  margin-inline: auto;
  padding-inline: 20px;
  -webkit-margin-after: 26px;
  z-index: 1;
  position: relative;
          margin-block-end: 26px;
}
.vheroine .doubleheroine .doubleheroine-ttl .is-sub {
  -webkit-margin-start: -164px;
          margin-inline-start: -164px;
}
.vheroine .doubleheroine-activate {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  translate: 0 -25%;
}
.vheroine .doubleheroine-vzone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.vheroine .doubleheroine-vzone .doubleheroine-pic {
  opacity: 0;
}
.vheroine .doubleheroine-vzone.is-view .doubleheroine-pic {
  -webkit-animation: slideUp 0.6s var(--easing-cubic1) forwards;
          animation: slideUp 0.6s var(--easing-cubic1) forwards;
}
.vheroine .doubleheroine-vzone.is-view .doubleheroine-pic:nth-of-type(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.vheroine .doubleheroine-vzone.is-view .doubleheroine-pic:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.vheroine .doubleheroine-vzone.is-view .doubleheroine-pic:nth-of-type(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.vheroine .allheroine {
  padding-top: 17.5695461201vw;
}
.vheroine .allheroine-ttl {
  z-index: 1;
  position: relative;
  text-align: center;
}
.vheroine .allheroine-character {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.vheroine .allheroine-character.is-view .allheroine-pic {
  -webkit-animation: slideUp 0.6s 0.1s var(--easing-cubic1) forwards;
          animation: slideUp 0.6s 0.1s var(--easing-cubic1) forwards;
}
.vheroine .allheroine-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.vheroine .allheroine-pic img {
  aspect-ratio: 1366/636;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.vheroine .allheroine-txt {
  display: -ms-grid;
  display: grid;
      grid-template-areas: "txt1 all txt3";
  -ms-grid-columns: auto 10px auto 10px 412px;
  grid-template-columns: auto auto 412px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 2;
  position: relative;
          justify-content: center;
  gap: 10px;
  translate: 0 -70%;
  -webkit-margin-after: -80px;
          margin-block-end: -80px;
}
.vheroine .allheroine-txt1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: txt1;
  translate: 0 40px;
}
.vheroine .allheroine-txt2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: all;
}
.vheroine .allheroine-txt3 {
  grid-area: txt2;
  translate: 0 35px;
}

.turningpoint {
  position: relative;
  padding-block: 80px 88px;
}
.turningpoint .turningpoint-bg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1366/1140;
  width: 100%;
  height: 100%;
}
.turningpoint .turningpoint-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.turningpoint .turningpoint-container {
  z-index: 1;
  position: relative;
}
.turningpoint .turningpoint-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-inline: 20px;
  text-align: center;
}
.turningpoint .turningpoint-pic {
  text-align: center;
}
.turningpoint .turningpoint-txt {
  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;
  max-width: 1020px;
  margin-inline: auto;
  gap: 8.1991215227vw;
  -webkit-margin-before: 10.7613469985vw;
          margin-block-start: 10.7613469985vw;
}
.turningpoint .turningpoint-txt2 {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}

/* --------------------------------------------------
		MARK:SPEC
-------------------------------------------------- */
.spec {
  padding-top: 100px;
  padding-bottom: 70px;
}
.spec .c-container {
  position: relative;
}
.spec .c-sec-ttl {
  margin-bottom: 80px;
  padding-inline: 80px;
}
.spec .c-sec-ttl__orn img {
  opacity: 0.3;
}
.spec__desc {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 30px auto 30px auto;
      grid-template-areas: "case reel" "info reel" "hit hit";
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 30px;
}
.spec__case {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: case;
}
.mirai-h__description--container > .spec__case {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.spec__case img {
  -webkit-filter: drop-shadow(0 0 40px rgba(255, 245, 0, 0.83));
          filter: drop-shadow(0 0 40px rgba(255, 245, 0, 0.83));
}
.spec__reel {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: reel;
}
.spec__info {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: info;
  margin-top: auto;
}
.spec__hit {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: hit;
}

/* --------------------------------------------------
		MARK:MUSIC
-------------------------------------------------- */
.music {
  padding-inline: 20px;
  padding-block: 150px 100px;
  background: url(../img/bg-music.jpg) no-repeat center;
  background-size: cover;
}
.music .c-container {
  position: relative;
  max-width: 1250px;
  padding-inline: 10px;
  padding-block: 100px 113px;
}
.music-bg {
  position: absolute;
  inset: 0;
  background: url(../img/pic_music-panel.png) no-repeat top center;
  background-size: contain;
}
.music .c-sec-ttl {
  margin-bottom: 50px;
}
.music .c-sec-ttl__orn img {
  opacity: 0.3;
}
.music .music-read {
  max-width: 520px;
  margin-bottom: 80px;
  margin-inline: auto;
  text-align: center;
}
.music .music-list {
  max-width: 922px;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------
		MARK:初心者向け パチスロの遊び方
-------------------------------------------------- */
.howto {
  background-color: #D3D4B2;
}
.howto__kv {
  position: sticky;
  top: 0;
  left: 0;
  height: 27.8184480234vw;
}
.howto__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 1;
  position: relative;
          justify-content: center;
  padding: 88px 20px 32px;
}
.howto__wrapper {
  padding-inline: 20px;
  -webkit-padding-after: 164px;
  z-index: 1;
  position: relative;
          padding-block-end: 164px;
  overflow: clip;
}
.howto__wrapper:has(.howto__section) {
  padding-inline: 0;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}
.howto__wrapper::before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 50%;
  width: 67.6427525622vw;
  height: 70.2049780381vw;
  translate: -50% -38%;
  background: url("../img/page/bg-magiccircle_pc.png") center top no-repeat;
  background-size: contain;
  content: "";
  opacity: 0.6;
  pointer-events: none;
}
.howto__wrapper::after {
  display: block;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(26px);
  background-color: rgba(211, 212, 178, 0.66);
  content: "";
  pointer-events: none;
}
.howto__contents {
  max-width: 1126px;
  margin-inline: auto;
  -webkit-margin-before: 40px;
  z-index: 2;
  position: relative;
          margin-block-start: 40px;
  text-align: center;
}
.howto__contents--title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: 136px;
  padding-block: 16px;
  -webkit-margin-after: 24px;
  min-height: 78px;
          margin-block-end: 24px;
  border-radius: 60px;
  background-color: #AC7000;
  -webkit-box-shadow: 0px 7px 13px rgba(20, 3, 0, 0.6);
          box-shadow: 0px 7px 13px rgba(20, 3, 0, 0.6);
}
.howto__contents--title .is-label {
  color: #fff;
  font-weight: 900;
  font-size: calc(33 / 10 * 1rem);
  line-height: 1.0606060606;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
}
.howto__contents--frame {
  position: relative;
  background-repeat: no-repeat;
}
.howto__contents--frame::after {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  translate: -50% -50%;
  background-image: url("../img/page/bg-contents_pc.png");
  background-position: 15px 15px;
  background-size: 393px auto;
  background-repeat: no-repeat;
  background-color: #fff;
  content: "";
  pointer-events: none;
}
.howto__contents--inner {
  z-index: 1;
  position: relative;
  padding: 64px 48px 72px;
  background-image: url("../img/page/bg-howtoframe1.svg"), url("../img/page/bg-howtoframe2.svg"), url("../img/page/bg-howtoframe3.svg"), url("../img/page/bg-howtoframe4.svg");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}
.howto__contents--inner:has(.is-col3) {
  -webkit-padding-before: 80px;
          padding-block-start: 80px;
}
.is-attention .howto__contents--inner {
  -webkit-padding-before: 96px;
          padding-block-start: 96px;
}
.howto__contents--inner::before {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 39px;
  width: calc(100% - 78px);
  height: 100%;
  background-image: url("../img/page/bg-howtoframe-bar2top.svg"), url("../img/page/bg-howtoframe-bar2btm.svg");
  background-position: left top, left bottom;
  background-repeat: repeat-x;
  content: "";
  pointer-events: none;
}
.howto__contents--inner::after {
  z-index: 1;
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: calc(100% - 88px);
  background-image: url("../img/page/bg-howtoframe-bar1left.svg"), url("../img/page/bg-howtoframe-bar1right.svg");
  background-position: left top, right top;
  background-repeat: repeat-y;
  content: "";
  pointer-events: none;
}
.howto__contents--block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  max-width: 940px;
  margin-inline: auto;
  gap: 32px;
}
.howto__contents--block + .howto__contents--block {
  -webkit-margin-before: 72px;
          margin-block-start: 72px;
}
.howto__contents--block:has(.is-col3) {
  max-width: 970px;
}
.howto__contents .c-sec-ttl {
  -webkit-padding-before: 12px;
          padding-block-start: 12px;
}
.howto__contents .c-sec-ttl__orn {
  height: 40px;
}
.howto__contents--subtitle {
  color: #AC7000;
  font-weight: 900;
  font-size: calc(36 / 10 * 1rem);
  line-height: 1.0833333333;
}
.howto__contents--list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  position: relative;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px;
  counter-reset: step;
}
.howto__contents--list.is-col3 {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.howto__contents--item {
  position: relative;
}
.howto__contents--item:not(:last-child)::before {
  position: absolute;
  top: 28.571428%;
  left: 100%;
  width: 40px;
  height: 44px;
  translate: calc(100% - 24px) 0;
  rotate: -90deg;
  background: url("../img/page/img-arrow.png") center no-repeat;
  background-size: contain;
  content: "";
}
.is-2nd .howto__contents--item:not(:last-child)::before {
  top: 44.30097%;
}
.is-col3 .howto__contents--item:not(:last-child)::before {
  top: 25%;
}
.is-col3 .howto__contents--item:nth-child(2)::before {
  translate: calc(100% - 64px) 0;
}
.howto__contents--img {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 12px;
  text-align: left;
}
.howto__contents--caption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  color: #4D4645;
  font-weight: 500;
  font-size: calc(18 / 10 * 1rem);
  line-height: 1.5555555556;
}
.howto__contents--caption::before {
  content: counter(step);
  counter-increment: step;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
          flex: 0 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-padding-after: 4px;
  width: 25px;
  height: 21px;
          padding-block-end: 4px;
  translate: 0 2px;
  background: url("../img/page/icon-list.png") no-repeat;
  background-size: contain;
  color: #fff;
  font-weight: 900;
  font-size: calc(15 / 10 * 1rem);
  line-height: 1;
}
.howto__contents--dotlist {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 8px;
  text-align: left;
}
.howto__contents--dotitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  color: #4D4645;
  font-weight: 500;
  font-size: calc(18 / 10 * 1rem);
  line-height: 1.5555555556;
}

.howto__contents--dotitem span {
  display: block;
}


.howto__contents--dotitem2{
  display: block;        /* ← flexをやめる */
  position: relative;
  padding-left: 20px;    /* ●の分のインデント */
  color: #4D4645;
  font-weight: 500;
  font-size: calc(18 / 10 * 1rem);
  line-height: 1.5555555556;
}

/* ●の表現は疑似要素で維持 */
.howto__contents--dotitem2::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #AC7000;
  content: "";
}



.howto__contents--dotitem::before {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 10px;
  height: 10px;
  translate: 0 100%;
  border-radius: 50%;
  background-color: #AC7000;
  content: "";
}
.howto__contents--notice {
  font-weight: 500;
  font-size: calc(16 / 10 * 1rem);
  line-height: 1.5;
  text-align: left;
}
.howto__contents--column {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 32px 348px;
  grid-template-columns: 1fr 348px;
  -ms-grid-rows: auto 16px 1fr;
  grid-template-rows: auto 1fr;
      grid-template-areas: "dotlist attention" "notice attention";
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 16px 32px;
}
.howto__contents--column .howto__contents--dotlist {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: dotlist;
}
.howto__contents--column .howto__contents--notice {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: notice;
}
.howto__contents--column .howto__contents--attention {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: attention;
}
.howto__contents--attention {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 10px;
}
.howto__contents--atttxt {
  font-weight: 500;
  font-size: calc(16 / 10 * 1rem);
  line-height: 1.5;
  text-align: left;
}
.howto .is-marker {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: #E9ED8A;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.2em;
  -webkit-text-decoration-skip-ink: none;
  background: none;
          text-decoration-skip-ink: none;
}
.howto__backbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 2;
  position: relative;
          justify-content: center;
  padding: 60px 20px;
}
.howto__section {
  position: relative;
  padding-inline: 20px;
  overflow: clip;
}
.howto__section::after {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(254, 255, 212, 0.44);
  content: "";
  pointer-events: none;
}
.howto__section.is-point1::before {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/page/bg-howto1.png") left top no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none;
}
.howto__section.is-point2::before {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/page/bg-howto2a.png") left center no-repeat, url("../img/page/bg-howto2b.png") right center no-repeat;
  background-size: auto 100%, auto 100%;
  content: "";
  pointer-events: none;
}
.howto__section.is-point3::before {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/page/bg-howto3.png") right top no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none;
}
.howto__section.is-point4 .is-img2 {
  display: none;
}
.howto__section.is-point5::before {
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/page/bg-howto4.png") left center no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none;
}
.howto__section--container {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
  z-index: 2;
  position: relative;
          align-items: flex-start;
  max-width: 1126px;
  margin-inline: auto;
}
.is-point1 .howto__section--container, .is-point3 .howto__section--container, .is-point5 .howto__section--container {
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
      grid-template-areas: "ttl mv" "conts mv";
}
.is-point2 .howto__section--container, .is-point4 .howto__section--container {
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
      grid-template-areas: "mv ttl" "mv conts";
}
.howto__section--hgroup {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: ttl;
  width: 467px;
}
.is-point2 .howto__section--container > .howto__section--hgroup, .is-point4 .howto__section--container > .howto__section--hgroup {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.howto__section--hgroup .c-sec-ttl {
  margin-block: 90px 20px;
}
.is-point1 .howto__section--hgroup, .is-point3 .howto__section--hgroup, .is-point5 .howto__section--hgroup {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.is-point2 .howto__section--hgroup, .is-point4 .howto__section--hgroup {
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
.is-point1 .howto__section--hgroup .c-sec-ttl {
  margin-block: 7.027818448vw 20px;
}
.is-point2 .howto__section--hgroup {
  width: 41.5080527086vw;
  max-width: 567px;
}
.is-point2 .howto__section--hgroup .c-sec-ttl {
  margin-block: 9.663250366vw 20px;
}
.is-point3 .howto__section--hgroup {
  width: 36.6032210835vw;
  max-width: 500px;
}
.is-point3 .howto__section--hgroup .c-sec-ttl {
  margin-block: 9.663250366vw 20px;
}
.is-point4 .howto__section--hgroup {
  width: 31.1859443631vw;
  max-width: 426px;
}
.is-point4 .howto__section--hgroup .c-sec-ttl {
  margin-block: 9.663250366vw 20px;
}
.is-point5 .howto__section--hgroup {
  width: 36.6032210835vw;
  max-width: 500px;
}
.is-point5 .howto__section--hgroup .c-sec-ttl {
  margin-block: 9.663250366vw 20px;
}
.howto__section--title {
  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;
  color: #4D1A0F;
  text-align: center;
  text-shadow: 0px 0px 10px #fff;
}
.howto__section--title .is-mainlabel {
  font-weight: 900;
  font-size: calc(36 / 10 * 1rem);
  line-height: 1.3;
  letter-spacing: calc(60 / 1000 * 1em);
}
.howto__section--title .is-sublabel {
  font-weight: 900;
  font-size: calc(20 / 10 * 1rem);
  letter-spacing: calc(60 / 1000 * 1em);
}
.howto__section--title ruby {
  position: relative;
}
.howto__section--title rt {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  font-size: calc(8 / 10 * 1rem);
  white-space: nowrap;
}
.howto__section--movie {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  position: relative;
  grid-area: mv;
  width: 435px;
  height: 100%;
}
.is-point2 .howto__section--container > .howto__section--movie, .is-point4 .howto__section--container > .howto__section--movie {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
}
.howto__section--movie img {
  width: 100%;
  height: auto;
}
.is-point3 .howto__section--movie {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.is-point3 .howto__section--movie .is-img1 {
  z-index: -1;
  position: absolute;
  top: 30px;
  left: -80px;
}
.is-point3 .howto__section--movie .is-img2 {
  z-index: -1;
  position: absolute;
  top: 100px;
  right: -90px;
}
.is-point3 .howto__section--movie .is-img3 {
  z-index: -1;
  position: absolute;
  top: 448px;
  right: -151px;
}
.is-point3 .howto__section--movie .is-img4 {
  display: none;
}
.howto__section--contents {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  grid-area: conts;
  width: 34.1874084919vw;
  max-width: 467px;
  gap: 24px;
}
.is-point2 .howto__section--container > .howto__section--contents, .is-point4 .howto__section--container > .howto__section--contents {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.is-point1 .howto__section--contents, .is-point3 .howto__section--contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  max-width: 467px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.is-point3 .howto__section--contents {
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
.is-point2 .howto__section--contents, .is-point4 .howto__section--contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  max-width: 467px;
  -webkit-margin-end: auto;
          margin-inline-end: auto;
}
.is-point4 .howto__section--contents {
  max-width: 380px;
}
.is-point5 .howto__section--contents {
  width: 35.1390922401vw;
  max-width: 480px;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.is-point5 .howto__section--contents .c-sec-ttl {
  margin-block: 5.8565153734vw 20px;
}
.howto__section--text {
  font-weight: 700;
  font-size: calc(18 / 10 * 1rem);
  line-height: 1.1111111111;
  text-align: left;
  text-shadow: 0px 0px 10px #fff;
}
.howto__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 20px;
  counter-reset: num;
}
.howto__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.howto__list li::before {
  content: counter(num);
  counter-increment: num;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
          flex: 0 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-padding-after: 4px;
  width: 25px;
  height: 21px;
          padding-block-end: 4px;
  background: url("../img/page/icon-list.png") no-repeat;
  background-size: contain;
  color: #fff;
  font-weight: 900;
  font-size: calc(15 / 10 * 1rem);
  line-height: 1;
  -webkit-filter: drop-shadow(0px 0px 10px #fff);
          filter: drop-shadow(0px 0px 10px #fff);
}
.howto__list .is-label {
  color: #E61773;
  font-weight: 900;
  font-size: calc(17 / 10 * 1rem);
  line-height: 1.4705882353;
  text-shadow: 0px 0px 10px #fff;
}
.howto__emphasis {
  color: #D816C9;
  font-weight: 900;
  font-size: calc(22 / 10 * 1rem);
  line-height: 1.1363636364;
  text-shadow: 0px 0px 10px #fff;
  -webkit-margin-before: 25px;
          margin-block-start: 25px;
}
.howto__movie--btn {
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  vertical-align: bottom;
  cursor: pointer;
}
.howto__movie--btn::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/icon-play.svg") center no-repeat;
  background-size: 120px;
  content: "";
}
.howto__backbtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 2;
  position: relative;
          justify-content: center;
  padding: 68px 20px 60px;
}
.howto__footer {
  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;
  -webkit-padding-before: 24px;
  z-index: 2;
  position: relative;
  min-height: 224px;
          padding-block-start: 24px;
  background: url("../img/page/bg-howto_footer.png") center no-repeat;
  background-size: cover;
}

/* --------------------------------------------------
		MARK:新筐体(MIRAI-H)
-------------------------------------------------- */
.mirai-h {
  position: relative;
}
.mirai-h .machine-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.mirai-h .machine-bg #machine_bg {
  -o-object-fit: cover;
     object-fit: cover;
}
.mirai-h__kv {
  z-index: 1;
  position: relative;
  height: 62.5183016105vw;
  margin-bottom: 80px;
  padding-block: 92px 64px;
  background: url("../img/page/bg-mirai-h.png") center top no-repeat;
  background-size: cover;
}
.mirai-h__kv img {
  width: 100%;
  height: auto;
}
.mirai-h__kv--title {
  position: absolute;
  top: 4.6120058565vw;
  left: 10.3221083455vw;
  width: 27.4524158126vw;
  height: auto;
}
.mirai-h__kv--keyword {
  z-index: 2;
  position: absolute;
  top: 4.39238653vw;
  left: 38.6530014641vw;
  width: 53.4407027818vw;
  height: auto;
}
.mirai-h__kv--case {
  position: absolute;
  top: 14.055636896vw;
  left: 7.3206442167vw;
  width: 38.0673499268vw;
  height: auto;
}
.mirai-h__kv--casetxt {
  position: absolute;
  top: 13.17715959vw;
  right: 0;
  width: 62.2254758419vw;
  height: auto;
}
.mirai-h__description {
  z-index: 1;
  position: relative;
  padding-inline: 20px;
  padding-block: 50px 60px;
  color: #fff;
}
.mirai-h__description--title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-margin-after: 32px;
          margin-block-end: 32px;
}
.mirai-h__description--container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px auto 30px 1fr;
  grid-template-columns: 1fr auto 1fr;
      grid-template-areas: "list1 case list2";
  max-width: 1126px;
  margin-inline: auto;
  gap: 30px;
}
.mirai-h__description--case {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
  grid-area: case;
          flex: 0 1 auto;
}
.mirai-h__description--container > .mirai-h__description--case {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.mirai-h__description--contents {
  display: contents;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-padding-start: 40px;
          padding-inline-start: 40px;
}
.mirai-h__description--list {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-line-pack: start;
  grid-area: list1;
      align-content: flex-start;
  gap: 20px;
  counter-reset: num;
}
.mirai-h__description--list.is-offset7 {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: list2;
  counter-reset: num 6;
}
.mirai-h__description--list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5px;
}
.mirai-h__description--list li::before {
  content: counter(num);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
          flex: 0 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 26px;
  height: 23px;
  text-align: center;
  counter-increment: num;
  -webkit-padding-after: 3px;
          padding-block-end: 3px;
  border-radius: 50%;
  background-color: #FF0000;
  color: #fff;
  font-weight: 800;
  font-size: calc(18 / 10 * 1rem);
  font-family: var(--fonts-notoserifjp);
}
.mirai-h__description--block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 4px;
  translate: 0 -2px;
}
.mirai-h__description--subtitle {
  color: var(--color-white);
  font-weight: 900;
  font-size: calc(21 / 10 * 1rem);
  line-height: 1.4761904762;
  font-family: var(--fonts-notoserifjp);
  letter-spacing: calc(-10 / 1000 * 1em);
}
.mirai-h__description--text {
  color: var(--color-white);
  font-weight: 300;
  font-size: calc(13 / 10 * 1rem);
  line-height: 1.4615384615;
}
.mirai-h__movie {
  z-index: 1;
  position: relative;
  padding-inline: 20px;
  padding-block: 60px 80px;
}
.mirai-h__movie--container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: center;
}
.mirai-h__movie--title {
  color: var(--color-white);
  font-weight: 900;
  font-size: calc(24 / 10 * 1rem);
  line-height: 1.5;
}
.mirai-h__movie--body {
  max-width: 275px;
  margin-inline: auto;
}
.mirai-h__movie--btn {
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.mirai-h__movie--btn::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/icon-play.svg") center no-repeat;
  background-size: 120px;
  content: "";
}
.mirai-h__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 1;
  position: relative;
          justify-content: center;
  padding: 80px 20px 150px;
}
/* --------------------------------------------------
		MARK:モーダル
-------------------------------------------------- */
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: safe center;
      -ms-flex-align: safe center;
          align-items: safe center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  z-index: 40;
  position: fixed;
  top: 0;
  left: 0;
          justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: 60px 40px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-overflow-scrolling: touch;
}
[aria-hidden=false] .modal__overlay {
  -webkit-animation: fadeIn 0.3s ease-out;
          animation: fadeIn 0.3s ease-out;
}
[aria-hidden=true] .modal__overlay {
  -webkit-animation: fadeOut 0.3s ease-out;
          animation: fadeOut 0.3s ease-out;
}
.modal__close {
  display: block;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  margin-left: auto;
  padding: 0;
  translate: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: opacity 0.3s ease-out, rotate 0.3s ease-out;
  position: relative;
  transition: opacity 0.3s ease-out, rotate 0.3s ease-out;
}
.modal__close::before, .modal__close::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  translate: -50% -50%;
  border-radius: 10px;
  background-color: var(--color-white);
  content: "";
}
.modal__close::before {
  rotate: 45deg;
}
.modal__close::after {
  rotate: -45deg;
}
.modal__container {
  width: 100%;
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
  translate: 0 -70px;
}
.modal__container.is-shortmv {
  max-width: 413px;
  translate: 0 0;
}
.modal__container.is-shortmv .movie__frame {
  width: 100%;
}

/* --------------------------------------------------
		MARK:コンテンツ表示アニメーション
-------------------------------------------------- */
[data-fadein] {
  opacity: 0;
}
[data-fadein].is-view {
  -webkit-animation: fadeIn 0.6s var(--easing-cubic1) forwards;
          animation: fadeIn 0.6s var(--easing-cubic1) forwards;
}

[data-slideup] {
  opacity: 0;
}
[data-slideup].is-view {
  -webkit-animation: slideUp 0.6s var(--easing-cubic1) forwards;
          animation: slideUp 0.6s var(--easing-cubic1) forwards;
}

[data-slidedown] {
  opacity: 0;
}
[data-slidedown].is-view {
  -webkit-animation: slideDown 0.6s var(--easing-cubic1) forwards;
          animation: slideDown 0.6s var(--easing-cubic1) forwards;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media screen and (max-width: 1366px){
  .vheroine .heroineeffect .vheroine-ttl img {
    width: 72.4743777452vw;
  }
  .music .c-container {
    padding-block: 7.3206442167vw 8.2723279649vw;
  }
  .music .music-read {
    max-width: 38.0673499268vw;
  }
  .music .music-list {
    max-width: 67.4963396779vw;
  }
}
@media screen and (max-width: 1194px){
  .specialnote .specialnote-container.vstoc {
    padding-inline: 24px;
  }
  .vheroine .heroineeffect-vzone {
    padding-inline: 20px;
  }
  .vheroine .heroineeffect .vheroine-effect {
    translate: 0 0;
  }
  .vheroine .doubleheroine .doubleheroine-ttl {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}
@media screen and (max-width: 1166px){
  .vheroine .doubleheroine-activate img {
    width: 67.0571010249vw;
  }
  .turningpoint .turningpoint-ttl .is-main img {
    width: 68.4391080617vw;
  }
  .turningpoint .turningpoint-ttl .is-sub img {
    width: 85.6775300172vw;
  }
  .turningpoint .turningpoint-txt1 img {
    width: 40.4802744425vw;
  }
  .turningpoint .turningpoint-txt2 img {
    width: 36.192109777vw;
  }
}
@media screen and (max-width: 1040px){
  .vheroine .doubleheroine-activate {
    translate: 0 0;
  }
}
@media screen and (max-width: 977px){
  .complete-limit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  .complete-limit__text {
    font-size: clamp(16px, 2.8659160696vw, 28px);
  }
  .l-footer .complete-limit__text {
    font-size: clamp(22px, 3.1729785056vw, 31px);
  }
  .concept-fig {
    width: 48%;
  }
  .concept__txt {
    width: 48%;
  }
  .character .c-sec-ttl {
    margin-bottom: 0px;
  }
  .character .char-slide-main .splide__slide {
    -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;
    gap: 0;
  }
  .character .char-slide-main__img {
    background: url("../img/frame_character_sp.svg") center no-repeat;
    background-size: contain;
  }
  .character .char-slide-main__img img {
    translate: 0 24%;
  }
  .character .char-slide-main__introduction {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
    -webkit-margin-before: -10px;
    max-width: 750px;
            margin-block-start: -10px;
  }
  .character .char-slide-main__inner {
    height: 100%;
    min-height: 392px;
    gap: 12px;
    background: url("../img/bg_paper_character_sp.png") center top no-repeat;
    background-size: 100% 100%;
  }
  .character .char-slide-main__ttl {
    font-size: clamp(22px, 2.4564994882vw, 30px);
  }
  .character .char-slide-main__ttl .is-cv {
    font-size: 1.4rem;
  }
  .character .char-slide-main__txt {
    font-size: 1.4rem;
    line-height: 1.7857142857;
  }
  .character .char-slide-thumbnail {
    position: static;
    max-width: 750px;
    -webkit-margin-before: 12px;
    margin-inline: auto;
            margin-block-start: 12px;
  }
  .specialnote .specialnote-bg {
    top: 63px;
    -webkit-margin-after: calc(-100vh + 63px);
            margin-block-end: calc(-100vh + 63px);
  }
  .specialnote .specialnote-ttl {
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
  .specialnote .specialnote-lead {
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
  .specialnote .specialnote-container {
    padding-block: 72px 48px;
  }
  .specialnote .specialnote-container.normal {
    padding-block: 10px 48px;
  }
  .vheroine .vheroine-bg {
    top: 63px;
    -webkit-margin-after: calc(-100vh + 63px);
            margin-block-end: calc(-100vh + 63px);
  }
  .vheroine .heroineeffect-vzone .vheroine-pic::before {
    display: none;
  }
  .vheroine .heroineeffect .vheroine-effect {
    -webkit-margin-before: 24px;
            margin-block-start: 24px;
  }
  .vheroine .doubleheroine .doubleheroine-ttl .is-sub {
    -webkit-margin-start: -24px;
            margin-inline-start: -24px;
  }
  .vheroine .doubleheroine-activate {
    translate: 0 -33%;
  }
  .vheroine .allheroine-ttl {
    padding-inline: 30px 10px;
  }
  .vheroine .allheroine-pic img {
    aspect-ratio: 375/244;
  }
  .vheroine .allheroine-txt {
    padding-inline: 20px;
    -webkit-margin-after: -64px;
            margin-block-end: -64px;
    -ms-grid-columns: auto auto 35.5783308931vw;
    grid-template-columns: auto auto 35.5783308931vw;
  }
  .music {
    padding-inline: 0;
    padding-block: 45px 80px;
    background: url(../img/bg-music@2x.jpg) no-repeat center;
    background-size: cover;
  }
  .howto__title {
    padding: 48px 20px 32px;
  }
  .howto__wrapper {
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
  .howto__contents {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }
  .howto__contents + .howto__contents {
    -webkit-margin-before: 80px;
            margin-block-start: 80px;
  }
  .howto__contents.is-attention .howto__contents--subtitle {
    font-size: calc(22 / 10 * 1rem);
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  .howto__contents--title {
    min-width: 310px;
    min-height: 66px;
    padding-inline: 36px;
  }
  .howto__contents--title .is-label {
    font-size: calc(25 / 10 * 1rem);
    line-height: 1.2;
  }
  .howto__contents--title .is-label .is-small {
    font-size: calc(16 / 10 * 1rem);
  }
  .howto__contents--frame::after {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-image: url("../img/page/bg-contents_sp.png");
    background-position: 10px 10px;
    background-size: 104px auto;
    background-color: #fff;
  }
  .howto__contents--inner {
    padding: 44px 28px 56px;
    background-size: 24px auto;
  }
  .howto__contents--inner:has(.is-col3) {
    -webkit-padding-before: 44px;
            padding-block-start: 44px;
  }
  .is-attention .howto__contents--inner {
    -webkit-padding-before: 44px;
            padding-block-start: 44px;
  }
  .howto__contents--inner::before {
    left: 24px;
    width: calc(100% - 48px);
    background-position: left top, left bottom;
    background-size: 24.5px auto, auto 27px;
  }
  .howto__contents--inner::after {
    top: 27px;
    height: calc(100% - 54px);
    background-size: 24px auto;
  }
  .howto__contents--block {
    gap: 24px;
  }
  .howto__contents--block + .howto__contents--block {
    -webkit-margin-before: 50px;
            margin-block-start: 50px;
  }
  .howto__contents .c-sec-ttl {
    padding-inline: 0;
  }
  .howto__contents--subtitle {
    font-size: calc(25 / 10 * 1rem);
    line-height: 1.36;
  }
  .howto__contents--list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 72px;
  }
  .howto__contents--list.is-col3 {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .howto__contents--item:not(:last-child)::before {
    top: calc(100% + 16px);
    left: 50%;
    translate: -50% 0;
    rotate: 0deg;
  }
  .is-2nd .howto__contents--item:not(:last-child)::before {
    top: calc(100% + 16px);
  }
  .is-col3 .howto__contents--item:not(:last-child)::before {
    top: calc(100% + 16px);
    left: 50%;
    translate: -50% 0;
    rotate: 0deg;
  }
  .howto__contents--img {
    max-width: 435px;
  }
  .howto__contents--dotlist {
    gap: 20px;
  }
  .howto__contents--column {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
        grid-template-areas: "dotlist" "notice" "attention";
    gap: 16px 32px;
  }
  .howto__contents--column .howto__contents--dotlist {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .howto__contents--column .howto__contents--notice {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .howto__contents--column .howto__contents--attention {
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .howto__contents--column .howto__contents--attention {
    max-width: 350px;
    margin-inline: auto;
  }
  .howto__section {
    -webkit-padding-after: 40px;
            padding-block-end: 40px;
  }
  .howto__section:last-of-type {
    -webkit-padding-after: 80px;
            padding-block-end: 80px;
  }
  .howto__section.is-point1::before {
    background: url("../img/page/bg-howto1@2x.png") left top no-repeat;
    background-size: 34.1333333333vw auto;
  }
  .howto__section.is-point2::before {
    background: url("../img/page/bg-howto2@2x.png") center top no-repeat;
    background-size: 100% auto;
  }
  .howto__section.is-point3::before {
    background: none;
  }
  .howto__section.is-point4 .is-img2 {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  .howto__section.is-point4 .is-img2 img {
    width: 22.6666666667vw;
    height: auto;
  }
  .howto__section.is-point4::before {
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/page/bg-howto3@2x.png") right center no-repeat;
    background-size: cover;
    content: "";
    pointer-events: none;
  }
  .howto__section.is-point5::before {
    background: url("../img/page/bg-howto4@2x.png") left top no-repeat;
    background-size: 29.3333333333vw auto;
  }
  .howto__section--container {
    max-width: 420px;
    margin-inline: auto;
    gap: 20px;
  }
  .is-point1 .howto__section--container, .is-point3 .howto__section--container, .is-point5 .howto__section--container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
        grid-template-areas: "ttl" "mv" "conts";
  }
  .is-point2 .howto__section--container, .is-point4 .howto__section--container {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
        grid-template-areas: "ttl" "mv" "conts";
  }
  .howto__section--hgroup {
    width: 100%;
  }
  .howto__section--hgroup .c-sec-ttl {
    margin-block: 25px 10px;
  }
  .howto__section--hgroup .c-sec-ttl__main img {
    max-width: 88px;
  }
  .is-point1 .howto__section--hgroup, .is-point3 .howto__section--hgroup, .is-point5 .howto__section--hgroup {
    margin-inline: auto;
  }
  .is-point2 .howto__section--hgroup, .is-point4 .howto__section--hgroup {
    margin-inline: auto;
  }
  .is-point2 .howto__section--hgroup {
    width: 100%;
    max-width: 100%;
  }
  .is-point2 .howto__section--hgroup .c-sec-ttl {
    margin-block: 25px 10px;
  }
  .is-point3 .howto__section--hgroup {
    width: 100%;
    max-width: 100%;
  }
  .is-point4 .howto__section--hgroup {
    width: 100%;
    max-width: 100%;
  }
  .is-point5 .howto__section--hgroup {
    width: 100%;
    max-width: 100%;
  }
  .howto__section--title .is-mainlabel {
    font-size: calc(20 / 10 * 1rem);
    line-height: 1.2;
  }
  .howto__section--title .is-sublabel {
    font-size: calc(15 / 10 * 1rem);
  }
  .howto__section--title rt {
    position: static;
    top: -8px;
    translate: 0 0;
    text-align: center;
  }
  .howto__section--movie {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-inline: auto;
  }
  .is-point3 .howto__section--movie {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .is-point3 .howto__section--movie .is-img1 {
    z-index: 2;
    position: absolute;
    top: -118px;
    left: calc(50% + 100px);
    width: 120px;
  }
  .is-point3 .howto__section--movie .is-img2 {
    display: none;
  }
  .is-point3 .howto__section--movie .is-img3 {
    display: none;
  }
  .is-point3 .howto__section--movie .is-img4 {
    display: block;
    z-index: -1;
    position: absolute;
    top: 260px;
    left: -66px;
    width: 90px;
  }
  .howto__section--hgroup {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .is-point2 .howto__section--container > .howto__section--hgroup, .is-point4 .howto__section--container > .howto__section--hgroup {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .howto__section--movie {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .is-point2 .howto__section--container > .howto__section--movie, .is-point4 .howto__section--container > .howto__section--movie {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .howto__section--contents {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .is-point2 .howto__section--container > .howto__section--contents, .is-point4 .howto__section--container > .howto__section--contents {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .howto__section--contents {
    width: 100%;
  }
  .is-point4 .howto__section--contents {
    width: 100%;
    max-width: 100%;
    -ms-flex-line-pack: start;
        align-content: flex-start;
  }
  .is-point5 .howto__section--contents {
    width: 100%;
    max-width: 100%;
  }
  .is-point1 .howto__section--contents, .is-point3 .howto__section--contents {
    margin-inline: auto;
  }
  .is-point2 .howto__section--contents, .is-point4 .howto__section--contents {
    margin-inline: auto;
  }
  .is-point2 .howto__section--contents {
    width: 100%;
    max-width: 100%;
  }
  .is-point3 .howto__section--contents {
    width: 100%;
    max-width: 100%;
  }
  .howto__list li::before {
    width: 20px;
    height: 20px;
    translate: 0 3px;
  }
  .howto__emphasis {
    font-size: calc(20 / 10 * 1rem);
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
  }
  .howto__movie--btn {
    max-width: 280px;
  }
  .howto__movie--btn::before {
    background-size: 60px;
  }
  .howto__footer {
    min-height: 174px;
    background: url("../img/page/bg-howto_footer@2x.png") center no-repeat;
    background-size: cover;
  }
  .howto .movie__frame {
    width: 100%;
  }
}
@media screen and (max-width: 767px){
  .kv .complete-limit {
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
  }
  .complete-limit {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .l-footer .complete-limit {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .c-sec-ttl {
    padding: 2.133333vw 14.4vw 0;
  }
  .c-sec-ttl__orn {
    height: 10.4vw;
  }
  .pagenav {
    -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;
    padding: 100px 20px 64px;
  }
  .pagenav::after {
    background-size: 272px auto;
  }
  .movie {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    margin-bottom: 26.666667%;
    padding-top: 27.2%;
  }
  .movie .c-sec-ttl {
    margin-bottom: 7.0537313%;
  }
  .movie .c-sec-ttl__main {
    width: 31.79466667vw;
  }
  .movie-body {
    width: 100%;
    gap: 24px;
  }
  .concept {
    margin-bottom: 13.333333%;
    padding-block: 13.86666667% 23.733333%;
  }
  .concept-bg {
    max-width: unset;
    background: url(../img/bg_paper_concept@2x.webp) no-repeat center;
    background-size: cover;
  }
  .concept .c-sec-ttl {
    margin-bottom: 7.4666667vw;
  }
  .concept .c-sec-ttl__main {
    width: 44.38666667vw;
  }
  .concept__lead {
    margin-bottom: 4.26666667vw;
    font-size: 6.666667vw;
    line-height: 1.4;
  }
  .concept__lead:before, .concept__lead:after {
    content: unset;
  }
  .concept__body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .concept-fig {
    width: calc(100% + 40px);
    margin-bottom: 2.666667vw;
    margin-left: -20px;
  }
  .concept__txt {
    width: 100%;
    padding-bottom: 0;
  }
  .story {
    margin-bottom: 15.7333333%;
    padding-top: 0;
  }
  .story-bg {
    background: url(../img/bg_story-lt@2x.svg) no-repeat left top, url(../img/bg_story-rt@2x.svg) no-repeat right top, url(../img/bg_story-rb@2x.svg) no-repeat right bottom, url(../img/bg_story-lb@2x.svg) no-repeat left bottom;
  }
  .story__contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 13.8666667vw 3.58208655%;
  }
  .story__body {
    display: contents;
    width: 100%;
    padding-top: 0;
  }
  .story .c-sec-ttl {
    margin-bottom: 7.2vw;
    padding-inline: 14.4vw;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .story .c-sec-ttl__main {
    width: 30.05866667vw;
  }
  .story__fig {
    width: 100%;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin-bottom: 2.4vw;
  }
  .story__txt {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .character {
    padding-block: 56px 50px;
  }
  .character .c-sec-ttl__main {
    width: 57.8666667vw;
  }
  .machine {
    margin-bottom: 16.533333%;
    padding-block: 9.333333% 8%;
  }
  .machine-ttl {
    row-gap: 0;
    margin-bottom: 3.58208955%;
    padding-inline: 3.58208955%;
  }
  .machine-ttl__orn {
    width: 100%;
  }
  .machine-ttl__main {
    position: relative;
    width: 100%;
  }
  .machine__lead {
    margin-bottom: 5.074626865%;
    font-size: 6.133333vw;
  }
  .machine__lead:before, .machine__lead:after {
    content: unset;
  }
  .machine-contents__desc {
    margin-bottom: 24px;
  }
  .machine-contents__point-img {
    -webkit-margin-after: -48px;
            margin-block-end: -48px;
    translate: 0 -48px;
  }
  .machine-contents {
    -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;
  }
  .machine-contents__full-size {
    position: static;
    width: 86.56716417%;
    padding-inline: 0;
  }
  .machine-contents__body {
    width: 100%;
    padding-top: 11.34328358%;
  }
  .machine-contents__desc {
    margin-bottom: 11.1641791%;
  }
  .machine-contents__point-size__img {
    width: 96vw;
    margin-left: -3.333333vw;
  }
  .machine-contents__point-size:not(:nth-last-of-type(1)) {
    margin-bottom: 10.74626865%;
  }
  .point {
    margin-bottom: 18.133333%;
  }
  .point-bg {
    background: url(../img/bg_point-upper@2x.webp) no-repeat center top, url(../img/bg_point-lower@2x.webp) no-repeat center bottom;
    background-size: 100% auto;
    -webkit-filter: none;
            filter: none;
  }
  .point .c-container {
    padding-block: 13.3333333%;
  }
  .point .c-sec-ttl {
    margin-bottom: 8.9552223%;
  }
  .point .c-sec-ttl__main {
    width: 29.8666667vw;
  }
  .point__lead {
    margin-bottom: 7.1641791%;
  }
  .point__desc {
    margin-bottom: 5.97014925%;
    padding-inline: 0;
  }
  .point-v-list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2.666667vw 0;
  }
  .point-v-list__item--roxy img {
    width: calc(100% + 3.4666667vw);
  }
  .point-v-list__item--sylphy img {
    width: calc(100% + 3.4666667vw);
  }
  .point-v-list__item--eris img {
    width: calc(100% + 3.4666667vw);
  }
  .flow {
    padding-top: 50px;
    background: url(../img/bg_gameflowwrap@2x.png) center top repeat-y;
    background-size: 100% auto;
  }
  .flow.is-fan {
    padding-bottom: 64px;
  }
  .flow .c-sec-ttl {
    margin-bottom: 20px;
    padding-inline: 56px;
  }
  .flow .c-sec-ttl__main img {
    max-width: 220px;
    height: auto;
  }
  .flow__lead {
    margin-bottom: 16px;
  }
  .flow__img {
    margin-inline: -16px;
  }
  .flow__img img {
    width: 100%;
  }
  .specialnote .specialnote-container {
    padding-inline: 40px;
  }
  .specialnote .specialnote-container.vstoc {
    padding-inline: 0;
  }
  .specialnote .specialnote-container.vstoc .specialnote-ttl {
    padding-inline: 20px;
  }
  .vheroine .vheroine-bg img {
    -o-object-position: center 66%;
       object-position: center 66%;
  }
  .vheroine .heroineeffect .vheroine-ttl {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }
  .vheroine .heroineeffect .vheroine-ttl img {
    width: 88vw;
  }
  .vheroine .heroineeffect-vzone {
    -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;
    padding-inline: 0;
    gap: 0;
  }
  .vheroine .heroineeffect-vzone img {
    width: 100%;
  }
  .vheroine .doubleheroine .doubleheroine-ttl {
    -webkit-margin-after: 24px;
            margin-block-end: 24px;
  }
  .vheroine .doubleheroine .doubleheroine-ttl .is-main img {
    width: 100%;
  }
  .vheroine .doubleheroine .doubleheroine-ttl .is-sub {
    -webkit-margin-start: -10.6666666667vw;
            margin-inline-start: -10.6666666667vw;
  }
  .vheroine .doubleheroine .doubleheroine-ttl .is-sub img {
    width: 52.2666666667vw;
  }
  .vheroine .doubleheroine-activate {
    top: 12.8vw;
    translate: 0 0;
  }
  .vheroine .doubleheroine-activate img {
    width: 77.3333333333vw;
  }
  .vheroine .doubleheroine-vzone {
    -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;
    gap: 14px;
  }
  .vheroine .doubleheroine-vzone .doubleheroine-pic:nth-of-type(1) {
    translate: 10px 0;
  }
  .vheroine .doubleheroine-vzone .doubleheroine-pic:nth-of-type(2) {
    translate: 10px 0;
  }
  .vheroine .doubleheroine-vzone .doubleheroine-pic:nth-of-type(3) {
    translate: -10px 0;
  }
  .vheroine .allheroine {
    padding-top: 26.6666666667vw;
  }
  .vheroine .allheroine-ttl {
    padding-inline: 0;
  }
  .vheroine .allheroine-ttl img {
    width: 92.5333333333vw;
  }
  .vheroine .allheroine-txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
    translate: 0 -40%;
    -webkit-margin-after: -17.0666666667vw;
            margin-block-end: -17.0666666667vw;
  }
  .vheroine .allheroine-txt1 {
    translate: 0 0;
  }
  .vheroine .allheroine-txt1 img {
    width: 42.4vw;
  }
  .vheroine .allheroine-txt2 {
    text-align: center;
  }
  .vheroine .allheroine-txt2 img {
    width: 40.5333333333vw;
  }
  .vheroine .allheroine-txt3 {
    translate: 0 10px;
  }
  .vheroine .allheroine-txt3 img {
    width: 55.2vw;
  }
  .turningpoint {
    padding-block: 35px 40px;
  }
  .turningpoint .turningpoint-bg {
    aspect-ratio: 375/1047;
  }
  .turningpoint .turningpoint-bg img {
    -o-object-position: center bottom;
       object-position: center bottom;
  }
  .turningpoint .turningpoint-ttl {
    -webkit-margin-after: -24px;
            margin-block-end: -24px;
  }
  .turningpoint .turningpoint-pic img {
    width: 100%;
  }
  .turningpoint .turningpoint-txt {
    gap: 16px;
    -webkit-margin-before: 74.6666666667vw;
            margin-block-start: 74.6666666667vw;
    -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;
  }
  .turningpoint .turningpoint-txt1 img {
    width: 66.4vw;
  }
  .turningpoint .turningpoint-txt2 {
    translate: -10px 0;
  }
  .turningpoint .turningpoint-txt2 img {
    width: 59.4666666667vw;
  }
  .spec {
    padding-top: 50px;
  }
  .spec .c-sec-ttl {
    margin-bottom: 32px;
    padding-inline: 54px;
  }
  .spec .c-sec-ttl__main img {
    max-width: 90px;
    height: auto;
  }
  .spec__desc {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 20px auto 20px auto 20px auto;
        grid-template-areas: "case" "reel" "info" "hit";
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .spec__case {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .spec__case img {
    display: block;
    width: 79.2%;
    margin-inline: auto;
  }
  .spec__case {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .spec__reel {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .spec__info {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .spec__hit {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .music .c-container {
    padding-block: 5.8666666667vw 6.4vw;
  }
  .music-bg {
    background: url(../img/pic_music-panel@2x.png) no-repeat top center;
    background-size: contain;
  }
  .music .c-sec-ttl {
    margin-bottom: 24px;
  }
  .music .music-read {
    max-width: 300px;
    margin-bottom: 50px;
  }
  .music .music-list {
    max-width: 324px;
    margin-bottom: 24px;
  }
  .howto__kv {
    height: 33.6vw;
  }
  .mirai-h__kv {
    height: 225.6vw;
    margin-bottom: 16.533333%;
    padding-block: 9.333333% 8%;
    background: url("../img/page/bg-mirai-h@2x.png") center top no-repeat;
    background-size: cover;
  }
  .mirai-h__kv--title {
    top: 8vw;
    left: 50%;
    width: 73.6vw;
    translate: -50% 0;
  }
  .mirai-h__kv--keyword {
    top: 37.8666666667vw;
    left: -0.5333333333vw;
    width: 98.1333333333vw;
  }
  .mirai-h__kv--case {
    top: 58.6666666667vw;
    left: 0;
    width: 100vw;
  }
  .mirai-h__kv--casetxt {
    top: 156.8vw;
    width: 100vw;
  }
  .mirai-h__description {
    padding-block: 90px 60px;
  }
  .mirai-h__description--title {
    -webkit-margin-after: 12px;
            margin-block-end: 12px;
  }
  .mirai-h__description--container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    flex-direction: column;
  }
  .mirai-h__description--contents {
    display: -ms-grid;
    display: grid;
    gap: 20px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 20px auto 20px auto;
        grid-template-areas: "case" "list1" "list2";
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
  .mirai-h__description--contents > .spec__case {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mirai-h__description--contents > .mirai-h__description--case {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mirai-h__description--case {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .mirai-h__description--contents > .mirai-h__description--list {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .mirai-h__description--contents > .mirai-h__description--list.is-offset7 {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .mirai-h__description--list {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mirai-h__description--list li::before {
    width: 23px;
    height: 22px;
    font-size: calc(14 / 10 * 1rem);
    -webkit-padding-after: 2px;
            padding-block-end: 2px;
    -webkit-padding-end: 1px;
            padding-inline-end: 1px;
  }
  .mirai-h__description--list li:first-child {
    grid-column: auto;
  }
  .mirai-h__description--list li:nth-child(6) {
    grid-row: auto;
  }
  .mirai-h__description--subtitle {
    font-size: calc(17 / 10 * 1rem);
  }
  .mirai-h__description--text {
    font-size: calc(12 / 10 * 1rem);
  }
  .mirai-h__movie {
    padding-inline: 0;
    padding-block: 30px 60px;
  }
  .mirai-h__movie--container {
    gap: 16px;
  }
  .mirai-h__movie--title {
    font-size: calc(22 / 10 * 1rem);
  }
  .mirai-h__movie--btn::before {
    background-size: 60px;
  }
  .mirai-h__footer {
    padding-block: 30px 60px;
  }
}
@media screen and (max-width: 576px){
  .machine-contents__desc {
    line-height: 1.6666666667;
  }
  .specialnote .specialnote-container {
    padding-inline: 20px;
    padding-block: 50px 30px;
  }
  .vheroine .vheroine-bg img {
    -o-object-position: center 25%;
       object-position: center 25%;
  }
  .spec__case img {
    -webkit-filter: drop-shadow(0 0 20px rgba(255, 245, 0, 0.83));
            filter: drop-shadow(0 0 20px rgba(255, 245, 0, 0.83));
  }
  .music .music-read {
    max-width: 80vw;
    padding-inline: 20px;
  }
  .music .music-list {
    max-width: 86.4vw;
    padding-inline: 24px;
  }
  .modal__overlay {
    padding: 40px 20px;
  }
  .modal__close {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  .modal__container {
    translate: 0 -50px;
  }
}
@media screen and (max-width: 360px){
  .complete-limit {
    padding-right: 10px;
    padding-left: 10px;
  }
  .c-section {
    padding-right: 10px;
    padding-left: 10px;
  }
  .specialnote .specialnote-container.vstoc .specialnote-ttl {
    padding-inline: 10px;
  }
  .howto__wrapper {
    padding-inline: 16px;
  }
  .howto__contents--title {
    min-width: 0;
  }
  .howto__section {
    padding-inline: 10px;
  }
  .mirai-h__description {
    padding-inline: 10px;
  }
  .mirai-h__footer {
    padding-inline: 16px;
  }
}
@media (any-hover: hover){
  .modal__close:hover {
    opacity: 0.5;
  }
}
/*# sourceMappingURL=style.css.map */