/*
Theme Name: yohaku design
Theme URI: https://yo-ha-ku-design.jp/
Author: yohaku design
Description: yohaku design corporate site theme — 引き算のデザインで本質を伝えるコーポレートサイト用のフルカスタムテーマ。
Version: 1.0.0
Text Domain: yohaku-design
*/

/* =========================================================
   yohaku design — corporate site
   Design language: 余白 (generous whitespace), subtraction,
   quiet confidence. Mincho serif headlines, hairline rules,
   restrained monochrome palette with a single warm undertone.
   ========================================================= */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f4ef;
  --ink: #1a1a18;
  --ink-soft: #55534c;
  --muted: #9c988d;
  --line: #dfdad0;
  --line-strong: #c9c3b6;
  --ink-invert-bg: #15130f;
  --ink-invert-fg: #f3f1ea;
  --ink-invert-muted: #8f8c82;
  --accent: #b08d57;

  --serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --serif-en: 'EB Garamond', serif;
  --sans: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono-num: 'Inter', 'Noto Sans JP', sans-serif;

  --container: 1120px;
  --pad: clamp(24px, 5vw, 64px);
  --section-pad: clamp(88px, 12vw, 168px);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  /* a barely-there ink grain, like the tooth of a fine paper stock —
     read subconsciously as material quality rather than seen outright */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.contact-modal-open { overflow: hidden; }

/* ---------- opening intro: a dot falls to center, then blooms into a
   sweeping ring that clears the cover away ---------- */
.site-intro-veil {
  position: fixed;
  inset: 0;
  z-index: 499;
  background: var(--bg);
  transition: clip-path 2.2s cubic-bezier(.16, 1, .3, 1), opacity .5s var(--ease);
}
.site-intro-ring {
  /* a fixed 200x200 reference box, scaled via transform for every size
     from the opening dot up through the full-screen bloom and back down
     to the hero ring — never resized via width/height, so the browser
     never has to re-layout or re-rasterize a huge box every frame */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  z-index: 500;
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s var(--ease);
}
.site-intro-ring svg { width: 100%; height: 100%; display: block; }
.site-intro-ring circle {
  fill: none;
  stroke: url(#introRingGradient);
  stroke-width: 1.5;
  /* keeps the line a constant 1.5px on screen no matter how large the
     transform:scale() on the container gets */
  vector-effect: non-scaling-stroke;
  /* no drop-shadow here (unlike the resting ambient-ring) — this element
     gets scaled up to several thousand px during the bloom, and a blur
     filter recomputed at that scale every frame was costing dropped
     frames; the glow isn't missed on something moving this fast anyway */
}
.site-intro-ring.is-done { opacity: 0; }
/* dropped below the hero's z-index once it starts gliding home, so the
   already-revealed headline occludes it instead of a line visibly
   crossing the text */
.site-intro-ring.is-behind { z-index: 1; }

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.only-mobile { display: none; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: .06em;
  border-radius: 0 0 6px 6px;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 0; }

.eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 18px;
}
.eyebrow--invert { color: var(--ink-invert-muted); }

.eyebrow--hero {
  display: flex;
  align-items: center;
  gap: 14px;
  font-style: normal;
  margin-bottom: 26px;
}
.eyebrow__index {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--ink-soft);
}
.eyebrow__rule {
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}
.eyebrow--hero .eyebrow__rule { width: 52px; background: var(--accent); }
.eyebrow--hero span:last-child { letter-spacing: .22em; }

.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.55;
  letter-spacing: .04em;
  margin: 0 0 32px;
  color: var(--ink);
}
.section-title--invert { color: var(--ink-invert-fg); }

.lead {
  max-width: 640px;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 56px;
}

/* 料金プランの案内文: 2文それぞれ（51文字・64文字）が<br>で1行ずつになるよう、
   通常の.leadより横幅を広く・フォントをやや小さくして折り返しを防ぐ */
#pricing .lead { max-width: none; font-size: 15px; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.reveal-line.is-visible > span { transform: translateY(0); }

/* stagger children inside a reveal-group */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: .08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: .24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: .32s; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad);
  transition: padding .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled {
  padding: 14px var(--pad);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 210;
}
.brand__mark { width: 30px; height: 30px; object-fit: contain; }
.brand__word {
  font-family: var(--serif-en);
  font-size: 17px;
  letter-spacing: .08em;
  color: var(--ink);
}

.menu-toggle {
  position: relative;
  z-index: 210;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.menu-toggle span {
  width: 16px; height: 1px;
  background: var(--ink);
  transition: transform .45s var(--ease), opacity .3s var(--ease), width .3s var(--ease);
}
.menu-toggle:hover span { width: 20px; }
.menu-toggle[aria-expanded="true"] {
  background: transparent;
  border-color: rgba(255,255,255,.3);
}
.menu-toggle[aria-expanded="true"] span { background: var(--ink-invert-fg); width: 18px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   Overlay nav — anchored panel, not a fullscreen takeover
   ========================================================= */
.overlay-nav {
  position: fixed;
  top: 92px;
  right: max(24px, var(--pad));
  left: auto;
  z-index: 190;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100vh - 120px);
  overflow: hidden auto;
  background: var(--ink-invert-bg);
  color: var(--ink-invert-fg);
  padding: 36px 34px;
  box-shadow: 0 26px 60px rgba(10, 9, 7, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transform-origin: top right;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.overlay-nav.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.overlay-nav__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.overlay-nav__list li {
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.overlay-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 2px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .3s var(--ease), padding .3s var(--ease);
}
.overlay-nav.is-active .overlay-nav__list a { opacity: 1; transform: translateY(0); }
.overlay-nav__list li:nth-child(1) a { transition-delay: .1s; }
.overlay-nav__list li:nth-child(2) a { transition-delay: .16s; }
.overlay-nav__list li:nth-child(3) a { transition-delay: .22s; }
.overlay-nav__list li:nth-child(4) a { transition-delay: .28s; }
.overlay-nav__list li:nth-child(5) a { transition-delay: .34s; }
.overlay-nav__list a:hover { color: var(--accent); padding-left: 10px; }
.overlay-nav__num {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-invert-muted);
}

.overlay-nav__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-invert-muted);
  opacity: 0;
  transition: opacity .5s var(--ease) .3s;
}
.overlay-nav.is-active .overlay-nav__footer { opacity: 1; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 var(--pad);
}
/* the ring read as a quiet light source — a wash of moonlight settling
   over the page rather than a flat white behind a decorative circle */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 74% 68% at 74% 40%,
    rgba(176, 141, 87, .19),
    rgba(246, 244, 239, .62) 48%,
    transparent 76%);
  pointer-events: none;
}
/* Ambient ring — a quiet crescent that waxes and wanes, echoing the
   yohaku moon mark in the abstract rather than reusing the logo itself.
   Two quieter strokes layer behind it at their own length and drift
   speed. Sized and placed per context below so it never sits behind
   text. */
