/* 中小企業診断士のための AIエージェント講座 — style.css
   WEBMARKS AI CAMP のデザイントークンを踏襲（白基調 × WEBMARKSブルー）。
   外部CDN・外部フォントは一切読まない。グラデ文字は使わない（単色文字のみ）。 */

:root{
  --color-bg:#FFFFFF;
  --color-bg-section:#F6F9FC;
  --color-primary:#1D5FA8;
  --color-primary-dark:#154880;
  --color-navy:#12233B;
  --color-secondary-light:#E7F0FB;
  --color-accent:#4A90D9;
  --color-success:#2E9E6B;
  --color-success-bg:#E4F5EC;
  --color-warning:#C77C1F;
  --color-warning-bg:#FBF0E1;
  --color-danger:#B3423A;
  --color-danger-bg:#FBECEA;
  --color-border:#E3E9F0;
  --color-text:#12233B;
  --color-text-muted:#4A5A70;
  --color-text-faint:#8496AC;

  --day-1:#2E6FB8;
  --day-2:#1D5FA8;
  --day-3:#17518F;
  --day-4:#123F72;

  --hero-navy-1:#0B1B3A;
  --hero-navy-2:#12295C;
  --hero-text:#FFFFFF;
  --hero-text-muted:#C3D3EE;
  --hero-kicker:#8FC6FF;

  --font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Hiragino Kaku Gothic ProN",monospace;

  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem;
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(18,35,59,.05),0 1px 3px rgba(18,35,59,.05);
  --shadow-card-hover:0 6px 14px rgba(18,35,59,.07),0 18px 34px rgba(18,35,59,.11);
  --header-h:60px;
  --content-max:960px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-sans);line-height:1.8;
  font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;
}
.site-header .inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 var(--space-5);
  display:flex;align-items:center;gap:var(--space-5);
}
.brand{font-weight:700;color:var(--color-navy);font-size:.95rem;letter-spacing:.01em;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--color-primary)}
.brand small{display:block;font-weight:500;font-size:.7rem;color:var(--color-text-faint);letter-spacing:.02em}
.site-nav{margin-left:auto;display:flex;gap:var(--space-4);flex-wrap:wrap}
.site-nav a{
  font-size:.86rem;color:var(--color-text-muted);font-weight:500;
  padding:.3rem .1rem;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--color-primary);text-decoration:none}
.site-nav a.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ---------- ヒーロー ---------- */
.hero{
  background:linear-gradient(135deg,var(--hero-navy-1),var(--hero-navy-2));
  color:var(--hero-text);padding:var(--space-7) var(--space-5);
}
.hero .inner{max-width:var(--content-max);margin:0 auto}
.hero .kicker{
  color:var(--hero-kicker);font-size:.82rem;font-weight:600;letter-spacing:.08em;
  margin:0 0 var(--space-3);text-transform:none;
}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.4;margin:0 0 var(--space-4);font-weight:700}
.hero .lead{color:var(--hero-text-muted);font-size:1.02rem;margin:0;max-width:44em}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-6)}
.hero-meta div{border-left:3px solid var(--hero-kicker);padding-left:var(--space-4)}
.hero-meta dt{font-size:.76rem;color:var(--hero-text-muted);margin:0 0 .15rem}
.hero-meta dd{margin:0;font-size:1.05rem;font-weight:700}

/* ---------- レイアウト ---------- */
main{max-width:var(--content-max);margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-7)}
section{margin-bottom:var(--space-7)}
h2{font-size:1.4rem;margin:0 0 var(--space-4);line-height:1.5;font-weight:700}
h2 .num{color:var(--color-accent);margin-right:.5rem;font-weight:700}
h3{font-size:1.1rem;margin:var(--space-6) 0 var(--space-3);font-weight:700}
p{margin:0 0 var(--space-4)}
.section-lead{color:var(--color-text-muted);margin-bottom:var(--space-5)}

