:root {
  --paper: #F5F0E6;
  --paper-2: #EDE6D6;
  --surface: #FAF6EC;
  --ink: #1C1712;
  --ink-deep: #0F0C08;
  --ink-2: #3A322A;
  --muted: #766B5C;
  --muted-2: #A89E8D;
  --rule: #D9D0BE;
  --wine: #6B2024;
  --wine-deep: #4A1418;
  --wine-bright: #8A3B3F;
  --gold: #C28B5B;
  --gold-bright: #E0B080;
  --serif-en: 'Fraunces', serif;
  --serif-jp: 'Shippori Mincho', 'Fraunces', serif;
  --sans-jp: 'Noto Sans JP', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --max: 1400px;
  --gutter: clamp(20px, 4vw, 64px);
  --cream: #fffaf0;
  --line: #ded1bd;
  --line-dark: rgba(23, 18, 13, 0.16);
  --green: #52745f;
  --green-deep: #263d32;
  --gold: #c69249;
  --rose: #b96455;
  --plum: #5b343b;
  --shadow: 0 24px 70px rgba(43, 29, 15, 0.13);
  --radius: 8px;
  --serif: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 100;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 78px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid rgba(23, 18, 13, 0.08);
  background: rgba(247, 240, 228, 0.92);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-grid;
  gap: 0;
  line-height: 1;
}

.brand-word,
.footer-logo {
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  letter-spacing: -0.03em;
}

.brand-word::after,
.footer-logo::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 0.08em;
}

.brand-sub {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
  font-size: 14px;
  font-weight: 750;
}

.primary-nav a {
  position: relative;
  padding: 8px 0;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.18s, transform 0.18s;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.social-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.social-nav a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}

.social-nav a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}

.social-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  min-height: calc(100svh - 78px);
  border-bottom: 1px solid var(--line-dark);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 8vw, 104px) var(--gutter);
}

.kicker {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 500;
}

h1 {
  font-size: clamp(48px, 7vw, 106px);
}

h2 {
  font-size: clamp(34px, 5vw, 68px);
}

h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.lead {
  max-width: 610px;
  margin: 26px 0 0;
  color: var(--ink-2);
  font-size: 17px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 850;
  transition: transform 0.18s, background 0.18s, color 0.18s;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--ink);
  color: var(--paper);
}

.button.ghost {
  background: transparent;
}

.button.ghost:hover {
  background: var(--cream);
}

.hero-image-wrap {
  min-height: 560px;
  overflow: hidden;
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-pad {
  padding: clamp(58px, 8vw, 112px) var(--gutter);
}

.warm {
  background: var(--paper-2);
}

.compact {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.section-heading {
  max-width: var(--max);
  margin: 0 auto 34px;
}

.section-heading.center {
  text-align: center;
}

.section-heading.split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.text-link {
  font-weight: 850;
  border-bottom: 1px solid currentColor;
}

.social-card-grid,
.feature-grid,
.recipe-grid,
.shop-grid,
.agent-grid,
.contact-grid,
.service-grid,
.recipe-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}

.social-card,
.feature-card,
.recipe-card,
.shop-card,
.agent-card,
.service-card,
.contact-card,
.value-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.social-card {
  display: grid;
  gap: 22px;
  min-height: 190px;
  padding: 24px;
}

.social-card span,
.feature-card span,
.recipe-card p,
.shop-card span,
.agent-card span,
.service-card span,
.value-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.social-card strong {
  align-self: end;
  font-size: 19px;
  line-height: 1.4;
}

.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card,
.service-card,
.agent-card,
.shop-card,
.value-card {
  display: grid;
  gap: 18px;
  min-height: 300px;
  padding: 26px;
  transition: transform 0.18s, box-shadow 0.18s;
}

.feature-card:hover,
.service-card:hover,
.agent-card:hover,
.shop-card:hover,
.value-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.feature-card p,
.service-card p,
.agent-card p,
.shop-card p,
.value-card p,
.recipe-card span {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.recipe-card {
  overflow: hidden;
  min-height: 342px;
}

.recipe-card .recipe-thumb {
  height: 184px;
  background:
    linear-gradient(145deg, rgba(255, 250, 240, 0.14), rgba(0, 0, 0, 0.16)),
    url("./assets/njoooy-hero.png");
  background-size: cover;
  background-position: center;
}

.recipe-card[data-tone="green"] .recipe-thumb { background-position: 58% 42%; }
.recipe-card[data-tone="gold"] .recipe-thumb { filter: sepia(0.2) saturate(1.1); }
.recipe-card[data-tone="rose"] .recipe-thumb { filter: hue-rotate(-18deg) saturate(1.05); }
.recipe-card[data-tone="ink"] .recipe-thumb { filter: grayscale(0.45) contrast(1.08); }

.recipe-card p,
.recipe-card h3,
.recipe-card span {
  margin-right: 20px;
  margin-left: 20px;
}

.recipe-card p {
  margin-top: 18px;
  margin-bottom: 6px;
}

.recipe-card h3 {
  margin-bottom: 8px;
}

.press-strip {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 34px var(--gutter);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--ink);
  color: var(--paper);
}

.press-strip .kicker {
  margin: 0;
  color: var(--gold);
}

.press-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-items span {
  border: 1px solid rgba(247, 240, 228, 0.25);
  border-radius: 999px;
  padding: 7px 12px;
  color: rgba(247, 240, 228, 0.78);
  font-size: 13px;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(24px, 6vw, 84px);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(52px, 8vw, 92px);
}

.page-hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
}

.page-hero-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  padding: 24px;
}

.page-hero-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  object-fit: cover;
  margin-bottom: 18px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: var(--max);
  margin: 0 auto 24px;
}

.filter-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.filter-button.is-active {
  background: var(--ink);
  color: var(--paper);
}

.recipe-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid,
.shop-grid,
.agent-grid,
.contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
}

.contact-card {
  padding: 26px;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-row input,
.form-row select,
.form-row textarea,
.newsletter-form input {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 250, 240, 0.72);
  color: var(--ink);
  padding: 12px 13px;
}

.form-row textarea {
  min-height: 160px;
  resize: vertical;
}

.status-note {
  min-height: 24px;
  color: var(--green);
  font-weight: 800;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 6vw, 82px);
  max-width: var(--max);
  margin: 0 auto;
}

.portrait {
  position: sticky;
  top: 112px;
}

.portrait img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.story-stack {
  display: grid;
  gap: 20px;
}

.story-block {
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
}

.story-block p {
  color: var(--muted);
}

.shop-note {
  max-width: var(--max);
  margin: 0 auto 18px;
  border-left: 4px solid var(--green);
  background: var(--cream);
  padding: 20px 22px;
  color: var(--ink-2);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr) minmax(260px, 0.8fr);
  gap: 28px;
  padding: 44px var(--gutter);
  border-top: 1px solid var(--line-dark);
  background: var(--cream);
}

.site-footer p {
  color: var(--muted);
  margin: 8px 0 0;
}

.site-footer nav {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 28px;
  align-content: start;
}

.newsletter-form {
  display: grid;
  gap: 9px;
}

.newsletter-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.newsletter-form div {
  display: flex;
  gap: 8px;
}

.newsletter-form button {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 850;
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .home-hero,
  .page-hero,
  .about-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero-image-wrap {
    min-height: 430px;
  }

  .social-card-grid,
  .recipe-grid,
  .recipe-list,
  .service-grid,
  .shop-grid,
  .agent-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portrait {
    position: static;
  }
}

