@charset "UTF-8";
/* ===== campaign/common/css/stack-trial-button.css を統合 ===== */
#page .l-content .btn-apply {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
}

#page .l-content .btn-apply a {
  color: #ffffff;
}

#page .l-content .btn-apply a.trial-btn, #page .l-content .btn-apply a.iap-store-link {
  display: flex;
  padding: 24px 8px 24px 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 74px;
  background: #bf0000;
}

#page .l-content .btn-apply a.trial-btn .txt, #page .l-content .btn-apply a.iap-store-link .txt {
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
}

#page .l-content .btn-apply .btn-apply--caption {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

#page .l-content .btn-apply .btn-apply--caption a {
  color: #006497;
}

.pc #page .l-content .btn-apply {
  width: 400px;
  margin: 0 auto;
}

.pc #page .l-content .btn-apply a.trial-btn,
.pc #page .l-content .btn-apply a.iap-store-link {
  transition: all 0.2s ease-in;
}

.pc #page .l-content .btn-apply a.trial-btn .txt,
.pc #page .l-content .btn-apply a.iap-store-link .txt {
  font-size: 20px;
  line-height: 26px;
}

.pc #page .l-content .btn-apply a.trial-btn:hover,
.pc #page .l-content .btn-apply a.iap-store-link:hover {
  background: #ff1212;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}

.pc #page .l-content .btn-apply .btn-apply--caption {
  font-size: 16px;
  line-height: 24px;
}

/* ===== css/style.css（本番のページCSS）を統合 ===== */
#page a {
  color: #BF0000;
}

#page .l-content #top-section-step {
  background: #f7f7f7;
}

#page .l-content .bg-light .summary-group {
  gap: 24px;
}

#page .l-content .step-overview ul li {
  width: 103px;
}

#page .l-content .multi-step > h3 {
  text-align: center;
  background: #781414;
  color: #FFFFFF;
}

#page .l-content #top-section-step strong.red {
  color: #BF0000;
}

#page .l-content .step-overview ul li p.step-overview-number {
  color: #781414;
}

.slick-dots li button::before {
  content: none;
}

#page .campaign-hero__schedule p:first-child br:last-child {
  display: none;
}

#page .campaign-hero__schedule__note a {
  color: white;
  text-decoration: underline;
}

#page .App {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

#page .CampaignButton {
  margin: 0;
}

#page .RedirectionText {
  margin: 0;
}

#page .Below {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#page .agreement-message strong {
  color: black;
}

#page .InfoText {
  margin: 0;
}

#page .CampaignButton-enabled span.RexButton-message {
  color: white;
}

#page .CampaignButton-disabled span.RexButton-message,
#page .CampaignButton-applied span.RexButton-message {
  color: #898989;
}

#page .CampaignButton-success span.RexButton-message {
  color: #047205;
}

#page #best-value-music-app {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

#page #best-value-music-app h2 {
  color: #000;
  text-align: justify;
  /* JP Header Small 20px/Bold */
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  /* 140% */
}

#page #best-value-music-app h3 img {
  width: 182px;
  height: 32px;
}

#page .campaign-detail__table td {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

#page .l-campaign-03 .s-campaign-detail h2 {
  color: black;
}

#page .l-campaign-03 .s-campaign-detail a {
  color: #00a0f0;
}

#page .l-content .multi-step .multi-step-content p.Limited_lead {
  color: #BF0000;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

#page .l-content .multi-step .multi-step-content p.step1_text {
  color: #000;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
}

#page .l-content .multi-step .multi-step-content p.step2_text {
  color: #000;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  /* 133.333% */
}

#page .l-content .multi-step .multi-step-content p.step_lead {
  color: #000;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  /* 133.333% */
}

#page .l-content .multi-step .multi-step-content p.step3_text {
  color: #000;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
}

#page .l-content #top-section-step p.small {
  font-size: 12px;
  line-height: 16px;
}

/* ブックスキャンペーン */
/* Step1 */
#page .l-content .plan-item.yearly .plan-price-container .detail-btn {
  background: #9b00ec;
}

/* 料金プラン部分 */
#page #top-section-step .plan-monthly-group {
  background: none;
  padding: 0;
}

#page #top-section-step .plan-monthly-group .ttl-group {
  justify-content: center;
}

#page #top-section-step .plan-monthly-group .ttl-group h2 {
  color: #000;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

#page #top-section-step .plan-monthly-group .plan-item {
  height: auto;
}

#page #top-section-step .plan-monthly-group .plan-item.standard {
  border-top: 1px solid #d80000;
  border-bottom: 1px solid #d80000;
  border-right: 1px solid #d80000;
}

#page #top-section-step .plan-monthly-group .plan-item.cardmobile {
  border-top: 1px solid #ef0aa1;
  border-bottom: 1px solid #ef0aa1;
  border-right: 1px solid #ef0aa1;
}

#page #top-section-step .plan-monthly-group .plan-item.yearly {
  border-top: 1px solid #9b00ec;
  border-bottom: 1px solid #9b00ec;
  border-right: 1px solid #9b00ec;
}

