/* ==========================================================
   ロジトーク LP｜style.css
   色・フォント・文字サイズ・余白・ボタンは、最初の :root にまとめる。
   値は CLAUDE.md のとおり（配色A ネイビー × オレンジ）。
   ========================================================== */

:root {
  /* ---------- 色 ---------- */
  --color-bg: #FFFFFF;          /* 背景（約70%） */
  --color-bg-sub: #F2F6FB;      /* 淡い面（交互の節） */
  --color-main: #1E3A6E;        /* メイン濃：見出し・結論・アイコン（約25%） */
  --color-main-mid: #2F5FA7;    /* メイン中：理由 */
  --color-main-light: #DCE8F7;  /* メイン淡：補足 */
  --color-accent: #C2410C;      /* ボタンだけ（約5%）。ほかには使わない */
  --color-on-accent: #FFFFFF;   /* ボタンの文字 */
  --color-text: #1F2937;        /* 本文 */
  --color-text-sub: #4B5563;    /* 注記・補助文字 */
  --color-on-main: #FFFFFF;     /* メイン濃・中の上の文字 */
  --color-error: #B91C1C;       /* フォームのエラー文字・枠だけ。白の上でコントラスト比6.5 */
  --color-disabled: #9CA3AF;    /* 選べない選択肢（今日の過ぎた時刻）の文字だけ。選べないものなので、コントラスト比の対象外 */

  /* ---------- フォント ---------- */
  --font-base: "Noto Sans JP", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --lh-body: 1.8;
  --lh-heading: 1.4;

  /* ---------- 文字サイズ（375px） ---------- */
  --fs-body: 16px;
  --fs-note: 14px;
  --fs-h1: 28px;       /* ファーストビューの見出し */
  --fs-h2: 24px;       /* 節の見出し */
  --fs-h3: 20px;       /* 小見出し */
  --fs-steps: 24px;    /* 「結論 → 理由 → 補足」 */
  --fs-steps-fv: 20px; /* ファーストビューだけ小さくした「結論 → 理由 → 補足」 */
  --fs-price: 40px;    /* 料金 88,000円 */
  --fs-btn: 16px;      /* ボタンの文字 */
  --fs-btn-note: 16px; /* ボタンの下の注記（判断に役立つ情報なので、本文と同じ大きさ） */

  /* ---------- 余白・幅 ---------- */
  --gutter: 16px;            /* 左右の余白 */
  --section-pad: 40px;       /* 節の上下の余白 */
  --width-text: 720px;       /* 文章の最大幅 */
  --width-inner: 1040px;     /* 節の内側の最大幅 */

  /* ---------- ボタン ---------- */
  --btn-radius: 8px;
  --btn-min-height: 56px;
  --btn-max-width-fv: 420px; /* PCのFVのボタン */
  --focus-ring: 3px solid var(--color-main);
}

/* 768px以上 */
@media (min-width: 768px) {
  :root {
    --fs-body: 17px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-steps: 28px;
    --fs-steps-fv: 24px;
    --fs-price: 48px;
    --fs-btn: 17px;
    --gutter: 32px;
    --section-pad: 56px;
  }
}

/* 1280px以上 */
@media (min-width: 1280px) {
  :root {
    --fs-body: 18px;
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-steps: 32px;
    --fs-steps-fv: 28px;
    --fs-price: 56px;
    --fs-btn: 18px;
    --section-pad: 72px;
  }
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* CTAボタン（FV・⑥・⑧）は、⑩のフォーム（#reserve）までスクロールする */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.02em;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- ヘッダー（ロゴ＋メニュー） ---------- */
.site-header {
  position: relative;
  z-index: 10;
  padding: 0 var(--gutter);     /* 左右の余白は、ほかの節と同じ（ロゴの左端が、本文の左端にそろう） */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-main-light);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
}
.site-menu { display: flex; margin: 0; padding: 0; list-style: none; }
.site-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-decoration: none;
}
.site-menu a:hover { color: var(--color-main); text-decoration: underline; text-underline-offset: 6px; }
.site-logo:focus-visible,
.site-menu a:focus-visible,
.menu-toggle:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ハンバーガーボタン（スマホ幅だけ） */
.menu-toggle {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-bars,
.menu-bars::before,
.menu-bars::after {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-main);
  content: "";
  transition: transform 0.2s, opacity 0.2s;
}
.menu-bars { top: 23px; }
.menu-bars::before { top: -8px; left: 0; }
.menu-bars::after  { top: 8px;  left: 0; }
.site-header.is-open .menu-bars { background: transparent; }
.site-header.is-open .menu-bars::before { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .menu-bars::after  { transform: translateY(-8px) rotate(-45deg); }

/* スマホ幅：メニューは、ヘッダーの下に開く */
@media (max-width: 767px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-main-light);
    box-shadow: 0 8px 16px rgba(31, 41, 55, 0.08);
  }
  .site-header.is-open .site-nav { display: block; }
  .site-menu { flex-direction: column; padding: 4px var(--gutter) 8px; }
  .site-menu li + li { border-top: 1px solid var(--color-main-light); }
  .site-menu a { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-bars, .menu-bars::before, .menu-bars::after { transition: none; }
}

