/* =========================================================
   躍真塗装 LP — styles
   建築デザイナー風 / サンド × フォレストグリーン
   ========================================================= */

:root {
  /* Color tokens — Tweaksから上書き可能 */
  --bg: #EFECE3;
  /* sand */
  --bg-2: #E6E2D5;
  /* deeper sand */
  --ink: #1a1a1a;
  /* near-black */
  --ink-2: #4a463c;
  --ink-soft: rgb(10, 10, 10);
  --line: rgba(26, 26, 26, .15);
  --line-soft: rgba(26, 26, 26, .08);
  --brand: #2E5E3E;
  /* forest green */
  --brand-2: #244B31;
  --brand-soft: #D9E0C8;
  /* light sage */
  --paper: #F8F6EE;
  --shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 60px -20px rgba(40, 30, 10, .18);

  /* Type */
  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --serif-en: "Cormorant", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --hero-h: 100svh;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

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

/* ---------- Layout primitives ---------- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px
}

@media (max-width:768px) {
  .container {
    padding: 0 20px
  }
}

.eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Header ---------- */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}

.hdr.is-scrolled {
  background: rgba(239, 236, 227, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

.hdr-brand {
  display: flex;
  align-items: baseline;
  gap: 10px
}

.hdr-brand .mark {
  font-family: var(--serif-en);
  font-size: 18px;
  letter-spacing: .32em;
  font-weight: 400;
}

.hdr-brand .mark .dot {
  color: var(--brand)
}

.hdr-brand .jp {
  font-family: var(--serif-jp);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 30px
}

.hdr-nav a {
  font-family: var(--sans-jp);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
}

.hdr-nav a:hover {
  color: var(--ink)
}

.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.hdr-nav a:hover::after {
  transform: scaleX(1)
}

.hdr-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--sans-jp);
  font-size: 13px;
  letter-spacing: .06em;
  transition: background .25s ease, transform .25s ease;
}

.hdr-cta:hover {
  background: var(--brand);
  transform: translateY(-1px)
}

.hdr-cta .ph {
  font-size: 12px
}

.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 18px;
  cursor: pointer;
  user-select: none;
}

.burger-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  transform-origin: center;
}

.hdr-burger.is-open .burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hdr-burger.is-open .burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hdr-burger.is-open .burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width:900px) {
  .hdr {
    padding: 18px 20px
  }

  .hdr-nav {
    display: none
  }

  .hdr-cta {
    display: none
  }

  .hdr-burger {
    display: inline-flex
  }
}

/* ---------- Header end group (burger + mobile CTA) ---------- */
.hdr-end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdr-mobile-cta {
  display: none;
}

@media (max-width:900px) {
  .hdr-mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--sans-jp);
    font-size: 12px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
}

