@charset "UTF-8";
/* CSS Document */
/* もののかぞえかた カード図鑑 CSS */
/* 2026/02/10 */
/* 2026/02/16 PNG画像使用に対応 */
/* 2026/02/18 クイズ枠でのPNG画像調整 */

/* 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;
}

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

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

/* =============================================
   3. クイズ表示エリア：共通サイズ・配置設定
   ============================================= */
#quizEmojiInline img,
.quiz-emoji img,
#quizEmojiInline .custom-img,
.quiz-emoji .custom-img {
  /* サイズ強制 */
  width: 3.5em !important;
  height: 3.5em !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 3.5em !important;
  min-height: 3.5em !important;

  /* 配置基準 */
  display: inline-block !important;
  vertical-align: baseline !important;

  margin: 0 0.1em !important;
  padding: 0 !important;
  object-fit: contain !important;
}

/* =============================================
   4. クイズ表示エリア：上下位置の個別微調整
   ============================================= */

/* 出題枠：画像が上に浮くのを下へ下げる */
/* top ではなく transform translateY を使う（確実に効く） */
#quizEmojiInline img.emoji {
  transform: translateY(0.45em) !important;
}

/* 出題枠：PNGは拡大 + 下にずらす（transformは上書きされるため統合） */
#quizEmojiInline img.custom-img {
  transform: scale(1.15) translateY(0.45em) !important;
  transform-origin: center bottom; /* 下ラインを軸に拡大 */
}

/* 答え枠：画像が下に沈むのを上へ上げる */
/* Twemoji */
.quiz-emoji img.emoji {
  transform: translateY(-0.25em) !important;
}

/* PNG（拡大 + 上へ） */
.quiz-emoji img.custom-img {
  transform: scale(1.15) translateY(-0.25em) !important;
  transform-origin: center bottom; /* 下ラインを軸に拡大 */
}

/* =============================================
   5. 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:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.tag.level{ background:#ffe9b3; }
.tag.category{ background:#d7f2ff; }

.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;
}

/* ===== クイズ部分：際立たせデザイン ===== */
.quiz {
  background: #fffcf0; /* 少し温かみのある黄色背景 */
  border-radius: 20px;
  padding: 18px;
  margin: 25px 12px 15px 12px;
  box-shadow: 0 2px 0px #ffda6b; /* 下側に厚みを出して立体的に */
  border: 3px dashed #ff9f7a; /* 楽しげな点線の枠 */
  position: relative;
}

/* 「クイズ」という見出しラベルを左上に配置 */
.quiz::before {
  content: "💡 かぞえかたクイズ";
  position: absolute;
  top: -12px;
  left: 20px;
  background: #ff9f7a;
  color: #fff;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.quiz-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  justify-content: center; /* ボタンを中央に寄せて安定感を出す */
}

.quiz button {
  border: none;
  border-radius: 15px; /* 丸みのあるボタン */
  padding:6px 13px;
  font-size: 1.05rem;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1); /* ボタンの立体感 */
}

.quiz button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}

#quizButton {
  background: #ff9f7a;
  color: #fff;
  border: 2px solid #e68a65;
}

#showAnswerButton {
  background: #ffda6b;
  color: #222;
  border: 2px solid #e6c560;
}

#resetAllButton {
  background:#ddd;
  color:#222;
}

/* 問題文をカード風にする */
/* ===== 問題文（折り返し対応） ===== */
#quizQuestion{
  margin: 10px 0 10px;
  font-size: 1.2rem;
  font-weight: 900;
  background: #ffffff;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px dashed #ffb74d;
  line-height: 1.5;

  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 6px;

  /* ★ 折り返しできるように変更 */
  flex-wrap: wrap;
  white-space: normal;

  /* ★ 長い単語・URL等でも枠内で折り返す */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ★ flex内で折り返しが効かない問題の対策 */
#quizQuestion span{
  min-width: 0;
}

#quizEmojiInline img{
  width: 1.6em;
  height: 1.6em;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* ===== 答え枠（横並び＋折り返しOK） ===== */
/* 答えの表示を「ジャジャーン！」という雰囲気に */
#quizAnswer{
  margin: 10px 0;
  font-size: 1.1rem;
  font-weight: 900;
  background: #e8f5e9; /* 答えはスッキリした緑系 */
  padding: 15px;
  border-radius: 12px;
  border: 2px solid #81c784;
  animation: bounceIn 0.5s; /* 答えが出る時に少し動かす */

  display: flex;              /* ★横並び */
  align-items: flex-end;      /* ★文字下に揃える */
  gap: 8px;

  white-space: normal;        /* ★nowrap禁止を解除 */
  flex-wrap: nowrap;          /* ★画像と文字は同じ行に */
}

/* 絵は固定サイズ */
#quizAnswerEmoji img{
  width: 1.6em;
  height: 1.6em;
  object-fit: contain;
  display: block;
  flex-shrink: 0;             /* ★画像を潰さない */
}

/* テキストは枠内で折り返す */
#quizAnswerText{
  flex: 1;
  min-width: 0;               /* ★これがないと折り返しが効かない場合がある */
  overflow-wrap: anywhere;    /* ★長文・長い単語でも折り返す */
  word-break: break-word;
}

@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* クイズ内のセレクトボックスも少し可愛く */
.quiz-controls select {
  border: 2px solid #ffda6b !important;
  background-color: #fff !important;
}

/* 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;
}

/* =============================================
   クイズ枠：Twemojiはそのまま、PNGだけ大きくする
   ============================================= */
/* Twemoji（img.emoji）は触らない */
/* PNG画像だけ大きくする */
#quizQuestion img.custom-img,
#quizAnswer img.custom-img{
  width: 3.5em !important;
  height: 3.5em !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
}