/*
Theme Name: The Sense Table
Theme URI: https://thesensetable.forwardcreation.jp/
Author: Forward Creation
Description: THE SENSE TABLE 公式サイト用オリジナルテーマ。Figmaデザインに準拠したフルスクラッチテーマ。
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: sensetable
*/

/* ==========================================================================
   Design Tokens
   Figma「THE SENSE TABLE」ファイルの実測値から抽出。
   Figma Variables（get_variable_defs）には値が登録されていなかったため、
   各フレームで実際に使われているhex値・フォント・余白から独自にトークン化した。
   ========================================================================== */
:root {
  /* Colors - grayscale */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Colors - brand */
  --color-ink: #111111;       /* 主要な見出し・テキストの黒 */
  --color-ink-soft: #888888;  /* Worksタブ非選択・キャプション等の淡いグレー */
  --color-nav-pill: #f5f4f2;  /* ヘッダーナビの丸ピル背景 */
  --color-warm-bg: #faf9f6;   /* Contactページの背景 */

  /* Fonts */
  --font-serif-en: 'Cormorant Garamond', serif;
  --font-serif-jp: 'Noto Serif JP', serif;
  --font-sans-jp: 'Noto Sans JP', sans-serif;
  --font-sans-en: 'Instrument Sans', sans-serif;

  /* Spacing scale (px, Figmaの実測値) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --space-30: 120px;
  --space-40: 160px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1440px;
  --container-pad: var(--space-20);
}

@media (max-width: 767px) {
  :root {
    --container-pad: var(--space-6);
  }
}

/* ==========================================================================
   Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans-jp);
  font-size: 16px;
  line-height: 1.6;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.tst-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==========================================================================
   Site Header (共通ヘッダー: ロゴ + ピルナビ + Contactボタン)
   front-page.php のヒーロー内ナビは別レイアウトなので header.php では出し分ける

   下層ページでは画面上部に固定し、下スクロールで隠れ・上スクロールで
   再表示される仕様(positive.co.jp/about/ を参考)。JS(main.js)が
   スクロール方向に応じて .is-hidden を付け外しする。
   ========================================================================== */
.site-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: transform 320ms ease;
}
.site-header-wrap.is-hidden { transform: translateY(-100%); }
/* ヘッダーがfixedになる分、本文が隠れないよう上余白を確保する。
   TOPページ(front-page.php)は .site-header-wrap 自体を出力しないため、
   :has()でその存在を条件にする(bodyクラスに "front-page" が付かない
   環境があり、:not(.front-page) だとTOPページにも余白が付いてしまっていた)。
   --site-header-height はJS(main.js)がヘッダーの実測高さを都度セットする。 */
body:has(.site-header-wrap) { padding-top: var(--site-header-height, 96px); }
@media (max-width: 900px) {
  body:has(.site-header-wrap) { padding-top: var(--site-header-height, 72px); }
}
.site-header {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  padding: var(--space-6) var(--space-20);
  position: relative;
  z-index: 40;
}
.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img { display: block; width: 208px; height: auto; }
.site-header__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-nav-pill);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
}
.site-header__nav a {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans-en);
  font-size: 13px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #1a1a1a;
}
.site-header__nav a.is-current,
.site-header__nav a:hover {
  background: var(--color-white);
  color: var(--color-gray-500);
  font-weight: 600;
}
.site-header__contact {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: 1px solid #1a1a1a;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #1a1a1a;
}
.site-header__menu-toggle {
  display: none;
}

/* ハンバーガーアイコン(Figma: 20px/14px の2本線・gap 6px・右揃え) */
.menu-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 24px;
}
.menu-icon span {
  display: block;
  height: 1.5px;
  background: #1a1a1a;
}
.menu-icon span:first-child { width: 20px; }
.menu-icon span:last-child { width: 14px; }

@media (max-width: 900px) {
  /* モバイルヘッダー(Figma 1389:372): 高さ72 / 左右24 / 下線 / ロゴ幅112 */
  .site-header {
    height: 72px;
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
  }
  .site-header__logo img { width: 112px; }
  .site-header__nav { display: none; }
  .site-header__contact { display: none; }
  .site-header__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0 10px 0 0;
  }
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-gray-200);
  font-family: var(--font-sans-en);
  font-size: 14px;
  letter-spacing: 1px;
}

/* TOP: ヒーローが独自ナビを持つため、ヘッダーはPCでは出さない。
   SPではヒーローを過ぎてから上スクロールで表示する(main.js)。余白はヒーローが画面上端から始まるため不要。 */
