/* =========================================================================
   導入事例インタビュー（/interview/<slug>/ の 18 本で共通の記事レイアウト）
   正典: src/インタビュー_*.dc.html（値は inline style を転記）／比較相手は rendered/interview-*.html
   構成: SiteHeader → .iv-hero（パンくず・Interview・h1・人物・担当/利用プラン）
         → .iv-body（見出し＋本文の section を縦に並べる・締めの一文）→ .iv-back（親ページへ戻る）→ SiteFooter
   人物ブロック（運用ルール 2026-10-22）
     標準     : 校名入りロゴ 42px ＋ 先生名 18px/700（.iv-person__logo）
     校章型   : 校名入りロゴが無い学校（北須磨・知内）は 校章 42px ＋ 校名テキスト → 先生名（.iv-person__crest-row）
     顔写真型 : 学校トップ掲載（三原・國友・船曵）は 顔写真 64px 丸 ＋ 先生名 ＋ 校名（.iv-person--photo）
     肩書（英語科教諭・主任等）はどの型でも表示しない
   アクセントは <body data-plan>、映画（知内）は <body class="theme-dark" data-plan="movie">
   ========================================================================= */

.iv {
  /* 記事の配色。site.css のトークンに無い 2 色（--iv-dt / --iv-rule）はインタビュー専用としてここで定義 */
  --iv-hero-bg: var(--surface-alt);
  --iv-bg: var(--surface);
  --iv-ink: var(--ink-body);
  --iv-heading: var(--ink-heading);
  --iv-text: var(--ink-reading);
  --iv-crumb: var(--ink-faint);
  --iv-crumb-current: var(--ink-body);
  --iv-school: var(--ink-muted);
  --iv-dt: #9a9da6;
  --iv-dd: var(--ink-reading);
  --iv-rule: #e3e3e6;
  --iv-back-bg: var(--surface);
  --iv-back-text: var(--accent);
  --iv-back-border: var(--accent);
  --iv-back-bw: 1.5px;
  --iv-back-hover-bg: var(--accent);
  --iv-back-hover-text: var(--on-accent);
  --iv-back-hover-border: var(--accent);
  --iv-link-hover-opacity: .85;       /* プロトタイプの a:hover{opacity:.85}（ライトのみ） */

  /* プロトタイプのページルート（min-height:100vh の縦 flex、main が伸びる） */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--iv-ink);
  background: var(--iv-bg);
}
.theme-dark .iv, .iv.theme-dark {
  --iv-hero-bg: var(--accent-soft);   /* 映画 = #1a0d11 */
  --iv-bg: var(--surface-dark);
  --iv-ink: var(--c-text);
  --iv-heading: var(--c-text);
  --iv-text: var(--c-sub);
  --iv-crumb: var(--dk-muted);
  --iv-crumb-current: var(--c-text);
  --iv-dt: var(--dk-muted);
  --iv-dd: var(--dk-ink-2);
  --iv-rule: rgba(255, 255, 255, .12);
  --iv-back-bg: transparent;
  --iv-back-text: var(--c-text);
  --iv-back-border: var(--c-ghost-border);
  --iv-back-bw: 2px;
  --iv-back-hover-bg: var(--c-text);
  --iv-back-hover-text: var(--surface-dark);
  --iv-back-hover-border: var(--c-text);
  --iv-link-hover-opacity: 1;
}
.iv-main { flex: 1; }
.iv-wrap { max-width: 880px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   記事ヒーロー
   ------------------------------------------------------------------------- */
.iv-hero {
  background: var(--iv-hero-bg);
  padding: clamp(40px, 6vw, 72px) var(--pad-x);
}
.iv-crumb { font-size: 12px; color: var(--iv-crumb); margin-bottom: clamp(24px, 4vw, 40px); }
.iv-crumb a { color: var(--iv-crumb); text-decoration: none; transition: color .2s; }
.iv-crumb__sep { margin: 0 8px; }
.iv-crumb b { color: var(--iv-crumb-current); font-weight: 700; }

.iv-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 16px;
}
.iv-title {
  font-size: clamp(26px, 3.8vw, 42px); font-weight: 900; line-height: 1.5; letter-spacing: .02em;
  color: var(--iv-heading); margin: 0 0 24px;
}

