@charset "UTF-8";


.l_section {}

.l_section__item {}

/* Modifier: セミナー本文の最上位スタック（タイトル帯／追従ナビ／本文） */
.l_section--seminar > .l_section__item + .l_section__item {
  margin-top: var(--_spaceLg);
}


.l_section--seminar > .m_seminarKv + .l_section__item {
  margin-top: 0;
}

/* Modifier: 本文内の節スタック */
.l_section--seminarSub > .l_section__item + .l_section__item {
  margin-top: var(--_spaceMd);
}


.l_section--seminarLink > .l_section__item + .l_section__item {
  margin-top: var(--_spaceLinkGroup);
}


.l_grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.l_grid__item {
  display: flex;
}

.l_grid__inner {
  display: block;
  width: 100%;
}

/* Modifier: ガター 40px（差し込み元の gap:40px と同値） */
.l_grid--gutterLg {
  margin-top: -40px;
  margin-inline: -20px;
}

.l_grid--gutterLg > .l_grid__item {
  padding-top: 40px;
  padding-inline: 20px;
}


.m_seminarMain {
  /* design-locked: BAKUSOKU 出力の実値。近似色の1本化・数値の丸めは禁止 */
  --_red: #b81c22;
  --_redDark: #9a1a24;
  --_blue: #005eb8;
  --_gray200: #e5e7eb;
  --_gray300: #d1d5db;
  --_gray400: #9ca3af;
  --_gray500: #6b7280;
  --_gray800: #1f2937;
  --_white: #fff;
  --_text: #333;
  --_navBg: #f4f5f6;

  /* 縦積み余白（host に spacing トークン層が無いためローカルに置く） */
  --_spaceLg: 32px;
  --_spaceMd: 24px;
  --_spaceLinkGroup: 56px;

  /* m_seminarList の本文。マーカーの縦位置計算にも使うので、
     この 2 つは必ずセットで変えること（片方だけ変えるとマーカーがずれる） */
  --_listFontSize: 14px;
  --_listLineHeight: 1.5;

  /* よくあるご質問。マーカー（Q. / A.）の縦位置計算にも使う */
  --_faqIndent: 32px;
  --_faqMarkerSize: 22px;
  --_faqLineHeight: 1.7;
  --_faqQSize: 15px;
  --_faqASize: 14px;

  /* prose 内リスト（差し込み元 markup に ul / ol が 0 件だったため新規に起こした値） */
  --_proseListGap: 12px;
  --_proseListItemGap: 4px;
  --_proseListIndent: 14px;

  /* 追従ナビの影 */
  --_navShadow: 0 4px 8px rgba(0, 0, 0, .05);

  /* 差し込み元は body に指定していた。host 全体へ波及させないためスコープする */
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
  color: var(--_text);
}


.m_seminarKv > h1 > img {
  display: block;
  width: 100%;
  height: auto;
}


.m_seminarNav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--_white);
  box-shadow: var(--_navShadow);
}

.m_seminarNav__top {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  background: var(--_white);
}


.m_seminarNav__search {
  display: flex;
  flex: 1;
  height: 34px;
  margin: 0;
  border: 1px solid var(--_gray400);
  background: var(--_white);
}

.m_seminarNav__searchInput {
  flex: 1;
  padding: 0 12px;
  border: none;
  outline: none;
  color: var(--_gray800);
  font-size: 13px;
}

/* type="search" のネイティブ装飾（クリアボタン等）を無効化して見た目を揃える */
.m_seminarNav__searchInput::-webkit-search-decoration,
.m_seminarNav__searchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.m_seminarNav__searchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  background: var(--_white);
  color: var(--_redDark);
  cursor: pointer;
}

.m_seminarNav__searchBtn svg {
  width: 20px;
  height: 20px;
}

.m_seminarNav__actions {
  display: flex;
  gap: 12px;
}

.m_seminarNav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 24px;
  color: var(--_white);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity .2s;
}

.m_seminarNav__btn:hover {
  opacity: .8;
}

.m_seminarNav__btn svg {
  width: 16px;
  height: 16px;
}

.m_seminarNav__btn--meeting {
  background: var(--_blue);
}

.m_seminarNav__btn--apply {
  background: var(--_red);
}


.m_seminarNav__bottom {
  padding: 0;
  border-bottom: 2px solid var(--_redDark);
  background: var(--_navBg);
}