.ambient-ring {
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.ambient-ring svg {
  width: 100%;
  height: 100%;
}
.ambient-ring__guide {
  fill: none;
  stroke: rgba(26, 26, 24, .07);
  stroke-width: 1;
}
.ambient-ring__arc {
  fill: none;
  /* stroke is a gradient set per-instance in the markup (ink→accent for
     the hero, ivory→accent for the inverted closing ring) */
  stroke-width: 1;
  stroke-linecap: round;
  stroke-opacity: .55;
  transform-origin: 100px 100px;
  animation: ring-drift 150s linear infinite;
  filter: drop-shadow(0 0 5px rgba(176, 141, 87, .35));
}
/* two quieter strokes layered behind the main crescent, each its own
   length, radius and drift speed — like a few extra passes of the same
   brush rather than a second, competing shape */
.ambient-ring__stroke-b {
  fill: none;
  stroke: var(--ink-soft);
  stroke-opacity: .22;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 140 425.5;
  transform-origin: 100px 100px;
  animation: ring-drift 110s linear infinite reverse;
  animation-delay: -20s;
}
.ambient-ring__stroke-c {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: .35;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 55 535.6;
  transform-origin: 100px 100px;
  animation: ring-drift 200s linear infinite;
  animation-delay: -60s;
}
.ambient-ring--invert .ambient-ring__guide { stroke: rgba(243, 241, 234, .08); }
.ambient-ring--invert .ambient-ring__arc { stroke-opacity: .65; filter: drop-shadow(0 0 7px rgba(176, 141, 87, .5)); }
.ambient-ring--invert .ambient-ring__stroke-b { stroke: var(--ink-invert-muted); stroke-opacity: .3; }
.ambient-ring--invert .ambient-ring__stroke-c { stroke-opacity: .5; }

@keyframes ring-drift {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 96px);
}

.hero__content { flex: 1 1 auto; max-width: 720px; }

.hero__inner .ambient-ring {
  position: relative;
  flex: 0 0 auto;
  width: min(330px, 27vw);
  /* revealed by main.js the instant the opening intro's ring finishes
     gliding into this exact spot — not by the generic .reveal system,
     which would also add its own translateY and break the illusion that
     it's the same ring, just arrived. Opacity-only crossfade. */
  opacity: 0;
  transition: opacity .5s var(--ease);
}
/* a soft aura behind the ring, like light catching a burnished metal
   edge — the one place the palette's gold gets to feel physical rather
   than graphic */
.hero__inner .ambient-ring::before {
  content: '';
  position: absolute;
  inset: -26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 141, 87, .3), transparent 70%);
  filter: blur(26px);
}
.hero__inner .ambient-ring.is-visible { opacity: 1; }

.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(38px, 7.6vw, 86px);
  line-height: 1.24;
  letter-spacing: .03em;
  margin: 26px 0 34px;
  color: var(--ink);
}
/* the mask-wipe used by .reveal-line elsewhere is switched off here —
   the hero title instead shatters into individual glyph fragments
   (split and positioned per-character by main.js) that settle into
   place like rubble coming to rest, rather than a line sliding up from
   under a clip. */
.hero__title .reveal-line { overflow: visible; }
.hero__title .reveal-line > span { transform: none; transition: none; }
.hero__title .char {
  display: inline-block;
  opacity: 0;
  filter: blur(5px);
  transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(.8);
  transition: transform .9s var(--ease), opacity .55s ease-out, filter .7s ease-out;
  transition-delay: var(--cd, 0s);
}
.hero__title .reveal-line.is-visible .char {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0) rotate(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .char { transition-delay: 0s !important; }
}

.hl-accent { color: var(--accent); }

.hero__sub {
  font-size: 16px;
  color: var(--ink-soft);
  letter-spacing: .1em;
  transition-delay: .56s;
}

.scroll-cue {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.scroll-cue__line {
  width: 1px; height: 46px;
  background: linear-gradient(var(--muted), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--ink);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}
.scroll-cue__text {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--muted);
}

/* =========================================================
   Sections (generic)
   ========================================================= */
.section, .closing {
  scroll-margin-top: 96px;
}

.section {
  padding: var(--section-pad) 0;
}
.section--soft { background: var(--bg-soft); }
.section--ink {
  background: var(--ink-invert-bg);
  color: var(--ink-invert-fg);
}

/* ---------- philosophy: drifting ink dust ----------
   a handful of near-invisible motes wandering the section's whitespace —
   a quiet, literal read of "余白" as space that is never quite empty.
   Pure CSS (transform + opacity only, so it's cheap to run indefinitely),
   each dot on its own drift path/duration/negative-delay so the field
   never reads as a single mechanical loop. */
#philosophy { position: relative; overflow: hidden; }
#philosophy .container { position: relative; z-index: 1; }
.ink-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ink-dust__dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}
.ink-dust__dot--1 { top: 16%; left: 8%;  width: 3px; height: 3px; background: rgba(26,26,24,.5);   animation: ink-dust-a 22s ease-in-out infinite -3s; }
.ink-dust__dot--2 { top: 66%; left: 15%; width: 2px; height: 2px; background: rgba(176,141,87,.55); animation: ink-dust-b 26s ease-in-out infinite -9s; }
.ink-dust__dot--3 { top: 28%; left: 92%; width: 4px; height: 4px; background: rgba(26,26,24,.4);    animation: ink-dust-c 30s ease-in-out infinite -14s; }
.ink-dust__dot--4 { top: 80%; left: 86%; width: 2px; height: 2px; background: rgba(26,26,24,.5);    animation: ink-dust-a 24s ease-in-out infinite -18s; }
.ink-dust__dot--5 { top: 46%; left: 50%; width: 3px; height: 3px; background: rgba(176,141,87,.45); animation: ink-dust-b 28s ease-in-out infinite -6s; }
.ink-dust__dot--6 { top: 9%;  left: 62%; width: 2px; height: 2px; background: rgba(26,26,24,.45);   animation: ink-dust-c 20s ease-in-out infinite -11s; }

@keyframes ink-dust-a {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: .8; }
  50% { transform: translate(18px, -34px); opacity: 1; }
  70% { opacity: .8; }
}
@keyframes ink-dust-b {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: .7; }
  50% { transform: translate(-22px, -26px); opacity: 1; }
  70% { opacity: .7; }
}
@keyframes ink-dust-c {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: .75; }
  50% { transform: translate(14px, -42px); opacity: 1; }
  70% { opacity: .75; }
}

/* ---------- philosophy intro layout: text beside illustration ---------- */
.philosophy-intro {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 64px;
  align-items: center;
  margin-bottom: 72px;
}
.philosophy-intro .lead { margin-bottom: 0; }

/* ---------- philosophy reasons ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
/* the headline splits into per-phrase ink-reveal masks, same technique as
   the hero title — but display:inline-block (not the hero's block) so the
   phrases keep wrapping naturally at desktop widths instead of being
   forced onto three fixed lines; nth-of-type (not nth-child) skips over
   the <br class="only-mobile"> siblings sitting between the phrases */
#philosophy .section-title .reveal-line {
  display: inline-block;
  vertical-align: top;
}
#philosophy .section-title .reveal-line:nth-of-type(1) > span { transition-delay: .05s; }
#philosophy .section-title .reveal-line:nth-of-type(2) > span { transition-delay: .18s; }
#philosophy .section-title .reveal-line:nth-of-type(3) > span { transition-delay: .31s; }
/* lead waits for the title's mask cascade to finish rather than fading in
   alongside it */
#philosophy .lead { transition-delay: .5s; }

/* ---------- philosophy intro: "cramped whitespace loosens" illustration ----------
   a literal read of the lead paragraph itself: a tightly packed grid of
   content blocks (情報が溢れかえる) with no room between them. On reveal,
   a few blocks vanish outright (ノイズを引き算する) while the gap between
   the rest grows generous (余白が生まれる), and one surviving block turns
   gold — the one message that was there all along, now able to stand out
   (本来の魅力が、すっと際立つ). Plays once; CSS grid `gap` is animatable
   in current browsers, so the whole layout reflows smoothly with no JS. */
