@charset "UTF-8";

/* ==========================================================================
   Base
   ========================================================================== */
:root {
  --color-text: #524f4d;
  --sp-content-max: 600px; /* SP：各セクションの中身の最大幅 */
}

/*
  SP：画面が広いとき（856pxなど）に中身だけが横に広がりすぎないよう、
  各セクションの中身を最大600pxで中央に置く。背景色・波の装飾は画面いっぱいのまま
  （375px・320pxでは中身が600pxより狭いため、見た目は変わらない）
  ※中身を包む要素がない FV のテキストボックスと CTA は、それぞれのセクションで指定
*/
@media (max-width: 1023px) {
  .problems__inner,
  .benefits__inner,
  .answer-zone__inner,
  .payment__inner,
  .template__inner,
  .flow__inner,
  .faq__inner,
  .cross-sell__inner,
  .legal__inner {
    max-width: var(--sp-content-max);
    margin: 0 auto;
  }
}

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

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
  background: #fff;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   FV
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.fv {
  position: relative;
  overflow-x: clip; /* SPでテンプレ群が右端からはみ出しても横スクロールさせない */
}

/* ロゴ */
.fv__logo {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 25px;
}

.fv__logo img {
  width: 68px;
  height: 32.828px;
}

/* FV本体 */
.fv__main {
  position: relative;
  height: 600px;
  overflow: hidden;
}

/* 背景画像（Figma上で左右反転） */
.fv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scaleX(-1);
}

/*
  SP：375pxでFigmaどおり（幅773.5px）。それより広い画面では、画面を覆うのに必要な分だけ拡大し、
  女性の頭（元画像 y≒565px / 1023px幅）がFV上端から40pxに来るよう配置してテキストボックスより上に収める
*/
.fv__bg-img {
  position: absolute;
  top: calc(40px - max(773.5px, 100vw) * 0.5523);
  left: calc((100% - max(773.5px, 100vw)) * 0.9225);
  width: max(773.5px, 100vw);
  max-width: none;
  height: auto;
}

.fv__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 237, 227, 0.43);
}

/* SP：画面が広いときは、ほかのセクションの中身と同じく最大600pxで中央に置く */
.fv__text-bg {
  position: absolute;
  top: 235px;
  right: max(23px, (100% - var(--sp-content-max)) / 2);
  bottom: 0;
  left: max(23px, (100% - var(--sp-content-max)) / 2);
  border-radius: 30px 30px 0 0;
  background-image: linear-gradient(155.69deg, rgba(255, 237, 227, 0.65) 14.268%, rgba(134, 203, 200, 0.65) 93.183%);
}

.fv__text {
  position: absolute;
  top: -3px;
  left: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fv__title-wrap {
  position: relative;
}

.fv__underline {
  position: absolute;
  top: 92px;
  left: -3px;
  width: 261px;
  height: 21px;
  background: rgba(174, 221, 220, 0.86);
}

.fv__title {
  position: relative;
  font-weight: 700;
  letter-spacing: 2.5px;
  white-space: nowrap;
}

/*
  Figmaとブラウザでは行内の文字の縦位置の決まり方が異なるため、
  line-heightはFigmaの値のまま、topで各行の文字位置をFigmaに合わせる
*/
.fv__title-line {
  position: relative;
  display: block;
}

.fv__title-line--1 {
  top: 11px;
  font-size: 22px;
  line-height: 59px;
}

.fv__title-line--2 {
  top: -1px;
  font-size: 40px;
  line-height: 52px;
}

.fv__title-line--3 {
  top: 3px;
  font-size: 22px;
  line-height: 44px;
}

.fv__lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.8px;
}

/*
  テンプレ群：FV下部に重ね、横方向に自動でループさせる。
  速さは --fv-template-duration で調整（仮の値）。PCは下の1024px以上の指定で別の値にしている
*/
.fv-template-scroll {
  --fv-template-duration: 70s;

  position: absolute;
  top: 523px;
  right: 0;
  left: 0;
  z-index: 2;
  height: 168px;
  overflow: hidden;
}

/*
  1組（A〜C＋右側の余白8px）＝638px。4組並べて半分（2組＝1276px）動かすと元の見た目に戻るため、
  1023pxまでのどの幅でも途切れずに横いっぱいに流れる
*/
.fv-template-scroll__track {
  display: flex;
  width: max-content;
  height: 100%;
  margin-left: 4px;
  animation: fv-template-scroll-x var(--fv-template-duration) linear infinite;
}

.fv-template-scroll__group {
  display: flex;
  flex: none;
  gap: 8px;
  width: 638px;
  height: 100%;
  padding-right: 8px;
}

@keyframes fv-template-scroll-x {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes fv-template-scroll-y {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

.fv-template-scroll__item {
  position: relative;
  flex: 1 0 0;
  overflow: hidden;
}

.fv-template-scroll__item img {
  position: absolute;
  top: -10.86%;
  left: -2.73%;
  width: 106.16%;
  max-width: none;
  height: 127.86%;
}

@media (min-width: 1024px) {
  .fv__logo {
    display: block;
    height: clamp(94px, 2.902vw + 64.286px, 120px);
    padding: clamp(10px, 2.121vw - 11.714px, 29px) 0 0 clamp(40px, 4.59vw - 7px, 81.125px);
  }

  .fv__logo img {
    width: 155.003px;
    height: 74.001px;
  }

  .fv__main {
    height: 800px;
  }

  /*
    どの幅でもFV全体を覆うようcoverで表示する。
    .fv__bgで左右反転しているため、横位置100%＝画面の左端に元画像の右端（人物側）を合わせる。
    縦位置25%は、幅が広く上下がはみ出すときに人物の頭が切れず上半身が収まる位置
  */
  .fv__bg-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 25%;
  }

  .fv__text-bg {
    top: 145px;
    right: 0;
    bottom: auto;
    left: auto;
    width: clamp(927px, 56.473vw + 348.714px, 1433px);
    height: clamp(480px, 7.39vw + 404.322px, 546.218px);
    padding: 99px 77px 78px clamp(28px, 9.487vw - 69.143px, 113px);
    border-radius: 65px 0 0 65px;
    background-image: linear-gradient(89.6deg, rgba(255, 237, 227, 0.65) 0.15368%, rgba(134, 203, 200, 0.65) 143.3%);
  }

  .fv__text {
    position: static;
    width: clamp(675px, 820.714px - 7.589vw, 743px);
    gap: 21px;
  }

  .fv__underline {
    top: clamp(127px, 0.815vw + 118.657px, 134.3px);
    left: 0;
    width: clamp(312px, 36.719vw - 64px, 641px);
    height: clamp(22px, 2.567vw - 4.286px, 45px);
  }

  .fv__title {
    margin-left: clamp(1.1px, 2.109vw - 20.5px, 20px);
    font-weight: 900;
    letter-spacing: 2px;
  }

  .fv__title-line--1 {
    top: clamp(-1.5px, 10.286px - 0.614vw, 4px);
    font-size: clamp(36px, 1.228vw + 23.429px, 47px);
    line-height: 90px;
  }

  .fv__title-line--2 {
    top: clamp(-9.6px, 0.078vw - 10.4px, -8.9px);
    font-size: clamp(48px, 2.455vw + 22.857px, 70px);
    line-height: clamp(73px, 2.344vw + 49px, 94px);
  }

  .fv__title-line--3 {
    top: clamp(-12.9px, 0.815vw - 21.24px, -5.6px);
    font-size: clamp(36px, 1.228vw + 23.429px, 47px);
    line-height: clamp(68px, 1.562vw + 52px, 82px);
  }

  .fv__title-q {
    font-size: 47px;
  }

  .fv__lead {
    font-size: clamp(24px, 1.339vw + 10.286px, 36px);
    letter-spacing: clamp(1.2px, 0.067vw + 0.514px, 1.8px);
  }

  /*
    テンプレ群：ページ最上部〜FV下端を表示範囲とし、画面右端にぴったり付ける。
    テキストボックスも右端基準のため、1920px超の幅でも文字との間隔が保たれる
  */
  .fv-template-scroll {
    --fv-template-duration: 60s;

    top: 0;
    right: 0;
    left: auto;
    z-index: 2;
    width: clamp(398px, 17.969vw + 214px, 559px);
    height: calc(clamp(94px, 2.902vw + 64.286px, 120px) + 800px);
  }

  /*
    上方向に自動でループさせる。
    開始位置は、動きを付ける前の配置（高さ827〜1162pxの並びをFV下端に合わせた位置）と同じにしている。
    ただし上端に隙間があるとループの戻り目で見た目が変わるため、0より下には下げない
  */
  .fv-template-scroll__track {
    position: absolute;
    top: min(0px, calc(clamp(94px, 2.902vw + 64.286px, 120px) + 800px - clamp(827px, 37.388vw + 444.143px, 1162px)));
    left: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-left: 0;
    animation-name: fv-template-scroll-y;
  }

  /* 画像同士を16px重ねる指定を各組の最後の画像にも付け、組のつなぎ目も同じ重なり方にする */
  .fv-template-scroll__group {
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: auto;
    padding-right: 0;
  }

  .fv-template-scroll__item {
    flex: none;
    width: 100%;
    margin-bottom: -16px;
    aspect-ratio: 643 / 542;
  }

  .fv-template-scroll__item img {
    position: absolute;
    top: -9.34%;
    left: 0.11%;
    width: 100%;
    max-width: none;
    height: 118.63%;
  }

  .fv-template-scroll__item--a {
    aspect-ratio: 922 / 609;
  }

  .fv-template-scroll__item--a img {
    top: -14.09%;
    left: 10.7%;
    width: 78.71%;
    height: 119.24%;
  }

  .fv-template-scroll__item--c img {
    top: -9.42%;
  }
}

/* 「視差効果を減らす」設定の場合は動かさず静止表示にする（PC・SP共通） */
@media (prefers-reduced-motion: reduce) {
  .fv-template-scroll__track {
    animation: none;
  }
}

/* ==========================================================================
   Problems
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.problems {
  padding: 80px 23px;
}

.problems__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  color: #615d5b;
  text-align: center;
  white-space: nowrap;
}

.problems__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.46px;
}

/* SP：1行に収まらない幅（375px未満）では、はみ出さずに<wbr>の位置（「・」の後）で改行する */
@media (max-width: 1023px) {
  .problems__title {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.problems__lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

.problems__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* SP：吹き出し＋イラストの横並び（偶数番目はイラストを左に） */
.problems__item {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

.problems__item--1 {
  align-items: center;
}

.problems__item--2,
.problems__item--4 {
  flex-direction: row-reverse;
}

.problems__bubble {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.problems__bubble-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: -19px;
  padding: 11px 10px;
  border-radius: 9px;
  background: #d7f0f0;
}

.problems__bubble-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  text-align: center;
  white-space: nowrap;
}

/* 375px未満：1行が吹き出しに収まらないため、文字を少し小さくして文節の区切りで折り返す */
@media (max-width: 374px) {
  .problems__bubble-body {
    padding: 11px 8px;
  }

  .problems__bubble-text {
    font-size: 13px;
    white-space: normal;
    word-break: auto-phrase;
  }
}

/* 吹き出しのしっぽ（三角形を回転させて配置） */
.problems__tail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36.819px;
  height: 40.06px;
}

.problems__tail-inner {
  position: relative;
  flex: none;
  width: 21px;
  height: 34.2px;
  transform: rotate(145deg);
}

.problems__item--2 .problems__tail-inner,
.problems__item--4 .problems__tail-inner {
  transform: rotate(-145deg);
}

.problems__tail img {
  position: absolute;
  top: 0;
  left: 6.7%;
  width: 18.1865px;
  max-width: none;
  height: 25.65px;
}

/* イラスト（Figmaの切り抜き位置を再現） */
.problems__img {
  position: relative;
  flex: none;
  width: 100px;
  height: 156px;
  overflow: hidden;
}

.problems__img img {
  position: absolute;
  max-width: none;
}

.problems__item--1 .problems__img {
  height: 157px;
}

.problems__item--1 .problems__img img {
  top: 12.1%;
  left: 2.45%;
  width: 90.78%;
  height: 125.77%;
}

.problems__item--2 .problems__img {
  height: 137px;
}

.problems__item--2 .problems__img img {
  top: 3.64%;
  left: -0.24%;
  width: 85.48%;
  height: 135.64%;
}

.problems__item--3 .problems__img img {
  top: 0.02%;
  left: 15.67%;
  width: 84.28%;
  height: 137.33%;
}

.problems__item--4 .problems__img img {
  top: 17.89%;
  left: 0;
  width: 100%;
  height: 97.29%;
}

@media (min-width: 1024px) {
  .problems {
    padding: 120px 0;
  }

  /* 1024pxで944px、1920pxで1400px */
  .problems__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
  }

  .problems__header {
    gap: 0;
  }

  .problems__title {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 3.2px;
  }

  .problems__lead {
    font-size: 36px;
    font-weight: 700;
    line-height: 80px;
    letter-spacing: 3.2px;
  }

  .problems__br-sp {
    display: none;
  }

  /* 1024px〜：2列×2段 */
  .problems__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 71px;
  }

  /* 吹き出しを上、イラストを下端揃えで配置 */
  .problems__item,
  .problems__item--1,
  .problems__item--2,
  .problems__item--4 {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
  }

  .problems__bubble {
    flex: none;
    width: 100%;
  }

  .problems__bubble-body {
    height: 161px;
    padding: 19px 12px;
  }

  .problems__bubble-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 41px;
    letter-spacing: 1px;
  }

  .problems__tail {
    width: 35px;
    height: 57px;
  }

  .problems__tail-inner,
  .problems__item--2 .problems__tail-inner,
  .problems__item--4 .problems__tail-inner {
    width: 35px;
    height: 57px;
    transform: rotate(180deg);
  }

  .problems__tail img {
    width: 30.3109px;
    height: 42.75px;
  }

  .problems__img {
    width: 186px;
    height: 290px;
  }

  .problems__item--1 .problems__img {
    width: 187px;
    height: 292px;
  }

  .problems__item--1 .problems__img img {
    top: 17.3%;
    left: 9.06%;
    width: 78.16%;
    height: 108.54%;
  }

  .problems__item--2 .problems__img {
    height: 290px;
  }

  .problems__item--2 .problems__img img {
    top: 3.19%;
    left: 0.09%;
    width: 85.48%;
    height: 118.83%;
  }
}