.m_seminarNav__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m_seminarNav__linkItem {
  flex: 1;
  text-align: center;
}


.m_seminarNav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  color: var(--_gray800);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  transition: color .2s;
}

.m_seminarNav__link:hover {
  color: var(--_red);
}

.m_seminarNav__link svg {
  width: 16px;
  height: 16px;
  fill: var(--_redDark);
}

/* ============================================================
 * Block: m_seminarBody … 本文セクションの束
 * ========================================================== */
.m_seminarBody {
  padding-top: 10px;
  color: var(--_gray800);
}


.m_seminarSection {
  scroll-margin-top: 110px;
}

/* ============================================================
 * Block: m_seminarHeading … セクション見出し（h2）
 * heading Block の margin-bottom は §6 の明示例外
 * ========================================================== */
.m_seminarHeading {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin-bottom: 16px;
  padding: 4px 0 8px 12px;
  border-left: 5px solid var(--_redDark);
  border-bottom: 2px solid var(--_redDark);
  color: var(--_gray800);
  font-size: 18px;
  font-weight: bold;
}

/* 差し込み元では見出しアイコンを非表示にしている。markup 側は温存し aria-hidden を付与済み。
   この規則を消すだけでアイコン表示に切り替えられる */
.m_seminarHeading svg {
  display: none;
}

/* design-locked: コントラスト是正。元値 #9ca3af は白地 2.54:1 で AA 不合格だったため
   --_gray500（4.83:1）へ変更した（floor 優先。WCAG 2.1 AA） */
.m_seminarHeading__sub {
  color: var(--_gray500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}


.m_seminarProse > p,
.m_seminarProse__text {
  color: var(--_text);
  font-size: 14px;
  line-height: 1.7;
}

.m_seminarProse > p + p {
  margin-top: 16px;
}

/* 小見出しは prose 内（m_seminarProse__subHeading）と
   関連リンク組内（m_seminarLinkGroup）で同一スキンを共有する */
.m_seminarProse > h3,
.m_seminarProse__subHeading,
.m_seminarLinkGroup > h3,
.m_seminarLinkGroup__heading {
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 4px solid var(--_red);
  color: var(--_gray800);
  font-size: 15px;
  font-weight: 700;
}

.m_seminarProse > p + h3,
.m_seminarProse > ul + h3,
.m_seminarProse > ol + h3 {
  margin-top: 24px;
}

/* リスト。中黒は CSS 側で出し、流し込み原稿に「・」を手入力させない
   （表記ゆれ ・ / ･ / - を発生させないため） */
.m_seminarProse > ul,
.m_seminarProse > ol {
  margin-top: var(--_proseListGap);
}

.m_seminarProse > ul {
  padding-left: 0;
  list-style: none;
}

.m_seminarProse > ol {
  padding-left: 1.6em;
  list-style: decimal;
}

.m_seminarProse > ul > li,
.m_seminarProse > ol > li {
  color: var(--_text);
  font-size: 14px;
  line-height: 1.7;
}

.m_seminarProse > ul > li {
  position: relative;
  padding-left: var(--_proseListIndent);
}

.m_seminarProse > ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--_red);
}

.m_seminarProse > ul > li + li,
.m_seminarProse > ol > li + li {
  margin-top: var(--_proseListItemGap);
}

/* インライン要素。Markdown の **強調** / [リンク](...) が変換後に入りうる */
.m_seminarProse strong {
  font-weight: 700;
}

.m_seminarProse a {
  color: var(--_blue);
  text-decoration: underline;
  transition: color .15s;
}

.m_seminarProse a:hover {
  color: var(--_red);
}

/* ============================================================
 * Block: m_seminarProgram … プログラム枠
 * 上端 40px = 元 padding 16px ＋ 初出小見出しの margin-top 24px 相当。
 * 小見出しを margin-bottom のみに統一したため、その分を器で吸収している
 * ========================================================== */
.m_seminarProgram {
  padding: 40px 16px 16px;
  border: 1px solid var(--_gray300);
  border-radius: 4px;
  background: var(--_white);
}


.m_seminarFaq > h3 {
  position: relative;
  padding-left: var(--_faqIndent);
  color: var(--_gray800);
  font-size: var(--_faqQSize);
  font-weight: 700;
  line-height: var(--_faqLineHeight);
}

