/* =========================================================
   Page sections
   SP（ベース）は Figma の 310px フレームを 375px に換算した値。
   PC は min-width: 768px で上書きする。
   ========================================================= */

/* =========================================================
   KV
   絶対配置で組んだ「1 枚の絵」。デザイン幅（SP 375 / PC 1200 のコンテナ）未満では
   zoom で比率を保ったまま縮める。--k はデザイン幅ちょうどで 1 になる。
   斜体は Figma の変形行列（skew）をそのまま transform に写している。
   ========================================================= */
.p-kv {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  /* SP の見出しは Figma でもフレーム右端からはみ出して切れている。その横の切り取りは main で行う（_base.css）。
     ここで overflow-x: clip を使うと、iOS Safari では角丸と組み合わさって縦まで切れ、下にはみ出す CTA が隠れる */
  border-radius: 0 0 32px 32px;
  background: linear-gradient(90deg, rgb(245 184 0 / 0.2) 0%, rgb(240 78 35 / 0.2) 50%, rgb(212 0 106 / 0.2) 100%);
}

/* 背景テクスチャ（不透明度 50%）と白い光沢。CTA やスマホ画像は枠の外にはみ出すので、背景だけ角丸で切る */
.p-kv::before,
.p-kv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.p-kv::before {
  /* bg-texture.webp は Figma の画像フィルタ（色温度 +1.0 / 色合い -0.4）を焼き込み済み */
  background: url("../img/bg-texture.webp") center / cover no-repeat;
  opacity: 0.5;
}

.p-kv::after {
  background: linear-gradient(150.2deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.65) 50%, rgb(255 255 255 / 0) 100%);
}

.p-kv__canvas {
  --k: tan(atan2(100cqw, 375px));
  position: relative;
  width: 375px;
  height: 562.75px;
  zoom: var(--k);
}

.p-kv__canvas > * {
  position: absolute;
}

/* --- キャッチ（下にマーカー） --- */
.p-kv__catch {
  top: 69.86px;
  left: 39.39px;
  width: 297.86px;
  height: 12.11px;
  color: var(--color-text-strong);
  font-size: 16.67px;
  font-weight: 800;
  line-height: 12.11px;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.p-kv__catch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10.9px;
  left: 11.54px;
  width: 277.7px;
  height: 6.41px;
  background: rgb(255 112 104 / 0.6);
}

/* --- 見出し --- */
.p-kv__title {
  top: 116.47px;
  left: 8.55px;
  width: 383.73px;
  height: 72.14px;
  color: var(--color-text-strong);
  font-weight: 800;
  white-space: nowrap;
}

.p-kv__title > span {
  position: absolute;
}

.p-kv__t {
  display: block;
  transform: matrix(1, 0, -0.14, 0.9901, 0, 0);
  transform-origin: 0 0;
}

.p-kv__t--1 {
  top: 0;
  left: 41.45px;
  width: 278.48px;
  height: 18.16px;
  font-size: 25.34px;
  line-height: 18.16px;
}

.p-kv__box {
  top: 28.07px;
  width: 96.75px;
  height: 44.07px;
  background: linear-gradient(114.27deg, var(--color-yellow) 0%, var(--color-orange) 50%, var(--color-magenta) 100%);
}

.p-kv__box--1 { left: 0; }
.p-kv__box--2 { left: 117.72px; }

.p-kv__t--box {
  position: absolute;
  top: 8.25px;
  left: 12.19px;
  width: 76.28px;
  height: 27.85px;
  color: var(--color-white);
  font-size: 38.01px;
  line-height: 27.85px;
}

.p-kv__t--to,
.p-kv__t--de {
  top: 47.6px;
  width: 24.22px;
  height: 16.95px;
  font-size: 23.23px;
  line-height: 16.95px;
}

.p-kv__t--to { left: 97.13px; }
.p-kv__t--de { left: 214.32px; }

.p-kv__t--end {
  top: 37.57px;
  left: 239.64px;
  width: 144.09px;
  height: 26.64px;
  font-size: 35.9px;
  line-height: 26.64px;
}

/* --- リード文 --- */
.p-kv__lead {
  top: 206.48px;
  left: 11px;
  width: 353.55px;
  height: 31.48px;
  color: var(--color-text-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 15.74px;
  text-align: center;
  transform: matrix(1, 0, 0.0166, 0.9999, 0, 0);
  transform-origin: 0 0;
}

/* --- バッジ（平行四辺形） --- */
.p-kv__badges {
  top: 359px;
  left: 12px;
  width: 186px;
  height: 41px;
}

.p-kv__badge {
  position: absolute;
  left: 7.87px;
  width: 178.13px;
  height: 54.74px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.6) 0%, rgb(255 255 255 / 0.06) 100%);
  color: var(--color-black);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  transform: matrix(1, 0, -0.1437, 0.9896, 0, 0);
  transform-origin: 0 0;
}

.p-kv__badge--1 { top: -68.76px; }
.p-kv__badge--2 { top: -6.59px; }
.p-kv__badge--3 { top: 55.59px; }

.p-kv__badge > * {
  position: absolute;
  display: block;
}

