/* =========================================================
   inCruises専用ページ｜会費プラン＆メンバーシップ登録（スマートフォン専用）
   完成見本: 実装パック reference/membership_plan_reference.png
   実装パック membership-plan.css / membership-plan.html を基に、
   .fs-sp 配下へスコープして移植（グローバルCSS・PC版1600pxは変更しない）
   ========================================================= */

/* 769px以上では一切表示しない（PC版は既存キャンバスのまま） */
.fs-sp{display:none}

@media (max-width:768px){
  #incruises-fee-safety .fs-viewport{display:none}
  .fs-sp{display:block}
  .fs-sp-fig{margin:0 0 4px}
  .fs-sp-fig img{display:block;width:100%;height:auto}
}

/* =========================================================
   会費プラン＆メンバーシップ登録
   完成見本: reference/membership_plan_reference.png
   重要: このCSSは専用クラス内のみ。グローバルCSSを変更しない。
   ========================================================= */
.fs-sp .membership-plan-module{
  --starter: #139da8;
  --classic: #0a3f8d;
  --premium: #b56b00;
  --partner: #102f68;
  --gold: #d89a31;
  --brown: #352014;
  --ink: #2a211c;
  --line: rgba(216,154,49,.72);
  width: min(100%, 768px);
  margin: 0 auto;
  padding: 18px 14px 24px;
  box-sizing: border-box;
  background: #fff;
  color: var(--ink);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.fs-sp .membership-plan-module *{ box-sizing: border-box; }
.fs-sp .membership-plan-heading{
  text-align: center;
  margin-bottom: 18px;
}
.fs-sp .membership-plan-ornament{
  display: block;
  width: 170px;
  max-width: 44%;
  margin: 0 auto 4px;
  height: auto;
}
.fs-sp .membership-plan-heading h2{
  margin: 0;
  color: var(--brown);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: min(5.7vw, 42px);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: .01em;
}
.fs-sp .membership-plan-heading p{
  position: relative;
  display: inline-block;
  margin: 12px 0 0;
  padding: 0 54px;
  color: #2e2925;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(17px, 4.6vw, 24px);
  line-height: 1.4;
}
.fs-sp .membership-plan-heading p::before, .fs-sp .membership-plan-heading p::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  background: var(--gold);
}
.fs-sp .membership-plan-heading p::before{ left: 0; }
.fs-sp .membership-plan-heading p::after{ right: 0; }
.fs-sp .membership-plan-card{
  display: grid;
  grid-template-columns: 37% 63%;
  width: 100%;
  min-height: 292px;
  margin: 0 0 18px;
  height: 316px;
  overflow: hidden;
  border: 1.5px solid;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 13px rgba(80, 62, 43, .10);
}
.fs-sp .membership-plan-card.starter{ border-color: rgba(19,157,168,.85); }
.fs-sp .membership-plan-card.classic{ border-color: rgba(10,63,141,.70); }
.fs-sp .membership-plan-card.premium{ border-color: rgba(197,122,16,.78); }
.fs-sp .plan-visual{
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fs-sp .plan-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* エンブレム／パートナーのロゴを全体に10%縮小 */
  transform: scale(.9);
  transform-origin: center center;
}
.fs-sp .plan-content{
  min-width: 0;
  padding: 20px 18px 17px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-sp .plan-content h3{
  margin: 0;
  font-family: Georgia, "Times New Roman", "Yu Mincho", serif;
  font-size: clamp(34px, 8.2vw, 54px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
}
.fs-sp .starter .plan-content h3, .fs-sp .starter .plan-description{ color: var(--starter); }
.fs-sp .classic .plan-content h3, .fs-sp .classic .plan-description, .fs-sp .classic strong{ color: var(--classic); }
.fs-sp .premium .plan-content h3, .fs-sp .premium strong{ color: var(--premium); }
.fs-sp .plan-description{
  margin: 9px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(16px, 4.1vw, 22px);
  line-height: 1.35;
  color: #493023;
  text-wrap: balance;
}
.fs-sp .gold-divider{
  position: relative;
  height: 14px;
  margin: 7px 0 4px;
}
.fs-sp .gold-divider::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--line);
}
.fs-sp .gold-divider::after{
  content: "◆";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  padding: 0 8px;
  color: var(--gold);
  background: #fff;
  font-size: 10px;
}
.fs-sp .plan-data-row{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: 8px;
  align-items: center;
  min-height: 58px;
  margin-top: 7px;
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.fs-sp .starter .plan-data-row{ border-color: rgba(19,157,168,.60); }
.fs-sp .classic .plan-data-row{ border-color: rgba(10,63,141,.38); }
.fs-sp .premium .plan-data-row{ border-color: rgba(197,122,16,.46); }
.fs-sp .plan-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 3px 10px;
  border-radius: 18px;
  background: rgba(224,238,235,.95);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(13px, 2.9vw, 19px);
  white-space: nowrap;
}
.fs-sp .classic .plan-label{ background: #e3edf9; }
.fs-sp .premium .plan-label{ background: #f8edcf; }
.fs-sp .plan-data-row strong{
  justify-self: center;
  color: #1e3838;
  font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-size: min(4.8vw, 38px);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}
/* 単位（ドル／RP）は完成見本どおり数字より小さく表示（文言は変更していない） */
.fs-sp .plan-data-row strong .plan-unit{
  font-size: .56em;
  font-weight: 500;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.fs-sp .partner-fee-row strong .plan-unit{
  font-size: .6em;
  font-weight: 500;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.fs-sp .plan-note{
  margin: 2px 0 -1px;
  text-align: center;
  font-size: clamp(11px, 2.8vw, 15px);
  line-height: 1.25;
  color: #344b4b;
}
.fs-sp .partner{
  grid-template-columns: 46% 54%;
  min-height: 224px;
  height: auto;
  border-color: rgba(207,151,64,.75);
  background:
    linear-gradient(120deg, rgba(255,252,245,.95), rgba(255,255,255,.98));
}
.fs-sp .partner .plan-content{
  padding: 18px 22px 17px 6px;
}
.fs-sp .partner .plan-content h3{
  color: var(--partner);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(28px, 6.8vw, 43px);
  font-weight: 700;
  letter-spacing: 0;
}
.fs-sp .partner .plan-description{
  color: #35271f;
  font-size: clamp(15px, 3.8vw, 21px);
}
.fs-sp .partner-fee-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(216,154,49,.38);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 3.6vw, 19px);
}
.fs-sp .partner-fee-row:last-child{ border-bottom: 0; }
.fs-sp .partner-fee-row strong{
  color: #3c2316;
  font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-size: clamp(27px, 6.4vw, 38px);
  font-weight: 500;
  white-space: nowrap;
}

/* 390px付近でも横型カードを維持。 */
@media (max-width: 430px){
.fs-sp .membership-plan-module{ padding-inline: 10px; }
.fs-sp .membership-plan-card{
    grid-template-columns: 35% 65%;
    min-height: 184px;
    height: 224px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
.fs-sp .plan-content{
    padding: 13px 10px 12px 2px;
  }
.fs-sp .plan-content h3{
    font-size: clamp(29px, 8.7vw, 37px);
  }
.fs-sp .plan-description{
    margin-top: 5px;
    font-size: 15px;
  }
.fs-sp .gold-divider{
    height: 10px;
    margin: 4px 0 2px;
  }
.fs-sp .gold-divider::before{ top: 5px; }
.fs-sp .plan-data-row{
    grid-template-columns: auto minmax(0,1fr);
    column-gap: 6px;
    min-height: 43px;
    margin-top: 5px;
    padding: 3px 5px;
    border-radius: 8px;
  }
.fs-sp .plan-label{
    min-height: 27px;
    padding: 2px 4px;
    font-size: 12px;
  }
.fs-sp .plan-data-row strong{
    font-size: min(5vw, 27px);
  }
.fs-sp .plan-note{
    font-size: 10px;
  }
.fs-sp .partner{
    grid-template-columns: 44% 56%;
    min-height: 152px;
    height: auto;
  }
.fs-sp .partner .plan-content{
    padding: 11px 12px 10px 2px;
  }
.fs-sp .partner .plan-content h3{
    font-size: clamp(24px, 6.7vw, 31px);
  }
.fs-sp .partner .plan-description{
    font-size: 13px;
  }
.fs-sp .partner-fee-row{
    gap: 5px;
    padding: 3px 6px;
    font-size: 12px;
  }
.fs-sp .partner-fee-row strong{
    font-size: clamp(22px, 6vw, 28px);
  }
}

/* 実装パック原文の注記:
   今回の修正がスマホ専用なら、このモジュールを max-width:768px の
   既存スマホ領域にのみ組み込むこと。PC版既存セクションは変更しない。
*/

/* 極小幅（344px以下）でも数値が欠けないための保険 */
@media (max-width:344px){
  .fs-sp .plan-data-row strong{ font-size: 4.6vw; }
}

/* 見出し下のサブコピーは560px以下でも1行に収める */
@media (max-width:560px){
  .fs-sp .membership-plan-heading p{
    margin-top: 9px;
    padding: 0 26px;
    font-size: min(4.55vw, 22px);
  }
  .fs-sp .membership-plan-heading p::before,
  .fs-sp .membership-plan-heading p::after{ width: 20px; }
}

/* =========================================================
   完成見本（membership_plan_reference.png）への忠実再現
   ・カード外寸・左右比率・タイトル位置・料金ボックスの高さと余白を
     見本の比率（カード幅比）でそのまま再現する
   ・カード幅 W = 100vw - 24px（モジュール左右padding 12px）
   ========================================================= */
@media (max-width:768px){
  .fs-sp .membership-plan-module{ padding: 14px 12px 20px; }

  /* カード：3枚とも同一外寸（見本 高さ/幅 = 0.423） */
  .fs-sp .membership-plan-card{
    grid-template-columns: 37.2% 62.8%;
    height: calc((100vw - 24px) * .423);
    min-height: 0;
    margin: 0 0 calc((100vw - 24px) * .031);
    border-width: 1px;
    border-radius: calc((100vw - 24px) * .018);
    box-shadow: 0 3px 8px rgba(80,62,43,.09);
  }

  /* カード地色：見本の淡いプラン色に合わせ、エンブレム部分と地続きに見せる */
  .fs-sp .membership-plan-card.starter{ background: #fbfefe; }
  .fs-sp .membership-plan-card.classic{ background: #fcfdfe; }
  .fs-sp .membership-plan-card.premium{ background: #fefdf9; }
  .fs-sp .membership-plan-card.partner{ background: #fdfaf4; }

  /* 右カラム：見本どおり中央ぞろえ、右余白 4.6% */
  .fs-sp .plan-content{
    padding: 0 calc((100vw - 24px) * .046) 0 0;
    justify-content: center;
    text-align: center;
  }

  /* 英字タイトル（見本の字高 5.99% を再現） */
  .fs-sp .plan-content h3{
    font-size: calc((100vw - 24px) * .0866);
    line-height: 1.02;
    letter-spacing: .015em;
  }

  /* 説明文：見本どおり1行 */
  .fs-sp .plan-description{
    margin: calc((100vw - 24px) * .008) 0 0;
    font-size: calc((100vw - 24px) * .0325);
    line-height: 1.3;
    text-wrap: nowrap;
  }

  /* 装飾ライン：細いまま */
  .fs-sp .gold-divider{
    height: calc((100vw - 24px) * .020);
    margin: calc((100vw - 24px) * .006) 0 0;
  }
  .fs-sp .gold-divider::before{ top: 50%; }
  .fs-sp .gold-divider::after{
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0 calc((100vw - 24px) * .010);
    font-size: calc((100vw - 24px) * .0135);
  }

  /* 料金ボックス：横長・角丸・細枠、ラベルは左、金額は右 */
  .fs-sp .plan-data-row{
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: calc((100vw - 24px) * .012);
    min-height: calc((100vw - 24px) * .0818);
    margin-top: calc((100vw - 24px) * .0155);
    padding: calc((100vw - 24px) * .005) calc((100vw - 24px) * .021);
    border-radius: calc((100vw - 24px) * .016);
  }
  .fs-sp .plan-label{
    grid-area: 1 / 1 / 2 / 2;
    align-self: center;
    min-height: calc((100vw - 24px) * .046);
    padding: 0 calc((100vw - 24px) * .013);
    border-radius: 999px;
    font-size: calc((100vw - 24px) * .0305);
  }
  .fs-sp .plan-data-row strong{
    grid-area: 1 / 2 / 2 / 3;
    justify-self: center;
    font-size: calc((100vw - 24px) * .0566);
  }
  /* 注記はボックス内・金額の直下（見本どおり） */
  .fs-sp .plan-data-row .plan-note{
    grid-area: 2 / 1 / 3 / 3;
    margin: calc((100vw - 24px) * .004) 0 0;
    text-align: center;
    font-size: calc((100vw - 24px) * .0265);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* パートナー登録カード */
  .fs-sp .partner{
    grid-template-columns: 42% 58%;
    height: calc((100vw - 24px) * .287);
  }
  .fs-sp .partner .plan-content{
    padding: 0 calc((100vw - 24px) * .026) 0 0;
  }
  .fs-sp .partner .plan-content h3{
    font-size: calc((100vw - 24px) * .0615);
  }
  .fs-sp .partner .plan-description{
    margin-top: calc((100vw - 24px) * .010);
    font-size: calc((100vw - 24px) * .0235);
    text-wrap: wrap;
  }
  .fs-sp .partner-fee-row{
    gap: calc((100vw - 24px) * .012);
    padding: calc((100vw - 24px) * .004) calc((100vw - 24px) * .012);
    font-size: calc((100vw - 24px) * .0295);
  }
  .fs-sp .partner-fee-row strong{
    font-size: calc((100vw - 24px) * .0500);
  }
  /* 見出しブロックも見本の比率に合わせる */
  .fs-sp .membership-plan-heading{ margin-bottom: calc((100vw - 24px) * .050); }
  .fs-sp .membership-plan-ornament{
    width: calc((100vw - 24px) * .312);
    max-width: none;
    margin-bottom: calc((100vw - 24px) * .012);
  }
  .fs-sp .membership-plan-heading h2{
    font-size: calc((100vw - 24px) * .0565);
    line-height: 1.15;
  }
  .fs-sp .membership-plan-heading p{
    margin-top: calc((100vw - 24px) * .026);
    padding: 0 calc((100vw - 24px) * .075);
    font-size: calc((100vw - 24px) * .0369);
  }
  .fs-sp .membership-plan-heading p::before,
  .fs-sp .membership-plan-heading p::after{
    width: calc((100vw - 24px) * .060);
  }
}

/* =========================================================
   金額の縦ラインぞろえ
   ・ラベルは3カードとも同一幅 → 金額エリアの開始位置が全行一致
   ・金額は「左の額｜矢印｜右の額」の3列。矢印を中央に固定し、
     左の額は右ぞろえ、右の額は左ぞろえで縦のラインを合わせる
   ・数字はライニング＋等幅数字（見本と同じ字形・同じ字送り）
   ========================================================= */
.fs-sp .plan-data-row strong{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  width: 100%;
}
.fs-sp .plan-data-row strong .pv-l,
.fs-sp .plan-data-row strong .pv-c,
.fs-sp .plan-data-row strong .pv-r{
  font-style: normal;
  white-space: nowrap;
}
.fs-sp .plan-data-row strong .pv-l{ text-align: right; }
.fs-sp .plan-data-row strong .pv-c{ text-align: center; padding: 0 .34em; }
.fs-sp .plan-data-row strong .pv-r{ text-align: left; }

@media (max-width:768px){
  /* ラベル（支払額／登録時／毎月）は3カードとも同一幅 */
  .fs-sp .plan-label{
    width: calc((100vw - 24px) * .128);
    padding: 0;
    justify-content: center;
  }
  .fs-sp .plan-data-row strong{
    justify-self: stretch;
  }
}

/* 「Membershipの仕組み」の見出しはスマホでは非表示
   （すぐ下の「Membershipの仕組み②」と重複するため。PC版は従来どおり表示） */
@media (max-width:768px){
  .fs-sp .fs-sp-fig.is-intro-title{ display:none; }
}