/* =========================================================================
   「旅を続ける力になる メンバーシップ・フリー」（原寸 1672×941）
   2026-09-07　GPT設計パック membershipfree_success95_v2 を実装（3層分解方式）
     層1 背景   ：background_clean.png（原本から文字を抜いた背景）
     層2 装飾   ：王冠／Pコイン／矢印／飾り罫／STEPカード（原本からの切り出しPNG）
     層3 テキスト：見出し・リード・本文・条件・金額・注記（HTML実文字）

   ■ 既存サイトへの影響を出さないための決まり
     ・全セレクタを #membership-free-v2 配下に限定
     ・:root / * / html,body などグローバル指定は取り込んでいない
     ・fit.js は使わず、CSSだけで等比縮小している（新規JSを作らない方針のため）

   ■ 拡大縮小
     --u が「設計上の1px」。--u: min(1px, 100cqw/1672) としているので、
     1672px以上で原寸、それより狭いと同じ比率で縮む。
     1519px以下は既存セクションに切り替える（このファイル末尾）。

   ■ 実装時に直した点（GPTのCSS/素材の不具合）
     1. .mf95-rp の <br> が空行を作り「はそのまま付与」が1行分下がっていた
     2. icon_point.png の上端31pxに「費負担」が写り込んでいたので透明化した
     3. 見出し・リード・本文・金額の位置と大きさを原本の実測に合わせた
   ========================================================================= */
#membership-free-v2{
  container-type:inline-size;
  /* 2026-09-08 ①を1600px設計にそろえた（max-width 1672px → 1600px）。
     ②③は1600pxで頭打ちなのに、①だけ1672pxまで広がって
     大きなモニターで4.5%大きく出ていたため。
     キャンバス内部の座標（1672基準）は1つも変えていない。 */
  --u:min(0.9569px, 0.0598cqw);
  width:100%;
  max-width:1600px;
  margin:0 auto;
  overflow:hidden;
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDPMincho",serif;
  color:#16100c;
  --mf95-gold:#c98518;
  --mf95-red:#c72a1d;
}
#membership-free-v2 .mf95-shell{ position:relative; width:100%; }
#membership-free-v2 .mf95-stage{
  position:relative;
  width:calc(1672 * var(--u));
  height:calc(941 * var(--u));
  margin:0 auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
#membership-free-v2 .mf95-stage *{ box-sizing:border-box; }
#membership-free-v2 p{ margin:0; }








#membership-free-v2 .mf95-bg{position:absolute;inset:0;width:calc(1672 * var(--u));height:calc(941 * var(--u));display:block}
#membership-free-v2 .mf95-ornament-top{position:absolute;left:calc(239 * var(--u));top:calc(25 * var(--u));width:calc(205 * var(--u));height:calc(27 * var(--u));object-fit:contain}

#membership-free-v2 .mf95-copy{position:absolute;left:0;top:0;width:calc(770 * var(--u));height:calc(490 * var(--u))}
#membership-free-v2 .mf95-title{
  position:absolute;left:calc(86 * var(--u));top:calc(60 * var(--u));width:calc(705 * var(--u));
  margin:0;padding:0;
  font-family:var(--mf95-font);
  /* 2026-09-08 見本の線の太さに合わせて 400→600（実測：文字の濃さ 見本20.5% / 400で15.3% / 600で20.1%） */
  font-weight:600;letter-spacing:-0.03em;color:#14100c;
  line-height:1.06;
}
/* 2026-09-08 見本に合わせて1行目を組み直した。
   見本は「漢字は約69.5px、かなは約43px（漢字の0.619倍）」で詰めて組まれている。
   実装は9文字とも60px均一で、合計が14%広かった（見本466px / 実装533.4px）。
   font-feature-settings:"palt" を実機で試したが効かないフォントのため、
   かなを .kn で囲んで直接小さくしている。文言は1文字も変えていない。 */
