/*
========================================================
ファイル      : hlab-lp.css
ページ        : ひとり商いラボ ランディングページ
対象URL       : https://emongroup.com/hlab/
用途          : 公開LP専用CSS
バージョン    : 8.15
最終更新日    : 2026-09-09
依存CSS       : hlab-common.css
========================================================
*/

.hlab-lp {
  min-height: 100vh;
  color: var(--hl-text);
  background-color: #fff9ef;
  background-image:
    linear-gradient(rgba(255, 249, 239, 0.82), rgba(255, 249, 239, 0.82)),
    var(--hlab-lp-page-bg);
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    YuGothic,
    Meiryo,
    sans-serif;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* ページ内ナビゲーションは追随ヘッダーの下へ着地させる */
.hlab-lp section[id] {
  scroll-margin-top: 92px;
}

.admin-bar .hlab-lp section[id] {
  scroll-margin-top: 124px;
}

/* Hero直下・登録不要の無料ツール入口 */
.hlab-lp__quick-free {
  padding: 0 0 30px;
}

.hlab-lp__quick-free-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 2.6fr);
  gap: 16px 22px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(240, 138, 0, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(74, 36, 20, 0.06);
}

.hlab-lp__quick-free-head {
  min-width: 0;
}

.hlab-lp__quick-free-head .hlab-lp__eyebrow {
  margin-bottom: 2px;
}

.hlab-lp__quick-free-head h2 {
  margin: 0;
  color: var(--hl-brown);
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 900;
}

.hlab-lp__quick-free-head p {
  margin: 5px 0 0;
  color: var(--hl-brown-soft);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 750;
}

.hlab-lp__quick-free-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.hlab-lp__quick-free-link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  min-width: 0;
  min-height: 116px;
  padding: 12px 13px;
  border: 1px solid rgba(106, 59, 34, 0.15);
  border-radius: 15px;
  color: var(--hl-brown) !important;
  background: #fffaf4;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(74, 36, 20, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.hlab-lp__quick-free-link:hover,
.hlab-lp__quick-free-link:focus-visible {
  border-color: rgba(240, 138, 0, 0.58);
  box-shadow: 0 7px 18px rgba(74, 36, 20, 0.09);
  transform: translateY(-1px);
}

.hlab-lp__quick-free-link > span {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: #f08a00;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 900;
}

.hlab-lp__quick-free-link > strong {
  align-self: center;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 900;
}

.hlab-lp__quick-free-link > small {
  color: #8b603e;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 800;
}

.hlab-lp__quick-free-all {
  grid-column: 2;
  justify-self: end;
  margin-top: -7px;
  color: var(--hl-orange-dark) !important;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .hlab-lp__quick-free-panel {
    grid-template-columns: 1fr;
  }

  .hlab-lp__quick-free-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hlab-lp__quick-free-all {
    grid-column: 1;
    justify-self: start;
    margin-top: -2px;
  }
}

@media (max-width: 640px) {
  .hlab-lp__quick-free {
    padding-bottom: 22px;
  }

  .hlab-lp__quick-free-panel {
    gap: 13px;
    padding: 15px;
    border-radius: 18px;
  }

  .hlab-lp__quick-free-head h2 {
    font-size: 22px;
  }

  .hlab-lp__quick-free-links {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hlab-lp__quick-free-link {
    min-height: 108px;
    padding: 11px;
    border-radius: 13px;
  }

  .hlab-lp__quick-free-link > strong {
    font-size: 13px;
  }
}

/* Header */

.hlab-lp__header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(240, 138, 0, 0.16);
  background: rgba(255, 250, 243, 0.92);
  box-shadow: 0 8px 22px rgba(74, 36, 20, 0.05);
  backdrop-filter: blur(12px);
}

.admin-bar .hlab-lp__header {
  top: 32px;
}

.hlab-lp__header-inner {
  min-height: 72px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.hlab-lp__brand img {
  width: 190px;
}

.hlab-lp__nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.hlab-lp__nav a {
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--hl-brown-soft);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.hlab-lp__nav a:hover,
.hlab-lp__nav a:focus-visible {
  background: #fff;
}

.hlab-lp__header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 17px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(145deg, #ff9f00, var(--hl-orange-dark));
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 9px 22px rgba(216, 111, 0, 0.24);
}

/* Hero */

.hlab-lp__hero {
  padding: 24px 0 34px;
}

.hlab-lp__hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: center;
  min-height: 560px;
  padding: clamp(42px, 6vw, 74px);
  border: 1px solid var(--hl-border);
  border-radius: 36px;
  background-color: var(--hl-cream);
  background-image:
    linear-gradient(rgba(255, 251, 245, 0.08), rgba(255, 251, 245, 0.08)),
    var(--hlab-lp-hero-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--hl-shadow);
  overflow: hidden;
}

.hlab-lp__hero-copy {
  position: relative;
  z-index: 2;
}


.hlab-lp__hero--monitor .hlab-lp__hero-panel {
  border: 2px solid rgba(240, 138, 0, 0.38);
  background-image:
    radial-gradient(circle at 13% 10%, rgba(255, 191, 47, 0.22), transparent 31%),
    radial-gradient(circle at 90% 88%, rgba(167, 201, 87, 0.18), transparent 29%),
    linear-gradient(rgba(255, 251, 245, 0.26), rgba(255, 251, 245, 0.26)),
    var(--hlab-lp-hero-bg);
  box-shadow:
    0 24px 56px rgba(110, 58, 22, 0.13),
    0 0 0 7px rgba(255, 255, 255, 0.56) inset;
}

.hlab-lp__hero-monitor-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(216, 111, 0, 0.24);
  border-radius: 999px;
  color: var(--hl-brown);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(110, 58, 22, 0.08);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
}

.hlab-lp__hero-monitor-label span,
.hlab-lp__hero-monitor-label strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
}

.hlab-lp__hero-monitor-label span {
  color: #fff;
  background: var(--hl-brown);
}

.hlab-lp__hero-monitor-label strong {
  color: #7a4b00;
  background: #fff0b8;
}

.hlab-lp__hero h1.hlab-lp__hero-monitor-title {
  max-width: 760px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.22;
  letter-spacing: 0.01em;
}

.hlab-lp__hero-monitor-title .hlab-lp__hero-title-main > span {
  display: block;
}

.hlab-lp__hero-monitor-title .hlab-lp__hero-title-main > span:first-child {
  color: var(--hl-orange-dark);
}

.hlab-lp__hero-monitor-lead {
  max-width: 760px;
  margin-top: 17px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.8;
}

.hlab-lp__hero-monitor-context {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--hl-brown-soft);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 750;
}

.hlab-lp__hero-monitor-price {
  display: grid;
  gap: 8px;
  max-width: 680px;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid rgba(240, 138, 0, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 24px rgba(110, 58, 22, 0.08);
}

.hlab-lp__hero-monitor-price-heading {
  margin: 0;
  color: var(--hl-brown);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hlab-lp__hero-monitor-price-comparison {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 12px;
}

.hlab-lp__hero-monitor-price-comparison del {
  color: var(--hl-muted);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 850;
  text-decoration-line: line-through;
  text-decoration-style: double;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(106, 59, 34, 0.72);
}

.hlab-lp__hero-monitor-price-arrow {
  color: var(--hl-orange-dark);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  transform: rotate(-90deg);
}

.hlab-lp__hero-monitor-current-price {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: var(--hl-orange-dark);
  line-height: 1;
}

.hlab-lp__hero-monitor-current-price span {
  color: var(--hl-brown-soft);
  font-size: 14px;
  font-weight: 900;
}

.hlab-lp__hero-monitor-current-price strong {
  font-size: 42px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.hlab-lp__hero-monitor-current-price em {
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.hlab-lp__hero-monitor-price-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlab-lp__hero-monitor-price-points li {
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(167, 201, 87, 0.42);
  border-radius: 999px;
  color: var(--hl-brown-soft);
  background: #fbfff2;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 900;
}

.hlab-lp__hero-monitor-price-points li::before {
  margin-right: 4px;
  color: #6f8f2c;
  content: "✓";
}

.hlab-lp__hero-monitor-notes {
  display: grid;
  gap: 2px;
  max-width: 760px;
  margin-top: 10px;
  color: var(--hl-muted);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 750;
}

.hlab-lp__hero-monitor-notes p {
  margin: 0;
}

.hlab-lp__hero-monitor-notes .hlab-lp__hero-monitor-note-important {
  color: var(--hl-brown-soft);
  font-weight: 900;
}

.hlab-lp__hero-target {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 7px 12px;
  border: 1px solid rgba(240, 138, 0, 0.24);
  border-radius: 999px;
  color: var(--hl-orange-dark);
  background: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 900;
}

.hlab-lp__kicker,
.hlab-lp__eyebrow {
  display: inline-block;
  margin: 0;
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.hlab-lp__hero h1 {
  margin: 14px 0 0;
  color: var(--hl-brown);
  font-size: clamp(38px, 6.3vw, 70px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hlab-lp__hero h1 span,
.hlab-lp__hero h1 b {
  display: inline-block;
}

.hlab-lp__hero h1 .hlab-lp__hero-title-small {
  display: block;
  margin-bottom: 7px;
  color: var(--hl-brown-soft);
  font-size: 0.36em;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.hlab-lp__hero h1 .hlab-lp__hero-title-main {
  display: block;
}

.hlab-lp__hero h1 b {
  margin: 0 0.07em;
  color: var(--hl-orange);
  font-size: 0.7em;
}

.hlab-lp__hero-lead {
  margin: 20px 0 0;
  color: var(--hl-brown-soft);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 780;
}

.hlab-lp__hero h1.hlab-lp__hero-purpose-title {
  max-width: 760px;
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 1.28;
}

.hlab-lp__hero-purpose-title .hlab-lp__hero-title-main > span {
  display: block;
}

.hlab-lp__hero-purpose-lead {
  max-width: 780px;
  line-height: 1.9;
}

.hlab-lp__hero-purpose-text {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--hl-muted);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 730;
}

.hlab-lp__hero-membership-note {
  width: min(720px, 100%);
  margin: 14px 0 0;
  padding: 10px 13px;
  border-left: 4px solid var(--hl-orange);
  border-radius: 0 12px 12px 0;
  color: var(--hl-brown-soft);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 800;
}

.hlab-lp__hero-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(690px, 100%);
  margin-top: 15px;
  padding: 9px 12px;
  border-left: 3px solid var(--hl-orange);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.70);
}

.hlab-lp__hero-status-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  min-width: 0;
}

.hlab-lp__hero-status strong {
  color: var(--hl-brown);
  font-size: 12px;
  line-height: 1.5;
}

.hlab-lp__hero-status span {
  color: var(--hl-muted);
  font-size: 11px;
  line-height: 1.5;
}

.hlab-lp__hero-status-link {
  flex: 0 0 auto;
  color: var(--hl-orange-dark);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.hlab-lp__hero-status-link:hover,
.hlab-lp__hero-status-link:focus-visible {
  color: var(--hl-brown);
}

.hlab-lp__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hlab-lp__price-note {
  margin: 12px 0 0;
  color: var(--hl-muted);
  font-size: 13px;
  font-weight: 800;
}

.hlab-lp__line-note {
  margin: 8px 0 0;
  color: var(--hl-muted);
  font-size: 13px;
}

.hlab-lp__line-note a {
  color: var(--hl-orange-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hlab-lp__hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.hlab-lp__hero-visual > img {
  width: min(390px, 100%);
  filter: drop-shadow(0 16px 22px rgba(74, 36, 20, 0.13));
}


.hlab-lp__hero-monitor-stamp {
  position: absolute;
  z-index: 4;
  top: 4%;
  left: 2%;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  padding: 10px;
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ffae00, #df6e00);
  box-shadow: 0 14px 28px rgba(170, 78, 0, 0.24);
  text-align: center;
  transform: rotate(-7deg);
}

.hlab-lp__hero-monitor-stamp span,
.hlab-lp__hero-monitor-stamp b,
.hlab-lp__hero-monitor-stamp strong {
  display: block;
  line-height: 1;
}

.hlab-lp__hero-monitor-stamp span {
  font-size: 11px;
  font-weight: 900;
}

.hlab-lp__hero-monitor-stamp strong {
  margin: 1px 0;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.hlab-lp__hero-monitor-stamp b {
  font-size: 12px;
  font-weight: 900;
}

.hlab-lp__hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hlab-lp__hero-decor img {
  position: absolute;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.44;
  filter: drop-shadow(0 8px 14px rgba(74, 36, 20, 0.06));
}

.hlab-lp__hero-decor-plane {
  top: 5%;
  left: 2%;
  transform: rotate(-10deg);
}

.hlab-lp__hero-decor-stars {
  top: 2%;
  right: 1%;
  width: 82px !important;
  height: 82px !important;
  opacity: 0.58 !important;
  transform: rotate(6deg);
}

.hlab-lp__hero-decor-book {
  left: 0;
  bottom: 7%;
  width: 70px !important;
  height: 70px !important;
  opacity: 0.32 !important;
  transform: rotate(-7deg);
}

.hlab-lp__hero-decor-sprout {
  right: 0;
  bottom: 5%;
  width: 62px !important;
  height: 62px !important;
  opacity: 0.38 !important;
  transform: rotate(7deg);
}

.hlab-lp__hero-decor-heart {
  top: 38%;
  right: 5%;
  width: 40px !important;
  height: 40px !important;
  opacity: 0.42 !important;
  transform: rotate(10deg);
}

.hlab-lp__hero-bubble {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 4%;
  display: grid;
  width: min(340px, 94%);
  gap: 2px;
  padding: 13px 16px;
  border: 2px solid rgba(106, 59, 34, 0.20);
  border-radius: 20px 20px 4px 20px;
  background: #fff;
  color: var(--hl-brown);
  box-shadow: 0 10px 24px rgba(74, 36, 20, 0.08);
}

.hlab-lp__hero-bubble strong {
  font-size: 14px;
}

.hlab-lp__hero-bubble span {
  font-size: 11px;
  font-weight: 750;
}

/* Sections */

.hlab-lp__section {
  padding: clamp(48px, 7vw, 84px) 0;
}

.hlab-lp__section--soft {
  position: relative;
}

.hlab-lp__section--soft::before {
  position: absolute;
  inset: 20px max(12px, calc((100vw - 1180px) / 2 - 20px));
  border: 1px solid rgba(240, 138, 0, 0.12);
  border-radius: 42px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 191, 47, 0.13), transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(167, 201, 87, 0.12), transparent 28%),
    rgba(255, 248, 238, 0.76);
  content: "";
  pointer-events: none;
}

.hlab-lp__section--soft > .hlab-lp__wrap {
  position: relative;
  z-index: 1;
}

.hlab-lp__section-head {
  width: min(820px, 100%);
  margin-bottom: 28px;
}

.hlab-lp__section-head h2,
.hlab-lp__price-card h2,
.hlab-lp__story-card h2,
.hlab-lp__final-card h2 {
  margin: 6px 0 10px;
  color: var(--hl-brown);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-break: strict;
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

.hlab-lp__section-head p,
.hlab-lp__story-card p,
.hlab-lp__final-card p {
  margin: 0;
  color: var(--hl-muted);
  font-weight: 740;
}

.hlab-lp__three-grid,
.hlab-lp__four-grid,
.hlab-lp__flow-grid {
  display: grid;
  gap: 18px;
}

.hlab-lp__three-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hlab-lp__four-grid,
.hlab-lp__flow-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hlab-lp__number-card,
.hlab-lp__feature-card,
.hlab-lp__target-card,
.hlab-lp__flow-grid article {
  position: relative;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--hl-border);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(74, 36, 20, 0.07);
  overflow: hidden;
}

.hlab-lp__number-card > span,
.hlab-lp__flow-grid article > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--hl-yellow), var(--hl-orange));
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 111, 0, 0.20);
}

.hlab-lp__number-card h3,
.hlab-lp__feature-card h3,
.hlab-lp__target-card h3,
.hlab-lp__flow-grid h3 {
  margin: 0 0 8px;
  color: var(--hl-brown);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 900;
  line-break: strict;
  text-wrap: balance;
}

.hlab-lp__number-card p,
.hlab-lp__feature-card p,
.hlab-lp__target-card p,
.hlab-lp__flow-grid p {
  margin: 0;
  color: var(--hl-muted);
}

.hlab-lp__number-card {
  min-height: 280px;
}

.hlab-lp__number-card:nth-child(1) {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__number-card:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0, rgba(167, 201, 87, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__number-card:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0, rgba(244, 153, 181, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__card-illustration {
  width: 108px;
  height: 108px;
  margin: 0 0 12px;
  object-fit: contain;
}

.hlab-lp__split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
  gap: 32px;
  align-items: center;
}

.hlab-lp__mini-list {
  display: grid;
  gap: 10px;
}

.hlab-lp__tool-intro-list {
  margin-top: 18px;
}

.hlab-lp__mini-list > div {
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border-left: 5px solid var(--hl-orange);
  border-radius: 0 18px 18px 0;
  background: rgba(255, 255, 255, 0.86);
}

.hlab-lp__mini-list strong {
  color: var(--hl-brown);
}

.hlab-lp__mini-list span {
  color: var(--hl-muted);
  font-size: 14px;
}

.hlab-lp__split-visual {
  display: grid;
  place-items: center;
}

.hlab-lp__split-visual img {
  width: min(260px, 82%);
}

.hlab-lp__feature-card {
  text-align: center;
}

.hlab-lp__feature-card > img {
  width: 126px;
  height: 126px;
  margin: 0 auto 12px;
  object-fit: contain;
}

.hlab-lp__feature-icon {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 14px;
  border-radius: 28px;
  background: var(--hl-cream-deep);
  font-size: 36px;
}

.hlab-lp__target-card {
  min-height: 290px;
  padding-top: 24px;
}

.hlab-lp__target-card::before {
  display: none;
}

.hlab-lp__target-card > img {
  width: 104px;
  height: 104px;
  margin: 0 0 12px;
  object-fit: contain;
}

.hlab-lp__target-card:nth-child(1) {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.20), transparent 42%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__target-card:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 138, 0, 0.15), transparent 42%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__target-card:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0, rgba(167, 201, 87, 0.20), transparent 42%),
    rgba(255, 255, 255, 0.96);
}

.hlab-lp__target-card:nth-child(4) {
  background:
    radial-gradient(circle at 100% 0, rgba(244, 153, 181, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.96);
}

/* Needs-based policy */

.hlab-lp__needs-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--hl-border);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(167, 201, 87, 0.16), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(255, 191, 47, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(74, 36, 20, 0.06);
}

.hlab-lp__needs-copy h2 {
  margin: 6px 0 10px;
  color: var(--hl-brown);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hlab-lp__needs-copy > p {
  margin: 0;
  color: var(--hl-muted);
  font-weight: 740;
}

.hlab-lp__needs-copy .hlab-lp__needs-emphasis {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 5px solid var(--hl-orange);
  color: var(--hl-brown-soft);
  font-weight: 900;
}

.hlab-lp__needs-list {
  display: grid;
  gap: 10px;
}

.hlab-lp__needs-list > div {
  display: grid;
  gap: 3px;
  padding: 15px 17px;
  border: 1px solid rgba(240, 138, 0, 0.17);
  border-radius: 16px;
  background: rgba(255, 251, 245, 0.90);
}

.hlab-lp__needs-list strong {
  color: var(--hl-brown);
  font-size: 15px;
  line-height: 1.5;
}

.hlab-lp__needs-list span {
  color: var(--hl-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Free experience */

.hlab-lp__free-experience {
  padding: 0 0 22px;
}

.hlab-lp__free-experience-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(240, 138, 0, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 100%, rgba(167, 201, 87, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 238, 0.98));
  box-shadow: var(--hl-shadow);
}

.hlab-lp__free-experience-copy h2 {
  margin: 6px 0 10px;
  color: var(--hl-brown);
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.45;
}

.hlab-lp__free-experience-copy > p {
  margin: 0;
  color: var(--hl-muted);
}

.hlab-lp__free-experience-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hlab-lp__free-experience-note {
  margin-top: 14px !important;
  padding-left: 13px;
  border-left: 4px solid var(--hl-green);
  font-size: 12px;
  line-height: 1.75;
  font-weight: 750;
}

.hlab-lp__free-experience-image {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(121, 87, 57, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(74, 36, 20, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hlab-lp__free-experience-image:hover,
.hlab-lp__free-experience-image:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(74, 36, 20, 0.17);
}

.hlab-lp__free-experience-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Materials */

.hlab-lp__materials {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 32px;
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--hl-border);
  border-radius: 32px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)),
    var(--hlab-lp-card-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--hl-shadow);
}

.hlab-lp__materials-list {
  columns: 2;
  column-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlab-lp__materials-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 24px;
  break-inside: avoid;
  color: var(--hl-brown-soft);
  font-weight: 800;
}

.hlab-lp__materials-list li::before {
  position: absolute;
  top: 0.22em;
  left: 0;
  color: var(--hl-orange);
  content: "✓";
  font-weight: 900;
}

.hlab-lp__request-box {
  margin-top: 22px;
  padding: 17px 19px;
  border: 1px dashed rgba(240, 138, 0, 0.42);
  border-radius: 20px;
  background: rgba(255, 248, 238, 0.84);
}

.hlab-lp__request-box strong {
  color: var(--hl-brown);
}

.hlab-lp__request-box p {
  margin: 5px 0 0;
  color: var(--hl-muted);
}


/* 第1期モニター募集 */

.hlab-lp__monitor-panel {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(240, 138, 0, 0.22);
  border-radius: 34px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 191, 47, 0.18), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(167, 201, 87, 0.13), transparent 26%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--hl-shadow);
}

