/*
  ページ共通のスマホ版の型（2026-09-06・7ページ改修）。

  読み込み：各ページの page.tsx が
    <link rel="stylesheet" href="/css/ps.css" media="(max-width: 767px)">
  で読む。768px以上では読まれない（PC版は /css/pv.css）。

  正本：デザイン憲法「スマホの基準v2」。
    スマホはPCの縮小ではなく別の組み。文言は1か所の正本（copy.ts）から両方が読む
    文字は4段だけ：見出し28px明朝／小見出し22px／本文16px・行間1.8／注釈14px
    枠は1種類（幅いっぱい・左右16px・角丸12px・細線1px）
    絵は3型：A全幅4:5（最初の画面）／B挿絵幅70%／Cアイコン64px
    縦の順は「見出し→絵→本文→ボタン」。左右反転なし
    区画の地は生成り／白の交互、最後は藍。区画の間は48px
    折りたたみは1画面より短く。固定の「無料で相談する」は下（safe-area対応）
    押せる範囲48px以上

  ★ セレクタは必ず「.ps 」を頭に付けて2クラス以上にする
    （app/home.css の `.v5 p` 等に負けないため）。
*/

/* PC版の組みはスマホ幅では出さない */
.pv-pc-only {
  display: none;
}

.ps {
  display: block;
  background: var(--tone-kinari);
  font-family: var(--tone-font-sans);
  color: var(--tone-ink);
  line-height: 1.8;
  letter-spacing: normal;
  font-feature-settings: normal;
  overflow-x: hidden;
}
.ps * {
  box-sizing: border-box;
}
/*
  明朝。端末に明朝が無いAndroidでも出るよう、Webフォントを端末の書体の後ろに足す。
  2026-09-07指示【1】：Webフォントを自前配信（public/css/mincho.css）に切り替えたため、
  var(--font-noto-serif) を外して素の名前だけにした。当たり方は変わらない。
*/
.ps .mincho {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

/* ══════════════════════════════════════════
   土台：区画と余白
   ══════════════════════════════════════════ */
.ps .ps-sec {
  padding: 48px 0;
}
.ps .ps-sec--kinari {
  background: var(--tone-kinari);
}
.ps .ps-sec--shiro {
  background: var(--tone-kami);
}
.ps .ps-sec--ai {
  background: var(--tone-ai);
}
.ps .ps-wrap {
  padding: 0 16px;
}

/* ══════════════════════════════════════════
   文字（4段だけ）
   ══════════════════════════════════════════ */
/*
  2026-09-09：スマホの区画見出し。いったん32pxへ上げたが、監査の「トップ32px」は
  最初の画面の見出し（.sp-h--hero）を拾った読み違いで、トップの通常の見出しは28pxだった。
  トップを太らせてしまうため元の28px/1.45へ戻した（＝もともとトップと同じ値）。
*/
.ps .ps-h {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--tone-ai);
  margin: 0 0 16px;
}
.ps .ps-sh {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--tone-ai);
  margin: 0;
}
.ps .ps-p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--tone-ink);
  margin: 0;
}
.ps .ps-p + .ps-p {
  margin-top: 14px;
}
.ps .ps-note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--tone-usuzumi);
  margin: 0;
}
.ps .ps-em {
  font-weight: 700;
  color: var(--tone-ai);
}
/* 藍の面だけ字を生成りに */
.ps .ps-sec--ai .ps-h,
.ps .ps-sec--ai .ps-sh {
  color: var(--tone-kinari);
}
.ps .ps-sec--ai .ps-p {
  color: var(--tone-kinari);
}
.ps .ps-sec--ai .ps-note {
  color: rgba(247, 245, 240, 0.72);
}
.ps .ps-sec--ai .ps-em {
  color: #fff;
}

/* ══════════════════════════════════════════
   枠は1種類：幅いっぱい・角丸12px・藍の細線1px
   ══════════════════════════════════════════ */
