/* ==========================================================
   inCruises専用ページ｜Membershipの仕組み ②
   Reward Points（RP）とは？（スマートフォン専用）
   完成見本: 実装パック reference/01_original_reward_points.png
   実装パック 03_reward-points-section.css をそのまま採用し、
   末尾に完成見本の比率へ合わせる調整ブロックのみ追加
   （グローバルCSS・PC版1600pxは変更しない）
   ========================================================== */

.rp-guide-mobile {
  --rp-gold: #d99a25;
  --rp-gold-soft: #e9b85d;
  --rp-brown: #382119;
  --rp-charcoal: #493c36;
  --rp-aqua: #eaf8f8;
  --rp-border: #e7ad52;

  display: none;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  background: #fff;
  color: var(--rp-brown);
  overflow: hidden;
}

@media (max-width: 768px) {
  .rp-guide-mobile {
    display: block;
  }
}

.rp-guide-mobile,
.rp-guide-mobile * {
  box-sizing: border-box;
}

.rp-guide-hero {
  position: relative;
  min-height: 515px;
  overflow: hidden;
  background: #fff;
}

.rp-guide-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.rp-guide-hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 34px 28px 0;
  text-align: center;
}

.rp-guide-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 22px;
  color: #9b681e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(15px, 4vw, 20px);
  letter-spacing: .02em;
  white-space: nowrap;
}

.rp-kicker-line {
  width: 68px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rp-gold), transparent);
}

.rp-guide-hero h2 {
  margin: 0;
  color: #2d1c18;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(34px, 9.2vw, 58px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: .005em;
}

.rp-title-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 160px;
  margin: 20px auto 14px;
  color: var(--rp-gold);
}

.rp-title-ornament span {
  flex: 1;
  height: 1px;
  background: var(--rp-gold-soft);
}
.rp-title-ornament b {
  font-size: 12px;
  font-weight: 400;
}

.rp-guide-lead {
  margin: 0;
  color: #37211b;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(19px, 5vw, 27px);
  line-height: 1.55;
  letter-spacing: .03em;
  font-weight: 500;
}

.rp-guide-features {
  position: relative;
  z-index: 3;
  margin-top: -6px;
  padding: 0 56px 34px;
  background: #fff;
}

.rp-feature-card {
  display: grid;
  grid-template-columns: 74px 118px minmax(0,1fr);
  align-items: center;
  min-height: 164px;
  margin-bottom: 16px;
  padding: 16px 20px 16px 16px;
  border: 1.5px solid var(--rp-border);
  border-radius: 15px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 8px rgba(112,84,43,.04);
}

.rp-feature-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, #efc95e 0 16%, #dda51f 42%, #c8870a 78%, #ad6a00 100%);
  border: 2px solid #e6ad28;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.18),
    0 2px 4px rgba(120,77,0,.10);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1;
}

.rp-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-feature-icon img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.rp-feature-copy {
  min-width: 0;
  padding-left: 8px;
}

.rp-feature-copy h3 {
  margin: 0 0 9px;
  color: #382119;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(21px, 5.3vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .01em;
}

.rp-feature-copy p {
  margin: 0;
  color: #493c36;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(16px, 4.1vw, 21px);
  line-height: 1.55;
  letter-spacing: .01em;
}

.rp-guide-notice {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  align-items: center;
  min-height: 105px;
  padding: 13px 24px 13px 15px;
  border: 1.5px solid var(--rp-border);
  border-radius: 12px;
  background: linear-gradient(90deg, #fffaf1 0%, #fff 38%, #f5fbfc 100%);
}

.rp-guide-notice::before,
.rp-guide-notice::after {
  content: "❧";
  position: absolute;
  top: 8px;
  color: #d4a24a;
  font-size: 21px;
}
.rp-guide-notice::before { left: 9px; }
.rp-guide-notice::after { right: 9px; transform: scaleX(-1); }

.rp-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dda72f, #c88205);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
}

.rp-guide-notice p {
  margin: 0;
  color: #51443e;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(16px, 4vw, 20px);
  line-height: 1.55;
}

/* 430px and below: preserve the same 3-column card composition. */
@media (max-width: 430px) {
  .rp-guide-hero {
    min-height: 390px;
  }

  .rp-guide-hero-copy {
    padding: 25px 16px 0;
  }

  .rp-guide-kicker {
    gap: 9px;
    margin-bottom: 16px;
    font-size: 13px;
  }

  .rp-kicker-line {
    width: 38px;
  }

  .rp-guide-hero h2 {
    font-size: clamp(30px, 8.8vw, 38px);
  }

  .rp-title-ornament {
    width: 118px;
    margin: 14px auto 10px;
  }

  .rp-guide-lead {
    font-size: 17px;
    line-height: 1.45;
  }

  .rp-guide-features {
    padding: 0 18px 24px;
  }

  .rp-feature-card {
    grid-template-columns: 54px 82px minmax(0,1fr);
    min-height: 126px;
    margin-bottom: 11px;
    padding: 11px 10px 11px 9px;
    border-radius: 11px;
  }

  .rp-feature-number {
    width: 46px;
    height: 46px;
    font-size: 27px;
  }

  .rp-feature-icon img {
    width: 78px;
    height: 78px;
  }

  .rp-feature-copy {
    padding-left: 4px;
  }

  .rp-feature-copy h3 {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.28;
  }

  .rp-feature-copy p {
    font-size: 13.5px;
    line-height: 1.42;
  }

  .rp-guide-notice {
    grid-template-columns: 55px minmax(0,1fr);
    min-height: 84px;
    padding: 10px 13px 10px 8px;
  }

  .rp-notice-icon {
    width: 43px;
    height: 43px;
    font-size: 28px;
  }

  .rp-guide-notice p {
    font-size: 13.5px;
    line-height: 1.45;
  }
}

