/*
========================================================
ファイル      : hlab-common.css
用途          : ひとり商いラボ WordPress共通デザイン
バージョン    : 1.5
最終更新日    : 2026-08-16
========================================================

共通ルール:
・ブランドカラー
・基本box-sizing
・共通画像
・共通リンク
・共通ラッパー
・共通ボタン

ページ固有のレイアウトは各ページ専用CSSへ記載します。
========================================================
*/

.hlab-root {
  --hl-brown: #4a2414;
  --hl-brown-soft: #6a3b22;
  --hl-orange: #f08a00;
  --hl-orange-dark: #d86f00;
  --hl-yellow: #ffbf2f;
  --hl-cream: #fff8ee;
  --hl-cream-deep: #ffe9c8;
  --hl-green: #a7c957;
  --hl-text: #362318;
  --hl-muted: rgba(54, 35, 24, 0.72);
  --hl-border: rgba(240, 138, 0, 0.24);
  --hl-shadow: 0 18px 44px rgba(74, 36, 20, 0.10);

  /* v1.2: サイト全体の視覚階層トークン。
     既存ページは個別改修時に段階的に使用し、この追加だけでは表示を変えない。 */
  --hl-surface-page: #fff8ee;
  --hl-surface-group: #fff1df;
  --hl-surface-card: #fffaf0;
  --hl-surface-card-strong: #fffdf8;
  --hl-border-warm: rgba(106, 59, 34, 0.24);
  --hl-border-warm-strong: rgba(106, 59, 34, 0.34);
  --hl-radius-part: 12px;
  --hl-radius-card: 16px;
  --hl-radius-group: 24px;
  --hl-gap-card: 12px;
  --hl-gap-group: 20px;
  --hl-gap-section: 28px;
  --hl-shadow-group: 0 8px 20px rgba(74, 36, 20, 0.055);
  --hl-shadow-card: 0 3px 8px rgba(74, 36, 20, 0.045);
}

.hlab-root,
.hlab-root * {
  box-sizing: border-box;
}

.hlab-root img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hlab-root a {
  color: inherit;
  text-decoration: none;
}

.hlab-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.hlab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hlab-button:hover,
.hlab-button:focus-visible {
  transform: translateY(-2px);
}

