/* scss/style.scss から生成(sass scss/style.scss css/style.css で再生成可)。直接編集せず scss を編集すること */
:root { color-scheme: dark; --ground: #01060f; --ink: #eef4ff; --dim: rgba(238, 244, 255, .74); --line: rgba(238, 244, 255, .3); --veil: rgba(2, 6, 18, .74);
  --gutter: clamp(16px, 3vw, 40px); --f-en: Outfit, "Helvetica Neue", Arial, sans-serif; --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-jp); overflow-x: hidden; }
[hidden] { display: none !important; }

/* 背景: 画面に固定。上のレイヤーだけがスクロールする */
/* 高さは lvh(バーが引っ込んだ状態の画面の高さ)。iOS でバーが出入りしても canvas の大きさは変わらない */
#kv { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; cursor: zoom-in; }
.layers { position: relative; z-index: 1; pointer-events: none; }            /* 文字のない所のクリックは背景に届く */
.layers section { min-height: 100vh; min-height: 100svh; padding-inline: var(--gutter); box-sizing: border-box; display: grid; }
.layers .block { pointer-events: auto; }

/* 固定ヘッダー */
.kv-brand { position: fixed; z-index: 4; left: var(--gutter); top: calc(clamp(16px, 2.4vw, 28px) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 12px; color: var(--ink); pointer-events: none; }
.kv-brand svg { height: 24px; width: auto; fill: currentColor; display: block; }
.kv-brand span { font: 500 17px/1 var(--f-en); letter-spacing: .02em; white-space: nowrap; }
.kv-menu-btn { position: fixed; z-index: 6; right: var(--gutter); top: calc(clamp(10px, 1.8vw, 20px) + env(safe-area-inset-top, 0px)); width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 14, 30, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; display: grid; place-content: center; gap: 7px; transition: border-color .25s; }
.kv-menu-btn:hover { border-color: var(--ink); }
.kv-menu-btn:focus-visible, .kv-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.kv-menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.kv-menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.kv-menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.kv-menu { position: fixed; z-index: 5; inset: 0; background: var(--veil); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; align-content: center; gap: clamp(2px, .8vw, 10px); padding-inline: clamp(24px, 9vw, 140px); animation: kvVeil .35s both; }
.kv-menu a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; width: fit-content; max-width: 100%; color: var(--ink); text-decoration: none; padding-block: 6px; animation: kvFade .5s both; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.kv-menu a:nth-child(2) { animation-delay: .05s; } .kv-menu a:nth-child(3) { animation-delay: .1s; } .kv-menu a:nth-child(4) { animation-delay: .15s; } .kv-menu a:nth-child(5) { animation-delay: .2s; } .kv-menu a:nth-child(6) { animation-delay: .25s; } .kv-menu a:nth-child(7) { animation-delay: .3s; }
.kv-menu a:hover { transform: translateX(12px); }
.kv-menu b { font: 300 clamp(24px, 4.6vw, 52px)/1.1 var(--f-en); letter-spacing: -.01em; }
.kv-menu i { font: 500 13px/1 var(--f-jp); letter-spacing: .1em; color: var(--dim); }

/* ファーストビュー */
.hero { align-content: end; padding-block: 0 calc(clamp(22px, 4vw, 52px) + env(safe-area-inset-bottom, 0px)); }
.kv-catch { display: grid; gap: clamp(12px, 1.6vw, 22px); min-width: 0; }
.kv-catch h1 { margin: 0; font: 200 clamp(37px, 8.55vw, 133px)/.95 var(--f-en); letter-spacing: .05em; display: flex; flex-wrap: wrap; column-gap: .22em; }
.kv-catch .ln { display: inline-block; overflow: hidden; padding-block: .04em; }
.kv-catch .ln > span { display: inline-block; }
.kv-catch .ol { font-weight: 500; }
.kv-catch p { margin: 0; display: flex; align-items: center; gap: 14px; font: 500 clamp(14px, 1.45vw, 20px)/1.7 var(--f-jp); letter-spacing: .06em; color: var(--dim); }
.kv-catch p::before { content: ""; flex: 0 0 clamp(24px, 4vw, 56px); height: 1px; background: var(--line); transform-origin: left; animation: kvLine .8s cubic-bezier(.16, .84, .24, 1) 1.1s both; }
.kv-catch p span { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
/* 登場アニメーション(--i は文字の順番) */
.kv-catch .ch { display: inline-block; animation: kvChar 1s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(.4s + var(--i) * .07s); }
.kv-catch .jc { animation: kvInk .7s ease-out both; animation-delay: calc(1.25s + var(--i) * .028s); }
.kv-brand, .kv-menu-btn { animation: kvDrop .9s cubic-bezier(.16, .84, .24, 1) .15s both; }
@keyframes kvChar { from { transform: translateY(112%) rotate(7deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes kvInk { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes kvDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes kvLine { from { transform: scaleX(0); } to { transform: none; } }
@keyframes kvFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kvVeil { from { opacity: 0; } to { opacity: 1; } }

/* ABOUT */
.about { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
.about .block { display: grid; gap: clamp(18px, 2.4vw, 30px); max-width: 40rem; min-width: 0; }
.about p.body { max-width: 32rem; }
.eyebrow { margin: 0; font: 500 12px/1 var(--f-en); letter-spacing: .28em; color: var(--dim); display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--line); }
.about h2 { margin: 0; display: grid; gap: clamp(8px, 1vw, 14px); }
.about h2 .jp { font: 500 clamp(18px, 2.1vw, 28px)/1.5 var(--f-jp); letter-spacing: .12em; }
.about h2 .en { font: 200 clamp(34px, 6.2vw, 88px)/1 var(--f-en); letter-spacing: .05em; overflow-wrap: anywhere; }

/* WORKS: 4列の小さなサムネイル。画像の下に題名と年月 */
.works { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
.works .block { display: grid; gap: clamp(18px, 2.4vw, 30px); width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }
.works h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 44px)/1.3 var(--f-jp); letter-spacing: .12em; }
.cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px) clamp(14px, 2vw, 28px); margin-top: clamp(4px, 1vw, 12px); }
.case { display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); text-decoration: none; }
.case.fly { perspective: 1100px; perspective-origin: 60% 60%; }
.case.fly .thumb { will-change: transform, opacity; backface-visibility: hidden; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background-color: #050b1c; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
a.case:hover .thumb img { transform: scale(1.05); }
a.case:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.case-body { display: grid; gap: 3px; min-width: 0; }
.case-title { font: 400 clamp(11px, .92vw, 13px)/1.5 var(--f-en); letter-spacing: .06em; overflow-wrap: anywhere; }
.case-date { font: 400 clamp(10.5px, .85vw, 12px)/1.4 var(--f-en); letter-spacing: .08em; color: var(--dim); }
/* 仮のサムネイル: 画像の代わりに置く模様(本番では img に差し替える) */
.t1 { background: radial-gradient(circle at 72% 38%, #7fd0ff 0 7%, transparent 7.5%), repeating-radial-gradient(circle at 72% 38%, transparent 0 13px, rgba(127, 208, 255, .55) 13px 14.5px), #071433; }
.t2 { background: repeating-radial-gradient(circle at 30% 120%, #ff9a3d 0 6px, #2a0f1e 6px 18px); }
.t3 { background: repeating-linear-gradient(115deg, #4be3d0 0 3px, #06222b 3px 16px); }
.t4 { background: radial-gradient(circle, #ff5ca8 0 22%, transparent 24%) 0 0 / 18px 18px, #1a0b2e; }
.t5 { background: conic-gradient(from 210deg at 70% 55%, #0b1230, #5c7cff, #b9d2ff, #0b1230 62%); }
.t6 { background: repeating-linear-gradient(0deg, #d7e3ff 0 10px, #9db7ff 10px 13px, #d7e3ff 13px 30px, #3757c9 30px 34px); }
.t7 { background: linear-gradient(45deg, #a064ff 25%, transparent 25% 75%, #a064ff 75%) 0 0 / 28px 28px, linear-gradient(45deg, #a064ff 25%, #150a2c 25% 75%, #a064ff 75%) 14px 14px / 28px 28px; }
.t8 { background: radial-gradient(60% 90% at 25% 30%, #ff5a4a, transparent 70%), radial-gradient(70% 90% at 80% 75%, #ffd166, transparent 70%), #2b0b12; }
@media (max-width: 720px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FLOW: 4つの段階を1本の線でつないだ図。スクロールに合わせて線が伸び、丸が順に灯る(--p は 0〜1 の進み具合) */
.flow { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
.flow .block { display: grid; gap: clamp(18px, 2.4vw, 30px); width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }
.flow h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 44px)/1.3 var(--f-jp); letter-spacing: .12em; }
.tl { --p: 0; --node: 56px; position: relative; list-style: none; margin: clamp(10px, 1.6vw, 22px) 0 0; padding: 0; display: grid; --g: clamp(16px, 2.4vw, 36px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--g); }
/* 線は 1 つ目の丸の中心から 4 つ目の丸の中心まで。丸より後ろに置く */
.tl::before, .tl::after { content: ""; position: absolute; z-index: 0; left: calc(var(--node) / 2); width: calc((100% - var(--g) * 3) / 4 * 3 + var(--g) * 3); top: calc(var(--node) / 2); height: 1px; background: var(--line); }
.ph { position: relative; z-index: 1; }
.tl::after { background: var(--ink); transform: scaleX(var(--p)); transform-origin: left; box-shadow: 0 0 12px rgba(238, 244, 255, .7); }
.ph { display: grid; align-content: start; justify-items: start; gap: 6px; min-width: 0; }
.node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-content: center; border: 1px solid var(--line); background: rgba(9, 14, 30, .9);
  font: 300 20px/1 var(--f-en); font-variant-numeric: tabular-nums; color: var(--dim); transition: background .5s, color .5s, border-color .5s, box-shadow .5s; }
.ph.on .node { background: var(--ink); color: var(--ground); border-color: var(--ink); box-shadow: 0 0 0 7px rgba(238, 244, 255, .12), 0 0 26px rgba(238, 244, 255, .45); }
.ph-en { margin: clamp(12px, 1.4vw, 18px) 0 0; font: 500 11px/1 var(--f-en); letter-spacing: .26em; color: var(--dim); }
.ph h3 { margin: 0 0 6px; font: 500 clamp(17px, 1.7vw, 23px)/1.5 var(--f-jp); letter-spacing: .08em; }
.ph ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; width: 100%; }
.ph ul li { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); align-items: baseline; font: 400 clamp(13px, 1.08vw, 15px)/1.7 var(--f-jp); letter-spacing: .04em; color: var(--dim); opacity: .45; transition: opacity .6s; }
.ph.on ul li { opacity: 1; }
.ph ul b { font: 300 .86em/1 var(--f-en); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.feat { list-style: none; margin: clamp(14px, 2.4vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(16px, 2.4vw, 36px); }
.feat li { position: relative; padding: 16px 0 0 26px; border-top: 1px solid var(--line); font: 500 clamp(13.5px, 1.12vw, 15.5px)/1.9 var(--f-jp); letter-spacing: .05em; min-width: 0; }
.feat li::before { content: ""; position: absolute; left: 3px; top: calc(16px + .42em); width: 6px; height: 11px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }   /* チェックマーク */
@media (max-width: 860px) {   /* 狭い画面: 線を縦にして、段階を上から下へ並べる */
  .tl { --node: 44px; grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .tl::before, .tl::after { left: calc(var(--node) / 2); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl::after { transform: scaleY(var(--p)); transform-origin: top; }
  .ph { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 16px; }
  .ph > :not(.node) { grid-column: 2; }
  .node { grid-row: 1 / span 3; font-size: 17px; }
  .ph-en { margin-top: 6px; }
  .feat { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .node, .ph ul li { transition: none; } }

/* FAQ */
.faq { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
.faq .block { display: grid; gap: clamp(18px, 2.4vw, 30px); width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }   /* ブロックごと左右中央に */
.faq h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 44px)/1.3 var(--f-jp); letter-spacing: .12em; }
.qa { display: grid; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: clamp(15px, 1.8vw, 22px); font: 500 clamp(15px, 1.35vw, 18px)/1.6 var(--f-jp); letter-spacing: .06em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: #fff; }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.qa p { margin: 0; padding: 0 2.2em clamp(16px, 2vw, 24px) 0; font: 400 clamp(13.5px, 1.1vw, 15px)/2 var(--f-jp); letter-spacing: .04em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .qa summary::after { transition: none; } }

/* COMPANY */
.company { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
/* 左に見出し、右半分に一覧。幅は他のセクションと同じ */
.company .block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px) clamp(24px, 4vw, 64px); align-items: start; width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }
.co-head { display: grid; gap: clamp(14px, 1.8vw, 22px); min-width: 0; }
@media (max-width: 860px) { .company .block { grid-template-columns: minmax(0, 1fr); } }
.company h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 44px)/1.3 var(--f-jp); letter-spacing: .12em; }
.profile { margin: 0; display: grid; }
.profile > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding-block: clamp(11px, 1.3vw, 16px); border-top: 1px solid var(--line); }
.profile > div:last-child { border-bottom: 1px solid var(--line); }
.profile dt { font: 700 14px/1.9 var(--f-jp); letter-spacing: .12em; }
.profile dd { margin: 0; font: 500 clamp(15px, 1.2vw, 17px)/1.9 var(--f-jp); letter-spacing: .05em; overflow-wrap: anywhere; }
.profile dd.todo { color: var(--dim); }

/* SERVICE: 左に見出しと本文、右に3つの円を三角形に並べて線で結ぶ */
.service { align-content: center; padding-block: clamp(72px, 12vh, 140px); }
.service .block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }   /* ブロック全体を左右中央に */
.svc-text { display: grid; gap: clamp(18px, 2.6vw, 34px); justify-items: start; min-width: 0; }
.service h2 { margin: 0; font: 700 clamp(26px, 3.5vw, 50px)/1.5 var(--f-jp); letter-spacing: .04em; word-break: keep-all; overflow-wrap: anywhere; }
.service p.body { margin: 0; font: 400 clamp(14px, 1.15vw, 16px)/2.3 var(--f-jp); letter-spacing: .04em; color: var(--dim); max-width: 34em; }
.more { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(4px, 1.4vw, 20px); color: var(--ink); text-decoration: none; font: 700 clamp(14px, 1.1vw, 16px)/1 var(--f-jp); letter-spacing: .08em; }
.more .arrow { display: grid; place-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; transition: background .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.more:hover .arrow { background: var(--ink); color: var(--ground); border-color: var(--ink); transform: translateX(4px); }
.more:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.trio { position: relative; width: 100%; max-width: 640px; aspect-ratio: 100 / 96; justify-self: end; }
.trio-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(238, 244, 255, .6); }
.orb { position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); display: grid; align-content: center; justify-items: center; gap: .55em; text-align: center;
  background: rgba(8, 13, 28, .88); border: 1px solid var(--line); font-size: clamp(11px, 1.08vw, 15px); padding: 0 7%; box-sizing: border-box; }
.orb.o1 { left: 50%; top: 26%; } .orb.o2 { left: 26.5%; top: 74%; } .orb.o3 { left: 73.5%; top: 74%; }
.orb .en { margin: 0; font: 400 .82em/1.3 var(--f-en); letter-spacing: .06em; color: var(--dim); }
.orb ul { list-style: none; margin: 0; padding: 0; font: 500 1em/1.85 var(--f-jp); letter-spacing: .06em; }
.orb li { overflow-wrap: anywhere; }
@media (max-width: 860px) {   /* 狭い画面: 文章の下に、円をやめて横長の札を縦に並べる */
  .service .block { grid-template-columns: minmax(0, 1fr); }
  .trio { aspect-ratio: auto; max-width: none; display: grid; gap: 12px; }
  .trio-lines { display: none; }
  .orb { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 22px; padding: 16px 18px; justify-items: start; text-align: left; font-size: 14px; }
  .orb ul { display: flex; flex-wrap: wrap; gap: 0 1.1em; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { .more .arrow { transition: none; } }
.about p.body { margin: 0; font: 400 clamp(15px, 1.2vw, 17px)/2.1 var(--f-jp); letter-spacing: .04em; color: var(--dim); }

@media (max-width: 720px) {
  .kv-catch { justify-items: center; text-align: center; }
  .kv-catch h1, .kv-catch p { justify-content: center; }
  .kv-catch p::before { display: none; }
  .kv-catch p span { text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .kv-catch .ch, .kv-catch .jc, .kv-catch p::before, .kv-brand, .kv-menu-btn, .kv-menu, .kv-menu a { animation: none; } .kv-menu a, .kv-menu-btn span { transition: none; } }

/* ABOUT: 左にキャッチ、右に3つの特徴。幅は他のセクションと同じで中央寄せ */
.about .block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 64px); align-items: center; width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }
.ab-head { display: grid; gap: clamp(16px, 2vw, 26px); min-width: 0; }
.about h2 .en { font-size: clamp(34px, 5vw, 76px); line-height: 1.04; }
.about .lead { margin: 0; font: 500 clamp(15px, 1.5vw, 20px)/1.9 var(--f-jp); letter-spacing: .08em; word-break: keep-all; overflow-wrap: anywhere; }
.pts { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.pts li { display: grid; gap: 6px; padding-block: clamp(16px, 2vw, 26px); border-top: 1px solid var(--line); min-width: 0; }
.pts li:last-child { border-bottom: 1px solid var(--line); }
.pts .k { margin: 0; font: 300 clamp(20px, 2.1vw, 30px)/1.2 var(--f-en); letter-spacing: .06em; overflow-wrap: anywhere; }
.pts h3 { margin: 0; font: 500 clamp(14px, 1.2vw, 16px)/1.7 var(--f-jp); letter-spacing: .08em; }
.pts li > p:last-child { margin: 4px 0 0; font: 400 clamp(13.5px, 1.08vw, 15px)/2 var(--f-jp); letter-spacing: .04em; color: var(--dim); }
@media (max-width: 860px) { .about .block { grid-template-columns: minmax(0, 1fr); } }

/* フッター: お問い合わせボタンとコピーライト */
.foot { position: relative; padding: clamp(64px, 12vh, 130px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; }
.foot .block { pointer-events: auto; display: grid; gap: clamp(48px, 9vh, 96px); width: 100%; max-width: 76rem; min-width: 0; justify-self: center; }
.foot-cta { display: grid; gap: clamp(16px, 2vw, 26px); justify-items: center; text-align: center; }
.foot-lead { margin: 0; font: 500 clamp(20px, 2.8vw, 36px)/1.6 var(--f-jp); letter-spacing: .08em; }
.cta { display: inline-flex; align-items: center; gap: 18px; margin-top: 6px; padding: 20px 26px 20px 38px; border-radius: 99px; background: var(--ink); color: var(--ground); text-decoration: none; font: 700 clamp(15px, 1.3vw, 18px)/1 var(--f-jp); letter-spacing: .12em; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.cta .arrow { display: grid; place-content: center; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(238, 244, 255, .28); }
.cta:hover .arrow { transform: translateX(5px); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.copy { margin: 0; text-align: center; }
.copy small { font: 400 12px/1 var(--f-en); letter-spacing: .12em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .cta, .cta .arrow { transition: none; } }
.foot .eyebrow::before { display: none; }   /* フッターの CONTACT は横棒なし */
.foot-lead, .foot .eyebrow { text-shadow: 0 1px 16px rgba(24, 6, 34, .85), 0 0 3px rgba(24, 6, 34, .6); }   /* 明るい朝焼けの上でも読めるように */
.cta { box-shadow: 0 6px 26px rgba(24, 6, 34, .45); }

/* 大きな見出しの登場: 1文字ずつ、奥から起き上がりながら光って現れる(--i は文字の順番) */
.rvw { display: inline-block; white-space: nowrap; }
.rv { display: inline-block; opacity: 0; transform-origin: 50% 100%; }
.in .rv { animation: rvIn 1s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(var(--i) * .05s); }
@keyframes rvIn {
  0% { opacity: 0; transform: perspective(500px) translateY(.9em) rotateX(-90deg) scale(1.3); filter: blur(12px); text-shadow: 0 0 0 rgba(190, 220, 255, 0); }
  55% { opacity: 1; filter: blur(0); text-shadow: 0 0 30px rgba(190, 220, 255, .95), 0 0 6px rgba(255, 255, 255, .8); }
  100% { opacity: 1; transform: none; filter: none; text-shadow: 0 0 0 rgba(190, 220, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; } .in .rv { animation: none; } }
/* 画面に入ったら順番に現れる(--d は遅らせる秒数)。up: 下から / right: 右から / pop: ふくらんで現れる */
.io { opacity: 0; }
.io.show { animation: ioUp .9s cubic-bezier(.16, .84, .24, 1) var(--d, 0s) both; }
.io.io-right.show { animation-name: ioRight; animation-duration: 1s; }
.io.io-pop.show { animation-name: ioPop; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes ioUp { from { opacity: 0; transform: translateY(36px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ioRight { from { opacity: 0; transform: translateX(90px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ioPop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }   /* 弾ませず、すっと広がって現れる */
.trio-lines.io { opacity: 1; }                                             /* 円を結ぶ線は、円が出そろってから描かれる */
.trio-lines.io path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.trio-lines.io.show { animation: none; }
.trio-lines.io.show path { animation: ioDraw 1.4s ease-in-out 1.5s both; }   /* 3つの円が出そろってから */
@keyframes ioDraw { to { stroke-dashoffset: 0; } }

/* お問い合わせ画面 */
.inq { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: rgba(2, 5, 15, .84); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); animation: kvVeil .4s both; display: grid;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.inq-box { width: 100%; max-width: 40rem; margin: auto; display: grid; gap: clamp(20px, 3vh, 34px); align-content: center; min-width: 0; }
.inq-head { display: flex; align-items: center; justify-content: space-between; }
.inq-kicker { margin: 0; font: 500 12px/1 var(--f-en); letter-spacing: .28em; color: var(--dim); }
.inq-close { position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; padding: 0; }
.inq-close span { position: absolute; left: 12px; right: 12px; top: 21px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.inq-close span:last-child { transform: rotate(-45deg); }
.inq-close:hover { border-color: var(--ink); }
.inq-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.inq-steps li { counter-increment: s; padding-top: 10px; border-top: 2px solid var(--line); font: 500 12px/1.4 var(--f-jp); letter-spacing: .08em; color: var(--dim); transition: border-color .4s, color .4s; }
.inq-steps li::before { content: "0" counter(s) " "; font-family: var(--f-en); font-variant-numeric: tabular-nums; }
.inq-steps li.done, .inq-steps li.now { border-color: var(--ink); color: var(--ink); }
.inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inq-step { display: grid; gap: clamp(16px, 2.2vh, 24px); animation: inqIn .5s cubic-bezier(.16, .84, .24, 1) both; }
.inq-step.rev { animation-name: inqInRev; }
@keyframes inqIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes inqInRev { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
.inq-step h2 { margin: 0 0 4px; font: 500 clamp(22px, 3vw, 34px)/1.5 var(--f-jp); letter-spacing: .06em; }
.fld { display: grid; gap: 8px; }
.fld > span { font: 500 13px/1.5 var(--f-jp); letter-spacing: .08em; color: var(--dim); }
.fld em { font-style: normal; font-size: 11px; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); }
.fld input, .fld textarea { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(238, 244, 255, .06); color: var(--ink); font: 400 16px/1.7 var(--f-jp); letter-spacing: .03em; transition: border-color .2s, background .2s; }
.fld textarea { resize: vertical; min-height: 9em; }
.fld input::placeholder { color: rgba(238, 244, 255, .35); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); background: rgba(238, 244, 255, .1); }
.fld.bad input, .fld.bad textarea { border-color: #ff8f8f; }
.err { min-height: 1.5em; font: 500 13px/1.5 var(--f-jp); color: #ffb3b3; }
.inq-review { margin: 0; display: grid; }
.inq-review > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding-block: 13px; border-top: 1px solid var(--line); }
.inq-review > div:last-child { border-bottom: 1px solid var(--line); }
.inq-review dt { font: 500 13px/1.8 var(--f-jp); letter-spacing: .08em; color: var(--dim); }
.inq-review dd { margin: 0; font: 400 15px/1.8 var(--f-jp); white-space: pre-wrap; overflow-wrap: anywhere; }
.inq-fail { margin: 0; padding: 14px 16px; border: 1px solid #ff8f8f; border-radius: 8px; font: 500 14px/1.8 var(--f-jp); color: #ffd0d0; }
.inq-done { margin: 0; font: 400 15px/2 var(--f-jp); letter-spacing: .04em; color: var(--dim); }
.inq-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: clamp(18px, 2.6vh, 30px); }
.inq-back, .inq-next { font: 700 15px/1 var(--f-jp); letter-spacing: .12em; border-radius: 99px; cursor: pointer; padding: 17px 30px; }
.inq-back { background: none; border: 1px solid var(--line); color: var(--ink); }
.inq-back:hover { border-color: var(--ink); }
.inq-next { margin-left: auto; background: var(--ink); color: var(--ground); border: 1px solid var(--ink); min-width: 9em; }
.inq-next:disabled { opacity: .55; cursor: progress; }
.inq button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 520px) { .inq-review > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .inq-back, .inq-next { padding-inline: 22px; } }
@media (prefers-reduced-motion: reduce) { .inq, .inq-step { animation: none; } }

/* ---- 原稿(短縮版)に合わせた調整 ---- */
.about .block { align-items: start; }
.ab-body { display: grid; gap: .9em; max-width: 34em; }
.ab-body p { margin: 0; font: 400 clamp(13.5px, 1.1vw, 15.5px)/2.1 var(--f-jp); letter-spacing: .04em; color: var(--dim); }
.pts li > p:not(.k) { margin: 4px 0 0; font: 400 clamp(13.5px, 1.08vw, 15px)/2 var(--f-jp); letter-spacing: .04em; color: var(--dim); }
.service p.body + p.body { margin-top: calc(clamp(18px, 2.6vw, 34px) * -.55); }
.ph p:not(.ph-en) { margin: 0 0 .5em; font: 400 clamp(13px, 1.04vw, 14.5px)/1.95 var(--f-jp); letter-spacing: .04em; color: var(--dim); opacity: .45; transition: opacity .6s; }
.ph.on p:not(.ph-en) { opacity: 1; }
.ph h3 { margin-bottom: 8px; }