/*
========================================================
ファイル      : hlab-continue-material.css
対象          : 「事業を続ける」配下の会員資料
用途          : 続ける＝ブルーの共通資料デザイン互換レイヤー
バージョン    : 1.0
最終更新日    : 2026-08-15
デザイン基準  : ひとり商いラボ 公式デザインテンプレート v8.69
========================================================

目的：
・資料固有の機能・入力・印刷ロジックを壊さず、画面表示を「続ける」共通仕様へ統一する。
・ページ題名はフラット、本文は「淡いブルーのグループ面 → 明るい個別面」の階層にする。
・PCでは縦方向を過度に大きくせず、スマホでは操作性を維持する。
========================================================
*/

.hlab-continue-material {
  --hlab-continue-accent: #3F7FC4;
  --hlab-continue-accent-deep: #2F67A5;
  --hlab-continue-accent-soft: #E7F0FA;
  --hlab-continue-accent-pale: #F2F7FD;
  --hlab-continue-line: rgba(63, 127, 196, 0.30);
  --hlab-continue-text: #2E4055;
  --hlab-continue-muted: #5E6C7C;
}

/* 資料内で旧オレンジ変数を使う部品も、続けるの青へ寄せる。 */
.hlab-continue-material .hlab-monthly-check__document,
.hlab-continue-material .hlab-okane-nagare__document,
.hlab-continue-material .hlab-keizoku-checklist__document,
.hlab-continue-material .hlab-after-3months__document {
  --hl-orange: var(--hlab-continue-accent);
  --hl-orange-dark: var(--hlab-continue-accent-deep);
  --hl-border: var(--hlab-continue-line);
  --hl-cream: var(--hlab-continue-accent-pale);
}

