/*
========================================================
ファイル      : hlab-material-typography.css
用途          : 会員向け資料ページ 共通文字階層
バージョン    : 1.5
最終更新日    : 2026-10-17
========================================================

目的:
・「はじめる / 続ける / 育てる」の資料間で、ページ題名・説明文・
  主要見出しの大きさと行間が大きく変わらないようにする。
・入力欄、ボタン、補助表示など、操作密度が必要な部分は各資料の
  専用CSSを尊重する。
========================================================
*/

.hlab-material-typography-page .hlab-root {
  --hlab-material-title-size: clamp(28px, 3.2vw, 34px);
  --hlab-material-subtitle-size: clamp(15px, 1.8vw, 18px);
  --hlab-material-lead-size: clamp(13px, 1.35vw, 14px);
  --hlab-material-section-title-size: clamp(20px, 2.2vw, 23px);
  --hlab-material-reading-size: clamp(14px, 1.45vw, 15px);
  --hlab-material-dense-reading-size: 13px;
}

@media screen and (min-width: 641px) {
  /* ページ題名 */
  .hlab-material-typography-page .hl-title,
  .hlab-material-typography-page .hl-sheet-page-head h1,
  .hlab-material-typography-page .hl-monthly-hero h1 {
    font-size: var(--hlab-material-title-size);
    line-height: 1.22;
  }

  /* ページ副題 */
  .hlab-material-typography-page .hl-subtitle,
  .hlab-material-typography-page .hl-monthly-subtitle {
    font-size: var(--hlab-material-subtitle-size);
    line-height: 1.55;
  }

  /* ページ冒頭説明 */
  .hlab-material-typography-page .hl-lead p,
  .hlab-material-typography-page .hl-sheet-page-head__lead,
  .hlab-material-typography-page .hl-monthly-lead p {
    font-size: var(--hlab-material-lead-size);
    line-height: 1.72;
  }

  /* 主要グループ見出し */
  .hlab-material-typography-page .hl-group__head h2,
  .hlab-material-typography-page .hl-monthly-group__head h2 {
    font-size: var(--hlab-material-section-title-size);
    line-height: 1.32;
  }

  /* 読み物型資料の本文 */
  .hlab-material-typography-page .hl-content p,
  .hlab-material-typography-page .hl-summary p,
  .hlab-material-typography-page .hl-step-desc,
  .hlab-material-typography-page .hl-next-lead {
    font-size: var(--hlab-material-reading-size);
    line-height: 1.80;
  }

  .hlab-material-typography-page .hl-content ul,
  .hlab-material-typography-page .hl-content ol {
    font-size: var(--hlab-material-reading-size);
    line-height: 1.75;
  }

  /* 整理シート型資料は操作量が多いため、一段だけコンパクトにする */
  .hlab-material-typography-page .hl-group__intro,
  .hlab-material-typography-page .hl-sheet-viewpoint__copy p,
  .hlab-material-typography-page .hl-sheet-key-message {
    font-size: var(--hlab-material-dense-reading-size);
    line-height: 1.72;
  }

  .hlab-material-typography-page .hl-sheet-viewpoint-question,
  .hlab-material-typography-page .hl-sheet-thinking-guide__notebook p {
    font-size: 12px;
    line-height: 1.68;
  }

  .hlab-material-typography-page .hl-sheet-learning-guide summary small {
    font-size: 10px;
    line-height: 1.50;
  }

  .hlab-material-typography-page .hl-sheet-learning-guide__grid p {
    font-size: 12px;
    line-height: 1.70;
  }
}

