/* =========================================================
   Cocoro Creation Lab — corporate site
   構成：1. トークン → 2. ベース → 3. レイアウト → 4. コンポーネント → 5. レスポンシブ
   色・フォントの根拠は docs/migration-inventory.md（STUDIO 版の実測値）
   ========================================================= */

/* 1. トークン */
:root {
  color-scheme: light;

  /* STUDIO 版の実測値（docs/migration-inventory.md）。背景クリーム #FFF7EF に対し本文 #333 は 11.2:1 で AA を満たす */
  --bg: #fff7ef;
  --white: #ffffff;
  --text: #333333;
  --text-strong: #000000;
  --text-muted: #aaaaaa;
  --coral: #ee7959;
  --green: #5b8854;
  --blue: #75bde9;

  /* 見出し和文：STUDIO 版はヒラギノ角ゴ W6。Apple 端末では一致し、それ以外は Zen Kaku Gothic New で代替 */
  --font-heading-ja: "Zen Kaku Gothic Antique", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 本文和文：STUDIO 版は中ゴシックBBB / A1ゴシック M（モリサワ）。STUDIO 外で使えないため代替。
     経緯：Zen Kaku Gothic New（硬い）→ M PLUS Rounded 1c（可愛すぎる）→ Zen Maru Gothic → Zen Kaku Gothic Antique に確定（2026-09-15 Mizuki 判断）。
     A1ゴシック M・中ゴシックBBB は「中太」なので 400 ではなく 500 を基準にする */
  --font-body-ja: "Zen Kaku Gothic Antique", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 見出し・ラベル和文（STUDIO 版は A1ゴシック M）：Shippori Antique も試したが本文との統一感が崩れたため、
     本文と同じ Zen Kaku Gothic Antique に統一（2026-09-15 Mizuki 判断）。A1ゴシック M は中太なので 500 */
  --font-display-ja: "Zen Kaku Gothic Antique", "Hiragino Sans", "Noto Sans JP", sans-serif;
  /* 英字見出し・ナビ・ボタン */
  --font-en: "Maven Pro", "Zen Kaku Gothic Antique", "Hiragino Sans", sans-serif;

  /* STUDIO 版の基準幅 1280px、左右余白 100px */
  --content-max: 1280px;
  --gutter: 100px;
}

/* 2. ベース */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー（top 50px + 高さ約 20px）の下にアンカー先の見出しが隠れないようにする */
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  /* 装飾楕円のはみ出しを切る。hidden はスクロールコンテナ化してアンカー移動を壊すため clip を使う */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 8px 16px;
  background: var(--text);
  color: var(--white);
  border-radius: 999px;
  z-index: 100;
}

.skip-link:focus {
  top: 16px;
}

/* 出現アニメーション（STUDIO 版の &appear）。JS が html.js を付けたときだけ初期状態を隠す。
   既定：translate 0 48px / 1000ms / ease。距離・遅延・時間はクラスで段階化（CSP style-src 'self' のため style 属性は使えない） */
.js [data-appear] {
  opacity: 0;
  translate: 0 var(--ap-ty, 48px);
  transition:
    opacity var(--ap-dur, 1000ms) var(--ap-ease, ease) var(--ap-delay, 0ms),
    translate var(--ap-dur, 1000ms) var(--ap-ease, ease) var(--ap-delay, 0ms);
}

.js [data-appear].is-visible {
  opacity: 1;
  translate: 0 0;
}

.ap-ty15 { --ap-ty: 15px; }
.ap-ty24 { --ap-ty: 24px; }
.ap-ty50 { --ap-ty: 50px; }
.ap-ty100 { --ap-ty: 100px; }
.ap-dur800 { --ap-dur: 800ms; }
.ap-d100 { --ap-delay: 100ms; }
.ap-d200 { --ap-delay: 200ms; }
.ap-d300 { --ap-delay: 300ms; }
.ap-d400 { --ap-delay: 400ms; }
.ap-d500 { --ap-delay: 500ms; }
.ap-d600 { --ap-delay: 600ms; }
.ap-d700 { --ap-delay: 700ms; }
.ap-d900 { --ap-delay: 900ms; }
.ap-d1000 { --ap-delay: 1000ms; }
.ap-d1100 { --ap-delay: 1100ms; }
.ap-d1200 { --ap-delay: 1200ms; }
.ap-d1300 { --ap-delay: 1300ms; }
.ap-header { --ap-ease: cubic-bezier(0, 0.7, 0.2, 1); --ap-dur: 800ms; --ap-delay: 200ms; --ap-ty: 15px; }

