/* ==================== works.css - 施工実績ページ用スタイル ==================== */
/* モバイルファースト設計：スマートフォン向けのスタイルを基本とし、大画面向けに拡張 */

/* ==================== 基本設定 ==================== */

/* ページ全体のコンテナ：施工実績ページのメインコンテナ */
.works-container {
  /* モバイル基本設定：スマートフォンでの表示を最優先 */
  max-width: 100%;                    /* 画面幅いっぱいに表示 */
  margin: 0 auto;                     /* 中央寄せ */
  padding: 20px 15px 40px;            /* 上20px・左右15px・下40px（モバイル向け小さめ） */
  background-color: #fff;             /* 背景色は白 */
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 日本語フォント */
}

/* ==================== タイトル部分 ==================== */

/* ページタイトル（h2タグ）：「施工実績」の見出し */
.works-container h2 {
  text-align: center;                 /* 中央揃え */
  font-size: 1.5rem;                  /* モバイル向け：少し小さめのフォントサイズ */
  margin-bottom: 15px;                /* 下余白：モバイル向け小さめ */
  color: #2d5936;                     /* 濃いグリーン色 */
  font-weight: 700;                   /* 太字で強調 */
}

/* 説明文（リード文）：ページの概要説明 */
.works-container .lead {
  text-align: center;                 /* 中央揃え */
  color: #555;                        /* グレー色 */
  line-height: 1.7;                   /* 行間：読みやすさを重視 */
  margin-bottom: 30px;                /* 下余白：モバイル向け */
  font-size: 0.9rem;                  /* モバイル向け：少し小さめ */
}

/* ==================== 工事カード一覧 ==================== */

/* グリッドレイアウト：施工事例をカード形式で一覧表示 */
.works-grid {
  display: grid;                                      /* グリッド表示 */
  grid-template-columns: 1fr;                         /* モバイル：1列表示 */
  gap: 15px;                                          /* カード間の隙間：モバイル向け小さめ */
  margin-bottom: 20px;                                /* 下余白 */
}

/* 施工カード：各工事の情報を表示するカード */
.work-card {
  background: #f8f8f8;                               /* 薄いグレー背景 */
  border-radius: 12px;                               /* 角丸：モバイル向け小さめ */
  overflow: hidden;                                   /* はみ出し防止 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);           /* 軽い影：モバイル向け控えめ */
  transition: all 0.3s ease;                         /* ホバー時のスムーズな変化 */
  cursor: pointer;                                    /* クリック可能であることを示す */
}

/* カードホバー時の効果：マウスを乗せた時の動作 */
.work-card:hover {
  transform: translateY(-2px);                       /* 少し上に移動：モバイル向け控えめ */
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);          /* 影を強く */
}

/* 写真ボックス：画像とヒントを含むコンテナ */
.photo-box {
  position: relative;                                /* ヒントテキストの絶対配置のため */
  overflow: hidden;                                  /* はみ出し防止 */
}

/* カード内画像：工事の代表写真 */
.work-card img {
  width: 100%;                                       /* 横幅いっぱい */
  height: 140px;                                     /* モバイル向け：少し低め */
  object-fit: cover;                                 /* 枠内に収まるよう調整 */
  display: block;                                    /* インライン要素の余白をなくす */
  transition: transform 0.3s ease;                   /* ホバー時のスムーズな変化 */
}

/* 画像ホバー時の効果 */
.work-card:hover img {
  transform: scale(1.03);                            /* 少し拡大：モバイル向け控えめ */
}

/* カード内見出し：工事名のタイトル */
.work-card h3 {
  font-size: 1rem;                                   /* モバイル向け：標準サイズ */
  margin: 12px 12px 12px;                           /* 余白：モバイル向け小さめ */
  color: #333;                                       /* 濃いグレー */
  font-weight: 600;                                  /* 少し太字 */
  line-height: 1.4;                                  /* 行間：読みやすさ重視 */
}

