/* =========================================================================
   メンバーシップ・フリー「入会をご希望されたときの流れ」
   2026-09-07　GPT設計パック membership_free_95_package を実装
   ─ 3層分離 ─
     層1 背景   ：hero_blur.webp（ぼかし背景）／hero_woman.webp（人物）
     層2 テキスト：見出し・リード・本文・STEP・条件（すべてHTMLテキスト）
     層3 装飾   ：金の飾り罫・STEP番号・矢印・カード枠・アイコン（SVG/CSS）

   ■ 既存サイトへの影響を出さないための決まり
     ・すべてのセレクタを .membership-free-section の配下に限定している
     ・html / body / * / h1〜h4 など、共通の要素セレクタは一切触らない
     ・既存クラスと衝突しないよう、クラス名はすべて mfx- で始めている

   ■ 拡大縮小のしくみ
     設計原寸は 1600×1024。--u が「設計上の1px」にあたる。
     .mfx-page をコンテナに指定し、--u:0.0625cqw（＝幅の1/1600）としているので、
     画面幅が1600pxより狭くなると、文字も写真も装飾も同じ比率で自動的に縮む。
     最大は1600pxで頭打ち。横スクロールは発生しない。
     768px以下（スマートフォン）は、この方式をやめて縦積みに切り替える。
   ========================================================================= */

.membership-free-section{
  width:100%;
  margin:0;
  padding:0;
  background:#fffaf1;
  overflow:hidden;
}
.membership-free-section .mfx-page{
  container-type:inline-size;
  --u:0.0625cqw;
  --cream:#fffaf2; --brown:#4a1f14; --gold:#d89424; --gold2:#f1bb54;
  --red:#e12424; --ink:#17233b;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  position:relative;
  background:linear-gradient(180deg,#fffbf5 0%,#fff8ed 55%,#fffdf8 100%);
  font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  font-feature-settings:"palt" 1;
  color:var(--ink);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.membership-free-section .mfx-page *{ box-sizing:border-box; }
.membership-free-section p{ margin:0; }

/* ================= 上段：ヒーロー ================= */
.membership-free-section .mfx-hero{
  position:relative;
  height:calc(425 * var(--u));
  overflow:hidden;
  background:#fffaf1;
}
.membership-free-section .mfx-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    /* 2026-09-08 見本と実測で比べたところ、白いかぶせが右へ寄りすぎていて
       写真が見本より約70px右からしか出ていなかった。区切りを 38%→28% / 56%→41% に前倒しした。 */
    linear-gradient(90deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.72) 28%,rgba(255,251,245,.12) 41%,rgba(255,244,222,.04) 100%),
    url("../assets/mf95/hero_blur.webp") center / cover no-repeat;
}
.membership-free-section .mfx-hero-photo{
  position:absolute; right:0; top:0; z-index:1;
  /* 写真は原寸863×420で置く。拡大すると文字がにじみ、縮めると端の文言が切れるため。 */
  width:calc(896 * var(--u)); height:calc(436 * var(--u));
  background:url("../assets/mf95/hero_woman.webp") center / 100% 100% no-repeat;
  /* 2026-09-08 左端のぼかしを外した。
     元写真 hero_woman.webp は、焼き込まれた「こんな素敵な旅、」の
     鉤括弧が画像の左端（x=0）から始まっている。左からぼかすと必ず
     この鉤括弧が消えるため。元写真の左端は空と靄で明るく、
     ぼかしが無くても背景となじむことを確認済み。 */
  -webkit-mask-image:none; mask-image:none;
}
.membership-free-section .mfx-hero-left{
  position:absolute; z-index:3;
  left:calc(58 * var(--u)); top:calc(18 * var(--u));
  width:calc(760 * var(--u));
}
.membership-free-section .mfx-eyebrow{
  margin:0 0 calc(4 * var(--u)) calc(118 * var(--u));
  font-size:calc(24 * var(--u)); line-height:1.3; font-weight:600;
  letter-spacing:.06em; color:#2a1f18; white-space:nowrap;
}
/* 金の飾り罫（層3） */
.membership-free-section .mfx-orn{
  position:relative; height:calc(26 * var(--u));
  margin:0 0 calc(6 * var(--u)) calc(20 * var(--u));
  width:calc(440 * var(--u));
}
.membership-free-section .mfx-orn span{
  position:absolute; left:0; right:0; top:0; height:calc(26 * var(--u));
  border-top:calc(2 * var(--u)) solid var(--gold); border-radius:50%;
}
.membership-free-section .mfx-orn::before,
.membership-free-section .mfx-orn::after{
  content:""; position:absolute; top:calc(-2 * var(--u));
  width:calc(96 * var(--u)); border-top:calc(2 * var(--u)) solid var(--gold); border-radius:50%;
}
.membership-free-section .mfx-orn::before{ left:calc(-18 * var(--u)); transform:rotate(-4deg); }
.membership-free-section .mfx-orn::after{ right:calc(-18 * var(--u)); transform:rotate(4deg); }

