/* =========================================================================
   「なぜ、旅を続けやすいのか ／ メンバーシップ・フリーの考え方」
   2026-09-09  GPT設計パック membership_free_3layer_1600 を実装

   設計パックからの変更点は次の3つだけです。デザインは変えていません。
     1. transform:scale() と fit.js をやめ、--u（設計上の1px）方式にした
        → 文字がぼやけず、他のパートと拡大率がそろう
     2. h1 を h2 に変えた（ページ内にh1は1つだけにするため）
     3. すべてのセレクタを #mf-cycle の配下に限定した
        （* / html / body への指定はしていない）
   位置と大きさの数値は、設計パックの styles.css をそのまま px→--u に置換
   ========================================================================= */
/* 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-cycle{
  container-type:inline-size;
  --u:min(1px, 0.0625cqw);          /* 設計幅1600pxの1/1600 */
  width:100%; max-width:1600px; margin-inline:auto;
  background:#fffefa;
  color:#332019;
  /* 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-cycle *{ box-sizing:border-box; }
#mf-cycle p, #mf-cycle h2, #mf-cycle h3{ margin:0; }

#mf-cycle .mfc2-stage{
  position:relative;
  width:100%;
  /* 2026-09-09 「三方にうれしい循環」と3つの円を下げたぶん、背景の波も134px下へ
     ずらした（background_clean.png を 1600x1200 → 1600x1334 に作り直し。
     平らな帯の中に同じ行を134行差し込んだだけなので、波の形も色も変えていない）。
     元の背景は /root/bk_mfcycle_bg_1200.png に控えてある。 */
  aspect-ratio:1600 / 1238;
  /* 2026-09-09 ②「メンバーシップ・フリーが続くと」との間があきすぎていたので、
     波の帯を円の8px下（見本と同じ近さ）まで上げ、波の下の余白も100px→21pxに詰めた。
     円の下端1102px →（8px）→ 波1110〜1217px →（21px）→ 区切り。 */
  overflow:hidden;
}
#mf-cycle .mfc2-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
#mf-cycle .mfc2-decor{
  /* 2026-09-09 見本と画像照合した結果 x0 y0（設計パックのCSSは24,14だった。一致度0.989） */
  position:absolute; left:0; top:0;
  width:calc(232 * var(--u)); height:calc(193 * var(--u)); object-fit:cover; z-index:1;
}
#mf-cycle .mfc2-hero{
  /* 2026-09-09 設計パックの hero_visual.png は、切り出しのときに本文の右端
     （「…です」「い仕組みです。」など）が写真の左端に焼き込まれたままだった。
     HTMLの本文と重なって二重に見えるため、写真の左178pxを、
     その位置の写真の色からページの地色へなめらかにつなぐ形で塗り直した。
     写真の位置・大きさ・縮尺は設計パックのまま（682×448、右端を1600pxに）。
     元の写真は /root/bk_hero_visual_orig.png に保管。 */
  position:absolute; right:0; top:0;
  width:calc(682 * var(--u)); height:calc(448 * var(--u)); object-fit:cover; z-index:1;
  /* 2026-09-09 追記：左端を一律にぼかすと、写真に入っている金の飾り文字
     「More Journeys / Brighter Tomorrows」の左半分まで消えてしまっていた。
     ぼかし幅を行ごとに変える形（飾り文字の帯 y0〜88 は20px、
     焼き込み文字のある y150 以下は178px）で写真自体に透明度を持たせたので、
     CSS側の一律のぼかしは外す。 */
  /* 2026-09-09 追記：右端が画面上でスパッと切れて、右隣の白地とぶつかって見えたため、
     右の約150px（設計値）をなだらかに消して地色へつなぐ。
     左端の消し方は写真そのものに焼き込んであり、この指定と掛け合わせで効く。 */
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 77%,rgba(0,0,0,.5) 91%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 77%,rgba(0,0,0,.5) 91%,transparent 100%);
}

/* ---- 上段のテキスト ---- */
#mf-cycle .mfc2-intro{
  position:absolute; left:calc(63 * var(--u)); top:calc(48 * var(--u));
  /* 2026-09-09 設計パックは875pxだったが、游明朝が入っていない端末では
     文字が少し広く出て折り返してしまう。1行で収まるよう枠を広げ、
     各行に white-space:nowrap を付けて、どのフォントでも折り返さないようにした。
     文字の大きさ・位置・色は設計パックのまま。 */
  width:calc(1120 * var(--u)); z-index:2;
}
#mf-cycle .mfc2-eyebrow{
  /* 2026-09-09 見本の実測は幅313px（12文字＝1文字26px）。設計パックの22pxでは
     54px狭かったので26pxにした。 */
  margin:0 0 calc(12 * var(--u)) calc(318 * var(--u));
  font-size:calc(26 * var(--u)); line-height:1.25; color:#243f79;
}
#mf-cycle .mfc2-title{
  margin:0 0 calc(8 * var(--u)) calc(155 * var(--u));
  font-size:calc(54 * var(--u)); line-height:1.05; font-weight:700; color:#2b1510;
  white-space:nowrap;
}
#mf-cycle .mfc2-title-rule{
  display:block; margin-left:calc(154 * var(--u));
  width:calc(618 * var(--u)); height:calc(18 * var(--u));
  border-top:calc(2 * var(--u)) solid #d99a2c; border-radius:50%;
}
/* 2026-09-09 ご指示により、見出し・リード・本文の左端を大見出しとそろえた（margin-left 155） */
#mf-cycle .mfc2-vh{
  margin:calc(18 * var(--u)) 0 calc(8 * var(--u)) calc(155 * var(--u));
  font-size:calc(32 * var(--u)); line-height:1.15; font-weight:700; color:#a66709;
  white-space:nowrap;
}
#mf-cycle .mfc2-lead{
  margin:0 0 calc(20 * var(--u)) calc(155 * var(--u));
  font-size:calc(24 * var(--u)); line-height:1.35; color:#213e78;
  white-space:nowrap;
}
#mf-cycle .mfc2-body{
  margin-left:calc(155 * var(--u));
  font-size:calc(20 * var(--u)); line-height:1.6; color:#28447a;
  white-space:nowrap;
}

