@charset "UTF-8";
/* =========================================================
 * 不動産物件管理システム（/system/）専用CSS
 * 置き場所：/wp-content/themes/miraie/frontend/assets/css/system.css
 * すべて .p-system の中だけに効く。既存クラスは上書きのみ（定義は変更しない）。
 * SPの切り替え：767.98px（page.css と同じ）
 * ========================================================= */

.p-system {
  --ps-red: #D7000F;
  --ps-blue: #0064B9;
  --ps-blue-light: #E6F0FA;
  --ps-red-light: #FDECEE; /* ラベル帯の背景。#D7000F の文字とのコントラスト比 4.72:1 */
  --ps-head: #1A1A1A;      /* FV見出し・料金の金額・既存パーツの上書きなど */
  --ps-heading: #333333;   /* このページで新しく作った見出し（2026-11-11 修正依頼5） */
  --ps-text: #333333;
  --ps-sub: #666666;
  --ps-gray-bg: #F5F5F5;
  --ps-line: #DEDEDE;
  color: var(--ps-text);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  word-break: auto-phrase;
  font-feature-settings: "palt";
  /* 最後の行が1〜2字だけにならないようにする */
  text-wrap: pretty;
}
/* 見出し・短い一文は、行の長さをそろえる。
   auto-phrase は「入る所まで詰めて余りを次の行へ送る」ため、狭いカードの見出しで
   最後の行に文節が1つだけ残る（例：「大幅圧縮！」）。balance でこれを防ぐ。 */
.p-system h1,
.p-system h2,
.p-system h3,
.p-system h4,
.p-system .ps-lead,
.p-system .ps-pain__close,
.p-system .ps-protect__strong,
.p-system .ps-ov__label,
.p-system .ps-stat__label,
.p-system .ps-ocr__flow li,
.p-system .ps-steps__list strong,
.p-system .ps-steps__list span,
.p-system .ps-price__opt-lead,
.p-system .ps-switch__period-text,
.p-system .voicesList__item .ttl-2,
.p-system .functionBox__list-item dd { text-wrap: balance; }
.p-system [class*="ps-"],
.p-system [class*="ps-"]::before,
.p-system [class*="ps-"]::after { box-sizing: border-box; }
.p-system em { font-style: normal; }
.p-system strong { font-weight: 700; }
.p-system img { max-width: 100%; height: auto; }
/* 中身がコメントだけの段落は表示しない */
.p-system p:empty { display: none; }

/* ページ内リンクの飛び先（固定ヘッダーの高さ分。スクロール本体は shared.js） */
.p-system [id] { scroll-margin-top: 108px; }

/* 表示切り替え（.p-system 内専用） */
.p-system .u-sp { display: none; }
.p-system .u-xs { display: none; } /* 359.98px以下（320px前後の小さいスマホ）だけの改行 */
.p-system .u-spm { display: none; } /* 360〜767.98px のSPだけの改行（第6弾） */
@media screen and (min-width: 360px) and (max-width: 767.98px) {
  .p-system .u-spm { display: inline; }
}
/* 第6弾 1：FVのリード文は、1行で数字の箱の幅に収まらない PC・タブレット（768〜1289.98px）では
   「物件管理機能の精度と、」のあとで改行（文字は21pxのまま） */
@media screen and (min-width: 768px) and (max-width: 1289.98px) {
  .p-system .ps-fv__lead-br { display: inline; }
}
.p-system .u-nowrap { white-space: nowrap; }

/* ---------- 共通：セクション・見出し ---------- */
.p-system .ps-sec { padding: 80px 0; }
.p-system .ps-sec--gray { background: var(--ps-gray-bg); }
.p-system .ps-sec--white { background: #fff; }
.p-system .ps-sec--gray + .ps-sec--gray { padding-top: 24px; }
/* 第6弾 7-2：守りの仕組みの締めの一文のあとだけ、ほかのセクションの切れ目と同じだけ空ける（PC 80+80px、SPは下で 56+56px） */
.p-system #protect + #easy.ps-sec { padding-top: 80px; }
.p-system .ps-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}
.p-system .ps-h2 {
  color: var(--ps-heading);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 16px;
}
/* 見出しの下の赤い短い線（2-2）。線を足した分、見出しの下の余白は 16px → 14px に詰める */
.p-system .ps-h2,
.p-system .ps-h2-label { position: relative; z-index: 1; }
/* 見出しは .ps-head で包んでいるため、見出しの下の余白は .ps-head に持たせる
   （リード文が続くとき 14px、続かないとき 40px） */
