@charset "UTF-8";

/* ================================================================
   作業環境測定士 独学ノート 共通スタイル
   テーマカラー: #1f7a5a（深緑）
   レイアウト・タイポグラフィは姉妹サイト「初心者が学ぶ建築施工管理」(sekou-style.css)に準拠
   2カラム（本文680px ＋ 空サイドバー336px）。h2=塗り背景・游ゴシック見出し。
   ================================================================ */

:root{ --theme:#1f7a5a; --theme-d:#155c43; --link:#0044CC; }

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }
svg{ max-width:100%; height:auto; }
.contents1 figure svg{ width:100%; height:auto; max-width:600px; display:block; margin:0 auto; }

body{ margin:0; background:#fff; color:#313336;
  font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; }

a:link, a:visited, a:active{ text-decoration:underline; color:var(--link); }
a:hover{ text-decoration:underline; color:var(--link); }

/* ---- ヘッダー / ナビ / パンくず ---- */
.header{ background:var(--theme); }
.header a{ display:block; color:#fff !important; text-decoration:none !important; font-weight:bold;
  font-size:1.5rem; letter-spacing:.06em; padding:16px 20px; text-align:center; line-height:1.4;
  font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif; }
.header a:hover{ opacity:.9; }

.topmenu{ background:var(--theme-d); }
.topmenu a{ color:#eafff5; text-decoration:none; font-size:.86rem; font-weight:bold;
  display:inline-block; padding:9px 12px; white-space:nowrap; }
.topmenu a:hover{ background:rgba(255,255,255,.12); text-decoration:none; }

