/* =========================================================
   LA-LUCATO — theme S（2026-10-29 16:30 アートディレクション）
   素材：漆喰の白・墨・緑青（配管から始まった会社＝銅管の錆の色）。
   書体：本文 Zen Kaku Gothic New／見出し Shippori Mincho（自前配信・CSP self）。
   一つだけ大胆に：トップの理念を縦組みの明朝で、実際の施工写真の隣に置く。他は静かに。
   下の 01〜11 は既存の部品の土台（theme A と同じ構造）。末尾の 12 が作り直しの層。
   ========================================================= */
/* ==================================================
   01 / TOKENS
   ================================================== */
:root {
  color-scheme: light;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --bg: #ecebe6;          /* 漆喰 */
  --surface: #e3e2dc;     /* 漆喰の影 */
  --surface-raised: #f4f3ef;
  --text: #1d201f;        /* 墨 */
  --muted: #5a5f5c;       /* 鉛 */
  --accent: #3e7a70;      /* 緑青（銅管の錆） */
  --accent-hover: #2d5d55;
  --ink: #1d201f;
  --line: rgba(29, 32, 31, 0.14);
  --control: rgba(29, 32, 31, 0.42);
  --logo-surface: transparent;
  --wrap: 78rem;
  --gutter: clamp(20px, 5vw, 72px);
  --section-space: clamp(4rem, 8vw, 7.5rem);
  --anchor-offset: 1rem;
  --fab-clearance: 6rem;
  --radius: 1px;
}

/* ==================================================
   02 / RESET & LAYOUT
   ================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--anchor-offset);
  scroll-padding-block-end: calc(var(--fab-clearance) + env(safe-area-inset-bottom, 0px));
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 750; }
h2 { font-size: clamp(1.625rem, 3.2vw, 2.625rem); line-height: 1.55; text-wrap: balance; }
h3 { line-height: 1.65; }
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-underline-offset: 0.25em; }
button, input, textarea, select { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
button { border-radius: var(--radius); }
a, button, summary, input, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }

.wrap {
  inline-size: min(var(--wrap), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.hero-grid,
.hero-detail-grid,
.proof-grid,
.story-grid,
.service-grid,
.four,
.flow { display: grid; }

:where(.header-inner, .hero-grid, .hero-detail-grid, .proof-grid,
  .story-grid, .service-grid, .four, .flow, .contact-buttons) > * {
  min-inline-size: 0;
}

/* ==================================================
   03 / COMPONENTS
   ================================================== */
:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 4px;
}

:where(a, button, summary, input, textarea, [tabindex]) {
  scroll-margin-block: var(--anchor-offset) calc(var(--fab-clearance) + 1rem);
}

.eyebrow,
.proof-tag {
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.proof-tag { color: var(--accent); }
.lead { max-inline-size: 65ch; color: var(--muted); }
.small, .line-name, .disclosure {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.9;
}

.contact-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.btn,
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 52px;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.btn-line,
.header-cta {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.btn-mail { background: var(--surface-raised); }
.btn-chat { grid-column: 1 / -1; }
.btn-ig { padding-inline: 1.5rem; border-color: var(--accent); }

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: 0.625rem 2rem 0.625rem 0;
  border-block-end: 1px solid var(--control);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.8;
  text-decoration: none;
}

.text-link::after,
.service-card::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.5rem;
  inset-block-start: calc(50% - 0.25rem);
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-block-start: 1px solid var(--accent);
  border-inline-end: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* チャットの開閉・送受信は ChatWidget.astro。非表示時は .chat-panel に hidden 属性。 */
.chat-fab {
  position: fixed;
  z-index: 50;
  inset-inline-end: var(--gutter);
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 52px;
  max-inline-size: calc(100% - 2rem);
  padding: 0.75rem 1.125rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 4px 20px #00000040;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.6;
}

.chat-fab::before {
  content: "";
  inline-size: 1rem;
  block-size: 0.8125rem;
  border: 1px solid currentColor;
  border-radius: 1px;
}

.chat-panel {
  position: fixed;
  z-index: 60;
  inset: auto var(--gutter) calc(5.25rem + env(safe-area-inset-bottom, 0px)) auto;
  display: flex;
  flex-direction: column;
  inline-size: min(26rem, calc(100% - 2rem));
  block-size: min(38rem, calc(100vh - 7rem - env(safe-area-inset-bottom, 0px)));
  block-size: min(38rem, calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px)));
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 48px #00000066;
}

.chat-head {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--line);
  background: var(--bg);
}

.chat-head :is(h2, h3, p) { font-size: 1rem; line-height: 1.6; }
.chat-head button {
  flex: 0 0 44px;
  inline-size: 44px;
  min-block-size: 44px;
  border: 1px solid var(--control);
  background: transparent;
}

.chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  min-block-size: 6rem;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 1rem;
}

.chat-msg {
  flex: 0 0 auto;
  max-inline-size: 92%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-msg.bot {
  align-self: flex-start;
  border-inline-start: 2px solid var(--accent);
  background: var(--surface-raised);
  color: var(--text);
}

.chat-msg.me {
  align-self: flex-end;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.chat-msg a { display: inline-block; min-inline-size: 44px; min-block-size: 44px; padding-block: 0.5rem; }
.chat-msg.me :focus-visible { outline-color: var(--ink); }

.chat-form {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.625rem;
  padding: 1rem;
  border-block-start: 1px solid var(--line);
}

.chat-form label { grid-column: 1 / -1; font-size: 0.8125rem; }
.chat-form :is(input, textarea) {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 52px;
  max-block-size: 9rem;
  padding: 0.75rem;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.chat-form ::placeholder { color: var(--muted); opacity: 1; }
.chat-form button {
  min-inline-size: 52px;
  min-block-size: 52px;
  padding: 0.75rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

.chat-form button:disabled { border-color: var(--control); background: var(--surface-raised); color: var(--muted); cursor: not-allowed; }
.chat-note { flex: 0 0 auto; padding: 0 1rem 1rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.8; }
.chat-handoff { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; padding: 0 1rem 1rem; }
.chat-handoff .btn { font-size: 0.8125rem; }
.chat-handoff p { grid-column: 1 / -1; font-size: 0.8125rem; }
.chat-head p { font-weight: 700; }
.chat-note a { color: var(--accent); }

@media (max-height: 35rem) {
  .chat-panel {
    inset-block: 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    block-size: auto;
  }
}

@media (hover: hover) {
  .btn:hover, .text-link:hover, .service-card:hover { border-color: var(--accent); background: var(--surface-raised); }
  .btn-line:hover, .header-cta:hover, .chat-fab:hover { background: var(--accent-hover); color: var(--ink); }
  .text-link:hover { color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .header-cta, .text-link, .service-card, .chat-fab {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==================================================
   04 / SECTIONS
   ================================================== */
.site-header { position: relative; z-index: 30; border-block-end: 1px solid var(--line); background: var(--bg); }
.header-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; min-block-size: 76px; }
.brand { display: grid; place-items: center; justify-self: start; inline-size: 9.5rem; max-inline-size: 100%; min-block-size: 44px; padding: 0.375rem 0.5rem; background: var(--logo-surface); border-radius: var(--radius); }
.brand img { inline-size: 100%; }
.header-cta { min-block-size: 44px; padding: 0.625rem 0.875rem; font-size: 0.875rem; }
.nav-desktop { display: none; }
.nav-mobile { justify-self: end; }
.nav-mobile:not([open]) nav { display: none; }
.menu-toggle { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--control); border-radius: var(--radius); list-style: none; }
.menu-toggle::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; inline-size: 20px; block-size: 1px; background: currentColor; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-icon::before { inset-block-start: -6px; }
.menu-icon::after { inset-block-start: 6px; }
.nav-mobile[open] .menu-icon { background: transparent; }
.nav-mobile[open] .menu-icon::before { inset-block-start: 0; transform: rotate(45deg); }
.nav-mobile[open] .menu-icon::after { inset-block-start: 0; transform: rotate(-45deg); }
.nav-mobile nav { position: absolute; inset-inline: 0; inset-block-start: 100%; padding: 0.5rem 1.25rem 1.25rem; border: 1px solid var(--control); background: var(--surface); box-shadow: 0 12px 24px #00000033; }
.nav-mobile a { display: flex; align-items: center; min-block-size: 52px; padding-block: 0.75rem; border-block-end: 1px solid var(--line); text-decoration: none; }

.hero { padding-block: clamp(2rem, 4.5vw, 4.5rem) 2.5rem; }
.hero-grid { gap: 1.75rem; align-items: center; }
.eyebrow { max-inline-size: 45em; margin-block-end: 1.5rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--accent); color: var(--muted); }
.hero h1 { font-size: clamp(1.875rem, 5.1vw, 3.875rem); line-height: 1.55; letter-spacing: -0.035em; }
.hero h1 span { display: block; }
.hero-sub { margin-block-start: 1.25rem; font-size: clamp(1.0625rem, 1.7vw, 1.375rem); font-weight: 700; line-height: 1.85; text-wrap: balance; }
.hero-sub span, .portrait-role .role-part { display: inline-block; max-inline-size: 100%; }
.portrait { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; max-inline-size: 32rem; border: 1px solid var(--line); background: var(--surface); }
.portrait::before, .portrait::after { content: ""; position: absolute; inline-size: 12px; block-size: 12px; pointer-events: none; }
.portrait::before { inset-block-start: -1px; inset-inline-start: -1px; border-block-start: 2px solid var(--accent); border-inline-start: 2px solid var(--accent); }
.portrait::after { inset-block-end: -1px; inset-inline-end: -1px; border-block-end: 2px solid var(--accent); border-inline-end: 2px solid var(--accent); }
.portrait img { inline-size: 100%; aspect-ratio: 800 / 1073; object-fit: cover; }
.portrait figcaption { min-inline-size: 0; padding: 1rem; }
.portrait figcaption > span { display: block; }
.portrait-role { color: var(--muted); font-size: 0.75rem; line-height: 1.8; }
.portrait-name { margin-block: 0.375rem; font-size: 1.625rem; font-weight: 750; line-height: 1.5; letter-spacing: 0.08em; }
.portrait-qual { color: var(--accent); font-size: 0.8125rem; line-height: 1.8; }

.proof { border-block: 1px solid var(--line); }
.proof-grid > li { padding-block: 1.5rem; }
.proof-grid > li + li { border-block-start: 1px solid var(--line); }
.proof-big { margin-block: 0.375rem 0.625rem; font-size: clamp(1.5rem, 2.25vw, 1.875rem); font-weight: 750; line-height: 1.5; }
.proof-grid > li > p:last-child { color: var(--muted); font-size: 0.875rem; line-height: 1.85; }
.hero-detail { padding-block: 2.5rem var(--section-space); }
.hero-detail-grid { gap: 1.75rem; }
.hero-lead { max-inline-size: 58ch; color: var(--muted); }
.line-name { margin-block-start: 1rem; }

.ruler { padding-block: var(--section-space); border-block: 1px solid var(--line); background: var(--surface); }
.ruler .lead { margin-block-start: 1.5rem; }
.four { margin-block-start: 2.5rem; border-block-start: 1px solid var(--control); counter-reset: deliverable; }
.four > li { padding: 1.5rem 0; border-block-end: 1px solid var(--line); color: var(--muted); counter-increment: deliverable; }
.four > li::before { content: counter(deliverable, decimal-leading-zero); display: block; margin-block-end: 0.75rem; color: var(--accent); font-size: 0.8125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.four b { display: block; margin-block-end: 0.625rem; color: var(--text); font-size: 1.25rem; line-height: 1.6; }
.checks { display: grid; gap: 1.25rem; margin-block-start: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-inline-start: 2px solid var(--accent); background: var(--bg); }
.checks h3 { font-size: 1.0625rem; }
.checks li { position: relative; padding-inline-start: 1.75rem; color: var(--muted); }
.checks li + li { margin-block-start: 0.75rem; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0.25rem; inset-block-start: 0.5rem; inline-size: 6px; block-size: 11px; border-inline-end: 1.5px solid var(--accent); border-block-end: 1.5px solid var(--accent); transform: rotate(45deg); }
.disclosure { margin-block-start: 1.5rem; }

.story { padding-block: var(--section-space); border-block-end: 1px solid var(--line); }
.story-grid { gap: 2rem; align-items: center; }
.story-img { position: relative; border: 1px solid var(--line); background: var(--surface); }
.story-img img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.story-img figcaption { position: absolute; inset-inline-end: 0.75rem; inset-block-end: 0.75rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 0.75rem; line-height: 1.6; }
.story-copy h2 { margin-block: 1rem 1.5rem; font-size: clamp(1.5rem, 2.7vw, 2.375rem); }
.story-copy > p:not(.proof-tag) { color: var(--muted); }
.story-copy > p + p { margin-block-start: 1.25rem; }
.story-copy > p.award { padding-block: 0.875rem; border-block: 1px solid var(--line); color: var(--text); font-size: 0.875rem; line-height: 1.9; }
.story-copy .text-link { margin-block-start: 1.5rem; }

.services { padding-block: var(--section-space); }
.services h2 { max-inline-size: 24ch; }
.service-grid { margin-block-start: 2.5rem; border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.service-grid > li { border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); }
.service-card { position: relative; display: block; min-block-size: 128px; block-size: 100%; padding: 1.5rem 3rem 1.5rem 1.5rem; text-decoration: none; }
.service-card h3 { font-size: 1.0625rem; }
.service-card p { margin-block-start: 0.75rem; color: var(--muted); font-size: 0.875rem; }
.service-card::after { inset-inline-end: 1.5rem; inset-block-start: 2.125rem; }

.works-band { padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--line); background: var(--surface); }
.works-band .wrap { display: grid; gap: 1.5rem; }
.works-band p { max-inline-size: 65ch; color: var(--muted); }
.works-band .btn { justify-self: start; }
.uradori { padding-block: var(--section-space); border-block-end: 1px solid var(--line); }
.uradori .wrap { padding-inline-start: clamp(1.25rem, 4vw, 3rem); border-inline-start: 2px solid var(--accent); }
.uradori h2 { margin-block: 1rem 1.5rem; }
.uradori p:last-child { max-inline-size: 70ch; color: var(--muted); }

.flow-sec { padding-block: var(--section-space); }
.flow { margin-block-start: 2.5rem; border-block-start: 1px solid var(--control); counter-reset: step; }
.flow > li { position: relative; padding: 1.5rem 0 1.5rem 3rem; border-block-end: 1px solid var(--line); color: var(--muted); counter-increment: step; }
.flow > li::before { content: counter(step, decimal-leading-zero); position: absolute; inset-block-start: 1.75rem; inset-inline-start: 0; color: var(--accent); font-size: 0.8125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.flow b { display: block; margin-block-end: 0.625rem; color: var(--text); font-size: 1.25rem; }

.cta-band { padding-block: var(--section-space); border-block-start: 1px solid var(--line); background: var(--surface-raised); scroll-margin-block-start: var(--anchor-offset); }
.cta-band .wrap { display: grid; gap: 2rem; }
.cta-band h2 { max-inline-size: 24ch; }
.cta-band .contact-buttons { max-inline-size: 52rem; }
.site-footer { padding-block: 2.5rem calc(var(--fab-clearance) + env(safe-area-inset-bottom, 0px)); }
.site-footer p { max-inline-size: 70ch; color: var(--muted); font-size: 0.8125rem; line-height: 1.9; }
.site-footer p + p { margin-block-start: 0.5rem; }

@media (min-width: 40rem) {
  .portrait { grid-template-columns: 9rem minmax(0, 1fr); }
  .proof-grid, .service-grid, .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid > li { padding: 1.75rem; }
  .proof-grid > li + li { border-block-start: 0; }
  .proof-grid > li:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .proof-grid > li:nth-child(n + 3) { border-block-start: 1px solid var(--line); }
  .four > li { padding: 1.75rem; }
  .four > li:nth-child(even) { border-inline-start: 1px solid var(--line); }
}

@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: clamp(3rem, 6vw, 6rem); }
  .portrait { display: block; }
  .portrait figcaption { padding: 1rem 1.25rem; }
  .hero-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
  .checks { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; }
  .story-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "media copy"; gap: clamp(2.5rem, 5vw, 5rem); }
  .story-img { grid-area: media; }
  .story-copy { grid-area: copy; }
  .flip .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "copy media"; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-card { min-block-size: 168px; }
  .works-band .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 3rem; }
  .works-band h2, .works-band p { grid-column: 1; }
  .works-band .btn { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flow > li { padding: 1.75rem 1.25rem 0; border-block-end: 0; }
  .flow > li + li { border-inline-start: 1px solid var(--line); }
  .flow > li::before { position: static; display: block; margin-block-end: 1rem; }
  .cta-band .contact-buttons { grid-template-columns: 1fr 1fr 1.65fr; }
  .cta-band .btn-chat { grid-column: auto; }
}

@media (min-width: 72rem) {
  :root { --anchor-offset: 7rem; }
  .site-header { position: sticky; inset-block-start: 0; }
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; min-block-size: 88px; }
  .brand { inline-size: 11.25rem; }
  .nav-desktop { display: block; }
  .nav-desktop ul { display: flex; justify-content: center; gap: clamp(0.5rem, 1.2vw, 1.25rem); }
  .nav-desktop a { display: flex; align-items: center; min-block-size: 44px; padding: 0.5rem 0.25rem; font-size: 0.875rem; line-height: 1.6; text-decoration: none; }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--accent); }
  .nav-mobile { display: none; }
  .proof-grid, .four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof-grid > li:nth-child(n) { border-block-start: 0; }
  .proof-grid > li + li, .four > li + li { border-inline-start: 1px solid var(--line); }
  .proof-grid .proof-tag { min-block-size: 3.6em; }
  .proof-big { min-block-size: 1.5em; }
}