.ps .ps-futon {
  background: var(--tone-kami);
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  padding: 16px;
  list-style: none;
}
/* トップのサービス「保守・伴走」の「詳しく見る」（/dev30#sp-hoshu）で飛んだ時、固定の頭に隠れないように（2026-09-29） */
.ps #sp-hoshu {
  scroll-margin-top: calc(var(--v5-head, 72px) + 16px);
}
/*
  診断書の見本（2026-09-09指示）。「開発30とは」の札の上段に、/shindan の④と同じものを置く。
  値は app/shindan/page.css のスマホ用（@media max-width:640px）の .sv-mihon-* から写した
  （page.css は /shindan 専用のため触らず、値だけを写している）。
  違うのは2点だけ：
    ・札の幅（内側326px）に収まるよう、縮尺を0.36→0.30、窓の高さを300→165pxにした
    ・下端をなじませる帯の色を、札の地（白）に合わせた
  傾きと「見本」の朱の札の見せ方は /shindan と同じ。
*/
.ps .ps-mihon-migi {
  position: relative;
  height: 165px;
  margin-bottom: 14px;
  overflow: hidden;
}
.ps .ps-mihon-kami {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 806px;
  margin-left: -403px;
  transform: rotate(-5deg) scale(0.3);
  transform-origin: 50% 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(27, 58, 92, 0.16));
}
.ps .ps-mihon-migi::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70px;
  background: linear-gradient(to top, var(--tone-kami), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ps .ps-mihon-in {
  position: absolute;
  left: 2px;
  top: 8px;
  z-index: 2;
  background: var(--tone-shu);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 4px 8px 4px 12px;
  border-radius: 2px;
}

.ps .ps-futon--futoi {
  border-width: 2px;
}
.ps .ps-tate {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps .ps-tate--semai {
  gap: 12px;
}
.ps .ps-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/*
  証拠の帯（2026-09-08指示【2】）。トップ（/）と同じ構成・同じ文言。
  値は public/css/sp.css の .sp-evidence-* をそのまま複製した（sp.css自体は読み込まない）。
*/
.ps .ps-evidence {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps .ps-evidence-item {
  background: var(--tone-kami);
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  padding: 16px;
}
.ps .ps-evidence-head {
  font-family: var(--tone-font-mincho);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tone-ai);
  margin: 0 0 4px;
}
.ps .ps-evidence-item .ps-link {
  min-height: 48px;
}

/* ══════════════════════════════════════════
   ボタン（幅いっぱい・52px・朱・角丸。1種類だけ）
   ══════════════════════════════════════════ */
.ps .ps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ps .ps-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tone-ai);
  text-decoration: none;
}

/* ══════════════════════════════════════════
   絵の3型
   ══════════════════════════════════════════ */
/* A：最初の画面。全幅4:5・高さは画面の60%まで。
   背の低い端末でもボタンが1画面に入るよう、下限側でも締める */
.ps .ps-fv {
  padding: 0 0 48px;
}
.ps .ps-fv-e {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(60vh, calc(100vh - 284px));
  overflow: hidden;
  background: var(--tone-kinari);
}
/*
  いまの絵は横長で上に空きがない。絵を枠の下68%に置き、空いた上に見出しを重ねる。
  上4割が空いた絵（public/v4/hero_sp_<page>.png）に差し替えたら
  この height を 100% にするだけでよい。
*/
.ps .ps-fv-e-naka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
}
.ps .ps-fv-e-naka--zen {
  height: 100%;
}
.ps .ps-fv-e-naka img {
  object-fit: cover;
  object-position: center center;
}
.ps .ps-h--fv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 22px 16px 0;
}
/*
  絵の上4割の空きに重ねる字（パンくず＋見出しなど、2つ以上のときはこちら）。
  public/v4/hero_sp_<page>.png は上4割が空くように作ってあるので、
  絵は枠いっぱい（--zen）に置き、この箱を重ねる。
*/
.ps .ps-fv-atama {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 22px 16px 0;
}
.ps .ps-fv-atama .ps-h {
  margin: 0;
}
.ps .ps-fv-atama .ps-note {
  margin-bottom: 6px;
}
.ps .ps-fv-sub {
  margin-top: 14px;
}
.ps .ps-fv .ps-btn {
  margin-top: 12px;
}
.ps .ps-fv .ps-note {
  margin-top: 12px;
}
/* 絵の無いページ（約款など）の最初の画面 */
.ps .ps-fv--moji {
  padding: 40px 0 48px;
}
.ps .ps-fv--moji .ps-h {
  margin-bottom: 12px;
}

