/* ==========================================================================
   変数
   ========================================================================== */
:root {
  /* 色 */
  --color-paper: #f4f1ea;
  --color-ink: #141414;
  --color-white: #fff;
  --color-black: #000;
  --color-sub: #8a8578;
  --color-accent: #e8604c;
  --color-client: #d9d9d9;
  --color-staff: #f2ede4;
  --color-logo-ink: #1a1714;
  --color-logo-sheen: #3a342d;
  --color-line: color-mix(in srgb, var(--color-ink) 15%, transparent);
  --color-line-inverse: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-bg-video-dark: color-mix(in srgb, var(--color-ink) 82%, transparent);
  --color-bg-video-light: color-mix(in srgb, var(--color-paper) 35%, transparent);
  --color-text-on-video: color-mix(in srgb, var(--color-white) 80%, transparent);

  /* セクションごとの背景色（JS が data-bg から参照する） */
  --color-bg-paper: #f4f1ea;
  --color-bg-ink: #141414;
  --color-bg-work01: #e9efe6;
  --color-bg-work02: #e8ecf4;
  --color-bg-work03: #fbeef1;

  /* フォント */
  --font-base: 'Zen Kaku Gothic New', sans-serif;
  --font-en: 'Inter Tight', sans-serif;

  /* 重なり順 */
  --z-content: 10;
  --z-header: 100;
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */
/* 画面には出さず、読み上げにだけ使うテキスト */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   ベース
   ========================================================================== */
html {
  font-size: 62.5%;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-base);
  font-size: 1.5rem;
  line-height: 1.9;
}

@media (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
}

main,
.footer {
  position: relative;
  z-index: var(--z-content);
}

/* ==========================================================================
   セクションの背景動画（固定背景・共通部品）
   ========================================================================== */
/* 画面に固定し、3D キャンバスより奥に置く。
   見せる範囲は JS が対象セクションの位置に合わせて clip-path で切り抜く（初期は非表示） */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

/* 上に重ねる文字を読みやすくする膜 */
.bg-video::after {
  position: absolute;
  inset: 0;
  content: '';
}

/* 明るい映像に黒い文字を重ねる場合 */
.bg-video--light::after {
  background: var(--color-bg-video-light);
}

/* 暗い映像に白い文字を重ねる場合 */
.bg-video--dark::after {
  background: var(--color-bg-video-dark);
}

.bg-video__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   3D キャンバス・進行バー
   ========================================================================== */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  transform-origin: left center;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-header);
  width: 100%;
  padding: 18px 20px;
  color: var(--color-white);
  mix-blend-mode: difference;
}

@media (min-width: 768px) {
  .header {
    padding: 24px 40px;
  }
}

.header__logo {
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header__list {
  display: flex;
  gap: 16px;
}

@media (min-width: 768px) {
  .header__list {
    gap: 32px;
  }
}

.header__link {
  font-size: 1.3rem;
  transition: opacity 0.3s;
}

@media (min-width: 768px) {
  .header__link {
    font-size: 1.4rem;
  }
}

@media (any-hover: hover) {
  .header__link:hover,
  .header__link:focus-visible {
    opacity: 0.6;
  }
}

/* ==========================================================================
   01 オープニング
   ========================================================================== */
.opening__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100svh;
  padding: 0 20px;
}

/* 画面の中で主張しすぎないよう、余白を広くとる大きさにする */
.opening__logo {
  position: relative;
  width: min(56vw, 360px);
}

.opening__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ロゴの墨色（グラデーションと質感フィルターは SVG 内で定義） */
.opening__ink {
  fill: url(#logo-ink);
}

.opening__ink-stop {
  stop-color: var(--color-logo-ink);
}

.opening__ink-stop--sheen {
  stop-color: var(--color-logo-sheen);
}

.opening__eraser {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 140;
}

/* マスクから範囲を抜く */
.opening__mask-cut {
  fill: var(--color-black);
}

/* 抜く範囲を白い縁で 1 単位狭め、隣の部品と境目で重なるようにする */
.opening__mask-cut--overlap {
  stroke: var(--color-white);
  stroke-width: 2;
}

/* マスクの見せる範囲（白地） */
.opening__mask-keep {
  fill: var(--color-white);
}

/* 横棒・縦棒の範囲。白い縁で 1 単位広げ、帯との境目に隙間が出ないようにする */
.opening__mask-bars {
  fill: var(--color-white);
  stroke: var(--color-white);
  stroke-width: 2;
}

/* 渦の中心（viewBox 上の 687,464 の位置）。中心合わせは JS（xPercent / yPercent）で行う。
   図形の大きさはロゴの幅に対する割合で決まる */
.opening__anchor {
  display: block;
  position: absolute;
  top: 75.2%;
  left: 72.2%;
  width: 58%;
  aspect-ratio: 1;
}

/* ロゴに添える字間の広い社名 */
.opening__wordmark {
  margin-top: 28px;
  padding-left: 0.6em;
  color: var(--color-logo-ink);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.6em;
}

@media (min-width: 768px) {
  .opening__wordmark {
    font-size: 1.3rem;
  }
}

.opening__catch {
  margin-top: 48px;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-align: center;
}

@media (min-width: 768px) {
  .opening__catch {
    font-size: 1.8rem;
  }
}

/* 一文字ずつ分割する演出の影響で禁則処理が効かないため、意味のまとまりごとに折り返す */
.opening__catch-phrase {
  display: inline-block;
}

.opening__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  color: var(--color-sub);
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  transform: translateX(-50%);
}