.membership-free-section .mfx-title{
  position:relative; margin:0; white-space:nowrap;
  padding-bottom:calc(14 * var(--u));
  font-size:calc(54 * var(--u)); line-height:1.3; font-weight:800;
  letter-spacing:.005em; color:var(--brown);
  text-shadow:0 calc(2 * var(--u)) 0 rgba(255,255,255,.75);
}
/* 見出しの下側の飾り罫（見本は上下2本ある） */
.membership-free-section .mfx-title::after{
  content:""; position:absolute; left:calc(-4 * var(--u)); width:calc(470 * var(--u));
  bottom:0; height:calc(20 * var(--u));
  border-bottom:calc(2 * var(--u)) solid var(--gold); border-radius:50%;
}
.membership-free-section .mfx-lead{
  margin:calc(28 * var(--u)) 0 calc(18 * var(--u));
  font-size:calc(22 * var(--u)); line-height:1.75; font-weight:700; color:#211a17;
}
.membership-free-section .mfx-body{
  font-size:calc(20 * var(--u)); line-height:1.75; color:#0f2341; letter-spacing:.01em;
}

/* 写真の上に置く手書き風メッセージ（層2＝HTMLテキスト）
   ※2026-09-07 時点の申し送り：
     支給された hero_woman.webp には、この4つの文言が すでに写真へ焼き込まれています。
     そのままHTMLテキストを重ねると二重に表示されるため、暫定でHTML側を非表示にしています。
     文字の入っていない写真をいただければ、下の display:none を外すだけで
     層2（HTMLテキスト）に戻せます。マークアップは削除していません。 */
.membership-free-section .mfx-msg{ display:none; }
.membership-free-section .mfx-msg{
  position:absolute; z-index:4; margin:0;
  color:#112044; line-height:1.42; letter-spacing:.06em;
  text-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(255,255,255,.92);
}
.membership-free-section .mfx-msg--main{
  left:calc(730 * var(--u)); top:calc(30 * var(--u));
  font-size:calc(27 * var(--u)); font-weight:500; transform:rotate(-5deg);
}
.membership-free-section .mfx-msg--main::after{
  content:""; position:absolute; left:calc(24 * var(--u)); right:calc(-16 * var(--u));
  bottom:calc(-6 * var(--u));
  border-top:calc(2 * var(--u)) solid var(--gold); border-radius:60%; transform:rotate(-3deg);
}
.membership-free-section .mfx-msg--sub{
  left:calc(712 * var(--u)); top:calc(160 * var(--u));
  font-size:calc(17 * var(--u)); font-weight:500; transform:rotate(-5deg);
}
.membership-free-section .mfx-msg--en{
  right:calc(96 * var(--u)); top:calc(30 * var(--u));
  font-size:calc(26 * var(--u)); line-height:1.35; letter-spacing:.02em;
  color:#b67b41; opacity:.9; transform:rotate(-7deg);
  font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Apple Chancery",cursive;
}
.membership-free-section .mfx-msg--side{
  right:calc(38 * var(--u)); top:calc(238 * var(--u));
  font-size:calc(19 * var(--u)); line-height:1.5; color:#173760; text-align:left;
  border-left:calc(3 * var(--u)) solid var(--gold);
  padding-left:calc(16 * var(--u));
  background:rgba(255,255,255,.22);
}

