@charset "UTF-8";

/* ==========================================================================
  1) Animations
========================================================================== */
@keyframes orbFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, 30px) scale(1.05);
  }
  100% {
    transform: translate(10px, -10px) scale(1);
  }
}

/* ==========================================================================
  2) Hero
========================================================================== */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: var(--header-h);
  isolation: isolate;
}

/* bokehが映える “場” */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* fallback付きで無効化を防ぐ */
  background: radial-gradient(
    circle at var(--hx2, 55%) var(--hy2, 58%),
    hsla(
        var(--h, 205),
        var(--sat, 72%),
        var(--lit, 82%),
        calc(var(--a, 0.55) * var(--soft, 0.7))
      )
      0%,
    hsla(
        var(--h, 205),
        var(--sat, 72%),
        calc(var(--lit, 82%) - 8%),
        calc(var(--a, 0.55) * var(--soft, 0.7) * 0.55)
      )
      45%,
    hsla(var(--h, 205), var(--sat, 72%), calc(var(--lit, 82%) - 14%), 0) 78%
  );
}

.hero-inner {
  position: relative;
  z-index: 10;
  padding: 0 16px;
}

.en-sub {
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 18px;
}

.ja-sub {
  color: rgba(58, 71, 80, 0.85);
  margin: 0 0 26px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* background blobs */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 1;
  opacity: 0.35;
  pointer-events: none;
}
.blob-1 {
  width: 540px;
  height: 540px;
  top: 6%;
  right: -6%;
  background: rgba(124, 168, 247, 0.55);
  animation: orbFloat 15s infinite alternate ease-in-out;
}
.blob-2 {
  width: 420px;
  height: 420px;
  bottom: 6%;
  left: -6%;
  background: var(--accent-2);
  animation: orbFloat 12s infinite alternate-reverse ease-in-out;
}

/* grain */
.grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ==========================================================================
  3) Sections
========================================================================== */
.section {
  padding: 100px 0;
}
@media (min-width: 1024px) {
  .section {
    padding: 80px 0;
  } /* 余白が多いと感じたらここ */
}

.label {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-head {
  margin: 12px 0 30px;
  max-width: 95ch;
}
.section-title {
  margin: 0;
  font-size: clamp(1.75rem, 2.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text);
}
.section-lead {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--muted);
}

.label + .section-head {
  margin-top: 10px;
}
.section .container > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
  4) Cards（index Service）
  ★ card-linkで包んでる構造でもズレないように完全対応
========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

/* a.card-link が grid item になるので “伸びる”設定 */
.cards.cards--service {
  grid-auto-rows: 1fr;
}
.card-link {
  display: flex;
  height: 100%;
}
.card-link > .card {
  flex: 1;
  height: 100%;
}

/* card base */
.card {
  padding: 48px 32px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-6px);
  }
}

/* typography */
.cards--service {
  margin-top: 26px;
}

.card--service .card-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(58, 71, 80, 0.85);
  margin: 0 0 18px;
}
.card--service .card-kicker {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 14px;
}
.card--service .card-desc {
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.9;
  margin: 0;
}

@media (max-width: 820px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
  5) Contact box
========================================================================== */
.contact-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 42px 36px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(58, 71, 80, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (max-width: 820px) {
  .contact-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 36px 22px;
  }
}

/* ==========================================================================
  6) Bokeh Orbs（完全版）
========================================================================== */
.bokeh {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* bokehはhero内で完結（blendが消えるのを防ぐ） */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bokeh span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: var(--z, 1);

  --h: var(--h, 205);
  --a: var(--a, 0.55);
  --dx: var(--dx, 60px);
  --dy: var(--dy, -30px);

  /* 淡さ調整（ここだけ触ればOK） */
  --sat: 72%;
  --lit: 82%;
  --soft: 0.7;

  /* ハイライト位置 */
  --hx: 35%;
  --hy: 32%;
  --hx2: 55%;
  --hy2: 58%;

  background:
    radial-gradient(
      circle at var(--hx) var(--hy),
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 14%,
      rgba(255, 255, 255, 0) 40%
    ),
    radial-gradient(
      circle at var(--hx2) var(--hy2),
      hsla(var(--h), 95%, 72%, calc(var(--a) * 1.05)) 0%,
      hsla(var(--h), 95%, 68%, calc(var(--a) * 0.7)) 45%,
      hsla(var(--h), 95%, 62%, 0) 78%
    );

  mix-blend-mode: normal;
  opacity: 0.85;

  filter: blur(calc(var(--s) / 24)) saturate(1.35) brightness(1.1)
    drop-shadow(0 0 22px hsla(var(--h), 95%, 70%, 0.28));

  will-change: transform, opacity, filter;

  animation:
    bokehDrift var(--d, 22s) ease-in-out infinite alternate,
    bokehBreath var(--tw, 7.5s) ease-in-out infinite,
    bokehShimmer var(--fl, 5.2s) ease-in-out infinite;

  animation-delay:
    var(--del, 0s), calc(var(--del, 0s) * 0.6), calc(var(--del, 0s) * -0.8);
}

