/* =========================================================================
   「メンバーシップ・フリーが続くと、旅が続けやすくなります」
   2026-09-09  完成見本（1672×941・写真なし版）をもとに実装

   ・設計幅1672px。--u が設計上の1px
   ・文字はすべてHTMLテキスト
   ・囲み枠・金の罫・アーチはCSSで描画
   ・画像は手書き英字1点・右上の飾り1点・波飾り2点・船マーク1点だけ
   ・セレクタはすべて #mf-appeal の配下に限定
   ========================================================================= */
/* 2026-09-09 ご指示（B案）：前後のセクションが画面いっぱいに広がるのに対し、
   この画面だけ幅1600pxで止まっていて一回り小さく見えていた。
   幅の上限を1600px→1920pxに広げ、設計単位 --u の頭打ちも同じ比率（1.2倍）に上げた。
   設計図をそのまま拡大するだけなので、配置の比率は変わらない。
   例：1900pxの画面で 本文20px→23.8px、中見出し32px→38px。
   元に戻すときは 1920px→1600px、--u の頭打ちを 1.2px→1px（②③は1.1483→0.9569）に戻す。 */

#mf-appeal{
  container-type:inline-size;
  --u:min(0.9569px, 0.0598cqw);
  --gold:#c9922e; --gold-l:#dcb267; --red:#f02d0a;
  width:100%; max-width:1600px; margin-inline:auto;
  background:#fffdf8; color:#2b2018;
  /* 2026-09-09 ご指摘：この3画面だけ線が細く見えていた。
     原因は、Windowsの「游明朝」が先頭に来ていたこと。游明朝は線がとても細い。
     このサイトは Google Fonts の Noto Serif JP（500〜800）をすでに読み込んでいるので、
     そちらを先頭にして、本文の太さも 400→500 に上げる。
     他のセクションの見出しも Noto Serif JP なので、字面もそろう。 */
  font-family:"Noto Serif JP","Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN","BIZ UDPMincho",serif;
  /* 2026-09-09 ご指示により 500 → 600（Google Fontsで読み込み済みの太さ）。
     見出しは個別に700を指定しているので影響しない。 */
  font-weight:600;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow:hidden;
}
#mf-appeal *{ box-sizing:border-box; }
#mf-appeal p, #mf-appeal h3{ margin:0; }
#mf-appeal img{ display:block; }
/* 2026-09-09 並べ替えにあたり、ゆとりをとるため高さを941→1010にした（幅1672は据え置き） */
#mf-appeal .mfa-stage{ position:relative; width:100%; aspect-ratio:1672 / 1010; overflow:hidden; background:#fffdf8; }

/* 飾り */
#mf-appeal .mfa-script{ position:absolute; left:calc(10 * var(--u)); top:calc(70 * var(--u)); width:calc(340 * var(--u)); z-index:1; }
#mf-appeal .mfa-tr{ position:absolute; left:calc(1320 * var(--u)); top:calc(25 * var(--u)); width:calc(352 * var(--u)); z-index:1; }
#mf-appeal .mfa-wl{ position:absolute; left:0; top:calc(600 * var(--u)); width:calc(240 * var(--u)); z-index:0; }
#mf-appeal .mfa-wr{ position:absolute; left:calc(1435 * var(--u)); top:calc(600 * var(--u)); width:calc(237 * var(--u)); z-index:0; }
#mf-appeal .mfa-ship{ position:absolute; left:calc(778 * var(--u)); top:calc(838 * var(--u)); width:calc(118 * var(--u)); z-index:2; }

/* 小見出しと左右の罫 */
#mf-appeal .mfa-eyebrow{
  position:absolute; left:0; top:calc(44 * var(--u)); width:100%; text-align:center; z-index:2;
  font-size:calc(30 * var(--u)); line-height:1.2; letter-spacing:.05em; color:#3b2c1e; white-space:nowrap;
}
#mf-appeal .mfa-eyebrow::before, #mf-appeal .mfa-eyebrow::after{
  content:""; position:absolute; top:calc(19 * var(--u));
  width:calc(150 * var(--u)); border-top:calc(1.5 * var(--u)) solid var(--gold-l);
}
#mf-appeal .mfa-eyebrow::before{ left:calc(430 * var(--u)); }
#mf-appeal .mfa-eyebrow::after{ right:calc(430 * var(--u)); }