.p-system .ps-head { margin-bottom: 40px; }
.p-system .ps-head:has(+ .ps-lead) { margin-bottom: 14px; }
.p-system .ps-head:has(> .ps-h2-label) { margin-bottom: 24px; } /* 01〜03は従来どおり */
.p-system .ps-head > .ps-h2,
.p-system .ps-head > .ps-h2-label { margin-bottom: 0; }
.p-system .ps-h2::after,
.p-system .ps-h2-label::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--ps-red);
}
/* 見出しの後ろの大きな英字（2-1）。読み上げ・選択・コピーの対象外 */
.p-system .ps-head { position: relative; isolation: isolate; }
.p-system .ps-en {
  position: absolute;
  left: 50%;
  /* 第5弾 2-1：英字の下端（ベースライン）が、見出し（01〜03はラベル）の上端から 16px 下＝少しかかる位置
     （0.84em は Roboto の行の上端からベースラインまでの距離） */
  top: calc(16px - 0.84em);
  transform: translateX(-50%);
  z-index: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.p-system .ps-lead {
  color: var(--ps-text);
  font-size: 15px;
  text-align: center;
  margin-bottom: 40px;
}

/* 01〜03：ラベル付き見出し */
.p-system .ps-h2-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 24px;
  color: var(--ps-heading);
  font-weight: 700;
}
/* 第5弾 2-2：3つの精度のカードのタブ（.ps-ov__band）と同じ見た目（赤の塗り＋白文字・太字・角丸） */
.p-system .ps-label {
  display: inline-block;
  background: var(--ps-red);
  color: #fff;
  border-radius: 999px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.p-system .ps-h2-label__text { font-size: 30px; line-height: 1.5; }
.p-system .ps-h2-label::after { margin: 0; flex: none; }
/* 4-1：PCはラベルを上、見出しを下にして中央ぞろえ（SPは従来どおり） */
@media screen and (min-width: 768px) {
  .p-system .ps-h2-label { flex-direction: column; flex-wrap: nowrap; gap: 12px; text-align: center; }
}

.p-system .ps-red { color: var(--ps-red); font-weight: 700; }
.p-system .ps-blue { color: var(--ps-blue); font-weight: 700; }

.p-system .ps-h3 {
  color: var(--ps-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
}
.p-system .ps-text { margin-bottom: 0; }
.p-system .ps-text + .ps-text,
.p-system .ps-text + .ps-dots { margin-top: 8px; }
.p-system .ps-note {
  color: var(--ps-sub);
  font-size: 12px;
  line-height: 1.7;
  margin-top: 12px;
}

/* ---------- 共通：タグ・アイコン ---------- */
.p-system .ps-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: middle;
}
.p-system .ps-tag--std { background: var(--ps-blue-light); color: var(--ps-blue); }
.p-system .ps-tag--opt { background: #EDEDED; color: var(--ps-sub); }
.p-system .ps-block__tag { margin-bottom: 12px; line-height: 1; }
.p-system .ps-block__label {
  color: var(--ps-blue);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

/* チェックアイコン（青） */
.p-system .ps-check,
.p-system .ps-plus {
  position: relative;
  padding-left: 28px;
}
.p-system .ps-check::before,
.p-system .ps-plus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em; /* lh 単位が使えない古いブラウザ用 */
  /* 第6弾 5：アイコンの上下の中心を、1行目の行の高さ（1lh）の中心に合わせる。文字の大きさ・行間が変わっても追従する */
  top: calc((1lh - 18px) / 2);
  width: 18px;
  height: 18px;
  background: no-repeat center / contain;
}
.p-system .ps-check::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230064B9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.p-system .ps-plus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230064B9' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
}
.p-system .ps-points li { margin-bottom: 10px; line-height: 1.6; }
.p-system .ps-points li:last-child { margin-bottom: 0; }
.p-system .ps-points .ps-tag { margin-left: 6px; }

.p-system .ps-optline {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.p-system .ps-optline .ps-plus { display: inline-block; }

.p-system .ps-dots { margin-top: 4px; }
.p-system .ps-dots li { position: relative; padding-left: 1em; }
.p-system .ps-dots li::before { content: "・"; position: absolute; left: 0; }

.p-system .ps-textlink {
  color: var(--ps-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-system .ps-textlink:hover { text-decoration: none; }
.p-system .ps-morelink { text-align: right; margin-top: 20px; font-size: 14px; }
.p-system .ps-morelink--center { text-align: center; margin-top: 32px; }

/* ---------- 共通：機能ブロック ---------- */
.p-system .ps-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 36px 40px;
  margin-bottom: 20px;
}
.p-system .ps-block--opt { border: 1.5px dashed #999; box-shadow: none; } /* 有償オプションは点線を残し、影は付けない。第5弾 4：点線を #B5B5B5 → #999 に濃く */
/* 第5弾 6-1：01・02 の2つ目のブロックは、PCで画像を左・文章を右に（SPは下で元の順に戻す） */
.p-system .ps-block--rev { grid-template-columns: 400px minmax(0, 1fr); }
.p-system .ps-block--rev > .ps-block__media { order: -1; }
.p-system .ps-block--stack { grid-template-columns: 1fr; gap: 24px; }

.p-system .ps-shot { position: relative; margin: 0; }
.p-system .ps-shot img {
  display: block;
  box-sizing: border-box; /* 枠線の分だけ枠からはみ出さないように */
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.p-system .ps-shot--plain img { box-shadow: none; }

/* 吹き出し */
.p-system .ps-balloon {
  position: absolute;
  display: inline-block;
  background: #fff;
  color: var(--ps-blue);
  border: 2px solid var(--ps-blue);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.p-system .ps-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 7px solid var(--ps-blue);
  border-bottom: 0;
}
/* 画像の中の1点を指す吹き出し：しっぽの先が（--x, --y）に来る。
   --tail はしっぽの位置（吹き出しの幅に対する割合）。画像の端に近いときは寄せて、はみ出さないようにする */
.p-system .ps-balloon--pin {
  left: var(--x);
  top: var(--y);
  transform: translate(calc(var(--tail) * -1), calc(-100% - 8px));
}
.p-system .ps-balloon--pin::after { left: var(--tail); }
/* 01 ブロックA：右下の「この情報を使用」ボタンの上端 */
.p-system .ps-balloon--input-a { --x: 93%; --y: 91%; --tail: 80%; }
/* 左側から右を指す吹き出し：しっぽの先が（--x, --y）に来る */
.p-system .ps-balloon--pin-right {
  left: var(--x);
  top: var(--y);
  transform: translate(calc(-100% - 8px), -50%);
}
.p-system .ps-balloon--pin-right::after {
  left: auto;
  right: -8px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left: 7px solid var(--ps-blue);
  border-right: 0;
}
/* 02 ブロックA：エラー一覧の外側（左側）から、1つ目の「詳細」ボタンの左端を指す（11/12 第3弾） */
.p-system .ps-balloon--publish-a { --x: 46.5%; --y: 24.5%; }
/* 02 ブロックC：右上のスコア欄「28/63点」の上端 */
.p-system .ps-balloon--publish-c { --x: 95%; --y: 25%; --tail: 90%; }

/* ---------- 1. FV（11/12 第3弾で作り直し） ---------- */
.p-system .ps-fv {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 42%, #F2F4F7 100%);
  padding: 64px 0 72px;
}
/* 飾り：右上の赤い点の模様（直径約3px・間隔14px・透明度35%） */
.p-system .ps-fv__dots {
  position: absolute;
  right: 56px;
  top: 40px;
  width: 88px;
  height: 88px;
  background-image: radial-gradient(circle, #D7000F 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.35;
  pointer-events: none;
}
/* 飾り：左下の薄い英字（PCのみ） */
.p-system .ps-fv__bgtext {
  position: absolute;
  left: 96px;
  bottom: 16px; /* 第5弾 1-2：「p」の下まで含めて、文字全体がFVの中に見える位置（以前は -34px で下が切れていた） */
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 150px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* PC：左に文字、右にイラスト（最大幅1300px・イラスト560px・間隔44px・上下中央） */
.p-system .ps-fv__inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  column-gap: 44px;
  row-gap: 22px;
  align-content: center;
}
.p-system .ps-fv__inner > * { grid-column: 1; margin: 0; }
.p-system .ps-fv__inner > .ps-fv__illust { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.p-system .ps-fv__head { position: relative; }
.p-system .ps-fv__title { color: var(--ps-head); margin: 0; }
.p-system .ps-fv__label {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 22px;
}
.p-system .ps-fv__catch {
  display: block;
  font-size: 50px;
  font-weight: 900; /* font.css に Noto Sans JP 900 がない場合は 700 で表示される */
  line-height: 1.32;
  letter-spacing: 0.01em;
}
/* PCはラベルとバッジを1行に並べる */
.p-system .ps-fv__badge {
  position: absolute;
  top: 0;
  left: 214px;
  margin: 0;
}
.p-system .ps-badge {
  display: inline-block;
  background: #fff;
  color: var(--ps-blue);
  border: 1.5px solid var(--ps-blue);
  border-radius: 4px;
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.p-system .ps-fv__lead {
  color: var(--ps-text);
  font-size: 21px; /* 第5弾 1-1：PCは1行で、数字の箱3つの幅にそろえる（SPは下で15px） */
  font-weight: 700;
  line-height: 1.75;
}
/* イラスト（640×520 を縮小）。上に重ねる文字は、イラストの幅に合わせて縮小（11px未満にはしない） */
.p-system .ps-fv__illust {
  position: relative;
  width: 560px;
  container-type: inline-size;
}
.p-system .ps-fv__illust img { display: block; width: 100%; height: auto; }
.p-system .ps-fv__cap {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: max(11px, calc(100cqw * 13 / 640));
  font-weight: 700;
  line-height: 1.4;
  color: #333;
  text-align: center;
  white-space: nowrap; /* 「各ポータル／へ」のような単語の途中での改行を防ぐ */
}
.p-system .ps-fv__cap--doc { left: 3.4%; top: 66.5%; width: 23.4%; }
.p-system .ps-fv__cap--portal { left: 84.4%; top: 76.2%; width: 15%; }
.p-system .ps-fv__chip {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.57em;
  padding: 0.57em 1em 0.57em 0.57em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.10);
  font-size: max(11px, calc(100cqw * 14 / 640));
  font-weight: 700;
  line-height: 1.3;
  color: #1A1A1A;
  white-space: nowrap;
  animation: ps-fv-float 2.6s ease-in-out infinite alternate;
}
.p-system .ps-fv__chip--a { left: 33.4%; top: 11.2%; }
.p-system .ps-fv__chip--b { left: 36.9%; top: 63.5%; animation-delay: 0.9s; }
.p-system .ps-fv__chip-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.72em;
  padding: 0 0.6em;
  border-radius: 999px;
  background: var(--ps-red);
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: max(11px, calc(100cqw * 12 / 640));
  font-weight: 700;
  line-height: 1;
}
.p-system .ps-fv__chip--b::before {
  content: "";
  flex: 0 0 auto;
  width: 1.72em;
  height: 1.72em;
  border-radius: 50%;
  background: #FDECEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7000F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 58%;
}
@keyframes ps-fv-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .p-system .ps-fv__chip { animation: none; }
}
/* 数字の3つの箱 */
.p-system .ps-fv__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.p-system .ps-fv__stats li {
  background: #fff;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.07);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.p-system .ps-stat__num {
  color: var(--ps-red);
  font-family: 'Roboto', 'Noto Sans JP', sans-serif; /* 英数字は Roboto、「以下」「以上」「分」は Noto Sans JP */
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.p-system .ps-stat__label {
  color: var(--ps-sub);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
/* ボタン（それぞれ上に補足の一文） */
.p-system .ps-fv__cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.p-system .ps-fv__btn { display: flex; flex-direction: column; gap: 6px; }
.p-system .ps-fv__btn-sub {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ps-blue);
  white-space: nowrap;
}
.p-system .ps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.p-system .ps-btn:hover { opacity: 0.75; }
.p-system .ps-btn__icon { flex: 0 0 auto; width: 18px; height: 18px; }
.p-system .ps-btn--primary {
  background: var(--ps-blue);
  color: #fff;
  border: 2px solid var(--ps-blue);
  box-shadow: 0 6px 16px rgba(0, 100, 185, 0.25);
}
.p-system .ps-btn--secondary { background: #fff; color: var(--ps-blue); border: 2px solid var(--ps-blue); }
.p-system .ps-fv__switch { font-size: 15px; font-weight: 700; }
.p-system .ps-fv__switch a {
  color: var(--ps-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-system .ps-fv__note { color: var(--ps-sub); font-size: 11px; line-height: 1.7; }

/* ---------- 2. 悩み ---------- */
.p-system .ps-pain__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}
.p-system .ps-pain__item {
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.p-system .ps-pain__icon { height: 72px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.p-system .ps-pain__icon img { width: 64px; height: 64px; }
.p-system .ps-pain__title {
  color: var(--ps-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 10px;
}
.p-system .ps-pain__text { font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
.p-system .ps-pain__link { font-size: 13px; }
.p-system .ps-pain__link a { color: var(--ps-blue); }
.p-system .ps-pain__close {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ps-heading);
}

/* ---------- 3. 3つの精度 ---------- */
.p-system .ps-ov__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 18px; /* 上にはみ出すタブの分 */
}
.p-system .ps-ov__item {
  position: relative;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 36px 20px 20px;
  display: flex;
  flex-direction: column;
}
/* 5-2：カードの間の矢印（白い丸＋赤い ＞）。装飾なので読み上げ対象外（擬似要素） */
.p-system .ps-ov__item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -36px; /* 間隔28pxの中央：-(14 + 22) */
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7000F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
}
/* 5-1：赤い帯を、カード上辺の中央に半分はみ出すタブに */
.p-system .ps-ov__band {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--ps-red);
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  padding: 8px 24px;
  white-space: nowrap;
}
.p-system .ps-ov__title { color: var(--ps-heading); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
/* 5-3：数字の行の右端にアイコン（数字の行の高さの中央） */
.p-system .ps-ov__num { display: flex; align-items: baseline; min-height: 64px; line-height: 1.2; margin-bottom: 4px; }
.p-system .ps-ov__icon { align-self: center; flex: 0 0 64px; width: 64px; height: 64px; margin-left: auto; }
.p-system .ps-ov__big { font-size: 38px; margin: 0 4px; }
.p-system .ps-ov__unit { font-size: 15px; }
.p-system .ps-ov__label {
  color: var(--ps-sub);
  font-size: 13px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ps-line);
}
.p-system .ps-ov__item .ps-points { font-size: 13px; flex: 1; }
/* 第5弾 6-3：03 ブロックBの数字（数字が上〈赤・Roboto・太字〉、ラベルが下〈グレー〉） */
.p-system .ps-bnums { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 4px 0 16px; padding: 0; list-style: none; }
.p-system .ps-bnum { display: flex; flex-direction: column; margin: 0; }
.p-system .ps-bnum__val { line-height: 1.1; white-space: nowrap; }
.p-system .ps-bnum__big { font-family: 'Roboto', sans-serif; font-size: 44px; font-weight: 700; margin-right: 2px; }
.p-system .ps-bnum__unit { font-size: 16px; }
.p-system .ps-bnum__label { color: var(--ps-sub); font-size: 13px; line-height: 1.5; margin-top: 4px; }
.p-system .ps-ov__link { margin-top: 14px; font-size: 13px; }
.p-system .ps-ov__link a { color: var(--ps-blue); } /* 4-2 */

/* ---------- 4. 入力：比較バー ---------- */
.p-system .ps-bars { margin-bottom: 28px; }
.p-system .ps-bars__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.p-system .ps-bars__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ps-head);
}
.p-system .ps-bars__name small { display: block; font-size: 10px; font-weight: 400; color: var(--ps-sub); }
.p-system .ps-bars__bar {
  position: relative;
  height: 14px;
  font-size: 0;
  background: #EDEDED;
  border-radius: 999px;
  overflow: hidden;
}
.p-system .ps-bars__bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}
.p-system .ps-bars__row--manual .ps-bars__bar::before { width: 100%; background: #A6A6A6; }
.p-system .ps-bars__row--auto .ps-bars__bar::before { width: 25%; background: var(--ps-blue); } /* 約10分／約40分 */
.p-system .ps-bars__val { font-size: 17px; font-weight: 700; color: var(--ps-head); text-align: right; }
.p-system .ps-bars__diff { text-align: center; padding-left: 140px; }
.p-system .ps-bars__diff span {
  display: inline-block;
  background: var(--ps-blue);
  color: #fff;
  border-radius: 999px;
  padding: 2px 16px;
  font-size: 13px;
  font-weight: 700;
}

/* ---------- 4. AI-OCR 比較図 ----------
   第7弾 5：「悩み＝赤、解決策＝青」で色分け（文言はそのまま）。
   一般的なOCR：見出しはグレーの帯、1・2つ目は淡いグレーの箱、3つ目（残る手間）は淡いピンク＋赤い文字。
   みらいえ AI-OCR：見出しは青の帯、1・2つ目は白＋薄い青の枠、3つ目（解決）は青の塗り＋白い太字。
   PCは上下2段（各段は横に3つの箱）、SPは左右2列（下で指定） */
.p-system .ps-ocr__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 15px; /* 13px → 一回り大きく */
  font-weight: 700;
  line-height: 1.4;
  padding: 7px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.p-system .ps-ocr__name--general { background: #E3E3E3; color: #4D4D4D; }
.p-system .ps-ocr__name--miraie { background: var(--ps-blue); color: #fff; }
.p-system .ps-ocr__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.p-system .ps-ocr__flow li {
  position: relative;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 8px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
}
.p-system .ps-ocr__flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #999;
  border-right: 1.5px solid #999;
  transform: translateY(-50%) rotate(45deg);
}
.p-system .ps-ocr__flow--general li { background: #F2F2F2; border-color: #E2E2E2; color: #555; }
.p-system .ps-ocr__flow--general li:last-child { background: var(--ps-red-light); border-color: #F6C6CB; color: var(--ps-red); }
.p-system .ps-ocr__flow--miraie li { background: #fff; border-color: #A9CBEA; color: var(--ps-text); }
.p-system .ps-ocr__flow--miraie li:last-child { background: var(--ps-blue); border-color: var(--ps-blue); color: #fff; font-weight: 700; }
.p-system .ps-ocr__flow--miraie li:not(:last-child)::after { border-color: var(--ps-blue); }
.p-system .ps-ocr__caption { font-size: 12px; color: var(--ps-sub); }

/* ---------- 5. 出稿：3ステップ ---------- */
.p-system .ps-steps__title { font-size: 13px; color: var(--ps-sub); margin-bottom: 10px; }
.p-system .ps-steps__list { counter-reset: psstep; }
.p-system .ps-steps__list li {
  position: relative;
  counter-increment: psstep;
  padding: 0 0 0 52px;
  min-height: 40px;
  margin-bottom: 18px;
}
.p-system .ps-steps__list li:last-child { margin-bottom: 0; }
.p-system .ps-steps__list li::before {
  content: counter(psstep);
  position: absolute;
  left: 0;
  top: 2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ps-blue-light);
  color: var(--ps-blue);
  font-weight: 700;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}
.p-system .ps-steps__list strong { display: block; color: var(--ps-head); font-size: 16px; line-height: 1.5; }
.p-system .ps-steps__list span { display: block; font-size: 13px; line-height: 1.6; }

/* ---------- 問い合わせ帯（既存 .bnr__top-half を流用し、アイコンだけ差し替え） ---------- */
.p-system .ps-band { margin-top: 56px; }
.p-system .ps-band p { font-size: 15px; font-weight: 700; color: var(--ps-head); }
.p-system .ps-band .bnr460 { max-width: 100%; }
.p-system .ps-band--mail a span::after,
.p-system .ps-band--calendar a span::after,
.p-system .ps-band--calc a span::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 36px;
  height: 36px;
}
.p-system .ps-band--mail a span::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='1.5'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E");
}
.p-system .ps-band--calendar a span::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M7.5 13.5h.01M12 13.5h.01M16.5 13.5h.01M7.5 17h.01M12 17h.01M16.5 17h.01' stroke-width='2.4'/%3E%3C/svg%3E");
}
.p-system .ps-band--calc a span::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Crect x='8' y='5.5' width='8' height='3.5' rx='.5'/%3E%3Cpath d='M8.5 12.5h.01M12 12.5h.01M15.5 12.5h.01M8.5 15.5h.01M12 15.5h.01M15.5 15.5h.01M8.5 18.5h.01M12 18.5h.01M15.5 18.5h.01' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* 第6弾 8：問い合わせ帯の青いボタン（吹き出し付き・4つ）を一回り小さく。
   大元の style.css .bnr__style-2 a／page.css .bnr460 を変えると、旧共通CTAのボタン・住宅・機能一覧のページにも
   効いてしまうため、このページの中で上書きしている（修正一覧の8章を参照）。
   PC：幅460→360px、高さ98→68px、文字20→18px。影はFVの「資料ダウンロード（無料）」と同じ青みのある薄い影 */
/* 第7弾 1：PCはボタンの左右に30pxの余白を足して、幅 360px → 420px に（高さ・文字・アイコンはそのまま） */
.p-system .ps-band .bnr460 { width: 420px; box-sizing: border-box; }
.p-system .ps-band.bnr__style-2 a {
  padding: 25px 30px;
  font-size: 18px;
  box-shadow: 0 6px 16px rgba(0, 100, 185, 0.25);
}
.p-system .ps-band.bnr__style-2 a span { padding-left: 50px; }
.p-system .ps-band.bnr__style-2 a span::after { width: 26px; height: 33px; left: 8px; } /* 帯①の書類アイコン 33×42 → 26×33（縦横比はそのまま） */
.p-system .ps-band--mail a span::after,
.p-system .ps-band--calendar a span::after,
.p-system .ps-band--calc a span::after { width: 30px; height: 30px; } /* 36 → 30px */
.p-system .ps-band p { margin-bottom: 2px; } /* 吹き出しとボタンの間（ボタンが低くなった分、詰まりすぎないよう） */
/* 第7弾 1：PCは、ボタンの上の一文の左右の斜線を 40px → 30px に（SPは既存の 28px のまま） */
@media screen and (min-width: 768px) {
  .p-system .ps-band.bnr__top-half p::before,
  .p-system .ps-band.bnr__top-half p::after { width: 30px; }
}

/* ---------- 8. 守り ---------- */
.p-system .ps-protect__shot { margin-top: 8px; }
.p-system .ps-protect__balloons .ps-balloon--p1 { left: 18%; top: -14px; }
.p-system .ps-protect__balloons .ps-balloon--p2 { left: 44%; top: 30%; }
.p-system .ps-protect__balloons .ps-balloon--p3 { right: 12%; top: -14px; }
.p-system .ps-protect__close { text-align: center; margin-top: 44px; }
/* 第5弾 6-2：締めの一文をメッセージとして（見出しより一回り小さい 24px・太字・上に赤い短い線） */
.p-system .ps-protect__strong { color: var(--ps-heading); font-size: 24px; line-height: 1.6; margin-bottom: 10px; }
.p-system .ps-protect__strong::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--ps-red);
}

/* ---------- 9. 使いやすさ ---------- */
.p-system .ps-easy__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.p-system .ps-easy__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 24px;
}
.p-system .ps-easy__title { color: var(--ps-heading); font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.p-system .ps-easy__text { font-size: 14px; line-height: 1.8; }
.p-system .ps-easy__img { margin: 0; align-self: center; }
.p-system .ps-easy__img img { display: block; box-sizing: border-box; width: 160px; height: auto; border: 0; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* 第5弾 9-6：製品画面と同じ薄い影 */
/* 第6弾 9：カードCはイラスト（正方形）。影・角丸なし。ほかのカードの画像（幅160px・高さ111〜138px）と並びがそろうよう、
   同じ幅160pxの枠の中に、高さ140pxで中央に置く */
.p-system .ps-easy__img--illust img { width: 140px; margin: 0 10px; border-radius: 0; box-shadow: none; }

.p-system .ps-voice1 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 800px;
  margin: 0 auto;
}
.p-system .ps-voice1__avatar {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #E9E9E9;
}
/* voices_img02.webp（549×342）の顔の中心は、左から約44%・上から約20%。
   画像を円の高さの230%に拡大し、顔の中心を円の中央に合わせる */
.p-system .ps-voice1__avatar img {
  position: absolute;
  left: -111%;
  top: 3%;
  width: auto;
  max-width: none;
  height: 230%;
}
.p-system .ps-voice1__body { flex: 1; }
.p-system .ps-voice1__quote {
  text-wrap: pretty; /* 1-4 */
  position: relative;
  background: var(--ps-blue-light);
  border-radius: 14px;
  padding: 14px 22px;
  font-size: 16px;
  color: var(--ps-head);
}
/* 第7弾 3：しっぽを 幅10×高さ16px → 幅16×高さ22px に。上下は写真（PC 96px）の中心の高さ（48px）に合わせる */
.p-system .ps-voice1__quote::before {
  content: "";
  position: absolute;
  left: -16px;
  top: calc(48px - 11px);
  border: 11px solid transparent;
  border-right: 16px solid var(--ps-blue-light);
  border-left: 0;
}
.p-system .ps-voice1__name { font-size: 13px; color: var(--ps-sub); margin-top: 6px; }

/* ---------- 10. 乗り換え ---------- */
/* 第5弾 6-4：期間は、白い背景の上の淡いグレーの角丸の箱＋左に時計のアイコン。注記は箱の中の下 */
.p-system .ps-switch__period {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 40px;
  padding: 18px 32px 18px 24px;
  background: var(--ps-gray-bg);
  border-radius: 14px;
  text-align: left;
}
.p-system .ps-switch__period-icon { flex: 0 0 48px; width: 48px; height: 48px; }
.p-system .ps-switch__period-text { font-size: 17px; color: var(--ps-text); }
.p-system .ps-switch__period-text strong { color: var(--ps-head); font-size: 22px; }
.p-system .ps-switch__period .ps-note { margin-top: 2px; }
.p-system .ps-switch__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.p-system .ps-switch__item {
  background: var(--ps-gray-bg);
  border: 0;
  border-radius: 10px;
  padding: 22px 22px 24px;
}
.p-system .ps-switch__item--notag { padding-top: 22px; }
.p-system .ps-switch__title { color: var(--ps-heading); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.p-system .ps-switch__text { font-size: 14px; line-height: 1.8; }
.p-system .ps-switch__text + .ps-switch__text { margin-top: 14px; }

.p-system .ps-case { margin: 56px auto 0; } /* 1-1：.ps-inner の幅いっぱい */
.p-system .ps-case__heading { text-align: center; color: var(--ps-heading); font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.p-system .ps-case__card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  background: var(--ps-gray-bg);
  border: 0;
  border-radius: 14px;
  padding: 28px 32px;
}
.p-system .ps-case__photo { margin: 0; }
.p-system .ps-case__photo img { display: block; width: 260px; height: auto; border-radius: 10px; }
.p-system .ps-case__company { color: var(--ps-heading); font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.p-system .ps-case__list {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px 16px;
  font-size: 14px;
  line-height: 1.7;
}
/* 1-2：項目名は太字・濃い色＋頭に赤い短い縦線 */
.p-system .ps-case__list dt { color: var(--ps-head); font-size: 14px; font-weight: 700; }
.p-system .ps-case__list dt::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-right: 8px;
  vertical-align: -0.14em;
  background: var(--ps-red);
}
.p-system .ps-case__list dd { color: var(--ps-text); }

/* 導入までは4ステップ（既存 .functionStep を、このページの見出しサイズに合わせて上書き） */
.p-system .ps-step.functionStep { padding: 64px 0 0; }
.p-system .ps-step .heading__paragraph { font-size: 24px; line-height: 1.6; color: var(--ps-head); }
.p-system .ps-step .heading__paragraph::after { display: none; }
.p-system .ps-step .heading__paragraph span { font-size: 44px; }
.p-system .ps-step .heading__paragraph small { font-size: 26px; font-weight: 700; }
.p-system .ps-step .step { padding: 24px 0 0; margin: 0 auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.p-system .ps-step .step .text {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.p-system .ps-step .stepList { justify-content: center; }
.p-system .ps-step .stepList li { background: var(--ps-gray-bg); border: 0; border-radius: 10px; } /* 3-1：白背景の上なので影なし・グレー塗り */
/* 第5弾 6-5：カードの間の矢印（3つの精度と同じ白い丸＋赤い ＞）。装飾の擬似要素なので読み上げられない。
   矢印をカードの外にはみ出させるため、既存の overflow: hidden をこのページだけ外す */
.p-system .ps-step .stepList li { position: relative; overflow: visible; }
.p-system .ps-step .stepList li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -37px; /* 間隔30pxの中央：-(15 + 22) */
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7000F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
}

/* ---------- 11. 導入事例（既存 .voices の上書き） ---------- */
.p-system .ps-voices.productIntroduction { padding-top: 0; }
.p-system .ps-voices .voicesList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}
.p-system .ps-voices .voicesList__item { width: auto; }
.p-system .ps-voices .voicesList__item { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }
.p-system .ps-voices .voicesList__item .ttl-1 { font-size: 18px; }
.p-system .ps-voices .voicesList__item .ttl-2 { color: var(--ps-head); }
/* 第5弾 5：「インタビュー記事を見る」を白地＋青文字＋青の枠に（共通CSSは変えず、このページだけ上書き）。
   文字は 18px → 15px、高さも低く。矢印は既存の画像（icon_arrow.webp）の形をそのまま使い、色だけ青にする */
.p-system .ps-voices .bnr__shared a {
  background: #fff;
  color: var(--ps-blue);
  border: 1.5px solid var(--ps-blue);
  padding: 10px 0;
  font-size: 15px;
}
.p-system .ps-voices .bnr__shared a span::after {
  background: var(--ps-blue);
  -webkit-mask: url("../img/top/icon_arrow.webp") no-repeat right center / 100% auto;
  mask: url("../img/top/icon_arrow.webp") no-repeat right center / 100% auto;
  width: 10px;
  height: 10px;
}
/* 導入事例のドット（system.js が生成。SPのみ表示） */
.p-system .ps-voices__dots {
  display: none;
  justify-content: center;
  gap: 4px;
  margin-top: 10px;
}
.p-system .ps-voices__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.p-system .ps-voices__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #C8C8C8;
  transition: background-color 0.2s, transform 0.2s;
}
.p-system .ps-voices__dot[aria-current="true"]::before { background: var(--ps-blue); transform: scale(1.25); }
.p-system .ps-voices__dot:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: -2px; border-radius: 50%; }

/* ---------- 12. 機能カード（既存 .functionBox__list の幅だけ調整） ---------- */
.p-system .ps-features__list { gap: 20px; }
.p-system .ps-features__list .functionBox__list-item { width: calc((100% - 40px) / 3); }
.p-system .ps-features__list .functionBox__list-item h3 { font-weight: 700; color: var(--ps-head); }

/* ---------- 13. 料金・サポート ---------- */
.p-system .ps-price__box {
  max-width: 720px;
  margin: 0 auto 48px;
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 28px 40px;
}
/* 料金表：システムごとに1行。「初期費用（税抜）5万円」「月額費用（税抜）2万円」を横並びにし、
   幅が足りないときは項目ごと次の行へ送る（項目の途中では折り返さない） */
.p-system .ps-price__table { display: block; width: 100%; border-collapse: collapse; }
.p-system .ps-price__table thead { display: none; }
.p-system .ps-price__table tbody { display: block; }
.p-system .ps-price__table tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 32px;
  padding: 18px 0;
}
.p-system .ps-price__table tbody tr + tr { border-top: 1px solid var(--ps-line); }
.p-system .ps-price__table tbody th {
  display: block;
  flex: 0 0 170px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ps-head);
  text-align: left;
  padding: 0;
}
.p-system .ps-price__table tbody td {
  display: block;
  padding: 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-head);
}
.p-system .ps-price__table tbody td::before {
  content: attr(data-label);
  margin-right: 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ps-sub);
}
.p-system .ps-price__amount { white-space: nowrap; }
.p-system .ps-price__num { font-size: 40px; line-height: 1; margin-right: 2px; vertical-align: -2px; }
.p-system .ps-price__std-title {
  text-align: center;
  color: var(--ps-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.p-system .ps-price__std {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 12px 64px;
}
/* 第5弾 6-7：標準機能の見出しと6項目を、白いカード（枠線なし・薄い影。料金表の箱と同じ）に */
.p-system .ps-price__std-box {
  max-width: 720px; /* 第6弾 7-1：料金表の箱・有償オプション枠と同じ幅で中央に */
  box-sizing: border-box;
  margin: 0 auto 44px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 32px 40px;
}
.p-system .ps-price__std li { margin-bottom: 0; font-size: 15px; }
.p-system .ps-price__opt-lead { text-align: center; color: var(--ps-head); font-size: 17px; margin-bottom: 16px; }
.p-system .ps-price__opt {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px dashed #999; /* 第5弾 4 */
  border-radius: 14px;
  padding: 22px 28px;
}
.p-system .ps-price__opt-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
}
.p-system .ps-price__opt-col dt { font-weight: 700; color: var(--ps-head); margin-bottom: 6px; }
.p-system .ps-price__opt-col dd { margin-bottom: 4px; }

.p-system .ps-support {
  background: #fff;
  border-radius: 16px;
  padding: 44px 40px 36px;
  margin-top: 64px;
}
.p-system .ps-support__title { text-align: center; color: var(--ps-head); font-size: 22px; font-weight: 700; }
.p-system .ps-support__time { text-align: center; font-size: 14px; color: var(--ps-text); margin-bottom: 24px; }
/* 既存 .supportSystem__col の赤い塗り・枠は、このページでは使わない */
.p-system .ps-support .supportSystem__row { margin-bottom: 0; }
.p-system .ps-support .supportSystem__row .supportSystem__col,
.p-system .ps-support .supportSystem__row .supportSystem__col.left,
.p-system .ps-support .supportSystem__row .supportSystem__col.right {
  background: transparent;
  border: 0;
  color: var(--ps-text);
  padding: 16px 20px;
}
.p-system .ps-support .supportSystem__col .icon { width: 132px; margin: 0 auto 14px; }
.p-system .ps-support .supportSystem__col .icon img { width: 132px; height: auto; border-radius: 50%; background: #EEF1F4; }
.p-system .ps-support .supportSystem__col h4.ttl { font-size: 22px; color: var(--ps-head); margin-bottom: 14px; }
.p-system .ps-support .supportSystem__row .supportSystem__col.left ul,
.p-system .ps-support .supportSystem__row .supportSystem__col.right ul { width: auto; max-width: 400px; }
.p-system .ps-support .supportSystem__row .supportSystem__col ul li { font-size: 15px; padding-left: 18px; }
.p-system .ps-support .supportSystem__row .supportSystem__col ul li::before,
.p-system .ps-support .supportSystem__row .supportSystem__col.right ul li::before { background: var(--ps-text); top: 0.75em; }

/* ---------- 14. FAQ（details/summary のアコーディオン） ---------- */
.p-system .ps-faq { max-width: 1000px; margin: 0 auto; }
.p-system .ps-faq__item {
  background: var(--ps-gray-bg);
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.p-system .ps-faq__q {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 16px 56px 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ps-head);
  line-height: 1.6;
}
.p-system .ps-faq__q::-webkit-details-marker { display: none; }
.p-system .ps-faq__q::before { content: "Q. "; }
.p-system .ps-faq__q::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--ps-sub);
}
.p-system .ps-faq__item[open] > .ps-faq__q::after { content: "−"; }
.p-system .ps-faq__q:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: -2px; }
.p-system .ps-faq__a {
  background: #fff;
  border-radius: 0 0 6px 6px;
  padding: 16px 20px 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ps-text);
}