/* B：挿絵・幅70% */
.ps .ps-e70 {
  position: relative;
  width: 70%;
  aspect-ratio: 1 / 1;
  margin: 12px auto 0;
}
.ps .ps-e70 img {
  object-fit: contain;
}
/* 全幅の絵（実物の画面など） */
.ps .ps-e100 {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 12px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f1e7;
}
.ps .ps-e100 img {
  object-fit: cover;
}

/* C：アイコン64px */
.ps .ps-ikon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 12px 0;
  color: var(--tone-ai);
}
.ps .ps-ikon svg,
.ps .ps-ikon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════
   3つの小さな札（横1列）
   ══════════════════════════════════════════ */
.ps .ps-fuda {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.ps .ps-fuda li {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  background: var(--tone-kami);
  color: var(--tone-ai);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ══════════════════════════════════════════
   箇条書き・数字・2列のタイル
   ══════════════════════════════════════════ */
.ps .ps-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps .ps-list-item {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--tone-ink);
}
.ps .ps-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone-ai);
}

.ps .ps-suuji {
  margin: 20px 0 0;
  padding: 16px;
  list-style: none;
  background: var(--tone-kami);
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps .ps-suuji-kazu {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--tone-ai);
}
.ps .ps-suuji-na {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}

.ps .ps-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0;
  list-style: none;
}
.ps .ps-tile {
  padding: 8px;
}
.ps .ps-tile-e {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f1e7;
}
.ps .ps-tile-e img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ps .ps-tile-ttl {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--tone-ai);
}
.ps .ps-tile-txt {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tone-usuzumi);
}
/*
  2026-09-07：「こんな方におすすめ」も2列のタイルにした（それまでは64px角のアイコン）。
  答えの一言はタイルの幅が狭いので、朱の縦線は残したまま文字を14pxに落とす。
*/
.ps .ps-tile .ps-kotae {
  margin-top: 8px;
  padding-left: 8px;
  font-size: 14px;
  line-height: 1.7;
}

/* ══════════════════════════════════════════
   小物（間のあけ方・番号・値段・答え）
   ══════════════════════════════════════════ */
/* 座布団の中や区画の中の「ひとつ下げる」。値は本文の1行ぶんに合わせる */
.ps .ps-mt {
  margin-top: 12px;
}
.ps .ps-mt-s {
  margin-top: 6px;
}

/* 群の見出し（こんな方におすすめ の2つの帯） */
.ps .ps-gun + .ps-gun {
  margin-top: 28px;
}
.ps .ps-gun-bar {
  margin-bottom: 12px;
}

/* 困りごとに対する答え。朱の縦線で「答え」だと分かるようにする */
.ps .ps-kotae {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--tone-shu);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--tone-ai);
}

/* 番号つきの見出し（サービスステップ） */
.ps .ps-atama {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ps .ps-maru {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tone-ai);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
}

/* 値段 */
.ps .ps-nedan {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--tone-ai);
}
.ps .ps-nedan-tan {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--tone-usuzumi);
}
.ps .ps-inc-ttl {
  margin-top: 12px;
  font-weight: 700;
  color: var(--tone-ai);
}

/* 座布団そのものがリンクになるとき */
.ps .ps-futon--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ══════════════════════════════════════════
   折りたたみ（1画面より短く）
   ══════════════════════════════════════════ */