.noise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  transition: gap 1.6s var(--ease) .2s;
}
.noise-grid.is-visible { gap: 14px; }

.noise-grid__cell {
  background: var(--line-strong);
  opacity: .65;
  transition: opacity 1.1s var(--ease) .35s, background-color 1.1s var(--ease) .35s;
}
.noise-grid.is-visible .noise-grid__cell--fade { opacity: 0; }
.noise-grid.is-visible .noise-grid__cell--accent {
  background: var(--accent);
  opacity: 1;
}

.reason {
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* ---------- reason 01: "settling compass needle" illustration ----------
   a literal read of the card's own copy (価値をまっすぐに届けるため) — the
   needle is disturbed, wavers with decreasing amplitude like a damped
   physical needle, and locks onto the fixed north mark: trust settling
   into true. Loops indefinitely once the card reveals: a quick damped
   settle, a long resting hold at true (most of the cycle), then a brief
   reset nudge that seeds the next pass — 0%/100% share the same disturbed
   angle so the loop wraps with no visible snap. */
.reason__art { width: 84px; max-width: 100%; margin-bottom: 22px; }
.reason__art-svg { display: block; width: 100%; height: auto; overflow: visible; }
.reason__art-rim { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.reason__art-north { stroke: var(--accent); stroke-width: 1.6; }
.reason__art-needle-n { fill: var(--accent); }
.reason__art-needle-s { fill: var(--muted); }
.reason__art-pivot { fill: var(--ink); }
.reason__art-needle {
  transform-origin: 40px 40px;
  transform: rotate(-34deg);
}
.reason.is-visible .reason__art-needle {
  animation: reason-needle-settle 4s cubic-bezier(.22, 1, .36, 1) .3s infinite;
}
@keyframes reason-needle-settle {
  0%   { transform: rotate(-34deg); }
  9%   { transform: rotate(14deg); }
  15%  { transform: rotate(-7deg); }
  20%  { transform: rotate(3deg); }
  25%  { transform: rotate(-1deg); }
  30%  { transform: rotate(0deg); }
  96%  { transform: rotate(0deg); }
  98%  { transform: rotate(-34deg); }
  100% { transform: rotate(-34deg); }
}

/* ---------- reason 02: "vessel filling" illustration ----------
   a literal read of the card's own copy (誠実さを無言で伝える器) — an
   empty vessel quietly fills to a calm, restrained level (never to the
   brim), holds there through most of the cycle, then gently drains and
   refills — a slow breathing rhythm rather than a one-time event. The
   fill/surface share one wrapping <g> so they move in lockstep, sliding
   inside a clipPath shaped like the vessel so it can never spill past the
   vessel's own outline. 0%/100% share the same empty state for a seamless
   loop. */
.reason__art-vessel { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.reason__art-opening { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: .8; }
.reason__art-fill { fill: var(--accent); opacity: .5; }
.reason__art-surface { fill: var(--accent); opacity: .9; }
.reason__art-liquid { transform: translateY(46px); }
.reason.is-visible .reason__art-liquid {
  animation: reason-vessel-breathe 5.3s var(--ease) .3s infinite;
}
@keyframes reason-vessel-breathe {
  0%   { transform: translateY(46px); }
  28%  { transform: translateY(16px); }
  70%  { transform: translateY(16px); }
  92%  { transform: translateY(46px); }
  100% { transform: translateY(46px); }
}

.reason__index {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  transition: color .3s var(--ease);
}
/* a fine hairline draws itself in under the index once the card has
   revealed, echoing the gold hairlines used elsewhere (eyebrow rule,
   page frame) rather than introducing a new motif */
.reason__index::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .8s var(--ease) .25s;
}
.reason.is-visible .reason__index::after { width: 26px; }
.reason h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  margin: 10px 0 14px;
  letter-spacing: .03em;
}
.reason p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: min(350px, 30vw) 1fr;
  gap: clamp(24px, 6vw, 72px);
  align-items: center;
}
/* "waning" illustration — four circles, each carved into a little
   further, arriving at the same crescent the logo mark is built from.
   Not the logo itself animating, just its own logic (subtraction,
   repeated) shown as a sequence, echoing the section's own words. */
.about-mark { display: block; width: 100%; height: auto; overflow: visible; }
.about-mark__phase {
  fill: none;
  stroke-linejoin: round;
  opacity: 0;
  transform: translate(-14px, 10px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  /* rotate/shake around each shape's own center, not the SVG
     viewBox's — the default for SVG children in most browsers */
  transform-box: fill-box;
  transform-origin: center;
}
.about-mark__phase--1 { stroke: var(--line-strong); stroke-width: 1; }
.about-mark__phase--2 { stroke: var(--muted); stroke-width: 1.15; transition-delay: .12s; }
.about-mark__phase--3 { stroke: var(--ink-soft); stroke-width: 1.3; transition-delay: .24s; }
.about-mark__phase--4 { stroke: var(--accent); stroke-width: 1.6; transition-delay: .36s; }
.about-grid__mark.is-visible .about-mark__phase { opacity: 1; transform: translate(0, 0); }
/* once settled, each moon gives a single light shake — a beat after
   the last, so it reads as phase--1→4 jostling into place one at a
   time. Plays once (no infinite): it fires as part of arriving, not
   as a recurring idle tic. */
.about-grid__mark.is-visible .about-mark__phase--1 { animation: about-mark-shake .85s linear 1.4s both; }
.about-grid__mark.is-visible .about-mark__phase--2 { animation: about-mark-shake .85s linear 1.52s both; }
.about-grid__mark.is-visible .about-mark__phase--3 { animation: about-mark-shake .85s linear 1.64s both; }
.about-grid__mark.is-visible .about-mark__phase--4 {
  animation: about-mark-glow 4.5s var(--ease) 1.2s infinite,
             about-mark-shake .85s linear 1.76s both;
}
@keyframes about-mark-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(176, 141, 87, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(176, 141, 87, .5)); }
}
@keyframes about-mark-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-4px, 1.8px) rotate(-2deg); }
  22%  { transform: translate(3.5px, -1.8px) rotate(1.7deg); }
  35%  { transform: translate(-2.8px, 1.3px) rotate(-1.2deg); }
  49%  { transform: translate(2px, -1px) rotate(.8deg); }
  63%  { transform: translate(-1.2px, .6px) rotate(-.4deg); }
  77%  { transform: translate(.6px, -.3px) rotate(.2deg); }
  90%  { transform: translate(-.2px, .1px) rotate(-.05deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.about-grid__text p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 18px; }
.about-grid__text p:last-child { margin-bottom: 0; }

/* ---------- profile hero: the real logo mark, not the animated one ---------- */
.profile-hero-mark { display: block; width: 100%; height: auto; }

/* ---------- venn ---------- */
.venn {
  position: relative;
  width: min(460px, 100%);
  /* holds the three circles (54% wide, centers spaced 1.25 radii
     apart — looser than a full radius, so the overlap reads as a
     meeting point rather than three circles nearly stacked) centered
     with an equal margin on all four sides */
  aspect-ratio: 1.05 / 1;
  margin: 40px auto 0;
}
/* revealed per-circle below, each from its own direction — not by the
   generic .reveal fade/slide, which would move the group as one block
   and blur the three separate entrances together. Kept on the element
   only so the scroll IntersectionObserver still picks it up. */
.venn.reveal { opacity: 1; transform: none; transition: none; }
.venn__circle {
  position: absolute;
  width: 54%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
/* same coral / amber / teal hues, pushed lighter and thinner still —
   a pale wash you'd notice but not a block of color. the rim stays a
   bit more saturated than the fill so each circle still reads as a
   distinct hue even where the fill itself is almost white. */
.venn__circle--a { background: rgba(245, 195, 185, .35); border: 1px solid rgba(224, 92, 74, .45); }
.venn__circle--b { background: rgba(240, 215, 160, .38); border: 1px solid rgba(219, 158, 42, .5); }
.venn__circle--c { background: rgba(180, 220, 215, .32); border: 1px solid rgba(38, 130, 130, .42); }
.venn__circle span {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .08em;
  color: var(--ink);
}
/* an equilateral arrangement — every pair of circles the same distance
   apart, so all three overlaps match exactly instead of the bottom
   pair crowding closer together than the top one did. 想い drops in
   from above, デザイン arrives from the left, 信頼 from the right —
   three separate things converging into one even overlap. */
.venn__circle--a { top: 1.3%; left: 23%; transform: translateY(-80px); }
.venn__circle--b { top: 31.9%; left: 6.1%; transform: translateX(-80px); }
.venn__circle--c { top: 31.9%; right: 6.1%; transform: translateX(80px); }
.venn.is-visible .venn__circle--a { opacity: 1; transform: translateY(0); }
.venn.is-visible .venn__circle--b { opacity: 1; transform: translateX(0); transition-delay: .08s; }
.venn.is-visible .venn__circle--c { opacity: 1; transform: translateX(0); transition-delay: .16s; }
/* labels pushed outward from the diagram's own center, along the same
   line as each circle's own center — lands each one in its circle's
   uncrowded lobe rather than the shared middle */
.venn__circle--a span { transform: translateY(-38%); }
.venn__circle--b span { transform: translate(-33%, 19%); }
.venn__circle--c span { transform: translate(33%, 19%); }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.stat {
  background: var(--ink-invert-bg);
  padding: 40px 28px;
}
.stat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 14px;
}
.stat__num {
  font-family: var(--mono-num);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 48px);
  margin: 0;
  letter-spacing: -.01em;
  color: var(--ink-invert-fg);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--ink-invert-fg);
  margin: 0 0 12px;
}
.stat__desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-invert-muted);
  margin: 0;
}

