/* 楽市楽座ブランドのヘッダー背景を白に
   (mock本来は $header-bg: #fff だが、admin用赤化のcommit 3daedb9c0で #E60044 に変更された副作用で
    rakuichiも赤背景になっている。mock元仕様に戻すoverride) */
body.rakuichi .header-vkdesign__inner,
body.rakuichi .header-vkdesign__inner::before {
  background: #fff;
}

/* 楽市楽座ロゴをアドアーズと同サイズに揃える
   (mock 既定: rakuichi=116px/sp 90px、adores=154px/sp 120px。
    ダブルブランド時に adores 基準で表示されるため、current_brand=楽市楽座でも揃える) */
body.rakuichi .header-vkdesign .header__logo a {
  width: 154px;
}
@media (max-width: 991.98px) {
  body.rakuichi .header-vkdesign .header__logo a {
    width: 120px;
  }
}

/* ダブルブランドの SP 表示時、各ロゴ画像の幅を current_brand と同じ 120px に縮める
   (double_brand には <a> がないため SCSS の .header__logo a { width:120px } が効かない) */
@media (max-width: 991.98px) {
  .header-vkdesign .header__logo--double-brand img {
    width: 120px;
  }
}

/* ボトムナビのブランド切替 button_to (form+button) を
   アンカー(a)と同じスタイルで表示する */
.c-bottomNavi ul li form {
  display: flex;
  flex: 1;
  height: 68px; /* デスクトップ: <a> の height と合わせる */
  margin: 0;
}

/* SP(md以下): ボトムバー54pxを満たすよう上書き */
@media (max-width: 991.98px) {
  .c-bottomNavi ul li form {
    height: 100%;
  }
}

.c-bottomNavi ul li button {
  color: #566f85;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* a 要素に合わせて 68px(デスクトップ) を明示指定。
     li に高さ指定がないため height: 100% だとボタンが内容分まで潰れる */
  height: 68px;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.7142857143rem;
  position: relative;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .c-bottomNavi ul li button {
    height: 100%;
  }
}

.c-bottomNavi ul li button svg {
  width: 24px;
  height: 24px;
  fill: #566f85;
}

.c-bottomNavi ul li button:hover,
.c-bottomNavi ul li button:hover svg {
  color: var(--color-brand);
  fill: var(--color-brand);
}

/* 他ブランド切替カードのボタン
   (button_to で form+button に展開されるため、mock の a 要素向けスタイルが効かない) */
.l-bottomLinks__store .text-area form {
  margin: 0;
}

.l-bottomLinks__store .text-area button {
  width: 100%;
  height: 34px;
  background: var(--color-brand);
  color: #fff;
  font-weight: bold;
  font-size: 0.8571428571rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  box-shadow: 0px 4px 2px 0px rgba(154, 169, 182, 0.3);
  transition: background 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.l-bottomLinks__store .text-area button:hover {
  background: var(--color-brand-hover);
}

/* メモセクション(楽市楽座のみ) */
.medal-memo__header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 14px;
  color: var(--color-body-color);
}

.medal-memo__header img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.medal-memo__textarea {
  width: 100%;
  min-height: 54px;
  background: #f7f8f9;
  border: none;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-body-color);
  resize: vertical;
}

.medal-memo__textarea::placeholder {
  color: var(--color-gray);
}

.medal-memo__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.medal-memo__updated {
  margin: 0;
  font-size: 10px;
  color: var(--color-body-color);
}

/* 交換画面等のシンプルヘッダ (モックの l-header-bar)
   sticky だとレイアウト内 padding-top との兼ね合いがあるため fixed に変更 */
.l-header-bar {
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  border-bottom: 1px solid #eef1f3;
}

.l-header-bar__inner {
  max-width: 1200px;
  display: flex;
  align-items: center;
  min-height: 64px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 991.98px) {
  .l-header-bar__inner {
    min-height: 56px;
  }
}