.hlab-lp__monitor-head {
  width: min(820px, 100%);
}

.hlab-lp__monitor-head h2 {
  margin: 8px 0 12px;
  color: var(--hl-brown);
  font-size: clamp(29px, 4vw, 44px);
  line-height: 1.42;
  font-weight: 900;
  text-wrap: pretty;
}

.hlab-lp__monitor-head > p:last-child {
  margin: 0;
  color: var(--hl-muted);
  font-weight: 760;
}

.hlab-lp__monitor-badge {
  display: inline-flex;
  margin: 10px 0 0 !important;
  padding: 6px 12px;
  border: 1px solid rgba(240, 138, 0, 0.28);
  border-radius: 999px;
  color: var(--hl-orange-dark) !important;
  background: #fff8e9;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 900 !important;
}

.hlab-lp__monitor-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.hlab-lp__monitor-terms article {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(240, 138, 0, 0.18);
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.92);
}

.hlab-lp__monitor-terms article > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--hl-yellow), var(--hl-orange));
  font-size: 12px;
  font-weight: 900;
}

.hlab-lp__monitor-terms strong {
  display: block;
  color: var(--hl-brown);
  font-size: 17px;
  line-height: 1.5;
}

.hlab-lp__monitor-terms p {
  margin: 7px 0 0;
  color: var(--hl-muted);
  font-size: 14px;
}

.hlab-lp__monitor-audience {
  margin-top: 22px;
  padding: 22px;
  border-radius: 24px;
  background: #fff8ee;
}

.hlab-lp__monitor-audience h3 {
  margin: 0 0 13px;
  color: var(--hl-brown);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.5;
  font-weight: 900;
}

.hlab-lp__monitor-audience ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlab-lp__monitor-audience li {
  position: relative;
  margin: 0;
  padding-left: 23px;
  color: var(--hl-brown-soft);
  font-weight: 800;
}

.hlab-lp__monitor-audience li::before {
  position: absolute;
  left: 0;
  color: var(--hl-orange);
  content: "✓";
  font-weight: 900;
}

.hlab-lp__monitor-audience > p {
  margin: 13px 0 0;
  color: var(--hl-muted);
  font-size: 14px;
}

.hlab-lp__monitor-role {
  margin-top: 18px;
  padding: 18px 20px;
  border-left: 6px solid var(--hl-orange);
  border-radius: 0 20px 20px 0;
  background: rgba(255, 255, 255, 0.86);
}

.hlab-lp__monitor-role strong {
  color: var(--hl-brown);
  font-size: 17px;
}

.hlab-lp__monitor-role p {
  margin: 6px 0 0;
  color: var(--hl-muted);
}

.hlab-lp__monitor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* モニター料金詳細 */

.hlab-lp__price-trial {
  color: var(--hl-brown) !important;
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 900;
}

.hlab-lp__price-terms {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin: 18px auto;
  text-align: left;
}

.hlab-lp__price-terms > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  padding: 13px 16px;
  border-radius: 15px;
  background: rgba(255, 248, 238, 0.86);
}

.hlab-lp__price-terms strong {
  color: var(--hl-brown);
}

.hlab-lp__price-terms span {
  color: var(--hl-muted);
}

.hlab-lp__price-standard-note {
  padding: 14px 16px;
  border: 1px dashed rgba(240, 138, 0, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 760;
}

/* Practical tools */

.hlab-lp__tools-block {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(121, 87, 57, 0.14);
}

.hlab-lp__tools-head h3 {
  margin: 5px 0 7px;
  color: var(--hl-brown);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.5;
}

.hlab-lp__tools-head p {
  margin: 0;
  color: var(--hl-muted);
}

.hlab-lp__tools-kicker {
  color: var(--hl-orange-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hlab-lp__tools-group {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(121, 87, 57, 0.13);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
}

.hlab-lp__tools-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.hlab-lp__tools-group-head strong {
  color: var(--hl-brown);
  font-size: 17px;
  font-weight: 900;
}

.hlab-lp__tools-group-head span {
  color: var(--hl-muted);
  font-size: 12px;
  font-weight: 750;
}

.hlab-lp__tool-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hlab-lp__tool-card {
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 18px;
}

.hlab-lp__tool-card--down {
  border-color: rgba(214, 91, 50, 0.24);
  background: linear-gradient(145deg, #fff3ed, #fff8ef);
}

.hlab-lp__tool-card--up {
  border-color: rgba(63, 132, 72, 0.24);
  background: linear-gradient(145deg, #eff9ef, #f8fcf3);
}

.hlab-lp__tool-card--bulk {
  margin-top: 12px;
  border-color: rgba(217, 120, 36, 0.24);
  background: linear-gradient(145deg, #fff8ef, #fffdf9);
}

.hlab-lp__tools-group--featured {
  border-color: rgba(240, 138, 0, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.90);
}

.hlab-lp__tools-group--roulette {
  border-color: rgba(240, 138, 0, 0.30);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.18), transparent 42%),
    rgba(255, 252, 244, 0.94);
}

.hlab-lp__tools-group--sound {
  border-color: rgba(47, 133, 166, 0.26);
  background:
    radial-gradient(circle at 100% 0, rgba(76, 200, 204, 0.16), transparent 42%),
    rgba(246, 253, 255, 0.95);
}

.hlab-lp__tool-card--sound {
  border-color: rgba(47, 133, 166, 0.25);
  background: linear-gradient(145deg, #edfafd, #f8fdff);
}

.hlab-lp__tool-card--roulette {
  border-color: rgba(240, 138, 0, 0.26);
  background: linear-gradient(145deg, #fff4df, #fffaf0);
}

.hlab-lp__tool-card--member {
  border-color: rgba(212, 118, 0, 0.25);
  background: linear-gradient(145deg, #fff4df, #fffaf0);
}

.hlab-lp__tool-card--analysis {
  border-color: rgba(79, 122, 164, 0.24);
  background: linear-gradient(145deg, #edf6ff, #f7fbff);
}

.hlab-lp__tool-direction {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.hlab-lp__tool-card--down .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #d75f32, #f08a00);
}

.hlab-lp__tool-card--up .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #4a9152, #68a85f);
}

.hlab-lp__tool-card--bulk .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #b86522, #d97824);
}

.hlab-lp__tool-card--member .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #d87400, #f09a1a);
}

.hlab-lp__tool-card--analysis .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #356f9f, #6094be);
}

.hlab-lp__tool-card--roulette .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #e06e00, #f5a400);
}

.hlab-lp__tool-card--sound .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #26779b, #36a9b2);
}

.hlab-lp__tool-card h4 {
  margin: 10px 0 6px;
  color: var(--hl-brown);
  font-size: 17px;
  line-height: 1.55;
}

.hlab-lp__tool-card p {
  margin: 0;
  color: #654e3b;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 700;
}

.hlab-lp__local-data-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed rgba(111, 143, 44, 0.42);
  border-radius: 16px;
  background: rgba(248, 252, 239, 0.88);
}

.hlab-lp__local-data-note strong {
  color: var(--hl-brown);
  font-size: 14px;
}

.hlab-lp__local-data-note span {
  color: var(--hl-muted);
  font-size: 12px;
  line-height: 1.75;
  font-weight: 700;
}

.hlab-lp__tool-request-note {
  margin: 14px 2px 0;
  color: var(--hl-muted);
  font-size: 12px;
  line-height: 1.8;
  font-weight: 700;
}

.hlab-lp__materials-visual {
  display: grid;
  place-items: center;
}

.hlab-lp__materials-visual img {
  width: min(300px, 100%);
}

/* Operator */

.hlab-lp__operator {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.hlab-lp__operator-badge {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 20px;
  border-radius: 50%;
  color: var(--hl-brown);
  background:
    radial-gradient(circle at 35% 30%, #fff7c7, transparent 32%),
    linear-gradient(145deg, #ffd96c, #ffad27);
  box-shadow: 0 16px 34px rgba(216, 111, 0, 0.20);
  text-align: center;
}

.hlab-lp__operator-badge span,
.hlab-lp__operator-badge strong {
  display: block;
}

.hlab-lp__operator-badge strong {
  font-size: 27px;
}

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

.hlab-lp__operator-note {
  padding: 14px 17px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.80);
  color: var(--hl-muted);
}

/* Price */

.hlab-lp__price-card {
  position: relative;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--hl-border);
  border-radius: 34px;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 191, 47, 0.16), transparent 28%),
    rgba(255, 255, 255, 0.94);
  box-shadow: var(--hl-shadow);
  text-align: center;
  overflow: hidden;
}

