@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@500;600;700&display=swap");

/* SOTORINO components — every value reads a token from tokens.css; fallbacks only keep a page legible before tokens load. */

.st {
  --st-gutter: var(--space-6, 32px);
  font-family: var(--font-sans);
  color: var(--text, #242722);
  background: var(--bg, #fff);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  text-size-adjust: 100%;
}
/* resets carry zero specificity (:where) so component classes always win */
:where(.st) *, :where(.st) *::before, :where(.st) *::after { box-sizing: border-box; }
:where(.st) a { color: inherit; text-decoration: none; }
:where(.st) img { display: block; max-width: 100%; }
:where(.st) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.st) :where(h1, h2, h3, h4, p, figure, dl, dd) { margin: 0; }
:where(.st) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.st :focus-visible { outline: 2px solid var(--focus, #354536); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg, #fff); border-radius: 2px; }
.st :where(h1, h2, h3, h4, .st-card__title, .st-rank__title, .st-hero__title, .st-cta__title) { word-break: auto-phrase; text-wrap: pretty; }
.st-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-container { max-width: calc(var(--container, 1240px) + var(--st-gutter) * 2); margin: 0 auto; padding: 0 var(--st-gutter); }
.st-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--primary-dark); color: var(--on-dark); padding: 8px 16px; border-radius: var(--radius-md); font-size: 14px; }
.st-skip:focus { top: 8px; }

/* ---------- Image slot ---------- */
.st-img { width: 100%; height: 100%; object-fit: cover; background: var(--bg-soft); }
.st-img--empty { display: flex; align-items: center; justify-content: center; color: var(--muted-text); font-size: 12px; letter-spacing: .04em;
  background: repeating-linear-gradient(135deg, var(--bg-soft) 0 10px, var(--primary-soft) 10px 20px); }
.st-img--empty span { background: var(--bg); padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.st-media { display: block; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-soft); }
.st-media > .st-img { position: absolute; inset: 0; transition: transform .6s ease; }
.st-r-hero { aspect-ratio: 16 / 9; }
.st-r-32 { aspect-ratio: 3 / 2; }
.st-r-43 { aspect-ratio: 4 / 3; }
.st-r-52 { aspect-ratio: 5 / 2; }
.st-r-11 { aspect-ratio: 1 / 1; }
a:hover > .st-media > .st-img, a:focus-visible > .st-media > .st-img { transform: scale(1.04); }

/* ---------- Basics ---------- */
.st-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; color: var(--on-dark); background: var(--cat-outdoor); white-space: nowrap; }
.st-label--home { background: var(--cat-home); }
.st-label--property { background: var(--cat-property); }
.st-label--life { background: var(--cat-life); }
.st-pr { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted-text); background: var(--bg); line-height: 1; }
.st-pr--dark { color: var(--on-dark); border-color: var(--on-dark-muted); background: transparent; }
.st-date { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted-text); font-family: var(--font-sans); letter-spacing: .02em; }
.st-date .st-ico { font-size: 13px; }
.st-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; transition: background-color .2s, color .2s, border-color .2s; text-align: center; }
.st-btn .st-ico { font-size: 16px; }
.st-btn--primary { background: var(--primary-dark); color: var(--on-dark); }
.st-btn--primary:hover { background: var(--primary); }
.st-btn--accent { background: var(--accent); color: var(--on-accent); }
.st-btn--accent:hover { filter: brightness(1.06); }
.st-btn--outline { border: 1px solid var(--border-strong); color: var(--text); background: var(--bg); }
.st-btn--outline:hover { border-color: var(--primary); color: var(--primary-dark); }
.st-btn--ghost-light { border: 1px solid var(--on-dark-muted); color: var(--on-dark); }
.st-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.st-btn--block { width: 100%; }
.st-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; padding: 6px 0; }
.st-more .st-ico { font-size: 15px; transition: transform .2s; }
.st-more:hover { color: var(--primary-dark); }
.st-more:hover .st-ico { transform: translateX(3px); }
.st-tag { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 13px; color: var(--text-sub); background: var(--bg); }
.st-tag:hover { border-color: var(--primary); color: var(--primary-dark); }
.st-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Header ---------- */
.st-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); }
.st-header__top { display: flex; align-items: center; gap: var(--space-6); height: var(--header-h, 76px); }
.st-logo { display: inline-flex; align-items: center; flex: none; color: var(--primary-dark); font-family: var(--font-serif-en); font-size: 34px; font-weight: 500; letter-spacing: .16em; line-height: 1; padding: 6px 0; }
.st-logo img { height: 44px; width: auto; }
.st-search { position: relative; }
.st-search__field { display: flex; align-items: center; height: 42px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--border); padding: 0 6px 0 18px; transition: border-color .2s, background-color .2s; }
.st-search__field:focus-within { border-color: var(--primary); background: var(--bg); }
.st-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); height: 100%; outline: none; }
.st-search input::placeholder { color: var(--muted-text); }
.st-search__submit { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text); font-size: 19px; }
.st-search__submit:hover { background: var(--primary-soft); color: var(--primary-dark); }
.st-search__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 8px; max-height: 420px; overflow: auto; text-align: left; color: var(--text); }
.st-search__panel[hidden] { display: none; }
.st-search__count { font-size: 12px; color: var(--muted-text); padding: 4px 8px 8px; }
.st-search__item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: var(--radius-sm); }
.st-search__item:hover, .st-search__item:focus-visible { background: var(--bg-soft); }
.st-search__item .st-media { border-radius: var(--radius-sm); }
.st-search__item b { display: block; font-size: 13.5px; line-height: 1.55; font-weight: 700; }
.st-search__empty { padding: 12px 8px; font-size: 13px; color: var(--text-sub); }
.st-search mark { background: var(--primary-soft); color: inherit; padding: 0 1px; }
.st-header .st-search { margin-left: auto; width: 300px; }
.st-header__actions { display: flex; align-items: center; gap: 4px; }
.st-iconbtn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; min-height: 52px; padding: 4px 6px; border-radius: var(--radius-md); font-size: 10.5px; letter-spacing: .04em; color: var(--text); }
.st-iconbtn .st-ico { font-size: 24px; }
.st-iconbtn:hover { background: var(--bg-soft); }
.st-iconbtn__badge { position: absolute; top: 4px; right: 14px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--primary); color: var(--on-dark); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.st-iconbtn__badge[hidden] { display: none; }
.st-iconbtn--search { display: none; }
.st-nav { border-top: 1px solid transparent; }
.st-nav ul { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; }
.st-nav ul::-webkit-scrollbar { display: none; }
.st-nav a { position: relative; display: block; padding: 10px 14px 13px; font-size: 13.5px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; color: var(--text); }
.st-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform .25s; }
.st-nav a:hover::after, .st-nav a[aria-current="page"]::after { transform: scaleX(1); }
.st-nav a[aria-current="page"] { color: var(--primary-dark); font-weight: 700; }

/* favorites popover */
.st-pop { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; z-index: 60; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 16px; font-size: 13px; text-align: left; }
.st-pop[hidden] { display: none; }
.st-pop h2 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.st-pop p { color: var(--text-sub); line-height: 1.7; }
.st-pop li a { display: block; padding: 8px 0; border-top: 1px solid var(--border); font-weight: 500; line-height: 1.55; }
.st-pop li a:hover { color: var(--primary-dark); }
.st-actions-wrap { position: relative; }

/* drawer */
.st-drawer { position: fixed; inset: 0; z-index: 90; }
.st-drawer[hidden] { display: none; }
.st-drawer__scrim { position: absolute; inset: 0; background: var(--overlay); }
.st-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--bg); padding: 20px 24px 40px; overflow: auto; box-shadow: var(--shadow-pop); }
.st-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.st-drawer__head .st-logo { font-size: 24px; }
.st-drawer__title { font-family: var(--font-serif-en); font-size: 12px; letter-spacing: .2em; color: var(--wood-text); font-weight: 600; margin: 24px 0 8px; }
.st-drawer__list a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 500; }
.st-drawer__list a .st-ico { color: var(--muted); }
.st-drawer__purpose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-drawer__purpose a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--bg-soft); font-size: 13px; font-weight: 700; }
.st-drawer__purpose .st-ico { color: var(--primary); font-size: 18px; }
.st-drawer .st-search { margin-top: 8px; }

/* ---------- Hero slider ---------- */
.st-hero { position: relative; height: clamp(460px, 40vw, 580px); overflow: hidden; background: var(--primary-dark); color: var(--on-dark); isolation: isolate; }
.st-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.st-hero__slide.is-active { opacity: 1; z-index: 1; }
.st-hero__slide > .st-img { position: absolute; inset: 0; transform: scale(1.04); transition: transform 7s linear; }
.st-hero__slide.is-active > .st-img { transform: scale(1); }
.st-hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 24, 18, .66) 0%, rgba(20, 24, 18, .46) 34%, rgba(20, 24, 18, .08) 62%, rgba(20, 24, 18, 0) 100%), linear-gradient(0deg, rgba(20, 24, 18, .35) 0%, rgba(20, 24, 18, 0) 30%); }
.st-hero__inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 48px; }
.st-hero__title { font-family: var(--font-mincho); font-size: clamp(32px, 4vw, 54px); line-height: 1.38; font-weight: 600; letter-spacing: .04em; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.st-hero__lead { margin-top: 20px; font-size: 15px; line-height: 1.95; letter-spacing: .06em; font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.st-hero .st-search { margin-top: 28px; width: min(470px, 100%); }
.st-hero .st-search__field { height: 54px; background: var(--bg); border-color: transparent; padding-left: 22px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.st-hero .st-search__submit { width: 44px; height: 44px; font-size: 21px; }
.st-hero__pick { position: absolute; left: var(--st-gutter); bottom: 28px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--on-dark); max-width: 46%; }
.st-hero__pick b { white-space: nowrap; font-family: var(--font-serif-en); font-size: 12px; letter-spacing: .2em; font-weight: 600; padding-right: 10px; border-right: 1px solid var(--on-dark-muted); }
.st-hero__pick span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hero__pick:hover span { text-decoration-color: var(--on-dark); }
.st-hero__ctrl { position: absolute; right: var(--st-gutter); bottom: 24px; z-index: 4; display: flex; align-items: center; gap: 14px; }
.st-hero__arrow, .st-hero__pause { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 24, 18, .42); border: 1px solid rgba(255, 255, 255, .55); color: var(--on-dark); font-size: 18px; backdrop-filter: blur(4px); }
.st-hero__arrow:hover, .st-hero__pause:hover { background: rgba(20, 24, 18, .62); }
.st-hero__dots { display: flex; gap: 2px; }
.st-hero__dot { width: 24px; height: 44px; display: grid; place-items: center; }
.st-hero__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: width .3s, background-color .3s; }
.st-hero__dot[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--on-dark); }
.st-hero__count { font-family: var(--font-serif-en); font-size: 15px; letter-spacing: .08em; font-weight: 600; min-width: 56px; text-align: center; }

/* ---------- Category tiles ---------- */
.st-cats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 16px; padding: 24px 0 8px; }
.st-cat { display: block; text-align: center; border-radius: var(--radius-md); }
.st-cat .st-media { border-radius: var(--radius-sm); }
.st-cat__name { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.st-cat__sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted-text); line-height: 1.4; }
.st-cat:hover .st-cat__name { color: var(--primary-dark); }

/* ---------- Section ---------- */
.st-section { padding: var(--space-8) 0 0; }
.st-section--soft { background: var(--bg-soft); padding: var(--space-8) 0; margin-top: var(--space-8); }
.st-sechead { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.st-sechead__title { font-family: var(--font-mincho); font-size: 27px; font-weight: 600; letter-spacing: .05em; line-height: 1.4; }
.st-sechead__en { font-family: var(--font-serif-en); font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--wood-text); text-transform: uppercase; }
.st-sechead .st-more { margin-left: auto; }
.st-sechead--light .st-sechead__title, .st-sechead--light .st-sechead__en { color: var(--on-dark); }

/* ---------- Article cards ---------- */
.st-card { display: block; }
.st-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 8px; font-size: 15px; line-height: 1.65; font-weight: 700; letter-spacing: .02em; }
.st-card:hover .st-card__title { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.st-card__date { margin-top: 6px; }
.st-card__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.75; color: var(--text-sub); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.st-card--row { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: start; }
.st-card--row .st-media { border-radius: var(--radius-sm); }
.st-card--row .st-card__title { margin-top: 0; font-size: 14.5px; -webkit-line-clamp: 3; }
.st-card--row .st-label { position: absolute; top: 6px; left: 6px; z-index: 1; }

.st-card--feature { position: relative; height: 100%; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-dark); }
.st-card--feature .st-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.st-card--feature .st-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 24, 18, .82) 0%, rgba(20, 24, 18, .5) 38%, rgba(20, 24, 18, 0) 66%); }
.st-card--feature .st-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px 26px; }
.st-card--feature .st-card__title { font-family: var(--font-mincho); font-size: 26px; line-height: 1.55; font-weight: 600; margin-top: 12px; -webkit-line-clamp: 2; letter-spacing: .03em; }
.st-card--feature:hover .st-card__title { color: var(--on-dark); }
.st-card--feature .st-card__desc { color: var(--on-dark-muted); font-size: 14px; }
.st-card--feature .st-date { color: var(--on-dark-muted); margin-top: 10px; }