/* 写真上のヒントテキスト：初回訪問者向けの操作説明 */
.photo-hint {
  position: absolute;                                /* 絶対配置で画像上に表示 */
  bottom: 6px; left: 6px;                           /* 左下に配置：モバイル向け小さめ */
  background: rgba(0, 0, 0, 0.8);                   /* 半透明黒背景 */
  color: #fff;                                       /* 白文字 */
  padding: 4px 8px;                                 /* 内側余白：モバイル向け小さめ */
  font-size: 0.7rem;                                /* 小さめフォント */
  border-radius: 15px;                              /* 丸みを帯びた角 */
  pointer-events: none;                             /* マウス操作は無効 */
  transition: all 0.3s ease;                        /* スムーズな変化 */
  backdrop-filter: blur(4px);                       /* 背景ぼかし効果 */
}

/* ==================== ローディング表示 ==================== */

/* ローディングスピナー：画像読み込み中の表示 */
.loading-spinner {
  display: none;                                     /* 初期状態では非表示 */
  position: fixed;                                   /* 画面に固定表示 */
  top: 50%; left: 50%;                              /* 画面中央に配置 */
  transform: translate(-50%, -50%);                  /* 中央寄せ調整 */
  z-index: 10000;                                   /* 最前面に表示 */
  text-align: center;                               /* 中央揃え */
  color: #333;                                       /* 文字色 */
}

/* ローディング表示時 */
.loading-spinner.show {
  display: block;                                    /* 表示する */
}

/* スピナーアニメーション：回転する円 */
.spinner {
  width: 30px; height: 30px;                        /* モバイル向け：小さめサイズ */
  border: 3px solid #f3f3f3;                        /* 外枠の色 */
  border-top: 3px solid #2d5936;                    /* 上部分の色（回転部分） */
  border-radius: 50%;                               /* 円形 */
  animation: spin 1s linear infinite;                /* 回転アニメーション */
  margin: 0 auto 8px;                               /* 中央寄せ・下余白 */
}

/* 回転アニメーションの定義 */
@keyframes spin {
  0% { transform: rotate(0deg); }                    /* 開始：0度 */
  100% { transform: rotate(360deg); }                /* 終了：360度 */
}

/* ローディングテキスト */
.loading-spinner p {
  font-size: 0.8rem;                                /* 小さめフォント */
  margin: 0;                                         /* 余白なし */
}

/* ==================== モーダル（画像拡大表示） ==================== */

/* モーダル背景：画像拡大時の全画面オーバーレイ */
.modal {
  display: none;                                     /* 初期状態では非表示 */
  position: fixed;                                   /* 画面に固定 */
  z-index: 9999;                                    /* 最前面に表示 */
  left: 0; top: 0;                                  /* 画面全体をカバー */
  width: 100%; height: 100%;                        /* 画面全体のサイズ */
  background: rgba(0, 0, 0, 0.95);                  /* 半透明黒背景 */
  backdrop-filter: blur(8px);                       /* 背景ぼかし効果 */
  opacity: 0;                                        /* 初期状態では透明 */
  transition: opacity 0.3s ease;                    /* フェードイン・アウト */
}

/* モーダル表示時 */
.modal.show {
  opacity: 1;                                        /* 完全に表示 */
}

/* モーダルコンテンツ：画像とコントロールを含むコンテナ */
.modal-content {
  position: relative;                                /* 子要素の絶対配置のため */
  width: 100%; height: 100%;                        /* 画面全体のサイズ */
  display: flex;                                     /* フレックスボックス */
  flex-direction: column;                            /* 縦方向に配置 */
  background: rgba(255, 255, 255, 0.02);           /* 薄い白背景 */
  overflow: hidden;                                  /* はみ出し防止 */
  transform: scale(0.95);                           /* 初期状態では少し小さく */
  transition: transform 0.3s ease;                  /* スムーズな拡大 */
}

/* モーダル表示時のコンテンツ */
.modal.show .modal-content {
  transform: scale(1);                               /* 通常サイズに拡大 */
}

/* ==================== モーダル内のコントロール ==================== */