/* 768px以上：ロゴを左、メニューを右に並べる（ハンバーガーボタンは出さない） */
@media (min-width: 768px) {
  .site-header-inner { min-height: 64px; }
  .menu-toggle { display: none; }
  .site-menu { gap: 32px; }
}

/* ---------- レイアウト（節の枠） ---------- */
.section {
  padding: var(--section-pad) var(--gutter);
  background: var(--color-bg);
}

/* 白と淡い面を交互にする */
main > .section:nth-of-type(even) { background: var(--color-bg-sub); }

.inner {
  max-width: var(--width-inner);
  margin: 0 auto;
}

/* ---------- 共通部品 ---------- */

/* 見出しの改行位置を文節ごとにそろえる */
.nw { display: inline-block; }

/* ボタン（アクセントはここだけ） */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--btn-min-height);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.btn-note {
  margin: 8px 0 0;
  color: var(--color-text);
  font-size: var(--fs-btn-note);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  text-align: center;
}

/* 結論 → 理由 → 補足（濃 → 中 → 淡）。FV・型・クロージングで同じ見た目にする */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 12px 8px;
  border-radius: 10px;
  font-size: var(--fs-steps);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-align: center;
}
.step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 16px;
  color: var(--color-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  transform: translateY(-50%);
}
.step-1 { background: var(--color-main); color: var(--color-on-main); }
.step-2 { background: var(--color-main-mid); color: var(--color-on-main); }
.step-3 { background: var(--color-main-light); color: var(--color-main); }

/* ---------- ① ファーストビュー ---------- */
.fv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "lead"
    "pain"
    "steps"
    "cta"
    "photo";
  gap: 24px;
}
.fv-head   { grid-area: head; }
.fv-lead   { grid-area: lead; }
.fv-pain   { grid-area: pain; }
.fv-steps  { grid-area: steps; }
.fv-photo  { grid-area: photo; }
.fv-cta    { grid-area: cta; }

.fv-title {
  margin: 0 0 16px;
  color: var(--color-main);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.fv-sub {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
/* 何の商品かを早く伝える一文 */
.fv-lead {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.fv-lead strong { font-weight: var(--fw-bold); }
.fv-lead .fv-lead-key { color: var(--color-main); }
.fv-pain { margin: 0; color: var(--color-text-sub); }
.fv-cta-lead {
  margin: 0 0 8px;
  color: var(--color-main);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

.fv-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 12% 50%;
  border-radius: 12px;
}
/* FVの3ステップは、予約ボタンより目立たないよう小さめにする */
.fv-steps { gap: 20px; max-width: 403px; }
.fv-steps .step {
  padding: 8px 6px;
  font-size: var(--fs-steps-fv);
}
.fv-steps .step:not(:last-child)::after { right: -17px; width: 14px; font-size: var(--fs-note); }

@media (min-width: 768px) {
  .fv-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas:
      "head  photo"
      "lead  photo"
      "pain  photo"
      "steps photo"
      "cta   photo";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .fv-photo img { aspect-ratio: 4 / 5; }
  .fv-cta { max-width: var(--btn-max-width-fv); }
}

/* ---------- 共通：節の見出し ---------- */
.section-title {
  margin: 0;
  color: var(--color-main);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* ---------- ② こんなお悩みはありませんか？ ---------- */
.worries-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "list"
    "photo"
    "body";
  gap: 24px;
}
.worries-title { grid-area: title; }
.worries-photo { grid-area: photo; }
.worry-list    { grid-area: list; }
.worries-body  { grid-area: body; max-width: var(--width-text); word-break: auto-phrase; }

.worries-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}

.worry-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.worry-list li {
  padding: 10px 16px;
  border-left: 4px solid var(--color-main-light);
  border-radius: 8px;
  background: var(--color-bg);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  word-break: auto-phrase;
}
/* いちばん強い悩みは、大きさではなく、太字・濃い線・淡い青の背景で目立たせる */
.worry-list .worry-key {
  padding-left: 14px;
  border-left: 6px solid var(--color-main);
  background: var(--color-main-light);
  color: var(--color-main);
  font-weight: var(--fw-bold);
}

.worries-body p { margin: 0 0 16px; }
.worries-body p:last-child { margin-bottom: 0; }
.worries-body strong { font-weight: var(--fw-bold); }

@media (min-width: 768px) {
  .worries-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
      "title title"
      "list  photo"
      "body  body";
    column-gap: 32px;
    align-items: start;
  }
}

/* ---------- ③ 話す前の3秒で、要点を組み立てる「型」 ---------- */

/* 3ステップの大きい版（説明つき）。色・形・並び順はFVと同じ */
.steps-lg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.steps-lg .step {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 3つの高さが違うとき、文を縦の中央にそろえる */
  padding: 16px;
}
.steps-lg .step-label { display: block; font-size: var(--fs-steps); line-height: var(--lh-heading); }
.steps-lg .step-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}
/* スマホは上から下へ並べ、矢印は下向き */
.steps-lg .step:not(:last-child)::after {
  content: "↓";
  top: auto;
  right: auto;
  bottom: -26px;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
}

