/* ══════════════════════════════════════════════════
   ROOT & RESET
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Standard vars (matches other pages) */
  --w:   #FFFFFF;
  --k:   #0A0A0A;
  --g50: #FAFAFA;
  --g200:#E8E8E8;
  --g400:#AAAAAA;
  --g500:#888888;
  --g600:#555555;
  --r:   #f43b47;
  --p:   #453a94;
  --grad:    linear-gradient(135deg, #f43b47 0%, #453a94 100%);
  --grad-v:  linear-gradient(to top,  #f43b47 0%, #453a94 100%);
  --max: 1100px;
  --font-d: 'Barlow', sans-serif;
  --font-b: 'Noto Sans JP', sans-serif;
  --font-m: 'Barlow', sans-serif;

  /* Spacing (golden ratio — used throughout form) */
  --s1:  10px; --s2: 16px; --s3: 26px; --s4: 42px;
  --s5:  68px; --s6: 110px; --s7: 178px;

  /* Legacy aliases (for form CSS) */
  --white: #FFFFFF; --black: #0A0A0A; --ink: #111111;
  --g100:  #F7F7F7;
  --grad-h: linear-gradient(to right, #453a94 0%, #f43b47 100%);
  --grad-r: linear-gradient(135deg,   #453a94 0%, #f43b47 100%);
  --c1: #453a94; --c2: #f43b47;
  --fi: 'Barlow', sans-serif;
  --fj: 'Noto Sans JP', sans-serif;
  --fm: 'Barlow', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--w);
  color: var(--k);
  font-family: var(--font-b);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  cursor: none;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

::selection { background: var(--p); color: #fff; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--w); }
::-webkit-scrollbar-thumb { background: var(--grad); }

/* ══════════════════════════════════════════════════
   CURSOR
══════════════════════════════════════════════════ */
.cursor {
  position: fixed; width: 5px; height: 5px; border-radius: 50%;
  background: var(--grad); pointer-events: none; z-index: 9998;
  mix-blend-mode: multiply; transform: translate(-50%,-50%);
  transition: transform .08s;
}
@media(hover:none){ .cursor { display: none; } }


/* ══════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════ */
#prog {
  position: fixed; right: 0; top: 0;
  width: 1px; height: 100vh; z-index: 200;
  background: var(--g200);
}
#prog-fill {
  width: 1px; height: 0%;
  background: var(--grad);
  box-shadow: 0 0 5px rgba(69,58,148,.4);
  transition: height .1s linear;
}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════
   REVEAL SYSTEM
══════════════════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
.rv.in { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative; overflow: hidden;
}

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(228,228,228,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,228,228,.5) 1px, transparent 1px);
  background-size: calc(100%/12) 80px;
}
.hero-line-r {
  position: absolute; right: var(--s4); top: 15%; bottom: 12%;
  width: 1px; background: var(--g200);
}
.hero-line-r::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 1px; height: 30%;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(244,59,71,.3);
  animation: vBeam 3.2s cubic-bezier(.76,0,.24,1) 1.8s infinite;
}
@keyframes vBeam {
  0%   { top: 0;    height: 0;   opacity: 1; }
  45%  {             height: 30%;             }
  85%  { top: 100%; height: 0;   opacity: 0; }
  100% { top: 0;    height: 0;   opacity: 0; }
}

.hero-coord {
  position: absolute; bottom: 80px; right: 40px;
  font-family: var(--fm); font-size: 9px; letter-spacing: .15em;
  color: var(--g400); writing-mode: vertical-rl;
  opacity: 0; animation: cdFade 1s ease 2s forwards;
}
@keyframes cdFade { to { opacity: 1; } }

