@charset "UTF-8";
/* ============================================================================
   lp_voice.css ／ 「お客様の声」セクション 共通スタイル
   2026-07-29 作成 ／ 2026-07-30 全面追記（集計ブロック・帯見出し・代表の声・原文テキスト）

   ■ このファイルの目的
   これまで各講座の lp_<講座名>.css の末尾に追記していた声セクション用CSSを、
   1本の共通ファイルに切り出したものです。
   2026-07-29 までに lp_seizu.css と lp_kousa.css の2ファイルで、社内の全体レイアウト
   調整に巻き込まれて同じCSSが消える事故が起きたため、講座別CSSから独立させました。
   以後、講座別CSSが差し替えられても、このファイルが無事なら声セクションは崩れません。

   ■ 読み込み位置（重要）
   lp_template.php で、必ず lp_editor.css より【後】に読み込んでください。
       lp_<講座名>.css → lp_editor.css → lp_voice.css   ← この順序
   後に読ませることで、lp_editor.css の
   .detail-box{ background-color:#D9D9D9; height:776px } を素直に打ち消せます。
   （この順序であれば !important は原則不要です。唯一の例外は末尾の .voice-detail で、
     講座別CSS側に !important が付いているため打ち消しに必要です）

   ■ 講座色の変え方
   講座ごとに変わる色は、セクションのルート要素で変数を上書きするだけで済みます。
   既定値は seizu の色（#1f285f）なので、seizu では上書き不要です。
       #sec-survey{ --voice-accent:#○○○○○○; --voice-accent-bg:#○○○○○○; }
   この1行は講座別CSS（lp_<講座名>.css）に書いてください。

   ■ ⚠️ 未確認事項（反映後に必ず確認する）
   このファイルは全LPで読み込まれます。ローカルに各LPの本文HTMLが無いため、
   下記の汎用的なクラス名が他LPの本文で別の意味で使われていないかは未確認です。
       .sec-title / .sub-heading / .avatar / .voice-tag / .bar-row / .bar-label
   反映後、声セクションを持たないLPも1本ずつ開いて確認してください。
   （.voice-detail については影響を検出し、#sec-survey で絞って対処済み。末尾のコメント参照）

   ■ このファイルに入っていないもの
   ・.detail-box のグレー枠本体 … lp_editor.css に定義があり、そちらで足ります
   ・.voice-detail の余白       … 末尾で0に統一しました（旧値は講座ごとに違いました）

   ■ 依存
   セクションのDOMは fantomsemi/js/lp.js が生成します。
   本文側には <section id="voice-section"> と <div id="voiceDetailBox"> が必要です。

   ■ クラス名について（2026-07-30）
   原文テキスト表示のクラスは、モックアップでは .sheet / .qa / .q / .a でしたが、
   このファイルは【全LPで読み込まれる共通ファイル】のため、汎用名のままでは
   他セクションに影響します（実例：.qa は各講座CSSに .lp-app .qa として既存）。
   .voice-sheet / .vqa / .vq / .va に改名しています。HTML生成側も同じ名前です。
   ============================================================================ */

/* ============================================================================
   0. 講座ごとに変わる色（既定値＝seizu）
   ============================================================================ */
#sec-survey {
  --voice-accent:    #1f285f;  /* 見出し文字・グラフ1本目・数値 */
  --voice-accent-bg: #e8eaf4;  /* 帯見出しの背景（アクセント色の淡いトーン） */

  /* 評価5段階の棒グラフ。1が最も良い評価 */
  --voice-bar-1: #1f285f;
  --voice-bar-2: #4C6FB0;
  --voice-bar-3: #8FB2D9;
  --voice-bar-4: #C3D8EA;
  --voice-bar-5: #E4ECF4;
}

/* ============================================================================
   1. 帯見出し・中見出し
   ============================================================================ */

/* 本文コンテナ(max-width:960px)の外まで帯を広げる。
   テーマ既存の .lp-body .faq h2 / .lp-body .okyaku h2 と同じ全幅化手法に合わせている */