.hlab-lp__price-character {
  position: absolute;
  right: 20px;
  bottom: 12px;
  width: 116px;
  opacity: 0.92;
  transform: rotate(3deg);
}

.hlab-lp__price-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 18px 0;
  color: var(--hl-brown);
}

.hlab-lp__price-main span {
  font-weight: 900;
}

.hlab-lp__price-main strong {
  color: var(--hl-orange);
  font-size: clamp(54px, 9vw, 88px);
  line-height: 1;
  font-weight: 950;
}

.hlab-lp__price-main b {
  font-size: 18px;
}

.hlab-lp__price-card > p {
  width: min(660px, 100%);
  margin: 8px auto;
  color: var(--hl-muted);
}

/* Flow */

.hlab-lp__flow-grid article {
  min-height: 230px;
}

.hlab-lp__flow-icon {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.88;
}

/* Story */

.hlab-lp__story-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 30px;
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--hl-border);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--hl-shadow);
}

.hlab-lp__story-card > img {
  width: 170px;
}

.hlab-lp__story-visual {
  position: relative;
  min-height: 230px;
}

.hlab-lp__story-visual img {
  position: absolute;
  object-fit: contain;
}

.hlab-lp__story-lion {
  z-index: 2;
  right: 8px;
  bottom: 0;
  width: 184px;
}

.hlab-lp__story-star {
  top: 0;
  right: 0;
  width: 76px;
  opacity: 0.75;
  transform: rotate(8deg);
}

.hlab-lp__story-pencil {
  top: 16px;
  left: 0;
  width: 68px;
  opacity: 0.68;
  transform: rotate(-9deg);
}

.hlab-lp__story-mug {
  bottom: 0;
  left: 2px;
  width: 62px;
  opacity: 0.72;
  transform: rotate(7deg);
}

.hlab-lp__text-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--hl-orange-dark) !important;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* FAQ */

.hlab-lp__faq {
  display: grid;
  gap: 10px;
}

.hlab-lp__faq details {
  border: 1px solid rgba(240, 138, 0, 0.20);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.hlab-lp__faq summary {
  position: relative;
  padding: 18px 50px 18px 20px;
  color: var(--hl-brown);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.hlab-lp__faq summary::-webkit-details-marker {
  display: none;
}

.hlab-lp__faq summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: var(--hl-orange);
  content: "＋";
  font-size: 22px;
}

.hlab-lp__faq details[open] summary::after {
  content: "−";
}

.hlab-lp__faq details p {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--hl-muted);
}

/* Final */

.hlab-lp__final {
  padding: 44px 0 86px;
}

.hlab-lp__final-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--hl-border);
  border-radius: 34px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)),
    var(--hlab-lp-card-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--hl-shadow);
}

.hlab-lp__final-card > img {
  width: 180px;
}

/* Footer */

.hlab-lp__footer {
  padding: 40px 0 86px;
  border-top: 1px solid rgba(240, 138, 0, 0.16);
  background: rgba(255, 250, 243, 0.90);
  text-align: center;
}

.hlab-lp__footer img {
  width: min(360px, 80%);
  margin: 0 auto 18px;
}

.hlab-lp__footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.hlab-lp__footer nav a {
  color: var(--hl-brown-soft);
  font-size: 13px;
  font-weight: 800;
}

.hlab-lp__footer p {
  margin: 12px 0 0;
  color: var(--hl-muted);
  font-size: 13px;
}

/* Fixed CTA */