.hlab-button--primary {
  color: #fff !important;
  background: linear-gradient(145deg, #ff9f00, var(--hl-orange-dark));
  box-shadow: 0 13px 30px rgba(216, 111, 0, 0.28);
}

.hlab-button--secondary {
  border: 1px solid rgba(106, 59, 34, 0.18);
  color: var(--hl-brown);
  background: rgba(255, 255, 255, 0.90);
}

@media (max-width: 640px) {
  .hlab-wrap {
    width: calc(100% - 24px);
  }

  .hlab-button {
    width: 100%;
  }

  .hlab-root .sz-field {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hlab-root .sz-field label,
  .hlab-root .sz-field input,
  .hlab-root .sz-field select,
  .hlab-root .sz-field textarea {
    display: block;
    width: 100%;
  }
}

/* ========================================================
   2026-07-17 会員ページ共通：資料カテゴリー導線
======================================================== */
.hlab-member-category-nav {
  margin: 34px 0 10px;
  padding: 20px;
  border: 1px solid rgba(106, 59, 34, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(74, 36, 20, 0.05);
}

.hlab-member-category-nav__label {
  margin: 0 0 12px;
  color: var(--hl-brown);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.hlab-member-category-nav__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hlab-member-category-nav__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 138, 0, 0.24);
  border-radius: 14px;
  color: var(--hl-brown);
  background: #fffaf2;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.hlab-member-category-nav__links a:hover,
.hlab-member-category-nav__links a:focus-visible,
.hlab-member-category-nav__links a[aria-current="page"] {
  border-color: var(--hl-orange);
  background: #fff1d8;
}

@media (max-width: 640px) {
  .hlab-member-category-nav {
    margin-top: 26px;
    padding: 15px;
    border-radius: 18px;
  }

  .hlab-member-category-nav__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hlab-member-category-nav__links a {
    min-height: 44px;
    padding: 8px;
    font-size: 13px;
  }

  /* 上帯は3要素に絞るため、CONFIDENTIALも省スペースで表示 */
  .hlab-root [class*="__confidential"] {
    display: inline-flex !important;
    padding: 5px 7px !important;
  }

  .hlab-root [class*="__confidential"] small {
    display: none !important;
  }

  .hlab-root [class*="__confidential"] strong {
    font-size: 8px !important;
  }
}

@media print {
  .hlab-member-category-nav {
    display: none !important;
  }
}



/* ========================================================
   2026-08-07 一般公開ページ共通：ひとり商いラボ全体説明
======================================================== */
.hlab-public-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 22px 0 28px;
  padding: 28px 30px;
  border: 1px solid var(--hl-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(74, 36, 20, 0.07);
}

.hlab-public-intro__copy {
  min-width: 0;
}

.hlab-public-intro__eyebrow {
  margin: 0 0 8px;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.hlab-public-intro__title {
  margin: 0;
  color: var(--hl-brown);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.45;
}

.hlab-public-intro__description,
.hlab-public-intro__note {
  margin: 10px 0 0;
  color: var(--hl-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.hlab-public-intro__note {
  color: var(--hl-muted);
  font-size: 14px;
}

.hlab-public-intro__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.hlab-public-intro__points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(167, 201, 87, 0.34);
  border-radius: 999px;
  color: var(--hl-brown);
  background: #fbffef;
  font-size: 13px;
  font-weight: 900;
}

.hlab-public-intro > .hlab-button {
  min-width: 230px;
  text-align: center;
}

@media (max-width: 760px) {
  .hlab-public-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
  }

  .hlab-public-intro > .hlab-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .hlab-public-intro {
    margin: 16px 0 22px;
    padding: 18px;
  }

  .hlab-public-intro__title {
    font-size: 20px;
  }

  .hlab-public-intro__description,
  .hlab-public-intro__note {
    font-size: 14px;
    line-height: 1.75;
  }
}


/* ========================================================
   2026-08-14 無料ツール個別ページ：ラボ説明をコンパクト表示
   最上位メッセージは残し、ツール本体を早く見せる。
======================================================== */
.hlab-public-intro--tool {
  gap: 18px;
  margin: 14px 0 18px;
  padding: 18px 22px;
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(74, 36, 20, 0.05);
}

.hlab-public-intro--tool .hlab-public-intro__eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
}

.hlab-public-intro--tool .hlab-public-intro__title {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.4;
}

.hlab-public-intro--tool .hlab-public-intro__description {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.7;
}

.hlab-public-intro--tool > .hlab-button {
  min-width: 190px;
  padding: 12px 18px;
}

@media (max-width: 760px) {
  .hlab-public-intro--tool {
    gap: 10px;
    margin: 10px 0 14px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .hlab-public-intro--tool .hlab-public-intro__eyebrow {
    margin-bottom: 4px;
    font-size: 9px;
  }

  .hlab-public-intro--tool .hlab-public-intro__title {
    font-size: 18px;
    line-height: 1.45;
  }

  .hlab-public-intro--tool .hlab-public-intro__description {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.65;
  }

  .hlab-public-intro--tool > .hlab-button {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ========================================================
   2026-08-14 v7.13 無料ツール個別ページ：スマホ上部の密度調整
   最上位メッセージは維持し、ツール本体をさらに早く見せる。
======================================================== */
@media (max-width: 640px) {
  .hlab-public-intro--tool {
    gap: 8px;
    margin: 8px 0 12px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .hlab-public-intro--tool .hlab-public-intro__eyebrow {
    margin-bottom: 3px;
    font-size: 8px;
    letter-spacing: 0.13em;
  }

  .hlab-public-intro--tool .hlab-public-intro__title {
    font-size: 17px;
    line-height: 1.38;
  }

  .hlab-public-intro--tool .hlab-public-intro__description {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.58;
  }

  .hlab-public-intro--tool > .hlab-button {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 12px;
  }
}


/* ========================================================
   2026-08-14 v7.14 無料ツール個別ページ：スマホヘッダー文言短縮
   PCの案内文は維持し、狭い画面だけ短いラベルへ切り替える。
======================================================== */
.hlab-nav-label--mobile {
  display: none;
}

@media (max-width: 640px) {
  .hlab-nav-label--desktop {
    display: none;
  }

  .hlab-nav-label--mobile {
    display: inline;
  }
}


/* ========================================================
   共通操作通知ポップアップ
   - 必須入力不足 / 入力不正 / 保存・読込失敗 / 重要確認に使用
   - 閉じても元画面の入力内容は保持する
======================================================== */
.hlab-ui-dialog[hidden] {
  display: none !important;
}

.hlab-ui-dialog {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
}

.hlab-ui-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 24, 20, .52);
}

.hlab-ui-dialog__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(78vh, 680px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(74, 36, 20, .16);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.hlab-ui-dialog__head {
  flex: 0 0 auto;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(74, 36, 20, .1);
}

.hlab-ui-dialog__head strong {
  display: block;
  color: #4a2414;
  font-size: 18px;
  line-height: 1.5;
}

.hlab-ui-dialog__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px;
  color: #3e332d;
  line-height: 1.75;
}

.hlab-ui-dialog__body p {
  margin: 0 0 12px;
}

.hlab-ui-dialog__body p:last-child {
  margin-bottom: 0;
}

.hlab-ui-dialog__fix {
  padding: 11px 13px;
  border-radius: 12px;
  background: #fff6e8;
}

.hlab-ui-dialog__retain {
  color: #6a5a50;
  font-size: 13px;
}

.hlab-ui-dialog__foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(74, 36, 20, .1);
  background: #fff;
}

.hlab-ui-dialog__button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #4a2414;
  border-radius: 999px;
  background: #fff;
  color: #4a2414;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hlab-ui-dialog__button--primary {
  background: #4a2414;
  color: #fff;
}

body.hlab-ui-dialog-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .hlab-ui-dialog {
    align-items: end;
    padding: 10px;
  }

  .hlab-ui-dialog__panel {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px;
  }

  .hlab-ui-dialog__head,
  .hlab-ui-dialog__body,
  .hlab-ui-dialog__foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hlab-ui-dialog__foot {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hlab-ui-dialog__button {
    width: 100%;
  }
}


/* v1.4 「はじめる」資料：似た問いを別の視点から考える共通案内 */
.hlab-perspective-guide {
  box-sizing: border-box;
  margin: 16px 0 20px;
  padding: 16px 18px;
  border: 1px solid rgba(217, 79, 119, 0.28);
  border-left: 4px solid #e96084;
  border-radius: 16px;
  color: #4d2618;
  background:
    linear-gradient(135deg, rgba(233, 96, 132, 0.08), rgba(255, 255, 255, 0.82)),
    #fffaf3;
}

.hlab-perspective-guide__head {
  margin: 0 0 8px;
}

.hlab-perspective-guide__eyebrow {
  margin: 0 0 3px !important;
  color: #c34b70 !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
}

.hlab-perspective-guide h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #4d2618 !important;
  font-size: clamp(17px, 2.1vw, 21px) !important;
  line-height: 1.48 !important;
  font-weight: 900 !important;
}

.hlab-perspective-guide > p {
  margin: 8px 0 0 !important;
  color: #665247 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  font-weight: 650 !important;
}

.hlab-perspective-guide__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.hlab-perspective-guide__choices > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(217, 79, 119, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.hlab-perspective-guide__choices strong,
.hlab-perspective-guide__choices span {
  display: block;
}

.hlab-perspective-guide__choices strong {
  color: #4d2618;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
}

.hlab-perspective-guide__choices span {
  margin-top: 3px;
  color: #6b5548;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 650;
}

.hlab-perspective-guide__foot {
  padding-top: 9px;
  border-top: 1px dashed rgba(217, 79, 119, 0.25);
}

.hlab-perspective-guide--compact {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-left-width: 3px;
}

.hlab-perspective-guide--compact h2 {
  font-size: clamp(15px, 1.8vw, 18px) !important;
}

.hlab-perspective-guide--compact > p {
  margin-top: 6px !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
}

@media (max-width: 640px) {
  .hlab-perspective-guide {
    padding: 14px 13px;
    border-radius: 14px;
  }

  .hlab-perspective-guide__choices {
    grid-template-columns: 1fr;
  }

  .hlab-perspective-guide h2 {
    font-size: 17px !important;
  }
}


/* v1.7 情報の役割別 共通UI
 * 色で塗り分けるのではなく、形状・線・余白・大きさを主な識別手段とする。
 * 色はブランド色と警告色を小面積で補助的に使う。
 */
.hlab-ui-block {
  --hlab-role-line: rgba(111, 83, 67, 0.22);
  --hlab-role-muted: #8a776b;
  --hlab-role-accent: #c94d70;
  --hlab-role-warning: #d87932;
  box-sizing: border-box;
  margin: 14px 0 18px;
  padding: 13px 15px;
  border: 1px solid var(--hlab-role-line);
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.96);
  box-shadow: none;
  color: #4e3328;
}

.hlab-ui-block__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: 0 0 6px;
}

.hlab-ui-block__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  padding: 2px 7px;
  border: 1px solid rgba(111, 83, 67, 0.18);
  border-radius: 6px;
  background: #f7f2ec;
  color: #6c584d;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: .05em;
  white-space: nowrap;
}