/* =========================================================
 * タブレット
 * ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1099px) {
  .p-system .ps-block { grid-template-columns: minmax(0, 1fr) 42%; gap: 28px; padding: 30px; }
  .p-system .ps-block--rev { grid-template-columns: 42% minmax(0, 1fr); }
  /* タブレット（768〜1099px）：50pxの見出しが入らないため、イラストと見出しを幅に合わせて縮める（依頼書に指定なし） */
  .p-system .ps-fv__inner { grid-template-columns: minmax(0, 1fr) 40%; column-gap: 32px; }
  .p-system .ps-fv__illust { width: 100%; }
  .p-system .ps-fv__catch { font-size: clamp(34px, 4.1vw, 50px); }
  .p-system .ps-fv__bgtext { font-size: 110px; bottom: 12px; left: 40px; }
  .p-system .ps-btn { font-size: 15px; gap: 6px; padding: 8px 10px; }
  .p-system .ps-fv__btn-sub { font-size: 12px; }
  .p-system .ps-ov__list { gap: 20px; }
  .p-system .ps-ov__item:not(:last-child)::after { right: -32px; } /* 間隔20pxの中央：-(10 + 22) */
  .p-system .ps-easy__item { grid-template-columns: 1fr; }
  .p-system .ps-features__list .functionBox__list-item { width: calc((100% - 20px) / 2); }
  .p-system .ps-voices .voicesList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-system .ps-support .supportSystem__row .supportSystem__col { width: 50%; }
}