@media (max-width: 720px) {
  .site-header {
    gap: 12px;
  }

  .social-nav {
    gap: 6px;
  }

  .social-nav a {
    width: 31px;
    height: 31px;
  }

  .primary-nav {
    gap: 20px;
    font-size: 13px;
  }

  h1 {
    font-size: 48px;
  }

  .home-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;
  }

  .section-heading.split {
    align-items: start;
    flex-direction: column;
  }

  .social-card-grid,
  .recipe-grid,
  .recipe-list,
  .service-grid,
  .shop-grid,
  .agent-grid,
  .feature-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .press-strip {
    grid-template-columns: 1fr;
  }

  .newsletter-form div {
    flex-direction: column;
  }
}


  
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  
    html {
      scroll-behavior: smooth;
      background: var(--paper);
    }
  
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans-jp);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "palt";
      overflow-x: hidden;
    }
  
    a {
      color: inherit;
      text-decoration: none;
    }
  
    button {
      font: inherit;
      cursor: inherit;
      background: none;
      border: none;
      color: inherit;
    }
  
    summary {
      list-style: none;
    }
  
    summary::-webkit-details-marker {
      display: none;
    }
  
    .noise-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.14;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      background-size: 200px 200px;
    }
  
    .meta {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .meta-dark {
      color: rgba(245, 240, 230, 0.6);
    }
  
    .body-jp {
      font-family: var(--sans-jp);
      font-weight: 400;
      line-height: 1.95;
      letter-spacing: 0.02em;
      color: var(--ink-2);
    }
  
    /* CURSOR */
    @media (hover: hover) and (pointer: fine) {}
  
    /* CURSOR PREVIEW (v5) */
    .pv-v1 .pv-inner {
      background: radial-gradient(ellipse at 30% 20%, rgba(194, 139, 91, 0.5), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(74, 20, 24, 0.8), transparent 60%), linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
    }
  
    .pv-v2 .pv-inner {
      background: radial-gradient(ellipse at 70% 30%, rgba(245, 240, 230, 0.3), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(194, 139, 91, 0.4), transparent 55%), linear-gradient(225deg, var(--ink) 0%, var(--wine-deep) 100%);
    }
  
    .pv-v3 .pv-inner {
      background: radial-gradient(ellipse at 50% 50%, rgba(224, 176, 128, 0.4), transparent 55%), radial-gradient(ellipse at 10% 10%, rgba(138, 59, 63, 0.5), transparent 60%), linear-gradient(45deg, var(--wine-deep) 0%, var(--ink) 100%);
    }
  
    .pv-v4 .pv-inner {
      background: radial-gradient(ellipse at 40% 60%, rgba(194, 139, 91, 0.35), transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(138, 59, 63, 0.55), transparent 60%), linear-gradient(180deg, var(--wine) 0%, var(--ink) 100%);
    }
  
    .pv-v5 .pv-inner {
      background: radial-gradient(ellipse at 50% 40%, rgba(224, 176, 128, 0.3), transparent 55%), linear-gradient(90deg, var(--ink) 0%, var(--wine-deep) 100%);
    }
  
    .pv-v6 .pv-inner {
      background: radial-gradient(ellipse at 20% 70%, rgba(194, 139, 91, 0.5), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(138, 59, 63, 0.4), transparent 60%), linear-gradient(135deg, var(--wine) 0%, var(--ink-deep) 100%);
    }
  
    .pv-reserved .pv-inner {
      background: linear-gradient(135deg, var(--paper-2) 0%, var(--surface) 100%);
      border: 1px dashed var(--muted-2);
    }
  
    .pv-reserved .pv-label,
    .pv-reserved .pv-num {
      color: var(--muted);
    }
  
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: var(--wine);
      z-index: 9998;
      transition: width .1s linear;
    }
  
    .logo {
      font-family: var(--serif-en);
      font-weight: 400;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      line-height: 1;
      display: inline-flex;
      align-items: baseline;
      letter-spacing: -0.025em;
    }
  
    .logo .mark {
      display: inline-block;
      width: 0.32em;
      height: 0.32em;
      background: var(--wine);
      border-radius: 50%;
      margin-left: 0.08em;
      vertical-align: 0.12em;
      animation: breathe 3.8s ease-in-out infinite;
    }
  
    .logo .mark.gold {
      background: var(--gold);
    }
  
    @keyframes breathe {
  
      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }
  
      50% {
        transform: scale(1.25);
        opacity: 0.7;
      }
    }
  
    /* Preloader — "wrapping paper tear" exit (v7.1)
         Two halves (top / bottom) with jagged clip-path edge along the middle.
         After wordmark reveal, halves pull apart with stagger → reveals page. */
    .preloader {
      position: fixed;
      inset: 0;
      z-index: 9000;
      pointer-events: none;
    }
  
    .preloader-half {
      position: absolute;
      inset: 0;
      background: var(--ink);
      overflow: hidden;
    }
  
    .preloader-half-top {
      clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
      animation: preloaderTearTop 1.1s cubic-bezier(.5, 0, .3, 1) 3.4s forwards;
    }
  
    .preloader-half-bot {
      clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
      animation: preloaderTearBot 1.1s cubic-bezier(.5, 0, .3, 1) 3.48s forwards;
    }
  
    .preloader-inner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px);
      color: var(--paper);
    }
  
    .preloader-top,
    .preloader-bot {
      display: flex;
      justify-content: space-between;
      color: var(--paper);
    }
  
    .preloader-top .meta,
    .preloader-bot .meta {
      opacity: 0.55;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--paper);
      text-transform: uppercase;
    }
  
    .preloader-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4vh 0;
    }
  
    .preloader-wordmark {
      font-family: var(--serif-en);
      font-size: clamp(120px, 22vw, 340px);
      line-height: 0.82;
      font-weight: 300;
      letter-spacing: -0.05em;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      color: transparent;
      display: inline-flex;
      align-items: baseline;
      white-space: nowrap;
      animation: preloaderWordmarkIn 1.2s cubic-bezier(.2, .7, .2, 1) 0.15s both;
    }
  
    /* v8.21: 液体充填アニメーション(2 層 wordmark) */
    .preloader-wordmark .wordmark-stack {
      position: relative;
      display: inline-block;
      line-height: inherit;
    }
  
    .preloader-wordmark .wordmark-outline {
      color: transparent;
      -webkit-text-stroke: 1px rgba(245, 240, 230, 0.42);
      display: inline-block;
      padding-right: 0.12em;
    }
  
    .preloader-wordmark .wordmark-fill {
      position: absolute;
      top: 0;
      left: 0;
      color: var(--paper);
      -webkit-text-stroke: 0;
      display: inline-block;
      white-space: nowrap;
      pointer-events: none;
      padding-right: 0.12em;
      clip-path: polygon(0 150%, 100% 150%, 100% 150%, 0 150%);
      animation: liquidRise 3s cubic-bezier(.5, .2, .3, 1) 0.35s forwards;
    }
  
    @keyframes liquidRise {
      0% {
        clip-path: polygon(0 150%, 100% 150%, 100% 150%, 0 150%);
      }
  
      15% {
        clip-path: polygon(0 90%, 12% 88%, 28% 91%, 48% 88%, 68% 90%, 85% 88%, 100% 89%,
            100% 150%, 0 150%);
      }
  
      40% {
        clip-path: polygon(0 55%, 15% 53%, 32% 56%, 55% 53%, 72% 55%, 88% 53%, 100% 54%,
            100% 150%, 0 150%);
      }
  
      70% {
        clip-path: polygon(0 20%, 18% 18%, 36% 21%, 58% 18%, 78% 20%, 92% 18%, 100% 19%,
            100% 150%, 0 150%);
      }
  
      100% {
        clip-path: polygon(0 -5%, 100% -5%, 100% 150%, 0 150%);
      }
    }
  
    .preloader-wordmark .mark {
      display: inline-block;
      width: 0.18em;
      height: 0.18em;
      background: var(--gold);
      border-radius: 50%;
      margin-left: 0.04em;
      align-self: flex-end;
      margin-bottom: 0.12em;
      animation: breathe 4.2s ease-in-out infinite;
    }
  
    .preloader-count {
      position: absolute;
      bottom: 32px;
      left: 32px;
      color: var(--paper);
      opacity: 0.55;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
    }
  
    .preloader-label {
      position: absolute;
      bottom: 32px;
      right: 32px;
      color: var(--paper);
      opacity: 0.55;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
    }
  
    @keyframes preloaderTearTop {
      to {
        transform: translateY(-110%);
      }
    }
  
    @keyframes preloaderTearBot {
      to {
        transform: translateY(110%);
      }
    }
  
    @keyframes preloaderWordmarkIn {
      from {
        opacity: 0;
        transform: translateY(14px);
        letter-spacing: -0.02em;
      }
  
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  
    .kin {
      display: inline-block;
      overflow: hidden;
      vertical-align: baseline;
      padding: 0.18em 0;
      margin: -0.18em 0;
    }
  
    .kin>span {
      display: inline-block;
      transform: translateY(115%);
      animation: kinUp 1.2s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
      animation-delay: var(--d, 0s);
    }
  
    @keyframes kinUp {
      to {
        transform: translateY(0);
      }
    }
  
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
  
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
  
    /* NAV */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      padding: 16px var(--gutter);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: padding .25s, background .45s, color .45s, border-color .45s;
      color: var(--paper);
      background: rgba(8, 5, 3, 0.38);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(245, 240, 230, 0.08);
    }
  
    .nav.light {
      background: rgba(245, 240, 230, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      color: var(--ink);
      border-bottom-color: var(--rule);
      padding-top: 12px;
      padding-bottom: 12px;
    }
  
    .nav-logo {
      font-size: 28px;
      color: inherit;
    }
  
    .nav-logo .mark {
      background: var(--gold);
      transition: background .45s;
    }
  
    .nav.light .nav-logo .mark {
      background: var(--wine);
    }
  
    .nav-links {
      display: flex;
      gap: 28px;
      align-items: center;
      font-family: var(--serif-en);
      font-size: 15px;
      font-variation-settings: "opsz" 72;
      letter-spacing: 0.01em;
    }
  
    .nav-links a {
      opacity: 0.78;
      transition: opacity .2s, color .2s;
    }
  
    .nav-links a:hover {
      opacity: 1;
      color: var(--gold);
    }
  
    .nav.light .nav-links a:hover {
      color: var(--wine);
    }
  
    .nav-cta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 10px 18px;
      border: 1px solid;
      border-radius: 999px;
      transition: all .25s;
    }
  
    .nav.light .nav-cta {
      border-color: var(--ink);
    }
  
    .nav-cta:hover {
      background: var(--paper);
      color: var(--ink);
      border-color: var(--paper);
    }
  
    .nav.light .nav-cta:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
  
    @media (max-width: 900px) {
      .nav-links {
        gap: 20px;
        font-size: 14px;
      }
    }
  
    @media (max-width: 720px) {
      .nav-links {
        display: none;
      }
  
      .nav {
        padding: 14px var(--gutter);
      }
    }
  
    /* [v8.30] Bilingual toggle infrastructure — html[lang] 属性で JA/EN を切替。classless要素は常時表示(翻訳未実装コンテンツのJA fallback)。display:revert で UA 既定を復元(block/inline 要素双方対応)。 */
    .lang-en {
      display: none;
    }
  
    html[lang="en"] .lang-ja {
      display: none;
    }
  
    html[lang="en"] .lang-en {
      display: revert;
    }
  
    .nav-right {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
  
    .nav-lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: inherit;
      opacity: 0.7;
      background: transparent;
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 6px 10px;
      cursor: pointer;
      transition: opacity .2s, background .2s, color .2s;
    }
  
    .nav-lang-toggle:hover {
      opacity: 1;
    }
  
    .nav-lang-toggle .nav-lang-divider {
      opacity: 0.35;
    }
  
    .nav-lang-toggle .nav-lang-opt {
      transition: opacity .2s, color .2s;
    }
  
    .nav-lang-toggle .nav-lang-opt[data-active="false"] {
      opacity: 0.4;
    }
  
    .nav-lang-toggle .nav-lang-opt[data-active="true"] {
      opacity: 1;
    }
  
    html[lang="en"] .nav-lang-toggle .nav-lang-opt[data-lang="ja"] {
      opacity: 0.4;
    }
  
    html[lang="en"] .nav-lang-toggle .nav-lang-opt[data-lang="en"] {
      opacity: 1;
    }
  
    @media (max-width: 720px) {
      .nav-lang-toggle {
        padding: 5px 8px;
        font-size: 9px;
      }
  
      .nav-right {
        gap: 8px;
      }
    }
  
    /* [v8.31] EN mode promotes sublabel elements (pillar-en, folio-en, forwhom-en, process-en) to primary label styling when their JA sibling is hidden. Italic stays as design accent. */
    html[lang="en"] .opening-pillar-en {
      font-size: 13px;
      color: rgba(245, 240, 230, 0.92);
      font-weight: 500;
      letter-spacing: 0.04em;
      font-style: normal;
    }
  
    html[lang="en"] .folio-en {
      font-size: clamp(18px, 1.8vw, 22px);
      color: var(--ink);
      font-style: normal;
      font-weight: 600;
      font-family: var(--serif-en);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    html[lang="en"] .forwhom-en {
      font-size: 14px;
      color: var(--ink);
      font-style: normal;
      font-weight: 600;
      line-height: 1.45;
    }
  
    html[lang="en"] .process-en {
      font-size: 17px;
      color: var(--ink);
      font-style: normal;
      font-weight: 600;
      font-family: var(--serif-jp);
      line-height: 1.35;
    }
  
    /* OPENING */
    .opening {
      position: relative;
      background: var(--wine);
      color: var(--paper);
      min-height: 100vh;
      padding: clamp(180px, 24vh, 280px) var(--gutter) clamp(40px, 5vh, 60px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
  
    .opening::before {
      content: "";
      position: absolute;
      inset: -8%;
      background: radial-gradient(ellipse at 92% 6%, rgba(20, 6, 8, 0.48) 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(194, 139, 91, 0.05) 0%, transparent 55%);
      pointer-events: none;
      animation: openingDrift 28s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }
  
    .opening::after {
      content: "";
      position: absolute;
      inset: -12%;
      background: radial-gradient(ellipse at 50% 100%, rgba(20, 6, 8, 0.18) 0%, transparent 50%);
      pointer-events: none;
      animation: openingDrift2 42s ease-in-out infinite alternate;
      will-change: transform, opacity;
    }
  
    @keyframes openingDrift {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.92;
      }
  
      100% {
        transform: translate(-3%, 2%) scale(1.08);
        opacity: 1;
      }
    }
  
    @keyframes openingDrift2 {
      0% {
        transform: translate(0, 0) scale(1.02) rotate(0deg);
        opacity: 0.75;
      }
  
      100% {
        transform: translate(2.5%, -1.5%) scale(1.12) rotate(2deg);
        opacity: 1;
      }
    }
  
    @media (prefers-reduced-motion: reduce) {
  
      .opening::before,
      .opening::after {
        animation: none;
      }
    }
  
    .opening-inner {
      max-width: var(--max);
      margin: 0 auto;
      width: 100%;
      position: relative;
      z-index: 1;
    }
  
    .opening-top {
      display: flex;
      justify-content: flex-end;
      margin-bottom: clamp(80px, 12vh, 150px);
      flex-wrap: wrap;
      gap: 20px;
    }
  
    .opening-headline {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(42px, 6.5vw, 96px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--paper);
      max-width: 1400px;
    }
  
    .opening-headline em {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 500;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .opening-sub {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(20px, 2.4vw, 34px);
      line-height: 1.5;
      color: rgba(245, 240, 230, 0.75);
      margin-top: 24px;
      max-width: 820px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .opening-sub.jp {
      font-family: var(--serif-jp);
      font-style: normal;
      font-weight: 500;
      font-size: clamp(18px, 2vw, 28px);
      line-height: 1.6;
      color: rgba(245, 240, 230, 0.82);
    }
  
    .opening-sub.jp em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--gold-bright);
      font-weight: 500;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .opening-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: clamp(12px, 2vh, 20px);
      gap: 32px;
      flex-wrap: wrap;
    }
  
    /* Opening CTA row (migrated from Intro v7.1) — on wine bg, paper text */
    .opening-cta-row {
      display: flex;
      gap: 32px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 28px;
    }
  
    /* v7.11: primary / secondary CTA を文字サイズ・高さで統一(serif-jp 15px、font-weight で差別化、共に ::after 矢印で揃える) */
    .btn-paper {
      font-family: var(--serif-jp);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--paper);
      padding: 8px 0;
      background: transparent;
      border: none;
      transition: color .25s ease, gap .25s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
  
    .btn-paper:hover {
      color: var(--gold-bright);
      gap: 16px;
    }
  
    .btn-paper::after {
      content: "→";
      font-family: var(--serif-en);
      font-size: 18px;
      font-style: italic;
      line-height: 1;
      transition: transform .25s ease;
    }
  
    .btn-paper:hover::after {
      transform: translateX(2px);
    }
  
    .link-ghost-paper {
      font-family: var(--serif-jp);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--paper);
      padding: 8px 0;
      background: transparent;
      border: none;
      transition: color .25s ease, gap .25s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      opacity: 0.85;
    }
  
    .link-ghost-paper:hover {
      color: var(--gold-bright);
      gap: 16px;
      opacity: 1;
    }
  
    .link-ghost-paper::after {
      content: "→";
      font-family: var(--serif-en);
      font-size: 18px;
      font-style: italic;
      line-height: 1;
      transition: transform .25s ease;
    }
  
    .link-ghost-paper:hover::after {
      transform: translateX(2px);
    }
  
    /* Opening fact strip (migrated + translated from Intro v7.1) */
    /* --- v8.6 opening-pillars (4-col サービス導線、参照サイト .pillars 構造輸入) --- */
    .opening-pillars {
      margin-top: clamp(28px, 4vh, 40px);
      padding-top: 28px;
      border-top: 1px solid rgba(245, 240, 230, 0.22);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: clamp(32px, 4.5vw, 64px);
    }
  
    @media (max-width: 720px) {
      .opening-pillars {
        gap: 28px 24px;
      }
    }
  
    .opening-pillars .opening-pillar {
      flex: 0 0 auto;
    }
  
    .opening-pillar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: var(--paper);
      text-decoration: none;
      transition: transform 220ms cubic-bezier(.2, .7, .2, 1), color 220ms ease;
    }
  
    .opening-pillar:hover {
      transform: translateY(-2px);
    }
  
    .opening-pillar:hover .opening-pillar-ic {
      border-color: var(--gold-bright);
      color: var(--gold-bright);
    }
  
    .opening-pillar:focus-visible {
      outline: 2px solid var(--gold-bright);
      outline-offset: 6px;
      border-radius: 4px;
    }
  
    .opening-pillar-ic {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(217, 178, 126, 0.55);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: rgba(245, 240, 230, 0.85);
      transition: border-color 220ms ease, color 220ms ease;
    }
  
    .opening-pillar-ja {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.12em;
      color: rgba(245, 240, 230, 0.92);
      white-space: nowrap;
    }
  
    .opening-pillar-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 500;
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: rgba(217, 178, 126, 0.88);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
    }
  
    /* --- v8.6 opening-meta-row (pillar 下、条件ファクト 4 要素) --- */
    .opening-meta-row {
      margin-top: clamp(40px, 6vh, 64px);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 16px;
      color: rgba(245, 240, 230, 0.72);
    }
  
    .opening-meta-item {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
    }
  
    .opening-meta-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(217, 178, 126, 0.75);
    }
  
    .opening-meta-value {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 12.5px;
      letter-spacing: 0.03em;
      color: rgba(245, 240, 230, 0.88);
    }
  
    .opening-meta-sep {
      color: rgba(245, 240, 230, 0.28);
      font-size: 10px;
      line-height: 1;
      user-select: none;
    }
  
    @media (max-width: 720px) {
      .opening-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
  
      .opening-meta-sep {
        display: none;
      }
    }
  
    .scroll-cue {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.7);
    }
  
    .scroll-cue .line {
      width: 1px;
      height: 48px;
      background: rgba(245, 240, 230, 0.4);
      position: relative;
      overflow: hidden;
    }
  
    .scroll-cue .line::before {
      content: "";
      position: absolute;
      top: -50%;
      left: 0;
      right: 0;
      height: 50%;
      background: var(--gold-bright);
      animation: scrollDown 2.5s ease-in-out infinite;
    }
  
    /* Fixed scroll index (v7.1) — pinned bottom-right, updates with scroll position */
    .scroll-index {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 40;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      pointer-events: none;
      mix-blend-mode: difference;
      color: #fff;
      transition: opacity .4s ease;
    }
  
    .scroll-index-label {
      opacity: 0.65;
    }
  
    .scroll-index-line {
      width: 1px;
      height: 36px;
      background: currentColor;
      opacity: 0.35;
    }
  
    .scroll-index-count {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 18px;
      letter-spacing: 0.05em;
      font-weight: 400;
      text-transform: none;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
    }
  
    .scroll-index-count .current {
      color: inherit;
    }
  
    .scroll-index-count .total {
      opacity: 0.5;
    }
  
    @media (max-width: 600px) {
      .scroll-index {
        bottom: 20px;
        right: 20px;
      }
  
      .scroll-index-line {
        height: 24px;
      }
    }
  
    .scroll-index.hidden {
      opacity: 0;
    }
  
    @keyframes scrollDown {
      0% {
        top: -50%;
      }
  
      100% {
        top: 100%;
      }
    }
  
    /* CINEMATIC HERO (Art & Saveur inspired) */
    .cinematic {
      position: relative;
      min-height: 100vh;
      background: #050302;
      color: var(--paper);
      padding: clamp(100px, 16vh, 180px) var(--gutter) clamp(60px, 10vh, 120px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  
    .cinematic-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
  
    .cinematic-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at 25% 45%, rgba(194, 139, 91, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 72% 30%, rgba(224, 176, 128, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 85%, rgba(107, 32, 36, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 90%, rgba(224, 176, 128, 0.1) 0%, transparent 60%),
        linear-gradient(160deg, #0A0604 0%, #0F0904 35%, #130A06 60%, #08040A 100%);
    }
  
    .cinematic-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity: 0.35;
      mix-blend-mode: overlay;
    }
  
    .cinematic-scene {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
  
    .cinematic-scene svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  
    /* candle flicker */
    @keyframes flicker1 {
  
      0%,
      100% {
        opacity: .92;
        transform: scale(1) translateY(0);
      }
  
      20% {
        opacity: .75;
        transform: scale(.95) translateY(1px);
      }
  
      40% {
        opacity: 1;
      }
  
      60% {
        opacity: .82;
        transform: scale(1.05) translateY(-1px);
      }
  
      80% {
        opacity: .88;
      }
    }
  
    @keyframes flicker2 {
  
      0%,
      100% {
        opacity: .85;
      }
  
      25% {
        opacity: 1;
        transform: scale(1.06);
      }
  
      55% {
        opacity: .7;
      }
  
      75% {
        opacity: .95;
        transform: scale(.98);
      }
    }
  
    @keyframes flicker3 {
  
      0%,
      100% {
        opacity: .9;
      }
  
      35% {
        opacity: .7;
        transform: translateY(1px);
      }
  
      65% {
        opacity: 1;
        transform: translateY(-1px);
      }
    }
  
    .flame-1 {
      animation: flicker1 2.8s ease-in-out infinite;
      transform-origin: center bottom;
    }
  
    .flame-2 {
      animation: flicker2 3.4s ease-in-out infinite 0.3s;
      transform-origin: center bottom;
    }
  
    .flame-3 {
      animation: flicker3 2.4s ease-in-out infinite 0.7s;
      transform-origin: center bottom;
    }
  
    .flame-glow {
      animation: flicker1 3s ease-in-out infinite;
      transform-origin: center;
    }
  
    .cinematic-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      flex: 1;
      max-width: var(--max);
      margin: 0 auto;
      width: 100%;
    }
  
    .cinematic-top-meta {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      color: rgba(245, 240, 230, 0.55);
    }
  
    .cinematic-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      padding: 8vh 0 4vh;
      gap: clamp(20px, 4vh, 48px);
    }
  
    .cinematic-wordmark {
      font-family: var(--serif-en);
      font-weight: 300;
      font-size: clamp(80px, 16.5vw, 260px);
      line-height: 0.86;
      letter-spacing: -0.045em;
      color: var(--paper);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
    }
  
    .cinematic-wordmark em {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .cinematic-lede {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 32px;
      align-items: end;
      margin-top: clamp(20px, 4vh, 40px);
    }
  
    .cinematic-lede .est {
      grid-column: 1 / span 5;
    }
  
    .cinematic-lede .copy {
      grid-column: 7 / span 5;
    }
  
    @media (max-width: 900px) {
  
      .cinematic-lede .est,
      .cinematic-lede .copy {
        grid-column: 1 / -1;
      }
    }
  
    .cinematic-est {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-bright);
      margin-bottom: 14px;
    }
  
    .cinematic-jp {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: clamp(18px, 1.8vw, 22px);
      line-height: 1.75;
      color: rgba(245, 240, 230, 0.9);
      letter-spacing: 0.01em;
    }
  
    .cinematic-jp em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 300;
    }
  
    .cinematic-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 32px;
      flex-wrap: wrap;
      margin-top: clamp(32px, 6vh, 64px);
    }
  
    .cinematic-discover {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-bright);
      border-bottom: 1px solid var(--gold-bright);
      padding: 6px 4px 6px 0;
      display: inline-flex;
      gap: 12px;
      align-items: center;
      transition: gap .25s, color .25s, border-color .25s;
    }
  
    .cinematic-discover:hover {
      gap: 22px;
      color: var(--paper);
      border-color: var(--paper);
    }
  
    .cinematic-spec {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      color: rgba(245, 240, 230, 0.45);
      text-transform: uppercase;
      text-align: right;
      line-height: 1.8;
    }
  
    /* SIGNATURE COMPOSITIONS (Portfolio — bartender's signatures) */
    .signature {
      position: relative;
      background: #050302;
      color: var(--paper);
      padding: clamp(120px, 18vh, 200px) 0 clamp(100px, 14vh, 160px);
      overflow: hidden;
    }
  
    .signature::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 15% 20%, rgba(194, 139, 91, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(107, 32, 36, 0.2) 0%, transparent 60%);
      pointer-events: none;
    }
  
    .signature-head {
      max-width: var(--max);
      margin: 0 auto clamp(60px, 10vh, 120px);
      padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      align-items: end;
      position: relative;
      z-index: 1;
    }
  
    .signature-head .title-col {
      grid-column: span 7;
    }
  
    .signature-head .body-col {
      grid-column: span 5;
      padding-bottom: 8px;
    }
  
    @media (max-width: 900px) {
  
      .signature-head .title-col,
      .signature-head .body-col {
        grid-column: 1 / -1;
      }
    }
  
    .signature-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-bright);
      margin-bottom: 24px;
    }
  
    .signature-title {
      font-family: var(--serif-en);
      font-weight: 300;
      font-size: clamp(56px, 8.5vw, 140px);
      line-height: 0.95;
      letter-spacing: -0.025em;
      color: var(--paper);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .signature-title em {
      display: block;
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .signature-body {
      font-family: var(--sans-jp);
      font-size: 15px;
      line-height: 1.95;
      color: rgba(245, 240, 230, 0.72);
      max-width: 420px;
    }
  
    .signature-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold-bright);
      border-bottom: 1px solid var(--gold-bright);
      padding-bottom: 4px;
      transition: gap .25s, color .25s, border-color .25s;
    }
  
    .signature-link:hover {
      gap: 20px;
      color: var(--paper);
      border-color: var(--paper);
    }
  
    .signature-rail-wrap {
      position: relative;
      z-index: 1;
    }
  
    .signature-rail {
      display: flex;
      gap: 24px;
      padding: 0 var(--gutter);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
  
    .signature-rail::-webkit-scrollbar {
      display: none;
    }
  
    .sig-card {
      flex: 0 0 auto;
      width: clamp(280px, 32vw, 420px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
    }
  
    .sig-visual {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: #0A0604;
      border-radius: 2px;
    }
  
    .sig-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
      z-index: 2;
      pointer-events: none;
    }
  
    .sig-visual .sig-glow {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
  
    .sig-visual svg.drink {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
  
    .sig-visual .sig-chip {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 3;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.7);
      padding: 6px 10px;
      border: 1px solid rgba(245, 240, 230, 0.25);
      border-radius: 999px;
      backdrop-filter: blur(6px);
      background: rgba(8, 5, 3, 0.35);
    }
  
    .sig-visual .sig-chip.gold {
      color: var(--gold-bright);
      border-color: rgba(224, 176, 128, 0.5);
    }
  
    .sig-visual .sig-num {
      position: absolute;
      top: 20px;
      right: 22px;
      z-index: 3;
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 32px;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 1;
    }
  
    .sig-body {
      padding: 28px 4px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .sig-name {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(22px, 2.2vw, 28px);
      color: var(--paper);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 1.25;
    }
  
    .sig-name-jp {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 13px;
      color: rgba(245, 240, 230, 0.55);
      letter-spacing: 0.04em;
      margin-top: -4px;
    }
  
    .sig-desc {
      font-family: var(--sans-jp);
      font-size: 13px;
      line-height: 1.85;
      color: rgba(245, 240, 230, 0.7);
      margin-top: 4px;
      max-width: 380px;
    }
  
    .sig-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 14px;
      margin-top: 10px;
      border-top: 1px solid rgba(245, 240, 230, 0.12);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.5);
    }
  
    .sig-meta .sig-price {
      color: var(--gold-bright);
      letter-spacing: 0.15em;
    }
  
    .sig-nav {
      max-width: var(--max);
      margin: 48px auto 0;
      padding: 0 var(--gutter);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
  
    .sig-nav-btns {
      display: flex;
      gap: 12px;
    }
  
    .sig-nav-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid rgba(245, 240, 230, 0.25);
      background: rgba(245, 240, 230, 0.04);
      color: var(--paper);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 20px;
      transition: background .25s, border-color .25s, color .25s, transform .25s;
    }
  
    .sig-nav-btn:hover {
      background: rgba(224, 176, 128, 0.15);
      border-color: var(--gold-bright);
      color: var(--gold-bright);
      transform: scale(1.05);
    }
  
    .sig-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
  
    .sig-nav-count {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      color: rgba(245, 240, 230, 0.5);
      text-transform: uppercase;
    }
  
    .sig-nav-count strong {
      color: var(--gold-bright);
      font-weight: 500;
    }
  
    /* FOLIO SAMPLE MENU (signature cards embedded inside njoooy Bar folio, cream bg override) */
    .folio-sample {
      grid-column: 1 / -1;
      margin-top: 64px;
      padding-top: 40px;
      border-top: 1px dotted var(--rule);
    }
  
    .folio-sample-head {
      max-width: var(--max);
      margin: 0 auto 28px;
      padding: 0 calc(var(--gutter) + 8.33%);
    }
  
    @media (max-width: 900px) {
      .folio-sample-head {
        padding: 0 var(--gutter);
      }
    }
  
    .folio-sample-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
  
    .folio-sample-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.25;
      color: var(--ink);
    }
  
    .folio-sample-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 400;
    }
  
    .folio-sample-desc {
      margin-top: 14px;
      max-width: 640px;
      color: var(--ink-2);
      font-size: 14px;
      line-height: 1.85;
    }
  
    .folio-sample-rail-wrap {
      position: relative;
    }
  
    .folio-sample-rail {
      display: flex;
      gap: 20px;
      padding: 4px var(--gutter) 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      scroll-behavior: smooth;
    }
  
    .folio-sample-rail::-webkit-scrollbar {
      display: none;
    }
  
    .folio-sample-rail .sig-card {
      flex: 0 0 auto;
      width: clamp(240px, 24vw, 300px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
    }
  
    /* override sig-card body colors for cream background */
    .folio-sample-rail .sig-body {
      padding: 16px 0 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
  
    .folio-sample-rail .sig-name {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(18px, 1.6vw, 22px);
      color: var(--ink);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 1.25;
    }
  
    .folio-sample-rail .sig-name-jp {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.04em;
      margin-top: -2px;
    }
  
    .folio-sample-rail .sig-desc {
      font-family: var(--sans-jp);
      font-size: 12px;
      line-height: 1.85;
      color: var(--ink-2);
      margin-top: 4px;
      max-width: 380px;
    }
  
    .folio-sample-rail .sig-meta {
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      padding-top: 10px;
      margin-top: 8px;
      border-top: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .folio-sample-rail .sig-visual {
      aspect-ratio: 4 / 5;
    }
  
    /* BARTENDER REVEAL (scroll-triggered image in typography) */
    .bartender-reveal {
      position: relative;
      background: #050302;
      color: var(--paper);
      overflow: hidden;
    }
  
    .bartender-sticky {
      position: relative;
      height: 300vh;
    }
  
    .bartender-pin {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  
    .bartender-pin::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(194, 139, 91, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #050302 0%, #0A0604 50%, #050302 100%);
      pointer-events: none;
    }
  
    .bartender-stage {
      position: relative;
      width: 100%;
      max-width: 1800px;
      padding: 0 var(--gutter);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(0px, 1vw, 12px);
    }
  
    .bartender-line {
      font-family: var(--serif-en);
      font-weight: 300;
      font-size: clamp(64px, 14vw, 240px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      color: var(--paper);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      white-space: nowrap;
      text-align: center;
    }
  
    .bartender-line.gold {
      color: var(--gold-bright);
      font-style: italic;
    }
  
    .bartender-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(var(--br-scale, 0.22));
      width: clamp(320px, 40vw, 560px);
      aspect-ratio: 3 / 4;
      overflow: hidden;
      z-index: 2;
      opacity: var(--br-opacity, 1);
      transition: none;
      border-radius: 2px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
      will-change: transform, opacity;
    }
  
    .bartender-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 25%, rgba(245, 240, 230, 0.12), transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(107, 32, 36, 0.35), transparent 60%),
        linear-gradient(160deg, #1a1210 0%, #0a0705 60%, #050302 100%);
    }
  
    .bartender-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.0' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity: 0.4;
      mix-blend-mode: overlay;
      pointer-events: none;
    }
  
    .bartender-image svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  
    .bartender-image .br-label {
      position: absolute;
      bottom: 18px;
      left: 18px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.7);
      z-index: 2;
    }
  
    .bartender-image .br-num {
      position: absolute;
      top: 18px;
      right: 18px;
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 20px;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      z-index: 2;
    }
  
    .bartender-diamond {
      position: absolute;
      right: clamp(40px, 8vw, 100px);
      bottom: clamp(60px, 12vh, 120px);
      width: 10px;
      height: 10px;
      background: var(--gold);
      transform: rotate(45deg);
      z-index: 3;
      animation: breathe 3.8s ease-in-out infinite;
    }
  
    .bartender-caption {
      position: absolute;
      left: var(--gutter);
      bottom: clamp(40px, 8vh, 80px);
      z-index: 3;
      max-width: 320px;
      opacity: var(--br-cap-opacity, 0);
      transform: translateY(var(--br-cap-y, 20px));
      transition: opacity .4s, transform .4s;
    }
  
    .bartender-caption .meta {
      color: rgba(224, 176, 128, 0.85);
      margin-bottom: 10px;
    }
  
    .bartender-caption .cap-jp {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 15px;
      line-height: 1.8;
      color: rgba(245, 240, 230, 0.85);
    }
  
    .bartender-outro {
      padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(100px, 14vh, 160px);
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 32px;
      position: relative;
      z-index: 1;
    }
  
    .bartender-outro .col-l {
      grid-column: 2 / span 4;
    }
  
    .bartender-outro .col-r {
      grid-column: 7 / span 5;
    }
  
    @media (max-width: 900px) {
  
      .bartender-outro .col-l,
      .bartender-outro .col-r {
        grid-column: 1 / -1;
      }
    }
  
    .bartender-outro-quote {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.45;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .bartender-outro-body {
      font-family: var(--sans-jp);
      font-size: 15px;
      line-height: 1.95;
      color: rgba(245, 240, 230, 0.75);
    }
  
    .bartender-outro-body p {
      margin-bottom: 18px;
    }
  
    .bartender-outro-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold-bright);
      border-bottom: 1px solid var(--gold-bright);
      padding-bottom: 4px;
      transition: gap .25s;
    }
  
    .bartender-outro-cta:hover {
      gap: 22px;
    }
  
    /* WORDMARK */
    .wordmark {
      position: relative;
      background: var(--ink);
      color: var(--paper);
      min-height: 100vh;
      padding: clamp(80px, 12vh, 140px) var(--gutter);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  
    .wordmark::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 15% 85%, rgba(194, 139, 91, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(107, 32, 36, 0.3) 0%, transparent 60%);
      pointer-events: none;
    }
  
    .wordmark-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      flex: 1;
      width: 100%;
    }
  
    .wordmark-top,
    .wordmark-bot {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      color: rgba(245, 240, 230, 0.55);
    }
  
    .wordmark-center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4vh 0;
    }
  
    .wordmark-logo {
      font-family: var(--serif-en);
      font-size: clamp(200px, 46vw, 720px);
      line-height: 0.82;
      font-weight: 300;
      letter-spacing: -0.075em;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      color: var(--paper);
      display: inline-flex;
      align-items: baseline;
      white-space: nowrap;
    }
  
    .wordmark-logo .mark {
      display: inline-block;
      width: 0.18em;
      height: 0.18em;
      background: var(--gold);
      border-radius: 50%;
      margin-left: 0.04em;
      align-self: flex-end;
      margin-bottom: 0.12em;
      animation: breathe 4.2s ease-in-out infinite;
    }
  
    /* INTRO */
    .intro {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      position: relative;
    }
  
    .intro-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .intro-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .intro-head .meta-col {
      grid-column: span 3;
    }
  
    .intro-head .label-col {
      grid-column: span 9;
    }
  
    @media (max-width: 720px) {
  
      .intro-head .meta-col,
      .intro-head .label-col {
        grid-column: span 12;
      }
    }
  
    .intro-main {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      align-items: end;
      margin-bottom: 80px;
    }
  
    .intro-title {
      grid-column: 1 / span 9;
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: clamp(44px, 6.5vw, 96px);
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
  
    .intro-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-weight: 500;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .intro-body {
      grid-column: 9 / span 4;
      max-width: 420px;
      padding-bottom: 12px;
    }
  
    @media (max-width: 900px) {
      .intro-title {
        grid-column: 1 / -1;
      }
  
      .intro-body {
        grid-column: 1 / -1;
        max-width: 560px;
        margin-top: 32px;
      }
    }
  
    .intro-cta-row {
      display: flex;
      gap: 40px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 32px;
    }
  
    .btn-ink {
      background: var(--ink);
      color: var(--paper);
      padding: 18px 32px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 500;
      transition: background .3s ease, transform .2s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
  
    .btn-ink:hover {
      background: var(--wine);
      transform: translateY(-1px);
    }
  
    .btn-ink::after {
      content: "→";
      font-family: var(--serif-en);
      font-size: 14px;
      transition: transform .25s ease;
    }
  
    .btn-ink:hover::after {
      transform: translateX(4px);
    }
  
    .link-ghost {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 14px 4px 14px 0;
      border-bottom: 1px solid var(--ink);
      transition: color .25s, border-color .25s, padding-right .25s;
    }
  
    .link-ghost:hover {
      color: var(--wine);
      border-color: var(--wine);
      padding-right: 16px;
    }
  
    .intro-meta-grid {
      margin-top: 120px;
      padding-top: 40px;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
    }
  
    @media (max-width: 720px) {
      .intro-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
      }
    }
  
    .intro-meta-cell .label {
      margin-bottom: 8px;
    }
  
    .intro-meta-cell .value {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 24px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    /* MARQUEE */
    .marquee {
      overflow: hidden;
      background: var(--surface);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      padding: 28px 0;
    }
  
    .marquee.dark {
      background: var(--ink-deep);
      border-color: rgba(245, 240, 230, 0.1);
    }
  
    .marquee.wine {
      background: var(--wine-deep);
      border-color: rgba(194, 139, 91, 0.2);
    }
  
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll 38s linear infinite;
    }
  
    .marquee-group {
      display: flex;
      align-items: center;
      gap: 56px;
      padding-right: 56px;
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(20px, 2.6vw, 32px);
      font-weight: 400;
      color: var(--ink);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      white-space: nowrap;
    }
  
    .marquee.dark .marquee-group,
    .marquee.wine .marquee-group {
      color: var(--paper);
    }
  
    .marquee-group .jp {
      font-family: var(--serif-jp);
      font-style: normal;
      font-weight: 500;
      letter-spacing: 0.04em;
    }
  
    .marquee-group .sep {
      color: var(--wine);
    }
  
    .marquee.dark .marquee-group .sep {
      color: var(--gold);
    }
  
    .marquee.wine .marquee-group .sep {
      color: var(--gold-bright);
    }
  
    @keyframes marqueeScroll {
      from {
        transform: translateX(0);
      }
  
      to {
        transform: translateX(-50%);
      }
    }
  
    /* FOR WHOM */
    .for-whom {
      background: var(--paper-2);
      padding: clamp(120px, 18vh, 200px) var(--gutter);
    }
  
    .for-whom-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .fw-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .fw-head .meta-col {
      grid-column: span 4;
    }
  
    .fw-head .title-col {
      grid-column: span 8;
    }
  
    .fw-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5.5vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
  
    .fw-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .fw-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .fw-head .meta-col,
      .fw-head .title-col {
        grid-column: span 12;
      }
    }
  
    /* v7.6: case-grid (2-column card layout) replaces stacked case-list */
    .case-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(24px, 3vw, 40px);
    }
  
    @media (max-width: 720px) {
      .case-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }
  
    .case-card {
      display: flex;
      flex-direction: column;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 2px;
      overflow: hidden;
      transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s, border-color .3s;
    }
  
    .case-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 32px rgba(8, 5, 3, 0.08);
      border-color: var(--wine);
    }
  
    .case-card-visual {
      position: relative;
      aspect-ratio: 4 / 3;
      background: var(--ink);
      overflow: hidden;
    }
  
    .case-card-visual svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
  
    .case-card-num {
      position: absolute;
      top: 20px;
      left: 22px;
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(38px, 4vw, 52px);
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 300;
      line-height: 1;
      z-index: 2;
      letter-spacing: -0.02em;
    }
  
    .case-card-svg-tbd {
      position: absolute;
      bottom: 10px;
      right: 14px;
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(245, 240, 230, 0.38);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      z-index: 2;
    }
  
    .case-card-body {
      padding: clamp(22px, 2.5vw, 32px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
    }
  
    .case-card-en {
      color: var(--muted);
      margin-bottom: 2px;
    }
  
    .case-card-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(20px, 2vw, 26px);
      line-height: 1.35;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
  
    .case-card-desc {
      font-family: var(--sans-jp);
      font-size: 13.5px;
      line-height: 1.9;
      color: var(--ink-2);
    }
  
    .case-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
      padding-top: 8px;
    }
  
    .case-tag {
      display: inline-block;
      padding: 4px 10px;
      border: 1px solid var(--rule);
      border-radius: 999px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--surface);
    }
  
    /* Old .case-list/.case-row/.case-num(flat)/.case-body/.case-jp/.case-en/.case-desc/.case-meta rules removed v7.6 */
  
    /* FIRST VISIT (v5) */
    /* First Visit — compact strip (v7.2: replaced full-card version with single-strip CTA) */
    .first-visit {
      margin-top: 64px;
      padding-top: 32px;
      border-top: 1px solid var(--rule);
    }
  
    /* v7.13 Forwhom — 持ち込み LP 構成を全面採用(icon + ラベル + 英訳 + desc、3-col grid) */
    .forwhom-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: var(--max);
      margin: 0 auto;
    }
  
    @media (max-width: 1024px) {
      .forwhom-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  
    @media (max-width: 640px) {
      .forwhom-grid {
        grid-template-columns: 1fr;
      }
    }
  
    .forwhom-card {
      display: flex;
      gap: 16px;
      padding: 24px 22px;
      background: #FBF7ED;
      border: 1px solid rgba(27, 18, 14, 0.08);
      border-radius: 2px;
      align-items: flex-start;
    }
  
    .forwhom-card:hover {}
  
    .forwhom-icon {
      flex-shrink: 0;
      width: 96px;
      height: 96px;
      color: var(--wine);
    }
  
    .forwhom-icon svg,
    .forwhom-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
  
    .forwhom-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
  
    .forwhom-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink);
      margin: 0;
    }
  
    .forwhom-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.3;
      margin: 0;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      letter-spacing: 0.01em;
    }
  
    .forwhom-desc {
      font-family: var(--serif-jp);
      font-size: 12px;
      line-height: 1.75;
      color: var(--ink-2);
      margin-top: 6px;
    }
  
    .fv-compact {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      text-align: center;
    }
  
    .fv-compact-label {
      color: var(--muted);
      margin-bottom: 4px;
    }
  
    .fv-compact-options {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 28px;
      max-width: 920px;
    }
  
    .fv-opt {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      padding: 10px 16px;
      background: transparent;
      border-radius: 999px;
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 14px;
      transition: background .25s, color .25s;
    }
  
    .fv-opt:hover {
      background: var(--surface);
    }
  
    .fv-opt .fv-opt-q {
      color: var(--ink-2);
    }
  
    .fv-opt .fv-opt-sep {
      color: var(--muted-2);
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 18px;
    }
  
    .fv-opt .fv-opt-rec {
      color: var(--ink);
      font-family: var(--serif-jp);
    }
  
    .fv-opt .fv-opt-rec em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 400;
    }
  
    .fv-compact-cta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 8px 0;
      border-bottom: 1px solid var(--muted-2);
      transition: color .25s, border-color .25s, padding-right .25s;
    }
  
    .fv-compact-cta:hover {
      color: var(--wine);
      border-color: var(--wine);
      padding-right: 10px;
    }
  
    /* (Old .fv-card-* rules removed v7.2 — compact strip now used) */
    /* (Old .fv-card-* rules removed v7.2) */
  
  
    /* ARCHIVE (Services) */
    .archive {
      padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(80px, 12vh, 140px);
    }
  
    .archive-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .archive-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 120px;
    }
  
    .archive-head .meta-col {
      grid-column: span 4;
    }
  
    .archive-head .title-col {
      grid-column: span 8;
    }
  
    /* v7.11 §1 left-align override(standardized-centered-head を archive-head にだけ無効化) */
    .archive-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5.5vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      text-align: left !important;
    }
  
    .archive-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .archive-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .archive-head .meta-col,
      .archive-head .title-col {
        grid-column: span 12;
      }
    }
  
    /* v7.12 Folio — 持ち込み LP Services 構成を全面採用(card-grid、No.XX ラベル、価格フォント維持) */
    .folio-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto auto auto auto auto auto auto;
      column-gap: 16px;
      row-gap: 18px;
      max-width: var(--max);
      margin: 0 auto;
    }
  
    @media (max-width: 900px) {
      .folio-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        column-gap: 20px;
        row-gap: 20px;
      }
  
      .folio {
        display: flex;
        flex-direction: column;
        gap: 18px;
        grid-row: auto;
      }
  
      .folio-cta {
        margin-top: auto;
        align-self: center;
        justify-self: auto;
      }
    }
  
    @media (max-width: 600px) {
      .folio-grid {
        grid-template-columns: 1fr;
      }
    }
  
    .folio {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 8;
      row-gap: 18px;
      padding: 32px 28px;
      background: #FBF7ED;
      border: 1px solid rgba(27, 18, 14, 0.08);
      border-radius: 2px;
      max-width: none;
      margin: 0;
    }
  
    .folio:hover {}
  
    .folio:last-child {
      border-bottom: 1px solid rgba(27, 18, 14, 0.08);
    }
  
    .folio-header {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 0;
      min-height: 68px;
    }
  
    .folio-slug {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0;
    }
  
    .folio-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(20px, 2vw, 26px);
      line-height: 1.3;
      letter-spacing: 0.01em;
      color: var(--ink);
    }
  
    .folio-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 14px;
      color: var(--muted);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      margin: 0;
    }
  
    .folio-icon {
      width: 180px;
      height: 180px;
      color: var(--wine);
      margin: 0 auto;
    }
  
    .folio-icon svg,
    .folio-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
  
    .folio-num {
      display: none;
    }
  
    .folio-visual {
      display: none;
    }
  
    .folio-desc {
      font-size: 13px;
      line-height: 1.8;
      color: var(--ink-2);
      margin: 0;
      min-height: 140px;
    }
  
    .folio-specs {
      border-top: 1px solid var(--rule);
      padding-top: 12px;
      margin: 0;
      min-height: 124px;
    }
  
    .folio-spec-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      border-bottom: 1px dotted var(--rule);
    }
  
    .folio-spec-row:last-child {
      border-bottom: none;
    }
  
    .folio-spec-label {
      font-family: var(--sans-jp);
      font-size: 12px;
      color: var(--ink-2);
    }
  
    /* 値段フォント — ユーザー指定通り保持 */
    .folio-spec-value {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 13px;
      color: var(--ink);
      text-align: right;
    }
  
    .folio-includes {
      padding-top: 4px;
      margin: 0;
      min-height: 150px;
    }
  
    .folio-includes-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
  
    .folio-includes-list {
      list-style: none;
      font-family: var(--sans-jp);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.75;
    }
  
    .folio-includes-list li::before {
      content: "– ";
      color: var(--wine);
      font-weight: 600;
    }
  
    /* --- v8.15 新案 X: scenes / note / spec--primary --- */
    /* [v8.30] scenes 上余白を 22px(row-gap 18 + padding-top 4)→ ~8px(≈ 1/3)に縮小。margin-top: -14 で subgrid row track 内で上方に pull。 */
    .folio-scenes {
      padding-top: 4px;
      margin: -14px 0 0 0;
      min-height: 128px;
    }
  
    .folio-scenes-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
  
    .folio-scenes-list {
      list-style: none;
      font-family: var(--sans-jp);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.75;
      padding: 0;
      margin: 0;
    }
  
    .folio-scenes-list li::before {
      content: "– ";
      color: var(--wine);
      font-weight: 600;
    }
  
    .folio-note {
      font-family: var(--sans-jp);
      font-size: 10.5px;
      color: var(--muted);
      line-height: 1.7;
      margin: 0;
      padding-top: 4px;
      border-top: 1px dashed rgba(27, 18, 14, 0.12);
    }
  
    .folio-spec-row.folio-spec-row--primary {
      padding: 2px 0;
    }
  
    .folio-spec-row.folio-spec-row--primary .folio-spec-label {
      font-weight: 500;
      color: var(--ink);
    }
  
    .folio-spec-row.folio-spec-row--primary .folio-spec-value {
      font-weight: 600;
      font-size: 1.1em;
      color: var(--wine);
    }
  
    /* [edit] ローンチ特別価格表示: strikethrough + 強調色 */
    .folio-spec-strike {
      text-decoration: line-through;
      color: var(--muted);
      font-size: 0.9em;
      opacity: 0.7;
      margin-right: 4px;
    }
  
    .folio-spec-launch {
      color: var(--wine);
      font-weight: 600;
    }
  
    .folio-launch-note {
      display: block;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dotted rgba(27, 18, 14, 0.1);
      font-style: italic;
      color: var(--wine);
      letter-spacing: 0.02em;
    }
  
    .folio-cta {
      align-self: end;
      justify-self: center;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--ink);
      transition: color .25s, border-color .25s, gap .25s;
    }
  
    .folio-cta:hover {
      color: var(--wine);
      border-color: var(--wine);
      gap: 16px;
    }
  
    .folio-placeholder-cta {
      margin-top: auto;
      align-self: flex-end;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: default;
      opacity: 0.65;
      padding-bottom: 4px;
      border-bottom: 1px dashed var(--muted);
    }
  
    /* dead v7.10 classes kept but display:none */
    .folio-content {
      display: contents;
    }
  
    /* v7.13 Sample Menu — 持ち込み LP 由来、folio-grid の下に配置 */
    .sample-menu {
      max-width: var(--max);
      margin: clamp(56px, 8vh, 96px) auto 0;
      padding-top: clamp(36px, 5vh, 64px);
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 1.2fr 1.8fr 1.8fr 1.8fr;
      gap: 28px;
      align-items: start;
    }
  
    @media (max-width: 900px) {
      .sample-menu {
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }
  
    .sample-menu-intro {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-right: 8px;
    }
  
    .sample-menu-intro h4 {
      font-family: var(--serif-en);
      font-weight: 500;
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 30px);
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }
  
    .sample-menu-intro p {
      font-family: var(--serif-jp);
      font-size: 13px;
      line-height: 1.8;
      color: var(--ink-2);
    }
  
    .sample-menu-more {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink);
      padding-bottom: 3px;
      border-bottom: 1px solid var(--ink);
      align-self: flex-start;
      transition: color .25s, border-color .25s, gap .25s;
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
  
    .sample-menu-more:hover {
      color: var(--wine);
      border-color: var(--wine);
      gap: 14px;
    }
  
    .sample-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .sample-thumb {
      width: 70%;
      aspect-ratio: 4 / 3;
      background: var(--wine-deep);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
  
    .sample-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  
    .sample-thumb.t1 {
      background: radial-gradient(ellipse at 30% 28%, rgba(224, 176, 128, 0.4), transparent 55%), radial-gradient(ellipse at 72% 82%, rgba(138, 59, 63, 0.55), transparent 60%), linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
    }
  
    .sample-thumb.t2 {
      background: radial-gradient(ellipse at 28% 30%, rgba(245, 240, 230, 0.18), transparent 52%), radial-gradient(ellipse at 75% 72%, rgba(107, 122, 74, 0.48), transparent 58%), linear-gradient(135deg, #3B4A2E 0%, #1A2412 100%);
    }
  
    .sample-thumb.t3 {
      background: radial-gradient(ellipse at 32% 28%, rgba(194, 139, 91, 0.22), transparent 55%), radial-gradient(ellipse at 72% 76%, rgba(41, 27, 58, 0.6), transparent 62%), linear-gradient(135deg, #2E1A4A 0%, #1A0D2E 100%);
    }
  
    .sample-name {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(17px, 1.5vw, 19px);
      color: var(--ink);
      line-height: 1.3;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      margin-top: 4px;
    }
  
    .sample-desc {
      font-family: var(--serif-jp);
      font-size: 12px;
      line-height: 1.8;
      color: var(--ink-2);
      margin-top: 2px;
    }
  
    .sample-tags {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      flex-wrap: wrap;
    }
  
    .sample-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 3px 8px;
      border: 1px solid var(--rule);
      border-radius: 2px;
    }
  
    /* Why njoooy — 3 differentiators block (v7.3) */
    .why-njoooy {
      margin: 0 auto clamp(80px, 12vh, 140px);
      padding: clamp(40px, 5vh, 72px) clamp(28px, 4vw, 56px);
      background: var(--surface);
      border: 1px solid var(--rule);
      max-width: 1200px;
      border-radius: 2px;
    }
  
    .why-head {
      text-align: center;
      margin-bottom: clamp(32px, 4vh, 48px);
    }
  
    .why-head .meta {
      color: var(--wine);
      letter-spacing: 0.22em;
    }
  
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3vw, 48px);
    }
  
    @media (max-width: 900px) {
      .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
  
    .why-item {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
  
    .why-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 40px;
      color: var(--gold);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      font-weight: 300;
      line-height: 1;
    }
  
    .why-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(18px, 1.6vw, 22px);
      line-height: 1.45;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
  
    .why-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 500;
    }
  
    .why-desc {
      font-size: 13.5px;
      line-height: 1.9;
      color: var(--ink-2);
    }
  
    .archive-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5.5vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
  
    .archive-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .archive-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .archive-head .meta-col,
      .archive-head .title-col {
        grid-column: span 12;
      }
    }
  
    /* PROCESS */
    .process {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--surface);
    }
  
    .process-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .process-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .process-head .meta-col {
      grid-column: span 4;
    }
  
    .process-head .title-col {
      grid-column: span 8;
    }
  
    .process-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.15;
    }
  
    .process-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .process-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .process-head .meta-col,
      .process-head .title-col {
        grid-column: span 12;
      }
    }
  
    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 24px;
      margin-top: 40px;
    }
  
    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--ink);
    }
  
    .step {
      padding-top: 28px;
      position: relative;
    }
  
    .step::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 0;
      width: 10px;
      height: 10px;
      background: var(--wine);
      border-radius: 50%;
    }
  
    .step-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
    }
  
    .step-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 6px;
      line-height: 1.35;
    }
  
    .step-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 15px;
      color: var(--muted);
      margin-bottom: 16px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .step-desc {
      font-family: var(--sans-jp);
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.8;
    }
  
    .step-time {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--wine);
      margin-top: 14px;
    }
  
    @media (max-width: 900px) {
      .timeline {
        grid-template-columns: 1fr;
        gap: 8px;
      }
  
      .timeline::before {
        display: none;
      }
  
      .step {
        border-left: 2px solid var(--ink);
        padding-left: 24px;
        padding-top: 24px;
        padding-bottom: 12px;
      }
  
      .step::before {
        top: 28px;
        left: -6px;
      }
    }
  
    /* v7.13 Process — 持ち込み LP Process 構成を全面採用(3-col grid、icon + num + jp + en + desc) */
    .process-title.spaced {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(32px, 4.5vw, 56px);
      line-height: 1.15;
      letter-spacing: 0.04em;
    }
  
    .process-divider {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin: 20px auto 0;
      max-width: 180px;
    }
  
    .process-divider .line {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }
  
    .process-divider .diamond {
      width: 7px;
      height: 7px;
      background: var(--wine);
      transform: rotate(45deg);
    }
  
    .process-intro {
      font-family: var(--serif-jp);
      font-size: 14px;
      line-height: 1.9;
      color: var(--ink-2);
      margin-top: 20px;
      text-align: center;
    }
  
    .process-steps {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 40px 16px;
      max-width: var(--max);
      margin: 0 auto;
      margin-top: 48px;
    }
  
    @media (max-width: 1100px) {
      .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 24px;
      }
    }
  
    @media (max-width: 600px) {
      .process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
      }
    }
  
    .process-step {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: center;
      align-items: center;
    }
  
    .process-num {
      width: 34px;
      height: 34px;
      background: var(--wine);
      color: var(--paper);
      border-radius: 50%;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif-en);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.02em;
    }
  
    /* v8.18: 番号間に矢印 — .process-step を基準に gap 16px の中央に配置 */
    .process-step {
      position: relative;
    }
  
    .process-step:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 17px;
      right: -8px;
      transform: translate(50%, -50%);
      color: var(--wine);
      opacity: 0.48;
      font-family: var(--serif-en);
      font-weight: 400;
      font-size: 18px;
      letter-spacing: 0;
      line-height: 1;
      pointer-events: none;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
    }
  
    @media (max-width: 1100px) {
      .process-step:not(:last-child)::after {
        display: none;
      }
    }
  
    .process-icon {
      width: 56px;
      height: 56px;
      color: var(--wine);
      margin: 6px 0 4px;
      position: relative;
    }
  
    /* v8.17: SVG 後ろに透明円で強調 */
    .process-icon::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      background: var(--wine);
      border-radius: 50%;
      opacity: 0.08;
      z-index: 0;
      pointer-events: none;
    }
  
    .process-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 1;
    }
  
    .process-step h4 {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 17px;
      color: var(--ink);
      line-height: 1.35;
      margin: 0;
    }
  
    .process-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.02em;
      line-height: 1.3;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      margin: 0;
    }
  
    .process-desc-step {
      font-family: var(--serif-jp);
      font-size: 12px;
      line-height: 1.8;
      color: var(--ink-2);
      margin-top: 6px;
      max-width: 240px;
    }
  
    .past-meta-row {
      max-width: var(--max);
      margin: 56px auto 0;
      padding-top: 24px;
      display: flex;
      justify-content: flex-end;
      align-items: baseline;
    }
  
    .past-meta-row .meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .past-meta-row .link-ghost {
      color: var(--wine);
      padding-bottom: 2px;
      border-bottom: 1px solid var(--wine);
      transition: color .25s, border-color .25s;
      margin-left: 4px;
    }
  
    .past-meta-row .link-ghost:hover {
      color: var(--wine-deep);
      border-color: var(--wine-deep);
    }
  
    /* METHOD (v5) */
    .method {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--paper);
      position: relative;
    }
  
    .method-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .method-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 100px;
    }
  
    .method-head .meta-col {
      grid-column: span 4;
    }
  
    .method-head .title-col {
      grid-column: span 8;
    }
  
    .method-kicker {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(22px, 2.6vw, 32px);
      color: var(--wine);
      margin-bottom: 16px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .method-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5.5vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
  
    .method-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .method-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .method-head .meta-col,
      .method-head .title-col {
        grid-column: span 12;
      }
    }
  
    .method-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      padding-top: 20px;
      position: relative;
    }
  
    @media (max-width: 900px) {
      .method-steps {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }
  
    .method-step {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      padding-right: 16px;
    }
  
    .method-step:not(:last-child)::after {
      content: none;
    }
  
    @media (max-width: 900px) {
      .method-step::after {
        display: none !important;
      }
    }
  
    .method-step-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 0.95;
      font-weight: 300;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      letter-spacing: -0.02em;
    }
  
    .method-step-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .method-step-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.25;
      letter-spacing: 0.005em;
    }
  
    .method-step-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(18px, 2vw, 22px);
      color: var(--muted);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .method-step-desc {
      font-family: var(--sans-jp);
      font-size: 14px;
      line-height: 1.9;
      color: var(--ink-2);
      max-width: 400px;
    }
  
    .method-step-tags {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
  
    .method-step-tag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 4px 10px;
      border: 1px solid var(--rule);
      border-radius: 999px;
    }
  
    /* --- v8.18: Method → Why njoooy box 構造(添付コード準拠) --- */
    .why-njoooy {
      margin: 0 auto;
      padding: clamp(40px, 5vh, 72px) clamp(28px, 4vw, 56px);
      background: var(--surface);
      border: 1px solid var(--rule);
      max-width: var(--max);
      border-radius: 2px;
    }
  
    .why-head {
      text-align: center;
      margin-bottom: clamp(32px, 4vh, 48px);
    }
  
    .why-head .meta {
      color: var(--wine);
      letter-spacing: 0.22em;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
    }
  
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3vw, 48px);
    }
  
    @media (max-width: 900px) {
      .why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
  
    .why-item {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
  
    .why-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 40px;
      color: var(--gold);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      font-weight: 300;
      line-height: 1;
    }
  
    .why-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(18px, 1.6vw, 22px);
      line-height: 1.45;
      letter-spacing: -0.005em;
      color: var(--ink);
    }
  
    .why-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 500;
    }
  
    .why-desc {
      font-family: var(--sans-jp);
      font-size: 13.5px;
      line-height: 1.9;
      color: var(--ink-2);
    }
  
    .method-sign {
      margin-top: 80px;
      padding-top: 40px;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      align-items: baseline;
    }
  
    .method-sign-brand {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 30px);
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .method-sign-brand .logo {
      font-size: inherit;
    }
  
    /* How We Work — v7.4 merged Process+Method section
         3 phase cards: each shows craft (philosophy) + business (logistics) unified */
    .howwework {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--paper);
      position: relative;
    }
  
    .howwework-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .howwework-kicker {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--wine);
      text-align: center;
      margin-bottom: 20px;
    }
  
    .howwework-desc {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      max-width: 620px;
    }
  
    .phases {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--rule);
    }
  
    .phase {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: clamp(24px, 4vw, 56px);
      padding: clamp(48px, 7vh, 80px) 0;
      border-bottom: 1px solid var(--rule);
      align-items: start;
    }
  
    @media (max-width: 780px) {
      .phase {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }
  
    .phase-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(72px, 8vw, 120px);
      line-height: 0.85;
      font-weight: 300;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      letter-spacing: -0.03em;
    }
  
    .phase-body {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
  
    .phase-header {
      display: flex;
      align-items: baseline;
      gap: 18px;
      flex-wrap: wrap;
    }
  
    .phase-jp {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height: 1.15;
      letter-spacing: -0.005em;
    }
  
    .phase-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(18px, 2vw, 24px);
      color: var(--muted);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      font-weight: 300;
    }
  
    .phase-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 40px);
    }
  
    @media (max-width: 780px) {
      .phase-content {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }
  
    .phase-cell {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  
    .phase-sublabel {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--wine);
      font-weight: 500;
    }
  
    .phase-craft-desc {
      font-family: var(--sans-jp);
      font-size: 14px;
      line-height: 1.95;
      color: var(--ink-2);
    }
  
    .phase-business-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .phase-business-list li {
      font-family: var(--sans-jp);
      font-size: 13px;
      line-height: 1.7;
      color: var(--ink-2);
      padding-left: 20px;
      position: relative;
    }
  
    .phase-business-list li::before {
      content: "→";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--wine);
      font-family: var(--serif-en);
      font-style: italic;
      opacity: 0.65;
    }
  
    .phase-business-list li strong {
      font-family: var(--serif-jp);
      font-weight: 600;
      color: var(--ink);
    }
  
    .phase-business-list li .en {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--muted);
      margin-left: 4px;
      font-size: 12px;
    }
  
    .phase-meta-row {
      display: flex;
      gap: 24px 32px;
      flex-wrap: wrap;
      align-items: baseline;
      padding-top: 16px;
      border-top: 1px solid rgba(107, 32, 36, 0.1);
    }
  
    .phase-timing {
      display: inline-flex;
      gap: 10px;
      align-items: baseline;
      flex-wrap: wrap;
    }
  
    .phase-timing-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .phase-timing-value {
      font-family: var(--serif-jp);
      font-size: 13px;
      color: var(--ink-2);
      font-weight: 500;
    }
  
    .phase-tags {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-left: auto;
    }
  
    .phase-tag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 4px 10px;
      border: 1px solid var(--rule);
      border-radius: 999px;
    }
  
    .howwework-sign {
      margin-top: 64px;
      padding-top: 40px;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      align-items: baseline;
    }
  
    .howwework-sign-brand {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 30px);
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .howwework-sign-brand .logo {
      font-size: inherit;
    }
  
    /* PHILOSOPHY */
    .philosophy {
      background: var(--ink);
      color: var(--paper);
      padding: clamp(120px, 18vh, 200px) 0 clamp(100px, 14vh, 160px);
      position: relative;
      overflow: hidden;
    }
  
    .philosophy-head {
      max-width: var(--max);
      margin: 0 auto 80px;
      padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }
  
    .philosophy-head .meta-col {
      grid-column: span 4;
    }
  
    .philosophy-head .title-col {
      grid-column: span 8;
    }
  
    .philosophy-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.15;
      color: var(--paper);
    }
  
    .philosophy-title em {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 400;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    @media (max-width: 900px) {
  
      .philosophy-head .meta-col,
      .philosophy-head .title-col {
        grid-column: span 12;
      }
    }
  
    .phil-rail {
      display: flex;
      gap: 32px;
      padding: 0 var(--gutter);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
  
    .phil-rail::-webkit-scrollbar {
      display: none;
    }
  
    .phil-card {
      flex: 0 0 auto;
      width: clamp(280px, 36vw, 440px);
      height: 520px;
      background: linear-gradient(180deg, rgba(245, 240, 230, 0.04) 0%, transparent 100%);
      border: 1px solid rgba(245, 240, 230, 0.15);
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      scroll-snap-align: start;
      transition: background .35s, border-color .35s, transform .35s;
    }
  
    .phil-card:hover {
      background: linear-gradient(180deg, rgba(245, 240, 230, 0.08) 0%, transparent 100%);
      border-color: rgba(194, 139, 91, 0.5);
      transform: translateY(-4px);
    }
  
    .phil-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(72px, 9vw, 120px);
      line-height: 0.9;
      font-weight: 300;
      color: var(--gold);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .phil-jp {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: clamp(24px, 2.8vw, 32px);
      color: var(--paper);
      letter-spacing: 0.02em;
      line-height: 1.35;
      margin-bottom: 16px;
    }
  
    .phil-en {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 18px;
      color: rgba(245, 240, 230, 0.6);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      margin-bottom: 24px;
    }
  
    .phil-desc {
      font-family: var(--sans-jp);
      font-size: 14px;
      line-height: 1.85;
      color: rgba(245, 240, 230, 0.8);
    }
  
    .phil-footer {
      max-width: var(--max);
      margin: 60px auto 0;
      padding: 0 var(--gutter);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
  
    /* ABOUT */
    .about-section {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--paper-2);
      position: relative;
    }
  
    .about-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .about-head-centered {
      text-align: center;
      max-width: 920px;
      margin: 0 auto clamp(60px, 8vh, 120px);
    }
  
    .about-head-centered .about-label {
      margin-bottom: 28px;
      margin-left: 0;
    }
  
    .about-head-centered .about-headline {
      margin-bottom: 0;
    }
  
    .about-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 32px;
      align-items: start;
    }
  
    .about-image {
      grid-column: 1 / span 3;
      aspect-ratio: 3 / 4;
      position: relative;
      overflow: hidden;
      background: var(--ink);
      border-radius: 2px;
      position: sticky;
      top: 80px;
    }
  
    .about-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 60% 40%, rgba(194, 139, 91, 0.3), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(107, 32, 36, 0.5), transparent 60%), linear-gradient(135deg, var(--ink) 0%, var(--wine-deep) 100%);
    }
  
    .about-image-label {
      position: absolute;
      bottom: 24px;
      left: 24px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.6);
      z-index: 2;
    }
  
    .about-image-num {
      position: absolute;
      top: 24px;
      right: 24px;
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 28px;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      z-index: 2;
    }
  
    .about-text {
      grid-column: 5 / span 8;
    }
  
    @media (max-width: 900px) {
      .about-image {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 10;
        position: relative;
        top: auto;
      }
  
      .about-text {
        grid-column: 1 / -1;
        margin-top: 32px;
      }
    }
  
    .about-label {
      margin-bottom: 24px;
    }
  
    .about-headline {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.15;
      margin-bottom: 40px;
    }
  
    .about-headline em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .about-body p {
      margin-bottom: 22px;
      font-size: 16px;
    }
  
    .about-pull {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.4;
      color: var(--wine);
      margin: 40px 0;
      padding-left: 20px;
      border-left: 2px solid var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    /* (.about-stats rules removed v7.4 — block deleted from markup) */
  
    /* ABOUT TIMELINE (v5) */
    .about-timeline {
      margin-top: 40px;
      padding-top: 8px;
    }
  
    .about-timeline-label {
      margin-bottom: 28px;
    }
  
    .about-timeline-list {
      position: relative;
      padding-left: 28px;
    }
  
    .about-timeline-list::before {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 5px;
      width: 1px;
      background: var(--rule);
    }
  
    .about-timeline-item {
      position: relative;
      padding-bottom: 28px;
    }
  
    .about-timeline-item::before {
      content: "";
      position: absolute;
      top: 8px;
      left: -24px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--wine);
      border: 2px solid var(--paper-2);
    }
  
    .about-timeline-item.current::before {
      background: var(--gold);
      animation: breathe 3.8s ease-in-out infinite;
    }
  
    /* v7.13 Founder block — user provided content for §5 */
    .founder-block {
      margin-bottom: 40px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--rule);
    }
  
    .founder-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
    }
  
    .founder-name {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(24px, 2.4vw, 32px);
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: var(--ink);
      margin-bottom: 8px;
    }
  
    .founder-name ruby {
      ruby-position: over;
    }
  
    .founder-name rt {
      font-size: 0.35em;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0.15em;
      font-family: var(--sans-jp);
    }
  
    .founder-meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--muted);
      margin-bottom: 20px;
    }
  
    .founder-bio {
      font-family: var(--serif-jp);
      font-size: 14px;
      line-height: 1.9;
      color: var(--ink-2);
    }
  
    .about-timeline-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 4px;
      line-height: 1.4;
    }
  
    .about-timeline-desc {
      font-family: var(--serif-jp);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.75;
      margin: 0;
    }
  
    .about-timeline-item.future::before {
      background: var(--paper-2);
      border-color: var(--muted-2);
    }
  
    .about-timeline-year {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 400;
      font-size: 22px;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 1.2;
    }
  
    .about-timeline-item.future .about-timeline-year {
      color: var(--muted-2);
    }
  
    .about-timeline-text {
      font-family: var(--sans-jp);
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.85;
      margin-top: 6px;
      max-width: 480px;
    }
  
    .about-timeline-item.future .about-timeline-text {
      color: var(--muted);
      font-style: italic;
    }
  
    /* [v8.30] about-voice 3 段落 scaffold — 弟さん素材受け皿(R-1/R-7 遵守、構造のみ Claude 用意、本文は弟さん確定待ち) */
    .about-voice {
      margin-top: 48px;
      padding-top: 8px;
      margin-bottom: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--rule);
    }
  
    .about-voice-label {
      margin-bottom: 32px;
    }
  
    .about-voice-list {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
  
    .about-voice-item {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
  
    .about-voice-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 32px;
      color: var(--gold);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      line-height: 1;
      min-width: 44px;
      flex-shrink: 0;
      padding-top: 4px;
    }
  
    .about-voice-body {
      flex: 1;
      min-width: 0;
    }
  
    .about-voice-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
      line-height: 1.5;
      margin: 0 0 10px 0;
      letter-spacing: 0.02em;
    }
  
    .about-voice-desc {
      font-family: var(--serif-jp);
      font-size: 13.5px;
      color: var(--ink-2);
      line-height: 1.95;
      margin: 0;
      max-width: 520px;
    }
  
    .about-voice-placeholder {
      color: var(--muted-2);
      font-style: italic;
      font-size: 12px;
      line-height: 1.75;
      letter-spacing: 0.01em;
      font-family: var(--sans-jp);
      font-weight: 400;
    }
  
    @media (max-width: 600px) {
      .about-voice-item {
        gap: 18px;
      }
  
      .about-voice-num {
        font-size: 26px;
        min-width: 36px;
      }
    }
  
    /* PAST CASE */
    .past {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--paper);
    }
  
    .past-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .past-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .past-head .meta-col {
      grid-column: span 4;
    }
  
    .past-head .title-col {
      grid-column: span 8;
    }
  
    .past-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.15;
    }
  
    .past-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .past-intro {
      margin-top: 28px;
      max-width: 560px;
      color: var(--ink-2);
    }
  
    @media (max-width: 900px) {
  
      .past-head .meta-col,
      .past-head .title-col {
        grid-column: span 12;
      }
    }
  
    .past-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
    }
  
    @media (max-width: 900px) {
      .past-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  
    @media (max-width: 600px) {
      .past-grid {
        grid-template-columns: 1fr;
      }
    }
  
    .past-card {
      aspect-ratio: 4/5;
      border: 1px dashed var(--muted-2);
      padding: 28px;
      background: rgba(250, 246, 236, 0.3);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: background .3s, border-color .3s, transform .3s;
    }
  
    .past-card:hover {
      background: var(--surface);
      border-color: var(--muted);
      transform: translateY(-2px);
    }
  
    .past-card-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
  
    .past-card-no {
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 40px;
      color: var(--muted-2);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 1;
    }
  
    .past-card-badge {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 4px 10px;
      border: 1px solid var(--muted-2);
      border-radius: 999px;
    }
  
    .past-card-mid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 24px 0;
    }
  
    .past-card-scope {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 18px;
      color: var(--muted);
      line-height: 1.5;
    }
  
    .past-card-date {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
  
    .past-card-foot {
      border-top: 1px dashed var(--muted-2);
      padding-top: 16px;
      font-family: var(--sans-jp);
      font-size: 12px;
      color: var(--muted-2);
      line-height: 1.7;
    }
  
    .past-card.reserved {
      border-style: solid;
      border-color: var(--wine);
      background: var(--surface);
      opacity: 1;
    }
  
    .past-card.reserved .past-card-no {
      color: var(--wine);
    }
  
    .past-card.reserved .past-card-scope {
      color: var(--ink);
    }
  
    .past-card.reserved .past-card-badge {
      color: var(--wine);
      border-color: var(--wine);
    }
  
    .past-meta-row {
      margin-top: 48px;
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
  
    /* §3 Process は 1 子要素のみ:space-between だと左寄せになるので右寄せに override */
    .process .past-meta-row {
      justify-content: flex-end;
    }
  
    /* FAQ */
    .faq {
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      background: var(--paper-2);
    }
  
    .faq-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .faq-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .faq-head .meta-col {
      grid-column: span 4;
    }
  
    .faq-head .title-col {
      grid-column: span 8;
    }
  
    /* ===== Standardized centered section heads (v7.1) =====
         Override grid layout: stack meta-col on top, title-col below, all centered.
         Applied to all section heads for visual rhythm consistency. */
    .fw-head,
    .archive-head,
    .process-head,
    .method-head,
    .past-head,
    .faq-head,
    .howwework-head {
      display: block;
      text-align: center;
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .howwework-head {
      margin-bottom: clamp(48px, 7vh, 80px);
    }
  
    .fw-head .meta-col,
    .archive-head .meta-col,
    .process-head .meta-col,
    .method-head .meta-col,
    .past-head .meta-col,
    .faq-head .meta-col {
      grid-column: unset;
      margin-bottom: 28px;
    }
  
    .fw-head .title-col,
    .archive-head .title-col,
    .process-head .title-col,
    .method-head .title-col,
    .past-head .title-col,
    .faq-head .title-col {
      grid-column: unset;
      margin: 0 auto;
    }
  
    .fw-desc,
    .archive-desc,
    .process-desc,
    .method-desc,
    .past-intro,
    .faq-desc {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      max-width: 600px;
    }
  
    /* method has a kicker that should also be centered */
    .method-kicker {
      text-align: center;
    }
  
    /* philosophy-head no longer exists post v7, but leave rule harmless if re-added */
    .faq-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5vw, 64px);
      line-height: 1.15;
    }
  
    .faq-title em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--wine);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .faq-desc {
      margin-top: 32px;
      max-width: 560px;
    }
  
    @media (max-width: 900px) {
  
      .faq-head .meta-col,
      .faq-head .title-col {
        grid-column: span 12;
      }
    }
  
    .faq-list {
      border-top: 1px solid var(--rule);
    }
  
    .faq-item {
      border-bottom: 1px solid var(--rule);
    }
  
    .faq-summary {
      padding: 28px 0;
      display: grid;
      grid-template-columns: 60px 1fr 40px;
      gap: 24px;
      align-items: baseline;
    }
  
    .faq-q-num {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      color: var(--muted);
      text-transform: uppercase;
      padding-top: 6px;
    }
  
    .faq-q {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: clamp(18px, 2vw, 22px);
      color: var(--ink);
      line-height: 1.5;
    }
  
    .faq-q .faq-q-en {
      display: block;
      font-family: var(--serif-en);
      font-style: italic;
      font-weight: 300;
      font-size: 14px;
      color: var(--muted);
      margin-top: 4px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .faq-summary:hover .faq-q {
      color: var(--wine);
    }
  
    .faq-a {
      padding: 0 64px 32px 84px;
      font-family: var(--sans-jp);
      font-size: 14px;
      line-height: 1.95;
      color: var(--ink-2);
      max-width: 800px;
    }
  
    @media (max-width: 720px) {
      .faq-summary {
        grid-template-columns: 44px 1fr 28px;
        gap: 12px;
      }
  
      .faq-a {
        padding: 0 28px 24px 56px;
      }
    }
  
    /* CONTACT */
    .contact {
      background: var(--wine);
      color: var(--paper);
      padding: clamp(120px, 18vh, 200px) var(--gutter);
      position: relative;
      overflow: hidden;
    }
  
    .contact::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 20% 20%, var(--wine-deep) 0%, transparent 55%), radial-gradient(ellipse at 85% 85%, rgba(194, 139, 91, 0.15) 0%, transparent 55%);
      pointer-events: none;
    }
  
    .contact-inner {
      max-width: var(--max);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
  
    .contact-head {
      margin: 0 auto 80px;
      text-align: center;
      max-width: 920px;
    }
  
    .contact-label {
      color: rgba(245, 240, 230, 0.7);
      margin-bottom: 24px;
    }
  
    .contact-headline {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(52px, 9vw, 140px);
      line-height: 1.08;
      color: var(--paper);
      letter-spacing: -0.015em;
    }
  
    .contact-headline em {
      font-family: var(--serif-en);
      font-style: italic;
      color: var(--gold-bright);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .contact-body {
      margin-top: 32px;
      color: rgba(245, 240, 230, 0.75);
      max-width: 600px;
      font-size: 15px;
      line-height: 1.9;
      margin-left: auto;
      margin-right: auto;
    }
  
    .contact-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 80px;
    }
  
    @media (max-width: 720px) {
      .contact-cards {
        grid-template-columns: 1fr;
      }
    }
  
    .contact-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      border: 1px solid rgba(245, 240, 230, 0.2);
      background: rgba(15, 12, 8, 0.25);
      transition: background .3s, border-color .3s;
    }
  
    .contact-card:hover {
      background: rgba(15, 12, 8, 0.4);
      border-color: var(--gold-bright);
    }
  
    .contact-card-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.6);
      margin-bottom: 12px;
    }
  
    .contact-card-value {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: clamp(24px, 3vw, 34px);
      color: var(--paper);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .contact-card-note {
      font-family: var(--sans-jp);
      font-size: 12px;
      color: rgba(245, 240, 230, 0.5);
      margin-top: 8px;
    }
  
    .contact-card-arrow {
      font-family: var(--serif-en);
      font-size: 32px;
      color: var(--gold-bright);
      transition: transform .25s;
    }
  
    .contact-card:hover .contact-card-arrow {
      transform: translateX(8px);
    }
  
    /* Contact form (v7.5) — placeholder markup, will wire to Formspree */
    .contact-form-wrap {
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid rgba(245, 240, 230, 0.18);
    }
  
    .contact-form-label {
      color: rgba(245, 240, 230, 0.65);
      margin-bottom: 28px;
      letter-spacing: 0.22em;
    }
  
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 32px;
      max-width: 720px;
    }
  
    .contact-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px 20px;
    }
  
    @media (max-width: 720px) {
      .contact-form-grid {
        grid-template-columns: 1fr;
      }
    }
  
    .contact-form-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  
    .contact-form-field-full {
      grid-column: 1 / -1;
    }
  
    .contact-form-lbl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.7);
    }
  
    .contact-form-lbl .req {
      color: var(--gold-bright);
      margin-left: 4px;
    }
  
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      padding: 14px 16px;
      background: rgba(245, 240, 230, 0.06);
      border: 1px solid rgba(245, 240, 230, 0.16);
      border-radius: 2px;
      color: var(--paper);
      font-family: var(--serif-jp);
      font-size: 15px;
      line-height: 1.5;
      transition: border-color .2s, background .2s, box-shadow .2s;
    }
  
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(245, 240, 230, 0.35);
    }
  
    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--gold-bright);
      background: rgba(245, 240, 230, 0.09);
      box-shadow: 0 0 0 3px rgba(224, 176, 128, 0.12);
    }
  
    .contact-form textarea {
      resize: vertical;
      font-family: var(--sans-jp);
    }
  
    .contact-form select {
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, rgba(245, 240, 230, 0.6) 50%), linear-gradient(135deg, rgba(245, 240, 230, 0.6) 50%, transparent 50%);
      background-position: calc(100% - 20px) center, calc(100% - 14px) center;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 40px;
    }
  
    .contact-form-actions {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
  
    .contact-form-submit {
      padding: 16px 28px;
      background: var(--paper);
      color: var(--ink);
      border: none;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      transition: background .25s, color .25s, transform .2s;
    }
  
    .contact-form-submit:hover {
      background: var(--gold-bright);
      transform: translateY(-1px);
    }
  
    .contact-form-note-inline {
      font-family: var(--sans-jp);
      font-size: 12px;
      color: rgba(245, 240, 230, 0.65);
      line-height: 1.6;
    }
  
    /* v7.10: submit loading state */
    .contact-form-submit:disabled {
      background: rgba(245, 240, 230, 0.35);
      color: rgba(28, 23, 18, 0.5);
      cursor: not-allowed;
      transform: none;
    }
  
    /* v7.10: inline success / error status message for Web3Forms submission */
    .contact-form-status {
      font-family: var(--sans-jp);
      font-size: 14px;
      line-height: 1.7;
      min-height: 0;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity .3s ease, max-height .3s ease, padding .3s ease, margin .3s ease;
      padding: 0;
      margin: 0;
    }
  
    .contact-form-status:not(:empty) {
      opacity: 1;
      max-height: 120px;
      margin-top: 8px;
      padding: 14px 18px;
      border-radius: 2px;
    }
  
    .contact-form-status.is-success {
      background: rgba(224, 176, 128, 0.12);
      border-left: 3px solid var(--gold-bright);
      color: rgba(245, 240, 230, 0.95);
    }
  
    .contact-form-status.is-error {
      background: rgba(138, 59, 63, 0.18);
      border-left: 3px solid var(--wine-bright);
      color: rgba(245, 240, 230, 0.95);
    }
  
    /* v7.10: inactive link styling (Instagram 準備中 など) */
    [data-inactive="true"] {
      cursor: default;
      opacity: 0.7;
    }
  
    [data-inactive="true"]:hover {
      opacity: 0.85;
    }
  
    /* FOOTER */
    footer {
      background: var(--ink-deep);
      color: var(--paper);
      padding: clamp(80px, 12vh, 120px) var(--gutter) 40px;
    }
  
    .footer-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .footer-top {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 32px;
      margin-bottom: 80px;
      align-items: start;
    }
  
    .footer-logo-col {
      grid-column: span 6;
    }
  
    .footer-col {
      grid-column: span 2;
    }
  
    .footer-col-ch {
      grid-column: 9 / span 2;
    }
  
    .footer-col-lg {
      grid-column: 11 / span 2;
    }
  
    @media (max-width: 900px) {
      .footer-logo-col {
        grid-column: 1 / -1;
      }
  
      .footer-col,
      .footer-col-ch,
      .footer-col-lg {
        grid-column: span 6;
      }
    }
  
    .footer-logo {
      font-family: var(--serif-en);
      font-size: clamp(72px, 12vw, 160px);
      font-weight: 300;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
      line-height: 0.85;
      color: var(--paper);
      letter-spacing: -0.04em;
      display: inline-flex;
      align-items: baseline;
    }
  
    .footer-logo .mark {
      display: inline-block;
      width: 0.18em;
      height: 0.18em;
      background: var(--gold);
      border-radius: 50%;
      margin-left: 0.04em;
      align-self: flex-end;
      margin-bottom: 0.08em;
      animation: breathe 4s ease-in-out infinite;
    }
  
    .footer-tagline {
      margin-top: 24px;
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 20px;
      color: rgba(245, 240, 230, 0.6);
      max-width: 480px;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .footer-col .label {
      color: rgba(245, 240, 230, 0.5);
      margin-bottom: 18px;
    }
  
    .footer-col ul {
      list-style: none;
    }
  
    .footer-col li {
      margin-bottom: 10px;
    }
  
    .footer-col a {
      font-family: var(--sans-jp);
      font-size: 13px;
      color: var(--paper);
      transition: color .2s;
    }
  
    .footer-col a:hover {
      color: var(--gold-bright);
    }
  
    .footer-col .muted {
      color: rgba(245, 240, 230, 0.45);
    }
  
    .footer-bottom {
      border-top: 1px solid rgba(245, 240, 230, 0.12);
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
  
    .footer-bottom div {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.45);
    }
  
    /* [v7.7 Track C] Skip link — Tab で最初に focus 時のみ可視、キーボードユーザー向け */
    .skip-link {
      position: absolute;
      top: 0;
      left: 0;
      padding: 12px 22px;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      transform: translateY(-120%);
      transition: transform .2s ease;
      z-index: 10000;
      border-bottom-right-radius: 3px;
    }
  
    .skip-link:focus,
    .skip-link:focus-visible {
      transform: translateY(0);
      outline: 2px solid var(--gold-bright);
      outline-offset: 3px;
    }
  
    /* [v7.7 Track C] Focus-visible ring — キーボードナビゲーション時のみ可視、cursor:none 環境対応 */
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--gold-bright);
      outline-offset: 3px;
    }
  
    /* Form inputs: 既存の :focus スタイルを活かしつつ、キーボード操作時のみ outline を可視化 */
    .contact-form input:focus-visible,
    .contact-form select:focus-visible,
    .contact-form textarea:focus-visible {
      outline: 2px solid var(--gold-bright);
      outline-offset: 2px;
    }
  
    /* <main id="top" tabindex="-1"> は skip-link の遷移先、focus 時の outline は不要 */
    main:focus,
    main:focus-visible {
      outline: none;
    }
  
    @media (prefers-reduced-motion: reduce) {
      .kin>span {
        animation: none;
        transform: none;
      }
  
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
  
      .marquee-track {
        animation-duration: 80s;
      }
  
      .logo .mark,
      .wordmark-logo .mark,
      .footer-logo .mark,
      .about-timeline-item.current::before {
        animation: none;
      }
  
      .preloader-half-top,
      .preloader-half-bot {
        animation-delay: 0s;
        animation-duration: .3s;
      }
  
      .preloader-wordmark {
        animation: none;
      }
    }
  
    /* v8.0 §6 FAQ — 持ち込み LP そのまま(2-col layout、faq-side + faq-list) */
    .faq {
      padding: clamp(100px, 14vh, 160px) var(--gutter);
      background: var(--paper);
    }
  
    .faq .section-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .faq-layout {
      display: grid;
      grid-template-columns: 0.9fr 1.4fr;
      gap: 72px;
      align-items: start;
    }
  
    @media (max-width: 900px) {
      .faq-layout {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }
  
    .faq-side .section-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--wine);
      margin-bottom: 20px;
    }
  
    .faq-side .section-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(30px, 3.6vw, 44px);
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 28px;
      letter-spacing: 0.01em;
    }
  
    .faq-side p {
      font-family: var(--serif-jp);
      font-size: 13px;
      line-height: 1.95;
      color: var(--ink-2);
      margin-bottom: 8px;
    }
  
    .faq-contact-cta {
      margin-top: 32px;
      padding: 0;
      background: transparent;
      border: none;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
  
    .faq-contact-cta .icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      color: var(--wine);
      margin-top: 2px;
    }
  
    .faq-contact-cta .icon svg {
      width: 100%;
      height: 100%;
    }
  
    .faq-contact-cta-text {
      font-family: var(--serif-jp);
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.7;
      margin-bottom: 6px;
    }
  
    .faq-contact-cta a {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--wine);
      padding-bottom: 2px;
      border-bottom: 1px solid var(--wine);
      display: inline-block;
      transition: color .25s, border-color .25s;
    }
  
    .faq-contact-cta a:hover {
      color: var(--wine-deep);
      border-color: var(--wine-deep);
    }
  
    .faq-list {
      border-top: 1px solid var(--rule);
    }
  
    .faq-item {
      border-bottom: 1px solid var(--rule);
    }
  
    .faq-q {
      list-style: none;
      cursor: pointer;
      padding: 22px 4px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: color .25s;
    }
  
    .faq-q::-webkit-details-marker {
      display: none;
    }
  
    .faq-q:hover {
      color: var(--wine);
    }
  
    .faq-num {
      font-family: var(--serif-en);
      font-style: italic;
      font-size: 22px;
      color: var(--gold);
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
      min-width: 44px;
      line-height: 1;
      font-weight: 300;
    }
  
    .faq-q-text {
      flex: 1;
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink);
    }
  
    /* §6 faq-toggle: chevron-down, no circle (v8.1) */
    .faq-toggle {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
      transition: transform .35s ease;
      background: transparent;
      border: none;
      border-radius: 0;
    }
  
    .faq-toggle::before,
    .faq-toggle::after {
      content: "";
      position: absolute;
      top: 6px;
      background: var(--muted);
      width: 10px;
      height: 1.5px;
      transition: background .25s, transform .35s ease;
      transform-origin: 50% 50%;
    }
  
    .faq-toggle::before {
      left: -1px;
      transform: rotate(40deg);
    }
  
    .faq-toggle::after {
      right: -1px;
      transform: rotate(-40deg);
    }
  
    details[open] .faq-q {
      color: var(--wine);
    }
  
    details[open] .faq-q .faq-num {
      color: var(--wine);
    }
  
    details[open] .faq-toggle {
      transform: rotate(180deg);
    }
  
    details[open] .faq-toggle::before,
    details[open] .faq-toggle::after {
      background: var(--wine);
    }
  
    .faq-a {
      padding: 0 4px 28px 60px;
      font-family: var(--serif-jp);
      font-size: 13px;
      line-height: 1.95;
      color: var(--ink-2);
    }
  
    @media (max-width: 720px) {
      .faq-a {
        padding-left: 4px;
      }
  
      .faq-q {
        gap: 12px;
        padding: 18px 4px;
      }
  
      .faq-num {
        min-width: 34px;
        font-size: 18px;
      }
  
      .faq-q-text {
        font-size: 14px;
      }
    }
  
    /* v8.0 §7 Contact — 持ち込み LP そのまま(2-col: contact-left + contact-form) */
    .contact {
      padding: clamp(100px, 14vh, 160px) var(--gutter);
      background: var(--wine);
      color: var(--paper);
      overflow: visible;
      position: relative;
    }
  
    /* §1 .archive と同じく背景装飾無し — 旧 v7.10 の wine radial-gradient overlay (::before) を無効化 */
    .contact::before {
      display: none !important;
      content: none !important;
    }
  
    .contact .noise-overlay {
      display: none;
    }
  
    .contact-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.9fr 1.4fr;
      gap: 72px;
      align-items: start;
    }
  
    @media (max-width: 900px) {
      .contact-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }
  
    .contact-left .section-kicker {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--wine);
      margin-bottom: 20px;
    }
  
    .contact-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(30px, 3.6vw, 44px);
      line-height: 1.25;
      color: var(--ink);
      margin-bottom: 8px;
      letter-spacing: 0.01em;
    }
  
    .contact-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0 24px;
      max-width: 120px;
    }
  
    .contact-divider .line {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }
  
    .contact-divider .diamond {
      width: 7px;
      height: 7px;
      background: var(--wine);
      transform: rotate(45deg);
    }
  
    .contact-lead {
      font-family: var(--serif-jp);
      font-size: 13px;
      line-height: 1.95;
      color: var(--ink-2);
      margin-bottom: 32px;
    }
  
    .contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--serif-jp);
      font-size: 14px;
      color: var(--ink);
      padding: 12px 0;
      border-bottom: 1px solid var(--rule);
      transition: color .25s;
    }
  
    .contact-item:first-of-type {
      border-top: 1px solid var(--rule);
    }
  
    .contact-item:hover {
      color: var(--wine);
    }
  
    .contact-item:hover svg {
      color: var(--wine);
    }
  
    .contact-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      color: var(--wine);
      transition: color .25s;
    }
  
    .contact-item[aria-disabled="true"] {
      opacity: 0.55;
      cursor: not-allowed;
    }
  
    .contact-note {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--muted);
      margin-top: 20px;
      letter-spacing: 0.15em;
    }
  
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
  
    .form-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
  
    .form-row label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
    }
  
    .form-row input,
    .form-row select,
    .form-row textarea {
      font-family: var(--serif-jp);
      font-size: 14px;
      color: var(--ink);
      background: #FBF7ED;
      border: 1px solid rgba(27, 18, 14, 0.1);
      border-radius: 2px;
      padding: 11px 14px;
      width: 100%;
      transition: border-color .25s;
      box-sizing: border-box;
    }
  
    .form-row input:focus,
    .form-row select:focus,
    .form-row textarea:focus {
      border-color: var(--wine);
      outline: none;
    }
  
    .form-row textarea {
      resize: vertical;
      line-height: 1.7;
      min-height: 120px;
    }
  
    .form-row .with-suffix {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .form-row .with-suffix input {
      flex: 1;
    }
  
    .form-row .with-suffix .suffix {
      font-family: var(--serif-jp);
      font-size: 13px;
      color: var(--muted);
      white-space: nowrap;
    }
  
    .form-row.tall>div {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
  
    .form-textarea-count {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      text-align: right;
      letter-spacing: 0.1em;
    }
  
    .form-submit {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--paper);
      background: var(--wine);
      border: 1px solid var(--wine);
      padding: 14px 32px;
      border-radius: 2px;
      cursor: pointer;
      transition: background .25s, border-color .25s;
      align-self: flex-start;
      margin-top: 8px;
    }
  
    .form-submit:hover {
      background: var(--wine-deep);
      border-color: var(--wine-deep);
    }
  
    .contact-form-status {
      font-family: var(--sans-jp);
      font-size: 13px;
      color: var(--ink-2);
      min-height: 20px;
    }
  
    .contact-form-status.success {
      color: var(--wine);
    }
  
    .contact-form-status.error {
      color: #B84848;
    }
  
  
  
    /* v8.1 §7 Contact wine theme — 各要素の文字・フォーム色を暗 BG 用に調整 */
    .contact .section-kicker {
      color: var(--gold-bright);
    }
  
    .contact-title {
      color: var(--paper);
    }
  
    .contact-divider .line {
      background: rgba(245, 240, 230, 0.2);
    }
  
    .contact-divider .diamond {
      background: var(--gold-bright);
    }
  
    .contact-lead {
      color: rgba(245, 240, 230, 0.8);
    }
  
    .contact-item {
      color: var(--paper);
      border-bottom-color: rgba(245, 240, 230, 0.15);
    }
  
    .contact-item:first-of-type {
      border-top-color: rgba(245, 240, 230, 0.15);
    }
  
    .contact-item:hover {
      color: var(--gold-bright);
    }
  
    .contact-item svg {
      color: var(--gold-bright);
    }
  
    .contact-item:hover svg {
      color: var(--gold-bright);
    }
  
    .contact-note {
      color: rgba(245, 240, 230, 0.55);
    }
  
    /* フォーム要素を暗 BG 上で読める配色に */
    .contact-form .form-row label {
      color: rgba(245, 240, 230, 0.7);
    }
  
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      background: rgba(15, 12, 8, 0.35);
      border-color: rgba(245, 240, 230, 0.2);
      color: var(--paper);
    }
  
    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(245, 240, 230, 0.35);
    }
  
    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      border-color: var(--gold-bright);
      background: rgba(15, 12, 8, 0.5);
    }
  
    .contact-form .with-suffix .suffix {
      color: rgba(245, 240, 230, 0.6);
    }
  
    .form-textarea-count {
      color: rgba(245, 240, 230, 0.4);
    }
  
    .form-submit {
      background: var(--gold-bright);
      border-color: var(--gold-bright);
      color: var(--ink);
    }
  
    .form-submit:hover {
      background: var(--paper);
      border-color: var(--paper);
      color: var(--ink);
    }
  
    .contact-form-status {
      color: rgba(245, 240, 230, 0.7);
    }
  
    .contact-form-status.success {
      color: var(--gold-bright);
    }
  
    .contact-form-status.error {
      color: #FF9090;
    }
  
    /* v8.26: ラジオボタングループ(contact form 内) */
    .contact-form .form-radio-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 2px;
    }
  
    @media (min-width: 720px) {
      .contact-form .form-radio-group {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  
    .contact-form .form-radio-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: rgba(15, 12, 8, 0.35);
      border: 1px solid rgba(245, 240, 230, 0.2);
      border-radius: 2px;
      cursor: pointer;
      transition: border-color .25s, background .25s;
      font-family: var(--serif-jp);
      font-size: 14px;
      color: rgba(245, 240, 230, 0.9);
      letter-spacing: 0;
      text-transform: none;
      flex: 1;
      min-width: 0;
      line-height: 1.4;
      margin-bottom: 0;
    }
  
    .contact-form .form-radio-item:hover {
      border-color: rgba(245, 240, 230, 0.4);
      background: rgba(15, 12, 8, 0.5);
    }
  
    .contact-form .form-radio-item:has(input:checked) {
      border-color: var(--gold-bright);
      background: rgba(224, 176, 128, 0.1);
    }
  
    .contact-form .form-radio-item input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      margin: 0;
      padding: 0;
      border: 1px solid rgba(245, 240, 230, 0.4);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      transition: border-color .25s, background .25s;
    }
  
    .contact-form .form-radio-item input[type="radio"]:checked {
      border-color: var(--gold-bright);
    }
  
    .contact-form .form-radio-item input[type="radio"]:checked::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold-bright);
    }
  
    .contact-form .form-radio-item span {
      flex: 1;
      line-height: 1.4;
    }
  
    /* v8.26: 面談希望日時 3 候補 */
    .contact-form .form-date-candidates {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  
    .contact-form .form-date-hint {
      font-family: var(--sans-jp);
      font-size: 11px;
      line-height: 1.7;
      color: rgba(245, 240, 230, 0.55);
      margin-top: 6px;
      letter-spacing: 0;
      text-transform: none;
    }
  
    /* v8.27: Meeting Picker — 自前カレンダー UI */
    .contact-form .meeting-picker {
      background: rgba(15, 12, 8, 0.28);
      border: 1px solid rgba(245, 240, 230, 0.16);
      border-radius: 2px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 2px;
    }
  
    /* Calendar header */
    .contact-form .meeting-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
  
    .contact-form .meeting-picker-nav {
      width: 34px;
      height: 34px;
      background: transparent;
      border: 1px solid rgba(245, 240, 230, 0.3);
      border-radius: 2px;
      color: rgba(245, 240, 230, 0.9);
      font-family: var(--serif-en);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      transition: border-color .2s, background .2s, color .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
  
    .contact-form .meeting-picker-nav:hover:not(:disabled) {
      border-color: var(--gold-bright);
      color: var(--gold-bright);
      background: rgba(224, 176, 128, 0.08);
    }
  
    .contact-form .meeting-picker-nav:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
  
    .contact-form .meeting-picker-month {
      font-family: var(--serif-jp);
      font-size: 15px;
      font-weight: 600;
      color: var(--paper);
      letter-spacing: 0.02em;
      flex: 1;
      text-align: center;
    }
  
    /* Weekday labels */
    .contact-form .meeting-picker-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
  
    .contact-form .meeting-picker-weekdays span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      color: rgba(245, 240, 230, 0.5);
      text-align: center;
      padding: 4px 0;
    }
  
    /* Day grid */
    .contact-form .meeting-picker-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
  
    .contact-form .mtg-day {
      aspect-ratio: 1 / 1;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;
      color: var(--paper);
      font-family: var(--serif-en);
      font-size: 13px;
      cursor: pointer;
      padding: 0;
      transition: border-color .2s, background .2s, color .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
  
    .contact-form .mtg-day:hover:not(:disabled):not(.mtg-day-empty) {
      border-color: rgba(245, 240, 230, 0.4);
      background: rgba(245, 240, 230, 0.06);
    }
  
    .contact-form .mtg-day-empty {
      cursor: default;
      border: none;
    }
  
    .contact-form .mtg-day-past {
      color: rgba(245, 240, 230, 0.2);
      cursor: not-allowed;
    }
  
    .contact-form .mtg-day-today {
      color: var(--gold-bright);
      font-weight: 600;
    }
  
    .contact-form .mtg-day-selected,
    .contact-form .mtg-day-selected:hover {
      background: var(--gold-bright);
      color: var(--ink);
      border-color: var(--gold-bright);
      font-weight: 600;
    }
  
    /* Time grid */
    .contact-form .meeting-picker-times {
      padding-top: 14px;
      border-top: 1px solid rgba(245, 240, 230, 0.1);
    }
  
    .contact-form .meeting-picker-times-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.6);
      margin-bottom: 12px;
    }
  
    .contact-form .meeting-picker-times-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
      gap: 6px;
    }
  
    .contact-form .meeting-picker-times-grid:empty {
      display: none;
    }
  
    .contact-form .mtg-time {
      padding: 10px 8px;
      background: rgba(15, 12, 8, 0.35);
      border: 1px solid rgba(245, 240, 230, 0.2);
      border-radius: 2px;
      color: rgba(245, 240, 230, 0.9);
      font-family: var(--serif-en);
      font-size: 13px;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: border-color .2s, background .2s, color .2s, transform .2s;
    }
  
    .contact-form .mtg-time:hover:not(.mtg-time-picked) {
      border-color: var(--gold-bright);
      color: var(--gold-bright);
    }
  
    .contact-form .mtg-time-picked {
      background: rgba(224, 176, 128, 0.2);
      border-color: var(--gold-bright);
      color: var(--gold-bright);
      font-weight: 600;
    }
  
    .contact-form .mtg-time-denied {
      animation: mtgDenyShake .35s;
    }
  
    @keyframes mtgDenyShake {
  
      0%,
      100% {
        transform: translateX(0);
      }
  
      25% {
        transform: translateX(-4px);
      }
  
      75% {
        transform: translateX(4px);
      }
    }
  
    /* Picked list */
    .contact-form .meeting-picker-picked {
      padding-top: 14px;
      border-top: 1px solid rgba(245, 240, 230, 0.1);
    }
  
    .contact-form .meeting-picker-picked-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.6);
      margin-bottom: 10px;
    }
  
    .contact-form .meeting-picker-picked-empty {
      font-family: var(--serif-jp);
      font-size: 13px;
      color: rgba(245, 240, 230, 0.4);
      padding: 6px 0;
    }
  
    .contact-form .meeting-picker-picked-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  
    .contact-form .meeting-picker-picked-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(224, 176, 128, 0.08);
      border: 1px solid rgba(224, 176, 128, 0.3);
      border-radius: 2px;
    }
  
    .contact-form .mtg-picked-no {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-bright);
      flex-shrink: 0;
      min-width: 54px;
    }
  
    .contact-form .mtg-picked-date {
      font-family: var(--serif-jp);
      font-size: 14px;
      color: var(--paper);
      flex: 1;
      line-height: 1.4;
    }
  
    .contact-form .mtg-picked-remove {
      background: transparent;
      border: none;
      color: rgba(245, 240, 230, 0.5);
      font-size: 14px;
      cursor: pointer;
      padding: 4px 8px;
      transition: color .2s;
      line-height: 1;
      flex-shrink: 0;
    }
  
    .contact-form .mtg-picked-remove:hover {
      color: var(--gold-bright);
    }
  
    /* v8.2 Unified section title format — 全セクションでタイトル下の divider + intro を統一 */
    /* 各セクションの .{prefix}-title.spaced rule は既存のタイトル CSS に依存、letter-spacing を追加 */
    .archive-title.spaced,
    .fw-title.spaced,
    .method-title.spaced,
    .about-title.spaced,
    .faq-title.spaced,
    .contact-title.spaced {
      letter-spacing: 0.04em;
    }
  
    /* Divider: line-diamond-line */
    .archive-divider,
    .fw-divider,
    .method-divider,
    .about-divider,
    .faq-divider,
    .contact-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0 24px;
      max-width: 180px;
    }
  
    .archive-divider .line,
    .fw-divider .line,
    .method-divider .line,
    .about-divider .line,
    .faq-divider .line,
    .contact-divider .line {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }
  
    .archive-divider .diamond,
    .fw-divider .diamond,
    .method-divider .diamond,
    .about-divider .diamond,
    .faq-divider .diamond,
    .contact-divider .diamond {
      width: 7px;
      height: 7px;
      background: var(--wine);
      transform: rotate(45deg);
    }
  
    /* Intro: unified paragraph style */
    .archive-intro,
    .fw-intro,
    .method-intro,
    .about-intro,
    .faq-intro {
      font-family: var(--serif-jp);
      font-size: 14px;
      line-height: 1.9;
      color: var(--ink-2);
      margin-top: 4px;
    }
  
    /* §5 About: rename styles to match new class names */
    .about-head {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      margin-bottom: 80px;
    }
  
    .about-head .meta-col {
      grid-column: span 4;
    }
  
    .about-head .title-col {
      grid-column: span 8;
    }
  
    @media (max-width: 900px) {
  
      .about-head .meta-col,
      .about-head .title-col {
        grid-column: span 12;
      }
    }
  
    .about-title {
      font-family: var(--serif-jp);
      font-weight: 600;
      font-size: clamp(36px, 5.5vw, 72px);
      line-height: 1.1;
      letter-spacing: -0.01em;
    }
  
    /* v8.18: about-intro を 1 行表示 */
    section.about-section .about-head .about-intro {
      white-space: nowrap;
      max-width: 100%;
      overflow: visible;
    }
  
    @media (max-width: 720px) {
      section.about-section .about-head .about-intro {
        white-space: normal;
      }
    }
  
    /* §7 Contact: contact-title.spaced override — dark bg adj */
    .contact .meta {
      color: var(--gold-bright);
      margin-bottom: 16px;
    }
  
    .contact-divider {
      margin: 16px 0 24px;
      max-width: 180px;
    }
  
    .contact-divider .line {
      background: rgba(245, 240, 230, 0.2);
    }
  
    .contact-divider .diamond {
      background: var(--gold-bright);
    }
  
    .contact-intro {
      font-family: var(--serif-jp);
      font-size: 14px;
      line-height: 1.9;
      color: rgba(245, 240, 230, 0.8);
      margin-top: 4px;
    }
  
    /* v8.2 Nav active indicator — 現在のセクションの nav link に下線(持ち込み LP 風) */
    .nav-links a {
      position: relative;
      padding-bottom: 2px;
      transition: color .25s, border-color .25s;
    }
  
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }
  
    .nav-links a.active::after,
    .nav-links a:hover::after {
      transform: scaleX(1);
    }
  
    .nav-links a.active {
      color: var(--paper);
    }
  
    .nav.light .nav-links a.active {
      color: var(--ink);
    }
  
  
    /* v8.3 Footer 刷新(持ち込み LP そのまま) — brand / follow / legal / copyright を centered stack */
    footer {
      background: var(--ink-deep);
      color: var(--paper);
      padding: clamp(32px, 4vh, 48px) var(--gutter) clamp(20px, 2.5vh, 28px);
    }
  
    .footer-inner {
      max-width: var(--max);
      margin: 0 auto;
    }
  
    .footer-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
  
    .footer-logo {
      font-family: var(--serif-en);
      font-weight: 300;
      font-size: clamp(48px, 7vw, 80px);
      color: var(--paper);
      letter-spacing: -0.03em;
      line-height: 1;
      font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }
  
    .footer-url {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.18em;
      color: rgba(245, 240, 230, 0.65);
      margin-top: 4px;
    }
  
    .footer-follow {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
  
    .footer-follow-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.55);
    }
  
    .footer-follow-link {
      display: inline-flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      color: var(--paper);
      border: 1px solid rgba(245, 240, 230, 0.2);
      border-radius: 50%;
      transition: color .25s, border-color .25s, background .25s;
    }
  
    .footer-follow-link:hover {
      color: var(--ink);
      background: var(--paper);
      border-color: var(--paper);
    }
  
    .footer-follow-link svg {
      width: 18px;
      height: 18px;
    }
  
    .footer-follow-link[aria-disabled="true"] {
      opacity: 0.55;
      cursor: not-allowed;
    }
  
    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      font-family: var(--sans-jp);
      font-size: 12px;
      line-height: 1.8;
    }
  
    .footer-legal a {
      color: rgba(245, 240, 230, 0.65);
      text-decoration: none;
      transition: color .25s;
      padding-bottom: 1px;
      border-bottom: 1px solid transparent;
    }
  
    .footer-legal a:hover {
      color: var(--paper);
      border-bottom-color: rgba(245, 240, 230, 0.4);
    }
  
    .footer-legal-sep {
      color: rgba(245, 240, 230, 0.25);
      user-select: none;
    }
  
    .footer-copyright {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: rgba(245, 240, 230, 0.4);
      margin-top: 8px;
      padding-top: 24px;
      border-top: 1px solid rgba(245, 240, 230, 0.08);
      width: 100%;
      max-width: 400px;
    }
  
    /* --- v8.9 new footer 2-col grid (参照サイト footer 構造輸入) --- */
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: start;
      padding-bottom: 56px;
    }
  
    @media (max-width: 720px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
  
    /* --- v8.11 footer-row: 1行ミニマル構造、縦位置揃え、email+note を block 化 --- */
    .footer-row {
      display: flex;
      align-items: center;
      gap: clamp(16px, 2.4vw, 28px);
      flex-wrap: wrap;
      padding-bottom: 22px;
    }
  
    .footer-row .footer-logo {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1;
    }
  
    .footer-email-block {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      min-height: 36px;
    }
  
    .footer-email-block .footer-email {
      margin: 0;
      padding-bottom: 0;
      border-bottom: 1px solid rgba(245, 240, 230, 0);
      transition: color .25s, border-bottom-color .25s;
      align-self: flex-start;
    }
  
    .footer-email-block .footer-email:hover {
      border-bottom-color: var(--gold-bright);
    }
  
    .footer-email-block .footer-email-note {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.04em;
      color: rgba(245, 240, 230, 0.5);
      line-height: 1.4;
    }
  
    @media (max-width: 720px) {
      .footer-row {
        gap: 14px;
        padding-bottom: 18px;
      }
    }
  
    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
  
    .footer-tagline {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 12.5px;
      letter-spacing: 0.08em;
      color: rgba(245, 240, 230, 0.72);
      line-height: 1.9;
      margin-top: 12px;
    }
  
    .footer-email {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: rgba(245, 240, 230, 0.9);
      transition: color .25s;
      margin-top: 18px;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(245, 240, 230, 0.2);
      align-self: flex-start;
      text-decoration: none;
    }
  
    .footer-email:hover {
      color: var(--gold-bright);
      border-bottom-color: var(--gold-bright);
    }
  
    .footer-email-note {
      font-family: var(--serif-jp);
      font-weight: 500;
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: rgba(245, 240, 230, 0.5);
      line-height: 1.7;
    }
  
    .footer-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 28px;
    }
  
    @media (max-width: 720px) {
      .footer-right {
        align-items: flex-start;
      }
    }
  
    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      justify-content: flex-end;
    }
  
    @media (max-width: 720px) {
      .footer-nav {
        justify-content: flex-start;
      }
    }
  
    .footer-nav a {
      color: rgba(245, 240, 230, 0.7);
      text-decoration: none;
      transition: color .25s;
    }
  
    .footer-nav a:hover {
      color: var(--gold-bright);
    }
  
    .footer-social {
      display: flex;
      gap: 10px;
    }
  
    .footer-social-icon {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(245, 240, 230, 0.22);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: rgba(245, 240, 230, 0.72);
      transition: color .25s, border-color .25s, background .25s;
    }
  
    .footer-social-icon:hover {
      color: var(--ink);
      background: var(--paper);
      border-color: var(--paper);
    }
  
    .footer-social-icon svg {
      width: 14px;
      height: 14px;
    }
  
    .footer-social-icon[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  
    .footer-social-icon[aria-disabled="true"]:hover {
      color: rgba(245, 240, 230, 0.72);
      background: transparent;
      border-color: rgba(245, 240, 230, 0.22);
    }
  
    /* .footer-bottom: bottom bar (既存 1040 行にも同名あり → 後勝ちで上書き) */
    .footer-bottom {
      border-top: 1px solid rgba(245, 240, 230, 0.14);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
  
    .footer-bottom .footer-copyright {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(245, 240, 230, 0.4);
      margin: 0;
      padding: 0;
      border: none;
      width: auto;
      max-width: none;
    }
  
    .footer-bottom .footer-legal {
      justify-content: flex-end;
      font-size: 11px;
    }
  
    @media (max-width: 720px) {
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
  
      .footer-bottom .footer-legal {
        justify-content: flex-start;
      }
    }
  
    /* footer 全体の padding を少し調整(下部 legal 行分) */
  
  
    /* v8.3 Unified centered heads — 全セクションが Process スタイル(中央揃え、同一タイポグラフィ)で表示 */
    /* 対象: .archive-head, .fw-head, .process-head, .method-head, .about-head, .faq-head, .contact-head */
    .archive-head,
    .fw-head,
    .process-head,
    .method-head,
    .about-head,
    .faq-head,
    .contact-head {
      display: block !important;
      grid-template-columns: none !important;
      text-align: center;
      max-width: 720px;
      margin: 0 auto clamp(56px, 8vh, 96px);
      padding: 0 var(--gutter);
      box-sizing: border-box;
    }
  
    /* Meta kicker (統一) */
    .archive-head .meta,
    .fw-head .meta,
    .process-head .meta,
    .method-head .meta,
    .about-head .meta,
    .faq-head .meta,
    .contact-head .meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--wine);
      margin-bottom: 20px;
      display: block;
    }
  
    /* meta-col wrapper の標準化(grid レイアウトを完全解除) */
    .archive-head .meta-col,
    .fw-head .meta-col,
    .method-head .meta-col,
    .about-head .meta-col,
    .process-head .meta-col {
      display: block !important;
      grid-column: unset !important;
      margin: 0 0 20px !important;
    }
  
    .archive-head .title-col,
    .fw-head .title-col,
    .method-head .title-col,
    .about-head .title-col,
    .process-head .title-col {
      display: block !important;
      grid-column: unset !important;
      margin: 0 auto !important;
    }
  
    /* Title (統一: Process と同じ size/letter-spacing) */
    .archive-title.spaced,
    .fw-title.spaced,
    .process-title.spaced,
    .method-title.spaced,
    .about-title.spaced,
    .faq-title.spaced,
    .contact-title.spaced {
      font-family: var(--serif-jp) !important;
      font-weight: 600 !important;
      font-size: clamp(30px, 4.2vw, 52px) !important;
      line-height: 1.2 !important;
      letter-spacing: 0.04em !important;
      color: var(--ink);
      text-align: center;
      margin: 0;
    }
  
    /* Divider (統一) */
    .archive-divider,
    .fw-divider,
    .process-divider,
    .method-divider,
    .about-divider,
    .faq-divider,
    .contact-divider {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      gap: 12px;
      margin: 20px auto 0 !important;
      max-width: 180px !important;
    }
  
    .archive-divider .line,
    .fw-divider .line,
    .process-divider .line,
    .method-divider .line,
    .about-divider .line,
    .faq-divider .line,
    .contact-divider .line {
      flex: 1;
      height: 1px;
      background: var(--rule);
    }
  
    .archive-divider .diamond,
    .fw-divider .diamond,
    .process-divider .diamond,
    .method-divider .diamond,
    .about-divider .diamond,
    .faq-divider .diamond,
    .contact-divider .diamond {
      width: 7px;
      height: 7px;
      background: var(--wine);
      transform: rotate(45deg);
    }
  
    /* Intro (統一) */
    .archive-intro,
    .fw-intro,
    .process-intro,
    .method-intro,
    .about-intro,
    .faq-intro,
    .contact-intro {
      font-family: var(--serif-jp) !important;
      font-size: 14px !important;
      line-height: 1.9 !important;
      color: var(--ink-2) !important;
      margin: 24px auto 0 !important;
      max-width: 600px;
      text-align: center !important;
    }
  
    /* §7 Contact wine theme override for head colors */
    .contact-head .meta {
      color: var(--gold-bright);
    }
  
    .contact-title.spaced {
      color: var(--paper) !important;
    }
  
    .contact-divider .line {
      background: rgba(245, 240, 230, 0.2) !important;
    }
  
    .contact-divider .diamond {
      background: var(--gold-bright) !important;
    }
  
    .contact-intro {
      color: rgba(245, 240, 230, 0.8) !important;
    }
  
    .contact-head {
      margin-bottom: clamp(48px, 6vh, 72px) !important;
    }
  
    /* §6 faq-body: 単一 column 中央、幅制限 */
    .faq-layout {
      display: none;
    }
  
    /* 旧 2-col layout 無効化 */
    .faq-body {
      max-width: 820px;
      margin: 0 auto;
    }
  
    .faq-body .faq-list {
      border-top: 1px solid var(--rule);
    }
  
    /* §6 faq-contact-cta 中央 block */
    section.faq .faq-contact-cta {
      max-width: 560px;
      margin: 40px auto 0;
      padding: 0;
      background: transparent;
      border: none;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      justify-content: center;
      text-align: left;
    }
  
    /* §7 contact-inner の 2-col は維持、head は上に独立 */
    section.contact .contact-inner {
      margin-top: 0;
    }
  
  
    /* v8.4 セクション spacing 半減 — 前セクション終端〜次セクション title の垂直空間を半分に */
    .archive,
    .for-whom,
    .process,
    .method,
    .about-section,
    .past,
    .faq,
    .contact {
      padding-top: clamp(60px, 9vh, 100px) !important;
      padding-bottom: clamp(40px, 6vh, 70px) !important;
    }
  
    .opening {
      padding-top: clamp(80px, 11vh, 120px) !important;
      padding-bottom: clamp(40px, 5vh, 60px) !important;
      justify-content: flex-start !important;
    }
  
    /* v8.4 opening-top(Est. 2026)の margin-bottom を拡大 → Est. は上、以降のコンポーネントは下 */
    .opening .opening-top {
      margin-bottom: clamp(140px, 18vh, 220px) !important;
      padding-top: 0 !important;
    }
  
    .archive-head,
    .fw-head,
    .process-head,
    .method-head,
    .about-head,
    .faq-head,
    .contact-head {
      margin-bottom: clamp(28px, 4vh, 48px) !important;
    }
  
    /* v8.4 §7 Contact form を中央配置(2-col 廃止)*/
    section.contact .contact-inner {
      display: block !important;
      max-width: 640px !important;
      margin: 0 auto !important;
      grid-template-columns: none !important;
    }
  
    section.contact .contact-form {
      margin: 0 auto;
      max-width: 640px;
    }
  
    /* v8.4 Footer contacts block — email/Instagram/note */
    .footer-contacts {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  
    .footer-contacts .footer-follow-label {
      margin-bottom: 4px;
    }
  
    .footer-contact-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
      color: rgba(245, 240, 230, 0.85);
      font-family: var(--serif-jp);
      font-size: 13px;
      transition: color .25s;
    }
  
    .footer-contact-item:hover {
      color: var(--paper);
    }
  
    .footer-contact-item[aria-disabled="true"] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  
    .footer-contact-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
  
    .footer-contact-item span {
      letter-spacing: 0.02em;
    }
  
    .footer-contact-note {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      color: rgba(245, 240, 230, 0.45);
      margin-top: 8px;
      text-transform: none;
    }
  
    /* v8.4 §1 archive 中央揃え強制 — grid 解除 + 全子要素 block + text-align center */
    section.archive .archive-head {
      display: block !important;
      grid-template-columns: none !important;
      text-align: center !important;
      max-width: 720px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  
    section.archive .archive-head .meta-col {
      display: block !important;
      grid-column: unset !important;
      width: auto !important;
      max-width: none !important;
      margin: 0 0 20px 0 !important;
      padding: 0 !important;
      text-align: center !important;
    }
  
    section.archive .archive-head .title-col {
      display: block !important;
      grid-column: unset !important;
      width: auto !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      text-align: center !important;
    }
  
    section.archive .archive-head .meta {
      text-align: center !important;
      display: block !important;
    }
  
    section.archive .archive-head h2.archive-title {
      text-align: center !important;
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
    }
  
    section.archive .archive-head .archive-divider {
      justify-content: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
    section.archive .archive-head .archive-desc,
    section.archive .archive-head .archive-intro {
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
    /* v8.4 §7 Contact 送信ボタン中央配置 */
    section.contact .contact-form .form-submit {
      align-self: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
    }