/* 大見出し */
#mf-appeal .mfa-title{
  position:absolute; left:0; top:calc(70 * var(--u)); width:100%; text-align:center; z-index:2;
  /* 2026-09-09 ご指示により 32px（中見出し）。1672px基準なので 32×1672/1600＝33.4 */
  font-size:calc(33.4 * var(--u)); line-height:1.45; font-weight:700; letter-spacing:.01em; color:#241a12;
  white-space:nowrap;
}
#mf-appeal .mfa-arc{
  position:absolute; left:calc(500 * var(--u)); top:calc(178 * var(--u));
  width:calc(672 * var(--u)); height:calc(30 * var(--u)); z-index:2;
  border-bottom:calc(1.5 * var(--u)) solid var(--gold-l); border-radius:50%;
}

/* =========================================================================
   金の囲み → 「うれしさが伝わる」見せ場に作り直し（2026-09-09・ご指示の例外対応）
   ・位置を本文の下へ（top 305 → 570）
   ・シャンパンゴールドの帯に、内側の細罫を重ねた二重枠
   ・数字の後ろにやわらかい光、数字の下にゴールドの下線
   ・左右に小さな金のひし形。ふちに淡い影
   ・色は白／アイボリー／シャンパンゴールド／inCruisesオレンジの範囲内
   ・文章・数値は一字も変えていない
   ========================================================================= */
#mf-appeal .mfa-box{
  /* 2026-09-09 数字を小さくしたので、枠も本文の幅に近づけて締めた（1420→1100・高さ200→176） */
  position:absolute; left:calc(286 * var(--u)); top:calc(584 * var(--u));
  width:calc(1100 * var(--u)); height:calc(176 * var(--u)); z-index:2;
  border:calc(2 * var(--u)) solid #e0b45f; border-radius:calc(22 * var(--u));
  background:
    radial-gradient(ellipse calc(430 * var(--u)) calc(115 * var(--u)) at 50% 52%, rgba(232,115,15,0.08) 0%, rgba(232,115,15,0) 70%),
    linear-gradient(180deg,#fffefa 0%,#fff8ea 60%,#fdf2dc 100%);
  box-shadow:0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(190,140,50,.16);
  display:flex; align-items:center; justify-content:center;
  color:#3a2a18;
  font-size:calc(34 * var(--u)); line-height:1.15; font-weight:700; letter-spacing:-.035em;
  white-space:nowrap;
}
/* 内側の細い罫（二重枠） */
#mf-appeal .mfa-box::before{
  content:""; position:absolute; inset:calc(9 * var(--u));
  border:calc(1 * var(--u)) solid rgba(201,146,46,.55); border-radius:calc(15 * var(--u));
  pointer-events:none;
}
/* 左右の小さな金のひし形（回転を使うと影の位置がずれるので、SVGを背景に置く） */
#mf-appeal .mfa-box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 L16 8 L8 16 L0 8 Z' fill='%23d8a84a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 L16 8 L8 16 L0 8 Z' fill='%23d8a84a'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-size:calc(11 * var(--u)) calc(11 * var(--u)), calc(11 * var(--u)) calc(11 * var(--u));
  background-position:left calc(26 * var(--u)) center, right calc(26 * var(--u)) center;
}
/* 大きい数字：inCruisesオレンジ＋下にゴールドの帯 */
/* 2026-09-09 「$0」「RP200」は101px（見出しの3.2倍）だと広告色が強く出るため、
   ご指示により75px（見出しの2.3倍）にした。あわせて数字の下のゴールドの帯（マーカー）を外し、
   後ろの光も弱めている。強調の手段を重ねすぎないための調整。 */
#mf-appeal .mfa-box .em{
  font-size:calc(78 * var(--u)); color:#e8730f; letter-spacing:-.03em;
  padding:0 calc(4 * var(--u));
  text-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(232,115,15,.20);
}
#mf-appeal .mfa-box .sm{ font-size:calc(26 * var(--u)); color:#8a6a37; letter-spacing:-.02em; }

