/* ===== reward/css/style.css（元のページCSS） を統合 ===== */
.slick-arrow {
  z-index: 1;
}
.slick-arrow::before {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/assets/pages/top/img/20230901/icon_circle_arrow_right_l.svg) no-repeat center/cover;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0);
}

.slick-next::before {
  right: 40px;
}

.slick-prev::before {
  transform: translateY(-50%) rotate(180deg);
  left: 40px;
}

#page figure.temporary-banner-bundle {
  padding: 24px;
}
#page #stack-section-reward {
  background: #FAFBE2;
}
#page #stack-section-reward .reward-mission-list > li {
  background: #FFF;
}
#page #stack-section-reward .reward-mission-list > li .reward-mission-list-main p.reward-points {
  color: #D80000;
}
#page #stack-section-reward .reward-mission-list > li .reward-mission-list-main i {
  opacity: 0;
}
#page #section-howtouse {
  display: block;
  padding: 48px 0 0;
}
#page #section-howtouse .howtouse-steps {
  margin-top: 32px;
}
#page #section-howtouse .howtouse-steps .slick-slide {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#page #section-howtouse .howtouse-steps .slick-slide .howtouse-img {
  width: 158px;
}
#page #section-howtouse .howtouse-steps .slick-slide p.howtouse-txt {
  width: 230px;
  color: #000;
  text-align: center;
  /* JP Body Medium 14px/Regular */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}
/* PRICE：plan/cardmobile 等に合わせる。共通ブロック(section-price)の見出し
   「PRICE / ライフスタイルに合わせて選べる豊富なプラン」はこのページでは不要 */
#page #stack-section-price .bg-light-txt,
#page #stack-section-price > .ttl-group {
  display: none;
}
#page #stack-section-price {
  padding-top: 32px !important;
}
#page #stack-section-price .plan-monthly-group {
  padding-top: 0 !important;
}

/* デバイス切り替え(pc): 元 @media screen and (min-width: 768px) */
.pc .slick-next::before {
  right: 0;
}
.pc .slick-prev::before {
  left: 0;
}
.pc #page .s-campaign-hero {
  background: url(/assets/pages/reward/img/bg.png) no-repeat center top/auto 100% #F6E7E3;
}
.pc #page #section-howtouse .howtouse-steps {
  width: 780px;
  margin: 32px auto 0;
}
.pc #page #section-howtouse .howtouse-steps .slick-slide .howtouse-img img {
  width: 158px;
}
/*# sourceMappingURL=style.css.map */

/* ===== reward/css/howtouse-carousel.css を統合 ===== */
/* ブロックラッパー（WordPress が付与する div）でレイアウトが崩れないようにする */
.wp-block-rakutenmusic-reward-section-howtouse,
#page .l-content .wp-block-rakutenmusic-reward-section-howtouse {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* セクション内は縦並び（タイトル → カルーセル） */
#section-howtouse.bg-light,
.wp-block-rakutenmusic-reward-section-howtouse #section-howtouse,
#page .l-content #section-howtouse.bg-light {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
  box-sizing: border-box;
}

/* HOW TO USE カルーセル（PC: 3列 / SP: 1列・横並びを強制）※ #page .l-content でテーマより優先 */
#section-howtouse .howtouse-carousel,
body.has-reward-blocks #section-howtouse .howtouse-carousel,
.howtouse-carousel[data-howtouse-carousel],
#page .l-content .wp-block-rakutenmusic-reward-section-howtouse .howtouse-carousel,
#page .l-content #section-howtouse .howtouse-carousel {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 780px;
  margin: 32px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}

#section-howtouse .howtouse-carousel-viewport,
body.has-reward-blocks #section-howtouse .howtouse-carousel-viewport,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-viewport,
#page .l-content .wp-block-rakutenmusic-reward-section-howtouse .howtouse-carousel-viewport,
#page .l-content #section-howtouse .howtouse-carousel-viewport {
  overflow: hidden !important;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

#section-howtouse .howtouse-carousel-track,
body.has-reward-blocks #section-howtouse .howtouse-carousel-track,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-track,
#page .l-content .wp-block-rakutenmusic-reward-section-howtouse .howtouse-carousel-track,
#page .l-content #section-howtouse .howtouse-carousel-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  transition: transform 0.35s ease-out;
  will-change: transform;
  width: 200%;
  height: 100%;
}

/* PC: 3列（1スライド = トラックの 1/6） */
#section-howtouse .howtouse-carousel-slide,
body.has-reward-blocks #section-howtouse .howtouse-carousel-slide,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-slide,
#page .l-content .wp-block-rakutenmusic-reward-section-howtouse .howtouse-carousel-slide,
#page .l-content #section-howtouse .howtouse-carousel-slide {
  flex: 0 0 16.666% !important;
  width: 16.666% !important;
  max-width: none !important;
  padding: 0 8px;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 16px;
}

/* スライド位置（JS で --howtouse-index を 0〜5 に更新） */
#section-howtouse .howtouse-carousel-track,
body.has-reward-blocks #section-howtouse .howtouse-carousel-track,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-track {
  transform: translateX(calc(-1 * var(--howtouse-index, 0) * 16.666%));
}

