/* =========================================================
   11/29 事業承継セミナー LP
   配色：深い紺（ヒーロー・個別相談・最終CTA）× 白 × 薄い青グレー。
   二つの道を「藍（親族・社内）」と「金（第三者・M&A）」で塗り分け、ボタンはHonorsのティール。
   読み手は60代以上が中心なので、本文は17〜18pxを基準にする。
========================================================= */
:root {
  --ink: #1a2534;
  --ink-soft: #4a5666;
  --paper: #ffffff;
  --mist: #f1f4f7;
  --line: #d9e0e7;

  --navy: #0f1f36;
  --on-navy: #f4f1ea;
  --on-navy-soft: rgba(244,241,234,.74);

  --kin: #24527a;        /* 親族・社内（白地） */
  --kin-light: #9cc3e6;  /* 親族・社内（紺地） */
  --ma: #8f5d10;         /* 第三者（白地） */
  --ma-light: #e0b768;   /* 第三者（紺地） */
  --gold: #c9a15a;       /* 紺地の罫線・装飾 */

  --cta: #3b8277;        /* Honorsティールを白文字4.5:1まで濃く */
  --cta-hover: #2f6b62;

  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --container: 1160px;
  --gutter: 24px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .03em;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kin); }
small { font-size: .86em; color: var(--ink-soft); }
:focus-visible { outline: 3px solid var(--kin); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
.sp { display: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 880px; }

/* 見出しの文節：スマホで単語の途中で改行させない */
.hero__title span, .sec-title span, .cta-final__date span, .cta-final__place span { display: inline-block; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 14px 48px;
  border-radius: 999px;
  font-weight: 700; font-size: 18px; letter-spacing: .08em;
  text-decoration: none;
  transition: background-color .2s;
}
.btn--fill { background: var(--cta); color: #fff; box-shadow: 0 10px 24px -10px rgba(15,31,54,.5); }
.btn--fill:hover { background: var(--cta-hover); }
.btn--large { min-height: 70px; padding: 16px 64px; font-size: 20px; }

/* ---------- ヘッダー ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  background: #fff;  /* 協賛ロゴ（白地JPG）と地色をそろえるため不透明の白 */
  box-shadow: 0 1px 0 rgba(15,31,54,.08);
}
.header__inner {
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.header__brands { display: flex; align-items: center; gap: 18px; }
.header__brand img { width: 124px; }
.header__sponsor { display: flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid var(--line); }
.header__sponsor > span { font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; white-space: nowrap; }
.header__sponsor img { width: 120px; }
.header__nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.header__nav a { color: var(--ink); text-decoration: none; }
.header__nav a:hover { color: var(--kin); text-decoration: underline; text-underline-offset: 5px; }
.header__cta {
  padding: 10px 24px; border-radius: 999px;
  background: var(--cta); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
}
.header__cta:hover { background: var(--cta-hover); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 52px) 0 64px;
  background:
    radial-gradient(ellipse 60% 55% at 82% 22%, rgba(80,128,184,.30), transparent 70%),
    radial-gradient(ellipse 50% 45% at 80% 88%, rgba(201,161,90,.16), transparent 70%),
    linear-gradient(160deg, #13284a 0%, var(--navy) 55%, #0b1729 100%);
  color: var(--on-navy);
}
.hero :focus-visible { outline-color: #fff; }
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; align-items: center;
}
.hero__head { grid-column: 1 / -1; position: relative; z-index: 2; }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker {
  display: inline-block; padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
  font-size: 15px; font-weight: 700; color: var(--ma-light); letter-spacing: .12em;
}
.hero__title {
  margin-top: 20px;
  font-family: var(--mincho); font-weight: 700;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.25; letter-spacing: .05em;
  white-space: nowrap;
  color: #fff;
}
.hero__lead { max-width: 32em; font-size: 17px; line-height: 1.85; color: var(--on-navy-soft); }

.hero__facts {
  margin-top: 24px; max-width: 34em;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero__facts > div {
  display: grid; grid-template-columns: 4.5em 1fr; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.18);
}
.hero__facts dt { font-weight: 700; color: var(--ma-light); font-size: 15px; padding-top: 2px; }
.hero__facts dd { line-height: 1.6; color: #fff; }
.hero__facts small { color: var(--on-navy-soft); }
.hero__facts strong { font-size: 19px; }
.hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hero__note { font-size: 15px; color: var(--on-navy-soft); }

/* 二つの道：左から流れてきた線が、右で二手に分かれて抜けていく */
.fm { position: relative; z-index: 1; }
.fm__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fm__node { fill: var(--navy); stroke: var(--gold); stroke-width: 3; }
.fm__arrow--kin { stroke: var(--kin-light); }
.fm__arrow--ma { stroke: var(--ma-light); }
.fm__root, .fm__end { position: absolute; margin: 0; line-height: 1.5; }
.fm__root b, .fm__end b { display: block; font-family: var(--mincho); font-weight: 700; }
.fm__root span, .fm__end span { display: block; margin-top: 4px; font-size: 14px; color: var(--on-navy-soft); }
/* 位置は SVG の座標（640×520）に合わせた % */
.fm__root { left: 0; width: 37%; top: 32%; text-align: right; }
.fm__root b { font-size: 22px; color: #fff; }
.fm__end { right: 2%; text-align: right; }
.fm__end b { font-size: clamp(22px, 2.3vw, 30px); }
.fm__end--kin { top: 0; }
.fm__end--ma { top: 82%; }
.fm__end--kin b { color: var(--kin-light); }
.fm__end--ma b { color: var(--ma-light); }
.fm__end b small { font-size: .62em; color: inherit; }

/* ロード演出：線が左から引かれ、行き先が現れる（1回だけ） */
.js .fm__svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .fm__node, .js .fm__root, .js .fm__end { opacity: 0; }
.js .fm__end { transform: translateX(-10px); }
.js .is-loaded .fm__trunk { transition: stroke-dashoffset 1.1s cubic-bezier(.3,0,.2,1) .2s; stroke-dashoffset: 0; }
.js .is-loaded .fm__node { transition: opacity .4s ease 1.1s; opacity: 1; }
.js .is-loaded .fm__root { transition: opacity .6s ease .9s; opacity: 1; }
.js .is-loaded .fm__branch { transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) 1.2s; stroke-dashoffset: 0; }
.js .is-loaded .fm__arrow { transition: stroke-dashoffset .35s ease-out 2.1s; stroke-dashoffset: 0; }
.js .is-loaded .fm__end { transition: opacity .6s ease 2.2s, transform .6s ease 2.2s; opacity: 1; transform: none; }

/* ---------- セクション共通 ---------- */
.sec { padding: 120px 0; }
.sec--mist { background: var(--mist); }
.sec--navy {
  background:
    radial-gradient(ellipse 50% 60% at 10% 0%, rgba(80,128,184,.22), transparent 70%),
    var(--navy);
  color: var(--on-navy);
}
.sec-head { margin-bottom: 60px; }
.sec-head .sec-lead { max-width: 780px; }
.sec-title {
  font-family: var(--mincho); font-weight: 700;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.45; letter-spacing: .05em;
}
.sec-title::after {
  content: ""; display: block; width: 56px; height: 2px; margin-top: 22px;
  background: var(--gold);
}
.sec-lead { margin-top: 26px; font-size: 18px; color: var(--ink-soft); }
.sec-lead small { display: inline-block; margin-top: 8px; }
.sec--navy .sec-lead { color: var(--on-navy-soft); }

/* ---------- 4つの段取り（左から右へ進む工程） ---------- */
.steps {
  position: relative;
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.steps::before {
  /* 工程を貫く矢印線 */
  content: ""; position: absolute; left: 0; right: 14px; top: 27px;
  height: 2px; background: linear-gradient(90deg, var(--line), var(--kin));
}
.steps::after {
  content: ""; position: absolute; right: 2px; top: 21px;
  width: 14px; height: 14px; border-top: 2px solid var(--kin); border-right: 2px solid var(--kin);
  transform: rotate(45deg);
}
.step { position: relative; }
.step__no {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); color: #fff;
  box-shadow: 0 0 0 6px #fff;
  font-family: var(--mincho); font-weight: 700; font-size: 24px;
}
.step h3 { margin-top: 22px; font-family: var(--mincho); font-size: 24px; line-height: 1.5; }
.step p { margin-top: 10px; font-size: 16px; line-height: 1.85; color: var(--ink-soft); }

/* ---------- 二つの道 ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.way {
  background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(15,31,54,.35);
}
.way__head { padding: 30px 36px 26px; color: #fff; }
.way--kin .way__head { background: linear-gradient(135deg, #2c6191, var(--kin)); }
.way--ma .way__head { background: linear-gradient(135deg, #a26c22, var(--ma)); }
.way__title { font-family: var(--mincho); font-weight: 700; font-size: 28px; line-height: 1.45; }
.way__who { margin-top: 6px; font-size: 16px; opacity: .92; }
.way__body { padding: 8px 36px 34px; }
.way__block { margin-top: 26px; }
.way__block h4 { font-size: 16px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.way--kin h4 { color: var(--kin); }
.way--ma h4 { color: var(--ma); }
.way__block ul { list-style: none; padding: 0; margin-top: 4px; }
.way__block li { position: relative; padding: 11px 0 11px 1.5em; line-height: 1.7; border-bottom: 1px dashed var(--line); }
.way__block li::before {
  content: ""; position: absolute; left: 2px; top: 1.2em;
  width: 9px; height: 9px; border-radius: 50%;
}
.way--kin li::before { background: var(--kin); }
.way--ma li::before { background: var(--ma); }

/* ---------- 当日の内容 ---------- */
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.topic { padding: 30px 0; border-top: 1px solid var(--line); }
.topic dt { font-family: var(--mincho); font-weight: 700; font-size: 24px; line-height: 1.5; }
.topic dd { margin-top: 10px; color: var(--ink-soft); }

.flow {
  list-style: none; padding: 32px 40px; margin-top: 56px; max-width: 780px;
  background: var(--mist); border-radius: 6px;
}
.flow li {
  position: relative; display: grid; grid-template-columns: 5em 1fr; gap: 12px;
  padding: 10px 0;
}
.flow li::before {
  content: ""; position: absolute; left: calc(5em - 18px); top: 1.2em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--cta);
}
.flow li::after {
  content: ""; position: absolute; left: calc(5em - 14px); top: 2.05em; bottom: -1em;
  width: 2px; background: var(--line);
}
.flow li:last-child::after { display: none; }
.flow time { font-weight: 700; grid-column: 1; }
.flow span { grid-column: 2; padding-left: 8px; }
.flow li:last-child span { font-weight: 700; color: var(--cta-hover); }

.speakers { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); max-width: 780px; }
.speakers__title { font-family: var(--mincho); font-size: 24px; }
.speakers p { margin-top: 8px; }

/* ---------- 個別相談（紺地） ---------- */
.consult { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 72px; align-items: start; }
.consult .sec-title { grid-column: 1 / -1; color: #fff; }
.consult__copy .sec-lead { margin-top: 0; }
.consult__list { list-style: none; padding: 0; margin-top: 32px; }
.consult__list li {
  padding: 16px 22px; margin-top: 12px;
  background: rgba(255,255,255,.06);
  border-left: 3px solid var(--gold); border-radius: 2px 8px 8px 2px;
  line-height: 1.7; color: #fff;
}
.consult__spec {
  border: 1px solid rgba(201,161,90,.6); border-radius: 8px; padding: 10px 30px;
  background: rgba(255,255,255,.03);
}
.consult__spec > div { display: grid; grid-template-columns: 4em 1fr; gap: 12px; padding: 18px 0; }
.consult__spec > div + div { border-top: 1px solid rgba(255,255,255,.14); }
.consult__spec dt { font-weight: 700; color: var(--ma-light); }
.consult__spec dd { line-height: 1.65; color: #fff; }
.consult__spec small { color: var(--on-navy-soft); }
.consult__note { grid-column: 1 / -1; font-size: 15px; color: var(--on-navy-soft); }

/* ---------- 開催概要 ---------- */
.outline { margin-top: 8px; border-top: 2px solid var(--navy); }
.outline > div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.outline dt { font-weight: 700; color: var(--kin); }
.outline dd { line-height: 1.8; }

/* ---------- アクセス ---------- */
.access { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.access__name { margin-top: 8px; font-family: var(--mincho); font-weight: 700; font-size: 24px; line-height: 1.55; }
.access__name small { font-family: var(--gothic); font-weight: 400; font-size: 16px; }
.access__addr { margin-top: 10px; }
.access__routes { list-style: none; padding: 0; margin-top: 18px; }
.access__routes li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.access__note { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.access__map iframe {
  display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 6px;
  box-shadow: 0 24px 48px -28px rgba(15,31,54,.35);
}

/* ---------- 主催・協賛 ---------- */
.orgs { margin-top: 8px; border-top: 2px solid var(--navy); }
.org {
  display: grid; grid-template-columns: 5em 220px 1fr; gap: 0 40px; align-items: center;
  padding: 36px 4px; border-bottom: 1px solid var(--line);
}
.org dt { font-weight: 700; color: var(--kin); align-self: start; padding-top: 4px; }
.org__logo { display: flex; justify-content: center; }
.org__logo img { width: 200px; }
.org__name { font-family: var(--mincho); font-weight: 700; font-size: 20px; line-height: 1.6; }
.org__name small { font-family: var(--gothic); font-weight: 400; font-size: 14px; }
.org__body p + p { margin-top: 10px; }
.org__stats { font-weight: 700; }
.org__link { display: inline-block; margin-top: 12px; font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { margin-top: 8px; }
.faq__item { padding: 24px 0; border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq dt { position: relative; padding-left: 2em; font-weight: 700; font-size: 18px; line-height: 1.6; }
.faq dd { position: relative; margin-top: 10px; padding-left: 2em; color: var(--ink-soft); }
.faq dt::before, .faq dd::before { position: absolute; left: 0; font-family: var(--mincho); font-weight: 700; }
.faq dt::before { content: "問"; color: var(--kin); }
.faq dd::before { content: "答"; color: var(--ma); }

/* ---------- 最終CTA・フッター ---------- */
.cta-final {
  padding: 110px 0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 0%, rgba(80,128,184,.28), transparent 70%),
    var(--navy);
  color: var(--on-navy); text-align: center;
}
.cta-final__title {
  display: inline-block; padding-bottom: 10px; border-bottom: 1px solid var(--gold);
  font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--ma-light);
}
.cta-final__date {
  margin-top: 26px;
  font-family: var(--mincho); font-weight: 700; color: #fff;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.4; letter-spacing: .05em;
}
.cta-final__place { margin-top: 12px; font-size: 18px; color: var(--on-navy-soft); }
.cta-final .btn { margin-top: 40px; }
.cta-final__note { margin: 22px auto 0; max-width: 36em; font-size: 15px; color: var(--on-navy-soft); }
.cta-final :focus-visible, .sec--navy :focus-visible { outline-color: #fff; }

.footer { padding: 40px 0 120px; background: #09121f; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.8; }
.footer__notes { margin-top: 10px; }
.footer__copy { margin-top: 14px; opacity: .7; }

/* ---------- サイトへの戻り先 ---------- */
.footer__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.footer__links a { color: inherit; text-decoration: underline; text-underline-offset: 4px; opacity: .9; }
.footer__links a:hover { opacity: 1; }

/* ---------- 固定CTA ---------- */
.float-cta { position: fixed; z-index: 40; right: 24px; bottom: 24px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.float-cta.is-visible { opacity: 1; pointer-events: auto; }
.float-cta__pc {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 30px; border-radius: 18px;
  background: var(--cta); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(15,31,54,.3);
}
.float-cta__pc span { font-size: 13px; font-weight: 400; opacity: .92; }
.float-cta__pc:hover { background: var(--cta-hover); }
.float-cta__sp { display: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px) {
  .header__nav { display: none; }
  .header__cta { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__title { white-space: normal; }
  .fm { margin-top: 24px; }
  .fm { max-width: 600px; width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { left: 27px; right: auto; top: 0; bottom: 14px; width: 2px; height: auto; background: linear-gradient(180deg, var(--line), var(--kin)); }
  .steps::after { left: 21px; right: auto; top: auto; bottom: 2px; transform: rotate(135deg); }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 22px; }
  .step__no { grid-row: span 2; }
  .step h3 { margin-top: 8px; }
  .step p { margin-top: 4px; }
  .ways, .topics, .consult, .access { grid-template-columns: 1fr; }
  .topics { gap: 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 60px; }
  .sp { display: inline; }
  .header__brand img { width: 88px; }
  .header__brands { gap: 10px; }
  .header__sponsor { gap: 6px; padding-left: 10px; }
  .header__sponsor > span { font-size: 10px; }
  .header__sponsor img { width: 84px; }
  .header__cta { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .hero { padding: calc(var(--header-h) + 44px) 0 72px; }
  .hero__lead { font-size: 17px; }
  .hero__facts > div { grid-template-columns: 4.5em 1fr; }
  .hero__actions .btn { width: 100%; }
  .fm__root b { font-size: 17px; }
  .fm__root span, .fm__end span { display: none; }
  .fm__root { top: 38%; }
  .fm__end b { font-size: 19px; }
  .fm__end--kin { top: 3%; }
  .fm__end--ma { top: 86%; }
  .sec { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
  .sec-lead { font-size: 17px; }
  .way__head { padding: 24px 20px 20px; }
  .way__body { padding: 4px 20px 26px; }
  .way__title { font-size: 24px; }
  .flow { padding: 22px 18px; }
  .flow li { grid-template-columns: 4.4em 1fr; }
  .flow li::before { left: calc(4.4em - 12px); }
  .flow li::after { left: calc(4.4em - 8px); }
  .consult__spec { padding: 4px 20px; }
  .outline > div { grid-template-columns: 1fr; gap: 2px; padding: 16px 2px; }
  .outline dt { font-size: 15px; }
  .org { grid-template-columns: 1fr; gap: 14px; padding: 28px 2px; }
  .org__logo { justify-content: flex-start; }
  .org__logo img { width: 170px; }
  .btn--large { width: 100%; padding: 16px 24px; }
  .float-cta { left: 0; right: 0; bottom: 0; }
  .float-cta__pc { display: none; }
  .float-cta__sp {
    display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  }
  .float-cta__sp .btn { width: 100%; min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .fm__svg path { stroke-dashoffset: 0; }
  .js .fm__node, .js .fm__root, .js .fm__end { opacity: 1; transform: none; }
}