body:has(.site-header-wrap--front) { padding-top: 0; }
@media (min-width: 901px) {
  .site-header-wrap--front { display: none; }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-20);
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-ink-soft);
}
.breadcrumb a { color: var(--color-ink-soft); }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb .is-current { color: var(--color-ink-soft); }

@media (max-width: 767px) {
  .breadcrumb { padding: var(--space-4) var(--space-6); font-size: 11px; }
}

/* ==========================================================================
   CTA バンド (cta-white-soft-gray) - 全ページ共通、フッター手前に配置
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: #000 url('assets/images/photo-cta-bg.jpg') center/cover no-repeat;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: 560px;
  gap: var(--space-20);
}
/* mesh-grid-overlay: 左上の細かいグリッド線 + 右端/下端の縁取り線(デスクトップのみ) */
@media (min-width: 901px) {
  .cta-band__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(to right, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  }
  .cta-band__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}
.cta-band__title {
  flex: 0 0 auto;
  padding-left: var(--space-30);
  font-family: var(--font-serif-en);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.67);
}
.cta-band__card {
  flex: 0 0 auto;
  width: 651px;
  max-width: 100%;
  margin-right: var(--space-20);
  backdrop-filter: blur(12px);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.cta-band__card p {
  color: var(--color-white);
  font-size: 14px;
  line-height: 2.2;
}
.cta-band__button {
  display: inline-flex;
  line-height: normal;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans-en);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15);
}
.cta-band__button img { width: 14px; height: 10px; }

@media (max-width: 900px) {
  /* モバイルCTA(Figma 1326:279): 高さ480・全体padding24・要素間32・カード内gap24 */
  .cta-band::before { background: rgba(17, 17, 17, 0.72); }
  .cta-band__inner {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-8);
    min-height: 480px;
    padding: var(--space-6);
    text-align: center;
  }
  .cta-band__title { width: 100%; padding-left: 0; font-size: 36px; letter-spacing: 6px; text-align: center; }
  .cta-band__card {
    width: 100%;
    margin-right: 0;
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
  }
  .cta-band__card p { font-size: 13px; line-height: 1.8; }
  .cta-band__card br { display: none; }
  .cta-band__button {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    border: 0;
    box-shadow: none;
    font-size: 12px;
  }
  .cta-band__button img { width: 12px; height: 10px; }
}

/* ==========================================================================
   Site Footer
   ========================================================================== */
.site-footer {
  background: var(--color-white);
  padding: var(--space-25) var(--space-20) var(--space-14);
}
.site-footer__logo { display: flex; justify-content: center; padding-bottom: var(--space-14); }
.site-footer__logo img { width: 480px; max-width: 100%; height: auto; }
.site-footer__divider { border: none; border-top: 1px solid var(--color-gray-200); margin: 0; }
.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-10) 0 var(--space-40);
}
.site-footer__nav-row1 {
  display: flex;
  gap: var(--space-8);
  font-family: var(--font-sans-en);
  font-size: 14px;
  color: var(--color-gray-700);
}
.site-footer__nav-row2 {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  font-size: 14px;
  color: var(--color-gray-700);
}
.site-footer__nav-row2 a { display: inline-flex; align-items: center; gap: var(--space-1); }
.site-footer__nav-row2 img { width: 10px; height: 10px; }
.site-footer__copyright {
  display: flex;
  justify-content: center;
  padding-top: var(--space-10);
  font-family: var(--font-sans-en);
  font-size: 13px;
  color: var(--color-gray-700);
  text-align: center;
}

@media (max-width: 767px) {
  .site-footer { padding: var(--space-16) var(--space-6) var(--space-8); }
  .site-footer__logo { padding-bottom: var(--space-8); }
  .site-footer__logo img { width: 280px; }
  .site-footer__nav { padding: var(--space-6) 0; gap: var(--space-4); }
  .site-footer__nav-row1 { flex-wrap: wrap; justify-content: center; gap: var(--space-6); font-size: 12px; }
  .site-footer__nav-row2 { flex-direction: column; gap: var(--space-4); font-size: 12px; }
}

/* ==========================================================================
   共通コンポーネント: ページヒーロー(works-hero) 大タイトルの重なり演出

   Figma実データでは、この位置の写真は不透明な#f9fafbの板で完全に
   覆われており見えない(Works一覧・Contactとも同一パターン)。
   以前は誤ってこの板をopacity:0にしていたため写真が見えてしまっていた。
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--color-white);
  height: 374px;
  overflow: hidden;
}
.page-hero__photo {
  position: absolute;
  left: 0;
  top: 261px;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background: var(--color-gray-50);
}
.page-hero__title {
  position: absolute;
  left: 0;
  top: 181px;
  width: 100%;
  text-align: center;
  font-family: var(--font-serif-en);
  font-weight: 400;
  font-size: 112px;
  line-height: 1.1;
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .page-hero { height: 220px; }
  .page-hero__photo { top: 140px; height: 260px; }
  .page-hero__title { top: 90px; font-size: 56px; }
}

/* ==========================================================================
   Buttons (共通)
   ========================================================================== */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-ink);
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--color-ink);
}
.btn-outline img { width: 20px; height: 14px; }

