/* ========== topic.css ========== */
.topic-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5em;
  background: #fffef9;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.topic-wrapper .btn {
  display: inline-block;
  margin: 0.5em 0.25em;
  padding: 6px 12px;
  background: #4caf50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

.topic-wrapper .btn.secondary {
  background: #888;
}

.topic-wrapper h2 {
  font-size: 1.4em;
  margin: 0.5em 0;
  text-align: center;
}

.topic-wrapper p,
.topic-wrapper .centered {
  text-align: center;
  margin: 0 0.2em 0.2em 0.5em; 
}


.topic-mondai {
	background: #B5CAA0;	/* 裏柳 */
	color: #36563C;				/* 千歳緑 */
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.6;
	width: 100%;
	padding: 0.4em 0.5em;
  box-sizing: border-box;
  text-align: center;
  word-break: break-word;
  border-radius: 6px;
/*  display: flex;                /* ← 中央寄せに必要 */
/*  align-items: center;          /* ← 垂直中央 */
/*  justify-content: center;      /* ← 水平中央 */
}

.topic-kanji-box {
  font-size: 5em;
  border: 4px double #444;
  padding: 0.2em 0.4em;
  background: #fff;
  border-radius: 6px;
  display: inline-block;
}

mark {
  background-color: yellow;
  font-weight: bold;
}



.topic-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0;              /* ← 不要な外側余白を除去 */
  padding: 0;
  line-height: 1;         /* ← 改行スペースの影響も軽減 */
}

.topic-card {
  margin: ;
  padding: 1em;           /* ← 内側余白が必要な場合だけ指定 */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

.topic-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* topic-latest 由来の margin/padding を念のため初期化 */
.topic-latest {
  margin: 0 !important;
  padding: 0 !important;
}


    table { width: 100%; border-collapse: collapse; background: #fff; }
    th, td { border: 1px solid #ccc; padding: 0.5em; vertical-align: top; }
    th { background: #e0e0e0; }

    .btn { padding: 0.4em 0.6em; background: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 0.3em; }
    .btn:hover { background: #0056b3; }
    .answer-text, .ref-text { display: none; }
		.detail-text { display: none; }
    mark { background-color: yellow; }
    .page-info-box { margin: 1em 0; text-align: center; }
    .total-info { margin-bottom: 0.5em; font-weight: bold; }
    .back-link { margin-top: 0.5em; text-align: center; }
    .back-anchor { text-decoration: none; color: #007bff; }
    .back-anchor:hover { text-decoration: underline; }


  a.btn {
    font-size: 0.9em;
    padding: 0.4em 0.8em;
    display: inline-block;
    background-color: #eef;
    border: 1px solid #99c;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
  }

  a.btn:hover {
    background-color: #dde;
  }