#membership-free-v2 .mf95-title .line1{font-size:calc(69.5 * var(--u));}
#membership-free-v2 .mf95-title .line1 .kn{font-size:.619em;}
/* 2026-09-08 1行目を69.5pxに上げたぶん2行目が12px下がったので、その分だけ戻す */
#membership-free-v2 .mf95-title .line2{font-size:calc(60.5 * var(--u));display:inline-block;margin-top:calc(-4 * var(--u));letter-spacing:-0.036em;}
#membership-free-v2 .mf95-lead{
  position:absolute;left:calc(87 * var(--u));top:calc(220 * var(--u));width:calc(715 * var(--u));margin:0;
  font-family:var(--mf95-font);
  font-size:calc(43.3 * var(--u));line-height:1.52;font-weight:400;letter-spacing:-0.022em;white-space:nowrap;color:#16100c;
}
#membership-free-v2 .mf95-rule{position:absolute;left:calc(87 * var(--u));top:calc(358 * var(--u));width:calc(320 * var(--u));height:calc(2 * var(--u));background:#d89c39}
#membership-free-v2 .mf95-body{
  position:absolute;left:calc(89 * var(--u));top:calc(380 * var(--u));width:calc(610 * var(--u));margin:0;
  font-family:var(--mf95-font);
  font-size:calc(20 * var(--u));line-height:1.52;font-weight:400;letter-spacing:-0.017em;white-space:nowrap;
  color:#29211b;
}

#membership-free-v2 .mf95-benefit{position:absolute;left:calc(130 * var(--u));top:calc(475 * var(--u));width:calc(1408 * var(--u));height:calc(231 * var(--u))}
#membership-free-v2 .mf95-panel-gold{display:none!important}
#membership-free-v2 .mf95-benefit-heading{
  position:absolute;left:calc(277 * var(--u));top:calc(46 * var(--u));width:calc(860 * var(--u));margin:0;text-align:center;
  font-family:var(--mf95-font);
  font-size:calc(33 * var(--u));line-height:1.12;font-weight:400;letter-spacing:-0.026em;white-space:nowrap;color:#1b1410;
}
#membership-free-v2 .mf95-benefit-heading .prefix, #membership-free-v2 .mf95-benefit-heading .suffix{display:inline-block;vertical-align:baseline}
#membership-free-v2 .mf95-benefit-heading strong{display:inline-block;color:var(--mf95-gold);font-weight:500;vertical-align:baseline;letter-spacing:-0.026em}
#membership-free-v2 .mf95-crown{position:absolute;left:calc(155 * var(--u));top:calc(86 * var(--u));width:calc(114 * var(--u));height:calc(116 * var(--u));object-fit:contain}
#membership-free-v2 .mf95-fee-block{position:absolute;left:calc(285 * var(--u));top:0;width:calc(525 * var(--u));height:calc(210 * var(--u))}
#membership-free-v2 .mf95-fee-label{position:absolute;left:0;top:calc(103 * var(--u));font-family:var(--mf95-font);font-size:calc(19 * var(--u));line-height:1.1;color:#1e1712}
#membership-free-v2 .mf95-fee, #membership-free-v2 .mf95-zero, #membership-free-v2 .mf95-fee-arrow{
  font-family:var(--mf95-font);
  font-variant-numeric: lining-nums;
  color:#16100c;
}
#membership-free-v2 .mf95-fee{position:absolute;left:calc(49 * var(--u));top:calc(113 * var(--u));font-size:calc(53 * var(--u));line-height:1;font-weight:400;letter-spacing:-0.04em}
#membership-free-v2 .mf95-fee-arrow{position:absolute;left:calc(168 * var(--u));top:calc(122 * var(--u));font-size:calc(50 * var(--u));line-height:1;font-weight:300;letter-spacing:-0.03em}
#membership-free-v2 .mf95-zero{position:absolute;left:calc(236 * var(--u));top:calc(76 * var(--u));font-size:calc(103 * var(--u));line-height:1;font-weight:400;letter-spacing:-0.05em;color:var(--mf95-gold)}
#membership-free-v2 .mf95-divider{position:absolute;left:calc(690 * var(--u));top:calc(98 * var(--u));width:calc(2 * var(--u));height:calc(78 * var(--u));background:#ddb866}
#membership-free-v2 .mf95-point{position:absolute;left:calc(770 * var(--u));top:calc(86 * var(--u));width:calc(112 * var(--u));height:calc(114 * var(--u));object-fit:contain}
#membership-free-v2 .mf95-rp{
  position:absolute;left:calc(910 * var(--u));top:calc(104 * var(--u));width:calc(420 * var(--u));margin:0;
  font-family:var(--mf95-font);
  font-size:calc(33 * var(--u));line-height:1.08;letter-spacing:-0.026em;color:#16100c;
}
#membership-free-v2 .mf95-rp strong{display:block;color:var(--mf95-red);font-weight:500;font-size:calc(36 * var(--u));line-height:1.04;letter-spacing:-0.03em;margin-bottom:calc(2 * var(--u))}
#membership-free-v2 .mf95-rp span{display:block;color:#16100c;font-size:calc(31 * var(--u));line-height:1.04;letter-spacing:-0.022em}
#membership-free-v2 .mf95-condition{
  position:absolute;left:calc(378 * var(--u));top:calc(191 * var(--u));width:calc(745 * var(--u));margin:0;text-align:center;
  font-family:var(--mf95-font);
  font-size:calc(13 * var(--u));line-height:1.05;color:#3a3028;white-space:nowrap;letter-spacing:-0.028em;
}