@media screen and (max-width: 640px) {
  .hlab-material-typography-page .hlab-root {
    --hlab-material-title-size: clamp(26px, 8vw, 30px);
    --hlab-material-subtitle-size: 16px;
    --hlab-material-lead-size: 13px;
    --hlab-material-section-title-size: clamp(19px, 5.6vw, 21px);
    --hlab-material-reading-size: 14px;
    --hlab-material-dense-reading-size: 13px;
  }

  .hlab-material-typography-page .hl-title,
  .hlab-material-typography-page .hl-sheet-page-head h1,
  .hlab-material-typography-page .hl-monthly-hero h1 {
    font-size: var(--hlab-material-title-size);
    line-height: 1.25;
  }

  .hlab-material-typography-page .hl-subtitle,
  .hlab-material-typography-page .hl-monthly-subtitle {
    font-size: var(--hlab-material-subtitle-size);
    line-height: 1.52;
  }

  .hlab-material-typography-page .hl-lead p,
  .hlab-material-typography-page .hl-sheet-page-head__lead,
  .hlab-material-typography-page .hl-monthly-lead p {
    font-size: var(--hlab-material-lead-size);
    line-height: 1.72;
  }

  .hlab-material-typography-page .hl-group__head h2,
  .hlab-material-typography-page .hl-monthly-group__head h2 {
    font-size: var(--hlab-material-section-title-size);
    line-height: 1.32;
  }

  .hlab-material-typography-page .hl-content p,
  .hlab-material-typography-page .hl-summary p,
  .hlab-material-typography-page .hl-step-desc,
  .hlab-material-typography-page .hl-next-lead,
  .hlab-material-typography-page .hl-content ul,
  .hlab-material-typography-page .hl-content ol {
    font-size: var(--hlab-material-reading-size);
    line-height: 1.76;
  }

  .hlab-material-typography-page .hl-group__intro,
  .hlab-material-typography-page .hl-sheet-viewpoint__copy p,
  .hlab-material-typography-page .hl-sheet-key-message {
    font-size: var(--hlab-material-dense-reading-size);
    line-height: 1.70;
  }

  .hlab-material-typography-page .hl-sheet-viewpoint-question,
  .hlab-material-typography-page .hl-sheet-thinking-guide__notebook p {
    font-size: 11.5px;
    line-height: 1.65;
  }

  .hlab-material-typography-page .hl-sheet-learning-guide__grid p {
    font-size: 12px;
    line-height: 1.68;
  }
}



/* v1.3 役割別UIの既存資料統一
 * 役割の区別は色分けに頼らず、形状・線・余白・大きさを優先する。
 * 警告以外は暖色系ニュートラルを基準とする。
 */
.hlab-material-typography-page .hl-note,
.hlab-material-typography-page .hl-warning,
.hlab-material-typography-page .hl-example-box,
.hlab-material-typography-page .hl-source-note {
  box-sizing: border-box;
  margin-top: 14px;
  box-shadow: none;
  color: #59493f;
}

/* 補足：小さめ・左線。本文の流れを止めない */
.hlab-material-typography-page .hl-note {
  padding: 9px 12px;
  border: 1px solid rgba(111, 83, 67, 0.14);
  border-left: 3px solid #b69a7c;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.74);
  font-size: 12.5px;
  line-height: 1.72;
  font-weight: 620;
}

/* 注意：意味色はここに限定し、面全体は強く塗らない */
.hlab-material-typography-page .hl-warning {
  padding: 11px 13px;
  border: 1px solid rgba(216, 121, 50, 0.28);
  border-left: 5px solid #d87932;
  border-radius: 9px;
  background: rgba(255, 253, 249, 0.96);
  color: #5c3d2c;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 700;
}

/* 例：破線で補助情報だと分かるようにする */
.hlab-material-typography-page .hl-example-box {
  padding: 11px 13px;
  border: 1px dashed rgba(111, 83, 67, 0.28);
  border-radius: 10px;
  background: rgba(252, 249, 245, 0.90);
  font-size: 12.5px;
  line-height: 1.72;
  font-weight: 600;
}

/* 出典・制度補足：さらに小さく、面を作りすぎない */
.hlab-material-typography-page .hl-source-note {
  padding: 8px 10px;
  border: 0;
  border-top: 1px dashed rgba(111, 83, 67, 0.22);
  border-radius: 0;
  background: transparent;
  color: #71665f;
  font-size: 11.5px;
  line-height: 1.65;
  font-weight: 550;
}

/* まとめ：大きさ・余白・上線で最終面を表す。緑など別系統の色は使わない */
.hlab-material-typography-page .hl-summary {
  box-sizing: border-box;
  margin-top: 24px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(111, 83, 67, 0.20);
  border-top: 4px solid #8b6d5a;
  border-radius: 20px;
  background: rgba(255, 252, 247, 0.98);
  box-shadow: none;
}

.hlab-material-typography-page .hl-summary h2 {
  margin-top: 0;
  font-size: var(--hlab-material-section-title-size) !important;
  line-height: 1.35 !important;
}

@media screen and (max-width: 640px) {
  .hlab-material-typography-page .hl-note,
  .hlab-material-typography-page .hl-example-box {
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.70;
  }

  .hlab-material-typography-page .hl-warning {
    padding: 10px 11px;
    font-size: 12.5px;
    line-height: 1.72;
  }

  .hlab-material-typography-page .hl-summary {
    margin-top: 20px;
    padding: 16px;
    border-radius: 16px;
  }
}

