@charset "UTF-8";
/* CSS Document */
/* もののかぞえかた カード図鑑 CSS */
/* 2026/02/10 */
/* 2026/02/16 PNG画像使用に対応 */
/* 2026/02/18 クイズ枠でのPNG画像調整 */
/* 2026/02/24 絵文字クイズを調整 */
/* 2026/02/26 項目の漢字表記を追加 */
/* 2026/02/28 「助数詞（よみ）」から覚える「もの」と「数え方」 */


/* 1. デフォルトマージンの削除 */
body {
  margin: 0;
  padding: 0;
}

/* 2. ボックスサイズの統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 3. 余白のリセット */
.wrap {
  margin: 0 auto;
  padding: 0; /* 左右の15pxを消す */
}

/* 4. コンテンツの枠線設定 */
/* --- 横スクロール対策 --- */
.contents {
  box-sizing: border-box;
  border: darkorange 4px solid;
  border-radius: 10px;
  margin: 0;
  /* width: 100% を削除、または auto にすることでボーダー分のはみ出しを防止 */
  width: auto;
}

.kazoekata-area{
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  margin:0;
  background:#f6f7fb;
  color:#222;
}

.sub-title{
  background:linear-gradient(135deg,#ffda6b,#ff9f7a);
  padding:20px 10px 15px 10px;
  text-align:center;
  font-weight: bold;
  color:#222;
}

.contents-title{
  margin:0;
  font-size:1.4rem;
  font-weight: bold;
  letter-spacing:0.03em;
}

.contents-title p{
  margin:6px 0 0 0;
  font-size:0.95rem;
  font-weight: normal;
  opacity:0.9;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 12px 10px;
  align-items:center;
}

.controls input, 
.controls select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:1rem;
  background:#fff;
  outline:none;
}

/* ---：コントロール部分の幅調整 --- */
.controls input {
  flex: 1;
  /* スマホで横幅を突き破らないよう最小幅を解除、または小さくする */
  min-width: 100px;
  max-width: 100%;
}

.controls select {
  /* スマホで横並びを維持しやすくするため最小幅を調整 */
  min-width: 120px;
}

/* ---：カードの2カラム設定 --- */
.grid {
  display: grid;
  /* 基本は PC サイズ：220px 以上の要素を並べる */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 14px;
}

.card{
  background:#fff;
  border-radius:18px;
  padding:14px 14px 12px ;
  margin-bottom: 10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.04);
  transition: transform 0.15s ease;
}
.card:hover{
  transform: translateY(-3px);
}

/* =============================================
   1. 基本の絵文字エリア（共通）
   ============================================= */
.emoji {
  font-size: 2rem;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.2em;
  height: 2.2em;
  vertical-align: middle;

  /* ★ 見た目だけ拡大（cardサイズに影響なし） */
  transform: scale(1.05);
  transform-origin: center center;

  /* ★ 上下のはみ出し防止 */
  overflow: visible;
}

/* =============================================
   2. カード内・Twemoji基本設定
   ============================================= */
/* PNG画像用 */
.custom-img {
  width: 2.1em;
  height: 2.1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;

  /* ★ 見た目だけ拡大 */
  transform: scale(1.05);
  transform-origin: center center;
}

/* Twemoji(imgタグ)用 */
img.emoji {
  width: 2em;
  height: 2em;
  vertical-align: middle;
}

/* =============================================
    PNG画像（.custom-img）のみの視覚補正
   ============================================= */
/* ※ transform は上で統合しているため、ここでは指定しない */
/* Twemojiとの見た目のボリューム差を埋める場合は上の scale(1.15) を調整する */

.thing{
  margin:2px 0 2px;
  font-size:1.2rem;
  font-weight:700;
}

/* 数え方の行全体の調整 */
.count {
  margin: 8px 0; /* 上下に少しゆとりを持たせ、誤タップ防止 */
  font-size: 0.9rem;
  color: #666; /* 助数詞以外の「一」などの文字をさらに一歩引かせる */
  display: flex; /* 文字の縦位置を揃えやすくするためにflexを使うのもアリ */
  margin-left: 0px;
  /*  justify-content: center;*/
  align-items: baseline;
  gap: 4px; /* 文字同士の間隔を一定に保つ */
}

/* 漢字部分（1つ目の<b>タグ） */
.count b:first-of-type {
  font-size: 1.1rem; /* ひらがなとの差をつけるため、少しだけ抑える */
  color: #444;
}

/* ひらがな部分（2つ目の<b>タグ） */
.count b:nth-of-type(2) {
  font-size: 1.3rem; /* 1.25よりもう一回り大きくすると、より「主役」感 */
  color: #d04b00;
  /*  padding: 0 2px;*/
  /* 視認性を上げるため、少し太字を強調しても良いかも */
  font-weight: bold;
}

