/* Linkit 独自の追加スタイル（元の Tailwind CSS に無いものだけ） */

/* ---- サイトの色（ここを変えると全体の色が変わる）。名前は元のまま blue だが中身もエレクトリックブルー ---- */
:root, html {
  --blue: #1D01FE;       /* メイン */
  --blue-deep: #0100C4;  /* 濃い */
  --blue-dark: #1400AB;  /* もっと濃い */
  --blue-ink: #02000F;   /* ほぼ黒 */
  --blue-pale: #C1D2FF;  /* 淡い */
}
/* ---- サイトのフォント（英語：Orbitron／日本語：M PLUS 1。Google Fonts から読み込み） ---- */
html.antialiased {
  --font-figtree: 'Orbitron', 'M PLUS 1', sans-serif;
  --font-zen-new: 'M PLUS 1', sans-serif;
  --font-zen-antique: 'M PLUS 1', sans-serif;
}

/* 元のデザインで色を直接指定していたクラスを、新しい色に合わせる */
.text-\[\#0100C4\] { color: var(--blue-deep); }
.text-\[\#0100FE\], .text-\[\#1901FF\] { color: var(--blue); }
.text-\[\#1400AB\] { color: var(--blue-dark); }
.bg-\[\#2A14FF\] { background-color: #2A14FF; }
@keyframes step-active {
  0%, to { color: #fff; background-color: #ffffff26; }
  18%, 32% { color: var(--blue); background-color: var(--blue-pale); }
}

/* ---- 最初のロゴ演出（トップページのみ） ---- */
#intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(29, 1, 254, .94);
  transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
}
/* 出るとき：ぼやけた状態から、ゆっくりピントが合うように浮かび上がる */
#intro .intro-logo {
  color: #fff; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  font-size: clamp(88px, 22vw, 300px);
  opacity: 0; transform: scale(.92);
  animation: intro-pop 1.6s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}
#intro .intro-sub {
  position: absolute; bottom: 12%; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; letter-spacing: .3em;
  opacity: 0; animation: intro-fade 1s ease 1.2s forwards;
}
/* 終わるとき：ロゴがふわっと少し大きくなりながら溶けて、ホーム画面が透けて出てくる */
#intro.is-out { opacity: 0; pointer-events: none; }
#intro.is-out .intro-logo {
  animation: none; opacity: 0; transform: scale(1.18); filter: blur(14px);
  transition: transform 1.8s cubic-bezier(.4, 0, .2, 1), opacity 1.4s ease .1s, filter 1.6s ease;
}
#intro.is-out .intro-sub { opacity: 0; transition: opacity .6s ease; }
#intro.is-skip { display: none; }
@keyframes intro-pop {
  0%   { opacity: 0; transform: scale(.92); filter: blur(18px); letter-spacing: .08em; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: -0.04em; }
}
/* ---- バグったような乱れ（ビビビッ） ---- */
#intro .intro-logo { position: relative; }
#intro.shown .intro-logo { animation: none; opacity: 1; transform: none; filter: none; }
#intro .intro-logo::before, #intro .intro-logo::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
#intro.glitch .intro-logo {
  opacity: 1; transform: none; filter: none;
  animation: g-jitter .09s steps(1) infinite;
}
#intro.glitch .intro-logo::before { opacity: .85; color: #00E5FF; animation: g-slice-a .22s steps(1) infinite; }
#intro.glitch .intro-logo::after  { opacity: .85; color: #FF2BD6; animation: g-slice-b .18s steps(1) infinite; }
#intro.glitch { animation: g-flash .16s steps(1) infinite; }
#intro.glitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px);
  animation: g-noise .12s steps(1) infinite;
}
@keyframes g-jitter {
  0%   { translate: 0 0;     clip-path: inset(0 0 0 0); }
  20%  { translate: -8px 2px; clip-path: inset(12% 0 58% 0); }
  40%  { translate: 10px -3px; clip-path: inset(46% 0 22% 0); }
  60%  { translate: -4px 0;   clip-path: inset(0 0 0 0); }
  80%  { translate: 6px 4px;  clip-path: inset(70% 0 4% 0); }
}
@keyframes g-slice-a {
  0%   { translate: -10px 0; clip-path: inset(8% 0 72% 0); }
  33%  { translate: -4px 0;  clip-path: inset(40% 0 30% 0); }
  66%  { translate: -14px 0; clip-path: inset(76% 0 6% 0); }
}
@keyframes g-slice-b {
  0%   { translate: 10px 0;  clip-path: inset(60% 0 18% 0); }
  33%  { translate: 4px 0;   clip-path: inset(20% 0 64% 0); }
  66%  { translate: 14px 0;  clip-path: inset(0 0 86% 0); }
}
@keyframes g-flash { 0% { filter: none; } 50% { filter: brightness(1.6) contrast(1.4); } }
@keyframes g-noise { 0% { background-position: 0 0; } 50% { background-position: 0 3px; } }
/* 赤 → 黒 にパッと切り替わる */
#intro.is-black { background: #050505; transition: none; }
#intro.is-black .intro-sub { opacity: 0; }
/* 最後：チラチラっと消えてホームへ */
#intro.is-out { animation: g-out .45s steps(1) forwards; transition: none; }
@keyframes g-out { 0% { opacity: 1; } 20% { opacity: 0; } 35% { opacity: .8; } 55% { opacity: 0; } 70% { opacity: .5; } 100% { opacity: 0; } }

