/* ============================================================
   ベース
============================================================ */
:root {
  --orange-1: #FB6D1B;
  --orange-2: #FA1010;
  --orange:   #ff6200;
  --red:      #e8302a;
  --navy:     #14223e;
  --ink:      #1a1a1a;
  --gray-text:#6b7280;
  --grid-bg:  #f3f7fc;
  --grid-line:#e3eaf4;
  --gold:     #c9a24b;
  --content:  900px;   /* PC コンテンツ幅 */
  --content-sp: 315px; /* SP コンテンツ幅 */
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "BIZ UDPGothic", Meiryo, system-ui, sans-serif;

  /* ---- タイポグラフィ・スケール（添付指定どおり） ---- */
  --fz-h1: 48px;  --fz-h2: 36px;  --fz-h3: 30px;
  --fz-h4: 24px;  --fz-h5: 20px;  --fz-h6: 16px;
  /* ★ SPの文字サイズはここだけ変えればOK（PCには影響しません） */
  --fz-h1-sp: 32px;  --fz-h2-sp: 26px;  --fz-h3-sp: 22px;
  --fz-h4-sp: 20px;  --fz-h5-sp: 18px;  --fz-h6-sp: 15px;
  --fz-p-sp:  15px;  --fz-sub-sp: 12px;
  --fz-p:  16px;  --fz-sub: 12px;
  --lh-heading: 1.2;   /* 120% */
  --lh-text:    1.5;   /* 150% */
  --ls:    0.08em;     /* PC：文字間隔 8% */
  --ls-sp: 0.02em;     /* SP（-sp）：文字間隔 2% */

  /* ---- FV（ファーストビュー） ---- */
  /* ① 背景：画像にする場合は下を url("../img/fv_bg.png") に変更 */
  --fv-bg:
    /*radial-gradient(120% 90% at 85% 15%, #2f72d8 0%, rgba(47,114,216,0) 55%),
    radial-gradient(90% 80% at 100% 90%, #1d56b8 0%, rgba(29,86,184,0) 60%),
    linear-gradient(135deg, #0a1c45 0%, #102a5e 55%, #16367a 100%);*/
    url("../img/fv_bg.png");
  /* ② 前景（テキスト画像）の最大幅（PC）。SPは全幅表示 */
  --fv-img-max: 900px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.inner { width: var(--content); max-width: 100%; margin: 0 auto; padding: 0; }

/* ============================================================
   タイポグラフィ（Google Fonts: Noto Sans JP）
   ───────────────────────────────────────────────────────
   添付のタイプスケールに対応。
     token │ size  │ line-height │ weight
     ──────┼───────┼─────────────┼───────
     h1    │ 48px  │ 120%        │ 700
     h2    │ 36px  │ 120%        │ 700
     h3    │ 30px  │ 120%        │ 700
     h4    │ 24px  │ 120%        │ 700
     h5    │ 20px  │ 120%        │ 700
     h6    │ 16px  │ 120%        │ 700
     p     │ 16px  │ 150%        │ 400
     sub   │ 12px  │ 150%        │ 400
   文字間隔： PC = 8%（--ls）／ SP（-sp）= 2%（--ls-sp）
   ※ 画面幅 768px 以下では自動的に -sp（2%）へ切替わります。
      常時 2% で使いたい場合は「-sp」クラスを直接指定してください。
============================================================ */
.h1, .h2, .h3, .h4, .h5, .h6,
.h1-sp, .h2-sp, .h3-sp, .h4-sp, .h5-sp, .h6-sp {
  font-weight: 700;
  line-height: var(--lh-heading);
}
.p, .sub, .p-sp, .sub-sp {
  font-weight: 400;
  line-height: var(--lh-text);
}

/* サイズ */
.h1 { font-size: var(--fz-h1); }
.h2 { font-size: var(--fz-h2); }
.h3 { font-size: var(--fz-h3); }
.h4 { font-size: var(--fz-h4); }
.h5 { font-size: var(--fz-h5); }
.h6 { font-size: var(--fz-h6); }
.p,  .p-sp  { font-size: var(--fz-p); }
.sub,.sub-sp{ font-size: var(--fz-sub); }
.h1-sp{ font-size: var(--fz-h1-sp); }
.h2-sp{ font-size: var(--fz-h2-sp); }
.h3-sp{ font-size: var(--fz-h3-sp); }
.h4-sp{ font-size: var(--fz-h4-sp); }
.h5-sp{ font-size: var(--fz-h5-sp); }
.h6-sp{ font-size: var(--fz-h6-sp); }

/* 文字間隔：PC = 8% */
.h1, .h2, .h3, .h4, .h5, .h6, .p, .sub { letter-spacing: var(--ls); }

/* 文字間隔：-sp = 2%（常時固定） */
.h1-sp, .h2-sp, .h3-sp, .h4-sp, .h5-sp, .h6-sp, .p-sp, .sub-sp { letter-spacing: var(--ls-sp); }

/* SP幅では基本クラスも自動で 2%（= -sp 相当）へ */
@media (max-width: 768px) {
  .h1, .h2, .h3, .h4, .h5, .h6, .p, .sub { letter-spacing: var(--ls-sp); }
}


/* ============================================================
   セクション見出し（赤い下線つき）
============================================================ */
.section-title {
  text-align: center;
  margin: 0 0 3.125rem;
}
.section-title::after {
  content: "";
  display: block;
  width: 117px;
  max-width: 60%;
  height: 3px;
  margin: 1.875rem auto 0;
  background: var(--red);
  border-radius: 2px;
}

/* ============================================================
   ▼ ファーストビュー（FV）
   ───────────────────────────────────────────────────────
   2レイヤー構成
     ① 背景            … .fv の background（CSSで指定）   → 変数 --fv-bg
     ② テキスト/メイン画像 … .fv__image（前景の画像）       → <img src="img/fv.png">
   ◎ 背景を画像にする場合：
     :root の --fv-bg を   url("../img/fv_bg.png")   に変更するだけ
     （CSSから見た相対パスのため、img の前に ../ が付きます）
   ◎ 前景（テキスト画像）を差し替える場合：
     index.html の <img class="fv__image" src="..."> を変更
============================================================ */
.fv {
  background: var(--fv-bg);          /* ① 背景（別指定） */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fv__inner {
  width: 100%;
  max-width: var(--fv-img-max);      /* PC：900px で中央寄せ／SPは全幅 */
  margin: 0 auto;
}
.fv__link { display: block; }
.fv__image {                         /* ② テキスト/メイン画像（前景） */
  display: block;
  width: 100%;
  height: auto;
}
/* 前景プレビュー用プレースホルダー（本番画像に差し替え時は削除可） */
.fv__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 300px;
  margin: 16px;
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: 10px;
}
.fv__placeholder small { font-weight: 400; font-size: 12px; color: rgba(255,255,255,.7); }

/* ============================================================
   セミナー内容
============================================================ */
.seminar { padding: 48px 0 40px; }

.checklist {
  /*border: 1px solid #d7dde6;*/
  border-radius: 8px;
  box-shadow: 0 1px 18px rgba(20,34,62,.06);
  padding: 1.875rem 5.625rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 34px;
  row-gap: 14px;
  max-width: 900px;
  margin: 6px auto 0;
}
.checklist li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.checklist { /*padding-left: 30px;*/ margin-block: 6px auto; }
.checklist .chk { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; }

/* ============================================================
   CTAボタン（オレンジ）
============================================================ */
.cta-wrap { text-align: center; margin: 34px 0 0; }
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem 1.875rem;
  background: linear-gradient(100deg, var(--orange-1) 0%, var(--orange-2) 100%);
  color: #fff;
  font-size: clamp(17px, 3.4vw, 24px);
  font-weight: 800;
  text-shadow: 0 1px 2px #00000030;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(244,81,30,.4);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(244,81,30,.5); filter: brightness(1.03); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid #ffd2a8; outline-offset: 3px; }
.cta__arrow {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
}
.cta__arrow svg { width: 100%; height: 100%; }
.cta-note {
  margin: 10px 0 0;
  color: var(--gray-text);
}

/* ============================================================
   対談動画
============================================================ */
.videos {
  padding: 56px 0 60px;
  background-color: var(--grid-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
}
.video-block { margin-top: 3.125rem; }
.video-block:first-of-type { margin-top: 0.5rem; }

.video-label {
  display: flex;
  align-items: center;
  gap: 1.875rem;
  margin: 0 0 1.25rem;
}
.video-label .bar {
  display: inline-block;
  width: 6px; height: 1.2em;
  background: var(--red);
  border-radius: 2px;
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;            /* 16:9 */
  background: #000;
  border: 3px solid var(--navy);
  border-radius: 2px;
  overflow: hidden;
}
.movie iframe,
.movie video {
  position: absolute;
  /* 枠の内側へわずかに潜り込ませて左右・上下の隙間（グレー）をなくす */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  display: block;
}

/* ============================================================
   フッター
============================================================ */
.site-footer { background: var(--navy); color: #cdd5e2; padding: 34px 16px 30px; border-top: 3px solid var(--gold);}
.site-footer__inner { max-width: var(--content); margin: 0 auto; text-align: center; }
.site-footer__logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.site-footer__logo .mark { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.site-footer__logo .mark i { width: 5px; background: var(--gold); border-radius: 1px; display: block; }
.site-footer__logo .mark i:nth-child(1) { height: 12px; }
.site-footer__logo .mark i:nth-child(2) { height: 18px; }
.site-footer__logo .mark i:nth-child(3) { height: 24px; }
.site-footer__logo .name { font-size: 20px; letter-spacing: .14em; color: #fff; }
.site-footer__logo .name small { font-size: 11px; letter-spacing: .1em; }
/* 画像版ロゴ用 */
.site-footer__logo--image img { height: 34px; width: auto; margin: 0 auto; }
.site-footer__copy { margin: 16px 0 14px; font-size: 13px; }
.site-footer__nav { font-size: 12px; }
.site-footer__nav a { color: #cdd5e2; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__sep { margin: 0 10px; color: #5a6783; }

/* ============================================================
   レスポンシブ
============================================================ */
/* ============================================================
   スマホ表示（≤768px）：コンテンツ幅 315px ＋ レイアウト調整
============================================================ */
@media (max-width: 768px) {
  /* コンテンツ幅 */
  .inner             { width: var(--content-sp); }
  .site-footer__inner{ max-width: var(--content-sp); }

  /* チェックリストは1カラム */
  .checklist { grid-template-columns: 1fr; padding: 22px 20px; }

  .cta { padding: 16px 50px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}