.st-card--mini { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.st-card--mini .st-media { border-radius: var(--radius-sm); }
.st-card--mini .st-card__title { margin: 0; font-size: 13px; line-height: 1.6; font-weight: 500; -webkit-line-clamp: 3; }

/* ---------- Feature (top) ---------- */
.st-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 260px; gap: 28px; }
.st-feature__list { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.st-feature__list > li + li { padding-top: 18px; border-top: 1px solid var(--border); }
.st-feature__side { display: flex; flex-direction: column; gap: 16px; }

/* CTA banner */
.st-cta { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-dark); background: var(--primary-dark); min-height: 230px; }
.st-cta .st-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.st-cta .st-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 48, 37, .45) 0%, rgba(36, 48, 37, .9) 58%); }
.st-cta__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: inherit; padding: 22px; }
.st-cta__pr { position: absolute; top: 14px; right: 14px; z-index: 2; }
.st-cta__title { font-family: var(--font-mincho); font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; }
.st-cta__text { margin-top: 6px; font-size: 12.5px; color: var(--on-dark-muted); line-height: 1.7; }
.st-cta .st-btn { margin-top: 16px; }
.st-catalog { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.st-catalog__title { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.st-catalog .st-btn { margin-top: 10px; padding: 0 14px; }
.st-catalog .st-media { border-radius: var(--radius-sm); }

/* ---------- Main + side ---------- */
.st-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar, 300px); gap: 48px; align-items: start; }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-side { display: flex; flex-direction: column; gap: 24px; }
.st-box { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); padding: 22px 20px; box-shadow: var(--shadow-card); }
.st-box__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-mincho); font-size: 18px; font-weight: 600; letter-spacing: .05em; margin-bottom: 14px; line-height: 1.5; }
.st-box__title .st-ico { color: var(--primary); font-size: 20px; }
.st-box__note { font-size: 11.5px; color: var(--muted-text); margin-top: 12px; line-height: 1.6; }

/* ranking */
.st-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 14px; }
.st-tabs button { height: 34px; border-radius: 3px; font-size: 12.5px; font-weight: 500; color: var(--text-sub); }
.st-tabs button[aria-selected="true"] { background: var(--primary); color: var(--on-dark); font-weight: 700; }
.st-rank li + li { border-top: 1px solid var(--border); }
.st-rank a { display: grid; grid-template-columns: 26px 64px 1fr; gap: 12px; align-items: center; padding: 11px 0; }
.st-rank .st-media { border-radius: var(--radius-sm); }
.st-rank__no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); font-family: var(--font-serif-en); font-size: 17px; font-weight: 600; color: var(--text); }
.st-rank__no--1 { background: var(--rank-1); color: var(--on-accent); }
.st-rank__no--2 { background: var(--rank-2); }
.st-rank__no--3 { background: var(--rank-3); }
.st-rank__title { font-size: 13px; line-height: 1.6; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.st-rank a:hover .st-rank__title { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.st-rank [role="tabpanel"][hidden] { display: none; }

/* guide link card */
.st-guide { display: grid; grid-template-columns: 1fr 40px; gap: 12px; align-items: center; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow-card); }
.st-guide__title, .st-guide__text, .st-also__title, .st-cta__title, .st-cta__text { display: block; }
.st-guide__eyebrow { display: flex; align-items: center; gap: 6px; font-family: var(--font-serif-en); font-size: 12px; letter-spacing: .2em; font-weight: 600; color: var(--wood-text); }
.st-guide__title { font-family: var(--font-mincho); font-size: 18px; font-weight: 600; line-height: 1.5; margin-top: 4px; letter-spacing: .04em; }
.st-guide__text { font-size: 12.5px; color: var(--text-sub); margin-top: 6px; line-height: 1.7; }
.st-guide__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 18px; transition: background-color .2s, color .2s; }
.st-guide:hover .st-guide__go { background: var(--primary-dark); color: var(--on-dark); border-color: var(--primary-dark); }

.st-grid-more { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- Pillar guide band ---------- */
.st-pillar { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: start; }
.st-pillar__lead .st-sechead__en { display: block; margin-bottom: 8px; }
.st-pillar__title { font-family: var(--font-mincho); font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; }
.st-pillar__text { margin-top: 16px; font-size: 14.5px; line-height: 1.95; color: var(--text-sub); }
.st-pillar__lead .st-btn { margin-top: 24px; }

.st-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: ch; }
.st-chapter { display: grid; grid-template-columns: 36px 1fr 18px; gap: 6px 10px; align-items: start; height: 100%; padding: 18px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .2s; }
.st-chapter:hover { border-color: var(--primary); }
.st-chapter__no { font-family: var(--font-serif-en); font-size: 22px; font-weight: 600; color: var(--primary); line-height: 1.1; }
.st-chapter__title { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; }
.st-chapter__desc { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-sub); line-height: 1.65; }
.st-chapter > .st-ico { color: var(--muted); font-size: 18px; margin-top: 2px; }
.st-chapter:hover > .st-ico { color: var(--primary); }

/* ---------- Purpose band ---------- */
.st-section--soft + .st-purpose { margin-top: 0; }
.st-purpose { position: relative; margin-top: var(--space-8); padding: 56px 0 60px; color: var(--on-dark); overflow: hidden; isolation: isolate; }
.st-purpose > .st-img { position: absolute; inset: 0; z-index: -2; filter: blur(2px); transform: scale(1.04); }
.st-purpose::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 33, 26, .7); }
.st-purpose__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.st-purpose__item { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 18px; border-radius: var(--radius-md); background: var(--bg); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.5; transition: transform .2s, box-shadow .2s; }
.st-purpose__item .st-ico { font-size: 28px; color: var(--primary); stroke-width: 1.4; }
.st-purpose__item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.st-purpose__item small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted-text); }

/* ---------- Footer ---------- */
.st-main--flush + .st-footer { margin-top: 0; }
.st-sidelist li + li { border-top: 1px solid var(--border); }
.st-sidelist li > a { padding: 11px 0; }
.st-footer { margin-top: var(--space-9); background: var(--primary-dark); color: var(--on-dark); padding: 44px 0 24px; font-size: 13.5px; }
.st-footer .st-logo { color: var(--on-dark); font-size: 30px; }
.st-footer__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; }
.st-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.st-footer__about { margin-top: 16px; color: var(--on-dark-muted); line-height: 1.9; font-size: 13px; max-width: 340px; }
.st-footer h2 { font-family: var(--font-serif-en); font-size: 12.5px; letter-spacing: .2em; font-weight: 600; color: var(--on-dark-muted); margin-bottom: 12px; }
.st-footer li a { display: inline-block; padding: 3px 0; font-size: 13px; color: var(--on-dark); }
.st-footer li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 12px; color: var(--on-dark-muted); }
.st-footer :focus-visible { outline-color: var(--on-dark); box-shadow: none; }

/* ---------- Breadcrumb ---------- */
.st-bc { padding: 14px 0; font-size: 12.5px; color: var(--muted-text); border-bottom: 1px solid var(--border); }
.st-bc ol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.st-bc li { display: inline-flex; align-items: center; gap: 6px; }
.st-bc li + li::before { content: ""; width: 6px; height: 6px; border-right: 1px solid var(--muted); border-top: 1px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
.st-bc a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
.st-bc a:hover { color: var(--primary-dark); text-decoration: underline; }
.st-bc [aria-current] { color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* ---------- Article layout ---------- */
.st-article-wrap { display: grid; grid-template-columns: minmax(0, var(--article-main, 760px)) var(--sidebar, 300px); justify-content: space-between; gap: 56px; padding-top: 28px; align-items: start; }
.st-ahead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.st-ahead__title { margin-top: 14px; font-family: var(--font-mincho); font-size: 34px; line-height: 1.5; font-weight: 600; letter-spacing: .02em; }
.st-ahead__lead { margin-top: 16px; font-size: 15px; line-height: 1.95; color: var(--text-sub); }
.st-ahead__byline { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--muted-text); }
.st-ahead__byline a { color: var(--text-sub); text-decoration: underline; text-underline-offset: 3px; }
.st-ahead__hero { margin-top: 24px; }
.st-ahead__hero .st-media { border-radius: var(--radius-md); }
.st-ahead__hero figcaption { margin-top: 8px; font-size: 12px; color: var(--muted-text); }

.st-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.st-share__list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-share__label { font-size: 12.5px; color: var(--muted-text); margin-right: 4px; letter-spacing: .06em; }
.st-share__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--text); }
.st-share__btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.st-share__btn .st-ico { font-size: 15px; }
.st-fav[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.st-fav[aria-pressed="true"] .st-ico { fill: currentColor; }
.st-live { font-size: 12px; color: var(--primary-dark); min-height: 1em; }

/* summary + toc */
.st-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; margin-top: 28px; }
.st-summary { background: var(--bg-soft); border-radius: var(--radius-md); padding: 22px 24px; }
.st-summary__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; letter-spacing: .04em; }
.st-summary li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 6px 0; font-size: 14px; line-height: 1.7; }
.st-summary li .st-ico { font-size: 20px; color: var(--on-dark); background: var(--primary); border-radius: 50%; padding: 3px; stroke-width: 2.4; margin-top: 1px; }
.st-toc { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.st-toc__head { display: flex; align-items: center; justify-content: space-between; }
.st-toc__title { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.st-toc__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-text); padding: 6px 4px; }
.st-toc__toggle .st-ico { transition: transform .2s; }
.st-toc__toggle[aria-expanded="false"] .st-ico { transform: rotate(-90deg); }
.st-toc ol { margin-top: 8px; }
.st-toc ol[hidden] { display: none; }
.st-toc li a { display: grid; grid-template-columns: 30px 1fr; gap: 6px; padding: 6px 0; font-size: 13.5px; line-height: 1.6; border-radius: 2px; }
.st-toc li a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.st-toc__no { font-family: var(--font-serif-en); font-weight: 600; color: var(--primary); font-size: 14px; }
.st-toc li li a { padding: 3px 0 3px 36px; grid-template-columns: 1fr; font-size: 12.5px; color: var(--text-sub); }
.st-toc a.is-current { color: var(--primary-dark); font-weight: 700; }

/* body */
.st-body { font-size: 16px; line-height: 1.95; letter-spacing: .02em; }
.st-body > * + * { margin-top: 1.4em; }
.st-body p a, .st-body li a.st-inline, .st-a { color: var(--primary-dark); text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; }
.st-body p a:hover, .st-a:hover { text-decoration-thickness: 2px; }
.st-body strong, .st-mark { font-weight: 700; background: linear-gradient(transparent 62%, var(--primary-soft) 62%); }
.st-h2 { position: relative; margin-top: var(--space-8) !important; padding: 2px 0 2px 18px; font-family: var(--font-mincho); font-size: 26px; line-height: 1.55; font-weight: 600; letter-spacing: .04em; scroll-margin-top: 96px; }
.st-h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 2px; background: var(--primary); }
.st-h3 { display: flex; align-items: baseline; gap: 10px; margin-top: var(--space-7) !important; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 19px; line-height: 1.6; font-weight: 700; scroll-margin-top: 96px; }
.st-h3::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--primary); border-radius: 2px; transform: translateY(-2px); }
.st-ul li { position: relative; padding-left: 1.3em; }
.st-ul li + li { margin-top: .4em; }
.st-ul li::before { content: ""; position: absolute; left: .3em; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

.st-icongrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-icongrid__item .st-media { border-radius: var(--radius-sm); }
.st-icongrid__head { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.st-icongrid__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 18px; }
.st-icongrid__desc { margin-top: 6px; font-size: 13px; line-height: 1.75; color: var(--text-sub); }

.st-typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.st-typegrid .st-media { border-radius: var(--radius-sm); }
.st-typegrid__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 700; }
.st-typegrid__desc { margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--text-sub); }
.st-typegrid a:hover .st-typegrid__name { color: var(--primary-dark); }
.st-typegrid__name .st-ico { color: var(--muted); }

/* table */
.st-table { position: relative; }
.st-table__scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.st-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.st-table caption { caption-side: top; text-align: left; font-size: 15px; font-weight: 700; padding: 0 0 10px; }
.st-table th, .st-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.st-table thead th { background: var(--bg-soft); font-size: 13px; font-weight: 700; white-space: nowrap; }
.st-table tbody th { font-weight: 700; white-space: nowrap; background: var(--bg); position: sticky; left: 0; z-index: 1; }
.st-table tbody tr:last-child > * { border-bottom: 0; }
.st-table tr.is-pick > * { background: var(--primary-soft); }
.st-table__mark { display: inline-block; min-width: 1.5em; font-weight: 700; color: var(--primary-dark); }
.st-table__note { margin-top: 8px; font-size: 12px; color: var(--muted-text); line-height: 1.7; }
.st-table__hint { display: none; font-size: 12px; color: var(--muted-text); margin-bottom: 6px; }

/* stats */
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.st-stat { background: var(--bg); padding: 18px 20px; }
.st-stat__label { font-size: 12.5px; color: var(--muted-text); line-height: 1.5; }
.st-stat__value { margin-top: 6px; font-family: var(--font-mincho); font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--primary-dark); }
.st-stat__value small { font-family: var(--font-sans); font-size: 13px; font-weight: 500; margin-left: 2px; color: var(--text-sub); }
.st-stat__note { margin-top: 4px; font-size: 12px; color: var(--text-sub); line-height: 1.6; }

/* notes */
.st-note { border-radius: var(--radius-md); padding: 18px 22px; background: var(--primary-soft); font-size: 15px; line-height: 1.9; }
.st-note__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.st-note__head .st-ico { font-size: 20px; }
.st-note--caution { background: var(--caution-soft); }
.st-note--caution .st-note__head { color: var(--caution); }
.st-note--info { background: var(--bg-soft); }
.st-note--info .st-note__head { color: var(--text); }
.st-note .st-ul li::before { background: currentColor; }

/* steps */
.st-steps { counter-reset: step; }
.st-steps > li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 24px; }
.st-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 4px; width: 2px; background: var(--border); }
.st-steps__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-dark); color: var(--on-dark); font-family: var(--font-serif-en); font-size: 18px; font-weight: 600; }
.st-steps__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.6; padding-top: 9px; }
.st-steps__time { font-size: 12px; font-weight: 500; color: var(--primary-dark); background: var(--primary-soft); padding: 2px 8px; border-radius: var(--radius-sm); }
.st-steps__desc { margin-top: 4px; font-size: 14px; line-height: 1.85; color: var(--text-sub); }

/* pros cons */
.st-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-pc__col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; }
.st-pc__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--primary-dark); }
.st-pc__col--con .st-pc__head { color: var(--caution); }
.st-pc__head .st-ico { font-size: 20px; }
.st-pc li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.75; }
.st-pc li .st-ico { margin-top: 5px; font-size: 14px; color: var(--primary); stroke-width: 2.2; }
.st-pc__col--con li .st-ico { color: var(--caution); }

