/*
 * sub-stylesheet.css — サブページ（プロジェクト詳細・aboutme）専用レイアウト
 *
 * 役割分担：
 *   stylesheet.css  … グローバルトークン・リセット・タイポグラフィ・index レイアウト・ナビ・レスポンシブ
 *   sub-stylesheet.css … サブページのグリッド構造（project-container）・sticky テキスト・back-to-top UI
 *
 * タイポグラフィ・リンク色・日本語ブロック余白は stylesheet.css に集約。
 * このファイルでフォントサイズ・色を直接指定しないこと。
 */


/* ===== SUBPAGE — プロジェクトコンテナ（左2/3写真・右1/3テキスト） ===== */

.project-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3%;
  width: 100%;
  box-sizing: border-box;
  padding-left: 22px;
  padding-right: 22px;
  align-items: start; /* 右テキスト列が画像と同高に伸びないよう上端揃え */
  position: relative;
}

/* 画像列：上端揃え・高さを内容に合わせる */
.project-container .project-images {
  align-self: start;
  min-height: 0;
}

.project-images {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-images .vertical-image-list {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
}

.project-images .vertical-image-list li {
  width: 100%;
  margin-bottom: 0;
  background: transparent;
  border: none;
  outline: none;
  animation: subpageImageFadeInFromTop 0.7s ease-out both;
}

/* サブページ画像：上からふわっと出現 */
@keyframes subpageImageFadeInFromTop {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 上の画像から順に遅らせて表示 */
.project-images .vertical-image-list li:nth-child(1)  { animation-delay: 0.05s; }
.project-images .vertical-image-list li:nth-child(2)  { animation-delay: 0.1s; }
.project-images .vertical-image-list li:nth-child(3)  { animation-delay: 0.15s; }
.project-images .vertical-image-list li:nth-child(4)  { animation-delay: 0.2s; }
.project-images .vertical-image-list li:nth-child(5)  { animation-delay: 0.25s; }
.project-images .vertical-image-list li:nth-child(6)  { animation-delay: 0.3s; }
.project-images .vertical-image-list li:nth-child(7)  { animation-delay: 0.35s; }
.project-images .vertical-image-list li:nth-child(8)  { animation-delay: 0.4s; }
.project-images .vertical-image-list li:nth-child(9)  { animation-delay: 0.45s; }
.project-images .vertical-image-list li:nth-child(10) { animation-delay: 0.5s; }
.project-images .vertical-image-list li:nth-child(11) { animation-delay: 0.55s; }
.project-images .vertical-image-list li:nth-child(12) { animation-delay: 0.6s; }
.project-images .vertical-image-list li:nth-child(13) { animation-delay: 0.65s; }
.project-images .vertical-image-list li:nth-child(14) { animation-delay: 0.7s; }
.project-images .vertical-image-list li:nth-child(15) { animation-delay: 0.75s; }
.project-images .vertical-image-list li:nth-child(16) { animation-delay: 0.8s; }
.project-images .vertical-image-list li:nth-child(17) { animation-delay: 0.85s; }
.project-images .vertical-image-list li:nth-child(18) { animation-delay: 0.9s; }
.project-images .vertical-image-list li:nth-child(19) { animation-delay: 0.95s; }
.project-images .vertical-image-list li:nth-child(20) { animation-delay: 1s; }
.project-images .vertical-image-list li:nth-child(21) { animation-delay: 1.05s; }
.project-images .vertical-image-list li:nth-child(22) { animation-delay: 1.1s; }
.project-images .vertical-image-list li:nth-child(23) { animation-delay: 1.15s; }
.project-images .vertical-image-list li:nth-child(24) { animation-delay: 1.2s; }
.project-images .vertical-image-list li:nth-child(25) { animation-delay: 1.25s; }

.project-images .vertical-image-list li:last-child {
  margin-bottom: 0;
}

.project-images .vertical-image-list img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
  background: transparent;
  line-height: 0;
  font-size: 0;
  border: none;
  outline: none;
}

/* YouTube 動画アイテム */
.project-images .vertical-image-list li.youtube-video {
  width: 100%;
  margin-bottom: 12px;
}

.project-images .vertical-image-list li.youtube-video > div {
  width: 100%;
}


/* ===== SUBPAGE — テキストブロック（sticky） ===== */

.project-text {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 100px;          /* 固定ヘッダー分の余白 */
  height: fit-content; /* 高さを内容に合わせてスクロール余地を確保 */
  width: 100%;
  text-align: left;
  z-index: 10;
}

/* サブページ：コンテンツを上詰めで表示 */
main {
  justify-content: flex-start;
  padding-top: 20vh;
}


/* ===== ABOUTME — 専用オーバーライド ===== */

/* aboutme のみグリッドギャップを 3% → 18px に変更 */
.aboutme-page .project-container {
  gap: 18px;
}


/* ===== LEGACY — 未使用クラス（将来削除候補） ===== */
/*
 * 以下のクラスは現在どの HTML ファイルからも参照されていない。
 * 削除する場合は全 .html ファイルを検索して使用がないことを確認すること。
 *   .vertical-image-list（基底）/ .about-section / .about-text（.about-section 内）
 *   .about-images / .about-section2 / .about-section3
 */

/* 縦1列画像リスト基底スタイル
 * → 実際の表示は下部の !important ブロックで上書きされる */
.vertical-image-list {
  list-style: none;
  padding: 0;
  margin: 50px auto 20px;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}

.vertical-image-list li {
  margin-bottom: 0;
  width: 70%;
  background: transparent;
  border: none;
  outline: none;
}

.vertical-image-list img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  background: transparent;
  line-height: 0;
  font-size: 0;
  border: none;
  outline: none;
}