.ps .ps-fold {
  background: var(--tone-kami);
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  overflow: hidden;
}
.ps .ps-fold-atama {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 56px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}
.ps .ps-fold-atama::-webkit-details-marker {
  display: none;
}
.ps .ps-fold-q {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-shu);
}
.ps .ps-fold-toi {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ai);
}
.ps .ps-fold-shirushi {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 6px;
}
.ps .ps-fold-shirushi::before,
.ps .ps-fold-shirushi::after {
  content: "";
  position: absolute;
  background: var(--tone-usuzumi);
}
.ps .ps-fold-shirushi::before {
  left: 0;
  top: 6.3px;
  width: 14px;
  height: 1.4px;
}
.ps .ps-fold-shirushi::after {
  top: 0;
  left: 6.3px;
  width: 1.4px;
  height: 14px;
}
.ps .ps-fold[open] .ps-fold-shirushi::after {
  display: none;
}
.ps .ps-fold-naka {
  padding: 0 16px 16px;
}

/* ══════════════════════════════════════════
   項目名｜値（会社概要・約款）
   ══════════════════════════════════════════ */
.ps .ps-hyou {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--tone-kami);
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  overflow: hidden;
}
.ps .ps-hyou > li {
  padding: 14px 16px;
}
.ps .ps-hyou > li + li {
  border-top: 1px solid var(--tone-aoyaki);
}
.ps .ps-hyou-k {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ai);
}
/* 座布団の中で項目名｜値を並べるときも同じ字づかいにする */
.ps .ps-futon > .ps-hyou-k {
  color: var(--tone-usuzumi);
}
.ps .ps-futon > .ps-sh {
  display: block;
}
.ps .ps-hyou-v {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--tone-ink);
}

/* ══════════════════════════════════════════
   最後の区画（藍）。ページの下端まで届かせる
   ══════════════════════════════════════════ */
.ps .ps-shime {
  padding-bottom: 120px;
}
.ps .ps-shime .ps-h {
  margin-bottom: 0;
}
.ps .ps-shime .ps-p {
  margin-top: 16px;
}
.ps .ps-shime .ps-note {
  margin-top: 14px;
}

/* ══════════════════════════════════════════
   画面の下に貼り付く「無料で相談する」（safe-area対応）
   ══════════════════════════════════════════ */
.ps .ps-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 0 16px max(12px, env(safe-area-inset-bottom));
  transform: translateY(150%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.ps .ps-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.ps .ps-cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .ps .ps-cta {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   理念の4段（使命・理念・志・約束）
   ══════════════════════════════════════════ */
.ps .ps-layer-label {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tone-kin);
}

/* ══════════════════════════════════════════
   /order で足したもの
   ══════════════════════════════════════════ */
.ps .ps-tier-no {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tone-kin);
}

/* ══════════════════════════════════════════
   相談フォーム（/contact-new）。スマホ幅の大きさ
   文字は4段の中（本文16px・注釈14px）。押せる範囲は48px以上
   ══════════════════════════════════════════ */
.cf {
  padding: 48px 0;
  background: var(--tone-kami);
  font-family: var(--tone-font-sans);
  color: var(--tone-ink);
  letter-spacing: normal;
  font-feature-settings: normal;
}
.cf .cf-haba {
  padding: 0 16px;
}
.cf .cf-ran {
  margin-top: 24px;
}
.cf .cf-ran:first-of-type {
  margin-top: 0;
}
.cf .cf-retsu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cf .cf-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--tone-ai);
}
.cf .cf-hissu {
  margin-left: 4px;
  color: var(--tone-shu);
}
.cf .cf-help {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}
/* 入力欄。16pxにしておくとiOSが勝手に拡大しない */
.cf .cf-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  background: var(--tone-kami);
  color: var(--tone-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}
