@charset "UTF-8";
/*!
 * AI業務改善パートナー LP — archivect.com/ai-partner/
 * 本ページ固有の追加分のみ。
 *
 * ■ 大原則
 *   意匠は本体サイト（テーマ blankslate）の common.css / service.css を継承する。
 *   本ファイルは「既存に無い部品」だけを足す。既存クラスの再定義・上書きは最小限に。
 *   - 単位は rem（html が 62.5% ＝ 1rem = 10px）
 *   - 見出し＝ "M PLUS Rounded 1c" 500 / 本文＝ "Noto Sans JP"
 *   - ブレークポイントは 1023px / 767px（本体に合わせる）
 *
 * ■ 使う色（本体サイトの実配色）
 *   #4694BC 青（見出し・強調）  #4594BC 青（ボタン）
 *   #363636 本文               #aaa 罫線
 *   rgba(162,208,232,.6) カード地   #FCF9DA クリーム
 */

/* ============================================================
   0. 変数（本体の実配色をトークン化）
   ============================================================ */
:root {
  --ap-blue:        #4694BC;
  --ap-blue-btn:    #4594BC;
  --ap-blue-deep:   #2E6E8E;   /* 小さな文字用（白地 5.1:1・WCAG AA適合） */
  /* このページの地色は本体テーマの薄い水色 #CBE2F5。その上では
     --ap-blue(#4694BC) のコントラストが 2.5:1 しかなく、数字を大きくしても
     「浮いて見えない」。特大数字・強い印だけ、同系のより暗い青を使う。
     #27607D は #CBE2F5 上で 5.1:1（本文サイズでも WCAG AA 適合）。 */
  --ap-blue-ink:    #27607D;
  --ap-ink:         #363636;
  --ap-ink-mute:    #6E6E6E;
  /* 本体サイトの地色が薄い水色(#cbe2f5前後)なので、パネルの地は
     "白寄りの薄い色" だと沈んで見えない。青を薄く重ねて浮かせる。 */
  --ap-card-soft:   rgba(69, 148, 188, 0.15);
  /* 罫線。上と同じ理由で、灰色(#e4e4e4)は水色の地の上だと 1.05:1 まで落ちて
     完全に消える（実測）。白いカードの中でも 1.27:1 しかなく元々薄かった。
     半透明の青にすると、白の上でも水色の上でも同じ設計で効く。
       水色 #CBE2F5 の上 : 1.05:1 → 1.48:1
       白        の上 : 1.27:1 → 1.75:1
     罫線として認識できる下限は約1.3:1。区切りが主役になる 2:1 以上は避ける。 */
  --ap-line:        rgba(69, 148, 188, 0.45);
  --ap-radius:      14px;
}

/* ============================================================
   1. 共通の微調整
   ============================================================ */
.service .txt {
  color: var(--ap-ink);
  line-height: 1.9;
}
.service .txt.note {
  color: var(--ap-ink-mute);
  font-size: 1.4rem;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .service .txt.note { font-size: 1.3rem; }
}

/* .contents は service.css で max-width:960px・区切り線付き。中身の左右余白だけ確保する */
.contents > .inner {
  margin: 0 auto;
  width: 90%;
}

/* ============================================================
   2. リード部の料金先出し
   ============================================================ */
.price-lead {
  display: flex;
  gap: 16px 40px;
  justify-content: center;
  margin-top: 32px;
}
@media screen and (max-width: 767px) {
  .price-lead {
    flex-direction: column;
    gap: 10px;
    margin: 24px auto 0;
    max-width: 100%;
  }
}
.price-lead dl {
  align-items: baseline;
  background: var(--ap-card-soft);
  border-radius: var(--ap-radius);
  display: flex;
  gap: 12px;
  margin-bottom: 0;
  padding: 12px 24px;
}
@media screen and (max-width: 767px) {
  .price-lead dl { justify-content: space-between; padding: 10px 18px; }
}
.price-lead dt {
  color: var(--ap-ink-mute);
  font-size: 1.4rem !important;
  font-weight: 500;
}
.price-lead dd {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}
.price-lead .num {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* リード直下のページ内リンク
   ※ テーマ側は `section .sub-nav` にしか効かない。ここは div.head の中なので
     当たらず、素のリストのまま縦積みになっていた。本体と同じ見た目を再現する。 */
.head .sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 36px;
}
.head .sub-nav li { margin: 0 20px; }
.head .sub-nav li a {
  font-size: 1.8rem;
  text-decoration: underline;
}
@media screen and (max-width: 1023px) {
  .head .sub-nav li { margin: 0 7px; }
  .head .sub-nav li a { font-size: 1.4rem; }
}

/* ============================================================
   3. 課題リスト
   ============================================================ */
.check-list {
  display: grid;
  gap: 0 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}
