/* 
--------------------------------------------------
TRINE GALLERY テーマスタイル
--------------------------------------------------
Theme Name: TRINE GALLERY
Version: 1.0
--------------------------------------------------
目次:
1. リセットとベース
2. 共通要素
3. レイアウト
4. ヘッダー
5. ヒーローセクション
6. 展示リスト
7. 詳細ページ
8. アーカイブページ
9. 固定ページ
10. フッター
11. ユーティリティ
12. レスポンシブ
--------------------------------------------------
*/

/* 
--------------------------------------------------
1. リセットとベース - モバイルビューポート対応
--------------------------------------------------
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* CSS Custom Properties for dynamic viewport height */
:root {
  --vh: 1vh;
  --mobile-vh: 100vh;
}

a {
  color: currentcolor;
}
body {
  font-family: "DM Sans", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #26375e;
  background: #fff;
  letter-spacing: 0.02em;
  font-size: 12px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heroセクションの最小高さを保証 - モバイル対応 */
.hero {
  height: 100vh; /* フォールバック */
  height: 100svh; /* ツールバー表示時の正確な高さ */
  height: calc(var(--vh, 1vh) * 100); /* JavaScript計算値を最優先 */
  will-change: transform; /* GPUアクセラレーションのヒント */
}

/* モバイル専用の高さ調整 */
@media (max-width: 768px) {
  .hero {
    height: 100vh; /* フォールバック */
    height: 100svh; /* ツールバー表示時の正確な高さ */
    height: calc(var(--vh, 1vh) * 100); /* JavaScript計算値を最優先 */
  }

  /* ホームコンテナもモバイル対応 */
  .home-container {
    min-height: var(--mobile-vh);
    min-height: 100dvh;
  }

  /* Hero wrapperもモバイル対応 */
  .hero-wrapper {
    min-height: var(--mobile-vh);
    min-height: 100dvh;
  }
}

/* Past Exhibitionsの初期状態 */
.past-exhibitions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ページ遷移時のアニメーション改善 */
body {
  overflow-x: hidden; /* 水平スクロールを防ぐ */
}

/* Framer Motionのアニメーション中のレイアウトシフト防止 */
main {
  position: relative;
  overflow: hidden; /* アニメーション中のはみ出しを防ぐ */
}

/* アニメーション中の要素の安定化 */
.hero,
.past-exhibitions {
  backface-visibility: hidden; /* ちらつき防止 */
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* レイヤー作成を強制 */
}

/* モバイルでのパフォーマンス改善 */
@media (max-width: 768px) {
  .hero,
  .past-exhibitions {
    transform: none; /* モバイルではtransformを無効化 */
  }
}

/* ホームコンテナ */
.home-container {
  min-height: 100vh;
  position: relative;
}

/* Heroスケルトン */
.hero-skeleton {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #f0f0f0 0%, #e8e8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ロゴプレースホルダー */
.hero-skeleton-logo {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  width: 260px;
  height: 24px;
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* コンテンツプレースホルダー */
.hero-skeleton-content {
  position: absolute;
  bottom: 40px;
  left: 50%;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* スケルトンライン */
.skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-line.title {
  width: 300px;
  height: 24px;
}

.skeleton-line.subtitle {
  width: 200px;
  height: 14px;
}

.skeleton-line.button {
  width: 120px;
  height: 32px;
  margin-top: 8px;
}

/* スケルトンローディングアニメーション */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Past Exhibitionsのプログレッシブ表示 */
.past-exhibitions-wrapper {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.past-exhibitions-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

.past-exhibitions-wrapper.hidden {
  visibility: hidden;
  pointer-events: none;
}

/* 個別アイテムのアニメーション */
.past-exhibitions-wrapper.visible .carousel-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

/* 各アイテムに遅延を追加 */
.past-exhibitions-wrapper.visible .carousel-item:nth-child(1) {
  animation-delay: 0.1s;
}

.past-exhibitions-wrapper.visible .carousel-item:nth-child(2) {
  animation-delay: 0.2s;
}

.past-exhibitions-wrapper.visible .carousel-item:nth-child(3) {
  animation-delay: 0.3s;
}

.past-exhibitions-wrapper.visible .carousel-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* フェードインアップアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* パフォーマンス最適化 */
.hero,
.past-exhibitions {
  contain: layout style paint;
}

/* モバイル最適化 */
@media (max-width: 768px) {
  .hero-skeleton-logo {
    width: 200px;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -40px;
  }

  .hero-skeleton-content {
    left: 20px;
    right: 20px;
  }

  .skeleton-line.title {
    width: 80%;
  }

  .skeleton-line.subtitle {
    width: 60%;
  }

  /* モバイルではアニメーションを簡略化 */
  .past-exhibitions-wrapper {
    transition-duration: 0.3s;
  }

  .past-exhibitions-wrapper.visible .carousel-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* プリファレンス対応 */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .hero-skeleton-logo {
    animation: none;
    background: #e8e8e8;
  }

  .past-exhibitions-wrapper,
  .past-exhibitions-wrapper.visible .carousel-item {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* 
  --------------------------------------------------
  2. 共通要素
  --------------------------------------------------
  */
/* 読み込み中とエラーメッセージ */
.loading,
.error,
.no-content {
  padding: 40px;
  text-align: center;
  font-size: 1.2rem;
}

.error {
  color: #e74c3c;
}

.no-content {
  color: #777;
  font-style: italic;
}
.back-link.sp {
  display: none;
}
@media (max-width: 767px) {
  .back-link.sp {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  .back-link.pc {
    display: none;
  }
}

.back-link:hover {
  opacity: 0.7;
}

.back-link:hover {
  transform: translateX(3px);
}
.back-link:hover .arrow {
  transform: translateX(-3px);
}
.back-link {
  display: flex;
  line-height: 1;
  padding: 10px 4px;
  background-color: transparent;
  color: #555555;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  align-items: center;
}

/* CSS で矢印を作成 */
.back-link .arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: #555555;
  margin-right: 8px;
  transition: transform 0.2s ease, width 0.2s ease;
}

/* 矢印の先端部分 */
.back-link .arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid #555555;
  border-right: 1px solid #555555;
  transform: rotate(-135deg);
}

/* 
--------------------------------------------------
4. ヘッダー - SVG色修正対応
--------------------------------------------------
*/

.header {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  z-index: 100;
}

/* ホームページではヘッダーは固定、透明 */
.header-home {
  position: fixed;
  background-color: transparent;
  color: #ffffff; /* SVGのcurrentColorに適用 */
  justify-content: flex-end;
}
.header-home a {
  color: #ffffff;
}

/* 下位階層ページのヘッダー */
.header-sub {
  color: #26375e; /* SVGのcurrentColorに適用 */
}

/* スクロール時のヘッダー */
.header.scrolled {
  color: #26375e; /* SVGのcurrentColorに適用 */
}

/* ロゴ */
.header .logo {
  display: flex;
  align-items: center;
  transition: color 0.3s ease; /* SVGの色変更をスムーズに */
}

.header .logo a {
  display: block;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.header .logo a:hover {
  opacity: 0.8;
}

.header .logo svg {
  display: block;
}

/* ナビゲーションリンク */
.header nav {
  position: absolute;
  left: 50%;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  text-decoration: none;
  font-size: 15px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease;
}

/* アクティブおよびホバー状態のアンダーライン */
.nav-links li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition: width 0.2s ease, background-color 0.3s ease;
}

.header-home .nav-links li a::after {
  background-color: #ffffff;
}

.header-sub .nav-links li a::after,
.header.scrolled .nav-links li a::after {
  background-color: #26375e;
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
  width: 100%;
}

/* ソーシャルアイコン */
.social-icons {
  display: flex;
  gap: 20px;
  align-items: center;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: color 0.3s ease, opacity 0.2s ease; /* SVGの色変更をスムーズに */
}

.social-icons a:hover {
  opacity: 0.7;
}

/* 
  --------------------------------------------------
  5. ヒーローセクション - SVG色修正対応
  --------------------------------------------------
  */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ロゴ - ファーストビューの中央に表示 */
.hero-logo {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translate(0%, -50%);
  z-index: 10;
  color: #ffffff; /* SVGのcurrentColorに適用 */
}

.hero-logo svg {
  display: block;
}

/* 背景画像 */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* グラデーションオーバーレイ */
.hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 2;
}

/* 展示情報コンテンツ */
.hero-content {
  position: absolute;
  bottom: 40px;
  left: 50%;
  right: 40px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.hero-exhibition-info {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.4;
}

.hero-exhibition-info h1 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #ffffff;
  line-height: 1.3;
}

.hero-exhibition-info p {
  margin: 0;
}

.exhibition-period {
}

.opening-hours,
.closed-days {
}

.exhibition-note {
  margin-top: 10px;
  font-style: italic;
}

/* 詳細を見るボタン用のコンテナ */
.hero-link-container {
  z-index: 5;
}

/* 詳細を見るボタンのスタイル修正 */
.hero-link {
  display: flex;
  line-height: 1;
  padding: 8px 2px;
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  align-items: center;
}

/* CSS で矢印を作成 */
.hero-link .arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: #ffffff;
  margin-left: 4px;
  transition: transform 0.2s ease, width 0.2s ease;
}

/* 矢印の先端部分 */
.hero-link .arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
}

.hero-link:hover {
  transform: translateX(-2px);
}

.hero-link:hover .arrow {
  transform: translateX(3px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .nav-links {
    gap: 20px;
  }

  .nav-links li a {
    font-size: 13px;
  }

  .hero-logo svg {
    width: 280px;
    height: auto;
  }

  .hero-exhibition-info h1 {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .nav-links {
    gap: 15px;
  }

  .nav-links li a {
    font-size: 12px;
  }

  .hero-logo svg {
    width: 240px;
    height: auto;
  }

  .hero-content {
    bottom: 40px;
    left: 20px;
    flex-direction: column;
    gap: 16px;
    align-items: baseline;
  }

  .hero-exhibition-info h1 {
    font-size: 20px;
  }

  .exhibition-period {
    font-size: 14px;
  }
}

/* 
--------------------------------------------------
6. 展示リスト - サムネイル比率を縦長3:4に修正
--------------------------------------------------
*/
.home-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
  padding: 0 20px;
}

.home-list-item {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fff;
  height: 100%;
}

.home-list-item:hover {
  transform: translateY(-5px);
}

.home-list-item a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* アイキャッチ画像コンテナ - 縦長3:4比率 (4÷3) */
.item-image-container {
  position: relative;
  width: 100%;
  padding-top: 133.33%; /* 3:4の縦横比（4÷3×100） */
  overflow: hidden;
  background-color: #f5f5f5;
}

/* アイキャッチ画像 */
.item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を維持しながら領域いっぱいに表示 */
  transition: transform 0.3s ease;
}

/* ホバー時の画像拡大効果 */
.home-list-item:hover .item-image {
  transform: scale(1.05);
}

/* 画像がない場合のプレースホルダー */
.item-image.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}

.item-image.no-image::before {
  content: "\1F4F7"; /* カメラアイコン（絵文字） */
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.6;
}

.item-image.no-image span {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.7;
}

/* テキストコンテンツ部分 */
.item-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.home-list-item h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #26375e;
  font-weight: 500;
  line-height: 1.4;
}

.home-list-item .date {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 10px;
}

.home-list-item .excerpt {
  font-size: 0.9rem;
  color: #555;
  flex-grow: 1;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 
  --------------------------------------------------
  7. 詳細ページ
  --------------------------------------------------
  */
.detail-container {
  display: flex;
  flex-direction: column-reverse; /* 画像を上に */
  gap: 40px;
  margin: 64px auto;
  color: #555555;
}

.detail-text {
  flex: 2;
  padding: 20px;
}

.detail-text h2 {
  margin-bottom: 15px;
  font-size: 1.8rem;
  color: #26375e;
  line-height: 1.4;
}

.detail-text .meta {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
  line-height: 1.6;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 6px;
}

.detail-text .meta p {
  margin: 5px 0;
}

.meta .exhibition-period {
  font-weight: 500;
  color: #555;
}

.detail-text .content {
  line-height: 1.8;
}

.detail-image {
  flex: 1;
  max-width: 100%;
}

.detail-image-container {
  position: relative;
}

/* 縦長画像のフレーム */
.detail-image img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

.detail-image .no-image {
  height: 600px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  border-radius: 4px;
  font-style: italic;
  flex-direction: column;
}

.detail-image .no-image::before {
  content: "\1F4F7";
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* 
  --------------------------------------------------
  8. アーカイブページ
  --------------------------------------------------
  */
/* アーカイブページ専用の背景色 */
body.archive-page {
  background-color: #26375e;
}

/* ヘッダーの色変更 */
body.archive-page .header-sub {
  background-color: transparent;
  color: #ffffff;
}

body.archive-page .header-sub .logo a {
  color: #ffffff;
}

body.archive-page .header-sub .nav-links a {
  color: #ffffff;
}

body.archive-page .header-sub .nav-links a::after {
  background-color: #ffffff;
}

body.archive-page .header-sub .social-icons a {
  color: #ffffff;
}

/* フッターの色変更 */
body.archive-page .footer {
  background-color: transparent;
  color: #ffffff;
}

body.archive-page .footer-copyright {
  color: #ffffff;
}
body.archive-page .footer-copyright a {
  color: #ffffff;
}
body.archive-page .footer-links a {
  color: #ffffff;
}

body.archive-page .footer-links a::after {
  background-color: #ffffff;
}

body.archive-page .footer-social a {
  color: #ffffff;
}

/* ハンバーガーメニューも白に */
body.archive-page .hamburger-button {
  color: #ffffff;
}
body:has(.hero) .hamburger-button {
  color: #ffffff;
}
/* エラーメッセージの色も調整 */
body.archive-page .error {
  color: #ff6b6b;
}

.archive-container {
  padding: 128px 40px 64px;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  margin-bottom: 32px;
}
.archive-grid .archive-item:nth-last-child(-n + 3) {
  border-bottom: 1px solid #fff;
}

/* アーカイブアイテム */
.archive-item {
  background: transparent;
  backdrop-filter: none;
  color: #fff;
  padding: 16px;
  padding-right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  transition: all 0.3s ease;
  border-top: 1px solid #fff;
  position: relative;
  gap: 16px;
}

/* 左側：テキスト情報 */
.archive-item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* アイテム番号 */
.archive-item-number {
  font-size: 14px;
  margin-bottom: 20px;
}

/* タイトル */
.archive-item h4 {
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 展示期間 */
.archive-item .exhibition-period {
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
}
.archive-item .bussiness-hours {
  font-size: 12px;
  line-height: 1.3;
}
/* 右側：画像 */
.archive-item-image {
  position: relative;
  overflow: hidden;
  background: #f8f8f8;
  width: 100%;
  padding-top: 133.33%;
}

.archive-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.archive-item:hover img {
  transform: scale(1.05);
}

/* 詳細リンク */
.archive-item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  text-indent: -9999px;
}
.archive-footer {
  padding: 20px 0;
  justify-content: center;
  display: flex;
}
.archive-footer .back-link {
  color: #fff;
  justify-content: center;
}
.archive-footer .back-link .arrow {
  background-color: #fff;
}
.archive-footer .back-link .arrow::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/* レスポンシブ：タブレット */
@media (max-width: 1024px) {
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .archive-grid .archive-item:nth-last-child(-n + 3) {
    border-bottom: none;
  }
  .archive-grid .archive-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid #fff;
  }
}

/* レスポンシブ：モバイル */
@media (max-width: 768px) {
  .archive-grid .archive-item:nth-last-child(-n + 3) {
    border-bottom: none;
  }

  .archive-container {
    padding: 64px 32px;
  }

  .archive-grid {
    grid-template-columns: 1fr;
    background: transparent;
    padding: 0;
  }

  .archive-item {
    padding: 16px 0;
  }
}
/* 
  --------------------------------------------------
  9. 固定ページ
  --------------------------------------------------
  */
.static-page {
  padding: 128px 40px;
  color: #555;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: #555;
}

/* グリッドレイアウト - PCビュー */
.static-page-grid {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 1/4, 3/4の比率 */
  grid-gap: 40px;
  flex: 1;
}

.static-page-header {
  padding-right: 40px; /* 右側に40pxマージン */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100%;
}

.static-page-header h1 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.static-page-content {
  line-height: 1.8;
  color: #555;
  text-align: justify;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.static-page-content p {
  margin-bottom: 1.5em;
}

.static-page-content h2 {
  margin: 1.5em 0 0.5em;
  font-size: 1.2rem;
  font-weight: 500;
}

.static-page-content h3 {
  margin: 1.2em 0 0.5em;
  font-size: 1.1rem;
  color: #555;
  font-weight: 500;
}

.static-page-content h4 {
  margin-bottom: 1rem;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}
.static-page-content iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
}
.static-page-description {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}
.static-page-description.sp {
  display: none;
}
.static-page-description p {
  margin-bottom: 0.8em;
}

.static-page-description p:last-child {
  margin-bottom: 0;
}

/* モバイル表示の調整 */
@media (max-width: 767px) {
  .static-page {
    padding: 32px 20px;
  }
  .static-page-description.sp {
    display: block;
  }
  .static-page-description.pc {
    display: none;
  }
  .static-page-grid {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
  }

  .static-page-header {
    padding-right: 0;
  }
}

/* 
--------------------------------------------------
10. フッター - 更新版
--------------------------------------------------
*/
.footer {
  padding: 0 0 20px;
  color: #555555;
  width: 100%;
}

.footer-container {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer-copyright {
  font-size: 12px;
}
.footer-copyright a {
  color: #555555;
}
/* ナビゲーションリンク */
.footer nav {
  position: absolute;
  left: 50%;
}

.footer-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.footer-links li a {
  text-decoration: none;
  font-size: 15px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s ease;
  color: #555555;
}

/* アクティブおよびホバー状態のアンダーライン */
.footer-links li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #555555;
  transition: width 0.2s ease;
}

.footer-links li a:hover::after,
.footer-links li a.active::after {
  width: 100%;
}

.footer-links li a:hover {
  opacity: 0.7;
}

.footer-social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s ease;
  color: #555555;
}

.footer-social a:hover {
  opacity: 0.7;
}

/* タブレット用レスポンシブ対応 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: row;
    flex-direction: column;
    align-items: center;
  }
}

/* モバイル用レスポンシブ対応 */
@media (max-width: 767px) {
  .footer-links {
    display: none;
  }

  .footer-links li a {
    font-size: 13px;
  }
}

/* 
  --------------------------------------------------
  11. ユーティリティ
  --------------------------------------------------
  */
/* デバッグモード時のヘルパー */
.debug-info {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  display: none; /* 通常は非表示、必要な時だけ表示 */
}

/* 開発モード時だけ表示する場合 */
body.development .debug-info {
  display: block;
}

/* 
  --------------------------------------------------
  12. レスポンシブ
  --------------------------------------------------
  */
/* タブレット */
@media (min-width: 768px) {
  .detail-container {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  .hero-overlay {
    left: 5%;
    bottom: 10%;
    max-width: 90%;
  }

  .hero-overlay h2 {
    font-size: 1.5rem;
  }

  .home-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .header nav ul {
    gap: 10px;
  }
}

/* 
--------------------------------------------------
13. 過去の展示カルーセル
--------------------------------------------------
*/
.past-exhibitions {
  margin: 128px 0;
  padding: 0 40px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.section-header h2 {
  font-size: 17px;
  font-weight: 400;
  color: #555555;
}

.view-all span {
  margin-left: 5px;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.view-all:hover {
  opacity: 0.7;
}

.view-all:hover span {
  transform: translateX(3px);
}

.view-all {
  display: flex;
  line-height: 1;
  padding: 8px 2px;
  background-color: transparent;
  color: #555555;
  text-decoration: none;
  border-bottom: 1px solid #555555;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  align-items: center;
}

/* CSS で矢印を作成 */
.view-all .arrow {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: #555555;
  margin-left: 4px;
  transition: transform 0.2s ease, width 0.2s ease;
}

/* 矢印の先端部分 */
.view-all .arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #555555;
  border-right: 1px solid #555555;
  transform: rotate(45deg);
}

.view-all:hover {
  transform: translateX(-2px);
}

.view-all:hover .arrow {
  transform: translateX(3px);
}

/* カルーセルコンテナ */
.carousel-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 64px;
}

/* スクロールマスク - 左右の境界をコントロール */
.exhibition-scroll-mask {
  position: relative;
  overflow: hidden;
  margin-right: -10%;
}

/* スクロールコンテナ */
.exhibition-scroll {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox用 */
  padding-right: 10%;
  gap: 10px;
}

/* スクロールバーを非表示にする */
.exhibition-scroll::-webkit-scrollbar {
  display: none;
}

/* カルーセルアイテム */
.carousel-item {
  flex: 0 0 calc(25% - 10px); /* 幅を固定 */
  max-width: calc(25% - 10px);
}

.carousel-item a {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* 矢印ボタンコンテナ */
.carousel-arrows {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 10px;
  z-index: 10;
}

/* スクロールボタンのベーススタイル */
.scroll-button {
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.scroll-button:hover {
  opacity: 1;
}

/* 矢印のベース（横線） */
.scroll-button::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background-color: #555555;
  margin-top: -0.5px;
}

/* 矢印の先端 */
.scroll-button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #555555;
  border-right: 1px solid #555555;
}

/* 左矢印のスタイル */
.scroll-left::before {
  right: 7px;
}

.scroll-left::after {
  left: 4px;
  transform: translateY(-50%) rotate(-135deg);
}

/* 右矢印のスタイル */
.scroll-right::before {
  left: 7px;
}

.scroll-right::after {
  right: 5px;
  transform: translateY(-50%) rotate(45deg);
}

/* ホバー時のエフェクト */
.scroll-left:hover {
  transform: translateX(-3px);
}

.scroll-right:hover {
  transform: translateX(3px);
}

/* 非アクティブ状態 */
.scroll-button.disabled {
  opacity: 0.3;
  cursor: default;
}

.scroll-button.disabled:hover {
  opacity: 0.3;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .carousel-arrows {
    right: 0px;
    left: 0px;
    justify-content: space-between;
  }
}

/* 画像コンテナ - 比率を3:4に固定 */
.carousel-image-container {
  position: relative;
  width: 100%;
  padding-top: 133.33%; /* 3:4の縦横比 */
  overflow: hidden;
  background-color: #f5f5f5;
  margin-bottom: 8px;
  border-radius: 4px;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.carousel-item:hover .carousel-image {
  transform: scale(1.05);
}

/* 画像がない場合のプレースホルダー */
.carousel-image.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}

.carousel-image.no-image::before {
  content: "\1F4F7"; /* カメラアイコン（絵文字） */
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.6;
}

.carousel-image.no-image span {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}

/* コンテンツ部分 */
.carousel-content {
  padding: 5px 0;
  color: #555555;
}

.carousel-content h4 {
  font-size: 12px;
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.carousel-content .exhibition-date {
  font-size: 12px;
  margin: 0;
}

/* 作家名表示 */
.artist-name {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(26, 34, 56, 0.7);
  color: white;
  padding: 3px 8px;
  font-size: 0.75rem;
  border-radius: 2px;
  z-index: 2;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .carousel-item {
    flex: 0 0 180px;
    max-width: 180px;
  }

  .past-exhibitions {
    margin: 64px 0;
    padding: 0 20px;
  }
}

/* 小さい画面用 */
@media (max-width: 480px) {
  .carousel-item {
    flex: 0 0 160px;
    max-width: 160px;
  }
}
/* 
--------------------------------------------------
14. ドロワーメニュー
--------------------------------------------------
*/
/* ハンバーガーメニューボタンの改良版 - ヘッダー外に固定配置 */
.hamburger-button {
  display: none; /* デフォルトは非表示 */
  background: none;
  border: none;
  cursor: pointer;
  position: fixed; /* 固定位置に配置 */
  right: 20px; /* 右端に配置 */
  top: 20px; /* 上端から20px */
  z-index: 1001; /* ヘッダーより上に配置 */
  width: 24px;
  height: 20px;
  padding: 0;
  margin: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: inherit; /* 親要素の色を継承 */
}

/* ハンバーガーラインのベーススタイル */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  position: absolute;
}

/* 3本線の固定位置配置 */
.hamburger-line:nth-child(1) {
  top: 7px;
}

.hamburger-line:nth-child(2) {
  top: 12px;
}

/* アクティブ状態（×マーク）のアニメーション */
.hamburger-button.open .hamburger-line:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburger-button.open .hamburger-line:nth-child(2) {
  top: 9px;
  transform: rotate(-45deg);
}

/* メニューが開いているときのハンバーガーボタンの色変更 */
.hamburger-button.open {
  color: #ffffff; /* メニューが開いているときは白色 */
}

/* ホバー効果 */
.hamburger-button:hover .hamburger-line {
  opacity: 0.7;
}

.hamburger-button.open:hover .hamburger-line {
  opacity: 1;
}

/* ドロワーメニューの改良 - 右からスライドイン */
.drawer-menu {
  position: fixed;
  top: 0;
  right: 0; /* 右端から開始 */
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #26375e 0%, #243447 100%);
  z-index: 999; /* ハンバーガーボタンより下に配置 */
  transform: translateX(100%); /* 右側に隠す */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.drawer-menu.open {
  transform: translateX(0); /* 通常位置に移動 */
}

/* ドロワーオーバーレイ（背景クリックで閉じる用） */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998; /* ドロワーメニューより下に配置 */
  opacity: 0;
  animation: fadeIn 0.2s ease forwards;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ドロワーロゴの改良 */
.drawer-logo {
  margin-bottom: 50px;
  margin-top: 60px; /* ハンバーガーボタンの分の余白 */
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
  opacity: 0.95;
  animation: fadeInUp 0.2s ease 0.2s both;
}

/* ドロワーナビゲーションの改良 */
.drawer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-bottom: 50px;
}

.drawer-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  padding: 12px 20px;
  position: relative;
  transition: all 0.3s ease;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInUp 0.2s ease forwards;
}

/* ナビリンクのステージングアニメーション */
.drawer-nav a:nth-child(1) {
  animation-delay: 0.3s;
}
.drawer-nav a:nth-child(2) {
  animation-delay: 0.4s;
}
.drawer-nav a:nth-child(3) {
  animation-delay: 0.5s;
}
.drawer-nav a:nth-child(4) {
  animation-delay: 0.6s;
}

/* ナビリンクのホバー効果 */
.drawer-nav a::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 1px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.drawer-nav a:hover::after,
.drawer-nav a.active::after {
  width: 80%;
}

.drawer-nav a:hover,
.drawer-nav a.active {
  color: #ffffff;
  transform: translateY(-2px);
}

/* ドロワーソーシャルの改良 */
.drawer-social {
  display: flex;
  gap: 24px;
  margin-top: 30px;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2000;
}

.drawer-social a {
  color: #ffffff;
  transition: all 0.3s ease;
  padding: 10px;
}

.drawer-social a:hover {
  color: #ffffff;
}

/* フェードインアップアニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スマホ・タブレット対応：768px以下の画面サイズでハンバーガーメニューを表示 */
@media (max-width: 768px) {
  .hamburger-button {
    display: flex; /* スマホ・タブレットでのみ表示 */
  }

  .header .nav-links,
  .header .social-icons {
    display: none; /* スマホ・タブレットではナビゲーションを非表示 */
  }

  /* ヘッダーの中央配置を調整 */
  .header .logo {
    margin: 0 auto;
  }
}

/* PC画面では必ずメニューを非表示 */
@media (min-width: 769px) {
  .hamburger-button {
    display: none !important; /* PCでは完全に非表示 */
  }

  .drawer-menu {
    display: none !important; /* PCではドロワーメニューも非表示 */
  }

  .drawer-overlay {
    display: none !important; /* PCではオーバーレイも非表示 */
  }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .hamburger-line,
  .drawer-menu,
  .drawer-nav a,
  .drawer-social a {
    transition: none;
    animation: none;
  }
}

/* フォーカス状態のスタイル */
.hamburger-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.drawer-nav a:focus-visible,
.drawer-social a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 
--------------------------------------------------
フッターを画面下部に固定するスタイル
--------------------------------------------------
*/
html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* viewport heightの最小値を100%に設定 */
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex: 1;
}