/* たまにだけscreenを混ぜる */
.bokeh span:nth-child(3n) {
  mix-blend-mode: screen;
  filter: blur(calc(var(--s) / 26)) saturate(1.6) brightness(1.35)
    drop-shadow(0 0 28px hsla(var(--h), 100%, 70%, 0.35));
}

/* 色収差 */
.bokeh span:nth-child(5n)::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(255, 80, 140, 0.22),
    rgba(120, 120, 255, 0.22),
    rgba(80, 220, 180, 0.2),
    rgba(255, 220, 120, 0.18),
    rgba(255, 80, 140, 0.22)
  );
  -webkit-mask: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 56%,
    rgba(0, 0, 0, 1) 66%,
    rgba(0, 0, 0, 0) 78%
  );
  mask: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 56%,
    rgba(0, 0, 0, 1) 66%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(10px);
  opacity: 0.35;
  pointer-events: none;
}

@keyframes bokehDrift {
  0% {
    transform: translate(-50%, -50%)
      translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.92);
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.08);
  }
}

@keyframes bokehBreath {
  0%,
  100% {
    opacity: 0.78;
  }
  35% {
    opacity: 0.98;
  }
  62% {
    opacity: 0.86;
  }
}

@keyframes bokehShimmer {
  0%,
  100% {
    filter: blur(calc(var(--s) / 24)) saturate(1.3) brightness(1.06)
      drop-shadow(0 0 20px hsla(var(--h), 95%, 70%, 0.35));
  }
  50% {
    filter: blur(calc(var(--s) / 26)) saturate(1.45) brightness(1.18)
      drop-shadow(0 0 30px hsla(var(--h), 100%, 72%, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bokeh span {
    animation: none;
    opacity: 0.3;
  }
}

/* ==========================================================================
  7) Sparkles（完全版）
========================================================================== */
.sparkles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;

  --peak: var(--peak, 1);
  --glow: var(--glow, 1);

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(170, 220, 255, 0) 70%
  );

  mix-blend-mode: screen;

  filter: blur(0.6px)
    drop-shadow(0 0 calc(18px * var(--glow)) rgba(255, 255, 255, 0.42));

  animation: sparkleTwinkle var(--d, 6.8s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

.sparkles i::before {
  content: "";
  position: absolute;
  inset: -12px;
  background:
    linear-gradient(
      transparent 47%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 53%
    ),
    linear-gradient(
      90deg,
      transparent 47%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 53%
    );
  filter: blur(0.4px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: sparkleCross var(--d, 6.8s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

@keyframes sparkleTwinkle {
  0%,
  76%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  82% {
    opacity: calc(0.35 * var(--peak));
  }
  86% {
    opacity: calc(1 * var(--peak));
    transform: translate(-50%, -50%) scale(1.75);
  }
  89% {
    opacity: calc(0.65 * var(--peak));
    transform: translate(-50%, -50%) scale(1.2);
  }
  92% {
    opacity: calc(0.18 * var(--peak));
  }
}

@keyframes sparkleCross {
  0%,
  84%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
  86% {
    opacity: calc(1 * var(--peak));
    transform: scale(1);
  }
  90% {
    opacity: calc(0.18 * var(--peak));
    transform: scale(0.95);
  }
}

/* bokeh presets */
.bokeh .orb-1 {
  --x: 12%;
  --y: 22%;
  --s: 210px;
  --d: 26s;
  --tw: 9s;
  --fl: 3.2s;
  --del: -2s;
  --a: 0.55;
  --h: 200;
  --dx: -70px;
  --dy: 34px;
  --hx: 20%;
  --hy: 22%;
  --hx2: 60%;
  --hy2: 57%;
  --z: 6;
}
.bokeh .orb-2 {
  --x: 86%;
  --y: 26%;
  --s: 240px;
  --d: 30s;
  --tw: 11s;
  --fl: 2.6s;
  --del: -6s;
  --a: 0.48;
  --h: 215;
  --dx: 75px;
  --dy: -30px;
  --hx: 22%;
  --hy: 18%;
  --hx2: 68%;
  --hy2: 48%;
  --z: 2;
}
.bokeh .orb-3 {
  --x: 40%;
  --y: 52%;
  --s: 150px;
  --d: 22s;
  --tw: 8s;
  --fl: 2.9s;
  --del: -3s;
  --a: 0.62;
  --h: 190;
  --dx: -60px;
  --dy: 24px;
  --hx: 42%;
  --hy: 15%;
  --hx2: 72%;
  --hy2: 66%;
  --z: 8;
}
.bokeh .orb-4 {
  --x: 24%;
  --y: 70%;
  --s: 130px;
  --d: 20s;
  --tw: 7s;
  --fl: 2.2s;
  --del: -5s;
  --a: 0.6;
  --h: 335;
  --dx: 55px;
  --dy: -26px;
  --hx: 32%;
  --hy: 21%;
  --hx2: 65%;
  --hy2: 60%;
  --z: 3;
}
.bokeh .orb-5 {
  --x: 68%;
  --y: 78%;
  --s: 170px;
  --d: 24s;
  --tw: 8.5s;
  --fl: 2.7s;
  --del: -8s;
  --a: 0.52;
  --h: 320;
  --dx: -65px;
  --dy: 28px;
  --hx: 20%;
  --hy: 34%;
  --hx2: 78%;
  --hy2: 52%;
  --z: 9;
}
.bokeh .orb-6 {
  --x: 58%;
  --y: 24%;
  --s: 85px;
  --d: 18s;
  --tw: 6s;
  --fl: 1.9s;
  --del: -7s;
  --a: 0.75;
  --h: 50;
  --dx: 46px;
  --dy: -20px;
  --hx: 22%;
  --hy: 20%;
  --hx2: 59%;
  --hy2: 75%;
  --z: 1;
}
.bokeh .orb-7 {
  --x: 78%;
  --y: 40%;
  --s: 95px;
  --d: 19s;
  --tw: 6.5s;
  --fl: 2.1s;
  --del: -1s;
  --a: 0.72;
  --h: 35;
  --dx: -42px;
  --dy: 18px;
  --hx: 28%;
  --hy: 38%;
  --hx2: 55%;
  --hy2: 58%;
  --z: 7;
}
.bokeh .orb-8 {
  --x: 30%;
  --y: 36%;
  --s: 95px;
  --d: 17s;
  --tw: 6s;
  --fl: 2s;
  --del: -4s;
  --a: 0.78;
  --h: 160;
  --dx: 40px;
  --dy: -16px;
  --hx: 22%;
  --hy: 45%;
  --hx2: 52%;
  --hy2: 62%;
  --z: 4;
}
.bokeh .orb-9 {
  --x: 64%;
  --y: 60%;
  --s: 120px;
  --d: 21s;
  --tw: 7s;
  --fl: 2.4s;
  --del: -9s;
  --a: 0.65;
  --h: 275;
  --dx: -50px;
  --dy: 22px;
  --hx: 20%;
  --hy: 28%;
  --hx2: 50%;
  --hy2: 58%;
  --z: 5;
}

/* sparkles presets */
.sparkles .sparkle-1 {
  --x: 18%;
  --y: 28%;
  --s: 8px;
  --d: 5.8s;
  --del: -1.2s;
}
.sparkles .sparkle-2 {
  --x: 72%;
  --y: 22%;
  --s: 7px;
  --d: 6.6s;
  --del: -3.8s;
}
.sparkles .sparkle-3 {
  --x: 58%;
  --y: 64%;
  --s: 9px;
  --d: 7.2s;
  --del: -2.4s;
}
.sparkles .sparkle-4 {
  --x: 32%;
  --y: 76%;
  --s: 7px;
  --d: 6.1s;
  --del: -4.1s;
}
.sparkles .sparkle-5 {
  --x: 84%;
  --y: 48%;
  --s: 8px;
  --d: 8s;
  --del: -5s;
}
.sparkles .sparkle-6 {
  --x: 46%;
  --y: 34%;
  --s: 7px;
  --d: 7.6s;
  --del: -2.8s;
}
.sparkles .sparkle-7 {
  --x: 26%;
  --y: 18%;
  --s: 7px;
  --d: 5.4s;
  --del: -2s;
}
.sparkles .sparkle-8 {
  --x: 63%;
  --y: 30%;
  --s: 8px;
  --d: 6s;
  --del: -4.6s;
}
.sparkles .sparkle-9 {
  --x: 77%;
  --y: 62%;
  --s: 7px;
  --d: 7s;
  --del: -1.6s;
}
.sparkles .sparkle-10 {
  --x: 40%;
  --y: 58%;
  --s: 9px;
  --d: 5.9s;
  --del: -3.2s;
}
.sparkles .sparkle-11 {
  --x: 14%;
  --y: 66%;
  --s: 8px;
  --d: 6.8s;
  --del: -5.4s;
}
.sparkles .sparkle-12 {
  --x: 90%;
  --y: 26%;
  --s: 7px;
  --d: 7.4s;
  --del: -2.6s;
}
.sparkles .sparkle-13 {
  --x: 10%;
  --y: 40%;
  --s: 7px;
  --d: 6.9s;
  --del: -2.2s;
  --peak: 1.35;
  --glow: 1.5;
}
.sparkles .sparkle-14 {
  --x: 22%;
  --y: 18%;
  --s: 6px;
  --d: 7.8s;
  --del: -5.2s;
}