@media screen and (max-width: 767px) {
  .check-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* text-wrap:balance ＝ 2行に割れた時に最後の行が数文字だけ残るのを防ぐ。
   これが無いと「何から始めればいいか分からな／い」のように1文字だけ落ちる。
   （promise__ba td と同じ扱い。非対応ブラウザでは従来の折り返しになるだけ） */
.check-list li {
  border-bottom: 1px solid var(--ap-line);
  color: var(--ap-ink);
  font-size: 1.6rem;
  line-break: strict;
  line-height: 1.7;
  padding: 16px 0 16px 32px;
  position: relative;
  text-wrap: balance;
}
@media screen and (max-width: 767px) {
  .check-list li { font-size: 1.4rem; padding: 14px 0 14px 28px; }
}
/* チェックマークはCSSで作図（環境依存の文字グリフを使わない） */
.check-list li::before {
  border-bottom: 2px solid var(--ap-blue);
  border-left: 2px solid var(--ap-blue);
  content: "";
  height: 6px;
  left: 4px;
  position: absolute;
  top: 1.6em;
  transform: rotate(-45deg);
  width: 12px;
}

/* ============================================================
   4. 導入イメージ（.flex-box を流用）
   ============================================================ */
.usecase { margin-top: 56px; }
@media screen and (max-width: 767px) {
  .usecase { margin-top: 36px; }
}
.usecase .flex-box { align-items: center; }

.usecase-ttl {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 12px;
}
@media screen and (max-width: 1023px) {
  .usecase-ttl { font-size: 1.9rem; }
}
@media screen and (max-width: 767px) {
  .usecase-ttl { font-size: 1.8rem; text-align: center; }
}

/* Before / After パネル（画像の代わり。CSSのみで成立させる） */
.ba {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  padding: 24px;
}
@media screen and (max-width: 767px) {
  .ba { padding: 20px; }
}
.ba__label {
  color: var(--ap-ink-mute);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.ba__label--after {
  align-items: center;
  color: var(--ap-blue-deep);
  display: flex;
  gap: 8px;
}
.ba__label--after::before {
  background: var(--ap-blue);
  border-radius: 2px;
  content: "";
  flex: none;
  height: 8px;
  width: 8px;
}
.ba__text {
  color: var(--ap-ink-mute);
  font-size: 1.4rem;
  line-height: 1.75;
}
.ba__text--after {
  color: var(--ap-ink);
  font-weight: 500;
}
/* 下向き矢印もCSSで作図 */
.ba__arrow { margin: 14px 0; }
.ba__arrow::before {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--ap-blue);
  content: "";
  display: block;
  height: 0;
  margin: 0 auto;
  width: 0;
}

/* ============================================================
   5. 選ばれる理由
   ============================================================ */
.reason {
  border-top: 1px solid var(--ap-line);
  margin-top: 28px;
  padding-top: 28px;
}
.reason:first-of-type { border-top: 0; }
.reason__ttl {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .reason__ttl { font-size: 1.7rem; }
}

/* ============================================================
   6. 料金
   ============================================================ */
.price-box {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
}
@media screen and (max-width: 767px) {
  .price-box { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.price-card {
  background: var(--ap-card-soft);
  border-radius: var(--ap-radius);
  padding: 32px 28px;
}
@media screen and (max-width: 767px) {
  .price-card { padding: 24px 20px; }
}
.price-card__label {
  color: var(--ap-ink-mute);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.price-card__value {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 6px;
}
.price-card__value .num {
  font-size: 3.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .price-card__value .num { font-size: 3.2rem; }
}
.price-card ul {
  border-top: 1px solid rgba(70, 148, 188, 0.3);
  margin-top: 20px;
  padding-top: 20px;
}
.price-card li {
  color: var(--ap-ink);
  font-size: 1.5rem;
  line-height: 1.8;
  padding-left: 20px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .price-card li { font-size: 1.4rem; }
}
.price-card li::before {
  background: var(--ap-blue);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 4px;
  position: absolute;
  top: 0.85em;
  width: 6px;
}

/* ============================================================
   7. 導入の流れ
   ============================================================ */
.flow {
  counter-reset: flow;
  margin-top: 32px;
}
.flow > li {
  border-left: 2px solid rgba(70, 148, 188, 0.3);
  counter-increment: flow;
  padding: 0 0 32px 32px;
  position: relative;
}
.flow > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow > li::before {
  align-items: center;
  background: var(--ap-blue);
  border-radius: 50%;
  color: #fff;
  content: counter(flow);
  display: flex;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.5rem;
  height: 32px;
  justify-content: center;
  left: -17px;
  position: absolute;
  top: 0;
  width: 32px;
}
.flow__ttl {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
  padding-top: 4px;
}
@media screen and (max-width: 767px) {
  .flow > li { padding-left: 26px; }
  .flow__ttl { font-size: 1.6rem; }
}

/* ============================================================
   8. 開発実績
   ============================================================ */
.works-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
}
@media screen and (max-width: 1023px) {
  .works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .works-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.works-list li {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  padding: 24px 22px;
}
.works-list__cat {
  background: var(--ap-blue);
  border-radius: 40px;
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 14px;
}
.works-list__ttl {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 14px 0 8px;
}
.works-list .txt { font-size: 1.4rem !important; }

/* ============================================================
   9. FAQ（開閉は smooth-ui.js が担当）
   ============================================================ */
.faq-list { margin-top: 28px; }
.faq-item {
  border-bottom: 1px solid var(--ap-line);
}
.faq-item:first-child { border-top: 1px solid var(--ap-line); }
.faq-item > summary {
  color: var(--ap-ink);
  cursor: pointer;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.6;
  list-style: none;
  padding: 20px 48px 20px 34px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .faq-item > summary { font-size: 1.5rem; padding: 16px 40px 16px 30px; }
}
.faq-item > summary::-webkit-details-marker { display: none; }
/* Q マーク */
.faq-item > summary::before {
  color: var(--ap-blue);
  content: "Q";
  font-family: "Space Mono", monospace;
  font-size: 1.6rem;
  left: 2px;
  position: absolute;
  top: 20px;
}
@media screen and (max-width: 767px) {
  .faq-item > summary::before { top: 16px; }
}
/* ＋／− */
.faq-item > summary::after {
  border-bottom: 2px solid var(--ap-blue);
  border-right: 2px solid var(--ap-blue);
  content: "";
  height: 9px;
  position: absolute;
  right: 8px;
  top: 24px;
  transform: rotate(45deg);
  transition: transform 350ms ease;
  width: 9px;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-a {
  color: var(--ap-ink);
  font-size: 1.5rem;
  line-height: 1.95;
  padding: 0 8px 22px 34px;
}
@media screen and (max-width: 767px) {
  .faq-a { font-size: 1.4rem; padding: 0 0 18px 30px; }
}

/* ============================================================
   10. クロージングCTA（.foot-contact は本体の意匠を継承）
   ============================================================ */
/* 並び方・大きさは本体テーマのまま使う。
   （SPでは common.css が 160px の円形にする＝本体サイトの締めCTAの形。
     ここで flex-direction や width を上書きすると楕円に潰れるので触らない） */
.foot-contact ul { margin-top: 28px; }
/* 主CTA（無料診断）だけ影で少し前に出す。形と大きさは他2つと揃える */
.foot-contact .btn:first-child a {
  background: var(--ap-blue-btn);
  box-shadow: 0 4px 14px rgba(70, 148, 188, 0.3);
}

/* 本体テーマ（common.css 934〜958行）は「1つ目のボタン＝電話番号」を前提に、
   li:first-child へ font-size:2.8rem と受話器アイコンを当てている。
   このLPは1つ目が無料診断なので、そのままだと
     ・14文字が28pxで表示され、幅380pxの枠から溢れて2行目が枠外に落ちる
       （height:60px / line-height:60px の固定なので枠は伸びない）
     ・リンク先は診断なのに受話器アイコンが付く
   の2つが起きる。テーマ本体は他ページも使うので触らず、このLPだけ打ち消す。 */
.ai-lp .foot-contact ul li:first-child a { font-size: 1.8rem; }
.ai-lp .foot-contact ul li:first-child a span::before { display: none; }

/* 診断を挟まず直接連絡したい人向けの導線（2026-08-17）。
   主CTAと張り合わせないよう、ボタンではなくテキストリンクで置く。 */
.foot-contact__direct {
  color: #fff;
  font-size: 1.4rem;
  line-height: 2;
  margin-top: 26px;
  text-align: center;
}
.foot-contact__direct a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foot-contact__direct a:hover { opacity: .75; }
.foot-contact__sep { margin: 0 .8em; opacity: .5; }
@media screen and (max-width: 767px) {
  .foot-contact__direct { font-size: 1.3rem; margin-top: 22px; }
  /* SPは電話とメールを縦に積む。区切りの「／」は行間に浮くので隠す */
  .foot-contact__sep { display: block; height: 0; margin: 0; overflow: hidden; }
}

/* 受話器アイコンは、実際に tel: へ飛ぶボタンに付け直す。
   画像URLを絶対で書いているのは、このCSSがテーマ配下（assets/css/）と
   検証用のプレビュー配下の両方から読まれるため。相対だと片方で404になる。 */
.ai-lp .foot-contact ul li a[href^="tel:"] span::before {
  background: url(https://archivect.com/wp/wp-content/themes/blankslate/assets/images/common/icon_tel.svg) no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 22px;
  margin-right: 10px;
  position: relative;
  top: 4px;
  width: 22px;
}
@media screen and (max-width: 767px) {
  /* SPでは本体テーマが160pxの円にする。アイコンは文字の上に置く（本体と同じ形） */
  .ai-lp .foot-contact ul li a[href^="tel:"] span::before {
    display: block;
    margin: 0 auto;
    top: 2px;
  }
}

/* ============================================================
   11. SPスティッキーCTA
   ============================================================ */
.ap-sticky-cta {
  background: rgba(255, 255, 255, 0.94);
  bottom: 0;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
  display: none;
  left: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: 0;
  transform: translateY(110%);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 200;
}
.ap-sticky-cta.is-visible { transform: translateY(0); }
.ap-sticky-cta a {
  background: var(--ap-blue-btn);
  border-radius: 40px;
  color: #fff;
  display: block;
  font-size: 1.6rem;
  line-height: 48px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ap-sticky-cta { display: block; }
}

/* ============================================================
   11-2. ページトップボタン
   本体テーマは jQuery で出し入れしているが、このページは jQuery を読み込まない。
   同じ見た目のまま、.show の有無で制御する（main.js が付け外しする）。
   ============================================================ */
#pagetop {
  opacity: 0;
  transition: opacity 300ms ease, visibility 300ms ease;
  visibility: hidden;
}
#pagetop.show {
  opacity: 1;
  visibility: visible;
}
/* SPではスティッキーCTAと重なるため、その分だけ上に逃がす */
@media screen and (max-width: 767px) {
  #pagetop { bottom: 82px; }
}

/* ============================================================
   12. アクセシビリティ・動きの抑制
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--ap-blue);
  outline-offset: 2px;
}
[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   13. 印刷
   ============================================================ */
@media print {
  #header, #pagetop, .ap-sticky-cta, .head .sub-nav { display: none; }
}

/* ============================================================
   14. 追加パーツ（2026-07-31 デザイン整理）

   ■ 方針：箱を減らし、情報の性質で見せ方を3段階に分ける
     レベル1「押させる」  … 地色ボックス＋ボタン（CTAだけ）
     レベル2「選ばせる」  … 薄い地色の行（推奨プランだけ）
     レベル3「読ませる」  … 罫線 or 左アクセント線（一覧・注記・引用）
     レベル4「地の文」    … 装飾なし（本文）

   ■ 幅の実測（ここを外すと破綻する）
     section:960px → .contents > .inner:width 90% ＝ 実測 864px
     864pxに4カラムは成立しない（1枚206px）。料金は「行」に組み替える。
   ============================================================ */

/* ------------------------------------------------------------
   14-1. ボタン
   ------------------------------------------------------------ */
.ap-btn {
  border-radius: 999px;
  display: inline-block;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 260px;
  padding: 15px 32px;
  text-align: center;
  transition: opacity 200ms ease, transform 200ms ease;
}
.ap-btn:hover { opacity: .85; transform: translateY(-1px); }
.ap-btn--primary {
  background: var(--ap-blue-btn);
  box-shadow: 0 4px 14px rgba(70, 148, 188, 0.25);
  color: #fff;
}
.ap-btn--secondary {
  background: #fff;
  border: 1px solid var(--ap-blue-btn);
  color: var(--ap-blue-btn);
}

/* ------------------------------------------------------------
   14-2. ヒーロー直下CTA
   ------------------------------------------------------------ */
.head-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 36px auto 0;
}
.head-cta__note {
  color: var(--ap-ink-mute);
  font-size: 1.3rem;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}

/* ------------------------------------------------------------
   14-3. 強調の共通パターン（左アクセント線）
   引用・注記・要点の3か所で同じ形を使い回す。
   ここで形を統一しておくと、箱を足さずに強弱がつけられる。
   ------------------------------------------------------------ */
.promise__lead,
.price-limit,
.voice {
  background: transparent;
  border-left: 3px solid rgba(70, 148, 188, 0.45);
  border-radius: 0;
  padding: 2px 0 2px 22px;
}
@media screen and (max-width: 767px) {
  .promise__lead,
  .price-limit,
  .voice { padding-left: 16px; }
}

/* ------------------------------------------------------------
   14-4. 自社導入（PROMISE）
   ページで最も重要な段落。売れない理由は価格ではなく事例不足なので、
   ここが唯一の答えになる。しかも自社の実話なので他社が真似できない。

   ■ 考え方：文言は1文字も変えられない。だから「組み方」で差をつける。
     地の文で並んでいたものを、情報の性質ごとに型へ割り当てる。
       ① 規模          … リード（字を上げ、数字だけ抜く）
       ② 詰まっていた話 … 地の文のまま（レベル4）
       ③ 転換の一文    … 見出し書体。下の対比表の実質的な見出しになる
       ④ これまで／いま … 横並びの対比表（罫線のみ）＝このセクションの中心
       ⑤ 4つのAI       … 印を付けた横一列（罫線も箱もなし）
       ⑥ 成果の数字    … 左アクセント線の最強版（ページ唯一の特大数字）
       ⑦ 結論          … 見出し書体＋大きな余白（締め）
     いずれも §14 の4階層のうち「レベル3＝読ませる（罫線／左線）」と
     「レベル4＝地の文」の中で解いている。箱は1つも足していない。

   ■ #usecase の .ba（白いカード）を流用しない理由
     .ba は「白い角丸カード・縦積み・下向き矢印」。同じ形にすると
     "業務改善の例のひとつ" に見え、自社の実話という唯一の強みが消える。
     こちらは「地の上に罫線だけ・横並び・右向き矢印」で組み、
     5対を一度に見渡せる表にする。DNAを意図的に分けている。

   ■ 書体の3拍子
     M PLUS Rounded（見出し書体）を使うのは ①導入 / ③転換 / ⑦結論 の3か所だけ。
     弊社が自分の言葉で語る節目を、この書体で揃えている。

   ■ テーマ側の打ち消し
     - main#main.service .contents .inner（max-width:1100px）に勝つ詳細度が要る
     - .contents .txt { margin-bottom:1em } を切って、縦の間隔を明示的に組む
     - リセットCSSが strong に font:inherit を当てているため太字が効かない
   ------------------------------------------------------------ */
main#main.service .contents.promise .inner { max-width: 760px; }

/* 縦の間隔は「型」ごとに明示する。1em の自動マージンには任せない */
.promise .txt { margin-bottom: 0; }
.promise strong { font-weight: 700; }

/* ---- ① 規模 ------------------------------------------------ */
.promise__lede {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  line-height: 1.9;
  margin-top: 24px;
}
/* 本文と同じ大きさで組む。ここは会社の説明であって、このセクションの
   肝（＝自分たちも同じところで詰まっていた話）ではないため、
   文字を大きくして目立たせない・2026-08-03 */
main#main.service .contents.promise .promise__lede {
  font-size: 1.6rem;
  text-align: left;
}
.promise__lede .num {
  color: var(--ap-blue-ink);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0 2px;
}
.promise__lede .unit {
  color: var(--ap-blue-ink);
  font-size: 1.6rem;
}

/* ---- ② 詰まっていた話（地の文） ------------------------------ */
.promise__issue { margin-top: 28px; }
.promise__issue + .promise__issue { margin-top: 20px; }

/* ---- ③ 転換の一文 ------------------------------------------- */
.promise__hinge {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 40px;
}
main#main.service .contents.promise .promise__hinge {
  font-size: 1.8rem;
  text-align: left;
}

/* ---- ④ これまで／いま の対比表 ------------------------------- */
/* 「表」として読ませる。ただし箱（地色パネル）は作らない。
   §14-3 の4階層のうち、ここは【罫線＝読ませる】の層に属する。
   薄い地色は "推奨プラン行"（＝選ばせる層）が使っている語彙なので、
   行の交互地色（ゼブラ）はここでは使わない。使うと2つの層が同じ見え方になる。
   表らしさは 罫線の強弱・見出し行・列の縦罫・行の上下中央揃え で出す。

   ■ 罫線の強弱（弱→強）。この順序が「どこが見出しか」を語る
     行の区切り  rgba(39,96,125,.28) 1px
     列の縦罫    rgba(39,96,125,.28) 1px（見出しから最終行まで通す）
     表の上下端  rgba(39,96,125,.40) 1px
     見出しの下  rgba(39,96,125,.55) 2px  ← 表の中で一番強い＝ここが列見出し
     ※ 色は --ap-blue-ink(#27607D) 系。地色 #CBE2F5 の上では
       --ap-blue(#4694BC) 系の細線はほぼ消える（旧版がその状態だった）。

   ■ 将来の画面キャプチャ
     <tbody> 1つ＝1対。同じ <tbody> の中に .promise__ba-shot 行（colspan="2"）を
     足すと、その対の直下に画像が入る。行の区切り線は「tbody の最終行」に
     引いてあるので、画像を足すと線が自動で画像の下へ移動する。
   ------------------------------------------------------------ */
.promise__ba {
  border-bottom: 1px solid rgba(39, 96, 125, 0.40);
  border-collapse: collapse;
  border-top: 1px solid rgba(39, 96, 125, 0.40);
  margin-top: 20px;
  table-layout: fixed;
  width: 100%;
}
/* 列幅は colgroup で1か所にまとめる。
   「これまで」側の文が長く2行になる／「いま」側は1行で収まる配分にしてある */
.promise__ba-col--before { width: 45%; }
.promise__ba-col--after { width: 55%; }

/* 見出し行：列名を明示する。ここだけ2px＝表の中で一番強い罫線を持たせる */
.promise__ba thead th {
  border-bottom: 2px solid rgba(39, 96, 125, 0.55);
  color: var(--ap-ink);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 12px 18px 10px 0;
  text-align: left;
  vertical-align: bottom;
}
.promise__ba thead th + th {
  border-left: 1px solid rgba(39, 96, 125, 0.28);
  color: var(--ap-blue-ink);
  padding-left: 30px;
}

/* 本文行：1行＝1対。上下中央で揃え、左右を1つのまとまりとして読ませる。
   text-wrap:balance ＝ 2行に割れた時に「最後の行が3〜4文字だけ残る」のを防ぐ。
   表はセルの塊が揃って見えることが読みやすさなので、行末のガタつきを均す。
   （非対応ブラウザでは従来どおりの折り返しになるだけで壊れない） */
.promise__ba td {
  color: var(--ap-ink);
  font-size: 1.5rem;
  line-break: strict;
  line-height: 1.7;
  padding: 16px 18px 16px 0;
  text-wrap: balance;
  vertical-align: middle;
}
/* 折り返し禁止の語。balance は語の意味を見ないので「1件ず／つ」のように
   語の途中で割れることがある。⑥の .fig（200万円）と同じ考え方で、
   文言は一切変えずに「折れてはいけない場所」だけを指定する */
.promise__ba .nb { white-space: nowrap; }
.promise__ba td + td {
  border-left: 1px solid rgba(39, 96, 125, 0.28);
  color: var(--ap-blue-ink);
  font-weight: 600;
  padding-left: 30px;
  padding-right: 0;
  position: relative;
}
/* 行の区切りは <tbody>（＝1対）の最終行に引く。画像行を足すと線が自動で下がる */
.promise__ba tbody > tr:last-child > td {
  border-bottom: 1px solid rgba(39, 96, 125, 0.28);
}
/* 最終行は table 自身の下端罫線に任せる（同じ位置で2本描かない） */
.promise__ba tbody:last-child > tr:last-child > td { border-bottom: 0; }

/* 右向きの小さな三角。#usecase の .ba__arrow（下向き）と同じ作図で向きだけ変える。
   縦罫のすぐ右・行の上下中央に固定して、5個で1本の「矢印の列」に見せる */
.promise__ba td + td::before {
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--ap-blue-deep);
  border-top: 5px solid transparent;
  content: "";
  height: 0;
  left: 11px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

/* 画面キャプチャ行（後日差し込む）。2列ぶち抜きで表の幅いっぱいに置く。
   画像は「箱」ではなく証拠なので、地色パネルには入れず細い枠だけ与える */
.promise__ba .promise__ba-shot > td {
  padding: 2px 0 20px;
  vertical-align: top;
}
.promise__shot { margin: 0; }
.promise__shot img {
  background: #fff;
  border: 1px solid rgba(39, 96, 125, 0.30);
  border-radius: 8px;
  display: block;
  height: auto;
  width: 100%;
}
.promise__shot figcaption {
  color: var(--ap-ink-mute);
  font-size: 1.3rem;
  line-height: 1.6;
  margin-top: 8px;
}

/* ---- ⑤ 4つのAI --------------------------------------------- */
/* 上の対比表が罫線を持つので、こちらは罫線なし。印と整列だけで列挙を示す */
.promise__roles-lead { margin-top: 40px; }
.promise__roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0 0;
}
.promise__roles li {
  color: var(--ap-ink);
  font-size: 1.5rem;
  line-height: 1.6;
  padding: 4px 8px 4px 18px;
  position: relative;
}
.promise__roles li::before {
  background: var(--ap-blue-deep);
  border-radius: 2px;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  top: 0.72em;
  width: 8px;
}
.promise__roles-note { margin-top: 22px; }