/* ---------- HERO common ---------- */
.hero {
  position: relative;
  padding-top: 104px;
  height: var(--hero-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ===== Variant B: WEAZER-leaning — thin nav + full-bleed photo + side text ===== */
.hero-b {
  padding-top: 88px
}

.hero-b .stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 0;
  height: calc(var(--hero-h) - 88px);
}

.hero-b .photo {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
}

.hero-b .photo img {
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
  display: block;
  will-change: transform;
}

.hero-b .photo .overlay-cap {
  position: absolute;
  left: 48px;
  bottom: 42px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.hero-b .photo .overlay-cap .small {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 18px;
  opacity: .85;
  margin-bottom: 8px;
}

.hero-b .photo .overlay-cap .big {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.25;
  letter-spacing: .01em;
}

.hero-b .vertical {
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .4em;
  color: var(--ink-soft);
  align-self: center;
  justify-self: center;
}

.hero-b .vertical .en {
  font-family: var(--serif-en);
  font-style: italic;
  letter-spacing: .05em;
  display: block;
  margin-top: 18px;
}

.below {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 32px 0;
  align-items: end;
  border-top: 1px solid var(--line);
}

.below-hl {
  padding: 24px 44px 32px 0;
}

.below-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.below h1 {
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: clamp(56px, 8.5vw, 110px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
}

.below h1 em {
  font-style: italic;
  color: var(--brand)
}

/* ---------- Hero trees ---------- */
.below-trees {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 36px;
  padding: 0 52px 0 0;
  overflow: hidden;
  height: 185px;
}

.tree {
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(18px);
}


.below.in-view .tree {
  animation: treeIn .75s cubic-bezier(.2, 0, .1, 1) forwards;
}

.below.in-view .tree:nth-child(1) { animation-delay: .1s; }
.below.in-view .tree:nth-child(2) { animation-delay: .22s; }
.below.in-view .tree:nth-child(3) { animation-delay: .34s; }
.below.in-view .tree:nth-child(4) { animation-delay: .46s; }
.below.in-view .tree:nth-child(5) { animation-delay: .58s; }
.below.in-view .tree:nth-child(6) { animation-delay: .70s; }
.below.in-view .tree:nth-child(7) { animation-delay: .82s; }
.below.in-view .tree:nth-child(8) { animation-delay: .94s; }
.below.in-view .tree:nth-child(9) { animation-delay: 1.06s; }
.below.in-view .tree:nth-child(10) { animation-delay: 1.18s; }

@keyframes treeIn {
  to { opacity: 1; transform: translateY(0) }
}

@media (prefers-reduced-motion: reduce) {
  .below .tree { opacity: 1; transform: none }
}

@media (max-width:900px) {
  .hero-b {
    padding-top: 70px;   /* 実ヘッダー高さ(70px)に合わせる */
    padding-bottom: 0;   /* section汎用padding-bottom(120px)を打ち消す */
    height: calc(100svh - 136px);
  }

  /* ヘッダー(70px) + hero画像 + below(136px) = 100svh */
  .hero-b .stage {
    grid-template-columns: 1fr;
    height: calc(100svh - 70px - 136px);
  }

  .hero-b .vertical {
    display: none
  }

  .below {
    grid-template-columns: 3fr 2fr;
    gap: 0;
    padding: 0 14px 0 20px;
    height: 136px;
    align-items: center;
    border-top: 1px solid var(--line-soft);
  }

  .below-hl {
    padding: 0;
    border-right: none;
  }

  .below h1 {
    font-size: clamp(28px, 9.5vw, 44px);
    line-height: 1;
  }

  .below-tag {
    margin: 0 0 6px;
  }

  .below-trees {
    display: flex;
    height: 124px;
    gap: 8px;
    padding: 0;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
  }

  .below-trees .tree {
    height: 65px;
    width: auto;
  }

  .below-trees .tree:nth-child(n+5) {
    display: none;
  }

  .hero-b .photo .overlay-cap {
    left: 20px;
    bottom: 24px
  }
}

/* ---------- Hero CTAs ---------- */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans-jp);
  font-size: 13px;
  letter-spacing: .06em;
  border: 1px solid transparent;
  transition: all .25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg)
}

.btn-primary:hover {
  background: var(--brand);
  transform: translateY(-1px)
}

.btn-line {
  background: #06C755;
  color: #fff
}

.btn-line:hover {
  filter: brightness(1.05);
  transform: translateY(-1px)
}

.btn-ghost {
  border-color: var(--line);
  color: var(--ink)
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(0, 0, 0, .03)
}

.btn .ph {
  font-family: var(--mono);
  font-size: 11px
}

.pulse {
  position: relative
}

.pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--brand);
  opacity: 0;
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    opacity: .6;
    transform: scale(.96)
  }

  100% {
    opacity: 0;
    transform: scale(1.18)
  }
}

@media (prefers-reduced-motion:reduce) {
  .pulse::after {
    animation: none
  }
}

/* ---------- Photo placeholder ---------- */
.ph-img {
  width: 100%;
  height: 100%;
  display: block;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, rgba(0, 0, 0, .05) 12px 24px),
    linear-gradient(180deg, #5a6354 0%, #3b4337 50%, #25281e 100%);
  position: relative;
  color: rgba(255, 255, 255, .78);
}

.ph-img.warm {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, rgba(0, 0, 0, .05) 12px 24px),
    linear-gradient(180deg, #c8a578 0%, #8a6a47 60%, #4a3a2a 100%);
}


.ph-img .ph-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  padding: 5px 9px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}

.ph-img .ph-cap {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
}

/* ---------- Section base ---------- */
section {
  position: relative;
  padding: 120px 0
}

@media (max-width:768px) {
  section {
    padding: 80px 0
  }
}

.s-hd {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-bottom: 56px
}

.s-hd .num {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 18px;
  color: var(--brand);
}

.s-hd .num::before {
  content: "§ ";
  opacity: .6
}

.s-hd .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

.s-hd h2 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.35;
  margin: 0;
  letter-spacing: .01em;
}

.s-hd h2 em {
  font-style: italic;
  font-family: var(--serif-jp);
  font-weight: 400;
  color: var(--brand)
}

.s-hd .lede {
  font-family: var(--sans-jp);
  font-size: 14px;
  line-height: 2;
  color: var(--ink-2);
  font-weight: 300;
  margin-top: 18px;
  max-width: 560px;
}