/*
  4列横並び（1920pxデザイン）。吹き出しの文言が折り返さずに収まる幅
  （1列あたり約300px）を確保できる1760px以上で切り替える
*/
@media (min-width: 1760px) {
  .problems__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 41.333px;
  }
}

/* ==========================================================================
   Benefits
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.benefits {
  padding: 70px 40px;
  color: var(--color-text);
  background: #f3ffff;
}

.benefits__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.benefits__heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.1px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefits__lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

/* SP：カードを上下に並べる */
.benefits__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 19px;
  padding: 20px 15px;
  border: 2px solid #86cbc8;
  background: #fff;
}

.benefit-card--customer {
  border-color: #f6b088;
}

.benefit-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 10px;
}

.benefit-card__title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 3px solid #86cbc8;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
}

.benefit-card--customer .benefit-card__title {
  border-bottom-color: #f6b088;
}

.benefit-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
}

/* 項目が2行に折り返しても次の項目と区別できるよう、項目の間に余白を空ける */
.benefit-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit-card__list,
.benefit-card__note {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* カードの高さがそろったとき、補足の帯はカードの下端に寄せる */
.benefit-card__note {
  margin-top: auto;
  padding: 10px;
  background: #d7f0f0;
}

.benefit-card--customer .benefit-card__note {
  background: #efcbb6;
}

.benefit-card__note strong {
  font-weight: 700;
}

/* 320px付近：見出しが3行のまま収まるよう、左右の余白と字間を詰める */
@media (max-width: 374px) {
  .benefits {
    padding-right: 24px;
    padding-left: 24px;
  }

  .benefits__heading {
    letter-spacing: 0.4px;
  }
}

@media (min-width: 1024px) {
  .benefits {
    padding: 100px 0;
  }

  /* 1024pxで944px、1920pxで1400px */
  .benefits__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
    gap: 65px;
  }

  .benefits__heading {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 2.4px;
  }

  .benefits__br-sp {
    display: none;
  }

  .benefits__lead {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  /* PC：カードを左右に並べ、高さをそろえる */
  .benefits__cards {
    flex-direction: row;
  }

  .benefit-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px clamp(15px, 1.674vw - 2.143px, 30px);
  }

  .benefit-card__body {
    padding: 0 clamp(10px, 1.116vw - 1.429px, 20px);
  }

  .benefit-card__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1.6px;
  }

  /* 1024pxで40px、1920pxで54px */
  .benefit-card__icon {
    width: clamp(40px, 1.563vw + 24px, 54px);
    height: clamp(40px, 1.563vw + 24px, 54px);
  }

  .benefit-card__list {
    gap: 8px;
  }

  .benefit-card__list,
  .benefit-card__note {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .benefit-card__note {
    padding: 10px clamp(10px, 1.116vw - 1.429px, 20px);
  }
}

/* ==========================================================================
   Answer zone（solution-section ＋ trust-section の背景エリア）
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
/* 背景は白。下端の波（payment__divider）の上側は透明なので、波の上も白になる */
.answer-zone {
  padding: 80px 23px 120px;
  background: #fff;
}

.answer-zone__divider {
  margin-top: 40px;
}

.answer-zone__divider img {
  width: 100%;
  height: 3px;
}

/* ==========================================================================
   Solution
   ========================================================================== */
/* SP：1列（見出し → リード → チェックリスト＋ステップ → 画像） */
.solution {
  display: grid;
  grid-template-areas:
    "heading"
    "lead"
    "check"
    "image";
  grid-template-columns: minmax(0, 1fr);
  color: #615d5b;
}

.solution__heading {
  grid-area: heading;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
}

