/* 僕のヒーローアカデミア FINAL PLUS ULTRAフェアのCSS *

@charset "UTF-8";

/* ===============================================
  * Fair - 僕のヒーローアカデミア FINAL PLUS ULTRAフェアのレイアウト *
=============================================== */

/**
 * リキッドレイアウト対応CSS
 * 
 * このCSSは、フォントサイズをビューポート幅に応じてリキッドに調整します。
 * 別プロジェクトで使用する場合は、必要に応じてCSS変数を上書きしてください。
 * 
 * カスタマイズ可能なCSS変数:
 * - --font-size__base: ベースのフォントサイズ（単位なしの数値、デフォルト: 10）
 * - --width__breakpoint: リキッド計算の基準となる幅（単位なしの数値、デフォルト: 1440）
 * 
 * ブレークポイント:
 * - 1440px以上: 固定フォントサイズ
 * - 787px～1440px: リキッドフォントサイズ
 * - 375px～767px: 固定フォントサイズ
 * - 375px以下: リキッドフォントサイズ
 */

html {
  /* プライベート変数（必要に応じて上書き可能） */
  --_font-size: var(--font-size__base, 10);
  --_width: var(--width__breakpoint, 1440);

  /* 1440px以上: 固定フォントサイズ */
  font-size: calc(var(--_font-size) * 1px);
}

/* 1025px～1440px: リキッドフォントサイズ */
@media (max-width: 1025px) {
  html {
    --_width: 1024;
    font-size: calc((var(--_font-size) / var(--_width)) * 100vw);
  }
}

/* 391px～767px: リキッドフォントサイズ（375px基準） */
@media (max-width: 767px) {
  html {
    --_width: 375;
    font-size: calc((var(--_font-size) / var(--_width)) * 100vw);
  }
}

/* 375px以下: リキッドフォントサイズ */
/* @media (max-width: 375px) {
  html {
    font-size: calc((var(--_font-size) / var(--_width)) * 100vw);
  }
} */

/* ===============================================
  * Fair - 僕のヒーローアカデミア FINAL PLUS ULTRAフェアのCSS *
=============================================== */

.m-mv__wrapper {
  position: relative;
}

.m-mv__image {
  display: grid;
  justify-items: center;
}

.m-mv__image img {
  object-fit: cover;
  aspect-ratio: 333 / 250;
}

@media screen and (min-width: 768px) {
  .m-mv__image img {
    aspect-ratio: 1440 / 1078;
  }
}

.m-mv__title-wrapper {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding-bottom: 0.6rem;
}

@media screen and (min-width: 768px) {
  .m-mv__title-wrapper {
    bottom: 4.5rem;
    padding-bottom: 2.4rem;
  }
}

.m-mv__title-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  z-index: -1;
}

.m-mv__title {
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-biz-ud-gothic);
  color: var(--color__black);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-mv__title {
    /* font-size: clamp(42px, -0.214rem + 4.61vw, 63px); */
    font-size: clamp(34px, 0.857px + 4.315vw, 6.3rem);
  }
}

/* @media (min-width: 1440px) {
  .m-mv__title {
    font-size: 6.3rem;
  }
} */

.m-mv__title span {
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .m-mv__title span {
    /* font-size: clamp(44px, -0.304rem + 5.06vw, 68px); */
    font-size: clamp(36px, -0.571px + 4.762vw, 6.8rem);
  }
}

/* @media (min-width: 1440px) {
  .m-mv__title span {
    font-size: 6.8rem;
  }
} */

.m-intro {
  padding-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .m-intro {
    padding-bottom: 7rem;
  }
}

.m-intro__header {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 10rem;
}

@media screen and (min-width: 768px) {
  .m-intro__header {
    padding-top: 25.4rem;
    padding-bottom: 38rem;
  }
}

.m-intro__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/intro_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  aspect-ratio: 118 / 65;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-intro__header::before {
    aspect-ratio: 1440 / 795;
    background-image: url(../../img/intro_bg.png);
  }
}

.m-intro__button-wrapper {
  position: relative;
  display: grid;
  justify-items: center;
}