.hlab-ui-block h2,
.hlab-ui-block h3 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #4a271b !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
}

.hlab-ui-block__body p,
.hlab-ui-block > p {
  margin: 5px 0 0 !important;
  color: #5d4a40 !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
  font-weight: 600 !important;
}

.hlab-ui-block__body p:first-child {
  margin-top: 0 !important;
}

.hlab-ui-block__meta {
  padding-top: 7px;
  border-top: 1px dashed rgba(111, 83, 67, 0.18);
  color: #735f54 !important;
  font-size: 12px !important;
}

/* 使い方・説明：小さく、やや角のある説明パネル。色ではなく寸法で本文と区別 */
.hlab-ui-block--explain {
  padding: 11px 13px;
  border-color: rgba(111, 83, 67, 0.20);
  border-left: 3px solid #9b8b80;
  border-radius: 9px;
  background: rgba(252, 249, 245, 0.96);
}

.hlab-ui-block--explain .hlab-ui-block__label {
  border-style: dashed;
  background: transparent;
  color: #716158;
}

/* 補足・ヒント：カード感を弱め、左線＋小さな余白で本文の脇役にする */
.hlab-ui-block--hint {
  padding: 9px 12px;
  border-color: rgba(111, 83, 67, 0.14);
  border-left: 3px solid #b69a7c;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.72);
}

