/* ==========================================================================
   ibis skin — サイト全体を「マーケ向け CC研修 LP（lp/cc-training-mkt/）」のトンマナに揃える
   --------------------------------------------------------------------------
   swooo-h.css / swooo-h-pages.css の後に読み込み、トークンと共通部品だけを上書きする。
   ページ固有の構造（HTML）には手を入れない。値は LP の :root と同じものを使う。
     紺〜青のグラデ（deep）／ドット柄の薄青（lav）／白 の3種の地、オレンジのアクセント、
     Zen Kaku Gothic New（和文）＋ Outfit（英数字）
   ========================================================================== */

:root {
  /* LP と同じ値 */
  --ib-text: #222;
  --ib-main: #1E40AF;
  --ib-main-d: #172F85;
  --ib-ink: #0B1F4B;
  --ib-accent: #FF7A1A;
  --ib-accent-d: #B24F05;
  --ib-yellow: #FFD66B;
  --ib-lav: #F1F5FF;
  --ib-lav-2: #E6ECFA;
  --ib-line: #D3DCF0;
  --ib-grad: linear-gradient(90deg, #FF8A2A 0%, #FF6A00 100%);
  --ib-grad-bg: linear-gradient(100deg, #0B1F4B 0%, #12307F 40%, #1E40AF 75%, #2563EB 100%);
  --ib-f-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ib-f-en: "Outfit", "Helvetica Neue", Arial, sans-serif;

  /* 既存トークンを LP の色に写像する（--ink は文字色と暗い地の両方に使われているので紺にする） */
  --paper: #FFFFFF;
  --paper-2: var(--ib-lav);
  --paper-3: var(--ib-lav-2);
  --ink: var(--ib-ink);
  --ink-2: var(--ib-ink);
  --sub: #3F4A66;
  --sub-2: #66708A;
  --line: var(--ib-line);
  --line-2: #C3CEE8;
  --brass: var(--ib-main);        /* 明るい地のアクセント文字（AA を満たす青） */
  --brass-2: var(--ib-yellow);    /* 暗い地のアクセント */
  --brass-soft: var(--ib-lav);
  --brass-text: var(--ib-main);
}

/* ---------- 書体：明朝・Fraunces をやめて LP と同じゴシックに ---------- */
body.swooo-h { font-family: var(--ib-f-jp); color: var(--ib-text); background: #fff; letter-spacing: .02em; }
body.swooo-h :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, span, a, em, strong, b, small, div, label, summary, blockquote, figcaption, button, input, select, textarea) {
  font-family: inherit;
}
body.swooo-h *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--ib-f-jp) !important; font-variation-settings: normal !important; }
/* 英数字が主役の場所は Outfit */
body.swooo-h :is(.tnum, .step__big, .label__num, .stat__num, .num, [class*="__num"], [class*="__big"], [class*="-num"]) {
  font-family: var(--ib-f-en), var(--ib-f-jp) !important;
}
/* 見出しの一語だけ斜体・金色にする強調をやめ、LP と同じ太字＋色に */
body.swooo-h :is(h1, h2, h3, .sec__title, .ctabar__head) :is(em, i) { font-style: normal; color: var(--ib-main); font-weight: 700; }
body.swooo-h .sec--ink :is(h1, h2, h3, .sec__title) :is(em, i),
body.swooo-h .ctabar :is(em, i) { color: var(--ib-yellow); }
body.swooo-h :is(h1, h2, h3, .sec__title) { font-weight: 700; letter-spacing: .03em; color: var(--ib-ink); }
body.swooo-h .sec__title { color: var(--ib-ink); }

/* 紙の粒状感は LP にないので消す */
body.swooo-h .grain { display: none; }