.m-intro__button-caption {
  position: absolute;
  top: -4rem;
  left: -2rem;
  display: grid;
}

@media screen and (min-width: 768px) {
  .m-intro__button-caption {
    /* top: -15rem;
    left: -8rem; */
    bottom: clamp(48px, -11.429px + 7.738vw, 100px);
    top: unset;
    left: calc(clamp(36px, -14.286px + 6.548vw, 80px) * -1);
  }
}

.m-intro__button-caption img {
  object-fit: cover;
  aspect-ratio: 110 / 54;
  width: 11rem;
}

@media screen and (min-width: 768px) {
  .m-intro__button-caption img {
    width: clamp(240px, 42.286px + 25.744vw, 413px);
    aspect-ratio: 413 / 202;
  }
}

.m-button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1.1rem;
  column-gap: 0.4rem;
  align-items: center;
  justify-items: center;
  max-width: 33.2rem;
  width: 100%;
  font-size: 2.2rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__yellow);
  line-height: 1.75;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  padding-block: 0.3rem;
  padding-left: 3rem;
  padding-right: 2rem;
}

.m-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color__red);
  width: 100%;
  height: 100%;
  border-radius: 1.8rem;
  box-shadow: 0.2rem 0.4rem 0 0.1rem rgba(0, 0, 0, 1);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-button {
    grid-template-columns: auto 4.2rem;
    column-gap: 3.3rem;
    font-size: clamp(44px, -1.714px + 5.952vw, 8.4rem);
    max-width: max-content;
    padding-left: 11.6rem;
    padding-right: 8rem;
  }

  .m-button::before {
    border-radius: 7.6rem;
    box-shadow: 0.2rem 1rem 0 0.1rem rgba(0, 0, 0, 1);
  }
}

.m-button--action {
  grid-template-columns: auto auto 1.1rem;
  font-size: 1.9rem;
  padding-inline: 1.6rem;
}

@media screen and (min-width: 768px) {
  .m-button--action {
    grid-template-columns: auto auto 4.2rem;
    column-gap: 2rem;
    font-size: clamp(40px, 2.286px + 4.911vw, 73px);
    padding-top: 1.2rem;
    padding-left: 6.2rem;
    padding-right: 6rem;
    padding-bottom: 1.4rem;
  }
}

.m-button__arrow {
  position: relative;
  width: 1.1rem;
  height: 1.5rem;
}

.m-button__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.1rem;
  border-color: transparent transparent transparent var(--color-white);
}

@media screen and (min-width: 768px) {
  .m-button__arrow {
    width: 4.2rem;
    height: 6.2rem;
  }

  .m-button__arrow::before {
    border-width: 3.1rem 0 3.1rem 4.2rem;
  }
}

.m-button__note {
  font-size: 1.4rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__yellow);
  line-height: 1.75;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  margin-left: -0.8rem;
  margin-bottom: 0.6rem;
}

@media screen and (min-width: 768px) {
  .m-button__note {
    font-size: 3rem;
    margin-left: 0;
    margin-bottom: 4.2rem;
  }
}

.m-intro__body {
  margin-top: 3.6rem;
}

@media screen and (min-width: 768px) {
  .m-intro__body {
    margin-top: 7.6rem;
  }
}

.m-intro__text-box-wrapper {
  padding-inline: 0.9rem;
}

@media screen and (min-width: 768px) {
  .m-intro__text-box-wrapper {
    padding-inline: 9.3rem;
  }
}

.m-text-box {
  position: relative;
  border: 1px solid var(--color__gray);
  padding: 2rem 2.4rem;
}

@media screen and (min-width: 768px) {
  .m-text-box {
    padding-inline: 8.8rem;
    padding-top: 7.6rem;
    padding-bottom: 8rem;
    border: 3px solid var(--color__gray);
  }
}

.m-text-box--hero-declaration {
  padding-top: 4.4rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 768px) {
  .m-text-box--hero-declaration {
    padding-top: 16.6rem;
    padding-bottom: 16.8rem;
  }
}

.m-text-box__square-top {
  position: absolute;
  top: -1.1rem;
  left: 0;
  width: 100%;
  height: 2.2rem;
}

