@charset "UTF-8";
/* =========================================================================
   page-voice.css — /voice（お客様の声）一覧・詳細専用スタイル
   voice/index.twig・voice/entry.twig が page-system.css の後に読み込む。
   T205: 「読みたくなる」ように、特集カード・本文の抜粋・読みやすい行幅に作り直し。
   ========================================================================= */

:root {
  --vc-bg: #f7f4ee;          /* ページの地 */
  --vc-card: #fffdf9;        /* カードの面 */
  --vc-text: #3b352f;        /* 本文（茶寄りの濃色） */
  --vc-sub: #6b6259;         /* 補助テキスト（抜粋・メタ） */
  --vc-accent: #c9a063;      /* 既存サイトのアクセント（装飾用） */
  --vc-accent-dark: #8a6428; /* 文字に使うアクセント（地に対して読める濃さ） */
  --vc-line: #e3ded4;
  --vc-serif: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Sawarabi Mincho", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

#voice #one-cl { background-color: var(--vc-bg); }
#voice main { color: var(--vc-text); }

/* 導入 ------------------------------------------------------------------- */
#voice .v-intro { text-align: center; padding: 56px 20px 44px; }
#voice .v-intro-en { font-family: var(--vc-serif); font-size: 14px; letter-spacing: .4em; color: var(--vc-accent-dark); margin: 0 0 14px; padding-left: .4em; }
#voice .v-intro-ttl { font-family: var(--vc-serif); font-size: 32px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; margin: 0 0 18px; }
#voice .v-intro-lead { font-size: 15px; line-height: 1.9; color: var(--vc-sub); margin: 0; }

/* カード一覧（一覧・詳細末尾で共通） ------------------------------------- */
#voice .v-list { list-style: none; margin: 0 auto 50px; padding: 0 20px; max-width: 1100px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
#voice .v-card { margin: 0; padding: 0; background: var(--vc-card); box-shadow: 0 1px 0 var(--vc-line), 0 8px 24px rgba(59, 53, 47, .06); }
#voice .v-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
#voice .v-card-link:hover { text-decoration: none; }
#voice .v-card-pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #ece6da; }
#voice .v-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
#voice .v-card-link:hover .v-card-pic img { transform: scale(1.04); }
#voice .v-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
#voice .v-card-meta { display: block; font-size: 13px; letter-spacing: .1em; color: var(--vc-accent-dark); margin-bottom: 10px; }
#voice .v-card-ttl { display: block; font-family: var(--vc-serif); font-size: 19px; font-weight: 500; line-height: 1.7; letter-spacing: .04em; margin-bottom: 14px; }
#voice .v-card-ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.9; color: var(--vc-sub); margin-bottom: 18px; }
#voice .v-card-more { display: block; margin-top: auto; font-size: 13px; letter-spacing: .12em; color: var(--vc-accent-dark); padding-top: 14px; border-top: 1px solid var(--vc-line); }
#voice .v-card-more::after { content: " →"; display: inline-block; transition: transform .3s ease; }
#voice .v-card-link:hover .v-card-more::after { transform: translateX(6px); }
#voice .v-card-link:hover .v-card-ttl { text-decoration: underline; text-decoration-color: var(--vc-accent); text-underline-offset: 6px; }

/* 特集（最新の 1 件） */
#voice .v-card.v-feature { grid-column: 1 / -1; }
#voice .v-feature .v-card-link { flex-direction: row; }
#voice .v-feature .v-card-pic { flex: 1.25; aspect-ratio: auto; min-height: 380px; }
#voice .v-feature .v-card-body { flex: 1; justify-content: center; padding: 40px 44px; }
#voice .v-feature .v-card-meta { font-size: 14px; }
#voice .v-feature .v-card-ttl { font-size: 28px; line-height: 1.6; margin-bottom: 20px; }
#voice .v-feature .v-card-ex { -webkit-line-clamp: 4; font-size: 15px; margin-bottom: 28px; }
#voice .v-feature .v-card-more { margin-top: 0; }

/* 詳細の末尾（他のお客様の声） */
#voice .inc-list02 { margin-bottom: 40px; }
#voice .rec-ttl { margin-top: 60px; }
#voice .v-list-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
#voice .v-list-compact .v-card-body { padding: 14px 16px 18px; }
#voice .v-list-compact .v-card-meta { font-size: 12px; margin-bottom: 6px; }
#voice .v-list-compact .v-card-ttl { font-size: 14px; line-height: 1.7; margin-bottom: 0; }

/* 詳細 ------------------------------------------------------------------- */
#voice .system-contents { background: none; padding: 0; margin-bottom: 40px; }
#voice .system-contents-inner { max-width: 760px; margin: 0 auto; padding: 24px 20px 20px; background: none; box-sizing: border-box; }
#voice .system-contents .system-date { font-size: 14px; letter-spacing: .12em; color: var(--vc-accent-dark); text-align: left; margin: 0 0 14px; }
#voice .system-contents .system-date::before { content: none; }
#voice .system-contents .system-ttl { font-family: var(--vc-serif); font-size: 30px; font-weight: 500; line-height: 1.65; letter-spacing: .05em; margin: 0 0 32px; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--vc-line); background: none; text-align: left; }
#voice .system-contents .system-i-pic { text-align: center; margin: 0 0 40px; border: 0; }
#voice .system-contents .system-i-pic img { display: block; width: 100%; height: auto; max-height: none; }
#voice .system-contents .wysiwyg { font-size: 17px; line-height: 2.05; letter-spacing: .04em; color: var(--vc-text); margin: 0 0 50px; }
#voice .system-contents .wysiwyg p { line-height: 2.05; margin: 0; }
#voice .system-contents .wysiwyg img { display: block; margin: 8px auto; }
#voice .system-contents .system-gallery { margin-top: 30px; }
#voice .system-contents .sub-title { font-family: var(--vc-serif); font-weight: 500; letter-spacing: .2em; }
#voice .system-contents .btnArea { margin: 40px 0 10px; }
#voice .system-contents .btnArea a { width: 100%; max-width: 420px; margin: 0 auto 14px; box-sizing: border-box; background: var(--vc-text); }
#voice .system-contents .btnArea a:hover { background: var(--vc-accent-dark); }

/* SP --------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  #voice .v-intro { padding: 36px 20px 28px; }
  #voice .v-intro-ttl { font-size: 22px; }
  #voice .v-intro-lead { font-size: 14px; }
  #voice .v-list { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 16px; }
  #voice .v-card-body { padding: 18px 18px 20px; }
  #voice .v-card-ttl { font-size: 17px; }
  #voice .v-feature .v-card-link { flex-direction: column; }
  #voice .v-feature .v-card-pic { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  #voice .v-feature .v-card-body { padding: 20px 18px 22px; }
  #voice .v-feature .v-card-ttl { font-size: 21px; }
  #voice .v-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 0 12px; }
  #voice .v-list-compact .v-card-body { padding: 10px 12px 14px; }
  #voice .v-list-compact .v-card-ttl { font-size: 13px; }
  #voice .rec-ttl { font-size: 20px; margin-top: 40px; }
  #voice .system-contents-inner { padding: 16px 16px 10px; }
  #voice .system-contents .system-ttl { font-size: 22px; margin-bottom: 24px; padding-bottom: 20px; }
  #voice .system-contents .system-i-pic { margin-bottom: 28px; }
  #voice .system-contents .wysiwyg { font-size: 16px; line-height: 2; }
}

/* PC の窓が狭いとき（main は 1100px 固定の設計なので 3 列を 2 列に落とす） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #voice .v-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #voice .v-feature .v-card-pic { min-height: 300px; }
  #voice .v-feature .v-card-body { padding: 28px 28px; }
  #voice .v-feature .v-card-ttl { font-size: 23px; }
  #voice .v-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}