@charset "UTF-8";

/* =========================================================
   font
========================================================= */
/* A1 Gothic StdN Bold — デザインでは料金の数字だけに使われる。
   必要な字形（数字・カンマ・円ほか）だけサブセット化した */
/* @font-face {
  font-family: "A1Gothic";
  src: url("../font/a1gothic-bold-subset.woff2") format("woff2"),
    url("../font/a1gothic-bold-subset.woff") format("woff"),
    url("../font/a1gothic-bold-subset.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
} */


/* =========================================================
   root
========================================================= */
:root {
  /* text */
  --color-text: #000000;
  --color-text-sub: #292d32;
  --color-text-gray: #696969;
  --color-text-body: #4c4b4b;
  --color-text-lead: #696969;
  --color-text-num: #505050;
  --color-heading: #292D32;
  --color-heading-soft: #323232;
  --color-white: #ffffff;

  /* brand */
  --color-primary: #ff002f;
  --color-primary-dark: #b3000d;
  --color-primary-deep: #730012;
  /* What / Service / Flow のラベルはこの赤 */
  --color-red-soft: #ee3948;
  --color-pink: #ff8282;
  --color-pink-light: #ffa5ad;
  --color-pink-pale: #ffd3d7;
  --color-pink-bg: #ffdde3;

  /* accent */
  --color-lime: #ddff02;

  /* surface */
  --color-bg: #fbf7f6;
  --color-bg-gray: #f2f2f2;
  --color-bg-dark: #0e012a;
  --color-bg-deep: #190934;
  --color-bg-dark-2: #170931;
  --color-border: #d5d5d5;
  --color-gray: #c6c6c6;
  --color-gray-light: #e9e9e9;
  /* カードの影（デザインは #eecece / blur22 / y1） */
  --color-shadow: #eecece;

  /* gradient */
  --grad-line: linear-gradient(90deg, #ffffff, #ffa5ad, #ffffff);
  --grad-red: linear-gradient(180deg, #ff8282, #d10026, #730012);

  /* font */
  --font-jp: "Noto Sans JP", "YuGothic", "游ゴシック", "Yu Gothic",
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "MS PGothic", sans-serif;
  /* Montserrat は .tag と Flow の「Step」だけ */
  --font-en: "Montserrat", var(--font-jp);
  /* 料金の数字（+オプション）だけ A1 Gothic */
  --font-a1: "A1Gothic", var(--font-jp);
  /* 大きな数字はすべて JetBrains Mono w800 */
  --font-mono: "JetBrains Mono", var(--font-en);
  /* 各セクションの英語ラベルは Noto Sans 400/30px */
  --font-noto: "Noto Sans", var(--font-jp);
  /* デザインで Hiragino Kaku Gothic（Pro / ProN / Std / StdN）が
     指定されている箇所はこの変数を使う */
  --font-hiragino: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", var(--font-jp);

  /* layout */
  /* 本文カラムは 1092px（デザインの 1089〜1095 に合わせる） */
  --inner: 118rem;
  --radius: 2rem;
  --radius-pill: 6rem;
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

input,
select,
textarea {
  background-color: transparent;
  outline: none;
  border: 0;
}

button {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: 0;
}

ol,
li,
ul {
  list-style: none;
}

a,
a:visited {
  color: inherit;
  display: inline-block;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* =========================================================
   base
========================================================= */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}

@media (max-width: 750px) {
  html {
    font-size: calc(100vw / 75);
  }
}

@media screen and (min-width: 751px) and (max-width: 1280px) {
  html {
    font-size: calc(100vw / 128);
  }
}

body {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-white);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main p {
  line-height: 1.8;
}

@media screen and (min-width: 751px) {
  .onlySP {
    display: none !important;
  }
}

@media screen and (max-width: 750px) {
  .onlyPC {
    display: none !important;
  }
}

/* =========================================================
   common
========================================================= */
#wrapper {
  position: relative;
}

.inner {
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: 2rem;
}

.section {
  position: relative;
  padding-block: 9rem;
  overflow: hidden;
}

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

.align-center {
  align-items: center !important;
}

.grid {
  display: grid;
  gap: 3rem;
}

/* --- heading（全セクション共通） --- */
.heading {
  margin-bottom: 4.5rem;
}

.heading .label {
  display: inline-block;
  /* font-family: var(--font-noto); */
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--color-primary);
  padding-bottom: .6rem;
  border-bottom: 0.3rem solid var(--color-primary);
}

.heading .title {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-heading);
  margin-top: 2rem;
}

.heading .text {
  font-size: 1.6rem;
  margin-top: 0.8rem;
}

.heading-center {
  text-align: center;
}

/* --- 強調（赤字） --- */
em {
  font-style: normal;
  font-weight: bold;
  color: var(--color-primary);
}

.font-normal {
  font-weight: 400;
}

.txt-shadow {
  text-shadow: #ff00a1 0px 0px 2rem, #ff00a1 0px 0px 6rem;
}

.is-dark em {
  color: var(--color-lime);
}

/* --- card --- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius);
  padding: 3rem;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.06);
}

.card .title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.45;
}

.card .text {
  font-size: 1.6rem;
  color: var(--color-text-sub);
  margin-top: 1rem;
}

/* --- button --- */
.button {
  position: relative;
  overflow: hidden;
  min-width: 28rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-primary-dark);
  border: 1px solid var(--color-pink);
  border-radius: var(--radius-pill);
  padding: 1.2rem 1.8rem;
  transition: opacity 0.3s;
}

.button.no-line {
  border: none;
}

.button:visited {
  color: var(--color-white);
}

/* ホバー：135度に傾いた白い光の帯が左から右へ流れる */
.button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(0) skewX(-45deg);
  pointer-events: none;
}

/* ホバーは PC（1024px 以上）だけ */
@media screen and (min-width: 1024px) {
  .button:hover::before {
    animation: shine 0.8s ease-out;
  }
}

@keyframes shine {
  from {
    transform: translateX(0) skewX(-45deg);
  }

  to {
    transform: translateX(450%) skewX(-45deg);
  }
}

/* 2つめのボタン：濃い赤のベタ。FV だけ背景が見えるよう透過にする */
.button-outline {
  background-color: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  min-width: 20rem;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

/* --- tag --- */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-sub);
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.6rem;
}

.tag img {
  width: 2.2rem;
  height: auto;
}

/* --- note --- */
.note {
  font-size: 1.3rem;
  color: var(--color-text-gray);
  line-height: 1.7;
}

/* 注記：見出しは #292d32 w700、本文は #595959 */
.note-legal {
  padding: 3.7rem 0;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #595959;
}

.note-legal dt {
  font-weight: 700;
  color: var(--color-text-sub);
}

.note-legal dd+dt {
  margin-top: 0.4rem;
}

/* --- callout --- */
.callout {
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-primary);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  margin-top: 4rem;
}

.callout .title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.callout .text {
  font-size: 1.8rem;
  margin-top: 1rem;
}

.callout .note {
  font-size: 1.6rem;
  margin-top: .5rem;
}

/* --- link --- */
.link {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  border-bottom: 0.1rem solid currentColor;
  transition: opacity 0.3s;
}

.link:visited {
  color: var(--color-primary-dark);
}

.link:hover {
  opacity: 0.7;
}

/* --- table --- */
.table-wrap {
  border: 0.1rem solid var(--color-gray);
  border-radius: var(--radius);
}

.table {
  background-color: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
}

.table th {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: #292d32;
  padding: 1.8rem 2rem;
  text-align: left;
}

.table td {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1.8rem 2rem;
  border-bottom: 0.1rem solid var(--color-gray-light);
}

.table tr:last-child td {
  border-bottom: 0;
}

.table .is-primary td {
  color: var(--color-primary-dark);
}

/* --- dark section --- */
.is-dark {
  color: var(--color-white);
  background-color: var(--color-bg-dark);
}

.is-dark .heading .label {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.is-dark .card {
  color: var(--color-text);
}

/* =========================================================
   header
========================================================= */
/* 初期は FV の上に重ねて一緒にスクロールさせる。
   FV を通り過ぎてから固定して上から出す（JS が .is-fixed を付ける） */
.header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  height: 11.2rem;
}

.header.is-fixed {
  background: url(../img/bg_header.jpg) no-repeat center center;
  background-size: cover;
  position: fixed;
  animation: header-down 0.35s ease;
  height: 8.2rem;
}

.header.is-fixed .header-inner {
  padding: 1rem 7rem;
}

@keyframes header-down {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header.is-fixed {
    animation: none;
  }
}

.header-inner {
  height: 100%;
  padding: 2rem 7rem;
}

.header .logo {
  display: inline-block;
  width: 15rem;
  height: auto;
}

.header .button {
  min-width: 28.6rem;
  min-height: 5.5rem;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2rem;
}

/* =========================================================
   FV
========================================================= */
.fv {
  position: relative;
  min-height: 68.4rem;
  display: flex;
  align-items: center;
  padding-block: 10.8rem 6rem;
  color: var(--color-white);
  overflow: hidden;
  /* background-color: var(--color-bg-dark); */
}

.fv::before {
  content: '';
  position: absolute;
  min-width: 192rem;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("../img/bg_fv_full.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.fv::after {
  content: '';
  position: absolute;
  width: 128.1rem;
  height: 77.4rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("../img/fv_logo.png");
  background-size: contain;
  background-position: center;
  z-index: 0;
}

.fv .inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.fv-body {
  flex: 0 0 58rem;
}

.fv .title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: .8rem;
}

.fv .text {
  font-size: 1.8rem;
  margin-top: 1.5rem;
}

.fv .buttons {
  margin-top: 2rem;
}

.fv .text em {
  color: var(--color-white);
  font-weight: 700;
  border-bottom: 0.2rem solid var(--color-white);
}

/* デザイン実測：189/172/169 × 44、間隔6px */
.fv .tags {
  gap: 0.6rem;
}

.fv .tag {
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  color: var(--color-gray-light);
  background-color: rgba(50, 16, 37, 0.5);
  border-color: var(--color-gray-light);
}

.fv .tag img {
  width: 2rem;
}

.fv .button-outline {
  background: #3E0307;
  border-color: #B83C45;
  box-shadow: 0px .4rem .4rem rgba(0, 0, 0, 0.25);
}

.fv-card {
  flex: 0 0 49.2rem;
}

/* 対応媒体のロゴ帯：背景を repeat-x で敷き詰めて横に流す
   画像は継ぎ目が出ないよう1周分だけに切り出した 1978x96。
   高さ 4.8rem に合わせると 1周 = 98.9rem */