/* アイコンは親の傾きを打ち消して正立させる */
.p-kv__badge-icon {
  top: 11.68px;
  left: 9.57px;
  width: 31.69px;
  height: 31.72px;
  transform: matrix(1, 0, 0.1361, 0.9896, 0, 0);
  transform-origin: 0 0;
}

/* Figma は縦のトリミング「キャップハイト〜ベースライン」（leadingTrim: CAP_HEIGHT）で、
   ベースラインが枠（--h）の下端に来る。行送りは Figma の値のまま text-box で切り詰め、
   枠の高さとキャップハイトの差を上に空けてベースラインを下端に揃える */
.p-kv__badge-main,
.p-kv__badge-sub {
  height: var(--h);
  padding-top: max(0px, var(--h) - 1cap);
  text-box: trim-both cap alphabetic;
}

.p-kv__badge-main {
  font-size: 17.94px;
}

.p-kv__badge-main em {
  color: var(--color-magenta);
  line-height: 0;               /* 大きい文字で行の高さが伸びないように */
  font-size: 28.52px;
}

.p-kv__badge-main--accent {
  color: var(--color-magenta);
}

.p-kv__badge-sub {
  font-size: 12.71px;
}

.p-kv__badge--1 .p-kv__badge-main { top: 9.35px; left: 49.25px; width: 89.87px; --h: 20.58px; line-height: 26.91px; }
.p-kv__badge--1 .p-kv__badge-sub  { top: 35.71px; left: 48.22px; width: 89.87px; --h: 9.69px; line-height: 19.06px; }
.p-kv__badge--2 .p-kv__badge-main { top: 11.96px; left: 48.33px; width: 76.65px; --h: 13.32px; line-height: 26.91px; }
.p-kv__badge--2 .p-kv__badge-sub  { top: 33.11px; left: 48.33px; width: 76.65px; --h: 9.69px; line-height: 19.06px; }
.p-kv__badge--3 .p-kv__badge-sub  { top: 12.78px; left: 48.22px; width: 115.64px; --h: 7.26px; font-size: 10.46px; line-height: 15.7px; }
.p-kv__badge--3 .p-kv__badge-main { top: 28.64px; left: 48.22px; width: 115.64px; --h: 13.32px; line-height: 26.91px; }


/* --- CTA と吹き出し --- */
.p-kv__cta {
  top: 543px;
  left: 15.69px;
  width: 342px;
  height: 56px;
}

.p-kv__button {
  width: 342px;
}

.p-kv__balloon {
  position: absolute;
  z-index: 1;                   /* Figma でもボタンより前面（ボタン上端に 5.5px 重なる） */
  top: -13.01px;
  left: 31.08px;
  width: 280.91px;
  height: 16.95px;
  color: var(--color-magenta);
  font-size: 11.72px;
  font-weight: 800;
  line-height: 16.95px;
  text-align: center;
  white-space: nowrap;
  /* Figma: 外側に白 2.87px のストローク。paint-order で塗りの下に敷き、線幅は倍にする */
  -webkit-text-stroke: 5.74px var(--color-white);
  paint-order: stroke fill;
}

.p-kv__balloon span {
  font-size: 16.66px;
  line-height: 0;
}

/* --- 紹介ムービー（スマホ画像） --- */
.p-kv__movie {
  top: 254px;
  left: 205px;
  width: 141px;
  height: 250.67px;
  border-radius: 14.75px;
  box-shadow: 0 27.65px 33.18px rgb(0 0 0 / 0.2);
  overflow: hidden;
}

.p-kv__movie::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.76px solid var(--color-black);
  border-radius: inherit;
  pointer-events: none;
}

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

/* SP の Figma には再生ボタンが無い */
.p-kv__play {
  display: none;
}