/* checklist */
.st-check { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 20px; }
.st-check__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--border); }
.st-check__count { font-size: 12.5px; font-weight: 500; color: var(--primary-dark); }
.st-check label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 12px 0; font-size: 14.5px; line-height: 1.7; cursor: pointer; }
.st-check li + li label { border-top: 1px dashed var(--border); }
.st-check input { appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1.5px solid var(--border-strong); border-radius: 4px; display: grid; place-items: center; cursor: pointer; background: var(--bg); }
.st-check input:checked { background: var(--primary); border-color: var(--primary); }
.st-check input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.st-check input:checked + span { color: var(--text-sub); text-decoration: line-through; text-decoration-color: var(--muted); }
.st-check small { display: block; color: var(--text-sub); font-size: 13px; }

/* faq */
.st-faq details { border-bottom: 1px solid var(--border); }
.st-faq details:first-child { border-top: 1px solid var(--border); }
.st-faq summary { display: grid; grid-template-columns: 30px 1fr 20px; gap: 10px; align-items: start; padding: 16px 0; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 700; line-height: 1.65; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary .st-ico { margin-top: 4px; color: var(--muted); transition: transform .2s; font-size: 18px; }
.st-faq details[open] summary .st-ico { transform: rotate(180deg); }
.st-faq__q, .st-faq__a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-serif-en); font-weight: 600; font-size: 16px; line-height: 1; }
.st-faq__q { background: var(--primary-dark); color: var(--on-dark); }
.st-faq__a { background: var(--primary-soft); color: var(--primary-dark); }
.st-faq__body { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 0 30px 18px 0; font-size: 14.5px; line-height: 1.9; color: var(--text-sub); }

/* inline related */
.st-also { position: relative; display: grid; grid-template-columns: 136px 1fr 20px; gap: 16px; align-items: center; padding: 22px 18px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-top: 2em !important; transition: border-color .2s; }
.st-also:hover { border-color: var(--primary); }
.st-also__tag { position: absolute; top: -11px; left: 14px; padding: 0 8px; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 4px; line-height: 22px; }
.st-also .st-media { border-radius: var(--radius-sm); }
.st-also__title { font-size: 15px; font-weight: 700; line-height: 1.6; }
.st-also__desc { margin-top: 4px; font-size: 12.5px; color: var(--text-sub); line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.st-also > .st-ico { color: var(--muted); font-size: 20px; }
.st-also:hover > .st-ico { color: var(--primary); }

/* gallery */
.st-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-gallery figcaption { margin-top: 10px; }
.st-gallery__title { font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.st-gallery__spec { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--muted-text); }

/* wrap-up + next steps */
.st-wrap { background: var(--bg-soft); border-radius: var(--radius-md); padding: 26px 28px; }
.st-wrap__title { font-family: var(--font-mincho); font-size: 20px; font-weight: 600; letter-spacing: .06em; margin-bottom: 10px; }
.st-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-next a { display: flex; flex-direction: column; height: 100%; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); transition: border-color .2s; }
.st-next a:hover { border-color: var(--primary); }
.st-next__step { font-family: var(--font-serif-en); font-size: 12px; letter-spacing: .2em; font-weight: 600; color: var(--wood-text); }
.st-next__title { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.st-next__title .st-ico { color: var(--primary); font-size: 20px; }
.st-next__desc { margin-top: 6px; font-size: 12.5px; color: var(--text-sub); line-height: 1.7; flex: 1; }
.st-next__go { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 4px; }

/* products (PR) */
.st-products__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-products__title { font-size: 18px; font-weight: 700; }
.st-products__disc { margin-top: 6px; font-size: 12px; color: var(--muted-text); line-height: 1.7; }
.st-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.st-product { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; background: var(--bg); }
.st-product .st-media { border-radius: var(--radius-sm); }
.st-product__name { margin-top: 12px; font-size: 14.5px; font-weight: 700; line-height: 1.55; }
.st-product__for { margin-top: 6px; font-size: 12.5px; color: var(--text-sub); line-height: 1.65; }
.st-product__spec { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; line-height: 1.6; }
.st-product__spec dt { color: var(--muted-text); }
.st-product__price { margin-top: 10px; font-size: 13px; font-weight: 700; }
.st-product__price small { display: block; font-weight: 400; font-size: 11px; color: var(--muted-text); }
.st-product__shops { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; }

/* contractor CTA */
.st-pro { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--primary-dark); color: var(--on-dark); }
.st-pro__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--on-dark-muted); letter-spacing: .06em; }
.st-pro__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.st-pro ul { margin-top: 12px; display: grid; gap: 4px; }
.st-pro li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.st-pro li .st-ico { color: var(--accent); font-size: 18px; stroke-width: 2.2; }
.st-pro__side { display: grid; gap: 8px; }
.st-pro__side .st-a { color: var(--on-dark); text-decoration-color: var(--on-dark-muted); font-size: 12.5px; text-align: center; padding: 4px; }
.st-pro :focus-visible { outline-color: var(--on-dark); box-shadow: none; }

/* author */
.st-author { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.st-author__avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-family: var(--font-serif-en); font-size: 22px; font-weight: 600; }
.st-author__role { font-size: 12px; color: var(--muted-text); }
.st-author__name { font-size: 15.5px; font-weight: 700; }
.st-author__bio { margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--text-sub); }
.st-author__links { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; }
.st-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-text); line-height: 1.8; }
.st-sources b { color: var(--text-sub); }

/* topic cluster */
.st-cluster { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.st-cluster__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.st-cluster__head .st-ico { color: var(--primary); font-size: 22px; }
.st-cluster__eyebrow { font-size: 11.5px; color: var(--muted-text); letter-spacing: .06em; }
.st-cluster__title { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.st-cluster__title a:hover { color: var(--primary-dark); text-decoration: underline; }
.st-cluster__progress { margin-left: auto; font-family: var(--font-serif-en); font-size: 15px; font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
.st-cluster ol { padding: 8px 20px 12px; }
.st-cluster li a, .st-cluster li > span { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; font-size: 13.5px; line-height: 1.55; }
.st-cluster li + li > * { border-top: 1px dashed var(--border); }
.st-cluster li a:hover { color: var(--primary-dark); }
.st-cluster__no { font-family: var(--font-serif-en); font-size: 15px; font-weight: 600; color: var(--muted-text); }
.st-cluster li [aria-current] { font-weight: 700; color: var(--primary-dark); }
.st-cluster li [aria-current] .st-cluster__no { color: var(--primary); }
.st-cluster__now { font-size: 10.5px; font-weight: 700; color: var(--on-dark); background: var(--primary); padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap; }
.st-cluster--compact ol { padding: 4px 16px 10px; }
.st-cluster--compact .st-cluster__head { padding: 14px 16px; }

/* article footer lists */
.st-endlist li + li { border-top: 1px solid var(--border); }
.st-endlist a { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 0; font-size: 14.5px; font-weight: 500; line-height: 1.6; }
.st-endlist a:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.st-endhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.st-endhead h2 { font-family: var(--font-mincho); font-size: 21px; font-weight: 600; letter-spacing: .05em; }
.st-endhead .st-more { margin-left: auto; }
.st-block { margin-top: var(--space-7); }

/* sidebar */
.st-sticky { position: sticky; top: calc(var(--header-h, 76px) + 60px); }
.st-consult { padding: 22px 20px; border-radius: var(--radius-md); background: var(--bg-soft); }
.st-consult__title { font-family: var(--font-mincho); font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.st-consult ul { margin: 12px 0 16px; display: grid; gap: 6px; }
.st-consult li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.st-consult li .st-ico { font-size: 18px; color: var(--on-dark); background: var(--primary); border-radius: 50%; padding: 3px; stroke-width: 2.4; }
.st-minitoc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--border); font-size: 13px; line-height: 1.55; color: var(--text-sub); }
.st-minitoc a:hover { color: var(--primary-dark); }
.st-minitoc a.is-current { border-left-color: var(--primary); color: var(--primary-dark); font-weight: 700; }

/* ---------- Category hub ---------- */
.st-cathero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding: 36px 0 8px; }
.st-cathero__eyebrow { font-family: var(--font-serif-en); font-size: 13px; letter-spacing: .24em; font-weight: 600; color: var(--wood-text); }
.st-cathero__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 40px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; }
.st-cathero__text { margin-top: 16px; font-size: 15px; line-height: 1.95; color: var(--text-sub); }
.st-cathero .st-media { border-radius: var(--radius-lg); }
.st-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.st-subnav a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--border); font-size: 13px; font-weight: 500; }
.st-subnav a:hover { border-color: var(--primary); color: var(--primary-dark); }
.st-subnav .st-ico { color: var(--primary); }
.st-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.st-journey a { position: relative; display: block; padding: 24px 28px; background: var(--bg); transition: background-color .2s; }
.st-journey a + a { border-left: 1px solid var(--border); }
.st-journey a:hover { background: var(--bg-soft); }
.st-journey__step { font-family: var(--font-serif-en); font-size: 13px; letter-spacing: .2em; font-weight: 600; color: var(--wood-text); }
.st-journey__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 20px; font-weight: 600; line-height: 1.5; }
.st-journey__desc { margin-top: 6px; font-size: 13px; color: var(--text-sub); line-height: 1.75; }
.st-journey__links { margin-top: 12px; display: grid; gap: 4px; font-size: 13px; }
.st-journey__links span { display: flex; align-items: center; gap: 6px; color: var(--primary-dark); font-weight: 500; }
.st-topic { padding-top: var(--space-7); scroll-margin-top: 96px; }
.st-topic + .st-topic { margin-top: var(--space-7); border-top: 1px solid var(--border); }
.st-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-compare a { display: grid; grid-template-columns: 52px 1fr 20px; gap: 16px; align-items: center; padding: 22px 24px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); }
.st-compare a:hover { border-color: var(--primary); }
.st-compare__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 24px; }
.st-compare b { display: block; font-size: 16px; line-height: 1.5; }
.st-compare small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-sub); line-height: 1.6; }
.st-compare a > .st-ico:last-child { color: var(--muted); }


/* ---------- Top page: sizes fitted to the reference design (measured at 1024px, set here for 1280px) ---------- */
.st-r-card { aspect-ratio: 165 / 95; }
.st-r-row { aspect-ratio: 138 / 85; }
.st-logo img { height: 52px; width: auto; }
.st-header__top { height: 70px; }
.st-nav a { padding: 4px 14px 11px; font-size: 13px; }
.st-feature .st-card--feature .st-card__desc { max-width: 430px; }
.st-card__title br, .st-rank__title br { display: block; }

/* hero */
.st-hero { height: clamp(400px, 34.5vw, 520px); }
.st-hero__shade { background: linear-gradient(90deg, rgba(20, 24, 18, .5) 0%, rgba(20, 24, 18, .32) 32%, rgba(20, 24, 18, .04) 58%, rgba(20, 24, 18, 0) 100%); }
.st-hero__inner { justify-content: flex-start; padding-top: clamp(36px, 3.6vw, 56px); padding-bottom: 0; padding-left: calc(var(--st-gutter) + 38px); }
.st-hero__title { font-size: clamp(40px, 4.06vw, 60px); line-height: 1.38; font-weight: 500; letter-spacing: .06em; }
.st-hero__lead { margin-top: 18px; font-size: 15.5px; line-height: 1.8; letter-spacing: .08em; }
.st-hero .st-search { margin-top: 26px; width: 490px; }
.st-hero .st-search__field { height: 44px; padding-left: 20px; }
.st-hero .st-search input { font-size: 13px; }
.st-hero .st-search__submit { width: 38px; height: 38px; font-size: 22px; }
.st-hero__arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 36px; height: 36px; font-size: 17px; }
.st-hero__arrow--prev { left: 18px; }
.st-hero__arrow--next { right: 18px; }
.st-hero__ctrl { right: var(--st-gutter); bottom: 22px; gap: 10px; }
.st-hero__dot { width: 16px; height: 32px; }
.st-hero__dot::before { width: 7px; height: 7px; }
.st-hero__dot[aria-current="true"]::before { width: 7px; border-radius: 50%; }
.st-hero__count { font-size: 14px; min-width: 50px; }
.st-hero__pause { width: 30px; height: 30px; font-size: 13px; }

/* category tiles */
.st-cats { gap: 14px; padding: 22px 0 0; }
.st-cat__name { margin-top: 9px; font-size: 13.5px; font-weight: 500; letter-spacing: .04em; }
.st-cat__sub { margin-top: 2px; font-size: 11px; letter-spacing: .04em; }

/* section heads */
.st-top-feature { padding-top: 40px; }
.st-top-new { padding-top: 44px; }
.st-sechead { gap: 14px; margin-bottom: 18px; }
.st-sechead__title { font-size: 27px; font-weight: 500; letter-spacing: .06em; }
.st-sechead__en { font-size: 11.5px; letter-spacing: .2em; color: var(--muted-text); }
.st-more { font-size: 12.5px; }

