@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/* ============================================================
   換地計算シミュレーター 共通CSS（数寄屋・抹茶テーマ / 令和5・6・7年）
   生成り × 深緑（抹茶）× 焦茶。朱は落款印のみ。
   ※3年分（r5/r6/r7）で共通。クラスは既存HTML（q1〜q4接頭辞）に対応。
============================================================ */
:root{
  --matcha:#3E5C44; --matcha-hover:#33503A; --matcha-deep:#2A4030; --matcha-light:#5A7A61;
  --matcha-border:#9DAE9F; --matcha-tint:#EEF2EC;
  --kokecha:#4A3524; --shu:#B23A2A;
  --bg-tatami-a:#ECE7D7; --bg-tatami-b:#E7E1CF; --bg-card:#F8F4E9; --bg-row:#F3EFE2; --bg-total:#E5DFC9;
  --line:#000; --line-table:#6B5A38;
  --ink:#1A1A1A; --ink-sub:#4A4535; --ink-muted:#7D7357;
  --font-serif:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS Mincho',serif;
}

/* 畳の背景 */
body{
  margin:0; color:var(--ink); font-family:var(--font-serif); -webkit-font-smoothing:antialiased;
  background:repeating-linear-gradient(90deg,
    var(--bg-tatami-a) 0, var(--bg-tatami-a) 8px,
    var(--bg-tatami-b) 8px, var(--bg-tatami-b) 9px);
}

