@charset "utf-8";
/* =========================================================
   相続手続支援センター ／ お客様の声（一覧・詳細）とプライバシーポリシーの追加分
   - 読むのは koe-list.html・koe-detail.html・privacy.html の3ページだけ。
   - 部品は style.css・page.css のものを使い、ここには足りない分だけを書く。
     色は既存のトークン（--ink・--line・--green-d など）だけを使い、新しい色は増やさない。
   - 文字の大きさ：本文16px（1カラム）。3列のカードは14px。最小は12px。
   ========================================================= */

/* ---------- 節の余白 ----------
   ページヘッダーの下に▲屋根1つ。下は最終CTAの枠が100px上へ出るぶんを足す
   （ブログ一覧の #list と同じ組み方） */
#vlist, #vdetail, #policy{padding:50px 0 calc(var(--space) + 100px)}
#vlist.roof::before, #vdetail.roof::before, #policy.roof::before{background:var(--white)}


/* =========================================================
   お客様の声 一覧（koe-list.html）
   ========================================================= */

/* 件数と表示中の範囲 */
.vcount{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 16px;
  padding-bottom:18px; margin-bottom:40px; border-bottom:1px solid var(--line-2);
  font-size:14px; letter-spacing:.08em; color:var(--ink-2);
}
.vcount b{font-family:var(--font-en); font-weight:500; font-size:18px; color:var(--ink); margin:0 2px}

/* カードは TOP・お客様の声ページの .vcard（上が半円の枠）をそのまま使う。
   ここは一覧なので3列に並べ、カード全体をリンクにする。
   2026-10-30：TOPと同じく人物イラストと★を付けた（★はアンケートの5段階。古い用紙の声は★なし） */