/* feature */
.st-feature { grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 260px); gap: clamp(20px, 2.5vw, 32px); align-items: start; }
.st-feature__body { display: grid; grid-template-columns: minmax(0, 556fr) minmax(0, 369fr); gap: 16px; height: clamp(330px, 30.5vw, 400px); }
.st-feature__body > div { height: 100%; }
.st-card--feature { min-height: 0; height: 100%; border-radius: var(--radius-md); }
.st-card--feature .st-media::after { background: linear-gradient(0deg, rgba(20, 24, 18, .78) 0%, rgba(20, 24, 18, .45) 42%, rgba(20, 24, 18, 0) 68%); }
.st-card--feature .st-card__body { padding: 0 22px 20px; }
.st-card--feature .st-card__title { margin-top: 10px; font-size: 26px; line-height: 1.5; font-weight: 500; letter-spacing: .05em; }
.st-card--feature .st-card__desc { margin-top: 10px; font-size: 13.5px; line-height: 1.7; }
.st-card--feature .st-date { margin-top: 8px; font-size: 12px; }
.st-feature__list { height: 100%; justify-content: space-between; gap: 0; }
.st-feature__list > li + li { padding-top: 0; border-top: 0; }
.st-card--row { grid-template-columns: 138px 1fr; gap: 16px; align-items: center; }
.st-card--row .st-card__title { font-size: 14px; line-height: 1.6; font-weight: 700; -webkit-line-clamp: 3; }
.st-card--row .st-card__date { margin-top: 12px; }
.st-card--row .st-label { top: 5px; left: 5px; height: 18px; font-size: 10.5px; }
.st-feature__side { gap: 14px; }
.st-feature__side .st-guide { padding: 14px 16px; }
.st-feature__side .st-guide__title { font-size: 15px; }
.st-feature__side .st-guide__text { margin-top: 6px; font-size: 11.5px; }
.st-cta { min-height: 0; height: 210px; border-radius: var(--radius-md); }
.st-cta .st-media::after { background: linear-gradient(180deg, rgba(30, 38, 30, .15) 0%, rgba(30, 38, 30, .55) 45%, rgba(30, 38, 30, .78) 100%); }
.st-cta__body { justify-content: center; align-items: center; text-align: center; padding: 40px 18px 18px; }
.st-cta__title { font-size: clamp(22px, 2vw, 26px); font-weight: 500; line-height: 1.45; letter-spacing: .08em; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.st-cta__text { margin-top: 6px; font-size: 11.5px; color: var(--on-dark); letter-spacing: .04em; }
.st-cta .st-btn { margin-top: 14px; width: 170px; min-height: 36px; font-size: 13px; }
.st-btn--accent { color: var(--on-dark); }
.st-catalog { grid-template-columns: minmax(0, 1fr) 80px; gap: 8px; height: 104px; padding: 14px 12px 14px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.st-catalog__title { font-size: 12.5px; letter-spacing: 0; font-weight: 500; line-height: 1.6; }
.st-catalog .st-btn { margin-top: 8px; min-height: 30px; padding: 0 12px; font-size: 11.5px; font-weight: 500; gap: 6px; }
.st-catalog .st-btn .st-ico { font-size: 13px; }
.st-catalog .st-media { aspect-ratio: auto; height: 76px; }

/* new articles + ranking */
.st-split--top { grid-template-columns: minmax(0, 1fr) clamp(260px, 25vw, 319px); gap: clamp(20px, 2.2vw, 28px); }
.st-side--top .st-cta { height: 180px; }
.st-top-new .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.st-card__meta { margin-top: 10px; }
.st-card__title { margin-top: 6px; font-size: 15px; line-height: 1.6; font-weight: 500; -webkit-line-clamp: 2; }
.st-card__date { margin-top: 4px; }
.st-card__date .st-date { font-size: 11.5px; }
.st-side--top { gap: 16px; }
.st-side--top .st-box { padding: 18px 20px 14px; }
.st-box__title { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.st-tabs { padding: 0; border-radius: 3px; margin-bottom: 10px; }
.st-tabs button { height: 30px; font-size: 12px; }
.st-rank a { grid-template-columns: 24px 56px 1fr; gap: 12px; padding: 5px 0; }
.st-rank li + li { border-top: 0; }
.st-rank .st-media { aspect-ratio: 56 / 46; }
.st-rank__no { width: 24px; height: 26px; border-radius: 2px; font-size: 18px; }
.st-rank__no--1, .st-rank__no--2, .st-rank__no--3 { color: var(--on-dark); font-size: 16px; }
.st-rank__no--1 { background: var(--rank-1); }
.st-rank__no--2 { background: var(--rank-2); }
.st-rank__no--3 { background: var(--rank-3); }
.st-rank__title { font-size: 12.5px; line-height: 1.55; -webkit-line-clamp: 2; }
.st-box__note { margin-top: 6px; font-size: 10.5px; }
.st-guide { grid-template-columns: 30px minmax(0, 1fr) 38px; grid-template-areas: "icon title go" "text text go"; gap: 2px 10px; padding: 18px 20px; border-radius: var(--radius-md); }
.st-guide__icon { grid-area: icon; color: var(--primary); font-size: 30px; line-height: 1; align-self: start; }
.st-guide__icon .st-ico { stroke-width: 1.4; }
.st-guide__title { grid-area: title; margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.5; }
.st-guide__text { grid-area: text; margin-top: 8px; font-size: 12px; line-height: 1.75; }
.st-guide__go { grid-area: go; align-self: center; width: 36px; height: 36px; font-size: 16px; }

/* purpose band */
.st-purpose { margin-top: 28px; padding: 30px 0 40px; }
.st-purpose::before { background: rgba(38, 34, 28, .55); }
.st-purpose .st-sechead { margin-bottom: 18px; }
.st-purpose .st-sechead__title { font-size: 25px; }
.st-purpose .st-sechead__en { color: var(--on-dark); }
.st-purpose__list { gap: 22px; }
.st-purpose__item { min-height: 62px; padding: 0 16px; gap: 12px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.st-purpose__item .st-ico { font-size: 26px; color: var(--text-sub); stroke-width: 1.3; }
.st-section--soft + .st-purpose, .st-container + .st-purpose { margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .st-top-new .st-grid { gap: 22px 12px; }
  .st-card__title { font-size: 14px; }
  .st-purpose__list { gap: 12px; }
  .st-purpose__item { white-space: normal; padding: 0 10px; gap: 8px; font-size: 12.5px; line-height: 1.4; }
  .st-purpose__item .st-ico { font-size: 22px; }
  .st-feature__side .st-guide { grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 2px 8px; padding: 12px 12px; }
  .st-feature__side .st-guide__icon { font-size: 22px; }
  .st-feature__side .st-guide__title { font-size: 13.5px; }
  .st-feature__side .st-guide__go { width: 30px; height: 30px; font-size: 14px; }
  .st-catalog { grid-template-columns: minmax(0, 1fr) 60px; padding: 12px; }
  .st-catalog__title { font-size: 11.5px; }
  .st-catalog .st-media { height: 60px; }
  .st-card--row { grid-template-columns: 112px 1fr; gap: 12px; }
  .st-card--row .st-card__title { font-size: 13px; }
  .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-purpose__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-pillar { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .st-feature { grid-template-columns: minmax(0, 1fr); }
  .st-feature__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-split--top { grid-template-columns: minmax(0, 1fr); }
  .st-side--top { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .st-split:not(.st-split--top), .st-article-wrap { grid-template-columns: minmax(0, 1fr); }
  .st-split:not(.st-split--top) .st-side, .st-article-wrap .st-side { display: grid; grid-template-columns: 1fr 1fr; }
  .st-sticky { position: static; }
  .st-minitoc-box, .st-side .st-cluster--compact { display: none; }
  .st-cats { gap: 10px; }
  .st-cat__name { font-size: 12px; }
}
@media (max-width: 900px) {
  .st-cats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 120px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .st-cat { scroll-snap-align: start; }
  .st-header .st-search { width: 240px; }
  .st-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .st { --st-gutter: 16px; font-size: 15px; }
  .st-header__top { height: 60px; gap: 8px; }
  .st-logo { font-size: 24px; letter-spacing: .12em; }
  .st-logo img { height: 32px; }
  .st-header .st-header__top > .st-search { display: none; }
  .st-header.is-search-open .st-header__top > .st-search { display: block; position: absolute; left: 0; right: 0; top: 60px; width: auto; margin: 0; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
  .st-header__actions { margin-left: auto; }
  .st-iconbtn { min-width: 48px; min-height: 48px; }
  .st-iconbtn .st-ico { font-size: 23px; }
  .st-iconbtn__label { display: none; }
  .st-iconbtn--search { display: inline-flex; }
  .st-iconbtn__badge { right: 4px; }
  .st-nav { display: none; }
  .st-pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }

  .st-hero { height: auto; min-height: 520px; }
  .st-hero__shade { background: linear-gradient(180deg, rgba(20, 24, 18, .35) 0%, rgba(20, 24, 18, .55) 45%, rgba(20, 24, 18, .78) 100%); }
  .st-hero__inner { justify-content: flex-end; padding-top: 72px; padding-bottom: 128px; min-height: 520px; }
  .st-hero__title { font-size: 32px; }
  .st-hero__lead { font-size: 14px; margin-top: 14px; }
  .st-hero .st-search { margin-top: 20px; }
  .st-hero .st-search__field { height: 50px; }
  .st-hero .st-search input { font-size: 16px; }
  .st-hero__pick { left: 16px; right: 16px; bottom: 76px; max-width: none; }
  .st-hero__ctrl { left: 16px; right: 16px; bottom: 16px; justify-content: space-between; gap: 6px; }
  .st-hero__dots { margin: 0 auto; }

  .st-cats { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 16px 10px; padding-top: 20px; }
  .st-cat__name { font-size: 12.5px; margin-top: 8px; }
  .st-cat__sub { display: none; }

  .st-section { padding-top: var(--space-7); }
  .st-section--soft { padding: var(--space-7) 0; margin-top: var(--space-7); }
  .st-sechead { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 18px; }
  .st-sechead__title { font-size: 22px; }
  .st-sechead__en { font-size: 11.5px; }
  .st-feature { grid-template-columns: 1fr; gap: 20px; }
  .st-feature__body { grid-template-columns: 1fr; height: auto; gap: 20px; }
  .st-feature__body > div { height: 320px; }
  .st-feature__list { gap: 16px; }
  .st-top-new .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .st-hero__inner { padding-left: var(--st-gutter); }
  .st-hero .st-search { width: 100%; }
  .st-hero__arrow { top: auto; bottom: 14px; transform: none; }
  .st-hero__ctrl { left: auto; right: 60px; bottom: 16px; }
  .st-feature__side { grid-template-columns: 1fr; }
  .st-card--feature { min-height: 320px; }
  .st-card--feature .st-card__body { padding: 20px; }
  .st-card--feature .st-card__title { font-size: 21px; }
  .st-card--row { grid-template-columns: 120px 1fr; gap: 12px; }
  .st-grid, .st-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .st-card__title { font-size: 14px; }
  .st-card .st-card__desc { display: none; }
  .st-side { grid-template-columns: 1fr; }
  .st-chapters { grid-template-columns: 1fr; gap: 8px; }
  .st-chapter { padding: 14px; }
  .st-chapter__desc { display: none; }
  .st-pillar__title { font-size: 24px; }
  .st-purpose { padding: 40px 0; margin-top: var(--space-7); }
  .st-purpose__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-purpose__item { min-height: 64px; padding: 10px 12px; gap: 10px; font-size: 13px; }
  .st-purpose__item .st-ico { font-size: 24px; }
  .st-purpose__item small { display: none; }
  .st-footer { padding-top: 40px; }
  .st-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .st-footer__brand { grid-column: 1 / -1; }

  .st-bc [aria-current] { max-width: 18ch; }
  .st-article-wrap { padding-top: 20px; gap: 48px; }
  .st-ahead__title { font-size: 24px; line-height: 1.55; }
  .st-ahead__lead { font-size: 14.5px; }
  .st-ahead__hero { margin-left: -16px; margin-right: -16px; }
  .st-ahead__hero .st-media { border-radius: 0; }
  .st-ahead__hero figcaption { padding: 0 16px; }
  .st-share__label { display: none; }
  .st-share__btn span { display: none; }
  .st-share__btn { height: 40px; padding: 0 12px; }
  .st-share__list { gap: 6px; }
  .st-share__btn.st-fav span { display: inline; }
  .st-intro { grid-template-columns: 1fr; }
  .st-body { font-size: 15px; }
  .st-h2 { font-size: 21px; margin-top: var(--space-7) !important; padding-left: 14px; }
  .st-h3 { font-size: 17px; }
  .st-icongrid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .st-typegrid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .st-typegrid__name { font-size: 14px; }
  .st-table__hint { display: block; }
  .st-stats { grid-template-columns: 1fr; }
  .st-stat { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding: 14px 16px; }
  .st-stat__note { grid-column: 1 / -1; }
  .st-stat__value { font-size: 22px; margin: 0; }
  .st-pc { grid-template-columns: 1fr; }
  .st-also { grid-template-columns: 96px 1fr; padding: 20px 14px 14px; gap: 12px; }
  .st-also > .st-ico { display: none; }
  .st-also__desc { display: none; }
  .st-also__title { font-size: 14px; }
  .st-gallery { grid-template-columns: 1fr; }
  .st-next { grid-template-columns: 1fr; }
  .st-products__grid { grid-template-columns: 1fr; }
  .st-product { display: grid; grid-template-columns: 96px 1fr; gap: 0 14px; }
  .st-product .st-media { grid-row: span 3; align-self: start; }
  .st-product__name { margin-top: 0; }
  .st-product__spec, .st-product__price, .st-product__shops { grid-column: 1 / -1; }
  .st-pro { grid-template-columns: 1fr; padding: 22px 20px; }
  .st-wrap { padding: 20px; }
  .st-author { grid-template-columns: 48px 1fr; padding: 18px; }
  .st-author__avatar { width: 48px; height: 48px; font-size: 18px; }
  .st-cathero { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .st-cathero .st-media { order: -1; }
  .st-cathero__title { font-size: 30px; }
  .st-journey { grid-template-columns: 1fr; }
  .st-journey a + a { border-left: 0; border-top: 1px solid var(--border); }
  .st-journey a { padding: 18px 20px; }
  .st-compare { grid-template-columns: 1fr; }
  .st-compare a { padding: 16px; grid-template-columns: 44px 1fr 18px; gap: 12px; }
  .st-compare__icon { width: 44px; height: 44px; font-size: 20px; }
}

/* ---------- More top-page content ---------- */
.st-side__stack { display: flex; flex-direction: column; gap: 16px; }
.st-camp ul { display: grid; }
.st-camp li + li { border-top: 1px solid var(--border); }
.st-camp a { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; gap: 10px; align-items: center; padding: 10px 0; }
.st-camp__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary-dark); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.st-camp__title { font-size: 13px; font-weight: 700; line-height: 1.5; }
.st-camp__title small { display: block; font-size: 11px; font-weight: 400; color: var(--muted-text); }
.st-camp a > .st-ico { color: var(--muted); }
.st-camp a:hover .st-camp__title { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }

.st-kw { margin-top: 32px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-soft); }
.st-kw__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.st-kw__title .st-ico { color: var(--primary); font-size: 17px; }
.st-kw .st-tag { height: 30px; font-size: 12.5px; background: var(--bg); }

.st-season { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.st-season__item { position: relative; display: block; height: 100%; min-height: 230px; border-radius: var(--radius-md); overflow: hidden; color: var(--on-dark); }
.st-season__item .st-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.st-season__item .st-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 24, 18, .82) 0%, rgba(20, 24, 18, .35) 55%, rgba(20, 24, 18, .1) 100%); }
.st-season__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.st-season__tag { align-self: flex-start; display: inline-block; padding: 3px 8px; border: 1px solid var(--on-dark-muted); border-radius: var(--radius-sm); font-family: var(--font-serif-en); font-size: 11px; font-weight: 600; letter-spacing: .2em; }
.is-main .st-season__tag { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.st-season__title { font-family: var(--font-mincho); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.is-main .st-season__title { font-size: 26px; }
.st-season__text { font-size: 12.5px; color: var(--on-dark-muted); line-height: 1.6; }
.st-season__until { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }

.st-trap { margin-top: var(--space-8); padding: 56px 0; background: var(--text); color: var(--on-dark); }
.st-trap .st-container { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.st-trap__kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-dark); font-size: 12px; font-weight: 700; }
.st-trap__title { margin-top: 14px; font-family: var(--font-mincho); font-size: 44px; font-weight: 700; line-height: 1.25; letter-spacing: .04em; }
.st-trap__title em { font-style: normal; color: var(--accent); font-size: 1.3em; }
.st-trap__lead { margin-top: 12px; font-size: 14px; line-height: 1.85; color: var(--on-dark-muted); }
.st-trap__head .st-btn { margin-top: 22px; }
.st-trap__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.st-trap__list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); transition: background-color .2s, border-color .2s; }
.st-trap__list a:hover { background: rgba(255, 255, 255, .12); border-color: var(--accent); }
.st-trap__no { font-family: var(--font-mincho); font-size: 15px; font-weight: 700; color: var(--accent); }
.st-trap__name { font-size: 14.5px; font-weight: 700; line-height: 1.55; }
.st-trap__note { font-size: 12px; line-height: 1.7; color: var(--on-dark-muted); flex: 1; }
.st-trap__go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.st-trap :focus-visible { outline-color: var(--on-dark); box-shadow: none; }

.st-column { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: center; padding: 32px; border-radius: var(--radius-lg); background: var(--primary-soft); }
.st-column__intro { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.st-column__avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-dark); color: var(--on-dark); font-family: var(--font-mincho); font-size: 26px; font-weight: 700; }
.st-column__series { font-size: 12px; font-weight: 700; color: var(--primary-dark); letter-spacing: .1em; }
.st-column__title { margin-top: 4px; font-family: var(--font-mincho); font-size: 26px; font-weight: 600; line-height: 1.45; letter-spacing: .04em; }
.st-column__lead { margin: 10px 0 6px; font-size: 13px; line-height: 1.8; color: var(--text-sub); }
.st-column__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-column__list a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 18px 20px; border-radius: var(--radius-md); background: var(--bg); transition: box-shadow .2s; }
.st-column__list a:hover { box-shadow: var(--shadow-card); }
.st-column__quote { position: relative; padding: 12px 16px; border-radius: 14px; background: var(--bg-soft); font-family: var(--font-mincho); font-size: 16px; font-weight: 600; line-height: 1.6; }
.st-column__quote::after { content: ""; position: absolute; left: 24px; bottom: -8px; border: 8px solid transparent; border-top-color: var(--bg-soft); border-bottom: 0; }
.st-column__meta { font-size: 12.5px; line-height: 1.6; color: var(--text-sub); }
.st-column__meta b { margin-right: 8px; color: var(--primary-dark); font-family: var(--font-serif-en); font-size: 14px; }
.st-column__list a:hover .st-column__meta { color: var(--primary-dark); }