/* 閉じるボタン：モーダルを閉じるためのXボタン */
.close {
  position: absolute;                                /* 絶対配置 */
  top: 10px; right: 10px;                          /* 右上に配置：モバイル向け */
  color: white;                                      /* 白色 */
  font-size: 1.5rem;                                /* モバイル向け：少し小さめ */
  font-weight: bold;                                 /* 太字 */
  cursor: pointer;                                   /* クリック可能 */
  z-index: 10001;                                   /* 最前面 */
  background: rgba(0, 0, 0, 0.6);                   /* 半透明黒背景 */
  width: 36px; height: 36px;                        /* モバイル向け：小さめサイズ */
  border: none;                                      /* 枠線なし */
  border-radius: 50%;                               /* 円形 */
  display: flex;                                     /* フレックスボックス */
  align-items: center;                              /* 縦中央揃え */
  justify-content: center;                          /* 横中央揃え */
  transition: all 0.3s ease;                        /* スムーズな変化 */
  backdrop-filter: blur(10px);                      /* 背景ぼかし */
}

/* 閉じるボタンホバー時 */
.close:hover {
  background: rgba(0, 0, 0, 0.8);                   /* 背景を濃く */
  transform: scale(1.1);                            /* 少し拡大 */
}

/* ズームコントロール：拡大・縮小・リセットボタン群 */
.zoom-controls {
  position: absolute;                                /* 絶対配置 */
  top: 10px; left: 10px;                           /* 左上に配置：モバイル向け */
  display: flex;                                     /* 横並び */
  gap: 6px;                                         /* ボタン間の隙間：モバイル向け小さめ */
  z-index: 10001;                                   /* 最前面 */
}

/* ズームボタン：個別のズーム操作ボタン */
.zoom-btn {
  background: rgba(0, 0, 0, 0.6);                   /* 半透明黒背景 */
  color: white;                                      /* 白文字 */
  border: none;                                      /* 枠線なし */
  width: 32px; height: 32px;                        /* モバイル向け：小さめサイズ */
  border-radius: 50%;                               /* 円形 */
  font-size: 1rem;                                  /* モバイル向けフォントサイズ */
  font-weight: bold;                                 /* 太字 */
  cursor: pointer;                                   /* クリック可能 */
  transition: all 0.3s ease;                        /* スムーズな変化 */
  backdrop-filter: blur(10px);                      /* 背景ぼかし */
  display: flex;                                     /* フレックスボックス */
  align-items: center;                              /* 縦中央揃え */
  justify-content: center;                          /* 横中央揃え */
}

/* ズームボタンホバー時 */
.zoom-btn:hover {
  background: rgba(0, 0, 0, 0.8);                   /* 背景を濃く */
  transform: scale(1.1);                            /* 少し拡大 */
}

/* ==================== 画像スライダー ==================== */

/* スライダー全体：画像表示とナビゲーションを含むコンテナ */
.slider {
  position: relative;                                /* 子要素の絶対配置のため */
  width: 100%; height: 100%;                        /* 画面全体のサイズ */
  display: flex;                                     /* フレックスボックス */
  flex-direction: column;                            /* 縦方向に配置 */
}

/* メイン画像エリア：拡大表示される画像の表示領域 */
.slider-images {
  flex: 1;                                          /* 残りスペースを全て使用 */
  position: relative;                               /* 子要素の絶対配置のため */
  display: flex;                                    /* フレックスボックス */
  align-items: center;                              /* 縦中央揃え */
  justify-content: center;                          /* 横中央揃え */
  overflow: hidden;                                 /* はみ出し防止 */
  min-height: 0;                                    /* 最小高さ制限なし */
  padding: 60px 10px 10px;                         /* モバイル向け：小さめ余白 */
  cursor: zoom-in;                                  /* ズーム可能であることを示す */
  user-select: none;                                /* テキスト選択無効 */
  touch-action: pan-x pan-y pinch-zoom;             /* タッチ操作：パンとピンチズームを許可 */
}

/* ドラッグ中のカーソル */
.slider-images.dragging {
  cursor: grabbing !important;                      /* ドラッグ中のカーソル */
}

/* 画像コンテナ：個別の画像を包むコンテナ */
.image-container {
  position: absolute;                               /* 絶対配置で重ね合わせ */
  width: 100%; height: 100%;                       /* 親要素と同じサイズ */
  display: flex;                                    /* フレックスボックス */
  align-items: center;                              /* 縦中央揃え */
  justify-content: center;                          /* 横中央揃え */
  opacity: 0;                                       /* 初期状態では透明 */
  transition: opacity 0.4s ease;                   /* フェードイン・アウト */
}

/* アクティブな画像コンテナ */
.image-container.active {
  opacity: 1;                                       /* 完全に表示 */
}