/* ---- ⑥ 成果の数字 ------------------------------------------- */
/* §14-3 の共通形（3px・45%）を、ここだけ最強版に上書きする。
   別の階層を作るのではなく、同じ「左アクセント線」の一番強い状態。 */
.promise__lead {
  border-left: 4px solid var(--ap-blue-ink);
  margin: 40px 0 0;
  padding: 4px 0 4px 26px;
}
/* 前置き：事務が半分／制作コストも下がった。太字どまりにして、
   特大の数字（200万円）と役割を食い合わせない */
main#main.service .contents.promise .promise__figure-lead {
  font-size: 1.7rem;
  text-align: left;
}
.promise__figure-lead {
  color: var(--ap-ink);
  line-height: 1.95;
}
main#main.service .contents.promise .promise__figure {
  font-size: 1.8rem;
  text-align: left;
}
.promise__figure {
  color: var(--ap-ink);
  line-height: 2.05;
  margin-top: 14px;
}
/* 初年度110万円という価格への答え。ページで一番大きい文字はここだけ。
   ※ 数字と単位は必ず同じ行に置く。SPで「200万／円」と割れるのを防ぐ */
.promise__figure .fig { white-space: nowrap; }
.promise__figure .num {
  color: var(--ap-blue-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 4.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0 2px;
}
.promise__figure .unit {
  color: var(--ap-blue-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
}
main#main.service .contents.promise .promise__figure-note {
  font-size: 1.5rem;
  text-align: left;
}
.promise__figure-note {
  color: var(--ap-ink);
  margin-top: 12px;
}

/* ---- ⑤ 結論 ------------------------------------------------- */
/* 罫線は足さない。青も使わない。書体と余白だけで締める */
.promise__closing {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 46px;
}
main#main.service .contents.promise .promise__closing {
  font-size: 2rem;
  text-align: left;
}
.promise__closing strong { font-weight: 500; }
.promise__closing-body { margin-top: 14px; }

