:root {
    --black: #0D0E10; --white: #EFEFEA; --paper: #F6F6F2; --lime: #9EFF35; --lime-d: #86E522;
    --gray: #6F7278; --gray-l: #A9ABB0; --line: #DCDCD6; --line-d: #2A2C30; --card-d: #16181C;
    --ease: cubic-bezier(.2,.8,.2,1); --ease2: cubic-bezier(.76,0,.24,1);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: auto; background: var(--black); }
  body { margin: 0; background: var(--black); color: var(--black); font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; }
  .en { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; }
  .serif { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; font-style: normal; font-weight: 700; }
  .label { font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding-top: .15em; display: flex; align-items: center; gap: 10px; }
  .h2 { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -.03em; margin: 0; padding-top: .1em; }
  .h2ja { font-size: 15px; font-weight: 700; color: var(--black); margin: 0; }
  .dark .h2ja { color: var(--white); }
  .sec { padding: 128px 80px; position: relative; }
  .wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
  .two { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; }
  .sticky { position: sticky; top: 120px; }
  .head { display: flex; flex-direction: column; gap: 14px; }
  .light { background: var(--white); color: var(--black); }
  .dark { background: var(--black); color: var(--white); }
  /* セクションのつなぎ方をそれぞれ変える */
  #price { clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%); margin-top: -5vw; padding-top: calc(128px + 5vw); }   /* 斜めに入る */
  #flow { padding-bottom: calc(128px + 56px); }
  #engineer { border-radius: 56px 56px 0 0; margin-top: -56px; position: sticky; top: 0; z-index: 0; }                   /* 角丸で被さり、次に覆われる */
  #equipment { position: relative; z-index: 2; box-shadow: 0 -30px 60px rgba(13,14,16,.18); }
  #engineer ~ * { position: relative; z-index: 2; }
  #faq { clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); margin-top: -5vw; padding-top: calc(128px + 5vw); border-radius: 0 0 56px 56px; margin-bottom: -56px; position: relative; z-index: 3; padding-bottom: calc(128px + 40px); }
  #access { padding-top: calc(128px + 56px); }
  /* パララックス画像の帯 */
  .band { position: relative; height: 64vh; min-height: 440px; overflow: hidden; background: var(--black); color: var(--white); }
  .band img { position: absolute; left: 0; top: -22%; width: 100%; height: 144%; object-fit: cover; opacity: .5; filter: grayscale(.25) contrast(1.08); }
  .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.55), rgba(13,14,16,.1) 40%, rgba(13,14,16,.65)); }
  .band .cap { position: absolute; left: 80px; right: 80px; bottom: 64px; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .band .cap .t { font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: clamp(32px, 4.6vw, 72px); letter-spacing: -.03em; line-height: 1; }
  .band .cap .t em { font-style: normal; color: var(--lime); }
  .band .cap .s { font-size: 14px; color: var(--gray-l); line-height: 1.8; max-width: 360px; text-align: right; }
  .band.short { height: 42vh; min-height: 300px; }
  .band.short .cap { bottom: auto; top: 50%; transform: translateY(-50%); justify-content: center; }
  .band.short .marquee { border: 0; padding: 0; width: 100%; }
  .band.short .marquee .track { font-size: clamp(28px, 4vw, 56px); font-weight: 700; letter-spacing: -.02em; color: var(--white); gap: 64px; animation-duration: 40s; }
  .band.short .marquee .track span::after { width: 10px; height: 10px; margin-left: 64px; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .02em; white-space: nowrap; border: 0; cursor: pointer; transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn svg { transition: transform .35s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }
  .btn-primary { background: var(--lime); color: var(--black); }
  .btn-primary:hover { background: var(--lime-d); box-shadow: 0 12px 30px rgba(158,255,53,.35); }
  .btn-ghost { background: transparent; color: currentColor; border: 1.5px solid currentColor; }
  .light .btn-ghost:hover { background: var(--black); color: var(--white); border-color: var(--black); }
  .dark .btn-ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
  .btn-black { background: var(--black); color: var(--white); }
  .btn-black:hover { background: #222; }

  .card { background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; }
  .dark .card { background: var(--card-d); border-color: var(--line-d); }
  .ph { background: #E9E9E6; background-image: repeating-linear-gradient(135deg, transparent 0 14px, #DEDEDA 14px 15px); color: #8A8D93; font-family: "Josefin Sans", sans-serif; font-size: 12px; letter-spacing: .14em; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }
  .dark .ph { background: #1C1E22; background-image: repeating-linear-gradient(135deg, transparent 0 14px, #26282D 14px 15px); color: #6F7278; }

  /* ---------- opening ---------- */
  #opening { position: fixed; inset: 0; z-index: 1000; background: var(--black); color: var(--white); pointer-events: none; }
  #opening .words { position: absolute; top: 28px; left: 32px; display: flex; flex-direction: column; gap: 2px; font-family: "Josefin Sans", sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
  #opening .words span { opacity: 0; transform: translateY(6px); animation: wIn .5s var(--ease) forwards; }
  #opening .count { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); font-family: "Josefin Sans", sans-serif; font-size: 12px; letter-spacing: .2em; display: flex; align-items: baseline; gap: 12px; }
  #opening .count b { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 56px; letter-spacing: 0; line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }
  #opening .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--line-d); }
  #opening .bar i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .12s linear; }
  #opening.done { transition: opacity .6s .5s; opacity: 0; }
  @keyframes wIn { to { opacity: 1; transform: none; } }
  #page { transform-origin: 0 0; }
  body.booting #page { transform: scale(.32); }
  body.reveal #page { transition: transform 1.3s var(--ease2); transform: scale(1); }
  body.ready #page { transform: none; transition: none; }
  body.booting { overflow: hidden; }

  /* ---------- cursor ---------- */
  #cursor { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .3s; will-change: transform; opacity: 0; }
  #cursor.is-hover { width: 48px; height: 48px; }
  @media (hover: hover) and (pointer: fine) { body, body a, body button, body summary, body input { cursor: none; } #cursor { opacity: 1; } }

  /* ---------- fixed blend UI (inverts over dark/light) ---------- */
  .blend { color: var(--white); transition: color .35s; }
  .blend.on-light { color: var(--black); }
  .side { position: fixed; left: 32px; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 200; font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl; pointer-events: none; }
  .counter { position: fixed; right: 32px; bottom: 32px; z-index: 200; transition: opacity .4s, transform .4s var(--ease); }
  .counter.hide { opacity: 0; transform: translateY(10px); }
  .side { transition: opacity .5s; }
  .side.hide { opacity: 0; }
  .counter-x { position: fixed; right: 32px; bottom: 32px; z-index: 200; font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: .24em; pointer-events: none; display: flex; align-items: center; gap: 12px; }
  .counter i { display: block; width: 60px; height: 1px; background: currentColor; position: relative; }
  .counter i::after { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateX(calc(var(--pg, 0) * 55px)); transition: transform .3s var(--ease); }

  /* ---------- reveal ---------- */
  .rv { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
  .rv.in { opacity: 1; transform: none; }
  .rv-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease2); transition-delay: var(--d, 0s); }
  .rv-img.in { clip-path: inset(0 0 0 0); }
  /* 見出し：1文字ずつ左からフェードイン（andmade方式） */
  .ch { display: inline-block; opacity: 0; animation: chr .25s ease-out forwards; animation-delay: var(--cd, 0s); }
  @keyframes chr { 0% { opacity: 0; transform: translateX(-2px); } 100% { opacity: 1; transform: none; } }
  .rv-line { position: relative; }
  .rv-line::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: .18; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease2); }
  .rv-line.in::after { transform: scaleX(1); }
  [data-px] { will-change: transform; }
  @media (prefers-reduced-motion: reduce) { .rv, .rv-img { opacity: 1; transform: none; clip-path: none; transition: none; } #opening { display: none; } body.booting #page { transform: none; } [data-px] { transform: none !important; } }

  /* ---------- header ---------- */
  /* header pieces are fixed individually (no wrapper stacking context) so mix-blend-mode inverts against the page */
  .gh, .gh .right { display: contents; }
  .gh-bg { position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 290; backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); pointer-events: none; }
  .logo { font-family: "Josefin Sans", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; padding-top: .15em; }
  .logo i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); margin-top: -.15em; }
  .gh .logo { position: fixed; top: 0; left: 40px; height: 80px; z-index: 300; }
  .gh .logo i { visibility: hidden; }
  .gh .logo .lg { height: 30px; width: auto; display: block; }
  .gh .logo, .gnav { mix-blend-mode: difference; color: #fff !important; }
  .logo-dot { display: none !important; }
  /* ドットは反転させずライムのまま出す */
  .logo-dot { position: fixed; top: 0; left: 40px; height: 80px; width: 12px; z-index: 301; display: flex; align-items: center; pointer-events: none; }
  .logo-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); margin-top: -.15em; }
  .gnav { position: fixed; top: 0; right: 214px; height: 80px; z-index: 300; display: flex; align-items: center; gap: 28px; font-family: "Josefin Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .08em; padding-top: .2em; }
  .gh .btn { position: fixed; top: 18px; right: 40px; z-index: 300; }
  .gnav a { position: relative; padding: 4px 0; }
  .gnav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
  .gnav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .gh .btn { height: 44px; padding: 0 22px; font-size: 14px; }
  .burger { display: none; position: fixed; top: 10px; right: 12px; z-index: 300; width: 44px; height: 44px; border: 0; background: none; padding: 0; align-items: center; justify-content: center; color: inherit; }

  /* ---------- hero (fixed, content slides over) ---------- */
  .hero { position: fixed; inset: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden; color: var(--white); background: var(--black); }
  /* 有機的な図形が漂い、時々くっついて新しい形になる（metaball） */
  /* 写真スライド＋回る円形マーク（mont方式） */
  .slides { position: absolute; inset: 0; overflow: hidden; background: var(--black); }
  .hero .grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; mix-blend-mode: overlay; image-rendering: pixelated; pointer-events: none; }
  .slides .sl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.6s var(--ease); filter: grayscale(.2) brightness(.6) contrast(1.05); }
  .slides .sl.on { opacity: 1; animation: kb 7s linear forwards; }
  @keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
  /* マーク：回り続ける円形テキスト */
  .mark { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -60%); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 1.2s var(--ease) .6s; z-index: 2; }
  body.reveal .mark { opacity: 1; }
  .mark .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
  .mark .ring text { font-family: "Josefin Sans", sans-serif; font-size: 10.6px; font-weight: 700; letter-spacing: .2em; fill: currentColor; }
  .mark .core { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
  .mark .core img { width: 92px; height: auto; display: block; transition: transform .5s var(--ease); filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
  .mark:hover .core img { transform: scale(1.08); }
  .dots { position: absolute; left: 40px; bottom: 48px; display: flex; gap: 14px; z-index: 2; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239,239,234,.35); transition: background .3s, transform .3s; }
  .dots i.on { background: var(--lime); transform: scale(1.3); }
  .fvbtn { position: absolute; right: 40px; bottom: 36px; z-index: 2; height: 56px; padding: 0 22px 0 28px; border: 1px solid rgba(239,239,234,.4); color: var(--white); background: rgba(13,14,16,.25); backdrop-filter: blur(8px); gap: 16px; }
  .fvbtn .o { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--white); position: relative; }
  .fvbtn .o::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--lime); }
  .fvbtn:hover { background: var(--lime); color: var(--black); border-color: var(--lime); }
  .fvbtn:hover .o { border-color: var(--black); } .fvbtn:hover .o::after { background: var(--black); }

  .hero .bg { position: absolute; inset: -12% 0 0; height: 124%; background:
      radial-gradient(60% 50% at 70% 30%, rgba(158,255,53,.06), transparent 60%),
      linear-gradient(180deg, rgba(23,25,29,.35) 0%, rgba(13,14,16,.2) 100%);
    will-change: transform; }
  .hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.25) 0%, rgba(13,14,16,0) 35%, rgba(13,14,16,.55) 75%, rgba(13,14,16,.9) 100%); pointer-events: none; }
  .hero .phtag { position: absolute; top: 100px; right: 40px; font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: .2em; color: var(--gray); border: 1px solid var(--line-d); border-radius: 999px; padding: 8px 14px 6px; }
  .hero .inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 56px; display: flex; flex-direction: column; gap: 18px; }
  .hero .hlead { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gray-l); display: flex; align-items: center; gap: 12px; }
  /* タイプライター */
  .tw { display: none; }
  .tw.on { display: inline; }
  .caret { display: inline-block; width: 1px; height: 1em; background: var(--lime); margin-left: 2px; vertical-align: -.15em; animation: blink .8s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .hero .big { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; letter-spacing: -.01em; margin: 0; white-space: nowrap; }
  .hero .sub { font-size: 11px; letter-spacing: .26em; color: var(--gray-l); padding-top: .2em; }
  .hero .big em { font-style: italic; color: var(--lime); white-space: nowrap; }
  .hero .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 8px; }
  .hero .row p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--gray-l); max-width: 520px; }
  .hero .meta { display: flex; gap: 28px; font-size: 11px; letter-spacing: .22em; color: var(--gray); padding-top: .2em; }
  .hero .meta span { display: flex; align-items: center; gap: 10px; }
  .hero .meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
  .hero .scroll { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: .24em; color: var(--gray-l); display: flex; align-items: center; gap: 12px; }
  .hero .scroll i { width: 1px; height: 56px; background: var(--line-d); position: relative; overflow: hidden; }
  .hero .scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: var(--lime); animation: sc 1.8s var(--ease) infinite; }
  @keyframes sc { 0% { transform: translateY(-100%); } 60% { transform: translateY(200%); } 100% { transform: translateY(200%); } }
  .hero .sp { position: relative; }
  .hero-space { height: 100vh; height: 100svh; }
  .after { position: relative; z-index: 1; box-shadow: 0 -40px 80px rgba(0,0,0,.35); }

  /* hero text entrance */
  .hero .hlead, .hero .big, .hero .row { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  body.reveal .hero .hlead { opacity: 1; transform: none; transition-delay: .9s; }
  body.reveal .hero .big { opacity: 1; transform: none; transition-delay: 1.05s; }
  body.reveal .hero .row { opacity: 1; transform: none; transition-delay: 1.25s; }

  /* ---------- marquee ---------- */
  .marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 16px 0; white-space: nowrap; }
  .marquee .track { display: inline-flex; gap: 48px; animation: mq 30s linear infinite; font-family: "Josefin Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .22em; padding-top: .2em; }
  .marquee .track span::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-left: 48px; vertical-align: middle; }
  @keyframes mq { to { transform: translateX(-50%); } }

  /* ---------- facts ---------- */
  .facts { padding: 96px 80px 128px; max-width: 1280px; margin: 0 auto; width: 100%; position: relative; }
  .facts .g { position: relative; z-index: 1; }
  .facts .g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .facts .card { padding: 36px; display: flex; flex-direction: column; gap: 12px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s; }
  .facts .card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(13,14,16,.08); }
  .facts .big { font-family: "Josefin Sans", sans-serif; font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1; padding-top: .1em; }
  .facts .big.ja { font-family: inherit; }
  .facts .big small { font-size: 16px; color: var(--gray); margin-left: 6px; font-weight: 500; }
  .facts .sub { font-size: 14px; color: var(--gray); }

  /* ---------- about ---------- */
  #about .lead { margin: 0; font-size: 30px; line-height: 1.6; font-weight: 700; letter-spacing: -.01em; }
  #about .body { margin: 0; font-size: 16px; line-height: 2; color: var(--gray); }
  .photos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .photos3 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; filter: grayscale(.15) contrast(1.05); }
  .photos3 > div:nth-child(2) { margin-top: 48px; }
  .photos3 > div:nth-child(3) { margin-top: 96px; }

  /* ---------- price ---------- */
  .pbox { padding: 44px; display: flex; flex-direction: column; gap: 30px; }
  .pbox .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .pbox .hours { font-family: "Josefin Sans", sans-serif; font-size: 22px; font-weight: 600; color: var(--gray-l); padding-top: .2em; }
  .pbox .hours b { color: var(--white); font-size: 60px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
  .pbox .price { font-family: "Josefin Sans", sans-serif; font-size: 76px; font-weight: 700; letter-spacing: -.03em; line-height: 1; padding-top: .1em; transition: transform .3s var(--ease); color: var(--lime); }
  .pbox .price.bump { transform: scale(1.04); }
  .pbox .price small { font-size: 16px; color: var(--gray-l); font-weight: 500; letter-spacing: 0; margin-left: 8px; }
  .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--black); background: var(--lime); border-radius: 999px; padding: 6px 12px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
  .tag.on { opacity: 1; transform: none; }
  .range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--lime) 0 var(--p, 20%), var(--line-d) var(--p, 20%) 100%); outline: none; margin: 8px 0 0; }
  .range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--black); border: 3px solid var(--lime); box-shadow: 0 4px 14px rgba(158,255,53,.35); cursor: pointer; transition: transform .2s var(--ease); }
  .range::-webkit-slider-thumb:hover { transform: scale(1.12); }
  .range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--black); border: 3px solid var(--lime); cursor: pointer; }
  .ticks { display: flex; justify-content: space-between; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--gray); padding-top: .2em; }
  .ticks span.hot { color: var(--lime); }
  .pnote { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--gray-l); border-top: 1.5px solid var(--line-d); padding-top: 22px; }
  .pnote div { display: flex; align-items: center; gap: 8px; }
  .pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pgrid div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line-d); border-radius: 10px; font-size: 14px; color: var(--gray-l); }
  .pgrid div b { font-family: "Josefin Sans", sans-serif; font-weight: 700; padding-top: .2em; color: var(--white); }
  .pgrid div.hot { border-color: var(--lime); color: var(--white); }
  /* 3h〜 の補足 */
  .psub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; line-height: 1.7; color: var(--gray-l); }
  .psub .pb { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; border: 1px solid var(--lime); border-radius: 999px; padding: 6px 13px 5px; color: var(--lime); font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 14px; }
  .psub .pb b { font-size: 11px; letter-spacing: .1em; color: var(--white); font-weight: 700; }
  details.all { border-top: 1.5px solid var(--line-d); padding-top: 22px; }
  details.all summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
  details.all summary::-webkit-details-marker { display: none; }
  details.all summary svg { transition: transform .35s var(--ease); }
  details.all[open] summary svg { transform: rotate(180deg); }
  details.all .pgrid { margin-top: 16px; }
  .pside { padding: 26px; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; border-color: var(--lime); }
  .pside .n { font-size: 14px; color: var(--gray-l); line-height: 1.7; }

  /* ---------- info / availability ---------- */
  .info3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .icard { border: 1.5px solid var(--line-d); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
  .ic-l { font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--lime); padding-top: .15em; }
  .ic-b b { font-family: "Josefin Sans", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
  .ic-s { font-size: 13px; line-height: 1.7; color: var(--gray-l); }
  .av-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 72px 0 28px; flex-wrap: wrap; }
  .av-head .h2ja { margin-top: 6px; }
  .av-legend { display: flex; gap: 10px; flex-wrap: wrap; }
  .av-legend .lg { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 7px 14px; border: 1.5px solid; }
  .av-legend .lg.ok { color: var(--lime); border-color: var(--lime); background: rgba(158,255,53,.1); }
  .av-legend .lg.few { color: #FFD60A; border-color: #FFD60A; background: rgba(255,214,10,.1); }
  .av-legend .lg.full { color: var(--gray); border-color: var(--line-d); }
  /* 1ヶ月だけ出してコンパクトに。中央寄せで幅を絞る */
  .avmonths { max-width: 560px; margin: 0 auto; }
  .avnav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 18px; }
  .avarr { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-d); background: transparent;
           color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer;
           transition: background .25s, border-color .25s, opacity .25s; }
  .avarr:hover:not(:disabled) { background: var(--lime); border-color: var(--lime); color: var(--black); }
  .avarr:disabled { opacity: .25; cursor: default; }
  .avm-t { font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; min-width: 132px; justify-content: center; }
  .avm-t span { font-size: 12px; letter-spacing: .14em; color: var(--gray); }
  .avgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .avw { font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gray); text-align: center; padding-bottom: 6px; }
  .avw.s0 { color: #FF7A6B; } .avw.s6 { color: #79B6FF; }
  .avd { aspect-ratio: 1 / 1; border: 1.5px solid var(--line-d); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .25s var(--ease), border-color .25s, background .25s; }
  .avd .d { font-family: "Josefin Sans", sans-serif; font-size: 15px; font-weight: 700; line-height: 1; color: var(--gray-l); }
  .avd .m { font-size: 17px; line-height: 1; font-weight: 700; }
  .avd.ok { border-color: rgba(158,255,53,.55); background: rgba(158,255,53,.12); }
  .avd.ok .m, .avd.ok .d { color: var(--lime); }
  .avd.few { border-color: rgba(255,214,10,.55); background: rgba(255,214,10,.12); }
  .avd.few .m, .avd.few .d { color: #FFD60A; }
  .avd.full { background: transparent; opacity: .4; } .avd.full .m, .avd.full .d { color: var(--gray); }
  .avd.na .m { color: var(--gray); }
  .avd.past { opacity: .18; pointer-events: none; }
  .avd.pad { border: 0; pointer-events: none; }
  a.avd:hover { transform: translateY(-3px); border-color: var(--lime); }
  .av-note { margin-top: 20px; font-size: 13px; color: var(--gray-l); }
  .av-note span { color: var(--gray); }

  /* ---------- flow ---------- */
  #flow .top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; }
  #flow .total { text-align: right; display: flex; flex-direction: column; gap: 4px; }
  #flow .total b { font-family: "Josefin Sans", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  #flow .total span { font-size: 13px; color: var(--gray); }
  /* 矢印型のステップ。表示時に順番に点灯し、その後ライムの光が周期的に流れる */
  .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .step { --cut: 22px; position: relative; background: #E6E6E0; color: var(--black); padding: 26px 22px 26px 34px; min-height: 176px; display: flex; flex-direction: column; gap: 10px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%, var(--cut) 50%); transition: background .5s, color .5s; }
  .step:first-child { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%); padding-left: 24px; }
  .step.last { background: var(--black); color: var(--white); }
  .step .n { font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--gray); display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
  .step.last .n { color: var(--gray-l); }
  .step .n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
  .step .t { font-family: "Josefin Sans", sans-serif; font-size: 21px; font-weight: 700; padding-top: .1em; position: relative; z-index: 1; }
  .step .d { font-size: 12.5px; line-height: 1.7; color: var(--gray); position: relative; z-index: 1; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  /* ホバーで詳細が浮き上がる */
  .step { min-height: 196px; cursor: default; }
  .step .x { position: absolute; left: 34px; right: 24px; top: 84px; font-size: 12.5px; line-height: 1.75; color: var(--white); opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease) .05s, transform .45s var(--ease) .05s; z-index: 1; pointer-events: none; }
  .step:first-child .x { left: 24px; }
  @media (hover: hover) {
    .step:hover { background: var(--black); color: var(--white); }
    .step:hover .d { opacity: 0; transform: translateY(-6px); }
    .step:hover .x { opacity: 1; transform: none; }
    .step:hover .n { color: var(--gray-l); }
    .step.last:hover { background: var(--lime); color: var(--black); }
    .step.last:hover .x { color: var(--black); }
    .step.last:hover .n { color: rgba(13,14,16,.6); }
  }
  .step.last .d { color: var(--gray-l); }
  .flow-note { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gray); }
  .flow-note .en { font-size: 11px; letter-spacing: .2em; color: var(--black); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 4px; }

  /* ---------- engineer ---------- */
  #engineer .wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 80px; align-items: center; }
  #engineer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 30%; border-radius: 24px; }
  #engineer .name { display: flex; align-items: baseline; gap: 16px; }
  #engineer .name .h2 { font-size: 72px; }
  #engineer p { margin: 0; font-size: 15px; line-height: 2; color: var(--gray-l); }
  .chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
  .chips div { border: 1px solid var(--line-d); border-radius: 999px; padding: 8px 16px 7px; font-size: 13px; font-weight: 500; }
  .links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; margin-top: 16px; padding-top: 28px; border-top: 1.5px solid var(--line-d); }
  .lk { display: flex; flex-direction: column; gap: 14px; }
  .sns-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .sns-row a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line-d); border-radius: 999px; font-size: 13px; font-weight: 500; transition: border-color .3s, background .3s, color .3s; }
  .sns-row a:hover { border-color: var(--lime); background: var(--lime); color: var(--black); }
  .works { display: flex; flex-direction: column; }
  .wk { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1.5px solid var(--line-d); }
  .wk:last-child { border-bottom: 1.5px solid var(--line-d); }
  .wk .n { font-size: 11px; letter-spacing: .14em; color: var(--gray); padding-top: .2em; }
  .wk .wt { font-size: 14px; font-weight: 700; }
  .wk .wd { font-size: 12px; color: var(--gray-l); line-height: 1.6; margin-top: 3px; }
  .wl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .wl a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-d); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: border-color .3s, background .3s, color .3s; }
  .wl a:hover { border-color: var(--lime); background: var(--lime); color: var(--black); }

  /* ---------- equipment ---------- */
  .eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .eq .card { padding: 20px 20px 26px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .eq .card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(13,14,16,.08); }
  .eq .card .im { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
  .eq .card .im img, .eq .card .im .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
  .eq .card:hover .im img { transform: scale(1.04); }
  .eq .card .label { color: var(--gray); }
  .eq .card .t { font-size: 17px; font-weight: 700; line-height: 1.7; }

  /* ---------- faq ---------- */
  .acc { border-top: 1.5px solid var(--line-d); }
  .acc:last-child { border-bottom: 1.5px solid var(--line-d); }
  .acc button { width: 100%; background: none; border: 0; padding: 28px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; gap: 16px; align-items: center; text-align: left; font-size: 17px; font-weight: 700; color: var(--white); cursor: pointer; }
  .acc button .q { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 20px; color: var(--lime); line-height: 1; padding-top: .15em; }
  .acc button .ic { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-d); display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; }
  .acc button .ic svg { transition: transform .4s var(--ease); stroke: var(--white); }
  .acc.open button .ic { background: var(--lime); border-color: var(--lime); }
  .acc.open button .ic svg { transform: rotate(45deg); stroke: var(--black); }
  .acc .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
  .acc.open .a { grid-template-rows: 1fr; }
  .acc .a > div { overflow: hidden; }
  .acc .a p { margin: 0; padding: 0 48px 30px 44px; font-size: 15px; color: var(--gray-l); line-height: 1.9; }

  /* ---------- access ---------- */
  .acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
  .route { display: flex; flex-direction: column; margin: 8px 0 12px; }
  .route .st { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: center; }
  .route .st .o { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--black); background: var(--white); display: flex; align-items: center; justify-content: center; }
  .route .st .o.b { border-color: var(--black); background: var(--lime); }
  .route .st .o.b::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--black); }
  .route .st .nm { font-size: 20px; font-weight: 700; }
  .route .st .nm small { font-size: 12px; font-weight: 700; color: #fff; background: var(--black); border-radius: 6px; padding: 3px 8px; margin-right: 10px; vertical-align: middle; }
  .route .st a.nm { display: inline-flex; align-items: center; gap: 8px; transition: color .3s; }
  .route .st a.nm svg { opacity: .45; transition: transform .35s var(--ease), opacity .3s; }
  .route .st a.nm:hover { color: var(--gray); } .route .st a.nm:hover svg { opacity: 1; transform: translate(2px,-2px); }
  .route + .route { margin-top: 8px; }
  .route .seg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
  .route .seg .ln { justify-self: center; width: 3px; height: 56px; background: repeating-linear-gradient(to bottom, var(--black) 0 6px, transparent 6px 11px); }
  .route .seg .ln.walk { background: repeating-linear-gradient(to bottom, var(--gray) 0 3px, transparent 3px 8px); }
  .route .seg .tx { align-self: center; font-size: 14px; color: var(--gray); display: flex; align-items: center; gap: 8px; }
  .route .seg .tx b { font-family: "Josefin Sans", sans-serif; color: var(--black); padding-top: .2em; }
  .acc-note { font-size: 14px; line-height: 1.9; color: var(--gray); border-top: 1.5px solid var(--line); padding-top: 20px; }
  .acc-note strong { color: var(--black); }

  /* ---------- contact ---------- */
  .ul { color: var(--lime); border-bottom: 1px solid currentColor; }
  .cform { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
  .cf { display: flex; flex-direction: column; gap: 8px; }
  .cf > span { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .cf > span i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--black); background: var(--lime); border-radius: 4px; padding: 3px 6px; }
  .cf input, .cf select, .cf textarea { font-family: inherit; font-size: 15px; color: var(--white); background: var(--card-d); border: 1.5px solid var(--line-d); border-radius: 12px; padding: 14px 16px; outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none; }
  .cf textarea { resize: vertical; line-height: 1.8; }
  .cf input::placeholder, .cf textarea::placeholder { color: #565961; }
  .cf input:focus, .cf select:focus, .cf textarea:focus { border-color: var(--lime); }
  .cf select { background-image: linear-gradient(45deg, transparent 50%, var(--gray-l) 50%), linear-gradient(135deg, var(--gray-l) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
  .cbtn { align-self: flex-start; height: 58px; padding: 0 40px; margin-top: 4px; }
  .cmsg { margin: 0; font-size: 14px; color: var(--lime); line-height: 1.8; }

  /* ---------- book ---------- */
  .book { padding: 160px 80px 120px; position: relative; overflow: hidden; }
  .book .book-in { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; position: relative; }
  .book .deco { position: absolute; left: 50%; top: 50%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; border: 1px solid var(--line-d); transform: translate(-50%, -50%); pointer-events: none; }
  .book .deco::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid var(--line-d); }
  .book .ready { display: flex; flex-wrap: nowrap; white-space: nowrap; justify-content: center; align-items: baseline; gap: .25em; font-family: "Josefin Sans", sans-serif; font-weight: 700; font-size: clamp(40px, 7.2vw, 120px); line-height: 1; letter-spacing: -.03em; }
  .book .ready .serif { color: var(--lime); }
  .book .ready .lg-wrap { display: inline-flex; align-items: baseline; gap: .06em; }
  .book .ready .lg-in { height: .72em; width: auto; display: inline-block; transform: translateY(.02em); }
  .book .s { font-size: 16px; line-height: 1.9; color: var(--gray-l); }
  .book .btn { height: 68px; padding: 0 48px; font-size: 17px; margin-top: 8px; }

  /* ---------- footer ---------- */
  .ft { padding: 0 40px 40px; }
  .ft-in { max-width: none; margin: 0 auto; border-top: 1.5px solid var(--line-d); padding-top: 72px; }
  .ft-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 80px; align-items: start; }
  .ft-brand { display: flex; flex-direction: column; gap: 20px; }
  .ft-brand p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--gray-l); }
  .ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .ft-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
  .ft-col .label { margin-bottom: 6px; }
  .ft-col a { font-family: "Josefin Sans", sans-serif; font-weight: 600; letter-spacing: .04em; padding-top: .15em; width: fit-content; position: relative; }
  .ft-col a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
  .ft-col a:hover::after { transform: scaleX(1); transform-origin: left; }
  .ft-col span { color: var(--gray-l); font-size: 13px; line-height: 1.6; }
  .ft-col a.ic { display: inline-flex; align-items: center; gap: 8px; padding-top: 0; }
  .ft-col a.ic span { color: inherit; font-size: inherit; padding-top: .15em; }
  .ft-col a.ic svg { flex: 0 0 auto; }
  .ft-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 72px; padding-top: 28px; border-top: 1.5px solid var(--line-d); }
  .ft-bottom > :nth-child(2) { text-align: center; }
  .ft-bottom .up { justify-self: end; }
  /* SCROLL UP：予約ブロック以降で右下に追従 */
  .up { position: fixed; right: 40px; bottom: 56px; z-index: 260; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; color: var(--white); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .up.show { opacity: 1; transform: none; pointer-events: auto; }
  .up .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
  .up .ring text { font-family: "Josefin Sans", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .28em; fill: var(--lime); }
  .up .arr { position: relative; transition: transform .4s var(--ease); }
  .up::before { content: ""; position: absolute; inset: 28px; border-radius: 50%; border: 1.5px solid var(--lime); transition: background .3s, border-color .3s, transform .4s var(--ease); }
  .up .arr { color: var(--lime); }
  .up:hover::before { background: var(--lime); border-color: var(--lime); transform: scale(1.06); }
  .up:hover .arr { transform: translateY(-3px); color: var(--black); }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---------- mobile ---------- */
  .mcta { display: none; }
  .mnav { display: none; }
  @media (max-width: 1100px) {
    .sec { padding: 96px 32px; }
    .two { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .sticky { position: static; }
    .h2 { font-size: 40px; }
    .gnav, .gh .btn { display: none !important; }
    .burger { display: flex; }
    .gh .logo { left: 20px; height: 64px; font-size: 18px; }
    .gh .logo .lg { height: 24px; }
    .logo-dot { left: 20px; height: 64px; }
    .gh-bg { height: 64px; }
    .side, .counter { display: none; }
    .hero .inner { padding: 0 20px 96px; }
    .hero .big { font-size: 22px; }
    .hero .sub { font-size: 10px; }
    .hero .hlead { display: none; }
    .band { height: 42vh; min-height: 260px; }
    .band.short { height: 26vh; min-height: 180px; }
    .mark { width: 180px; height: 180px; } .mark .core { width: 90px; height: 90px; } .mark .core img { width: 50px; } .mark .ring text { font-size: 11.5px; } .mark .ring text { font-size: 12.5px; }
    .dots { left: 20px; bottom: 32px; }
    .fvbtn { display: none; }
    .hero .big { white-space: normal; }
    .hero .row { flex-direction: column; align-items: flex-start; }
    .hero .scroll { right: 20px; top: auto; bottom: 36px; transform: none; font-size: 9px; letter-spacing: .2em; gap: 8px; }
    .hero .scroll i { height: 36px; }
    .hero .phtag { top: 80px; right: 20px; }
    .facts { padding: 64px 32px 96px; }
    .info3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .icard { padding: 20px; }
    .avnav { gap: 14px; margin-bottom: 14px; }
    .avarr { width: 34px; height: 34px; }
    .avm-t { font-size: 19px; min-width: 112px; }
    .avgrid { gap: 4px; }
    .avd { border-radius: 8px; } .avd .d { font-size: 13px; } .avd .m { font-size: 14px; }
    .avw { font-size: 10px; }
    .av-head { margin: 48px 0 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
    .av-head .h2 { font-size: 26px; }
    .av-legend .lg { font-size: 11px; padding: 6px 11px; }
    #flow .top { flex-direction: column; align-items: flex-start; gap: 20px; }
    #flow .total { text-align: left; }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .step { min-height: 160px; }
    #engineer .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    #price { clip-path: polygon(0 0, 100% 8vw, 100% 100%, 0 100%); margin-top: -8vw; padding-top: calc(96px + 8vw); }
    #faq { clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%); margin-top: -8vw; padding-top: calc(96px + 8vw); border-radius: 0 0 32px 32px; margin-bottom: -32px; padding-bottom: calc(96px + 24px); }
    #engineer { border-radius: 32px 32px 0 0; margin-top: -32px; position: relative; }
    #flow { padding-bottom: calc(96px + 32px); }
    #access { padding-top: calc(96px + 32px); }
    .band .cap { left: 32px; right: 32px; bottom: 40px; flex-direction: column; align-items: flex-start; }
    .band .cap .s { text-align: left; }
    #engineer img { max-width: 240px; border-radius: 16px; }
    .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cbtn { align-self: stretch; }
    .book { padding: 112px 32px 80px; }
    .ft { padding: 0 32px 120px; }
    .ft-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .ft-bottom { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
    .ft-bottom > :nth-child(2) { display: none; }
    .up { right: 16px; bottom: 96px; width: 84px; height: 84px; }
    .up::before { inset: 22px; }
    .up .ring text { font-size: 12.5px; }
    .mcta { display: flex; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px 20px; background: linear-gradient(to top, rgba(13,14,16,.9) 60%, rgba(13,14,16,0)); z-index: 250; transform: translateY(110%); transition: transform .5s var(--ease); }
    .mcta.show { transform: none; }
    .mcta .btn { height: 54px; }
    .mnav { position: fixed; inset: 0; z-index: 280; background: var(--white); color: var(--black); display: flex; flex-direction: column; justify-content: center; padding: 40px 28px; gap: 6px; transform: translateY(-100%); transition: transform .6s var(--ease2); }
    .mnav.open { transform: none; }
    .mnav a { font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -.02em; padding: 8px 0; border-bottom: 1.5px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
    .mnav a small { font-family: "Zen Kaku Gothic New", sans-serif; font-style: normal; font-size: 13px; font-weight: 500; color: var(--gray); }
    .burger.blend { color: var(--white); } .burger.blend.on-light, .burger.is-open { color: var(--black); }
    .burger.is-open { z-index: 290; }
    body.menu-open .gh .logo { z-index: 290; }
    .mnav .btn { margin-top: 24px; height: 60px; font-size: 16px; font-family: "Zen Kaku Gothic New", sans-serif; font-style: normal; border: 0; justify-content: center; }
  }
  @media (max-width: 640px) {
    .sec { padding: 72px 20px; }
    .h2 { font-size: 34px; }
    #opening .count b { font-size: 48px; }
    .hero .hlead { font-size: 12px; }
    .hero .row p { font-size: 13px; }
    .hero .meta { flex-wrap: wrap; gap: 10px 18px; }
    .facts { padding: 40px 20px 64px; }
    .facts .g { gap: 8px; }
    .facts .card { padding: 14px 10px; gap: 6px; }
    .facts .big { font-size: 16px; letter-spacing: -.03em; }
    .facts .big small { display: none; }
    .facts .sub { font-size: 10px; }
    #about .lead { font-size: 20px; }
    .photos3 { gap: 8px; }
    .photos3 > div:nth-child(2) { margin-top: 20px; }
    .photos3 > div:nth-child(3) { margin-top: 40px; }
    .pbox { padding: 24px 20px; gap: 22px; }
    .pbox .hours b { font-size: 40px; }
    .pbox .price { font-size: 46px; }
    .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .step, .step:first-child { --cut: 18px; min-height: 0; padding: 26px 20px 30px; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 12px; align-items: baseline; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); }
    .step:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 50% 100%, 0 calc(100% - var(--cut))); }
    .step .n { grid-row: 1 / 3; }
    .step .t { font-size: 17px; }
    .step .x { position: static; opacity: 1; transform: none; grid-column: 2; color: var(--gray); font-size: 12px; margin-top: 6px; padding-bottom: 6px; }
    .step.last .x { color: var(--gray-l); }
    .flow-note { flex-direction: column; align-items: flex-start; }
    #engineer .name .h2 { font-size: 48px; }
    #engineer img { max-width: 200px; }
    .links { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .wk { grid-template-columns: 24px minmax(0, 1fr); } .wk .wl { grid-column: 2; justify-content: flex-start; }
    .eq { gap: 10px; }
    .eq .card { padding: 12px 12px 16px; gap: 8px; }
    .eq .card .im { border-radius: 8px; }
    .eq .card .label { font-size: 10px; }
    .eq .card .t { font-size: 13px; }
    .acc button { font-size: 15px; padding: 20px 0; }
    .acc .a p { padding: 0 20px 22px 44px; font-size: 14px; }
    .acc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .route .st .nm { font-size: 17px; }
    .book { padding: 96px 20px 64px; }
    .book .s br { display: none; }
    .book .btn { width: 100%; height: 60px; }
    .ft { padding: 0 20px 120px; }
    .up { display: none; }
    .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .ft-cols .ft-col:last-child { grid-column: 1 / -1; }
  }

  /* C案の上書き */
  .hero .inner { padding-bottom: 128px; gap: 14px; }
  .hero .big { font-size: clamp(26px, 2.6vw, 38px); }
  body.reveal .hero .big { opacity: 1; }
  @media (max-width: 1100px) { .hero .inner { padding-bottom: 96px; } .hero .big { font-size: clamp(24px, 5.6vw, 38px); } }

  /* ===================== 2店舗対応（TOP / 店舗ページ） ===================== */

  /* --- TOP：店舗選択 --- */
  #stores { position: relative; z-index: 2; border-radius: 56px 56px 0 0; margin-top: -56px; }
  .st-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
  .st-head .s { font-size: 14px; line-height: 1.9; color: var(--gray-l); max-width: 420px; text-align: right; }
  .stores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .stcard { display: flex; flex-direction: column; border: 1px solid var(--line-d); border-radius: 20px; overflow: hidden; background: #121418; transition: border-color .45s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease); }
  .stcard:hover { border-color: var(--lime); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .stcard .im { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #15171a; }
  .stcard .im img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); filter: grayscale(.15) contrast(1.05); }
  .stcard:hover .im img { transform: scale(1.06); }
  .stcard .im::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.35), rgba(13,14,16,0) 45%, rgba(18,20,24,.9)); }
  .stcard .no { position: absolute; left: 20px; top: 18px; z-index: 1; font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--lime); }
  .stcard .soon { position: absolute; right: 18px; top: 16px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .1em; background: var(--lime); color: var(--black); border-radius: 999px; padding: 5px 12px; }
  .stcard .bd { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; }
  .stcard .nm { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .stcard .nm b { font-size: 30px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
  .stcard .nm span { font-family: "Josefin Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--gray-l); }
  .stcard .dl { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 11px 14px; font-size: 13.5px; line-height: 1.7; margin: 0; }
  .stcard .dl dt { color: var(--gray-l); font-size: 11px; font-family: "Josefin Sans", sans-serif; letter-spacing: .16em; font-weight: 600; padding-top: .35em; }
  .stcard .dl dd { margin: 0; }
  .stcard .dl dd b { color: var(--lime); font-weight: 700; }
  .stcard .dl .tbd { color: var(--gray); }
  .stcard .acts { margin-top: auto; display: flex; gap: 10px; padding-top: 4px; }
  .stcard .acts .btn { height: 52px; font-size: 14px; padding: 0 20px; flex: 1 1 0; }
  @media (max-width: 900px) { .stores-grid { grid-template-columns: 1fr; gap: 18px; } .st-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; } .st-head .s { text-align: left; } }
  @media (max-width: 420px) { .stcard .acts { flex-direction: column; } .stcard .nm b { font-size: 26px; } }

  /* --- 店舗ページ：パンくず＋店舗切替 --- */
  .crumb { background: var(--black); color: var(--white); padding: 18px 80px; border-bottom: 1px solid var(--line-d); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .crumb .bk { display: inline-flex; align-items: center; gap: 8px; font-family: "Josefin Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--gray-l); transition: color .25s; }
  .crumb .bk:hover { color: var(--lime); }
  .swi { display: inline-flex; border: 1px solid var(--line-d); border-radius: 999px; padding: 4px; gap: 4px; }
  .swi a { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 8px 18px; border-radius: 999px; color: var(--gray-l); transition: background .25s, color .25s; white-space: nowrap; }
  .swi a:hover { color: var(--white); }
  .swi a.on { background: var(--lime); color: var(--black); }
  @media (max-width: 900px) { .crumb { padding: 14px 20px; flex-wrap: wrap; gap: 12px; } .swi a { padding: 7px 14px; font-size: 12px; } }

  /* --- 店舗バッジ（HERO） --- */
  .hero .stbadge { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 16px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; backdrop-filter: blur(6px); background: rgba(13,14,16,.3); }
  .hero .stbadge i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); display: block; }

  /* --- 準備中プレースホルダ --- */
  .tbdbox { border: 1px dashed var(--line-d); border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
  .light .tbdbox { border-color: var(--line); }
  .tbdbox .t { font-size: 15px; font-weight: 700; }
  .tbdbox .d { font-size: 13.5px; line-height: 1.85; color: var(--gray); }
  .dark .tbdbox .d { color: var(--gray-l); }

  /* --- BOOK：2店舗分岐 --- */
  .book .twoact { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
  .book .twoact .btn { flex: 0 1 260px; }
  @media (max-width: 560px) { .book .twoact { flex-direction: column; width: 100%; } .book .twoact .btn { flex: none; width: 100%; } }

  body.is-top #contact { padding-top: calc(128px + 56px); }
  body.is-top #faq { margin-bottom: -56px; }

  /* ===== ヘッダー STUDIO ホバードロップダウン ===== */
  /* .gnav は mix-blend-mode: difference なので、パネルは .gnav の外に置いて素の色で出す */
  .navsub { position: fixed; top: 64px; z-index: 310; display: flex; flex-direction: column; gap: 2px;
            min-width: 268px; padding: 8px; border-radius: 16px; background: #14161A; border: 1px solid #2A2C30;
            box-shadow: 0 24px 60px rgba(0,0,0,.5); color: var(--white);
            opacity: 0; transform: translateY(-8px); pointer-events: none;
            transition: opacity .28s var(--ease), transform .28s var(--ease); }
  .navsub.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .navsub::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  .navsub a { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px 14px; border-radius: 11px;
              transition: background .25s, color .25s; }
  .navsub a:hover { background: rgba(158,255,53,.1); }
  .navsub a.on { background: rgba(158,255,53,.14); }
  .navsub a b { font-size: 15px; font-weight: 700; letter-spacing: .02em; display: flex; align-items: baseline; gap: 9px; }
  .navsub a b i { font-family: "Josefin Sans", sans-serif; font-style: normal; font-size: 10px; font-weight: 600;
                  letter-spacing: .18em; color: var(--gray-l); }
  .navsub a:hover b i, .navsub a.on b i { color: var(--lime); }
  .navsub a span { font-size: 11.5px; line-height: 1.6; color: var(--gray-l); }
  .gnav a.has-sub { display: inline-flex; align-items: center; gap: 6px; }
  .gnav a.has-sub svg { transition: transform .3s var(--ease); }
  .gnav a.has-sub.open svg { transform: rotate(180deg); }
  @media (max-width: 1100px) { .navsub { display: none !important; } }

  /* モバイルメニュー内の店舗リンク */
  .mnav .subs { display: flex; gap: 10px; margin: -6px 0 2px; }
  .mnav .subs a { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
                  border: 1px solid var(--line-d); border-radius: 12px; padding: 13px 14px;
                  font-size: 15px; font-weight: 700; }
  .mnav .subs a small { font-family: "Josefin Sans", sans-serif; font-size: 9.5px; font-weight: 600;
                        letter-spacing: .16em; color: var(--gray-l); }
  .mnav .subs a.on { border-color: var(--lime); }
  .mnav .subs a.on small { color: var(--lime); }

  /* ===== TOP：エンジニア（小さめ・担当店舗つき） ===== */
  .eng2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .engc { display: flex; gap: 20px; align-items: flex-start; border: 1px solid var(--line-d); border-radius: 18px;
          padding: 22px; background: #121418; transition: border-color .4s var(--ease), transform .5s var(--ease); }
  .engc:hover { border-color: var(--lime); transform: translateY(-4px); }
  .engc .ph { flex: 0 0 104px; width: 104px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: #1A1C21;
              display: flex; align-items: center; justify-content: center; }
  .engc .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) contrast(1.05); }
  .engc .ph span { font-family: "Josefin Sans", sans-serif; font-size: 10px; letter-spacing: .14em; color: var(--gray); text-align: center; line-height: 1.6; }
  .engc .bd { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .engc .at { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
              letter-spacing: .04em; background: var(--lime); color: var(--black); border-radius: 999px; padding: 5px 13px 6px; }
  .engc .nm { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .engc .nm b { font-family: "Josefin Sans", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
  .engc .nm span { font-size: 11.5px; color: var(--gray-l); }
  .engc p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--gray-l); }
  .engc .more { margin-top: auto; font-family: "Josefin Sans", sans-serif; font-size: 11.5px; font-weight: 600;
                letter-spacing: .14em; display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; }
  .engc:hover .more { color: var(--lime); }
  @media (max-width: 900px) { .eng2 { grid-template-columns: 1fr; gap: 16px; } }
  @media (max-width: 420px) { .engc { gap: 16px; padding: 18px; } .engc .ph { flex-basis: 82px; width: 82px; } .engc .nm b { font-size: 22px; } }

  /* TOPのエンジニア帯は、店舗ページの #engineer レイアウトとは別物 */
  #engineers { position: relative; z-index: 2; border-radius: 56px 56px 0 0; margin-top: -56px; }
  @media (max-width: 1100px) { #engineers { border-radius: 32px 32px 0 0; margin-top: -32px; } }

  /* 定休日 */
  .avd.off { border-color: var(--line-d); color: var(--gray); background: rgba(255,255,255,.02); }
  .avd.off .m { font-size: 11px; letter-spacing: .04em; }
  .av-legend .lg.off { color: var(--gray); border-color: var(--line-d); }

  /* 機材の補足（推し機材） */
  .eqnote { border-left: 2px solid var(--lime); padding: 2px 0 2px 16px; font-size: 13.5px; line-height: 1.9; }
  .eqnote strong { font-size: 14.5px; }