/* ==========================================================
   完成見本（reference/01_original_reward_points.png）への比率調整
   見本は幅941px。各寸法をモジュール幅（=100vw）比で再現する。
   構成・文言・画像・順序は実装パックのまま。
   ========================================================== */
@media (max-width:768px){
  .rp-guide-mobile{ max-width: none; }

  /* ---- ヒーロー ---- */
  /* 「Membershipの仕組み ②」はユーザー指示により非表示（マークアップは残す） */
  .rp-guide-kicker{ display:none; }

  /* 背景の上半分（余白帯）を切り、デッキチェアの写真の上にタイトルを載せる */
  .rp-guide-hero{ min-height: calc(100vw * .445); }
  .rp-guide-hero-bg{ object-position: center center; }
  .rp-guide-hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,
      rgba(255,255,255,.72) 0%, rgba(255,255,255,.58) 42%,
      rgba(255,255,255,.22) 74%, rgba(255,255,255,0) 100%);
  }
  .rp-guide-hero-copy{ padding: calc(100vw * .062) calc(100vw * .030) calc(100vw * .030); }

  .rp-guide-kicker{
    gap: calc(100vw * .020);
    margin: 0 auto calc(100vw * .026);
    font-size: calc(100vw * .0325);
  }
  .rp-kicker-line{ width: calc(100vw * .0723); }

  .rp-guide-hero h2{
    font-size: calc(100vw * .0625);
    line-height: 1.1;
    white-space: nowrap;
  }

  .rp-title-ornament{
    width: calc(100vw * .168);
    margin: calc(100vw * .017) auto calc(100vw * .014);
  }
  .rp-title-ornament b{ font-size: calc(100vw * .0135); }

  .rp-guide-lead{
    font-size: calc(100vw * .0305);
    line-height: 1.55;
    letter-spacing: .01em;
    white-space: normal;   /* 2行書きにするため折り返し禁止を解除 */
  }

  /* ---- 5つの特徴 ---- */
  .rp-guide-features{
    margin-top: 0;
    padding: calc(100vw * .0234) calc(100vw * .0256) calc(100vw * .0361);
  }

  /* 見出し20px／本文17px に拡大。番号とアイコンを小さくして文章の幅を確保する */
  .rp-feature-card{
    grid-template-columns: calc(100vw * .060) calc(100vw * .080) minmax(0,1fr);
    min-height: 0;
    margin-bottom: calc(100vw * .0190);
    padding: calc(100vw * .026) calc(100vw * .022) calc(100vw * .026) calc(100vw * .018);
    border-width: 1px;
    border-radius: calc(100vw * .0170);
    align-items: start;
  }

  .rp-feature-number{
    margin-top: calc(100vw * .004);
    width: calc(100vw * .052);
    height: calc(100vw * .052);
    border-width: 1px;
    box-shadow: inset 0 0 0 calc(100vw * .0035) rgba(255,255,255,.20), 0 1px 3px rgba(120,77,0,.10);
    font-size: calc(100vw * .0310);
  }

  .rp-feature-icon{ justify-content: flex-start; align-items: flex-start; }
  .rp-feature-icon img{
    margin-top: calc(100vw * .0005);
    width: calc(100vw * .074);
    height: calc(100vw * .074);
  }

  .rp-feature-copy{ padding-left: 0; }
  .rp-feature-copy h3{
    margin: 0 0 calc(100vw * .012);
    font-size: calc(100vw * .0513);      /* 20px */
    line-height: 1.3;
    letter-spacing: -.045em;
    white-space: nowrap;   /* 見出しは1行に固定する */
  }
  .rp-feature-copy p{
    font-size: calc(100vw * .0436);      /* 17px */
    line-height: 1.6;
    letter-spacing: -.010em;
    white-space: normal;
  }
  .rp-feature-copy p br{ display: none; }   /* 幅が変わったので改行位置は自然送りに任せる */

  /* ---- 下部案内 ---- */
  .rp-guide-notice{
    grid-template-columns: calc(100vw * .1148) minmax(0,1fr);
    min-height: calc(100vw * .1084);
    margin-top: calc(100vw * .0276);
    padding: calc(100vw * .010) calc(100vw * .0300) calc(100vw * .010) calc(100vw * .0223);
    border-width: 1px;
    border-radius: calc(100vw * .0140);
  }
  .rp-guide-notice::before,
  .rp-guide-notice::after{
    top: calc(100vw * .009);
    font-size: calc(100vw * .0223);
  }
  .rp-guide-notice::before{ left: calc(100vw * .0096); }
  .rp-guide-notice::after{ right: calc(100vw * .0096); }

  .rp-notice-icon{
    width: calc(100vw * .083);
    height: calc(100vw * .083);
    margin-left: 0;
    font-size: calc(100vw * .0480);
  }
  .rp-guide-notice p{
    font-size: calc(100vw * .0359);      /* 14px */
    line-height: 1.6;
    white-space: normal;
  }
  .rp-guide-notice p br{ display: none; }
}