@charset "UTF-8";
/*
 * サービスのページ4つ(デジタルパートナー・ちょうどええホームページ・LINEでの販売の仕組み・88サイト)で共通の CSS
 * (2026-10-27 作成。作業指示 SR-20261027-01 の 4-5 ⑤・4-6 ⑥)
 *
 * - 読み込み:各ページのテンプレート(page-<スラッグ>.php)が、get_header() の前に wp_enqueue_style() で読む
 *   (functions.php は変えない)。assets/css/style.css の後に読まれる。style.css・ai-training.css は変えない。
 * - 指定の始まり:
 *     共通の部品 …… .p-sp(各ページのいちばん外の箱。<div class="p-sp p-sp-<ページ>">)
 *     ページだけ …… .p-sp-<ページ>(例 .p-sp-digital-partner)。ページだけの子のクラスは短い頭(デジタルパートナーは p-sp-dp-)
 * - あとからページを足すときは、このファイルの最後に足す。既にある指定は変えない・消さない・並べ替えない。
 * - 切り替えの幅は、今の style.css と同じ(768・960・1280px)を使う。Figma の幅(1440px)の並びが 1280〜1439px で入らないものだけ、
 *   1440px でも切り替える(流れの3列・一緒に取り組めることのカード)。
 * - 同じ並びの枠は、高さをそろえる(社長指示)。高さを数字で決め打ちせず、grid でいちばん高い枠にそろえる。
 * - 色:文字 #292929、紺 #182957、ピンク #DA005C、濃いピンク #C2004F(明るい地の上の文字のリンク)、クリーム #FFF0BF、
 *   英字(紺の上) #FF8DB8、注の灰色 #5A5A5A、枠線 #D9DBE5
 */

/* =====================================================================
 * 共通の部品(.p-sp)
 * ===================================================================== */

/* 折り返しの最後の行が1〜3文字だけにならないよう、ブラウザに整えてもらう(対応しないブラウザでは何も変わらない) */
.p-sp {
  text-wrap: pretty;
}

/* 新しく作った部品は、幅・高さに枠線と内側の余白を含める */
.p-sp [class*="p-sp-"],
.p-sp [class*="p-sp__"] {
  box-sizing: border-box;
}

/* 最初の画面の h1(小さい行+大きい行)。スマホの見出し(p)も同じ見た目 */
.p-sp .p-sp__mv-title {
  font-weight: bold;
}

.p-sp .p-sp__mv-title-small {
  display: block;
  font-size: 1.4rem;
  line-height: 1.6;
}

.p-sp .p-sp__mv-title-large {
  display: block;
  font-size: 2.4rem;
  line-height: 1.5;
}

/* 見出し(c-title)の下のあき・見出しの下の1行 */
.p-sp .p-sp__header {
  margin-bottom: 24px;
}

.p-sp .p-sp__lead {
  margin-bottom: 24px;
  text-align: center;
}

/* 本文の中の文字のリンク(ナビ・導線設計 v1 10章:ピンク #DA005C・太字・下線。大きさはまわりの本文と同じ=指定しない) */
.p-sp .p-sp__textlink {
  color: #DA005C;
  font-weight: bold;
  text-decoration: underline;
}

/* 黄色・クリームなど明るい地の上(#DA005C では 4.5:1 に届かない):濃いピンク #C2004F(10章の例外) */
.p-sp .p-sp__textlink--on-light {
  color: #C2004F;
}

.p-sp .p-sp__link-line {
  text-align: center;
}

/* ボタンの並び(無料相談・資料をダウンロード。間 20px。幅が足りないときは縦に積む) */
.p-sp .p-sp__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* ボタン:今の .c-button(.c-button--l)を使い、大きさだけ Figma(296×61・角丸40・文字18px)に合わせる */
.p-sp .p-sp__button {
  border-radius: 40px;
  height: 61px;
  line-height: 59px;
  margin-left: 0;
  margin-right: 0;
  max-width: 296px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

.p-sp .p-sp__button .c-button__caption {
  font-size: 1.8rem;
}

/* 資料をダウンロードのボタン(ちょうどええ・88サイトで使う):白い地・ピンク 2px の枠・ピンクの文字。大きさは無料相談と同じ */
.p-sp .p-sp__button--doc {
  background-color: #ffffff;
  border: 2px solid #DA005C;
  color: #DA005C;
  line-height: 57px;
}

/* ----- 導入(.p-sp-intro):サービスのページの TROUBLE の部品(p-service-trouble)を使う ----- */
.p-sp .p-sp-intro__catch > span {
  display: block;
  font-weight: bold;
}

.p-sp .p-sp-intro__text {
  margin-top: 24px;
}

.p-sp .p-sp-intro__cta-lead {
  margin-top: 16px;
}

.p-sp .p-sp-intro__cta {
  margin-top: 24px;
}

.p-sp .p-sp-intro__name {
  margin-top: 16px;
}

/*
 * 紺の吹き出し(今の部品 p-service-trouble__contents-header):今の部品は高さが数字(62px/90px)のため、
 * 2〜3行の文が入るよう、高さを文字に合わせて伸ばす(今の高さを最小の高さにする)。左右の内側の余白は、
 * 左下の人のイラスト・右上の飾りに文字が重ならない幅(AI研修のページの 1280px 未満の直しと同じ考え方)。
 */
.p-sp .p-service-trouble__contents-header {
  box-sizing: border-box;
  height: auto;
  min-height: 62px;
  padding: 7px 53px;
}

/* ----- お悩み(今の部品 p-service-solution):高さをそろえる。今の高さ 98px/154px を最小の高さにする ----- */
.p-sp .p-service-solution__list {
  grid-auto-rows: 1fr;
}

.p-sp .p-service-solution__item {
  height: auto;
  min-height: 98px;
}

/* ----- 6か月などのカード(今の部品 p-service-case):高さをそろえる ----- */
.p-sp .p-service-case__grid {
  grid-auto-rows: 1fr;
}

/* ----- 流れ(.p-sp-flow):番号の札・見出し・本文の枠。6つの高さをそろえる ----- */
.p-sp .p-sp-flow__list {
  display: grid;
  gap: 16px;
  grid-auto-rows: 1fr;
}

.p-sp .p-sp-flow__item {
  align-items: flex-start;
  background-color: #ffffff;
  border: 1px solid #D9DBE5;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  text-align: left;
}

/* 番号の札:角丸4pxの紺の四角。Jost Medium 16px 白 */
.p-sp .p-sp-flow__number {
  background-color: #182957;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 12px;
}

.p-sp .p-sp-flow__title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}

.p-sp .p-sp-flow__text {
  font-size: 1.4rem;
  line-height: 1.6;
}

.p-sp .p-sp-flow__note {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 40px;
  text-align: center;
}

.p-sp .p-sp-flow__buttons {
  margin-top: 24px;
}

/* ----- 注意書きの枠(.p-sp-notes):ピンクの 1px の枠・14px。2行目以降の字下げは .p-sp-notes__indent ----- */
.p-sp .p-sp-notes {
  border: 1px solid #DA005C;
  border-radius: 8px;
  display: grid;
  font-size: 1.4rem;
  gap: 10px;
  line-height: 1.7;
  padding: 20px 16px;
}

.p-sp .p-sp-notes__indent {
  padding-left: 1em;
}

/* ----- ほかのご支援(.p-sp-others):カード(箱全体がリンク)と「できること」へのリンク ----- */
.p-sp .p-sp-others__title {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 24px;
  text-align: center;
}

/* 待ちのカードが出ない間も左に寄らないよう、中央ぞろえ(原稿 デジタルパートナー 13-1) */
.p-sp .p-sp-others__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.p-sp .p-sp-others__card {
  background-color: #ffffff;
  border: 1px solid #D9DBE5;
  border-radius: 8px;
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  padding: 20px 19px;
}

.p-sp .p-sp-others__card > span {
  display: block;
}

.p-sp .p-sp-others__card-title {
  color: #182957;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 24px;
}

.p-sp .p-sp-others__card-text {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 10px;
}

/* 「くわしく見る →」:カード全体のリンクの印(10章の対象外。下線なし)。カードの下端にそろえる */
.p-sp .p-sp-others__card-more {
  color: #DA005C;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 16px;
  margin-top: auto;
  padding-top: 10px;
}

.p-sp .p-sp-others__all {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 24px;
}

/* ----- 最後の案内(.p-sp-contact):紺の箱+ピンクのボタン ----- */
.p-sp .p-sp-contact__box {
  background-color: #182957;
  border-radius: 12px;
  color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  padding: 40px 20px;
  text-align: center;
}

.p-sp .p-sp-contact__box .c-title {
  margin-bottom: 20px;
}

.p-sp .p-sp-contact__box .c-title--jp {
  color: #ffffff;
  font-weight: bold;
}

.p-sp .p-sp-contact__box .c-title--en {
  color: #FF8DB8;
}

.p-sp .p-sp-contact__text {
  line-height: 1.8;
  margin-bottom: 20px;
}

.p-sp .p-sp-contact__lead {
  color: #FFF0BF;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 20px;
}

.p-sp .p-sp-contact__mail {
  font-size: 1.4rem;
  margin-top: 20px;
}

/* 共通:768px 未満(スマホ) */
@media (max-width: 767.98px) {
  /*
   * PC の幅に合わせた改行の指定は、スマホでは外して自然に折り返す(原稿 デジタルパートナー 14-2):
   * 最後の案内の本文・流れの枠の本文・ほかのご支援のカードの説明。
   * 行は1つのまとまり(inline-block)のまま横に続け、入らないときはまとまりの切れ目で折り返す(1〜3文字だけの行を作らない)
   */
  .p-sp .p-sp-contact__text .c-split--block,
  .p-sp .p-sp-flow__text .c-split--block,
  .p-sp .p-sp-others__card-text .c-split--block {
    display: inline-block;
  }
}

/* 共通:768px 以上 */
@media (min-width: 768px) {
  .p-sp .p-sp__mv-title-small {
    font-size: 1.5rem;
    line-height: 41px;
  }

  .p-sp .p-sp__mv-title-large {
    font-size: 2.2rem;
    line-height: 45px;
  }

  .p-sp .p-sp-flow__list {
    grid-template-columns: 1fr 1fr;
  }

  .p-sp .p-sp-others__card {
    flex: 0 1 calc(50% - 7px);
  }
}

/* 共通:960px 以上(今の .c-title の大きさが変わる幅) */
@media (min-width: 960px) {
  .p-sp .p-sp__header {
    margin-bottom: 40px;
  }

  .p-sp .p-sp__lead {
    margin-bottom: 40px;
  }

  .p-sp .p-sp-notes {
    padding: 25px 33px;
  }

  .p-sp .p-sp-others__title {
    font-size: 2rem;
  }

  /* 最初の画面のレンズが 768px では小さいため、大きい行は 960px 以上で 26px */
  .p-sp .p-sp__mv-title-large {
    font-size: 2.6rem;
  }

  .p-sp .p-sp-contact__box {
    padding: 56px 60px;
  }
}

/* 共通:1280px 以上(サービスのページの部品が横並びになる幅) */
@media (min-width: 1280px) {
  .p-sp .p-service-trouble__contents-header {
    min-height: 90px;
    padding: 9px 59px;
  }

  .p-sp .p-service-solution__item {
    min-height: 154px;
  }

  .p-sp .p-sp-flow__item {
    padding: 20px 21px;
  }

  .p-sp .p-sp-flow__note {
    margin-top: 48px;
  }

  .p-sp .p-sp-others__card {
    flex: 0 0 222px;
    min-height: 192px;
  }
}

/* 共通:1280〜1439px:ほかのご支援のカード(222px)が4枚では1行に入らないため、2枚ずつ(2列×2段)にする */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .p-sp .p-sp-others__cards {
    margin-left: auto;
    margin-right: auto;
    max-width: 458px;
  }
}

/* 共通:1440px 以上(Figma の幅) */
@media (min-width: 1440px) {
  /* ほかのご支援のカード:4枚の並び(930px)は本文の幅(909px)より広い(Figma)。左右に少しはみ出して中央に置く */
  .p-sp .p-sp-others__cards {
    --sp-others-w: min(930px, calc(100% + 32px));
    margin-left: calc((100% - var(--sp-others-w)) / 2);
    width: var(--sp-others-w);
  }

  /* 流れ:3列×2段。Figma では本文の幅(909px)より広い 1001px(左右に 46px ずつはみ出す)。中央に置く。1440px 未満は2列×3段 */
  .p-sp .p-sp-flow__list {
    --sp-flow-w: min(1001px, calc(100% + 92px));
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: calc((100% - var(--sp-flow-w)) / 2);
    width: var(--sp-flow-w);
  }
}

/* =====================================================================
 * デジタルパートナー(.p-sp-digital-partner。子のクラスは p-sp-dp-)
 * 原稿 v6・Figma 48:2。2026-10-27
 * ===================================================================== */

/* 導入の写真(Figma 369×320)。名乗りの1行は Figma では列の幅(500px)より 7px 長い 507px の1行のため、折り返さない(右の 40px のあきに少し入る) */
@media (min-width: 1280px) {
  .p-sp-digital-partner .p-sp-intro__media img {
    aspect-ratio: 369/320;
  }

  .p-sp-digital-partner .p-sp-intro__name {
    white-space: nowrap;
  }
}

/* 導入のボタン:スマホでは画面の幅いっぱい(左右は本文と同じあき。原稿 14-2) */
@media (max-width: 767.98px) {
  .p-sp-digital-partner .p-sp-intro__button {
    max-width: none;
  }
}

