@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
:root {
  --hg-navy:      #1B2A41;  /* 藍色寄りの濃紺。見出し・ボタン地 */
  --hg-navy-deep: #16273A;  /* 最終CTA帯・footer */
  --hg-gold:      #C9A15F;  /* 金。ラベル・アクセント・CTAボタン(看板風)の主色 */
  --hg-gold-light:#DCB772;  /* ハイライト・見出しアクセント */
  --hg-gold-grad: #D3B06E;  /* 金ボタンのグラデーション上端 */
  --hg-gold-dark: #96762F;
  --hg-shu:       #B3382E;  /* 朱色。印影・強調バッジ専用(ボタン地には使わない) */
  --hg-shu-dark:  #8A3820;
  --hg-shu-light: #D05B4F;
  --hg-required:  #C0473F;  /* 必須バッジ・重点確認色 */
  --hg-check:     #7A9B6E;  /* チェックマーク・強み色 */
  --hg-cream:     #F7F2E8;
  --hg-cream-alt: #EFE7D8;
  --hg-cream-card:#FBF8F2;  /* 白系カード */
  --hg-washi:     #F4ECDA;  /* 和紙カード */
  --hg-text:      #2C2A25;
  --hg-muted:     #6B6355;
  --hg-border:    #E2D6BC;
  --hg-border-washi: #DCC99F;
  --hg-emphasis:  #2E7E64;  /* 強調(本文中の強調ワード用。統一色) */
}

/* ============================================================
   PART A: サイト全体の見た目(Cocoon標準テンプレートに適用)
   ============================================================ */

body {
  background: var(--hg-cream);
  color: var(--hg-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.85;
}

.entry-content { font-size: 16px; line-height: 1.9; }

a { color: var(--hg-shu-dark); }
a:hover { color: var(--hg-navy); }

.header, .header-container-in { background: var(--hg-cream); }

.site-name-text {
  color: var(--hg-navy) !important;
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  letter-spacing: .04em;
}

.navi-in > ul > li > a { color: var(--hg-navy); font-weight: 500; }
.navi-in > ul > li > a:hover { color: var(--hg-shu-dark); background: transparent; }

/* ---------- 記事見出し h2〜h4 ----------
   2026-07-19全面刷新(3代目)。「・+下線」の簡素版も「ダサい」との指摘を受け、
   和書の章扉の意匠で組み直した。階層をそのまま和の道具立てに写す:
     h2=章題: 藍の明朝を大きく置き、生成りの全幅罫の左端に「藍→金」の二色継ぎの太罫
              (記事カードの藍帯がhoverで金に変わる意匠と同じ言葉。先頭マークは
               2026-07-19ユーザー指摘「左のリストがいらない」を受け廃止)
     h3=節題: 藍+金の「二つ引」(引両紋に由来する縦の二連線)
     h4=小見出し: 金の菱(輪郭のみ)
   ボックス・背景色は使わない(2026-07-13の方針を維持)。h4はこれまで子テーマ未定義で
   Cocoonデフォルトのグレー罫ボックスのままだったため、今回リセットして統一。
   マークアップ不変・CSSのみ */
.article h2 {
  position: relative;
  display: block;
  background: transparent;
  color: var(--hg-navy);
  font-family: "Shippori Mincho", serif;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--hg-border);
  padding: 0 0 .6em;
  margin: 2.2em 0 1em;
}
/* 二色継ぎの太罫: 全幅の細罫の左端に藍→金と継いだ3pxの太罫を重ねる
   (先頭マークを持たない代わりに、罫そのものをh2の署名にする) */
.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 4.2em;
  height: 3px;
  background: linear-gradient(90deg,
    var(--hg-navy) 0, var(--hg-navy) 58%,
    var(--hg-gold) 58%, var(--hg-gold) 100%);
}
.article h3 {
  background: transparent;
  color: var(--hg-navy);
  font-family: "Shippori Mincho", serif;
  font-size: 1.22em;
  font-weight: 600;
  letter-spacing: .05em;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 1.8em 0 .8em;
}
/* 二つ引: 藍の線+金の線の縦二連(box-shadowで2本目を描く。要素は1つのまま) */
.article h3::before {
  content: "";
  display: inline-block;
  width: .26em;
  height: .95em;
  background: var(--hg-navy);
  box-shadow: .42em 0 0 0 var(--hg-gold);
  margin-right: 1.05em;
  vertical-align: -.1em;
}
.article h4 {
  background: transparent;
  color: var(--hg-navy);
  font-family: "Shippori Mincho", serif;
  font-size: 1.06em;
  font-weight: 600;
  letter-spacing: .04em;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 1.6em 0 .6em;
}
/* 菱: 金の輪郭のみの小さな菱形 */
.article h4::before {
  content: "";
  display: inline-block;
  width: .34em;
  height: .34em;
  border: 1px solid var(--hg-gold-dark);
  transform: rotate(45deg);
  margin-right: .55em;
  vertical-align: .06em;
}
/* h5/h6の保険(記事で使う場面はほぼないが、Cocoonデフォルトの罫が出ないように) */
.article h5, .article h6 {
  background: transparent;
  color: var(--hg-navy);
  border: none;
  font-weight: 600;
  letter-spacing: .03em;
}
@media (max-width: 480px) {
  .article h2 { font-size: 1.32em; }
  .article h3 { font-size: 1.15em; }
}

/* ---------- 記事カード(一覧 .entry-card-* / 関連記事 .related-entry-card-* 共通) ----------
   2026-07-18全面刷新: 白カード+影の洋風トーンが「ダサい」とのユーザー指摘を受け、
   和の意匠に統一。生成りの紙地+細罫線+上辺の藍帯(hoverで金に変わる)を基本形にし、
   浮き上がりより罫線・帯の色変化を主役にする。マークアップはCocoon標準のまま(CSSのみ) */
.entry-card-wrap,
.related-entry-card-wrap {
  position: relative;
  background: var(--hg-cream-card);
  border: 1px solid var(--hg-border);
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(27, 42, 65, .05);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
}
/* 上辺の藍帯(墨の帯の意匠のCSS版)。hoverで金へ */
.entry-card-wrap::before,
.related-entry-card-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hg-navy);
  transition: background .25s ease;
  z-index: 1;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  border-color: var(--hg-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 42, 65, .10);
}
.entry-card-wrap:hover::before,
.related-entry-card-wrap:hover::before { background: var(--hg-gold); }

/* タイトル: 藍の明朝、hoverで金の下線 */
.card-title {
  color: var(--hg-navy);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
}
.entry-card-wrap:hover .card-title,
.related-entry-card-wrap:hover .card-title {
  text-decoration: underline;
  text-decoration-color: var(--hg-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* サムネイル: hoverでかすかにズーム */
.card-thumb { overflow: hidden; }
.card-thumb-image { transition: transform .4s ease; }
.entry-card-wrap:hover .card-thumb-image,
.related-entry-card-wrap:hover .card-thumb-image { transform: scale(1.03); }

/* サムネ上のカテゴリラベル: 藍地+淡金文字の短冊風(サイズ・余白はCocoon既定のまま。
   2026-07-18ユーザー指摘「従来と同じサイズで」を受け、font-size/padding上書きを撤回) */
.cat-label {
  background: var(--hg-navy);
  color: var(--hg-gold-light);
  border: none;
  border-radius: 0 2px 2px 0;
  font-family: "Shippori Mincho", serif;
  letter-spacing: .06em;
}

/* 一覧ページ(/articles/)の仕上げ: スニペット・日付 */
.list.ect-entry-card { margin-top: 8px; }
.card-snippet { color: var(--hg-muted); font-size: 13.5px; line-height: 1.8; }
.entry-card-info, .entry-card-info .post-date { color: var(--hg-muted); font-size: 12px; }
.entry-card-info .fa-clock-o { color: var(--hg-gold-dark); }

/* 2026-07-19: ユーザー指摘「更新日・投稿日が右下で"記事を読む"の文字に密着して見にくい」への対応。
   原因: Cocoon標準構成では.entry-card-meta(日付+カテゴリ)がdisplay:flex; justify-content:space-between
   のまま本文列(右カラム、カード全体の約60%幅)の中に収まっており、幅が狭いため日付と
   「記事を読む→」が実質くっついて見える。マークアップは変更できない(Cocoon生成のHTMLのまま)ため、
   .entry-card-content/.entry-card-metaをdisplay:contentsで透過させ、孫要素(タイトル・スニペット・
   日付・カテゴリ)を.entry-cardのCSS Gridに直接配置し直すことで、日付だけをサムネイル下(左カラム)へ
   移動する。#list.ect-entry-cardは/articles/一覧ページの専用コンテナIDのため、他ページのカード
   (関連記事カード・サイドバーウィジェット等)には影響しない */
#list.ect-entry-card .entry-card {
  display: grid;
  grid-template-columns: 38% 1fr;
  column-gap: 4%;
  grid-template-areas:
    "thumb   title"
    "thumb   snippet"
    "thumb   ."
    "date    categorys";
}
#list.ect-entry-card .entry-card-thumb {
  grid-area: thumb;
  float: none;
  width: auto;
  margin: 0;
}
#list.ect-entry-card .entry-card-content { display: contents; }
#list.ect-entry-card .entry-card-title { grid-area: title; }
#list.ect-entry-card .entry-card-snippet { grid-area: snippet; }
#list.ect-entry-card .entry-card-meta {
  display: contents;
}
#list.ect-entry-card .entry-card-info {
  grid-area: date;
  align-self: end;
  justify-self: start;
  padding-top: 6px;
}
#list.ect-entry-card .entry-card-categorys {
  grid-area: categorys;
  align-self: end;
  justify-self: end;
}

/* カード下部のカテゴリチップは表示しない(サムネ上のラベルと重複するため。
   2026-07-18ユーザー指摘)。代わりに「記事を読む」導線をCSSのcontentで表示
   (マークアップはCocoon生成のため変更しない。カード全体がリンクなので装飾扱い)。
   注意: Cocoon親テーマが `.e-card-meta .e-card-categorys { display:none }` でコンテナ自体を
   非表示にしているため、まずコンテナを再表示しないと::afterも出ない(2026-07-19実機で判明) */
