/* refine.css — 仕上げ層（2026-09-23 Claude）。既存CSSの後に読み込み、読みやすさ・統一感・改行を整える */

/* 見出しの改行：文節で折る（Chrome/Edge）＋はみ出し防止。keep-all は Safari で逆効果のため使わない */
h1,h2,h3{text-wrap:balance;overflow-wrap:anywhere}
@supports (word-break:auto-phrase){h1,h2,h3{word-break:auto-phrase}}
.ib{display:inline-block}

/* 見出しの「何の話か」行（SEO・AI検索向けに見出し内へ入れた主題） */
.h2-topic{display:block;margin-bottom:16px;font-size:15px;font-weight:700;line-height:1.7;letter-spacing:.04em;color:#46566a}
/* 既存の「h2>span は1行固定・横並び」指定に負けないように */
h2>.h2-topic{display:block!important;white-space:normal!important;margin-right:0!important}
.decision-heading h2 .h2-topic,.faq-heading h2 .h2-topic{margin-bottom:12px}
.service .h2-topic,.j-before .h2-topic,.closing-contact .h2-topic{color:#b9c6d6}

/* 本文の読みやすさ：薄すぎ・小さすぎの灰色文字を一段濃く大きく */
.section-summary,.j-lead,.decision-heading>p:not(.eyebrow),.faq-heading>p:not(.eyebrow),.trust-company-top>p{color:#3f4d5e}
.j-small,.decision-body p,.j-process-list p,.j-price-list dd,.article-card p{color:#4a5869}
.j-small{font-size:14px}
.j-process-list p{font-size:14px;line-height:1.95}
.service .section-summary,.service-points p,.j-before p,.closing-intro p{color:#cfd9e5}
.j-source,.closing-note{color:#9fb0c3}

/* ヒーロー：無料バッジと縦書き英字が重なるため、縦書きを下へ逃がす */
.hero-vertical{top:auto;bottom:30px}

/* 「BEYOND DEMOLITION.」の大きなオレンジ帯 → 次の紺セクションへつながる細い帯に */
.impact-divider{background:#0c1b2d;color:#fff;border-bottom:1px solid #ffffff14;padding-top:34px;padding-bottom:34px}
.impact-divider>span:first-child{color:transparent;-webkit-text-stroke:1px #ffffff80;letter-spacing:-.03em}
.impact-divider>span:last-child{color:#ff9b43;letter-spacing:.12em}
@supports not (-webkit-text-stroke:1px #fff){.impact-divider>span:first-child{color:#ffffff40}}

/* 選ばれる理由の写真：片側だけの角丸をやめて他の写真とそろえる */
.service-photo img{border-radius:6px}

/* 工事の流れのタグ：9pxで読めないため少し大きく */
.j-process-tag{font-size:11px;padding:4px 11px;color:#4a5869}

/* スマホ：ヒーロー下の3点は横3列だと窮屈で「見積／り」と折れるため縦並びに */
@media (max-width:600px){
  .proof-ribbon{grid-template-columns:1fr;padding:6px 22px}
  .proof-ribbon>div{padding:14px 0;border-right:0;border-bottom:1px solid #ffffff1f;gap:16px}
  .proof-ribbon>div:last-of-type{border-bottom:0}
  .proof-ribbon>div>span{font-size:24px;min-width:34px}
  .proof-ribbon strong{font-size:15px;white-space:normal}
  .proof-ribbon small{font-size:12px;white-space:normal}
  .h2-topic{font-size:14px;margin-bottom:12px}
  .impact-divider{padding-top:24px;padding-bottom:24px}
  .service .section-top h2{font-size:clamp(26px,8vw,40px)}
}

/* ヒーロー：信頼材料（建設業許可）と補足文が薄く小さいため、読める濃さに */
.hero-permit{color:#3f4d5e;font-size:13px;font-weight:600}
.hero-permit>span{color:var(--orange)}
.impact-hero-support{color:#4a5869}

/* FAQの回答・会社情報の項目名も、薄すぎないように */
.faq-answer p{color:#3f4d5e}
.company-table dt{color:#4a5869;font-size:13px;font-weight:600}
.faq-inquiry>span{color:#4a5869}

/* タブレット幅：選ばれる理由の見出しが狭い左列で「任せて／よかった」と折れるため、見出しと説明を縦に積む */
@media (min-width:601px) and (max-width:1000px){
  .service .section-top{flex-direction:column;align-items:flex-start;gap:22px}
}

/* 2026-10-06 オープン後の見た目点検（3幅・全ページ）で直したもの ──────────────── */
/* 文の最後の1〜2文字だけが次の行に落ちる（「〜しま／す。」）のを減らす。対応していないブラウザでは今までどおり */
#main :is(p,li,dd,dt,td,th,summary,figcaption,b,strong){text-wrap:pretty}
/* 表の中は語の途中で折らない（タブレットで「解体の／前」「税務署・税／理士」になっていた）。Chrome系のみ・他は今までどおり */
@supports (word-break:auto-phrase){#main :is(td,th){word-break:auto-phrase}}
/* 本文中の電話番号を途中で改行しない */
#main :is(p,dd,td,li) a[href^="tel:"]{white-space:nowrap}
/* 本文中の文字リンクをリンクだと分かる見た目に（色は周りの文字のまま＝暗い背景でも読める） */
#main :is(p,dd,td,li) > a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:700}
/* トップの新着記事：記事の画像（横3:2）の上の文字が切れないよう、枠を画像と同じ比率に */
.article-card img{aspect-ratio:3/2}
/* タブレット幅で2列のとき、最後の1枚だけ左に残って右が空くカードは横いっぱいに */
@media (max-width:1023px){
  :is(.lw-factor-grid,.lw-situation-grid,.lw-price-list) > :last-child:nth-child(odd),
  .lw-next-grid--light:not(.lw-column-grid) > :last-child:nth-child(odd){grid-column:1/-1}
}