/* unitcell Design — Figma 64:308 から変換 */

:root {
  --blue: #426cf5;
  --blue-deep: #3058d5;
  --blue-line: #7090ff;
  --ink: #152340;
  --sub: #68738a;
  --line: #dfe5ef;
  --soft: #f1f5fc;
  --card: #f7f9fd;
  --lime: #dfff8b;
  --green: #224435;
  --inter: "Inter", "Noto Sans JP", sans-serif;
  --jp: "Noto Sans JP", sans-serif;
  --gutter: clamp(20px, 5.6vw, 80px);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--jp);
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- 共通部品 ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 56px;
  padding: 0 14px 0 22px;
  border-radius: 28px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  transition: transform .2s, background .2s;
}
.pill:hover { transform: translateY(-2px); }
.pill .arrow { font-family: var(--inter); font-weight: 400; font-size: 21px; }
.pill--white { background: #fff; color: var(--blue); }
.pill--deep { background: var(--blue-deep); color: #fff; }
.pill--plain { background: #fff; color: var(--ink); }

.brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 14px); gap: 4px; }
.brand-mark i { width: 14px; height: 14px; border-radius: 4px; background: currentColor; }
.brand-mark i.open { background: #99b3ff; }
.brand-word { font-family: var(--inter); font-weight: 700; font-size: 31px; line-height: 1.5; letter-spacing: -0.01em; }
.brand-desc { margin-left: -6px; font-family: var(--inter); font-size: 15px; line-height: 1.5; }
.brand--ink { color: var(--ink); }
.brand--ink .brand-mark i { background: var(--blue); }
.brand--ink .brand-mark i.open { background: #9bb1ff; }

.section { padding: 72px var(--gutter) 80px; }
.section-label {
  font-family: var(--inter);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
  color: var(--blue);
}
.h-xl { font-size: clamp(30px, 3vw, 43px); line-height: 1.5; font-weight: 700; }
.h-lg { font-size: clamp(28px, 2.71vw, 39px); line-height: 1.5; font-weight: 700; }

/* ---------- 縮尺で描くモック（Figmaの座標をそのまま使う） ---------- */
/* --u = 1デザインpx。コンテナ幅に比例して拡縮する */

@property --x { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --y { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --w { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --h { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --fs { syntax: "<number>"; inherits: false; initial-value: 10; }
@property --r { syntax: "<number>"; inherits: false; initial-value: 0; }

.box, .t, .decor { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.box, .decor { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.t { font-size: calc(var(--fs) * var(--u)); line-height: 1.5; white-space: nowrap; color: var(--ink); }
.t.center { width: calc(var(--w) * var(--u)); text-align: center; }
.t.b { font-weight: 700; }
.t.inter { font-family: var(--inter); }
.t.sub { color: var(--sub); }
.t.blue { color: var(--blue); }
.t.green { color: var(--green); }
.decor { border-radius: calc(var(--r) * var(--u)); background: var(--c); }

.fb { background: #fff; border-radius: calc(16 * var(--u)); overflow: hidden; box-shadow: 0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(21, 35, 64, .16); }
.fb-side { background: #f5f7fb; }
.metric { background: #f3f6fc; border-radius: calc(9 * var(--u)); }
.chart { background: #f8fafe; border-radius: calc(9 * var(--u)); }
.bars { display: flex; align-items: flex-end; gap: calc(15 * var(--u)); }
.bars i { flex: none; width: calc(22 * var(--u)); height: calc(var(--h) * var(--u)); border-radius: calc(4 * var(--u)); background: #c3d1fc; }
.bars i.on { background: var(--blue); }

.orbit { background: #172c27; border-radius: calc(28 * var(--u)); overflow: hidden; }
.orbit-screen { background: #f2f6ef; border-radius: calc(22 * var(--u)); overflow: hidden; }
.orb { border-radius: 50%; background: #d0e8bb; }
.orb--center { background: #a8d17b; }
.orbit-card { background: #fff; border-radius: calc(12 * var(--u)); }
.orbit-nav { background: var(--green); border-radius: calc(11 * var(--u)); }
.float-label { background: var(--lime); border-radius: calc(14 * var(--u)); }

/* ---------- 01 Hero ---------- */

.hero { background: var(--blue); color: #fff; overflow: hidden; }
.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 96px;
  margin: 0 clamp(20px, 3.9vw, 56px);
  border-bottom: 1px solid var(--blue-line);
}
.site-nav { display: flex; gap: 46px; margin-left: auto; margin-right: 42px; font-size: 14px; font-weight: 700; }
.site-nav a:hover { opacity: .75; }
.header-contact { min-width: 164px; }

.hero-copy { padding: 49px var(--gutter) 0; }
.hero-eyebrow { font-family: var(--inter); font-weight: 700; font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
.hero-headline { margin-top: 26px; font-size: clamp(28px, 4.3vw, 62px); line-height: 1.5; font-weight: 700; }
.hero-desc { margin-top: 25px; font-size: clamp(15px, 1.18vw, 17px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 33px; }

/* Figmaの「ずらし配置」：各ブロックの左端を1440基準の比率で再現 */
@media (min-width: 1100px) {
  .hero-copy { padding: 49px 0 0; }
  .hero-eyebrow { margin-left: 29.65%; }
  .hero-headline { margin-left: 19.65%; }
  .hero-desc { margin-left: 25.83%; }
  .hero-actions { margin-left: 33.26%; }
}

.hero-stage { position: relative; margin-top: 58px; container-type: inline-size; aspect-ratio: 1440 / 390; }
.stage-u { --u: calc(100cqw / 1440); position: absolute; inset: 0; }
.hero-foot {
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(20px, 3.9vw, 56px) 37px;
  font-family: var(--inter);
  font-size: 10px;
  line-height: 1.5;
}
.hero-foot p:first-child { font-weight: 700; }
.hero-foot p:last-child { min-width: 270px; }

/* ---------- 02 Introduction ---------- */

.intro { padding-bottom: 53px; }
.intro-grid { display: grid; grid-template-columns: 410px 1fr; }
.intro-grid .section-label { padding-top: 15px; }
.intro-copy { margin-top: 31px; max-width: 850px; font-size: clamp(16px, 1.32vw, 19px); line-height: 1.5; color: var(--sub); }
.expertise {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 80px;
  padding: 49px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-family: var(--inter);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.5;
}
.intro-note { margin-top: 36px; font-family: var(--inter); font-size: 13px; line-height: 1.5; color: var(--sub); }

/* ---------- 03 Selected works ---------- */

.works { background: var(--soft); padding-top: 66px; padding-bottom: 81px; }
.works .h-lg { margin-top: 16px; }
.works-scope { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--sub); }
.works-grid { display: grid; grid-template-columns: 780fr 468fr; gap: 32px; margin-top: 42px; }
.cover { position: relative; container-type: inline-size; aspect-ratio: var(--ar); border-radius: 22px; overflow: hidden; }
.cover--flowboard { --ar: 780 / 452; background: #cbd9f8; }
.cover--orbit { --ar: 468 / 452; background: #dde9cf; }
.cover-u { --u: calc(100cqw / var(--base)); position: absolute; inset: 0; }
.cover-title { color: #244586; }
.cover-title.green { color: var(--green); white-space: normal; }
.work-title { margin-top: 26px; font-family: var(--inter); font-weight: 700; font-size: 27px; line-height: 1.5; }
.work-summary { margin-top: 8px; font-size: 17px; line-height: 1.5; }
.work-tags { margin-top: 18px; font-family: var(--inter); font-size: 11px; line-height: 1.5; color: var(--sub); }
.works-all { margin-top: 75px; min-width: 270px; }

/* ---------- 04 Services ---------- */

.services .h-lg { margin-top: 19px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 56px; }
.service { position: relative; min-height: 359px; padding: 24px; border-radius: 18px; background: var(--card); }
.service-num { font-family: var(--inter); font-weight: 700; font-size: 13px; line-height: 1.5; color: var(--blue); }
.service-symbol { position: absolute; top: 22px; right: 34px; width: 54px; height: 54px; border-radius: var(--sr); background: var(--c); }
.service-en { margin-top: 44px; font-family: var(--inter); font-weight: 700; font-size: 34px; line-height: 1.5; }
.service-ja { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.5; }
.service-desc { margin-top: 17px; font-size: 16px; line-height: 1.5; color: var(--sub); }
.service-tags { margin-top: 39px; padding-top: 19px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--sub); }

/* ---------- 05 Collaboration ---------- */

.collab {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 597px);
  justify-content: space-between;
  gap: 33px;
  background: var(--soft);
  padding-top: 78px;
  padding-bottom: 116px;
}
.collab-headline { margin-top: 29px; }
.collab-copy { margin-top: 43px; font-size: 18px; line-height: 1.5; color: var(--sub); }
.steps { display: grid; gap: 19px; padding: 10px 0 0; list-style: none; }
.steps li {
  display: grid;
  grid-template-columns: 89px 1fr;
  align-items: start;
  min-height: 116px;
  padding: 24px 25px;
  border-radius: 14px;
  background: #fff;
}
.step-num { padding-top: 4px; font-family: var(--inter); font-weight: 700; font-size: 31px; line-height: 1.5; color: var(--blue); }
.step-title { font-size: 22px; font-weight: 700; line-height: 1.5; }
.step-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--sub); }

/* ---------- 06 Contact ---------- */

.contact { position: relative; background: var(--blue); color: #fff; padding-top: 69px; padding-bottom: 50px; overflow: hidden; }
.contact .section-label { color: #fff; }
.contact-headline { margin-top: 32px; font-size: clamp(32px, 3.33vw, 48px); line-height: 1.5; font-weight: 700; }
.contact-desc { margin-top: 29px; font-size: 17px; line-height: 1.5; }
.contact-action { margin-top: 34px; min-width: 368px; }
.contact-deco {
  position: absolute;
  top: 107px;
  right: 67px;
  font-family: var(--inter);
  font-size: clamp(80px, 9vw, 130px);
  line-height: 1.5;
}

/* ---------- 07 Footer ---------- */

.site-footer { padding: 39px var(--gutter) 51px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.footer-nav { display: flex; gap: 48px; font-size: 14px; font-weight: 700; }
.footer-bottom { display: grid; grid-template-columns: 812fr 468fr; gap: 16px; padding-top: 33px; font-size: 12px; line-height: 1.5; color: var(--sub); }
.footer-bottom small:last-child { font-size: 11px; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; gap: 16px; }
  .intro-grid .section-label { padding-top: 0; }
  .service-grid { grid-template-columns: 1fr; gap: 20px; }
  .service { min-height: 0; }
  .collab { grid-template-columns: 1fr; gap: 48px; }
  .contact-deco { opacity: .35; }
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .header-contact { margin-left: auto; min-width: 0; height: 44px; gap: 10px; padding: 0 14px 0 16px; font-size: 14px; }
  .header-contact .arrow { font-size: 17px; }
  .brand-word { font-size: 26px; }
  .hero-stage { margin-left: -40%; margin-right: -40%; margin-top: 48px; }
  .hero-foot p:last-child { display: none; }
  .expertise { grid-template-columns: 1fr 1fr; row-gap: 16px; margin-top: 48px; padding-top: 32px; }
  .works-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-action { min-width: 0; }
  .contact-deco { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-nav { gap: 24px; }
  .footer-bottom { grid-template-columns: 1fr; }
}