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

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

  正本：C:\dev\japanclassic-vault\20_基準\デザイン憲法.md と サイト制作の手順書.md。
  値はトップv4（public/css/top.css）から採ったもので、発明はしていない。
    容器 1280px（左右24px）／見出し44px明朝／カード見出し28px／
    本文20px・行間1.8・1行35字（＝20pxなら幅700px）／ボタン高さ64px／
    区画の上下余白130px

  ★ セレクタは必ず「.pv 」を頭に付けて2クラス以上にする。
    app/home.css の `.v5 p { font-size … }` `.v5 h1,h2,h3 { margin:0 }` は
    クラス＋要素（詳細度0,1,1）なので、単一クラスでは負ける。
    このプロジェクトで何度も踏んだ罠。

  色・書体は app/tone.css の変数をそのまま使う（--tone-ai 藍 / --tone-shu 朱 /
  --tone-kin 金 / --tone-aoyaki 青焼き / --tone-kinari 生成り / --tone-kami 白）。
*/

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

/* ══════════════════════════════════════════
   土台
   ══════════════════════════════════════════ */
.pv {
  position: relative;
  overflow-x: hidden;
  padding-bottom: 4px;
}

/* 容器：1280px・左右24px（内側の実幅1232px） */
.pv .pv-haba {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
/* 読み物のページ（約款・理念など）だけ、行長のために狭い容器を使う */
.pv .pv-haba--semai {
  max-width: 880px;
}

/* 区画：上下130px。地は生成り／白／藍の3つだけ */
.pv .pv-sec {
  padding: 130px 0;
}
.pv .pv-sec--kinari {
  background: var(--tone-kinari);
}
.pv .pv-sec--shiro {
  background: var(--tone-kami);
}
.pv .pv-sec--ai {
  background: var(--tone-ai);
}

/*
  証拠の帯（2026-09-08指示【2】）。トップ（/）の区画3と同じ構成・同じ文言。
  値は public/css/top.css の .rt-evidence-* をそのまま複製した（top.css自体は読み込まない）。
*/
.pv .rt-evidence-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.pv .rt-evidence-item {
  text-align: center;
}
.pv .rt-evidence-item .rt-evidence-head {
  font-family: var(--tone-font-mincho);
  font-size: 36px;
  font-weight: 600;
  color: var(--tone-ai);
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
}
.pv .rt-evidence-item .rt-evidence-sub {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--tone-ink);
}
.pv .rt-evidence-item .rt-evidence-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tone-ai);
  text-decoration: none;
  border-bottom: 1px solid var(--tone-aoyaki);
}
.pv .rt-evidence-item .rt-evidence-link:hover {
  color: var(--tone-shu);
  border-color: var(--tone-shu);
}
.pv .rt-arrow {
  display: inline-block;
  margin-left: 2px;
}

/* ══════════════════════════════════════════
   文字
   ══════════════════════════════════════════ */
.pv .pv-h1 {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--tone-ai);
  margin: 0;
}
@media (max-width: 1180px) {
  .pv .pv-h1 {
    font-size: clamp(36px, 6.5vw, 68px);
  }
}

/* 読み物のページ（約束・会社概要・理念・約款）の題。見出しと同じ44px */
/*
  2026-09-09指示【1】：読み物ページの題。**大きさ44pxはそのまま残し**、行間だけ
  トップの見出しと同じ1.85（＝81.4px）にそろえた。
*/
.pv .pv-h1--page {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: normal;
}

/*
  2026-09-09指示【1】：区画の見出しをトップの値にそろえた（実測 44px/81.4px）。
  行間1.45→1.85（＝81.4px）。トップは .tone-world の1.85を受け継いでいて、
  こちら（.pv）だけ1.45を明示していたための差だった。
*/
.pv .pv-h2 {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--tone-ai);
  margin: 0 0 48px;
}
.pv .pv-h2--naka {
  text-align: center;
}
.pv .pv-sec--ai .pv-h2 {
  color: var(--tone-kinari);
}

/* カード・段の見出し。明朝にしない（トップv4と同じ） */
.pv .pv-h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tone-ai);
  margin: 0;
}