@media print {
  /* 印刷/PDFは各資料専用CSSのレイアウトを優先する。 */
  .hlab-material-typography-page .hlab-root {
    --hlab-material-title-size: initial;
    --hlab-material-subtitle-size: initial;
    --hlab-material-lead-size: initial;
    --hlab-material-section-title-size: initial;
    --hlab-material-reading-size: initial;
    --hlab-material-dense-reading-size: initial;
  }
}


/* v1.4 / v8.87 全シート役割UI・旧書式統一 */
.hlab-material-typography-page .hl-note,.hlab-material-typography-page .hl-monthly-note,.hlab-material-typography-page .hl-warning,.hlab-material-typography-page .hl-goal,.hlab-material-typography-page .hl-monthly-privacy,.hlab-material-typography-page .hl-result-note{position:relative;box-sizing:border-box;box-shadow:none!important}
.hlab-material-typography-page .hl-note,.hlab-material-typography-page .hl-monthly-note{margin-top:14px!important;padding:10px 12px 10px 38px!important;border:1px solid rgba(111,83,67,.14)!important;border-left:3px solid #b69a7c!important;border-radius:8px!important;background:rgba(255,253,249,.78)!important;color:#5f5047!important;font-size:12.5px!important;line-height:1.72!important;font-weight:650!important}
.hlab-material-typography-page .hl-note::before,.hlab-material-typography-page .hl-monthly-note::before{content:''!important;position:absolute;top:11px;left:12px;width:16px;height:16px;background:#795f4a!important;-webkit-mask:url('../icons/role-hint.svg') center/contain no-repeat;mask:url('../icons/role-hint.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-warning{margin-top:14px!important;padding:11px 13px 11px 42px!important;border:1px solid rgba(216,121,50,.28)!important;border-left:5px solid #d87932!important;border-radius:9px!important;background:rgba(255,253,249,.96)!important;color:#5c3d2c!important;font-size:13px!important;line-height:1.75!important;font-weight:700!important}
.hlab-material-typography-page .hl-warning::before{content:''!important;position:absolute;top:12px;left:14px;width:17px;height:17px;background:#b85e23!important;-webkit-mask:url('../icons/role-warning.svg') center/contain no-repeat;mask:url('../icons/role-warning.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-goal{margin-top:14px!important;padding:10px 12px 10px 39px!important;border:1px solid rgba(111,83,67,.16)!important;border-left:3px solid #9b8b80!important;border-radius:10px!important;background:rgba(255,253,249,.9)!important;color:#5a4940!important;font-size:12.5px!important;line-height:1.72!important;font-weight:700!important}
.hlab-material-typography-page .hl-goal::before{content:''!important;position:absolute;top:11px;left:12px;width:17px;height:17px;background:#66554b!important;-webkit-mask:url('../icons/role-check.svg') center/contain no-repeat;mask:url('../icons/role-check.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-monthly-privacy{margin:0 0 18px!important;padding:10px 12px 10px 39px!important;border:1px solid rgba(111,83,67,.18)!important;border-left:3px solid #9b8b80!important;border-radius:9px!important;background:rgba(252,249,245,.96)!important;color:#5d4a40!important}
.hlab-material-typography-page .hl-monthly-privacy::before{content:'';position:absolute;top:11px;left:12px;width:17px;height:17px;background:#716158;-webkit-mask:url('../icons/role-info.svg') center/contain no-repeat;mask:url('../icons/role-info.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-summary,.hlab-material-typography-page .hl-summary-box,.hlab-material-typography-page .hl-message{box-sizing:border-box;border-color:rgba(111,83,67,.2)!important;border-top:4px solid #8b6d5a!important;background:rgba(255,252,247,.98)!important;box-shadow:none!important}.hlab-material-typography-page .hl-summary{border-radius:20px!important}
.hlab-material-typography-page .hl-summary h2,.hlab-material-typography-page .hl-next-materials h2{font-size:var(--hlab-material-section-title-size)!important;line-height:1.35!important}.hlab-material-typography-page .hl-summary h2::before{content:'';display:inline-block;width:1em;height:1em;margin-right:8px;vertical-align:-.12em;background:#70594b;-webkit-mask:url('../icons/role-notebook.svg') center/contain no-repeat;mask:url('../icons/role-notebook.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-message{margin-top:20px!important;padding:16px 18px!important;border-radius:16px!important;color:#4a271b!important;font-size:clamp(16px,2vw,19px)!important;line-height:1.7!important;font-weight:850!important}
.hlab-material-typography-page .hl-check-card,.hlab-material-typography-page .hl-check-card:nth-child(even){border-color:rgba(111,83,67,.16)!important;background:rgba(255,253,249,.92)!important;box-shadow:none!important}
.hlab-material-typography-page .hl-source-note{position:relative;padding-left:28px!important}.hlab-material-typography-page .hl-source-note::before{content:'';position:absolute;top:9px;left:7px;width:14px;height:14px;background:#7c6b61;-webkit-mask:url('../icons/role-info.svg') center/contain no-repeat;mask:url('../icons/role-info.svg') center/contain no-repeat}
.hlab-material-typography-page .hl-section{scroll-margin-top:84px}.hlab-material-typography-page .hl-section>.hlab-material-note-control:last-child{margin-bottom:0}
@media(max-width:640px){.hlab-material-typography-page .hl-note,.hlab-material-typography-page .hl-monthly-note,.hlab-material-typography-page .hl-goal{font-size:12.5px!important;line-height:1.7!important}.hlab-material-typography-page .hl-warning{font-size:12.5px!important;line-height:1.72!important}.hlab-material-typography-page .hl-message{padding:14px!important;font-size:16px!important}}
@media print{.hlab-material-typography-page .hlab-material-notes-intro,.hlab-material-typography-page .hlab-material-note-control,.hlab-material-floating-wrap,.hlab-material-notebook-modal{display:none!important}}


/* v8.87 残存旧書式の整理 */
.hlab-material-typography-page .hl-final-message,
.hlab-material-typography-page .hl-monthly-goal {
  position: relative;
  box-sizing: border-box;
  margin-top: 20px !important;
  padding: 15px 17px 15px 45px !important;
  border: 1px solid rgba(111, 83, 67, .20) !important;
  border-top: 4px solid #8b6d5a !important;
  border-radius: 16px !important;
  background: rgba(255, 252, 247, .98) !important;
  color: #4a271b !important;
  box-shadow: none !important;
}

.hlab-material-typography-page .hl-final-message::before,
.hlab-material-typography-page .hl-monthly-goal::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  width: 19px;
  height: 19px;
  background: #70594b;
  -webkit-mask: url('../icons/role-notebook.svg') center / contain no-repeat;
  mask: url('../icons/role-notebook.svg') center / contain no-repeat;
}

.hlab-material-typography-page .hl-card-note,
.hlab-material-typography-page .hl-result-note {
  color: #76665c !important;
  font-size: 11.5px !important;
  line-height: 1.65 !important;
}

.hlab-material-typography-page .hl-print-help,
.hlab-material-typography-page .hl-pdf-ready {
  border-radius: 9px !important;
  box-shadow: none !important;
}


/* v1.5: 2026-10-17 | 全資料の読みやすさを優先
 * PCの操作視野より文字の認識・理解を優先する。
 * 英語の飾り文字や小さな日付を除き、意味のある説明を縮小しない。
 */
.hlab-material-typography-page .hlab-root {
  --hlab-material-lead-size: 16px;
  --hlab-material-reading-size: 16px;
  --hlab-material-dense-reading-size: 16px;
}
.hlab-material-typography-page .hl-lead p,
.hlab-material-typography-page .hl-sheet-page-head__lead,
.hlab-material-typography-page .hl-monthly-lead p,
.hlab-material-typography-page .hl-content p,
.hlab-material-typography-page .hl-summary p,
.hlab-material-typography-page .hl-step-desc,
.hlab-material-typography-page .hl-next-lead,
.hlab-material-typography-page .hl-content li,
.hlab-material-typography-page .hl-group__intro,
.hlab-material-typography-page .hl-sheet-viewpoint__copy p,
.hlab-material-typography-page .hl-sheet-key-message,
.hlab-material-typography-page .hl-sheet-viewpoint-question,
.hlab-material-typography-page .hl-sheet-thinking-guide__notebook p {
  font-size: 16px;
  line-height: 1.82;
}
.hlab-material-typography-page .hl-sheet-learning-guide__grid p,
.hlab-material-typography-page .hl-note,
.hlab-material-typography-page .hl-warning,
.hlab-material-typography-page .hl-example-box,
.hlab-material-typography-page .hl-source-note {
  font-size: 15px;
  line-height: 1.75;
}
.hlab-material-typography-page .hl-sheet-learning-guide summary small {font-size:14px;line-height:1.6;}
.hlab-material-typography-page .hl-warning {font-size:15px!important;line-height:1.75!important;}
@media (max-width: 640px) {
  .hlab-material-typography-page .hlab-root {
    --hlab-material-lead-size: 16px;
    --hlab-material-reading-size: 16px;
    --hlab-material-dense-reading-size: 16px;
  }
}