/* ---------- stats: per-card illustrations ----------
   each icon is a literal read of its own number rather than a generic
   decoration — blink speed for the 0.05s snap judgment, a ring filling
   to the exact 94%, a seedling for the asset that takes months to grow,
   a bar compressing for the cost reduction. All gated behind .stat's own
   .is-visible (set by the same scroll IntersectionObserver as .reveal),
   so no JS beyond what already drives the rest of the page is needed. */
.stat__art { width: 72px; flex: none; margin: 0; }
.stat__art-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 01 — instant judgment: an eye that's open almost the whole cycle,
   then blinks once, fast — the 0.05s decision itself. */
.stat__art-eye-outline { fill: none; stroke: var(--ink-invert-muted); stroke-width: 1.4; }
.stat__art-pupil { fill: var(--accent); }
.stat__art-eye { transform-box: fill-box; transform-origin: center; }
.stat.is-visible .stat__art-eye {
  animation: stat-blink 3.6s var(--ease) .3s infinite;
}
@keyframes stat-blink {
  0%, 82% { transform: scaleY(1); }
  86% { transform: scaleY(.05); }
  90% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

/* 02 — the number as a ring: fills to exactly 94% of the circle's
   circumference (188.5 total, 11.3 left unfilled) once the card reveals. */
.stat__art-ring-track, .stat__art-ring-fill {
  fill: none;
  stroke-width: 4;
}
.stat__art-ring-track { stroke: rgba(255, 255, 255, .14); }
.stat__art-ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  transition: stroke-dashoffset 1.5s var(--ease) .2s;
}
.stat.is-visible .stat__art-ring-fill { stroke-dashoffset: 11.3; }

/* 03 — a seedling: the stem draws upward, the two leaves unfurl in
   sequence, then the whole plant sways gently — growth that keeps going,
   the same "stock, not flow" idea the copy itself describes. */
.stat__art-ground { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.stat__art-stem {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  transition: stroke-dashoffset 1.1s var(--ease) .1s;
}
.stat.is-visible .stat__art-stem { stroke-dashoffset: 0; }
.stat__art-leaf-l, .stat__art-leaf-r {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.3);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stat.is-visible .stat__art-leaf-l { opacity: .85; transform: scale(1); transition-delay: .9s; }
.stat.is-visible .stat__art-leaf-r { opacity: .85; transform: scale(1); transition-delay: 1.1s; }
.stat__art-plant { transform-box: fill-box; transform-origin: 50% 100%; }
.stat.is-visible .stat__art-plant {
  animation: stat-sway 5.2s var(--ease) 1.6s infinite;
}
@keyframes stat-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

/* ---------- service points ---------- */
.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 88px;
}
.point h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.point p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- profile values: a single straight line runs through all
   three, the throughline itself standing for 直接、まっすぐに ---------- */
.values { position: relative; margin-bottom: 88px; }
.values::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 27px;
  width: 1px;
  background: var(--line-strong);
}
.value {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 28px;
  padding: clamp(36px, 6vw, 52px) 0;
  border-top: 1px solid var(--line-strong);
}
.value__mark {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.value__body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 25px);
  letter-spacing: .03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.value__body p { max-width: 34em; font-size: 15.5px; color: var(--ink-soft); margin: 0; }

/* ---------- cost table ---------- */
.table-wrap { margin-bottom: 88px; }
.table-caption {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 16px;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cost-table th, .cost-table td {
  border: 1px solid var(--line);
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}
.cost-table thead th {
  font-family: var(--serif);
  font-weight: 600;
  background: var(--bg-soft);
  font-size: 14px;
}
.cost-table thead th span { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.cost-table td:first-child { color: var(--ink-soft); }
.cost-table__total td {
  font-weight: 600;
  background: rgba(176,141,87,.06);
  border-top: 2px solid var(--ink);
}
.table-note {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
}
.table-note--spaced { margin-bottom: 64px; }

/* ---------- service page: in-page wayfinding ---------- */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0 0 72px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.page-nav a {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .03em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.page-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- service page: pricing plans ----------
   サイト全体で使っている「01 / 02」のインデックス表現を、カードの背景
   いっぱいに淡く拡大して敷く。枠線の太さ・色は3枚とも揃えたまま、数字の
   濃さとおすすめ札だけで見分けがつくようにする。 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 16px; }
.plan-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
}

.plan-card__inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
}
.plan-card__num {
  position: absolute;
  top: -.16em;
  right: -.03em;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 132px;
  line-height: 1;
  color: var(--bg-soft);
  z-index: 0;
  pointer-events: none;
}
.plan-card--recommended .plan-card__num { color: rgba(176, 141, 87, .16); }
.plan-card__name, .plan-card__price, .plan__list { position: relative; z-index: 1; }

/* おすすめラベル: カード上辺の罫線中央をまたいで、枠の外に乗せる札 */
.plan-card__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--accent);
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bg);
  letter-spacing: .04em;
  white-space: nowrap;
}

