/* 地質調査技士 独学ノート 共通CSS
   テーマ色は --theme の1行を変えれば全体が変わる（土木#2a6db6と差別化＝地質の深緑）。
   設計は土木 doboku-style.css 系を地質に移植。 */
:root{
  --theme:#356859;          /* 地質テーマ（深緑） */
  --theme-d:#244a3d;        /* 濃い見出し用 */
  --theme-l:#eaf3ee;        /* 薄い背景 */
  --link:#1155cc;           /* リンクは視認性重視で標準の青（テーマ色と分離） */
  --ink:#222;
  --line:#d7e2db;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Meiryo","Yu Gothic",sans-serif;
  color:var(--ink);line-height:2.0;background:#fff;font-size:17px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.contents1 section p a,.contents1 section li a{text-decoration:underline}
.wrapper{max-width:1040px;margin:0 auto;padding:0 12px}

/* ヘッダ */
.header{background:var(--theme);padding:14px 18px}
.h_image{margin:0}
.site-header-title{color:#fff;font-size:20px;font-weight:700}
.mobile-site-title{display:none}
.topmenu{border-bottom:2px solid var(--theme);margin-bottom:6px}
.topmenu3{display:flex;flex-wrap:wrap;gap:2px;padding:6px 0}
.topmenu2 a{display:inline-block;padding:6px 12px;color:var(--link);font-size:14px;font-weight:600}
.topmenu2 a:hover{background:var(--theme-l);text-decoration:none}
.mobile-nav{display:none}

/* パンくず */
.contents5{font-size:12.5px;color:#666;margin:8px 0}
.pan-list-inline{list-style:none;padding:0;margin:0}
.pan-list-inline li{display:inline}

/* 2カラム（本文＋サイドバー） */
.main-2col{display:flex;gap:24px;align-items:flex-start}
.main-2col .contents1{flex:1 1 0;min-width:0;max-width:680px}
.sidebar{width:330px;flex:none}
.side-box{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 16px;background:#fafdfb}
.side-title{font-weight:700;color:var(--theme-d);margin:0 0 8px;font-size:14.5px;border-left:4px solid var(--theme);padding-left:8px}
.side-list{list-style:none;margin:0;padding:0}
.side-list li a{display:block;padding:6px 4px;font-size:13.5px;border-bottom:1px dashed var(--line)}
.side-list li:last-child a{border-bottom:none}
.side-list li a:hover{background:var(--theme-l);text-decoration:none}

/* 本文 */
.contents1{padding:6px 0 30px}
.contents1 h1{font-size:34px;line-height:1.45;border-left:7px solid var(--theme);
  padding:8px 0 8px 14px;margin:10px 0 22px}
.contents1 h2{font-size:26px;display:inline-block;background:linear-gradient(transparent 60%,#bfe6d0 60%);
  padding:0 .5em 2px .15em;margin:36px 0 14px;line-height:1.5;font-weight:700}
.contents1 h3{font-size:22px;color:var(--theme-d);border-bottom:2px solid var(--line);
  padding-bottom:4px;margin:24px 0 10px}
.contents1 p{margin:14px 0;font-size:17px;line-height:1.95}
.contents1 li{font-size:17px;line-height:1.9}
.contents1 section{margin-bottom:10px}

/* 装飾4色 */
.marker{background:linear-gradient(transparent 60%,#fff3a8 60%);font-weight:700}
.marker-under{border-bottom:3px solid #ffd95e;font-weight:700}
.bold-red{color:#e60000;font-weight:700}

/* 用語版パーツ：吹き出し・要点box・混同box・simple-note */
.sokuta-voice{display:flex;align-items:flex-start;gap:13px;margin:18px 0 22px}
.sokuta-voice-icon{width:60px;height:60px;border-radius:50%;flex-shrink:0}
.sokuta-voice-bubble{position:relative;background:#fff;border:2px solid var(--theme);border-radius:12px;padding:10px 14px;font-size:15px;line-height:1.85;color:#3a4a44}
.sokuta-voice-bubble::before{content:'';position:absolute;left:-16px;top:16px;border:8px solid transparent;border-right-color:var(--theme)}
.sokuta-voice-bubble::after{content:'';position:absolute;left:-11px;top:19px;border:5px solid transparent;border-right-color:#fff}
.sokuta-voice-name{font-size:12px;font-weight:700;color:var(--theme);margin:0 0 5px;line-height:1.4}
.sokuta-voice-bubble p{margin:0}
@media(max-width:600px){.sokuta-voice{gap:10px}.sokuta-voice-icon{width:46px;height:46px}}
.article-point-box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--theme);border-radius:10px;padding:12px 16px;margin:16px 0}
.article-point-box .ttl{font-weight:700;color:var(--theme-d);margin:0 0 6px}
.article-point-box ul{margin:0;padding-left:1.2em}
.confusing-terms-box{border:1px solid #e3c14a;background:#fffdf2;border-radius:10px;padding:12px 16px;margin:18px 0}
.confusing-terms-box .ttl{font-weight:700;color:#a07b00;margin:0 0 6px}
.simple-note{background:#f8f9f8;border-left:4px solid var(--theme);padding:8px 14px;margin:14px 0;font-size:14.5px}

/* 表 */
.contents1 table{width:100%;border-collapse:collapse;margin:16px 0;font-size:17px}
.contents1 th,.contents1 td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.contents1 thead th{background:var(--theme);color:#fff;text-align:center;white-space:nowrap}
.contents1 tbody tr:nth-child(even){background:#f7f8f7}

/* 図（自作SVG模式図・1記事1つ目安／canon§6） */
.contents1 figure{margin:20px 0;text-align:center}
.contents1 figure svg{width:100%;height:auto;max-width:600px;display:block;margin:0 auto}
.contents1 figure img{max-width:100%;height:auto}
.contents1 figcaption{font-size:13px;color:#666;margin-top:6px;line-height:1.6;text-align:left}
/* 器具・装置は自作図でなく1次資料を参照（§6図サブゲート②/③） */
.zuhan-ref{background:#f8f9f8;border:1px solid var(--line);border-left:4px solid var(--theme);border-radius:8px;padding:12px 15px;margin:18px 0;font-size:14.5px;line-height:1.85}
.zuhan-ref-ttl{font-weight:700;color:var(--theme);margin:0 0 5px}

/* 理解度チェック */
.qa-block{border:1px solid var(--line);border-radius:8px;margin:14px 0;overflow:hidden}
.qa-q{background:#f7f8f7;padding:12px 14px}
.qa-q p{margin:4px 0}
.qa-answer{padding:0 14px}
.qa-answer summary{cursor:pointer;color:var(--theme);font-weight:700;padding:10px 0}
.qa-answer-body{padding:0 0 12px}

/* 回遊ナビ */
.kakomon-prevnext{display:flex;justify-content:space-between;gap:10px;margin:22px 0}
.kakomon-prevnext a{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:#fafdfb}
.kakomon-prevnext a:hover{background:var(--theme-l);text-decoration:none}
.kakomon-prevnext .next{text-align:right}
.kakomon-prevnext .label{display:block;font-size:12px;color:#777}
.kakomon-prevnext .title{display:block;font-weight:700;color:var(--theme-d)}
.related-study-box{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:18px 0;background:#fafdfb}
.related-study-box .sideul{margin:6px 0 0;padding-left:1.2em}

/* 出典・著者・確認日 */
.source-box{border:1px solid var(--line);border-left:5px solid var(--theme);padding:12px 16px;margin:26px 0 8px;font-size:14px;background:#fafdfb}
.source-box-title{font-weight:700;margin:0 0 6px}
.source-box ul{margin:0;padding-left:1.2em}
.article-date-note{font-size:12.5px;color:#777;margin:6px 0 18px}
.author-box{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:14px;margin:18px 0}
.author-box-img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.author-box-label{font-size:12px;color:#777;margin:0}
.author-box-name{font-weight:700;margin:2px 0}
.author-box-bio{font-size:13.5px;color:#555;margin:4px 0 0}
.author-box-org{font-size:0.82em;color:#666;font-weight:normal;margin-left:6px}
.author-box-links{font-size:0.82em;margin-top:6px}
.author-box-links a{color:var(--link);text-decoration:none;margin-right:10px}
.author-box-links a:hover{text-decoration:underline}

/* カテゴリ一覧の説明文（参考：建築版 cat-d 同等・カードにしない） */
.cat-d{display:block;font-size:13.5px;color:#666;line-height:1.7;margin:2px 0 6px}

/* サイドバー（下部カテゴリ） */
.contents4{margin:24px 0 0}
.contents4 h4{font-size:15px;color:var(--theme-d);margin:16px 0 6px}
.contents4 .sideul{list-style:none;padding:0;margin:0}
.contents4 .sideul li a{display:block;padding:7px 10px;border-bottom:1px solid var(--line)}
.contents4 .sideul li a:hover{background:var(--theme-l);text-decoration:none}

/* フッタ */
.footer{background:var(--theme-d);margin-top:30px}
.kasentaitoru{margin:20px 0}

@media(max-width:900px){
  .nav-pc{display:none}
  .mobile-site-title{display:block;background:var(--theme);padding:10px 14px}
  .mobile-site-title a{color:#fff;font-weight:700}
  .mobile-nav{display:flex;flex-wrap:wrap;gap:2px;padding:6px 0;border-bottom:2px solid var(--theme)}
  .mobile-nav a{padding:6px 10px;font-size:13px;color:var(--link);font-weight:600}
  .contents1 h1{font-size:24px}
  .contents1 h2{font-size:20px}
  .kakomon-prevnext{flex-direction:column}
  .main-2col{flex-direction:column}
  .sidebar{width:100%}
}