/* ==================================================
   05 / OTHER PAGES & COMPAT（同じトークンで合わせる）
   ================================================== */
.visually-hidden, .hp { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: -999px; inset-block-start: 0; z-index: 100; padding: 0.5rem 0.75rem; background: var(--accent); color: var(--ink); }
.skip:focus { inset-inline-start: 0.5rem; inset-block-start: 0.5rem; }
.wrap.narrow { inline-size: min(52rem, calc(100% - var(--gutter) * 2)); }
.nb { display: inline-block; }
.brand picture, .portrait picture, .logo { display: block; }

/* 季節のひと言（headline.json・週ごとに差し替え） */
.season-line { display: inline-block; margin-block-end: 1rem; padding: 0.25rem 0.75rem; border: 1px solid var(--line); color: var(--text); font-size: 0.8125rem; font-weight: 650; line-height: 1.7; }
.season-line::before { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 0.5rem; background: var(--accent); vertical-align: 0.15em; }

.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block-start: 1.25rem; }
.updated { color: var(--muted); font-size: 0.8125rem; }
.subsidy-badge { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0.25rem 0.75rem; border: 1px solid var(--accent); color: var(--accent); font-size: 0.8125rem; font-weight: 650; text-decoration: none; }

/* 一般のセクション（下層ページ） */
.section { padding-block: var(--section-space); border-block-end: 1px solid var(--line); }
.section-title { margin-block-end: 1.25rem; }
.section-lead { max-inline-size: 65ch; margin-block-end: 2rem; color: var(--muted); }
.page-head { padding-block: clamp(1.5rem, 3.5vw, 2.75rem) 1.5rem; border-block-end: 1px solid var(--line); }
.page-head h1 { margin-block: 0.4rem 0.85rem; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.5; letter-spacing: 0.01em; text-wrap: balance; }
.page-head p:not(.crumb) { max-inline-size: 65ch; color: var(--muted); }
.crumb { color: var(--muted); font-size: 0.8125rem; }
.crumb a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--muted); }
.prose p { max-inline-size: 70ch; }
.prose p + p { margin-block-start: 1.25rem; }
.prose h2 { margin-block: 2.5rem 1rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.svc-hero { padding-block-end: 0.5rem; }
.svc-catch { margin-block-start: 0.75rem; color: var(--accent); font-weight: 650; }
.big-quote { margin-block: 1rem 1.5rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--accent); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 750; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem 1.25rem; }
.chips span { padding: 0.125rem 0.625rem; border: 1px solid var(--line); background: var(--surface); font-size: 0.8125rem; }
.check-list li, .link-list li { position: relative; padding-inline-start: 1.5rem; }
.check-list li + li, .link-list li + li { margin-block-start: 0.5rem; }
.check-list li::before { content: ""; position: absolute; inset-inline-start: 0.25rem; inset-block-start: 0.5rem; inline-size: 6px; block-size: 11px; border-inline-end: 1.5px solid var(--accent); border-block-end: 1.5px solid var(--accent); transform: rotate(45deg); }
.link-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.85em; inline-size: 0.75rem; block-size: 1px; background: var(--accent); }
.link-list a { display: inline-flex; align-items: center; min-block-size: 44px; }
.service-list { display: grid; gap: 2.5rem; margin-block-end: 2rem; }
.service-list h2 { margin-block-end: 0.5rem; font-size: clamp(1.25rem, 2.4vw, 1.625rem); }

.disclosure { display: flex; gap: 0.625rem; align-items: flex-start; }
.disclosure-mark { flex: none; display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 0.6875rem; font-style: italic; }

/* 担当者 */
.person-grid { display: grid; gap: 2rem; }
.person-grid .portrait { display: block; max-inline-size: 22rem; }
.person-role { color: var(--muted); font-size: 0.875rem; }
.person-name { margin-block-end: 1rem; font-size: 1.75rem; font-weight: 750; letter-spacing: 0.08em; }
.facts { display: grid; margin-block: 1.5rem; border-block-start: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 0.75rem; padding-block: 0.75rem; border-block-end: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 0.875rem; }
.facts dd { margin: 0; font-weight: 650; }
@media (min-width: 54rem) { .person-grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 3rem; align-items: start; } }

/* 法人・駆除のセット */
.biz-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 56rem) { .biz-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; } }
.biz .contact-buttons, .contact-buttons.size-md { grid-template-columns: minmax(0, 1fr); margin-block-start: 1rem; }
.crosslink-box { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-inline-start: 2px solid var(--accent); background: var(--surface); }
.crosslink-box h2 { margin-block: 0.5rem 0.75rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.crosslink-box p:not(.proof-tag) { color: var(--muted); }

/* よくある質問 */
.faq-list { border-block-start: 1px solid var(--line); margin-block-end: 1.5rem; }
.faq-list details, .faq-item { border-block-end: 1px solid var(--line); }
.faq-list summary { position: relative; display: flex; align-items: center; min-block-size: 56px; padding: 0.75rem 2.5rem 0.75rem 0; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; inset-inline-end: 0.75rem; inset-block-start: calc(50% - 0.375rem); inline-size: 0.5rem; block-size: 0.5rem; border-block-end: 1px solid var(--accent); border-inline-end: 1px solid var(--accent); transform: rotate(45deg); }
.faq-list details[open] summary::after { transform: rotate(-135deg); inset-block-start: calc(50% - 0.125rem); }
.faq-list details p { padding-block-end: 1.25rem; color: var(--muted); }
.faq-item { padding-block: 1.25rem; }
.faq-item h2 { font-size: 1.0625rem; line-height: 1.7; }
.faq-item p { margin-block-start: 0.5rem; color: var(--muted); }

/* 施工日誌 */
.journal .empty { padding: 1.5rem; border: 1px dashed var(--line); color: var(--muted); }
.journal-list li { padding-block: 1rem; border-block-end: 1px solid var(--line); }
.journal-list time { color: var(--accent); font-size: 0.8125rem; font-weight: 650; }
.journal-list h3 { font-size: 1.0625rem; }
.last-updated { margin-block-start: 0.75rem; color: var(--muted); font-size: 0.8125rem; }

/* 相談の帯（下層ページでも使う） */
.cta-band h2 { margin-block-end: 0.5rem; }
.cta-band p { color: var(--muted); }

/* フッター */
.site-footer { border-block-start: 1px solid var(--line); background: var(--bg); }
.footer-grid { display: grid; gap: 2rem; }
.footer-grid .logo { inline-size: 11.25rem; padding: 0.375rem 0.5rem; background: var(--logo-surface); border-radius: var(--radius); }
.footer-name { margin-block-start: 1rem; color: var(--text) !important; font-size: 0.9375rem !important; font-weight: 700; }
.footer-head { color: var(--text) !important; font-weight: 700; }
.footer-grid a { color: var(--text); }
.footer-grid li a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.footer-grid li a:hover { color: var(--accent); }
.footer-bottom { margin-block-start: 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
@media (min-width: 54rem) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* LINE ボタンのマスコット（触れると顔を出す・動きを減らす設定では出さない） */
.btn.has-pop { position: relative; overflow: visible; }
.line-pop { position: absolute; inset-inline-end: 0.75rem; inset-block-start: -1.75rem; inline-size: 3rem; block-size: 3rem; overflow: hidden; border-radius: 50%; background: #f7cf12; pointer-events: none; transform: translateY(1.5rem) scale(0); transform-origin: 50% 100%; }
.line-pop img { inline-size: 100%; block-size: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .line-pop { transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .btn.has-pop:hover .line-pop, .btn.has-pop:focus-visible .line-pop { transform: translateY(0) scale(1); }
}

h1, h2, .proof-big { word-break: auto-phrase; }

/* ==================================================
   06 / ROUND 2（ChatGPT／Astra の検収差分・2026-10-28）
   固定チャットボタンの重なりをなくし、相談はヘッダーに常設。下層・FAQ の組版をそろえる。
   ================================================== */
:root { --anchor-offset: 6rem; --fab-clearance: 1.5rem; }
.site-header { position: sticky; inset-block-start: 0; }
:where(a, button, summary, input, textarea, [tabindex]) { scroll-margin-block: 1rem; }
.cta-band { scroll-margin-block-start: 1rem; }
.chat-root { inline-size: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: flex-end; }
.chat-fab { position: static; max-inline-size: 100%; box-shadow: none; }
.chat-panel { inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); block-size: min(38rem, calc(100vh - 2rem - env(safe-area-inset-bottom, 0px))); block-size: min(38rem, calc(100dvh - 2rem - env(safe-area-inset-bottom, 0px))); }
.chat-note a { display: inline-flex; align-items: center; min-inline-size: 44px; min-block-size: 44px; }
.crumb a { min-inline-size: 44px; justify-content: center; }
.footer-grid p a { display: inline-flex; align-items: center; min-inline-size: 44px; min-block-size: 44px; max-inline-size: 100%; vertical-align: middle; }
.service-list h2 a, .section a[href^="mailto:"]:not(.btn) { display: inline-flex; align-items: center; min-inline-size: 44px; min-block-size: 44px; max-inline-size: 100%; }
.line-pop { display: none; }
.section .contact-buttons.size-lg { margin-block: 2rem 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); border-inline-start: 2px solid var(--accent); background: var(--surface); }
.biz .btn-mail { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.proof-grid > li { padding-block: 1.25rem; }
.proof-grid .proof-tag { min-block-size: 0; }
.season-line { padding: 0; border: 0; color: var(--muted); font-weight: 500; }
.season-line::before { display: none; }
.page-head .section-lead { margin-block-end: 0; }
.page-head p.proof-tag { color: var(--accent); }
.page-head p.award { max-inline-size: 70ch; margin-block: 1.25rem; padding: 0.875rem 1rem; border-inline-start: 2px solid var(--accent); background: var(--surface); color: var(--text); font-size: 0.875rem; line-height: 1.9; }
.svc-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--surface); }
.svc-hero .wrap { inline-size: min(52rem, calc(100% - var(--gutter) * 2)); }
.story-img figcaption { position: static; max-inline-size: 100%; padding: 0.5rem 0.75rem; border: 0; border-block-start: 1px solid var(--line); text-align: right; }
.wrap.narrow > .section-title, .person-grid > div > .section-title { font-size: clamp(1.375rem, 2.25vw, 1.875rem); line-height: 1.6; }
.wrap.narrow > .section-title:not(:first-child), .person-grid > div > .section-title:not(:first-child) { margin-block-start: 2.5rem; }
.link-list li { padding-block: 0.75rem; border-block-end: 1px solid var(--line); }
.link-list li::before { inset-block-start: 2rem; }
.link-list .small { display: block; }
.faq-item { display: grid; gap: 0.875rem; padding-block: 1.5rem; }
.faq-item h2 { font-size: 1.125rem; line-height: 1.7; }
.faq-item p { margin-block-start: 0; }
@media (max-width: 53.999rem) {
  .person-grid .portrait { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; max-inline-size: 100%; }
  .person-grid .portrait-role { word-break: keep-all; }
}
@media (min-width: 54rem) { .person-grid .portrait { position: sticky; inset-block-start: calc(var(--anchor-offset) + 1rem); } }
@media (min-width: 64rem) { .faq-list.open .faq-item { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); gap: 2rem; padding-block: 1.75rem; } }
@media (min-width: 72rem) { :root { --anchor-offset: 7rem; } }
@media (max-height: 35rem) { .chat-panel { inset-block: 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); block-size: auto; } }

/* ==================================================
   07 / 2026-10-29 代表検収：トップは5ブロック・H1 に地名・受賞の証拠・地図と口コミ
   ================================================== */
