/* =========================================================================
   「ショート・クルーズ 3つの事例」バナー（①②③のあとに置く導線）
   2026-09-09

   ・ご指示により、絵はご支給のPNGをそのまま使う（今回は憲法の例外）
   ・ただし「詳細はこちらから」のボタンだけはHTMLで作り直し、
     PNG側の金のボタンは地色で塗りつぶしてある
     （元のPNGは /root/.claude/uploads/… のご支給ファイル）
   ・幅は1600pxいっぱいではなく1400px。画面が狭くなると
     --u が小さくなり、バナーもボタンも同じ比率で縮む（拡大縮小できる）
   ・セレクタはすべて #mf-cases の配下に限定
   ========================================================================= */
/* 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-cases{
  container-type:inline-size;
  --u:min(1px, 0.0625cqw);          /* 1600pxのとき 1px */
  --gold-d:#8a6520; --gold-m:#b4873a;
  width:100%; max-width:1600px; margin-inline:auto;
  background:#fffdf7; color:#2b2018;
  font-family:"Noto Serif JP","Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN",serif;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
#mf-cases *{ box-sizing:border-box; }

#mf-cases .mfcs-inner{
  /* 1600px全部は使わず、①の円の並び（約1333px）に近い1400pxで収める */
  width:calc(1400 * var(--u)); margin:0 auto;
  padding:calc(28 * var(--u)) 0 calc(64 * var(--u));
}
#mf-cases .mfcs-link{
  position:relative; display:block; text-decoration:none; color:inherit;
  border-radius:calc(10 * var(--u));
  /* 2026-09-09 タップしたときに画面が青くかぶるのを止める（端末が出す既定の反応）。
     押した感じは、ごく軽く沈む形で代わりに出している。 */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
#mf-cases .mfcs-link:active{ opacity:.92; }
#mf-cases .mfcs-bg{ display:block; width:100%; height:auto; }

/* 「詳細はこちらから」ボタン（PNGの金のボタンの位置にぴったり重ねる） */
/* 2026-09-09 白文字とのコントラストが4.41で基準4.5にわずかに届かなかったため、
   金を一段濃くした（いちばん明るいところでも4.74）。見た目の印象は変えていない。 */
#mf-cases .mfcs-btn{
  position:absolute; left:89.897%; top:68.892%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  gap:calc(14 * var(--u));
  width:calc(232 * var(--u)); height:calc(48 * var(--u));
  border-radius:calc(24 * var(--u));
  background:linear-gradient(180deg,#946c26 0%,#7d5a1c 55%,#6e4d17 100%);
  box-shadow:0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(120,88,30,.30);
  color:#fff; font-size:calc(21 * var(--u)); line-height:1; letter-spacing:.04em;
  white-space:nowrap;
}
#mf-cases .mfcs-btn i{ font-style:normal; font-size:calc(24 * var(--u)); line-height:1; }
#mf-cases .mfcs-link:hover .mfcs-btn{ background:linear-gradient(180deg,#a67d31 0%,#8c6524 55%,#7d581e 100%); }
#mf-cases .mfcs-link:focus-visible{ outline:calc(3 * var(--u)) solid #b4873a; outline-offset:calc(4 * var(--u)); }

