/* Shared final-review rules. Keep source typography and interactions intact. */
/* Five annotated corrections, 2026-10-01. */
.compare-section .editorial-heading{grid-template-columns:minmax(0,1fr);gap:22px}
.compare-section .editorial-heading>p{max-width:760px;margin:0}
#compare-title .heading-phrase{display:inline-block;white-space:nowrap}
.flow-story .flow-story-head{display:block;text-align:left}
.flow-story .flow-story-head p{max-width:none;margin:0 0 14px}
.flow-story .flow-story-head h3{width:100%;text-align:left;white-space:nowrap;font-size:clamp(14px,3.4vw,38px);letter-spacing:0}
.compare-visual .compare-choice .package-check{align-items:center;justify-content:center;text-align:center;margin-inline:auto}
.compare-visual .package-check>small,.compare-visual .package-check>strong,.compare-visual .package-check>span{width:auto;max-width:100%;margin-left:0;margin-right:0;text-align:center;align-self:center}
.soap-finder .soap-search-form{grid-template-columns:minmax(0,1fr) max-content}
.soap-finder .soap-search-form button{white-space:nowrap;padding:16px 26px;font:inherit;font-size:16px}
@media(min-width:681px){button,.line-link,.round-link,.button-label{white-space:nowrap}
.line-link,.round-link{flex-shrink:0;min-width:max-content}}
@media(max-width:480px){.soap-finder .soap-search-form{grid-template-columns:1fr;gap:10px}
.soap-finder .soap-search-form input{border-right:1px solid rgba(53,75,85,.28)}
.soap-finder .soap-search-form button{min-height:52px}}
h2{max-width:100%;min-width:0;word-break:normal;overflow-wrap:normal;text-wrap:balance;line-height:1.5}
h2 br{display:none}
main h2:not(.visually-hidden){width:100%;max-width:100%;word-break:normal;overflow-wrap:normal;text-wrap:balance}
.catalog-pending-section{margin-top:72px}
.catalog-pending-section>h2{font-size:28px;color:#172d3c;font-weight:500}
.catalog-pending-section>p{margin-bottom:28px}
.selection-note{margin:0 0 26px;color:#425663;font-size:12px;line-height:1.8}
.ranking-product{position:relative;min-width:0;margin-top:0!important;background:#fff;border:1px solid rgba(23,45,60,.14);transition:background .3s,border-color .3s}
.ranking-product:hover{border-color:#5f91bf;background:#f8fbfd;transform:none}
.selection-rank{position:absolute;z-index:2;top:16px;left:18px;display:flex;align-items:baseline;gap:8px;color:#172d3c}
.selection-rank>span{font-size:12px}
.selection-rank>b{font-family:"DM Sans",sans-serif;font-size:26px;font-weight:500;line-height:1}
.ranking-product .product-image,.ranking-product .index-product-image{aspect-ratio:1/1;height:auto;border-radius:0;background:#fff}
.ranking-product .product-image img,.ranking-product .index-product-image img{width:100%;height:100%;object-fit:contain;padding:15%;filter:none}
.ranking-product .product-meta,.ranking-product .index-product-meta{padding:22px 24px;min-height:0}
.ranking-product h3{font-size:20px;line-height:1.6;margin:10px 0}
.ranking-product .selection-volume{margin:0 0 12px;color:#425663;font-size:12px;line-height:1.7}
.ranking-product .product-meta i{float:right;font-style:normal;color:#172d3c}
.compare-choice .package-check{width:100%;max-width:340px;min-height:164px;display:flex;flex-direction:column;justify-content:center;padding:28px 34px;box-sizing:border-box;border-radius:47% 53% 45% 55% / 52% 44% 56% 48%;background:#fff}
.compare-choice--detergent .package-check{border-radius:55% 45% 52% 48% / 45% 54% 46% 55%}
.package-check::before,.package-check::after{display:none!important;content:none!important}
.renewal-article{max-width:900px;margin:auto;box-sizing:border-box}
.renewal-article section{padding:28px 0}
.renewal-article h2{font-size:28px;color:#172d3c}
.renewal-lead{font-size:20px;color:#172d3c}
@media(max-width:680px){main img{display:block;margin-inline:auto}
main figure{margin-inline:auto;justify-self:center;max-width:100%;box-sizing:border-box}
.record-photo,.record-photo-small{width:100%;max-width:520px;margin-left:auto!important;margin-right:auto!important;justify-self:center}
.record-photo img{width:100%;margin-inline:auto}
.record-photo figcaption{text-align:center;line-height:1.7}
.ranking-product{grid-column:auto!important}
.ranking-product .product-image,.ranking-product .index-product-image{aspect-ratio:1.1}
.compare-choice .package-check{max-width:300px;margin-inline:auto;padding:26px 24px;min-height:154px}
.wash-flow li,.wash-flow li:nth-child(odd),.wash-flow li:nth-child(even){display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.wash-flow .flow-icon,.wash-flow li:nth-child(odd) .flow-icon{width:144px;height:126px;margin-inline:auto}
.wash-flow .flow-arrow{left:calc(50% - 12px)}
.wash-flow small,.wash-flow li:nth-child(odd) small{align-self:center;margin-top:6px}}
.editorial-heading,.catalog-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.editorial-heading>div,.catalog-intro>div,.catalog-guide>div{min-width:0}
.catalog-guide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.catalog-guide .line-link{grid-column:2}
.catalog-guide h2{font-size:clamp(26px,3vw,40px)}
.catalog-copy h2{font-size:20px}
.product-pending{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;background:#f2f6f8!important;color:#425663;text-align:center;padding:24px}
.product-pending strong{font-family:"DM Sans",sans-serif;font-size:clamp(20px,2.5vw,30px);font-weight:400;letter-spacing:.05em}
.product-pending span{font-size:12px;letter-spacing:.12em}
.compare-path,.compare-path::before,.compare-path::after,.wash-flow::before,.wash-flow::after,.wash-flow li::before,.wash-flow li::after{display:none!important;content:none!important}
.compare-choices{gap:36px;margin-top:30px}
.compare-choice,.compare-choice--soap,.compare-choice--detergent{grid-template-columns:minmax(0,1fr);gap:15px;min-height:0;padding:0;border:0}
.compare-symbol{width:190px;height:150px;justify-self:center;transform:none}
.compare-choice-copy{width:100%;min-width:0}
.compare-choice h3{white-space:nowrap;font-size:clamp(18px,1.8vw,26px);letter-spacing:0;line-height:1.5}
.compare-choice .package-check{grid-column:1;width:100%;max-width:310px}
.compare-arrow{display:block;width:28px;height:28px;justify-self:center;flex:none}
.compare-symbol img[src*="03-synthetic"]{clip-path:inset(0 29% 0 0);transform:translateX(13%)}
.wash-flow{display:flex;align-items:stretch;gap:0;margin:0;padding:0;border:0;list-style:none}
.wash-flow li,.wash-flow li:nth-child(odd),.wash-flow li:nth-child(even){position:relative;display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;align-items:center;padding:0;background:none;border:0;box-shadow:none;transform:none;text-align:center}
.wash-flow li:not(:last-child){margin-right:54px}
.wash-flow .flow-icon,.wash-flow li:nth-child(odd) .flow-icon{display:block;width:100%;height:142px;margin:0;background:none;border:0}
.wash-flow .flow-icon img{width:100%;height:100%;object-fit:contain}
.wash-flow .flow-arrow{position:absolute;display:block;top:59px;left:calc(100% + 15px);width:24px;height:24px;margin:0}
.wash-flow small,.wash-flow li:nth-child(odd) small{margin:12px 0 6px;font-size:12px}
.wash-flow strong{font-size:18px;line-height:1.5}
.wash-flow p{font-size:12px;margin:8px 0 0}
@media(max-width:1000px){.wash-flow{display:grid;grid-template-columns:1fr;gap:54px}
.wash-flow li,.wash-flow li:nth-child(odd),.wash-flow li:nth-child(even){display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 20px;text-align:left;margin:0;padding:0}
.wash-flow .flow-icon,.wash-flow li:nth-child(odd) .flow-icon{grid-column:1;grid-row:1/4;width:112px;height:104px;margin:0}
.wash-flow small,.wash-flow li:nth-child(odd) small{grid-column:2;justify-self:start;margin:0;align-self:end}
.wash-flow strong,.wash-flow p{grid-column:2;margin:0}
.wash-flow .flow-arrow{top:calc(100% + 15px);left:44px;transform:rotate(90deg)}}
@media(max-width:680px){.editorial-heading,.catalog-intro,.catalog-guide{grid-template-columns:1fr}
.catalog-guide .line-link{grid-column:auto}
.section-shell h2,.index-scenes-heading h2{font-size:clamp(23px,6.2vw,28px);line-height:1.5;letter-spacing:0}
.catalog-copy h2{font-size:20px}
.compare-choices{gap:40px}
.compare-choice h3{font-size:clamp(17px,4.7vw,23px)}
.compare-symbol{width:170px;height:140px}}
/* Final mobile composition: center the illustration and its continuation arrow. */
@media(max-width:680px){.wash-flow li,.wash-flow li:nth-child(odd),.wash-flow li:nth-child(even){display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.wash-flow .flow-icon,.wash-flow li:nth-child(odd) .flow-icon{width:144px;height:126px;margin-inline:auto}
.wash-flow .flow-arrow{left:calc(50% - 12px)}
.wash-flow small,.wash-flow li:nth-child(odd) small{align-self:center;margin-top:6px}}
/* h2 line breaks by phrase, 2026-10-01. Each .h2-phrase is a meaning unit; lines may break only between units. */
h2 .h2-phrase{display:inline-block;white-space:nowrap}
/* Product image shape rule, all pages, 2026-10-01: the image itself carries the shape; no card border, no white inset.
   Large curve top-right, 4px on the other three corners. */
.ranking-product,.ranking-product:hover,.catalog-card,.catalog-card:hover{border:0;background:transparent;box-shadow:none}
.catalog-image,.product-image,.index-product-image,.card-tall .product-image,.ranking-product .product-image,.ranking-product .index-product-image{width:100%;margin:0;overflow:hidden;border:0;border-radius:4px 26% 4px 4px / 4px 26% 4px 4px;background:#f2f6f8}
.catalog-image img,.product-image img,.index-product-image img{mix-blend-mode:multiply}
/* Ranking sections sit on a pale grey ground, so the shape reads in white there. */
.ranking-product .product-image,.ranking-product .index-product-image{background:#fff}
.ranking-product .product-meta,.ranking-product .index-product-meta,.catalog-card .catalog-copy{padding-left:0;padding-right:0;background:transparent}
/* Rank badge: blue circle with the number only. The word "おすすめ" stays for screen readers. */
.selection-rank{top:16px;left:16px;display:grid;place-items:center;width:52px;height:52px;gap:0;border-radius:50%;background:#5F91BF;color:#fff}
.selection-rank>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.selection-rank>b{font-family:"DM Sans",sans-serif;font-size:17px;font-weight:400;letter-spacing:.06em;line-height:1;color:#fff}
@media(max-width:680px){.selection-rank{width:46px;height:46px}
.selection-rank>b{font-size:15px}}
/* Privacy policy body, 2026-10-01 */
.policy-body{min-width:0;display:grid;gap:14px}
.policy-body ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.policy-body li::marker{color:#5F91BF}
.policy-facts{margin:4px 0 0;display:grid;gap:6px}
.policy-facts>div{display:grid;grid-template-columns:5em 1fr;gap:12px}
.policy-facts dt{color:#172d3c;font-weight:500}
.policy-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* Compare section, 2026-10-01: illustration removed; the shared-function line is the centred focal point. */
.compare-common{justify-content:center;text-align:center}
.compare-common>div{display:flex;flex-direction:column;align-items:center}
.compare-common strong{font-size:max(12px,clamp(24px,2.53vw,35px))}
@media(max-width:680px){.compare-common strong{font-size:calc(clamp(17px,4.7vw,23px) + 5px);line-height:1.6}}
/* Lead copy breaks only between phrases; on wider screens each sentence starts its own line. */
.compare-lead .text-phrase{display:inline-block;white-space:nowrap}
@media(min-width:681px){.compare-lead .lead-sentence{display:block}}
/* Ranking cards, 2026-10-01: the product name link covers the card; the maker name links to the company site. */
.ranking-product{position:relative}
.ranking-product .card-link{color:inherit;text-decoration:none}
.ranking-product .card-link::after{content:"";position:absolute;inset:0;z-index:1}
.ranking-product .selection-rank{pointer-events:none}
.ranking-product .maker-link{position:relative;z-index:3;align-self:flex-start;width:max-content;margin-top:auto;color:#5f7a8b;font-size:max(12px,12px);text-decoration:underline;text-decoration-color:rgba(95,122,139,.4);text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.ranking-product .maker-link:hover{color:#5F91BF;text-decoration-color:#5F91BF}
.ranking-product:has(.card-link:focus-visible){outline:2px solid #5F91BF;outline-offset:4px}
.ranking-product .card-link:focus-visible{outline:0}
.ranking-product .index-product-meta,.ranking-product .product-meta{position:static}
/* Product photos: less inner padding so the product reads larger. 2026-10-02 */
.ranking-product .product-image img,.ranking-product .index-product-image img{padding:6%}
.catalog-image:not(.catalog-image--photo) img{padding:5%}
.report-list h3 .text-phrase{display:inline-block;white-space:nowrap}
/* Diagrams (soap portal), SP only, 2026-10-02: deeper teal so white text reaches 5:1 contrast;
   larger, opaque supporting text; flow diagram heading centred. PC is unchanged. */
.flow-story .flow-story-head h3 .text-phrase{display:inline-block;white-space:nowrap}
@media(max-width:680px){.compare-visual,.flow-story,.compare-path::before,.wash-flow li:not(:last-child)::after{background:#247890}
.compare-visual dt{color:#fff;font-size:14px;opacity:.92}
.compare-visual dd{font-size:15px}
.compare-common small,.compare-label,.wash-flow small{font-size:13px}
.compare-visual .package-check>small{color:#425663;font-size:13px}
.compare-visual .package-check>span{font-size:14px}
.compare-note,.compare-note strong{font-size:15px}
.flow-story .flow-story-head{text-align:center}
.flow-story .flow-story-head p{margin:0 0 10px;font-size:14px;text-align:center}
.flow-story .flow-story-head h3{width:auto;text-align:center;white-space:normal;font-size:24px;line-height:1.5}
.wash-flow strong{font-size:20px}
.wash-flow p{color:#fff;font-size:15px;opacity:1}
.compare-section .source-note{font-size:14px}}
.compare-visual dd .text-phrase{display:inline-block;white-space:nowrap}
/* ===== SP readability, 2026-10-02 =====
   Headings: every heading size rule that applies at <=680px is repeated here with +2px, in original cascade order
   (styles.css, index.css, index.html inline style, review.css). Top-page-only rules are scoped with :where() so specificity is unchanged. */
@media(max-width:680px){.page-mast h1{font-size:calc(max(12px,clamp(50px,5.8vw,80px)) + 2px)}
.intro h2,.history h2,.record-feature h2,.section-heading h2{font-size:calc(max(12px,clamp(38px,4.8vw,66px)) + 2px)}
.activity-item h3{font-size:calc(max(12px,clamp(24px,2.4vw,34px)) + 2px)}
.footer-info h3{font-size:calc(max(12px,15px) + 2px)}
.page-mast h1{font-size:calc(max(12px,48px) + 2px)}
.intro h2,.history h2,.record-feature h2,.section-heading h2{font-size:calc(max(12px,40px) + 2px)}
.section-heading h2{font-size:calc(max(12px,39px) + 2px)}
.activity-item h3{font-size:calc(max(12px,28px) + 2px)}
.editorial-heading h2{font-size:calc(max(12px,clamp(38px,4.5vw,64px)) + 2px)}
.portal-opening h2{font-size:calc(max(12px,clamp(42px,5.2vw,74px)) + 2px)}
.compare-card h3{font-size:calc(max(12px,clamp(30px,3.2vw,46px)) + 2px)}
.portal-product-copy h3{font-size:calc(max(12px,22px) + 2px)}
.basic-card h3{font-size:calc(max(12px,26px) + 2px)}
.archive-intro h2{font-size:calc(max(12px,clamp(38px,4.8vw,66px)) + 2px)}
.article-row h2,.article-row h3{font-size:calc(max(12px,clamp(18px,2vw,27px)) + 2px)}
.feature-report h2{font-size:calc(max(12px,clamp(30px,4vw,56px)) + 2px)}
.archive-panel h3{font-size:calc(max(12px,26px) + 2px)}
.org-summary h2{font-size:calc(max(12px,clamp(38px,4.6vw,64px)) + 2px)}
.contact-aside h2{font-size:calc(max(12px,30px) + 2px)}
.editorial-heading h2{font-size:calc(max(12px,42px) + 2px)}
.portal-opening h2{font-size:calc(max(12px,45px) + 2px)}
.feature-report h2{font-size:calc(max(12px,34px) + 2px)}
.page-mast--compact h1{font-size:calc(max(12px,clamp(44px,5vw,68px)) + 2px)}
.center-heading h2,.compact-heading h2{font-size:calc(max(12px,clamp(31px,3.4vw,46px)) + 2px)}
.index-section-heading h2{font-size:calc(max(12px,clamp(31px,3.4vw,46px)) + 2px)}
.index-product-meta h3{font-size:calc(max(12px,20px) + 2px)}
.index-scenes-heading h2{font-size:calc(max(12px,clamp(31px,3.4vw,46px)) + 2px)}
.news-intro h2{font-size:calc(max(12px,clamp(30px,3.4vw,46px)) + 2px)}
.news-copy h3{font-size:calc(max(12px,clamp(19px,2vw,27px)) + 2px)}
.news-card .news-copy h3{font-size:calc(max(12px,18px) + 2px)}
.news-archive h3,.network-cta h3{font-size:calc(max(12px,22px) + 2px)}
.org-summary h2{font-size:calc(max(12px,clamp(30px,3.4vw,46px)) + 2px)}
.page-mast--compact h1{font-size:calc(max(12px,40px) + 2px)}
.index-section-heading h2,.index-scenes-heading h2,.center-heading h2,.compact-heading h2{font-size:calc(max(12px,32px) + 2px)}
.index-product-meta h3{font-size:calc(max(12px,19px) + 2px)}
.news-card .news-copy h3{font-size:calc(max(12px,16px) + 2px)}
.org-summary h2{font-size:calc(max(12px,32px) + 2px)}
.feature-report--with-photo h2{font-size:calc(max(12px,clamp(25px,3vw,42px)) + 2px)}
.feature-report--with-photo h2{font-size:calc(max(12px,30px) + 2px)}
.compare-choice h3{font-size:calc(max(12px,clamp(21px,2vw,29px)) + 2px)}
.flow-story-head h3{font-size:calc(max(12px,clamp(27px,3vw,42px)) + 2px)}
.compare-choice h3{font-size:calc(max(12px,22px) + 2px)}
.flow-story-head h3{font-size:calc(max(12px,31px) + 2px)}
.index-section-heading h2,.index-scenes-heading h2{font-size:calc(max(12px,clamp(37px,4.6vw,64px)) + 2px)}
.index-product-meta h3{font-size:calc(max(12px,clamp(20px,2vw,27px)) + 2px)}
.intro h2,.history h2,.record-feature h2,.section-heading h2,.portal-opening h2,.editorial-heading h2,.index-section-heading h2,.index-scenes-heading h2,.center-heading h2,.compact-heading h2,.archive-intro h2,.news-intro h2,.org-summary h2,.contact-aside h2{font-size:calc(max(12px,clamp(26px,7.2vw,32px)) + 2px)}
.compare-choice h3{font-size:calc(max(12px,clamp(22px,2vw,30px)) + 2px)}
.flow-story-head h3{font-size:calc(max(12px,clamp(27px,3vw,40px)) + 2px)}
.compare-choice h3{font-size:calc(max(12px,clamp(23px,2.3vw,32px)) + 2px)}
.status-card h1{font-size:calc(max(12px,clamp(36px,5vw,62px)) + 2px)}
.policy-content h2{font-size:calc(max(12px,22px) + 2px)}
.status-card h1{font-size:calc(max(12px,34px) + 2px)}
.policy-content h2{font-size:calc(max(12px,20px) + 2px)}
.journal-issue-head h2{font-size:calc(max(12px,clamp(38px,5vw,64px)) + 2px)}
.journal-article-head h2{font-size:calc(max(12px,clamp(32px,4vw,50px)) + 2px)}
.agency-section h3{font-size:calc(max(12px,28px) + 2px)}
.journal-issue-head h2{font-size:calc(max(12px,34px) + 2px)}
.journal-article-head h2{font-size:calc(max(12px,30px) + 2px)}
.agency-section h3{font-size:calc(max(12px,25px) + 2px)}
.status-card h1{font-size:calc(max(12px,clamp(34px,4.2vw,54px)) + 2px)}
.journal-issue-head h2{font-size:calc(max(12px,30px) + 2px)}
.journal-article-head h2{font-size:calc(max(12px,clamp(24px,7vw,28px)) + 2px)}
.status-card h1{font-size:calc(max(12px,32px) + 2px)}}
@media(max-width:680px) and (max-width:360px){.journal-article-head h2{font-size:calc(max(12px,24px) + 2px)}}
@media(max-width:680px){.catalog-intro h2{font-size:calc(max(12px,clamp(38px,4.5vw,60px)) + 2px)}
.catalog-copy h2{font-size:calc(max(12px,22px) + 2px)}
.catalog-guide h2{font-size:calc(max(12px,clamp(34px,4vw,54px)) + 2px)}
.catalog-intro h2{font-size:calc(max(12px,42px) + 2px)}
.catalog-copy h2{font-size:calc(max(12px,22px) + 2px)}
:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(max(12px,clamp(58px,8.3vw,130px)) + 2px)}
:where(html:has(link[href^="index.css"])) .philosophy h2,:where(html:has(link[href^="index.css"])) .section-title-row h2,:where(html:has(link[href^="index.css"])) .scenes h2,:where(html:has(link[href^="index.css"])) .reports h2,:where(html:has(link[href^="index.css"])) .news h2,:where(html:has(link[href^="index.css"])) footer h2{font-size:calc(max(12px,clamp(40px,5.5vw,80px)) + 2px)}
:where(html:has(link[href^="index.css"])) .product-meta h3{font-size:calc(max(12px,clamp(21px,2vw,28px)) + 2px)}
:where(html:has(link[href^="index.css"])) .report-list h3{font-size:calc(max(12px,17px) + 2px)}
:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(max(12px,clamp(52px,16vw,78px)) + 2px)}
:where(html:has(link[href^="index.css"])) .report-list h3{font-size:calc(max(12px,15px) + 2px)}
:where(html:has(link[href^="index.css"])) .report-list h3{font-size:calc(max(12px,16px) + 2px)}
:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(max(12px,clamp(38px,4.05vw,62px)) + 2px)}}
@media(max-width:680px) and (max-width:980px){:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(max(12px,clamp(34px,5.6vw,54px)) + 2px)}}
@media(max-width:680px){:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(max(12px,clamp(22px,6.8vw,32px)) + 2px)}
:where(html:has(link[href^="index.css"])) .report-list h3{font-size:calc(max(12px,16px) + 2px)}
:where(html:has(link[href^="index.css"])) .report-list h3{font-size:calc(max(12px,15px) + 2px)}
:where(html:has(link[href^="index.css"])) .philosophy h2,:where(html:has(link[href^="index.css"])) .section-title-row h2,:where(html:has(link[href^="index.css"])) .scenes h2,:where(html:has(link[href^="index.css"])) .reports h2,:where(html:has(link[href^="index.css"])) .news h2{font-size:calc(max(12px,clamp(37px,calc(5.5vw - 3px),77px)) + 2px)}
:where(html:has(link[href^="index.css"])) .philosophy h2,:where(html:has(link[href^="index.css"])) .section-title-row h2,:where(html:has(link[href^="index.css"])) .scenes h2,:where(html:has(link[href^="index.css"])) .reports h2,:where(html:has(link[href^="index.css"])) .news h2{font-size:calc(max(12px,clamp(22px,6.6vw,30px)) + 2px)}
:where(html:has(link[href^="index.css"])) .philosophy h2,:where(html:has(link[href^="index.css"])) .section-title-row h2,:where(html:has(link[href^="index.css"])) .scenes h2,:where(html:has(link[href^="index.css"])) .reports h2,:where(html:has(link[href^="index.css"])) .news h2{font-size:calc(max(12px,clamp(24px, calc(6.6vw + 2px), 32px)) + 2px)}
.flow-story .flow-story-head h3{font-size:calc(clamp(14px,3.4vw,38px) + 2px)}
.catalog-pending-section>h2{font-size:calc(28px + 2px)}
.ranking-product h3{font-size:calc(20px + 2px)}
.renewal-article h2{font-size:calc(28px + 2px)}
.catalog-guide h2{font-size:calc(clamp(26px,3vw,40px) + 2px)}
.catalog-copy h2{font-size:calc(20px + 2px)}
.compare-choice h3{font-size:calc(clamp(18px,1.8vw,26px) + 2px)}
.section-shell h2,.index-scenes-heading h2{font-size:calc(clamp(23px,6.2vw,28px) + 2px)}
.catalog-copy h2{font-size:calc(20px + 2px)}
.compare-choice h3{font-size:calc(clamp(17px,4.7vw,23px) + 2px)}
.flow-story .flow-story-head h3{font-size:calc(24px + 2px)}}
/* Body text on SP: 16px (long reading 17px), descriptions 15px, dates/labels 14px, footer 14px, copyright 12px.
   Decorative English labels (.micro) stay 12px. Headings are handled by the generated rules above. */
@media(max-width:680px){main p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),main li,main dd,main button,main .button-label,main a.ink-link,main span.ink-link{font-size:16px!important}
.article-body p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),.article-body li,.intro-copy p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),.history-copy p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),.record-feature-copy p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),.activity-item p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)),.renewal-article p:where(:not(.page-lead,.lead-serif,.renewal-lead,.status-code,.policy-content>p:first-child,.article-lead p,.portal-opening-copy p)){font-size:17px!important}
.catalog-copy>p:not([class]),.news-copy p,.scene-content p,.index-scene-content p,.news-list p,.compare-note span,.compare-note strong,main label,.consent-check span,.soap-tag-cloud a,.wash-flow p{font-size:15px!important}
main dt,main figcaption,main time,main .catalog-volume,main .catalog-maker,main .catalog-notice,main .catalog-link,main .catalog-stock-note,main .catalog-badges span,main .product-pending span,main .source-note,main .source-note a,main .breadcrumb a,main .breadcrumb span,.breadcrumb a,.breadcrumb span,main .news-meta span,main p.article-byline,main .scene-no,main .selection-volume,main .product-meta small,main .index-product-meta small,main .maker-link,main .policy-note,main .tag,main label em,main .required-chip,main .journal-issue-meta span,main .journal-issue-meta b,main .form-steps li,main .form-steps span,main .package-check>small,main .package-check>span,main p.compare-label,main .compare-common small,main .wash-flow small,main .flow-story-head p,main p.article-index,main .basic-card>span{font-size:14px!important}
main p.micro,main .micro,.micro{font-size:12px!important}
footer nav a,.footer-info p,.footer-info nav a{font-size:14px!important}
.footer-bottom small{font-size:12px!important}
main .policy-facts dt{font-size:16px!important}}
.compare-common strong .text-phrase{display:inline-block;white-space:nowrap}
/* h1/h3 that wrap: prefer breaks at the <wbr> phrase points; break elsewhere only if a phrase cannot fit. 2026-10-02 */
.wbr-heading,.wbr-heading a{word-break:keep-all;overflow-wrap:anywhere}
/* Top-page catchphrase: grow by up to 2px on SP, but never wider than the screen (13 characters per line). */
@media(max-width:680px){:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:min(calc(clamp(22px,6.8vw,32px) + 2px),calc((100vw - 40px) / 13.2))}}
/* Very small phones (<=360px): page titles and status titles step down so each phrase fits on a line; news cards stack. */
@media(max-width:360px){.page-mast h1{font-size:max(12px,min(calc(48px + 2px),12vw))}
.page-mast--compact h1{font-size:max(12px,min(calc(40px + 2px),10.5vw))}
.status-card h1{font-size:28px}
.news-card{grid-template-columns:1fr}}
/* Footer, 2026-10-02: the organisation name links to the top page. On PC the nav keeps its original six items and position;
   the extra "トップ" text link shows on SP only, where the nav wraps. */
.footer-home{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s cubic-bezier(.22,1,.36,1)}
.footer-home:hover,.footer-home:focus-visible{background-size:100% 1px}
@media(min-width:681px){.footer-info nav a[href="index.html"]{display:none}}
/* 10/7（6回目） */
/* SP版：h1を1px、h2を2px大きく（各ページの現在の指定値に加算） */
@media ((max-width: 680px)){.status-card h1{font-size:calc(calc(34px) + 1px)}}
@media ((max-width: 680px)){.page-mast h1{font-size:calc(calc(50px) + 1px)}}
@media ((max-width: 680px)){.page-mast--compact h1{font-size:calc(calc(42px) + 1px)}}
@media ((max-width: 680px)){:where(html:has(link[href^="index.css"])) .hero-copy h1{font-size:calc(min(2px + clamp(22px, 6.8vw, 32px), -3.0303px + 7.57576vw) + 1px)}}
@media ((max-width: 360px)){.status-card h1{font-size:calc(28px + 1px)}}
@media ((max-width: 360px)){.page-mast h1{font-size:calc(max(12px, min(50px, 12vw)) + 1px)}}
@media ((max-width: 360px)){.page-mast--compact h1{font-size:calc(max(12px, min(42px, 10.5vw)) + 1px)}}
@media ((max-width: 680px)){.section-shell h2{font-size:calc(calc(2px + clamp(23px, 6.2vw, 28px)) + 2px)}}
@media ((max-width: 680px)){:where(html:has(link[href^="index.css"])) .philosophy h2{font-size:calc(calc(2px + max(12px, clamp(24px, 2px + 6.6vw, 32px))) + 2px)}}
@media ((max-width: 680px)){:where(html:has(link[href^="index.css"])) .section-title-row h2{font-size:calc(calc(2px + max(12px, clamp(24px, 2px + 6.6vw, 32px))) + 2px)}}
@media ((max-width: 680px)){:where(html:has(link[href^="index.css"])) .scenes h2{font-size:calc(calc(2px + max(12px, clamp(24px, 2px + 6.6vw, 32px))) + 2px)}}
@media ((max-width: 680px)){:where(html:has(link[href^="index.css"])) .news h2{font-size:calc(calc(2px + max(12px, clamp(24px, 2px + 6.6vw, 32px))) + 2px)}}
@media ((max-width: 680px)){.catalog-copy h2{font-size:calc(calc(22px) + 2px)}}
@media ((max-width: 680px)){.index-scenes-heading h2{font-size:calc(calc(2px + clamp(23px, 6.2vw, 28px)) + 2px)}}
/* PC版：石けんを探すの図解（石けんと合成洗剤／水の循環）の文字をすべて1px大きく */
@media (min-width:681px){.compare-common small{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.compare-common strong{font-size:calc(max(12px, clamp(24px, 2.53vw, 35px)) + 1px)}}
@media (min-width:681px){.compare-label{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.compare-choice h3{font-size:calc(clamp(18px, 1.8vw, 26px) + 1px)}}
@media (min-width:681px){.compare-choice dt{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.compare-choice dd{font-size:calc(calc(14px) + 1px)}}
@media (min-width:681px){.package-check small{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.package-check strong{font-size:calc(calc(18px) + 1px)}}
@media (min-width:681px){.package-check span{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.compare-choice--detergent .compare-label{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.compare-note{font-size:calc(calc(13px) + 1px)}}
@media (min-width:681px){.flow-story-head p{font-size:calc(calc(12px) + 1px)}}
@media (min-width:681px){.flow-story .flow-story-head h3{font-size:calc(clamp(14px, 3.4vw, 38px) + 1px)}}
@media (min-width:681px){.wash-flow li:nth-child(2n+1) small{font-size:calc(12px + 1px)}}
@media (min-width:681px){.wash-flow strong{font-size:calc(18px + 1px)}}
@media (min-width:681px){.wash-flow p{font-size:calc(12px + 1px)}}
@media (min-width:681px){.wash-flow small{font-size:calc(12px + 1px)}}
/* 「水と油の間に働き〜」の図解のイラスト（石けん・合成洗剤・矢印）を約12%大きく */
.compare-symbol{width:213px;height:168px}
.compare-arrow{width:31px;height:31px}
@media(max-width:680px){.compare-symbol{width:190px;height:157px}}
/* 上記の拡大で左右の文字の折り返し行数が変わる画面幅（約700〜950px）でも、左右の「石けん／合成洗剤」以下の位置をそろえる（余白は楕円の上に集める） */
@media (min-width:681px){.compare-choice{grid-template-rows:auto auto auto 1fr}.compare-choice .package-check{align-self:end}}
/* 図解「洗うところから〜」の説明文：文字拡大で1文字だけ次の行に落ちないよう、語の区切りで改行 */
@media (min-width:681px){.wash-flow p{word-break:keep-all;overflow-wrap:anywhere}}
/* 10/8 */
/* PC版：図解下の「覚えておきたいこと」の本文を1行で表示（本文の最大幅760pxの制限を外し、枠を左右24pxずつ広げて右側の余白を確保） */
@media (min-width:1181px){.compare-note span{max-width:none}.compare-note{margin-left:-24px;margin-right:-24px}}
/* SP版：全国連ニュース（戌の日行動）の写真。これまでは写真がキャプションの分まで縦に引き伸ばされ、キャプションが下の写真に重なっていた。
   写真は画面幅いっぱい・SP用の比率（1.45:1）で表示し、キャプションと次の写真の間を18pxに */
@media (max-width:680px){.inu-photo-layout{row-gap:18px}.inu-photo-layout figure{justify-self:stretch;width:100%}.inu-photo-layout img{width:100%;height:auto}}