.hlab-lp__fixed-cta {
  position: fixed;
  z-index: 90;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(145deg, #ff9f00, var(--hl-orange-dark));
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(216, 111, 0, 0.30);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.hlab-lp__fixed-cta.is-managed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
}

.hlab-lp__fixed-cta.is-managed.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.hlab-lp__fixed-cta:hover,
.hlab-lp__fixed-cta:focus-visible,
.hlab-lp__fixed-cta.is-managed.is-visible:hover,
.hlab-lp__fixed-cta.is-managed.is-visible:focus-visible {
  transform: translateY(-2px);
}

/* Responsive */

@media (max-width: 980px) {
  .hlab-lp__header-inner {
    grid-template-columns: 160px minmax(0, 1fr) auto;
  }

  .hlab-lp__brand img {
    width: 160px;
  }

  .hlab-lp__nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hlab-lp__nav::-webkit-scrollbar {
    display: none;
  }

  .hlab-lp__hero-panel {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

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

  .hlab-lp__four-grid,
  .hlab-lp__flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hlab-lp__free-experience-card {
    grid-template-columns: 1fr;
  }

  .hlab-lp__free-experience-image {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .hlab-lp {
    background-attachment: scroll;
  }

  .hlab-lp__header-inner {
    min-height: 64px;
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .hlab-lp__brand img {
    width: 138px;
  }

  .hlab-lp__header-cta {
    display: none;
  }

  .hlab-lp__nav {
    justify-content: flex-end;
  }

  .hlab-lp__nav a {
    display: none;
  }

  .hlab-lp__nav a:nth-last-child(1),
  .hlab-lp__nav a:nth-last-child(2) {
    display: inline-flex;
  }

  .hlab-lp__hero-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px 20px 28px;
    border-radius: 28px;
    background-position: 48% center;
  }

  .hlab-lp__hero-visual {
    min-height: 270px;
    align-items: center;
    justify-items: center;
    isolation: isolate;
    border-radius: 32px;
    background:
      radial-gradient(circle at 16% 18%, rgba(255, 191, 47, 0.24), transparent 31%),
      radial-gradient(circle at 86% 78%, rgba(167, 201, 87, 0.22), transparent 29%),
      linear-gradient(145deg, rgba(255, 249, 239, 0.74), rgba(255, 242, 214, 0.50));
  }

  .hlab-lp__hero-decor-plane {
    top: 2%;
    left: 1%;
    width: 54px;
    height: 54px;
    opacity: 0.46;
  }

  .hlab-lp__hero-decor-stars {
    top: 3%;
    right: 1%;
    width: 76px !important;
    height: 76px !important;
    opacity: 0.62 !important;
  }

  .hlab-lp__hero-decor-book {
    left: 1%;
    bottom: 22%;
    width: 58px !important;
    height: 58px !important;
    opacity: 0.38 !important;
  }

  .hlab-lp__hero-decor-sprout {
    right: 1%;
    bottom: 22%;
    width: 56px !important;
    height: 56px !important;
    opacity: 0.44 !important;
  }

  .hlab-lp__hero-decor-heart {
    top: 45%;
    right: 5%;
    width: 34px !important;
    height: 34px !important;
    opacity: 0.48 !important;
  }

  .hlab-lp__hero-visual > img {
    position: relative;
    z-index: 2;
    width: min(210px, 66%);
    transform: translateY(-28px);
  }

  .hlab-lp__hero-bubble {
    z-index: 3;
    right: 4%;
    bottom: 4%;
    width: 92%;
    padding: 10px 12px;
  }

  .hlab-lp__hero-bubble strong {
    font-size: 13px;
  }

  .hlab-lp__hero-bubble span {
    font-size: 12px;
    line-height: 1.55;
  }

  .hlab-lp__split,
  .hlab-lp__needs-panel,
  .hlab-lp__materials,
  .hlab-lp__operator,
  .hlab-lp__story-card,
  .hlab-lp__final-card {
    grid-template-columns: 1fr;
  }

  .hlab-lp__split-visual {
    order: -1;
  }

  .hlab-lp__materials-visual {
    order: -1;
  }

  .hlab-lp__materials-visual img {
    width: min(220px, 64%);
  }

  .hlab-lp__materials-list {
    columns: 1;
  }

  .hlab-lp__operator-badge {
    width: 150px;
    min-height: 150px;
  }

  .hlab-lp__story-card > img,
  .hlab-lp__final-card > img {
    width: 130px;
  }

  .hlab-lp__story-visual {
    width: min(250px, 100%);
    min-height: 200px;
    margin: 0 auto;
  }

  .hlab-lp__story-lion {
    width: 164px;
  }

  .hlab-lp__price-character {
    right: 4px;
    bottom: 4px;
    width: 86px;
    opacity: 0.46;
  }
}

@media (max-width: 760px) {
  .hlab-lp__monitor-terms {
    grid-template-columns: 1fr;
  }

  .hlab-lp__monitor-audience ul {
    grid-template-columns: 1fr;
  }

  .hlab-lp__monitor-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hlab-lp__price-terms > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 640px) {
  .hlab-lp__free-experience {
    padding-bottom: 14px;
  }

  .hlab-lp__free-experience-card {
    gap: 18px;
    padding: 20px 15px;
    border-radius: 24px;
  }

  .hlab-lp__free-experience-copy h2 {
    font-size: clamp(25px, 8vw, 34px);
  }

  .hlab-lp__free-experience-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hlab-lp__free-experience-image {
    border-radius: 17px;
  }

  .hlab-lp__monitor-panel {
    padding: 22px 16px;
    border-radius: 26px;
  }

  .hlab-lp__monitor-audience {
    padding: 18px 15px;
  }

  .hlab-lp__monitor-role {
    padding: 16px 15px;
  }

  .hlab-lp__tool-cards {
    grid-template-columns: 1fr;
  }

  .hlab-lp__tools-group-head {
    display: grid;
    gap: 2px;
  }

  .admin-bar .hlab-lp__header {
    top: 46px;
  }

  .hlab-lp__nav {
    display: none;
  }

  .hlab-lp__header-inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .hlab-lp__brand img {
    width: 170px;
  }

  .hlab-lp__hero h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .hlab-lp__hero h1 span,
  .hlab-lp__hero h1 b {
    display: inline;
  }

  .hlab-lp__hero h1 .hlab-lp__hero-title-small,
  .hlab-lp__hero h1 .hlab-lp__hero-title-main {
    display: block;
  }

  .hlab-lp__hero h1 .hlab-lp__hero-title-small {
    margin-bottom: 5px;
    font-size: 0.34em;
    line-height: 1.5;
  }

  .hlab-lp__hero h1 b {
    margin: 0 0.04em;
    line-height: inherit;
  }

  .hlab-lp__hero-target {
    padding: 6px 10px;
    font-size: 13px;
  }

  .hlab-lp__hero h1.hlab-lp__hero-purpose-title {
    font-size: clamp(32px, 9.2vw, 44px);
    line-height: 1.34;
  }

  .hlab-lp__hero-purpose-lead br {
    display: none;
  }

  .hlab-lp__hero-purpose-text {
    font-size: 14px;
    line-height: 1.8;
  }

  .hlab-lp__hero-status {
    margin-top: 14px;
    padding: 10px 12px;
  }

  .hlab-lp__needs-panel {
    gap: 18px;
    padding: 20px 16px;
    border-radius: 24px;
  }

  .hlab-lp__needs-copy h2 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .hlab-lp__hero--monitor .hlab-lp__hero-panel {
    padding-top: 22px;
  }

  .hlab-lp__hero-monitor-label {
    gap: 5px;
    padding: 6px 8px 6px 6px;
    border-radius: 18px;
    font-size: 11px;
  }

  .hlab-lp__hero-monitor-label span,
  .hlab-lp__hero-monitor-label strong {
    min-height: 24px;
    padding: 2px 7px;
  }

  .hlab-lp__hero h1.hlab-lp__hero-monitor-title {
    font-size: clamp(32px, 10.2vw, 44px);
    line-height: 1.25;
  }

  .hlab-lp__hero-monitor-lead br,
  .hlab-lp__hero-monitor-context br {
    display: none;
  }

  .hlab-lp__hero-monitor-price {
    gap: 7px;
    margin-top: 15px;
    padding: 13px 14px;
    border-radius: 17px;
  }

  .hlab-lp__hero-monitor-price-comparison {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 2px;
  }

  .hlab-lp__hero-monitor-price-arrow {
    margin-left: 42px;
    transform: none;
  }

  .hlab-lp__hero-monitor-current-price strong {
    font-size: 38px;
  }

  .hlab-lp__hero-monitor-notes {
    font-size: 11px;
  }

  .hlab-lp__hero-monitor-stamp {
    top: 2%;
    left: 3%;
    width: 86px;
    height: 86px;
    border-width: 4px;
  }

  .hlab-lp__hero-monitor-stamp strong {
    font-size: 25px;
  }

  .hlab-lp__hero-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
  }

  .hlab-lp__hero-status-link {
    white-space: normal;
  }

  .hlab-lp__hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hlab-lp__four-grid,
  .hlab-lp__flow-grid {
    grid-template-columns: 1fr;
  }

  .hlab-lp__number-card,
  .hlab-lp__target-card,
  .hlab-lp__flow-grid article {
    min-height: 0;
  }

  .hlab-lp__card-illustration,
  .hlab-lp__target-card > img {
    width: 88px;
    height: 88px;
  }

  .hlab-lp__flow-icon {
    width: 62px;
    height: 62px;
  }

  .hlab-lp__section--soft::before {
    inset: 12px 6px;
    border-radius: 28px;
  }

  .hlab-lp__section-head h2,
  .hlab-lp__price-card h2,
  .hlab-lp__story-card h2,
  .hlab-lp__final-card h2 {
    font-size: clamp(27px, 8vw, 38px);
  }

  .hlab-lp__fixed-cta {
    right: 12px;
    bottom: 12px;
    left: 12px;
    min-height: 50px;
    padding: 11px 16px;
  }
}

@media print {
  .hlab-lp__header,
  .hlab-lp__fixed-cta {
    display: none;
  }

  .hlab-lp {
    background: #fff;
  }
}


/* ========================================================
   v3.2 ログイン・会員状態に応じたヘッダー導線
======================================================== */

.hlab-lp__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.hlab-lp__header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(240, 138, 0, 0.30);
  border-radius: 999px;
  color: var(--hl-orange-dark);
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.hlab-lp__header-login:hover,
.hlab-lp__header-login:focus-visible {
  background: var(--hl-cream);
}

@media (max-width: 760px) {
  .hlab-lp__header-inner {
    grid-template-columns: minmax(120px, 138px) minmax(0, 1fr);
    gap: 8px;
  }

  .hlab-lp__nav {
    display: none;
  }

  .hlab-lp__header-actions {
    display: flex;
    justify-self: end;
    gap: 6px;
  }

  .hlab-lp__header-cta {
    display: inline-flex;
  }

  .hlab-lp__header-login,
  .hlab-lp__header-cta {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .hlab-lp__brand img {
    width: 120px;
  }

  .hlab-lp__header-inner {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .hlab-lp__header-login,
  .hlab-lp__header-cta {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* 2026-08-20 実務ツール紹介カード：1カード=1遷移先の共通操作 */
.hlab-lp__tool-card--clickable {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit !important;
  text-decoration: none !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.hlab-lp__tool-card--clickable .hlab-link-card__cta {
  margin-top: 12px;
}

@media (hover: hover) {
  .hlab-lp__tool-card--clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 138, 0, 0.48);
    box-shadow: 0 10px 24px rgba(74, 36, 20, 0.09);
  }
}


/* =========================================================
 * LP density / visual-column rules v9.08
 * PCでは情報密度を高め、装飾画像の列が本文全体の高さを占有しない。
 * ======================================================= */
@media screen and (min-width: 761px) {
  .hlab-lp__section {
    padding: clamp(36px, 4.5vw, 56px) 0;
  }

  .hlab-lp__section-head {
    margin-bottom: 20px;
  }

  .hlab-lp__three-grid,
  .hlab-lp__four-grid,
  .hlab-lp__flow-grid {
    gap: 14px;
  }

  .hlab-lp__number-card {
    min-height: 240px;
  }

  .hlab-lp__target-card {
    min-height: 250px;
  }

  .hlab-lp__flow-grid article {
    min-height: 200px;
  }

  .hlab-lp__story-card {
    gap: 22px;
    padding: 30px 32px;
  }

  .hlab-lp__story-card--tool-intro {
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-areas:
      "copy visual"
      "list list"
      "link link";
    gap: 16px 24px;
    align-items: start;
  }

  .hlab-lp__tool-intro-copy {
    grid-area: copy;
    min-width: 0;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-visual {
    grid-area: visual;
    min-height: 170px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-lion {
    width: 150px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-star {
    width: 54px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-pencil,
  .hlab-lp__story-card--tool-intro .hlab-lp__story-mug {
    width: 48px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__tool-intro-list {
    grid-area: list;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .hlab-lp__tool-intro-link {
    grid-area: link;
    justify-self: start;
  }

  .hlab-lp__materials {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 18px 20px;
    align-items: start;
    padding: 30px 32px;
  }

  .hlab-lp__materials-intro {
    min-width: 0;
  }

  .hlab-lp__materials-intro .hlab-lp__section-head {
    margin-bottom: 18px;
  }

  .hlab-lp__materials-visual {
    align-self: start;
    padding-top: 6px;
  }

  .hlab-lp__materials-visual img {
    width: min(165px, 100%);
  }

  .hlab-lp__tools-block {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 22px;
  }

  .hlab-lp__tools-group {
    margin-top: 14px;
    padding: 16px;
    border-radius: 20px;
  }

  .hlab-lp__tool-card {
    padding: 16px;
  }
}

@media screen and (max-width: 760px) {
  .hlab-lp__section {
    padding: 34px 0;
  }

  .hlab-lp__section-head {
    margin-bottom: 18px;
  }

  .hlab-lp__materials {
    gap: 16px;
    padding: 22px 18px;
  }

  .hlab-lp__materials-visual {
    order: 0;
  }

  .hlab-lp__materials-visual img {
    width: min(160px, 52%);
  }

  .hlab-lp__tools-block {
    grid-column: auto;
    margin-top: 0;
    padding-top: 18px;
  }

  .hlab-lp__story-card--tool-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "list"
      "link";
    gap: 14px;
  }

  .hlab-lp__tool-intro-copy {
    grid-area: copy;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-visual {
    grid-area: visual;
    width: min(210px, 100%);
    min-height: 160px;
    margin: 0 auto;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__tool-intro-list {
    grid-area: list;
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .hlab-lp__tool-intro-link {
    grid-area: link;
  }
}

/* v6.6: SNS・検索流入から目的別導線へつなぐ一覧 */
.hlab-lp__purpose-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.hlab-lp__purpose-nav a {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(240, 138, 0, 0.22);
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.92);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.hlab-lp__purpose-nav a:hover,
.hlab-lp__purpose-nav a:focus-visible {
  border-color: rgba(240, 138, 0, 0.48);
  box-shadow: 0 8px 20px rgba(100, 67, 36, 0.08);
  transform: translateY(-1px);
}

.hlab-lp__purpose-nav strong {
  color: var(--hl-brown);
  font-size: 14px;
  line-height: 1.5;
}

.hlab-lp__purpose-nav span {
  color: var(--hl-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.55;
}

.hlab-lp__material-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hlab-lp__material-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(121, 87, 57, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  scroll-margin-top: 86px;
}

.hlab-lp__material-group > header {
  display: grid;
  gap: 2px;
  margin-bottom: 9px;
}

.hlab-lp__material-group > header strong {
  color: var(--hl-brown);
  font-size: 16px;
  font-weight: 900;
}

.hlab-lp__material-group > header span {
  color: var(--hl-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
}

.hlab-lp__material-links {
  display: grid;
  gap: 7px;
}

.hlab-lp__material-links a {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 249, 239, 0.82);
  text-decoration: none;
  scroll-margin-top: 86px;
}

.hlab-lp__material-links a:hover,
.hlab-lp__material-links a:focus-visible {
  background: rgba(255, 244, 225, 0.98);
}

.hlab-lp__material-links strong {
  color: var(--hl-brown);
  font-size: 13px;
  line-height: 1.5;
}

.hlab-lp__material-links span {
  color: var(--hl-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.hlab-lp__reference-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(121, 87, 57, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  text-decoration: none;
}

.hlab-lp__reference-link strong {
  color: var(--hl-brown);
}

.hlab-lp__reference-link span {
  color: var(--hl-orange-dark);
  font-size: 12px;
  font-weight: 850;
}

.hlab-lp__tools-group--record {
  border-color: rgba(240, 138, 0, 0.30);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.15), transparent 42%),
    rgba(255, 252, 244, 0.94);
}

.hlab-lp__tool-card--record {
  border-color: rgba(209, 123, 25, 0.27);
  background: linear-gradient(145deg, #fff4df, #fffaf0);
}

.hlab-lp__tool-card--record .hlab-lp__tool-direction {
  background: linear-gradient(135deg, #b86522, #e18a20);
}

.hlab-lp__tool-cards .hlab-lp__tool-card--bulk {
  margin-top: 0;
}

.hlab-lp__tool-related-link {
  margin: 11px 2px 0;
  font-size: 12px;
  font-weight: 850;
}

.hlab-lp__tool-related-link a {
  color: var(--hl-orange-dark);
  text-underline-offset: 3px;
}

.hlab-lp__tools-group {
  scroll-margin-top: 86px;
}

@media screen and (max-width: 900px) {
  .hlab-lp__material-groups {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 980px) and (min-width: 621px) {
  .hlab-lp__purpose-nav,
  .hlab-lp__story-card--tool-intro .hlab-lp__tool-intro-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 620px) {
  .hlab-lp__purpose-nav {
    grid-template-columns: 1fr;
  }

  .hlab-lp__reference-link {
    display: grid;
  }
}

/* =========================================================
 * LP card density refinement v9.16
 * PCでは単独ツールカードを空き列のない全幅表示にし、
 * 資料3列の横幅を確保する。スマホの1列表示は維持する。
 * ======================================================= */
@media screen and (min-width: 761px) {
  .hlab-lp__tool-cards > .hlab-lp__tool-card:only-child {
    grid-column: 1 / -1;
  }

  .hlab-lp__tool-cards > .hlab-lp__tool-card:only-child p {
    max-width: 880px;
  }
}



/* =========================================================
 * LP PC information hierarchy v7.0
 * 順序は縦、同列の選択肢は横、重要度は大きさで示す。
 * PCでは文字を小さくせず、余白・カード高・縦積みを整理する。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp__hero {
    padding: 16px 0 20px;
  }

  .hlab-lp__hero-panel {
    grid-template-columns: minmax(0, 1.48fr) minmax(250px, 0.52fr);
    gap: 26px;
    min-height: 458px;
    padding: 32px 38px;
    border-radius: 30px;
    background-image:
      linear-gradient(
        90deg,
        rgba(255, 251, 245, 0.98) 0%,
        rgba(255, 251, 245, 0.95) 42%,
        rgba(255, 251, 245, 0.78) 62%,
        rgba(255, 251, 245, 0.30) 82%,
        rgba(255, 251, 245, 0.14) 100%
      ),
      var(--hlab-lp-hero-bg);
    background-position: center;
  }

  .hlab-lp__hero h1.hlab-lp__hero-purpose-title {
    max-width: 720px;
    margin-top: 10px;
    color: #452110;
    font-size: clamp(40px, 4.15vw, 52px);
    line-height: 1.20;
    letter-spacing: 0.01em;
  }

  .hlab-lp__hero h1 .hlab-lp__hero-title-small {
    margin-bottom: 4px;
  }

  .hlab-lp__hero-purpose-lead {
    max-width: 720px;
    margin-top: 14px;
    color: #57301d;
    font-size: 17px;
    line-height: 1.75;
    font-weight: 720;
  }

  .hlab-lp__hero-purpose-text {
    max-width: 720px;
    margin-top: 10px;
    color: #72513e;
    font-size: 14px;
    line-height: 1.72;
    font-weight: 620;
  }

  .hlab-lp__hero-membership-note {
    width: min(700px, 100%);
    margin-top: 10px;
    padding: 8px 11px;
    color: #65432f;
    background: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.62;
    font-weight: 720;
  }

  .hlab-lp__hero-actions {
    margin-top: 16px;
  }

  .hlab-lp__hero-status {
    width: min(680px, 100%);
    margin-top: 10px;
    padding: 7px 10px;
  }

  .hlab-lp__hero-visual > img {
    width: min(300px, 100%);
  }

  .hlab-lp__hero-bubble {
    width: min(292px, 96%);
    padding: 10px 13px;
    border-radius: 17px 17px 4px 17px;
  }

  .hlab-lp__hero-bubble strong {
    font-size: 13px;
  }

  .hlab-lp__quick-free {
    padding-bottom: 22px;
  }

  .hlab-lp__quick-free-panel {
    grid-template-columns: minmax(230px, 0.78fr) minmax(0, 3.25fr);
    gap: 12px 18px;
    padding: 14px 16px;
    border-radius: 20px;
  }

  .hlab-lp__quick-free-head h2 {
    font-size: 24px;
    white-space: nowrap;
  }

  .hlab-lp__quick-free-links {
    grid-template-columns: minmax(150px, 1.35fr) repeat(4, minmax(105px, 1fr));
    gap: 8px;
  }

  .hlab-lp__quick-free-link {
    min-height: 102px;
    padding: 10px 11px;
  }

  .hlab-lp__quick-free-link--featured {
    border-color: rgba(47, 133, 166, 0.34);
    background:
      radial-gradient(circle at 100% 0, rgba(76, 200, 204, 0.16), transparent 44%),
      #f5fdff;
  }

  .hlab-lp__quick-free-link--featured > span {
    background: #26779b;
  }

  .hlab-lp__quick-free-link--featured > strong {
    font-size: 16px;
  }

  .hlab-lp__quick-free-all {
    margin-top: -4px;
  }

  .hlab-lp__section {
    padding: 32px 0;
  }

  .hlab-lp__section--soft::before {
    inset: 8px max(12px, calc((100vw - 1180px) / 2 - 14px));
    border-radius: 32px;
  }

  #perspective > .hlab-lp__wrap,
  #member-value > .hlab-lp__wrap,
  #about > .hlab-lp__wrap,
  #target > .hlab-lp__wrap,
  #privacy-account > .hlab-lp__wrap,
  #flow > .hlab-lp__wrap,
  #faq > .hlab-lp__wrap {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.95fr);
    gap: 18px 26px;
    align-items: start;
  }

  #perspective .hlab-lp__section-head,
  #member-value .hlab-lp__section-head,
  #about .hlab-lp__section-head,
  #target .hlab-lp__section-head,
  #privacy-account .hlab-lp__section-head,
  #flow .hlab-lp__section-head,
  #faq .hlab-lp__section-head {
    width: auto;
    margin: 0;
  }

  #perspective .hlab-lp__section-head h2,
  #member-value .hlab-lp__section-head h2,
  #about .hlab-lp__section-head h2,
  #target .hlab-lp__section-head h2,
  #privacy-account .hlab-lp__section-head h2,
  #flow .hlab-lp__section-head h2,
  #faq .hlab-lp__section-head h2 {
    font-size: clamp(27px, 2.55vw, 34px);
    line-height: 1.38;
  }

  #perspective .hlab-lp__section-head p,
  #member-value .hlab-lp__section-head p,
  #about .hlab-lp__section-head p,
  #target .hlab-lp__section-head p,
  #privacy-account .hlab-lp__section-head p {
    font-size: 14px;
    line-height: 1.78;
  }

  #perspective .hlab-lp__three-grid,
  #member-value .hlab-lp__three-grid,
  #about .hlab-lp__three-grid,
  #privacy-account .hlab-lp__three-grid,
  #target .hlab-lp__four-grid,
  #flow .hlab-lp__flow-grid,
  #faq .hlab-lp__faq {
    min-width: 0;
  }

  #member-value .hlab-lp__request-box,
  #privacy-account .hlab-lp__request-box {
    grid-column: 2;
    margin-top: 0;
  }

  .hlab-lp__number-card,
  .hlab-lp__feature-card,
  .hlab-lp__target-card,
  .hlab-lp__flow-grid article {
    padding: 17px 18px;
    border-radius: 20px;
  }

  .hlab-lp__number-card {
    min-height: 210px;
  }

  .hlab-lp__card-illustration {
    width: 74px;
    height: 74px;
    margin-bottom: 8px;
  }

  .hlab-lp__feature-card > img {
    width: 78px;
    height: 78px;
    margin-bottom: 8px;
  }

  .hlab-lp__feature-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 9px;
    border-radius: 21px;
    font-size: 28px;
  }

  .hlab-lp__number-card h3,
  .hlab-lp__feature-card h3,
  .hlab-lp__target-card h3,
  .hlab-lp__flow-grid h3 {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.45;
  }

  .hlab-lp__number-card p,
  .hlab-lp__feature-card p,
  .hlab-lp__target-card p,
  .hlab-lp__flow-grid p {
    font-size: 14px;
    line-height: 1.68;
  }

  #target .hlab-lp__four-grid,
  #flow .hlab-lp__flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #target .hlab-lp__target-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 12px;
    min-height: 0;
    align-content: start;
  }

  #target .hlab-lp__target-card > img {
    grid-row: 1 / 3;
    width: 62px;
    height: 62px;
    margin: 0;
  }

  #flow .hlab-lp__flow-grid article {
    min-height: 156px;
    padding-right: 74px;
  }

  #flow .hlab-lp__flow-grid article > span {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  #flow .hlab-lp__flow-icon {
    top: 14px;
    right: 13px;
    width: 54px;
    height: 54px;
  }

  #faq .hlab-lp__faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }

  #faq .hlab-lp__faq details {
    align-self: start;
    border-radius: 16px;
  }

  #faq .hlab-lp__faq summary {
    min-height: 58px;
    padding: 14px 42px 14px 16px;
    line-height: 1.55;
  }

  #faq .hlab-lp__faq details p {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 1.72;
  }

  .hlab-lp__story-card,
  .hlab-lp__materials {
    border-radius: 24px;
  }

  .hlab-lp__story-card {
    padding: 24px 27px;
  }

  .hlab-lp__story-card--tool-intro {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px 20px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-visual {
    min-height: 138px;
  }

  .hlab-lp__story-card--tool-intro .hlab-lp__story-lion {
    width: 126px;
  }

  .hlab-lp__materials {
    grid-template-columns: minmax(0, 1fr) 142px;
    gap: 14px 18px;
    padding: 24px 27px;
  }

  .hlab-lp__materials-visual img {
    width: min(138px, 100%);
  }

  .hlab-lp__material-group {
    padding: 12px;
  }

  .hlab-lp__material-links span,
  .hlab-lp__material-group > header span,
  .hlab-lp__purpose-nav span {
    font-size: 12px;
  }

  .hlab-lp__tools-block {
    padding-top: 18px;
  }

  .hlab-lp__tools-group {
    margin-top: 11px;
    padding: 14px;
  }

  .hlab-lp__tool-card {
    padding: 14px 15px;
  }

  .hlab-lp__tool-card h4 {
    margin: 7px 0 4px;
  }

  .hlab-lp__monitor-panel {
    width: min(1080px, 100%);
    padding: 28px 30px;
    border-radius: 28px;
  }

  .hlab-lp__monitor-head h2 {
    font-size: clamp(30px, 3.3vw, 40px);
  }

  .hlab-lp__monitor-terms {
    gap: 10px;
    margin-top: 18px;
  }

  .hlab-lp__monitor-terms article {
    padding: 16px;
    border-radius: 18px;
  }

  .hlab-lp__monitor-audience {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 20px;
  }

  .hlab-lp__monitor-audience h3 {
    margin-bottom: 9px;
    font-size: 21px;
  }

  .hlab-lp__monitor-role {
    margin-top: 13px;
    padding: 13px 16px;
  }

  .hlab-lp__monitor-actions {
    margin-top: 16px;
  }

  .hlab-lp__operator {
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 24px;
  }

  .hlab-lp__operator-badge {
    min-height: 145px;
    padding: 16px;
  }

  .hlab-lp__operator-badge strong {
    font-size: 24px;
  }

  .hlab-lp__operator .hlab-lp__section-head {
    margin-bottom: 12px;
  }

  .hlab-lp__operator p {
    margin-bottom: 8px;
  }

  .hlab-lp__operator-note {
    padding: 11px 14px;
  }

  .hlab-lp__price-card {
    width: min(1040px, 100%);
    padding: 26px 32px;
    border-radius: 28px;
  }

  .hlab-lp__price-main {
    margin: 10px 0;
  }

  .hlab-lp__price-main strong {
    font-size: 64px;
  }

  .hlab-lp__price-card > p {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .hlab-lp__price-terms {
    gap: 8px;
  }

  .hlab-lp__price-character {
    width: 94px;
  }

  .hlab-lp__final {
    padding: 34px 0 60px;
  }

  .hlab-lp__final-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 24px;
    padding: 26px 30px;
    border-radius: 28px;
  }

  .hlab-lp__final-card > img {
    width: 140px;
  }

  .hlab-lp__footer {
    padding: 30px 0 64px;
  }
}

@media screen and (max-width: 980px) {
  .hlab-lp__quick-free-link--featured {
    grid-column: 1 / -1;
    border-color: rgba(47, 133, 166, 0.34);
    background:
      radial-gradient(circle at 100% 0, rgba(76, 200, 204, 0.16), transparent 44%),
      #f5fdff;
  }

  .hlab-lp__quick-free-link--featured > span {
    background: #26779b;
  }
}

/* =========================================================
 * LP hero character visibility v7.2
 * PCではキャラクターと説明吹き出しを重ねず、右カラム内で
 * 上下に役割分離して全身が見える状態を優先する。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp__hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .hlab-lp__hero-visual > img {
    position: relative;
    z-index: 2;
    width: min(300px, 100%);
    flex: 0 0 auto;
  }

  .hlab-lp__hero-bubble {
    position: relative;
    z-index: 3;
    right: auto;
    bottom: auto;
    width: min(278px, 100%);
    margin-top: 2px;
    padding: 9px 12px;
    border-radius: 16px 16px 4px 16px;
  }

  .hlab-lp__hero-bubble strong {
    font-size: 12px;
    line-height: 1.45;
  }

  .hlab-lp__hero-bubble span {
    font-size: 10.5px;
    line-height: 1.55;
  }
}



/* =========================================================
 * LP middle-page visual hierarchy v7.3
 * ファーストビュー以降は「カードを並べ続ける」見え方を避け、
 * セクション単位のまとまり・主従・一覧性を優先する。
 * PCのみ。スマホの縦構成は変更しない。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 中盤はセクションごとに役割が切り替わる程度の間隔へ */
  #perspective,
  #member-value,
  #about,
  #target,
  #tool-intro,
  #contents {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  /* 考え方：3枚の独立カードではなく、1つのまとまりの中の3視点として見せる */
  #perspective > .hlab-lp__wrap {
    grid-template-columns: minmax(340px, 0.94fr) minmax(0, 2.06fr);
    gap: 24px 30px;
    align-items: center;
  }

  #perspective .hlab-lp__three-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 87, 57, 0.13);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(74, 36, 20, 0.045);
  }

  #perspective .hlab-lp__number-card {
    min-height: 184px;
    padding: 18px 20px;
    border: 0;
    border-left: 1px solid rgba(121, 87, 57, 0.11);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #perspective .hlab-lp__number-card:first-child {
    border-left: 0;
  }

  #perspective .hlab-lp__card-illustration {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
  }

  #perspective .hlab-lp__number-card h3 {
    font-size: 16px;
  }

  #perspective .hlab-lp__number-card p {
    font-size: 13.5px;
    line-height: 1.7;
  }

  /* 会員価値：LP中盤の主役。外側を1つの大きな面として扱う */
  #member-value > .hlab-lp__wrap {
    grid-template-columns: minmax(330px, 0.9fr) minmax(0, 2.1fr);
    gap: 18px 28px;
    padding: 26px 28px;
    border: 1px solid rgba(240, 138, 0, 0.23);
    border-radius: 28px;
    background:
      radial-gradient(circle at 100% 0, rgba(255, 191, 47, 0.09), transparent 34%),
      rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 30px rgba(74, 36, 20, 0.055);
  }

  #member-value .hlab-lp__three-grid {
    gap: 10px;
  }

  #member-value .hlab-lp__number-card {
    min-height: 184px;
    padding: 17px 18px;
    border-radius: 18px;
    box-shadow: none;
  }

  #member-value .hlab-lp__card-illustration {
    width: 58px;
    height: 58px;
    margin-bottom: 5px;
  }

  #member-value .hlab-lp__number-card h3 {
    font-size: 16px;
  }

  #member-value .hlab-lp__number-card p {
    font-size: 13.5px;
    line-height: 1.68;
  }

  #member-value .hlab-lp__request-box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 10px 16px;
    align-items: center;
    margin-top: 2px;
    padding: 12px 2px 0;
    border: 0;
    border-top: 1px solid rgba(121, 87, 57, 0.13);
    border-radius: 0;
    background: transparent;
  }

  #member-value .hlab-lp__request-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
  }

  #member-value .hlab-lp__request-box .hlab-lp__text-link {
    white-space: nowrap;
  }

  /* コミュニティ：会員価値の補助。小さな横長カードにして主役より弱く見せる */
  #about > .hlab-lp__wrap {
    grid-template-columns: minmax(330px, 0.9fr) minmax(0, 2.1fr);
    gap: 20px 28px;
    align-items: center;
  }

  #about .hlab-lp__section-head h2 {
    font-size: clamp(25px, 2.25vw, 31px);
  }

  #about .hlab-lp__three-grid {
    gap: 9px;
  }

  #about .hlab-lp__feature-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 11px;
    min-height: 132px;
    padding: 14px 15px;
    text-align: left;
    border-color: rgba(121, 87, 57, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
  }

  #about .hlab-lp__feature-card > img {
    grid-row: 1 / 3;
    width: 54px;
    height: 54px;
    margin: 0;
  }

  #about .hlab-lp__feature-card h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
  }

  #about .hlab-lp__feature-card p {
    font-size: 12.5px;
    line-height: 1.65;
  }

  /* 「利用する人」と「やりたいこと」を1つの探索ブロックとして見せる */
  #target {
    padding-top: 28px;
    padding-bottom: 0;
  }

  #target > .hlab-lp__wrap {
    grid-template-columns: minmax(330px, 0.9fr) minmax(0, 2.1fr);
    gap: 18px 28px;
    padding: 26px 28px 20px;
    border: 1px solid rgba(240, 138, 0, 0.18);
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    background:
      radial-gradient(circle at 0 0, rgba(255, 191, 47, 0.09), transparent 30%),
      rgba(255, 250, 242, 0.84);
  }

  #target .hlab-lp__section-head h2 {
    font-size: clamp(26px, 2.3vw, 31px);
  }

  #target .hlab-lp__four-grid {
    gap: 8px;
  }

  #target .hlab-lp__target-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 12px 14px;
    border-color: rgba(121, 87, 57, 0.11);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: none;
  }

  #target .hlab-lp__target-card > img {
    width: 48px;
    height: 48px;
  }

  #target .hlab-lp__target-card h3 {
    font-size: 15px;
    line-height: 1.45;
  }

  #target .hlab-lp__target-card p {
    font-size: 12.5px;
    line-height: 1.6;
  }

  #tool-intro {
    padding-top: 0;
    padding-bottom: 28px;
  }

  #tool-intro.hlab-lp__section--soft::before {
    display: none;
  }

  #tool-intro > .hlab-lp__wrap {
    padding: 0 28px 26px;
    border: 1px solid rgba(240, 138, 0, 0.18);
    border-top: 0;
    border-radius: 0 0 30px 30px;
    background: rgba(255, 250, 242, 0.84);
  }

  #tool-intro .hlab-lp__story-card--tool-intro {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px 18px;
    padding: 20px 22px;
    border: 1px solid rgba(121, 87, 57, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: none;
  }

  #tool-intro .hlab-lp__tool-intro-copy h2 {
    margin-top: 4px;
    font-size: clamp(27px, 2.55vw, 34px);
  }

  #tool-intro .hlab-lp__tool-intro-copy p {
    max-width: 880px;
    font-size: 14px;
    line-height: 1.75;
  }

  #tool-intro .hlab-lp__story-card--tool-intro .hlab-lp__story-visual {
    min-height: 104px;
  }

  #tool-intro .hlab-lp__story-card--tool-intro .hlab-lp__story-lion {
    width: 100px;
  }

  #tool-intro .hlab-lp__story-card--tool-intro .hlab-lp__story-star {
    width: 38px;
  }

  #tool-intro .hlab-lp__story-card--tool-intro .hlab-lp__story-pencil,
  #tool-intro .hlab-lp__story-card--tool-intro .hlab-lp__story-mug {
    width: 34px;
  }

  #tool-intro .hlab-lp__purpose-nav {
    gap: 7px 8px;
    margin-bottom: 8px;
  }

  #tool-intro .hlab-lp__purpose-nav a {
    min-height: 66px;
    padding: 9px 11px 9px 13px;
    border: 0;
    border-left: 3px solid rgba(240, 138, 0, 0.48);
    border-radius: 9px;
    background: rgba(255, 249, 239, 0.78);
    box-shadow: none;
  }

  #tool-intro .hlab-lp__purpose-nav a:hover,
  #tool-intro .hlab-lp__purpose-nav a:focus-visible {
    border-left-color: var(--hl-orange);
    background: rgba(255, 244, 225, 0.98);
    box-shadow: none;
    transform: translateY(-1px);
  }

  #tool-intro .hlab-lp__purpose-nav strong {
    font-size: 13.5px;
  }

  #tool-intro .hlab-lp__purpose-nav span {
    font-size: 11.5px;
  }

  /* 資料一覧：外側の大カードを主役にし、内部の3区分は1つの分割パネルとして扱う */
  #contents {
    padding-top: 28px;
  }

  #contents .hlab-lp__materials {
    padding: 26px 28px;
    border-radius: 28px;
  }

  #contents .hlab-lp__materials-intro .hlab-lp__section-head h2 {
    font-size: clamp(28px, 2.7vw, 36px);
  }

  #contents .hlab-lp__material-groups {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 87, 57, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
  }

  #contents .hlab-lp__material-group {
    padding: 12px 13px;
    border: 0;
    border-left: 1px solid rgba(121, 87, 57, 0.1);
    border-radius: 0;
    background: transparent;
  }

  #contents .hlab-lp__material-group:first-child {
    border-left: 0;
  }

  #contents .hlab-lp__material-links a {
    padding: 8px 9px;
    background: rgba(255, 249, 239, 0.72);
  }

  #contents .hlab-lp__tools-group {
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid rgba(121, 87, 57, 0.12);
    border-radius: 0;
    background: transparent;
  }

  #contents .hlab-lp__tools-group:first-of-type {
    border-top: 0;
  }

  #contents .hlab-lp__tools-group-head {
    padding: 0 2px;
  }

  #contents .hlab-lp__tool-card {
    box-shadow: none;
  }

  /* FAQは質問カードを主役にし、左見出しの空白感を抑える */
  #faq > .hlab-lp__wrap {
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 2.28fr);
    gap: 18px 30px;
  }

  #faq .hlab-lp__section-head h2 {
    font-size: clamp(28px, 2.5vw, 34px);
  }
}