.hero-solo { display: grid; gap: 1.25rem; max-inline-size: 52rem; }
.hero-solo .contact-buttons { max-inline-size: 40rem; margin-block-start: 0.5rem; }
.h1-kicker { display: block; margin-block-end: 1rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--accent); color: var(--muted); font-size: 0.8125rem; font-weight: 650; line-height: 1.8; letter-spacing: 0.04em; }
.h1-line { display: block; }
.page-head h1 .h1-kicker { font-size: 0.8125rem; margin-block-end: 0.5rem; }
.ruler .proof-grid { margin-block-start: 2rem; border-block: 1px solid var(--line); }
.svc-links { margin-block-start: 1.5rem; color: var(--muted); font-size: 0.875rem; line-height: 2.2; }
.svc-links a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text); }
.person-top { padding-block: var(--section-space); border-block-end: 1px solid var(--line); }
.person-top h2 { margin-block-end: 1rem; }
.person-top p { color: var(--muted); max-inline-size: 60ch; }
.award-box { display: grid; gap: 1rem; margin-block: 1rem; }
.award-evidence { max-inline-size: 22rem; border: 1px solid var(--line); background: var(--surface); }
.award-evidence img { inline-size: 100%; block-size: auto; }
.award-evidence figcaption { padding: 0.5rem 0.75rem; color: var(--muted); font-size: 0.75rem; }
.gbp-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block-start: 1rem; }
.chat-qr { grid-column: 1 / -1; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.chat-qr img { inline-size: 132px; block-size: 132px; background: #fff; padding: 4px; }
.chat-qr p { color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }

/* SNS の入口（線のアイコンは CSS の mask で文字色に合わせる） */
.social-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.25rem; }
.social-links a { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 48px; padding: 0.5rem 1rem; border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.social-links a:hover { border-color: var(--accent); }
.sl-icon { inline-size: 24px; block-size: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-chat { --i: url("/images/icons/chat.svg"); }
.i-camera { --i: url("/images/icons/camera.svg"); }
.i-play { --i: url("/images/icons/play.svg"); }
.sl-label { font-weight: 700; font-size: 0.875rem; }
.sl-sub { color: var(--muted); font-size: 0.75rem; }

/* 08 / BRANDS・WORKS FEED・SCHEDULE・JUNK POLICY（2026-10-29 代表指示①②⑤） */
@media (min-width: 54rem) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.brand-list ul { list-style: none; margin: 0; padding: 0; }
.brand-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; padding-block: 0.5rem; border-block-end: 1px solid var(--line); }
.brand-list li > a, .brand-list li > span:first-child { font-weight: 600; color: var(--text); }
.brand-what { font-size: 0.8125rem; color: var(--muted); }
.brand-status { display: inline-block; margin-inline-start: 0.5rem; padding: 0 0.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted); border: 1px solid var(--line); }
.brand-facts dd .brand-status { vertical-align: 0.1em; }
.junk-policy { padding: 1.25rem 1.5rem; border-inline-start: 3px solid var(--accent); background: var(--surface, transparent); line-height: 1.9; }
.works-feed { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.works-feed figure { margin: 0; }
.works-feed img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.works-feed figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-block-start: 0.75rem; font-size: 0.875rem; }
.works-date, .works-svc { color: var(--muted); }
.works-title { flex-basis: 100%; color: var(--text); }
.schedule-band { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.schedule-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.schedule-list li { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-block: 0.625rem; border-block-end: 1px solid var(--line); }
.sch-date { min-inline-size: 9rem; font-variant-numeric: tabular-nums; }
.sch-kind { color: var(--accent); font-weight: 600; }
.sch-svc { color: var(--muted); }

/* 09 / LANGUAGE SWITCH（2026-10-29 多言語） */
.lang-switch { display: none; }
.lang-switch ul, .lang-switch-mobile { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.lang-switch a, .lang-switch-mobile a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 0.5rem; font-size: 0.8125rem; color: var(--muted); text-decoration: none; }
.lang-switch a[aria-current="true"], .lang-switch-mobile a[aria-current="true"] { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; }
.lang-switch a:hover, .lang-switch-mobile a:hover { color: var(--accent); }
.lang-switch-mobile { margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }
@media (min-width: 72rem) {
  .lang-switch { display: block; grid-column: 1 / -1; order: -1; justify-self: end; margin-block-end: -0.75rem; }
  .lang-switch a { min-block-size: 32px; }
}
html:not([data-lang="ja"]) body { word-break: normal; overflow-wrap: anywhere; }
html[data-lang="en"] .hero h1 .h1-line { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.18; letter-spacing: -0.01em; }

/* 10 / REAL WORK PHOTOS（2026-10-29 実際の施工写真に差し替え） */
.svc-works { padding-block: 1rem 0; }
.work-set + .work-set { margin-block-start: 2.5rem; }
.work-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .work-photos.n2, .work-photos.n3, .work-photos.n4 { grid-template-columns: repeat(2, 1fr); } }
.work-photos figure { margin: 0; position: relative; }
.work-photos img { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 80vh; }
.work-phase { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; padding: 0.125rem 0.5rem; font-size: 0.8125rem; letter-spacing: 0.08em; background: rgba(0, 0, 0, 0.72); color: #fff; }
.work-caption { margin-block: 0.75rem 0.25rem; }
.muted { color: var(--muted); }

/* 11 / CONTACT（2026-10-29 13:30：LINE を1つ大きく、チャットとメールは小さく下に） */
.contact-buttons { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; max-inline-size: 30rem; }
.btn-main { flex-direction: column; min-block-size: 60px; font-size: 1.0625rem; }
.btn-sub { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.85; }
.contact-sub { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; }
.link-btn { min-block-size: 44px; padding: 0.5rem 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.cta-band .contact-buttons { max-inline-size: 30rem; }
@media (min-width: 64rem) { .cta-band .contact-buttons { display: flex; } }
.svc-cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.svc-cards a { display: block; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.svc-cards a:hover { border-color: var(--accent); }
.svc-cards b { display: block; }
.svc-cards span { display: block; margin-block-start: 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.cta-lines { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; max-inline-size: 44rem; }
.works-note { margin-block-start: 1.5rem; }


/* ==================================================
   12 / ART DIRECTION（theme S）
   ================================================== */
html[data-theme="S"] { background: var(--bg); }
html[data-theme="S"] body { font-size: 1rem; line-height: 2; letter-spacing: 0.02em; font-feature-settings: "palt" 0; }
html[data-theme="S"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme="S"] h1, html[data-theme="S"] h2, html[data-theme="S"] h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.04em; }
html[data-theme="S"] h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.7; }
html[data-theme="S"] .proof-big, html[data-theme="S"] .portrait-name, html[data-theme="S"] .big-quote, html[data-theme="S"] .footer-name { font-family: var(--font-serif); font-weight: 600; }
html[data-theme="S"] a { text-decoration-thickness: 1px; }
html[data-theme="S"] .section { border-block-end: 0; }
html[data-theme="S"] .section + .section { border-block-start: 1px solid var(--line); }

/* header：線を消し、余白で区切る */
html[data-theme="S"] .site-header { border-block-end: 0; background: var(--bg); }
html[data-theme="S"] .header-inner { min-block-size: 5rem; }
html[data-theme="S"] .nav-desktop a { font-size: 0.875rem; font-weight: 500; text-decoration: none; }
html[data-theme="S"] .nav-desktop a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.5em; }
html[data-theme="S"] .header-cta { min-block-size: 40px; padding: 0.375rem 1.125rem; border-color: var(--ink); background: var(--ink); color: var(--bg); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; }
html[data-theme="S"] .header-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* hero：左に実際の施工写真、右に縦組みの理念 */
html[data-theme="S"] .hero { padding: 0 0 clamp(4rem, 8vw, 7rem); }
.hero-s { display: grid; grid-template-columns: 1fr; }
.hero-photo { position: relative; margin: 0; }
.hero-photo img { inline-size: 100%; block-size: min(62vh, 34rem); object-fit: cover; object-position: 50% 72%; }
.hero-photo figcaption { display: flex; gap: 0.75rem; padding: 0.625rem var(--gutter) 0; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; }
.hero-copy { display: grid; gap: 2.5rem; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 0; }
html[data-theme="S"] .hero h1 { margin: 0; font-size: inherit; letter-spacing: 0; line-height: 1; }
html[data-theme="S"] .hero h1 span { display: block; }
html[data-theme="S"] .h1-kicker { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.08em; color: var(--muted); border: 0; padding: 0; }
.h1-motto { margin-block-start: 1.75rem; font-size: clamp(2.125rem, 8.4vw, 3.25rem); font-weight: 600; line-height: 1.5; letter-spacing: 0.06em; }
html[lang="ja"] .h1-motto { writing-mode: vertical-rl; text-orientation: mixed; inline-size: auto; block-size: auto; margin-block-start: 0; margin-inline: 0; justify-self: end; white-space: nowrap; font-size: clamp(2.25rem, 9vw, 3.5rem); letter-spacing: 0.16em; line-height: 1.65; }
html[lang="ja"] .h1-motto .h1-line + .h1-line { margin-block-start: 0.5em; padding-block-start: 0; }
html[lang="ja"] .h1-motto .h1-line + .h1-line { padding-inline-start: 2em; }
.hero-act { display: grid; gap: 1.25rem; align-content: start; }
html[data-theme="S"] .season-line { text-wrap: balance; margin: 0; padding: 0; border: 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 500; letter-spacing: 0.06em; }
html[data-theme="S"] .season-line::before { display: none; }
html[data-theme="S"] .hero-meta { margin: 0; }
@media (min-width: 64rem) {
  .hero-s { grid-template-columns: minmax(0, 1fr) auto minmax(15rem, 20rem); column-gap: clamp(2rem, 4vw, 4.5rem); min-block-size: calc(100vh - 6rem); padding-inline: var(--gutter); }
  .hero-photo { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
  .hero-photo picture { flex: 1; display: block; }
  .hero-photo img { block-size: 100%; min-block-size: 34rem; max-block-size: 52rem; }
  .hero-photo figcaption { padding-inline: 0; }
  .hero-copy { display: contents; }
  html[data-theme="S"] .hero h1 { display: contents; }
  .h1-kicker { grid-column: 3; grid-row: 1; align-self: start; padding-block-start: 0.25rem; }
  html[lang="ja"] .h1-motto { grid-column: 2; grid-row: 1; align-self: start; margin: 0; font-size: clamp(2.75rem, 3.8vw, 4rem); }
  html:not([lang="ja"]) .h1-motto { grid-column: 3; grid-row: 1; align-self: center; font-size: 2.25rem; }
  .hero-act { grid-column: 3; grid-row: 1; align-self: end; padding-block-end: 2.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html[lang="ja"] .h1-motto .h1-line { animation: motto-in 1.4s cubic-bezier(.2,.7,.1,1) both; clip-path: inset(0 0 100% 0); }
  html[lang="ja"] .h1-motto .h1-line + .h1-line { animation-delay: 0.55s; }
  @keyframes motto-in { to { clip-path: inset(0 0 0 0); } }
}

/* 相談ボタン：墨の面に漆喰の文字。LINE の緑は使わない */
html[data-theme="S"] .btn { border-radius: var(--radius); }
html[data-theme="S"] .btn-line, html[data-theme="S"] .btn-mail.btn-main { border-color: var(--ink); background: var(--ink); color: var(--bg); }
html[data-theme="S"] .btn-line:hover, html[data-theme="S"] .btn-mail.btn-main:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: #fff; }
/* 下層ページの相談ボックス：公式LINEグリーン＋公式グリフ */
html[data-theme="S"] .section .contact-buttons .btn-line.btn-main { border-color: #06c755; background: #06c755; color: #fff; }
html[data-theme="S"] .section .contact-buttons .btn-line.btn-main:hover { border-color: #05b34c; background: #05b34c; color: #fff; }
html[data-theme="S"] .section .contact-buttons .btn-line.btn-main::before { content: ""; display: block; inline-size: 1.5rem; block-size: 1.5rem; margin-block-end: 0.2rem; background: #fff; -webkit-mask: url("/images/icons/camera.svg") center / contain no-repeat; mask: url("/images/icons/camera.svg") center / contain no-repeat; }
html[data-theme="S"] .section .contact-buttons .btn-line.btn-main .btn-sub { color: rgba(255, 255, 255, 0.86); }
html[data-theme="S"] .btn-main { align-items: flex-start; min-block-size: 64px; padding: 0.875rem 1.25rem; font-weight: 500; letter-spacing: 0.08em; }
html[data-theme="S"] .btn-sub { opacity: 0.7; letter-spacing: 0.1em; font-weight: 400; }
html[data-theme="S"] .link-btn { color: var(--text); text-decoration-color: var(--control); }
html[data-theme="S"] .subsidy-badge { min-block-size: 0; padding: 0; border: 0; color: var(--accent); font-size: 0.8125rem; font-weight: 500; }

/* 相見積もりの前に：左に見出し（追従）、右に4項目 */
html[data-theme="S"] .ruler { border: 0; background: transparent; }
html[data-theme="S"] .ruler .wrap { display: grid; gap: 2.5rem; }
html[data-theme="S"] .ruler h2 { font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.6; }
html[data-theme="S"] .proof-grid { gap: 0; }
html[data-theme="S"] .proof-grid > li { padding-block: 2rem; border: 0; border-block-start: 1px solid var(--line); }
html[data-theme="S"] .proof-tag { color: var(--accent); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; }
html[data-theme="S"] .proof-big { margin-block: 0.5rem 0.75rem; font-size: clamp(1.375rem, 2.1vw, 1.75rem); line-height: 1.6; letter-spacing: 0.03em; }
@media (min-width: 64rem) {
  html[data-theme="S"] .ruler .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 7rem); }
  html[data-theme="S"] .ruler h2 { position: sticky; inset-block-start: 2rem; align-self: start; }
  html[data-theme="S"] .proof-grid { grid-template-columns: 1fr; }
  html[data-theme="S"] .svc-cards { grid-column: 1 / -1; }
}

/* 工事の目次：文字だけの索引。名前（明朝）と一言 */
html[data-theme="S"] .svc-cards { display: block; margin-block-start: clamp(3rem, 6vw, 5rem); border-block-start: 1px solid var(--text); }
html[data-theme="S"] .svc-cards li { border-block-end: 1px solid var(--line); }
html[data-theme="S"] .svc-cards a { display: grid; gap: 0.25rem 2rem; padding: 1.375rem 0; border: 0; border-radius: 0; text-decoration: none; }
html[data-theme="S"] .svc-cards b { font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: 0.06em; }
html[data-theme="S"] .svc-cards span { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.8; }
html[data-theme="S"] .svc-cards a:hover b { color: var(--accent-hover); }
@media (min-width: 48rem) { html[data-theme="S"] .svc-cards a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }

/* 人：写真を大きく、名前は明朝 */
html[data-theme="S"] .person-top { padding-block: clamp(2rem, 4vw, 3.25rem) var(--section-space); background: var(--surface); }
html[data-theme="S"] .person-grid { gap: clamp(2rem, 5vw, 5rem); align-items: end; }
html[data-theme="S"] .portrait { display: block; max-inline-size: 26rem; border: 0; background: transparent; }
html[data-theme="S"] .portrait::before, html[data-theme="S"] .portrait::after { display: none; }
html[data-theme="S"] .portrait figcaption { padding: 1rem 0 0; }
html[data-theme="S"] .portrait-name { font-size: 2rem; letter-spacing: 0.2em; }
html[data-theme="S"] .portrait-qual { color: var(--accent); }
html[data-theme="S"] .person-top h2 { margin-block-end: 1.5rem; }
html[data-theme="S"] .person-top p { max-inline-size: 34em; }
@media (min-width: 56rem) { html[data-theme="S"] .person-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* 施工事例：1枚目を大きく */
html[data-theme="S"] .works-feed { gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-theme="S"] .works-feed > li:first-child { grid-column: 1 / -1; }
html[data-theme="S"] .works-feed > li:first-child img { aspect-ratio: 16 / 9; }
html[data-theme="S"] .works-feed figcaption { font-size: 0.8125rem; }
html[data-theme="S"] .works-title { font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.04em; }
@media (min-width: 64rem) {
  html[data-theme="S"] .works-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme="S"] .works-feed > li:first-child { grid-column: span 2; grid-row: span 2; }
  html[data-theme="S"] .works-feed > li:first-child img { aspect-ratio: auto; block-size: 100%; }
}
html[data-theme="S"] .works-band .wrap { display: block; }

/* 相談：唯一の墨の面 */
html[data-theme="S"] .cta-band { border: 0; background: var(--ink); color: var(--bg); }
html[data-theme="S"] .cta-band .wrap { gap: 2.5rem; }
html[data-theme="S"] .cta-band h2 { max-inline-size: none; font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
html[data-theme="S"] .cta-lines { gap: 1rem; }
html[data-theme="S"] .cta-band .check-list li { color: rgba(236, 235, 230, 0.86); }
html[data-theme="S"] .cta-band .check-list li::before { background: var(--bg); }
html[data-theme="S"] .cta-band .btn-line { border-color: var(--bg); background: var(--bg); color: var(--ink); }
html[data-theme="S"] .cta-band .btn-line:hover { background: #fff; color: var(--ink); }
html[data-theme="S"] .cta-band .link-btn, html[data-theme="S"] .cta-band a { color: var(--bg); }
html[data-theme="S"] .cta-band .small, html[data-theme="S"] .cta-band p { color: rgba(236, 235, 230, 0.78); }

/* 下層ページの頭：明朝の大きな見出し、線なし */
html[data-theme="S"] .page-head { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); border: 0; }
html[data-theme="S"] .page-head > .wrap { inline-size: min(52rem, calc(100% - var(--gutter) * 2)); }
html[data-theme="S"] .page-head h1 { margin-block: 0.5rem 0.9rem; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.4; letter-spacing: 0.03em; }
html[data-theme="S"] .page-head .h1-kicker { display: block; margin-block-end: 0.75rem; }
html[data-theme="S"] .crumb { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; }
html[data-theme="S"] .crumb a { text-decoration: none; }
html[data-theme="S"] .section-lead, html[data-theme="S"] .page-head p:not(.crumb) { max-inline-size: 36em; color: var(--muted); }
html[data-theme="S"] .section-title { margin-block-end: 1.75rem; font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
html[data-theme="S"] .prose p { max-inline-size: 36em; }
html[data-theme="S"] .prose p + p { margin-block-start: 1.25em; }
html[data-theme="S"] .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
html[data-theme="S"] .chips span { padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
html[data-theme="S"] .chips span + span::before { content: none; }
html[data-theme="S"] .check-list li { padding-inline-start: 1.5rem; }

/* 2026-11-09 下層ページ Bento化（ChatGPT Astra 設計を実構造へ移植）：先にお伝えすること＝アイコン付きカード、ほかの工事＝カードリンク */
html[data-theme="S"] .svc-ico { display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; background-color: currentColor; -webkit-mask: var(--svc-mask) center / contain no-repeat; mask: var(--svc-mask) center / contain no-repeat; }
html[data-theme="S"] [data-ico="check"] { --svc-mask: url("/images/icons/theme-s/check.svg"); }
html[data-theme="S"] [data-ico="arrow"] { --svc-mask: url("/images/icons/theme-s/arrow.svg"); }

/* 先にお伝えすること：Bento カード */
html[data-theme="S"] .service-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
html[data-theme="S"] .service-checks li { position: static; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: 0.85rem; margin: 0; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-card, 14px); background: var(--surface-raised); }
html[data-theme="S"] .service-checks li + li { margin-block-start: 0; }
html[data-theme="S"] .service-checks li::before { content: none; }
html[data-theme="S"] .service-checks li:first-child { border-inline-start: 3px solid var(--accent); }
html[data-theme="S"] .service-checks .svc-ico { margin-block-start: 0.2rem; color: var(--accent); }
html[data-theme="S"] .service-checks .svc-tx { min-inline-size: 0; font-size: 0.9375rem; line-height: 1.85; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  html[data-theme="S"] .service-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme="S"] .service-checks li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* ほかの工事：カードリンク */
html[data-theme="S"] .service-related { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
html[data-theme="S"] .service-related li { position: static; margin: 0; padding: 0; border: 0; }
html[data-theme="S"] .service-related li + li { margin-block-start: 0; }
html[data-theme="S"] .service-related li::before { content: none; }
html[data-theme="S"] .service-related a { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: 0.85rem; min-block-size: 5rem; padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1.1rem, 2.6vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-card, 14px); background: var(--surface); color: var(--ink); text-decoration: none; }
html[data-theme="S"] .service-related .svc-related-tx { display: grid; gap: 0.2rem; min-inline-size: 0; }
html[data-theme="S"] .service-related .svc-related-ttl { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; overflow-wrap: anywhere; }
html[data-theme="S"] .service-related .small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
html[data-theme="S"] .service-related .svc-arrow { color: var(--muted); }
@media (hover: hover) {
  html[data-theme="S"] .service-related a:hover { border-color: var(--accent); background: var(--surface-raised); }
  html[data-theme="S"] .service-related a:hover .svc-arrow { color: var(--accent); }
}
@media (min-width: 48rem) { html[data-theme="S"] .service-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="S"] .big-quote { border: 0; padding: 0; }
html[data-theme="S"] .award { color: var(--accent); }
html[data-theme="S"] .svc-works { padding-block: 0 clamp(2rem, 5vw, 4rem); }
html[data-theme="S"] .work-caption { font-size: 0.8125rem; color: var(--muted); }
html[data-theme="S"] .work-caption .works-title { color: var(--text); }
html[data-theme="S"] .service-list > li { border-color: var(--line); }
html[data-theme="S"] .service-list h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
html[data-theme="S"] .svc-catch { font-family: var(--font-serif); color: var(--text); }
html[data-theme="S"] .flow > li::before { color: var(--accent); }
html[data-theme="S"] .flow b { font-family: var(--font-serif); font-weight: 600; }
html[data-theme="S"] .faq-item summary { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.03em; }
html[data-theme="S"] .facts dt { color: var(--muted); font-weight: 500; }
html[data-theme="S"] .disclosure { color: var(--muted); }
html[data-theme="S"] .disclosure-mark { border-color: var(--control); color: var(--muted); }

/* footer：漆喰の影の面、線は1本だけ */
html[data-theme="S"] .site-footer { border: 0; background: var(--surface); padding-block-start: clamp(3.5rem, 7vw, 6rem); }
html[data-theme="S"] .footer-head { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
html[data-theme="S"] .site-footer ul a { font-size: 0.875rem; text-decoration: none; }
html[data-theme="S"] .site-footer ul a:hover { text-decoration: underline; }
html[data-theme="S"] .footer-bottom { border-block-start: 1px solid var(--line); }

/* チャットの呼び出し：墨の小さな四角 */
html[data-theme="S"] .chat-fab { border-color: var(--ink); background: var(--ink); color: var(--bg); box-shadow: none; }

/* 調整：ロゴの白地を漆喰に溶かす／スマホのヒーローを短く */
html[data-theme="S"] .brand, html[data-theme="S"] .footer-grid .logo { padding: 0; background: transparent; }
html[data-theme="S"] .logo img { mix-blend-mode: multiply; }
@media (max-width: 63.99rem) {
  .hero-photo img { block-size: 48vh; min-block-size: 18rem; }
  .hero-copy { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; }
  html[lang="ja"] .hero h1 { display: contents; }
  html[lang="ja"] .h1-kicker { grid-column: 1; grid-row: 1; }
  html[lang="ja"] .h1-motto { grid-column: 2; grid-row: 1 / 3; font-size: clamp(1.875rem, 8vw, 2.5rem); letter-spacing: 0.12em; }
  html[lang="ja"] .hero-act { grid-column: 1 / -1; grid-row: 3; }
  .hero-copy { row-gap: 2rem; }
}
@media (min-width: 64rem) { .hero-s { grid-template-columns: minmax(0, 1fr) auto minmax(15rem, 18.5rem); } }
html[data-theme="S"] .cta-band .social-links { display: none; }
html[data-theme="S"] .work-photos img { inline-size: 100%; max-block-size: none; }
html[data-theme="S"] .work-photos .is-portrait img { inline-size: auto; max-inline-size: min(100%, 30rem); }
html[data-theme="S"] .page-head .proof-tag { display: none; }
html[data-theme="S"] .work-set + .work-set { margin-block-start: clamp(3rem, 6vw, 5rem); }
html[data-theme="S"] .faq-item summary, html[data-theme="S"] .faq-item h2, html[data-theme="S"] .faq-item h3, html[data-theme="S"] .faq-item dt { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.8; }
html[data-theme="S"] .works-band { border-block-start: 0; }
html[data-theme="S"] .page-head + .section { padding-block-start: clamp(1rem, 3vw, 2.5rem); }
html[data-theme="S"] .chat-fab::before { display: none; }

/* ==================================================
   13 / PHOTO-LED（2026-10-30 代表指示：写真が主役・1画面に1つ・ボタンは1つ）
   ================================================== */
html[data-theme="S"] .header-cta { min-block-size: 44px; padding: 0.25rem 0; border: 0; background: none; color: var(--text); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
html[data-theme="S"] .header-cta:hover { background: none; color: var(--accent-hover); }

.hero-full { position: relative; padding: 0 !important; min-block-size: calc(100svh - 5rem); display: grid; overflow: hidden; background: var(--ink); }
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide { position: absolute; inset: 0; display: block; }
.hero-slides .slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-slides::after { content: ""; position: absolute; inset: 0; background: rgba(18, 20, 19, 0.34); }
.hero-slides .slide:not(.s1) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slides .slide { animation: slide-fade 28s linear infinite; }
  .hero-slides .s1 { animation-delay: 0s; opacity: 1; }
  .hero-slides .s2 { animation-delay: 7s; }
  .hero-slides .s3 { animation-delay: 14s; }
  .hero-slides .s4 { animation-delay: 21s; }
  .hero-slides .s1 { animation-name: slide-fade-first; }
  @keyframes slide-fade { 0% { opacity: 0; } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes slide-fade-first { 0% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }
}
.hero-over { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 2rem; padding-block: clamp(2rem, 5vw, 4rem); color: #f4f3ef; }
.hero-full h1 { display: contents; }
.hero-full .h1-kicker { grid-column: 1; grid-row: 2; align-self: end; color: rgba(244, 243, 239, 0.86) !important; }
.hero-full .h1-motto { grid-column: 2; grid-row: 1 / 3; align-self: start; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.2); }
html[lang="ja"] .hero-full .h1-motto { font-size: clamp(1.75rem, 2.7vw, 2.5rem); }
html:not([lang="ja"]) .hero-full .h1-motto { grid-column: 1 / -1; grid-row: 1; align-self: end; font-size: clamp(2rem, 4vw, 3.5rem); max-inline-size: 18ch; }
.hero-full .hero-act { grid-column: 1; grid-row: 1; align-self: end; display: grid; gap: 1.25rem; max-inline-size: 26rem; }
.hero-full .season-line { color: #fff; font-size: clamp(1.125rem, 1.8vw, 1.5rem); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.hero-full .hero-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
html[data-theme="S"] .hero-full .btn-line { border-color: #f4f3ef; background: #f4f3ef; color: var(--ink); }
html[data-theme="S"] .hero-full .btn-line:hover { background: #fff; }
@media (max-width: 47.99rem) {
  .hero-full { min-block-size: 88svh; }
  .hero-over { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto; }
  .hero-full .hero-act { grid-column: 1 / -1; grid-row: 3; max-inline-size: none; }
  .hero-full .h1-kicker { grid-column: 1; grid-row: 2; }
  html[lang="ja"] .hero-full .h1-motto { grid-row: 1 / 3; font-size: clamp(1.5rem, 6.2vw, 2rem); }
}

/* 全幅の写真：一画面に一枚 */
.bleed { margin: 0; }
.bleed img { inline-size: 100%; block-size: min(88svh, 56.25vw); min-block-size: 22rem; object-fit: cover; }
.bleed figcaption { display: flex; gap: 1rem; padding-block: 0.875rem 0; color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.06em; }
.bleed figcaption span { color: var(--text); }

.index-sec { padding-block: var(--section-space); }
html[data-theme="S"] .index-sec .svc-cards { margin-block-start: 2.5rem; }
html[data-theme="S"] .ruler { padding-block: var(--section-space); }
html[data-theme="S"] .ruler .wrap { row-gap: 3rem; }

/* 施工事例：写真と数字 */
.cases { padding-block: var(--section-space); }
.case-list { display: grid; gap: clamp(3rem, 6vw, 5rem); margin-block: 3rem; }
.case-list > li { display: grid; gap: 1.5rem; }
.case-photo { display: block; }
.case-photo img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-text h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.6; margin-block-end: 1rem; }
.work-facts { display: grid; gap: 0.5rem; margin: 0; }
.work-facts > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 1rem; padding-block: 0.5rem; border-block-start: 1px solid var(--line); font-size: 0.9375rem; }
.work-facts dt { color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.08em; }
.work-facts dd { margin: 0; }
@media (min-width: 64rem) {
  .case-list > li { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 3rem; }
  .case-list > li:nth-child(even) .case-photo { order: 2; }
}
html[data-theme="S"] .person-top { background: transparent; }
.case-full { padding-block-end: var(--section-space); }
.case-body { display: grid; gap: 1.5rem; padding-block: 1.75rem 2rem; }
.case-body h2, .work-title { font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.6; margin: 0.25rem 0 0; }
.work-title a { text-decoration: none; }
@media (min-width: 64rem) { .case-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: 0; list-style: none; }
.case-grid img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 64rem) { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-theme="S"] .svc-works { padding-block: 0 clamp(2rem, 5vw, 4rem); }
html[data-theme="S"] .work-set + .work-set { margin-block-start: clamp(2rem, 4vw, 3rem); }
html[data-theme="S"] .cta-band .check-list li { padding-inline-start: 0; }
html[data-theme="S"] .cta-band .check-list li::before { display: none; }
html[data-theme="S"] .portrait.no-photo { max-inline-size: none; }
html[data-theme="S"] .portrait.no-photo .portrait-name { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: 0.24em; line-height: 1.3; margin-block: 0.75rem; }
html[data-theme="S"] .person-top .person-grid { align-items: start; }
/* 2回目の外の目（2026-10-30）：文字を読みやすく・固定ボタンをやめる（ボタンは1画面に1つ）・SEO の文はヒーローで見せない */
html[data-theme="S"] body { font-size: 1.0625rem; }
html[data-theme="S"] .nav-desktop a { font-size: 0.9375rem; }
html[data-theme="S"] .proof-grid > li > p:last-child, html[data-theme="S"] .svc-cards span, html[data-theme="S"] .work-facts > div { font-size: 1rem; color: #3f4441; }
html[data-theme="S"] .proof-tag, html[data-theme="S"] .work-facts dt, html[data-theme="S"] .bleed figcaption { font-size: 0.875rem; }
/* 2026-11-05 監査②：チャットの常駐ランチャー（佃のミニ写真＋吹き出し）。埋もれないよう右下に固定。 */
html[data-theme="S"] .chat-fab { display: inline-flex !important; align-items: center; gap: 0.6rem; position: fixed; z-index: 55; inset-inline-end: clamp(0.75rem, 2vw, 1.5rem); inset-block-end: clamp(0.75rem, 2vw, 1.5rem); max-inline-size: min(17rem, calc(100vw - 1.5rem)); padding: 0.45rem 1.05rem 0.45rem 0.45rem; background: var(--ink); color: #f4f3ef; border: 0; border-radius: 999px; box-shadow: 0 6px 22px rgba(18, 20, 19, 0.32); cursor: pointer; text-align: start; line-height: 1.3; }
html[data-theme="S"] .chat-fab:hover { background: #2a2e2b; color: #fff; }
.chat-fab-av { inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 50%; overflow: hidden; background: var(--surface); }
.chat-fab-av img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 18%; }
.chat-fab-txt { font-size: 0.8125rem; font-weight: 600; }
@media (max-width: 47.99rem) {
  html[data-theme="S"] .chat-fab { inset-block-end: calc(4.9rem + env(safe-area-inset-bottom, 0px)); padding: 0.3rem; gap: 0; max-inline-size: none; }
  html[data-theme="S"] .chat-fab .chat-fab-txt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-theme="S"] .chat-fab-av { inline-size: 2.9rem; block-size: 2.9rem; }
}
.hero-full .h1-kicker { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-slides::after { background: rgba(18, 20, 19, 0.24); }
.hero-full .h1-motto { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.hero-full .season-line { font-size: clamp(1.25rem, 2vw, 1.625rem); }

/* 完成イメージ提案の3案（2026-11-04 代表決裁：3案 × 見た目 × 料金 × 性能で比べる） */
.proposal { display: grid; gap: 1.25rem; margin-block-start: clamp(2.5rem, 5vw, 4rem); padding-block-start: clamp(2rem, 4vw, 3rem); border-block-start: 1px solid var(--line); }
.proposal-head { display: grid; gap: 0.5rem; max-inline-size: 46rem; }
.proposal-head .proof-big { margin: 0; }
.proposal-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proposal-tab { font: inherit; font-size: 0.9375rem; padding: 0.55rem 1.1rem; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); cursor: pointer; border-radius: 999px; }
.proposal-tab[aria-selected="true"] { background: var(--ink); color: var(--surface-raised); border-color: var(--ink); }
.proposal-tab:focus-visible, .ba-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.proposal-body { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .proposal-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } }
.proposal-visual { display: grid; gap: 0.75rem; min-inline-size: 0; }
.ba { position: relative; aspect-ratio: 3 / 4; max-inline-size: 100%; overflow: hidden; background: var(--ink); touch-action: pan-y; }
.ba picture, .ba img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ba .ba-after { clip-path: inset(0 0 0 var(--x, 40%)); }
.ba .ba-bar { position: absolute; inset-block: 0; inset-inline-start: var(--x, 40%); inline-size: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.ba:not(.is-live) .ba-bar { display: none; }
.ba .ba-range { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-label { position: absolute; inset-block-start: 0.75rem; font-size: 0.75rem; padding: 0.2rem 0.55rem; background: rgba(18, 20, 19, 0.7); color: #f4f3ef; pointer-events: none; }
.ba-label-l { inset-inline-start: 0.75rem; }
.ba-label-r { inset-inline-end: 0.75rem; }
.proposal-note { margin: 0; font-size: 0.875rem; color: var(--ink); border-inline-start: 3px solid var(--accent); padding: 0.4rem 0.75rem; background: var(--surface-raised); }
.proposal-panels { min-inline-size: 0; }
.proposal-panel { display: flex; flex-direction: column; gap: 0.85rem; block-size: 100%; }
.proposal-panel h3 { margin: 0; font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.proposal-chip { display: inline-block; margin: 0; font-size: 0.8125rem; color: var(--accent); }
.proposal-price { margin: 0.5rem 0 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-variant-numeric: tabular-nums; line-height: 1.3; }
.proposal-price span { display: block; font-size: 0.875rem; color: var(--muted); }
.proposal-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 1.25rem; margin: 1.25rem 0 0; }
.proposal-spec dt { color: var(--muted); font-size: 0.9375rem; }
.proposal-spec dd { margin: 0; }
.proposal-items { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; font-size: 0.9375rem; color: var(--muted); }
.proposal-items li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; border-block-end: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.proposal-table-wrap { overflow-x: auto; }
.proposal-table { border-collapse: collapse; inline-size: 100%; min-inline-size: 46rem; font-size: 0.9375rem; }
.proposal-table caption { text-align: start; font-size: 0.875rem; color: var(--muted); padding-block-end: 0.5rem; }
.proposal-table th, .proposal-table td { text-align: start; vertical-align: top; padding: 0.6rem 0.75rem; border-block-end: 1px solid var(--line); }
.proposal-table thead th { font-weight: 500; font-size: 0.8125rem; color: var(--muted); }
.proposal-table .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.proposal-after { margin: 0; font-size: 0.875rem; color: var(--muted); }
.proposal-basis { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--ink); border-inline-start: 3px solid var(--accent); padding: 0.65rem 0.95rem; background: var(--surface-raised); border-radius: 0 0.4rem 0.4rem 0; }
.proposal-days { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.proposal-say { margin: 0; }
.proposal-say h4 { margin: 0 0 0.15rem; font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.proposal-say p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--ink); }

/* ファーストビュー3案の切り替え（本番以外か ?hero= の時だけ /js/hero-variant.js が出す） */
.hero-alt-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-alt-wrap picture, .hero-alt-wrap img, .hero-alt-wrap .hero-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
html[data-hero="B"] .hero-slides .slide, html[data-hero="C"] .hero-slides .slide { visibility: hidden; }
.hero-switch { position: fixed; z-index: 50; inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px)); inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: 0.25rem; padding: 0.25rem; background: rgba(18, 20, 19, 0.82); border-radius: 999px; }
.hero-switch button { font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: #f4f3ef; cursor: pointer; }
.hero-switch button[aria-pressed="true"] { background: #f4f3ef; color: #1d201f; }
html[data-hero="B"] .ruler { background-image: linear-gradient(rgba(244, 243, 239, 0.9), rgba(244, 243, 239, 0.9)), url("/images/illustrations/texture-b-1600.webp"); background-size: cover; }
html[data-hero="C"] .ruler { background-image: linear-gradient(rgba(244, 243, 239, 0.88), rgba(244, 243, 239, 0.88)), url("/images/illustrations/texture-c-1600.webp"); background-size: cover; }
/* 3案シミュレーターは「相見積もりの前に」の2列の格子をまたいで全幅に置く（左の細い列に入らないように） */
html[data-theme="S"] .ruler .proposal { grid-column: 1 / -1; }
.proposal-head .proof-big { min-block-size: 0; }
html[data-theme="S"] .ruler:has(.proposal) h2 { position: static; }
/* 案C の内窓：写真では奥の窓が小さいので、言葉で補う（2026-11-04） */
/* 2026-11-05 監査③：補足バッジを画像枠外へ／右パネルはカード＋相談アクションで高さを揃える */
.proposal-addon { margin: 0; padding: 0.55rem 0.8rem; font-size: 0.8125rem; line-height: 1.65; background: var(--surface-raised); color: var(--ink); border-inline-start: 3px solid var(--accent); border-radius: 0 0.35rem 0.35rem 0; }
.proposal-card { padding: 0.9rem 1rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 0.6rem; }
.proposal-card h4 { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); letter-spacing: 0.02em; }
.proposal-card p { margin: 0; font-size: 0.9rem; line-height: 1.75; color: var(--ink); }
.pc-ico { inline-size: 1.1rem; block-size: 1.1rem; flex: none; color: var(--accent); }
.proposal-act { margin-block-start: auto; padding: 0.95rem 1rem; background: var(--ink); border-radius: 0.6rem; }
.proposal-act-lead { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 600; color: rgba(244, 243, 239, 0.92); }
.proposal-act-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.proposal-act-row .btn { flex: 1 1 10rem; justify-content: center; }
.btn-line-brand { background: #06C755; border-color: #06C755; color: #fff; }
.btn-line-brand:hover { background: #05b14c; border-color: #05b14c; color: #fff; }
.btn-ghost { background: transparent; border: 1px solid rgba(244, 243, 239, 0.55); color: #f4f3ef; }
.btn-ghost:hover { background: rgba(244, 243, 239, 0.12); color: #fff; }
/* 2026-11-05 監査①：公式LINEの相談カード */
.line-card { margin-block: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; max-inline-size: 46rem; color: var(--text); }
.line-card-h { color: var(--text); }
.line-card-top { display: flex; align-items: center; gap: 0.85rem; }
.line-card-logo { flex: none; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; background: #06C755; border-radius: 0.8rem; }
.line-card-logo svg { inline-size: 2rem; block-size: 2rem; }
.line-card-h { margin: 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: 0.04em; }
.line-card-id { margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.line-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); counter-reset: ls; }
.line-steps li { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem 0.8rem; background: var(--surface-raised); border-radius: 0.6rem; }
.line-steps li::before { counter-increment: ls; content: counter(ls); position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.65rem; font-size: 0.75rem; color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.line-step-ico { color: var(--accent); }
.line-step-ico svg { inline-size: 1.6rem; block-size: 1.6rem; }
.line-step-tx { font-size: 0.8125rem; line-height: 1.6; color: var(--ink); }
.line-step-tx b { display: block; font-size: 0.9375rem; }
.line-card-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-start: 1.25rem; }
.line-card-btn { flex: 1 1 15rem; justify-content: center; font-size: 1.0625rem; padding-block: 0.85rem; }
.line-card-qr { display: flex; align-items: center; gap: 0.65rem; margin: 0; }
.line-card-qr img { inline-size: 5rem; block-size: 5rem; border: 1px solid var(--line); border-radius: 0.4rem; background: #fff; padding: 2px; }
.line-card-qr figcaption { font-size: 0.75rem; color: var(--muted); max-inline-size: 8rem; line-height: 1.5; }
.line-card-note { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.7; }
/* 2026-11-05 監査④：できること＝写真カードグリッド（実施工写真があるものは写真、ないものは明朝カード） */
.svc-grid { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.svc-grid > li { min-inline-size: 0; }
.svc-grid a { display: flex; flex-direction: column; block-size: 100%; border: 1px solid var(--line); border-radius: 0.7rem; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 160ms ease; }
.svc-grid a:hover { border-color: var(--accent); }
.svc-grid a:hover .svc-card-body b { color: var(--accent-hover); }
.svc-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-raised); }
.svc-card-img picture { display: block; inline-size: 100%; block-size: 100%; }
.svc-card-img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.svc-card-noimg { display: grid; place-items: center; background: var(--ink); }
/* 写真のない工事カードは、名称の二重表示を避けて工事を表すライン画（外壁＝足場に囲まれた建物／フェイクグリーン＝二葉）を置く。名称は下のボディに一度だけ出る */
.svc-card-ico { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: color-mix(in srgb, var(--accent) 52%, #fff 48%); }
.svc-card-ico svg { inline-size: 42%; max-inline-size: 5.5rem; block-size: auto; }
.svc-card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.2rem; flex: 1 1 auto; }
.svc-card-body b { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.375rem); font-weight: 600; letter-spacing: 0.04em; }
.svc-card-body > span { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
/* 2026-11-05 監査②：ファーストビューのセカンダリCTA（その場でチャット相談） */
.hero-full .hero-chat { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; max-inline-size: 26rem; padding: 0.6rem 1.1rem; background: rgba(18, 20, 19, 0.42); border: 1px solid rgba(244, 243, 239, 0.6); border-radius: 0.45rem; color: #f4f3ef; font-size: 0.9375rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); transition: background-color 160ms ease; }
.hero-full .hero-chat:hover { background: rgba(18, 20, 19, 0.62); }
.hero-full .hero-chat .pc-ico { inline-size: 1.05rem; block-size: 1.05rem; color: #f4f3ef; }
@media (max-width: 34rem) { .line-steps { grid-template-columns: 1fr; } .line-steps li { flex-direction: row; align-items: center; gap: 0.75rem; } .line-steps li::before { inset-block-start: 0.4rem; } .line-card-qr { order: -1; } }
/* 小さな文字の緑は1割濃く（2026-11-04 文字のコントラスト 4.5:1 以上。ブランドの緑青はそのまま） */
:root { --accent-text: #376d64; }
.proof-tag, .portrait-qual, .subsidy-badge, .proposal-chip { color: var(--accent-text) !important; }

/* 2026-11-05 代表指示：ファーストビューは顧客が主語の横組み（何の会社か一目で分かる）。旧・縦組みの理念は使わない */
.hero-full .hero-over { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto; gap: 1.25rem; }
.hero-full .h1-kicker { grid-column: 1; grid-row: 2; align-self: end; }
html[lang] .hero-full .h1-motto.h1-claim { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; writing-mode: horizontal-tb; white-space: normal; max-inline-size: 24em; margin: 0; font-size: clamp(1.75rem, 4.4vw, 3.5rem); line-height: 1.45; letter-spacing: 0.04em; text-wrap: balance; }
html[lang] .h1-claim .h1-line + .h1-line { padding-inline-start: 0; margin-block-start: 0.2em; }
.hero-full .hero-sub { grid-column: 1; grid-row: 4; margin: 0; max-inline-size: 40rem; color: rgba(244, 243, 239, 0.92); font-size: clamp(0.9375rem, 1.4vw, 1.125rem); line-height: 1.9; text-wrap: pretty; }
html[lang] .hero-full .hero-act { grid-column: 1; grid-row: 5; max-inline-size: 30rem; }
@media (max-width: 47.99rem) {
  html[lang] .hero-full .h1-motto.h1-claim { font-size: clamp(1.5rem, 6.6vw, 2.125rem); }
}

/* 3つのお約束 */
.promise-list { counter-reset: promise; list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; max-inline-size: 46rem; }
.promise-list li { counter-increment: promise; position: relative; display: grid; gap: 0.25rem; padding-inline-start: 2.5rem; }
.promise-list li::before { content: counter(promise); position: absolute; inset-inline-start: 0; inset-block-start: 0.05rem; display: grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border: 0; background: var(--accent); color: #fff; border-radius: 50%; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.promise-list b { font-weight: 600; line-height: 1.7; }
.promise-list span { opacity: 0.86; font-size: 0.9375rem; line-height: 1.85; }
/* 文字が長くなったので、下側だけ写真を沈めて読みやすくする（コントラスト確保） */
.hero-full .hero-slides::after { background: linear-gradient(to top, rgba(18, 20, 19, 0.88) 0%, rgba(18, 20, 19, 0.66) 38%, rgba(18, 20, 19, 0.4) 68%, rgba(18, 20, 19, 0.24) 100%); }
.hero-full .hero-sub, html[lang] .hero-full .h1-claim { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.hero-full .hero-sub { font-weight: 500; }
.h-chunk { display: inline; }
/* 2026-11-05 監査⑤：お約束の見出しは自然な文字組に（チャンク分割をやめ balance） */
#cta-h { text-wrap: balance; line-height: 1.45; }
/* 3案の比べ方の表：スマホでは横に送って読む（列を潰さない） */
.proposal, .proposal-table-wrap { min-inline-size: 0; max-inline-size: 100%; }
.proposal-table { inline-size: max(100%, 62rem); table-layout: fixed; }
.proposal-table th:first-child { inline-size: 9rem; }

/* 2026-11-05 監査①：相談ボタンのすぐ下の安心のひと言 */
.contact-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.7; }
.cta-band .contact-note, .hero-full .contact-note { color: rgba(236, 235, 230, 0.82); }
/* 監査③：3案シミュレーターと工事ページの行き来 */
.proposal-links { margin-block-start: 1rem; font-size: 0.875rem; line-height: 1.9; }
.proposal-links a { display: inline-flex; align-items: center; min-block-size: 44px; }
.to-proposal { margin-block: 1.5rem; }
/* 監査②：スマホの下の相談バー（ヒーロー・相談欄・チャットが見えている間は隠す） */
.m-cta { display: none; }
@media (max-width: 47.99rem) {
  .m-cta:not([hidden]) { position: fixed; z-index: 45; inset-inline: 0; inset-block-end: 0; display: grid; gap: 0.375rem; padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); }
  .m-cta-plan { margin: 0; color: var(--accent-text, var(--muted)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
  .m-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  .m-cta-line, .m-cta-chat { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding: 0.5rem 1rem; border: 1px solid var(--ink); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
  .m-cta-line { background: var(--ink); color: var(--bg); }
  .m-cta-chat { background: transparent; color: var(--ink); }
}

/* 監査①：LINEカードは cta-band の明色文字ルール（html[data-theme="S"] .cta-band p / a）を受けて薄くならないよう、カード内の配色を明るい面に合わせて固定する（詳細度 0,4,x で末尾に置き確実に優先） */
html[data-theme="S"] .cta-band .line-card { color: var(--text); }
html[data-theme="S"] .cta-band .line-card .line-card-h { color: var(--text); }
html[data-theme="S"] .cta-band .line-card .line-card-id,
html[data-theme="S"] .cta-band .line-card .line-card-note,
html[data-theme="S"] .cta-band .line-card .line-card-qr figcaption { color: var(--muted); }
html[data-theme="S"] .cta-band .line-card .line-step-tx,
html[data-theme="S"] .cta-band .line-card .line-step-tx b { color: var(--ink); }
html[data-theme="S"] .cta-band .line-card .line-step-ico { color: var(--accent); }
html[data-theme="S"] .cta-band .line-card .line-steps li::before { color: var(--accent-text); }
html[data-theme="S"] .cta-band .line-card .line-card-btn { color: #fff; }

/* 2026-11-07 ④ 安心の仕組み（cta-band の暗色面に明るいカードで重ねる。文字色は .cta-band p/h2/a の明色ルールより詳細度を上げて固定＝0,4,x） */
html[data-theme="S"] .cta-band .trust-assure { background: var(--surface-raised); color: var(--text); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); }
html[data-theme="S"] .cta-band .trust-assure .trust-tag { margin: 0 0 1rem; color: var(--accent-text); font-weight: 600; letter-spacing: 0.04em; font-size: 0.9375rem; }
html[data-theme="S"] .cta-band .trust-assure .trust-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: trust; }
@media (min-width: 48rem) { html[data-theme="S"] .cta-band .trust-assure .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
html[data-theme="S"] .cta-band .trust-assure .trust-grid li { counter-increment: trust; padding-block-start: 0.75rem; border-block-start: 2px solid var(--accent); }
html[data-theme="S"] .cta-band .trust-assure .trust-h { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--ink); }
html[data-theme="S"] .cta-band .trust-assure .trust-h::before { content: counter(trust) "．"; color: var(--accent-text); font-weight: 600; }
html[data-theme="S"] .cta-band .trust-assure .trust-grid p { margin: 0; color: var(--text); font-size: 0.9375rem; line-height: 1.85; }

/* 2026-11-07 ② 他社見積の抜け漏れチェック（ruler 内の明色面。囲みカードで独立させる・別事業名は出さない） */
.estimate-check { margin-block-start: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--surface); }
.estimate-check .ec-tag { margin: 0 0 0.5rem; color: var(--accent-text, var(--muted)); font-weight: 600; letter-spacing: 0.04em; font-size: 0.9375rem; }
.estimate-check h3 { margin: 0 0 0.75rem; font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.5; }
.estimate-check > p { margin: 0 0 1.25rem; line-height: 1.9; }
.estimate-check .btn-line-brand { display: inline-flex; }
.estimate-check .ec-note { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--muted); }

/* 2026-11-07 ① 3案「ご相談に追加」チェック（proposal 内・施主支給/ローン書類） */
.proposal-addons { margin-block-start: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line); background: var(--surface); }
.proposal-addons legend { padding: 0 0.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--accent-text, var(--ink)); }
.proposal-addons .addon-check { display: flex; gap: 0.625rem; align-items: flex-start; padding-block: 0.5rem; font-size: 0.9375rem; line-height: 1.7; cursor: pointer; }
.proposal-addons .addon-check input { margin-block-start: 0.2em; inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--accent); flex: none; }
.proposal-addons .addon-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--muted); }

/* 2026-11-07 ③ 施工事例ごとの「このテイストでLINE相談」（case_id/service_id 引き継ぎ） */
.case-cta { margin-block-start: 1.25rem; }
.case-cta .btn-line-brand { display: inline-flex; }

/* 2026-11-07 公式LINE結合 ③ できること：工事カードの下に「LINEで相談／チャットで質問」（service_id・case_id を引き継ぐ。日本語版のみ） */
html[data-theme="S"] .svc-grid > li { display: flex; flex-direction: column; gap: 0.375rem; }
html[data-theme="S"] .svc-grid > li > a:first-child { flex: 1 1 auto; block-size: auto; }
html[data-theme="S"] .svc-grid .svc-card-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0; padding-inline: 0.25rem; font-size: 0.875rem; }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line { display: inline-flex; flex-direction: row; align-items: center; min-block-size: 44px; block-size: auto; border: 0; border-radius: 0; overflow: visible; background: none; color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line:hover { border: 0; color: var(--accent-hover, var(--accent-text)); }
html[data-theme="S"] .svc-grid .svc-card-act .svc-card-chat { min-block-size: 44px; font-size: 0.875rem; }
html[data-theme="S"] .svc-grid .svc-card-act .line-issue-status { flex-basis: 100%; }

/* 2026-11-07 ② 他社見積チェックを「3つのお約束」の暗色帯へ移設：明るいカードで重ね、文字とLINEボタンの色を固定（0,4,x） */
html[data-theme="S"] .cta-band .estimate-check { margin-block-start: 0; background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); }
html[data-theme="S"] .cta-band .estimate-check .ec-tag { color: var(--accent-text); }
html[data-theme="S"] .cta-band .estimate-check h3 { color: var(--ink); }
html[data-theme="S"] .cta-band .estimate-check p { color: var(--text); }
html[data-theme="S"] .cta-band .estimate-check .ec-note { color: var(--muted); }
html[data-theme="S"] .cta-band .estimate-check .btn-line-brand,
html[data-theme="S"] .cta-band .estimate-check .btn-line-brand:hover { background: #06C755; border-color: #06C755; color: #fff; }
html[data-theme="S"] .cta-band .estimate-check .btn-line-brand .btn-sub { color: rgba(255, 255, 255, 0.86); }

/* 2026-11-07 ① 3案の「添える」項目をトグル（選ぶと緑青の枠） */
html[data-theme="S"] .proposal-addons .addon-check { margin-block: 0.375rem; padding: 0.625rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
html[data-theme="S"] .proposal-addons .addon-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }

/* 2026-11-07 受付番号の発行状況（「受付番号 H-XXXXXX-NNNN でLINEを開きます」） */
.line-issue-status { display: block; margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }
.line-issue-status:empty { display: none; }
.line-issue-status a { color: var(--accent-text); text-decoration: underline; }
html[data-theme="S"] .cta-band .estimate-check .line-issue-status { color: var(--muted); }
html[data-theme="S"] .cta-band .estimate-check .line-issue-status a { color: var(--accent-text); }

/* ==================================================
   2026-11-07 ビジュアル昇格（建築ブティック水準）
   ① トークン：ウォームアイボリーの漆喰・多層の柔らかい影・カードの角丸・タイポの階層
   ② ヒーローのすりガラス／3案タブとチップ ③ 工事カード・佃涼太の特集記事風 ④ LINEカードとチャット起動ボタン
   装飾の画像は作らない（色・影・罫線・余白だけで構成）。動きは「動きを減らす」設定で止める。
   ================================================== */
html[data-theme="S"] {
  --bg: #efebe3;
  --surface: #e7e2d8;
  --surface-raised: #faf8f3;
  --line: rgba(58, 48, 34, 0.12);
  --line-strong: rgba(58, 48, 34, 0.2);
  --shadow-1: 0 1px 1px rgba(46, 38, 26, 0.04), 0 2px 6px rgba(46, 38, 26, 0.05), 0 14px 32px -16px rgba(46, 38, 26, 0.16);
  --shadow-2: 0 1px 2px rgba(46, 38, 26, 0.05), 0 8px 18px -6px rgba(46, 38, 26, 0.12), 0 28px 56px -24px rgba(46, 38, 26, 0.28);
  --radius-card: 14px;
  --radius-ctl: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --line-green: #06c755;
  --line-green-hover: #05b14c;
}
/* 漆喰の微細なムラ（左上に光、右に石の影）。画像は使わずグラデーションだけ */
html[data-theme="S"] body {
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(255, 255, 255, 0.6), transparent 62%),
    radial-gradient(900px 520px at 108% 24%, rgba(205, 193, 172, 0.28), transparent 60%),
    var(--bg);
}
/* タイポの階層（見出しは明朝で大きく・字間広め／本文は行間ゆったり／小見出しは字間を開けて小さく） */
html[data-theme="S"] main p { line-height: 1.95; }
html[data-theme="S"] .ruler h2, html[data-theme="S"] .index-sec h2, html[data-theme="S"] .cases h2 { font-size: clamp(1.75rem, 3.1vw, 2.618rem); line-height: 1.45; letter-spacing: 0.06em; }
html[data-theme="S"] .proof-tag, html[data-theme="S"] .proposal-chip, html[data-theme="S"] .ec-tag, html[data-theme="S"] .trust-tag { font-size: 0.8125rem; letter-spacing: 0.14em; }

/* ② ファーストビュー：コピーは雑誌の表紙のように大きく、相談の入口はすりガラスの板にまとめる */
html[lang] .hero-full .h1-motto.h1-claim { letter-spacing: 0.04em; line-height: 1.4; }
html[data-theme="S"] .hero-full .hero-sub::before { content: ""; display: block; inline-size: 3rem; block-size: 1px; margin-block-end: 1rem; background: rgba(255, 255, 255, 0.62); }
html[data-theme="S"] .hero-full .hero-act {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(20, 22, 21, 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html[data-theme="S"] .hero-full .btn-line { border-color: var(--line-green); border-radius: var(--radius-ctl); background: var(--line-green); color: #fff; box-shadow: 0 10px 24px -12px rgba(6, 199, 85, 0.75); }
html[data-theme="S"] .hero-full .btn-line:hover { border-color: var(--line-green-hover); background: var(--line-green-hover); color: #fff; }
html[data-theme="S"] .hero-full .btn-line .btn-sub { color: rgba(255, 255, 255, 0.86); }
html[data-theme="S"] .hero-full .hero-chat { max-inline-size: none; border-radius: var(--radius-ctl); background: rgba(255, 255, 255, 0.1); }
html[data-theme="S"] .hero-full .hero-chat:hover { background: rgba(255, 255, 255, 0.18); }
html[data-theme="S"] .hero-full .contact-note { margin: 0; color: rgba(244, 243, 239, 0.8); font-size: 0.8125rem; }

/* 3案シミュレーター：タブは一本のレールの上で切り替わる（選んだ案は墨色の駒が乗る） */
html[data-theme="S"] .proposal-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 2px rgba(46, 38, 26, 0.1); }
html[data-theme="S"] .proposal-tab { border: 0; background: transparent; color: var(--muted); padding: 0.6rem 1.15rem; letter-spacing: 0.04em; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
html[data-theme="S"] .proposal-tab:hover { background: rgba(255, 255, 255, 0.65); color: var(--ink); }
html[data-theme="S"] .proposal-tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(29, 32, 31, 0.7); }
html[data-theme="S"] .ba { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-2); }
html[data-theme="S"] .proposal-card { border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-1); }
html[data-theme="S"] .proposal-act { border-radius: var(--radius-card); }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="S"] .proposal-panel:not([hidden]) { animation: lalu-rise 0.45s var(--ease) both; }
  html[data-theme="S"] .ba-after:not([hidden]) img { animation: lalu-fade 0.5s var(--ease) both; }
}
@keyframes lalu-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lalu-fade { from { opacity: 0.2; } to { opacity: 1; } }

/* 3案の「添える」チップ：丸のチェックが緑青に変わり、レ点がふわっと出る（チェックボックスは見えなくしてもキーボードで選べる） */
html[data-theme="S"] .proposal-addons { padding: 1.1rem 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-1); }
html[data-theme="S"] .proposal-addons .addon-check { position: relative; display: flex; align-items: center; margin-block: 0.5rem; padding: 0.75rem 1.1rem 0.75rem 3.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); line-height: 1.6; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease); }
html[data-theme="S"] .proposal-addons .addon-check:hover { border-color: var(--accent); }
html[data-theme="S"] .proposal-addons .addon-check:active { transform: scale(0.99); }
html[data-theme="S"] .proposal-addons .addon-check input { position: absolute; inset-inline-start: 1rem; inline-size: 1.3rem; block-size: 1.3rem; margin: 0; opacity: 0; }
html[data-theme="S"] .proposal-addons .addon-check span::before { content: ""; position: absolute; inset-inline-start: 1rem; inset-block-start: 50%; inline-size: 1.3rem; block-size: 1.3rem; border: 1.5px solid var(--control); border-radius: 50%; background: #fff; transform: translateY(-50%); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
html[data-theme="S"] .proposal-addons .addon-check span::after { content: ""; position: absolute; inset-inline-start: calc(1rem + 0.45rem); inset-block-start: 50%; inline-size: 0.4rem; block-size: 0.7rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg) scale(0); transition: transform 0.25s var(--ease); }
html[data-theme="S"] .proposal-addons .addon-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, #fff); box-shadow: 0 10px 22px -14px rgba(62, 122, 112, 0.8); }
html[data-theme="S"] .proposal-addons .addon-check:has(input:checked) span::before { border-color: var(--accent); background: var(--accent); }
html[data-theme="S"] .proposal-addons .addon-check:has(input:checked) span::after { transform: translateY(-62%) rotate(45deg) scale(1); }
html[data-theme="S"] .proposal-addons .addon-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ③ できること：カード全体を1枚の板に（写真は4:3でそろえ、ホバーでゆっくり寄る。相談の入口はカードの足元に） */
html[data-theme="S"] .svc-grid { gap: clamp(1rem, 2vw, 1.5rem); }
html[data-theme="S"] .svc-grid > li { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow-1); transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease); }
html[data-theme="S"] .svc-grid > li > a:first-child { border: 0; border-radius: 0; background: transparent; }
html[data-theme="S"] .svc-grid .svc-card-img { aspect-ratio: 4 / 3; }
html[data-theme="S"] .svc-grid .svc-card-img img { transition: transform 1.2s var(--ease); }
html[data-theme="S"] .svc-card-body { padding: 1.15rem 1.25rem 1.1rem; gap: 0.45rem; }
html[data-theme="S"] .svc-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 0.35rem; }
html[data-theme="S"] .svc-card-tags .tag { padding: 0.18rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-text); font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.04em; }
html[data-theme="S"] .svc-grid .svc-card-act { justify-content: space-between; margin-block-start: auto; padding: 0.15rem 1.25rem; border-block-start: 1px solid var(--line); }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line { gap: 0.5rem; color: var(--ink); font-weight: 600; text-decoration: none; }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line::before { content: ""; inline-size: 0.55rem; block-size: 0.55rem; flex: none; border-radius: 50%; background: var(--line-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--line-green) 22%, transparent); }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line:hover { color: var(--accent-text); text-decoration: underline; }
html[data-theme="S"] .svc-grid .svc-card-act .svc-card-chat { color: var(--muted); font-size: 0.8125rem; }
@media (hover: hover) {
  html[data-theme="S"] .svc-grid > li:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
  html[data-theme="S"] .svc-grid > li:hover .svc-card-img img { transform: scale(1.05); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  html[data-theme="S"] .svc-grid > li.will-reveal .svc-card-img img { transform: scale(1.07); }
  html[data-theme="S"] .svc-grid > li.will-reveal.is-in .svc-card-img img { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="S"] .svc-grid > li, html[data-theme="S"] .svc-grid .svc-card-img img { transition: none; }
}

/* 佃涼太：特集記事風（大きな見出し・引用・名札が写真に重なる） */
html[data-theme="S"] .person-top { background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 40%, var(--bg)) 100%); }
html[data-theme="S"] .person-editorial { align-items: center; }
html[data-theme="S"] .person-editorial .portrait img { border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
html[data-theme="S"] .person-editorial .portrait figcaption { position: relative; display: inline-block; margin: -2.75rem 0 0 1.25rem; padding: 0.9rem 1.25rem; border-radius: 10px; background: var(--surface-raised); box-shadow: var(--shadow-1); }
html[data-theme="S"] .person-editorial .portrait-name { margin-block: 0.15rem; font-size: 1.75rem; }
html[data-theme="S"] .person-kicker { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1rem; color: var(--accent-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; }
html[data-theme="S"] .person-kicker::after { content: ""; inline-size: 3rem; block-size: 1px; background: currentColor; opacity: 0.6; }
html[data-theme="S"] .person-story h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.35; letter-spacing: 0.05em; }
html[data-theme="S"] .person-quote { margin: 1.75rem 0 1.5rem; padding: 0.25rem 0 0.25rem 1.5rem; border-inline-start: 2px solid var(--accent); }
html[data-theme="S"] .person-quote p { margin: 0; max-inline-size: 26em; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.125rem, 1.8vw, 1.45rem); line-height: 1.85; }
html[data-theme="S"] .person-story > p { max-inline-size: 36em; }

/* ④ LINEカードとお約束の中のカード：角丸と影で一段手前に */
html[data-theme="S"] .cta-band .line-card { border-radius: 20px; background: var(--surface-raised); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
html[data-theme="S"] .cta-band .estimate-check, html[data-theme="S"] .cta-band .trust-assure { border-radius: var(--radius-card); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.5); }
html[data-theme="S"] .line-card-qr img { border-radius: 10px; box-shadow: var(--shadow-1); }
html[data-theme="S"] .estimate-check .btn-line-brand { border-radius: var(--radius-ctl); }

/* ④ 右下のチャット起動ボタン：PCはすりガラスの小さな札。スマホは下の相談バーが出ている間は隠し（入口を二重にしない）、
   バーが無い時だけ右下に控えめに出す（バーと重ならない） */
html[data-theme="S"] .chat-fab { border-color: rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(29, 32, 31, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-2); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
@media (max-width: 47.99rem) {
  html[data-theme="S"] .chat-fab { inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  html[data-theme="S"] body:has(.m-cta:not([hidden])) .chat-fab { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }
  html[data-theme="S"] .m-cta:not([hidden]) { border-block-start: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 86%, transparent); box-shadow: 0 -14px 34px -22px rgba(29, 32, 31, 0.55); }
  html[data-theme="S"] .m-cta-line { border-color: var(--line-green); border-radius: var(--radius-ctl); background: var(--line-green); color: #fff; }
  html[data-theme="S"] .m-cta-chat { border-color: var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface-raised); }
}
/* すりガラスの板がファーストビューの下端で切れないよう、下に余白を取る */
html[data-theme="S"] .hero-full .hero-over { padding-block-end: clamp(2rem, 6vh, 4rem); }
html[data-theme="S"] .svc-grid .svc-card-act a.svc-card-line, html[data-theme="S"] .svc-grid .svc-card-act .svc-card-chat { min-block-size: 40px; }
html[data-theme="S"] .proposal-tabs { inline-size: fit-content; max-inline-size: 100%; justify-self: start; }
html[data-theme="S"] .proposal-act .btn-line-brand { border-color: var(--line-green); border-radius: var(--radius-ctl); background: var(--line-green); color: #fff; box-shadow: 0 10px 22px -12px rgba(6, 199, 85, 0.7); }
html[data-theme="S"] .proposal-act .btn-line-brand:hover { border-color: var(--line-green-hover); background: var(--line-green-hover); color: #fff; }
html[data-theme="S"] .proposal-act .btn-ghost { border-radius: var(--radius-ctl); }

/* ==================================================
   2026-11-07 代表R4：4カテゴリー×3案・実写（EXIF除去・プライバシー処理済み）・外壁の建築イメージ図・LINEカードの連結ステップ
   洋室6畳のスライダーは撤去。工事を先に選び（4つのタブ）、その工事の A/B/C を比べる。
   ================================================== */
.seg-anchor { display: block; block-size: 0; scroll-margin-block-start: 5rem; }
html[data-theme="S"] .seg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 52rem) { html[data-theme="S"] .seg-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; } }
html[data-theme="S"] .seg-tab { display: flex; align-items: center; gap: 0.65rem; min-block-size: 3.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.02em; text-align: start; cursor: pointer; box-shadow: var(--shadow-1); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
html[data-theme="S"] .seg-tab:hover { border-color: var(--accent); }
html[data-theme="S"] .seg-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(29, 32, 31, 0.75); }
html[data-theme="S"] .seg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.seg-num { display: grid; place-items: center; flex: none; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent-text); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-theme="S"] .seg-tab[aria-selected="true"] .seg-num { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (max-width: 47.99rem) {
  html[data-theme="S"] .seg-tab { gap: 0.5rem; min-block-size: 3.25rem; padding: 0.6rem 0.7rem; font-size: 0.8125rem; letter-spacing: 0; }
  html[data-theme="S"] .seg-tab .seg-num { inline-size: 1.6rem; block-size: 1.6rem; font-size: 0.8125rem; }
}
.seg-panel { display: grid; gap: 1.25rem; min-inline-size: 0; }
.seg-body { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .seg-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } }
.seg-visual, .seg-plans { display: grid; gap: 0.9rem; min-inline-size: 0; }
.seg-fig { display: grid; gap: 0.6rem; margin: 0; }
.seg-fig .seg-hero img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-2); }
.seg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.seg-pair.seg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-pair-item { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-1); }
.seg-pair-item picture, .seg-pair-item img { display: block; inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.seg-badge { position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; padding: 0.15rem 0.65rem; border-radius: 999px; background: rgba(18, 20, 19, 0.74); color: #f4f3ef; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; }
.seg-badge-after { background: var(--accent); color: #fff; }
.seg-note, .seg-cap { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.75; }
.seg-cap b { display: block; margin-block-end: 0.15rem; color: var(--ink); font-size: 0.875rem; }
.seg-more { margin: 0; font-size: 0.875rem; }
.seg-more a { display: inline-flex; align-items: center; min-block-size: 44px; }
.seg-points { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: segpt; }
@media (min-width: 36rem) { .seg-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-points li { counter-increment: segpt; position: relative; display: grid; gap: 0.1rem; padding: 0.7rem 0.85rem 0.75rem 2.65rem; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--surface-raised); font-size: 0.8125rem; line-height: 1.65; }
.seg-points li::before { content: counter(segpt); position: absolute; inset-inline-start: 0.8rem; inset-block-start: 0.78rem; display: grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 700; }
.seg-points b { color: var(--ink); font-size: 0.875rem; }
.seg-of { display: block; margin-block-start: 0.2rem; color: var(--muted); font-family: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; }
.seg-items { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.seg-items li { padding: 0.25rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-text); font-size: 0.8125rem; line-height: 1.7; }
html[data-theme="S"] .proposal-table.seg-table { inline-size: max(100%, 40rem); }
html[data-theme="S"] .proposal-table.seg-table th:first-child { inline-size: 11rem; }
html[data-theme="S"] .proposal > .proposal-act { margin-block-start: 0; }
html[data-theme="S"] .proposal > .proposal-act .btn-line-brand { flex: 1 1 16rem; font-size: 1.0625rem; padding-block: 0.85rem; }
html[data-theme="S"] .proposal > .proposal-act .proposal-act-lead { font-size: 0.875rem; }
html[data-theme="S"] .proposal > .proposal-act .line-issue-status { color: rgba(244, 243, 239, 0.86); }
html[data-theme="S"] .proposal > .proposal-act .line-issue-status a { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="S"] .seg-panel:not([hidden]) .seg-visual { animation: lalu-fade 0.5s var(--ease) both; }
}

/* できること：外壁の建築イメージ図・ガレージの実例に添える注記 */
html[data-theme="S"] .svc-card-body > .svc-card-note { margin-block-start: 0.15rem; padding-block-start: 0.5rem; border-block-start: 1px dashed var(--line-strong); color: var(--muted); font-size: 0.75rem; line-height: 1.7; }

/* 工事ページの実写ギャラリー（造形ギャラリー／見えなくなる下地処理の手間） */
.gallery-sec .section-lead { margin-block-end: 1.5rem; }
.gallery-pair { display: grid; gap: 0.6rem; margin: 0 0 1.5rem; max-inline-size: 60rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.gallery-item { min-inline-size: 0; }
.gallery-item.gallery-wide { grid-column: 1 / -1; }
.gallery-item figure { display: grid; gap: 0.45rem; margin: 0; }
.gallery-item img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-1, none); }
.gallery-item.gallery-wide img { aspect-ratio: auto; }
.gallery-item figcaption { color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }

/* LINEカード：公式アイコンの形（緑の角丸に白い吹き出し）と、撮る→送る→届くの連結カード */
html[data-theme="S"] .line-card .line-card-logo { inline-size: 3.25rem; block-size: 3.25rem; border-radius: 22%; background: var(--line-green); box-shadow: 0 8px 18px -10px rgba(6, 199, 85, 0.8); }
html[data-theme="S"] .line-card .line-card-logo svg { inline-size: 2.2rem; block-size: 2.2rem; }
html[data-theme="S"] .line-card .line-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
html[data-theme="S"] .line-card .line-steps li { position: relative; display: flex; flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.95rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-1); }
html[data-theme="S"] .line-card .line-steps li::before, html[data-theme="S"] .cta-band .line-card .line-steps li::before { content: none; }
html[data-theme="S"] .line-card .line-steps li:not(:last-child)::before, html[data-theme="S"] .cta-band .line-card .line-steps li:not(:last-child)::before { content: ""; position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-end: calc(-0.8rem - 0.875rem); inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transform: translateY(-50%); }
html[data-theme="S"] .line-card .line-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 3; inset-block-start: 50%; inset-inline-end: calc(-0.8rem - 0.24rem); inline-size: 0.48rem; block-size: 0.48rem; border: solid var(--line-green); border-width: 2px 2px 0 0; transform: translate(-0.07rem, -50%) rotate(45deg); }
.line-step-mark { position: relative; display: grid; place-items: center; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 0.85rem; background: color-mix(in srgb, var(--line-green) 12%, #fff); color: #04a049; }
.line-step-mark svg { inline-size: 1.5rem; block-size: 1.5rem; }
.line-step-num { position: absolute; inset-block-start: -0.5rem; inset-inline-start: -0.5rem; display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--line-green); color: #fff; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #fff; }
html[data-theme="S"] .line-card .line-step-tx { display: grid; gap: 0.1rem; color: var(--ink); font-size: 0.8125rem; line-height: 1.55; }
html[data-theme="S"] .line-card .line-step-tx b { font-size: 1.0625rem; letter-spacing: 0.08em; }
@media (max-width: 44rem) {
  html[data-theme="S"] .line-card .line-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  html[data-theme="S"] .line-card .line-steps li:not(:last-child)::before, html[data-theme="S"] .cta-band .line-card .line-steps li:not(:last-child)::before { inset-block-start: auto; inset-block-end: calc(-0.75rem - 0.875rem); inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); }
  html[data-theme="S"] .line-card .line-steps li:not(:last-child)::after { inset-block-start: auto; inset-block-end: calc(-0.75rem - 0.2rem); inset-inline-end: auto; inset-inline-start: 50%; transform: translate(-50%, -0.05rem) rotate(135deg); }
}

/* ==================================================
   2026-11-07 代表R4：引き算のUX（第三者のスマホ実機テスト）
   ①FV＝キャッチ2行・工事タグ・ボタン2つだけ ②工事カテゴリー別の施工写真と3案の一覧（案のタブと比べ方の表は撤去）
   ③スマホで写真を送るだけ ④佃涼太と3つのお約束
   ================================================== */
.hero-simple .h1-eyebrow { grid-column: 1; grid-row: 2; align-self: end; display: inline-flex; align-items: center; gap: 0.65rem; color: rgba(244, 243, 239, 0.94); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.hero-simple .h1-eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 1px; flex: none; background: rgba(255, 255, 255, 0.75); }
html[lang] .hero-full.hero-simple .h1-motto.h1-claim { grid-row: 3; max-inline-size: none; font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.5; letter-spacing: 0.12em; }
@media (max-width: 47.99rem) { html[lang] .hero-full.hero-simple .h1-motto.h1-claim { font-size: clamp(1.5rem, 6.2vw, 2rem); letter-spacing: 0.08em; } }
.hero-tags { grid-column: 1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.hero-tags a { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0.4rem 0.95rem; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease); }
.hero-tags a:hover, .hero-tags a:focus-visible { border-color: #fff; background: rgba(255, 255, 255, 0.26); color: #fff; }
.hero-cta { grid-column: 1; grid-row: 5; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin-block-start: 0.6rem; }
html[data-theme="S"] .hero-cta .hero-line { display: inline-flex; align-items: center; justify-content: center; min-block-size: 54px; padding: 0.85rem 1.8rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em; }
html[data-theme="S"] .hero-cta .hero-chat { min-block-size: 54px; padding-inline: 1.4rem; }
@media (max-width: 47.99rem) {
  .hero-cta { flex-direction: column; }
  html[data-theme="S"] .hero-cta .hero-line, html[data-theme="S"] .hero-cta .hero-chat { inline-size: 100%; }
}

/* ② 工事カテゴリー別の施工写真と3案の一覧 */
html[data-theme="S"] .proposal.proposal-list { gap: 1rem; margin-block-start: 1rem; padding-block-start: 0; border-block-start: 0; }
.proposal-lead { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.proposal-list .seg-panel { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) {
  .proposal-list .seg-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: 2.5rem; }
  .proposal-list .seg-panel .proposal-links { grid-column: 1 / -1; }
}
.proposal-list .seg-points { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; counter-reset: segpt; }
.proposal-list .seg-points li { counter-increment: segpt; position: relative; display: inline-flex; align-items: center; padding: 0.25rem 0.75rem 0.25rem 2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--ink); font-size: 0.75rem; font-weight: 600; line-height: 1.6; }
.proposal-list .seg-points li::before { content: counter(segpt); position: absolute; inset-inline-start: 0.35rem; inset-block-start: 50%; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.6875rem; font-weight: 700; transform: translateY(-50%); }
.seg-award { margin: 0; padding: 0.5rem 0.8rem; border-inline-start: 3px solid var(--accent); border-radius: 0 0.4rem 0.4rem 0; background: var(--surface-raised); color: var(--ink); font-size: 0.8125rem; line-height: 1.65; }
.plan-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.plan-card { position: relative; display: grid; gap: 0.5rem; padding: 1rem 1.1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius-card, 14px); background: var(--surface-raised); box-shadow: var(--shadow-1, none); }
.plan-head { display: flex; align-items: start; gap: 0.65rem; margin: 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; }
.plan-letter { display: grid; place-items: center; flex: 0 0 2rem; align-self: start; inline-size: 2rem; block-size: 2rem; margin-block-start: 0.05rem; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-sans, inherit); font-size: 0.9375rem; font-weight: 700; }
.plan-facts { display: grid; gap: 0.35rem; margin: 0; }
.plan-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: baseline; gap: 0.75rem; }
.plan-facts dt { color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.plan-facts dd { margin: 0; color: var(--ink); font-size: 0.9375rem; line-height: 1.6; }
html[data-theme="S"] .plan-line { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; margin-block-start: 0.15rem; padding: 0.5rem 1.05rem; border-radius: var(--radius-ctl, 12px); background: var(--line-green); color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; box-shadow: 0 8px 18px -12px rgba(6, 199, 85, 0.8); }
html[data-theme="S"] .plan-line:hover { background: var(--line-green-hover); color: #fff; }
.plan-card .line-issue-status { margin-block-start: 0; }
@media (max-width: 30rem) {
  .plan-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.05rem; }
  html[data-theme="S"] .plan-line { justify-self: stretch; justify-content: center; }
}
.proposal-list .proposal-addons { margin-block-start: 0.25rem; }
.proposal-chat { margin: 0; }
.works-more { margin: 1.75rem 0 0; }

/* ③ スマホで写真を送るだけ（独立したブロック） */
.line-sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
html[data-theme="S"] .line-sec .line-card { margin: 0 auto; border-radius: 20px; background: var(--surface-raised); box-shadow: var(--shadow-2); }
/* 2026-11-07 キャッチはちょうど2行（行の途中で折り返さない。スマホは画面幅に合わせて文字を縮める） */
html[lang="ja"] .hero-simple .h1-claim .h1-line { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 47.99rem) { html[lang="ja"] .hero-full.hero-simple .h1-motto.h1-claim { font-size: clamp(1.25rem, 6.5vw, 2.3rem); letter-spacing: 0.02em; } }
/* 工事タブはFVのタグと同じ短い名前。番号は付けず、折り返す時は「・」の後ろで */
html[data-theme="S"] .proposal-list .seg-tab { justify-content: center; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 51.99rem) { html[data-theme="S"] .proposal-list .seg-tab { font-size: 0.875rem; padding-inline: 0.6rem; } }

/* 2026-11-09 代表R4：チャットをタップ選択式（シミュレーション）に刷新。横スクロールバーを出さない。 */
.chat-panel { overflow-x: hidden; }
.chat-flow { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.9rem; min-inline-size: 0; padding: 1rem 1rem 0.5rem; }
.chat-flow.simple { gap: 0.75rem; padding: 1.25rem; }
.chat-flow.simple .btn { inline-size: 100%; }
.chat-open { margin: 0; color: var(--text); font-size: 0.9rem; line-height: 1.8; }
.chat-step { display: flex; flex-direction: column; gap: 0.7rem; }
.chat-q { margin: 0; color: var(--ink); font-size: 0.9rem; font-weight: 700; line-height: 1.7; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-block-size: 44px; padding: 0.6rem 0.95rem; border: 1px solid var(--control); border-radius: 999px; background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.5; text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background-color 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease), color 0.2s var(--ease, ease); }
.chip:hover { border-color: var(--accent); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip[data-picked] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-shake { animation: chip-shake 0.35s ease; }
@keyframes chip-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.chip-head { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.8125rem; font-weight: 700; }
.chip-head[data-warn] { color: #b03a2e; }
.chip-sub { display: flex; flex-direction: column; gap: 0.5rem; }
.chip-col { display: flex; flex-direction: column; gap: 0.35rem; }
.opt { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.45rem 0.1rem; color: var(--text); font-size: 0.8125rem; line-height: 1.6; cursor: pointer; }
.opt input { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: 0.15rem; accent-color: #06C755; }
.chat-card { display: grid; gap: 0.4rem; margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.chat-card > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 0.6rem; font-size: 0.875rem; line-height: 1.6; }
.chat-card dt { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.chat-card dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.chat-note-opt { display: flex; flex-direction: column; gap: 0.35rem; color: var(--muted); font-size: 0.8125rem; }
.chat-note-opt textarea { inline-size: 100%; min-block-size: 3rem; max-block-size: 7rem; padding: 0.6rem; border: 1px solid var(--control); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; font-size: 0.95rem; line-height: 1.6; resize: vertical; }
.chat-go { margin-block-start: 0.3rem; display: inline-flex; align-items: center; justify-content: center; min-block-size: 54px; padding: 0.75rem 1rem; text-align: center; line-height: 1.45; font-weight: 700; }
html[data-theme="S"] .chat-go, html[data-theme="S"] .chat-handoff .chat-line { border-color: #06C755; background: #06C755; color: #fff; }
html[data-theme="S"] .chat-go:hover, html[data-theme="S"] .chat-handoff .chat-line:hover { border-color: #05b14c; background: #05b14c; color: #fff; }
.chat-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.25rem 1rem 1rem; }
.chat-ctrl { min-block-size: 40px; padding: 0.4rem 0.85rem; border: 1px solid var(--control); border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.chat-ctrl:hover { border-color: var(--accent); color: var(--ink); }

/* ==================================================
   下層：石・紙・墨の面と、工事ごとの写真／建築線画。
   トップと既存 Bento の構造・色はこの層の対象にしない。
   ================================================== */
html[data-theme="S"] .subpage-head,
html[data-theme="S"] .subpage-section,
html[data-theme="S"] .consultation-band {
  --subpage-stone: #f1f0eb;
  --subpage-paper: #fffefa;
  --subpage-ink: #28312c;
  border-block-end: 1px solid var(--line);
}
html[data-theme="S"] .subpage-head,
html[data-theme="S"] .surface-stone { background: var(--subpage-stone); }
html[data-theme="S"] .surface-paper { background: var(--subpage-paper); }
html[data-theme="S"] .subpage-section + .subpage-section,
html[data-theme="S"] .subpage-section + .consultation-band { border-block-start: 0; }
html[data-theme="S"] .subpage-head {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 5rem);
}
/* 既存 theme S の本文52remに、ヘッダー・事例本文・写真一覧の端もそろえる。 */
html[data-theme="S"] .subpage-head > .wrap,
html[data-theme="S"] .subpage-section .wrap,
html[data-theme="S"] .consultation-band > .wrap {
  inline-size: min(52rem, calc(100% - var(--gutter) * 2));
}
html[data-theme="S"] .subpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 3vw, 3rem);
  margin-block-start: clamp(1.5rem, 3vw, 3rem);
}
html[data-theme="S"] .subpage-hero > * { min-inline-size: 0; }
html[data-theme="S"] .subpage-intro h1 {
  margin-block: 0 1.25rem;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
}
html[data-theme="S"] .subpage-intro .section-lead { font-size: 0.9375rem; line-height: 2; }
html[data-theme="S"] .subpage-intro .chips { margin-block-start: 1.5rem; }
html[data-theme="S"] .subpage-intro .chips span { background: var(--subpage-paper); font-size: 0.75rem; }
html[data-theme="S"] .subpage-intro .award-box { margin-block: 1.5rem 0; }
html[data-theme="S"] .subpage-intro p.award {
  margin: 0;
  padding: 0.75rem 0 0.75rem 1rem;
  background: transparent;
  font-size: 0.8125rem;
}
html[data-theme="S"] .subpage-visual { margin: 0; }
html[data-theme="S"] .subpage-visual picture { display: block; }
html[data-theme="S"] .subpage-visual img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}
html[data-theme="S"] .subpage-visual figcaption {
  padding-block-start: 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.8;
}
html[data-theme="S"] .building-drawing {
  display: block;
  inline-size: 100%;
  block-size: auto;
  color: var(--subpage-ink);
  background: var(--subpage-paper);
  border: 1px solid var(--line);
}
html[data-theme="S"] .subpage-portrait .portrait { max-inline-size: 22rem; margin-inline: auto; }
html[data-theme="S"] .subpage-portrait img { aspect-ratio: 4 / 5; object-position: center 25%; }
html[data-theme="S"] .subpage-overview,
html[data-theme="S"] .about-facts-grid { display: grid; gap: 2rem; }
html[data-theme="S"] .about-facts-block { min-inline-size: 0; }
html[data-theme="S"] .subpage-section .svc-works { padding-block: clamp(2rem, 5vw, 4rem); }
html[data-theme="S"] .subpage-section .service-list > li { background: var(--subpage-paper); }
html[data-theme="S"] .subpage-section .faq-list { margin-block-end: 0; }
html[data-theme="S"] .subpage-head + .subpage-section.section { padding-block-start: var(--section-space); }
html[data-theme="S"] .consultation-band {
  --bg: #28312c;
  --text: #fffefa;
  --ink: #fffefa;
  --muted: #d7dbd5;
  --control: #90988e;
  --line: #626d62;
  background: var(--subpage-ink);
  color: var(--text);
}
html[data-theme="S"] .consultation-band .contact-buttons { margin-block-start: 1.5rem; }
html[data-theme="S"] .consultation-band .contact-buttons.size-lg { padding: 0; border: 0; background: transparent; }
html[data-theme="S"] .consultation-band .btn-mail.btn-main { color: var(--subpage-ink); }
html[data-theme="S"] .consultation-band .btn-mail.btn-main:hover { background: #fff; border-color: #fff; }
html[data-theme="S"] .consultation-band .contact-note,
html[data-theme="S"] .consultation-band .small { color: var(--muted); }
/* 公式Instagramへのリンク。glyphはローカルSVGの単色maskで配信する。 */

.instagram-portfolio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 1rem;
  max-inline-size: 52rem;
  margin-block: 1.5rem 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-card, 14px);
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
}
.instagram-portfolio:hover { border-color: var(--accent); }
.instagram-portfolio-copy { display: grid; gap: 0.35rem; min-inline-size: 0; }
.instagram-portfolio-copy strong { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; font-size: 0.9375rem; line-height: 1.6; }
.instagram-handle { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; }
.instagram-portfolio-copy > span { color: var(--muted); font-size: 0.8125rem; line-height: 1.8; }
.instagram-portfolio-arrow { font-size: 1.25rem; line-height: 1; }
.footer-instagram { align-items: center; gap: 0.5rem; }
/* 造形の比較ペアは大きく、補足6枚は小さく整列。画像は切り抜かず全体を見せる。 */
.gallery-compact .gallery-pair .seg-pair-item picture,
.gallery-compact .gallery-pair .seg-pair-item img { aspect-ratio: auto; object-fit: contain; }
.gallery-compact .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
.gallery-compact .gallery-item picture {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card, 12px);
  background: var(--surface);
}
.gallery-compact .gallery-item img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
@media (min-width: 48rem) {
  .gallery-compact .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  html[data-theme="S"] .subpage-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-theme="S"] .subpage-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
  html[data-theme="S"] .about-facts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