.e-card-meta .e-card-categorys,
.entry-card-categorys { display: block; }
.entry-card-categorys .entry-category { display: none; }
.entry-card-categorys::after {
  content: "記事を読む →";
  color: var(--hg-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.entry-card-wrap:hover .entry-card-categorys::after {
  color: var(--hg-shu-dark);
  text-decoration: underline;
  text-decoration-color: var(--hg-gold);
  text-underline-offset: 3px;
}
/* Cocoon既定のグレーの no-image プレースホルダーがwashi/creamの配色から浮くための和らげ */
.card-thumb-image.no-image { opacity: .55; background: var(--hg-cream-alt); }

.footer { background: var(--hg-navy); }
.footer, .footer a { color: rgba(247, 242, 231, .8); }

/* LPページ(固定ページ)の投稿日表示を強制的に非表示にする。
   「追加CSS」の.page .date-tags{display:none}が効かないケースがあるための保険 */
body:has(.hg-lp) .date-tags { display: none !important; }

/* ============================================================
   PART B: トップページLPパーツ(.hg-lp 配下にのみ適用。モバイルファースト)
   ============================================================ */

.hg-lp, .hg-lp * , .hg-lp *::before, .hg-lp *::after { box-sizing: border-box; }
.hg-lp {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}
/* 100vwはWindowsでスクロールバー幅の分だけ横スクロールを生むため抑止 */
body:has(.hg-lp) { overflow-x: hidden; }
.hg-lp p, .hg-lp h1, .hg-lp h2, .hg-lp h3, .hg-lp div, .hg-lp span, .hg-lp ul, .hg-lp li {
  margin: 0;
  padding: 0;
}
.hg-lp img, .hg-lp svg { display: block; max-width: 100%; }
.hg-lp a { color: inherit; text-decoration: none; }
.hg-lp .hg-serif { font-family: "Shippori Mincho", serif; }
.hg-lp .hg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px)  { .hg-lp .hg-wrap { padding: 0 28px; } }
@media (min-width: 1000px) { .hg-lp .hg-wrap { padding: 0 32px; } }

/* ---- 共通ボタン(サイズ・太さを完全統一。塗り/枠線の2種のみ) ---- */
.hg-lp .hg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
/* 2026-07-13: design_handoffの「看板風」ボタン(角丸3px+多重inset枠)に合わせて再設計。
   主要CTA=金グラデ塗り、藍塗りは.hg-btn--navy-fill(問い合わせ等)に分離。
   .hg-btn--ghost(藍アウトライン)は診断ウィジェット内の副次操作(戻る/PDF/やり直す)専用として維持し、
   主CTAと視覚的な優先度を区別する */
.hg-lp .hg-btn--primary {
  background: linear-gradient(180deg, var(--hg-gold-grad), var(--hg-gold));
  border-color: transparent;
  border-radius: 3px;
  color: var(--hg-navy);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 0 0 3px var(--hg-gold), 0 4px 14px rgba(0,0,0,.2);
}
.hg-lp .hg-btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); color: var(--hg-navy); }
.hg-lp .hg-btn--navy-fill {
  background: var(--hg-navy);
  border-color: transparent;
  border-radius: 3px;
  color: var(--hg-cream);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 3px var(--hg-navy), 0 4px 14px rgba(27,42,65,.2);
}
.hg-lp .hg-btn--navy-fill:hover { background: var(--hg-navy-deep); transform: translateY(-1px); color: var(--hg-cream); }
.hg-lp .hg-btn--ghost {
  background: rgba(247, 242, 231, .92);
  border-color: var(--hg-navy);
  color: var(--hg-navy);
}
.hg-lp .hg-btn--ghost:hover { background: var(--hg-cream); transform: translateY(-1px); }
.hg-lp .hg-btn--on-navy {
  background: transparent;
  border-color: rgba(247,242,231,.7);
  color: var(--hg-cream);
}
.hg-lp .hg-btn--on-navy:hover { background: rgba(247,242,231,.12); transform: translateY(-1px); }
@media (min-width: 640px) {
  .hg-lp .hg-btn { font-size: 14.5px; padding: 14px 30px; }
}

/* ---- ヒーロー(2026-07-08刷新: 水墨画フルブリード型。モバイル基本) ---- */
.hg-lp .hg-hero {
  position: relative; padding: 52px 0 40px; overflow: hidden;
  background-size: cover; background-position: center 35%;
}
.hg-lp .hg-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,52,74,.42) 0%, rgba(22,39,58,.6) 55%, var(--hg-cream) 100%);
}
.hg-lp .hg-hero__inner {
  position: relative; display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hg-lp .hg-hero__content { flex: 3 1 320px; max-width: 600px; }
.hg-lp .hg-hero__badge {
  display: inline-flex; align-items: center; border: 1px solid var(--hg-cream); color: var(--hg-cream);
  background: rgba(32,52,74,.35); padding: 6px 14px; font-size: 12px; font-weight: 500; letter-spacing: .05em;
  margin-bottom: 16px;
  opacity: 0; animation: hg-rise .8s ease-out .1s forwards;
}
.hg-lp .hg-hero__title {
  font-family: "Shippori Mincho", serif;
  font-size: clamp(26px, 7.2vw, 42px); font-weight: 700; line-height: 1.55; color: var(--hg-cream);
  text-shadow: 0 2px 16px rgba(0,0,0,.35); margin-bottom: 16px;
  opacity: 0; animation: hg-rise .8s ease-out .3s forwards;
}
.hg-lp .hg-hero__title .hg-accent { color: var(--hg-gold); border-bottom: 3px solid var(--hg-gold-dark); }
.hg-lp .hg-hero__sub {
  display: flex; align-items: center; gap: 10px; color: rgba(247,242,231,.85); font-weight: 600; font-size: 13.5px;
  margin-bottom: 22px;
  opacity: 0; animation: hg-rise .8s ease-out .45s forwards;
}
.hg-lp .hg-hero__sub::before { content: ''; width: 20px; height: 1px; background: var(--hg-gold); flex-shrink: 0; }
.hg-lp .hg-hero__actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: hg-rise .8s ease-out .6s forwards;
}
/* ヒーローCTAは design_handoff どおり藍塗りピル型(金グラデ看板ボタンではない) */
.hg-lp .hg-btn--hero {
  background: var(--hg-navy); color: var(--hg-cream);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(22,39,58,.3);
}
.hg-lp .hg-btn--hero:hover { background: var(--hg-navy-deep); color: var(--hg-cream); }
.hg-lp .hg-hero__free-badge {
  background: var(--hg-gold); color: var(--hg-navy); border-radius: 999px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex-shrink: 0;
}
.hg-lp .hg-hero__time {
  margin-top: 12px; font-size: 12.5px; color: rgba(247,242,231,.75); font-weight: 600;
  opacity: 0; animation: hg-rise .8s ease-out .75s forwards;
}
.hg-lp .hg-hero__vertical { display: none; }
.hg-lp .hg-accent { color: var(--hg-emphasis); }
@keyframes hg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 860px) {
  .hg-lp .hg-hero { padding: 132px 0 64px; min-height: 580px; display: flex; align-items: flex-end; }
  .hg-lp .hg-hero__badge { font-size: 12.5px; letter-spacing: .06em; margin-bottom: 22px; }
  .hg-lp .hg-hero__title { margin-bottom: 20px; }
  .hg-lp .hg-hero__sub { font-size: 14.5px; margin-bottom: 26px; }
  .hg-lp .hg-hero__vertical {
    display: flex; gap: 12px; flex: 0 1 auto; margin: 0 auto 6px; align-self: flex-end;
  }
  .hg-lp .hg-hero__vertical span {
    writing-mode: vertical-rl; font-family: "Yuji Syuku", serif; color: var(--hg-cream);
    font-size: 15px; letter-spacing: .2em; line-height: 1.7; text-shadow: 0 2px 18px rgba(0,0,0,.55);
    white-space: nowrap; opacity: .9;
  }
}

/* ---- セクション共通(モバイル基本) ---- */
.hg-lp .hg-section { padding: 48px 0; }
.hg-lp .hg-section--alt { background: var(--hg-cream-alt); }
.hg-lp .hg-section__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.hg-lp .hg-section__eyebrow { font-size: 11.5px; letter-spacing: .14em; color: var(--hg-shu-dark); font-weight: 500; margin-bottom: 10px; }
.hg-lp .hg-section__title { font-size: clamp(20px, 5.5vw, 28px); font-weight: 600; color: var(--hg-navy); }
.hg-lp .hg-section__lead { font-size: 13.5px; color: var(--hg-muted); margin-top: 12px; }
@media (min-width: 860px) {
  .hg-lp .hg-section { padding: 72px 0; }
  .hg-lp .hg-section__head { margin-bottom: 48px; }
  .hg-lp .hg-section__eyebrow { font-size: 12px; letter-spacing: .16em; margin-bottom: 12px; }
  .hg-lp .hg-section__lead { font-size: 14px; margin-top: 14px; }
}