/* about-section 系（未使用） */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin: 0 auto;
  padding: 0 10%;
  align-items: start;
}

/* .about-section 内に限定してスコープ（stylesheet.css の .about-text を上書きしないよう） */
.about-section .about-text {
  grid-column: 1;
  font-size: var(--font-size-body);
  line-height: var(--leading-jp);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-images {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-images img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-section2 {
  width: 80%;
  margin: 30px auto;
  text-align: center;
}

.about-section2 img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.about-section3 {
  width: 40%;
  margin: 20px auto;
  text-align: center;
}

.about-section3 img {
  width: 20%;
  height: auto;
  display: block;
  margin: 0 auto;
}


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

@media (max-width: 640px) {
  .project-container {
    grid-template-columns: 1fr;
    padding-left: 22px;
    padding-right: 22px;
  }

  /* aboutme は画像→テキストの縦並び（他サブページと逆順） */
  .aboutme-page .project-container { grid-template-columns: 1fr; }
  .aboutme-page .project-images    { order: 1; }
  .aboutme-page .project-text      { order: 2; }

  .vertical-image-list li { width: 90%; }
  .title                  { font-size: 1.6em; }
  body                    { font-size: var(--font-size-body); }

  .image-list li {
    width: 100%;
    max-width: 1200px;
  }

  .about-section3 { width: 60%; margin: 20px auto; }
}

@media (max-width: 400px) {
  .vertical-image-list li { width: 100%; }
  .title                  { font-size: var(--font-size-h2); }
  body                    { font-size: var(--font-size-caption); }
}


/* ===== SUBPAGE — 縦並び写真の白線強制リセット ===== */
/*
 * .vertical-image-list の基底スタイルおよびブラウザデフォルトを上書きし、
 * 写真間の余計な隙間・白線を確実に消す。
 * !important は基底セレクタとの詳細度競合を解決するために必要。
 */
main .project-container .project-images .vertical-image-list {
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

main .project-container .project-images .vertical-image-list li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

main .project-container .project-images .vertical-image-list img {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  vertical-align: top !important;
  line-height: 0 !important;
  font-size: 0 !important;
  max-width: 100%;
  height: auto;
  object-fit: fill;
}

/* ネイティブ video（<ul> 内は必ず <li> で包む。未ラップだと li と同幅にならず横はみ出しやすい） */
.project-images .vertical-image-list li.project-native-video {
  width: 100%;
}

.project-images .vertical-image-list li.project-native-video video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  box-sizing: border-box;
}

main .project-container .project-images .vertical-image-list li video {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}


/* ===== SUBPAGE — フッター・back-to-top ===== */

/* サブページのフッター余白（stylesheet.css の base を上書き） */
.footer {
  margin-top: 20px;
  margin-bottom: 2px;
}

/* 「一番上に戻る」ボタン：円形・右揃え */
.back-to-top-wrap {
  text-align: right;
  margin: 0;
  margin-top: 64px;
  margin-right: 22px;
  margin-bottom: 0;
  padding: 0;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-ui);
  text-decoration: none;
  transition: background 0.2s ease;
  line-height: 0;
}

.back-to-top:hover {
  background: var(--color-surface-ui-hover);
}

/* 矢印（背景色で抜く） */
.back-to-top-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid var(--color-bg);
  margin-bottom: 2px;
}