/* デバック用 */
/* * { outline: 1px solid red; } */

/* Noto Sans（欧文）+ Noto Sans JP（和文）— 各ページで stylesheet.css を読み込めば適用 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap");

/* =============================================================================
   デザイントークン（CSS変数）― 色・フォント・シャドウの一元管理
   -----------------------------------------------------------------------------
   変更は :root の変数値のみ編集する。個別ルールへの直接 HEX / 生数値記述は禁止。

   【フォントファミリー】Noto Sans（欧文）→ Noto Sans JP（和字）。不足グリフは順にフォールバック。

   【フォントサイズ階層】ジャンプ率は意図的に大きく設定。段階を潰さないこと。
   - Display-xl / -lg / base … index ホバー見出し（56 / 42 / 36px）
   - H1 … 作品名・主見出し（20px）
   - H2 … 中見出し（18px）
   - Menu … ハンバーガーメニューリンク（17px）
   - Body / Small … 欧文本文・補足（14px）
   - Body-JP / Caption … 和文本文・フッター（12px）

   【フォントウェイト】body は可変フォント向け 120（意図的超細字）。
   - base: 120  display: 320  regular: 400  mid: 500

   【行間・字間】和文 1.78 / 0.04em。欧文 1.55。

   【カラーパレット】--color-* を編集。
   【シャドウ】現在未使用。将来の拡張用。
   ============================================================================= */
:root {
  /* フォントファミリー（日英とも Noto Sans 系。欧文→和文の順で混植） */
  --font-sans-latin: "Noto Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans-jp:    "Noto Sans JP", "Noto Sans", sans-serif;
  --font-family-body: "Noto Sans", "Noto Sans JP", sans-serif;

  /* フォントサイズ（ジャンプ率維持） */

  --font-size-body:       13px;  /* 欧文本文基準!!!!!!!!!!!!!!!!!!!!!!!!! */
  --font-size-body-jp:    12px;  /* 和文本文 */
  --font-size-project-copy-ja: var(--font-size-body-jp); /* project-copy 内 lang=ja のみ。ここだけ変えて微調整可 */
  --font-size-menu:       17px;  /* ハンバーガーメニューリンク */
  --font-size-h2:         18px;  /* 中見出し */
  --font-size-h1:         20px;  /* 主見出し */
  --font-size-display:    36px;  /* ディスプレイ基準 */
  --font-size-display-lg: 30px; /* カタカタ数字 */
  --font-size-display-xl: 46px; /* カタカタ文字 */

  /* フォントウェイト */
  --font-weight-base:    340;  /* body 英語 */
  --font-weight-display: 320;  /* ホバーテキスト・和文 */
  --font-weight-project-copy-ja: 330px; /* project-copy 内 lang=ja の太さ。ここだけ変えて微調整可 */
  --font-weight-regular: 300;  /* プロジェクトタイトル等 */
  /* --font-weight-mid:     500;  中見出し・メニュー */

  /* 行間・字間 */
  --leading-en:  1.5;
  --leading-jp:  1.6;
  --tracking-jp: 0.02em;

  /* 段落余白 */
  --space-paragraph-y: 8px;

  /* カラーパレット */
  --color-bg:               #ffffff;                /* ページ背景 */
  --color-text:             #121212;                /* プライマリテキスト */
  --color-text-sub:         #333333;                /* サブテキスト（中見出し等） */
  --color-text-muted:       #666666;                /* ミュートテキスト（説明・補足） */
  --color-text-faint:       #a0a0a0;                /* フェイントテキスト（フッター等） */
  --color-text-disabled:    #999999;                /* 無効テキスト */
  --color-text-inv:         #f5f5f5;                /* 暗背景上の白系テキスト */
  --color-accent:           #ff3c00;                /* アクセント・ホバー強調 */
  --color-link:             #4a6fa5;                /* リンク */
  --color-border:           #d3d3d3;                /* 区切り線・ボーダー */
  --color-surface-ui:       #e8e8e8;                /* UIボタン等の表面 */
  --color-surface-ui-hover: #d0d0d0;                /* UIボタンホバー */
  --color-overlay:          rgba(18, 18, 18, 0.96); /* メニューオーバーレイ */

  /* シャドウ（現在未使用） */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.16);
}


/* ===== RESET ===== */

html {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  font-size: 16px;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: var(--color-bg); /* PC時はbodyが中央1140pxのため左右余白部分の背景 */
  scrollbar-gutter: stable;
}