/* タブレット（〜1023px）
   ※ メディアクエリは詳細度を上げない。必ず上の定義より「後」に置くこと */
@media screen and (max-width: 1023px) {
  main#main.service .contents.promise .promise__lede { font-size: 1.5rem; }
  .promise__lede .num { font-size: 1.9rem; }
  .promise__lede .unit { font-size: 1.4rem; }

  main#main.service .contents.promise .promise__hinge { font-size: 1.65rem; }
  /* ※ 見出しは base が .promise__ba thead th（0,1,2）なので同じ形で書く。
     .promise__ba th では詳細度が足りず打ち消せない */
  .promise__ba thead th { font-size: 1.3rem; letter-spacing: 0.1em; }
  .promise__ba thead th + th { padding-left: 26px; }
  .promise__ba td { font-size: 1.4rem; padding-right: 14px; }
  .promise__ba td + td { padding-left: 26px; padding-right: 0; }
  .promise__ba td + td::before { left: 9px; }
  .promise__roles li { font-size: 1.4rem; padding: 4px 6px 4px 16px; }

  main#main.service .contents.promise .promise__figure-lead { font-size: 1.5rem; }
  main#main.service .contents.promise .promise__figure { font-size: 1.6rem; }
  .promise__figure .num { font-size: 3.6rem; }
  .promise__figure .unit { font-size: 1.4rem; }
  main#main.service .contents.promise .promise__figure-note { font-size: 1.4rem; }

  main#main.service .contents.promise .promise__closing { font-size: 1.8rem; }
}

/* ------------------------------------------------------------
   14-5. ①か②か（カテゴリ比較）
   箱で対比させると2つとも重くなる。罫線の色だけで差をつける。
   ------------------------------------------------------------ */
/* 2026-08-14 全面的に組み直し。
   旧版は「上罫線だけ・箱なし」で、①と②の差が罫線の色だけだった。
   このセクションはLPで唯一「弊社がどちらの会社か」を決める場所なので、
   ②が選ばれている側だと一目で分かる強さが要る。カード化して、
   ②だけ枠線・影・バッジを強くする。 */
.cat-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px 0 28px;
}
.cat-card {
  background: #fff;
  border: 1px solid #e7ecf1;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(39, 96, 125, .06);
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  position: relative;
}
/* 弊社側。枠を青2pxにし、影も一段強くして前に出す */
.cat-card--ours {
  border: 2px solid var(--ap-blue-btn);
  box-shadow: 0 4px 24px rgba(69, 148, 188, .16);
  padding: 25px 25px 23px; /* 枠が1px太い分を内側で吸収し、左右の高さを揃える */
}

/* --- 見出しブロック（番号＋タイトル＋バッジ）--- */
.cat-card__head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.cat-card__no {
  color: #ccd4dc;
  font-family: "Space Mono", monospace;
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.cat-card--ours .cat-card__no { color: var(--ap-blue-btn); }
.cat-card__headin { padding-top: 1px; }
.cat-card__ttl {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.35;
}
.cat-card--ours .cat-card__ttl { color: var(--ap-blue-ink); }
/* バッジ。①は事実の注記なので淡いグレー、②は選択肢の提示なので青ベタ */
.cat-card__badge {
  background: #eef1f4;
  border-radius: 999px;
  color: var(--ap-ink-mute);
  display: inline-block;
  font-size: 1.2rem;
  margin-top: 8px;
  padding: 4px 12px;
}
.cat-card--ours .cat-card__badge {
  background: var(--ap-blue-btn);
  color: #fff;
  font-weight: 700;
}

/* --- チェックリスト --- */
.cat-card__list {
  border-top: 1px solid #e7ecf1;
  font-size: 1.38rem;
  line-height: 1.65;
  list-style: none;
  margin-bottom: 16px;
  padding-top: 16px;
}
.cat-card--ours .cat-card__list { border-top-color: rgba(69, 148, 188, .28); }
.cat-card__list li {
  padding-left: 27px;
  position: relative;
}
.cat-card__list li + li { margin-top: 7px; }
/* チェックは円の中に白いレ点。フォントの ✓ は書体で形が変わるためSVGで描く。
   2026-08-14 作り直し：旧版はレ点が円径の68%あって縁ぎりぎりまで届き、線も太くて
   潰れて見えていた。字形を円の55%に収め、線幅も落として余白を作る。
   ①側の地色 #c3ccd5 は白のレ点とのコントラストが足りずぼやけていたので一段濃くする。 */
.cat-card__list li::before {
  background: #a6b2bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 12.4l3.7 3.7 7.1-7.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 0;
  position: absolute;
  top: .24em;
  width: 18px;
}
.cat-card--ours .cat-card__list li::before { background-color: var(--ap-blue-btn); }

/* --- 補足ボックス。カード下端に揃える --- */
.cat-card__note {
  background: #f4f6f8;
  border-radius: 12px;
  color: var(--ap-ink-mute);
  font-size: 1.2rem;
  /* テーマの本文字送りのままだと1行20字が入りきらず、
     「〜範囲で／す。」と句点だけが次行に落ちる。ここだけ字送りを詰める */
  letter-spacing: 0;
  line-break: strict;
  line-height: 1.8;
  margin-top: auto;
  padding: 13px 15px 13px 38px;
  position: relative;
  text-wrap: pretty;
}
.cat-card--ours .cat-card__note {
  background: rgba(69, 148, 188, .08);
  color: var(--ap-blue-ink);
}
/* ⓘ。2026-08-14 作り直し：旧版は「i」を線で描き、字形が円径の94%あったため
   太い縦棒に点がくっついた塊にしか見えなかった（! に近い形）。
   点と縦棒を塗りで描き分け、円の中に55%で置いて余白を作る。 */
.cat-card__note::before {
  background: #a6b2bd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='1.9' fill='%23fff'/%3E%3Crect x='10.4' y='10' width='3.2' height='8.4' rx='1.6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
  border-radius: 50%;
  content: "";
  height: 17px;
  left: 15px;
  position: absolute;
  top: 13px;
  width: 17px;
}
.cat-card--ours .cat-card__note::before { background-color: var(--ap-blue-btn); }

/* ------------------------------------------------------------
   ①②を受けての結論ブロック
   ------------------------------------------------------------ */
/* セクション冒頭のリード。テーマの .txt は左揃え（1023px以下は両端揃え）なので
   ここだけ中央に寄せ、幅も絞って2行で収める */
.cat-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}
main#main.service .contents .cat-lead { text-align: center; }

.cat-verdict {
  align-items: center;
  background: #fff;
  border: 1px solid #e7ecf1;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(39, 96, 125, .06);
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 24px;
  padding: 32px 36px;
  position: relative;
}
/* 左右の境目。中央の丸に重ならないよう上下を空ける */
.cat-verdict::before {
  background: #e7ecf1;
  bottom: 32px;
  content: "";
  left: calc(50% - .5px);
  position: absolute;
  top: 32px;
  width: 1px;
}
/* 2026-08-14 境目に置いていた丸い「›」を削除。
   理由1: すぐ上のイラストで矢印は「これがこう変わる／こちらへ移る」の意味で使っている。
          同じ画面で同じ記号を別の意味（譲歩→主張）に使うと、前者で読まれてしまう。
   理由2: 丸い「›」はこのLPではCTAボタンの印。押せないのに押せそうに見える。
   左右は順序ではなく対比（接続は「でも」＝逆接）。矢印は「AがBになる」と言ってしまう。
   読み順は日本語の横書きが保証するので、縦罫線だけでよい。 */
