:root {
  --ink: #142b3a;
  --ink-soft: #51636d;
  --canvas: #faf9f6;
  --paper: #fff;
  --line: rgba(20, 43, 58, .14);
  --violet: #6c5aa8;
  --coral: #f05a47;
  --teal: #1c9a8b;
  --gold: #e1a52b;
  --blue: #4673ad;
  --section-pad: clamp(88px, 13vw, 180px);
  --side-pad: clamp(22px, 6vw, 88px);
  --max-width: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.intro-animation {
  display: none;
}
.has-intro .intro-animation {
  position: absolute;
  right: clamp(18px, 3vw, 64px);
  bottom: 46px;
  z-index: 0;
  display: grid;
  width: min(44vw, 620px);
  height: min(68vh, 650px);
  overflow: hidden;
  place-items: center;
  pointer-events: none;
  animation: intro-exit .7s 5.1s cubic-bezier(.6, 0, .8, 1) forwards;
}
.intro-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 1;
  animation: canvas-vanish .25s 3.7s ease-out forwards;
}

.intro-logo {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: clamp(190px, 24vw, 310px);
  height: auto;
  overflow: visible;
  opacity: 0;
  translate: -50% -50%;
  transform: scale(.82);
  animation: logo-arrive .7s 3.62s cubic-bezier(.16, 1, .3, 1) forwards;
}
.intro-petal {
  opacity: 0;
  transform: scale(0) rotate(-34deg);
  transform-origin: 0 0;
  animation: petal-bloom .68s cubic-bezier(.16, 1.35, .3, 1) forwards;
}
.petal-1 { animation-delay: 3.68s; }
.petal-2 { animation-delay: 3.74s; }
.petal-3 { animation-delay: 3.80s; }
.petal-4 { animation-delay: 3.86s; }
.petal-5 { animation-delay: 3.92s; }
.intro-core {
  opacity: 0;
  transform: scale(.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: core-appear .22s 3.60s ease-out forwards;
}

@keyframes canvas-vanish {
  to { opacity: 0; }
}
@keyframes logo-arrive {
  0% { opacity: 0; transform: scale(.82); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes petal-bloom {
  0% { opacity: 0; transform: scale(0) rotate(-34deg); }
  62% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes core-appear {
  to { opacity: 1; transform: scale(1); }
}
@keyframes intro-exit {
  to { opacity: 0; visibility: hidden; }
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 14px;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--max-width) + var(--side-pad) * 2);
  margin: auto;
  padding: 24px var(--side-pad);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-decoration: none;
}
.brand img { width: 46px; height: 46px; }
.brand small,
.footer-brand small {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: .25em;
}
.site-header nav { display: flex; gap: clamp(20px, 3vw, 44px); }
.site-header nav a {
  position: relative;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-decoration: none;
}
.site-header nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  padding: 140px var(--side-pad) 96px;
  isolation: isolate;
}
.hero::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  height: 7px;
  content: "";
  background: linear-gradient(90deg, var(--violet) 0 20%, var(--coral) 20% 40%, var(--teal) 40% 60%, var(--gold) 60% 80%, var(--blue) 80%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  animation: rise 800ms cubic-bezier(.2, .8, .2, 1) both;
}
.eyebrow {
  margin: 0 0 24px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .2em;
}
.hero h1 {
  max-width: 1060px;
  margin: 0;
  font-size: clamp(45px, 7.8vw, 112px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.04em;
}
.hero h1 span { white-space: nowrap; }
.hero h1 .hero-vision-line { display: block; }
.hero h1 strong {
  color: var(--coral);
  font: inherit;
  font-weight: 650;
}
.hero-lead {
  margin: 42px 0 0;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 2;
}
.hero-orbit {
  position: absolute;
  right: clamp(-250px, -10vw, -100px);
  bottom: clamp(-330px, -25vw, -180px);
  z-index: -1;
  width: clamp(560px, 62vw, 980px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.hero-orbit::before,
.hero-orbit::after {
  position: absolute;
  content: "";
  border: 1px solid var(--line);
  border-radius: 50%;
  inset: 12%;
}
.hero-orbit::after { inset: 30%; }
.orbit-dot {
  position: absolute;
  width: clamp(18px, 2.6vw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(20, 43, 58, .12);
}
.dot-violet { top: 6%; left: 42%; background: var(--violet); }
.dot-coral { top: 31%; left: 5%; background: var(--coral); }
.dot-teal { top: 42%; right: 29%; background: var(--teal); }
.dot-gold { right: 6%; bottom: 29%; background: var(--gold); }
.dot-blue { bottom: 3%; left: 36%; background: var(--blue); }
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: var(--side-pad);
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-decoration: none;
}
.scroll-cue span { color: var(--coral); font-size: 17px; }

.section {
  max-width: calc(var(--max-width) + var(--side-pad) * 2);
  margin: 0 auto;
  padding: var(--section-pad) var(--side-pad);
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -.04em;
}
.philosophy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(64px, 10vw, 150px);
}
.philosophy-body {
  align-self: end;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.4vw, 18px);
}
.philosophy-body p { margin: 0 0 1.35em; }
.philosophy-body .statement {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
}
.principles {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(12px, 3vw, 44px);
  border: 1px solid var(--line);
}
.principle { min-height: 330px; padding: clamp(32px, 5vw, 70px); }
.principle + .principle { border-left: 1px solid var(--line); }
.principle-label {
  margin: 0 0 70px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}
.principle-vision .principle-label { color: var(--coral); }
.principle-mission .principle-label { color: var(--teal); }
.principle h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: -.025em;
}

.value {
  max-width: none;
  color: var(--paper);
  background: var(--ink);
}
.value > * { width: min(100%, var(--max-width)); margin-right: auto; margin-left: auto; }
.value .eyebrow { color: var(--gold); }
.value-card {
  margin-top: clamp(54px, 8vw, 110px);
  padding-top: clamp(36px, 5vw, 70px);
  border-top: 1px solid rgba(255, 255, 255, .25);
}
.value-copy { width: min(100%, 900px); margin-left: auto; }
.value-copy h3 {
  margin: 0 0 48px;
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.04em;
}
.value-copy p {
  max-width: 760px;
  margin: 0 0 1.6em;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(15px, 1.4vw, 18px);
}

.works-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(60px, 8vw, 110px);
}
.works-heading > p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.featured-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
}
.work-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.work-card:hover,
.work-card:focus-visible {
  box-shadow: 0 24px 70px rgba(20, 43, 58, .12);
  transform: translateY(-8px);
}
.work-visual {
  position: relative;
  display: grid;
  min-height: clamp(280px, 34vw, 470px);
  overflow: hidden;
  place-items: center;
}
.work-index {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 2;
  color: rgba(255, 255, 255, .9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
}
.work-decocom .work-visual { background: var(--coral); }
.case-shape {
  position: relative;
  width: 38%;
  min-width: 150px;
  aspect-ratio: .53;
  background: var(--canvas);
  border: 9px solid var(--ink);
  border-radius: 32px;
  box-shadow: 28px 28px 0 rgba(20, 43, 58, .22);
  transform: rotate(8deg);
}
.case-shape::before {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 24%;
  aspect-ratio: 1;
  content: "";
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--canvas), 0 0 0 10px var(--ink);
}
.case-shape span { position: absolute; border-radius: 50%; }
.case-shape span:nth-child(1) { top: 35%; left: 16%; width: 52%; aspect-ratio: 1; background: var(--gold); }
.case-shape span:nth-child(2) { right: 10%; bottom: 18%; width: 42%; aspect-ratio: 1; background: var(--violet); }
.case-shape span:nth-child(3) { bottom: 13%; left: 10%; width: 28%; aspect-ratio: 1; background: var(--teal); }
.work-mana .work-visual { background: var(--teal); }
.mana-shape {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
}
.mana-shape::before,
.mana-shape::after {
  position: absolute;
  content: "";
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  inset: 16%;
}
.mana-shape::after { inset: 34%; }
.mana-shape span {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  background: var(--paper);
  border-radius: 50%;
}
.mana-shape span:nth-child(1) { top: 6%; left: 43%; }
.mana-shape span:nth-child(2) { top: 48%; right: 9%; background: var(--gold); }
.mana-shape span:nth-child(3) { bottom: 11%; left: 20%; background: var(--violet); }
.work-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(28px, 4vw, 52px);
}
.work-category {
  min-height: 2.8em;
  margin: 0 0 18px;
  color: var(--coral);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .15em;
}
.work-mana .work-category { color: var(--teal); }
.work-content h3 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
  letter-spacing: -.025em;
}
.work-content > p:not(.work-category) { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.work-content .work-catch {
  color: var(--ink);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.6;
}
.work-link {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 28px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  border-top: 1px solid var(--line);
}
.work-link span { color: var(--coral); font-size: 18px; }
.work-mana .work-link span { color: var(--teal); }
.other-works {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 8vw, 120px);
  margin-top: clamp(80px, 11vw, 150px);
  padding-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--line);
}
.other-works h3 { margin: 0; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.55; }
.other-works .eyebrow { color: var(--violet); }
.other-works ul {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.other-works li {
  position: relative;
  padding: 11px 17px;
  font-size: 13px;
  font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.other-works li:not(.and-more) { padding-left: 34px; }
.other-works li:not(.and-more)::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 7px;
  aspect-ratio: 1;
  content: "";
  background: var(--violet);
  border-radius: 50%;
  transform: translateY(-50%);
}
.other-works li:nth-child(3n + 2)::before { background: var(--blue); }
.other-works li:nth-child(3n)::before { background: var(--gold); }
.other-works .and-more { color: var(--paper); background: var(--ink); }

.company {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: clamp(54px, 10vw, 150px);
}
.company-heading h2 { font-size: clamp(40px, 5vw, 68px); }
.company .eyebrow { color: var(--blue); }
.company-profile { margin: 0; }
.company-profile > div {
  display: grid;
  grid-template-columns: minmax(90px, .35fr) minmax(0, 1.65fr);
  gap: 24px;
  padding: 23px 0;
  border-top: 1px solid var(--line);
}
.company-profile > div:last-child { border-bottom: 1px solid var(--line); }
.company-profile dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.company-profile dd { margin: 0; font-size: 15px; font-weight: 600; }

.contact {
  padding: 0 var(--side-pad) var(--section-pad);
}
.contact-inner {
  position: relative;
  width: min(100%, var(--max-width));
  margin: 0 auto;
  overflow: hidden;
  padding: clamp(48px, 8vw, 105px);
  color: var(--paper);
  background: var(--coral);
  isolation: isolate;
}
.contact-inner::after {
  position: absolute;
  right: clamp(-180px, -10vw, -70px);
  bottom: clamp(-220px, -15vw, -100px);
  z-index: -1;
  width: clamp(340px, 43vw, 620px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  box-shadow: inset 0 0 0 clamp(55px, 7vw, 100px) rgba(255, 255, 255, .08);
}
.contact .eyebrow { color: var(--paper); }
.contact h2 {
  margin: 0;
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.25;
  letter-spacing: -.04em;
}
.contact-inner > p:not(.eyebrow) {
  margin: 28px 0 clamp(38px, 6vw, 70px);
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15px, 1.5vw, 19px);
}
.contact-link {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 760px);
  padding: 22px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 3.5vw, 48px);
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .8);
}
.contact-link span:last-child {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: .8em;
  transition: transform 200ms ease;
}
.contact-link:hover span:last-child,
.contact-link:focus-visible span:last-child { transform: translate(4px, -4px); }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  padding: clamp(70px, 9vw, 120px) var(--side-pad) 34px;
  color: var(--paper);
  background: var(--ink);
}
.footer-brand { font-size: clamp(30px, 4vw, 52px); }
.footer-brand img { width: clamp(56px, 7vw, 82px); height: auto; }
.footer-brand small { color: rgba(255, 255, 255, .55); }
.site-footer > p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; }
.footer-contact {
  color: rgba(255, 255, 255, .78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.copyright {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding-top: 20px;
  color: rgba(255, 255, 255, .45);
  font-size: 9px;
  letter-spacing: .18em;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
}

@media (max-width: 820px) {
  .site-header { padding-top: 18px; }
  .site-header nav { display: none; }
  .hero { min-height: 820px; }
  .has-intro .intro-animation {
    right: 0;
    bottom: 10px;
    width: 100%;
    height: 38%;
  }
  .intro-logo { width: clamp(170px, 52vw, 230px); }
  .philosophy,
  .other-works,
  .company { grid-template-columns: 1fr; }
  .principles,
  .featured-works { grid-template-columns: 1fr; }
  .principle + .principle { border-top: 1px solid var(--line); border-left: 0; }
  .principle { min-height: 260px; }
  .principle-label { margin-bottom: 46px; }
  .works-heading { align-items: flex-start; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-contact { margin-top: -14px; }
}

@media (max-width: 520px) {
  .brand { gap: 10px; font-size: 20px; }
  .brand img { width: 39px; height: 39px; }
  .hero { min-height: 740px; padding-top: 110px; }
  .hero h1 { font-size: clamp(34px, 8.8vw, 48px); }
  .hero-lead br,
  .works-heading br { display: none; }
  .hero-orbit { right: -310px; bottom: -190px; width: 620px; }
  .principle { padding: 30px 24px; }
  .principle h3 br,
  .value-copy h3 br,
  .other-works h3 br { display: none; }
  .work-visual { min-height: 310px; }
  .work-content { padding: 28px 24px 32px; }
  .company-profile > div { grid-template-columns: 1fr; gap: 4px; }
  .contact { padding-right: 0; padding-left: 0; }
  .contact-inner { padding-right: 22px; padding-left: 22px; }
  .contact-link { font-size: clamp(19px, 6.4vw, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro-animation { display: none !important; }
  .hero-copy { animation: none; }
  .work-card,
  .site-header nav a::after { transition: none; }
}