.st-videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-video { display: block; }
.st-video__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(20, 24, 18, .6); border: 2px solid var(--on-dark); color: var(--on-dark); font-size: 20px; }
.st-video__play .st-ico { fill: currentColor; margin-left: 3px; }
.st-video__time { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 6px; border-radius: 3px; background: rgba(20, 24, 18, .75); color: var(--on-dark); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.st-video__title { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.55; }
.st-video:hover .st-video__title { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }

.st-cases { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.st-cases ul { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; }
.st-cases li { scroll-snap-align: start; }
.st-cases a { display: block; }
.st-cases .st-media { border-radius: var(--radius-sm); }
.st-cases__title { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.55; }
.st-cases__spec { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-text); }
.st-cases { scrollbar-color: var(--border-strong) transparent; }
.st-cases__note { margin-top: 6px; font-size: 11.5px; color: var(--muted-text); }

.st-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
.st-pick__disc { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11.5px; color: var(--muted-text); }
.st-pick__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-pick__list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.st-pick__list a:hover { border-color: var(--primary); }
.st-pick__list .st-media { border-radius: var(--radius-sm); margin-bottom: 6px; }
.st-pick__name { font-size: 13px; font-weight: 700; line-height: 1.5; }
.st-pick__note { font-size: 11.5px; color: var(--text-sub); }
.st-pick__price { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--primary-dark); }
.st-qa { display: grid; gap: 10px; }
.st-qa a { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--bg-soft); }
.st-qa a:hover { background: var(--primary-soft); }
.st-qa__q, .st-qa__a { display: grid; grid-template-columns: 24px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.6; }
.st-qa__q { font-weight: 700; }
.st-qa__a { color: var(--text-sub); font-size: 12.5px; }
.st-qa b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--font-serif-en); font-size: 13px; }
.st-qa__q b { background: var(--primary-dark); color: var(--on-dark); }
.st-qa__a b { background: var(--bg); color: var(--primary-dark); }
.st-qa__go { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }

.st-area { padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.st-area__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-mincho); font-size: 21px; font-weight: 600; margin-bottom: 14px; }
.st-area__title .st-ico { color: var(--primary); }
.st-area dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.st-area dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.st-area dt { font-size: 13px; font-weight: 700; }
.st-area dd { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.st-area dd a { color: var(--primary-dark); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

.st-cpn-hero { position: relative; padding: 72px 0; color: var(--on-dark); overflow: hidden; isolation: isolate; }
.st-cpn-hero > .st-img { position: absolute; inset: 0; z-index: -2; }
.st-cpn-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 24, 18, .75), rgba(20, 24, 18, .2)); }
.st-cpn-hero .st-season__tag { background: var(--accent); border-color: var(--accent); }
.st-cpn-hero__title { margin-top: 14px; font-family: var(--font-mincho); font-size: 46px; font-weight: 600; line-height: 1.35; letter-spacing: .06em; }
.st-cpn-hero__lead { margin-top: 14px; font-size: 15px; }
.st-cpn-hero__period { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 700; }
.st-prize__n { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--wood-text); }
.st-prize__name { font-size: 16px; font-weight: 700; }

/* tablet arrangement of the two side areas */
@media (max-width: 900px) {
  .st-feature__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; }
  .st-feature__side .st-cta { grid-row: span 2; height: auto; min-height: 260px; }
  .st-feature__side .st-catalog { height: auto; grid-template-columns: minmax(0, 1fr) 72px; }
  .st-feature__side .st-catalog .st-btn { width: 100%; justify-content: center; }
  .st-feature__side .st-guide { grid-template-columns: 26px minmax(0, 1fr) 34px; padding: 14px 16px; align-content: center; }
  .st-side--top { align-items: start; }
  .st-side__stack .st-cta { height: 190px; }
  .st-trap .st-container { grid-template-columns: 1fr; gap: 24px; }
  .st-trap__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-column { grid-template-columns: 1fr; gap: 24px; }
  .st-season { grid-template-columns: 1fr 1fr; }
  .st-season > .is-main { grid-column: 1 / -1; }
  .st-videos, .st-pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cases ul { grid-auto-columns: calc((100% - 32px) / 2.6); }
  .st-duo { grid-template-columns: 1fr; gap: 40px; }
  .st-area dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .st-feature__side { grid-template-columns: 1fr; }
  .st-feature__side .st-cta { grid-row: auto; min-height: 220px; }
  .st-side--top { grid-template-columns: 1fr; }
  .st-kw { padding: 16px; }
  .st-season { grid-template-columns: 1fr; }
  .st-season__item { min-height: 200px; }
  .is-main .st-season__title { font-size: 22px; }
  .st-trap { padding: 40px 0; margin-top: var(--space-7); }
  .st-trap__title { font-size: 34px; }
  .st-trap__list { grid-template-columns: 1fr; }
  .st-trap__list a { display: grid; grid-template-columns: 48px 1fr; gap: 4px 10px; padding: 14px; }
  .st-trap__no { grid-row: span 3; }
  .st-column { padding: 20px 16px; }
  .st-column__list { grid-template-columns: 1fr; }
  .st-column__title { font-size: 22px; }
  .st-cases ul { grid-auto-columns: 72%; }
  .st-area { padding: 18px 16px; }
  .st-area dl { grid-template-columns: 1fr; }
  .st-cpn-hero { padding: 48px 0; }
  .st-cpn-hero__title { font-size: 32px; }
}


/* ---------- refinements: feature rows, button rows, Q&A ---------- */
.st-feature__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; height: 100%; }
.st-feature__list > li { min-height: 0; }
.st-feature__list .st-card--row { height: 100%; grid-template-columns: 46% minmax(0, 1fr); gap: 14px; align-items: stretch; }
.st-feature__list .st-card--row .st-media { aspect-ratio: auto; height: 100%; border-radius: var(--radius-sm); }
.st-feature__list .st-card--row > div { display: flex; flex-direction: column; justify-content: center; }
.st-feature__list .st-card--row .st-card__title { font-size: 14px; line-height: 1.6; }
.st-feature__list .st-card--row .st-card__date { margin-top: 6px; }

.st-btnrow { display: grid; gap: 12px; }
.st-btnrow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.st-btnrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-btnrow__btn { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; gap: 10px; align-items: center; height: 100%; min-height: 64px; padding: 12px 14px 12px 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); color: var(--on-dark); transition: background-color .2s, border-color .2s; }
.st-btnrow__btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--accent); }
.st-btnrow__no { font-family: var(--font-mincho); font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.st-btnrow__name { font-size: 14px; font-weight: 700; line-height: 1.5; }
.st-btnrow__btn > .st-ico { font-size: 16px; opacity: .8; }
.st-btnrow__btn--light { background: var(--bg); border-color: var(--border); color: var(--text); }
.st-btnrow__btn--light:hover { background: var(--bg); border-color: var(--primary); }
.st-btnrow__btn--light .st-btnrow__no { color: var(--primary); font-family: var(--font-serif-en); font-size: 15px; }
.st-btnrow__btn--light > .st-ico { color: var(--muted); }

.st-trap { padding: 40px 0; }
.st-trap .st-container { display: block; }
.st-trap__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 22px; }
.st-trap__title { margin-top: 10px; font-size: 38px; }
.st-trap__lead { margin: 0 0 6px; font-size: 13.5px; }
.st-trap .st-more { color: var(--on-dark); margin-bottom: 4px; }

.st-column { display: block; padding: 28px 32px; }
.st-column__intro { display: grid; grid-template-columns: 56px auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 20px; }
.st-column__avatar { width: 56px; height: 56px; font-size: 22px; }
.st-column__title { font-size: 24px; margin-top: 2px; }
.st-column__lead { margin: 0; font-size: 13px; }

.st-qa__intro { margin-bottom: 12px; font-size: 13px; color: var(--text-sub); }
.st-qacats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-qacats a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid transparent; transition: border-color .2s; }
.st-qacats a:hover { border-color: var(--primary); background: var(--bg); }
.st-qacats__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--primary); font-size: 20px; }
.st-qacats__name { font-size: 14px; font-weight: 700; line-height: 1.4; }
.st-qacats__name small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted-text); }
.st-qacats a > .st-ico:last-child { color: var(--muted); }
.st-subnav a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-dark); }
.st-subnav a[aria-current="page"] .st-ico { color: var(--on-dark); }
.st-cathero--qa { grid-template-columns: 1fr; }

@media (max-width: 1080px) {
  .st-btnrow__name { font-size: 13px; }
  .st-btnrow__btn { padding: 10px 12px; gap: 8px; }
}
@media (max-width: 900px) {
  .st-btnrow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-btnrow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-trap__head { grid-template-columns: 1fr; gap: 10px; }
  .st-column__intro { grid-template-columns: 56px minmax(0, 1fr); }
  .st-column__lead, .st-column__intro > .st-more { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .st-feature__list { grid-template-rows: none; }
  .st-feature__list .st-card--row { grid-template-columns: 120px 1fr; }
  .st-feature__list .st-card--row .st-media { aspect-ratio: 138 / 85; height: auto; }
  .st-btnrow--5, .st-btnrow--4 { grid-template-columns: 1fr; gap: 8px; }
  .st-btnrow__btn { min-height: 54px; }
  .st-trap__title { font-size: 32px; }
  .st-column { padding: 20px 16px; }
  .st-column__title { font-size: 21px; }
  .st-qacats { grid-template-columns: 1fr; }
}


/* ---------- promo cards (trap / column) ---------- */
.st-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 30px 32px; border-radius: var(--radius-lg); transition: transform .2s, box-shadow .2s; }
.st-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 39, 34, .16); }
.st-promo--trap { background: var(--text); color: var(--on-dark); }
.st-promo--trap .st-trap__title { margin: 0; font-size: 40px; }
.st-promo--column { background: var(--primary-soft); color: var(--text); }
.st-promo__row { display: flex; align-items: center; gap: 14px; }
.st-promo__row > span:last-child { display: block; }
.st-promo__title { display: block; font-family: var(--font-mincho); font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; }
.st-promo--column .st-column__series { display: block; }
.st-promo--column .st-column__quote { display: block; align-self: stretch; margin-bottom: 4px; background: var(--bg); }
.st-promo--column .st-column__quote::after { border-top-color: var(--bg); }
.st-promo__lead { display: block; font-size: 13.5px; line-height: 1.85; color: var(--text-sub); }
.st-promo--trap .st-promo__lead { color: var(--on-dark-muted); }
.st-promo__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 13.5px; font-weight: 700; }
.st-promo--trap .st-promo__go { color: var(--accent); }
.st-promo--column .st-promo__go { color: var(--primary-dark); }
.st-promo--trap:focus-visible { outline-color: var(--accent); }
@media (max-width: 760px) {
  .st-promos { grid-template-columns: 1fr; gap: 14px; }
  .st-promo { padding: 22px 18px; }
  .st-promo--trap .st-trap__title { font-size: 32px; }
  .st-promo__title { font-size: 22px; }
}