/* 本文。20px・行間1.8・幅700px＝1行35字（トップv4で実測済みの値） */
/*
  2026-09-09指示【1】：本文をトップの値にそろえた（実測 20px/38px/太さ500）。
  行間1.8→1.9（＝38px）、太さ400→500。大きさ・色は変えていない。
*/
.pv .pv-p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--tone-ink);
  max-width: 700px;
}
.pv .pv-p + .pv-p {
  margin-top: 1.6em;
}
.pv .pv-p--naka {
  margin-left: auto;
  margin-right: auto;
}
.pv .pv-sec--ai .pv-p {
  color: var(--tone-kinari);
  opacity: 0.92;
}

/* 区画の副題（見出しのすぐ下の1行） */
.pv .pv-lead {
  margin: -32px 0 48px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}
.pv .pv-lead--naka {
  text-align: center;
}

/*
  2026-09-09指示【1】：素の補足をトップの値にそろえた（実測 17px/28.9px）。
  14px→17px（行間1.7のままなので28.9pxになる）。
  カードの中の補足（.pv-card-note）は「残す」指示なので触っていない。
*/
.pv .pv-note {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}
.pv .pv-sec--ai .pv-note {
  color: var(--tone-kinari);
  opacity: 0.75;
}

.pv .pv-em {
  font-weight: 700;
  color: var(--tone-ai);
}

/* 大きな数字（明朝） */
.pv .pv-suuji-val {
  font-family: var(--tone-font-mincho);
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--tone-ai);
}
.pv .pv-suuji-label {
  margin-top: 12px;
  font-size: 14px;
  color: var(--tone-usuzumi);
}

/* ══════════════════════════════════════════
   ボタン（朱・角丸・1種類だけ）と文中リンク
   ══════════════════════════════════════════ */
.pv .pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 64px;
  padding: 0 40px;
  border: none;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-family: var(--tone-font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}
.pv .pv-btn:hover {
  background: var(--tone-shu-koi);
}
.pv .pv-btn:active {
  transform: translateY(1px) scale(0.98);
}
.pv .pv-btn-wrap {
  margin-top: 48px;
}
.pv .pv-btn-wrap--naka {
  text-align: center;
}

/* 第2階層の導線。朱のボタンは1画面に1つという運用のため、こちらは文字 */
.pv .pv-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--tone-ai);
  text-decoration: none;
  border-bottom: 1px solid var(--tone-aoyaki);
}
.pv .pv-link:hover {
  color: var(--tone-shu);
  border-color: var(--tone-shu);
}
.pv .pv-arrow {
  display: inline-block;
  margin-left: 2px;
}

/* ══════════════════════════════════════════
   カード（中は4段：見出し→太字の一言→補足→リンク）
   ══════════════════════════════════════════ */
.pv .pv-grid {
  display: grid;
  gap: 24px;
}
.pv .pv-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pv .pv-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.pv .pv-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .pv .pv-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pv .pv-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* グリッドの直の子が縮めるようにする（絵の縦横比が列を押し広げる罠の対策） */
.pv .pv-grid > * {
  min-width: 0;
}

.pv .pv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--tone-ai);
  border-radius: 8px;
  background: var(--tone-kami);
}
/* 主役の1枚だけ枠を太く */
.pv .pv-card--futoi {
  border-width: 2px;
}
.pv .pv-badge {
  position: absolute;
  top: -13px;
  left: 20px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 見出しの箱は2行ぶんで固定し、本文の開始位置を横並びでそろえる（28px×1.5×2行） */
.pv .pv-card .pv-card-ttl {
  min-height: 84px;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tone-ai);
  text-wrap: balance;
}
.pv .pv-card .pv-card-bold {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ink);
  text-wrap: balance;
}
.pv .pv-card .pv-card-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}
/* リンクはカードの下端にそろえる */
/* 2026-10-01：上の 14px を箱の中（padding-top）から前の要素の下の間に移し、箱を字の幅にする（前は字が箱の中心より6px下・
   「お客様への約束を見る」は箱がカードの幅いっぱいで字が左に寄っていた）。字と下線の位置は前と同じ */
