/* =========================================
   同音同訓異字問題ページ 専用CSS
   （修正日　2026.07.03 20:20）
   ========================================= */
/* テーブル全体の幅を調整（1級・2級 共通） */
table.douon{
    width: 933px;      /* PC では固定幅 */
    max-width: 100%;   /* スマホでは画面に合わせて縮む */
    margin-left: 0;    /* 左寄せ */
    margin-right: auto;
}

/* セルの基本設定（2級のフォントも軽くする） */
.douon td,
.douon th{
    padding: 4px;
    font-size: 16px;  　/* ← HB時代の +1 を廃止して軽量化 */

    line-height: 1.4;
}

/* === 2行1セットで色を交互にする（見出し行を除外） === */
.douon tr:nth-child(4n+2) td,
.douon tr:nth-child(4n+3) td{
    background-color: #e8f8ff;
}

.douon tr:nth-child(4n+4) td,
.douon tr:nth-child(4n+5) td{
    background-color: #ffffff;
}

/* === 列幅の最適化 （折り返し防止版）=== */

/* 行番号 */
.col-no{
    width: 41px;
    height: 92px;
    text-align: center;
}

/* 問題文：割合＋最小幅で守る */
.col-q{
    width: 55%;        /* ← 63% → 55% に縮小（全角約7文字ぶん） */
    min-width: 300px;  /* ← 360px → 300px に縮小（タブレットで収まる） */
}

/* ボタン列 */
.col-btn{
    width: 118px;
    height: 42px;
    text-align: center;
}

/* 答え欄：固定でOK */
.col-ans{
    width: 200px;
    white-space: nowrap;
}

/* 解説欄：最小幅を確保しつつ、広がりすぎない */
.col-sp{
    width: 10%;          /* ← 割合で確保（PCでは広く、スマホでは縮む） */
    min-width: 70px;     /* ← 1級の長いURLに対応 */
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

@media screen and (max-width: 900px){
  .col-q{
    width: 50%;
    min-width: 260px;
  }
}

/* =========================================
   ここから新規：対義語・類義語ページ用CSS
    （2026.06.22 20:02 ）
   ========================================= */

/* -----------------------------------------
   0. 全体の基本設定
   ----------------------------------------- */
body{
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.4;
}

/* -----------------------------------------
   1. 背景（薄い緑の壁紙）
   ----------------------------------------- */
.tairui-bg {
  background-image: url("../g8b_light.gif");
  background-repeat: repeat;
  background-size: auto;
}

/* -----------------------------------------
   2. タイトル
   ----------------------------------------- */
.title{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0.5em 0 0.5em 0;
}

/* -----------------------------------------
   3. 強調（対義語・類義語）
   ----------------------------------------- */
.red-bold{
  color: #990000;
  font-weight: bold;
}

/* -----------------------------------------
   4. 表（対義語・類義語 共通）
   ----------------------------------------- */
.tairui-table{
  width: 930px;              /* 現行レイアウト維持 */
  border-collapse: collapse;
  margin-bottom: 1em;
  background-color: #ffffffcc; /* 白背景（透明度少し）で読みやすく */
}

.tairui-table th,
.tairui-table td{
  border: 1px solid #444;
  padding: 4px 6px;          /* 高さを圧縮して10問を1画面に */
  text-align: left;
  vertical-align: middle;
  font-size: 1rem;
}

/* 表ヘッダ */
.tairui-table th{
  background-color: #e8e8e8;
  font-weight: bold;
}

/* -----------------------------------------
   5. 問題語・読みのフォント
   ----------------------------------------- */
.q-word{
  font-size: 1.4rem;         /* 問題語（偏狭・恩愛など） */
  font-weight: bold;
}

.q-yomi{
  font-size: 1rem;           /* 読み（へんきょう・かんだい） */
}

/* -----------------------------------------
   6. ナビゲーションボタン
   ----------------------------------------- */
.nav img{
  margin-right: 1.5em;
  vertical-align: middle;
}

/* -----------------------------------------
   7. 画像ボタン（答え表示）
   ----------------------------------------- */
.tairui-table img{
  cursor: pointer;
}