/* 第5弾 1-2：FVの英字「Input to Check」を上げたあとも、下の「PROBLEM」と続いて見えるため、
   PCだけ悩みセクションの上の余白を 80px → 104px に */
@media screen and (min-width: 768px) {
  .p-system #pain.ps-sec { padding-top: 104px; }
}

/* 第5弾 9-1：3つの精度のアイコンが数字に当たる幅だけ、アイコンを 48px に。
   第4弾では 768〜824px と報告したが、測り直すと 874px まで「0.001 %以下」が押されて詰まっていたため、874px までにしている */
@media screen and (min-width: 768px) and (max-width: 874.98px) {
  .p-system .ps-ov__num { min-height: 48px; }
  .p-system .ps-ov__icon { flex-basis: 48px; width: 48px; height: 48px; }
}
/* 第6弾 3：768〜824px は、3枚とも数字（400／0.001／15）を 38px → 32px に（アイコンの位置はそのまま） */
@media screen and (min-width: 768px) and (max-width: 824.98px) {
  .p-system .ps-ov__big { font-size: 32px; }
}

/* ---------- 資料ダウンロードの縦長のタブ（第7弾。1312px以上のPCだけ。system.js が出し入れ） ----------
   画面の右端に貼り付け、上下は画面の中央。左側の角だけ丸める。幅46px。
   上に下向きの矢印、その下に縦書きで「資料ダウンロード（無料）」（「（無料）」は一回り小さく）。 */
