/* ============================================================
   sadame.info renewal 2026-06 — 墨流しの上の和紙
   構造はあきない(守成)型、インクはさだめの藍、差し色は朱。
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --sd-paper: #f6f2ea;
  --sd-paper-deep: #efe9dc;
  --sd-ink: #1b1813;
  --sd-ink-soft: #4a453c;
  --sd-muted: #857d6e;
  --sd-shu: #c73a1d;
  --sd-shu-deep: #a52f15;
  --sd-navy: #17184B;
  --sd-cyan: #00BCD4;
  --sd-line: #1b1813;
  --sd-line-soft: #d8d0c0;
  --sd-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sd-sans: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --sd-mono: "IBM Plex Mono", ui-monospace, monospace;
  --sd-en: "EB Garamond", serif;
}

html {
  /* htmlに背景を塗ると negative z-index の canvas が隠れる。塗らない */
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: transparent;   /* 和紙色は流体の BACK_COLOR が描画する */
  color: var(--sd-ink);
  font-family: var(--sd-sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
  overflow-wrap: break-word;
}

/* JSが動かない環境 / reduced-motion では body 自身が和紙になる */
@media (prefers-reduced-motion: reduce) {
  body { background: var(--sd-paper); }
}
noscript ~ * body { background: var(--sd-paper); }

img { display: block; max-width: 100%; }
a { color: inherit; }

/* ===== 背景レイヤー ===== */
#sd-fluid {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  display: block;
  background: var(--sd-paper);  /* 初期化前・WebGL失敗時のフォールバック和紙 */
}
.sd-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246,242,234,.35), rgba(246,242,234,.93));
  opacity: 0;
}
.sd-bgk {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sd-bgk span {
  position: absolute;
  color: rgba(27,24,19,.04);
  font-family: var(--sd-serif);
  font-size: 22rem;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  will-change: transform;
}
.sd-bgk span:nth-child(1) { top: -60px; left: -70px; }
.sd-bgk span:nth-child(2) { top: 320px; right: -90px; }
.sd-bgk span:nth-child(3) { top: 820px; left: -60px; }
.sd-bgk span:nth-child(4) { top: 1340px; right: -40px; }
.sd-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 共通 ===== */
.sd-wrap { width: min(1080px, 100%); margin: 0 auto; padding: 0 24px; }
.sd-pc-only { display: inline; }
.sd-sp-only { display: none; }
.sd-arrow { font-family: var(--sd-en); }
em { font-style: normal; }
.sd-shu { color: var(--sd-shu); font-weight: 700; }
mark {
  background: linear-gradient(transparent 62%, rgba(199,58,29,.22) 62%);
  color: inherit;
}

/* ===== ヘッダー ===== */
.sd-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px clamp(16px, 4vw, 40px);
  transition: background .35s ease, box-shadow .35s ease;
}
.sd-header.scrolled {
  background: rgba(246,242,234,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(27,24,19,.12);
}
.sd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* トリム済みロゴ(logo-trim.png 304x219)。バー内に固定サイズで収める */
.sd-logo-img {
  height: 50px;
  width: auto;
}
@media (max-width: 760px) {
  .sd-logo-img { height: 42px; }
}
.sd-nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); }
.sd-nav a {
  display: grid;
  justify-items: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}
.sd-nav a small {
  font-family: var(--sd-en);
  font-style: italic;
  font-weight: 400;
  font-size: 10px;
  color: var(--sd-muted);
  letter-spacing: .06em;
}
.sd-nav a.sd-nav-contact {
  padding: 9px 20px;
  border: 1.5px solid var(--sd-ink);
  border-radius: 999px;
  background: var(--sd-ink);
  color: var(--sd-paper);
  transition: background .25s, color .25s;
}
.sd-nav a.sd-nav-contact:hover { background: var(--sd-shu); border-color: var(--sd-shu); }
.sd-nav-toggle { display: none; }

