/* ds.css — 部品層。トークンだけを使う（色・余白・書体・角丸・影・動き・アイコン）。
   余白は --ds-density を掛ける。JS なしで動く。 */
body {
  --s1: calc(var(--spacing-scale-1) * var(--ds-density, 1));
  --s2: calc(var(--spacing-scale-2) * var(--ds-density, 1));
  --s3: calc(var(--spacing-scale-3) * var(--ds-density, 1));
  --s4: calc(var(--spacing-scale-4) * var(--ds-density, 1));
  --s5: calc(var(--spacing-scale-5) * var(--ds-density, 1));
  --s6: calc(var(--spacing-scale-6) * var(--ds-density, 1));
  --s7: calc(var(--spacing-scale-7) * var(--ds-density, 1));
  --s8: calc(var(--spacing-scale-8) * var(--ds-density, 1));
  --card-border: var(--ds-card-border, 1px solid var(--color-border));
  --ease: var(--motion-duration-fast) var(--motion-easing-standard);
  margin: 0;
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--typography-family-body);
  font-size: var(--typography-size-body);
  line-height: var(--typography-line-height-body-default);
  letter-spacing: var(--typography-letter-spacing-body);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
.ds-page h1, .ds-page h2, .ds-page h3, .ds-page h4 {
  font-family: var(--typography-family-heading);
  font-weight: var(--typography-weight-heading);
  line-height: var(--typography-line-height-heading);
  letter-spacing: var(--typography-letter-spacing-heading);
  margin: 0; text-shadow: none; text-align: left;
}
.ds-page p { margin: 0; max-inline-size: calc(var(--typography-measure-body-max-chars) * 1em); text-align: left; }
.ds-page ul, .ds-page ol { margin: 0; padding: 0; list-style: none; }
:where(.ds-page) a { color: inherit; text-underline-offset: 0.2em; }
.ds-muted { color: var(--color-text-muted); }
.ds-caption { font-size: var(--typography-size-caption); line-height: var(--typography-line-height-caption); color: var(--color-text-muted); }
.ds-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* focus（床：全ての操作要素） */
:where(a, button, summary, input, select, textarea, label.ds-tab):focus-visible {
  outline: 2px solid var(--color-text); outline-offset: 2px;
}

/* layout */
.ds-wrap { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--spacing-gutter); }
.ds-section { padding-block: calc(var(--s7)); }
.ds-section--alt { background: var(--color-surface); }
.ds-stack > * + * { margin-block-start: var(--s3); }
.ds-icon { inline-size: var(--icon-size-control); block-size: var(--icon-size-control); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ds-icon--inline { inline-size: var(--icon-size-inline); block-size: var(--icon-size-inline); }
.ds-icon--feature { inline-size: var(--icon-size-feature); block-size: var(--icon-size-feature); }

/* button */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--icon-gap);
  min-block-size: 44px; padding: var(--s3) var(--s4);
  font: inherit; font-weight: var(--typography-weight-heading); line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-main); border-radius: var(--radius-control);
  background: var(--color-main); color: var(--color-on-main);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.ds-btn .ds-icon { transition: transform var(--ease); }
.ds-btn:hover .ds-icon { transform: translateX(calc(var(--motion-distance-small, 4px) / 2)); }
.ds-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.ds-btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-main); }
.ds-btn--secondary:hover { background: var(--color-main); border-color: var(--color-main); color: var(--color-on-main); }
.ds-btn--text { background: transparent; border-color: transparent; color: var(--color-text); padding-inline: var(--s2); text-decoration: underline; text-underline-offset: 0.25em; }
.ds-btn--text:hover { background: var(--color-surface); border-color: transparent; color: var(--color-text); }
.ds-btn--sm { min-block-size: 36px; padding: var(--s2) var(--s3); font-size: var(--typography-size-caption); }
.ds-btn--lg { min-block-size: 52px; padding: var(--s3) var(--s5); font-size: var(--typography-size-lead); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); border-style: dashed; cursor: not-allowed; pointer-events: none; }
.ds-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* badge / tag */
.ds-badge { display: inline-flex; align-items: center; gap: var(--s1); padding: calc(var(--s1) / 2) var(--s2); font-size: var(--typography-size-caption); line-height: var(--typography-line-height-caption); font-weight: var(--typography-weight-heading); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-on-accent); }
.ds-badge--tag { background: transparent; color: var(--color-text); border: 1px solid var(--color-text-muted); }