@media (prefers-reduced-motion: reduce) {
  .js [data-appear] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.c-coral { color: var(--coral); }
.c-blue { color: var(--blue); }
.c-green { color: var(--green); }

.br-mobile {
  display: none;
}

/* 3. レイアウト */
main {
  position: relative;
  /* 同上。2843px の楕円が main のスクロール領域を広げないよう clip（hidden 不可） */
  overflow: clip;
}

/* 各セクションを独立したスタッキングコンテキストにし、DOM 順で後のセクションが手前に来るようにする
   （STUDIO 版：ヒーロー装飾 z-index -3、各 section -1 の後勝ち。ヒーローのクリーム楕円が Intro を覆わない） */
section {
  position: relative;
  isolation: isolate;
}

.section-head,
.hero__inner,
.intro__inner,
.steps,
.works__grid,
.contact__inner,
.company__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 白・クリームの大きな楕円（STUDIO 版は 1232x1251 の楕円 SVG を拡大配置していた） */
.blob,
.hero__shape,
.works__shape,
.company__shape {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  pointer-events: none;
}

/* Works / Company の背景楕円。STUDIO 版の実測（@1280）：2800x2843 @x-1105 と 2500x2539 @x-205 の 2 枚重ね。left は 50% - 640px 基準 */
.works__shape--a,
.company__shape--a {
  left: calc(50% - 640px - 1105px);
  width: 2800px;
  height: 2843px;
}

.works__shape--b,
.company__shape--b {
  left: calc(50% - 640px - 205px);
  width: 2500px;
  height: 2539px;
}

/* 4. コンポーネント */

/* ヘッダー / ナビ */
.site-header {
  position: fixed;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
}

.site-nav {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: flex-end;
}

.site-nav__list {
  display: flex;
  gap: 30px;
  pointer-events: auto;
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text);
  text-decoration: none;
}

/* STUDIO 版：3px・角丸 10px のコーラル下線が 1px → 100% に伸びる */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 3px;
  border-radius: 10px;
  background: var(--coral);
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  width: 100%;
  opacity: 1;
}

.site-nav__list a:focus-visible {
  outline: none;
}

.site-menu {
  display: none;
}

.hero__char {
  display: inline-block;
}

/* ヒーロー */
.hero {
  padding-top: 50px;
  min-height: 640px;
}

/* STUDIO 版の実測（@1280、ページ左上原点）：白 1880x1909 @(-930,-869) の上にクリーム 1500x1523 @(550,-308) が重なり、
   ロゴ側が白・見出し側がクリームになる。left は 50% - 640px を基準に換算 */
.hero__shape--white {
  top: -869px;
  left: calc(50% - 640px - 930px);
  width: 1880px;
  height: 1909px;
  z-index: 0;
}

.hero__shape--cream {
  top: -308px;
  left: calc(50% - 640px + 550px);
  width: 1500px;
  height: 1523px;
  background: var(--bg);
  z-index: 1;
}



.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 65px 85px;
}

.hero__logo {
  width: 300px;
  flex: none;
}

.hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 550px;
  margin-top: 78px; /* 実測：1 行目の上端 y=193（@1280） */
  margin-right: -15px;
  font-family: var(--font-display-ja);
  font-weight: 500;
  font-size: 100px;
  line-height: 1.4;
  color: var(--text);
}

.hero__line {
  display: block;
  white-space: nowrap;
}

/* STUDIO 版の実測：3 行の右端は 1194 / 1200 / 1191 px でほぼ右揃え。2 行目だけ 6px 右へ */
.hero__line:nth-child(2) { margin-right: -6px; }

/* 会社紹介 */
.intro {
  padding-block: 60px 383px; /* 実測：Approach 見出しの上端 y=1817 に合わせる */
}

.blob--a { top: -79px; left: 50%; width: 822px; height: 835px; margin-left: -730px; }
.blob--b { top: 391px; left: 50%; width: 690px; height: 701px; margin-left: -240px; }
.blob--c { top: 252px; left: 50%; width: 470px; height: 477px; margin-left: 270px; }
.blob--d { top: -120px; left: 50%; width: 220px; height: 224px; margin-left: 380px; }

.intro__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  padding-top: 60px;
}

.intro__text {
  max-width: 560px;
}

.intro__lead {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 37px;
  line-height: 2;
  color: var(--text-strong);
}

.intro__lead-line {
  display: block;
}

.intro__lead-line .c-coral,
.intro__lead-line .c-blue,
.intro__lead-line .c-green {
  margin-right: 0.15em;
}

.intro__body {
  margin-top: 40px;
  font-size: 15px;
  line-height: 2;
  color: var(--text-strong);
}

