/* ===========================
   B) 全画面・中央（ヒーロー）専用
   =========================== */

/* ヘッダーを透明＆上に重ねる */
body.ui-fullscreen_center .site-header {
  background: transparent !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: none !important;
}

/* メニュー文字を白に */
body.ui-fullscreen_center .site-header a {
  color: #fff !important;
}
body.ui-fullscreen_center .site-header a:hover {
  opacity: .85;
}

/* ヒーローを完全フルスクリーン */
body.ui-fullscreen_center .hero-slider {
  width: 100vw;
  height: 100dvh !important;     /* iOS対応 */
  min-height: 100dvh !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

/* フォールバック（dvh非対応ブラウザ向け） */
@supports not (height: 100dvh) {
  body.ui-fullscreen_center .hero-slider {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* スライド自体もフル追従 */
body.ui-fullscreen_center .hero-slider .slide {
  height: 100% !important;
  min-height: 100% !important;
  background-size: cover;
  background-position: center;
}

/* 中央寄せオーバーレイ */
body.ui-fullscreen_center .hero-slider .overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  color: #fff;
  text-align: center;
  width: 90%;
  max-width: 900px;
  z-index: 20;
}

/* =========================
   UI-SPLIT：分割ヒーロー（現DOMに統一）
   DOM想定：
   <section class="sh-hero sh-hero--split">
     <div class="sh-hero_split__left">...</div>
     <div class="sh-hero_split__right" style="background-image:url(...)"></div>
   </section>
========================= */

/* =========================
   キャプション（テーマカラー連動）
========================= */
.hero-slider .hero-caption,
body.ui-split .sh-hero--split .hero-caption{
  display:inline-block;
  padding:.45em .9em;
  border-radius:12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sh-accent) 80%, transparent),
    color-mix(in srgb, var(--sh-accent) 50%, transparent)
  );
  color:#fff;
  font-weight:800;
  line-height:1.3;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.hero-slider .hero-subcopy,
body.ui-split .sh-hero--split .hero-subcopy{
  display:inline-block;
  margin-top:.6em;
  padding:.35em .75em;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  color:#fff;
  line-height:1.4;
}

/* =========================================================
   0) テーマカラー変数（未定義対策）
========================================================= */
body{
  --sh-accent: var(--sitehub-main-color, #0a4b78);
}

/* =========================================================
   1) SiteHub 標準ボタン（重複なし）
   テーマカラー：--sh-accent に連動
========================================================= */
.sh-btn{
  --btn-bg: var(--sh-accent, #0a4b78);
  --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 85%, #000);
  --btn-text: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;

  padding: .9em 1.4em;
  border-radius: 999px;
  border: none;

  background: var(--btn-bg);
  color: var(--btn-text);

  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  text-decoration: none;

  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sh-btn:hover{
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.sh-btn:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.2) inset;
}

/* variants */
.sh-btn--outline{
  background: transparent;
  color: var(--sh-accent, #0a4b78);
  border: 2px solid var(--sh-accent, #0a4b78);
}
.sh-btn--outline:hover{
  background: color-mix(in srgb, var(--sh-accent) 12%, transparent);
}

.sh-btn--ghost{
  background: transparent;
  color: var(--sh-accent, #0a4b78);
}
.sh-btn--ghost:hover{
  background: color-mix(in srgb, var(--sh-accent) 10%, transparent);
}

.sh-btn--lg{
  padding: 1.1em 1.8em;
  font-size: clamp(15px, 1.4vw, 18px);
}

.sh-btn .sh-btn__icon{
  font-size: 1.1em;
  line-height: 1;
}

/* =========================================================
   2) UI-SPLIT：左パネル（位置調整 + 半透明 + 色連動）を統合
   ※同じセレクタを2回書かない（これ1回で完結）
========================================================= */
body.ui-split .sh-hero-split__left{
  display: flex;
  flex-direction: column;
  justify-content: center;      /* 縦中央 */
  align-items: flex-start;

  padding-left: clamp(48px, 8vw, 140px);
  padding-right: clamp(24px, 4vw, 64px);
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(28px, 4vw, 64px);

  /* 半透明（テーマカラー連動） */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sh-accent) 18%, rgba(255,255,255,0.92)),
    rgba(255,255,255,0.85)
  );

  backdrop-filter: blur(2px);
  border-radius: 0px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.4);
}

/* タイトル・リードの間隔 */
body.ui-split .sh-hero__title{
  margin-top: 0;
  margin-bottom: 16px;
}

body.ui-split .sh-hero__lead{
  margin-bottom: 28px;
  max-width: 42ch;
}

/* CTA位置 */
body.ui-split .sh-hero__cta{
  margin-top: 8px;
}

/* =========================
   UI-SPLIT：レイアウト（高さ0対策・安定版）
========================= */

body.ui-split .sh-hero--split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;

  /* ✅ 高さが0にならない保険（必要なら数値は調整） */
  min-height: clamp(420px, 55vh, 680px);
}