@media (min-width: 768px) {
  .p-kv {
    border-radius: 0 0 56px 56px;
  }

  /* STRETCH の画像変形（幅 0.776 / 高さ 0.8706・上 12.94% から切り出し）を写す */
  .p-kv::before {
    background-size: calc(100% / 0.7762) calc(100% / 0.8706);
    background-position: 0 calc(-0.1294 * 100% / 0.8706);
  }

  .p-kv::after {
    background-image: linear-gradient(118.9deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.65) 50%, rgb(255 255 255 / 0) 100%);
  }

  /* 1200px のコンテナ。1232px 未満では左右 16px を残して比率で縮める */
  .p-kv__canvas {
    --k: tan(atan2(min(1200px, 100cqw - 32px), 1200px));
    width: 1200px;
    height: 760px;
    margin-inline: auto;
  }

  .p-kv__catch {
    top: 142px;
    left: 0;
    width: 518px;
    height: 21px;
    font-size: 29px;
    line-height: 21px;
    letter-spacing: 2.61px;
  }

  .p-kv__catch::before {
    top: 19px;
    left: 19px;
    width: 481px;
    height: 10px;
  }

  .p-kv__title {
    top: 199.5px;
    left: -4px;
    width: 843.94px;
    height: 159.99px;
  }

  .p-kv__t--1 {
    left: 5.6px;
    width: 610px;
    height: 40px;
    font-size: 55.55px;
    line-height: 40px;
  }

  .p-kv__box {
    top: 63.38px;
    width: 212.1px;
    height: 96.62px;
  }

  .p-kv__box--1 { left: 3.6px; }
  .p-kv__box--2 { left: 261.67px; }

  .p-kv__t--box {
    top: 18.11px;
    left: 26.82px;
    width: 167px;
    height: 61px;
    font-size: 83.32px;
    line-height: 61px;
  }

  .p-kv__t--to,
  .p-kv__t--de {
    top: 106.2px;
    width: 51px;
    height: 37px;
    font-size: 50.92px;
    line-height: 37px;
  }

  .p-kv__t--to { left: 216.53px; }
  .p-kv__t--de { left: 473.44px; }

  .p-kv__t--end {
    top: 84.21px;
    left: 528.94px;
    width: 315px;
    height: 57px;
    font-size: 78.69px;
    line-height: 57px;
  }

  .p-kv__lead {
    top: 383px;
    left: -0.28px;
    width: 595px;
    height: 52px;
    font-size: 1rem;
    line-height: 25.6px;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .p-kv__badges {
    top: 459px;
    left: 0;
    width: 732.55px;
    height: 81.99px;
  }

  .p-kv__badge {
    top: 0;
    height: 82.8px;
    transform: matrix(1, 0, -0.14, 0.9901, 0, 0);
  }

  .p-kv__badge--1 { left: 11.6px; width: 228.28px; }
  .p-kv__badge--2 { left: 249.99px; width: 206.72px; }
  .p-kv__badge--3 { left: 466.83px; width: 265.72px; }

  .p-kv__badge-icon {
    top: 17.64px;
    left: 16px;
    width: 48px;
    height: 48px;
    transform: matrix(1, 0, 0.14, 0.9901, 0, 0);
  }

  .p-kv__badge-main {
    font-size: 27.15px;
  }

  .p-kv__badge-main em {
    font-size: 43.16px;
  }

  .p-kv__badge-sub {
    font-size: 19.23px;
  }

  .p-kv__badge--1 .p-kv__badge-main { top: 14.46px; left: 76.28px; width: 136px; --h: 31px; line-height: 40.72px; }
  .p-kv__badge--1 .p-kv__badge-sub  { top: 54.35px; left: 74.72px; width: 136px; --h: 14px; line-height: 28.84px; }
  .p-kv__badge--2 .p-kv__badge-main { top: 18.4px; left: 74.72px; width: 116px; --h: 20px; line-height: 40.72px; }
  .p-kv__badge--2 .p-kv__badge-sub  { top: 50.4px; left: 74.72px; width: 116px; --h: 14px; line-height: 28.84px; }
  .p-kv__badge--3 .p-kv__badge-sub  { top: 19.4px; left: 74.72px; width: 175px; --h: 12px; font-size: 15.84px; line-height: 23.75px; }
  .p-kv__badge--3 .p-kv__badge-main { top: 43.4px; left: 74.72px; width: 175px; --h: 20px; line-height: 40.72px; }

  .p-kv__cta {
    top: 609px;
    left: 0;
    width: 672px;
    height: 80px;
  }

  .p-kv__button {
    width: 672px;
  }

  .p-kv__balloon {
    top: -27.5px;
    left: 61px;
    width: 550px;
    height: 33px;
    font-size: 23px;
    line-height: 33px;
    -webkit-text-stroke-width: 11.26px;
  }

  .p-kv__balloon span {
    font-size: 32.69px;
  }

  .p-kv__movie {
    top: 126px;
    left: 830px;
    width: 370px;
    height: 658px;
    border-radius: 40px;
    box-shadow: 0 30px 36px rgb(0 0 0 / 0.2);
  }

  /* 画像の上に黒 20% を重ねる（PC のみ） */
  .p-kv__movie::after {
    border-width: 6px;
    background: rgb(0 0 0 / 0.2);
  }

  .p-kv__play {
    position: absolute;
    z-index: 1;
    top: 250px;
    left: 106px;
    display: block;
    width: 157.36px;
    height: 157.36px;
    border: 2.46px solid var(--color-white);
    border-radius: 50%;
    background: rgb(0 0 0 / 0.3);
    color: var(--color-white);
  }

  .p-kv__play-icon {
    position: absolute;
    top: calc(42.86px - 2.46px);
    left: calc(65.55px - 2.46px);
    width: 39.38px;
    height: 58.46px;
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .p-kv__play-text {
    position: absolute;
    top: calc(107.01px - 2.46px);
    left: calc(30.38px - 2.46px);
    width: 100px;
    font-family: var(--font-jp);
    font-size: 15.32px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: nowrap;
  }
}

/* =========================================================
   制作例（動画）
   ========================================================= */
.p-movie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 36.25px;          /* SP の Figma は KV との間に白地 36.25px */
  padding: 40px 0;
}

.p-movie__title {
  padding-inline: var(--gutter);
  color: var(--color-text-movie);
  font-size: 1.6875rem;
  font-weight: 800;
  line-height: 35.115px;
  text-align: center;
}

/* SP は横スクロール。中央のカードを初期表示（main.js） */
.p-movie__track,
.p-plan__track {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;           /* overflow-x を指定すると縦も auto になり、縦スクロールが出てしまう */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-movie__track::-webkit-scrollbar,
.p-plan__track::-webkit-scrollbar {
  display: none;
}

.p-movie__list {
  display: flex;
  gap: 24.5px;
  width: max-content;
  padding-inline: calc(50vw - 114.335px);
}

.p-movie__item {
  flex: none;
  width: 228.67px;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .p-movie {
    gap: 40px;
    margin-top: 0;
    padding: 80px var(--gutter);
  }

  .p-movie__title {
    padding: 0;
    font-size: 3rem;
    line-height: 75px;
  }

  .p-movie__track {
    max-width: var(--container);
    overflow: visible;
  }

  .p-movie__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: auto;
    padding: 0;
  }

  .p-movie__item {
    width: auto;
  }
}