/* ---------- カード ---------- */
.card-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-5);background:#fff;box-shadow:var(--shadow-card);
  transition:box-shadow .18s ease,transform .18s ease;display:block;color:inherit;
}
a.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);text-decoration:none}
.card h3{margin:0 0 var(--space-2);font-size:1.02rem}
.card p{margin:0;font-size:.9rem;color:var(--color-text-muted)}

/* 日程カード */
.day-card{border-top:4px solid var(--color-primary)}
.day-card[data-day="D1"]{border-top-color:var(--day-1)}
.day-card[data-day="D2"]{border-top-color:var(--day-2)}
.day-card[data-day="D3"]{border-top-color:var(--day-3)}
.day-card[data-day="D4"]{border-top-color:var(--day-4)}
.day-card .date{
  font-size:.8rem;color:var(--color-text-faint);font-weight:600;
  display:block;margin-bottom:.2rem;
}
.day-card .day-label{
  display:inline-block;font-size:.72rem;font-weight:700;color:#fff;
  background:var(--color-primary);border-radius:var(--radius-pill);
  padding:.1rem .6rem;margin-bottom:var(--space-3);
}
.day-card[data-day="D1"] .day-label{background:var(--day-1)}
.day-card[data-day="D2"] .day-label{background:var(--day-2)}
.day-card[data-day="D3"] .day-label{background:var(--day-3)}
.day-card[data-day="D4"] .day-label{background:var(--day-4)}

/* ---------- テーブル ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--space-5)}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
th,td{border:1px solid var(--color-border);padding:.6rem .8rem;text-align:left;vertical-align:top}
th{background:var(--color-bg-section);font-weight:700;white-space:nowrap}
tbody tr:nth-child(even){background:#FBFDFF}
td.num,th.num{text-align:right;white-space:nowrap}

/* ---------- コマ詳細 ---------- */
.lesson-head{border-bottom:1px solid var(--color-border);padding-bottom:var(--space-5);margin-bottom:var(--space-5)}
.lesson-head .breadcrumb{font-size:.82rem;color:var(--color-text-faint);margin-bottom:var(--space-3)}
.lesson-head h1{font-size:clamp(1.35rem,3.2vw,1.85rem);margin:0 0 var(--space-2);line-height:1.45}
.lesson-head .sub{color:var(--color-text-muted);margin:0}
.goal-box{
  background:var(--color-secondary-light);border-left:4px solid var(--color-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-6);
}
.goal-box .label{font-size:.76rem;font-weight:700;color:var(--color-primary-dark);display:block;margin-bottom:.2rem}
.goal-box p{margin:0;font-weight:500}

.segments{list-style:none;padding:0;margin:0 0 var(--space-6)}
.segments li{
  display:flex;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-4) 0;border-bottom:1px dashed var(--color-border);
}
.segments li:last-child{border-bottom:none}
.seg-time{
  flex:0 0 88px;font-weight:700;font-size:.9rem;color:var(--color-navy);
  display:flex;flex-direction:column;gap:.2rem;
}
.seg-badge{
  display:inline-block;font-size:.68rem;font-weight:700;border-radius:var(--radius-pill);
  padding:.05rem .5rem;text-align:center;letter-spacing:.02em;
}
.seg-badge[data-type="講義"]{background:var(--color-secondary-light);color:var(--color-primary-dark)}
.seg-badge[data-type="演習"]{background:var(--color-success-bg);color:var(--color-success)}
.seg-badge[data-type="共有"]{background:var(--color-warning-bg);color:var(--color-warning)}
.seg-text{flex:1;font-size:.94rem}

.pill-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pill-list li{
  background:var(--color-bg-section);border:1px solid var(--color-border);
  border-radius:var(--radius-pill);padding:.2rem .8rem;font-size:.84rem;
}