/* ----- お悩みの4枚:スマホ・タブレットは 2列×2段(原稿 14-2)。番号の札(上に 16px 出る)のぶん、段の間をあける ----- */
@media (max-width: 1279.98px) {
  .p-sp-digital-partner .p-service-solution__list {
    gap: 36px 12px;
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-digital-partner .p-service-solution__item {
    padding: 36px 8px 14px;
  }
}

/* スマホ(2列で幅が狭い)ではお悩みの文字を 14px に */
@media (max-width: 767.98px) {
  .p-sp-digital-partner .p-service-solution__item {
    font-size: 1.3rem;
  }
}

/* ----- 外部のデジタル担当(WHAT) ----- */
.p-sp-digital-partner .p-sp-dp-what__text1 {
  line-height: 30px;
  margin-bottom: 40px;
  text-align: center;
}

.p-sp-digital-partner .p-sp-dp-what__compare {
  display: grid;
  gap: 20px;
  grid-auto-rows: 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}

/* 比べるカード:上ぞろえ(上 28px・見出しと本文 8px・下 14px。原稿 5章 v5) */
.p-sp-digital-partner .p-sp-dp-what__card {
  background-color: #ffffff;
  border: 1px solid #182957;
  border-radius: 6px;
  padding: 28px 16px 12px;
  text-align: center;
}

.p-sp-digital-partner .p-sp-dp-what__card-title {
  color: #182957;
  font-size: 2rem;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 8px;
}

.p-sp-digital-partner .p-sp-dp-what__card-text {
  line-height: 24px;
}

.p-sp-digital-partner .p-sp-dp-what__point {
  color: #DA005C;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: center;
}

/* 本文2・3とブログのリンクの枠:幅 668px を中央に置き、中は左ぞろえ(原稿 5章 v4) */
.p-sp-digital-partner .p-sp-dp-what__body {
  margin-left: auto;
  margin-right: auto;
  max-width: 668px;
}

.p-sp-digital-partner .p-sp-dp-what__para {
  line-height: 30px;
}

.p-sp-digital-partner .p-sp-dp-what__para + .p-sp-dp-what__para {
  margin-top: 12px;
}

.p-sp-digital-partner .p-sp-dp-what__link {
  line-height: 24px;
  margin-top: 12px;
}

/* ----- 働き方(STYLE。今の部品 p-service-consulting) ----- */
/* 本文の下の注(本文の下 12px・14px・行の高さ 170%・#5A5A5A。原稿 6-2 v3) */
.p-sp-digital-partner .p-sp-dp-style__note {
  color: #5A5A5A;
  font-size: 1.4rem;
  line-height: 1.7;
  margin-top: 12px;
}

/* 帯4本:高さをそろえ、中の見出しと本文を上下中央に */
.p-sp-digital-partner .p-sp-dp-style .p-service-consulting__list {
  grid-auto-rows: 1fr;
}

.p-sp-digital-partner .p-sp-dp-style__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 帯の中の本文(白・15px・太字なし)。帯の傾きを打ち消す(見出しの行と同じ)。左の位置は見出しの行とそろえる */
.p-sp-digital-partner .p-sp-dp-style__item-text {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.6;
  margin-top: 4px;
  padding-left: 40px;
  -webkit-transform: skewX(15deg);
  -ms-transform: skewX(15deg);
  transform: skewX(15deg);
}

/* ----- 担当する人(PERSON。今の部品 p-service-trouble) ----- */
.p-sp-digital-partner .p-sp-dp-person__h3 > span {
  display: block;
  font-weight: bold;
  line-height: 1.5;
}

.p-sp-digital-partner .p-sp-dp-person__h3-small {
  font-size: 1.6rem;
}

.p-sp-digital-partner .p-sp-dp-person__h3-large {
  font-size: 2.4rem;
}

.p-sp-digital-partner .p-sp-dp-person__text {
  margin-top: 24px;
}

.p-sp-digital-partner .p-sp-dp-person__link {
  line-height: 24px;
  margin-top: 16px;
}

.p-sp-digital-partner .p-sp-dp-person__link--contact {
  margin-top: 12px;
}

/* スマホ・タブレット(1列)では写真を先に置く(原稿 14-2) */
@media (max-width: 1279.98px) {
  .p-sp-digital-partner .p-sp-dp-person__media {
    order: -1;
  }
}

/* ----- 6か月(今の部品 p-service-case):カードに紺の 1px の枠線(原稿 7章 v3) ----- */
.p-sp-digital-partner .p-sp-dp-months .p-service-case__item {
  border: 1px solid #182957;
  overflow: hidden;
}

.p-sp-digital-partner .p-sp-dp-months .p-service-case__item-header {
  border-radius: 0;
}

.p-sp-digital-partner .p-sp-dp-months__note {
  margin-top: 24px;
  text-align: center;
}

.p-sp-digital-partner .p-sp-dp-months__link {
  margin-top: 16px;
}

/* ----- 一緒に取り組めること(SUPPORT) ----- */
.p-sp-digital-partner .p-sp-dp-support .p-sp__lead {
  line-height: 28px;
}

.p-sp-digital-partner .p-sp-dp-support__cards {
  display: grid;
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}

.p-sp-digital-partner .p-sp-dp-support__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.p-sp-digital-partner .p-sp-dp-support__card-title {
  color: #182957;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 28px;
}

.p-sp-digital-partner .p-sp-dp-support__card-text {
  font-size: 1.5rem;
  line-height: 26px;
  margin-top: 12px;
}

/* カード1・2のリンクの塊(前置き+リンク)は、カードの下にそろえる(原稿 8-1 v3)。本文とのあきは 20px 以上(監査 R6 の提案1) */
.p-sp-digital-partner .p-sp-dp-support__card-links {
  margin-top: auto;
  padding-top: 20px;
}

.p-sp-digital-partner .p-sp-dp-support__card-pre {
  font-size: 1.3rem;
  line-height: 20px;
}

.p-sp-digital-partner .p-sp-dp-support__card-link {
  font-size: 1.5rem;
  line-height: 24px;
  margin-top: 4px;
}

/* 月額の中/別にお見積もり(表)。2つの箱の高さをそろえる */
.p-sp-digital-partner .p-sp-dp-support__table {
  display: grid;
  gap: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 940px;
}

.p-sp-digital-partner .p-sp-dp-support__box {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  overflow: hidden;
}

.p-sp-digital-partner .p-sp-dp-support__box--out {
  border-color: #DA005C;
}

.p-sp-digital-partner .p-sp-dp-support__box-title {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 22px;
  padding: 14px 20px;
}

.p-sp-digital-partner .p-sp-dp-support__box--out .p-sp-dp-support__box-title {
  background-color: #DA005C;
}

.p-sp-digital-partner .p-sp-dp-support__box-list {
  display: grid;
  font-size: 1.5rem;
  gap: 10px;
  line-height: 24px;
  padding: 18px 20px;
}

.p-sp-digital-partner .p-sp-dp-support__table-note {
  font-size: 1.5rem;
  line-height: 26px;
  margin-top: 40px;
  text-align: center;
}

/* 相談の例(黄色の枠・チェックリスト) */
.p-sp-digital-partner .p-sp-dp-support__examples {
  background-color: #FFF0BF;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  max-width: 940px;
  padding: 24px 20px;
}

.p-sp-digital-partner .p-sp-dp-support__ex-title {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 12px;
}

.p-sp-digital-partner .p-sp-dp-support__ex-list {
  display: grid;
  font-size: 1.5rem;
  font-weight: bold;
  gap: 10px 12px;
  line-height: 24px;
}

.p-sp-digital-partner .p-sp-dp-support__ex-after,
.p-sp-digital-partner .p-sp-dp-support__ex-link {
  font-size: 1.5rem;
  line-height: 24px;
  margin-top: 12px;
}

/* カードの本文の改行は PC の幅に合わせたもの。1列のときは外して自然に折り返す(原稿 14-2) */
@media (max-width: 1279.98px) {
  .p-sp-digital-partner .p-sp-dp-support__card-text .c-split--block {
    display: inline-block;
  }
}

/* 6か月のカードの本文:スマホでは改行の指定を外して自然に折り返す(原稿 14-2) */
@media (max-width: 767.98px) {
  .p-sp-digital-partner .p-sp-dp-months .p-service-case__item-caption .c-split--block {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .p-sp-digital-partner .p-sp-dp-support__table {
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-digital-partner .p-sp-dp-support__ex-list {
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-digital-partner .p-sp-dp-support__examples {
    padding: 30px 40px;
  }

  .p-sp-digital-partner .p-sp-dp-support__ex-title {
    font-size: 2rem;
  }
}

/* ----- 料金と契約について(PRICE) ----- */
.p-sp-digital-partner .p-sp-dp-price__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.p-sp-digital-partner .p-sp-dp-price__sub {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: center;
}

.p-sp-digital-partner .p-sp-dp-price__text {
  line-height: 1.8;
  margin-bottom: 48px;
}

/* ===== デジタルパートナー:960px 以上 ===== */
@media (min-width: 960px) {
  .p-sp-digital-partner .p-sp-dp-what__point {
    font-size: 2.6rem;
    line-height: 1.2;
  }

  .p-sp-digital-partner .p-sp-dp-price__sub {
    font-size: 2rem;
  }
}

/* ===== デジタルパートナー:1280px 以上 ===== */
@media (min-width: 1280px) {
  .p-sp-digital-partner .p-sp-dp-what__compare {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-sp-digital-partner .p-sp-dp-what__card {
    min-height: 128px;
  }

  /*
   * 帯4本:Figma では傾きを含めた帯の幅が約 820px(今の部品は帯 680px+傾き。帯の中の本文〔15px・2行〕が1行に入らず
   * 折り返すため、このページだけ帯の並びを広げる:並び 808px → 帯 778px+傾き 約 42px)。
   * 帯の上下の内側の余白は、帯の高さが Figma の 157px になる 27px・28px。
   */
  /* 実装監査 R3 の D-F3:Figma の帯は、傾ける前の幅が 820px(外形 約861px)。並びを 808 → 850px にし、帯の箱を 820px にする */
  .p-sp-digital-partner .p-sp-dp-style .p-service-consulting__list {
    max-width: 850px;
  }

  .p-sp-digital-partner .p-sp-dp-style__item {
    padding-bottom: 28px;
    padding-top: 27px;
  }

  /* 左の余白:見出しの行(122px)より 16px 多い。傾きを打ち消す中心の高さが見出しの行と違うため、同じ 122px では本文が左にずれる */
  .p-sp-digital-partner .p-sp-dp-style__item-text {
    font-size: 1.5rem;
    padding-left: 138px;
  }

  /* 担当する人:h3 の大きさは Figma のまま(小さい行 24px・大きい行 32px。監査 R6 の提案5:h2〔30px〕より大きい) */
  .p-sp-digital-partner .p-sp-dp-person__h3-small {
    font-size: 2.4rem;
  }

  .p-sp-digital-partner .p-sp-dp-person__h3-large {
    font-size: 3.2rem;
  }

  /* 写真の高さを左の列の下端にそろえる(原稿 6-4 v5・v6。object-fit:cover) */
  .p-sp-digital-partner .p-sp-dp-person__media img {
    aspect-ratio: auto;
    height: 100%;
  }

  /* 6か月:2列×2段の段の間を 40px に。本文の下のあきは 24px(Figma。今の部品は 40px) */
  .p-sp-digital-partner .p-sp-dp-months .p-service-case__grid {
    gap: 40px;
  }

  .p-sp-digital-partner .p-sp-dp-months .p-service-case__item-body {
    padding-bottom: 24px;
  }

  .p-sp-digital-partner .p-sp-dp-support__cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-sp-digital-partner .p-sp-dp-support__card {
    padding: 26px 24px;
  }
}

/* 1280〜1439px:一緒に取り組めることのカード3枚が狭くなるため、内側の余白と文字を少し小さくして、PC の改行の指定のまま入れる */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .p-sp-digital-partner .p-sp-dp-support__card {
    padding: 24px 16px;
  }

  .p-sp-digital-partner .p-sp-dp-support__card-title {
    font-size: 1.7rem;
  }

  .p-sp-digital-partner .p-sp-dp-support__card-text {
    font-size: 1.4rem;
  }
}

/* =====================================================================
 * ちょうどええホームページ(.p-sp-chodoee-homepage。子のクラスは p-sp-ch-)
 * 原稿 v7・Figma 44:2。2026-10-27
 * - 見出し(h2)の下端から、その節の中身の上端までは 51px(原稿 1章 h2 の欄。PC)
 * ===================================================================== */

/* ----- 最初の画面:h1 の小さい行(13px・2行)と大きい行(26px・2行。行の高さ 45px)。Figma 44:9 ----- */
.p-sp-chodoee-homepage .p-sp__mv-title-small {
  font-size: 1.3rem;
  line-height: 20px;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .p-sp-chodoee-homepage .p-sp__mv-title-small {
    font-size: 1.3rem;
    line-height: 20px;
  }
}

/* ----- 導入(CONCEPT。今の部品 p-service-trouble) ----- */
.p-sp-chodoee-homepage .p-sp-intro__text + .p-sp-intro__text {
  margin-top: 16px;
}

/* 名乗りの1行(本文の下 24px・13px・グレー #666。原稿 3-2) */
.p-sp-chodoee-homepage .p-sp-intro__name {
  color: #666666;
  font-size: 1.3rem;
  line-height: 20px;
  margin-top: 24px;
}

/* ボタン(名乗りの下 40px。原稿 3-2) */
.p-sp-chodoee-homepage .p-sp-intro__cta {
  margin-top: 40px;
}

@media (min-width: 1280px) {
  .p-sp-chodoee-homepage .p-sp-intro__media img {
    aspect-ratio: 369/320;
  }
}

/* 導入のボタン:スマホでは幅いっぱい(原稿 20章) */
@media (max-width: 767.98px) {
  .p-sp-chodoee-homepage .p-sp-intro__button {
    max-width: none;
  }
}

/* ----- お悩み(TROUBLE。今の部品 p-service-solution) ----- */
/* 見出しの上の一言(英字と h2 のあいだ。18px・太字・紺。一言と h2 のあいだ 12px。原稿 4章) */
.p-sp-chodoee-homepage .p-sp-ch-trouble__lead {
  color: #182957;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 12px;
  margin-top: 8px;
}

@media (min-width: 960px) {
  .p-sp-chodoee-homepage .p-sp-ch-trouble__lead {
    font-size: 1.8rem;
    line-height: 28px;
  }
}

/* スマホ・タブレットは 2列×2段(原稿 20章。デジタルパートナーと同じ形)。番号の札(上に 16px 出る)のぶん、段の間をあける */
@media (max-width: 1279.98px) {
  .p-sp-chodoee-homepage .p-service-solution__list {
    gap: 36px 12px;
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-chodoee-homepage .p-service-solution__item {
    padding: 36px 8px 14px;
  }
}

@media (max-width: 767.98px) {
  .p-sp-chodoee-homepage .p-service-solution__item {
    font-size: 1.3rem;
  }
}

/* ----- ちょうどええホームページとは(ABOUT。今の部品 p-service-consulting) ----- */
.p-sp-chodoee-homepage .p-sp-ch-about__text {
  text-align: center;
}

/* 帯3本:高さをそろえ、中を上下中央に */
.p-sp-chodoee-homepage .p-sp-ch-about .p-service-consulting__list {
  grid-auto-rows: 1fr;
}

.p-sp-chodoee-homepage .p-sp-ch-about .p-service-consulting__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ----- 制作する内容と、公開後の保守(CONTENTS。今の部品 p-service-case) ----- */
.p-sp-chodoee-homepage .p-sp-ch-contents .p-sp__lead {
  margin-bottom: 32px;
}

/* 同じ段の2枚だけ高さをそろえる(①② の段と ③④ の段は別の高さ。原稿 6-1)。共通の指定(すべての段を同じ高さ)を戻す */
.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__grid {
  grid-auto-rows: auto;
}

/* カード:白の背景+1px の枠 #D9DCE3(原稿 6-1)。見出しの帯は今の部品のまま */
.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item {
  border: 1px solid #D9DCE3;
  overflow: hidden;
}

.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item-header {
  border-radius: 0;
}

.p-sp-chodoee-homepage .p-sp-ch-contents__title {
  color: #ffffff;
  font-size: inherit;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}

.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item-body {
  padding: 24px 20px;
}

.p-sp-chodoee-homepage .p-sp-ch-contents__text {
  line-height: 24px;
}

/* ③ の注(14px) */
.p-sp-chodoee-homepage .p-sp-ch-contents__note {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 16px;
}

/* ④ のリンクの1行(14px。リンクは「デジタルパートナー →」の部分だけ) */
.p-sp-chodoee-homepage .p-sp-ch-contents__link {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 16px;
}

/* ② のタイル(3列×2段。クリーム #FFF0BF・角丸 6・番号 12px ピンク・文字 12px 太字)。スマホは 2列×3段(原稿 20章) */
.p-sp-chodoee-homepage .p-sp-ch-contents__tiles {
  display: grid;
  gap: 8px;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.p-sp-chodoee-homepage .p-sp-ch-contents__tile {
  background-color: #FFF0BF;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 8px 8px 8px 10px;
}

.p-sp-chodoee-homepage .p-sp-ch-contents__tile-number {
  color: #DA005C;
  font-family: "Jost", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 16px;
}

.p-sp-chodoee-homepage .p-sp-ch-contents__tile-text {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 18px;
}

/* 1280〜1439px:カードが狭く、3列ではタイルの文字(8字まで)が折り返すため、2列×3段にする(Figma の幅 1440px では3列) */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .p-sp-chodoee-homepage .p-sp-ch-contents .p-sp-ch-contents__tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* 4枚の下の一言(15px・中央) */
.p-sp-chodoee-homepage .p-sp-ch-contents__after {
  font-size: 1.5rem;
  line-height: 24px;
  margin-top: 32px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-sp-chodoee-homepage .p-sp-ch-contents__tiles {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item-body {
    padding: 32px;
  }
}

/* ----- 料金(PRICE):料金カード2枚(または1枚)と注意書きの枠。同じ幅(968px)にそろえる ----- */
.p-sp-chodoee-homepage .p-sp-ch-price__wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 968px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__cards {
  display: grid;
  gap: 24px;
  grid-auto-rows: 1fr;
}

/* 買い切りのカードを出さない間(19章 #2):カード1を中央に1枚 */
.p-sp-chodoee-homepage .p-sp-ch-price__cards.is-single {
  margin-left: auto;
  margin-right: auto;
  max-width: 472px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-sp-chodoee-homepage .p-sp-ch-price__name {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  padding: 16px;
  text-align: center;
}

.p-sp-chodoee-homepage .p-sp-ch-price__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 20px 16px 24px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__for {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 24px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__label,
.p-sp-chodoee-homepage .p-sp-ch-price__box-label {
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
}

/* 金額:制作費と、24か月の合計は同じ大きさ(原稿 7章。景品表示法の有利誤認の考え方) */
.p-sp-chodoee-homepage .p-sp-ch-price__price {
  color: #182957;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 4px;
  text-align: center;
}

/* 黄色の箱。2枚の箱の上の位置と高さをそろえる(カードの下までのばす) */
.p-sp-chodoee-homepage .p-sp-ch-price__box {
  background-color: #FFF0BF;
  border-radius: 6px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-top: 24px;
  padding: 16px;
  text-align: center;
}

.p-sp-chodoee-homepage .p-sp-ch-price__box-line {
  font-weight: bold;
  line-height: 1.6;
}

.p-sp-chodoee-homepage .p-sp-ch-price__box-line + .p-sp-ch-price__box-label {
  margin-top: 16px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__box-note {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 8px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__price + .p-sp-ch-price__box-note {
  line-height: 20px;
  margin-top: 4px;
}

/* 注意書きの枠:カードのすぐ下(離さない)。行の頭は字下げしない(Figma 45:32) */
.p-sp-chodoee-homepage .p-sp-ch-price__notes {
  margin-top: 32px;
}

/* スマホだけの無料相談のボタン(原稿 20章)。768px 以上は出さない */
.p-sp-chodoee-homepage .p-sp-ch-price__sp-button {
  margin-top: 24px;
}

.p-sp-chodoee-homepage .p-sp-ch-price__sp-button .p-sp__button {
  max-width: none;
}

@media (min-width: 768px) {
  .p-sp-chodoee-homepage .p-sp-ch-price__sp-button {
    display: none;
  }
}

@media (min-width: 1280px) {
  .p-sp-chodoee-homepage .p-sp-ch-price__cards {
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__cards.is-single {
    grid-template-columns: 1fr;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__name {
    font-size: 2.2rem;
    padding: 18px 24px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__body {
    padding: 24px 28px 28px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__price {
    font-size: 3.4rem;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__notes {
    margin-top: 51px;
  }
}

/* ----- 比べ表(COMPARE):768px 以上は表、768px 未満は3枚のカード ----- */
.p-sp-chodoee-homepage .p-sp-ch-compare__table-wrap {
  display: none;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table {
  border-collapse: collapse;
  font-size: 1.4rem;
  line-height: 22px;
  table-layout: fixed;
  width: 100%;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table th,
.p-sp-chodoee-homepage .p-sp-ch-compare__table td {
  border-bottom: 1px solid #D9DBE5;
  border-right: 1px solid #D9DBE5;
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table tr > :last-child {
  border-right: 0;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table tbody tr:last-child > * {
  border-bottom: 0;
}

/* 見出しの行(紺。ちょうどええの列だけピンク) */
.p-sp-chodoee-homepage .p-sp-ch-compare__table thead th,
.p-sp-chodoee-homepage .p-sp-ch-compare__corner {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table thead .p-sp-ch-compare__col--chodoee {
  background-color: #DA005C;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__corner {
  width: 18%;
}

/* 行の見出し(薄い灰色)・ちょうどええの列(薄い黄色)・ほかの列(白) */
.p-sp-chodoee-homepage .p-sp-ch-compare__row {
  background-color: #F2F2F7;
  font-weight: bold;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__cell {
  background-color: #ffffff;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__cell--chodoee {
  background-color: #FFF7E0;
}

/* スマホ:3枚(または2枚)のカード。ちょうどええが先頭・黄色の背景(原稿 8章) */
.p-sp-chodoee-homepage .p-sp-ch-compare__cards {
  display: grid;
  gap: 16px;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card {
  background-color: #ffffff;
  border: 1px solid #D9DBE5;
  border-radius: 8px;
  overflow: hidden;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card--chodoee {
  background-color: #FFF7E0;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-title {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 22px;
  padding: 12px 16px;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card--chodoee .p-sp-ch-compare__card-title {
  background-color: #DA005C;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-list {
  margin: 0;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-row {
  font-size: 1.4rem;
  line-height: 22px;
  padding: 10px 16px;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-row + .p-sp-ch-compare__card-row {
  border-top: 1px solid #D9DBE5;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-row dt {
  color: #182957;
  font-size: 1.3rem;
  font-weight: bold;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__card-row dd {
  margin: 2px 0 0;
}

/* カードの中は改行の指定を外して自然に折り返す(行のまとまりで) */
.p-sp-chodoee-homepage .p-sp-ch-compare__card-row dd .c-split--block {
  display: inline-block;
}

/* 表の下の注2行・LINE の1行(14px。左ぞろえ。表の下 12px) */
.p-sp-chodoee-homepage .p-sp-ch-compare__notes,
.p-sp-chodoee-homepage .p-sp-ch-compare__line {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 12px;
}

.p-sp-chodoee-homepage .p-sp-ch-compare__buttons {
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .p-sp-chodoee-homepage .p-sp-ch-compare__buttons .p-sp__button {
    max-width: none;
  }
}

.p-sp-chodoee-homepage .p-sp-ch-compare__table-wrap {
  border: 1px solid #D9DBE5;
  border-radius: 8px;
  overflow: hidden;
}

/* 2列(今の形):768px 以上は表 */
@media (min-width: 768px) {
  .p-sp-chodoee-homepage .p-sp-ch-compare__table-wrap.is-2col {
    display: block;
  }

  .p-sp-chodoee-homepage .p-sp-ch-compare__cards.is-2col {
    display: none;
  }
}

/* 3列(88サイトの列を出したとき。19章 #3):1列の幅が足りず文字が細かく折り返すため、表は 1440px 以上(Figma の幅)だけ。それより狭いときはカード */
@media (min-width: 1440px) {
  .p-sp-chodoee-homepage .p-sp-ch-compare__table-wrap.is-3col {
    display: block;
  }

  .p-sp-chodoee-homepage .p-sp-ch-compare__cards.is-3col {
    display: none;
  }
}

/*
 * 1440px 以上(Figma の幅):料金の注意書きの枠は Figma 45:29 と同じ 998px(本文の幅 909px より広い。左右に少しはみ出して中央に置く)。
 * 料金カードの並び(968px)は枠の中で中央。枠の各行(14px)が Figma と同じく1行に入る幅にするため(監査 R7 の提案2〔カードと枠の端をそろえる〕は採らなかった)。
 */
@media (min-width: 1440px) {
  .p-sp-chodoee-homepage .p-sp-ch-price__wrap {
    --sp-ch-price-w: min(998px, calc(100% + 89px));
    margin-left: calc((100% - var(--sp-ch-price-w)) / 2);
    max-width: none;
    width: var(--sp-ch-price-w);
  }

  .p-sp-chodoee-homepage .p-sp-ch-price__cards {
    margin-left: auto;
    margin-right: auto;
    max-width: 968px;
  }
}

/* 1440px 以上(Figma の幅):表は本文の幅(909px)より広い 940px。左右に少しはみ出して中央に置く(注・LINE の1行も表の左にそろえる) */
@media (min-width: 1440px) {
  .p-sp-chodoee-homepage .p-sp-ch-compare__table-wrap,
  .p-sp-chodoee-homepage .p-sp-ch-compare__notes,
  .p-sp-chodoee-homepage .p-sp-ch-compare__line {
    --sp-ch-compare-w: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--sp-ch-compare-w)) / 2);
    width: var(--sp-ch-compare-w);
  }
}

/* ----- 流れ(FLOW。共通の .p-sp-flow)の下:作り直しの一言・あわせて読みたい ----- */
.p-sp-chodoee-homepage .p-sp-ch-flow__read {
  margin-top: 40px;
  text-align: center;
}

.p-sp-chodoee-homepage .p-sp-ch-flow__read-title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 24px;
}

.p-sp-chodoee-homepage .p-sp-ch-flow__read-link {
  font-size: 1.5rem;
  line-height: 24px;
  margin-top: 10px;
}

@media (min-width: 1280px) {
  .p-sp-chodoee-homepage .p-sp-flow__note,
  .p-sp-chodoee-homepage .p-sp-ch-flow__read {
    margin-top: 51px;
  }
}

/* ----- つくるのは、代表の花田です(MAKER):黄色のカード1枚。写真が左・名前と本文が右(スマホは写真が上) ----- */
.p-sp-chodoee-homepage .p-sp-ch-maker__card {
  background-color: #FFF0BF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}

.p-sp-chodoee-homepage .p-sp-ch-maker__media img {
  aspect-ratio: 412/300;
  border-radius: 6px;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.p-sp-chodoee-homepage .p-sp-ch-maker__name {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}

.p-sp-chodoee-homepage .p-sp-ch-maker__text {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 14px;
}

/* 1列のときは本文の改行の指定を外して、幅に合わせて折り返す(原稿 20章) */
@media (max-width: 959.98px) {
  .p-sp-chodoee-homepage .p-sp-ch-maker__text .c-split--block {
    display: inline;
  }
}

@media (min-width: 960px) {
  .p-sp-chodoee-homepage .p-sp-ch-maker__card {
    align-items: center;
    flex-direction: row;
    gap: 40px;
    padding: 32px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-maker__media {
    flex: 0 1 412px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-maker__content {
    flex: 1 1 393px;
    min-width: 0;
  }

  .p-sp-chodoee-homepage .p-sp-ch-maker__name {
    font-size: 2rem;
  }
}

/* ----- 最後の案内(共通の .p-sp-contact):資料をダウンロードのボタン(背景なし・白の 1px の枠・白の文字 15px・高さ 48・幅 260。Figma 64:3) ----- */
.p-sp-chodoee-homepage .p-sp-ch-contact__buttons {
  align-items: center;
}

.p-sp-chodoee-homepage .p-sp-ch-contact__doc {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  height: 48px;
  line-height: 46px;
  max-width: 260px;
}

.p-sp-chodoee-homepage .p-sp-ch-contact__doc .c-button__caption {
  font-size: 1.5rem;
  font-weight: normal;
}

/* スマホ:縦に並べる。無料相談が上・資料が下(どちらも幅 100%。原稿 20章) */
@media (max-width: 767.98px) {
  .p-sp-chodoee-homepage .p-sp-ch-contact__buttons {
    flex-direction: column;
  }

  .p-sp-chodoee-homepage .p-sp-ch-contact__buttons .p-sp__button {
    max-width: none;
  }
}

/* ----- 見出しの下のあき(PC):h2 の下端から中身の上端まで 51px(原稿 1章) ----- */
@media (min-width: 1280px) {
  .p-sp-chodoee-homepage .p-sp__header,
  .p-sp-chodoee-homepage .p-service-faq__header {
    margin-bottom: 51px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-price .p-sp__lead {
    margin-bottom: 51px;
  }

  .p-sp-chodoee-homepage .p-sp-ch-contents .p-sp__lead {
    margin-bottom: 42px;
  }

  /* 制作する内容:2列×2段の段の間を 40px に(今の部品は 80px) */
  .p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__grid {
    gap: 40px;
  }
}

/* =====================================================================
 * LINEでの販売の仕組み(.p-sp-line-sales。子のクラスは p-sp-lm-)
 * 原稿 v5(LmeOrder)・Figma 50:2。2026-10-27
 * - 無料相談のボタンは原稿 12-4 の 300×56(今の .c-button--l と同じ高さ)
 * - h1 は導入の見出し(AI研修のページと同じ置き方)。最初の画面のレンズはページ名(p)
 * ===================================================================== */

/* ----- 無料相談のボタン(5か所。300×56・ピンク・角丸。原稿 12-4) ----- */
.p-sp-line-sales .p-sp__button {
  height: 56px;
  line-height: 54px;
  max-width: 300px;
}

/* 「ボタンの上の一言+ボタン」(導入・向いているお店・87-laboがすること・料金の下)。一言は 15px・太字・紺、ボタンとの間 12px */
.p-sp-line-sales .p-sp-lm-cta {
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-cta__lead {
  color: #182957;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 24px;
  margin-bottom: 12px;
}

/* スマホ:ボタンは幅いっぱい。上の一言はボタンのすぐ上のまま(原稿 12-3) */
@media (max-width: 767.98px) {
  .p-sp-line-sales .p-sp-lm-cta .p-sp__button {
    max-width: none;
  }
}

/* ----- 最初の画面:レンズの中のページ名(26px・太字・2行。Figma 50:17) ----- */
.p-sp-line-sales .p-sp-lm-mv__title {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.6;
}

@media (min-width: 960px) {
  .p-sp-line-sales .p-sp-lm-mv__title {
    font-size: 2.6rem;
    line-height: 45px;
  }
}

/* ----- 導入(今の部品 p-service-trouble):本文(16px・行の高さ 24px)・札・名乗り・ボタン ----- */
.p-sp-line-sales .p-sp-intro__text {
  line-height: 24px;
}

/* サービス名の札($show_service_name が true のときだけ。灰色の札 14px。原稿 1-3) */
.p-sp-line-sales .p-sp-lm-intro__tag {
  margin-top: 24px;
}

.p-sp-line-sales .p-sp-lm-intro__tag > span {
  background-color: #EDEBE6;
  border-radius: 4px;
  color: #5F5F5F;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 20px;
  padding: 4px 12px;
}

/* 名乗り(14px。札の下 16px) */
.p-sp-line-sales .p-sp-intro__name {
  font-size: 1.4rem;
  line-height: 21px;
}

/* 名乗りの下 32px あけて、ボタンの上の一言とボタン(左ぞろえ。原稿 1-3) */
.p-sp-line-sales .p-sp-lm-intro__cta {
  margin-top: 32px;
}

@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-intro__cta {
    text-align: left;
  }

  .p-sp-line-sales .p-sp-lm-intro__cta .p-sp__buttons {
    justify-content: flex-start;
  }
}

/*
 * 導入の写真:service/mv.webp(正方形)の、鉢を持つ手元と店先だけを切り出す(顔を出さない。原稿 12-1)。
 * Figma 80:78 の切り出し(横 33〜83%・縦 47.5〜100%)と同じ範囲を、枠(400×420)の中に画像を広げて置く形で出す。
 */
.p-sp-line-sales .p-sp-lm-intro__crop {
  aspect-ratio: 400/420;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.p-sp-line-sales .p-sp-lm-intro__crop img {
  aspect-ratio: auto;
  border-radius: 0;
  height: auto;
  left: -66%;
  max-width: none;
  -o-object-fit: fill;
  object-fit: fill;
  position: absolute;
  top: -90.476%;
  width: 200%;
}

/* スマホ・タブレット(1列):写真の枠は文の下。大きくなりすぎないよう幅 400px まで */
@media (max-width: 1279.98px) {
  .p-sp-line-sales .p-sp-lm-intro__crop {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
  }
}

/* ----- お悩み(今の部品 p-service-solution):Figma の4枚は 220×140(今の部品は 154) ----- */
@media (min-width: 1280px) {
  .p-sp-line-sales .p-service-solution__item {
    min-height: 140px;
  }
}

/* ----- ネットショップと、LINE公式アカウントの違い(比べ表) ----- */
.p-sp-line-sales .p-sp-lm-diff__lead {
  line-height: 28px;
  margin-bottom: 24px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-diff__table {
  border-collapse: collapse;
  font-size: 1.5rem;
  line-height: 24px;
  width: 100%;
}

.p-sp-line-sales .p-sp-lm-diff__table th,
.p-sp-line-sales .p-sp-lm-diff__table td {
  padding: 16px;
  text-align: left;
  vertical-align: top;
}

.p-sp-line-sales .p-sp-lm-diff__row {
  background-color: #F2F2F7;
  font-weight: bold;
}

.p-sp-line-sales .p-sp-lm-diff__cell--net {
  background-color: #ffffff;
}

/* LINE公式アカウントの列:薄い青・太字(原稿 3章。LINE の緑は使わない) */
.p-sp-line-sales .p-sp-lm-diff__cell--line {
  background-color: #EBF0FA;
  font-weight: bold;
}

.p-sp-line-sales .p-sp-lm-diff__after {
  font-size: 1.5rem;
  line-height: 26px;
  margin-top: 40px;
  text-align: center;
}

/* 表の下の2行目(ピンク・太字。ページの名前だけ下線のリンク。11-2 #8) */
.p-sp-line-sales .p-sp-lm-diff__links {
  color: #DA005C;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 26px;
  text-align: center;
}

/* スマホ(768px 未満):行ごとのカード。カードの見出しに比べる項目、その下に「ネットショップ」「LINE公式アカウント」を縦に(原稿 12-3) */
@media (max-width: 767.98px) {
  .p-sp-line-sales .p-sp-lm-diff__table,
  .p-sp-line-sales .p-sp-lm-diff__table tbody,
  .p-sp-line-sales .p-sp-lm-diff__table tr,
  .p-sp-line-sales .p-sp-lm-diff__table th,
  .p-sp-line-sales .p-sp-lm-diff__table td {
    display: block;
  }

  .p-sp-line-sales .p-sp-lm-diff__table thead {
    display: none;
  }

  .p-sp-line-sales .p-sp-lm-diff__table tbody tr {
    border: 1px solid #D9DBE5;
    border-radius: 8px;
    overflow: hidden;
  }

  .p-sp-line-sales .p-sp-lm-diff__table tbody tr + tr {
    margin-top: 12px;
  }

  .p-sp-line-sales .p-sp-lm-diff__table th,
  .p-sp-line-sales .p-sp-lm-diff__table td {
    padding: 10px 16px;
  }

  .p-sp-line-sales .p-sp-lm-diff__row {
    background-color: #182957;
    color: #ffffff;
  }

  .p-sp-line-sales .p-sp-lm-diff__cell + .p-sp-lm-diff__cell {
    border-top: 1px solid #D9DBE5;
  }

  /* 列の名前(表の見出しの行の文字。HTML の data-label)を、中身の上に小さく出す */
  .p-sp-line-sales .p-sp-lm-diff__cell::before {
    color: #182957;
    content: attr(data-label);
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 20px;
  }
}

/* 768px 以上:3列の表(列の幅は Figma の 223・366・351 の割合) */
@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-diff__wrap {
    border: 1px solid #D9DBE5;
    border-radius: 8px;
    overflow: hidden;
  }

  .p-sp-line-sales .p-sp-lm-diff__table {
    table-layout: fixed;
  }

  .p-sp-line-sales .p-sp-lm-diff__table th,
  .p-sp-line-sales .p-sp-lm-diff__table td {
    border-bottom: 1px solid #D9DBE5;
    border-right: 1px solid #D9DBE5;
  }

  .p-sp-line-sales .p-sp-lm-diff__table tr > :last-child {
    border-right: 0;
  }

  .p-sp-line-sales .p-sp-lm-diff__table tbody tr:last-child > * {
    border-bottom: 0;
  }

  .p-sp-line-sales .p-sp-lm-diff__corner {
    width: 23.7%;
  }

  .p-sp-line-sales .p-sp-lm-diff__col--net {
    width: 38.9%;
  }

  /* 見出しの行:ネットショップは濃い灰色がかった紺 #4F5872、LINE公式アカウントは紺(原稿 3章) */
  .p-sp-line-sales .p-sp-lm-diff__table thead th,
  .p-sp-line-sales .p-sp-lm-diff__corner {
    background-color: #4F5872;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
  }

  .p-sp-line-sales .p-sp-lm-diff__table thead .p-sp-lm-diff__col--line {
    background-color: #182957;
  }
}

@media (min-width: 960px) {
  .p-sp-line-sales .p-sp-lm-diff__lead {
    margin-bottom: 40px;
  }
}

/* ----- 流れ(今の部品 p-service-consulting。帯5本)と、入口・ご案内の例の札 ----- */
/* 帯5本:高さをそろえ(Figma 104px)、中の手順の名前と一文を上下中央に */
.p-sp-line-sales .p-sp-lm-flow .p-service-consulting__list {
  grid-auto-rows: 1fr;
}

.p-sp-line-sales .p-sp-lm-flow__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 帯の中の一文(15px・クリーム #FFF0BF。原稿 4章)。帯の傾きを打ち消す(手順の名前の行と同じ)。左の位置は手順の名前の行とそろえる */
.p-sp-line-sales .p-sp-lm-flow__item-text {
  color: #FFF0BF;
  font-size: 1.3rem;
  line-height: 1.6;
  margin-top: 4px;
  padding-left: 40px;
  -webkit-transform: skewX(15deg);
  -ms-transform: skewX(15deg);
  transform: skewX(15deg);
}

/* 入口・ご案内の例の札(クリーム/薄い青・角丸 20・15px 太字 紺) */
.p-sp-line-sales .p-sp-lm-flow__tags {
  margin-top: 40px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-flow__tags--example {
  margin-left: auto;
  margin-right: auto;
  margin-top: 28px;
  max-width: 590px;
}

.p-sp-line-sales .p-sp-lm-flow__tags-title {
  color: #182957;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 12px;
}

.p-sp-line-sales .p-sp-lm-flow__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-sp-line-sales .p-sp-lm-flow__tag {
  background-color: #FFF0BF;
  border-radius: 20px;
  color: #182957;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 18px;
  padding: 8px 18px;
}

.p-sp-line-sales .p-sp-lm-flow__tags--example .p-sp-lm-flow__tag {
  background-color: #EBF0FA;
}

/* 季節のピンクの2行(16px・太字・中央) */
.p-sp-line-sales .p-sp-lm-flow__season {
  color: #DA005C;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 26px;
  margin-top: 28px;
  text-align: center;
}

@media (min-width: 960px) {
  .p-sp-line-sales .p-sp-lm-flow__tags-title {
    font-size: 1.8rem;
  }

  .p-sp-line-sales .p-sp-lm-flow__tag {
    font-size: 1.5rem;
  }

  .p-sp-line-sales .p-sp-lm-flow__season {
    font-size: 1.6rem;
  }
}

/* ----- 向いているお店(写真なしの文字のカード5枚・確かめの枠) ----- */
.p-sp-line-sales .p-sp-lm-foryou__cards {
  display: grid;
  gap: 10px;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード:白・紺の 1px の枠・角丸 8。上から 番号(Jost 28px・ピンク)→ 紺の短い線(20×2)→ 業種名(15px・太字・紺)→ 短い説明(13px) */
.p-sp-line-sales .p-sp-lm-foryou__card {
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 24px 8px 20px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-foryou__number {
  color: #DA005C;
  font-family: "Jost", sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 36px;
}

.p-sp-line-sales .p-sp-lm-foryou__line {
  background-color: #182957;
  display: block;
  height: 2px;
  margin: 10px 0 12px;
  width: 20px;
}

.p-sp-line-sales .p-sp-lm-foryou__name {
  color: #182957;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 24px;
}

.p-sp-line-sales .p-sp-lm-foryou__text {
  font-size: 1.3rem;
  line-height: 20px;
  margin-top: 10px;
}

/* 確かめの枠(クリーム・角丸 10) */
.p-sp-line-sales .p-sp-lm-foryou__check {
  background-color: #FFF0BF;
  border-radius: 10px;
  margin-top: 40px;
  padding: 24px 20px;
}

.p-sp-line-sales .p-sp-lm-foryou__check-title {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 12px;
}

.p-sp-line-sales .p-sp-lm-foryou__check-list {
  display: grid;
  font-size: 1.5rem;
  font-weight: bold;
  gap: 10px 12px;
  line-height: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-sp-line-sales .p-sp-lm-foryou__check-after {
  font-size: 1.5rem;
  line-height: 24px;
  margin-top: 12px;
}

.p-sp-line-sales .p-sp-lm-foryou__cta {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-foryou__cards {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-sp-line-sales .p-sp-lm-foryou__check {
    padding: 28px 40px;
  }

  .p-sp-line-sales .p-sp-lm-foryou__check-title {
    font-size: 1.9rem;
    line-height: 23px;
  }

  .p-sp-line-sales .p-sp-lm-foryou__check-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-foryou__cards {
    grid-template-columns: repeat(5, 1fr);
  }

  .p-sp-line-sales .p-sp-lm-foryou__card {
    padding: 28px 8px 24px;
  }
}

/* ----- 87-laboがすること:前置き・2列の比べ・代表の写真と担当の段・カード4枚(p-service-case)・デジタルパートナーへの行 ----- */
.p-sp-line-sales .p-sp-lm-do__lead {
  line-height: 24px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-do__compare {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.p-sp-line-sales .p-sp-lm-do__box {
  border-radius: 8px;
  padding: 20px 24px;
}

.p-sp-line-sales .p-sp-lm-do__box--before {
  background-color: #F5F5F7;
}

.p-sp-line-sales .p-sp-lm-do__box--after {
  background-color: #EBF0FA;
}

.p-sp-line-sales .p-sp-lm-do__box-title {
  color: #5B6378;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 8px;
}

.p-sp-line-sales .p-sp-lm-do__box--after .p-sp-lm-do__box-title {
  color: #182957;
}

.p-sp-line-sales .p-sp-lm-do__box-list {
  display: grid;
  font-size: 1.5rem;
  gap: 8px;
  line-height: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 代表の写真と担当の段($show_person が true のときだけ。白・線 #E0E3EA・角丸 10・内側 24。スマホは写真が上。原稿 6章・12-3) */
.p-sp-line-sales .p-sp-lm-do__person {
  background-color: #ffffff;
  border: 1px solid #E0E3EA;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  padding: 24px;
}

.p-sp-line-sales .p-sp-lm-do__person-media img {
  aspect-ratio: 280/200;
  border-radius: 8px;
  display: block;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.p-sp-line-sales .p-sp-lm-do__person-title {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
}

.p-sp-line-sales .p-sp-lm-do__person-text {
  font-size: 1.5rem;
  line-height: 26px;
  margin-top: 10px;
}

/* カード4枚(今の部品 p-service-case):外側に薄い枠線 #E0E3EA・1px。本文 16px・行の高さ 24px。高さはそろえる(共通の .p-sp の指定) */
.p-sp-line-sales .p-sp-lm-do__cards {
  margin-top: 40px;
}

.p-sp-line-sales .p-sp-lm-do__cards .p-service-case__item {
  border: 1px solid #E0E3EA;
  overflow: hidden;
}

.p-sp-line-sales .p-sp-lm-do__cards .p-service-case__item-header {
  border-radius: 0;
}

.p-sp-line-sales .p-sp-lm-do__cards .p-service-case__item-caption {
  line-height: 24px;
}

/* デジタルパートナーへの行(15px・太字・ピンク。「デジタルパートナー」だけ下線のリンク。11-2 #7) */
.p-sp-line-sales .p-sp-lm-do__dp {
  color: #DA005C;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 26px;
  margin-top: 40px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-do__cta {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-do__compare {
    gap: 29px;
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-line-sales .p-sp-lm-do__person {
    align-items: center;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
  }

  .p-sp-line-sales .p-sp-lm-do__person-media {
    flex: 0 0 280px;
  }

  .p-sp-line-sales .p-sp-lm-do__person-title {
    font-size: 2rem;
    line-height: 32px;
  }
}

@media (min-width: 1280px) {
  /* 2×2 の段の間 32px・列の間 40px(Figma 51:19。今の部品は 80px/40px)。本文の下のあきは 32px(今の部品は 40px) */
  .p-sp-line-sales .p-sp-lm-do__cards.p-service-case__grid {
    gap: 32px 40px;
  }

  .p-sp-line-sales .p-sp-lm-do__cards .p-service-case__item-body {
    padding: 24px 24px 32px;
  }
}

/* ----- 始め方と進め方:h3・カード3枚・C の補足の枠・進め方の6つの枠(共通の .p-sp-flow) ----- */
.p-sp-line-sales .p-sp-lm-h3 {
  color: #292929;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 24px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-start__cards {
  display: grid;
  gap: 16px;
}

/* カード:白・紺の 2px の枠・角丸 8。A/B/C(28px・太字・ピンク)→ 今の状況(16px・太字・紺)→ 始め方(15px) */
.p-sp-line-sales .p-sp-lm-start__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 14px;
}

.p-sp-line-sales .p-sp-lm-start__letter {
  color: #DA005C;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 34px;
}

.p-sp-line-sales .p-sp-lm-start__situation {
  color: #182957;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 26px;
}

.p-sp-line-sales .p-sp-lm-start__how {
  font-size: 1.5rem;
  line-height: 26px;
}

/* C の補足(クリーム・角丸 8。カードの下 40px) */
.p-sp-line-sales .p-sp-lm-start__note {
  background-color: #FFF0BF;
  border-radius: 8px;
  margin-top: 40px;
  padding: 20px;
}

.p-sp-line-sales .p-sp-lm-start__note-title {
  color: #182957;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 26px;
  margin-bottom: 6px;
}

.p-sp-line-sales .p-sp-lm-start__note-text {
  font-size: 1.5rem;
  line-height: 26px;
}

/* 「100〜200名」を数字の途中で改行させない(原稿 7-1・12-4) */
.p-sp-line-sales .p-sp-lm-nowrap {
  white-space: nowrap;
}

/* 進め方(h3。C の補足の下 72px)。6つの枠は共通の .p-sp-flow。枠の中は番号と2行の文(16px・太字)だけ */
.p-sp-line-sales .p-sp-lm-start__steps {
  margin-top: 72px;
}

.p-sp-line-sales .p-sp-lm-start__steps .p-sp-flow__note {
  line-height: 27px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-start__cards {
    gap: 20px;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-sp-line-sales .p-sp-lm-start__note {
    padding: 20px 28px;
  }
}

@media (min-width: 960px) {
  .p-sp-line-sales .p-sp-lm-h3 {
    font-size: 2.2rem;
    line-height: 33px;
  }

  .p-sp-line-sales .p-sp-lm-start .p-sp__header + .p-section__body .p-sp-lm-h3:first-child {
    margin-bottom: 40px;
  }
}

@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-start__card {
    padding: 22px 14px;
  }

  .p-sp-line-sales .p-sp-lm-start__steps .p-sp-flow__note {
    margin-top: 24px;
  }
}

/* 1440px 以上:進め方の6つの枠は列の幅のまま(Figma 51:85 は 938px。共通の指定〔1001px に広げる〕を戻す) */
@media (min-width: 1440px) {
  .p-sp-line-sales .p-sp-lm-start__steps .p-sp-flow__list {
    margin-left: 0;
    width: 100%;
  }
}

/* ----- 料金($show_price が true のときだけ。11-2 #1):料金カード2枚・注意書きの枠・1年間の目安 ----- */
.p-sp-line-sales .p-sp-lm-price__cards {
  display: grid;
  gap: 24px;
  grid-auto-rows: 1fr;
}

.p-sp-line-sales .p-sp-lm-price__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-sp-line-sales .p-sp-lm-price__name {
  background-color: #182957;
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
  line-height: 31px;
  padding: 16px 24px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-price__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px 24px;
}

.p-sp-line-sales .p-sp-lm-price__desc {
  font-size: 1.5rem;
  line-height: 27px;
}

/* 金額の枠:2枚とも同じ高さ(127px)にし、黄色の枠の上端をそろえる(原稿 8章 v5) */
.p-sp-line-sales .p-sp-lm-price__amount {
  padding-top: 10px;
  text-align: center;
}

.p-sp-line-sales .p-sp-lm-price__label,
.p-sp-line-sales .p-sp-lm-price__sub {
  font-size: 1.4rem;
  line-height: 20px;
}

.p-sp-line-sales .p-sp-lm-price__price {
  color: #182957;
  font-size: 3rem;
  font-weight: bold;
  line-height: 44px;
  margin-top: 4px;
}

.p-sp-line-sales .p-sp-lm-price__sub {
  line-height: 21px;
  margin-top: 4px;
}

.p-sp-line-sales .p-sp-lm-price__box {
  background-color: #FFF0BF;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 24px;
  margin-top: auto;
  padding: 12px 16px;
  text-align: center;
}

/* 注意書きの枠:カードのすぐ下(離さない。原稿 12-4) */
.p-sp-line-sales .p-sp-lm-price__notes {
  margin-top: 40px;
}

/* 1年間の目安($show_year。11-2 #10) */
.p-sp-line-sales .p-sp-lm-price__year {
  background-color: #FFF0BF;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 40px;
  padding: 24px 20px;
}

.p-sp-line-sales .p-sp-lm-price__year-title {
  color: #182957;
  font-size: 2rem;
  font-weight: bold;
  line-height: 28px;
}

.p-sp-line-sales .p-sp-lm-price__year-price {
  color: #182957;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 33px;
}

.p-sp-line-sales .p-sp-lm-price__year-desc {
  font-size: 1.5rem;
  line-height: 26px;
}

.p-sp-line-sales .p-sp-lm-price__cta {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .p-sp-line-sales .p-sp-lm-price__cards {
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-line-sales .p-sp-lm-price__year {
    padding: 24px 28px;
  }
}

@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-price__name {
    font-size: 2.2rem;
    padding: 18px 24px;
  }

  .p-sp-line-sales .p-sp-lm-price__body {
    padding: 24px 28px 28px;
  }

  .p-sp-line-sales .p-sp-lm-price__amount {
    height: 127px;
  }

  .p-sp-line-sales .p-sp-lm-price__price {
    font-size: 3.4rem;
  }
}

/* ----- よくあるご質問(今の部品 p-service-faq):答えの改行の指定は PC の幅のもの。スマホでは外して自然に折り返す ----- */
@media (max-width: 767.98px) {
  .p-sp-line-sales .p-service-faq__item-answer .c-split--block {
    display: inline;
  }
}

/* ----- ページの下の商標の一文(12px。箱の下・列の左端にそろえる。11-2 #6) ----- */
.p-sp-line-sales .p-sp-lm-trademark {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-top: 20px;
}

/* ----- スマホ(768px 未満):PC の幅に合わせた改行の指定を外して、自然に折り返す(原稿 12-4 の流れの帯。本文の行) ----- */
@media (max-width: 767.98px) {
  .p-sp-line-sales .p-sp-lm-flow__item-text .c-split--block,
  .p-sp-line-sales .p-sp-lm-do__cards .p-service-case__item-caption .c-split--block,
  .p-sp-line-sales .p-sp-lm-start__note-text .c-split--block {
    display: inline;
  }
}

/* ===== LINEでの販売の仕組み:1280px 以上(Figma の帯の中の文字の位置。デジタルパートナーの帯と同じ考え方) ===== */
@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-flow .p-service-consulting__caption {
    margin-bottom: 40px;
  }

  .p-sp-line-sales .p-sp-lm-flow__item {
    min-height: 104px;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  /* 手順の名前 26px(今の部品は 32px) */
  .p-sp-line-sales .p-sp-lm-flow .p-service-consulting__item--jp {
    font-size: 2.6rem;
    line-height: 34px;
  }

  .p-sp-line-sales .p-sp-lm-flow__item-text {
    font-size: 1.5rem;
    line-height: 22px;
    margin-top: 2px;
    padding-left: 138px;
  }
}

/* LINEでの販売の仕組み:流れの帯の中の文字の左の位置を Figma(帯の左端から 約150px)にそろえる(今の部品の 122px・デジタルパートナーの 138px より小さい) */
@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-flow .p-service-consulting__item--jp {
    padding-left: 96px;
  }

  .p-sp-line-sales .p-sp-lm-flow__item-text {
    padding-left: 104px;
  }
}

/* LINEでの販売の仕組み:1440px 以上(Figma の幅)は、比べ表を Figma 50:1501 と同じ 940px(本文の幅 909px より広い。左右に少しはみ出して中央に置く。ちょうどええの比べ表と同じ) */
@media (min-width: 1440px) {
  .p-sp-line-sales .p-sp-lm-diff__wrap {
    --sp-lm-diff-w: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--sp-lm-diff-w)) / 2);
    width: var(--sp-lm-diff-w);
  }
}

/* LINEでの販売の仕組み:料金カードの中身(1280px 以上)は、説明・金額の枠・黄色の枠のあいだをあけない(Figma 51:122。カードの高さ 376px) */
@media (min-width: 1280px) {
  .p-sp-line-sales .p-sp-lm-price__body {
    gap: 0;
  }
}

/* =====================================================================
 * 88サイト(.p-sp-88site。子のクラスは p-sp-88-)
 * 原稿 v8・Figma 46:2(監査 R8 合格)。2026-10-27
 * - h1 は導入の見出し(AI研修・LINEでの販売の仕組みと同じ置き方)。最初の画面のレンズはページ名(p)
 * - 手で入れた改行(原稿の「/」)は PC だけ。スマホ(768px 未満)では幅に合わせて折り返す(比べ表のセルの中の改行は残す。原稿 12-1)
 * ===================================================================== */

/* ----- 最初の画面:レンズの中のページ名(30px・太字。Figma 46:17)と、右のレンズの見本・レンズの下の一文(13px。Figma 80:51) ----- */
.p-sp-88site .p-sp-88-mv__title {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
}

.p-sp-88site .p-sp-88-mv__media {
  background-color: #FFF0BF;
  overflow: hidden;
}

/* レンズの下の一文:レンズの枠(44px)の外、14px 下に置く(PC の絵の下だけ。スマホは今の部品の目の写真のため出ない) */
.p-sp-88site .p-sp-88-mv__caption {
  color: #292929;
  font-size: 1.3rem;
  left: 50%;
  line-height: 1.4;
  position: absolute;
  top: calc(100% + 58px);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (min-width: 960px) {
  .p-sp-88site .p-sp-88-mv__title {
    font-size: 3rem;
    line-height: 45px;
  }
}

/*
 * 見本の画像の代わりの枠(.p-sp-88-device。'photo' が空のときだけ):クリームの地に、ノートパソコンとスマホの形だけを描く(中は空)。
 * 位置は Figma 46:21(336×336 の中のノートパソコン 230×148・台 270×10・スマホ 66×126)の割合。見本の画像を置いたら出なくなる
 */
.p-sp-88site .p-sp-88-device {
  background-color: #FFF0BF;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.p-sp-88site .p-sp-88-device > span {
  display: block;
  position: absolute;
}

.p-sp-88site .p-sp-88-device__laptop {
  background-color: #292929;
  border-radius: 8px;
  height: 44%;
  left: 13.7%;
  padding: 1.8%;
  top: 28.6%;
  width: 68.5%;
}

.p-sp-88site .p-sp-88-device__base {
  background-color: #5A5A5A;
  border-radius: 4px;
  height: 3%;
  left: 7.7%;
  top: 72.6%;
  width: 80.4%;
}

.p-sp-88site .p-sp-88-device__phone {
  background-color: #292929;
  border-radius: 10px;
  height: 37.5%;
  left: 67.3%;
  padding: 2.4% 1.2%;
  top: 43.5%;
  width: 19.6%;
}

.p-sp-88site .p-sp-88-device__screen {
  background-color: #EDEBE6;
  border-radius: 3px;
  display: block;
  height: 100%;
  width: 100%;
}

/* ----- 導入(今の部品 p-service-trouble):本文・ボタンの上の一言(16px・行の高さ 24px)・名乗り(13px・#666)・見本の画像と下の一文 ----- */
.p-sp-88site .p-sp-88-intro .p-sp-intro__text,
.p-sp-88site .p-sp-88-intro .p-sp-intro__cta-lead {
  line-height: 24px;
}

.p-sp-88site .p-sp-88-intro .p-sp-intro__name {
  color: #666666;
  font-size: 1.3rem;
  line-height: 24px;
}

.p-sp-88site .p-sp-88-intro__photo {
  aspect-ratio: 369/320;
  border-radius: 10px;
  overflow: hidden;
}

.p-sp-88site .p-sp-88-intro__photo img {
  border-radius: 0;
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

/* 写真の下の一文(13px。写真のすぐ下 12px。導入・公開のあとに) */
.p-sp-88site .p-sp-88-photo-caption {
  color: #292929;
  font-size: 1.3rem;
  line-height: 20px;
  margin-top: 12px;
}

/* スマホ・タブレット(1列):見本の画像は文の下。大きくなりすぎないよう幅 400px まで */
@media (max-width: 1279.98px) {
  .p-sp-88site .p-sp-88-intro__media {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: 100%;
  }
}

/* 導入のボタン:スマホでは幅いっぱい(原稿 12-1) */
@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-intro__button {
    max-width: none;
  }
}

/* 紺の吹き出し(導入・公開のあとに。今の部品 p-service-trouble__contents-header):PC では左右の内側の余白を 44px に(共通の 59px では、導入の1行目〔24px・17字〕が入らない。Figma 46:1416 は1行) */
@media (min-width: 1280px) {
  .p-sp-88site .p-service-trouble__contents-header {
    padding-left: 44px;
    padding-right: 44px;
  }
}

/* ----- 3つの数字(白の枠・紺の 2px の線・角丸 8。札 16px 太字/数字 34px 太字 紺〔「（税込）」だけ 20px〕。Figma 46:1441) ----- */
.p-sp-88site .p-sp-88-numbers__list {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0 auto;
  max-width: 910px;
  padding: 0;
}

.p-sp-88site .p-sp-88-numbers__item {
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 8px;
  text-align: center;
}

.p-sp-88site .p-sp-88-numbers__label {
  color: #292929;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 19px;
}

.p-sp-88site .p-sp-88-numbers__value {
  color: #182957;
  font-size: 3.4rem;
  font-weight: bold;
  line-height: 41px;
}

.p-sp-88site .p-sp-88-numbers__tax {
  font-size: 2rem;
}

/* 条件の一文:3つのすぐ下 20px(離さない。原稿 12-1) */
.p-sp-88site .p-sp-88-numbers__note {
  font-size: 1.6rem;
  line-height: 26px;
  margin-top: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-sp-88site .p-sp-88-numbers__list {
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-88-numbers__note {
    font-size: 1.5rem;
    line-height: 24px;
    text-align: left;
  }
}

/* ----- お悩みの4枚:スマホ・タブレットは 2列×2段(原稿 12-1。デジタルパートナーと同じ形)。番号の札(上に 16px 出る)のぶん、段の間をあける ----- */
@media (max-width: 1279.98px) {
  .p-sp-88site .p-service-solution__list {
    gap: 36px 12px;
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-88site .p-service-solution__item {
    padding: 36px 8px 14px;
  }
}

@media (max-width: 767.98px) {
  .p-sp-88site .p-service-solution__item {
    font-size: 1.3rem;
  }
}

/* ----- 88サイトとは(今の部品 p-service-consulting):黄色の線の一文と本文は同じ左端(幅 720。原稿 4章)・帯4本・帯の下の1行 ----- */
.p-sp-88site .p-sp-88-about .p-service-consulting__caption {
  text-align: left;
}

.p-sp-88site .p-sp-88-about__text {
  line-height: 24px;
}

.p-sp-88site .p-sp-88-about__para + .p-sp-88-about__para {
  margin-top: 16px;
}

/* 帯4本:高さをそろえ、中の札と見出しを上下中央に。札は日本語(20px・Medium・#FF8DB8。原稿 v8 監査 R7 #3) */
.p-sp-88site .p-sp-88-about .p-service-consulting__list {
  grid-auto-rows: 1fr;
}

.p-sp-88site .p-sp-88-about__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-sp-88site .p-sp-88-about__label {
  color: #FF8DB8;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
}

/* 帯の下の1行(14px。帯04 のすぐ下 24px。帯の左下の角にそろえる。原稿 4章) */
.p-sp-88site .p-sp-88-about__note {
  font-size: 1.4rem;
  line-height: 24px;
  margin-top: 24px;
}

@media (min-width: 1280px) {
  /* 帯4本:Figma では傾きを含めない帯の幅が 720px(今の部品は 680px)。見出し(30px・1行)が入るよう、このページだけ並びを 750px に広げる */
  .p-sp-88site .p-sp-88-about .p-service-consulting__list {
    max-width: 750px;
  }

  .p-sp-88site .p-sp-88-about .p-service-consulting__caption,
  .p-sp-88site .p-sp-88-about__text {
    margin-left: 47px;
    margin-right: auto;
    max-width: 720px;
  }

  .p-sp-88site .p-sp-88-about__item {
    min-height: 104px;
  }

  .p-sp-88site .p-sp-88-about__label {
    font-size: 2rem;
    line-height: 36px;
    padding-left: 92px;
  }

  .p-sp-88site .p-sp-88-about .p-service-consulting__item--jp {
    font-size: 3rem;
    line-height: 47px;
  }

  .p-sp-88site .p-sp-88-about__note {
    margin-left: auto;
    margin-right: auto;
    max-width: 742px;
  }
}

/* ----- 営業・採用・紹介の受け皿として(クリームのカード5枚。178×124・角丸 8。番号 20px 太字 ピンク/文 15px 太字 紺) ----- */
.p-sp-88site .p-sp-88-scene__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-sp-88site .p-sp-88-scene__item {
  align-items: center;
  background-color: #FFF0BF;
  border-radius: 8px;
  display: flex;
  flex: 0 0 calc(50% - 6px);
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  min-height: 124px;
  padding: 22px 8px;
  text-align: center;
}

.p-sp-88site .p-sp-88-scene__number {
  color: #DA005C;
  font-size: 2rem;
  font-weight: bold;
  line-height: 24px;
}

.p-sp-88site .p-sp-88-scene__text {
  color: #182957;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 24px;
}

.p-sp-88site .p-sp-88-scene__after {
  line-height: 28px;
  margin-top: 40px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-sp-88site .p-sp-88-scene__list {
    gap: 14px;
  }

  .p-sp-88site .p-sp-88-scene__item {
    flex: 0 0 calc((100% - 28px) / 3);
  }
}

@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-scene__item {
    flex: 0 0 178px;
    padding: 22px 12px;
  }
}

/* 1440px 以上(Figma の幅):5枚の並び(946px)は本文の幅(909px)より広い。左右に少しはみ出して中央に置く */
@media (min-width: 1440px) {
  .p-sp-88site .p-sp-88-scene__list {
    --sp-88-scene-w: min(946px, calc(100% + 37px));
    flex-wrap: nowrap;
    margin-left: calc((100% - var(--sp-88-scene-w)) / 2);
    width: var(--sp-88-scene-w);
  }
}

/* ----- 料金と、契約の条件:料金カード・含まれるもの・注意書きの枠・合計と含まれないもの(968px)。並びは grid の場所で変える ----- */
.p-sp-88site .p-sp-88-price__grid {
  display: grid;
  gap: 24px;
  grid-template-areas: "plan" "notes" "incl" "total" "out";
  margin-left: auto;
  margin-right: auto;
  max-width: 968px;
}

.p-sp-88site .p-sp-88-price__grid.is-no-total {
  grid-template-areas: "plan" "notes" "incl" "out";
}

.p-sp-88site .p-sp-88-price__card--plan {
  grid-area: plan;
}

.p-sp-88site .p-sp-88-price__card--included {
  grid-area: incl;
}

.p-sp-88site .p-sp-88-price__notes {
  grid-area: notes;
}

.p-sp-88site .p-sp-88-price__sub--total {
  grid-area: total;
}

.p-sp-88site .p-sp-88-price__sub--out {
  grid-area: out;
}

.p-sp-88site .p-sp-88-price__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-sp-88site .p-sp-88-price__name {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  padding: 16px;
  text-align: center;
}

.p-sp-88site .p-sp-88-price__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  padding: 20px 16px 24px;
}

.p-sp-88site .p-sp-88-price__text {
  font-size: 1.5rem;
  line-height: 27px;
}

.p-sp-88site .p-sp-88-price__amount {
  text-align: center;
}

.p-sp-88site .p-sp-88-price__label {
  font-size: 1.4rem;
  line-height: 20px;
}

.p-sp-88site .p-sp-88-price__price {
  color: #182957;
  font-size: 3rem;
  font-weight: bold;
  line-height: 44px;
  margin-top: 4px;
}

.p-sp-88site .p-sp-88-price__tax {
  font-size: 2rem;
}

.p-sp-88site .p-sp-88-price__box {
  background-color: #FFF0BF;
  border-radius: 6px;
  font-weight: bold;
  line-height: 26px;
  padding: 12px 16px;
  text-align: center;
}

.p-sp-88site .p-sp-88-price__list {
  font-size: 1.5rem;
  line-height: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 合計の箱・含まれないものの箱(クリーム・角丸 8。見出し h3 20px 太字 紺/本文 15px) */
.p-sp-88site .p-sp-88-price__sub {
  background-color: #FFF0BF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.p-sp-88site .p-sp-88-price__sub-title {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 28px;
  margin: 0;
}

.p-sp-88site .p-sp-88-price__sub-text {
  font-size: 1.5rem;
  line-height: 26px;
}

.p-sp-88site .p-sp-88-price__buttons {
  margin-top: 24px;
}

@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-88-price__buttons .p-sp__button {
    max-width: none;
  }
}

@media (min-width: 768px) {
  .p-sp-88site .p-sp-88-price__grid {
    grid-template-areas: "plan incl" "notes notes" "total out";
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-88site .p-sp-88-price__grid.is-no-total {
    grid-template-areas: "plan incl" "notes notes" "out out";
  }
}

@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-price__grid {
    gap: 51px 24px;
  }

  .p-sp-88site .p-sp-88-price__name {
    font-size: 2.2rem;
    line-height: 31px;
    padding: 18px 24px;
  }

  .p-sp-88site .p-sp-88-price__body {
    padding: 24px 28px 28px;
  }

  .p-sp-88site .p-sp-88-price__price {
    font-size: 3.4rem;
  }

  .p-sp-88site .p-sp-88-price__sub {
    padding: 24px 28px;
  }

  .p-sp-88site .p-sp-88-price__sub-title {
    font-size: 2rem;
  }

  .p-sp-88site .p-sp-88-price__buttons {
    margin-top: 51px;
  }
}

/* 1440px 以上(Figma の幅):968px の並びは本文の幅(909px)より広い。左右に少しはみ出して中央に置く(ちょうどええの料金と同じ考え方) */
@media (min-width: 1440px) {
  .p-sp-88site .p-sp-88-price__grid {
    --sp-88-price-w: min(968px, calc(100% + 59px));
    margin-left: calc((100% - var(--sp-88-price-w)) / 2);
    max-width: none;
    width: var(--sp-88-price-w);
  }
}

/* ----- デメリット($show_demerit が true のときだけ):4枚の枠(#F7F7F2・線 #1E2A4A 20%・角丸 10)。2列×2段・間 40(原稿 6章) ----- */
.p-sp-88site .p-sp-88-demerit__lead {
  line-height: 24px;
}

.p-sp-88site .p-sp-88-demerit__list {
  display: grid;
  gap: 24px;
}

.p-sp-88site .p-sp-88-demerit__item {
  background-color: #F7F7F2;
  border: 1px solid rgba(30, 42, 74, 0.2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-sp-88site .p-sp-88-demerit__head {
  align-items: flex-start;
  background-color: #182957;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.p-sp-88site .p-sp-88-demerit__body {
  align-items: flex-start;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 24px;
}

/* 札(角丸 20・13px 太字)。「よく言われること」はクリーム地・紺、「88サイトでは」は白地・ピンクの線とピンク */
.p-sp-88site .p-sp-88-demerit__tag {
  border-radius: 20px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 16px;
  padding: 3px 12px;
}

.p-sp-88site .p-sp-88-demerit__tag--q {
  background-color: #FFF0BF;
  color: #182957;
}

.p-sp-88site .p-sp-88-demerit__tag--a {
  background-color: #ffffff;
  border: 1px solid #DA005C;
  color: #DA005C;
}

.p-sp-88site .p-sp-88-demerit__title {
  color: #ffffff;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.5;
}

.p-sp-88site .p-sp-88-demerit__text,
.p-sp-88site .p-sp-88-demerit__link {
  line-height: 24px;
}

@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-demerit__list {
    gap: 40px;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .p-sp-88site .p-sp-88-demerit__head {
    padding: 20px 32px;
  }

  .p-sp-88site .p-sp-88-demerit__body {
    padding: 24px 32px 40px;
  }

  .p-sp-88site .p-sp-88-demerit__title {
    font-size: 2.2rem;
    line-height: 33px;
  }
}

/* ----- 比べ表:表(1列目 150px・ほかの列は等分)。表が入らない幅は横にスクロールし、1列目(項目名)は固定(原稿 12-1) ----- */
.p-sp-88site .p-sp-88-compare__lead {
  line-height: 28px;
}

.p-sp-88site .p-sp-88-compare__wrap {
  border: 1px solid #D9DBE5;
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-sp-88site .p-sp-88-compare__table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.4rem;
  line-height: 22px;
  table-layout: fixed;
  width: 100%;
}

.p-sp-88site .p-sp-88-compare__wrap.is-5col .p-sp-88-compare__table {
  min-width: 938px;
}

.p-sp-88site .p-sp-88-compare__wrap.is-4col .p-sp-88-compare__table {
  min-width: 741px;
}

.p-sp-88site .p-sp-88-compare__table th,
.p-sp-88site .p-sp-88-compare__table td {
  border-bottom: 1px solid #D9DBE5;
  border-right: 1px solid #D9DBE5;
  padding: 14px 12px;
  text-align: left;
  vertical-align: top;
}

.p-sp-88site .p-sp-88-compare__table tr > :last-child {
  border-right: 0;
}

.p-sp-88site .p-sp-88-compare__table tbody tr:last-child > * {
  border-bottom: 0;
}

/* 見出しの行(紺・15px 太字 白。88サイトの列だけピンク) */
.p-sp-88site .p-sp-88-compare__table thead th,
.p-sp-88site .p-sp-88-compare__corner {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
}

.p-sp-88site .p-sp-88-compare__table thead .p-sp-88-compare__col--88 {
  background-color: #DA005C;
}

.p-sp-88site .p-sp-88-compare__corner {
  width: 150px;
}

/* 1列目(項目名):薄い灰色・太字。横にスクロールしても左に固定 */
.p-sp-88site .p-sp-88-compare__row,
.p-sp-88site .p-sp-88-compare__corner {
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

.p-sp-88site .p-sp-88-compare__row {
  background-color: #F2F2F7;
  font-weight: bold;
}

.p-sp-88site .p-sp-88-compare__cell {
  background-color: #ffffff;
}

.p-sp-88site .p-sp-88-compare__cell--88 {
  background-color: #FFF7E0;
  font-weight: bold;
}

/* 表の下の注(13px。表の下 16px。2行の間 4px) */
.p-sp-88site .p-sp-88-compare__notes {
  display: grid;
  font-size: 1.3rem;
  gap: 4px;
  line-height: 1.5;
  margin-top: 16px;
}

/* 表の下の案内:文字のリンクと小さめの無料相談のボタン(白地・ピンクの 2px の枠。240×48)。PC は右寄せで横並び */
.p-sp-88site .p-sp-88-compare__guide {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 8px;
}

.p-sp-88site .p-sp-88-compare__link {
  line-height: 24px;
}

.p-sp-88site .p-sp-88-compare__button {
  background-color: #ffffff;
  border: 2px solid #DA005C;
  border-radius: 40px;
  color: #DA005C;
  height: 48px;
  line-height: 44px;
  margin: 0;
  max-width: 240px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

.p-sp-88site .p-sp-88-compare__button:hover {
  background-color: #DA005C;
  color: #ffffff;
}

/* LINE の1行(14px・右寄せ。案内の下 16px。「LINEでの販売の仕組み →」だけリンク) */
.p-sp-88site .p-sp-88-compare__line {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 16px;
  text-align: right;
}

/* スマホ:注は左寄せのまま、リンク → ボタン(幅 100%・高さ 48)を縦に。LINE の1行は左寄せ(原稿 12-1) */
@media (max-width: 767.98px) {
  /* 1列目(固定)は 116px(「向いている方」〔14px 太字・6字〕が1行に入る幅)にして、横に動かす列を見やすくする */
  .p-sp-88site .p-sp-88-compare__corner {
    width: 116px;
  }

  .p-sp-88site .p-sp-88-compare__wrap.is-4col .p-sp-88-compare__table {
    min-width: 660px;
  }

  .p-sp-88site .p-sp-88-compare__wrap.is-5col .p-sp-88-compare__table {
    min-width: 830px;
  }

  .p-sp-88site .p-sp-88-compare__guide {
    align-items: flex-start;
    flex-direction: column;
  }

  .p-sp-88site .p-sp-88-compare__button {
    max-width: none;
  }

  .p-sp-88site .p-sp-88-compare__line {
    text-align: left;
  }
}

/* 1440px 以上(Figma の幅):表は本文の幅(909px)より広い 940px。左右に少しはみ出して中央に置く(注・案内・LINE の1行も表の左右にそろえる) */
@media (min-width: 1440px) {
  .p-sp-88site .p-sp-88-compare__wrap,
  .p-sp-88site .p-sp-88-compare__notes,
  .p-sp-88site .p-sp-88-compare__guide,
  .p-sp-88site .p-sp-88-compare__line {
    --sp-88-compare-w: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--sp-88-compare-w)) / 2);
    width: var(--sp-88-compare-w);
  }
}

/* ----- 公開までの流れ(共通の .p-sp-flow):枠の下の一行(15px) ----- */
@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-flow .p-sp-flow__note {
    margin-top: 51px;
  }
}

/* ----- 公開のあとに(今の部品 p-service-trouble):小さい見出し(24px)・大きい一文(32px・2行・中央)。どちらも見出しタグにしない ----- */
.p-sp-88site .p-sp-88-after__small {
  color: #292929;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
}

.p-sp-88site .p-sp-88-after__big {
  color: #292929;
  font-size: 2.2rem;
  line-height: 1.5;
}

.p-sp-88site .p-sp-88-after__big strong {
  font-weight: bold;
}

.p-sp-88site .p-sp-88-after__text1 {
  line-height: 24px;
  margin-top: 24px;
}

.p-sp-88site .p-sp-88-after__group {
  line-height: 24px;
  margin-top: 16px;
}

.p-sp-88site .p-sp-88-after__dp {
  margin-top: 16px;
}

.p-sp-88site .p-sp-88-after__blog {
  font-size: 1.4rem;
  line-height: 22px;
  margin-top: 24px;
}

@media (min-width: 960px) {
  .p-sp-88site .p-sp-88-after__small {
    font-size: 2.4rem;
    line-height: 36px;
  }

  .p-sp-88site .p-sp-88-after__big {
    font-size: 3.2rem;
    line-height: 48px;
  }
}

@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-after__media img {
    aspect-ratio: 369/320;
  }
}

/* スマホ・タブレット(1列):写真を本文の上に(写真の下の名前は写真のすぐ下。原稿 12-1) */
@media (max-width: 1279.98px) {
  .p-sp-88site .p-sp-88-after__media {
    order: -1;
  }
}

/* ----- 最後の案内(共通の .p-sp-contact):代表の写真(丸 96px)と一言の段・資料のボタン(共通の .p-sp__button--doc。幅 350) ----- */
.p-sp-88site .p-sp-88-contact__person {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  padding: 8px 0;
}

.p-sp-88site .p-sp-88-contact__photo {
  border-radius: 50%;
  flex: 0 0 96px;
  height: 96px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 96px;
}

.p-sp-88site .p-sp-88-contact__person-body {
  text-align: left;
}

.p-sp-88site .p-sp-88-contact__person-name {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
}

.p-sp-88site .p-sp-88-contact__person-text {
  font-size: 1.4rem;
  line-height: 24px;
  margin-top: 6px;
}

.p-sp-88site .p-sp-88-contact__doc {
  max-width: 350px;
}

@media (min-width: 768px) {
  .p-sp-88site .p-sp-88-contact__person {
    flex-direction: row;
    gap: 24px;
    justify-content: center;
  }
}

/* スマホ:ボタンは縦に。無料相談が上・資料が下(どちらも幅 100%。原稿 12-1) */
@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-88-contact__buttons {
    flex-direction: column;
  }

  .p-sp-88site .p-sp-88-contact__buttons .p-sp__button {
    max-width: none;
  }
}

/* ----- 見出しの下のあき(PC。Figma):料金・流れは 51px、それ以外は共通の 40px ----- */
@media (min-width: 1280px) {
  .p-sp-88site .p-sp-88-price .p-sp__header,
  .p-sp-88site .p-sp-88-flow .p-sp__header,
  .p-sp-88site .p-sp-88-price .p-sp__lead {
    margin-bottom: 51px;
  }
}

/* ----- スマホ(768px 未満):PC の幅に合わせた手の改行を外して、幅に合わせて折り返す(原稿 12-1。比べ表のセル・紺の吹き出し・カードの中は残す) ----- */
@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-intro__text .c-split--block,
  .p-sp-88site .p-sp-intro__cta-lead .c-split--block,
  .p-sp-88site .p-service-solution__caption .c-split--block,
  .p-sp-88site .p-sp-88-about__para .c-split--block,
  .p-sp-88site .p-sp-88-price__sub-text .c-split--block,
  .p-sp-88site .p-sp-88-demerit__lead .c-split--block,
  .p-sp-88site .p-sp-88-demerit__text .c-split--block,
  .p-sp-88site .p-sp-88-compare__lead .c-split--block,
  .p-sp-88site .p-sp-88-after__big .c-split--block,
  .p-sp-88site .p-sp-88-after__text2 .c-split--block,
  .p-sp-88site .p-service-faq__item-answer .c-split--block,
  .p-sp-88site .p-sp-88-contact__person-text .c-split--block,
  .p-sp-88site .p-sp-contact__lead .c-split--block {
    display: inline;
  }
}

/* ----- 文字のリンクの中を折り返しの区切り(c-split。inline-block)で分けたとき、リンクの下線が区切りの中にも出るようにする(88サイト) ----- */
.p-sp-88site .p-sp__textlink .c-split {
  text-decoration: underline;
}

/* 実装監査 C R1 の C-2(2026-10-27):サービスのページ4つの紺の箱(FIRST STEP)の中だけ、英字の見出しの飾り(c-title--en::before の画像)を出さない。
 * 部品 c-title--en と style.css は変えない(ずれ一覧 #25。監査役の判断) */
.p-sp .p-sp-contact__box .c-title--en::before {
  display: none;
}

/*
 * ===== 実装監査 A R1・B R1 の直し(2026-10-27。サービスのページ4つで共通。監査役の判断 B6〜B11)=====
 * AI研修のページ(ai-training.css の末尾)と同じ考え方。既にある指定は変えず、後から上書きする。
 */

/* B8(A の D-W1、B の CH2・LM2・88-2):本文は言葉の切れ目で折り返す(Chromium で効く。ほかのブラウザでは何も変わらない。
 * どのブラウザでも語の途中で切れないよう、テンプレートの区切り c-split と合わせて使う) */
.p-sp {
  word-break: auto-phrase;
}

/* B9(A の D-L1):区切り(c-split。inline-block)で分けた文字のリンクにも下線を出す(a の下線は中の inline-block に届かないため)。
 * これまで 88サイトだけにあった指定を、4ページ共通にする */
.p-sp .p-sp__textlink .c-split {
  text-decoration: underline;
}

/* B7(A の D-W2):1列に積む幅では、同じ並びの高さをそろえない(枠の中が大きく空くのを避ける)。2列以上の並びは今のまま */
@media (max-width: 1279.98px) {
  .p-sp .p-sp__body .p-service-consulting__list,
  .p-sp .p-sp__body .p-service-case__grid,
  .p-sp-digital-partner .p-sp__body .p-sp-dp-what__compare,
  .p-sp-line-sales .p-sp__body .p-service-solution__list {
    grid-auto-rows: auto;
  }
}

@media (max-width: 767.98px) {
  .p-sp .p-sp__body .p-sp-flow__list {
    grid-auto-rows: auto;
  }

  /* B6(A の D-W3、B の C1):スマホの最初の画面で、横に流れる文字の帯(p-scroll-mobile。最初の画面の下の端に付く〔下の余白 40px・高さ 約70px〕)が
   * 見出しに重ならないよう、スマホ用の見出しの下に帯の分の余白をとる(帯の部品は変えない。見出しの上に余白を足すと帯も一緒に下がり、重なりが残る)。
   * 見出しの下の端と帯の上の端の間は 16px(AI研修と同じ 126px) */
  .p-sp .p-mv--90 > .p-mv__mobile .p-mv__title {
    margin-bottom: 126px;
  }
}

/* B10(A の D-F1、B の CH5・88-7・LM3):PC(1440px 以上。Figma の幅)は、最後の紺の箱(4ページ)を Figma と同じ 940px に
 * (本文の幅 909px より広い。左右に少しはみ出して中央に置く。比べ表・流れと同じやり方) */
@media (min-width: 1440px) {
  .p-sp .p-sp-contact__box,
  .p-sp-digital-partner .p-sp-dp-support__cards,
  .p-sp-digital-partner .p-sp-dp-support__table,
  .p-sp-digital-partner .p-sp-dp-support__examples {
    --sp-w940: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--sp-w940)) / 2);
    margin-right: 0;
    max-width: none;
    width: var(--sp-w940);
  }
}

/* ----- ちょうどええホームページ(実装監査 B R1 の直し)----- */

/* B11(B の CH4):導入の写真の切り出しを Figma 44:1438 と同じ(画像の中央を切り出す。Figma は FILL)に。今の部品の指定(上から25%・左寄せ)をこのページだけ戻す */
.p-sp-chodoee-homepage .p-sp-intro__media img {
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}

/* B の CH3:①ページ・④公開後の保守の箇条(行の頭が「・」)は、折り返した2行目を文字の頭にそろえる(ぶら下げ)。区切りの中には字下げを継がせない */
.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item:nth-child(1) .p-sp-ch-contents__text .c-split--block,
.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item:nth-child(4) .p-sp-ch-contents__text .c-split--block {
  padding-left: 1em;
  text-indent: -1em;
}

.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item:nth-child(1) .p-sp-ch-contents__text .c-split--block .c-split,
.p-sp-chodoee-homepage .p-sp-ch-contents .p-service-case__item:nth-child(4) .p-sp-ch-contents__text .c-split--block .c-split {
  text-indent: 0;
}

/* ----- LINEでの販売の仕組み(実装監査 B R1 の直し)----- */

/* B10(B の LM3・LM4・LM5。原稿 12-4「列の幅は全セクションで 940px(PC)にそろえる」):1440px 以上(Figma の幅)は、すべての節の列を 940px に。
 * 列の箱(c-container)は左右に 16px の内側の余白があり、中身が 909px になっている。この余白を、中身が 940px になるところまで小さくする
 * (1440px では左右 約0.6px。画面が広く、余白 16px のままでも中身が 940px より広いときは今のまま〔狭くしない〕)。
 * 列が広がると、お悩み 220・向いているお店 180・カード 450・始め方 300・導入の写真 400×420 になる(どれも grid の等分のため) */
@media (min-width: 1440px) {
  .p-sp-line-sales .p-sp__body > .p-section > .p-section__body.c-container {
    padding-left: min(16px, max(0px, calc((100% - 940px) / 2)));
    padding-right: min(16px, max(0px, calc((100% - 940px) / 2)));
  }

  /* 流れの帯5本:Figma 50:2 の帯は 748px(傾きを含む)。並びを 750px に広げる(88サイトの帯と同じやり方) */
  .p-sp-line-sales .p-sp-lm-flow .p-service-consulting__list {
    max-width: 750px;
  }
}

/* ----- 88サイト(実装監査 B R1 の直し)----- */

/* C13 ③(B の 88-4。原稿 12-1 の scroll-hint の代わり):表が入らない幅(768px 未満)では、表の上に「横にスクロールできます」の1行を CSS で出し、
 * 表は右の端(主役の 88サイトの列)が見える位置から始める(右から左に並べる向きにして、表の中は左から右のまま)。新しいライブラリ・JS は使わない。
 * 1列目(項目名)は今のまま左に固定 */
@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-88-compare__lead::after {
    color: #5A5A5A;
    content: "\2190  横にスクロールできます  \2192";
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 20px;
    margin-top: 16px;
    text-align: center;
  }

  .p-sp-88site .p-sp-88-compare__wrap {
    direction: rtl;
  }

  .p-sp-88site .p-sp-88-compare__table {
    direction: ltr;
  }
}

/* C13 ③ の続き:768〜1279px は、4列の表(今の形)が本文の幅に入るよう、表の最小の幅(741px)を外す(768px では本文 704px に対して 37px はみ出し、
 * 主役の 88サイトの列の右の端が隠れていたため)。5列($show_compare_chodoee が true)は入らないため、1439px までは同じ案内と向きにする */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .p-sp-88site .p-sp-88-compare__wrap.is-4col .p-sp-88-compare__table {
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1439.98px) {
  .p-sp-88site .p-sp-88-compare__lead:has(+ .p-sp-88-compare__wrap.is-5col)::after {
    color: #5A5A5A;
    content: "\2190  横にスクロールできます  \2192";
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 20px;
    margin-top: 16px;
    text-align: center;
  }

  .p-sp-88site .p-sp-88-compare__wrap.is-5col {
    direction: rtl;
  }

  .p-sp-88site .p-sp-88-compare__wrap.is-5col .p-sp-88-compare__table {
    direction: ltr;
  }
}

/*
 * ===== 実装監査 B R2 の直し(2026-10-27。監査役の判断:N1 は案A)=====
 */

/* N1:1279px 以下の斜めの帯(今の部品 p-service-consulting。DP の働き方・ちょうどええの ABOUT・LINE の流れ・88サイトの ABOUT)。
 * 1列で帯の高さが違うと、skewX(-15deg) の傾きでは高い帯ほど左右に張り出し、端がそろわない。
 * このページの帯だけ、傾きを「高さに関係なく横のずれが同じ(24px)」形(clip-path)に替える。24px は、高さ 約90px の帯(スマホ・タブレットでいちばん多い高さ)の
 * 今の傾きと同じずれ。帯の箱は 24px 広げ、今と同じ中心に置く(高さ 約90px の帯は、今と同じ形・同じ位置になる)。
 * 中の文字は傾きを打ち消す指定(skewX(15deg))をやめ、帯の左右の内側の余白を 12px ずつ増やす(文字の列の幅は今と同じ。文字は帯の真ん中の高さの文字と同じ位置になり、
 * 右下の斜めの端にもかからない)。番号は今と同じ 90度の回転だけにし、12px 右へ。
 * 部品(style.css)は変えない。1280px 以上は今のまま(帯の高さがそろうため) */
@media (max-width: 1279.98px) {
  .p-sp .p-sp__body .p-service-consulting__item {
    --sp-band-d: 24px;
    border-radius: 0; /* 実装監査 R3:4つの角をすべて角ばらせてそろえる(clip-path で切る左上・右下と同じに) */
    -webkit-clip-path: polygon(var(--sp-band-d) 0, 100% 0, calc(100% - var(--sp-band-d)) 100%, 0 100%);
    clip-path: polygon(var(--sp-band-d) 0, 100% 0, calc(100% - var(--sp-band-d)) 100%, 0 100%);
    -webkit-transform: none;
    -ms-transform: none;
    padding-left: calc(20px + var(--sp-band-d) / 2);
    padding-right: calc(20px + var(--sp-band-d) / 2);
    transform: none;
    width: calc(100% - 30px + var(--sp-band-d));
  }

  /* ちょうどええの帯は content-box(今の部品のまま)のため、箱が並びより広く左に寄っていた(左の空き 19px・右 9px)。
   * 実装監査 R3:ほかのページと同じ border-box にし、同じ幅・同じ空き(375 で左右 34px)にそろえる */
  .p-sp-chodoee-homepage .p-sp__body .p-service-consulting__item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .p-sp .p-sp__body .p-service-consulting__item--en,
  .p-sp .p-sp__body .p-service-consulting__item--jp,
  .p-sp-digital-partner .p-sp-dp-style__item-text,
  .p-sp-line-sales .p-sp-lm-flow__item-text {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .p-sp .p-sp__body .p-service-consulting__item-number {
    -webkit-transform: translateX(calc(var(--sp-band-d) / 2)) rotate(90deg);
    -ms-transform: translateX(12px) rotate(90deg);
    transform: translateX(calc(var(--sp-band-d) / 2)) rotate(90deg);
  }
}

/* 88-N2:スマホ(767px 以下)の比べ表。最初の位置(右の端)で、左に固定した項目名の列(116px)と 88サイトの列の間に、隣の列が 14px 見えていた。
 * 項目名のほかの列の幅を「表の見える幅 − 116px」にそろえ、最初の位置で 88サイトの列が項目名の列のすぐ右から始まるようにする(100% は表の外の枠の中の幅)。文字・HTML は変えない */
@media (max-width: 767.98px) {
  .p-sp-88site .p-sp-88-compare__wrap.is-4col .p-sp-88-compare__table {
    min-width: calc(300% - 232px);
  }

  .p-sp-88site .p-sp-88-compare__wrap.is-5col .p-sp-88-compare__table {
    min-width: calc(400% - 348px);
  }
}

/* 88-N3:3つの数字の枠を Figma 46:1443 ほかと同じ 116px に。「(税込)」(20px)の行の箱が値の行(41px)より下に出て、真ん中の枠だけ 6px 高くなっていた
 * (横に並ぶ幅では3つとも 122px にそろう)。値の行の高さの中に収める。ラベルの上端(枠の上 +26)は変えない。どの幅でも同じ原因のため、幅を分けない */
.p-sp-88site .p-sp-88-numbers__tax {
  line-height: 1;
}

/* LM-N1:1440px 以上は、LINE の流れの帯の中の手順の名前と一文の左端を 20px 右へ(x369 → x389。Figma 50:1564〜50:1607) */
@media (min-width: 1440px) {
  .p-sp-line-sales .p-sp-lm-flow .p-service-consulting__item--jp {
    padding-left: 116px;
  }

  .p-sp-line-sales .p-sp-lm-flow__item-text {
    padding-left: 124px;
  }
}

/*
 * ===== 実装監査 A R2 の直し(2026-10-27。デジタルパートナー)=====
 */

/* D-F2:導入の写真(Figma 48:1438)と担当する人の写真(48:1650)の切り出しを、Figma と同じ中央に(ちょうどええの B11 と同じ直し方。今の部品の指定〔上から25%・左寄せ〕をこのページだけ戻す) */
.p-sp-digital-partner .p-sp-intro__media img,
.p-sp-digital-partner .p-sp-dp-person__media img {
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}

/* D-W5 ①:1280〜1439px の「2枚ずつ」(最大幅 458px)は、カードが4枚のときだけにする(LINE のカードを出さない3枚の形は、1行に3枚並べる。3枚は 694px で本文の幅 約767px に入る) */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .p-sp .p-sp-others__cards:not(:has(> .p-sp-others__card:nth-child(4))) {
    max-width: none;
  }
}

/* D-W5 ②:768〜1279px は、カードが広い(346〜474px)ため、説明の PC 用の行の区切りを外し、まとまりの切れ目で自然に折り返す(スマホと同じ。カードの右半分が空かないように) */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .p-sp .p-sp-others__card-text .c-split--block {
    display: inline-block;
  }
}

/*
 * ===== 実装監査 R3 後の仕上げ(2026-10-27):374px 以下(360px など)の1〜3文字だけの行 =====
 * 文言・行の区切り(原稿の ⏎)は変えない。
 */
@media (max-width: 374.98px) {
  /* お悩みの4枚(2列)の題名:1行 10文字(13px)が入るよう、カードの左右の内側の余白を 8 → 4px に
   * (DP「ホームページの更新が」、ちょうどええ「見て判断しました」と」の最後の文字だけが次の行に出ていた) */
  .p-sp .p-sp__body .p-service-solution__item {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* LINE の始め方の注の見出し「C（友だちがほとんどいない）の場合」が1行に入るよう、左右の内側の余白を 20 → 12px に(「の場合」だけの行をなくす) */
  .p-sp-line-sales .p-sp-lm-start__note {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 実装監査 R3 の D-F3 の続き:1440px 以上は、帯の中の見出しと本文の左端を Figma(x353〜358)に合わせる(帯を 820px にして左へ 21px 動いたため、
 * 見出し x349 → 353、本文 x351 → 355)。1280〜1439px は今のまま */
@media (min-width: 1440px) {
  .p-sp-digital-partner .p-sp-dp-style .p-service-consulting__item--jp {
    padding-left: 126px;
  }

  .p-sp-digital-partner .p-sp-dp-style__item-text {
    padding-left: 142px;
  }
}