/* =======================================================
  ページ全体
======================================================= */
.sl-page{
  --sl-radius: 10px;
  --sl-shadow: 0 4px 8px rgba(0,0,0,.08);
  --sl-bg: #fff;
  --sl-muted: #266280;
  --sl-accent: #FF7F50;
  --sl-accent2: #FFA500;
  --sl-title-grad: linear-gradient(135deg,#6666CC,#3880C1,#FF3366);

  background: #fff;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* =======================================================
  ページヘッダー
======================================================= */
.sl-page__header{
  background: var(--sl-title-grad);
  color:#fff;
  border:none;
  border-radius:2px;
  padding:22px 20px;
  margin:0 0 18px;
  box-shadow: var(--sl-shadow);
}

.sl-page__title{
  line-height:1.25;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  font-size:1.8rem;
  font-weight:700;
  margin:0 0 6px;
}
.sl-page__lead{
  margin:0;
  color:#f3f4f6;
  line-height:1.7;
}

@media (max-width:767px){
  .sl-page__header{ border-radius:10px; padding:18px 16px; }
}

/* =======================================================
  タブ
======================================================= */
.sl-tabs{
  display:flex; justify-content:center; gap:12px;
  margin:0 0 16px;
}

.sl-tabs__item{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding:10px 18px;
  font-weight:700; 
  font-size:1.3em; 
  color:#666; 
  text-decoration:none;
  border-bottom:3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.sl-tabs__item:hover{ color:#000; }
.sl-tabs__item--active,
.sl-tabs__item[aria-selected="true"]{ color:#000; border-bottom-color:#888; }

/* =======================================================
  セクション見出し
======================================================= */
.sl-section{ 
    margin:20px 0 28px; 
}

.sl-page .sl-section__title{
  display: block !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #6666CC, #3880C1, #FF3366) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  text-align: center !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  border-radius: 8px !important;
  margin: 3em 0 12px !important;
  box-shadow: var(--sl-shadow) !important; /* 任意 */
}
/* =======================================================
  カード全体
======================================================= */
.sl-page .sl-card{
  background: var(--sl-bg);
  border:1px solid #e5e5e5;
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.sl-page .sl-card:hover{ 
    transform: translateY(-2px); 
    box-shadow:0 8px 12px rgba(0,0,0,.15); 
}

/* =======================================================
  カード＞左カラムの「画像」
======================================================= */
.sl-page .sl-card__media{ 
    position:relative; 
    display:block; 
}

.sl-page .sl-card__media:hover{ 
    transform:scale(1.01); opacity:.92; 
}


/* =========== レイアウト（横2カラム） =========== */

.sl-page .sl-card.wp-block-columns{
  display:grid !important;
  grid-template-columns: 2fr 1fr; /* 画像:本文 = 2/3 : 1/3 */
  gap:10px !important;
  padding:10px;
  background:#efefef !important;
  --wp--style--block-gap: 0 !important; /* WP自動gap無効 */
}


/* =======================================================
  カード＞右カラムの設定
======================================================= */
/* 中間ラッパ無効化（Gutenberg入れ子対策） */
.sl-page .sl-card__right .is-layout-flex,
.sl-page .sl-card__right .wp-block-columns{ display:contents; }
.sl-page .sl-card__left figure,
.sl-page .sl-card__right figure{ margin:0 !important; }
.sl-page .sl-card__right p{ margin:0; }

/* =========== レスポンシブ =========== */
@media (max-width:767px){
  .sl-page{ max-width:100%; padding:16px 12px; }
  .sl-tabs{ flex-wrap:wrap; gap:8px; }
  .sl-page__title{ font-size:1.5rem; }
  .sl-page .sl-card--featured,
  .sl-page .sl-card.wp-block-columns{ grid-template-columns: 1fr; padding:8px; }
  .sl-page .sl-card__right{ padding:12px 12px 14px; }
}

/* =========== モーション軽減 =========== */
@media (prefers-reduced-motion: reduce){
  .sl-page .sl-card__img,
  .sl-page .sl-card,
  .sl-page .sl-cta__link{ transition:none !important; }
}

/* =========== 軽い初期化 =========== */
.sl-page h1, .sl-page h2, .sl-page h3{ margin-top:0; }
.sl-page img{ max-width:100%; height:auto; }

/* 右カラムを広げて読みやすく（PC/タブレット） */
@media (min-width: 768px){
  .sl-page .sl-card--featured,
  .sl-page .sl-card.wp-block-columns{
    grid-template-columns: 60% 40%;
  }
}

/* =======================================================
  カード＞右カラムの「擬似見出し」ボックス
======================================================= */

.sl-page .sl-card__title,
.sl-page .sl-card__time,
.sl-page .sl-card__point{
  background: linear-gradient(90deg,#f5f9fc,#ffffff);
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:12px 14px;
  margin:4px 0;
  position:relative;
}

/* 擬似見出しラベル（統一トーン） */
.sl-page .sl-card__title::before,
.sl-page .sl-card__time::before,
.sl-page .sl-card__point::before{
  display:block;
  font-weight:700;
  color: var(--sl-muted);
  border-bottom:2px solid var(--sl-muted);
  padding-bottom:6px;
  margin-bottom:10px;
  font-size:1em;
  content: attr(data-label); /* デフォ：data-label があれば優先 */
}

/* ラベル未指定時の既定文言 */
.sl-page .sl-card__title:not([data-label])::before{ content:"セミナータイトル"; }
.sl-page .sl-card__time:not([data-label])::before{ content:"開催日時"; }
.sl-page .sl-card__point:not([data-label])::before{ content:"本セミナーのポイント"; }

/* Gutenbergの背景上書き防止 */
.sl-page .sl-card__point.has-background,
.sl-page .sl-card__point .has-background{
  background:transparent !important; border:none !important; box-shadow:none !important;
}

/* =======================================================
  カード＞右カラムの「タイトル」ボックス
======================================================= */
.sl-page .sl-card__title{ 
    font-size:1.05rem; 
    line-height:1.5; margin:0 0 8px; 
}


/* =======================================================
  カード＞右カラムの「ポイント」ボックス
======================================================= */

.sl-page .sl-card__point .wp-block-list{ list-style:disc; padding-left:1.2em; margin:0; }
.sl-page .sl-card__point .wp-block-list > li{ margin:0 0 6px; line-height:1.8; }

/* 注意書き */
.sl-page .sl-card__note{ color:#666; font-size:.92rem; margin:6px 0 0; }

/* 箇条書きのインデントを浅くして行幅を確保 */
.sl-page .sl-card__point .wp-block-list{
  padding-left: 1em;          /* 既存: 1.2em → 少し狭く */
  list-style-position: outside;
}

/* ボックスの内側余白も少しだけ調整（任意） */
.sl-page .sl-card__point{
  padding-left: 12px;         /* 既存: 12～14px → 左右を詰めたい場合は 10px でもOK */
  padding-right: 12px;
}

/* 「本セミナーのポイント」内のUL：右paddingを詰める */
.sl-page .sl-card__point .wp-block-list {
  /* 上 右 下 左（左は箇条書きのインデントを確保）*/
  padding: 0 12px 0 1.2em !important;
}

/* has-background が付くケースも念のため同じに揃える */
.sl-page .sl-card__point .wp-block-list.has-background {
  padding: 0 12px 0 1.2em !important;
}

/* リスト項目の行間は維持（必要なら微調整） */
.sl-page .sl-card__point .wp-block-list > li {
  line-height: 1.8;
}

/*  マーカーの見た目だけ少し小さく（視覚的な詰まり改善） */
.sl-page .sl-card__point .wp-block-list > li::marker{
  font-size: .9em;
}

/* 箇条書き本体に当てる：左のインデントだけ確実に縮める */
.sl-page .sl-card__point ul.wp-block-list,
.sl-page .sl-card__point ul.wp-block-list.has-background {
  padding-inline-start: 1em !important;  /* ← 0.9〜1.2emで微調整 */
  margin-inline-start: 0 !important;
  text-align: left !important;           /* 念のため */
  list-style-position: outside;
}

/* li 側の余計な字下げをゼロに */
.sl-page .sl-card__point ul.wp-block-list > li {
  text-indent: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* =======================================================
  カード＞右カラムの「CTA」
======================================================= */

/* Columns だけ “中間ラッパ無効化”（CTAは flex のまま残す） */
.sl-page .sl-card__right .wp-block-columns.is-layout-flex{
  display: contents !important;
}

/* CTA ラッパー：中央寄せ */
.sl-page .sl-card__cta.wp-block-buttons{
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  --wp--style--block-gap: 12px !important; /* WPのギャップ変数も合わせて上書き */
}

/* WP のデフォ余白をリセット＆自動幅 */
.sl-page .sl-card__cta .wp-block-button{
  margin: 0;
  width: auto;
}

/* ボタン本体（グラデ・立体感） */
.sl-page .sl-card__cta .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(45deg, var(--sl-accent2), var(--sl-accent)) !important; /* has-background対策 */
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* hover / focus */
.sl-page .sl-card__cta .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,.28);
  filter: brightness(1.03);
}
.sl-page .sl-card__cta .wp-block-button__link:focus-visible{
  outline: 3px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* 文字末尾に矢印（HTML の先頭「>」は外すのがベター） */
.sl-page .sl-card__cta .wp-block-button__link::after{
  content: " ›";
  font-weight: 700;
  margin-left: 4px;
}

/* ゴースト（枠線のみ）を使うとき：.is-style-outline で適用 */
.sl-page .sl-card__cta .wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent !important;
  color: var(--sl-muted) !important;
  border: 2px solid var(--sl-muted);
  box-shadow: none;
}
.sl-page .sl-card__cta .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: var(--sl-muted) !important;
  color: #fff !important;
}

/* WPの左右寄せクラスが付いても強制中央に固定 */
.sl-page .sl-card__cta.wp-block-buttons.is-content-justification-left,
.sl-page .sl-card__cta.wp-block-buttons.is-content-justification-right,
.sl-page .sl-card__cta.wp-block-buttons.is-content-justification-space-between{
  justify-content: center !important;
}