.vlist{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
  margin:0; padding:0; list-style:none;
}
.vlist > li{display:flex; min-width:0}
.vlist .vcard{
  flex:1 1 auto; min-width:0; text-decoration:none; color:var(--ink);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vlist .vcard:hover{transform:translateY(-5px); box-shadow:0 12px 24px rgba(107,61,44,.12)}
.vlist .vcard:focus-visible{outline:3px solid var(--green-d); outline-offset:4px}
/* 上の行（イラスト＋名前または「お客様アンケート」＋日付）。並べ方は TOP の .vcard .top と同じ */
.vlist .vcard .meta{display:block; text-align:left}
.vlist .vcard .meta time{font-family:var(--font-en); font-size:13px; letter-spacing:.08em}
/* 見出しは長さがまちまち（最大30字）なので、TOPの20pxより一段小さくして2行に収める */
.vlist .vcard h3{
  margin:0; font-size:18px; line-height:1.75; letter-spacing:.06em; text-align:center;
  text-wrap:balance; line-break:strict; overflow-wrap:anywhere;
  word-break:auto-phrase;   /* 文節の切れ目で折る（「わかりやす／く」のような割れを防ぐ。未対応のブラウザは通常どおり折れる） */
}
/* 本文の冒頭は3行で切る */
.vlist .vcard p{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  overflow-wrap:anywhere;
}
/* 「続きを読む」はカードの下端にそろえる */
.vmore{
  margin-top:auto; align-self:center;
  display:inline-flex; align-items:center; gap:8px; padding-bottom:3px;
  font-family:var(--font-jp); font-weight:700; font-size:14px; letter-spacing:.08em; color:var(--brown);
  border-bottom:1px solid var(--line); transition:border-color .25s;
}
.vmore .ar{font-family:var(--font-en); font-weight:500; transition:transform .25s ease}
.vlist .vcard:hover .vmore{border-bottom-color:var(--brown)}
.vlist .vcard:hover .vmore .ar{transform:translateX(4px)}

/* ページ送り。丸の形は page.css の .pager / .pg をそのまま使い、
   「…」と前後の矢印だけ足す。狭い画面では現在のページの両隣を畳んで1行に収める */
.vpager{flex-wrap:wrap; align-items:center}
.vpager .pg.gap{width:auto; min-width:16px; border:0; background:none; color:var(--ink-3)}
.vpager .pg.arrow{font-size:18px}
.vnote{margin-top:44px; text-align:center; font-size:13px; letter-spacing:.06em; color:var(--ink-2)}


/* =========================================================
   お客様の声 詳細（koe-detail.html）
   ★ .article（本文の組版）・.artmeta・.pn はブログの記事ページの部品を使っている
   ========================================================= */

/* パンくずの最後（声の見出し）。パンくずは縦に立つので、長い見出しはページヘッダーの高さに
   収まらず2列に割れる。縦の長さ（inline-size）で切って「…」にする。狭い画面はさらに短く */
.p-voice-detail .crumb #vCrumb{
  display:inline-block; max-inline-size:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 本文は1カラム。行が長くなりすぎないよう段の幅を絞る */
.vart{width:min(100%,760px); margin-inline:auto}
.vart .art-h1{text-wrap:balance; line-break:strict; overflow-wrap:anywhere; word-break:auto-phrase}

/* 本文＝お客様が書いた文。便箋のように枠で囲み、左上に引用符を置く。
   ★お客様の原文なので、表記はデータのまま（直さない） */
.vletter{
  position:relative; background:var(--white);
  border:5px solid var(--ink); border-radius:var(--r-lg);
  padding:clamp(34px,4.4vw,52px) clamp(24px,4.4vw,52px) clamp(26px,3.6vw,40px);
}
.vletter::before{
  content:"“"; position:absolute; top:10px; left:clamp(18px,3vw,30px);
  font-family:var(--font-jp); font-weight:700; font-size:54px; line-height:1; color:var(--green-l);
}
.article .vletter p{margin:0; color:var(--ink); overflow-wrap:anywhere}
.article .vletter p + p{margin-top:.9em}
.vletter .vfrom{margin-top:18px; text-align:right; font-family:var(--font-jp); font-size:15px; letter-spacing:.08em; color:var(--ink-2)}

/* アンケート用紙 */
.article h2.vsheet-ttl{margin-top:64px}
.vsheet{margin:0}
.vsheet a{
  display:block; width:fit-content; max-width:100%; margin-inline:auto;
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--white);
  transition:box-shadow .25s ease;
}
.vsheet a:hover{box-shadow:0 10px 24px rgba(107,61,44,.14)}
.vsheet a:focus-visible{outline:3px solid var(--green-d); outline-offset:4px}
.vsheet img{display:block; max-width:100%; height:auto}
.vsheet figcaption{margin-top:12px; text-align:center; font-size:13px; letter-spacing:.06em; color:var(--ink-2)}

/* 前後の声。記事ページの .pn（枠の付いたリンク）を2列で使う */
.vnav{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:56px}
.vnav .pn .lb{font-family:var(--font-jp); font-size:12px; letter-spacing:.1em; color:var(--ink-2)}
.vnav .pn .tt{overflow-wrap:anywhere}
.vnav .pn.next{grid-column:2}
.vback{margin-top:44px; text-align:center}

/* 見つからないとき */
.vnone{width:min(100%,640px); margin-inline:auto; text-align:center}
.vnone-ttl{font-size:clamp(20px,2.4vw,26px); line-height:1.7; letter-spacing:.06em}
.vnone p{margin-top:18px; font-size:16px; line-height:2.1; color:var(--ink-2)}


/* =========================================================
   プライバシーポリシー（privacy.html）
   行の長さは40字前後（16px×字送り.06em×40字＝約680px）
   ========================================================= */