.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "lead"
    "steps"
    "body";
  gap: 24px;
}
.method-title { grid-area: title; }
.method-lead  { grid-area: lead; margin: 0; max-width: var(--width-text); }
.method-steps { grid-area: steps; }
.method-body  { grid-area: body; max-width: var(--width-text); word-break: auto-phrase; }

.method-body p { margin: 0 0 16px; }
.method-body p:last-child { margin-bottom: 0; }
.method-body .clause { display: block; }
/* 本文中の「結論 → 理由 → 補足」は、文中の太字にする（大きく繰り返さない） */
.method-flow {
  display: inline-block;
  color: var(--color-main);
  font-weight: var(--fw-bold);
}

/* 発言例：札の色は、上の3ステップと同じ */
.example {
  margin: 16px 0 24px;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-sub);
}
.example-lead { margin: 0 0 16px; font-weight: var(--fw-medium); }
/* スマホ：札の下に発言文を置く（横幅をいっぱいに使う）。コロンは見えなくする */
.example-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.example-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.example .tag {
  flex: none;
  min-width: 3.6em;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
}
.example .step-3 { border: 1px solid var(--color-main-light); }
.example .colon { display: none; }
.example-text { min-width: 0; }
@media (min-width: 768px) {
  /* 768px以上：札の右に発言文を置く */
  .example-list { gap: 8px; }
  .example-list li { flex-direction: row; align-items: baseline; gap: 4px; }
  .example .colon { display: inline; flex: none; }
  .example-text { flex: 1; }
}

@media (min-width: 768px) {
  /* PCは横に3つ並べ、矢印は右向き */
  .steps-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .steps-lg .step:not(:last-child)::after {
    content: "→";
    top: 50%;
    right: -26px;
    bottom: auto;
    left: auto;
    width: 20px;
    transform: translateY(-50%);
  }
}

/* ---------- ④ 目指すのは、「何を言うか」で迷いにくい状態 ---------- */
.after-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "list"
    "body";
  gap: 32px;
}
.after-title { grid-area: title; }
.compare-list { grid-area: list; display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.after-body { grid-area: body; max-width: var(--width-text); word-break: auto-phrase; }

/* Before（淡い）→ After（メインの青）。Afterを少し大きく見せる */
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.compare-before,
.compare-after {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 枠の中で、文を縦の中央にそろえる */
  border-radius: 12px;
}

.compare-before {
  padding: 16px;
  border: 1px solid var(--color-main-light);
  background: var(--color-bg);
  color: var(--color-text-sub);
}
.compare-after {
  padding: 20px 16px;
  background: var(--color-main-mid);
  color: var(--color-on-main);
}
.compare-label {
  margin: 0 0 4px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0.06em;
}
.compare-text { margin: 0; line-height: 1.6; }
.compare-before .compare-text { font-weight: var(--fw-medium); }
.compare-after .compare-text { font-size: var(--fs-h3); font-weight: var(--fw-bold); }

/* 矢印（スマホは下向き） */
.compare-before::after {
  content: "↓";
  position: absolute;
  bottom: -32px;
  left: 50%;
  width: 24px;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
}

.after-body p { margin: 0 0 16px; }
.after-body p:last-child { margin-bottom: 0; }
.after-body .after-key { margin: 24px 0; color: var(--color-main); font-size: var(--fs-h3); line-height: 1.5; }
.after-body strong { font-weight: var(--fw-bold); }
.after-key .clause { display: block; }
/* スマホ：2つ目の言葉（18字）を1行に収めるため、この文だけ18pxにする */
@media (max-width: 767px) {
  .after-body .after-key { font-size: 18px; letter-spacing: 0; }
}

@media (min-width: 768px) {
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: stretch; }
  .compare-before { padding: 20px; }
  .compare-after { padding: 24px 20px; }
  .compare-before::after {
    content: "→";
    top: 50%;
    right: -40px;
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }
}