/* ================= 帯の見出し（中段・下段の共通） ================= */
.membership-free-section .mfx-h{
  position:relative; margin:0; text-align:left;
  font-size:calc(34 * var(--u)); line-height:1.1; font-weight:800;
  letter-spacing:.03em; color:var(--brown);
}
.membership-free-section .mfx-h span{
  display:inline-block; white-space:nowrap;
  background:#fff9ef; border:calc(1.5 * var(--u)) solid var(--gold2);
  border-radius:calc(28 * var(--u));
  padding:calc(10 * var(--u)) calc(56 * var(--u)) calc(12 * var(--u));
  box-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(190,128,20,.10);
}
.membership-free-section .mfx-h::before,
.membership-free-section .mfx-h::after{
  content:""; position:absolute; top:50%;
  height:calc(1.5 * var(--u)); background:var(--gold); opacity:.7;
}

/* ================= 中段：入会をご希望されたときの流れ ================= */
.membership-free-section .mfx-flow{
  position:relative;
  padding:calc(16 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
  background:linear-gradient(180deg,#fffcf8 0%,#fff7ec 100%);
}
.membership-free-section .mfx-flow .mfx-h{
  width:calc(640 * var(--u)); margin-left:calc(64 * var(--u));
}
.membership-free-section .mfx-flow .mfx-h::before{ left:calc(-60 * var(--u)); width:calc(70 * var(--u)); }
.membership-free-section .mfx-flow .mfx-h::after{ right:calc(-14 * var(--u)); width:calc(110 * var(--u)); }
.membership-free-section .mfx-flow-intro{
  position:absolute; left:calc(728 * var(--u)); top:calc(26 * var(--u));
  right:calc(10 * var(--u)); width:auto;
  font-size:calc(18 * var(--u)); line-height:1.6; color:#203256; text-align:left;
}
.membership-free-section .mfx-flow-intro::after{
  content:""; position:absolute; right:calc(-10 * var(--u)); bottom:calc(-14 * var(--u));
  width:calc(140 * var(--u)); border-top:calc(2 * var(--u)) solid var(--gold); border-radius:50%;
}
.membership-free-section .mfx-steps{
  position:relative;
  list-style:none; margin:calc(18 * var(--u)) 0 0;
  /* 2026-09-08 見本と実測で比べたところ、4枚のカード列が左右に広がりすぎていた。
     見本は x51〜1549（1600px換算）、実装は x8〜1592。
     左右に 43px ずつ余白を入れて見本に合わせる。
     これでカード1枚の幅が386→364、写真の幅が376→353になり、
     見本の写真（354×149）とほぼ同じ縦横比になる。 */
  padding:0 calc(43 * var(--u));
  --g:calc(14 * var(--u));
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  align-items:stretch; gap:var(--g);
}
.membership-free-section .mfx-step{
  position:relative;
  background:rgba(255,255,255,.9);
  border:calc(1.5 * var(--u)) solid #ecc585;
  border-radius:calc(8 * var(--u));
  padding:calc(10 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  box-shadow:0 calc(5 * var(--u)) calc(18 * var(--u)) rgba(162,111,30,.08);
  text-align:center;
}
.membership-free-section .mfx-num{
  position:absolute; left:calc(10 * var(--u)); top:calc(10 * var(--u));
  width:calc(46 * var(--u)); height:calc(46 * var(--u)); border-radius:50%;
  background:linear-gradient(135deg,#e7ad42,#c27a16); color:#fff;
  font-size:calc(24 * var(--u)); line-height:calc(46 * var(--u)); text-align:center;
  font-weight:700; box-shadow:0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(143,92,16,.18);
}
.membership-free-section .mfx-step h4{
  margin:0 0 calc(8 * var(--u)); padding:0 0 0 calc(58 * var(--u));
  min-height:calc(46 * var(--u)); display:flex; align-items:center;
  font-size:calc(24 * var(--u)); line-height:1.3; font-weight:800;
  color:#0d2445; letter-spacing:.01em; white-space:nowrap; text-align:left;
}
.membership-free-section .mfx-step img{
  display:block; width:100%; height:calc(150 * var(--u));
  object-fit:cover; object-position:50% 50%;
  border-radius:calc(4 * var(--u)); margin:0 auto calc(10 * var(--u));
  box-shadow:0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.07);
}
.membership-free-section .mfx-step p{
  font-size:calc(20 * var(--u)); line-height:1.75; letter-spacing:-.005em; color:#172a4d;
}
.membership-free-section .mfx-step strong{ color:var(--red); font-weight:800; }
.membership-free-section .mfx-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:0; height:0;
  border-top:calc(13 * var(--u)) solid transparent;
  border-bottom:calc(13 * var(--u)) solid transparent;
  border-left:calc(19 * var(--u)) solid #e09a34;
}
/* 2026-09-08 カード列に左右の余白を入れたので、矢印3本の位置も実測で置き直した。
   カードの隙間の中央（.mfx-steps の内側から 404.5 / 782.5 / 1160.5）に合わせている。 */
.membership-free-section .mfx-steps > .mfx-arrow:nth-of-type(2){ left:calc(404.5 * var(--u)); }
.membership-free-section .mfx-steps > .mfx-arrow:nth-of-type(4){ left:calc(782.5 * var(--u)); }
.membership-free-section .mfx-steps > .mfx-arrow:nth-of-type(6){ left:calc(1160.5 * var(--u)); }

/* ================= 下段：メンバーシップ・フリーの条件 =================
   2026-09-07 差し替え：GPT設計パック membership_free_condition_1600_package
   設計原寸1600×204px。数値は --u（設計上の1px）で表しているので、
   画面幅が変わっても比率が崩れない。
   ==================================================================== */
.membership-free-section .mfx-cond{ display:none; }   /* 旧ブロックは残したまま非表示 */

.membership-free-section .mfc{
  position:relative;
  width:100%;
  height:calc(268 * var(--u));
  margin:0 auto;
  overflow:hidden;
  --mfc-gold:#d98a25; --mfc-red:#e21f1b; --mfc-text:#18233c; --mfc-title:#351413;
  background:
    radial-gradient(circle at 30% 5%, rgba(255,255,255,.96), rgba(255,248,232,.74) 44%, rgba(255,253,248,.94) 73%),
    linear-gradient(90deg,#fffefa 0%,#fffaf0 50%,#fffdfa 100%);
}
.membership-free-section .mfc-border{
  position:absolute; left:calc(43 * var(--u)); right:calc(47 * var(--u));
  top:calc(22 * var(--u)); bottom:calc(16 * var(--u));
  border:calc(2 * var(--u)) solid var(--mfc-gold); border-radius:calc(14 * var(--u));
  pointer-events:none;
}
.membership-free-section .mfc-title-wrap{
  position:absolute; left:calc(112 * var(--u)); top:0;
  width:calc(512 * var(--u)); height:calc(53 * var(--u));
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#fffdf8 0%,#fff5dc 70%,#fff1ce 100%);
  border:calc(1.6 * var(--u)) solid var(--mfc-gold);
  border-radius:0 0 calc(35 * var(--u)) calc(35 * var(--u));
  box-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(160,101,15,.10);
  z-index:3;
}
.membership-free-section .mfc-title{
  margin:0; padding:0 calc(12 * var(--u)) calc(4 * var(--u));
  font-size:calc(32 * var(--u)); line-height:1.3; letter-spacing:.04em;
  color:var(--mfc-title); font-weight:800; text-shadow:0 1px 0 #fff; white-space:nowrap;
}
.membership-free-section .mfc-flourish{
  position:absolute; top:calc(23 * var(--u));
  width:calc(147 * var(--u)); height:calc(33 * var(--u)); z-index:2;
}
.membership-free-section .mfc-flourish-left{ left:calc(-50 * var(--u)); }
.membership-free-section .mfc-flourish-right{ right:calc(-52 * var(--u)); }

.membership-free-section .mfc-grid{
  position:relative; z-index:2; height:100%;
  display:grid;
  grid-template-columns:calc(522 * var(--u)) calc(326 * var(--u)) calc(262 * var(--u)) calc(292 * var(--u));
  column-gap:calc(18 * var(--u));
  align-items:center;
  padding:calc(46 * var(--u)) calc(62 * var(--u)) calc(24 * var(--u)) calc(78 * var(--u));
}
.membership-free-section .mfc-lead{
  padding:calc(10 * var(--u)) 0 0;
  font-size:calc(20 * var(--u)); line-height:1.75; letter-spacing:.035em;
  font-weight:600; color:var(--mfc-text);
}
.membership-free-section .mfc-lead p,
.membership-free-section .mfc-item p{ margin:0; }
.membership-free-section .mfc-lead strong{ color:var(--mfc-red); font-weight:900; }

.membership-free-section .mfc-item{
  position:relative; min-height:calc(172 * var(--u));
  display:grid; grid-template-columns:calc(84 * var(--u)) 1fr; grid-template-rows:auto 1fr;
  column-gap:calc(12 * var(--u)); align-content:center;
  padding:0 calc(10 * var(--u)) 0 calc(18 * var(--u));
}
.membership-free-section .mfc-item::before{
  content:""; position:absolute; left:calc(-14 * var(--u)); top:calc(-20 * var(--u));
  width:1px; height:calc(210 * var(--u));
  background:linear-gradient(180deg,transparent 0%,rgba(217,138,37,.82) 22%,rgba(217,138,37,.82) 76%,transparent 100%);
}
.membership-free-section .mfc-item::after{
  content:""; position:absolute; left:calc(-19 * var(--u)); top:calc(88 * var(--u));
  width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:50%;
  background:var(--mfc-gold); box-shadow:0 0 0 calc(4 * var(--u)) rgba(217,138,37,.12);
}
.membership-free-section .mfc-item--referral::before,
.membership-free-section .mfc-item--referral::after{ display:none; }
.membership-free-section .mfc-item--referral{ padding-left:calc(6 * var(--u)); }
.membership-free-section .mfc-item--referral .mfc-ic{ margin-top:calc(-2 * var(--u)); }

.membership-free-section .mfc-ic{
  grid-row:1 / span 2;
  width:calc(66 * var(--u)); height:calc(58 * var(--u));
  justify-self:center; align-self:start; object-fit:contain; margin-top:calc(2 * var(--u));
}
.membership-free-section .mfc-ic--wallet{ width:calc(72 * var(--u)); height:calc(56 * var(--u)); }
.membership-free-section .mfc-ic--coins{ width:calc(76 * var(--u)); height:calc(59 * var(--u)); }

.membership-free-section .mfc-main{ align-self:start; padding-top:calc(2 * var(--u)); text-align:left; }
.membership-free-section .mfc-label{
  font-size:calc(15 * var(--u)); line-height:1.6; letter-spacing:.03em;
  font-weight:700; color:var(--mfc-text);
}
.membership-free-section .mfc-value{
  margin-top:calc(2 * var(--u)) !important;
  font-size:calc(24 * var(--u)); line-height:1; letter-spacing:.03em;
  font-weight:900; color:var(--mfc-red);
}
.membership-free-section .mfc-note{
  grid-column:1 / span 2; justify-self:center; width:100%;
  margin-top:calc(8 * var(--u)) !important; text-align:center;
  font-size:calc(15 * var(--u)); line-height:1.6; letter-spacing:.02em;
  font-weight:600; color:var(--mfc-text);
}
.membership-free-section .mfc-item--rp{ grid-template-columns:calc(72 * var(--u)) 1fr; padding-left:calc(12 * var(--u)); padding-right:calc(4 * var(--u)); }
.membership-free-section .mfc-rp{
  padding-top:calc(11 * var(--u));
  font-size:calc(20 * var(--u)); line-height:1.3; letter-spacing:.04em;
  font-weight:700; color:var(--mfc-text); white-space:nowrap;
}
.membership-free-section .mfc-rp span{ color:var(--mfc-red); font-size:calc(24 * var(--u)); font-weight:900; letter-spacing:.02em; }

/* =========================================================================
   1519px以下（スマートフォン＋幅の狭いPC）
   このデザインの原寸は1600px。それより狭い画面では全体が比例縮小されるため、
   1519px以下では本文が15px未満になり、50〜70代には読めなくなる。
   （例：1200pxでは STEP本文が12.4px）
   そこで1519px以下では比例縮小をやめ、読める大きさの縦積みに切り替える。
   PCの狭い画面では1カラムが間延びしないよう、最大900pxで中央に寄せる。
   文字サイズはプロジェクトのスマホ統一ルールに合わせる。
     大見出し28px／中見出し25px／小見出し22px／リード20px／本文17px／注記14px
   横スクロールは発生させない。
   ========================================================================= */
/* 2026-09-08 縦積みをやめた：1519px → 768px に変更。②は768px以下では
   非表示なので、この中身は事実上使われない。戻すときは 768→1519 に直す。 */
@media (max-width: 768px){
  .membership-free-section .mfx-page{ --u:1px; max-width:900px; }

  /* ---- ヒーロー ---- */
  .membership-free-section .mfx-hero{ height:auto; padding:0 0 18px; }
  .membership-free-section .mfx-hero-bg{ display:none; }
  .membership-free-section .mfx-hero-photo{
    position:relative; right:auto; top:auto;
    width:100%; height:auto; aspect-ratio:863/420;
    background-size:cover; background-position:center;
    -webkit-mask-image:none; mask-image:none;
  }
  .membership-free-section .mfx-hero-left{
    position:relative; left:auto; top:auto; width:auto;
    padding:20px 16px 0;
  }
  .membership-free-section .mfx-eyebrow{ margin:0 0 6px; font-size:17px; }
  .membership-free-section .mfx-orn{ width:200px; height:14px; margin:0 0 8px; }
  .membership-free-section .mfx-orn span{ height:14px; border-top-width:2px; }
  .membership-free-section .mfx-orn::before,
  .membership-free-section .mfx-orn::after{ width:44px; border-top-width:2px; top:-2px; }
  .membership-free-section .mfx-orn::before{ left:-8px; }
  .membership-free-section .mfx-orn::after{ right:-8px; }
  .membership-free-section .mfx-title{ font-size:28px; white-space:normal; line-height:1.3; padding-bottom:10px; }
  /* 見出し下の飾り罫はPC用の幅(600px)のままだと画面からはみ出すため、スマホ幅に合わせる */
  .membership-free-section .mfx-title::after{ width:200px; height:12px; border-bottom-width:2px; left:0; }
  .membership-free-section .mfx-lead{ margin:14px 0 12px; font-size:20px; line-height:1.65; }
  .membership-free-section .mfx-body{ font-size:17px; line-height:1.8; }

  /* ---- 帯の見出し ---- */
  .membership-free-section .mfx-h{
    width:auto !important; margin:0 0 12px !important; text-align:center; font-size:25px;
  }
  .membership-free-section .mfx-h span{
    white-space:normal; padding:9px 18px 11px; border-radius:22px; border-width:1.5px;
  }
  .membership-free-section .mfx-h::before,
  .membership-free-section .mfx-h::after{ display:none; }

  /* ---- 流れ ---- */
  .membership-free-section .mfx-flow{ padding:22px 14px 6px; }
  .membership-free-section .mfx-flow-intro{
    position:static; width:auto; margin:0 0 16px; font-size:17px; line-height:1.75;
  }
  .membership-free-section .mfx-flow-intro::after{ display:none; }
  .membership-free-section .mfx-flow-intro br{ display:none; }
  .membership-free-section .mfx-steps{
    display:block; margin:0; padding:0;
  }
  .membership-free-section .mfx-step{
    margin:0 0 10px; padding:16px 14px 14px; border-radius:12px; border-width:1.5px;
  }
  .membership-free-section .mfx-num{
    left:-6px; top:-6px; width:38px; height:38px; font-size:21px; line-height:38px;
  }
  .membership-free-section .mfx-step h4{ margin:0 0 10px; font-size:22px; white-space:normal; }
  .membership-free-section .mfx-step img{ height:auto; aspect-ratio:16/8; border-radius:6px; margin-bottom:10px; }
  .membership-free-section .mfx-step p{ font-size:17px; line-height:1.75; text-align:left; }
  .membership-free-section .mfx-step p br{ display:none; }
  .membership-free-section .mfx-arrow{
    position:static; transform:none; display:block; margin:0 auto 10px;
    border-left:13px solid transparent; border-right:13px solid transparent;
    border-top:19px solid #d98e2b; border-bottom:0;
  }

  /* ---- 条件 ---- */
  .membership-free-section .mfx-cond{ padding:22px 14px 26px; }
  .membership-free-section .mfx-cond-box{
    display:block; margin-top:0; border-radius:12px; border-width:1.5px;
  }
  .membership-free-section .mfx-cond-main{ display:block; padding:18px 16px 16px 26px; }
  .membership-free-section .mfx-cond-main::before{ left:12px; top:20px; width:5px; height:56px; border-radius:5px; }
  .membership-free-section .mfx-cond-main p{ font-size:17px; line-height:1.8; }
  .membership-free-section .mfx-cond-items{ display:block; }
  .membership-free-section .mfx-cond-item{
    border-left:0; border-top:1px solid #e1b36e; padding:16px 16px 14px;
  }
  .membership-free-section .mfx-cond-item::after{ display:none; }
  .membership-free-section .mfx-cond-item h4{ font-size:22px; line-height:1.4; margin:0 0 8px; }
  .membership-free-section .mfx-cond-item p{ font-size:17px; line-height:1.75; }
  .membership-free-section .mfx-ic{ width:40px; height:40px; margin-bottom:8px; }
}

/* =========================================================================
   1519px以下：メンバーシップ・フリーの条件（縦積み）
   設計パック同梱の縦積み指定を、当サイトの切り替え幅に合わせて適用する。
   文字サイズはスマホ統一ルール（小見出し22px／本文17px／注記14px）に合わせる。
   ========================================================================= */
/* 2026-09-08 縦積みをやめた：1519px → 768px に変更。②は768px以下では
   非表示なので、この中身は事実上使われない。戻すときは 768→1519 に直す。 */
@media (max-width: 768px){
  .membership-free-section .mfc{
    height:auto; overflow:visible; padding:16px 14px 18px;
    background:linear-gradient(180deg,#fffefa 0%,#fffaf0 60%,#fffdfa 100%);
  }
  .membership-free-section .mfc-border{ left:8px; right:8px; top:14px; bottom:14px; border-width:1.5px; border-radius:12px; }
  .membership-free-section .mfc-title-wrap{
    position:relative; left:auto; top:auto; width:calc(100% - 28px); height:auto;
    margin:0 auto 16px; padding:9px 10px 10px; border-radius:26px; border-width:1.5px;
  }
  .membership-free-section .mfc-title{ font-size:22px; letter-spacing:.02em; white-space:normal; padding:0 6px; }
  .membership-free-section .mfc-flourish{ display:none; }
  .membership-free-section .mfc-grid{ display:block; height:auto; padding:0 10px 4px; }
  .membership-free-section .mfc-lead{ padding:0 6px 12px; font-size:17px; line-height:1.8; letter-spacing:.01em; }
  .membership-free-section .mfc-item{
    display:grid; grid-template-columns:56px 1fr; min-height:0;
    padding:14px 8px; border-top:1px solid rgba(217,138,37,.32);
    column-gap:12px;
  }
  .membership-free-section .mfc-item--rp{ grid-template-columns:56px 1fr; padding-left:8px; }
  .membership-free-section .mfc-item::before,
  .membership-free-section .mfc-item::after{ display:none; }
  .membership-free-section .mfc-ic,
  .membership-free-section .mfc-ic--wallet,
  .membership-free-section .mfc-ic--coins{ width:48px; height:48px; margin-top:2px; }
  .membership-free-section .mfc-label{ font-size:16px; }
  .membership-free-section .mfc-value{ font-size:22px; margin-top:4px !important; }
  .membership-free-section .mfc-rp{ padding-top:4px; font-size:18px; }
  .membership-free-section .mfc-rp span{ font-size:24px; }
  .membership-free-section .mfc-note{ text-align:left; font-size:14px; line-height:1.7; margin-top:8px !important; }
}

/* =========================================================
   2026-09-08 スマートフォンのみ非表示にする
   「どのように活かすのか／メンバーシップ・フリー」
   （入会をご希望されたときの流れ 4ステップ ＋ メンバーシップ・フリーの条件）

   ・PC　　：表示する。
     　　　　「旅を続ける力になる」→ このパート →「仕組みの考え方」の
     　　　　3つで1パッケージ、というご指示のため。
   ・スマホ：非表示にする（768px以下）。
     　　　　スマホには元から同じ内容が3層構造（.ic-mfree__sp）の中にあり、
     　　　　このパートが縦並びで二重に入ってしまっていたため、元に戻す。
   憲法どおりHTMLからは削除していません。
   ========================================================= */
@media (max-width:768px){
  #membership-free-flow{ display:none !important; }
}


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