@charset "UTF-8";
/*
 * 企業サイト「VOC分析」ページ(template-voc-analysis.php)専用スタイル
 * - 正: 確定モック(2026-10-16)のページ内<style>から、
 *   モック専用の指定(.mock-draft の黄色下線・凡例 .voc-legend・モック注記 .voc-mock-note・背景画像の相対パス上書き)を除いて移植
 * - クラスはすべて .voc- 接頭辞(既存テーマのクラスには指定を足さない)
 * - 読み込みは private/functions/99_voc_analysis.php で、このテンプレートのページのときだけ
 */

/* ---- パンくず(現行テーマに無いため新規) ---- */
.voc-breadcrumb { width: 1040px; margin: 16px auto 0; font-size: 12px; color: #666; }
.voc-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.voc-breadcrumb li + li:before { content: ">"; margin: 0 8px; color: #999; }
.voc-breadcrumb a { color: inherit; }

/* ---- 本文の枠 ---- */
.voc-page { display: block; }
.voc-inner { width: 1040px; margin: 0 auto; }
.voc-lead { margin: 56px auto 0; font-size: 15px; line-height: 2; }
.voc-section { padding-top: 90px; }
.voc-heading { text-align: center; }
.voc-heading__num {
  display: inline-block; margin-right: 18px; vertical-align: -2px;
  font-family: YakuHanJP, "EB Garamond", serif; font-size: 44px; font-weight: 500;
  color: #99001c; line-height: 1;
}
.voc-heading__title { font-family: "Yu Mincho", "YuMincho", serif; font-weight: normal; font-size: 32px; }
.voc-text { margin: 36px auto 0; font-size: 15px; line-height: 2; }
.voc-sub { margin-top: 44px; }

/* ---- 記事リンクのカード ---- */
.voc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.voc-card__inner {
  position: relative; display: block; height: 100%;
  padding: 16px 44px 16px 20px; background: #fff; border: 1px solid #d6dbe4;
  color: inherit; text-decoration: none; transition: border-color .25s ease, background-color .25s ease;
}
.voc-card__inner:after {
  content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -4px;
  border-top: 1px solid #0e192d; border-right: 1px solid #0e192d; transform: rotate(45deg);
}
.voc-card__inner:hover { border-color: #0e192d; background: #f3f7fd; }
.voc-card__type { display: block; font-size: 11px; color: #99001c; letter-spacing: .08em; font-family: YakuHanJP, "Montserrat", sans-serif; }
.voc-card__title { display: block; margin-top: 4px; font-size: 14px; font-weight: bold; line-height: 1.6; }

/* ---- 5: 信頼できるAI分析の3条件 ---- */
.voc-points { margin: 40px 0 0; padding: 34px 40px 38px; background: #f3f7fd; }
.voc-points__title { text-align: center; font-size: 20px; font-weight: bold; letter-spacing: .08em; }
.voc-points__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; }
.voc-points__item { padding: 26px 20px 24px; background: #fff; border-top: 4px solid #af0b2f; text-align: center; }
.voc-points__item__num { display: block; font-family: YakuHanJP, "EB Garamond", serif; font-size: 30px; color: #99001c; line-height: 1; }
.voc-points__item__text { display: block; margin-top: 14px; font-size: 16px; font-weight: bold; line-height: 1.7; }

/* ---- 6: 比較ページ・製品への導線 ---- */
.voc-feature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 40px 0 0; }
.voc-feature__item {
  position: relative; display: block; padding: 30px 60px 30px 32px;
  background: #0e192d; color: #fff; text-decoration: none; transition: opacity .25s ease;
}
.voc-feature__item--product { background: #99001c; }
.voc-feature__item:hover { opacity: .85; }
.voc-feature__item:after {
  content: ""; position: absolute; top: 50%; right: 30px; width: 12px; height: 12px; margin-top: -6px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}
.voc-feature__item__en { display: block; font-family: YakuHanJP, "Montserrat", sans-serif; font-size: 12px; letter-spacing: .12em; opacity: .8; }
.voc-feature__item__title { display: block; margin-top: 6px; font-size: 20px; font-weight: bold; line-height: 1.5; }
.voc-feature__item__text { display: block; margin-top: 8px; font-size: 13px; line-height: 1.7; }

/* ---- 7: 業種ラベル・空の箱 ---- */
.voc-label {
  display: inline-block; min-width: 4.5em; margin-bottom: 6px; padding: 1px 8px;
  font-size: 11px; font-weight: bold; text-align: center; color: #fff; background: #0e192d; letter-spacing: .05em;
}

/* ---- 8: 品質経営Webへの導線 ---- */
.voc-qdm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 22px 0 0; }
.voc-qdm__item {
  position: relative; display: block; padding: 22px 50px 22px 24px;
  border: 1px solid #0e192d; color: inherit; text-decoration: none; transition: background-color .25s ease;
}
.voc-qdm__item:hover { background: #f3f7fd; }
.voc-qdm__item:after {
  content: ""; position: absolute; top: 50%; right: 24px; width: 8px; height: 8px; margin-top: -4px;
  border-top: 1px solid #0e192d; border-right: 1px solid #0e192d; transform: rotate(45deg);
}
.voc-qdm__item__site { display: block; font-size: 11px; color: #99001c; letter-spacing: .08em; }
.voc-qdm__item__title { display: block; margin-top: 4px; font-size: 16px; font-weight: bold; }
.voc-qdm__item--top { grid-column: 1 / -1; background: #0e192d; color: #fff; }
.voc-qdm__item--top:hover { background: #22304d; }
.voc-qdm__item--top:after { border-color: #fff; }
.voc-qdm__item--top .voc-qdm__item__site { color: rgba(255,255,255,.75); }

/* 品質経営Webの記事カード */
.voc-insight__meta { display: flex; align-items: baseline; gap: 12px; }
.voc-insight__date { font-size: 11px; color: #888; font-family: YakuHanJP, "Montserrat", sans-serif; }
.voc-insight__text { display: block; margin-top: 6px; font-size: 13px; line-height: 1.7; color: #444; }

/* 品質経営の定義(引用) */
.voc-quote { margin: 36px 0 0; padding: 26px 32px; background: #f3f7fd; border-left: 4px solid #99001c; }
.voc-quote__text { font-family: "Yu Mincho", "YuMincho", serif; font-size: 18px; line-height: 1.9; }
.voc-quote__cite { display: block; margin-top: 10px; font-size: 11px; font-style: normal; color: #777; text-align: right; }
.voc-quote__cite--right { margin-top: 6px; }

/* 循環サイクル(5ステップ横並び) */
.voc-cycle { display: flex; align-items: stretch; gap: 30px; margin: 26px 0 0; padding: 0; list-style: none; }
.voc-cycle__item {
  position: relative; flex: 1 1 0; padding: 20px 8px; text-align: center;
  background: #fff; border: 1px solid #0e192d; border-top: 4px solid #af0b2f;
}
.voc-cycle__item + .voc-cycle__item:before {
  content: ""; position: absolute; top: 50%; left: -22px; margin-top: -7px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #99001c;
}
.voc-cycle__num { display: block; font-family: YakuHanJP, "EB Garamond", serif; font-size: 22px; color: #99001c; line-height: 1; }
.voc-cycle__label { display: block; margin-top: 8px; font-size: 18px; font-weight: bold; letter-spacing: .1em; }
.voc-cycle__note { margin-top: 18px; font-size: 14px; line-height: 1.9; }

/* 書籍紹介 */
.voc-book { margin: 22px 0 0; padding: 24px 28px; border: 1px solid #d6dbe4; }
.voc-book__title { font-size: 17px; font-weight: bold; line-height: 1.6; }
.voc-book__meta { margin-top: 4px; font-size: 12px; color: #666; }
.voc-book__text { margin-top: 12px; font-size: 14px; line-height: 1.9; }

/* ---- 9: FAQ ---- */
.voc-faq { margin: 30px 0 0; }
.voc-faq__item { border-bottom: 1px solid #d6dbe4; }
.voc-faq__item:first-child { border-top: 1px solid #d6dbe4; }
.voc-faq__q {
  position: relative; display: block; padding: 18px 50px 18px 52px; cursor: pointer;
  font-size: 15px; font-weight: bold; line-height: 1.6; list-style: none;
}
.voc-faq__q::-webkit-details-marker { display: none; }
.voc-faq__q:before, .voc-faq__a:before {
  position: absolute; left: 12px; font-family: YakuHanJP, "EB Garamond", serif; font-size: 24px; line-height: 1;
}
.voc-faq__q:before { content: "Q"; top: 18px; color: #99001c; }
.voc-faq__q:after {
  content: "+"; position: absolute; top: 50%; right: 18px; margin-top: -12px;
  font-size: 22px; line-height: 1; font-weight: normal;
}
.voc-faq__item[open] .voc-faq__q:after { content: "−"; }
.voc-faq__a { position: relative; padding: 0 50px 22px 52px; font-size: 14px; line-height: 1.9; }
.voc-faq__a:before { content: "A"; top: 0; color: #0e192d; }

/* ---- 10: CTA ---- */
.voc-cta { margin: 40px 0 0; padding: 44px 30px; background: #f3f7fd; text-align: center; }
.voc-cta__list { display: flex; justify-content: center; gap: 46px; margin: 26px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.voc-cta .button { width: 260px; }

/* ---- 2026-10-16 組み直し版で追加 ---- */
.voc-text + .voc-text { margin-top: 1em; }
.voc-text--center { text-align: center; }

/* リード: このページで分かること */
/* 2026-10-19 直下の目次(テーマ app.css の .page-nav--multi-line .page-nav__list)とそろえる:
 *   幅846px・中央/白背景/影 0 3px 3px 0 rgba(0,0,0,.1)/角丸なし/左右の内側余白80px(上下は本文用に24px) */
.voc-intro { max-width: 846px; margin: 30px auto 0; padding: 24px 80px; background: #fff; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); }
.voc-intro__title { font-size: 16px; font-weight: bold; }
.voc-intro__list { margin: 12px 0 0; padding: 0; list-style: none; }
.voc-intro__list li { position: relative; padding-left: 1.4em; font-size: 15px; line-height: 1.9; }
.voc-intro__list li:before { content: ""; position: absolute; left: 2px; top: .8em; width: 7px; height: 7px; background: #99001c; }

/* 相談ボタン(控えめな枠線ボタン) */
.voc-btn {
  position: relative; display: inline-block; padding: 12px 44px 12px 26px;
  font-size: 14px; font-weight: bold; color: #99001c; background: #fff; border: 1px solid #99001c;
  text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease;
}
.voc-btn:after {
  content: ""; position: absolute; top: 50%; right: 20px; width: 7px; height: 7px; margin-top: -4px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}
.voc-btn:hover { background: #99001c; color: #fff; }

/* こんなお悩み(チェックリスト) */
.voc-check { max-width: 780px; margin: 36px auto 0; padding: 0; list-style: none; background: #fff; border: 1px solid #d6dbe4; }
.voc-check li { position: relative; padding: 16px 20px 16px 58px; font-size: 15px; line-height: 1.7; }
.voc-check li + li { border-top: 1px dashed #d6dbe4; }
.voc-check li:before {
  content: ""; position: absolute; left: 22px; top: 18px; width: 18px; height: 18px;
  border: 2px solid #0e192d; box-sizing: border-box;
}
.voc-check li:after {
  content: ""; position: absolute; left: 28px; top: 16px; width: 7px; height: 14px;
  border-right: 3px solid #99001c; border-bottom: 3px solid #99001c; transform: rotate(45deg);
}

/* 図と出典 */
.voc-figure { margin: 28px auto 0; text-align: center; }
.voc-figure img { max-width: 100%; height: auto; border: 1px solid #e3e7ee; }
.voc-figure figcaption { margin-top: 6px; font-size: 11px; color: #888; text-align: center; }
.voc-figure--narrow { max-width: 740px; }
.voc-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.voc-figures .voc-figure { margin-top: 0; }

/* 2: ステップ */
.voc-steps { margin: 40px 0 0; padding: 0; list-style: none; }
.voc-step { position: relative; padding: 0 0 28px 84px; }
.voc-step:before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: #d6dbe4; }
.voc-step:last-child { padding-bottom: 0; }
.voc-step:last-child:before { display: none; }
.voc-step__num {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #0e192d; color: #fff;
  font-family: YakuHanJP, "EB Garamond", serif; font-size: 22px; line-height: 1;
}
.voc-step__num small { font-family: YakuHanJP, "Montserrat", sans-serif; font-size: 9px; letter-spacing: .1em; margin-bottom: 2px; }
.voc-step__title { padding-top: 14px; font-size: 18px; font-weight: bold; }
.voc-step__text { margin-top: 8px; font-size: 14px; line-height: 1.9; }

/* 3: 手法カード */
.voc-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 36px 0 0; }
.voc-method { padding: 24px 26px; background: #fff; border: 1px solid #d6dbe4; border-top: 4px solid #0e192d; }
.voc-method:last-child:nth-child(odd) { grid-column: 1 / -1; }
.voc-method__en { font-family: YakuHanJP, "Montserrat", sans-serif; font-size: 11px; letter-spacing: .1em; color: #99001c; }
.voc-method__title { margin-top: 4px; font-size: 18px; font-weight: bold; line-height: 1.5; }
.voc-method__text { margin-top: 10px; font-size: 14px; line-height: 1.9; }

/* 番号つきのポイント */
.voc-tips { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: voctip; }
.voc-tips li { position: relative; padding: 18px 20px 18px 64px; border-bottom: 1px solid #d6dbe4; counter-increment: voctip; }
.voc-tips li:first-child { border-top: 1px solid #d6dbe4; }
.voc-tips li:before {
  content: counter(voctip, decimal-leading-zero); position: absolute; left: 14px; top: 16px;
  font-family: YakuHanJP, "EB Garamond", serif; font-size: 26px; line-height: 1; color: #99001c;
}
.voc-tips__title { font-size: 16px; font-weight: bold; line-height: 1.6; }
.voc-tips__text { margin-top: 6px; font-size: 14px; line-height: 1.9; }

/* 4: 成功事例の囲み */
.voc-story { margin: 22px 0 0; padding: 26px 30px; background: #f3f7fd; border-left: 4px solid #0e192d; }
.voc-story__text { font-size: 14px; line-height: 1.9; }
.voc-story__steps { margin: 12px 0; padding-left: 1.6em; font-size: 14px; line-height: 1.9; font-weight: bold; }

/* 5・6: 2列の比較 */
.voc-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 22px 0 0; }
.voc-duo__item { padding: 22px 26px; background: #fff; border: 1px solid #d6dbe4; }
.voc-duo__label { display: inline-block; padding: 1px 10px; font-size: 11px; font-weight: bold; color: #fff; background: #0e192d; letter-spacing: .05em; }
.voc-duo__label--red { background: #99001c; }
.voc-duo__title { margin-top: 8px; font-size: 17px; font-weight: bold; }
.voc-duo__text { margin-top: 8px; font-size: 14px; line-height: 1.9; }

/* 7: 事例カード・業種チップ */
.voc-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 0; }
.voc-case { padding: 22px 22px 24px; background: #fff; border: 1px solid #d6dbe4; }
.voc-case__title { margin-top: 4px; font-size: 16px; font-weight: bold; line-height: 1.6; }
.voc-case__text { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.voc-case .voc-figure { margin-top: 16px; }
.voc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.voc-chips a {
  display: inline-block; padding: 4px 14px; font-size: 12px; color: inherit; text-decoration: none;
  border: 1px solid #b8c0cc; border-radius: 999px; transition: border-color .25s ease, background-color .25s ease;
}
.voc-chips a:hover { border-color: #0e192d; background: #f3f7fd; }
.voc-chips__note { margin-top: 10px; font-size: 13px; color: #555; }

/* もっと詳しく(各見出しの末尾・2〜3本) */
.voc-more { margin: 34px 0 0; padding: 16px 24px 18px; background: #fafbfc; border-top: 2px solid #0e192d; }
.voc-more__title { font-size: 12px; font-weight: bold; letter-spacing: .12em; color: #99001c; }
.voc-more__list { margin: 6px 0 0; padding: 0; list-style: none; }
.voc-more__list li { padding: 4px 0; }
.voc-more__list a { position: relative; display: inline-block; padding-left: 16px; font-size: 14px; line-height: 1.7; color: #0e192d; text-decoration: underline; text-underline-offset: 3px; }
.voc-inline-link { color: #0e192d; text-decoration: underline; text-underline-offset: 3px; }
.voc-inline-link:hover { text-decoration: none; }
.voc-more__list a:before {
  content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; margin-top: -3px;
  border-top: 1px solid #0e192d; border-right: 1px solid #0e192d; transform: rotate(45deg);
}

/* ご相談ブロック(2・5・7の後) */
.voc-consult {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 56px 0 0; padding: 26px 32px; background: #fff; border: 1px solid #d6dbe4;
}
.voc-consult__title { font-size: 16px; font-weight: bold; }
.voc-consult__text { margin-top: 6px; font-size: 14px; line-height: 1.9; }
.voc-consult .voc-btn { flex-shrink: 0; }

/* 関連記事一覧(折りたたみ) */
.voc-related { border: 1px solid #d6dbe4; background: #fff; }
.voc-related__summary {
  position: relative; display: block; padding: 20px 56px 20px 24px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: bold;
}
.voc-related__summary::-webkit-details-marker { display: none; }
.voc-related__summary:after { content: "+"; position: absolute; top: 50%; right: 22px; margin-top: -13px; font-size: 24px; line-height: 1; font-weight: normal; }
.voc-related[open] .voc-related__summary:after { content: "−"; }
.voc-related__count { margin-left: 8px; font-size: 12px; font-weight: normal; color: #777; }
.voc-related__body { padding: 0 24px 26px; }
.voc-related__group { margin-top: 20px; padding-bottom: 4px; font-size: 13px; font-weight: bold; color: #99001c; border-bottom: 1px solid #e3e7ee; }
.voc-related__list { columns: 2; column-gap: 32px; margin: 8px 0 0; padding: 0; list-style: none; }
.voc-related__list li { break-inside: avoid; padding: 4px 0; font-size: 13px; line-height: 1.7; }
.voc-related__list a { color: inherit; }
.voc-related__list a:hover { text-decoration: underline; }
.voc-related__type { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 10px; color: #666; border: 1px solid #ccd; vertical-align: 1px; }

/* ---- 2026-10-16 品質経営の打ち出し版で追加 ---- */
/* リードのキャッチコピー */
.voc-catch { margin: 56px 0 0; text-align: center; font-family: "Yu Mincho", "YuMincho", serif; font-size: 28px; line-height: 1.7; }
.voc-catch__accent { color: #99001c; }
.voc-catch + .voc-lead { margin-top: 28px; }

/* 比較表(一般的なVOC分析/ベクストのVOC分析) */
.voc-compare-wrap { margin: 36px 0 0; overflow-x: auto; }
.voc-compare { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.8; }
.voc-compare th, .voc-compare td { padding: 16px 18px; border: 1px solid #d6dbe4; vertical-align: top; text-align: left; }
.voc-compare thead th { font-size: 15px; text-align: center; color: #fff; background: #0e192d; }
.voc-compare thead th.voc-compare__vext { background: #99001c; }
.voc-compare thead th.voc-compare__blank { background: #fff; border-color: #fff #d6dbe4 #d6dbe4 #fff; }
.voc-compare tbody th { width: 9em; font-weight: bold; background: #f3f7fd; white-space: nowrap; }
.voc-compare td.voc-compare__vext { background: #fffafa; font-weight: bold; }
.voc-compare__src { display: block; margin-top: 4px; font-size: 11px; font-weight: normal; color: #888; }

/* 各見出し末尾の「品質経営の視点」 */
.voc-view { margin: 34px 0 0; padding: 20px 26px 18px; background: #fff; border: 1px solid #d6dbe4; border-left: 4px solid #99001c; }
.voc-view__title { font-size: 12px; font-weight: bold; letter-spacing: .12em; color: #99001c; }
.voc-view__text { margin-top: 6px; font-size: 15px; line-height: 1.9; }
.voc-view__text strong { font-weight: bold; }
.voc-view__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; padding: 0; list-style: none; }
.voc-view__links a { font-size: 12px; color: #0e192d; text-decoration: underline; text-underline-offset: 3px; }
.voc-view__links a:before { content: "品質経営Web："; color: #99001c; text-decoration: none; display: inline-block; }

/* ---- 強調(管理画面の本文欄でも span class="voc-em / voc-key / voc-mark" で使える) ---- */
/* 色はテーマCSS(app.css)の紺 #0e192d・赤 #99001c・薄い青 #e3eef8 */
.voc-em { font-weight: bold; color: #0e192d; }   /* 段落で一番大事な語句(1段落1か所まで) */
.voc-key { font-weight: bold; color: #99001c; }  /* ページ全体のキーメッセージ(1見出し1〜2か所まで) */
.voc-mark {                                       /* 各見出しで覚えてほしい1文(1見出し1か所まで) */
  background: linear-gradient(transparent 58%, #e3eef8 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---- テンプレート化で追加(モックのインライン style をクラスへ移したもの) ---- */
.voc-page-nav { margin-top: 24px; }                       /* 目次(モック: style="margin-top: 24px;") */
.voc-lead.voc-lead--cont { margin-top: 1em; }             /* リード2・3段落目(モック: style="margin-top: 1em;"。スマホでも1em) */
.voc-cta .voc-text.voc-cta__text { margin-top: 50px; text-align: center; } /* 締めの説明文(モック: style="margin-top: 50px; text-align: center;") */

/* ---- 2026-10-19 社内レビュー反映で追加 ---- */
/* ページ冒頭のキャッチコピー(パンくずの下・目次の上。装飾は .voc-catch を流用) */
/* 2026-10-19 冒頭の帯: キャッチコピー+分かることを全幅の薄い青で包む(色はテーマの .bg-blue 等と同じ #f3f7fd)。
   .voc-band は .voc-inner の外(main直下)に置くため width 指定なしで画面幅いっぱい=100vw不使用で横スクロールなし */
.voc-band { margin-top: 16px; padding: 52px 0; background: #f3f7fd; }
.voc-hero .voc-catch { margin-top: 0; }
.voc-band + .voc-page-nav { margin-top: 40px; } /* 帯の下端〜目次(旧: 分かること枠〜目次 24px) */
/* このページで分かること(01から冒頭へ移動・キャッチコピーとの間隔) / 01の締めの文は左揃え */
.voc-hero .voc-intro { margin-top: 36px; }
/* 2026-10-19 締めの文はお悩みリスト(.voc-check)と同じ最大幅780px・中央=左右の端をリストの箱とそろえる(文字は左揃え) */
.voc-text.voc-worry-after { max-width: 780px; margin-left: auto; margin-right: auto; text-align: left; }
/* 2026-10-19 相談ボタンは締めの文の下の中央(同じ780px幅の中。スマホは .voc-btn が全幅=リスト幅) */
.voc-worry-action { max-width: 780px; margin: 22px auto 0; text-align: center; }

/* 07「高度なAIアプローチ」のポイント2つ(STEPの丸数字・3条件の赤い上線を流用) */
.voc-adv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 0; }
.voc-adv__item { position: relative; padding: 26px 26px 26px 100px; background: #fff; border: 1px solid #d6dbe4; border-top: 4px solid #af0b2f; }
.voc-adv__num {
  position: absolute; left: 24px; top: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #0e192d; color: #fff;
  font-family: YakuHanJP, "EB Garamond", serif; font-size: 22px; line-height: 1;
}
.voc-adv__num small { font-family: YakuHanJP, "Montserrat", sans-serif; font-size: 8px; letter-spacing: .1em; margin-bottom: 2px; }
.voc-adv__title { font-size: 17px; font-weight: bold; line-height: 1.6; }
.voc-adv__text { margin-top: 10px; font-size: 14px; line-height: 1.9; }
.voc-adv + .voc-text { margin-top: 28px; }

/* ---- スマホ ---- */
@media screen and (max-width: 767px) {
  .voc-catch { margin-top: 32px; font-size: 20px; text-align: left; }
  .voc-compare { font-size: 13px; }
  .voc-compare th, .voc-compare td { padding: 12px 10px; }
  .voc-view { padding: 16px 15px; }
  .voc-view__text { font-size: 13px; }
  .voc-intro { padding: 18px 19px; } /* 目次と同じ左右19px(幅は .voc-inner の左右15pxで目次の calc(100% - 30px) と一致) */
  .voc-intro__list li { font-size: 13px; }
  .voc-btn { display: block; text-align: center; white-space: normal; }
  .voc-check li { padding: 14px 12px 14px 46px; font-size: 13px; }
  .voc-check li:before { left: 14px; top: 16px; }
  .voc-check li:after { left: 20px; top: 14px; }
  .voc-figures, .voc-methods, .voc-cases, .voc-duo { grid-template-columns: 1fr; }
  .voc-step { padding-left: 60px; }
  .voc-step:before { left: 21px; top: 44px; }
  .voc-step__num { width: 44px; height: 44px; font-size: 17px; }
  .voc-step__num small { font-size: 7px; }
  .voc-step__title { padding-top: 10px; font-size: 16px; }
  .voc-step__text { font-size: 13px; }
  .voc-method { padding: 18px 15px; }
  .voc-method__title { font-size: 16px; }
  .voc-method__text { font-size: 13px; }
  .voc-tips li { padding: 14px 6px 14px 46px; }
  .voc-tips li:before { left: 4px; font-size: 22px; }
  .voc-tips__title { font-size: 15px; }
  .voc-tips__text { font-size: 13px; }
  .voc-story { padding: 18px 15px; }
  .voc-story__text, .voc-story__steps { font-size: 13px; }
  .voc-duo__item { padding: 18px 15px; }
  .voc-duo__text { font-size: 13px; }
  .voc-case { padding: 18px 15px; }
  .voc-more { padding: 14px 15px; }
  .voc-more__list a { font-size: 13px; }
  .voc-consult { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 40px; padding: 20px 15px; }
  .voc-consult__text { font-size: 13px; }
  .voc-related__summary { padding: 16px 44px 16px 15px; font-size: 16px; }
  .voc-related__count { display: block; margin: 4px 0 0; }
  .voc-related__body { padding: 0 15px 20px; }
  .voc-related__list { columns: 1; }
  .voc-cycle__label { letter-spacing: .05em; }
  .voc-breadcrumb, .voc-inner { width: 100%; padding: 0 15px; }
  .voc-lead, .voc-text { font-size: 13px; line-height: 1.9; }
  .voc-lead { margin-top: 32px; }
  .voc-section { padding-top: 56px; }
  .voc-heading { text-align: left; }
  .voc-heading__num { margin-right: 10px; font-size: 28px; }
  .voc-heading__title { font-size: 20px; line-height: 1.5; }
  .voc-text { margin-top: 20px; }
  .voc-sub { margin-top: 30px; }
  .voc-cards, .voc-feature, .voc-qdm, .voc-points__list { grid-template-columns: 1fr; }
  .voc-points { padding: 24px 15px; }
  .voc-points__title { font-size: 16px; }
  .voc-points__item { padding: 18px 15px; }
  .voc-points__item__text { font-size: 15px; }
  .voc-feature__item { padding: 22px 50px 22px 20px; }
  .voc-feature__item__title { font-size: 17px; }
  .voc-faq__q { padding: 15px 40px 15px 40px; font-size: 14px; }
  .voc-faq__q:before { left: 8px; top: 15px; font-size: 20px; }
  .voc-faq__a { padding: 0 15px 18px 40px; font-size: 13px; }
  .voc-faq__a:before { left: 8px; font-size: 20px; }
  .voc-cta { padding: 30px 15px; }
  .voc-cta__list { flex-direction: column; align-items: center; gap: 16px; }
  .voc-cta .button { width: 260px; }
  .voc-quote { margin-top: 24px; padding: 18px 15px; }
  .voc-quote__text { font-size: 15px; }
  .voc-cycle { flex-direction: column; gap: 26px; }
  .voc-cycle__item { padding: 14px 8px; }
  .voc-cycle__item + .voc-cycle__item:before {
    top: -20px; left: 50%; margin-top: 0; margin-left: -7px;
    border-width: 12px 7px 0 7px; border-color: #99001c transparent transparent transparent;
  }
  .voc-cycle__label { font-size: 16px; }
  .voc-cycle__note { font-size: 13px; }
  .voc-book { padding: 18px 15px; }
  .voc-book__title { font-size: 15px; }
  .voc-book__text { font-size: 13px; }
  .voc-band { padding: 32px 0; }
  .voc-hero .voc-catch { margin-top: 0; }
  .voc-band + .voc-page-nav { margin-top: 28px; }
  .voc-hero .voc-intro { margin-top: 24px; }
  .voc-worry-action { margin-top: 18px; }
  .voc-adv { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .voc-adv__item { padding: 18px 15px 18px 70px; }
  .voc-adv__num { left: 12px; top: 18px; width: 44px; height: 44px; font-size: 17px; }
  .voc-adv__num small { font-size: 7px; }
  .voc-adv__title { font-size: 15px; }
  .voc-adv__text { font-size: 13px; }
  .voc-adv + .voc-text { margin-top: 20px; }
}