/* =========================================================
   セクション共通の縦積み
   ========================================================= */
.p-problems,
.p-about,
.p-concept,
.p-data,
.p-usecase,
.p-plan,
.p-flow,
.p-faq,
.p-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding: var(--section-pad) var(--gutter);
}

/* =========================================================
   お悩み
   ========================================================= */

.p-problems__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
}

.p-problems__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 23px;           /* 左右は 24px。説明文だけ Figma で行末の字間ぶん（1px）はみ出すので内側を 1px ずつ広げる */
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.05);
  text-align: center;
}

.p-problems__img {
  width: 224px;
  height: 224px;
  object-fit: contain;
}

.p-problems__card-title {
  width: 325.33px;
  max-width: 100%;
  margin-top: 4px;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 30.27px;
  letter-spacing: 0.8px;
}

.p-problems__card-text {
  width: 100%;
  margin-top: 12px;             /* Figma: タイトル枠の下 padding 4 + gap 8 */
  font-size: 0.875rem;
  line-height: 23.005px;
  letter-spacing: 0.8px;
}

/* 「SOUND AD の 広告動画制作で解決します！」 */
.p-problems__solve {
  position: relative;
  flex: none;
  width: 345.61px;
  height: 76.49px;
  margin-top: 12.66px;
  /* SP の Figma でも余白に食い込んでいる。375px 未満では画面幅に比例して縮める */
  zoom: min(1, tan(atan2(100vw, 375px)));
}

.p-problems__solve::after {
  content: "";
  position: absolute;
  top: 73.32px;
  left: 0;
  width: 345px;
  height: 3.17px;
  background: var(--grad);
}

.p-problems__solve-head {
  position: absolute;
  inset: 0;
}

.p-problems__solve-logo {
  position: absolute;
  top: 0;
  left: 95.97px;
  width: 153.04px;
  height: 28.13px;
}

.p-problems__solve-no {
  position: absolute;
  top: 9.49px;
  left: 250.05px;
  width: 16.95px;
  font-size: 16.88px;
  font-weight: 800;
  line-height: 21.79px;
  letter-spacing: 0.05em;
  text-align: center;
}

.p-problems__solve-text {
  position: absolute;
  top: 40.26px;
  left: 0.52px;
  width: 345.08px;
  font-size: 25.32px;
  font-weight: 800;
  line-height: 32.69px;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .p-problems__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  .p-problems__card-title {
    font-size: 1.5rem;
    line-height: 34px;
  }

  .p-problems__card-text {
    line-height: 22px;
  }

  .p-problems__solve {
    width: 654px;
    height: 145px;
    margin-top: 24px;
    zoom: 1;
  }

  .p-problems__solve::after {
    top: 139px;
    width: 654px;
    height: 6px;
  }

  .p-problems__solve-logo {
    left: 181.94px;
    width: 290.12px;
    height: 53.33px;
  }

  .p-problems__solve-no {
    top: 18px;
    left: 474.02px;
    width: 32px;
    font-size: 2rem;
    line-height: 42px;
  }

  .p-problems__solve-text {
    top: 76.33px;
    left: 1px;
    width: 653px;
    font-size: 3rem;
    line-height: 62px;
  }
}

/* =========================================================
   SOUND ADとは
   ========================================================= */
.p-about {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, rgb(245 184 0 / 0.3) 0%, rgb(240 78 35 / 0.3) 50%, rgb(212 0 106 / 0.3) 100%), var(--color-white);
}

.p-about::before,
.p-about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.p-about::before {
  background: url("../img/bg-texture.webp") center / cover no-repeat;
  opacity: 0.4;
}

.p-about::after {
  background: linear-gradient(171.4deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.8) 50%, rgb(255 255 255 / 0) 100%);
}

.p-about__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 1200.88px;
}

.p-about__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  text-align: center;
}

/* SP の Figma は 3・4 枚目だけ内側余白が 32px（1・2 枚目は 24px） */
.p-about__card--wide {
  padding: 32px;
}

.p-about__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.p-about__num {
  /* 行の高さ（16px）より字が大きいので、背景（＝文字色）を上下に広げて字が欠けないようにする */
  margin-block: -10px;
  padding-block: 10px;
  background: var(--grad);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2rem;
  font-weight: 700;
  line-height: 16.95px;
}

.p-about__img {
  flex: none;
  /* SP の Figma は 320px で内枠（279〜295px）より広い。カードの余白（左右 24px）までは食い込ませ、それ以上は縮める */
  width: min(320px, 100% + 48px);
  max-width: none;
  height: auto;
  aspect-ratio: 320 / 212.46;
  object-fit: cover;
}

.p-about__img--fit {
  object-fit: contain;
}

/* STRETCH: 縦 1/1.0826・上に 4.13% の余白（原画像比） */
.p-about__img--crop {
  position: relative;
  display: block;
}