/* 768px以上：ラベルは、いちばん上のカードの上に1回だけ出す（列の見出し）。
   2段目・3段目のラベルは見えなくする（HTMLには残す）。スマホは、各カードのラベルのまま */
@media (min-width: 768px) {
  .compare-list { padding-top: 36px; }
  .compare:not(:first-child) .compare-label { display: none; }
  .compare:first-child .compare-label {
    position: absolute;
    top: -34px;
    left: 0;
    margin: 0;
    color: var(--color-main);
  }
}

/* ---------- ⑤ 全8回。理解して終わらず、実際に話して練習する ---------- */
.themes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "intro"
    "photo"
    "lead"
    "cards"
    "flow";
  gap: 24px;
}
.themes-title { grid-area: title; }
.themes-intro { grid-area: intro; margin: 0; max-width: var(--width-text); }
.themes-intro strong { font-weight: var(--fw-bold); }
.themes-photo { grid-area: photo; }
.themes-lead  { grid-area: lead; margin: 0; }
.theme-list   { grid-area: cards; }
.themes-flow  { grid-area: flow; margin: 0; max-width: var(--width-text); }

.themes-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}

/* 4つのテーマ（同格） */
.theme-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.theme {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg-sub);
  word-break: auto-phrase;
}

.theme-icon { grid-area: 1 / 1; align-self: center; display: block; width: 36px; height: 36px; }
.theme-icon .ic-main  { fill: var(--color-main); }
.theme-icon .ic-mid   { fill: var(--color-main-mid); }
.theme-icon .ic-light { fill: var(--color-main-light); stroke: var(--color-main); stroke-width: 1.5; }
.theme-icon .ic-line  {
  fill: none;
  stroke: var(--color-main);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-title {
  grid-area: 1 / 2;
  align-self: center;
  margin: 0;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.theme-text { grid-area: 2 / 1 / 3 / 3; margin: 8px 0 0; line-height: var(--lh-body); }

.themes-flow { word-break: auto-phrase; }
/* 型を知る → 使ってみる → 会議を想定して練習する（文中の太字） */
.themes-flow-line {
  color: var(--color-main);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .themes-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas:
        "title title"
      "intro photo"
      "lead  lead"
      "cards cards"
      "flow  flow";
    column-gap: 32px;
    align-items: start;
  }
  .themes-intro { align-self: start; }
  .themes-intro .pc-clause { display: block; }
  .themes-photo { justify-self: end; width: 75%; }
  .theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- ⑥ まずは30分。無料体験レッスンで「型」を試せます ---------- */
.trial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "voices"
    "lead"
    "body"
    "assure"
    "cta";
  gap: 24px;
}
.trial-title  { grid-area: title; }
/* スマホ：見出しを「まずは30分。／無料体験レッスンで／「型」を試せます」の3行にする（文字は24pxのまま） */
@media (max-width: 767px) {
  .trial-title .clause { display: block; }
}

.voice-list   { grid-area: voices; }
.voice-text   { display: block; }
.trial-lead   { grid-area: lead; margin: 0; }
.trial-body   { grid-area: body; max-width: var(--width-text); }
.trial-assure { grid-area: assure; max-width: var(--width-text); }
.trial-cta    { grid-area: cta; max-width: var(--btn-max-width-fv); }

/* 迷いの言葉（お客様の声ではない。誰かの名前や写真は付けない） */
.voice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voice {
  display: flex;
  align-items: center;       /* 枠の中で、文を縦の中央にそろえる */
  padding: 16px;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.trial-lead { color: var(--color-text); }
.trial-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trial-points li { position: relative; padding-left: 20px; }
.trial-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.9em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-main);
}
.trial-body strong { font-weight: var(--fw-bold); }
/* タブレット幅（768〜1023px）だけ、文の切れ目で改行する */
@media (min-width: 768px) and (max-width: 1023px) {
  .trial-points .tab-clause { display: block; }
}