/* ---- お悩み(2026-07-08刷新: アイコン画像5項目。2026-07-13: モバイルは1カラムに変更) ---- */
.hg-lp .hg-pains { display: grid; grid-template-columns: 1fr; gap: 28px 16px; text-align: center; }
.hg-lp .hg-pain__icon { width: 84px; height: 84px; margin: 0 auto 14px; position: relative; }
.hg-lp .hg-pain__icon-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hg-lp .hg-pain__icon-fg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; height: auto; object-fit: contain; }
.hg-lp .hg-pain__title { font-size: 14.5px; font-weight: 700; color: var(--hg-navy); margin-bottom: 6px; }
.hg-lp .hg-pain__body { font-size: 12.5px; color: var(--hg-muted); }
@media (min-width: 780px) {
  .hg-lp .hg-pains { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .hg-lp .hg-pain__icon { width: 96px; height: 96px; }
  .hg-lp .hg-pain__title { font-size: 15px; }
}

/* ---- 3Sフレーム(モバイル: 縦積み・上下罫線) ---- */
.hg-lp .hg-3s { display: grid; grid-template-columns: 1fr; border: 1px solid var(--hg-border); border-radius: 6px; overflow: hidden; background: #fff; }
.hg-lp .hg-3s__item { padding: 26px 22px; text-align: center; border-bottom: 1px solid var(--hg-border); }
.hg-lp .hg-3s__item:last-child { border-bottom: none; }
.hg-lp .hg-3s__code { font-family: "Shippori Mincho", serif; font-size: 12px; color: var(--hg-shu-dark); letter-spacing: .1em; margin-bottom: 10px; }
.hg-lp .hg-3s__title { font-family: "Shippori Mincho", serif; font-size: 18px; color: var(--hg-navy); margin-bottom: 8px; }
.hg-lp .hg-3s__desc { font-size: 12.5px; color: var(--hg-muted); line-height: 1.8; }
@media (min-width: 780px) {
  .hg-lp .hg-3s { grid-template-columns: repeat(3, 1fr); }
  .hg-lp .hg-3s__item { padding: 34px 26px; border-bottom: none; border-right: 1px solid var(--hg-border); }
  .hg-lp .hg-3s__item:last-child { border-right: none; }
  .hg-lp .hg-3s__code { margin-bottom: 12px; }
  .hg-lp .hg-3s__title { font-size: 19px; }
}

/* ---- 組織の壁(2026-07-13: design_handoffの和紙テクスチャ+筆ストローク+盆栽イラストに刷新) ---- */
.hg-lp .hg-wallcards { display: grid; grid-template-columns: 1fr; gap: 20px; }
.hg-lp .hg-wallcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background-color: var(--hg-washi);
  background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(90deg, rgba(120,95,50,.03) 0 1px, transparent 1px 5px);
  border: 1px solid var(--hg-border-washi); border-radius: 4px;
  box-shadow: inset 0 0 0 4px #fbf6ea, inset 0 0 0 5px rgba(201,161,95,.4);
  padding: 24px;
}
/* 2026-07-13: 筆画像は「画像全体に対して墨の描画部分がごく一部(縦25%程度・やや上寄り)」の実測に基づき、
   背景ストレッチではなく<img>を自然比率で表示し、テキストをオーバーレイで重ねる方式に修正
   (はみ出し修正: design_handoffの実装どおりpadding-bottom:6%でテキストを墨の帯の実中心に合わせる) */
.hg-lp .hg-wallcard__label {
  position: relative; width: 100%; max-width: 190px; margin: 0 auto 12px;
}
.hg-lp .hg-wallcard__brush { width: 100%; height: auto; display: block; }
.hg-lp .hg-wallcard__label-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 6%;
  font-family: "Shippori Mincho", serif; font-weight: 800; font-size: clamp(15px, 1.8vw, 18px);
  color: #fdf9ee; white-space: nowrap;
}
.hg-lp .hg-wallcard__label-text--navy { color: var(--hg-navy); }
.hg-lp .hg-wallcard__title { font-weight: 700; font-size: 16px; color: #2c333c; margin-bottom: 8px; text-align: left; }
.hg-lp .hg-wallcard__bottom { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; }
.hg-lp .hg-wallcard__body { font-size: 13px; line-height: 1.75; color: var(--hg-muted); text-align: left; margin-bottom: 10px; }
.hg-lp .hg-wallcard__link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--hg-navy);
  border-bottom: 1px solid var(--hg-gold); padding-bottom: 2px; white-space: nowrap;
}
.hg-lp .hg-wallcard__illust {
  width: auto; height: clamp(64px, 8vw, 88px); object-fit: contain; opacity: .85; flex-shrink: 0; margin-left: auto;
}
@media (min-width: 780px) {
  .hg-lp .hg-wallcards { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ---- 無料診断でわかること(2026-07-08新設。紺地アイコングリッド) ---- */
.hg-lp .hg-section--navy { background: var(--hg-navy); }
.hg-lp .hg-section--navy .hg-section__eyebrow { color: var(--hg-gold); }
.hg-lp .hg-section--navy .hg-section__title { color: var(--hg-cream); }
.hg-lp .hg-section--navy .hg-section__lead { color: rgba(247,242,231,.7); }
.hg-lp .hg-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 26px 18px; }
.hg-lp .hg-findings__item { text-align: center; }
.hg-lp .hg-findings__icon { height: 44px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.hg-lp .hg-findings__icon img { height: 44px; width: auto; object-fit: contain; }
.hg-lp .hg-findings__title { color: var(--hg-cream); font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.hg-lp .hg-findings__desc { color: rgba(247,242,231,.6); font-size: 11.5px; line-height: 1.6; }
@media (min-width: 780px) {
  .hg-lp .hg-findings { grid-template-columns: repeat(6, 1fr); }
}

/* ---- 診断結果レポートのサンプル(2026-07-13追加: design_handoff Section8の忠実再現。静的ダミー) ---- */
.hg-lp .hg-report-sample {
  position: relative; max-width: 900px; margin: 0 auto; background: var(--hg-cream-card);
  border: 1px solid var(--hg-border-washi); box-shadow: 0 14px 40px rgba(27,42,65,.14); padding: 20px;
}
.hg-lp .hg-report-sample__tag {
  position: absolute; top: -12px; right: 16px; background: var(--hg-gold); color: var(--hg-navy);
  font-size: 11px; font-weight: 800; padding: 5px 14px; letter-spacing: .06em;
}
.hg-lp .hg-report-sample__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 2px solid var(--hg-navy); padding-bottom: 10px; margin-bottom: 14px;
}
.hg-lp .hg-report-sample__title { font-weight: 800; font-size: 17px; color: var(--hg-navy); }
.hg-lp .hg-report-sample__meta { font-size: 10.5px; color: var(--hg-muted); }
.hg-lp .hg-report-sample__label { font-size: 10.5px; font-weight: 700; color: var(--hg-muted); margin-bottom: 8px; }
.hg-lp .hg-report-sample__top { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.hg-lp .hg-report-sample__health, .hg-lp .hg-report-sample__walls { background: var(--hg-washi); border: 1px solid var(--hg-border); padding: 12px 14px; }
.hg-lp .hg-report-sample__health { text-align: center; }
.hg-lp .hg-report-sample__donut {
  width: 86px; height: 86px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--hg-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--hg-cream-card);
}
.hg-lp .hg-report-sample__donut-num { font-weight: 800; font-size: 26px; color: var(--hg-navy); line-height: 1; }
.hg-lp .hg-report-sample__donut-max { font-size: 9px; color: var(--hg-muted); }
.hg-lp .hg-report-sample__health-zone { margin-top: 6px; font-size: 10.5px; font-weight: 700; color: #B07D2A; }
.hg-lp .hg-report-sample__wallbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hg-lp .hg-report-sample__wallbar-name { width: 58px; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--hg-navy); }
.hg-lp .hg-report-sample__wallbar-track { flex: 1; height: 10px; background: #E9DFC8; }
.hg-lp .hg-report-sample__wallbar-fill { display: block; height: 100%; }
.hg-lp .hg-report-sample__wallbar-num { width: 26px; flex-shrink: 0; font-size: 11px; font-weight: 700; text-align: right; }
.hg-lp .hg-report-sample__wallnote { font-size: 10.5px; color: var(--hg-muted); margin-top: 4px; }
.hg-lp .hg-report-sample__wallnote strong { color: var(--hg-navy); }
.hg-lp .hg-report-sample__top3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.hg-lp .hg-report-sample__top3-card { border: 1px solid var(--hg-border); padding: 10px 12px; font-size: 11.5px; color: var(--hg-text); }
.hg-lp .hg-report-sample__top3-card p { margin-top: 4px; }
.hg-lp .hg-report-sample__top3-head { font-size: 10.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin: 0; }
.hg-lp .hg-report-sample__dot { width: 8px; height: 8px; display: inline-block; flex-shrink: 0; }
.hg-lp .hg-report-sample__heatmap { border: 1px solid var(--hg-border); padding: 10px 12px; }
.hg-lp .hg-report-sample__heatgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.hg-lp .hg-report-sample__heat { text-align: center; padding: 7px 4px; border: 1px solid var(--hg-border); }
.hg-lp .hg-report-sample__heat p { font-size: 10px; font-weight: 700; color: #2c333c; }
.hg-lp .hg-report-sample__heat span { font-size: 9px; font-weight: 700; }
.hg-lp .hg-report-sample__heat--good { background: #EEF3EA; border-color: #CFDCC8; }
.hg-lp .hg-report-sample__heat--good span { color: #4E7A43; }
.hg-lp .hg-report-sample__heat--watch { background: #F8F0DD; border-color: var(--hg-border-washi); }
.hg-lp .hg-report-sample__heat--watch span { color: #B07D2A; }
.hg-lp .hg-report-sample__heat--focus { background: #F7E6E0; border-color: #E3C3BA; }
.hg-lp .hg-report-sample__heat--focus span { color: var(--hg-required); }
.hg-lp .hg-report-sample__disclaimer { text-align: center; margin-top: 14px; font-size: 12px; color: var(--hg-muted); }
.hg-lp .hg-report-sample__cta { text-align: center; margin-top: 20px; }

/* 2026-07-13: 「無料診断お申し込み」ページは/application-forms/(相談フォーム)とデザインを揃えるため、
   diagnosis-apply-page.html内に独自の<style>/<script>を持つ自己完結型ページに変更した。
   そのため、ここにあった.hg-apply*系のCSSは不要になり削除した(旧実装の名残はREADME参照)。 */
@media (min-width: 640px) {
  .hg-lp .hg-report-sample__top { grid-template-columns: auto 1fr; align-items: stretch; }
  .hg-lp .hg-report-sample__top3 { grid-template-columns: repeat(2, 1fr); }
  .hg-lp .hg-report-sample__heatgrid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- ご支援の流れ(モバイル: 縦積み、PC: 横並び+矢印) ---- */
.hg-lp .hg-flow { display: flex; flex-direction: column; }
.hg-lp .hg-flow__step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hg-border); }
.hg-lp .hg-flow__step:last-child { border-bottom: none; }
.hg-lp .hg-flow__step .hg-icon-badge { flex-shrink: 0; margin: 0; }
.hg-lp .hg-flow__num { font-family: "Shippori Mincho", serif; font-size: 15px; }
.hg-lp .hg-flow__title { font-family: "Shippori Mincho", serif; font-size: 15.5px; color: var(--hg-navy); margin-bottom: 6px; }
.hg-lp .hg-flow__body { font-size: 13px; color: var(--hg-muted); line-height: 1.8; }
@media (min-width: 860px) {
  .hg-lp .hg-flow { flex-direction: row; align-items: flex-start; gap: 4px; }
  .hg-lp .hg-flow__step {
    flex: 1; flex-direction: column; align-items: center; text-align: center;
    border-bottom: none; padding: 0 10px; position: relative;
  }
  .hg-lp .hg-flow__step:not(:last-child)::after {
    content: '›'; position: absolute; right: -6px; top: 12px;
    font-size: 22px; color: var(--hg-gold); line-height: 1;
  }
  .hg-lp .hg-flow__step .hg-icon-badge { margin: 0 0 14px; }
  .hg-lp .hg-flow__title { font-size: 14px; }
  .hg-lp .hg-flow__body { font-size: 12px; }
}

/* ---- 無料診断ハイライト(モバイル: 縦積み) ---- */
.hg-lp .hg-diag {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  background: #fff; border: 1px solid var(--hg-border); border-radius: 6px; padding: 24px; margin-bottom: 32px;
}
.hg-lp .hg-diag__image {
  border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.hg-lp .hg-diag__image-placeholder {
  background-image:
    repeating-linear-gradient(0deg, var(--hg-border) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--hg-border) 0 1px, transparent 1px 60px);
  background-color: var(--hg-cream-alt);
}
.hg-lp .hg-diag__image-note { font-size: 11px; color: var(--hg-muted); text-align: center; padding: 0 20px; line-height: 1.9; }
.hg-lp .hg-diag__label { font-size: 13px; color: var(--hg-shu-dark); margin-bottom: 8px; }
.hg-lp .hg-diag__title { font-family: "Shippori Mincho", serif; font-size: 19px; color: var(--hg-navy); margin-bottom: 12px; }
.hg-lp .hg-diag__desc { font-size: 13px; color: var(--hg-muted); line-height: 1.85; margin-bottom: 20px; }
@media (min-width: 780px) {
  .hg-lp .hg-diag { grid-template-columns: 0.9fr 1.1fr; padding: 28px; gap: 32px; }
}

/* ---- サービスラインナップ(提案メニュー、モバイル: 縦積み) ---- */
.hg-lp .hg-menu { display: grid; grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--hg-border); border-radius: 6px; overflow: hidden; }
.hg-lp .hg-menu__item { padding: 18px 20px; border-bottom: 1px solid var(--hg-border); }
.hg-lp .hg-menu__item:last-child { border-bottom: none; }
.hg-lp .hg-menu__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.hg-lp .hg-menu__name { font-size: 14.5px; color: var(--hg-navy); }
.hg-lp .hg-menu__price { font-size: 14px; font-weight: 600; color: var(--hg-shu-dark); white-space: nowrap; }
.hg-lp .hg-menu__desc { font-size: 12.5px; color: var(--hg-muted); margin-bottom: 4px; }
.hg-lp .hg-menu__duration { font-size: 11.5px; color: var(--hg-muted); }
.hg-lp .hg-menu__note { font-size: 12px; color: var(--hg-muted); margin-top: 16px; text-align: center; }
@media (min-width: 780px) {
  .hg-lp .hg-menu { grid-template-columns: repeat(2, 1fr); }
  .hg-lp .hg-menu__item { padding: 22px 26px; }
  .hg-lp .hg-menu__item:nth-child(odd) { border-right: 1px solid var(--hg-border); }
  .hg-lp .hg-menu__item:nth-last-child(-n+2):nth-child(odd),
  .hg-lp .hg-menu__item:nth-last-child(-n+2):nth-child(even) { border-bottom: none; }
  .hg-lp .hg-menu__name { font-size: 15px; }
}

/* ---- 運営者(モバイル: 縦積み) ---- */
.hg-lp .hg-about { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; text-align: center; }
.hg-lp .hg-about__photo {
  width: 160px; height: 160px; border-radius: 6px; background: var(--hg-cream-alt); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--hg-muted); text-align: center; padding: 16px;
  object-fit: cover;
}
.hg-lp .hg-about__quote { font-family: "Shippori Mincho", serif; font-size: 17px; color: var(--hg-navy); line-height: 1.85; margin-bottom: 14px; }
.hg-lp .hg-about__cred { font-size: 13.5px; color: var(--hg-muted); }
@media (min-width: 700px) {
  .hg-lp .hg-about { grid-template-columns: 200px 1fr; gap: 44px; text-align: left; }
  .hg-lp .hg-about__photo { width: 200px; height: 200px; margin: 0; }
  .hg-lp .hg-about__quote { font-size: 19px; margin-bottom: 16px; }
}

/* ---- 記事一覧(索引スタイル、モバイル: 縦積み) ---- */
.hg-lp .hg-articles { border-top: 1px solid var(--hg-border); }
.hg-lp .hg-article { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hg-border); }
.hg-lp .hg-article__left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.hg-lp .hg-article__cat { font-size: 10.5px; color: var(--hg-shu-dark); letter-spacing: .06em; flex-shrink: 0; width: 66px; }
.hg-lp .hg-article__title { font-family: "Shippori Mincho", serif; font-size: 14.5px; color: var(--hg-navy); }
.hg-lp .hg-article__date { font-size: 11.5px; color: var(--hg-muted); }
@media (min-width: 600px) {
  .hg-lp .hg-article { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; }
  .hg-lp .hg-article__left { gap: 18px; }
  .hg-lp .hg-article__cat { font-size: 11px; width: 76px; }
  .hg-lp .hg-article__title { font-size: 15.5px; }
  .hg-lp .hg-article__date { font-size: 12px; }
}

/* ---- FAQ ---- */
.hg-lp .hg-faq { max-width: 760px; margin: 0 auto; }
.hg-lp .hg-faq__item { border-bottom: 1px solid var(--hg-border); padding: 18px 0; }
.hg-lp .hg-faq__q { font-size: 14.5px; font-weight: 600; color: var(--hg-navy); margin-bottom: 8px; display: flex; gap: 10px; }
.hg-lp .hg-faq__q span { color: var(--hg-shu-dark); font-family: "Shippori Mincho", serif; }
.hg-lp .hg-faq__a { font-size: 13px; color: var(--hg-muted); padding-left: 22px; }
@media (min-width: 780px) {
  .hg-lp .hg-faq__item { padding: 22px 0; }
  .hg-lp .hg-faq__q { font-size: 15px; margin-bottom: 10px; gap: 12px; }
  .hg-lp .hg-faq__a { font-size: 13.5px; padding-left: 26px; }
}

/* ---- 最終CTA帯 ---- */
.hg-lp .hg-cta-band { background: var(--hg-navy-deep); color: var(--hg-cream); padding: 48px 0; text-align: center; }
.hg-lp .hg-cta-band .hg-serif { font-size: clamp(18px, 5vw, 26px); margin-bottom: 12px; }
.hg-lp .hg-cta-band__lead { font-size: 13px; color: rgba(247,242,231,.7); margin-bottom: 26px; }
.hg-lp .hg-cta-band__actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
@media (min-width: 600px) {
  .hg-lp .hg-cta-band { padding: 64px 0; }
  .hg-lp .hg-cta-band__lead { font-size: 13.5px; margin-bottom: 30px; }
  .hg-lp .hg-cta-band__actions { flex-direction: row; justify-content: center; gap: 16px; }
}

/* ---- アイコン(和テイスト: 円バッジは藍色地) ---- */
.hg-lp .hg-icon {
  width: 28px; height: 28px;
  color: var(--hg-shu-dark);
  margin: 0 auto 12px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: inherit;
}
.hg-lp .hg-3s__item .hg-icon { margin-bottom: 14px; }
.hg-lp .hg-pain__num + .hg-icon { margin-top: 12px; }

.hg-lp .hg-icon-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--hg-navy);
  color: var(--hg-cream);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.hg-lp .hg-icon-badge .hg-icon {
  width: 21px; height: 21px;
  color: inherit;
  margin: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
@media (min-width: 780px) {
  .hg-lp .hg-icon { width: 30px; height: 30px; margin-bottom: 14px; }
  .hg-lp .hg-icon-badge { width: 46px; height: 46px; margin-bottom: 16px; }
  .hg-lp .hg-icon-badge .hg-icon { width: 22px; height: 22px; }
}

/* ---- スクロール連動フェードイン(単体) ---- */
.hg-lp .hg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
.hg-lp .hg-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- スクロール連動フェードイン(段階的) ---- */
.hg-lp .hg-reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.hg-lp .hg-reveal-group.is-visible > * { opacity: 1; transform: translateY(0); }
.hg-lp .hg-reveal-group.is-visible > * .hg-icon { opacity: 1; transform: scale(1); }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(1) { transition-delay: .04s; }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(2) { transition-delay: .13s; }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(3) { transition-delay: .22s; }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(4) { transition-delay: .31s; }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(5) { transition-delay: .40s; }
.hg-lp .hg-reveal-group.is-visible > *:nth-child(6) { transition-delay: .49s; }

@media (prefers-reduced-motion: reduce) {
  .hg-lp .hg-hero__label, .hg-lp .hg-hero__title, .hg-lp .hg-hero__lead, .hg-lp .hg-hero__actions {
    animation: none !important; opacity: 1 !important;
  }
  .hg-lp .hg-reveal, .hg-lp .hg-reveal-group > *, .hg-lp .hg-icon { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   組織ドック診断ウィジェット(2026-07-10 本格再設計版)
   マウント先: <div id="hg-dock"></div>(front-page-full.html「#diagnosis」節)
   ============================================================ */

.hg-lp .hg-dock { max-width: 900px; margin: 0 auto; }
.hg-lp .hg-dock__panel, .hg-lp .hg-dock__report {
  background: #fff; border: 1px solid var(--hg-border); border-radius: 8px;
  padding: 22px 18px;
}
@media (min-width: 780px) { .hg-lp .hg-dock__panel, .hg-lp .hg-dock__report { padding: 34px 40px; } }

.hg-lp .hg-dock__step-label { font-size: 11.5px; font-weight: 700; color: var(--hg-shu-dark); letter-spacing: .1em; margin-bottom: 10px; }
.hg-lp .hg-dock__panel-title { font-size: clamp(18px, 4vw, 22px); color: var(--hg-navy); margin-bottom: 12px; }
.hg-lp .hg-dock__note { font-size: 12.5px; color: var(--hg-muted); line-height: 1.85; margin-bottom: 20px; }

/* 基本情報フォーム */
.hg-lp .hg-dock__form { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .hg-lp .hg-dock__form { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } }
.hg-lp .hg-dock__field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--hg-text); font-weight: 600; }
.hg-lp .hg-dock__field input, .hg-lp .hg-dock__field select {
  font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--hg-border); border-radius: 4px;
  background: var(--hg-cream); color: var(--hg-text); width: 100%;
}
.hg-lp .hg-dock__field input:focus, .hg-lp .hg-dock__field select:focus { outline: 2px solid var(--hg-gold); outline-offset: 1px; }

/* 進捗バー */
.hg-lp .hg-dock__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hg-lp .hg-dock__progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--hg-cream-alt); overflow: hidden; }
.hg-lp .hg-dock__progress-fill { height: 100%; background: var(--hg-gold); transition: width .3s ease; }
.hg-lp .hg-dock__progress-text { font-size: 11.5px; color: var(--hg-muted); white-space: nowrap; font-weight: 600; }

/* 回答の前提説明(各設問ページ冒頭) */
.hg-lp .hg-dock__howto {
  background: var(--hg-cream); border: 1px solid var(--hg-border); border-left: 3px solid var(--hg-gold);
  border-radius: 6px; padding: 14px 16px; margin-bottom: 18px;
}
.hg-lp .hg-dock__howto p { font-size: 12.5px; color: var(--hg-text); line-height: 1.8; margin: 0 0 8px; }
.hg-lp .hg-dock__howto ul { margin: 0 0 8px; padding-left: 1.3em; }
.hg-lp .hg-dock__howto li { font-size: 12px; color: var(--hg-muted); line-height: 1.8; }
.hg-lp .hg-dock__howto strong { color: var(--hg-navy); }
.hg-lp .hg-dock__howto-rev { font-size: 11.5px !important; color: var(--hg-muted) !important; margin-bottom: 0 !important; }

/* 設問カード */
.hg-lp .hg-dock__q { border: 1px solid var(--hg-border); border-radius: 6px; padding: 16px; margin-bottom: 14px; }
.hg-lp .hg-dock__q legend { font-size: 13.5px; font-weight: 700; color: var(--hg-navy); line-height: 1.7; padding: 0 2px 12px; }
.hg-lp .hg-dock__q--rev { background: var(--hg-cream-alt); }
.hg-lp .hg-dock__rev-tag {
  display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--hg-shu-dark);
  border: 1px solid var(--hg-shu-dark); border-radius: 3px; padding: 1px 6px; vertical-align: middle;
}
.hg-lp .hg-dock__opts { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 640px) { .hg-lp .hg-dock__opts { flex-direction: row; gap: 6px; } }
.hg-lp .hg-dock__opt {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hg-text);
  border: 1px solid var(--hg-border); border-radius: 4px; padding: 8px 10px; cursor: pointer; flex: 1;
  transition: border-color .15s ease, background .15s ease;
}
.hg-lp .hg-dock__opt:has(input:checked) { border-color: var(--hg-shu); background: rgba(168,69,46,.06); }
.hg-lp .hg-dock__opt input { flex-shrink: 0; accent-color: var(--hg-shu); }
.hg-lp .hg-dock__opt-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--hg-navy); color: var(--hg-cream);
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.hg-lp .hg-dock__opt-label { line-height: 1.4; }

