@charset "utf-8";

/* 施設掲載のご案内（templates/front/for_facility.html）。ボタンは member.css の .mb-btn、表は common.css の .sgn-table */
.ff-main{color:var(--mb-text, #454545)}
/* Safari は auto-phrase が効かないので text-wrap で1〜2文字の行を防ぐ（ミテクレの実測） */
.ff-wrap{max-width:960px;margin:0 auto;padding:0 24px;word-break:auto-phrase;text-wrap:pretty}
@media(max-width:480px){.ff-wrap{padding:0 16px}}

/* 261105d 一番上は玉井さんの見本（261104/zip_2306/「産後の家族と 施設をつなぐ.png」）：家の写真に白の丸文字、下は弧で薄いピンクの面へ。
   色は見本から拾った値がサイトの色と同じ（帯 #e85f73＝--primary・面 #fff4f7＝--primary-pale）。
   スマホ（768px 以下）はトップの .hero と同じく画面の高さ（100svh − ヘッダー 60px）に収め、写真の高さで調整する */
.ff-hero{display:flex;flex-direction:column;overflow:hidden;text-align:center;background:var(--primary-pale, #fff4f7)}
.ff-hero-photo{position:relative;display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-height:420px;padding:40px 16px 88px;overflow:hidden;background:#cfe3ee}
.ff-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.ff-hero-copy{position:relative;z-index:1}
/* 261105f 見本の大きさに合わせた（ミテクレの実測：見出し・リード・0円が11〜15%小さく、弧が半分の深さ・帯が高かった）
   見出し 12.4vw・行送り 1.45・帯は字の下 58% から少し下まで・左右に .3em。弧は幅 118%・高さ 150px（見本の弧の下がりから当てはめ） */
.ff-hero-title{margin:0;font-family:var(--sgn-font-head, 'Zen Maru Gothic', sans-serif);font-size:clamp(2.4rem, 12.4vw, 3.6rem);font-weight:900;line-height:1.45;letter-spacing:.04em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.ff-hero-line{display:block;white-space:nowrap}
.ff-hero-mark{margin-right:.1em;padding:0 .15em .1em .3em;border-radius:6px;background:linear-gradient(transparent 52%, var(--primary, #e85f73) 52%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ff-hero-lead{margin:12px 0 0;font-family:var(--sgn-font-head, 'Zen Maru Gothic', sans-serif);font-size:clamp(1.05rem, 5.9vw, 1.5rem);font-weight:900;letter-spacing:.08em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
/* 弧：下の薄いピンクの面を、写真の下の端へ上に膨らませて重ねる（両端で写真の下の端に届く） */
.ff-hero-cta{position:relative;padding:0 0 36px}
.ff-hero-cta::before{content:"";position:absolute;left:-9%;right:-9%;top:-70px;height:150px;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:var(--primary-pale, #fff4f7)}
.ff-hero-cta .ff-wrap{position:relative}
/* 261105s 「掲載は0円から始められます」と下の掲載施設数・掲載自治体数は、丸い書体をやめてページのほかの文字と同じ書体（--sgn-font-body）に（玉井さん 11/5 23:07）。
   文の太さは区画の見出し（.ff-h2）と同じ 700、「0円」と数字は 900 のまま */
.ff-hero-sub{margin:0;font-family:var(--sgn-font-body, 'Noto Sans JP', sans-serif);font-size:clamp(1.05rem, 5.6vw, 1.5rem);font-weight:700;line-height:1.3;letter-spacing:.04em;color:var(--sgn-ink-head, #323232)}
.ff-hero-sub strong{margin:0 .06em;font-size:clamp(2.4rem, 14vw, 3.6rem);font-weight:900;line-height:1;color:var(--primary, #e85f73)}
@media(max-width:768px){
  .ff-hero{min-height:calc(100svh - 60px)}
  .ff-hero-photo{min-height:280px;padding:28px 16px 84px}
  .ff-hero-cta .ff-actions{margin-top:18px}
}
/* 高さの低いスマホ（Safari のバーが出た iPhone SE など）は写真の余白を詰めて、ボタンを最初の画面に入れる */
@media(max-width:768px) and (max-height:600px){
  .ff-hero-photo{min-height:240px;padding:16px 16px 76px}
  .ff-hero-cta{padding-bottom:24px}
}
/* 261105i PC（769px 以上）は横長の写真（ff_hero_house_pc.webp・玉井さん 11/5 19:48）。白い文字の後ろがクリーム色の壁と明るい木部になり、
   769〜1280 で「全国の産後ケア施設を掲載」と見出しの素の部分が 3:1 を割った（ミテクレ）ので、文字の後ろだけ薄い暗幕を敷き影を強める。
   写真は上寄せ（center 42% のままだと 1360px 以上で屋根の頂点が切れた） */
@media(min-width:769px){
  .ff-hero-bg{object-position:center 26%}
  /* 261105m 769〜791px で見出しの右端の「と」が 2.97〜2.99（ミテクレ再検品）。楕円を横に広げ（50%→56%）、見出しの縁の影を強める */
  /* 261105n 見出しを1行にした分だけ横に長くなるので、楕円も 56%→64% に広げる */
  /* 261105q 1行の右端の「ぐ」が 1000〜1280px で 2.76〜2.99（ミテクレ）。楕円の外側（70%）を .12→.18、見出しにぼかしの影を1つ足す */
  .ff-hero-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 64% 62% at 50% 50%, rgba(0,0,0,.36), rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%)}
  /* 261105n 玉井さん 11/5 20:15「キャッチコピーを PC 版では改行を無くしたい」：見出しを「産後の家族と施設をつなぐ」の1行に（「全国の産後ケア施設を掲載」は次の行のまま）。
     769px でも写真の幅に収まるよう、字の大きさを画面の幅に合わせる（最大はスマホと同じ 3.6rem） */
  .ff-hero-title{font-size:clamp(2.4rem, 5.4vw, 3.6rem);white-space:nowrap;text-shadow:0 0 3px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.45)}
  .ff-hero-line{display:inline}
  .ff-hero-lead{text-shadow:0 0 2px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.55)}
}

.ff-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.ff-actions .mb-btn{min-width:min(100%,300px)}
@media(max-width:560px){.ff-actions .mb-btn{width:100%}}

.ff-sec{padding:44px 0}
/* 261104 申し込みフォームの「掲載プラン」（#ff-plans）から来たとき、見出しが上に貼り付くヘッダーに隠れないように。高さは column.css と同じ */
.ff-sec[id]{scroll-margin-top:108px}
@media(max-width:999px){.ff-sec[id]{scroll-margin-top:106px}}
@media(max-width:768px){.ff-sec[id]{scroll-margin-top:61px}}
/* 261101 ページの地は白（member.css）。帯はこの色のままで、トップと同じ白とピンクの交互（玉井さん 18:14） */
.ff-sec--tint{background:var(--primary-pale, #FFF5F8)}
.ff-cta{padding:48px 0;text-align:center;background:var(--primary-light, #FDE8EE)}
.ff-h2{margin:0 0 20px;text-align:center;font-size:1.35rem;font-weight:700;line-height:1.45;color:var(--sgn-ink-head, #323232);text-wrap:balance}
/* 261104e 区画の見出しの下に、トップの見出し（top.css の .section-divider）と同じ短いピンクのバー（玉井さん 11/4 21:08「全てのセクションで同じに」）
   「選べる3つの掲載プラン」の「3つ」のピンク（.ff-h2 em）はやめた（同じ便） */
.ff-h2::after{content:"";display:block;width:48px;height:3px;margin:12px auto 0;border-radius:3px;background:var(--primary)}
@media(max-width:768px){.ff-h2::after{width:40px;margin-top:10px}}
.ff-h3{margin:28px 0 12px;font-size:1.05rem;font-weight:700;line-height:1.5;color:var(--sgn-ink-head, #323232)}
.ff-text{margin:0 0 12px;font-size:.95rem;line-height:1.8}
/* 261105n 掲載施設数・掲載自治体数（玉井さん 11/5 20:15 の見本 261105/zip_2015/dc6b8dee….png）。
   見本の縦線は消す（同じ便）。字は見出しの丸文字、数字はサイトの濃いピンク（--primary-ink）、数字の下に薄いピンクの帯、右上に3本の線（見本の飾り）。
   261106b 数字の色を上の「0円」・プランの価格と同じ --primary に（玉井さん 11/6 10:18「26施設と1527自治体の色を他と合わせたい」）。
   PC は「見出し｜数字」を横に並べ、スマホ（480px 以下）は見出しの下に数字 */
.ff-stats{display:grid;grid-template-columns:auto auto;align-items:center;gap:14px 28px;width:fit-content;max-width:100%;margin:28px auto 8px}
/* 2段の見出しの列・数字の列をそろえる（段の div は並びに加わらない） */
.ff-stat{display:contents}
.ff-stat-lbl{margin:0;font-family:var(--sgn-font-body, 'Noto Sans JP', sans-serif);font-size:1.05rem;font-weight:700;letter-spacing:.06em;color:var(--sgn-ink-head, #323232)}
.ff-stat-num{margin:0}
.ff-stat-val{position:relative;isolation:isolate;display:inline-block;padding:0 .35em;font-family:var(--sgn-font-body, 'Noto Sans JP', sans-serif);font-size:1.7rem;font-weight:900;line-height:1.2;letter-spacing:.02em;color:var(--primary, #e85f73);white-space:nowrap}
.ff-stat-val strong{margin-right:.08em;font-size:2.1em;font-weight:900;font-variant-numeric:tabular-nums}
.ff-stat-val::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.12em;height:.55em;border-radius:999px;background:#fbdde4}
.ff-stat-val::after{content:"";position:absolute;top:-.5em;right:-.55em;width:.95em;height:.95em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23f08a9a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 2.5l1.6 7.5'/%3E%3Cpath d='M14 4.5l-4.6 6.8'/%3E%3Cpath d='M21 13l-8 1.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
@media(max-width:480px){
  .ff-stats{grid-template-columns:1fr;gap:2px;text-align:center}
  .ff-stat + .ff-stat .ff-stat-lbl{margin-top:16px}
  .ff-stat-lbl{font-size:1.05rem}
  .ff-stat-val{font-size:1.45rem}
}
/* 261105n 口コミへの取り組みの絵（玉井さん 11/5 20:15）。見出しと文の間・中央に
   261106b 区画が薄いピンクになった（同じ日の便）。絵は地が白い画像なので、デモ施設の画像（.ff-demo-fig）と同じ枠と角の丸みで白いカードに見せる */
.ff-review-fig{max-width:520px;margin:4px auto 16px;border:1px solid var(--mb-line, #eee3e7);border-radius:16px;overflow:hidden;line-height:0;background:#fff;box-shadow:0 6px 18px rgba(80,45,25,.06)}
.ff-review-fig img{display:block;width:100%;height:auto}
.ff-note{margin:12px 0 0;font-size:.85rem;line-height:1.7;color:var(--mb-sub, #5b6673)}
.ff-note-inline{font-size:.85em;color:var(--mb-sub, #5b6673)}

/* チェックの箇条。折り返しても文頭をそろえる
   261103 四角に白のチェック（玉井さんの見本）。色は --ff-box（既定は緑・プランのカードはプランの色）。白との差は 3:1 以上
   261104d ただしプロ（#ecb133・玉井さん 11/4 13:26 の指定の黄色）は白との差が 3:1 に届かない */
.ff-check{margin:0;padding:0;list-style:none}
.ff-check li{position:relative;margin:8px 0;padding-left:1.8em;font-size:.95rem;line-height:1.7}
.ff-check li::before{content:"";position:absolute;left:0;top:.3em;width:1.15em;height:1.15em;border-radius:4px;background:var(--ff-box, #3f9b94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/86% no-repeat}
/* 261103b 掲載するメリットはピンク（玉井さん 11/3 21:58）。261104i メリットはイラストのカードになり、今は掲載基準のカード（チェックはサイトの色・玉井さん 11/4 21:08） */
.ff-check--pink{--ff-box:var(--primary)}

/* 261108 掲載するメリットは玉井さん 11/7 20:42 の見本（「掲載するメリット v2（PC）」「（SP）」）：区画を分け、地は薄いピンクに左上・右下のぼかし。
   白いカード3枚の上の端に白い輪の丸い絵（150px・輪は絵に焼き込み）をまたがせ、POINT 0n・文・語の一部に薄いピンクの下線。
   PC はカードの間に白い丸の「›」、860px 以下は1列でカードの下に「∨」（飾り・読み上げない）。POINT は --primary-ink（白で 4.99:1）。
   英字はピンクのぼかしの上なので一段濃い #bd2f57（地 rgb(253,237,242) で 5.08:1・ミテクレ）。矢印は見本の大きさ（丸 40px）・高さ（カードの上から 32%）に */
.ff-sec--merit{background:radial-gradient(55% 60% at 0% 0%, #fbe0e8 0%, rgba(251,224,232,0) 100%), radial-gradient(50% 55% at 100% 100%, #f9d6e0 0%, rgba(249,214,224,0) 100%), #fff6f8}
.ff-eyebrow{margin:0 0 6px;text-align:center;font-size:.8rem;font-weight:700;line-height:1.4;letter-spacing:.24em;color:#bd2f57}
.ff-mrt-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:0;padding:80px 0 0;list-style:none}
.ff-mrt{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:94px 16px 30px;border-radius:24px;background:#fff;box-shadow:0 10px 28px rgba(232,95,115,.1);text-align:center}
.ff-mrt-ic{position:absolute;top:-78px;left:50%;width:150px;height:auto;margin-left:-75px}
.ff-mrt-no{margin:0 0 10px;font-size:.85rem;font-weight:700;line-height:1.4;letter-spacing:.16em;color:var(--primary-ink, #ca3660)}
.ff-mrt-tx{margin:0;font-size:1.15rem;font-weight:700;line-height:1.85;color:var(--sgn-ink-head, #323232)}
.ff-mrt-mk{background:linear-gradient(transparent 62%, #f9cdd9 62%)}
/* 口コミ・予約の札（前のカードの .ff-merit-tag と同じ色。文字と地の差 8.9:1） */
.ff-mrt-tag{margin:12px 0 0;padding:2px 10px;border-radius:8px;background:#fbeaf0;font-size:.75rem;line-height:1.4;color:#72243e}
.ff-mrt:not(:last-child)::after{content:"";position:absolute;top:32%;right:-44px;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5l5 5-5 5' fill='none' stroke='%23e85f73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 2px 8px rgba(232,95,115,.12)}
@media(max-width:860px){
  .ff-mrt-list{grid-template-columns:minmax(0,1fr);gap:132px;max-width:420px;margin:0 auto}
  .ff-mrt:not(:last-child)::after{top:auto;right:auto;bottom:-43px;left:50%;width:32px;height:32px;margin:0 0 0 -16px;background-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23e85f73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}

/* 261108 こんな施設におすすめは玉井さん 11/7 20:42 の見本（cec23ddb….png・スマホの形だけ）：区分名のピンクの帯を絵の上の端に重ね、絵の下に業種の1行。
   文字の大きさ・色・書体はサイトに合わせる（同じ便）。帯は白い文字なので大きい字（1.2rem・太字。--primary と白は 3.33:1＝大きい字の 3:1 を満たす）。
   業種は --primary-ink（白で 4.99:1）。PC（769px 以上）は2つを横並び（玉井さん 11/8 00:07 ③） */
.ff-kinds{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:520px;margin:0 auto}
@media(min-width:769px){.ff-kinds{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:none}}
.ff-kind-grp{display:flex;flex-direction:column;min-width:0}
.ff-kind-h{position:relative;z-index:1;align-self:center;min-width:80%;max-width:calc(100% - 24px);margin:0 0 -20px;padding:7px 20px;border-radius:10px;background:var(--primary, #e85f73);text-align:center;font-size:1.2rem;font-weight:700;line-height:1.5;letter-spacing:.04em;color:#fff}
.ff-kind-fig{margin:0;border-radius:16px;overflow:hidden;line-height:0}
.ff-kind-fig img{display:block;width:100%;height:auto}
.ff-kind-names{margin:12px 0 0;text-align:center;font-size:.95rem;font-weight:700;line-height:1.6;color:var(--primary-ink, #ca3660)}

/* 261108 掲載できる施設・掲載基準は白い枠（カード）を外し、白い地にそのまま置く（玉井さん 11/8 00:07 ②）。
   見出しはピンクの文字＋区画の見出し（.ff-h2）と同じ短いバー、チェックはサイトのピンク（.ff-check--pink）のまま。幅は前のカードと同じ 688px */
.ff-crit{max-width:688px;margin:40px auto 0}
.ff-crit-h{margin:0 0 12px;text-align:center;font-size:1.05rem;font-weight:700;line-height:1.5;color:var(--primary-ink, #ca3660)}
.ff-crit-h::after{content:"";display:block;width:48px;height:3px;margin:12px auto 0;border-radius:3px;background:var(--primary)}
@media(max-width:768px){.ff-crit-h::after{width:40px;margin-top:10px}}
.ff-crit .ff-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--mb-line, #eee3e7)}
/* 枠が無くなり、PC で左に寄った箇条が中央の見出しとずれて見えたので、箇条のかたまりを中央へ（ミテクレ。注記は 688px の左寄せのまま） */
@media(min-width:769px){.ff-crit .ff-check{width:fit-content;margin:0 auto}}

/* 261104c 掲載までの流れは、玉井さんの HTML（11/4 11:01）と同じ「白い箱を下向きの矢印でつなぐ」形（玉井さん 11/4 13:26「数字のタイムラインをやめて HTML のボックスに」）。
   ①②は中身のある箱（角丸 16px）、③〜⑤は見出しだけの小さな箱（角丸 12px）。番号は見出しの文字。色・ボタンはサイトの部品のまま
   261104d クラスを .ff-flowbox に（.ff-box は上の「掲載できる施設・掲載基準」の緑の箱の名前で、後に書いた白い箱の指定が緑の地と枠まで変えていた）。
   見本に寄せて、③〜⑤は左右 16px 内側（見本の .shared）、見出しは①②と③〜⑤の差を見本（19px／15px）に近づけ、矢印は見本の .dn と同じく箱のあいだを線でつなぎ三角の先を下の箱に当てる（ミテクレ） */
/* 261104e 箱5つを同じ幅に（①②を③〜⑤の幅 688px に合わせる・玉井さん 11/4 21:08）。③〜⑤の左右 16px の内側寄せはやめ、見出しの位置も①②とそろえる */
/* 261105i ①の点を丸の真下にした分（文の幅 624→604px）で、①の1つ目の文（42字・約618px）が PC で2行に割れた（ミテクレ）。
   箱5つを同じ幅のまま 704px にして1行に戻す（⑤の1行の余りも 0.5px→16px に） */
.ff-boxflow{max-width:704px;margin:0 auto}
/* 261104b 下の※注記も箱と同じ幅にそろえる（ミテクレ：770px 以上で注記の左端が枠より左に出ていた） */
.ff-boxflow + .ff-note{max-width:704px;margin-left:auto;margin-right:auto}
.ff-boxflow-list{margin:0;padding:0;list-style:none}
.ff-flowbox{position:relative;padding:22px 24px 20px;border:1px solid var(--mb-line, #eee3e7);border-radius:16px;background:#fff}
.ff-flowbox--node{padding:12px 24px;border-radius:12px}
/* 箱と箱のあいだ（18px）を縦の線（18px）でつなぎ、下向きの三角（7px）の先を下の箱の枠に当てる（見本の .dn） */
.ff-flowbox + .ff-flowbox{margin-top:18px}
.ff-flowbox + .ff-flowbox::before{content:"";position:absolute;left:50%;bottom:calc(100% + 1px);width:2px;height:18px;margin-left:-1px;background:#9a8790}
.ff-flowbox + .ff-flowbox::after{content:"";position:absolute;left:50%;bottom:100%;margin-left:-5px;border:5px solid transparent;border-top:7px solid #9a8790;border-bottom:0}
/* 261104e 見出しは5つとも左寄せ。番号は施設詳細の「利用の流れ」（common.css の .sgn-flow-step::before）と同じピンクの丸に白い数字（玉井さん 11/4 21:08） */
.ff-flowbox-title{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:.95rem;font-weight:700;line-height:1.6;text-align:left;color:var(--sgn-ink-head, #323232)}
.ff-flowbox:not(.ff-flowbox--node) .ff-flowbox-title{font-size:1.15rem;line-height:1.5}
.ff-flownum{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:50%;background:var(--sgn-head-accent, #e85f73);color:#fff;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ff-flowbox:not(.ff-flowbox--node) .ff-flownum{margin-top:1px}
.ff-flowbox .ff-step-actions{text-align:center}
/* 261104e ①の印は、絵（.ff-point-ic）をやめてピンクの点（玉井さん 11/4 21:08） */
.ff-points{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
/* 261105i 玉井さん 11/5 19:48「①の・を①の下に並べたい」：点（6px）を番号の丸（26px）の中心の真下へ（左に 10px）、
   文の頭は見出しの文字の頭（丸 26px＋間 10px＝36px）にそろえる（点の右の間 20px） */
.ff-points li{display:flex;gap:20px;align-items:flex-start;font-size:.92rem;line-height:1.8;color:var(--mb-text, #454545)}
.ff-points li::before{content:"";flex:none;width:6px;height:6px;margin-top:calc(.9em - 3px);margin-left:10px;border-radius:50%;background:var(--primary)}
.ff-step-actions{margin-top:16px}
/* 261104b ①のボタンもほかの節（.ff-actions）と同じ最小幅に */
.ff-step-actions .mb-btn{min-width:300px}
.ff-branch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.ff-branch-col{display:flex;flex-direction:column}
.ff-branch-lbl{margin:0 0 6px;font-size:.85rem;font-weight:700;text-align:center;color:var(--primary-ink, #ca3660)}
/* 261104b 片方だけ2行になる幅（561〜649px）でも、2つのボタンの高さをそろえる */
.ff-branch .mb-btn{flex:1;width:100%}
/* 261104b 「お問い合わせフォーム」を途中で折らない（.ff-wrap の auto-phrase で「お問い／合わせ」と折れていた） */
.ff-nw{white-space:nowrap}
.ff-step-note{margin:10px 0 0;font-size:.85rem;line-height:1.8;color:var(--mb-sub, #5b6673)}
.ff-step-note a{font-weight:700;color:var(--primary-ink, #ca3660);text-decoration:underline}
/* 261105f 玉井さん「改行なし」：①の3つの文と②の注記は、.ff-wrap の text-wrap:pretty（Safari が行をそろえて右に3割空く）と
   auto-phrase（Chrome が句の前で早めに折る）をやめて行の端まで流す。文末の「〜ます。」だけは .ff-nw で折らない（1〜2字の行を作らない） */
.ff-points li > span, .ff-flowtext{word-break:normal;text-wrap:wrap}
@media(max-width:560px){
  .ff-flowbox{padding:20px 16px 18px}
  .ff-flowbox--node{padding:12px 16px}
  .ff-branch{grid-template-columns:minmax(0,1fr)}
  .ff-step-actions .mb-btn{width:100%;min-width:0}
}

/* 261103 カードは上（色）・下（白）の2段。色はプランごとの変数で持つ */
.ff-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media(max-width:920px){.ff-plans{grid-template-columns:minmax(0,1fr);gap:36px}}
.ff-plan{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--ff-plan-line);border-radius:14px;background:#fff}
/* 261103b 無料は緑。サイトの緑（施設詳細・検索の「助成金」の札と同じ #2d9b7f・地 #edf8f4）、文字は白と地に 4.5:1 以上の #127a6c（common.css の口コミの緑） */
.ff-plan--free{--ff-plan-tint:#edf8f4;--ff-plan-line:#2d9b7f;--ff-box:#2d9b7f;--ff-plan-ink:#127a6c;--ff-plan-price:#127a6c}
.ff-plan--free .mb-btn--secondary{border-color:var(--ff-plan-line);color:var(--ff-plan-ink)}
.ff-plan--free .mb-btn--secondary:hover{border-color:var(--ff-plan-ink);background:var(--ff-plan-tint);color:var(--ff-plan-ink)}
.ff-plan--std{--ff-plan-tint:var(--primary-pale, #fff4f7);--ff-plan-line:var(--primary);--ff-box:var(--primary);--ff-plan-ink:var(--primary-ink, #ca3660);--ff-plan-price:var(--primary)}
/* 261104 プロの価格とボタンは PRO の画像の黄 #ecb133（玉井さん 11/4 11:01）
   261104c 「先着3施設限定」「PRO｜プロプラン」・チェックの印・「プロで申し込む」も 5,000円と同じ #ecb133、ボタンの文字は白（玉井さん 11/4 13:26「白で統一したいので、読みやすさを見てから調整させてください」） */
.ff-plan--pro{--ff-plan-tint:#fff8e6;--ff-plan-line:#efc35a;--ff-box:#ecb133;--ff-plan-ink:#ecb133;--ff-plan-price:#ecb133}
.ff-plan--pro .mb-btn--primary{background:#ecb133;color:#fff;box-shadow:0 2px 8px rgba(196,133,10,.25)}
.ff-plan--pro .mb-btn--primary:hover{background:#dda21f;color:#fff}
.ff-plan--rec{border-width:2px}
/* 3列のとき色の段の高さをそろえる（無料は税込の行が無い・921〜939px はスタンダードの名前が2行）。subgrid の無いブラウザは今までの縦の並び */
@supports (grid-template-rows:subgrid){
  .ff-plans{grid-template-rows:auto auto}
  .ff-plan{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
.ff-plan-head{padding:26px 20px 16px;border-radius:12px 12px 0 0;background:var(--ff-plan-tint);text-align:center}
.ff-plan-body{display:flex;flex:1;flex-direction:column;padding:18px 20px 22px}
.ff-plan .mb-btn{margin-top:auto}
/* 261103b プランごとの画像（玉井さんの 1600×900 相当の横長）。261104 枠は上の段の薄い色（--ff-plan-tint・玉井さん 11/4 11:01） */
.ff-plan-fig{margin:0 0 16px;border:1px solid var(--ff-plan-tint);border-radius:10px;overflow:hidden;line-height:0}
.ff-plan-fig img{display:block;width:100%;height:auto}
.ff-plan .ff-check{margin-bottom:16px}
.ff-plan .ff-note{margin:0 0 16px}
.ff-plan-badge{position:absolute;top:-13px;left:50%;z-index:1;margin:0;padding:2px 14px;border-radius:999px;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap;transform:translateX(-50%)}
.ff-plan--rec .ff-plan-badge{top:-14px}
/* 261104c 「先着3施設限定」はスタンダードの「おすすめ」と同じ形（地の色・白い文字）で、地を #ecb133 に
   261104d 前の白地のときの枠（1.5px）を外す（残っていて「おすすめ」より 2px 高かった・ミテクレ） */
.ff-plan--pro .ff-plan-badge{border:0;background:#ecb133;color:#fff}
.ff-plan-name{margin:0;font-size:.95rem;font-weight:700;color:var(--ff-plan-ink)}
.ff-plan-catch{margin:4px 0 10px;font-size:.85rem;line-height:1.6;color:var(--mb-sub, #5b6673)}
.ff-plan-price{margin:0;font-size:.9rem}
.ff-plan-price strong{font-size:1.6rem;color:var(--ff-plan-price)}
.ff-plan-price span{display:block;font-size:.85rem;color:var(--mb-sub, #5b6673)}
/* 261108 「＼今だけ30日間無料／」「＼市区町村ごとに先着3施設限定／」（玉井さん 11/7 20:42「目立たせたい」・目立たせ方は任された）：
   前の灰色の小さい注記（.ff-note）をやめ、中央寄せ・太字・プランの文字の色。1行に収まるよう、字の大きさをカードの白い段の幅に合わせる（cqi・最大 1.1rem）。
   プロの黄 #ecb133 は白で 1.93:1 なので、文字は同じ系統の濃い色 #9a6700（4.87:1） */
.ff-plan-body{container-type:inline-size}
.ff-plan-hl{margin:0 0 16px;text-align:center;font-size:.9rem;font-size:min(1.1rem, 6.2cqi);font-weight:700;line-height:1.5;white-space:nowrap;color:var(--ff-plan-hl-ink, var(--ff-plan-ink))}
.ff-plan--pro{--ff-plan-hl-ink:#9a6700}

/* 261103b 「無料プランから始められます」ほかの3区画は消した（玉井さん 11/3 22:21） */
.ff-text--center{text-align:center}
/* 261103b 実際の掲載ページを見る：デモ施設のスマホの画面（見本 9.37.56 の並び：文 → 画面 → ボタン） */
.ff-demo-fig{max-width:300px;margin:20px auto 0;border:1px solid var(--mb-line, #eee3e7);border-radius:16px;overflow:hidden;line-height:0;box-shadow:0 6px 18px rgba(80,45,25,.06)}
.ff-demo-fig img{display:block;width:100%;height:auto}

.ff-compare{min-width:560px}
.ff-compare thead th,.ff-compare td{text-align:center}
.ff-compare tbody th,.ff-compare thead th:first-child{text-align:left}
.ff-soon{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;background:#f1eef0;font-size:.7rem;font-weight:400;color:var(--mb-sub, #5b6673)}
/* スマホは common.css で nowrap になり見出し列が広がるので、行見出しだけ折り返して最初から STANDARD まで見せる */
@media(max-width:560px){.ff-compare{min-width:420px}.ff-compare th:first-child{width:10em;white-space:normal}.ff-soon{margin-left:0}}

/* 261103 よくあるご質問（玉井さんの見本 9.30.06）：1つの枠を線で区切り、左にピンクの虫めがね・右にピンクの下向きの矢印
   261104 虫めがねを「Q」に、開いて出る答えの頭に「A」（玉井さん 11/4 11:01） */
.ff-faq{border:1px solid var(--mb-line, #eee3e7);border-radius:12px;background:#fff;overflow:hidden}
.ff-faq details{border-bottom:1px solid var(--mb-line, #eee3e7)}
.ff-faq details:last-child{border-bottom:0}
.ff-faq summary{display:flex;align-items:flex-start;gap:10px;min-height:52px;padding:13px 16px;list-style:none;font-size:.95rem;font-weight:700;line-height:1.6;cursor:pointer}
.ff-faq summary::-webkit-details-marker{display:none}
.ff-faq summary::before,
.ff-faq summary::after{content:"";flex:none;width:18px;height:18px;margin-top:.2em;background:center/contain no-repeat}
.ff-faq summary::before{content:"Q";height:auto;margin-top:0;font-size:1.05rem;line-height:1.5;text-align:center;color:var(--primary, #e85f73)}
.ff-faq summary::after{margin-left:auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23e85f73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .2s}
.ff-faq details[open] summary::after{transform:rotate(180deg)}
.ff-faq p{position:relative;margin:0;padding:0 16px 16px 44px;font-size:.9rem;line-height:1.8}
.ff-faq p::before{content:"A";position:absolute;top:-.1em;left:16px;width:18px;font-size:1.05rem;font-weight:700;line-height:1.7;text-align:center;color:var(--mb-sub, #5b6673)}