.p-system .ps-float {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 900;
  width: 46px;
  /* 第5弾 3：急に消えずに、ふわっと出入りさせる（system.js が .is-show を付け外し）。右から少しすべり込む */
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.p-system .ps-float.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.p-system .ps-float[hidden] { display: none; }
.p-system .ps-float__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 46px;
  padding: 18px 0 16px;
  background: var(--ps-blue);
  color: #fff;
  font-weight: 700;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 6px 16px rgba(0, 100, 185, 0.25); /* FVの「資料ダウンロード（無料）」と同じ */
  text-decoration: none;
  transition: background-color 0.2s;
}
.p-system .ps-float__btn:hover { background: #00539A; color: #fff; }
.p-system .ps-float__btn:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }
.p-system .ps-float__icon { flex: none; width: 18px; height: 18px; }
.p-system .ps-float__label {
  /* 縦書き：長音「ー」と（ ）は、縦書き用の字形（vert）で正しい向きになる。
     ページ全体の "palt"（横書き用の詰め）は縦書きでは使わない */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: normal;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.p-system .ps-float__free { font-size: 12px; letter-spacing: 0; }
/* 閉じるボタン：タブの左上の角に、小さな白い丸の「×」 */
.p-system .ps-float__close {
  position: absolute;
  top: -9px;
  left: -9px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #555;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.p-system .ps-float__close:hover { color: var(--ps-head); }
.p-system .ps-float__close:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 1px; }

/* 第6弾 2：1311px以下では右下の枠を出さない（本文にかかるため。表示の判定は system.js でも同じ幅） */
@media screen and (max-width: 1311.98px) {
  .p-system .ps-float { display: none !important; }
}

/* ---------- 2-3：スクロールで表示（system.js が .ps-reveal-on を付けたときだけ隠す＝JSなしでも見える） ---------- */
.p-system.ps-reveal-on .ps-reveal {
  opacity: 0;
  transform: translateY(16px);
}
/* 動かすのは「出るとき」だけ（隠すときに動くと、読み込み直後に一瞬消えて見えるため） */
.p-system.ps-reveal-on .ps-reveal.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--ps-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .p-system.ps-reveal-on .ps-reveal { opacity: 1; transform: none; transition: none; }
  .p-system .ps-float,
  .p-system .ps-float.is-show { transition: none; }
}