/* ---- 最後：白いもやが画面いっぱいにかかり、晴れるとトップ画面 ---- */
#intro-fog {
  position: fixed; inset: 0; z-index: 101; pointer-events: none; overflow: hidden;
  background: rgba(255, 255, 255, 0);
  transition: background-color .9s ease;
}
#intro-fog span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0));
  transform: scale(.4);
  transition: opacity .9s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
#intro-fog span:nth-child(1) { width: 120vmax; height: 90vmax; left: -40vmax; bottom: -50vmax; }
#intro-fog span:nth-child(2) { width: 110vmax; height: 80vmax; right: -40vmax; bottom: -40vmax; transition-delay: .1s; }
#intro-fog span:nth-child(3) { width: 100vmax; height: 80vmax; left: 0; top: -40vmax; transition-delay: .2s; }
/* もやがかかる */
#intro-fog.is-in { background: rgba(255, 255, 255, .92); }
#intro-fog.is-in span { opacity: 1; transform: scale(1.4); }
/* もやが晴れる */
#intro-fog.is-out { background: rgba(255, 255, 255, 0); transition: background-color 1.8s ease; }
#intro-fog.is-out span { opacity: 0; transform: scale(2.2) translateY(-8%); transition: opacity 2s ease, transform 2.4s ease-out; }
#intro-fog.is-gone { display: none; }

/* ロゴが消えるあいだ、後ろの動画もゆっくり寄ってくる */
html.is-landing .hero-video { animation: land-in 2.4s cubic-bezier(.22, 1, .36, 1) both, slow-zoom 18s ease-in-out 2.4s infinite alternate; }
@keyframes land-in { from { scale: 1.15; filter: blur(6px); } }
@keyframes intro-fade { to { opacity: .8; } }
html.is-intro { overflow: hidden; }

/* ---- トップの背景動画（色はそのまま。上だけうっすら暗くしてメニューの白文字を読みやすく） ---- */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%);
}

/* 背景動画をゆっくりズーム */
.hero-video { animation: slow-zoom 18s ease-in-out infinite alternate; }
@keyframes slow-zoom { from { scale: 1; } to { scale: 1.12; } }

