/*
Theme Name: Sumika Honpo Child
Theme URI: https://sumika-honpo.com/
Description: すみか本舗のブランドカラーと、固定ページで編集できるHomeのデザイン。
Author: Scalesuite
Template: scalesuite-theme
Version: 0.9.11
Update URI: https://updates.scalesuite.dev/sumika-honpo-child
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sumika-honpo-child
*/

/* The parent loads this stylesheet in the front end and editor.
   Fonts, focus rings and skip links remain parent-owned.
   Only Home, the pages built like it (.sh-page), their dedicated parts and
   the templates' breadcrumb band and post list use the sh- namespace. */
/* The palette is also handed to the shop's cart, checkout and order pages
   (.sh-store), whose body is WooCommerce's blocks: those keep the parent's
   type, so .sh-store takes the colours below but not the type after them. */
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-breadcrumbs, .sh-archive-list, .sh-cta-bar, .sh-store) {
 --sh-orange: var(--wp--preset--color--sumika-honpo-child-orange);
 --sh-ink: var(--wp--preset--color--scalesuite-ink);
 --sh-muted: var(--wp--preset--color--scalesuite-muted);
 --sh-primary: var(--wp--preset--color--scalesuite-primary);
 --sh-paper: var(--wp--preset--color--scalesuite-background);
 --sh-tint: var(--wp--preset--color--scalesuite-primary-tint);
 --sh-surface: var(--wp--preset--color--scalesuite-surface);
 --sh-line: var(--wp--preset--color--scalesuite-hairline);
 --sh-charcoal: var(--wp--preset--color--scalesuite-secondary);
 --sh-price: var(--wp--preset--color--scalesuite-warm);
 --sh-cta: var(--wp--preset--color--scalesuite-warm);
 --sh-cta-ink: var(--wp--preset--color--scalesuite-warm-ink);
 --sh-green: var(--wp--preset--color--scalesuite-green);
 --sh-green-ink: var(--wp--preset--color--scalesuite-green-ink);
 --sh-radius: 12px;
 --sh-radius-sm: 8px;
}
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-breadcrumbs, .sh-archive-list, .sh-cta-bar) {
 color: var(--sh-ink); font-size: 1rem; line-height: 1.9;
}
/* Muted text (--sh-muted, 5.2–5.7:1) is for 1rem and larger only. Anything
   smaller takes --sh-ink (15.6–17.4:1): the smaller the type, the more
   contrast it needs, so small print is never also made faint. Hierarchy comes
   from size and weight, not from lightness. No opacity on text either.
   Nothing is set below .75rem (12px at the default size). */
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-breadcrumbs, .sh-archive-list), :where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-breadcrumbs, .sh-archive-list) * { box-sizing: border-box; }
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-archive-list) :where(h1, h2, h3, h4, p, figure) { margin-block: 0; }
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-archive-list) :where(img) { display: block; height: auto; max-width: 100%; }
:where(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-breadcrumbs, .sh-archive-list) :where(a) { text-underline-offset: .24em; }

/* WordPress puts margin-block-start on every non-first child of a flow group.
   Where this file re-lays a group out as grid or flex, that margin pushes the
   second column down by one block gap and nothing lines up. Those boxes carry
   their spacing in `gap` and in the explicit rules below, so the inherited
   margin is returned to 0. The list is deliberate: only boxes this file owns. */
:is(.sh-home, .sh-page, .sh-header, .sh-footer, .sh-archive-list) :is(
 .sh-header-inner, .sh-header-actions, .sh-brand,
 .sh-hero, .sh-hero-tabs, .sh-hero-stage, .sh-hero-cards,
 .sh-lede-bar, .sh-lede-copy, .sh-lede-links, .sh-section-heading,
 .sh-feature-row, .sh-feature-copy, .sh-stat, .sh-note,
 .sh-category-heading, .sh-category-title, .sh-category-actions,
 .sh-two-columns, .sh-guide-card, .sh-guide-copy,
 .sh-service-grid, .sh-service-intro, .sh-service-items, .sh-service-item, .sh-service-copy,
 .sh-steps, .sh-step, .sh-closing, .sh-closing-copy,
 .sh-howto-links, .sh-device, .sh-shots, .sh-shot, .sh-news-grid,
 .sh-footer-grid, .sh-footer-brand, .sh-footer-links, .sh-footer-address,
 .sh-footer-bottom, .sh-footer-legal,
 .sh-archive-item, .sh-archive-copy, .sh-area-grid, .sh-area-copy,
 .sh-product-main, .sh-product-media, .sh-product-buy,
 .sh-lp-hero-inner, .sh-lp-steps, .sh-lp-step,
 .sh-lp-area-box, .sh-lp-area-copy,
 .sh-im-hero-copy, .sh-im-deals, .sh-im-deal, .sh-im-hero-cta,
 .sh-im-reason-list, .sh-im-reason, .sh-im-faq-list
) > * { margin-block-start: 0; }

:is(.sh-home, .sh-page) :where(h1, h2, h3, h4) { color: inherit; font-weight: 700; text-wrap: pretty; }
:is(.sh-home, .sh-page) h2 { font-size: 2rem; line-height: 1.45; letter-spacing: .01em; }
:is(.sh-home, .sh-page) h3 { font-size: 1.7rem; line-height: 1.5; letter-spacing: .01em; }
/* Break Japanese headings between phrases, not inside a word (Chromium; other
   engines fall back to the usual break). A phrase longer than the line (オンライン
   見積もり at 200% text on a 320px screen) may still break inside, rather than
   push the page sideways. */
.sh-page :where(h1, h2, h3, h4) { word-break: auto-phrase; overflow-wrap: anywhere; }
.sh-main, .sh-main > .wp-block-post-content, .sh-main > :is(.sh-post, .sh-archive), .sh-home, .sh-page { margin-block: 0; }
/* page.html serves every page. Bodies not yet rebuilt as .sh-page are the old
   site's HTML with no spacing of their own; they get room off the header and
   footer here, and lose it once the body is rebuilt. single.html wraps a post
   in .sh-post, archive.html its list in .sh-archive and 404.html its message in
   .sh-notfound; all three take the same room. */
.sh-main > .wp-block-post-content:not(:has(> .sh-home, > .sh-page, > .sh-concept)), .sh-post, .sh-archive, .sh-notfound { padding-block: 56px 96px; }
.sh-shell { width: calc(100% - 96px); max-width: 1200px; margin-inline: auto; }

/* Breadcrumbs: the core block, under the header in page.html, single.html,
   archive.html and 404.html. The band runs full width and the trail lines up with the logo
   on the shell. Core builds the trail (parent pages, a post's category, or an
   archive's term or date) and hides the separator from screen readers. Each
   link is a 44px target (R-6). */
.sh-breadcrumbs { border-top: 1px solid var(--sh-line); }
.sh-breadcrumbs .wp-block-breadcrumbs { color: var(--sh-ink); font-size: .8rem; line-height: 1.6; }
.sh-breadcrumbs .wp-block-breadcrumbs li { min-block-size: 44px; }
.sh-breadcrumbs .wp-block-breadcrumbs a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--sh-ink); }
.sh-breadcrumbs .wp-block-breadcrumbs a:hover { color: var(--sh-primary); }
/* The parent marks every aria-current="page" bold and underlined. Here the
   underline would make the current page read as one more link, so only that
   is dropped; the bold stays as the cue that is not colour. */
.sh-breadcrumbs .wp-block-breadcrumbs [aria-current] { text-decoration: none; }

/* Post archives (archive.html): one row per post, a thumbnail beside the date,
   title and excerpt. A post without a featured image renders no thumbnail, so
   the row is flex rather than a fixed two-column grid. */
.sh-archive-list > li { margin: 0; padding-block: 28px; border-top: 1px solid var(--sh-line); }
.sh-archive-list > li:last-child { border-bottom: 1px solid var(--sh-line); }
.sh-archive-item { display: flex; align-items: flex-start; gap: 28px; }
.sh-archive-thumb { flex: none; width: 200px; margin: 0; }
.sh-archive-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sh-radius-sm); }
.sh-archive-copy { flex: 1 1 0; min-width: 0; }
.sh-archive-copy .wp-block-post-date { color: var(--sh-ink); font-size: .8rem; line-height: 1.6; }
.sh-archive-copy .wp-block-post-title { margin-top: 6px; font-size: 1.25rem; line-height: 1.5; font-weight: 700; }
.sh-archive-copy .wp-block-post-title a { color: inherit; }
.sh-archive-copy .wp-block-post-title a:hover { color: var(--sh-primary); }
.sh-archive-copy .wp-block-post-excerpt { margin-top: 10px; color: var(--sh-ink); font-size: .9rem; line-height: 1.8; }
.sh-archive-copy .wp-block-post-excerpt__excerpt { margin: 0; }
.sh-archive .wp-block-query-pagination { margin-top: 40px; }

/* Contact form (Fluent Forms). Its default style sets outline: none on focused
   fields and outline: 0 on the submit button, one class deeper than the
   parent's :focus-visible, so keyboard users lost the ring (R-3). The ring is
   drawn again here with the parent's values: 3px of scalesuite-focus, a 2px
   gap of the page colour, 4px under prefers-contrast and Highlight with no gap
   in forced colours (both in the media blocks below). The parent's own width
   and gap live in --ss--* and are not ours to read (CHILD-THEME §7-3), so the
   numbers are repeated; if the parent changes its ring, change these too.
   The selector is the plugin's wrapper and classes only, and wins on one more
   class instead of !important. */
.fluentform.ff-default :is(.ff-el-form-control, .ff-btn):focus-visible {
 outline: 3px solid var(--wp--preset--color--scalesuite-focus);
 outline-offset: 2px;
 box-shadow: 0 0 0 2px var(--wp--preset--color--scalesuite-background);
}
/* Form fields on GoDaddy's managed WordPress. The host injects an inline
   style, id wp-site-designer-contrast-fallback ("Site Designer"), that colours
   every field with the palette slugs of its own themes (base / contrast).
   This site has neither, so the declarations go invalid and the fields lose
   their border and background (seen on the live demo, 2026-10). The selector
   below is GoDaddy's with one more class, so it wins wherever that style is
   injected, and only restates the fields' look where it is not. The border is
   the parent's field colour (muted, 5.7:1), not Fluent Forms' #dadbdd, which
   is 1.4:1 against white and too faint for a field boundary (WCAG 1.4.11). */
body .wp-site-blocks :is(.fluentform, .comment-form) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="hidden"]), textarea, select) { background-color: var(--wp--preset--color--scalesuite-background); color: var(--wp--preset--color--scalesuite-ink); border: 1px solid var(--wp--preset--color--scalesuite-muted); }
/* The same style zeroes the submit button's border; Fluent Forms' own colours
   and padding still win, so only the 1px border (the button's edge in forced
   colours) is put back. */
body .wp-site-blocks .fluentform button[type="submit"]:not(.wp-element-button) { border-width: 1px; }
/* The consent line spells out the policy URL, which has no break point; at
   200% text it pushed the page 107px wider than a 320px screen (R-5). The
   plugin lays the line out as a table cell, so only `anywhere` (not
   break-word) lets the cell shrink. */
.fluentform .ff_t_c { overflow-wrap: anywhere; }

.sh-section { margin-block: 0; padding-block: 112px; }
.sh-section-heading { margin-bottom: 56px; max-width: 44em; }
.sh-eyebrow { color: var(--sh-primary); font-size: .75rem; font-weight: 700; letter-spacing: .18em; line-height: 1.8; }
.sh-section-heading .sh-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sh-section-heading .sh-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--sh-orange); flex: none; }
.sh-section-intro { color: var(--sh-muted); margin-top: 24px; font-size: 1rem; line-height: 1.7; }
.sh-caption { color: var(--sh-ink); font-size: .8rem; line-height: 1.8; }

/* Sale badges. Every product carries a sale price with no end date, so a
   セール label would announce a limited-time discount that is not one. Hidden
   wherever WooCommerce draws it: the badge block, its wrapper, the classic
   .onsale, the legacy product grid used below the cart, and the cart and
   checkout lines' "¥112,300の値引き" (which, kept on one line, also pushed
   the cart 69px wider than a 375px screen). The legacy grid's own badge
   rule uses two classes, so that selector also keeps the grid ancestor. */
body :is(.wc-block-components-product-sale-badge, .wp-block-woocommerce-product-sale-badge, .onsale, .wc-block-components-sale-badge),
body .wc-block-grid .wc-block-grid__product-onsale { display: none; }

/* Text links and buttons carry a small arrow. An external-link plugin adds a
   second glyph after it; inside these components the arrow already says the
   same thing. */
.sh-text-link a { color: inherit; display: inline-flex; align-items: center; gap: 14px; font-size: .875rem; font-weight: 600; }
.sh-text-link a:hover { color: var(--sh-primary); }
.sh-text-link span:not(.wpel-icon) { font-size: 1.05em; transition: transform .18s ease; }
.sh-text-link a:hover span:not(.wpel-icon) { transform: translateX(3px); }
:is(.sh-home, .sh-page, .sh-header, .sh-footer) :is(.sh-text-link, .sh-button) .wpel-icon { display: none; }
/* The arrow is drawn, not typed. ↗ (U+2197) also exists as an emoji, and iOS
   (Safari and Chrome alike, both WebKit) draws it as Apple's blue emoji tile
   wherever the text font has no glyph of its own (seen on the live site,
   2026-10). So ↗ is never left to a font. Where the markup carries it, in an
   aria-hidden span after the label, the glyph is set to font-size 0 and the
   arrow is drawn in its place as a mask in the text colour, as the bottom bar
   draws its icons. Those spans hold ↗ unless the link is in-page, when they
   hold ↓; ↓ and → have no emoji form and stay text. The product cards' link
   and the concept's buttons carry no glyph and get the arrow after them. */