/* 申し込まなくてよいことを伝える安心の枠 */
.trial-assure {
  margin: 0;
  padding: 10px 16px;
  border-left: 4px solid var(--color-main);
  border-radius: 8px;
  background: var(--color-bg);
}
/* 「任意です。」のあとで改行する */
.trial-assure .clause { display: block; }

@media (min-width: 768px) {
  .voice { padding: 20px; }
  .trial-assure { padding: 12px 20px; }
}
/* 3列にするのは、1枚が十分な幅になる1280px以上だけ */
@media (min-width: 1280px) {
  .voice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- ⑦ 新しい講座だからこそ、判断材料を明確にお伝えします ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "intro"
    "cards";
  gap: 24px;
}
.proof-title { grid-area: title; }
.proof-intro { grid-area: intro; max-width: var(--width-text); }
.proof-cards { grid-area: cards; }

.proof-intro p { margin: 0 0 16px; }
.proof-intro .clause, .proof-card-text .clause { display: block; }
@media (min-width: 768px) {
  .proof-card-text .pc-clause { display: block; }
}
/* タブレット幅（768〜1023px）：2つ目と3つ目は続けて1行に */
@media (min-width: 768px) and (max-width: 1023px) {
  .proof-card-text .pc-clause:not(:first-child) { display: inline; }
}
@media (min-width: 768px) {
  .instructor-info .clause { display: block; }
  /* PCでは、「プレゼンテーション研修と」などの複合語を、途中で改行しない */
  .instructor-info .pc-nw { display: inline-block; }
}
.proof-intro p:last-child { margin-bottom: 0; }

/* ないものは、普通の文の中に書く（強みに見えるタグにしない）。項目は「・」でつなぐ */
.proof-none .nw:not(:last-child)::after { content: "・"; }

/* 代わりに示す3つの判断材料（文中の太字） */
.proof-key { color: var(--color-main); font-weight: var(--fw-bold); }

.proof-cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.proof-card {
  padding: 20px;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg-sub);
}
.proof-card-title {
  margin: 0 0 12px;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
/* 数字（8回・5年以上・最大6名）を、少し大きく見せる */
.proof-card-title .num { font-size: 1.3em; line-height: 1; }
.proof-card-text { margin: 0; }

/* 講師（スマホ：左に写真、右に名前。注記は写真の下で1行。経歴は下で横幅いっぱい） */
.instructor {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 12px;
}
.instructor-fig { display: contents; margin: 0; }
.instructor-fig img { grid-column: 1; grid-row: 1; }
.instructor-note { grid-column: 1 / -1; grid-row: 2; }
.instructor-info { display: contents; }
.instructor-info .instructor-name { grid-column: 2; grid-row: 1; align-self: center; }
.instructor-info p:not(.instructor-name) { grid-column: 1 / -1; }
/* ふりがなは、スマホで1行に収める */
.instructor-name .furigana { display: block; font-size: 15px; }
.instructor-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 12px;
}
.instructor-note {
  margin-top: 0;
  color: var(--color-text-sub);
  font-size: var(--fs-note);
  line-height: 1.6;
}
.instructor-info p { margin: 0; }
.instructor-name { color: var(--color-main); font-size: var(--fs-h3); line-height: 1.5; }
.instructor-name strong { font-weight: var(--fw-bold); }

@media (min-width: 768px) {
  .proof-card { padding: 24px; }
  .instructor { grid-template-columns: 170px minmax(0, 1fr); gap: 32px; align-items: start; }
  .instructor-fig { display: block; margin: 0; max-width: none; }
  .instructor-note { margin-top: 8px; }
  .instructor-name .furigana { display: inline; font-size: inherit; }
  .instructor-info { display: block; }
  .instructor-info p { margin: 0 0 12px; }
  .instructor-info p:last-child { margin-bottom: 0; }
  .instructor-info .instructor-name { align-self: auto; }
}
/* 1280px以上：講師の下に、「全8回」と「最大6名」を2列で並べる */
@media (min-width: 1280px) {
  .proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-card-instructor { grid-column: 1 / -1; }
}

/* ---------- ⑧ 受講料は88,000円（税込） ---------- */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "intro"
    "price"
    "refund"
    "cta";
  gap: 24px;
}
.price-title  { grid-area: title; }
.price-intro  { grid-area: intro; max-width: var(--width-text); }
.price-card   { grid-area: price; }
.refund-card  { grid-area: refund; }
.price-cta    { grid-area: cta; max-width: var(--width-text); }