/* ==========================================================================
   02 思い
   ========================================================================== */
.philosophy {
  color: var(--color-white);
}

/* --- 見出し（Unsung → AndSung） --- */
.philosophy__hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 1160px;
  height: 100svh;
  margin-inline: auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .philosophy__hero {
    padding: 0 40px;
  }
}

.philosophy__label {
  margin-bottom: 24px;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.philosophy__title {
  display: grid;
  gap: 16px;
}

/* スマホは「Unsung hero」が 1 行に収まる大きさにする */
.philosophy__word {
  display: flex;
  font-family: var(--font-en);
  font-size: 5.6rem;
  font-weight: 500;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .philosophy__word {
    font-size: 14rem;
  }
}

/* 切り替わる前後の文字を同じ場所に重ねる。
   前後で文字幅が違うため、JS で入れ物の幅を補間する。列幅を入れ物の幅に合わせ、はみ出した文字は切り抜く。
   文字は列いっぱいに伸ばさず（justify-items）、JS が文字本来の幅を測れるようにする */
.philosophy__swap {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  overflow: hidden;
}

/* 「Un」「And」は右寄せにして「sung」に寄せる */
.philosophy__swap--prefix {
  justify-items: end;
}

.philosophy__before,
.philosophy__after {
  grid-area: 1 / 1;
}

.philosophy__before {
  color: var(--color-sub);
}

.philosophy__after {
  color: var(--color-white);
}

.philosophy__rest {
  color: var(--color-sub);
}

.philosophy__note {
  display: inline-grid;
  overflow: hidden;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
}

@media (min-width: 768px) {
  .philosophy__note {
    font-size: 1.8rem;
  }
}

/* 図形の目印。Unsung → AndSung に合わせて JS が scale で小→大に育てる（大きさは最終サイズで指定）。
   スマホは見出しと重ならないよう下寄せ、PC は上下中央に置く */
.philosophy__hero-anchor {
  display: block;
  position: absolute;
  right: 12%;
  bottom: 12%;
  width: 140px;
  aspect-ratio: 1;
}

@media (min-width: 1080px) {
  .philosophy__hero-anchor {
    top: 0;
    right: 6%;
    bottom: 0;
    width: 360px;
    height: 360px;
    margin-block: auto;
  }
}

/* --- 本文と縦の並走レーン --- */
.philosophy__inner {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 16px;
  max-width: 1160px;
  margin-inline: auto;
  padding: 80px 20px 200px;
}

@media (min-width: 1080px) {
  .philosophy__inner {
    grid-template-columns: 1fr 260px;
    gap: 80px;
    padding: 120px 40px 280px;
  }
}

.philosophy__body {
  display: grid;
  align-content: start;
  gap: 64px;
}

@media (min-width: 1080px) {
  .philosophy__body {
    gap: 120px;
  }
}

/* 一文字ずつ分割する演出の影響で禁則処理が効かないため、スマホでも 1 行目が収まる大きさにする */
.philosophy__lead {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .philosophy__lead {
    font-size: 4.8rem;
  }
}

.philosophy__text {
  display: grid;
  gap: 24px;
  max-width: 600px;
}

.philosophy__services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.philosophy__service {
  padding: 4px 16px;
  border: 1px solid var(--color-line-inverse);
  border-radius: 100px;
  font-size: 1.3rem;
}

.philosophy__lane {
  position: relative;
}

/* 凡例は PC のみ。スマホはレーンが細いため出さない */
.philosophy__legend {
  display: none;
}

/* レーンの上に出し、線と重ならないようにする */
@media (min-width: 1080px) {
  .philosophy__legend {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    margin-bottom: 24px;
    color: var(--color-sub);
    font-family: var(--font-en);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
  }
}

.philosophy__legend-item::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  content: '';
}