/* ===== ヒーロー ===== */
.sd-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: 120px 0 80px;
}
.sd-hero-en {
  font-family: var(--sd-en);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--sd-shu);
  letter-spacing: .08em;
}
.sd-hero-title {
  margin: 10px 0 22px;
  font-family: var(--sd-serif);
  font-weight: 800;
  font-size: clamp(40px, 7.2vw, 84px);
  line-height: 1.28;
  letter-spacing: .02em;
}
.sd-hero-title .sd-ch {
  display: inline-block;
  will-change: transform;
}
.sd-hero-lead {
  max-width: 600px;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--sd-ink-soft);
}
.sd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.sd-btn-fill {
  border: 1.5px solid var(--sd-ink);
  background: var(--sd-ink);
  color: var(--sd-paper);
}
.sd-btn-fill:hover { background: var(--sd-shu); border-color: var(--sd-shu); transform: translateY(-1px); }
.sd-btn-line {
  border: 1.5px solid rgba(27,24,19,.35);
  background: rgba(246,242,234,.5);
  color: var(--sd-ink);
}
.sd-btn-line:hover { border-color: var(--sd-ink); }
.sd-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 44px);
  margin-top: 46px;
  list-style: none;
}
.sd-hero-metrics li { display: grid; will-change: transform; }
.sd-hero-metrics strong {
  font-family: var(--sd-mono);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 500;
  line-height: 1.1;
}
.sd-hero-metrics strong small {
  font-family: var(--sd-serif);
  font-size: .5em;
  margin-left: 2px;
}
.sd-hero-metrics span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sd-muted);
  letter-spacing: .08em;
}
.sd-hero-tate {
  position: absolute;
  top: 50%;
  right: clamp(14px, 3.4vw, 44px);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--sd-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .42em;
  color: rgba(27,24,19,.5);
  will-change: transform;
}
.sd-scroll-cue {
  position: absolute;
  left: 24px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sd-en);
  font-size: 11px;
  letter-spacing: .3em;
  text-decoration: none;
  color: var(--sd-muted);
}
.sd-scroll-line {
  width: 56px;
  height: 1px;
  background: var(--sd-ink);
  transform-origin: left;
  animation: sd-scrollline 2.2s ease-in-out infinite;
}
@keyframes sd-scrollline {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* 起動演出 */
.boot { opacity: 0; transform: translateY(16px); animation: sd-boot .9s cubic-bezier(.22,.8,.32,1) forwards; }
.boot-1 { animation-delay: .1s; }
.boot-2 { animation-delay: .25s; }
.boot-3 { animation-delay: .45s; }
.boot-4 { animation-delay: .62s; }
.boot-5 { animation-delay: .85s; }
@keyframes sd-boot { to { opacity: 1; transform: none; } }

/* ===== セクション共通 ===== */
.sd-section {
  position: relative;
  z-index: 1;
  padding: clamp(76px, 11vw, 130px) 0;
}
.sd-section-line { border-top: 1px solid rgba(27,24,19,.14); }
.sd-sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.sd-no {
  font-family: var(--sd-en);
  font-style: italic;
  font-size: clamp(34px, 4.4vw, 52px);
  color: var(--sd-shu);
  line-height: 1;
  will-change: transform;
}
.sd-sec-head h2 {
  font-family: var(--sd-serif);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: .04em;
}
.sd-sec-en {
  margin-left: 12px;
  font-family: var(--sd-en);
  font-style: italic;
  font-size: .5em;
  font-weight: 400;
  color: var(--sd-muted);
  letter-spacing: .08em;
}
.sd-aside {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sd-muted);
  letter-spacing: .1em;
}
.sd-two-col {
  display: grid;
  gap: clamp(26px, 5vw, 70px);
}
@media (min-width: 880px) {
  .sd-two-col { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.sd-statement {
  font-family: var(--sd-serif);
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .03em;
}
.sd-statement-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--sd-muted);
}
.sd-two-col p + p { margin-top: 1.1em; }
.sd-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.4em;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1.5px solid var(--sd-ink);
  padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.sd-text-link:hover { color: var(--sd-shu); border-color: var(--sd-shu); }
.sd-lede {
  margin: -10px 0 40px;
  font-family: var(--sd-serif);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 2;
}

/* スクロールリビール */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.22,.8,.32,1) var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===== 02 サービス ===== */
.sd-ways { display: grid; gap: 6px; }
.sd-way {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px 18px;
  border-bottom: 1px dashed rgba(27,24,19,.18);
  background: rgba(246,242,234,.45);
}
.sd-way:last-child { border-bottom: none; }
.sd-ji {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--sd-ink);
  border-radius: 12px;
  font-family: var(--sd-serif);
  font-size: 30px;
  font-weight: 800;
  background: var(--sd-paper);
  will-change: transform;
}
.sd-way h3 {
  font-family: var(--sd-serif);
  font-size: 18px;
  font-weight: 800;
}
.sd-way h3 small {
  margin-left: 10px;
  font-family: var(--sd-sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sd-shu);
  letter-spacing: .06em;
}
.sd-way p { font-size: 13.5px; color: var(--sd-ink-soft); }

/* ===== 03 数字 ===== */
.sd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.sd-stat {
  padding: 22px 20px 18px;
  border: 1px solid rgba(27,24,19,.2);
  border-radius: 14px;
  background: rgba(246,242,234,.62);
  will-change: transform;
}
.sd-stat dt {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sd-muted);
  letter-spacing: .08em;
}
.sd-stat dd { margin-top: 6px; }
.sd-stat-num {
  font-family: var(--sd-mono);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.1;
}
.sd-stat-unit {
  margin-left: 4px;
  font-family: var(--sd-serif);
  font-size: 15px;
  font-weight: 700;
}
.sd-stats-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--sd-muted);
}