@media screen {
  /* 上部・固定導線もカテゴリー色を継承する。 */
  .hlab-continue-material .hlab-account__top-actions > a:first-of-type {
    border-color: rgba(63, 127, 196, 0.36);
    color: #fff;
    background: linear-gradient(145deg, #4E8FD1, #2F67A5);
    box-shadow: 0 7px 18px rgba(47, 103, 165, 0.16);
  }

  .hlab-continue-material .hlab-account__member-top {
    border-color: rgba(63, 127, 196, 0.34);
    color: #fff;
    background: linear-gradient(145deg, #4E8FD1, #2F67A5);
    box-shadow: 0 8px 20px rgba(47, 103, 165, 0.18);
  }

  .hlab-continue-material .hlab-monthly-check__breadcrumb,
  .hlab-continue-material .hlab-okane-nagare__breadcrumb,
  .hlab-continue-material .hlab-keizoku-checklist__breadcrumb,
  .hlab-continue-material .hlab-after-3months__breadcrumb {
    margin-bottom: 14px;
    border-color: rgba(63, 127, 196, 0.18);
    color: var(--hlab-continue-text);
    box-shadow: 0 5px 14px rgba(44, 74, 108, 0.035);
  }

  .hlab-continue-material .hlab-monthly-check__breadcrumb a,
  .hlab-continue-material .hlab-okane-nagare__breadcrumb a,
  .hlab-continue-material .hlab-keizoku-checklist__breadcrumb a,
  .hlab-continue-material .hlab-after-3months__breadcrumb a {
    color: var(--hlab-continue-accent-deep);
  }

  /* ------------------------------------------------------
     ページ題名：大きなヒーローカードをやめ、フラットな入口へ。
  ------------------------------------------------------ */
  .hlab-continue-material .hl-hero {
    position: relative;
    isolation: auto;
    overflow: visible;
    min-height: 0;
    margin: 0 0 18px;
    padding: 14px 4px 16px;
    padding-right: 4px;
    border: 0;
    border-bottom: 1px solid rgba(63, 127, 196, 0.20);
    border-radius: 0;
    background: none !important;
    box-shadow: none;
  }

  .hlab-continue-material .hl-hero::after {
    display: none !important;
    content: none !important;
  }

  .hlab-continue-material .hl-label,
  .hlab-continue-material .hl-monthly-label {
    display: inline-flex;
    align-items: center;
    margin: 0 0 7px;
    padding: 4px 9px;
    border: 1px solid rgba(63, 127, 196, 0.25);
    border-radius: 999px;
    color: var(--hlab-continue-accent-deep);
    background: rgba(63, 127, 196, 0.055);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .hlab-continue-material .hl-title,
  .hlab-continue-material .hl-hero h1 {
    margin: 0;
    color: #263A50;
    font-size: clamp(28px, 3.4vw, 34px);
    line-height: 1.25;
    font-weight: 950;
    letter-spacing: 0.01em;
  }

  .hlab-continue-material .hl-subtitle,
  .hlab-continue-material .hl-monthly-subtitle {
    margin: 7px 0 0;
    color: var(--hlab-continue-accent-deep);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.5;
    font-weight: 900;
  }

  .hlab-continue-material .hl-lead,
  .hlab-continue-material .hl-monthly-lead {
    max-width: 920px;
    margin: 11px 0 0;
    padding: 10px 13px;
    border-left: 4px solid var(--hlab-continue-accent);
    border-radius: 0 12px 12px 0;
    background: rgba(242, 247, 253, 0.72);
    box-shadow: none;
  }

  .hlab-continue-material .hl-lead p,
  .hlab-continue-material .hl-monthly-lead p {
    margin: 0 0 6px;
    color: #425265;
    font-size: 12px;
    line-height: 1.72;
    font-weight: 650;
  }

  .hlab-continue-material .hl-lead p:last-child,
  .hlab-continue-material .hl-monthly-lead p:last-child {
    margin-bottom: 0;
  }

  /* ------------------------------------------------------
     本文グループ：続ける＝ブルーの共通3階層。
  ------------------------------------------------------ */
  .hlab-continue-material .hl-group,
  .hlab-continue-material .hl-monthly-group {
    position: relative;
    margin: 0 0 20px;
    padding: 14px;
    border-top: 5px solid var(--hlab-continue-accent);
    border-right: 2px solid rgba(63, 127, 196, 0.34);
    border-bottom: 2px solid rgba(63, 127, 196, 0.34);
    border-left: 2px solid rgba(63, 127, 196, 0.34);
    border-radius: 26px;
    background:
      linear-gradient(145deg, rgba(63,127,196,.055), rgba(63,127,196,0) 58%),
      linear-gradient(180deg, var(--hlab-continue-accent-pale), var(--hlab-continue-accent-soft));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 7px 18px rgba(44, 74, 108, 0.045);
  }

  .hlab-continue-material .hl-group::before,
  .hlab-continue-material .hl-monthly-group::before {
    position: absolute;
    top: -5px;
    left: 28px;
    width: 84px;
    height: 5px;
    border-radius: 0 0 6px 6px;
    content: "";
    background: #FFD166;
  }

  .hlab-continue-material .hl-group__head,
  .hlab-continue-material .hl-monthly-group__head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 4px 8px 12px;
    border: 0;
    background: transparent;
  }

  .hlab-continue-material .hl-group__number,
  .hlab-continue-material .hl-monthly-group__head > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(63, 127, 196, 0.40);
    border-radius: 14px;
    color: var(--hlab-continue-accent-deep);
    background: linear-gradient(145deg, #F8FBFE, #E4EFFA);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 3px 8px rgba(44,74,108,.05);
    font-size: 14px;
    line-height: 1;
    font-weight: 950;
  }

  .hlab-continue-material .hl-group__eyebrow,
  .hlab-continue-material .hl-monthly-group__head p {
    margin: 0 0 2px;
    color: var(--hlab-continue-accent);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .hlab-continue-material .hl-group__head h2,
  .hlab-continue-material .hl-monthly-group__head h2 {
    margin: 0;
    color: var(--hlab-continue-accent-deep);
    font-size: clamp(19px, 2.1vw, 23px);
    line-height: 1.3;
    font-weight: 950;
  }

  .hlab-continue-material .hl-group__head p:last-child {
    margin: 3px 0 0;
    color: #4F6073;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 700;
  }

  .hlab-continue-material .hl-group__body,
  .hlab-continue-material .hl-monthly-group__body {
    display: grid;
    gap: 11px;
    padding: 0;
  }

  .hlab-continue-material .hl-group__body > .hl-section,
  .hlab-continue-material .hl-group__body > .hl-final,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-textarea,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-number-grid,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-text-grid,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-check-grid,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-action-grid,
  .hlab-continue-material .hl-monthly-group__body > .hl-monthly-priority {
    margin: 0;
  }

  .hlab-continue-material .hl-group__body > .hl-section,
  .hlab-continue-material .hl-group__body > .hl-final {
    border: 1px solid rgba(63, 127, 196, 0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, #FFFDF9, #FFF9F1);
    box-shadow: 0 3px 8px rgba(44,74,108,.035);
  }

  .hlab-continue-material .hl-step-badge {
    color: #fff;
    background: linear-gradient(145deg, #4E8FD1, #2F67A5);
    box-shadow: 0 6px 14px rgba(47,103,165,.14);
  }

  .hlab-continue-material .hl-step-title,
  .hlab-continue-material .hl-section h3 {
    color: var(--hlab-continue-accent-deep);
  }

  /* 月次点検固有の操作グループも続ける色へ統一。 */
  .hlab-continue-material .hl-monthly-privacy {
    margin-bottom: 16px;
    border-color: rgba(63, 127, 196, 0.24);
    background: rgba(242, 247, 253, 0.90);
    color: #40566E;
    box-shadow: none;
  }

  .hlab-continue-material .hl-monthly-toolbar {
    margin: 0 0 20px;
    padding: 14px;
    border-top: 5px solid var(--hlab-continue-accent);
    border-right: 2px solid rgba(63,127,196,.30);
    border-bottom: 2px solid rgba(63,127,196,.30);
    border-left: 2px solid rgba(63,127,196,.30);
    border-radius: 24px;
    background: linear-gradient(180deg, #F2F7FD, #EAF2FB);
    box-shadow: 0 6px 16px rgba(44,74,108,.04);
  }

  .hlab-continue-material .hl-monthly-eyebrow,
  .hlab-continue-material .hl-monthly-toolbar h2 {
    color: var(--hlab-continue-accent-deep);
  }

  .hlab-continue-material .hl-monthly-field input,
  .hlab-continue-material .hl-monthly-field select,
  .hlab-continue-material .hl-monthly-textarea textarea,
  .hlab-continue-material .hl-monthly-priority input,
  .hlab-continue-material .hl-monthly-number-card input {
    border-color: rgba(63,127,196,.23);
  }

  .hlab-continue-material .hl-monthly-field input:focus,
  .hlab-continue-material .hl-monthly-field select:focus,
  .hlab-continue-material .hl-monthly-textarea textarea:focus,
  .hlab-continue-material .hl-monthly-priority input:focus,
  .hlab-continue-material .hl-monthly-number-card input:focus {
    border-color: rgba(63,127,196,.64);
    box-shadow: 0 0 0 3px rgba(63,127,196,.09);
  }

  .hlab-continue-material .hl-monthly-number-card,
  .hlab-continue-material .hl-monthly-textarea,
  .hlab-continue-material .hl-monthly-priority {
    border-color: rgba(63,127,196,.18);
  }

  .hlab-continue-material .hl-monthly-button {
    border-color: rgba(63,127,196,.34);
    color: var(--hlab-continue-accent-deep);
    background: #F7FAFE;
  }

  .hlab-continue-material .hl-monthly-button--danger {
    border-color: rgba(154, 46, 21, 0.24);
    color: #8A321D;
    background: #FFF6F3;
  }
}

@media screen and (max-width: 900px) and (min-width: 641px) {
  .hlab-continue-material .hl-hero {
    padding: 12px 3px 14px;
  }

  .hlab-continue-material .hl-group,
  .hlab-continue-material .hl-monthly-group {
    padding: 12px;
    border-radius: 23px;
  }

  .hlab-continue-material .hl-group__head,
  .hlab-continue-material .hl-monthly-group__head {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .hlab-continue-material .hl-group__number,
  .hlab-continue-material .hl-monthly-group__head > span {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 13px;
  }
}

@media screen and (max-width: 640px) {
  .hlab-continue-material .hl-hero {
    margin-bottom: 14px;
    padding: 10px 2px 12px;
  }

  .hlab-continue-material .hl-title,
  .hlab-continue-material .hl-hero h1 {
    font-size: 26px;
  }

  .hlab-continue-material .hl-subtitle,
  .hlab-continue-material .hl-monthly-subtitle {
    font-size: 15px;
  }

  .hlab-continue-material .hl-lead,
  .hlab-continue-material .hl-monthly-lead {
    padding: 9px 10px;
  }

  .hlab-continue-material .hl-group,
  .hlab-continue-material .hl-monthly-group {
    margin-bottom: 16px;
    padding: 8px;
    border-top-width: 4px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-radius: 18px;
  }

  .hlab-continue-material .hl-group__head,
  .hlab-continue-material .hl-monthly-group__head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 4px 9px;
  }

  .hlab-continue-material .hl-group__number,
  .hlab-continue-material .hl-monthly-group__head > span {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 12px;
  }

  .hlab-continue-material .hl-group__eyebrow,
  .hlab-continue-material .hl-monthly-group__head p {
    font-size: 8px;
    letter-spacing: 0.10em;
  }

  .hlab-continue-material .hl-group__head h2,
  .hlab-continue-material .hl-monthly-group__head h2 {
    font-size: 17px;
  }

  .hlab-continue-material .hl-monthly-toolbar {
    padding: 10px;
    border-radius: 18px;
  }
}