.pan{ font-size:.8rem; color:#666; padding:8px 4px; }
.pan a{ color:var(--theme); text-decoration:none; }
.pan a:hover{ text-decoration:underline; }
.pan-list-inline{ margin:0; padding:8px 4px; list-style:none; font-size:.8rem; }
.pan-list-inline li{ display:inline; }

/* ---- 見出し ---- */
h1{ font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
  font-size:2em; font-weight:bold; line-height:1.5; margin:.2em 0 .6em;
  border-bottom:3px solid var(--theme); padding-bottom:.35em; }
h2{ position:relative; background:var(--theme); color:#fff; border-radius:6px;
  padding:.5em .75em; margin:2.2em 0 1.0em; display:block; font-size:1.5em; }
h2::after{ position:absolute; top:100%; left:30px; content:''; width:0; height:0;
  border:10px solid transparent; border-top:14px solid var(--theme); }
h3{ font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
  font-size:1.30em; color:#3E3E3E; font-weight:bold; border-left:solid 6px var(--theme);
  padding:.5em 0 .5em .7em; margin:1.8em 0 .5em; }
section > h2:first-child{ margin-top:.8em; }

/* ---- 本文 ---- */
p{ font-size:17px; line-height:1.95; color:#222; margin:.9em 0; }
.contents1 ul, .contents1 ol{ font-size:17px; line-height:1.9; margin:.6em 0 1.2em; padding-left:1.5em; }
.contents1 ul li, .contents1 ol li{ margin:.3em 0; }

/* ---- 強調 ---- */
.marker{ background-color:#ff9; padding:0 2px; font-size:inherit; }
.marker-under{ background:linear-gradient(transparent 60%,#ff9 60%); padding:0 2px; font-size:inherit; }
.bold-red{ font-weight:bold; color:#c0271a; font-size:inherit; }
.contents1 span a:link,.contents1 span a:visited,.contents1 span a:active,.contents1 span a:hover{ color:var(--link); text-decoration:underline; }

/* ---- 表 ---- */
table{ width:100%; border-collapse:collapse; margin:1em 0; }
table, td, th{ border:1px solid #595959; }
td, th{ padding:8px 10px; text-align:left; vertical-align:top; line-height:1.6; }
thead th, table tr:first-child th{ background:var(--theme-d); color:#fff; }
tbody tr:nth-child(even), tr.even{ background:#f3f8f5; }
tr.odd{ background:#fafdfb; }

/* ---- 図 ---- */
figure{ margin:1.5em 0; text-align:center; }
figcaption{ font-size:.82em; color:#666; margin-top:6px; line-height:1.55; text-align:left; }

/* ---- 要点ボックス ---- */
.article-point-box{ border:1px solid #cfe3d9; background:#f6fbf9; padding:12px 14px; margin:16px 0 20px; border-radius:6px; font-size:15px; line-height:1.85; }
.article-point-title{ font-size:16px; font-weight:bold; color:var(--theme-d); margin:0 0 8px; padding:0 0 0 8px; border-left:4px solid var(--theme); }
.article-point-box p{ margin:0 0 8px; }
.article-point-box p:last-child{ margin-bottom:0; }

/* ---- 一言ノート ---- */
.simple-note{ background:#f3f8f5; border-left:3px solid var(--theme); padding:.55em .9em; margin:.5em 0 1.4em; font-size:15px; line-height:1.85; color:#333; }

/* ---- もちごめ吹き出し ---- */
.sokuta-voice{ display:flex; align-items:flex-start; gap:12px; margin:18px 0 22px; }
.sokuta-voice-icon{ width:56px; height:56px; border-radius:50%; flex-shrink:0; background:var(--theme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%231f7a5a'/%3E%3Cpath d='M9 9 L7 4 L12.5 7 Z' fill='%23eafaf2'/%3E%3Cpath d='M23 9 L25 4 L19.5 7 Z' fill='%23eafaf2'/%3E%3Cpath d='M16 6 C22 6 26 10 26 16 C26 22 22 27 16 27 C10 27 6 22 6 16 C6 10 10 6 16 6 Z' fill='%23eafaf2'/%3E%3Ccircle cx='12' cy='15' r='4.3' fill='%231f7a5a'/%3E%3Ccircle cx='20' cy='15' r='4.3' fill='%231f7a5a'/%3E%3Ccircle cx='12' cy='15' r='2' fill='%23ffffff'/%3E%3Ccircle cx='20' cy='15' r='2' fill='%23ffffff'/%3E%3Ccircle cx='12.7' cy='15.7' r='1' fill='%231f7a5a'/%3E%3Ccircle cx='20.7' cy='15.7' r='1' fill='%231f7a5a'/%3E%3Cpath d='M16 17.5 L18 20 L14 20 Z' fill='%23f2a35e'/%3E%3C/svg%3E") center/cover no-repeat; }
.sokuta-voice-bubble{ position:relative; background:#fff; border:2px solid var(--theme); border-radius:12px; padding:10px 14px; font-size:15px; line-height:1.8; }
.sokuta-voice-bubble::before{ content:''; position:absolute; left:-16px; top:14px; border:8px solid transparent; border-right-color:var(--theme); }
.sokuta-voice-bubble::after{ content:''; position:absolute; left:-11px; top:17px; border:5px solid transparent; border-right-color:#fff; }
.sokuta-voice-name{ font-size:12px; font-weight:bold; color:var(--theme-d); margin:0 0 5px; line-height:1.4; }
.sokuta-voice-bubble p{ margin:.2em 0; }
.sokuta-answer{ font-weight:bold; color:var(--theme-d); margin:0 0 14px; font-size:16px; }

/* ---- 混同しやすい用語 ---- */
.confusing-terms-box{ border:1px solid #d7e6df; background:#fbfdfc; padding:12px 14px; margin:20px 0; border-radius:6px; font-size:15px; line-height:1.8; }
.confusing-terms-title{ font-size:17px; font-weight:bold; color:var(--theme-d); margin:0 0 10px; }
.confusing-term-name{ font-size:16px; font-weight:bold; margin:12px 0 4px; padding:.35em .6em; background:#eef4f1; border-radius:5px; color:#333; }
.confusing-terms-box p{ margin:0 0 8px; }
.confusing-terms-box p:last-child{ margin-bottom:0; }

/* ---- 管理人コメント ---- */
.admin-comment-box{ border-left:5px solid var(--theme); background:#f7faf8; padding:12px 14px; margin:20px 0; border-radius:4px; font-size:15px; line-height:1.85; }
.admin-comment-title{ font-size:17px; font-weight:bold; color:var(--theme-d); margin:0 0 8px; }
.admin-comment-box p{ margin:0 0 .9em; }
.admin-comment-box p:last-child{ margin-bottom:0; }

/* ---- ○×クイズ / 理解度チェック ---- */
.qa-block{ border:1px solid #cfe0d8; border-radius:6px; margin:10px 0; overflow:hidden; }
.qa-q{ padding:9px 12px 7px; margin:0 !important; font-size:15.5px; line-height:1.8; background:#f1f7f4; }
.qa-q p{ margin:.2em 0; }
details.qa-answer summary{ cursor:pointer; list-style:none; padding:5px 12px; font-size:.9em; font-weight:bold; color:var(--theme-d); background:#f5f7f6; border-top:1px solid #cfe0d8; user-select:none; }
details.qa-answer summary::-webkit-details-marker{ display:none; }
.qa-answer-body{ padding:9px 12px 11px; font-size:15px; line-height:1.85; background:#fff; border-top:1px solid #eee; }
.qa-answer-body p{ margin:0 0 6px; }
.qa-answer-body p:last-child{ margin-bottom:0; }

/* ---- 参考資料 ---- */
.source-box{ border:1px solid #e2e2e2; background:#fafafa; padding:12px 14px; margin:18px 0 6px; border-radius:6px; font-size:14px; line-height:1.8; }
.source-box-title{ font-size:17px; font-weight:bold; color:#333; margin:0 0 10px; }
.source-box ul{ font-size:14px; }

/* ---- 確認日 ---- */
.article-date-note{ font-size:.82em; color:#999; margin:10px 0 0; line-height:1.6; }

/* ---- 関連記事 ---- */
.related-box{ border:1px solid #cfe3d9; border-radius:6px; padding:.7em 1.1em; margin:18px 0 20px; background:#f6fbf9; }
.related-box-title{ font-weight:bold; color:var(--theme-d); margin:0 0 .4em; }
.related-box ul{ margin:.3em 0 0; }

/* ---- 著者ボックス ---- */
.author-box{ display:flex; gap:14px; align-items:flex-start; border:1px solid #cfe3d9; background:#f6fbf9; border-radius:6px; padding:16px 18px; margin:24px 0 8px; }
.author-box-img{ width:64px; height:64px; border-radius:50%; background:#fff url(favicon.svg) center/cover no-repeat; flex-shrink:0; }
.author-box-body{ flex:1; }
.author-box-label{ font-size:.78em; color:var(--theme-d); font-weight:bold; letter-spacing:.05em; margin:0 0 4px; }
.author-box-name{ font-size:1em; font-weight:bold; color:#222; margin:.1em 0; }
.author-box-bio{ font-size:.85em; line-height:1.75; color:#444; margin:.2em 0; }

/* ---- フッター ---- */
.footer{ clear:both; background:var(--theme-d); color:#dff3ea; text-align:center; font-size:.8rem; padding:16px; margin-top:24px; }
.footer a{ color:#dff3ea; }

/* ================================================================
   レイアウト：モバイル（〜949px）＝1カラム
   ================================================================ */
@media screen and (max-width:949px){
  .wrapper{ width:100%; overflow:hidden; }
  .header a{ font-size:1.25rem; padding:13px 16px; }
  .topmenu{ white-space:nowrap; overflow-x:auto; }
  .pan{ padding:8px 12px; }
  .contents1{ padding:4px 14px 24px; }
  .contents33{ display:none; }
  body{ font-family:"メイリオ",Meiryo,Osaka,"ヒラギノ角ゴ Pro W3","ＭＳ ゴシック",Arial,sans-serif; }
  h1{ font-size:1.42em; line-height:1.45; }
  p{ font-size:15.5px; line-height:1.9; }
  .contents1 ul, .contents1 ol{ font-size:15.5px; }
}

/* ================================================================
   レイアウト：デスクトップ（950px〜）＝2カラム
   ================================================================ */
@media screen and (min-width:950px){
  .wrapper{ max-width:1040px; margin:0 auto; }
  .header a{ text-align:left; }
  .topmenu{ padding:0 8px; }
  .pan{ padding:8px 4px; }
  .contents1{ float:left; width:680px; margin:10px 0; }
  .contents33{ float:right; width:336px; margin:10px 0; min-height:1px; }
  .footer{ max-width:1040px; }
  /* 本文の左右余白は contents1 側で確保 */
  .contents1{ padding:0 4px; }
}

/* ================================================================
   計算記事：式・計算ボックス
   ================================================================ */
.formula{ background:#f3f8f5; border:1px solid #cfe3d9; border-radius:6px; padding:.7em 1em; margin:1em 0; text-align:center; font-size:1.06em; font-weight:bold; color:#222; line-height:1.7; }
.formula-box{ background:#fafdfb; border:1px solid #dde7e2; border-radius:6px; padding:.6em 1em; margin:1em 0; }
.calc-box{ background:#fafdfb; border:1px solid #dde7e2; border-left:4px solid var(--theme); border-radius:6px; padding:.7em 1em; margin:1.1em 0; font-size:15px; line-height:1.85; }
.calc-box p{ margin:.35em 0; }

/* ================================================================
   有機溶剤の区分色ラベル（第1種=赤・第2種=黄・第3種=青）
   ================================================================ */
.kubun-red{ color:#c0271a; font-weight:bold; }
.kubun-yellow{ color:#9a7d00; font-weight:bold; }
.kubun-blue{ color:#1f5fae; font-weight:bold; }

/* ================================================================
   過去問 前後ナビ（pn-prev / pn-next）
   ================================================================ */
.kakomon-prevnext{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.kakomon-prevnext a{ box-sizing:border-box; flex:0 1 calc(50% - 6px); display:flex; flex-direction:column; justify-content:center; border:1px solid var(--theme); border-radius:8px; padding:12px 14px; background:#f6fbf9; text-decoration:none; color:#222; }
.kakomon-prevnext a:hover{ background:#eef6f2; text-decoration:none; }
.pn-label{ display:block; font-size:12px; font-weight:bold; color:var(--theme-d); margin-bottom:4px; }
.pn-next{ text-align:right; margin-left:auto; }

/* ================================================================
   インデックス／カテゴリページ
   ================================================================ */
.cat-grid{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; list-style:none; padding:0; }
.cat-card{ flex:1 1 calc(50% - 12px); min-width:200px; background:#f9fbfa; border:1px solid #cfe3d9; border-radius:6px; padding:14px 16px; }
.cat-card:hover{ background:#eef6f2; }
.cat-name{ font-weight:bold; font-size:1.05em; margin:0 0 6px; }
.cat-name a{ color:var(--theme-d); text-decoration:none; }
.cat-name a:hover{ text-decoration:underline; }
.cat-desc{ color:#555; font-size:.88em; line-height:1.6; margin:0 0 8px; }
.cat-count{ display:inline-block; font-size:.72em; font-weight:bold; color:#fff; background:var(--theme); padding:.2em .7em; border-radius:4px; }

.about-box{ border:1px solid #cfe3d9; background:#f6fbf9; border-radius:6px; padding:14px 16px; margin:20px 0; font-size:15px; line-height:1.8; }
.lead{ font-size:16px; line-height:1.9; margin:14px 0 18px; color:#333; }

.hub-list{ list-style:none; padding:0; margin:10px 0 22px; }
.hub-list li{ padding:10px 0; border-bottom:1px solid #e6efea; }
.hub-list li a{ color:var(--theme-d); font-weight:bold; text-decoration:none; }
.hub-list li a:hover{ text-decoration:underline; }
.desc{ display:block; color:#666; font-size:.85em; line-height:1.6; margin-top:3px; font-weight:normal; }
.hub-links{ list-style:none; padding:0; margin:10px 0; }
.hub-links li{ padding:6px 0; }

.toc{ background:#f3f8f5; border:1px solid #cfe3d9; border-radius:6px; padding:12px 14px; margin:16px 0; }
.subj-label{ font-weight:bold; color:var(--theme-d); font-size:1.05em; margin:16px 0 6px; border-left:5px solid var(--theme); padding-left:.5em; }
.qlist{ list-style:none; padding:0; margin:0 0 14px; }
.qlist li{ padding:5px 0; border-bottom:1px solid #eef2f0; }
.note{ font-size:.85em; color:#777; line-height:1.7; margin:10px 0; }