.hg-lp .hg-dock__error { color: #B3382E; font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
.hg-lp .hg-dock__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.hg-lp .hg-dock__actions .hg-btn { flex: 0 0 auto; }
@media (max-width: 480px) { .hg-lp .hg-dock__actions { flex-direction: column; } .hg-lp .hg-dock__actions .hg-btn { width: 100%; justify-content: center; } }

/* ---- レポート ---- */
.hg-lp .hg-dock__rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid var(--hg-navy); padding-bottom: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.hg-lp .hg-dock__rep-title { font-size: clamp(17px, 3.5vw, 20px); color: var(--hg-navy); }
.hg-lp .hg-dock__rep-meta { font-size: 11.5px; color: var(--hg-muted); margin-top: 4px; }
.hg-lp .hg-dock__rep-badge { background: var(--hg-gold); color: var(--hg-navy); font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 3px; letter-spacing: .04em; white-space: nowrap; }

.hg-lp .hg-dock__card { background: var(--hg-cream); border: 1px solid var(--hg-border); border-radius: 6px; padding: 18px; margin-bottom: 16px; }
.hg-lp .hg-dock__card-title { font-size: 13px; font-weight: 700; color: var(--hg-navy); margin-bottom: 14px; }
.hg-lp .hg-dock__card-sub { display: block; font-size: 11px; font-weight: 500; color: var(--hg-muted); margin-top: 2px; }
.hg-lp .hg-dock__rep-grid2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 780px) { .hg-lp .hg-dock__rep-grid2 { grid-template-columns: 1fr 1fr; } }
.hg-lp .hg-dock__rep-grid2 .hg-dock__card { margin-bottom: 0; }