@media (max-width:768px) {
  .s-hd {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px
  }
}

/* ---------- Worries (お悩み) ---------- */
.worries {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft)
}

.worries .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.worry {
  background: var(--paper);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
}

.worry .qmark {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 36px;
  color: var(--brand);
  line-height: 1;
}

.worry h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.worry p {
  font-family: var(--sans-jp);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0;
  font-weight: 300;
}

@media (max-width:768px) {
  .worries .grid {
    grid-template-columns: 1fr
  }
}

/* ---------- Strengths (強み) ---------- */
.strengths .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.strength {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.strength .marquee {
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: 96px;
  line-height: 1;
  color: var(--brand);
  font-style: italic;
}

.strength h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.55;
  margin: 0;
}

.strength p {
  font-family: var(--sans-jp);
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0;
}

.strength .rule {
  height: 1px;
  background: var(--line);
  margin: 6px 0;
  width: 48px
}

@media (max-width:768px) {
  .strengths .grid {
    grid-template-columns: 1fr;
    gap: 48px
  }
}

/* ---------- Before/After Slider ---------- */
.gallery {
  background: var(--paper);
  padding: 64px 0
}

.gallery .s-hd {
  margin-bottom: 36px
}

.gallery .tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-soft)
}

.gallery .tab {
  padding: 12px 0;
  font-family: var(--sans-jp);
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: all .25s ease;
}

.gallery .tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--ink)
}

.ba-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--shadow);
  user-select: none;
  touch-action: none;
}

.ba-side {
  position: absolute;
  inset: 0
}

.ba-side.after {
  clip-path: polygon(var(--p, 50%) 0, 100% 0, 100% 100%, var(--p, 50%) 100%)
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p, 50%);
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
}

.ba-knob {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  cursor: ew-resize;
}

.ba-label {
  position: absolute;
  top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  padding: 6px 10px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}

.ba-label.before {
  left: 18px
}

.ba-label.after {
  right: 18px
}


/* ---------- Pricing ---------- */
.pricing {
  background: var(--ink);
  color: var(--bg)
}

.pricing .s-hd .lbl,
.pricing .s-hd .num {
  color: rgba(255, 255, 255, .5)
}

.pricing .s-hd .num {
  color: var(--brand-soft)
}

.pricing .s-hd h2 {
  color: var(--bg)
}

.pricing .s-hd .lede {
  color: rgba(255, 255, 255, .65)
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.price-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
}

.price-card .cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--brand-soft)
}

.price-card h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 24px;
  margin: 0
}

.price-card .num {
  font-family: var(--serif-jp);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-card .num .unit {
  font-family: var(--sans-jp);
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .04em
}

.price-card .ex {
  font-family: var(--sans-jp);
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .7);
  font-weight: 300
}

.price-card .note {
  font-family: var(--sans-jp);
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .04em;
  margin-top: auto
}

.price-foot {
  margin-top: 32px;
  padding: 18px 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--sans-jp);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.85;
}

@media (max-width:768px) {
  .price-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- Greeting ---------- */
.greeting .grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start
}

.greeting .img {
  border-radius: 4px;
  overflow: hidden;
  max-height: 500px;
  align-self: start;
}

.greeting .img img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  max-height: 500px;
}

.greeting blockquote {
  margin: 0;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.95;
  letter-spacing: .02em;
}

.greeting blockquote::before {
  content: "\201C";
  font-family: var(--serif-en);
  font-size: 96px;
  color: var(--brand);
  line-height: 0;
  display: block;
  margin-bottom: 32px;
}

.greeting .sig {
  margin-top: 36px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}

.greeting .sig .name {
  font-family: var(--serif-jp);
  font-style: normal;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: .06em
}

@media (max-width:768px) {
  .greeting .grid {
    grid-template-columns: 1fr;
    gap: 32px
  }
}

/* ---------- Process ---------- */
.process .steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.step {
  padding: 32px 18px 32px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.step:last-child {
  border-right: 0
}

.step .n {
  font-family: var(--serif-en);
  font-weight: 300;
  font-size: 46px;
  color: var(--brand);
  line-height: 1;
}

.step h3 {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 18px;
  margin: 0
}

.step p {
  font-family: var(--sans-jp);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-2);
  font-weight: 300;
  margin: 0
}

.step .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-soft)
}

@media (max-width:900px) {
  .process .steps {
    grid-template-columns: 1fr;
    gap: 0
  }

  .step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 0
  }

  .step:last-child {
    border-bottom: 0
  }
}


/* ---------- FAQ ---------- */
.faq .list {
  border-top: 1px solid var(--line)
}

