@charset "UTF-8";
/* CSS Document */ :root {
  --bg: #0b0b0c; /* ヘッダー背景 */
  --ink: #111; /* 文字濃色 */
  --fg: #fff; /* 文字色 */
  --muted: #8c8c94; /* 補助文字 */
  --acc: #4dd6ff; /* アクセント */
  --pad: min(5vw, 24px);
  --max: 1200px;
}
* {
  box-sizing: border-box
}
html, body {
  margin: 0;
  padding: 0
}
img {
  max-width: 100%;
  height: auto;
  display: block
}
/* ヘッダー */
.mp-header {
  background-color: #E46380;
  color: var(--fg);
}
.mp-header__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
  background-color: #E46380;
}
.mp-header__logo img {
  display: block;
}
/* ナビゲーション */
.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;
}
/* LivePocket ロゴ */
.mp-header__lp-logo {
  margin-left: 16px; /* ナビとの間に余白 */
}
.mp-header__lp-logo img {
  height: 32px;
  width: auto;
  display: block;
}
/* キービジュアル */
.mp-kv {
  width: 100%;
  background-color: #fff;
  text-align: center;
}
/* ロゴを中央寄せ＆整列 */
.mp-kv__logo {
  display: flex;              /* 横並び制御を有効化 */
  justify-content: center;    /* 中央寄せ */
  width: 100%;
  padding-top: 16px;   /* ← 上に余白を追加 */
  margin-bottom: 16px; /* 下はそのままmarginでOK */
}
.mp-kv__logo img {
  width: 60%;   /* 画面幅の50%で表示 */
  max-width: none;  /* max-width制限を外す */
  height: auto;
  display: block;
}
/* キービジュアル */
.mp-kv__img {
  width: 100%;
  height: auto;       /* 比率を保持して横いっぱい */
  display: block;
  object-fit: cover;
  object-position: center;
}
.mp-kv__copy {
  position: static; /* ← もともとの absolute を無効化 */
  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; /* h1 との間に余白 */
  color: #111; /* 白背景で読みやすい黒文字 */
  font-size: clamp(14px, 2.2vw, 18px); /* 一回り大きめで可変 */
}
/* 768px〜: ナビの字間少し広げる */
@media (min-width:768px) {
  .mp-header__nav a {
    letter-spacing: .02em
  }
}
@charset "UTF-8";
/* CSS Document */