.pv .pv-card .pv-link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 14px; /* 2026-10-01：13.5→14px（リンクの字は14px以上） */
}
.pv .pv-card > :has(+ .pv-link) {
  margin-bottom: 14px;
}
.pv .pv-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f1e7;
}
.pv .pv-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pv .pv-card-ikon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  color: var(--tone-ai);
}
.pv .pv-card-ikon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════
   横幅いっぱいの段（左右交互）。サイト全体で1種類の骨格
   ══════════════════════════════════════════ */
.pv .pv-dan {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: start;
  margin-top: 130px;
}
.pv .pv-dan:first-child {
  margin-top: 0;
}
/*
  2026-09-08指示【4】：「開発30とは」の右カード（pv-moushikomi）は本文よりずっと短いため、
  45/55のままだと本文の下に大きな余白が残っていた（計測：カードの高さ・上端はもともと
  内容ぶん＝本文と揃っていた。y=1041.9pxで同じ、カード高237.8px対して本文360px）。
  この区画だけ列比を60/40にして本文の実効幅を憲法の目安（1行35字幅700px）へ近づけ、
  右列を縮めて余白を目立たなくした。/order が使う pv-dan 本体は変えていない。

  2026-09-08指示【3】（続報）：見出し「開発30とは」と本文の間が約150px空いていた原因は、
  .pv-dan の margin-top:130px（本来はこの段が単独の区画として使われる時の余白）が、
  直前の見出し（.pv-midashi、下に48px）とここでは重なって効いてしまっていたため。
  .pv-dan:first-child のリセットは、見出しが同じ .pv-haba にある今回は効かない
  （pv-dan は1番目の子ではないため）。ここだけ0に戻し、見出しの48pxだけにそろえた
  （他のH2見出し区画＝特徴・実績など＝と同じ間隔になる）。/order のpv-danは無変更。
*/
.pv .pv-dan--about {
  grid-template-columns: 60% 40%;
  margin-top: 0;
}

/*
  診断書の見本（2026-09-09指示）。右カードの上段に、/shindan の④と同じものを置く。
  値は app/shindan/page.css の .sv-mihon-migi / .sv-mihon-kami / .sv-mihon-in から写した
  （page.css は /shindan 専用のため触らず、値だけを写している）。
  違うのは2点だけ：
    ・カードの幅（内側445px）に収まるよう、縮尺を0.52→0.46、窓の高さを430→210pxにした
    ・下端をなじませる帯の色を、区画の地（生成り）ではなくカードの地（白）に合わせた
  傾き（-6deg）と「見本」の朱の札の見せ方は /shindan と同じ。
*/
.pv .pv-mihon-migi {
  position: relative;
  /* カードは align-items:flex-start なので、幅を明示しないと中身ぶん（＝0）になる */
  align-self: stretch;
  width: 100%;
  /*
    高さは、左の本文（実測252px）とカード全体の釣り合いで決めた。
    150pxのとき カード=392px。190pxだと432pxで本文の1.7倍になり長すぎた。
  */
  height: 150px;
  margin-bottom: 16px;
  overflow: hidden;
}
.pv .pv-mihon-kami {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 806px;
  margin-left: -403px;
  transform: rotate(-6deg) scale(0.46);
  transform-origin: 50% 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(27, 58, 92, 0.16));
}
/* 下端を地になじませる（切り取り線が出ないように） */
.pv .pv-mihon-migi::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to top, var(--tone-kami), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.pv .pv-mihon-in {
  position: absolute;
  left: 4px;
  top: 10px;
  z-index: 2;
  background: var(--tone-shu);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 5px 10px 5px 14px;
  border-radius: 2px;
}
.pv .pv-dan > * {
  min-width: 0;
}
/* 反転：列比を入れ替え、絵を後ろへ送り、本文の余白を左右入れ替える */
.pv .pv-dan--gyaku {
  grid-template-columns: 55% 45%;
}
.pv .pv-dan--gyaku > *:first-child {
  order: 2;
}
/*
  2026-09-09指示【1】：文字と絵の上下が揃っていなかった。
  ・align-items:center ＋ padding:40px 0 のせいで、絵が見出しより40px下から始まっていた
    （実測：見出しの上端1032px／絵の上端1072px）。
    トップの段（.rt-dan）は絵が「端末の枠」で高さが控えめなので目立たなかったが、
    /order は幅いっぱいの4:3（実測416px）で、文字の塊（実測166px）の2.5倍あった。
  ・上端を見出しにそろえ（flex-start・上の余白0）、絵の高さも文字の塊に近づける。
  左右が入れ替わる段（.pv-dan--gyaku）も同じ規則で揃う（この指定は左右に関係しない）。
*/
.pv .pv-dan-e {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
.pv .pv-dan-e img {
  width: 100%;
  height: auto;
  display: block;
}
.pv .pv-dan-bun {
  padding-left: 56px;
}
.pv .pv-dan--gyaku .pv-dan-bun {
  padding-left: 0;
  padding-right: 56px;
}
@media (max-width: 900px) {
  .pv .pv-dan,
  .pv .pv-dan--gyaku {
    grid-template-columns: 1fr;
    margin-top: 96px;
  }
  .pv .pv-dan--gyaku > *:first-child {
    order: 0;
  }
  .pv .pv-dan-bun,
  .pv .pv-dan--gyaku .pv-dan-bun {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ══════════════════════════════════════════
   箇条書き・表・折りたたみ
   ══════════════════════════════════════════ */
.pv .pv-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pv .pv-list-item {
  position: relative;
  padding-left: 36px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--tone-ink);
}
.pv .pv-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tone-ai);
}