.plan-card__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ink);
}

.plan-card__price {
  font-family: var(--mono-num);
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 29px);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 24px;
  font-variant-numeric: tabular-nums;
}
.plan-card__unit {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-left: 2px;
}
.plan-card__price-to {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: 4px;
}

.plan__list {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.plan__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 12px;
}
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.plan__list li:last-child { margin-bottom: 0; }

/* ---------- service page: lump-sum payment discount callout ---------- */
.discount-note {
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid var(--accent);
  background: rgba(176, 141, 87, .07);
  padding: 28px 32px;
  margin: 0 0 64px;
}
.discount-note__rate {
  flex: none;
  font-family: var(--mono-num);
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
  letter-spacing: -.01em;
  white-space: nowrap;
  margin: 0;
}
.discount-note__unit {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  margin-left: 5px;
}
.discount-note__text {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------- service page: process steps ----------
   Philosophy の .reason と同じ語法（線画イラスト＋小さなインデックス＋見出し）
   をこの一覧にも適用し、6ステップそれぞれに固有のカットを添える */
.process { margin-bottom: 88px; }
.process__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: flex-start;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.process__step:last-child { border-bottom: 1px solid var(--line); }

.process__art { width: 100%; margin-top: 2px; }
.process__art-svg { display: block; width: 100%; height: auto; overflow: visible; }
.process__art-line {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process__art-accent {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process__art-dot { fill: var(--accent); }

.process__index {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}
.process__step h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}
.process__step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ---------- service page: FAQ ---------- */
.faq { margin-bottom: 56px; }
.faq__item { padding: 28px 0; border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  gap: 14px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.faq__q::before { content: 'Q'; font-family: var(--serif-en); font-style: italic; color: var(--accent); flex: none; }
.faq__a {
  display: flex;
  gap: 14px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.85;
  margin: 0;
}
.faq__a::before { content: 'A'; font-family: var(--serif-en); font-style: italic; color: var(--muted); flex: none; }

/* ---------- before / after compare ---------- */
.compare__card {
  border: 1px solid var(--line);
  padding: 34px;
}
.compare__card--accent { border-color: var(--ink); background: var(--bg-soft); }
.compare__art { width: 56px; margin-bottom: 20px; }
.compare__art-svg { display: block; width: 100%; height: auto; overflow: visible; }
.compare__tag {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.compare__card h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 14px;
}
.compare__card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* 「Before」のイラスト: 終わらない砂時計。上の部屋から下へ粒が落ち、
   着地するたびに少しずつ砂山ができていくが、やがて両方とも消えてリセットされる
   ——外注先への終わらない待ち時間を表現。 */
.compare__art-glass, .compare__art-cap {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.compare__art-grain { fill: var(--muted); }
.compare__card.is-visible .compare__art-grain {
  animation: compare-grain-fall 2.2s linear .2s infinite;
}
@keyframes compare-grain-fall {
  0%   { transform: translate(0, 0); opacity: 1; }
  40%  { transform: translate(-1px, 13px); opacity: 1; }
  82%  { transform: translate(1px, 32px); opacity: 1; }
  88%  { transform: translate(1px, 32px); opacity: 0; }
  89%  { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.compare__art-pile {
  fill: var(--muted);
  opacity: .45;
  transform-origin: 40px 64px;
  transform: scaleY(0);
}
.compare__card.is-visible .compare__art-pile {
  animation: compare-pile-grow 2.2s linear .2s infinite;
}
@keyframes compare-pile-grow {
  0%   { transform: scaleY(0); opacity: .45; }
  82%  { transform: scaleY(1); opacity: .45; }
  88%  { transform: scaleY(1); opacity: 0; }
  89%  { transform: scaleY(0); opacity: 0; }
  90%  { transform: scaleY(0); opacity: .45; }
  100% { transform: scaleY(0); opacity: .45; }
}

/* 「After」のイラスト: 輪が描かれ、続いて中にチェックマークが描かれる。
   完了した瞬間に波紋が静かに広がる——依頼がすぐに反映されたことの合図。
   その後リセットされ、また最初から繰り返す。 */
.compare__art-ring-track { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.compare__art-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
}
.compare__art-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: 0;
  transform-origin: 40px 40px;
}
.compare__art-check {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.compare__card.is-visible .compare__art-ring {
  animation: compare-ring-draw 3.4s var(--ease) .3s infinite;
}
.compare__card.is-visible .compare__art-check {
  animation: compare-check-draw 3.4s var(--ease) .3s infinite;
}
.compare__card.is-visible .compare__art-ping {
  animation: compare-ping-pulse 3.4s var(--ease) .3s infinite;
}
@keyframes compare-ring-draw {
  0%   { stroke-dashoffset: 170; }
  35%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; }
  93%  { stroke-dashoffset: 170; }
  100% { stroke-dashoffset: 170; }
}
@keyframes compare-check-draw {
  0%   { stroke-dashoffset: 40; }
  35%  { stroke-dashoffset: 40; }
  55%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; }
  91%  { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 40; }
}
@keyframes compare-ping-pulse {
  0%   { transform: scale(1); opacity: 0; }
  54%  { transform: scale(1); opacity: 0; }
  55%  { transform: scale(1); opacity: .6; }
  75%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* ---------- strength cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 72px;
}
.card {
  background: var(--bg-soft);
  padding: 44px 34px;
}
.card__index {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 22px;
}
.card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 14px;
}
.card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.statement-row {
  display: flex;
  align-items: center;
  gap: 64px;
}
.statement {
  max-width: 640px;
}
.statement h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 18px;
}
.statement p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* 「スピード」のイラスト: 早送り記号。2つの矢印が半拍ずらしでリズミカルに
   前へ弾み続ける——再生プレーヤーの「⏩」のように、一目で「速い」と伝わる。 */
.statement__art { width: 140px; flex: none; }
.statement__art-svg { display: block; width: 100%; height: auto; overflow: visible; }
.statement__art-chevron { fill: var(--accent); opacity: .3; }
.statement__art.is-visible .statement__art-chevron--1 {
  animation: statement-chevron-nudge 1.1s var(--ease) infinite;
}
.statement__art.is-visible .statement__art-chevron--2 {
  animation: statement-chevron-nudge 1.1s var(--ease) .18s infinite;
}
@keyframes statement-chevron-nudge {
  0%   { transform: translateX(0); opacity: .3; }
  40%  { transform: translateX(10px); opacity: 1; }
  70%  { transform: translateX(10px); opacity: 1; }
  100% { transform: translateX(0); opacity: .3; }
}

/* ---------- works ---------- */
.works {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 40px;
}
.work:first-child { grid-column: 1 / -1; }
.work__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9.6;
}
.work__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: object-position .6s var(--ease);
}
/* the slow duration lives on the hover rule (not the base rule) so entering
   plays a long, deliberate scroll through the full-page capture, while
   leaving mid-scroll snaps back on the base rule's quick duration instead
   of retracing the same 8s in reverse */
.work:hover .work__frame img { object-position: bottom; transition-duration: 8s; transition-timing-function: linear; }

.work__link-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(26, 26, 24, .35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-en);
  font-size: 15px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.work:hover .work__link-badge { opacity: 1; transform: translateY(0); }
.work figcaption { margin-top: 18px; }
.work__name {
  font-family: var(--serif);
  font-size: 17px;
  margin: 0 0 4px;
  letter-spacing: .03em;
}
.work__type {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  letter-spacing: .04em;
}