.cat-verdict__quote {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.95rem;
  font-weight: 500;
  line-break: strict;
  line-height: 1.6;
  margin: 0;
  padding-left: 34px;
  position: relative;
  text-wrap: balance;
}
.cat-verdict__quote strong {
  color: var(--ap-blue-ink);
  font-weight: 700;
}
/* 引用符。文字として置くと書体で位置が動くので装飾扱いで固定 */
.cat-verdict__quote::before {
  color: rgba(69, 148, 188, .3);
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 5.6rem;
  left: -3px;
  line-height: 1;
  position: absolute;
  top: -8px;
}
.cat-verdict__body {
  color: var(--ap-ink);
  font-size: 1.38rem;
  letter-spacing: .01em;
  line-break: strict;   /* 「なら、」を「な／ら、」で割らせない */
  line-height: 1.85;
  text-wrap: pretty;    /* 行末に句点だけ残すのを避ける */
}
.cat-verdict__body strong {
  color: var(--ap-blue-ink);
  font-size: 1.6rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   このセクション専用のCTA（帯）
   ページ内の他3か所は淡い水色の箱(.mid-cta)。ここだけベタ帯にしているのは
   「①②どちらか分からない人に聞いてもらう」という別の申し出だから。
   ------------------------------------------------------------ */
.cat-cta {
  align-items: center;
  background: linear-gradient(100deg, #3E86AE 0%, var(--ap-blue-btn) 55%, #5AA6C9 100%);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(69, 148, 188, .22);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 22px 28px;
}
.cat-cta__ttl {
  color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.cat-cta__lead {
  color: rgba(255, 255, 255, .92);
  font-size: 1.32rem;
  line-height: 1.65;
  margin-top: 5px;
}
.cat-cta__btn {
  background: #fff;
  border-radius: 999px;
  color: var(--ap-blue-ink);
  flex-shrink: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 14px 46px 14px 26px;
  position: relative;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-cta__btn::after {
  border-right: 2px solid var(--ap-blue-btn);
  border-top: 2px solid var(--ap-blue-btn);
  content: "";
  height: 8px;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
}
.cat-cta__btn:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}

/* セクション見出しの上に置く英字ラベル */
.section-en {
  color: var(--ap-blue-btn);
  font-family: "Space Mono", monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 10px;
  text-align: center;
}
.section-en::before,
.section-en::after {
  content: "—";
  margin: 0 .6em;
  opacity: .6;
}

/* ------------------------------------------------------------
   14-6. 料金 ─ 4階層を「カード4枚」から「表（行）」へ
   ・864pxを横に使い切れる。1枚206pxの窮屈さが解消する
   ・4枚×388px＝縦1552px → 行組みで約半分になる
   ・価格の桁が縦に揃うので比較しやすい（tabular-nums）
   ------------------------------------------------------------ */
.plan-grid {
  border-top: 1px solid var(--ap-line);
  display: block;
  margin: 44px 0 44px;
}
.plan-card {
  align-items: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ap-line);
  border-radius: 0;
  box-shadow: none;
  column-gap: 28px;
  display: grid;
  grid-template-columns: 190px 200px minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding: 26px 8px;
  position: relative;
}
/* 推奨プランは「行ごと」薄い地色。枠線もシャドウも足さない */
.plan-card--rec {
  background: var(--ap-card-soft);
  border-radius: var(--ap-radius) var(--ap-radius) 0 0;
  padding-left: 20px;
  padding-right: 20px;
}
.plan-card--ent { background: transparent; }

/* バッジは行の上罫線にまたがる小さなタブ */
.plan-card__badge {
  background: var(--ap-blue-btn);
  border-radius: 999px;
  color: #fff;
  font-size: 1.2rem;
  left: 20px;
  line-height: 1.6;
  padding: 3px 14px;
  position: absolute;
  top: -12px;
  transform: none;
  white-space: nowrap;
}

.plan-card__name {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.9rem;
  font-weight: 500;
  grid-column: 1;
  grid-row: 1;
  line-height: 1.35;
  text-align: left;
}
.plan-card__scope {
  color: var(--ap-ink-mute);
  font-size: 1.3rem;
  grid-column: 1;
  grid-row: 2;
  margin-top: 2px;
  text-align: left;
}
.plan-card__price {
  border-bottom: 0;
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  grid-column: 2;
  grid-row: 1;
  line-height: 1.2;
  margin: 0;
  padding-bottom: 0;
  text-align: left;
}
.plan-card__price .num {
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: .01em;
}
.plan-card__price .unit { font-size: 1.4rem; margin-left: 2px; }
.plan-card__price--ask {
  color: var(--ap-ink);
  font-size: 1.9rem;
  font-weight: 500;
}
.plan-card__monthly {
  color: var(--ap-ink-mute);
  font-size: 1.4rem;
  grid-column: 2;
  grid-row: 2;
  margin-top: 6px;
  text-align: left;
}
.plan-card__monthly .num {
  color: var(--ap-ink);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.plan-card__list {
  font-size: 1.4rem;
  grid-column: 3;
  grid-row: 1 / span 2;
  line-height: 1.85;
  list-style: none;
  margin-top: 2px;
}
.plan-card__list li { padding-left: 1.1em; position: relative; }
.plan-card__list li::before {
  color: var(--ap-blue-btn);
  content: "・";
  left: 0;
  position: absolute;
}

/* タブレット幅（〜1023px）
   ※ メディアクエリは詳細度を上げないので、必ず上の定義より「後」に置くこと。
     前に置くと打ち消される。
   「エンタープライズ」は8文字。列幅160pxに1行で収める必要がある。 */
@media screen and (max-width: 1023px) {
  .plan-card {
    column-gap: 20px;
    grid-template-columns: 160px 172px minmax(0, 1fr);
  }
  .plan-card__name { font-size: 1.7rem; }
  .plan-card__price .num { font-size: 2.2rem; }
  .plan-card__list { font-size: 1.3rem; }
}

/* ------------------------------------------------------------
   14-7. 料金の内訳（初期／月額に含まれるもの）
   箱をやめて、見出し＋罫線の2カラムに
   ------------------------------------------------------------ */
.price-detail {
  display: grid;
  gap: 24px 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}
.price-detail .price-card {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--ap-line);
  padding: 18px 0 0;
}
.price-detail .price-card__label {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.price-detail .price-card ul {
  border-top: 0;
  margin-top: 10px;
  padding-top: 0;
}
.price-detail .price-card li { font-size: 1.4rem; line-height: 1.9; }

/* ------------------------------------------------------------
   14-8. 社数・価格据え置きの注記
   ------------------------------------------------------------ */
/* 2026-08-14 ブロックごと中央に置く。
   inline-block + 親の text-align:center でも同じ結果になるが、親は .inner で
   料金表も見出しも入っているため、center が全部に効いてしまい、内側で left へ
   戻す打ち消しが要る。fit-content なら内容幅まで縮むので auto マージンだけで寄る。
   中の文字は左揃えのまま、左罫線もそのまま使える。 */
/* 事例の実画面（2026-08-14）。
   表そのものが横長なので、カード内ではなく一覧の下に全幅で置く。
   枠と影を付けて「ページの一部」ではなく「別のアプリの画面」だと分かるようにする。 */
.works-shot { margin: 32px 0 0; }
.works-shot img {
  border: 1px solid #dde4ea;
  border-radius: 10px;
  box-shadow: 0 3px 18px rgba(39, 96, 125, .1);
  display: block;
  height: auto;
  width: 100%;
}
.works-shot__cap {
  color: var(--ap-ink-mute);
  font-size: 1.25rem;
  line-height: 1.75;
  margin-top: 12px;
  text-align: center;
}

.price-limit {
  /* 2026-08-14 上下を 36px→64px に。料金表の直後に続けて置くと表の一部に見えるため、
     独立した条件書きとして読ませるぶんだけ離す。下の .mid-cta とはマージンが相殺する
     ので、56px より大きい値を入れないと下側は広がらない。 */
  margin: 64px auto;
  width: fit-content;
}

/* 事例一覧のリード。1文ずつ改行して中央に置く。
   ここは段落そのものを中央に揃えたいので text-align が正しい道具
   （.price-limit のようにブロックを寄せたい場合とは別）。 */
main#main.service .contents .works-lead { text-align: center; }
.price-limit__ttl {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.price-limit .txt + .txt { margin-top: 12px; }

/* ------------------------------------------------------------
   14-9. 中間CTA
   ページ内で唯一「地色の箱」を残す要素。ここだけが押す場所だと分かるように。
   ------------------------------------------------------------ */
.mid-cta {
  background: var(--ap-card-soft);
  border-radius: var(--ap-radius);
  margin: 56px auto 0;
  max-width: 720px;
  padding: 32px 28px;
  text-align: center;
}
.mid-cta__ttl {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 10px;
}
.mid-cta .txt { margin-bottom: 20px; }
.mid-cta .txt:last-of-type { margin-bottom: 22px; }
/* テーマ側 `section > .inner .txt` が 1023px以下で text-align:justify を当てるため、
   見出しだけ中央・本文だけ左揃えになっていた。詳細度で勝たせて中央に揃える。 */
main#main.service .contents .mid-cta .txt { text-align: center; }

/* ------------------------------------------------------------
   14-10. お客様の声
   ------------------------------------------------------------ */
.voice { margin: 28px 0 36px; }
.voice__body {
  color: var(--ap-ink);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.7rem;
  line-height: 1.85;
}
.voice__by {
  color: var(--ap-ink-mute);
  font-size: 1.4rem;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   14-11. スティッキーCTA（PC）
   ※ 修正：以前は非表示状態が translateY(16px) だけだったため、
     PCでは読み込み直後から出たままになっていた。
     PCは opacity + visibility で出し入れする。
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
  .ap-sticky-cta {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(69, 148, 188, 0.3);
    border-radius: 999px;
    bottom: 28px;
    box-shadow: 0 4px 18px rgba(15, 52, 80, 0.14);
    display: block;
    left: auto;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    right: 28px;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease, visibility 300ms ease;
    visibility: hidden;
    width: auto;
  }
  .ap-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .ap-sticky-cta a {
    font-size: 1.5rem;
    line-height: 1.6;
    padding: 13px 26px;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   14-12. スマートフォン（〜767px）
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .ap-btn {
    font-size: 1.5rem;
    min-width: 0;
    padding: 14px 24px;
    width: 100%;
  }
  .head-cta { gap: 10px; margin-top: 28px; }

  /* リード部の料金チップ：375pxで「初期費 用」のように途中で折り返していた。
     文字を詰めて1行に収める（※ §2 より後に書かないと打ち消される） */
  .price-lead dt { font-size: 1.3rem !important; white-space: nowrap; }
  .price-lead dd { font-size: 1.3rem; white-space: nowrap; }
  .price-lead .num { font-size: 2rem; }

  /* 自社導入（PROMISE）
     ※ §14-3 の共通形（SPで padding-left:16px）より後に書かないと打ち消される */
  main#main.service .contents.promise .promise__lede { font-size: 1.4rem; }
  .promise__lede { line-height: 2; margin-top: 20px; }
  .promise__lede .num { font-size: 1.8rem; }
  .promise__lede .unit { font-size: 1.3rem; }

  .promise__issue { margin-top: 22px; }
  .promise__issue + .promise__issue { margin-top: 16px; }

  main#main.service .contents.promise .promise__hinge { font-size: 1.55rem; }
  .promise__hinge { margin-top: 30px; }

  /* 対比表は SP でも2列のまま。縦積みにすると「対比」＝表の意味そのものが消える。
     そのかわり左右の余白（＝矢印の溝）を詰めて、文字が入る幅を最大化する */
  .promise__ba { margin-top: 16px; }
  .promise__ba-col--before { width: 46%; }
  .promise__ba-col--after { width: 54%; }
  .promise__ba thead th {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
    padding: 0 8px 8px 0;
  }
  .promise__ba thead th + th { padding-left: 18px; }
  .promise__ba td { font-size: 1.3rem; line-height: 1.7; padding: 12px 8px 12px 0; }
  .promise__ba td + td { padding-left: 18px; padding-right: 0; }
  .promise__ba td + td::before {
    border-bottom-width: 4px;
    border-left-width: 6px;
    border-top-width: 4px;
    left: 5px;
  }
  .promise__ba .promise__ba-shot > td { padding: 0 0 16px; }
  .promise__shot figcaption { font-size: 1.2rem; }

  .promise__roles-lead { margin-top: 30px; }
  .promise__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise__roles li { font-size: 1.3rem; padding: 5px 4px 5px 16px; }
  .promise__roles-note { margin-top: 18px; }

  .promise__lead { border-left-width: 3px; margin-top: 30px; padding-left: 18px; }
  main#main.service .contents.promise .promise__figure-lead { font-size: 1.4rem; }
  main#main.service .contents.promise .promise__figure { font-size: 1.5rem; }
  .promise__figure { line-height: 2.1; }
  .promise__figure .num { font-size: 3.2rem; }
  .promise__figure .unit { font-size: 1.3rem; }
  main#main.service .contents.promise .promise__figure-note { font-size: 1.3rem; }

  main#main.service .contents.promise .promise__closing { font-size: 1.65rem; }
  .promise__closing { margin-top: 34px; }

  .cat-grid { gap: 22px; grid-template-columns: minmax(0, 1fr); margin: 26px 0 24px; }
  .cat-card { padding-top: 18px; }
  .cat-card__ttl { font-size: 1.8rem; }

  /* 料金：行組みをやめて縦に積む。箱にはしない（罫線で区切るだけ） */
  .plan-grid { margin: 34px 0 32px; }
  .plan-card {
    column-gap: 0;
    display: block;
    padding: 22px 0;
  }
  .plan-card--rec {
    border-radius: var(--ap-radius);
    margin-bottom: 2px;
    padding: 26px 18px 22px;
  }
  .plan-card__badge {
    display: inline-block;
    left: auto;
    margin-bottom: 10px;
    position: static;
    top: auto;
  }
  .plan-card__name { font-size: 1.8rem; }
  .plan-card__scope { margin-top: 2px; }
  .plan-card__price { margin-top: 12px; }
  .plan-card__price .num { font-size: 2.2rem; }
  .plan-card__monthly { margin-top: 4px; }
  .plan-card__list { font-size: 1.3rem; margin-top: 12px; }

  .price-detail { gap: 22px; grid-template-columns: minmax(0, 1fr); }
  .price-detail .price-card li { font-size: 1.3rem; }

  .price-limit { margin-top: 28px; }
  .price-limit__ttl { font-size: 1.6rem; }

  .mid-cta { margin-top: 40px; padding: 26px 20px; }
  .mid-cta__ttl { font-size: 1.7rem; }

  .voice { margin: 22px 0 30px; }
  .voice__body { font-size: 1.6rem; }
}

/* ============================================================
   15. イラスト（2026-08-01 ポーラ🦋のSVGを組み込み）

   ■ 入れた場所は3か所だけ
     ① #usecase 冒頭   … 業務フローの Before/After（PC/SP の2枚を出し分け）
     ② #usecase 各見出し … 事例4件のアイコン
     ③ #category 各カード … ①②の対比イラスト2枚

   ■ #promise には入れない
     あそこには後日、実際に動いている画面のキャプチャが入る。
     「弊社が毎日使っている」ことの証拠になる場所なので、
     作図したイラストを混ぜると、証拠と説明図の区別がつかなくなる。

   ■ §14 の4階層（押させる／選ばせる／読ませる／地の文）は変えていない
     イラストは新しい階層ではなく、レベル3「読ませる」の中で
     文章を助ける図として置いている。だから地色パネルにも箱にも入れない。
     地色の箱は今も .mid-cta（＝押させる）だけが持っている。

   ■ すべて <img> で読む。理由：
     ・loading="lazy" と width/height が使えて、レイアウトシフトが出ない
     ・HTMLが太らず、画像としてブラウザキャッシュが効く
     ・テイラー🐎の変換スクリプトが "./assets/ を置換するので、パスがそのまま通る
     引き換えに SVG 内の <title>/<desc> は読み上げに使われなくなるので、
     必要な説明は HTML 側の alt に書き起こしてある。
     見出しの隣のアイコンだけは見出し文字と同義なので alt="" （装飾扱い）。
   ============================================================ */

/* ------------------------------------------------------------
   15-1. #usecase 冒頭の業務フロー図

   ・素材の実寸は PC 864×308 / SP 344×452。
     PCの 864px は .contents > .inner の実寸（960px の90%）とちょうど同じなので、
     1280px では等倍で出る＝図の中の文字が設計どおり 14px になる。
   ・aspect-ratio を明示しているのは <source> の width/height を
     見てくれないブラウザ（古い Safari 等）でも領域を先に確保するため。
   ------------------------------------------------------------ */
/* 下の余白は必ず要る。4つの事例カード（.usecase）は互いに margin 0 で
   ぴったり積まれているので、図にも余白が無いと「図＋1つ目のカード」が
   ひとかたまりに見えてしまう。図は総論、カードは各論なので、
   ここだけ間を空けて区切りを作る。 */
/* ------------------------------------------------------------
   結論図「これまで／これから」
   2026-08-03、2枚のSVG画像からHTML+CSSへ組み直した。

   余白は 8px の倍数で統一している（8 / 16 / 24 / 32 / 40）。
   このLPは他のカードが 20/22/24/26/34/48 とばらついており、
   並べたときに揃って見えない原因になっていた。ここは新規なので
   先に基準を通してある。共通部品として切り出すときの土台にする。
   ------------------------------------------------------------ */
.uc-flow {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  margin: 32px auto 0;
  max-width: 880px;
  padding: 20px;
}
/* 使える幅は実測864px。丸ラベルの列を欲張ると手順3列が各170px程度まで痩せ、
   「仕組みが受けて、整え／る」のように1文字だけ落ちる。ラベルは104pxに抑え、
   余った分を手順側へ回している（各約193px）。 */
.uc-flow__panel {
  align-items: center;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  display: grid;
  gap: 0 24px;
  grid-template-columns: 104px minmax(0, 1fr);
  padding: 28px 24px 28px 20px;
}
/* 「これまで」は白く沈ませ、「これから」は青で浮かせる。
   状態の違いを地色でも伝える（文字だけに頼らない） */
.uc-flow__panel--before { background: #fff; color: var(--ap-ink-mute); }
.uc-flow__panel--after  { background: rgba(69, 148, 188, 0.1); color: var(--ap-blue); }

/* 左端の丸ラベル。和文＋欧文の2段で、下に短い罫を引く */
.uc-flow__label {
  align-items: center;
  aspect-ratio: 1;
  background: #EDF1F4;
  border-radius: 50%;
  color: var(--ap-ink-mute);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  width: 100px;
}
.uc-flow__panel--after .uc-flow__label {
  background: rgba(69, 148, 188, 0.22);
  color: var(--ap-blue-ink);
}
.uc-flow__label-ja { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.uc-flow__label-en {
  font-family: "Space Mono", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-top: 8px;
}
.uc-flow__label-en::after {
  background: currentColor;
  content: "";
  display: block;
  height: 2px;
  margin: 8px auto 0;
  opacity: 0.45;
  width: 22px;
}

.uc-flow__steps {
  display: grid;
  gap: 0 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.uc-flow__step {
  padding-top: 6px;
  position: relative;
  text-align: center;
}
/* 手順の間の線と矢じり。枠と枠の間（gap 40px）の中に収める。
   「これまで」は点線、「これから」は実線。流れの確かさの差を線種でも出す。 */
.uc-flow__step + .uc-flow__step::before {
  border-top: 2px dotted currentColor;
  content: "";
  left: -27px;
  opacity: 0.45;
  position: absolute;
  top: 30px;
  width: 17px;
}
.uc-flow__panel--after .uc-flow__step + .uc-flow__step::before { border-top-style: solid; }
.uc-flow__step + .uc-flow__step::after {
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: "";
  height: 8px;
  left: -13px;
  opacity: 0.6;
  position: absolute;
  top: 26px;
  transform: rotate(45deg);
  width: 8px;
}

/* 番号は丸バッジでアイコンの左肩に重ねる */
.uc-flow__num {
  align-items: center;
  background: #9AA7B0;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-family: "Space Mono", monospace;
  font-size: 1.1rem;
  height: 26px;
  justify-content: center;
  left: calc(50% - 38px);
  letter-spacing: 0.04em;
  position: absolute;
  top: 0;
  width: 26px;
}
.uc-flow__panel--after .uc-flow__num { background: var(--ap-blue); }

.uc-flow__icon { display: block; margin-bottom: 16px; }
.uc-flow__icon svg { height: 48px; width: 48px; }

/* 締めの帯（「これから」の枠内） */
.uc-flow__summary {
  background: rgba(69, 148, 188, 0.18);
  border-radius: 10px;
  color: var(--ap-blue-ink);
  font-size: 1.45rem;
  font-weight: 700;
  grid-column: 1 / -1;
  line-break: strict;
  margin: 32px 0 0;
  padding: 14px 20px;
  text-align: center;
  text-wrap: balance;
}

.uc-flow__ttl {
  color: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 8px;
}
.uc-flow__desc {
  color: var(--ap-ink-mute);
  font-size: 1.35rem;
  line-break: strict;
  line-height: 1.8;
  margin: 0;
  text-wrap: balance;
}
.uc-flow__panel--after .uc-flow__desc { color: var(--ap-ink); }
/* 折り返し禁止の語。promise__ba と同じ扱い。
   balance は語の意味を見ないので、熟語や「〜だけが」のような助詞込みの塊は
   自分で守ってやる必要がある（「読み／取り」「判／断」「だけ／が」で割れる） */
.uc-flow__desc .nb,
.uc-flow__summary .nb { white-space: nowrap; }

/* 2つの枠の間の下向き矢印 */
.uc-flow__turn {
  height: 32px;
  margin: 0;
  position: relative;
}
.uc-flow__turn::before,
.uc-flow__turn::after {
  border-bottom: 2px solid var(--ap-blue);
  border-right: 2px solid var(--ap-blue);
  content: "";
  height: 9px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
}
.uc-flow__turn::before { top: 6px; opacity: 0.45; }
.uc-flow__turn::after  { top: 14px; }

/* ------------------------------------------------------------
   業務例のカード（4件）
   2026-08-03、左右交互の並びからカードのグリッドへ。
   余白は uc-flow と同じく 8px の倍数で通している。
   ------------------------------------------------------------ */
.uc-cards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.uc-card {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.uc-card__head { align-items: center; display: flex; gap: 16px; }
.uc-card__icon { color: var(--ap-blue); flex: 0 0 auto; }
.uc-card__icon svg { display: block; height: 44px; width: 44px; }
.uc-card__headings { min-width: 0; }
.uc-card__ttl {
  align-items: baseline;
  color: var(--ap-ink);
  display: flex;
  font-size: 1.8rem;
  font-weight: 700;
  gap: 10px;
  line-height: 1.4;
  margin: 0;
}
.uc-card__num {
  color: var(--ap-blue);
  font-family: "Space Mono", monospace;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}
.uc-card__en {
  color: var(--ap-ink-mute);
  font-family: "Space Mono", monospace;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  margin: 6px 0 0;
}
.uc-card__desc {
  color: var(--ap-ink);
  font-size: 1.45rem;
  line-height: 1.9;
  margin: 16px 0 0;
}

/* 下段：これまで3手順 → これから1つ。手順が減ることを形で見せる。
   左右を等分にすると、短い手順名（6〜10字）と長い結果文（40〜50字）が
   同じ幅を取り合って結果側が6行になる。左を狭め、右へ寄せている。
   margin-top:auto は、説明文の長さが違ってもカード下端で高さを揃えるため。 */
.uc-card__ba {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 0.86fr) 16px minmax(0, 1.14fr);
  margin-top: auto;
  padding-top: 24px;
}
.uc-ba { border-radius: 10px; padding: 14px 14px 16px; }
.uc-ba--before { background: #F2F5F7; }
.uc-ba--after  { background: rgba(69, 148, 188, 0.12); }
.uc-ba__label {
  background: #9AA7B0;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 12px;
  padding: 6px 12px;
}
.uc-ba--after .uc-ba__label { background: var(--ap-blue); }

.uc-ba__steps { list-style: none; margin: 0; padding: 0; }
.uc-ba__steps li {
  color: var(--ap-ink-mute);
  font-size: 1.25rem;
  line-break: strict;
  line-height: 1.6;
  position: relative;
  text-wrap: balance;
}
.uc-ba__steps li + li { margin-top: 18px; }
.uc-ba__steps li + li::before {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 6px;
  left: 4px;
  opacity: 0.5;
  position: absolute;
  top: -13px;
  transform: rotate(45deg);
  width: 6px;
}
.uc-ba__result {
  color: var(--ap-ink);
  font-size: 1.25rem;
  line-break: strict;
  line-height: 1.8;
  margin: 0;
  text-wrap: balance;
}
.uc-ba__result .nb,
.uc-ba__steps .nb { white-space: nowrap; }

.uc-card__turn {
  align-self: center;
  height: 16px;
  margin: 0;
  position: relative;
  width: 16px;
}
.uc-card__turn::before {
  border-right: 2px solid var(--ap-blue);
  border-top: 2px solid var(--ap-blue);
  content: "";
  height: 8px;
  left: 3px;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  width: 8px;
}

/* ------------------------------------------------------------
   15-2. 事例見出しのアイコン
   見出しと同じ青（--ap-blue）の線画なので、色は足していない。
   flex にしているのは、見出しが2行になっても字面の左端が揃うようにするため。
   ------------------------------------------------------------ */
.usecase-ttl {
  align-items: center;
  display: flex;
  gap: 12px;
}
.uc-icon {
  flex: none;
  height: 40px;
  width: 40px;
}

/* ------------------------------------------------------------
   15-3. #category ①②の対比イラスト
   素材の実寸 408px は PC のカード幅とほぼ同じ。等倍で収まる。
   置き場所（見出し・価格の直下）は index.html 側のコメント参照。
   ------------------------------------------------------------ */
.cat-card__fig { margin: 0 0 12px; }
.cat-card__fig img {
  aspect-ratio: 408 / 172;
  display: block;
  height: auto;
  max-width: 408px;
  width: 100%;
}

/* ------------------------------------------------------------
   15-4. スマートフォン（〜767px）
   ※ 上の base 定義より必ず後に置くこと（メディアクエリは詳細度を上げない）
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  /* SP版のフロー図は 344px で設計されている。ところが 375px 端末の .inner は
     304px しかない（375 → セクション90% → さらに .inner 90%）。
     そのまま入れると図の中の文字が 12px → 10.6px まで縮んで読めなくなる。
     図だけ .inner の外側＝セクションの左右いっぱいまで広げて、実寸に近づける。
     -5.55% は「.inner が親の90%」の裏返し（両側に残っている余白5%ぶん）。
     幅が広い端末では max-width:344px で止まるので、拡大はされない。 */
  /* SPは丸ラベルを上に出し、3手順を縦に積む。手順間の線と矢じりも縦向きに倒す */
  .uc-flow { margin: 24px auto; padding: 12px; }
  .uc-flow__panel {
    gap: 20px 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 16px;
  }
  .uc-flow__label { width: 96px; }
  .uc-flow__label-ja { font-size: 1.2rem; }
  .uc-flow__label-en { font-size: 1.3rem; margin-top: 6px; }
  .uc-flow__steps { gap: 32px 0; grid-template-columns: minmax(0, 1fr); }
  .uc-flow__step + .uc-flow__step::before {
    border-left: 2px dotted currentColor;
    border-top: 0;
    height: 18px;
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    width: 0;
  }
  .uc-flow__panel--after .uc-flow__step + .uc-flow__step::before {
    border-left-style: solid;
    border-top-style: none;
  }
  .uc-flow__step + .uc-flow__step::after {
    left: 50%;
    top: -12px;
    transform: translateX(-50%) rotate(135deg);
  }
  .uc-flow__num { left: calc(50% - 40px); }
  .uc-flow__icon { margin-bottom: 12px; }
  .uc-flow__ttl { font-size: 1.5rem; }
  .uc-flow__desc { font-size: 1.3rem; }
  .uc-flow__summary { font-size: 1.35rem; margin-top: 24px; padding: 12px 16px; }

  /* カードは1列。これまで／これからも縦に積み、間の矢印を下向きに倒す */
  .uc-cards { gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .uc-card { padding: 20px 16px; }
  .uc-card__icon svg { height: 40px; width: 40px; }
  .uc-card__ttl { font-size: 1.6rem; }
  .uc-card__num { font-size: 1.7rem; }
  .uc-card__desc { font-size: 1.35rem; margin-top: 14px; }
  .uc-card__ba { gap: 6px; grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .uc-card__turn { justify-self: center; }
  .uc-card__turn::before { left: 4px; top: 2px; transform: rotate(135deg); }
  .uc-ba__steps li, .uc-ba__result { font-size: 1.3rem; }

  /* 見出しはSPで中央揃え（§4）。flex なので justify-content で揃える */
  .usecase-ttl {
    gap: 10px;
    justify-content: center;
  }
  .uc-icon { height: 34px; width: 34px; }

  .cat-card__fig { margin: 2px 0 14px; }

  .works-shot { margin-top: 24px; }
  .works-shot__cap { font-size: 1.15rem; text-align: left; }

  /* --- #category（2026-08-14 組み直し分）のSP --- */
  .cat-grid {
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 28px 0 24px;
  }
  .cat-card { border-radius: 14px; padding: 24px 20px 22px; }
  .cat-card--ours { padding: 23px 19px 21px; }
  .cat-card__head { gap: 12px; margin-bottom: 18px; }
  .cat-card__no { font-size: 3.4rem; }
  .cat-card__ttl { font-size: 2rem; }
  .cat-card__list { font-size: 1.4rem; padding-top: 16px; }
  .cat-card__note { padding: 14px 16px 14px 42px; }
  .cat-card__note::before { left: 16px; top: 15px; }

  /* 結論ブロックは縦積み。縦線は消し、引用の下に横線で区切る */
  .cat-verdict {
    border-radius: 14px;
    gap: 20px;
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }
  /* PCの縦罫線はブロック中央に絶対配置しているが、SPは縦積みなので位置が合わない。
     SPでは止めて、区切りを本文側の上境界として持たせ直す。 */
  .cat-verdict::before { content: none; }
  .cat-verdict__body {
    border-top: 1px solid #e7ecf1;
    padding-top: 22px;
  }
  .cat-verdict__quote {
    font-size: 1.9rem;
    padding-left: 32px;
  }
  .cat-verdict__quote::before { font-size: 5.4rem; top: -8px; }
  .cat-verdict__body { font-size: 1.4rem; line-height: 1.9; }
  .cat-verdict__body strong { font-size: 1.6rem; }

  /* CTA帯は縦積み。ボタンは幅いっぱいで押しやすくする */
  .cat-cta {
    border-radius: 14px;
    flex-direction: column;
    gap: 18px;
    padding: 24px 20px;
    text-align: center;
  }
  .cat-cta__ttl { font-size: 1.7rem; }
  .cat-cta__btn {
    display: block;
    padding: 15px 44px 15px 22px;
    width: 100%;
  }
  .cat-cta__btn::after { right: 22px; }

  .section-en { font-size: 1.15rem; letter-spacing: .14em; }
}

/* ------------------------------------------------------------
   15. LPリサーチ反映分（2026-08-02 テイラー追記）
   FVリスク除去3点＋相場比較表。
   罫線の序列・地色の使い方はジョニーの4階層設計に合わせる：
   罫線＝読ませる層／地色＝選ばせる層（自社の行のみ）。
   ------------------------------------------------------------ */
.fv-promise {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  justify-content: center;
  list-style: none;
  margin: 10px auto 0;
  width: 100%;
}
.fv-promise li {
  color: var(--ap-ink);
  font-size: 1.3rem;
  padding: 0 14px;
  position: relative;
  white-space: nowrap;
}
.fv-promise li + li::before {
  background: rgba(39, 96, 125, 0.4);
  content: "";
  height: 12px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

.market { margin-top: 44px; }
.market__ttl {
  color: var(--ap-blue);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.market__table {
  border-collapse: collapse;
  border-top: 1px solid rgba(39, 96, 125, 0.4);
  border-bottom: 1px solid rgba(39, 96, 125, 0.4);
  margin: 18px 0 8px;
  width: 100%;
}
.market__table td {
  border-top: 1px solid rgba(39, 96, 125, 0.28);
  font-size: 1.4rem;
  line-height: 1.7;
  padding: 12px 14px;
  vertical-align: middle;
}
.market__table tr:first-child td { border-top: none; }
.market__table td:last-child {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  width: 15em;
}
.market__ours td {
  background: var(--ap-card-soft);
  color: var(--ap-ink);
  font-weight: 700;
}
.market__ours td:first-child { color: var(--ap-blue-ink); }
.market .txt { margin-top: 14px; }

@media screen and (max-width: 767px) {
  .fv-promise li { font-size: 1.15rem; padding: 0 10px; }
  .market__table td { display: block; padding: 4px 12px; }
  .market__table td:first-child { padding-top: 12px; }
  .market__table td:last-child { padding-bottom: 12px; text-align: left; width: auto; }
}

/* ==========================================================
   ヒーロー（ファーストビュー）
   ----------------------------------------------------------
   音響LP（/service/bridal/pa/ ＝ service.css の `.bridal-lp #mv`）と
   同じ型。サイト内でLPの見え方を揃えるため、寸法・余白はそちらに合わせ、
   配色だけ本LPのもの（--ap-blue-btn）にしている。

   背景は共通の bg_mv.png（青のグラデーション＋波）。実際にレンダリングして
   ピクセルを測ったところ地色が #6892AD で、白文字のコントラストは 3.3:1 しか
   なかった。見出し（50px 太字）は「大きい文字」扱いで 3:1 を満たすが、
   サブコピー 17px・価格 16px・注記 13px は WCAG AA（4.5:1）に届かない。
   そこで ::before で暗幕を 30% 敷き、6.1:1 まで引き上げている。
   （音響LPはスクリムなしだが、あちらは本文が大きく事情が違う）

   下層ページ共通の `#mv { height:360px }`（service.css）より詳細度が高いので
   打ち消せる。ai-partner.css は service.css の後に読ませること（header.php）。
   ========================================================== */
.ai-lp { padding-top: 0 !important; }

.ai-lp #mv {
  height: auto;
  min-height: 640px;
  padding: 100px 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: left;
  position: relative;
}
/* 文字を読ませるための暗幕。背景画像そのものは活かす */
.ai-lp #mv::before {
  background: rgba(23, 54, 74, 0.3);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.ai-lp #mv .mv-inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 40px;
  width: 100%;
}
.ai-lp #mv .mv-tag {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 32px;
  padding: 6px 16px;
}
.ai-lp #mv .main-ttl {
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: 5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
  margin-bottom: 28px;
  max-width: 820px;
  text-align: left;
}
.ai-lp #mv .sub-ttl {
  color: rgba(255, 255, 255, 0.95);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 28px;
  max-width: 760px;
}
.ai-lp #mv .sub-ttl strong { color: #fff; font-weight: 700; }

/* 価格をFV内に置く。B2Bでは早い段階で予算感が合うか判断できた方が良く、
   問い合わせ前の離脱理由も減る。 */
.ai-lp #mv .mv-price {
  border-left: 3px solid var(--ap-blue-btn);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 36px;
  padding-left: 16px;
}
/* 金額はh1と張り合わせない。情報として置くだけで、主役ではない。
   （2.4rem だとページを開いて2番目に目に入るのが金額になっていた） */
.ai-lp #mv .mv-price .num {
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}
.ai-lp #mv .mv-price__item { white-space: nowrap; }
.ai-lp #mv .mv-price__sep { margin: 0 0.6em; }

.ai-lp #mv .mv-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
.ai-lp #mv .mv-btn {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  line-height: 1.5;
  padding: 16px 30px;
  text-decoration: none;
  transition: transform 200ms, background 200ms, color 200ms;
}
.ai-lp #mv .mv-btn-primary {
  background: var(--ap-blue-btn);
  box-shadow: 0 4px 16px rgba(69, 148, 188, 0.4);
  color: #fff;
}
.ai-lp #mv .mv-btn-primary:hover {
  background: var(--ap-blue-ink);
  transform: translateY(-1px);
}
.ai-lp #mv .mv-btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.ai-lp #mv .mv-btn-outline:hover {
  background: #fff;
  color: var(--ap-blue-ink);
}
.ai-lp #mv .mv-note {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  margin: 18px 0 0;
}