.sec-title {
  width: 100vw; position: relative; left: 50%; right: 50%;
  background: var(--voice-accent-bg, #e8eaf4);
  color: var(--voice-accent, #1f285f);
  text-align: center; font-weight: 700; font-size: 36px;
  padding: 30px 20px 48px; margin: 0 -50vw 40px;
}
.sec-title::before {
  content: ""; display: block; width: 52px; height: 4px;
  background: var(--voice-accent, #1f285f);
  border-radius: 2px; margin: 0 auto 20px;
}
@media screen and (max-width: 767px) {
  .sec-title { font-size: 24px; padding: 30px 20px 48px; }
}

/* セクション内の中見出し（同一セクション内での区切り。帯にはしない） */
.sub-heading {
  text-align: center; font-size: 22px; font-weight: 700;
  color: var(--voice-accent, #1f285f);
  margin: 64px 0 28px;
}
.sub-heading::before {
  content: ""; display: block; width: 36px; height: 3px;
  background: var(--voice-accent, #1f285f);
  border-radius: 2px; margin: 0 auto 14px; opacity: .6;
}
@media screen and (max-width: 767px) {
  .sub-heading { font-size: 19px; margin: 48px 0 22px; }
}

/* ============================================================================
   2. アンケート集計結果（見出しの％＋棒グラフ）
   ============================================================================ */
.survey-card {
  display: flex; gap: 40px; background: #fff; border: 1px solid #DCECF1;
  border-radius: 16px; box-shadow: 0 10px 28px rgba(20,50,70,.06);
  padding: 40px; margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  .survey-card { flex-direction: column; gap: 28px; padding: 28px 20px; }
}

.survey-left { flex: 1; text-align: center; }
.survey-eyebrow { font-size: 14px; color: #4a6478; margin-bottom: 6px; }
.survey-eyebrow::before { content: "\FF3C"; color: #B9C3CE; margin-right: .4em; }
.survey-eyebrow::after  { content: "\FF0F"; color: #B9C3CE; margin-left: .4em; }
.survey-lead { font-size: 18px; font-weight: 700; color: var(--voice-accent, #1f285f); margin: 6px 0 4px; }
.survey-num  { font-size: 64px; font-weight: 800; color: var(--voice-accent, #1f285f); line-height: 1; }
.survey-num span { font-size: 34px; }
.survey-result { font-size: 20px; font-weight: 700; margin: 6px 0 14px; }
.survey-result b { color: #F28A2E; }
.survey-note { font-size: 12px; color: #4a6478; line-height: 1.9; }

.survey-right {
  flex: 1.3; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.bar-row {
  display: grid; grid-template-columns: 128px 1fr 46px; align-items: center; gap: 12px;
}
@media screen and (max-width: 767px) {
  .bar-row { grid-template-columns: 100px 1fr 40px; gap: 8px; }
}
/* 320px幅では固定3列だとラベルが2行に折れて崩れるため、実測に合わせて詰める */
@media screen and (max-width: 359px) {
  .bar-row { grid-template-columns: 96px minmax(0, 1fr) 38px; }
  .bar-row .bar-label { font-size: 12px; line-height: 1.4; }
}
.bar-label { font-size: 13px; color: #2D344B; }
.bar-track { background: #EEF2F6; border-radius: 999px; height: 14px; overflow: hidden; }
.bar-pct   { font-size: 14px; font-weight: 700; text-align: right; }

/* 棒の色は5段階ぶんをクラスで持つ。lp.js が付けるのは幅(style="width:○%")だけ。
   ※以前は色もインラインstyleだったが、講座色を変えられるようにCSS側へ移した */
.bar-fill { height: 100%; border-radius: 999px; background: var(--voice-bar-1); }
.bar-fill--lv1 { background: var(--voice-bar-1); }
.bar-fill--lv2 { background: var(--voice-bar-2); }
.bar-fill--lv3 { background: var(--voice-bar-3); }
.bar-fill--lv4 { background: var(--voice-bar-4); }
.bar-fill--lv5 { background: var(--voice-bar-5); }

/* ============================================================================
   3. 代表的な受講者の声（3件）
   ============================================================================ */
.voice-cards { display: flex; flex-direction: column; gap: 20px; }
.voice-card2 {
  display: flex; gap: 20px; align-items: flex-start; background: #fff;
  border: 1px solid #DCECF1; border-radius: 14px;
  box-shadow: 0 6px 20px rgba(23,50,77,.06); padding: 28px;
}
@media screen and (max-width: 600px) {
  .voice-card2 { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: #F0F4F8;
}
.voice-card2-body { flex: 1; }
@media screen and (max-width: 600px) {
  .voice-card2-body { text-align: left; }
}
.voice-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: #1D8FB8;
  background: #E6F5FA; border: 1px solid #BEE3EE; border-radius: 999px;
  padding: 4px 14px; margin-bottom: 10px;
}
/* .voice-comment は lp.css / lp_editor.css に既存定義があり競合するため .vsec-comment */
.vsec-comment { font-size: 17px; font-weight: 700; color: #F28A2E; margin: 0 0 10px; line-height: 1.7; }
.voice-attr2  { font-size: 13px; color: #4a6478; }

/* ============================================================================
   4. アンケート原文カードリスト
   ============================================================================ */

/* 見出し直後にある場合は見出し-サブテキスト間・サブテキスト-カード間を
   「受講者から寄せられた成果の声」見出し下の余白（sub-heading margin-bottom:28px）に揃える */
.sub-heading + .raw-intro { margin-top: -18px; }
.raw-intro { text-align: center; margin-bottom: 28px; }
.raw-intro p { font-size: 14px; color: #4a6478; margin: 8px 0 0; }

/* lp_editor.css の .detail-box{ background-color:#D9D9D9; height:776px } を打ち消す。
   カードが入った時だけ .is-filled が付く（0件のときは要素ごと削除されるため付かない） */
.detail-box.is-filled {
  background-color: transparent;
  height: auto;
}
@media screen and (max-width: 767px) {
  .detail-box.is-filled { height: auto; aspect-ratio: unset; }
}

.voice-card-list {
  display: flex; flex-direction: column; gap: 20px; position: relative;
}
@media screen and (min-width: 768px) {
  .voice-card-list {
    max-height: 776px; overflow-y: auto; padding-right: 10px;
    scrollbar-width: thin; scrollbar-color: #B9DDE8 transparent;
  }
  .voice-card-list::-webkit-scrollbar { width: 8px; }
  .voice-card-list::-webkit-scrollbar-track { background: transparent; }
  .voice-card-list::-webkit-scrollbar-thumb { background: #B9DDE8; border-radius: 4px; }
}

.voice-card-scroll-fade {
  position: absolute; left: 0; right: 10px; bottom: 0; height: 28px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.voice-card-list.is-scrollable .voice-card-scroll-fade { opacity: 1; }

/* ============================================================================
   4-2. 原文がテキストの講座は、下端の白グラデーションを出さない（2026-07-31）

   ■ 直した不具合
   PCの内側スクロール枠（max-height:776px）の下端に文字がかかると、
   28pxの白グラデーション（透明→白80%）が文字の上に重なり、
   「文字の上半分が白く抜けて見える」状態になっていた。
   実測：カード1枚目 992px ＞ 枠 776px。「役立ちそう」は 2187〜2212px にあり、
   枠の下端 2189px までの2pxだけがグラデーションの最も濃い部分と重なっていた。

   ★カード01固有ではない。枠の下端に文字がかかれば必ず起きる。
     実測：スクロール位置0pxでカード01「役立ちそう」／700pxでカード02の設問行。
     01が目立つのは、ページを開いた直後が必ずその位置になるため。

   ■ なぜグラデーションを消すだけでよいか
   枠の下端で内容が切れること自体は、スクロールできる領域として当たり前の見え方。
   「壊れている」ように見せていたのは、切れ目に白がかぶって文字が半分溶けることだった。
   グラデーションを外すと、普通のスクロール枠と同じすっきりした切れ方になる。
   スクロールできることは、細いスクロールバー（#B9DDE8）で伝わる。

   ■ 枠そのものを外さない理由（2026-07-31・実測して判断）
   原文は畳まず見せたままにする方針（「原文が見えている方が信憑性がある」）。
   その状態で枠を外すと、52枚まで展開したときセクションが **46,274px** になる
   （カード1枚が756〜1143px）。776pxの枠は、この伸びを抑えるための設計。

   ■ #sec-survey で絞る理由
   このファイルは全LPで読み込まれる。kousa_top（未移行・原文は画像）の
   見え方をここで変えないため、刷新後のセクションだけに効かせる。
   ※画像版でも同じことは起きうるが、画像は途中で切れても文字ほど不自然に見えない
   ============================================================================ */
/* 要素そのものは残す（既存のlp.jsがカードの挿入位置の基準にしているため消せない） */
#sec-survey .voice-card-scroll-fade { display: none; }

.voice-card {
  background: #FFF; border: 1px solid #DCECF1; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(23,50,77,0.08); padding: 32px;
  opacity: 0; transform: translateY(8px);
  animation: voiceCardFadeIn .4s ease forwards;
}
@media screen and (max-width: 767px) {
  .voice-card { padding: 16px; }
}
@keyframes voiceCardFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-card { animation: none; opacity: 1; transform: none; }
}

.voice-card-no {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font-size: 13px; font-weight: 700; color: #1D8FB8; background: #E6F5FA;
  border-radius: 999px; padding: 6px 14px; margin-bottom: 12px;
}
.voice-card-title {
  font-size: 18px; font-weight: 700; line-height: 1.5; color: #2D344B; margin: 0 0 8px;
}
.voice-card-attr {
  font-size: 13px; color: #4a6478; margin: 0 0 16px;
}

/* 原文の外枠。段階Aでは中に画像、段階Bでは中に .voice-sheet が入る */
.voice-mail-wrap {
  position: relative; display: block; width: 100%;
  border: 1px solid #DCECF1; border-radius: 8px; overflow: hidden;
  background: #F7FBFC; padding: 10px 0 0;
}
.voice-mail-wrap img { display: block; width: 100%; height: auto; }

.voice-card-footer {
  display: flex; justify-content: flex-end; align-items: center; margin-top: 14px;
}
.voice-count { font-size: 12px; color: #5c7185; }

.voice-detail-more-wrap { text-align: center; margin-top: 36px; }
.voice-detail-remain { font-size: 13px; color: #4a6478; margin: 0 0 10px; }
.voice-detail-more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 58px; width: 100%; max-width: 360px;
  background: #E6F5FA; color: #17324D; border: 1px solid #B9DDE8;
  border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.voice-detail-more-btn:hover { background: #D8EFF7; }
.voice-detail-more-btn:disabled { opacity: .6; cursor: default; }
.voice-detail-more-btn svg { width: 16px; height: 16px; }
.voice-detail-done-msg { font-size: 14px; color: #4a6478; margin-top: 36px; }

/* ============================================================================
   5. 原文のテキスト表示（段階B・2026-07-30 新規）
   これが入ると、キャプチャ画像のFTPアップロードが完全に不要になります。
   ============================================================================ */
.voice-sheet {
  background: #fff; border: 1px solid #E1E6EC; border-radius: 8px;
  margin: 0 10px 10px; padding: 22px 20px 16px;
  font-size: 13.5px; line-height: 1.85;
}
@media screen and (max-width: 767px) {
  .voice-sheet { margin: 0 8px 8px; padding: 16px 14px 12px; font-size: 13px; }
}

.voice-sheet .vqa { margin: 0 0 15px; }
.voice-sheet .vqa:last-of-type { margin-bottom: 18px; }

/* 設問 */
.voice-sheet .vq { margin: 0; color: #3a3a3a; font-weight: 700; }
/* 回答。アンケートの改行を活かす（原文どおりに見せるため） */
.voice-sheet .va { margin: 1px 0 0; color: #1a1a1a; white-space: pre-line; }
.voice-sheet .vdate { margin: 0; color: #8a949e; font-size: 12.5px; }

/* 回答が空の設問は行ごと出さない。JS側でも出さないが、二重の保険 */
.voice-sheet .vqa:has(.va:empty) { display: none; }

/* ============================================================================
   6. スマホでの原文の折りたたみ（2026-07-30 新規）

   実測（375px幅・1カードの高さ）：
     画像       1,127px
     テキスト   2,889px  ← 折りたたまないとカード1枚が画像の2.5倍になる
     折りたたみ   674px

   実装は <details>／<summary>。クリック処理はブラウザ任せなので、
   JSのイベント登録が失敗しても開閉できなくなることがありません。
   PCは summary を隠すだけ（lp.js が open 付きで出力するため常に開いた状態）。
   ※向きを変えても再描画はしません（開閉状態は描画時に決まります）
   ============================================================================ */
.voice-raw { display: block; }
.voice-raw > summary {
  display: none;               /* PCでは出さない */
  list-style: none;
  cursor: pointer;
}
.voice-raw > summary::-webkit-details-marker { display: none; }

@media screen and (max-width: 767px) {
  .voice-raw > summary {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: calc(100% - 16px); margin: 0 8px 8px; padding: 12px 14px;
    background: #E6F5FA; border: 1px solid #B9DDE8; border-radius: 8px;
    color: #17324D; font-size: 13px; font-weight: 700;
  }
  .voice-raw > summary::after {
    content: ""; width: .55em; height: .55em;
    border-bottom: 2px solid #17324D; border-right: 2px solid #17324D;
    transform: rotate(45deg) translateY(-.15em);
    transition: transform .15s ease;
  }
  .voice-raw[open] > summary::after {
    transform: rotate(225deg) translateY(-.15em);
  }
  .voice-raw[open] > summary { margin-bottom: 0; }
}

/* ============================================================================
   7. セクション全体の余白とアンカー
   ============================================================================ */

/* 入れ子<section>によるpadding二重適用の打ち消し（テーマの section{padding:...} 対策）。
   あわせて、講座別CSSの .voice-detail に付いている
   margin-top:50px !important / padding-top:50px !important（スマホは30px）も打ち消す。
   これは前回案件で単独セクションだった頃の余白指定で、見出し付きセクションの内側に
   なった今は不要。!important が付いているため、こちらも !important で上書きする。

   ★★ #sec-survey で必ず絞ること（2026-07-30）
   このファイルは全LPで読み込まれる。絞らずに `.voice-detail` と書くと、
   刷新前の7講座（koso-basic / koso-func / koso-plan / kousa / kyoudo / onestep / sokusen）が
   持っている `.voice-detail{ margin-top:70px; padding-top:70px }` を
   !important で潰してしまい、7ページの声セクションの上余白が一斉に消える。
   実際に静的照合で検出した（_tmp/verify_lp_voice.py の④）。
   #sec-survey は刷新後のセクションにしか無いIDなので、これで刷新済みのページだけに効く */
#sec-survey .voice-detail {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  margin-top: 0 !important; padding: 0 !important;
}
@media screen and (max-width: 767px) {
  #sec-survey .voice-detail { margin-top: 0 !important; }
}

/* グローバルメニュー「受講者の声」のジャンプ先の位置調整。
   テーマ共通の scroll-margin-top(PC:4.5vw≒64px)だけでは固定ヘッダー(実測81px)に
   帯の上部が隠れるため、この帯専用に余白を上乗せする。
   ※本文側に <div id="voice-anchor" class="c_anchor"></div> の設置が必要 */
#voice-anchor { scroll-margin-top: 100px; }