/* ==========================
   style.css — 整理版
   - 変数（カラー/スペース）
   - 軽いリセットとベースタイポグラフィ
   - ヘッダー / コンテンツ / フッター
   - カナ行（横並び & 折り返し）
   - レスポンシブ
   ========================== */

:root {
  --bg: #f4f4f4;
  --surface: #ffffff;
  --muted: #f9f9f9;
  --text: #222;
  --accent: #0077cc;
  --border: #e1e1e1;
  --gap: 16px;
  --max-width: 1200px;
}

/* リセット + ベース */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* 幅を中央に揃えるユーティリティ（必要に応じてラップして使う） */
.wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gap); }

/* = Header */
header { background: #333; color: #fff; }
.header-container { max-width: var(--max-width); margin: 0 auto; padding: 18px var(--gap); }
.header-container h1 { margin: 0; font-size: 1.6rem; }
.header-container p { margin: 6px 0 0; opacity: 0.9; }

/* トップページを1カラムにするためのルール（要素を100%幅に） */
main, .content, .kana-row { width: 100%; max-width: 100%; }

/* = Kana row（あ行・か行などの横並びブロック） */
.kana-row {
  display: flex;
  flex-wrap: wrap; /* 画面幅が足りなければ下に折り返す */
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0;
  padding: 0 var(--gap);
}

.kana {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  flex: 0 1 calc(33.333% - 12px); /* デスクトップで3カラム目安 */
  min-width: 200px; /* 極端に小さくなりすぎないように */
}

.kana h2 { margin: 0 0 8px; font-size: 1rem; }
.kana ul { margin: 0; padding: 0; list-style: none; }
.kana li { margin: 6px 0; }

/* 小〜中画面のブレイクポイント */
@media (max-width: 900px) {
  .kana { flex: 0 1 calc(50% - 12px); }
}
@media (max-width: 600px) {
  .kana-row { gap: 10px; }
  .kana { flex: 0 1 100%; }
  .header-container { padding: 14px 12px; }
  .header-container h1 { font-size: 1.2rem; }
}

/* = Footer */
footer { background: #333; color: #fff; text-align: center; padding: 14px 12px; }
footer p { margin: 0 0 6px; }
footer a img { display: inline-block; vertical-align: middle; }

/* アクセシビリティ/補助 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 小さなユーティリティ */
.muted { color: #666; font-size: 0.95rem; }

/* = 2カラムレイアウト（サブページ用） */
.container {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--gap);
}

.content {
  flex: 2; /* 左側：メインコンテンツ（広い） */
  background: var(--surface);
  padding: 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sidebar {
  flex: 1; /* 右側：サイドバー（狭い） */
  background: var(--muted);
  padding: 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-width: 200px;
}

.content h1, .content h2 { margin-top: 0; }
.sidebar h2 { margin-top: 0; font-size: 1.1rem; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin: 8px 0; }
.sidebar a { display: block; padding: 1px 0; }

/* 小画面では2カラム → 1カラムに */
@media (max-width: 900px) {
  .container { flex-direction: column; gap: 16px; }
  .content, .sidebar { flex: 1; min-width: auto; }
}

/*トップページ*/
.kana dt{
  font-weight:bold;
  font-size:1.1rem;
  margin: 0;
}

.kana dd{
  font-size:1.0rem;
  margin: 10px 20px 30px 40px;
}
/*コンテンツ*/
.content h1{
  font-size:1.2rem;
  font-weight:bold;
  margin: 0 0 10px 0;
}

.content h2{
  font-size:1.1rem;
  font-weight:bold;
  margin: 0 0 10px 0;
  border-bottom-style:solid 1px #000000;
  border-left-style:solid 5px #000000;
}

.content li{
  font-size:1.0em;
}

/* 親要素の指定を合わせる */
.sidebar nav ul {
  list-style: none; /* 点を消す */
  padding: 0;
  margin: 0;
}

.sidebar nav > ul > li > strong {
  display: block;
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #333;
}

/* 子リスト（法令・保安管理）を横並びにする場合 */
.sidebar nav > ul > li > ul {
  margin-left: 0; 
  display: flex;    /* 横並びにする */
  gap: 15px;       /* リンク間の隙間 */
  padding-left: 10px;
}

.sidebar nav > ul > li > ul > li {
  margin: 0; 
  font-size: 0.9em;
}

/* リンクのデザインを整えてズレを防ぐ */
.sidebar nav a {
  text-decoration: none;
  color: #007bff;
}

.sidebar nav a:hover {
  text-decoration: underline;
}

/* ラジオボタンとテキストのラベル */
label {
  display: flex;              /* フレックスボックスを使用して横並びに */
  align-items: flex-start;    /* ラジオボタンとテキストを縦に揃える */
  margin-bottom: 10px;        /* ラベル間の間隔 */
}

/* ラジオボタンのサイズ調整 */
input[type="radio"] {
  margin-right: 10px;         /* ラジオボタンとテキストの間隔 */
}

/* テキスト部分のスタイル */
.radio-text {
  word-wrap: break-word;      /* テキストが長いときに折り返し */
  max-width: 95%;           /* 最大幅を指定して、テキストの折り返し位置を調整 */
  display: block;             /* テキストをブロック要素として表示 */
}

/*フォント*/
.font01{
  font-size:1.0rem;
}

/*問題文*/
.question dl {
  margin: 0;
  padding: 0;
}

.question dt {
  margin: 0 0 5px 0;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
  background: #eef4ff;
  border-left: 5px solid #4a78d3;
  border-radius: 6px;
}

.question dd {
  margin: 0 0 15px 0;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.8;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.question-text{
    margin:10px 0 15px 0;
}

.question-line{
    margin-bottom:10px;
    padding-left:1.2em;
    text-indent:-1.2em;
    line-height:1.9;
}

/*スマホ長押し対策*/
.question,
.question * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}