/* ===== 04 開発実績 ===== */
.sd-cases {
  display: grid;
  gap: 16px;
}
@media (min-width: 940px) {
  .sd-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sd-case {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 24px;
  border: 1.5px solid var(--sd-ink);
  border-radius: 16px;
  background: rgba(246,242,234,.78);
  will-change: transform;
}
.sd-case-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sd-case-tag {
  padding: 3px 10px;
  border: 1px solid rgba(27,24,19,.4);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sd-case-num {
  font-family: var(--sd-en);
  font-style: italic;
  font-size: 12px;
  color: var(--sd-muted);
}
.sd-case h3 {
  font-family: var(--sd-serif);
  font-size: 22px;
  font-weight: 800;
}
.sd-case > p { font-size: 13px; color: var(--sd-ink-soft); }
.sd-case-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--sd-paper-deep);
}
.sd-case-compare > div { display: grid; justify-items: start; }
.sd-case-compare span {
  font-size: 10px;
  font-weight: 700;
  color: var(--sd-muted);
  letter-spacing: .06em;
}
.sd-case-compare strong {
  font-family: var(--sd-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.sd-case-compare strong small {
  font-family: var(--sd-serif);
  font-size: .55em;
}
.sd-case-compare em { font-size: 10.5px; color: var(--sd-muted); }
.sd-case-arrow { color: var(--sd-shu); font-size: 18px; }
.sd-case-us strong { color: var(--sd-shu); }
.sd-case-worth {
  font-size: 12.5px;
  font-weight: 700;
}
.sd-case-worth em { color: var(--sd-shu); font-size: 1.15em; }

.sd-products { margin-top: 46px; }
.sd-products-title {
  margin-bottom: 14px;
  font-family: var(--sd-serif);
  font-size: 17px;
  font-weight: 800;
}
.sd-products-list { display: grid; gap: 4px; list-style: none; }
.sd-products-list li { will-change: transform; }
.sd-products-list a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px dashed rgba(27,24,19,.18);
  text-decoration: none;
  transition: background .25s;
}
.sd-products-list a:hover { background: rgba(199,58,29,.05); }
.sd-products-list strong { font-family: var(--sd-serif); font-size: 15px; }
.sd-products-list span { font-size: 12.5px; color: var(--sd-ink-soft); }

/* ===== タダつく帯 ===== */
.sd-band {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 8vw, 90px) 0;
  background: var(--sd-ink);
  color: var(--sd-paper);
}
.sd-band-inner { display: grid; justify-items: start; gap: 14px; }
.sd-band-kicker {
  font-family: var(--sd-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--sd-cyan);
}
.sd-band-title {
  font-family: var(--sd-serif);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.4;
}
.sd-band p { font-size: 14px; color: rgba(246,242,234,.75); }
.sd-band .sd-btn-fill {
  border-color: var(--sd-paper);
  background: var(--sd-paper);
  color: var(--sd-ink);
}
.sd-band .sd-btn-fill:hover { background: var(--sd-shu); border-color: var(--sd-shu); color: var(--sd-paper); }

/* ===== 05 会社 ===== */
.sd-profile {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 26px;
  padding: 18px;
  border: 1px solid rgba(27,24,19,.2);
  border-radius: 14px;
  background: rgba(246,242,234,.62);
  will-change: transform;
}
.sd-profile img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
}
.sd-profile strong {
  display: block;
  font-family: var(--sd-serif);
  font-size: 16px;
}
.sd-profile a {
  display: inline-block;
  margin-top: 4px;
  margin-right: 14px;
  font-size: 12.5px;
}
.sd-profile .sd-text-link { margin-top: 8px; }

/* ===== 06 セミナー ===== */
.sd-seminar-spec {
  margin: 18px 0 8px;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sd-seminar-spec li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(27,24,19,.18);
  font-size: 14px;
  font-weight: 700;
}
.sd-seminar-spec li span {
  flex: 0 0 52px;
  font-size: 11px;
  color: var(--sd-shu);
  letter-spacing: .14em;
}