/* ---------- works page: case studies ---------- */
.case-list { display: flex; flex-direction: column; gap: 96px; margin-bottom: 88px; }
.case { display: flex; align-items: center; gap: 56px; }
.case:nth-child(even) { flex-direction: row-reverse; }
.case__media { flex: 1 1 46%; min-width: 0; }
.case__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9.6;
}
.case__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case__body { flex: 1 1 54%; min-width: 0; }
.case__type {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.case__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  margin: 0 0 28px;
}
.case__details { display: grid; gap: 20px; margin: 0 0 28px; }
.case__details > div { border-top: 1px solid var(--line); padding-top: 14px; }
.case__details dt {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.case__details dd { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.85; }
.case__link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
}
.case__link:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================================
   Closing
   ========================================================= */
.closing {
  position: relative;
  background: var(--ink-invert-bg);
  color: var(--ink-invert-fg);
  padding: var(--section-pad) 0;
  text-align: center;
  overflow: hidden;
}
.closing > .ambient-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(640px, 76vw);
  height: min(640px, 76vw);
}
.closing__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.closing__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.6;
  margin: 0 0 34px;
  white-space: nowrap;
}
.closing p {
  color: var(--ink-invert-muted);
  font-size: 15.5px;
  margin: 0 0 22px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 17px 42px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink);
  background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--invert {
  border-color: var(--ink-invert-fg);
  color: var(--ink-invert-fg);
}
.btn--invert:hover { background: var(--ink-invert-fg); color: var(--ink-invert-bg); }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  border-top: 1px solid var(--line);
  padding-top: 56px;
}
.contact-info {
  margin: 0;
  display: grid;
  gap: 26px;
}
.contact-info > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.contact-info dt {
  font-family: var(--serif-en);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
}
.contact-info dd { margin: 0; font-size: 15px; }
.contact-info a { border-bottom: 1px solid var(--line-strong); }
.contact-info a:hover { color: var(--accent); border-color: var(--accent); }

/* left column doesn't stretch to match the taller form beside it — without
   this, its own auto-sized rows stretch to fill that height, opening up
   the huge internal gaps this rule removes */
.contact-info-col {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* a paper plane flies its own fold-line, fading in, gliding along a faint
   dashed route, then fading out to reset — the inquiry, sent and arriving —
   right before the closing line, as if that's the message it's carrying */
.contact-pin { width: 100px; margin: 0 auto; }
.contact-pin-svg { display: block; width: 100%; height: auto; overflow: visible; }
.contact-plane-trail {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  opacity: .5;
}
.contact-plane-body { fill: var(--accent); }
.contact-plane-fold { fill: none; stroke: var(--bg); stroke-width: 1; opacity: .5; }
.contact-plane {
  transform: translate(-26px, 6px);
  opacity: 0;
  transform-box: fill-box;
}
.contact-pin.is-visible .contact-plane {
  animation: contact-plane-fly 2.6s var(--ease) infinite;
}
@keyframes contact-plane-fly {
  0%   { transform: translate(-26px, 6px); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translate(20px, -36px); opacity: 1; }
  88%  { opacity: 0; }
  100% { transform: translate(-26px, 6px); opacity: 0; }
}

.contact-faq__title {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
}
.contact-faq ul { list-style: none; margin: 0; padding: 0; }
.contact-faq li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 16px;
}
.contact-faq li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.contact-faq li:last-child { margin-bottom: 0; }
.contact-faq__closing {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: .03em;
}

.contact-cta {
  background: var(--bg-soft);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.contact-cta__intro {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 28px;
  line-height: 1.7;
}
.contact-cta .btn { align-self: flex-start; }

.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  letter-spacing: .03em;
}
.form-row .req {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  letter-spacing: .05em;
  vertical-align: middle;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 44px;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 9px 2px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}
.form-row textarea { resize: vertical; min-height: 88px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
}
.form-status--ok { color: var(--accent); }
.form-status--error { color: #a4453d; }
.contact-cta .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* =========================================================
   固定ページ（プライバシーポリシー等）
   ========================================================= */
.policy-page .lead { max-width: 720px; }
.policy-block { max-width: 720px; margin-bottom: 44px; }
.policy-block h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.policy-block p, .policy-block li {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0 0 10px;
}
.policy-block ul { padding-left: 1.4em; margin: 0 0 10px; }
.policy-block a { color: var(--ink-soft); text-decoration-color: var(--line-strong); }
.policy-meta { font-size: 13px; color: var(--muted); margin: 56px 0 0; }

/* ---------- profile page ---------- */
.profile-signature {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .04em;
  margin: -18px 0 32px;
}
.profile-closing {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  max-width: 480px;
  margin: 0 0 8px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.brand--footer { display: flex; align-items: center; gap: 10px; }
.brand--footer img { width: 22px; height: 22px; }
.brand--footer span {
  font-family: var(--serif-en);
  font-size: 14px;
  color: var(--ink-soft);
}
.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .05em;
  transition: color .3s var(--ease);
}
.site-footer__links a:hover { color: var(--accent); }
.site-footer__copy {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  letter-spacing: .05em;
}

/* =========================================================
   ブログ（コラム）＆汎用コンテンツ
   ========================================================= */
/* 一覧1ページ目の先頭に出す、最新記事の特集枠 */
.post-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 0 0 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line-strong);
  cursor: pointer;
}
.post-feature__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
}
.post-feature__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.post-feature:hover .post-feature__thumb img { transform: scale(1.04); }
.post-feature__tag {
  display: inline-block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 10px;
  margin: 0 0 16px;
}
.post-feature h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 16px;
}
.post-feature h2 a { color: var(--ink); transition: color .3s var(--ease); }
.post-feature:hover h2 a { color: var(--accent); }
.post-feature__body > p:not(.post-feature__tag):not(.post-card__meta) {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 22px;
}
.post-feature__more {
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.post-feature:hover .post-feature__more { color: var(--accent); border-color: var(--accent); }
.post-feature .post-card__link::after { content: ''; position: absolute; inset: 0; }

.post-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 56px;
}
.post-card {
  position: relative;
  background: var(--bg);
  padding: 34px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
  cursor: pointer;
  transition: background-color .4s var(--ease);
}
.post-card:hover { background: var(--bg-soft); }
.post-card:focus-within { outline: 1px solid var(--accent); outline-offset: -1px; }
.post-card--no-thumb { grid-template-columns: 1fr; }
.post-card__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
}
.post-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.post-card:hover .post-card__thumb img { transform: scale(1.05); }
.post-card__meta {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.post-card__num {
  color: var(--line-strong);
  margin-right: 10px;
  transition: color .3s var(--ease);
}
.post-card:hover .post-card__num { color: var(--accent); }
.post-card h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
}
.post-card h2 a { color: var(--ink); transition: color .3s var(--ease); }
.post-card:hover h2 a { color: var(--accent); }
/* タイトルのリンクをカード全体に拡張し、テキスト以外の余白もクリック可能にする */
.post-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.post-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin: 0; }
.post-empty { color: var(--ink-soft); font-size: 15px; }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}
.pagination .page-numbers {
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.pagination .page-numbers.current { color: var(--accent); }
.pagination a.page-numbers:hover { color: var(--accent); border-color: var(--accent); }

/* 記事詳細ページの見出し部分 */
.post-single__meta {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.post-single__meta-sep { margin: 0 4px; }
.post-single__thumb {
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 32px 0 48px;
  aspect-ratio: 16 / 9;
}
.post-single__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-single__back {
  display: inline-block;
  margin-top: 56px;
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
}
.post-single__back:hover { color: var(--accent); border-color: var(--accent); }

/* 記事末尾のお問い合わせ誘導バナー */
.post-cta {
  margin-top: 56px;
  padding: 48px 40px;
  background: var(--bg-soft);
  border-top: 2px solid var(--accent);
  text-align: center;
}
.post-cta__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: .03em;
}
.post-cta__text {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto;
}
.post-cta .btn { margin-top: 24px; }

/* WordPressブロックエディタのコンテンツ用タイポグラフィ（page.php・single.php共通） */
.entry-content { font-size: 15px; line-height: 1.9; color: var(--ink-soft); overflow-wrap: anywhere; }

/* 本文中の表 ----------
   文字だけの記事は間延びしやすいので、比較表・料金表などを使いやすく
   サービスページの.cost-tableに寄せた見た目（見出し行に塗り、縞模様）に
   する。表が画面幅を超える場合は.entry-table-scroll側で横スクロールさせ、
   スクロールできる間だけ右端をうっすらフェードさせてヒントを出す
   （has-overflowはmain.jsがJSで付け外しする）。 */
.entry-table-scroll { position: relative; margin: 0 0 32px; }
.entry-content table { border-collapse: collapse; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; width: 100%; margin: 0; font-size: 14px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; }
.entry-content thead th { background: var(--bg-soft); font-family: var(--serif); font-weight: 600; color: var(--ink); }
.entry-content tbody tr:nth-child(even) td { background: rgba(176, 141, 87, .05); }
.entry-table-scroll.has-overflow::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--bg) 85%);
  pointer-events: none;
}