.hero-body {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0; width: 100%;
  padding: 0 var(--s4) 48px;
}
.hero-eyebrow {
  font-family: var(--fm);
  font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--g400);
  margin-bottom: var(--s3);
  display: flex; align-items: center; gap: 12px;
  opacity: 0;
  animation: hFade 1s ease 1.5s forwards;
}
.hero-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--grad); flex-shrink: 0; }
.hero-title {
  font-family: var(--fi);
  font-size: clamp(40px, 7.5vw, 96px);
  font-weight: 700; line-height: .88;
  letter-spacing: -.03em;
  overflow: hidden;
  margin-bottom: var(--s4);
}
.ht-line {
  display: block; overflow: hidden;
}
.ht-inner {
  display: block;
  transform: translateY(105%);
  animation: hSlide 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.ht-line:nth-child(1) .ht-inner { animation-delay: .4s; }
.ht-line:nth-child(2) .ht-inner { animation-delay: .6s; }
.ht-line:nth-child(3) .ht-inner { animation-delay: .8s; color: var(--g400); font-weight: 100; font-size: .42em; letter-spacing: 0; }

.hero-switcher {
  display: flex; gap: 2px;
  margin-bottom: var(--s3);
  opacity: 0;
  animation: hFade 1s ease 1.3s forwards;
}
.sw-btn {
  font-family: var(--fi);
  font-size: 11px; font-weight: 300;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 12px 32px;
  border: none; cursor: none;
  position: relative; overflow: hidden;
  transition: color .35s ease;
  color: var(--g500);
  background: var(--g100);
}
.sw-btn-bg {
  position: absolute; inset: 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.sw-btn.active { color: #fff; }
.sw-btn.active .sw-btn-bg { opacity: 1; }
.sw-btn-label { position: relative; z-index: 1; }

.hero-sub {
  font-family: var(--fm);
  font-size: 11px; letter-spacing: .1em;
  color: var(--g400);
  opacity: 0;
  animation: hFade 1s ease 1.7s forwards;
}

.scroll-hint {
  position: absolute; bottom: var(--s3); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; animation: hFade 1s ease 2s forwards;
}
.scroll-hint span {
  font-family: var(--fm); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--g400);
}
.scroll-tick {
  width: 1px; height: 36px; background: var(--g200); overflow: hidden;
}
.scroll-tick::after {
  content: ''; display: block;
  width: 100%; height: 50%;
  background: var(--grad);
  animation: tickDrop 1.8s cubic-bezier(.76,0,.24,1) 2s infinite;
}
@keyframes tickDrop { 0%{transform:translateY(-100%)} 100%{transform:translateY(300%)} }
@keyframes hSlide { to{transform:translateY(0)} }
@keyframes hFade  { to{opacity:1} }

/* ══════════════════════════════════════════════════
   FORM WRAPPER (switcher)
══════════════════════════════════════════════════ */
#form-wrap {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s7) var(--s4) var(--s7);
  position: relative;
}

.f-panel {
  position: absolute; top: var(--s7); left: var(--s4); right: var(--s4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1),
              transform .65s cubic-bezier(.16,1,.3,1);
}
.f-panel.active {
  position: relative; top: auto; left: auto; right: auto;
  pointer-events: all;
  opacity: 1; transform: translateY(0);
}
.f-panel.exit {
  opacity: 0; transform: translateY(-18px);
  transition: opacity .4s ease, transform .4s ease;
}

/* ══════════════════════════════════════════════════
   FORM GRID
══════════════════════════════════════════════════ */
.f-layout {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: var(--s6);
  align-items: start;
}
.f-left { position: sticky; top: 100px; }
.f-title {
  font-family: var(--fi);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 200; line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: var(--s3);
}
.f-title .g {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f-desc {
  font-size: 12px; color: var(--g600);
  line-height: 2; font-weight: 300;
  max-width: 280px;
}
.f-step {
  font-family: var(--fm);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--g400);
  margin-top: var(--s4); margin-bottom: var(--s2);
  display: flex; align-items: center; gap: 10px;
}
.f-step::before {
  content: '';
  width: 16px; height: 1px;
  background: var(--grad-h);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(69,58,148,.4);
}

/* ── Input fields ── */
.f-fields {
  display: flex; flex-direction: column;
  gap: var(--s4);
}
.f-field {
  position: relative;
  padding-top: 20px;
}
.f-label {
  position: absolute; top: 20px; left: 0;
  font-family: var(--fi);
  font-size: 12px; font-weight: 300;
  color: var(--g400);
  letter-spacing: .06em;
  pointer-events: none;
  transition: top .35s cubic-bezier(.16,1,.3,1),
              font-size .35s cubic-bezier(.16,1,.3,1),
              color .35s ease;
  transform-origin: left top;
}
.f-field.focused .f-label,
.f-field.filled  .f-label {
  top: 0; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--g500);
}
.f-field.focused .f-label { color: var(--black); }