.policy{width:min(100%,680px); margin-inline:auto}
.pp-intro{font-size:16px; line-height:2.1; color:var(--ink)}
.pp-list{margin:44px 0 0; padding:0; list-style:none; counter-reset:pp}
.pp-list > li{counter-increment:pp; padding:34px 0 36px; border-top:1px solid var(--line-2)}
.pp-list > li:last-child{border-bottom:1px solid var(--line-2)}
/* 見出しの頭に番号（01〜）。番号は表示だけ（ol なので読み上げでも順番が伝わる） */
.pp-list h2{
  display:flex; align-items:baseline; gap:14px; margin:0 0 14px;
  font-size:clamp(18px,1.9vw,21px); line-height:1.7; letter-spacing:.06em;
}
.pp-list h2::before{
  content:counter(pp, decimal-leading-zero); flex:0 0 auto;
  font-family:var(--font-en); font-weight:500; font-size:16px; letter-spacing:.08em; color:var(--green-d);
}
.pp-list p{font-size:16px; line-height:2.1; color:var(--ink-2)}
.pp-list p + p, .pp-list p + ul, .pp-list ul + p{margin-top:14px}
.pp-dots{margin:0; padding:0; list-style:none}
.pp-dots li{position:relative; padding-left:22px; font-size:16px; line-height:2.0; color:var(--ink)}
.pp-dots li::before{content:""; position:absolute; left:4px; top:.85em; width:8px; height:8px; border-radius:50%; background:var(--green)}
.pp-list .pp-box{
  padding:16px 22px; background:var(--cream-2); border-radius:var(--r-sm);
  font-size:15px; line-height:2.0; color:var(--ink);
}
.policy a{color:var(--brown); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.policy a:hover{text-decoration:none}
.pp-info a[href^="tel:"]{white-space:nowrap}
/* 事業者とお問い合わせ窓口：項目名を左、内容を右に。狭い幅では縦に積む */
.pp-info{display:grid; grid-template-columns:9em minmax(0,1fr); gap:14px 20px; margin:0; font-size:16px; line-height:2.0}
.pp-info dt{font-weight:700; color:var(--ink); letter-spacing:.06em}
.pp-info dd{margin:0; color:var(--ink-2)}
.pp-info dd p + ul{margin-top:6px}
.pp-date{margin-top:32px; text-align:right; font-size:14px; line-height:2.0; color:var(--ink-2)}


/* ---------- 画面幅ごと ---------- */
@media (max-width:1024px){
  .vlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  #vlist, #vdetail, #policy{padding:40px 0 calc(var(--space-sm) + 90px)}
  .vcount{margin-bottom:32px}
  .vlist .vcard{padding:40px 24px 28px}
  .p-voice-detail .crumb #vCrumb{max-inline-size:5em}
  .vnav{grid-template-columns:1fr}
  .vnav .pn.next{grid-column:auto}
  .pp-list > li{padding:28px 0 30px}
  .pp-info{grid-template-columns:1fr; gap:2px}
  .pp-info dd + dt{margin-top:14px}
}
@media (max-width:640px){
  .vlist{grid-template-columns:1fr; gap:20px}
}
/* 狭い画面のページ送り：丸を小さくし、現在のページの両隣（.near）を畳む
   （320px幅でも「‹ 1 … 5 … 10 ›」が1行に収まる） */
@media (max-width:520px){
  .vpager{gap:6px}
  .vpager .pg{width:38px; height:38px; font-size:14px}
  .vpager .pg.gap{width:auto; min-width:14px}
  .vpager .pg.near{display:none}
}


/* 2026-10-30：詳細の便箋の上に、人物イラストと★（一覧のカードと同じ顔・同じ点数）。部品は .vcard の .av・.stars と同じ形 */
.vwho{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:24px}
.vwho .av{
  flex:0 0 auto; width:72px; aspect-ratio:1; border-radius:50%;
  background:var(--cream-2); border:2px solid var(--line-2); overflow:hidden; display:block;
}
.vwho .av img{width:100%; height:100%; object-fit:cover; display:block}
.vwho .stars{position:relative; display:flex; gap:4px}
.vwho .stars i{display:block; width:22px; height:22px; background:var(--orange-d);
  clip-path:polygon(50% 0%,61.8% 35.4%,100% 38.2%,69.1% 61.8%,79.4% 100%,50% 76.4%,20.6% 100%,30.9% 61.8%,0% 38.2%,38.2% 35.4%)}
.vwho .stars i.off{background:var(--line-2)}