.faq-item {
  border-bottom: 1px solid var(--line)
}

.faq-q {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  gap: 24px;
  padding: 26px 0;
  align-items: start;
}

.faq-q .q {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 22px;
  color: var(--brand);
}

.faq-q .qt {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
}

.faq-q .ic {
  font-family: var(--mono);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
  transition: transform .3s ease
}

.faq-item[aria-expanded="true"] .faq-q .ic {
  transform: rotate(45deg);
  color: var(--brand)
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.faq-item[aria-expanded="true"] .faq-a {
  grid-template-rows: 1fr
}

.faq-a>div {
  overflow: hidden
}

.faq-a .inner {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 0 0 28px;
}

.faq-a .a {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft)
}

.faq-a .at {
  font-family: var(--sans-jp);
  font-size: 14px;
  line-height: 2;
  color: var(--ink-2);
  font-weight: 300
}

@media (max-width:768px) {
  .faq-q {
    grid-template-columns: 32px 1fr 24px;
    gap: 14px;
    padding: 20px 0
  }

  .faq-a .inner {
    grid-template-columns: 32px 1fr;
    gap: 14px
  }
}

/* ---------- Contact form ---------- */
.contact {
  background: var(--ink);
  color: var(--bg)
}

.contact .s-hd .lbl,
.contact .s-hd .num {
  color: rgba(255, 255, 255, .5)
}

.contact .s-hd .num {
  color: var(--brand-soft)
}

.contact .s-hd h2 {
  color: var(--bg)
}

.contact .s-hd .lede {
  color: rgba(255, 255, 255, .65)
}


/* ---------- Service Area (Japan map) ---------- */
.area {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft)
}

.area-stage {
  display: flex;
  gap: 32px;
  align-items: center
}

.area-map {
  position: relative;
  min-height: 300px;
  width: 50%;
  max-width: 420px;
  flex-shrink: 0;
}

.area-side {
  flex: 1;
}

.area-map svg {
  height: auto;
  display: block;
  color: var(--ink);
}

.area-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(26, 26, 26, .4);
}

/* Geolonia SVG prefecture styling — applies to <g class="prefecture"> and its child paths */
.area-map .prefecture path,
.area-map .prefecture {
  fill: rgba(26, 26, 26, .07);
  stroke: rgba(26, 26, 26, .25);
  stroke-width: .6;
  stroke-linejoin: round;
  transition: fill .25s ease, stroke .25s ease;
}

.area-map .prefecture.is-active path,
.area-map .prefecture.is-active {
  fill: var(--brand-soft);
  stroke: var(--brand);
  stroke-width: 1
}

.area-map .prefecture.is-active.is-hover path,
.area-map .prefecture.is-active.is-hover {
  fill: var(--brand);
  stroke: var(--brand-2)
}

.area-map .prefecture.is-inactive path,
.area-map .prefecture.is-inactive {
  fill: rgba(26, 26, 26, .06);
  stroke: rgba(26, 26, 26, .18)
}

.area-map .boundary-line {
  stroke: rgba(26, 26, 26, .3);
  fill: none
}

/* legacy classes kept for back-compat */
.pref {
  fill: rgba(26, 26, 26, .06);
  stroke: rgba(26, 26, 26, .2);
  stroke-width: 1;
  transition: fill .25s ease, stroke .25s ease;
}

.pref.is-active {
  fill: var(--brand-soft);
  stroke: var(--brand);
  stroke-width: 1.4
}

.pref.is-active.is-hover {
  fill: var(--brand);
  stroke: var(--brand-2)
}

.pref-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  fill: rgba(26, 26, 26, .35);
  pointer-events: none;
}

.pref-label.is-active {
  fill: var(--brand-2);
  font-weight: 600
}

.area-side .area-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line)
}

.area-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease, color .25s ease;
}

.area-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 8px;
  transition: transform .25s ease;
}

.area-item.is-hover {
  padding-left: 8px
}

.area-item.is-hover .dot {
  transform: scale(1.4)
}

.area-item .jp {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .04em
}

.area-item .en {
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .06em
}

.area-note {
  margin-top: 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans-jp);
  font-size: 12px;
  line-height: 1.95;
  color: var(--ink-soft);
  font-weight: 300;
}