.p-about__img--crop img {
  position: absolute;
  top: calc(0.0413 * 100% / 1.0826);
  left: -0.07%;
  width: calc(100% / 0.9986);
  max-width: none;
  height: calc(100% / 1.0826);
}

.p-about__card-title {
  margin-top: 16px;
  font-size: 1.4375rem;
  font-weight: 900;
  line-height: 33.9px;
}

/* SP の Figma は 3 枚目の見出しが内枠からはみ出したまま 1 行（「…だから、」で改行）。
   375px 未満では折り返しを許す */
@media (min-width: 375px) and (max-width: 767px) {
  .p-about__card-title {
    white-space: nowrap;
  }
}

.p-about__card-text {
  margin-top: 16px;
  color: var(--color-text-sub);
  font-size: 0.875rem;
  line-height: 23.007px;
}

@media (min-width: 768px) {
  .p-about::after {
    background-image: linear-gradient(134.85deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.8) 50%, rgb(255 255 255 / 0) 100%);
  }

  .p-about__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .p-about__card,
  .p-about__card--wide {
    padding: 32px;
  }

  .p-about__num {
    line-height: 16px;
  }

  /* カードが Figma の実寸に満たない幅では、比率を保って縮める */
  .p-about__img {
    width: min(320px, 100%);
    height: auto;
    aspect-ratio: 320 / 212;
  }

  .p-about__card-title {
    margin-top: 24px;
    font-size: 1.875rem;
    line-height: 37.5px;
  }

  .p-about__card-text {
    font-size: 0.9375rem;
    line-height: 23px;
  }
}

/* =========================================================
   コンセプト
   ========================================================= */
.p-concept__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--container);
}

.p-concept__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  /* 内側 4px のグラデーション枠。Figma は枠線をレイアウトに含める（padding 20 = 枠 4 + 16） */
  border: 4px solid transparent;
  border-radius: 16px;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--grad) border-box;
}

.p-concept__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-concept__num {
  color: var(--color-orange);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 15.74px;
}

.p-concept__title {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 30.27px;
  white-space: nowrap;
}

.p-concept__text {
  font-size: 0.875rem;
  line-height: 20.585px;
}

@media (min-width: 768px) {
  .p-concept__list {
    flex-direction: row;
  }

  .p-concept__card {
    flex: 1;
    min-width: 0;
  }

  .p-concept__num {
    line-height: 15px;
  }

  .p-concept__title {
    line-height: 30px;
  }

  .p-concept__text {
    line-height: 21px;
  }
}

/* 4 枚横並びでタイトル（最大 260px）が収まらない幅は 2 列にする */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-concept__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   データ
   ========================================================= */
.p-data__lead {
  font-size: 0.875rem;
  line-height: 27.85px;
  letter-spacing: 0;
}

.p-data__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6.97px;
  width: 100%;
  max-width: var(--container);
}

.p-data__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13.94px;
  padding: 10.45px;
  border-radius: 10.45px;
  background: var(--color-white);
  box-shadow: 0 3.48px 3.92px rgb(0 0 0 / 0.05);
  text-align: center;
}

.p-data__label {
  padding: 6.97px 10.45px;
  border-radius: 999px;
  background: var(--grad);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 7.26px;
  letter-spacing: 0.04em;
}

/* Figma のグラデーションは 540px（SP 235px）の固定幅のテキスト枠にかかっている */
.p-data__num {
  flex: none;
  align-self: stretch;
  margin-block: -8px;           /* 背景を上下に広げてグラデーション文字が欠けないように */
  padding-block: 8px;
  /* Figma のグラデーションは中央寄せの固定幅テキスト枠（SP 235px / PC 540px）にかかっている */
  background: var(--grad) center / 235.23px 100% no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 27px;
  font-weight: 900;
  line-height: 16.95px;
  white-space: nowrap;
}

.p-data__num small {
  font-size: 16.55px;
  line-height: 0;
}

.p-data__text {
  align-self: stretch;
  font-size: 0.5625rem;
  line-height: 13.32px;
}

.p-data__note {
  font-size: 0.5625rem;
  line-height: 13.32px;
  letter-spacing: 0.05em;
  text-align: center;
}

@media (min-width: 768px) {
  .p-data__lead {
    font-size: 1.125rem;
    line-height: 36px;
    letter-spacing: 0.05em;
  }

  .p-data__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .p-data__card {
    gap: 32px;
    padding: 24px 22px;           /* 左右は 24px。説明文が Figma で 2px はみ出している（338px / 336px）ので内側を広げる */
    border-radius: 24px;
    box-shadow: var(--shadow-card);
  }

  .p-data__label {
    padding: 16px 24px;
    font-size: 1.5rem;
    line-height: 16px;
    letter-spacing: 0.05em;
  }

  .p-data__num,
  .p-data__num--range {
    background-size: 540px 100%;
    font-size: 54px;
    line-height: 38px;
  }

  .p-data__num small {
    font-size: 38px;
  }

  .p-data__text {
    font-size: 0.9375rem;
    line-height: 23px;
  }

  .p-data__note {
    font-size: 0.875rem;
    line-height: 21px;
  }
}

/* 3 列ではラベル（最大 248px）と数値が入らない幅。コンテナ 944px + 余白 = 1024px から 3 列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-data__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   活用シーン
   ========================================================= */