/* ==========================================================
   目次（ヒーロー直下のページ内リンク）
   ----------------------------------------------------------
   下線付きのテキストリンクを横に並べていたが、ヒーローの直下に置くには
   弱く、そもそも押せるものに見えていなかった。丸いチップに変え、
   下向きの山形で「ページの下へ飛ぶ」ことが分かるようにしている。

   かつてこの上にリード文と3つの約束があったが、内容がヒーローと
   #price・#faq に重複していたため削除した（2026-08-03）。
   ========================================================== */
.ai-lp .head { margin: 56px auto 88px; }

.ai-lp .head .sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}
.ai-lp .head .sub-nav li { margin: 0; }
.ai-lp .head .sub-nav li a {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(69, 148, 188, 0.35);
  border-radius: 999px;
  color: var(--ap-blue-deep);
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 700;
  gap: 8px;
  line-height: 1;
  padding: 13px 24px;
  text-decoration: none;
  transition: background 200ms, border-color 200ms, color 200ms;
}
/* 下向きの山形 */
.ai-lp .head .sub-nav li a::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 6px;
  transform: translateY(-2px) rotate(45deg);
  width: 6px;
}
.ai-lp .head .sub-nav li a:hover {
  background: var(--ap-blue-btn);
  border-color: var(--ap-blue-btn);
  color: #fff;
}