/* header + nav */
.ds-header { background: var(--color-base); border-block-end: var(--card-border); border-block-end-color: var(--color-border); position: relative; }
.ds-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-block-size: 64px; }
.ds-logo { font-family: var(--typography-family-heading); font-weight: var(--typography-weight-heading); font-size: var(--typography-size-lead); text-decoration: none; color: var(--color-text); }
.ds-nav__list { display: none; gap: var(--s4); align-items: center; }
.ds-nav__list a, .ds-nav__m a { text-decoration: none; padding-block: var(--s2); border-block-end: 2px solid transparent; transition: border-color var(--ease); display: inline-block; }
.ds-nav__list a:hover, .ds-nav__m a:hover { border-block-end-color: var(--color-text-muted); }
.ds-nav a[aria-current="page"] { border-block-end-color: var(--color-text); font-weight: var(--typography-weight-heading); }
.ds-nav__m summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--icon-gap); min-block-size: 44px; padding-inline: var(--s2); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.ds-nav__m summary::-webkit-details-marker { display: none; }
.ds-nav__m[open] summary { background: var(--color-surface); }
.ds-nav__m ul { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--color-base); border-block-end: var(--card-border); padding: var(--s3) var(--spacing-gutter); display: grid; gap: var(--s1); z-index: 5; }
.ds-nav__m li a { display: block; min-block-size: 44px; padding-block: var(--s3); }
.ds-nav__cta { display: none; }
@media (min-width: 768px) {
  .ds-nav__list, .ds-nav__cta { display: flex; }
  .ds-nav__m { display: none; }
}

/* hero */
.ds-hero { padding-block: var(--s7); }
.ds-hero h1 { font-size: var(--typography-size-title); }
/* R-0119：見出しは意味の区切りで改行する（語の途中で折らない）。B-1：見出しとリードの間を空ける */
.ds-page h1, .ds-page h2 { word-break: auto-phrase; text-wrap: balance; }
.ds-hero h1 + .ds-hero__lead, .ds-hero__lead { margin-block-start: var(--spacing-heading-to-body, var(--s3)); }
.ds-hero__lead + * { margin-block-start: var(--s5); }
.ds-hero__lead { font-size: var(--typography-size-lead); color: var(--color-text-muted); }
.ds-hero--split .ds-wrap { display: grid; gap: var(--s5); align-items: center; }
.ds-hero--split h1 { font-size: clamp(var(--typography-size-title), 6vw, calc(var(--typography-size-title) * 1.75)); }
.ds-hero__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); overflow: hidden; }
.ds-hero__media::before { content: ""; position: absolute; inset-inline-start: 12%; inset-block-end: -12%; inline-size: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--color-main); }
.ds-hero__media::after { content: ""; position: absolute; inset-inline-end: 10%; inset-block-start: 14%; inline-size: 34%; block-size: 38%; background: var(--color-accent); border-radius: var(--radius-card); }
.ds-hero__media > i { position: absolute; inset-inline-start: 8%; inset-block-start: 14%; inline-size: 40%; block-size: 6px; background: var(--color-text-muted); box-shadow: 0 calc(var(--s3)) 0 var(--color-border), 0 calc(var(--s3) * 2) 0 var(--color-border); }
.ds-hero--type { background: var(--color-surface); }
.ds-hero--type h1 { font-size: clamp(var(--typography-size-title), 10vw, calc(var(--typography-size-title) * 2.8)); line-height: 1.2; }
.ds-hero--type .ds-wrap > * + * { margin-block-start: var(--s4); }
@media (min-width: 1024px) { .ds-hero--split .ds-wrap { grid-template-columns: 1.1fr 1fr; gap: var(--s7); } }

/* section heading */
.ds-sechead { margin-block-end: var(--s5); }
.ds-sechead > * + * { margin-block-start: var(--spacing-heading-to-body); }
.ds-eyebrow { font-size: var(--typography-size-caption); font-weight: var(--typography-weight-heading); letter-spacing: 0.1em; color: var(--color-text-muted); text-transform: uppercase; display: flex; align-items: center; gap: var(--s2); }
.ds-eyebrow::before { content: ""; inline-size: var(--s4); block-size: 2px; background: var(--color-text); }
.ds-sechead h2 { font-size: var(--typography-size-heading); }
.ds-sechead__lead { font-size: var(--typography-size-lead); color: var(--color-text-muted); }

