@charset "UTF-8";

/* =========================
   Header.css – 完全版
   ========================= */

:root{
  --bg: #0b0b0c;          /* ヘッダー背景 */
  --ink: #111;            /* 文字濃色 */
  --fg: #fff;             /* 文字色 */
  --muted: #8c8c94;       /* 補助文字 */
  --acc: #4dd6ff;         /* アクセント */
  --pad: min(5vw, 24px);  /* 横余白 */
  --max: 1200px;          /* 最大幅 */

  /* ロゴ高（デバイス別） */
  --logo-h-pc: 18px;      /* PC */
  --logo-h-tab: 16px;     /* タブレット */
  --logo-h-sp: 16px;      /* スマホ */
}

/* ===== Reset (必要最小限) ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
img { max-width:100%; height:auto; display:block; }

/* ===== Header ===== */
.mp-header{
  background-color:#000;
  color:var(--fg);
}

.mp-header__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px var(--pad);
  max-width:var(--max);
  margin:0 auto;
  background-color:#000;
}

/* 左ロゴ / 右ロゴ（土台） */
.mp-header__logo img{ display:block; }
.mp-header__lp-logo{ margin-left:16px; }
.mp-header__lp-logo img{ display:block; }

/* ===== Global Nav（必要なら使用） ===== */
.mp-header__nav{ margin-left:auto; }
.mp-header__nav ul{
  display:flex;
  gap:12px;
  list-style:none;
  padding:0; margin:0;
  flex-wrap:wrap;
}
.mp-header__nav a{
  color:var(--fg);
  text-decoration:none;
  font-size:13px;
  opacity:.9;
}
.mp-header__nav a:hover{ opacity:1; text-decoration:underline; }

/* 768px〜: ナビの字間を少し広げる */
@media (min-width:768px){
  .mp-header__nav a{ letter-spacing:.02em; }
}

/* ===== Key Visual（任意セクション） ===== */
.mp-kv{ width:100%; background:#fff; text-align:center; }

/* ロゴを中央寄せ＆整列（任意） */
.mp-kv__logo{
  display:flex;
  justify-content:center;
  width:100%;
  padding-top:16px;
  margin-bottom:16px;
}
.mp-kv__logo img{
  width:60%;          /* 画面幅に応じて可変 */
  max-width:none;
  height:auto;
}

/* KV画像 */
.mp-kv__img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* KVコピー（任意） */
.mp-kv__copy{
  position:static;
  max-width:var(--max);
  margin:16px auto 0;
  padding:0 var(--pad);
  text-align:center;
  color:#111;
}
.mp-kv__copy h1{
  font-size:clamp(20px, 3.5vw, 30px);
  line-height:1.25;
  margin:0 0 10px;
}
.mp-kv__copy h1::after{
  content:"";
  display:block;
  height:6px;
  width:min(92%, 1100px);
  margin:12px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, #ff3b2f 0%, #ff4bd1 30%, #2f86ff 55%, #23e58d 78%, #f0d000 100%);
}
.mp-kv__copy p{
  margin:14px 0 0;
  color:#111;
  font-size:clamp(14px, 2.2vw, 18px);
}

/* =========================
   Header logos — 最終上書きブロック
   ※ HTMLの width/height 属性や他CSSを確実に無効化
   ========================= */

/* PC基準：高さで統一（幅は自動） */
.mp-header__bar img{
  height:var(--logo-h-pc) !important;
  width:auto !important;
  max-height:var(--logo-h-pc) !important;
  max-width:none !important;     /* img{max-width:100%} の影響を無効化 */
  display:block;
}

/* 左右ロゴの個別指定も同様に統一 */
.mp-header__logo img,
.mp-header__lp-logo img{
  height:var(--logo-h-pc) !important;
  width:auto !important;
  max-height:var(--logo-h-pc) !important;
  max-width:none !important;
}

/* タブレット */
@media (max-width:900px){
  .mp-header__bar img,
  .mp-header__logo img,
  .mp-header__lp-logo img{
    height:var(--logo-h-tab) !important;
    max-height:var(--logo-h-tab) !important;
  }
}

/* スマホ */
@media (max-width:640px){
  .mp-header__bar{ gap:10px; padding:6px 12px; }
  .mp-header__bar img,
  .mp-header__logo img,
  .mp-header__lp-logo img{
    height:var(--logo-h-sp) !important;
    max-height:var(--logo-h-sp) !important;
  }
}

/* さらに小さい端末（任意） */
@media (max-width:360px){
  .mp-header__bar img,
  .mp-header__logo img,
  .mp-header__lp-logo img{
    height:16px !important;
    max-height:16px !important;
  }
}
/* ===== Header vertical padding (top/bottom only) ===== */
:root{
  --head-padY-pc: 15px;   /* PCの上下余白 */
  --head-padY-tab: 8px;   /* タブレット */
  --head-padY-sp: 6px;    /* スマホ */
}

/* 共通：左右は既存の --pad を維持、上下だけ増やす */
.mp-header__bar{
  padding-block: var(--head-padY-pc) !important;
  padding-inline: var(--pad) !important;
  align-items: center;    /* 念のため中央揃えを明示 */
}

/* タブレット */
@media (max-width: 900px){
  .mp-header__bar{
    padding-block: var(--head-padY-tab) !important;
  }
}

/* スマホ：タップ領域も確保 */
@media (max-width: 640px){
  .mp-header__bar{
    padding-block: var(--head-padY-sp) !important;
    padding-inline: 12px !important;  /* 既存と同じ左右 */
    min-height: 44px;                  /* タップしやすい高さを確保（任意） */
  }
}