:root { --sh-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13 13 3'/%3E%3Cpath d='M5 3h8v8'/%3E%3C/svg%3E"); }
:is(.sh-text-link a:not([href^="#"]), .sh-button .wp-block-button__link, .shc-text-link) > span[aria-hidden="true"] { display: inline-block; font-size: 0; line-height: 0; vertical-align: middle; }
.sh-concept .shc-path > span:last-child { font-size: 0; }
:is(.sh-text-link a:not([href^="#"]), .sh-button .wp-block-button__link, .shc-text-link) > span[aria-hidden="true"]::before,
.sh-concept .shc-path > span:last-child::before,
.sh-concept .shc-button::after,
.sh-product-link::after { content: ""; display: inline-block; flex: none; width: .75rem; height: .75rem; background-color: currentColor; -webkit-mask: var(--sh-arrow-ne) center / contain no-repeat; mask: var(--sh-arrow-ne) center / contain no-repeat; }
.sh-product-link::after { margin-inline-start: .45em; vertical-align: -.05em; }

/* The CTA carries the red of the original site's purchase buttons and of the
   logo. It is scalesuite-warm, a semantic slug the parent already measures
   (white on it, 7.75:1) — the brand orange stays on rules, bands and panels
   and is never given a UI role of its own (CHILD-THEME §4). */
.sh-button .wp-block-button__link { display: inline-flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 54px; padding: 15px 26px; border: 1px solid var(--sh-cta); border-radius: var(--sh-radius-sm); background: var(--sh-cta); color: var(--sh-cta-ink); font-size: .9rem; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
.sh-button .wp-block-button__link:hover { background: #8a2b1a; border-color: #8a2b1a; }
.sh-button-outline .wp-block-button__link { color: var(--sh-ink); background: transparent; border-color: var(--sh-line); }
.sh-button-outline .wp-block-button__link:hover { background: var(--sh-surface); border-color: var(--sh-charcoal); }
:is(.sh-home, .sh-page) .wp-block-buttons { gap: 12px; }

/* Home header. Navigation uses the WordPress mobile overlay. */
.sh-header { background: var(--sh-paper); border-top: 4px solid var(--sh-orange); }
.sh-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 22px; }
.sh-logo { width: 176px; }
.sh-header-tagline { margin-top: 6px; font-size: .75rem; color: var(--sh-ink); letter-spacing: .04em; line-height: 1.6; }
.sh-header-actions { display: flex; align-items: center; gap: 36px; }
.sh-header .sh-nav { font-size: .8rem; font-weight: 600; }
.sh-header .wp-block-navigation__container { gap: 28px; }
.sh-header .sh-button .wp-block-button__link { min-height: 46px; padding: 12px 20px; gap: 20px; font-size: .8rem; }
/* The parent centres each menu label in its 44px target with inline-flex,
   but core's `.wp-block-navigation .wp-block-navigation-item__content
   { display: block }` outranks it, so the labels sat at the top of the box,
   about 10px above the quote button's label. */
.sh-header .wp-block-navigation .wp-block-navigation-item__content { display: inline-flex; align-items: center; }
/* The menu toggle on phones. Core's icon is two 1.5px bars with no word, easy
   to miss. The header asks for the three-bar icon, the bars are thickened
   with a stroke (still SVG, so forced colours keep them) and the word メニュー
   sits under them. 599px is core's own breakpoint for showing the toggle. */
.sh-header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) svg path { stroke: currentColor; stroke-width: .75px; }
@media (max-width: 599px) {
 .sh-header .wp-block-navigation__responsive-container-open { flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-inline-size: 44px; min-block-size: 44px; }
 .sh-header .wp-block-navigation__responsive-container-open::after { content: "メニュー"; font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
}

/* Hero. The original site's first view is a full-bleed cooktop photo with two
   message panels laid over it, a two-tab search band above it and one red pill
   below. That composition is kept. The panels are the shop's own artwork, so
   they stay images; their message is carried in alt text and the page keeps a
   real <h1> in the band underneath. */
.sh-hero { margin-block: 0; }
.sh-hero-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.sh-hero-tab { margin: 0; }
.sh-hero-tab a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; padding: 12px 16px; color: var(--sh-paper); font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: filter .18s ease; }
.sh-hero-tab a::before { content: ""; width: 18px; height: 18px; flex: none; background: center / contain no-repeat; }
.sh-hero-tab a:hover { filter: brightness(1.35); }
/* The original tiled two stripe textures; the same 45° hatch as a gradient needs
   no asset and stays sharp at any density. The two glyphs are the originals. */
.sh-hero-tab-stove a { background: repeating-linear-gradient(45deg, #000 0 6px, #151515 6px 12px); }
.sh-hero-tab-water a { background: repeating-linear-gradient(45deg, #6f6f6f 0 6px, #7c7c7c 6px 12px); }
.sh-hero-tab-stove a::before { background-image: url("assets/images/tab_stove.png"); }
.sh-hero-tab-water a::before { background-image: url("assets/images/tab_water.png"); }

.sh-hero-stage { position: relative; background: #2b2b2b url("assets/images/hero_bg.jpg") center / cover no-repeat; padding-block: 40px 68px; }
/* The original cut the bottom of the first view with a row of soft scallops. */
.sh-hero-stage::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 16px;
 background: radial-gradient(circle at 24px 24px, var(--sh-tint) 24px, #0000 24.5px) repeat-x left bottom / 48px 16px,
  linear-gradient(var(--sh-tint) 0 0) no-repeat left bottom / 100% 5px; }
.sh-hero-cards { display: grid; grid-template-columns: 47fr 53fr; gap: 24px; align-items: end; }
.sh-hero-card { margin: 0; }
.sh-hero-card img { width: 100%; filter: drop-shadow(0 6px 22px #0000002e); }
.sh-hero-card-survey a { display: block; border-radius: 6px; transition: transform .2s ease; }
.sh-hero-card-survey a:hover { transform: translateY(-3px); }

/* Lede band: the page's h1 and the red pill, in the place the original put its
   single 新品購入 button. */
.sh-lede { margin-block: 0; background: var(--sh-tint); padding-block: 40px; }
.sh-lede-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.sh-lede-copy { flex: 1 1 26em; }
.sh-lede .sh-hero-title, .sh-lede .sh-store-status h1 { margin-block: 12px 10px; font-size: 2.4rem; line-height: 1.4; letter-spacing: .005em; }
.sh-lede .wp-block-buttons { flex-wrap: nowrap; }
.sh-button-lg .wp-block-button__link { min-height: 62px; padding: 17px 30px; font-size: .95rem; border-radius: 999px; gap: 26px; }

.sh-lede .sh-caption { max-width: 34em; text-wrap: pretty; word-break: auto-phrase; }
.sh-lede-links { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #1c1a1720; }
.sh-lede-links .sh-text-link a { font-size: .78rem; font-weight: 600; gap: 10px; text-decoration: none; }
.sh-lede-links small { color: var(--sh-ink); font-size: .75rem; font-weight: 400; white-space: nowrap; }

/* Expertise: readable copy, real photography and one measured claim. */
.sh-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sh-feature-row + .sh-feature-row { margin-top: 96px; }
.sh-expertise .sh-section-heading h2 { font-size: 3.4375rem; line-height: 1.3; }
.sh-feature-copy > h3 { margin-block: 16px 22px; font-size: 2.25rem; line-height: 1.3; }
.sh-feature-copy > p:not(.sh-eyebrow, .sh-text-link) { color: var(--sh-muted); font-size: 1rem; line-height: 1.7; }
/* Keep the original 1214 x 514 photographs uncropped. The former 1.32 crop
   made these illustrations roughly 55% taller than on the live site. */
.sh-feature-image img { width: 100%; aspect-ratio: 1214 / 514; object-fit: cover; border-radius: var(--sh-radius); }
.sh-stat { border-top: 1px solid var(--sh-line); padding-top: 26px; margin-top: 30px; }
.sh-stat-label { font-size: .8rem; color: var(--sh-ink); letter-spacing: .02em; }
.sh-stat-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; line-height: 1.2; margin-block: 8px 10px; }
.sh-stat-value strong { font-size: 4.25rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sh-stat-value span { font-size: 1.05rem; }
.sh-note { margin-block: 26px; padding: 22px 26px; background: var(--sh-surface); border-left: 3px solid var(--sh-orange); border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0; }
.sh-note-title { font-size: .85rem; font-weight: 700; margin-bottom: 10px; }
.sh-note p + p { margin-top: 8px; }
.sh-note > p:not(.sh-note-title) { font-size: .82rem; color: var(--sh-ink); line-height: 1.85; }
:is(.sh-home, .sh-page) :where([id]) { scroll-margin-top: 24px; }

/* Native WooCommerce carousel: products and prices stay in WooCommerce.
   Keep the native scroll area, actions and Interactivity API in control. */
.sh-catalog { background: var(--sh-surface); }
.sh-products + .sh-products { margin-top: 64px; }
.sh-category-heading { margin-bottom: 24px; gap: 20px; align-items: center; }
.sh-category-title { padding-left: 14px; border-left: 4px solid var(--sh-orange); }
.sh-category-title .sh-eyebrow { font-size: .75rem; margin-bottom: 5px; }
.sh-category-title h3 { font-size: 1.5rem; line-height: 1.5; }
.sh-category-actions { gap: 22px; align-items: center; }
.sh-category-actions .sh-text-link a { gap: 10px; }
.sh-products .wc-block-product-template { gap: 20px; margin: 0; padding: 4px 4px 20px; scroll-padding-inline: 4px; align-items: stretch; }
.sh-products .wc-block-product { flex: 0 0 calc((100% - 60px) / 3.5); min-width: 0; max-width: none; margin: 0; background: var(--sh-paper); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sh-products .wc-block-product:hover { border-color: #c9c2bb; box-shadow: 0 10px 28px #1c1a170f; transform: translateY(-2px); }

/* Every product photo is the shop's own 4:5 catalogue card — maker logo, model
   number, feature badges and the すみか本舗 mark are drawn into the image. It is
   shown whole, edge to edge, and never cropped. The 4:5 ratio and object-fit
   live on the block (aspectRatio / scale), because WooCommerce writes both
   inline and an inline style wins over this file. */
.sh-products .sh-product-image { margin: 0; padding: 0; background: var(--sh-paper); border-bottom: 1px solid var(--sh-line); }
.sh-products .sh-product-image img { width: 100%; }
.sh-product-info { flex: 1; display: flex; flex-direction: column; padding: 20px; gap: 10px; }
.sh-product-info > * { margin: 0; }
.sh-product-brand { color: var(--sh-ink); font-size: .75rem; line-height: 1.7; letter-spacing: .02em; min-height: 1.7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-product-brand a { color: inherit; text-decoration: none; }
.sh-product-title { font-size: .97rem; line-height: 1.6; letter-spacing: .01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sh-product-title a { color: var(--sh-ink); text-decoration: none; }
.sh-product-title a:hover { text-decoration: underline; }
/* The short description is a spec list (width, hood link, top plate, front
   panel), typed three ways in the product data: <ul><li>, <br> lines and bare
   line breaks, which WooCommerce turns into <br>. It is shown whole, one spec
   to a line, rather than cut at 22 characters mid-word. */
.sh-products .sh-product-summary { font-size: .75rem; color: var(--sh-ink); line-height: 1.7; }
.sh-products .sh-product-summary :is(p, ul) { margin: 0; padding: 0; }
.sh-products .sh-product-summary ul { list-style: none; }
.sh-products .sh-product-summary li { margin: 0; }
.sh-products .sh-product-price { margin-top: auto; padding-top: 10px; font-size: 1.4rem; color: var(--sh-price); font-weight: 700; letter-spacing: -.015em; line-height: 1.6; font-variant-numeric: tabular-nums; }
.sh-product-price del { display: block; font-size: .75rem; font-weight: 400; color: var(--sh-ink); letter-spacing: 0; }
.sh-product-price ins { text-decoration: none; }
.sh-product-price .woocommerce-price-suffix { color: var(--sh-ink); font-size: .75rem; font-weight: 400; letter-spacing: 0; }
/* A struck price beside a lower one is a double price (二重価格表示), and it
   has to say what each figure is. The struck one is the manufacturer's
   suggested retail price and the large one this shop's price, both with tax.
   What the shop's price covers differs by carousel, so Home gives each product
   collection one class: sh-price-install (基本工事費込み), sh-price-shipping
   (送料込み) or sh-price-body (本体のみ). The words are generated: WooCommerce
   prints the prices as bare <del>/<ins>, and a child theme cannot filter PHP.
   The label on the struck price is kept out of its line-through. */
.sh-product-price del::before { content: "メーカー希望小売価格"; margin-inline-end: .4em; }
.sh-product-price del::after { content: "（税込）"; }
.sh-product-price del::before, .sh-product-price del::after { display: inline-block; text-decoration: none; }
.sh-product-price ins::before, .sh-product-price .wc-block-components-product-price:not(:has(ins))::before { content: "当店販売価格"; }
.sh-product-price ins::before, .sh-product-price .wc-block-components-product-price::before, .sh-product-price .wc-block-components-product-price::after { display: block; color: var(--sh-ink); font-size: .75rem; font-weight: 600; letter-spacing: 0; line-height: 1.6; }
.sh-price-install .sh-product-price .wc-block-components-product-price::after { content: "基本工事費込み"; }
.sh-price-shipping .sh-product-price .wc-block-components-product-price::after { content: "送料込み"; }
.sh-price-body .sh-product-price .wc-block-components-product-price::after { content: "本体のみ"; }
/* Legacy product grids (including the empty cart's suggestions) do not use
   sh-product-price. Their bare del/ins need the same price labels. Keep the
   grid ancestor so modern product-price blocks do not receive them twice. */
.wc-block-grid .wc-block-grid__product-price del { display: block; font-size: .75rem; color: var(--wp--preset--color--scalesuite-ink); }
.wc-block-grid .wc-block-grid__product-price del::before { content: "メーカー希望小売価格"; margin-inline-end: .4em; }
.wc-block-grid .wc-block-grid__product-price del::after { content: "（税込）"; }
.wc-block-grid .wc-block-grid__product-price del::before,
.wc-block-grid .wc-block-grid__product-price del::after { display: inline-block; text-decoration: none; }
.wc-block-grid .wc-block-grid__product-price ins { display: block; text-decoration: none; }
.wc-block-grid .wc-block-grid__product-price ins::before,
.wc-block-grid .wc-block-grid__product-price:not(:has(ins))::before { content: "当店販売価格"; display: block; font-size: .75rem; font-weight: 600; color: var(--wp--preset--color--scalesuite-ink); line-height: 1.6; }
.sh-products .sh-product-link { display: block; padding-top: 14px; border-top: 1px solid var(--sh-line); color: var(--sh-ink); font-weight: 600; font-size: .78rem; }
.sh-products .wc-block-next-previous-buttons { gap: 8px; }
.sh-products .wc-block-next-previous-buttons__button { width: 42px; height: 42px; border: 1px solid var(--sh-line); border-radius: 50%; background: var(--sh-paper); color: var(--sh-charcoal); transition: background-color .18s ease, border-color .18s ease; }
.sh-products .wc-block-next-previous-buttons__button:hover { background: var(--sh-charcoal); border-color: var(--sh-charcoal); color: var(--sh-paper); }
.sh-products .wc-block-next-previous-buttons__button[aria-disabled="true"] { opacity: .35; }

/* Home, rebuilt in 0.9.0 from the landing page first made as one Custom HTML
   block on the live demo (/home-2/): a hero with two starting prices, four
   facts on an orange band, the LINE video survey in four steps, category tiles
   into the store, every product in a carousel per category (the rules above),
   a closing call to LINE, the purchase flow and the area. Its own classes are
   sh-lp-*; the two parts it shares are the product carousels and, for the
   purchase flow, the illustrated step cards (sh-steps, also on /quotation/).
   Brand orange stays on bands, rules and pill surfaces under ink; the two
   places the landing page set text in orange on dark (the hero's 基本工事費込み
   and the tile prices) take scalesuite-dark-warm instead (CHILD-THEME §4).
   The parent's check allows no vw units, so the page's clamp(…vw…) sizes
   became steps at this file's 1000px and 700px. Every rule starts at .sh-lp
   so it outranks core's flow margins and the shell reset just below. */
.sh-lp { --sh-dark-warm: var(--wp--preset--color--scalesuite-dark-warm); --sh-green-deep: #0f5f2d; }
.sh-lp .sh-shell > * { margin-block-start: 0; }
.sh-lp .sh-lp-sec { margin-block: 0; padding-block: 104px; }
.sh-lp .sh-lp-eyebrow { width: fit-content; padding: 4px 14px; border-radius: 999px; background: var(--sh-orange); color: var(--sh-ink); font-size: .875rem; font-weight: 800; letter-spacing: .06em; line-height: 1.6; }
.sh-lp .sh-lp-h2 { margin-top: 14px; font-size: 2.75rem; font-weight: 900; line-height: 1.3; letter-spacing: .01em; word-break: auto-phrase; }
.sh-lp .sh-lp-lede { margin-top: 14px; font-size: 1.0625rem; font-weight: 600; line-height: 1.8; word-break: auto-phrase; }
.sh-lp-mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--sh-orange) 55%, transparent) 58%); }

.sh-lp .sh-lp-btns { gap: 12px; margin-top: 28px; }
.sh-lp-btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 64px; padding: 14px 28px; border: 2px solid transparent; border-radius: 12px; font-size: 1.1875rem; font-weight: 900; line-height: 1.3; text-align: center; text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.sh-lp-btn .wp-block-button__link:hover { transform: translateY(-2px); }
/* The pressed-key edge under the LINE button is a border, not a box-shadow:
   the parent draws the inner ring of its focus outline with box-shadow, and a
   shadow set here would win over it. */
.sh-lp-btn-line .wp-block-button__link { padding-bottom: 10px; border-bottom-width: 6px; border-bottom-color: var(--sh-green-deep); background: var(--sh-green); color: var(--sh-green-ink); }
.sh-lp-btn-line .wp-block-button__link:hover { background: var(--sh-green-deep); }
.sh-lp-btn-white .wp-block-button__link { border-color: var(--sh-ink); background: var(--sh-paper); color: var(--sh-ink); }
.sh-lp-btn-white .wp-block-button__link:hover { background: var(--sh-surface); }
.sh-lp :is(.sh-lp-hero, .sh-lp-cta) .sh-lp-btn-white .wp-block-button__link { border-color: var(--sh-paper); }
.sh-lp .sh-lp-tel { margin-top: 18px; font-size: 1rem; font-weight: 700; line-height: 1.6; }
/* The number has no break point of its own (a hyphen before a digit is not
   one), so it may break anywhere, and only when it cannot fit a line: at 200%
   text on a 320px screen. */
.sh-lp-tel a { color: inherit; font-size: 1.75rem; font-weight: 900; letter-spacing: .02em; text-decoration: none; overflow-wrap: anywhere; }
.sh-lp-tel-hours { display: block; font-size: .875rem; }

.sh-lp-hero { position: relative; margin-block: 0; background: var(--sh-ink) url("assets/images/hero_bg.jpg") center / cover no-repeat; color: var(--sh-paper); }
.sh-lp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #141210f0 0%, #141210db 48%, #1412108c 100%); }
.sh-lp .sh-lp-hero-inner { position: relative; padding-block: 96px; }
.sh-lp .sh-lp-title { margin-top: 18px; font-size: 4.25rem; font-weight: 900; line-height: 1.22; letter-spacing: .01em; word-break: auto-phrase; }
.sh-lp-title em { font-style: normal; color: var(--sh-dark-warm); }
.sh-lp .sh-lp-hero-sub { margin-top: 18px; max-width: 40em; font-size: 1.1875rem; font-weight: 700; line-height: 1.8; word-break: auto-phrase; }
.sh-lp .sh-lp-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 28px 0 0; padding: 0; list-style: none; }
.sh-lp-prices > li { margin: 0; padding: 16px 20px; border-top: 6px solid var(--sh-orange); border-radius: 14px; background: var(--sh-paper); color: var(--sh-ink); }
.sh-lp-price-cat { display: block; font-size: 1rem; font-weight: 800; }
.sh-lp-price-num { display: block; color: var(--sh-price); font-size: 2.875rem; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sh-lp-price-num small { color: var(--sh-ink); font-size: .45em; letter-spacing: 0; }
.sh-lp-price-note { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 6px; background: var(--sh-ink); color: var(--sh-paper); font-size: .875rem; font-weight: 800; }

.sh-lp-trust { margin-block: 0; background: var(--sh-orange); color: var(--sh-ink); }
.sh-lp .sh-lp-trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding: 0; list-style: none; }
.sh-lp-trust-list > li { margin: 0; padding: 22px 12px; border-left: 2px solid #1c1a172e; font-size: .9375rem; font-weight: 800; line-height: 1.4; text-align: center; }
.sh-lp-trust-list > li:first-child { border-left: 0; }
.sh-lp-trust-list strong { display: block; font-size: 1.875rem; font-weight: 900; }

.sh-lp-survey, .sh-lp-products { background: var(--sh-tint); }
.sh-lp .sh-lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.sh-lp .sh-lp-step { padding: 26px 22px 24px; border: 2px solid var(--sh-ink); border-radius: 16px; background: var(--sh-paper); }
.sh-lp .sh-lp-step-num { width: fit-content; padding: 2px 10px; border-radius: 6px; background: var(--sh-green); color: var(--sh-green-ink); font-size: .875rem; font-weight: 900; letter-spacing: .06em; line-height: 1.6; }
.sh-lp .sh-lp-step h3 { margin-top: 12px; font-size: 1.25rem; font-weight: 900; line-height: 1.4; }
.sh-lp .sh-lp-step > p:not(.sh-lp-step-num) { margin-top: 8px; font-size: .9375rem; line-height: 1.8; }

/* Category tiles go to the store's category pages. A tile is at least 10rem
   wide, so the row falls to fewer columns as the text grows rather than at a
   fixed width: five across on a desktop, two on most phones, one at 320px. */
.sh-lp .sh-lp-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.sh-lp-cats > li { display: flex; margin: 0; }
.sh-lp-cat { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 22px 18px; border-radius: 16px; background: var(--sh-charcoal); color: var(--sh-paper); text-decoration: none; transition: transform .15s ease; }
.sh-lp-cat:hover { transform: translateY(-3px); }
.sh-lp-cat-name { font-size: 1.125rem; font-weight: 900; line-height: 1.35; }
.sh-lp-cat-price { color: var(--sh-dark-warm); font-size: 1.875rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-lp-cat-price small { display: block; margin-top: 4px; color: var(--sh-paper); font-size: .875rem; font-weight: 700; }
.sh-lp-cat-note { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--sh-paper); color: var(--sh-ink); font-size: .875rem; font-weight: 800; }
.sh-lp-cat-go { margin-top: auto; padding-top: 10px; font-size: .9375rem; font-weight: 800; text-decoration: underline; text-underline-offset: .25em; }
/* The external-link plugin's icon would take a row of its own at the foot of
   the tile; the buttons keep theirs, as there it marks the new tab. The
   plugin's own rule is two classes and loads after this file. */
.sh-lp .sh-lp-cat .wpel-icon { display: none; }

/* Every product, one carousel per category. The note on display and reused
   stock is the former Home's, kept until those products are listed. */
.sh-lp .sh-lp-products .sh-products { margin-top: 56px; }
.sh-lp .sh-lp-products .sh-lp-h2 + .sh-products { margin-top: 36px; }
.sh-lp .sh-lp-products .sh-note { margin-block: 56px 0; background: var(--sh-paper); }
.sh-lp-products .sh-note .sh-note-title { font-size: 1.0625rem; }
.sh-lp-products .sh-note > p:not(.sh-note-title) { font-size: .9375rem; }

.sh-lp-cta { background: linear-gradient(120deg, var(--sh-cta) 0%, #c2410c 100%); color: var(--sh-paper); text-align: center; }
.sh-lp .sh-lp-cta .sh-lp-h2 { margin-top: 0; }
.sh-lp .sh-lp-cta .sh-lp-btns { justify-content: center; }

/* The purchase flow keeps the former Home's illustrated step cards (sh-steps,
   shared with /quotation/): four across on a desktop, a swipe row below. */
.sh-lp .sh-lp-h2 + .sh-steps { margin-top: 36px; }

.sh-lp-area { background: var(--sh-charcoal); color: var(--sh-paper); }
.sh-lp .sh-lp-area-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.sh-lp .sh-lp-area .sh-lp-h2 { margin-top: 0; }
.sh-lp .sh-lp-area-pref { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.sh-lp-area-pref > li { margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--sh-orange); color: var(--sh-ink); font-size: 1.25rem; font-weight: 900; line-height: 1.5; }
.sh-lp .sh-lp-area-link { margin-top: 14px; font-size: 1.0625rem; font-weight: 800; }
.sh-lp-area-link a { color: inherit; text-underline-offset: .25em; }
.sh-lp .sh-lp-area .sh-lp-btns { margin-top: 0; }

/* Home proposal (/home-impact/, 2026-10): the same parts as Home, ordered to
   sell. The hero sets the offer beside three live prices, then the two ways to
   ask and three facts; a router sends each visitor by situation; every price
   follows with what it covers; four facts the site already states, with the
   shop's own installation photograph; the estimate in three steps; the
   illustrated flow; the questions that stop a booking; a closing call.
   Classes are sh-im-*. Everything else is the sh-lp rules above. */
.sh-lp .sh-im-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "copy deals" "cta deals" "badges deals"; align-items: start; gap: 0 56px; padding-block: 80px; }
.sh-im-hero-copy { grid-area: copy; }
.sh-im-deals { grid-area: deals; align-self: center; }
.sh-im-hero-cta { grid-area: cta; }
.sh-im-badges { grid-area: badges; }
.sh-lp .sh-im-title { font-size: 3.5rem; }

/* Three products' own price blocks, so the figures follow WooCommerce. The
   labels (メーカー希望小売価格, 当店販売価格, 基本工事費込み) are the carousel
   cards' rules, through sh-price-install on each query. */
.sh-im-deals { padding: 22px 24px 16px; border-radius: 16px; background: var(--sh-paper); color: var(--sh-ink); box-shadow: 0 18px 44px #0000004d; }
.sh-lp .sh-im-deals-title { padding-bottom: 12px; border-bottom: 2px solid var(--sh-ink); font-size: 1rem; font-weight: 900; line-height: 1.5; }
.sh-lp .sh-im-deal { padding-block: 14px; border-bottom: 1px solid var(--sh-line); }
.sh-lp .sh-im-deal-cat { font-size: 1.0625rem; font-weight: 900; line-height: 1.4; }
.sh-im-deal .wc-block-product-template { display: block; margin: 0; padding: 0; }
.sh-im-deal .wc-block-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; width: auto; max-width: none; margin: 0; padding: 0; border: 0; }
.sh-lp .sh-im-deal .sh-im-deal-model { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.sh-im-deal-model a { color: var(--sh-ink); }
.sh-lp .sh-im-deal .sh-product-price { margin: 0; color: var(--sh-price); font-size: 2.125rem; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; text-align: right; font-variant-numeric: tabular-nums; }
.sh-lp .sh-im-deals-more { padding-top: 14px; font-size: .9375rem; font-weight: 800; text-align: right; }
.sh-im-deals-more a { color: var(--sh-ink); text-underline-offset: .25em; }

.sh-lp .sh-im-hero-cta .sh-lp-btns { margin-top: 28px; }
.sh-lp .sh-im-hours { margin-top: 10px; font-size: .875rem; font-weight: 700; }
.sh-lp .sh-im-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.sh-im-badges > li { margin: 0; padding: 10px 14px; border: 1px solid #ffffff66; border-radius: 10px; font-size: .875rem; font-weight: 700; line-height: 1.4; }
.sh-im-badges strong { display: block; color: var(--sh-dark-warm); font-size: 1.25rem; font-weight: 900; }

/* Situation router. The first case (no hot water) is the urgent one and the
   phone is the fastest way in, so that card carries the CTA red. Cards are at
   least 13rem wide, so the row reflows with the text size. */
.sh-lp .sh-im-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.sh-im-routes > li { display: flex; margin: 0; }
.sh-im-route { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 22px 20px 18px; border: 2px solid var(--sh-ink); border-radius: 16px; background: var(--sh-paper); color: var(--sh-ink); text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.sh-im-route:hover { background: var(--sh-tint); transform: translateY(-2px); }
.sh-im-route-case { font-size: 1.1875rem; font-weight: 900; line-height: 1.45; }
.sh-im-route-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 2px solid var(--sh-line); font-size: .9375rem; font-weight: 800; }
.sh-im-routes > li:first-child .sh-im-route { border-color: var(--sh-cta); background: var(--sh-cta); color: var(--sh-cta-ink); }
.sh-im-routes > li:first-child .sh-im-route:hover { background: #8a2b1a; }
.sh-im-routes > li:first-child .sh-im-route-go { border-top-color: #ffffff59; }
.sh-lp .sh-im-route .wpel-icon { display: none; }

.sh-lp .sh-lp-products .sh-lp-lede { max-width: 46em; }
.sh-lp .sh-im-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.sh-im-chips > li { margin: 0; }
.sh-im-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--sh-ink); border-radius: 999px; background: var(--sh-paper); color: var(--sh-ink); font-size: .9375rem; font-weight: 800; text-decoration: none; }
.sh-im-chips a:hover { background: var(--sh-ink); color: var(--sh-paper); }
.sh-lp .sh-lp-products .sh-im-chips + .sh-products { margin-top: 40px; }

.sh-lp .sh-im-photo { margin-top: 36px; }
.sh-im-photo img { width: 100%; aspect-ratio: 1214 / 514; object-fit: cover; border-radius: 16px; }
.sh-lp .sh-im-reason-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 16px; margin-top: 24px; }
.sh-lp .sh-im-reason { padding: 24px 22px; border-top: 6px solid var(--sh-orange); border-radius: 16px; background: var(--sh-tint); }
.sh-lp .sh-im-reason-num { color: var(--sh-price); font-size: 1rem; font-weight: 900; line-height: 1.2; }
.sh-im-reason-num strong { font-size: 2.5rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sh-lp .sh-im-reason h3 { margin-top: 12px; font-size: 1.25rem; font-weight: 900; line-height: 1.45; }
.sh-lp .sh-im-reason > p:not(.sh-im-reason-num) { margin-top: 8px; font-size: .9375rem; line-height: 1.8; }
.sh-lp .sh-im-reasons .sh-text-link { margin-top: 24px; }

.sh-lp .sh-lp-steps.sh-im-steps3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.sh-lp .sh-im-note { margin-top: 20px; font-size: .875rem; font-weight: 600; }

/* Questions as core Details blocks: native disclosure, keyboard and screen
   reader behaviour come with the element. */
.sh-im-faq { background: var(--sh-surface); }
.sh-lp .sh-im-faq-list { max-width: 880px; margin-top: 32px; border-top: 2px solid var(--sh-ink); }
.sh-im-qa { border-bottom: 1px solid var(--sh-line); }
.sh-im-qa > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 44px; padding: 20px 4px; font-size: 1.125rem; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
.sh-im-qa > summary::-webkit-details-marker { display: none; }
.sh-im-qa > summary::before { content: "Q"; color: var(--sh-price); font-weight: 900; }
.sh-im-qa > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.sh-im-qa[open] > summary::after { content: "\2212"; }
.sh-lp .sh-im-qa > :not(summary) { margin: 0 0 22px; padding-inline: 2.1em 4px; font-size: 1rem; line-height: 1.9; }
.sh-im-qa a { color: inherit; font-weight: 700; }

/* Product selection guide. */
.sh-two-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.sh-guide-card { border: 1px solid var(--sh-line); border-radius: var(--sh-radius); overflow: hidden; display: flex; flex-direction: column; }
.sh-guide-image img { width: 100%; height: auto; aspect-ratio: 530 / 370; object-fit: cover; }
.sh-guide-copy { padding: 34px; display: flex; flex-direction: column; flex: 1; }
.sh-guide-copy h3 { margin-block: 10px 18px; font-size: 1.5rem; }
.sh-guide-copy > p:not(.sh-eyebrow, .sh-guide-note, .sh-text-link) { color: var(--sh-muted); font-size: 1rem; line-height: 1.7; }
.sh-guide-note { margin-block: 24px; padding: 12px 16px; background: var(--sh-tint); color: var(--sh-ink); font-size: .8rem; border-radius: var(--sh-radius-sm); }
.sh-guide-copy > .sh-text-link { margin-top: auto; }

/* Service panel keeps the original charcoal and orange pairing. */
.sh-service { background: var(--sh-charcoal); color: var(--sh-paper); border-top: 5px solid var(--sh-orange); }
.sh-service-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 56px; align-items: start; }
.sh-service-intro { max-width: 48em; }
.sh-service-intro > .sh-eyebrow { color: var(--sh-paper); }
.sh-service-intro h2 { margin-block: 22px 26px; font-size: 2rem; line-height: 1.3; }
.sh-service-intro > p:last-child { font-size: 1rem; line-height: 1.7; opacity: .82; }
.sh-service-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.sh-service-item { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.sh-service-item + .sh-service-item { margin-top: 0; padding-top: 0; border-top: 0; }
.sh-service-icon img { width: 100%; aspect-ratio: 530 / 370; object-fit: cover; border-radius: var(--sh-radius-sm); }
.sh-service-copy { padding-top: 26px; }
.sh-service-copy h3 { font-size: 1.5rem; line-height: 1.5; }
.sh-service-copy > p { font-size: 1rem; line-height: 1.7; margin-top: 14px; opacity: .82; }
.sh-service-copy > .sh-text-link { margin-top: 20px; }
.sh-service-copy .sh-text-link a { font-size: .95rem; }
/* Hover on the dark panel uses the semantic warm-for-dark slug, not the brand
   orange: a text colour is a UI role, and brand colours carry none (§4 / §9-6). */
.sh-service .sh-text-link a:hover { color: var(--wp--preset--color--scalesuite-dark-warm); }

/* Four-step card carousel. Four cards fit on desktop; narrower viewports leave
   the next card visible so the horizontal swipe affordance is self-evident. */
.sh-steps { display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 4px; padding: 4px 4px 20px; scrollbar-width: thin; scrollbar-color: var(--sh-line) transparent; }
.sh-step { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; padding: 26px 24px 28px; border: 1px solid var(--sh-line); border-top: 4px solid var(--sh-orange); border-radius: var(--sh-radius); background: var(--sh-paper); scroll-snap-align: start; }
.sh-step-number { color: var(--sh-primary); font-size: 1.875rem; line-height: 1; letter-spacing: .04em; font-weight: 800; }
.sh-step-image { width: min(100%,210px); margin-block: 22px; }
.sh-step-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sh-step h3 { font-size: 1.3125rem; line-height: 1.6; margin-bottom: 14px; }
.sh-step > p:not(.sh-step-number) { color: var(--sh-muted); font-size: 1rem; line-height: 1.7; }
.sh-step .sh-text-link { margin-top: 16px; }
.sh-step .sh-text-link a { font-size: .78rem; }
.sh-closing { margin-top: 88px; padding: 40px 44px; background: var(--sh-tint); border-radius: var(--sh-radius); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
/* Two classes, so the phone size for section h2s below does not reach a
   closing heading set as h2 (the company page). */
.sh-closing .sh-closing-copy > :is(h2, h3) { font-size: 1.25rem; line-height: 1.5; margin-bottom: 10px; }
.sh-closing p { font-size: .8rem; color: var(--sh-ink); }
.sh-closing .sh-button .wp-block-button__link { gap: 20px; }

/* Quotation page. The banner is the original site's mv_quota artwork with its
   text drawn in, so it is shown whole; the page's h1 sits in the lede below. */
.sh-page-banner { margin: 0; background: #c5dcea; }
.sh-page-banner img { width: 100%; max-width: 1920px; margin-inline: auto; aspect-ratio: 1920 / 800; }
/* Home's step cards put an illustration between number and title. These have
   none, so the title keeps its own distance from the number. */
.sh-step-number + h3 { margin-top: 18px; }

/* Call guide. The screenshots are the shop's own LINE screens, cropped to one
   540 x 1100 frame with the control to tap ringed inside the image, so the
   frame ratio lives here and the ring needs no positioning. */
.sh-howto { background: var(--sh-surface); }
.sh-howto-links { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-bottom: 48px; }
.sh-device + .sh-device { margin-top: 80px; }
.sh-device > h3 { margin-bottom: 28px; padding-left: 14px; border-left: 4px solid var(--sh-orange); font-size: 1.5rem; }
.sh-shots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
.sh-shot { display: flex; flex-direction: column; align-items: flex-start; }
.sh-shot-image { width: 100%; margin: 0 0 20px; }
.sh-shot-image img { width: 100%; aspect-ratio: 540 / 1100; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-paper); }
.sh-shot-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sh-primary); color: var(--sh-paper); font-size: .85rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sh-shot h4 { margin-block: 12px 8px; font-size: 1.05rem; line-height: 1.6; }
.sh-shot > p:not(.sh-shot-number) { color: var(--sh-ink); font-size: .9rem; line-height: 1.8; }
.sh-howto .sh-note { margin-block: 72px 0; }
.sh-howto .sh-closing { margin-top: 56px; }
.sh-closing p a { color: inherit; font-weight: 600; }

/* Company page (/company/): one table, a row per fact with the label as its
   row header, in reading width rather than the full shell. Core's table block
   draws a box around every cell; here rows are ruled only. On phones the label
   sits above its value. */
.sh-company-info { padding-block: 72px 112px; }
.sh-page .sh-company-table { max-width: 880px; margin: 0; }
.sh-page .sh-company-table table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--sh-line); }
.sh-page .sh-company-table :is(th, td) { padding: 20px 0; border: 0; border-bottom: 1px solid var(--sh-line); text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.8; word-break: auto-phrase; }
.sh-page .sh-company-table th { width: 10em; padding-right: 24px; font-weight: 700; background: none; }

/* Area page (/area/), rebuilt from the old site's HTML: the shop's own map of
   the three prefectures beside their names and the terms. The map is a tall
   1111 x 1467 drawing, so it is held to a column rather than the page width;
   on phones it comes first, narrower, above the terms. */
.sh-area-info { padding-block: 72px 112px; }
.sh-area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.sh-area-map { margin: 0; }
.sh-area-map img { width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.sh-page .sh-area-copy h2 { font-size: 1.75rem; line-height: 1.5; }
.sh-area-copy .sh-area-prefs { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.sh-area-prefs > li { margin: 0; padding: 6px 20px; border: 1px solid var(--sh-line); border-radius: 999px; background: var(--sh-tint); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.sh-area-copy .sh-note { margin-block: 28px 0; }
.sh-area-info .sh-closing { margin-top: 72px; }

/* News: the last section of Home, before the footer, as on the original Home.
   A query of the latest three posts in the default category (term 1, renamed
   お知らせ / news), so a later category such as works never shows up here.
   Heading on the left, dated rows on the right; one column on phones. With no
   post the whole section is left out rather than shown empty. */
.sh-news { border-top: 1px solid var(--sh-line); padding-block: 88px; }
.sh-news:not(:has(.wp-block-post)) { display: none; }
/* The link is the grid's last child so that on a phone it follows the list;
   wider, it sits under the heading in the first column. */
.sh-news-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); grid-template-rows: auto 1fr; gap: 20px 80px; align-items: start; }
.sh-news-grid > .wp-block-query { grid-column: 2; grid-row: 1 / span 2; margin-block: 0; }
.sh-news .sh-section-heading { margin-bottom: 0; }
.sh-news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sh-line); }
.sh-news-list > li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 24px; align-items: baseline; margin: 0; padding-block: 22px; border-bottom: 1px solid var(--sh-line); }
.sh-news-list .wp-block-post-date { color: var(--sh-ink); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sh-news-list .wp-block-post-title { font-size: 1rem; line-height: 1.7; font-weight: 600; letter-spacing: 0; }
.sh-news-list .wp-block-post-title a { color: inherit; }
.sh-news-list .wp-block-post-title a:hover { color: var(--sh-primary); }

.sh-footer { background: var(--sh-surface); border-top: 1px solid var(--sh-line); padding-block: 64px 26px; }
.sh-footer-grid { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 40px; }
.sh-footer-logo { width: 176px; margin-bottom: 20px; }
.sh-footer-brand > p { font-size: .75rem; color: var(--sh-ink); }
.sh-footer-links { display: grid; align-content: start; gap: 14px; }
.sh-footer .sh-text-link a { font-size: .78rem; font-weight: 500; gap: 10px; }
.sh-footer-address > p { font-size: .75rem; }
.sh-footer-address .sh-footer-phone { font-size: 1.7rem; font-weight: 600; margin-block: 10px; letter-spacing: .01em; }
.sh-footer-phone a { color: inherit; text-decoration: none; }
.sh-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 24px; margin-top: 44px; border-top: 1px solid var(--sh-line); font-size: .75rem; color: var(--sh-ink); }
.sh-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.sh-footer-legal .sh-text-link a { font-size: .75rem; font-weight: 400; gap: 8px; }

/* Bottom bar: ホーム, ショップ, カート, LINE (straight to the LINE official
   account) and フォーム (the contact form), each on one line. Until 2026-10 the
   shop was a GMO MakeShop store on ec.sumika-honpo.com that carried the same
   bar, which is why it is a bar at every width. The shop is now this site's
   WooCommerce, and the cart joined the bar so it can be reached from any page
   (the header has no cart).
   Fixing it to the viewport, its z-index band and the space reserved under the
   page belong to the parent's is-style-fixed-cta; this only dresses it.
   LINE's own green (#06c755) is 2.2:1 under white text, so the palette green
   (5.2:1) stands in for it. Icons are masks painted in the text colour, so
   they follow hover and forced colours; .svg files are not allowed in a child
   theme, hence data URIs.
   Labels sit at the .75rem floor: each one is set under its icon, as in a
   tab bar, and stays ink and bold. Five tabs on a 320px screen are 56px each,
   still above the 44px target, and the longest label (ショップ, フォーム) is
   four characters, 48px, so every label fits one line.
   The 8px at the sides sits on the block itself (inline style): the parent
   sets it with a 0-2-0 rule that a class here loses to, and leaves the
   block's own padding setting to win. */
.sh-cta-bar { border-top: 1px solid var(--sh-line); padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
.sh-cta-bar .sh-cta-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 6px; max-width: 720px; margin-inline: auto; }
.sh-cta-tab { display: flex; margin: 0; }
.sh-cta-tab .wp-block-button__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1; inline-size: 100%; min-block-size: 56px; padding: 6px 2px; border: 0; border-radius: var(--sh-radius-sm); background: transparent; color: var(--sh-ink); font-size: .75rem; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
.sh-cta-tab .wp-block-button__link::before { content: ""; flex: none; inline-size: 24px; block-size: 24px; background-color: currentColor; -webkit-mask: var(--sh-cta-icon) center / contain no-repeat; mask: var(--sh-cta-icon) center / contain no-repeat; }
/* The parent gives every button a minimum width of 2.75rem, its 44px target
   scaled with the text. Five tabs share the bar: at 200% text on a 320px
   screen that minimum is 88px against a 56px share, and the labels ran into
   one another. Each tab fills its share, which is 56px or more from 320px up,
   so the minimum is dropped here and a label wraps within its tab. */
.sh-cta-tab .wp-block-button__link { min-inline-size: 0; }
.sh-cta-tab .wp-block-button__link:hover { background: var(--sh-surface); }
.sh-cta-line .wp-block-button__link { background: var(--sh-green); color: var(--sh-green-ink); }
.sh-cta-line .wp-block-button__link:hover { background: color-mix(in srgb, var(--sh-green) 85%, #000); }
/* The external-link plugin's icon would take a line of its own under the
   label; LINE is where that tab goes anyway. */
.sh-cta-tab .wp-block-button__link .wpel-icon { display: none; }
/* The parent keeps room under the page so the bar never covers the end of it
   (R-7): 30vh, the bar's largest possible height. The footer is white, as is
   the page, so that room needs no paint of its own (until 0.8.x it was filled
   with the grey of the former footer). */
.sh-cta-home { --sh-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.sh-cta-shop { --sh-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E"); }
.sh-cta-cart { --sh-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='19.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='19.5' r='1.5'/%3E%3Cpath d='M2.5 3.5h2.8l2.3 11h11l2-7.5H6.2'/%3E%3C/svg%3E"); }
.sh-cta-line { --sh-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-5 0-9 3.1-9 7 0 2.4 1.5 4.5 3.9 5.8L6.4 20l3.7-2.2c.6.1 1.3.2 1.9.2 5 0 9-3.1 9-7s-4-7-9-7z'/%3E%3C/svg%3E"); }
.sh-cta-contact { --sh-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }

@media (max-width: 1000px) {
 .sh-shell { width: calc(100% - 64px); }
 .sh-section { padding-block: 88px; }
 .sh-header-actions { gap: 20px; }
 .sh-header .wp-block-navigation__container { gap: 16px; }
 .sh-hero-stage { padding-block: 30px 52px; }
 .sh-hero-cards { gap: 16px; }
 .sh-hero-tab a { min-height: 54px; font-size: .85rem; }
 .sh-lede { padding-block: 32px; }
 .sh-lede-bar { gap: 22px 32px; }
 .sh-lede .sh-hero-title, .sh-lede .sh-store-status h1 { font-size: 2rem; }
 .sh-button-lg .wp-block-button__link { min-height: 56px; padding: 15px 24px; gap: 18px; font-size: .88rem; }
 .sh-feature-row { gap: 48px; }
 .sh-feature-copy > h3 { font-size: 2.25rem; }
 .sh-products .wc-block-product { flex-basis: calc((100% - 40px) / 2.6); }
 .sh-guide-copy { padding: 28px; }
 .sh-guide-image img { height: auto; }
 .sh-service-grid { gap: 44px; }
 .sh-service-items { gap: 24px; }
 .sh-step { flex-basis: calc((100% - 48px) / 2.5); }
 .sh-shots { gap: 18px; }
 .sh-shot h4 { font-size: .95rem; }
 .sh-footer-grid { grid-template-columns: 1fr 1fr; }
 .sh-lp .sh-lp-sec { padding-block: 80px; }
 .sh-lp .sh-lp-hero-inner { padding-block: 72px; }
 .sh-lp .sh-lp-title { font-size: 3.25rem; }
 .sh-lp .sh-lp-hero-sub { font-size: 1.125rem; }
 .sh-lp .sh-lp-h2 { font-size: 2.25rem; }
 .sh-lp-price-num { font-size: 2.5rem; }
 .sh-lp .sh-lp-trust-list, .sh-lp .sh-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .sh-lp-trust-list > li:nth-child(3) { border-left: 0; }
 .sh-lp-trust-list > li:nth-child(n+3) { border-top: 2px solid #1c1a172e; }
 .sh-lp-trust-list strong { font-size: 1.625rem; }
 .sh-lp .sh-im-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "deals" "cta" "badges"; padding-block: 64px; }
 .sh-lp .sh-im-deals { max-width: 560px; margin-top: 28px; }
}
@media (max-width: 700px) {
 .sh-main > .wp-block-post-content:not(:has(> .sh-home, > .sh-page, > .sh-concept)), .sh-post, .sh-archive, .sh-notfound { padding-block: 36px 64px; }
 .sh-archive-list > li { padding-block: 22px; }
 .sh-archive-item { gap: 16px; }
 .sh-archive-thumb { width: 96px; }
 .sh-archive-copy .wp-block-post-title { font-size: 1.1rem; }
 .sh-archive-copy .wp-block-post-excerpt { display: none; }
 /* 「見つかりませんでした」is one phrase; at the parent's size it splits as
    〜で / した. One step down keeps it on a line at 320px. */
 .sh-notfound h1 { font-size: 1.75rem; }
 :is(.sh-home, .sh-page) h2 { font-size: 2rem; }
 .sh-expertise .sh-section-heading h2 { font-size: 1.875rem; }
 .sh-feature-copy > h3 { font-size: 2.25rem; }
 .sh-guide-copy h3 { font-size: 1.5rem; }
 .sh-service-intro h2 { font-size: 2rem; }
 .sh-shell { width: calc(100% - 40px); }
 .sh-section { padding-block: 64px; }
 .sh-section-heading { margin-bottom: 34px; }
 .sh-section-intro { font-size: 1rem; margin-top: 14px; }
 .sh-header-inner { gap: 12px; padding-block: 16px; }
 .sh-logo { width: 132px; }
 .sh-header-tagline { display: none; }
 .sh-header-actions { gap: 14px; }
 .sh-header .sh-button .wp-block-button__link { gap: 12px; min-height: 42px; padding: 10px 13px; font-size: .75rem; }
 .sh-hero-tab a { min-height: 48px; gap: 8px; font-size: .76rem; letter-spacing: .02em; }
 .sh-hero-tab a::before { width: 14px; height: 14px; }
 .sh-hero-stage { padding-block: 22px 38px; background-position: 62% center; }
 .sh-hero-stage::after { height: 11px;
  background: radial-gradient(circle at 16px 16px, var(--sh-tint) 16px, #0000 16.5px) repeat-x left bottom / 32px 11px,
   linear-gradient(var(--sh-tint) 0 0) no-repeat left bottom / 100% 4px; }
 .sh-hero-cards { grid-template-columns: minmax(0,1fr); gap: 14px; }
 .sh-lede { padding-block: 26px 28px; }
 .sh-lede-bar { flex-direction: column; align-items: stretch; gap: 20px; }
 .sh-lede-copy { flex: 0 0 auto; }
 .sh-lede .sh-eyebrow { font-size: .75rem; letter-spacing: .1em; }
 .sh-lede .sh-hero-title, .sh-lede .sh-store-status h1 { font-size: 1.75rem; margin-block: 10px 8px; }
 .sh-lede .sh-caption { font-size: .78rem; }
 .sh-lede .wp-block-buttons { flex-wrap: wrap; }
 .sh-lede .wp-block-buttons, .sh-lede .sh-button, .sh-lede .wp-block-button__link { width: 100%; }
 .sh-button-lg .wp-block-button__link { min-height: 52px; padding: 14px 22px; }
 .sh-lede-links { margin-top: 22px; padding-top: 16px; gap: 10px 24px; }
 .sh-feature-row { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .sh-feature-row + .sh-feature-row { margin-top: 60px; }
 .sh-feature-row-reverse .sh-feature-image { order: 2; }
 .sh-feature-copy > h3 { margin-block: 12px 18px; }
 .sh-feature-copy > p:not(.sh-eyebrow, .sh-text-link) { font-size: 1rem; }
 .sh-stat { margin-top: 24px; padding-top: 22px; }
 .sh-stat-value strong { font-size: 3.4rem; }
 .sh-feature-image img { aspect-ratio: 1214 / 514; }
 .sh-category-heading { flex-wrap: wrap; align-items: center; gap: 12px; }
 .sh-category-title { padding-left: 11px; border-left-width: 3px; }
 .sh-category-actions { width: 100%; justify-content: space-between; }
 .sh-category-title h3 { font-size: 1.5rem; }
 .sh-category-title .sh-eyebrow { font-size: .75rem; }
 .sh-category-actions { gap: 10px; }
 .sh-category-actions .sh-text-link a { font-size: .75rem; }
 .sh-products + .sh-products { margin-top: 44px; }
 .sh-products .wc-block-product-template { gap: 14px; }
 .sh-products .wc-block-product { flex-basis: 80%; }
 .sh-products .wc-block-next-previous-buttons__button { width: 36px; height: 36px; }
 .sh-product-info { padding: 18px; }
 .sh-two-columns { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .sh-guide-image img { height: auto; aspect-ratio: 530 / 370; }
 .sh-guide-copy { padding: 24px; }
 .sh-service-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
 .sh-service-items { grid-template-columns: minmax(0,1fr); gap: 44px; }
 .sh-service-intro h2 { margin-block: 18px 20px; }
 .sh-service-item { gap: 0; }
 .sh-service-item + .sh-service-item { margin-top: 0; padding-top: 0; }
 .sh-service-copy { padding-top: 22px; }
 .sh-service-copy h3 { font-size: 1.5rem; }
 .sh-service-copy > p { font-size: 1rem; margin-top: 10px; }
 .sh-service-copy > .sh-text-link { margin-top: 14px; }
 .sh-steps { gap: 16px; margin-inline: -4px; padding-inline: 4px; }
 .sh-step { flex-basis: 84%; padding: 24px 22px 26px; }
 .sh-step-number { font-size: 1.5rem; }
 .sh-step h3 { font-size: 1.3125rem; margin-bottom: 12px; }
 .sh-step > p:not(.sh-step-number) { font-size: 1rem; }
 .sh-step-image { width: min(100%,210px); margin-block: 18px; }
 .sh-step-image img { height: auto; }
 .sh-closing { padding: 26px; margin-top: 52px; }
 .sh-closing .wp-block-buttons, .sh-closing .sh-button, .sh-closing .wp-block-button__link { width: 100%; }
 /* Four screens side by side are too small to read on a phone. They become a
    swipe row like the step cards, with the next screen left in view. */
 .sh-howto-links { margin-bottom: 36px; gap: 10px 24px; }
 .sh-device + .sh-device { margin-top: 56px; }
 .sh-device > h3 { margin-bottom: 20px; padding-left: 11px; border-left-width: 3px; font-size: 1.3rem; }
 .sh-shots { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; margin-inline: -4px; padding: 4px 4px 16px; scrollbar-width: thin; scrollbar-color: var(--sh-line) transparent; }
 .sh-shot { flex: 0 0 62%; scroll-snap-align: start; }
 .sh-howto .sh-note { margin-top: 48px; }
 .sh-howto .sh-closing { margin-top: 40px; }
 .sh-company-info { padding-block: 48px 72px; }
 .sh-area-info { padding-block: 40px 72px; }
 .sh-area-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .sh-area-map img { max-width: 340px; }
 .sh-page .sh-area-copy h2 { font-size: 1.5rem; }
 .sh-area-info .sh-closing { margin-top: 48px; }
 .sh-page .sh-company-table :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
 .sh-page .sh-company-table th { padding: 16px 0 2px; }
 .sh-page .sh-company-table td { padding-bottom: 16px; border-bottom: 1px solid var(--sh-line); }
 .sh-news { padding-block: 64px; }
 .sh-news-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 28px; }
 .sh-news-grid > .wp-block-query { grid-column: auto; grid-row: auto; }
 .sh-news-list > li { grid-template-columns: minmax(0, 1fr); padding-block: 18px; }
 .sh-footer { padding-top: 44px; }
 .sh-footer-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .sh-footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .sh-footer-bottom { margin-top: 32px; }
 .sh-footer-legal { gap: 10px 20px; }
 .sh-lp .sh-lp-sec { padding-block: 56px; }
 .sh-lp .sh-lp-hero-inner { padding-block: 48px; }
 .sh-lp .sh-lp-title { font-size: 2.125rem; }
 .sh-lp .sh-lp-hero-sub { font-size: 1rem; }
 .sh-lp .sh-lp-h2 { font-size: 1.75rem; }
 .sh-lp-price-num { font-size: 2rem; }
 .sh-lp .sh-lp-prices, .sh-lp .sh-lp-steps { grid-template-columns: minmax(0, 1fr); }
 .sh-lp .sh-lp-btns > .wp-block-button, .sh-lp-btn .wp-block-button__link { width: 100%; }
 .sh-lp-btn .wp-block-button__link { min-height: 60px; padding-inline: 20px; font-size: 1.0625rem; }
 .sh-lp-trust-list strong { font-size: 1.375rem; }
 .sh-lp-cat { padding: 20px 14px; }
 .sh-lp-cat-price { font-size: 1.5rem; }
 .sh-lp-tel a { display: block; }
 .sh-lp .sh-lp-products .sh-products { margin-top: 44px; }
 .sh-lp .sh-im-hero-grid { padding-block: 40px 48px; }
 .sh-im-deals { padding: 18px 18px 12px; }
 .sh-im-deal .wc-block-product { grid-template-columns: minmax(0, 1fr); }
 .sh-lp .sh-im-deal .sh-product-price { font-size: 1.75rem; text-align: left; }
 .sh-im-reason-num strong { font-size: 2.125rem; }
 .sh-im-qa > summary { font-size: 1.0625rem; padding-block: 18px; }
}
@media (max-width: 380px) {
 .sh-page h2 { font-size: 1.75rem; }
 .sh-lede .sh-hero-title, .sh-lede .sh-store-status h1 { font-size: 1.55rem; }
 .sh-hero-tab a { font-size: .75rem; padding-inline: 8px; }
 .sh-shell { width: calc(100% - 32px); }
 .sh-header-actions { gap: 10px; }
 .sh-logo { width: 116px; }
 .sh-header .sh-button .wp-block-button__link { padding-inline: 10px; gap: 6px; }
 .sh-step { flex-basis: 88%; }
 .sh-im-deals { padding-inline: 12px; }
 .sh-lp .sh-im-deal .sh-product-price { font-size: 1.5rem; }
}
@media (prefers-contrast: more) {
 .fluentform.ff-default :is(.ff-el-form-control, .ff-btn):focus-visible { outline-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
 .sh-products .wc-block-product-template { scroll-behavior: auto; }
 :where(.sh-home, .sh-page, .sh-header, .sh-footer) :where(a, .wc-block-product, .wp-block-button__link, span) { transition: none; }
 .sh-products .wc-block-product:hover { transform: none; }
 .sh-text-link a:hover span:not(.wpel-icon) { transform: none; }
 .sh-lp-btn .wp-block-button__link:hover, .sh-lp-cat:hover, .sh-im-route:hover { transform: none; }
}
@media (forced-colors: active) {
 .sh-products .wc-block-product, .sh-guide-card { border: 1px solid CanvasText; }
 .sh-step, .sh-category-title, .sh-device > h3 { border-color: CanvasText; }
 .sh-shot-image img { border: 1px solid CanvasText; }
 .fluentform.ff-default :is(.ff-el-form-control, .ff-btn):focus-visible { outline-color: Highlight; box-shadow: none; }
 /* The mask needs a painted background; forced colours would blank it, and
    currentColor here resolves to the unforced ink. LinkText matches the label. */
 .sh-cta-tab .wp-block-button__link::before { forced-color-adjust: none; background-color: LinkText; }
 .sh-cta-tab .wp-block-button__link { border: 1px solid CanvasText; }
 :is(.sh-text-link a:not([href^="#"]), .sh-button .wp-block-button__link, .shc-text-link) > span[aria-hidden="true"]::before,
 .sh-concept .shc-path > span:last-child::before, .sh-concept .shc-button::after, .sh-product-link::after { forced-color-adjust: none; background-color: LinkText; }
 /* Cards, tiles and buttons lose their fills; their edges stay as borders. */
 .sh-lp-prices > li, .sh-lp .sh-lp-step, .sh-lp-cat, .sh-im-deals, .sh-lp .sh-im-reason { border: 2px solid CanvasText; }
 .sh-lp-btn .wp-block-button__link { border-color: ButtonText; }
}

/* Home and the site's header and footer, from 0.9.0: the design first built as
   the standalone page /home-concept/. Every rule is scoped to .sh-concept,
   which Home's body carries and so do the header and footer parts (their
   roots are .sh-concept.shc-header and .sh-concept.shc-footer, so the two
   rules for those roots name the class alone). The tokens are this design's
   own; inside it the sh- tokens are pointed at them, so the product carousels
   take the same palette. Text under 1rem is set in ink, never the muted
   colour (see the rule near the top of this file). */
.sh-concept {
 --shc-ink: #29251f; --shc-muted: #615b53; --shc-paper: #fffdf9;
 --shc-tint: #f6f0e6; --shc-line: #ddd5c9; --shc-orange: #f39800;
 --shc-rust: #97530a; --shc-dark: #292e29; --shc-green: #14733d;
 --sh-ink: var(--shc-ink); --sh-paper: var(--shc-paper); --sh-line: var(--shc-line);
 --sh-surface: var(--shc-tint); --sh-charcoal: var(--shc-dark); --sh-price: var(--shc-rust);
 --sh-orange: var(--shc-orange); --sh-radius: 8px; --sh-radius-sm: 5px;
 color: var(--shc-ink); background: var(--shc-paper); line-height: 1.85;
 max-width: none; margin: 0;
}
/* No width here: Home's body is an alignfull child of a constrained post
   content, which pulls it out by the root padding with negative margins; a
   100% width kept it the content's width and left a 32px strip on the right. */
.sh-concept, .sh-concept * { box-sizing: border-box; }
.sh-concept > *, .sh-concept :is(.shc-main,.shc-hero-grid,.shc-hero-copy,.shc-hero-prices,.shc-hero-price,.shc-catalog-series,.shc-carousel-controls,.sh-product-info) > * { margin-block-start: 0; }
.sh-concept :is(h1,h2,h3,p,figure,ul,ol,dl,dd) { margin: 0; }
.sh-concept :is(h1,h2,h3) { color: inherit; font-weight: 700; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty; }
.sh-concept :is(h1,h2,h3) em { font-style: normal; }
.sh-concept :is(a,button,summary) { -webkit-tap-highlight-color: transparent; }
.sh-concept a { color: inherit; text-underline-offset: .25em; }
.sh-concept img { display: block; max-width: 100%; height: auto; }
.sh-concept .shc-shell { width: calc(100% - 96px); max-width: 1240px; margin-inline: auto; }
.sh-concept .shc-small { font-size: .8125rem; line-height: 1.75; }
.sh-concept .shc-kicker { display: flex; align-items: center; gap: 12px; color: var(--shc-rust); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; overflow-wrap: anywhere; }
.sh-concept .shc-kicker::before { content: ""; width: 24px; height: 2px; background: var(--shc-orange); flex: none; }
.sh-concept .shc-section { padding-block: 100px; scroll-margin-top: 24px; }
.sh-concept .shc-section h2 { margin-top: 18px; font-size: 2.5rem; line-height: 1.5; letter-spacing: -.035em; }
.sh-concept .shc-section-intro { margin-top: 20px; max-width: 720px; color: var(--shc-muted); }
.sh-concept .shc-button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 58px; padding: 14px 24px; border: 1px solid var(--shc-green); border-radius: 5px; background: var(--shc-green); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.6; text-decoration: none; text-align: center; }
.sh-concept .shc-button:hover { background: #0d5b2f; border-color: #0d5b2f; color: #fff; }
.sh-concept :is(.shc-button,.shc-text-link,.shc-other-products a) .wpel-icon { display: none; }
.sh-concept .shc-button-outline { border-color: var(--shc-ink); color: var(--shc-ink); background: transparent; }
.sh-concept .shc-button-outline:hover { color: #fff; background: var(--shc-ink); border-color: var(--shc-ink); }
.sh-concept .shc-button-orange { color: var(--shc-ink); background: #ffb743; border-color: #ffb743; }
.sh-concept .shc-button-orange:hover { color: var(--shc-ink); background: #ffc665; border-color: #ffc665; }
.sh-concept .shc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sh-concept .shc-text-link { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; font-size: .875rem; font-weight: 700; }
.shc-header { border-top: 4px solid var(--shc-orange); background: #fff; }
/* 25px over the logo (and 20px under its tagline, lighter type): with the
   bar centred in its minimum height alone, the logo sat 8px (phone) to 13px
   (desktop) under the orange rule and looked pressed against it. */
.sh-concept .shc-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 106px; padding-block: 25px 20px; }
.sh-concept .shc-brand { flex: none; display: block; text-decoration: none; }
.sh-concept .shc-brand img { width: 174px; }
.sh-concept .shc-brand span { display: block; margin-top: 7px; font-size: .75rem; }
.sh-concept .shc-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 30px; }
.sh-concept .shc-nav > a:not(.shc-button) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .8125rem; font-weight: 700; }
.sh-concept .shc-nav > a:not(.shc-button):hover { text-decoration: underline; }
.sh-concept .shc-nav .shc-button { min-height: 46px; font-size: .8125rem; padding: 10px 18px; gap: 20px; }
.sh-concept .shc-hero { position: relative; padding-block: 54px 48px; background: var(--shc-tint); }
.sh-concept .shc-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 50px; align-items: center; }
.sh-concept :is(.shc-hero-grid,.shc-line-grid,.shc-reason-grid,.shc-faq-grid) > * { min-width: 0; }
.sh-concept .shc-area-pill { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8125rem; font-weight: 700; }
.sh-concept .shc-area-pill span { padding: 3px 10px; border: 1px solid #a89d8c; border-radius: 3px; background: #fffdf9; }
.sh-concept .shc-hero h1 { margin-top: 23px; font-size: 3.625rem; line-height: 1.42; letter-spacing: -.045em; }
.sh-concept .shc-hero h1 em { color: var(--shc-rust); text-decoration: underline; text-decoration-color: #f4b654; text-decoration-thickness: 8px; text-underline-offset: 8px; }
.sh-concept .shc-hero-lede { margin-top: 25px; font-size: 1rem; line-height: 1.9; }
.sh-concept .shc-hero-prices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 30px; padding-block: 20px; border-top: 1px solid #cfc4b3; border-bottom: 1px solid #cfc4b3; }
.sh-concept .shc-hero-prices > div + div { padding-left: 22px; border-left: 1px solid #cfc4b3; }
/* The two prices sit side by side down to a 320px screen. Asked of the copy
   column in rem, they stack only once the text is enlarged and the pair no
   longer fits (200% text at 320px had ¥94,500 run 110px off the screen). */
.sh-concept .shc-hero-copy { container: shc-hero-copy / inline-size; }
@container shc-hero-copy (max-width: 17rem) {
 .sh-concept .shc-hero-copy .shc-hero-prices { grid-template-columns: minmax(0, 1fr); }
 .sh-concept .shc-hero-copy .shc-hero-prices > div + div { padding-top: 12px; padding-left: 0; border-top: 1px solid #cfc4b3; border-left: 0; }
}
.sh-concept .shc-hero-price-category { font-size: .8125rem; font-weight: 700; }
.sh-concept .shc-hero-price-query { margin-block: 8px 0; }
.sh-concept .shc-hero-price-query .wc-block-product-template { display: block; margin: 0; padding: 0; }
.sh-concept .shc-hero-price-query .wc-block-product { margin: 0; padding: 0; }
.sh-concept .shc-hero-product-price { color: var(--shc-ink); line-height: 1.4; }
.sh-concept .shc-hero-product-price del, .sh-concept .shc-hero-product-price del + .screen-reader-text { display: none; }
.sh-concept .shc-hero-product-price ins { font-size: 2.375rem; font-weight: 700; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.sh-concept .shc-hero-product-price ins::before { content: none; }
/* The two hero prices are where each kind starts, so they read ¥96,900〜. */
.sh-concept .shc-hero-product-price ins::after { content: "〜"; margin-inline-start: .04em; font-size: .6em; letter-spacing: 0; }
/* （税込） stays on one line beside the price; at 375px it split as （税 / 込）. */
.sh-concept .shc-hero-product-price .woocommerce-price-suffix { white-space: nowrap; }
.sh-concept .shc-hero-product-price .woocommerce-price-suffix { font-size: .75rem; }
/* The hero writes 基本工事費込み under each price itself (shc-price-label).
   The shop's per-category label (product_cat-ID, at the end of this file) is
   as specific and comes later, so it printed the words a second time
   (0.9.4–0.9.6); one more class keeps it off here. */
.sh-concept .shc-hero-product-price.sh-product-price .wc-block-components-product-price::after { content: none; }
.sh-concept .shc-hero-product-price .wc-block-components-product-price::before { content: "当店販売価格"; font-size: .75rem; line-height: 1.5; }
.sh-concept .shc-price-label { display: block; margin-top: 6px; font-size: .75rem; }
.sh-concept .shc-hero .shc-small { margin-top: 12px; }
.sh-concept .shc-hero-photo { position: relative; align-self: stretch; display: flex; flex-direction: column; min-width: 0; padding-bottom: 24px; }
.sh-concept .shc-hero-photo > img { width: 100%; height: 100%; min-height: 560px; max-height: 700px; object-fit: cover; object-position: 35% center; border-radius: 70px 8px 8px 8px; }
/* The note sits at the top right corner, clear of the badge at the bottom
   left; on a phone the badge grew wide enough to cover it there. */
.sh-concept .shc-hero-photo figcaption { position: absolute; top: 12px; right: 12px; color: #fff; background: #29251f; padding: 1px 7px; font-size: .75rem; }
.sh-concept .shc-photo-badge { position: absolute; left: -22px; bottom: 4px; display: flex; align-items: center; gap: 20px; padding: 18px 27px; background: #fffdf9; border: 1px solid var(--shc-line); border-radius: 5px; }
.sh-concept .shc-photo-badge p { font-size: .875rem; line-height: 1.6; }
.sh-concept .shc-photo-badge strong { display: block; font-size: 1.0625rem; }
.sh-concept .shc-badge-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--shc-rust); border-radius: 50%; color: var(--shc-rust); font-size: 1.25rem; font-weight: 700; }
.sh-concept .shc-proof { background: #fff; border-bottom: 1px solid var(--shc-line); }
.sh-concept .shc-proof-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; padding-block: 28px; }
.sh-concept .shc-proof-grid > div { padding-inline: 25px; border-left: 1px solid var(--shc-line); }
.sh-concept .shc-proof-grid > div:first-child { padding-left: 0; border: 0; }
.sh-concept .shc-proof dt { font-size: .8125rem; }
.sh-concept .shc-proof dd { font-size: 1.1875rem; font-weight: 700; line-height: 1.6; }
.sh-concept .shc-proof dd strong { font-size: 2.25rem; letter-spacing: -.035em; }
.sh-concept .shc-proof dd small { font-size: .875rem; }
.sh-concept .shc-start { padding-block: 72px; }
.sh-concept .shc-start-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.sh-concept .shc-start h2 { font-size: 1.875rem; line-height: 1.6; }
.sh-concept .shc-start-heading > p { font-size: .875rem; }
.sh-concept .shc-start .shc-small { margin-top: 12px; }
.sh-concept .shc-paths { margin-top: 26px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-block: 1px solid var(--shc-line); }
.sh-concept .shc-path { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 124px; padding: 22px; text-decoration: none; border-right: 1px solid var(--shc-line); }
.sh-concept .shc-path:first-child { padding-left: 0; }
.sh-concept .shc-path:last-child { border: 0; }
.sh-concept .shc-path small { display: block; font-size: .8125rem; margin-bottom: 5px; }
.sh-concept .shc-path strong { font-size: 1.0625rem; }
.sh-concept .shc-path > span:last-child { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--shc-line); border-radius: 50%; }
.sh-concept .shc-path:hover { background: var(--shc-tint); }
.sh-concept .shc-price-section { background: var(--shc-tint); }
.sh-concept .shc-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.sh-concept .shc-heading-row > p { max-width: 360px; font-size: .875rem; }
.sh-concept .shc-catalog-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.sh-concept .shc-catalog-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid #b7aa95; border-radius: 4px; background: var(--shc-paper); font-size: .8125rem; text-decoration: none; }
.sh-concept .shc-catalog-nav a:hover { background: #eee5d7; text-decoration: underline; }
.sh-concept .shc-catalog-series { margin-top: 48px; scroll-margin-top: 24px; }
.sh-concept .shc-series-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.sh-concept .shc-series-heading h3 { font-size: 1.5rem; line-height: 1.6; }
.sh-concept .shc-series-heading .shc-small { margin-top: 5px; }
.sh-concept .shc-carousel-controls { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sh-concept .sh-products .sh-product-info { gap: 10px; }
.sh-concept .sh-products .sh-product-title { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; }
.sh-concept .sh-products .wc-block-product-template { margin: 0; }
.sh-concept .shc-catalog-pagination { margin-top: 18px; }
.sh-concept .shc-catalog-pagination:empty { display: none; }
.sh-concept .shc-empty-products { margin-top: 20px; padding: 24px; background: var(--shc-paper); border: 1px dashed #b7aa95; border-radius: 5px; font-size: .9375rem; }
.sh-concept .sh-products:has(.shc-empty-products) .shc-carousel-controls { display: none; }
.sh-concept .shc-display-series:has(.wc-block-product) .shc-tag { display: none; }
.sh-concept .shc-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 42px; }
.sh-concept .shc-product { position: relative; padding: 30px; background: #fff; border: 1px solid var(--shc-line); border-radius: 8px; }
.sh-concept .shc-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--shc-line); }
.sh-concept .shc-product-top h3 { font-size: 1.3125rem; line-height: 1.55; }
.sh-concept .shc-tag { display: inline-block; flex: none; background: var(--shc-tint); padding: 3px 9px; border-radius: 3px; font-size: .75rem; }
.sh-concept .shc-product-body { display: grid; grid-template-columns: 1fr 175px; align-items: center; gap: 20px; padding-block: 20px; }
.sh-concept .shc-product-image { width: 175px; aspect-ratio: 4/5; object-fit: contain; }
.sh-concept .shc-product-series { font-size: .8125rem; }
.sh-concept .shc-model { font-size: .8125rem; font-weight: 700; overflow-wrap: anywhere; }
.sh-concept .shc-product-description { font-size: .875rem; margin-top: 12px; }
.sh-concept .shc-product-price { font-size: 2.75rem; font-weight: 700; line-height: 1.5; letter-spacing: -.04em; white-space: normal; }
.sh-concept .shc-product-price small { font-size: .75rem; font-weight: 400; letter-spacing: 0; }
.sh-concept .shc-product-inclusion { display: inline-block; background: var(--shc-dark); color: #fff; padding: 3px 9px; font-size: .75rem; }
.sh-concept .shc-product .shc-text-link { display: flex; justify-content: space-between; border-top: 1px solid var(--shc-line); padding-top: 15px; }
.sh-concept .shc-price-note { margin-top: 20px; font-size: .8125rem; line-height: 1.8; }
.sh-concept .shc-other-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 24px; gap: 12px; }
.sh-concept .shc-other-products > a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 82px; padding: 16px 20px; border: 1px solid var(--shc-line); border-radius: 5px; font-size: .875rem; font-weight: 700; background: #fff; text-decoration: none; }
.sh-concept .shc-other-products > a:hover { border-color: var(--shc-rust); text-decoration: underline; }
.sh-concept .shc-cost-callout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 36px; }
.sh-concept .shc-cost-callout strong { display: block; font-size: 1.1875rem; }
.sh-concept .shc-cost-callout p { margin-top: 5px; font-size: .875rem; }
.sh-concept .shc-reason-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 72px; }
.sh-concept .shc-reason-visual { position: sticky; top: 36px; }
.sh-concept .shc-reason-visual figure { margin-top: 35px; }
.sh-concept .shc-reason-visual img { width: 100%; border-radius: 7px; }
.sh-concept .shc-reason-visual figcaption { margin-top: 9px; font-size: .8125rem; }
.sh-concept .shc-reasons { list-style: none; padding: 0; }
.sh-concept .shc-reasons li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding-block: 28px; border-bottom: 1px solid var(--shc-line); }
.sh-concept .shc-reasons li:first-child { padding-top: 0; }
.sh-concept .shc-reason-num { color: var(--shc-rust); font-size: 1.0625rem; padding-top: 3px; }
.sh-concept .shc-reasons h3 { font-size: 1.375rem; line-height: 1.6; }
.sh-concept .shc-reasons p { margin-top: 12px; color: var(--shc-ink); font-size: .9375rem; }
.sh-concept .shc-reasons .shc-text-link { margin-top: 12px; }
.sh-concept .shc-line-section { background: var(--shc-dark); color: #fffdf9; }
.sh-concept .shc-line-section .shc-kicker { color: #ffca79; }
.sh-concept .shc-line-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 100px; align-items: center; }
.sh-concept .shc-line-section h2 { font-size: 2.875rem; }
.sh-concept .shc-line-section h2 em { color: #ffca79; }
.sh-concept .shc-line-section .shc-section-intro { color: #fffdf9; max-width: 560px; }
.sh-concept .shc-line-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 36px; gap: 20px; list-style: none; padding: 0; }
.sh-concept .shc-line-steps li { border-top: 1px solid #879084; padding-top: 15px; }
.sh-concept .shc-line-steps span { display: block; color: #ffca79; font-size: .8125rem; margin-bottom: 8px; }
.sh-concept .shc-line-steps strong { display: block; font-size: .9375rem; }
.sh-concept .shc-line-steps p { font-size: .8125rem; margin-top: 8px; }
.sh-concept .shc-line-section .shc-small { margin-top: 12px; }
.sh-concept .shc-line-section .shc-text-link { margin-top: 8px; }
.sh-concept .shc-phone { width: 300px; max-width: 100%; justify-self: center; border: 7px solid #e7e3db; border-radius: 34px; background: #f0f3ec; color: var(--shc-ink); padding: 18px 18px 24px; }
.sh-concept .shc-phone-speaker { width: 58px; height: 5px; background: #393e36; border-radius: 5px; margin: 0 auto 20px; }
.sh-concept .shc-phone-title { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #bdc9b8; font-weight: 700; font-size: .875rem; }
.sh-concept .shc-chat-time { text-align: center; padding-block: 16px; font-size: .75rem; }
.sh-concept .shc-chat { font-size: .875rem; line-height: 1.8; padding: 14px; border-radius: 12px 12px 2px 12px; margin: 0 0 20px 18px; background: #d9efc1; }
.sh-concept .shc-chat-reply { margin: 0 18px 20px 0; background: #fff; border-radius: 12px 12px 12px 2px; }
.sh-concept .shc-chat-note { text-align: center; font-size: .75rem; }
.sh-concept .shc-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; padding: 0; margin-top: 44px; list-style: none; }
.sh-concept .shc-flow li { border-top: 1px solid var(--shc-line); padding-top: 20px; }
.sh-concept .shc-step-num { font-size: .8125rem; color: var(--shc-rust); font-weight: 700; letter-spacing: .08em; }
.sh-concept .shc-flow img { height: 105px; width: 125px; object-fit: contain; margin-block: 22px; }
.sh-concept .shc-flow h3 { font-size: 1.125rem; line-height: 1.65; }
.sh-concept .shc-flow li > p:last-child { margin-top: 12px; font-size: .875rem; color: var(--shc-ink); }
.sh-concept .shc-area { padding-block: 44px; background: var(--shc-tint); }
.sh-concept .shc-area-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sh-concept .shc-area h2 { font-size: 1.625rem; margin-bottom: 10px; }
.sh-concept .shc-area p { font-size: .875rem; }
.sh-concept .shc-prefectures { display: flex; gap: 12px; list-style: none; padding: 0; margin-bottom: 10px; }
.sh-concept .shc-prefectures li { border: 1px solid #b7aa95; border-radius: 3px; padding: 3px 14px; font-weight: 700; }
.sh-concept .shc-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
.sh-concept .shc-faq-list details { border-bottom: 1px solid var(--shc-line); }
.sh-concept .shc-faq-list details:first-child { border-top: 1px solid var(--shc-line); }
.sh-concept .shc-faq-list summary { position: relative; padding: 23px 40px 23px 32px; min-height: 68px; cursor: pointer; font-size: .9375rem; font-weight: 700; list-style: none; }
.sh-concept .shc-faq-list summary::-webkit-details-marker { display: none; }
.sh-concept .shc-faq-list summary::before { position: absolute; left: 0; content: "Q"; color: var(--shc-rust); }
.sh-concept .shc-faq-list summary::after { position: absolute; right: 5px; content: "+"; font-weight: 400; font-size: 1.5rem; top: 16px; }
.sh-concept .shc-faq-list details[open] summary::after { content: "−"; }
.sh-concept .shc-faq-list details > p { padding: 0 32px 25px; font-size: .9375rem; color: var(--shc-ink); }
.sh-concept .shc-final { padding-block: 75px; background: #f5b34b; text-align: center; }
.sh-concept .shc-final .shc-kicker { justify-content: center; color: var(--shc-ink); }
.sh-concept .shc-final h2 { margin-top: 18px; font-size: 2.625rem; line-height: 1.5; letter-spacing: -.035em; }
.sh-concept .shc-final p { margin-top: 20px; }
.sh-concept .shc-final .shc-actions { justify-content: center; }
.sh-concept .shc-tel { display: inline-flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.sh-concept .shc-tel a { font-size: 1.75rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sh-concept .shc-tel span { font-size: .8125rem; }
.sh-concept .shc-final .shc-small { margin-top: 4px; }
.shc-footer { padding-block: 48px 32px; border-top: 1px solid var(--shc-line); background: #fff; }
.sh-concept .shc-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.sh-concept .shc-footer-address { font-size: .8125rem; margin-top: 15px; }
.sh-concept .shc-footer-links { display: flex; flex-wrap: wrap; align-items: start; align-content: start; gap: 8px 25px; max-width: 430px; }
.sh-concept .shc-footer-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: .8125rem; }
.sh-concept .shc-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; margin-top: 32px; border-top: 1px solid var(--shc-line); font-size: .75rem; }
/* Reuse the existing four-tab navigation, including its icons and reflow.
   It connects the main website with the EC subdomain in the same order. */
.sh-concept .shc-dock.wp-block-group.is-style-fixed-cta {
 --sh-ink: var(--wp--preset--color--scalesuite-ink);
 --sh-line: var(--wp--preset--color--scalesuite-hairline);
 --sh-surface: var(--wp--preset--color--scalesuite-surface);
 --sh-green: var(--wp--preset--color--scalesuite-green);
 --sh-green-ink: var(--wp--preset--color--scalesuite-green-ink);
 --sh-radius-sm: 8px;
 padding: 6px 8px calc(6px + env(safe-area-inset-bottom,0px));
 background: var(--wp--preset--color--scalesuite-background);
 color: var(--sh-ink);
}
@media (max-width: 1100px) {
 .sh-concept .shc-shell { width: calc(100% - 56px); }
 .sh-concept .shc-nav { gap: 18px; }
 .sh-concept .shc-hero-grid { gap: 30px; }
 .sh-concept .shc-hero h1 { font-size: 3rem; }
 .sh-concept .shc-hero-product-price ins { font-size: 2rem; }
 .sh-concept .shc-hero-prices { gap: 12px; }
 .sh-concept .shc-hero-prices > div + div { padding-left: 12px; }
 .sh-concept .shc-hero-photo > img { min-height: 540px; }
 .sh-concept .shc-photo-badge { padding: 15px; left: -12px; gap: 12px; }
 .sh-concept .shc-section h2 { font-size: 2.125rem; }
 .sh-concept .shc-product { padding: 23px; }
 .sh-concept .shc-product-body { grid-template-columns: 1fr 130px; gap: 12px; }
 .sh-concept .shc-product-image { width: 130px; }
 .sh-concept .shc-product-price { font-size: 2.25rem; }
 .sh-concept .shc-line-grid { gap: 48px; }
 .sh-concept .shc-reason-grid { gap: 42px; }
 .sh-concept .shc-faq-grid { gap: 38px; }
}
@media (max-width: 800px) {
 .sh-concept .shc-header-inner { min-height: 88px; gap: 12px; }
 .sh-concept .shc-brand img { width: 146px; }
 .sh-concept .shc-brand span { font-size: .75rem; max-width: 160px; }
 .sh-concept .shc-nav > a:not(.shc-button) { display: none; }
 .sh-concept .shc-nav .shc-button { padding: 10px 12px; gap: 9px; }
 .sh-concept .shc-hero { padding-top: 36px; }
 .sh-concept .shc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
 .sh-concept .shc-hero h1 { font-size: 3.125rem; max-width: 650px; }
 .sh-concept .shc-hero h1 br { display: none; }
 .sh-concept .shc-hero-prices { max-width: 570px; }
 .sh-concept .shc-hero-product-price ins { font-size: 2.375rem; }
 .sh-concept .shc-hero-photo > img { min-height: 0; height: 360px; max-height: none; object-position: center 58%; border-top-left-radius: 50px; }
 /* In one column the photo leads. Last in the source, it came after the
    copy, the prices and the buttons, and a phone's first screen was text
    only. Only the order changes: the reading order stays copy first, the
    photo being an illustration (暮らしのイメージ). */
 .sh-concept .shc-hero { padding-top: 16px; }
 .sh-concept .shc-hero-photo { order: -1; }
 .sh-concept .shc-photo-badge { left: 18px; }
 .sh-concept .shc-proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 0; }
 .sh-concept .shc-proof-grid > div { padding-inline: 20px; }
 .sh-concept .shc-proof-grid > div:nth-child(3) { border: 0; padding-left: 0; }
 .sh-concept .shc-start { padding-block: 52px; }
 .sh-concept .shc-start-heading { display: block; }
 .sh-concept .shc-start-heading > p { margin-top: 10px; }
 .sh-concept .shc-paths { grid-template-columns: 1fr; }
 .sh-concept .shc-path { min-height: 100px; border: 0; border-bottom: 1px solid var(--shc-line); padding: 20px 8px; }
 .sh-concept .shc-path:first-child { padding-left: 8px; }
 .sh-concept .shc-heading-row { display: block; }
 .sh-concept .shc-heading-row > p { margin-top: 20px; max-width: none; }
 .sh-concept .shc-products { grid-template-columns: 1fr; }
 .sh-concept .shc-product-body { grid-template-columns: 1fr 190px; }
 .sh-concept .shc-product-image { width: 190px; }
 .sh-concept .shc-product-price { font-size: 2.75rem; }
 .sh-concept .shc-other-products { grid-template-columns: 1fr; }
 .sh-concept .shc-other-products > a { min-height: 60px; }
 .sh-concept .shc-reason-grid { grid-template-columns: 1fr; gap: 36px; }
 .sh-concept .shc-reason-visual { position: static; }
 .sh-concept .shc-line-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
 .sh-concept .shc-line-section h2 { font-size: 2.5rem; }
 .sh-concept .shc-phone { width: 320px; }
 .sh-concept .shc-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px 25px; }
 .sh-concept .shc-area-inner { display: block; }
 .sh-concept .shc-area .shc-text-link { margin-top: 12px; }
 .sh-concept .shc-faq-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 480px) {
 .sh-concept .shc-shell { width: calc(100% - 40px); }
 .sh-concept .shc-section { padding-block: 64px; }
 .sh-concept .shc-hero h1 { font-size: 2rem; }
 .sh-concept .shc-hero h1 br { display: block; }
 .sh-concept .shc-hero h1 em { text-decoration-thickness: 5px; text-underline-offset: 6px; }
 .sh-concept .shc-hero-lede { font-size: .9375rem; }
 .sh-concept .shc-hero-prices { gap: 10px; }
 .sh-concept .shc-hero-product-price ins { font-size: 1.875rem; }
 .sh-concept .shc-hero-price-category { font-size: .75rem; }
 .sh-concept .shc-series-heading h3 { font-size: 1.3125rem; }
 .sh-concept .shc-hero .shc-actions { gap: 10px; }
 .sh-concept .shc-hero .shc-button { width: 100%; }
 .sh-concept .shc-hero-photo > img { height: 275px; }
 .sh-concept .shc-photo-badge { left: 8px; padding: 12px; }
 .sh-concept .shc-photo-badge p { font-size: .75rem; }
 .sh-concept .shc-photo-badge strong { font-size: .875rem; }
 .sh-concept .shc-badge-icon { width: 40px; height: 40px; }
 .sh-concept .shc-hero-photo figcaption { top: 8px; right: 8px; }
 .sh-concept .shc-proof dd { font-size: 1rem; }
 .sh-concept .shc-proof dd strong { font-size: 1.75rem; }
 .sh-concept .shc-proof-grid > div { padding-inline: 14px; }
 .sh-concept .shc-start h2 { font-size: 1.625rem; }
 .sh-concept .shc-section h2 { font-size: 1.875rem; }
 .sh-concept .shc-product { padding: 20px; }
 .sh-concept .shc-product-top { align-items: start; flex-wrap: wrap; }
 .sh-concept .shc-product-body { grid-template-columns: 1fr 115px; gap: 12px; }
 .sh-concept .shc-product-image { width: 115px; }
 .sh-concept .shc-product-price { font-size: 2rem; }
 .sh-concept .shc-product-price small { display: block; }
 .sh-concept .shc-product-description { font-size: .8125rem; }
 .sh-concept .shc-cost-callout .shc-button { width: 100%; }
 .sh-concept .shc-reasons { margin-top: 4px; }
 .sh-concept .shc-reasons h3 { font-size: 1.1875rem; }
 .sh-concept .shc-line-section h2 { font-size: 1.875rem; }
 .sh-concept .shc-line-steps { grid-template-columns: 1fr; gap: 20px; }
 .sh-concept .shc-line-steps li { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 0 12px; }
 .sh-concept .shc-line-steps p { grid-column: 2; }
 .sh-concept .shc-line-section .shc-button { width: 100%; }
 .sh-concept .shc-flow { grid-template-columns: 1fr; gap: 24px; }
 .sh-concept .shc-flow li { display: grid; grid-template-columns: 78px minmax(0,1fr); column-gap: 20px; }
 .sh-concept .shc-flow .shc-step-num { grid-column: 1 / -1; margin-bottom: 14px; }
 .sh-concept .shc-flow img { grid-column: 1; grid-row: 2 / 4; width: 78px; height: 78px; margin: 0; }
 .sh-concept .shc-flow h3 { grid-column: 2; }
 .sh-concept .shc-flow li > p:last-child { grid-column: 2; }
 .sh-concept .shc-prefectures { gap: 8px; flex-wrap: wrap; }
 .sh-concept .shc-prefectures li { padding-inline: 12px; }
 .sh-concept .shc-final h2 { font-size: 1.875rem; }
 .sh-concept .shc-final .shc-button { width: 100%; }
}
@media (max-width: 360px) {
 .sh-concept .shc-header-inner { flex-wrap: wrap; padding-block: 25px 15px; }
 .sh-concept .shc-nav { width: 100%; justify-content: stretch; }
 .sh-concept .shc-nav .shc-button { width: 100%; }
 .sh-concept .shc-hero h1 { font-size: 1.75rem; }
 .sh-concept .shc-line-section h2 { font-size: 1.625rem; }
 .sh-concept .shc-product-body { grid-template-columns: 1fr; }
 .sh-concept .shc-product-image { width: 150px; grid-row: 1; justify-self: center; }
 .sh-concept .shc-photo-badge { bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
 .sh-concept .shc-button { transition: background-color .18s, border-color .18s; }
}
@media (forced-colors: active) {
 .sh-concept .shc-button, .sh-concept .shc-product, .sh-concept .shc-phone, .sh-concept .shc-photo-badge { border: 1px solid CanvasText; }
 .sh-concept .shc-hero h1 em { color: CanvasText; }
}
@media print {
 .sh-concept .shc-dock, .sh-concept .shc-nav { display: none; }
 .sh-concept .shc-section { padding-block: 24px; }
 .sh-concept .shc-shell { width: 100%; }
 .sh-concept .shc-reason-visual { position: static; }
 .sh-concept .shc-hero-photo > img { min-height: 0; height: 260px; }
 .sh-concept .shc-faq-list details > p { display: block; }
}

/* SNS (2026-10). The footer lists the shop's Instagram, Facebook and Threads
   under the address, each name with its glyph drawn as a mask in the text
   colour (no brand colours, and nothing left to an emoji font). The glyphs
   are Feather's instagram, facebook and at-sign (MIT). The external-link
   plugin's icon is dropped here; the glyph already says where it goes. */
.sh-concept .shc-sns { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; padding: 0; list-style: none; }
.sh-concept .shc-sns li { margin: 0; }
.sh-concept .shc-sns a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .8125rem; }
.sh-concept .shc-sns a::before { content: ""; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--shc-sns-icon) center / contain no-repeat; mask: var(--shc-sns-icon) center / contain no-repeat; }
.sh-concept .shc-sns .wpel-icon { display: none; }
.shc-sns-instagram { --shc-sns-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
.shc-sns-facebook { --shc-sns-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.shc-sns-threads { --shc-sns-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E"); }

/* Instagram on Home, between the reasons and the LINE section: the shop's
   own posts, as proof of the work the reasons describe. The feed is Smash
   Balloon's Instagram Feed (shortcode [instagram-feed feed=1]); its columns
   and number of posts are set in the plugin's feed editor. Until the account
   is connected, or if the feed comes back empty, the plugin renders no
   .sbi_item and the whole section is left out rather than shown empty. */
.sh-concept .shc-insta { background: var(--shc-tint); }
.sh-concept .shc-insta:not(:has(.sbi_item)) { display: none; }
.sh-concept .shc-insta-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.sh-concept .shc-insta-feed { margin-top: 32px; }

@media (forced-colors: active) {
 .sh-concept .shc-sns a::before { forced-color-adjust: none; background-color: LinkText; }
}

/* Shop pages (WooCommerce, 2026-10): the product page, the product archives
   (shop, category, tag) and product search, on this site's header, footer
   and breadcrumb band instead of the parent's generic templates. Cards are
   Home's (.sh-products), laid out as a grid on the archives.

   What a price covers is per category: 基本工事費込み (ビルトインガスコンロ 24,
   給湯専用 22, 風呂給湯器 21), 送料込み (テーブルコンロ 26), 本体のみ (衣類乾燥機
   27). A card carries its categories as classes (product_cat-ID), and so does
   the product page, whose main part sits in a one-post query loop of the main
   query: that also hands the product to blocks that need it as context (the
   short description). */
:is(.product_cat-24, .product_cat-22, .product_cat-21) .sh-product-price .wc-block-components-product-price::after { content: "基本工事費込み"; }
.product_cat-26 .sh-product-price .wc-block-components-product-price::after { content: "送料込み"; }
.product_cat-27 .sh-product-price .wc-block-components-product-price::after { content: "本体のみ"; }
.sh-product-terms { display: none; }
:is(.product_cat-24, .product_cat-22, .product_cat-21) .sh-terms-install,
.product_cat-26 .sh-terms-shipping,
.product_cat-27 .sh-terms-body { display: block; }
.sh-product-loop .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.sh-product-loop .wp-block-post { margin: 0; }

/* Breadcrumbs from WooCommerce, in the same band as the pages' own. */
/* The last crumb is the product's model number, one unbroken word
   (RHS31W38M13RCSTW): at 200% text it was wider than a 320px screen, so the
   trail may break anywhere. */
.sh-breadcrumbs .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35em; margin: 0; color: var(--wp--preset--color--scalesuite-ink); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.sh-breadcrumbs .woocommerce-breadcrumb a { display: inline-flex; align-items: center; min-block-size: 44px; color: inherit; }

.sh-product-page { padding-block: 40px 96px; }
.sh-product-page .sh-product-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 56px; }
.sh-product-media .woocommerce-product-gallery { position: relative; margin: 0; }
.sh-product-media .woocommerce-product-gallery__image img { width: 100%; height: auto; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-paper); }
/* The gallery's thumbnails on a grid of four. WooCommerce gives each one
   width: 25% (with float) and fades the ones not shown to half opacity, from
   .woocommerce div.product div.images (0-4-3): inside a grid cell that 25%
   was a quarter of the cell, and the thumbnails came out 24px wide. The rules
   here are one class stronger; the one on show is told by its border. */
.sh-product-media .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sh-product-page .sh-product-media .woocommerce-product-gallery.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.sh-product-page .sh-product-media .woocommerce-product-gallery.images .flex-control-thumbs li img { width: 100%; height: auto; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); opacity: 1; cursor: pointer; }
.sh-product-page .sh-product-media .woocommerce-product-gallery.images .flex-control-thumbs li img.flex-active { border-color: var(--sh-ink); box-shadow: 0 0 0 1px var(--sh-ink); }

.sh-page .sh-product-buy .sh-product-brand { min-height: 0; white-space: normal; font-size: .875rem; }
.sh-page .sh-product-buy .sh-product-name { margin-top: 6px; font-size: 2rem; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; }
.sh-page .sh-product-buy .sh-product-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 0; }
.sh-product-cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: 1px solid var(--sh-line); border-radius: 999px; background: var(--sh-surface); color: var(--sh-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.sh-product-cats a:hover { border-color: var(--sh-ink); }
/* The buying column is a size container so the price can follow its width:
   a six-digit price (¥145,100) at 200% text was wider than a 320px screen
   (R-5). 12cqi leaves the usual sizes alone from about 300px of column up. */
.sh-product-buy { container-type: inline-size; }
.sh-page .sh-product-buy .sh-product-price { margin-top: 20px; padding-block: 16px; border-block: 1px solid var(--sh-line); color: var(--sh-price); font-size: min(2.25rem, 12cqi); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sh-page .sh-product-buy .sh-product-terms { margin-top: 12px; font-size: .875rem; line-height: 1.8; }
.sh-page .sh-product-buy .sh-product-specs { margin-top: 20px; font-size: .9375rem; line-height: 1.8; }
.sh-product-specs :is(p, ul) { margin: 0; padding: 0; list-style: none; }
.sh-page .sh-product-buy .wc-block-add-to-cart-form { margin-top: 24px; }
.sh-product-buy form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; }
.sh-product-buy form.cart .quantity input { box-sizing: border-box; width: 5em; min-height: 52px; font-size: 1rem; text-align: center; }
.sh-product-buy form.cart .single_add_to_cart_button { flex: 1 1 12em; min-height: 52px; padding: 12px 24px; border: 0; border-radius: var(--sh-radius-sm); background: var(--sh-cta); color: var(--sh-cta-ink); font-size: 1rem; font-weight: 700; }
.sh-product-buy form.cart .single_add_to_cart_button:hover { background: #8a2b1a; }
.sh-order-flow { padding: 20px 22px; border-left: 3px solid var(--sh-orange); border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0; background: var(--sh-surface); }
.sh-page .sh-product-buy .sh-order-flow { margin-top: 24px; }
.sh-order-flow-title { font-size: .9375rem; font-weight: 700; }
.sh-order-flow ol { margin: 10px 0 0; padding-left: 1.4em; font-size: .875rem; line-height: 1.8; }
.sh-order-flow li + li { margin-top: 4px; }
.sh-page .sh-product-buy .sh-product-consult { margin-top: 24px; font-size: .9375rem; }
.sh-product-consult-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sh-product-consult-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border-radius: var(--sh-radius-sm); font-weight: 700; text-decoration: none; }
.sh-product-line { background: var(--sh-green); color: var(--sh-green-ink); }
.sh-product-line:hover { background: #0f5f2d; }
.sh-product-tel { border: 1px solid var(--sh-ink); color: var(--sh-ink); font-variant-numeric: tabular-nums; }
.sh-product-hours { margin-top: 6px; font-size: .8125rem; }
.sh-product-consult .wpel-icon { display: none; }

.sh-page .sh-product-more { margin-top: 72px; }
.sh-product-more img { max-width: 100%; height: auto; }
.sh-product-more .woocommerce-Tabs-panel > h2:first-child { display: none; }
/* The descriptions came over from the store as plain HTML with their own
   headings; at the pages' heading sizes they shouted. */
.sh-page .sh-product-more .woocommerce-Tabs-panel :is(h1, h2) { font-size: 1.5rem; line-height: 1.5; }
.sh-page .sh-product-more .woocommerce-Tabs-panel h3 { font-size: 1.125rem; line-height: 1.6; }
.sh-page .sh-product-more .woocommerce-Tabs-panel h4 { font-size: 1rem; }
/* Paragraphs and headings sat at no margin, so 仕様 met the paragraph above it
   and the maker link met the table: the panel spaces its own flow. */
.sh-page .sh-product-more .woocommerce-Tabs-panel > * + * { margin-top: 16px; }
.sh-page .sh-product-more .woocommerce-Tabs-panel > * + :is(h2, h3) { margin-top: 40px; }
.sh-page .sh-product-more .woocommerce-Tabs-panel > h2:first-child + * { margin-top: 0; }
/* Their spec tables (RUX-UE2016W(A)) held their width at 200% text and ran
   197px past a 320px screen (R-5): the table keeps to the panel and its cells
   break where they must. */
.sh-product-more .woocommerce-Tabs-panel table { width: 100%; max-width: 100%; }
.sh-product-more .woocommerce-Tabs-panel :is(th, td) { overflow-wrap: anywhere; }

.sh-page .sh-product-related { margin-top: 72px; }
.sh-page .sh-product-related .sh-category-title h2 { font-size: 1.5rem; line-height: 1.5; }

/* Archives: category chips (the current one inverted, from the body class),
   the count and sort, then the cards on a grid. */
.sh-shop .sh-shop-list { padding-block: 48px 96px; }
.sh-shop-cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sh-shop-cats li { margin: 0; }
.sh-shop-cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid var(--sh-ink); border-radius: 999px; background: var(--sh-paper); color: var(--sh-ink); font-size: .875rem; font-weight: 700; text-decoration: none; }
.sh-shop-cats a:hover, .post-type-archive-product .sh-shop-cats a[data-cat="all"],
.term-24 .sh-shop-cats a[data-cat="24"], .term-22 .sh-shop-cats a[data-cat="22"], .term-21 .sh-shop-cats a[data-cat="21"],
.term-26 .sh-shop-cats a[data-cat="26"], .term-27 .sh-shop-cats a[data-cat="27"], .term-25 .sh-shop-cats a[data-cat="25"] { background: var(--sh-ink); color: var(--sh-paper); }
.sh-page .sh-shop-tools { align-items: center; gap: 12px 24px; margin-top: 28px; margin-bottom: 20px; font-size: .875rem; }
.sh-shop-tools .woocommerce-ordering { margin: 0; }
.sh-shop-tools select { min-height: 44px; padding: 6px 12px; font-size: .875rem; }
.sh-shop-tools .woocommerce-result-count { margin: 0; }
.sh-products.sh-products-grid .wc-block-product-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 24px; padding: 0; }
.sh-products.sh-products-grid .wc-block-product-template.is-flex-container > .wc-block-product { flex: none; width: auto; max-width: none; margin: 0; }
.sh-page .sh-products .sh-product-title { font-size: .97rem; line-height: 1.6; letter-spacing: .01em; }
.sh-shop-pagination { margin-top: 40px; gap: 8px; font-size: .9375rem; }
.sh-shop-pagination :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.sh-shop .sh-closing { margin-top: 72px; }

/* Cart, checkout, order received and my account. The page body is
   WooCommerce's own blocks (the cart and checkout blocks live in the pages'
   content, the order received parts in the template), so it sits outside
   .sh-page and keeps WooCommerce's type and spacing; only the band above it
   is this site's. The band carries the order's four stages, because payment
   is not taken here: the request ends at stage 2, the online survey and the
   quote with its payment link follow by email. */
.sh-store-body { margin-block: 0; padding-block: 40px 96px; }
.sh-store .sh-lede .sh-caption { font-size: .875rem; }
/* The cart and checkout render their own price pairs, outside the product
   card styles. Give the manufacturer and shop prices the same visible
   meaning here; the store plugin supplies their screen-reader labels. */
.sh-store .wc-block-components-product-price { display: block; }
.sh-store .wc-block-components-product-price del { display: block; font-size: .75rem; color: var(--sh-ink); }
.sh-store .wc-block-components-product-price del::before { content: "メーカー希望小売価格" / ""; display: inline-block; margin-inline-end: .4em; text-decoration: none; }
.sh-store .wc-block-components-product-price ins { display: block; text-decoration: none; }
.sh-store .wc-block-components-product-price ins::before { content: "当店販売価格" / ""; display: block; font-size: .75rem; font-weight: 600; color: var(--sh-ink); line-height: 1.6; }
.sh-store-steps { flex: none; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.sh-store-steps li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; word-break: auto-phrase; overflow-wrap: anywhere; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); background: var(--sh-paper); color: var(--sh-ink); }
.sh-store-steps span { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--sh-ink); border-radius: 50%; font-variant-numeric: tabular-nums; }
.sh-store-steps [aria-current] { border-color: var(--sh-ink); background: var(--sh-ink); color: var(--sh-paper); }
.sh-store-steps [aria-current] span { border-color: currentColor; }
/* The order received heading is WooCommerce's (it follows the order's status),
   sized as the other pages' titles. */
.sh-store-status p { margin: 0; font-size: .9375rem; }
/* The two buttons that move the order on take the product page's add-to-cart
   colour rather than the parent's button colour. */
.sh-store :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) { min-height: 56px; border-radius: var(--sh-radius-sm); background: var(--sh-cta); color: var(--sh-cta-ink); font-size: 1rem; font-weight: 700; }
.sh-store :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button):hover { background: #8a2b1a; color: var(--sh-cta-ink); }
.sh-store-received > .sh-order-flow { margin-bottom: 48px; }
/* The one shipping rate costs nothing: the price either includes delivery
   (送料込み, 基本工事費込み) or leaves it to the quote after the online survey
   (衣類乾燥機, whose rate the plugin sumika-honpo-store renames to say so).
   WooCommerce writes 無料 after the name, which is wrong for the second and
   says nothing the name does not for the first. Only that word goes; a rate
   with an amount shows it as a formatted price, which stays. */
.sh-store .wc-block-components-totals-shipping .wc-block-components-totals-item__value > strong,
.sh-store .wc-block-checkout__shipping-option--free { display: none; }
/* WooCommerce's notices quote the product name ("“RHS71W42J4RSTW”を…"), one
   unbroken word that held the notice wider than the screen at 200% text. */
:is(.sh-store, .sh-page) .wc-block-components-notice-banner__content { min-width: 0; overflow-wrap: anywhere; }
/* On a phone WooCommerce pins the cart's checkout button to the bottom of the
   screen once its place scrolls away, above everything (z-index 9999). That
   is where the site's own bar is fixed, which it then covered. The button
   stays where it is in the totals instead. */
.sh-store .wc-block-cart__submit-container--sticky { position: static; padding: 0; box-shadow: none; }
.sh-store .wc-block-cart__submit-container--sticky::before { content: none; }
/* WooCommerce's narrow cart line is a grid of 80px (photo) and 132px (name),
   with the total in a column of its own after them: 320px or more before the
   page's margins, so a 320px screen cut the total off. The name's column
   takes what is left instead. */
.sh-store :is(.is-mobile, .is-small, .is-medium) table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr); }
/* With the text enlarged on a phone, even that left the name a sliver beside
   a six-digit total, and the quantity's two buttons, at the parent's 2.75rem
   minimum each, ran out of the row. Measured in the body's own em, so it only
   happens when the text is large for the screen: the total goes under the
   name, and the buttons (−, ＋ and remove) keep the 44px target without
   scaling with the text. */
.sh-store-body > .sh-shell { container: sh-store / inline-size; }
@container sh-store (max-width: 12em) {
 .sh-store table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 2; grid-row: 2; justify-self: start; }
 .sh-store :is(.wc-block-components-quantity-selector__button, .wc-block-cart-item__remove-link) { min-inline-size: 44px; }
}
/* Model numbers (RUX-A2016B(A)-E+MC-145V(A)) and the totals table's cells may
   break anywhere: at 200% text on a 320px screen the table was 86px wider
   than the screen (R-5). */
.sh-store-received :is(td, th, .wc-block-order-confirmation-summary-list-item__value) { overflow-wrap: anywhere; }
.sh-store-received > .sh-product-consult { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sh-line); }

@media (max-width: 1000px) {
 .sh-product-page .sh-product-main { gap: 36px; }
 .sh-page .sh-product-buy .sh-product-name { font-size: 1.75rem; }
}
@media (max-width: 700px) {
 .sh-product-page { padding-top: 24px; }
 .sh-product-page .sh-product-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .sh-page .sh-product-buy .sh-product-name { font-size: 1.5rem; }
 .sh-page .sh-product-buy .sh-product-price { font-size: min(2rem, 12cqi); }
 .sh-product-consult-actions a { flex: 1 1 12em; }
 .sh-page .sh-product-more, .sh-page .sh-product-related { margin-top: 56px; }
 .sh-shop .sh-shop-list { padding-block: 32px 72px; }
 /* Two cards a row on a phone; one card at a time was a long scroll through
    the catalogue. 8.5rem keeps two from a 320px screen up, and falls back to
    one when the text is enlarged (8.5rem at 200% is wider than half the
    row). The narrow card gets less padding, a smaller price and up to four
    lines for the model number, which two lines cut short. */
 .sh-products.sh-products-grid .wc-block-product-template { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: 24px 12px; }
 .sh-products-grid .sh-product-info { padding: 14px 12px; gap: 8px; }
 .sh-products-grid .sh-product-price { font-size: 1.2rem; }
 .sh-products-grid .sh-product-price .woocommerce-price-suffix { white-space: nowrap; }
 .sh-page .sh-products-grid .sh-product-title { font-size: .875rem; -webkit-line-clamp: 4; line-clamp: 4; }
 .sh-store-body { padding-block: 28px 72px; }
 .sh-store-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 6px; }
 .sh-store-steps li { gap: 8px; padding: 8px 10px; }
 .sh-store-steps span { width: 24px; height: 24px; }
}
@media (forced-colors: active) {
 .sh-product-cats a, .sh-shop-cats a { border: 1px solid CanvasText; }
 /* The current stage loses its dark fill; a heavier border marks it. */
 .sh-store-steps li { border: 1px solid CanvasText; }
 .sh-store-steps [aria-current] { border-width: 4px; }
}