:root {
  --ink: #182738;
  --paper: #f2f1ec;
  --paper-light: #faf9f4;
  --blue: #2f5c7d;
  --yellow: #d6bd78;
  --coral: #a66c5e;
  --green: #6f8977;
  --sky: #c7d8dd;
  --btn-hover: #bc4f3a; /* 「相談する」ボタンにマウスを乗せたときの色（#ff6248 を他の色に合わせて落としたもの） */
  --line: rgba(24, 39, 56, 0.2);
  --page-x: clamp(1.15rem, 3.8vw, 4.5rem);
  --round: "Avenir Next", "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
  --sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --page-scroll: 0;
  --scroll-nudge: 0px;
  --scroll-blur: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.opening-active,
body.nav-open { overflow: hidden; }

::selection { background: var(--yellow); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button, summary { color: inherit; font: inherit; }
button { padding: 0; border: 0; background: transparent; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 10001;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  transform: translateY(-180%);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-weight: 800;
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

[data-reveal] {
  opacity: 0;
  transform: translateY(3rem) rotate(0.6deg);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].revealed { opacity: 1; transform: none; }

/* Opening */
.opening {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--paper-light);
  pointer-events: all;
  transition: visibility 0s linear 0.95s;
}

.opening-done { visibility: hidden; pointer-events: none; }

.opening::before,
.opening::after {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 50.1%;
  background: var(--paper-light);
  content: "";
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1) 0.08s;
}

.opening::before { left: 0; border-right: 1px solid var(--line); }
.opening::after { right: 0; }
.opening-done::before { transform: translateX(-101%); }
.opening-done::after { transform: translateX(101%); }

.opening-tile {
  position: absolute;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 5% 50%;
  animation: openingOrbit 1.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 0.25s ease, transform 0.4s ease;
}

.opening-tile { display: none; }

.opening-done .opening-tile { opacity: 0; transform: scale(0); }
.tile-a { top: 16%; left: 12%; background: var(--yellow); }
.tile-b { top: 13%; right: 15%; border-radius: 50%; background: var(--blue); animation-delay: 0.1s; }
.tile-c { right: 10%; bottom: 14%; background: var(--coral); transform: rotate(45deg); animation-delay: 0.16s; }
.tile-d { bottom: 15%; left: 17%; border-radius: 50% 5% 50% 50%; background: var(--green); animation-delay: 0.22s; }

.opening-center {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 4vw, 3.5rem);
  transition: opacity 0.28s ease, transform 0.38s ease;
}

.opening-done .opening-center,
.opening-done .opening-caption { opacity: 0; transform: scale(0.92); }

.opening-logo-wrap {
  display: grid;
  width: clamp(7rem, 16vw, 12rem);
  height: clamp(7rem, 16vw, 12rem);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
  animation: openingPop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.opening-logo { width: 62%; }

.opening-name { display: grid; gap: 0.15rem; }
.opening-name strong { font-family: var(--round); font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: 0.04em; }
.opening-name span { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; }

.opening-kana {
  font-family: var(--round);
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
}

.opening-kana:first-child { color: var(--blue); transform: rotate(-8deg); }
.opening-kana:last-child { color: var(--coral); transform: rotate(8deg); }

.opening-caption {
  position: absolute;
  z-index: 6;
  right: var(--page-x);
  bottom: 2rem;
  left: var(--page-x);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--round);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  transition: opacity 0.24s ease, transform 0.38s ease;
}

.opening-caption i { height: 2px; flex: 1; background: var(--ink); transform-origin: left; animation: openingLine 1.9s ease both; }

@keyframes openingPop {
  0% { opacity: 0; transform: translateY(1.5rem); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes openingOrbit {
  from { opacity: 0; transform: scale(0) rotate(-120deg); }
  to { opacity: 1; }
}

@keyframes openingLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Cursor */
.fun-cursor {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(47, 92, 125, 0.28);
  color: var(--ink);
  font-family: var(--round);
  font-size: 0.48rem;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, background 0.2s ease;
}

.fun-cursor.cursor-wide {
  width: 4.2rem;
  height: 4.2rem;
  margin: -2.1rem 0 0 -2.1rem;
  border: 1px solid var(--ink);
  background: var(--paper-light);
  mix-blend-mode: normal;
}

/* Header */
.topbar {
  position: fixed;
  z-index: 900;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 6.2rem;
  padding: 1.1rem var(--page-x);
  transform: translateY(-110%);
  transition: min-height 0.35s ease, padding 0.35s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, border-color 0.35s ease;
}

.topbar-ready { transform: translateY(0); }
.topbar-compact {
  min-height: 4.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 239, 227, 0.88);
  backdrop-filter: blur(15px);
}

.topbar-brand { display: flex; align-items: center; gap: 0.75rem; font-family: var(--round); font-weight: 900; }
.topbar-logo { width: 2.9rem; transition: transform 0.3s ease; }
.topbar-logo,
.opening-logo,
.hero-stamp img,
.philosophy-mark,
.kinetic-center img,
.company-card > img { filter: brightness(0); }
.topbar-brand:hover .topbar-logo { transform: rotate(-8deg) scale(1.08); }

.topbar-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.8rem);
  font-family: var(--round);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.topbar-nav a { position: relative; }
.topbar-nav a::after { position: absolute; right: 0; bottom: -0.35rem; left: 0; height: 2px; transform: scaleX(0); background: var(--blue); content: ""; transition: transform 0.25s ease; }
.topbar-nav a:hover::after { transform: scaleX(1); }