/* ===== 07 相談 ===== */
.sd-contact-grid {
  display: grid;
  gap: clamp(26px, 5vw, 60px);
}
@media (min-width: 920px) {
  .sd-contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.sd-contact-direct {
  margin-top: 22px;
  list-style: none;
  display: grid;
  gap: 10px;
}
.sd-contact-direct li {
  display: grid;
  font-family: var(--sd-mono);
  font-size: 16px;
}
.sd-contact-direct li span {
  font-family: var(--sd-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--sd-shu);
  letter-spacing: .14em;
}
.sd-contact-direct li small {
  font-family: var(--sd-sans);
  font-size: 11px;
  color: var(--sd-muted);
}
.sd-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
  border: 1.5px solid var(--sd-ink);
  border-radius: 16px;
  background: rgba(246,242,234,.85);
}
.sd-form-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .sd-form-grid { grid-template-columns: 1fr 1fr; }
}
.sd-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sd-req { color: var(--sd-shu); }
.sd-form input,
.sd-form select,
.sd-form textarea {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(27,24,19,.35);
  border-radius: 10px;
  background: var(--sd-paper);
  font-family: var(--sd-sans);
  font-size: 15px;
  color: var(--sd-ink);
}
.sd-form textarea { resize: vertical; }
.sd-form input:focus,
.sd-form select:focus,
.sd-form textarea:focus {
  outline: none;
  border-color: var(--sd-shu);
  box-shadow: 0 0 0 3px rgba(199,58,29,.14);
}
.sd-form input.invalid,
.sd-form select.invalid { border-color: var(--sd-shu); background: rgba(199,58,29,.04); }
.sd-btn-submit { justify-content: center; border: none; }
.sd-btn-submit .sd-btn-loading { display: none; }
.sd-btn-submit.is-loading .sd-btn-text { display: none; }
.sd-btn-submit.is-loading .sd-btn-loading { display: inline; }
.sd-form-success,
.sd-form-error {
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 13.5px;
}
.sd-form-success { background: rgba(0,188,212,.1); border: 1px solid rgba(0,188,212,.4); }
.sd-form-error { background: rgba(199,58,29,.07); border: 1px solid rgba(199,58,29,.4); }
.sd-form-success strong, .sd-form-error strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--sd-serif);
  font-size: 15px;
}

/* ===== フッター ===== */
.sd-footer {
  position: relative;
  z-index: 1;
  padding: clamp(50px, 7vw, 80px) 0 30px;
  border-top: 1px solid rgba(27,24,19,.16);
  background: rgba(246,242,234,.88);
}
.sd-footer-grid {
  display: grid;
  gap: 30px;
}
@media (min-width: 760px) {
  .sd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.sd-footer-logo {
  height: 64px;
  width: auto;
}
.sd-footer-name {
  margin-top: 12px;
  font-family: var(--sd-serif);
  font-size: 17px;
  font-weight: 800;
}
.sd-footer-copy { font-size: 12.5px; color: var(--sd-muted); }
.sd-footer nav { display: grid; gap: 8px; align-content: start; }
.sd-footer nav h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--sd-shu);
  letter-spacing: .2em;
}
.sd-footer nav a {
  font-size: 13px;
  text-decoration: none;
}
.sd-footer nav a:hover { color: var(--sd-shu); }
.sd-footer-bottom {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px dashed rgba(27,24,19,.18);
  font-family: var(--sd-en);
  font-size: 11.5px;
  color: var(--sd-muted);
}

/* ===== モバイル ===== */
@media (max-width: 760px) {
  .sd-pc-only { display: none; }
  .sd-sp-only { display: inline; }
  .sd-nav {
    position: fixed;
    inset: 0;
    z-index: 80;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    background: rgba(246,242,234,.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  body.nav-open .sd-nav { opacity: 1; pointer-events: auto; }
  .sd-nav a { font-size: 18px; }
  .sd-nav a small { font-size: 11px; }
  .sd-nav-toggle {
    display: inline-grid;
    justify-items: center;
    gap: 5px;
    z-index: 90;
    padding: 10px 6px;
    border: none;
    background: none;
    cursor: pointer;
  }
  .sd-nav-toggle span {
    width: 26px;
    height: 2px;
    background: var(--sd-ink);
    transition: transform .3s ease;
  }
  .sd-nav-toggle-label {
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: var(--sd-en);
    font-size: 9px;
    letter-spacing: .2em;
  }
  body.nav-open .sd-nav-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  body.nav-open .sd-nav-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .sd-bgk span { font-size: 13rem; }
  .sd-hero { padding-top: 96px; }
  .sd-hero-tate { display: none; }
  .sd-aside { display: none; }
  .sd-way { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 8px; }
  .sd-ji { width: 52px; height: 52px; font-size: 24px; }
  .sd-case-compare { grid-template-columns: 1fr; gap: 6px; }
  .sd-case-arrow { transform: rotate(90deg); width: fit-content; }
  .sd-products-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .sd-products-list span { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .boot, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .sd-scroll-line { animation: none; }
  html { scroll-behavior: auto; }
}