.f-input, .f-textarea, .f-select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g200);
  padding: 8px 0 10px;
  font-family: var(--fi);
  font-size: 14px; font-weight: 300;
  color: var(--ink);
  letter-spacing: .02em;
  outline: none;
  transition: border-color .3s ease;
  cursor: none;
  -webkit-appearance: none;
}
.f-select {
  cursor: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AAAAAA'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 20px;
}
.f-textarea {
  resize: none; overflow: hidden;
  min-height: 42px; line-height: 1.9;
}

.f-underline {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 1px;
  overflow: hidden;
}
.f-underline::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-h);
  box-shadow: 0 0 8px rgba(69,58,148,.35);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.f-field.focused .f-underline::after { transform: scaleX(1); }

.f-select-wrap { position: relative; }

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

/* ── Checkbox ── */
.f-check-wrap {
  display: flex; align-items: flex-start; gap: 14px;
  cursor: none; margin-top: var(--s2);
}
.f-check {
  position: relative; flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 3px;
  cursor: none;
}
.f-check input {
  position: absolute; opacity: 0; inset: 0;
  width: 100%; height: 100%; margin: 0;
  cursor: none;
}
.f-check-box {
  width: 16px; height: 16px;
  border: 1px solid var(--g200);
  position: relative;
  transition: border-color .3s;
}
.f-check-box::after {
  content: '';
  position: absolute; inset: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .3s ease;
}
.f-check input:checked ~ .f-check-box { border-color: var(--c1); }
.f-check input:checked ~ .f-check-box::after { opacity: 1; }
.f-check-label {
  font-size: 12px; color: var(--g600);
  line-height: 1.7; font-weight: 300;
  cursor: none;
}
.f-check-label em { font-style: normal; color: var(--ink); font-weight: 400; }

.f-note {
  font-family: var(--fm);
  font-size: 10px; letter-spacing: .12em;
  color: var(--g400);
  margin-top: var(--s3);
  font-style: italic;
}

/* ── Submit button ── */
.f-submit-wrap {
  margin-top: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  align-items: flex-start;
}
.f-submit {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 56px;
  border: none; cursor: none;
  font-family: var(--fi);
  font-size: 11px; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase;
  color: #fff;
  transition: gap .3s ease;
}
.f-submit:hover { gap: 20px; }
.f-submit-bg {
  position: absolute; inset: 0;
  background: var(--black);
  transition: opacity .5s ease;
}
.f-submit-fill {
  position: absolute; inset: 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.f-submit:hover .f-submit-fill { opacity: 1; }
.f-submit:hover .f-submit-bg  { opacity: 0; }
.f-submit-lbl { position: relative; z-index: 1; }
.f-submit-arr {
  position: relative; z-index: 1;
  font-size: 16px;
  transition: transform .3s ease;
}
.f-submit:hover .f-submit-arr { transform: translateX(5px); }
.f-submit:disabled { opacity: .35; pointer-events: none; }

/* ── Success state ── */
.f-success {
  display: none;
  flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding: var(--s5) 0;
}
.f-success.show { display: flex; }
.fs-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  box-shadow: 0 0 20px rgba(69,58,148,.3);
}
.fs-title {
  font-family: var(--fi);
  font-size: 24px; font-weight: 200;
  letter-spacing: -.01em; line-height: 1.2;
}
.fs-text {
  font-size: 12px; color: var(--g600);
  line-height: 2; max-width: 360px;
}

/* ── Form divider ── */
.f-divider {
  width: 100%; height: 1px;
  background: var(--g200); margin: var(--s5) 0;
  position: relative; overflow: hidden;
}
.f-divider::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, rgba(69,58,148,.5), rgba(244,59,71,.5), transparent);
  animation: beamSlide 4s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes beamSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ══════════════════════════════════════════════════
   CONTACT FORM specifics
══════════════════════════════════════════════════ */
.c-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #form-wrap, .hero-body { padding-left: var(--s3); padding-right: var(--s3); }
  .f-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .f-left { position: static; }
  .f-row, .c-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .hero-title { font-size: clamp(26px, 8vw, 54px); }
  .hero-coord { display: none; }
}
@media(max-width:480px){
  #form-wrap{padding-left:var(--s2);padding-right:var(--s2)}
  .sw-btn{padding:10px 20px;font-size:10px}
}