.m-text-box__square-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--color__gray-light) solid 1px;
}

@media screen and (min-width: 768px) {
  .m-text-box__square-top::before {
    top: -2.7rem;
    left: -4rem;
    width: 7.5rem;
    height: 7.5rem;
    border: var(--color__gray-light) solid 2px;
  }
}

.m-text-box__square-top::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--color__gray-light) solid 1px;
}

@media screen and (min-width: 768px) {
  .m-text-box__square-top::after {
    top: -2.7rem;
    right: -4rem;
    width: 7.5rem;
    height: 7.5rem;
    border: var(--color__gray-light) solid 2px;
  }
}

.m-text-box__square-bottom {
  position: absolute;
  bottom: -1.1rem;
  left: 0;
  width: 100%;
  height: 2.2rem;
}

.m-text-box__square-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--color__gray-light) solid 1px;
}

@media screen and (min-width: 768px) {
  .m-text-box__square-bottom::before {
    bottom: -2.7rem;
    left: -4rem;
    width: 7.5rem;
    height: 7.5rem;
    border: var(--color__gray-light) solid 2px;
  }
}

.m-text-box__square-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--color__gray-light) solid 1px;
}

@media screen and (min-width: 768px) {
  .m-text-box__square-bottom::after {
    bottom: -2.7rem;
    right: -4rem;
    width: 7.5rem;
    height: 7.5rem;
    border: var(--color__gray-light) solid 2px;
  }
}

.m-text-box__text {
  font-size: 1rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.75;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-text-box__text {
    font-size: clamp(16px, -2.286px + 2.381vw, 32px);
  }
}

.m-text-box__text + .m-text-box__text {
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .m-text-box__text + .m-text-box__text {
    margin-top: 9.4rem;
  }
}

.m-reason {
  position: relative;
}

.m-reason::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/reason_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 1385;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-reason::before {
    aspect-ratio: 1440 / 5308;
    background-image: url(../../img/reason_bg.png);
  }
}

.m-reason__wrapper {
  position: relative;
  padding-top: 7.2rem;
  padding-bottom: 12.8rem;
}

@media screen and (min-width: 768px) {
  .m-reason__wrapper {
    padding-top: 34rem;
    padding-bottom: 57.6rem;
  }
}

.m-reason__contents-wrapper {
  display: grid;
  row-gap: 5rem;
  padding-inline: 0.5rem;
  margin-top: 2.2rem;
}

@media screen and (min-width: 768px) {
  .m-reason__contents-wrapper {
    row-gap: 20rem;
    margin-top: 10rem;
  }
}

@media screen and (min-width: 768px) {
  .m-reason__header {
    padding-inline: 9rem;
  }
}

.m-reason__header-image {
  display: grid;
  justify-items: center;
}

.m-reason__header-image img {
  object-fit: cover;
  aspect-ratio: 332 / 209;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .m-reason__header-image img {
    aspect-ratio: 1060 / 667;
    width: 100%;
    height: auto;
  }
}

.m-reason-contents__header {
  display: grid;
  align-items: center;
  grid-template-columns: 4.4rem 1fr;
  column-gap: 1rem;
}

@media screen and (min-width: 768px) {
  .m-reason-contents__header {
    grid-template-columns: clamp(88px, -1.143px + 11.607vw, 166px) 1fr;
    column-gap: 4rem;
  }
}

.m-circle-icon {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  font-size: 2.1rem;
  font-family: var(--font-arial);
  font-weight: var(--fw-bold);
  color: var(--color__yellow);
  line-height: 1.75;
  letter-spacing: 0;
  border-radius: 50%;
  border: 2px solid var(--color__black-dark);
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 768px) {
  .m-circle-icon {
    font-size: clamp(42px, -1.429px + 5.655vw, 80px);
    border: 0.6rem solid var(--color__black-dark);
  }
}

.m-circle-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color__black-dark);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-circle-icon::before {
    width: clamp(72px, -9.143px + 10.565vw, 143px);
    height: clamp(72px, -9.143px + 10.565vw, 143px);
  }
}

.m-circle-icon--answer {
  color: var(--color-white);
}