.pv .pv-fold {
  border: 1px solid var(--tone-aoyaki);
  border-radius: 4px;
  background: var(--tone-kami);
  overflow: hidden;
}
.pv .pv-fold + .pv-fold {
  margin-top: 12px;
}
.pv .pv-fold-atama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ai);
}
.pv .pv-fold-atama::-webkit-details-marker {
  display: none;
}
.pv .pv-fold-yama {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-right: 2px solid var(--tone-ai);
  border-bottom: 2px solid var(--tone-ai);
  transform: translateY(-4px) rotate(45deg);
}
.pv .pv-fold[open] .pv-fold-yama {
  transform: translateY(3px) rotate(-135deg);
}
.pv .pv-fold-naka {
  padding: 0 24px 22px;
}
.pv .pv-fold-naka .pv-p {
  font-size: 18px;
  max-width: none;
}

/* 項目名｜値 の表 */
.pv .pv-hyou {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tone-aoyaki);
  background: var(--tone-kami);
}
.pv .pv-hyou th,
.pv .pv-hyou td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--tone-aoyaki);
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}
.pv .pv-hyou tr:last-child th,
.pv .pv-hyou tr:last-child td {
  border-bottom: none;
}
.pv .pv-hyou th {
  width: 12em;
  background: var(--tone-kami-usu);
  font-weight: 600;
  color: var(--tone-ai);
}
/* 3列の一覧表（区分｜内容｜成果）。列幅は中身にまかせる */
.pv .pv-hyou--3 th {
  width: auto;
  white-space: nowrap;
}
.pv .pv-hyou thead th {
  background: var(--tone-ai-usu);
}

/* ══════════════════════════════════════════
   藍の面（技術スタック・数字）
   値はトップv4のまま。面の色 #20334f は --tone-ai とは別の紺
   ══════════════════════════════════════════ */
