/* =========================================================================
「声かけが、次のクルーズのきっかけになります」（統計）
2026-09-09 完成見本（1672×941）をもとに実装
・設計幅1672px。--u が設計上の1px
・枠・金の帯・棒グラフ・仕切り線はすべてCSSで描画
・画像は手書き英字2点・波飾り2点・丸アイコン3点・船マーク1点だけ
・セレクタはすべて #mf-voice の配下に限定
========================================================================= */
/* 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-voice{
container-type:inline-size;
--u:min(0.9569px, 0.0598cqw);
--gold:#c9922e; --gold-l:#dcb267; --orange:#ea6a10; --red:#e0301c;
width:100%; max-width:1600px; margin-inline:auto;
background:#fffdf7; 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-voice *{ box-sizing:border-box; }
#mf-voice p, #mf-voice h3{ margin:0; }
#mf-voice img{ display:block; }
/* 2026-09-09 ご指示により順番を組み替えたので、高さを941→1470にした（幅1672は据え置き）
見出し → 小見出し → 本文（3つの段落を1つにまとめた） → 出典と数値の図 → アイコン3つ → 締め */
#mf-voice .mfv-stage{ position:relative; width:100%; aspect-ratio:1672 / 1400; overflow:hidden; }
#mf-voice .mfv-script-l{ position:absolute; left:calc(55 * var(--u)); top:calc(50 * var(--u)); width:calc(295 * var(--u)); }
#mf-voice .mfv-script-r{ position:absolute; left:calc(1370 * var(--u)); top:calc(45 * var(--u)); width:calc(285 * var(--u)); }
#mf-voice .mfv-wave-l{ position:absolute; left:0; top:calc(165 * var(--u)); width:calc(240 * var(--u)); }
#mf-voice .mfv-wave-r{ position:absolute; left:calc(1400 * var(--u)); top:calc(140 * var(--u)); width:calc(272 * var(--u)); }
#mf-voice .mfv-title{
position:absolute; left:0; top:calc(42 * var(--u)); width:100%; text-align:center; z-index:2;
/* 2026-09-09 ご指示により 32px（中見出し）。1672px基準なので 33.4 */
font-size:calc(33.4 * var(--u)); line-height:1.5; font-weight:700; letter-spacing:.01em; color:#241a12;
white-space:nowrap;
}
#mf-voice .mfv-title .or{ color:var(--orange); }
#mf-voice .mfv-arc{
position:absolute; left:calc(620 * var(--u)); top:calc(152 * var(--u));
width:calc(432 * var(--u)); height:calc(26 * var(--u)); z-index:2;
border-bottom:calc(1.5 * var(--u)) solid var(--gold-l); border-radius:50%;
}
#mf-voice .mfv-sub{
position:absolute; left:0; top:calc(224 * var(--u)); width:100%; text-align:center; z-index:2;
/* 2026-09-09 ご指示により 24px（1600pxの画面での実寸）にする。
この画面は1672px基準で作ってあるので、1600pxで24pxに見えるよう
24 × 1672/1600 = 25.1 を指定している。 */
font-size:calc(25.1 * var(--u)); line-height:1.35; font-weight:700; letter-spacing:.01em; color:#241a12;
white-space:nowrap;
}
#mf-voice .mfv-sub .rd{ color:var(--red); }
#mf-voice .mfv-sub .or{ color:var(--orange); }
#mf-voice .mfv-src{
/* 2026-09-09 ご指示により、枠の中ではなく枠線の一部として上辺の中央にまたがせる */
position:absolute; left:calc(618 * var(--u)); top:calc(580.5 * var(--u));
width:calc(436 * var(--u)); height:calc(39 * var(--u)); z-index:3;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg,#c99a34 0%,#b8842a 100%); border-radius:calc(4 * var(--u));
color:#fff; font-size:calc(24 * var(--u)); letter-spacing:.03em; white-space:nowrap;
}
#mf-voice .mfv-box{
/* 2026-09-09 出典ラベルを上辺にまたがせ、枠の中の空白も詰めた */
position:absolute; left:calc(380 * var(--u)); top:calc(600 * var(--u));
width:calc(912 * var(--u)); height:calc(268 * var(--u)); z-index:2;
border:calc(1.5 * var(--u)) solid var(--gold-l); border-radius:calc(10 * var(--u));
background:#fffefb;
}
#mf-voice .mfv-col{ position:absolute; top:calc(636 * var(--u)); width:calc(456 * var(--u)); height:calc(220 * var(--u)); text-align:center; }
#mf-voice .mfv-col1{ left:calc(380 * var(--u)); z-index:3; }
#mf-voice .mfv-col2{ left:calc(836 * var(--u)); z-index:3; }
#mf-voice .mfv-col2::before{
content:""; position:absolute; left:0; top:calc(8 * var(--u));
width:calc(1 * var(--u)); height:calc(200 * var(--u)); background:rgba(201,146,46,.45);
}
/* 2026-09-09 「旅行のきっかけに／家族・知人の誘い」は2行あり、数字と重なっていた。
図の枠を高くしたぶん、数字と棒を下げて重なりを解消した */
#mf-voice .mfv-lab{
position:absolute; left:0; top:calc(12 * var(--u)); width:100%;
font-size:calc(26 * var(--u)); line-height:1.35; color:#241a12; white-space:nowrap;
}
#mf-voice .mfv-num{
position:absolute; left:0; top:calc(90 * var(--u)); width:100%;
font-size:calc(88 * var(--u)); line-height:1; color:var(--orange); font-weight:600; letter-spacing:-.01em;
}
#mf-voice .mfv-num span{ font-size:.58em; }
#mf-voice .mfv-bar{
position:absolute; left:calc(44 * var(--u)); top:calc(192 * var(--u));
width:calc(367 * var(--u)); height:calc(20 * var(--u));
background:#e8e2d8; border-radius:calc(10 * var(--u)); overflow:hidden;
}
#mf-voice .mfv-bar i{ display:block; height:100%; border-radius:calc(10 * var(--u)); background:var(--orange); }
/* 2026-09-09 ご指示により、左右に分かれていた3つの段落を
小見出しの下の1つのかたまり（本文20px）にまとめた。文章は一字も変えていない。 */
/* 2026-09-09 ご指示により、本文の横幅を②（最長行776px）に合わせて広げた。
②とそろえるため 880u（1600pxの画面で842px）。
もとのHTMLに入っている
は出さず、幅いっぱいまで流して行数を減らす。
text-wrap:balance で2行の長さがそろうようにしている。文章は一字も変えていない。 */
#mf-voice .mfv-lt, #mf-voice .mfv-rt{
position:absolute; left:calc(396 * var(--u)); width:calc(880 * var(--u)); z-index:2;
text-align:center;
/* 本文20px。1672px基準なので 20×1672/1600＝20.9 */
font-size:calc(20.9 * var(--u)); line-height:1.7; color:#2b2018;
}
/* 2026-09-09 機械まかせの折り返しだと「行ってみたいけ／れど、」のように
語の途中で切れて読みにくかった。もとのHTMLに入っている
のうち、
意味の切れ目にあたる1つだけを残して行数を減らす（文章は変えていない）。
1段落目 … 改行なし（1行）
2段落目 … 「…経験者がいない」のうしろで改行（2行）
3段落目 … 「…非日常の旅です。」のうしろで改行（2行） */
#mf-voice .mfv-lt1 br{ display:none; }
#mf-voice .mfv-lt2 br:nth-of-type(2){ display:none; }
#mf-voice .mfv-rt br:nth-of-type(2){ display:none; }
#mf-voice .mfv-lt1{ top:calc(306 * var(--u)); }
#mf-voice .mfv-lt2{ top:calc(374 * var(--u)); }
#mf-voice .mfv-rt{ top:calc(477 * var(--u)); }
/* 2026-09-09 左右2段をやめて1つの文章にまとめたので、真ん中の縦線は出さない
（HTMLは残してあります。この1行を消せば戻ります） */
#mf-voice .mfv-vline{ display:none !important; }
/* 2026-09-09 ご指示により、数値の図の下へ移し、全体のバランスに合わせて大きくした
（幅678→1150、絵の高さ73→100、文字18→20px相当）。3つの絵の上端をそろえる */
#mf-voice .mfv-icons{
position:absolute; left:calc(261 * var(--u)); top:calc(922 * var(--u)); width:calc(1150 * var(--u)); z-index:2;
display:grid; grid-template-columns:repeat(3,1fr); align-items:start; text-align:center;
}
#mf-voice .mfv-icons img{ margin:0 auto; height:calc(100 * var(--u)); width:auto; }
#mf-voice .mfv-icons p{ margin-top:calc(10 * var(--u)); font-size:calc(20.9 * var(--u)); line-height:1.55; color:#4a3a2c; }
#mf-voice .mfv-close{
/* 2026-09-09 見本の実測 幅822px・高さ40px。37pxでは幅673pxで小さすぎたので44pxに戻した */
position:absolute; left:0; top:calc(1190 * var(--u)); width:100%; text-align:center; z-index:2;
/* 2026-09-09 ご指示により 32px。1672px基準なので 33.4 */
font-size:calc(33.4 * var(--u)); line-height:1.3; font-weight:700; color:#241a12; white-space:nowrap;
}
#mf-voice .mfv-close .or{ color:var(--orange); }
#mf-voice .mfv-ship{ position:absolute; left:calc(591 * var(--u)); top:calc(1258 * var(--u)); width:calc(490 * var(--u)); z-index:2; }
@media (max-width:768px){ #mf-voice{ display:none; } }
/* =========================================================================
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){
/* 縦横比のかわりに、幅に対する％の余白で同じ高さを作る（1400 ÷ 1672） */
#mf-voice .mfv-stage{ height:0; padding-top:83.73206%; }
}
@supports not (container-type: inline-size){
/* cqw（枠の幅の1%）が使えないので、vw（画面の幅の1%）で代用する。
このセクションは画面幅いっぱい（上限1600px）なので、ほぼ同じ値になる。 */
#mf-voice{ --u:min(0.9569px, 0.0598vw); margin-left:auto; margin-right:auto; }
}