.m-reason-contents__header-title {
  font-size: 2rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__black);
  line-height: 1.4;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-reason-contents__header-title {
    font-size: clamp(40px, -2.286px + 5.506vw, 77px);
  }
}

.m-reason-contents__header-title--large {
  font-size: 3.4rem;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .m-reason-contents__header-title--large {
    font-size: clamp(70px, 0.286px + 9.077vw, 131px);
  }
}

.m-reason-contents__body {
  position: relative;
  display: grid;
  align-items: center;
  aspect-ratio: 325 / 196;
  padding-left: 3rem;
  padding-right: 2.8rem;
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .m-reason-contents__body {
    aspect-ratio: 1242 / 752;
    padding-left: 11rem;
    padding-right: 8rem;
    margin-top: 7rem;
  }
}

.m-reason-contents__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  border-radius: 2.1rem;
  z-index: -1;
}

.m-reason-contents__text {
  font-size: 1rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.4;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-reason-contents__text {
    font-size: clamp(21px, 0.429px + 2.679vw, 39px);
  }
}

.m-reason-contents__corner {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--color__yellow-light);
  border-radius: 50%;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .m-reason-contents__corner {
    width: 3.2rem;
    height: 3.2rem;
  }
}

.m-reason-contents__corner--top-left {
  top: 1.2rem;
  left: 1.6rem;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .m-reason-contents__corner--top-left {
    top: 4.2rem;
    left: 3.8rem;
  }
}

.m-reason-contents__corner--top-right {
  top: 1.2rem;
  right: 1.6rem;
  transform: translate(50%, -50%);
}

@media screen and (min-width: 768px) {
  .m-reason-contents__corner--top-right {
    top: 4.2rem;
    right: 4.8rem;
  }
}

.m-reason-contents__corner--bottom-left {
  bottom: 1.2rem;
  left: 1.6rem;
  transform: translate(-50%, 50%);
}

@media screen and (min-width: 768px) {
  .m-reason-contents__corner--bottom-left {
    bottom: 2.8rem;
    left: 3.8rem;
  }
}

.m-reason-contents__corner--bottom-right {
  bottom: 1.2rem;
  right: 1.6rem;
  transform: translate(50%, 50%);
}

@media screen and (min-width: 768px) {
  .m-reason-contents__corner--bottom-right {
    bottom: 2.8rem;
    right: 4.8rem;
  }
}

.m-section-outer {
  position: relative;
}

.m-section-outer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/section-outer_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 108%;
  aspect-ratio: 375 / 1048;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-section-outer::before {
    background-image: url(../../img/section-outer_bg.png);
    aspect-ratio: 1440 / 3790;
  }
}

.m-complete {
  padding-top: 15.2rem;
}

@media screen and (min-width: 768px) {
  .m-complete {
    padding-top: 57rem;
    overflow-x: clip;
  }
}

.m-complete__title {
  position: relative;
  font-size: 3.7rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__black-dark);
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-complete__title {
    font-size: clamp(76px, 0.571px + 9.821vw, 142px);
  }
}

.m-complete__title-image {
  position: absolute;
  top: -12.4rem;
  right: 0;
  display: grid;
  justify-items: center;
}

@media screen and (min-width: 768px) {
  .m-complete__title-image {
    right: -3.2rem;
    bottom: clamp(94px, -0.857px + 12.351vw, 177px);
    top: unset;
    /* top: -47rem; */
    /* left: 63.4rem; */
  }
}

.m-complete__title-image img {
  object-fit: cover;
  aspect-ratio: 167 / 121;
  width: 16.7rem;
}

@media screen and (min-width: 768px) {
  .m-complete__title-image img {
    aspect-ratio: 638 / 463;
    /* width: 63.8rem; */
    width: clamp(340px, -0.571px + 44.345vw, 638px);
  }
}

.m-complete__image-wrapper {
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .m-complete__image-wrapper {
    margin-top: 6.4rem;
  }
}

.m-complete__image {
  display: grid;
  justify-items: center;
}

.m-complete__image img {
  object-fit: cover;
  aspect-ratio: 377 / 226;
}

@media screen and (min-width: 768px) {
  .m-complete__image img {
    aspect-ratio: 1440 / 540;
  }
}