/* 本文中のポイント・注意ボックス ----------
   ブロックエディタで段落に「post-callout」（強調用）または
   「post-callout post-callout--note」（注意書き用）のカスタムCSSクラスを
   付けて使う想定。冒頭の「この記事でわかること」ボックス（.post-summary-box）
   と同じ額縁トーンで、本文の途中に挟んでも浮かない。 */
.entry-content .post-callout {
  position: relative;
  margin: 0 0 32px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
}
.post-callout__label {
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 8px;
}
.entry-content .post-callout p:last-child { margin-bottom: 0; }
.entry-content .post-callout--note { border-left-color: var(--line-strong); background: var(--bg); }
.post-callout--note .post-callout__label { color: var(--muted); }

/* 本文中の手順（ステップ）リスト ----------
   ブロックエディタの「リスト」ブロックに「post-steps」クラスを付けて使う。
   各<li>の先頭に丸数字が並び、.post-toc__listの連番表現とトーンを揃える。 */
.entry-content .post-steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  counter-reset: post-steps;
}
.entry-content .post-steps > li {
  counter-increment: post-steps;
  position: relative;
  padding: 0 0 24px 20px;
  margin: 0 0 4px 15px;
  border-left: 1px solid var(--line);
}
.entry-content .post-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.post-steps > li::before {
  content: counter(post-steps, decimal-leading-zero);
  position: absolute;
  left: -15px;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--accent);
}

/* 本文中のBefore/After・画像2枚並べ比較 ----------
   ブロックエディタの「グループ」ブロックに「post-compare」クラスを付け、
   中に画像（figure推奨）を2つ並べる想定。スマホでは縦積みにする。 */
.post-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 32px;
}
.post-compare figure { margin: 0; }
.entry-content .post-compare img { margin: 0 0 10px; }
.post-compare figcaption {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: center;
}

.entry-content h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 44px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: 96px;
}
.entry-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.entry-content h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 14px;
  scroll-margin-top: 96px;
}
.entry-content p { margin: 0 0 20px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0 0 20px; }
.entry-content li { margin-bottom: 6px; }
.entry-content a { color: var(--ink-soft); text-decoration-color: var(--line-strong); }
.entry-content a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.entry-content img { max-width: 100%; height: auto; border: 1px solid var(--line); margin: 8px 0 28px; }
.entry-content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}

/* 記事冒頭の目次（h2/h3から自動生成） ----------
   単純な塗りつぶしの箱にはせず、細い1本罫線＋四隅のアクセントマークだけで
   囲む「額縁」。他の塗りボックス（この記事でわかることボックス等）と
   見た目が被らないよう、余白を広めに取って軽さを出している。 */
.post-toc {
  position: relative;
  border: 1px solid var(--line);
  padding: 40px 36px 34px;
  margin: 10px 0 40px;
}
.post-toc::before,
.post-toc::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
}
.post-toc::before { top: -7px; left: -7px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.post-toc::after { bottom: -7px; right: -7px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.post-toc__title {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted);
  margin: 0 0 20px;
}
.post-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: post-toc;
}
.post-toc__list > li { counter-increment: post-toc; margin-bottom: 12px; }
.post-toc__list > li:last-child { margin-bottom: 0; }
.post-toc__list > li > a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.post-toc__list > li > a::before {
  content: counter(post-toc, decimal-leading-zero);
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  flex: none;
}
.post-toc__list > li > a:hover { color: var(--accent); }
.post-toc__sub { list-style: none; margin: 8px 0 0 30px; padding: 0; }
.post-toc__sub li { margin-bottom: 6px; }
.post-toc__sub li:last-child { margin-bottom: 0; }
.post-toc__sub a { display: flex; gap: 8px; font-size: 13.5px; color: var(--muted); }
.post-toc__sub a::before { content: '—'; color: var(--line-strong); }
.post-toc__sub a:hover { color: var(--accent); }
.post-toc__sub a:hover::before { color: var(--accent); }

/* 記事冒頭の「この記事でわかること」ボックス */
.post-summary-box {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 24px 28px;
  margin: 0 0 40px;
}
.post-summary-box__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: .04em;
}
.post-summary-box ul { margin: 0; padding-left: 1.2em; }
.post-summary-box li { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 6px; }
.post-summary-box li:last-child { margin-bottom: 0; }

/* 記事末尾の関連記事 ----------
   CTAの後に置き、コラム一覧の.post-cardと同じ質感のカードで次の1記事へ
   誘導する。回遊率を上げてそのまま離脱するのを防ぐのが狙い。 */
.related-posts { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line-strong); }
.related-posts__title {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 28px;
}
.related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-post { display: block; }
.related-post__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.related-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.related-post:hover .related-post__thumb img { transform: scale(1.05); }
.related-post__meta {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}
.related-post__title {
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  transition: color .3s var(--ease);
}
.related-post:hover .related-post__title { color: var(--accent); }

/* =========================================================
   コラム記事: 追従する目次（フローティングボタン＋パネル）
   長文でも今どこにいるか迷わないよう、記事下部の.contact-fabと左右対称の
   位置に置く。中身は冒頭の.post-tocと同じ目次HTMLを再利用している。
   ========================================================= */
.post-toc-fab {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 15px 26px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(26, 26, 24, .12);
  transition: transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease);
}
.post-toc-fab:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
body.contact-modal-open .post-toc-fab,
body.nav-open .post-toc-fab,
body.post-toc-panel-open .post-toc-fab { opacity: 0; pointer-events: none; }

