@charset "UTF-8";
/* CSS Document */
/* 助数詞の読み方と発音ルール CSS */
/* 2026/03/04 */

  /* 全体コンテナ */
  .kazoekata-area {
    box-sizing: border-box;
    border: darkorange 4px solid;
    border-radius: 10px;
    margin: 0;
    overflow: hidden; /* 角丸からはみ出さないように */
    background: #f6f7fb;
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  }

  /* サブタイトルエリア */
  .sub-title {
    background: linear-gradient(135deg, #ffda6b, #ff9f7a);
    padding: 25px 10px;
    text-align: center;
    color: #222;
  }
  .contents-title {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    margin: 0;
  }
  .contents-title p {
    margin: 6px 0 0 0;
    font-size: 0.95rem;
    font-weight: normal;
    opacity: 0.9;
  }

  /* ページ内リンクナビゲーション */
  .nav-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .nav-buttons a {
    text-decoration: none;
    color: #222;
    background: #f0f0f0;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid #ccc;
    transition: 0.2s;
  }
  .nav-buttons a:hover {
    background: #ffda6b;
    border-color: #ff9f7a;
  }

  /* コンテンツ内部 */
  .yomi-contents {
    padding: 10px 15px;
  }
  .section-title {
    font-size: 1.15rem;
    margin: 20px 0 10px;
    padding-left: 10px;
    border-left: 5px solid darkorange;
  }

  /* テーブル設定 */
  .kazu-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 30px;
    table-layout: auto; /* コンテンツに応じた幅にする */
  }
  .kazu-table th, .kazu-table td {
    border: 1px solid #ccc;
    padding: 12px 8px;
    vertical-align: middle;
  }
  .kazu-table th {
    background-color: #eee;
    font-size: 0.9rem;
  }

/* 一列目：アイテム表示 */
  .col-item {
    padding: 12px 10px;
    text-align: center;
    background-color: #fffdfa;
    /* 全体のnowrapは解除し、コンテンツ幅に依存させる */
    width: 1%; 
    min-width: 120px; /* 最低限の幅（「家族（かぞく）」が収まる程度） */
  }

  .item-name {
    display: block;
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 5px;
    color: #d35400;
    /* 名前だけは絶対に折り返さない */
    white-space: nowrap; 
  }

  .item-info {
    display: block;
    font-size: 0.83rem; /* 少し小さくして読みやすく */
    color: #555;
    margin-top: 8px;
    line-height: 1.3;
    /* 補足説明は折り返しを許可する */
    white-space: normal; 
    /* 言葉の途中で変に切れないようにするおまじない */
    word-break: break-all;
    overflow-wrap: anywhere;
  }

/* Twemojiおよび自前画像の両方に適用 */
.item-emoji img, 
.item-emojiimg img {
  height: 3.3rem !important; /* JS置換後のサイズを固定 */
  width: auto !important;
  margin: 5px auto;
  display: block;
  max-width: 100%; /* セルからはみ出さないように */
}

  /* 二列目：読み方 */
  .col-reading {
    line-height: 2;
    /* こちらは残りの幅をすべて使います */
    width: auto; 
    white-space: normal; /* 読み方は折り返しを許可 */
  }
  .word-unit {
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 0 8px;
    border: #D7D7D7 1px solid;
    border-radius: 4px;
    background: #fdfdfd;
    white-space: nowrap; /* 単語内での改行を防ぐ */
    font-size: 0.98rem;
    color: #333;
	font-weight: 550;
  }
  .reiji{
    font-size: 0.95rem; /* 少し小さくして読みやすく */
    color: #555;
	font-weight: 600;
    padding-left: 8px;	
    border-left: 3px solid darkorange;
  }
  
 /* 説明文のスタイリング */
  .sanko-description {
    background-color: #f9f9f9; /* 控えめな背景色で「参考」らしさを演出 */
    border-left: 4px solid #d2b48c; /* 和風な茶系や薄いアクセントカラー */
    padding: 15px 20px;
    margin: 20px 0;
    line-height: 1.6;
    font-size: 0.95em;
    color: #444;
  }
  
  .sanko-description p {
    margin: 0 0 10px 0;
  }
  
  .sanko-description p:last-child {
    margin-bottom: 0;
  }
  
  .sanko-description .note {
    font-size: 0.85em;
    color: #666;
    border-top: 1px dotted #ccc;
    padding-top: 8px;
    margin-top: 10px;
  }

  /* ボタンの簡易スタイリング（既存のものがあれば調整してください） */
  .sanko-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #ccc;
    transition: 0.3s;
  }
  
  .sanko-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
  }