.m-complete__button-wrapper {
  margin-top: 4rem;
}

@media screen and (min-width: 768px) {
  .m-complete__button-wrapper {
    margin-top: 12.6rem;
  }
}

.m-plan {
  padding-top: 6.6rem;
  padding-bottom: 5.6rem;
}

@media screen and (min-width: 768px) {
  .m-plan {
    padding-top: 24rem;
    padding-bottom: 37.3rem;
  }
}

.m-plan__wrapper {
  padding-inline: 0.5rem;
}

.m-plan__title {
  font-size: 3.4rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__black-dark);
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-plan__title {
    font-size: clamp(70px, -0.857px + 9.226vw, 132px);
  }
}

.m-plan__text-wrapper {
  margin-top: 1.4rem;
}

@media screen and (min-width: 768px) {
  .m-plan__text-wrapper {
    margin-top: 6rem;
  }
}

.m-plan__text {
  font-size: 1.2rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-plan__text {
    font-size: clamp(30px, 9.429px + 2.679vw, 48px);
  }
}

.m-plan__contents-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.4rem;
  justify-items: center;
  margin-top: 2.6rem;
}

@media screen and (min-width: 768px) {
  .m-plan__contents-wrapper {
    column-gap: 5.4rem;
    margin-top: 9.6rem;
  }
}

.m-plan__contents {
  display: grid;
  row-gap: 3.5rem;
}

@media screen and (min-width: 768px) {
  .m-plan__contents {
    row-gap: 13.5rem;
  }
}

.m-half-button {
  position: relative;
  width: 100%;
  font-size: 1.3rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  text-align: center;
  padding-block: 1.2rem;
  padding-inline: 1.4rem;
}

@media screen and (min-width: 768px) {
  .m-half-button {
    font-size: clamp(34px, 14.571px + 2.53vw, 51px);
    padding-top: 4.4rem;
    padding-bottom: 4.8rem;
  }
}

.m-half-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color__red);
  width: 100%;
  height: 100%;
  border-radius: 1.4rem;
  box-shadow: 0.2rem 0.4rem 0 0.1rem rgba(0, 0, 0, 1);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-half-button::before {
    border-radius: 3.3rem;
    box-shadow: 0.8rem 1rem 0 0.1rem rgba(0, 0, 0, 1);
  }
}

.m-half-button-arrow {
  position: relative;
  display: inline-block;
  width: 0.9rem;
  height: 1.3rem;
  margin-left: 0.2rem;
  margin-bottom: -0.3rem;
}

.m-half-button-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 0.9rem;
  border-color: transparent transparent transparent var(--color-white);
}

@media screen and (min-width: 768px) {
  .m-half-button-arrow {
    width: 3.4rem;
    height: 5.1rem;
    margin-left: 1.6rem;
    margin-bottom: -1.3rem;
  }

  .m-half-button-arrow::before {
    border-width: 2.5rem 0 2.5rem 3.4rem;
  }
}

.m-hero-declaration {
  padding-bottom: 3.4rem;
}

@media screen and (min-width: 768px) {
  .m-hero-declaration {
    padding-bottom: 7rem;
  }
}

.m-hero-declaration__header {
  position: relative;
  padding-top: 9.8rem;
  padding-bottom: 7.2rem;
}

.m-hero-declaration__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/hero_declaration_header_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 371;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-hero-declaration__header {
    padding-top: 35.4rem;
    padding-bottom: 38.2rem;
  }

  .m-hero-declaration__header::before {
    background-image: url(../../img/hero_declaration_header_bg.png);
    aspect-ratio: 1440 / 1423;
  }
}

.m-hero-declaration__image-wrapper {
  padding-inline: 0.6rem;
}

.m-hero-declaration__image {
  display: grid;
  justify-items: center;
}

.m-hero-declaration__image img {
  aspect-ratio: 323 / 200;
}

@media screen and (min-width: 768px) {
  .m-hero-declaration__image img {
    aspect-ratio: 1125 / 695;
    max-width: 112.5rem;
  }
}

.m-hero-declaration__wrapper {
  margin-top: 4.2rem;
}

