@charset "utf-8";
/* ========== SHORTS 無限ループ / CSS 全体 ========== */

.youtubeShorts_wrapper{
  background:#F4F3EE;
  padding:5% 0 52px;
}

@media screen and (max-width:600px){
  .youtubeShorts_wrapper{
    background:#F4F3EE;
    /*margin: 50px 0;*/
  }
}

/* ビュー枠：はみ出しを隠す */
.youtubeShorts_inner{
  margin:10px 0 50px;
  overflow:hidden;
}

/* トラック：横並びで左へ等速アニメーション */
.youtube-shorts-gallery{
  display:flex;
  align-items:stretch;
  will-change: transform;
  animation: shorts-scroll var(--shorts-speed, 40s) linear infinite;
}

/* カード（Shorts 縦長 9:16） */
.youtube-short-video{
  position:relative;
  flex:0 0 240px;       /* 1枚の幅：好みで 200〜280px くらいに調整OK */
  aspect-ratio:9/16;
  overflow:hidden;
  background:#000;      /* 読み込み中の下地 */
  cursor:pointer;       /* クリックできそう感 */
}

/* クリック用の透明オーバーレイ */
.youtube-short-overlay{
  position:absolute;
  inset:0;              /* top:0; right:0; bottom:0; left:0; */
  z-index:2;
  display:block;
  background:rgba(0,0,0,0.001);
  text-indent:0;   /* アクセシビリティ用のテキストを視覚的に隠す */
}

/* aspect-ratio 非対応ブラウザフォールバック */
@supports not (aspect-ratio: 9/16) {
  .youtube-short-video{
    height:0;
    padding-bottom:177.78%; /* 9/16 */
  }
}

/* 中の iframe を全体にフィットさせる */
.youtube-short-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
	pointer-events:none;
}

/* ホバーで一時停止（見たい時に止められる） */
.youtube-shorts-gallery:hover{
  animation-play-state: paused;
}

/* 動きを減らす設定のユーザーには停止 */
@media (prefers-reduced-motion: reduce){
  .youtube-shorts-gallery{
    animation: none !important;
  }
}

/* レスポンシブ微調整 */
@media (max-width: 1024px){
  .youtubeShorts_inner{ margin:40px 4%; }
  .youtube-short-video{ flex-basis:200px; }
}
@media (max-width: 599px){
  .youtubeShorts_inner{ margin:0; }
  .youtube-short-video{ flex-basis:180px; }
}

/* 無限ループアニメーション
   JS側で --shorts-distance を設定している前提
   していない場合は 50% にしてOK */
@keyframes shorts-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--shorts-distance, 50%))); }
}