.pv .pv-gijutsu {
  background: #20334f;
  border-radius: 8px;
  overflow: hidden;
}
.pv .pv-gijutsu-block {
  padding: 24px 28px;
}
.pv .pv-gijutsu-block + .pv-gijutsu-block {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pv .pv-gijutsu-heading {
  margin: 0 0 13px;
  font-family: var(--tone-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pv .pv-gijutsu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.pv .pv-gijutsu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.pv .pv-gijutsu-na {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}
.pv .pv-gijutsu-tag {
  flex-shrink: 0;
  font-family: var(--tone-font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-align: right;
}

/* ══════════════════════════════════════════
   区画のはじめ（ページの最初の画面）
   ══════════════════════════════════════════ */
.pv .pv-fv {
  padding: 130px 0;
  background: var(--tone-kinari);
}
.pv .pv-fv-naka {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 48px;
  align-items: center;
}
.pv .pv-fv-naka > * {
  min-width: 0;
}

/*
  2026-09-09指示【3】：/philosophy の最初の画面から代表の写真を外したときの型。
  2列（55/45）のままだと右半分が空くので、1列にして文字を中央に寄せる。
  新しい色・飾りは足していない（地は今までと同じ生成り、字も今までのまま）。
*/
.pv .pv-fv--naka .pv-fv-naka {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.pv .pv-fv--naka .pv-fv-sub {
  margin-left: auto;
  margin-right: auto;
}
.pv .pv-fv-sub {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  max-width: 30em;
  color: var(--tone-ink);
}
.pv .pv-fv .pv-btn-wrap {
  margin-top: 40px;
}
.pv .pv-fv-e {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f1e7;
}
.pv .pv-fv-e img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*
  2026-09-07：最初の画面のPC用の絵を16:9で描き起こしたので、その比率の枠を足した。
  既定の枠は4:3のまま（他の区画がそれを使っているため）。
  16:9の絵を4:3の枠に入れると左右が25%切れるので、必ずこの枠と組で使う。
*/
.pv .pv-fv-e--yoko {
  aspect-ratio: 16 / 9;
}
/* 絵の無いページ（約款など）は1列で見出しだけ */
.pv .pv-fv--moji .pv-fv-naka {
  grid-template-columns: 1fr;
}

/* 小さな札（最初の画面の3つ） */
.pv .pv-fuda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}
.pv .pv-fuda li {
  padding: 8px 18px;
  border: 1px solid var(--tone-ai);
  border-radius: 999px;
  background: var(--tone-kami);
  font-size: 15px;
  font-weight: 700;
  color: var(--tone-ai);
}

/* ══════════════════════════════════════════
   区画の見出し（英語の小札＋和文44px明朝）
   ══════════════════════════════════════════ */
.pv .pv-midashi {
  margin-bottom: 48px;
}
.pv .pv-midashi--naka {
  text-align: center;
}
.pv .pv-midashi-en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--tone-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tone-kin);
}
.pv .pv-midashi .pv-h2 {
  margin-bottom: 0;
}
.pv .pv-sec--ai .pv-midashi-en {
  color: rgba(247, 245, 240, 0.7);
}

/* ══════════════════════════════════════════
   小物（間のあけ方・番号・値段・答え・実績の並び）
   ══════════════════════════════════════════ */
.pv .pv-mt {
  margin-top: 16px;
}
.pv .pv-mt-oo {
  margin-top: 32px;
}
/* 中身がボタン1つだけの帯（見出しを持たないページの「次の一歩」） */
.pv .pv-btn-wrap--nashi {
  margin-top: 0;
}

/* 縦に積む座布団（読み物のページ） */
.pv .pv-tate {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 群の帯（こんな方におすすめ） */
.pv .pv-gun + .pv-gun {
  margin-top: 56px;
}
.pv .pv-gun-bar {
  margin-bottom: 24px;
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--tone-ai);
  color: var(--tone-kinari);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/*
  2026-09-09指示【1】【2】：「こんな方におすすめ」を4枚横1列にしたときの区分見出し。
  カードと同じ4列の格子に置き、1つが2列ぶんを占める＝左2枚・右2枚の真上にちょうど乗る。
  色は憲法の4色の範囲で2種。朱はボタン専用なので使わない。
    1組目（これから作りたい方）  … 藍の塗り（今までの帯と同じ）
    2組目（手作業が残っている方）… 藍の枠線＋金の下線。地は生成り
*/
.pv .pv-gun-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.pv .pv-gun-bars .pv-gun-bar {
  grid-column: span 2;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv .pv-gun-bar--nuri {
  background: var(--tone-ai);
  color: var(--tone-kinari);
  /* 枠線ぶんの高さを --waku とそろえるため、同じ太さの枠を藍で持たせる（見た目は塗りのまま） */
  border: 1.5px solid var(--tone-ai);
  border-bottom: 4px solid var(--tone-ai);
}
.pv .pv-gun-bar--waku {
  background: var(--tone-kinari);
  color: var(--tone-ai);
  border: 1.5px solid var(--tone-ai);
  border-bottom: 4px solid var(--tone-kin);
}
@media (max-width: 1080px) {
  /* 2列に折り返す幅では、見出し1つが2枚（＝2列）の上に来るよう占める列を減らす */
  .pv .pv-gun-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pv .pv-gun-bars .pv-gun-bar {
    grid-column: span 1;
  }
}

/*
  4枚横1列のカード。絵は正方形のままだと1枚290px幅＝高さ290pxになり、
  カード全体が画面の高さの半分（約450px）を超えるため、この区画だけ絵の枠を4:3にした。
  絵は object-fit:contain のままなので、潰れも切れもしない（周りに地色が残るだけ）。
*/
/*
  .pv .pv-card--e .pv-card-e100（1:1）と同じ詳細度では後に書いた向こうが勝つので、
  .pv-card--e を重ねて詳細度を1つ上げる。
  min-height:0 も要る：この枠はカード（縦のフレックス）の項目なので、
  既定の min-height:auto（中身＝正方形の絵の高さ288px）が 4:3 の高さ216pxを押し戻していた。
*/
.pv .pv-card--e.pv-card--worry .pv-card-e100 {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
/* 区分ごとに絵の下地を変え、どちらの組かを絵の側でも分かるようにする（憲法の4色の範囲） */
.pv .pv-card--e .pv-card-e100--nuri {
  background: var(--tone-ai-usu);
}
.pv .pv-card--e .pv-card-e100--waku {
  background: var(--tone-kinari);
}
/*
  2026-09-09指示【3】：悩みの見出しを、本文より一段濃い藍（--tone-ai-koi）の太字にする。
  下の朱の縦線つきの一言（.pv-kotae）は触っていない。
  4枚で朱の一言の頭がそろうよう、見出しの箱は3行ぶん（22px×1.5×3＝99px）で固定する
  （1枚目「FAXやメールの注文を、毎日手で打ち直している…」だけが3行になるため）。
*/
/* .pv-card-ttl--jiyuu の min-height:0 が後に書かれているので、重ねて詳細度を上げる */
.pv .pv-card .pv-card-ttl--jiyuu.pv-worry-toi {
  min-height: 99px;
  color: var(--tone-ai-koi);
  font-weight: 700;
}

/* カードの中の小さな絵（96px） */
.pv .pv-card-e96 {
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f1e7;
}
.pv .pv-card-e96 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/*
  2026-09-07：挿絵を大きく見せるカード。トップの「できること」（top.css の .rt-rc）と同じ型で、
  絵はカードの幅いっぱいの正方形、題名と本文はその下に置く。
  それまでは 96px 角（.pv-card-e96）に押し込んでいて、何の絵か分からなかった。
  .pv-card-e96 は、他の場所でアイコンとして使うために残してある。
  絵は contain（切らずに収める）。1:1でない絵が混ざっても欠けないようにするため。
*/
.pv .pv-card--e {
  padding: 0;
  overflow: hidden;
}
.pv .pv-card--e .pv-card-e100 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f6f1e7;
}
.pv .pv-card--e .pv-card-e100 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pv .pv-card--e .pv-card-bun {
  padding: 20px 24px 24px;
}
/* 高さをそろえない見出し（1枚だけのカード・行数がばらばらでよい場所） */
.pv .pv-card .pv-card-ttl--jiyuu {
  min-height: 0;
  font-size: 22px;
}
/* カードの補足を本文として読ませるとき（16px・薄墨のまま） */
.pv .pv-card .pv-card-note--hon {
  font-size: 16px;
  line-height: 1.8;
  color: var(--tone-ink);
}

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

/* 進め方の段（番号つき） */
/*
  2026-09-09：進め方の4段を、藍の細い縦線1本でつなぐ形にした。
  番号の丸は線の上に乗る（丸に地の色が付いているので、線は丸の手前で隠れる）。
  段の間の余白は縦線でつながるよう gap をやめ、各段の下余白（44px）でそろえた。

  憲法との関係：2026-09-05の「装飾の線（つなぎ線・ジグザグ）は使わない」は区画と区画を
  つなぐ飾りの線のこと。憲法【1】には「『診断の流れ』の3ステップ…だけは線の質感を使う」と
  例外が書かれており、この段はその「流れ」にあたる。新しい色は使っていない（藍のみ）。
*/
.pv .pv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/*
  左右の余白は4段とも同じにする（最後の段だけ枠が付くので、枠のぶんで
  番号の丸がずれないよう、枠の無い段にも同じ余白を持たせる）。
*/
.pv .pv-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 24px 44px 20px;
}
.pv .pv-step:last-child {
  padding-bottom: 20px;
}
/* つなぐ縦線。番号の丸の中心（左から20+24＝43px）を通し、次の段の丸まで伸ばす */
.pv .pv-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 43px;
  top: 32px;
  bottom: 8px;
  width: 2px;
  background: var(--tone-ai);
}
.pv .pv-maru {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tone-ai);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
}
/*
  最後の段（納得後に納品・お支払い）だけ枠を太くする（憲法「主役は1枚」）。
  枠の形・角丸・地の色はカード（.pv-card）と同じものを使う。新しい飾りは作っていない。
*/
.pv .pv-step--omo {
  border: 2px solid var(--tone-ai);
  border-radius: 8px;
  background: var(--tone-kami);
}
/* 本文の幅は憲法の目安（1行35字＝700px）。枠のぶん詰まらないよう、この段でも同じにする */
.pv .pv-step-bun .pv-p {
  max-width: 700px;
}
.pv .pv-step-bun {
  min-width: 0;
  flex: 1;
}
.pv .pv-hoshu {
  margin-top: 48px;
  /* トップのサービス「保守・伴走」の「詳しく見る」（/dev30#hoshu）で飛んだ時、固定の頭に隠れないように（2026-09-29） */
  scroll-margin-top: calc(var(--v5-head, 104px) + 16px);
}

/* 実績の数字の並び */
.pv .pv-suuji-retsu {
  text-align: center;
}
.pv .pv-nums-note {
  margin-top: 40px;
  text-align: center;
}

/* 実物2つ（外部リンクのカード） */
.pv .pv-jitsubutsu {
  margin-top: 32px;
}
.pv .pv-card--link {
  text-decoration: none;
  color: inherit;
}
.pv .pv-card--link:hover {
  border-color: var(--tone-shu);
}
.pv .pv-card-gamen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tone-kinari);
}