.footer {
  margin-top: auto; /* 自動的にスペースを確保してフッターを下部に押し下げる */
}

/* 
--------------------------------------------------
プロフィールセクション用スタイル
--------------------------------------------------
*/
.detail-meta {
  color: #555;
}
.detail-meta h2 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}

.artist-profile h3 {
  font-size: 12px;
  margin-bottom: 16px;
  font-weight: 600;
}

/* グリッドレイアウト - PCビュー */
@media (min-width: 768px) {
  .detail-container {
    padding: 40px;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr; /* 1/4, 1/4, 1/2の比率 */
    grid-gap: 0; /* グリッド間のギャップを0に */
    width: 100%;
  }

  .detail-meta {
    grid-column: 1;
    padding-right: 40px; /* 右側に40pxマージン */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
  }

  .detail-content {
    grid-column: 2;
    padding-right: 40px; /* 右側に40pxマージン */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: justify;
  }

  .detail-image {
    grid-column: 3;
  }

  .detail-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
}

/* モバイル表示の調整 */
@media (max-width: 767px) {
  .detail-container {
    padding: 0 20px;
    margin: 32px auto;
  }
  .detail-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .detail-grid {
    display: flex;
    flex-direction: column;
    grid-gap: 32px;
  }

  .detail-image {
    order: -1; /* 画像を最初に表示 */
  }
}

