/* Japanese typography / natural line wrapping (v69)
   Keeps punctuation and short particles from creating awkward visual breaks.
   `auto-phrase` is progressive enhancement; unsupported browsers fall back
   to strict Japanese line-breaking rules. */
html:lang(ja),
body{
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
}

:where(h1,h2,h3,h4,h5,h6,
  .hero h1,.recommend-hero h1,.compare-hero h1,.feedback-hero h1,
  .section-title h2,.recommend-intro h2,.ranking-head h3,
  .sell-money-card-v62 h2){
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:balance;
}

:where(p,li,dd,dt,figcaption,
  .note,.caption,.compare-note,
  .affiliate-banner-note-v58,.sell-money-text-v62,.sell-money-note-v62,
  .feedback-card>p,.policy-lead){
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
  text-wrap:pretty;
}

:where(a,button,label,.primary,.secondary-v6,
  .recommend-btn,.product-main-link,.product-sub-link,
  .affiliate-slot-link,.favorites-compare,.timing-valuation,
  .goods-card a,.valuation a){
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
  text-wrap:balance;
}

/* Modern Chromium can wrap Japanese by phrase instead of arbitrary character. */
@supports (word-break:auto-phrase){
  :where(h1,h2,h3,h4,h5,h6,p,li,dd,dt,figcaption,a,button,label,
    .note,.caption,.compare-note,
    .affiliate-banner-note-v58,.sell-money-text-v62,.sell-money-note-v62,
    .feedback-card>p,.policy-lead,
    .primary,.secondary-v6,.recommend-btn,.product-main-link,.product-sub-link,
    .affiliate-slot-link,.favorites-compare,.timing-valuation,.goods-card a,.valuation a){
    word-break:auto-phrase;
  }
}

/* Keep numbers and their units together when markup already groups them. */
:where(.price,.compare-big,.price-guide,.period-current,.cost,.money-line strong,
  .timing-stats b,.rev-v63-summary b){
  white-space:nowrap;
}

/* Very narrow screens: allow long URLs / product strings to escape safely,
   without making ordinary Japanese text break character-by-character. */
@media(max-width:420px){
  :where(code,pre,.url-text,[data-long-text="1"]){
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}