@charset "UTF-8";

main {
  padding: 120px 0;
}

p.subtitle {
  font-size: 20px;
  text-align: center;
  margin-bottom: 120px;
}

/*-------------------------------------------
WORKS
-------------------------------------------*/
.works-list {
  display: grid;
  gap: 19px;
  grid-template-columns: repeat(4, 1fr);
}

.works-list img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%; /* 常に中央基準 */
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 120px 0 0;
}

/* 共通ボタン */
.page-numbers {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* ← center → flex-start に変更 */
  width: 40px;
  height: 40px;
  border: 1px solid #303030;
  border-radius: 50%;
  background-color: #fff;
  color: #303030;
  font-family: "Agbalumo", sans-serif;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  flex-shrink: 0;
  padding-top: 8px;
}

/* 現在ページ */
.page-numbers.current {
  background-color: #303030;
  color: #fff;
}

/* 前へ・次へ */
.prev.page-numbers,
.next.page-numbers {
  font-size: 16px;
  line-height: 1;
}

body.noscroll {
  overflow: hidden;
  /* 背景スクロール停止 */
}

/* Lightbox背景 */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  z-index: 20;
  align-items: flex-start; /* center → 上寄せ */
  padding: 32px 0px; /* 上の隙間 + 左右余白 */
  overflow-y: auto;
}

/* Lightbox白地 */
.lightbox-content {
  background: var(--color-wh);
  padding: 50px 50px;
  max-width: 546px;
  position: relative;
  margin: 0 auto; /* 横だけ中央 */
  max-height: calc(100vh - 64px); /* padding上下(32px*2)分を引く */
  overflow: auto; /* 中身が長い時は中だけスクロール */
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタン */
.close-btn {
  position: absolute;
  top: 25px;
  right: 25px;
  cursor: pointer;
}

.close-btn img {
  width: 28px;
  height: 28px;
}

#lightboxClient {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.4;
}

#lightboxRole {
  font-size: var(--font-size-14);
  font-weight: 400;
  line-height: 1.4;
}

#lightboxDesc {
  font-size: var(--font-size-14);
  line-height: 1.4;
  margin-bottom: 8px;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 共通（全デバイス） */
.work-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* ホバーできる端末（＝PC）だけ */
@media (hover: hover) {
  .work-thumb:hover {
    opacity: 0.75;
    transform: scale(1.02);
  }
}

/* =========================
   Swiper for Lightbox（PATCH）
========================= */

/* Swiperの表示領域を作る（超重要） */
#lightboxSwiper {
  width: 446px;
  /* 旧 lightboxImg と同じ */
  aspect-ratio: 4 / 5;
  margin: 12px auto 16px;
  position: relative;
  overflow: hidden;
  background: var(--color-wh);
}

/* Swiper構造を成立させる */
#lightboxSwiper .swiper-wrapper,
#lightboxSwiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* 中身（画像・動画）を100%表示 */
#lightboxSwiper img,
#lightboxSwiper video {
  width: 100%;
  height: 100%;
  display: block;
}

/* 画像はトリミングOK */
#lightboxSwiper .swiper-slide.is-image img {
  object-fit: cover;
}

/* 動画は切らない */
#lightboxSwiper .swiper-slide.is-video video {
  object-fit: contain;
}

/* ナビ */
#lightboxSwiper {
  --swiper-navigation-sides-offset: 12px;
  /* 端からの距離（任意） */
}

#lightboxSwiper .swiper-button-next,
#lightboxSwiper .swiper-button-prev {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

#lightboxSwiper .swiper-button-next::after,
#lightboxSwiper .swiper-button-prev::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: var(--color-bl);
  font-size: 1.25rem;
}

#lightboxSwiper .swiper-button-next::after {
  content: "\f054";
  /* FontAwesomeの右矢印 */
}

#lightboxSwiper .swiper-button-prev::after {
  content: "\f053";
  /* FontAwesomeの左矢印 */
}

/* デフォルトの矢印消すために */
#lightboxSwiper .swiper-button-next svg,
#lightboxSwiper .swiper-button-prev svg,
#lightboxSwiper .swiper-button-next img,
#lightboxSwiper .swiper-button-prev img {
  display: none !important;
}

#lightboxSwiper .swiper-button-next::after,
#lightboxSwiper .swiper-button-prev::after {
  --swiper-navigation-size: 0px;
}

/* 無効な矢印は完全に消す */
#lightboxSwiper .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ページネーション */
/* 通常ドット */
#lightboxSwiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  margin: 0 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    width 0.2s ease;
}

/* アクティブ */
#lightboxSwiper .swiper-pagination-bullet-active {
  width: 16px;
  /* ← 差が一目で分かる */
  border-radius: 999px;
  /* 点 → ピル形 */
  background: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* WP化：buttonでも見た目を崩さない */
.work-thumb {
  background: none;
  border: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  width: 100%;
}

/* 既存の .works-list img のままでOKだけど、button内を明示するなら */
.works-list .work-thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

#lightbox .works-video {
  width: 100%;
  height: auto;
  display: block;
}

/* モーダル本体を基準に absolute を効かせる */
.lightbox-content {
  position: relative;
}

/* 閉じるボタンを最前面に */
.close-btn {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 9999;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.close-btn img {
  display: block;
  width: 28x; /* 好みで */
  height: 28px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  main {
    padding: 48px 0 40px;
  }

  h2 {
    margin-bottom: 16px;
  }

  p.subtitle {
    font-size: var(--font-size-16);
    margin-bottom: 40px;
  }

  .works-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
  }

  .lightbox {
    z-index: 40;
    align-items: flex-start;
    padding: 16px 0 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .lightbox-content {
    max-height: none;
    overflow: visible;
    background: none;
    width: calc(100% - 24px);
    max-width: 375px;
    padding: 0;
    margin: 0 auto;
    padding: 36px 16px;
  }

  .close-btn {
    position: fixed;
    top: 25px;
    right: 25px;
  }

  .close-btn img {
    width: 23px;
    height: 23px;
    filter: brightness(0) invert(1);
  }

  #lightboxClient {
    color: var(--color-wh);
    font-size: 18px;
  }

  #lightboxImg {
    width: 100%;
  }

  #lightboxRole {
    font-size: var(--font-size-14);
    color: var(--color-wh);
  }

  #lightboxDesc {
    color: var(--color-wh);
  }

  #lightboxSwiper {
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  #lightboxSwiper .swiper-button-prev,
  #lightboxSwiper .swiper-button-next {
    color: #fff;
  }

  #lightboxSwiper {
    --swiper-navigation-sides-offset: 8px;
    /* 端からの距離（任意） */
  }

  #lightboxSwiper .swiper-button-next,
  #lightboxSwiper .swiper-button-prev {
    width: 28px;
    height: 28px;
  }

  #lightboxSwiper .swiper-button-next::after,
  #lightboxSwiper .swiper-button-prev::after {
    font-size: 1rem;
  }
}

/* =========================
   Swiper for Lightbox（FINAL）
   - 重複定義を1か所に統一
   - 画像も動画も同じ枠（4:5）で表示
   - 比率は崩さず contain
========================= */

/* 枠（表示サイズの基準） */
#lightboxSwiper {
  aspect-ratio: 4 / 5;
  margin: 12px auto 16px;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Swiper構造 */
#lightboxSwiper .swiper-wrapper,
#lightboxSwiper .swiper-slide {
  width: 100%;
  height: 100%;
}

#lightboxSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中身（画像・動画）：統一ルール */
#lightboxSwiper img,
#lightboxSwiper video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.nav-links {
  margin: 40px 0 0;
}