/* card base + feature grid */
.ds-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.ds-card { background: var(--color-base); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: var(--s4); }
.ds-section--alt .ds-card { background: var(--color-base); }
.ds-feature > * + * { margin-block-start: var(--spacing-heading-to-body); }
.ds-feature h3 { font-size: var(--typography-size-lead); }
.ds-feature__no { font-family: var(--typography-family-heading); font-size: var(--typography-size-heading); font-weight: var(--typography-weight-heading); color: var(--color-text-muted); display: block; }
@media (min-width: 1024px) { .ds-grid--3 { grid-template-columns: repeat(3, 1fr); } .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) and (max-width: 1023px) { .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* stats */
.ds-stats { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.ds-stat { border-inline-start: 3px solid var(--color-main); padding-inline-start: var(--s3); }
.ds-stat dt { font-size: var(--typography-size-caption); color: var(--color-text-muted); order: 2; }
.ds-stat dd { margin: 0; font-family: var(--typography-family-heading); font-weight: var(--typography-weight-heading); font-size: var(--typography-size-title); line-height: 1.2; }
.ds-stat { display: flex; flex-direction: column; }
.ds-stat dd small { font-size: var(--typography-size-body); margin-inline-start: var(--s1); }
@media (min-width: 600px) { .ds-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-stats { grid-template-columns: repeat(4, 1fr); } }

/* flow / steps */
.ds-steps { display: grid; gap: var(--s5); counter-reset: step; position: relative; }
.ds-step { position: relative; padding-inline-start: calc(var(--s6) + var(--s2)); counter-increment: step; }
.ds-step::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: var(--s6); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--color-main); color: var(--color-on-main); font-family: var(--typography-family-heading); font-weight: var(--typography-weight-heading); z-index: 1; }
.ds-step::after { content: ""; position: absolute; inset-inline-start: calc(var(--s6) / 2 - 1px); inset-block-start: var(--s6); inset-block-end: calc(var(--s5) * -1); inline-size: 2px; background: var(--color-border); }
.ds-step:last-child::after { display: none; }
.ds-step > * + * { margin-block-start: var(--spacing-heading-to-body); }
.ds-step h3 { font-size: var(--typography-size-lead); padding-block-start: var(--s2); }
@media (min-width: 1024px) {
  .ds-steps { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .ds-step { padding-inline-start: 0; padding-block-start: calc(var(--s6) + var(--s3)); }
  .ds-step::after { inset-inline-start: var(--s6); inset-inline-end: calc(var(--s4) * -1); inset-block-start: calc(var(--s6) / 2 - 1px); inset-block-end: auto; inline-size: auto; block-size: 2px; }
}

/* pricing */
.ds-plan { display: flex; flex-direction: column; gap: var(--s3); position: relative; }
.ds-plan--rec { border: 3px solid var(--color-main); }
.ds-plan__tag { align-self: flex-start; min-block-size: calc(var(--s5)); }
.ds-plan__price { font-family: var(--typography-family-heading); font-weight: var(--typography-weight-heading); font-size: var(--typography-size-title); line-height: 1.2; }
.ds-plan__price small { font-size: var(--typography-size-caption); font-weight: normal; color: var(--color-text-muted); }
.ds-plan ul { display: grid; gap: var(--s2); flex: 1; }
.ds-plan li { display: flex; gap: var(--s2); align-items: baseline; padding-block: var(--s2); border-block-end: 1px solid var(--color-border); }
.ds-plan li span:first-child { color: var(--color-text-muted); flex: 0 0 6em; }
.ds-plan .ds-btn { inline-size: 100%; }

/* testimonial */
.ds-quote { margin: 0; display: grid; gap: var(--s3); }
.ds-quote blockquote { margin: 0; font-size: var(--typography-size-lead); line-height: var(--typography-line-height-body-max); }
.ds-quote figcaption { display: flex; align-items: center; gap: var(--s3); }
.ds-quote__av { inline-size: var(--s6); aspect-ratio: 1; border-radius: 50%; background: var(--color-surface); border: var(--card-border); display: grid; place-items: center; color: var(--color-text-muted); }

/* FAQ */
.ds-faq { border-block-start: 1px solid var(--color-border); }
.ds-faq details { border-block-end: 1px solid var(--color-border); }
.ds-faq summary { list-style: none; cursor: pointer; display: flex; gap: var(--s3); align-items: center; min-block-size: 56px; padding-block: var(--s3); font-weight: var(--typography-weight-heading); transition: background-color var(--ease); }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary:hover { background: var(--color-surface); }
.ds-faq summary .ds-q { color: var(--color-text-muted); font-family: var(--typography-family-heading); }
.ds-faq summary .ds-icon { margin-inline-start: auto; transition: transform var(--motion-duration-fast) var(--motion-easing-out); }
.ds-faq details[open] summary .ds-icon { transform: rotate(180deg); }
.ds-faq__a { padding: 0 0 var(--s4) calc(var(--s3) + 1.5em); }

/* CTA band */
.ds-cta { background: var(--color-main); color: var(--color-on-main); padding-block: var(--s6); }
.ds-cta .ds-wrap { display: grid; gap: var(--s4); align-items: center; }
.ds-cta h2 { font-size: var(--typography-size-heading); }
.ds-cta p { margin-block-start: var(--s2); }
.ds-cta :focus-visible { outline-color: var(--color-on-main); }
.ds-cta .ds-btn { background: var(--color-on-main); color: var(--color-main); border-color: var(--color-on-main); }
.ds-cta .ds-btn:hover { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-on-main); }
.ds-cta .ds-btn--secondary { background: transparent; color: var(--color-on-main); }
.ds-cta .ds-btn--secondary:hover { background: var(--color-on-main); color: var(--color-main); }
@media (min-width: 1024px) { .ds-cta .ds-wrap { grid-template-columns: 1fr auto; } }