/* 公式Instagramを作品の入口として明示。相談の緑と分け、墨と紙の細い面で案内する。 */
.header-actions { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
/* 相談の起動はbuttonで行う。既存CTAの色と書体を保ち、UA既定の立体枠を出さない。 */
button.btn, button.plan-line, button.m-cta-line { appearance: none; }
html[data-theme="S"] button.plan-line { border: 1px solid var(--line-green); font-family: var(--font-sans); line-height: 1.6; text-align: center; }
html[data-theme="S"] button.plan-line:hover { border-color: var(--line-green-hover); }
.header-instagram { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-block-size: 44px; padding: 0.375rem 0.25rem; color: var(--ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-decoration: none; }
.nav-instagram { gap: 0.65rem; }
html[data-theme="S"] .header-actions .header-cta { min-block-size: 44px; padding-inline: 0.75rem; white-space: nowrap; }
html[data-theme="S"] .header-inner { column-gap: 0.5rem; }
html[data-theme="S"] .header-inner .brand { inline-size: 9rem; }
html[data-theme="S"] .instagram-portfolio-hero {
  grid-column: 1;
  grid-row: 6;
  justify-self: start;
  inline-size: min(40rem, 100%);
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  background: rgba(18, 22, 20, 0.82);
  color: #fffefa;
}
html[data-theme="S"] .instagram-portfolio-hero strong { font-size: 0.875rem; font-weight: 500; line-height: 1.9; }
html[data-theme="S"] .instagram-portfolio-hero:hover { background: #28312c; border-color: #fffefa; }
html[data-theme="S"] .instagram-showcase {
  grid-template-columns: minmax(0, 1fr) 1rem;
  gap: 1rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-color: var(--ink);
  border-radius: 4px;
  background: #fffefa;
}
html[data-theme="S"] .instagram-showcase > .instagram-portfolio-copy { grid-column: 1; grid-row: 1; gap: 0.75rem; }
html[data-theme="S"] .instagram-showcase > .instagram-portfolio-arrow { grid-column: 2; grid-row: 1; }
html[data-theme="S"] .instagram-showcase strong { font-family: var(--font-serif); font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.9; font-weight: 600; }
html[data-theme="S"] .instagram-portfolio-hero .instagram-portfolio-copy strong,
html[data-theme="S"] .instagram-showcase .instagram-portfolio-copy strong { display: block; text-wrap: balance; }
.instagram-publication, .instagram-phrase { white-space: nowrap; }
.instagram-showcase-photos { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; min-inline-size: 0; }
.instagram-showcase-photos picture { display: block; background: #f1f0eb; }
.instagram-showcase-photos img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: contain; }
html[data-theme="S"] .instagram-showcase:hover { border-color: var(--accent); }
html[data-theme="S"] .portfolio-primary { padding-block: clamp(1.5rem, 4vw, 3rem); }
.portfolio-primary .instagram-showcase { margin-block: 0; }
.curated-project h3 { margin-block: 0 0.875rem; font-size: 1.0625rem; line-height: 1.7; font-weight: 600; }
.curated-comparison { margin: 0; }
.curated-comparison picture { display: block; }
.curated-comparison img { display: block; inline-size: 100%; block-size: auto; object-fit: contain; }
.curated-comparison figcaption { margin-block-start: 0.75rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.9; }
.curated-garage-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.curated-stage { display: grid; gap: 0.5rem; min-inline-size: 0; }
.curated-stage > span { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; }
.curated-proof-grid { display: grid; gap: 2rem; margin-block-start: 2.5rem; padding-block-start: 2.5rem; border-block-start: 1px solid var(--line); }
.portfolio-record-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portfolio-record-list li { padding-block: 0.875rem; border-block-start: 1px solid var(--line); font-size: 0.9375rem; scroll-margin-block-start: var(--anchor-offset); }
/* 補足写真は小さな作品一覧に。比較ペアとの大小をつけ、原画を切り抜かない。 */
html[data-theme="S"] .gallery-compact { padding-block: clamp(2rem, 5vw, 4rem); }
.gallery-compact .gallery-pair { max-inline-size: 44rem; margin-inline: auto; }
.gallery-compact .gallery-pair .seg-pair-item { border-radius: 4px; box-shadow: none; }
.gallery-compact .gallery-grid { max-inline-size: 38rem; margin-inline: auto; gap: 0.875rem 0.75rem; }
.gallery-compact .gallery-item picture { border-radius: 3px; background: #f1f0eb; }
.gallery-compact .gallery-item figcaption { font-size: 0.75rem; line-height: 1.7; }
@media (min-width: 36rem) {
  .curated-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 47.99rem) {
  .m-cta-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .m-cta-line { font-family: var(--font-sans); cursor: pointer; }
  .m-cta-chat { padding-inline: 0.75rem; }
  .m-cta-instagram { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-block-size: 48px; padding: 0.5rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--ink); color: var(--bg); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
}
@media (min-width: 48rem) {
  html[data-theme="S"] .instagram-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) 1rem; gap: 1rem; }
  .instagram-showcase-photos { grid-column: 2; grid-row: 1; }
  html[data-theme="S"] .instagram-showcase > .instagram-portfolio-arrow { grid-column: 3; }
}
@media (min-width: 72rem) {
  html[data-theme="S"] .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.25rem; }
  .header-instagram { padding-inline: 0.5rem; font-size: 0.8125rem; }
  html[data-theme="S"] .header-actions .header-cta { padding-inline: 1rem; }
}

/* Separate service routes and documentation, using the existing paper/ink palette. */
.service-focus-grid,.inspection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-block:2rem}
.service-focus,.inspection-grid article{padding:clamp(1.25rem,3vw,2.5rem);border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--bg);color:var(--ink);text-decoration:none}
.service-focus h3,.inspection-grid h3{font-family:var(--font-serif);line-height:1.7;font-size:1.3rem}.service-focus p,.inspection-grid p{line-height:1.9}
.inspection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inspection-boundary{padding:1.5rem;border-inline-start:3px solid var(--accent);line-height:2}.inspection-report p,.window-notice p{line-height:2}
.inspection-choice{display:block;margin:1rem 0;text-decoration:none}.window-notice{margin-block:2rem;padding:clamp(1rem,3vw,2rem);border:1px solid var(--line-strong)}
.instagram-portfolio{grid-template-columns:minmax(0,1fr) auto}
.service-focus-grid>.service-focus:only-child{grid-column:1/-1}
@media(max-width:47.99rem){.service-focus-grid,.inspection-grid{grid-template-columns:1fr}}