/* SP：1行に収まらないときは、単語の途中ではなく<wbr>の位置で改行する（trust__headingも同じ） */
@media (max-width: 1023px) {
  .solution__heading,
  .trust__heading {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.solution__lead {
  grid-area: lead;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

.solution__checklist {
  display: flex;
  grid-area: check;
  flex-direction: column;
  gap: 22px;
  margin-top: 37px;
}

.solution__badge {
  padding: 10px 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
  text-align: center;
  white-space: nowrap;
  background: #d7f0f0;
}

.solution__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution__item {
  display: flex;
  gap: 2px;
  align-items: center;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  white-space: nowrap;
}

.solution__item img {
  flex: none;
  width: 28px;
  height: 28px;
}

/* 「あなたがするのは、これだけ」：見出し＋3つのステップ */
.solution__steps-block {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/*
  アイコン（1行目）と文字（2行目）を同じグリッドに置き、
  アイコンを文字と同じ列（1・3・5列目）に入れて真上にそろえる
  ※2つのグループは display: contents で中身だけをグリッドに並べる
*/
/*
  SP：2行に改行したとき、短い文字（「相談する」など）と矢印は1行目にそろえる（上揃え）
  --step-font-size：文字と矢印の位置合わせで共通して使う文字サイズ
*/
.solution__steps {
  --step-font-size: clamp(12px, 7.2vw - 6.6px, 15px);
  display: grid;
  grid-template-columns: auto 22px auto 22px auto;
  row-gap: 10px;
  align-items: start;
  justify-content: start;
}

.solution__steps-icons,
.solution__steps-labels {
  display: contents;
}

.solution__step-icon {
  grid-row: 1;
  justify-self: center;
  width: 52px;
  height: 52px;
}

.solution__step-icon:nth-child(1) { grid-column: 1; }
.solution__step-icon:nth-child(2) { grid-column: 3; }
.solution__step-icon:nth-child(3) { grid-column: 5; }

.solution__steps-labels > * { grid-row: 2; }
.solution__steps-labels > :nth-child(1) { grid-column: 1; }
.solution__steps-labels > :nth-child(2) { grid-column: 2; }
.solution__steps-labels > :nth-child(3) { grid-column: 3; }
.solution__steps-labels > :nth-child(4) { grid-column: 4; }
.solution__steps-labels > :nth-child(5) { grid-column: 5; }

/*
  横に収まらないときは span の区切りで2行に改行（「手元の素材を／送る」「あとは／お任せ」）
  2行にしても収まらない幅（約295px未満）では文字を小さくする（最小12px）
*/
.solution__step-label {
  color: var(--color-text);
  font-size: var(--step-font-size);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

.solution__step-label span {
  display: inline-block;
  white-space: nowrap;
}

/*
  矢印の画像（24px）を列幅22pxに左右1pxずつはみ出させ、375pxで1行に収める
  画像内の「〉」の中心は上から10px。文字1行目の中心（行の高さ1.7の半分＝0.85文字分）に
  そろうように下げる（15pxのとき2.75px）
*/
.solution__step-arrow {
  font-size: var(--step-font-size);
}

.solution__step-arrow img {
  display: block;
  margin: 0 -1px;
  translate: 0 calc(0.85em - 10px);
}

/* SP：画面が広いときに大きくなりすぎないよう、最大400pxで中央に置く（375pxでは329pxで変わらない） */
.solution__img {
  grid-area: image;
  width: 100%;
  max-width: 400px;
  margin: 40px auto 0;
}

.solution__img img {
  width: 100%;
}

/* ==========================================================================
   Trust
   ========================================================================== */
/* SP：1列（見出し → 本文 → 画像） */
.trust {
  display: grid;
  grid-template-areas:
    "heading"
    "body"
    "image";
  grid-template-columns: minmax(0, 1fr);
  margin-top: 40px;
  color: #615d5b;
}

.trust__heading {
  grid-area: heading;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
}

.trust__body {
  grid-area: body;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

/* SP：solution の画像と同じく、最大400pxで中央に置く */
.trust__img {
  grid-area: image;
  width: 100%;
  max-width: 400px;
  margin: 40px auto 0;
}

.trust__img img {
  width: 100%;
}

@media (min-width: 1024px) {
  .answer-zone {
    /* 上の余白は1024px〜1920pxとも100px（benefits-sectionとの間） */
    padding: 100px 0 393px;
  }

  /* 1024pxで944px、1920pxで1400px */
  .answer-zone__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
  }

  .answer-zone__divider {
    margin-top: 100px;
  }

  /* コンテンツ幅いっぱい（1024pxで944px、1920pxで1400px） */
  .answer-zone__divider img {
    height: 5px;
  }

  /* 1024px版：チェックリスト＋ステップと画像を横並び */
  .solution {
    grid-template-areas:
      "heading heading"
      "lead    lead"
      "check   image";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .solution__heading {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 3.2px;
  }

  .solution__br-wide,
  .solution__br-sp {
    display: none;
  }

  .solution__lead {
    margin-top: 31px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .solution__checklist {
    align-self: center;
    gap: 35px;
    margin-top: 57px;
  }

  .solution__badge {
    align-self: flex-start;
    padding: 10px 58px;
    font-size: 32px;
    line-height: 41px;
    letter-spacing: 1.6px;
  }

  .solution__list {
    gap: 15px;
  }

  .solution__item {
    gap: 23px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .solution__item img {
    width: 40px;
    height: 40px;
  }

  /*
    1920pxデザインの値。1024px版のデザインはないが、1024pxでも左の列（約568px）に
    そのまま収まるため、1024〜1920pxは同じ値で表示する（周りのバッジ・チェックリストも固定値）
  */
  .solution__steps-block {
    gap: 35px;
  }

  .solution__steps {
    grid-template-columns: auto 24px auto 24px auto;
    column-gap: 8px;
    row-gap: 24px;
    align-items: center; /* PCは改行しないため、Figmaどおり上下中央でそろえる */
  }

  .solution__step-label {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  /* PC用の画像は高さ54pxの中で「〉」の中心が上から12pxのため、15px下げて文字の中心にそろえる */
  .solution__step-arrow img {
    margin: 0;
    translate: 0 15px;
  }

  /* 1024pxで376px、1920pxで509px */
  .solution__img {
    align-self: center;
    width: clamp(376px, 14.844vw + 223.996px, 509px);
    max-width: none;
    margin: 57px 0 0;
  }

  /* 1024px版：見出しを全幅に置き、その下に画像と本文を下端揃えで横並び */
  .trust {
    grid-template-areas:
      "heading heading"
      "image   body";
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 45px;
    margin-top: 100px;
  }

  .trust__heading {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 3.2px;
  }

  .trust__body {
    align-self: end;
    margin-top: 88px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  /* 1024pxで376px、1920pxで509px */
  .trust__img {
    align-self: end;
    width: clamp(376px, 14.844vw + 223.996px, 509px);
    max-width: none;
    margin: 88px 0 0;
  }
}

/*
  1920px版の並び
  ・solution：見出しを全幅に置き、リード〜ステップの右側に画像を下端揃えで配置
  ・trust：画像を左、見出し＋本文を右に置き、下端揃えで左右に振り分け
  ※切り替え幅（1600px）は仮の値。ブラウザで確認のうえ決定する
*/
@media (min-width: 1600px) {
  .solution {
    grid-template-areas:
      "heading heading"
      "lead    image"
      "check   image";
  }

  .solution__br-wide {
    display: inline;
  }

  .solution__checklist {
    align-self: start;
    margin-top: 83px;
  }

  .solution__img {
    align-self: end;
    margin-top: 0;
  }

  .trust {
    grid-template-areas:
      "image heading"
      "image body";
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .trust__body {
    margin-top: 46px;
  }

  .trust__img {
    margin-top: 0;
  }
}

/* ==========================================================================
   Payment
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.payment {
  position: relative;
  padding: 75px 23px;
  color: #fff;
  background: #34a5a0;
}

/* 波形の区切り：セクション上端から上に突き出して answer-zone に重ねる（1pxは継ぎ目の隙間対策） */
.payment__divider {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  pointer-events: none;
}

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

.payment__inner {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.payment__header {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.payment__heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
}

.payment__lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

.payment__br-pc {
  display: none;
}

/*
  料金サマリー：SPは縦並び（矢印を下向きに回転）
  380px未満では文字・矢印などを画面幅に比例して縮小する（vwの値は「px値 ÷ 380 × 100」）
  字間はFigmaの指定がすべて文字サイズの5%なので 0.05em で指定
*/
.payment__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  white-space: nowrap;
}

.payment__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(7px, 1.842vw);
  font-size: min(32px, 8.421vw);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

/* 行の高さはFigmaの固定値（金額の行ボックスは枠からはみ出して上下中央に置かれる） */
.payment__price--first {
  height: min(49px, 12.895vw);
}

.payment__price--later {
  width: 100%;
  height: min(65px, 17.105vw);
  color: #34a5a0;
  background: #f3ffff;
}

.payment__price-label {
  font-size: min(18px, 4.737vw);
  font-weight: 700;
  line-height: min(35px, 9.211vw);
  letter-spacing: 0.05em;
}

/* 最後の「0」だけ字間が広いFigmaの指定を margin-right で再現 */
.payment__price-num {
  margin-right: 0.06em;
  font-family: "Montserrat", sans-serif;
  font-size: min(40px, 10.526vw);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 「税込」と「円」を縦に並べる。HTMLは「円」→「税込」の順なので column-reverse で「税込」を上にする */
.payment__price-unit {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  font-size: clamp(12px, 3.947vw, 15px);
  letter-spacing: 0.05em;
}

/* 2行の間を詰める（Figma：SP -5px / PC -12px） */
.payment__price-tax {
  margin-bottom: -0.333em;
}

.payment__arrow img {
  width: min(45px, 11.842vw);
  height: min(45px, 11.842vw);
  transform: rotate(90deg);
}

/* 料金の図（画像） */
.payment__figure {
  padding: 31px 15.5px;
  border-radius: 18px;
  background: #f3ffff;
}

/* SP：298pxより拡大せず、収まらない時だけ縮小。余る場合は中央に置く */
.payment__figure img {
  width: 100%;
  max-width: 298px;
  margin: 0 auto;
}

/* 料金に含まれるもの（6枚のカード） */
.payment__items {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 25px 14px;
  border-radius: 20px;
  color: #615d5b;
  background: #f3ffff;
}

/* 改行してよい位置は span の境目だけ（「、」の後・「（」の前） */
.payment__nowrap {
  display: inline-block;
}

.payment__items-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
  text-align: center;
}

.payment__items-title-pc {
  display: none;
}

/* カードと注意書きのまとまり。幅をカードの並びに合わせる（注意書きはSPは左揃え、PCで1行のときは右揃え） */
.payment__items-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/*
  注意書き：文字の大きさ・太さは cta-section のバナー下の注意書き（.cta__banner-note）と同じ
  色は薄い背景の上に置くため、白ではなく見出しと同じグレー
  2行目以降は※（1em＋字間0.05em）の後ろに文字の頭をそろえる
  span の中は、収まらないときだけ<wbr>の位置で改行する
*/
.payment__items-note {
  padding-left: 1.05em;
  font-size: 12px;
  font-weight: 350; /* DemiLight */
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-indent: -1.05em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* inline-block の span には text-indent が引き継がれるため打ち消す */
.payment__items-note .payment__nowrap,
.payment__note .payment__nowrap {
  text-indent: 0;
}

/* SP：2列×3段 */
.payment__items-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カード幅を文字サイズの計算に使う（cqi） */
.payment__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 135px;
  padding: 6px 0;
  border: 3px solid #5db8b4;
  border-radius: 6px;
  background: #fff;
  container-type: inline-size;
}

.payment__item img {
  flex: none;
  width: 52px;
  height: 52px;
}

/*
  一番長い行（「（Top＋2ページ）」）が約9文字分なので、カード幅 ÷ 9 を上限に文字を縮める（最小12px）
  字間はFigmaの指定がすべて文字サイズの5%なので 0.05em で指定
*/
.payment__item-text {
  width: 100%;
  min-height: 3.4em;
  font-size: clamp(12px, 100cqi / 9, 15px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

/*
  SP：幅が足りるときは3列×2段
  文字を15pxのまま収めるにはカード幅141px（文字135px＋枠6px）が必要
  141px × 3 ＋ 間隔24px ＋ ブロック余白28px ＋ セクション余白46px ＝ 521px。スクロールバー分（17px）を見込んで560pxから
*/
@media (min-width: 560px) and (max-width: 1023px) {
  .payment__items-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 一括払いで、もっとお得に */
.payment__plan {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px 15px;
  border-radius: 20px;
  color: var(--color-text);
  background: #f3ffff;
}

.payment__plan-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 182px;
}

.payment__plan-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
}

.payment__plan-body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

/* SP：差額は括弧なし・下線付き */
.payment__diff {
  text-decoration: underline;
}

.payment__diff-paren {
  display: none;
}

/* SP：300pxより拡大せず、収まらない時だけ縮小。余る場合は中央に置く */
.payment__compare img {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* 2行目以降は※（1em＋字間）の後ろに文字の頭をそろえる */
.payment__note {
  padding-left: calc(1em + 0.75px);
  color: #d4ebe9;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  text-indent: calc(-1em - 0.75px);
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.payment__note-space {
  display: none;
}

@media (min-width: 1024px) {
  .payment {
    padding: 78px 0 175px;
  }

  /* 1024pxでは区切りの下端がセクション上端に一致、1920pxでは15px重なる */
  .payment__divider {
    bottom: calc(100% - clamp(1px, 1.674vw - 17.14px, 15px));
  }

  /* 1024pxで944px、1920pxで1404px */
  .payment__inner {
    align-items: center;
    width: clamp(944px, 51.339vw + 418.29px, 1404px);
    margin: 0 auto;
    gap: 60px;
  }

  .payment__header {
    align-items: center;
    text-align: center;
  }

  .payment__heading {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 2.4px;
  }

  .payment__br-sp {
    display: none;
  }

  .payment__br-pc {
    display: inline;
  }

  .payment__lead {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  /*
    横並び。幅は中身に合わせる（1920pxで1128px）
    1024pxでは944pxに収まるよう、余白・文字・矢印を1920pxの値から縮める
    （1024px → 1920px：左右余白 20→57px、間隔 16→26px、文字 28→32px / 42→48px / 21→24px、矢印 50→61px）
  */
  .payment__summary {
    flex-direction: row;
    gap: clamp(16px, 1.116vw + 4.57px, 26px);
    padding: 12px clamp(20px, 4.129vw - 22.29px, 57px);
    border-top-width: 2px;
    border-bottom-width: 2px;
  }

  .payment__price {
    align-items: flex-start;
    gap: 7px;
    height: auto;
    padding-top: 4px;
    font-size: clamp(28px, 0.446vw + 23.43px, 32px);
  }

  .payment__price--later {
    width: auto;
    padding-right: clamp(20px, 1.451vw + 5.14px, 33px);
    padding-left: clamp(20px, 1.451vw + 5.14px, 33px);
  }

  .payment__price-label {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .payment__price-num {
    font-size: clamp(42px, 0.67vw + 35.14px, 48px);
  }

  .payment__price-unit {
    font-size: clamp(21px, 0.335vw + 17.57px, 24px);
  }

  .payment__price-tax {
    margin-bottom: -0.5em;
  }

  .payment__arrow img {
    width: clamp(50px, 1.228vw + 37.43px, 61px);
    height: clamp(50px, 1.228vw + 37.43px, 61px);
    transform: none;
  }

  /* 1024pxで944px、1920pxで1400px（画像の左右余白 15px → 60px） */
  .payment__figure {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    padding: 55px clamp(15px, 5.022vw - 36.43px, 60px) 25px;
    border-radius: 20px;
  }

  .payment__figure img,
  .payment__compare img {
    max-width: none;
  }

  .payment__items {
    gap: 55px;
    width: 100%;
    padding: 31px 15px;
  }

  /*
    1行に収まるときは今まで通りカードの右端にそろえる。
    2行になるとき（1492px未満）は左揃えにして、2行目以降を※の後ろにそろえる
  */
  .payment__items-note {
    align-self: flex-end;
    font-size: 14px;
  }

  /* 1492px未満：カード3つ分の幅（184px × 3 ＋ 間隔35px × 2 ＝ 622px） */
  .payment__items-body {
    width: 622px;
    margin: 0 auto;
  }

  .payment__items-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .payment__items-title-pc {
    display: inline;
  }

  /* 1492px未満：カード（184px）を3つ×2段 */
  .payment__items-list {
    grid-template-columns: repeat(3, 184px);
    gap: 25px 35px;
  }

  .payment__item {
    gap: 10px;
    min-height: 0;
    padding: 15px 0;
  }

  .payment__item-text {
    font-size: clamp(12px, 100cqi / 9, 20px);
    font-weight: 500;
  }

  .payment__plan {
    gap: 11px;
    width: 100%;
    padding: 25px clamp(15px, 5.692vw - 43.29px, 66px);
  }

  .payment__plan-title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1.6px;
  }

  .payment__plan-body {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .payment__diff {
    text-decoration: none;
  }

  .payment__diff-paren {
    display: inline;
  }

  .payment__note {
    width: 100%;
    padding-left: calc(1em + 1px);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-indent: calc(-1em - 1px);
    text-align: right;
  }

  .payment__note-space {
    display: inline;
  }
}

/*
  料金に含まれるもの：6枚を横1列に並べる
  画面が狭くなるとカードの間隔を35px → 10pxに縮める（間隔 = 余った幅 ÷ 5）
  間隔10pxで収まる最小幅（184px × 6 + 10px × 5 = 1154px ＋ 左右余白30px）になるのが1492px。それ未満は3つ×2段
*/
@media (min-width: 1492px) {
  /*
    左右余白は60px。幅が足りなくなったら、まずカードの間隔を35px → 10pxに縮め、
    それでも足りないときに余白を60px → 15pxに縮める（余白 = (枠の幅 − 1154px) ÷ 2）
    ※padding の % は親（.payment__inner）の幅が基準
  */
  .payment__items {
    padding-right: clamp(15px, (100% - 1154px) / 2, 60px);
    padding-left: clamp(15px, (100% - 1154px) / 2, 60px);
  }

  .payment__items-body {
    width: 100%;
  }

  .payment__items-list {
    display: flex;
    justify-content: center;
    gap: clamp(10px, (100% - 1104px) / 5, 35px);
  }

  .payment__item {
    flex: none;
    width: 184px;
  }
}

/* 1024〜1599px：一括払いが縦並びのときは、テキストを中央に置き、本文の1文目と2文目の間で改行しない */
@media (min-width: 1024px) and (max-width: 1599px) {
  .payment__plan-text {
    text-align: center;
  }

  .payment__plan-body .payment__br-pc {
    display: none;
  }
}

/*
  1920px版の並び
  ・一括払い：テキストと比較図を横並びにする（比較図は760pxから縮む）
  ※切り替え幅（1600px）は answer-zone と同じ仮の値。ブラウザで確認のうえ決定する
*/
@media (min-width: 1600px) {
  .payment__plan {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .payment__plan-text {
    flex: none;
    align-self: stretch;
    width: 466px;
  }

  .payment__compare {
    flex: 0 1 760px;
    min-width: 0;
  }
}

/* ==========================================================================
   Template
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.template {
  padding: 50px 23px;
  background: #f3ffff;
}

.template__inner {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.template__header {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.template__heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.template__heading-part {
  display: inline-block;
}

/* SP：見出しやカードの説明文が1行に収まらないときは、単語の途中ではなく<wbr>の位置で改行する */
@media (max-width: 1023px) {
  .template__heading,
  .template-card__desc {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.template__lead,
.template__note {
  color: #615d5b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
}

/* SP 375pxでは字間の分だけ幅をわずかに超えるため、1行目が途中で折り返さないようにする */
.template__nowrap {
  white-space: nowrap;
}

/* 375px未満：1行（約331px）が画面幅に収まらずページ全体が横にはみ出すため、文節の区切りで折り返す */
@media (max-width: 374px) {
  .template__nowrap {
    white-space: normal;
    word-break: auto-phrase;
  }
}

/* SP：カードを縦1列に並べる。上の余白はバッジのはみ出し分 */
.template__list {
  display: flex;
  flex-direction: column;
  gap: 95px;
  margin: 0;
  padding: 71px 0 0;
  list-style: none;
  /* テンプレートから戻ったとき（#template-list）、上にはみ出したTypeバッジが画面の上端にくっつかないよう少し余白を残して止める */
  scroll-margin-top: 20px;
}

.template-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 436px;
  margin: 0 auto;
}

.template-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
  height: 550px;
  padding: 100px 0 20px;
  border: 3px solid #34a5a0;
  border-radius: 32px;
  background: #f3ffff;
}

/* Figmaの切り抜き位置を再現 */
.template-card__preview {
  position: relative;
  flex: none;
  width: 284px;
  height: 239px;
  overflow: hidden;
}

.template-card__preview img {
  position: absolute;
  top: -9.34%;
  left: 0.11%;
  width: 100%;
  max-width: none;
  height: 118.63%;
}

.template-card--a .template-card__preview img {
  top: -14%;
}

.template-card--c .template-card__preview img {
  top: -9.42%;
}

.template-card__info {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  width: 100%;
}

.template-card__title {
  width: 300px;
  margin: 0;
  padding: 5px 0;
  border-bottom: 3px solid #34a5a0;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
  text-align: center;
  background: #fff;
}

/* 375px未満：固定幅（300px）だとカードの枠からはみ出すため、枠の内側に収める */
@media (max-width: 374px) {
  .template-card__title {
    width: calc(100% - 24px);
  }
}

.template-card__desc {
  color: #615d5b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  text-align: center;
}

.template-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  /* 高さは「Click」（32px）の時と同じ66pxを保つ。320pxでもボタン幅（約244px）に1行で収まる文字サイズ */
  padding: 16px;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
  text-decoration: none;
  background: #34a5a0;
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

/* 375px未満：固定幅（300px）だとカードの枠からはみ出すため、タイトルと同じく枠の内側に収める */
@media (max-width: 374px) {
  .template-card__btn {
    width: calc(100% - 24px);
  }
}

/* タップ時は色だけ変える（浮き上がり・影はマウス環境のhoverのみ） */
.template-card__btn:active {
  background-color: #86cbc8;
}

@media (hover: hover) {
  .template-card__btn:hover {
    background-color: #86cbc8;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(20, 70, 68, 0.18);
  }
}

/* バッジ（円）：カード左上に重ねる */
.template-card__badge {
  position: absolute;
  top: -62px;
  left: 16px;
  width: 135px;
  height: 135px;
}

.template-card__badge-bg {
  width: 100%;
  height: 100%;
}

.template-card__badge-label {
  position: absolute;
  top: 19px;
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

.template-card__badge-type {
  height: 44px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 1px;
}

/* 線は高さ0の位置から上に3px描かれるため、ネガティブマージンで重ねる */
.template-card__badge-line {
  width: 76px;
  height: 3px;
  margin-top: -3px;
}

/* 行の高さより枠を低くし、文字を下端揃えにする（Figmaの配置を再現） */
.template-card__badge-letter {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 52px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 1.8px;
}

@media (min-width: 1024px) {
  .template {
    padding: 100px 0;
  }

  /* 1024pxで944px、1920pxで1400px。要素間は1024pxで72px、1920pxで85px */
  .template__inner {
    align-items: center;
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
    gap: clamp(72px, 1.451vw + 57.143px, 85px);
  }

  .template__header {
    align-items: center;
    text-align: center;
    white-space: nowrap;
  }

  /* 1024pxで60px、1920pxで48px */
  .template__heading {
    font-size: clamp(48px, 73.714px - 1.339vw, 60px);
    line-height: 92px;
    letter-spacing: 0.05em;
    white-space: normal;
  }

  /*
    「選んだテンプレートをベースに、」は1024pxで945px（末尾の字間込み）となり
    内側の幅944pxを1pxだけ超えるため、PCではこの2文節の間で改行させない
  */
  .template__heading-group {
    white-space: nowrap;
  }

  .template__br-sp {
    display: none;
  }

  .template__lead,
  .template__note {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .template__note {
    width: 100%;
    text-align: center;
  }

  /* 1024px〜：2列×2段 */
  .template__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 82px 50px;
    width: 100%;
  }

  .template-card {
    max-width: none;
    margin: 0;
  }

  .template-card__body {
    gap: 50px;
    height: auto;
    padding: 110px 0 30px;
  }

  .template-card__title {
    width: 330px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1.6px;
  }

  .template-card__desc {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .template-card--c .template-card__desc {
    letter-spacing: 0.4px;
  }

  .template-card__btn {
    width: 330px;
    padding: 13px 16px;
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .template-card__badge {
    top: -68px;
    left: 48px;
    width: 161px;
    height: 161px;
  }

  .template-card__badge-label {
    top: 28px;
    left: 43px;
  }

  .template-card__badge-type {
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .template-card__badge-letter {
    height: 76px;
    font-size: 48px;
    letter-spacing: 2.4px;
  }
}

/*
  3列横並び（1920pxデザイン）。カード内の説明文が折り返さずに収まる幅
  （1列あたり約400px）を確保できる1760px以上で切り替える
*/
@media (min-width: 1760px) {
  .template__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Flow
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.flow {
  padding: 80px 23px;
}

.flow__inner {
  display: flex;
  flex-direction: column;
  gap: 37px;
}

.flow__heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.flow__heading-part {
  display: inline-block;
}

/* SP：文節1つ分も収まらない幅では、単語の途中ではなく<wbr>の位置で改行する */
@media (max-width: 1023px) {
  .flow__heading {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.flow__br-pc {
  display: none;
}

.flow__list {
  margin: 0;
  padding: 20px 15px;
  list-style: none;
  background: #f3ffff;
}

/*
  SP：左列に番号と縦線、右側に見出し＋アイコン・説明文
  1行目（60px）は番号の横の空き、2行目が見出し行（58px）
*/
.flow-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 60px 58px auto;
  column-gap: 8px;
}

.flow-card__arrow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  grid-column: 1;
  grid-row: 1 / 4;
}

.flow-card__num {
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 2px;
}

.flow-card__line {
  width: 10px;
  height: 140px;
  border-radius: 0 0 10px 10px;
}

.flow-card--01 .flow-card__line {
  background: #d7f0f0;
}

.flow-card--02 .flow-card__line {
  background: #aedddc;
}

.flow-card--03 .flow-card__line {
  background: #86cbc8;
}

.flow-card--04 .flow-card__line {
  background: #5db8b4;
}

.flow-card--05 .flow-card__line {
  background: #34a5a0;
}

.flow-card__title {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
}

.flow-card__icon {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  width: 55px;
  height: 55px;
}

/* 改行位置はPHP側の<br>で指定しているため、自動では折り返さない */
.flow-card__desc {
  grid-column: 2 / 4;
  grid-row: 3;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  white-space: nowrap;
}

/* 375px未満：長い行（「完成したものを確認してもらい、」など）が画面の右端からはみ出し、
   ページ全体が横に広がるため、収まらない行だけ文節の区切りで折り返す */
@media (max-width: 374px) {
  .flow-card__desc {
    white-space: normal;
    word-break: auto-phrase;
  }
}

@media (min-width: 1024px) {
  .flow {
    padding: 120px 0;
  }

  /* 1024pxで944px、1920pxで1400px。見出しと一覧の間は1024pxで85px、1920pxで95px */
  .flow__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
    gap: clamp(85px, 1.116vw + 73.571px, 95px);
  }

  .flow__heading {
    font-size: 48px;
    line-height: 92px;
    letter-spacing: 2.4px;
  }

  .flow__br-pc {
    display: inline;
  }

  .flow__br-sp {
    display: none;
  }

  /* 1024px〜：3列×2段。カード幅272px・カード間45px（1024pxデザインの間隔）で中央に寄せる */
  .flow__list {
    display: grid;
    grid-template-columns: repeat(3, 272px);
    justify-content: center;
    gap: 26px 45px;
    padding: 25px 0;
  }

  .flow-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: center;
    width: 272px;
  }

  .flow-card__icon {
    width: 72px;
    height: 72px;
  }

  .flow-card__arrow {
    flex-direction: row;
    width: 100%;
  }

  .flow-card__num {
    font-size: 48px;
    letter-spacing: 2.4px;
  }

  .flow-card__line {
    flex: 1 0 0;
    width: auto;
    height: 10px;
    border-radius: 0 10px 10px 0;
  }

  .flow-card__title {
    width: 100%;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1.6px;
    text-align: center;
  }

  .flow-card__desc {
    margin-top: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
  }
}

/*
  5列横並び（1920pxデザイン）。カード幅272px×5枚が
  内側の幅（1880pxで約1380px）に収まる1880px以上で切り替える
*/
@media (min-width: 1880px) {
  .flow__list {
    grid-template-columns: repeat(5, 272px);
    justify-content: space-between;
    gap: 0;
  }
}

/* ==========================================================================
   FAQ
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.faq {
  padding: 60px 23px;
  background: #f2f2f2;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.faq__heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1.35px;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.faq__heading-part {
  display: inline-block;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-card__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.faq-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.faq-card__question {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.9px;
  color: #34a5a0;
}

/* SP：質問文は、単語の途中ではなく<wbr>の位置（文節の区切り）で改行する */
@media (max-width: 1023px) {
  .faq-card__question {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.faq-card__answer {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.75px;
  overflow-wrap: anywhere;
}

/* 料金の目安などの箇条書き（折り返した行は「・」の後ろにそろえる） */
.faq-card__answer-list {
  margin: 0.5em 0;
  padding: 0;
  list-style: none;
}

.faq-card__answer-list li {
  position: relative;
  padding-left: 1em;
}

.faq-card__answer-list li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 1024px) {
  .faq {
    padding: 85px 0;
  }

  /* 1024pxで944px、1920pxで1400px（左右余白 40px → 260px） */
  .faq__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
    gap: 85px;
  }

  /* Figmaでは1024pxで64px、1920pxで48px */
  .faq__heading {
    font-size: clamp(48px, -1.786vw + 82.286px, 64px);
    line-height: 92px;
    letter-spacing: 0.05em;
  }

  .faq__list {
    gap: 60px;
  }

  .faq-card__header {
    gap: 25px;
    align-items: center;
  }

  .faq-card__icon {
    width: 64px;
    height: 64px;
  }

  .faq-card__question {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1.6px;
  }

  .faq-card__answer {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

/* ==========================================================================
   Cross-sell
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.cross-sell {
  padding: 80px 23px;
}

.cross-sell__inner {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.cross-sell__content {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.cross-sell__text {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.cross-sell__heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.cross-sell__heading-part {
  display: inline-block;
  white-space: nowrap;
}

.cross-sell__body {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #615d5b;
}

.cross-sell__img {
  position: relative;
  aspect-ratio: 617 / 428;
  overflow: hidden;
}

.cross-sell__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 50%;
}

.cross-sell__tags {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 10px 24px;
  background: #f2f2f2;
}

.cross-sell__tags-label {
  flex-shrink: 0;
  padding: 10px 51px;
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: #fff;
}

.cross-sell__tags-list {
  align-self: stretch;
  padding: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
  .cross-sell {
    padding: 120px 0;
  }

  /* 1024pxで944px、1920pxで1400px */
  .cross-sell__inner {
    width: clamp(944px, 50.893vw + 422.857px, 1400px);
    margin: 0 auto;
    gap: 20px;
  }

  /* 画像幅を補間し、残りをテキスト列にする（1024pxでテキスト列≒見出し1行目の幅） */
  .cross-sell__content {
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
  }

  .cross-sell__text {
    flex: 1 1 0;
    min-width: 0;
    gap: 45px;
  }

  /* Figmaでは1024pxで60px（3行）、1920pxで48px（2行） */
  .cross-sell__heading {
    font-size: clamp(48px, -1.339vw + 73.714px, 60px);
    line-height: 92px;
    text-align: left;
  }

  .cross-sell__body {
    font-size: 20px;
    font-weight: 500;
  }

  /* PCでは1段落目の後が空行 */
  .cross-sell__body-sub {
    margin-top: 1.7em;
  }

  .cross-sell__sp-only {
    display: none;
  }

  /* 1024pxで幅408px（高さはテキストに合わせて伸びる）、1920pxで617×428px */
  .cross-sell__img {
    flex-shrink: 0;
    align-self: stretch;
    width: clamp(408px, 23.326vw + 169.14px, 617px);
    min-height: clamp(283px, 16.183vw + 117.29px, 428px);
    aspect-ratio: auto;
  }

  .cross-sell__img img {
    object-position: 52% 50%;
  }

  /* 1024pxで gap 30px / 左右余白 15px、1920pxで gap 58px / 左右余白 24px */
  .cross-sell__tags {
    flex-direction: row;
    gap: clamp(30px, 3.125vw - 2px, 58px);
    padding: 10px clamp(15px, 1.004vw + 4.714px, 24px);
  }

  .cross-sell__tags-label {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
  }

  .cross-sell__tags-list {
    flex: 1 1 0;
    min-width: 0;
    font-size: 20px;
    font-weight: 500;
  }
}

/* ==========================================================================
   CTA
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.cta {
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: center;
  /* SP：画面が広いときは、ほかのセクションの中身と同じく最大600pxで中央に置く（%は画面幅が基準） */
  padding: 60px max(26px, (100% - var(--sp-content-max)) / 2);
  color: #fff;
  background: #34a5a0;
}

/* Figmaでは見出しが左右余白に少しはみ出しているため、その分だけ幅を広げる */
.cta__heading {
  margin: 0 -10px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.cta__heading-part {
  display: inline-block;
}

.cta__lead {
  align-self: stretch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

/* SP：文節ごとに改行し、最後の段落の前を1行空ける */
.cta__lead-part {
  display: block;
}

.cta__lead-last {
  margin-top: 1.7em;
}

/*
  SP：1行に収まらないときは、単語の途中ではなく<wbr>の位置で改行する
  （「大丈夫で／す。」のように1〜2文字だけが次の行に落ちるのを防ぐ）
*/
@media (max-width: 1023px) {
  .cta__heading,
  .cta__lead {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.cta__banners {
  display: contents;
}

.cta__banner-list {
  display: contents;
}

/* バナーと注意書きのまとまり：注意書きはバナーのすぐ下（間隔2px）に置き、幅をバナーに合わせる */
.cta__banner-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cta__banner {
  width: 100%;
}

.cta__banner-item--monitor {
  width: 297px;
  max-width: 100%;
}

/*
  2つの注意書き共通：バナーの左端にそろえる
  2行目以降は※（1em＋字間0.05em）の後ろに文字の頭をそろえる
*/
.cta__banner-note {
  padding-left: 1.05em;
  font-size: 12px;
  font-weight: 350; /* DemiLight */
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-indent: -1.05em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 改行は「、」「。」「（」の前（span の境目）を優先。span の中は、収まらないときだけ<wbr>の位置で改行する */
.cta__note-part {
  display: inline-block;
  text-indent: 0;
}

/* 紹介バナーとボタンはFigmaで左右余白に3pxはみ出しているため、その分だけ広げる */
.cta__banner-item--referral,
.cta__button {
  width: calc(100% + 6px);
  max-width: 329px;
}

/* ボタンはコンテンツ幅（944px）まで広げる */
.cta__button {
  max-width: 944px;
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.cta__button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 10px 4px;
  color: #fff;
  text-decoration: none;
  background: #fb7c3b;
  border-radius: 5px;
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

/* タップ時は色だけ変える（浮き上がり・影はマウス環境のhoverのみ） */
.cta__button:active {
  background-color: #f6b088;
}

/* 背景が緑のため、影は白っぽく光らないよう暗い緑系にする */
@media (hover: hover) {
  .cta__button:hover {
    background-color: #f6b088;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(10, 50, 48, 0.3);
  }
}

/* LINEアイコン：矢印の右側に配置（SPは40px、PCはFigma通り53px） */
.cta__button-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.cta__button-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.cta__button-part {
  display: inline-block;
}

/* 375px未満：ボタン内の左右に余白を取り、折り返したときの行間を詰める */
@media (max-width: 374px) {
  .cta__button {
    padding: 10px 16px;
  }

  .cta__button-text {
    line-height: 26px;
  }
}

.cta__pc-only {
  display: none;
}

/* 矢印の先端がFigmaの枠（41px）から1.5pxはみ出すため、ネガティブマージンで重ねる */
.cta__button-arrow {
  flex-shrink: 0;
  width: 42.5px;
  height: 22.0919px;
  margin-right: -1.5px;
}

.cta__mail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: color 0.4s ease;
}

.cta__mail-link:active {
  color: #fb7c3b;
}

@media (hover: hover) {
  .cta__mail-link:hover {
    color: #fb7c3b;
  }
}

@media (min-width: 1024px) {
  .cta {
    gap: 62px;
    padding: 140px 40px;
  }

  .cta__heading {
    margin: 0;
    font-size: 48px;
    line-height: 92px;
  }

  .cta__lead {
    font-size: 20px;
    font-weight: 500;
  }

  /* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
  .cta__lead-part {
    display: inline-block;
  }

  .cta__lead-last {
    margin-top: 0;
  }

  /*
    横並びにならない幅（1024〜1412px）ではバナーを縦に並べて中央に置く。
    SPでは display: contents のため、ここでブロックに戻して幅の指定を効かせる。
  */
  .cta__banners {
    display: block;
    width: min(676px, 100%);
  }

  .cta__banner-list {
    display: flex;
    flex-direction: column;
    gap: 62px;
    align-items: center;
  }

  /* バナーと注意書きの間隔は4px */
  .cta__banner-item {
    gap: 4px;
    width: 100%;
  }

  /* 縦並びでも、横並びのときの1枚の幅（モニター595px・紹介676px）を超えない */
  .cta__banner-item--monitor {
    max-width: 595px;
  }

  .cta__banner-item--referral {
    max-width: 676px;
  }

  .cta__banner-note {
    font-size: 14px;
  }

  .cta__actions {
    align-self: center;
  }

  /* 1024pxで944px、1920pxで1128px */
  .cta__button {
    gap: 28px;
    width: clamp(944px, 20.536vw + 733.71px, 1128px);
    max-width: 100%;
    min-height: 92px;
    padding: 19px 70px;
    border-radius: 13px;
  }

  .cta__button-icon {
    width: 53px;
    height: 53px;
  }

  .cta__button-text {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
  }

  .cta__pc-only {
    display: inline;
  }

  .cta__sp-only {
    display: none;
  }

  .cta__mail-link {
    font-size: 20px;
  }
}

/* バナー2枚が横に並ぶ幅（1333px＋左右余白）から横並びに切り替え */
@media (min-width: 1413px) {
  .cta__banners {
    width: 1333px;
  }

  /*
    バナーを1段目、注意書きを2段目に並べるグリッドにする。
    バナーの高さや注意書きの行数が違っても、注意書きの書き始めの高さがそろう。
  */
  .cta__banner-list {
    display: grid;
    grid-template-columns: 595px 676px;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 4px 62px;
  }

  .cta__banner-item {
    display: contents;
  }

  /* バナーの高さに差があるときは下端をそろえ、注意書きとの間隔を4pxに保つ */
  .cta__banner {
    align-self: end;
  }
}

/* ==========================================================================
   Footer
   SP（〜1023px）を基本とし、1024px以上は1920px版の値で固定
   ========================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  padding: 10px 0 20px;
}

.footer__links {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.footer__link {
  padding: 5px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #34a5a0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.footer__link:active {
  color: #949494;
}

@media (hover: hover) {
  .footer__link:hover {
    color: #949494;
  }
}

/* 区切り線：横向き（30×1）のSVGを90度回転させて縦線にする。SPは幅0の中央に配置 */
.footer__divider {
  position: relative;
  flex-shrink: 0;
  width: 0;
  height: 30px;
}

.footer__divider-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  max-width: none;
  height: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.footer__copyright {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #aeaeb2;
  text-align: center;
}

@media (min-width: 1024px) {
  .footer {
    padding: 20px 0 30px;
  }

  /* Figmaでは幅365pxの中で、区切り線の枠がリンク間の残り幅を埋める */
  .footer__links {
    gap: 19px;
    min-width: 365px;
  }

  .footer__link,
  .footer__copyright {
    font-size: 14px;
  }

  .footer__divider {
    flex: 1 0 1px;
  }
}

/* ==========================================================================
   Floating CTA（追従ボタン）
   SP（〜1023px）は画面下の帯、1024px以上はPC用の丸いボタン（固定値）
   表示切り替えは js/script.js で .is-visible を付け外しする
   ========================================================================== */
.floating-cta {
  --floating-cta-offset: 23px; /* 画面の端からの距離 */
  position: fixed;
  right: var(--floating-cta-offset);
  bottom: calc(var(--floating-cta-offset) + env(safe-area-inset-bottom, 0px)); /* iPhoneの画面下のバーに重ならないよう、セーフエリア分を足す */
  left: var(--floating-cta-offset);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  background: #aedddc;
  border: 2px solid #34a5a0;
  border-radius: 5px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.05em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.floating-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* 表示されたときに1回弾む → その後は一定間隔で小さく揺れる
     弾む＝scale、揺れる＝rotate と別のプロパティを動かすので、フェード用のtransformとぶつからない */
  animation:
    floating-cta-bounce var(--floating-cta-bounce-duration) ease-out var(--floating-cta-bounce-delay),
    floating-cta-shake var(--floating-cta-shake-interval) ease-in-out calc(var(--floating-cta-bounce-delay) + var(--floating-cta-bounce-duration)) infinite;
}

/* ▼ アピールの動きの調整値（仮の値。ブラウザで確認して決める） */
.floating-cta {
  --floating-cta-bounce-scale: 1.08;   /* 弾むときの最大の大きさ（1 = 等倍） */
  --floating-cta-bounce-duration: 0.6s; /* 弾む動きの長さ */
  --floating-cta-bounce-delay: 0.2s;    /* 表示し始めてから弾むまでの待ち時間 */
  --floating-cta-shake-angle: 4deg;     /* 揺れる角度 */
  --floating-cta-shake-interval: 8s;    /* 揺れる間隔（揺れ自体は最後の約0.6秒＝8%で動く） */
}
/* ▲ アピールの動きの調整値 */

@keyframes floating-cta-bounce {
  0%,
  100% {
    scale: 1;
  }

  30% {
    scale: var(--floating-cta-bounce-scale);
  }

  55% {
    scale: calc(1 - (var(--floating-cta-bounce-scale) - 1) * 0.5); /* 少し縮む（1.08なら0.96） */
  }

  75% {
    scale: calc(1 + (var(--floating-cta-bounce-scale) - 1) * 0.25); /* 少し戻りすぎる（1.08なら1.02） */
  }
}

/* 間隔の最後の8%だけ揺れて、残りは静止 */
@keyframes floating-cta-shake {
  0%,
  92%,
  100% {
    rotate: 0deg;
  }

  94% {
    rotate: var(--floating-cta-shake-angle);
  }

  96% {
    rotate: calc(var(--floating-cta-shake-angle) * -0.75);
  }

  98% {
    rotate: calc(var(--floating-cta-shake-angle) * 0.4);
  }
}

/* 丸の背景はPCのみ */
.floating-cta__bg,
.floating-cta__inner {
  display: none;
}

/* SP：左に文言（上段：特典／区切り線／下段：相談してみる）、右に矢印 */
.floating-cta__text {
  display: grid;
  grid-template-columns: 151px 45px;
  column-gap: 34px;
  row-gap: 1px;
  align-items: center;
}

.floating-cta__highlight {
  display: block;
  height: 44px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}

.floating-cta__lead {
  margin-right: 8px; /* Figmaでは「今だけ」の後ろに半角スペース2つ分の間 */
  font-size: 15px;
  font-weight: 400;
}

.floating-cta__num {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 600;
}

.floating-cta__unit {
  font-size: 15px;
  font-weight: 400;
}

.floating-cta__free {
  font-size: 23px;
  font-weight: 700;
}

/* Figmaでは高さ0の枠の上側に線が乗る */
.floating-cta__divider {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
}

.floating-cta__divider img {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: none;
}

.floating-cta__label {
  display: block;
  height: 26px;
  font-size: 15px;
  line-height: 1.7;
  text-align: right;
}

/* 矢印は右の列で、文言3段分の高さの中央に置く */
.floating-cta__text > picture {
  display: block;
  grid-column: 2;
  grid-row: 1 / 4;
}

.floating-cta__arrow {
  display: block;
  width: 45px;
}

@media (hover: hover) {
  .floating-cta.is-visible:hover {
    opacity: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta,
  .floating-cta.is-visible {
    transform: none;
    transition: opacity 0.5s ease, visibility 0.5s;
    animation: none; /* 弾む・揺れる動きを付けない */
  }
}

/* SP：帯でページの一番下が隠れないよう、帯の高さ（88px）＋画面下からの距離（23px）＋セーフエリア分の余白を付ける */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(88px + 23px + env(safe-area-inset-bottom, 0px));
  }

  /* SP：帯ごと拡大・回転すると左右の23pxがなくなるため、帯は動かさず中身（文言と矢印）を動かす */
  .floating-cta.is-visible {
    animation: none;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .floating-cta.is-visible .floating-cta__text {
    animation:
      floating-cta-bounce var(--floating-cta-bounce-duration) ease-out var(--floating-cta-bounce-delay),
      floating-cta-shake var(--floating-cta-shake-interval) ease-in-out calc(var(--floating-cta-bounce-delay) + var(--floating-cta-bounce-duration)) infinite;
  }
}

/* PC：丸いボタン */
@media (min-width: 1024px) {
  .floating-cta {
    left: auto;
    bottom: 23px;
    display: block;
    width: 241px;
    height: 241px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .floating-cta__bg,
  .floating-cta__inner {
    position: absolute;
    display: block;
  }

  .floating-cta__bg {
    top: 0;
    left: 0;
    width: 241px;
  }

  .floating-cta__inner {
    top: 11.24px;
    left: 11.24px;
    width: 218.523px;
  }

  .floating-cta__text {
    position: absolute;
    top: 45px;
    left: 19.98px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 201.041px;
    font-weight: 500;
    text-align: center;
  }

  .floating-cta__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    white-space: normal;
  }

  .floating-cta__lead {
    display: block;
    width: 100%;
    height: 34px;
    margin-right: 0;
    font-size: 20px;
    font-weight: inherit;
    line-height: 1.7;
  }

  .floating-cta__offer {
    display: block;
    width: 144px;
    height: 44px;
    line-height: 1.7;
  }

  .floating-cta__num {
    font-size: 36px;
  }

  .floating-cta__unit {
    font-size: 20px;
    font-weight: inherit;
  }

  .floating-cta__free {
    font-size: 36px;
  }

  .floating-cta__label {
    width: 100%;
    height: 24px;
    font-size: 20px;
    text-align: center;
  }

  .floating-cta__arrow {
    width: 38px;
  }
}

/* ==========================================================================
   スクロール表示（js/script.js で .js-reveal / .is-revealed を付与）
   ・既存の transform と競合しないよう、移動は translate プロパティで行う
   ・値は仮。ブラウザで確認して調整する
   ========================================================================== */
.js-reveal {
  --reveal-distance: 24px; /* 移動する距離（仮） */
  --reveal-duration: 0.8s; /* 速さ（仮） */
  opacity: 0;
  translate: 0 var(--reveal-distance);
  transition:
    opacity var(--reveal-duration) ease-out,
    translate var(--reveal-duration) ease-out;
}

.js-reveal.is-revealed {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ==========================================================================
   Subpage Header（下層ページ共通ヘッダー）
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   下の境目は線なし。影を付けたいときは --shadow を付ける
   ========================================================================== */
.subpage-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 25px;
  background: #fdfdfd;
}

.subpage-header--shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 特商法・プライバシーポリシー・利用契約書（body.page-legal）だけ、ロゴを中央に置く */
.page-legal .subpage-header {
  justify-content: center;
}

/* 同じ3ページだけ、ロゴを一回り小さく（約85%）。SP：68px → 58px */
.page-legal .subpage-header__logo img {
  width: 58px;
}

@media (min-width: 1024px) {
  /* PC：1024pxで102px、1920pxで132px（通常は120px → 155px） */
  .page-legal .subpage-header__logo img {
    width: clamp(102px, 3.348vw + 67.714px, 132px);
  }
}

.subpage-header__logo {
  display: block;
  transition: opacity 0.4s ease;
}

.subpage-header__logo:active {
  opacity: 0.6;
}

@media (hover: hover) {
  .subpage-header__logo:hover {
    opacity: 0.6;
  }
}

.subpage-header__logo img {
  width: 68px;
  height: auto;
}

@media (min-width: 1024px) {
  /* 高さ：1024pxで80px、1920pxで100px（仮。ブラウザで見て調整） */
  .subpage-header {
    height: clamp(80px, 2.232vw + 57.143px, 100px);
    padding: 0 clamp(40px, 4.59vw - 7px, 81.125px);
  }

  /* ロゴ幅：1024pxで120px、1920pxで155px（FVと同じ大きさ） */
  .subpage-header__logo img {
    width: clamp(120px, 3.906vw + 80px, 155px);
  }
}

/* ==========================================================================
   Legal（特定商取引法に基づく表記・プライバシーポリシー）
   SP（〜1023px）を基本とし、1024px以上はclamp()で1024〜1920pxを補間
   ========================================================================== */
.legal {
  padding: 50px 23px 80px;
}

.legal__title {
  margin-bottom: 40px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 1行に収まる幅では1行、収まらない幅では文節の区切りで折り返す */
.legal__title-part {
  display: inline-block;
}

.legal__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 12px auto 0;
  background: #34a5a0;
}

/* 「・」付きの箇条書き（2行目以降は文字の頭をそろえる） */
.legal-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-bullets li {
  padding-left: 1em;
  text-indent: -1em;
}

.legal-bullets li::before {
  content: "・";
}

/* 特商法：項目名と内容（SPは縦に積む） */
.legal-list {
  margin: 0;
  border-top: 1px solid #d7f0f0;
}

.legal-list__row {
  padding: 20px 0;
  border-bottom: 1px solid #d7f0f0;
}

.legal-list__term,
.legal-list__desc {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.legal-list__term {
  font-weight: 700;
  color: #34a5a0;
}

.legal-list__desc {
  margin: 6px 0 0;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.legal-list__desc p + p {
  margin-top: 4px;
}

/* ※の注記（2行目以降は※の後ろに文字の頭をそろえる） */
.legal-note {
  font-size: 12px;
  padding-left: 1em;
  text-indent: -1em;
}

/* プライバシーポリシー */
.legal-policy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.legal-policy__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-policy__heading {
  padding-bottom: 8px;
  border-bottom: 1px solid #d7f0f0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #34a5a0;
}

.legal-policy__date {
  text-align: right;
}

/* 「サービスページに戻る」ボタン（サービスLPのテンプレカードのボタンに合わせる） */
.legal__back {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.legal__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  max-width: 100%;
  min-height: 56px;
  padding: 8px 20px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  background: #34a5a0;
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

/* タップ時は色だけ変える（浮き上がり・影はマウス環境のhoverのみ） */
.legal__back-btn:active {
  background-color: #86cbc8;
}

@media (hover: hover) {
  .legal__back-btn:hover {
    background-color: #86cbc8;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(20, 70, 68, 0.18);
  }
}

@media (min-width: 1024px) {
  /* 上余白：1024pxで80px、1920pxで100px／下余白：1024pxで100px、1920pxで140px */
  .legal {
    padding: clamp(80px, 2.232vw + 57.143px, 100px) 0 clamp(100px, 4.464vw + 54.286px, 140px);
  }

  /* 本文の幅：1024pxで880px、1920pxで1000px（1920px以上は1000pxで中央寄せ） */
  .legal__inner {
    width: clamp(880px, 13.393vw + 742.857px, 1000px);
    margin: 0 auto;
  }

  /* 見出し：1024pxで40px、1920pxで48px／下余白：60px → 80px */
  .legal__title {
    margin-bottom: clamp(60px, 2.232vw + 37.143px, 80px);
    font-size: clamp(40px, 0.893vw + 30.857px, 48px);
  }

  .legal__title::after {
    width: 60px;
    height: 4px;
    margin-top: 16px;
  }

  /* 項目名を左、内容を右に並べる。項目名の幅：200px → 260px、間：30px → 50px */
  .legal-list__row {
    display: grid;
    grid-template-columns: clamp(200px, 6.696vw + 131.429px, 260px) 1fr;
    column-gap: clamp(30px, 2.232vw + 7.143px, 50px);
    padding: clamp(24px, 0.67vw + 17.143px, 30px) 0;
  }

  /* 本文の文字：1024pxで16px、1920pxで18px */
  .legal-list__term,
  .legal-list__desc {
    font-size: clamp(16px, 0.223vw + 13.714px, 18px);
  }

  .legal-list__desc {
    margin-top: 0;
  }

  .legal-note {
    font-size: 14px;
  }

  /* 項目の間：48px → 60px */
  .legal-policy {
    gap: clamp(48px, 1.339vw + 34.286px, 60px);
    font-size: clamp(16px, 0.223vw + 13.714px, 18px);
  }

  .legal-policy__section {
    gap: 16px;
  }

  /* 見出し：1024pxで20px、1920pxで24px */
  .legal-policy__heading {
    padding-bottom: 10px;
    font-size: clamp(20px, 0.446vw + 15.429px, 24px);
  }

  /* ボタン上の余白：80px → 100px／幅：300px → 360px／高さ：64px → 72px／文字：18px → 20px */
  .legal__back {
    margin-top: clamp(80px, 2.232vw + 57.143px, 100px);
  }

  .legal__back-btn {
    width: clamp(300px, 6.696vw + 231.429px, 360px);
    min-height: clamp(64px, 0.893vw + 54.857px, 72px);
    border-radius: 15px;
    font-size: clamp(18px, 0.223vw + 15.714px, 20px);
  }
}

/* ==========================================================================
   Legal：利用契約書で追加した部品（見出し・本文・余白は上のLegalをそのまま使う）
   ========================================================================== */
/* 1行に収まる幅では1行、収まらない幅では「、」や文節の区切りで折り返す */
.legal-phrase {
  display: inline-block;
}

/* 条文の番号つきリスト（2行目以降は番号の後ろに文字の頭をそろえる） */
.legal-numbers {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-number;
}

.legal-numbers > li {
  position: relative;
  padding-left: 1.6em;
  counter-increment: legal-number;
}

.legal-numbers > li + li {
  margin-top: 8px;
}

.legal-numbers > li::before {
  content: counter(legal-number) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  color: #34a5a0;
}

/* 番号の中の箇条書き：番号の後ろの文字の頭から、さらに「・」で字下げする */
.legal-numbers .legal-bullets {
  margin-top: 6px;
}

.legal-numbers .legal-bullets li + li {
  margin-top: 4px;
}

/* 表（PC：ふつうの表） */
.legal-table {
  width: 100%;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 14px 20px;
  border: 1px solid #d7f0f0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  font-weight: 700;
  color: #34a5a0;
  background: #f0f9f9;
}

.legal-table td {
  white-space: nowrap;
}

/* 表（SP：1行ずつ縦に積む。320pxでも横にはみ出さない） */
@media (max-width: 1023px) {
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }

  /* 見出し行は画面には出さず、各セルの前に項目名（data-label）を出す */
  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-table {
    border-top: 1px solid #d7f0f0;
  }

  .legal-table tr {
    padding: 14px 0;
    border-bottom: 1px solid #d7f0f0;
  }

  .legal-table th,
  .legal-table td {
    padding: 0;
    border: 0;
  }

  .legal-table tbody th {
    font-weight: 700;
    color: #34a5a0;
  }

  .legal-table td {
    display: grid;
    grid-template-columns: 6em 1fr;
    column-gap: 8px;
    align-items: baseline;
    margin-top: 4px;
    white-space: normal;
  }

  .legal-table td::before {
    content: attr(data-label);
    font-size: 13px;
  }
}

/* 「お申し込みフォームへ」ボタンと「PDFで保存する」リンク */
.legal-contract__actions {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.legal-contract__pdf {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #34a5a0;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.4s ease;
}

.legal-contract__pdf:active {
  opacity: 0.6;
}

@media (hover: hover) {
  .legal-contract__pdf:hover {
    opacity: 0.6;
  }
}

@media (min-width: 1024px) {
  .legal-table th,
  .legal-table td {
    padding: 16px 24px;
  }

  .legal-contract__actions {
    gap: 24px;
  }

  .legal-contract__pdf {
    font-size: 16px;
  }
}

/* ==========================================================================
   Letter（お手紙を受け取った方へ：letter/index.php）
   見出し・余白・下のボタンは上のLegalをそのまま使う
   年配の方がスマホで使う想定のため、入力欄とボタンは大きめにする
   SP（〜1023px）を基本とし、1024px以上は固定値
   ========================================================================== */
/* 入力欄が横に広がりすぎないよう、中身の幅を480pxまでにする */
.letter .legal__inner {
  max-width: 480px;
  margin: 0 auto;
}

/* 1行に収まる幅では1行、収まらない幅では「。」や文節の区切りで折り返す */
.letter__phrase {
  display: inline-block;
}

.letter__lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
}

.letter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
  padding: 28px 20px;
  border-radius: 15px;
  background: #f3ffff;
}

.letter-form__label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #34a5a0;
}

.letter-form__input {
  width: 100%;
  height: 72px;
  padding: 0 16px;
  border: 2px solid #34a5a0;
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-align: center;
  appearance: none;
}

.letter-form__input:focus {
  outline: 3px solid #86cbc8;
  outline-offset: 2px;
}

.letter-form__input[aria-invalid="true"] {
  border-color: #c0392b;
}

.letter-form__error {
  padding: 12px 14px;
  border-radius: 8px;
  background: #fdeeee;
  color: #b0281a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ボタン：色と動きは「サービスページに戻る」（.legal__back-btn）に合わせる */
.letter-form__button {
  width: 100%;
  min-height: 72px;
  padding: 8px 20px;
  border: 0;
  border-radius: 10px;
  background: #34a5a0;
  color: #fff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.letter-form__button:active {
  background-color: #86cbc8;
}

@media (hover: hover) {
  .letter-form__button:hover {
    background-color: #86cbc8;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(20, 70, 68, 0.18);
  }
}

.letter-form__button:focus-visible {
  outline: 3px solid #86cbc8;
  outline-offset: 3px;
}

/* ページの下：名前とサービスページへのボタン */
.letter__sender {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #d7f0f0;
  text-align: center;
}

.letter__sender-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.letter .letter__back {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .letter__lead {
    font-size: 18px;
  }

  .letter-form {
    margin-top: 48px;
    padding: 36px 40px;
  }

  .letter__sender {
    margin-top: 80px;
  }

  .letter .letter__back {
    margin-top: 24px;
  }
}