@charset "UTF-8";
/* stylelint-disable */
/*! Oreset.css v2.0.0 | MIT License | https://github.com/hilosiva/Oreset.css */
/*
  # Global
---------------------------------------------- */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
/*
  # Document & Sections
---------------------------------------------- */
:where(html) {
  block-size: 100%;
  -webkit-text-size-adjust: none;
}
:where(body) {
  min-block-size: 100%;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-family: var(--font-sans-ja);
  -webkit-font-smoothing: antialiased;
  color: var(--color-text);
}
/*
  # Grouping content
---------------------------------------------- */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}
:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}
:where(ul, ol) {
  list-style-type: "";
}
/*
  # Text-level semantics
---------------------------------------------- */
:where(a:not([class])) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}
/*
  # Embedded content
---------------------------------------------- */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}
:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}
:where(svg:not([fill])) {
  fill: currentColor;
}
/*
  # Tabular data
---------------------------------------------- */
:where(table) {
  border-collapse: collapse;
}
/*
  # Forms
---------------------------------------------- */
:where(input, button, textarea, select, optgroup) {
  font: inherit;
  color: inherit;
}
:where(textarea) {
  resize: vertical;
  resize: block;
}
:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  cursor: pointer;
}
:where(:disabled) {
  cursor: not-allowed;
}
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}
:where(button) {
  border-style: solid;
}
/*
  # Interactive & Misc
---------------------------------------------- */
:where(template, [hidden]:not([hidden="until-found"])) {
  display: none;
}
:where(dialog, [popover]) {
  border: none;
  background: none;
  color: inherit;
  inset: unset;
  max-width: unset;
  max-height: unset;
}
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  display: none;
}
/*
  # Accessibility
---------------------------------------------- */
:where([disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
}
:where([aria-busy="true"]) {
  cursor: progress;
}
:where([aria-controls]) {
  cursor: pointer;
}
:where([aria-hidden="false"][hidden]) {
  display: initial;
}
:where([aria-hidden="false"][hidden]):not(:focus) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
:where(
    :focus:not(:focus-visible),
    ::before:focus:not(:focus-visible),
    ::after:focus:not(:focus-visible)
  ) {
  outline: none;
}
/**
 * Prettier ignore
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after,
  ::backdrop {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
:root {
  /* tool */
  --torem: calc(1rem / 16);
  --torlh: calc(1rlh / 16);

  /* Design */
  --design-width-sm: 375;
  --design-width-md: 768;
  --design-width-lg: 1023;
  --design-width-lg: 1280;

  /* Color */
  --white: #fff;
  --blue: #006eff;
  --black: #000;
  --darkgray: #191919;
  --darkblue: #335568;

  /* Accent */
  --Main: #ffefde;
  --MainSub: #ff3877;
  --MainDark: #3d3d3d;
  --MainSubDark: #353840;
  --MainBg: #1e2129;
  --SubBg: #eae4d3;
  --Btn-yellow: linear-gradient(180deg, #ffd600 50%, #ffb800 100%);

  /* Text */
  --Text_Main: #fff;
  --Text_Sub: #5b5b5b;
  --Text_Light: #b7836b;
  --Text_gray: #dadada;

  --Text_Placeholder: ;

  /* Font Family */
  --font-sans-ja: "Noto Sans JP", sans-serif;
  --font-sub: "Roboto", sans-serif;

  /* Font Size */
  --font-base: 16;
  --font-ratio: 8;
  --font-2xs: calc(var(--font-base) * var(--font-ratio) / 12 * var(--torem));
  --font-xs: calc(var(--font-base) * var(--font-ratio) / 10 * var(--torem));
  --font-sm: calc(var(--font-base) * var(--font-ratio) / 9 * var(--torem));
  --font-md: calc(var(--font-base) * var(--font-ratio) / 8 * var(--torem));
  --font-lg: calc(var(--font-base) * var(--font-ratio) / 7 * var(--torem));
  --font-xl: calc(var(--font-base) * var(--font-ratio) / 5 * var(--torem));
  --font-2xl: calc(var(--font-base) * var(--font-ratio) / 3 * var(--torem));

  /* Font Size */
  --font-fluid-xs: fluid(10.667, 12.8);
  --font-fluid-sm: fluid(14.222, 16);
  --font-fluid-md: fluid(16, 18.286);
  --font-fluid-lg: fluid(18, 21.333);
  --font-fluid-xl: fluid(25.6, 32);
  --font-fluid-2xl: fluid(32, 42.667);
  --font-fluid-3xl: fluid(42.667, 64);

  /* Line Height */
  --leading-base: 4;
  --leading-xs: calc(var(--leading-base) * 3 * var(--torem));
  --leading-sm: calc(var(--leading-base) * 4 * var(--torem));
  --leading-md: calc(var(--leading-base) * 5 * var(--torem));
  --leading-lg: calc(var(--leading-base) * 6 * var(--torem));
  --leading-xl: calc(var(--leading-base) * 7 * var(--torem));
  --leading-2xl: calc(var(--leading-base) * 8 * var(--torem));
  --leading-3xl: calc(var(--leading-base) * 9 * var(--torem));
  --leading-4xl: calc(var(--leading-base) * 10 * var(--torem));
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tigher: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: normal;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Container Size & Offset */
  --max-container-size: 1280px;
  --offset-xs: 1.5vw;
  --offset-sm: 2.5vw;
  --offset-md: 5vw;
  --offset-lg: 10vw;

  /* Space */
  --space-base: 8;
  --space-2xs: calc(var(--space-base) * var(--torem));
  --space-xs: calc(var(--space-base) * 2 * var(--torem));
  --space-sm: calc(var(--space-base) * 3 * var(--torem));
  --space-md: calc(var(--space-base) * 5 * var(--torem));
  --space-lg: calc(var(--space-base) * 8 * var(--torem));
  --space-xl: calc(var(--space-base) * 13 * var(--torem));

  /* Radius */
  --radius-sm: 1rem;
  --radius-md: 2rem;
  --radius-lg: 2.5rem;
  --radius-full: 50%;

  /* Arrow */
  --arrow-width: 12%;
  --arrow-prev: polygon(
    100% var(--line-width),
    calc(100% - var(--line-width)) 0,
    calc(50% - var(--line-width)) 50%,
    calc(100% - var(--line-width)) 100%,
    100% calc(100% - var(--line-width)),
    calc(50% + var(--line-width)) 50%,
    100% var(--line-width)
  );
  --arrow-next: polygon(
    0 var(--line-width),
    var(--line-width) 0,
    calc(50% + var(--line-width)) 50%,
    var(--line-width) 100%,
    0 calc(100% - var(--line-width)),
    calc(50% - var(--line-width)) 50%,
    0 var(--line-width)
  );

  /* Transition & Animation */
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1.2s;
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
}
/* =========================
  ✅全体の共通スタイル
========================= */
body {
  font-family: var(--font-sans-ja);
  font-size: 16px;
  line-height: 1.5;
  color: var(--Text_Main);
  background-color: var(--MainBg);
}
.u-mobile {
  display: none;
  @media screen and (max-width: 767px) {
    display: block;
  }
}
.u-tablet {
  display: none;
  @media screen and (max-width: 1023px) {
    display: block;
  }
}
.u-desktop {
  display: block;
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.inner {
  max-width: var(--max-container-size);
  margin-inline: auto;
  padding-inline: var(--offset-xs);

  @media screen and (max-width: 767px) {
    padding-inline: 15px;
  }
}
.cta-btn {
  padding: 10px 13px;
  border-radius: 7px;
  font-size: calc(40 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 1; /* 208.718% */
  letter-spacing: 0.4px;
  color: var(--Main);
  background: rgba(0, 0, 0, 0.57);
  box-shadow: 0px 4px 41px 0px rgba(0, 0, 0, 0.66);
  display: block grid;
  grid-template-columns: auto 1fr auto;
  place-items: center;
  width: calc(1085 * var(--torem));
  position: relative;

  @media screen and (max-width: 767px) {
    width: 100%;
    font-size: calc(18 * var(--torem));
    padding: 9px 13px;

    img {
      width: calc(33 * var(--torem));
      aspect-ratio: 1;
      object-fit: cover;
    }
  }
}
.cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  border: 3px solid transparent;
  background: linear-gradient(
      180deg,
      rgba(255, 239, 222, 1) 48%,
      rgba(255, 195, 163, 1) 100%
    )
    border-box border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;

  @media screen and (max-width: 767px) {
    border: 1px solid transparent;
  }
}
.calculation-btn {
  color: #1f1600;
  background: var(--Btn-yellow);
  font-size: calc(18 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 13px;
  width: calc(142 * var(--torem));
  border-radius: 4px;
  pointer-events: none;
}
/* =========================
  ✅ヘッダー
========================= */
.header {
  width: 100%;
  background-image: url("../assets/header-bg-CN_rslRD.png");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;

  @media screen and (max-width: 767px) {
    padding: 10px;
    background-image: url("../assets/header-bg-sp-DFnsVkzf.png");
  }
}
.header-logo {
  width: calc(305 * var(--torem));
  aspect-ratio: 305/149;

  margin-inline: auto;

  @media screen and (max-width: 767px) {
    width: calc(96 * var(--torem));
    aspect-ratio: 96/47;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* =========================
  ✅FV
========================= */
.fv {
  width: 100%;
  height: 100vh;
  position: relative;

  @media screen and (max-width: 767px) {
    height: 100%;
    padding-top: 25.9vw;
    padding-bottom: 7.69vw;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(30, 33, 41, 0.82) 42.98%
    );
    background-blend-mode: multiply;

    z-index: 2;
  }
}
.fv-movie {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.fv-inner {
  padding: 20px calc(113 * var(--torem));

  @media screen and (max-width: 767px) {
    padding: 20px calc(26 * var(--torem));
  }
}
.fv-title-wrap {
  position: relative;
  z-index: 3;
  top: 50%;
  /* transform: translateY(10%); */

  @media screen and (max-width: 767px) {
    top: auto;
    transform: none;
  }
}
.fv-title {
  font-size: calc(44 * var(--torem));
  font-weight: 400;
  line-height: 111.3%; /* 93.492px */

  @media screen and (max-width: 1023px) {
    font-size: calc(30 * var(--torem));
  }

  @media screen and (max-width: 767px) {
    font-size: calc(18 * var(--torem));
    font-weight: 700;
  }
}
.fv-text {
  font-size: calc(25 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: 158%; /* 39.5px */
  margin-top: calc(35 * var(--torem));

  @media screen and (max-width: 767px) {
    font-size: calc(16 * var(--torem));
    margin-top: 4px;
  }
}
.fv-text-small {
  margin-top: calc(10 * var(--torem));

  @media screen and (max-width: 767px) {
    display: none;
  }
}
/* =========================
  ✅VIP
========================= */
.vip {
  padding: 20px 0 57px;

  @media screen and (max-width: 767px) {
    padding: 0 0 calc(43 * var(--torem));
  }
}
.vip-heading-wrap {
  width: 100%;
  background-image: url("../assets/vip-bg-BQYwHzrS.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1440/379;
}
.vip-heading {
  color: rgba(255, 236, 233, 0.82);
  font-size: 6.28vw;
  font-style: normal;
  font-weight: 900;
  line-height: 1; /* 78.762% */
  letter-spacing: 0.014em;
  width: fit-content;
  position: relative;
  top: 50%;
  left: 50%;

  opacity: 0;
  transform: translate(-50%, 10%);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  @media screen and (max-width: 1023px) {
    font-size: 5.8vw;
  }

  span {
    color: var(--MainSub);
    font-size: 13.19vw;
  }
}
.vip-heading.is-on {
  opacity: 1;
  transform: translate(-50%, -50%);
}
_::-webkit-full-page-media,
_:future,
:root .vip-heading {
  transform: translate(-50%, 50%);
}
.vip-container {
  padding-top: 51px;
  position: relative;

  &::after {
    content: "";
    display: block;
    background-image: url("../assets/img-dolphin-DnmHoaQp.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: calc(314 * var(--torem));
    aspect-ratio: 314/330;

    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);

    @media screen and (max-width: 767px) {
      width: 60%;
    }
  }
}
.vip-inner {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.vip-inner.is-on {
  opacity: 1;
  transform: translateY(0);
}
.vip-text {
  font-size: calc(25 * var(--torem));
  font-style: normal;
  font-weight: 500;
  line-height: 153.3%; /* 38.325px */
  text-align: center;

  @media screen and (max-width: 767px) {
    font-size: calc(15 * var(--torem));
  }
}
.vip-sub-title {
  font-size: calc(43 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 142.3%; /* 61.189px */
  text-align: center;
  margin-top: calc(30 * var(--torem));

  @media screen and (max-width: 767px) {
    font-size: calc(18 * var(--torem));
    margin-top: calc(5 * var(--torem));
  }
}
.fv-text-small-sp {
  display: none;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 16.2px */
  text-align: center;
  margin-top: 14px;
  @media screen and (max-width: 767px) {
    display: block;
  }
}
.vip-cta-btn {
  display: flex;
  justify-content: center;
  justify-content: center;
  margin-top: calc(62 * var(--torem));

  @media screen and (max-width: 767px) {
    margin-top: calc(79 * var(--torem));
  }
}
/* =========================
  ✅ここがすごい
========================= */
.point {
  padding-bottom: calc(117 * var(--torem));
  overflow: clip;

  @media screen and (max-width: 767px) {
    padding-bottom: calc(27 * var(--torem));
  }
}
.point-inner {
  max-width: 1366px;
}
.point-container {
  position: relative;
  background-color: var(--SubBg);
  padding: 20px 0 calc(162 * var(--torem));

  @media screen and (max-width: 767px) {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    padding: 20px 0 calc(151 * var(--torem));
  }

  &::before {
    content: "";
    display: block;
    background-image: url("../assets/point-bg-CTyF7rHt.png");
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  &::after {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 1366/290;
    background: linear-gradient(180deg, #151515 49%, transparent 100%);
    mix-blend-mode: plus-darker;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;

    @media screen and (max-width: 767px) {
      aspect-ratio: 390/92;
    }
  }
}
.point-wrap {
  position: relative;
  z-index: 3;
}
.point-heading-wrap {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.point-heading-wrap.is-on {
  opacity: 1;
  transform: translateY(0);
}
.point-heading {
  font-size: calc(52 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 142.3%; /* 73.295px */
  text-align: center;

  @media screen and (max-width: 767px) {
    font-size: calc(21 * var(--torem));
  }
}
.point-gold {
  font-size: calc(64 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: 142.3%; /* 91.619px */
  color: rgba(0, 0, 0, 0);
  background: linear-gradient(180deg, #ffd600 0%, #825e00 100%);
  background-clip: text;
  -webkit-background-clip: text;
  margin-right: calc(18 * var(--torem));

  @media screen and (max-width: 767px) {
    font-size: calc(27 * var(--torem));
  }
}
.point-pink {
  font-size: calc(64 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: 142.3%; /* 91.619px */
  color: rgba(0, 0, 0, 0);
  background: var(--pnk, linear-gradient(180deg, #ffefde 0%, #ffc3a3 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: calc(19 * var(--torem));

  @media screen and (max-width: 767px) {
    font-size: calc(27 * var(--torem));
  }
}
.point-subHeading {
  text-align: center;
  font-size: calc(49 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 142.3%; /* 69.727px */

  @media screen and (max-width: 767px) {
    font-size: calc(18 * var(--torem));
  }
}
.point-list {
  margin-top: calc(81 * var(--torem));

  @media screen and (max-width: 767px) {
    margin-top: calc(20 * var(--torem));
  }
}
.point-item {
  background-image: url("../assets/point-bg01-CBt3EdDu.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 1440/341;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  position: relative;

  @media screen and (max-width: 767px) {
    background-image: url("../assets/point-bg01-sp-Gj_xqv9R.png");
    aspect-ratio: 390/130;
  }
}
.point-item-wrap {
  background-color: var(--white);
  width: calc(504 * var(--torem));
  padding: 29px calc(30 * var(--torem)) calc(30 * var(--torem));
  color: var(--Text_Light);
  position: absolute;
  right: 14.24vw;
  bottom: calc(-50 * var(--torem));

  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  @media screen and (max-width: 1023px) {
    bottom: calc(-30 * var(--torem));
  }

  @media screen and (max-width: 767px) {
    padding: calc(20 * var(--torem));
    width: 85%;
    right: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(50%, 50%);
  }
}
.point-item-wrap.is-on {
  opacity: 1;
  transform: translateY(0);

  @media screen and (max-width: 767px) {
    transform: translate(50%, 20%);
  }
}
.point-item-num {
  font-size: calc(24 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 142.3%; /* 34.152px */
  text-align: end;
  padding-right: calc(50 * var(--torem));
  position: absolute;
  top: 13px;
  right: 0;

  .num {
    font-family: var(--font-sub);
    font-size: calc(128 * var(--torem));
    font-style: normal;
    font-weight: 900;
    line-height: 1; /* 182.144px */
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(180deg, #ffefde 0%, #fe6310 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    bottom: calc(-20 * var(--torem));
    right: 0;

    @media screen and (max-width: 767px) {
      font-size: calc(72 * var(--torem));
    }
  }

  .text {
    @media screen and (max-width: 767px) {
      display: none;
    }
  }
}
.point-item-title {
  font-size: calc(34 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 135.3%; /* 46.002px */

  @media screen and (max-width: 767px) {
    font-size: calc(18 * var(--torem));
  }
}
.point-item-text {
  font-size: calc(20 * var(--torem));
  font-style: normal;
  font-weight: 500;
  line-height: 158.3%; /* 31.66px */
  margin-top: 12px;
  color: var(--Text_Sub);

  @media screen and (max-width: 767px) {
    font-size: calc(12 * var(--torem));
    margin-top: 8px;
  }
}
/* POINT2 */
.point-item.--num02 {
  background-image: url("../assets/point-bg02-Cw0DNYLD.png");

  @media screen and (max-width: 767px) {
    background-image: url("../assets/point-bg02-sp-Igg1lOYh.png");
  }

  .point-item-wrap {
    padding: 45px calc(30 * var(--torem)) calc(30 * var(--torem));
    left: 14.24vw;
    bottom: calc(-56 * var(--torem));

    @media screen and (max-width: 1023px) {
      bottom: calc(-70 * var(--torem));
    }

    @media screen and (max-width: 767px) {
      left: auto;
      bottom: auto;
      padding: calc(20 * var(--torem));
    }
  }

  .point-item-num {
    padding-right: calc(81 * var(--torem));
    top: 13px;
    right: 0;

    .num {
      position: absolute;
      bottom: calc(-10 * var(--torem));
      right: calc(5 * var(--torem));

      @media screen and (max-width: 767px) {
        bottom: calc(-20 * var(--torem));
      }
    }
  }
}
/* POINT3 */
.point-item.--num03 {
  background-image: url("../assets/point-bg03-DYbTeEtT.png");

  @media screen and (max-width: 767px) {
    background-image: url("../assets/point-bg03-sp-Dq1VI7VI.png");
  }

  .point-item-wrap {
    padding: 52px calc(30 * var(--torem)) calc(30 * var(--torem));
    right: 14.24vw;
    bottom: calc(-59 * var(--torem));

    @media screen and (max-width: 767px) {
      padding: calc(15 * var(--torem));
      right: 50%;
      bottom: auto;
    }
  }

  .point-item-num {
    padding-right: calc(87 * var(--torem));
    top: 13px;
    right: 0;

    .num {
      position: absolute;
      bottom: calc(-20 * var(--torem));
      right: calc(5 * var(--torem));
    }
  }
}
.point-item + .point-item {
  margin-top: calc(121 * var(--torem));

  @media screen and (max-width: 767px) {
    margin-top: calc(110 * var(--torem));
  }
}

/* =========================
  modal
========================= */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #0f0f0f;
  border-radius: 12px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  color: #fff;
  position: relative;
  box-sizing: border-box;
}

.modal-content h2 {
  color: #ffce00;
  margin-bottom: 24px;
  font-size: 1.5rem;
}

.modal-content label {
  display: block;
  margin: 12px 0 6px;
  font-size: 0.95rem;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: none;
  background-color: #1f1f1f;
  color: white;
  margin-bottom: 12px;
  font-size: 1rem;
  box-sizing: border-box;
}

.modal-content textarea {
  resize: vertical;
  min-height: 80px;
}

.checkbox-wrapper {
  margin: 20px 0 24px;
  display: flex;
  justify-content: flex-start;
}

.checkbox-policy {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  gap: 8px;
  color: white;
}

.checkbox-policy input[type="checkbox"] {
  width: 10px;
  transform: scale(1.2);
  margin: 0;
}

.modal-content button {
  width: 100%;
  background-color: #e5b600;
  border: none;
  padding: 14px;
  color: black;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  color: white;
}

@media screen and (max-width: 600px) {
  .modal-content {
    padding: 20px;
    width: 95%;
  }
  .modal-content button {
    font-size: 16px;
  }
  .checkbox-wrapper {
    justify-content: flex-start;
  }
  .checkbox-policy {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  .checkbox-policy .policy-text {
    font-size: 0.9rem;
  }
}

.load-map-img {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 40px;
}

@media screen and (max-width: 600px) {
  .load-map-img {
    width: 100%;
  }
}

/* =========================
  NFT STEP 
========================= */
img.nft-step-img {
  width: 50%;
  margin: 0 auto;

  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

.nft-step {
  margin-bottom: 60px;

  @media screen and (max-width: 767px) {
    margin-bottom: 20px;
  }
}

.apply-button {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.apply-button a {
  width: 360px;
  padding: 12px 24px;
  background-color: #f7c700;
  color: #000;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.apply-button a:hover {
  background-color: #e6b800;
}

/* =========================
  NEWS 
========================= */
.news-inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media screen and (max-width: 1023px) {
    padding: 0 24px;
  }

  @media screen and (max-width: 767px) {
    padding: 0 16px;
  }
}

.news-list {
  width: calc(1085 * var(--torem));
  margin: 40px 20px;
  padding: 50px;
  border-radius: 20px;
  list-style: none;
  background-color: #000;

  @media screen and (max-width: 1023px) {
    width: 100%;
    margin: 32px 0;
    padding: 32px 24px;
    border-radius: 16px;
  }

  @media screen and (max-width: 767px) {
    padding: 24px 16px;
    border-radius: 12px;
    margin: 24px 0;
  }
}

.news-item {
  margin: 16px 0;

  @media screen and (max-width: 767px) {
    margin: 12px 0;
  }

  a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;

    @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  }
}

.news-date {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;

  @media screen and (max-width: 767px) {
    font-size: 12px;
    padding: 4px 10px;
  }
}

.news-title {
  font-weight: bold;
  font-size: 16px;

  @media screen and (max-width: 767px) {
    font-size: 14px;
    line-height: 1.4;
  }
}

.about-cta-btn .cta-btn {
  pointer-events: none;
  cursor: default;

  @media screen and (max-width: 767px) {
    display: none;
    font-size: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
  }
}

.about-cta-btn img {
  height: auto;

  @media screen and (max-width: 767px) {
    height: 20px;
    width: auto;
  }
}


/* =========================
  question
========================= */
.question-box {
  background-color: #fff;
  color: #a66b44;
  padding: 40px;
  border-radius: 8px;
  width: calc(1085 * var(--torem));
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;

  @media screen and (max-width: 1023px) {
    width: 100%;
    padding: 32px 24px;
    gap: 24px;
  }

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 16px;
    margin: 24px auto;
  }

  .question-content {
    flex: 1 1 500px;
    font-size: 16px;
    line-height: 1.8;

    p {
      margin-bottom: 16px;
    }

    strong {
      display: inline-block;
      margin-right: 4px;
      color: #a66b44;
      font-weight: bold;
    }
  }

  .question-logo {
    flex: 0 0 auto;
    max-width: 240px;
    align-self: flex-end;

    img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
}

.qna-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: white;
  border-radius: 10px;
  padding: 40px;
  width: calc(1085 * var(--torem));
  flex-wrap: wrap;
  margin: 40px auto;

  @media screen and (max-width: 1023px) {
    width: 100%;
    padding: 32px 24px;
  }

  @media screen and (max-width: 767px) {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    margin: 24px;
  }

  .qna-text {
    flex: 1;
    min-width: 300px;
    color: #996644;
    font-size: 18px;
    line-height: 1.8;

    p {
      margin-bottom: 20px;
    }

    strong {
      font-weight: bold;
    }
  }

  .qna-logo {
    flex-shrink: 0;
    margin-left: 30px;

    @media screen and (max-width: 767px) {
      margin-left: 0;
      margin-top: 20px;
      align-self: center;
    }

    img {
      width: 200px;
      max-width: 100%;
      height: auto;
    }
  }
}

/* =========================
  ✅とは？？
========================= */
.about-inner {
  margin-bottom: 160px;
}
.about-wrap {
  position: relative;

  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
  }
}
.about-img {
  width: 61%;
  aspect-ratio: 870/544;
  position: absolute;

  @media screen and (max-width: 1023px) {
    position: relative;
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    order: 2;
    margin-top: 8px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &::before {
    content: "";
    display: block;
    background: url("../assets/about-mask-DjldnchT.png") center/cover no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.84;
  }
}
.about-discription {
  width: 66%;
  position: relative;
  z-index: 2;
  margin-right: 0;
  margin-left: auto;
  padding: 28px 20px 7.64vw calc(153 * var(--torem));
  background: linear-gradient(270deg, #080909 0%, rgba(0, 0, 0, 0) 100%);

  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  @media screen and (max-width: 1023px) {
    width: 100%;
    padding: 28px 20px 7.64vw calc(70 * var(--torem));
    background: none;
  }

  @media screen and (max-width: 767px) {
    display: contents;
  }
}
.about-discription.is-on {
  opacity: 1;
  transform: translateY(0);
}
.about-heading {
  font-size: 2.78vw;
  font-style: normal;
  font-weight: 700;
  line-height: normal; /* 73.295px */

  @media screen and (max-width: 767px) {
    order: 1;
    text-align: center;
    font-size: calc(18 * var(--torem));
  }

  span {
    font-size: 3.19vw;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    display: block;

    @media screen and (max-width: 767px) {
      font-size: calc(21 * var(--torem));
    }
  }
}
.about-list {
  margin-top: 45px;

  @media screen and (max-width: 767px) {
    order: 3;
    margin-top: 10px;
    margin-inline: auto;
    padding: 0 calc(20 * var(--torem));

    opacity: 0;
    transform: translateY(50px);
    transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
.about-list.is-on {
  opacity: 1;
  transform: translateY(0);
}
.about-item {
  display: block grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-bottom: 16px;
  gap: 12px;
  border-bottom: 4px solid;
  border-image: linear-gradient(
    90deg,
    #0040ff 0%,
    #e81341 16.5%,
    #fff 68.5%,
    #000 87.5%,
    #ff0026 100%
  );

  border-image-slice: 1;
  width: 90%;

  @media screen and (max-width: 767px) {
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
    width: 100%;
  }
}
.about-item.__02 {
  border-image: linear-gradient(
    90deg,
    #fff 0%,
    #0040ff 18%,
    #e81341 32.5%,
    #000 87.5%,
    #ff0026 100%
  );
  border-image-slice: 1;
}
.about-num {
  width: calc(38 * var(--torem));
  aspect-ratio: 1;
  background-color: var(--white);
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 767px) {
    width: calc(19 * var(--torem));
  }

  span {
    color: var(--blue);
    font-family: var(--font-sub);
    font-size: calc(34 * var(--torem));
    font-style: normal;
    font-weight: 800;
    line-height: 1;

    @media screen and (max-width: 767px) {
      font-size: calc(17 * var(--torem));
    }
  }
}
.about-text {
  font-size: calc(20 * var(--torem));
  font-style: normal;
  font-weight: 900;
  line-height: 1.2; /* 263.333% */

  @media screen and (max-width: 767px) {
    font-size: calc(15 * var(--torem));
  }
}
.about-item + .about-item {
  margin-top: 16px;
}
.about-cta-btn {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;

  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  @media screen and (max-width: 767px) {
    margin-top: calc(31 * var(--torem));
  }
}
.about-cta-btn.is-on {
  opacity: 1;
  transform: translateY(0);
  
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.about-container {
  margin-top: calc(147 * var(--torem));
  display: block grid;
  grid-template-columns: 33% 1fr;
  max-width: calc(980 * var(--torem));
  gap: 28px;
  margin-inline: auto;

  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: calc(68 * var(--torem));
  }
}
.about-container.is-on {
  opacity: 1;
  transform: translateY(0);
}
.about-dolphin-img {
  width: 100%;
  aspect-ratio: 314/330;
  margin-top: calc(40 * var(--torem));

  @media screen and (max-width: 767px) {
    width: 50%;
    margin-inline: auto;
    margin-top: 0;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.dolphin-caption {
  font-size: calc(10 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: right;
  margin-top: calc(14 * var(--torem));
  padding-right: 20px;
}
.ahout-dolphin {
  @media screen and (max-width: 767px) {
  }
}
.ahout-dolphin-title {
  font-size: calc(28 * var(--torem));
  font-style: italic;
  font-weight: 400;
  line-height: normal;

  @media screen and (max-width: 767px) {
    font-size: calc(18 * var(--torem));
    text-align: center;
  }
}
.about-dolphin-text {
  font-size: calc(20 * var(--torem));
  font-style: italic;
  font-weight: 400;
  line-height: 180%; /* 180% */
  margin-top: calc(35 * var(--torem));

  @media screen and (max-width: 767px) {
    font-size: calc(11 * var(--torem));
    margin-top: calc(12 * var(--torem));
  }
}
.about-dolphin-text:first-of-type {
  margin-top: calc(47 * var(--torem));

  @media screen and (max-width: 767px) {
    margin-top: calc(12 * var(--torem));
  }
}
.dolphin-img-list {
  display: block grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  margin-top: calc(77 * var(--torem));

  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);
    margin-top: calc(30 * var(--torem));
  }
}
.dolphin-img-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.dolphin-img-item:nth-child(3) {
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.dolphin-img-item:nth-child(6) {
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.dolphin-cta-btn {
  display: none;
  @media screen and (max-width: 767px) {
    padding: 0 calc(15 * var(--torem));
    display: flex;
    justify-content: center;
    margin-top: calc(31 * var(--torem));
    opacity: 0;
    transform: translateY(50px);
    transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
.about-cta-btn.js-scroll-target-once.is-on. {
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.dolphin-cta-btn.is-on {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
  ✅遊び方
========================= */
.how {
  padding: calc(102 * var(--torem)) 0 calc(98 * var(--torem));
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(217, 217, 217, 0.5);
    z-index: 10;
    pointer-events: none;

    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  &::after {
    content: "Comingsoon！";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--MainSub);
    font-size: 8.89vw;
    font-style: normal;
    font-weight: 900;
    line-height: 1; /* 65.224% */
    letter-spacing: calc(1.28 * var(--torem));
    z-index: 11;

    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  @media screen and (max-width: 767px) {
    padding: calc(75 * var(--torem)) 0 calc(55 * var(--torem));
    overflow: clip;
  }
}
.how-inner {
}
.how-wrap {
  max-width: calc(680 * var(--torem));
  margin-inline: auto;
}
.how-heading {
  font-size: calc(24 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: 1; /* 58.333% */

  @media screen and (max-width: 767px) {
    text-align: center;
  }
}
.how-container {
  padding: 25px calc(28 * var(--torem)) 30px;
  background-color: var(--black);
  border: 1px solid var(--MainDark);
  border-radius: 5px;
  margin-top: 27px;

  @media screen and (max-width: 767px) {
    padding: calc(20 * var(--torem));
    margin-top: 22px;
  }
}
.how-summary {
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%; /* 162.5% */

  @media screen and (max-width: 767px) {
    font-size: calc(14 * var(--torem));
  }
}
.howto-img-wrap {
  display: block grid;
  grid-template-columns: 132px 40px 132px 40px 132px;
  gap: calc(30 * var(--torem));
  align-items: center;
  justify-content: center;
  margin-top: 30px;

  @media screen and (max-width: 767px) {
    grid-template-columns: 65px 30px 77px 20px 66px;
    gap: calc(9 * var(--torem));
  }
}
.howto-img {
  aspect-ratio: 1;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.howto-img.__bakara {
  @media screen and (max-width: 767px) {
    width: calc(65 * var(--torem));
    margin-inline: auto;
  }
}
.howto-title {
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-align: center;
  margin-top: 4px;

  @media screen and (max-width: 767px) {
    font-size: calc(11 * var(--torem));
  }
}
.howto-list {
  margin-top: calc(46 * var(--torem));
  padding: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  background-color: var(--MainSubDark);
  border-radius: 5px;
  border: 1px solid var(--MainDark);

  @media screen and (max-width: 767px) {
    margin-top: calc(20 * var(--torem));
    font-size: calc(12 * var(--torem));
  }
}
.howto-item + .howto-item {
  margin-top: 10px;
}
.howto-item {
  padding-left: 1em;
  text-indent: -1em;
}
.howto-try-text {
  font-size: calc(27 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  margin-top: 33px;

  span {
    display: inline-block;
  }

  @media screen and (max-width: 767px) {
    font-size: calc(24 * var(--torem));
  }
}
.howto-try-text-small {
  font-size: calc(21 * var(--torem));
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  margin-top: 15px;

  @media screen and (max-width: 767px) {
    font-size: calc(14 * var(--torem));
  }
}
.howto-point-container {
  padding: 28px calc(22 * var(--torem)) 30px;
  background-color: var(--black);
  border: 1px solid var(--MainDark);
  border-radius: 5px;
  margin-top: 34px;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(-10 * var(--torem));
    left: 0;
    right: 0;
    bottom: calc(-10 * var(--torem));
    background-color: rgba(217, 217, 217, 0.5);
    z-index: 10;
    pointer-events: none;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    display: none;

    @media screen and (max-width: 767px) {
      display: block;
    }
  }

  &::after {
    content: "Comingsoon！";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--MainSub);
    font-size: 8.89vw;
    font-style: normal;
    font-weight: 900;
    line-height: 1; /* 65.224% */
    letter-spacing: calc(1.28 * var(--torem));
    z-index: 11;
    display: none;

    @media screen and (max-width: 767px) {
      display: block;
    }
  }
}
.howto-balance-wrap {
  background-color: var(--darkgray);
  border: 1px solid var(--black);
  padding: calc(15 * var(--torem)) calc(20 * var(--torem));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.howto-balance-base {
  font-style: normal;
  font-weight: 500;
  line-height: 125%; /* 125% */

  span {
    font-size: calc(18 * var(--torem));
    line-height: 111.111%; /* 111.111% */
    margin-left: calc(22 * var(--torem));
  }
}
.howto-balance {
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: var(--Text_gray);

  span {
    margin-left: 10px;
  }
}
.howto-point-wrap {
  border: 1px solid var((--black));
  background-color: var(--darkblue);
  padding: calc(15 * var(--torem)) calc(20 * var(--torem));
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
.howto-point {
  font-style: normal;
  font-weight: 500;
  line-height: 125%; /* 125% */

  span {
    @media screen and (max-width: 767px) {
      font-size: calc(12 * var(--torem));
    }
  }
}
.howto-point-num {
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);

  @media screen and (max-width: 767px) {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  span {
    font-size: calc(20 * var(--torem));
    color: var(--white);
  }
}
.howto-point-small {
  font-size: calc(14 * var(--torem));
  font-style: normal;
  font-weight: 400;
  line-height: 142.857%; /* 142.857% */
  text-align: right;

  @media screen and (max-width: 767px) {
    font-size: calc(12 * var(--torem));
  }
}
.howto-icon02 {
  padding: 8px 15px;
  background-color: #272727;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 14px;
  border-radius: 4px;

  @media screen and (max-width: 767px) {
    margin-block: 15px;
  }

  img {
    width: calc(40 * var(--torem));
    aspect-ratio: 1;
    object-fit: contain;
    transform: rotate(90deg);
  }
}
.howto-bakara-point-wrap {
  border-radius: 4px;
  border: 1px solid transparent;
  padding: calc(15 * var(--torem)) calc(20 * var(--torem));
  background: #020202;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: calc(15 * var(--torem)) calc(10 * var(--torem));
  }
}
.howto-bakara-point-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #ffd600 48%, #825e00 100%) border-box
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
}
.howto-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(23 * var(--torem));

  @media screen and (max-width: 767px) {
    margin-top: calc(13 * var(--torem));
    justify-content: center;
  }
}
.howto-cta-btn {
  display: flex;
  justify-content: center;
  margin-top: calc(67 * var(--torem));
  pointer-events: none;

  @media screen and (max-width: 767px) {
    margin-top: calc(42 * var(--torem));
  }
}
/* =========================
  ✅footer
========================= */
.footer {
  overflow: clip;
}
.footer-inner {
}
.footer-title {
  font-size: calc(20 * var(--torem));
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  letter-spacing: 0.2px;
  text-align: center;

  @media screen and (max-width: 767px) {
    display: none;
  }
}
.footer-provider {
  margin-top: calc(29 * var(--torem));
  display: block grid;
  grid-template-columns: repeat(6, auto);
  gap: calc(33 * var(--torem));
  max-width: 1100px;
  margin-inline: auto;
  align-items: center;

  @media screen and (max-width: 767px) {
    display: none;
  }
}
.footer-provider-item {
}
.footer-bottom-wrap {
  display: block grid;
  grid-template-columns: 1fr calc(55 * var(--torem)) calc(69 * var(--torem));
  gap: 25px;
  margin-top: calc(71 * var(--torem));

  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
    margin-top: 0;
    justify-items: center;

    .grid1 {
      grid-area: 1 / 1 / 2 / 3;
    }
    .grid2 {
      grid-area: 2 / 1 / 3 / 2;
      width: calc(55 * var(--torem));
      justify-self: end;
    }
    .grid3 {
      grid-area: 2 / 2 / 3 / 3;
      width: calc(69 * var(--torem));
      justify-self: start;
    }
  }
}
.footer-bottom-text {
  font-size: calc(10 * var(--torem));
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.footer-bottom-img {
  width: 100%;

  @media screen and (max-width: 767px) {
    width: 55%;
  }
  img {
    aspect-ratio: 1;
    object-fit: contain;
  }
}
.footer-bottom-img.__ap {
  margin-top: calc(-10 * var(--torem));
}
.footer-partner a{
  font-size: calc(14 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  margin-top: calc(22 * var(--torem));
  color: var(--white);
  display: block;

  @media screen and (max-width: 767px) {
    display: none;
  }
}
.footer-nav {
  margin-top: calc(32 * var(--torem));
}
.footer-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: start;
  }
}
.footer-nav-item a {
  font-size: calc(14 * var(--torem));
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: var(--white);
  display: inline-block;
  width: 100%;
}
.footer-company {
  padding: 28px calc(20 * var(--torem)) 38px;
  background-color: var(--white);
  margin: 0 calc(50% - 50vw);
  margin-top: calc(54 * var(--torem));
  width: 100vw;

  @media screen and (max-width: 767px) {
    padding: 10px 0 20px;
    margin-top: calc(28 * var(--torem));
  }
}
.footer-company-text {
  font-size: calc(20 * var(--torem));
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  letter-spacing: 0.2px;
  text-align: center;
  color: #1e2129;

  @media screen and (max-width: 767px) {
    font-size: calc(10 * var(--torem));
  }
}
.footer-company-list {
  margin-top: calc(23 * var(--torem));
  max-width: calc(860 * var(--torem));
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(24 * var(--torem));
  margin-inline: auto;

  @media screen and (max-width: 767px) {
    margin-top: calc(10 * var(--torem));
    gap: calc(8 * var(--torem));
  }
}
.footer-company-item01 {
  width: calc(215 * var(--torem));
  aspect-ratio: 215/69;

  @media screen and (max-width: 767px) {
    width: calc(91 * var(--torem));
    aspect-ratio: 91/29;
  }
}
.footer-company-item02 {
  width: calc(69 * var(--torem));
  aspect-ratio: 1;

  @media screen and (max-width: 767px) {
    width: calc(29 * var(--torem));
  }
}
.footer-company-item03 {
  width: calc(69 * var(--torem));
  aspect-ratio: 1;

  @media screen and (max-width: 767px) {
    width: calc(29 * var(--torem));
  }
}
.footer-company-item04 {
  width: calc(69 * var(--torem));
  aspect-ratio: 1;

  @media screen and (max-width: 767px) {
    width: calc(29 * var(--torem));
  }
}
.footer-company-item05 {
  width: calc(69 * var(--torem));
  aspect-ratio: 1;
  @media screen and (max-width: 767px) {
    width: calc(29 * var(--torem));
  }
}
.footer-company-item06 {
  width: calc(247 * var(--torem));
  aspect-ratio: 247/69;

  @media screen and (max-width: 767px) {
    width: calc(105 * var(--torem));
    aspect-ratio: 105/29;
  }
}
.footer-copy {
  padding: calc(20 * var(--torem));

  small {
    font-size: calc(11 * var(--torem));
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    display: block;
  }
}