/* ---------- 注記・警告 ---------- */
.note{
  background:var(--color-bg-section);border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5);font-size:.9rem;color:var(--color-text-muted);
  border-left:3px solid var(--color-border);margin-bottom:var(--space-5);
}
.note.warn{background:var(--color-warning-bg);border-left-color:var(--color-warning);color:#7A4E12}
.note strong{color:inherit}

/* ---------- プロンプト ---------- */
.prompt{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  margin-bottom:var(--space-5);overflow:hidden;background:#fff;
}
.prompt-head{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.prompt-head h3{margin:0 0 .2rem;font-size:1.02rem}
.prompt-head .use{margin:0;font-size:.88rem;color:var(--color-text-muted)}
.prompt-body{position:relative;background:#F8FAFD}
.prompt-body pre{
  margin:0;padding:var(--space-5);white-space:pre-wrap;word-break:break-word;
  font-family:var(--font-mono);font-size:.82rem;line-height:1.75;color:var(--color-navy);
  max-height:420px;overflow-y:auto;
}
.copy-btn{
  position:absolute;top:var(--space-3);right:var(--space-3);
  background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:.35rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer;
  font-family:var(--font-sans);
}
.copy-btn:hover{background:var(--color-primary-dark)}
.copy-btn.copied{background:var(--color-success)}
.prompt-tips{
  padding:var(--space-4) var(--space-5);font-size:.86rem;
  background:var(--color-success-bg);color:#1F6B4A;border-top:1px solid var(--color-border);
  white-space:pre-wrap;
}
.prompt-meta{
  padding:var(--space-3) var(--space-5);font-size:.78rem;color:var(--color-text-faint);
  border-top:1px solid var(--color-border);
}

/* ---------- 手順（事前準備） ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps>li{
  counter-increment:step;position:relative;padding-left:3rem;
  margin-bottom:var(--space-6);
}
.steps>li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:2rem;height:2rem;border-radius:50%;background:var(--color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;
}
.steps h3{margin:0 0 var(--space-2);font-size:1.02rem}

/* ---------- フッター ---------- */
.site-footer{
  border-top:1px solid var(--color-border);background:var(--color-bg-section);
  padding:var(--space-6) var(--space-5);margin-top:var(--space-7);
}
.site-footer .inner{max-width:var(--content-max);margin:0 auto;font-size:.84rem;color:var(--color-text-muted)}
.site-footer a{color:var(--color-primary)}

/* ---------- 教材本文・文書本文 ---------- */
.lesson-body,.doc-body{font-size:1rem}
.lesson-body h2,.doc-body h2{
  font-size:1.28rem;margin:var(--space-7) 0 var(--space-4);
  padding-bottom:var(--space-3);border-bottom:2px solid var(--color-secondary-light);
}
.lesson-body h2:first-child,.doc-body h2:first-child{margin-top:0}
.lesson-body h3,.doc-body h3{
  font-size:1.06rem;margin:var(--space-6) 0 var(--space-3);
  color:var(--color-primary-dark);
}
.lesson-body h4,.doc-body h4{font-size:.98rem;margin:var(--space-5) 0 var(--space-2)}
.lesson-body p,.doc-body p{margin:0 0 var(--space-4)}
.lesson-body ul,.lesson-body ol,.doc-body ul,.doc-body ol{margin:0 0 var(--space-4);padding-left:1.4rem}
.lesson-body li,.doc-body li{margin-bottom:var(--space-2)}
.lesson-body li.sub,.doc-body li.sub{margin-left:1rem;list-style-type:circle}
.lesson-body hr,.doc-body hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-6) 0}

blockquote{
  margin:0 0 var(--space-5);padding:var(--space-4) var(--space-5);
  background:var(--color-bg-section);border-left:4px solid var(--color-accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-text-muted);
}
blockquote p:last-child{margin-bottom:0}

code{
  background:var(--color-bg-section);border:1px solid var(--color-border);
  border-radius:4px;padding:.1em .4em;font-family:var(--font-mono);
  font-size:.86em;color:var(--color-primary-dark);word-break:break-word;
}

pre.code-block{
  background:#F8FAFD;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5);overflow-x:auto;margin:0 0 var(--space-5);
  font-family:var(--font-mono);font-size:.84rem;line-height:1.7;color:var(--color-navy);
}
pre.code-block code{background:none;border:none;padding:0;font-size:inherit;color:inherit}

ul.checklist{list-style:none;padding-left:0}
ul.checklist li{
  position:relative;padding-left:1.9rem;margin-bottom:var(--space-3);
}
ul.checklist li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:1.1rem;height:1.1rem;border:2px solid var(--color-primary);
  border-radius:4px;background:#fff;
}