/* Google Mapコンテナ */

.google-map-container iframe {
  width: 100%;
  border: none;
  display: block;
}

/* 基本的なモノトーンフィルター - 最重要！ */
.google-map-monochrome iframe {
  filter: grayscale(100%) !important;
  transition: filter 0.3s ease;
}

/* ホバー効果 */
.google-map-hover-effect:hover iframe {
  filter: grayscale(0%) !important;
}

/* ヴィンテージ風モノトーン */
.google-map-vintage iframe {
  filter: grayscale(100%) sepia(20%) contrast(1.1) brightness(0.9) !important;
  transition: filter 0.3s ease;
}

/* 高コントラストモノトーン */
.google-map-high-contrast iframe {
  filter: grayscale(100%) contrast(1.3) brightness(0.95) !important;
  transition: filter 0.3s ease;
}

/* ソフトモノトーン */
.google-map-soft iframe {
  filter: grayscale(100%) contrast(0.9) brightness(1.05) blur(0.3px) !important;
  transition: filter 0.3s ease;
}

/* モバイル対応 */
@media (max-width: 767px) {
  /* モバイルではホバー効果を無効化 */
  .google-map-hover-effect:hover iframe {
    filter: grayscale(100%) !important;
  }

  .google-map-container iframe {
    height: 300px !important;
  }
}
/* 
--------------------------------------------------
404 Not Found Page Styles
--------------------------------------------------
*/
.not-found-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.not-found-number {
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #555555;
}

