/* 全体レイアウト */
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #2d2d2d;
    }

/* 目次 */
.toc {
  margin-bottom: 30px;
  font-size: 1.0rem;
  text-align: center;
  line-height: 1.8; /* 行間をゆったりさせる（1.0が標準） */
}

.toc a {
  margin: 0 10px;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
  text-decoration: none;
  padding-bottom: 2px;          /* 下線と文字の間に少し空間を作る */
  transition: border-color 0.3s;/* ホバーなどで色変化させるなら */
}

.toc a {
  --link-color: #1e90ff; /* デフォルト色 */
  color: var(--link-color);
  padding-bottom: 2px;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}

.toc a:hover {
  color: color-mix(in srgb, var(--link-color) 70%, black); /* 少し濃くする */
  border-bottom-color: color-mix(in srgb, var(--link-color) 70%, black);
}

/* 項目ごとに色変更 */
.toc a:nth-child(1)  { --link-color: #1e90ff; } /* 明るい青 */
.toc a:nth-child(2)  { --link-color: #00bfff; } /* スカイブルー */
.toc a:nth-child(3)  { --link-color: #20b2aa; } /* 青緑 */
.toc a:nth-child(4)  { --link-color: #3cb371; } /* 緑みどり */
.toc a:nth-child(5)  { --link-color: #9acd32; } /* 黄緑 */
.toc a:nth-child(6)  { --link-color: #ffd700; } /* ゴールド */
.toc a:nth-child(7)  { --link-color: #ffa500; } /* オレンジ */
.toc a:nth-child(8)  { --link-color: #ff8c00; } /* 濃いオレンジ */
.toc a:nth-child(9)  { --link-color: #ff6347; } /* トマト */
.toc a:nth-child(10) { --link-color: #ff4500; } /* 濃い赤オレンジ */
.toc a:nth-child(11) { --link-color: #dc143c; } /* クリムゾン */


/* 見出し */
h1 {
  font-size: 2.0rem;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbb;
  padding-bottom: 10px;
  text-align: center;
}

h2 {
  text-align: center;
  margin: 20px 0;
}


/* カード型レイアウト */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 0 20px 40px;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  aspect-ratio: 4 / 3; /* 4:3 の比率で表示 */
  object-fit: cover;   /* はみ出す部分を切り取り */
  height: auto;
  max-height: 140px; /* 最大高さを制限 */
  user-drag: none;
  image-rendering: -webkit-optimize-contrast; /* Chrome/Safari向け */
  image-rendering: crisp-edges;               /* Firefox向け */
  image-rendering: pixelated;                  /* 一部ブラウザ向け */
  pointer-events: none; /* 画像右クリック防止 */
}

.card-content {
  padding: 10px;
}

.card-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.card-desc {
  font-size: 0.85em;
  color: #666;
}

.back-to-top {
  text-align: right;
  margin-top: -30px;
  margin-bottom: 70px;
  margin-right: 10px;
}

.back-to-top a {
  font-size: 0.85rem;
  color: #666;
  text-decoration: none;
}

.back-to-top a:hover {
  text-decoration: underline;
}

  .notice {
  font-size: 0.8rem;
  color: #666;                /* グレーで控えめに */
  margin-top: -0.5rem;        /* h1との空間を調整（任意） */
  margin-bottom: 1.5rem;      /* 次の要素との間隔 */
  text-align: right;
}

.explanation {
  font-size: 1.0rem;
  color: #000; 
  margin-top: -0.5rem;        /* h1との空間を調整（任意） */
  margin-bottom: 1.5rem;      /* 次の要素との間隔 */
  text-align: center;
}

/* 各項目 */
    .author {
      color: #000;
      margin-bottom: 20px;
      text-align: right;
    }
    .text{
      padding: 10px;
      margin: 5px 0;
    }
    .thumbnail {
      width: 100%;
      cursor: pointer;
      max-width: 800px;
    }
    .thumbnail_vertical {
      width: 100%;
      cursor: pointer;
      max-width: 400px;
    }
    .play-button {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 20px;
      background-color: #1e90ff;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
    }
    .video-section {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .video-wrapper{
      width: 100%;
      height: 100%;
      margin: 10px;
      max-width: 768px;
    }

    .video-wrapper iframe {
      width: 100%;
      aspect-ratio: 16 / 9;  /* 通常の横長動画の場合 */
      max-width: 748px;
      margin:15px 0;
    }

    .video-wrapper.vertical iframe {
      width: auto;          /* 幅は高さから自動計算 */
      height: 80vh;         /* ← ここがポイント：画面高の80%まで */
      max-height: 640px;    /* 大画面でも上限 */
      aspect-ratio: 9 / 16;
      max-width: 100%;      /
    }

    video{
      width: 100%;
      height: 100%;
      margin-top: 10px;
      max-width: 730px;
    }

    audio {
      width: 100%;
      height: 75px;
      margin-top: 10px;
      max-width: 730px;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 10px;
    }
    .toggle-button {
      font-size: 24px; /* アイコンのサイズ */
      background: none;
      border: none;
      cursor: pointer;
      color: #e60023;
      padding: 10px;
      transition: color 0.3s;
    }
    .toggle-button:hover {
      color: #b8001c;
    }
    .seek-bar {
      width: 100%;
      appearance: none;
      height: 8px;
      background: #ddd;
      border-radius: 5px;
      outline: none;
      cursor: pointer;
    }
    .seek-bar::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #e60023;
      cursor: pointer;
      margin-top: -3px;
    }
    .time-display {
      text-align: right;
      font-size: 0.9em;
      color: #444;
    }
    .caption {
      font-style: bold;
      margin-top: 15px;
      margin: 15px auto;
      overflow-wrap: break-word;
    }
    .description {
      margin-top: 25px;
      padding: 15px;
      background-color: #efefef;
      border-left: 5px solid #1e90ff;
      margin: 25px auto;
    }
    .description2 {
      margin-top: 25px;
      padding: 15px;
      background-color: #f0f8ff;
      border-left: 5px solid #1e90ff;
    }

.caption-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3等分 */
  gap: 5px 10px; /* 行・列の間隔 */
  font-size: 0.9rem;
}

.caption-3col .col {
  padding: 4px 8px;
  box-sizing: border-box;
}

/* ルビ文字の調整 */
.caption-3col ruby {
  ruby-position: rt; /* ルビ位置の調整、好みで */
}

.back-link {
  display: block;       /* ブロック化して右寄せしやすくする */
  text-align: right;    /* 右寄せ */
  color: #000;       /* 好きな色に変更（例：青） */
  text-decoration: none;/* 下線を消す場合 */
}

.back-link:hover {
  text-decoration: underline; /* ホバー時に下線を表示する場合 */
  color: #1e90ff;              /* ホバー時の色 */
}

.youtube-link{
  display: block;
  margin: 5px;
  padding: 10px 3px;
}

.youtube-link:hover {
  text-decoration: underline; /* ホバー時に下線を表示する場合 */
  color: #1e90ff;              /* ホバー時の色 */
}

.flex{
  display: grid;
  grid-template-columns:0.5fr 1.3fr repeat(3, 1fr) 2fr;
  gap: 12px;
  max-width: 100%; 
}

table.description{
  height: auto;
  padding: 2px;
  background-color: #efefef;
  border-left: 5px solid #1e90ff;
  margin: auto;
  margin-left: 0;
  border-collapse: collapse;
}

table.description td{
  padding: 2px 5px;
}
.mintd{
  min-width: 62px;
}

/* ------------------------------------------
   スマホ（〜767px）
------------------------------------------ */
@media (max-width: 767px) {
 
  /* 全体 */
  body {
    padding: 12px;
    font-size: 15px;
  }
 
  /* 見出し */
  h1 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
 
  h2 {
    font-size: 1.2rem;
    margin: 14px 0;
  }
 
  /* 目次：縦並びに変更 */
  .toc {
    font-size: 0.95rem;
    line-height: 2.4;  /* タップしやすいように行間を広げる */
    text-align: left;
    padding: 10px 4px;
  }
 
  .toc a {
    display: block;           /* 1行ずつ表示 */
    margin: 0;
    padding: 8px 12px;        /* タップ領域を広げる */
    border-radius: 6px;
    border-bottom: none;
  }
 
  .toc a:active {
    background-color: rgba(0, 0, 0, 0.06);
  }
 
  /* カード */
  .card-container {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    gap: 10px;
    padding: 0 0 30px;
  }
 
  .card img {
    max-height: 120px;
  }
 
  .card-title {
    font-size: 0.9rem;
  }
 
  .card-desc {
    font-size: 0.78rem;
  }
 
  /* ページトップへ戻る */
  .back-to-top {
    margin-top: -10px;
    margin-bottom: 40px;
    margin-right: 4px;
  }
 
  .back-to-top a {
    font-size: 0.9rem;
    padding: 6px 0;
    display: inline-block; /* タップ領域を確保 */
  }
 
  /* 注記・説明 */
  .notice {
    font-size: 0.78rem;
    text-align: left;
    margin-bottom: 1rem;
  }
 
  .explanation {
    font-size: 0.95rem;
    text-align: left;
    margin-bottom: 1rem;
  }
 
  /* 著者 */
  .author {
    font-size: 0.85rem;
    margin-bottom: 14px;
  }
 
  /* サムネイル */
  .thumbnail,
  .thumbnail_vertical {
    max-width: 100%;
  }
 
  /* 動画セクション */
  .video-section {
    padding: 12px;
    border-radius: 6px;
  }
 
  .video-wrapper {
    margin: 6px 0;
  }
 
  video,
  audio {
    max-width: 100%;
    margin-top: 8px;
  }
 
  audio {
    height: 44px; /* iOSでのデフォルト高さに合わせる */
  }
 
  /* コントロール */
  .controls {
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
 
  .toggle-button {
    font-size: 28px; /* タップしやすく少し大きく */
    padding: 8px;
  }
 
  .seek-bar {
    height: 10px; /* 太くしてタップしやすく */
  }
 
  .seek-bar::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
 
  .time-display {
    font-size: 0.85rem;
    width: 100%;
    text-align: right;
  }
 
  /* キャプション */
  .caption {
    font-size: 0.9rem;
    margin: 10px 0;
  }
 
  /* 説明ボックス */
  .description,
  .description2 {
    padding: 12px;
    margin: 16px 0;
    font-size: 0.9rem;
  }
 
  /* 3列キャプション → 1列に */
  .caption-3col {
    grid-template-columns: 1fr;
    font-size: 0.78rem;
  }
 
  .caption-3col .col {
    padding: 3px 4px;
  }
 
  /* バックリンク */
  .back-link {
    font-size: 0.9rem;
    padding: 6px 0;
  }
 
  /* YouTubeリンク */
  .youtube-link {
    padding: 12px 4px; /* タップしやすく */
    font-size: 0.9rem;
  }
 
  /* フレックスグリッド */
  .flex {
    grid-template-columns: 1.3fr repeat(3, 1fr) 2fr; /* PC同様の5列をキープ */
    max-width: 100%;  /* 画面幅いっぱいに広げる */
    gap: 6px;         /* gapを少し詰める */
    font-size: 0.78rem; /* 文字を小さくして収める */
  }
 
  /* play-button */
  .play-button {
    padding: 12px 24px;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}
 /* 会話文形式 */
.dialogue p {
  display: flex;
  margin: 0.4em 0.8em;
  line-height: 1.8;
}

.speaker {
  flex: 0 0 2em;
  margin-right: 0.2em;
  font-weight: bold;
}

.speech {
  flex: 1;
}
 
/* ------------------------------------------
   タブレット（768px〜1024px）
   ※ PCとスマホの中間を補正
------------------------------------------ */
@media (768px <= width <= 1024px) {
 
  body {
    padding: 16px;
  }
 
  h1 {
    font-size: 1.7rem;
  }
 
  .toc {
    font-size: 0.98rem;
  }
 
  .toc a {
    margin: 0 6px;
    padding: 6px 8px;
    display: inline-block;
  }
 
  .card-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 10px 35px;
  }
 
  .flex {
    grid-template-columns: 1.3fr repeat(3, 1fr) 2fr; /* PC同様の5列をキープ */
    max-width: 100%;  /* 画面幅いっぱいに広げる */
    gap: 6px;         /* gapを少し詰める */
    font-size: 0.78rem; /* 文字を小さくして収める */
  }
 
  .caption-3col {
    font-size: 0.92rem;
  }
}