/* =========================================================
 * LP visual polish v7.4
 * 情報構造は変えず、PC中盤以降のデザイン文法を統一する。
 * 「まとまり」「順序」「補助」を見た目で区別し、
 * 不要なカード反復と空白を抑える。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 共通：左見出しの窮屈さを少し解消し、右側との重心をそろえる */
  #perspective > .hlab-lp__wrap,
  #member-value > .hlab-lp__wrap,
  #about > .hlab-lp__wrap,
  #target > .hlab-lp__wrap {
    grid-template-columns: minmax(370px, 0.98fr) minmax(0, 1.92fr);
    column-gap: 30px;
  }

  #perspective .hlab-lp__section-head h2,
  #member-value .hlab-lp__section-head h2,
  #about .hlab-lp__section-head h2,
  #target .hlab-lp__section-head h2 {
    max-width: 390px;
  }

  /* A WIDER VIEW：一つの分割パネルとして静かに見せる */
  #perspective .hlab-lp__three-grid {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(74, 36, 20, 0.035);
  }

  #perspective .hlab-lp__number-card {
    min-height: 176px;
    padding: 17px 19px;
  }

  /* MEMBER VALUE：下部案内をセクション全体の締め帯にする */
  #member-value .hlab-lp__request-box {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.55fr) max-content;
    gap: 10px 22px;
    align-items: center;
    margin-top: 4px;
    padding: 15px 18px;
    border: 1px solid rgba(240, 138, 0, 0.15);
    border-radius: 16px;
    background: rgba(255, 249, 239, 0.72);
  }

  #member-value .hlab-lp__request-box strong {
    font-size: 15px;
    line-height: 1.55;
  }

  #member-value .hlab-lp__request-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.68;
  }

  #member-value .hlab-lp__request-box .hlab-lp__text-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    white-space: nowrap;
  }

  /* COMMUNITY：3枚のカードではなく、3つの相談経路を一つの面にまとめる */
  #about .hlab-lp__three-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 87, 57, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 8px 20px rgba(74, 36, 20, 0.03);
  }

  #about .hlab-lp__feature-card {
    display: block;
    min-height: 202px;
    padding: 17px 18px 18px;
    border: 0;
    border-left: 1px solid rgba(121, 87, 57, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #about .hlab-lp__feature-card:first-child {
    border-left: 0;
  }

  #about .hlab-lp__feature-card > img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 0 8px;
  }

  #about .hlab-lp__feature-card h3 {
    margin: 0 0 6px;
    font-size: 15.5px;
    line-height: 1.5;
  }

  #about .hlab-lp__feature-card p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.68;
  }

  /* FOR YOU：4つの対象を一つの2×2選択パネルとして見せる */
  #target .hlab-lp__four-grid {
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(121, 87, 57, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
  }

  #target .hlab-lp__target-card {
    min-height: 126px;
    padding: 14px 16px;
    border: 0;
    border-right: 1px solid rgba(121, 87, 57, 0.1);
    border-bottom: 1px solid rgba(121, 87, 57, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #target .hlab-lp__target-card:nth-child(2n) {
    border-right: 0;
  }

  #target .hlab-lp__target-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  #target .hlab-lp__target-card > img {
    width: 50px;
    height: 50px;
  }

  #target .hlab-lp__target-card h3 {
    font-size: 15px;
    line-height: 1.48;
  }

  #target .hlab-lp__target-card p {
    font-size: 12.6px;
    line-height: 1.62;
  }

  /* 入会後の流れ：順番を縦に追えるコンパクトなステップリスト */
  #flow > .hlab-lp__wrap {
    grid-template-columns: minmax(285px, 0.72fr) minmax(0, 2.28fr);
    gap: 18px 30px;
    align-items: start;
  }

  #flow .hlab-lp__section-head {
    padding-top: 4px;
  }

  #flow .hlab-lp__flow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(240, 138, 0, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
  }

  #flow .hlab-lp__flow-grid article {
    position: relative;
    display: grid;
    grid-template-columns: 42px 50px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    min-height: 0;
    padding: 13px 18px;
    border: 0;
    border-bottom: 1px solid rgba(121, 87, 57, 0.1);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #flow .hlab-lp__flow-grid article:last-child {
    border-bottom: 0;
  }

  #flow .hlab-lp__flow-grid article > span {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    margin: 0;
    align-self: center;
    font-size: 12px;
  }

  #flow .hlab-lp__flow-icon {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    margin: 0;
    align-self: center;
  }

  #flow .hlab-lp__flow-grid h3 {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.48;
  }

  #flow .hlab-lp__flow-grid p {
    grid-column: 3;
    grid-row: 2;
    margin: 0;
    font-size: 12.8px;
    line-height: 1.62;
  }

  /* FAQ：質問は同列。見出しを上、質問群を下に置いて左の空白をなくす */
  #faq > .hlab-lp__wrap {
    display: block;
  }

  #faq .hlab-lp__section-head {
    width: 100%;
    margin: 0 0 18px;
  }

  #faq .hlab-lp__section-head h2 {
    margin-bottom: 0;
    font-size: clamp(28px, 2.5vw, 34px);
  }

  #faq .hlab-lp__faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    width: 100%;
  }

  #faq .hlab-lp__faq details {
    width: 100%;
  }

  #faq .hlab-lp__faq summary {
    min-height: 56px;
    padding: 13px 42px 13px 16px;
  }
}