/* 規模別の見積もりと施主判断の資料。価格表ではなく相談の入口を示す。 */
.estimate-path-grid,.inspection-preview-grid{display:grid;gap:1.5rem;margin:2.5rem 0}
.estimate-path-grid article,.inspection-paper{position:relative;border:1px solid var(--line);padding:2rem;background:var(--surface-raised);border-radius:1rem}
.estimate-path-grid h3,.inspection-paper h3{font:600 clamp(1.3rem,2vw,1.75rem)/1.6 var(--font-serif);margin:0 0 1.25rem}
.estimate-step{display:block;color:var(--accent);font-size:1.1rem;letter-spacing:.15em;margin-bottom:1.5rem}
.estimate-price{font:600 clamp(1.8rem,3vw,2.5rem)/1.3 var(--font-serif);margin:1rem 0}.estimate-credit{font-weight:700;color:var(--accent)}
.estimate-reason{max-width:54rem;margin:2rem 0}.estimate-path .contact-buttons{max-width:40rem}
.document-list{list-style:none;padding:0;counter-reset:record;margin:2rem 0}.document-list li{counter-increment:record;padding:.8rem 0;border-bottom:1px solid var(--line)}.document-list li::before{content:"0" counter(record);color:var(--accent);margin-right:1rem;font-weight:700}
.inspection-timing{display:grid;gap:.75rem;margin:1.5rem 0}.inspection-timing p{border-left:3px solid var(--accent);background:var(--surface);padding:.85rem 1rem;margin:0}.inspection-timing b,.inspection-timing span{display:block}.inspection-timing span{font-size:.9rem}
.work-bento{display:grid;gap:1.5rem;margin-top:2.5rem}.work-bento-card{overflow:hidden;border:1px solid var(--line);border-radius:1rem;background:var(--surface-raised)}.work-bento-photo{aspect-ratio:16/9;overflow:hidden;background:var(--surface)}.work-bento-photo picture,.work-bento-photo img{display:block;width:100%;height:100%;object-fit:cover}.work-bento-body{padding:1.5rem}.work-bento h3{font:600 clamp(1.3rem,2vw,1.7rem)/1.6 var(--font-serif);margin:0 0 1.25rem}.work-bento dl{margin:0}.work-bento dl>div{display:grid;grid-template-columns:3.5rem 1fr;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--line)}.work-bento dt{color:var(--muted);font-size:.85rem}.work-bento dd{margin:0;min-width:0}.work-hidden{padding:1rem;border-left:3px solid var(--accent);background:var(--surface);margin:1rem 0}.work-hidden b,.work-hidden span{display:block}.work-hidden b{font-size:.85rem;color:var(--accent);margin-bottom:.35rem}.work-bento .text-link{margin-top:1rem}
@media(min-width:48rem){.estimate-path-grid,.inspection-preview-grid,.work-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.work-bento-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr}.work-bento-card:first-child .work-bento-photo{height:100%;min-height:24rem;aspect-ratio:auto}}