.hlab-ui-block--hint .hlab-ui-block__label {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #795f4a;
  padding-left: 0;
}

/* 注意・重要事項：唯一の強い意味色。面は塗らず、太い左線で警告を表す */
.hlab-ui-block--warning {
  padding: 11px 13px;
  border-color: rgba(216, 121, 50, 0.28);
  border-left: 5px solid var(--hlab-role-warning);
  border-radius: 9px;
  background: rgba(255, 253, 249, 0.96);
}

.hlab-ui-block--warning .hlab-ui-block__label {
  border-color: rgba(216, 121, 50, 0.34);
  background: transparent;
  color: #944b1d;
}

/* 入力・操作：白い操作面＋やや大きな角丸。ブランド色は輪郭の一部だけ */
.hlab-ui-block--input {
  padding: 14px 15px;
  border-color: rgba(201, 77, 112, 0.28);
  border-top: 3px solid var(--hlab-role-accent);
  border-radius: 16px;
  background: #fff;
}

.hlab-ui-block--input .hlab-ui-block__label {
  border-color: rgba(201, 77, 112, 0.24);
  background: transparent;
  color: #9f3d59;
}

/* 結果・まとめ：色ではなく大きさ・上線・余白で最終面として見せる */
.hlab-ui-block--result,
.hlab-ui-block--summary {
  margin-top: 22px;
  padding: clamp(17px, 2vw, 23px);
  border-color: rgba(111, 83, 67, 0.22);
  border-top: 4px solid #8b6d5a;
  border-radius: 20px;
  background: rgba(255, 252, 247, 0.98);
}