body {
  cursor: url('images/icon.png'), auto;
  overflow-x: hidden;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-base);
  font-size: var(--font-size-body);
  line-height: var(--leading-en);
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* マウスアピアランス：追従する円（現在オフ）
.mouse-appearance {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(200, 200, 200, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity 0.2s ease, width 0.15s ease, height 0.15s ease;
  opacity: 0;
}
.mouse-appearance.is-pressed { width: 26px; height: 26px; }
body.has-mouse-appearance { cursor: none; }
body.has-mouse-appearance a,
body.has-mouse-appearance button,
body.has-mouse-appearance .nav-button,
body.has-mouse-appearance .image-link { cursor: none; }
*/


/* ===== LAYOUT — PC max-width（1140px 中央寄せ） ===== */

@media (min-width: 1141px) {
  body {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .header {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .image-hover-text {
    left: auto;
    right: auto;
  }
}


/* ===== NAVIGATION ===== */

.header {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 22px;
  padding-right: 22px;
  margin: 0;
  gap: 0;
}

.nav-links {
  display: flex;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.nav-button {
  font-size: var(--font-size-body);
  color: var(--color-text);
  text-decoration: none;
  margin: 0;
  cursor: cell;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-links .nav-button {
  text-align: left;
  padding: 0;
}

.nav-button:hover {
  color: var(--color-accent);
  opacity: 0.85;
}


/* ===== INDEX — レイアウトグリッド ===== */

main {
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

#content-section {
  width: 100%;
  box-sizing: border-box;
  padding-top: 20vh;
  padding-bottom: 0;
  padding-left: 22px;
  padding-right: 22px;
  margin-bottom: 200px;
  /* index: script.js が --scroll-scale / --scroll-rotate を更新 */
  --scroll-rotate: 0deg;
}

/* 左4/12テキスト、中3/12空白、右5/12画像 */
.content-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  padding-bottom: 120px;
  align-items: start;
  min-height: calc(100vh - 180px - 20px);
  /* index: 右カラムの rotateY と組み合わせて奥行き感 */
  perspective: 1500px;
  perspective-origin: 78% 28%;
}

.content-works {
  grid-column: 3;
  align-self: start;
  height: fit-content;
  min-height: 100vh;
  transform: rotateY(var(--scroll-rotate, 0deg));
  transform-origin: right center;
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .content-grid {
    perspective: none;
  }

  .content-works {
    transform: none !important;
    will-change: auto;
    backface-visibility: visible;
  }
}

.content-text {
  grid-column: 1;
  align-self: start;
}


/* ===== INDEX — 画像グリッド ===== */

.image-grid {
  
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(8px * var(--scroll-scale, 1));
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  position: sticky;
  top: calc(2vh + 60px);
  align-self: start;
  height: fit-content;
  will-change: transform;
}

/* list-style + animation を 1 ルールに統合 */
.image-grid li {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: imageFadeInFromTop 0.7s ease-out both;
}

/* 画像を順番に遅らせて表示 */
.image-grid li:nth-child(1)  { animation-delay: 0.05s; }
.image-grid li:nth-child(2)  { animation-delay: 0.1s; }
.image-grid li:nth-child(3)  { animation-delay: 0.15s; }
.image-grid li:nth-child(4)  { animation-delay: 0.2s; }
.image-grid li:nth-child(5)  { animation-delay: 0.25s; }
.image-grid li:nth-child(6)  { animation-delay: 0.3s; }
.image-grid li:nth-child(7)  { animation-delay: 0.35s; }
.image-grid li:nth-child(8)  { animation-delay: 0.4s; }
.image-grid li:nth-child(9)  { animation-delay: 0.45s; }
.image-grid li:nth-child(10) { animation-delay: 0.5s; }
.image-grid li:nth-child(11) { animation-delay: 0.55s; }
.image-grid li:nth-child(12) { animation-delay: 0.6s; }
.image-grid li:nth-child(13) { animation-delay: 0.65s; }
.image-grid li:nth-child(14) { animation-delay: 0.7s; }

.image-grid .image-link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: cell;
  position: relative;
}

.image-grid .image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.2s ease-out, opacity 0.35s ease;
  opacity: 0.4;
  transform: scale(var(--scroll-scale, 1));
}

/* フォーカス画像の opacity 段階 */
.image-grid .image-link.image-link-sat-100 img { opacity: 1; }
.image-grid .image-link.image-link-sat-65  img { opacity: 0.6; }
.image-grid .image-link.image-link-sat-40  img { opacity: 0.4; }

.image-grid .image-link:hover img {
  transform: scale(calc(var(--scroll-scale, 1) * 1.06));
}

@keyframes imageFadeInFromTop {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===== INDEX — ホバーテキスト ===== */

/* 高さ（Y）だけ fixed で固定、横（X）は auto でレイアウトに従う */
.image-hover-text {
  position: fixed;
  top: 15%;
  left: auto;
  right: auto;
  width: auto;
  height: 40vh;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  color: var(--color-text);
  text-align: left;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  z-index: 100;
  white-space: normal;
}

.image-hover-text .hover-title {
  font-size: var(--font-size-display-xl);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.image-hover-text .hover-year {
  font-size: var(--font-size-display-lg);
  margin: 0;
  padding: 0;
  margin-top: 4px;
  white-space: nowrap;
}

.image-hover-text .hover-year .year-arrow {
  cursor: pointer;
  user-select: none;
}

.image-hover-text .hover-description {
  font-size: var(--font-size-small);
  margin: 0;
  padding: 0;
  line-height: var(--leading-en);
  color: var(--color-text-muted);
  white-space: nowrap;
}



/* ===== SHARED — 画像リスト ===== */

/* .image-list と .image-list2 はマージン下辺のみ異なる（20px vs 80px） */
.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  width: 80%;
  gap: 10px;
  margin: 20px auto 20px !important;
}

.image-list li {
  width: calc(33.333% - 10px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

.image-list img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-list2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  width: 80%;
  gap: 10px;
  margin: 20px auto 80px !important;
}

.image-list2 li {
  width: calc(33.333% - 10px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

.image-list2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== TYPOGRAPHY — タイトル・本文・日本語テキスト ===== */

.title {
  font-size: var(--font-size-body);
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.title p {
  margin: 0;
  padding: 0;
}

.about-text {
  font-size: var(--font-size-small);
  line-height: var(--leading-en);
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 日本語本文：詳細度を .project-details p より上げて body-jp スタイルを維持 */
.japanese-text,
.project-text .project-details-japanese p,
.project-details .project-details-japanese p,
.project-details p.japanese-text {
  font-size: var(--font-size-body-jp);
  font-weight: var(--font-weight-display);
  line-height: var(--leading-jp);
  letter-spacing: var(--tracking-jp);
}

.project-text .project-details-japanese p,
.project-details .project-details-japanese p,
.project-details p.japanese-text {
  margin: var(--space-paragraph-y) 0;
}

/* サブページ主見出し（作品名）— H1 階層。ジャンプ率維持 */
.project-text .title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-en);
  margin-bottom: 12px;
  margin-top: 0;
}

.project-text p,
.project-details p {
  margin: var(--space-paragraph-y) 0;
  line-height: var(--leading-en);
  font-size: var(--font-size-body);
  color: var(--color-text);
}

/* メタ（project-meta）＋ project-copy の欧文：同一タイポ。和文段落は下で上書き */
.project-details .project-meta p,
.project-details .project-copy p[lang="en"] {
  margin: var(--space-paragraph-y) 0;
  line-height: var(--leading-en);
  font-size: var(--font-size-body);
  color: var(--color-text);
}

/* project-copy 内の日本語だけ少し小さく（視覚補正）。サイズ・太さは :root の --font-size-project-copy-ja / --font-weight-project-copy-ja */
.project-details .project-copy p[lang="ja"] {
  margin: var(--space-paragraph-y) 0;
  font-size: var(--font-size-project-copy-ja);
  line-height: var(--leading-jp);
  letter-spacing: var(--tracking-jp);
  font-weight: var(--font-weight-project-copy-ja);
  color: var(--color-text);
}

.project-details .project-copy {
  margin: 0;
  padding: 0;
}

.project-details .project-meta {
  margin: 0;
  padding: 0;
}

/* H2 階層：中見出し */
.project-details .about-mid-title {
  margin: 22px 0 10px;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-mid);
  line-height: var(--leading-en);
  color: var(--color-text-sub);
}

.project-details a,
.project-text a,
.link-with-arrow {
  color: var(--color-link);
  text-decoration: none;
}

.project-details a:hover,
.project-text a:hover,
.link-with-arrow:hover {
  text-decoration: underline;
}

.link-disabled {
  color: var(--color-text-disabled);
  cursor: default;
  pointer-events: none;
}


/* ===== PROJECT — メタ情報・区切り線 ===== */

.project-details .achievements {
  margin: var(--space-paragraph-y) 0;
  line-height: var(--leading-en);
  font-size: var(--font-size-small);
}

.project-details .achievements:empty,
.project-details .achievements[style*="display: none"] {
  display: none !important;
}

/* メタ情報上部の区切り線（全サブページ共通） */
.project-top-divider {
  width: 100%;
  margin: 50px 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.aboutme-page .project-top-divider {
  margin-top: 30px;
}

/* メタ情報とテキストの間の区切り線 */
.project-details .project-bottom-divider {
  width: 100%;
  margin: 14px 0 10px;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.project-details .detailed-description {
  margin-top: 12px;
  line-height: var(--leading-en);
  font-size: var(--font-size-small);
}

.project-details .detailed-description:empty,
.project-details .detailed-description[style*="display: none"] {
  display: none !important;
}

.project-details .short-description:empty {
  display: none;
}

.project-details .project-details-japanese {
  margin-bottom: 14px;
}


/* ===== FOOTER ===== */

.footer {
  text-align: right;
  /* text-decoration は子へ伝播するため、ここで none にすると
     .footer 内の a への underline 等が効かなくなる。リンクは .footer a で個別指定。 */
  display: flex;
  margin: 0;
  margin-top: auto;
  margin-bottom: 20px;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 0;
  box-sizing: border-box;
  font-size: var(--font-size-caption);
  color: var(--color-text-faint);
}

.footer p {
  margin: 0;
  margin-bottom: 8px;
  margin-right: 10px;
  /* カンマ区切りは無効 → スペース区切りのショートハンド */
  padding: 0 0 100px 0;
  color: var(--color-text-faint);
}

/* フッターリンク：親に text-decoration: none があると子の装飾が打ち消されるため a で個別指定 */
.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-text-muted);
  /* text-decoration: underline; */
  text-underline-offset: 2px;
}


/* ===== HAMBURGER MENU ===== */

.hamburger-menu {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  cursor: pointer;
  z-index: 2000;
}

.hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: var(--color-text);
  border-radius: 5px;
}

/* メニューオーバーレイ（opacity で開閉制御） */
.menu-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay);
  backdrop-filter: blur(12px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.menu-content.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0;
}

.menu-content .menu-link {
  padding: 4px 20px;
  text-decoration: none;
  color: var(--color-text-inv);
  font-size: var(--font-size-menu);
  margin-bottom: 14px;
  font-weight: var(--font-weight-mid);
  cursor: cell;
  position: relative;
  transition: opacity 0.25s ease, padding-left 0.25s ease;
}

.menu-content .menu-link:hover {
  opacity: 0.9;
  padding-left: 28px;
}


/* ===== RESPONSIVE ===== */

/* 900px：image-list 3列 → 2列 */
@media (max-width: 900px) {
  .image-list li {
    width: calc(50% - 10px);
  }
}

/* 768px + iOS 対応（max-device-width 併記）：ハンバーガーメニュー表示 */
@media (max-width: 768px), (max-device-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-left: 22px;
    padding-right: 22px;
  }

  .hamburger-menu { display: flex; }

  /* ナビは左にサイト名のみ（about me はハンバーガー内） */
  .nav-links {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
  }

  .nav-links .nav-button:not(:first-child) {
    display: none;
  }

  /* コンテンツを縦1列に：タイトルを上、画像を下 */
  .content-grid {
    grid-template-columns: 1fr;
    perspective: none;
  }

  .content-text {
    grid-column: 1;
    position: relative;
    z-index: 50;
    background: var(--color-bg);
    order: -1;
  }

  .content-works {
    grid-column: 1;
    position: static;
    top: auto;
    order: 1;
    transform: none;
    will-change: auto;
    backface-visibility: visible;
  }

  /* タイトル・西暦をスクロールに追従してスティッキー固定 */
  .content-text.is-stuck {
    position: fixed !important;
    top: 0 !important;
    left: 22px;
    right: 22px;
    width: auto !important;
    padding-top: 10px;
    background: var(--color-bg);
  }

  .image-grid {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
    position: static;
    top: auto;
  }

  /* モバイルでホバーテキストを static で表示 */
  .image-hover-text {
    display: flex !important;
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 12px;
  }

  .image-hover-text .hover-description { display: none; }

  .image-hover-text .hover-title,
  .image-hover-text .hover-year {
    font-size: 28px;
  }

  .image-hover-text .hover-year { margin-top: 2px; }

  .image-list { margin-top: 20px; }

  .image-list li {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1140px;
  }

  .image-list2 li { width: 100%; }

  .footer {
    text-align: right;
    margin: 10px 0;
    font-size: var(--font-size-caption);
    color: var(--color-text-faint);
  }
}

/* 640px：body/コンテンツ余白リセット・画像ギャップ縮小
 * 768px と重複するルールは 768px ブロックに集約済み */
@media (max-width: 640px) {
  body             { padding-bottom: 0; }
  #content-section { margin-bottom: 0; }
  .image-grid      { gap: calc(6px * var(--scroll-scale, 1)); }
  .image-list      { gap: 20px; }
  .image-list2     { gap: 20px; }
}


/* ===== OPENING ANIMATION ===== */

.opening-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  z-index: 9999;
  animation: fadeOut 3s ease-out forwards;
  overflow: hidden;
}

.opening-animation .opening-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
  animation: focusIn 3s ease-out forwards;
}

@keyframes focusIn {
  0%   { filter: blur(20px); transform: scale(1.1); }
  100% { filter: blur(0px);  transform: scale(1); }
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; display: none; pointer-events: none; }
}