:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #17181d;
  --muted: #6f7380;
  --line: #e5e7ee;
  --accent: #7157ff;
  --accent-dark: #4e37d8;
  --dark: #111218;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(25, 26, 35, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Inter", "Noto Sans JP", sans-serif; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(820px, 100%); text-align: center; }
.section { padding: 110px 0; }

.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(246, 247, 251, .88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(229, 231, 238, .85); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--dark); font-size: 14px; }
.brand-text { font-size: 14px; }
.global-nav { display: flex; align-items: center; gap: 30px; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.global-nav a { transition: opacity .2s ease; }
.global-nav a:hover, .global-nav .is-current { opacity: .55; }
.nav-contact { padding: 11px 18px; border-radius: 999px; color: #fff; background: var(--dark); }
.menu-button { display: none; border: 0; background: none; padding: 8px; }
.menu-button span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--text); }

.hero { position: relative; overflow: hidden; min-height: 760px; display: grid; align-items: center; padding: 90px 0; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.eyebrow, .section-kicker { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--accent); }
.hero h1 { margin: 0; font-size: clamp(48px, 6vw, 84px); line-height: 1.12; letter-spacing: -.055em; }
.hero h1 span { color: var(--accent); }
.hero-lead { max-width: 680px; margin: 30px 0 0; font-size: 17px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 14px 30px rgba(113, 87, 255, .25); }
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.8); }
.button-light { color: var(--dark); background: #fff; }
.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.visual-card-main { position: relative; z-index: 2; width: min(440px, 100%); padding: 22px; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: rgba(255,255,255,.75); backdrop-filter: blur(20px); box-shadow: var(--shadow); transform: rotate(2deg); }
.visual-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.status-dot { color: #20a86b; }
.mock-thumbnail { aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #14151d, #7157ff 55%, #e96fd8); overflow: hidden; }
.mock-thumbnail span { font-size: clamp(30px, 5vw, 54px); font-weight: 800; line-height: .92; letter-spacing: -.05em; }
.progress-list { margin-top: 18px; }
.progress-list div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; }
.progress-list div:last-child { border-bottom: 0; }
.progress-list b { color: var(--accent); }
.visual-chip { position: absolute; z-index: 3; padding: 12px 18px; border-radius: 999px; color: #fff; background: var(--dark); box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.chip-one { top: 70px; left: 0; }
.chip-two { right: 0; top: 190px; background: var(--accent); }
.chip-three { left: 30px; bottom: 40px; background: #ea6fd7; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .35; }
.hero-orb-one { width: 320px; height: 320px; right: 8%; top: 10%; background: #a99cff; }
.hero-orb-two { width: 260px; height: 260px; right: 28%; bottom: 8%; background: #f0a6e5; }

.intro-section { background: #fff; }
.section h2 { margin: 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.25; letter-spacing: -.045em; }
.section-copy { margin: 30px auto 0; font-size: 17px; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 54px; }
.section-heading > p { max-width: 460px; margin: 0; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.service-number { display: block; margin-bottom: 50px; font-size: 12px; font-weight: 800; color: var(--accent); }
.service-card h3 { margin: 0 0 14px; font-size: 20px; }
.service-card p { margin: 0; color: var(--muted); font-size: 14px; }

.strength-section { color: #fff; background: var(--dark); }
.section-heading.light .section-kicker { color: #a998ff; }
.strength-list { border-top: 1px solid rgba(255,255,255,.14); }
.strength-item { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 42px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.strength-item > span { font-size: 14px; color: #9b8bff; font-weight: 800; }
.strength-item h3 { margin: 0 0 10px; font-size: 28px; }
.strength-item p { max-width: 760px; margin: 0; color: rgba(255,255,255,.62); }

.flow-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.flow-list li { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.flow-list span { display: block; margin-bottom: 52px; font-size: 12px; font-weight: 800; color: var(--accent); }
.flow-list h3 { margin: 0 0 10px; font-size: 17px; }
.flow-list p { margin: 0; color: var(--muted); font-size: 13px; }

.works-preview { background: #fff; }
.text-link { font-size: 14px; font-weight: 700; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card { display: block; }
.work-card a { display: block; }
.work-thumb { aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 22px; overflow: hidden; transition: transform .25s ease; }
.work-card:hover .work-thumb { transform: scale(.985); }
.work-thumb span { color: rgba(255,255,255,.92); font-size: clamp(26px, 4vw, 48px); font-weight: 800; letter-spacing: -.05em; }
.gradient-one { background: linear-gradient(135deg, #23243b, #6759ff 55%, #ef8bdc); }
.gradient-two { background: linear-gradient(135deg, #111827, #1565c0 50%, #50d5ff); }
.gradient-three { background: linear-gradient(135deg, #2d173a, #c33c8c 50%, #ffb178); }
.gradient-four { background: linear-gradient(135deg, #1b2c26, #29a373 50%, #a8efc8); }
.gradient-five { background: linear-gradient(135deg, #2a1f14, #e3842f 50%, #ffe27a); }
.gradient-six { background: linear-gradient(135deg, #171717, #555 50%, #bbb); }
.work-info { padding: 18px 4px 0; }
.work-info h2, .work-info h3 { margin: 0 0 6px; font-size: 18px; }
.work-info p { margin: 0; color: var(--muted); font-size: 13px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag-list span { padding: 5px 9px; border-radius: 999px; background: #eceafc; color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .06em; }

.cta-section { padding: 90px 0; color: #fff; background: var(--accent); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-inner .section-kicker { color: rgba(255,255,255,.65); }
.cta-inner h2 { margin: 0 0 12px; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.045em; }
.cta-inner p { margin: 0; color: rgba(255,255,255,.75); }

.site-footer { padding: 60px 0 30px; background: #fff; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: start; }
.footer-brand { margin-bottom: 16px; }
.footer-inner p { margin: 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; gap: 24px; font-size: 13px; font-weight: 700; }
.footer-inner small { grid-column: 1 / -1; padding-top: 30px; border-top: 1px solid var(--line); color: var(--muted); }

.page-hero { padding: 120px 0 80px; background: #fff; }
.page-hero h1 { margin: 0; font-size: clamp(56px, 8vw, 110px); line-height: 1; letter-spacing: -.065em; }
.page-hero p:last-child { max-width: 650px; margin: 28px 0 0; color: var(--muted); }
.works-page-section { padding-top: 70px; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-button { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; color: var(--muted); background: #fff; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.filter-button.is-active { color: #fff; border-color: var(--dark); background: var(--dark); }
.works-grid-large { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
.work-card.is-hidden { display: none; }
.works-note { margin-top: 90px; padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.works-note h2 { margin: 0 0 12px; font-size: 22px; }
.works-note p { margin: 0; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero { padding-top: 70px; }
  .hero-visual { min-height: 500px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-list { grid-template-columns: repeat(2, 1fr); }
  .flow-list li:last-child { grid-column: span 2; }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1180px); }
  .section { padding: 82px 0; }
  .menu-button { display: block; }
  .global-nav { position: fixed; left: 14px; right: 14px; top: 82px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
  .global-nav.is-open { display: flex; }
  .global-nav a { padding: 14px; }
  .nav-contact { text-align: center; margin-top: 8px; }
  .hero { min-height: auto; padding: 64px 0 40px; }
  .hero h1 { font-size: 48px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-visual { min-height: 430px; }
  .visual-chip { display: none; }
  .section-heading, .cta-inner { align-items: flex-start; flex-direction: column; }
  .service-grid, .works-grid, .works-grid-large { grid-template-columns: 1fr; }
  .strength-item { grid-template-columns: 52px 1fr; }
  .flow-list { grid-template-columns: 1fr; }
  .flow-list li:last-child { grid-column: auto; }
  .flow-list span { margin-bottom: 34px; }
  .cta-inner .button { width: auto; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { flex-direction: column; gap: 12px; }
  .page-hero { padding: 80px 0 60px; }
}

/* Floating cover-art background */
.hero > .hero-grid { position: relative; z-index: 4; }
.hero-gallery {
  position: absolute;
  z-index: 0;
  inset: -10%;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.04);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 39% 47%, rgba(246,247,251,.98) 0 13%, rgba(246,247,251,.91) 29%, rgba(246,247,251,.57) 50%, rgba(246,247,251,.30) 72%, rgba(246,247,251,.54) 100%),
    linear-gradient(90deg, rgba(246,247,251,.72), rgba(246,247,251,.18) 65%, rgba(246,247,251,.44));
  backdrop-filter: blur(1.4px);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246,247,251,.12), rgba(246,247,251,.02) 65%, rgba(246,247,251,.75));
}
.floating-thumb {
  --rot: 0deg;
  --dur: 18s;
  --delay: 0s;
  position: absolute;
  width: clamp(190px, 21vw, 390px);
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  opacity: .56;
  filter: saturate(.86) blur(.15px);
  box-shadow: 0 24px 70px rgba(39,31,91,.18);
  transform: rotate(var(--rot));
  animation: coverFloat var(--dur) ease-in-out var(--delay) infinite alternate;
  will-change: transform;
}
.floating-thumb img { width: 100%; height: 100%; object-fit: cover; }
.floating-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(113,87,255,.13), rgba(231,111,216,.10));
  mix-blend-mode: screen;
}
.ft-01 { left: -4%; top: 4%; --rot: -7deg; --dur: 20s; }
.ft-02 { left: 17%; top: -6%; width: clamp(170px,18vw,330px); --rot: 5deg; --dur: 23s; --delay: -5s; }
.ft-03 { left: 43%; top: -7%; width: clamp(180px,19vw,350px); --rot: -4deg; --dur: 19s; --delay: -2s; }
.ft-04 { right: 10%; top: -5%; --rot: 6deg; --dur: 24s; --delay: -9s; }
.ft-05 { right: -7%; top: 21%; --rot: -6deg; --dur: 21s; --delay: -4s; }
.ft-06 { left: -8%; top: 37%; width: clamp(210px,23vw,410px); --rot: 7deg; --dur: 25s; --delay: -7s; }
.ft-07 { right: -3%; top: 51%; width: clamp(210px,22vw,390px); --rot: 5deg; --dur: 18s; --delay: -10s; }
.ft-08 { left: 3%; bottom: -9%; --rot: -5deg; --dur: 22s; --delay: -3s; }
.ft-09 { left: 25%; bottom: -11%; width: clamp(175px,19vw,340px); --rot: 7deg; --dur: 26s; --delay: -13s; }
.ft-10 { left: 47%; bottom: -13%; --rot: -4deg; --dur: 20s; --delay: -6s; }
.ft-11 { right: 8%; bottom: -10%; --rot: 6deg; --dur: 24s; --delay: -15s; }
.ft-12 { left: 68%; top: 27%; width: clamp(150px,15vw,280px); opacity: .36; --rot: -8deg; --dur: 17s; --delay: -8s; }

@keyframes coverFloat {
  0% { transform: translate3d(-8px,-6px,0) rotate(var(--rot)) scale(1.00); }
  35% { transform: translate3d(14px,10px,0) rotate(calc(var(--rot) + 1.5deg)) scale(1.025); }
  70% { transform: translate3d(-5px,22px,0) rotate(calc(var(--rot) - 1deg)) scale(1.01); }
  100% { transform: translate3d(18px,-14px,0) rotate(calc(var(--rot) + .7deg)) scale(1.035); }
}

@media (max-width: 980px) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(246,247,251,.90) 0 43%, rgba(246,247,251,.60) 65%, rgba(246,247,251,.78) 100%);
  }
  .floating-thumb { opacity: .38; }
  .ft-03, .ft-09, .ft-12 { display: none; }
}

@media (max-width: 760px) {
  .hero-gallery { inset: -3%; transform: none; }
  .floating-thumb { width: 230px; border-radius: 13px; opacity: .27; }
  .ft-01 { left: -24%; top: 3%; }
  .ft-02 { left: 51%; top: 4%; }
  .ft-04 { right: -30%; top: 25%; }
  .ft-05 { display: none; }
  .ft-06 { left: -28%; top: 43%; }
  .ft-07 { right: -25%; top: 57%; }
  .ft-08 { left: -12%; bottom: 3%; }
  .ft-10 { left: 46%; bottom: 5%; }
  .ft-11 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-thumb { animation: none; }
  .hero-gallery { transition: none; }
}

/* =========================================================
   Hero v2 — cinematic moving cover wall
   ========================================================= */
.hero {
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
  background: #f5f4ff;
}

.hero-gallery {
  --px: 0px;
  --py: 0px;
  position: absolute;
  inset: -22% -12%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--px), var(--py), 0) scale(1.06);
  transition: transform 1.25s cubic-bezier(.22,.8,.22,1);
}

.cover-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(1640px, 116vw);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: translate(-50%, -50%) rotate(4.2deg);
  animation: wallBreath 18s ease-in-out infinite alternate;
  filter: saturate(.92) contrast(.98);
}

.cover-row {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
}

.cover-row-a { transform: translateX(-8%); animation: rowDriftA 34s ease-in-out infinite alternate; }
.cover-row-b { transform: translateX(-1%); animation: rowDriftB 39s ease-in-out -9s infinite alternate; }
.cover-row-c { transform: translateX(-10%); animation: rowDriftA 43s ease-in-out -15s infinite alternate-reverse; }
.cover-row-d { transform: translateX(-3%); animation: rowDriftB 37s ease-in-out -6s infinite alternate-reverse; }

.cover-tile {
  position: relative;
  flex: 0 0 clamp(250px, 22vw, 410px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #ddd;
  box-shadow: 0 18px 52px rgba(34, 26, 88, .22);
  transform: translateZ(0);
}

.cover-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.045);
  filter: brightness(.83) saturate(.88);
}

.cover-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(107,83,255,.20), rgba(218,111,229,.10)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(49,34,103,.12));
  mix-blend-mode: screen;
}

/* Strong bright center, visible cover art at edges — closer to the generated comp. */
.hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 57% 74% at 48% 50%,
      rgba(255,255,255,.99) 0%,
      rgba(251,250,255,.96) 21%,
      rgba(248,247,255,.83) 39%,
      rgba(244,242,255,.49) 56%,
      rgba(223,216,255,.20) 72%,
      rgba(122,94,212,.12) 100%),
    linear-gradient(90deg,
      rgba(109,89,199,.14) 0%,
      rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.03) 72%,
      rgba(78,55,155,.17) 100%);
  backdrop-filter: blur(1.2px);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, rgba(111,85,255,.22), transparent 26%),
    radial-gradient(circle at 88% 65%, rgba(222,91,201,.19), transparent 28%),
    linear-gradient(180deg, rgba(86,65,178,.08), rgba(255,255,255,0) 30%, rgba(77,55,160,.11));
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 18%, transparent 78%, rgba(246,247,251,.72)),
    radial-gradient(ellipse at center, transparent 45%, rgba(77,57,151,.08) 100%);
}

.hero > .hero-grid {
  position: relative;
  z-index: 4;
}

.hero-copy {
  text-shadow: 0 2px 18px rgba(255,255,255,.85);
}

.visual-card-main {
  box-shadow: 0 35px 85px rgba(50,36,112,.24);
  backdrop-filter: blur(7px);
  background: rgba(255,255,255,.93);
}

.hero-visual {
  transform: translateY(var(--card-y, 0px));
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

@keyframes rowDriftA {
  from { transform: translate3d(-8%, -5px, 0); }
  to   { transform: translate3d(-1%, 10px, 0); }
}
@keyframes rowDriftB {
  from { transform: translate3d(-1%, 8px, 0); }
  to   { transform: translate3d(-8%, -9px, 0); }
}
@keyframes wallBreath {
  from { margin-top: -8px; }
  to { margin-top: 10px; }
}

@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-gallery { inset: -5% -30%; }
  .cover-wall { width: 1650px; gap: 16px; transform: translate(-50%, -50%) rotate(4deg) scale(.92); }
  .cover-row { gap: 16px; }
  .cover-tile { flex-basis: 310px; opacity: .78; }
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(249,248,255,.90) 0%,
      rgba(249,248,255,.80) 45%,
      rgba(249,248,255,.58) 72%,
      rgba(249,248,255,.83) 100%);
  }
}

@media (max-width: 760px) {
  .hero-gallery { inset: -7% -78%; transform: none; }
  .cover-wall { width: 1700px; transform: translate(-50%, -50%) rotate(4deg) scale(.72); }
  .cover-row-c, .cover-row-d { opacity: .55; }
  .cover-tile { opacity: .58; }
  .hero-copy { text-shadow: 0 1px 16px rgba(255,255,255,.95); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-wall, .cover-row { animation: none !important; }
  .hero-gallery, .hero-visual { transition: none; }
}


/* =========================================================
   Hero v3 — cardless + fully responsive
   ========================================================= */
.hero {
  min-height: clamp(650px, 78vh, 860px);
  display: flex;
  align-items: center;
  padding: 92px 0 72px;
}

.hero .hero-grid {
  display: block;
  width: 100%;
}

.hero-copy {
  width: min(680px, 58vw);
  margin-left: clamp(0px, 2vw, 28px);
}

.hero h1 {
  font-size: clamp(50px, 5.1vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero-lead {
  max-width: 640px;
}

.hero-actions {
  flex-wrap: wrap;
}

.hero-overlay {
  background:
    radial-gradient(
      ellipse at 34% 48%,
      rgba(248,248,252,.99) 0%,
      rgba(248,248,252,.97) 18%,
      rgba(248,248,252,.88) 32%,
      rgba(248,248,252,.54) 48%,
      rgba(248,248,252,.24) 68%,
      rgba(248,248,252,.42) 100%
    ),
    linear-gradient(
      90deg,
      rgba(248,248,252,.73) 0%,
      rgba(248,248,252,.35) 41%,
      rgba(248,248,252,.10) 68%,
      rgba(248,248,252,.22) 100%
    );
}

.cover-wall {
  left: 55%;
  width: max(1760px, 124vw);
}

/* tablet */
@media (max-width: 1100px) {
  .hero {
    min-height: 700px;
    padding-top: 84px;
  }

  .hero-copy {
    width: min(650px, 72vw);
  }

  .hero h1 {
    font-size: clamp(48px, 6.5vw, 68px);
  }

  .cover-wall {
    left: 58%;
    width: 1840px;
  }

  .cover-tile {
    flex-basis: 330px;
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 34% 47%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.95) 25%,
        rgba(248,248,252,.75) 43%,
        rgba(248,248,252,.35) 67%,
        rgba(248,248,252,.48) 100%
      );
  }
}

/* phones / narrow tablets */
@media (max-width: 760px) {
  .site-header {
    min-height: 68px;
  }

  .header-inner {
    min-height: 68px;
  }

  .brand-text {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }

  .hero {
    min-height: 680px;
    padding: 104px 0 58px;
    align-items: center;
  }

  .hero .container {
    width: min(100% - 36px, var(--container));
  }

  .hero-copy {
    width: 100%;
    max-width: 560px;
    margin: 0;
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
    margin-bottom: 18px;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.05em;
    margin-bottom: 24px;
  }

  .hero-lead {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.95;
    margin-bottom: 28px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 420px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .hero-gallery {
    inset: -8% -42%;
    transform: translate3d(0,0,0) scale(1.02) !important;
  }

  .cover-wall {
    left: 58%;
    top: 50%;
    width: 1500px;
    gap: 16px;
    transform: translate(-50%, -50%) rotate(5.5deg);
    opacity: .9;
  }

  .cover-row {
    gap: 16px;
  }

  .cover-tile {
    flex-basis: 280px;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(34,26,88,.17);
  }

  .cover-tile img {
    filter: brightness(.82) saturate(.82);
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(248,248,252,.96) 0%,
        rgba(248,248,252,.91) 48%,
        rgba(248,248,252,.67) 72%,
        rgba(248,248,252,.38) 100%
      ),
      linear-gradient(
        180deg,
        rgba(248,248,252,.34) 0%,
        rgba(248,248,252,.12) 53%,
        rgba(248,248,252,.66) 100%
      );
    backdrop-filter: blur(.6px);
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(248,248,252,.05), rgba(248,248,252,.03) 66%, rgba(248,248,252,.72));
  }

  .section {
    padding-left: 0;
    padding-right: 0;
  }

  .section h2 {
    font-size: clamp(32px, 9vw, 46px);
  }

  .service-card,
  .strength-item,
  .flow-list li,
  .work-card {
    border-radius: 18px;
  }
}

/* compact phones */
@media (max-width: 480px) {
  .hero {
    min-height: 650px;
    padding-top: 94px;
  }

  .hero .container {
    width: min(100% - 28px, var(--container));
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .hero-lead {
    font-size: 13.5px;
    line-height: 1.9;
  }

  .cover-wall {
    left: 66%;
    width: 1380px;
  }

  .cover-tile {
    flex-basis: 250px;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(248,248,252,.98) 0%,
        rgba(248,248,252,.94) 54%,
        rgba(248,248,252,.72) 78%,
        rgba(248,248,252,.44) 100%
      );
  }

  .cta-inner .button {
    width: 100%;
  }
}

/* Keep animation accessible and battery-friendly */
@media (prefers-reduced-motion: reduce) {
  .cover-wall,
  .cover-row {
    animation: none !important;
  }

  .hero-gallery {
    transition: none !important;
  }
}


/* =========================================================
   Hero v4 — horizontal balance adjustment
   ========================================================= */
@media (min-width: 1101px) {
  .hero-copy {
    width: min(720px, 60vw);
    margin-left: clamp(70px, 6.5vw, 125px);
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 40% 48%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.97) 18%,
        rgba(248,248,252,.87) 33%,
        rgba(248,248,252,.52) 50%,
        rgba(248,248,252,.22) 70%,
        rgba(248,248,252,.40) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,248,252,.56) 0%,
        rgba(248,248,252,.29) 45%,
        rgba(248,248,252,.08) 72%,
        rgba(248,248,252,.20) 100%
      );
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero-copy {
    width: min(650px, 76vw);
    margin-left: clamp(28px, 5vw, 70px);
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 40% 47%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.95) 26%,
        rgba(248,248,252,.72) 45%,
        rgba(248,248,252,.32) 68%,
        rgba(248,248,252,.46) 100%
      );
  }
}

@media (max-width: 760px) {
  .hero-copy {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================================
   Hero v5 — Fluid desktop/WQHD/4K optimization
   ========================================================= */

/* Heroだけは通常セクションより広い専用コンテナで扱う */
.hero .container {
  width: min(88vw, 1640px);
  margin-inline: auto;
}

/* 位置を固定pxではなくコンテナ基準に統一 */
.hero-copy {
  width: min(700px, 48%);
  margin-left: 0;
}

/* 背景演出も画面幅に合わせて拡張 */
.cover-wall {
  left: 61%;
  width: clamp(1760px, 104vw, 2920px);
}

/* Full HD */
@media (min-width: 1440px) and (max-width: 2199px) {
  .hero .container {
    width: min(88vw, 1540px);
  }

  .hero-copy {
    width: min(690px, 50%);
  }

  .hero h1 {
    font-size: clamp(56px, 4.3vw, 76px);
  }

  .cover-wall {
    left: 61%;
    width: clamp(1780px, 106vw, 2220px);
  }

  .cover-tile {
    flex-basis: clamp(320px, 18vw, 390px);
  }
}

/* WQHD / large desktop */
@media (min-width: 2200px) and (max-width: 3199px) {
  .hero {
    min-height: clamp(760px, 74vh, 980px);
    padding-top: 108px;
    padding-bottom: 86px;
  }

  .hero .container {
    width: min(84vw, 1760px);
  }

  .hero-copy {
    width: min(760px, 46%);
  }

  .hero h1 {
    font-size: clamp(68px, 3.35vw, 88px);
    line-height: 1.06;
  }

  .hero-lead {
    max-width: 690px;
    font-size: 16px;
  }

  .cover-wall {
    left: 63%;
    width: clamp(2320px, 108vw, 2820px);
  }

  .cover-tile {
    flex-basis: clamp(380px, 16vw, 450px);
  }

  .cover-row {
    gap: 24px;
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 39% 48%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.96) 16%,
        rgba(248,248,252,.84) 31%,
        rgba(248,248,252,.46) 49%,
        rgba(248,248,252,.17) 69%,
        rgba(248,248,252,.34) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,248,252,.48) 0%,
        rgba(248,248,252,.21) 44%,
        rgba(248,248,252,.06) 72%,
        rgba(248,248,252,.18) 100%
      );
  }
}

/* 4K / ultra-large */
@media (min-width: 3200px) {
  .hero {
    min-height: clamp(860px, 72vh, 1120px);
    padding-top: 128px;
    padding-bottom: 96px;
  }

  .hero .container {
    width: min(78vw, 1980px);
  }

  .hero-copy {
    width: min(820px, 44%);
  }

  .hero h1 {
    font-size: clamp(78px, 2.65vw, 102px);
  }

  .hero-lead {
    max-width: 740px;
    font-size: 17px;
  }

  .cover-wall {
    left: 64%;
    width: clamp(2920px, 96vw, 3700px);
  }

  .cover-tile {
    flex-basis: clamp(440px, 14vw, 540px);
  }

  .cover-row {
    gap: 28px;
  }
}

/* 標準デスクトップ */
@media (min-width: 1101px) and (max-width: 1439px) {
  .hero .container {
    width: min(90vw, 1320px);
  }

  .hero-copy {
    width: min(650px, 54%);
  }

  .cover-wall {
    left: 61%;
    width: clamp(1640px, 118vw, 1900px);
  }

  .cover-tile {
    flex-basis: 320px;
  }
}

/* タブレットは既存より少し中央に寄せる */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero .container {
    width: min(91vw, 940px);
  }

  .hero-copy {
    width: min(650px, 74%);
    margin-left: 0;
  }

  .cover-wall {
    left: 64%;
    width: 1780px;
  }
}

/* モバイルは横幅100%近くを活用 */
@media (max-width: 760px) {
  .hero .container {
    width: min(calc(100% - 36px), 640px);
  }

  .hero-copy {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero .container {
    width: calc(100% - 28px);
  }
}


/* =========================================================
   Hero v6 — move content further toward center
   ========================================================= */

/* Full HD付近 */
@media (min-width: 1440px) and (max-width: 2199px) {
  .hero .container {
    width: min(84vw, 1500px);
  }

  .hero-copy {
    width: min(700px, 48%);
    margin-left: clamp(90px, 7vw, 150px);
  }

  .cover-wall {
    left: 64%;
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 43% 48%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.96) 18%,
        rgba(248,248,252,.84) 33%,
        rgba(248,248,252,.46) 50%,
        rgba(248,248,252,.18) 70%,
        rgba(248,248,252,.33) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,248,252,.40) 0%,
        rgba(248,248,252,.19) 47%,
        rgba(248,248,252,.05) 75%,
        rgba(248,248,252,.16) 100%
      );
  }
}

/* WQHD */
@media (min-width: 2200px) and (max-width: 3199px) {
  .hero .container {
    width: min(80vw, 1680px);
  }

  .hero-copy {
    width: min(760px, 46%);
    margin-left: clamp(150px, 8vw, 230px);
  }

  .cover-wall {
    left: 66%;
  }

  .hero-overlay {
    background:
      radial-gradient(
        ellipse at 45% 48%,
        rgba(248,248,252,.99) 0%,
        rgba(248,248,252,.95) 17%,
        rgba(248,248,252,.82) 32%,
        rgba(248,248,252,.43) 50%,
        rgba(248,248,252,.14) 70%,
        rgba(248,248,252,.30) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,248,252,.32) 0%,
        rgba(248,248,252,.14) 48%,
        rgba(248,248,252,.04) 76%,
        rgba(248,248,252,.14) 100%
      );
  }
}

/* 4K */
@media (min-width: 3200px) {
  .hero .container {
    width: min(74vw, 1900px);
  }

  .hero-copy {
    width: min(820px, 44%);
    margin-left: clamp(220px, 7.5vw, 320px);
  }

  .cover-wall {
    left: 67%;
  }
}

/* 標準デスクトップはやや控えめ */
@media (min-width: 1101px) and (max-width: 1439px) {
  .hero-copy {
    margin-left: clamp(35px, 4vw, 70px);
  }
}

/* タブレット以下は画面を圧迫しない */
@media (max-width: 1100px) {
  .hero-copy {
    margin-left: 0;
  }
}


/* =========================================================
   Works — Coming Soon
   ========================================================= */
.coming-soon-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.coming-soon-section {
  width: 100%;
  padding: clamp(120px, 16vh, 200px) 0;
  text-align: center;
}

.coming-soon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coming-soon-section .eyebrow {
  margin-bottom: 20px;
}

.coming-soon-section h1 {
  margin: 0;
  font-size: clamp(56px, 8vw, 118px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.coming-soon-lead {
  margin: 28px 0 36px;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.9;
  color: var(--muted, #6f6f78);
}

@media (max-width: 760px) {
  .coming-soon-page {
    min-height: calc(100vh - 68px);
  }

  .coming-soon-section {
    padding: 110px 0 90px;
  }

  .coming-soon-section h1 {
    font-size: clamp(48px, 15vw, 72px);
  }
}


/* =========================================================
   Index Works — Coming Soon preview
   ========================================================= */
.home-works-coming {
  padding: clamp(100px, 11vw, 160px) 0;
}

.home-works-coming-inner {
  min-height: clamp(360px, 40vw, 500px);
  border: 1px solid rgba(20, 18, 35, .08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 75% 20%, rgba(118, 88, 255, .11), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,245,255,.92));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(44px, 7vw, 90px) 24px;
  overflow: hidden;
  position: relative;
}

.home-works-coming-inner::before,
.home-works-coming-inner::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}

.home-works-coming-inner::before {
  width: 240px;
  height: 240px;
  top: -130px;
  right: -60px;
  background: rgba(116, 85, 255, .08);
}

.home-works-coming-inner::after {
  width: 180px;
  height: 180px;
  bottom: -110px;
  left: -50px;
  background: rgba(226, 102, 255, .07);
}

.home-works-coming .eyebrow {
  margin-bottom: 18px;
}

.home-works-coming h2 {
  margin: 0;
  font-size: clamp(50px, 7vw, 92px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.home-works-coming p:not(.eyebrow) {
  margin: 24px 0 32px;
  color: var(--muted, #6f6f78);
  line-height: 1.9;
}

@media (max-width: 760px) {
  .home-works-coming {
    padding: 78px 0;
  }

  .home-works-coming-inner {
    min-height: 350px;
    border-radius: 22px;
    padding: 48px 20px;
  }

  .home-works-coming h2 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .home-works-coming p:not(.eyebrow) {
    font-size: 13.5px;
  }
}


/* =========================================================
   Selected Works — preserve heading, Coming Soon body
   ========================================================= */
.selected-works-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 42px;
}

.selected-works-heading .eyebrow {
  margin-bottom: 12px;
}

.selected-works-heading h2 {
  margin: 0;
}

.selected-works-heading .text-link {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.selected-works-coming {
  min-height: clamp(260px, 26vw, 390px);
  border: 1px solid rgba(20,18,35,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(116,85,255,.10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,246,255,.92));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 42px 24px;
}

.selected-works-coming-label {
  margin: 0;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.045em;
}

.selected-works-coming-copy {
  margin: 18px 0 0;
  color: var(--muted, #6f6f78);
  font-size: 14px;
}

@media (max-width: 760px) {
  .selected-works-heading {
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
  }

  .selected-works-heading .text-link {
    font-size: 12px;
    margin-top: 30px;
    margin-bottom: 0;
  }

  .selected-works-coming {
    min-height: 260px;
    border-radius: 20px;
  }
}

@media (max-width: 480px) {
  .selected-works-heading {
    display: block;
  }

  .selected-works-heading .text-link {
    display: inline-block;
    margin-top: 18px;
  }
}


/* =========================================================
   Mobile spacing v2
   ========================================================= */
@media (max-width: 760px) {
  /* スマホの左右余白を広げて窮屈さを解消 */
  .container,
  .hero .container {
    width: min(calc(100% - 48px), 640px);
  }

  .header-inner {
    width: min(calc(100% - 40px), var(--container));
  }

  .section {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .hero {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-copy {
    max-width: 100%;
  }

  .selected-works-coming {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 480px) {
  .container,
  .hero .container {
    width: calc(100% - 40px);
  }

  .header-inner {
    width: calc(100% - 32px);
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .service-card,
  .strength-item,
  .flow-list li,
  .selected-works-coming {
    padding-left: 22px;
    padding-right: 22px;
  }
}


/* =========================================================
   Mobile header spacing v3
   ========================================================= */
@media (max-width: 760px) {
  .header-inner {
    width: min(calc(100% - 56px), var(--container));
    min-height: 72px;
  }

  .brand {
    gap: 12px;
  }

  .brand-mark {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
  }

  .brand-text {
    font-size: 13.5px;
    letter-spacing: .025em;
    line-height: 1.2;
  }

  .menu-toggle,
  .hamburger,
  .nav-toggle {
    margin-left: auto;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
    padding: 9px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    width: calc(100% - 48px);
    min-height: 70px;
  }

  .brand {
    gap: 11px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-text {
    font-size: 13px;
    letter-spacing: .02em;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
}