/* --- ログインUI --- */
.compact-auth-bar{
  width:clamp(340px,85%,1200px)!important; margin:0 auto 25px!important; box-sizing:border-box!important;
  display:flex; justify-content:center; align-items:center; padding:12px 20px;
  border:1px solid var(--line); border-radius:2px; background:var(--bg-card); flex-wrap:wrap; gap:15px;
}
.auth-left{ font-size:15px; color:var(--ink); font-weight:bold; flex-basis:100%; text-align:center; }
.auth-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.compact-input{ padding:8px 12px; border:1.5px solid var(--ink); border-radius:2px; font-size:14px; width:160px; outline:none; font-family:var(--font-serif); background:#fff; color:var(--ink); }
.compact-input:focus{ border-color:var(--matcha); }
.compact-input::placeholder{ color:#6F675A; }
.compact-btn{ padding:8px 16px; border-radius:2px; font-size:14px; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; transition:all .2s; font-family:var(--font-serif); }
.btn-white{ background:#fff; border:1px solid var(--ink); color:var(--matcha); }
.btn-white:hover{ background:var(--matcha-tint); }
.btn-blue{ background:var(--matcha); border:1px solid var(--matcha); color:#fff; font-weight:bold; box-shadow:0 2px 0 var(--matcha-deep); }
.btn-blue:hover{ background:var(--matcha-hover); }
#auth-error-msg{ color:var(--shu); font-size:13px; font-weight:bold; width:100%; text-align:right; margin-top:-10px; }

/* --- 問題土台 --- */
.land-calc-wrapper, .q1-wrapper, .q2-wrapper, .q3-wrapper, .q4-wrapper{
  width:clamp(340px,85%,1200px)!important; margin:0 auto 2.5em!important; box-sizing:border-box!important;
  font-family:inherit; color:var(--ink);
}

/* 問題コンテナ（数寄屋カード＋落款） */
.question-container, .q1-question-container, .q2-question-container, .q3-question-container, .q4-question-container{
  position:relative!important; width:100%!important; box-sizing:border-box!important;
  background:var(--bg-card)!important; border:1px solid var(--line)!important; border-left:5px solid var(--matcha)!important;
  border-radius:2px!important; box-shadow:0 1px 4px rgba(90,80,50,.15)!important;
  padding:26px 26px 22px!important; margin:34px auto 30px!important; font-size:14.5px!important;
}
.question-container p, .q1-question-container p, .q2-question-container p, .q3-question-container p, .q4-question-container p{
  font-size:14.5px!important; line-height:2.1!important; color:var(--ink)!important; margin:0 0 8px!important;
}
/* 見出し（緑） */
.question-container h3, .q1-question-container h3, .q2-question-container h3, .q3-question-container h3, .q4-question-container h3{
  margin:0 0 16px!important; display:inline-block!important; color:var(--matcha)!important;
  font-size:16px!important; font-weight:bold!important; letter-spacing:.08em!important;
  border-bottom:2px solid var(--shu)!important; padding-bottom:4px!important;
  background:none!important; box-shadow:none!important;
}

/* --- 表 --- */
.table-container, .q1-table-container, .q2-table-container, .q3-table-container, .q4-table-container{
  width:100%!important; max-width:100%!important; overflow-x:auto!important; margin:0 auto 2em!important;
  border-radius:2px!important; background:var(--bg-card)!important; border:2px solid var(--kokecha)!important;
  padding:4px!important; box-shadow:0 1px 4px rgba(90,80,50,.15)!important;
}
.data-table, .q1-data-table, .q2-data-table, .q3-data-table, .q4-data-table{
  width:100%!important; min-width:650px!important; border-collapse:collapse!important; background:#fff!important; font-size:13.5px!important;
}
.data-table th, .data-table td,
.q1-data-table th, .q1-data-table td,
.q2-data-table th, .q2-data-table td,
.q3-data-table th, .q3-data-table td,
.q4-data-table th, .q4-data-table td{
  border:1px solid var(--line-table)!important; padding:12px!important; text-align:center!important;
  vertical-align:middle!important; font-size:15px!important; color:var(--ink)!important; white-space:nowrap!important;
}
.data-table thead th,
.q1-data-table thead th, .q2-data-table thead th, .q3-data-table thead th, .q4-data-table thead th{
  background:#1E2C4A!important; color:#fff!important; font-weight:bold!important; letter-spacing:.15em!important; border-color:rgba(255,255,255,.35)!important;
}
.data-table tbody td:first-child, .q2-data-table tbody th, .q3-data-table tbody th{ text-align:left!important; }
.q2-data-table tbody th, .q3-data-table tbody th{ font-weight:bold!important; background:var(--bg-row)!important; color:var(--ink)!important; }
.data-table tbody tr:nth-child(even) td,
.q1-data-table tbody tr:nth-child(even) td, .q2-data-table tbody tr:nth-child(even) td,
.q3-data-table tbody tr:nth-child(even) td, .q4-data-table tbody tr:nth-child(even) td{ background:var(--bg-row)!important; }
.q1-total-row td, .q2-total-row td, .q3-total-row td, .q4-total-row td, .total-row td{
  border-top:2px solid var(--kokecha)!important; font-weight:bold!important; background:var(--bg-total)!important;
}
.table-notes p, .q1-table-notes p, .q2-table-notes p, .q3-table-notes p, .q4-table-notes p{
  font-size:.85em!important; color:var(--ink-muted)!important; margin:8px 0 0 5px!important;
}

/* --- ボタン --- */
.quiz-controls, .q1-controls, .q2-controls, .q3-controls, .q4-controls{
  display:flex; justify-content:flex-end; flex-wrap:wrap!important; gap:10px; margin-bottom:1.2em; width:100%!important;
}
.swell-custom-btn, .q1-custom-btn, .q2-custom-btn, .q3-custom-btn, .q4-custom-btn{
  background:var(--matcha)!important; color:#fff!important; border:none!important; padding:11px 22px!important; cursor:pointer!important;
  border-radius:2px!important; font-size:14px!important; font-weight:bold!important; letter-spacing:.1em!important; font-family:var(--font-serif)!important;
  transition:all .2s ease!important; box-shadow:0 3px 0 var(--matcha-deep)!important;
}
.swell-custom-btn:hover, .q1-custom-btn:hover, .q2-custom-btn:hover, .q3-custom-btn:hover, .q4-custom-btn:hover{
  background:var(--matcha-hover)!important; transform:translateY(1px)!important; box-shadow:0 2px 0 var(--matcha-deep)!important;
}
/* 初期化＝控えめ */
.btn-reset, .q1-btn-reset, .q2-btn-reset, .q3-btn-reset, .q4-btn-reset{
  background:#fff!important; color:var(--ink-muted)!important; border:1px solid var(--ink)!important; box-shadow:none!important;
}
.btn-reset:hover, .q1-btn-reset:hover, .q2-btn-reset:hover, .q3-btn-reset:hover, .q4-btn-reset:hover{
  background:var(--bg-row)!important; box-shadow:none!important; transform:none!important;
}
/* 解答＝抹茶 */
.submit-btn, .q1-submit-btn, .q2-submit-btn, .q3-submit-btn, .q4-submit-btn{ background:var(--matcha)!important; box-shadow:0 2px 0 var(--matcha-deep)!important; }
.submit-btn:hover, .q1-submit-btn:hover, .q2-submit-btn:hover, .q3-submit-btn:hover, .q4-submit-btn:hover{ background:var(--matcha-hover)!important; }
/* 次の問題＝抹茶（旧・青の上書きを打ち消し） */
#btn-randomize, #q2-btn-randomize, #q3-btn-randomize, #q4-btn-randomize,
#btn-randomize-t6, #btn-randomize-t7, #btn-randomize-t8, #btn-randomize-t9,
#btn-randomize-t10, #btn-randomize-t11, #btn-randomize-t12, #btn-randomize-t13{
  background:var(--matcha)!important; box-shadow:0 3px 0 var(--matcha-deep)!important;
}

/* --- 解答エリア・入力 --- */
.answer-area, .q1-answer-area, .q2-answer-area, .q3-answer-area, .q4-answer-area{
  margin-top:15px!important; display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:12px!important;
  border-top:1px dashed var(--line)!important; padding-top:16px!important;
}
.answer-area input[type="text"], .answer-area input[type="number"],
.q1-answer-area input[type="text"], .q1-answer-area input[type="number"],
.q2-answer-area input[type="text"], .q2-answer-area input[type="number"],
.q3-answer-area input[type="text"], .q3-answer-area input[type="number"],
.q4-answer-area input[type="text"], .q4-answer-area input[type="number"],
.q4-question-container input[type="text"], .q4-question-container input[type="number"],
.q1-answer-area select, .q2-answer-area select, .q3-answer-area select, .q4-answer-area select{
  padding:10px 14px!important; border:1.5px solid var(--ink)!important; border-radius:2px!important; font-size:14px!important;
  color:var(--ink)!important; background:#fff!important; width:160px!important; max-width:100%!important; font-family:var(--font-serif)!important;
}
.answer-area input::placeholder{ color:#6F675A!important; }

/* 前提条件ボックス */
.q1-pre-conditions, .q2-pre-conditions, .q3-pre-conditions, .q4-pre-conditions{
  background:#fff!important; padding:16px!important; border:1px solid var(--line)!important; border-left:4px solid var(--matcha-light)!important;
  border-radius:2px!important; margin:18px auto!important; font-size:14px!important; line-height:1.9!important; width:100%!important; color:var(--ink)!important;
}

/* --- 正誤 --- */
.result-msg, .q1-result-msg, .q2-result-msg, .q3-result-msg, .q4-result-msg{ width:100%!important; margin-top:12px!important; font-weight:bold!important; font-size:16px!important; }
.result-correct, .q1-result-correct, .q2-result-correct, .q3-result-correct, .q4-result-correct{ color:var(--matcha)!important; font-size:1.5em!important; font-weight:bold!important; }
.result-incorrect, .q1-result-incorrect, .q2-result-incorrect, .q3-result-incorrect, .q4-result-incorrect{ color:var(--shu)!important; font-size:1.5em!important; font-weight:bold!important; }

/* 強調（黒字＋朱の下線） */
.highlight-text, .q1-highlight-text, .q2-highlight-text, .q3-highlight-text, .q4-highlight-text,
.question-container strong, .q1-question-container strong, .q2-question-container strong, .q3-question-container strong, .q4-question-container strong{
  color:var(--ink)!important; font-weight:bold!important; border-bottom:2px solid var(--shu)!important;
}

/* --- 解説ボックス --- */
.explanation-box, .q1-explanation-box, .q2-explanation-box, .q3-explanation-box, .q4-explanation-box{
  margin-top:20px!important; padding:22px!important; background:var(--bg-row)!important; border:1px solid var(--line)!important;
  border-left:4px solid var(--matcha)!important; border-radius:2px!important; font-size:15.5px!important; line-height:1.9!important; color:var(--ink)!important; display:none;
}
.explanation-box h4, .q1-explanation-box h4, .q2-explanation-box h4, .q3-explanation-box h4, .q4-explanation-box h4{
  margin-top:0!important; color:var(--matcha)!important; font-size:1.15em!important; border-bottom:2px solid var(--matcha-border)!important; padding-bottom:8px!important; margin-bottom:18px!important;
}
.method-box, .q2-method-box, .q3-method-box{
  background:#fff!important; padding:16px!important; border-radius:2px!important; margin-bottom:16px!important; border:1px solid var(--line)!important; border-left:5px solid var(--matcha-light)!important;
}
.method-box h5, .q2-method-box h5, .q3-method-box h5{ margin:0 0 12px 0!important; color:var(--matcha)!important; font-size:1em!important; }

/* 波線行 */
.q3-wave-row td{
  border-top:2px dashed var(--line-table)!important; border-bottom:2px dashed var(--line-table)!important;
  color:var(--ink-muted)!important; letter-spacing:5px!important; background:var(--bg-row)!important;
}