.cf .cf-input:focus {
  outline: none;
  border-color: var(--tone-shu);
}
.cf .cf-textarea {
  min-height: 140px;
  resize: vertical;
}
.cf .cf-error {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-shu);
}
.cf .cf-error--zentai {
  margin-top: 16px;
}
.cf .cf-privacy {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  background: var(--tone-kinari);
}
.cf .cf-privacy-ttl {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tone-ai);
}
.cf .cf-privacy-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--tone-ai);
  font-weight: 700;
  text-decoration: underline;
}
.cf .cf-consent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ai);
  cursor: pointer;
}
.cf .cf-consent input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--tone-ai);
}
.cf .cf-promise {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--tone-ink);
  text-align: center;
}
.cf .cf-submit-wrap {
  margin-top: 16px;
}
.cf .cf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.cf .cf-submit[disabled] {
  background: #c6b6b1;
  cursor: default;
}
.cf .cf-success {
  padding: 24px 16px;
  border: 1px solid var(--tone-ai);
  border-radius: 12px;
  background: var(--tone-kinari);
  font-size: 16px;
  line-height: 1.8;
  color: var(--tone-ai);
  text-align: center;
}

/* 約款の番号（1〜5） */
.ps .ps-jou-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--tone-ai);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}

/* 2026-09-09（軽量化）：見本を絵にしたので、絵が枠の幅に収まるようにする */
.ps .ps-mihon-kami img {
  width: 100%;
  height: auto;
  display: block;
}

/*
  2026-09-09：進め方の段の番号の丸が潰れていた（実測 9×21px）。
  .ps .ps-atama の display:flex が後から来る規則に負けて block になり、
  中の .ps-maru が inline のままで width/height/角丸が効いていなかった。
  クラスを重ねて詳細度を上げ、丸自体も inline-flex で中央にそろえる。
  大きさ・色・余白の値は元のまま（新しい値は作っていない）。
*/
.ps .ps-sh.ps-atama {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ps .ps-atama .ps-maru {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/*
  2026-09-09：最初の画面の絵を、縦絵（型A・4:5）ではなく
  PCと同じ16:9のまま横幅いっぱいに置く型（/dev30 で使用）。

  上下の余白と、絵と字の間隔は、ほかのページのスマホヒーロー（/order など）と同じ値。
    ・見出しの上 22px（.ps-fv-atama と同じ）
    ・左右 16px（.ps-wrap と同じ）
    ・区画の下 48px（.ps-fv と同じ）
  絵は object-fit:cover だが、元の絵が1672×941＝ほぼ16:9なので切れない。
*/
.ps .ps-fv--yoko {
  padding-top: 22px;
}
.ps .ps-fv--yoko .ps-h {
  margin-bottom: 16px;
}
.ps .ps-fv-e--yoko {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: none;
  overflow: hidden;
  background: var(--tone-kinari);
}
.ps .ps-fv-e--yoko img {
  object-fit: cover;
  object-position: center center;
}
/* 絵のすぐ下の副文。ほかのページと同じ間隔にそろえる */
.ps .ps-fv--yoko .ps-wrap {
  padding-top: 0;
}
.ps .ps-fv--yoko .ps-fv-sub {
  margin-top: 16px;
}

/*
  2026-09-25 折り返し：文の切れ目（句）の途中で行を割らない（例：「保／守」「何度／でも」）。
  Chrome・Edge は auto-phrase で効く。効かない端末（Safari など）でも崩れないよう、
  金額・単位・かっこ書きは components/Nb.tsx が nowrap の span で包んでいる（二段構え）。
  text-wrap:pretty は、最後の行に1〜2文字だけ残るのを避ける。
  2026-09-26：ps-plain の例外を外した。/about・/philosophy・/privacy-policy も同じ決まり。
  見出し・ボタン・短い文の文節割り（BudouX）は lib/bx が全ページに入れる。共通CSSは app/globals.css の .bx。
*/
.ps h1, .ps h2, .ps h3, .ps p, .ps li, .ps summary {
  word-break: auto-phrase;
  text-wrap: pretty;
}