/* スマートフォンは、これまでどおり既存の導線を使うので出さない */
@media (max-width:768px){ #mf-cases{ display:none; } }

/* =========================================================================
   スマートフォン版（768px以下）
   2026-09-09 ご指示により作り直し。
   ここは「3つの事例を見せる」ためではなく「手ごろな価格」を印象づけるための場所。
   船の絵はアイコンの役割なので、3つを横に並べて小さく置き、
   金額だけをHTMLの文字（18px）で読めるようにしている。
   ・①②③の丸番号は使わない
   ・船名は画像の中に入れてある（小さく読めなくてもよい、とのご指示）
   ・アイコンを含め、枠全体がリンク。タップすると「はじめてクルーズ」の
     ショートクルーズ3つの事例へ飛ぶ
   ・縦積み版（sp_head / sp_case1〜3）は場所を取りすぎるためやめた
   ========================================================================= */
#mf-cases-sp{ display:none; }

@media (max-width:768px){
  #mf-cases-sp{ display:block; margin:26px auto 0; max-width:358px; }
  #mf-cases-sp .mfcssp-link{
    display:block; text-decoration:none; color:inherit;
    border:1.4px solid #d6ab55; border-radius:10px;
    background:#fffdf9; padding:14px 12px 16px;
    /* 2026-09-09 タップすると枠全体が青くかぶっていた（スマホが出す既定の反応）。
       それを止めて、代わりに「ごく薄い金色になる」押した感じにしている。
       文字が選択されて青く反転するのも止める。 */
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none; user-select:none;
  }
  #mf-cases-sp .mfcssp-link:active{ background:#fdf6e6; }
  #mf-cases-sp .mfcssp-link:active .mfcssp-btn{
    background:linear-gradient(180deg,#835f1f 0%,#6e4d17 55%,#5f4213 100%);
  }
  #mf-cases-sp .mfcssp-h{
    display:block; text-align:center;
    font-size:18px; line-height:1.4; letter-spacing:.04em; color:#6a5a4a;
  }
  #mf-cases-sp .mfcssp-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    margin-top:10px;
  }
  #mf-cases-sp .mfcssp-cell{ display:block; }
  #mf-cases-sp .mfcssp-cell img{
    display:block; width:100%; height:auto;
    border:1px solid #eee0c4; border-radius:6px; background:#fffdf7;
  }
  #mf-cases-sp .mfcssp-p{
    display:block; text-align:center; margin-top:5px;
    font-size:18px; line-height:1.3; font-weight:700; color:#a8202a;
    letter-spacing:-.02em;
  }
  #mf-cases-sp .mfcssp-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; height:52px; margin-top:14px;
    border-radius:26px;
    background:linear-gradient(180deg,#946c26 0%,#7d5a1c 55%,#6e4d17 100%);
    box-shadow:0 2px 6px rgba(120,88,30,.28);
    color:#fff; font-size:18px; line-height:1; letter-spacing:.04em;
  }
  #mf-cases-sp .mfcssp-btn i{ font-style:normal; font-size:20px; line-height:1; }
}


/* =========================================================================
   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 (container-type: inline-size){
  /* cqw が使えない端末では --u が無効になり、バナーの幅と金ボタンの位置が崩れる。
     vw（画面の幅の1%）で代用する。 */
  #mf-cases{ --u:min(1px, 0.0625vw); margin-left:auto; margin-right:auto; }
}

/* =========================================================================
   2026-09-10 追加：メンバーシップ・フリー4画面の最後に置く「公式サイトへ」の導線。
   ご指示「A：④3つの事例バナーのすぐ下」。
   携帯（768px以下）は従来どおり .mf-cta が出るので、こちらは769px以上のみ表示。
   文字の大きさはPCの決まり（リード22px／本文20px／注記15px）に合わせた。
   控えは /root/bk_mf-cases_pre_ctapc.css
   ========================================================================= */
.mf-cta-pc{ display:none; }
@media (min-width:769px){
  .mf-cta-pc{
    display:block; text-align:center;
    background:#fffdf7; border-top:1px solid #f0e4cd;
    padding:38px 24px 46px;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  }
  .mf-cta-pc__lead{
    margin:0 0 20px; font-size:22px; line-height:1.6; color:#3a2b1e;
    font-family:"Noto Serif JP","Noto Serif CJK JP","Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:600;
  }
  .mf-cta-pc__btnwrap{ margin:0; }
  /* .jn-btn は769〜880pxで width:100% になるため、ここだけ幅を抑える */
  .mf-cta-pc .jn-btn{ width:auto; max-width:520px; font-size:20px; padding:18px 34px; }
  .mf-cta-pc__note{ margin:16px 0 0; font-size:15px; line-height:1.6; color:#1c1610; }
}