/* 健康スコア円 */
.hg-lp .hg-dock__card--score { text-align: center; }
.hg-lp .hg-dock__donut { width: 130px; height: 130px; margin: 0 auto; }
.hg-lp .hg-dock__donut-num { font-family: "Shippori Mincho", serif; font-size: 30px; font-weight: 800; fill: var(--hg-navy); }
.hg-lp .hg-dock__donut-sub { font-size: 11px; fill: var(--hg-muted); }
.hg-lp .hg-dock__zone { margin-top: 10px; font-size: 13px; font-weight: 700; }
.hg-lp .hg-dock__zone--good { color: #2E7E64; }
.hg-lp .hg-dock__zone--watch { color: var(--hg-gold-dark); }
.hg-lp .hg-dock__zone--focus, .hg-lp .hg-dock__zone--urgent { color: #B3382E; }

/* 壁マップ */
.hg-lp .hg-dock__wallbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hg-lp .hg-dock__wallbar-name { flex: 0 0 100px; font-size: 12.5px; color: var(--hg-navy); font-weight: 700; }
.hg-lp .hg-dock__wallbar-name em { display: block; font-style: normal; font-size: 10px; color: var(--hg-shu-dark); font-weight: 700; }
.hg-lp .hg-dock__wallbar-rel { color: var(--hg-gold-dark) !important; }
.hg-lp .hg-dock__wallbar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--hg-cream-alt); overflow: hidden; }
.hg-lp .hg-dock__wallbar-fill { display: block; height: 100%; border-radius: 999px; }
.hg-lp .hg-dock__wallbar-num { flex: 0 0 26px; font-size: 12px; font-weight: 700; color: var(--hg-navy); text-align: right; }
.hg-lp .hg-dock__wallbar.is-current .hg-dock__wallbar-name { color: var(--hg-shu-dark); }
.hg-lp .hg-dock__wallnote { font-size: 11.5px; color: var(--hg-muted); margin-top: 10px; }
.hg-lp .hg-dock__wallnote--rel { color: var(--hg-navy); font-weight: 600; margin-top: 6px; }

