@charset "UTF-8";
.p-news .c-sec-head {
  order: 1;
}

.p-news .c-sec-head__label {
  height: 3.88rem;
  color: #f9f9f9;
  font-size: 5rem;
  font-weight: 400;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 1px #35c670;
}

.p-news .c-sec-head__label::after {
  margin-block: 0.75rem 0;
  margin-inline: auto;
}

.p-news .c-sec-head__title {
  margin-block-start: 1.56rem;
  font-size: 1.38rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 768px) {
  .p-news .c-sec-head__label {
    height: auto;
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-news .c-sec-head__title {
    margin-block-start: 1.5rem;
    font-size: 1.12rem;
  }
}

.p-top-faq .p-top-faq__inner .post_content {
  margin-block-start: 5.6em;
}

.p-top-cta__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--site-text) 60%, transparent);
}
@media screen and (max-width: 768px) {
  .p-top-cta__label {
    font-size: 1rem;
  }
}

.p-top-column__more {
  margin-block: 3.12rem 0;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-top-column__more {
    margin-block-start: 2.5rem;
  }
}

.p-top-news__more {
  order: 3;
  margin-block: 2.5rem 0;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .p-top-news__more {
    width: 100%;
    margin-block: 2.5rem 0;
    margin-inline: 0;
  }
}

.p-top-button-wrap {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

/* 一覧導線ボタン。以前はボタンの左右に短い横線を出していたが、規約どおり装飾線は
   持たせない方針にしたため擬似要素は削除した（クラス名は他の指定で使っているので残す）。 */
.p-top-button.p-top-button--line {
  flex-shrink: 1;
  max-width: 100%;
  height: auto;
  padding-block: 0.75rem;
  overflow: visible;
}

.p-top-button__label {
  width: 100%;
  padding-inline: 1rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .p-top-button--line {
    width: 100%;
  }
}

.p-top-case__button {
  margin-block-start: 3.12rem;
}

.p-top-voice__circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.p-top-faq__button {
  width: 23.62rem;
  margin-block: 2.94rem 0;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .p-top-faq__button {
    width: 100%;
    margin-block-start: 2rem;
  }
}

.l-inner {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media screen and (max-width: 768px) {
  .l-inner {
    max-width: 35rem;
    padding-inline: 1.25rem;
  }
}

.c-sec-head {
  text-align: center;
}

.c-sec-head__title {
  margin-block-start: 0.5rem;
}

.c-sec-head__label::after {
  content: "";
  display: block;
  width: 1.62rem;
  height: 1px;
  margin-block: 0.75rem 0;
  margin-inline: auto;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#35c670),
    to(#b0e481)
  );
  background: linear-gradient(90deg, #35c670 0%, #b0e481 100%);
}

.p-top-service {
  position: relative;
  padding-block: 8.5rem 5rem;
  overflow: hidden;
  background: #fff url(../images/common/dots-light.webp) repeat;
}

.p-top-service__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: 7rem;
}

.p-top-service__head .c-sec-head {
  flex: 0 1 31.75rem;
  min-width: 0;
  text-align: left;
}

/* デザインの英字は線そのものが左から右へのグラデーション（#35c670 → #b0e481）。
   -webkit-text-stroke は単色しか引けないので、Figmaから書き出した画像に差し替える。
   文字は読み上げ用に残して色だけ透明にする。画像の大きさは em なので、
   SPでフォントを縮めたときに一緒に縮む。 */
.p-top-service__head .c-sec-head__label {
  height: auto;
  background: url(../images/top/label-service.webp) left top / 3.03em 0.8em
    no-repeat;
  color: transparent;
  font-family: Jost, sans-serif;
  font-size: 4.38rem;
  font-weight: 400;
  line-height: 0.8em;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-service__head .c-sec-head__label::after {
  margin-block: 0.75rem 0;
  margin-inline: 0;
}

.p-top-service__head .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-service__lead {
  flex: 0 1 36rem;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: right;
}

.p-top-service__feature {
  display: flex;
  align-items: center;
  gap: 1.88rem;
  width: 100%;
  padding: 2.5rem;
  margin-block-start: 3.75rem;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 1px 0.28rem rgba(0, 0, 0, 0.15);
}

.p-top-service__feature-photo {
  position: relative;
  flex: 0 0 19.12rem;
  aspect-ratio: 306 / 272;
  overflow: hidden;
  border-radius: 0.5rem;
}

.p-top-service__feature-image {
  /* Figmaの画像クロップを元写真の縦横比を保って再現。 */
  position: absolute;
  display: block;
  top: -7.1%;
  left: -10.26%;
  width: 152.22%;
  max-width: none;
  height: auto;
}

.p-top-service__feature-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.p-top-service__feature-title,
.p-top-service__card-title {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  color: #2e363d;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-service__title-text {
  display: block;
  /* flexの子は既定でmin-width:autoのため縮まない。0にして折り返せるようにする。 */
  min-width: 0;
}

.p-top-service__heading-link {
  display: flex;
  align-items: center;
  gap: inherit;
}

/* 見出しリンクの押せる範囲をカード全体に広げる。透明な板を .p-top-service__feature
   いっぱいに敷いて、写真や本文のどこを押しても遷移するようにする。
   カード内の個別リンクは .p-top-service__feature-link の z-index で板より前に出す。 */
.p-top-service__feature {
  position: relative;
}

.p-top-service__heading-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* カード内の個別サービスへのリンクは、それぞれの遷移先を優先する。 */
.p-top-service__feature-link {
  position: relative;
  z-index: 1;
}

.p-top-service__heading-link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.p-top-service__card-link {
  display: block;
  height: 100%;
}

.p-top-service__heading-link,
.p-top-service__card-link {
  color: inherit;
  text-decoration: none;
}

/* hoverは下線ではなく不透明度で反応させる（.p-top-button と同じ挙動に揃える）。 */
.p-top-service__heading-link,
.p-top-service__card-link,
.p-top-company__link,
.p-top-news__row,
.p-top-column .c-card-post__link {
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-top-service__heading-link:hover,
.p-top-service__card-link:hover,
.p-top-company__link:hover,
.p-top-news__row:hover,
.p-top-column .c-card-post__link:hover {
  text-decoration: none;
  opacity: 0.75;
}

.p-top-service__heading-link:focus-visible,
.p-top-service__card-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.p-top-service__arrow {
  display: block;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 0.38rem;
  object-fit: fill;
}

.p-top-service__tags {
  display: flex;
  gap: 1.88rem;
  margin-block-start: 1.25rem;
}

.p-top-service__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.68rem;
  height: 2.5rem;
  border: 1px solid #3da85c;
  border-radius: 1.88rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  font-size: 0.88rem;
  font-weight: 700;
}

.p-top-service__feature-text {
  margin-block-start: 0.62rem;
  font-size: 1rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-service__media {
  width: 100%;
  min-height: 4.62rem;
  margin-block-start: 1.25rem;
}

.p-top-service__media-heading {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  color: #fff;
  font-size: 0.88rem;
}

.p-top-service__media-heading::before,
.p-top-service__media-heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid #aeaeae;
}

.p-top-service__media-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.37rem;
  height: 1.75rem;
  border-radius: 2.5rem;
  background: #aeaeae;
}

.p-top-service__media-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.62rem;
  width: 100%;
  flex-wrap: wrap;
  min-height: 1.62rem;
  margin-block-start: 0.62rem;
  padding: 0;
  list-style: none;
}

.p-top-service__media-item {
  flex: none;
  height: 1.62rem;
}

.p-top-service__media-item--01 {
  width: 5.25rem;
}

.p-top-service__media-item--02 {
  width: 6.5rem;
}

.p-top-service__media-item--03 {
  width: 7.87rem;
}

.p-top-service__media-item--04 {
  width: 7.43rem;
}

.p-top-service__media-item--05 {
  width: 6.06rem;
}

.p-top-service__media-item--06 {
  width: 1.56rem;
  height: 1.56rem;
}

.p-top-service__media-item--07 {
  width: 7.31rem;
}

/* 媒体ロゴは1行に収める。7つ並べると731px要るのに枠は704pxしかないので、
   折り返しをやめてロゴ側を縮める。縮む量は幅に比例して配られるため、
   どのロゴも同じ比率（1440pxで約4%）で小さくなる。
   1200px未満は枠がさらに狭く、縮め過ぎになるのでこれまでどおり折り返す。 */
@media screen and (min-width: 1200px) {
  .p-top-service__media-list {
    flex-wrap: nowrap;
  }

  .p-top-service__media-item {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ロゴは切り出し済みの画像をそのまま表示する。
   以前は余白を含む元画像を絶対配置（％指定）でずらして見せていた。 */
.p-top-service__media-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-top-service__feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-block-start: 1.88rem;
}

.p-top-service__feature-link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: #3da85c;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75rem;
  white-space: normal;
}

.p-top-service__feature-link-text {
  display: block;
}

/* 2つのリンクを横1列に収める。1remのままだと2つで738px要るのに枠は704pxしかない。
   文字を1段下げ、リンク同士の間を詰めて664px+32pxにする。
   1280px未満は枠がさらに狭いので、これまでどおり縦に積む。 */
@media screen and (min-width: 1280px) {
  .p-top-service__feature-links {
    gap: 1rem 2rem;
  }

  .p-top-service__feature-link {
    font-size: 0.88rem;
  }
}

.p-top-service__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.88rem;
  margin-block-start: 2.5rem;
  padding: 0;
  list-style: none;
}

.p-top-service__card {
  min-height: 0;
  overflow: hidden;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 1px 0.31rem rgba(0, 0, 0, 0.15);
}

.p-top-service__image {
  width: 100%;
  height: 8.75rem;
  overflow: hidden;
}

.p-top-service__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.p-top-service__card--01 .p-top-service__card-image {
  height: 151.5%;
  transform: translateY(-9.15%);
}

/* カード内の余白は .p-top-service__card-body がまとめて持つ。
   見出し・本文それぞれに左右マージンを振らない。 */
.p-top-service__card-body {
  padding-block: 1.88rem;
  padding-inline: 1.25rem;
}

.p-top-service__card-title {
  gap: clamp(0.75rem, 2.5vw, 1.88rem);
  /* 上下はブラウザ既定の見出しマージンの打ち消し。余白は card-body 側で取る。 */
  margin-block: 0;
  color: #2e363d;
  font-size: 1.25rem;
}

