/* ================================
   Seminar LP (BEM) / breakpoints: 1000px / 767px
   Base typography aligns with site: 17px / 1.8
   Scope limited under body.seminar-lp
================================ */

/* ページ背景・ベース文字 */
body.seminar-lp {
  background: #f3f4f6;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: -0.03em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #333;
  margin: 0;
  padding: 40px 0;
}

/* コンテナ幅 */
.lp__container {
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding:10px 32px;
}

/* コンテンツ幅 */
.lp-content { 
    max-width: 800px; margin: 24px auto; 
}


/* Seminar LP：全アンカーをスムーススクロール */
html { scroll-behavior: smooth; }
/* アニメが苦手な方の環境は自動でオフ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* インラインカラー・ハイライト共通 */
body.seminar-lp mark.has-inline-color {
  background: none;          /* マーカーの黄背景などを打消し */
  padding: 0;                /* ブラウザ既定の内側余白を打消し */
  font-size: 22px;           /* ②と同じ大きさ */
  font-weight: 700;
  color: #ff4500;            /* ②の .lp__title-highlight に合わせる（必要に応じ変更） */
}

/* ================================
   Seminar LP：上部余白を完全除去
================================ */
body.seminar-lp,
body.seminar-lp #site-content,
body.seminar-lp .site-content,
body.seminar-lp main.lp__container {
  margin-top: 0 !important;
}

/* ================================
   h1タイトル
================================ */

.lp__hero .lp__title-text {
  display: none !important;
}

body.seminar-lp mark.lp__title-highlight {
  background: none;          /* マーカーの黄背景などを打消し */
  padding: 0;                /* ブラウザ既定の内側余白を打消し */
  font-size: 22px;           /* ②と同じ大きさ */
  font-weight: 700;
  color: #ff4500;            /* ②の .lp__title-highlight に合わせる（必要に応じ変更） */
}


/* ================================
   アイキャッチ画像（バナー）
================================ */

.lp__hero-banners {
  text-align: center;
  margin-bottom: 20px;
}
.lp__hero-banner--pc {
  display: block;         /* PC時は表示 */
  margin: 0 auto;         /* 中央寄せ */
  max-width: 100%;
  height: auto;
}
.lp__hero-banner--sp {
  display: none;          /* PC時は非表示 */
  margin: 0 auto;         /* 中央寄せ（SPで効く） */
  max-width: 100%;
  height: auto;
}

/* 767px以下で切替 */
@media (max-width: 767px) {
  .lp__hero-banner--pc { display: none; }
  .lp__hero-banner--sp { display: block; }
}

/* ================================
   CTA
================================ */
.lp__cta { 
    display: flex; justify-content: center; 
    margin: 2em 0 0 0; 
}

.lp__cta-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 48px;
    background: linear-gradient(45deg, #FFA500, #FF7F50);
    color: #fff; 
    font-weight: 700; 
    text-decoration: none;
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}

.lp__cta-link:hover {
    transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.28); 
}

/* 767px以下で切替 */
@media (max-width: 767px) {
  .lp__cta { 
      margin: 1em 0 0 0; 
  }
}

/* ================================
   リード文（前半）
================================ */