/* 右：背景画像 */
body.ui-split .sh-hero-split__right{
  min-height: inherit;          /* 親のmin-heightを継承して確実に高さ確保 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 左：最低限の余白（必要なら） */
body.ui-split .sh-hero-split__left{
  padding: clamp(24px, 3vw, 48px);
}

@media (max-width: 600px){
  body.ui-split .sh-hero--split{
    grid-template-columns: 1fr;
    min-height: auto; /* 1カラム時は固定高さより中身優先に */
  }

  body.ui-split .sh-hero-split__right{
    min-height: 240px; /* ✅ 画像エリアの高さを確保 */
    order: -1;         /* 画像を上にしたい場合（下なら消してOK） */
  }
}


/* =========================================================
   UI-SPLIT-DUAL：左右とも画像 + テキスト + CTA（添付風）
========================================================= */

body.ui-split_dual .sh-hero--split-dual{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(420px, 62vh, 720px);
}

/* 2枚とも「画像バナー」 */
body.ui-split_dual .sh-splitcard{
  position:relative;
  display:block;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
}

/* 読みやすくする薄い暗幕（左右共通） */
body.ui-split_dual .sh-splitcard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.45),
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,.55)
  );
}

/* 真ん中の境界線 */
body.ui-split_dual .sh-splitcard--left{
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18);
}

/* テキスト位置（添付みたいに中央寄せ寄り） */
body.ui-split_dual .sh-splitcard__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: clamp(22px, 4vw, 56px);
  text-align:center;
  z-index:2;
}

/* タイトル：テーマカラーの帯っぽい雰囲気に */
body.ui-split_dual .sh-splitcard__title{
  margin:0;
  font-weight:900;
  line-height:1.12;
  font-size: clamp(22px, 3.2vw, 44px);
  padding: .25em .55em;
  border-radius: 1px;
  background: color-mix(in srgb, var(--sh-accent) 55%, transparent);
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

body.ui-split_dual .sh-splitcard__lead{
  margin:0;
  max-width: 40ch;
  font-size: clamp(13px, 1.2vw, 16px);
  opacity:.95;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* ボタンもクリックできるようにする */
body.ui-split_dual .sh-splitcard .sh-btn{
  pointer-events: auto;
}

/* UI-SPLIT-DUAL のCTAは塗りつぶしで視認性UP */
body.ui-split_dual .sh-splitcard .sh-btn{
  background: var(--sh-accent);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

body.ui-split_dual .sh-splitcard .sh-btn:hover{
  transform: translateY(-2px);
}


/* ホバーで少しだけ浮く */
body.ui-split_dual .sh-splitcard:hover{
  transform: translateY(-1px);
}
body.ui-split_dual .sh-splitcard{
  transition: transform .2s ease, filter .2s ease;
}

/* モバイル：縦に2枚 */
@media (max-width: 900px){
  body.ui-split_dual .sh-hero--split-dual{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  body.ui-split_dual .sh-splitcard{
    min-height: 46vh;
  }
  body.ui-split_dual .sh-splitcard--left{
    box-shadow: none;
  }
}
/* ✅ hero-caption 側の角も変える（split/dual共通の保険） */
body.ui-split_dual .hero-caption,
body.ui-split_dual .hero-slider .hero-caption{
  border-radius: 6px !important;
}

/* =========================================
   フルスクリーン / パララックス 共通
   アイキャッチの高さを少しだけ出す
   ========================================= */
body.ui-fullscreen_center .eyecatch-hero,
body.ui-fullscreen_center .post-thumbnail,
body.ui-parallax .eyecatch-hero,
body.ui-parallax .post-thumbnail {
  height: 30vh;        /* 55〜65vhで微調整OK */
  min-height: 360px;   /* ノートPC対策 */
}

/* 画像が<img>でも崩れない保険 */
body.ui-fullscreen_center .post-thumbnail img,
body.ui-parallax .post-thumbnail img,
body.ui-fullscreen_center .eyecatch-hero img,
body.ui-parallax .eyecatch-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   ヒーロースライド：テーマカラーをうっすら重ねる
   （--sh-slide-bg の画像を絶対に消さない）
========================================= */

/* まずは共通の背景指定を安定させる */
.hero-slider .slide{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================
   ヒーロースライド：黒オーバーレイ固定
   対象：default / fullscreen_center / parallax
   ※ split / split_dual には影響しない
========================================= */

/* default */
body.ui-default .hero-slider .slide,

/* fullscreen */
body.ui-fullscreen_center .hero-slider .slide,

/* parallax */
body.ui-parallax .hero-slider .slide{
  background-image:
    linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)),
    var(--sh-slide-bg) !important;
}

/* =========================================
   default hero-slider：初期表示を必ず先頭にする
   （訴求ポイントの上書きが見えるように）
========================================= */
body.ui-default .hero-slider .slide{
  opacity: 0;
  pointer-events: none;
}

body.ui-default .hero-slider .slide:first-child{
  opacity: 1;
  pointer-events: auto;
}