@media (max-width:900px) {
  .area-stage {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .area-map {
    width: 80%;
    margin-left: auto;
    margin-right: auto
  }

  .area-item .jp {
    font-size: 18px
  }
}

/* ---------- Contact cards (phone + LINE only) ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.contact-card {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
  transition: all .3s ease;
  min-height: 260px;
}

.contact-card:hover {
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5)
}

.contact-card.line {
  border-color: rgba(6, 199, 85, .5);
  background: rgba(6, 199, 85, .06)
}

.contact-card.line:hover {
  border-color: #06C755
}

.cc-meta {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.cc-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-soft)
}

.contact-card.line .cc-kicker {
  color: #9eecbf
}

.cc-jp {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 20px;
  color: var(--bg)
}

.cc-num {
  font-family: var(--serif-jp);
  font-weight: 300;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--bg);
  margin-top: auto;
}

.cc-num.cc-line {
  font-style: italic;
  color: #fff
}

.cc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--sans-jp);
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.cc-arrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--brand-soft)
}

.contact-card.line .cc-arrow {
  color: #9eecbf
}

.contact-foot {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  font-family: var(--sans-jp);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.95;
  text-align: center;
}

@media (max-width:768px) {
  .contact-cards {
    grid-template-columns: 1fr
  }

  .cc-num {
    font-size: 42px
  }
}

/* ---------- Footer / Company ---------- */
.foot {
  background: var(--bg-2);
  padding: 80px 0 36px
}

.foot .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px
}

.foot .mark {
  font-family: var(--serif-en);
  font-size: 24px;
  letter-spacing: .32em;
  margin-bottom: 8px;
}

.foot .mark .dot {
  color: var(--brand)
}

.foot .jp {
  font-family: var(--serif-jp);
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 18px
}

.foot p {
  font-family: var(--sans-jp);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-2);
  font-weight: 300
}

.foot h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px
}

.foot .area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px
}

.foot .area {
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: .04em
}

.foot .info dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  margin-top: 10px
}

.foot .info dd {
  margin: 2px 0 0;
  font-family: var(--sans-jp);
  font-size: 13px;
  color: var(--ink)
}

.foot .copy {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

@media (max-width:900px) {
  .foot .grid {
    grid-template-columns: 1fr;
    gap: 36px
  }
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 18, 12, .78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn .25s ease;
}

.modal .frame {
  position: relative;
  max-width: 1100px;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.modal .x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--mono);
}

.modal .cap {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ---------- Reveal animation (initial state — GSAP controls transitions) ---------- */
.reveal {
  opacity: 0;
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
  }
}


/* ---------- Floating phone (mobile) ---------- */
.float-phone {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 55;
  display: none;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: var(--sans-jp);
  font-size: 13px;
  letter-spacing: .06em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

/* float-phone は hdr-mobile-cta に統合したため非表示 */

.ba-img-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  background: rgba(0, 0, 0, .32);
  color: #fff;
  padding: 5px 9px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
  z-index: 1;
}

/* ── Vanilla JS patch: ba-wrap / ph-img height fix ──────── */
.ba-side {
  position: absolute;
  inset: 0;
}

.ba-side .ph-img {
  width: 100%;
  height: 100%;
}

.ba-wrap {
  cursor: ew-resize;
}

/* modal flex */
.modal {
  display: flex;
}

/* footer area spacing */
.foot .area {
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* ---------- Scroll hint ---------- */
.scroll-hint {
  position: absolute;
  bottom: 28px;
  right: 0;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: shFadeIn 0.5s ease 0.3s forwards;
  transition: opacity .4s ease;
  pointer-events: none;
}

.scroll-hint.is-hidden {
  opacity: 0 !important;
}

.sh-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink-soft);
  writing-mode: vertical-rl;
}

.sh-bar {
  width: 2px;
  height: 52px;
  background: rgba(26, 26, 26, .2);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.sh-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brand);
  box-shadow: 0 0 6px var(--brand);
  border-radius: 1px;
  animation: shSlide 2s ease-in-out 0.8s infinite;
}

@keyframes shFadeIn {
  to { opacity: .85 }
}

@keyframes shSlide {
  0%   { top: -100% }
  45%  { top: 100% }
  100% { top: 100% }
}

@media (max-width:900px) {
  .scroll-hint { display: none }
}

@media (prefers-reduced-motion:reduce) {
  .scroll-hint { animation: none; opacity: .7 }
  .sh-bar::after { animation: none }
}

/* ---------- Mobile nav ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(239, 236, 227, .97);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 72px 32px 48px;
  transform: translateY(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.mobile-nav.is-open {
  transform: translateY(0);
  pointer-events: all;
}

.mn-link {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .04em;
  line-height: 1;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  display: block;
  transition: color .2s ease, padding-left .2s ease;
}

.mn-link:hover {
  color: var(--brand);
  padding-left: 8px;
}