.topbar-contact {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.72rem 0.9rem 0.72rem 1.2rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-family: var(--round);
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-contact b { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: white; color: var(--ink); }
.topbar-contact:hover { transform: translateY(-2px); background: var(--btn-hover); }
.nav-trigger { display: none; }

.mobile-nav {
  position: fixed;
  z-index: 850;
  inset: 0;
  display: none;
  padding: 7rem var(--page-x) 2rem;
  background: var(--blue);
  color: white;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 2.5rem) 2.5rem);
  transition: visibility 0s linear 0.7s, clip-path 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}

.mobile-nav-open { visibility: visible; clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem); transition-delay: 0s; }

/* Shared */
.section-label {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 2.5rem auto 1fr;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--round);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.section-label::after { height: 1px; background: currentColor; opacity: 0.32; content: ""; }
.section-label span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; }
.section-label small { position: absolute; right: 0; font-weight: 700; letter-spacing: 0.04em; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.section-heading h2,
.results-heading h2,
.company-copy h2 {
  margin: 0;
  font-family: var(--round);
  font-size: clamp(3.5rem, 8vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.section-heading h2 i,
.results-heading h2 i,
.company-copy h2 i { font-family: var(--serif); font-weight: 400; }
.section-heading p { max-width: 27rem; margin: 0; font-weight: 650; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 8.8rem var(--page-x) 2.5rem;
  background: #f7f4eb;
  border-bottom: 1px solid var(--line);
}

.play-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero-ribbon {
  position: absolute;
  z-index: 4;
  top: 8.4rem;
  right: var(--page-x);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--round);
  font-size: clamp(0.58rem, 0.7vw, 0.75rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hero-ribbon i { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; color: white; font-style: normal; }
.hero-ribbon i:first-of-type { background: var(--blue); }
.hero-ribbon i:last-of-type { background: var(--coral); }

.hero-copy { position: relative; z-index: 3; opacity: 0; transform: translateY(3rem); transition: opacity 0.9s ease 0.15s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.hero-copy.hero-ready { opacity: 1; transform: none; }
.hero-copy > p:first-child { margin: 6vh 0 0.8rem; font-family: var(--round); font-size: clamp(0.75rem, 1.1vw, 1rem); font-weight: 900; letter-spacing: 0.2em; }

.hero h1 {
  max-width: 72vw;
  margin: 0;
  font-family: var(--round);
  font-size: clamp(4rem, 8.2vw, 8.75rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.hero h1 span { display: block; }
.hero h1 span:last-child { margin-left: 6vw; }

.hero-en {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 1.8rem 0 0 7vw;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.2vw, 3.8rem);
  line-height: 1;
}

.hero-en strong { color: var(--blue); font-style: italic; font-weight: 400; }
.hero-ja {
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: calc(100% - 6vw);
  margin: 1.55rem 0 0 6vw;
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: clamp(1.25rem, 1.65vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.58;
  white-space: nowrap;
}

.hero-ja::after {
  position: absolute;
  z-index: 1;
  right: -0.12em;
  bottom: -0.18em;
  left: -0.12em;
  height: 1em;
  clip-path: polygon(0 67%, 100% 17%, 100% 29%, 0 96%);
  background: linear-gradient(90deg, #ad8740, var(--yellow));
  content: "";
  pointer-events: none;
}

.hero-ja-text { position: relative; z-index: 2; }

.hero-ja-path {
  display: inline-block;
  margin: 0 0.04em;
  color: var(--ink);
  font-family: var(--round);
  font-size: 1.24em;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: -0.05em;
}

.hero-world { position: absolute; z-index: 2; right: 0; bottom: -1px; left: 0; height: 54vh; pointer-events: none; }
.hero-mountain-reference {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 107vw;
  aspect-ratio: 2170 / 725;
}
.hero-mountain-reference > img { width: 100%; height: 100%; object-fit: contain; }
.hero-sun { position: absolute; top: -7%; right: 15%; display: grid; width: clamp(7rem, 11vw, 12rem); aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.hero-sun span { font-family: var(--round); font-size: clamp(0.55rem, 0.7vw, 0.78rem); font-weight: 900; line-height: 1.1; text-align: center; transform: rotate(7deg); }

.hero-cloud,
.art-cloud,
.contact-cloud,
.window-cloud { position: absolute; border: 1px solid var(--ink); border-radius: 999px; background: white; }
.hero-cloud::before,
.hero-cloud::after,
.art-cloud::before,
.art-cloud::after,
.contact-cloud::before,
.contact-cloud::after,
.window-cloud::before { position: absolute; bottom: -2px; border: inherit; border-bottom: 0; border-radius: 999px 999px 0 0; background: inherit; content: ""; }
.hero-cloud::before,
.art-cloud::before,
.contact-cloud::before { left: 18%; width: 36%; height: 150%; }
.hero-cloud::after,
.art-cloud::after,
.contact-cloud::after { right: 14%; width: 30%; height: 100%; }
.hero-cloud-a { top: 11%; left: 2%; width: 9rem; height: 2.2rem; animation: cloudDrift 7s ease-in-out infinite; }
.hero-cloud-b { top: 28%; right: -2%; width: 11rem; height: 2.5rem; animation: cloudDrift 9s ease-in-out -2s infinite reverse; }

.hero-mountain { position: absolute; right: 0; bottom: 0; left: 0; transform-origin: bottom; clip-path: polygon(0 100%, 0 79%, 15% 57%, 29% 69%, 48% 26%, 60% 48%, 71% 34%, 100% 76%, 100% 100%); }
.mountain-back { height: 76%; background: var(--sky); opacity: 0.85; }
.mountain-front { height: 66%; overflow: hidden; border: 1px solid var(--ink); background: var(--green); }
.mountain-front i { position: absolute; left: -10%; width: 120%; height: 1px; background: rgba(23,23,23,0.42); transform: rotate(-9deg); }
.mountain-front i:nth-child(1) { top: 45%; }
.mountain-front i:nth-child(2) { top: 55%; }
.mountain-front i:nth-child(3) { top: 65%; }
.mountain-front i:nth-child(4) { top: 75%; }
.mountain-front i:nth-child(5) { top: 85%; }

.hero-stamp { position: absolute; right: 9%; bottom: 9%; display: grid; width: clamp(7.5rem, 11vw, 11rem); aspect-ratio: 1; place-items: center; transform: rotate(2deg); border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 4px 4px 0 rgba(24,39,56,0.18); }
.hero-stamp img { width: 54%; }
.hero-stamp span { position: absolute; right: 0.6rem; bottom: 0.45rem; font-family: var(--round); font-size: 0.45rem; font-weight: 900; line-height: 1; text-align: right; }

.hero-scroll { position: absolute; z-index: 5; bottom: 2.4rem; left: var(--page-x); display: flex; align-items: center; gap: 0.9rem; color: white; font-family: var(--round); font-size: 0.65rem; font-weight: 900; text-shadow: 0 1px 12px rgba(10,25,39,.55); }
.hero-scroll i { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid white; border-radius: 50%; background: white; color: var(--ink); font-size: 1.1rem; font-style: normal; text-shadow: none; animation: scrollBounce 1.7s ease-in-out infinite; }

@keyframes sunWobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes cloudDrift { 0%,100% { transform: translateX(-0.6rem); } 50% { transform: translateX(1.1rem); } }
@keyframes scrollBounce { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }

/* Philosophy */
.philosophy {
  position: relative;
  min-height: 105vh;
  overflow: hidden;
  padding: clamp(5rem, 8vw, 8rem) var(--page-x);
  background: var(--ink);
  color: white;
}

.philosophy::after { position: absolute; right: -12%; bottom: -26%; width: 58vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; background: var(--blue); content: ""; }
.philosophy-copy { position: relative; z-index: 3; max-width: 75rem; margin: clamp(5rem, 11vw, 10rem) auto 0; text-align: center; }
.philosophy-copy > p { margin: 0 0 1rem; font-family: var(--round); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; }
.philosophy-copy h2 { margin: 0; font-family: var(--round); font-size: clamp(3.6rem, 9.2vw, 9.8rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.94; }
.philosophy-copy h2 i { color: var(--yellow); font-family: var(--serif); font-weight: 400; }
.philosophy-text { display: grid; grid-template-columns: 1fr 1fr; max-width: 54rem; margin: clamp(3rem, 6vw, 6rem) auto 0; gap: clamp(2rem, 5vw, 5rem); text-align: left; }
.philosophy-text strong { font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.75; }
.philosophy-text p { margin: 0; font-size: 0.9rem; font-weight: 650; }

.philosophy-sun { position: absolute; z-index: 1; top: 19%; left: 5%; display: grid; width: clamp(5rem, 8vw, 8rem); aspect-ratio: 1; place-items: center; border: 1px solid var(--yellow); border-radius: 50%; background: transparent; animation: rotateSun 28s linear infinite; }
.philosophy-sun span { color: white; font-family: var(--serif); font-size: 1.7rem; animation: rotateSun 28s linear infinite reverse; }
.philosophy-sun i { position: absolute; width: 140%; height: 1px; background: var(--yellow); }
.philosophy-sun i:nth-child(2) { transform: rotate(45deg); }
.philosophy-sun i:nth-child(3) { transform: rotate(90deg); }
.philosophy-sun i:nth-child(4) { transform: rotate(135deg); }
.philosophy-sun i:nth-child(n+5) { display: none; }
.philosophy-sun::after { position: absolute; inset: -10%; border-radius: 50%; background: var(--ink); content: ""; z-index: -1; }

.philosophy-tiles { position: absolute; z-index: 3; bottom: 2rem; left: var(--page-x); display: flex; align-items: center; gap: 0.4rem; transform: rotate(-3deg); font-family: var(--round); font-weight: 900; }
.philosophy-tiles span { padding: 0.65rem 1rem; border: 1px solid rgba(255,255,255,0.6); border-radius: 999px; background: transparent; color: white; }
.philosophy-tiles i { font-size: 1.4rem; font-style: normal; }
.philosophy-mark { position: absolute; z-index: 3; right: 6%; bottom: 6%; width: clamp(8rem, 16vw, 16rem); opacity: 0.16; transform: rotate(3deg); mix-blend-mode: screen; filter: brightness(0) invert(1); }
@keyframes rotateSun { to { transform: rotate(360deg); } }

/* Projects */
.projects { position: relative; padding: clamp(5rem, 8vw, 8rem) var(--page-x) clamp(7rem, 11vw, 12rem); background: var(--paper); }
.project-list { display: grid; gap: clamp(5rem, 9vw, 10rem); }
.project-card { --card-rx: 0deg; --card-ry: 0deg; position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; transform: perspective(1400px) rotateX(calc(var(--card-rx) * .35)) rotateY(calc(var(--card-ry) * .35)); transform-style: preserve-3d; transition: transform 0.25s ease; }
.project-card:nth-child(even) { grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.35fr); }
.project-card:nth-child(even) .project-art { order: 2; }
.project-open { position: absolute; z-index: 7; inset: 0; cursor: pointer; }
.project-art { position: relative; min-height: clamp(25rem, 52vw, 48rem); overflow: hidden; border: 1px solid var(--line); border-radius: clamp(0.6rem, 1.5vw, 1.2rem); box-shadow: 0 1.2rem 3.5rem rgba(24,39,56,0.09); transition: transform 0.45s ease, box-shadow 0.45s ease; }
.project-card:hover .project-art { transform: translateY(-0.3rem); box-shadow: 0 1.8rem 4rem rgba(24,39,56,0.13); }
.art-lime { background: var(--yellow); }
.art-coral { background: var(--coral); }
.art-aqua { background: var(--sky); }
.art-sun { position: absolute; top: 10%; right: 11%; width: 28%; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-light); }
.art-sun i { position: absolute; inset: 29%; border-radius: 50%; background: var(--yellow); }
.art-cloud { width: 25%; height: 5%; }
.cloud-one { top: 23%; left: 9%; }
.cloud-two { top: 35%; right: -4%; }
.art-hill { position: absolute; right: -7%; bottom: -5%; left: -7%; border: 1px solid var(--ink); border-radius: 48% 48% 0 0 / 70% 70% 0 0; }
.hill-back { height: 52%; background: var(--green); transform: rotate(6deg); }
.hill-front { height: 36%; background: var(--blue); transform: rotate(-4deg); }
.art-road { position: absolute; z-index: 2; bottom: -5%; left: 46%; width: 16%; height: 47%; transform: perspective(25rem) rotateX(23deg) rotate(-3deg); transform-origin: bottom; border: 1px solid var(--ink); background: var(--paper-light); }
.art-road i { display: block; width: 2px; height: 10%; margin: 12% auto; background: var(--coral); }
.art-logo { position: absolute; z-index: 3; bottom: 10%; left: 9%; width: 23%; filter: brightness(0) invert(1); mix-blend-mode: screen; opacity: 0.72; }
.art-year { position: absolute; z-index: 3; top: 5%; left: 5%; font-family: var(--round); font-size: 0.63rem; font-weight: 900; letter-spacing: 0.12em; }
.project-info { position: relative; z-index: 2; transform: translateZ(1.5rem); }
.project-meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ink); font-family: var(--round); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; }
.project-info h3 { margin: 1.2rem 0; font-family: var(--round); font-size: clamp(2.6rem, 5.3vw, 5.8rem); font-weight: 900; letter-spacing: -0.07em; line-height: 0.86; }
.project-info p { max-width: 34rem; margin: 0 0 2rem; font-weight: 650; }
.project-result { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--round); }
.project-result > span { font-size: 0.6rem; font-weight: 900; }
.project-result strong { font-size: clamp(2rem, 3.5vw, 4rem); line-height: 0.85; }
.project-result strong small { display: block; margin-top: 0.45rem; font-size: 0.5rem; letter-spacing: 0.06em; }
.project-result > b { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-light); }
.sample-note { margin: 5rem 0 0; font-size: 0.7rem; opacity: 0.65; }

/* Services */
.services { position: relative; padding: clamp(5rem, 8vw, 8rem) var(--page-x) clamp(7rem, 10vw, 11rem); overflow: hidden; border-top: 1px solid rgba(255,255,255,0.15); background: var(--blue); color: white; }
.services::before { position: absolute; top: 8%; right: -4%; width: 14vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.26); border-radius: 50%; background: transparent; content: ""; }
.services .section-label span { border-color: white; }
.services-head { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; margin: clamp(4rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 7rem); }
.services-head h2 { margin: 0; font-family: var(--round); font-size: clamp(3.7rem, 8.5vw, 9rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.91; }
.services-head > p { max-width: 34rem; margin: 1rem 0 0; grid-column: 1; font-weight: 650; }
.services-bubble { display: grid; width: clamp(9rem, 14vw, 13rem); min-height: 8rem; padding: 1.4rem; align-content: center; border: 1px solid rgba(255,255,255,0.55); border-radius: 0.6rem; background: rgba(255,255,255,0.05); color: white; font-family: var(--round); font-size: clamp(0.75rem, 1.1vw, 1rem); font-weight: 700; line-height: 1.2; transform: none; }
.services-bubble i { margin-top: 0.5rem; font-size: 2rem; font-style: normal; }
.service-list { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,0.6); }
.service-item { border-bottom: 1px solid rgba(255,255,255,0.6); }
.service-item summary { display: grid; grid-template-columns: 4rem 1fr 0.8fr 3rem; align-items: center; min-height: clamp(6rem, 10vw, 9rem); gap: 1rem; list-style: none; cursor: pointer; }
.service-item summary::-webkit-details-marker { display: none; }
.service-item summary > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid white; border-radius: 50%; font-family: var(--round); font-size: 0.6rem; }
.service-item summary > b { font-family: var(--round); font-size: clamp(1.7rem, 3.2vw, 3.7rem); letter-spacing: -0.045em; }
.service-item summary > small { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; }
.service-item summary > i { font-size: 2.2rem; font-style: normal; text-align: center; transition: transform 0.35s ease; }
.service-item[open] summary > i { transform: rotate(45deg); }
.service-item > div { display: grid; grid-template-columns: 1fr 0.8fr 3rem; gap: 1rem; padding: 0 0 2.5rem 5rem; }
.service-item > div p { max-width: 44rem; margin: 0; font-size: clamp(0.95rem, 1.3vw, 1.2rem); font-weight: 620; }
.service-item ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.service-item li { padding: 0.35rem 0.65rem; border: 1px solid white; border-radius: 999px; font-size: 0.62rem; font-weight: 800; }
.service-process { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(5rem, 9vw, 9rem); border: 1px solid rgba(255,255,255,0.42); border-radius: 0.7rem; background: rgba(255,255,255,0.96); color: var(--ink); box-shadow: 0 1.5rem 4rem rgba(8,23,36,0.18); }
.service-process div { position: relative; min-height: 13rem; padding: 1.4rem; border-right: 1px solid var(--ink); }
.service-process div:last-child { border-right: 0; }
.service-process div::after { position: absolute; right: -1.1rem; bottom: 50%; z-index: 2; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); content: "→"; }
.service-process div:last-child::after { display: none; }
.service-process span { display: block; font-family: var(--round); font-size: 0.6rem; }
.service-process strong { display: block; margin-top: 3rem; font-family: var(--round); font-size: clamp(1.8rem, 3vw, 3rem); }
.service-process small { font-family: var(--round); font-size: 0.55rem; letter-spacing: 0.08em; }

/* Results */
.results { padding: clamp(5rem, 8vw, 8rem) var(--page-x) clamp(7rem, 11vw, 12rem); background: var(--paper-light); }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 7vw, 7rem); }
.results-heading p { max-width: 27rem; margin: 0; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.metric { position: relative; min-height: 23rem; padding: 1.5rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.metric > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--round); font-size: 0.62rem; }
.metric > strong { display: block; margin-top: 4rem; font-family: var(--round); font-size: clamp(5rem, 11vw, 12rem); font-weight: 900; letter-spacing: -0.09em; line-height: 0.7; }
.metric > strong sup { margin-left: 0.07em; font-size: 0.32em; vertical-align: top; }
.metric > b { display: block; margin-top: 2.3rem; font-family: var(--round); font-size: clamp(0.8rem, 1.2vw, 1rem); letter-spacing: 0.06em; }
.metric > p { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 650; }
.metric-1 { background: white; }
.metric-2 { background: #ece8df; }
.metric-3 { background: var(--sky); }
.metric-4 { background: #d9e0da; }
.metric-4 > strong { font-size: clamp(4rem, 9vw, 10rem); }

/* Kinetic */
.kinetic { position: relative; overflow: hidden; padding: clamp(7rem, 12vw, 13rem) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper-light); }
.kinetic-row { width: 112%; margin-left: -6%; overflow: hidden; border-top: 1px solid rgba(24,39,56,0.55); border-bottom: 1px solid rgba(24,39,56,0.55); transform-origin: center; }
.kinetic-row div { width: max-content; font-family: var(--round); font-size: clamp(4.5rem, 9.5vw, 10rem); font-weight: 800; letter-spacing: -0.065em; line-height: 0.9; white-space: nowrap; transform: translateX(calc(var(--scroll-nudge) * .8)); filter: blur(calc(var(--scroll-blur) * .3)); transition: transform 0.12s linear; }
.kinetic-row i { font-family: var(--serif); font-weight: 400; }
.kinetic-blue { background: var(--ink); color: white; transform: rotate(-1deg); }
.kinetic-yellow { position: relative; z-index: 2; background: #e2dccd; transform: rotate(.5deg); }
.kinetic-yellow div { transform: translateX(calc(var(--scroll-nudge) * -1.8)); }
.kinetic-red { background: var(--blue); color: white; transform: rotate(-.5deg); }
.kinetic-red div { transform: translateX(calc(var(--scroll-nudge) * 1.1)); }
.kinetic-center { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: clamp(8rem, 14vw, 14rem); aspect-ratio: 1; place-items: center; transform: translate(-50%, -50%) rotate(-2deg); border: 1px solid var(--ink); border-radius: 50%; background: var(--paper-light); box-shadow: 0 .8rem 2rem rgba(24,39,56,.18); }
.kinetic-center img { width: 45%; }
.kinetic-center span { position: absolute; bottom: 13%; font-family: var(--round); font-size: clamp(0.5rem, 0.7vw, 0.7rem); font-weight: 900; line-height: 1.05; text-align: center; }

/* Company */
.company { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 7vw, 8rem); overflow: hidden; padding: clamp(5rem, 8vw, 8rem) var(--page-x) clamp(7rem, 10vw, 11rem); background: var(--paper); }
.company > .section-label { grid-column: 1 / -1; }
.company-window { position: relative; min-height: clamp(34rem, 60vw, 58rem); overflow: hidden; align-self: start; border: 1px solid var(--line); border-radius: 50% 50% .8rem .8rem; background: var(--sky); box-shadow: 0 1.5rem 4rem rgba(24,39,56,.12); }
.window-sun { position: absolute; top: 11%; right: 13%; width: 25%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.window-cloud { top: 29%; left: 12%; width: 32%; height: 4%; }
.window-cloud::after { display: none; }
.window-hill { position: absolute; right: -18%; bottom: -12%; left: -18%; height: 66%; border: 2px solid var(--ink); border-radius: 50% 50% 0 0; background: var(--green); transform: rotate(-7deg); }
.company-window span { position: absolute; z-index: 2; bottom: 7%; left: 7%; font-family: var(--round); font-size: clamp(2.5rem, 6vw, 6.5rem); font-weight: 900; letter-spacing: -0.08em; line-height: 0.8; color: white; -webkit-text-stroke: 1.5px var(--ink); }
.company-copy { align-self: center; }
.company-copy > p:first-child { margin: 0 0 1.2rem; color: var(--blue); font-family: var(--round); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
.company-copy > p:last-child { max-width: 34rem; margin: 2rem 0 0; font-weight: 650; }
.company-card { grid-column: 2; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--line); border-radius: .7rem; background: var(--paper-light); box-shadow: 0 1.5rem 4rem rgba(24,39,56,.1); }
.company-card > img { width: 5rem; margin-bottom: 2rem; }
.company-card dl { margin: 0; border-top: 1px solid var(--ink); }
.company-card dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.company-card dt { font-family: var(--round); font-size: 0.7rem; font-weight: 900; }
.company-card dd { margin: 0; font-size: 0.85rem; font-weight: 700; white-space: pre-line; }
.company-card dd small { display: block; margin-top: 0.2rem; font-size: 0.62rem; font-weight: 500; }

/* Contact */
.contact { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: clamp(5rem, 8vw, 8rem) var(--page-x); background: #e7ece9; text-align: center; }
.contact > .section-label { position: absolute; top: clamp(5rem, 8vw, 8rem); right: var(--page-x); left: var(--page-x); text-align: left; }
.contact-copy { position: relative; z-index: 3; margin-top: 5rem; }
.contact-copy > p { margin: 0 0 1rem; font-family: var(--round); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em; }
.contact-copy h2 { margin: 0; font-family: var(--round); font-size: clamp(4rem, 10vw, 10.5rem); font-weight: 900; letter-spacing: -0.1em; line-height: 0.86; }
.contact-copy h2 i { color: var(--blue); font-family: var(--serif); font-weight: 400; }
.contact-copy > span { display: block; margin-top: 1.7rem; font-family: var(--round); font-size: clamp(0.7rem, 1vw, 1rem); font-weight: 900; letter-spacing: 0.12em; }
.big-contact { position: relative; z-index: 4; display: grid; width: clamp(12rem, 20vw, 20rem); aspect-ratio: 1; margin-top: 3rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: white; box-shadow: 0 1.2rem 3rem rgba(24,39,56,.2); font-family: var(--round); transition: transform 0.3s ease, background 0.25s ease; }
.big-contact:hover { transform: translateY(-.4rem); background: var(--btn-hover); }
.big-contact span { font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 900; line-height: 1.25; }
.big-contact b { position: absolute; top: 17%; right: 18%; font-size: 1.5rem; }
.big-contact small { position: absolute; bottom: 14%; font-size: 0.55rem; font-weight: 900; letter-spacing: 0.08em; }
.contact-cloud { z-index: 1; width: 15rem; height: 3rem; }
.cloud-left { bottom: 16%; left: -3rem; }
.cloud-right { top: 25%; right: -3rem; transform: scale(1.4); }
.contact-mini { position: absolute; z-index: 3; right: var(--page-x); bottom: 2.5rem; left: var(--page-x); display: flex; justify-content: space-between; font-family: var(--round); font-size: 0.65rem; font-weight: 900; }

/* Footer */
.footer { padding: clamp(4rem, 7vw, 7rem) var(--page-x) 1.5rem; background: #101d2a; color: white; }
.footer-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding-bottom: clamp(4rem, 8vw, 8rem); }
.footer-main > img { width: clamp(5rem, 8vw, 8rem); filter: brightness(0) invert(1); }
.footer-main > div strong { display: block; font-family: var(--round); font-size: clamp(1.7rem, 3vw, 3rem); }
.footer-main > div span { display: block; font-size: 0.65rem; letter-spacing: 0.12em; }
.footer-main > p { margin: 0; font-family: var(--round); font-size: clamp(2.2rem, 5vw, 5.5rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.92; text-align: right; }
.footer-main > p i { color: var(--yellow); font-style: normal; }
.footer-links { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.35); }
.footer-links a { padding: 1.3rem 0.7rem; border-right: 1px solid rgba(255,255,255,0.35); font-family: var(--round); font-size: 0.65rem; font-weight: 900; text-align: center; }
.footer-links a:last-child { border-right: 0; }
.footer-links a:hover { background: var(--yellow); color: var(--ink); }
.footer-bottom { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 1rem; padding-top: 1.5rem; font-family: var(--round); font-size: 0.55rem; letter-spacing: 0.08em; }
.footer-bottom button { display: flex; align-items: center; gap: 0.8rem; color: white; cursor: pointer; }
.footer-bottom b { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); }

/* Project dialog */
.project-dialog { width: min(70rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100svh - 2rem); padding: 0; overflow: auto; border: 1px solid var(--ink); border-radius: .8rem; background: var(--paper-light); box-shadow: 0 2rem 6rem rgba(8,23,36,.3); color: var(--ink); }
.project-dialog::backdrop { background: rgba(24,39,56,0.72); backdrop-filter: blur(6px); }
.dialog-grid { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 36rem; }
.dialog-grid .project-art { min-height: 36rem; border: 0; border-right: 2px solid var(--ink); border-radius: 0; box-shadow: none; }
.dialog-close { position: absolute; z-index: 10; top: 1rem; right: 1rem; padding: 0.6rem 0.9rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-family: var(--round); font-size: 0.6rem; font-weight: 900; cursor: pointer; }
.dialog-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.dialog-body > span { font-family: var(--round); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; }
.dialog-body h2 { margin: 1rem 0; font-family: var(--round); font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.08em; line-height: 0.85; }
.dialog-body > strong { font-size: 1.05rem; }
.dialog-body > p { font-size: 0.85rem; }
.dialog-body dl { margin: 1.5rem 0; border-top: 1px solid var(--ink); }
.dialog-body dl div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.dialog-body dt { font-family: var(--round); font-size: 0.55rem; font-weight: 900; }
.dialog-body dd { margin: 0; font-size: 0.75rem; font-weight: 650; }
.dialog-body > a { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 1rem 1.2rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-family: var(--round); font-size: 0.8rem; font-weight: 900; }

/* Responsive */
@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-nav, .topbar-contact { display: none; }
  .nav-trigger { display: grid; width: 4rem; height: 2.6rem; place-items: center; font-family: var(--round); font-size: 0.6rem; font-weight: 900; cursor: pointer; }
  .nav-trigger i { position: absolute; width: 1.2rem; height: 2px; margin-top: 1.6rem; background: var(--ink); transition: transform 0.3s ease; }
  .nav-trigger i:last-child { margin-top: 2rem; }
  .nav-open .nav-trigger { position: relative; z-index: 999; color: white; }
  .nav-open .nav-trigger i { background: white; transform: translateY(0.2rem) rotate(45deg); }
  .nav-open .nav-trigger i:last-child { transform: translateY(-0.2rem) rotate(-45deg); }
  .mobile-nav { display: block; }
  .mobile-nav nav { border-top: 1px solid rgba(255,255,255,0.55); }
  .mobile-nav nav a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.55); }
  .mobile-nav nav small { font-family: var(--round); font-size: 0.6rem; }
  .mobile-nav nav span { font-family: var(--round); font-size: clamp(2.1rem, 8vw, 4.5rem); font-weight: 900; letter-spacing: -0.06em; }
  .mobile-nav nav b { font-size: 1.5rem; }

  .hero { min-height: 900px; }
  .hero h1 { max-width: 100%; font-size: clamp(4rem, 10.5vw, 7rem); }
  .hero-world { height: 48vh; }
  .hero-mountain-reference { right: 0; width: 135vw; }
  .hero-ribbon { top: 7rem; }
  .hero-copy > p:first-child { margin-top: 11vh; }
  .hero-en { flex-direction: column; gap: 0.1rem; }
  .philosophy-text { grid-template-columns: 1fr; gap: 1.5rem; }
  .project-card, .project-card:nth-child(even) { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-card:nth-child(even) .project-art { order: initial; }
  .project-art { min-height: 65vw; }
  .project-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .project-meta, .project-info h3 { grid-column: 1 / -1; }
  .project-info p { margin: 0; }
  .service-item summary { grid-template-columns: 3.5rem 1fr auto; }
  .service-item summary small { display: none; }
  .service-process { grid-template-columns: repeat(2, 1fr); }
  .service-process div:nth-child(2) { border-right: 0; }
  .service-process div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .service-process div:nth-child(2)::after { display: none; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .company { grid-template-columns: 1fr; }
  .company-window { min-height: 70vw; }
  .company-card { grid-column: 1; }
}

@media (max-width: 680px) {
  .fun-cursor { display: none; }
  .topbar { min-height: 4.7rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .topbar-logo { width: 2.3rem; }
  .section-label { grid-template-columns: 2.3rem auto 1fr; font-size: 0.58rem; }
  .section-label small { display: none; }

  .opening-tile { width: 2rem; height: 2rem; }
  .opening-center { gap: 1rem; }
  .opening-logo-wrap { width: 6.8rem; height: 6.8rem; }

  .hero { min-height: clamp(505px, 157.7vw, 615px); padding-top: 6.5rem; }
  .hero-ribbon { top: 5.6rem; right: auto; left: var(--page-x); gap: 0.35rem; }
  .hero-ribbon i { width: 1.35rem; height: 1.35rem; }
  .hero-copy > p:first-child { margin-top: 12vh; }
  .hero h1 { font-size: clamp(3.3rem, 15vw, 4.8rem); line-height: 0.9; }
  .hero h1 span { white-space: nowrap; }
  .hero h1 span:last-child { margin-left: 0; }
  .hero-en { margin: 1.4rem 0 0; font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .hero-ja { max-width: 100%; margin-left: 0.55em; font-size: clamp(1.15rem, 5.1vw, 1.28rem); }
  .hero-world { height: 40vh; }
  .hero-mountain-reference { right: -7vw; width: 210vw; }
  .hero-sun { top: -5%; right: 25%; width: 6.5rem; }
  .hero-cloud-a { top: 24%; left: 5%; width: 6rem; }
  .hero-cloud-b { top: 46%; right: 8%; width: 7rem; }
  .hero-stamp { right: 24%; bottom: 7%; width: 6.3rem; box-shadow: 5px 5px 0 var(--blue); }
  .hero-scroll { bottom: 1rem; }

  .philosophy { min-height: 920px; }
  .philosophy-copy { margin-top: 7rem; }
  .philosophy-copy h2 { font-size: clamp(3.4rem, 17vw, 5.7rem); }
  .philosophy-text { margin-top: 3rem; }
  .philosophy-sun { top: 9rem; left: 0.8rem; width: 4rem; }
  .philosophy-sun span { font-size: 1.2rem; }
  .philosophy-tiles { right: 1rem; bottom: 2.2rem; left: 1rem; gap: 0.15rem; }
  .philosophy-tiles span { padding: 0.5rem 0.7rem; font-size: 0.7rem; }
  .philosophy-mark { right: 4%; bottom: 9%; width: 8rem; }

  .section-heading { align-items: flex-start; flex-direction: column; margin-top: 4rem; }
  .section-heading h2, .results-heading h2, .company-copy h2 { font-size: clamp(3.4rem, 16vw, 5.6rem); }
  .project-list { gap: 6rem; }
  .project-art { min-height: 95vw; border-radius: .6rem; box-shadow: 0 1rem 2.5rem rgba(24,39,56,.1); }
  .project-info { display: block; }
  .project-info h3 { font-size: 3.3rem; }
  .project-info p { margin-bottom: 1.5rem; }
  .project-result { grid-template-columns: 1fr auto; }
  .project-result > b { display: none; }

  .services-head { display: block; margin-top: 4rem; }
  .services-head h2 { font-size: clamp(3.5rem, 17vw, 5.7rem); }
  .services-bubble { float: right; width: 7rem; margin: -0.5rem 0 1rem 1rem; padding: 1rem; }
  .service-item summary { grid-template-columns: 2.8rem 1fr 2rem; min-height: 6rem; gap: 0.7rem; }
  .service-item summary > span { width: 2.2rem; height: 2.2rem; }
  .service-item summary > b { font-size: 1.45rem; line-height: 1.1; }
  .service-item > div { grid-template-columns: 1fr; padding-left: 0; }
  .service-process { grid-template-columns: 1fr; }
  .service-process div { min-height: 9rem; border-right: 0; border-bottom: 1px solid var(--ink); }
  .service-process div:nth-child(3) { border-bottom: 1px solid var(--ink); }
  .service-process div:last-child { border-bottom: 0; }
  .service-process div::after { display: none; }
  .service-process strong { margin-top: 1.6rem; }

  .metric-grid { grid-template-columns: 1fr; }
  .metric { min-height: 18rem; }
  .metric > strong { margin-top: 3rem; font-size: clamp(5.5rem, 27vw, 8rem); }
  .metric-4 > strong { font-size: clamp(4.8rem, 23vw, 7rem); }
  .kinetic { padding: 7rem 0; }
  .kinetic-row div { font-size: 4.6rem; }
  .kinetic-center { width: 8rem; box-shadow: 5px 5px 0 var(--ink); }

  .company-window { min-height: 105vw; box-shadow: 0 1rem 2.5rem rgba(24,39,56,.12); }
  .company-card { box-shadow: 0 1rem 2.5rem rgba(24,39,56,.1); }
  .company-card dl > div { grid-template-columns: 5.5rem 1fr; }

  .contact { min-height: 900px; }
  .contact-copy h2 { font-size: clamp(4rem, 19vw, 6.5rem); }
  .big-contact { width: 12.5rem; box-shadow: 0 1rem 2.5rem rgba(24,39,56,.18); }
  .contact-cloud { width: 8rem; height: 1.8rem; }
  .cloud-right { top: 24%; }

  .footer-main { grid-template-columns: auto 1fr; }
  .footer-main > img { width: 4.5rem; }
  .footer-main > p { grid-column: 1 / -1; margin-top: 2rem; text-align: left; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-links a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.35); text-align: left; }
  .footer-links a:last-child { border-bottom: 0; }
  .footer-bottom { grid-template-columns: 1fr auto; }
  .footer-bottom span:nth-child(2) { display: none; }

  .project-dialog { border-radius: 1rem; }
  .dialog-grid { grid-template-columns: 1fr; }
  .dialog-grid .project-art { min-height: 20rem; border-right: 0; border-bottom: 2px solid var(--ink); }
  .dialog-body { min-height: 31rem; }
}

@media (max-width: 360px) {
  .hero-ja { margin-left: 0.2em; font-size: clamp(1rem, 5.1vw, 1.15rem); letter-spacing: 0.015em; }
}

@media (pointer: coarse) { .fun-cursor { display: none; } }

/* COMPANY の見出し「鹿児島と沖縄から、」用。
   日本語はどこでも改行できてしまうので、地名の途中で切れないようにしています。
   （このルールを消すと「沖／縄」のように割れます） */
.company-copy h2 span { white-space: nowrap; }

/* ここには以前 @media (prefers-reduced-motion: reduce) の打ち消しがありました。
   OS の「視差効果を減らす」がオンの人には、動きを全部止める内容です。

   ★ Hal の判断で、サイト全体まるごと外しました（2026-08-08）。
     誰が見ても同じものを出す、という方針です。
     理由と、外したことで何が変わるかは service.css の
     「『動きを減らす』設定について」に書いてあります。

   ※ここに打ち消しを戻すと、その瞬間からサイト中の動きが
     設定オンの人にだけ効かなくなります。戻すときは service.css の
     同じ節も見てください。                                          */