#membership-free-v2 .mf95-steps{position:absolute;left:calc(47 * var(--u));top:calc(724 * var(--u));width:calc(1552 * var(--u));height:calc(177 * var(--u))}
#membership-free-v2 .mf95-step{position:absolute;top:0;height:calc(177 * var(--u));overflow:hidden}
#membership-free-v2 .mf95-step img{width:100%;height:100%;display:block;object-fit:fill}
#membership-free-v2 .mf95-step1{left:0;width:calc(486 * var(--u))}
#membership-free-v2 .mf95-step2{left:calc(531 * var(--u));width:calc(490 * var(--u))}
#membership-free-v2 .mf95-step3{left:calc(1060 * var(--u));width:calc(492 * var(--u))}
#membership-free-v2 .mf95-arrow{position:absolute;top:calc(48 * var(--u));height:calc(88 * var(--u));object-fit:contain;pointer-events:none}
#membership-free-v2 .mf95-arrow1{left:calc(485 * var(--u));width:calc(47 * var(--u))}
#membership-free-v2 .mf95-arrow2{left:calc(1019 * var(--u));width:calc(45 * var(--u))}
#membership-free-v2 .mf95-sr{position:absolute!important;width:calc(1 * var(--u))!important;height:calc(1 * var(--u))!important;padding:0!important;margin:calc(-1 * var(--u))!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* 2026-09-07 実装時の修正
   strong を display:block にしているため、その後ろの <br> が空行を作り
   「はそのまま付与」が1行分下がって注記に重なっていた。 */
#membership-free-v2 .mf95-rp br{display:none}
#membership-free-v2 .mf95-rp span{margin-top:calc(2 * var(--u))}


/* -------------------------------------------------------------------------
   既存の同名セクションとの重複を避ける（表示の切り替えのみ。削除はしていない）
   ------------------------------------------------------------------------- */
/* 2026-09-08 PCの境目をサイト共通の 769px にそろえた（旧：1520px）。
   ①②③を同じ幅で必ず3点セットにするため。1519px以下でも縦積みにせず、
   キャンバスごと比例縮小する。戻すときは 769→1520 / 768→1519 に直す。 */
@media (min-width: 769px){
.ic-mfree .ic-mfree__canvas--pc{ display:none !important; }
}
@media (max-width: 768px){
#membership-free-v2{ display:none; }
}

/* 2026-09-07：画像をWebP化（<picture>）。PNGはフォールバックとして残す。
   picture を display:contents にすることで、img の絶対配置と height:100% の
   基準（.mf95-stage / .mf95-step）が従来どおりになり、レイアウトは一切変わらない。 */
#membership-free-v2 picture{display:contents}

/* =========================================================
   2026-09-08 完成見本（reference_original.png）へ戻した
   9/7 に入れた「囲みを54px下げる／カードの間隔を54pxにする」調整は、
   縦に間延びして完成見本から離れたため取り消しています。
   ・囲み      top 529px → 475px（設計パック原本の値）
   ・カード    top 814px → 724px（同上）
   ・ステージ／背景の高さ 1031px → 941px（同上）
   ・背景画像 background_clean.png / .webp も設計パック原本に差し戻し
     54px版の控え：/root/bk_bgclean_1031.png / .webp
   設計パックの保管先：/root/ref_pack/membershipfree_success95_v2/
   ========================================================= */


/* 2026-09-09 新しい #mf-cycle「メンバーシップ・フリーの考え方」を入れたため、
   内容が二重になるPC版のこのブロックは非表示にする。
   マークアップはHTMLに残してあるので、下の1行を消せばいつでも戻せる。 */
#membership-free-v2{ display:none !important; }