/* 汎用ゲージ(人的資本経営) */
.hg-lp .hg-dock__gauge { display: flex; align-items: center; gap: 10px; }
.hg-lp .hg-dock__gauge-track { flex: 1; height: 12px; border-radius: 999px; background: var(--hg-cream-alt); overflow: hidden; }
.hg-lp .hg-dock__gauge-fill { display: block; height: 100%; border-radius: 999px; }
.hg-lp .hg-dock__gauge-fill--good { background: #4E7A43; }
.hg-lp .hg-dock__gauge-fill--watch { background: var(--hg-gold); }
.hg-lp .hg-dock__gauge-fill--focus { background: #C0473F; }
.hg-lp .hg-dock__gauge-fill--urgent { background: #8A2A20; }
.hg-lp .hg-dock__gauge-num { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--hg-navy); }
.hg-lp .hg-dock__gauge-num span { font-size: 11px; font-weight: 500; color: var(--hg-muted); }
.hg-lp .hg-dock__hcm-note { font-size: 12px; color: var(--hg-muted); margin-top: 10px; line-height: 1.7; }

/* 経営者サマリー */
.hg-lp .hg-dock__summary { font-size: 14px; color: var(--hg-text); line-height: 1.9; }

/* レーダー */
.hg-lp .hg-dock__radar { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.hg-lp .hg-dock__radar-label { font-size: 9px; fill: var(--hg-muted); font-weight: 700; }

/* Top3 */
.hg-lp .hg-dock__top3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hg-lp .hg-dock__top3 ol { list-style: none; counter-reset: t3; }
.hg-lp .hg-dock__top3 li { counter-increment: t3; display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--hg-border); }
.hg-lp .hg-dock__top3 li::before { content: counter(t3) ". "; font-weight: 700; color: var(--hg-shu-dark); }
.hg-lp .hg-dock__top3 li span { font-weight: 700; color: var(--hg-navy); flex-shrink: 0; }
.hg-lp .hg-dock__top3-head { font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
.hg-lp .hg-dock__top3-head--weak { color: #B3382E; }
.hg-lp .hg-dock__top3-head--strong { color: #4E7A43; }

/* ヒートマップ */
.hg-lp .hg-dock__heatmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.hg-lp .hg-dock__heat { border-radius: 5px; padding: 10px 8px; text-align: center; border: 1px solid transparent; }
.hg-lp .hg-dock__heat span { display: block; font-size: 11.5px; font-weight: 700; color: var(--hg-text); margin-bottom: 4px; }
.hg-lp .hg-dock__heat em { font-style: normal; font-size: 10.5px; font-weight: 700; }
.hg-lp .hg-dock__heat--good { background: #EEF3EA; border-color: #CFDCC8; } .hg-lp .hg-dock__heat--good em { color: #4E7A43; }
.hg-lp .hg-dock__heat--watch { background: #F8F0DD; border-color: #E6D9B8; } .hg-lp .hg-dock__heat--watch em { color: var(--hg-gold-dark); }
.hg-lp .hg-dock__heat--focus { background: #F7E6E0; border-color: #E3C3BA; } .hg-lp .hg-dock__heat--focus em { color: #C0473F; }
/* 早期確認は重点確認より一段濃い赤系(2026-07-11: 従来は同色でラベルでしか区別できなかった) */
.hg-lp .hg-dock__heat--urgent { background: #F0D5CC; border-color: #D9A99E; } .hg-lp .hg-dock__heat--urgent em { color: #8A2A20; }

/* ヒートマップ下の色凡例(2026-07-11ユーザー指摘反映) */
.hg-lp .hg-dock__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.hg-lp .hg-dock__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--hg-text); }
.hg-lp .hg-dock__legend-chip { width: 14px; height: 14px; border-radius: 3px; border: 1px solid transparent; display: inline-block; }
.hg-lp .hg-dock__legend-chip--good { background: #EEF3EA; border-color: #CFDCC8; }
.hg-lp .hg-dock__legend-chip--watch { background: #F8F0DD; border-color: #E6D9B8; }
.hg-lp .hg-dock__legend-chip--focus { background: #F7E6E0; border-color: #E3C3BA; }
.hg-lp .hg-dock__legend-chip--urgent { background: #F0D5CC; border-color: #D9A99E; }
.hg-lp .hg-dock__legend-note { font-size: 10.5px; color: var(--hg-muted); margin-top: 6px; }

/* アラート */
.hg-lp .hg-dock__card--alert { background: #FBF3EC; border-color: #E9C9A8; }
.hg-lp .hg-dock__card--alert ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hg-lp .hg-dock__card--alert li { font-size: 12.5px; color: #6B4A2B; line-height: 1.8; padding-left: 16px; position: relative; }
.hg-lp .hg-dock__card--alert li::before { content: '!'; position: absolute; left: 0; font-weight: 800; color: #B3382E; }
.hg-lp .hg-dock__reliability { font-weight: 700; }

/* ロードマップ */
.hg-lp .hg-dock__roadmap { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 780px) { .hg-lp .hg-dock__roadmap { grid-template-columns: repeat(3, 1fr); } }
.hg-lp .hg-dock__phase { background: #fff; border: 1px solid var(--hg-border); border-radius: 6px; padding: 14px; }
.hg-lp .hg-dock__phase-name { font-family: "Shippori Mincho", serif; font-size: 13.5px; color: var(--hg-shu-dark); font-weight: 700; margin-bottom: 10px; }
.hg-lp .hg-dock__phase ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hg-lp .hg-dock__phase li { font-size: 12px; color: var(--hg-text); line-height: 1.7; }
.hg-lp .hg-dock__phase li span { display: block; font-size: 10.5px; font-weight: 700; color: var(--hg-navy); margin-bottom: 2px; }

/* NG施策 */
.hg-lp .hg-dock__card--ng { background: #F7E6E0; border-color: #E3C3BA; }
.hg-lp .hg-dock__card--ng .hg-dock__card-title { color: #8A2A20; }
.hg-lp .hg-dock__card--ng ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hg-lp .hg-dock__card--ng li { font-size: 12.5px; color: #6B2A20; line-height: 1.8; padding-left: 16px; position: relative; }
.hg-lp .hg-dock__card--ng li::before { content: '✕'; position: absolute; left: 0; font-weight: 800; }

/* 面談確認 */
.hg-lp .hg-dock__interview { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .hg-lp .hg-dock__interview { grid-template-columns: repeat(2, 1fr); } }
.hg-lp .hg-dock__interview > div { background: #fff; border: 1px solid var(--hg-border); border-radius: 6px; padding: 12px 14px; }
.hg-lp .hg-dock__int-k { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--hg-shu-dark); border: 1px solid var(--hg-shu-dark); border-radius: 3px; padding: 1px 7px; margin-bottom: 8px; }
.hg-lp .hg-dock__interview p { font-size: 12px; color: var(--hg-text); margin: 0 0 4px; }
.hg-lp .hg-dock__int-q { color: var(--hg-muted); font-style: italic; }

/* 免責・最終アクション */
.hg-lp .hg-dock__disclaimer { font-size: 11px; color: var(--hg-muted); line-height: 1.8; border-top: 1px solid var(--hg-border); padding-top: 14px; margin-bottom: 18px; }
.hg-lp .hg-dock__rep-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hg-lp .hg-dock__rep-actions .hg-btn { flex: 1 1 220px; justify-content: center; text-align: center; }

/* ---- 印刷(A4横1枚) ---- */
@media print {
  /* 2026-07-10レビュー指摘反映(重要度:高):
     旧ルールは `body *` を無条件で隠していたため、診断と無関係な通常ページの印刷(Ctrl+P)まで
     白紙になっていた。`.hg-dock-printing`(PDFボタン押下時のみbodyに付与)配下に限定する */
  body.hg-dock-printing * { visibility: hidden; }
  body.hg-dock-printing .hg-dock__report, body.hg-dock-printing .hg-dock__report * { visibility: visible; }
  body.hg-dock-printing .hg-dock__report {
    position: absolute; inset: 0; margin: 0; max-width: none; border: none; padding: 6mm;
    font-size: 9px;
  }
  body.hg-dock-printing .hg-dock__rep-actions { display: none !important; }
  /* 面談質問例・NG施策・免責文は画面では有用だが、A4横1枚への集約を優先し印刷時は省略
     (2026-07-10レビュー指摘反映(重要度:高): 全カード込みだと約3ページ分の高さになり
     「A4横1枚」の要件を満たせなかったため、要約に不可欠なカードのみへ絞り込む) */
  body.hg-dock-printing .hg-dock__interview,
  body.hg-dock-printing .hg-dock__card--ng,
  body.hg-dock-printing .hg-dock__disclaimer { display: none !important; }
  @page { size: A4 landscape; margin: 6mm; }
  body.hg-dock-printing .hg-dock__rep-head { padding-bottom: 6px; margin-bottom: 8px; }
  body.hg-dock-printing .hg-dock__rep-grid2 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  body.hg-dock-printing .hg-dock__roadmap { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  body.hg-dock-printing .hg-dock__heatmap { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; }
  body.hg-dock-printing .hg-dock__card { padding: 8px 10px !important; margin-bottom: 8px !important; break-inside: avoid; }
  body.hg-dock-printing .hg-dock__donut { width: 92px; height: 92px; }
  body.hg-dock-printing .hg-dock__radar { max-width: 190px; }
  body.hg-dock-printing .hg-dock__top3 { gap: 8px; }
  body.hg-dock-printing .hg-dock__phase { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-lp .hg-dock__progress-fill { transition: none; }
}

/* ============================================================
   LP追加セクション(2026-07-10: デザインhandoff分の未実装セクション)
   ============================================================ */

/* ---- ブリッジ(離職率への導入文) ---- */
.hg-lp .hg-bridge { max-width: 700px; margin: 0 auto; text-align: center; }
.hg-lp .hg-bridge__eyebrow { font-size: 11.5px; font-weight: 700; color: var(--hg-shu-dark); letter-spacing: .12em; margin-bottom: 12px; }
.hg-lp .hg-bridge__title { font-family: "Shippori Mincho", serif; font-size: clamp(19px, 4vw, 25px); color: var(--hg-navy); margin-bottom: 14px; line-height: 1.7; }
.hg-lp .hg-bridge__body { font-size: 13px; color: var(--hg-muted); line-height: 1.9; }

/* ---- 離職率グラフ(SVG自作。外部チャートライブラリ不使用) ---- */
.hg-lp .hg-turnover__note { text-align: left; font-size: 12.5px; color: var(--hg-muted); max-width: 640px; margin: 0 auto 28px; line-height: 1.9; }
.hg-lp .hg-turnover__note ul { padding-left: 1.2em; margin: 0; }
.hg-lp .hg-turnover__chart-wrap { display: flex; flex-direction: column; gap: 10px; }
.hg-lp .hg-turnover__row { display: flex; align-items: center; gap: 10px; }
.hg-lp .hg-turnover__axis-label {
  writing-mode: vertical-rl; font-size: 12px; font-weight: 700; color: var(--hg-muted); letter-spacing: .2em; flex-shrink: 0;
}
.hg-lp .hg-turnover__img { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; }
.hg-lp .hg-turnover__legend {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding-left: 10px; border-left: 1px solid var(--hg-border);
  font-size: 12px; font-weight: 700; color: #2c333c;
}
.hg-lp .hg-turnover__legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hg-lp .hg-turnover__legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.hg-lp .hg-turnover__source { text-align: right; font-size: 11px; color: var(--hg-muted); margin-top: 6px; }
@media (max-width: 640px) {
  .hg-lp .hg-turnover__row { flex-direction: column; align-items: stretch; }
  .hg-lp .hg-turnover__axis-label { writing-mode: horizontal-tb; text-align: center; }
  .hg-lp .hg-turnover__legend { flex-direction: row; flex-wrap: wrap; justify-content: center; border-left: none; padding-left: 0; }
}

/* ---- なぜ、いま診断が必要か ---- */
.hg-lp .hg-why { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
@media (min-width: 780px) { .hg-lp .hg-why { grid-template-columns: repeat(3, 1fr); } }
.hg-lp .hg-why__card { background: #fff; border: 1px solid var(--hg-border); border-radius: 8px; padding: 22px; }
.hg-lp .hg-why__title { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 15.5px; color: var(--hg-navy); margin-bottom: 10px; }
.hg-lp .hg-why__body { font-size: 12.5px; color: var(--hg-muted); line-height: 1.85; }
.hg-lp .hg-why__lead { text-align: center; font-family: "Shippori Mincho", serif; font-size: clamp(14px, 2.6vw, 17px); font-weight: 700; color: var(--hg-navy); }

/* ---- 診断の流れ(STEP①②) ---- */
.hg-lp .hg-dsteps__badge {
  display: inline-flex; align-items: center; gap: 8px; font-family: "Shippori Mincho", serif; font-weight: 700; font-size: 13px;
  padding: 6px 18px; border-radius: 4px; margin-bottom: 18px;
}
.hg-lp .hg-dsteps__badge--1 { background: var(--hg-navy); color: var(--hg-cream); }
.hg-lp .hg-dsteps__badge--2 { background: var(--hg-gold); color: var(--hg-navy); }
.hg-lp .hg-dsteps__row { background: var(--hg-cream-alt); border-radius: 8px; padding: 22px; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
@media (min-width: 780px) { .hg-lp .hg-dsteps__row { grid-template-columns: repeat(3, 1fr); } }
.hg-lp .hg-dsteps__item { text-align: center; }
.hg-lp .hg-dsteps__num {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; margin: 0 auto 10px;
}
.hg-lp .hg-dsteps__row--1 .hg-dsteps__num { background: var(--hg-gold); color: var(--hg-navy); }
.hg-lp .hg-dsteps__row--2 .hg-dsteps__num { background: var(--hg-navy); color: var(--hg-cream); }
.hg-lp .hg-dsteps__icon { height: 54px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.hg-lp .hg-dsteps__icon img { height: 54px; width: auto; object-fit: contain; }
.hg-lp .hg-dsteps__title { font-weight: 700; font-size: 13.5px; color: var(--hg-navy); margin-bottom: 6px; }
.hg-lp .hg-dsteps__body { font-size: 11.5px; color: var(--hg-muted); line-height: 1.7; }

/* ---- 安心バッジ ---- */
.hg-lp .hg-assurance {
  background: var(--hg-cream-alt); border-radius: 8px; padding: 22px; margin-bottom: 30px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.hg-lp .hg-assurance__badge {
  width: 60px; height: 60px; border-radius: 50%; background: var(--hg-gold); color: var(--hg-navy); font-weight: 700;
  font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; flex-shrink: 0;
}
.hg-lp .hg-assurance__list { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: #2c333c; font-weight: 600; }
.hg-lp .hg-assurance__list div { display: flex; gap: 8px; align-items: center; }
.hg-lp .hg-assurance__list span { color: #4E7A43; }

/* ---- 診断セクション本体(#diagnosis) ---- */
.hg-lp .hg-diagnosis-section .hg-section__lead { max-width: 640px; }

/* ---- 2つのCTA ---- */
.hg-lp .hg-cta2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 780px) { .hg-lp .hg-cta2 { grid-template-columns: repeat(2, 1fr); } }
.hg-lp .hg-cta2__card {
  position: relative; overflow: hidden; border-radius: 4px; padding: 32px 26px; display: flex; flex-direction: column; text-align: center;
}
.hg-lp .hg-cta2__card--primary {
  background: var(--hg-navy); box-shadow: inset 0 0 0 4px var(--hg-navy), inset 0 0 0 5px rgba(184,147,74,.35);
}
.hg-lp .hg-cta2__card--ghost {
  background: var(--hg-cream-alt); border: 1px solid var(--hg-border); box-shadow: inset 0 0 0 4px #fbf6ea, inset 0 0 0 5px rgba(184,147,74,.3);
}
.hg-lp .hg-cta2__watermark {
  font-family: "Shippori Mincho", serif; font-weight: 800; font-size: clamp(120px, 18vw, 190px);
  position: absolute; right: -14px; bottom: -50px; line-height: 1; z-index: 0; user-select: none; pointer-events: none;
}
.hg-lp .hg-cta2__card--primary .hg-cta2__watermark { color: rgba(247,242,231,.05); }
.hg-lp .hg-cta2__card--ghost .hg-cta2__watermark { color: rgba(32,52,74,.045); }
.hg-lp .hg-cta2__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.hg-lp .hg-cta2__seal {
  align-self: center; width: 52px; height: 52px; border-radius: 50%; font-family: "Shippori Mincho", serif; font-weight: 800;
  font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; letter-spacing: .05em;
}
.hg-lp .hg-cta2__card--primary .hg-cta2__seal { background: #B3382E; color: #fdf3ea; border: 1px solid #d05b4f; }
.hg-lp .hg-cta2__card--ghost .hg-cta2__seal { background: #fbf6ea; color: var(--hg-navy); border: 1.5px solid var(--hg-gold); }
.hg-lp .hg-cta2__title { font-family: "Shippori Mincho", serif; font-size: clamp(18px, 2.6vw, 21px); font-weight: 800; margin-bottom: 12px; }
.hg-lp .hg-cta2__card--primary .hg-cta2__title { color: var(--hg-cream); }
.hg-lp .hg-cta2__card--ghost .hg-cta2__title { color: var(--hg-navy); }
.hg-lp .hg-cta2__desc { font-size: 12.5px; margin-bottom: 22px; flex: 1; line-height: 1.85; }
.hg-lp .hg-cta2__card--primary .hg-cta2__desc { color: #b6c0d0; }
.hg-lp .hg-cta2__card--ghost .hg-cta2__desc { color: var(--hg-muted); }
.hg-lp .hg-cta2__note { font-size: 10.5px; margin-top: 12px; }
.hg-lp .hg-cta2__card--primary .hg-cta2__note { color: #8895a8; }
.hg-lp .hg-cta2__card--ghost .hg-cta2__note { color: var(--hg-muted); }

/* ==================================================
   ほねぐみ。モバイルUI統合版
   1. モバイルフッター
   2. スライドメニュー
================================================== */
@media screen and (max-width: 1023px) {

  /* ==================================================
     1. モバイルフッター
  ================================================== */
  body.mblt-footer-mobile-buttons {
    margin-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-footer-menu-buttons {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 999990 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    min-height: calc(68px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding:
      7px
      8px
      calc(7px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;

    background: rgba(247, 242, 232, 0.98) !important;
    border-top: 1px solid rgba(201, 161, 95, 0.45) !important;

    box-shadow:
      0 -8px 28px rgba(27, 42, 65, 0.12),
      0 -1px 0 rgba(255, 255, 255, 0.75) !important;

    overflow: visible !important;
  }

  /* トップは3項目、投稿ページは目次を含む4項目に自動対応 */
  .mobile-footer-menu-buttons > li.menu-button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .mobile-footer-menu-buttons
  > li.menu-button
  > .menu-button-in {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 5px 3px !important;
    box-sizing: border-box !important;

    color: #1b2a41 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(27, 42, 65, 0.09) !important;
    border-radius: 10px !important;

    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(27, 42, 65, 0.045) !important;
  }

  .mobile-footer-menu-buttons .menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 23px !important;
    margin: 0 0 2px !important;

    color: inherit !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .mobile-footer-menu-buttons .menu-caption {
    color: inherit !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  /* フッターの無料診断 */
  .mobile-footer-menu-buttons
  > li.menu-button
  > a[href*="#diagnosis"] {
    color: #f7f2e8 !important;
    background: #1b2a41 !important;
    border-color: #1b2a41 !important;
    box-shadow: 0 4px 13px rgba(27, 42, 65, 0.18) !important;
  }

  /* フッターの無料相談 */
  .mobile-footer-menu-buttons
  > li.menu-button
  > a[href*="/application-forms/"] {
    color: #1b2a41 !important;
    background: #ead7a8 !important;
    border-color: rgba(176, 125, 42, 0.32) !important;
    box-shadow: 0 4px 13px rgba(176, 125, 42, 0.13) !important;
  }

  .mobile-footer-menu-buttons
  > li.menu-button
  > .menu-button-in:active {
    transform: translateY(1px) !important;
    opacity: 0.88;
  }


  /* ==================================================
     2. スライドメニュー本体
  ================================================== */
  #navi-menu-content {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1000001 !important;

    width: min(88vw, 390px) !important;
    max-width: 390px !important;
    height: 100vh !important;
    height: 100dvh !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    color: #1b2a41 !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.48),
        rgba(255, 255, 255, 0) 180px
      ),
      #f7f2e8 !important;

    box-shadow:
      18px 0 48px rgba(16, 29, 48, 0.24),
      1px 0 0 rgba(201, 161, 95, 0.3) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 背景オーバーレイ */
  #navi-menu-close {
    z-index: 1000000 !important;
    background: #101d30 !important;
  }

  #navi-menu-input:checked ~ #navi-menu-close {
    opacity: 0.58 !important;
  }

  /* 閉じるボタン */
  #navi-menu-content .navi-menu-close-button {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: #1b2a41 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(27, 42, 65, 0.1);
    border-radius: 50%;

    font-size: 19px;
    line-height: 1;

    box-shadow: 0 4px 14px rgba(27, 42, 65, 0.08);
  }

  /* メニュー全体 */
  #navi-menu-content .menu-drawer {
    display: block !important;
    margin: 0 !important;
    padding:
      calc(72px + env(safe-area-inset-top))
      18px
      calc(36px + env(safe-area-inset-bottom)) !important;

    box-sizing: border-box !important;
    list-style: none !important;
  }

  #navi-menu-content .menu-drawer > li {
    position: relative;
    display: block !important;

    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;

    list-style: none !important;
    text-align: left !important;
  }

  /*
   以前の診断アイコン・相談アイコン・人数バッジ・説明文を削除
  */
#navi-menu-content .menu-drawer > li > a::before {
  content: none !important;
  display: none !important;
}

  /* 全メニュー項目を同じデザインに統一 */
  #navi-menu-content .menu-drawer > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 44px 12px 16px !important;
    box-sizing: border-box !important;

    color: #1b2a41 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(27, 42, 65, 0.1) !important;
    border-radius: 10px !important;

    font-family:
      "Noto Sans JP",
      "Yu Gothic",
      sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.035em !important;
    text-decoration: none !important;

    box-shadow: 0 3px 12px rgba(27, 42, 65, 0.045) !important;
    transform: none !important;

    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      transform 0.12s ease !important;
  }

  /*
   無料診断・無料相談も特別装飾を解除
   ほかのメニュー項目と完全に同じデザイン
  */
  #navi-menu-content .menu-diagnosis > a,
  #navi-menu-content .menu-consult > a,
  #navi-menu-content .wall > a,
  #navi-menu-content .menu-support > a,
  #navi-menu-content .menu-profile > a,
  #navi-menu-content .menu-privacy > a {
    min-height: 52px !important;
    padding: 12px 44px 12px 16px !important;

    color: #1b2a41 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(27, 42, 65, 0.1) !important;
    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;

    box-shadow: 0 3px 12px rgba(27, 42, 65, 0.045) !important;
  }

  /* 全項目共通の右矢印 */
  #navi-menu-content .menu-drawer > li > a::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;

    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;

    color: transparent !important;
    background: transparent !important;

    border: 0 !important;
    border-top: 1.5px solid #b07d2a !important;
    border-right: 1.5px solid #b07d2a !important;

    transform: translateY(-50%) rotate(45deg) !important;
  }

/* ==================================================
   金色の文字小見出し
   リンクではなくCSSで表示
================================================== */

/* 見出しを付ける項目の余白 */
#navi-menu-content .menu-drawer > li.menu-brand,
#navi-menu-content .menu-drawer > li.menu-diagnosis,
#navi-menu-content .menu-drawer > li.wall-30,
#navi-menu-content .menu-drawer > li.menu-support,
#navi-menu-content .menu-drawer > li.menu-profile {
  margin-top: 24px !important;
}

#navi-menu-content .menu-drawer > li.menu-brand {
  margin-top: 0 !important;
}

/* 金色小見出しの共通デザイン */
#navi-menu-content .menu-drawer > li.menu-brand::before,
#navi-menu-content .menu-drawer > li.menu-diagnosis::before,
#navi-menu-content .menu-drawer > li.wall-30::before,
#navi-menu-content .menu-drawer > li.menu-support::before,
#navi-menu-content .menu-drawer > li.menu-profile::before {
  content: "";
  display: block !important;

  width: auto !important;
  height: auto !important;
  margin: 0 0 8px 4px !important;
  padding: 0 !important;

  color: #9b722f !important;
  background: transparent !important;
  border: 0 !important;

  font-family:
    "Noto Sans JP",
    "Yu Gothic",
    sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-align: left !important;

  box-shadow: none !important;
  transform: none !important;
}

/* 表示する文字 */
#navi-menu-content .menu-drawer > li.menu-brand::before {
  content: "Top" !important;
}

#navi-menu-content .menu-drawer > li.menu-diagnosis::before {
  content: "お問い合わせ" !important;
}

#navi-menu-content .menu-drawer > li.wall-30::before {
  content: "組織の壁とは" !important;
}

#navi-menu-content .menu-drawer > li.menu-support::before {
  content: "ご支援について" !important;
}

#navi-menu-content .menu-drawer > li.menu-profile::before {
  content: "運営者" !important;
}
	
  /* ==================================================
     ページによる見た目の差をなくす
  ================================================== */
  #navi-menu-content
  .menu-drawer
  > li.current-menu-item
  > a,

  #navi-menu-content
  .menu-drawer
  > li.current_page_item
  > a,

  #navi-menu-content
  .menu-drawer
  > li
  > a[aria-current="page"] {
    color: #1b2a41 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(27, 42, 65, 0.1) !important;
    box-shadow: 0 3px 12px rgba(27, 42, 65, 0.045) !important;
  }

  /* タップ時 */
  #navi-menu-content .menu-drawer > li > a:active {
    color: #1b2a41 !important;
    background: #f0e6d1 !important;
    border-color: rgba(176, 125, 42, 0.38) !important;
    transform: translateY(1px) !important;
  }

  /* キーボード操作 */
  #navi-menu-content .menu-drawer > li > a:focus-visible,
  #navi-menu-content .navi-menu-close-button:focus-visible {
    outline: 2px solid #b07d2a !important;
    outline-offset: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navi-menu-content,
  #navi-menu-content a,
  #navi-menu-content .navi-menu-close-button,
  .mobile-footer-menu-buttons .menu-button-in {
    transition: none !important;
  }
}
/* ==================================================
   モバイルメニュー：記事一覧・法令順守
================================================== */
@media screen and (max-width: 1023px) {

  /* ---------- 金色の小見出し ---------- */
  #navi-menu-content .menu-articles::before,
  #navi-menu-content .menu-privacy::before {
    display: block !important;
    margin: 26px 2px 9px !important;

    color: #9b722f !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: .12em !important;
    text-align: left !important;
  }

  #navi-menu-content .menu-articles::before {
    content: "直筆記事" !important;
  }

  #navi-menu-content .menu-privacy::before {
    content: "法令順守" !important;
  }

  /* ---------- 記事一覧 ---------- */
  #navi-menu-content .menu-articles > a {
    min-height: 48px;
    padding: 13px 34px 13px 4px !important;

    color: #1b2a41 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(27, 42, 65, .11) !important;
    border-radius: 0 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;

    box-shadow: none !important;
  }

  #navi-menu-content .menu-articles > a::after {
    content: "›" !important;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    color: #b07d2a !important;
    font-size: 20px !important;
    font-weight: 400 !important;
  }

  /* ---------- プライバシーポリシー ---------- */
  #navi-menu-content .menu-privacy {
    margin-top: 0 !important;
    text-align: left !important;
  }

  #navi-menu-content .menu-privacy > a {
    position: relative;
    display: block !important;
    min-height: 44px;
    padding: 12px 34px 12px 4px !important;

    color: #5f625f !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(27, 42, 65, .09) !important;
    border-radius: 0 !important;

    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-decoration: none !important;

    box-shadow: none !important;
  }

  #navi-menu-content .menu-privacy > a::after {
    content: "›" !important;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);

    color: #b07d2a !important;
    font-size: 18px !important;
    font-weight: 400 !important;
  }
}

/* ==================================================
   ほねぐみ。ヘッダー
   Cocoon「トップメニュー（右寄せ）」用
================================================== */

/* 固定ヘッダーでアンカー位置が隠れないようにする */
#walls,
#diagnosis {
  scroll-margin-top: 88px;
}


/* ==================================================
   PC・1024px以上
================================================== */
@media screen and (min-width: 1024px) {

  /* ヘッダー外枠 */
  #header-container {
    position: relative;
    z-index: 9990;

    width: 100%;
    min-height: 70px;

    background: #f7f2e8 !important;
    border-bottom: 1px solid rgba(176, 125, 42, 0.24);

    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75),
      0 5px 20px rgba(27, 42, 65, 0.035);
  }

  /*
   Cocoon「トップメニュー（右寄せ）」の
   ロゴとナビゲーションを横並びにする
  */
  #header-container-in.hlt-top-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 1180px !important;
    min-height: 70px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;

    background: transparent !important;
  }

  /* ---------- ロゴ側 ---------- */
  #header-container-in.hlt-top-menu #header {
    flex: 0 0 auto !important;

    width: auto !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  #header-container-in.hlt-top-menu #header-in {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-container-in.hlt-top-menu .logo-header {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-container-in.hlt-top-menu
  .site-name-text-link {
    display: block !important;
    margin: 0 !important;
    padding: 4px 0 !important;

    color: #1b2a41 !important;
    text-decoration: none !important;
  }

  #header-container-in.hlt-top-menu
  .site-name-text {
    color: #1b2a41 !important;

    font-family:
      "Shippori Mincho",
      "Noto Serif JP",
      serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }

  /* ---------- ナビゲーション側 ---------- */
  #header-container-in.hlt-top-menu #navi {
    flex: 1 1 auto !important;

    width: auto !important;
    margin: 0 0 0 36px !important;

    background: transparent !important;
  }

  #header-container-in.hlt-top-menu #navi-in {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 通常ナビ項目 */
  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li:not(.header-diagnosis)
  > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: 70px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    color: #1b2a41 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;

    font-family:
      "Noto Sans JP",
      "Yu Gothic",
      sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;

    transition:
      color 0.18s ease,
      border-color 0.18s ease !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li:not(.header-diagnosis)
  > a:hover {
    color: #8b6427 !important;
    background: transparent !important;
    border-bottom-color: #b07d2a !important;
  }

  /*
   Cocoonが生成するcaption-wrapも
   メニュー中央にそろえる
  */
  #header-container-in.hlt-top-menu
  #navi-in
  .caption-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: 100% !important;
  }

  /* ---------- 無料診断CTA ---------- */
  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li.header-diagnosis {
    margin-left: 12px !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li.header-diagnosis
  > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 124px !important;
    height: 42px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;

    color: #f7f2e8 !important;
    background: #1b2a41 !important;
    border: 1px solid #1b2a41 !important;
    border-radius: 10px !important;

    font-family:
      "Noto Sans JP",
      "Yu Gothic",
      sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;

    box-shadow: 0 5px 15px rgba(27, 42, 65, 0.15) !important;

    transition:
      background-color 0.18s ease,
      transform 0.12s ease,
      box-shadow 0.18s ease !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li.header-diagnosis
  > a::after {
    content: "›";
    display: inline-block;
    margin-left: 8px;

    color: #d7b36a;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li.header-diagnosis
  > a:hover {
    color: #f7f2e8 !important;
    background: #101d30 !important;

    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(27, 42, 65, 0.2) !important;
  }

  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li.header-diagnosis
  > a:active {
    transform: translateY(1px);
  }

  /* フォーカス表示 */
  #header-container-in.hlt-top-menu
  #navi-in
  a:focus-visible,
  #header-container-in.hlt-top-menu
  .site-name-text-link:focus-visible {
    outline: 2px solid #b07d2a !important;
    outline-offset: 3px !important;
  }
}


/* ==================================================
   タブレット・モバイル
   モバイルフッターと役割が重複するためPCナビは非表示
================================================== */
@media screen and (max-width: 1023px) {

  #header-container {
    position: relative !important;

    min-height: 56px !important;

    background: #f7f2e8 !important;
    border-bottom: 1px solid rgba(176, 125, 42, 0.22) !important;
    box-shadow: none !important;
  }

  #header-container-in.hlt-top-menu {
    display: block !important;

    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #f7f2e8 !important;
  }

  #header-container-in.hlt-top-menu #header {
    display: block !important;

    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  #header-container-in.hlt-top-menu #header-in {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  #header-container-in.hlt-top-menu .logo-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- サイト名 ---------- */
  #header-container-in.hlt-top-menu
  .site-name-text-link {
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #1b2a41 !important;
    text-decoration: none !important;
  }

  #header-container-in.hlt-top-menu
  .site-name-text {
    color: #1b2a41 !important;

    font-family:
      "Shippori Mincho",
      "Noto Serif JP",
      serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap !important;
  }

  /* ==================================================
     モバイル右側の専門領域表示
     指定した位置で2行に固定
  ================================================== */
  #header-container-in.hlt-top-menu
  .logo-header::after {
    content:
      "AI時代に合った30〜100名企業の\A組織・人事制度策定支援";

    display: block;
    flex: 0 0 auto;

    margin: 0 0 0 auto;
    padding: 0 0 0 12px;

    color: #8b6427;
    font-family:
      "Noto Sans JP",
      "Yu Gothic",
      sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.035em;
    text-align: left;

    /* \Aを入れた位置だけで改行 */
    white-space: pre;
  }

  /*
   PCヘッダーナビは非表示。
   操作は既存のモバイルフッターに集約する。
  */
  #header-container-in.hlt-top-menu #navi {
    display: none !important;
  }

  #walls,
  #diagnosis {
    scroll-margin-top: 16px;
  }
}