/*------ 以下PC設定 ------ */
/* ↓ 旧メディアクエリ(min-width:768px)を .pc に置換 */
.pc #page .App {
  width: 600px;
  gap: 24px;
}

.pc #page .l-content .bg-light .summary-group {
  gap: 32px;
}

.pc #page .CampaignButton-enabled span.RexButton-message {
  font-size: 36px;
}

.pc #page .CampaignButton a {
  max-width: none;
}

.pc #page .s-campaign-hero {
  background: url(/assets/pages/campaign/books_stampcard/img/bg.jpg) no-repeat center top/auto 87% #BF0000;
}

/* 旧CSSのスケジュール帯(::after・ピンク70px)は、本番では content が無く表示されない。
   ローカルでは共通CSSの content:"" で表示されてしまうため、出さない */
.pc #page .s-campaign-hero::after {
  content: none !important;
  display: none !important;
}

.pc #page #best-value-music-app {
  padding: 32px 0;
}

.pc #page #best-value-music-app h3 img {
  width: 273px;
  height: 48px;
}

.pc #page .l-content .multi-step .multi-step-content {
  gap: 24px;
}

.pc #page .l-content .multi-step .multi-step-content img {
  width: 100%;
  height: auto;
}

.pc #page .l-content .multi-step .multi-step-content p.Limited_lead {
  font-size: 28px;
  line-height: 40px;
}

.pc #page .l-content .multi-step .multi-step-content p.step1_text {
  font-size: 36px;
  line-height: 40px;
}

.pc #page .l-content .multi-step .multi-step-content p.step2_text {
  font-size: 36px;
  line-height: 40px;
}

.pc #page .l-content .multi-step .multi-step-content p.step_lead {
  font-size: 20px;
  line-height: 28px;
}

.pc #page .l-content .multi-step .multi-step-content p.step3_text {
  font-size: 36px;
  line-height: 40px;
}

.pc #page .l-content .step-overview ul li {
  width: 160px;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ブックスキャンペーン */
/* Step1 */
/* 料金プラン部分 */
.pc #page #top-section-step .plan-monthly-group .ttl-group h2 {
  font-size: 24px;
}

.pc #page #top-section-step .plan-monthly-group {
  padding: 0 !important;
}

.pc #page #top-section-step .plan-monthly-group .plan-group-outer {
  flex-direction: column !important;
}

.pc #page #top-section-step .plan-monthly-group .plan-item.standard {
  border-top: 8px solid #d80000;
  border-left: 1px solid #d80000 !important;
}

.pc #page #top-section-step .plan-monthly-group .plan-item.cardmobile {
  border-top: 8px solid #ef0aa1;
  border-left: 1px solid #ef0aa1 !important;
}

.pc #page #top-section-step .plan-monthly-group .plan-item.yearly {
  border-top: 8px solid #9b00ec;
  border-left: 1px solid #9b00ec !important;
}

/* ↑ 置換ここまで */
/* ↓ 旧メディアクエリ(max-width:768px)を .sp に置換 */
.sp #page .CampaignButton-enabled span.RexButton-message,
.sp #page .CampaignButton-disabled span.RexButton-message,
.sp #page .CampaignButton-applied span.RexButton-message,
.sp #page .CampaignButton-success span.RexButton-message {
  font-size: 24px;
}

/* ↑ 置換ここまで */
/* ===== 本番(c5)との表示差の補正（このページ専用） ===== */
/* 本文の行間は本番と同じ1.5（テーマ側は normal） */
#page .l-content {
  line-height: 1.5;
  font-feature-settings: "palt";
}

/* ヒーロー：ブロックのインラインstyle(背景#f5f5f5・min-height:200px)を打ち消す */
#page .s-campaign-hero .campaign-hero__image {
  background: transparent !important;
  min-height: 0 !important;
}

/* セクション背景は本番どおり透明 */
body #page .l-content .plan__simulator-wrapper:not(#top-section-price),
body #page .l-content #stack-section-reward {
  background: transparent;
}

/* 料金プラン枠：枠全体にグレーの背景を敷く（月額・年額の間や上下に白い帯が出ないようにする） */
body #page .l-content #top-section-price {
  background: #f7f7f7;
}

/* STEP見出し：共通CSSに勝つよう !important（PCは32px/44px、SPは本番のブラウザ既定値 18.72px/28.08px） */
body.pc #page .l-content .multi-step > h3 {
  font-size: 32px !important;
  line-height: 44px !important;
}

body.sp #page .l-content .multi-step > h3 {
  font-size: 18.72px !important;
  line-height: 28.08px !important;
}

/* STEP2：本文はflexで中央寄せ */
body #page .l-content .multi-step .multi-step-content.display-block {
  display: flex;
}

body #page .l-content .multi-step .multi-step-content.display-block > a {
  display: block;
}

/* 「詳細はこちら」リンクは赤・16px */
body #page .l-content #top-section-step a.scroll {
  color: #bf0000 !important;
  font-size: 16px;
  line-height: 24px;
}

/* プラン一覧（STEP1・料金プラン共通）：ボタン・配色を本番にそろえる */
body.pc #page .plan-item p.view-more {
  display: flex !important;
}