.logo-partner {
  height: 8.8rem;
  /* background-color: var(--color-bg-dark); */
  background-image: url("../img/logo_partner_loop.png");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: auto 4.8rem;
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  to {
    background-position: -98.9rem center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-partner {
    animation: none;
  }
}

/* =========================================================
   Problems
========================================================= */
.problems {
  background-color: var(--color-white);
}

/* 装飾のライン */
.problems:before,
.whyus:before,
.creditline:before,
.target:before,
.articles:before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Problems は2枚重ね。デザインの座標をそのまま使う
   line_01 = (-320,-108) 2095x1050（PROBLEMS の透かし入り）
   line_02 = (-404, 395) 2024x744 */
.problems:before {
  background-image: url("../img/line_01.png"), url("../img/line_02.png");
  background-position: -32rem -10.8rem, -40.4rem 39.5rem;
  background-size: 209.5rem 105rem, 202.4rem 74.4rem;
}

/* ※ line_02 は本来 Problems の素材。各セクション用の装飾を
   書き出せるまでの仮置き */
.creditline:before,
.target:before,
.articles:before {
  background-image: url("../img/line_02.png");
}

.problems .inner,
.whyus .inner,
.creditline .inner,
.target .inner,
.articles .inner {
  position: relative;
  z-index: 1;
}

/* このセクションだけ本文カラムが 1132px */
.problems {
  padding-block: 5rem;
}

.problems .heading {
  margin-bottom: 2.4rem;
}

.problems-body {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.problems-body::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 9.4rem;
  height: 68.1rem;
  background: url(../img/problems_gradient_01.png) no-repeat center center;
  left: 42rem;
  top: 0rem;
}

/* イラストは本文カラムより左へ 60px はみ出す */
.problems-illust {
  flex: 0 0 52.8rem;
  margin-top: 10.8rem;
  margin-left: -5.3rem;
}

.problems-list {
  position: relative;
  flex: 0 0 64.1rem;
  display: grid;
  gap: 1.6rem;
  margin-right: .6rem;
}

.problems-list .item {
  position: relative;
  display: flex;
  gap: 3.1rem;
  align-content: center;
  min-height: 15rem;
  padding: 1.8rem 2rem 1.4rem 2.4rem;
  box-shadow: 0 0.1rem 2.2rem var(--color-shadow);
}

.problems-list .item .label {
  width: 8.7rem;
  height: 10.4rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 1rem .5rem .5rem 0;
}

/* icon と番号のあいだの斜線 */
.problems-list .item .label::before {
  content: "";
  position: absolute;
  left: -.5rem;
  top: 0;
  width: 8.5rem;
  height: 10.2rem;
  background: url("../img/line_num.png") center / contain no-repeat;
  pointer-events: none;
}


.problems-list .icon img {
  width: 3rem;
  height: auto;
  margin: 0;
}

.problems-list .num {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  margin-top: auto;
  color: var(--color-text-num);
  /* font-family: "Hiragino Kaku Gothic ProN", sans-serif; */
}

.problems-list .body {
  width: calc(100% - 8.7rem - 3.1rem);
}

.problems-solution {
  text-align: center;
  border-radius: 2.4rem;
  margin-top: 5.3rem;
  padding-block: 2.9rem;
  box-shadow: 0 0.1rem 2.2rem var(--color-shadow);
}

.problems-solution .title {
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--color-heading-soft);
}

.problems-solution .title strong {
  color: var(--color-heading);
}

.problems-solution .text {
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-lead);
  margin-top: 0.8rem;
}

.problems-list .title {
  color: var(--color-heading);
}

.problems-list .title em {
  color: var(--color-primary-dark);
}

.problems-list .text {
  font-weight: 500;
  color: #696969;
  line-height: 1.5;
  margin-top: 1.3rem;
}

/* =========================================================
   What
========================================================= */
/* 背景はピンクのラジアルグラデーション（#ffd3d7 a0.5 → #ffffff） */
.what {
  padding-block: 7.2rem 6.5rem;
  background-color: var(--color-white);
  background-image: radial-gradient(140% 110% at 65% 57%,
      rgba(255, 211, 215, 0.5) 5%,
      var(--color-white) 99%);
}

.what .inner {
  position: relative;
  z-index: 2;
}

.txtLarg-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 13.4rem;
  background-image: url(../img/txtBg_what.png);
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: auto 13.4rem;
  animation: marquee 40s linear infinite;
  z-index: 1;
}

.what .label {
  color: var(--color-red-soft);
  border-bottom-color: var(--color-red-soft);
}

.what .heading {
  margin-bottom: 2.2rem;
}

.what .heading .text {
  color: var(--color-text-sub);
}

/* 2枚のカードは高さも開始位置もずれる（左 532、右 558） */
.what-grid {
  grid-template-columns: 54.7rem 55.4rem;
  gap: 3.8rem;
  align-items: start;
  margin-top: 3.5rem;
}

.what-card {
  padding: 0 0 5rem;
  box-shadow: 0 0.1rem 3.1rem rgba(255, 110, 110, 0.4);
}

.what-card:first-child {
  margin-top: 6.1rem;
}

.what-card.is-primary {
  padding-bottom: 7.8rem;
  box-shadow: 0 0.1rem 3.1rem rgba(255, 110, 110, 0.6);
}

/* 見出しは上辺に乗る内寄せのピル */
.what-card .card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 45.9rem;
  min-height: 8.8rem;
  margin: 0 auto 5.7rem;
  padding: 0.8rem 2.4rem;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  background-color: #151174;
  border-radius: 0 0 var(--radius) var(--radius);
}

.what-card.is-primary .card-head {
  min-height: 9rem;
  margin-bottom: 7rem;
  margin-left: 4.4rem;
  color: var(--color-white);
  background-color: var(--color-primary-dark);
}

.what-card .card-head img {
  width: 6.9rem;
  height: auto;
  margin: 0;
}

.what-card .list {
  padding-inline: 2.9rem 2.8rem;
}

.what-card.is-primary .list {
  padding-inline: 3rem 4.6rem;
}

.what-card .item+.item {
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 0.1rem solid var(--color-gray);
}

.what-card.is-primary .item+.item {
  margin-top: 6rem;
  padding-top: 6rem;
  border-top-color: var(--color-text);
}

.what-card .title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-text-sub);
}

.what-card .text {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-gray);
  margin-top: 1rem;
}

/* 右のカードだけ本文が濃い */
.what-card.is-primary .title,
.what-card.is-primary .text {
  color: var(--color-text-sub);
}

.what-card .title .tag {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  border: 0;
  border-radius: 1.2rem;
  padding: 0.6rem 1.5rem;
  margin-top: -.4rem;
}

/* 注記ボックス：枠線なし、左に短い赤いバー */
.what .callout {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 0.1rem 2.2rem var(--color-shadow);
  margin-top: 3.3rem;
  padding: 3.5rem 5.2rem;
  overflow: hidden;
}

.what .callout:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.8rem;
  height: 12.8rem;
  background-color: var(--color-primary-dark);
  box-shadow: 0px 1px 2.2rem #EECECE;
  border-radius: 0 .6rem .6rem 0;
}

.what .callout .title {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.what .callout .text {
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin-top: .5rem;
}

/* =========================================================
   Why us
========================================================= */
.whyus {
  padding-block: 9.2rem 12rem;
  background-color: var(--color-white);
}

/* Problems と同じく line を2枚重ねる */
/* line_01 には PROBLEMS の透かしが焼き込まれているのでこの節では使えない。
   line_02 を2枚（2枚目は左右反転）重ねて流れる線をつくる */
.whyus:before {
  background-image: url(../img/line_03.png);
  background-position: 26rem -71rem;
  background-size: 294.9rem 122.7rem;
}

.whyus:after {
  content: "";
  position: absolute;
  background: url(../img/line_02.png) -31rem 51rem / 202.4rem 74.4rem no-repeat;
  pointer-events: none;
  transform: rotate(8deg);
  top: 9rem;
  width: 100%;
  height: 100%;
}

.whyus .txtLarg {
  position: absolute;
  left: 50%;
  top: -3.2rem;
  font-family: 'Hiragino Kaku Gothic Std';
  font-style: normal;
  font-weight: 800;
  font-size: 16.4rem;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255, 211, 215, 0.35) 33.1%, rgba(255, 211, 215, 0) 84.55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  opacity: 0.5;
  width: 100%;
  max-width: var(--inner);
  margin-inline: auto;
  padding-inline: 2rem;
  transform: translateX(-50%);
}

.whyus .txtLarg-02 {
  bottom: 3rem;
  top: auto;
  right: 0;
  left: 72%;
}

.whyus .heading {
  margin-bottom: 6.2rem;
}

/* 濃い背景でも強調は赤（ライムは Pricing だけ） */
.whyus em {
  color: var(--color-primary);
}

.whyus .heading .text {
  color: var(--color-text-sub);
}

.whyus-grid {
  grid-template-columns: repeat(3, 35.4rem);
  gap: 3rem;
  justify-content: center;
}

.whyus-grid .item {
  min-height: 45rem;
  text-align: center;
  border-radius: 4rem;
  padding: 2.8rem 2.7rem 3.8rem;
  box-shadow: 0 0.1rem 2.2rem var(--color-shadow),
    0 0.1rem 3.2rem rgba(131, 131, 131, 0.5);
}

.whyus-grid .image img {
  width: 18rem;
  height: auto;
}

.whyus-grid .title {
  font-size: 2.2rem;
  line-height: 1.57;
  color: var(--color-heading);
  margin-top: 1.3rem;
}

.whyus-grid .text {
  font-size: 1.6rem;
  line-height: 1.44;
  color: #696969;
  margin-top: 1rem;
}

.cta {
  text-align: center;
  margin-top: 6.8rem;
}

.cta .title {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-heading);
}

.cta .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  color: #696969;
  margin-top: 0;
}

.cta .buttons {
  gap: 1rem;
  margin-top: 2.2rem;
}

.cta .buttons {
  justify-content: center;
}

/* =========================================================
   Service
========================================================= */
/* 背景は右上のピンクから左下の白へ（linear 246deg） */
.service {
  padding-block: 5.6rem 6.8rem;
  background-image: linear-gradient(-45deg, rgba(255, 211, 215, 0.85) 1%, rgba(255, 255, 255, 0.85) 83.75%);
}

.service .inner {
  position: relative;
  z-index: 1;
}

.service .inner::before,
.service .inner::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.service .inner::before {
  width: 89.8rem;
  height: 14.1rem;
  background: url(../img/service_gradient_01.png) no-repeat center center;
  right: -7.4rem;
  top: 4rem;
}