/* =========================================================
 * LP balance & surface alignment v7.5
 * PCでは、同じ階層の外側背景面の横幅をそろえ、
 * Flow / FAQ は独立ブロックとして中央見出しに統一する。
 * 幅の差は意味のある主役カードだけに限定する。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 外側の淡色背景面はコンテンツ基準幅 1120px にそろえる */
  .hlab-lp__section--soft::before {
    inset-left: auto;
    inset-right: auto;
    left: 50%;
    right: auto;
    width: min(1120px, calc(100% - 32px));
    transform: translateX(-50%);
  }

  /* 入会後の流れ：独立した順序ブロックなので見出しを上・中央へ */
  #flow > .hlab-lp__wrap {
    display: block;
  }

  #flow .hlab-lp__section-head {
    width: 100%;
    max-width: none;
    margin: 0 auto 18px;
    padding-top: 0;
    text-align: center;
  }

  #flow .hlab-lp__section-head .hlab-lp__eyebrow {
    justify-content: center;
  }

  #flow .hlab-lp__section-head h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  #flow .hlab-lp__flow-grid {
    width: min(1040px, 100%);
    margin: 0 auto;
  }

  /* FAQ：質問群全体のタイトルとして中央に置く */
  #faq .hlab-lp__section-head {
    width: 100%;
    max-width: none;
    margin: 0 auto 20px;
    text-align: center;
  }

  #faq .hlab-lp__section-head .hlab-lp__eyebrow {
    justify-content: center;
  }

  #faq .hlab-lp__section-head h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  #faq .hlab-lp__faq {
    width: min(1120px, 100%);
    margin: 0 auto;
  }

  /* 主役カード以外の大きな外箱は、基本的にラップ幅いっぱいへ */
  .hlab-lp__monitor-panel,
  .hlab-lp__price-card {
    width: 100%;
  }
}

/* =========================================================
 * LP alignment finishing v7.6
 * PCの情報構造は維持したまま、同列要素の基準線と
 * カード内部の縦横位置を統一する仕上げ調整。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 左説明＋右パネル型は、左右ブロックの重心を縦中央でそろえる */
  #perspective > .hlab-lp__wrap,
  #member-value > .hlab-lp__wrap,
  #about > .hlab-lp__wrap,
  #target > .hlab-lp__wrap,
  #privacy-account > .hlab-lp__wrap {
    align-items: center;
  }

  #perspective .hlab-lp__section-head,
  #member-value .hlab-lp__section-head,
  #about .hlab-lp__section-head,
  #target .hlab-lp__section-head,
  #privacy-account .hlab-lp__section-head {
    align-self: center;
  }

  /* A WIDER VIEW / MEMBER VALUE：アイコン・見出し・本文の開始線を統一 */
  #perspective .hlab-lp__number-card,
  #member-value .hlab-lp__number-card {
    display: grid;
    grid-template-rows: 58px 52px minmax(0, 1fr);
    align-content: start;
    min-height: 0;
  }

  #perspective .hlab-lp__card-illustration,
  #member-value .hlab-lp__card-illustration {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  #perspective .hlab-lp__number-card h3,
  #member-value .hlab-lp__number-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin: 0;
    text-align: center;
  }

  #perspective .hlab-lp__number-card p,
  #member-value .hlab-lp__number-card p {
    align-self: start;
    margin: 5px 0 0;
    text-align: left;
  }

  /* MEMBER VALUE：締め帯の3要素を同じ縦軸にそろえる */
  #member-value .hlab-lp__request-box {
    min-height: 82px;
    padding: 13px 18px;
  }

  #member-value .hlab-lp__request-box > strong,
  #member-value .hlab-lp__request-box > p {
    align-self: center;
  }

  #member-value .hlab-lp__request-box > p:first-of-type {
    margin: 0;
  }

  #member-value .hlab-lp__request-box > p:last-child {
    justify-self: end;
    margin: 0;
  }

  #member-value .hlab-lp__request-box .hlab-lp__text-link {
    justify-content: center;
  }

  /* COMMUNITY：3つの相談経路を同じ基準線で見せる */
  #about .hlab-lp__feature-card {
    display: grid;
    grid-template-rows: 58px 54px minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    padding: 18px 18px 20px;
  }

  #about .hlab-lp__feature-card > img {
    align-self: center;
    justify-self: center;
    width: 50px;
    height: 50px;
    margin: 0;
  }

  #about .hlab-lp__feature-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin: 0;
    text-align: center;
  }

  #about .hlab-lp__feature-card p {
    align-self: start;
    margin: 5px 0 0;
    text-align: left;
  }

  /* FOR YOU：アイコンと文章ブロックをカード中央でそろえる */
  #target .hlab-lp__target-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-content: center;
    min-height: 138px;
    padding: 15px 17px;
  }

  #target .hlab-lp__target-card > img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  #target .hlab-lp__target-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
  }

  #target .hlab-lp__target-card p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  /* PRIVACY & ACCOUNT：3カードも同じアイコン・見出し基準線へ */
  #privacy-account .hlab-lp__feature-card {
    display: grid;
    grid-template-rows: 82px 66px minmax(0, 1fr);
    align-content: start;
    min-height: 0;
  }

  #privacy-account .hlab-lp__feature-icon {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  #privacy-account .hlab-lp__feature-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    margin: 0;
    text-align: center;
  }

  #privacy-account .hlab-lp__feature-card p {
    align-self: start;
    margin: 6px 0 0;
    text-align: left;
  }

  /* 分割パネル自体も右領域の中央に置く */
  #perspective .hlab-lp__three-grid,
  #member-value .hlab-lp__three-grid,
  #about .hlab-lp__three-grid,
  #target .hlab-lp__four-grid,
  #privacy-account .hlab-lp__three-grid {
    align-self: center;
  }
}



/* =========================================================
 * LP whitespace & content gutter finishing v7.7
 * PCでは、外側背景面と本文を同じ左端に置かず、内側余白を
 * デザイン要素として使う。A WIDER VIEW は右3分割パネルを
 * 縦方向に広げ、余白を内部へ持たせて左右の重心を整える。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* ファーストビュー以降：外枠と本文の間に共通の内側余白をつくる */
  .hlab-lp__section > .hlab-lp__wrap {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* 既に面として成立しているセクションも同じ32px基準へ統一 */
  #member-value > .hlab-lp__wrap,
  #target > .hlab-lp__wrap {
    padding-left: 32px;
    padding-right: 32px;
  }

  #tool-intro > .hlab-lp__wrap {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* 左説明＋右パネル型：左右の間にも少し余裕を持たせる */
  #perspective > .hlab-lp__wrap,
  #member-value > .hlab-lp__wrap,
  #about > .hlab-lp__wrap,
  #target > .hlab-lp__wrap,
  #privacy-account > .hlab-lp__wrap {
    column-gap: 34px;
  }

  /* A WIDER VIEW：右3分割を縦に広げ、余白をカード内部へ移す */
  #perspective .hlab-lp__three-grid {
    min-height: 300px;
  }

  #perspective .hlab-lp__number-card {
    height: 100%;
    min-height: 300px;
    grid-template-rows: 68px 58px auto;
    align-content: center;
    padding: 26px 24px;
  }

  #perspective .hlab-lp__card-illustration {
    width: 62px;
    height: 62px;
  }

  #perspective .hlab-lp__number-card h3 {
    min-height: 58px;
  }

  #perspective .hlab-lp__number-card p {
    margin-top: 8px;
  }

  /* 同列カードは「詰める」より、一定の内側余白を持たせて整える */
  #member-value .hlab-lp__number-card {
    padding-left: 22px;
    padding-right: 22px;
  }

  #about .hlab-lp__feature-card {
    padding-left: 22px;
    padding-right: 22px;
  }

  #target .hlab-lp__target-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  #privacy-account .hlab-lp__feature-card {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* 中央見出し型は左右余白を確保したうえで中央軸を維持 */
  #flow .hlab-lp__section-head,
  #faq .hlab-lp__section-head {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =========================================================
 * LP final grid alignment v7.8
 * PC後半の主要コンテンツ面は同じ1040px基準へそろえる。
 * 外側の大セクションは1120px基準を維持し、内側の実体カード
 * だけを共通幅にする。大小差は意味のある優先順位に限定する。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 後半で繰り返す主要カード面は同じ左右基準線へ */
  #flow .hlab-lp__flow-grid,
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public,
  .hlab-lp__section--soft > .hlab-lp__wrap > .hlab-lp__story-card:not(.hlab-lp__story-card--tool-intro),
  #faq .hlab-lp__faq,
  .hlab-lp__final-card {
    width: min(1040px, 100%);
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* PWAカードは専用CSSの1120px指定よりLP側の共通基準を優先 */
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* STORYは外側の淡色面の中央に置き、左右端を他カードと一致 */
  .hlab-lp__section--soft > .hlab-lp__wrap > .hlab-lp__story-card:not(.hlab-lp__story-card--tool-intro) {
    justify-self: center;
  }

  /* FAQが奇数件のとき、最後だけ左に残さず同じカード幅で中央配置 */
  #faq .hlab-lp__faq details:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 10px) / 2);
    justify-self: center;
  }

  /* 最終CTAも同じコンテンツ軸にそろえる */
  .hlab-lp__final > .hlab-lp__wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* =========================================================
 * LP overflow & full-width surface finishing v7.9
 * COMMUNITYの本文量に応じて3分割パネルが自然に伸びるようにし、
 * 後半の主要背景カードを1120px共通左右線へ統一する。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* COMMUNITY：固定的な高さをやめ、最長本文に合わせて3列を同じ高さで伸ばす */
  #about .hlab-lp__three-grid {
    align-items: stretch;
    overflow: hidden;
  }

  #about .hlab-lp__feature-card {
    height: auto;
    min-height: 300px;
    grid-template-rows: 58px auto auto;
    align-content: start;
    padding-top: 22px;
    padding-bottom: 24px;
    overflow: visible;
  }

  #about .hlab-lp__feature-card h3 {
    min-height: 0;
    margin-top: 4px;
    margin-bottom: 8px;
  }

  #about .hlab-lp__feature-card p {
    min-height: 0;
    margin-top: 0;
  }

  /* 3分割の外枠側で角丸を管理するため、本文は切らない */
  #about .hlab-lp__feature-card:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  #about .hlab-lp__feature-card:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  /* 後半の独立ブロックはラップそのものの1120px左右線を使う */
  #flow > .hlab-lp__wrap,
  #faq > .hlab-lp__wrap,
  .hlab-lp__section--soft > .hlab-lp__wrap:has(> .hlab-lp__story-card:not(.hlab-lp__story-card--tool-intro)),
  .hlab-lp__final > .hlab-lp__wrap {
    padding-left: 0;
    padding-right: 0;
  }

  #flow .hlab-lp__flow-grid,
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public,
  .hlab-lp__section--soft > .hlab-lp__wrap > .hlab-lp__story-card:not(.hlab-lp__story-card--tool-intro),
  #faq .hlab-lp__faq,
  .hlab-lp__final-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* FAQの奇数最終行は、2列カード幅を維持したまま中央へ */
  #faq .hlab-lp__faq details:last-child:nth-child(odd) {
    width: calc((100% - 10px) / 2);
  }
}