/* 値段 */
.pv .pv-price-retsu {
  gap: 32px;
}
.pv .pv-nedan {
  margin-top: 16px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tone-ai);
}
.pv .pv-nedan-tan {
  margin-left: 6px;
  font-family: var(--tone-font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--tone-usuzumi);
}
.pv .pv-card .pv-inc-ttl {
  margin-top: 20px;
  font-weight: 700;
  color: var(--tone-ai);
}
.pv .pv-order-cta {
  margin-top: 32px;
  align-items: flex-start;
}

/* 「開発30とは」の右に置く申込の札 */
.pv .pv-dan-bun--hidari {
  padding-left: 0;
  padding-right: 56px;
}
.pv .pv-moushikomi {
  display: flex;
  align-items: flex-start;
}
.pv .pv-moushikomi .pv-card {
  width: 100%;
  align-items: flex-start;
}

/* ══════════════════════════════════════════
   次の一歩（藍の面・ページの最後）
   ══════════════════════════════════════════ */
.pv .pv-next-naka {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pv .pv-next-naka .pv-h2 {
  margin-bottom: 24px;
}
.pv .pv-next-naka .pv-p {
  max-width: none;
}

/* ══════════════════════════════════════════
   理念の4段（使命・理念・志・約束）
   ══════════════════════════════════════════ */
.pv .pv-layer-label {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tone-kin);
}
.pv .pv-card .pv-layer-word {
  margin: 8px 0 0;
  font-size: 28px;
  line-height: 1.5;
}
/* 縦長の絵（人物写真）を置く最初の画面 */
.pv .pv-fv-e--tate {
  aspect-ratio: 3 / 4;
}

