/* ==========================================================================
   dx-ui.css  —  DX系ページ共通スタイル（Thanks / MyPage / Login）
   2025-08-11 compact-header & header-hide 対応
   ========================================================================== */

:root{
  --dx-bg-dark:#111;
  --dx-accent:#ff9800;   /* オレンジ */
  --dx-text:#222;
  --dx-muted:#777;
  --dx-white:#fff;
}

/* =========================
   ブランドロゴ（上部／共通）
   — ヘッダー帯をコンパクトに
   ========================= */
/* ――― ブランドロゴ：縦幅に合わせて大きく表示 ――― */
.dx-brand{
  text-align:center;
  padding: 10px 12px !important;   /* ヘッダー帯の上下余白。必要なら 8〜14px で調整 */
  margin: 0 auto !important;
}
.dx-brand img{
  /* 画面幅に応じて 44〜72px の高さで自動拡大（縦基準でクッキリ） */
  height: clamp(44px, 8vw, 72px) !important;
  max-height: clamp(44px, 8vw, 72px) !important;
  width: auto !important;          /* アスペクト比を維持 */
  display: inline-block;
}

/* ================
   上部ヒーロー帯
   ================ */
.dx-hero{
  background:#0f0f10;
  color:#cfcfcf;
  text-align:center;
  padding:48px 16px 56px;
}
.dx-hero .dx-subtitle{
  color: var(--dx-accent);
  font-weight:700;
  letter-spacing:.03em;
  font-size:13px;
  margin-bottom:8px;
}
.dx-hero h1{
  color:#fff;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing:.02em;
  line-height:1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  margin: 6px 0 8px;
}
.dx-hero p{
  color:#d9d9d9;
  font-size: clamp(14px, 1.6vw, 16px);
  margin:0;
}

/* ==================
   フッター（黒帯）
   ================== */
.dx-footer-black{
  background: var(--dx-bg-dark);
  color: var(--dx-white);
  text-align:center;
  padding:16px;
}
.dx-footer-black p{ margin:0; font-size:13px; }

/* ===============================================
   既存テーマのグローバルヘッダー/ナビを隠したい時に使用
   （念のため幅広いセレクタでカバー）
   =============================================== */
.dx-hide-theme-header header,
.dx-hide-theme-header #header,
.dx-hide-theme-header .site-header,
.dx-hide-theme-header .l-header,
.dx-hide-theme-header #site-navigation,
.dx-hide-theme-header .menu-main-container,
.dx-hide-theme-header .header-nav-wrapper{
  display:none !important;
}

/* =========================================================
   テンプレート別にテーマのヘッダー/ナビを非表示（強制）
   （MyPage でも確実に非表示にするためセレクタ追加）
   ========================================================= */
.page-template-page-thanks header.site-header,
.page-template-page-thanks #header,
.page-template-page-thanks .l-header,
.page-template-page-mypage-dx header.site-header,
.page-template-page-mypage-dx #header,
.page-template-page-mypage-dx .l-header,
.page-template-page-login-dx header.site-header,
.page-template-page-login-dx #header,
.page-template-page-login-dx .l-header{
  display:none !important;
}

/* ヘッダーを消した時に出る上余白の詰め（テーマ依存の余白を打ち消し） */
.page-template-page-thanks #content,
.page-template-page-thanks .site-content,
.page-template-page-mypage-dx #content,
.page-template-page-mypage-dx .site-content,
.page-template-page-login-dx #content,
.page-template-page-login-dx .site-content{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* 参考：グローバルメニューの「隙間」対策（Sticky 用プレースホルダなど） */
.page-template-page-thanks .header-sticky-placeholder,
.page-template-page-mypage-dx .header-sticky-placeholder,
.page-template-page-login-dx .header-sticky-placeholder{
  display:none !important;
}