.youtube-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;               /* 列間・行間を同時に指定 */
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.youtube-item {
  position: relative;
  cursor: pointer;
  display: block;
}

.youtube-item img {
  width: 100%;
  height: 180px;   /* 任意で調整可能 */
  object-fit: cover;  /* 画像をトリミングして比率を統一 */
  border-radius: 8px;
  display: block;
}

.youtube-item p.video-title {
  text-align: center;   /* 中央揃え */
  margin-top: 10px;
  font-size: 15px;      /* 少し読みやすく調整可 */
  font-weight: 600;     /* 少し濃くして読みやすく */
  color: #333;
  line-height: 1.4;
}

.youtube-item p.video-label {
  text-align: center;       
  font-size: 16px;               /* 「動画で確認する」ラベルのフォントサイズ */
  font-weight: 700;               /* 太字 */
  color: #0073e6;                 /* 寒色系青色 */
  margin: 0 auto;                 /* 自動で中央揃え */
  padding: 4px 8px;               
  background-color: #e6f0ff;      /* 寒色系の薄い背景 */
  border-radius: 4px;             /* 角丸 */
  display: block;                 /* ブロック要素 */
  width: fit-content;             /* 文字幅に合わせる */
  line-height: 1.2;               /* 行間 */
}

.youtube-item.hidden {
  display: none; /* 非表示にする */
}

/* 「続きを見る」ボタンのスタイル */
.load-more-btn {
  display: block;
  margin: 30px auto;   /* 中央揃え */
  padding: 12px 25px;
  background-color: #ff7f50; /* 暖色系（オレンジ色） */
  color: white;
  font-size: 18px;
  font-weight: 600;        /* 太字 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影で立体感を出す */
}

.load-more-btn:hover {
  background-color: #e66c2c; /* ホバー時に色が少し濃くなる */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .youtube-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .youtube-item p.video-title {
    font-size: 15px;
  }

  .youtube-item p.video-label {
    font-size: 15px;
    padding: 3px 6px;
  }

  .load-more-btn {
    font-size: 16px;
    padding: 10px 20px;
  }
}