/* =========================================================
   Fundxup — Light (Figma faithful reproduction)
   Canvas: 1440px wide
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #ffffff;
  color: #0f172a;
}

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

ul { list-style: none; }
a { color: inherit; text-decoration: none; }

.page {
  width: 100%;
  position: relative;
  isolation: isolate;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 160px;
  z-index: 100;
  pointer-events: none;
}
.header > * { pointer-events: auto; }

.logo {
  position: relative;
  display: block;
  width: 224.348px;
  height: 64px;
  flex-shrink: 0;
  /* SVG paths use fill="currentColor"; CSS color drives the visible color. */
  color: #ffffff;
  transition: color 0.25s ease;
}
.logo.over-light {
  color: #405866;
}
.logo .logo-vector,
.logo .logo-subtract {
  position: absolute;
  display: block;
}
/* inset: top right bottom left → percentages from Figma
   X-markの左空白(6.05%)を除去するため、両要素を左に6.05%シフト */
.logo .logo-vector {
  top: 30.98%;
  right: 10.33%;
  bottom: 26.63%;
  left: 24.59%;
}
.logo .logo-subtract {
  top: 21.28%;
  right: 83.25%;
  bottom: 20.02%;
  left: 0;
}
.logo svg {
  display: block;
  width: 100%;
  height: 100%;
  preserveAspectRatio: none;
}

.header-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
}

.link-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 8px 16px;
  border-radius: 4px;
  background: rgba(122, 133, 140, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  white-space: nowrap;
}
.link-contact .icon-arrow {
  width: 16px;
  height: 16px;
}

.link-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 8px 16px;
  border-radius: 4px;
  background: #153141;
}
.link-menu img {
  width: 24px;
  height: 24px;
}

/* ---------- Dark band (KV + Philosophy share one continuous X-shape) ---------- */
.dark-band {
  position: relative;
  width: 100%;
  background: #405866;
  overflow: hidden;
  z-index: 7;
}
/* Single SVG instance spans both sections to guarantee perfect continuity.
   Design ratios (1440px design width):
   - SVG width   1869.938 / 1440 ≈ 129.86%
   - SVG height  1992.284 / 1440 ≈ 138.36%
   - SVG right  -105.91   / 1440 ≈ -7.35%
   - SVG top    -66.91    / 1440 ≈ -4.65% */