/* 人物（標準: 校名入りロゴ → 先生名） */
.iv-person__logo {
  display: block; height: 42px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center;
}
.iv-person__name { font-size: 18px; font-weight: 700; color: var(--iv-heading); margin-top: 18px; }
/* 校章型: 校章 42px ＋ 校名テキストを横並び → 先生名 */
.iv-person__crest-row { display: flex; align-items: center; gap: 10px; height: 42px; }
.iv-person__crest { display: block; height: 42px; width: auto; object-fit: contain; }
.iv-person__school-name { font-size: 16px; font-weight: 700; color: var(--iv-heading); line-height: 1.3; }
/* ダーク（知内）は校章を白い丸 42px の中に 32px で置く */
.iv-person__crest-disc {
  width: 42px; height: 42px; border-radius: 50%; background: var(--frame-white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.iv-person__crest-disc .iv-person__crest { width: 32px; height: 32px; }
/* 顔写真型（学校トップ掲載）: 顔写真 64px 丸 ＋ 先生名 ＋ 校名 */
.iv-person--photo { display: flex; align-items: center; gap: 14px; }
.iv-person__photo { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.iv-person--photo .iv-person__name { margin-top: 0; }
.iv-person__school { font-size: 12.5px; color: var(--iv-school); margin-top: 2px; }

/* 担当・利用プラン */
.iv-meta {
  display: flex; flex-wrap: wrap; gap: 12px 72px;
  margin: clamp(24px, 3vw, 32px) 0 0; padding-top: clamp(20px, 2.5vw, 26px);
  border-top: 1px solid var(--iv-rule);
}
.iv-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--iv-dt); margin: 0 0 6px; }
.iv-meta dd { font-size: 13.5px; font-weight: 500; color: var(--iv-dd); margin: 0; }
.iv-meta dd a { color: var(--accent); text-decoration: none; font-weight: 700; }

/* -------------------------------------------------------------------------
   本文
   ------------------------------------------------------------------------- */
.iv-body {
  background: var(--iv-bg);
  padding: clamp(40px, 6vw, 72px) var(--pad-x);
}
.iv-body__inner {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(40px, 6vw, 56px);
}
.iv-sec__title {
  display: flex; gap: 14px; align-items: baseline;
  font-size: clamp(17px, 1.8vw, 20px); font-weight: 900; line-height: 1.6;
  color: var(--iv-heading); margin: 0 0 16px;
}
.iv-sec__bar {
  flex: none; width: 20px; height: 3px; background: var(--accent);
  border-radius: 2px; transform: translateY(-6px);
}
.iv-sec__text, .iv-sec__p { font-size: 15px; color: var(--iv-text); line-height: 2.1; margin: 0; }
.iv-sec__text { padding-left: 34px; }
/* 段落が複数ある節（小見出し「先生方にとって」等を含む） */
.iv-sec__texts { padding-left: 34px; display: flex; flex-direction: column; gap: 14px; }
.iv-sec__label { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0; }
.iv-sec__label--gap { margin-top: 8px; }
.iv-thanks {
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; color: var(--iv-heading);
  line-height: 2; margin: 0; text-align: center;
}

/* -------------------------------------------------------------------------
   親ページへ戻る
   ------------------------------------------------------------------------- */
.iv-back {
  background: var(--iv-bg);
  padding: 0 var(--pad-x) clamp(64px, 9vw, 120px);
}
.iv-back .iv-wrap { text-align: center; }
.iv-back__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--iv-back-bg); color: var(--iv-back-text);
  border: var(--iv-back-bw) solid var(--iv-back-border);
  padding: 15px 34px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background .2s, color .2s;
}

@media (hover: hover) {
  .iv-main a:hover { opacity: var(--iv-link-hover-opacity); }
  .iv-crumb a:hover { color: var(--accent); }
  .iv-back__btn:hover { background: var(--iv-back-hover-bg); color: var(--iv-back-hover-text); border-color: var(--iv-back-hover-border); }
}