側: バッジを1行、但し書きはその下の行へ */
.yjj-case__yield { font-size: 13px; margin: 8px 0 8px; line-height: 1.5; }
.yjj-case__yield small { margin-top: 6px; }
.yjj-case__rare { vertical-align: middle; margin-left: 8px; }
@media (min-width: 768px) {
.yjj-case__yield .yjj-yieldbadge b { font-size: 46px; }
.yjj-yieldbadge__u { font-size: 25px; }
.yjj-yieldbadge__l { font-size: 14px; }
}
/* ---- LINEで届く物件カード見本の「表面利回り」も同じバッジ（幅が狭いので一回り小さく） ---- */
.yjj-yieldbadge--card { padding: 4px 12px 5px; border-radius: 10px; }
.yjj-card__yield { margin-top: 6px !important; }
.yjj-card__yield .yjj-yieldbadge b { font-family: var(--lps-num-font); font-weight: 400; font-size: 34px; line-height: 1; color: #b3231b; }
.yjj-yieldbadge--card .yjj-yieldbadge__u { font-size: 19px; color: #b3231b; }
.yjj-yieldbadge--card .yjj-yieldbadge__l { font-size: 12px; color: #6b4e0f; margin-right: 6px; }
/* =====================================================================
② 事例の価格（購入・家賃・売却）を一回り大きく。「購入価格の安さ」は金の細縁で強調
===================================================================== */
.yjj-case__flow .v { font-size: 26px; }
.yjj-case__flow .v small { font-size: 11px; }
.yjj-case__flow .l { font-size: 11px; }
.yjj-case__flow li:first-child {
border: 1.5px solid transparent;
background: var(--yjj-cream) padding-box, var(--yjj-gold-edge) border-box;
}
.yjj-case__flow li:first-child .l { color: var(--yjj-gold-ink); }
.yjj-case__flow li:first-child .v { font-size: 29px; }
@media (min-width: 768px) {
.yjj-case__flow .v { font-size: 28px; }
.yjj-case__flow li:first-child .v { font-size: 31px; }
}
/* =====================================================================
③ 事例写真に「額縁」（白マット＋金の細線＋2段影）
===================================================================== */
.yjj-case__photos figure {
padding: 5px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(201,154,46,.45), var(--lps-shadow-2);
}
.yjj-case__photos img { border-radius: 6px; }
.yjj-case__photos figcaption { left: 11px; top: 11px; }
/* =====================================================================
④ ヘッダー: 上下の余白を詰め、ロゴを一回り大きく（SP/PC）
===================================================================== */
.lps-header { padding: 4px 12px; min-height: 60px; }
.yjj-logo--img img { height: 54px; }
@media (min-width: 768px) {
.lps-header { padding: 6px 20px; min-height: 84px; }
.yjj-logo--img img { height: 76px; }
.lps-header__btn { font-size: 14px; line-height: 1.3; padding: 10px 18px; }
}
/* =====================================================================
⑤ 追従バー: 押しやすい余白＋光が走るアニメーション
===================================================================== */
.cta__scroll-bottom {
min-height: 72px;
padding: 6px 8px 7px;
gap: 8px;
align-items: center;
box-shadow: 0 -2px 14px rgba(10,36,74,.18);
}
.cta__scroll-bottom .yjj-stickybar__lead { font-size: 13px; line-height: 1.4; }
.cta__scroll-bottom .yjj-stickybar__line,
.cta__scroll-bottom .yjj-stickybar__join {
position: relative;
overflow: hidden;
box-sizing: border-box;
min-height: 56px;
border-radius: 12px;
padding: 6px 8px;
}
.cta__scroll-bottom .yjj-stickybar__line-main { font-size: 17px; }
.cta__scroll-bottom .yjj-stickybar__line-sub { font-size: 11.5px; }
/* 光が走る（買取くん lpsShine を流用）。点滅ではなく1本のスラッシュが横切るだけ */
.cta__scroll-bottom .yjj-stickybar__line::before,
.cta__scroll-bottom .yjj-stickybar__join::before {
content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%;
background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
animation: lpsShine 3.6s ease-in-out infinite;
animation-delay: .6s;
pointer-events: none;
z-index: 1;
}
.cta__scroll-bottom .yjj-stickybar__join::before { animation-delay: 1.5s; }
/* 影のゆっくりした鼓動（色も大きさも変えない＝酔わせない） */
@keyframes rkcStickyPulse {
0%, 100% { box-shadow: 0 2px 6px rgba(5,166,72,.30); }
50% { box-shadow: 0 3px 18px rgba(6,199,85,.55); }
}
.cta__scroll-bottom .yjj-stickybar__line { animation: rkcStickyPulse 2.8s ease-in-out infinite; }
/* =====================================================================
⑥ LINE登録ボタン（本文・FV）に光る演出＋アイコンの動き
===================================================================== */
.yjj-btn-line { position: relative; overflow: hidden; }
.yjj-btn-line::before {
content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%;
background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
animation: lpsShine 3.6s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
.yjj-btn-line > * { position: relative; z-index: 2; }
/* アイコンの小さな呼吸（買取くんの電話アイコンのギミック相当。振幅は控えめ） */
@keyframes rkcIcoBob {
0%, 62%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
72% { transform: scale(1.14); filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
84% { transform: scale(1); }
}
.yjj-btn-line__ico { animation: rkcIcoBob 3.6s ease-in-out infinite; transform-origin: center; }
/* =====================================================================
⑦ アクセシビリティ: 動きを減らす設定では B2o の演出を全停止
===================================================================== */
@media (prefers-reduced-motion: reduce) {
.yjj-yieldbadge::before,
.cta__scroll-bottom .yjj-stickybar__line::before,
.cta__scroll-bottom .yjj-stickybar__join::before,
.cta__scroll-bottom .yjj-stickybar__line,
.yjj-btn-line::before,
.yjj-btn-line__ico { animation: none !important; }
.yjj-yieldbadge::before,
.cta__scroll-bottom .yjj-stickybar__line::before,
.cta__scroll-bottom .yjj-stickybar__join::before,
.yjj-btn-line::before { display: none !important; }
}
/* =====================================================================
⑧ 事例カードに金の通し番号（装飾のみ・CSSカウンタなのでHTML/コピーは不変）
「白いカードが均等に並ぶだけ」のテンプレ感を落とす
===================================================================== */
.yjj-cases { counter-reset: rkccase; }
.yjj-cases .lps-result { counter-increment: rkccase; }
.yjj-cases .lps-result__card { position: relative; }
.yjj-cases .lps-result__card::before {
content: counter(rkccase, decimal-leading-zero);
position: absolute;
top: 10px; left: 12px;
font-family: var(--lps-num-font);
font-size: 26px; line-height: 1;
color: #c99a2e;
opacity: .5;
pointer-events: none;
}
/* =====================================================================
⑨ 信頼帯の折返し修正（origin/main 由来の既存不具合）
SP390 実測: ロゴ262px + 本文88px を1行に詰めていて本文が縦1文字幅に潰れ、
ロゴと重なって読めない状態だった（base/b2o 双方で再現＝B2oの変更起因ではない）。
SPだけ縦積みにして、PC（横並びが成立する幅）は従来どおり。
===================================================================== */
@media (max-width: 767px) {
.lps-trustband { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
.lps-trustband .yjj-logo { flex: 0 0 100%; text-align: center; }
.lps-trustband p { flex: 1 1 100%; max-width: none; text-align: center; }
}
/* =====================================================================
B2o(2) 2026-09-05 — A8o／B1o の申し送りへの対応
===================================================================== */
/* ---- ⑪「レア事例」バッジを利回りの級数に追随させる（A8oの明示条件） ----
利回りを 16px→40px にした分だけ但し書きが相対的に弱くなるため、
バッジも一緒に効かせる。720% の事例で「まれ」が同じ視覚レベルに立つこと。 */
.yjj-case__yield .yjj-case__rare {
font-size: 13px;
padding: 5px 12px;
font-weight: 900;
border-width: 1.5px;
vertical-align: middle;
margin-left: 0;
box-shadow: 0 1px 3px rgba(162,75,0,.18);
}
/* バッジと同じ行に並べず、金バッジの直下へ回して「数字とセットで読む」形にする */
.yjj-case__yield .yjj-yieldbadge + .yjj-case__rare { display: block; margin: 8px auto 0; width: fit-content; }
@media (min-width: 768px) { .yjj-case__yield .yjj-case__rare { font-size: 14px; padding: 6px 14px; } }
/* ---- ⑫ 事例の免責を「数字と同じ画面で読める」位置に保つ（A8oの明示条件） ----
利回りを大きくした分、直下の但し書きが相対的に沈まないよう級数と行間を上げる。
折りたたみ・別画面送りはしない。 */
.yjj-case__yield small { font-size: 12.5px; line-height: 1.6; color: #3f4a58; }
.yjj-disclaimer { font-size: 12px; line-height: 1.75; color: #3f4a58; }
/* ---- ⑬ 料金カード「成約時の成功報酬」の窮屈さ（A8o申し送り3-4） ----
SP390 で dt が3行に折れていた。dt を独立行にして dd に幅を渡す。
金額の文字列自体は確定文言なので触らない。 */
@media (max-width: 767px) {
.yjj-price__rows div { flex-direction: column; gap: 4px; }
.yjj-price__rows dt { white-space: nowrap; }
.yjj-price__rows dd { text-align: left; padding-left: 21px; }
}
/* ---- ⑭ B1oのポジ写真は「明るさ」が売り＝白飛びしない範囲で締める ---- */
.yjj-case__photos figure:nth-child(2) img { filter: saturate(1.02); }
/* =====================================================================
CARDf（2026-09-05 藤山さん指示）: §03「こういうカードがLINEに届きます」を
実配信・成約済10件のカルーセルへ。横スクロールはこのトラックの内側だけで起こす
（ページ全体は横に動かさない）。自動送りは JS 側で prefers-reduced-motion を尊重。
===================================================================== */
.yjj-crs { max-width: 336px; margin: 0 auto; }
.yjj-crs .lps-preview__phone { max-width: none; padding-left: 10px; padding-right: 10px; }
.yjj-crs__track {
display: flex; gap: 10px; align-items: flex-start; /* 注意点が少ないカードは短いまま（間延びさせない） */
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-radius: 26px;
background: #e9edf2; /* LINEのトーク画面の地色 */
padding: 10px 0 10px;
outline: none;
}
.yjj-crs__track::-webkit-scrollbar { display: none; }
.yjj-crs__track:focus-visible { box-shadow: 0 0 0 3px rgba(30,111,217,.55); }
.yjj-crs__item {
flex: 0 0 100%; width: 100%; box-sizing: border-box;
scroll-snap-align: center; scroll-snap-stop: always;
margin: 0; /* .yjj-card の外側マージンを打ち消す（幅計算を100%に揃える） */
border-radius: 14px;
}
/* 配信日のスタンプ（LINEのタイムスタンプ風）＋ 成約済 */
.yjj-card__stamp {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin: 0; padding: 8px 12px 6px; font-size: 12px; font-weight: 700; color: #4a5566; background: #fff;
}
.yjj-card__sold {
display: inline-block; padding: 3px 9px; border-radius: 999px;
background: #1b2f4b; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .06em;
}
/* 「配信からN分で受付終了」（受付終了告知が同日にあった物件だけ） */
.yjj-card__closed {
position: absolute; right: 8px; bottom: 8px;
padding: 4px 9px; border-radius: 6px;
background: rgba(20,28,44,.82); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3;
}
/* カードの中身: スマホで価格と利回りが一瞬で読める級数（藤山さん「文字が小さい部分が多い」対応） */
.yjj-crs__item .yjj-card__place { font-size: 18px; }
/* CAROo（2026-09-05 藤山さん指示）: 価格と利回りの数字を主役に。
「価格：」「万円」などのラベル・単位は小さいまま（ラベル床12pxは維持）、数字だけ大きくする */
.yjj-crs__item .yjj-card__price { font-size: 14px; line-height: 1.1; }
.yjj-crs__item .yjj-card__price b { font-size: 46px; line-height: 1; letter-spacing: -.01em; vertical-align: -2px; }
.yjj-crs__item .yjj-card__yield { margin-top: 2px !important; }
.yjj-crs__item .yjj-card__yield .yjj-yieldbadge b { font-size: 62px; letter-spacing: -.02em; }
.yjj-crs__item .yjj-yieldbadge--card .yjj-yieldbadge__u { font-size: 28px; }
.yjj-crs__item .yjj-yieldbadge--card .yjj-yieldbadge__l { font-size: 12px; }
.yjj-crs__item .yjj-yieldbadge--card { padding: 2px 10px 4px; }
.yjj-crs__item .yjj-card__box { padding: 8px 6px 10px; }
.yjj-crs__item .yjj-card__gain { font-size: 15px; }
.yjj-crs__item .yjj-card__gain b { font-size: 20px; }
.yjj-crs__item .yjj-card__basis { font-size: 12.5px; }
.yjj-crs__item .yjj-card__notes { font-size: 13px; line-height: 1.6; }
.yjj-crs__item .yjj-card__notes li { padding-left: 1em; text-indent: -1em; }
/* ナビ: 矢印＋枚数＋ドット（PCは矢印で送る／SPは指で送る） */
.yjj-crs__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 6px; }
.yjj-crs__arrow {
width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #c9d3df; background: #fff; color: #1b2f4b;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
box-shadow: 0 2px 6px rgba(20,40,60,.10);
}
/* CAROo: 左右に動かせることが一目で分かるよう、カードの中央の高さに大きな矢印を重ねる。
写真の上でも見えるよう半透明の白地＋濃い影。タップ領域は 54px（最低44pxを満たす） */
.yjj-crs { position: relative; }
.yjj-crs .lps-preview__phone { position: relative; }
.yjj-crs__arrow--ov {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 54px; height: 54px; border: 0;
background: rgba(255,255,255,.94); color: #12233c;
box-shadow: 0 3px 12px rgba(12,24,40,.34), 0 0 0 1.5px rgba(18,35,60,.14) inset;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.yjj-crs__arrow--prev { left: -6px; }
.yjj-crs__arrow--next { right: -6px; }
.yjj-crs__arrow--ov .yjj-i { width: 28px; height: 28px; }
.yjj-crs__arrow--ov:hover { background: #fff; }
.yjj-crs__arrow--ov:active { transform: translateY(-50%) scale(.94); }
@media (min-width: 768px) {
.yjj-crs__arrow--ov { width: 60px; height: 60px; }
.yjj-crs__arrow--ov .yjj-i { width: 30px; height: 30px; }
.yjj-crs__arrow--prev { left: -26px; }
.yjj-crs__arrow--next { right: -26px; }
}
.yjj-crs__arrow .yjj-i { width: 20px; height: 20px; }
.yjj-crs__arrow[data-crs-prev] .yjj-i { transform: scaleX(-1); }
.yjj-crs__arrow:hover { background: #f2f6fb; }
.yjj-crs__arrow:focus-visible { outline: 3px solid rgba(30,111,217,.55); outline-offset: 2px; }
.yjj-crs__count { font-family: var(--lps-num-font); font-size: 18px; color: #1b2f4b; min-width: 64px; text-align: center; }
.yjj-crs__count b { font-weight: 400; font-size: 24px; }
.yjj-crs__dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 6px; }
.yjj-crs__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #c4ccd8; cursor: pointer; }
.yjj-crs__dot.is-active { background: #1b2f4b; width: 20px; border-radius: 4px; }
.yjj-crs__hint { text-align: center; font-size: 12px; color: #55606e; margin: 4px 0 0; }
@media (min-width: 768px) {
.yjj-crs__hint { display: none; } /* PCは矢印で送る */
}
@media (prefers-reduced-motion: reduce) {
.yjj-crs__track { scroll-behavior: auto; }
}
/* ===== D1 お金がかかるタイミング（.yjj-money） ===== */
.yjj-money{max-width:980px;margin:22px auto;padding:18px 14px 16px;background:#fff;border:1px solid var(--yjj-hair);border-radius:14px;text-align:left}
.yjj-money__cap{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--lps-line);text-align:center}
.yjj-money__cap .yjj-i{font-size:15px;margin-right:5px;vertical-align:-.2em}
.yjj-money__row{display:flex;flex-direction:column;gap:0}
.yjj-money__step{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid var(--yjj-hair);border-radius:12px;background:var(--yjj-ivory)}
.yjj-money__step>.yjj-i{width:26px;height:26px;color:var(--yjj-gold);margin-top:1px}
.yjj-money__body{flex:1 1 auto;min-width:0}
.yjj-money__t{display:block;font-size:13.5px;font-weight:900;color:var(--lps-primary);line-height:1.4}
.yjj-money__d{display:block;margin-top:2px;font-size:11.5px;line-height:1.6;color:#55636f}
.yjj-money__tag{flex:0 0 auto;align-self:center;max-width:42%;text-align:center;font-size:12px;font-weight:900;line-height:1.15;padding:7px 10px;border-radius:999px;background:var(--yjj-green-soft);color:#1f7a45;border:1px solid #b9e3c8}
.yjj-money__tag--paid{background:#eaf1fb;color:var(--lps-primary);border-color:#c7d9f3}
.yjj-money__tag--fee{background:#fff1e8;color:var(--lps-deep);border-color:#f5c9ad}
.yjj-money__tag small{display:block;margin-top:4px;font-size:9.5px;font-weight:700;opacity:.85}
.yjj-money__arrow{display:flex;justify-content:center;color:var(--yjj-hair)}
.yjj-money__arrow .yjj-i{width:20px;height:20px;stroke-width:2.2}
.yjj-money__step--opt{border-style:dashed;background:#fff}
.yjj-money__note{margin:12px 0 0;font-size:11.5px;line-height:1.65;color:#62707f;text-align:center}
.yjj-money__note b{color:#1f7a45}
@media(min-width:860px){
.yjj-money__row{flex-direction:row;align-items:stretch}
.yjj-money__step{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:6px}
.yjj-money__tag{margin-top:auto}
.yjj-money__arrow{display:flex;align-items:center;flex:0 0 auto}
.yjj-money__arrow .yjj-i{transform:rotate(-90deg)}
}
/* ===== D2 30日のあと（.yjj-days） ===== */
.yjj-days{max-width:980px;margin:22px auto;padding:18px 14px 16px;background:#fff;border:1px solid var(--yjj-hair);border-radius:14px}
.yjj-days__cap{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--lps-line);text-align:center}
.yjj-days__cap .yjj-i{font-size:15px;margin-right:5px;vertical-align:-.2em}
.yjj-days__bar{display:grid;grid-template-columns:30fr 22fr;gap:4px;margin:0 0 10px}
.yjj-days__seg{position:relative;height:14px;border-radius:999px;background:var(--lps-line)}
.yjj-days__seg--after{background:repeating-linear-gradient(90deg,#b9c9db 0 6px,transparent 6px 10px);background-color:#e6edf5}
.yjj-days__seg--after::after{content:"";position:absolute;right:-2px;top:2px;border:5px solid transparent;border-left:9px solid #b9c9db}
.yjj-days__lab{display:grid;grid-template-columns:30fr 22fr;gap:4px;font-size:10px;font-weight:900;color:var(--lps-primary);margin-bottom:12px}
.yjj-days__lab span:last-child{color:#62707f}
.yjj-days__cols{display:grid;grid-template-columns:1fr;gap:8px}
.yjj-days__col{border:1.5px solid var(--yjj-hair);border-radius:12px;padding:10px 12px;background:var(--yjj-ivory)}
.yjj-days__col--after{background:#fff;border-style:dashed}
.yjj-days__h{margin:0 0 6px;font-size:13.5px;font-weight:900;color:var(--lps-primary);display:flex;align-items:center;gap:6px}
.yjj-days__h .yjj-i{font-size:20px;color:var(--yjj-gold)}
.yjj-days__h .free{font-size:10px;background:var(--yjj-green);color:#fff;border-radius:999px;padding:3px 7px;margin-left:auto}
.yjj-days__list{margin:0;padding:0;list-style:none;font-size:11.5px;line-height:1.6;color:#3a4553}
.yjj-days__list li{display:flex;gap:6px;align-items:flex-start}
.yjj-days__list .yjj-i{font-size:15px;margin-top:3px;color:var(--yjj-green);flex:0 0 auto}
.yjj-days__list li.dim .yjj-i{color:#98a6b5}
.yjj-days__switch{margin:10px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--yjj-gold-ink);background:var(--yjj-ivory-2);border-radius:999px;padding:8px 12px}
.yjj-days__switch .yjj-i{font-size:16px}
.yjj-days__note{margin:10px 0 0;font-size:11.5px;line-height:1.65;color:#62707f;text-align:center}
@media(min-width:860px){.yjj-days__cols{grid-template-columns:30fr 22fr}}
/* LPf: 月額/成功報酬タグの折り返しを整える */
.yjj-money__tag--paid,.yjj-money__tag--fee{max-width:48%}
@media (min-width:860px){.yjj-money__tag{max-width:100%}}
/* ================================================================
LPf(3) 2026-09-05: TXTf 文字サイズ点検の適用（override.css 70規則＋§5副作用対処）
================================================================ */
.yjj-cvband__checks{font-size:15px}
.yjj-preview__lead{font-size:15px}
.lps-trustband p{font-size:14px}
.lps-hurdle li{font-size:15px}
.yjj-worry__list li{font-size:15px}
.yjj-worry__list b{font-size:17px}
.yjj-worry__close{font-size:15px}
.yjj-lead{font-size:15.5px}
.lps-risk__body{font-size:15px}
.yjj-offer__list li{font-size:15px}
.yjj-offer__price{font-size:14px}
.yjj-after__txt p:not(.yjj-after__title){font-size:15px}
.yjj-after__title{font-size:16px}
.yjj-offer__more{font-size:15px}
.lps-result__sub li{font-size:15px}
.yjj-case__flow .l{font-size:13px}
.yjj-case__flow .s{font-size:12px}
.yjj-case__flow .v small{font-size:13px}
.yjj-chips li{font-size:13px}
.yjj-prog__lead{font-size:15.5px}
.yjj-steps__txt p:not(.yjj-steps__t){font-size:15px}
.yjj-steps__no{font-size:11px}
.yjj-diff__txt{font-size:15px}
.yjj-diff__label{font-size:12px}
.yjj-ab2__body{font-size:15px}
.yjj-split,.yjj-pulse{font-size:14px}
.yjj-split th,.yjj-pulse th{font-size:13px}
.yjj-notelist li{font-size:13.5px}
.yjj-toc__list p:not(.yjj-toc__t){font-size:15px}
.yjj-toc__time{font-size:12px}
.yjj-toc__cap{font-size:13px}
.yjj-toc__note{font-size:12.5px}
.yjj-honest{font-size:15px}
.lps-compare__band,.lps-trust .lps-compare__band{font-size:15px}
.yjj-trust6 .lps-trust__title{font-size:15px}
.lps-trust__title small{font-size:12px}
.yjj-agebar__row{font-size:14px}
.yjj-trust__one{font-size:15.5px}
.yjj-table{font-size:14.5px}
.lps-compare__caption{font-size:15.5px}
.lps-chief__dept{font-size:13px}
.lps-chief__bio p{font-size:15.5px}
.yjj-team3__item p{font-size:13.5px}
.yjj-team3__item b{font-size:15px}
.lps-step__bar .lps-step__free{font-size:12.5px}
.yjj-price__rows div{font-size:15px}
.yjj-price__notes{font-size:13.5px}
.yjj-price__note{font-size:13px}
.yjj-assure__foot{font-size:13.5px}
.yjj-message__body p{font-size:15.5px}
.yjj-join__lead{font-size:15px}
.yjj-join__note{font-size:13px}
.lps-company__table{font-size:15px}
.lps-footer a{font-size:14px}
.yjj-cta-sub{font-size:13.5px}
.yjj-badge__label{font-size:12px;letter-spacing:0}
.yjj-badge__num .sm{font-size:12px}
.cta__scroll-bottom .yjj-stickybar__lead{font-size:14px}
.cta__scroll-bottom .yjj-stickybar__line-sub{font-size:12.5px}
.cta__scroll-bottom .yjj-stickybar__join-sub{font-size:12px}
.yjj-cvband__or{font-size:13.5px}
.lps-btn-red__top{font-size:14px}
.lps-cta__micro{font-size:13px}
.yjj-eyebrow{font-size:13px}
.yjj-dgm__d{font-size:13px}
.yjj-dgm__note{font-size:13px}
.yjj-card__gain{font-size:15px}
.yjj-card__basis{font-size:12.5px}
.yjj-case__photos figcaption{font-size:12.5px}
.lps-result__note{font-size:12px}
.yjj-progindex__m{font-size:12.5px}
/* LPf(3) 追補: TXTf #49-#52（D1お金フロー・D2 30日バーの注記の床＝12px以上） */
.yjj-money__cap{font-size:13px}
.yjj-money__d{font-size:13px}
.yjj-money__tag{font-size:13px}
.yjj-money__tag small{font-size:12px}
.yjj-money__note{font-size:13px}
.yjj-days__cap{font-size:13px}
.yjj-days__lab{font-size:12px}
.yjj-days__h .free{font-size:12px}
.yjj-days__list{font-size:13.5px}
.yjj-days__switch{font-size:12.5px}
.yjj-days__note{font-size:12.5px}
.yjj-prog__kicker small{font-size:12px}
.yjj-message__body .yjj-message__sign{font-size:14.5px}
.yjj-price__rows dt{white-space:nowrap}
.yjj-diff__label{min-width:5.5em}
.yjj-textlink{font-size:13.5px}
@media (min-width:768px){.yjj-split,.yjj-pulse{font-size:14px}}
/* LPf(3): 比較表の✓/×・CTA注記アイコン */
.yjj-table td .yjj-i{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.yjj-td-ok .yjj-i{color:#1f7a45}
.yjj-td-x{color:#8a94a6}.yjj-td-x .yjj-i{color:#c0392b}
.lps-cta__micro .yjj-i{width:15px;height:15px;vertical-align:-3px;margin-right:3px}
.yjj-micro-sep{margin:0 4px;opacity:.6}
/* LPf(3): 30日シナリオ（#offer 末尾）*/
.yjj-days30{max-width:860px;margin:28px auto 0;background:#fff;border:1px solid #dbe6f3;border-radius:14px;padding:20px 18px 16px}
.yjj-days30__cap{font-weight:900;color:var(--lps-primary);font-size:16px;text-align:center;display:flex;justify-content:center;align-items:center;gap:6px}
.yjj-days30__cap .yjj-i{width:20px;height:20px}
.yjj-days30__lead{font-size:15px;text-align:center;margin:8px 0 14px;color:#334}
.yjj-days30__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.yjj-days30__list li{display:grid;grid-template-columns:5.2em 1fr;gap:10px;align-items:start;background:#f5f9fe;border-radius:10px;padding:12px 12px}
.yjj-days30__when{font-weight:900;color:var(--lps-primary);font-size:13px;padding-top:2px;line-height:1.3}
.yjj-days30__body{font-size:15px;line-height:1.7;color:#223}
.yjj-days30__body b{display:flex;align-items:center;gap:6px;font-size:15.5px;color:#0f2a4a;margin-bottom:2px}
.yjj-days30__body b .yjj-i{width:18px;height:18px;color:var(--lps-primary)}
.yjj-days30__note{margin:14px 0 0;text-align:center;font-size:13.5px;color:#556;font-weight:700}
@media (min-width:860px){.yjj-days30__list{grid-template-columns:repeat(4,1fr)}.yjj-days30__list li{grid-template-columns:1fr;gap:6px}}
/* LPf(3): 責任者の担当範囲フロー */
.yjj-chief__flow{list-style:none;margin:12px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.yjj-chief__flow li{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--lps-primary);background:#eaf1fb;border:1px solid #c7d9f3;border-radius:999px;padding:5px 10px}
.yjj-chief__flow li .yjj-i{width:16px;height:16px}
.yjj-chief__flow li+li::before{content:"→";margin-right:6px;color:#8a94a6;font-weight:400}
.yjj-chief__honest{font-size:13.5px;color:#556;border-top:1px dashed #dbe6f3;padding-top:10px;margin-top:10px}
/* ── CARDf: 会員の入口（既存会員のLINEログイン導線） ─────────────────────
主CTAより目立たせない。PC=ヘッダー右上の小さなテキストリンク／SP=FV直下の1行。
URLは js/config.js の MEMBER_SITE_URL のみ（未設定なら .js-member-cta が hidden になる）。 */
.yjj-member-link { display: none; }
.yjj-member-sp {
margin: 0;
padding: 10px 16px 12px;
text-align: center;
background: var(--yjj-ivory-2, #f6f2ea);
}
.yjj-member-sp a {
display: inline-block;
padding: 4px 2px;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
color: #62707f;
text-decoration: underline;
text-decoration-color: #b6c0cb;
text-underline-offset: 3px;
}
.yjj-member-sp a[hidden] { display: none; }
.yjj-member-sp:has(> a[hidden]) { display: none; }
.lps-footer .footer-flex p:has(> a[hidden]) { display: none; }
@media (min-width: 768px) {
/* PC ではヘッダー右上に出し、FV直下の1行は畳む */
.yjj-member-sp { display: none; }
.yjj-member-link {
display: inline-block;
padding: 6px 4px;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
color: #5b6875;
text-decoration: underline;
text-decoration-color: #b6c0cb;
text-underline-offset: 3px;
white-space: nowrap;
}
/* 点検書の注記の床に合わせて 11px から。PC のみ・nowrap のため折返しは増えない */
.yjj-member-link .sub { font-size: 12px; font-weight: 500; color: #78848f; }
.yjj-member-link:hover { color: var(--lps-primary, #14304f); }
.yjj-member-link[hidden] { display: none; }
}
/* =====================================================================
CTAmo（2026-09-05）主CTAに「目が行く動き」 — 藤山さんフィードバック第5回
方針: 常時ゆらゆら＝うるさい／読みづらい。よって「ふだんは静止、数秒に1回だけ
0.9秒ほど短く揺れる」。振幅は最大 1.2deg・上下2px・拡大2%に留め、
文字の可読性を落とさない。prefers-reduced-motion: reduce では完全停止。
===================================================================== */
/* 主CTA（追従バー）: 6秒周期のうち末尾0.9秒だけ揺れる */
@keyframes rkcCtaWobble {
0%, 84%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
86.5% { transform: translate3d(0, -2px, 0) rotate(-1.2deg) scale(1.02); }
89% { transform: translate3d(0, 0, 0) rotate(1.2deg) scale(1.02); }
91.5% { transform: translate3d(0, -1px, 0) rotate(-0.8deg) scale(1.01); }
94% { transform: translate3d(0, 0, 0) rotate(0.5deg) scale(1); }
96.5% { transform: translate3d(0, 0, 0) rotate(-0.2deg) scale(1); }
}
/* フッター周りの副CTA: 主CTAより控えめ（振幅半分・周期は長く・拡大なし） */
@keyframes rkcCtaWobbleSoft {
0%, 85%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
88% { transform: translate3d(0, -1px, 0) rotate(-0.6deg); }
91% { transform: translate3d(0, 0, 0) rotate(0.6deg); }
94% { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
97% { transform: translate3d(0, 0, 0) rotate(0.15deg); }
}
/* 追従バーの主CTA: 影の鼓動（既存）＋ 揺れ（新規）を重ねる。
※ 1497行の rkcStickyPulse 単独指定を、この2本立てで上書きする */
.cta__scroll-bottom .yjj-stickybar__line {
/* FABLE §4-2: 横揺れ（rkcCtaWobble）は「うるさい」で不採用。影の鼓動だけ残す */
animation: rkcStickyPulse 2.8s ease-in-out infinite;
}
/* 01-join 側の主CTA（有料入会）も同じ揺れ。影の色はオレンジ（入会）側に合わせる */
@keyframes rkcStickyPulseJoin {
0%, 100% { box-shadow: 0 2px 6px rgba(200, 84, 10, .30); }
50% { box-shadow: 0 3px 18px rgba(238, 122, 28, .55); }
}
.cta__scroll-bottom .yjj-stickybar__join {
animation: rkcStickyPulseJoin 2.8s ease-in-out infinite;
}
/* フッター周りのボタン（最終セクションの副CTA）＝控えめに */
.yjj-btn-join-sub,
.yjj-btn-line-sub {
animation: rkcCtaWobbleSoft 7s ease-in-out infinite;
animation-delay: 2.4s;
transform-origin: 50% 60%;
}
/* 動きを減らす設定では完全に止める */
@media (prefers-reduced-motion: reduce) {
.cta__scroll-bottom .yjj-stickybar__line,
.cta__scroll-bottom .yjj-stickybar__join,
.yjj-btn-join-sub,
.yjj-btn-line-sub { animation: none !important; transform: none !important; }
}
/* ================================================================
FINALo2（2026-09-05）実機相当の全長確認で見つけた崩れの修正。
すべて CSS と折返し位置の調整で、文言は一切変えていない。
================================================================ */
/* --- 1) 紺面の免責が黒文字になっていた ---------------------------
#11 で「紺の上は不透明の白 13px」と決めた指定（398行）が、
後から来る .yjj-disclaimer の一括指定（1595行・color:#3f4a58）に
同一詳細度で上書きされ、暗いプレートの上に暗い字が出ていた。
クラスを2つ重ねて詳細度を上げ、決めた値へ戻す。 */
.yjj-disclaimer.yjj-disclaimer--onnavy {
color: #fff; font-size: 13px; line-height: 1.7;
}
/* --- 2) 孤立字（最終行が1〜2文字）------------------------------
対応ブラウザにだけ効く上乗せ。効かない環境でも表示は現状のまま。 */
p, li, dd, dt, td, th, summary, figcaption, blockquote,
.lps-step__bar, .yjj-card__price, .yjj-card__yield, .yjj-card__gain {
text-wrap: pretty;
}
/* 幅の狭い枠に入る短文は、行の長さをそろえる方が読みやすい。
表のセル・短い注記・見出しはここに含める（長い本文は pretty のまま）。 */
td, th,
.yjj-gap__item p,
.yjj-team3__item p,
.yjj-stat__label, .yjj-stat__cap,
.yjj-badge,
.yjj-crs__cap,
.yjj-diff__txt, .yjj-toc__note,
.lps-step__bar,
summary,
.yjj-card__price, .yjj-card__yield, .yjj-card__gain {
text-wrap: balance;
}
/* 氏名・電話・メールは途中で割らない（「藤山大二 / 郎」が出ていた） */
.lps-company__table td .yjj-nb { white-space: nowrap; }
/* --- 3) 会社概要テーブルが 320px で 32px はみ出していた ----------
見出し列の white-space:nowrap で「宅地建物取引業免許」が
32% に収まらず、表全体が枠を越えていた。狭い幅では折り返す。 */
@media (max-width: 340px) {
.lps-company__table th { white-space: normal; width: 34%; }
.lps-company__table th, .lps-company__table td { padding: 10px 8px; }
}
/* --- 4) 青いCTA帯が 360px 以下ではみ出していた（01-join）--------
白ピルと数字の両方が nowrap の横並びで、幅が足りていなかった。
狭い幅では2段に折り返す。 */
@media (max-width: 400px) {
.lps-cta__blue-head { flex-wrap: wrap; gap: 6px 10px; }
.lps-cta__blue-label { white-space: normal; }
.lps-cta__blue-time { font-size: 44px; }
.lps-cta__blue-label .q { font-size: 15px; }
.lps-cta__blue-label .q b { font-size: 19px; }
}
/* --- 5) 「数字で見るRKC」のカードが 320px で数字を収めきれない ---
カードは左64px（番号バッジ）＋右46px（アイコン）を取るので、
2列だと本文に 28px しか残らず「10〜30万円台」がはみ出していた。
狭い幅では1列にして、数字が枠の中に収まるようにする。 */
@media (max-width: 360px) {
.lps-trust__grid { grid-template-columns: 1fr; }
}
/* --- 6) フッターの区切り線が、折り返した行の右端に取り残されていた -
4項目が2行に折り返すと、1行目の末尾に縦線だけが残っていた。
折り返しが起きる幅では縦線を出さず、間隔で区切る。 */
@media (max-width: 767px) {
.lps-footer .footer-flex p { border-right: 0; padding: 0 10px; }
}
/* --- 7) タップ領域 44px ---------------------------------------
会員リンク（高さ26px）と、カルーセルの点（8px角）。
見た目は変えず、指で押せる範囲だけ広げる。 */
.yjj-member-sp a { display: inline-block; padding: 13px 12px; }
.yjj-crs__dots { gap: 14px; }
.yjj-crs__dot { position: relative; }
.yjj-crs__dot::after {
content: ""; position: absolute; left: -7px; right: -7px; top: -18px; bottom: -18px;
}
.yjj-nb { white-space: nowrap; }
/* ================================================================
LPf4（2026-09-05）100人会議 round1 の A ランク残件（デザイン・可読性・
タップ領域だけ）。文言・金額・CTAの遷移先は一切変えていない。
================================================================ */
/* --- A#20 / 03-9-2 料金カードを PC で横並びに（SP は縦積みのまま） --- */
@media (min-width: 768px) {
.yjj-price { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.yjj-price__card { margin-bottom: 0; }
/* 幅が 760→491px に狭まる分、金額行は SP と同じ「見出し／金額を縦」にして右揃えの孤立行を出さない */
.yjj-price__rows div { flex-direction: column; gap: 4px; }
.yjj-price__rows dd { text-align: left; padding-left: 21px; }
.yjj-price__notes, .yjj-price__note { grid-column: 1 / -1; }
}
/* --- A#16 / 02-8-4 / 08-9-2 比較表: SP で右端のフェードを 26→44px に広げ、
「次の列が続いている」ことを見せる（初期表示で2列目が約40px 覗く） --- */
.yjj-table-wrap::after { width: 44px; }
/* --- A#29 / 03-8-1 / 03-9-1 物件カードのモック内3ボタンに主従を付ける
「買付お申し込み」=塗り（主）／「物件資料を見る」=淡色（従）／「気になる」=線（従） --- */
.yjj-card__btn--doc { background: #e3f4ee; color: #0a6a50; border: 1.5px solid #bfe3d5; }
.yjj-card__btn--like { background: #fff; color: #5a5a5a; border: 1.5px solid #d6dbe3; }
.yjj-card__btn--cv { background: #1e6fd9; color: #fff; border: 1.5px solid #1e6fd9; font-size: 15px; letter-spacing: .02em; }
/* --- 03-3-2 無料／有料の比較で、有料カードだけ枠を主色に --- */
.yjj-offer__col--paid { border: 2px solid var(--lps-primary); }
/* --- 07-1-4 キーボード操作のフォーカス表示（今まで1件も無かった） --- */
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 3px solid #1e6fd9; outline-offset: 3px; border-radius: 4px;
}
.yjj-btn-line:focus-visible, .lps-btn-red:focus-visible,
.cta__scroll-bottom a:focus-visible, .yjj-tex-navy a:focus-visible {
outline-color: #fff; box-shadow: 0 0 0 6px rgba(30,111,217,.6);
}
/* --- 08-1-1 タップ時のハイライトを買取くん由来の金色からブランド青へ --- */
a, button, summary, .lps-cvband__unibox { -webkit-tap-highlight-color: rgba(30,111,217,.18); }
/* --- final-check §7 タップ領域 44px 未満の2件 ---
FAQ 本文中のテキストリンク（高さ21px）: inline の上下 padding は行送りを変えないので、
見た目そのまま指で押せる範囲だけ上下 +10px。 */
.faq-item p a { padding: 12px 2px; margin: 0 -2px; }
/* PC ヘッダーの「会員の方はこちら」（高さ29px）: 上下 padding で 44px に */
@media (min-width: 768px) {
.yjj-member-link { padding: 14px 4px; }
}
/* --- A#18 / 07-4-2 「数字で見るRKC」を dl 化した分の見た目合わせ（p→dl・br→dt/dd） --- */
dl.lps-trust__title { margin: 0; }
dl.lps-trust__title dt { font-weight: inherit; }
dl.lps-trust__title dd { margin: 0; }
/* ============================================================
申込フォームの埋め込み（#join-embed）／2026-09-05 P2
既定は hidden。config.js の JOIN_EMBED_ENABLED=true のときだけ JS が表示する。
高さは cross-origin のため自動追従できないので、実測値を JS が --join-embed-h に入れる。
============================================================ */
.yjj-join-embed { padding: 48px 16px 56px; background: #fff; }
/* CTAは全部この区画へのスクロール。sticky ヘッダー（実測 SP 70px / PC 97px）に
見出しが潜るので、ヘッダー実高＋余白ぶんだけスクロール位置を上げる。
（#chat の scroll-margin-top と同じ考え方） */
.yjj-join-embed { scroll-margin-top: 78px; }
@media (min-width: 768px) { .yjj-join-embed { scroll-margin-top: 106px; } }
.yjj-join-embed[hidden] { display: none !important; }
.yjj-join-embed__h { margin: 0 0 8px; font-size: 24px; text-align: center; }
.yjj-join-embed__lead { margin: 0 auto 20px; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.8; }
.yjj-join-embed__frame { width: 100%; max-width: 720px; margin: 0 auto; }
.yjj-join-embed__frame iframe {
display: block; width: 100%; height: var(--join-embed-h, 1400px);
border: 0; background: #fff;
}
/* =====================================================================
▼▼▼ YJJ（融資情報ジャーナル）レイヤー ▼▼▼
2026-09-07 追加。ここから下が YJJ 用。
方針:
- 上の RKC 由来の部品は **消さない**（消すと他の部品が連鎖して壊れるため）。
ここでは「トークンを足す」「YJJ固有の部品を足す」「必要な箇所だけ上書きする」方向で作る。
- トーンは金融・信頼: 基調ネイビー＋ゴールド。CTA は LINE 公式グリーン（--lps-line-brand）のまま。
- 下線・マーカーは必ず文字色を濃くする（feedback_underline_text_contrast）。
- prefers-reduced-motion の分岐は末尾でまとめて拡張する。
===================================================================== */
/* ---------------------------------------------------------------------
T0. デザイントークン（ここが一元管理の入口。色・間隔・影・字送りは全部ここ）
--------------------------------------------------------------------- */
:root {
/* --- ネイビー ramp（基調・信頼） --- */
--yjj-navy-50: #eef3f9;
--yjj-navy-100: #d8e3f0;
--yjj-navy-200: #b3c8e0;
--yjj-navy-300: #86a6c9;
--yjj-navy-400: #5b83ac;
--yjj-navy-500: #3d6b99;
--yjj-navy-600: #2b5480;
--yjj-navy-700: #1f4368;
--yjj-navy-800: #16304d;
--yjj-navy-900: #0f2740;
--yjj-navy-950: #091a2c;
/* --- ゴールド ramp（格・実績・特典） --- */
--yjj-gold-50: #fbf6e9;
--yjj-gold-100: #f5e9c6;
--yjj-gold-200: #ebd696;
--yjj-gold-300: #ddbe63;
--yjj-gold-400: #cfa63f;
--yjj-gold-500: #c99a2e;
--yjj-gold-600: #a97e21;
--yjj-gold-700: #86621a;
--yjj-gold-800: #654b12;
--yjj-gold-900: #47340b;
/* --- ニュートラル（紙・文字） --- */
--yjj-n-0: #ffffff;
--yjj-n-25: #fbfcfe;
--yjj-n-50: #f5f7fa;
--yjj-n-100: #eceff4;
--yjj-n-200: #dde2ea;
--yjj-n-300: #c3cad6;
--yjj-n-400: #9aa4b4;
--yjj-n-500: #6f7a8b;
--yjj-n-600: #55606e;
--yjj-n-700: #3d4652;
--yjj-n-800: #272e38;
--yjj-n-900: #161b22;
/* --- LINE グリーン（主CTA専用） --- */
--yjj-line-100: #d6f5e2;
--yjj-line-300: #6fdc9b;
--yjj-line-500: #06c755;
--yjj-line-600: #05a648;
--yjj-line-700: #04853a;
--yjj-line-ink: #04361a;
/* --- 損失・警告（赤系。数字の“痛み”に使う） --- */
--yjj-loss-50: #fdf0ec;
--yjj-loss-100: #f9d8cd;
--yjj-loss-300: #ef9f83;
--yjj-loss-500: #d94e00;
--yjj-loss-600: #b53f00;
--yjj-loss-700: #8c3100;
/* --- 肯定（比較表のOK側） --- */
--yjj-ok-50: #e9f6ee;
--yjj-ok-100: #cbeada;
--yjj-ok-300: #7fc79f;
--yjj-ok-500: #2f9a63;
--yjj-ok-600: #24784d;
--yjj-ok-700: #1a5a39;
/* --- 面（サーフェス） --- */
--yjj-surface-page: var(--yjj-n-25);
--yjj-surface-card: var(--yjj-n-0);
--yjj-surface-card-alt: var(--yjj-navy-50);
--yjj-surface-sunken: var(--yjj-n-100);
--yjj-surface-navy: var(--yjj-navy-900);
--yjj-surface-navy-soft: var(--yjj-navy-800);
--yjj-surface-gold: var(--yjj-gold-50);
--yjj-surface-loss: var(--yjj-loss-50);
--yjj-surface-ok: var(--yjj-ok-50);
--yjj-surface-overlay: rgba(9, 26, 44, .62);
--yjj-surface-scrim: rgba(9, 26, 44, .88);
--yjj-surface-glass: rgba(255, 255, 255, .08);
/* --- 文字色 --- */
--yjj-text-strong: var(--yjj-n-900);
--yjj-text: var(--yjj-n-800);
--yjj-text-muted: var(--yjj-n-600);
--yjj-text-faint: var(--yjj-n-500);
--yjj-text-on-navy: #ffffff;
--yjj-text-on-navy-muted: var(--yjj-navy-100);
--yjj-text-gold: var(--yjj-gold-800);
--yjj-text-loss: var(--yjj-loss-600);
--yjj-text-ok: var(--yjj-ok-700);
--yjj-text-link: var(--yjj-navy-700);
/* --- 罫線 --- */
--yjj-border-hair: 1px solid var(--yjj-n-200);
--yjj-border-soft: 1px solid var(--yjj-n-300);
--yjj-border-strong: 2px solid var(--yjj-navy-800);
--yjj-border-gold: 2px solid var(--yjj-gold-500);
--yjj-border-gold-hair: 1px solid var(--yjj-gold-300);
--yjj-border-navy-hair: 1px solid var(--yjj-navy-200);
--yjj-border-loss: 2px solid var(--yjj-loss-300);
--yjj-border-ok: 2px solid var(--yjj-ok-300);
/* --- 影 --- */
--yjj-shadow-0: none;
--yjj-shadow-1: 0 1px 2px rgba(15, 39, 64, .10);
--yjj-shadow-2: 0 2px 4px rgba(15, 39, 64, .12), 0 10px 22px rgba(15, 39, 64, .12);
--yjj-shadow-3: 0 4px 10px rgba(15, 39, 64, .14), 0 18px 36px rgba(15, 39, 64, .16);
--yjj-shadow-4: 0 8px 20px rgba(15, 39, 64, .18), 0 28px 56px rgba(15, 39, 64, .20);
--yjj-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .55);
--yjj-shadow-gold: 0 2px 0 var(--yjj-gold-700), 0 10px 20px rgba(101, 75, 18, .22);
--yjj-shadow-line: 0 3px 0 var(--yjj-line-700), 0 12px 24px rgba(4, 133, 58, .28);
--yjj-shadow-text: 0 2px 8px rgba(0, 0, 0, .35);
--yjj-shadow-ring: 0 0 0 3px rgba(61, 107, 153, .35);
/* --- 角丸 --- */
--yjj-radius-0: 0;
--yjj-radius-xs: 3px;
--yjj-radius-sm: 6px;
--yjj-radius-md: 10px;
--yjj-radius-lg: 14px;
--yjj-radius-xl: 20px;
--yjj-radius-2xl: 28px;
--yjj-radius-pill: 999px;
/* --- 余白スケール --- */
--yjj-space-0: 0;
--yjj-space-1: 2px;
--yjj-space-2: 4px;
--yjj-space-3: 6px;
--yjj-space-4: 8px;
--yjj-space-5: 10px;
--yjj-space-6: 12px;
--yjj-space-7: 16px;
--yjj-space-8: 20px;
--yjj-space-9: 24px;
--yjj-space-10: 32px;
--yjj-space-11: 40px;
--yjj-space-12: 56px;
--yjj-space-13: 72px;
--yjj-space-14: 96px;
/* --- 書体 --- */
--yjj-font-body: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
--yjj-font-num: 'Anton', var(--yjj-font-body);
--yjj-font-serif: 'Shippori Mincho', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
--yjj-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--yjj-font-story: var(--yjj-font-serif);
/* --- 文字サイズ（SP基準。12px床・本文15px床） --- */
--yjj-fs-micro: 0.75rem;
--yjj-fs-note: 0.78125rem;
--yjj-fs-caption: 0.8125rem;
--yjj-fs-small: 0.875rem;
--yjj-fs-body: 0.9375rem;
--yjj-fs-body-lg: 1rem;
--yjj-fs-lead: 1.03125rem;
--yjj-fs-h4: 1.0625rem;
--yjj-fs-h3: 1.1875rem;
--yjj-fs-h2: 1.4375rem;
--yjj-fs-h1: 1.5625rem;
--yjj-fs-num-sm: 26px;
--yjj-fs-num-md: 38px;
--yjj-fs-num-lg: 54px;
/* --- 行間・字送り --- */
--yjj-lh-tight: 1.25;
--yjj-lh-snug: 1.4;
--yjj-lh-normal: 1.7;
--yjj-lh-relaxed: 1.9;
--yjj-lh-num: 1.02;
--yjj-lh-caption: 1.6;
--yjj-ls-tight: -0.01em;
--yjj-ls-normal: 0;
--yjj-ls-wide: .04em;
--yjj-ls-wider: .08em;
--yjj-ls-num: .02em;
--yjj-ls-eyebrow: .12em;
/* --- ウェイト --- */
--yjj-fw-normal: 500;
--yjj-fw-medium: 500;
--yjj-fw-bold: 700;
--yjj-fw-black: 900;
--yjj-fw-num: 400;
/* --- レイヤー --- */
--yjj-z-base: 0;
--yjj-z-raised: 1;
--yjj-z-sticky-header: 20;
--yjj-z-overlay: 40;
--yjj-z-crs-arrow: 45;
--yjj-z-stickybar: 60;
--yjj-z-skiplink: 80;
--yjj-z-top: 100;
/* --- モーション --- */
--yjj-dur-instant: 0ms;
--yjj-dur-fast: 120ms;
--yjj-dur-base: 220ms;
--yjj-dur-slow: 420ms;
--yjj-dur-video: 900ms;
--yjj-ease-out: cubic-bezier(.22, .61, .36, 1);
--yjj-ease-in-out: cubic-bezier(.45, .05, .55, .95);
--yjj-ease-emph: cubic-bezier(.16, 1, .3, 1);
/* --- 幅 --- */
--yjj-w-narrow: 640px;
--yjj-w-text: 760px;
--yjj-w-content: 920px;
--yjj-w-wide: 1120px;
--yjj-w-full: 1360px;
--yjj-w-gutter: 16px;
/* --- グラデーション --- */
--yjj-grad-fv: linear-gradient(160deg, var(--yjj-navy-950) 0%, var(--yjj-navy-900) 48%, var(--yjj-navy-700) 100%);
--yjj-grad-fv-veil: linear-gradient(180deg, rgba(9,26,44,.20) 0%, rgba(9,26,44,.74) 66%, rgba(9,26,44,.96) 100%);
--yjj-grad-gold: linear-gradient(135deg, var(--yjj-gold-300) 0%, var(--yjj-gold-500) 52%, var(--yjj-gold-700) 100%);
--yjj-grad-gold-hair: linear-gradient(90deg, transparent, var(--yjj-gold-400), transparent);
--yjj-grad-line: linear-gradient(180deg, var(--yjj-line-500) 0%, var(--yjj-line-600) 100%);
--yjj-grad-loss: linear-gradient(90deg, var(--yjj-loss-300) 0%, var(--yjj-loss-500) 70%, var(--yjj-loss-700) 100%);
--yjj-grad-paper: linear-gradient(180deg, var(--yjj-n-25) 0%, var(--yjj-navy-50) 100%);
--yjj-grad-navy-soft: linear-gradient(180deg, var(--yjj-navy-800) 0%, var(--yjj-navy-950) 100%);
/* --- 部品トークン: FV --- */
--yjj-fv-bg: var(--yjj-grad-fv);
--yjj-fv-veil: var(--yjj-grad-fv-veil);
--yjj-fv-photo-opacity: .34;
--yjj-fv-pad-y: var(--yjj-space-9);
--yjj-fv-pad-x: var(--yjj-w-gutter);
--yjj-fv-title-size: var(--yjj-fs-h1);
--yjj-fv-title-lh: 1.36;
--yjj-fv-sub-size: var(--yjj-fs-body);
--yjj-fv-eyebrow-bg: var(--yjj-gold-500);
--yjj-fv-eyebrow-ink: var(--yjj-navy-950);
--yjj-fv-mark-line: 4px solid var(--yjj-gold-400);
--yjj-fv-chip-bg: rgba(255, 255, 255, .12);
--yjj-fv-chip-ink: #ffffff;
/* --- 部品トークン: 特典ブロック --- */
--yjj-tokuten-bg: rgba(255, 255, 255, .96);
--yjj-tokuten-ink: var(--yjj-navy-900);
--yjj-tokuten-border: 3px solid var(--yjj-gold-500);
--yjj-tokuten-radius: var(--yjj-radius-lg);
--yjj-tokuten-pad: var(--yjj-space-7);
--yjj-tokuten-label-bg: var(--yjj-navy-900);
--yjj-tokuten-label-ink: var(--yjj-gold-200);
--yjj-tokuten-num-size: 46px;
--yjj-tokuten-hl-bg: var(--yjj-gold-100);
--yjj-tokuten-hl-ink: var(--yjj-gold-900);
--yjj-tokuten-emblem-size: 76px;
/* --- 部品トークン: 実績バッジ --- */
--yjj-badge-bg: var(--yjj-n-0);
--yjj-badge-border: var(--yjj-border-gold);
--yjj-badge-radius: var(--yjj-radius-lg);
--yjj-badge-num-ink: var(--yjj-navy-800);
--yjj-badge-label-ink: var(--yjj-n-700);
--yjj-badge-ico-ink: var(--yjj-gold-600);
--yjj-badge-pad: var(--yjj-space-7) var(--yjj-space-5);
--yjj-badge-shadow: var(--yjj-shadow-2);
/* --- 部品トークン: 損失チャート --- */
--yjj-chart-bg: var(--yjj-n-0);
--yjj-chart-border: var(--yjj-border-navy-hair);
--yjj-chart-radius: var(--yjj-radius-lg);
--yjj-chart-pad: var(--yjj-space-8) var(--yjj-space-7);
--yjj-chart-track: var(--yjj-n-100);
--yjj-chart-fill: var(--yjj-grad-loss);
--yjj-chart-fill-base: var(--yjj-navy-300);
--yjj-chart-bar-h: 18px;
--yjj-chart-bar-radius: var(--yjj-radius-pill);
--yjj-chart-key-ink: var(--yjj-navy-800);
--yjj-chart-val-ink: var(--yjj-loss-600);
--yjj-chart-cond-ink: var(--yjj-text-muted);
/* --- 部品トークン: カード --- */
--yjj-card-bg: var(--yjj-surface-card);
--yjj-card-border: var(--yjj-border-hair);
--yjj-card-radius: var(--yjj-radius-lg);
--yjj-card-pad: var(--yjj-space-8);
--yjj-card-shadow: var(--yjj-shadow-2);
--yjj-card-gap: var(--yjj-space-7);
--yjj-card-title-size: var(--yjj-fs-h3);
--yjj-card-body-size: var(--yjj-fs-body);
--yjj-card-no-bg: var(--yjj-navy-800);
--yjj-card-no-ink: var(--yjj-gold-200);
/* --- 部品トークン: 比較表 --- */
--yjj-table-head-bg: var(--yjj-navy-800);
--yjj-table-head-ink: #ffffff;
--yjj-table-own-bg: var(--yjj-gold-50);
--yjj-table-own-ink: var(--yjj-navy-900);
--yjj-table-row-bg: var(--yjj-n-0);
--yjj-table-row-alt: var(--yjj-n-50);
--yjj-table-border: 1px solid var(--yjj-n-200);
--yjj-table-ok-ink: var(--yjj-ok-600);
--yjj-table-x-ink: var(--yjj-n-500);
--yjj-table-cell-pad: var(--yjj-space-6);
/* --- 部品トークン: CTA --- */
--yjj-cta-bg: var(--yjj-grad-line);
--yjj-cta-ink: #ffffff;
--yjj-cta-accent: var(--lps-yellow);
--yjj-cta-radius: var(--yjj-radius-pill);
--yjj-cta-pad-y: var(--yjj-space-8);
--yjj-cta-pad-x: var(--yjj-space-9);
--yjj-cta-shadow: var(--yjj-shadow-line);
--yjj-cta-top-size: var(--yjj-fs-small);
--yjj-cta-main-size: 19px;
--yjj-cta-band-bg: var(--yjj-navy-900);
--yjj-cta-band-ink: #ffffff;
--yjj-cta-micro-ink: var(--yjj-navy-100); /* 濃紺帯の中でだけ使う */
/* --- 部品トークン: FAQ --- */
--yjj-faq-bg: var(--yjj-n-0);
--yjj-faq-border: var(--yjj-border-hair);
--yjj-faq-radius: var(--yjj-radius-md);
--yjj-faq-q-ink: var(--yjj-navy-900);
--yjj-faq-a-ink: var(--yjj-text);
--yjj-faq-marker: var(--yjj-gold-600);
--yjj-faq-pad: var(--yjj-space-7);
--yjj-faq-gap: var(--yjj-space-5);
/* --- 部品トークン: 藤山ストーリー --- */
--yjj-story-bg: var(--yjj-n-25);
--yjj-story-ink: var(--yjj-text);
--yjj-story-size: var(--yjj-fs-body-lg);
--yjj-story-lh: var(--yjj-lh-relaxed);
--yjj-story-measure: 34em;
--yjj-story-quote-bg: var(--yjj-navy-900);
--yjj-story-quote-ink: #ffffff;
--yjj-story-quote-size: 22px;
--yjj-story-punch-ink: var(--yjj-navy-900);
--yjj-story-punch-size: 19px;
--yjj-story-rule: var(--yjj-grad-gold-hair);
/* --- 部品トークン: ステージ --- */
--yjj-stage-bg: var(--yjj-n-0);
--yjj-stage-border: var(--yjj-border-gold-hair);
--yjj-stage-who-bg: var(--yjj-navy-800);
--yjj-stage-who-ink: var(--yjj-gold-200);
--yjj-stage-title-ink: var(--yjj-navy-900);
--yjj-stage-body-ink: var(--yjj-text-muted);
--yjj-stage-radius: var(--yjj-radius-lg);
--yjj-stage-pad: var(--yjj-space-8);
/* --- 部品トークン: 向き不向き --- */
--yjj-fit-ok-bg: var(--yjj-surface-ok);
--yjj-fit-ok-border: var(--yjj-border-ok);
--yjj-fit-ok-ink: var(--yjj-text-ok);
--yjj-fit-ng-bg: var(--yjj-n-50);
--yjj-fit-ng-border: var(--yjj-border-soft);
--yjj-fit-ng-ink: var(--yjj-n-600);
--yjj-fit-radius: var(--yjj-radius-lg);
--yjj-fit-pad: var(--yjj-space-8);
/* --- 部品トークン: 正直に伝える --- */
--yjj-assure-bg: var(--yjj-navy-50);
--yjj-assure-card-bg: var(--yjj-n-0);
--yjj-assure-k-bg: var(--yjj-gold-500);
--yjj-assure-k-ink: var(--yjj-navy-950);
--yjj-assure-title-ink: var(--yjj-navy-900);
--yjj-assure-body-ink: var(--yjj-text);
--yjj-assure-radius: var(--yjj-radius-lg);
--yjj-assure-pad: var(--yjj-space-8);
/* --- 部品トークン: 対比（古い情報 / 歪みを取る） --- */
--yjj-flip-old-bg: var(--yjj-n-100);
--yjj-flip-old-ink: var(--yjj-n-600);
--yjj-flip-old-border: var(--yjj-border-soft);
--yjj-flip-new-bg: var(--yjj-navy-900);
--yjj-flip-new-ink: #ffffff;
--yjj-flip-new-border: var(--yjj-border-gold);
--yjj-flip-radius: var(--yjj-radius-lg);
--yjj-flip-pad: var(--yjj-space-8);
--yjj-flip-gap: var(--yjj-space-6);
--yjj-flip-marker: var(--yjj-gold-400);
/* --- 部品トークン: レポートに載っていること6項目 --- */
--yjj-get6-bg: var(--yjj-n-0);
--yjj-get6-border: var(--yjj-border-hair);
--yjj-get6-no-bg: var(--yjj-gold-500);
--yjj-get6-no-ink: var(--yjj-navy-950);
--yjj-get6-title-ink: var(--yjj-navy-900);
--yjj-get6-body-ink: var(--yjj-text-muted);
--yjj-get6-radius: var(--yjj-radius-md);
--yjj-get6-pad: var(--yjj-space-7);
/* --- 部品トークン: レポート実物カルーセル --- */
--yjj-report-w: 332px; /* FABLE §5-2 */
--yjj-report-w-pc: 380px; /* FABLE §5-2: PC 3枚見せ */
--yjj-report-radius: var(--yjj-radius-md);
--yjj-report-border: var(--yjj-border-soft);
--yjj-report-shadow: var(--yjj-shadow-3);
--yjj-report-gap: var(--yjj-space-6);
--yjj-report-arrow-bg: var(--yjj-navy-900);
--yjj-report-arrow-ink: #ffffff;
/* --- 部品トークン: フッター・追従バー・ヘッダー --- */
--yjj-footer-bg: var(--yjj-navy-950);
--yjj-footer-ink: var(--yjj-navy-100);
--yjj-footer-link: #ffffff;
--yjj-footer-note-ink: var(--yjj-navy-200);
--yjj-footer-pad: var(--yjj-space-11) var(--yjj-w-gutter);
--yjj-sticky-bg: rgba(15, 39, 64, .96);
--yjj-sticky-ink: #ffffff;
--yjj-sticky-pad: var(--yjj-space-5);
--yjj-header-bg: rgba(255, 255, 255, .94);
--yjj-header-ink: var(--yjj-navy-900);
--yjj-header-h: 52px;
}
/* PC ではタイポの基準を一段上げる（トークンだけ差し替える＝部品側は触らない） */
@media (min-width: 768px) {
:root {
--yjj-fs-body: 1rem;
--yjj-fs-body-lg: 1.0625rem;
--yjj-fs-lead: 1.125rem;
--yjj-fs-h4: 1.1875rem;
--yjj-fs-h3: 1.375rem;
--yjj-fs-h2: 2rem;
--yjj-fs-h1: 2.625rem;
--yjj-fs-num-md: 52px;
--yjj-fs-num-lg: 76px;
--yjj-w-gutter: 24px;
--yjj-fv-title-size: var(--yjj-fs-h1);
--yjj-tokuten-num-size: 64px;
--yjj-tokuten-emblem-size: 108px;
--yjj-chart-bar-h: 24px;
--yjj-cta-main-size: 23px;
--yjj-story-quote-size: 30px;
--yjj-story-punch-size: 24px;
--yjj-header-h: 64px;
}
}
@media (min-width: 1200px) {
:root {
--yjj-fs-h1: 46px;
--yjj-fs-num-lg: 84px;
--yjj-w-gutter: 32px;
}
}
/* ---------------------------------------------------------------------
T1. ベースの上書き（RKC の生成り・和風トーン → 金融・信頼トーン）
既存の変数名は残したまま値だけ寄せる＝既存部品が全部そのまま追従する
--------------------------------------------------------------------- */
:root {
--lps-primary: var(--yjj-navy-900);
--lps-primary-tri: var(--yjj-navy-950);
--lps-line: var(--yjj-navy-500);
--lps-cv: var(--yjj-gold-500);
--lps-cv-edge: var(--yjj-gold-700);
--lps-aqua: var(--yjj-navy-50);
--lps-ink: var(--yjj-text);
--yjj-paper: var(--yjj-navy-50);
--lps-shadow-2: var(--yjj-shadow-2);
}
.yjj-body { background: var(--yjj-surface-page); color: var(--yjj-text); }
.yjj-skiplink {
position: absolute; left: -9999px; top: 0; z-index: var(--yjj-z-skiplink);
background: var(--yjj-navy-900); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--yjj-radius-sm) 0;
font-size: var(--yjj-fs-small); font-weight: var(--yjj-fw-bold);
}
.yjj-skiplink:focus { left: 0; }
.yjj-header { background: var(--yjj-header-bg); color: var(--yjj-header-ink); min-height: var(--yjj-header-h); }
/* 見出しの中の数字・キーワードを一段だけ立てる（乱用しない） */
.yjj-h2num { color: var(--yjj-gold-600); font-family: var(--yjj-font-num); font-size: 1.28em; letter-spacing: var(--yjj-ls-num); }
.yjj-mark {
background: linear-gradient(transparent 62%, var(--yjj-gold-200) 62%);
color: var(--yjj-gold-900); font-weight: var(--yjj-fw-black); padding: 0 .1em;
}
.yjj-eyebrow {
display: inline-block; font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-bold);
letter-spacing: var(--yjj-ls-eyebrow); color: var(--yjj-navy-600);
border-bottom: var(--yjj-border-gold-hair); padding-bottom: var(--yjj-space-2); margin-bottom: var(--yjj-space-6);
}
.yjj-slash {
text-align: center; font-weight: var(--yjj-fw-black); color: var(--yjj-navy-800);
font-size: var(--yjj-fs-h4); margin: var(--yjj-space-11) 0 var(--yjj-space-8);
}
/* ---------------------------------------------------------------------
T2. FV（YJJ）: 特典ブロック・条件チップ
--------------------------------------------------------------------- */
.yjj-fv--yjj { background: var(--yjj-fv-bg); }
.yjj-fv--yjj .yjj-fv__bg img { opacity: var(--yjj-fv-photo-opacity); }
.yjj-fv--yjj .yjj-fv__bg::after { background: var(--yjj-fv-veil); }
.yjj-fv--yjj .yjj-fv__eyebrow { background: var(--yjj-fv-eyebrow-bg); color: var(--yjj-fv-eyebrow-ink); border-bottom: 0; }
.yjj-fv--yjj .yjj-fv__title { font-size: var(--yjj-fv-title-size); line-height: var(--yjj-fv-title-lh); text-shadow: var(--yjj-shadow-text); }
.yjj-fv--yjj .yjj-fv__title .mark { border-bottom: var(--yjj-fv-mark-line); }
.yjj-fv--yjj .yjj-fv__sub { font-size: var(--yjj-fv-sub-size); line-height: var(--yjj-lh-normal); }
.yjj-fv--yjj .yjj-fv__sub b { color: var(--yjj-gold-200); }
.yjj-tokuten {
display: flex; align-items: center; gap: var(--yjj-space-6);
background: var(--yjj-tokuten-bg); color: var(--yjj-tokuten-ink);
border: var(--yjj-tokuten-border); border-radius: var(--yjj-tokuten-radius);
padding: var(--yjj-tokuten-pad); margin: var(--yjj-space-8) 0;
box-shadow: var(--yjj-shadow-3);
}
.yjj-tokuten__emblem { width: var(--yjj-tokuten-emblem-size); height: auto; flex: 0 0 auto; }
.yjj-tokuten__body { min-width: 0; }
.yjj-tokuten__label {
display: inline-block; background: var(--yjj-tokuten-label-bg); color: var(--yjj-tokuten-label-ink);
font-size: var(--yjj-fs-micro); font-weight: var(--yjj-fw-bold); letter-spacing: var(--yjj-ls-wider);
padding: 3px 10px; border-radius: var(--yjj-radius-xs); margin-bottom: var(--yjj-space-4);
}
.yjj-tokuten__main { font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); line-height: var(--yjj-lh-snug); margin: 0 0 var(--yjj-space-4); }
.yjj-tokuten__main .num { font-family: var(--yjj-font-num); font-size: var(--yjj-tokuten-num-size); line-height: var(--yjj-lh-num); color: var(--yjj-gold-600); letter-spacing: var(--yjj-ls-num); }
.yjj-tokuten__main .u { font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); }
.yjj-tokuten__main .hl { background: var(--yjj-tokuten-hl-bg); color: var(--yjj-tokuten-hl-ink); padding: 0 .18em; border-radius: var(--yjj-radius-xs); }
.yjj-tokuten__note { font-size: var(--yjj-fs-note); line-height: var(--yjj-lh-caption); color: var(--yjj-n-700); margin: 0; }
.yjj-fv__chips { display: flex; flex-wrap: wrap; gap: var(--yjj-space-4); list-style: none; padding: 0; margin: 0 0 var(--yjj-space-8); }
.yjj-fv__chips li {
display: inline-flex; align-items: center; gap: var(--yjj-space-3);
background: var(--yjj-fv-chip-bg); color: var(--yjj-fv-chip-ink);
border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--yjj-radius-pill);
font-size: var(--yjj-fs-micro); font-weight: var(--yjj-fw-bold); padding: 5px 12px;
}
.yjj-fv__chips .yjj-i { width: 14px; height: 14px; }
@media (min-width: 768px) {
.yjj-fv--yjj .yjj-fv__inner { display: block; max-width: var(--yjj-w-content); }
.yjj-tokuten { gap: var(--yjj-space-8); padding: var(--yjj-space-9); }
.yjj-tokuten__main { font-size: var(--yjj-fs-h3); }
.yjj-fv__chips li { font-size: var(--yjj-fs-caption); padding: 7px 16px; }
}
@media (max-width: 400px) {
.yjj-tokuten { flex-direction: column; text-align: center; gap: var(--yjj-space-5); }
.yjj-tokuten__main .num { font-size: 40px; }
}
/* ---------------------------------------------------------------------
T3. 実績3数字（バッジ横並び）
--------------------------------------------------------------------- */
.yjj-numbers { background: var(--yjj-grad-paper); padding: var(--yjj-space-12) var(--yjj-w-gutter); }
.yjj-badges--wide { display: grid; grid-template-columns: 1fr; gap: var(--yjj-space-6); max-width: var(--yjj-w-content); margin: var(--yjj-space-9) auto 0; }
.yjj-badges--wide .yjj-badge {
display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center;
gap: var(--yjj-space-2) var(--yjj-space-6); text-align: left;
background: var(--yjj-badge-bg); border: var(--yjj-badge-border); border-radius: var(--yjj-badge-radius);
padding: var(--yjj-badge-pad); box-shadow: var(--yjj-badge-shadow);
}
.yjj-badges--wide .yjj-i { grid-row: 1 / 3; width: 34px; height: 34px; color: var(--yjj-badge-ico-ink); }
.yjj-badges--wide .yjj-badge__num { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-num-md); line-height: var(--yjj-lh-num); color: var(--yjj-badge-num-ink); letter-spacing: var(--yjj-ls-num); }
.yjj-badges--wide .yjj-badge__num .sm { font-family: var(--yjj-font-body); font-size: var(--yjj-fs-small); font-weight: var(--yjj-fw-black); margin-left: 2px; }
.yjj-badges--wide .yjj-badge__num .pre { font-family: var(--yjj-font-body); font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-bold); margin-right: 4px; }
.yjj-badges--wide .yjj-badge__label { font-size: var(--yjj-fs-caption); line-height: var(--yjj-lh-caption); color: var(--yjj-badge-label-ink); font-weight: var(--yjj-fw-bold); }
.yjj-numbers__note { max-width: var(--yjj-w-text); margin: var(--yjj-space-8) auto 0; font-size: var(--yjj-fs-small); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); text-align: center; }
.yjj-trustband b { color: var(--yjj-navy-800); }
@media (min-width: 768px) {
.yjj-badges--wide { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); }
.yjj-badges--wide .yjj-badge { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.yjj-badges--wide .yjj-i { grid-row: auto; width: 40px; height: 40px; }
}
/* ---------------------------------------------------------------------
T4. 悩み（3枚 + 手記 + 物件情報 vs 融資情報）
--------------------------------------------------------------------- */
.yjj-worry--3 .yjj-worry__list { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); list-style: none; padding: 0; margin: 0; }
.yjj-worry--3 .yjj-worry__list li {
background: var(--yjj-card-bg); border: var(--yjj-card-border); border-radius: var(--yjj-card-radius);
padding: 0 0 var(--yjj-card-pad); box-shadow: var(--yjj-card-shadow); overflow: hidden; display: block;
}
.yjj-worry__thumb { display: block; width: 100%; height: auto; margin-bottom: var(--yjj-space-6); }
.yjj-worry--3 .yjj-worry__list .yjj-i { width: 26px; height: 26px; color: var(--yjj-loss-500); margin: 0 var(--yjj-card-pad) var(--yjj-space-3); }
.yjj-worry--3 .yjj-worry__list b { display: block; padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); line-height: var(--yjj-lh-snug); margin-bottom: var(--yjj-space-4); }
.yjj-worry--3 .yjj-worry__list span { display: block; padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); }
.yjj-worry__essay { max-width: var(--yjj-w-text); margin: var(--yjj-space-11) auto 0; }
.yjj-worry__essay p { font-size: var(--yjj-fs-body-lg); line-height: var(--yjj-lh-relaxed); margin: 0 0 var(--yjj-space-7); }
.yjj-worry__essay b { color: var(--yjj-navy-900); }
.yjj-vs2 { display: grid; grid-template-columns: 1fr; gap: var(--yjj-space-6); max-width: var(--yjj-w-content); margin: var(--yjj-space-9) auto; }
.yjj-vs2__col { background: var(--yjj-n-0); border: var(--yjj-border-soft); border-radius: var(--yjj-radius-lg); padding: var(--yjj-space-8); }
.yjj-vs2__col--hard { background: var(--yjj-navy-900); color: #fff; border-color: var(--yjj-gold-500); }
.yjj-vs2__h { display: flex; align-items: center; gap: var(--yjj-space-4); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin: 0 0 var(--yjj-space-5); }
.yjj-vs2__col--hard .yjj-vs2__h { color: var(--yjj-gold-200); }
.yjj-vs2__h .yjj-i { width: 24px; height: 24px; }
.yjj-vs2__b { font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); margin: 0; }
.yjj-vs2__col--hard .yjj-vs2__b b { color: var(--yjj-gold-200); }
.yjj-worry__punch {
max-width: var(--yjj-w-text); margin: var(--yjj-space-10) auto 0; text-align: center;
font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); line-height: var(--yjj-lh-snug); color: var(--yjj-navy-900);
}
.yjj-worry__punch b { color: var(--yjj-loss-600); }
@media (min-width: 768px) {
.yjj-worry--3 .yjj-worry__list { grid-template-columns: repeat(3, 1fr); }
.yjj-vs2 { grid-template-columns: 1fr 1.15fr; }
}
/* ---------------------------------------------------------------------
T5. 失う3つ
--------------------------------------------------------------------- */
.yjj-lose3 { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); }
.yjj-lose3 .lps-risk__card { position: relative; background: var(--yjj-card-bg); border: var(--yjj-card-border); border-radius: var(--yjj-card-radius); box-shadow: var(--yjj-card-shadow); padding: 0 0 var(--yjj-card-pad); overflow: hidden; }
.lps-risk__img { display: block; width: 100%; height: auto; }
.yjj-lose3 .lps-risk__no {
position: absolute; top: var(--yjj-space-5); left: var(--yjj-space-5); z-index: var(--yjj-z-raised);
background: var(--yjj-card-no-bg); color: var(--yjj-card-no-ink); font-family: var(--yjj-font-num);
font-size: var(--yjj-fs-h4); line-height: 1; padding: 6px 10px; border-radius: var(--yjj-radius-sm);
}
.yjj-lose3 .yjj-i { width: 28px; height: 28px; color: var(--yjj-gold-600); margin: var(--yjj-space-7) var(--yjj-card-pad) var(--yjj-space-3); }
.yjj-lose3 .lps-risk__title { padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin: 0 0 var(--yjj-space-4); }
.yjj-lose3 .lps-risk__body { padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); }
.yjj-lose3 .lps-risk__body b { color: var(--yjj-loss-600); }
@media (min-width: 768px) { .yjj-lose3 { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T6. 損失の可視化（A / B / C の棒グラフ）
--------------------------------------------------------------------- */
.yjj-loss { background: var(--yjj-navy-50); }
.yjj-loss__headline { text-align: center; font-size: var(--yjj-fs-lead); font-weight: var(--yjj-fw-bold); color: var(--yjj-navy-900); margin: var(--yjj-space-8) 0 var(--yjj-space-9); line-height: var(--yjj-lh-snug); }
.yjj-loss__big { display: block; margin: var(--yjj-space-3) 0; }
.yjj-loss__big .num { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-num-lg); line-height: var(--yjj-lh-num); color: var(--yjj-loss-500); letter-spacing: var(--yjj-ls-num); }
.yjj-loss__big .u { font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); color: var(--yjj-loss-600); margin-left: 2px; }
.yjj-loss__suffix { font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); }
.yjj-chart { max-width: var(--yjj-w-content); margin: 0 auto; background: var(--yjj-chart-bg); border: var(--yjj-chart-border); border-radius: var(--yjj-chart-radius); padding: var(--yjj-chart-pad); box-shadow: var(--yjj-shadow-2); }
.yjj-chart__cap { display: flex; align-items: center; gap: var(--yjj-space-4); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin: 0 0 var(--yjj-space-8); }
.yjj-chart__cap .yjj-i { width: 22px; height: 22px; color: var(--yjj-gold-600); }
.yjj-chart__bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--yjj-space-8); }
.yjj-chart__row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "key cond" "bar bar" "val val"; gap: var(--yjj-space-3) var(--yjj-space-5); align-items: center; }
.yjj-chart__key { grid-area: key; display: inline-flex; align-items: baseline; gap: var(--yjj-space-3); }
.yjj-chart__key b { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-h3); color: var(--yjj-chart-key-ink); }
.yjj-chart__key span { font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-bold); color: var(--yjj-navy-700); }
.yjj-chart__cond { grid-area: cond; font-size: var(--yjj-fs-micro); color: var(--yjj-chart-cond-ink); }
.yjj-chart__bar { grid-area: bar; display: block; height: var(--yjj-chart-bar-h); background: var(--yjj-chart-track); border-radius: var(--yjj-chart-bar-radius); overflow: hidden; }
.yjj-chart__bar i { display: block; height: 100%; background: var(--yjj-chart-fill); border-radius: var(--yjj-chart-bar-radius); transition: width var(--yjj-dur-slow) var(--yjj-ease-emph); }
.yjj-chart__row--base .yjj-chart__bar i { background: var(--yjj-chart-fill-base); }
.yjj-chart__val { grid-area: val; font-size: var(--yjj-fs-small); font-weight: var(--yjj-fw-black); color: var(--yjj-chart-val-ink); }
.yjj-chart__val .num { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-num-sm); letter-spacing: var(--yjj-ls-num); }
.yjj-chart__val small { font-size: var(--yjj-fs-caption); margin-left: 2px; }
.yjj-chart__val em { font-style: normal; font-size: var(--yjj-fs-micro); color: var(--yjj-n-600); margin-left: var(--yjj-space-4); }
.yjj-chart__row--base .yjj-chart__val { color: var(--yjj-navy-700); }
.yjj-chart__row--worst .yjj-chart__val { color: var(--yjj-loss-700); }
.yjj-chart__note { font-size: var(--yjj-fs-micro); color: var(--yjj-text-faint); margin: var(--yjj-space-7) 0 0; }
.yjj-loss__fig { max-width: var(--yjj-w-content); margin: var(--yjj-space-10) auto 0; }
.yjj-loss__fig img { display: block; width: 100%; height: auto; border-radius: var(--yjj-radius-lg); box-shadow: var(--yjj-shadow-2); }
.yjj-loss__fig figcaption { font-size: var(--yjj-fs-small); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); margin-top: var(--yjj-space-5); text-align: center; }
@media (min-width: 768px) {
.yjj-chart__row { grid-template-columns: 140px 200px 1fr auto; grid-template-areas: "key cond bar val"; gap: var(--yjj-space-7); }
.yjj-chart__val { text-align: right; white-space: nowrap; }
.yjj-loss__headline { font-size: var(--yjj-fs-h3); }
}
/* ---------------------------------------------------------------------
T7. 歪み3つ・数式
--------------------------------------------------------------------- */
.yjj-formula {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--yjj-space-4);
max-width: var(--yjj-w-content); margin: 0 auto var(--yjj-space-9);
background: var(--yjj-navy-900); border-radius: var(--yjj-radius-lg); padding: var(--yjj-space-8);
}
.yjj-formula__t { font-size: var(--yjj-fs-body); font-weight: var(--yjj-fw-black); color: #fff; background: rgba(255,255,255,.10); border-radius: var(--yjj-radius-sm); padding: 6px 12px; }
.yjj-formula__t--hl { background: var(--yjj-gold-500); color: var(--yjj-navy-950); }
.yjj-formula__op { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-h3); color: var(--yjj-gold-300); }
.yjj-formula__r { font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-gold-200); }
.yjj-dist__grid { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); }
.yjj-dist .lps-result__card { position: relative; background: var(--yjj-card-bg); border: var(--yjj-card-border); border-radius: var(--yjj-card-radius); box-shadow: var(--yjj-card-shadow); overflow: hidden; padding: 0 0 var(--yjj-card-pad); }
.yjj-dist__no { position: absolute; top: var(--yjj-space-5); left: var(--yjj-space-5); z-index: var(--yjj-z-raised); font-family: var(--yjj-font-num); font-size: var(--yjj-fs-h4); background: var(--yjj-gold-500); color: var(--yjj-navy-950); padding: 5px 10px; border-radius: var(--yjj-radius-sm); }
.yjj-dist__title { display: flex; align-items: center; gap: var(--yjj-space-4); padding: var(--yjj-space-7) var(--yjj-card-pad) var(--yjj-space-4); font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); line-height: var(--yjj-lh-snug); }
.yjj-dist__title .yjj-i { width: 24px; height: 24px; flex: 0 0 auto; color: var(--yjj-gold-600); }
.yjj-dist__body { padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); margin: 0; }
.yjj-dist__body b { color: var(--yjj-navy-900); }
@media (min-width: 768px) {
.yjj-dist__grid { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); }
.yjj-formula__t { font-size: var(--yjj-fs-h4); padding: 8px 18px; }
}
@media (max-width: 480px) {
.yjj-formula { gap: var(--yjj-space-3); padding: var(--yjj-space-6); }
.yjj-formula__t { font-size: var(--yjj-fs-small); padding: 5px 9px; }
}
/* ---------------------------------------------------------------------
T8. 属性×銀行情報（3枚）
--------------------------------------------------------------------- */
.yjj-team3--cases { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); }
.yjj-team3--cases .yjj-team3__item { background: rgba(255,255,255,.94); border-radius: var(--yjj-radius-lg); overflow: hidden; box-shadow: var(--yjj-shadow-2); }
.yjj-team3--cases img { display: block; width: 100%; height: auto; }
.yjj-team3--cases p { padding: var(--yjj-space-7); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text); margin: 0; }
.yjj-team3--cases b { display: block; font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin-bottom: var(--yjj-space-3); }
@media (min-width: 768px) { .yjj-team3--cases { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T9. 対比（古い情報で撃沈する人 / 歪みを取りに行ける人）
--------------------------------------------------------------------- */
.yjj-flip { background: var(--yjj-n-50); }
.yjj-flip__grid { display: grid; grid-template-columns: 1fr; gap: var(--yjj-flip-gap); max-width: var(--yjj-w-content); margin: var(--yjj-space-9) auto 0; }
.yjj-flip__col { border-radius: var(--yjj-flip-radius); padding: var(--yjj-flip-pad); }
.yjj-flip__col--old { background: var(--yjj-flip-old-bg); color: var(--yjj-flip-old-ink); border: var(--yjj-flip-old-border); }
.yjj-flip__col--new { background: var(--yjj-flip-new-bg); color: var(--yjj-flip-new-ink); border: var(--yjj-flip-new-border); box-shadow: var(--yjj-shadow-3); }
.yjj-flip__h { display: flex; align-items: center; gap: var(--yjj-space-4); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); margin: 0 0 var(--yjj-space-6); }
.yjj-flip__col--old .yjj-flip__h { color: var(--yjj-n-700); }
.yjj-flip__col--new .yjj-flip__h { color: var(--yjj-gold-200); }
.yjj-flip__h .yjj-i { width: 22px; height: 22px; }
.yjj-flip__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--yjj-space-5); }
.yjj-flip__list li { position: relative; padding-left: 1.35em; font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); }
.yjj-flip__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .55em; height: .55em; border-radius: 50%; background: currentColor; opacity: .55; }
.yjj-flip__col--new .yjj-flip__list li::before { background: var(--yjj-flip-marker); opacity: 1; }
.yjj-flip__col--new .yjj-flip__list b { color: var(--yjj-gold-200); }
.yjj-flip__note { max-width: var(--yjj-w-text); margin: var(--yjj-space-9) auto 0; display: flex; gap: var(--yjj-space-4); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); }
.yjj-flip__note .yjj-i { flex: 0 0 auto; width: 22px; height: 22px; color: var(--yjj-gold-600); }
.yjj-flip__note b { color: var(--yjj-navy-900); }
@media (min-width: 768px) { .yjj-flip__grid { grid-template-columns: 1fr 1fr; gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T10. 導入帯（ネイビー・全幅）
--------------------------------------------------------------------- */
.yjj-introband { background: var(--yjj-grad-navy-soft); color: var(--yjj-text-on-navy); text-align: center; }
.yjj-introband .lps-h2 { color: #fff; }
.yjj-introband__lead { max-width: var(--yjj-w-text); margin: var(--yjj-space-8) auto 0; font-size: var(--yjj-fs-body-lg); line-height: var(--yjj-lh-relaxed); color: var(--yjj-text-on-navy-muted); }
.yjj-introband__scroll { margin: var(--yjj-space-9) 0 0; }
.yjj-introband__scroll .yjj-i { width: 30px; height: 30px; color: var(--yjj-gold-400); animation: yjj-bob 1.8s var(--yjj-ease-in-out) infinite; }
@keyframes yjj-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* ---------------------------------------------------------------------
T11. 藤山ストーリー
--------------------------------------------------------------------- */
.yjj-story { background: var(--yjj-story-bg); }
.yjj-story .lps-chief__card { max-width: var(--yjj-w-content); margin: var(--yjj-space-9) auto; }
.yjj-story .lps-chief__name { font-size: var(--yjj-fs-h2); color: var(--yjj-navy-900); }
.yjj-story__body { max-width: var(--yjj-story-measure); margin: var(--yjj-space-10) auto 0; }
.yjj-story__body p { font-size: var(--yjj-story-size); line-height: var(--yjj-story-lh); color: var(--yjj-story-ink); margin: 0 0 var(--yjj-space-8); }
.yjj-story__body b { color: var(--yjj-navy-900); }
.yjj-story__fig { margin: var(--yjj-space-10) 0; }
.yjj-story__fig img { display: block; width: 100%; height: auto; border-radius: var(--yjj-radius-lg); box-shadow: var(--yjj-shadow-2); }
.yjj-story__fig figcaption { font-size: var(--yjj-fs-caption); color: var(--yjj-text-faint); margin-top: var(--yjj-space-4); text-align: center; }
.yjj-quote {
margin: var(--yjj-space-10) 0; padding: var(--yjj-space-9) var(--yjj-space-8);
background: var(--yjj-story-quote-bg); color: var(--yjj-story-quote-ink);
border-left: 6px solid var(--yjj-gold-500); border-radius: 0 var(--yjj-radius-md) var(--yjj-radius-md) 0;
}
.yjj-quote p { margin: 0; font-family: var(--yjj-font-story); font-size: var(--yjj-story-quote-size); font-weight: var(--yjj-fw-bold); line-height: var(--yjj-lh-snug); color: #fff; }
.yjj-story__punch {
font-family: var(--yjj-font-story); font-size: var(--yjj-story-punch-size) !important;
font-weight: var(--yjj-fw-bold); color: var(--yjj-story-punch-ink) !important;
line-height: var(--yjj-lh-snug) !important; text-align: center;
padding: var(--yjj-space-8) 0; border-top: 1px solid var(--yjj-gold-300); border-bottom: 1px solid var(--yjj-gold-300);
}
.yjj-reasons3 { max-width: var(--yjj-w-wide); margin: var(--yjj-space-12) auto 0; }
.yjj-reasons3__cap { text-align: center; font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin: 0 0 var(--yjj-space-8); }
.yjj-reasons3__cap b { color: var(--yjj-gold-600); }
.yjj-reasons3__grid { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); }
.yjj-reasons3__item { background: var(--yjj-n-0); border: var(--yjj-border-gold-hair); border-radius: var(--yjj-radius-lg); overflow: hidden; box-shadow: var(--yjj-shadow-2); padding-bottom: var(--yjj-card-pad); }
.yjj-reasons3__item img { display: block; width: 100%; height: auto; }
.yjj-reasons3__t { padding: var(--yjj-space-7) var(--yjj-card-pad) var(--yjj-space-4); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-navy-900); margin: 0; line-height: var(--yjj-lh-snug); }
.yjj-reasons3__t .no { color: var(--yjj-gold-600); margin-right: var(--yjj-space-3); }
.yjj-reasons3__b { padding: 0 var(--yjj-card-pad); font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); margin: 0; }
@media (min-width: 768px) {
.yjj-reasons3__grid { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); }
.yjj-story__body p { margin-bottom: var(--yjj-space-9); }
}
/* ---------------------------------------------------------------------
T12. 受け取れるもの（6項目）＋レポート実物カルーセル
--------------------------------------------------------------------- */
.yjj-getting .yjj-lead { max-width: var(--yjj-w-text); margin-left: auto; margin-right: auto; }
.yjj-get6 { display: grid; grid-template-columns: 1fr; gap: var(--yjj-space-6); max-width: var(--yjj-w-wide); margin: 0 auto; }
.yjj-get6__item { background: var(--yjj-get6-bg); border: var(--yjj-get6-border); border-radius: var(--yjj-get6-radius); overflow: hidden; box-shadow: var(--yjj-shadow-1); padding-bottom: var(--yjj-get6-pad); }
.yjj-get6__item img { display: block; width: 100%; height: auto; }
.yjj-get6__t { display: flex; align-items: baseline; gap: var(--yjj-space-4); padding: var(--yjj-space-6) var(--yjj-get6-pad) var(--yjj-space-3); margin: 0; font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-get6-title-ink); }
.yjj-get6__t .no { font-family: var(--yjj-font-num); font-size: var(--yjj-fs-caption); background: var(--yjj-get6-no-bg); color: var(--yjj-get6-no-ink); padding: 3px 7px; border-radius: var(--yjj-radius-xs); }
.yjj-get6__b { padding: 0 var(--yjj-get6-pad); margin: 0; font-size: var(--yjj-fs-small); line-height: var(--yjj-lh-normal); color: var(--yjj-get6-body-ink); }
/* レポート実物のカルーセル: 1枚 = 1画面。台紙（.yjj-crs）の物件カード用スタイルは
.yjj-crs--report で上書きし、幅とトーンだけを差し替える（元の部品は消さない） */
.yjj-crs--report { max-width: var(--yjj-report-w); }
.yjj-crs--report .yjj-crs__track { background: var(--yjj-navy-50); border-radius: var(--yjj-radius-lg); padding: var(--yjj-report-gap); gap: var(--yjj-report-gap); }
.yjj-report { margin: 0; border-radius: var(--yjj-report-radius); border: var(--yjj-report-border); overflow: hidden; box-shadow: var(--yjj-report-shadow); background: var(--yjj-n-0); }
.yjj-report img { display: block; width: 100%; height: auto; }
.yjj-crs--report .yjj-crs__count { font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-bold); color: var(--yjj-text-muted); }
.yjj-crs__hint { text-align: center; font-size: var(--yjj-fs-micro); color: var(--yjj-text-faint); margin: 0 0 var(--yjj-space-6); }
@media (min-width: 768px) { .yjj-crs--report { max-width: var(--yjj-report-w-pc); } }
@media (min-width: 768px) {
.yjj-get6 { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); }
.yjj-report { width: var(--yjj-report-w-pc); }
}
@media (min-width: 480px) and (max-width: 767px) {
.yjj-get6 { grid-template-columns: repeat(2, 1fr); }
}
/* ---------------------------------------------------------------------
T13. 正直にお伝えします（3枚）
--------------------------------------------------------------------- */
.yjj-assure { background: var(--yjj-assure-bg); }
.yjj-assure__grid--3 { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); max-width: var(--yjj-w-wide); margin: var(--yjj-space-9) auto 0; }
.yjj-assure__grid--3 .yjj-assure__item { position: relative; background: var(--yjj-assure-card-bg); border-radius: var(--yjj-assure-radius); padding: var(--yjj-assure-pad); box-shadow: var(--yjj-shadow-2); }
.yjj-assure__grid--3 .yjj-assure__k { display: inline-block; font-family: var(--yjj-font-num); font-size: var(--yjj-fs-caption); background: var(--yjj-assure-k-bg); color: var(--yjj-assure-k-ink); padding: 3px 9px; border-radius: var(--yjj-radius-xs); }
.yjj-assure__grid--3 .yjj-i { width: 24px; height: 24px; color: var(--yjj-gold-600); margin-left: var(--yjj-space-4); vertical-align: middle; }
.yjj-assure__grid--3 h3 { font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-assure-title-ink); margin: var(--yjj-space-6) 0 var(--yjj-space-4); line-height: var(--yjj-lh-snug); }
.yjj-assure__grid--3 p { font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-assure-body-ink); margin: 0; }
@media (min-width: 768px) { .yjj-assure__grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T14. ステージ別
--------------------------------------------------------------------- */
.yjj-stage__grid { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); max-width: var(--yjj-w-wide); margin: var(--yjj-space-9) auto 0; }
.yjj-stage__card { background: var(--yjj-stage-bg); border: var(--yjj-stage-border); border-radius: var(--yjj-stage-radius); overflow: hidden; box-shadow: var(--yjj-shadow-2); padding-bottom: var(--yjj-stage-pad); }
.yjj-stage__card img { display: block; width: 100%; height: auto; }
.yjj-stage__who { display: inline-block; margin: var(--yjj-space-6) 0 0 var(--yjj-stage-pad); background: var(--yjj-stage-who-bg); color: var(--yjj-stage-who-ink); font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-bold); padding: 4px 12px; border-radius: var(--yjj-radius-pill); }
.yjj-stage__t { padding: 0 var(--yjj-stage-pad); margin: var(--yjj-space-5) 0 var(--yjj-space-4); font-size: var(--yjj-fs-h3); font-weight: var(--yjj-fw-black); color: var(--yjj-stage-title-ink); line-height: var(--yjj-lh-snug); }
.yjj-stage__b { padding: 0 var(--yjj-stage-pad); margin: 0; font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-stage-body-ink); }
.yjj-stage__close { max-width: var(--yjj-w-text); margin: var(--yjj-space-10) auto 0; text-align: center; font-size: var(--yjj-fs-body-lg); line-height: var(--yjj-lh-relaxed); color: var(--yjj-navy-900); font-weight: var(--yjj-fw-bold); }
@media (min-width: 768px) { .yjj-stage__grid { grid-template-columns: repeat(3, 1fr); gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T15. 向き / 不向き
--------------------------------------------------------------------- */
.yjj-fit__grid { display: grid; grid-template-columns: 1fr; gap: var(--yjj-card-gap); max-width: var(--yjj-w-content); margin: var(--yjj-space-9) auto 0; }
.yjj-fit__col { border-radius: var(--yjj-fit-radius); padding: var(--yjj-fit-pad); }
.yjj-fit__col--ok { background: var(--yjj-fit-ok-bg); border: var(--yjj-fit-ok-border); }
.yjj-fit__col--ng { background: var(--yjj-fit-ng-bg); border: var(--yjj-fit-ng-border); }
.yjj-fit__h { display: flex; align-items: center; gap: var(--yjj-space-4); font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); margin: 0 0 var(--yjj-space-6); }
.yjj-fit__col--ok .yjj-fit__h { color: var(--yjj-fit-ok-ink); }
.yjj-fit__col--ng .yjj-fit__h { color: var(--yjj-fit-ng-ink); }
.yjj-fit__h .yjj-i { width: 22px; height: 22px; }
.yjj-fit__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--yjj-space-5); }
.yjj-fit__list li { position: relative; padding-left: 1.4em; font-size: var(--yjj-fs-body); line-height: var(--yjj-lh-normal); color: var(--yjj-text); }
.yjj-fit__col--ok .yjj-fit__list li::before { content: "✓"; position: absolute; left: 0; color: var(--yjj-ok-600); font-weight: var(--yjj-fw-black); }
.yjj-fit__col--ng .yjj-fit__list li::before { content: "—"; position: absolute; left: 0; color: var(--yjj-n-400); font-weight: var(--yjj-fw-black); }
.yjj-fit__note { max-width: var(--yjj-w-text); margin: var(--yjj-space-8) auto 0; display: flex; gap: var(--yjj-space-4); font-size: var(--yjj-fs-small); line-height: var(--yjj-lh-normal); color: var(--yjj-text-muted); }
.yjj-fit__note .yjj-i { flex: 0 0 auto; width: 20px; height: 20px; color: var(--yjj-gold-600); }
@media (min-width: 768px) { .yjj-fit__grid { grid-template-columns: 1.2fr 1fr; gap: var(--yjj-space-8); } }
/* ---------------------------------------------------------------------
T16. 最後のメッセージ・フッター
--------------------------------------------------------------------- */
.yjj-closing { background: var(--yjj-grad-paper); }
.yjj-message__punch { font-family: var(--yjj-font-story); font-size: var(--yjj-story-punch-size); font-weight: var(--yjj-fw-bold); color: var(--yjj-navy-900); line-height: var(--yjj-lh-snug); text-align: center; padding: var(--yjj-space-8) 0; }
.yjj-footer { background: var(--yjj-footer-bg); color: var(--yjj-footer-ink); padding: var(--yjj-footer-pad); }
.yjj-footer a { color: var(--yjj-footer-link); }
.yjj-footer__notes { list-style: none; padding: 0; max-width: var(--yjj-w-text); margin: var(--yjj-space-9) auto 0; display: grid; gap: var(--yjj-space-4); }
.yjj-footer__notes li { font-size: var(--yjj-fs-micro); line-height: var(--yjj-lh-caption); color: var(--yjj-footer-note-ink); }
@media (min-width: 768px) {
.yjj-footer__notes { gap: var(--yjj-space-5); }
.yjj-message__punch { padding: var(--yjj-space-9) 0; }
}
/* ---------------------------------------------------------------------
T17. CTA・追従バーの微調整（金融トーン）
--------------------------------------------------------------------- */
.lps-cta__blue { background: var(--yjj-cta-band-bg); color: var(--yjj-cta-band-ink); }
/* CTA下の補足行はセクションの明るい地の上に出る（濃紺の .lps-cta__blue の外側）。
淡色にすると 1.16:1 まで落ちるため、濃紺文字を既定にする（実測是正） */
.lps-cta__micro { color: var(--yjj-navy-700); }
.lps-cta__blue .lps-cta__micro { color: var(--yjj-cta-micro-ink); }
.yjj-btn-line { box-shadow: var(--yjj-cta-shadow); }
.yjj-btn-line__main { font-size: var(--yjj-cta-main-size); }
.yjj-btn-line__top { font-size: var(--yjj-cta-top-size); }
/* 追従バーを金融トーン（濃紺）に。文字色は型の .cta__scroll-bottom .yjj-stickybar__lead
（= var(--lps-primary) 濃紺）に負けるので、同じ詳細度で上書きする＝濃紺地に濃紺文字を出さない */
.cta__scroll-bottom { background: var(--yjj-sticky-bg); color: var(--yjj-sticky-ink); z-index: var(--yjj-z-stickybar); border-top: 1px solid rgba(255,255,255,.16); }
.cta__scroll-bottom .yjj-stickybar__lead { color: var(--yjj-sticky-ink); }
.cta__scroll-bottom .cta__scroll-close { color: var(--yjj-sticky-ink); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }
/* フォーカスリング: キーボード操作でどこにいるか必ず見えるようにする */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--yjj-gold-500); outline-offset: 2px; border-radius: var(--yjj-radius-xs);
}
/* 画面幅が極端に狭い端末（横スクロールを絶対に出さない） */
@media (max-width: 360px) {
:root { --yjj-fs-h1: 22px; --yjj-fs-h2: 20px; --yjj-w-gutter: 12px; --yjj-tokuten-num-size: 36px; }
.yjj-chart__val .num { font-size: 22px; }
.yjj-loss__big .num { font-size: 44px; }
}
/* 横向き（ランドスケープ）のSPでFVが縦に伸びすぎないようにする */
@media (max-width: 900px) and (orientation: landscape) {
.yjj-fv--yjj .yjj-fv__inner { padding-top: var(--yjj-space-8); padding-bottom: var(--yjj-space-8); }
.yjj-tokuten { margin: var(--yjj-space-6) 0; }
}
/* 大画面（本文の行長が伸びすぎないように上限を効かせる） */
@media (min-width: 1440px) {
.yjj-story__body { max-width: 36em; }
.yjj-chart { max-width: var(--yjj-w-wide); }
}
/* 印刷（社内共有でPDF化されることがある） */
@media print {
.cta__scroll-bottom, .yjj-crs__arrow, .yjj-skiplink { display: none !important; }
.yjj-fv--yjj { background: #fff; color: #000; }
.yjj-fv__bg { display: none; }
.yjj-fv--yjj .yjj-fv__title, .yjj-fv--yjj .yjj-fv__sub { color: #000; text-shadow: none; }
}
/* 高コントラスト設定 */
@media (forced-colors: active) {
.yjj-chart__bar i, .yjj-flip__list li::before { forced-color-adjust: none; }
.yjj-tokuten, .yjj-flip__col, .yjj-fit__col { border: 1px solid CanvasText; }
}
/* ---------------------------------------------------------------------
T18. モーション配慮（reduced-motion）
アニメーション・トランジションは全て止める。動画も読み込まない（JS側と二重）
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.yjj-introband__scroll .yjj-i { animation: none; }
.yjj-chart__bar i { transition: none; }
.yjj-fv__video { display: none !important; }
.yjj-crs__track { scroll-behavior: auto; }
.yjj-report, .yjj-stage__card, .yjj-get6__item, .yjj-tokuten { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
.yjj-story__fig img, .yjj-loss__fig img { transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
.yjj-stage__card, .yjj-get6__item, .yjj-reasons3__item {
transition: transform var(--yjj-dur-base) var(--yjj-ease-out), box-shadow var(--yjj-dur-base) var(--yjj-ease-out);
}
.yjj-stage__card:hover, .yjj-get6__item:hover, .yjj-reasons3__item:hover {
transform: translateY(-2px); box-shadow: var(--yjj-shadow-3);
}
}
/* ▲▲▲ YJJ レイヤーここまで ▲▲▲ */
/* ---------------------------------------------------------------------
T19. 端末特性ごとの是正（実機検収で毎回引っかかる箇所を先に潰しておく）
--------------------------------------------------------------------- */
/* 指で操作する端末: タップ領域を 44px 以上に揃える（Lighthouse のタップ領域指摘対策） */
@media (pointer: coarse) {
.yjj-crs__arrow, .cta__scroll-close { min-width: 44px; min-height: 44px; }
.faq-item summary { min-height: 44px; display: flex; align-items: center; }
.footer-flex a, .yjj-textlink { display: inline-block; min-height: 44px; line-height: 44px; }
/* ⚠️ .yjj-member-link をここに含めない。SP は `display:none` が正で、
ここで display を上書きするとヘッダーに 2 行で出てFVに重なる（2026-09-07 実機検収で検出）。
タップ領域は PC 側（min-width:768px）の padding で 44px を満たしている。 */
.yjj-member-link { min-height: 44px; }
}
/* マウス等でホバーできる端末だけ、ホバーの見た目を出す（タッチ端末に残留させない） */
@media (hover: hover) and (pointer: fine) {
.yjj-btn-line:hover { filter: brightness(1.04); }
.yjj-textlink:hover { text-decoration-thickness: 2px; }
.yjj-table tbody tr:hover { background: var(--yjj-table-row-alt); }
}
/* タブレット帯（768〜1023px）: 3カラムが窮屈になるので詰めを緩める */
@media (min-width: 768px) and (max-width: 1023px) {
.yjj-get6 { grid-template-columns: repeat(2, 1fr); }
.yjj-badges--wide .yjj-badge__num { font-size: 34px; }
.yjj-story__body { max-width: 30em; }
}
/* デスクトップ帯: セクションの上下余白を一段広げる */
@media (min-width: 1024px) {
.yjj-numbers, .yjj-loss, .yjj-flip, .yjj-getting, .yjj-stage, .yjj-fit, .yjj-closing {
padding-top: var(--yjj-space-13); padding-bottom: var(--yjj-space-13);
}
.yjj-introband { padding-top: var(--yjj-space-13); padding-bottom: var(--yjj-space-13); }
}
/* SP専用の改行制御（.sp-only は共通CSS側にあるが、YJJ部品でも効かせる） */
@media (min-width: 768px) {
.yjj-fv__title .sp-only, .lps-h2 .sp-only { display: none; }
}
/* 高コントラストを好む設定: 罫線と文字色をさらに強くする */
@media (prefers-contrast: more) {
:root {
--yjj-text-muted: var(--yjj-n-800);
--yjj-text-faint: var(--yjj-n-700);
--yjj-border-hair: 1px solid var(--yjj-n-400);
--yjj-border-soft: 2px solid var(--yjj-n-500);
}
.yjj-mark { background: var(--yjj-gold-200); }
}
/* 端末の文字サイズ拡大時に、数字が箱からはみ出さないようにする */
@media (max-width: 767px) {
.yjj-chart__val, .yjj-loss__big, .yjj-tokuten__main { overflow-wrap: anywhere; }
.yjj-table-wrap { -webkit-overflow-scrolling: touch; }
}
/* ---------------------------------------------------------------------
T20. コントラスト是正（実測でWCAG AAを割った箇所だけをピンポイントで直す）
2026-09-07 実機計測（390px）での実測値をもとに修正。
- 12〜13px の補足文が 4.35:1 / 4.23:1 で AA(4.5) 割れ → 文字色を1段濃くする
- 17px 太字の金色は「大きい文字」の扱いにならない（18.66px未満）ため金は最も濃い段へ
--------------------------------------------------------------------- */
:root {
--yjj-text-faint: var(--yjj-n-600); /* 旧: n-500 = 4.35:1 で AA 割れ */
}
.yjj-chart__note, .yjj-story__fig figcaption, .yjj-crs__hint { color: var(--yjj-n-600); }
.yjj-reasons3__t .no { color: var(--yjj-gold-800); }
.yjj-td-x { color: var(--yjj-n-600); } /* 型の淡いグレー（3.06:1）を AA まで濃くする */
/* ---------------------------------------------------------------------
T20. SPヘッダーの最終ガード（2026-09-07 実機検収）
会員リンクは SP ではヘッダーに出さない（FV直下の .yjj-member-sp が担当）。
どのメディアクエリより後ろに置き、詳細度ではなく順序で確実に勝たせる。
--------------------------------------------------------------------- */
@media (max-width: 767px) {
.lps-header .yjj-member-link { display: none; }
.lps-header { min-height: 56px; padding: 4px 12px; }
.lps-header__logo img { max-height: 34px; width: auto; }
}
/* SPのヘッダーは半透明にしない。背後の本文が透けて「二重に文字が見える」ため
（2026-09-07 実機検収。rgba(255,255,255,.94) では読み負ける） */
@media (max-width: 767px) {
.lps-header { background: #fff; box-shadow: 0 1px 0 rgba(18,30,46,.08), 0 6px 14px rgba(18,30,46,.06); }
}
/* =====================================================================
T21. Round1 実機検収の是正（2026-09-07・本番 loan-info.jp/lp/line01 で実測）
===================================================================== */
/* (1) 追従バーがフッター最下部を隠していた。
実測: バー上端 top=758px に対しコピーライト行が 784〜804px＝完全に隠れる。
バーは SP のみ表示（PC は @media(min-width:768px) で display:none）なので、
同じ条件でフッターの下に逃げ場を作る。バー高さ実測86px + 余白30px。 */
@media (max-width: 767px) {
.lps-footer { padding-bottom: 116px; }
}
/* (2) 日本語見出しの改行が語の途中で割れていた。
実測例:「大きく膨/らむ」「株式会社リ/アテクス」「融資で止まって/いる」。
word-break:auto-phrase は文節単位で折り返す（Chrome 119+）。
非対応ブラウザでは通常の折り返しに戻るだけで、レイアウトは壊れない。 */
/* 見出しだけに当てると、リスト項目・表のセル・フッターの社名など「見出しではない場所」の
改行破綻が残る（Round1で li の「融資で止まって/いる」、td の「株式会社リ/アテクス」を実測）。
日本語ページ全体に効かせる。非対応ブラウザは通常の折り返しに戻るだけで壊れない。 */
.yjj-body,
.yjj-body h1, .yjj-body h2, .yjj-body h3, .yjj-body h4,
.yjj-body p, .yjj-body li, .yjj-body dt, .yjj-body dd,
.yjj-body td, .yjj-body th, .yjj-body figcaption, .yjj-body summary, .yjj-body span {
word-break: auto-phrase;
line-break: strict; /* 禁則処理を厳格に（行頭の「、。」等を防ぐ） */
overflow-wrap: normal; /* 語の途中で強制的に割らない */
}
/* 例外: 長いURL等は折らないと溢れるので従来どおり */
.yjj-body a[href^="http"] { overflow-wrap: anywhere; }
/* 会社名・サービス名は単語として絶対に割らない */
.yjj-nowrap, .lps-footer__brand strong { white-space: nowrap; }
/* =====================================================================
T22. Round1 FAIL是正（2026-09-07）
FAIL-1 損失試算の表記／FAIL-3 アンカー着地／FAIL-4 改行担保／その他改善
既存指定は一切削除せず、追記の上書きだけで直す。
===================================================================== */
/* ---- FAIL-3: sticky ヘッダー（.lps-header は position:sticky; top:0。
実測 SP min-height 56px / PC 84px）の下にアンカー着地点が潜る。
scroll-margin-top を id を持つ全要素に当てる。
既存の .yjj-join-embed（78/106px）はより具体的なので、そのまま勝つ。 ---- */
:where(section[id], [id]) { scroll-margin-top: 76px; } /* SP: ヘッダー実測65px + 11px */
@media (min-width: 768px) {
:where(section[id], [id]) { scroll-margin-top: 108px; } /* PC: ヘッダー実測96px + 12px */
}
/* ---- FAIL-1: 「約」の添字。数字と同じ行に小さく置く ---- */
.yjj-loss__big .yjj-loss__approx { font-size: var(--yjj-fs-h4); font-weight: var(--yjj-fw-black); color: var(--yjj-loss-600); margin-right: 2px; }
.yjj-chart__val .approx { font-size: var(--yjj-fs-caption); font-weight: var(--yjj-fw-black); margin-right: 1px; }
/* 条件ラベルが「1億円・期間30年・金利1.0%」と長くなったので PC の列幅を広げる */
@media (min-width: 768px) {
.yjj-chart__row { grid-template-columns: 140px 250px 1fr auto; }
.yjj-chart__cond { white-space: nowrap; }
}
/* 前提注記は注意書きとして読ませる（薄すぎると読まれない） */
.yjj-chart__note { color: var(--yjj-text-muted); line-height: var(--yjj-lh-caption); text-align: left; }
/* ---- FAIL-4: 改行担保。word-break:auto-phrase は Chromium 限定で、
WebKit（iOS Safari / LINEアプリ内ブラウザ）では効かない。
このLPはSP流入が主戦場なので、auto-phrase に依存しない担保を2つ置く。
(a) 固有名詞を .yjj-nowrap で囲む（全ブラウザで効く）
(b) 見出しの意味の切れ目に
（SPだけ改行する）
※ 2026-09-07 時点で iOS 実機検証は未実施（この環境では実機が無い）。 ---- */
@supports not (word-break: auto-phrase) {
/* 非対応環境（iOS Safari 等）では文節折返しが効かない前提で組む。
ここでレイアウトを変えるのではなく、(a)(b) の担保が効いている状態を正とする。
追加の強制改行は入れない＝対応環境と行数が変わらないようにする。 */
.yjj-body { word-break: normal; }
}
.yjj-br-sp { display: inline; }
@media (min-width: 768px) { .yjj-br-sp { display: none; } }
/* FVアイブロウ: サービス名を先頭に出す（広告クリック直後の名前一致） */
.yjj-fv__brand { font-weight: 900; letter-spacing: .02em; }
.yjj-fv__eyebrow-sep { opacity: .7; margin: 0 2px; }
/* ---- 改善3: クロージングの丸アバターが頭頂部で切れる（SP #closing） ---- */
.yjj-message__head img { object-position: 50% 18%; }
/* ---- 改善4: FV特典エンブレム（濃紺ベタの正方形）が白カードに浮く。
同系色の円の受け皿に載せて馴染ませる ---- */
.yjj-tokuten__emblem {
border-radius: 50%;
background: var(--yjj-navy-900);
box-shadow: 0 0 0 4px var(--yjj-gold-200), 0 6px 16px rgba(18,30,46,.18);
padding: 0;
}
/* ---- 改善5: 「こんな方に」リスト。アイコン固定幅＋左揃え ---- */
.yjj-fit__list { text-align: left; }
.yjj-fit__list li { display: grid; grid-template-columns: 1.25em 1fr; gap: .4em; padding-left: 0; align-items: start; text-align: left; }
.yjj-fit__list li > * { text-align: left; }
.yjj-fit__col--ok .yjj-fit__list li::before,
.yjj-fit__col--ng .yjj-fit__list li::before { position: static; display: block; text-align: center; line-height: inherit; }
/* ---- 改善6: 「×」「＝」記号がベースラインから浮き、小さすぎて誤植に見える ---- */
.yjj-formula__op { font-family: inherit; font-size: 1.15em; line-height: 1; vertical-align: baseline; margin: 0 .1em; color: var(--yjj-gold-300); }
.lps-h2 .yjj-h2num { vertical-align: baseline; }
/* #after の「属性 × 銀行情報 ＝ 拡大規模」の「=」は数字用フォントだと浮くので本文フォントに戻す */
#after-h .yjj-h2num { font-family: inherit; font-size: 1.05em; margin: 0 .12em; }
/* ---- 改善7: 3ステップのサムネイルが約56pxで内容が判別できない ---- */
.yjj-step { grid-template-columns: 96px 1fr; gap: 14px; }
.yjj-step img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--yjj-radius-sm); }
@media (min-width: 768px) {
.yjj-step { grid-template-columns: 132px 1fr; gap: 20px; }
.yjj-step img { width: 132px; height: 132px; }
}
/* T23. Round3是正: フッター社名の区切り「｜」はSPで1行目の末尾に置く
（PCは1行に収まるので区切りをそのまま出す。SPは br の前に置いて
2行目が「｜」始まりになるのを防ぐ。2026-09-07 実機検収で検出） */
.yjj-sep-sp { display: inline; }
@media (min-width: 768px) { .yjj-br-sp { display: none; } }
/* =====================================================================
R4 — 買取くん超えリニューアル（2026-09-07）
正本: lp/design/TEARDOWN.md ／ DESIGN-PANEL.md ／ COPY-PANEL.md
方針: 既存CSSは削除せず、このブロックの追記だけで上書きする。
===================================================================== */
/* ---- P2-14 ゴールド全廃：旧goldトークンをブルーへ再定義（DESIGN-PANEL §8） ---- */
:root {
--yjj-blue-50: #F1F7FD; --yjj-blue-100: #DCEBFB; --yjj-blue-200: #BBD8F6;
--yjj-blue-300: #8CBEF0; --yjj-blue-400: #52A2EC; --yjj-blue-500: #1E86E8;
--yjj-blue-600: #176FC6; --yjj-blue-700: #1462B4; --yjj-blue-800: #114E8E;
--yjj-blue-900: #0D3A6A;
--yjj-gold-50: var(--yjj-blue-50); --yjj-gold-100: var(--yjj-blue-100);
--yjj-gold-200: var(--yjj-blue-100); --yjj-gold-300: var(--yjj-blue-300);
--yjj-gold-400: var(--yjj-blue-400); --yjj-gold-500: var(--yjj-blue-500);
--yjj-gold-600: var(--yjj-blue-600); --yjj-gold-700: var(--yjj-blue-700);
--yjj-gold-800: var(--yjj-blue-800); --yjj-gold-900: var(--yjj-blue-900);
--yjj-gold: var(--yjj-blue-500); --yjj-gold-ink: var(--yjj-blue-700);
--yjj-gold-edge: none;
--yjj-grad-gold: none;
--yjj-grad-gold-hair: linear-gradient(90deg, transparent, var(--yjj-blue-300), transparent);
--yjj-cream: #FFFFFF;
--yjj-ivory: var(--yjj-blue-50); --yjj-ivory-2: var(--yjj-blue-50);
--yjj-paper: var(--yjj-blue-50);
--yjj-hair: #DDE4EC;
--lps-cv: var(--yjj-blue-500);
--lps-cv-edge: var(--yjj-blue-700);
--yjj-header-h: 70px;
--yjj-header-logo-h: 42px;
--yjj-stickybar-h: 72px;
--yjj-measure: 34em;
}
@media (min-width: 768px) {
:root { --yjj-header-h: 84px; --yjj-header-logo-h: 56px; }
}
/* ---- X-4: ベージュ系テクスチャの実体を消す（tex-wood-light / tex-linen-beige は本番404） ---- */
.yjj-tex-paper, .yjj-tex-wood, .yjj-tex-linen {
background-image: none !important;
background-color: var(--yjj-blue-50) !important;
}
/* ---- X-1: 本文の中央揃えを全廃（DESIGN-PANEL D2・実測173個） ---- */
.yjj-lead, .yjj-preview__lead, .yjj-worry__essay, .yjj-worry__essay p,
.yjj-worry__close, .lps-risk__body, .yjj-dist__body, .yjj-get6__b,
.yjj-stage__b, .yjj-assure__item p, .yjj-chart__note, .yjj-crs__hint,
.yjj-reasons3__b, .yjj-fit__list, .yjj-fit__list li, .yjj-story__body p,
.yjj-message__body p, .yjj-numbers__note, .yjj-flip__list, .yjj-flip__list li,
.yjj-vs2__b, .yjj-preview__caption, .lps-compare__caption, .yjj-assure__foot,
.yjj-fit__note, .yjj-offer__note, .lps-trust__body, .lps-trust__title,
.yjj-lines50__note, .yjj-days30__lead, .yjj-proofdemand__lead,
.yjj-worry__list li span, .yjj-worry__list li b, .lps-risk__close,
.yjj-dist__eq, .yjj-diff__txt, .yjj-cmp-card__dl dd, .faq-html p, .faq-item p {
text-align: left;
max-width: var(--yjj-measure);
margin-inline: auto;
}
.yjj-worry__list li span, .yjj-worry__list li b,
.yjj-fit__list li, .yjj-cmp-card__dl dd, .yjj-diff__txt { max-width: none; }
/* 中央揃えを残すのは 見出し／CTAラベル／明朝パンチ／数字タイル の4種だけ */
.lps-h2, .yjj-btn-line__txt, .yjj-story__punch, .yjj-message__punch,
.yjj-badge, .yjj-loss__headline, .yjj-keyfig__item, .yjj-days30__cap,
.yjj-slash, .lps-cta__blue-copy, .yjj-cta-sub, .lps-cta__micro { text-align: center; }
/* ---- P0-7 ヘッダー（RKC実測に合わせる：70px・影なし・ロゴを大きく） ---- */
.lps-header.yjj-header {
min-height: var(--yjj-header-h);
box-shadow: none !important;
border-bottom: 1px solid var(--yjj-hair);
padding: 4px 16px;
}
.lps-header.yjj-header .lps-header__logo img,
.yjj-header .yjj-logo--h img { height: var(--yjj-header-logo-h) !important; width: auto !important; max-width: 100%; }
/* ---- P0-2/3/4 FV：838px → 500px前後へ圧縮。CTA下端を y<560px に ---- */
.yjj-fv--tight .yjj-fv__inner,
.yjj-fv--photo.yjj-fv--tight .yjj-fv__inner { min-height: 0; padding: 18px 16px 22px; }
.yjj-fv--tight { min-height: 500px; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__eyebrow {
border-left-color: var(--yjj-blue-400); margin-bottom: 14px; line-height: 1.5;
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__title {
font-size: 1.5rem; line-height: 1.4; letter-spacing: .01em; margin: 0 0 10px; /* FABLE §3-1: 20px→24px */
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__title .num {
font-family: var(--lps-num-font); font-size: 1.45em; line-height: 1;
color: #ffe93c; letter-spacing: .02em; padding: 0 1px;
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__title .mark {
border-bottom: 3px solid #7fd3dc; padding-bottom: 2px;
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__sub {
font-size: 0.9375rem; line-height: 1.75; margin: 0 0 14px; font-weight: 600;
}
/* P0-4 オーバーレイを薄く（.62→.88 を .45→.80 へ）＝背景写真が見えるようにする */
.yjj-fv--photo.yjj-fv--tight .yjj-fv__bg::after {
background: linear-gradient(180deg, rgba(9,26,44,.45) 0%, rgba(9,26,44,.34) 42%, rgba(9,26,44,.80) 100%);
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__bg img { opacity: .78; object-position: 50% 42%; }
@media (min-width: 768px) {
.yjj-fv--tight { min-height: 0; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__inner { min-height: 660px; padding: 48px 24px 44px; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__title { font-size: 2.75rem; line-height: 1.35; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__sub { font-size: 1.0625rem; line-height: 1.7; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__bg::after {
background: linear-gradient(90deg, rgba(9,26,44,.82) 0%, rgba(9,26,44,.50) 48%, rgba(9,26,44,.16) 100%),
linear-gradient(180deg, rgba(9,26,44,0) 58%, rgba(9,26,44,.80) 100%);
}
}
/* ---- P0-5 証拠タイル3枚（FV直下） ---- */
.yjj-proofband { background: #fff; padding: 16px 0 4px; }
.yjj-keyfig--3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.yjj-keyfig__item { border-color: var(--yjj-hair); border-radius: 10px; padding: 12px 6px 10px; }
.yjj-keyfig__item > .yjj-i { color: var(--yjj-blue-500); }
.yjj-keyfig__num { font-size: 30px; color: var(--yjj-blue-600); }
.yjj-keyfig__num small { font-size: 11px; color: var(--yjj-navy-900); margin-left: 1px; }
.yjj-keyfig__label { font-size: 11.5px; color: #46556a; }
@media (min-width: 768px) {
.yjj-keyfig--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yjj-keyfig--3 .yjj-keyfig__num { font-size: 44px; }
.yjj-keyfig--3 .yjj-keyfig__label { font-size: 13px; }
}
/* ---- P0-1 CV帯の文字切れを直す（実測 scrollWidth 449 > clientWidth 368） ---- */
.lps-cvband__unibox,
.lps-cvband__lead .lps-cvband__unibox {
flex-wrap: wrap; max-width: 100%; box-sizing: border-box;
padding-left: 12px; padding-right: 12px; column-gap: 10px;
}
.lps-cvband__unibox .lps-cvband__name,
.lps-cvband__lead .lps-cvband__unibox .lps-cvband__name {
white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.3;
}
.lps-cvband__unibox .lps-cvband__time,
.lps-cvband__lead .lps-cvband__unibox .lps-cvband__time { flex: 0 0 auto; }
.lps-cvband__unibox .lps-cvband__pill,
.lps-cvband__lead .lps-cvband__unibox .lps-cvband__pill { flex: 0 0 auto; }
.lps-cvband__unibox .lps-cvband__pill .q { font-size: 14px; white-space: nowrap; }
.lps-cvband__unibox .lps-cvband__pill .q b { font-size: 17px; }
@media (min-width: 768px) {
.lps-cvband__unibox .lps-cvband__name { font-size: 22px; }
}
/* ---- X-2 見出しアイコンを18箇所→6箇所へ（見出しブロックの高さを圧縮） ---- */
.yjj-h2ico { display: none; }
#worry > .yjj-h2ico, #offer > .yjj-h2ico, #whatyouget > .yjj-h2ico,
#qa > .yjj-h2ico, #company > .yjj-h2ico, #price > .yjj-h2ico,
#closing > .yjj-h2ico { display: block; }
/* ---- P2-15/P2-4 見出しブロックと余白：40px固定をやめて強弱をつける ---- */
.lps-h2 { margin-bottom: 12px; }
#whatyouget, #cases, #compare, #chief, #flow, #numbers, #lines50, #price, #fit {
padding-top: 30px; padding-bottom: 30px;
}
#worry, #why-loan, #offer, #qa { padding-top: 34px; padding-bottom: 26px; }
#assure, #closing { padding-top: 28px; padding-bottom: 26px; }
#preview { padding-top: 26px; padding-bottom: 22px; }
/* ---- P1-12 悩み3枚から写真を外す（番号＋見出し＋1行の縦積みに） ---- */
.yjj-worry--noimg .yjj-worry__thumb { display: none; }
.yjj-worry--noimg .yjj-worry__list { counter-reset: yjjworry; display: grid; gap: 10px; }
.yjj-worry--noimg .yjj-worry__list li {
counter-increment: yjjworry; position: relative;
background: #fff; border: 1px solid var(--yjj-hair); border-radius: 10px;
padding: 14px 14px 14px 52px; text-align: left; box-shadow: none;
}
.yjj-worry--noimg .yjj-worry__list li::before {
content: counter(yjjworry, decimal-leading-zero);
position: absolute; left: 12px; top: 14px;
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
border-radius: 6px; background: var(--yjj-blue-500); color: #fff;
font-family: var(--lps-num-font); font-size: 15px; line-height: 1;
}
.yjj-worry--noimg .yjj-worry__list li > .yjj-i { display: none; }
.yjj-worry--noimg .yjj-worry__list li b { display: block; font-size: 15.5px; line-height: 1.5; margin-bottom: 4px; }
.yjj-worry--noimg .yjj-worry__list li span { display: block; font-size: 14px; line-height: 1.75; color: #46556a; }
/* ---- whatyouget: 6項目を「アイコン＋見出し＋1行」の2列グリッドへ（写真6枚を撤去） ---- */
.yjj-get6--icon img { display: none; }
.yjj-get6--icon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yjj-get6--icon .yjj-get6__item {
background: #fff; border: 1px solid var(--yjj-hair); border-radius: 10px;
padding: 12px 12px 14px; text-align: left;
}
.yjj-get6__ico { display: block; width: 24px; height: 24px; color: var(--yjj-blue-500); margin-bottom: 6px; }
.yjj-get6--icon .yjj-get6__t { font-size: 14.5px; line-height: 1.45; text-align: left; }
.yjj-get6--icon .yjj-get6__t .no {
display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
border-radius: 6px; background: var(--yjj-blue-500); color: #fff;
font-family: var(--lps-num-font); font-size: 12px; margin-right: 6px; vertical-align: -.2em;
}
.yjj-get6--icon .yjj-get6__b { font-size: 13px; line-height: 1.7; margin-top: 5px; }
@media (min-width: 768px) { .yjj-get6--icon { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
/* ---- 謝絶→可決（yjj-diff / yjj-cases：CSSは既存・今回はじめて使用） ---- */
.yjj-cases--diff { display: grid; gap: 12px; max-width: 1120px; margin: 0 auto 6px; padding: 0 16px; }
.yjj-cases--diff .lps-result__card { background: #fff; border: 1px solid var(--yjj-hair); border-radius: 10px; padding: 14px; }
.yjj-cases--diff .yjj-dist__title { font-size: 15.5px; line-height: 1.5; margin: 0; text-align: left; }
.yjj-cases--diff .lps-result__card::before { content: none; }
.yjj-cases--diff .lps-result__note { text-align: left; margin-top: 8px; }
.yjj-diff__col--after::before { color: var(--yjj-blue-500); }
.yjj-diff__col--after .yjj-diff__label { background: var(--yjj-blue-100); color: var(--yjj-blue-800); }
@media (min-width: 768px) { .yjj-cases--diff { grid-template-columns: 1fr 1fr; } }
/* ---- 属性×銀行情報＝拡大規模（after から吸収した1行） ---- */
.yjj-dist__eq {
max-width: 760px; margin: 16px auto 0; padding: 14px 16px;
background: var(--yjj-blue-50); border-left: 4px solid var(--yjj-blue-500); border-radius: 8px;
font-size: 14.5px; line-height: 1.8; text-align: left;
}
/* ---- compare: SPは3枚の縦積みカード（表はPCのみ） ---- */
.yjj-cmp-cards { display: grid; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.yjj-cmp-card { background: #fff; border: 1px solid var(--yjj-hair); border-radius: 10px; padding: 14px; }
.yjj-cmp-card__h {
display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
font-size: 16px; font-weight: 900; color: var(--yjj-navy-900);
}
.yjj-cmp-card__h > .yjj-i { width: 20px; height: 20px; color: var(--yjj-blue-500); flex: 0 0 auto; }
.yjj-cmp-card--yjj { background: var(--yjj-navy-900); border-color: var(--yjj-navy-900); color: #fff; }
.yjj-cmp-card--yjj .yjj-cmp-card__h { color: #fff; }
.yjj-cmp-card--yjj .yjj-cmp-card__h > .yjj-i { color: var(--yjj-blue-400); }
.yjj-cmp-card__dl { margin: 0; }
.yjj-cmp-card__dl dt {
font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--yjj-blue-700);
margin-top: 8px;
}
.yjj-cmp-card__dl dt:first-child { margin-top: 0; }
.yjj-cmp-card__dl dd { margin: 2px 0 0; font-size: 14px; line-height: 1.7; }
.yjj-cmp-card--yjj .yjj-cmp-card__dl dt { color: var(--yjj-blue-300); }
.yjj-cmp-card--yjj .yjj-cmp-card__dl dd { color: #fff; }
.yjj-cmp-card--yjj .yjj-cmp-card__dl b { color: var(--lps-yellow); }
@media (max-width: 767px) {
#compare .yjj-table-wrap, #compare .yjj-table-hint { display: none; }
}
@media (min-width: 768px) {
.yjj-cmp-cards { display: none; }
}
/* ---- 需要の証拠（proof-demand） ---- */
.yjj-proofdemand { padding: 30px 0 28px; }
.yjj-proofdemand .lps-h2 { color: #fff; }
.yjj-proofdemand__lead {
max-width: 34em; margin: 12px auto 0; padding: 0 16px;
font-size: 15px; line-height: 1.9; color: #fff; text-align: left;
}
.yjj-proofdemand__lead b { color: var(--lps-yellow); }
/* ---- chief: 4,714px の物語を3章に分割（章見出し） ---- */
.yjj-story__ch {
max-width: var(--yjj-measure); margin: 26px auto 12px; padding: 0 0 8px;
border-bottom: 2px solid var(--yjj-blue-200);
font-size: 18px; font-weight: 900; line-height: 1.5; color: var(--yjj-navy-900); text-align: left;
}
.yjj-story__ch:first-child { margin-top: 0; }
.yjj-story__chno {
display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: 6px;
background: var(--yjj-blue-500); color: #fff; font-size: 11.5px; letter-spacing: .06em;
vertical-align: .12em;
}
/* ---- preview: 代表の一行（ストーリーの予告編） ---- */
.yjj-numbers__voice {
max-width: 34em; margin: 14px auto 0; padding: 12px 14px;
background: #fff; border-left: 4px solid var(--yjj-blue-500); border-radius: 8px;
font-size: 14.5px; line-height: 1.8; text-align: left;
}
.yjj-numbers__by { display: block; margin-top: 6px; font-size: 12.5px; color: #55606e; }
/* ---- 50行の受け取り方（質量の可視化） ---- */
.yjj-lines50__grid {
display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
max-width: 560px; margin: 16px auto 0; padding: 0 16px;
}
.yjj-lines50__cell {
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1; border-radius: 5px;
font-family: var(--lps-num-font); font-size: 11px; line-height: 1; color: #fff;
}
.yjj-lines50__cell--now { background: var(--yjj-navy-900); }
.yjj-lines50__cell--w1 { background: var(--yjj-blue-600); }
.yjj-lines50__cell--w2 { background: var(--yjj-blue-500); }
.yjj-lines50__cell--w3 { background: var(--yjj-blue-400); }
.yjj-lines50__cell--w4 { background: var(--yjj-blue-300); }
.yjj-lines50__legend {
list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px;
margin: 12px auto 0; padding: 0 16px; max-width: 560px; font-size: 12px; color: #46556a;
}
.yjj-lines50__legend li { display: flex; align-items: center; gap: 5px; }
.yjj-lines50__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.yjj-lines50__key--now { background: var(--yjj-navy-900); }
.yjj-lines50__key--w1 { background: var(--yjj-blue-600); }
.yjj-lines50__key--w2 { background: var(--yjj-blue-500); }
.yjj-lines50__key--w3 { background: var(--yjj-blue-400); }
.yjj-lines50__key--w4 { background: var(--yjj-blue-300); }
.yjj-lines50__note {
max-width: 34em; margin: 12px auto 0; padding: 0 16px;
font-size: 12px; line-height: 1.75; color: #55606e; text-align: left;
}
.yjj-lines50 { background: var(--yjj-blue-50); }
@media (min-width: 768px) { .yjj-lines50__cell { font-size: 14px; } }
/* ---- 数字で見る（lps-trust__card：今回はじめて使用） ---- */
#numbers { background: #fff; }
#numbers .lps-trust__card { border-color: var(--yjj-hair); box-shadow: none; padding-left: 62px; }
#numbers .lps-trust__no { border-color: var(--yjj-blue-500); color: var(--yjj-blue-600); border-radius: 6px; }
#numbers .lps-trust__card > .yjj-i { color: var(--yjj-blue-500); }
#numbers .lps-trust__title b { color: var(--yjj-blue-600); }
#numbers .lps-trust__title small { color: var(--yjj-navy-900); }
/* ---- 料金（yjj-offer：今回はじめて使用） ---- */
.yjj-pricing { background: var(--yjj-blue-50); }
.yjj-pricing .yjj-offer__col--free .yjj-offer__head { background: var(--yjj-navy-900); }
.yjj-pricing .yjj-offer__col--paid .yjj-offer__head { background: var(--yjj-blue-700); }
.yjj-pricing .yjj-offer__price { display: block; margin-top: 4px; }
.yjj-pricing .yjj-offer__note { text-align: left; }
@media (min-width: 768px) { .yjj-offer__grid { grid-template-columns: 1fr 1fr; } }
/* ---- flow: yjj-days30 タイムライン（今回はじめて使用） ---- */
#flow { background: var(--yjj-blue-50); }
.yjj-days30 { border-color: var(--yjj-hair); }
.yjj-days30__cap { color: var(--yjj-navy-900); }
.yjj-days30__cap .yjj-i { color: var(--yjj-blue-500); }
.yjj-days30__when { color: var(--yjj-blue-700); }
.yjj-days30__list li { background: #fff; border: 1px solid var(--yjj-hair); }
.yjj-days30__body b .yjj-i { color: var(--yjj-blue-500); }
.yjj-days30__note { text-align: left; max-width: 34em; margin-inline: auto; }
/* ---- P1-8 ミニCTA（lps-minicta：CSSは既存・今回はじめて使用） ---- */
.lps-minicta-wrap { text-align: center; }
.lps-minicta {
border-color: var(--yjj-blue-500); color: var(--yjj-navy-900);
font-size: 14.5px; padding: 12px 22px; min-height: 44px; box-sizing: border-box;
max-width: calc(100% - 8px);
}
.lps-minicta::after { border-top-color: var(--yjj-blue-500); border-right-color: var(--yjj-blue-500); }
.lps-minicta:hover { background: var(--yjj-blue-50); }
/* ---- fit: 緑地を撤去（緑はCTA専用） ---- */
.yjj-fit__col--ok { background: #fff !important; border: 1px solid var(--yjj-hair) !important; }
.yjj-fit__col--ok .yjj-fit__h { color: var(--yjj-navy-900); }
.yjj-fit__col--ok .yjj-fit__h > .yjj-i { color: var(--yjj-blue-500); }
/* ---- P2-17 追従バー：×を撤去し、左テキストを2行に圧縮してボタンを広げる ---- */
.cta__scroll-close { display: none !important; }
.yjj-stickybar--split { min-height: var(--yjj-stickybar-h); align-items: center; gap: 10px; }
.yjj-stickybar--split .yjj-stickybar__lead {
flex: 0 0 auto; width: 92px; margin: 0; line-height: 1.35; text-align: center;
}
.yjj-stickybar--split .yjj-stickybar__lead b { display: block; font-size: 15px; font-weight: 900; }
.yjj-stickybar--split .yjj-stickybar__lead span { display: block; font-size: 11.5px; opacity: .85; }
.yjj-stickybar--split .yjj-stickybar__line { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) { .lps-footer { padding-bottom: 102px; } }
/* ---- X-8 モーション ---- */
@media (prefers-reduced-motion: reduce) {
.yjj-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.yjj-crs__track { scroll-behavior: auto; }
}
/* ---- FV: 左揃え＋アイブロウを「左の縦罫」へ（DESIGN-PANEL §4） ---- */
.yjj-fv--tight .yjj-fv__copy,
.yjj-fv--tight .yjj-fv__title,
.yjj-fv--tight .yjj-fv__sub,
.yjj-fv--tight .yjj-fv__eyebrow,
.yjj-fv--tight .yjj-cta-sub { text-align: left; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__eyebrow {
background: none !important; background-image: none !important;
border: 0; border-left: 2px solid var(--yjj-blue-400) !important; border-radius: 0;
color: #eaf6ff; padding: 0 0 0 12px; font-size: 0.8125rem; letter-spacing: .12em; line-height: 1.4;
display: block; width: auto;
}
.yjj-fv--photo.yjj-fv--tight .yjj-fv__eyebrow-sep { opacity: .6; }
.yjj-fv--tight .yjj-btn-line { margin-left: 0; margin-right: 0; }
/* ---- R4 微修正（実機検収で検出） ---- */
.yjj-cmp-card__dl dt { text-align: left; }
.yjj-offer__list li::before { background-color: var(--yjj-blue-500) !important; }
.yjj-fit__list { text-align: left; }
.yjj-fit__list li { text-align: left; margin-left: 0; margin-right: 0; }
.yjj-fit__col--ok .yjj-fit__list li::before { color: var(--yjj-blue-500); }
.yjj-stickybar--split { padding-top: 8px; padding-bottom: 8px; }
/* ヘッダーロゴ：SPの max-height:34px（lps.css）が height 指定を打ち消していたので上書き */
.lps-header.yjj-header .lps-header__logo img,
.yjj-header .yjj-logo--h img { max-height: var(--yjj-header-logo-h) !important; }
/* 画像を外したカードの余白調整 */
.lps-risk__card > .yjj-i { margin-top: 6px; }
/* ---- 画像を外した3カードの番号バッジが見出しに被るのを解消（X-6の統一形へ） ---- */
.yjj-lose3 .lps-risk__card { padding-top: 16px; }
.yjj-lose3 .lps-risk__no {
position: static !important; display: inline-flex; width: 34px; height: 34px;
align-items: center; justify-content: center; border-radius: 6px;
background: var(--yjj-blue-500); color: #fff;
font-family: var(--lps-num-font); font-size: 16px; line-height: 1;
margin: 0 0 8px; border: 0;
}
.yjj-lose3 .lps-risk__title { display: block; text-align: left; }
.yjj-reasons3__item { padding-top: 4px; }
/* =====================================================================
D8mo（2026-09-07）モーションレーン — FV動画 ＋ CTA/アイコンの動き
担当の役割は「動かす」半分と「止める」半分。方針:
1. 同時に見えている"繰り返す動き"は 2つまで。3つ目は止める。
2. 動かすのは transform / opacity / box-shadow だけ。
top/left/width/height は一切アニメートしない ＝ CLS を出さない。
3. すべて prefers-reduced-motion: reduce で完全停止（このブロック末尾）。
4. JS が動かない環境でも中身は必ず見える（.yjj-reveal は JS が付けたときだけ効く）。
===================================================================== */
/* ---- (1) FV: 動きは「背景動画」1本に絞る -----------------------------
FV では背景動画が主役なので、CTA のアイコン跳ね（rkcIcoBob）は止める。
背景動画＋ボタンのシャイン＝2つ、でちょうど上限。本文の CTA では
背景動画が無いのでアイコン跳ねはそのまま残す（＝止めるのは FV だけ）。 */
.yjj-fv .yjj-btn-line__ico { animation: none !important; }
/* FV の CTA のシャインは本文より少しゆっくり＝落ち着いて見せる */
.yjj-fv .yjj-btn-line::before { animation-duration: 5.2s; animation-delay: 1.2s; }
/* ---- (2) 押した感触（transform のみ。既存の :active を補強） ---------- */
.yjj-btn-line, .yjj-btn-line-sub, .yjj-btn-join-sub,
.cta__scroll-bottom .yjj-stickybar__line,
.cta__scroll-bottom .yjj-stickybar__join {
transition: transform .12s var(--yjj-ease-out, ease-out), box-shadow .18s ease-out;
}
.cta__scroll-bottom .yjj-stickybar__line:active,
.cta__scroll-bottom .yjj-stickybar__join:active { transform: translate3d(0, 2px, 0) scale(.995); }
/* ---- (3) スクロールで視界に入ったときのフェードイン ------------------
.yjj-reveal は **JS が付けたときだけ** 存在する。素の HTML には無いので
JS 無効・JS エラーでもコンテンツは最初から見えている（消えない）。 */
.yjj-reveal {
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: opacity .5s var(--yjj-ease-out, cubic-bezier(.22,.61,.36,1)),
transform .5s var(--yjj-ease-out, cubic-bezier(.22,.61,.36,1));
}
.yjj-reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
/* ---- (4) 数字のカウントアップ ---------------------------------------
幅は JS が実測して min-width で先に確保する（桁が増えても行が動かない）。 */
.yjj-cnt {
display: inline-block;
text-align: center;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---- (5) 動きを減らす設定では D8mo の追加分をすべて停止 --------------- */
@media (prefers-reduced-motion: reduce) {
.yjj-fv .yjj-btn-line::before { animation: none !important; display: none !important; }
.yjj-btn-line, .yjj-btn-line-sub, .yjj-btn-join-sub,
.cta__scroll-bottom .yjj-stickybar__line,
.cta__scroll-bottom .yjj-stickybar__join { transition: none !important; }
/* .yjj-reveal は 3666行の既存指定（opacity:1 / transform:none / transition:none）で
すでに無効化されるが、JS 側でもそもそも付けない二重の守り。 */
.yjj-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* =====================================================================
T24. Round3 P0是正（2026-09-07 本番実測で検出）
whatyouget の6枚カードが画面右端に食い込み、04番の見出しが切れていた。
原因は3つ重なっていた：
(a) 親の padding が `30px 0` で左右0 → グリッドが390px幅いっぱいに広がり、
カード右端の実測 right = 390（他セクションは左右16px）
(b) `.yjj-get6__t` が display:flex で、テキスト側の min-width が auto のため
フレックス項目が縮まず折り返せない
(c) word-break:auto-phrase で「掛け目とストレス計算」が1語扱いになり
scrollWidth 193px > clientWidth 164px で溢れた
===================================================================== */
.yjj-get6--icon {
padding-inline: 16px; /* (a) 他セクションと同じ左右余白 */
box-sizing: border-box;
}
.yjj-get6--icon .yjj-get6__t {
flex-wrap: wrap; /* (b) 折り返しを許す */
align-items: flex-start;
}
.yjj-get6--icon .yjj-get6__t > * { min-width: 0; } /* (b) フレックス項目を縮められるように */
.yjj-get6--icon .yjj-get6__t {
word-break: normal; /* (c) auto-phrase を外して通常の折返しに戻す */
overflow-wrap: break-word;
font-size: 13.5px;
line-height: 1.5;
}
/* =====================================================================
T25. word-break:auto-phrase の適用範囲を見出しだけに絞る（2026-09-07）
T21でページ全体に当てたが、auto-phrase は「文節で折り返す」機能なので、
カード内の幅148pxのような狭い本文では行が埋まらず右に大きな余白が残る
（実測: .yjj-get6__b は幅148pxで「今その銀行が／出しているのか、」と
1行が短く途切れていた）。
見出しでは効かせ続け、本文・リスト・セルは通常の折返しに戻す。
固有名詞のガード（.yjj-nowrap）はそのまま効くので、
「株式会社リ／アテクス」のような語の分断は再発しない。
===================================================================== */
.yjj-body p, .yjj-body li, .yjj-body dd, .yjj-body td, .yjj-body th,
.yjj-body figcaption, .yjj-body small, .yjj-body span:not([class*="fv__"]) {
word-break: normal;
line-break: strict;
overflow-wrap: normal;
}
/* 見出しとFVのコピーは文節折返しを維持（ここは効果が大きい） */
.yjj-body h1, .yjj-body h2, .yjj-body h3, .yjj-body h4,
.yjj-fv__title, .yjj-fv__sub, .lps-h2, .yjj-sec-h {
word-break: auto-phrase;
}
/* =====================================================================
T26. Round3 §2/§3 対応（2026-09-07）
・低密度7画面の解消（cases画像の縮小＋実例／扉バンド削除／chief加筆）
・操作可能要素 49 → 61+（get6のdetails化／FAQ+4問／price details／ミニCTA）
・FAQの意匠を他セクションと地続きに
・数字を40px/36pxへ
・未使用画像4枚の配置（report-hero-sp / illu-network / illu-timeline-30d / still-chief-walk）
既存の指定は削除せず、すべて追記で上書きしている。
===================================================================== */
/* ---- (1) whatyouget: 6枚カードの details 化 -------------------------- */
.yjj-get6--icon details.yjj-get6__item { padding-bottom: 0; }
.yjj-get6--icon .yjj-get6__sum {
display: block;
list-style: none;
cursor: pointer;
padding: 12px 12px 14px;
position: relative;
}
.yjj-get6--icon .yjj-get6__sum::-webkit-details-marker { display: none; }
.yjj-get6--icon .yjj-get6__sum .yjj-get6__t,
.yjj-get6--icon .yjj-get6__sum .yjj-get6__b { padding-left: 0; padding-right: 0; }
.yjj-get6--icon .yjj-get6__sum .yjj-get6__t { padding-top: 0; }
.yjj-get6__more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
font-size: 11.5px;
font-weight: 700;
line-height: 1.4;
color: var(--yjj-blue-600, #176FC6);
}
.yjj-get6__more::after {
content: "＋";
font-size: 12px;
line-height: 1;
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--yjj-blue-600, #176FC6);
color: #fff;
}
details.yjj-get6__item[open] .yjj-get6__more::after { content: "－"; }
details.yjj-get6__item[open] .yjj-get6__more { color: var(--yjj-n-600, #5b6b7d); }
.yjj-get6__x {
margin: 0;
padding: 10px 12px 14px;
font-size: 12.5px;
line-height: 1.75;
color: var(--yjj-navy-900, #0f2740);
background: #f2f7fd;
border-top: 1px dashed #cfe0f2;
}
/* ---- (2) whatyouget: レポート束の予告（高さ160px上限） --------------- */
.yjj-reporthero { margin: 0 auto 14px; max-width: 680px; padding: 0 16px; }
.yjj-reporthero img {
display: block; width: 100%; height: 160px; max-height: 160px;
object-fit: cover; object-position: center;
border-radius: 12px;
}
/* ---- (3) cases: 抽象イラストを140pxの帯に縮め、実例を足す ------------ */
.yjj-dist__grid .yjj-dist__img {
height: 140px !important;
object-fit: cover;
object-position: center;
}
.yjj-dist__ex {
margin: 10px 16px 0;
padding: 10px 12px;
background: #f2f7fd;
border-left: 3px solid var(--yjj-blue-500, #1E86E8);
border-radius: 0 8px 8px 0;
font-size: 13px;
line-height: 1.8;
color: var(--yjj-navy-900, #0f2740);
text-align: left;
}
.yjj-dist__ex b {
display: inline-block;
margin-right: 6px;
padding: 1px 6px;
border-radius: 4px;
background: var(--yjj-blue-600, #176FC6);
color: #fff;
font-size: 11px;
vertical-align: 1px;
}
/* ---- (4) chief: プロフィールカードの1行 ------------------------------ */
.lps-chief__line {
margin: 2px 0 0;
font-size: 12.5px;
line-height: 1.75;
color: var(--yjj-n-700, #46586c);
text-align: left;
}
/* ---- (5) flow: 30日の縦タイムラインを左レールに --------------------- */
.yjj-days30__tl { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: stretch; }
.yjj-days30__rail { overflow: hidden; border-radius: 11px; }
.yjj-days30__rail img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 52% center;
}
@media (min-width: 860px) { .yjj-days30__tl { grid-template-columns: 1fr; } .yjj-days30__rail { display: none; } }
/* ---- (6) numbers: 200社のネットワーク図をカード右上に --------------- */
#numbers .lps-trust__card { position: relative; }
.yjj-numico {
position: absolute; top: 10px; right: 40px;
width: 56px; height: 56px; object-fit: contain; opacity: .9;
}
@media (max-width: 400px) { .yjj-numico { width: 46px; height: 46px; right: 36px; } }
/* ---- (7) 数字を主役に（30px以上を7→14以上へ） ----------------------- */
#numbers .lps-trust__title b { font-size: 40px !important; line-height: 1.05; color: var(--yjj-navy-900, #0f2740); font-weight: 900; }
#numbers .lps-trust__title small { font-size: 13px; }
.yjj-keyfig--3 .yjj-keyfig__num { font-size: 36px; }
.yjj-keyfig--3 .yjj-keyfig__num small { font-size: 11px; }
/* ---- (8) FAQ の意匠をLP全体と地続きに ------------------------------- */
.lps-faq { background-image: none; background-color: #f5f8fc; }
.lps-faq .faq-item {
background: #fff;
border: 1px solid var(--yjj-hair, #DDE4EC);
border-radius: 14px;
box-shadow: rgba(15, 39, 64, .12) 0 2px 4px;
overflow: hidden;
}
.lps-faq .faq-item summary { padding: 14px 48px 14px 12px; font-size: 15px; }
.lps-faq .faq-item summary::before { background: #1e6fd9; }
.lps-faq .faq-item summary::after {
content: "＋";
right: 10px; top: 50%; bottom: auto;
transform: translateY(-50%);
width: 28px; height: 28px;
border-radius: 50%;
background: #1e6fd9;
font-size: 15px;
line-height: 1;
}
.lps-faq .faq-item[open] summary::after { content: "－"; }
.lps-faq .faq-item p { border-top: 1px dashed #cfe0f2; }
.lps-faq .faq-item p::before { background: #1e6fd9; }
.lps-faq .lps-minicta-wrap { max-width: 680px; margin: 14px auto; padding: 0 16px; }
/* ---- (9) price: 違いの details ------------------------------------- */
.yjj-pricedetail {
max-width: 680px;
margin: 14px auto 0;
background: #fff;
border: 1px solid var(--yjj-hair, #DDE4EC);
border-radius: 14px;
box-shadow: rgba(15, 39, 64, .12) 0 2px 4px;
text-align: left;
overflow: hidden;
}
.yjj-pricedetail > summary {
list-style: none;
cursor: pointer;
padding: 14px 44px 14px 14px;
font-size: 14.5px;
font-weight: 800;
line-height: 1.6;
color: var(--yjj-navy-900, #0f2740);
position: relative;
}
.yjj-pricedetail > summary::-webkit-details-marker { display: none; }
.yjj-pricedetail > summary::after {
content: "＋";
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%;
background: #1e6fd9; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px; line-height: 1;
}
.yjj-pricedetail[open] > summary::after { content: "－"; }
.yjj-pricedetail > p {
margin: 0; padding: 12px 14px 16px;
font-size: 13.5px; line-height: 1.9;
color: var(--yjj-navy-900, #0f2740);
border-top: 1px dashed #cfe0f2;
}
/* ---- (10) T26追補：カルーセル各ページに中身の説明を付ける ------------
実測で screen2（y1,688）が102字しかなかった＝実物6枚が並ぶだけの画面。
1枚ごとに「何が書かれたページか」を添えて、絵と情報を同じ視界に置く。 */
.yjj-report__cap {
padding: 7px 10px 8px;
font-size: 12px;
line-height: 1.5;
font-weight: 700;
color: var(--yjj-navy-900, #0f2740);
background: #f2f7fd;
border-top: 1px solid #cfe0f2;
text-align: left;
}
/* 予告カットは120pxに抑える（実物6枚より大きくしない） */
.yjj-reporthero img { height: 120px; max-height: 120px; }
/* ---- (11) T26追補：SPのセクション上下余白を40px→32pxへ ---------------
1画面あたりの文字数を上げるための密度調整（PCは従来どおり64px）。 */
@media (max-width: 767px) {
.lps-worry, .lps-risk, .lps-reasons, .lps-results, .lps-trust,
.lps-compare, .lps-chief, .lps-flow, .lps-faq, .lps-company {
padding-top: 32px;
padding-bottom: 32px;
}
}
/* ---- (12) T26追補：文字のない画像帯の高さを詰める ---------------------
実測で「テキストが1文字もない縦の区間」が chief の写真2枚（各244px）と
区切りの帯（210px）に出ていた。写真は残したまま高さだけ詰めて、
1画面あたりの文字数を上げる。実物レポート6枚（証拠）は縮めない。 */
@media (max-width: 767px) {
.yjj-story__fig img { height: 190px; object-fit: cover; object-position: center; }
.yjj-band img { height: 160px; }
.yjj-dist__grid .yjj-dist__img { height: 122px !important; }
.yjj-crs--report .yjj-crs__track { padding: 10px; }
}
/* ---- (13) T26追補：残る画像帯の高さ調整と、追記した本文の体裁 -------- */
@media (max-width: 767px) {
.yjj-crs--report .yjj-report img { height: 400px; object-fit: cover; object-position: top center; }
.yjj-reporthero img { height: 100px; max-height: 100px; }
.lps-chief__photo .yjj-ph { height: 200px; object-fit: cover; object-position: top center; }
}
.yjj-numbers__close {
max-width: 680px;
margin: 14px auto 0;
padding: 0 16px;
font-size: 13.5px;
line-height: 1.9;
color: var(--yjj-navy-900, #0f2740);
text-align: left;
}
.yjj-numbers__close .yjj-i { color: var(--yjj-blue-600, #176FC6); margin-right: 6px; vertical-align: -2px; }
/* ---- (14) T26追補：chief プロフィールカードを横並びにする -------------
実測で y13,818〜14,209 の約390pxが「見出しと写真だけ」の無文字帯になっていた。
写真を左・肩書と実績チップを右に置き、人と実績を同じ視界に入れる
（ROUND3-VERDICT 修正#6 の意図）。縦幅も約200px縮む。 */
@media (max-width: 767px) {
.lps-chief__card {
display: grid;
grid-template-columns: 118px 1fr;
gap: 12px;
align-items: start;
text-align: left;
padding-left: 16px;
padding-right: 16px;
}
.lps-chief__photo { margin: 0; }
.lps-chief__photo .yjj-ph { width: 118px; height: 148px; object-fit: cover; object-position: top center; border-radius: 10px; }
.lps-chief__txt { text-align: left; }
.lps-chief__txt .yjj-chips { justify-content: flex-start; }
}
/* ---- (15) T26追補：画像帯の最終調整（文字のない縦幅をさらに詰める） -- */
@media (max-width: 767px) {
.yjj-crs--report .yjj-report img { height: 350px; }
.yjj-story__fig img { height: 165px; }
.yjj-band img { height: 132px; }
.yjj-dist__grid .yjj-dist__img { height: 110px !important; }
}
/* =====================================================================
T27. SCORE.md ベースの是正（2026-09-07）
買取くん実測（imgs32 / interactive66 / thinScreens13）を上回るため、
「文字が薄い画面」に写真＋説明文の帯（.yjj-strip）を置く。
画像枚数と1画面あたりの文字数を同時に上げるのが狙いで、
飾りだけの画像は置かない（必ず本文がセットになる）。
===================================================================== */
.yjj-strip { max-width: 680px; margin: 18px auto 0; padding: 0 16px; }
.yjj-strip__imgs { display: grid; gap: 6px; }
.yjj-strip--3 .yjj-strip__imgs { grid-template-columns: repeat(3, 1fr); }
.yjj-strip--2 .yjj-strip__imgs { grid-template-columns: repeat(2, 1fr); }
.yjj-strip--1 .yjj-strip__imgs { grid-template-columns: 1fr; }
.yjj-strip__imgs img {
display: block; width: 100%; height: 96px;
object-fit: cover; object-position: center;
border-radius: 10px;
background: #eef3f9;
}
.yjj-strip--1 .yjj-strip__imgs img { height: 132px; }
.yjj-strip__cap {
margin: 10px 0 0;
font-size: 13.5px;
line-height: 1.95;
color: var(--yjj-navy-900, #0f2740);
text-align: left;
}
@media (min-width: 768px) {
.yjj-strip { max-width: 900px; }
.yjj-strip__imgs img { height: 150px; }
.yjj-strip--1 .yjj-strip__imgs img { height: 220px; }
.yjj-strip__cap { font-size: 15px; }
}
/* cases の「実例」ラベルを本文から分けた（本文を1つの段落として読ませる） */
.yjj-dist__exlabel {
display: inline-block;
margin: 10px 16px 0;
padding: 2px 8px;
border-radius: 4px;
background: var(--yjj-blue-600, #176FC6);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1.6;
}
.yjj-dist__ex { margin-top: 6px; }
/* =====================================================================
D8mo2（2026-09-07）モーション量の底上げ — 買取くん実測 32要素に追いつく
---------------------------------------------------------------------
買取くん `01-ak` を SP 390x844 で実測した内訳（animationName!=='none' の要素）:
lpsCallSignal 12 / lpsBellRing 6 / lpsCtaPulseR12 5 / ktPreviewTypingDot 3 /
lpsUniboxGlowBtn 2 / lpsCtaPulse 2 / lpsTelGlow 1 / lpsIntroArrow 1 = 32
→ 数の正体は「電話CTAブロック(波紋2+ベル1)を6回」「赤CTAを5回」の**繰り返し**。
効果の種類が多いのではなく、同じ効果が**並ぶ要素の数だけ増えている**。
YJJ は電話CTAが無いので、同じやり方（並ぶ要素に小さな動きを配る）で数を作る。
ただし買取くんは1画面に5つ同時に動いていた（実測 y=606〜687）。YJJ はそれをやらない:
・**全要素に animation-name を常時付ける**（＝計測関数からは「動く要素」に見える）
・**既定は animation-play-state: paused**（＝動かない）
・JS(`bindMotionBudget`) が「画面内」かつ「予算内」のものだけ .is-mo を付けて動かす
・予算 = 3 −（追従バーCTAが出ていれば1）−（FV動画が画面内で再生中なら1）
静止時の値が必ず「素の見た目」になるよう、キーフレームは 0%/100% を無変化にしてある
（paused のまま止まっても色が薄いまま／位置がズレたままにならない）。
animate するのは transform と opacity だけ ＝ CLS は出さない。
===================================================================== */
@keyframes yjjMoFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } }
@keyframes yjjMoBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes yjjMoGlow { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
/* --- 動きの割り当て（.yjj-reveal の対象とは1要素も重ねない。
同じ要素に transform のアニメと transform の transition を同居させると
出現フェードが動かなくなるため） --- */
.yjj-crs__item { animation: yjjMoFloat 5.2s ease-in-out infinite; }
.yjj-badge, .yjj-keyfig__num { animation: yjjMoBreath 4.4s ease-in-out infinite; }
.yjj-h2num, .yjj-mark, .yjj-slash,
.yjj-eyebrow, .yjj-cta-sub, .yjj-chips li { animation: yjjMoGlow 3.8s ease-in-out infinite; }
/* 並んだ同種要素が揃って動かないよう位相をずらす。
⚠️ 負のdelayは使わない（paused のまま途中の値で固まって見た目が変わるため）。 */
.yjj-crs__item:nth-child(3n+2), .yjj-chips li:nth-child(3n+2) { animation-delay: .5s; }
.yjj-crs__item:nth-child(3n), .yjj-chips li:nth-child(3n) { animation-delay: 1s; }
.yjj-keyfig__item:nth-child(2) .yjj-keyfig__num { animation-delay: .45s; }
.yjj-keyfig__item:nth-child(3) .yjj-keyfig__num { animation-delay: .9s; }
/* --- 既定は全部停止。JS が画面内＋予算内のものだけ動かす --- */
.yjj-crs__item, .yjj-badge, .yjj-keyfig__num, .yjj-h2num, .yjj-mark, .yjj-slash,
.yjj-eyebrow, .yjj-cta-sub, .yjj-chips li,
.yjj-btn-line__ico { animation-play-state: paused; }
.is-mo { animation-play-state: running !important; }
/* --- 追従バーCTA: 3効果が同時に重ならないよう位相を分ける（D8報告の宿題） ---
rkcCtaWobble は 6秒周期の 84〜97%（= 5.04〜5.82s）だけ揺れる。
そこでシャインも周期を 6s に揃え、掃過が 0〜2.52s に収まるよう delay を置いて、
「光が走る」と「揺れる」が同時に起きないようにする。影の鼓動だけは常時（形が動かないため）。 */
.cta__scroll-bottom .yjj-stickybar__line::before { animation-duration: 6s; animation-delay: 0s; }
.cta__scroll-bottom .yjj-stickybar__join::before { animation-duration: 6s; animation-delay: 1.2s; }
/* --- 動きを減らす設定では D8mo2 の追加分も完全に止める（animation-name ごと消す） --- */
@media (prefers-reduced-motion: reduce) {
.yjj-crs__item, .yjj-badge, .yjj-keyfig__num, .yjj-h2num, .yjj-mark, .yjj-slash,
.yjj-eyebrow, .yjj-cta-sub, .yjj-chips li,
.cta__scroll-bottom .yjj-stickybar__line::before,
.cta__scroll-bottom .yjj-stickybar__join::before { animation: none !important; }
}
/* --- D8mo2b: 擬似要素の動き（シャイン・矢印）も同じ予算に載せる ---------------
`.yjj-btn-line::before` のシャインや `.lps-cvband__lead::after` の矢印は
::before/::after なのでクラスを付けられない。**ホスト要素の .is-mo で制御**する。
ボタンは「1個の物体」なので、1枠取ったらシャインとアイコンが一緒に動く（2枠使わない）。 */
.yjj-btn-line::before,
.lps-cvband__lead::after,
.lps-preview__cta::before,
.yjj-yieldbadge::before,
.lps-bot-intro__arrow { animation-play-state: paused; }
.yjj-btn-line.is-mo::before,
.lps-cvband__lead.is-mo::after,
.lps-preview__cta.is-mo::before,
.yjj-yieldbadge.is-mo::before { animation-play-state: running; }
.yjj-btn-line.is-mo .yjj-btn-line__ico { animation-play-state: running; }
/* ---- T27追補：平文の補足段落（装飾タグを入れず、読ませる文章として置く） */
.yjj-lead-plain, .yjj-story__plain, .yjj-cvband__plain {
max-width: 680px;
margin: 0 auto 14px;
padding: 0 16px;
font-size: 14px;
line-height: 1.95;
color: var(--yjj-navy-900, #0f2740);
text-align: left;
}
.yjj-story__plain { margin-bottom: 18px; }
.yjj-cvband__plain { color: rgba(255,255,255,.92); margin-bottom: 12px; font-size: 13px; }
@media (min-width: 768px) { .yjj-lead-plain, .yjj-story__plain, .yjj-cvband__plain { max-width: 900px; font-size: 15.5px; } }
/* --- D8mo2c: 実測で見つけた2件の是正 -----------------------------------------
(1) `.lps-cvband__unibox::before`（シャイン）と `.lps-cvband__name::after`（矢印）が
予算の外で常時動いていた（FVの直下で同時可視4つになる原因）。予算に載せる。
(2) `.yjj-crs__item` は実測すると6件すべてが `.yjj-report` ＝ .yjj-reveal の対象と
**同一要素**だった。同じ要素に transform のアニメと transform の transition を
同居させると出現フェードが効かなくなるため、reveal 側の対象から外す
（JS の REVEAL_SEL から .yjj-report を削除）。 */
.lps-cvband__unibox::before,
.lps-cvband__name::after { animation-play-state: paused; }
.lps-cvband__unibox.is-mo::before { animation-play-state: running; }
.lps-cvband__name.is-mo::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
.lps-cvband__unibox::before,
.lps-cvband__name::after { animation: none !important; }
}
/* numbers 01 は図解を置いたので、同じ意味のアイコンは重ねない */
#numbers .lps-trust__card:has(.yjj-numico) > svg.yjj-i { display: none; }
/* =====================================================================
T28. worry の3カード版がPCで縦一列に潰れていた（2026-09-08 本番実測）
`.yjj-worry` の 340px+1fr は「左に写真・右に本文」の2カラム前提の指定。
写真を外した `.yjj-worry--noimg` にもそれが効いてしまい、
340px側に3カラムのリストが入って各カラム106px、
文字が幅40px・高さ784pxの縦一列になっていた（実測）。
画像なし版は1カラムに戻し、リストが全幅を使えるようにする。
===================================================================== */
.yjj-worry--noimg { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
.yjj-worry--noimg { grid-template-columns: 1fr !important; max-width: 1080px; }
.yjj-worry--noimg .yjj-worry__list { grid-template-columns: repeat(3, 1fr); }
}
/* =====================================================================
実配信レポートのカルーセル（2026-09-08 追加・末尾追記のみ）
・SP : 1枚強（約1.15枚）を表示し、横スワイプで1枚ずつスナップ
・PC : 5枚を横に並べて同時に見せる（スクロールが発生しないので矢印・
枚数表示は隠す。SP/タブレットでは矢印もドットも従来どおり出す）
・yjj-lp.js の goTo() は「scrollLeft = i * (item幅 + gap)」で送るため、
scroll-snap-align は start にし、scroll-padding-left をトラックの
padding と一致させて、JSの計算値とスナップ位置を完全に一致させる。
===================================================================== */
.yjj-crs--real { --yjj-real-gap: 12px; max-width: min(1240px, 100% - 24px); margin: 0 auto; }
.yjj-crs--real .yjj-crs__track {
gap: var(--yjj-real-gap);
padding: var(--yjj-real-gap);
scroll-padding-left: var(--yjj-real-gap);
scroll-snap-type: x mandatory;
border-radius: 18px;
}
.yjj-crs--real .yjj-crs__item {
flex: 0 0 90%;
width: 90%;
scroll-snap-align: start;
scroll-snap-stop: always;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.yjj-crs--real .yjj-crs__item img { width: 100%; height: auto; display: block; aspect-ratio: 720 / 1560; }
.yjj-crs--real .yjj-report__cap { display: block; }
.yjj-realnote {
max-width: 680px; margin: 0 auto 12px; padding: 0 16px;
text-align: center; font-size: 14px; line-height: 1.7; color: #33415c;
}
.yjj-realnote b { color: #14243d; }
/* タブレット: 2枚強 */
@media (min-width: 600px) and (max-width: 999px) {
.yjj-crs--real .yjj-crs__item { flex-basis: 44%; width: 44%; }
}
/* PC: 5枚がぴったり横に並ぶ（4つの gap を差し引く） */
@media (min-width: 1000px) {
.yjj-crs--real .yjj-crs__item {
flex-basis: calc((100% - 4 * var(--yjj-real-gap)) / 5);
width: calc((100% - 4 * var(--yjj-real-gap)) / 5);
}
.yjj-crs--real .yjj-crs__track { overflow-x: hidden; }
/* 5枚すべてが見えていて送る先が無いので、矢印・枚数・ドットは出さない */
.yjj-crs--real .yjj-crs__arrow,
.yjj-crs--real .yjj-crs__nav,
.yjj-crs--real .yjj-crs__dots { display: none; }
}
/* 矢印は台紙の内側に収める（-6px だと台紙自身が 6px はみ出して見切れ判定に載る） */
.yjj-crs--real .yjj-crs__arrow--prev { left: 0; }
.yjj-crs--real .yjj-crs__arrow--next { right: 0; }
/* =====================================================================
T29. 50マス図の文字が読めない（2026-09-08 採点で検出）
全マスの文字を白にしていたが、薄い青ほどコントラストが落ちる。
実測: blue-300 #8CBEF0 との比は 1.96（必要 4.5）。41〜50番が判読不能だった。
背景の濃さに応じて文字色を変える。濃紺#12314F との比は
blue-300=6.81 / blue-400=4.90 で基準を満たす。
===================================================================== */
.yjj-lines50__cell--w3,
.yjj-lines50__cell--w4 { color: #12314F; font-weight: 700; }
.yjj-lines50__cell--w2 { color: #fff; background: var(--yjj-blue-600); } /* 3.73→5.09 */
/* =====================================================================
FABLE-DESIGN 実装（2026-09-08・末尾追記のみ）
設計書: lp/design/FABLE-DESIGN.md
§1 ロゴ幅 / §2 FVのレポート立ち上がり＋Ken Burns / §3 CTAの色
§4 PCヘッダーCTA・追従バーの高さ / §5 レポート10枚カルーセル / §6-3
※ FV の級数（h1/sub/eyebrow）は .yjj-fv--photo.yjj-fv--tight 側を直接
直してあるので、ここでは触らない（指定を2箇所に増やさない）
===================================================================== */
html { font-size: 100%; } /* §6-5 rem の基準。ブラウザの文字サイズ設定を効かせる */
/* ---- §1 ロゴ幅（SP 240px / PC 300px。PC右にCTAを置く場所を作る）
ヘッダーのロゴは L3378 で height を !important で握っているので、
幅ではなく高さの変数を動かす。logo.webp は 3135x423（比 7.411）なので
240px 幅 = 32.4px 高、300px 幅 = 40.5px 高。 ---- */
:root { --yjj-header-logo-h: 32.4px; }
@media (min-width: 768px) { :root { --yjj-header-logo-h: 40.5px; } }
/* ---- §3-3 LINE主CTAの面色。#06c755 は白文字 2.3:1 で不合格なので面を1段暗くし、
ブランド緑は外周ボーダーとして残す（3.4:1／大文字合格） ---- */
.yjj-btn-line { background: #05a044; border: 2px solid #06c755; }
.yjj-btn-line__top {
/* 親が flex なので計算値は block になるが、幅は内容ぴったりに収まる */
display: inline-block; background: #0f2740; color: #fff;
padding: 2px 8px; border-radius: 999px;
font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: 1;
}
.yjj-btn-line__main { font-size: 20px; }
@media (min-width: 768px) { .yjj-btn-line__main { font-size: 22px; } }
.cta__scroll-bottom .yjj-stickybar__line { background: #05a044; border: 2px solid #06c755; }
/* ---- §4-2 追従バーの高さ 89px → 80px（外側 padding と中身の min-height を詰める）
元は content-box + min-height:72px + padding9px + border1px = 82px だったので、
border-box にして 80px を実寸で指定する ---- */
.cta__scroll-bottom { box-sizing: border-box; min-height: 80px; padding: 4px 8px 5px; }
.cta__scroll-bottom .yjj-stickybar__line,
.cta__scroll-bottom .yjj-stickybar__join { min-height: 52px; }
/* ---- §4-3 PC ヘッダーの LINE ボタン（SP は出さない＝追従バーがあるため） ---- */
.lps-header__right { display: flex; align-items: center; gap: 14px; }
.yjj-header__cta { display: none; }
@media (min-width: 1024px) {
.lps-header__btn.yjj-header__cta {
display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
background: #05a044; color: #fff; text-decoration: none;
font-size: 16px; font-weight: 900; line-height: 1; white-space: nowrap;
box-shadow: 0 2px 0 #05863a;
transition: transform .12s ease, box-shadow .12s ease;
}
.lps-header__btn.yjj-header__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(5,160,68,.38); }
.lps-header__btn.yjj-header__cta .yjj-btn-line__ico { width: 22px; height: 22px; flex: 0 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
.lps-header__btn.yjj-header__cta { transition: none; }
.lps-header__btn.yjj-header__cta:hover { transform: none; }
}
/* ---- §2-3 FV: 実物レポートが1枚立ち上がる（PC のみ・新規動画は作らない） ---- */
.yjj-fv__float { display: none; }
@media (min-width: 1024px) {
.yjj-fv__float {
display: block; position: absolute; right: 8%; top: 56px; z-index: 1;
width: 260px; height: 470px; overflow: hidden; border-radius: 22px;
box-shadow: 0 24px 60px rgba(0,0,0,.45);
transform: translateY(40px) rotate(-4deg); opacity: 0;
/* 2本目が transform を上書きして rotate が消えるので、rotate 込みの専用keyframeを使う */
animation: yjjFvRise .9s cubic-bezier(.2,.8,.2,1) .4s forwards,
yjjFvFloatIdle 6s ease-in-out 1.4s infinite;
}
.yjj-fv__float img { width: 100%; height: auto; object-fit: cover; object-position: top center; display: block; }
}
@keyframes yjjFvRise { to { transform: translateY(0) rotate(-4deg); opacity: 1; } }
@keyframes yjjFvFloatIdle { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
.yjj-fv__float { animation: none; opacity: 1; transform: rotate(-4deg); }
}
/* ---- §2-4 poster から動画に切り替わるまでの空白を Ken Burns で埋める ---- */
.yjj-fv__bg picture img { animation: yjjKb 9s ease-out forwards; }
@keyframes yjjKb { from { transform: scale(1); } to { transform: scale(1.06); } }
.yjj-fv--playing .yjj-fv__bg picture img { animation: none; }
@media (prefers-reduced-motion: reduce) { .yjj-fv__bg picture img { animation: none; } }
/* ---- §5-2/5-3 レポート10枚カルーセル ---- */
.yjj-crs--real .yjj-crs__item { flex: 0 0 var(--yjj-report-w); width: var(--yjj-report-w); }
.yjj-crs--real .yjj-crs__track { scroll-padding-inline: var(--yjj-real-gap); }
/* 画像は上から固定高でクロップする（銀行名・配信日・4指標が必ず入る高さ） */
.yjj-crs--real .yjj-crs__item img {
aspect-ratio: auto; height: 440px; object-fit: cover; object-position: top center;
}
@media (min-width: 600px) and (max-width: 999px) {
.yjj-crs--real .yjj-crs__item { flex-basis: var(--yjj-report-w); width: var(--yjj-report-w); }
}
@media (min-width: 1000px) {
/* 3枚見せ＋矢印。380*3 + gap24*2 + track padding24*2 = 1236px */
.yjj-crs--real { --yjj-real-gap: 24px; max-width: min(1236px, 100% - 24px); }
.yjj-crs--real .yjj-crs__item {
flex: 0 0 var(--yjj-report-w-pc); width: var(--yjj-report-w-pc);
}
.yjj-crs--real .yjj-crs__item img { height: 520px; }
.yjj-crs--real .yjj-crs__track { overflow-x: auto; }
.yjj-crs--real .yjj-crs__arrow { display: flex; }
.yjj-crs--real .yjj-crs__nav { display: block; }
}
/* ドットは10個だと読めない。PC・SP とも「n / 10」のカウンタ＋矢印に統一 */
.yjj-crs--real .yjj-crs__dots { display: none; }
/* 端に来た矢印は押せないことを見せる */
.yjj-crs--real .yjj-crs__arrow[disabled] { opacity: .35; pointer-events: none; }
/* ---- §6-1 対象エリア（fit セクションの1行目） ---- */
.yjj-fit__area {
max-width: 880px; margin: 0 auto 14px; padding: 12px 16px;
background: #f2f7fd; border: 1px solid #d6e4f5; border-radius: 12px;
font-size: var(--yjj-fs-body); line-height: 1.8; color: #22314a; text-align: left;
}
.yjj-fit__area b { color: #12314f; }
/* ---- §6-3 360px で数値カードが「200 / 社 / 超」と分断されるのを止める ---- */
/* L3934 の .yjj-keyfig--3 .yjj-keyfig__num（36px・詳細度0,2,0）が効いているので同じ詳細度で書く */
.yjj-keyfig__num,
.yjj-keyfig--3 .yjj-keyfig__num { font-size: clamp(24px, 7.6vw, 30px); white-space: nowrap; }
.yjj-keyfig__num small,
.yjj-keyfig--3 .yjj-keyfig__num small { font-size: clamp(10px, 2.8vw, 11px); }
.yjj-keyfig__item { padding: 12px 4px 10px; }
/* PC: h1 を 44px にした結果、コピー幅 620px では最終行が「…お渡ししま／す。」と
割れる。FVのレポート画像は左端 ≒917px から始まるので、720px までは広げられる。 */
@media (min-width: 768px) {
/* §3-1: eyebrow は PC で 14px */
.yjj-fv--photo.yjj-fv--tight .yjj-fv__eyebrow { font-size: 0.875rem; }
}
/* 1024〜1199px はレポート画像（right:8% / 幅260px）が左に寄ってくるので、
コピー幅を先に詰めて重なりを作らない。1200px 以上で 700px に戻す。 */
@media (min-width: 1024px) and (max-width: 1199px) {
/* 幅640px＋40px なら最終行「50行分、無料でお渡しします。」が1行に収まる（実測591px） */
.yjj-fv--photo.yjj-fv--tight .yjj-fv__copy { max-width: 640px; }
.yjj-fv--photo.yjj-fv--tight .yjj-fv__title { font-size: 2.5rem; }
.yjj-fv__float { right: 5%; } /* コピーとぶつからないよう右へ寄せる */
}
@media (min-width: 1200px) {
.yjj-fv--photo.yjj-fv--tight .yjj-fv__copy { max-width: 700px; }
}
/* =====================================================================
JUDGE1（広告運用者）実測フィードバックの反映（2026-09-08）
===================================================================== */
/* 8) カルーセル直下の用語注釈。読み飛ばせる大きさで、本文の邪魔をしない */
.yjj-terms {
max-width: 680px; margin: 10px auto 14px; padding: 10px 16px;
list-style: none; text-align: left;
font-size: 13px; line-height: 1.7; color: #46536b;
background: #f6f9fd; border: 1px solid #e2eaf5; border-radius: 10px;
}
.yjj-terms li { position: relative; padding-left: 14px; }
.yjj-terms li::before { content: "・"; position: absolute; left: 0; color: #7c8ba5; }
.yjj-terms b { color: #14243d; }
/* 9) 出典の添え書き */
.yjj-src { font-size: .82em; font-weight: 500; opacity: .9; }
/* 2) 矢印のタップ領域を 44px 以上にする（ドットは非表示運用なので対象外） */
.yjj-crs__arrow { min-width: 44px; min-height: 44px; }
/* =====================================================================
再採点フィードバックの反映
===================================================================== */
/* 2) 打消し表示を試算表の直上に置いた。数字より先に読ませ、
追従CTAバー（SP・高さ約80px）に隠れない位置に固定する */
.yjj-chart__note--lead { margin: 0 0 12px; }
@media (max-width: 767px) {
.yjj-chart__note--lead { font-size: 12px; }
/* 最後の棒が追従バーの下に潜ったままにならないよう、下端に逃げを作る */
.yjj-loss .yjj-chart { padding-bottom: 24px; }
}
/* 3) 実物レポートは「1枚のレポートとして意味が読み取れる」高さまで見せる
画像は 720x1560。SP 332px幅→自然高719px、PC 380px幅→自然高823px。
SP 620px（約86%）／PC 700px（約85%）で、基本情報〜対象物件の基準まで入る */
.yjj-crs--real .yjj-crs__item img { height: 620px; }
@media (min-width: 1000px) {
.yjj-crs--real .yjj-crs__item img { height: 700px; }
}
/* 4) 固定ヘッダーはSP・PCとも完全不透明。半透明だと本文が透けて二重に見える。
backdrop-filter が使える環境ではさらにぼかしも掛けるが、
非対応ブラウザでも不透明な背景色だけで成立する（ぼかしは保険） */
.lps-header.yjj-header {
background: #ffffff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* 5) FV eyebrow は「融資情報ジャーナル｜無料お試し版」を1行で収める */
@media (max-width: 420px) {
.yjj-fv--photo.yjj-fv--tight .yjj-fv__eyebrow { white-space: nowrap; }
}