@charset "utf-8";

/* ==========================================================================
   [mov_] Movie Page Specific Styles
   ========================================================================== */

/* ブロック間の余白 */
.mov_block {
  margin-bottom: 100px;
}
.mov_block:last-child {
  margin-bottom: 0; /* 最後のブロックの下余白は消す */
}

/* チャンネル名（h2見出し） */
.mov_channel_title {
  font-size: var(--fs-md);
  font-weight: bold;
  color: var(--color-text-main);
  margin: 0;
  letter-spacing: 0.05em;
  /* 共通ヘッダー（cm_section_header）内で上下中央に揃えるための微調整 */
  line-height: 1.2;
}

/* --- 動画リスト（PCは5列グリッド） --- */
.mov_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5つを均等に並べる */
  gap: 20px;
}

/* 動画アイテムのリンク */
.mov_link {
  display: block;
  text-decoration: none;
  color: var(--color-text-main);
}

/* サムネイル画像エリア（16:9比率を強制） */
.mov_thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 動画の標準比率 */
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: var(--color-bg-light); /* 読み込み前のプレースホルダー色 */
}

.mov_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を保ってサムネイルを埋める */
  transition: transform var(--transition-base); /* ホバー時のアニメーション時間 */
}

/* ホバー時の動き（画像が少し拡大する） */
.mov_link:hover .mov_thumb img {
  transform: scale(1.05);
}

/* 動画タイトル */
.mov_ttl {
  font-size: var(--fs-xs); /* 5列で狭いので文字は小さめに */
  line-height: 1.5;
  margin: 0;
  font-weight: bold;
  /* 2行で末尾を「...」にする魔法のCSS */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   SP Responsive (Max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .mov_block {
    margin-bottom: 60px;
  }

  /* 共通ヘッダーをスマホでは縦並び＋横幅いっぱいに */
  .mov_block .cm_section_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    border-bottom: none; /* スマホでは線を消してスッキリさせる */
    margin-bottom: 25px; /* リストとの余白を調整 */
  }

  /* 動画リスト：スマホは横スワイプ（スクロール）にする！ */
  /* ※ cm_innerの左右padding(24px)を無視して画面端までスクロールさせるテクニック */
  .mov_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2つを均等に並べる */
    gap: 20px 10px; /* 縦の隙間20px、横の隙間10px */
  }

  /* 1つの動画の幅を固定 */
  .mov_item {
    min-width: auto;
  }

  .mov_ttl {
    font-size: var(--fs-xs); /* 2列だと幅が狭いので、文字は小さめでスッキリと */
    line-height: 1.4;
  }

  .mov_item:nth-child(n + 5) {
    display: none;
  }
}