/* ==========================================================================
   Works carousel teaser (共通コンポーネント: TOP / Brand Identity で使用)
   ========================================================================== */
.works-teaser { display: flex; flex-direction: column; gap: var(--space-14); padding-block: var(--space-30); }
.works-teaser__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); }
.works-teaser__heading { display: flex; flex-direction: column; gap: var(--space-3); }
.works-teaser__eyebrow { font-family: var(--font-serif-en); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: 3px; text-transform: uppercase; color: var(--color-gray-500); }
.works-teaser__label { font-size: 14px; font-weight: 300; line-height: 1.2; color: var(--color-ink); }
.works-teaser__desc { max-width: 480px; font-size: 14px; line-height: 1.6; color: var(--color-gray-500); }
.works-teaser__desc--wide { max-width: 600px; }

.works-teaser__carousel { display: flex; flex-direction: column; gap: var(--space-14); }
.works-teaser__stage { position: relative; height: 600px; overflow: hidden; }
.works-teaser__slide {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1200ms ease, visibility 0s linear 1200ms;
}
.works-teaser__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 1200ms ease;
}
.works-teaser__slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 6000ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.works-teaser__slide.is-active .works-teaser__slide-bg { transform: scale(1); }
.works-teaser__gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 100%); }
.works-teaser__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-10) var(--space-12) var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms ease 200ms, transform 900ms ease 200ms;
}
.works-teaser__slide.is-active .works-teaser__meta { opacity: 1; transform: translateY(0); }
.works-teaser__meta-eyebrow { font-family: var(--font-sans-en); font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--color-gray-500); }
.works-teaser__meta-title { font-size: 28px; color: var(--color-white); }
.works-teaser__tag { display: inline-flex; align-self: flex-start; padding: var(--space-2) var(--space-4); background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.27); font-family: var(--font-sans-en); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--color-white); }
.works-teaser__meta-desc { max-width: 640px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.8); }

.works-teaser__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; /* is-activeなスライド(z-index:1)より前面に出す */
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
}
.works-teaser__nav img { width: 32px; height: 27px; }
.works-teaser__nav--prev { left: 24px; transform: translateY(-50%) rotate(180deg); }
.works-teaser__nav--next { right: 24px; }

.works-teaser__footer { display: flex; align-items: center; justify-content: space-between; }
.works-teaser__dots { display: flex; align-items: center; gap: var(--space-3); }
.works-teaser__dots button {
  position: relative;
  display: block;
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-200);
  overflow: hidden;
  transition: width 400ms ease, background 400ms ease;
  padding: 0;
}
.works-teaser__dots button::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-gray-900);
  border-radius: inherit;
}
.works-teaser__dots button.is-active {
  width: 32px;
  background: var(--color-gray-200);
}
.works-teaser__dots button.is-active::after {
  animation: works-teaser-progress var(--works-teaser-duration, 5000ms) linear forwards;
}
.works-teaser__dots button.is-paused::after { animation-play-state: paused; }

@keyframes works-teaser-progress {
  from { width: 0%; }
  to { width: 100%; }
}

@media (max-width: 900px) {
  .works-teaser { padding: var(--space-10) var(--space-6); gap: var(--space-8); }
  .works-teaser__header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .works-teaser__eyebrow { font-size: 32px; }
  .works-teaser__stage { height: 520px; }
  .works-teaser__nav { width: 40px; height: 40px; }
  .works-teaser__nav img { width: 23px; height: 19px; }
  .works-teaser__meta-title { font-size: 22px; }
}

/* ==========================================================================
   Work card (共通コンポーネント: Works一覧 / 関連実績で使用)
   ========================================================================== */
.work-card { display: flex; flex-direction: column; gap: var(--space-4); }
.work-card__image { display: block; aspect-ratio: 624 / 468; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-gray-100); }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; }
.work-card__details { display: flex; flex-direction: column; gap: var(--space-2); }
.work-card__title { font-family: var(--font-serif-en); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--color-ink); }
.work-card__subtitle { font-family: var(--font-serif-en); font-size: 16px; line-height: 1.4; color: #666; }
.work-card__meta { font-family: var(--font-sans-en); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-ink-soft); }

/* ==========================================================================
   Utility
   ========================================================================== */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.section-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--color-gray-400);
}