.price-intro p { margin: 0 0 16px; }
.price-intro p:last-child { margin-bottom: 0; }
.price-key { color: var(--color-main); font-weight: var(--fw-bold); }

/* 料金カード：金額をいちばん大きく */
.price-card,
.refund-card {
  overflow: hidden;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg);
}
.price-line {
  margin: 0;
  padding: 24px 16px;
  background: var(--color-main-light);
  color: var(--color-main);
  text-align: center;
  line-height: 1.3;
}
.price-line strong { font-weight: var(--fw-bold); }
.price-label { display: block; margin-bottom: 4px; font-size: var(--fs-body); }
.price-amount { display: inline-block; font-size: var(--fs-price); line-height: 1.2; }
.price-tax { display: inline-block; margin-left: 4px; font-size: var(--fs-body); }

.price-pay { padding: 20px; }
.price-pay p { margin: 0 0 12px; }
.price-pay .pay-title { color: var(--color-main); font-weight: var(--fw-bold); }
.price-pay p:last-child { margin-bottom: 0; }
.pay-list { margin: 0 0 12px; padding: 0; list-style: none; }
.pay-list li {
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--color-main-light);
  font-weight: var(--fw-bold);
  position: relative;
}
.pay-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-main);
  transform: translateY(-50%);
}

/* 返金の条件：金額と同じ範囲で、条件をそのまま読めるようにする */
.refund-card { padding: 20px; }
.refund-title {
  margin: 0 0 12px;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.refund-card p {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--color-main-light);
}
.refund-card p:last-child { margin-bottom: 0; }
.refund-card strong { color: var(--color-main); font-weight: var(--fw-bold); }
.refund-card .refund-cond .clause { display: block; }
@media (min-width: 1280px) { .refund-card .wide-nw { display: inline-block; } }
/* タブレット幅（768〜1023px）：返金カードに合わせて高くなる料金カードの余白を、金額の帯と支払い方法の間に、バランスよく分ける */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-card { display: flex; flex-direction: column; }
  .price-line { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .price-pay { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
  .price-pay p,
  .price-pay .pay-list { margin: 0; }
}

/* PC幅（768px以上）：返金カードの1つ目・2つ目の段落を、条件のまとまりごとに改行する */
@media (min-width: 768px) {
  .refund-card { display: flex; flex-direction: column; }
  /* 3つの条件の間を等間隔にして、カードの上下にバランスよく配置する */
  .refund-items { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
  .refund-items p { margin: 0; }
  .refund-card .pc-clause { display: block; }
  .refund-card .refund-cond .clause:nth-child(2),
  .refund-card .refund-cond .clause:nth-child(3),
  .refund-card .refund-cond .clause:nth-child(4) { display: inline; }
}

.price-cta-lead { margin: 0 0 16px; }
.price-cta-lead .clause { display: block; }
.price-cta .btn { max-width: var(--btn-max-width-fv); }
.price-cta .btn-note { max-width: var(--btn-max-width-fv); }

/* スマホ幅：スマホだけの改行（.sp-clause／.sp-nw）、ボタン注記の「／」 */
@media (max-width: 767px) {
  .sp-clause { display: block; }
  .sp-nw { display: inline-block; }
  .btn-note .sep { display: none; }
}

@media (min-width: 768px) {
  .price-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "intro intro"
      "price refund"
      "cta   cta";
    column-gap: 32px;
    align-items: stretch;
  }
  .price-pay { padding: 24px; }
  .refund-card { padding: 24px; }
}

/* ---------- ⑨ よくある質問（開閉は <details>。JavaScriptなしで動く） ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "list";
  gap: 24px;
}
.faq-title { grid-area: title; }
.faq-list  { grid-area: list; display: grid; gap: 12px; max-width: 880px; }

.faq-item {
  overflow: hidden;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg);
}

/* 質問：淡い青の背景。タップしやすい高さ（56px以上） */
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--color-main-light);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }

.faq-no {
  flex: none;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--color-main);
  color: var(--color-on-main);
  font-size: var(--fs-body);
  line-height: 1.5;
}
/* 上揃え：1行目の中心を、番号（高さ＝行高＋4px）と開閉アイコンの中心にそろえる */
.faq-qtext { flex: 1; min-width: 0; padding-top: 2px; }