.service .inner::after {
  width: 14.7rem;
  height: 93.7rem;
  background: url(../img/service_gradient_02.png) no-repeat center center;
  left: -1rem;
  top: 11rem;
}

.service .label {
  color: var(--color-red-soft);
  border-bottom-color: var(--color-red-soft);
}

.service .heading {
  margin-bottom: 3.8rem;
}

.service-card {
  padding: 4rem;
  box-shadow: 0 0.1rem 2.2rem var(--color-shadow);
}

.service-card+.service-card {
  margin-top: 1.8rem;
}

.service-card>.title {
  font-size: 2.2rem;
  line-height: 1.75;
  color: var(--color-primary-dark);
}

.service-card>.text {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--color-text-sub);
  margin-top: 1.1rem;
}

/* 枠と白背景は画像側に含まれているので CSS では付けない */
.service-media {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

.service-media img {
  width: 76.3rem;
  height: auto;
  margin: 0;
}

/* picture（SP 画像の切り替え用）が flex の中で左右に寄らないように */
.service-media picture {
  margin: 0;
}

.service-media span {
  flex: none;
  font-size: 1.8rem;
  color: var(--color-text-sub);
}

.service-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2rem;
  margin-top: 1.2rem;
  padding-right: 2.2rem;
}

.service-price {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.service-foot .price {
  display: inline-flex;
  align-items: flex-end;
  min-height: 6rem;
  /* font-family: var(--font-mono); */
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-dark);
  border: 0.1rem solid var(--color-primary-dark);
  border-radius: var(--radius-pill);
  padding: 0 2.5rem .6rem 4rem;
  min-width: 16.5rem;
}

.service-foot .price strong {
  font-size: 5rem;
  font-weight: 800;
}

.service-foot .price span {
  font-size: 2.8rem;
  font-weight: 800;
  margin: auto 0 auto 1.2rem;
}

.service-foot .price-line {
  /* font-family: var(--font-jp); */
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-heading);
  padding: 0 2.2rem;
  align-items: center;
}

.service-foot .price-line strong {
  font-weight: bold;
  color: var(--color-primary-dark);
  transform: translateY(-.4rem);
}

.service-foot .note {
  margin-top: 1rem;
}

/* タグは薄いグレーのベタ */
.service .note {
  font-size: 1.6rem;
  color: var(--color-text-sub);
  margin-top: 1.6rem;
}

.service .tag {
  background-color: rgba(213, 213, 213, 0.5);
  border-color: var(--color-gray);
}

.service-table th {
  background-color: var(--color-primary-dark);
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: left;
  padding: 1.8rem 1.5rem;
  width: calc(100% / 4);
}

.service-table th img {
  display: inline-block;
  vertical-align: -0.4rem;
  width: 2.4rem;
  margin-right: 1rem;
}

.service-table td {
  align-content: start;
  line-height: 1.2;
  padding: 1.4rem 2.1rem 1.8rem 2.6rem;
  color: var(--color-text-sub);
  text-align: left;
  border-right: 0.1rem solid var(--color-gray);
}

.service-table td:last-child {
  border-right: 0;
}

.service-table td strong {
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 1;
}

.service-table td small {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  margin-top: .2rem;
}

.service .table-wrap {
  margin-top: 2.5rem;
}


/* =========================================================
   Credit Line
========================================================= */
/* 背景は白。ぼかしたピンクの円が3つ乗るだけ
   （グレーの矩形は fill opacity 0 なので描画されない） */
.creditline {
  padding-block: 9.7rem 10.8rem;
  background-color: var(--color-white);
  background-image: radial-gradient(70rem 70rem at calc(50% - 56rem) 70.3rem, rgba(255, 211, 215, 0.7), transparent 70%),
    radial-gradient(60rem 60rem at calc(50% + 56rem) 44.8rem, rgba(255, 211, 215, 0.7), transparent 70%)
}

.creditline::before {
  background-size: 200rem 73.1rem;
  background-position: center center;
  inset: auto;
  width: 200rem;
  height: 73.1rem;
  bottom: -1rem;
  left: -50rem;
  transform: rotate(10deg);
}

/* 赤い枠：下は透明、上へ向かって rgba(230,25,37,.2) まで濃くなる */
.creditline:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4.4rem;
  width: 120.4rem;
  height: 76.6rem;
  transform: translateX(-50%);
  border: 1rem solid transparent;
  border-image: linear-gradient(25.08deg,
      rgba(230, 19, 37, 0) -33.61%, rgba(230, 19, 37, 0.2) 70.37%) 1;
  pointer-events: none;
}

.creditline .heading {
  margin-bottom: 3rem;
}

.creditline .heading .title {
  margin-bottom: 1.2rem;
}

.creditline-table th {
  font-size: 1.8rem;
  padding: 1.2rem 3rem;
}

.creditline-table td {
  padding: 1.75rem 3rem;
  border-bottom: 0.1rem solid var(--color-gray);
}

/* バナー：画像を背景にして左側にテキストを重ねる */
.creditline-banner {
  min-height: 21.9rem;
  margin-top: 3.6rem;
  padding: 3.2rem 5rem;
  background: url("../img/creditline-banner.png") center / cover no-repeat #26253e;
  border: 0.1rem solid var(--color-pink);
  border-radius: var(--radius);
  color: var(--color-white);
}

.creditline-banner .badge {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  border-radius: var(--radius-pill);
  padding: 0.8rem 2.6rem;
  margin-top: 1.5rem;
}

.creditline-banner .text {
  font-size: 1.8rem;
  line-height: 1.75;
  margin-top: 1.5rem;
  padding-left: 2.2rem;
  font-weight: bold;
}

/* =========================================================
   Flow
========================================================= */
.flow {
  padding: 5.5rem 0 8rem;
  background: url(../img/bg_flow.png) center / cover no-repeat;
}

.flow-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 5rem;
}

.flow-list .item {
  position: relative;
  padding: 7rem 2.4rem 3rem;
  min-height: 30.2rem;
}

.flow .step {
  position: absolute;
  top: -1rem;
  left: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10.5rem;
  height: 7rem;
  /* font-family: var(--font-en); */
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-white);
  background-image: url("../img/flow-step-ribbon.png");
  background-size: 100% 100%;
}

.flow .step strong {
  font-size: 3.1rem;
  font-weight: 700;
}

.flow-list .title {
  font-size: 2.2rem;
  margin-top: 2.5rem;
  line-height: 1.5;
}

.flow-list .text {
  font-size: 1.6rem;
  margin-top: 0.5rem;
}

/* =========================================================
   Pricing
========================================================= */
.pricing {
  padding-block: 6.3rem 5.7rem;
  background: url("../img/bg_pricing.jpg") center / cover no-repeat #020104;
}

.pricing .heading {
  margin-bottom: 2.2rem;
}

.pricing .heading .title {
  color: var(--color-primary);
}

.pricing .heading .text {
  color: var(--color-gray-light);
}

.pricing-content {
  width: 85%;
  margin: 0 auto;
}

/* 枠と仕切りはピンク。角丸20、枠2px、仕切り3px */
.pricing-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 0.2rem solid var(--color-pink);
  border-radius: var(--radius);
}

.pricing-list .item {
  text-align: center;
  padding: 5rem 2rem;
}

.pricing-list .item:nth-child(odd) {
  border-right: 0.3rem solid var(--color-pink);
}

.pricing-list .item:nth-child(-n + 2) {
  border-bottom: 0.3rem solid var(--color-pink);
}

.pricing-list .title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
}

/* 数字は JetBrains Mono の白。強調は赤 */
.pricing .price {
  /* font-family: var(--font-mono); */
  font-weight: 800;
  color: var(--color-white);
}

.pricing em {
  color: var(--color-primary);
}

.pricing-list .price {
  line-height: 0.86;
  margin-block: 1.3rem;
}

.pricing-list .price strong {
  font-size: 9.2rem;
  font-weight: 800;
}

.pricing-list .price span {
  font-size: 4.4rem;
  font-weight: 800;
}

.pricing-list .price-text {
  /* font-family: var(--font-jp); */
  font-size: 6.2rem;
  font-weight: 800;
  line-height: 1;
  margin-block: 1.8rem 2.5rem;
}

.pricing-list .text {
  font-size: 1.6rem;
  line-height: 1.75;
}

.pricing-free {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2.6rem;
  color: var(--color-white);
  margin-top: 3.7rem;
  padding: 0 2rem 0 13.5rem;
  min-height: 21.9rem;
  background-color: transparent;
}

.pricing-free::before {
  content: '';
  position: absolute;
  width: calc(100% + 11rem);
  height: calc(100% + 9rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/bg_banner_pricing.png") center / 100% 100% no-repeat;
  z-index: -1;
}

.pricing-free .body {
  position: relative;
  flex: 0 0 62.8rem;
}

.pricing-free .buttons .button {
  min-width: 35.8rem;
}

.pricing-free .buttons .button-outline {
  min-width: 22rem;
}

.pricing-free .buttons {
  margin-top: 1.1rem;
}

.pricing-free .price {
  position: relative;
  flex: none;
  line-height: 1;
  padding-bottom: 2rem;
}

.pricing-free .price strong {
  font-size: 17.4rem;
  font-weight: 800;
}

.pricing-free .price span {
  font-size: 6rem;
  font-weight: 800;
}

/* 2つめのボタンだけ暗い赤 */
.pricing .button-outline {
  background-color: #3e0307;
  border-color: #b83c45;
  border-width: 0.1rem;
}

.pricing-free .text {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-white);
  margin: 0;
  line-height: calc(40 / 26);
  letter-spacing: 0.08em;
}

.pricing-option {
  max-width: 74rem;
  margin-top: 3rem;
}

.pricing-option .title {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
}

.pricing-option .text {
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-gray-light);
  margin-top: 1rem;
}


/* +オプション の詳細カード（デザインの Group 34009）
   白いカードの左側 32〜598px に赤いパネルが乗る */
.pricing-detail {
  position: relative;
  display: flex;
  min-height: 28rem;
  background-color: var(--color-white);
  border-radius: var(--radius);
  margin-top: 3.3rem;
}

.pricing-detail:before {
  content: "";
  position: absolute;
  left: 3.4rem;
  top: 0;
  width: 51.2rem;
  height: 100%;
  background-color: var(--color-primary-dark);
}

.pricing-detail .body {
  position: relative;
  flex: 0 0 54.8rem;
  color: var(--color-white);
  padding: 3.2rem 0 0 7.2rem;
}

