@charset "UTF-8";
/* Graphic Design Carousel */

/* ルート */
.gd-carousel{
  --gd-aspect: 4/3;          /* data-aspect で上書き可 */
  --gd-gap: 12px;
  --gd-radius: 14px;
  --gd-shadow: 0 8px 28px rgba(0,0,0,.16);
  --gd-per-view: 5;          /* JSがブレークポイントで更新 */
  --gd-tran: 520ms ease;     /* スライド速度 */
  position: relative;
  padding: 8px 40px;         /* 矢印のスペース確保 */
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.gd-carousel__title{
  margin: 0 0 10px;
  font-size: clamp(18px, 2vw, 22px);
}
.gd-carousel__viewport{
  overflow: hidden;
  position: relative;
}
.gd-carousel__track{
  display: flex;
  gap: var(--gd-gap);
  will-change: transform;
  transition: transform var(--gd-tran);
}
.gd-slide{
  flex: 0 0 calc((100% - (var(--gd-gap) * (var(--gd-per-view) - 1))) / var(--gd-per-view));
  list-style: none;
}
.gd-slide .gd-media{
  position: relative;
  width: 100%;
  aspect-ratio: var(--gd-aspect);
  border-radius: var(--gd-radius);
  overflow: hidden;
  box-shadow: var(--gd-shadow);
  background: #111;          /* 読み込み時の下地 */
  isolation: isolate;        /* ぼかし背景の重なり安全化 */
}
/* ぼかし背景（見切れ防止の自然な充填） */
.gd-slide .gd-media::before{
  content: "";
  position: absolute; inset: -10%;
  background-image: var(--gd-bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.05) brightness(.9);
  transform: scale(1.1);
  z-index: -1;
}
.gd-img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 見切れ/過拡大なしで収める */
  object-position: center;
  display: block;
  background: transparent;
}

/* 矢印：視認性を落とさないミニマル設計 */
.gd-nav{
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
  z-index: 3;
}
.gd-prev{ left: 8px; }
.gd-next{ right: 8px; }
.gd-nav:hover{ background: rgba(0,0,0,.28); }
.gd-nav:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.gd-nav__chev{ line-height: 1; font-size: 20px; }

/* ドット：簡潔＆低干渉 */
.gd-dots{
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin-top: 10px;
}
.gd-dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .7;
}
.gd-dot.is-active{
  transform: scale(1.35);
  opacity: 1;
}

/* ─────────────────────────────
   ライトボックス（ポップアップ）
   ───────────────────────────── */
.gd-lightbox{
  position: fixed; inset: 0;
  display: none;                 /* ← 初期は非表示 */
  background: rgba(0,0,0,.85);
  z-index: 9999;
}
.gd-lightbox.is-open{
  display: grid;                 /* ← 開いた時のみ表示 */
  place-items: center;           /* 常に中央寄せ */
}

.gd-lightbox__backdrop{
  position: absolute; inset: 0;
}

.gd-lightbox__inner{
  max-width: 92vw; 
  max-height: 84vh;
  display: flex;                  /* キャプション下配置のため縦並び */
  flex-direction: column;
  align-items: center;            /* 水平方向の中央 */
  justify-content: center;        /* 垂直方向の中央 */
  gap: 12px;
  position: relative;
}

.gd-lightbox__img{
  max-width: 92vw; 
  max-height: 72vh; 
  object-fit: contain;            /* 画像を収める（切り抜かない） */
  object-position: center;
  margin: auto;                   /* 念のため中央寄せを補強 */
  display: block;
}

.gd-lightbox__cap{
  color: #fff; 
  font-size: clamp(14px, 1.6vw, 16px);
  text-align: left;
  width: 100%;
}

.gd-lightbox__close{
  position: absolute;
  top: 0;                        /* 画像上に揃える */
  left: 100%;                    /* 画像の右外に配置 */
  margin-left: 8px;              /* 少し隙間を空ける */
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.25);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .gd-carousel{ padding: 8px 36px; }
}
@media (max-width: 768px){
  .gd-carousel{ padding: 6px 32px; }
  .gd-nav{ width: 32px; height: 32px; }
}

/* 動きを控える環境配慮 */
@media (prefers-reduced-motion: reduce){
  .gd-carousel__track{ transition: none !important; }
  .gd-nav, .gd-dot{ transition: none !important; }
}