/* =========================================================
 * COMMUNITY card internal stack finishing v8.0
 * 旧PCレイアウトの2列grid指定を完全に解除し、
 * アイコン → 見出し → 本文の縦順序を3列で統一する。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #about .hlab-lp__three-grid {
    align-items: stretch;
  }

  #about .hlab-lp__feature-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 58px 76px auto;
    row-gap: 8px;
    height: auto;
    min-height: 0;
    align-content: start;
    padding: 24px 22px 26px;
  }

  #about .hlab-lp__feature-card > img {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 50px;
    height: 50px;
    margin: 0;
  }

  #about .hlab-lp__feature-card h3 {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    text-align: center;
  }

  #about .hlab-lp__feature-card p {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    margin: 0;
    text-align: left;
  }
}

/* =========================================================
 * LP card structure normalization v8.7
 * HTML側のカード階層を次の3役に統一する。
 *   .hlab-lp__surface    = セクションを包む外枠カード
 *   .hlab-lp__card-group = 内側カードを並べるレイアウト容器
 *   .hlab-lp__inner-card = 実際の情報・選択・補足カード
 *
 * ここでは「どのセクションか」で背景を作り分けず、外枠カードの
 * 基本面とページ背景だけを共通化する。各内側カードの固有色や
 * ツール固有色は既存仕様を維持し、今後は inner-card 系クラスを
 * 起点に一括調整できる構造とする。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp {
    --hlab-lp-page-surface: #fff7df;
    --hlab-lp-outer-bg: rgba(255, 251, 245, 0.94);
    --hlab-lp-outer-border: rgba(216, 111, 0, 0.22);
    --hlab-lp-outer-shadow: 0 8px 22px rgba(74, 36, 20, 0.045);
    --hlab-lp-inner-bg: rgba(255, 246, 235, 0.96);
    --hlab-lp-inner-border: rgba(216, 111, 0, 0.24);
    --hlab-lp-note-bg: rgba(255, 242, 225, 0.94);
  }

  /* カード外側のページ背景。暗くせず、明るい暖色でカードを分離する。 */
  .hlab-lp {
    background-color: var(--hlab-lp-page-surface);
    background-image:
      linear-gradient(rgba(255, 248, 224, 0.72), rgba(255, 248, 224, 0.72)),
      var(--hlab-lp-page-bg);
  }

  /* section--soft の疑似背景を「別の外枠カード」として使わない。 */
  .hlab-lp__section--soft::before {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 構造クラス自体の役割。レイアウト寸法は各セクション既存仕様を維持。 */
  .hlab-lp__surface,
  .hlab-lp__card-group,
  .hlab-lp__inner-card {
    box-sizing: border-box;
  }

  /* 外枠カードは、どのセクションでも同じ面・枠線・影を基準にする。 */
  .hlab-lp__quick-free-panel.hlab-lp__surface,
  #perspective > .hlab-lp__surface,
  #member-value > .hlab-lp__surface,
  #about > .hlab-lp__surface,
  #target > .hlab-lp__surface,
  #tool-intro .hlab-lp__story-card--tool-intro.hlab-lp__surface,
  #contents .hlab-lp__materials.hlab-lp__surface,
  #monitor .hlab-lp__monitor-panel.hlab-lp__surface,
  #operator .hlab-lp__operator.hlab-lp__surface,
  #privacy-account > .hlab-lp__surface,
  #price .hlab-lp__price-card.hlab-lp__surface,
  #flow > .hlab-lp__surface,
  .hlab-lp__section--soft .hlab-lp__story-card.hlab-lp__surface:not(.hlab-lp__story-card--tool-intro),
  #faq > .hlab-lp__surface,
  .hlab-lp__final-card.hlab-lp__surface {
    border: 1px solid var(--hlab-lp-outer-border);
    background-color: var(--hlab-lp-outer-bg);
    box-shadow: var(--hlab-lp-outer-shadow);
  }

  /* これまで外枠が無かった基本セクションにも、カードとして必要な内側余白を付与。 */
  #perspective > .hlab-lp__surface,
  #about > .hlab-lp__surface,
  #privacy-account > .hlab-lp__surface,
  #flow > .hlab-lp__surface,
  #faq > .hlab-lp__surface {
    padding-top: 28px;
    padding-bottom: 28px;
    border-radius: 28px;
  }

  /* すでに独自paddingを持つ外枠も角丸だけ共通基準へ寄せる。 */
  .hlab-lp__quick-free-panel.hlab-lp__surface,
  #member-value > .hlab-lp__surface,
  #target > .hlab-lp__surface,
  #tool-intro .hlab-lp__story-card--tool-intro.hlab-lp__surface,
  #contents .hlab-lp__materials.hlab-lp__surface,
  #monitor .hlab-lp__monitor-panel.hlab-lp__surface,
  #operator .hlab-lp__operator.hlab-lp__surface,
  #price .hlab-lp__price-card.hlab-lp__surface,
  .hlab-lp__section--soft .hlab-lp__story-card.hlab-lp__surface:not(.hlab-lp__story-card--tool-intro),
  .hlab-lp__final-card.hlab-lp__surface {
    border-radius: 28px;
  }

  /* 内側カードは現時点では固有デザインを維持する。
     共通変数だけを持たせ、次の色調整を1か所から行える状態にする。 */
  .hlab-lp__inner-card {
    --hlab-card-bg: var(--hlab-lp-inner-bg);
    --hlab-card-border: var(--hlab-lp-inner-border);
  }

  .hlab-lp__inner-card--note {
    --hlab-card-bg: var(--hlab-lp-note-bg);
  }

  /* 操作カードの認知は既存CTA・固有色を優先し、構造だけ統一する。 */
  .hlab-lp__inner-card--action {
    cursor: pointer;
  }

  /* FAQは外枠カード内のカード群として左右位置を揃える。 */
  #faq .hlab-lp__faq.hlab-lp__card-group {
    width: 100%;
  }
}


/* =========================================================
 * LP common surface geometry & tone finishing v8.8
 * v8.7で正規化した構造を起点に、PC表示の
 * ・外枠カードの左右基準線
 * ・外枠内の端余白
 * ・内側カード同士の間隔
 * ・外枠／内側／操作面の明るい濃淡
 * を共通値へ統一する。
 * セクション固有の意味色（実務ツール等）は維持する。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp {
    --hlab-lp-page-surface: #fff7df;
    --hlab-lp-outer-bg: rgba(255, 251, 244, 0.98);
    --hlab-lp-outer-border: rgba(221, 137, 46, 0.30);
    --hlab-lp-inner-bg: rgba(255, 245, 232, 0.97);
    --hlab-lp-inner-border: rgba(185, 112, 54, 0.26);
    --hlab-lp-action-bg: rgba(255, 241, 218, 0.98);
    --hlab-lp-action-border: rgba(240, 138, 0, 0.40);
    --hlab-lp-note-bg: rgba(255, 248, 236, 0.98);
    --hlab-lp-card-gap: 14px;
    --hlab-lp-surface-pad-x: 32px;
    --hlab-lp-surface-pad-y: 30px;
  }

  /* 1. セクション同士は接触させず、同じ縦リズムで分離する */
  .hlab-lp__section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* 2. 旧来のwrap側paddingを解除し、外枠カード自身が端余白を持つ */
  #perspective > .hlab-lp__wrap,
  #member-value > .hlab-lp__wrap,
  #about > .hlab-lp__wrap,
  #target > .hlab-lp__wrap,
  #tool-intro > .hlab-lp__wrap,
  #contents > .hlab-lp__wrap,
  #monitor > .hlab-lp__wrap,
  #operator > .hlab-lp__wrap,
  #privacy-account > .hlab-lp__wrap,
  #price > .hlab-lp__wrap,
  #flow > .hlab-lp__wrap,
  #faq > .hlab-lp__wrap,
  .hlab-lp__section--soft > .hlab-lp__wrap:has(> .hlab-lp__story-card:not(.hlab-lp__story-card--tool-intro)),
  .hlab-lp__final > .hlab-lp__wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* 3. 同階層の外枠カードは1120pxの同じ左右線・同じ端余白へ */
  .hlab-lp__surface:not(.hlab-lp__quick-free-panel) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: var(--hlab-lp-surface-pad-y) var(--hlab-lp-surface-pad-x);
    border: 1px solid var(--hlab-lp-outer-border);
    border-radius: 28px;
    background: var(--hlab-lp-outer-bg);
    box-shadow: 0 7px 20px rgba(74, 36, 20, 0.04);
  }

  /* PWAカードも後半の外枠カードと同じ左右基準へ */
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public {
    width: 100%;
    max-width: none;
    margin: 20px 0;
    border-color: var(--hlab-lp-outer-border);
    background-color: var(--hlab-lp-outer-bg);
  }

  /* 4. card-groupは「箱」ではなく配置専用。カード同士を適度に離す */
  .hlab-lp__card-group,
  #tool-intro .hlab-lp__purpose-nav,
  #contents .hlab-lp__material-groups,
  #contents .hlab-lp__material-links,
  .hlab-lp__price-terms {
    gap: var(--hlab-lp-card-gap);
  }

  .hlab-lp__card-group {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* 分割パネルの旧境界線・接続表現を解除 */
  #perspective .hlab-lp__three-grid,
  #member-value .hlab-lp__three-grid,
  #about .hlab-lp__three-grid,
  #target .hlab-lp__four-grid,
  #privacy-account .hlab-lp__three-grid,
  #flow .hlab-lp__flow-grid,
  #faq .hlab-lp__faq {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* 5. 一般の内側カードは、外枠より一段だけ濃い明色面へ */
  .hlab-lp__inner-card:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link) {
    border: 1px solid var(--hlab-lp-inner-border);
    border-radius: 18px;
    background: var(--hlab-lp-inner-bg);
    box-shadow: none;
  }

  /* 説明カードの旧「つながった角丸」を解除して全カード同じ輪郭へ */
  #perspective .hlab-lp__number-card,
  #member-value .hlab-lp__number-card,
  #about .hlab-lp__feature-card,
  #target .hlab-lp__target-card,
  #privacy-account .hlab-lp__feature-card,
  #flow .hlab-lp__flow-grid article {
    border-radius: 18px;
  }

  #about .hlab-lp__feature-card:first-child,
  #about .hlab-lp__feature-card:last-child {
    border-radius: 18px;
  }

  /* 操作できるカードは背景と枠を一段だけ強くする */
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link) {
    border-color: var(--hlab-lp-action-border);
    background: var(--hlab-lp-action-bg);
  }

  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):hover,
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):focus-visible,
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):focus-within {
    border-color: rgba(216, 111, 0, 0.58);
    background: #ffecd0;
    box-shadow: 0 6px 16px rgba(216, 111, 0, 0.07);
  }

  /* 補足カードは主操作より弱い明色にする */
  .hlab-lp__inner-card--note {
    border-color: rgba(185, 112, 54, 0.22) !important;
    background: var(--hlab-lp-note-bg) !important;
  }

  /* 6. 「はじめる／続ける／育てる」は3列を離し、それぞれ1枚の面として認識させる */
  #contents .hlab-lp__material-groups {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #contents .hlab-lp__material-group {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--hlab-lp-inner-border);
    border-radius: 18px;
    background: var(--hlab-lp-inner-bg);
  }

  #contents .hlab-lp__material-group + .hlab-lp__material-group {
    border-left: 1px solid var(--hlab-lp-inner-border);
  }

  #contents .hlab-lp__material-group > header {
    padding-bottom: 10px;
    border-bottom-color: rgba(185, 112, 54, 0.18);
  }

  #contents .hlab-lp__material-links {
    display: grid;
    gap: 8px;
    margin-top: 10px;
  }

  #contents .hlab-lp__material-links .hlab-lp__inner-card--action {
    background: rgba(255, 250, 243, 0.98);
  }

  /* 7. 目的から探す：9個の選択肢にもカード間余白を明確に */
  #tool-intro .hlab-lp__purpose-nav {
    column-gap: 12px;
    row-gap: 10px;
  }

  /* 8. FAQ最終奇数カードの中央配置は維持しつつ、他と同じgapを確保 */
  #faq .hlab-lp__faq {
    column-gap: 12px;
    row-gap: 10px;
  }

  #faq .hlab-lp__faq details:last-child:nth-child(odd) {
    width: calc((100% - 12px) / 2);
  }
}


/* =========================================================
 * LP surface geometry correction v8.9
 * v8.8で共通化した外枠カードが content-box のまま100%幅となり、
 * padding分だけ左右へ広がっていた箇所を修正する。
 * 外枠カードは1120px基準・中央配置・border-boxに統一し、
 * 内側カード群には共通の端余白とgapを確実に適用する。
 * 色・文言・スマホ表示は変更しない。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 外枠カード：ページ全体で同じ左右基準線 */
  .hlab-lp__surface:not(.hlab-lp__quick-free-panel) {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 外枠そのものがwrapになっているセクションも中央固定 */
  #perspective > .hlab-lp__surface,
  #member-value > .hlab-lp__surface,
  #about > .hlab-lp__surface,
  #target > .hlab-lp__surface,
  #privacy-account > .hlab-lp__surface,
  #flow > .hlab-lp__surface,
  #faq > .hlab-lp__surface {
    justify-self: center;
  }

  /* 内側カード群：外枠のpadding内からはみ出さない */
  #perspective .hlab-lp__three-grid,
  #member-value .hlab-lp__three-grid,
  #about .hlab-lp__three-grid,
  #target .hlab-lp__four-grid,
  #privacy-account .hlab-lp__three-grid,
  #flow .hlab-lp__flow-grid,
  #faq .hlab-lp__faq {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* 同列カードの間隔を明示して、接続して見える状態を防ぐ */
  #perspective .hlab-lp__three-grid,
  #member-value .hlab-lp__three-grid,
  #about .hlab-lp__three-grid,
  #privacy-account .hlab-lp__three-grid {
    gap: 14px;
  }

  #target .hlab-lp__four-grid {
    gap: 14px;
  }

  #flow .hlab-lp__flow-grid {
    row-gap: 10px;
  }

  #faq .hlab-lp__faq {
    column-gap: 12px;
    row-gap: 10px;
  }

  /* MEMBER VALUE の締め帯も外枠padding内に揃える */
  #member-value .hlab-lp__request-box,
  #privacy-account .hlab-lp__request-box {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* FIND WHAT YOU NEED / 資料・実務ツール等の独立面も1120px軸へ */
  #tool-intro .hlab-lp__story-card--tool-intro.hlab-lp__surface,
  #contents .hlab-lp__materials.hlab-lp__surface,
  #monitor .hlab-lp__monitor-panel.hlab-lp__surface,
  #operator .hlab-lp__operator.hlab-lp__surface,
  #price .hlab-lp__price-card.hlab-lp__surface,
  .hlab-lp__section--soft .hlab-lp__story-card.hlab-lp__surface:not(.hlab-lp__story-card--tool-intro),
  .hlab-lp__final-card.hlab-lp__surface {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  /* PWAカードも同じ左右線へ */
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  /* FAQ最終奇数カードは2列幅のまま中央 */
  #faq .hlab-lp__faq details:last-child:nth-child(odd) {
    width: calc((100% - 12px) / 2);
    justify-self: center;
  }
}