/* ---- カード（青い背景の上の文字カード） ---- */
.step {
  position: relative; border-radius: 20px; padding: 22px 20px 26px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
  color: #fff;
}
.step-no {
  display: block; font-family: var(--font-figtree), sans-serif;
  font-size: clamp(48px, 6vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.step-title { margin-top: 18px; font-size: 20px; font-weight: 700; }
.step-text { margin-top: 6px; font-size: 13px; line-height: 1.7; opacity: .85; }
.step:hover .step-no { transform: translateX(6px); }

/* ---- 縦に流れるカード（仕事の進め方） ---- */
.roll {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.roll-list { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; }
.roll .step { min-height: 220px; display: flex; flex-direction: column; }
.roll .step .step-text { margin-top: auto; padding-top: 6px; }
.roll-tag { font-family: var(--font-dot), monospace; font-size: 11px; letter-spacing: .12em; color: #C1D2FF; }
.roll-word { justify-content: space-between; }
.roll-word p { margin-top: 24px; font-family: var(--font-figtree), sans-serif; font-size: clamp(24px, 2.3vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.roll-word p.roll-ja { font-family: inherit; font-size: 22px; line-height: 1.5; letter-spacing: 0; }
.roll-sub { font-size: 13px; font-weight: 700; opacity: .8; }
.roll-cycle { align-items: center; gap: 6px; }
.roll-cycle .roll-tag { align-self: flex-start; margin-bottom: 10px; }
.roll-arrow { font-family: var(--font-dot), monospace; font-size: 11px; color: #C1D2FF; }
.roll-pill {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 64px; width: 80%; align-self: center; border-radius: 14px;
  background: #C1D2FF; color: var(--blue);
  font-family: var(--font-dot), monospace; font-size: 12px; letter-spacing: .08em;
}
.roll-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- 選ばれる理由（黒に近い紺の背景） ---- */
.sec-ink { background: #0B0B0D; color: #fff; }
.why { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 48rem) { .why { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.why-item { padding: 32px 28px 36px; min-height: 280px; }
.why-no {
  display: block; font-family: var(--font-figtree), sans-serif;
  font-size: clamp(72px, 8vw, 120px); font-weight: 800; line-height: .9; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1.5px #C1D2FF;
  transition: color .4s ease;
}
.why-item:hover .why-no { color: #C1D2FF; }
.why-title { margin-top: 28px; font-size: 24px; font-weight: 700; }
.why-text { margin-top: 12px; font-size: 14px; line-height: 1.9; opacity: .85; }

/* ---- よくある質問（押すと開く） ---- */
.faq { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px;
  background: rgba(2, 0, 15, .18); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .3s ease, border-color .3s ease;
}
.faq-item[open] { background: rgba(255, 255, 255, .1); border-color: #C1D2FF; }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 56px 20px 24px; font-size: 16px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q."; margin-right: 10px; font-family: var(--font-dot), monospace; color: #C1D2FF; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  font-size: 26px; font-weight: 300; line-height: 1; transition: rotate .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item[open] summary::after { rotate: 45deg; }
.faq-a { padding: 0 24px 22px 54px; font-size: 14px; line-height: 1.9; opacity: .9; }
.faq-item[open] .faq-a { animation: faq-open .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } }

/* ---- サービスのページ：できること ---- */
.svc-label { margin-top: 24px; font-family: var(--font-dot), monospace; font-size: 12px; letter-spacing: .1em; color: var(--blue); }
.svc-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-list li {
  border: 1px solid var(--blue); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; color: var(--blue);
  transition: background-color .25s ease, color .25s ease;
}
.svc-list li:hover { background: var(--blue); color: #fff; }
.svc-price { margin-top: 18px; font-family: var(--font-figtree), sans-serif; font-size: 22px; font-weight: 800; color: var(--blue); }

/* ================= 近未来演出 ================= */

/* 点と線の背景を敷くセクション */
.fx-net { position: relative; overflow: hidden; }
:where(.fx-net > *) { position: relative; z-index: 1; }
.fx-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* 奥へ流れていく光のグリッド床 */
.fx-grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(193, 210, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 210, 255, .35) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grid-run 3s linear infinite;
}
@keyframes grid-run { to { background-position: 0 56px, 0 0; } }

/* カード：ガラスの板＋回る光のふち＋マウスを追う光 */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.step {
  overflow: hidden; isolation: isolate;
  background: rgba(2, 0, 15, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .25s ease-out, box-shadow .4s ease;
  will-change: transform;
}
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0 70%, #C1D2FF 85%, #fff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 4s linear infinite;
}
.step::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(193, 210, 255, .35), transparent 60%);
  transition: opacity .3s ease;
}
.step:hover::after { opacity: 1; }
.step:hover { box-shadow: 0 0 0 1px rgba(193, 210, 255, .6), 0 20px 60px rgba(97, 77, 255, .45); }
.step:nth-child(2)::before { animation-delay: -1s; }
.step:nth-child(3)::before { animation-delay: -2s; }
.step:nth-child(4)::before { animation-delay: -3s; }
@keyframes spin-border { to { --angle: 360deg; } }
.step-no {
  background: linear-gradient(110deg, #fff 30%, #C1D2FF 45%, #fff 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* 見出しがうっすら光る */
.fx-net h2 { text-shadow: 0 0 24px rgba(193, 210, 255, .45); }

/* ヒーロー：走査線と、上から下へ流れる光 */
.fx-scan {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px);
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 160px; top: -160px;
  background: linear-gradient(to bottom, transparent, rgba(193, 210, 255, .18), transparent);
  animation: scan-move 6s linear infinite;
}
@keyframes scan-move { to { top: 100%; } }

/* ヒーローのキャッチコピー：ときどき一瞬グリッチ */
.hero-reveal.is-in { animation: glitch 6s steps(1) 2.5s infinite; }
@keyframes glitch {
  0%, 92%, 100% { text-shadow: none; translate: 0 0; }
  93% { text-shadow: 3px 0 #00E5FF, -3px 0 #FF2BD6; translate: 2px 0; }
  94% { text-shadow: -4px 0 #00E5FF, 4px 0 #FF2BD6; translate: -3px 0; }
  95% { text-shadow: 2px 0 #00E5FF, -2px 0 #FF2BD6; translate: 1px 0; }
}

/* カーソル */
.fx-cursor, .fx-cursor-dot { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; mix-blend-mode: difference; }
.fx-cursor {
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 1.5px solid #fff; transition: width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease;
}
.fx-cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 255, 255, .9); }
.fx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }

/* ---- 青い帯が左から伸びて文字が出る ---- */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.77, 0, .18, 1) .1s; }
.wipe.is-in, .is-in .wipe { clip-path: inset(0 0 0 0); }

/* ---- 見出しを1文字ずつ出す ---- */
.split .ch {
  display: inline-block; opacity: 0; transform: translateY(.6em) rotate(6deg);
  transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i) * 35ms);
}
.split.is-in .ch, .is-in .split .ch { opacity: 1; transform: none; }

/* ---- ページ切り替え（青い幕） ---- */
.page-cover {
  position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: var(--blue); transform: translateY(100%);
  animation: cover-in .45s cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes cover-in { to { transform: translateY(0); } }
html.is-entering::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: var(--blue);
  animation: cover-out .6s cubic-bezier(.76, 0, .24, 1) .05s forwards;
}
@keyframes cover-out { to { transform: translateY(-100%); } }

/* ---- 上の読み進みバー ---- */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--blue); transform-origin: 0 50%; transform: scaleX(0);
}

/* ---- ヘッダー：スクロールしたら影 ---- */
header { transition: box-shadow .3s ease, background-color .4s ease; }
header.is-scrolled { box-shadow: 0 6px 24px rgba(29, 1, 254, .08); }

/* トップだけ：白い帯をなくして動画の上に重ねる。スクロールしたら青いすりガラス */
header.is-overlay { background: transparent; }
header.is-overlay > div > a, header.is-overlay nav a { color: #fff; }
header.is-overlay nav a:hover { background: rgba(255, 255, 255, .15); }
header.is-overlay nav a.bg-blue { background: #fff; color: var(--blue); }
header.is-overlay .menu-btn { background: #fff; color: var(--blue); }
header.is-overlay.is-scrolled {
  background: rgba(29, 1, 254, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}

/* ---- フッターの大きなロゴ：触ると文字が跳ねる ---- */
.wave .ch { display: inline-block; }
.wave:hover .ch { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes hop { 40% { transform: translateY(-18%); } 100% { transform: none; } }

/* ---- ボタン：触ると少し大きく ---- */
a.rounded-full { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, background-color .3s ease; }
a.rounded-full:hover { transform: translateY(-2px) scale(1.03); }

/* ---- スマホ用メニュー ---- */
.menu-btn {
  border-radius: 6px; padding: 6px 12px;
  background: var(--blue); color: #fff;
  font-weight: 600; font-size: 13px;
}
.mnav {
  position: absolute; top: 96px; left: 0; right: 0;
  display: flex; flex-direction: column;
  background: var(--blue); padding: 8px 20px 24px;
}
.mnav[hidden] { display: none; }
.mnav a {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-size: 22px; font-weight: 700;
}
.mnav a span { font-size: 12px; font-weight: 700; opacity: .8; }

/* ---- 元の CSS に無かった Tailwind クラスの補足 ---- */
.border-white { border-color: #fff; }
.border-white\/20 { border-color: rgba(255, 255, 255, .2); }
.gap-y-3 { row-gap: .75rem; }
.h-\[640px\] { height: 640px; }
.justify-self-start { justify-self: start; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 48rem) {
  .md\:pt-\[88px\] { padding-top: 88px; }
  .md\:py-\[80px\] { padding-top: 80px; padding-bottom: 80px; }
  .md\:pt-\[80px\] { padding-top: 80px; }
  .md\:py-\[120px\] { padding-top: 120px; padding-bottom: 120px; }
  .md\:py-\[64px\] { padding-top: 64px; padding-bottom: 64px; }
  .md\:text-\[48px\] { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  #intro, #intro-fog, .page-cover, html.is-entering::after { display: none; }
  .hero-video { animation: none; }
  .wipe { clip-path: none; transition: none; }
  .split .ch { opacity: 1; transform: none; transition: none; }
  .fx-grid, .step::before, .step-no, .fx-scan::after, .hero-reveal.is-in { animation: none; }
}

/* 名前が長いので、オープニングのロゴは小さめに */
#intro .intro-logo { font-size: clamp(44px, 10vw, 150px); white-space: nowrap; }