/* 開閉アイコン（＋ → −） */
.faq-icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: calc(var(--fs-body) * 0.75 - 8px); }
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-main);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after  { width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { display: none; }

/* 回答：白い背景。左に「A」の印 */
.faq-a { position: relative; padding: 16px 16px 16px 56px; }
.faq-a::before {
  content: "A";
  position: absolute;
  top: 16px;
  left: 16px;
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
  color: var(--color-main);
  font-weight: var(--fw-bold);
  line-height: 24px;
  text-align: center;
}
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--color-main); font-weight: var(--fw-bold); }
.faq-a .clause { display: block; }
/* スマホ幅：Q3の「体験後の本講座への申込みは任意です。」と次の文を、別の段落の間隔で分ける */
@media (max-width: 767px) {
  .faq-a .sp-gap { margin-bottom: 8px; }
  /* Q3の回答：文節ごとの区切りを外し、自然に折り返す */
  .faq-free .nw { display: inline; }
}

@media (min-width: 768px) {
  .faq-q { padding: 14px 20px; }
  .faq-a { padding: 20px 20px 20px 64px; }
  .faq-a::before { top: 20px; left: 20px; }
}

/* ---------- ⑩ 次の会議で、「何から話すか」に迷いにくくするために ---------- */
.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "story"
    "aside"
    "lead"
    "reserve"
    "ps";
  gap: 24px;
}
.closing-title   { grid-area: title; }
.closing-story   { grid-area: story; }
.closing-top     { display: contents; }
.closing-aside   { grid-area: aside; display: flex; flex-direction: column; gap: 24px; }
.closing-aside-text { margin: 0; }
/* 図と説明が1つのまとまりになる前（スマホ・タブレット）の間隔は、以前と同じに保つ */
.closing-lead    { margin-top: -8px; }

.closing-lead    { grid-area: lead; max-width: var(--width-text); }
.closing-reserve { grid-area: reserve; scroll-margin-top: 24px; }
.closing-ps      { grid-area: ps; max-width: var(--width-text); }

.closing-story p { margin: 0 0 16px; }
.closing-story p:last-child { margin-bottom: 0; }
.closing-lines .line { display: block; }
.closing-key {
  display: block;
  margin: 8px 0 0;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0;
}
/* 強調文は、2つの言葉を1行ずつに分ける（どの幅でも1行に収まる） */
.closing-key .clause { display: block; }

.closing-lead p { margin: 0 0 16px; }
.closing-lead p:last-child { margin-bottom: 0; }
.closing-lead strong { font-weight: var(--fw-bold); color: var(--color-main); }
.closing-lead .clause { display: block; }
/* スマホ幅：見出しを2行（「次の会議で、「何から話すか」／に迷いにくくするために」）にする。24pxのまま、「に」を次の行へ送る */
@media (max-width: 767px) {
  .closing-title .t-mid,
  .closing-title .t-end { display: inline; }
  .closing-title .t-ni::after { content: "\2060"; }
}

/* 予約への案内（最後のCTA。FVより少し大きく） */
.closing-reserve {
  padding: 24px 20px;
  border: 1px solid var(--color-main-light);
  border-radius: 12px;
  background: var(--color-bg);
}
.closing-reserve-title {
  margin: 0 0 16px;
  color: var(--color-main);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.closing-reserve p { margin: 0 0 12px; }
.closing-cta { margin-top: 32px; max-width: 520px; }
.btn-lg { min-height: 64px; }
.closing-cta .btn-note { text-align: center; }

/* P.S. */
.closing-ps {
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--color-main);
}
.closing-ps p { margin: 0 0 8px; }
.closing-ps p:last-child { margin-bottom: 0; }
.closing-ps .clause { display: block; }
.ps-label { color: var(--color-main); }
.ps-label strong { font-weight: var(--fw-bold); }

@media (min-width: 768px) {
  .closing-reserve { padding: 32px; }
}
/* 右の列に3ステップを置くのは、箱が十分な幅になる1280px以上だけ */
@media (min-width: 1280px) {
  .closing-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "reserve"
      "ps";
    justify-items: start;
  }
  /* 上部は、幅720pxの1列にして、左端を下の予約カード・P.S.にそろえる。下の予約カードは、今の幅のまま */
  .closing-top {
    grid-area: top;
    justify-self: start;
    width: 100%;
    max-width: var(--width-text);
    display: grid;
    gap: 24px;
  }
  .closing-top > * { grid-area: auto; }
  /* 見出しは1行（文章の幅720pxより少し広くなる） */
  .closing-title { white-space: nowrap; }
  .closing-reserve { justify-self: stretch; }
  /* 強調文の下に「まずはこの3つに〜」、そのすぐ下に図（左端は文章にそろえる） */
  .closing-aside { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .closing-steps { width: 100%; max-width: 460px; }
  .closing-lead { margin-top: 0; }
}