.p-usecase__lead {
  font-size: 0.875rem;
  line-height: 27.85px;
}

.p-usecase__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: var(--container);
}

.p-usecase__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  /* Figma は枠線をレイアウトに含める（padding 18 = 枠 2 + 16） */
  border: 2px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 4px 4px 4px rgb(0 0 0 / 0.05);
  text-align: center;
}

/* SP の Figma は説明文（最大 136.8px）が内枠 131px を少しはみ出したまま 1 行。375px 未満は折り返す */
@media (min-width: 375px) {
  .p-usecase__item {
    white-space: nowrap;
  }
}



.p-usecase__en {
  margin-block: -4px;
  padding-block: 4px;
  background: var(--grad);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-right: -0.07em;        /* 行末の字間を打ち消す */
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 16.95px;
  letter-spacing: 0.07em;
}

.p-usecase__ja {
  margin: 3.52px 0 -0.47px;     /* Figma: 高さ 20px の枠に 16.95px の文字が上 3.52px で入る */
  font-size: 0.7569rem;         /* 12.11px */
  font-weight: 700;
  line-height: 16.95px;
}

@media (min-width: 768px) {
  .p-usecase__lead {
    font-size: 1.125rem;
    line-height: 36px;
  }

  .p-usecase__list {
    gap: 16px;
  }

  .p-usecase__en {
    line-height: 16px;
  }

  .p-usecase__ja {
    margin: 4px 0 0;
    font-size: 0.9375rem;
    line-height: 16px;
  }
}

/* 4 列で説明文（最大 169px）が入らない幅は 2 列のまま。コンテナ 944px + 余白 = 1024px から 4 列 */
@media (min-width: 1024px) {
  .p-usecase__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =========================================================
   料金プラン
   SP の通常カードは PC カードの 0.7197 倍（zoom）。中央の AD30 だけ個別の値を持つ。
   ========================================================= */
/* セクションの左右余白を打ち消して画面端まで流す。
   AD30 の外側の枠（6px）と影（下に 25 + 50px）が切れないよう上下に余白を取り、同じ分を負のマージンで相殺する
   （SP はカードが 0.7197 倍なので影は下に約 54px） */
.p-plan__track {
  width: calc(100% + var(--gutter) * 2);
  margin: -6px calc(var(--gutter) * -1) -56px;
  padding-block: 6px 56px;
}

.p-plan__list {
  display: flex;
  align-items: flex-start;
  gap: 28.79px;
  width: max-content;
  padding-inline: calc(50vw - 134.34px);
}

.p-plan__card {
  --pz: 0.7197;
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: 373.33px;
  height: 660.5px;
  padding: 48px 32px 32px;
  border-radius: 16px;
  background: var(--color-white);
  overflow: hidden;
  zoom: var(--pz);
  scroll-snap-align: center;
}

.p-plan__name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* Figma は 374px（カードより 0.67px 広く、はみ出し分は切れている） */
  padding: 6px 0;
  background: var(--color-peach);
  text-align: center;
}

.p-plan__name {
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: 0.08em;
}

.p-plan__name span {
  display: inline-block;
  margin-right: -0.08em;        /* 行末の字間を打ち消す */
  background: var(--grad);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.p-plan__card--featured .p-plan__name span {
  background: none;
  color: var(--color-white);
}

.p-plan__badge {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grad);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: 0.1em;
}

.p-plan__price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 16px;
}

.p-plan__price-now {
  font-family: var(--font-price);
  letter-spacing: -0.01em;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 40px;
}

.p-plan__price-base {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}

.p-plan__price-label {
  font-size: 0.5625rem;
  line-height: 7px;
}

.p-plan__price-was {
  font-family: var(--font-price);
  letter-spacing: -0.01em;
  font-size: 1.125rem;
  line-height: 12px;
}

.p-plan__copy {
  height: 47px;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 23px;
}

.p-plan__items {
  height: 331.5px;
  margin-bottom: 32px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 20px;
}

.p-plan__item {
  position: relative;
  padding: 8px 0 2px 17px;       /* Figma: 行の高さは ✓ の枠 22px（上 2px）で決まる */
}

.p-plan__item:first-child {
  padding-top: 0;
}

.p-plan__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  margin-top: 2px;
}

.p-plan__term {
  height: 32px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
}

.p-plan__button {
  display: block;
  padding: 12px 0;
  border-radius: 999px;
  background: var(--grad);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-align: center;
  transition: filter 0.2s;
}

.p-plan__button:hover {
  filter: brightness(1.08);
}

/* --- AD30（おすすめ） --- */
.p-plan__card--featured {
  width: calc(373.33px + 12px);
  height: 672.5px;
  margin: -6px;
  /* 外側 6px のグラデーション枠。Figma の OUTSIDE ストロークはレイアウトに影響しないので負のマージンで相殺 */
  border: 6px solid transparent;
  border-radius: 22px;
  background: linear-gradient(var(--color-dark), var(--color-dark)) padding-box, var(--grad) border-box;
  box-shadow: 0 25px 50px rgb(0 0 0 / 0.3);
  color: var(--color-white);
  overflow: visible;
}

