/* 全体のリセット */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ヘッダー */
header {
  background-color: #0056aa;
  padding: 20px;
  text-align: center;
  color: #fff;
}

/* タイトル */
header h1 {
  margin-bottom: 10px;
}

header {
  background: linear-gradient(
    to right,             /* 横方向のグラデーション */
    #0056aa,              /* 左側の色 */
    #20b2b2               /* 右側の色 */
  );
  padding: 20px;          /* 内側の余白調整 */
  text-align: center;     /* テキスト中央寄せ */
  color: #fff;            /* 文字色（見やすく） */
}

/* ヘッダーの下にリストをつける */
.sub-nav {
    background-color: #f0f0f0;
    padding: 10px 0;
    text-align: center;
}

.sub-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-nav li {
    padding: 0 15px;
    border-left: 1px solid #ccc; /* 縦線 */
}

.sub-nav li:first-child {
    border-left: none; /* 最初の要素は線なし */
}

.sub-nav a {
    text-decoration: none;
    color: #0056aa;
    padding: 8px 12px;
    display: block;
    transition: background-color 0.3s, color 0.3s; /* アニメーション追加 */
}

.sub-nav a:hover {
    background-color: #318ca8; /* ホバー時の背景色 */
    color: #ffffff; /* 文字の色も変える例 */
}

/* 動画ギャラリー */
.video-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央寄せ */
  padding: 10px;
}
.video-contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左寄せ */
}

video-card-wrapper {
  display: flex;
  flex-wrap: wrap; /* 複数行に折り返す */
  justify-content: flex-start; /* 左寄せ */
  align-items: stretch; /* 高さを揃える */
  gap: 10px; /* 必要に応じて */}

/* 動画カード */
.video-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: calc(33.333% - 20px); /* 3列 */
  height: 90%; /* 親の高さに合わせる */
  display: flex; /* 子要素の縦横を揃えるため */
  flex-direction: column; /* 子要素を縦に並べる */
  margin: 10px;
  overflow: hidden;
  transition: transform 0.2s;
}

/* リンクのテキスト装飾を無くす */
.video-card a {
  text-decoration: none;
  color: inherit; /* もしくは好きな色 */
}
.video-card:hover {
  transform: scale(1.02);
}

/* サムネイル画像 */
.video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* 動画情報 */
.video-info {
  padding: 15px;
}

.video-info h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.video-info p {
  font-size: 0.95em;
  color: #555;
}

/* リンク部分 */
.manual_link {
  margin-left: 150px; /* 左に150pxの余白 */
}

/* 3カラムのレスポンス調整 */
@media (min-width: 900px) {
  .video-card {
    width: 300px;
  }
}

@media(max-width: 899px) {
  .video-gallery {
    justify-content: flex-start; /* 左寄せ */
  }
  .video-card {
    width: 90%; /* 必要に応じて調整 */
    margin: 10px 0 10px 10px; /* 左側にスペース */
  }
}