.intro__figure {
  width: 270px;
  flex: none;
  margin: 191px -92px 0 0; /* 実測：ベン図は x=1002〜1272 で右余白へはみ出す */
}

/* セクション見出し */
.section-title {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 90px;
  line-height: 1;
  color: var(--text);
}

.section-lead {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-strong);
}

/* Approach */
.approach {
  padding-block: 0 190px;
}

.steps {
  margin-top: 0; /* 実測：見出し上端から 1 つ目のバッジまで 210px（step の margin-top 110 + 見出し 90 + リード） */
}

.step {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 110px; /* 実測：バッジ間隔 385px（274 + 111） */
}

.step--offset {
  padding-left: 150px;
}

.step__badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 270px;
  height: 274px;
  flex: none;
  border-radius: 50%;
  background: var(--white);
  text-align: center;
}

.step__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.4;
}

.step__ja {
  font-family: var(--font-display-ja);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.step--coral .step__en, .step--coral .step__ja { color: var(--coral); }
.step--blue .step__en, .step--blue .step__ja { color: var(--blue); }
.step--green .step__en, .step--green .step__ja { color: var(--green); }

/* 円と円をつなぐ点線（STUDIO 版は 10px の白丸 4 個を斜めに置いていた） */
.step:not(.step--last) .step__badge::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: 12px;
  background-image:
    radial-gradient(circle, var(--white) 5px, transparent 5.5px),
    radial-gradient(circle, var(--white) 5px, transparent 5.5px),
    radial-gradient(circle, var(--white) 5px, transparent 5.5px),
    radial-gradient(circle, var(--white) 5px, transparent 5.5px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 0 0, 15px 20px, 30px 40px, 45px 60px;
}

.step--offset:not(.step--last) .step__badge::after {
  margin-left: -72px;
  background-position: 45px 0, 30px 20px, 15px 40px, 0 60px;
}

.step__body {
  max-width: 620px;
}

.step__title {
  font-family: var(--font-display-ja);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--text-strong);
}

.step__desc {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--text-strong);
}

/* Works */
.works {
  padding-block: 120px 318px;
}

.works__shape--a { top: -70px; }
.works__shape--b { top: 20px; }

.works__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 50px;
  margin-top: 97px; /* 実測：見出し上端から画像上端まで 187px */
}

.work__image {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
}

.work__image img {
  width: 100%;
  /* STUDIO 版の実測：枠は幅 100% × 高さ 300px（@1280）で cover。ガラポン画像（1619x971）はこの比率と一致し、pilll / JP は上下が切れる */
  height: 300px;
  object-fit: cover;
}

.work__title {
  margin-top: 50px;
  font-family: var(--font-display-ja);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--text-strong);
}

.work__category {
  margin-top: 5px;
  font-family: var(--font-display-ja);
  font-weight: 700;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--text-strong);
}

.work__desc {
  margin-top: 20px;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
  color: var(--text-strong);
}

/* ボタン（枠線のみ・ピル型） */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--coral);
  border-radius: 999px;
  font-family: var(--font-en);
  color: var(--coral);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
.button:focus-visible {
  background: var(--coral);
  color: var(--white);
  outline: none;
}

.button--small {
  min-width: 122px;
  height: 44px;
  padding-inline: 20px;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.button--large {
  min-width: 324px;
  height: 100px;
  margin-bottom: 22px;
  padding-inline: 40px;
  font-size: 36px;
  font-weight: 800;
}

/* Contact */
.contact {
  padding-block: 120px 300px;
}

.contact__inner {
  display: flex;
  align-items: flex-end; /* 実測：ボタン下端は本文下端の 22px 上 */
  justify-content: space-between;
  gap: 60px;
}

.contact__desc {
  margin-top: 50px;
  font-family: var(--font-display-ja);
  font-weight: 500;
  font-size: 24px;
  line-height: 2;
  color: var(--text-strong);
}

/* Company */
.company {
  padding-block: 300px 192px;
}

.company__shape--a { top: 130px; background: var(--bg); }
.company__shape--b { top: 40px; background: var(--bg); }

.company__inner {
  position: relative;
}

.company__table {
  margin-top: 60px;
}

.company__row {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  padding-block: 20px;
  font-size: 15px;
  line-height: 2;
}

.company__row dt,
.company__row dd {
  font-family: var(--font-display-ja);
  font-weight: 500;
  color: var(--text-strong);
}

.company__row dt {
  letter-spacing: 0.05em;
}

.company__name {
  display: block;
}

.company__bio {
  display: block;
  margin-top: 5px;
  font-family: var(--font-body-ja);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}

/* フッター */
.site-footer {
  padding-block: 96px;
  text-align: center;
}

.site-footer__copy {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--text-muted);
}