/* 本文3ブロック */
#mf-appeal .mfa-body{
  position:absolute; left:0; width:100%; text-align:center; z-index:2;
  /* 2026-09-09 ご指示により 20px。1672px基準なので 20×1672/1600＝20.9 */
  font-size:calc(20.9 * var(--u)); line-height:1.75; color:#2b2018; white-space:nowrap;
}
/* 2026-09-09 ご指示により「月会費$0で…」の囲みを本文の下へ移した。本文を上へ繰り上げる */
#mf-appeal .mfa-b1{ top:calc(238 * var(--u)); }
#mf-appeal .mfa-b2{ top:calc(343 * var(--u)); }
#mf-appeal .mfa-b3{ top:calc(448 * var(--u)); }

/* 下の金の罫（船マークの左右） */
#mf-appeal .mfa-rule{
  position:absolute; top:calc(862 * var(--u)); z-index:1;
  border-top:calc(1.5 * var(--u)) solid var(--gold-l);
}
#mf-appeal .mfa-rule-l{ left:calc(400 * var(--u)); width:calc(370 * var(--u)); }
#mf-appeal .mfa-rule-r{ right:calc(400 * var(--u)); width:calc(370 * var(--u)); }

#mf-appeal .mfa-close{
  position:absolute; left:0; top:calc(888 * var(--u)); width:100%; text-align:center; z-index:2;
  /* 2026-09-09 ご指示により小さくした。見出し32pxより一段下の「小見出し24px」にそろえる。
     1672px基準なので 24×1672/1600＝25.1 */
  font-size:calc(25.1 * var(--u)); line-height:1.3; font-weight:700; letter-spacing:.02em;
  color:#241a12; white-space:nowrap;
}
#mf-appeal .mfa-note{
  position:absolute; left:0; top:calc(948 * var(--u)); width:100%; text-align:center; z-index:2;
  font-size:calc(18 * var(--u)); line-height:1.5; color:#6b5a4f; white-space:nowrap;
}
#mf-appeal .mfa-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
@media (max-width:768px){ #mf-appeal{ display:none; } }

/* =========================================================================
   2026-09-09 ご指示による非表示（HTMLは残してあります。下の行を消せば戻ります）
   ・上の「CLASSIC会員にとっての大きな魅力」と、その左右の金の罫を削除
   ・左の金の手書き英字「A Richer Life at Sea」を削除
   ・右上の金の飾りと「旅がつなぐ もっと豊かな これからを」を削除
   ・大見出し「メンバーシップ・フリーが続くと、旅が続けやすくなります」は
     ご指示どおり中見出し32px（1672px基準なので 33.4）。すでにその値です。
   ========================================================================= */
#mf-appeal .mfa-eyebrow{ display:none !important; }
#mf-appeal .mfa-script{ display:none !important; }
#mf-appeal .mfa-tr{ display:none !important; }


/* =========================================================================
   2026-09-10 追加：古いiPad／古いSafari向けの控え
   ------------------------------------------------------------------------
   iPadOS 14.6 の実機で、この画面が丸ごと表示されない不具合の対処。
   原因は次の2つで、どちらも iPadOS 15/16 以降でないと動かない書き方だった。
     ・aspect-ratio      … iPadOS 15 以降。効かないと stage の高さが 0px になり
                            中身が overflow:hidden で全部消える
     ・container-type/cqw … iPadOS 16 以降。効かないと --u が無効になり
                            位置と大きさの calc() がすべて崩れる
   @supports not (…) は「その機能が使えないブラウザだけが読む」という書き方なので、
   新しいブラウザはこのブロックを丸ごと無視する。
   → PC版の見た目は1pxも変わらない（検証済み：追記前後のスクリーンショットが
     画像として完全一致 mf-cycle 59e687a98315 / mf-appeal d01a825dc013 /
     mf-voice 39477fc340b4）。
   既存の行は1行も書き換えていない。末尾への追記のみ。
   元のファイルは /root/bk_mf-*_pre_ios14.css に控えてある。
   ========================================================================= */
@supports not (aspect-ratio: 1 / 1){
  /* 縦横比のかわりに、幅に対する％の余白で同じ高さを作る（1010 ÷ 1672） */
  #mf-appeal .mfa-stage{ height:0; padding-top:60.40670%; }
}
@supports not (container-type: inline-size){
  /* cqw（枠の幅の1%）が使えないので、vw（画面の幅の1%）で代用する。
     このセクションは画面幅いっぱい（上限1600px）なので、ほぼ同じ値になる。 */
  #mf-appeal{ --u:min(0.9569px, 0.0598vw); margin-left:auto; margin-right:auto; }
}