.meta{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.tag.level{ background:#ffe9b3; display: none; }
.tag.category{ background:#d7f2ff; }

/* =============================================
   漢字表記タグ（既存 .tag を継承し独立拡張）
   ============================================= */
.tag.kanji{
  /* 既存 .tag の基本デザインはそのまま活かす */
  font-size: 1.05rem;        /* 少し大きめに */
  font-weight: 500;          /* 強すぎない強調 */
  background: #faf3c0;       /* やわらかい黄系 */
  margin-top: 8px;           /* hintとの間隔 */
  padding: 4px 13px;         /* 横長カプセル感 */
  border-radius: 12px;       /* 他タグよりやや角丸控えめ */
  letter-spacing: 0.05em;    /* 文字間隔を少し広めに */
  display: inline-block;     /* metaとは独立表示 */
}

.info{
  text-align: left;
  margin: 0 0 10px 20px;
  padding:0 10px 0 8px;
  color:#666;
  font-size:0.9rem;
  border-left: orange 3px solid;
}

.hidden{
  display:none !important;
}

.hint{
  margin-top:10px;
  font-size:14px;
  line-height:1.4;
  background:#f3f6ff;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d9e2ff;
}

/* Twemoji画像のサイズ調整（全体共通） */
img.emoji{
  width:1.5em;
  height:1.5em;
  vertical-align:-0.15em;
}

/* モバイル（スマホ）用の設定 */
@media screen and (max-width: 480px) {
  .grid {
    /* 画面幅の半分（約50%）から余白を引いたサイズで2列固定にする */
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; /* スマホでは隙間を少し狭くすると綺麗 */
    padding: 10px;
  }

  .card {
    padding: 10px; /* カード内の余白も少し詰める */
  }

  .emoji {
    font-size: 1.5rem; /* 絵文字が大きすぎて崩れるのを防ぐ */
  }
}

/* リンク枠内のTwemoji画像サイズを制御 */
.count50-link-icon img.emoji {
  width: 0.8em !important;
  height: 0.8em !important;
  vertical-align: -0.2em !important;
  margin-right: 4px;
}

/* =============================================
   助数詞フィルターボタン
============================================= */

.counter-filter{
  margin: 15px 12px;
  text-align: center;
}

.counter-toggle{
  background:#ff9f7a!important;
  color:#fff!important;
  border:none!important;
  padding:10px 18px!important;
  border-radius:20px!important;
  font-size:1rem!important;
  font-weight:bold!important;
  cursor:pointer!important;
  transition:all .2s ease!important;
}

/* ホバー（PC） */
.counter-toggle:hover{
  background:#ff855c!important;
  transform:translateY(-2px)!important;
  box-shadow:0 4px 10px rgba(0,0,0,0.15)!important;
}

/* 押した瞬間 */
.counter-toggle:active{
  transform:translateY(0)!important;
  box-shadow:0 2px 5px rgba(0,0,0,0.15)!important;
}

/* フォーカス（キーボード対応） */
.counter-toggle:focus{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(255,159,122,0.4)!important;
}

.counter-button-area{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.counter-btn{
  background:#fff;
  border:2px solid #ffb74d;
  border-radius:18px;
  padding:6px 12px;
  font-size:0.95rem;
  cursor:pointer;
  font-weight:bold;
  transition:0.15s;
}

.counter-btn:hover{
  background:#fff3e0;
}

.counter-btn.active{
  background:#ffda6b;
}

.counter-reset{
  background:#eee;
  border:2px solid #ffb74d;
  border-radius:18px;
  padding:6px 12px;
  font-size:0.9rem;
  cursor:pointer;
}

/* =============================
   アコーディオン（モバイル最適化版）
============================= */

.counter-button-area{
  gap:4px;
}

/* グループ本体 */
.counter-group{
  width:100%;
  margin:0;
  padding:0;
}

/* 行タイトル */
.counter-group-title{
  font-weight:bold;
  cursor:pointer;
  padding:6px 8px;              /* ← さらに圧縮 */
  background:#ffe0b2;
  border-radius:6px;
  user-select:none;
  font-size:0.95rem;
  line-height:1.2;
}

/* 開いた時のみ最小余白 */
.counter-group.open{
  background:#fff8f0;
  border-radius:8px;
  padding:4px;
  margin-bottom:6px;            /* ← 少しだけ区切る */
}

/* ボタンエリア */
.counter-group-body{
  display:none;
  margin-top:6px;
  gap:6px;
  flex-wrap:wrap;
}

.counter-group.open .counter-group-body{
  display:flex;
}

/* 助数詞ボタン（小型化） */
.counter-btn{
  padding:4px 10px;
  font-size:0.95rem;
  border-radius:16px;
}

/* すべて開く／閉じる */
.counter-master-controls{
  margin-bottom:6px;
}

.counter-mini-btn{
  padding:4px 10px;
  font-size:0.75rem;
  border:2px solid #ffb74d;  
  border-radius:16px;  
}

/* タップ促しテキストをボタン直下に */
.counter-help{
  font-size:0.8rem;
  color:#666;
  margin-top:4px;
  transition:opacity .3s ease;
}