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

/* html要素のリセット */
html {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background-color: #ffffff; /* PC時はbodyが中央1140pxのため、左右余白部分の背景 */
  scrollbar-gutter: stable; /* スクロールバー有無でヘッダーがずれないように */
}

/* ヘッダー全体のスタイル */
.header {
  /* background-color: #f8f8f8; */
  padding: 0;
  margin-bottom: 80px; /* ヘッダーの下に20pxの隙間 */
  /* border-bottom: 1px solid #ddd; */
  position: fixed; /* 画面上部に固定 */
  top: 0; /* 上部からの距離を0に設定 */
  left: 0; /* 左端からの距離を0に設定 */
  right: 0; /* 右端からの距離を0に設定 */
  width: 100%; /* ヘッダーの幅を画面全体に広げる */
  z-index: 1000; /* 他の要素の上に配置する */
}
/* ナビゲーションバー - 左：ブランド、右：リンク */
.navbar {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左：akeru.min、右：WORK / ABOUT ME */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 22px; /* 12pxから22pxに変更（+10px） */
  padding-right: 22px; /* 12pxから22pxに変更（+10px） */
  margin: 0;
  gap: 0;
}
/* 左：ブランド（akeru.min） */
.nav-brand {
  display: flex;
  grid-column: 1;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
/* 右：ナビリンク（WORK / ABOUT ME） */
.nav-links {
  display: flex;
  grid-column: 2;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  margin-right: 10px;
  padding: 0;
  width: 100%;
}

  
  
/* マウスアピアランス：追従する円（PCのみ・script.jsでbodyに.has-mouse-appearanceを付与）※コメントアウト
.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;
}
*/

/* 全体のフォント設定（背景白・オープニングアニメなし） */
body {
  cursor: url('images/icon.png'), auto;
  overflow-x: hidden; /* 横スクロールを無効にする */
  /* min-width: 400px; */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #121212;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.2; /* 行間を詰める */
}

/* PC（デスクトップ）：コンテンツ最大幅1140px、残りを左右均等マージンで中央配置 */
@media (min-width: 1141px) {
  body {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 固定ヘッダーも同じ幅で中央に */
  .header {
    width: 1140px;
    max-width: 100%;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  /* PC時も Y のみ固定、横は auto のまま */
  .image-hover-text {
    left: auto;
    right: auto;
  }
}

/* ヘッダーリンクのスタイル */
.nav-button {
  font-size: 16px;
  color: #121212;
  text-decoration: none;
  margin-right: 20px;
  margin-left: 0px;
  cursor: cell;
  position: relative;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-button:hover {
  color: #ff3c00;
  opacity: 0.85;
}
  

/* ブランド（akeru.min）のスタイル */
.nav-brand .nav-button {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  padding: 0 !important;
  margin: 0 !important;
}

/* メインコンテンツエリア */
main {
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
}

/* 写真コンテナ - ヘッダーと同じ左右マージン */
#content-section {
  width: 100%;
  box-sizing: border-box;
  /* padding-top: 140px; ヘッダーの下の余白 */
  padding-top: 20vh;
  padding-bottom: 0; /* padding-bottomを削除 */
  padding-left: 22px; /* 12pxから22pxに変更（+10px） */
  padding-right: 22px; /* 12pxから22pxに変更（+10px） */
  margin-bottom: 200px; /* 下のマージン */
}

/* コンテンツグリッド - 左4/12テキスト、8/12から画像（5/12） */
.content-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 5fr; /* 左4/12テキスト、4/12-7/12空白、7/12-12/12画像 */
  gap: 12px; /* 写真と文字間の距離 */
  /* margin-top: 20px; #content-sectionのpadding-top: 180pxの後、さらに20px下に配置 */
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  padding-bottom: 120px; /* 下部に120pxの余白を追加 */
  align-items: start; /* グリッドアイテムを上端に配置 */
  min-height: calc(100vh - 180px - 20px); /* スティッキーが機能するための最小高さ（画面高さ - padding-top - margin-top） */
}

.content-works {
  grid-column: 3; /* 7/12から - 画像（5/12） */
  align-self: start; /* 上端で固定 */
  height: fit-content; /* コンテンツの高さに合わせる */
  min-height: 100vh; /* スティッキーが機能するための最小高さを確保 */
}

.content-text {
  grid-column: 1; /* 左4/12 - テキスト */
  align-self: start; /* 上端で固定 */

}

/* 画像グリッド - 左2/3の1列 */
.image-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(8px * var(--scroll-scale, 1)); /* スクロール速度で画像サイズと同様に0.86〜1倍 */
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  position: sticky;
  top: calc(2vh + 60px); /* ヘッダーの高さ（padding-top: 2vh + ナビゲーションバーの高さ）を考慮 */
  align-self: start;
  height: fit-content;
  will-change: transform; /* パフォーマンス最適化 */
}

.image-grid li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.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; /* デフォルト：そのさらに上下は40% */
  transform: scale(var(--scroll-scale, 1)); /* index: スクロール速度で0.86〜1 */
}
/* タイトル・西暦を取得している画像：opacity 100% */
.image-grid .image-link.image-link-sat-100 img {
  opacity: 1;
}
/* その上下：60% */
.image-grid .image-link.image-link-sat-65 img {
  opacity: 0.6;
}
/* そのさらに上下：40% */
.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));
}