.pricing-detail .body .title {
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.pricing-detail .tags {
  gap: 1rem;
  max-width: 47.5rem;
  margin-top: 1.6rem;
}

.pricing-detail .tag {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary-dark);
  background-color: var(--color-white);
  border: 0;
  padding: 0.8rem 1.5rem;
}

.pricing-detail .note {
  font-size: 1.6rem;
  color: var(--color-white);
  margin-top: 1.6rem;
}

/* 右の料金：初期 / 月額 の2段、あいだに赤い罫線 */
.pricing-detail-price {
  position: relative;
  flex: 1 1 auto;
  align-self: center;
  padding: 0rem 3rem 1rem 5.2rem;
  color: var(--color-text-sub);
}

.pricing-detail-price .item+.item {
  border-top: 0.1rem solid var(--color-primary-dark);
  margin-top: 1rem;
  padding-top: 1rem;
}

.pricing-detail-price dt {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.75;
}

.pricing-detail-price dd {
  /* font-family: var(--font-a1); */
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.pricing-detail-price strong {
  font-size: 6.8rem;
  font-weight: 600;
  letter-spacing: -0.05em;
}

.pricing-detail-price span {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text-sub);
}

/* =========================================================
   Benefits
========================================================= */
.benefits {
  padding-block: 6rem 5.7rem;
  background: linear-gradient(180deg, #FFE4E9 33.65%, #FFFFFF 100%);
}

.benefits .heading {
  margin-bottom: 3rem;
}

/* 見出しは赤がベース、前半だけ濃いグレー */
.benefits-list {
  display: grid;
  gap: 2rem;
}

.benefits-list .item {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  padding: 4rem 3.8rem 3.6rem;
  border: 0.1rem solid #e3e2e2;
  box-shadow: 0 0.1rem 1rem #ecdbdd;
}

/* 番号はカードごとに違う淡いグラデーション、30%の濃さ */
.benefits-list .num {
  position: absolute;
  top: 0;
  right: 1.3rem;
  display: grid;
  place-items: center;
  width: 12rem;
  height: 15rem;
  /* font-family: var(--font-mono); */
  font-size: 9.8rem;
  font-weight: 800;
  line-height: 1.32;
  opacity: 0.3;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

.benefits-list .item:nth-child(1) .num {
  background-image: linear-gradient(180deg, #faffdf, #dfdfdf);
}

.benefits-list .item:nth-child(2) .num,
.benefits-list .item:nth-child(4) .num {
  background-image: linear-gradient(180deg, var(--color-pink-pale), #ccf0ec);
}

.benefits-list .item:nth-child(3) .num {
  background-image: linear-gradient(180deg, #abe7ff, var(--color-gray-light));
}

.benefits-list .title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-sub);
}

.benefits-list .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-sub);
  margin-top: 1rem;
}

.benefits .note {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: #8c8c8c;
  margin-top: 2rem;
  text-align: center;
}

/* =========================================================
   Who it's for
========================================================= */
.target {
  padding: 6rem 2.9rem 8rem;
  background-color: #f7f7f7;
}

.target::before {
  background-size: 200rem 73.1rem;
  background-position: center center;
  inset: auto;
  width: 200rem;
  height: 73.1rem;
  bottom: -14rem;
  left: -35rem;
}

.target::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  background-image: url(../img/line_04.png);
  background-size: 202rem 73.1rem;
  background-position: center center;
  inset: auto;
  width: 202rem;
  height: 73.1rem;
  top: -8rem;
  left: -18rem;
}

.target .heading {
  margin-bottom: 3rem;
}

.target-grid {
  grid-template-columns: repeat(3, 34.7rem);
  gap: 5rem;
  justify-content: center;
}

.target-grid .item {
  position: relative;
  padding: 0px 0 2rem;
  border: 0.1rem solid var(--color-pink-pale);
  border-radius: 1.8rem;
  box-shadow: 0 0.1rem 1rem #ecdbdd;
}

/* 右上の角に乗る丸みのある面 + アイコン */
.target-grid .icon {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 11rem;
  height: 9.3rem;
  background: url(../img/deco_clip-path.svg) no-repeat center top;
  background-size: cover;
}

.target-grid .icon img {
  width: 5.1rem;
  height: auto;
  border-radius: 1.6rem;
  margin: -0.8rem -1.2rem 0 0;
}

.target-grid .tags {
  position: relative;
  gap: 0.7rem;
  padding-inline: 2.4rem;
  margin-top: 9rem;
}

/* タグの色はカードごとに違う */
.target-grid .tag {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text-sub);
  background-color: var(--color-gray-light);
  border: 0;
  padding: 0.9rem 1rem;
}

.target-grid .item:nth-child(1) .tag:nth-child(1) {
  background-color: #faffdf;
}

.target-grid .item:nth-child(1) .tag:nth-child(2) {
  background-color: #dfdfdf;
}

.target-grid .item:nth-child(2) .tag:nth-child(1) {
  background-color: var(--color-pink-pale);
}

.target-grid .item:nth-child(2) .tag:nth-child(2) {
  background-color: rgba(84, 205, 191, 0.3);
}

.target-grid .item:nth-child(3) .tag:nth-child(1) {
  background-color: #70b9d6;
}

.target-grid .title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: calc(40 / 30);
  color: var(--color-text-sub);
  padding-inline: 2.2rem;
  margin-top: 3rem;
}

.target-grid .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-sub);
  padding-inline: 2.4rem;
  margin-top: 1.5rem;
}

.target-grid .image {
  width: 29.9rem;
  margin: 3rem auto 0;
}

/* =========================================================
   Results
========================================================= */
.results {
  padding: 19.1rem 0 5rem;
  background: url("../img/results-bg.jpg") center top / cover no-repeat var(--color-pink-bg);
}

.results .heading {
  position: relative;
  z-index: 1;
  margin-bottom: 3.2rem;
}

/* 背景の透かし文字。上は白、下へ向かって透明になる */
.results .results-title {
  position: absolute;
  left: 50%;
  top: 11rem;
  z-index: 0;
  transform: translateX(-50%);
  text-align: center;
}

.results .results-title>span {
  max-width: 59.6rem;
  margin: 0 auto;
}

.results .heading .title {
  font-size: 3.2rem;
  margin-top: 0;
}

.results .heading .text {
  color: var(--color-text-sub);
}

/* 実績：2×2。枠はピンク、数字のうしろに月桂冠 */
.results-stats {
  display: grid;
  grid-template-columns: repeat(2, 35rem);
  gap: 1.6rem;
  justify-content: center;
}

.results-stats .item {
  text-align: center;
  background-color: var(--color-white);
  border: 0.2rem solid var(--color-pink);
  border-radius: 1.2rem;
  padding: 2.8rem 1rem 2.4rem;
}

.results-stats .icon img {
  width: 6.2rem;
  height: auto;
}

.results-stats .num {
  min-height: 9.7rem;
  /* font-family: var(--font-mono); */
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  background: url("../img/results-wreath.svg") center -0.2rem / 23.2rem 7.9rem no-repeat;
  margin-top: 0.8rem;
}

.results-stats .num strong {
  font-size: 5.4rem;
  font-weight: 800;
}

.results-stats .num small {
  font-size: 1.8rem;
  font-weight: 800;
}

.results-stats .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-sub);
  margin-top: 0.6rem;
}

/* 受賞：丸いバッジが上辺に乗る */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 47.6rem);
  gap: 3.2rem;
  justify-content: center;
  margin-top: 14.6rem;
}

.awards-grid .item {
  position: relative;
  padding-top: 5rem;
}

.awards-grid .item::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 5rem;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/subtract-award.png) no-repeat center top;
  background-size: 100% 5rem;
  z-index: 1;
}

.awards-grid .item-inner {
  position: relative;
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-pink);
  border-top: none;
  border-radius: 0 0 3rem 3rem;
  padding: .5rem 3.2rem 1.5rem;
  min-height: 25.8rem;
}

.awards-grid .badge {
  position: absolute;
  top: -11.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.awards-grid .badge img {
  width: 10rem;
  height: auto;
}

.awards-grid .logo {
  width: auto;
  height: 4.9rem;
  margin: 0;
}

.awards-grid .title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-sub);
  margin-top: .6rem;
}

.awards-grid .title strong {
  font-size: 3.4rem;
  font-weight: 900;
}

.awards-grid .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin-top: 1.6rem;
}

/* =========================================================
   Platforms
========================================================= */
.platforms {
  padding: 6.6rem 0;
  background-color: var(--color-white);
  background: url(../img/bg-platforms.png) repeat center center;
}

.platforms .heading {
  margin-bottom: 3.5rem;
}

.platforms-diagram {
  position: relative;
  max-width: 58rem;
  margin: 2rem auto;
}

.platforms-diagram img {
  height: auto;
}

.platforms-diagram>span {
  position: absolute;
  z-index: 1;
  width: 16rem;
  height: auto;
}

.platforms-diagram>span.platforms-diagram-01 {
  top: 0;
  left: 22rem;
}

.platforms-diagram>span.platforms-diagram-02 {
  top: 12.5rem;
  right: 0;
}

.platforms-diagram>span.platforms-diagram-03 {
  top: 38rem;
  right: 0;
}

.platforms-diagram>span.platforms-diagram-04 {
  bottom: 0;
  left: 22rem;
}

.platforms-diagram>span.platforms-diagram-05 {
  top: 38rem;
  left: 0;
}

.platforms-diagram>span.platforms-diagram-06 {
  top: 12.5rem;
  left: 0;
}

.platforms .callout .buttons {
  justify-content: flex-end;
}

/* =========================================================
   FAQ
========================================================= */
.faq {
  padding: 6rem 0;
  background-color: var(--color-bg);
}

.faq-list {
  display: grid;
  gap: 1.3rem;
}

.faq-list .item {
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  text-align: left;
  padding: 2rem 10rem 2rem 3rem;
  position: relative;
}

.faq-q .num {
  /* font-family: "Hiragino Kaku Gothic ProN", sans-serif; */
  flex: none;
  font-size: 2.6rem;
  font-weight: 600;
}

.faq-q .title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

/* +/- icon */
.faq-q:before,
.faq-q:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 2.2rem;
  height: 0.2rem;
  background-color: var(--color-primary-dark);
  transform: translateY(-50%);
  transition: transform 0.3s;
}

.faq-q:after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-q[aria-expanded="true"] {
  background-color: #fdeaed;
}

.faq-q[aria-expanded="true"] .title {
  font-size: 2rem;
}

.faq-q[aria-expanded="true"]:after {
  transform: translateY(-50%) rotate(0);
}

