@charset "UTF-8";
/* ============================================================
   economy.css ― 経済基礎講座 専用スタイル（追加部品のみ）
   デザイン本体は /subpage.css と /pc-basic/pc-basic.css を共用。
   ここには経済基礎講座専用の追加部品（eco- プレフィックス）だけを置く。
   ============================================================ */

/* ---------- 表（データ表・比較表など） ----------
   使い方:
   <div class="eco-table-wrap">
     <table class="eco-table">
       <thead><tr><th>…</th></tr></thead>
       <tbody><tr><td>…</td></tr></tbody>
     </table>
   </div>
   横幅が入りきらない場合はラッパーが横スクロールする。 */
.eco-table-wrap{
  overflow-x:auto;
  margin:24px 0 30px;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
}
.eco-table{
  width:100%;
  border-collapse:collapse;
  font-size:16px; /* .pcb-text と同等 */
}
.eco-table caption{
  padding:11px 16px;
  text-align:left;
  font-weight:700;
  border-bottom:1px solid var(--pp-line);
}
.eco-table th,
.eco-table td{
  padding:11px 16px;
  text-align:left;
  line-height:1.7;
  border-bottom:1px solid var(--pp-line);
}
.eco-table thead th{
  background:var(--pp-ink);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}
.eco-table tbody tr:last-child th,
.eco-table tbody tr:last-child td{
  border-bottom:none;
}
.eco-table tbody tr:nth-child(even){
  background:var(--pp-deep);
}
.eco-table tbody th{
  background:var(--pp-paper);
  color:var(--pp-ink);
  font-weight:700;
  white-space:nowrap;
}

/* ---------- 考えてみる（.pcb-deep を土台に、アクセント色だけ変えた枠） ----------
   使い方:
   <div class="eco-think" id="think">
     <div class="eco-think-head"><span class="ttl">考えてみる</span><span class="en">THINK</span></div>
     <div class="eco-think-body">
       <div class="eco-q"><span class="qno">Q1</span>
         <p>問いの文…？</p>
         <p class="eco-hint">ヒント: …</p>
       </div>
     </div>
   </div>
   .pcb-deep（黒帯・黒枠）と並んだときに一目で区別がつくよう、
   枠線と見出し帯だけ --pp-brand-dark 系のアクセントに変えている。 */
.eco-think{
  border:1px solid var(--pp-brand-dark);
  border-radius:var(--pp-radius);
  overflow:hidden;
  margin:32px 0 8px;
}
.eco-think-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  background:var(--pp-brand-dark);
  color:#fff;
  padding:12px 20px;
}
.eco-think-head .ttl{
  font-size:16px;
  font-weight:700;
}
.eco-think-head .en{
  font-family:var(--pp-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.7);
}
.eco-think-body{padding:14px 20px 20px;}

.eco-q{
  margin:0 0 20px;
}
.eco-q:last-child{margin-bottom:0;}
.eco-q .qno{
  display:inline-block;
  font-family:var(--pp-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:#fff;
  background:var(--pp-brand-dark);
  border-radius:3px;
  padding:2px 9px;
  margin:0 0 8px;
}
.eco-q p{
  font-size:16px;
  line-height:1.95;
  color:var(--pp-ink);
  margin:0 0 6px;
}
.eco-hint{
  font-size:13.5px;
  line-height:1.8;
  color:var(--pp-faint);
  margin:0;
}

/* ---------- レッスン一覧: 準備中（リンク無し）行 ----------
   使い方:
   <li><span class="mk">▸</span>タイトル<span class="tag">準備中</span></li>
   .pcb-lessons li の中で a を使わない行のための補助スタイル。
   .pcb-lessons .soon と同じ見た目になるよう、a 相当の余白・配置だけ再現する。 */
.eco-plan{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:14px 2px;
  font-size:16px;
  color:var(--pp-faint);
}
.eco-plan .mk{color:var(--pp-line);font-size:15px;}
.eco-plan .tag{
  font-family:var(--pp-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--pp-faint);
  background:var(--pp-deep);
  border:1px solid var(--pp-line);
  border-radius:3px;
  padding:2px 7px;
  margin-left:auto;
  white-space:nowrap;
}

/* ---------- レスポンシブ（640px以下は本文パネルの余白縮小に合わせる） ---------- */
@media (max-width:640px){
  .eco-think-head{padding:10px 14px;}
  .eco-think-body{padding:12px 14px 16px;}
  .eco-table{font-size:14.5px;}
  .eco-table th,
  .eco-table td{padding:9px 10px;}
  .eco-table caption{padding:9px 10px;}
}