/* =========================================================
 * LP geometry authority v8.10
 * 色は変更せず、カード構造正規化後の配置だけを最終統一する。
 * ・wrap自身がsurfaceの外枠 = viewport基準1120px
 * ・wrap内にあるsurface     = 親wrapの100%幅
 * ・外枠内padding / card gap / セクション間隔を共通化
 * 旧ID別指定より詳細度を上げ、端余白の打ち消しを防ぐ。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp {
    --hlab-lp-geometry-pad-x: 34px;
    --hlab-lp-geometry-pad-y: 30px;
    --hlab-lp-geometry-gap: 16px;
  }

  /* A. wrap自身が外枠カード：左右基準線と内側余白を固定 */
  #perspective > .hlab-lp__wrap.hlab-lp__surface,
  #member-value > .hlab-lp__wrap.hlab-lp__surface,
  #about > .hlab-lp__wrap.hlab-lp__surface,
  #target > .hlab-lp__wrap.hlab-lp__surface,
  #privacy-account > .hlab-lp__wrap.hlab-lp__surface,
  #flow > .hlab-lp__wrap.hlab-lp__surface,
  #faq > .hlab-lp__wrap.hlab-lp__surface {
    box-sizing: border-box;
    width: calc(100% - 48px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--hlab-lp-geometry-pad-y) var(--hlab-lp-geometry-pad-x);
  }

  /* B. wrapの中にある外枠カード：二重に幅を縮めない */
  #tool-intro .hlab-lp__story-card--tool-intro.hlab-lp__surface,
  #contents .hlab-lp__materials.hlab-lp__surface,
  #monitor .hlab-lp__monitor-panel.hlab-lp__surface,
  #operator .hlab-lp__operator.hlab-lp__surface,
  #price .hlab-lp__price-card.hlab-lp__surface,
  .hlab-lp__section--soft > .hlab-lp__wrap > .hlab-lp__story-card.hlab-lp__surface:not(.hlab-lp__story-card--tool-intro),
  .hlab-lp__final > .hlab-lp__wrap > .hlab-lp__final-card.hlab-lp__surface,
  .hlab-lp > .hlab-wrap > .hlab-pwa-install-card.hlab-pwa-install-card--public {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* C. 左説明＋右カード型：外枠の内側で同じグリッド基準 */
  #perspective > .hlab-lp__wrap.hlab-lp__surface,
  #member-value > .hlab-lp__wrap.hlab-lp__surface,
  #about > .hlab-lp__wrap.hlab-lp__surface,
  #target > .hlab-lp__wrap.hlab-lp__surface,
  #privacy-account > .hlab-lp__wrap.hlab-lp__surface {
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.85fr);
    column-gap: 34px;
    row-gap: 18px;
    align-items: center;
  }

  #perspective > .hlab-lp__wrap.hlab-lp__surface > .hlab-lp__section-head,
  #member-value > .hlab-lp__wrap.hlab-lp__surface > .hlab-lp__section-head,
  #about > .hlab-lp__wrap.hlab-lp__surface > .hlab-lp__section-head,
  #target > .hlab-lp__wrap.hlab-lp__surface > .hlab-lp__section-head,
  #privacy-account > .hlab-lp__wrap.hlab-lp__surface > .hlab-lp__section-head {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* D. 同列カードは外枠端に接触させず、同じ間隔で並べる */
  #perspective > .hlab-lp__surface .hlab-lp__three-grid,
  #member-value > .hlab-lp__surface .hlab-lp__three-grid,
  #about > .hlab-lp__surface .hlab-lp__three-grid,
  #privacy-account > .hlab-lp__surface .hlab-lp__three-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hlab-lp-geometry-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #target > .hlab-lp__surface .hlab-lp__four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hlab-lp-geometry-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* E. 締め帯はカード群と同じ左右線。上に適切な呼吸を入れる */
  #member-value > .hlab-lp__surface .hlab-lp__request-box,
  #privacy-account > .hlab-lp__surface .hlab-lp__request-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
  }

  /* F. 順序ブロック／FAQ：外枠のpadding内に収める */
  #flow > .hlab-lp__surface .hlab-lp__section-head,
  #faq > .hlab-lp__surface .hlab-lp__section-head {
    width: 100%;
    margin: 0 0 22px;
    padding-left: 0;
    padding-right: 0;
  }

  #flow > .hlab-lp__surface .hlab-lp__flow-grid,
  #faq > .hlab-lp__surface .hlab-lp__faq {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #flow > .hlab-lp__surface .hlab-lp__flow-grid {
    gap: 12px;
  }

  #faq > .hlab-lp__surface .hlab-lp__faq {
    column-gap: 12px;
    row-gap: 10px;
  }

  #faq > .hlab-lp__surface .hlab-lp__faq details:last-child:nth-child(odd) {
    width: calc((100% - 12px) / 2);
    justify-self: center;
  }

  /* G. セクション間の境界を視覚的に分離する */
  #perspective,
  #member-value,
  #about,
  #target,
  #tool-intro,
  #privacy-account,
  #flow,
  #faq {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* FOR YOU と FIND WHAT YOU NEED は別セクションとして明確に離す */
  #target {
    padding-bottom: 28px;
  }

  #tool-intro {
    padding-top: 28px;
  }
}


/* =========================================================
 * LP materials width cleanup v8.11
 * 会員向け資料・実務ツールでは装飾用らいるんの専用列を使わず、
 * 資料一覧を外枠カードの横幅いっぱいに使う。色は変更しない。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #contents .hlab-lp__materials.hlab-lp__surface {
    grid-template-columns: minmax(0, 1fr);
  }

  #contents .hlab-lp__materials-intro,
  #contents .hlab-lp__tools-block {
    grid-column: 1;
    min-width: 0;
  }
}


/* =========================================================
 * LP color hierarchy authority v8.12
 * v8.7以降で統一したカード構造を前提に、色の役割だけを固定する。
 * 配置・幅・余白・高さには触れない。
 *   page   = 明るい暖色の土台
 *   outer  = ほぼ白い外枠カード
 *   inner  = 一段濃い淡クリームの情報カード
 *   action = 内側より一段だけ認識しやすい操作面
 *   CTA    = 既存オレンジを最上位として維持
 * ツール固有色は既存仕様を維持する。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  .hlab-lp {
    --hlab-lp-page-surface: #fff7df;

    --hlab-lp-outer-bg: #fffcf6;
    --hlab-lp-outer-border: #ebcfae;

    --hlab-lp-inner-bg: #fff4e8;
    --hlab-lp-inner-border: #e7c29a;

    --hlab-lp-action-bg: #fff1df;
    --hlab-lp-action-border: #e3aa67;
    --hlab-lp-action-hover-bg: #ffead0;
    --hlab-lp-action-hover-border: #e98a17;

    --hlab-lp-note-bg: #fff9f2;
    --hlab-lp-note-border: #ead3ba;

    --hlab-lp-text-heading: #4a2414;
    --hlab-lp-text-body: #684b3b;
    --hlab-lp-text-muted: #8a705e;
  }

  /* 1. ページ背景：広い土台。暗くせず暖色だけを残す */
  .hlab-lp {
    background-color: var(--hlab-lp-page-surface);
    background-image:
      linear-gradient(rgba(255, 248, 224, 0.72), rgba(255, 248, 224, 0.72)),
      var(--hlab-lp-page-bg);
  }

  /* 2. 外枠カード：ページ背景より明るく、セクションのまとまりを示す */
  .hlab-lp__surface:not(.hlab-lp__quick-free-panel) {
    border-color: var(--hlab-lp-outer-border);
    background: var(--hlab-lp-outer-bg);
  }

  .hlab-lp__quick-free-panel.hlab-lp__surface,
  .hlab-lp .hlab-pwa-install-card.hlab-pwa-install-card--public {
    border-color: var(--hlab-lp-outer-border);
    background-color: var(--hlab-lp-outer-bg);
  }

  /* 3. 内側カード：外枠より一段だけ色を持たせる */
  .hlab-lp__inner-card:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link) {
    border-color: var(--hlab-lp-inner-border);
    background: var(--hlab-lp-inner-bg);
  }

  #contents .hlab-lp__material-group {
    border-color: var(--hlab-lp-inner-border);
    background: var(--hlab-lp-inner-bg);
  }

  #contents .hlab-lp__material-group + .hlab-lp__material-group {
    border-left-color: var(--hlab-lp-inner-border);
  }

  #contents .hlab-lp__material-group > header {
    border-bottom-color: rgba(231, 194, 154, 0.68);
  }

  /* 4. 操作面：派手に塗らず、内側カードより一段だけ認識しやすくする */
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link),
  #contents .hlab-lp__material-links .hlab-lp__inner-card--action {
    border-color: var(--hlab-lp-action-border);
    background: var(--hlab-lp-action-bg);
  }

  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):hover,
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):focus-visible,
  .hlab-lp__inner-card--action:not(.hlab-lp__tool-card):not(.hlab-lp__quick-free-link):focus-within {
    border-color: var(--hlab-lp-action-hover-border);
    background: var(--hlab-lp-action-hover-bg);
  }

  /* 補足・注意は主操作より弱い面へ */
  .hlab-lp__inner-card--note {
    border-color: var(--hlab-lp-note-border) !important;
    background: var(--hlab-lp-note-bg) !important;
  }

  /* 5. 文字の濃淡：見出し／本文／補足の3段階 */
  .hlab-lp__surface h2,
  .hlab-lp__surface h3,
  .hlab-lp__surface h4,
  .hlab-lp__surface strong,
  .hlab-lp__inner-card h3,
  .hlab-lp__inner-card h4,
  .hlab-lp__inner-card strong {
    color: var(--hlab-lp-text-heading);
  }

  .hlab-lp__surface p,
  .hlab-lp__inner-card p,
  .hlab-lp__surface li {
    color: var(--hlab-lp-text-body);
  }

  .hlab-lp__surface small,
  .hlab-lp__surface .hlab-lp__sub,
  .hlab-lp__surface .hlab-lp__note,
  .hlab-lp__surface .hlab-lp__meta {
    color: var(--hlab-lp-text-muted);
  }

  /* 主CTA・ツール固有色・ファーストビューは既存の強さを維持する */
}


/* =========================================================
 * Materials hierarchy polish v8.13
 * 「会員が利用できる資料と実務ツール」の資料3列だけを対象。
 * 構造・幅・高さ・配置は変更せず、親グループ／個別資料／補助導線の
 * 色階層だけを整理する。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  /* 親グループ：はじめる／続ける／育てる */
  #contents .hlab-lp__material-group {
    position: relative;
    border-color: rgba(106, 59, 34, 0.20);
    background: #fff4e8;
  }

  #contents .hlab-lp__material-group + .hlab-lp__material-group {
    border-left-color: rgba(106, 59, 34, 0.20);
  }

  #contents .hlab-lp__material-group > header {
    position: relative;
    border-bottom-color: rgba(106, 59, 34, 0.10);
  }

  #contents .hlab-lp__material-group > header::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: rgba(240, 138, 0, 0.72);
  }

  /* 個別資料：親より明るく、通常時は静かな輪郭 */
  #contents .hlab-lp__material-links .hlab-lp__inner-card--action {
    border-color: rgba(106, 59, 34, 0.15);
    background: #fffaf6;
    box-shadow: none;
  }

  #contents .hlab-lp__material-links .hlab-lp__inner-card--action:hover,
  #contents .hlab-lp__material-links .hlab-lp__inner-card--action:focus-visible,
  #contents .hlab-lp__material-links .hlab-lp__inner-card--action:focus-within {
    border-color: rgba(233, 138, 23, 0.72);
    background: #fff0dc;
    box-shadow: 0 5px 14px rgba(216, 111, 0, 0.07);
  }

  /* 補助導線：資料カードより一段弱く */
  #contents .hlab-lp__reference-link {
    border-color: rgba(106, 59, 34, 0.12);
    background: rgba(255, 252, 247, 0.74);
    box-shadow: none;
  }

  #contents .hlab-lp__reference-link:hover,
  #contents .hlab-lp__reference-link:focus-visible {
    border-color: rgba(106, 59, 34, 0.20);
    background: rgba(255, 249, 241, 0.92);
  }

  #contents .hlab-lp__reference-link span {
    color: var(--hl-orange-dark);
  }
}


/* =========================================================
 * Purpose navigation hierarchy polish v8.14
 * 「やりたいことから探す」の9選択カードだけを対象。
 * 構造・幅・配置は維持し、通常時は落ち着いた面、
 * hover時だけオレンジを強める。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #tool-intro .hlab-lp__purpose-nav a {
    border: 1px solid rgba(106, 59, 34, 0.16);
    border-left: 3px solid rgba(216, 111, 0, 0.42);
    background: #fff4e8;
    box-shadow: none;
  }

  #tool-intro .hlab-lp__purpose-nav a:hover,
  #tool-intro .hlab-lp__purpose-nav a:focus-visible {
    border-color: rgba(233, 138, 23, 0.58);
    border-left-color: #e98a17;
    background: #fff0dc;
    box-shadow: 0 5px 14px rgba(216, 111, 0, 0.07);
    transform: translateY(-1px);
  }

  #tool-intro .hlab-lp__purpose-nav strong {
    color: var(--hlab-lp-text-heading);
  }

  #tool-intro .hlab-lp__purpose-nav span {
    color: var(--hlab-lp-text-body);
  }
}


/* =========================================================
 * LP middle meaning-density review v8.15
 * 6軸評価（一画面の意味ある情報量／スクロール距離／可読性／
 * 操作性／情報階層／無駄な空白）に基づき、FOR YOUだけを
 * 「大きな説明」から「4つの大分類」へ圧縮する。
 * A WIDER VIEW / MEMBER VALUE / COMMUNITY / FIND WHAT YOU NEED
 * の役割・配置・色は変更しない。PCのみ。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #target {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  #target > .hlab-lp__wrap.hlab-lp__surface {
    grid-template-columns: minmax(270px, 0.72fr) minmax(0, 2.28fr);
    column-gap: 28px;
    row-gap: 12px;
    align-items: center;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  #target > .hlab-lp__surface .hlab-lp__section-head {
    align-self: center;
  }

  #target > .hlab-lp__surface .hlab-lp__section-head h2 {
    margin-bottom: 10px;
  }

  #target > .hlab-lp__surface .hlab-lp__section-head p {
    margin-bottom: 0;
    line-height: 1.75;
  }

  #target > .hlab-lp__surface .hlab-lp__four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: stretch;
  }

  #target > .hlab-lp__surface .hlab-lp__target-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    align-content: center;
    min-height: 92px;
    padding: 13px 15px;
  }

  #target > .hlab-lp__surface .hlab-lp__target-card > img {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    margin: 0;
    object-fit: contain;
  }

  #target > .hlab-lp__surface .hlab-lp__target-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    line-height: 1.45;
  }

  #target > .hlab-lp__surface .hlab-lp__target-card p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    line-height: 1.55;
  }

  /* 大分類から具体的な目的へ続くので、2セクション間の距離も詰める */
  #target + #tool-intro {
    padding-top: 18px;
  }
}

/* =========================================================
 * Monitor heading single-line balance v8.16
 * モニター募集セクションの見出しだけをPCで1行に整える。
 * 構造・説明文・カード・他セクションは変更しない。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #monitor .hlab-lp__monitor-head h2 {
    font-size: clamp(30px, 2.7vw, 36px);
    line-height: 1.3;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}


/* =========================================================
 * Monitor head full-width fix v8.17
 * 旧820px制限をPCのみ解除し、カード内の利用可能幅を説明文にも使う。
 * 見出し・カード・余白・色は変更しない。
 * ======================================================= */
@media screen and (min-width: 981px) {
  #monitor .hlab-lp__monitor-head {
    width: 100%;
    max-width: none;
  }
}