/* メイン画像：拡大表示される実際の画像 */
.slider-images img {
  max-width: 95%;                                   /* モバイル向け：画面幅の95% */
  max-height: 95%;                                  /* モバイル向け：画面高さの95% */
  width: auto; height: auto;                        /* アスペクト比を維持 */
  object-fit: contain;                              /* 枠内に収める */
  border-radius: 6px;                               /* 角丸：モバイル向け小さめ */
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);         /* 影効果 */
  cursor: zoom-in;                                  /* ズーム可能 */
  transform-origin: center center;                  /* 変形の中心点 */
  transition: none;                                 /* トランジションなし（JSで制御） */
  user-select: none;                                /* テキスト選択無効 */
  -webkit-user-drag: none;                          /* 画像ドラッグ無効 */
}

/* 4:3画像の最適化表示：JPG画像用の特別設定 */
.slider-images img[src*=".JPG"],
.slider-images img[src*=".jpg"] {
  max-width: 90%;                                   /* モバイル向け：少し大きめ表示 */
  max-height: 90%;                                  /* モバイル向け：少し大きめ表示 */
}

/* ズーム済み画像のカーソル */
.slider-images img.zoomed {
  cursor: grab;                                     /* ドラッグ可能 */
}

.slider-images img.zoomed:active {
  cursor: grabbing;                                 /* ドラッグ中 */
}

/* 遅延読み込み画像：読み込み前の状態 */
.lazy-load {
  opacity: 0;                                       /* 読み込み前は透明 */
  transition: opacity 0.3s ease;                   /* フェードイン */
}

/* 遅延読み込み完了後 */
.lazy-load.loaded {
  opacity: 1;                                       /* 完全に表示 */
}

/* ==================== ナビゲーションボタン ==================== */

/* 前後の画像に移動するボタン */
.nav-btn {
  position: absolute;                               /* 絶対配置 */
  top: 50%;                                        /* 縦中央 */
  transform: translateY(-50%);                     /* 中央寄せ調整 */
  background: rgba(255, 255, 255, 0.9);           /* 半透明白背景 */
  color: #333;                                     /* 濃いグレー文字 */
  border: none;                                    /* 枠線なし */
  font-size: 1.5rem;                              /* モバイル向けフォントサイズ */
  font-weight: bold;                               /* 太字 */
  padding: 12px 16px;                             /* 内側余白：モバイル向け */
  cursor: pointer;                                 /* クリック可能 */
  border-radius: 8px;                             /* 角丸：モバイル向け小さめ */
  transition: all 0.3s ease;                      /* スムーズな変化 */
  z-index: 10000;                                 /* 前面に表示 */
  backdrop-filter: blur(10px);                    /* 背景ぼかし */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);        /* 影効果 */
  user-select: none;                               /* テキスト選択無効 */
}

/* 前の画像ボタン */
.nav-btn.prev {
  left: 10px;                                      /* 左端に配置：モバイル向け */
}

/* 次の画像ボタン */
.nav-btn.next {
  right: 10px;                                     /* 右端に配置：モバイル向け */
}

/* ナビゲーションボタンホバー時 */
.nav-btn:hover {
  background: white;                               /* 背景を白に */
  transform: translateY(-50%) scale(1.05);        /* 少し拡大：モバイル向け控えめ */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);        /* 影を強く */
}

/* ナビゲーションボタン押下時 */
.nav-btn:active {
  transform: translateY(-50%) scale(0.98);        /* 少し縮小 */
}

/* ==================== 情報表示 ==================== */

/* カウンター：現在の画像番号表示 */
.slider-counter {
  position: absolute;                              /* 絶対配置 */
  top: 10px;                                      /* 上端に配置：モバイル向け */
  left: 50%;                                      /* 横中央 */
  transform: translateX(-50%);                    /* 中央寄せ調整 */
  background: rgba(0, 0, 0, 0.7);                /* 半透明黒背景 */
  color: white;                                   /* 白文字 */
  padding: 8px 16px;                             /* 内側余白：モバイル向け */
  border-radius: 20px;                           /* 丸みを帯びた角 */
  font-size: 0.9rem;                             /* モバイル向けフォントサイズ */
  font-weight: 500;                              /* 少し太字 */
  z-index: 10000;                                /* 前面に表示 */
  backdrop-filter: blur(10px);                   /* 背景ぼかし */
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);       /* 影効果 */
  user-select: none;                              /* テキスト選択無効 */
}