/* index 画像：ページ表示時に上からふわっと出現 */
@keyframes imageFadeInFromTop {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-grid li {
  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; }

/* 画像ホバー時のテキスト表示 - 高さ（Y）だけ絶対値で固定、横（X）は auto でレイアウトに従う */
.image-hover-text {
  position: fixed;
  top: 15%; /* 高さのみ絶対値 */
  left: auto;  /* 横は指定しない → static position（左列に揃う） */
  right: auto;
  width: auto;
  height: 40vh;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 320;
  color: #121212;
  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: 56px; /* 48pxから56pxに拡大 */
  font-weight: 320; /* font-weightを320に設定 */
  margin: 0;
  padding: 0;
  white-space: nowrap; /* 改行しない */
}

.image-hover-text .hover-year {
  font-size: 42px; /* 36pxから42pxに拡大 */
  font-weight: 320; /* font-weightを320に設定 */
  margin: 0;
  padding: 0;
  margin-top: 4px; /* タイトルとの間隔 */
  white-space: nowrap; /* 改行しない */
}

.image-hover-text .hover-year .year-arrow {
  cursor: pointer; /* クリック可能であることを示す */
  user-select: none; /* テキスト選択を無効化 */
}

/* 画面サイズに応じたタイトルと西暦のフォントサイズ調整 */
@media (max-width: 1200px) {
  .image-hover-text .hover-title {
    font-size: 46px; /* 56pxから46pxに縮小 */
  }
  .image-hover-text .hover-year {
    font-size: 35px; /* 42pxから35pxに縮小（比率維持） */
  }
}

@media (max-width: 900px) {
  .image-hover-text .hover-title {
    font-size: 38px; /* 46pxから38pxに縮小 */
  }
  .image-hover-text .hover-year {
    font-size: 28px; /* 35pxから28pxに縮小（比率維持） */
  }
}

.image-hover-text .hover-description {
  font-size: 13px; /* 英語テキストと同じサイズ */
  margin: 0;
  padding: 0;
  line-height: 1.3;
  color: #666666; /* 白背景用のグレー */
  white-space: nowrap; /* 改行しない */
}

/* 共通の画像リストスタイル */
.image-list {
  display: flex;
  flex-wrap: wrap; /* 折り返し */
  justify-content: space-between;
  list-style: none;
  padding: 0;
  width: 80%; /* 通常時は幅70% */
  gap: 10px; /* 画像間の隙間 */
  margin: 20px auto 20px !important;/* コンテンツからヘッダーまでの距離!!!!!!!!!!!!!!!!!!!!!!! */
}
.image-list li {
  width: calc(33.333% - 10px); /* 通常時は3列表示 */
  aspect-ratio: 2 / 3; /* 6:9のアスペクト比 */
  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%; /* 通常時は幅70% */
  gap: 10px; /* 画像間の隙間 */
  margin: 20px auto 80px !important;/* コンテンツからヘッダーまでの距離!!!!!!!!!!!!!!!!!!!!!!! */
}
.image-list2 li {
width: calc(33.333% - 10px); /* 通常時は3列表示 */
aspect-ratio: 2 / 3; /* 6:9のアスペクト比 */
overflow: hidden;
position: relative;
margin-bottom: 5px; /* 画像の下にスペースを追加 */
}
.image-list2 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.title {
  font-size: 16px;/* !!!!!!!!!!!!!!!!! */
  margin: 0;
  padding: 0;
  width: 100%; /* 画像グリッドと同じ幅に揃える */
  box-sizing: border-box;
}

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

.about-text {
  font-size: 12px;/* !!!!!!!!!!!!!!! */
  line-height: 1.5;/* 行間 */
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  width: 100%; /* 画像グリッドと同じ幅に揃える */
  box-sizing: border-box;
}

/* 日本語テキスト用のフォント */
.japanese-text {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "游ゴシック", "メイリオ", sans-serif;
  font-size: 11px; /* 11pxに変更 */
  font-weight: 320; /* font-weightを320に設定 */
  line-height: 1.6;
}
/* 共通フッタースタイル */
.footer {
  text-align: right; /* テキストを右揃え */
  margin: 0;
  margin-top: auto; /* フッターを下に押し下げる */
  margin-bottom: 20px; /* 下から20px */
  padding-left: 22px; /* 12pxから22pxに変更（+10px） */
  padding-right: 22px; /* 12pxから22pxに変更（+10px） */
  padding-bottom: 0;
  box-sizing: border-box;
  font-size: 12px; /* 10pxから+2px */
  color: #a0a0a0; /* 白ベースの薄いグレー */
}

.footer p {
  margin: 0;
  margin-bottom: 8px;
  padding: 0;
  color: #a0a0a0; /* 白ベースの薄いグレー */
}

/* ____________________________________________________________________________________ */

/* ハンバーガーメニュー */
.hamburger-menu {
  display: none; /* 初期状態は非表示 */
  position: fixed; /* 固定位置に配置 */
  top: 20px; /* 画面上部から20px下 */
  right: 20px; /* 画面右端から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: #121212;
    border-radius: 5px;
  }
  
/* ハンバーガーメニュー内のリンクのスタイル */
.menu-content {
  display: flex; /* 常にflexで配置（表示はopacityで制御） */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(12px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* 閉じる時：ふわっと消えてから visibility 解除 */
}

.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: #f5f5f5;
  font-size: 17px;
  margin-bottom: 14px;
  border-bottom: none;
  font-weight: 500;
  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;
}
  
/* ____________________________________________________________________________________ */

  /* レスポンシブデザイン */
  /* 画面幅が900px以下でハンバーガーメニュー表示 */
  
  @media (max-width: 900px) {
    .image-list {
        width: 80%; /* 画面幅が小さくなったら幅を90%に広げる */
      }
    .image-list li {
      width: calc(50% - 10px); /* 2列表示 */
    }
  
  }
  
  /* 640px + iOS対応のため768px / max-device-width も使用 */
  @media (max-width: 768px), (max-device-width: 768px) {
    .navbar {
      display: flex; /* レスポンシブ時はflexに戻す */
      justify-content: space-between;
      padding-left: 22px; /* 12pxから22pxに変更（+10px） */
      padding-right: 22px; /* 12pxから22pxに変更（+10px） */
    }
    
    .hamburger-menu {
      display: flex; /* 画面幅が小さいときに表示 */
    }
    .nav-links {
      display: none; /* 通常ナビゲーションは非表示（ハンバーガーで表示） */
    }
    .nav-brand {
      grid-column: auto;
      justify-content: flex-start;
      margin-right: 0;
      margin-left: 0;
      padding-left: 0;
      text-align: left;
      display: flex;
    }
    .nav-brand .nav-button {
      text-align: left;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* コンテンツグリッドを縦一列に・タイトルと西暦を上に表示 */
    .content-grid {
      grid-template-columns: 1fr; /* 1列表示 */
    }
    
    .content-text {
      grid-column: 1; /* すべて1列目に */
      position: relative; /* JSで .is-stuck のときに fixed に切り替え */
      z-index: 50;
      background: #ffffff;
      order: -1; /* タイトル・西暦を上に */
    }
    
    .content-works {
      grid-column: 1; /* すべて1列目に */
      position: static;
      top: auto;
      order: 1; /* 画像リストを下に */
    }
    /* JSで上から10pxに来たら付与。固定表示。top:0 + padding-top で隙間も白で覆う */
    .content-text.is-stuck {
      position: fixed !important;
      top: 0 !important;
      left: 22px;
      right: 22px;
      width: auto !important;
      padding-top: 10px; /* タイトルは実質10px下に。この10px分で隙間の画像を隠す */
      background: #ffffff; /* 白背景用 */
    }
    
    /* 画像グリッドを縦一列に */
    .image-grid {
      grid-template-columns: 1fr; /* 1列表示 */
      width: 100%; /* レスポンシブ時は全幅 */
      margin-left: 0; /* 左に配置 */
      position: static; /* スティッキーを解除 */
      top: auto;
    }
    
    /* 640px以下：タイトルと西暦を表示し、上から10pxでスティッキー */
    .image-hover-text {
      display: flex !important; /* 表示する */
      position: static; /* 親のstickyに任せる */
      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; /* 640px以下では説明は非表示 */
    }
    .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; /* コンテンツ最大幅に合わせる */
      /* width: 80%; 1列表示に変更 */
    }
    
    .image-list2 li {
      width: 100%; /* 1列表示 */
    }
    .footer {
      text-align: right; /* テキストを右揃え */
      margin: 10px 0; /* 上下に10pxのマージン */
      font-size: 12px; /* 10pxから+2px */
      color: #a0a0a0; /* 白ベースの薄いグレー */
    }
  }

  /* 640px以下：タイトル・西暦を画面上部に固定（スティッキー） */
  @media (max-width: 640px) {
    body {
      padding-bottom: 0;
    }
    #content-section {
      margin-bottom: 0; /* 200px短く（200px→0） */
    }
    .content-grid {
      grid-template-columns: 1fr;
    }
    .content-text {
      grid-column: 1;
      position: relative; /* JSで .is-stuck のときに fixed に切り替え */
      z-index: 50;
      background: #ffffff;
      order: -1; /* タイトル・西暦を上に */
    }
    .content-works {
      grid-column: 1;
      position: static;
      top: auto;
      order: 1;
    }
    .content-text.is-stuck {
      position: fixed !important;
      top: 0 !important;
      left: 22px;
      right: 22px;
      width: auto !important;
      padding-top: 10px; /* タイトルは実質10px下に */
      background: #ffffff;
    }
    .image-grid {
      grid-template-columns: 1fr;
      width: 100%;
      margin-left: 0;
      position: static;
      top: auto;
      gap: calc(6px * var(--scroll-scale, 1)); /* 640px以下：スクロール速度で同様に変動 */
    }
    .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;
      gap: 20px; /* 縦並びの画像間隔を＋10px（10px→20px） */
    }
    .image-list li {
      left: 0;
      right: 0;
      width: 100%;
      max-width: 1140px;
    }
    .image-list2 {
      gap: 20px; /* 縦並びの画像間隔を＋10px（10px→20px） */
    }
    .image-list2 li {
      width: 100%;
    }
  }

  


  
  

  



/* ____________________________________________________________________________________ */

 /* オープニングアニメーションのスタイル */
.opening-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212;
  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;
  }
}