/* ---------- pickup products: compact cards ---------- */
.st-pick__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
.st-pick__list a { padding: 8px 8px 10px; gap: 2px; }
.st-pick__list .st-media { margin-bottom: 6px; }
.st-pick__name { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.9em; }
.st-pick__note { font-size: 11px; line-height: 1.5; }
.st-pick__price { padding-top: 4px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.st-pick .st-img--empty span { font-size: 10.5px; }
.st-duo--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.st-duo .st-area { height: 100%; }
.st-duo .st-area dl { grid-template-columns: 1fr; gap: 8px; }
@media (max-width: 1180px) { .st-pick__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .st-pick__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-duo--even { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .st-pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }


/* ---------- new-articles row alignment ---------- */
.st-split--top { align-items: stretch; }
.st-side--top { display: flex; flex-direction: column; }
.st-side--top .st-box.st-rank { flex: 1; display: flex; flex-direction: column; }
.st-side--top .st-rank ol[role="tabpanel"]:not([hidden]) { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.st-side--top .st-rank .st-box__note { margin-top: 8px; }
.st-subrow { display: grid; grid-template-columns: minmax(0, 1fr) 270px clamp(260px, 25vw, 319px); gap: 20px; margin-top: 28px; align-items: stretch; }
.st-subrow .st-kw { margin-top: 0; }
.st-subrow .st-cta { height: auto; min-height: 200px; }
@media (max-width: 1080px) { .st-subrow { grid-template-columns: 1fr 1fr; } .st-subrow .st-kw { grid-column: 1 / -1; } }
@media (max-width: 760px) { .st-subrow { grid-template-columns: 1fr; } }

/* ---------- video thumbnails carry their own titles: play button to the corner ---------- */
.st-video__play { left: 10px; top: auto; bottom: 10px; margin: 0; width: 40px; height: 40px; font-size: 15px; }

/* ---------- promo cards with art ---------- */
.st-promo { position: relative; overflow: hidden; isolation: isolate; min-height: 300px; }
.st-promo__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; max-width: 62%; }
.st-promo__art { position: absolute; z-index: 1; pointer-events: none; }
.st-promo--trap { background: #1d201b; }
.st-promo__bg { position: absolute; inset: 0; z-index: -1; }
.st-promo__bg .st-img { position: absolute; inset: 0; opacity: .35; filter: grayscale(.4) blur(1px); }
.st-promo__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 45%, rgba(200, 154, 50, .35) 0%, rgba(200, 154, 50, 0) 38%), linear-gradient(90deg, rgba(29, 32, 27, .95) 0%, rgba(29, 32, 27, .78) 50%, rgba(29, 32, 27, .35) 100%); }
.st-promo__tape { position: absolute; right: -60px; bottom: 26px; z-index: 1; width: 340px; height: 26px; transform: rotate(-12deg); background: repeating-linear-gradient(45deg, #c89a32 0 16px, #242722 16px 32px); opacity: .9; }
.st-promo__art--person { right: 18px; bottom: 0; width: 210px; height: auto; transition: transform .3s; }
.st-promo--trap:hover .st-promo__art--person { transform: translateY(-4px) rotate(-2deg); }
.st-promo--trap .st-burst { animation: st-burst 1.6s ease-in-out infinite; transform-origin: 110px 100px; }
@keyframes st-burst { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.st-promo--column { background: linear-gradient(180deg, #eef3e6 0%, #e3ecd6 100%); }
.st-promo--column::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(86, 107, 79, .12) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.st-promo__grass { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: 56px; }
.st-promo__art--roll { right: 18px; bottom: 34px; width: 190px; height: auto; }
.st-promo--column .st-promo__text { padding-bottom: 30px; }
@media (max-width: 900px) { .st-promo__text { max-width: 100%; } .st-promo__art--person { width: 130px; opacity: .9; } .st-promo__art--roll { width: 120px; } .st-promo--trap .st-promo__text { padding-right: 110px; } }
@media (max-width: 760px) { .st-promo { min-height: 0; } .st-promo--trap .st-promo__text { padding-right: 96px; } .st-promo__art--person { width: 110px; right: 6px; } .st-promo__art--roll { width: 96px; right: 8px; bottom: 30px; opacity: .85; } .st-promo--column .st-promo__text { padding-right: 70px; } }
@media (prefers-reduced-motion: reduce) { .st-promo--trap .st-burst { animation: none; } }
.st-promo--column .st-promo__text { max-width: 100%; gap: 10px; }
.st-promo--column .st-column__quote { align-self: flex-start; margin: 4px 0 0; padding: 12px 18px; }
.st-promo--column .st-column__quote::after { left: 30px; }
.st-promo__speaker { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.st-craftsman { width: 78px; height: 78px; flex: none; border-radius: 50%; box-shadow: 0 2px 8px rgba(36, 39, 34, .14); }
.st-promo__speaker b { display: block; font-size: 13.5px; color: var(--primary-dark); }
.st-promo__speaker small { display: block; font-size: 11.5px; color: var(--text-sub); }


/* ---------- calm background design: full-bleed bands, botanical line art, soft waves ---------- */
.st-main--flush { overflow-x: clip; background: linear-gradient(180deg, #fff 0%, #fcfcf9 100%); }
.st-band { position: relative; isolation: isolate; }
.st-band::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: -32px; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none; }
.st-band::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; opacity: .14; }
.st-band--soft { padding-bottom: 8px; }
.st-band--soft::before { top: 12px; background: #f6f6f1; }
.st-band--green::before { top: 12px; background: linear-gradient(180deg, #eef1e8 0%, #f4f6ef 100%); }
.st-band--wave::before { -webkit-mask: linear-gradient(#000, #000); }
.st-band--wave > :first-child { position: relative; }
.st-band--soft.st-band--wave::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040V22C240%202%20480%202%20720%2018s480%2020%20720%200v22z%22%20fill%3D%22%23f6f6f1%22/%3E%3C/svg%3E") top center / 100% 40px no-repeat, linear-gradient(#f6f6f1, #f6f6f1) 0 40px / 100% 100% no-repeat; top: 0; }
.st-band--green.st-band--wave::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040V22C240%202%20480%202%20720%2018s480%2020%20720%200v22z%22%20fill%3D%22%23eef1e8%22/%3E%3C/svg%3E") top center / 100% 40px no-repeat, linear-gradient(180deg, #eef1e8 0%, #f4f6ef 100%) 0 40px / 100% 100% no-repeat; top: 0; }
.st-band--leaf::after { width: 260px; height: 260px; right: -110px; top: -10px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20240%22%20fill%3D%22none%22%20stroke%3D%22%23566b4f%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M40%20220C70%20150%20120%2090%20210%2030%22/%3E%3Cpath%20d%3D%22M80%20158c-30-4-46-24-46-50%2026%202%2044%2020%2046%2050z%22/%3E%3Cpath%20d%3D%22M80%20158c4-30%2026-46%2052-44-4%2026-24%2042-52%2044z%22/%3E%3Cpath%20d%3D%22M118%20112c-28-8-40-30-36-56%2024%206%2038%2028%2036%2056z%22/%3E%3Cpath%20d%3D%22M118%20112c10-28%2034-38%2058-32-10%2024-32%2034-58%2032z%22/%3E%3Cpath%20d%3D%22M156%2074c-22-14-28-38-18-60%2020%2012%2028%2036%2018%2060z%22/%3E%3Cpath%20d%3D%22M156%2074c16-22%2040-26%2062-14-16%2020-40%2024-62%2014z%22/%3E%3C/svg%3E"); background-size: contain; }
.st-band--leaf-l::after { width: 220px; height: 220px; left: -120px; top: 10px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20240%22%20fill%3D%22none%22%20stroke%3D%22%23566b4f%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M40%20220C70%20150%20120%2090%20210%2030%22/%3E%3Cpath%20d%3D%22M80%20158c-30-4-46-24-46-50%2026%202%2044%2020%2046%2050z%22/%3E%3Cpath%20d%3D%22M80%20158c4-30%2026-46%2052-44-4%2026-24%2042-52%2044z%22/%3E%3Cpath%20d%3D%22M118%20112c-28-8-40-30-36-56%2024%206%2038%2028%2036%2056z%22/%3E%3Cpath%20d%3D%22M118%20112c10-28%2034-38%2058-32-10%2024-32%2034-58%2032z%22/%3E%3Cpath%20d%3D%22M156%2074c-22-14-28-38-18-60%2020%2012%2028%2036%2018%2060z%22/%3E%3Cpath%20d%3D%22M156%2074c16-22%2040-26%2062-14-16%2020-40%2024-62%2014z%22/%3E%3C/svg%3E"); background-size: contain; transform: scaleX(-1); }
.st-band--sprig::after { width: 150px; height: 150px; right: -40px; top: 6px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%20160%22%20fill%3D%22none%22%20stroke%3D%22%23a9865b%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M20%20150C50%20110%2080%2070%20140%2020%22/%3E%3Cellipse%20cx%3D%2258%22%20cy%3D%22104%22%20rx%3D%2216%22%20ry%3D%227%22%20transform%3D%22rotate%28-50%2058%20104%29%22/%3E%3Cellipse%20cx%3D%2286%22%20cy%3D%2272%22%20rx%3D%2216%22%20ry%3D%227%22%20transform%3D%22rotate%28-50%2086%2072%29%22/%3E%3Cellipse%20cx%3D%22112%22%20cy%3D%2244%22%20rx%3D%2214%22%20ry%3D%226%22%20transform%3D%22rotate%28-50%20112%2044%29%22/%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2292%22%20rx%3D%2212%22%20ry%3D%225%22%20transform%3D%22rotate%2820%2044%2092%29%22/%3E%3Cellipse%20cx%3D%2272%22%20cy%3D%2258%22%20rx%3D%2212%22%20ry%3D%225%22%20transform%3D%22rotate%2820%2072%2058%29%22/%3E%3C/svg%3E"); background-size: contain; opacity: .35; }
.st-band--soft::after { width: 420px; height: 210px; left: -150px; bottom: -30px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20200%22%20fill%3D%22none%22%20stroke%3D%22%23566b4f%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20150c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20170c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20190c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20130c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3C/svg%3E"); background-size: contain; opacity: .1; }
.st-band--green::after { width: 420px; height: 210px; right: -160px; top: 10px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20200%22%20fill%3D%22none%22%20stroke%3D%22%23566b4f%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%20150c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20170c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20190c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3Cpath%20d%3D%22M0%20130c60-30%20110%2010%20170-10s120-70%20230-40%22/%3E%3C/svg%3E"); background-size: contain; opacity: .12; transform: scaleX(-1); }
.st-band--last { padding-bottom: 56px; }
.st-band + .st-band { margin-top: 0; }
.st-band--soft, .st-band--green { padding-top: 76px; margin-top: 40px; padding-bottom: 32px; }
.st-band--soft .st-kw { background: #fff; border: 1px solid var(--border); }
.st-band--green .st-video { background: #fff; border-radius: var(--radius-md); padding: 8px 8px 12px; box-shadow: var(--shadow-card); }
.st-band--green .st-video__title { padding: 0 4px; }
.st-band--soft .st-pick__list a { background: #fff; }

/* section headings: small botanical mark + hairline */
.st-sechead { position: relative; padding-bottom: 12px; }
.st-sechead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--primary) 0 56px, var(--border) 56px 100%); }
.st-sechead--light::after, .st-purpose .st-sechead::after { display: none; }
.st-sechead__title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23566b4f%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021v-9%22/%3E%3Cpath%20d%3D%22M12%2012c0-4-3-6.5-7-6.5%200%204%203%206.5%207%206.5zM12%2014c0-3.5%202.6-5.5%206.5-5.5%200%203.5-2.6%205.5-6.5%205.5z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.st-sechead--light .st-sechead__title::before { display: none; }

/* category strip: soft rounded backdrop under the tiles */
.st-cats { position: relative; }
.st-cat .st-media { box-shadow: 0 2px 10px rgba(36, 39, 34, .08); }

/* footer: soft wave on top */
.st-footer { position: relative; }
.st-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 24px; background: SEPurl("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040V22C240%202%20480%202%20720%2018s480%2020%20720%200v22z%22%20fill%3D%22%23f6f6f1%22/%3E%3C/svg%3E") top center / 100% 24px no-repeat; }
@media (max-width: 760px) {
  .st-band::after { opacity: .08; }
  .st-band--soft, .st-band--green { padding-top: 44px; margin-top: 28px; }
}

.st-sechead__lead { margin: -6px 0 18px; font-size: 13.5px; color: var(--text-sub); }

/* ================= column (100 SEO articles) ================= */
.st-colhero { position: relative; padding: 40px 0 32px; background: linear-gradient(180deg, #f6f6f1 0%, #fcfcf9 100%); border-bottom: 1px solid var(--border); overflow: hidden; }
.st-colhero::after { content: ""; position: absolute; right: -60px; top: -40px; width: 300px; height: 300px; opacity: .12; pointer-events: none; background: radial-gradient(circle, var(--primary) 0 2px, transparent 2.5px) 0 0 / 18px 18px; border-radius: 50%; }
.st-colhero__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 36px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; }
.st-colhero__text { margin-top: 12px; max-width: 760px; font-size: 14.5px; line-height: 1.95; color: var(--text-sub); }
.st-colcats { margin-top: 22px; }
.st-colcats ul { display: flex; flex-wrap: wrap; gap: 8px; }
.st-colcats a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 500; transition: border-color .2s, background-color .2s; }
.st-colcats a .st-ico { color: var(--primary); font-size: 16px; }
.st-colcats a small { font-size: 11px; color: var(--muted-text); font-variant-numeric: tabular-nums; }
.st-colcats a:hover { border-color: var(--primary); }
.st-colcats a[aria-current="page"] { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-dark); }
.st-colcats a[aria-current="page"] .st-ico, .st-colcats a[aria-current="page"] small { color: var(--on-dark-muted); }
.st-top-colnav { margin-top: 22px; padding: 18px 22px; border-radius: var(--radius-md); border: 1px dashed var(--border-strong); background: #fff; }
.st-top-colnav__lead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.st-top-colnav__lead .st-ico { color: var(--primary); }
.st-top-colnav .st-colcats { margin-top: 12px; }
.st-colgrid .st-card__title { -webkit-line-clamp: 3; }
.st-pager { margin-top: 36px; }
.st-pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.st-pager a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.st-pager a:hover { border-color: var(--primary); }
.st-pager a[aria-current="page"] { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-dark); font-weight: 700; }
.st-colcatcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-colcatcards a { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: stretch; height: 100%; padding: 12px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); transition: border-color .2s; }
.st-colcatcards a:hover { border-color: var(--primary); }
.st-colcatcards .st-media { aspect-ratio: auto; height: 100%; min-height: 96px; border-radius: var(--radius-sm); }
.st-colcatcards__body { display: flex; flex-direction: column; gap: 4px; }
.st-colcatcards__name { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.st-colcatcards__name .st-ico { color: var(--primary); flex: none; }
.st-colcatcards__desc { font-size: 12px; line-height: 1.65; color: var(--text-sub); }
.st-colcatcards__n { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.st-colindex { counter-reset: none; border-top: 1px solid var(--border); }
.st-colindex li { border-bottom: 1px solid var(--border); }
.st-colindex a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 14px 4px; }
.st-colindex a:hover .st-colindex__title { color: var(--primary-dark); }
.st-colindex__no { font-family: var(--font-serif-en); font-size: 18px; font-weight: 600; color: var(--primary); }
.st-colindex__title { font-size: 15px; font-weight: 700; line-height: 1.55; }
.st-colindex__title small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--text-sub); line-height: 1.6; }
.st-colindex a > .st-ico { color: var(--muted); }
.st-colcat-link { display: inline-flex; }
.st-intro--col { grid-template-columns: 1fr; }
.st-sidecol li a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid var(--border); font-size: 12.5px; line-height: 1.55; color: var(--text-sub); }
.st-sidecol li a:hover { color: var(--primary-dark); border-left-color: var(--primary); }
.st-sidecol li a[aria-current="page"] { color: var(--primary-dark); font-weight: 700; border-left-color: var(--primary); }
.st-box .st-more { margin-top: 8px; }

/* article body: varied heading treatments (avoid templated look) */
.st-body--col > * + * { margin-top: 1.3em; }
.st-qhead { margin-top: 2em !important; padding: 20px 22px; border-radius: var(--radius-md); background: var(--bg-soft); }
.st-qhead__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); letter-spacing: .06em; }
.st-qhead__title { margin-top: 6px; font-family: var(--font-mincho); font-size: 22px; font-weight: 600; line-height: 1.55; scroll-margin-top: 96px; }
.st-qhead + p { margin-top: 1em; }
.st-answer { position: relative; margin-top: var(--space-7) !important; padding: 34px 26px 24px; border-radius: var(--radius-md); border: 2px solid var(--primary); background: #fff; }
.st-answer__label { position: absolute; top: -13px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-dark); font-size: 12.5px; font-weight: 700; }
.st-answer__title { font-size: 18px; font-weight: 700; line-height: 1.65; color: var(--primary-dark); scroll-margin-top: 96px; }
.st-answer > p { margin-top: .8em; font-size: 15px; }
.st-h2__tag { display: flex; align-items: center; gap: 4px; width: fit-content; margin-bottom: 6px; padding: 2px 10px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.st-h2--caution::before { background: var(--caution); }
.st-h2--caution .st-h2__tag { background: var(--caution-soft); color: var(--caution); }
.st-h2--compare::before { background: var(--wood-text); }
.st-h2--compare .st-h2__tag { background: #f3ede4; color: var(--wood-text); }
.st-h2--basic .st-h2__tag { background: var(--primary-soft, #eef2ea); color: var(--primary-dark); }
.st-h2--detail::before { background: var(--primary); }
.st-h2--detail .st-h2__tag { background: transparent; border: 1px solid var(--primary); color: var(--primary-dark); }
.st-h2--judge::before { background: var(--wood-text); }
.st-h2--judge .st-h2__tag { background: #f3ede4; color: var(--wood-text); }
.st-h2--faq { padding-left: 0 !important; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.st-h2--faq::before { display: none; }
.st-h2--faq .st-h2__tag { background: var(--primary-dark); color: var(--on-dark); }
.st-body--col .st-faq { margin-top: 1.2em; }
.st-imgslot--diagram .st-imgslot__cell { background: repeating-linear-gradient(0deg, transparent 0 23px, #e9ece3 23px 24px), repeating-linear-gradient(90deg, #fbfbf8 0 23px, #e9ece3 23px 24px); }
.st-sources { padding: 16px 18px; border-radius: var(--radius-md); background: var(--bg-soft); font-size: 13px; color: var(--muted-text); line-height: 1.75; }
.st-sources__title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 700; color: var(--text); font-size: 13.5px; }
.st-sources ul { padding-left: 1.2em; list-style: disc; }
.st-body--col a.st-a, .st-body--col .st-faq a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.st-wrap--col { margin-top: var(--space-8) !important; border: 1px solid var(--border); }
.st-wrap--col > p + p { margin-top: .8em; }
.st-olist { counter-reset: ol; display: grid; gap: 10px; }
.st-olist > li { position: relative; padding: 10px 14px 10px 50px; border-radius: var(--radius-md); background: var(--bg-soft); line-height: 1.75; }
.st-olist > li::before { counter-increment: ol; content: counter(ol); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-dark); color: var(--on-dark); font-family: var(--font-serif-en); font-size: 14px; font-weight: 600; line-height: 1; }
.st-body--col table { min-width: 560px; }
.st-imgslot { margin-top: 1.6em !important; }
.st-imgslot__grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
.st-imgslot[data-cells="2"] .st-imgslot__grid { grid-template-columns: 1fr 1fr; }
.st-imgslot[data-cells="3"] .st-imgslot__grid, .st-imgslot[data-cells="6"] .st-imgslot__grid, .st-imgslot[data-cells="5"] .st-imgslot__grid { grid-template-columns: repeat(3, 1fr); }
.st-imgslot[data-cells="4"] .st-imgslot__grid { grid-template-columns: repeat(4, 1fr); }
.st-imgslot__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-sm); border: 1.5px dashed var(--border-strong); background: repeating-linear-gradient(135deg, #fbfbf8 0 12px, #f3f4ee 12px 24px); color: var(--muted-text); font-size: 12px; font-weight: 500; }
.st-imgslot__cell .st-ico { font-size: 26px; color: var(--muted); }
.st-imgslot--photo .st-imgslot__cell { max-height: 380px; }
.st-imgslot figcaption { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--text-sub); }
.st-imgslot figcaption .st-ico { color: var(--primary); flex: none; }
@media (max-width: 760px) {
  .st-colhero { padding: 28px 0 22px; }
  .st-colhero__title { font-size: 26px; }
  .st-colhero__text { font-size: 13.5px; }
  .st-colcats ul { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .st-colcats a { flex: none; height: 38px; }
  .st-colcatcards { grid-template-columns: 1fr; }
  .st-colcatcards a { grid-template-columns: 96px minmax(0, 1fr); }
  .st-colcatcards__desc { display: none; }
  .st-colindex a { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 8px; }
  .st-colindex__title { font-size: 14px; }
  .st-colindex__title small { display: none; }
  .st-qhead__title { font-size: 19px; }
  .st-answer { padding: 22px 16px 16px; }
  .st-answer__title { font-size: 16.5px; }
  .st-imgslot[data-cells="4"] .st-imgslot__grid, .st-imgslot[data-cells="6"] .st-imgslot__grid, .st-imgslot[data-cells="5"] .st-imgslot__grid, .st-imgslot[data-cells="3"] .st-imgslot__grid { grid-template-columns: 1fr 1fr; }
  .st-top-colnav { padding: 14px 16px; }
  .st-pager a { min-width: 38px; height: 38px; padding: 0 8px; }
}

.st-sitecat__hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: center; }
.st-sitecat__img .st-media { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.st-sitecat__group { scroll-margin-top: 110px; }
@media (max-width: 900px) { .st-sitecat__hero { grid-template-columns: 1fr; } .st-sitecat__img { display: none; } }
/* mobile refinements */
@media (max-width: 760px) {
  .st-split:not(.st-split--top) .st-side, .st-article-wrap .st-side { grid-template-columns: minmax(0, 1fr); }
  .st-side > * { min-width: 0; }
  .st-video__play { width: 30px; height: 30px; font-size: 12px; left: 6px; bottom: 6px; border-width: 1.5px; }
  .st-video__time { font-size: 10.5px; right: 6px; bottom: 6px; }
  .st-video__title { font-size: 13.5px; }
  .st-purpose__list { grid-template-columns: 1fr; gap: 8px; }
  .st-purpose__item { min-height: 52px; white-space: nowrap; font-size: 14px; }
  .st-footer__grid > div:nth-child(2) { grid-column: 1 / -1; }
  .st-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  .st-footer li a { font-size: 12.5px; }
  .st-sechead .st-more { margin-left: auto; }
  .st-sechead__en { display: none; }
  .st-sechead { flex-wrap: nowrap; align-items: center; }
  .st-sechead__title { font-size: 20px; }
  .st-sechead__title::before { width: 15px; height: 15px; margin-right: 6px; }
  .st-sechead .st-more { flex: none; }
  .st-band--last { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .st-hero__slide > .st-img { transform: none !important; }
}

/* ================= content pages / hubs / forms / glossary ================= */
.st-info { max-width: 820px; margin: 0 auto; padding: var(--space-7) 0 var(--space-8); }
.st-info__date { margin-top: var(--space-6); color: var(--muted-text); font-size: 13px; text-align: right; }
.st-body--plain table tbody th { width: 30%; background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
.st-fill { padding: 1px 6px; border-radius: 4px; background: #fff3c4; color: #6b4e00; font-weight: 700; font-size: .92em; }
.st-hub__intro { max-width: 860px; }
.st-hub__intro .st-h2:first-child { margin-top: 0 !important; }
.st-hub__desc { margin: -8px 0 18px; color: var(--text-sub); font-size: 14.5px; }
.st-hub__more { margin-top: var(--space-6); text-align: center; }
.st-seriesbox { padding: 18px 18px 14px; }
.st-seriesbox .st-box__title a { color: inherit; text-decoration: none; }
.st-seriesbox ol { display: grid; gap: 2px; margin-top: 8px; }
.st-seriesbox li > a, .st-seriesbox li > span { display: flex; gap: 10px; align-items: baseline; padding: 8px 6px; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; line-height: 1.55; text-decoration: none; }
.st-seriesbox li > a:hover { background: var(--bg-soft); }
.st-seriesbox li > span[aria-current] { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.st-seriesbox__no { flex: none; font-family: var(--font-serif-en); color: var(--wood-text); font-weight: 600; }
.st-area-prefs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding: 0; list-style: none; }
.st-area-prefs li { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); font-size: 14px; scroll-margin-top: 110px; }
.st-area-prefs li:target { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.st-searchpage { max-width: 640px; margin: 0 auto var(--space-6); }
.st-searchpage .st-search__field { height: 54px; }

.st-formwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding: var(--space-7) 0 var(--space-8); align-items: start; }
.st-formwrap__main > .st-body { margin-bottom: var(--space-5); }
.st-formwrap__side { position: sticky; top: 100px; padding: 22px; border-radius: var(--radius-md); background: var(--bg-soft); font-size: 14px; line-height: 1.8; }
.st-formwrap__side h3 { font-size: 15px; font-weight: 700; color: var(--primary-dark); margin: 0 0 8px; }
.st-formwrap__side * + h3 { margin-top: 18px; }
.st-formwrap__side ul, .st-formwrap__side ol { padding-left: 1.2em; }
.st-formwrap__side ul { list-style: disc; } .st-formwrap__side ol { padding-left: 0; }
.st-form { display: grid; gap: 22px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.st-form__row { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.st-form__label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.st-form__req, .st-form__opt { padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.st-form__req { background: var(--caution); color: #fff; } .st-form__opt { background: var(--bg-soft); color: var(--muted-text); border: 1px solid var(--border); }
.st-form__hint { margin: 0; color: var(--muted-text); font-size: 13px; }
.st-form__input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; font: inherit; font-size: 16px; color: var(--text); }
textarea.st-form__input { min-height: 140px; resize: vertical; line-height: 1.7; }
.st-form__input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.st-form__checks > div { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.st-form__checks label, .st-form__agree label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 14px; cursor: pointer; }
.st-form__checks input, .st-form__agree input { width: 18px; height: 18px; accent-color: var(--primary); }
.st-form__agree label { border: 0; padding: 0; }
.st-form__submit { margin-top: 6px; }
.st-form__status { min-height: 1.5em; margin: 0; color: var(--primary-dark); font-weight: 700; }

.st-gloss { max-width: 900px; margin: 0 auto; padding: var(--space-6) 0 var(--space-8); }
.st-gloss__nav ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.st-gloss__nav a, .st-gloss__nav span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.st-gloss__nav a:hover { background: var(--primary-soft); }
.st-gloss__nav span { color: var(--muted); background: var(--bg-soft); }
.st-gloss__group + .st-gloss__group { margin-top: var(--space-7); }
.st-gloss__head { font-family: var(--font-mincho); font-size: 24px; font-weight: 600; color: var(--primary-dark); padding-bottom: 8px; border-bottom: 2px solid var(--primary); scroll-margin-top: 96px; }
.st-gloss__list { margin: 0; }
.st-gloss__item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--border); scroll-margin-top: 96px; }
.st-gloss__item:target { background: var(--primary-soft); }
.st-gloss__item dt { font-weight: 700; font-size: 16px; line-height: 1.5; }
.st-gloss__item dt small { display: block; margin-top: 2px; color: var(--muted-text); font-size: 12px; font-weight: 400; }
.st-gloss__item dd { margin: 0; font-size: 15px; line-height: 1.85; }
.st-gloss__more { margin-top: 6px; font-size: 14px; }

@media (max-width: 900px) {
  .st-formwrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .st-formwrap__side { position: static; }
}
@media (max-width: 760px) {
  .st-form { padding: 20px 16px; }
  .st-gloss__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .st-info { padding-top: var(--space-6); }
  .st-body--plain table tbody th { white-space: normal; width: 34%; }
}

.st-body--plain table:not(:has(thead)) { min-width: 0; }
.st-body--plain td .st-fill { white-space: normal; }
.st-imgslot__cell--img { position: relative; overflow: hidden; border: 0; background: var(--bg-soft); padding: 0; }
.st-imgslot__cell--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-imgslot__tag { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 3px; background: rgba(36,39,34,.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.st-imgslot--filled figcaption .st-ico { display: none; }
.st-imgslot[data-cells="7"] .st-imgslot__grid, .st-imgslot[data-cells="8"] .st-imgslot__grid { grid-template-columns: repeat(4, 1fr); }
.st-video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #111; }
.st-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .st-imgslot[data-cells="4"] .st-imgslot__grid, .st-imgslot[data-cells="7"] .st-imgslot__grid, .st-imgslot[data-cells="8"] .st-imgslot__grid { grid-template-columns: repeat(2, 1fr); } }

.st-body .st-answer__label { margin: 0 !important; top: -15px; line-height: 1.6; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) { .st-answer { padding: 32px 16px 16px; } }

/* coming soon (affiliate gated) */
.st-soon { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.st-soon__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; filter: blur(3px) grayscale(.35); opacity: .55; pointer-events: none; user-select: none; }
.st-soon__tile { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.st-soon__bar { height: 9px; border-radius: 4px; background: var(--border); }
.st-soon__bar--s { width: 55%; }
.st-soon__panel { position: absolute; inset: 0; margin: auto; width: min(560px, calc(100% - 32px)); height: fit-content; padding: 26px 28px; border-radius: var(--radius-lg); background: rgba(255,255,255,.94); box-shadow: var(--shadow-pop); text-align: center; }
.st-soon__en { font-family: var(--font-serif-en); font-size: 13px; font-weight: 600; letter-spacing: .24em; color: var(--wood-text); }
.st-soon__title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-family: var(--font-mincho); font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--primary-dark); }
.st-soon__title .st-ico { flex: none; font-size: 22px; }
.st-soon__text { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--text-sub); }
.st-soon__links { margin-top: 12px; font-size: 14px; }
.st-soon--inline { margin-top: 1.6em; border: 1px dashed var(--border-strong); background: var(--bg-soft); }
.st-soon--inline .st-soon__panel { position: static; width: auto; box-shadow: none; background: transparent; }
.st-br-sp { display: none; }
@media (max-width: 1180px) { .st-soon__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .st-soon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-soon__panel { padding: 20px 16px; }
  .st-soon__title { font-size: 18px; } .st-br-sp { display: inline; }
}
.st-imgslot__cell--ill { background: #fff; border: 1px solid var(--border); }
.st-imgslot__cell--ill img { object-fit: contain; }

/* イラスト・図解は文字を読めるよう常に1列で大きく表示（タップで原寸表示） */
.st-imgslot--ill .st-imgslot__grid { grid-template-columns: 1fr !important; gap: 14px; }
.st-imgslot--ill .st-imgslot__cell { max-height: none; }
.st-imgslot__cell--ill a { display: block; width: 100%; height: 100%; }

/* キャンペーンのチラシ（images/07_pages/campaign-autumn-flyer.jpg を置くと表示） */
.st-flyer__fig { margin: 0 auto; max-width: 620px; }
.st-flyer__fig a { display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 14px 40px rgba(36,39,34,.16); transition: transform .35s ease, box-shadow .35s ease; }
.st-flyer__fig a:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(36,39,34,.22); }
.st-flyer__fig img { display: block; width: 100%; height: auto; }
.st-flyer__fig figcaption { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--text-sub); }

/* ===== 商品カード（記事内） ===== */
.st-goods { margin: 2.6em 0 0; }
.st-goods__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-body .st-goods__head h2, .st-goods__head h2 { margin: 0 !important; }
.st-goods__lead { margin-top: 10px !important; font-size: 14px; color: var(--text-sub); }
.st-goods__list { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; gap: 18px; }
.st-goods__item { display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; transition: box-shadow .3s ease, transform .3s ease; margin: 0 !important; }
.st-goods__item::before { display: none !important; }
.st-goods__item:hover { box-shadow: 0 14px 36px rgba(36,39,34,.12); transform: translateY(-2px); }
.st-goods__fig { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background: #f3efe6; }
.st-goods__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.st-goods__item:hover .st-goods__fig img { transform: scale(1.05); }
.st-goods__no { position: absolute; left: 10px; top: 10px; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; font-family: var(--font-en, inherit); }
.st-goods__cat { margin: 0 !important; font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .06em; }
.st-body .st-goods__name, .st-goods__name { margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 18px; line-height: 1.5; }
.st-goods__name::before, .st-goods__name::after { display: none !important; }
.st-goods__point { margin: 8px 0 0 !important; font-size: 14px; line-height: 1.8; }
.st-goods__spec { list-style: none; margin: 10px 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.st-goods__spec li { margin: 0 !important; padding: 3px 10px !important; border-radius: 999px; background: var(--bg-soft); font-size: 12px; }
.st-goods__spec li::before { display: none !important; }
.st-goods__price { margin: 12px 0 0 !important; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-goods__yen { font-size: 22px; font-weight: 700; color: var(--text); }
.st-goods__yen--none { font-size: 14px; color: var(--text-sub); }
.st-goods__price small { font-size: 11.5px; color: var(--text-sub); }
.st-goods__note { margin: 8px 0 0 !important; display: flex; gap: 6px; font-size: 12.5px; color: var(--text-sub); line-height: 1.7; }
.st-goods__note .st-ico { flex: none; margin-top: 3px; color: #a3601e; }
.st-goods__shops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.st-btn--rakuten { background: #bf0000 !important; border-color: #bf0000 !important; color: #fff !important; }
.st-btn--amazon { background: #232f3e !important; border-color: #232f3e !important; color: #fff !important; }
.st-goods__soon { margin: 14px 0 0 !important; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); font-size: 12.5px; color: var(--text-sub); }
.st-goods__disc { margin-top: 14px !important; font-size: 12px; color: var(--text-sub); }
@media (max-width: 640px) { .st-goods__item { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; } .st-goods__name { font-size: 16px; } .st-goods__yen { font-size: 19px; } }

/* ===================== トップ：視覚的なレイアウト（2026-11 改訂） ===================== */
/* ヒーローの検索窓を大きく＋キーワード */
.st-hero .st-search { width: min(600px, 100%); margin-top: 30px; }
.st-hero .st-search__field { height: 62px; padding-left: 26px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.st-hero .st-search input { font-size: 15.5px; }
.st-hero .st-search__submit { width: 48px; height: 48px; font-size: 22px; background: var(--primary); color: #fff; }
.st-hero .st-search__submit:hover { background: var(--primary-dark); color: #fff; }
.st-hero__kw { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 640px; }
.st-hero__kw > span { font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .04em; }
.st-hero__kw ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-hero__kw a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 12.5px; backdrop-filter: blur(4px); transition: background .2s; }
.st-hero__kw a:hover { background: rgba(255,255,255,.3); }

/* カテゴリから探す：縦長パネル（ホバーで広がる） */
.st-catpanel-sec { padding-top: 56px; }
.st-catpanels { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; height: 440px; }
.st-catpanels > li { flex: 1 1 0; min-width: 0; transition: flex-grow .55s cubic-bezier(.2,.7,.2,1); }
.st-catpanels > li:hover, .st-catpanels > li:focus-within { flex-grow: 2.7; }
.st-catpanel { position: relative; display: block; height: 100%; border-radius: 18px; overflow: hidden; color: #fff; isolation: isolate; box-shadow: 0 8px 24px rgba(36,39,34,.12); }
.st-catpanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); z-index: -2; }
.st-catpanel:hover img, .st-catpanel:focus-visible img { transform: scale(1.08); }
.st-catpanel__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,18,.55) 0%, rgba(20,24,18,.05) 38%, rgba(20,24,18,.15) 60%, rgba(20,24,18,.78) 100%); }
.st-catpanel__no { position: absolute; left: 14px; top: 14px; font-family: var(--font-mincho); font-size: 13px; letter-spacing: .1em; opacity: .9; }
.st-catpanel__name { position: absolute; right: 14px; top: 16px; writing-mode: vertical-rl; font-family: var(--font-mincho); font-size: 25px; font-weight: 600; letter-spacing: .18em; line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,.45); max-height: calc(100% - 120px); }
.st-catpanel__foot { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; }
.st-catpanel__en { grid-column: 1; font-size: 10.5px; letter-spacing: .16em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-catpanel__sub { grid-column: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity .35s .1s, transform .35s .1s; }
.st-catpanels > li:hover .st-catpanel__sub, .st-catpanels > li:focus-within .st-catpanel__sub { opacity: 1; transform: none; }
.st-catpanel__go { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--primary-dark); font-size: 15px; transition: transform .3s; }
.st-catpanel:hover .st-catpanel__go { transform: translateX(3px); }
@media (max-width: 1100px) {
  .st-catpanels { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .st-catpanels > li, .st-catpanels > li:hover { flex: 0 0 180px; height: 300px; scroll-snap-align: start; }
  .st-catpanel__sub { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .st-catpanel-sec { padding-top: 36px; }
  .st-catpanels > li, .st-catpanels > li:hover { flex-basis: 40vw; height: 58vw; max-height: 280px; }
  .st-catpanel__name { font-size: 20px; }
  .st-catpanel__sub { font-size: 11.5px; }
  .st-hero .st-search__field { height: 54px; padding-left: 18px; }
  .st-hero .st-search input { font-size: 14px; }
  .st-hero__kw > span { width: 100%; }
}
/* セクション見出し・カードを大きめに（トップ） */
@media (min-width: 900px) {
  .st-main--flush .st-sechead__title { font-size: 32px; }
  .st-main--flush .st-section { padding-top: 88px; }
  .st-main--flush .st-grid--3 { gap: 34px 26px; }
  .st-main--flush .st-grid--3 .st-card__title { font-size: 17px; line-height: 1.6; }
}
.st-main--flush .st-card .st-media img, .st-main--flush .st-cases .st-media img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.st-main--flush .st-card:hover .st-media img, .st-main--flush .st-cases a:hover .st-media img { transform: scale(1.07); }
.st-main--flush .st-card .st-media, .st-main--flush .st-cases .st-media { border-radius: 14px; overflow: hidden; }
@media (min-width: 761px) {
  .st-hero { height: clamp(560px, 46vw, 680px); }
  .st-hero__inner { justify-content: center; padding-top: 0; padding-bottom: 40px; }
}
/* 横並びカードの画像がはみ出して文字に重なる不具合の修正 */
.st-card--row > * { min-width: 0; }
.st-card--row > .st-media { width: 100%; height: auto; display: block; }
.st-card--row > .st-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .st-catpanels > li, .st-catpanels > li:hover { flex-basis: 42vw; height: 68vw; max-height: 300px; } }
@media (min-width: 761px) { .st-top-new .st-grid.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; } }
/* 施工例ギャラリー：大小を組み合わせたタイル配置（PC） */
@media (min-width: 1024px) {
  .st-main--flush .st-cases { overflow: visible; }
  .st-main--flush .st-cases ul { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 22px; }
  .st-main--flush .st-cases li:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .st-main--flush .st-cases li:nth-child(2) { grid-column: 3 / 5; }
  .st-main--flush .st-cases li:nth-child(1) .st-media { aspect-ratio: auto; height: 448px; }
  .st-main--flush .st-cases li:nth-child(n+2) .st-media { aspect-ratio: auto; height: 172px; }
  .st-main--flush .st-cases li:nth-child(1) .st-cases__title { font-size: 18px; }
}

/* ===== 広告枠 ===== */
.st-ad { position: relative; display: grid; place-items: center; margin: 0 auto; text-align: center; }
.st-ad__label { position: absolute; top: 6px; left: 10px; font-size: 10.5px; letter-spacing: .1em; color: var(--text-sub); }
.st-ad--empty { border: 1.5px dashed var(--border-strong, #c9ccc4); border-radius: var(--radius-md); background: repeating-linear-gradient(45deg, rgba(0,0,0,.015) 0 10px, transparent 10px 20px); color: var(--text-sub); }
.st-ad__ph { font-size: 12.5px; letter-spacing: .04em; }
.st-ad--wide { width: 100%; max-width: 970px; min-height: 120px; margin-top: 56px; }
.st-ad--infeed { width: 100%; min-height: 140px; }
.st-ad--side { width: 100%; min-height: 280px; margin-top: 20px; }
@media (max-width: 640px) { .st-ad--wide { min-height: 100px; margin-top: 36px; } .st-ad--side { min-height: 250px; } }
.st-home-new .st-home-new__ad { grid-column: 1 / -1; }
.st-home-new__more { margin-top: 30px; text-align: center; }

/* ===== これだけは知っておきたい基礎知識 ===== */
.st-basics__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 20px; counter-reset: none; }
.st-basic { display: block; color: inherit; }
.st-basic__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.st-basic__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.st-basic:hover .st-basic__media img { transform: scale(1.07); }
.st-basic__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,18,0) 40%, rgba(20,24,18,.72) 100%); }
.st-basic__topic { position: absolute; left: 14px; bottom: 12px; z-index: 1; color: #fff; font-family: var(--font-mincho); font-size: 22px; font-weight: 600; letter-spacing: .06em; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.st-basic__topic small { display: block; font-family: var(--font-en, inherit); font-size: 10.5px; letter-spacing: .14em; opacity: .9; font-weight: 500; }
.st-basic__title { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-basic:hover .st-basic__title { color: var(--primary); }
@media (max-width: 1023px) { .st-basics__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .st-basics__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .st-basic__topic { font-size: 17px; left: 10px; bottom: 9px; } .st-basic__title { font-size: 13px; } }

/* 新着記事が長くなっても、ランキングは上詰め＋追従 */
.st-split--top { align-items: start !important; }
@media (min-width: 1101px) { .st-side--top { position: sticky; top: 96px; } .st-side--top .st-ranking, .st-side--top > * { height: auto !important; } }
.st-side--top .st-box.st-rank { flex: none; }
.st-side--top .st-rank ol[role="tabpanel"]:not([hidden]) { flex: none; justify-content: flex-start; gap: 4px; }

/* フォーム横の案内：.st-ul は独自の点を描くので、ブラウザ標準の点を消す（二重表示の修正 11/5） */
.st-formwrap__side .st-ul { list-style: none; padding-left: 0; }