@media screen and (min-width: 768px) {
  .m-hero-declaration__wrapper {
    margin-top: 8.6rem;
  }
}

.m-hero-declaration__text-box-wrapper {
  padding-inline: 0.9rem;
}

@media screen and (min-width: 768px) {
  .m-hero-declaration__text-box-wrapper {
    padding-inline: 9.2rem;
  }
}

.m-action {
  position: relative;
  padding-top: 11.6rem;
  padding-bottom: 14rem;
}

@media screen and (min-width: 768px) {
  .m-action {
    padding-top: 42.8rem;
    padding-bottom: 52.9rem;
  }
}

.m-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/action_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 647;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-action::before {
    background-image: url(../../img/action_bg.png);
    aspect-ratio: 1440 / 2481;
  }
}

.m-action__text-wrapper {
  padding-inline: 1.4rem;
}

@media screen and (min-width: 768px) {
  .m-action__text-wrapper {
    padding-inline: 2.4rem;
  }
}

.m-action__text {
  font-size: 1.2rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.5;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-action__text {
    font-size: clamp(30px, 9.429px + 2.679vw, 48px);
  }
}

.m-action__note-wrapper {
  padding-inline: 0.4rem;
  margin-top: 2rem;
}

@media screen and (min-width: 768px) {
  .m-action__note-wrapper {
    margin-top: 6rem;
  }
}

.m-action__note {
  font-size: 1rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-bold);
  color: var(--color__red);
  line-height: 2.3;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-action__note {
    font-size: clamp(22px, 3.714px + 2.381vw, 38px);
  }
}

.m-action__button-wrapper {
  position: relative;
  margin-top: 8.6rem;
}

@media screen and (min-width: 768px) {
  .m-action__button-wrapper {
    display: grid;
    justify-items: center;
    margin-top: 33.6rem;
  }
}

.m-action__button-caption {
  position: absolute;
  top: -4rem;
  left: -2rem;
  display: grid;
}

@media screen and (min-width: 768px) {
  .m-action__button-caption {
    /* top: -15rem;
    left: -7rem; */
    top: unset;
    left: calc(clamp(36px, -2.857px + 5.06vw, 70px) * -1);
    bottom: clamp(354px, 44vw, 444px);
  }
}

@media screen and (min-width: 1024px) {
  .m-action__button-caption {
    bottom: clamp(444px, 311.077px + 12.981vw, 498px);
  }
}

.m-action__button-caption img {
  object-fit: cover;
  aspect-ratio: 110 / 54;
  width: 11rem;
}

@media screen and (min-width: 768px) {
  .m-action__button-caption img {
    width: clamp(240px, 42.286px + 25.744vw, 413px);
    aspect-ratio: 413 / 202;
  }
}

.m-action__half-button-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.9rem;
  justify-items: center;
  padding-inline: 0.6rem;
  margin-top: 4.8rem;
}

@media screen and (min-width: 768px) {
  .m-action__half-button-wrapper {
    column-gap: 7.2rem;
    width: 100%;
    padding-left: 0;
    padding-right: 1.4rem;
    margin-top: 18.2rem;
  }
}

.m-faq {
  position: relative;
  padding-top: 11.2rem;
  padding-bottom: 12.3rem;
}

@media screen and (min-width: 768px) {
  .m-faq {
    padding-top: 39.7rem;
    padding-bottom: 57.4rem;
  }
}

.m-faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../img/faq_bg-sp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 1767;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-faq::before {
    background-image: url(../../img/faq_bg.png);
    aspect-ratio: 1440 / 6771;
  }
}

.m-faq__header {
  padding-inline: 0.8rem;
}

.m-faq__header-image {
  display: grid;
  justify-items: center;
}

.m-faq__header-image img {
  aspect-ratio: 318 / 147;
}

@media screen and (min-width: 768px) {
  .m-faq__header-image img {
    aspect-ratio: 1015 / 471;
    width: clamp(541px, -0.714px + 70.536vw, 1015px);
    max-width: 101.5rem;
  }
}

.m-faq__contents-wrapper {
  display: grid;
  row-gap: 7.8rem;
  margin-top: 2.1rem;
}