/* ---- 三方にうれしい循環 ---- */
/* 2026-09-09 「三方にうれしい循環」は、設計パックのCSS（32px・top430・罫の位置）では
   見本と大きく違っていた。見本の画像を実測して合わせ直している。
     見出しの文字   32px → 60px（見本の文字の実測 幅512px／高さ57px）
     見出しの位置   ink上端が y450 になるよう top430 → 440
     「循環」の色   見本は RGB(192,107,2)。前半「三方にうれしい」は RGB(34,0,0)
     左右の金の罫   見本は x263-512 と x1089-1337、y477。それに合わせた */
#mf-cycle .mfc2-cyc{
  /* 2026-09-09 ご指示により、本文との行間を54px分あけて全体を下へ移動（440→494）。
     本文の下端443px → 見出しの上端が497pxになり、間が3px→54pxになる。 */
  position:absolute; left:calc(365 * var(--u)); top:calc(494 * var(--u));
  width:calc(870 * var(--u)); text-align:center; z-index:2;
}
#mf-cycle .mfc2-cyc .mfc2-rule{
  /* 2026-09-09 見出しを32pxにしたので、金の罫も見出しの近くへ寄せた */
  position:absolute; top:calc(21 * var(--u));
  width:calc(250 * var(--u)); border-top:calc(2 * var(--u)) solid #c88a25;
}
#mf-cycle .mfc2-cyc .mfc2-rule-l{ left:calc(11 * var(--u)); }
#mf-cycle .mfc2-cyc .mfc2-rule-r{ right:calc(11 * var(--u)); }
#mf-cycle .mfc2-cyc h3{
  /* 見出しを小さくしたぶん、下の文までの間隔を足して位置を保つ */
  margin:0 0 calc(36 * var(--u));
  /* 2026-09-09 ご指示により 60px → 32px（中見出し） */
  font-size:calc(32 * var(--u)); line-height:1.2; font-weight:700; color:#220000;
  letter-spacing:.01em; white-space:nowrap;
}
#mf-cycle .mfc2-cyc h3 span{ color:#c06b02; }
#mf-cycle .mfc2-cyc p{
  font-size:calc(24 * var(--u)); line-height:1.35; color:#294478;
  white-space:nowrap;
}

/* ---- 3つの円 ---- */
/* 2026-09-09 3つの円の位置と大きさは、見本と部品PNGを画像照合して割り出した値。
   設計パックのCSSの値では見本と25〜70pxずれていた（照合の一致度 0.83〜0.88）。
     クルーズ会社  設計112,535 410x410 → 見本116,560 428x420
     紹介者        設計596,545 400x400 → 見本568,576 417x405
     新規入会者    設計1080,535 410x410 → 見本1008,560 417x420
   大きさは元PNGの1.09倍。縦横比は元のままなので写真はゆがまない。 */
#mf-cycle .mfc2-cards{
  position:absolute; inset:0; z-index:2;
}
#mf-cycle .mfc2-card{ position:absolute; margin:0; }
#mf-cycle .mfc2-card img{ display:block; width:100%; height:100%; object-fit:contain; }
/* 2026-09-09 円のPNGは右側（一部は下側）が切れていて、輪郭と写真が欠けていた。
   欠けた分だけキャンバスを広げ、輪郭は左右対称の位置から、写真は円の中心方向から
   写して埋めた。写真・文字・色には手を触れていない。元PNGは /root/bk_mfcycle_cards/ 。
   新しいPNGは正方形で、円の中心＝画像の中心、半径は 190.8 / 186.5 / 190.3 px。
   下の値は「見本の円（中心349.2,783.6 半径211.1 ほか）を92px下げた位置」に
   ぴったり重なるように計算したもの。 */
#mf-cycle .mfc2-card1{ left:calc(131.3 * var(--u)); top:calc(657.7 * var(--u)); width:calc(435.9 * var(--u)); height:calc(435.9 * var(--u)); }
#mf-cycle .mfc2-card2{ left:calc(587.3 * var(--u)); top:calc(678.0 * var(--u)); width:calc(424.0 * var(--u)); height:calc(424.0 * var(--u)); }
#mf-cycle .mfc2-card3{ left:calc(1029.8 * var(--u)); top:calc(659.8 * var(--u)); width:calc(433.9 * var(--u)); height:calc(433.9 * var(--u)); }

/* ---- 読み上げ・検索用（画面には出さない） ---- */
#mf-cycle .mfc2-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* PC専用。769px以上で表示 */
@media (min-width:769px){ #mf-cycle{ display:block; } }
@media (max-width:768px){ #mf-cycle{ 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){
  /* 縦横比のかわりに、幅に対する％の余白で同じ高さを作る（1238 ÷ 1600） */
  #mf-cycle .mfc2-stage{ height:0; padding-top:77.375%; }
}
@supports not (container-type: inline-size){
  /* cqw（枠の幅の1%）が使えないので、vw（画面の幅の1%）で代用する。
     このセクションは画面幅いっぱい（上限1600px）なので、ほぼ同じ値になる。 */
  #mf-cycle{ --u:min(1px, 0.0625vw); margin-left:auto; margin-right:auto; }
}