@charset "UTF-8";
/* Video Production Gallery (YouTube grid & modal) */

/* グリッド */
.yt-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  justify-content:center;
  margin-inline:auto;
  max-width:1200px;
}
/* 各セル（サムネ＋キャプション） */
.yt-item{display:flex;flex-direction:column;gap:8px;}
/* サムネイル */
.yt-thumb{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
}
.yt-thumb img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:brightness(.92);
  transition:transform .25s ease,filter .25s ease;
}
.yt-thumb:hover img{filter:brightness(.85);transform:scale(1.02);}
.yt-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:rgba(0,0,0,.55);opacity:0;transition:opacity .15s ease;
}
.yt-play::before{
  content:"";position:absolute;left:29px;top:18px;
  border-style:solid;border-width:18px 0 18px 28px;
  border-color:transparent transparent transparent #fff;
}
.yt-thumb:hover .yt-play{opacity:1;}
/* キャプション（2行構成） */
.yt-cap{text-align:center;margin-top:4px;}
.yt-cap .cap-type{font-size:.8rem !important;font-weight:600;line-height:1.4;color:#333;}
.yt-cap .cap-client{font-size:.75rem !important;line-height:1.3;color:#777;margin-top:2px;}
/* プレースホルダー */
.yt-ph{
  width:100%;height:100%;
  background:#eee linear-gradient(180deg,#f5f5f5,#e8e8e8);
  color:#888;display:grid;place-items:center;
  font-size:.95rem;letter-spacing:.02em;
}
.yt-thumb[aria-disabled="true"]{cursor:default;}

/* ライトボックス */
.yt-modal{position:fixed;inset:0;z-index:99999;}
.yt-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.yt-modal__dialog{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(90vw,1200px);aspect-ratio:16/9;
  background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);padding:0;
}
.yt-modal__player,
.yt-modal__player iframe,
.yt-modal iframe{
  width:100% !important;height:100% !important;
  display:block;max-width:none !important;max-height:none !important;
  aspect-ratio:auto;box-sizing:border-box;
}
.yt-modal__close{
  position:absolute;right:8px;top:8px;width:36px;height:36px;
  background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;
  font-size:22px;line-height:36px;text-align:center;cursor:pointer;
}

/* モーダル表示中の背景スクロール防止 */
body.yt-noscroll {
  overflow: hidden;
  position: relative;
}