/* ---------- ヘッダー ---------- */
body.swooo-h .topbar { background: rgba(255, 255, 255, .96); border-bottom-color: var(--ib-line); }
body.swooo-h .brand { display: inline-flex; align-items: center; gap: 12px; }
body.swooo-h .brand__logo { display: block; height: 32px; width: auto; }
body.swooo-h .brand__sub { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #66708A; text-transform: none; }
body.swooo-h .nav a { font-weight: 500; }
body.swooo-h .nav a:hover { color: var(--ib-main); }
body.swooo-h .topbar__cta,
body.swooo-h .nav-mobile__cta {
  background: var(--ib-grad); color: #fff; border: 0; border-radius: 999px;
  box-shadow: 0 3px 0 var(--ib-accent-d); font-weight: 700; letter-spacing: .04em;
}
body.swooo-h .topbar__cta:hover { background: var(--ib-grad); filter: brightness(1.05); }

/* ---------- ボタン：LP のオレンジの丸ボタン／白地に青枠 ---------- */
body.swooo-h .btn { border-radius: 999px; font-weight: 700; letter-spacing: .04em; }
body.swooo-h .btn.btn--solid {
  background: var(--ib-grad); color: #fff; border-color: transparent;
  box-shadow: 0 4px 0 var(--ib-accent-d);
}
body.swooo-h .btn.btn--solid:hover { background: var(--ib-grad); filter: brightness(1.05); transform: translateY(1px); box-shadow: 0 3px 0 var(--ib-accent-d); }
body.swooo-h .btn.btn--ghost,
body.swooo-h .btn.btn--outline { background: #fff; color: var(--ib-main); border: 2px solid var(--ib-main); }
body.swooo-h .btn.btn--ghost:hover,
body.swooo-h .btn.btn--outline:hover { background: var(--ib-main); color: #fff; }
body.swooo-h .sec--ink .btn.btn--ghost,
body.swooo-h .sec--ink .btn.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
body.swooo-h .btn:focus-visible,
body.swooo-h a:focus-visible,
body.swooo-h button:focus-visible { outline-color: var(--ib-accent); }

/* ---------- 地：白／ドット柄の薄青／紺〜青のグラデ ---------- */
body.swooo-h .sec--paper-2 {
  background-color: var(--ib-lav-2);
  background-image: radial-gradient(rgba(30, 64, 175, .10) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
body.swooo-h .sec--ink { background: var(--ib-grad-bg); }
body.swooo-h .sec--ink :is(h1, h2, h3, .sec__title) { color: #fff; }

/* セクションの小見出し（英字ラベル）は LP と同じオレンジ */
body.swooo-h .label { color: var(--ib-accent-d); font-weight: 700; letter-spacing: .08em; }
body.swooo-h .label__num { color: var(--ib-main); }
body.swooo-h .sec--ink .label { color: var(--ib-yellow); }

/* ---------- 相談バー・フッター ---------- */
body.swooo-h .ctabar { background: var(--ib-grad-bg); color: #fff; border: 0; }
body.swooo-h .ctabar__head, body.swooo-h .ctabar__kicker { color: #fff; }
body.swooo-h .footer { background: var(--ib-ink); }
body.swooo-h .footer__brand { display: inline-block; }
body.swooo-h .footer__brand img { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }

/* ---------- カード・表：LP の角丸と青い線 ---------- */
body.swooo-h :is(.card, .faq-item, .step, .price-single, .ait-plan, .ait-plan-detail) { border-color: var(--ib-line); }
body.swooo-h :is(.card, .ait-plan, .ait-plan-detail, .price-single) { border-radius: 14px; }
body.swooo-h .faq-item__num { color: var(--ib-accent); }

/* ---------- 斜体をやめる（LP は斜体を使わない。旧デザインの「— ご相談」のような斜体ラベルが残るため） ---------- */
body.swooo-h *:not(blockquote) { font-style: normal !important; }

/* ---------- フォームの送信ボタンも LP のオレンジの丸ボタンに ---------- */
body.swooo-h :is(.contact-form__submit, button[type="submit"], input[type="submit"], .wpcf7-submit) {
  background: var(--ib-grad) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--ib-accent-d); font-weight: 700; letter-spacing: .04em;
}
body.swooo-h :is(.contact-form__submit, button[type="submit"], input[type="submit"], .wpcf7-submit):hover { filter: brightness(1.05); }
/* 入力欄は LP と同じ角丸と青い枠 */
body.swooo-h :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { border-radius: 8px; border-color: var(--ib-line); }
body.swooo-h :is(input, select, textarea):focus { border-color: var(--ib-main); outline: none; box-shadow: 0 0 0 3px rgba(30, 64, 175, .15); }

/* ---------- 暗い地（最下部の相談セクションなど）の見出しは白系に ----------
   --ink を紺に写像したため、暗い地の上で見出しが紺＝背景と同化し、強調の em も青で読めなかった */
body.swooo-h :is(.final, .sec--ink, .ctabar) :is(h1, h2, h3, .final__title, .sec__title, .ctabar__head) { color: #fff; }
body.swooo-h :is(.final, .sec--ink, .ctabar) :is(h1, h2, h3, .final__title, .sec__title, .ctabar__head) :is(em, i) { color: #C9D8FF; }
body.swooo-h .final { background: var(--ib-grad-bg); }