/* 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;
  --black2: #333;
  --darkest: #000;
  --white: #fff;
  --gray: #676767;
  --gray2: #696969;

  /* font */
  --ff-base: "Rakuten Sans", sans-serif;
  --fz-base: 1rem;
  --lh-base: normal;
  --fw-light: 300;
  --fw-base: 400;
  --fw-medium: 600;
  --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%;
}

strong {
  font-weight: inherit;
}

em {
  font-style: normal;
}

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

.sp-none {
  display: none;

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

.sp-none-ib {
  display: none;

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

/* components */
/* 今すぐWebから申し込む */
.c-btn {
  position: relative;
  display: inline-block;
  inline-size: 100%;
  color: var(--white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  line-height: 110%; /* 19.8px */
  letter-spacing: 0.3px;
  border: 2px solid var(--primary);
  border-radius: 60px;
  padding-block: 19px 15px;
  background: var(--primary);
  touch-action: manipulation;
  user-select: none;
  transition: all 0.3s ease;

  @media (width >= 768px) {
    font-size: 1.625rem;
    line-height: 110%; /* 28.6px */
    letter-spacing: 0.338px;
    padding-block: 23.52px 15.68px;
    border-radius: 67.682px;
  }
}

/* 最短3分 */
.c-btn::before {
  position: absolute;
  content: "";
  top: -38%;
  left: 50%;
  transform: translateX(-50%);
  width: 199px;
  height: 39px;
  background: url(../img/c-btn_deco.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: -35%;
    width: 224.479px;
    height: 43.993px;
  }
  .c-btn:hover::before {
    top: -52%;
  }
}

/* 三角矢印 */
.c-btn::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 15px;
  width: 10px;
  height: 13px;
  transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background: var(--white);
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .c-btn::after {
    width: 11.664px;
    height: 14.536px;
  }
}

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

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

  .c-btn:hover::after {
    background: var(--primary);
  }
}

/* 下部のみ：今すぐWebから申し込む */
/* 最短3分 */
.c-btn_bottom::before {
  background: url(../img/c-btn_deco-250501.png) center no-repeat;
  background-size: contain;
}


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

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

/* pattern-2 */
.header--pattern-2 {
  @media (width >= 768px) {
    background: var(--black);
  }
}

.header__logo {
  width: 72.876px;

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

/* footer */
.footer {
  color: var(--white);
  font-size: 0.8625rem;
  line-height: 13.806px; /* 100% */
  text-align: center;
  font-weight: 400;
  padding-block: 18.4px 16.58px;
  background: var(--primary);

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

/* fv */
.fv {
  --container-size: 393;

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

  @media (width >= 768px) {
    --container-size: 1440;

    padding-block-start: 0;
  }
}

/* 背景 */
.fv::before {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background: url(../img/fv_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .fv::before {
    background: url(../img/fv_bg-pc.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* パターン2 */
.fv--pattern-2::before {
  background: url(../img/fv_bg-2.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .fv--pattern-2::before {
    background: url(../img/fv_bg-pc-2.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.fv__title {
  text-align: center;
  text-shadow: 0px 2px 10px #fff, 0px 2px 10px #fff, 0px 2px 20px #fff,
    0px 2px 20px 3.125rem;
  font-size: 2.8125rem;
  font-weight: var(--fw-bold);
  line-height: 126%; /* 63px */
  letter-spacing: 0.215px;
  transform: skew(-7deg);

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

  @media (width >= 768px) {
    font-size: 5.1625rem;
    line-height: 126%; /* 115.665px */
    letter-spacing: 0.394px;
  }

  small {
    font-size: 1.875rem;

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

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

  /* SNS */
  strong {
    font-size: 3.125rem;

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

  /* もっと快適に */
  span {
    display: inline-block;
    color: var(--white);
    -webkit-text-stroke-width: 0.5;
    -webkit-text-stroke-color: var(--white);
    font-size: 3.375rem;
    font-weight: var(--fw-ex-bold);
    line-height: 126%; /* 68.04px */
    letter-spacing: 0.215px;
    background: var(--primary);
    box-shadow: 4px 5px 0px 0px rgba(0, 0, 0, 0.25);
    text-shadow: none;
    padding-inline: 3dvw;
    text-wrap: nowrap;

    @media (width >= 768px) {
      -webkit-text-stroke-width: 0.6168177127838135;
      font-size: 6.18125rem;
      line-height: 126%; /* 124.707px */
      letter-spacing: 0.414px;
    }

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

    sup {
      top: -2em;
      color: inherit;
      font-size: 0.875rem;
      font-weight: var(--fw-medium);
      letter-spacing: 0.215px;

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

/* fv__title-pattern-2 */
.fv__title-pattern-2 {
  color: var(--white);
}

.fv__note {
  margin-block-start: 9px;

  p {
    color: var(--gray);
    text-align: center;
    font-size: 0.625rem;
    line-height: 15.6px; /* 156% */
  }
}

.fv__note--pattern-2 {
  p {
    color: var(--white);
  }
}

.fv__price-box {
  position: relative;
  margin-block-start: 14px;
  border-radius: 20px;
  border: 3px solid var(--primary);
  width: calc(100% - 13.05px * 2);
  margin-inline: auto;
  background: var(--white);

  @media (width >= 768px) {
    margin-block-start: 22px;
    width: 100%;
    border-top: 4.27px solid #ff008c;
    border-bottom: 4.27px solid #ff008c;
    border-right: none;
    border-left: none;
    border-radius: 0;
  }
}

.fv__price-box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-block: 13px 11px;

  @media (width >= 768px) {
    flex-direction: row;
    align-items: center;
    padding-block: 15px 6px;
  }
}

.fv__price-box-text {
  text-align: center;
  font-size: 1.25rem;
  font-size: min(calc((20 * 100cqw) / var(--container-size)), 1.25rem);
  font-weight: var(--fw-medium);
  line-height: 126%; /* 25.2px */
  letter-spacing: 0.215px;

  @media (width >= 768px) {
    margin-inline-end: 12px;
    font-size: min(calc((29.61 * 100cqw) / var(--container-size)), 1.850625rem);
    text-align: right;
    letter-spacing: 0.295px;
  }

  sup {
    font-size: min(calc((10 * 100cqw) / var(--container-size)), 0.75rem);
    font-weight: var(--fw-base);

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

/* 2,980円/月 */
.fv__price-box-price {
  color: var(--primary);
  text-align: center;
  font-size: 80px;
  font-size: min(calc((80 * 100cqw) / var(--container-size)), 5rem);
  font-weight: var(--fw-bold);
  line-height: 82%;
  letter-spacing: -2px;

  @media (width >= 768px) {
    font-size: min(calc((109.88 * 100cqw) / var(--container-size)), 6.8675rem);
    line-height: 80%;
    letter-spacing: -2.747px;
  }

  /* , */
  small {
    font-size: min(calc((40 * 100cqw) / var(--container-size)), 2.5rem);

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

  /* 円/月 */
  span {
    font-size: min(calc((40 * 100cqw) / var(--container-size)), 2.5rem);
    letter-spacing: 0.215px;

    @media (width >= 768px) {
      font-size: min(calc((54.94 * 100cqw) / var(--container-size)), 3.4rem);
      letter-spacing: 0.295px;
    }
  }
}

/* 税込3,278円/月 */
.fv__price-box-tax {
  color: var(--gray2);
  font-size: min(calc((40 * 100cqw) / var(--container-size)), 2.5rem);
  font-weight: var(--fw-light);
  line-height: 60%;
  letter-spacing: 0.215px;

  @media (width >= 768px) {
    margin-block-start: 0.5em;
    font-size: min(calc((54.94 * 100cqw) / var(--container-size)), 3.43375rem);
    line-height: 1;
  }

  /* 税込、円/月 */
  span {
    font-size: min(calc((20 * 100cqw) / var(--container-size)), 1.25rem);
    letter-spacing: 0.215px;

    @media (width >= 768px) {
      font-size: min(calc((27.47 * 100cqw) / var(--container-size)), 1.7rem);
      letter-spacing: 0.295px;
    }
  }

  /* , */
  small {
    font-size: min(calc((25 * 100cqw) / var(--container-size)), 1.56rem);

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

.fv__area {
  position: relative;
  margin-block-start: 14px;
  width: min(calc(100% - 5px * 2), 959px);
  margin-inline: auto;

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

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

.fv__note-bottom {
  position: relative;
  margin-block-start: 14px;

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

  p {
    text-align: center;
    text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
      0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;

    font-size: 0.625rem;
    line-height: 15.6px; /* 156% */

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

.fv__cta {
  --max-width: 337px;

  margin-block-start: 36px;
  width: min(calc(100% - 24.55px * 2), var(--max-width));
  margin-inline: auto;

  @media (width >= 768px) {
    --max-width: 597px;
  }
}

.fv__bottom {
  position: relative;
  margin-block-start: 14.88px;
  background: #69b0e5;
  padding-block: 7px 9px;

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

  p {
    width: min(calc(100% - 19px * 2), 1200px);
    margin-inline: auto;
    color: var(--white);
    font-size: 0.625rem;
    font-weight: var(--fw-medium);
    line-height: 140%; /* 14px */

    @media (width >= 768px) {
      font-size: 0.8125rem;
      width: min(calc(100% - 19px * 2), 1200px);
    }
  }
}

.fv__bottom--2 {
  p {
    color: var(--black);
    font-weight: var(--fw-base);

    @media (width >= 768px) {
      color: var(--white);
      font-weight: var(--fw-medium);
    }
  }
}

/* evaluation */
.evaluation {
  position: relative;
  padding-block-start: 30px;

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

/* 背景 */
.evaluation::before {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  height: 100%;
  background: url(../img/evaluation_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .evaluation::before {
    background: url(../img/evaluation_bg-pc.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.evaluation__img {
  width: min(calc(100% - 6px * 2), 569px);
  margin-inline: auto;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 20px 0;
  }
}

.evaluation__text {
  margin-block-start: 28px;
  width: 100%;
  text-align: center;

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

  p {
    font-size: 1.625rem;
    font-weight: var(--fw-bold);
    line-height: 140%;
    letter-spacing: 0.464px;

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

    /* 楽天モバイル */
    span {
      color: var(--white);
      background: var(--primary);
      font-size: 2.25rem;
      margin-inline: 0.1em;
      padding-inline: 0.2em;

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

.evaluation__example-img {
  margin-block-start: 26px; /* 画像のshadow分調整 */
  width: min(calc(100% - 20px * 2), 1063px); /* 画像のshadow分調整 */
  margin-inline: auto;

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

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

.evaluation__title {
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  line-height: 180%; /* 64.8px */
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
  text-align: center;

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

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

  small {
    font-size: 1.625rem;

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

  sup {
    top: -1.7em;
    color: var(--gray);
    font-size: 0.75rem;

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

  /* もっと快適に */
  span {
    display: inline-block;
    color: var(--white);
    -webkit-text-stroke-width: 0.5;
    -webkit-text-stroke-color: var(--white);
    font-size: 3.375rem;
    font-weight: var(--fw-ex-bold);
    line-height: 126%; /* 68.04px */
    letter-spacing: 0.215px;
    background: var(--primary);
    box-shadow: 4px 5px 0px 0px rgba(0, 0, 0, 0.25);
    text-shadow: none;
    padding-inline: 3dvw;
    text-wrap: nowrap;
    transform: skew(-7deg);

    @media (width >= 768px) {
      -webkit-text-stroke-width: 0.6168177127838135;
      font-size: 4.1625rem;
      letter-spacing: 0.265px;
      padding-inline: 1dvw;
    }

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

    sup {
      top: -2em;
      color: inherit;
      font-size: 0.875rem;
      font-weight: var(--fw-medium);
      letter-spacing: 0.215px;

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

.evaluation__bottom {
  margin-block-start: 28.45px;
  background: #69b0e5;
  padding-block: 20px;

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

.evaluation__bottom-inner {
  width: min(calc(100% - 20px * 2), 1040px);
  margin-inline: auto;

  p {
    color: var(--white);
    font-size: 0.625rem;
    font-weight: var(--fw-medium);
    line-height: 140%; /* 14px */

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

  p:nth-of-type(2) {
    @media (width >= 768px) {
      text-indent: 1em;
    }
  }
}

/* more */
.more {
  background: var(--primary);
  padding-block: 21px 18px;
  text-align: center;

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

.more__text {
  display: inline-block;
  color: var(--primary);
  -webkit-text-stroke-width: 0.30623334646224976;
  -webkit-text-stroke-color: var(--primary);
  font-size: 2.0625rem;
  font-weight: var(--fw-ex-bold);
  line-height: 126%; /* 41.672px */
  letter-spacing: 0.132px;
  background: var(--white);
  box-shadow: 2.45px 3.062px 0px 0px rgba(0, 0, 0, 0.25);
  padding-inline: 3dvw;
  text-wrap: nowrap;
  transform: skew(-7deg);

  @media (width >= 768px) {
    font-size: 3.325rem;
    -webkit-text-stroke-width: 0.4932142198085785;
    letter-spacing: 0.212px;
  }
}

.more__img {
  --max-width: 315px;

  width: min(100%, var(--max-width));
  margin-inline: auto;

  @media (width >= 768px) {
    --max-width: 507px;
  }

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

.more__lead {
  p {
    color: var(--white);
    text-align: center;
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
    line-height: 130%; /* 23.4px */
    letter-spacing: 0.54px;

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

    sup {
      font-size: 0.85rem;
      font-weight: var(--fw-bold);
      letter-spacing: 0.303px;
      top: -0.5em;
      left: -0.3em;

      @media (width >= 768px) {
        font-size: 1.2rem;
        top: -0.6em;
      }
    }

    span {
      margin-inline-start: 0.15em;
    }
  }
}

/* more-info */
.more-info {
  padding-block: 28px 16px;
  background: url(../img/more-info_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

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

.more-info__content {
  --container-size: 358;

  position: relative;
  width: min(calc(100% - 17.5px), 358px);
  margin-inline: auto;
  padding-block: 20px 23px;
  background: var(--black);
  container-type: inline-size;

  @media (width >= 768px) {
    --container-size: 815;

    width: min(calc(100% - 17.5px), 815px);
    padding-block: 47.62px 46.84px;
  }
}

/* 上向三角矢印 */
.more-info__content::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  width: 26px;
  height: 23px;
  transform: translate(-50%, -70%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: var(--black);
}

@media screen and (min-width: 768px) {
  .more-info__content::before {
    width: 36.295px;
    height: 33.591px;
  }
}

.more-info__title {
  color: var(--white);
  text-align: center;
  font-size: min(calc((18 * 100cqw) / var(--container-size)), 1.125rem);
  font-weight: var(--fw-bold);
  line-height: 130%; /* 23.4px */
  letter-spacing: 0.54px;

  @media (width >= 768px) {
    font-size: min(calc((28 * 100cqw) / var(--container-size)), 1.75rem);
    letter-spacing: 0.84px;
  }
}

.more-info__text {
  margin-block-start: 14px;
  width: calc(100% - 16.5px * 2);
  margin-inline: auto;

  @media (width >= 768px) {
    margin-block-start: 19.54px;
    width: calc(100% - 42px * 2);
  }

  p {
    color: var(--white);
    font-size: min(calc((13 * 100cqw) / var(--container-size)), 0.8125rem);
    line-height: 160%; /* 20.8px */
    letter-spacing: 0.39px;

    span {
      font-weight: var(--fw-bold);
    }

    .highlight {
      color: #dfff00;
      font-weight: var(--fw-bold);
    }

    @media (width >= 768px) {
      text-align: center;
      font-size: min(calc((18 * 100cqw) / var(--container-size)), 1.125rem);
      letter-spacing: 0.54px;
    }
  }
}

.more-info__note {
  margin-block-start: 12px;

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

  p {
    text-align: center;
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
    line-height: 189%; /* 26.46px */
    letter-spacing: 0.303px;

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

/* voice */
.voice {
  padding-block: 47px 42px;
  background: url(../img/voice_bg.webp);
  background-position: top;
  background-size: contain;
  background-repeat: repeat;

  @media (width >= 768px) {
    padding-block: 51px 102px;
    background: url(../img/voice_bg-pc.webp);
    background-position: top;
    background-size: contain;
    background-repeat: repeat;
  }
}

.voice__title {
  span {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding-inline: 0.3em;
    color: var(--white);
    text-align: center;
    font-size: 1.5rem;
    font-weight: var(--fw-medium);
    line-height: 180%; /* 43.2px */
    letter-spacing: 0.502px;
    background: var(--primary);
    box-shadow: 4px 5px 0px 0px rgba(0, 0, 0, 0.25);

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

  span + span {
    margin-block-start: 0.3em;
  }
}

.voice__heading {
  position: relative;
  margin-block-start: 26px;
  text-align: center;
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  line-height: 140%; /* 36.4px */
  letter-spacing: 0.303px;

  /* お客様の声 */
  span {
    font-size: 2.875rem;
    line-height: 140%;
  }
}

/* 下線 */
.voice__heading::before {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 50%;
  width: 102px;
  height: 3px;
  background: var(--primary);
  transform: translate(-50%, -50%);
}

.voice__container {
  --max-content-width: 350px;

  margin-block-start: 56px;
  width: min(calc(100% - 21.5px), var(--max-content-width));
  margin-inline: auto;
  display: grid;
  gap: 40px;

  @media (width >= 768px) {
    --max-content-width: 800px;
  }
}

/* voice-item */
.voice-item {
  background: var(--white);
  border-radius: 20px;
  filter: drop-shadow(0px 2px 14px rgba(0, 0, 0, 0.15));
}

.voice-item__heading {
  position: relative;
  width: calc(100% - 20px);
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 89px 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 20px 20px 0 0;
  border-bottom: 3px dashed var(--black);

  @media (width >= 768px) {
    width: 100%;
    gap: 17px;
  }

  /* Q */
  span {
    position: relative;
    margin-block-end: -3px;
    border-radius: 20px 0 0 0;
    color: var(--white);
    font-size: 3.375rem;
    font-weight: var(--fw-medium);
    line-height: 30.8px; /* 57.037% */
    letter-spacing: -1.32px;
    background: var(--primary);
    padding: 28px 9px 30px 11px;

    @media (width >= 768px) {
      padding: 28px 8px 30px 12px;
    }
  }

  h3 {
    color: var(--black2);
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    line-height: 30.8px; /* 140% */
    letter-spacing: -1.32px;

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

.voice-item__body {
  width: min(calc(100% - 14px * 2), 600px);
  margin-inline: auto;
  padding-block: 32px 22px;

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

.voice-item__img {
  width: 100%;

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

/* Q3 */
.voice-item__img--q3 {
  @media (width >= 768px) {
    /* margin-block-start: -33px; */
  }
}

/* Q4 */
.voice-item__img--q4 {
  @media (width >= 768px) {
    width: min(100%, 298px);
    margin-inline: auto;
  }
}

/* Q5 */
.voice-item__img--q5 {
  @media (width >= 768px) {
    width: min(100%, 331px);
    margin-inline: auto;
  }
}

.voice-item__note {
  p {
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 140%; /* 16.8px */

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

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

.voice-item__copy {
  color: var(--darkest);
  font-size: 1.6875rem;
  font-weight: var(--fw-bold);
  line-height: 140%; /* 37.8px */

  span {
    color: var(--white);
    font-size: 1.9375rem;
    background: var(--primary);
    line-height: 140%; /* 43.4px */
    padding-inline: 0.2em;
    line-height: 140%; /* 43.4px */
  }

  /* Q3 ご利用いただいている約9割が */
  strong {
    color: var(--primary);

    em {
      font-size: 2.5rem;
    }
  }
}

.voice-item__copy--q5 {
  margin-block-start: 45px;

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

.voice-item__copy--q5-2 {
  margin-block-start: 1em;

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

.marker {
  background: linear-gradient(transparent 70%, #dfff00 30%);
}

.voice-item__text {
  p {
    color: var(--darkest);
    font-size: 1.0625rem;
    line-height: 140%; /* 23.8px */
  }

  strong {
    font-weight: var(--fw-bold);
    line-height: 140%;
  }
}

/* Q4 つながりやすさを日々改善中！ */
.voice-item__text-pink {
  margin-block-start: 50px;

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

  p {
    color: var(--primary);
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    line-height: 140%; /* 23.8px */
  }
}

/* Q4 4キャリア中、最も多くの地域で~ */
.voice-item__text--q4 {
  margin-block-start: 27.2px;

  p {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 160%; /* 25.6px */
  }
}

.voice-item__cover {
  margin-block-start: 8px;
}

.voice-item__mt-ss {
  margin-block-start: 12px;
}

.voice-item__mt-sm {
  margin-block-start: 20px;
}

.voice-item__mt-m {
  margin-block-start: 16px;

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

.voice-item__mt-md {
  margin-block-start: 57px;

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

.voice-item__mt-q3 {
  @media (width >= 768px) {
    margin-block-start: 26px;
  }
}

/* plans */
.plans {
  padding-block: 48px 24px;
  background: var(--primary);

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

.plans__title {
  width: min(100%, 374px);
  margin-inline: auto;

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

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

.plans__top {
  margin-block-start: 16px;
  border-radius: 8px;
  background: var(--white);
  width: min(calc(100% - 11px * 2), 372px);
  margin-inline: auto;
  padding-block: 19px 14px;

  @media (width >= 768px) {
    margin-block-start: 34px;
    border-radius: 10.892px;
    width: min(calc(100% - 11px * 2), 1040px);
    padding-block: 50px 37px;
  }
}

.plans__top-text {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 22.1px */
  letter-spacing: 0.51px;

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

.plans__top-plan {
  margin-block-start: 11px;
  position: relative;
  width: min(100%, 245.5px);
  margin-inline: auto;

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

  p {
    color: var(--primary);
    text-align: center;
    font-size: 2rem;
    font-weight: var(--fw-ex-bold);
    line-height: 130%; /* 41.6px */
    letter-spacing: 0.96px;

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

/* \ / */
.plans__top-plan::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 15px;
  width: 2.7px;
  height: 51px;
  background: var(--primary);
  rotate: -23deg;
  transform: translateY(-33%);
}

.plans__top-plan::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 15px;
  width: 2.7px;
  height: 51px;
  background: var(--primary);
  rotate: 23deg;
  transform: translateY(-33%);
}

@media screen and (min-width: 768px) {
  .plans__top-plan::before {
    left: 0;
    width: 2.7px;
    height: 77px;
    transform: translateY(-47%);
  }

  .plans__top-plan::after {
    right: 0;
    width: 2.7px;
    height: 77px;
    transform: translateY(-47%);
  }
}

.plans__top-box {
  margin-block-start: 14px;
  text-align: center;
  border-radius: 20px;
  border: 3px solid var(--primary);
  background: var(--primary);
  width: min(calc(100% - 16px * 2), 340px);
  margin-inline: auto;
  padding-block: 5px 15px;

  @media (width >= 768px) {
    margin-block-start: 32.2px;
    width: min(calc(100% - 16px * 2), 706px);
    padding-block: 10px 34px;
  }
}

.plans__top-box-price {
  color: var(--white);
  font-size: 5rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -2px;

  @media (width >= 768px) {
    font-size: 6.80625rem;
    line-height: 120%;
    letter-spacing: -2.723px;
  }

  /* 円/月 */
  span {
    font-size: 2.5rem;
    letter-spacing: 0.215px;

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

  /* , */
  small {
    font-size: 2.5rem;
    letter-spacing: -2px;

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

.plans__top-box-tax {
  color: var(--white);
  font-size: 2.5rem;
  font-weight: var(--fw-light);
  line-height: 100%;

  @media (width >= 768px) {
    margin-block-start: -8px;
    font-size: 3.4rem;
    line-height: 45%;
  }

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

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

  small {
    font-size: 1.5625rem;

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

.plans__pop {
  position: relative;
  width: min(calc(100% - 21px * 2), 352px);
  margin-inline: auto;
  border-radius: 10px;
  background: var(--white);
  border: 2px solid var(--primary);
  text-align: center;
  padding-block: 15px 9px;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15));
  transform: translateY(7%); /* position調整用 */
  z-index: 2;

  @media (width >= 768px) {
    width: min(calc(100% - 21px * 2), 706px);
    padding-block: 22px 24px;
    transform: translateY(17%);
  }
}

/* 外側の三角形 */
.plans__pop::before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: var(--primary) transparent transparent transparent;
}

/* 内側の三角形 */
.plans__pop::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 13px 13px 0 13px;
  border-color: var(--white) transparent transparent transparent;
}

.plans__pop-lead {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 18.2px */

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

.plans__pop-text {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 130%; /* 20.8px */

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

  /* ※1 */
  sup {
    top: -1em;
    right: 0.5em;
    color: var(--gray);
    font-size: 0.75rem;
    font-weight: var(--fw-light);
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.36px;

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

  /* 番安い */
  span {
    color: var(--primary);
    font-size: 1.625rem;
    line-height: 130%;

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

  /* 1 */
  strong {
    font-size: 2.625rem;
    line-height: 130%;
    letter-spacing: 2.1px;

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

.plans__pop-note {
  color: var(--gray);
  font-size: 0.75rem;
  font-weight: var(--fw-light);
  line-height: 140%; /* 16.8px */
  letter-spacing: 0.36px;

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

  span {
    display: inline-block;
  }
}

.plans__program {
  --container-size: 372;

  width: min(calc(100% - 11px * 2), 372px);
  margin-inline: auto;
  background: var(--white);
  border-radius: 8px;
  padding: 36px 22px;
  container-type: inline-size;

  @media (width >= 768px) {
    margin-block-start: 18px;
    border-radius: 10.892px;
    width: min(calc(100% - 11px * 2), 1040px);
    padding-block: 52px 39px;
  }
}

.plans__program-inner {
  width: calc(100% - 10.5px * 2);
  margin-inline: auto;
}

.plans__program-title {
  width: min(100%, 253px);
  margin-inline: auto;

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

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

.plans__program-lead {
  margin-block-start: 24px;
  font-size: 1.25rem;
  letter-spacing: 0.6px;
  text-align: center;

  @media (width >= 768px) {
    margin-block-start: 32px;
    font-size: 1.7rem;
    letter-spacing: 0.817px;
  }
}

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

  @media (width >= 768px) {
    margin-block-start: 12px;
    font-size: 2.71875rem;
    letter-spacing: 1.307px;
  }

  span {
    font-size: 3rem;
    line-height: 100%;
    letter-spacing: 1.44px;

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

/* 離れて住む家族も対象！ */
.plans__program-pop-sm {
  margin-block-start: 15px;
  position: relative;
  color: var(--white);
  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: 15px;
    font-size: 1.3125rem;
    letter-spacing: 0.654px;
    width: min(100%, 300px);
    padding-block: 13px;
  }
}

/* 上三角矢印 */
.plans__program-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) {
  .plans__program-pop-sm::before {
    --size: 35px;
  }
}

.plans__program-img {
  margin-block-start: 15px;
  width: min(100%, 700px);
  margin-inline: auto;

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

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

.plans__program-bottom-text {
  @media (width >= 768px) {
    margin-block-start: 15px;
  }

  p {
    text-align: center;
    font-size: min(calc((14 * 100cqw) / var(--container-size)), 0.875rem);
    font-weight: var(--fw-bold);
    line-height: 160%; /* 22.4px */
    letter-spacing: 0.42px;
    text-wrap: nowrap;

    @media (width >= 768px) {
      font-size: 1.1875rem;
      letter-spacing: 0.572px;
      line-height: 176%;
    }

    sup {
      font-size: min(calc((8 * 100cqw) / var(--container-size)), 0.5rem);
      letter-spacing: 0.45px;

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

    small {
      font-size: min(calc((12 * 100cqw) / var(--container-size)), 0.75rem);
      letter-spacing: 0.36px;

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

.plans__program-note {
  margin-block-start: 10px;

  @media (width >= 768px) {
    margin-block-start: 23.3px;
    width: min(100%, 461px);
    margin-inline: auto;
  }

  p {
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 160%; /* 19.2px */
    /* インデント調整 */
    padding-left: 1.4em;
    text-indent: -1.9em;

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

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

/* cta */
.cta {
  background: var(--white);
  padding-block: 41px;

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

.cta__btn {
  width: min(calc(100% - 28px * 2), 337px);
  margin-inline: auto;

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

.cta__note {
  margin-block-start: 20px;
  width: min(calc(100% - 28px * 2), 337px);
  margin-inline: auto;

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

  p {
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 130%;

    @media (width >= 768px) {
      font-size: 0.8125rem;
      /* インデント調整 */
      padding-left: 1.4em;
      text-indent: -1.2em;
    }
  }

  /* 2行目以降のインデント */
  p::first-line {
    @media (width >= 768px) {
      text-indent: -1.2em;
    }
  }
}

/* service */
.service {
  padding-block: 34px 65px;
  background: #e1f5ff;

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

.service__pop {
  position: relative;
  width: min(100%, 226px);
  margin-inline: auto;
  text-align: center;
  font-size: 1.375rem;
  font-weight: var(--fw-ex-bold);
  line-height: 160%; /* 35.2px */
  text-wrap: nowrap;

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

  /* 安い */
  span {
    color: var(--primary);
    font-size: 2rem;

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

/* \ / */
.service__pop::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  width: 2px;
  height: 20px;
  background: var(--black);
  rotate: -45deg;
  transform: translateY(-33%);
}

.service__pop::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 5px;
  width: 2px;
  height: 20px;
  background: var(--black);
  rotate: 45deg;
  transform: translateY(-33%);
}

@media screen and (min-width: 768px) {
  .service__pop::before {
    width: 2.5px;
    height: 25px;
  }

  .service__pop::after {
    width: 2.5px;
    height: 25px;
  }
}

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

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

  span {
    font-size: 2.375rem;

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

.service__reason {
  --container-size: 271;

  margin-block-start: 13px;
  width: min(100%, 271px);
  margin-inline: auto;
  border-radius: 5px;
  border: 2px solid var(--black);
  background: var(--white);
  text-align: center;
  padding: 14px 17px;

  @media (width >= 768px) {
    width: min(100%, 517px);
    padding: 26px 34px;
  }

  p {
    font-size: min(calc((22 * 100cqw) / var(--container-size)), 1.375rem);
    font-weight: var(--fw-ex-bold);
    line-height: 130%; /* 30.8px */
    text-wrap: nowrap;

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

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

.service__container {
  margin-block-start: 18.5px;
  width: min(calc(100% - 17px * 2), 358px);
  margin-inline: auto;
  display: grid;
  gap: 16px;

  @media (width >= 768px) {
    margin-block-start: 38px;
    width: min(calc(100% - 11px * 2), 1040px);
    gap: 30px;
  }

  @media (width >= 1032px) {
    margin-block-start: 38px;
    width: 1032px;
    gap: 30px;
  }
}

.service-item {
  border-radius: 20px;
  background: var(--white);
  text-align: center;
  padding-block: 32px 16px;

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

.service-item--2 {
  padding: 29px 22px;

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

.service-item__box {
  display: contents;

  @media (width >= 768px) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.service-item__text-sm {
  font-size: 1.5rem;
  font-weight: var(--fw-ex-bold);
  line-height: 120%; /* 28.8px */
  letter-spacing: 0.3px;

  @media (width >= 768px) {
    text-align: left;
    font-size: 1.75rem;
    letter-spacing: 0.351px;
  }
}

.service-item__text {
  margin-block-start: 7px;
  font-size: 1.875rem;
  font-weight: var(--fw-ex-bold);
  line-height: 110%;
  letter-spacing: 0.3px;

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

  /* 毎日全員 */
  span {
    color: var(--primary);
    line-height: 110%;
  }
}

.service-item__point {
  color: var(--primary);
  font-size: 3.5rem;
  font-weight: var(--fw-ex-bold);
  line-height: 101%; /* 56.56px */
  letter-spacing: 0.3px;

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

  span {
    font-size: 8rem;
    line-height: 101%; /* 129.28px */
    letter-spacing: 0.3px;

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

.service-item__text-sm-2 {
  font-size: 1.25rem;
  line-height: 120%; /* 24px */
  letter-spacing: 0.3px;

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

.service-item__text-2 {
  margin-block-start: 6px;
  font-size: 1.625rem;
  font-weight: var(--fw-ex-bold);
  line-height: 130%; /* 33.8px */
  letter-spacing: 0.3px;

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

.service-item__note {
  margin-block-start: 14px;
  width: min(100%, 262px);
  margin-inline: auto;

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

  p {
    text-align: left;
    color: var(--gray);
    font-size: 0.625rem;
    line-height: 15.4px; /* 154% */
    letter-spacing: 0.3px;

    @media (width >= 768px) {
      text-align: center;
      font-size: 0.8125rem;
    }
  }
}
.service-item-2__text {
  font-size: 1.78125rem;
  font-weight: var(--fw-ex-bold);
  line-height: 130%; /* 37.117px */
  letter-spacing: 0.357px;

  /* を */
  small {
    font-size: 1.25rem;
  }
}

/* おトク */
.service-item-2__text-special {
  color: var(--primary);
}

/* 米印 */
.service-item-2__text-caution {
  font-size: 0.5em;
	vertical-align: top;
  line-height: 1;
  position: relative;
  top: 0.2em;
  margin-left: -0.5em;
  color: #676767;
  font-weight: 400;
}

.service-item-2__box-container {
  margin-block-start: 10px;
  display: grid;

  @media (width >= 768px) {
    margin-block-start: 16px;
    width: min(100%, 840px);
    margin-inline: auto;
    grid-template-columns: 4fr 1fr 4fr;
    column-gap: 1px;
    row-gap: 10px;
    align-items: center;
  }
}

.service-item-2__box {
  margin-inline: auto;
  padding-block-end: 16px;
  border-bottom: 0.5px solid var(--gray);
  border-left: none;

  @media (width >= 768px) {
    padding-block-end: 0;
    border-bottom: none;
  }
}

.service-item-2__box:nth-child(2) {
  padding-block-end: 0;
  border-bottom: none;
  display: none;

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

.service-item-2__box:last-child {
  padding-block-end: 0;
  border-bottom: none;
}

.service-item-2__img {
  width: 100%;

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

.service-item-2__img-border {
  width: 100%;

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

.service-item-2__box-text {
  margin-block-start: 7px;
  p {
    color: var(--gray);
    font-size: 0.625rem;
    line-height: 13.821px; /* 138.205% */
    letter-spacing: 0.269px;

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

.mt-service-item-2 {
  margin-block-start: 7px;
}

.text-left {
  text-align: left;
}

.service-item-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6.14px;
  row-gap: 6.87px;

  @media (width >= 768px) {
    column-gap: 20.6px;
    row-gap: 20px;
  }
}

.service-item-img {
  width: 100%;

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

.service__cta {
  margin-block-start: 60px;
  width: min(calc(100% - 28px * 2), 337px);
  margin-inline: auto;

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

.service__note {
  margin-block-start: 18px;
  margin-inline: auto;
  padding: 0 16px;

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

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

    @media (width >= 768px) {
      /* インデント調整 */
      padding-left: 1.4em;
      text-indent: -1.9em;
    }
  }

  /* 2行目以降のインデント */
  p::first-line {
    @media (width >= 768px) {
      text-indent: -1.5em;
    }
  }
}

.link_underline {
  text-decoration: underline;
}