/* ============================================================
 * パンくずナビゲーション
 * ============================================================ */
#page .l-breadcrumb {
  padding: 0;
}

#page .l-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: #686868;
}

#page .l-breadcrumb__item + .l-breadcrumb__item::before {
  content: "›";
  margin-right: 4px;
  color: #aaa;
}

#page .l-breadcrumb__item a {
  color: #686868;
  text-decoration: none;
}

#page .l-breadcrumb__item a:hover {
  text-decoration: underline;
}

/* ============================================================
 * l-header.is-fixed に top を明示（アニメーション後もビューポート最上部を保証）
 * WordPress 管理バーがある場合（ログイン時）はその高さ分ずらす
 * ============================================================ */
#page .l-header.is-fixed {
  top: 0;
}

/* WordPress 管理バーあり: PCは32px、SPは46px（実機の管理バー高さに合わせる）。
   ビューポート幅の @media ではなく、wp_is_mobile() による body の
   .pc / .sp クラスで振り分ける（ウィンドウを狭めても切り替わらない）。 */
.admin-bar #page .l-header.is-fixed {
  top: 32px;
}
.sp.admin-bar #page .l-header.is-fixed {
  top: 0;
}

/* ============================================================
 * メンテナンス告知帯
 * header-rakuten-music.html 内で .l-header の直後の兄弟要素として配置。
 * is-fixed 時は JS (main.js) で getBoundingClientRect を使い動的に top を設定。
 * CSS の top 値は JS が動作するまでのフォールバック。
 * ============================================================ */
#page .l-maintenance-banner {
  width: 100%;
  padding: 8px 16px;
  background-color: #d80000;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;
}

#page .l-maintenance-banner a {
  color: #fff;
  text-decoration: underline;
}

#page .l-header.is-fixed ~ .l-maintenance-banner {
  position: fixed;
  top: 72px; /* SP: l-header の高さ */
  left: 0;
  width: 100%;
  z-index: 98; /* l-header(97) より上 */
}

@media screen and (min-width: 768px) {
  #page .l-header.is-fixed ~ .l-maintenance-banner {
    top: 168px; /* PC: l-header(96px) + gnav-sub-menu-list(72px) */
  }
}

/* ============================================================
 * キャンペーン詳細（s-campaign-detail）の文字サイズ：全ページ共通
 *   PC : 見出し 24px / 項目名・本文 16px
 *   SP : 見出し 22px / 項目名 16px・本文 14px / 見出しの下余白 16px
 * ページ側のCSS（旧CSSの `#page .l-content h2 { font-size: 28px }` など）に左右されないよう、
 * ここで固定する。
 * ============================================================ */
body.pc #page section.s-campaign-detail h2.heading--m {
  font-size: 24px;
  line-height: 36px;
}

body.sp #page section.s-campaign-detail h2.heading--m {
  font-size: 22px;
  line-height: 27.5px;
  margin-bottom: 16px;
  padding-bottom: 0;
}

body #page section.s-campaign-detail .campaign-detail__table th p {
  font-size: 16px;
}

body.pc #page section.s-campaign-detail .campaign-detail__table td,
body.pc #page section.s-campaign-detail .campaign-detail__table td p,
body.pc #page section.s-campaign-detail .campaign-detail__table td a {
  font-size: 16px;
}

body.sp #page section.s-campaign-detail .campaign-detail__table td,
body.sp #page section.s-campaign-detail .campaign-detail__table td p,
body.sp #page section.s-campaign-detail .campaign-detail__table td a {
  font-size: 14px;
}

/* ============================================================
 * 料金プラン枠（#stack-section-price / #top-section-price）：全ページ共通
 * TOPページと同じく、枠全体にグレーの背景を敷く。
 * 月額・年額のグループだけがグレーだと、グループの間や枠の上下に白い帯が出るため。
 * ============================================================ */
body #page .l-content #stack-section-price,
body #page .l-content #top-section-price {
  background: #f7f7f7;
}

/* ============================================================
 * ページ下部の余白（共通）
 * ============================================================ */
/* 他社料金の注記枠(.price-caption)の下に白い余白を作らない */
#page .l-content #top-section-competitiveServices { padding-bottom: 0 !important; }
/* キャンペーン詳細の下に余白を作らない（直後のフッターが上余白を持つため） */
body #page .l-content .s-campaign-detail { padding-bottom: 0 !important; }

/* 料金プラン枠(#stack-section-price / #top-section-price)の下：「アプリ内課金に関して：」などの注釈の下の余白（PC）。
   年額グループの下余白(64px)に、枠自体の下余白(64px)が重なって128pxになっていたので、枠側を0にして64pxに統一する。
   TOP(.home)は年額グループ側の下余白が0で枠側の64pxで保っているので、対象外。 */
body.pc:not(.home) #page .l-content #stack-section-price,
body.pc:not(.home) #page .l-content #top-section-price {
  padding-bottom: 0 !important;
}