/* ズームヒント：操作方法の説明 */
.zoom-hint {
  position: absolute;                             /* 絶対配置 */
  bottom: 80px;                                  /* 下から80pxの位置：モバイル向け */
  left: 50%;                                     /* 横中央 */
  transform: translateX(-50%);                   /* 中央寄せ調整 */
  background: rgba(0, 0, 0, 0.6);               /* 半透明黒背景 */
  color: white;                                  /* 白文字 */
  padding: 6px 12px;                            /* 内側余白：モバイル向け */
  border-radius: 15px;                          /* 丸みを帯びた角 */
  font-size: 0.75rem;                           /* 小さめフォント */
  z-index: 10000;                               /* 前面に表示 */
  backdrop-filter: blur(10px);                  /* 背景ぼかし */
  opacity: 0.8;                                 /* 少し透明 */
  transition: opacity 0.3s ease;                /* フェードイン・アウト */
  user-select: none;                             /* テキスト選択無効 */
}

/* ヒント非表示時 */
.zoom-hint.hidden {
  opacity: 0;                                    /* 完全に透明 */
}

/* ==================== サムネイル ==================== */

/* サムネイル表示エリア：画像一覧の小さな表示 */
.thumbnails {
  padding: 15px;                                 /* 内側余白：モバイル向け */
  display: flex;                                 /* 横並び */
  gap: 8px;                                     /* サムネイル間の隙間：モバイル向け */
  justify-content: center;                       /* 中央揃え */
  flex-wrap: wrap;                              /* 折り返し表示 */
  background: rgba(0, 0, 0, 0.4);               /* 半透明黒背景 */
  backdrop-filter: blur(15px);                  /* 背景ぼかし */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* 上部に薄い境界線 */
}

/* サムネイル画像：クリックで該当画像に移動 */
.thumb {
  width: 50px; height: 38px;                    /* モバイル向け：小さめサイズ */
  object-fit: cover;                             /* 枠内に収める */
  border-radius: 6px;                           /* 角丸：モバイル向け */
  cursor: pointer;                               /* クリック可能 */
  opacity: 0.6;                                  /* 少し透明 */
  transition: all 0.3s ease;                    /* スムーズな変化 */
  border: 2px solid transparent;                /* 透明な境界線（選択時に表示） */
  user-select: none;                             /* テキスト選択無効 */
  -webkit-user-drag: none;                       /* 画像ドラッグ無効 */
}

/* サムネイルホバー時 */
.thumb:hover {
  opacity: 0.8;                                  /* 少し濃く */
  transform: scale(1.05);                       /* 少し拡大 */
}

/* アクティブなサムネイル：現在表示中の画像 */
.thumb.active {
  opacity: 1;                                    /* 完全に表示 */
  border-color: #fff;                           /* 白い境界線 */
  box-shadow: 0 2px 8px rgba(255,255,255,0.3); /* 白い影効果 */
}

/* ==================== ユーティリティ ==================== */

/* スクロール無効化：モーダル表示時に背景のスクロールを防ぐ */
.no-scroll {
  overflow: hidden;                              /* スクロール無効 */
}

/* ==================== タブレット向けスタイル（481px以上） ==================== */
@media screen and (min-width: 481px) {
  /* タブレット向けの調整：スマートフォンより少し大きな画面 */
  
  .works-container {
    padding: 30px 20px 50px;                    /* 余白を少し大きく */
  }
  
  .works-grid {
    grid-template-columns: repeat(2, 1fr);       /* 2列表示 */
    gap: 20px;                                   /* 隙間を大きく */
  }
  
  .work-card img {
    height: 160px;                               /* タブレット向け：少し高く */
  }
  
  .work-card h3 {
    font-size: 1.1rem;                          /* フォントサイズを大きく */
    margin: 15px 15px 15px;                     /* 余白を大きく */
  }
  
  .thumb {
    width: 60px; height: 45px;                  /* サムネイルを少し大きく */
  }
  
  .slider-images {
    padding: 70px 20px 15px;                    /* 余白調整 */
  }
  
  .nav-btn {
    padding: 14px 18px;                         /* ボタンを少し大きく */
  }
}

