body {
  font-family: Alegreya, serif;
  font-size: 16px;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #4b4b4b;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 150px;
  margin-bottom: 270px; 
}

body {
  background-color: #fbfbfb;
}

/* リンクの色と下線 */
a {
  color: #4b4b4b;
  text-decoration: none;
  outline: none;
}

.custom-font {
  font-size: 1.5em;
}

nav ul li a {
    margin-right: 20px; /* リンク同士の間隔 */
}

/* 例: 600px以下の場合はフォントサイズを小さくする */
@media screen and (max-width: 640px) {
  body {
    font-size: 12px;
    max-width: 100%; /* 画面幅いっぱいに広がるように調整 */
    padding: 30px; /* 余白やパディングの調整 */
    margin-top: 50px;
    margin-bottom: 120px; 
  }
}

@media screen and (max-width: 840px) and (orientation: landscape) {
  body {
    padding-left: 50px; /* 左側に余白を追加 */
    padding-right: 50px; /* 右側の余白も少し調整 */
  }
}

/* smartPhone */
@media screen and (max-width: 640px) {
  img {max-width:100%;}
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fafafa;
  }
  a {
    color: #fafafa;
  }
  img {
    filter: grayscale(0%);
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .video-container {
      padding: 10px; /* 画面が狭い場合は余白を減らす */
  }
}

/* レスポンシブicon対応 */
@media (prefers-color-scheme: dark) {
  .dark-mode-icon {
    fill: white; /* または color: white; */
  }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
  margin-bottom: 20px; /* タイトル間のスペースを追加 */
}

.video-container {
    position: relative;
    width: 100%; /* 幅を100%に設定 */
    overflow: hidden; /* はみ出した部分を隠す */
}

.aspect-ratio-16-9 {
    padding-top: 56.25%; /* アスペクト比16:9を維持 */
}

.aspect-ratio-1-1 {
    padding-top: 100%; /* アスペクト比1:1を維持 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    object-fit: cover; /* アスペクト比を維持しつつ、要素をカバー */
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* カード間のスペース */
  justify-content: flex-start;
  align-items: flex-start;
}

.card:nth-child(3n) {
  margin-right: 0;
}

.card {
  border: none; /* カードの境界線 */
  border-radius: 0px; /* 角を丸くする */
  overflow: hidden; /* 内容がはみ出さないようにする */
  width: calc(33.333% - 20px); /* 3列レイアウト */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 影を追加 */
}

.card-thumbnail {
  width: 100%; /* サムネイルをカードの幅に合わせる */
  height: auto; /* 高さを自動調整 */
  aspect-ratio: 1 / 1; /* 画像の縦横比を正方形に維持 */
}

.card-content {
  color: #4b4b4b;
  padding: 0px; /* 内側の余白 */
  display: flex; /* カードタイトル block,flex*/
  margin-left: 0px; /* 左側のマージンを追加して右にずらす */
}

.card-title {
  text-decoration: none; /* 下線を消す */
  color: #333; /* テキストの色 */
  font-size: 0.8em; /* フォントサイズ */
  display: inline-block;
  padding: 8px 12px; /* クリック可能な領域を拡大 */
}


@media (max-width: 480px) {
  .card {
    width: calc(50% - 20px); /* モバイルサイズでも2列 */
    margin: 0 auto; /* 左右の余白を均等に */
  }
}

@media (max-width: 480px) {
  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    gap: 20px;
    justify-items: center; /* カードを中央寄せ */
  }

  .card {
    width: auto; /* 幅を均等に調整 */
  }
}

@media (max-width: 480px) {
  .card-container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media screen and (max-width: 840px) and (orientation: landscape) {
  .card-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (prefers-color-scheme: dark) {
  .card-title {
    color: #fafafa; /* ダークモード時のタイトル色 */
  }
  .card-content {
    color: #fafafa; /* ダークモード時の内容色 */
  }
}

.mobile-hide-br {
  display: inline;
}
@media screen and (max-width: 640px) {
  .mobile-hide-br {
    display: none;
  }
}

ul {
    display: flex;
    flex-direction: column;
    gap: 10px; /* リストの要素間隔を広げる */
}