@media (max-width: 480px) {
  .not-found-container {
    padding: 20px 15px;
  }
}

/* 
--------------------------------------------------
15. コンタクトページ
--------------------------------------------------
*/
.contact-page .static-page-content {
  max-width: 600px;
}

/* Contact Form 7 カスタムスタイル */
.wpcf7-form {
}

.wpcf7-form p {
  margin-bottom: 24px;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.05em;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
  background-color: #fff;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #26375e;
  box-shadow: 0 0 0 3px rgba(38, 55, 94, 0.1);
}

.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
  background-color: #26375e;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #1a2540;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(38, 55, 94, 0.2);
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #dc3545;
  background-color: #f8d7da;
  color: #721c24;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #28a745;
  background-color: #d4edda;
  color: #155724;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .contact-page .static-page-content {
    max-width: 100%;
  }

  .wpcf7-form input[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

/* 
--------------------------------------------------
整理済みCSS追加分 - style.cssへの追加
--------------------------------------------------
*/

/* ======================================
   1. ホームページのプログレッシブ表示
   ====================================== */

/* 初期化中の表示 */
.home-initializing {
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* ホーム用の独立ロゴ */
.home-logo {
  pointer-events: auto;
  z-index: 1000;
}

.home-logo svg {
  display: block;
}

/* ホームコンテナ */
.home-container {
  min-height: 100vh;
  position: relative;
}

/* Hero wrapper */
.hero-wrapper {
  min-height: 100vh;
  position: relative;
}

/* ======================================
   3. Past Exhibitionsのプログレッシブ表示
   ====================================== */

.past-exhibitions-wrapper {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  will-change: opacity;
}

.past-exhibitions-wrapper.visible {
  opacity: 1;
}

/* 個別アイテムのアニメーション */
.past-exhibitions-wrapper.visible .carousel-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}

/* 各アイテムに遅延を追加 */
.past-exhibitions-wrapper.visible .carousel-item:nth-child(1) {
  animation-delay: 0.1s;
}
.past-exhibitions-wrapper.visible .carousel-item:nth-child(2) {
  animation-delay: 0.2s;
}
.past-exhibitions-wrapper.visible .carousel-item:nth-child(3) {
  animation-delay: 0.3s;
}
.past-exhibitions-wrapper.visible .carousel-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* フェードインアップアニメーション - transformを削除 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    margin-top: 20px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

/* ======================================
   4. ページ遷移制御
   ====================================== */

/* 遷移中の全体制御 */
.is-transitioning {
  overflow: hidden;
}

.is-transitioning main {
  position: relative;
  overflow: hidden;
}

/* 遷移中は下位要素を確実に非表示 */
.is-transitioning .past-exhibitions-wrapper,
.is-transitioning .footer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ホームページ以外のフッター表示 */
body:not(:has(.home-container)) .footer {
  opacity: 1;
  visibility: visible;
}

/* ======================================
   6. アクセシビリティ対応
   ====================================== */

@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .hero-skeleton-logo {
    animation: none;
    background: #e8e8e8;
  }

  .past-exhibitions-wrapper,
  .past-exhibitions-wrapper.visible .carousel-item,
  .footer {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* 初期化中の表示 */
.home-initializing {
  min-height: 100vh;
  background-color: #f8f8f8;
}
.progressive-image-wrapper {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.hero-background {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 
--------------------------------------------------
パフォーマンス最適化追加CSS
--------------------------------------------------
*/

/* レイヤー作成を強制してパフォーマンス向上 */
.archive-item-image {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 画像の再描画を最小限に */
.lazy-image {
  will-change: auto; /* 必要時のみGPUを使用 */
  contain: layout style paint;
}

/* サムネイルの描画コスト削減 */
.lazy-image.thumbnail {
  /* ボケエフェクトをGPUで処理 */
  transform: scale(1.15) translateZ(0);
  /* シンプルなボケ効果 */
  filter: blur(10px);
}

/* 非表示要素の完全な無効化 */
.lazy-image.hidden {
  display: none !important; /* 描画から完全に除外 */
}

/* スクロール時のちらつき防止 */
.archive-grid {
  transform: translateZ(0);
  will-change: scroll-position;
}

/* モバイルデバイスでの最適化 */
@media (max-width: 768px) {
  .lazy-image.thumbnail {
    /* モバイルではボケを軽減 */
    filter: blur(5px);
    transform: scale(1.1) translateZ(0);
  }

  /* タッチデバイスでのパフォーマンス */
  .archive-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* 低スペックデバイス対応 */
@media (prefers-reduced-data: reduce) {
  .lazy-image.thumbnail {
    /* データ節約モードではボケを無効化 */
    filter: none;
    opacity: 0.7;
  }
}

/* 
--------------------------------------------------
カスタムスライドショー - スクラッチ実装
--------------------------------------------------
*/

/* スライダーメインコンテナ */
.custom-slider {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y pinch-zoom; /* 縦スクロールとピンチズームを許可、横スワイプは制御 */
  cursor: grab;
  outline: none; /* デフォルトのアウトラインを無効化 */
  border-radius: 4px;
}

.custom-slider:active {
  cursor: grabbing;
}

/* フォーカス状態（キーボード操作時） */
.custom-slider:focus-visible {
  outline: 2px solid #26375e;
  outline-offset: 4px;
}

/* フォーカス時の操作ヒント（オプション - 必要に応じて表示） */
.custom-slider:focus-visible::after {
  content: "矢印キーで操作";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(38, 55, 94, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  z-index: 20;
  pointer-events: none;
}

/* スライダーコンテナ */
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

/* スライダートラック */
.slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
  user-select: none; /* テキスト選択を無効化 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 各スライド */
.slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像スタイル - 幅ベース、高さ成り行き */
.slide-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 4px;
  user-select: none; /* 画像の選択を無効化 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* 画像のドラッグを無効化 */
}

/* ドットナビゲーション */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.dot:hover {
  background-color: #999;
}

.dot.active {
  background-color: #26375e;
  transform: scale(1.2);
}

/* 画像なしの場合のプレースホルダー */
.detail-image .no-image {
  width: 100%;
  height: 400px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-style: italic;
  flex-direction: column;
}

.detail-image .no-image::before {
  content: "\1F4F7";
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .slider-dots {
    gap: 6px;
    margin-top: 15px;
  }

  .dot {
    width: 6px;
    height: 6px;
  }

  .detail-image .no-image {
    height: 300px;
  }

  /* モバイルではキーボードヒントを非表示 */
  .custom-slider:focus-visible::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .dot {
    width: 6px;
    height: 6px;
  }

  .detail-image .no-image {
    height: 250px;
  }

  /* 小画面でもキーボードヒントを非表示 */
  .custom-slider:focus-visible::after {
    display: none;
  }
}

/* アクセシビリティ対応 */
.dot:focus {
  outline: 2px solid #26375e;
  outline-offset: 2px;
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .slider-track {
    transition: none;
  }

  .dot {
    transition: none;
  }
}

/* タッチデバイス専用スタイル */
@media (hover: none) and (pointer: coarse) {
  .custom-slider {
    cursor: default;
  }

  .custom-slider:active {
    cursor: default;
  }

  /* モバイルではキーボードヒントを非表示 */
  .custom-slider:focus-visible::after {
    display: none;
  }

  /* タッチデバイスでのドットサイズを少し大きく */
  .dot {
    width: 12px;
    height: 12px;
  }
}

/* 非常に小さな画面でのタッチターゲット最適化 */
@media (max-width: 320px) {
  .dot {
    width: 14px;
    height: 14px;
    margin: 0 2px;
  }

  /* 最小画面でもキーボードヒントを非表示 */
  .custom-slider:focus-visible::after {
    display: none;
  }
}