.post-toc-panel {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.post-toc-panel.is-active { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.post-toc-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 19, 15, .45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.post-toc-panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: var(--bg);
  transform: translateY(16px);
  transition: transform .4s var(--ease);
}
.post-toc-panel.is-active .post-toc-panel__inner { transform: translateY(0); }
.post-toc-panel .post-toc { margin: 0; padding: 34px 28px 28px; }
.post-toc-panel__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s var(--ease);
}
.post-toc-panel__close span { position: absolute; width: 13px; height: 1px; background: var(--ink); }
.post-toc-panel__close span:first-child { transform: rotate(45deg); }
.post-toc-panel__close span:last-child { transform: rotate(-45deg); }
.post-toc-panel__close:hover { border-color: var(--ink); }

/* =========================================================
   404
   ========================================================= */
.error-page { text-align: center; padding: 64px 0; }
.error-page__code {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(64px, 15vw, 220px);
  line-height: 1;
  color: var(--line-strong);
  margin: 0;
}
.error-page p { color: var(--ink-soft); margin: 12px 0 32px; }

/* =========================================================
   Floating contact button + modal
   ========================================================= */
.contact-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 15px 24px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(26, 26, 24, .2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.contact-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26, 26, 24, .26); }
.contact-fab__icon { width: 16px; height: 16px; flex: none; overflow: visible; }
.contact-fab__plane-body { fill: var(--bg); }
.contact-fab__plane-fold { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .4; }
body.contact-modal-open .contact-fab { opacity: 0; pointer-events: none; }
body.nav-open .contact-fab { opacity: 0; pointer-events: none; }

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.contact-modal.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease), visibility 0s;
}
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 19, 15, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.contact-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: min(720px, 88vh);
  overflow-y: auto;
  background: var(--bg);
  padding: 48px 44px;
  transform: translateY(16px);
  transition: transform .4s var(--ease);
}
.contact-modal.is-active .contact-modal__panel { transform: translateY(0); }
.contact-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .3s var(--ease);
}
.contact-modal__close span {
  position: absolute;
  width: 14px;
  height: 1px;
  background: var(--ink);
}
.contact-modal__close span:first-child { transform: rotate(45deg); }
.contact-modal__close span:last-child { transform: rotate(-45deg); }
.contact-modal__close:hover { border-color: var(--ink); }
.contact-modal__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin: 6px 0 14px;
}
.contact-modal__lead {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0 0 32px;
}
.contact-modal__form .form-row:last-of-type { margin-bottom: 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .only-mobile { display: inline; }
  /* the 3 phrases used to hard-break onto their own line each on mobile —
     now kept on a single line, sized to still fit at phone widths */
  #philosophy .section-title {
    font-size: clamp(15px, 5vw, 21px);
    white-space: nowrap;
  }
  /* 「引き算した先に、残るもの。」= 15 characters — same one-line treatment */
  .closing__title {
    font-size: clamp(15px, 5vw, 21px);
    white-space: nowrap;
  }
  .philosophy-intro { grid-template-columns: 1fr; gap: 32px; }
  .noise-grid { max-width: 300px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child { grid-column: 1 / -1; text-align: center; }
  .stat:last-child .stat__head { justify-content: center; }
  .points { grid-template-columns: 1fr; gap: 0; }
  .point { margin-bottom: 8px; }
  .cards { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .statement-row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .statement__art { width: 120px; align-self: center; }
  .works { grid-template-columns: 1fr; }
  .work:first-child { grid-column: auto; }
  .closing > .ambient-ring { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .cost-table { font-size: 12.5px; }
  .cost-table th, .cost-table td { padding: 10px; }
  .post-card { grid-template-columns: 1fr; }
  .post-feature { grid-template-columns: 1fr; gap: 24px; }
  .related-posts__grid { grid-template-columns: 1fr; gap: 32px; }
  .post-compare { grid-template-columns: 1fr; gap: 12px; }
  .case, .case:nth-child(even) { flex-direction: column; gap: 28px; }
  .case__media, .case__body { flex: none; width: 100%; }
  .case-list { gap: 64px; }
  .process__step { grid-template-columns: 44px 1fr; gap: 16px; }
  .plans { grid-template-columns: 1fr; gap: 20px; }
  .plan-card__num { font-size: 96px; }
  .page-nav { gap: 6px 20px; margin-bottom: 56px; }
  .discount-note { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero { padding-top: 90px; }
  /* sized so the longest of the 3 lines (語りはじめる。= 7 characters) still
     fits on one line beside the ring — all 3 lines share this one size */
  .hero__title {
    font-size: clamp(16px, 6.5vw, 26px);
    line-height: 1.5;
    letter-spacing: .05em;
    margin: 22px 0 30px;
  }
  .hero__title .reveal-line { white-space: nowrap; }
  .hero__inner { gap: 16px; }
  .hero__inner .ambient-ring { width: min(100px, 26vw); margin-right: min(24px, 6vw); }
  .eyebrow--hero .eyebrow__index, .eyebrow--hero .eyebrow__rule { display: none; }
  .hero__sub { font-size: clamp(10px, 3vw, 13px); letter-spacing: .02em; white-space: nowrap; }
  .lead { font-size: 13px; line-height: 1.8; margin-bottom: 40px; }
  .about-grid__text p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
  .reason p, .point p, .card p, .statement p, .value__body p { font-size: 13px; line-height: 1.8; }
  .value { grid-template-columns: 40px 1fr; column-gap: 18px; }
  .values::before { left: 19px; }
  /* 「引き算」から / 生まれる本質。= 7文字ずつの2行。必ず2行に収まるサイズ */
  #about .section-title { font-size: clamp(16px, 6.5vw, 34px); white-space: nowrap; }
  /* ホームページは、/ Web上の「顔」であり「看板」。= 2行目が長いので小さめに固定 */
  #trust .section-title { font-size: clamp(14px, 5.6vw, 24px); white-space: nowrap; }
  /* あいだに、何も置かない。= 12文字、about-gridの狭い方の列で必ず1行に収める */
  #profile .section-title { font-size: clamp(13px, 3.8vw, 27px); white-space: nowrap; }
  /* 些細な修正も、外注先への連絡から。= 17文字で最長。必ず1行に収める */
  .compare__card h3 { font-size: clamp(11px, 3.4vw, 20px); white-space: nowrap; }
  .section { padding: 88px 0; }
  .venn { transform: scale(.9); }
  .contact-info > div { grid-template-columns: 76px 1fr; }
  /* 「それが、yohaku designの約束です。」の前までの77文字を必ず2行に収める */
  .closing__lead { font-size: clamp(6px, 2vw, 14px); line-height: 1.8; }
  /* 丁寧にしつらえられた...整えませんか。= 67文字を必ず3行に収める */
  .closing__body { font-size: clamp(11px, 3.7vw, 15.5px); line-height: 1.8; }
  /* 1行目: ロゴ／2行目: プライバシーポリシー＋コピーライトをまとめる */
  .site-footer__inner { justify-content: center; text-align: center; gap: 8px 16px; }
  .site-footer__inner .brand--footer { flex-basis: 100%; justify-content: center; }
  .plan-card__label { font-size: 11px; padding: 7px 16px; }
  .contact-fab { right: 16px; bottom: 16px; padding: 13px 18px; font-size: 12px; }
  .contact-modal { padding: 12px; }
  .contact-modal__panel { padding: 40px 22px 32px; }
  .post-toc-fab { left: 16px; bottom: 16px; padding: 13px 18px; font-size: 12px; }
  .post-toc-panel { padding: 12px; }
  .overlay-nav { top: 80px; padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}