.p-plan__card--featured .p-plan__name {
  top: -5px;
  height: 28px;
  padding-top: 6px;
  border-radius: 16px 16px 0 0;
  background: var(--grad);
  clip-path: inset(5px 0 0 0 round 16px 16px 0 0);
}

.p-plan__card--featured .p-plan__items {
  height: 341.5px;
}

.p-plan__card--featured .p-plan__item::before {
  color: var(--color-orange);
}

/* SP の値（Figma の値 ÷ 0.7197 を zoom 前の値として書く）。文字の枠は Figma が整数に切り上げた高さ */
@media (max-width: 767px) {
  .p-plan__badge {
    line-height: calc(12.11px / 0.7197);
  }

  .p-plan__price-now {
    line-height: calc(29.06px / 0.7197);
  }

  .p-plan__term {
    line-height: calc(12.11px / 0.7197);
  }

  /* SP の Figma は AD30 のキャッチ（230px）が内枠（222.6px）からはみ出している */
  .p-plan__card--featured .p-plan__copy {
    white-space: nowrap;
  }

  /* SP の AD30 は通常カードと倍率が違う */
  .p-plan__card--featured {
    height: calc(512.23px / 0.7197 + 12px);
  }

  .p-plan__card--featured .p-plan__price-now {
    font-size: calc(42px / 0.7197);
    line-height: calc(38.75px / 0.7197);
  }

  .p-plan__card--featured .p-plan__price {
    padding-bottom: calc(11.51px / 0.7197);
  }

  .p-plan__card--featured .p-plan__price-label {
    font-size: calc(8.59px / 0.7197);
    line-height: calc(6.05px / 0.7197);
  }

  .p-plan__card--featured .p-plan__price-was {
    font-size: calc(17.18px / 0.7197);
    line-height: calc(12.11px / 0.7197);
  }

  .p-plan__card--featured .p-plan__copy {
    font-size: calc(15.38px / 0.7197);
    line-height: calc(16.95px / 0.7197);
  }

  .p-plan__card--featured .p-plan__items {
    height: calc((277.16px - 24.73px) / 0.7197);
    margin-bottom: calc(24.73px / 0.7197);
    font-size: calc(10.82px / 0.7197);
    line-height: calc(15.74px / 0.7197);
  }

  .p-plan__card--featured .p-plan__item {
    padding-top: calc(7.44px / 0.7197);
    padding-bottom: 0;
  }

  .p-plan__card--featured .p-plan__item:first-child {
    padding-top: 0;
    padding-bottom: calc(1.26px / 0.7197);
  }

  .p-plan__card--featured .p-plan__term {
    font-size: calc(8.64px / 0.7197);
    line-height: calc(12.11px / 0.7197);
  }

  .p-plan__card--featured .p-plan__button {
    padding: calc(19.37px / 0.7197) 0;
    font-size: calc(15.74px / 0.7197);
    line-height: calc(10.9px / 0.7197);
  }
}

.p-plan__note {
  max-width: 100%;
  font-size: 0.6813rem;         /* 10.9px */
  line-height: 16.95px;
}

.p-plan__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  padding-top: 24px;
}

.p-plan__option-title {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 23.01px;
  letter-spacing: 0.05em;
  text-align: center;
}

.p-plan__option-list {
  display: grid;
  gap: 8px;
  width: 100%;
}

.p-plan__option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--color-white);
  font-size: 0.875rem;
  line-height: 20.58px;
}

.p-plan__option-item dt {
  font-weight: 900;
}

.p-plan__option-item dd {
  color: var(--color-text-price);
  text-align: right;
}

@media (min-width: 768px) {
  .p-plan__track {
    width: 100%;
    max-width: var(--container);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .p-plan__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: auto;
    padding: 0;
    margin: 0;
  }

  .p-plan__card,
  .p-plan__card--featured {
    --pz: 1;
    width: auto;
  }

  .p-plan__card--featured {
    margin: -6px;
  }

  .p-plan__note {
    font-size: 0.6875rem;
    line-height: 20px;
  }

  .p-plan__option {
    padding-top: 40px;
  }

  .p-plan__option-title {
    font-size: 1.5rem;
    line-height: 36px;
  }

  .p-plan__option-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .p-plan__option-item {
    line-height: 20px;
  }
}

/* 3 列で 1 枚 373px のカードが組めない幅は、SP と同じ横スクロールにする */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-plan__track {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin: -6px calc(var(--gutter) * -1) -76px;
    padding-block: 6px 76px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .p-plan__list {
    display: flex;
    gap: 40px;
    width: max-content;
    padding: 0 calc(50vw - 186.67px);
  }

  .p-plan__card {
    width: 373.33px;
  }

  .p-plan__card--featured {
    width: calc(373.33px + 12px);
  }

  .p-plan__option-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   制作の流れ
   ========================================================= */
.p-flow {
  background: var(--grad-tint-light);
}

.p-flow__list {
  position: relative;
  width: 100%;
  max-width: 800px;
}

/* 縦線：最初の丸の上端から最後の丸の中心付近まで */
.p-flow__list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 51px;
  left: 24px;
  width: 2px;
  background: var(--color-orange);
}

.p-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 24px;
  padding-top: 16px;
}

.p-flow__item:first-child {
  padding-top: 0;
}

.p-flow__num {
  grid-row: 1 / span 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-top: 8px;
  border: 1px solid var(--color-orange);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-orange);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
}