body.pc #page .plan-item p.view-more span,
body.sp #page .plan-item .detail-btn span {
  display: block;
}

body.sp #page .plan-item .detail-btn {
  display: flex;
}

body #page .plan-item-txt-group p:not(.plan-label-cardmobile) strong {
  color: red;
}

/* 無料トライアルボタン・注釈 */
body.pc #page .l-content #top-section-step .btn-apply .trial-btn .txt {
  font-size: 20px !important;
  line-height: 26px;
}

body.pc #page .l-content #top-section-step .btn-apply .trial-btn svg {
  width: 17px !important;
  height: 17px !important;
}

body #page .l-content #top-section-step .btn-apply--caption,
body #page .l-content #top-section-step .btn-apply--caption a {
  color: #333;
}

body.pc #page .l-content #top-section-step .btn-apply--caption,
body.pc #page .l-content #top-section-step .btn-apply--caption a {
  font-size: 16px !important;
  line-height: 24px !important;
}

/* サービス概要：機能リストの左右マージンなし・PCのアイコンは32px・「すべての機能を見る」はPCでは非表示、背景は本番色 */
body #page #top-section-introduction .features-list-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.pc #page #top-section-introduction .features-list .item > i,
body.pc #page #top-section-introduction .features-list .item > i img {
  width: 32px;
  height: 32px;
}

.pc #page #top-section-introduction .accordion-switch.is-hidden--pc {
  display: none !important;
}

#page #top-section-introduction .accordion-switch {
  background: #303349;
}

/* 他社比較：本番の余白（上48px） */
body #page .l-content #top-section-competitiveServices {
  padding: 48px 0 0;
}

/* ランク(dark)：本番の背景色・背景文字の濃さ */
body #page .l-content #stack-section-rakutenmusicrank-dark {
  background: #020717;
}

body #page #stack-section-rakutenmusicrank-dark .bg-dark-txt {
  color: rgba(255, 255, 255, 0.05);
}

/* リワード */
body #page #stack-section-reward a.txt-link-red-dark.scroll {
  color: #d80000 !important;
}

body.pc #page #stack-section-reward a.txt-link-red-dark.scroll {
  font-size: 16px !important;
}

/* キャンペーン詳細の余白（SPは0、PCは40px 0 48px） */
.sp #page section.s-campaign-detail {
  padding: 0;
}

.pc #page section.s-campaign-detail {
  padding: 40px 0 48px;
}

.pc #page section.s-campaign-detail h2.heading.heading--m {
  padding-top: 0 !important;
}

/* 固定CTA（テーマ標準）：ボタン色は本番の#d80000（テーマ側は#BF0000固定） */
body #page .floating-cta-button .trial-btn {
  background-color: #d80000 !important;
}

/* 参加方法セクションは本番どおりグレー背景（上の「透明」指定から除外） */
body #page .l-content #top-section-step {
  background: #f7f7f7;
}

/* STEP2：本文はflexで中央寄せ（共通CSSに勝つよう !important） */
body #page .l-content .multi-step .multi-step-content.display-block {
  display: flex !important;
}

body #page .l-content #top-section-step a.scroll {
  font-size: 16px !important;
}

/* 注釈内リンクの色 */
body #page .l-content #top-section-step .btn-apply--caption a {
  color: #006497;
}

body.sp #page .l-content #top-section-step .btn-apply--caption,
body.sp #page .l-content #top-section-step .btn-apply--caption a {
  font-size: 12px !important;
}

body.sp #page .l-content #top-section-step .btn-apply .trial-btn .txt {
  line-height: 24px;
}

body.sp #page .plan-item .detail-btn {
  display: flex !important;
}

/* 料金プラン：本番の余白・文字 */
body #page .l-content #top-section-price {
  padding-top: 48px;
}

/* 月額・年額グループの上の余白は、他ページ（共通の料金ブロック）と同じ標準値に合わせる（上書きしない） */
body #page #top-section-price .plan-yearly-ttl-group .difference {
  font-weight: 900;
}

/* ランク(dark)の背景文字 */
body #page #stack-section-rakutenmusicrank-dark .bg-dark-txt {
  color: rgba(255, 255, 255, 0.05) !important;
}

/* 注釈の色・料金プランの上余白（共通CSSの !important に勝たせる） */
body #page .l-content #top-section-step .btn-apply--caption {
  color: #333 !important;
}

body #page .l-content #top-section-price {
  padding-top: 48px !important;
}

/* 料金プランの小見出しは左揃え */
body #page #top-section-price .plan-group h3,
body #page #top-section-price .plan-group h3 .cap {
  text-align: start;
}

/* 料金プラン：月額プランの上の余白を詰める（枠の上端から月額プランまで 80px → 48px） */
body #page #top-section-price .plan-monthly-group {
  padding-top: 0;
}

/* 「開催中のお得なキャンペーン」の上の余白を半分に（PC：表の下端から見出しの文字まで 128px → 64px） */
.pc #page section.s-campaign-list {
  padding-top: 16px;
}

.pc #page section.s-campaign-list h2.heading.heading--m {
  padding-top: 0 !important;
}