/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 04 2025 | 02:44:49 */
.youtube-section {
  position: relative;
  margin: 35px auto 0;
  background-color: #0065b2;
  padding: 50px 40px 10px;
  color: white; 
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
}
@media screen and (min-width: 1024px) { 
  .youtube-section {
    margin: 80px auto 0;
	padding: 100px 40px 30px;
  }
}

/* 新しいコンテナ */
.youtube-header {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    max-width: 1100px;
    margin: 0 auto 30px; /* 中央配置 */
    padding-top: 30px;
	gap: 30px;
}

/* ロゴのスタイル */
.youtube-logo {
    max-width: 340px;
    width: 340px; 
    flex-shrink: 0; 
    margin: 0; 
}
.youtube-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* 説明テキストのスタイル */
.youtube-section .desc {
    max-width: 450px; 
    flex-grow: 1; 
    margin: 0;     
    font-size: 15px;
    line-height: 1.8;
    font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
    text-align: justify;
    padding-top: 0; 
}

/* 【スマホ対応の追加】: 画面幅が狭い場合は縦積みに戻す */
@media (max-width: 768px) {
    .youtube-header {
        flex-direction: column; /* 縦積みに変更 */
        gap: 30px; /* 縦積みの隙間を調整 */
    }
    .youtube-logo {
        width: 100%;
        max-width: 300px; /* スマホでの最大幅を設定 */
    }
    .youtube-section .desc {
        text-align: left; /* justifyだとスマホで読みにくい場合がある */
        padding: 0 15px; /* 左右にパディングを追加 */
    }
}

/* 動画リスト */
.youtube-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  grid-auto-rows: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
  .youtube-feed {
    grid-template-columns: repeat(2, 1fr);
  }
  .youtube-feed > .video-thumbnail-wrapper:nth-child(n+3) {
    display: none;
  }
}

/* スマホ */
@media (max-width: 767px) {
  .youtube-feed {
    grid-template-columns: repeat(1, 1fr);
  }
  .youtube-feed > .video-thumbnail-wrapper:nth-child(n+3) {
    display: none;
  }
}

.video-thumbnail-wrapper {
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: 100%;
}

/* サムネイル */
.thumbnail {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail:hover {
  transform: scale(1.05);
}

/* タイトル */
.video-title-box {
  margin: 5px 0;
  color: white; !important
}
.video-title-box .video-title {
  margin: 0;
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  line-height: 2;
  text-decoration: underline;
  text-underline-offset: 8px;
}