/* ---------- 予約フォーム（⑩） ---------- */
.closing-reserve .form-caution {
  margin: 0 0 20px;
  color: var(--color-text-sub);
  font-size: var(--fs-note);
  line-height: 1.6;
}
.reserve-form { display: grid; gap: 20px; max-width: 520px; }
.field { min-width: 0; }
.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.field-tag {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
.field-tag-required { background: var(--color-main); color: var(--color-on-main); }
.field-tag-optional { background: var(--color-main-light); color: var(--color-main); }
.field-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--color-text-sub);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-body);   /* スマホで16px以上（iOSで入力時に拡大されない） */
  line-height: 1.5;
}
textarea.field-input { min-height: 128px; resize: vertical; }
/* メールアドレス欄は、日本語入力を切って、英数字で入力する（Firefox向け。ほかのブラウザは、type="email"・inputmode・lang で同じ働きをする） */
input[type="email"].field-input { ime-mode: disabled; }
/* 時刻の選択肢：選べるものは本文色、選べないもの（今日の過ぎた時刻）はグレー */
select.field-input option { color: var(--color-text); }
select.field-input option:disabled { color: var(--color-disabled); }
/* 希望日時：日付と時刻（30分単位）を横に並べる */
.field-datetime { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.field-input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.field-input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
}
.closing-reserve .field-error {
  margin: 6px 0 0;
  color: var(--color-error);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.field-error[hidden] { display: none; }
.reserve-form .closing-cta { margin-top: 12px; max-width: none; }

/* ---------- モーダル（CTA・フォーム送信後） ---------- */
html.is-modal-open { overflow: hidden; }
.modal {
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 12px 40px rgba(31, 41, 55, 0.35);
}
.modal::backdrop { background: rgba(31, 41, 55, 0.6); }
.modal-panel {
  max-height: inherit;
  padding: 24px 20px 20px;
  overflow-y: auto;
}
.modal-text { margin: 0 0 16px; }
.modal-text .clause { display: block; }
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--btn-min-height);
  margin-top: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--color-main);   /* アクセント色はCTAボタンだけ。閉じるボタンはメイン濃 */
  color: var(--color-on-main);
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  cursor: pointer;
}
.modal-close:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (min-width: 768px) {
  .modal { max-width: 540px; }   /* 「このページはポートフォリオ用の架空のサンプルです。」が1行に入る幅 */
  .modal-panel { padding: 32px 32px 28px; }
}

/* ---------- フッター（このページについて／制作概要） ---------- */
.footer {
  padding: var(--section-pad) var(--gutter);
  border-top: 1px solid var(--color-main-light);
  background: var(--color-bg);
}
.footer-inner { display: grid; gap: 40px; }
.footer-title {
  margin: 0 0 12px;
  color: var(--color-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.footer-about p { margin: 0; max-width: 820px; }
.footer-about .line { display: block; }   /* 句点（。）ごとに、行を改める */   /* PC幅で、「…は、AIで生成した架空の素材で、」が1行につながる幅 */
/* 制作概要：開閉（<details>）。項目名（太字）と内容を、行ごとに線で区切る */
.overview-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--color-main-light);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  list-style: none;
  cursor: pointer;
}
.overview-summary::-webkit-details-marker { display: none; }
.overview-summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.overview-icon { position: relative; flex: none; width: 20px; height: 20px; }
.overview-icon::before,
.overview-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-main);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.overview-icon::before { width: 16px; height: 2px; }
.overview-icon::after  { width: 2px; height: 16px; }
.overview-details[open] .overview-icon::after { display: none; }
.overview { margin: 0; border-top: 1px solid var(--color-main-light); }
.overview dd .line { display: block; }
.overview-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-main-light);
  font-size: var(--fs-note);
  line-height: 1.8;
}
.overview dt { font-weight: var(--fw-bold); }
.overview dd { margin: 0; color: var(--color-text-sub); }
@media (min-width: 768px) {
  .footer-inner { gap: 48px; }
  .overview-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 24px;
    padding: 16px 0;
    font-size: 16px;     /* 説明文（17px・18px）との差を小さくする。スマホは14px */
  }
}