/* 区切り線は右カラムの下端（Figma: 内側ストローク下 1px） */
.p-flow__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 72px;
  height: 1px;
  background: var(--color-divider);
}

.p-flow__en {
  grid-column: 2;
  padding-top: 8px;
  color: var(--color-orange);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 16.95px;
  letter-spacing: 0.1em;
}

.p-flow__title {
  grid-column: 2;
  height: 32px;
  padding-top: 4px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 29.06px;
  white-space: nowrap;
}

.p-flow__text {
  grid-column: 2;
  height: 20px;
  padding-top: 4px;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  line-height: 16px;
}

.p-flow__item > :last-child {
  margin-bottom: 25px;          /* padding-bottom 24 + 区切り線 1 */
}

.p-flow__num:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .p-flow__en {
    line-height: 16px;
  }

  .p-flow__title {
    line-height: 28px;
  }
}

/* =========================================================
   よくある質問
   ========================================================= */
.p-faq {
  background: var(--color-white);
  padding-inline: var(--gutter);
}

.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 880px;
}

/* =========================================================
   お問い合わせ
   ========================================================= */
.p-contact {
  background: var(--grad-tint-contact);
  padding-inline: 15.5px;
}

.p-contact__form {
  width: 100%;
  max-width: 344px;
  padding: 32px 20px;
  border-radius: 8px;
  background: var(--color-white);
}

.p-contact__row {
  padding: 20px 0 20.52px;
  /* Figma の区切り線は内側ストローク（高さに含まない） */
  box-shadow: inset 0 -1px 0 var(--color-line);
}

.p-contact__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-contact__label-text {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 21.79px;
  letter-spacing: 0.05em;
}

.p-contact__field {
  margin-top: 12px;
}

.p-contact__input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 8px 12px;
  border: 1.57px solid var(--color-input-border);
  border-radius: 0;
  background: var(--color-input-bg);
  font-size: 1rem;
  appearance: none;
  transition: box-shadow 0.3s;
}

/* Figma の「お名前」欄に描かれているフォーカス状態（青のグラデーション枠）＋淡いグロー。
   枠は border-image で描く（background で描くと、ブラウザの自動入力で background-image が消され枠が出ない） */
.p-contact__input:focus {
  outline: none;
  border-image: linear-gradient(90deg, var(--color-focus-from), var(--color-focus-to)) 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-focus-to) 50%, transparent);
}

.p-contact__row:has(textarea) .p-contact__label-text {
  letter-spacing: 0;            /* SP の Figma はこの項目だけ字間なし */
}

.p-contact__input--area {
  height: 199.99px;
  resize: vertical;
}

.p-contact__note {
  padding-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  line-height: 16.95px;
}

.p-contact__agree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
}

.p-contact__agree-text {
  width: 100%;
  color: var(--color-black);
  font-size: 0.8125rem;
  line-height: 21.19px;
  text-align: center;
}

.p-contact__agree-text a {
  color: var(--color-link);
  text-decoration: underline;
}

.p-contact__check {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.p-contact__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.57px solid var(--color-input-border);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.p-contact__check input:checked {
  border-color: var(--color-orange);
  background: var(--color-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.p-contact__check-text {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 20.58px;
}

.p-contact__submit {
  display: block;
  width: 303.01px;
  max-width: 100%;
  margin: 16px auto 24px;
  padding: 16px 0;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 4.84px 9.69px rgb(0 0 0 / 0.2);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 900;
  line-height: 24.22px;
  letter-spacing: 0.05em;
  transition: filter 0.2s;
}

.p-contact__submit:hover {
  filter: brightness(1.08);
}

@media (min-width: 768px) {
  .p-contact {
    padding-inline: var(--gutter);
  }

  .p-contact__form {
    max-width: 960px;
    padding: 40px 64px 80px;
  }

  .p-contact__row {
    display: flex;
    gap: 16px;
    padding: 24px 0;
  }

  .p-contact__label {
    flex: none;
    gap: 16px;
    width: 321px;
    height: 50px;
    padding-top: 14px;
  }

  .p-contact__label-text,
  .p-contact__row:has(textarea) .p-contact__label-text {
    width: 270px;
    letter-spacing: 0.05em;
    font-size: 1rem;
    line-height: 36px;
  }

  .p-contact__field {
    flex: 1;
    margin-top: 0;
    padding: 8px;
  }

  .p-contact__input {
    border-width: 2px;
  }

  .p-contact__input--area {
    height: 312px;
  }

  .p-contact__note {
    padding-top: 8px;
    font-size: 0.75rem;
    line-height: 12px;
    letter-spacing: 0.05em;
  }

  .p-contact__agree {
    gap: 16px;
    padding: 24px 0;
    box-shadow: inset 0 -1px 0 var(--color-line);
  }

  .p-contact__agree-text {
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: 0.05em;
  }

  .p-contact__agree-text {
    color: var(--color-text);
  }

  .p-contact__check {
    gap: 9px;
  }

  .p-contact__check input {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  .p-contact__check-text {
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: 0.05em;
  }

  .p-contact__submit {
    width: 320px;
    margin: 24px auto 0;
    padding: 16px 32px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-plan__button,
  .p-contact__submit {
    transition: none;
  }
}