.faq-a {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.faq-a .text {
  display: flex;
  gap: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 3rem 12rem 3.2rem 5.5rem;
}

.faq-a .num {
  /* font-family: "Hiragino Kaku Gothic ProN", sans-serif; */
  flex: none;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.2;
}

/* =========================================================
   Articles
========================================================= */
.articles {
  padding: 6.3rem 0 9.3rem;
  background-color: var(--color-white);
}

.articles::before {
  background-size: 200rem 73.1rem;
  background-position: center center;
  inset: auto;
  width: 200rem;
  height: 73.1rem;
  bottom: -14rem;
  left: -35rem;
}

.articles::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  background-image: url(../img/line_04.png);
  background-size: 202rem 73.1rem;
  background-position: center center;
  inset: auto;
  width: 202rem;
  height: 73.1rem;
  top: -8rem;
  left: -18rem;
}

.articles .heading {
  margin-bottom: 3rem;
}

.articles .heading .text {
  margin-top: 2rem;
  font-size: 1.6rem;
}

.articles-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 4.9rem;
}

.articles-grid .item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3rem 2.3rem 2.2rem;
}

.articles-grid .title {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.5;
}

.articles-grid .text {
  flex: 1 1 auto;
}

.articles-grid .link {
  margin-top: 1.6rem;
}

/* =========================================================
   Footer CTA
========================================================= */
.footer .logo {
  width: 15rem;
}

.footer-cta {
  text-align: center;
  padding-block: 7rem;
  background: url("../img/bg_footer-cta.jpg") center / cover no-repeat #020104;
}

.footer-cta .inner {
  max-width: 87.8rem;
}

.footer-cta .title {
  /* font-family: var(--font-mono); */
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1.32;
  color: var(--color-white);
}

/* 前半だけピンク→ライムのグラデーション */
.footer-cta .title em {
  background: radial-gradient(circle at 72% -30%,
      var(--color-pink-pale) 0%,
      var(--color-lime) 55%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-cta .text {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-gray);
  margin-top: 1.6rem;
}

.footer-cta .tags {
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.footer-cta .tag {
  /* font-family: var(--font-en); */
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
  background-color: #280714;
  border-color: #faffdf;
  padding: 0.8rem 1.1rem;
}

.footer-cta .buttons {
  justify-content: center;
  margin-top: 4rem;
}

.footer-cta .button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 38rem;
  height: 6rem;
  font-size: 2rem;
  border-radius: 7.6rem;
  padding: 0;
}

.footer-cta .button strong {
  font-size: 2.5rem;
  font-weight: 900;
}

/* =========================================================
   Contact
========================================================= */
.contact {
  padding-block: 6rem 12.8rem;
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  background-image: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 .8rem,
      transparent .8rem 2.4rem),
    linear-gradient(180deg, #730012, #a70120);
}

.contact .label {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.contact .heading {
  margin-bottom: 4.2rem;
}

.contact .heading .title {
  font-weight: 700;
  color: var(--color-white);
}

.contact .heading .text {
  color: var(--color-white);
}

/* 白いカードの中にピンクの面、ボタンだけ白い部分に出る */
.form {
  background-color: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--color-text);
  padding-bottom: 3.9rem;
}

.form-body {
  background-color: #fff1f2;
  padding: 4rem 17rem 4.7rem;
}

/* 個人情報の取扱いへの同意 */
.form-privacy {
  /* デザインでは入力欄より広い 1020px */
  margin: 4rem -11rem 0;
  text-align: center;
}

.form-privacy .text {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: #212121;
}

.form-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
  color: #212121;
  cursor: pointer;
  margin-top: 2.7rem;
}

.form-check>span>a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.form .form-check input {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  appearance: none;
  background-color: var(--color-white);
  border: 0.2rem solid var(--color-primary-dark);
  border-radius: .5rem;
  padding: 0;
  cursor: pointer;
}

.form .form-check input:checked {
  background: var(--color-primary-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 2rem no-repeat;
}

.form-check em {
  color: var(--color-primary-dark);
}

.form-item+.form-item {
  margin-top: 3rem;
}

.form-label .required {
  color: var(--color-primary);
}

.form-label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: #212121;
  margin-bottom: 1.4rem;
}

.form input,
.form textarea {
  display: block;
  width: 100%;
  height: 6rem;
  font-size: 1.8rem;
  background-color: var(--color-white);
  border: 0.1rem solid #adadad;
  border-radius: var(--radius);
  padding: 0 2rem;
}

.form textarea {
  height: 17.9rem;
  resize: vertical;
  padding: 2rem;
}

/* 入力エラー：入力欄のすぐ下に赤字で出す。JS が挿入する */
.form-error {
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-primary);
  margin-top: 0.6rem;
}

.form-privacy .form-error {
  text-align: center;
}

.form-submit {
  text-align: center;
  margin-top: 3.5rem;
}

.form-submit .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 7rem;
  font-size: 2.5rem;
  font-weight: 900;
  border-radius: 7.6rem;
  padding: 0;
}

/* =========================================================
   footer
========================================================= */
.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-white);
  padding-block: 3rem;
}

.footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer .logo img {
  width: 16rem;
  height: auto;
}

.footer .note {
  color: var(--color-gray);
}

/* =========================================================
   Hiragino Kaku Gothic
   デザインで Hiragino Kaku Gothic が指定されている箇所
========================================================= */
.problems-list .title,
.problems-list .num,
.problems-solution .title,
.problems-solution .text,
.cta .title,
.cta .text,
.benefits-list .title,
.benefits-list .text,
.target-grid .title,
.target-grid .text,
.articles-grid .title,
.articles-grid .text,
.platforms .note {
  /* font-family: var(--font-hiragino); */
}