.bg-x {
  position: absolute;
  width: 129.86vw;
  height: 138.36vw;
  right: -7.35vw;
  top: -4.65vw;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- KV (Hero) ---------- */
.kv {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.kv-canvas {
  position: relative;
  z-index: 1;
  width: 1440px;
  /* Scale section height with viewport so the SVG cropping position stays
     consistent regardless of width. 879 / 1440 = 61.04% */
  height: max(879px, 61.04vw);
}

.kv-hero {
  position: absolute;
  top: 328.5px;
  left: 719.41px;
  width: 463.437px;
  height: 176px;
}
/* kv-titleはグラデスイープで表現するため、.reveal の上昇/フェードを無効化 */
.kv-hero.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/* KV text sweep — gradient reveals from left to right on display */
@property --kv-sweep {
  syntax: '<percentage>';
  initial-value: -20%;
  inherits: false;
}

.kv-title {
  position: absolute;
  top: 0;
  right: 16.437px; /* 463.437 - 447 */
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 88px;
  line-height: 88px;
  letter-spacing: -1px;
  text-align: right;
  white-space: nowrap;
  background-image: linear-gradient(
    100deg,
    #ffffff calc(var(--kv-sweep) - 5%),
    rgba(255, 255, 255, 0.12) calc(var(--kv-sweep) + 28%)
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: --kv-sweep 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}
.kv-hero.in-view .kv-title { --kv-sweep: 130%; }

.kv-dot {
  display: inline-block;
  width: 9.2px;
  height: 9.2px;
  background: #fff;
  margin-left: 0;
  vertical-align: baseline;
  position: relative;
  top: 4px;
  opacity: 0;
  transition: opacity 0.4s ease 1.6s;
}
.kv-hero.in-view .kv-dot { opacity: 1; }

.kv-subtitle {
  position: absolute;
  top: 547.41px;
  right: 206.12px; /* original right edge: 1233.88px from left → 1440-1233.88 = 206.12 */
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: normal;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  background-image: linear-gradient(
    86.32deg,
    #4d5e68 calc(var(--kv-sweep) - 30%),
    #a9c3d3 calc(var(--kv-sweep) + 8%),
    #ffffff calc(var(--kv-sweep) + 37%)
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: --kv-sweep 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s;
}
.kv-subtitle.in-view { --kv-sweep: 30%; }

@media (prefers-reduced-motion: reduce) {
  .kv-title, .kv-subtitle {
    transition: none;
    --kv-sweep: 100%;
  }
  .kv-dot { transition: none; opacity: 1; }
}

.kv-chevron {
  position: absolute;
  /* Place the arrow's center at 95vh from page top
     (= 5% from the viewport bottom on initial view). */
  top: 95vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
}
.kv-chevron img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Philosophy ---------- */
.philosophy {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.philosophy-canvas {
  position: relative;
  z-index: 1;
  width: 1440px;
  height: max(879px, 61.04vw);
}
.philosophy-content {
  position: absolute;
  top: 50%;
  left: calc(50% + 208.5px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  background: #c0ced6;
  border-radius: 22px;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  white-space: nowrap;
}

@property --title-c1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #405866;
}
@property --title-c2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #405866;
}

.section-title {
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: normal;
  white-space: nowrap;
  /* default: faint solid (both stops = badge color) */
  --title-c1: #c0ced6;
  --title-c2: #c0ced6;
  background-image: linear-gradient(80deg, var(--title-c1) 0.79%, var(--title-c2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: --title-c1 0.9s ease-out, --title-c2 0.9s ease-out;
}
.section-title.in-view {
  --title-c1: #405866;
  --title-c2: #80b0cc;
}

@media (prefers-reduced-motion: reduce) {
  .section-title { transition: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: child elements animate sequentially when parent enters view */
.stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
.stagger.in-view > *:nth-child(2) { transition-delay: 0.10s; }
.stagger.in-view > *:nth-child(3) { transition-delay: 0.20s; }
.stagger.in-view > *:nth-child(4) { transition-delay: 0.30s; }
.stagger.in-view > *:nth-child(5) { transition-delay: 0.40s; }
.stagger.in-view > *:nth-child(6) { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.value-row {
  width: 580px;
  display: flex;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid #e2e8f0;
}
.value-row.last { border-bottom: 0; }

.value-key {
  width: 200px;
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 88px;
  line-height: 88px;
  letter-spacing: -2.2px;
  color: #405866;
}
.value-body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.value-title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 1px;
  color: #405866;
  white-space: nowrap;
}
.value-desc {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.3125px;
  color: #6a7880;
}

/* ---------- Container helpers ---------- */
.container {
  width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.section-lead {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.3125px;
  color: #6a7880;
  white-space: nowrap;
}

/* ---------- Strength ---------- */
.strength {
  background: #ffffff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}

.strength-grid {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.strength-item {
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
/* Strength symbol — sweep from bottom-left to top-right (gradient → solid) */
@property --sweep {
  syntax: '<percentage>';
  initial-value: -20%;
  inherits: false;
}

.strength-symbol {
  display: block;
  width: 96px;
  height: 96px;
  -webkit-mask-image: var(--symbol-mask);
          mask-image: var(--symbol-mask);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-image: linear-gradient(
    45deg,
    #405866 var(--sweep),
    #c0ced6 calc(var(--sweep) + 35%)
  );
  transition: --sweep 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* SVG masks are inlined as base64 data URIs so file:// CORS doesn't block them */
.strength-symbol-1 { --symbol-mask: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDk2IDk2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgODMiPgo8ZyBpZD0iUmVjdGFuZ2xlIDQiPgo8L2c+CjxwYXRoIGlkPSJpbWFnZSA3IChUcmFjZWQpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI4LjI4MDYgNi4wOTM2M0MyOC4wNjI2IDYuNTE0NjMgMjcuMDUyNiA5LjY5ODYxIDI2LjAzNTYgMTMuMTY4NkMyMy43NTc2IDIwLjk0MTYgMjAuOTgwNiAyMy40NzY2IDEyLjExOTYgMjUuODc0NkM4LjUwMDU3IDI2Ljg1NDYgNS41Mzg1NyAyNy45NTA2IDUuNTM4NTcgMjguMzExNkM1LjUzODU3IDI4LjY3MTYgOC44MDA1NyAzMC4wMDU2IDEyLjc4ODYgMzEuMjc1NkMyMS40MDI2IDM0LjAxOTYgMjIuOTM5NiAzNS4yMjQ2IDI1LjEyMjYgNDAuOTQwNkMyNy4xNTE2IDQ2LjI1MjYgMjYuNDEzNiA1Mi43NDI2IDIzLjIzNDYgNTcuNTM2NkMyMS40Mzk2IDYwLjI0MjYgMTkuNTkzNiA2MS4zMjE2IDEzLjI4NDYgNjMuMzUwNkM5LjAyNDU4IDY0LjcyMDYgNS41Mzg1NyA2Ni4xMzk2IDUuNTM4NTcgNjYuNTAzNkM1LjUzODU3IDY2Ljg2NjYgOC43MzU1OCA2OC4xMzU2IDEyLjY0MjYgNjkuMzIyNkMyMS4yNDQ2IDcxLjkzNTYgMjMuNjEyNiA3NC4yNzY2IDI2LjAzODYgODIuNTcyNkMyNy4wNDk2IDg2LjAzMDYgMjguMTk1NiA4OS4yMzI2IDI4LjU4NjYgODkuNjg4NkMyOC45NzY2IDkwLjE0MzYgMzAuMjU4NiA4Ny4zNDY2IDMxLjQzNTYgODMuNDcyNkMzNC4wMjU2IDc0Ljk0NjYgMzYuNDg1NiA3Mi4wNjg2IDQyLjk5ODYgNjkuOTUwNkM0Ny41NTI2IDY4LjQ2OTYgNDguMzY5NiA2OC40Njk2IDUyLjk5ODYgNjkuOTQwNkM1OS41NzM2IDcyLjAzMTYgNjIuMDA4NSA3NC44NjM2IDY0LjU0MTUgODMuMzY5NkM2NS42ODY1IDg3LjIxMzYgNjYuNzkyNiA5MC4zNTk2IDY2Ljk5ODYgOTAuMzU5NkM2Ny4yMDU2IDkwLjM1OTYgNjguNTczNiA4Ni43NTk2IDcwLjAzODYgODIuMzU4NkM3My4wODQ2IDczLjIxMzYgNzQuMTg4NiA3Mi4xNTk2IDgzLjc4NzYgNjkuMjI3NkM4Ny40OTk2IDY4LjA5MzYgOTAuMzEyNiA2Ni44MDM2IDkwLjAzODYgNjYuMzYwNkM4OS43NjU2IDY1LjkxNzYgODYuNDIwNSA2NC42MDc2IDgyLjYwNTUgNjMuNDQ4NkM3NC44OTM1IDYxLjEwNjYgNzIuMjIxNiA1OC42MDg2IDcwLjQ3MDYgNTIuMTA4NkM2OS4xMDU2IDQ3LjAzNjYgNzAuNzY3NiAzOS40ODM2IDc0LjAyMjYgMzUuOTcxNkM3NS4zOTg2IDM0LjQ4NjYgNzkuMjAwNiAzMi42MDg2IDgzLjQzNDYgMzEuMzIyNkM4Ny4zNDE2IDMwLjEzNTYgOTAuNTM4NiAyOC44MjU2IDkwLjUzODYgMjguNDEwNkM5MC41Mzg2IDI3Ljk5NTYgODcuNTAwNiAyNi44MzU2IDgzLjc4ODYgMjUuODMxNkM3OS42NjA2IDI0LjcxNTYgNzYuMDM4NiAyMy4wMDY2IDc0LjQ2NTYgMjEuNDMyNkM3Mi44OTE2IDE5Ljg1OTYgNzEuMTgyNiAxNi4yMzc2IDcwLjA2NjYgMTIuMTA5NkM2OS4wNjI2IDguMzk3NjIgNjcuODc3NiA1LjM1OTYyIDY3LjQzMjYgNS4zNTk2MkM2Ni45ODc2IDUuMzU5NjIgNjUuNjk0NiA4LjQ3NzYgNjQuNTU5NiAxMi4yODg2QzYyLjE4NzYgMjAuMjUzNiA1OS4yNjk2IDIzLjMzNDYgNTIuMjM2NiAyNS4zMDQ2QzQ4LjM0MTYgMjYuMzk0NiA0Ni45ODQ2IDI2LjMzNjYgNDIuNjMyNiAyNC44OTA2QzM2LjUwMzYgMjIuODU1NiAzNC4xMDg2IDIwLjAyMjYgMzEuOTIwNiAxMi4yMjQ2QzMwLjMxOTYgNi41MTY2MSAyOS4xMTI2IDQuNDg0NjMgMjguMjgwNiA2LjA5MzYzWk02My44Njc2IDQyLjQ1ODZDNjIuMDY5NiAzNi40ODQ2IDU5LjE5NDYgMzMuNjMxNiA1My4xNjU2IDMxLjg0MTZDNTAuMTk5OSAzMC45NjA5IDQ4LjkzOCAzMC41MDczIDQ3LjY5NTkgMzAuNTU2M0M0Ni40Mzc2IDMwLjYwNjEgNDUuMTk5NyAzMS4xNzE2IDQyLjIzMTYgMzIuMzMxNkMzNS42Njc2IDM0Ljg5NjYgMzQuODI5NiAzNS43NjE2IDMyLjg1OTYgNDIuMDEwNkMzMS4zODc2IDQ2LjY3OTYgMzEuMzIzNiA0OC4xMDc2IDMyLjQwNDYgNTIuMTUyNkMzNC4wMjI2IDU4LjIwMzYgMzYuNjE4NiA2MC44OTM2IDQyLjg0MDYgNjIuOTU5NkM0Ny40ODg2IDY0LjUwMzYgNDguMjMxNiA2NC41MDY2IDUzLjAxNzYgNjIuOTk3NkM1OS4zNTE2IDYxLjAwMDYgNjEuOTM2NSA1OC4zNDA2IDYzLjc5MTUgNTEuOTA2NkM2NS4wMDU1IDQ3LjY5OTYgNjUuMDE2NiA0Ni4yNzc2IDYzLjg2NzYgNDIuNDU4NloiIGZpbGw9InZhcigtLWZpbGwtMCwgIzQwNTg2NikiLz4KPC9nPgo8L3N2Zz4K"); }
.strength-symbol-2 { --symbol-mask: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDk2IDk2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgODQiPgo8ZyBpZD0iUmVjdGFuZ2xlIDQiPgo8L2c+CjxwYXRoIGlkPSJpbWFnZSA3IChUcmFjZWQpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI5Ljc2NDYgMTcuMDU1N0wxMS41Mzg2IDI3LjYzODdMMTEuNTU2NiA0OC43NDg3TDExLjU3NDYgNjkuODU5N0wyOS41ODM2IDgwLjIwNTdDNDEuNjM0NiA4Ny4xMjk3IDQ4LjE2MzYgOTAuMzM3NyA0OS4zMTU2IDg5LjkwMTdDNTAuMjYzNiA4OS41NDQ3IDU4LjU3MTYgODQuODg4NyA2Ny43Nzg2IDc5LjU1NTdMODQuNTE4NiA2OS44NTk3TDg0LjUyODYgNDguNzExN0w4NC41Mzg2IDI3LjU2MzdMNzEuNzg4NiAyMC4xMzA3QzY0Ljc3NTYgMTYuMDQxNyA1Ni41NTI2IDExLjI5NjcgNTMuNTE0NiA5LjU4NDY5TDQ3Ljk5MTYgNi40NzE2OEwyOS43NjQ2IDE3LjA1NTdaTTc1LjQ2NDYgMzIuODU5N0w2Mi4wNzQ2IDI1LjEwOTdDNTQuNzA5NiAyMC44NDc3IDQ4LjMxMzYgMTcuMzk0NyA0Ny44NjE2IDE3LjQzNjdDNDcuNDA4NiAxNy40Nzg3IDQxLjE4ODYgMjAuOTgwNyAzNC4wMzg2IDI1LjIxNjdMMjEuMDM4NiAzMi45MjA3TDIwLjc2MzYgNDguNTAyN0wyMC40ODk2IDY0LjA4NDdMMzQuMjI0NiA3Mi4xNDQ3QzQ1LjgzMTYgNzguOTU0NyA0OC4yNzY2IDgwLjAzODcgNDkuOTk5NiA3OS4xMzc3QzUxLjEyMDYgNzguNTUxNyA1Ny4zMjU2IDc0Ljk1NDcgNjMuNzg4NiA3MS4xNDQ3TDc1LjUzODYgNjQuMjE3N0w3NS41MDE2IDQ4LjUzODdMNzUuNDY0NiAzMi44NTk3Wk0zNi45OTM2IDI4LjgxNTdMMjYuMDM4NiAzNS4xMjI3TDI1Ljc2MTYgNDguNTIxN0wyNS40ODQ2IDYxLjkyMDdMMzYuMzg5NiA2OC4xNDA3QzQyLjM4NzYgNzEuNTYwNyA0Ny42NzM2IDc0LjM1OTcgNDguMTM2NiA3NC4zNTk3QzQ4LjU5ODYgNzQuMzU5NyA1My44Mjg2IDcxLjU4MjcgNTkuNzU3NiA2OC4xODg3TDcwLjUzODYgNjIuMDE4N1Y0OC43NDc3VjM1LjQ3NjdMNjEuMjg4NiAzMC4wNjA3QzU2LjIwMTYgMjcuMDgxNyA1MS4xMTg2IDI0LjE2MzcgNDkuOTkzNiAyMy41NzY3QzQ4LjI3ODYgMjIuNjgxNyA0Ni4xODM2IDIzLjUyNTcgMzYuOTkzNiAyOC44MTU3WiIgZmlsbD0idmFyKC0tZmlsbC0wLCAjNDA1ODY2KSIvPgo8L2c+Cjwvc3ZnPgo="); }
.strength-symbol-3 { --symbol-mask: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDk2IDk2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgODUiPgo8ZyBpZD0iUmVjdGFuZ2xlIDQiPgo8L2c+CjxwYXRoIGlkPSJpbWFnZSA3IChUcmFjZWQpIiBkPSJNMjAuNDA4MyAyMi42MzIyQzE4LjA0MjQgMTguNDkzMSAxOC42MDM2IDEzLjMzMjUgMjEuNzY0MiAxMC4xNzJDMjcuODc5NSA0LjA1NjY2IDM4LjAzNTcgOC4yMzI5NCAzOC4wMzU3IDE2Ljg2MjhDMzguMDM1NyAyMC4wOTU3IDM3LjM3ODMgMjEuNDgyMSAzNC4yMjQ0IDI0LjkwMzdDMzEuMjAzOSAyOC4xODA1IDMwLjQxMyAyOS43NzI3IDMwLjQxMyAzMi41Nzg4QzMwLjQxMyAzOS43MDMyIDM4LjI4MTYgNDMuOTMxOSA0NC43MDU2IDQwLjI1OTZDNTEuNjA3OSAzNi4zMTM5IDU5Ljk1MDkgNDAuNjc1MSA1OS45NTA5IDQ4LjIyNzJDNTkuOTUwOSA1MS4zMjMgNTkuMjIyIDUyLjg5NjEgNTYuMTM5NiA1Ni40NTc4QzUxLjI4MyA2Mi4wNjkxIDUwLjk3NzEgNjYuMjExMSA1NS4xMTM0IDcwLjM0NzNDNTguMjUwMSA3My40ODQxIDYyLjYwNzQgNzMuOTk3NiA2Ni42MjA4IDcxLjcwMzJDNjcuOTMwOSA3MC45NTQzIDcwLjY0MzcgNzAuMzI2NCA3Mi42NDk0IDcwLjMwNzNDODEuMDEwNSA3MC4yMzAxIDg1LjA5MjUgODAuNTM0MSA3OS4wODEgODYuNTQ1NUM3NC42NDY1IDkwLjk4IDY5LjM5MzUgOTAuMjY4MiA2My4xNzgyIDg0LjM5MjFDNTkuNzQzMiA4MS4xNDQ4IDU2LjA4NDMgODAuNzAxOCA1MS42NDQxIDgyLjk5ODFDNDUuNzk5NCA4Ni4wMjA1IDQwLjExMSA4NC43MzcgMzcuNTY4OCA3OS44MjE0QzM1LjExMjQgNzUuMDcwNSAzNS43MjYxIDcxLjYyNTEgMzkuODI0MiA2Ny4xNTYzQzQ1LjExNzIgNjEuMzg0IDQ1LjYwOTggNTguMDMxIDQxLjgwMzIgNTMuNjk0NkMzOS4zNjAyIDUwLjkxMjMgMzguMTM0OCA1MC4yNzExIDM1LjMxNjMgNTAuMjk3OEMzMy40MDU5IDUwLjMxNjggMzAuNzcwNCA1MC45NDQ3IDI5LjQ2MDIgNTEuNjkzN0MyMi41NTc5IDU1LjYzOTQgMTQuMjE0OCA1MS4yNzgyIDE0LjIxNDggNDMuNzI2MUMxNC4yMTQ4IDQwLjYzMDMgMTQuOTQzOCAzOS4wNTcyIDE4LjAyNjIgMzUuNDk1NUMyMi4xODgyIDMwLjY4NjUgMjIuODc5IDI2Ljk1NDIgMjAuNDA4MyAyMi42MzIyWiIgZmlsbD0idmFyKC0tZmlsbC0wLCAjNDA1ODY2KSIvPgo8L2c+Cjwvc3ZnPgo="); }
.strength-symbol-4 { --symbol-mask: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDk2IDk2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgODYiPgo8ZyBpZD0iUmVjdGFuZ2xlIDQiPgo8L2c+CjxwYXRoIGlkPSJpbWFnZSA4IChUcmFjZWQpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2LjU1ODMgNi42NzQwMkMzNS4yODQ0IDkuNjc1ODIgNDUuMDAzNSAxNS40MTcgNTQuMTE2MSAyMi45NTI1QzU2LjQyMDIgMjQuODU3NyA1OC43MDg0IDI2LjE2ODkgNTkuMTk5NSAyNS44NjQ4QzU5LjY5MDcgMjUuNTYxNiA2MC42NTUyIDIzLjQzNzUgNjEuMzQyMyAyMS4xNDU4QzYyLjA1MTUgMTguNzgwNSA2Mi43ODIgMTcuNTUzNiA2My4wMzIgMTguMzA4QzY2LjI1ODEgMjguMDY4NyA2OS45ODA3IDMzLjI3ODkgNzUuMzM4OSAzNS41MzE2TDc3Ljg2MTEgMzYuNTkxOUw3NC43NDg0IDM4LjA3NjhMNzEuNjM0OSAzOS41NjA5TDc3LjA4OCA0Ni44ODcyQzgwLjA4NzEgNTAuOTE1NiA4NC4zMzg5IDU3LjkxNjUgODYuNTM2NyA2Mi40NDMyQzg5Ljg1NDEgNjkuMjc2NiA5MC42MDMyIDcxLjc3MyA5MC45NDg5IDc3LjE0OTlDOTEuNDIzMiA4NC41NTMzIDkwLjYxNDcgODYuNzI4OSA4Ni40MzgzIDg5LjI3NUM4MS4wOTUxIDkyLjUzMyA3Mi4zODY3IDkxLjE0MzggNjAuNTk0IDg1LjE1MjZDNTEuNDM4OCA4MC41MDE4IDQzLjkzNyA3NC44NTkxIDMzLjY0OTYgNjQuODg3M0MyMi41NDY3IDU0LjEyNTcgMTUuMjQ4OCA0NC41NDk0IDkuODE2OTcgMzMuNjE0OUM2LjI2MDIgMjYuNDU0MyA1LjY5OTAzIDI0LjU0MjEgNS4zNDA4NyAxOC4zNDYxTDQuOTMwNCAxMS4yNjM2TDguMDU3MjEgOC4xMzY4QzEwLjkzNCA1LjI2IDExLjYwNiA1LjAxIDE2LjQ1MjcgNS4wMUMxOS4zNTA4IDUuMDEgMjMuODk3OCA1Ljc1OTEyIDI2LjU1ODMgNi42NzQwMlpNMTguMzAzOCAxMS42MjhDMTUuMzAzNyAxMy4zMzAxIDEzLjY5MjkgMTguMDgxIDE0LjQ1NDQgMjIuOTgwOUMxNC43NzQ1IDI1LjA0MyAxNi44MDczIDMwLjMyMDUgMTguOTcxMyAzNC43MDg5QzMwLjQxMTEgNTcuOTEwMyA1OS4wNzM2IDgxLjI1MTkgNzYuMTI0MyA4MS4yNTE5Qzc5Ljk0MTcgODEuMjUxOSA4MS4wNTE3IDgwLjg0NzYgODMuMjM4OCA3OC42NjA1Qzg2LjQ3ODIgNzUuNDIxMSA4Ni42Nzg1IDcwLjgxMDMgODMuOTMyIDYyLjY3ODFDODIuMTMxNSA1Ny4zNDU2IDcyLjMxNCA0MS4zNTc5IDcwLjgzOTcgNDEuMzU3OUM2OS4wNDg5IDQxLjM1NzkgNjQuNTczNyA0OC45Mzg2IDYzLjI1MSA1NC4yMTI2TDYyLjU4NDMgNTYuODcyMkw2MS41MzQ3IDUyLjgzOTNDNTkuNjA3MyA0NS40MzQxIDU0LjMzMzMgMzkuMDkwMSA0OC42NjkzIDM3LjM2NDlDNDYuNTcgMzYuNzI0OCA0Ni41ODc3IDM2LjY4NjcgNDkuNTU1OCAzNS40NDJDNTEuMjIyNSAzNC43NDM0IDUzLjg3NjggMzIuOTIyNSA1NS40NTU3IDMxLjM5NTlDNTguMjA5MyAyOC43MzE5IDU4LjI2MzMgMjguNTQ5MiA1Ni43ODU1IDI2LjkwNDdDNTMuOTQ5NSAyMy43NDg2IDQ0LjUxNjggMTcuNTAyMSAzNy42OTQgMTQuMjYxOUMyOS43NzQ2IDEwLjUwMTIgMjIuMTIyOSA5LjQ2MTI4IDE4LjMwMzggMTEuNjI4WiIgZmlsbD0idmFyKC0tZmlsbC0wLCAjNDA1ODY2KSIvPgo8L2c+Cjwvc3ZnPgo="); }

.strength-grid.in-view .strength-symbol { --sweep: 130%; }
.strength-grid.in-view .strength-item:nth-child(1) .strength-symbol { transition-delay: 0.05s; }
.strength-grid.in-view .strength-item:nth-child(2) .strength-symbol { transition-delay: 0.20s; }
.strength-grid.in-view .strength-item:nth-child(3) .strength-symbol { transition-delay: 0.35s; }
.strength-grid.in-view .strength-item:nth-child(4) .strength-symbol { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
  .strength-symbol {
    transition: none;
    --sweep: 130%;
  }
}
.strength-item p {
  height: 56px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 1px;
  color: #405866;
  text-align: center;
}

/* ---------- Services ---------- */
.services {
  background: #ffffff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 4;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  align-self: start;
}
.service-card header {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: #405866;
  border-radius: 10px;
}
.service-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.service-card h3 {
  flex: 1 0 0;
  min-width: 0;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 1px;
  color: #405866;
}
.service-card p {
  width: 296px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3125px;
  color: #6a7880;
}

/* ---------- Company ---------- */
.company {
  background: #ffffff;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.company-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.company-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #e2e8f0;
}
.company-row:last-child { /* Figma still shows border on last; keep border for parity */
  border-bottom: 1px solid #e2e8f0;
}
.company-row dt {
  width: 160px;
  flex-shrink: 0;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 1px;
  color: #405866;
}
.company-row dd {
  flex: 1 0 0;
  min-width: 0;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.3125px;
  color: #6a7880;
}

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  height: 441px;
  background: #30424d;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.footer-inner {
  width: 1440px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 183.5px 0 183.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  height: 252px;
}

.footer-brand {
  width: 142px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
.footer-logo {
  position: relative;
  width: 142px;
  height: 40.509px;
  overflow: hidden;
}
.footer-logo .logo-vector,
.footer-logo .logo-subtract {
  position: absolute;
  display: block;
}
.footer-logo .logo-vector {
  top: 30.98%;
  right: 4.28%;
  bottom: 26.63%;
  left: 30.64%;
}
.footer-logo .logo-subtract {
  top: 21.28%;
  right: 77.2%;
  bottom: 20.02%;
  left: 6.05%;
}
.footer-logo .logo-vector img,
.footer-logo .logo-subtract img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -0.1504px;
  color: #a1a1aa;
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #e8edf8;
  margin-bottom: 16px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col li {
  height: 24px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #a1a1aa;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  padding-top: 1px;
  border-top: 1px solid #6a7880;
}
.footer-bottom .copyright {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #71717a;
  white-space: nowrap;
}
.footer-bottom .privacy {
  width: 138.883px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  color: #a1a1aa;
}

/* =========================================================
   Responsive — Tablet & smaller (≤ 1024px)
   At this width the X-shape composition no longer fits the design content;
   hide it and use solid dark band instead.
   ========================================================= */
@media (max-width: 1024px) {
  /* Header */
  .header {
    width: 100%;
    padding: 16px 32px;
    left: 0;
    transform: none;
  }

  /* Containers */
  .container {
    width: 100%;
    padding: 0 32px;
  }
  .kv-canvas,
  .philosophy-canvas {
    width: 100%;
  }

  /* X-shape positioned per Figma mobile (node 433:1898).
     Figma values at 430 viewport: 1067.94×1137.81 at left:-506.25, top:-42.84.
     Converted to vw: 1067.94/430 ≈ 248.4%, 1137.81/430 ≈ 264.6%, etc. */
  .bg-x {
    width: 248.4vw;
    height: 264.6vw;
    left: -117.7vw;
    right: auto;
    top: -9.96vw;
  }

  /* Philosophy returns to a white section (matches Figma mobile).
     Dark-band only effectively contains KV. */
  .philosophy {
    background: #ffffff;
  }
  /* Revert text colors — section now on white bg, default dark colors apply */
  .philosophy .section-title {
    --title-c1: #c0ced6;
    --title-c2: #c0ced6;
  }
  .philosophy .section-title.in-view {
    --title-c1: #405866;
    --title-c2: #80b0cc;
  }
  .philosophy .value-key { color: #405866; }
  .philosophy .value-title { color: #405866; }
  .philosophy .value-desc { color: #6a7880; }
  .philosophy .value-row { border-bottom-color: #e2e8f0; }

  /* KV hero — Figma mobile: container centered with width 316, text right-aligned.
     Uses left/right offsets (not transform) to avoid clashing with .reveal's translateY. */
  .kv-hero {
    left: calc(50% - 158px);          /* center - half-width: 316/2 = 158 */
    right: auto;
    width: 316px;
    height: 120px;
    top: 215px;
    padding-right: 11px;
  }
  .kv-title {
    position: static;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -0.68px;
    text-align: right;
    white-space: nowrap;
  }
  .kv-dot {
    width: 6.27px;
    height: 6.27px;
    top: 0;
  }
  /* Subtitle: right edge at viewport_center + 180 (Figma).
     `right: 50% - 180` places the right edge 180px past viewport center. */
  .kv-subtitle {
    left: auto;
    right: calc(50% - 180px);
    width: auto;
    max-width: 90vw;
    top: 348px;
    font-size: 24px;
    letter-spacing: 0.5px;
    text-align: right;
    white-space: nowrap;
  }

  /* Philosophy content — fluid, centered */
  .philosophy-content {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 32px;
    width: 100%;
    max-width: 640px;
  }
  .value-row,
  .value-row > div { width: 100% !important; }

  /* Strength: 4 → 2 columns */
  .strength-grid {
    flex-wrap: wrap;
    gap: 32px;
  }
  .strength-item {
    flex: 1 0 calc(50% - 16px);
    min-width: 0;
  }

  /* Services: 3 → 2 columns */
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card p { width: auto; }

  /* Chevron — Figma mobile: bottom:16, centered */
  .kv-chevron {
    top: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
  }

  /* Footer */
  .footer {
    height: auto;
    min-height: 441px;
  }
  .footer-inner {
    width: 100%;
    padding: 64px 32px 0 32px;
  }
}

/* =========================================================
   Responsive — Mobile (≤ 767px)
   ========================================================= */
@media (max-width: 767px) {
  /* Header — minimal padding (container padding=20px と揃える) */
  .header {
    padding: 12px 20px;
  }
  .logo {
    width: 168px;
    height: 48px;
  }

  /* Containers */
  .container {
    padding: 0 20px;
    gap: 40px;
  }

  .kv-canvas {
    height: 70vh;
  }

  /* Philosophy — Figma mobile py-56 */
  .philosophy-canvas {
    height: auto;
    min-height: 720px;
    padding: 56px 0;
  }
  .philosophy-content {
    position: static;
    transform: none;
    padding: 0 20px;
    max-width: none;
    margin: 0 auto;
  }
  .value-row,
  .value-row > div {
    width: 100% !important;
  }
  .value-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
    gap: 8px;
  }
  .value-key {
    width: auto !important;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.4px;
  }
  .value-title {
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
  }
  .value-desc {
    font-size: 15px;
  }

  /* Section titles — Figma mobile uses 32px */
  .section-title {
    font-size: 32px;
  }
  .section-lead {
    font-size: 15px;
    white-space: normal;
  }

  /* Sections — reduced padding */
  .strength,
  .services,
  .company {
    padding: 56px 0;
  }

  /* Strength: 2 → 1 column */
  .strength-grid {
    flex-direction: column;
    gap: 24px;
  }
  .strength-item {
    aspect-ratio: auto;
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
  }
  .strength-item img,
  .strength-symbol {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }
  .strength-item p {
    height: auto;
    font-size: 16px;
    text-align: left;
    flex: 1;
  }

  /* Services: 2 → 1 column */
  .service-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .service-card {
    padding: 20px;
  }
  .service-card h3 {
    font-size: 18px;
  }
  .service-card p {
    width: auto;
    font-size: 14px;
  }

  /* Company: stack label / value */
  .company-row {
    flex-direction: column;
    gap: 4px;
    padding: 20px 0;
  }
  .company-row dt {
    width: auto;
    font-size: 16px;
  }
  .company-row dd {
    font-size: 15px;
  }

  /* Footer single column */
  .footer {
    height: auto;
  }
  .footer-inner {
    padding: 48px 20px 0;
    gap: 32px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 24px;
  }
  .footer-brand {
    width: 100%;
  }
  .footer-bottom {
    height: auto;
    padding: 16px 0;
  }
}

@media (max-width: 360px) {
  .kv-title { font-size: 40px; }
  .kv-subtitle { font-size: 18px; }
  .value-key { font-size: 48px; }
}