.l-header-bar h1 {
  flex: 1;
  text-align: center;
  font-size: 1.2857142857rem;
  font-family: var(--font-maru);
  padding-left: 12px;
  margin: 0;
}

.l-header-bar h1:last-child {
  padding-right: 32px;
  padding-left: 0;
}

.l-header-bar__back {
  width: 32px;
  color: #566f85;
  display: flex;
  align-items: center;
}

.l-header-bar__back .feather {
  width: 32px;
  height: 32px;
}

@media (max-width: 991.98px) {
  .l-header-bar__back .feather {
    width: 24px;
    height: 24px;
  }
}

.l-header-bar__link {
  width: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.7142857143rem;
  color: var(--color-body-color);
  font-weight: bold;
  text-decoration: none;
  transition: opacity .2s;
}

.l-header-bar__link:hover {
  color: var(--color-body-color);
  opacity: 0.7;
  text-decoration: none;
}

.l-header-bar__link img {
  width: 20px;
  height: 20px;
}

/* シンプルヘッダ(position: fixed)の高さ分、mainの上余白を確保
   /vk_assets/css/style.css の .l-header-bar + main { padding-top: 20px } および
   pay_modal レイアウトの Bootstrap .pt-0 { padding-top: 0 !important } を上書き */
.l-header-bar + main {
  padding-top: 64px !important;
}

@media (max-width: 991.98px) {
  .l-header-bar + main {
    padding-top: 56px !important;
  }
}

/* ページフッター(ご利用規約等のリンク群 + コピーライト) */
.medal-page-footer {
  /* c-bottomNavi (fixed 54px) と重なってもフッター末尾が隠れないよう、ナブバー高と同値の下余白を確保 */
  padding-bottom: 54px !important;
}

.medal-page-footer__links {
  gap: 12px 16px;
  font-size: 12px;
}

.medal-page-footer__links li {
  margin: 0;
}

.medal-page-footer__links a {
  color: var(--color-body-color);
  text-decoration: none;
}

.medal-page-footer__links a:hover {
  color: var(--color-body-color);
  text-decoration: underline;
}

.medal-page-footer__copyright {
  font-size: 10px;
  color: var(--color-gray);
}

/* 新規会員特典モーダルの吹き出し: 中央寄せ + 1行固定 */
.l-modal-welcomeBonus__contents .login .fukidashi {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* GAMEBOX セクションのコイン表示エリアと ENTER ボタンを 1:1 に分配 */
.c-gameboxBlock__text .coin-area > div:first-child {
  flex: 1;
  min-width: 0;
}

/* (うち○○有償コイン) を次行に折り返す。親幅を超えても nowrap で1行維持 */
.c-gameboxBlock__text .coin > div {
  flex-wrap: wrap;
}
.c-gameboxBlock__text .coin .note {
  flex-basis: 100%;
  white-space: nowrap;
}

/* メダル交換画面: タブ下を Figma BlueGray-030 で塗る
   flow-root は子 margin-bottom の相殺による領域縮退を防ぐ
   body:has() はページ全体(左右・フッター)までグレーを延ばす(`.l-tab-content` はメダル交換画面のみ) */
.l-tab-content {
  background: #f7f8f9;
  display: flow-root;
}
body:has(.l-tab-content) {
  background: #f7f8f9;
}
/* クーポン確認モーダル内のインラインアラート
   (パスコード不一致・サーバエラー・通信エラー共通のエラー表示領域)
   配置はパスコードinputの下・「クーポンを利用する」ボタンの上(Figma node 52441:106943)
   margin-bottom は Figma の親枠 gap 24px に揃える */
.c-staffPasscode__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fde7e8;
  color: #df4759;
  padding: 10px 18px;
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.2px;
  border-radius: 4px;
}

.c-staffPasscode__error-message {
  flex: 1;
  text-align: justify;
}

.c-staffPasscode__error-close {
  background: none;
  border: none;
  color: #df4759;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* お知らせ詳細の本文段落 */
.l-article .entry-content.news-content p {
  line-height: 1.7;
  margin-bottom: 1.5em;
}