/* form */
.ds-form { display: grid; gap: var(--s4); max-inline-size: 36rem; }
.ds-field { display: grid; gap: var(--s2); }
.ds-label { font-weight: var(--typography-weight-heading); display: flex; align-items: center; gap: var(--s2); }
.ds-help { font-size: var(--typography-size-caption); line-height: var(--typography-line-height-caption); color: var(--color-text-muted); }
.ds-input { font: inherit; color: var(--color-text); background: var(--color-base); inline-size: 100%; min-block-size: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--color-text-muted); border-radius: var(--radius-control); transition: border-color var(--ease), background-color var(--ease); }
textarea.ds-input { min-block-size: calc(var(--s8) + var(--s3)); resize: vertical; }
.ds-input:hover { border-color: var(--color-text); }
.ds-input:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; border-color: var(--color-text); }
.ds-input[aria-invalid="true"] { border: 2px solid var(--color-feedback-error); }
.ds-input:disabled { background: var(--color-surface); color: var(--color-text-muted); border-style: dashed; cursor: not-allowed; }
.ds-error { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--typography-size-caption); color: var(--color-feedback-error); font-weight: var(--typography-weight-heading); }
.ds-error .ds-icon { inline-size: var(--icon-size-inline); block-size: var(--icon-size-inline); margin-block-start: 0.2em; }

/* tabs (radio + label) */
.ds-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ds-tabs__list { display: flex; border-block-end: 1px solid var(--color-border); overflow-x: auto; }
.ds-tab { padding: var(--s3) var(--s4); min-block-size: 44px; cursor: pointer; border-block-end: 3px solid transparent; margin-block-end: -1px; white-space: nowrap; color: var(--color-text-muted); transition: color var(--ease), background-color var(--ease), border-color var(--ease); }
.ds-tab:hover { color: var(--color-text); background: var(--color-surface); }
.ds-tabs__panel { display: none; padding-block: var(--s4); }
.ds-tabs > input:nth-of-type(1):checked ~ .ds-tabs__list .ds-tab:nth-of-type(1),
.ds-tabs > input:nth-of-type(2):checked ~ .ds-tabs__list .ds-tab:nth-of-type(2),
.ds-tabs > input:nth-of-type(3):checked ~ .ds-tabs__list .ds-tab:nth-of-type(3) { color: var(--color-text); border-block-end-color: var(--color-main); font-weight: var(--typography-weight-heading); }
.ds-tabs > input:nth-of-type(1):checked ~ .ds-tabs__panel:nth-of-type(1),
.ds-tabs > input:nth-of-type(2):checked ~ .ds-tabs__panel:nth-of-type(2),
.ds-tabs > input:nth-of-type(3):checked ~ .ds-tabs__panel:nth-of-type(3) { display: block; }
.ds-tabs > input:nth-of-type(1):focus-visible ~ .ds-tabs__list .ds-tab:nth-of-type(1),
.ds-tabs > input:nth-of-type(2):focus-visible ~ .ds-tabs__list .ds-tab:nth-of-type(2),
.ds-tabs > input:nth-of-type(3):focus-visible ~ .ds-tabs__list .ds-tab:nth-of-type(3) { outline: 2px solid var(--color-text); outline-offset: -2px; }

/* breadcrumb */
.ds-crumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--typography-size-caption); }
.ds-crumb li { display: flex; align-items: center; gap: var(--s2); }
.ds-crumb li + li::before { content: "/"; color: var(--color-text-muted); }
.ds-crumb a { color: var(--color-text-muted); transition: color var(--ease); }
.ds-crumb a:hover { color: var(--color-text); }
.ds-crumb [aria-current="page"] { font-weight: var(--typography-weight-heading); }