.p-top-service__card-text {
  /* 上=見出しとの間隔（要素間の余白は上方向に取る）／ 下=既定マージンの打ち消し。 */
  margin-block: 1.25rem 0;
  color: #333;
  font-size: 1rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 1024px) {
  .p-top-service {
    min-height: 0;
    height: auto;
    /* 左右の余白は .l-inner（.p-top-service__inner）が持つ。 */
    padding-block: 6.25rem;
    padding-inline: 0;
  }
  .p-top-service__inner {
    width: 100%;
    max-width: 100%;
  }
  .p-top-service__feature {
    padding: 1.88rem;
  }
  .p-top-service__feature-photo {
    flex-basis: 32%;
  }
  .p-top-service__tags {
    flex-wrap: wrap;
    gap: 0.62rem;
  }
  .p-top-service__feature-body,
  .p-top-service__media,
  .p-top-service__media-list {
    width: 100%;
  }
  .p-top-service__media-list {
    gap: 0.62rem;
  }
  /* 2列にする指定は 769〜1024px のブロックにある。
     768px以下は別途1列にしているので、ここでは列数を触らない。 */
}
@media screen and (max-width: 768px) {
  .p-top-service {
    padding-block: 4.5rem 3rem;
    padding-inline: 0;
  }
  .p-top-service__head {
    display: block;
    height: auto;
  }
  .p-top-service__head .c-sec-head,
  .p-top-service__lead {
    width: 100%;
  }
  .p-top-service__head .c-sec-head__label {
    font-size: 3.25rem;
  }
  .p-top-service__lead {
    margin-block-start: 1rem;
    line-height: 1.8;
    text-align: left;
    font-size: 14px;
  }
  .p-top-service__feature {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-block-start: 2.5rem;
    padding: 1.25rem;
    gap: 0.8rem;
  }
  .p-top-service__feature-photo,
  .p-top-service__feature-body {
    flex-basis: auto;
    width: 100%;
  }
  /* スマホでは写真を切り抜かず、元の比率のまま出す。
     PCはFigmaのクロップ（正方形に近い枠＋中の画像を拡大してずらす）だが、
     横幅いっぱいになるスマホでは拡大ぶんが効きすぎて絵柄が寄ってしまう。 */
  .p-top-service__feature-photo {
    aspect-ratio: auto;
  }
  .p-top-service__feature-image {
    position: static;
    width: 100%;
    height: auto;
  }
  .p-top-service__feature-title {
    font-size: 1.38rem;
  }
  /* 3つを横1列に収める。最小幅6remと左右の余白のままだと、390px幅で
     「動画広告」が次の行に落ちていた。折り返し自体は残してあるので、
     320px級のさらに狭い端末では従来どおり2行になる。 */
  .p-top-service__tags {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .p-top-service__tag {
    width: auto;
    min-width: 0;
    height: 1.88rem;
    padding-inline: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .p-top-service__media {
    height: auto;
  }
  .p-top-service__media-list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem;
    height: auto;
  }
  .p-top-service__media-item {
    transform: none;
  }
  .p-top-service__feature-links {
    flex-direction: column;
    gap: 0.88rem;
  }
  .p-top-service__feature-link {
    white-space: normal;
    font-size: 0.88rem;
  }
  .p-top-service__cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .p-top-service__card {
    height: auto;
    min-height: 100%;
  }
  /* 12文字の見出し（「データマネジメント・解析」等）が矢印の左に収まるサイズ。
     22pxのままだと360px幅で1文字だけ次行に落ちる。 */
  .p-top-service__card-title {
    font-size: 1.12rem;
  }

  .p-top-service__card-text,
  .p-top-service__feature-text {
    font-size: 16px;
  }
}

.p-top-about {
  position: relative;
  padding-block-start: 5rem;
  overflow: hidden;
  border-radius: 3.12rem;
  background: linear-gradient(90deg, #35c670 0%, #b0e481 100%);
  color: #333;
}

.p-top-about::before,
.p-top-about::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  /* 画像は表示寸法の2倍で書き出してあるので、枠に合わせて縮める。 */
  background-size: contain;
  pointer-events: none;
}

/* Figma 422:189 / 186。十字2個で1枚の画像（about-cross-01.webp）。
   見出しの右の、白いカードが載らない位置に置く。元の位置（top 42.94rem）は
   カードの真下に入ってしまい、下端が数十pxしか見えていなかった。
   色は背景のグラデーションの濃い側に載るので、薄いほうの緑にする。 */
.p-top-about::before {
  bottom: 6rem;
  left: 1rem;
  width: 15.56rem;
  height: 18rem;
  background-image: url(../images/top/about-cross-01.webp);
}

/* Figma 422:192 / 195。こちらは背景の薄い側に載るので濃いほうの緑にする。 */
.p-top-about::after {
  top: 6rem;
  right: 4rem;
  width: 7.62rem;
  height: 9.75rem;
  background-image: url(../images/top/about-cross-02.webp);
}

.p-top-about__inner {
  position: relative;
  z-index: 1;
}

.c-sec-head--about {
  color: #fff;
  text-align: left;
}

.c-sec-head--about .c-sec-head__label {
  height: 1.62rem;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.c-sec-head--about .c-sec-head__sub {
  margin-block-start: 0;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

/* このセクションだけ、サブコピーと社名をまとめて1つの h1 にしている
   （他セクションは p + h2）。中身は span なので、p・h2 だったときに
   ブラウザ既定で付いていた余白がすべて消える。この案件は見出しの余白を
   既定値に委ねているため（styles.css の .p-subheader__title 参照）、
   同じ間隔になるよう下の3ルールで作り直す。 */
.c-sec-head__heading {
  /* h1 の既定値（font-size:2em・margin:0.67em・bold）を打ち消す。
     中の span は自前で rem 指定するので、継承値が効くのは余白だけ。 */
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
}

.c-sec-head__heading .c-sec-head__sub,
.c-sec-head__heading .c-sec-head__title {
  display: block;
}

.c-sec-head--about .c-sec-head__sub {
  /* p だったときの下マージン（1em）。文字サイズがSPで変わっても
     同じ比率で追従するよう em のままにしている。 */
  margin-block-end: 1em;
}

.c-sec-head--about .c-sec-head__title {
  margin-block-start: 0.62rem;
  /* h2 だったときの下マージン（0.83em）。 */
  margin-block-end: 0.83em;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.p-top-about__body {
  margin-block-start: 3.12rem;
  padding-block: 3rem;
  padding-inline: 3.25rem;
  border-radius: 0.62rem;
  background: #fff;
}

/* この案件は見出しの余白をブラウザ既定に委ねている（styles.css の
   .p-subheader__title 参照）。h3→h2 でタグを変えると上下の余白が
   1em から 0.83em に変わるため、従来の見え方（1em）を明示して固定する。 */
.p-top-about__intro {
  width: 68.37rem;
  max-width: 100%;
  /* 見出し自身は余白を持たない（h2の既定マージンも打ち消す）。
     下との間隔は .p-top-about__content 側で持たせる。 */
  margin-block: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-about__content {
  display: grid;
  grid-template-columns: minmax(0, 753fr) minmax(0, 310fr);
  /* Figma(1920px)の space-between 相当の30px。列はfrなので狭い幅では列側が縮む。 */
  gap: 1.88rem;
  justify-content: space-between;
  align-items: start;
  width: 68.31rem;
  max-width: 100%;
  /* 上の見出し（.p-top-about__intro）との間隔はここで持つ。 */
  margin-block-start: 1.75rem;
}

.p-top-about__text {
  width: 100%;
}

.p-top-about__points {
  display: flex;
  /* ピル2つで650px必要。列幅が足りない画面では1行に詰めず折り返す
     （PC幅では1行のまま）。高さはピル自身が持つ。 */
  flex-wrap: wrap;
  gap: 1.25rem;
}

.p-top-about__point {
  display: flex;
  align-items: center;
  gap: 0.88rem;
  height: 3.75rem;
  padding-inline: 3.12rem;
  border: 1px solid #3da85c;
  border-radius: 1.88rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  /* 2つのボタンは常に同じ幅にする（中身の多い02に合わせる）。 */
  width: 20.25rem;
}

.p-top-about__point--02 {
  gap: 0.75rem;
}

.p-top-about__point-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.12rem;
}

.p-top-about__point-emphasis {
  font-size: 1.12rem;
  line-height: 1.75rem;
}

.p-top-about__point-number {
  font-size: 1.5rem;
  font-style: normal;
}

/* 2つ目のピルだけFigmaの指定が違う（強調20px・1行目の行送り20px）。 */
.p-top-about__point--02 .p-top-about__point-text {
  line-height: 1.25rem;
}

.p-top-about__point--02 .p-top-about__point-emphasis {
  font-size: 1.25rem;
}

.p-top-about__point-icon {
  position: relative;
  flex: 0 0 1.93rem;
  width: 1.93rem;
  height: 2.25rem;
  overflow: hidden;
}

.p-top-about__point-sprite {
  position: absolute;
  display: block;
  max-width: none;
}

.p-top-about__point-icon.--limit .p-top-about__point-sprite {
  top: -53.09%;
  left: -1306.45%;
  width: 2361.29%;
  height: 661.73%;
}

.p-top-about__point-icon.--direct .p-top-about__point-sprite {
  top: -545.83%;
  left: -845.1%;
  width: 2572.52%;
  height: 704.67%;
}

.p-top-about__subheading {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  /* 下の余白はもともと h4 のブラウザ既定（1.33em）だったもの。
     p に変えても見た目が変わらないよう、同じ値を明示する。 */
  margin-block: 2.5rem 0;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.2;
}

/* 2つ目の小見出し（「主な実績例」）だけ上の余白を詰める。
   :nth-of-type はタグの種類で数えるため、タグを変えるとずれる。
   「説明文の直後にある小見出し」という関係で指定する。 */
.p-top-about__detail + .p-top-about__subheading {
  margin-block-start: 1.88rem;
}

.p-top-about__subheading::before {
  content: "";
  flex: 0 0 0.81rem;
  width: 0.81rem;
  height: 1.12rem;
  border-radius: 999px;
  background: linear-gradient(
    225deg,
    rgba(176, 228, 129, 0.7),
    rgba(53, 198, 112, 0.7)
  );
}

.p-top-about__detail {
  max-width: 43.93rem;
  margin-block-start: 0.88rem;
  font-size: 1rem;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
}

.p-top-about__achievements {
  margin-block-start: 0.88rem;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-about__achievement::before {
  content: "・";
}

.p-top-about__achievement + .p-top-about__achievement {
  margin-block-start: 0.31rem;
}

.p-top-about__image {
  width: 19.37rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 310 / 286;
  margin: 0;
}

.p-top-about__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

.p-top-about__commitment {
  position: relative;
  height: 21rem;
}

.p-top-about__president-image {
  position: absolute;
  top: -2.12rem;
  left: 4.75rem;
  z-index: 2;
  width: 15.81rem;
  height: 23.5rem;
  margin: 0;
  overflow: hidden;
}

.p-top-about__president-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-about__president-name {
  position: absolute;
  top: 10.38rem;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  width: 9rem;
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-about__president-name strong {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.p-top-about__commitment-card {
  position: absolute;
  top: 2.5rem;
  right: 0;
  width: 52.43rem;
  max-width: 100%;
  min-height: 13.5rem;
  padding-block: 1.5rem;
  padding-inline: 1.06rem;
  border-radius: 0.62rem;
  background: #fafdf6;
}

.p-top-about__commitment-card::before {
  content: "";
  position: absolute;
  top: 5.94rem;
  left: -1.19rem;
  width: 1.62rem;
  height: 1.62rem;
  background: #fafdf6;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.p-top-about__commitment-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.68rem;
  height: 1.88rem;
  margin: 0;
  margin-inline-start: -0.5rem;
  border-radius: 1.88rem;
  background: linear-gradient(90deg, #35c670, #b0e481);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.p-top-about__commitment-heading {
  margin-block-start: 0.62rem;
  color: #333;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.88rem;
}

.p-top-about__commitment-heading strong {
  color: #3ca85d;
  font-size: 1.5rem;
}

.p-top-about__commitment-text {
  margin-block-start: 0.62rem;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8rem; /* 単位なしだと太字（1.19rem）の行だけ行間が広がるため、固定値にする */
  letter-spacing: -0.01em;
}

/* Figma 422:239 は区切り線ではなく「成果に向き合い続ける体制」の下線（#ddff5a・3px）。 */
.p-top-about__commitment-text strong {
  font-size: 1.19rem;
  text-decoration: underline;
  text-decoration-color: #ddff5a;
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

@media screen and (max-width: 1024px) {
  .p-top-about {
    height: auto;
    /* 左右の余白は .l-inner（.p-top-about__inner）が持つので、ここでは付けない。 */
    padding-block: 5rem;
    padding-inline: 0;
  }
  .p-top-about__inner {
    max-width: 100%;
  }
  .p-top-about__body {
    height: auto;
  }
  .p-top-about__intro,
  .p-top-about__content,
  .p-top-about__text {
    width: 100%;
    height: auto;
  }
  .p-top-about__detail {
    max-width: none;
  }
  .p-top-about__content {
    grid-template-columns: 1fr 16.25rem;
    gap: 1.5rem;
  }
  .p-top-about__points {
    height: auto;
    flex-wrap: wrap;
  }
  /* ピルはPCの固定幅(306px/324px)のままだと列幅を超えるので、列いっぱいに広げる。 */
  .p-top-about__point,
  .p-top-about__point--01,
  .p-top-about__point--02 {
    width: 100%;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  .p-top-about__commitment {
    height: auto;
    padding-block-start: 2rem;
  }
  .p-top-about__president-image,
  .p-top-about__president-name,
  .p-top-about__commitment-card {
    position: relative;
    inset: auto;
  }
  .p-top-about__president-image {
    width: 11rem;
    height: auto;
    margin-inline: auto 0;
  }
  .p-top-about__president-name {
    position: absolute;
    top: 11.88rem;
    left: 0;
  }
  .p-top-about__commitment-card {
    width: 100%;
    min-height: 0;
    margin-block-start: -1.25rem;
  }
}
@media screen and (max-width: 768px) {
  .p-top-about {
    padding-block: 2.38rem 4.38rem;
    padding-inline: 0;
    border-radius: 1.5rem;
  }
  .p-top-about::before,
  .p-top-about::after {
    display: none;
  }
  .c-sec-head--about .c-sec-head__sub {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .c-sec-head--about .c-sec-head__title {
    font-size: 1.75rem;
  }
  .p-top-about__body {
    margin-block-start: 2rem;
    padding: 1.5rem;
  }
  .p-top-about__intro {
    font-size: 16px;
    line-height: 1.8;
  }
  .p-top-about__content {
    margin-block-start: 1.25rem;
    display: flex;
    flex-direction: column;
  }
  .p-top-about__text {
    width: 100%;
  }
  .p-top-about__points {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .p-top-about__point,
  .p-top-about__point--01,
  .p-top-about__point--02 {
    padding-inline: 1.38rem;
  }
  /* 320px級の端末では1行に収まらないため折り返しを許可する。 */
  .p-top-about__point-text {
    white-space: normal;
  }
  .p-top-about__subheading {
    margin-block-start: 1.75rem;
    font-size: 1.19rem;
  }
  /* 同じセクション内の本文（こだわり欄）が 0.94rem なので、そちらに合わせる。 */
  .p-top-about__detail,
  .p-top-about__achievements {
    font-size: 14px;
    line-height: 1.8;
  }
  /* PCの「実績例の前だけ広げる」指定（1.88rem）が詳細度でSPにも効いていて、
     1つ目28px・2つ目30pxとばらついていたので揃える。 */
  .p-top-about__detail + .p-top-about__subheading {
    margin-block-start: 1.75rem;
  }
  /* 本文を大きくしたぶん、実績リストの行同士も詰まりすぎないようにする。 */
  .p-top-about__achievement + .p-top-about__achievement {
    margin-block-start: 0.5rem;
  }
  .p-top-about__image {
    width: 100%;
    height: auto;
    margin-block-start: 1.5rem;
  }
  .p-top-about__photo {
    height: auto;
    max-height: 17.88rem;
  }
  .p-top-about__commitment {
    display: flex;
    flex-direction: column;
    padding-block-start: 2rem;
  }
  /* SPでは代表写真と氏名を出さない。 */
  .p-top-about__president-image,
  .p-top-about__president-name {
    display: none;
  }
  .p-top-about__commitment-card {
    order: 2;
    margin-block-start: 0;
    padding: 1.25rem;
  }
  .p-top-about__commitment-card::before {
    display: none;
  }
  .p-top-about__commitment-label {
    width: 11.87rem;
    margin-inline: auto;
    font-size: 0.88rem;
  }
  .p-top-about__commitment-heading {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .p-top-about__commitment-heading strong {
    font-size: 1.25rem;
  }
  .p-top-about__commitment-text {
    font-size: 0.94rem;
    line-height: 1.8;
  }
  .p-top-about__commitment-text strong {
    font-size: inherit;
  }
}

/* FVは1920px幅のデザインを画面幅に比例させる。寸法は vw で書き、
   1920pxを超えたぶんはファイル末尾のメディアクエリでデザイン値に固定する。
   remを使わないのは、remは画面幅で変わらず、FVが縮まないと右の十字とぶつかるため。
   文字サイズは、その十字とぶつからない範囲で決めている。 */
.p-top-fv {
  position: relative;
  overflow: hidden;
  /* 上下の余白はセクションが持つ。左右は .l-inner（= __inner）に任せる。
     高さは中身＋この余白で決まる（十字のアートワークは絶対配置で高さを持たない）。 */
  padding-block: 8rem 6rem;
  color: #333;
}

.p-top-fv__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Figma 422:935の下地テクスチャ＋グラデーションを1枚に焼いたもの。
     大きな十字（.p-top-fv__artwork）はアニメーション用に別要素のまま。 */
  background: #f7f7f8 url(../images/top/fv-background.webp) center top / cover
    no-repeat;
}

.p-top-fv__artwork {
  position: absolute;
  /* Figma: x=1143, y=138, 570px角（1920px幅）。1920px未満は画面幅に比例させ、
     それ以上ではデザイン値で頭打ちにする。 */
  /* 位置は親（FV）の枠に対する割合。Figmaの 138 / 920 = 15%。 */
  top: 15%;
  /* Figmaの位置は 10.75% だが、それだと1440pxで見出しとの余白が15pxしか残らない。
     右のスパーク（枠外に出る装飾）が画面端で切れない範囲まで右に寄せて逃げを作る。 */
  right: 8%;
  /* 1920pxを超えても十字だけ大きくならないよう、デザイン値で止める。 */
  width: 29.7vw;
  aspect-ratio: 1;
  pointer-events: none;
}

.p-top-fv__photo {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-fv__photo-tint {
  position: absolute;
  background: linear-gradient(
    200deg,
    rgb(176 228 129 / 20%) 18%,
    rgb(53 198 112 / 20%) 88%
  );
}

/* 以下の % は、いずれも写真の枠（デザイン570px角）に対する比率。 */
.p-top-fv__photo-tint--horizontal {
  inset: 38.1% 0 auto;
  height: 23.7%;
  border-radius: 100px;
}

.p-top-fv__photo-tint--top,
.p-top-fv__photo-tint--bottom {
  left: 38.1%;
  width: 23.7%;
  height: 38.2%;
}

.p-top-fv__photo-tint--top {
  top: 0;
  border-radius: 100px 100px 0 0;
}

.p-top-fv__photo-tint--bottom {
  bottom: 0;
  border-radius: 0 0 100px 100px;
}

/* 写真と独立。transformで移動・回転させる。 */
.p-top-fv__orb {
  position: absolute;
  top: 38.1%;
  left: 70.2%;
  width: 29.8%;
  aspect-ratio: 170 / 135;
  border-radius: 100px;
  background: linear-gradient(90deg, #35c670, #b0e481);
  animation: p-top-fv-orb-travel 24s ease-in-out infinite;
  animation-delay: -1.9s;
}

/* 背景写真（十字）の腕に沿ってオーブを往復させる。
   数値は 570px のデザイン座標から出した移動量で、%はオーブ自身の大きさ基準。
     静止位置（右腕の先端）中心 = (485, 284.5)／十字の中心 = (284.5, 284.5)
   縦の腕は幅135しかなく、オーブ（170×135）は横長のままでは入らない。
   回転させると回っている途中に腕からはみ出すので、中央でいったん135×135の丸に
   縮めてから縦に伸ばす。横→丸→縦の2段階にすることで、どの瞬間も腕の中に収まる。
     scaleX 135/170 = 0.794 ／ scaleY 170/135 = 1.259 */
@keyframes p-top-fv-orb-travel {
  0%,
  8% {
    transform: translate(0, 0) scale(1, 1);
  }
  24% {
    transform: translate(-235.3%, 0) scale(1, 1);
  }
  32% {
    transform: translate(-117.9%, 0) scale(1, 1);
  }
  36% {
    transform: translate(-117.9%, 0) scale(0.794, 1);
  }
  40% {
    transform: translate(-117.9%, 0) scale(0.794, 1.259);
  }
  54% {
    transform: translate(-117.9%, -147.8%) scale(0.794, 1.259);
  }
  70% {
    transform: translate(-117.9%, 148.5%) scale(0.794, 1.259);
  }
  82% {
    transform: translate(-117.9%, 0) scale(0.794, 1.259);
  }
  86% {
    transform: translate(-117.9%, 0) scale(0.794, 1);
  }
  90% {
    transform: translate(-117.9%, 0) scale(1, 1);
  }
  100% {
    transform: translate(0, 0) scale(1, 1);
  }
}

/* 動きを減らす設定のときは止めて、デザインどおりの位置で置く。 */
@media (prefers-reduced-motion: reduce) {
  .p-top-fv__orb {
    animation: none;
  }
}

.p-top-fv__spark {
  position: absolute;
  aspect-ratio: 1;
}

.p-top-fv__spark--small {
  top: 5.6%;
  left: 89.3%;
  width: 8.4%;
}

.p-top-fv__spark--large {
  top: 17.5%;
  left: 95.3%;
  width: 15.4%;
}

.p-top-fv__spark::before,
.p-top-fv__spark::after {
  content: "";
  position: absolute;
  inset: 42% 0;
  border-radius: 100px;
  background: #8bdb7c;
}

.p-top-fv__spark::after {
  transform: rotate(90deg);
}

/* 横幅と左右の余白は他セクションと同じく共通の .l-inner に任せる。
   上下の余白は .p-top-fv 側が持つので、ここでは重ね順だけを指定する。 */
.p-top-fv__inner {
  position: relative;
  z-index: 5;
}

.p-top-fv__eyebrow {
  font-size: 1.6vw;
  font-weight: 700;
  line-height: 1.4;
}

.p-top-fv__title {
  margin-block-start: 12px;
  font-size: 3.1vw;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.p-top-fv__title-large {
  font-size: 3.6vw;
}

.p-top-fv__lead {
  margin-block-start: 1.5vw;
  font-size: 1.25vw;
  font-weight: 600;
  line-height: 1.7;
}

.p-top-fv__actions {
  display: flex;
  gap: 20px;
  margin-block-start: 3.8vw;
}

/* ボタンも同じ比率で縮める（共通の .p-top-button を上書き）。 */
.p-top-fv__actions .p-top-button {
  width: 21vw;
  height: 3.8vw;
  /* 共通ボタンの min-height（3.5rem）を外して、上の height を効かせる。 */
  min-height: 0;
  border-radius: 10px;
  /* 文字もボタンと同じ比率で縮める（1920px時のデザイン値 27px ÷ 1920 ≒ 1.4vw）。
     rem固定だと、狭い画面ほどボタンだけ縮んで文字が相対的に大きく見える。 */
  font-size: 1.4vw;
}

.p-top-button .p-top-fv__button-note {
  bottom: calc(100% + 6px);
  color: #333;
  font-size: 0.85vw;
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 1024px) {
  .p-top-fv__inner {
    padding-inline-start: 2.5rem;
  }
  .p-top-fv__eyebrow {
    font-size: 1.25rem;
  }
  .p-top-fv__title {
    width: 58%;
    /* 1025px以上のvw指定は狭い画面だと小さくなりすぎるので、ここから下はremで持つ。 */
    margin-block-start: 1.75rem;
    font-size: 2.38rem;
    line-height: 1.55;
  }
  .p-top-fv__title-large {
    font-size: 2.75rem;
  }
  .p-top-fv__actions {
    gap: 1.25rem;
  }
  /* ベース側が .p-top-button .p-top-fv__button-note なので、詳細度を合わせる。 */
  .p-top-button .p-top-fv__button-note {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 768px) {
  .p-top-fv {
    padding-block: 2.5rem 2rem;
  }
  /* 背景はPCと同じくFV全体の下地（absolute/inset:0）のまま。
     SPで relative の帯にすると、文字の上に別ブロックが積まれた形になりFVとして成立しない。
     縦長になるぶん cover だと画像の中央しか映らないので、横幅基準で上部に敷く。
     切り出しは左寄り：元画像は「左＝緑のモザイク／中央＝白／右＝グレーのモザイク」で、
     centerのままだと右のグレーだけが四角く浮いて見えるため。 */
  /* 下地はPCと同じ濃さのまま出す（白を重ねると模様がほとんど消えてしまう）。
     読みやすさは、見出しとリード文の間を空けて下地の見える場所を作ることで取る。 */
  .p-top-fv__visual {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    background-position: 20% top;
    background-size: 190% auto;
    /* 画像の下端の色に合わせて、画像が途切れる位置で継ぎ目が出ないようにする。 */
    background-color: #f6f7f4;
  }
  /* PCと同じく右上の装飾として、文字の背面に置く（__innerがz-index:5で前面）。
     十字の右下の装飾（.p-top-fv__spark--large）は枠の幅の約11%ぶん右へはみ出すので、
     右端はその分を空けて、十字も装飾も画面内に収める（11.5rem の11%で約20px）。
     文字とは重なるが、__inner が前面なので読みづらくはならない。 */
  .p-top-fv__artwork {
    top: 5rem;
    right: 1.5rem;
    left: auto;
    width: 11.5rem;
    transform: none;
  }
  /* 十字は見出しの右の空きに入れるので、テキストは画面の上の方から始める。 */
  .p-top-fv__inner {
    padding-inline: 1.25rem;
  }
  /* 22文字を1行に収める（1remだと「援」だけが2行目に落ちる）。
     320px級の端末でも折り返さないよう、画面幅に応じて少し縮める。 */
  .p-top-fv__eyebrow {
    font-size: clamp(0.75rem, 3.8vw, 0.88rem);
    line-height: 1.5;
    letter-spacing: -0.02em;
  }
  .p-top-fv__title {
    width: 100%;
    margin-block-start: 0.75rem;
    line-height: 1.55;
    letter-spacing: 0.02em;
  }
  .p-top-fv__lead {
    /* 見出しとの間を広めに空けて、下地の模様が見える帯を作る。 */
    margin-block-start: 5rem;
    /* 320px級では1remだと4行に伸びるので、そこだけ少し縮める。 */
    font-size: clamp(0.88rem, 4.4vw, 1rem);
    line-height: 1.8;
  }
  .p-top-fv__actions {
    flex-direction: column;
    gap: 2rem;
    margin-block-start: 2.5rem;
  }
  /* PCの等倍縮小指定（.p-top-fv__actions .p-top-button）を打ち消す。 */
  .p-top-fv__actions .p-top-button {
    width: 100%;
    height: 3.25rem;
    min-height: 3.25rem;
    font-size: 1rem;
  }
}

.p-top-cta {
  position: relative;
  padding-block: 0 5.5rem;
  padding-inline: 0;
  background-image:
    url(../images/top/cta-wave.svg), url(../images/top/cta-bg.svg);
  /* 2枚ともFigmaの同じ箱（1920×497.414）で書き出してあるので、
     同じ指定で重ねればどの画面幅でもぴったり合う。 */
  background-position:
    center top,
    center top;
  background-size:
    100% 100%,
    100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

.p-top-cta__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 本文と写真の間。これまでは figure の既定マージン（16px 40px）が
     たまたま間隔になっていたが、左右に40pxずつ余分に取られるぶん
     本文が11px足りず、見出しが本文からはみ出していた。 */
  gap: 1rem 2.5rem;
  height: 100%;
  padding-block-start: 7rem;
}

.p-top-cta__body {
  min-width: 0;
  flex: 1 1 44.25rem;
  max-width: 44.25rem;
  flex-direction: column;
  align-items: flex-start;
}

.p-top-cta__title {
  position: relative;
  z-index: 0;
  align-items: center;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  min-height: 4.88rem;
  padding-block: 0.69rem 0;
  padding-inline: 0;
  /* 見出しはspanを並べたflex。狭い幅では1行に収まらないので折り返しを許可する
     （PC幅では1行に収まるため見た目は変わらない）。 */
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 800;
  line-height: 5.62rem;
  text-align: center;
  white-space: nowrap;
}

.p-top-cta__title {
  display: inline;
  padding: 0;
  margin-block-end: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-image: linear-gradient(#b0e481, #b0e481);
  background-repeat: no-repeat;
  background-size: 100% 0.69rem;
  background-position: 0 calc(100% - 0.3rem);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.p-top-cta__title::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0.72rem;
  left: 0;
  width: 100%;
  height: 0.69rem;
  background: #b0e481;
}

.p-top-cta__title-main {
  font-size: 3.75rem;
  font-weight: 800;
}

.p-top-cta__title-join {
  font-size: 3.25rem;
  font-weight: 800;
}

.p-top-cta__text {
  width: 100%;
  max-width: 40.93rem;
  min-height: 3.69rem;
  margin-block-start: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-block-start: 3.12rem;
  /* 1200px未満ではボタン2つ＋この左オフセットが本文幅に収まらないので詰める。 */
  margin-inline-start: clamp(0rem, 1.3vw, 1.5rem);
}

.p-top-cta__actions .p-top-button {
  width: 18.75rem;
  height: 3.5rem;
  min-height: 3.5rem;
}

.p-top-button .p-top-cta__button-note {
  /* Figmaでは280px幅の注記を300pxボタンの中央に置く。 */
  left: 0.62rem;
  width: 17.5rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* 画像は余白を切り落とした cta-trim.webp（686×545）を使う。
   以前は余白つきの画像を絶対配置でずらして枠から溢れさせ、overflow:hidden で
   隠していたため、枠が縮む幅（1025〜1200px）でパソコンの右側まで切れていた。 */
.p-top-cta__visual {
  /* 縮ませない。縮むと写真の幅が足りなくなる。文字側が先に詰まる。 */
  flex: none;
  /* figure の既定マージンを消す。間隔は __inner の gap が持つ。 */
  margin: 0;
  /* 686pxの半分＝343px。1440pxでのパソコンの大きさと同じ。 */
  width: 21.44rem;
}

.p-top-cta__image {
  display: block;
  width: 100%;
  aspect-ratio: 686 / 545;
}

@media screen and (max-width: 768px) {
  .p-top-cta {
    height: auto;
    /* 波線はSPでは出さない。帯が縦長になるぶん線が大きく引き伸ばされ、
       デザインの流れと違う見え方になるため、下地だけにする。
       下地はSP用（cta-bg-sp.svg）に差し替える。PC用は箱にぴったり合わせる
       前提の高さなので、縦長のSPだと上の曲線まで引き伸ばされて大きくなりすぎる。 */
    background-image: url(../images/top/cta-bg-sp.svg);
    background-position: center top;
    /* 幅だけを合わせる。曲線の深さは画面幅に比例し、PCと同じ見え方になる。 */
    background-size: 100% auto;
  }
  /* 背景の cta-bg.svg は上端が透明な曲線で、その透けた部分に前のセクションの緑が
     見えることで曲線の継ぎ目になる。PCと違いSPは重なりが無く、前のセクションの
     下端が直線のまま見えていたので、透明部分のぶんだけ食い込ませる。 */
  .p-top-choice + .p-top-cta {
    margin-block-start: -4.5rem;
  }
  .p-top-cta__inner {
    flex-direction: column-reverse;
    height: auto;
    padding-block-start: 0;
  }
  .p-top-cta__body {
    /* 縦積み（column-reverse）では flex-basis が高さに効くため、
       PC用の 44.25rem が余白として残ってしまう。ここでは内容なりにする。 */
    flex: none;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .p-top-cta__title {
    width: -webkit-fit-content;
    width: fit-content;
    min-height: 0;
    height: auto;
    padding-block: 0 0.38rem;
    line-height: 1.4;
    white-space: normal;
  }
  .p-top-cta__title {
    margin-block-end: 0;
    background: none; /* image / repeat / size / position をまとめて初期化 */
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }
  .p-top-cta__title::after {
    display: none;
  }
  .p-top-cta__title-main {
    font-size: 2.12rem;
  }
  .p-top-cta__title-join {
    font-size: 1.75rem;
  }
  .p-top-cta__text {
    width: 100%;
    height: auto;
  }
  .p-top-cta__break {
    display: none;
  }
  .p-top-cta__actions {
    flex-direction: column;
    width: 100%;
    gap: 2.38rem;
    margin-inline-start: 0;
  }
  .p-top-cta__actions .p-top-button {
    width: 100%;
  }
  .p-top-button .p-top-cta__button-note {
    left: 0;
    width: 100%;
  }
  .p-top-cta__visual {
    flex: none;
    width: 13.75rem;
  }
}

.p-column .c-sec-head {
  color: #fff;
}

.p-column .c-sec-head__label {
  height: 3.88rem;
  font-size: 5rem;
  font-weight: 400;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
}

.p-column .c-sec-head__label::after {
  background: #fff;
}

.p-column .c-sec-head__title {
  margin-block-start: 1.56rem;
  font-size: 1.38rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 768px) {
  .p-column .c-sec-head__label {
    height: auto;
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-column .c-sec-head__title {
    margin-block-start: 1.5rem;
    font-size: 1.12rem;
  }
}
.p-top-column {
  padding-block: 6.25rem;
  padding-inline: 0;
  background: linear-gradient(
    214.857deg,
    rgba(176, 228, 129, 0.7) 17.6%,
    rgba(53, 198, 112, 0.7) 87.7%
  );
}

.p-top-column .c-sec-head {
  color: #fff;
}

.p-top-column .c-sec-head__label {
  height: auto;
  font-size: 5rem;
  font-weight: 400;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
}

.p-top-column .c-sec-head__label::after {
  background: #fff;
}

.p-top-column .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.p-top-column__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.88rem;
  margin-block-start: 3.69rem;
}

.p-top-column .c-card-post {
  overflow: hidden;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 1px 0.28rem rgba(0, 0, 0, 0.15);
}

.p-top-column .c-card-post__link {
  min-height: 100%;
  background: #fff;
}

.p-top-column .c-card-post__thumb {
  height: 11.88rem;
  aspect-ratio: auto;
  background: #c4c4c4;
}

.p-top-column .c-card-post__thumb-placeholder {
  /* アイキャッチ未設定の記事に出す共通のダミー画像。 */
  background: #fff url(../images/common/thumb-default.webp) no-repeat center /
    cover;
}

.p-top-column .c-card-post__content {
  display: flex;
  flex-direction: column;
  min-height: 13.5rem;
  padding-block: 1.88rem 1rem;
  padding-inline: 1.25rem;
}

.p-top-column .c-card-post__meta {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  margin: 0;
  color: #c2c2c2;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.p-top-column .c-card-post__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6rem;
  height: 1.75rem;
  padding-inline: 0.88rem;
  border: 1px solid #3da85c;
  border-radius: 1.88rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
}

.p-top-column .c-card-post__title {
  min-height: 5.38rem;
  margin: 0;
  padding-block: 0.62rem;
  color: #2e363d;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.9;
}

.p-top-column .c-card-post__more {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.44rem;
  margin-block-start: auto;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 0.88rem;
  line-height: 1;
}

.p-top-column .c-card-post__more-label {
  display: block;
}

.p-top-column .c-card-post__more-icon {
  position: relative;
  display: block;
  flex: 0 0 1.37rem;
  width: 1.37rem;
  height: 1.38rem;
}

.p-top-column .c-card-post__more-circle {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-column .c-card-post__more-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  /* 矢印SVGは preserveAspectRatio="none" なので、枠の形にそのまま伸びる。
     12×7 だと22pxの丸に対して三角が大きいので、形は変えずに約83%へ縮める。 */
  width: 10px;
  height: 5.8px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.p-top-column .c-card-post__link > .c-card-post__meta {
  margin-block: 1.88rem 0;
  margin-inline: 1.25rem;
}

.p-top-column .c-card-post__link > .c-card-post__title {
  min-height: 8.25rem;
  margin-block: 1.25rem 0;
  margin-inline: 1.25rem;
  padding-block-end: 1.62rem;
}

@media screen and (max-width: 1024px) {
  .p-top-column__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .p-top-column {
    padding-block: 4.38rem;
    padding-inline: 0;
  }
  .p-top-column .c-sec-head__label {
    height: auto;
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-column .c-sec-head__title {
    margin-block-start: 0.75rem;
    font-size: 1.12rem;
  }
  .p-top-column__list {
    grid-template-columns: 1fr;
    margin-block-start: 3rem;
  }
  .p-top-column .c-card-post__content {
    min-height: 11.88rem;
  }
}
.p-top-news {
  padding-block: 7rem 5rem;
  padding-inline: 0;
  background: #fff;
}

.p-top-news__inner {
  display: flex;
  flex-direction: column;
}

.p-top-news .c-sec-head {
  order: 1;
}

.p-top-news .c-sec-head__label {
  height: 0.84em;
  background: url(../images/top/label-news.svg) center top / 2.25em 0.84em
    no-repeat;
  color: transparent;
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-news .c-sec-head__label::after {
  margin-block: 0;
  margin-inline: auto;
}

.p-top-news .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.p-top-news__list {
  order: 2;
  margin-block-start: 2rem;
  border-top: 0;
}

.p-top-news__row {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  min-height: 0;
  padding: 1.75rem 0;
  border-bottom: 1px solid #dcdcdc;
}

.p-top-news__date {
  flex: 0 0 auto;
  color: #c2c2c2;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2.5rem;
  white-space: nowrap;
}

.p-top-news__cat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1.5rem;
  padding-block: 0;
  padding-inline: 1rem;
  border: 1px solid #3da85c;
  border-radius: 1.88rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

.p-top-news__title {
  flex: 0 0 100%;
  min-width: 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .p-top-news {
    min-height: 0;
    padding-block: 4.38rem;
    padding-inline: 0;
  }
  .p-top-news .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-news .c-sec-head__title {
    margin-block-start: 1.5rem;
    font-size: 1.12rem;
  }
  .p-top-news__list {
    margin-block-start: 2.5rem;
  }
  .p-top-news__row {
    column-gap: 0.75rem;
    row-gap: 0;
    height: auto;
    min-height: 7.5rem;
    padding-block: 1rem;
    padding-inline: 0;
  }
  .p-top-news__date {
    font-size: 0.88rem;
  }
  .p-top-news__cat {
    justify-self: start;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    height: 1.88rem;
    padding-block: 0;
    padding-inline: 0.88rem;
    overflow: hidden;
    font-size: 0.81rem;
    line-height: 1.75rem;
    text-overflow: ellipsis;
  }
  .p-top-news__title {
    font-size: 1.06rem;
    line-height: 1.8;
  }
}

.p-top-faq {
  background: #f9f9f9;
}

.p-top-faq__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-faq__inner {
    padding-inline: 1.25rem;
  }
}
.p-top-faq__inner {
  line-height: 1.8;
}
.p-top-faq .p-top-faq__inner .faq_q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .p-top-faq .p-top-faq__inner .faq_q {
    gap: 0.75rem;
    font-size: 1.06rem;
  }
}
.p-top-faq .p-top-faq__inner .faq_q::before {
  content: "Q";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(90deg, var(--site-primary), var(--site-accent));
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .p-top-faq .p-top-faq__inner .faq_q::before {
    width: 2rem;
    height: 2rem;
  }
}

.p-top-faq .p-top-faq__inner .faq_a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.25rem 0;
  margin-inline: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .p-top-faq .p-top-faq__inner .faq_a {
    gap: 0.75rem;
    margin-block-start: 0.88rem;
    font-size: 0.91rem;
  }
}
.p-top-faq .p-top-faq__inner .faq_a::before {
  content: "A";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--site-accent);
  color: var(--site-accent);
  font-weight: bold;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .p-top-faq .p-top-faq__inner .faq_a::before {
    width: 2rem;
    height: 2rem;
  }
}
.p-top-faq .p-top-faq__inner .faq_a > p {
  margin: 0;
}

.p-company .c-sec-head {
  margin-block-start: 5rem;
}
@media screen and (max-width: 768px) {
  .p-company .c-sec-head {
    margin-block-start: 3rem;
  }
}
.p-company .c-sec-head:first-child {
  margin-block-start: 0;
}

.p-company .p-company__inner > .c-sec-head + .wp-block-table {
  margin-block-start: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-company .p-company__inner > .c-sec-head + .wp-block-table {
    margin-block-start: 1.75rem;
  }
}
.p-top-company {
  background: #f9f9f9;
}

.p-top-company__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-company__inner {
    padding-inline: 1.25rem;
  }
}
.p-top-company__inner {
  line-height: 1.8;
}

.p-top-company .p-top-company__inner > .wp-block-table,
.p-top-company .p-top-company__inner > .wp-block-columns {
  max-width: 51.25rem;
  margin-inline: auto;
}

.p-top-company .c-sec-head {
  margin-block-start: 5rem;
}
@media screen and (max-width: 768px) {
  .p-top-company .c-sec-head {
    margin-block-start: 3rem;
  }
}
.p-top-company .c-sec-head:first-child {
  margin-block-start: 0;
}

.p-top-company .p-top-company__inner > .wp-block-columns {
  margin-block-start: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-company .p-top-company__inner > .wp-block-columns {
    margin-block-start: 1.75rem;
  }
}
.p-top-company .p-top-company__inner > .wp-block-columns .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.p-top-company .p-top-company__inner > .wp-block-columns p {
  line-height: 1.9;
}
.p-top-company .p-top-company__inner > .wp-block-columns p + p {
  margin-block-start: 1rem;
}

.p-top-company .p-top-company__inner > .c-sec-head + .wp-block-table {
  margin-block-start: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-company .p-top-company__inner > .c-sec-head + .wp-block-table {
    margin-block-start: 1.75rem;
  }
}

.p-top-company .p-top-company__inner .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
.p-top-company .p-top-company__inner .wp-block-table tbody tr {
  border: none;
}
.p-top-company .p-top-company__inner .wp-block-table td {
  padding-block: 1.4rem;
  padding-inline: 1.5rem;
  border: none;
  border-bottom: 1px solid #d8d8d8;
  font-size: 1rem;
  line-height: 1.8;
  vertical-align: top;
}
@media screen and (max-width: 768px) {
  .p-top-company .p-top-company__inner .wp-block-table td {
    padding: 1rem;
    font-size: 0.91rem;
  }
}
.p-top-company .p-top-company__inner .wp-block-table td:first-child {
  width: 20rem;
  font-weight: bold;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .p-top-company .p-top-company__inner .wp-block-table td:first-child {
    width: auto;
    white-space: normal;
  }
}
.p-top-company .p-top-company__inner .wp-block-table tr:last-child td {
  border-bottom: none;
}
.p-top-company .p-top-company__inner .wp-block-table ul {
  margin: 0;
  padding-inline-start: 1.25rem;
  line-height: 1.6;
}
.p-top-company .p-top-company__inner .wp-block-table ul li + li {
  margin-block-start: 0.25rem;
}
@media screen and (max-width: 768px) {
  .p-top-company .p-top-company__inner .wp-block-table tr {
    display: block;
  }
  .p-top-company .p-top-company__inner .wp-block-table td {
    display: block;
    width: 100%;
  }
  .p-top-company .p-top-company__inner .wp-block-table td:first-child {
    padding-block-end: 0.25rem;
    border-bottom: none;
  }
  .p-top-company .p-top-company__inner .wp-block-table td:last-child {
    padding-block-start: 0;
  }
}

.p-top-button {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18rem;
  min-height: 3rem;
  padding: 0;
  border: 1px solid #2d4c6f;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 0.19rem 0.25rem rgba(0, 0, 0, 0.25);
  color: #2d4c6f;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}
.p-top-button:hover {
  opacity: 0.75;
}
.p-top-button small {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  width: 100%;
  color: #2d4c6f;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.p-top-fv__button-label,
.p-top-cta__button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-inline: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.p-top-button--primary {
  border-color: #f68b1f;
  background: #f68b1f;
  color: #fff;
}

.c-sec-head__label {
  /* p のブラウザ既定マージン（1em）を上だけ打ち消す。ラベルの文字が大きい
     セクションほどセクション上部の余白が増えてしまい、セクション間が不揃いになるため。
     下はラベルと見出しの間隔として使っているので残す。 */
  margin-block-start: 0;
  font-family: Jost, sans-serif;
}

@media screen and (max-width: 768px) {
  .p-top-button {
    width: 100%;
    height: 3.25rem;
    min-height: 3.25rem;
    font-size: 1rem;
  }
}
.p-top-clients {
  /* 下の余白はAboutが負のマージンで54px乗り上げる前提のぶんを含む。 */
  padding-block: 4rem 6rem;
  background: #f9f9f9;
}

.p-top-clients__inner {
  /* box-sizing が content-box なので .l-inner の width:100% を残すと
     「100% ＋ 左右padding」ではみ出す。auto にして余白のぶんだけ内側に収める。 */
  width: auto;
  max-width: 1054px;
  margin-inline: auto;
  /* 余白はロゴ列の1054pxの外側に付く。1134px以上の画面では見た目は変わらず、
     それ未満でロゴが画面端に張り付くのを防ぐ。 */
  padding-inline: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-clients__inner {
    padding-inline: 1.25rem;
  }
}
.p-top-clients__inner {
  text-align: center;
}

.p-top-clients__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}

.p-top-clients__title-note {
  font-size: 1.25rem;
}

.p-top-clients__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ロゴ同士の間隔。個別の margin-left ではなく gap で等間隔にする。 */
  gap: 1.5rem;
  width: 100%;
  min-height: 6.88rem;
  margin-block: 1.2rem 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.p-top-clients__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* ロゴは縦横比がバラバラで、等分にすると横長のものだけ潰れる。そのため1社ずつ
   「見せ幅」を決め、枠の幅は%・高さはremで持たせる（px固定だと1054px未満ではみ出す）。

   ＜ロゴを追加・削除したときの計算手順＞
   (1) 各社の「見せ幅」をpxで決める。基準はFigma 422:87（幅1054px）の
       75 / 234 / 112 / 256 / 212px。新しいロゴは書き出しサイズではなく、
       近い縦横比の既存ロゴと並べて釣り合う大きさにする
       （StockSunは比率5.27でRENECT・DIGIVALUEに近いため高さ48px＝幅253pxとした）。
   (2) 見せ幅の合計 ＋ gap1.5rem×(社数-1) が1054pxに収まるよう、全体を一律縮小する。
       今は 合計1142px ＋ gap24px×5 なので縮小率 (1054-120)/1142 ＝ 0.8178。
   (3) width = 縮小後の幅 ÷ 1054 × 100（%）、height = 縮小後の幅 ÷ 縦横比 ÷ 16（rem）。
       幅の合計88.6148% ＋ gap 120px（11.3852%）＝ ちょうど100%。 */
.p-top-clients__item--beerus {
  /* Beerus 61×87px */
  width: 5.8191%;
  height: 5.42rem;
}
.p-top-clients__item--digivalue {
  /* DIGIVALUE 191×55px */
  width: 18.1555%;
  height: 3.44rem;
}
.p-top-clients__item--laborends {
  /* レイバーエンズ 92×85px */
  width: 8.6898%;
  height: 5.3rem;
}
.p-top-clients__item--myvision {
  /* MyVision 209×29px */
  width: 19.8624%;
  height: 1.79rem;
}
.p-top-clients__item--renect {
  /* RENECT 173×57px */
  width: 16.4486%;
  height: 3.58rem;
}
.p-top-clients__item--stocksun {
  /* StockSun 207×39px */
  width: 19.6394%;
  height: 2.45rem;
}

.p-top-clients__logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ロゴは各社サイトへのリンク。枠いっぱいに広げて、画像の height:100% が効くようにする。 */
.p-top-clients__item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.p-top-case {
  padding-block: 6.25rem;
  padding-inline: 0;
  background: linear-gradient(
    270deg,
    #fff 21%,
    rgba(242, 251, 233, 0.1) 61%,
    rgba(229, 247, 210, 0.2) 100%
  );
}

.p-top-case__inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-top-case__inner {
    padding-inline: 1.25rem;
  }
}

.p-top-case .c-sec-head__label,
.p-top-voice .c-sec-head__label,
.p-top-flow .c-sec-head__label,
.p-top-company .c-sec-head__label {
  color: #fff;
  font-size: 5rem;
  line-height: 1;
  -webkit-text-stroke: 1px #35c670;
}

/* デザインの英字は線が左から右へのグラデーション（#35c670 → #b0e481）で、
   -webkit-text-stroke では単色しか引けない。Figmaから書き出した画像に差し替える。 */
.p-top-case .c-sec-head__label {
  background: url(../images/top/label-case.webp) center top / 2.01em 0.75em
    no-repeat;
  color: transparent;
  line-height: 3.88rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-case .c-sec-head__label::after {
  margin-block: 0.75rem 0;
  margin-inline: auto;
}

.p-top-case .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-case__grid,
.p-top-voice__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.88rem;
  margin-block-start: 3.75rem;
}

/* お客様の声の長さでカードの高さが変わるので、全部いちばん高いカードにそろえる。
   グリッドの既定は行ごとにそろえる動きなので、2列になる幅で行をまたぐとズレる。
   1列になるスマホは、そろえると短いカードに空きが出るだけなので対象外。 */
@media screen and (min-width: 769px) {
  .p-top-case__grid {
    grid-auto-rows: 1fr;
  }
}

.p-top-case__card,
.p-top-voice__card {
  overflow: hidden;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 1px 0.28rem rgba(0, 0, 0, 0.15);
}

/* カード全体をリンクにする。hoverはサイト共通の不透明度に揃える。 */
.p-top-case__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-top-case__link:hover {
  text-decoration: none;
  opacity: 0.75;
}

.p-top-case__image {
  display: block;
  width: 100%;
  height: 11.88rem;
  object-fit: cover;
  object-position: bottom;
}

.p-top-case__image--placeholder {
  /* アイキャッチ未設定の記事に出す共通のダミー画像。 */
  background: #fff url(../images/common/thumb-default.webp) no-repeat center /
    cover;
}

.p-top-case__body {
  position: relative;
  min-height: 19.25rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  background: #fff;
}

.p-top-case__body:not(:has(.p-top-case__text)) {
  min-height: 0;
}

.p-top-case__body:not(:has(.p-top-case__text)) .p-top-case__title {
  border-bottom: 0;
}

.p-top-case__client {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 9.87rem;
  max-width: 100%;
  height: 2.5rem;
  padding-block: 0;
  padding-inline: 1rem;
  border: 1px solid #3da85c;
  border-radius: 1.88rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.p-top-case__card:nth-child(3) .p-top-case__client {
  width: 19.93rem;
  max-width: 100%;
}

.p-top-case__title {
  display: flex;
  align-items: center;
  min-height: 6rem;
  padding-inline: 0;
  border-bottom: 1px solid #c2c2c2;
  color: #2e363d;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 2.38rem;
  letter-spacing: -0.01em;
}

/* 見出しは2行まで。あふれるぶんは「…」。
   行数を止める指定は display の指定とセットなので、h3（中央寄せのflex）ではなく
   中のspanに持たせる。 */
.p-top-case__title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 本文は3行まで。あふれるぶんは「…」。 */
.p-top-case__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-block-start: 1rem;
  font-size: 1rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

/* カードの高さに上限を付け、あふれるぶんは本文を「…」で止める。
   上限で切る役をカードではなく本文に持たせないと、下の余白ごと断ち切られて見える。
   33.75rem（＝1280px幅で540px）の内訳は 写真190 ＋ ボディ348（上下余白60・帯42・
   帯との間19・見出し117・本文の上20・本文3行90）。
   見出しを2行ぶんで固定しているので、本文に残る高さは一定。 */
@media screen and (min-width: 769px) {
  .p-top-case__card {
    max-height: 33.75rem;
  }

  .p-top-case__link {
    display: flex;
    flex-direction: column;
  }

  .p-top-case__image {
    flex: none;
  }

  .p-top-case__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* safe center は、見出しが2行を超えたときに上へはみ出さず下だけ切るため。
     下のマージンは見出し・本文とも既定値がそのまま出ているだけなので外す。
     見出しと本文の間は .p-top-case__text の margin-block-start で足りている。 */
  .p-top-case__title {
    height: 6rem;
    align-items: safe center;
    margin-block-end: 0;
    overflow: hidden;
  }

  .p-top-case__text {
    flex: 1;
    min-height: 0;
    margin-block-end: 0;
  }
}

.p-top-case__result {
  font-size: 1.38rem;
}

.p-top-case__emphasis {
  font-weight: 700;
}

.p-top-policy {
  padding-block: 6.25rem 11.06rem;
  padding-inline: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 255, 255, 0.64)
    ),
    url(../images/top/policy-bg.webp) center/cover no-repeat;
}

.p-top-policy__head {
  /* 大見出し（40.25rem）が収まる幅にする。これより狭いと見出しが枠からはみ出し、
     左に逃がす必要が出て「・Policy」や小見出しと左端がそろわなくなる。 */
  width: 40.5rem;
  max-width: 100%;
}

.p-top-policy__kicker {
  height: 1.62rem;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-policy__title {
  margin-block-start: 0;
  color: #333;
  letter-spacing: -0.01em;
}

.p-top-policy__subtitle {
  display: block;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.62rem;
}

.p-top-policy__title-main {
  display: block;
  width: 40.25rem;
  max-width: 100%;
  margin-block-start: -0.62rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 4.5rem;
  /* 左端は上の「・Policy」「小見出し」とそろえる。 */
  text-align: left;
  white-space: nowrap;
}

.p-top-policy__number {
  color: #3da85c;
  font-size: 3.75rem;
}

.p-top-policy__list {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  margin-block-start: 3.75rem;
  padding: 0;
  list-style: none;
}

.p-top-policy__item {
  display: grid;
  grid-template-columns: 5.56rem minmax(0, 1fr);
  align-items: start;
  gap: 1.88rem;
  width: 100%;
  min-height: 11.94rem;
  padding-block: 1.25rem;
  padding-inline: 2.44rem 3.75rem;
  border-left: 0.69rem solid #35c670;
  background: rgba(255, 255, 255, 0.7);
}

.p-top-policy__item--01 {
  min-height: 13.56rem;
}

.p-top-policy__icon {
  display: block;
  width: 5.56rem;
  height: 5.38rem;
  object-fit: cover;
}

.p-top-policy__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.25rem;
}

.p-top-policy__item-title {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-height: 3.75rem;
  border-bottom: 1px solid #c2c2c2;
  color: #2e363d;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-policy__item-number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.37rem;
  height: 1.69rem;
  border: 2px solid #3da85c;
  border-radius: 20rem;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.p-top-policy__text {
  font-size: 1rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-problem {
  position: relative;
  margin-block-start: -2.88rem;
  padding-block: 6.25rem;
  overflow: hidden;
  border-radius: 3.12rem;
  background: #f1f1f1 url(../images/common/dots-gray.webp) repeat;
}

.p-top-problem__kicker {
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-problem__title {
  margin-block-start: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.p-top-problem__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.88rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* ピルは中身ぶんの幅。文字だけ画面幅に追従させて、タブレット幅でも
   1行に収まるようにする。 */
.p-top-problem__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.88rem;
  max-width: 100%;
  padding-inline: 2.5rem;
  border-radius: 3.12rem;
  background: #fff;
  font-size: clamp(1.12rem, 1.9vw, 1.5rem);
  font-weight: 700;
  line-height: 3.75rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 2つめと4つめは右寄せにして左右に振る。 */
.p-top-problem__item--02,
.p-top-problem__item--04 {
  align-self: flex-end;
}

.p-top-problem__icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
}

.p-top-problem__icon-image {
  position: absolute;
  top: -0.76rem;
  left: -0.34rem;
  width: 12.12rem;
  max-width: none;
  height: 5.32rem;
}

/* 吹き出しのしっぽ。ピルの外へ少しはみ出して付く。 */
.p-top-problem__bubble {
  position: absolute;
  top: 3.25rem;
  width: 1.88rem;
  height: 1.81rem;
}

.p-top-problem__item--01 .p-top-problem__bubble,
.p-top-problem__item--03 .p-top-problem__bubble {
  left: 1.69rem;
}

.p-top-problem__item--02 .p-top-problem__bubble,
.p-top-problem__item--04 .p-top-problem__bubble {
  right: 1.62rem;
}

.p-top-problem__bubble-main {
  position: absolute;
  top: 0;
  width: 1.25rem;
  height: 1.12rem;
}

.p-top-problem__bubble-dot {
  position: absolute;
  top: 1.19rem;
  width: 0.75rem;
  height: 0.62rem;
}

.p-top-problem__item--01 .p-top-problem__bubble-main,
.p-top-problem__item--03 .p-top-problem__bubble-main {
  left: 0;
}

.p-top-problem__item--01 .p-top-problem__bubble-dot,
.p-top-problem__item--03 .p-top-problem__bubble-dot {
  left: 1.12rem;
}

.p-top-problem__item--02 .p-top-problem__bubble-main,
.p-top-problem__item--04 .p-top-problem__bubble-main {
  right: 0;
}

.p-top-problem__item--02 .p-top-problem__bubble-dot,
.p-top-problem__item--04 .p-top-problem__bubble-dot {
  right: 1.12rem;
}

.p-top-solution {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #35c670, #b0e481);
  color: #fff;
}

.p-top-solution__inner {
  position: relative;
  height: 100%;
}

.p-top-solution__head {
  position: absolute;
  top: 7.5rem;
  left: 50%;
  width: max-content;
  max-width: 100%;
  transform: translateX(-50%);
  text-align: center;
}

.p-top-solution__label {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 100%;
  transform: translateX(-50%);
  color: #35c670;
  font-family: Jost, sans-serif;
  font-size: 3.5rem;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
}

.p-top-solution__lead,
.p-top-solution__title {
  position: relative;
  z-index: 1;
}

.p-top-solution__lead {
  margin-block-start: 2.81rem;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.3;
}

.p-top-solution__title {
  height: 2.91rem;
  height: calc(0.5lh + 0.5em);
  margin-block-start: 0.62rem;
  border-bottom: 0.62rem solid #b0e481;
  font-size: 1.88rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.p-top-solution__emphasis {
  font-size: 2.5rem;
  font-weight: 700;
}

.p-top-solution__grid {
  position: relative;
  z-index: 1;
}

.p-top-solution__item {
  position: relative;
}

.p-top-solution__number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 5rem;
  color: #e5f7d2;
  font-family: Jost, sans-serif;
  font-size: 4.5rem;
  font-style: italic;
  font-weight: 400;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  text-shadow: 0 0.12rem 0.5rem rgba(0, 0, 0, 0.15);
}

.p-top-solution__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 333;
  margin-block-start: 2.5rem;
  border-radius: 1.25rem 1.25rem 0 0;
  object-fit: cover;
  object-position: bottom;
  background: #c4c4c4;
}

.p-top-solution__item--04 .p-top-solution__image {
  object-position: center;
}

.p-top-solution__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.88rem;
  min-height: 13.69rem;
  padding: 1.25rem;
  border-left: 0.19rem solid #fff;
}

.p-top-solution__item--02,
.p-top-solution__item--04 .p-top-solution__body {
  min-height: 15.56rem;
}

.p-top-solution__item-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.01em;
  white-space: normal;
}

.p-top-solution__limit {
  white-space: nowrap;
}

.p-top-solution__text {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: -0.01em;
}

.p-top-solution__mark {
  position: absolute;
  width: 5.5rem;
  height: 0.88rem;
  border-radius: 0.81rem;
  background: #8bdb7c;
}

.p-top-solution__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.87rem;
  height: 5.5rem;
  border-radius: 0.81rem;
  background: inherit;
  transform: translate(-50%, -50%);
}

.p-top-solution__mark--01 {
  top: 20.56rem;
  right: -4.38rem;
}

.p-top-solution__mark--02 {
  top: 26.31rem;
  right: -6.5rem;
  width: 3rem;
  height: 0.5rem;
}

.p-top-solution__mark--02::after {
  width: 0.5rem;
  height: 3rem;
}

.p-top-solution__mark--03 {
  top: 54.62rem;
  left: -11.56rem;
  background: #35c670;
}

.p-top-solution__mark--04 {
  top: 62.75rem;
  left: -9rem;
  width: 13rem;
  height: 2.06rem;
  background: #50cc74;
}

.p-top-solution__mark--04::after {
  width: 2.06rem;
  height: 13rem;
}

.p-top-solution__mark--05 {
  top: 84.12rem;
  right: -4.44rem;
}

.p-top-solution__mark--06 {
  top: 89.81rem;
  right: -6.56rem;
  width: 3rem;
  height: 0.5rem;
}

.p-top-solution__mark--06::after {
  width: 0.5rem;
  height: 3rem;
}

.p-top-matching,
.p-top-voice,
.p-top-faq,
.p-top-company {
  padding-block: 6.25rem;
  padding-inline: 0;
  background: #f9f9f9;
}

.p-top-matching {
  background: #f9f9f9;
}

.p-top-matching__head {
  width: 57rem;
  max-width: 100%;
}

.p-top-matching__kicker {
  height: 1.62rem;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-matching__title {
  margin-block-start: 0;
  color: #333;
  line-height: 3rem;
  letter-spacing: -0.01em;
}

.p-top-matching__title-main {
  font-size: 2.5rem;
  font-weight: 700;
}

.p-top-matching__title-join {
  font-size: 2rem;
  font-weight: 700;
}

.p-top-matching__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-block-start: 3.75rem;
}

.p-top-matching__panel {
  overflow: hidden;
  border: 1px solid #35c670;
  border-radius: 0.88rem;
  background: #fff;
}

.p-top-matching__panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: 0.62rem;
  background: linear-gradient(90deg, #35c670, #b0e481);
  color: #fff;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: center;
}

.p-top-matching__panel.is-muted {
  border-color: #c2c2c2;
}

/* 899px以下は2列のままカードが370pxを切り、22pxの見出し（350px必要）が
   収まらず最後の1〜2文字だけが次の行に落ちる。
   1列に変わる768px以下と同じ文字サイズに落として、切り替わりの前後で
   見出しの見え方をそろえる。 */
@media screen and (min-width: 769px) and (max-width: 899px) {
  .p-top-matching__panel-title {
    font-size: 1.12rem;
    line-height: 1.5;
  }
}

.p-top-matching__panel.is-muted .p-top-matching__panel-title {
  background: #c2c2c2;
}

.p-top-matching__list {
  margin: 0;
  padding: 1.25rem;
  list-style: none;
}

.p-top-matching__item {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-height: 6.25rem;
  border-bottom: 1px solid #c2c2c2;
  color: #2e363d;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-matching__item--05,
.p-top-matching__item--09 {
  border-bottom: 0;
}

.p-top-matching__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: cover;
}

.p-top-matching__panel.is-muted .p-top-matching__icon {
  width: 1rem;
  height: 2.5rem;
  object-fit: fill;
}

.p-top-matching__text {
  display: block;
}

.p-top-matching__panel.is-muted .p-top-matching__item--05,
.p-top-matching__item--09 {
  min-height: 12.5rem;
  align-items: flex-start;
  padding-block-start: 1.88rem;
}

.p-top-voice {
  background: #f9f9f9;
  padding-block: 0 9.69rem;
  padding-inline: 0;
}

.p-top-voice .c-sec-head__label {
  height: 0.79em;
  background: url(../images/top/label-voice.svg) center top / 2.34em 0.79em
    no-repeat;
  color: transparent;
  font-size: 5rem;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-voice .c-sec-head__label::after {
  margin-block: 0;
  margin-inline: auto;
}

.p-top-voice .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-voice__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.88rem;
  margin-block-start: 3.75rem;
}

.p-top-voice__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 1.25rem;
  overflow: visible;
  border-radius: 1.12rem;
  background: #fff;
  box-shadow: 0 0.19rem 0.38rem rgba(0, 0, 0, 0.15);
}

.p-top-voice__card-head {
  width: 100%;
  min-width: 0;
  padding-block-end: 0.62rem;
  border-bottom: 1px solid #c2c2c2;
  color: #222;
}

.p-top-voice__name {
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 2.38rem;
}

.p-top-voice__service {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.p-top-voice__content {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  width: 100%;
}

.p-top-voice__text {
  color: #222;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.p-top-voice__logo {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  border: 1px solid #c2c2c2;
  border-radius: 50%;
}

/* 3つとも円の中央に置く。以前はカードごとに rem の座標で置いていたが、
   SPで円が小さくなっても座標がPCのままで、ロゴが円からはみ出していた。
   中央寄せ＋円に対する割合にして、円の大きさに追従させる。 */
.p-top-voice__company-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

/* ロゴごとに縦横比が違うので、大きさだけカード別に持つ。 */
.p-top-voice__card--01 .p-top-voice__company-logo {
  width: 64%;
  height: 18%;
}

.p-top-voice__card--02 .p-top-voice__company-logo {
  width: 50%;
  height: 64%;
}

.p-top-voice__card--03 .p-top-voice__company-logo {
  width: 64%;
  height: 59%;
}

.p-top-choice {
  padding-block: 6.25rem 11.5rem;
  padding-inline: 0;
  overflow: hidden;
  border-radius: 3.12rem 3.12rem 0 0;
  background: #3da85c url(../images/common/dots-green.webp) repeat;
  color: #fff;
}

.p-top-choice__kicker {
  height: 1.62rem;
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-choice__title {
  margin-block-start: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.01em;
}

.p-top-choice__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 75rem;
  margin-block-start: 3.75rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: #fff;
  color: #333;
}

.p-top-choice__item {
  width: 100%;
  min-height: 18.44rem;
}

.p-top-choice__point {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 5.31rem;
  overflow: visible;
}

.p-top-choice__line {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  height: 1px;
}

.p-top-choice__point-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5rem;
  height: 5rem;
  transform: translateX(-50%);
}

.p-top-choice__point-label {
  position: absolute;
  top: 1rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  width: 3rem;
  transform: translateX(-50%);
  color: #fff;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.25rem;
}

.p-top-choice__point-number {
  color: #e5f7d2;
  font-size: 1.88rem;
  line-height: 1.88rem;
}

.p-top-choice__pointer {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  max-width: none;
  transform: translateX(-50%) rotate(180deg);
}

.p-top-choice__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 465fr) minmax(0, 655fr);
  align-items: center;
  width: 100%;
  min-height: 13.12rem;
}

.p-top-choice__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-height: 13.12rem;
  padding: 0.62rem;
}

.p-top-choice__item-title {
  color: #3da85c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: pre-line;
}

.p-top-choice__item-title {
  max-width: 100%;
}

.p-top-choice__text {
  min-width: 0;
  min-height: 9.31rem;
  font-size: 1rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

/* イラストは切り出し済みの画像をそのまま表示する。
   以前は大きな1枚（スプライト）を絶対配置でずらして見せていたが、
   見える範囲だけを書き出した画像に差し替えた。
   高さは画像の比率（aspect-ratio）で決まるので、指定するのは幅だけでよい。 */
.p-top-choice__illustration {
  flex: none;
  overflow: hidden;
}

.p-top-choice__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-top-choice__illustration--1 {
  width: 6.25rem;
  aspect-ratio: 396 / 493;
}

.p-top-choice__illustration--2 {
  width: 6.31rem;
  aspect-ratio: 318 / 327;
  -webkit-mask: url(../images/top/choice-02-mask.svg) center/contain no-repeat;
  mask: url(../images/top/choice-02-mask.svg) center/contain no-repeat;
}

.p-top-choice__illustration--3 {
  width: 6.25rem;
  aspect-ratio: 203 / 153;
}

.p-top-choice__illustration--4 {
  width: 6.25rem;
  aspect-ratio: 200 / 188;
  border-radius: 1.88rem;
}

.p-top-comparison {
  padding-block: 6.25rem;
  padding-inline: 0;
  background: #fff;
}

.p-top-comparison__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.p-top-comparison__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 31.75rem;
  max-width: 100%;
  min-width: 0;
}

.p-top-comparison__label {
  margin-block: 0 -0.084em;
  margin-inline: 0;
  height: 0.97em;
  background: url(../images/top/label-comparison.svg) left top / 4.97em 0.97em
    no-repeat;
  color: transparent;
  font-family: Jost, sans-serif;
  font-size: 4.38rem;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-comparison__line {
  width: 1.62rem;
  height: 1px;
}

.p-top-comparison__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-comparison__title-accent {
  font-size: 1.38rem;
}

.p-top-comparison__lead {
  margin: 0;
  width: 36rem;
  max-width: 100%;
  min-width: 0;
  min-height: 7.81rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: right;
}

.p-top-comparison__table {
  display: grid;
  grid-template-columns: minmax(0, 184fr) minmax(0, 508fr) minmax(0, 508fr);
  margin-block-start: 3.75rem;
}

.p-top-comparison__table > * {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 6.25rem;
  padding-block: 0.62rem;
  padding-inline: 1.88rem;
  border: 0 solid #c2c2c2;
  font-size: 1rem;
  line-height: 1.75rem;
}

.p-top-comparison__corner {
  height: 5rem;
  padding: 0;
  border: 0;
}

.p-top-comparison__column-title {
  margin: 0;
  min-height: 5rem;
  justify-content: center;
  border-radius: 0.62rem 0.62rem 0 0;
  font-size: 1.25rem;
  line-height: 2.38rem;
}

.p-top-comparison__column-title--ours {
  border-width: 1px;
  border-color: #3da85c;
  background: #3da85c;
  color: #fff;
}

.p-top-comparison__column-title--industry {
  border-width: 1px;
  background: #f9f9f9;
}

.p-top-comparison__criterion {
  border-width: 0 0 1px 1px;
  justify-content: center;
  background: #f9f9f9;
  color: #6c6c6c;
  font-weight: 700;
}

.p-top-comparison__criterion:first-of-type {
  border-top-width: 1px;
  border-radius: 0.62rem 0 0 0;
}

.p-top-comparison__cell {
  margin: 0;
  gap: 0.62rem;
}

.p-top-comparison__icon {
  flex: none;
}

.p-top-comparison__cell--good {
  border-width: 0 1px 1px;
  border-color: #3da85c;
  background: linear-gradient(
    270deg,
    #fff 21%,
    rgba(242, 251, 233, 0.1) 60%,
    rgba(229, 247, 210, 0.2)
  );
  color: #3da85c;
  font-weight: 700;
}

.p-top-comparison__icon--good {
  width: 1.5rem;
  height: 1.5rem;
}

.p-top-comparison__cell--bad {
  border-width: 0 1px 1px 0;
  color: #333;
  font-weight: 500;
}

.p-top-comparison__icon--bad {
  width: 1.62rem;
  height: 2rem;
}

.p-top-comparison__note {
  position: relative;
  z-index: 0;
  display: block;
  width: max-content;
  margin-block: 3.75rem 0;
  margin-inline: auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: center;
}

.p-top-comparison__note-emphasis {
  font-size: 2rem;
}

.p-top-comparison__note-join {
  font-size: 1.88rem;
  font-weight: 700;
}

.p-top-comparison__note::after {
  content: "";
  position: absolute;
  bottom: 0.16rem;
  left: 0;
  z-index: -1;
  width: 44.31rem;
  max-width: 100%;
  height: 0.62rem;
  background: #b0e481;
}

.p-top-flow {
  padding-block: 6.25rem;
  padding-inline: 0;
  background: #fff url(../images/common/dots-light.webp) repeat;
}

/* デザインの英字は線が左から右へのグラデーション（#35c670 → #b0e481）で、
   -webkit-text-stroke では単色しか引けない。Figmaから書き出した画像に差し替える。 */
.p-top-flow .c-sec-head__label {
  height: 0.86em;
  background: url(../images/top/label-flow.webp) center top / 1.86em 0.86em
    no-repeat;
  color: transparent;
  font-size: 5rem;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

/* 線の位置は line-height の行末が基準。Flowは英字が他より背が高いぶん
   線が下に寄り、見出しとの間隔だけ詰まるので上の余白を減らす。 */
.p-top-flow .c-sec-head__label::after {
  margin-block: 0.25rem 0;
}

.p-top-flow__head-line {
  display: block;
  width: 1.62rem;
  height: 1px;
  margin-block: 0.75rem 0;
  margin-inline: auto;
}

.p-top-flow .c-sec-head__title {
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-flow__list {
  display: flex;
  flex-direction: column;
  gap: 3.06rem;
  width: 100%;
  max-width: 53.31rem;
  margin-block: 3.75rem 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.p-top-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.93rem minmax(0, 1fr);
  min-height: 3.94rem;
  color: #3da85c;
  font-size: 1.38rem;
  font-weight: 700;
}

.p-top-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.62rem);
  left: 50%;
  width: 4.12rem;
  height: 1.81rem;
  background: url(../images/top/flow-arrow.svg) center/contain no-repeat;
  transform: translateX(-50%);
}

.p-top-flow__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.93rem;
  height: 3.94rem;
  padding: 0.38rem;
  border-radius: 0.5rem 0 0 0.5rem;
  background: #3da85c;
  color: #fff;
  font-family: Jost, sans-serif;
}

.p-top-flow__number-text {
  display: block;
  height: 0.81rem;
  padding: 0;
  color: #e5f7d2;
  font-size: 1rem;
  line-height: 0.81rem;
}

.p-top-flow__icon {
  display: block;
  width: 1.87rem;
  height: 1.88rem;
  object-fit: cover;
}

.p-top-flow__text {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.94rem;
  padding-inline: 2.5rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: #eaf7ea;
  line-height: 2.38rem;
}

/* 01「お問合せ」だけリンクにする。::after を行全体に広げて、
   行のどこを押しても飛ぶようにする（.p-top-service__heading-link と同じやり方）。
   基準は .p-top-flow__item の position: relative。 */
.p-top-flow__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.p-top-flow__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.p-top-flow__link:hover {
  text-decoration: none;
  opacity: 0.75;
}

.p-top-faq {
  padding-block: 6.25rem;
  padding-inline: 0;
}

.p-top-faq__kicker {
  height: 1.62rem;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-faq__title {
  margin-block-start: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.p-top-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
  margin-block-start: 3.75rem;
}

.p-top-faq__item {
  padding-block: 1.88rem;
  padding-inline: 2.5rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 0.28rem rgba(0, 0, 0, 0.15);
}

.p-top-faq__question,
.p-top-faq__answer {
  position: relative;
  padding-inline-start: 3.19rem;
}

.p-top-faq__question {
  min-height: 2.62rem;
  padding-inline-end: 3.12rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  /* スマホ実機でのタップ対策。manipulation でダブルタップ拡大の待ち時間（約300ms）が消える。 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.p-top-faq__question::-webkit-details-marker {
  display: none;
}

.p-top-faq__question::before {
  content: "Q.";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.93rem;
  height: 2.62rem;
  margin: 0;
  color: #3da85c;
  font-family: Jost, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 2.5rem;
  text-align: center;
}

.p-top-faq__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.p-top-faq__toggle::before,
.p-top-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: #3da85c;
  transform: translate(-50%, -50%);
}

.p-top-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-top-faq__item[open]:not(.is-closing) .p-top-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(0);
}

.p-top-faq__answer {
  min-height: 2.62rem;
  margin-block: 0.62rem 0;
  margin-inline: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.32s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-top-faq__item[open]:not(.is-closing) .p-top-faq__answer {
  opacity: 1;
  transform: translateY(0);
}

.p-top-faq__answer::before {
  content: "A.";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.93rem;
  height: 2.62rem;
  margin: 0;
  color: #f68b1f;
  font-family: Jost, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 2.5rem;
  text-align: center;
}

.p-top-faq__button .p-top-button {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .p-top-faq__toggle::after,
  .p-top-faq__answer {
    transition: none;
  }
}
.p-top-company {
  position: relative;
  padding-block: 6.25rem;
  padding-inline: 0;
  overflow: hidden;
}

.p-top-company__inner {
  position: relative;
}

.p-top-company__head {
  display: flex;
  align-items: center;
  gap: 2.44rem;
}

.p-top-company__head .c-sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  /* 幅は中身（英字ラベル）ぶんだけ取る。31.75remの基準だと、残りを分け合った結果
     見出し側に使っていない余白が残り、そのぶん右の説明文が狭くなって
     1行目の最後の「を、」だけが次の行に落ちていた。 */
  flex: 0 0 auto;
  min-width: 0;
  text-align: left;
}

.p-top-company__head .c-sec-head__label {
  margin-block-end: -0.035em;
  padding-block-end: 0.035em;
  background: url(../images/top/label-company.svg) center top / 3.96em 0.96em
    no-repeat;
  color: transparent;
  font-size: 5rem;
  line-height: 0.96em;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-company__head .c-sec-head__label::after {
  margin-block: -0.035em 0;
  margin-inline: 0;
}

.p-top-company__head .c-sec-head__title {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1.62rem;
  letter-spacing: -0.01em;
}

.p-top-company__lead {
  /* 見出しが使わなかったぶんを受け取って広がる（右端は変わらない）。 */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 4.94rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  text-align: right;
}

/* 説明文の1行目は約640px必要。説明文の列は 画面幅−490px なので、
   1150px を下回ると1行目が入らず、最後の2〜3文字だけが次の行に落ちる。
   その幅でだけ読点で改行する。
   1150px以上は列が645px以上あって2行に収まり、スマホ（768px以下）は
   列が全幅になって自然に折り返すので、どちらでもこの改行は出さない。 */
.p-top-company__lead-break {
  display: none;
}

@media screen and (min-width: 769px) and (max-width: 1149px) {
  .p-top-company__lead-break {
    display: revert;
  }
}

/* 2つ目の改行。最後の一文は約545px必要で、見出しと横並びのまま列がそれを
   下回る1100px未満でだけ出す。
   1024px以下は見出しの下に回り込んで列が674px以上になるので、ここでは出さない。 */
.p-top-company__lead-break-narrow {
  display: none;
}

@media screen and (min-width: 1025px) and (max-width: 1099px) {
  .p-top-company__lead-break-narrow {
    display: revert;
  }
}

.p-top-company__body {
  display: grid;
  grid-template-columns: minmax(0, 519fr) minmax(0, 640fr);
  gap: 2.5rem;
  margin-block-start: 3.12rem;
}

.p-top-company__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
  object-fit: cover;
}

.p-top-company__links {
  display: flex;
  flex-direction: column;
  gap: 1.62rem;
}

.p-top-company__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 6.12rem;
  padding-block: 0;
  padding-inline: 1.88rem 2.5rem;
  border-left: 0.62rem solid #3da85c;
  background: #fff;
  color: #222;
}

.p-top-company__link-title {
  width: 100%;
  max-width: 33rem;
  min-height: 2.3rem;
  font-size: 1.3rem;
  line-height: 2.38rem;
}

.p-top-company__link-text {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.p-top-company__link-arrow {
  position: absolute;
  right: 1.25rem;
  bottom: 1.56rem;
  width: 3.12rem;
  height: 0.44rem;
}

.p-top-company__mark {
  position: absolute;
  z-index: 0;
  border-radius: 0.81rem;
  background: #fdfdfd;
}

.p-top-company__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: inherit;
  background: inherit;
  transform: translate(-50%, -50%);
}

.p-top-company__mark--01 {
  top: 19.38rem;
  left: -13.06rem;
  width: 5.5rem;
  height: 0.88rem;
}

.p-top-company__mark--01::after {
  width: 0.87rem;
  height: 5.5rem;
}

.p-top-company__mark--02 {
  top: 27.5rem;
  left: -10.5rem;
  width: 13rem;
  height: 2.06rem;
}

.p-top-company__mark--02::after {
  width: 2.06rem;
  height: 13rem;
}

.p-top-message {
  position: relative;
  overflow: hidden;
  padding-block: 6.25rem;
  padding-inline: 0;
  background: linear-gradient(
    270deg,
    #fff 21%,
    rgba(242, 251, 233, 0.1) 61%,
    rgba(229, 247, 210, 0.2) 100%
  );
}

.p-top-message::before {
  content: "";
  position: absolute;
  top: -18.62rem;
  left: calc(50% + 30.18rem);
  width: 33.12rem;
  height: 48.44rem;
  border-radius: 320px;
  background: linear-gradient(
    242.94deg,
    rgba(176, 228, 129, 0.7) 7.996%,
    rgba(53, 198, 112, 0.7) 97.393%
  );
}

.p-top-message::after {
  content: "";
  position: absolute;
  top: 28.44rem;
  /* Figma(1920px)では左端-192px。狭い画面で画面外へ飛ばないよう下限を固定する。 */
  left: max(-12rem, calc(50% - 72rem));
  width: 27rem;
  height: 39.56rem;
  border-radius: 320px;
  background: linear-gradient(
    225.93deg,
    rgba(176, 228, 129, 0.7) 17.6%,
    rgba(53, 198, 112, 0.7) 87.7%
  );
}

.p-top-message__line {
  position: absolute;
  width: 18rem;
  height: 12rem;
  transform: rotate(90deg) scaleX(-1);
  border-radius: 320px;
  border: 1px solid #dcdcdc;
  bottom: -96px;
  left: 10%;
}

.p-top-message__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 680fr) minmax(0, 451fr);
  gap: 4.31rem;
  align-items: start;
}

.p-top-message__inner::after {
  content: "";
  position: absolute;
  top: 35.88rem;
  left: -8.19rem;
  width: 12.18rem;
  height: 17.81rem;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
}

.p-top-message .c-sec-head {
  text-align: left;
}

/* デザインの英字は線が左から右へのグラデーション（#35c670 → #b0e481）で、
   -webkit-text-stroke では単色しか引けない。Figmaから書き出した画像に差し替える。 */
.p-top-message .c-sec-head__label {
  height: 1.03em;
  background: url(../images/top/label-message.webp) left top / 3.6em 1.03em
    no-repeat;
  color: transparent;
  font-size: 4.38rem;
  font-weight: 400;
  line-height: 4.38rem;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0;
}

.p-top-message .c-sec-head__label::after {
  margin: 0;
}

.p-top-message .c-sec-head__title {
  width: 100%;
  max-width: 42.5rem;
  margin-block-start: 0.75rem;
  font-size: 1.38rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.p-top-message__text {
  margin-block-start: 3.5rem;
}

.p-top-message__paragraph {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-message__signature {
  margin-block-start: 3.12rem;
}

.p-top-message__role,
.p-top-message__name {
  display: block;
  margin: 0;
  color: #222;
}

.p-top-message__role {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.75rem;
}

.p-top-message__name {
  width: 8.75rem;
  height: auto;
  margin-block-start: 0.19rem;
}

.p-top-message__image {
  width: 100%;
  height: auto;
  aspect-ratio: 451 / 480;
  margin-block-start: 5.44rem;
  border-radius: 0.62rem;
  object-fit: cover;
  object-position: bottom;
  box-shadow: 0 1px 0.56rem rgba(0, 0, 0, 0.15);
}

.p-top-youtube {
  position: relative;
  overflow: hidden;
  /* 上は前のセクションに重ねたぶん（3.19rem）を足し戻して、内容の始まりが
     他セクションと同じ間隔になるようにする（service・newsと同じ扱い）。 */
  padding-block: 6.25rem 6.25rem;
  padding-inline: 0;
  border-radius: 3.12rem;
  background: #3da85c url(../images/common/dots-green.webp) repeat;
  color: #fff;
}

.p-top-youtube__inner {
  position: relative;
  z-index: 1;
}

.p-top-youtube__head {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 57rem;
}

.p-top-youtube__kicker {
  height: 1.62rem;
  font-family: Jost, sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.88rem;
  letter-spacing: -0.01em;
}

.p-top-youtube__title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.p-top-youtube__lead {
  width: 100%;
  max-width: 50.25rem;
  min-height: 2.5rem;
  margin-block-start: 3.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
}

.p-top-youtube__slider {
  position: relative;
  width: 100%;
  max-width: 69.25rem;
  margin-block: 3.06rem 0;
  margin-inline: auto;
}

/* はみ出しの切り抜きはここが持つ。Swiperの.swiperにも同じ指定があるが、
   CDNのCSSが落ちても横に伸びないよう自前でも持たせておく。 */
.p-top-youtube__swiper {
  overflow: hidden;
}

/* JSが動かなかったときの並び。Swiperが初期化されると display:flex に上書きされる。 */
.p-top-youtube__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

/* Swiperが動いたら間隔は spaceBetween（スライドのmargin-right）が持つ。
   gap も残ると間隔が二重（40+40=80px）になり、
   Swiperが計算したスライド幅と合わず2枚目が枠からはみ出す。
   幅ごとの gap 指定（SPは1.25rem）より強くするため、クラス2つで指定する。

   display も必ずここで flex に戻す。上の grid と Swiper の .swiper-wrapper は
   詳細度が同じなので、CSSの読み込み順が入れ替わる（CDNが遅い・プラグインが結合するなど）と
   grid が勝ってスライドが重なり、数回送ると何も表示されなくなる。 */
.swiper-initialized .p-top-youtube__list {
  display: flex;
  gap: 0;
}

.p-top-youtube__card {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.19rem 0.5rem rgba(0, 0, 0, 0.15);
  /* Swiperがスライド幅をpx指定で入れてくる。content-boxのままだと
     この padding のぶん（左右12px＝24px）だけ広がってはみ出す。 */
  box-sizing: border-box;
}

.p-top-youtube__thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  object-fit: cover;
}

.p-top-youtube__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.p-top-youtube__arrow-image {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-youtube__arrow--prev {
  left: -3.38rem;
}

.p-top-youtube__arrow--next {
  right: -3.38rem;
}

.p-top-youtube__arrow--next .p-top-youtube__arrow-image {
  transform: scaleX(-1);
}

@media screen and (max-width: 1024px) {
  .p-top-solution {
    height: auto;
    padding-block: 6.25rem 4.38rem;
    padding-inline: 0;
  }
  .p-top-solution__inner {
    height: auto;
  }
  .p-top-solution__head {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
  }
  .p-top-solution__label {
    top: -1.88rem;
    font-size: 3.25rem;
  }
  .p-top-solution__lead {
    margin-block-start: 0;
  }
  .p-top-solution__title {
    height: auto;
    padding-block-end: 0;
    border-bottom: 0;
    font-size: 1.62rem;
    line-height: 1.5;
    white-space: normal;
    -webkit-text-decoration: underline #b0e481;
    text-decoration: underline #b0e481;
    text-decoration-thickness: 0.62rem;
    text-decoration-skip-ink: none;
    text-underline-position: under;
    text-underline-offset: -0.5rem;
  }
  .p-top-solution__emphasis {
    font-size: 2.12rem;
  }
  .p-top-solution__grid {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4.38rem;
    margin-block-start: 4.38rem;
  }
  .p-top-solution__item:nth-child(n) {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .p-top-solution__number {
    font-size: 4.38rem;
  }
  .p-top-solution__image {
    width: 100%;
    height: auto;
    aspect-ratio: 540/333;
  }
  .p-top-solution__body,
  .p-top-solution__item--02,
  .p-top-solution__item--04 .p-top-solution__body {
    min-height: 0;
  }
  .p-top-solution__item-title {
    font-size: 1.25rem;
    line-height: 1.6;
    white-space: normal;
  }
  .p-top-solution__text {
    font-size: 1rem;
    line-height: 1.8;
  }
  .p-top-solution__marks {
    display: none;
  }
}

/* タブレット（769〜1024px）。1列だと写真が幅いっぱい（最大929px）に広がり、
   本文も1行50文字になって、セクションの高さがPCの2倍以上になる。
   PCと同じ「写真の下に本文」の形のまま、2列に並べて詰める
   （PCのような段違いの絶対配置はこの幅では使わない）。 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-top-solution__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 3.75rem;
  }
}

@media screen and (max-width: 768px) {
  .p-top-clients {
    height: auto;
    padding-block: 2rem 3rem;
    padding-inline: 0;
  }
  .p-top-clients__title {
    padding-block-start: 0;
    font-size: 1.12rem;
    line-height: 1.6;
  }
  .p-top-clients__title-note {
    display: inline-block;
    font-size: 0.88rem;
  }
  /* お問合せページのロゴ一覧（.p-contact-page__client-grid）と同じ3列。 */
  .p-top-clients__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px 14px;
    min-height: 0;
    margin-block-start: 1rem;
  }
  /* PCの企業ごとの幅指定を打ち消す（同じ詳細度で、この指定のほうが後ろにあるため勝つ）。 */
  .p-top-clients__item {
    width: auto;
    height: 64px;
  }
  /* 3列だと1列あたり約107px（390px幅）なので、列幅を超えないように上限を下げる。 */
  .p-top-case__grid,
  .p-top-voice__grid,
  .p-top-solution__grid,
  .p-top-matching__grid {
    grid-template-columns: 1fr;
  }
  .p-top-voice {
    min-height: 0;
    padding-block: 2rem 4.38rem;
    padding-inline: 0;
  }
  .p-top-voice .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-voice .c-sec-head__title {
    margin-block-start: 1.5rem;
    font-size: 1.12rem;
    line-height: 1.6;
  }
  .p-top-voice__grid {
    gap: 1.5rem;
    margin-block-start: 2.5rem;
  }
  .p-top-voice__card {
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  .p-top-voice__card-head {
    width: 100%;
  }
  .p-top-voice__name {
    font-size: 1.25rem;
  }
  .p-top-voice__content {
    grid-template-columns: 5.62rem 1fr;
  }
  .p-top-voice__logo {
    width: 5.62rem;
    height: 5.62rem;
  }
  .p-top-matching {
    min-height: 0;
    padding-block: 4.38rem 2.5rem;
    padding-inline: 0;
  }
  .p-top-matching__head {
    width: 100%;
  }
  .p-top-matching__title-main {
    font-size: 1.75rem;
  }
  .p-top-matching__title-join {
    font-size: 1.38rem;
  }
  .p-top-matching__grid {
    gap: 1.88rem;
    margin-block-start: 2.5rem;
  }
  .p-top-matching__panel-title {
    height: auto;
    min-height: 3.5rem;
    font-size: 1.12rem;
    line-height: 1.5;
  }
  .p-top-matching__item,
  .p-top-matching__panel.is-muted .p-top-matching__item--05,
  .p-top-matching__item--09 {
    min-height: 5rem;
    padding-block: 1rem;
    padding-inline: 0;
    font-size: 1rem;
    line-height: 1.7;
  }
  .p-top-matching__panel.is-muted .p-top-matching__icon {
    width: 0.75rem;
    height: 1.88rem;
  }
  .p-top-case {
    padding-block: 3rem 4.38rem;
    padding-inline: 0;
  }
  .p-top-case .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-case__grid {
    gap: 1.5rem;
    margin-block-start: 2.5rem;
  }
  .p-top-case__image {
    height: auto;
    aspect-ratio: 2/1;
  }
  .p-top-case__body {
    min-height: 0;
    padding-block: 1.5rem 1.88rem;
    padding-inline: 1.25rem;
  }
  .p-top-case__client,
  .p-top-case__card:nth-child(3) .p-top-case__client {
    width: auto;
    max-width: 100%;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
  }
  .p-top-case__title {
    min-height: 0;
    font-size: 18px;
    line-height: 1.7;
    padding-bottom: 0.5rem;
  }
  .p-top-case__text {
    font-size: 1rem;
    line-height: 1.8;
  }
  .p-top-policy {
    min-height: 0;
    padding-block: 4.38rem;
    padding-inline: 0;
    background-position: center;
  }
  .p-top-policy__head {
    width: 100%;
  }
  /* 上の「・Policy」と同じ1.12remだと差が出ないので一段上げる。 */
  .p-top-policy__subtitle {
    font-size: 1.25rem;
    margin-top: 0.5rem;
  }
  .p-top-policy__title-main {
    margin-block-start: 0.25rem;
    font-size: 1.81rem;
    /* 行送りは倍率ではなく長さで持たせる。倍率のままだと「3」（大きい文字）の行だけ
       行送りが広がって、1行目との間隔がそろわない。 */
    line-height: 2.5rem;
    white-space: normal;
  }
  /* 上の行送り（2.5rem）に収まる大きさにする。 */
  .p-top-policy__number {
    font-size: 2.5rem;
  }
  .p-top-policy__list {
    gap: 1.5rem;
    margin-block-start: 2.5rem;
  }
  .p-top-policy__item,
  .p-top-policy__item--01 {
    /* アイコンと左右の余白を詰めて、見出しの1行あたりの文字数を稼ぐ。 */
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 0;
    padding-block: 1.25rem;
    padding-inline: 1rem;
    border-left-width: 0.43rem;
  }
  .p-top-policy__icon {
    width: 3.25rem;
    height: auto;
  }
  .p-top-policy__content {
    display: contents;
    gap: 1rem;
    width: 100%;
  }
  .p-top-policy__item-title {
    grid-column: 2;
    gap: 0.5rem;
    min-height: 0;
    padding-block-end: 0;
    border-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
  }
  .p-top-policy__text {
    grid-column: 1/-1;
    padding-block-start: 0.75rem;
    border-top: 1px solid #c2c2c2;
    font-size: 1rem;
    line-height: 1.8;
  }
  .p-top-problem {
    /* 次のsolutionを下に潜り込ませるので、こちらを前面に置く（PCと同じ）。 */
    z-index: 1;
    height: auto;
    margin-block-start: -1.5rem;
    padding-block: 3rem 4.38rem;
    padding-inline: 0;
    border-radius: 1.75rem;
  }
  .p-top-problem__inner {
    height: auto;
  }
  .p-top-problem__head {
    position: static;
  }
  .p-top-problem__title {
    font-size: 1.5rem;
  }
  .p-top-problem__list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: auto;
    margin-block-start: 2.5rem;
  }
  .p-top-problem__item:nth-child(n) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 3.75rem;
    padding-block: 0.75rem;
    padding-inline: 1.5rem;
    border-radius: 1.88rem;
    font-size: 1rem;
    line-height: 1.6;
    white-space: normal;
  }
  .p-top-problem__bubble {
    display: none;
  }
  .p-top-choice {
    min-height: 0;
    padding-block: 4.38rem 7rem;
    padding-inline: 0;
    border-radius: 1.75rem 1.75rem 0 0;
  }
  .p-top-choice__title {
    font-size: 1.75rem;
  }
  .p-top-choice__box {
    gap: 1.88rem;
    width: 100%;
    height: auto;
    margin-block-start: 2.5rem;
    padding-block: 1.88rem;
    padding-inline: 1.25rem;
  }
  .p-top-choice__item {
    height: auto;
  }
  .p-top-choice__point {
    width: 100%;
    height: 4.38rem;
  }
  .p-top-choice__line {
    top: 2.19rem;
    width: 100%;
  }
  .p-top-choice__point-bg {
    width: 4.37rem;
    height: 4.38rem;
  }
  .p-top-choice__point-label {
    top: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.12rem;
  }
  .p-top-choice__point-number {
    font-size: 1.5rem;
    line-height: 1.62rem;
  }
  .p-top-choice__row {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  .p-top-choice__summary {
    width: 100%;
    height: auto;
    min-height: 11.88rem;
  }
  .p-top-choice__item-title {
    font-size: 1.25rem;
    line-height: 1.6;
    white-space: normal;
  }

  /* スマホは横に並べるものが無いぶん、イラストを一回り大きくする（100px→140px）。 */
  .p-top-choice__illustration--1,
  .p-top-choice__illustration--2,
  .p-top-choice__illustration--3,
  .p-top-choice__illustration--4 {
    width: 8.75rem;
  }
  .p-top-choice__text {
    width: 100%;
    height: auto;
    padding-block: 1.25rem;
    padding-inline: 0;
    font-size: 1rem;
    line-height: 1.8;
  }
  .p-top-comparison__head,
  .p-top-company__head {
    display: block;
  }
  .p-top-comparison {
    min-height: 0;
    padding-block: 4.38rem 3rem;
    padding-inline: 0;
  }
  .p-top-comparison__heading {
    width: 100%;
  }
  /* 見出しは1行に収める。必要な幅は文字サイズの約23倍（17.92pxで410px）で、
     本文幅は「画面幅−40px」。画面幅の3.6%を基準にすると、390pxの端末でも
     文字14px・必要幅321pxとなって1行に収まる。
     498px以上ではPCと同じ17.92pxで頭打ちにする。 */
  .p-top-comparison__title {
    font-size: clamp(0.75rem, 3.6vw, 1.12rem);
  }

  /* 強調部分は見出しの文字サイズに連動させる（PCの 22.08 ÷ 17.92 ＝ 1.23倍）。 */
  .p-top-comparison__title-accent {
    font-size: 1.23em;
  }

  .p-top-comparison__label {
    font-size: 3rem;
    line-height: 1;
  }
  .p-top-comparison__lead,
  .p-top-company__lead {
    width: 100%;
    height: auto;
    margin-block-start: 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
    text-align: left;
  }
  .p-top-comparison__table {
    margin-block-start: 2rem;
    overflow-x: auto;
  }
  .p-top-comparison__table > * {
    min-height: 4.5rem;
    padding: 0.5rem;
    font-size: 0.81rem;
  }
  .p-top-comparison__corner,
  .p-top-comparison__column-title {
    min-height: 3.5rem;
    height: auto;
  }
  .p-top-comparison__cell {
    gap: 0.5rem;
  }
  .p-top-comparison__note {
    width: 100%;
    margin-block-start: 2.5rem;
    line-height: 1.8;
  }
  .p-top-comparison__note-emphasis {
    font-size: 1.44rem;
  }
  .p-top-comparison__note-join {
    font-size: 1.35rem;
  }
  .p-top-comparison__note::after {
    display: none;
  }
  .p-top-comparison__note {
    text-decoration: underline;
    text-decoration-color: #b0e481;
    text-decoration-thickness: 0.62rem;
    text-decoration-skip-ink: none;
    text-underline-position: under;
    text-underline-offset: -0.55rem;
  }
  .p-top-flow {
    min-height: 0;
    padding-block: 3.5rem 4.38rem;
    padding-inline: 0;
  }
  .p-top-flow .c-sec-head__label {
    height: auto;
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-flow .c-sec-head__title {
    font-size: 1.12rem;
    line-height: 1.6;
  }
  .p-top-flow__list {
    gap: 2.62rem;
    width: 100%;
    margin-block-start: 2.5rem;
  }
  .p-top-flow__item {
    grid-template-columns: 3.62rem minmax(0, 1fr);
    width: 100%;
    min-height: 3.62rem;
    font-size: 1.12rem;
  }
  .p-top-flow__number {
    width: 3.62rem;
    height: 3.62rem;
  }
  .p-top-flow__text {
    width: 100%;
    min-height: 3.62rem;
    padding-inline: 1.25rem;
  }
  .p-top-flow__item:not(:last-child)::after {
    top: calc(100% + 0.43rem);
    width: 3.5rem;
    height: 1.56rem;
  }
  .p-top-company__body,
  .p-top-message__inner {
    grid-template-columns: 1fr;
  }
  .p-top-message {
    min-height: 0;
    padding-block: 4.38rem;
    padding-inline: 0;
  }
  .p-top-message::before {
    display: none;
  }
  .p-top-message::after {
    top: auto;
    left: auto;
    right: 70%;
    bottom: -23.75rem;
    opacity: 0.65;
  }
  .p-top-message__inner {
    gap: 1rem;
  }
  .p-top-message__inner::after {
    display: none;
  }
  .p-top-message__body {
    display: contents;
  }
  .p-top-message .c-sec-head {
    order: 1;
  }
  .p-top-message__image {
    order: 2;
  }
  .p-top-message__text {
    order: 3;
  }
  .p-top-message__signature {
    order: 4;
  }
  .p-top-message .c-sec-head__label {
    height: auto;
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-message .c-sec-head__title {
    width: 100%;
    margin-block-start: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .p-top-message__text {
    margin-block-start: 0;
  }
  .p-top-message__paragraph {
    font-size: 1rem;
    line-height: 2;
  }
  .p-top-message__signature {
    margin-block-start: 0;
  }
  .p-top-message__name {
    width: 7.5rem;
  }
  .p-top-message__image {
    margin-block-start: 0;
  }
  .p-top-company {
    min-height: 0;
    padding-block: 4.38rem;
    padding-inline: 0;
  }
  .p-top-company__head .c-sec-head {
    width: 100%;
  }
  .p-top-company__head .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1;
  }
  .p-top-company__body {
    gap: 1.88rem;
    margin-block-start: 2.5rem;
  }
  .p-top-company__image,
  .p-top-message__image {
    width: 100%;
    height: auto;
  }
  .p-top-company__link {
    width: 100%;
    height: auto;
    min-height: 6.12rem;
    padding-block: 0.88rem;
    padding-inline: 1.5rem 3.75rem;
  }
  .p-top-company__link-title {
    width: 100%;
    height: auto;
    font-size: 1.25rem;
  }
  .p-top-company__link-text {
    line-height: 1.7;
  }
  .p-top-company__marks {
    display: none;
  }
  /* problemの角丸の下に潜り込ませて、角に出ていた白い隙間を緑で埋める。
     PCは角丸3.12remに対して重なり3.44rem。SPの角丸1.75remに合わせて2remにする。
     上パディングは重ねたぶんを足し戻し、内容の始まりを他セクションと同じ間隔（4.38rem）にする。 */
  .p-top-solution {
    margin-block-start: -2rem;
    padding-block-start: 6.38rem;
  }

  /* 見出しとカードの間、カード同士の間。タブレットと同じ70pxだと、
     番号（01〜04）の上にさらに70pxの空白が乗って開きすぎる。 */
  .p-top-solution__grid {
    gap: 3.12rem;
    margin-block-start: 2.5rem;
  }
  .p-top-faq {
    min-height: 0;
    padding-block: 4.38rem;
    padding-inline: 0;
  }
  .p-top-faq__kicker {
    height: auto;
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .p-top-faq__title {
    font-size: 1.62rem;
  }
  .p-top-faq__list {
    gap: 0.75rem;
    margin-block-start: 1.75rem;
  }
  .p-top-faq__item,
  .p-top-faq__item[open] {
    min-height: 0;
    padding-block: 1.12rem;
    padding-inline: 1rem;
    border-radius: 0.88rem;
  }
  .p-top-faq__question,
  .p-top-faq__answer {
    padding-inline-start: 2rem;
  }
  .p-top-faq__question {
    min-height: 2rem;
    padding-inline-end: 3rem;
    font-size: 1rem;
    line-height: 1.7;
  }
  .p-top-faq__answer {
    min-height: 0;
    margin-block-start: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.8;
  }
  .p-top-faq__question::before,
  .p-top-faq__answer::before {
    width: 1.5rem;
    height: 2rem;
    font-size: 1.25rem;
    line-height: 1.88rem;
  }
  .p-top-faq__toggle {
    width: 2rem;
    height: 2rem;
  }
  .p-top-faq__toggle::before,
  .p-top-faq__toggle::after {
    width: 1.12rem;
  }
  .p-top-youtube {
    min-height: 0;
    border-radius: 1.88rem;
  }
  .p-top-youtube__head,
  .p-top-youtube__lead {
    width: 100%;
    height: auto;
  }
  .p-top-youtube__title {
    font-size: 1.88rem;
    line-height: 1.5;
  }
  .p-top-youtube__lead {
    font-size: 1rem;
    line-height: 2;
  }
  .p-top-youtube__slider {
    width: calc(100% - 2rem);
  }
  .p-top-youtube__list {
    display: flex;
    gap: 1.25rem;
  }
  .p-top-youtube__card {
    flex: none;
    width: 100%;
    height: auto;
    padding: 0.5rem;
  }
  .p-top-youtube__thumbnail {
    width: 100%;
    height: auto;
  }
  .p-top-youtube__arrow {
    width: 3.37rem;
    height: 3.38rem;
  }
  .p-top-youtube__arrow--prev {
    left: -2.19rem;
  }
  .p-top-youtube__arrow--next {
    right: -2.19rem;
  }
  .p-top-youtube {
    /* 角丸の上端を前のセクションに重ねて、装飾の円が切れた継ぎ目を隠す。
       PCの -3.19rem を、SPの角丸（1.88rem / PCは3.12rem）に合わせて縮めた値。 */
    z-index: 1;
    margin-block-start: -2rem;
    /* 上は重ねたぶん（2rem）を足し戻す。 */
    padding-block: 2rem 2.75rem;
    padding-inline: 0;
  }
  .p-top-youtube__lead {
    margin-block-start: 1.25rem;
  }
  .p-top-youtube__slider {
    margin-block-start: 1.25rem;
  }
}

/* Figma 422:82のセクション重なり。角丸のカード（About / Problem / YouTube）が
   次のセクションに乗り上げる意図なので、負のマージンで重ねたうえで
   Figmaの重ね順（レイヤー順）に合わせて z-index を持ち上げる。
   SPは各セクションの高さがデザインと変わるため、PCのみ適用する。 */
@media screen and (min-width: 769px) {
  .p-top-about {
    z-index: 1;
    margin-block-start: -3.38rem;
  }

  .p-top-service {
    margin-block-start: -3.38rem;
  }

  .p-top-problem {
    z-index: 1;
  }

  .p-top-solution {
    margin-block-start: -3.44rem;
  }

  .p-top-choice {
    margin-block-start: -3.44rem;
  }

  /* 下部のCTA（News直後）は重ねないので、Choice直後の1つ目だけを対象にする。 */
  .p-top-choice + .p-top-cta {
    margin-block-start: -5.25rem;
  }

  .p-top-youtube {
    z-index: 1;
    margin-block-start: -3.19rem;
  }

  .p-top-news {
    margin-block-start: -2.94rem;
  }

  /* 日付・カテゴリ・タイトルを1行に並べる。 */
  .p-top-news__row {
    flex-wrap: nowrap;
  }

  /* SPの .p-top-news__date は line-height を持たずベースを継承しているので、
     PC用の値はベースではなくここで指定する（SPの行の高さを変えないため）。 */
  .p-top-news__date {
    line-height: 1.5rem;
  }

  .p-top-news__title {
    flex: 1 1 0;
  }

  /* .p-top-button は他セクション共通の部品なので、News内に限定して縮める。 */
  .p-top-news__more .p-top-button {
    width: 15rem;
    height: 3rem;
    min-height: 3rem;
  }

  .p-top-news__more .p-top-button__label {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------
   タブレット（769〜1024px）の調整
   PCレイアウト（内容幅1200px前提）とSPレイアウトの間を埋めるための指定。
   幅の固定値はできるだけ上の共通指定側で流動化（%・fr・max-width）してあるので、
   ここではそれだけでは成立しない「重なり」「はみ出し」だけを扱う。
   ------------------------------------------------------------------ */
/* CTAだけ横並びをやめる幅が広い。本文44.25rem＋写真21.44rem＝65.69rem（1051px）に
   すき間40pxと .l-inner の左右余白80pxを足すと1171px必要。それより狭いと
   本文が潰れ、1行固定の見出しが写真に重なる。1200pxを下回ったら
   SPと同じ縦積み（写真が上）にする。 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  /* CTA：本文44.25rem＋イラスト21.44rem＝約1051pxで内容幅（最大944px）に収まらない。
     文字を詰めるより、SPと同じ縦積み（イラストが上）に切り替えた方が崩れない。 */
  .p-top-cta {
    height: auto;
    padding-block: 5rem 3.75rem;
  }

  .p-top-cta__inner {
    height: auto;
    flex-direction: column-reverse;
    padding-block-start: 0;
  }

  .p-top-cta__body {
    flex: none;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }

  .p-top-cta__title {
    min-height: 0;
    height: auto;
    padding-block-end: 0.38rem;
    line-height: 1.4;
    white-space: normal;
  }

  .p-top-cta__title-main {
    font-size: 2.75rem;
  }

  .p-top-cta__title-join {
    font-size: 2.38rem;
  }

  .p-top-cta__text {
    text-align: center;
    margin-inline: auto;
  }

  .p-top-cta__actions {
    margin-inline-start: 0;
  }

  .p-top-cta__visual {
    flex: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* FV：1025px以上のvw指定はこの幅だと文字が小さくなりすぎるので、
     テキスト列の幅と文字サイズだけを画面幅に追従させ、
     右のアートワーク（十字）と重ならない位置で止める。 */
  /* 下の余白は、上（7rem）に対して同程度にする（PCは上下同じ10rem）。 */
  .p-top-fv {
    padding-block-end: 6rem;
  }

  /* 右上に寄せる。十字の装飾（.p-top-fv__spark--large）は枠の右下に
     はみ出して置かれているので、その分の逃げを右側に確保しておく。 */
  .p-top-fv__artwork {
    top: 2rem;
    right: 9%;
    width: 30%;
  }

  .p-top-fv {
    padding-block-start: 7rem;
  }

  .p-top-fv__eyebrow {
    font-size: clamp(0.88rem, 1.75vw, 1.25rem);
    line-height: 1.5;
  }

  .p-top-fv__title {
    width: min(56%, 34rem);
    line-height: 1.55;
  }

  .p-top-fv__lead {
    max-width: min(60%, 36rem);
    font-size: clamp(0.88rem, 1.6vw, 1.12rem);
    line-height: 1.9;
  }

  .p-top-fv__actions {
    margin-block-start: 3rem;
  }

  .p-top-fv__actions .p-top-button {
    width: min(18.75rem, 46%);
    height: 3.5rem;
    min-height: 3.5rem;
    font-size: clamp(0.88rem, 1.7vw, 1.25rem);
  }

  /* YouTube：スライダーが内容幅いっぱいになるので、
     外側に出していた矢印を内側に寄せる（セクションがoverflow:hiddenで切れるため）。 */
  .p-top-youtube__arrow {
    width: 3.5rem;
    height: 3.5rem;
  }

  .p-top-youtube__arrow--prev {
    left: -1.75rem;
  }

  .p-top-youtube__arrow--next {
    right: -1.75rem;
  }

  /* Policy：この幅では見出しが1行に収まらないので、折り返しを許可する。
     （左揃え・マージン0はPC側の指定と同じなので、ここでは書かない） */
  .p-top-policy__title-main {
    white-space: normal;
  }

  /* お客様の声は3枚。2列だと1枚あまるので1列にする。
     3列のままだと1枚231pxまで縮み、本文が2〜3文字ずつ折り返されてしまう。 */
  .p-top-voice__grid {
    grid-template-columns: 1fr;
  }

  /* 支援事例と提供サービスは写真の比率が要なので2列にする。
     3列だとカードが231pxまで縮んで見出しが分断され、
     1列にすると画像が横（サービス 754×140＝比5.39）や縦（事例 754×377）へ間延びする。
     2列ならカード362pxで、画像の比率がデザイン値（事例2.00／サービス2.71）に近づく。 */
  .p-top-case__grid,
  .p-top-service__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 3列で高さを揃えるための最低高さ。1列だと中身より高くなって下が空くので外す。 */
  .p-top-voice__card,
  .p-top-service__card {
    min-height: 0;
  }

  /* 見出し（左）＋リード文（右）の横並びは、この幅だと英字ラベルが潰れるので縦積みにする。 */
  .p-top-service__head,
  .p-top-comparison__head,
  .p-top-company__head {
    display: block;
    min-height: 0;
  }

  .p-top-service__head .c-sec-head,
  .p-top-comparison__heading,
  .p-top-company__head .c-sec-head {
    width: 100%;
    max-width: none;
  }

  .p-top-service__lead,
  .p-top-comparison__lead,
  .p-top-company__lead {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    margin-block-start: 1.5rem;
    text-align: left;
  }

  /* Comparison：表の1列目が広いままだと本文列が潰れるので少し詰める。 */
  /* 比率だけだと1列目が100px弱になり「データの透明性」が3行に割れる。最小幅を持たせる。 */
  .p-top-comparison__table {
    grid-template-columns: minmax(8.75rem, 150fr) minmax(0, 508fr) minmax(
        0,
        508fr
      );
  }

  .p-top-comparison__table > * {
    padding-block: 0.62rem;
    padding-inline: 1.25rem;
  }

  /* Company：画像＋リンクの2列が窮屈になるので縦積みにする。 */
  .p-top-company__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 写真は大きくなりすぎないよう上限を付けるが、そのままだと下のリンク（全幅）に対して
     左に寄って見える。中央に置いてスマホ幅と同じ収まりにする。 */
  .p-top-company__image {
    max-width: 32.43rem;
    margin-inline: auto;
  }

  /* PCでは1行に収まるが、この幅では2行になるので行間を他の2行見出し（1.5）に合わせる。 */
  .p-top-message .c-sec-head__title {
    line-height: 1.5;
  }

  /* Aboutが3.38rem重なるぶんを上に足す（PCと同じ値）。
     6.25remのままだと緑の帯と英字の間が27pxしかない。 */
  .p-top-service {
    padding-block: 8.5rem 5rem;
  }

  /* 5rem＝他のセクションと同じ余白。3.44rem＝Problemのカードが重なるぶん。
     1.88rem＝英字ラベルが上にはみ出すぶん（top: -1.88rem）。 */
  .p-top-solution {
    padding-block-start: calc(5rem + 3.44rem + 1.88rem);
  }

  /* ロゴの幅は%指定だが間隔（gap）は固定なので、内容幅が1054pxより狭いと列がはみ出す。
     縮めて枠内に収める（min-width: 0 は既存）。 */
  .p-top-clients__item {
    flex-shrink: 1;
  }
}

/* YouTubeの矢印はスライダーの外側（-3.38rem）に置くデザイン。
   内容幅が1200pxに満たない画面ではセクションのoverflow:hiddenで切れるため、
   スライダーの内側寄りに逃がす。 */
@media screen and (min-width: 1025px) and (max-width: 1279.98px) {
  .p-top-youtube__arrow--prev {
    left: -2rem;
  }

  .p-top-youtube__arrow--next {
    right: -2rem;
  }
}

/* FVは vw で画面幅に比例させているので、1920pxを超えると際限なく大きくなる。
   デザイン値（1920px時の実寸）で頭打ちにする。上のvw指定と対になっている。 */
@media screen and (min-width: 1920px) {
  .p-top-fv__artwork {
    width: 570px;
    /* 1920pxを超えても構図を広げない。1920px幅の枠を画面中央に置いたときと
       同じ位置（枠の右端から8% ＝ 153.6px）で止める。
       本文側は .l-inner が中央寄せで頭打ちになっているので、両者の間隔が保たれる。 */
    right: calc(50% - 806.4px);
  }
  .p-top-fv__eyebrow {
    font-size: 31px;
  }
  .p-top-fv__title {
    font-size: 60px;
  }
  .p-top-fv__title-large {
    font-size: 69px;
  }
  .p-top-fv__lead {
    margin-block-start: 29px;
    font-size: 24px;
  }
  .p-top-fv__actions {
    margin-block-start: 73px;
  }
  .p-top-fv__actions .p-top-button {
    width: 400px;
    height: 73px;
    font-size: 27px;
  }
  /* ベース側が .p-top-button .p-top-fv__button-note なので、詳細度を合わせる。 */
  .p-top-button .p-top-fv__button-note {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  .p-top-faq__inner,
  .p-top-company__inner,
  .p-top-case__inner {
    max-width: 75rem;
  }
  .p-top-policy {
    background-position:
      0% 0%,
      70% 50%;
  }
  .p-top-about__commitment-label {
    width: 11.5rem;
    height: 1.75rem;
    font-size: 0.875rem;
  }
}

/* 引く幅は代表写真が占める左側のぶん。 */
@media screen and (min-width: 1025px) {
  .p-top-about__commitment-card {
    width: calc(100% - 17.63rem);
  }
}

/* タブレットでもPCと同じ構図（左に写真＋右にカード）を保つ。
   PCは高さ21rem固定で全部を絶対配置にしているが、この幅ではカードの中身が
   増えて収まらないので、カードだけ通常の流し込みに戻し、写真のぶん左を空ける。
   高さはカードが決めるので、枠は height: auto でよい。 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-top-about__commitment {
    position: relative;
    height: auto;
  }
  /* 写真はセクションの下端にそろえる（PCと同じく、人物が緑の帯の下辺に立つ形）。
     -5rem は .p-top-about の padding-block（5rem）の打ち消し。
     セクションは overflow: hidden なので、はみ出したぶんは切られる。
     名前も写真に追従させる。 */
  .p-top-about__president-image {
    position: absolute;
    top: auto;
    bottom: -5rem;
    left: 2rem;
    width: 13.75rem;
    height: auto;
    margin-inline: 0;
  }
  .p-top-about__president-name {
    position: absolute;
    top: auto;
    /* PCは写真の下端から94px上（写真376px）。写真が293pxに縮むぶん同じ比率にする。 */
    bottom: -0.5rem;
    left: 0;
    right: auto;
  }
  /* 写真（左2rem＋幅13.75rem）に少し重なる位置から始める。 */
  .p-top-about__commitment-card {
    position: relative;
    inset: auto;
    width: auto;
    margin-block-start: 2.5rem;
    margin-inline-start: 15rem;
  }
}

@media screen and (max-width: 768px) {
  .p-top-about__inner,
  .p-top-service__inner,
  .p-top-faq__inner,
  .p-top-company__inner,
  .p-top-case__inner,
  .p-top-clients__inner,
  .p-top-fv__inner {
    max-width: 35rem;
  }
  .p-top-fv__inner {
    margin-inline: auto;
  }
  .p-top-policy {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.94),
        rgba(255, 255, 255, 0.64)
      ),
      url(../images/top/policy-bg-sp.webp) center/cover no-repeat;
  }
  .p-top-fv__title {
    font-size: min(1.75rem, calc((100vw - 2.5rem) * 0.063));
  }
  .p-top-fv__title-large {
    font-size: 1.14em;
  }
  .p-top-fv__title-small {
    font-size: 1em;
  }
  /* 枠の幅を中身のいちばん広いボタンに合わせ、2つともその幅まで伸ばす
     （align-items: stretch）。こうすると2つのボタンが必ず同じ幅になる。
     枠自体は margin-inline: auto で中央に置く。 */
  .p-top-about__points {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .p-top-about__point,
  .p-top-about__point--01,
  .p-top-about__point--02 {
    width: auto;
    max-width: 100%;
  }
  .p-top-comparison__table {
    grid-template-columns: 110px 205px 205px;
  }
  .p-top-comparison__note {
    font-size: 1.04rem;
  }
  .p-top-about__image {
    aspect-ratio: auto;
  }
  .p-top-cta {
    padding-block: 3rem 2rem;
  }
  .p-top-cta__text {
    margin-block-start: 1rem;
    text-align: start;
  }
  .p-top-cta__actions {
    margin-block-start: 1.75rem;
  }
  .p-top-column .c-card-post__title {
    font-size: 16px;
  }
}

.p-top-cta__body {
  display: block;
  text-align: center;
}

.p-top-cta__title::after {
  display: none;
}

@media screen and (max-width: 1024px) {
  .p-top-about__commitment-card::before {
    display: none;
  }
}

.p-top-fv__title-line {
  white-space: nowrap;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-top-fv__title {
    font-size: 3.06vw;
  }
  .p-top-fv__title-large {
    font-size: 3.6vw;
  }
  .p-top-fv__title-small {
    font-size: 3.13vw;
  }
  /* 枠を中身のいちばん広いボタンに合わせ、2つともその幅まで伸ばす。 */
  .p-top-about__points {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .p-top-about__point,
  .p-top-about__point--01,
  .p-top-about__point--02 {
    width: auto;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   会社概要 → よくある質問 の境目だけ詰める。

   この2つは背景が同じ（#f9f9f9）で、見た目は続きの1枚に見える。
   それぞれの上下100pxがそのまま重なると、中身どうしが217px離れて間延びする。
   他のセクションの境目は背景が切り替わるので、100px＋100pxのままでよい。
   セクション側の padding-block より後ろに置いて上書きする。
   ------------------------------------------------------------------ */
.p-top-company {
  padding-block-end: 3.75rem;
}

.p-top-company + .p-top-faq {
  padding-block-start: 3.75rem;
}

@media screen and (max-width: 768px) {
  .p-top-company {
    padding-block-end: 2.5rem;
  }
  .p-top-company + .p-top-faq {
    padding-block-start: 2.5rem;
  }
  .p-top-choice__pointer {
    bottom: -5px;
  }
  .p-top-message__line {
    display: none;
  }
  .p-top-service__arrow {
    display: none;
  }
}

/* 修正追加　20260927 */
.p-top-service__feature-link-text span {
  display: inline-block;
}

/* ===== PC・タブレット（769px以上）の調整 =====
   スマホでは元の宣言の値を使い、PC・タブレットだけ値を変えるものをここにまとめている。
   値を直すときは、元の宣言とこのブロックの両方を確認すること。 */
@media screen and (min-width: 769px) {
  /* --- 支援企業ロゴ --- */
  /* 支援企業ロゴの見出し */
  .p-top-clients__title {
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .p-top-clients__title-note {
    font-size: 1rem;
  }

  /* --- 会社紹介（About） --- */
  .c-sec-head--about .c-sec-head__title {
    font-size: 2rem;
  }

  /* AI対策セクションの導入文 28px → 22px */
  .p-top-about__intro {
    font-size: 1.38rem;
    line-height: 1.7;
  }
  .p-top-about__detail,
  .p-top-about__achievements,
  .p-top-about__commitment-text {
    line-height: 1.8;
  }
  .p-top-about__president-name {
    line-height: 1.6;
  }
  .c-sec-head--about .c-sec-head__title,
  .p-top-about__subheading {
    line-height: 1.4;
  }
  .c-sec-head--about .c-sec-head__sub {
    line-height: 1.2;
  }

  /* AI対策：小見出しを導入文（22px）より一段小さく */
  .p-top-about__subheading {
    font-size: 1.12rem; /* 22px → 18px */
  }

  /* --- 提供サービス --- */
  .p-top-service__head .c-sec-head__label {
    font-size: 3.5rem;
  }
  .p-top-service__feature-title {
    font-size: 1.38rem;
  }
  .p-top-service__feature {
    margin-block-start: 2.5rem;
  }
  .p-top-service__lead,
  .p-top-service__feature-text,
  .p-top-service__card-text {
    line-height: 1.8;
  }
  .p-top-service__feature-link {
    line-height: 1.6;
  }
  .p-top-service__feature-title,
  .p-top-service__card-title {
    line-height: 1.5;
  }
  .p-top-service__head .c-sec-head__title {
    line-height: 1.2;
  }

  /* --- 支援事例 --- */
  .p-top-case .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .p-top-case {
    padding-block: 5rem;
  }
  .p-top-case__grid {
    margin-block-start: 2.5rem;
  }
  .p-top-case__button {
    margin-block-start: 2.5rem;
  }
  .p-top-case__text {
    line-height: 1.8;
  }
  .p-top-case__title {
    line-height: 1.6;
  }
  .p-top-case .c-sec-head__title {
    line-height: 1.2;
  }

  /* --- 大切にしている3つのこと --- */
  .p-top-policy__title-main {
    font-size: 2rem;
    line-height: 1.4;
  }

  /* 大切にしている3つのこと：「3」 */
  .p-top-policy__number {
    font-size: 3rem;
  }
  .p-top-policy {
    padding-block: 5rem 8rem;
  }
  .p-top-policy__list {
    margin-block-start: 2.5rem;
    gap: 2rem;
  }
  .p-top-policy__item,
  .p-top-policy__item--01,
  .p-top-policy__item-title {
    min-height: 0;
  }
  .p-top-policy__text {
    line-height: 1.8;
  }
  .p-top-policy__item-title {
    line-height: 1.5;
  }
  .p-top-policy__kicker {
    line-height: 1.4;
  }
  .p-top-policy__subtitle {
    line-height: 1.2;
  }

  /* 大切にしている3つのこと：アイコン 89px → 72px */
  .p-top-policy__item {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1.5rem;
  }
  .p-top-policy__icon {
    width: 4.5rem;
    height: 4.35rem;
  }

  /* --- こんな経験 --- */
  .p-top-problem__title {
    font-size: 2rem;
  }
  .p-top-problem {
    padding-block: 5rem;
  }
  .p-top-problem__kicker {
    line-height: 1.4;
  }

  /* こんな経験：吹き出しの高さ（60px）は保ったまま、行間を余白に置き換える
       （2行に折り返したときに行間が開きすぎないように） */
  .p-top-problem__item {
    padding-block: 0.94rem;
    line-height: 1.5;
  }

  /* --- 相性の良い企業様 --- */
  .p-top-matching__title-main {
    font-size: 2rem;
  }
  .p-top-matching__title-join {
    font-size: 1.62rem;
  }
  .p-top-matching {
    padding-block: 5rem;
  }
  .p-top-matching__grid {
    margin-block-start: 2.5rem;
  }

  /* 相性の良い企業様：1行の項目が100px固定になっていたのを詰める */
  .p-top-matching__item {
    min-height: 4.25rem;
    line-height: 1.6;
  }
  .p-top-matching__panel.is-muted .p-top-matching__item--05,
  .p-top-matching__item--09 {
    min-height: 0;
  }
  .p-top-matching__panel-title {
    line-height: 1.5;
  }
  .p-top-matching__title {
    line-height: 1.4;
  }
  .p-top-matching__kicker {
    line-height: 1.4;
  }

  /* --- お客様の声 --- */
  .p-top-voice .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .p-top-voice {
    padding-block-end: 8.5rem;
  }
  .p-top-voice__grid {
    margin-block-start: 2.5rem;
  }
  .p-top-voice__text {
    line-height: 1.8;
  }
  .p-top-voice__service {
    line-height: 1.6;
  }
  .p-top-voice__name {
    line-height: 1.5;
  }
  .p-top-voice .c-sec-head__title {
    line-height: 1.2;
  }

  /* --- 選び方 --- */
  .p-top-choice__title {
    font-size: 2rem;
    line-height: 1.4;
  }
  .p-top-choice__item-title {
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .p-top-choice {
    padding-block: 5rem 10.25rem;
  }
  .p-top-choice__box {
    margin-block-start: 2.5rem;
  }
  .p-top-choice__item,
  .p-top-choice__row,
  .p-top-choice__summary,
  .p-top-choice__text {
    min-height: 0;
  }
  .p-top-choice__text {
    line-height: 1.8;
  }
  .p-top-choice__kicker {
    line-height: 1.4;
  }

  /* 選び方：「Point」の丸 80px → 64px（線・文字・位置も同じ比率で縮める） */
  .p-top-choice__point {
    height: 4.25rem;
  }
  .p-top-choice__line {
    top: 2rem;
  }
  .p-top-choice__point-bg {
    width: 4rem;
    height: 4rem;
  }
  .p-top-choice__point-label {
    top: 0.75rem;
    gap: 0;
    font-size: 0.81rem;
  }
  .p-top-choice__point-number {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  /* 選び方：余白を詰め、イラストの高さを揃えて項目の高さを統一（レイアウトは縦1列のまま） */
  .p-top-choice__summary {
    gap: 8px;
    padding-block: 12px; /* 既存の padding-block: 1.5rem を置き換え */
  }
  .p-top-choice__summary .p-top-choice__illustration {
    width: auto;
    height: 80px; /* 幅6.25rem固定 → 高さ80pxで揃える */
  }
  .p-top-choice__summary .p-top-choice__image {
    width: auto;
    height: 100%;
  }

  /* --- CTA --- */
  /* CTA */
  .p-top-cta__title-main {
    font-size: 2.75rem;
  }
  .p-top-cta__title-join {
    font-size: 2.38rem;
  }
  .p-top-cta__text {
    line-height: 1.8;
  }

  /* CTAの見出し */
  .p-top-cta__title {
    line-height: 1.3;
  }

  /* --- 比較表 --- */
  .p-top-comparison__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }

  /* 比較表の下の一文 */
  .p-top-comparison__note {
    font-size: 1.25rem;
    line-height: 1.8;
  }
  .p-top-comparison__note-emphasis {
    font-size: 1.62rem;
  }
  .p-top-comparison__note-join {
    font-size: 1.5rem;
  }
  .p-top-comparison {
    padding-block: 5rem;
  }
  .p-top-comparison__table,
  .p-top-comparison__note {
    margin-block-start: 2.5rem;
  }
  .p-top-comparison__lead {
    min-height: 0;
    line-height: 1.8;
  }

  /* 比較表の行 */
  .p-top-comparison__table > * {
    min-height: 4.5rem;
    line-height: 1.6;
  }
  .p-top-comparison__column-title {
    min-height: 4rem;
    line-height: 1.5;
  }
  .p-top-comparison__title {
    line-height: 1.4;
  }

  /* --- ご利用の流れ --- */
  .p-top-flow .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .p-top-flow {
    padding-block: 5rem;
  }
  .p-top-flow__list {
    margin-block-start: 2.5rem;
  }
  .p-top-flow__text {
    line-height: 1.5;
  }
  .p-top-flow .c-sec-head__title {
    line-height: 1.2;
  }

  /* --- 会社情報 --- */
  .p-top-company__head .c-sec-head__label {
    font-size: 3.5rem;
  }
  .p-top-company {
    padding-block-start: 5rem;
  }
  .p-top-company__lead {
    line-height: 1.8;
  }
  .p-top-company__link-text {
    line-height: 1.6;
  }
  .p-top-company__link-title {
    line-height: 1.5;
  }
  .p-top-company__head .c-sec-head__title {
    line-height: 1.2;
  }

  /* --- よくある質問 --- */
  .p-top-faq__title {
    font-size: 2rem;
  }
  .p-top-faq__question {
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .p-top-faq {
    padding-block-end: 5rem;
  }
  .p-top-faq__list {
    margin-block-start: 2.5rem;
    gap: 1rem;
  }
  .p-top-faq__button {
    margin-block-start: 2.5rem;
  }
  .p-top-faq__answer {
    line-height: 1.8;
  }
  .p-top-faq__kicker {
    line-height: 1.4;
  }

  /* --- コラム --- */
  .p-top-column .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .p-top-column {
    padding-block: 5rem;
  }
  .p-top-column__list {
    margin-block-start: 2.5rem;
  }
  .p-top-column__more {
    margin-block-start: 2.5rem;
  }
  .p-top-column .c-card-post__meta {
    line-height: 1.6;
  }
  .p-top-column .c-card-post__title {
    line-height: 1.6;
  }

  /* --- 代表メッセージ --- */
  .p-top-message .c-sec-head__label {
    font-size: 3.5rem;
    line-height: 1.1;
  }
  .p-top-message {
    padding-block: 5rem calc(5rem + 3.19rem); /* YouTubeが3.19rem重なるぶんを下に足す */
  }

  /* 代表メッセージ */
  .p-top-message__paragraph {
    line-height: 2;
  }
  .p-top-message__role {
    line-height: 1.6;
  }

  /* --- YouTube --- */
  .p-top-youtube__title {
    font-size: 2rem;
    line-height: 1.4;
  }
  .p-top-youtube {
    padding-block: 5rem;
  }
  .p-top-youtube__lead {
    margin-block-start: 2.5rem;
    line-height: 1.8;
  }
  .p-top-youtube__slider {
    margin-block-start: 2rem;
  }

  /* --- お知らせ --- */
  .p-top-news .c-sec-head__label {
    font-size: 3.5rem;
  }
}

/* ===== PC（1025px以上）だけの調整 =====
   上のブロックから、タブレットに別の指定があるものを取り出してPC専用にしている。
   ・こんな経験の吹き出しの文字：タブレットは clamp() で画面幅に合わせて小さくしている
   ・ソリューション：タブレットは769〜1024pxのブロックに別の2列レイアウトがある */
@media screen and (min-width: 1025px) {
  /* --- こんな経験 --- */
  .p-top-problem__item {
    font-size: 1.25rem;
  }

  /* --- ソリューション --- */
  .p-top-solution__number {
    line-height: 1;
  }

  /* ソリューション：高さ固定・絶対配置 → 2列グリッド */
  .p-top-solution {
    padding-block-end: 6rem;
  }
  .p-top-solution__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 7.5rem;
    row-gap: 3rem;
    align-items: start;
    padding-block-start: 16rem;
    padding-inline: 0;
  }
  .p-top-solution__item--02,
  .p-top-solution__item--04 {
    margin-block-start: 2.5rem;
  }
}

/* ===== ファーストビュー：1441px以上も1440pxと同じ左寄りに ===== */
/* 1441〜1920px：文章の左端を画面幅の11%に（1440pxでの位置 158px ÷ 1436px）。
   .l-inner の最大幅1200px・中央寄せを外す。 */
@media screen and (min-width: 1441px) {
  .p-top-fv__inner {
    max-width: none;
    padding-inline-start: 11%;
  }
}
/* 1921px以上：十字の画像と同じく、1920px幅のデザインを中央に置いた位置で固定。
   1920px × 11% = 211.2px → 中央からの距離 960px − 211.2px = 748.8px */
@media screen and (min-width: 1921px) {
  .p-top-fv__inner {
    padding-inline-start: calc(50% - 748.8px);
  }
}

/* 「相性の良い企業様」の項目。タブレットでは2〜3行に折り返すのに、
   高さ4.25rem固定・上下余白0のままだと文字が区切り線にくっつく。
   高さは中身に任せ、上下に余白を持たせる（SPと同じ考え方）。 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-top-matching__item {
    min-height: 0;
    padding-block: 0.88rem;
  }
}

/* ===== タブレットのセクション余白 =====
   PCと同じ5rem（80px）だと画面幅に対して広いので、基本を4rem（64px）にする。
   重なり（負のマージン）を持つセクションは、重なり分を足したまま基本だけ1rem縮める。
   Serviceの上（Aboutとの間）は詰めると窮屈なので据え置き、下だけ縮める。 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .p-top-about {
    padding-block: 4rem;
  }
  .p-top-service {
    padding-block-end: 4rem;
  }
  .p-top-case,
  .p-top-problem,
  .p-top-matching,
  .p-top-comparison,
  .p-top-flow,
  .p-top-column,
  .p-top-youtube {
    padding-block: 4rem;
  }
  .p-top-policy {
    padding-block: 4rem 7rem; /* 下はProblemの重なり2.88rem込み */
  }
  .p-top-solution {
    padding-block: calc(4rem + 3.44rem + 1.88rem) 4rem; /* Problemの重なり＋英字のはみ出し */
  }
  .p-top-voice {
    padding-block-end: 7.5rem; /* Choiceの重なり3.44rem込み */
  }
  .p-top-choice {
    padding-block: 4rem 9.25rem; /* 下はCTAの重なり5.25rem込み */
  }
  .p-top-cta {
    padding-block-start: 4rem;
  }
  .p-top-company {
    padding-block: 4rem 3rem;
  }
  .p-top-company + .p-top-faq {
    padding-block-start: 3rem;
  }
  .p-top-faq {
    padding-block-end: 4rem;
  }
  .p-top-message {
    padding-block: 4rem calc(4rem + 3.19rem); /* YouTubeの重なり込み */
  }
  .p-top-news {
    padding-block: 6rem 4rem; /* 上はYouTubeとの重なり2.94rem込み */
  }
}