/* ══════════════════════════════════════════
   /order で足したもの
   ══════════════════════════════════════════ */
/* 段の中の絵の枠（横幅いっぱいの段で写真を使うとき） */
/*
  2026-09-09指示【1】：絵の枠。4:3（幅520pxで416px）は文字の塊（166px）に対して高すぎたので、
  16:9にしたうえで高さの上限を240pxにした。絵は object-fit:cover のままなので伸び縮みはしない
  （枠からはみ出す分だけ上下が切れる）。色・角丸・地の色は変えていない。
*/
.pv .pv-dan-e-waku {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f1e7;
}
/* 価格の段の番号（01〜04） */
.pv .pv-card .pv-tier-no {
  font-family: var(--tone-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tone-kin);
}
.pv .pv-naka {
  text-align: center;
}
/* 中央に寄せる箇条書き（条件の2行など） */
.pv .pv-list--chuu {
  margin-top: 20px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.pv .pv-list--chuu .pv-list-item {
  font-size: 16px;
  padding-left: 26px;
}
.pv .pv-list--chuu .pv-list-item::before {
  width: 12px;
  height: 12px;
  top: 0.45em;
}

/* ══════════════════════════════════════════
   相談フォーム（/contact-new）。PC幅の大きさ
   フォームは1つしか置けないので、ここだけ共用の組みを幅ごとに変える
   ══════════════════════════════════════════ */
.cf {
  padding: 130px 0;
  background: var(--tone-kami);
}
.cf .cf-haba {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
.cf .cf-ran {
  margin-top: 32px;
}
.cf .cf-ran:first-of-type {
  margin-top: 0;
}
.cf .cf-retsu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cf .cf-label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tone-ai);
}
.cf .cf-hissu {
  margin-left: 4px;
  color: var(--tone-shu);
}
.cf .cf-help {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-usuzumi);
}
.cf .cf-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--tone-aoyaki);
  border-radius: 8px;
  background: var(--tone-kami);
  color: var(--tone-ink);
  font-family: var(--tone-font-sans);
  font-size: 18px;
  line-height: 1.6;
}
.cf .cf-input:focus {
  outline: none;
  border-color: var(--tone-ai);
}
.cf .cf-textarea {
  min-height: 180px;
  resize: vertical;
}
.cf .cf-error {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tone-shu);
}
.cf .cf-error--zentai {
  margin-top: 24px;
  text-align: center;
}
.cf .cf-privacy {
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--tone-aoyaki);
  border-radius: 8px;
  background: var(--tone-kinari);
}
.cf .cf-privacy-ttl {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tone-ai);
}
.cf .cf-privacy-link {
  color: var(--tone-ai);
  text-decoration: underline;
}
.cf .cf-consent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tone-ai);
  cursor: pointer;
}
.cf .cf-consent input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--tone-ai);
}
.cf .cf-promise {
  margin-top: 32px;
  font-size: 20px;
  line-height: 1.8;
  color: var(--tone-ink);
  text-align: center;
}
.cf .cf-submit-wrap {
  margin-top: 24px;
  text-align: center;
}
.cf .cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  height: 64px;
  padding: 0 40px;
  border: none;
  border-radius: 999px;
  background: var(--tone-shu);
  color: #fff;
  font-family: var(--tone-font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.cf .cf-submit:hover:not([disabled]) {
  background: var(--tone-shu-koi);
}
.cf .cf-submit[disabled] {
  background: #c6b6b1;
  cursor: default;
}
.cf .cf-success {
  padding: 40px 24px;
  border: 1px solid var(--tone-ai);
  border-radius: 8px;
  background: var(--tone-kinari);
  font-size: 20px;
  line-height: 1.8;
  color: var(--tone-ai);
  text-align: center;
}

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

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

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