#section-howtouse .howtouse-carousel-slide .howtouse-img,
body.has-reward-blocks #section-howtouse .howtouse-carousel-slide .howtouse-img,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-slide .howtouse-img {
  width: 158px;
  flex-shrink: 0;
}

#section-howtouse .howtouse-carousel-slide .howtouse-img img,
body.has-reward-blocks #section-howtouse .howtouse-carousel-slide .howtouse-img img,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-slide .howtouse-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

#section-howtouse .howtouse-carousel-slide .howtouse-txt,
body.has-reward-blocks #section-howtouse .howtouse-carousel-slide .howtouse-txt,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-slide .howtouse-txt {
  width: 230px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  box-sizing: border-box;
}

/* 左右ボタン */
#section-howtouse .howtouse-carousel-btn,
body.has-reward-blocks #section-howtouse .howtouse-carousel-btn,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #bf0000;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

#section-howtouse .howtouse-carousel-btn:hover,
body.has-reward-blocks #section-howtouse .howtouse-carousel-btn:hover,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-btn:hover {
  opacity: 0.9;
}

#section-howtouse .howtouse-carousel-btn:disabled,
body.has-reward-blocks #section-howtouse .howtouse-carousel-btn:disabled,
.howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* SP: 1列表示 */
/* デバイス切り替え(sp): 元 @media screen and (max-width: 767px) */
.sp #section-howtouse .howtouse-carousel,
body.sp.has-reward-blocks #section-howtouse .howtouse-carousel,
.sp .howtouse-carousel[data-howtouse-carousel] {
  padding: 0 12px;
  gap: 8px;
}
.sp #section-howtouse .howtouse-carousel-track,
body.sp.has-reward-blocks #section-howtouse .howtouse-carousel-track,
.sp .howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-track {
  width: 600%;
}
.sp #section-howtouse .howtouse-carousel-slide,
body.sp.has-reward-blocks #section-howtouse .howtouse-carousel-slide,
.sp .howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-slide {
  flex: 0 0 16.666% !important;
  width: 16.666% !important;
}
.sp #section-howtouse .howtouse-carousel-btn,
body.sp.has-reward-blocks #section-howtouse .howtouse-carousel-btn,
.sp .howtouse-carousel[data-howtouse-carousel] .howtouse-carousel-btn {
  width: 32px;
  height: 32px;
  font-size: 20px;
}


/* ===== campaign/common/css/temporary-banner-bundle.css を統合 ===== */
#page figure.temporary-banner-bundle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
#page figure.temporary-banner-bundle a img {
  transition: all 0.2s ease-in;
}
#page figure.temporary-banner-bundle a:hover img {
  opacity: 0.8;
}
#page figure.temporary-banner-bundle p {
  text-align: center;
  padding: 8px;
}

/* デバイス切り替え(sp): 元 @media (max-width: 767px) */
.sp #page figure.temporary-banner-bundle p {
  font-size: 14px;
}


/* ===== 本番(c5)との表示差の補正（このページ専用） ===== */
/* ヒーロー：ブロックのインラインstyle(背景#f5f5f5・min-height:200px)を打ち消す */
#page .s-campaign-hero .campaign-hero__image {
  background: transparent !important;
  min-height: 0 !important;
}

/* REWARD：ポイント獲得方法リンクは赤・16px、注釈は中央揃え */
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;
}


/* INTRODUCTION：機能リストの左右マージンなし・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;
}

/* ---- HOW TO USE：SPは1枚表示（共通CSSの幅指定がメディアクエリに勝つため .sp で上書き） ---- */
body.sp #page .l-content #section-howtouse .howtouse-carousel-track,
body.sp #page #section-howtouse .howtouse-carousel-track {
  width: 600% !important;
}

body.sp #page #section-howtouse .howtouse-carousel[data-howtouse-carousel] {
  padding: 0 12px;
  gap: 8px;
}

/* ---- HOW TO USE：矢印は赤い細枠の丸＋細いシェブロン。端まで進んだ側は半透明で押せない ---- */
body #page #section-howtouse .howtouse-carousel-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid #d80000;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

body.sp #page #section-howtouse .howtouse-carousel-btn {
  width: 40px;
  height: 40px;
}

body #page #section-howtouse .howtouse-carousel-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid #d80000;
  border-right: 1.5px solid #d80000;
}

body #page #section-howtouse .howtouse-carousel-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

body #page #section-howtouse .howtouse-carousel-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

body #page #section-howtouse .howtouse-carousel-btn:hover {
  opacity: 1;
}

body #page #section-howtouse .howtouse-carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* HOW TO USE：説明文は左揃え */
body #page #section-howtouse .howtouse-carousel-slide .howtouse-txt {
  text-align: left;
}

/* HOW TO USE カルーセルの余白 */
body #page #section-howtouse .howtouse-carousel[data-howtouse-carousel] {
  margin: 32px auto 40px;
}

/* HOW TO USE カルーセルの上余白（SP）：見出しとの間は32px（従来の64pxの半分。上マージンを0にして、セクションのgap 32pxだけにする） */
body.sp #page #section-howtouse .howtouse-carousel[data-howtouse-carousel] {
  margin-top: 0;
}