.m_seminarFaq > h3::before {
  content: "Q.";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: calc(var(--_faqQSize) * var(--_faqLineHeight));
  color: var(--_redDark);
  font-size: var(--_faqMarkerSize);
  font-weight: 700;
}

.m_seminarFaq > p,
.m_seminarFaq > ul,
.m_seminarFaq > ol {
  padding-left: var(--_faqIndent);
  color: var(--_text);
  font-size: var(--_faqASize);
  line-height: var(--_faqLineHeight);
}


.m_seminarFaq > h3 + p,
.m_seminarFaq > h3 + ul,
.m_seminarFaq > h3 + ol {
  position: relative;
  margin-top: 10px;
}

.m_seminarFaq > h3 + p::before,
.m_seminarFaq > h3 + ul::before,
.m_seminarFaq > h3 + ol::before {
  content: "A.";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: calc(var(--_faqASize) * var(--_faqLineHeight));
  color: var(--_redDark);
  font-size: var(--_faqMarkerSize);
  font-weight: 700;
}

/* 回答が複数段落・箇条書きに分かれる場合 */
.m_seminarFaq > p + p,
.m_seminarFaq > p + ul,
.m_seminarFaq > p + ol,
.m_seminarFaq > ul + p,
.m_seminarFaq > ol + p {
  margin-top: 10px;
}

/* 次の質問との間 */
.m_seminarFaq > p + h3,
.m_seminarFaq > ul + h3,
.m_seminarFaq > ol + h3 {
  margin-top: var(--_spaceLg);
}

/* 回答内の箇条書き。中黒は m_seminarProse と同じ出し方に揃える */
.m_seminarFaq > ul {
  list-style: none;
}

.m_seminarFaq > ul > li {
  position: relative;
  padding-left: var(--_proseListIndent);
}

.m_seminarFaq > ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--_red);
}

.m_seminarFaq > ol {
  padding-left: calc(var(--_faqIndent) + 1.6em);
  list-style: decimal;
}

.m_seminarFaq > ul > li + li,
.m_seminarFaq > ol > li + li {
  margin-top: var(--_proseListItemGap);
}

/* インライン要素 */
.m_seminarFaq strong {
  font-weight: 700;
}

.m_seminarFaq a {
  color: var(--_blue);
  text-decoration: underline;
  transition: color .15s;
}

.m_seminarFaq a:hover {
  color: var(--_red);
}


.m_seminarSchedule iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

/* ============================================================
 * Block: m_seminarList … 箇条書き。区切りは border で作り margin 打ち消しをしない
 * カスタムフィールドから <li> がクラス無しで来るため、型でも受ける
 * ========================================================== */
.m_seminarList {
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}

.m_seminarList > li,
.m_seminarList__item {
  position: relative;
  border-bottom: 1px solid var(--_gray200);
  color: var(--_text);
  font-size: var(--_listFontSize);
  line-height: var(--_listLineHeight);
}

/* Modifier: 対象となるお客様（● マーカー） */
.m_seminarList--target > li,
.m_seminarList--target .m_seminarList__item {
  padding: 8px 8px 8px 18px;
}


.m_seminarList--target > li::before,
.m_seminarList--target .m_seminarList__item::before {
  content: "●";
  position: absolute;
  top: 8px;
  left: 3px;
  display: flex;
  align-items: center;
  height: calc(var(--_listFontSize) * var(--_listLineHeight));
  color: var(--_red);
  font-size: 9px;
  font-weight: bold;
}

/* Modifier: よくあるお悩み・ニーズ（✓ マーカー） */
.m_seminarList--needs > li,
.m_seminarList--needs .m_seminarList__item {
  padding: 8px 8px 8px 22px;
  font-weight: normal;
}

.m_seminarList--needs > li::before,
.m_seminarList--needs .m_seminarList__item::before {
  content: "✓";
  position: absolute;
  top: 7px;
  left: 3px;
  color: var(--_red);
  font-size: 15px;
  font-weight: bold;
}

/* Modifier: ゴールイメージ（マーカーなし） */
.m_seminarList--goal > li,
.m_seminarList--goal .m_seminarList__item {
  padding: 8px 4px 8px 0;
  line-height: 1.7;
}


.m_seminarLinkGroup {}