@media screen and (min-width: 768px) {
  .m-faq__contents-wrapper {
    row-gap: 28.8rem;
    margin-top: 12.2rem;
  }
}

.m-faq-contents__header {
  display: grid;
  row-gap: 1.8rem;
  padding-inline: 1.2rem;
}

@media screen and (min-width: 768px) {
  .m-faq-contents__header {
    row-gap: 6.8rem;
    padding-left: 1.2rem;
    padding-right: 0;
  }
}

.m-faq-contents__header-unit {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  column-gap: 1.2rem;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .m-faq-contents__header-unit {
    grid-template-columns: clamp(88px, 46.857px + 5.357vw, 124px) 1fr;
    column-gap: 5.2rem;
  }
}

.m-faq-contents__question-text {
  font-size: 2.1rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__red);
  line-height: 1.3;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-faq-contents__question-text {
    font-size: clamp(42px, -1.429px + 5.655vw, 80px);
  }
}

.m-faq-contents__answer-text {
  font-size: 2rem;
  font-family: var(--font-biz-ud-gothic);
  font-weight: var(--fw-bold);
  color: var(--color__black-dark);
  line-height: 1.3;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-faq-contents__answer-text {
    font-size: clamp(42px, 2px + 5.208vw, 77px);
  }
}

.m-faq-contents__body-wrapper {
  padding-inline: 0.5rem;
}

.m-faq-contents__body {
  position: relative;
  display: grid;
  align-items: center;
  aspect-ratio: 325 / 196;
  padding-block: 4rem;
  padding-left: 2.9rem;
  padding-right: 2rem;
  margin-top: 3rem;
}

.m-faq-contents__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  border-radius: 2.1rem;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .m-faq-contents__body {
    aspect-ratio: unset;
    padding-top: 14.4rem;
    padding-left: 10.2rem;
    padding-right: 5rem;
    padding-bottom: 14rem;
    margin-top: 11rem;
  }

  .m-faq-contents__body::before {
    border-radius: 5rem;
  }
}

.m-faq-contents__text {
  font-size: 1rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.4;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .m-faq-contents__text {
    font-size: clamp(22px, 2.571px + 2.53vw, 39px);
  }
}

.m-faq-contents__corner {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--color__gray-light-2);
  border-radius: 50%;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .m-faq-contents__corner {
    width: 3.2rem;
    height: 3.2rem;
  }
}

.m-faq-contents__corner--top-left {
  top: 1.2rem;
  left: 1.6rem;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .m-faq-contents__corner--top-left {
    top: 4.2rem;
    left: 3.8rem;
  }
}

.m-faq-contents__corner--top-right {
  top: 1.2rem;
  right: 1.6rem;
  transform: translate(50%, -50%);
}

@media screen and (min-width: 768px) {
  .m-faq-contents__corner--top-right {
    top: 4.2rem;
    right: 4.8rem;
  }
}

.m-faq-contents__corner--bottom-left {
  bottom: 1.2rem;
  left: 1.6rem;
  transform: translate(-50%, 50%);
}

@media screen and (min-width: 768px) {
  .m-faq-contents__corner--bottom-left {
    bottom: 2.8rem;
    left: 3.8rem;
  }
}

.m-faq-contents__corner--bottom-right {
  bottom: 1.2rem;
  right: 1.6rem;
  transform: translate(50%, 50%);
}

@media screen and (min-width: 768px) {
  .m-faq-contents__corner--bottom-right {
    bottom: 2.8rem;
    right: 4.8rem;
  }
}

.m-fair-disclaimer {
  padding-top: 1.6rem;
}

@media screen and (min-width: 768px) {
  .m-fair-disclaimer {
    padding-top: 12.8rem;
  }
}

.m-fair-disclaimer__text {
  font-size: 1rem;
  font-family: var(--font-noto-sans-jp);
  font-weight: var(--fw-medium);
  color: var(--color__black);
  line-height: 2.4;
  letter-spacing: 0;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  text-align: center;
}

@media screen and (min-width: 768px) {
  .m-fair-disclaimer__text {
    font-size: clamp(20px, -1.714px + 2.827vw, 39px);
  }
}