/* =========================================================
   フェードイン：スクロールで下から浮かび上がる
   隠す指定は HTML に直接書いてある（.js-fade / .js-fade-list / .js-fade-soft）。
   JS は画面に入った時に .is-shown を足すだけ
========================================================= */
.js-fade,
.js-fade-soft,
.js-fade-list>* {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-fade,
.js-fade-list>* {
  transform: translateY(4rem);
}

.js-fade.is-shown,
.js-fade-list.is-shown>* {
  opacity: 1;
  transform: none;
}

/* 位置決めに transform を使っている要素は不透明度だけ動かす */
.js-fade-soft.is-shown {
  opacity: 1;
}

/* リスト・図は中身を順番に。Platforms の 01〜06 もこの順番で出る */
.js-fade-list>*:nth-child(2) {
  transition-delay: 0.12s;
}

.js-fade-list>*:nth-child(3) {
  transition-delay: 0.24s;
}

.js-fade-list>*:nth-child(4) {
  transition-delay: 0.36s;
}

.js-fade-list>*:nth-child(5) {
  transition-delay: 0.48s;
}

.js-fade-list>*:nth-child(6) {
  transition-delay: 0.60s;
}

.js-fade-list>*:nth-child(7) {
  transition-delay: 0.72s;
}

.js-fade-list>*:nth-child(8) {
  transition-delay: 0.84s;
}

/* FV：タグ→見出し→本文→ボタン→カードの順 */
.fv .title {
  transition-delay: 0.36s;
}

.fv .text {
  transition-delay: 0.48s;
}

.fv .buttons {
  transition-delay: 0.60s;
}

.fv-card {
  transition-delay: 0.72s;
}

@media (prefers-reduced-motion: reduce) {

  .js-fade,
  .js-fade-soft,
  .js-fade-list>* {
    opacity: 1;
    transition: none;
  }

  .js-fade,
  .js-fade-list>* {
    transform: none;
  }

  .button:hover::before {
    animation: none;
  }
}

/* =========================================================
   SP（〜750px）
   デザインは幅 750px。html の font-size が 100vw / 75 なので
   デザインの px ÷ 10 = rem で書ける。PC の指定はここでは触らず上書きだけする
========================================================= */
@media screen and (max-width: 750px) {

  html {
    scroll-padding-top: 10rem;
  }

  /* --- common --- */
  .inner {
    padding-inline: 3.2rem;
  }

  .section {
    padding-block: 5rem;
  }

  .heading {
    margin-bottom: 2.6rem;
  }

  .heading .label {
    font-size: 3.6rem;
    padding-bottom: 1rem;
  }

  .heading .title {
    font-size: 4rem;
    line-height: 1.3;
    margin-top: 1.2rem;
  }

  .heading .text {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 1.8rem;
  }

  .card {
    padding: 3rem 2.4rem;
  }

  .card .title {
    font-size: 3.5rem;
  }

  .card .text {
    font-size: 2.6rem;
    line-height: 1.5;
  }

  .button {
    min-width: 0;
    font-size: 4rem;
    padding: 3.2rem 2rem;
    box-shadow: 0 .4rem .2rem rgba(0, 0, 0, 0.25);
  }

  .button-outline {
    min-width: 0;
    background-color: #3e0307;
    border-color: #b83c45;
  }

  .buttons {
    flex-direction: column;
    gap: 2.2rem;
    margin-top: 4rem;
  }

  .tag {
    font-size: 2.2rem;
    padding: 0.8rem 2rem;
  }

  .tag img {
    width: 2.8rem;
  }

  .note {
    font-size: 2.6rem;
    line-height: 1.5;
  }

  .callout {
    padding: 3.3rem;
    margin-top: 3rem;
  }

  .callout .title {
    font-size: 3rem;
  }

  .callout .text {
    font-size: 2.6rem;
  }

  .callout .note {
    font-size: 2.6rem;
    margin-top: 1rem;
  }

  .link {
    font-size: 2.6rem;
  }

  /* --- header --- */
  .header,
  .header.is-fixed {
    height: 10rem;
    background: url(../img/bg_header_sp.jpg) center / cover no-repeat #020104;
  }

  .header-inner,
  .header.is-fixed .header-inner {
    padding: 0 3.2rem 0 3.3rem;
  }

  .header .logo {
    width: 20rem;
  }

  .header .logo img {
    width: auto;
  }

  .header .button {
    min-width: 0;
    width: 39.2rem;
    min-height: 8rem;
    font-size: 2.6rem;
    padding: 0 2rem;
  }

  /* --- FV --- */
  .fv {
    min-height: 0;
    display: block;
    padding-block: 15rem 4.6rem;
  }

  .fv::before {
    min-width: 0;
    background-image: url("../img/bg_fv_full_sp.jpg");
  }

  .fv::after {
    width: 75rem;
    height: 142.8rem;
    background-image: url("../img/fv_logo_sp.png");
    background-size: 100% 100%;
  }

  .fv .inner {
    flex-direction: column;
    gap: 3.5rem;
  }

  .fv-body {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .fv .tags {
    justify-content: center;
    gap: 1.2rem 1.6rem;
  }

  .fv .tag {
    height: 6rem;
    gap: 0.9rem;
    font-size: 2.6rem;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
  }

  .fv .tag img {
    width: 3rem;
  }

  /* 1行目は 750px 幅いっぱいまで使う（デザインも左右にはみ出している） */
  .fv .title {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: -0.04em;
    white-space: nowrap;
    margin: 1.2rem -3.2rem 0;
  }

  .fv .title .font-normal {
    font-size: 6rem;
  }

  .fv .text {
    font-size: 3.5rem;
    line-height: calc(60 / 35);
    color: var(--color-gray-light);
    margin-top: 4rem;
  }

  .fv .text em {
    font-weight: 900;
    border-bottom-width: 0.3rem;
  }

  .fv .buttons {
    margin-top: 4rem;
    gap: 2rem;
  }

  .fv .button-outline {
    border-color: #94003d;
  }

  .fv-card {
    flex: none;
    width: calc(100% + .8rem);
    margin: 0 -.4rem;
  }

  /* ロゴ帯：高さ 62px に合わせると 1周 = 127.7rem */
  .logo-partner {
    height: 10rem;
    background-color: var(--color-white);
    background-size: auto 6.2rem;
    animation-name: marquee-sp;
  }

  @keyframes marquee-sp {
    to {
      background-position: -127.7rem center;
    }
  }

  /* --- Problems --- */
  .problems {
    padding-block: 5rem;
  }

  .problems:before {
    background-image: url(../img/line01_sp.png), url(../img/line01_sp.png);
    background-position: -62rem -21.8rem, -60rem 76rem;
    background-size: 302.1rem 134.7rem, 302.1rem 134.7rem;
    opacity: 0.6;
  }

  .problems .heading {
    margin-bottom: 2.5rem;
  }

  .problems-body {
    flex-direction: column;
    align-items: center;
  }

  .problems-body::before {
    width: 10.4rem;
    height: 140rem;
    background: url(../img/problems_gradient_01_sp.png) no-repeat center center;
    left: -1rem;
    top: 2.6rem;
  }

  .problems-illust {
    flex: none;
    width: 52.8rem;
    margin: 0 auto 0 10.4rem;
  }

  .problems-list {
    flex: none;
    width: 100%;
    gap: 2rem;
    margin: 2.5rem 0 0;
  }

  .problems-list .item {
    align-items: center;
    gap: 2rem;
    min-height: 0;
    padding: 2.3rem 2rem 3rem;
    box-shadow: 0 0.1rem 1.1rem var(--color-shadow);
  }

  .problems-list .item .label {
    flex: none;
    width: 7.5rem;
    height: 12.2rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
  }

  .problems-list .item .label::before {
    left: 0;
    top: 1.5rem;
    width: 7.5rem;
    height: 9.2rem;
  }

  .problems-list .icon img {
    width: 4.4rem;
  }

  .problems-list .num {
    font-size: 4rem;
    letter-spacing: -0.04em;
    color: var(--color-text-sub);
    margin-left: 1.8rem;
  }

  .problems-list .body {
    width: calc(100% - 9.5rem);
  }

  .problems-list .title {
    font-size: 3.5rem;
    line-height: 1.4;
  }

  .problems-list .text {
    font-size: 2.6rem;
    margin-top: .5rem;
    max-width: 51.6rem;
  }

  .problems-list .text br {
    display: none;
  }

  .problems-solution {
    text-align: left;
    border-radius: var(--radius);
    margin-top: 2rem;
    padding: 3rem 2rem;
    box-shadow: 0 0.1rem 1.1rem var(--color-shadow);
  }

  .problems-solution .title {
    font-size: 3.5rem;
    line-height: 1.5;
    color: var(--color-text-sub);
  }

  .problems-solution .text {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 1rem;
  }

  /* --- What --- */
  .what {
    padding: 5rem 0 6rem;
    background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.85) 16%, rgba(255, 211, 215, 0.85) 99%);
  }

  .txtLarg-bg {
    display: none;
  }

  .what .label {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  .what .heading {
    margin-bottom: 3rem;
  }

  .what-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 0;
  }

  .what-card {
    padding: 0 2.4rem 2.4rem;
  }

  .what-card:first-child {
    width: 57rem;
    margin: 0 auto;
    padding-bottom: 3rem;
  }

  .what-card .card-head {
    width: 47.5rem;
    min-height: 8.9rem;
    gap: 1.2rem;
    margin: 0 auto 3.8rem;
    font-size: 3.6rem;
    border-radius: 0 0 1.6rem 1.6rem;
  }

  .what-card .list {
    padding-inline: 4.8rem;
  }

  .what-card .item+.item {
    margin-top: 3.4rem;
    padding-top: 3.4rem;
  }

  .what-card .title {
    font-size: 3rem;
  }

  .what-card .text {
    font-size: 3rem;
  }

  .what-card.is-primary {
    padding-bottom: 7rem;
  }

  .what-card.is-primary .card-head {
    width: 50.9rem;
    min-height: 9rem;
    margin: 0 auto 6rem;
  }

  .what-card.is-primary .list {
    padding-inline: 4.2rem 5.8rem;
  }

  .what-card.is-primary .title {
    font-size: 3.5rem;
    gap: 3rem;
  }

  .what-card.is-primary .text {
    font-size: 2.6rem;
    font-weight: 500;
  }

  .what-card .title .tag {
    font-size: 3rem;
    padding: 0.6rem 1.7rem;
    margin-top: -.4rem;
  }

  .what .callout {
    margin-top: 5.4rem;
    padding: 4.3rem 3rem 4rem 5rem;
  }

  .what .callout:before {
    width: 1.9rem;
    height: calc(100% - 4.9rem);
    border-radius: 0 2rem 2rem 0;
  }

  .what .callout .title {
    font-size: 3rem;
  }

  .what .callout .text {
    font-size: 2.6rem;
    line-height: 1.5;
    margin: 0;
  }

  /* --- Why us --- */
  .whyus {
    padding: 5rem 0 5.8rem;
    position: relative;
  }

  .whyus:before {
    background-image: url(../img/line_02.png);
    background-position: 15rem -40rem;
    background-size: 202.4rem 74.4rem;
  }

  .whyus:after {
    background: url(../img/line_03.png) -128rem 59rem / 294.9rem 122.7rem no-repeat;
    transform: rotate(0deg);
    bottom: 0;
  }

  .txtWhyus-bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 14.8rem;
    background-image: url(../img/txtBg_whyus.png);
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: auto 14.8rem;
    animation: marquee 40s linear infinite;
    z-index: 0;
  }

  .txtWhyus-bg.--02 {
    top: auto;
    bottom: 0;
  }

  .whyus .txtLarg {
    left: 13rem;
    top: -2rem;
    width: auto;
    max-width: none;
    padding: 0;
    font-size: 16.6rem;
    white-space: nowrap;
    transform: none;
  }

  .whyus .txtLarg-02 {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    font-size: 15.5rem;
    opacity: 0.3;
    transform: translateX(-50%);
  }

  .whyus .heading {
    margin-bottom: 5rem;
  }

  .whyus .heading .text {
    font-size: 3rem;
  }

  .whyus-grid {
    grid-template-columns: 1fr;
    gap: 3.4rem;
  }

  /* 画像を左、見出しと本文を右に */
  .whyus-grid .item {
    display: grid;
    grid-template-columns: 18rem 1fr;
    grid-template-rows: max-content;
    column-gap: 1.7rem;
    align-items: center;
    min-height: 26.5rem;
    text-align: left;
    padding: 2rem 3rem;
    box-shadow: 0 0.1rem 1.6rem #838383;
  }

  .whyus-grid .image {
    grid-row: 1 / span 2;
  }

  .whyus-grid .title {
    align-self: end;
    font-size: 3.5rem;
    line-height: 1.5;
    margin-top: 0;
  }

  .whyus-grid .title em {
    color: var(--color-primary-dark);
  }

  .whyus-grid .item:nth-child(3) .title br {
    display: none;
  }

  .whyus-grid .text {
    align-self: start;
    font-size: 2.6rem;
    line-height: 1.5;
    margin: 0;
  }

  .whyus-grid .item:not(:nth-child(2)) .text br {
    display: none;
  }

  .cta {
    margin-top: 5rem;
  }

  .cta .title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.5;
  }

  .cta .text {
    font-size: 2.6rem;
    line-height: 1.58;
    color: var(--color-text-sub);
    margin-top: .8rem;
  }

  .cta .buttons {
    gap: 2.2rem;
    margin-top: 3.5rem;
  }

  /* --- Service --- */
  .service {
    padding-block: 5rem;
    background-image: none
  }

  .service .inner::before {
    right: -33.2rem;
    top: -1.8rem;
  }

  .service .inner::after {
    left: 1.2rem;
    top: 12.2rem;
  }

  .service .label {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  .service .heading {
    margin-bottom: 2.8rem;
  }

  .service-card {
    padding: 3rem 2.4rem;
    box-shadow: 0 0.1rem 2.2rem var(--color-shadow);
  }

  .service-card+.service-card {
    margin-top: 2rem;
  }

  .service-card>.title {
    font-size: 3.5rem;
    font-weight: 900;
  }

  .service-card+.service-card>.title {
    font-weight: 700;
  }

  .service-card>.text {
    font-size: 2.6rem;
    margin-top: 0;
  }

  .service-card>.text br {
    display: none;
  }

  .service-card>.text.service-media {
    margin: 1.2rem 0 1rem;
  }

  .service-media img {
    width: 53.6rem;
  }

  .service-media span {
    font-size: 2.6rem;
  }

  .service-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    margin-top: 1.2rem;
    padding-right: 0;
  }

  .service-foot .price {
    font-size: 4rem;
    min-width: 16.6rem;
    padding: 0 2rem .4rem 4rem;
  }

  .service-foot .price strong {
    font-size: 5.5rem;
  }

  .service-foot .price span {
    font-size: 3rem;
    margin: auto 0;
  }

  .service .service-foot .note {
    font-size: 2.6rem;
    margin-top: .8rem;
  }

  .service .tags {
    gap: 1rem;
  }

  /* 料金表：左に赤い帯＋項目名、右に料金の縦並び */
  .service .table-wrap {
    margin-top: 3rem;
    overflow: hidden;
  }

  .service-table {
    display: grid;
    grid-template-columns: 30.7rem 1fr;
    grid-template-rows: repeat(4, 15rem);
    grid-auto-flow: column;
    border-radius: 0;
  }

  .service-table thead,
  .service-table tbody,
  .service-table tr {
    display: contents;
  }

  .service-table th,
  .service-table td {
    width: auto;
    align-content: center;
    border-bottom: 0.1rem solid var(--color-gray);
  }

  .service-table th:last-child,
  .service-table td:last-child {
    border-bottom: 0;
  }

  .service-table th {
    position: relative;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-sub);
    background-color: var(--color-white);
    border-right: 0.1rem solid var(--color-gray);
    padding: 0 1rem 0 10rem;
  }

  .service-table th::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7.6rem;
    background-color: var(--color-primary-dark);
  }

  .service-table th img {
    position: absolute;
    top: 50%;
    left: 1.8rem;
    width: 4rem;
    margin: 0;
    transform: translateY(-50%);
  }

  .service-table th span {
    display: block;
    font-size: 2.2rem;
  }

  .service-table td {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0 1rem 0 2.5rem;
    border-right: 0;
  }

  .table tr:last-child td:not(:last-child) {
    border-bottom: 0.1rem solid var(--color-gray);
  }

  .service-table td strong {
    font-size: 6rem;
    font-weight: 500;
  }

  .service-table td small {
    font-size: 2.6rem;
    font-weight: 500;
  }

  .service .note {
    font-size: 2.6rem;
    margin-top: 2.6rem;
  }

  .service-foot .price-line {
    justify-content: center;
    width: 100%;
    min-height: 7.5rem;
    font-size: 3rem;
    font-weight: 400;
    border-width: 0.2rem;
    padding: 0 1rem;
  }

  .service-foot .price-line b {
    font-weight: 900;
    margin-left: 0.6rem;
  }

  .service-foot .price-line strong {
    font-size: 5.5rem;
    margin-inline: 0.4rem;
  }

  /* --- Credit Line --- */
  .creditline {
    padding-block: 9.5rem 10rem;
    background: radial-gradient(60rem 60rem at 80% 15%, rgba(255, 211, 215, 0.7), transparent 70%) #fbeaea;
  }

  .creditline::before {
    bottom: -6rem;
    left: -70rem;
    transform: rotate(0deg);
  }

  .creditline:after {
    top: 3.5rem;
    width: 120.8rem;
    height: 138.6rem;
  }

  .creditline .heading {
    margin-bottom: 2.6rem;
  }

  /* 表は支払いの形ごとのカードにする。項目名は data-label から出す */
  .creditline .table-wrap {
    border: 0;
    border-radius: 0;
  }

  .creditline-table {
    display: block;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .creditline-table thead {
    display: none;
  }

  .creditline-table tbody {
    display: grid;
    gap: 2rem;
  }

  .creditline-table tr {
    display: block;
    background-color: var(--color-white);
    border: 0.1rem solid var(--color-gray);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .creditline-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 7.6rem;
    font-size: 2.6rem;
    line-height: 1.75;
    padding: 0 3.2rem;
    border-bottom: 0.1rem solid var(--color-gray);
  }

  .creditline-table td::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--color-text-gray);
  }

  .creditline-table td:first-child {
    min-height: 7.1rem;
    font-size: 3rem;
    color: var(--color-white);
    background-color: var(--color-text-sub);
  }

  .creditline-table td:first-child::before {
    display: none;
  }

  .creditline-table .is-primary td:first-child {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
  }

  .creditline-table tr td:last-child {
    border-bottom: 0;
  }

  .creditline-banner {
    min-height: 29.7rem;
    margin-top: 2rem;
    padding: 4rem 2rem 3rem;
    background-image: url("../img/creditline-banner_sp.png");
    background-size: 100% 100%;
    border-color: rgba(255, 130, 130, 0.5);
  }

  .creditline-banner .badge {
    display: block;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.5;
    border-radius: 20rem;
    padding: 1.6rem 3.5rem;
    margin-top: 0;
  }

  .creditline-banner .text {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 3rem;
  }

  /* --- Flow --- */
  .flow {
    padding: 5rem 0;
    background-image: url(../img/bg_flow_sp.png);
  }

  .flow .heading {
    margin-bottom: 2rem;
  }

  .flow-list {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 0;
  }

  .flow-list .item {
    min-height: 20rem;
    margin-left: 0.8rem;
    padding: 4.8rem 2rem 3rem 10.6rem;
    border-radius: 2.2rem;
    box-shadow: 0 0.1rem 2.2rem var(--color-shadow), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.3), 0 0.1rem 0.3rem 0.1rem rgba(0, 0, 0, 0.15);
  }

  .flow .step {
    top: 3.9rem;
    left: -0.8rem;
    width: 8rem;
    height: 12.3rem;
    font-size: 2rem;
    background-image: url("../img/flow-step-ribbon_sp.png");
  }

  .flow .step strong {
    font-size: 3.5rem;
  }

  .flow-list .title {
    font-size: 3.5rem;
    line-height: 1.75;
    margin-top: 0;
  }

  .flow-list .text {
    font-size: 2.6rem;
    margin-top: 0;
  }

  .flow-list br {
    display: none;
  }

  /* --- Pricing --- */
  .pricing {
    padding: 6rem 0 4.6rem;
    background-image: url("../img/bg_pricing_sp.jpg");
    background-position: center top;
  }

  .pricing .heading {
    margin-bottom: 2rem;
  }

  .pricing .heading .label {
    font-size: 4rem;
  }

  .pricing .heading .text {
    font-size: 3rem;
    font-weight: 400;
  }

  .pricing-content {
    width: 100%;
  }

  .pricing-list .item {
    padding: 4.4rem 1rem 4.5rem;
  }

  .pricing-list .title {
    font-size: 2.6rem;
  }

  .pricing-list .price strong {
    font-size: 10rem;
  }

  .pricing-list .price span {
    font-size: 5rem;
  }

  .pricing-list .text {
    font-size: 2.6rem;
    line-height: 1.45;
  }

  .pricing-list .text strong {
    font-weight: bold;
  }

  .pricing-list .price {
    margin-block: 1.2rem;
  }

  .pricing-list .price-text {
    font-size: 7rem;
    margin-block: 2.5rem;
  }

  /* 0% のバナー：数字を左上、本文とボタンを右に */
  .pricing-free {
    display: block;
    min-height: 38.2rem;
    margin-top: 3rem;
    padding: 4.1rem 2rem 2.4rem 0;
  }

  .pricing-free::before {
    width: 75rem;
    height: 49rem;
    background-image: url("../img/bg_banner_pricing_sp.png");
  }

  .pricing-free .price {
    position: absolute;
    top: 1.2rem;
    left: 5.5rem;
  }

  .pricing-free .price strong {
    font-size: 15rem;
  }

  .pricing-free .price span {
    font-size: 6rem;
  }

  .pricing-free .text {
    font-size: 2.6rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
  }

  .pricing-free .text br {
    display: none;
  }

  .pricing-free .buttons {
    width: 45.2rem;
    gap: 1.4rem;
    margin: 3.2rem 0 0 -10.8rem;
  }

  .pricing-free .buttons .button,
  .pricing-free .buttons .button-outline {
    min-width: 0;
    font-size: 2.6rem;
    padding: 2.1rem 1.3rem;
  }

  .pricing-option {
    max-width: none;
    margin-top: 2.3rem;
  }

  .pricing-option .title {
    font-size: 4rem;
    font-weight: 900;
  }

  .pricing-option .text {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.5;
  }

  /* オプションの詳細：上に赤いパネル、下に料金 */
  .pricing-detail {
    flex-direction: column;
    min-height: 0;
    margin-top: 3rem;
    overflow: hidden;
    box-shadow: 0 0.2rem 0.6rem #c74752, 0 0.1rem 5.3rem 0.1rem rgba(115, 0, 18, 0.4);
  }

  .pricing-detail:before {
    left: 0;
    width: 100%;
    height: 33rem;
  }

  .pricing-detail .body {
    flex: none;
    min-height: 33rem;
    text-align: center;
    padding: 2.1rem 1.3rem 2rem;
  }

  .pricing-detail .body .title {
    font-size: 5rem;
    letter-spacing: -0.05em;
  }

  .pricing-detail .tags {
    justify-content: center;
    max-width: none;
    margin-top: 2rem;
  }

  .pricing-detail .tag {
    height: 6rem;
    font-size: 2.6rem;
    padding: 0 2rem;
  }

  .pricing-detail .note {
    font-size: 2.6rem;
    letter-spacing: -0.05em;
    margin-top: 2rem;
  }

  .pricing-detail-price {
    align-self: stretch;
    padding: 2.2rem 13.4rem 2.8rem;
  }

  .pricing-detail-price .item+.item {
    margin-top: 2.7rem;
    padding-top: 1rem;
  }

  .pricing-detail-price dt {
    font-size: 2.6rem;
    line-height: 1.5;
  }

  .pricing-detail-price dd {
    font-size: 5rem;
  }

  .pricing-detail-price strong {
    font-size: 8rem;
    line-height: 1;
    letter-spacing: 0;
  }

  .pricing-detail-price span {
    font-size: 2.6rem;
    margin-left: 1rem;
  }

  /* --- Benefits --- */
  .benefits {
    padding: 4rem 0 5rem;
  }

  .benefits .heading {
    margin-bottom: 2rem;
  }

  /* SP の見出しは前半が黒、「メリット」が赤 */
  .benefits .heading .title {
    color: var(--color-primary);
  }

  .benefits .heading .title em {
    color: var(--color-heading);
  }

  .benefits-list .item {
    min-height: 22.2rem;
    padding: 2.5rem 12.6rem 3rem 3rem;
    border-radius: var(--radius);
  }

  .benefits-list .num {
    top: 2.5rem;
    right: 1.7rem;
    width: auto;
    height: auto;
    font-size: 13rem;
    line-height: 1;
    letter-spacing: -0.07em;
  }

  .benefits-list .title {
    font-size: 3.5rem;
    line-height: 1.3;
  }

  .benefits-list .text {
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-top: .5rem;
  }

  .benefits .note {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-gray);
  }

  /* --- Who it's for --- */
  .target {
    padding: 4.8rem 0 5rem;
  }

  .target::before {
    bottom: -6rem;
    left: -65rem;
  }

  .target::after {
    top: -4rem;
    left: -57rem;
  }

  .target .heading {
    margin-bottom: 2rem;
  }

  .target-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .target-grid .item {
    padding: 2.4rem 2.4rem 3rem;
    border: 0;
    border-bottom: 0.1rem solid var(--color-pink-pale);
    box-shadow: 0 0.1rem 0.5rem #ecdbdd;
  }

  .target-grid .icon img {
    width: 6rem;
    margin: -0.6rem -1.4rem 0 0;
  }

  .target-grid .tags {
    margin-top: 0;
    padding-inline: 0;
  }

  .target-grid .tag {
    font-size: 2.6rem;
    height: 5.5rem;
    padding: 0 2rem;
  }

  .target-grid .title {
    font-size: 3rem;
    padding-inline: 0;
    margin-top: 2rem;
  }

  .target-grid .title br {
    display: none;
  }

  .target-grid .text {
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    padding-inline: 0;
    margin-top: 1rem;
  }

  .target-grid .image {
    width: 43.4rem;
    margin-top: 2rem;
  }

  .target-grid .image img {
    width: auto;
    height: auto;
  }

  /* --- Results --- */
  .results {
    padding: 16rem 0 5rem;
    background-image: url("../img/results-bg_sp.jpg");
    background-size: 100% auto;
    background-color: #fdeef0;
  }

  .results .inner {
    padding-inline: 2.4rem;
  }

  .results .heading .text {
    margin-top: 0.4rem;
  }

  .results .results-title {
    top: 8.5rem;
    width: 100%;
  }

  .results .results-title>span {
    display: block;
    max-width: 58.7rem;
  }

  .results .heading {
    margin-bottom: 3rem;
  }

  .results .heading .title {
    font-size: 3.6rem;
  }

  .results-stats {
    grid-template-columns: repeat(2, 34.1rem);
    gap: 2rem;
  }

  .results-stats .item {
    min-height: 23.7rem;
    border: 0;
    border-bottom: 0.3rem solid var(--color-pink);
    box-shadow: 0 0.1rem 1rem 0.1rem #ecdbdd;
    padding: 1.4rem 1rem 2rem;
  }

  .results-stats .num {
    min-height: 9rem;
    font-size: 3rem;
    background-size: 22.8rem 7.9rem;
    background-position: center center;
    margin-top: 0;
    line-height: 1.1;
  }

  .results-stats .num strong {
    font-size: 6rem;
  }

  .results-stats .num small {
    font-size: 2.6rem;
  }

  .results-stats .text {
    font-size: 2.6rem;
    margin-top: 1.2rem;
  }

  /* 受賞：左の切り欠きは画像、右側の枠は CSS */
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3rem;
  }

  .awards-grid .item {
    padding-top: 0;
  }

  .awards-grid .item::before {
    width: 14.5rem;
    height: 100%;
    left: 0;
    transform: none;
    background-image: url(../img/subtract-award_sp.png);
    background-size: 100% 100%;
    z-index: 0;
  }

  .awards-grid .item::after {
    content: "";
    position: absolute;
    inset: 0 0 0 14.5rem;
    background-color: var(--color-white);
    border: 0.1rem solid var(--color-pink);
    border-left: 0;
    border-radius: 0 3rem 3rem 0;
  }

  .awards-grid .item-inner {
    z-index: 1;
    min-height: 30.6rem;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 2.7rem 3rem 2rem 13.1rem;
  }

  .awards-grid .badge {
    top: 0;
    left: 0;
    transform: none;
  }

  .awards-grid .logo {
    height: 5.2rem;
  }

  .awards-grid .title {
    font-size: 3.6rem;
    line-height: 1.3;
    margin-top: 1rem;
  }

  .awards-grid .title strong {
    font-size: 4rem;
  }

  .awards-grid .text {
    font-size: 2.6rem;
    line-height: 1.5;
    margin-top: 2rem;
  }

  .awards-grid .text br {
    display: none;
  }

  /* --- Platforms --- */
  .platforms {
    padding: 5rem 0;
  }

  .platforms .heading {
    margin-bottom: 4.2rem;
  }

  /* 円の図の代わりに、ロゴ＋媒体カード 2列 */
  .platforms-diagram {
    display: grid;
    grid-template-columns: repeat(2, 32.6rem);
    gap: 2rem;
    justify-content: center;
    max-width: none;
    margin: 0;
  }

  .platforms-diagram>span {
    position: static;
    width: auto;
  }

  .platforms-diagram .platforms-logo {
    grid-column: 1 / -1;
    order: -1;
    width: 30.8rem;
    margin: 0 auto 1rem;
  }

  .platforms-diagram>span.platforms-diagram-01 {
    order: 1;
  }

  .platforms-diagram>span.platforms-diagram-06 {
    order: 2;
  }

  .platforms-diagram>span.platforms-diagram-05 {
    order: 3;
  }

  .platforms-diagram>span.platforms-diagram-04 {
    order: 4;
  }

  .platforms-diagram>span.platforms-diagram-02 {
    order: 5;
  }

  .platforms-diagram>span.platforms-diagram-03 {
    order: 6;
  }

  .platforms .callout {
    border-color: var(--color-pink-pale);
    border-radius: 2.4rem;
    padding: 3.3rem 3.3rem 4rem;
  }

  .platforms .callout .title {
    line-height: calc(46 / 30);
  }

  .platforms .callout .buttons {
    margin-top: 2rem;
  }

  .platforms .callout .button {
    padding-block: 2.4rem;
  }

  /* --- FAQ --- */
  .faq {
    padding: 5rem 0;
    background-color: #f9f2f0;
  }

  .faq-list {
    gap: 1rem;
  }

  .faq-q {
    gap: 0.8rem;
    min-height: 13.5rem;
    padding: 2rem 10rem 2rem 2.3rem;
  }

  .faq-q .num {
    font-size: 3.2rem;
  }

  .faq-q .title {
    font-size: 2.6rem;
    font-weight: 500;
  }

  .faq-q[aria-expanded="true"] {
    background-color: #ffeaec;
  }

  .faq-q[aria-expanded="true"] .title {
    font-size: 3rem;
    font-weight: 700;
  }

  .faq-q:before,
  .faq-q:after {
    right: 2.8rem;
    width: 3.5rem;
    height: 0.2rem;
  }

  .faq-a .text {
    gap: 0.8rem;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: calc(40 / 26);
    padding: 2rem 3rem 2rem 2rem;
  }

  .faq-a .num {
    width: 5.3rem;
    font-size: 3.2rem;
    text-align: right;
  }

  /* --- Articles --- */
  .articles {
    padding: 5rem 0 6.6rem;
  }

  .articles::before {
    bottom: -5rem;
    left: -74rem;
  }

  .articles::after {
    top: -4rem;
    left: -39rem;
  }

  .articles .heading {
    margin-bottom: 2rem;
  }

  .articles .heading .text {
    font-size: 2.6rem;
    margin-top: 2rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .articles-grid .item {
    min-height: 20.1rem;
    padding: 2.4rem;
    border: 0.2rem solid var(--color-pink-pale);
    box-shadow: 0 0.1rem 0.5rem #ecdbdd;
  }

  .articles-grid .title {
    font-size: 3rem;
    font-weight: 700;
  }

  .articles-grid .title br {
    display: none;
  }

  .articles-grid .text {
    font-size: 2.6rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-top: .5rem;
  }

  .articles-grid .link {
    margin-top: 2rem;
  }

  /* --- Footer CTA --- */
  .footer-cta {
    padding-block: 7.4rem;
    background-image: url("../img/bg_footer-cta_sp.jpg");
  }

  .footer-cta .inner {
    max-width: none;
  }

  .footer-cta .title {
    font-size: 5rem;
  }

  .footer-cta .text {
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .footer-cta .tags {
    gap: 1rem;
  }

  .footer-cta .tag {
    height: 5.4rem;
    font-size: 2.4rem;
    padding: 0 2rem;
  }

  .footer-cta .buttons {
    align-items: center;
    margin-top: 4rem;
  }

  .footer-cta .button {
    width: 40rem;
    height: 7.5rem;
    font-size: 2.5rem;
    padding: 0;
  }

  .footer-cta .button strong {
    font-size: 3rem;
  }

  /* --- Note --- */
  .note-legal {
    padding: 5rem 0;
    font-size: 2.6rem;
    color: var(--color-text-gray);
  }

  .note-legal dt {
    font-size: 3rem;
  }

  .note-legal dd+dt {
    margin-top: 0;
  }

  /* --- Contact --- */
  .contact {
    padding-block: 5rem 7rem;
  }

  .contact .heading {
    margin-bottom: 3.6rem;
  }

  /* SP は送信ボタンまでピンクの面の中 */
  .form {
    background-color: #fff1f2;
    padding-bottom: 6rem;
  }

  .form-body {
    padding: 5rem 3rem 0;
  }

  .form-item+.form-item {
    margin-top: 1.8rem;
  }

  .form-label {
    font-size: 2.6rem;
    margin-bottom: 1.6rem;
  }

  .form input,
  .form textarea {
    height: 8.4rem;
    font-size: 2.6rem;
  }

  .form textarea {
    height: 17.9rem;
  }

  .form-error {
    font-size: 2.4rem;
  }

  .form-privacy {
    margin: 4rem 0 0;
  }

  .form-privacy .text {
    font-size: 2.6rem;
    text-align: left;
    line-height: 1.54;
  }

  .form-check {
    font-size: 2.6rem;
    margin-top: 3rem;
  }

  .form .form-check input {
    width: 4rem;
    height: 4rem;
    border-radius: 1.2rem;
  }

  .form .form-check input:checked {
    background-size: 3rem;
  }

  .form-submit {
    margin-top: 5rem;
    padding-inline: 3rem;
  }

  .form-submit .button {
    width: 100%;
    height: 12rem;
    font-size: 4rem;
    border-radius: var(--radius);
  }

  /* --- footer --- */
  .footer {
    padding-block: 4rem;
  }

  .footer .inner {
    flex-direction: column;
    gap: 2rem;
  }

  .footer .logo,
  .footer .logo img {
    width: 20rem;
  }

  .footer .note {
    font-size: 2.4rem;
  }

  /* --- 調整 --- */
  .fv-card img {
    width: 100%;
  }

  .what-card:first-child .list {
    padding-inline: 2rem;
  }

  /* 3枚目は「無料」だけ2行目に */
  .whyus-grid .item:nth-child(3) .title em:last-child {
    display: block;
  }

  .service .tag {
    padding-inline: 1.6rem;
    min-height: 5rem;
    gap: 1.5rem;
    font-size: 2.2rem;
  }

  .pricing-list .item:last-child .text {
    max-width: 28.6rem;
    margin-inline: auto;
  }

  .pricing-list .item:last-child .text br {
    display: none;
  }

  .pricing-free .body {
    flex: none;
    padding-left: 23rem;
  }

  .platforms .heading .text {
    letter-spacing: -0.03em;
  }

}