/*--------------------タイトルボックス（グレーボックス）--------------------*/
body.seminar-lp .intro p.lp__title.lp__title-text,
.entry-content .intro p.lp__title.lp__title-text,
.lp__container .intro p.lp__title.lp__title-text,
body.seminar-lp .wp-block-column.intro p.lp__title.lp__title-text {
  background-color: #EBEEF3 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 0 auto 40px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.1) !important;
  max-width: 800px !important;
  text-align: center !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

/* has-background を持つ場合も同様に打ち消す（Gutenberg対策） */
body.seminar-lp .intro p.lp__title.lp__title-text.has-background,
body.seminar-lp .intro p.lp__title.lp__title-text[class*="-background-color"] {
  background-color: #EBEEF3 !important;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.1) !important;
  padding: 20px !important;
  border-radius: 8px !important;
}

/*--------------------イントロボックス--------------------*/

.intro {
  margin: 40px auto;
  padding: 2em 3em;                /* 中の余白を追加してバランスをとる */
  background: #fff;                  /* 背景白（必要なら） */
  border: 1px solid #e5e5e5;         /* 薄いボーダー */
  border-radius: 8px;                /* 角丸 */
  box-shadow: 0 4px 10px rgba(0,0,0,.08); /* 柔らかいシャドウ */
}


.intro__heading {
  font-size: 24px; font-weight: 700; margin-bottom: 16px; position: relative;
}

.intro__heading::after {
  content: ""; position: absolute; bottom: -8px; left: 0; width: 50%; height: 2px;
  background: linear-gradient(45deg, #ff7f50, #ff3300);
}

.intro__list {
     list-style: none; padding: 0; margin: 0; 
}

.intro__item {
  position: relative; padding-left: 24px; margin-bottom: 12px; font-weight: 700; color: #444;
}

.intro__item::before {
  content: "●"; position: absolute; left: 0; top: 3px; color: #ff7f50; font-size: 18px;
}

/* Intro 段落（行間補正） */
body.seminar-lp .intro__text {
  line-height: 1.7 !important; /* Gutenbergやテーマの上書きを防ぐ */
  font-size: 17px;              /* LP全体のベースに合わせる（任意） */
  margin-bottom: 50px;
  color: #333;
}

/*--------------------打ち消しCSS（操作性のため）--------------------*/
body.seminar-lp .intro.has-background,
body.seminar-lp .intro[class*="-background-color"] {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
  border-radius: 8px !important;
  padding: 2em 3em !important;
  margin: 40px auto !important;
  color: #333 !important;
}

body.seminar-lp .intro__heading.has-background,
body.seminar-lp .intro__heading[class*="-background-color"] {
  background: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  font-size: 24px !important;     /* ←ここが見出しの文字サイズ（元に戻す） */
  font-weight: 700 !important;
  color: #333 !important;
  line-height: 1.4 !important;    /* タイトルは少し詰めて */
}

body.seminar-lp .intro p.has-background:not(.intro__heading),
body.seminar-lp .intro p[class*="-background-color"]:not(.intro__heading) {
  background: none !important;
  padding: 0 !important;
  margin: 0 0 1.5em 0 !important;
  color: #333 !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

body.seminar-lp .intro__item::before {
  color: #ff7f50 !important;
}

/* 767px以下で切替 */
@media (max-width: 767px) {

body.seminar-lp .intro.has-background,
body.seminar-lp .intro[class*="-background-color"] {
  padding: 2em 1.5em !important;
  margin: 0px auto !important;
  }

}

/* ================================
   リード文（後半）
================================ */

/*--------------------.lp__text--important--------------------*/
.lp__text--important {
  text-align: center;
  margin: 30px auto;
}

body.seminar-lp .lp__text--important {
  line-height: 1.7 !important; /* Gutenbergやテーマの上書きを防ぐ */
  font-size: 1.2em;              /* LP全体のベースに合わせる（任意） */
  margin-bottom: 50px;
  color: #333;
  font-weight: 600;
}

/*--------------------打ち消しCSS（操作性のため）--------------------*/
body.seminar-lp .lp__text--important.has-background {
  background: none !important;       /* 背景色を完全に打ち消す */
  border: none !important;           /* Gutenbergの境界線などがあれば除去 */
  box-shadow: none !important;       /* 念のため影も除去 */
  padding: 0 !important;             /* ブロック背景で発生する余白を打ち消し */
  margin: 30px auto 50px !important; /* 元CSSの指定を維持（中央寄せ＆余白） */
  text-align: center !important;     /* 元デザインと同一に */
  color: #333 !important;
  font-size: 1.2em !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  max-width: 800px;                  /* 他ブロックと幅を合わせる場合は追加 */
}

/*--------------------.lp__text--highlight--------------------*/
.lp__text--highlight {
  text-align: center;
  margin: 30px auto;
}

body.seminar-lp .lp__text--highlight {
    line-height: 1.7 !important; /* Gutenbergやテーマの上書きを防ぐ */
    font-size: 1.2em;              /* LP全体のベースに合わせる（任意） */
    margin-bottom: 50px;
    color: #ff4500;
    font-weight: 700;
}

/*--------------------打ち消しCSS（操作性のため）--------------------*/
body.seminar-lp .lp__text--highlight.has-background {
  background: none !important;        /* 背景を完全に打ち消す */
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;              /* Gutenbergの自動余白を除去 */
  margin: 30px auto 50px !important;  /* 元デザインに合わせる */
  text-align: center !important;      /* 中央寄せを維持 */
  color: #ff4500 !important;          /* 元の強調カラー */
  font-weight: 700 !important;        /* 太字 */
  font-size: 1.2em !important;        /* 元デザインの文字サイズ */
  line-height: 1.7 !important;        /* 行間統一 */
  max-width: 800px;                   /* 他要素と幅を統一（任意） */
}


/* ================================
   セクション見出し（セミナー概要など）
================================ */
.lp__section-title {
  max-width: 800px;
  margin: 24px auto;
  display: block;
  padding: 1em 1em;
  font-size: 1.2em;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #266280;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* --- Gutenbergの has-background や style 属性を打ち消す --- */
body.seminar-lp .lp__section-title.has-background,
body.seminar-lp .lp__section-title[style*="background-color"] {
  background: #266280 !important;      /* 本来の背景色に固定 */
  color: #fff !important;              /* Gutenbergで上書きされないように */
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.1) !important;
  padding: 1em 1em !important;
  margin: 24px auto !important;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .lp__section-title {
    font-size: 1.1em;
    padding: 0.8em;
  }
}

/* ================================
   登壇者セクション
================================ */

/* 1) .speaker 自体を Grid に固定（WPのflex指定を無効化） */
.speaker.wp-block-columns {
  display: grid !important;                 /* ← flex→grid */
  grid-template-columns: 260px 1fr;         /* 左固定/右可変（%にしたい場合は 1fr 2fr 等で） */
  align-items: center !important;           /* 高さ揃え */
  gap: 20px !important;                     /* 行間・列間 */
  box-sizing: border-box;

  /* 既存デザインを再掲（上書き漏れ対策） */
  background: #efefef !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.1) !important;
  max-width: 800px !important;
  margin: 20px auto !important;
  padding: 20px !important;
}

/* 2) WPの layout/gap 変数を打ち消し（Columnsの余計な間延び抑制） */
.speaker.wp-block-columns,
.speaker.wp-block-columns.is-layout-flex {
  --wp--style--block-gap: 20px !important;  /* gapは上で指定するが、変数も合わせる */
  gap: 20px !important;
}

/* 3) 各カラムに残っているflex系の影響を無効化（flex-basisやalign等） */
.speaker .wp-block-column {
  /* WPが当てるflex関連を無効化してGridの制御に一本化 */
  flex: initial !important;
  flex-basis: auto !important;
  align-self: auto !important;
  /* Gridでは “子要素が幅を押し広げない”ための保険 */
  min-width: 0;
  box-sizing: border-box;
  /* Columnsのデフォルトmarginを抑える */
  margin: 0 !important;
}

/* 左列・右列の中身のpadding（既存再現） */
.speaker__left  { padding: 16px !important; }
.speaker__right { padding: 16px !important; min-width: 0; }

/* 4) figure/img のデフォルト余白/幅を安定化（押し広げ防止） */
.speaker__left figure,
.speaker__right figure {
  margin: 0 !important;
}
.speaker__left .wp-block-image,
.speaker__left img,
.speaker__right .wp-block-image,
.speaker__right img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 5) ロゴ/顔写真の上限（既存再現＋微調整可） */
.speaker__logo img  { max-width: 200px !important; }
.speaker__photo img {
  max-width: 150px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.2) !important;
}

/* 6) テキスト系（既存再現） */
.speaker__meta {
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: #333 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.speaker__bio {
  color: #555 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 7) Gutenbergの has-background 等の打ち消し（再掲） */
.speaker .has-background,
.speaker .speaker__meta.has-background,
.speaker .speaker__bio.has-background,
body.seminar-lp .speaker > .wp-block-column.has-background {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* 左右の間に薄い縦線を追加 */
.speaker.wp-block-columns {
  position: relative;
}

/* 擬似要素で中央線を引く */
.speaker.wp-block-columns::before {
  content: "";
  position: absolute;
  top: 20px;                    /* 上下の余白（カード内paddingに合わせて調整） */
  bottom: 20px;
  left: 280px;                  /* ← 左カラム幅と一致させる（grid-template-columnsの値） */
  width: 1px;
  background: #d9d9d9;          /* 薄いグレー線 */
}

/* 8) モバイル：縦積み＋中央寄せ */
@media (max-width: 767px) {
  .speaker.wp-block-columns {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 16px !important;
  }

  /* モバイルでは左右とも全幅でOK */
  .speaker .wp-block-column {
    width: 100% !important;
  }

  /* ★縦線を非表示にする★ */
  .speaker.wp-block-columns::before {
    display: none !important;
    content: none !important;
  }
}

/*--------------------打ち消しCSS（操作性のため）--------------------*/

/* 右カラム：Gutenbergの inline flex-basis を無効化して本来の比率に */
.speaker .speaker__right[style*="flex-basis"] { 
  flex-basis: auto !important; 
}
.speaker .speaker__right { 
  flex: 3 1 0 !important; 
  padding: 16px !important; /* 既存 .speaker__right と同じ */
}

/* 左カラムもクラスを付けられるなら */
.speaker .speaker__left { 
  flex: 1 1 auto !important; 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 
  padding: 16px !important; 
}

/* 再利用ブロックの背景を公開時に打ち消し（テキスト内） */
body.seminar-lp .speaker__meta.has-background,
body.seminar-lp .speaker__meta[style*="background-color"],
body.seminar-lp .speaker__bio.has-background,
body.seminar-lp .speaker__bio[style*="background-color"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 念のため：列ブロックに背景が付いた場合も無効化 */
body.seminar-lp .speaker > .wp-block-column.has-background {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ================================
   プログラム（セミナータイムスケジュール）
================================ */

/* --- カード全体 --- */
.program__card {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .08) !important;
  margin-bottom: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Gutenbergで自動的につく背景指定の打ち消し */
body.seminar-lp .program__card.has-background,
body.seminar-lp .program__card[style*="background-color"] {
  background: #fff !important;
}

/* --- ホバー効果 --- */
.program__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, .15);
}

/* --- 時間部分 --- */
.program__time {
  font-weight: 700;
  color: #1E81B0;
  margin-bottom: 8px;
  font-size: 16px;
}

/* Gutenbergが勝手に背景を当ててくる場合をリセット */
body.seminar-lp .program__time.has-background,
body.seminar-lp .program__time[style*="background-color"] {
  background: none !important;
  color: #1E81B0 !important;
  padding: 0 !important;
  margin-bottom: 1em;
}

/* --- 内容部分 --- */
.program__content {
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}

/* 背景打ち消し */
body.seminar-lp .program__content.has-background,
body.seminar-lp .program__content[style*="background-color"] {
  background: none !important;
  color: #555 !important;
  padding: 0 !important;
  margin-bottom: 0;
}

/* --- スマホ調整 --- */
@media (max-width: 767px) {
  .program__card {
    padding: 12px 16px !important;
  }
  .program__time {
    font-size: 15px;
  }
  .program__content {
    font-size: 14px;
  }
}


/* ================================
   セミナー概要
================================ */
.overview {
  background:#fff; 
  border:1px solid #e5e5e5; 
  border-radius:8px;
  padding:20px; 
  margin:24px auto; 
  max-width:800px; 
  color:#333;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
}

.overview__list { 
    list-style:none; 
    padding:0; 
    margin:0; 
}

.overview__item {
  display:flex; 
  justify-content:flex-start; 
  padding:10px 0;
  border-bottom:1px solid #f0f0f0;
}

.overview__item:last-child { 
    border-bottom: none; 
}

.overview__label {
  width:25%; 
  font-weight:700; 
  color:#555; 
  text-align:left; 
  padding-right:10px; 
  font-size:16px;
}

.overview__content {
  width:75%; 
  text-align:left; 
  color:#333; 
  font-size:15px;
}

.overview__note {
  margin-top:20px; 
  padding:15px; 
  background:#EBEEF3; 
  font-size:14px; 
  line-height:1.6; 
  color:#555;
  border:1px solid #e5e5e5; 
  border-radius:4px;
}

.overview__note strong { 
    font-size:16px; 
    color:#1E81B0; 
    margin-bottom:8px; 
    display:block; 
}

/* セミナー概要：行間を明示して“詰まり”を解消 */
body.seminar-lp .overview__label,
body.seminar-lp .overview__content {
  line-height: 1.8 !important;   /* テーマ既定(1.5など)を打ち消す */
}

/* 2カラムの縦方向の見え方を安定させる */
body.seminar-lp .overview__item {
  align-items: baseline;          /* ラベルと内容の文字ベースラインを揃える */
  /* 必要なら行間に見える余白を増やすなら下記も */
  /* padding: 12px 0; */
}

/* 注意書きは他と同じ行間に */
body.seminar-lp .overview__note {
  line-height: 1.8;               /* 現状1.6 → 他と揃えて読みやすく */
}

/* スマホで縦積み時（あなたの既存メディアクエリに追加でもOK） */
@media (max-width: 480px) {
  body.seminar-lp .overview__item { align-items: flex-start; }
}


/* ================================
   細かな調整
================================ */
.lp__container hr {
  border: none;
  border-top: 2px solid #e0e0e0;
  margin: 20px 0;
}

/* ================================
   1000px ブレークポイント（必要なら）
================================ */
@media (max-width: 1000px) {
  .lp__container { padding: 32px 20px; }
}

/* ================================
   767px ブレークポイント
================================ */
@media (max-width: 767px) {
  .lp__container { padding: 24px 16px; border-radius: 12px; }
  .lp__title-text { font-size: 18px; }
  .lp__title-highlight { font-size: 20px; }
  .intro { margin: 24px auto; }
  .overview__label { width: 32%; }
  .overview__content { width: 68%; }
}


/* ==== Compat aliases (temporary) ==== */
/* コンテナ */
.lp-container { /* page-seminar.php 用 */
  /* 既存BEMへ委譲 */
}
.lp-container { all: unset; }
.lp-container { display: block; }
.lp-container { /* BEM実体へマッピング */
}
.lp-container { /* 実体クラスを併記して継承 */
}
.lp-container { /* 実装簡略化のため直接指定 */
  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  box-sizing: border-box;
}
@media (max-width: 1000px){
  .lp-container { padding: 32px 20px; }
}
@media (max-width: 767px){
  .lp-container { padding: 24px 16px; border-radius: 12px; }
}

/* ヒーロー＆CTA（page-seminar.php互換） */
.lp-hero { text-align: center; margin-bottom: 20px; }
.lp-title { font-size: 20px; font-weight: 700; margin: 0 auto 12px; }
.lp-meta { color:#555; margin-bottom: 10px; }
.lp-date, .lp-venue { display:inline-block; margin: 0 6px; }
.btn-cta { 
  display: inline-flex; justify-content:center; align-items:center;
  width: 240px; height: 48px; border-radius: 8px;
  background: linear-gradient(45deg, #FFA500, #FF7F50);
  color:#fff; font-weight:700; text-decoration:none;
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.28); }


@media (max-width: 480px) {
  .overview__item { flex-direction: column; align-items: flex-start; }
  .overview__label, .overview__content { width: 100%; }
  .overview__label { margin-bottom: 4px; }
}

/* ================================
   セミナー一覧に戻る
================================ */

.lp__backlink {
  text-align: center;       /* 中央揃え */
  margin: 40px 0 20px;      /* 上下余白 */
}

.lp__backlink-text {
  display: inline-block;     /* 要素を中央寄せに */
  font-size: 14px;
  opacity: 0.8;
}

.lp__backlink-link {
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  transition: all 0.3s ease;
}

.lp__backlink-link:hover {
  opacity: 0.8;
  border-bottom-color: #999;
}

.lp__backlink {
  text-align: center;       /* 中央揃え */
  margin: 40px 0 20px;      /* 上下余白 */
}

.lp__backlink-text {
  font-size: 14px;
  opacity: 0.8;
}

.lp__backlink-link {
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  margin: 0 6px;
  transition: opacity 0.3s ease;
}

.lp__backlink-link:hover {
  opacity: 0.8;
  border-bottom-color: #999;
}