/* #problem の締めの一文。課題を並べたあと、その先にある状態を1行で置く */
.ai-lp .problem__close {
  margin-top: 44px;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .ai-lp #mv { min-height: 560px; padding: 80px 0; }
  .ai-lp #mv .main-ttl { font-size: 3.4rem; }
  .ai-lp #mv .sub-ttl { font-size: 1.5rem; }
  .ai-lp #mv .mv-price { font-size: 1.5rem; }
  .ai-lp #mv .mv-price .num { font-size: 1.8rem; }
}
@media screen and (max-width: 767px) {
  .ai-lp #mv { min-height: 0; padding: 56px 0 60px; }
  .ai-lp #mv .mv-inner { padding: 0 20px; }
  .ai-lp #mv .mv-tag { font-size: 1.1rem; margin-bottom: 20px; }
  .ai-lp #mv .main-ttl { font-size: 2.6rem; line-height: 1.5; margin-bottom: 20px; }
  .ai-lp #mv .sub-ttl { font-size: 1.35rem; line-height: 1.9; margin-bottom: 22px; }
  .ai-lp #mv .mv-price { font-size: 1.35rem; margin-bottom: 26px; }
  .ai-lp #mv .mv-price .num { font-size: 1.6rem; }
  /* 「初期費用〜」「月額〜」を1行ずつに積む。区切りの「／」は不要になるので隠す */
  .ai-lp #mv .mv-price { display: flex; flex-direction: column; gap: 2px; }
  .ai-lp #mv .mv-price__sep { display: none; }
  /* スマホは縦積み。1本目（無料診断）を必ず親指の届く位置に置く */
  .ai-lp #mv .mv-ctas { flex-direction: column; gap: 10px; }
  .ai-lp #mv .mv-btn { font-size: 1.45rem; padding: 15px 20px; width: 100%; }
  .ai-lp #mv .mv-note { font-size: 1.2rem; }
  .ai-lp .head { margin: 40px auto 64px; }
  .ai-lp .head .sub-nav { gap: 8px; }
  .ai-lp .head .sub-nav li a { font-size: 1.3rem; padding: 11px 18px; }
  .ai-lp .problem__close { margin-top: 32px; }
}