/* ---------- 検索 ---------- */
.search-box input[type="search"]{
  width:100%;padding:var(--space-4) var(--space-5);font-size:1rem;
  border:2px solid var(--color-border);border-radius:var(--radius-md);
  font-family:var(--font-sans);color:var(--color-text);background:#fff;
  -webkit-appearance:none;appearance:none;
}
.search-box input[type="search"]:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(29,95,168,.12);
}
.search-hint{font-size:.84rem;color:var(--color-text-faint);margin:var(--space-2) 0 0}
.search-results{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
a.hit{
  display:block;border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);background:#fff;color:inherit;
  box-shadow:var(--shadow-card);
}
a.hit:hover{box-shadow:var(--shadow-card-hover);text-decoration:none;transform:translateY(-1px)}
.hit-cat{
  display:inline-block;font-size:.72rem;font-weight:700;color:var(--color-primary-dark);
  background:var(--color-secondary-light);border-radius:var(--radius-pill);
  padding:.1rem .6rem;margin-bottom:var(--space-2);
}
.hit-title{display:block;font-weight:700;font-size:1rem;margin-bottom:.2rem}
.hit-use{display:block;font-size:.86rem;color:var(--color-text-muted)}
.no-hit{
  padding:var(--space-5);background:var(--color-bg-section);
  border-radius:var(--radius-md);color:var(--color-text-muted);margin:0;
}

