@charset "UTF-8";

/* 購入までの流れ（flow/）：WEB-flow.pdf のデザイン。.bf の中だけに効かせる
   緑＝30代（お子様2人）夫婦、ピンク＝50代ご夫婦 */
.bf { --fl-yellow: #ffe599; --fl-olive: #a8904e; --fl-ink: #333; --fl-red: #e0402c; --fl-green: #d9e598; --fl-green-badge: #9aa84a; --fl-green-pill: #b3be33; --fl-green-mark: #e6f0b4; --fl-pink: #f8cebb; --fl-pink-badge: #d9705b; --fl-pink-pill: #e05a3c; --fl-pink-mark: #fbd5c8; --fl-line: #e6e6e6; color: var(--fl-ink); font-family: 'YakuHanMP', 'Zen Old Mincho', 'Yu Mincho', serif; letter-spacing: .06em; line-height: 1.9; }
.bf *, .bf *::before, .bf *::after { box-sizing: border-box; }
:where(.bf) :where(p, h2, h3, h4, ol, li) { margin: 0; padding: 0; }
:where(.bf) ol { list-style: none; }
.bf img { max-width: 100%; height: auto; display: block; }
.bf-red { color: var(--fl-red); }
.bf-sans, .bf-step__period, .bf-start__label, .bf-merit__badge, .bf-merit__tag { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }

/* ---- 導入 ---- */
.bf-hero { background: var(--fl-yellow); text-align: center; padding: 70px 16px 0; }
.bf-hero__title { font-weight: 500; display: inline-block; padding-bottom: 14px; position: relative; }
.bf-hero__title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 140px; margin-left: -70px; border-bottom: 1px solid #333; }
.bf-hero__sub { margin-top: 18px; }
.bf-hero__visual { width: min(560px, 92%); margin: 28px auto 0; position: relative; }
.bf-hero__visual::before { position: absolute; left: 50%; top: 0; width: 76%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #fff; z-index: 0; }
.bf-hero__visual img { position: relative; z-index: 1; margin: 0 auto; padding-top: 6%; }
.bf-hero__lead { margin-top: 18px; }
.bf-hero__mc { margin-top: 46px; }

/* タブ（MODEL CASE） */
.bf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 900px; margin: 14px auto 0; }
.bf-tab { appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; color: #fff; background: var(--fl-olive); border-radius: 8px 8px 0 0; padding: 14px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .2s; }
.bf-tab__name { letter-spacing: .06em; line-height: 1.5; margin: auto 0; /* 名前の行数が左右で違っても NOW・SWITCH・▼ は下端で揃える */ }
.bf-tab__state { letter-spacing: .1em; }
.bf-tab__state::after { content: ""; display: block; width: 0; height: 0; margin: 4px auto 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; }
.bf-tab.is-active { background: #fff; color: var(--fl-ink); border: 1px solid #b9b3a3; border-bottom: 0; cursor: default; }
.bf-tab:not(.is-active):hover { background: #96803f; }
.bf-tab:focus, .bf-tab:focus-visible { outline: none; }

/* ---- モデルケース ---- */
.bf-cases { background: #fff; padding: 56px 16px 90px; }
.bf-case { max-width: 900px; margin: 0 auto; }
.bf-case--green { --c-blob: var(--fl-green); --c-badge: var(--fl-green-badge); --c-pill: var(--fl-green-pill); --c-mark: var(--fl-green-mark); }
.bf-case--pink { --c-blob: var(--fl-pink); --c-badge: var(--fl-pink-badge); --c-pill: var(--fl-pink-pill); --c-mark: var(--fl-pink-mark); }
.bf-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; max-width: 900px; margin: 0 auto 60px; }
.bf-intro__catch { letter-spacing: .08em; }
.bf-mark { background: linear-gradient(transparent 55%, var(--c-mark) 55%); padding: 0 .1em; }
.bf-intro__img { justify-self: center; width: min(100%, 440px); }

/* STEP（ジグザグ。間を斜めの灰色の線でつなぐ） */
.bf-steps { position: relative; margin: 0 auto; }
.bf-step { position: relative; display: grid; }
.bf-step + .bf-step::before { content: ""; position: absolute; width: 16px; margin-left: -8px; background: var(--fl-line); border-radius: 8px; transform: rotate(40deg); z-index: 0; }
.bf-step--l + .bf-step--r::before { transform: rotate(-40deg); }
.bf-step--r .bf-step__visual { order: 2; }
.bf-step__visual { position: relative; z-index: 1; }
.bf-step__blob { position: absolute; background: var(--c-blob); border-radius: 58% 42% 52% 48% / 52% 58% 42% 48%; }
.bf-step--r .bf-step__blob { border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%; }
.bf-step__no { position: absolute; z-index: 2; text-align: center; font-family: 'EB Garamond', serif; letter-spacing: .04em; }
.bf-step__no span { display: block; }
.bf-step__period { position: absolute; z-index: 2; background: var(--c-badge); color: #fff; line-height: 1.4; text-align: center; }
.bf-step__img { position: absolute; z-index: 1; object-position: center bottom; }
.bf-step__title { font-weight: 500; line-height: 1.6; }
.bf-start { text-align: center; }
.bf-start__label { background: var(--c-pill); color: #fff; font-weight: 700; }
.bf-start__img { margin: 18px auto 0; }

/* ---- メリット ---- */
.bf-merit { background: var(--fl-yellow); padding: 84px 16px 60px; }
.bf-merit__box { position: relative; max-width: 900px; margin: 0 auto; background: #fff; padding: 56px clamp(18px, 6vw, 56px) 42px; }
.bf-merit__badge { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.bf-merit__en { font-size: 32px; font-weight: 900; font-style: italic; letter-spacing: .04em; line-height: 1; }
.bf-merit__ja { position: relative; }
.bf-merit__ja::before, .bf-merit__ja::after { content: ""; position: absolute; background: #333; }
.bf-merit__ja::before { transform: rotate(-40deg); }
.bf-merit__ja::after { transform: rotate(40deg); }
.bf-merit__title { text-align: center; font-weight: 500; letter-spacing: .08em; line-height: 1.5; margin: 6px 0 30px; }
.bf-merit__line { display: block; }
.bf-merit__tag { display: inline-block; background: var(--fl-red); color: #fff; letter-spacing: .06em; }
.bf-merit__em { color: var(--fl-red); }
.bf-merit__cols { display: grid; grid-template-columns: 1.12fr 1fr; gap: 28px; align-items: start; }
.bf-merit__text .bf-merit__note { margin-top: 14px; }
.bf-merit__photo { width: 100%; }

/* ---- CTA ---- */
.bf-cta { background: url(../../modelroom/img/img_modelroom01.jpg) center 60% / cover no-repeat; padding: 56px 16px; }
.bf-cta__box { margin: 0 auto; background: rgba(255, 255, 255, .97); border-radius: 22px; padding: 46px clamp(16px, 4vw, 42px) 50px; text-align: center; }
.bf-cta__title { display: inline-block; font-weight: 500; letter-spacing: .08em; padding-bottom: 12px; position: relative; }
.bf-cta__title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 120px; margin-left: -60px; border-bottom: 1px solid #333; }
.bf-cta__sub { margin-top: 18px; }
.bf-cta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.bf a.bf-btn { position: relative; display: flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none; transition: opacity .2s; }
.bf-btn:hover { opacity: .85; }
.bf-btn::after { content: ""; position: absolute; right: 16px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; }
.bf-btn::before { content: ""; position: absolute; right: 16px; top: 50%; width: 15px; height: 1.5px; margin-top: -1px; background: #fff; transform: rotate(-45deg); transform-origin: right center; }
.bf-btn--visit { background: linear-gradient(90deg, #b5171d, #e2242a 55%, #b5171d); }
.bf-btn--req { background: linear-gradient(90deg, #155f2c, #2a8a43 55%, #155f2c); }
.bf-btn__icon { width: 14px; height: 13px; border: 1.5px solid #fff; border-radius: 2px; position: relative; }
.bf-btn__icon--cal::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1.5px solid #fff; }
.bf-btn__icon--mail::before { content: ""; position: absolute; left: 1px; top: -2px; width: 9px; height: 9px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }

/* ---- スマホ ---- */
@media (max-width: 767px) {
  .bf-hero { padding-top: 48px; }
  .bf-hero__lead { font-size: 13px; text-align: left; }
  .bf-hero__lead br { display: none; }
  .bf-tabs { gap: 8px; }
  .bf-tab { padding: 10px 6px 8px; }
  .bf-tab__name { font-size: 14px; }
  .bf-cases { padding: 40px 16px 64px; }
  .bf-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .bf-step { grid-template-columns: 1fr; gap: 6px; padding: 10px 0 26px; }
  .bf-step--r .bf-step__visual { order: 0; }
  .bf-step__visual { width: min(100%, 340px); margin: 0 auto; }
  .bf-step--r .bf-step__body { padding-left: 0; }
  .bf-step + .bf-step::before { display: none; }
  .bf-step__body { width: min(100%, 340px); margin: 0 auto; }
  .bf-merit__cols { grid-template-columns: 1fr; }
  .bf-cta__btns { grid-template-columns: 1fr; }
}
.bf-merit__photo { aspect-ratio: 5 / 3; object-fit: cover; }

/* ---- コンテンツの幅：lifestyle（.life__inner／.ts__inner）と同じ最大 1100px、左右の余白 50px（768px 以下は 20px） ---- */
.bf-hero, .bf-cases, .bf-merit, .bf-cta { padding-left: 50px; padding-right: 50px; }
.bf-tabs, .bf-case, .bf-intro, .bf-merit__box { max-width: 1100px; }

/* PDF で STEP の列は中身の約8割 */
.bf-cta__box { max-width: 900px; }
@media screen and (max-width: 768px) {
  .bf-hero, .bf-cases, .bf-merit, .bf-cta { padding-left: 20px; padding-right: 20px; }
}

/* ボタン右の矢印（↗）：線2本の組み合わせだとずれるため、1つの SVG で描く */
.bf a.bf-btn::before { content: none; }
.bf a.bf-btn::after { content: ""; position: absolute; top: 50%; border: 0; transform: none; }

/* CTA のボタン：サイトのヘッダーの来場予約・資料請求と同じ素材（布の背景 img/top/btn001・002.jpg、アイコン img/common/icon_*.svg） */
.bf a.bf-btn { font-family: 'YakuHanMP', 'Zen Old Mincho', 'Yu Mincho', serif; font-weight: 600; font-size: 19px; letter-spacing: .12em; height: 58px; gap: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.bf a.bf-btn--visit { background: url(../../img/top/btn001.jpg) center / cover no-repeat; }
.bf a.bf-btn--req { background: url(../../img/top/btn002.jpg) center / cover no-repeat; }
.bf .bf-btn__icon { border: 0; border-radius: 0; background-color: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.bf .bf-btn__icon::before { content: none; }
.bf .bf-btn__icon--cal { --icon: url(../../img/common/icon_reserve.svg); }
.bf .bf-btn__icon--mail { --icon: url(../../img/common/icon_mail.svg); }
.bf a.bf-btn::after { width: 15px; height: 15px; margin-top: -7.5px; right: 22px; background: #fff; -webkit-mask: url(../../img/common/icon_arrow-tr.svg) center / contain no-repeat; mask: url(../../img/common/icon_arrow-tr.svg) center / contain no-repeat; }
.bf .bf-btn__icon { width: 26px; height: 26px; }

/* PDF と同じく文字の高さくらいに */

/* 導入のイラスト：白い丸（土台）を絵の下端より少し上で切り、人物が白い土台から少し下にはみ出すように */
.bf-hero__visual { overflow: visible; }
.bf-hero__visual::before { content: none; }
.bf-hero__base { position: absolute; left: 12%; right: 12%; top: 0; overflow: hidden; z-index: 0; }
.bf-hero__base::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.bf-hero__base { bottom: clamp(4px, .8vw, 8px); }

/* はみ出しは少しだけ（22px は下になりすぎ、とユーザー） */

/* ---- 文字の大きさ：他のページ（lifestyle・location）の実測に合わせる ----
   大見出し 34px（SP 26px）／小見出し 32px（SP 18〜24px）／中見出し 20〜22px（SP 17〜18px）
   本文 16px・行間1.9（SP 15px・行間2）／ラベル 14px／英字の見出し 17px／注記 11〜12px */
.bf-hero__title { font-size: 34px; letter-spacing: .1em; }
.bf-hero__sub { font-size: 20px; }
.bf-hero__lead { font-size: 16px; line-height: 1.9; }
.bf-tab__name { font-size: 20px; }
.bf-tab__state { font-size: 13px; }
.bf-intro__body { font-size: 16px; line-height: 1.9; }
.bf-step__text { line-height: 1.9; }
.bf-merit__text p { font-size: 16px; line-height: 1.9; }
.bf-merit__text .bf-merit__note { font-size: 11px; }
.bf-cta__title { font-size: 28px; }
.bf-cta__sub { font-size: 18px; }
@media screen and (max-width: 768px) {
  .bf-hero__title { font-size: 26px; }
  .bf-hero__sub { font-size: 17px; }
  .bf-hero__lead { font-size: 15px; line-height: 2; }
  .bf-tab__name { font-size: 15px; }
  .bf-tab__state { font-size: 12px; }
  .bf-intro__body, .bf-step__text, .bf-merit__text p { font-size: 15px; line-height: 2; }
  .bf-step__title { font-size: 18px; }
  .bf-step__period { font-size: 13px; }
  .bf-cta__title { font-size: 20px; }
  .bf-cta__sub { font-size: 16px; }
}

/* 複数行の文章は両端そろえ（PC のリード文は改行位置を決めた中央そろえなので除く） */
.bf-intro__body, .bf-step__text, .bf-merit__text p { text-align: justify; text-justify: inter-character; }
@media screen and (max-width: 767px) {
  .bf-hero__lead { text-align: justify; text-justify: inter-character; }
}

/* 黄色と白の境目に、白いタブの枠と同じ細い罫線。タブボタンが線の上にかぶさり、ボタンの下には線を出さない */
.bf-hero { border-bottom: 1px solid #b9b3a3; }
.bf-tabs { position: relative; z-index: 1; margin-bottom: -1px; }
.bf-tab { border-bottom: 0; }
.bf-tab:not(.is-active) { box-shadow: 0 1px 0 var(--fl-olive); }

/* オリーブのタブの下の線を隠す */
.bf-tab:not(.is-active):hover { box-shadow: 0 1px 0 #96803f; }
.bf-tab.is-active { box-shadow: 0 1px 0 #fff; }

/* 白いタブの下は本文とつながる */

/* MODEL CASE：少し大きく、タブとの間を少し広げる */
.bf-hero__mc { font-size: 20px; letter-spacing: .12em; margin-bottom: 8px; }
.bf-tabs { margin-top: 22px; }
@media screen and (max-width: 768px) {
  .bf-hero__mc { font-size: 17px; margin-bottom: 4px; }
  .bf-tabs { margin-top: 16px; }
}

/* ---- STEP の各コーナーのバランス：PDF の見本（ブロブの幅を基準にした比率）に合わせる ----
   ブロブ：行の約42%・高さは幅の0.97倍／数字：幅の19%・「STEP」6.5%／期間ラベル：幅35%・高さ10%
   イラスト：幅の83%で、ブロブの53%の位置から外へはみ出す／見出しは本文の約2倍 */
.bf-steps { max-width: 960px; }
.bf-step { grid-template-columns: 42% 1fr; gap: 0; padding: 0; margin-top: -2%; align-items: center; }
.bf-step:first-child { margin-top: 0; }
.bf-step__visual { aspect-ratio: 1 / .97; container-type: inline-size; overflow: visible; }
.bf-step__blob { inset: 0; }
.bf-step__no { left: 17cqw; top: 30%; font-size: 19cqw; line-height: .95; }
.bf-step__no span { font-size: .34em; letter-spacing: .12em; margin-bottom: .1em; }
.bf-step__period { left: 11cqw; top: 63%; font-size: 5.2cqw; border-radius: 1.6cqw; letter-spacing: .02em; }
.bf-step__img { left: 53cqw; right: auto; width: 83cqw; bottom: 15%; object-fit: contain; }
.bf-step--r .bf-step__no { left: auto; right: 17cqw; }
.bf-step--r .bf-step__period { left: auto; right: 11cqw; }
.bf-step--r .bf-step__img { left: auto; right: 53cqw; }
.bf-step__body { padding-left: 33%; }
.bf-step--r .bf-step__body { padding-left: 4%; padding-right: 30%; }
.bf-step__title { font-size: 32px; letter-spacing: .08em; margin-bottom: 12px; }
.bf-step__text { font-size: 16px; }
.bf-step + .bf-step::before { top: -6%; left: 47%; height: 130px; }
@media screen and (max-width: 767px) {
  .bf-step { grid-template-columns: 1fr; margin-top: 0; padding-bottom: 30px; }
  .bf-step__visual { width: min(76%, 300px); margin: 0 auto 0 4%; }
  .bf-step--r .bf-step__visual { margin: 0 4% 0 auto; }
  .bf-step__img { width: 70cqw; left: 40cqw; }
  .bf-step--r .bf-step__img { right: 40cqw; }
  .bf-step__body, .bf-step--r .bf-step__body { padding: 14px 0 0; width: 100%; }
  .bf-step__title { font-size: 22px; }
}
.bf-step--r { grid-template-columns: 1fr 42%; }

/* 右側に並ぶ STEP もブロブは行の42%（左と同じ大きさ） */
.bf-step--r .bf-step__body { order: 1; }
.bf-step__img { max-height: 92cqw; }

/* 縦長の絵（建物など）はブロブの高さくらいまで */
@media screen and (max-width: 767px) {
  .bf-step--r { grid-template-columns: 1fr; }
  .bf-step--r .bf-step__body { order: 2; }
}
.bf-step__period { width: auto; min-width: 35cqw; padding: 1.6cqw 2.6cqw; white-space: nowrap; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-weight: 700; }

/* サイト共通の CSS はスマホ幅で #wrap * を明朝にする。PDF でゴシックのラベル類だけはスマホでもゴシックに */
#wrap .bf .bf-step__period, #wrap .bf .bf-start__label, #wrap .bf .bf-merit__badge, #wrap .bf .bf-merit__badge *, #wrap .bf .bf-merit__tag { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }

/* STEP ごとのイラストの大きさ・位置（PDF 見本から測った値。left/right はブロブの端から、bottom はブロブの下から） */
.bf-step__img[src$="s30-1.svg"] { left: 53cqw; width: 83cqw; bottom: 15%; }
.bf-step__img[src$="s30-2.svg"] { right: 43cqw; width: 96cqw; bottom: 12%; }
.bf-step__img[src$="s30-3.svg"] { left: 62cqw; width: 70cqw; bottom: 14%; max-height: 100cqw; }
.bf-step__img[src$="s30-4.svg"] { right: 54cqw; width: 86cqw; bottom: 7%; }
.bf-step__img[src$="s30-5.svg"] { left: 53cqw; width: 77cqw; bottom: 17%; }
.bf-step__img[src$="s30-7.svg"] { left: 48cqw; }
@media screen and (max-width: 767px) {
  .bf-step__img[src*="/s"] { width: 74cqw; }
  .bf-step--l .bf-step__img[src*="/s"] { left: 40cqw; right: auto; }
  .bf-step--r .bf-step__img[src*="/s"] { right: 40cqw; left: auto; }
}

/* 「いよいよ道後での新生活がスタート！」：PDF では STEP の列の約7割の幅の大きな帯 */
.bf-start { margin-top: 60px; }
.bf-start__label { display: block; width: min(76%, 730px); margin: 0 auto; padding: 14px 20px; font-size: 32px; line-height: 1.4; letter-spacing: .06em; border-radius: 26px; }
@media screen and (max-width: 768px) {
  .bf-start { margin-top: 30px; }
  .bf-start__label { width: 100%; font-size: 19px; padding: 10px 12px; border-radius: 16px; }
}
.bf-step__img[src$="s30-6.svg"] { width: 74cqw; right: 50cqw; bottom: 8%; }

/* 少し小さく（85→74cqw、ユーザー指示） */
.bf-step__img[src$="s30-7.svg"] { width: 76cqw; bottom: 0; }

/* 下げて少し小さく（86→76cqw・下7%→0、ユーザー指示） */
.bf-start__img { width: min(94%, 820px); margin-top: 24px; }

/* 新生活のイラストを大きめに（520→820px、帯より少し広く。ユーザー指示） */
@media screen and (max-width: 768px) {
  .bf-start__img { width: 100%; margin-top: 14px; }
}

/* MERIT の見出しまわり：PDF 見本に合わせる */
.bf-merit { padding-top: 90px; }
.bf-merit__box { padding-top: 64px; }
#wrap .bf .bf-merit__en { font-family: "Hiragino Sans", "Arial Black", sans-serif; font-weight: 900; font-style: normal; font-size: 34px; letter-spacing: .06em; line-height: 1; }
.bf-merit__ja { font-size: 16px; font-weight: 700; padding: 0 48px; }
.bf-merit__ja::before, .bf-merit__ja::after { top: -26px; height: 52px; width: 1.5px; }
.bf-merit__ja::before { left: 10px; }
.bf-merit__ja::after { right: 10px; }
.bf-merit__title { margin-top: 16px; }
.bf-merit__line { font-size: 24px; }
.bf-merit__tag { padding: .05em .5em; margin: 0 .35em; font-size: 1em; }
.bf-merit__line--big { font-size: 30px; margin-top: 14px; }
.bf-merit__em { font-size: 1.5em; background: linear-gradient(transparent 42%, #fff100 42%); padding: 0 .12em; margin: 0 .15em; }
@media screen and (max-width: 768px) {
  #wrap .bf .bf-merit__en { font-size: 28px; }
  .bf-merit__ja { font-size: 14px; padding: 0 36px; }
  .bf-merit__line { font-size: 18px; }
  .bf-merit__line--big { font-size: 22px; }
}
#wrap .bf .bf-merit__tag, .bf .bf-merit__tag { font-family: 'YakuHanMP', 'Zen Old Mincho', 'Yu Mincho', serif; font-weight: 500; }

/* PDF では明朝 */

/* 「MERIT!」はロゴ画像（img/merit.svg、ユーザー支給） */
.bf-merit__logo { display: block; width: auto; height: 34px; margin: 0 auto; }
@media screen and (max-width: 768px) {
  .bf-merit__logo { height: 28px; }
}
.bf img.bf-merit__logo { height: 34px; width: auto; }

/* .bf img の height:auto より強く */
@media screen and (max-width: 768px) {
  .bf img.bf-merit__logo { height: 26px; }
}

/* 「MERIT!」と「パークナード道後公園のメリット」の間（ロゴの下＋間隔12pxの半分）が、白い枠の上の端に来るように：top = -(ロゴの高さ＋6px) */
.bf-merit__badge { top: -40px; }
.bf-merit__ja { margin-top: 12px; }
@media screen and (max-width: 768px) {
  .bf-merit__badge { top: -32px; }
}

/* 50代の STEP のイラスト：PDF 見本（50代版）から測った値 */
.bf-step__img[src$="s50-1.svg"] { left: 45cqw; width: 91cqw; bottom: 14%; }
.bf-step__img[src$="s50-2.svg"] { right: 40cqw; width: 81cqw; bottom: 10%; }
.bf-step__img[src$="s50-3.svg"] { left: 61cqw; width: 67cqw; bottom: 16%; max-height: 100cqw; }
.bf-step__img[src$="s50-4.svg"] { right: 51cqw; width: 89cqw; bottom: 13%; }

/* 50代の新生活（ウォーキング）は帯より大きく：帯の約1.36倍 */
.bf-case--pink .bf-start__img { width: min(100%, 990px); }

/* 両タブの新生活のイラストを同じボリュームに（縦横比がほぼ同じなので幅をそろえる） */
.bf .bf-start__img, .bf .bf-case--pink .bf-start__img { width: min(100%, 880px); }

/* 残金決済・お引き渡し：50代（s50-5）も 30代（s30-7）と同じ位置・大きさに（絵の縦横比も同じ） */
.bf-step__img[src$="s50-5.svg"] { left: 48cqw; width: 76cqw; bottom: 0; }

/* ケース導入のタイトル：大きめに。「」の言葉を大きく、続く言葉は一回り小さく（PDF の組み方） */
.bf-intro__lead { font-size: 28px; letter-spacing: .12em; }
.bf-intro__catch { font-size: 46px; line-height: 1.4; margin: 10px 0 26px; }
.bf-intro__after { font-size: .68em; letter-spacing: .1em; }
@media screen and (max-width: 768px) {
  .bf-intro__lead { font-size: 20px; }
  .bf-intro__catch { font-size: 32px; }
}

/* スマホ：STEP06 のイラストが「STEP 06」に重なるので左へ寄せて少し小さく */
@media screen and (max-width: 767px) {
  .bf-step--r .bf-step__img[src$="s30-6.svg"] { right: 47cqw; width: 68cqw; }
}