/* ==================== PC向けスタイル（769px以上） ==================== */
@media screen and (min-width: 769px) {
  /* PC向けの調整：デスクトップ画面での表示 */
  
  .works-container {
    max-width: 1100px;                          /* 最大幅を設定 */
    padding: 60px 40px 80px;                    /* 余白を大きく */
  }
  
  .works-container h2 {
    font-size: 2rem;                            /* タイトルを大きく */
    margin-bottom: 25px;                        /* 下余白を大きく */
  }
  
  .works-container .lead {
    font-size: 1rem;                            /* 説明文を大きく */
    margin-bottom: 50px;                        /* 下余白を大きく */
  }
  
  .works-grid {
    grid-template-columns: repeat(3, 1fr);      /* 3列表示 */
    gap: 30px;                                  /* 隙間をさらに大きく */
  }
  
  .work-card img {
    height: 200px;                              /* PC向け：高さを大きく */
  }
  
  .work-card h3 {
    font-size: 1.2rem;                          /* タイトルを大きく */
    margin: 20px 20px 20px;                     /* 余白を大きく */
  }
  
  .close {
    top: 20px; right: 20px;                     /* 位置調整 */
    width: 44px; height: 44px;                  /* サイズを大きく */
    font-size: 1.8rem;                          /* フォントを大きく */
  }
  
  .zoom-controls {
    top: 20px; left: 20px;                      /* 位置調整 */
  }
  
  .zoom-btn {
    width: 40px; height: 40px;                  /* サイズを大きく */
    font-size: 1.2rem;                          /* フォントを大きく */
  }
  
  .slider-images {
    padding: 100px 60px 20px;                   /* 余白を大きく */
  }
  
  .nav-btn {
    font-size: 1.8rem;                          /* フォントを大きく */
    padding: 16px 20px;                         /* 余白を大きく */
  }
  
  .nav-btn.prev {
    left: 30px;                                 /* 位置調整 */
  }
  
  .nav-btn.next {
    right: 30px;                                /* 位置調整 */
  }
  
  .slider-counter {
    top: 20px;                                  /* 位置調整 */
    font-size: 1.1rem;                          /* フォントを大きく */
    padding: 12px 24px;                         /* 余白を大きく */
  }
  
  .zoom-hint {
    bottom: 120px;                              /* 位置調整 */
    font-size: 0.9rem;                          /* フォントを大きく */
    padding: 8px 16px;                          /* 余白を大きく */
  }
  
  .thumbnails {
    padding: 20px;                              /* 余白を大きく */
    gap: 12px;                                  /* 隙間を大きく */
  }
  
  .thumb {
    width: 80px; height: 60px;                  /* PC向け：サムネイルを大きく */
  }
}

/* ==================== 大画面向けスタイル（1200px以上） ==================== */
@media screen and (min-width: 1200px) {
  /* 大画面向けの調整：高解像度ディスプレイでの表示 */
  /* 3列表示を維持（4列表示は削除） */
  
  .slider-images {
    padding: 120px 100px 20px;                  /* 余白をさらに大きく */
  }
  
  .nav-btn.prev {
    left: 50px;                                 /* 位置をさらに調整 */
  }
  
  .nav-btn.next {
    right: 50px;                                /* 位置をさらに調整 */
  }
  
  /* 大画面では4:3画像をより大きく表示 */
  .slider-images img[src*=".JPG"],
  .slider-images img[src*=".jpg"] {
    max-width: 85%;                             /* 大画面向け：さらに大きく */
    max-height: 85%;                            /* 大画面向け：さらに大きく */
  }
}

/* ==================== 印刷用スタイル ==================== */
@media print {
  /* 印刷時の調整：不要な要素を非表示 */
  
  .modal,
  .zoom-controls,
  .nav-btn,
  .photo-hint,
  .loading-spinner {
    display: none !important;                   /* 印刷時は非表示 */
  }
  
  .works-container {
    max-width: none;                            /* 幅制限なし */
    padding: 0;                                 /* 余白なし */
  }
  
  .work-card {
    break-inside: avoid;                        /* ページ分割を避ける */
  }
}