/* Rakuten Font */
@font-face {
  font-family: "Rakuten Sans";
  src: url("../fonts/RakutenSans_W_Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rakuten Sans";
  src: url("../fonts/RakutenSans_W_Lt.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Rakuten Sans";
  src: url("../fonts/RakutenSans_W_Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Rakuten Sans";
  src: url("../fonts/RakutenSans_W_Blk.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

:root {
  /* variable-font */
  --font-variable-minViewportPx-default: 360;
  --font-variable-maxViewportPx-default: 1000;
  --font-variable-remBase: 16;

  /* color */
  --primary: #ff008c;
  --black: #1a1a1a;
  --white: #fff;

  /* font */
  --ff-base: "Rakuten Sans", sans-serif;
  --fz-base: 1rem;
  --lh-base: normal;
  --fw-base: 400;
  --fw-light: 300;
  --fw-bold: 700;
  --fw-ex-bold: 900;
}

/* Safariだけfont-weight変更 */
::-webkit-full-page-media,
:future,
:root {
  --fw-ex-bold: 700;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--ff-base);
  font-size: var(--fz-base);
  font-weight: var(--fw-base);
  line-height: var(--lh-base);
  color: var(--black);
  overflow-x: hidden;
}

img {
  width: 100%;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

small {
  font-size: 100%;
}

/* Utility classes */
.pc-none {
  @media (width >= 768px) {
    display: none;
  }
}

.lg-none {
  @media (width >= 1000px) {
    display: none;
  }
}

.sp-none {
  display: none;

  @media (width >= 768px) {
    display: block;
  }
}

/* layout */
.inner {
  --padding-inline: 16px;
  --max-contents-width: 1200px;

  width: min(calc(100% - var(--padding-inline) * 2), var(--max-contents-width));
  margin-inline: auto;
}

/* components */
.c-btn {
  position: relative;
  display: inline-block;
  inline-size: 100%;
  color: var(--white);
  text-align: center;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 25.2px; /* 126% */
  border: 2px solid var(--primary);
  border-radius: 30px;
  padding-block-start: 19.4px;
  padding-block-end: 13.6px;
  background: var(--primary);
  touch-action: manipulation;
  user-select: none;
  transition: all 0.3s ease;

  @media (width >= 768px) {
    font-size: 1.625rem;
    line-height: 25.2px; /* 96.923% */
    padding-block-end: 21px;
    border-radius: 40px;
  }
}

@media (any-hover: hover) {
  .c-btn:hover {
    background: var(--white);
    color: var(--primary);
  }

  .c-btn:hover::before {
    top: -45%;
  }
}

/* 家族全員でおトクに! */
.c-btn::before {
  position: absolute;
  content: "";
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 187px;
  height: 37px;
  background: url(../img/c-btn__pop.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .c-btn::before {
    top: -47%;
    width: 237px;
    height: 46px;
  }
  .c-btn:hover::before {
    top: -52%;
  }
}

/* 紹介キャンペーンの詳細はこちらボタン */
.invite-btn {
  display: inline-block;
  inline-size: 100%;
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  border-radius: 30px;
  border: 1px solid #000;
  background: var(--white);
  padding-block: 12px;
  touch-action: manipulation;
  user-select: none;
  transition: all 0.3s ease;
}

@media (any-hover: hover) {
  .invite-btn:hover {
    background: var(--black);
    color: var(--white);
  }
}

/* header */
.header {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--white);
  padding-block: 8px;
  padding-inline: 12px;

  @media (width >= 768px) {
    padding-block: 14px;
    padding-inline: 24px;
  }
}

.header__logo {
  width: 72.876px;

  @media (width >= 768px) {
    width: 186px;
  }
}

/* footer */
.footer {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 110%; /* 13.2px */
  letter-spacing: -0.36px;
  padding-block: 6.9px;
  background: #f7f7f7;

  @media (width >= 768px) {
    padding-block: 13px;
    background: #e8e8e8;
    font-size: 0.875rem;
    line-height: 110%; /* 15.4px */
  }
}

/* fv */
.fv {
  position: relative;
  background: #f7f7f7;
  padding-block: 11px 17px;
  container-type: inline-size;
  overflow: hidden;

  @media (width >= 768px) {
    padding-block: 0 20px;
  }
}

/* 白円背景 */
.fv::before {
  --size: 795px;

  position: absolute;
  content: "";
  top: 345px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--size);
  height: var(--size);
  background: var(--white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--size);
}

@media screen and (max-width: 370px) {
  .fv::before {
    top: 30%;
  }
}

@media screen and (min-width: 768px) {
  .fv::before {
    --size: 2573px;

    top: clamp(12.188rem, 2.804rem + 19.55vw, 18.688rem);
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
  }
}

.fv__price {
  position: relative;
  padding-block-end: 6px;
  width: min(calc(100% - 16px * 2), 363px);
  height: 100%;
  margin-inline: auto;

  @media (width >= 768px) {
    width: min(92.4cqw, 1331px);
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.fv__contents {
  --container-size: 890;

  position: relative;
  margin-block-start: 15px;
  container-type: inline-size;

  @media (width >= 768px) {
    margin-block-start: 10px;
    width: min(calc(100% - 10px * 2), 890px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5%;
  }
}

/* pattern-2 */
.fv__contents--v2 {
  @media (width >= 768px) {
    gap: 4%;
  }
}

@media screen and (min-width: 768px) {
  /* pc時帯背景 */
  .fv__contents::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: calc(100% + 5px);
    border-radius: 5px;
    border: 3px solid var(--primary);
    background: #f7f7f7;
  }
}

@media screen and (min-width: 1200px) {
  .fv__contents::before {
    width: calc((1013 * 100cqw) / var(--container-size));
    height: min(82cqh, 177px);
    left: 50%;
  }
}

.fv__family-img {
  position: relative;
  width: min(calc(100% - 48px * 2), 295px);
  height: 100%;
  margin-inline: auto;
  aspect-ratio: 294 / 164;

  @media (width >= 768px) {
    width: calc((335 * 100cqw) / var(--container-size));
    aspect-ratio: 335 / 192;
    margin-inline: 0;
  }

  @media (width >= 1200px) {
    margin-block-start: -2.33%;
    left: -2%;
  }

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

.fv__title-box {
  @media (width >= 768px) {
    /* margin-block-start: 14px; */
    display: none;
    visibility: hidden;
  }
}

.fv__title {
  margin-block-start: 8px;
  position: relative;
  text-align: center;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 100%; /* 19px */
  letter-spacing: 0.57px;

  @media (width >= 768px) {
    /* margin-block-start: 0;
    font-size: min(1.57cqw, 1.125rem);
    letter-spacing: 0.54px; */
    display: none;
  }

  span {
    display: inline-block;
  }
}

.fv__num--1 {
  color: var(--primary);
  font-size: 2.375rem;
  font-weight: var(--fw-bold);
  line-height: 100%;
  line-height: 100%;
  letter-spacing: -1.14px;

  @media (width >= 768px) {
    /* font-size: min(4.2cqw, 3rem); */
    display: none;
  }

  small {
    font-size: 1.625rem;
  }
}

/* 円分 */
.fv__title-emphasize {
  color: var(--primary);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.57px;

  @media (width >= 768px) {
    /* font-size: min(2.1cqw, 1.5rem); */
    display: none;
  }
}

/* pc以上 */
.fv__box-container {
  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.fv__box {
  margin-block-start: 11px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: min(calc(100% - 16px * 2), 360px);
  margin-inline: auto;

  @media (width <= 375px) {
    width: min(calc(100% - 7px * 2), 360px);
  }

  @media (width >= 768px) {
    margin-block-start: 0;
    width: calc((533 * 100cqw) / var(--container-size));
    grid-template-columns: calc((274 * 100cqw) / var(--container-size)) 1fr;
    gap: 2.6%;
    margin-inline: 0;
  }
}

/* pattern-2 */
.fv__box--v2 {
  @media (width >= 768px) {
    width: calc((434 * 100cqw) / var(--container-size));
    grid-template-columns: calc((204 * 100cqw) / var(--container-size)) 1fr;
  }
}

/* pattern-2 */
.sub-gird-3 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}

.fv__item-heading {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 120.99%; /* 14.519px */
  letter-spacing: 0.36px;
  text-align: center;
  width: 100%;
  border-radius: 1px;
  background: var(--black);
  padding-block: 5px;

  @media (width >= 768px) {
    font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
  }
}

/* pink */
.fv__item-heading--pink {
  background: var(--primary);
}

.fv__item-lead {
  margin-block-start: 4px;
  color: var(--black);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 131%; /* 15.72px */
  text-align: center;
  letter-spacing: 0.24px;
  text-wrap: nowrap;
  display: grid;
  place-content: center;

  @media (width >= 768px) {
    font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
    line-height: 120.99%; /* 14.519px */
    letter-spacing: 0.24px;
  }
}

.fv__item-point {
  margin-block-start: -7px;
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  color: var(--primary);
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  line-height: 85%;
  letter-spacing: -2px;

  @media (width >= 768px) {
    font-size: min(calc((40 * 100cqw) / var(--container-size)), 2.5rem);
  }

  span {
    display: inline-block;
  }

  small {
    font-size: 1.125rem;

    @media (width >= 768px) {
      font-size: min(calc((20 * 100cqw) / var(--container-size)), 1.25rem);
    }
  }

  sup {
    top: -1px;
    color: #676767;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 120.99%; /* 12.099px */

    @media (width >= 768px) {
      font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
    }
  }
}

.fv__item-point-bonus {
  margin-bottom: 8px;
  img {
    width: 100%;
    height: 100%;
  }
}
.fv__item-point-text {
  text-align: left;
  color: var(--black);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 120%; /* 14.4px */

  @media (width >= 768px) {
    font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
  }
}

.fv__item-note {
  margin-block-start: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  @media (width >= 768px) {
    margin-block-start: -5.3%;
    flex-direction: row;
  }

  p {
    display: inline-block;
    inline-size: fit-content;
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    line-height: 120.99%; /* 19.358px */
    letter-spacing: 0.32px;
    background: linear-gradient(transparent 60%, #ffe569 0%);

    @media (width >= 768px) {
      display: inline;
      font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
      text-wrap: nowrap;
    }

    /* 1,7 */
    span {
      font-size: 1rem;
      letter-spacing: 0.24px;

      @media (width >= 768px) {
        font-size: min(calc((20 * 100cqw) / var(--container-size)), 1.25rem);
      }
    }

    /* ポイント増量中 */
    b {
      font-weight: inherit;
      line-height: 1.2;

      @media (width >= 768px) {
        font-size: min(calc((14 * 100cqw) / var(--container-size)), 0.875rem);
      }
    }
  }
}

.fv__btn-wrap {
  margin-block-start: 14px;
  position: relative;
  text-align: center;
}

/* pc時のみ */
.fv__btn-wrap-pc {
  display: none;

  @media (width >= 768px) {
    position: relative;
    display: inline-block;
    width: min(calc((253 * 100cqw) / var(--container-size)), 253px);
    text-align: center;
    margin-inline: auto;
  }
}

/* 紹介キャンペーンを見る */
.fv__btn {
  display: inline grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
  inline-size: fit-content;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  background: var(--black);
  border-radius: 30px;
  padding-block: 7px;
  padding-inline: 16px;
  touch-action: manipulation;
  user-select: none;

  @media (width >= 768px) {
    font-size: min(calc((14 * 100cqw) / var(--container-size)), 0.875rem);
    padding-block: min(3.8cqw, 8px);
    padding-inline: min(4.3cqw, 39px);
  }

  img {
    transition: all 0.3s ease;

    @media (width >= 768px) {
      width: 10px;
      height: 12px;
    }
  }
}

@media (any-hover: hover) {
  .fv__btn:hover img {
    transform: translateY(3px);
  }
}

.fv__cta-bta-wrap {
  position: relative;
  margin-block-start: 31px;
  width: min(calc(100% - 24px * 2), 343px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 43px;
    width: min(calc(100% - 24px * 2), 601px);
  }
}

.fv__note {
  position: relative;
  margin-block-start: 13px;
  width: min(calc(100% - 10px * 2), 1280px);
  margin-inline: auto;
  color: #676767;
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 140%; /* 16.8px */

  @media (width >= 768px) {
    margin-block-start: 28px;
  }

  a {
    text-decoration-line: underline;
    transition: opacity 0.3s ease;
  }
}

@media (any-hover: hover) {
  .fv__note a:hover {
    opacity: 0.6;
  }
}

.fv__note--middle {
  position: relative;
  margin-block-start: 7px;
  color: #676767;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 120.99%; /* 14.519px */

  @media (width >= 768px) {
    margin-block-start: 20px;
  }
}

/* 2つのおトクセクション */
.point {
  background: #ff008c;
}

.point__inner {
  --padding-inline: 9px;
  --max-contents-width: 1200px;

  width: min(calc(100% - var(--padding-inline) * 2), var(--max-contents-width));
  margin-inline: auto;
  padding-block: 32px 50px;

  @media (width >= 768px) {
    padding-block: 30px 56px;
  }
}

.point-2 .point__inner {
  padding-block: 32px 34px;

  @media (width >= 768px) {
    padding-block: 103px 85px;
  }
}

.point__title {
  width: 100%;
  width: min(calc(100% - 11px * 2), 548px);
  height: auto;
  margin-inline: auto;

  img {
    width: 100%;
    height: 100%;
  }
}

.point__contents {
  margin-block-start: 57px;
  position: relative;
  padding-block: 35px 20px;
  border-radius: 8px;
  background: var(--white);
  text-align: center;

  @media (width >= 768px) {
    margin-block-start: 68px;
    padding-block: 97px 26px;
  }
}

.point__contents--2 {
  margin-block-start: calc(58px - 43px);
  padding-block: 42px 11px;

  @media (width >= 768px) {
    padding-block: 103px 34px;
  }
}

@media screen and (min-width: 768px) {
  /* おトク1背景 */
  .point__contents::before {
    position: absolute;
    content: "";
    inset: 0;
    width: 100%;
    height: min(100%, 730px);
    aspect-ratio: 1200 / 730;
    background: url(../img/point_bg.webp);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* おトク2背景 */
  .point__contents--2::before {
    /* position: absolute;
    content: "";
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: min(100%, 730px);
    aspect-ratio: 1200 / 730;
    background: url(../img/point_bg-2.webp);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat; */
    content: none;
  }
}

/* おトク */
.point__head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  inline-size: min(100%, 198px);
  color: var(--primary);
  font-size: 1.625rem;
  font-weight: var(--fw-ex-bold);
  line-height: 110.3%; /* 28.678px */
  text-align: center;
  padding-block: 5px;
  border-radius: 50px;
  border: 3px solid var(--primary);
  background: var(--white);

  @media (width >= 768px) {
    inline-size: min(100%, 338.6px);
    padding-block: 8px;
    border: 5.129px solid var(--primary);
    font-size: 2.778125rem;
  }

  span {
    font-size: 2.375rem;

    @media (width >= 768px) {
      font-size: 4.0625rem;
    }
  }
}

.point__pop {
  --padding-inline: 10px;

  position: relative;
  width: min(calc(100% - var(--padding-inline) * 2), 602px);
  margin-inline: auto;
  padding-block-start: 15px;
  padding-block-end: 10px;
  border-radius: 4px;
  border: 1px solid var(--black);

  @media (width >= 768px) {
    --padding-inline: 17px;

    border-radius: 6.839px;
    padding-block-start: 21px;
    padding-block-end: 21px;
  }
}

/* 下三角 */
.point__pop::before {
  --size: 12px;

  position: absolute;
  content: "";
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-top: var(--size) solid var(--white);
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  z-index: 1;
}

.point__pop::after {
  --size: 12px;

  position: absolute;
  content: "";
  bottom: -12.5px;
  left: 50%;
  transform: translateX(-50%);
  border-top: var(--size) solid var(--black);
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
}

@media screen and (min-width: 768px) {
  .point__pop::before {
    --size: 24px;

    bottom: -20px;
  }

  .point__pop::after {
    --size: 21px;

    bottom: -21.5px;
  }
}

.point__pop-lead {
  color: var(--black);
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 18.2px */

  @media (width >= 768px) {
    font-size: 1.5rem;
  }
}

.point__pop-lead-marker {
  background: linear-gradient(transparent 60%, #ffe569 40%);
  padding-inline: 2px 0;
}

/* ギガ使い放題プラン */
.point__pop-lead--lg {
  font-size: 1.25rem;

  @media (width >= 768px) {
    font-size: 2.18rem;
  }
}

.point__pop-text {
  color: var(--black);
  text-align: center;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 20.8px */

  @media (width >= 768px) {
    font-size: 1.625rem;
  }
}

.point__pop-num {
  color: var(--primary);
  font-size: 2.125rem;
  font-weight: var(--fw-bold);
  line-height: 130%;
  letter-spacing: 1.7px;

  @media (width >= 768px) {
    font-size: 3.625rem;
  }
}

.point__pop-emphasize {
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 130%;

  @media (width >= 768px) {
    font-size: 2.625rem;
  }
}

.point__pop-note {
  color: #676767;
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 140%; /* 16.8px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    font-size: 0.875rem;
  }
}

.point__heading-img {
  position: relative;
  margin-block-start: 10px;
  width: min(100%, 202px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 50px;
    width: min(100%, 418px);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.point__item {
  position: relative;
  padding-block: 12px 10px;
  width: 100%;
  margin-inline: auto;

  @media (width >= 768px) {
    padding-block: 28px;
    width: min(calc(100% - 30px * 2), 1090px);
  }
}

.point__lead {
  color: #1a1a1a;
  font-size: 1.25rem;
  letter-spacing: 0.6px;

  @media (width >= 768px) {
    font-size: 1.625rem;
    letter-spacing: 0.78px;
  }
}

.point__text {
  margin-block-start: 9px;
  color: var(--primary);
  font-size: 2rem;
  font-weight: var(--fw-ex-bold);
  line-height: 100%; /* 32px */
  letter-spacing: 0.96px;

  @media (width >= 768px) {
    font-size: 2.625rem;
  }
}

.pc-black {
  @media (width >= 768px) {
    color: var(--black);
  }
}

/* 110 */
.point__text-num {
  color: #ff008c;
  font-size: 3rem;
  font-weight: var(--fw-ex-bold);
  line-height: 100%;
  letter-spacing: 1.44px;

  @media (width >= 768px) {
    font-size: 5.25rem;
  }
}

.point__text-md {
  @media (width >= 768px) {
    font-size: 3.375rem;
  }
}

.point__text-underline {
  @media (width >= 768px) {
    padding-inline-start: 3px;
    background: linear-gradient(transparent 70%, #ffe569 30%);
  }
}

/* 離れて住む家族も対象！ */
.point__pop--sm {
  margin-block-start: 15px;
  position: relative;
  color: #fff;
  text-align: center;
  font-weight: var(--fw-bold);
  letter-spacing: 0.48px;
  width: min(100%, 220px);
  margin-inline: auto;
  padding-block: 9px;
  background: var(--primary);
  border-radius: 4px;

  @media (width >= 768px) {
    margin-block-start: 25px;
    font-size: 1.71rem;
    letter-spacing: 0.821px;
    width: min(100%, 376.119px);
    padding-block: 14px;
  }
}

/* 上三角矢印 */
.point__pop--sm::before {
  --size: 21px;

  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: var(--size);
  height: var(--size);
  background: var(--primary);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@media screen and (min-width: 768px) {
  .point__pop--sm::before {
    --size: 35px;
  }
}

.point__plan {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 130%;
  letter-spacing: 0.96px;

  @media (width >= 768px) {
    margin-block-start: 29px;
    font-size: 3.5rem;
    font-weight: var(--fw-ex-bold);
    letter-spacing: 1.68px;
  }

  span {
    display: block;
    font-size: 1.125rem;
    letter-spacing: 0.54px;

    @media (width >= 768px) {
      font-size: 1.625rem;
      font-weight: var(--fw-bold);
      line-height: 130%; /* 33.8px */
      letter-spacing: 0.78px;
    }
  }
}

.point__plan-img {
  width: min(calc(100% - 14px * 2), 785px);
  height: 100%;
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 22px;
  }

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

.point__plan-text {
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 160%; /* 22.4px */
  letter-spacing: 0.42px;

  @media (width >= 768px) {
    margin-block-start: 8px;
    font-size: 1.64375rem;
    letter-spacing: 0.788px;
  }
}

.point__plan-underline {
  padding-inline-start: 3px;
  background: linear-gradient(transparent 70%, #ffe569 30%);
}

/* 1番安い */
.point__plan-text-price {
  position: relative;
  font-size: 1.25rem;
  letter-spacing: 1.2px;

  @media (width >= 768px) {
    font-size: 2.76rem;
    letter-spacing: 1.328px;
  }
}

/* ※2 */
.point__plan-text-price::before {
  position: absolute;
  content: "※2";
  top: -3px;
  right: -10px;
  width: 11px;
  height: 11px;
  font-size: 0.5rem;
  font-weight: var(--fw-bold);
}

@media screen and (min-width: 768px) {
  .point__plan-text-price::before {
    top: -8px;
    right: -10px;
    width: 11px;
    height: 11px;
    font-size: 0.6875rem;
  }
}

/* 毎月の負担がぐんっと軽くなる! */
.point__plan-text--md {
  font-size: 0.93rem;

  @media (width >= 768px) {
    font-size: 1.76rem;
  }
}

.point__plan-note {
  margin-block-start: 10px;
  width: calc(100% - 8px * 2);
  text-align: left;
  margin-inline: auto;
  color: #676767;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 160%; /* 19.2px */

  @media (width >= 768px) {
    margin-block-start: 40px;
    width: calc(100% - 21px * 2);
    font-size: 0.875rem;
  }
}

.point__plan-indent {
  display: inline-block;
  padding-inline-start: 2em;

  @media (width >= 768px) {
    padding-inline-start: 0;
  }
}

.point-2__title-pop {
  position: relative;
  margin-block-start: 9px;
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;

  @media (width >= 768px) {
    font-size: 2.625rem;
    letter-spacing: 1.26px;
  }

  sup {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.6px;

    @media (width >= 768px) {
      font-size: 1.3rem;
    }
  }
}

/* おトク2セクション */
.point-2__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-inline: auto;
}

.point-2__title-bg-wrap {
  position: relative;
}

@media screen and (min-width: 768px) {
  /* おトク2背景 */
  .point-2__title-bg-wrap::before {
    position: absolute;
    content: "";
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: min(100%, 215px);
    background: url(../img/point_bg-2.webp);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* 合計 */
.point-2__label {
  padding-inline-start: 16px;
  display: inline-flex;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--primary);
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.6px;

  @media (width <= 370px) {
    font-size: 1rem;
  }

  @media (width >= 768px) {
    font-size: 2.625rem;
    line-height: 110%; /* 46.2px */
    letter-spacing: 1.26px;
  }
}

.point-2__title {
  position: relative;
  color: var(--black);
  text-align: center;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.72px;

  @media (width <= 370px) {
    font-size: 1.3rem;
  }

  @media (width >= 768px) {
    font-size: 1.8rem;
  }

  @media (width >= 900px) {
    font-size: 2.25rem;
    letter-spacing: 1.08px;
  }
}

.point-2__sub-title {
  position: relative;
  margin-block-start: 2px;
  color: var(--black);
  text-align: center;
  font-size: 2rem;
  font-weight: var(--fw-ex-bold);
  line-height: 130%; /* 44.8px */
  letter-spacing: 0.96px;

  @media (width <= 370px) {
    font-size: 1.7rem;
  }

  @media (width >= 768px) {
    margin-block-start: 0px;
    font-size: 2.6rem;
    line-height: 140%; /* 44.8px */
  }

  @media (width >= 900px) {
    font-size: 3.5rem;
  }

  span {
    color: var(--primary);

    @media (width >= 768px) {
      margin-inline-start: -11px;
    }
  }

  /* が pc only */
  small {
    @media (width >= 768px) {
      font-size: 1.7rem;
    }
    @media (width >= 900px) {
      font-size: 2.25rem;
    }
  }
}

.point-2__total {
  color: var(--primary);
  font-size: 4.625rem;
  font-weight: var(--fw-bold);
  letter-spacing: -1.92px;
  line-height: 1;

  @media (width <= 370px) {
    font-size: 3.375rem;
  }

  @media (width >= 768px) {
    font-size: 8.7125rem;
    letter-spacing: -6.972px;
  }

  span {
    font-size: 1.25rem;
    letter-spacing: 0.6px;

    @media (width <= 370px) {
      font-size: 1rem;
    }

    @media (width >= 768px) {
      font-size: 2.625rem;
      letter-spacing: 1.26px;
    }
  }

  small {
    font-size: 2rem;

    @media (width >= 768px) {
      font-size: 4.3125rem;
    }
  }
}

.point-2__note {
  position: relative;
  width: calc(100% - 8px * 2);
  margin-inline: auto;
  color: #676767;
  text-align: center;
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 140%; /* 16.8px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    font-size: 0.875rem;
    letter-spacing: 0.48px;
  }

  span {
    display: inline-block;
  }
}

.point-2__note.font-md {
  margin-block-start: 5px;
  @media (width >= 768px) {
    font-size: 1rem;
  }
}

.point-2__note.mt-sm {
  margin-block-start: 16px;

  @media (width >= 768px) {
    margin-block-start: 0;
  }
}

.point-2__box {
  margin-block-start: 14px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  width: min(calc(100% - 5px * 2), 360px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 0;
    gap: 10px;
    width: min(100%, 554px);
  }

  @media (width >= 1010px) {
    gap: 13.7px;
  }

  @media (width <= 375px) {
    gap: 4px;
    width: min(calc(100% - 3px * 2), 360px);
  }
}

.point2__item-heading {
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 120.99%; /* 14.519px */
  letter-spacing: 0.36px;
  text-align: center;
  width: 100%;
  border-radius: 1px;
  background: var(--black);
  padding-block: 5px;

  @media (width >= 900px) {
    font-size: 1.1375rem;
    padding-block: 7px;
  }
}

.point2__item-heading--pink {
  background: var(--primary);
}

.point2__item-lead {
  margin-block-start: 4px;
  color: var(--black);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 131%; /* 15.72px */
  letter-spacing: 0.24px;
  text-wrap: nowrap;
  display: grid;
  place-content: center;

  @media (width >= 900px) {
    margin-block-start: 10px;
    font-size: 1.1375rem;
  }
}

.point2__item-point {
  margin-block-start: -7px;
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  color: var(--primary);
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  line-height: 85%;
  letter-spacing: -2px;

  @media (width >= 900px) {
    font-size: 3.8rem;
    letter-spacing: -3.045px;
  }

  span {
    display: inline-block;
  }

  small {
    font-size: 1.125rem;

    @media (width >= 900px) {
      font-size: 1.76525rem;
    }
  }

  sup {
    color: #676767;
    font-size: 0.55rem;
    font-weight: 400;
    line-height: 120.99%; /* 14.519px */

    @media (width >= 768px) {
      font-size: 0.75rem;
    }
  }
}

.point2__item-point-bouns {
  margin-bottom: 8px;
  @media (width <= 768px) {
    margin: 0 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.point2__item-note {
  margin-block-start: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  @media (width >= 768px) {
    text-wrap: nowrap;
    flex-direction: row;
  }

  span {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    line-height: 120.99%; /* 19.358px */
    letter-spacing: 0.32px;
    background: linear-gradient(transparent 60%, #ffe569 40%);

    strong {
      font-size: 1rem;
      letter-spacing: 0.24px;
      font-weight: var(--fw-bold);

      @media (width >= 1000px) {
        font-size: 1.375rem;
      }
    }

    @media (width >= 1000px) {
      font-size: 0.875rem;
    }
  }

  .point2__item-note-emphasize {
    @media (width >= 1000px) {
      font-size: 1.125rem;
    }
  }
}

.point2__item-point-text {
  text-align: left;
  color: var(--black);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 120%; /* 14.4px */
  text-wrap: nowrap;

  @media (width >= 900px) {
    font-size: 1.1375rem;
  }
  @media (width <= 375px) {
    font-size: 0.7rem;
  }
}

.point-2__img {
  display: none;

  @media (width >= 768px) {
    display: block;
    margin-block-start: 21px;
    width: min(100%, 290px);
    margin-inline: 0;
    aspect-ratio: 392 / 225;
  }

  @media (width >= 1100px) {
    margin-block-start: 0;
    width: min(100%, 392px);
  }

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

/* pattern-2 */
.point-2__img--v2 {
  @media (width >= 768px) {
    margin-block-start: 0;
    order: 1;
    width: min(calc((392 * 100cqw) / var(--container-size)), 392px);
  }
  @media (width >= 1100px) {
    margin-block-start: 0;
    width: min(100%, 392px);
  }
}

.point-2__bottom-img {
  margin-block-start: 18px;
  width: min(100%, 295px);
  margin-inline: auto;
  aspect-ratio: 295 / 169;

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

  @media (width >= 768px) {
    display: none;
  }
}

.point-2__text {
  margin-block-start: 8.1px;
  width: calc(100% - 10px * 2);
  margin-inline: auto;
  text-align: center;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  line-height: 160%; /* 28.8px */
  letter-spacing: 0.54px;

  @media (width <= 380px) {
    font-size: 1rem;
  }

  @media (width >= 768px) {
    margin-block-start: 50px;
    padding-block-start: 49.5px;
    width: calc(100% - 55px * 2);
    margin-inline: auto;
    border-top: 1px solid #cfcfcf;
    font-size: 1.625rem;
    letter-spacing: 0.78px;
  }

  span {
    font-size: 1.5rem;
    letter-spacing: 0.72px;
    line-height: 160%; /* 41.6px */

    @media (width <= 380px) {
      font-size: 1.3rem;
    }

    @media (width >= 768px) {
      font-size: 2.25rem;
      letter-spacing: 1.08px;
    }
  }
}

.point-2__pop-wrap {
  @media (width >= 768px) {
    margin-block-start: 44px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  @media (width >= 800px) {
    gap: 21px;
  }
}

.point-2__pop {
  margin-block-start: 9.9px;
  width: min(100%, 287px);
  margin-inline: auto;
  text-align: center;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 26px */
  letter-spacing: 0.6px;
  padding-block: 6px;
  border: 1px solid;

  @media (width >= 768px) {
    margin-block-start: 0;
    font-size: 1.9rem;
    letter-spacing: 0.914px;
    padding-block: 27px;
    width: min(100%, 262px);
    margin-inline: 0;
    line-height: normal;
  }
}

.point-2__price-lg {
  margin-block-start: 10px;
  font-size: 1.90125rem;
  font-weight: var(--fw-bold);
  line-height: 160%;
  letter-spacing: 0.913px;

  @media (width >= 768px) {
    margin-block-start: 0;
    font-size: 2.9rem;
    letter-spacing: 1.39px;
  }
}

.point-2__price-lg-pink {
  color: var(--primary);
  text-align: center;
  font-size: 1.90125rem;
  font-weight: var(--fw-bold);
  line-height: 110%; /* 33.462px */

  @media (width >= 768px) {
    font-size: 2.6rem;
  }

  @media (width >= 800px) {
    font-size: 2.9rem;
  }

  span {
    font-size: 3.65625rem;
    letter-spacing: -1.755px;

    @media (width >= 768px) {
      font-size: 5.567rem;
    }
  }

  small {
    font-size: 2.5rem;

    @media (width >= 768px) {
      font-size: 3.75rem;
    }
  }
}

.point-2__invite {
  margin-block-start: 20px;
  width: calc(100% - 10px * 2);
  margin-inline: auto;
  padding-block: 13px;
  border-radius: 4.69px;
  background: #fff7d2;
  container-type: inline-size;

  @media (width >= 768px) {
    margin-block-start: 21px;
    padding-block: 20px 27px;
    width: min(calc(100% - 10px * 2), 920px);
    border-radius: 9.796px;
  }
}

.point-2__invite-inner {
  width: calc(100% - 7px * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 32.3cqw auto 1fr;
  align-items: center;
  gap: 1%;

  @media (width >= 768px) {
    width: calc(100% - 18.5px * 2);
  }
}

.point-2__invite-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 4.69px;
  background: var(--white);
  padding-block: 6px 2px;
  padding-inline: 8px;

  @media (width >= 768px) {
    border-radius: 9.796px;
    padding-block: 16px 6px;
  }
}

.point-2__invite-box-head {
  text-align: center;
  font-size: min(3.43cqw, 1.5625rem);
  font-weight: var(--fw-bold);
  line-height: 160%; /* 19.2px */

  @media (width <= 370px) {
    font-size: 3.38cqw;
  }
}

.point-2__invite-box-img {
  margin-block-start: 9px;
  width: min(14.6cqw, 6.625rem);
  margin-inline: auto;
  height: 100%;

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

.point-2__invite-box-img--family {
  margin-block-start: 3px;
  width: min(51.7cqw, 23.9375rem);
}

.point-2__invite-box-text {
  margin-block-start: 9px;
  color: #676767;
  text-align: center;
  font-size: min(2.86cqw, 1.125rem);
  line-height: 135%; /* 13.5px */

  span {
    font-size: min(1.9cqw, 0.7rem);
  }
}

.point-2__invite-box-points {
  font-size: min(3.7cqw, 1.68rem);
  font-weight: var(--fw-bold);
  line-height: 160%;

  /* ポイント */
  span {
    text-align: center;
    font-size: 13.133px;
    font-size: min(2.9cqw, 1.3rem);
  }
}

.point-2__invite-icon {
  font-size: 28px;

  @media (width >= 768px) {
    font-size: 36px;
  }
}

.point-2__note-bottom {
  margin-block-start: 12px;
  width: calc(100% - 13px * 2);
  margin-inline: auto;
  text-align: left;
  color: #676767;
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 130%; /* 15.6px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    margin-block-start: 19px;
    width: min(calc(100% - 10px * 2), 920px);
    font-size: 0.875rem;
    line-height: 140%; /* 19.6px */
    letter-spacing: 0.42px;
  }
}

.point-2__container {
  margin-block-start: 12px;
  background: #f6f6f6;
  padding-block: 5px 11px;
  margin-inline: auto;

  @media (width >= 768px) {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    align-items: end;
    width: min(calc(100% - 20px * 2), 1050px);
    border-radius: 10px;
    padding-block: 22px;
    padding-inline: 20px;
  }

  @media (width >= 1000px) {
    gap: 40px;
  }
}

/* pattern-2 */
.point-2__container--v2 {
  --container-size: 1050;

  container-type: inline-size;

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: auto auto;
    padding-inline: 40px;
  }

  @media (width >= 1100px) {
    grid-template-columns: 1fr 57.12%;
    gap: 37px;
  }
}

.point-2__text-content {
  @media (width >= 768px) {
    margin-block-start: 0;
  }
}

/* pattern-2 */
.point-2__text-content--v2 {
  @media (width >= 768px) {
    order: 2;
    width: min(100%, 554px);
  }
}

.point-2__btn {
  margin-block-start: 12px;
  width: min(calc(100% - 30px * 2), 281px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 25px;
  }
}

/* program */
.program {
  @media (width >= 768px) {
    padding-block-start: 111px;
    padding-block-end: 40px;
  }
}

.program__inner {
  --padding-inline: 15px;

  width: min(calc(100% - var(--padding-inline) * 2), 1440px);
  margin-inline: auto;
}
.program__container {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-inline: auto;

  @media (width >= 768px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5%;
    width: min(100%, 1266px);
  }
}

.program-item {
  padding-block: 15px;

  @media (width >= 768px) {
    padding-block: 0 30px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: 0;
  }
}

.program-item:first-of-type {
  margin-block-start: 15px;

  @media (width >= 768px) {
    margin-block-start: 0;
  }
}

.program-item__title {
  margin-block-start: 3px;
  width: min(100%, 219px);
  margin-inline: auto;

  @media (width >= 768px) {
    width: min(100%, 257px);
  }

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

/* シニアの調整 */
.program-item__title--senior {
  width: min(100%, 258px);

  @media (width >= 768px) {
    width: min(100%, 313px);
  }
}

/* 青春の調整 */
.program-item__title--youth{
  width: min(100%, 194px);

  @media (width >= 768px) {
    width: min(100%, 228px);
  }
}

.program-item__entry {
  margin-block-start: 5px;
  color: #676767;
  font-size: 0.75rem;
  line-height: 160%; /* 19.2px */
  text-align: center;

  @media (width >= 768px) {
    margin-block-start: 4px;
    font-size: 0.875rem;
  }
}

.program-item__sub-title {
  color: var(--black);
  font-weight: var(--fw-bold);
  line-height: 160%;
  text-align: center;

  @media (width >= 768px) {
    font-size: 1.125rem;
  }

  span {
    display: inline-block;
  }
}

.program-item__emphasize {
  display: inline-block;
  color: var(--primary);
  font-size: 1.5rem;
  padding-inline: 2px;

  @media (width >= 768px) {
    font-size: 1.65625rem;
  }
}

.program-item__img {
  margin-block-start: 16px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;

  @media (width >= 768px) {
    margin-block-start: 14px;
    aspect-ratio: 399 / 259;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
}
.program-box {
  --child: #effbed;
  --youth: #dbecfa;
  --senior: #f9f0ff;

  margin-block-start: 16px;
  width: 100%;
  border-radius: 10px;
  background: var(--child);
  container-type: inline-size;

  @media (width >= 768px) {
    display: grid;
  }
}

.program-box--youth {
  background: var(--youth);
}

.program-box--senior {
  background: var(--senior);
}

.program-box__inner {
  padding-block: 23px;
  width: min(calc(100% - 10px * 2), 270px);
  margin-inline: auto;

  @media (width >= 768px) {
    padding-block: 18px;
    width: min(calc(100% - 10px * 2), 283px);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;
  }
}

.program-box__heading {
  --child: #50af33;
  --youth: #1c56c7;
  --senior: #813ec8;

  border-radius: 4px;
  background: var(--child);
  color: var(--white);
  font-size: 0.875rem;
  text-align: center;
  font-weight: var(--fw-bold);
  letter-spacing: 0.42px;

  @media (width >= 768px) {
    border-radius: 4.409px;
    font-size: min(3.85cqw, 0.96rem);
    letter-spacing: 0.463px;
    width: min(95cqw, 295px);
    height: 11cqw;
  }

  span {
    font-size: 1.625rem;
    letter-spacing: 0.78px;

    @media (width >= 768px) {
      font-size: 1.7875rem;
      font-size: min(7.15cqw, 1.7875rem);
      letter-spacing: 0.86px;
    }
  }
}

.program-box__heading--youth {
  background: var(--youth);
}

.program-box__heading--senior {
  background: var(--senior);
}

.program-box__title-box {
  margin-block-start: 10px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 3px;

  @media (width >= 768px) {
    margin-block-start: 0;
  }
}

.program-box__title-box--senior {
  @media (width >= 768px) {
    margin-block-start: 16px;
  }
}

/* 毎月 */
.program-box__title-label {
  display: inline-flex;
  inline-size: fit-content;
  writing-mode: vertical-rl;
  text-orientation: upright;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
  font-weight: var(--fw-ex-bold);

  @media (width >= 768px) {
    font-size: min(4.4cqw, 1.1rem);
  }
}

.program-box__title {
  margin-block-start: 0.5em;
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: var(--fw-ex-bold);
  line-height: 100%;
  text-wrap: nowrap;
  white-space: nowrap;

  @media (width >= 768px) {
    margin-block-start: 0;
    font-size: min(6.61cqw, 1.653rem);
  }

  .program-box__title--lg {
    position: relative;
    font-size: 2.5rem;

    @media (width >= 768px) {
      font-size: min(13.5cqw, 3.375rem);
    }

    /* (税込) */
    sup {
      position: absolute;
      top: 0.5em;
      color: var(--primary);
      font-size: min(3cqw, 0.66875rem);
      line-height: 160%; /* 17.136px */

      @media (width >= 768px) {
        top: 1em;
      }
    }
  }

  /* 還元 */
  .program-box__title--black {
    color: var(--black);
  }

  sup {
    color: var(--black);
    font-size: 0.8rem;
    line-height: 160%;

    @media (width >= 768px) {
      top: -0.3em;
      font-size: 4cqw;
    }
  }
}

.program-box__title--yen {
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: var(--fw-ex-bold);
  line-height: 100%;
  text-wrap: nowrap;
  white-space: nowrap;

  @media (width >= 768px) {
    margin-block-start: 0;
    font-size: min(6.61cqw, 1.653rem);
  }

  .program-box__title--lg {
    position: relative;
    font-size: 2.5rem;

    @media (width >= 768px) {
      font-size: min(13.5cqw, 3.375rem); /* 54px */
    }

    /* (税込) */
    sup {
      position: absolute;
      top: 0;
      color: var(--primary);
      font-size: 1.125rem;
      font-weight: var(--fw-base);
      line-height: 160%; /* 17.136px */

      @media (width >= 768px) {
        top: 0em;
        font-size: min(6cqw, 1.6rem); /* 10.688px */
      }
    }
  }
}

.program-box__note {
  color: #676767;
  text-align: center;
  font-size: 0.75rem;
  line-height: 160%; /* 19.2px */

  @media (width >= 768px) {
    font-size: min(3.25cqw, 0.825rem);
  }
}

.program-box__icons {
  margin-block-start: 9.3px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 23px;

  @media (width >= 768px) {
    margin-block-start: 0;
    gap: 25px;
  }
}

.program-box__icons--youth,
.program-box__icons--senior {
  @media (width >= 768px) {
    /* margin-block-start: 27px; */
    gap: 20px;
  }
}

.program-box__icons--youth {
  @media (width >= 768px) {
    width: min(95cqw, 295px);
  }
}

.program-box__icons--senior {
  @media (width >= 768px) {
    margin-block-start: 12px;
  }
}

.program-box__icon {
  width: 77px;
  height: 77px;

  @media (width >= 768px) {
    width: min(28cqw, 84px);
    height: min(28cqw, 84px);
  }

  @media (width >= 900px) {
    width: 85px;
    height: 85px;
  }

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

.program-item__note {
  margin-block-start: 11px;
  color: #676767;
  font-size: 0.75rem;
  line-height: 160%; /* 19.2px */
  width: 92cqw;
  margin-inline: calc((100% - 92cqw) / 2);

  @media (width >= 768px) {
    /* margin-block-start: 17px; */
    font-size: 0.875rem;
  }
}

.program__details {
  margin-block-start: 12px;

  @media (width >= 768px) {
    margin-block-start: 19px;
  }
}

/* デフォルトの三角マークを非表示 */
.program__summary::-webkit-details-marker {
  display: none;
}

.program__summary {
  --child: #00b200;
  --youth: #1c56c7;
  --senior: #813ec8;

  position: relative;
  cursor: pointer;
  display: grid;
  place-content: center;
  padding-block: 7px;
  border-radius: 2px;
  background: var(--child);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);

  @media (width >= 768px) {
    font-size: 1rem;
    height: 42px;
  }
}

.program__summary--child {
  background: var(--child);
}
.program__summary--youth {
  background: var(--youth);
}
.program__summary--senior {
  background: var(--senior);
}

/* アイコンの基本スタイル */
.program__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--white);
  border-radius: 50%;
}

/* プラスアイコン（閉じている時）の作成 */
.program__icon::before,
.program__icon::after {
  content: "";
  position: absolute;
  background: var(--white);
  transition: transform 0.3s ease;
}

.program__icon::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 2px;
  transform: translateY(-50%);
}

.program__icon::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
}

/* 閉じている時のスタイル */
.program__summary::before {
  content: "詳細はこちら";
}

/* 開いている時のスタイル */
.program__details[open] .program__summary::before {
  content: "詳細を閉じる";
}

.program__details[open] .program__icon::after {
  transform: translateX(-50%) rotate(90deg);
}

.program__content {
  --container-size: 400;

  overflow: hidden;
  height: auto;
  transition: height 0.3s ease;
  container-type: inline-size;
}

.program__content-text {
  margin-block-start: 15px;
  color: #676767;
  font-size: 0.75rem;
  line-height: 160%;

  @media (width >= 768px) {
    font-size: 0.875rem;
  }
}

.program__content-text-bold {
  color: var(--primary);
  font-weight: 600;
  line-height: 160%; /* 19.2px */
}

.program__content-youth-text {
  margin-block-start: 3px;
  inline-size: min(100%, 245px);
  margin-inline: auto;
  padding-inline: 7px;
  color: var(--white);
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 160%; /* 22.4px */
  background: #1c56c7;
  text-wrap: nowrap;

  @media (width >= 768px) {
    font-size: min(3.5cqw, 0.875rem);
  }
}

.program__content-youth-text:first-child {
  margin-block-start: 16px;
}

/* アコーディオン内テーブル */
.program-table {
  margin-block-start: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: 24.3cqw 22cqw 23.2cqw 1fr;
  container-type: inline-size;
}

/* 各列の設定 */
.program-table-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 46px 1fr 1fr 1fr;
}

/* 2列目以降 */
.program-table-column--body {
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  border-radius: 2px;

  .program-table__cell-head {
    border-top: 1px solid #e3e3e3;
    border-radius: 1px 1px 0 0;
  }
}

.program-table-column--3 {
  border-radius: 2px 2px 0 0;

  .program-table__cell-head {
    border-radius: 2px 2px 0px 0px;
  }
}

.program-table-column--body + .program-table-column--body {
  margin-left: 1px;
}

.program-table-column--body + .program-table-column--3 {
  margin-left: 1px;
}

.program-table-column--3 + .program-table-column--body {
  margin-left: 1px;
}

/* 2行占有 */
.program-table-column--2row {
  grid-row: span 2;
}

/* 3行占有 */
.program-table-column--3row {
  grid-row: span 3;
}

/* 子供 */
.program-table--child {
  /* 3GBまで (2番目) */
  .program-table__cell--data:nth-child(2) {
    background: #26e226;
  }

  /* 3GB超過後20GBまで (3番目) */
  .program-table__cell--data:nth-child(3) {
    background: #01cd01;
  }

  /* ギガ使い放題 (4番目) */
  .program-table__cell--data:nth-child(4) {
    background: #00b200;
  }

  /* 割引適用後の月々のプラン料金 */
  .program-table__actual-price {
    color: #00b200;
  }
}

/* 青年 */
.program-table--youth {
  /* 3GBまで (2番目) */
  .program-table__cell--data:nth-child(2) {
    background: #79a2f1;
  }

  /* 3GB超過後20GBまで (3番目) */
  .program-table__cell--data:nth-child(3) {
    background: #4176dc;
  }

  /* ギガ使い放題 (4番目) */
  .program-table__cell--data:nth-child(4) {
    background: #1c56c7;
  }

  /* 割引適用後の月々のプラン料金 */
  .program-table__actual-price {
    color: #1c56c7;
  }
}

/* シニア */
.program-table--senior {
  grid-template-columns: 24.3cqw 22cqw 16.5cqw 1fr;

  /* 3GBまで (2番目) */
  .program-table__cell--data:nth-child(2) {
    background: #a450ff;
  }

  /* 3GB超過後20GBまで (3番目) */
  .program-table__cell--data:nth-child(3) {
    background: #9340eb;
  }

  /* ギガ使い放題 (4番目) */
  .program-table__cell--data:nth-child(4) {
    background: #813ec8;
  }

  /* 割引適用後の月々のプラン料金 */
  .program-table__actual-price {
    color: #813ec8;
  }
}

/* 各セル共通 */
.program-table__cell {
  border-radius: 2px;
  background: var(--white);
  padding-block: 5px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 通常、プログラム適用・割引適用後の~ */
.program-table__cell-head {
  display: grid;
  place-content: center;
  padding-block: 8px;
  border-radius: 1px 1px 0 0;
  background: #e6e6e6;
  text-align: center;
  font-size: min(3cqw, 0.73rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.36px;
  text-wrap: nowrap;
  white-space: nowrap;
}

.program-table__cell-head:nth-child(4) {
  border-right: none;
}

/* データ利用量 */
.program-table__cell-head--data {
  background: var(--white);
  color: var(--black);
}

/* テーブル左側 */
.program-table__cell--data {
  margin-block-end: 2px;
  margin-inline-end: 1px;
  padding-block: 17px;
  background: #26e226;
  color: var(--white);
  border-radius: 2px;
  text-align: center;
  vertical-align: bottom;
  font-size: min(3.3cqw, 0.75rem);
  font-weight: var(--fw-bold);
  line-height: 17px; /* 141.667% */
  letter-spacing: 0.36px;

  span {
    font-size: min(4.7cqw, 1.06rem);
  }

  sub {
    font-size: min(4.1cqw, 0.9375rem);
  }
}

.program-table__cell--data:last-child {
  margin-bottom: 0;
}

/* 注釈 */
.program-table__cell--data--deco {
  position: relative;
}

.program-table__cell--data--deco::before {
  position: absolute;
  content: "※1";
  bottom: 40%;
  right: 0;
  font-size: min(2.3cqw, 0.7rem);
}

/* FireFox用スタイル */
@-moz-document url-prefix() {
  .program-table__cell--data--deco::before {
    bottom: -1px;
    right: -56%;
  }
}

/* 通常列 */
.program-table__cell-normal {
  display: grid;
  place-content: center;
  grid-template-columns: 1fr;
  border-bottom: 1px dotted #e3e3e3;
  border-radius: 0;
}

/* 最後の要素 */
.program-table__cell-normal:last-child {
  border-bottom: none;
  border-radius: 0 0 2px 2px;
}

/* プログラム適用 */
.program-table__cell-points {
  border-radius: 2px;
  border: 1px solid #e3e3e3;
}

.program-table__cell-points:nth-of-type(2) {
  border-radius: 0 0 2px 2px;
  border-top: none;
}

.program-table__cell-points + .program-table__cell-points {
  margin-block-start: 1px;
}

.program-table__price {
  font-size: min(5cqw, 1.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.2px;
  text-wrap: nowrap;
  white-space: nowrap;

  small {
    font-size: min(3.3cqw, 0.75rem);
  }
}

.program-table__tax {
  color: #676767;
  font-size: min(3cqw, 0.75rem);
  font-weight: 400;
  line-height: 120.99%; /* 14.519px */
  letter-spacing: 0.36px;
}

/* ポイント */
.program-table__points {
  margin-block-start: -3px;
  position: relative;
  color: var(--primary);
  text-align: center;
  font-size: min(7cqw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.84px;
  line-height: 70%;

  small {
    position: absolute;
    top: 50%;
    right: 1.95em;
    font-size: min(3cqw, 0.8125rem);
    color: var(--black);
  }

  /* (税込) */
  sup {
    /* position: absolute; */
    top: -0.7em;
    color: var(--black);
    font-size: min(3.2cqw, 0.875rem);
    font-weight: 400;
    line-height: 160%; /* 17.136px */
    text-wrap: nowrap;

    @media (width >= 768px) {
      /* top: -0.7em; */
    }
  }
}

/* 毎月・ポイント還元 */
.program-table__points-text {
  text-align: center;
  font-size: min(3.3cqw, 0.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.72px;
  line-height: 1.3;
}

.program-table__points-text--primary {
  color: var(--primary);
}

/* 右列共通セル */
.program-table__cell--actual {
  border-bottom: 1px dotted #e3e3e3;
  border-radius: 0;

  @media (width >= 768px) {
    padding-inline-end: 4px;
  }
}

/* 最後の要素 */
.program-table__cell--actual:last-child {
  border-bottom: none;
  border-radius: 0 0 2px 2px;
}

.program-table__actual-price {
  color: #00b200;
  font-size: min(3cqw, 0.75rem);
  font-weight: var(--fw-bold);
  line-height: 12px; /* 100% */
  letter-spacing: -0.36px;

  @media (width >= 768px) {
    margin-block-start: 10px;
  }

  /* 金額 */
  strong {
    margin-inline-start: 0.05em;
    font-size: min(8cqw, 2rem);
    font-weight: inherit;
  }

  /* 円 */
  span {
    font-size: min(4cqw, 1rem);
  }

  /* , */
  small {
    font-size: min(4cqw, 1rem);
  }
}

/* 税込 */
.program-table__actual-tax {
  margin-block-start: 5px;
  color: #676767;
  font-size: min(3.3cqw, 0.75rem);
  line-height: 120.99%; /* 14.519px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    text-align: right;
  }

  /* 金額 */
  span {
    font-size: min(5cqw, 1.125rem);
  }
}

.program-table__actual-pc-text {
  display: none;

  @media (width >= 768px) {
    display: block;
    color: #676767;
    font-size: min(3.3cqw, 0.75rem);
    line-height: 120%; /* 14.519px */
  }
}

/* pc時モーダル */
body[data-modal-open="true"] {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

body[data-modal-open="true"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.modal-dialog {
  display: none;
  border: none;
  padding: 0;
  background: none;

  @media (width >= 768px) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    border-radius: 20px;
    background: var(--white);
    width: min(calc(100% - 50px * 2), 797px);
    padding-block: 26px 34px;
    margin: 0;
  }

  &::backdrop {
    background: none;
  }
}

/* モーダルが開いているときのスタイル */
.modal-dialog[open] {
  display: block;
}

/* 詳細を閉じるボタン */
.modal-close {
  --child: #00b200;
  --youth: #1c56c7;
  --senior: #813ec8;

  position: absolute;
  display: flex;
  align-items: center;
  top: 2%;
  right: 2%;
  color: var(--child);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: all 0.3s ease;
}

@media (any-hover: hover) {
  .modal-close:hover {
    opacity: 0.6;
  }
}

.modal-close--child {
  color: var(--child);
}
.modal-close--youth {
  color: var(--youth);
}
.modal-close--senior {
  color: var(--senior);
}

.modal-close-icon {
  --size: 32px;

  display: inline-block;
  width: var(--size);
  height: var(--size);
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  margin-inline-start: 8px;
}

.modal-close-icon::before,
.modal-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: currentColor;
}

.modal-close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.open-modal-btn {
  --child: #00b200;
  --youth: #1c56c7;
  --senior: #813ec8;
  --icon-size: 24px;

  display: none;

  @media (width >= 768px) {
    margin-block-start: 19px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 7px;
    border-radius: 2px;
    background: var(--child);
    color: var(--white);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
}

@media (any-hover: hover) {
  .open-modal-btn:hover {
    opacity: 0.8;
  }
}

.plus-icon {
  position: absolute;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  border: 2px solid currentColor;
  border-radius: 50%;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.plus-icon::before {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon::after {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.open-modal-btn--child {
  background: var(--child);
}
.open-modal-btn--youth {
  background: var(--youth);
}
.open-modal-btn--senior {
  background: var(--senior);
}

.modal-content {
  margin-block-start: 34px;
}

.modal__content-img {
  width: min(calc(100% - 30px * 2), 520px);
  margin-inline: auto;
  aspect-ratio: 520 / 394;

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

.modal__content-text {
  margin-block-start: 15px;
  width: min(calc(100% - 20px * 2), 640px);
  margin-inline: auto;

  p {
    color: #676767;
    font-size: 0.875rem;
    line-height: 160%;
  }

  p:first-of-type {
    color: var(--primary);
    font-weight: 600;
    line-height: 160%; /* 19.2px */
  }
}

.modal__content-youth-text {
  margin-block-start: 8px;
  inline-size: fit-content;
  margin-inline: auto;
  padding-inline: 7px;
  color: var(--white);
  text-align: center;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 160%; /* 22.4px */
  background: #1c56c7;
}

.modal__content-youth-text:first-child {
  margin-block-start: 16px;
}

.program__note {
  margin-block-start: 15px;
  color: #676767;
  font-size: 0.875rem;
  line-height: 160%; /* 19.2px */
  width: 100%;
  margin-inline: auto;

  @media (width >= 768px) {
    width: min(100%, 1266px);
  }
}

/* Safari用スタイル */
::-webkit-full-page-media,
:future,
:root .program__note {
  @media (width >= 768px) {
    margin-block-start: 90px;
  }
}

/* FireFox用スタイル */
@-moz-document url-prefix() {
  .program__note {
    @media (width >= 768px) {
      margin-block-start: 90px;
    }
  }
}

/* compare */
.compare {
  padding-block: 56px 33px;

  @media (width >= 768px) {
    padding-block: 54px 48px;
    background: linear-gradient(
        0deg,
        rgba(255, 0, 140, 0.05) 0%,
        rgba(255, 0, 140, 0.05) 100%
      ),
      #fff;
  }
}

.compare__title {
  text-align: center;
  font-size: 1.375rem;
  font-weight: var(--fw-ex-bold);
  line-height: 140%; /* 30.8px */
  letter-spacing: 0.66px;

  @media (width >= 768px) {
    font-size: 2rem;
    letter-spacing: 0.96px;
  }
}

.compare__contents {
  margin-block-start: 33px;
  width: 100%;
  margin-inline: auto;
  border-radius: 8px;
  background: var(--white);

  @media (width >= 768px) {
    --padding-inline: 30px;

    margin-block-start: 38px;
    width: min(calc(100% - var(--padding-inline) * 2), 1200px);
    padding-block: 45px 53px;
  }
}

.compare__inner {
  --padding-inline: 19px;

  width: min(calc(100% - var(--padding-inline) * 2), 1200px);
  margin-inline: auto;

  @media (width >= 768px) {
    --padding-inline: 88px;
  }
}

.compare__img {
  width: 100%;
  height: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  img {
    width: 100%;
    min-width: 768px;
    height: 100%;
    object-fit: cover;

    @media (width >= 768px) {
      min-width: 0;
    }
  }
}

.compare__note {
  --padding-inline: 30px;

  margin-block-start: 18px;

  @media (width >= 768px) {
    margin-block-start: 44px;
    width: min(calc(100% - var(--padding-inline) * 2), 947px);
    margin-inline: auto;
  }

  @media (width >= 1000px) {
    --padding-inline: 76px;
  }

  p {
    color: #676767;
    font-size: 0.75rem;
    font-weight: var(--fw-light);
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.36px;

    @media (width >= 768px) {
      font-size: 0.875rem;
    }
  }

  p:first-of-type {
    color: #ff008c;
    font-weight: 600;
  }
}

.compare__cta-bta-wrap {
  margin-block-start: 53px;
  width: min(calc(100% - 26px * 2), 601px);
  margin-inline: auto;
}

/* section-cta */
.section-cta {
  position: relative;
  padding-block: 30px 27px;
  overflow: hidden;

  @media (width >= 768px) {
    padding-block: 88.46px 89.7px;
  }
}

@media screen and (min-width: 768px) {
  /* pc時背景 */
  .section-cta::before {
    position: absolute;
    content: "";
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../img/section-cta_bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.section-cta__inner {
  --padding-inline: 11px;
  --max-contents-width: 850px;

  width: min(calc(100% - var(--padding-inline) * 2), var(--max-contents-width));
  margin-inline: auto;
}

.section-cta__lead {
  position: relative;
  text-align: center;
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 23.4px */
  text-wrap: nowrap;
  white-space: nowrap;

  @media (width <= 390px) {
    font-size: 0.8rem;
  }

  @media (width >= 768px) {
    font-size: 2rem;
  }
}

.section-cta__lead-marker {
  background: linear-gradient(transparent 60%, #ffe569 40%);
  padding-inline: 2px 0;
}

.section-cta__lead-bold {
  font-size: 1.375rem;

  @media (width >= 768px) {
    font-size: 2.7rem;
  }

  @media (width >= 850px) {
    font-size: 3.1rem;
  }
}

.section-cta__title {
  position: relative;
  color: var(--black);
  font-size: 1.25rem;
  font-weight: var(--fw-ex-bold);
  line-height: 140%;
  letter-spacing: 0.6px;
  text-align: center;

  @media (width <= 390px) {
    font-size: 1.15rem;
  }

  @media (width >= 768px) {
    margin-block-start: -18px;
    font-size: 2.125rem;
    letter-spacing: 1.02px;
  }
}

/* 1 */
.section-cta__title--emphasize {
  color: var(--primary);
  font-size: 3.125rem;
  line-height: 140%;

  @media (width <= 390px) {
    font-size: 3rem;
  }

  @media (width >= 768px) {
    font-size: 5.4215rem;
  }
}

/* おトク */
.section-cta__title-pink {
  position: relative;
  color: var(--primary);
  font-size: 2.125rem;

  @media (width <= 390px) {
    font-size: 1.9rem;
  }

  @media (width >= 768px) {
    font-size: 3.686625rem;
  }

  /* 番 */
  small {
    font-size: 1.5rem;

    @media (width <= 390px) {
      font-size: 1.4rem;
    }

    @media (width >= 768px) {
      font-size: 2.6023125rem;
    }
  }
}

/* ※ */
.section-cta__title-pink::before {
  position: absolute;
  content: "※";
  top: -12px;
  right: -7px;
  width: 9px;
  height: 9px;
  font-size: 0.8rem;
}

@media screen and (min-width: 768px) {
  .section-cta__title-pink::before {
    top: -16px;
    font-size: 1.2rem;
  }
}

/* 家族一緒、乗り換えよう！ */
.section-cta__title-text {
  font-size: 2rem;
  letter-spacing: 0.96px;
  line-height: 140%;

  @media (width <= 390px) {
    font-size: 1.8rem;
  }

  @media (width >= 768px) {
    font-size: 4rem;
  }

  /* に */
  small {
    font-size: 1.625rem;
    letter-spacing: 0.78px;

    @media (width <= 390px) {
      font-size: 1.4rem;
    }

    @media (width >= 768px) {
      font-size: 2.8125rem;
    }
  }
}

.section-cta__bta-wrap {
  margin-block-start: 36px;
  width: min(100%, 601px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 27px;
  }
}

.section-cta__note {
  position: relative;
  margin-block-start: 23px;
  color: #676767;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 160%; /* 19.2px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    margin-block-start: 48.23px;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.42px;
  }

  span {
    padding-inline-start: 1.3em;

    @media (width >= 768px) {
      padding-inline-start: 0;
    }
  }
}

/* flowセクション */
.flow__title {
  color: var(--white);
  text-align: center;
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: 1.08px;
  width: 100%;
  background: var(--black);
  padding-block: 12px;

  @media (width >= 768px) {
    font-size: 2.25rem;
    padding-block: 19px;
  }

  span {
    position: relative;
  }
}

/* 下向き矢印 */
.flow__title span::before {
  position: absolute;
  content: "";
  top: 25%;
  right: -43px;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  transform-origin: center;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

@media screen and (min-width: 768px) {
  .flow__title span::before {
    right: -57px;
  }
}

.flow__contents {
  margin-block-start: 32px;
  width: min(calc(100% - 27px * 2), 626px);
  margin-inline: auto;
  display: grid;
  gap: 47px;

  @media (width >= 768px) {
    margin-block-start: 95px;
    gap: 39px;
  }
}

.flow-item {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 12px;

  @media (width >= 768px) {
    grid-template-columns: 20% 1fr;
    gap: 16px;
  }
}

.flow-item__avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;

  @media (width >= 768px) {
    gap: 24.94px;
  }
}

.flow-item__tag {
  display: inline-block;
  color: var(--primary);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: 150%; /* 33px */
  text-align: center;
  width: min(100%, 97px);
  margin-inline: auto;
  border-radius: 3px;
  background: #ffe7f3;

  @media (width >= 768px) {
    font-size: 1.7125rem;
    width: min(100%, 120px);
  }
}

.flow-item__icon {
  width: min(100%, 100px);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 1 / 1;

  @media (width >= 768px) {
    width: min(100%, 124.7px);
  }

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

.flow-item__text-content {
  display: grid;
  grid-template-rows: auto 1fr;
}

.flow-item__title {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  line-height: 150%; /* 27px */
  letter-spacing: 0.3px;

  @media (width >= 768px) {
    font-size: 1.625rem;
    letter-spacing: 0.374px;
  }
}

.flow-item__text {
  display: grid;
  align-items: center;
  font-size: 0.9375rem;
  line-height: 150%; /* 22.5px */
  letter-spacing: 0.3px;

  @media (width >= 768px) {
    font-size: 1rem;
    line-height: 170%; /* 27.2px */
    letter-spacing: 0.374px;
  }

  span {
    color: var(--primary);
    font-weight: var(--fw-bold);
    line-height: 150%; /* 22.5px */
    letter-spacing: 0.3px;
  }
}

.flow__bta-wrap {
  margin-block-start: 59px;
  margin-block-end: 37px;
  width: min(calc(100% - 23px * 2), 517px);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 73px;
    margin-block-end: 59px;
  }
}

/* detailsセクション */
.details {
  background: #f7f7f7;
  padding-block: 39px 10.3px;

  @media (width >= 768px) {
    padding-block: 55px 41px;
  }
}

.details__inner {
  --padding-inline: 20px;
  --max-contents-width: 1039px;

  width: min(calc(100% - var(--padding-inline) * 2), var(--max-contents-width));
  margin-inline: auto;
}

.details__lead {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-size: 1.375rem;
  font-weight: var(--fw-ex-bold);
  line-height: 160%; /* 35.2px */

  @media (width >= 768px) {
    font-size: 1.58rem;
  }

  span {
    color: var(--primary);
    font-size: 2rem;

    @media (width >= 768px) {
      font-size: 2.3rem;
    }
  }
}

/* あしらい共通設定 */
.details__lead::before,
.details__lead::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 18px;
  background: var(--black);
}

.details__lead::before {
  left: -12px;
  top: 60%;
  transform: translateY(-50%) rotate(-45deg);
}

.details__lead::after {
  right: -12px;
  top: 60%;
  transform: translateY(-50%) rotate(45deg);
}

.details__title {
  margin-block-start: 12px;
  color: var(--primary);
  text-align: center;
  font-size: 3rem;
  font-weight: var(--fw-ex-bold);
  line-height: 120%; /* 57.6px */
  text-wrap: nowrap;

  @media (width >= 768px) {
    margin-block-start: 24px;
    font-size: 3.5rem;
  }

  /* した */
  span {
    font-size: 2.375rem;

    @media (width >= 768px) {
      font-size: 2.875rem;
    }
  }
}

.details__pop {
  margin-block-start: 18px;
  width: min(calc(100% - 30px * 2), 271px);
  margin-inline: auto;
  text-align: center;
  font-size: 1.375rem;
  font-weight: var(--fw-ex-bold);
  line-height: 140%; /* 30.8px */
  padding-block: 13px;
  border-radius: 5px;
  border: 1px solid;
  background: var(--white);

  @media (width >= 768px) {
    margin-block-start: 21px;
    font-size: 1.58rem;
    padding-block: 26px;
    width: min(calc(100% - 30px * 2), 548px);
  }

  span {
    color: var(--primary);
  }
}

.details__container {
  margin-block-start: 27.56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 7px;
  row-gap: 6px;

  @media (width >= 768px) {
    margin-block-start: 49.72px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 10px;
  }
}

.details__item {
  width: 100%;
  height: auto;

  img {
    width: 100%;
    height: 100%;
    aspect-ratio: 170 / 178;
    object-fit: contain;

    @media (width >= 768px) {
      aspect-ratio: 339 / 257;
    }
  }
}

.details__note {
  margin-block-start: 14px;
  color: #676767;
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 140%; /* 16.8px */
  letter-spacing: 0.36px;

  @media (width >= 768px) {
    margin-block-start: 45px;
    font-size: 0.875rem;
    letter-spacing: 0.42px;
  }

  p {
    padding-left: 1.4em;
    text-indent: -1.9em;
  }

  p + p {
    margin-block-start: 0.2em;
  }

  /* 2行目以降のインデント */
  p::first-line {
    text-indent: -1.5em;
  }

  a {
    text-decoration-line: underline;
    transition: opacity 0.3s ease;
  }
}

@media (any-hover: hover) {
  .details__note a:hover {
    opacity: 0.6;
  }
}

/* デフォルトの三角マークを非表示 */
.flow__details summary::-webkit-details-marker {
  display: none;
}

.flow__details {
  overflow: hidden;
}

.flow__details summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.flow__details-contents {
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 開いている時のアイコンの反転 */
.flow__details[open] .flow__title span::before {
  transform: rotate(-135deg);
}