で包み、
そこに margin:0 auto・max-width:var(--article_size)・子の margin-bottom:1〜2em を付ける。FV の中ではこの箱を無いものとして扱う
（直下の子を flex で並べる CSS が、inner-container があっても効くようにする） */
.pb-fv .wp-block-group__inner-container { display: contents; }
.pb-fv figure { margin: 0; }
.pb-fv img { display: block; max-width: 100%; height: auto; }
/* ---- カード（絶対配置＋回転） ---- */
.pb-fv__card {
position: absolute;
z-index: 1;
margin: 0; /* SWELL の .swell-block-fullWide__inner > * { margin-bottom: 2em } を打ち消す */
max-width: none;
width: calc(var(--w) * var(--cs, var(--cs-pc, 1)));
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%) rotate(var(--r));
pointer-events: none;
filter: drop-shadow(0 .5cqw 1.2cqw rgba(60, 25, 0, .38));
}
.pb-fv__card img, img.pb-fv__card { width: 100%; height: auto; }
img.pb-fv__card { display: block; }
/* PC: 7 枚（ref のデュエマ背景を目安に、左右の四隅へ） */
.pb-fv__card--1 { --x: 4%; --y: 78%; --w: 15cqw; --r: -19deg; }
.pb-fv__card--2 { --x: 16%; --y: 17%; --w: 12cqw; --r: 9deg; }
.pb-fv__card--3 { --x: 5%; --y: 11%; --w: 9cqw; --r: -31deg; z-index: 0; }
.pb-fv__card--4 { --x: 25%; --y: 101%; --w: 12cqw; --r: 19deg; z-index: 0; }
.pb-fv__card--5 { --x: 88%; --y: 12%; --w: 11cqw; --r: 11deg; }
.pb-fv__card--6 { --x: 96%; --y: 52%; --w: 17cqw; --r: 17deg; }
.pb-fv__card--7 { --x: 95%; --y: 106%; --w: 11cqw; --r: -13deg; }
/* PC・タブレット（601px〜）: カードの位置・大きさは「幅 1280px の FV」を基準にした割合で決め、それより広い画面では 1280px の枠を左右の端に寄せて置く
（カードが中央の文字の列に入り込まない。--fx = 左端からの割合、右側のカード（5〜7）は右端からの割合。--wn = 幅の割合。どちらも 1280px 基準。GLP-BATCH-03）。
文字（見出し・小見出し・バッジ）にカードがかからない位置は、QA の fvcard 検査（768〜1920 の全幅）で確かめる */
@media (min-width: 601px) {
.pb-fv__card {
--ew: min(100cqw, 1280px);
left: calc(var(--fx) * var(--ew));
width: calc(var(--wn) * var(--ew) * var(--cs, var(--cs-pc, 1)));
}
.pb-fv__card--5, .pb-fv__card--6, .pb-fv__card--7 { left: calc(100cqw - (1 - var(--fx)) * var(--ew)); }
.pb-fv__card--1 { --fx: .03; --wn: .15; }
.pb-fv__card--2 { --fx: .16; --wn: .12; }
.pb-fv__card--3 { --fx: .05; --wn: .09; }
.pb-fv__card--4 { --fx: .27; --wn: .12; --y: 113%; } /* 下段（小見出しの真下）は、小見出しにかからないよう下に寄せて端だけ見せる */
.pb-fv__card--5 { --fx: .88; --wn: .11; }
.pb-fv__card--6 { --fx: .975; --wn: .15; } /* 丸バッジにかからないよう右端に寄せる */
.pb-fv__card--7 { --fx: .95; --wn: .11; }
}
/* ---- 中身 ---- */
.pb-fv__inner {
position: relative;
z-index: 2;
margin: 0 auto;
max-width: 1100px;
}
/* H1: 幅 W を font-size に持たせ、中の行はすべて em 基準 */
.pb-fv .pb-fv__title {
--tw: min(780px, 57vw);
font-size: var(--tw);
width: 1em;
max-width: 100%;
margin: 0 auto;
padding: 0;
line-height: 1;
font-weight: 900;
letter-spacing: 0;
text-align: center;
border: 0;
background: none;
}
.pb-fv .pb-fv__title::before, .pb-fv .pb-fv__title::after { content: none; }
.pb-fv__row { display: table; margin: 0 auto; } /* shrink-to-fit。縁取りレイヤー(::before/::after)の基準になる */
/* 1 行目: 黒い角丸の帯「PRICE BASE」＋「なら」 */
.pb-fv__row--lead {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: .008em;
margin-bottom: .025em;
font-size: 1em;
transform: none;
}
.pb-fv__brand {
/* 本番の実測: 帯の高さ ≒ 文字サイズ×1.7、左右の余白は文字の端から約 1em。帯の幅は文字に合わせて伸びる（固定幅にしない） */
display: inline-block;
padding: .26em .95em;
border-radius: 999px;
background: var(--pb-ink);
color: #fff;
font-family: "Montserrat", "M PLUS 1p", sans-serif;
font-weight: 800;
font-size: .057em;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
text-transform: uppercase;
}
.pb-fv__brand > span { display: inline-block; transform: skewX(-12deg); } /* 本番どおり斜体（約 12°）。フォントの italic は使わず skew で確実に傾ける */
.pb-fv__nara { font-size: .062em; letter-spacing: 0; } /* 白抜き＋太い黒縁（.pb-t--white）。PRICE BASE とほぼ同じ大きさ */
/* 2 行目: ジャンル名をまとめて（黄色）。--n（文字数の目安）で縮む */
.pb-fv__row--genre {
font-size: min(.12em, calc(.9em / (var(--n, 8) + .4)));
letter-spacing: -.045em;
margin-top: .005em;
margin-bottom: .01em;
}
/* 3 行目: 高額買取（オレンジ・特大） */
.pb-fv__row--main {
font-size: .235em;
letter-spacing: -.035em;
margin-top: .012em;
}
/* 詰めて送るだけ…（画像）＋ 丸バッジ */
.pb-fv__sub {
display: flex;
align-items: center;
justify-content: center;
gap: 2.2cqw;
margin: 8px auto 6px;
}
.pb-fv__lead { width: min(560px, 44cqw); flex: 0 1 auto; }
/* サブの 2 行（本物の文字）。本番は画像 top_title.png。文字の長さ（--sl）で縮み、赤の強調は b */
.pb-fv .pb-fv__lead--text {
--lw: min(560px, 44cqw);
display: flex; flex-direction: column; justify-content: center; gap: .08em;
width: var(--lw); min-height: 0;
font-size: calc(var(--lw) / var(--sl, 17));
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 900;
line-height: 1.22; letter-spacing: -.01em; text-align: left; white-space: nowrap;
color: #191a1e;
-webkit-text-stroke: .16em #fff; paint-order: stroke fill;
margin: 0;
}
.pb-fv .pb-fv__lead--text b { color: var(--pb-red); font-weight: 900; }
.pb-fv__l { display: block; }
.pb-fv__badges { display: flex; gap: 1.2cqw; align-items: center; flex: 0 0 auto; margin: 0; }
.pb-fv__badge { width: min(158px, 12.4cqw); }
/* =============================================================
SP（≤600px。本番の display-tablet/sp_only の境目に合わせる）
============================================================= */
@media (max-width: 600px) {
/* 本番 SP の FV 高さより長くしない。改修版 toreca-kaitori（pb-fvS・SP 393 幅）の FV は 314px（ヘッダー 56px の下）。新 FV もこの高さに合わせる（±10px） */
.pb-fv { background-image: var(--pb-fv-bg-sp); }
.pb-fv > .swell-block-fullWide__inner { padding: 24px 8px 20px; }
.pb-fv .pb-fv__title { --tw: min(348px, 92vw); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
/* 1 行目: 「PRICE BASE なら 〇〇をまとめて」を横一列に（本番 SP と同じ）。ジャンル名が長いとき（.pb-fv__title--2l）だけ 2 行 */
.pb-fv__row--lead { display: contents; }
.pb-fv__brand { font-size: .043em; margin-right: .006em; }
.pb-fv__nara { font-size: .05em; margin-right: .01em; }
.pb-fv__row--genre { font-size: min(.058em, calc(.5em / var(--n, 8))); margin: 0; letter-spacing: -.04em; }
.pb-fv .pb-fv__title--2l .pb-fv__row--genre { flex: 0 0 100%; justify-content: center; font-size: min(.09em, calc(.95em / (var(--n, 8) + .4))); margin-top: .01em; }
.pb-fv__row--main { flex: 0 0 100%; font-size: .225em; margin: .006em auto 0; }
.pb-fv__sub { flex-direction: column; gap: 12px; margin: 14px auto 0; }
.pb-fv .pb-fv__lead--text { --lw: min(280px, 76cqw); min-height: 45px; text-align: center; font-size: min(17px, calc(var(--lw) / var(--sl, 17))); } /* 改修版 toreca-kaitori（pb-fvS）のサブ画像 260×45 と同じ枠 */
.pb-fv__badges { gap: 16px; }
.pb-fv__badge { width: 84px; } /* 同: 丸バッジ 84px */
/* カード: 左右の端に縦に並べる（本番 SP と同様。タイトルの外側へ、半分ほど画面外） */
.pb-fv__card { --cs: var(--cs-sp, 1); filter: drop-shadow(0 1.2cqw 2.4cqw rgba(60, 25, 0, .38)); }
.pb-fv__card--1 { --x: 2%; --y: 14%; --w: 22cqw; --r: -14deg; z-index: 1; }
.pb-fv__card--2 { --x: 98%; --y: 12%; --w: 22cqw; --r: 13deg; z-index: 1; }
.pb-fv__card--3 { --x: -3%; --y: 52%; --w: 24cqw; --r: -8deg; z-index: 0; }
.pb-fv__card--4 { --x: 103%; --y: 54%; --w: 24cqw; --r: 9deg; z-index: 0; }
.pb-fv__card--5 { --x: 2%; --y: 94%; --w: 22cqw; --r: -12deg; z-index: 1; }
.pb-fv__card--6 { --x: 98%; --y: 96%; --w: 22cqw; --r: 14deg; z-index: 1; }
.pb-fv__card--7 { display: none; }
}
/* =============================================================
短い FV 帯（.pb-fvb）: 買取表ページの一番上に載せる、高さを抑えた版
ジャンル名＋カード3枚＋丸バッジ＋申込ボタン。縁取り文字（.pb-t）は上と共通
============================================================= */
.pb-fvb {
--pb-fv-bg-pc: url("img/fv-bg-pc.webp");
--pb-fv-bg-sp: url("img/fv-bg-sp.webp");
position: relative;
overflow: hidden;
container-type: inline-size;
box-sizing: border-box;
width: 100%;
padding: 18px 16px 18px;
background: #ffc21a var(--pb-fv-bg-pc) 50% 38% / cover no-repeat;
color: var(--pb-ink);
}
.pb-fvb *, .pb-fvb *::before, .pb-fvb *::after { box-sizing: border-box; }
.pb-fvb .wp-block-group__inner-container { display: contents; } /* SWELL が group の中身を包む箱。.pb-fv と同じ扱い */
.pb-fvb figure, .pb-fvb p { margin: 0; }
.pb-fvb img { display: block; max-width: 100%; height: auto; }
.pb-fvb__card {
position: absolute;
z-index: 1;
width: var(--w);
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%) rotate(var(--r));
pointer-events: none;
filter: drop-shadow(0 .5cqw 1cqw rgba(60, 25, 0, .38));
}
.pb-fvb__card--1 { --x: 6%; --y: 62%; --w: 12cqw; --r: -17deg; }
.pb-fvb__card--2 { --x: 94%; --y: 40%; --w: 12.5cqw; --r: 14deg; }
.pb-fvb__card--3 { --x: 17%; --y: 10%; --w: 8.5cqw; --r: 11deg; z-index: 0; }
.pb-fvb__inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 3cqw;
max-width: 1000px;
margin: 0 auto;
}
.pb-fvb__title {
--tw: min(520px, 44cqw);
font-size: var(--tw);
width: 1em;
flex: 0 0 auto;
line-height: 1;
text-align: center;
}
.pb-fvb__row { display: flex; align-items: center; justify-content: center; gap: .012em; }
.pb-fvb__row--lead { gap: .014em; margin-bottom: .02em; }
.pb-fvb__row--lead .pb-fv__brand { font-size: .05em; padding: .02em .05em; }
.pb-fvb__row--lead .pb-fv__nara { font-size: .056em; }
.pb-fvb__genre { font-size: min(.082em, calc(.56em / (var(--n, 8) + .3))); letter-spacing: -.035em; }
.pb-fvb__main { font-size: .215em; letter-spacing: -.04em; margin-top: .01em; }
.pb-fvb__act {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 10px;
width: min(380px, 31cqw);
}
.pb-fvb__badge { width: min(100px, 8.4cqw); flex: 0 0 auto; }
@media (max-width: 600px) {
.pb-fvb { padding: 14px 10px 14px; background-image: var(--pb-fv-bg-sp); background-position: 50% 50%; }
.pb-fvb__inner { flex-direction: column; gap: 6px; }
.pb-fvb__title { --tw: min(350px, 92cqw); }
.pb-fvb__row--lead .pb-fv__brand { font-size: .052em; }
/* SP: 帯の幅が狭いので「ジャンル名をまとめて」は 2 行目に降ろす */
.pb-fvb__row--lead { flex-wrap: wrap; row-gap: .012em; }
.pb-fvb__genre { flex: 0 0 100%; text-align: center; font-size: min(.105em, calc(.9em / (var(--n, 8) + .4))); }
.pb-fvb__act { width: 100%; flex-wrap: nowrap; gap: 8px; justify-content: center; }
.pb-fvb__badge { width: 21cqw; max-width: 82px; }
.pb-fvb__card--1 { --x: 4%; --y: 40%; --w: 20cqw; --r: -15deg; }
.pb-fvb__card--2 { --x: 97%; --y: 30%; --w: 19cqw; --r: 14deg; }
.pb-fvb__card--3 { --x: 91%; --y: 80%; --w: 18cqw; --r: -10deg; z-index: 0; }
}
/* =============================================================
ジャンル LP 本文の調整（GLP-BB-04）
改修版 toreca-kaitori の本文（ページ別 CSS swell_meta_css・pb-lp-redesign）は「トレカ」（3 字）の文の長さに合わせた固定幅・折り返し禁止・
負の余白になっている。ジャンル名が長い（ベイブレード 6 字）LP では、見出しが黄色の箱からはみ出す・文がカードを突き抜ける・
セクションを抜いたぶん前後の余白が詰まって吹き出しがボタンに重なる、が起きるので、ここで直す。
すべて main:has(.pb-fv)（FV 部品のある LP だけ）に限定する。toreca-kaitori・他のページには効かない。
============================================================= */
/* 単語（カタカナ語）は途中で折り返さない。本文のジャンル名は で包まれている（span だと toreca の CSS が span に font-size 等を当てるため bdi）（deploy/build_content.py） */
.pb-nw { white-space: nowrap; unicode-bidi: normal; }
/* 1. 黄色の見出し箱（背景は ![]()
。箱は画像に描かれていて、文字が長いとはみ出す）: ジャンル名を含む見出し（= toreca より文字数が増えたもの。中にジャンル名 がある）だけ、
箱の中で自然に折り返し（2 行になってよい）、少し小さくする。ジャンル名の無い見出し（流れ・比較表・FAQ など）は toreca のまま */
main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn) {
white-space: normal !important;
text-wrap: balance;
overflow-wrap: break-word;
line-height: 1.2 !important;
max-width: 100%;
box-sizing: border-box;
padding-left: 4%;
padding-right: 4%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 599px) {
/* SP: 画像の箱（幅 約 340px）に 2 行が収まる大きさ */
main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn) {
font-size: min(21px, 5.3vw) !important;
}
/* 「PRICE BASEの
…がおすすめな理由」のように改行を含む見出しは、2 行目が箱に収まるよう小さめ */ main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn):has(br) { font-size: min(17px, 4.3vw) !important; } } @media (min-width: 600px) { /* PC: 画像の箱（幅 約 960px・高さ 約 117px。画面が狭いと画像ごと縮む）に 2 行が収まる大きさ */ main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn) { font-size: min(40px, 3.3vw) !important; } } /* 2. カード・箱の中の文: 箱の中で折り返し、行の長さを均等にして 1 文字だけの行（「を」「い」）を作らない（text-wrap: balance。非対応のブラウザは従来どおり） */ main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { text-wrap: balance; overflow-wrap: break-word; } /* 3. 強み（PC の 6 つの箱）: 左右 2 列（文／イラスト）が同じ幅（183px）で、文は SWELL の is-style-section_ttl の折り返し禁止（nowrap）。 「トレカ」前提の長さなので、ジャンル名が長いとイラストに重なる。文の列を広く（約 60%）、イラストの列を狭くし、文は箱の中で折り返す */ main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:first-child { flex: 0 0 60%; max-width: 60%; } main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:last-child { flex: 1 1 0; min-width: 0; } main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:last-child img { max-width: 100%; height: auto; } main:has(.pb-fv) .swell-block-fullWide.strength .swell-block-column > p.is-style-section_ttl { white-space: normal !important; font-size: clamp(16px, 2.05vw, 24px) !important; line-height: 1.35 !important; max-width: 100%; } /* 4. 掲載実績の吹き出し「大手サイトでも」は、直前のセクションの下端に 90% 重ねて置く作り（toreca は直前が口コミで、下余白 100px がある）。 ジャンル LP は口コミを抜いたので直前が申込ボタンのセクションになり、吹き出しがボタンに重なる。直前のセクションの下余白を toreca の口コミと同じ 100px にする */ @media (max-width: 599px) { main:has(.pb-fv) .swell-block-fullWide:has(+ .swell-block-fullWide.reputation) { padding-bottom: 100px !important; } } @media (min-width: 600px) { main:has(.pb-fv) .swell-block-fullWide:has(+ .swell-block-fullWide.reputation) { padding-bottom: 80px !important; } } /* 5. お悩みカード（PC・タブレット）の文: 画像の吹き出しの内側に収まるよう、中幅では少し小さくして折り返す */ @media (min-width: 600px) { /* 「自分の手元にあるベイブレードを」（15 字）が吹き出しの幅（約 290px）に 1 行で入る大きさ（toreca は 20px で「トレカ」の短い文） */ main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { font-size: 17px !important; } } @media (min-width: 600px) and (max-width: 1100px) { main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { font-size: 16px !important; } } /* 6. SP の比較カード（お悩み×PRICE BASEなら）の左の列は幅が狭く、「ベイブレード」を途中で切らない（nowrap）ぶん「を」だけの行ができる。字間を少し詰める */ @media (max-width: 599px) { main:has(.pb-fv) .pb-merge__qt { letter-spacing: -0.04em; } } /* 7. おすすめな理由（PC・タブレット）のカード見出し: toreca は line-height:0・折り返し禁止（1 行前提）。ジャンル名が長いと、折り返した 2 行目が 1 行目に重なる・箱から切れる。 文字を少し小さくして 1 行に収める（画面が狭いほど小さく）。念のため行の高さも持たせ、箱は中身に合わせて伸びるようにする（広い画面は toreca と同じ固定の高さ） */ @media (min-width: 600px) { main:has(.pb-fv) .recommend.display-none-sp .wp-block-cover.recommend-list h3 { font-size: clamp(17px, 2.6vw, 26px) !important; line-height: 1.35 !important; white-space: normal !important; } } @media (min-width: 600px) { /* 背景の箱の絵は![]()
で、下端より少し内側に枠がある。toreca はカードの高さ固定（タブレット 140px・PC 120px）で overflow:hidden。見出しが 2 行になる・注記が付く
カードで中身が切れる/枠に重なるので、中身に合わせて伸ばし、箱の絵も幅いっぱいに伸ばす */
main:has(.pb-fv) .recommend.display-none-sp .wp-block-cover.recommend-list { height: auto !important; max-height: none !important; padding-top: 16px; padding-bottom: 34px; }
main:has(.pb-fv) .recommend.display-none-sp .wp-block-cover.recommend-list > img.wp-block-cover__image-background { object-fit: fill !important; width: 100% !important; }
}
/* 比較表のセル（SP は display:flex）: セルの文字の連なりを 1 つの箱にまとめる（deploy/build_content.py が .pb-cell で包む） */
.pb-cell { display: block; }
.pb-cell + br { display: none; } /* 箱のあとの改行は不要（空行ができる） */
/* 8. SP（特に 360〜380px）の「お悩み × PRICE BASEなら」の表: 答えの列の「大量のベイブレード／を／…」のように助詞だけの行ができる。少し小さく・字間を詰める */
@media (max-width: 400px) {
main:has(.pb-fv) .pb-merge--B .pb-merge__at { font-size: 13px !important; letter-spacing: -0.05em; }
main:has(.pb-fv) .pb-merge--B .pb-merge__qt { font-size: 11.5px; letter-spacing: -0.06em; }
}
/* 9. 文節の途中で改行しない（PC のお悩み・強み・おすすめな理由）。本文の文・見出しには BudouX の文節の境目に が入っている（deploy/build_content.py）。
のある要素だけ、日本語を文節の境目（）と句読点でしか改行させない。長すぎて入らないときだけ、どこでも改行（overflow-wrap: anywhere）。
Safari でも効く（word-break: keep-all / overflow-wrap: anywhere は Safari 15.4 以降。それ以前は従来どおりの折り返し） */
main:has(.pb-fv) :is(h2, h3, p, td, li):has(wbr) {
word-break: keep-all;
overflow-wrap: anywhere;
line-break: strict;
}
…がおすすめな理由」のように改行を含む見出しは、2 行目が箱に収まるよう小さめ */ main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn):has(br) { font-size: min(17px, 4.3vw) !important; } } @media (min-width: 600px) { /* PC: 画像の箱（幅 約 960px・高さ 約 117px。画面が狭いと画像ごと縮む）に 2 行が収まる大きさ */ main:has(.pb-fv) .wp-block-cover[class*="-title"] .wp-block-cover__inner-container > :is(h1, h2, h3, p):has(.pb-gn) { font-size: min(40px, 3.3vw) !important; } } /* 2. カード・箱の中の文: 箱の中で折り返し、行の長さを均等にして 1 文字だけの行（「を」「い」）を作らない（text-wrap: balance。非対応のブラウザは従来どおり） */ main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { text-wrap: balance; overflow-wrap: break-word; } /* 3. 強み（PC の 6 つの箱）: 左右 2 列（文／イラスト）が同じ幅（183px）で、文は SWELL の is-style-section_ttl の折り返し禁止（nowrap）。 「トレカ」前提の長さなので、ジャンル名が長いとイラストに重なる。文の列を広く（約 60%）、イラストの列を狭くし、文は箱の中で折り返す */ main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:first-child { flex: 0 0 60%; max-width: 60%; } main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:last-child { flex: 1 1 0; min-width: 0; } main:has(.pb-fv) .swell-block-fullWide.strength .wp-block-cover .swell-block-columns__inner > .swell-block-column:last-child img { max-width: 100%; height: auto; } main:has(.pb-fv) .swell-block-fullWide.strength .swell-block-column > p.is-style-section_ttl { white-space: normal !important; font-size: clamp(16px, 2.05vw, 24px) !important; line-height: 1.35 !important; max-width: 100%; } /* 4. 掲載実績の吹き出し「大手サイトでも」は、直前のセクションの下端に 90% 重ねて置く作り（toreca は直前が口コミで、下余白 100px がある）。 ジャンル LP は口コミを抜いたので直前が申込ボタンのセクションになり、吹き出しがボタンに重なる。直前のセクションの下余白を toreca の口コミと同じ 100px にする */ @media (max-width: 599px) { main:has(.pb-fv) .swell-block-fullWide:has(+ .swell-block-fullWide.reputation) { padding-bottom: 100px !important; } } @media (min-width: 600px) { main:has(.pb-fv) .swell-block-fullWide:has(+ .swell-block-fullWide.reputation) { padding-bottom: 80px !important; } } /* 5. お悩みカード（PC・タブレット）の文: 画像の吹き出しの内側に収まるよう、中幅では少し小さくして折り返す */ @media (min-width: 600px) { /* 「自分の手元にあるベイブレードを」（15 字）が吹き出しの幅（約 290px）に 1 行で入る大きさ（toreca は 20px で「トレカ」の短い文） */ main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { font-size: 17px !important; } } @media (min-width: 600px) and (max-width: 1100px) { main:has(.pb-fv) .solution-list .wp-block-cover:not([class*="-title"]) h3 { font-size: 16px !important; } } /* 6. SP の比較カード（お悩み×PRICE BASEなら）の左の列は幅が狭く、「ベイブレード」を途中で切らない（nowrap）ぶん「を」だけの行ができる。字間を少し詰める */ @media (max-width: 599px) { main:has(.pb-fv) .pb-merge__qt { letter-spacing: -0.04em; } } /* 7. おすすめな理由（PC・タブレット）のカード見出し: toreca は line-height:0・折り返し禁止（1 行前提）。ジャンル名が長いと、折り返した 2 行目が 1 行目に重なる・箱から切れる。 文字を少し小さくして 1 行に収める（画面が狭いほど小さく）。念のため行の高さも持たせ、箱は中身に合わせて伸びるようにする（広い画面は toreca と同じ固定の高さ） */ @media (min-width: 600px) { main:has(.pb-fv) .recommend.display-none-sp .wp-block-cover.recommend-list h3 { font-size: clamp(17px, 2.6vw, 26px) !important; line-height: 1.35 !important; white-space: normal !important; } } @media (min-width: 600px) { /* 背景の箱の絵は