/* =========================================================
 * SP
 * ========================================================= */
@media screen and (max-width: 767.98px) {
  .p-system { font-size: 14px; }
  .p-system [id] { scroll-margin-top: 56px; }
  .p-system .u-sp { display: inline; }
  .p-system .u-pc { display: none; }

  .p-system .ps-sec { padding: 56px 0; }
  .p-system .ps-sec--gray + .ps-sec--gray { padding-top: 16px; }
  .p-system #protect + #easy.ps-sec { padding-top: 56px; }
  .p-system .ps-inner { padding: 0 16px; }
  .p-system .ps-h2 { font-size: 21px; }
  .p-system .ps-en { font-size: min(52px, 14.5vw); top: calc(10px - 0.84em); } /* SPは 10px かかる位置 */
  .p-system .ps-h2::after { margin-top: 10px; }
  .p-system .ps-head { margin-bottom: 28px; }
  .p-system .ps-head:has(+ .ps-lead) { margin-bottom: 14px; }
  .p-system .ps-head:has(> .ps-h2-label) { margin-bottom: 18px; }
  .p-system .ps-lead { font-size: 14px; margin-bottom: 28px; }
  .p-system .ps-h2-label { gap: 10px; justify-content: center; text-align: center; }
  .p-system .ps-h2-label__text { font-size: 21px; width: 100%; }
  .p-system .ps-h3 { font-size: 18px; }

  .p-system .ps-block { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px; }
  .p-system .ps-block--rev > .ps-block__media { order: 0; } /* SPは文章が上・画像が下のまま */
  .p-system .ps-balloon { font-size: 11px; padding: 2px 10px; }

  /* SPの見出しと短い一文は中央寄せ（リード文 .ps-lead も中央寄せ。カード内の本文は左寄せのまま） */
  .p-system .ps-h2,
  .p-system .ps-h2-label,
  .p-system .ps-case__heading,
  .p-system .ps-price__std-title,
  .p-system .ps-pain__close,
  .p-system .ps-price__opt-lead,
  .p-system .ps-switch__period,
  .p-system .ps-protect__close { text-align: center; }

  /* FV：ラベル→見出し→バッジ→リード→イラスト→数字→ボタン→乗り換え→注記の順に1列 */
  .p-system .ps-fv {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #F2F4F7 100%);
    padding: 32px 0 40px;
  }
  .p-system .ps-fv__dots { right: 16px; top: 18px; width: 56px; height: 56px; }
  .p-system .ps-fv__bgtext { display: none; }
  .p-system .ps-fv__inner { grid-template-columns: 1fr; row-gap: 18px; padding: 0 16px; }
  .p-system .ps-fv__inner > .ps-fv__illust { grid-column: 1; grid-row: auto; justify-self: center; }
  .p-system .ps-fv__label { font-size: 15px; margin-bottom: 10px; }
  .p-system .ps-fv__catch { font-size: 28px; line-height: 1.38; }
  .p-system .ps-fv__badge { position: static; margin-top: 10px; }
  .p-system .ps-fv__lead { font-size: 15px; }
  .p-system .ps-fv__illust { width: 100%; max-width: 350px; }
  .p-system .ps-fv__stats { gap: 6px; }
  .p-system .ps-fv__stats li { border-radius: 10px; padding: 9px 4px; }
  .p-system .ps-stat__num { font-size: 17px; }
  .p-system .ps-stat__label { font-size: 11px; line-height: 1.45; }
  .p-system .ps-fv__cta { grid-template-columns: 1fr; gap: 18px; }
  .p-system .ps-btn { min-height: 56px; font-size: 16px; }

  /* 悩み：アイコン左の横長カード */
  .p-system .ps-pain__list { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .p-system .ps-pain__item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    text-align: left;
    padding: 16px;
  }
  .p-system .ps-pain__icon { height: auto; margin: 0; }
  .p-system .ps-pain__icon img { width: 48px; height: 48px; }
  .p-system .ps-pain__title { font-size: 15px; margin-bottom: 4px; }
  .p-system .ps-pain__text { font-size: 13px; margin-bottom: 4px; }
  .p-system .ps-pain__close { font-size: 17px; }

  /* 3つの精度 */
  /* 縦並び：矢印（44px）と次のカードのタブ（上に約18pxはみ出す）がぶつからないよう、間隔を 16px → 64px に */
  .p-system .ps-ov__list { grid-template-columns: 1fr; gap: 64px; }
  .p-system .ps-ov__item { padding-top: 34px; }
  .p-system .ps-ov__item:not(:last-child)::after {
    right: 50%;
    top: auto;
    bottom: -40px; /* 前のカードに4px重なる */
    transform: translateX(50%) rotate(90deg);
  }
  .p-system .ps-ov__num { min-height: 52px; }
  .p-system .ps-ov__icon { flex-basis: 52px; width: 52px; height: 52px; }

  /* 比較バー・OCR */
  .p-system .ps-bars__row { grid-template-columns: 96px minmax(0, 1fr) 56px; }
  .p-system .ps-bars__diff { padding-left: 0; }
  /* 第7弾 5-3：SPは左右2列（左：一般的なOCR、右：みらいえ AI-OCR）。
     2つの流れの箱を同じ段にそろえるため、全体を1つのグリッドにし、各流れはその行を共有（subgrid）する */
  .p-system .ps-ocr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto repeat(3, auto) auto;
    column-gap: 10px;
  }
  .p-system .ps-ocr__name { grid-row: 1; font-size: 14px; padding: 6px 8px; justify-content: center; text-align: center; }
  .p-system .ps-ocr__name--general { grid-column: 1; }
  .p-system .ps-ocr__name--miraie { grid-column: 2; }
  .p-system .ps-ocr__flow {
    grid-row: 2 / span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    gap: 16px;
    margin-bottom: 16px;
  }
  .p-system .ps-ocr__flow--general { grid-column: 1; }
  .p-system .ps-ocr__flow--miraie { grid-column: 2; }
  .p-system .ps-ocr__caption { grid-column: 1 / -1; grid-row: 5; }
  .p-system .ps-ocr__flow li { min-height: 0; font-size: 13px; padding: 10px 6px; }
  /* 箱と箱の間の矢印は下向き */
  .p-system .ps-ocr__flow li:not(:last-child)::after {
    right: 50%;
    top: auto;
    bottom: -12px;
    transform: translateX(50%) rotate(135deg);
  }

  .p-system .ps-band { margin-top: 40px; }
  .p-system .ps-band p { font-size: 13px; }
  .p-system .ps-band .bnr460 { width: 100%; max-width: 100%; margin: 8px 0 0 !important; }
  /* 第6弾 8：SP 高さ約70→60px、文字18→16px（幅は画面いっぱいのまま） */
  .p-system .ps-band.bnr__style-2 a { padding: 22px 0; font-size: 16px; } /* SPは左右の余白を足さない（画面幅いっぱいのまま） */
  .p-system .ps-band a span { font-size: 16px; padding-left: 36px; }
  .p-system .ps-band a span::after,
  .p-system .ps-band.bnr__style-2 a span::after { left: 0; width: 20px; height: 26px; } /* 書類アイコン 25×36 → 20×26 */
  .p-system .ps-band--mail a span::after,
  .p-system .ps-band--calendar a span::after,
  .p-system .ps-band--calc a span::after { width: 24px; height: 24px; }
  /* 1-3：4ステップのカードを小さく（余白27→14px、文字と絵を1段階小さく、間隔12→8px） */
  .p-system .ps-step .stepList { gap: 8px; }
  .p-system .ps-step .stepList li { width: calc(50% - 4px); box-sizing: border-box; padding: 14px 0; }
  .p-system .ps-step .stepList li dl { margin-bottom: 8px; }
  .p-system .ps-step .stepList li dl dt { font-size: 15px; margin-bottom: 8px; }
  .p-system .ps-step .stepList li dl dd { font-size: 16px; line-height: 1.4; }
  .p-system .ps-step .stepList li .icon { width: 40px; }
  /* 6-5：SPは2列×2段のため、STEP1→2、STEP3→4 の間だけ（間隔8pxの中央：-(4 + 22)） */
  .p-system .ps-step .stepList li:not(:last-child)::after { display: none; }
  /* 第6弾 4：SPは丸を 44px → 36px に（間隔8pxの中央：-(4 + 18)） */
  .p-system .ps-step .stepList li:nth-child(odd)::after { display: block; right: -22px; width: 36px; height: 36px; background-size: 15px 15px; }

  .p-system .ps-protect__balloons .ps-balloon--p2 { left: 36%; }
  .p-system .ps-protect__strong { font-size: 18px; } /* 第5弾 6-2 */
  .p-system .ps-protect__strong::before { margin-bottom: 12px; }
  .p-system .ps-protect__close { margin-top: 32px; }

  /* 使いやすさ */
  .p-system .ps-easy__list { grid-template-columns: 1fr; gap: 12px; }
  .p-system .ps-easy__item { grid-template-columns: 1fr; padding: 20px 18px; }
  .p-system .ps-easy__img img { width: 100%; max-width: 280px; margin: 0 auto; }
  .p-system .ps-easy__img--illust img { max-width: 210px; margin: 0 auto; } /* 正方形なので、ほかの画像（280px幅・高さ約200px）と高さをそろえる */
  .p-system .ps-voice1__avatar { flex-basis: 72px; width: 72px; height: 72px; }
  .p-system .ps-voice1__quote { font-size: 14px; padding: 12px 16px; }
  .p-system .ps-voice1__quote::before { top: calc(36px - 11px); } /* 写真（SP 72px）の中心の高さ */

  /* 乗り換え */
  .p-system .ps-switch__period-text { font-size: 14px; }
  .p-system .ps-switch__period-text strong { font-size: 18px; }
  .p-system .ps-switch__period { gap: 12px; padding: 14px 16px; margin-bottom: 32px; width: auto; text-align: left; } /* 箱の中は左寄せ（左にアイコンがあるため） */
  .p-system .ps-switch__period-icon { flex-basis: 36px; width: 36px; height: 36px; align-self: flex-start; margin-top: 2px; }
  .p-system .ps-switch__list { grid-template-columns: 1fr; gap: 12px; }
  .p-system .ps-case__heading { font-size: 18px; }
  .p-system .ps-case__card { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; }
  .p-system .ps-case__photo img { width: 100%; }
  .p-system .ps-case__company { font-size: 16px; }
  .p-system .ps-case__list { grid-template-columns: 1fr; gap: 4px; } /* 1-2：項目名と内容の間 4px */
  .p-system .ps-case__list dd { margin-bottom: 12px; }                /* グループの間 4 + 12 = 16px */
  .p-system .ps-case__list dd:last-child { margin-bottom: 0; }
  .p-system .ps-step.functionStep { padding-top: 48px; }
  .p-system .ps-step .heading__paragraph { font-size: 20px; }
  .p-system .ps-step .heading__paragraph span { font-size: 36px; }
  .p-system .ps-step .heading__paragraph small { font-size: 22px; }
  .p-system .ps-step .step .text { font-size: 14px; line-height: 1.9; }
  .p-system .ps-step .step .text br { display: none; }

  /* 導入事例：SPは横スクロール（1枚ずつ止まる・右に次のカードが少しのぞく） */
  .p-system .ps-voices .voicesList {
    display: flex;
    flex-direction: row; /* 既存のSP用スタイルの縦並びを打ち消す */
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    overscroll-behavior-x: contain;
    margin: 0 -16px;
    padding: 4px 16px 8px;
    scrollbar-width: none;
  }
  .p-system .ps-voices .voicesList::-webkit-scrollbar { display: none; }
  .p-system .ps-voices .voicesList__item {
    flex: 0 0 85%;
    width: 85%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .p-system .ps-voices__dots { display: flex; }

  /* 機能カード */
  .p-system .ps-features__list .functionBox__list-item { width: 100%; }

  /* 料金表：システム名の下に、2項目を横並び（入らないときは月額費用が丸ごと次の行へ） */
  .p-system .ps-price__box { padding: 4px 14px 18px; margin-bottom: 36px; }
  .p-system .ps-price__table tbody tr { gap: 2px 18px; padding: 14px 0; }
  .p-system .ps-price__table tbody th { flex: 0 0 100%; font-size: 16px; }
  .p-system .ps-price__table tbody td { font-size: 14px; }
  .p-system .ps-price__table tbody td::before { margin-right: 4px; font-size: 12px; }
  .p-system .ps-price__num { font-size: 26px; }
  .p-system .ps-price__std-title { font-size: 17px; }
  .p-system .ps-price__std { grid-template-columns: 1fr; gap: 10px; justify-content: start; }
  .p-system .ps-price__std-box { padding: 24px 18px; margin-bottom: 32px; }
  .p-system .ps-price__opt-lead { font-size: 15px; }
  .p-system .ps-price__opt { padding: 18px; }
  .p-system .ps-price__opt-cols { grid-template-columns: 1fr; }
  .p-system .ps-support { padding: 32px 16px 20px; margin-top: 48px; }
  .p-system .ps-support__title { font-size: 18px; }
  .p-system .ps-support .supportSystem__row .supportSystem__col { width: 100%; padding: 12px 4px; }

  .p-system .ps-faq__q { padding: 14px 44px 14px 14px; font-size: 14px; }
  .p-system .ps-faq__q::after { right: 16px; }
  .p-system .ps-faq__a { padding: 14px; font-size: 14px; }
  .p-system .ps-morelink { text-align: left; }
  .p-system .ps-float { display: none !important; } /* 2-4：SPでは出さない */
  .p-system .ps-voices .bnr__shared a { padding: 10px 0; font-size: 14px; } /* 第5弾 5 */
  .p-system .ps-bnums { gap: 12px 28px; }
  .p-system .ps-bnum__big { font-size: 36px; }
}

/* =========================================================
 * 小さいスマホ（359.98px以下。320px前後）
 * ========================================================= */
@media screen and (max-width: 359.98px) {
  .p-system .u-xs { display: inline; }
  /* 数字の箱の説明：11pxのまま2行では箱に入らないため、折り返しを許す */
  .p-system .ps-stat__label { white-space: normal; }
  /* 数字（17px）が箱の幅を超えるため、少し小さくする */
  .p-system .ps-stat__num { font-size: 15px; }
}