.philosophy__legend-item--self::before {
  background: var(--color-accent);
}

.philosophy__legend-item--client::before {
  background: var(--color-client);
}

/* 図形の目印。同じ高さのまま、スクロールに合わせて一緒に下る */
.philosophy__runner {
  display: block;
  position: absolute;
  top: 0;
  width: 32px;
  aspect-ratio: 1;
}

@media (min-width: 1080px) {
  .philosophy__runner {
    width: 110px;
  }
}

.philosophy__runner--self {
  left: 25%;
}

.philosophy__runner--client {
  left: 75%;
}

/* ==========================================================================
   03 作品
   ========================================================================== */
/* 図形の目印が右にはみ出しても横スクロールが出ないようにする */
.works {
  padding: 160px 0 80px;
  overflow-x: clip;
}

.works__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 20px 40px;
  border-bottom: 1px solid var(--color-line);
}

@media (min-width: 768px) {
  .works__head {
    padding: 0 40px 40px;
  }
}

.works__title {
  font-family: var(--font-en);
  font-size: 5.6rem;
  font-weight: 300;
  line-height: 1;
}

@media (min-width: 768px) {
  .works__title {
    font-size: 9.6rem;
  }
}

.works__count {
  color: var(--color-sub);
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.works__item {
  display: grid;
  align-content: center;
  gap: 24px;
  position: relative;
  max-width: 1280px;
  min-height: 100svh;
  margin-inline: auto;
  padding: 120px 20px;
}

@media (min-width: 1080px) {
  .works__item {
    grid-template-columns: 1.6fr 1fr;
    align-items: center;
    gap: 64px;
    padding: 120px 40px;
  }
}

.works__image {
  overflow: hidden;
  border-radius: 8px;
}

.works__image img {
  width: 100%;
  height: auto;
}

.works__num {
  margin-bottom: 8px;
  color: var(--color-sub);
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.works__name {
  margin-bottom: 16px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .works__name {
    font-size: 3.2rem;
  }
}

.works__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.works__tag {
  padding: 2px 12px;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  font-size: 1.2rem;
}

.works__link {
  display: inline-block;
  padding: 12px 32px;
  border: 1px solid var(--color-ink);
  border-radius: 100px;
  font-size: 1.4rem;
  transition: background 0.3s, color 0.3s;
}

@media (any-hover: hover) {
  .works__link:hover,
  .works__link:focus-visible {
    background: var(--color-ink);
    color: var(--color-white);
  }
}

/* 図形の目印。スマホは「サイトを見る」ボタンの右横、PC はテキストの右側 */
.works__anchor {
  display: block;
  position: absolute;
  right: 24px;
  bottom: 110px;
  width: 96px;
  aspect-ratio: 1;
}

@media (min-width: 1080px) {
  .works__anchor {
    top: 50%;
    right: 0;
    bottom: auto;
    width: 200px;
    transform: translate(10%, -50%);
  }
}

/* ==========================================================================
   04 お問い合わせ
   ========================================================================== */
.contact {
  color: var(--color-white);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100svh;
  padding: 160px 20px;
  text-align: center;
}

.contact__label {
  margin-bottom: 24px;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.contact__title {
  margin-bottom: 24px;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .contact__title {
    font-size: 5.6rem;
  }
}

/* 一文字ずつ分割する演出の影響で禁則処理が効かないため、意味のまとまりごとに折り返す */
.contact__title-phrase {
  display: inline-block;
}

/* 背景動画の上でも読めるよう、白を少し落とした色にする */
.contact__text {
  margin-bottom: 48px;
  color: var(--color-text-on-video);
}

.contact__button {
  display: inline-block;
  padding: 20px 64px;
  background: var(--color-accent);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 700;
  transition: background 0.3s, color 0.3s;
}

@media (any-hover: hover) {
  .contact__button:hover,
  .contact__button:focus-visible {
    background: var(--color-white);
    color: var(--color-ink);
  }
}

.contact__anchor {
  display: block;
  width: 120px;
  margin-top: 64px;
  aspect-ratio: 1;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
  padding: 24px 20px;
  color: var(--color-sub);
  font-family: var(--font-en);
  font-size: 1.2rem;
  text-align: center;
}