/* pagination */
.ds-pager ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ds-pager a { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-inline-size: 44px; min-block-size: 44px; padding-inline: var(--s3); text-decoration: none; border: 1px solid var(--color-border); border-radius: var(--radius-control); transition: background-color var(--ease), border-color var(--ease); }
.ds-pager a:hover { background: var(--color-surface); border-color: var(--color-text-muted); }
.ds-pager a[aria-current="page"] { background: var(--color-main); color: var(--color-on-main); border-color: var(--color-main); font-weight: var(--typography-weight-heading); }

/* footer */
.ds-footer { background: var(--color-main); color: var(--color-on-main); padding-block: var(--s6) var(--s4); }
.ds-footer :focus-visible { outline-color: var(--color-on-main); }
.ds-footer__cols { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; }
.ds-footer h3 { font-size: var(--typography-size-body); margin-block-end: var(--s3); }
.ds-footer li + li { margin-block-start: var(--s1); }
.ds-footer a { display: inline-block; padding-block: var(--s1); transition: opacity var(--ease), text-decoration-color var(--ease); }
.ds-footer a:hover { text-decoration-thickness: 2px; }
.ds-footer__contact { margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--color-on-main); display: grid; gap: var(--s2); }
.ds-footer small { display: block; margin-block-start: var(--s4); font-size: var(--typography-size-caption); }
@media (min-width: 1024px) { .ds-footer__cols { grid-template-columns: repeat(4, 1fr); } .ds-footer__contact { grid-template-columns: 1fr auto; align-items: end; } }

@media (prefers-reduced-motion: reduce) {
  .ds-btn:hover .ds-icon { transform: none; }
  .ds-faq details[open] summary .ds-icon { transition: none; }
}
.ds-footer .ds-btn--secondary { color: var(--color-on-main); border-color: var(--color-on-main); }
.ds-footer .ds-btn--secondary:hover { background: var(--color-on-main); color: var(--color-main); }

/* ---- テーマの署名（逸脱 D。data/themes/TH-xx.json の deviations）。床 F を崩さない範囲で、各テーマ 1〜2 個だけ ---- */
/* 紙の繊維（TH-02・03・11）：SVG のノイズを薄く重ねる。画像ファイルは使わない */
[data-theme="TH-02"] body, [data-theme="TH-03"] body, [data-theme="TH-11"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* TH-03 紙とインク：見出しを図にする（画面幅いっぱいの大きな文字）、端で切れた円 */
[data-theme="TH-03"] .ds-hero--type h1 { font-size: clamp(var(--typography-size-title), 13vw, calc(var(--typography-size-title) * 3.4)); letter-spacing: -0.02em; }
[data-theme="TH-03"] .ds-hero--type { position: relative; overflow: hidden; }
[data-theme="TH-03"] .ds-hero--type::after { content: ""; position: absolute; inset-inline-end: -12vw; inset-block-start: -10vw; inline-size: 36vw; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); opacity: .9; z-index: 0; }
[data-theme="TH-03"] .ds-hero--type .ds-wrap { position: relative; z-index: 1; }
/* TH-04 自然素材：地と同じ色の濃淡の波 */
[data-theme="TH-04"] .ds-hero--type { background: radial-gradient(120% 60% at 100% 0%, var(--color-border) 0 40%, transparent 41%), var(--color-surface); }
/* TH-05 やわらかな透明感：淡いグラデーションを FV の 1 面だけ */
[data-theme="TH-05"] .ds-hero--split { background: linear-gradient(160deg, var(--color-surface), var(--color-base) 60%); }
/* TH-12 先進プロダクト：差し色の淡いグラデーションを FV だけ */
[data-theme="TH-12"] .ds-hero--split { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-base)), var(--color-base) 70%); }
/* TH-07 色面ポップ：地を 1 色で塗る（地の色はテーマの base）。見出しは極太 */
[data-theme="TH-07"] .ds-hero--type h1 { letter-spacing: -0.01em; }
/* TH-08 実直な力強さ：見出しの下に太い罫線 */
[data-theme="TH-08"] .ds-sechead h2 { border-block-end: 6px solid var(--color-accent); padding-block-end: var(--s2); display: inline-block; }
/* TH-11 和紙と墨：大きな文字型の見出しを縦書きに（PC だけ。スマホは横書き） */
@media (min-width: 1024px) {
  [data-theme="TH-11"] .ds-hero--type h1 { writing-mode: vertical-rl; inline-size: 7em; block-size: auto; margin-inline: 0; margin-block-start: var(--s4); font-size: clamp(var(--typography-size-title), 6vw, calc(var(--typography-size-title) * 2)); }
}