.m_seminarLinkGroup > ul + h3 {
  margin-top: var(--_spaceLinkGroup);
}

/* ============================================================
 * Block: m_seminarLinkList … 関連リンク一覧
 * カスタムフィールドから <li><a href="..."> がクラス無しで来るため、型でも受ける
 * ========================================================== */
.m_seminarLinkGroup > ul,
.m_seminarLinkList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m_seminarLinkGroup > ul > li,
.m_seminarLinkList > li,
.m_seminarLinkList__item {
  font-size: 14px;
}

.m_seminarLinkGroup > ul > li + li,
.m_seminarLinkList > li + li,
.m_seminarLinkList__item + .m_seminarLinkList__item {
  margin-top: 10px;
}

.m_seminarLinkGroup > ul > li > a,
.m_seminarLinkList > li > a,
.m_seminarLinkList__link {
  display: inline-flex;
  align-items: baseline;
  color: var(--_blue);
  line-height: 1.5;
  text-decoration: none;
  transition: color .15s;
}

.m_seminarLinkGroup > ul > li > a::before,
.m_seminarLinkList > li > a::before,
.m_seminarLinkList__link::before {
  content: "＞";
  margin-right: 6px;
  color: var(--_blue);
  font-size: 12px;
  font-weight: bold;
  transition: color .15s;
}

.m_seminarLinkGroup > ul > li > a:hover,
.m_seminarLinkList > li > a:hover,
.m_seminarLinkList__link:hover {
  color: var(--_red);
  text-decoration: underline;
}

.m_seminarLinkGroup > ul > li > a:hover::before,
.m_seminarLinkList > li > a:hover::before,
.m_seminarLinkList__link:hover::before {
  color: var(--_red);
}

/* ============================================================
 * フォーカス可視（host の reset で outline が消えても残すため明示再定義）
 * ========================================================== */
.m_seminarNav__link:focus-visible,
.m_seminarNav__btn:focus-visible,
.m_seminarNav__searchBtn:focus-visible,
.m_seminarProse a:focus-visible,
.m_seminarFaq a:focus-visible,
.m_seminarLinkGroup > ul > li > a:focus-visible,
.m_seminarLinkList > li > a:focus-visible,
.m_seminarLinkList__link:focus-visible {
  outline: 2px solid var(--_redDark);
  outline-offset: 2px;
}


.m_seminarNav__search:focus-within {
  outline: 2px solid var(--_redDark);
  outline-offset: 2px;
}

/* ============================================================
 * モーション低減の希望を尊重する
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .m_seminarNav__btn,
  .m_seminarNav__link,
  .m_seminarProse a,
  .m_seminarFaq a,
  .m_seminarLinkGroup > ul > li > a,
  .m_seminarLinkGroup > ul > li > a::before,
  .m_seminarLinkList > li > a,
  .m_seminarLinkList > li > a::before,
  .m_seminarLinkList__link,
  .m_seminarLinkList__link::before {
    transition: none;
  }
}


@media screen and (max-width: 768px) {

  /* 追従をやめる。position を外すので z-index も効かなくなるが、
     重なる相手がいないので問題ない */
  .m_seminarNav {
    position: relative;
    top: auto;
  }

  .m_seminarNav__bottom {
    padding: 0;
  }

  /* 追従しないので、見出しが隠れる心配がない。
     アンカー移動時の退避量は詰めてよい（少しだけ余白を残す） */
  .m_seminarSection {
    scroll-margin-top: 16px;
  }

  /* 検索は SP では出さない。一覧ページ側の検索を使ってもらう */
  .m_seminarNav__search {
    display: none;
  }

  .m_seminarNav__top {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .m_seminarNav__actions {
    flex: 1;
  }

  .m_seminarNav__btn {
    flex: 1;
    padding: 0 8px;
    font-size: 12px;
    text-align: center;
  }

  /* 目次は 2 列に折り返す。space-between のままだと 1 個だけ残った行が
     左右に引き伸ばされるので、幅 50% で固定する */
  .m_seminarNav__links {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .m_seminarNav__linkItem {
    flex: 0 0 50%;
  }

  /* SP は指でタップするので、縦の余白を PC より少し厚くする */
  .m_seminarNav__link {
    padding: 10px 8px;
    font-size: 12px;
  }

  
  .m_seminarProgram {
    padding-left: 12px;
    padding-right: 12px;
  }
}