/* ---------- 進捗 ---------- */
.progress-bar{
  height:8px;background:var(--color-border);border-radius:var(--radius-pill);
  overflow:hidden;margin:var(--space-3) 0;
}
.progress-bar span{display:block;height:100%;background:var(--color-success);width:0;transition:width .3s ease}
.progress-text{font-size:.86rem;color:var(--color-text-muted);margin:0}
.done-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:2px solid var(--color-success);color:var(--color-success);
  border-radius:var(--radius-pill);padding:.45rem 1.2rem;font-size:.9rem;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);
}
.done-btn:hover{background:var(--color-success-bg)}
.done-btn.is-done{background:var(--color-success);color:#fff}
.card.is-done{border-color:var(--color-success)}
.card .done-mark{
  display:none;font-size:.72rem;font-weight:700;color:var(--color-success);
  background:var(--color-success-bg);border-radius:var(--radius-pill);
  padding:.1rem .6rem;margin-bottom:var(--space-2);
}
.card.is-done .done-mark{display:inline-block}

/* ---------- 図解 ---------- */
.flow-figure{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 0 var(--space-5);padding-bottom:var(--space-2);
}
.flow-figure svg{min-width:820px;width:100%;height:auto;display:block}

/* ---------- FAQ ---------- */
.faq-item{
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  margin-bottom:var(--space-3);background:#fff;
}
.faq-item summary{
  cursor:pointer;padding:var(--space-4) var(--space-5);font-weight:700;
  list-style:none;position:relative;padding-right:2.6rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"＋";position:absolute;right:var(--space-5);top:50%;transform:translateY(-50%);
  color:var(--color-primary);font-weight:700;
}
.faq-item[open] summary::after{content:"−"}
.faq-item[open] summary{border-bottom:1px solid var(--color-border)}
.faq-item summary:hover{background:var(--color-bg-section)}
.faq-a{padding:var(--space-4) var(--space-5)}
.faq-a p{margin:0;color:var(--color-text-muted)}
.faq-item.important{border-left:4px solid var(--color-warning)}

/* ---------- 用語集 ---------- */
.term{
  border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-5);margin-bottom:var(--space-5);
}
.term:last-child{border-bottom:none}
.term h3{margin:0 0 var(--space-2);font-size:1.08rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.term .reading{font-size:.78rem;font-weight:400;color:var(--color-text-faint)}
.term-short{
  font-weight:700;color:var(--color-primary-dark);margin:0 0 var(--space-3);
  font-size:.96rem;
}
.term p{margin:0 0 var(--space-3)}
.term-note{
  font-size:.86rem;color:#7A4E12;background:var(--color-warning-bg);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin:0;
}

/* ---------- 印刷 ----------
   ワークシートは印刷して配る前提。画面用の装飾を落とし、
   書き込み欄が潰れないように高さと枠線を確保する。 */
@media print{
  .site-header,.site-nav,.copy-btn,.done-btn,.search-box,.search-results,
  .site-footer,.progress-bar,.progress-text{display:none !important}

  body{font-size:10.5pt;line-height:1.6;background:#fff;color:#000}
  main{max-width:none;padding:0}
  a{color:#000;text-decoration:none}

  .hero{background:#fff;color:#000;padding:0 0 8pt;border-bottom:2pt solid #000;margin-bottom:12pt}
  .hero h1{font-size:16pt;margin:0 0 4pt}
  .hero .lead,.hero-meta dt,.hero-meta dd{color:#333}
  .hero .kicker{color:#666;font-size:8pt;margin:0 0 2pt}
  .hero-meta{margin-top:8pt;gap:14pt}
  .hero-meta div{border-left:2pt solid #999}

  h2{font-size:12.5pt;page-break-after:avoid;break-after:avoid;margin-top:14pt}
  h3{font-size:11pt;page-break-after:avoid;break-after:avoid}
  p,li{orphans:2;widows:2}

  /* 表：枠線をはっきりさせ、途中で切らない */
  .table-wrap{overflow:visible}
  table{min-width:0;page-break-inside:auto;font-size:9.5pt}
  th,td{border:0.6pt solid #666;padding:5pt 6pt}
  th{background:#EEE !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr{page-break-inside:avoid;break-inside:avoid}
  tbody tr:nth-child(even){background:#fff}
  /* 空欄セル（ワークシートの書き込み欄）に高さを確保する */
  td:empty{height:30pt}

  /* チェックボックスは印刷でも枠が出るように */
  ul.checklist li::before{border:1pt solid #000}

  /* 補足枠は罫線だけにする */
  .note,.goal-box,.prompt-tips{
    background:#fff !important;border:0.6pt solid #999;color:#000;
    padding:6pt 8pt;page-break-inside:avoid;break-inside:avoid;
  }
  .note.warn{border-left:2.5pt solid #000}

  .prompt,.term,.faq-item{page-break-inside:avoid;break-inside:avoid}
  .prompt-body pre{max-height:none;font-size:9pt;border:0.6pt solid #CCC}
  .faq-item summary::after{content:""}
  .faq-a{display:block !important}

  .flow-figure{page-break-inside:avoid;break-inside:avoid}
  .flow-figure svg{min-width:0;width:100%}

  .card-grid{display:block}
  .card{border:0.6pt solid #999;box-shadow:none;margin-bottom:6pt;page-break-inside:avoid}
}

/* ---------- スマホ ---------- */
@media (max-width:640px){
  body{font-size:15px}
  main{padding:var(--space-6) var(--space-4)}
  .site-header .inner{padding:0 var(--space-4);gap:var(--space-3)}
  .site-nav{gap:var(--space-3)}
  .site-nav a{font-size:.8rem}
  .brand small{display:none}
  .hero{padding:var(--space-6) var(--space-4)}
  .hero-meta{gap:var(--space-4)}
  .segments li{flex-direction:column;gap:var(--space-2)}
  .seg-time{flex-direction:row;align-items:center;gap:var(--space-3)}
}