/* ==================================================
   小さいスマートフォン
================================================== */
@media screen and (max-width: 370px) {

  #header-container-in.hlt-top-menu
  .logo-header::after {
    margin-left: auto;
    padding-left: 8px;

    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  #header-container-in.hlt-top-menu
  .site-name-text {
    font-size: 18px !important;
    letter-spacing: 0.06em !important;
  }
}


/* ==================================================
   ヘッダーとページ背景の視覚的な分離
================================================== */
#header-container {
  background: #fbf8f1 !important;
  border-bottom: 1px solid rgba(176, 125, 42, 0.28) !important;
}

#header-container-in.hlt-top-menu {
  background: transparent !important;
}


/* ==================================================
   PC
   固定ヘッダーとして認識できる薄い影
================================================== */
@media screen and (min-width: 1024px) {

  #header-container {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.85),
      0 6px 20px rgba(27, 42, 65, 0.06) !important;
  }

  /* ナビゲーションの通常状態 */
  #header-container-in.hlt-top-menu
  #navi-in
  > .menu-header
  > li:not(.header-diagnosis)
  > a {
    color: #1b2a41 !important;
  }
}


/* ==================================================
   モバイル
   影を弱めて境界線を中心にする
================================================== */
@media screen and (max-width: 1023px) {

  #header-container {
    background: #fbf8f1 !important;

    box-shadow:
      0 2px 10px rgba(27, 42, 65, 0.035) !important;
  }

  #header-container-in.hlt-top-menu {
    background: transparent !important;
  }
}