.hlab-ui-block--result .hlab-ui-block__label,
.hlab-ui-block--summary .hlab-ui-block__label {
  border-color: rgba(111, 83, 67, 0.20);
  background: #f7f2ec;
  color: #634f43;
}

.hlab-ui-block--compact {
  margin: 10px 0 16px;
  padding: 9px 11px;
  border-radius: 9px;
}

.hlab-ui-block--compact .hlab-ui-block__head {
  margin-bottom: 4px;
}

.hlab-ui-block--compact h2,
.hlab-ui-block--compact h3 {
  font-size: 15px !important;
}

.hlab-ui-block--compact .hlab-ui-block__body p,
.hlab-ui-block--compact > p {
  font-size: 12.5px !important;
  line-height: 1.68 !important;
}

.hlab-ui-block--start-guide {
  margin-top: 14px;
  margin-bottom: 18px;
}



/* v1.7 役割別UI 固定SVGマーク
 * 色は補助。役割は「形状 + 固定マーク + 見出し」で判別する。
 * SVGはmaskとして使い、ページごとの色増加を避ける。
 */
.hlab-role-icon,
.hlab-ui-block__label::before {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.hlab-role-icon--explain,
.hlab-ui-block--explain .hlab-ui-block__label::before {
  -webkit-mask-image: url('../icons/role-info.svg');
  mask-image: url('../icons/role-info.svg');
}

.hlab-role-icon--hint,
.hlab-ui-block--hint .hlab-ui-block__label::before {
  -webkit-mask-image: url('../icons/role-hint.svg');
  mask-image: url('../icons/role-hint.svg');
}

.hlab-role-icon--warning,
.hlab-ui-block--warning .hlab-ui-block__label::before {
  -webkit-mask-image: url('../icons/role-warning.svg');
  mask-image: url('../icons/role-warning.svg');
}

.hlab-role-icon--check,
.hlab-ui-block--check .hlab-ui-block__label::before {
  -webkit-mask-image: url('../icons/role-check.svg');
  mask-image: url('../icons/role-check.svg');
}

.hlab-role-icon--summary,
.hlab-ui-block--result .hlab-ui-block__label::before,
.hlab-ui-block--summary .hlab-ui-block__label::before {
  -webkit-mask-image: url('../icons/role-notebook.svg');
  mask-image: url('../icons/role-notebook.svg');
}

.hlab-ui-block--explain .hlab-ui-block__label::before,
.hlab-ui-block--hint .hlab-ui-block__label::before,
.hlab-ui-block--warning .hlab-ui-block__label::before,
.hlab-ui-block--check .hlab-ui-block__label::before,
.hlab-ui-block--result .hlab-ui-block__label::before,
.hlab-ui-block--summary .hlab-ui-block__label::before {
  content: '';
}

.hlab-role-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hlab-role-line > .hlab-role-icon {
  margin-top: .18em;
}

/* 確認・チェック：色面を増やさず、チェックマークと細線で示す */
.hlab-ui-block--check {
  padding: 10px 13px;
  border-color: rgba(111, 83, 67, 0.16);
  border-left: 3px solid #9b8b80;
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.88);
}

.hlab-ui-block--check .hlab-ui-block__label {
  border: 0;
  background: transparent;
  color: #66554b;
  padding-left: 0;
}

@media (max-width: 640px) {
  .hlab-ui-block {
    padding: 11px 12px;
    border-radius: 10px;
  }

  .hlab-ui-block__head {
    display: block;
  }

  .hlab-ui-block__label {
    margin-bottom: 5px;
  }

  .hlab-ui-block h2,
  .hlab-ui-block h3 {
    font-size: 16px !important;
  }

  .hlab-ui-block__body p,
  .hlab-ui-block > p {
    font-size: 12.5px !important;
  }

  .hlab-ui-block--result,
  .hlab-ui-block--summary {
    padding: 15px;
    border-radius: 16px;
  }
}