@charset "UTF-8";
/*!
    Template: swell
    Theme Name: Helpdog SWELL Theme
    Theme URI: https://github.com/nocoinc/hd-wordpress
    Description: SWELLの子テーマ - Helpdogプロジェクト用
    Version: 1.0.0
    Author: nocoinc
    Author URI: https://github.com/nocoinc

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ==========================================================================
   Sass変数（ブレークポイント）
   ========================================================================== */
/* ==========================================================================
   CSS変数（style.css / editor-style.css 共通）
   ========================================================================== */
:root {
  /* =============================================
     Helpdog 独自変数
     ============================================= */
  /* フォント */
  --hd-font-body: "Noto Sans JP", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hd-font-heading: "Nunito Sans", var(--hd-font-body);
  /* レイアウト */
  --hd-content-width: 1200px;
  --hd-inner-width-wide: 1240px;
  --hd-inner-width-narrow: 860px;
  --hd-single-width: 1540px;
  --hd-card-gap: 32px;
  --hd-single-gap: 50px;
  --hd-gutter: 20px;
  /* ブランドカラー */
  --hd-color-primary: #00704A; /* Figma: メイングリーン */
  --hd-color-footer-tagline: #024f24; /* TODO(design): main(#00704a) or secondary(#188862) に統一検討 */
  --hd-color-hero-heading: #005a3b; /* TODO(design): main(#00704a) or secondary(#188862) に統一検討 */
  --hd-color-green-accent: #188862; /* Figma: セカンダリグリーン */
  --hd-color-accent: #FFB74B;
  --hd-highlight-yellow: #ffdb5a; /* Figma: ハイライト黄色 */
  --hd-highlight-red: #EB5757; /* Figma: ハイライト赤 */
  --hd-gradient-cta-border: linear-gradient(96deg, #41aa6d 0%, #c0ec85 100%); /* Figma: グリーングラデーション */
  --hd-color-divider: rgba(128, 128, 128, 0.3);
  /* テキスト */
  --hd-color-text-main: #2A222B; /* Figma: メインブラック — 本文、見出し、タイトル */
  --hd-color-text-dark: #3b3939; /* Figma: 濃いグレー — 目次の非アクティブ等 */
  --hd-color-text-secondary: #78787c; /* Figma: セカンダリグレー — メタ情報、日付、著者、装飾線 */
  /* 背景・ボーダー */
  --hd-color-bg-dark: #121212;
  --hd-color-bg-main: #faf9fb; /* Figma: 背景 */ /* TODO: TOC・コードブロック・セクションリンク等がページ背景と同化する。意図通りか確認を。 */
  --hd-color-bg-green-light: #E4F7CC; /* Figma: 薄いグリーン */
  --hd-color-bg-hover: #f5f5f5;
  --hd-color-border: #cacaca; /* Figma: 薄いグレー — 枠線、区切り線 */
  --hd-color-border-bottom-bar: #414141;
  /* バルーン（吹き出しブロック） */
  --hd-color-balloon-left-bg: #c8e6d7;
  --hd-color-balloon-right-bg: #cfe3f5;
  --hd-color-balloon-left-border: rgba(0, 112, 74, 0.3); /* --hd-color-primary 30% */
  --hd-color-balloon-right-border: rgba(61, 121, 213, 0.3); /* --color_deep02 30% */
  /* オーバーレイ・シャドウ */
  --hd-color-overlay: rgba(0, 0, 0, 0.5);
  --hd-shadow-cta-btn: 0px 20px 70px -20px rgba(50, 50, 93, 0.25),
                       0px 0px 50px -30px rgba(0, 0, 0, 0.15);
  /* TOC */
  --hd-color-toc-hover-bg: rgba(0, 0, 0, 0.04);
  /* 角丸 */
  --hd-border-radius-sm: 4px;
  --hd-border-radius-md: 6px;
  --hd-border-radius-lg: 8px;
  /* ホバー */
  --hd-hover-opacity: 0.7;
  --hd-hover-opacity-btn: 0.85;
  /* =============================================
     SWELL CSS変数 上書き一覧
     SWELLカスタマイザーで出力される変数を子テーマから制御する。
     ★ = helpdog カラーに上書き済み
     各変数の (default: ...) は SWELL カスタマイザー初期値。
     ============================================= */
  /* --- 基本カラー ---
     SWELL全体の色調を決めるコア変数。
     カスタマイザー「サイト全体設定 > 基本カラー」で設定される。
     ブロックエディタのカラーパレット・ボタン・見出し等に波及する。 */
  --color_main: var(--hd-color-primary); /* ★ メインカラー / ボタン・見出し装飾・リンクホバー等全域 (default: #1a7a5a) */
  --color_text: var(--hd-color-text-main); /* ★ 本文テキスト色 / body, p, li 等 (default: #333) */
  --color_link: #0e3487; /* リンクテキスト色 / .post_content a (default: #1176d4) */
  --hd-color-htag: #036635; /* TODO(design): main(#00704a) or secondary(#188862) に統一検討 */
  --color_htag: var(--hd-color-htag); /* ★ 見出しタグ色 / h2, h3, h4 の装飾 (default: color_main と同値) */
  --color_bg: #ffffff; /* サイト背景色 / body background (default: #fdfdfd) */ /* SWELL互換性変数（子テーマでは未使用、削除不可） */
  --color_main_thin: rgba(0, 112, 74, 0.05); /* メインカラー薄 / 見出し背景・ホバー・薄色装飾 (default: main を 5% opacity で自動算出) */
  --color_main_dark: rgba(0, 80, 53, 1); /* メインカラー濃 / ボタンホバー・アクティブ (default: main を 25% 暗くして自動算出) */
  /* --- グラデーション ---
     グラデーション付きボタン・メインビジュアル等で使用。
     カスタマイザー「サイト全体設定 > 基本カラー」のグラデーション設定。 */
  --color_gradient1: #ddf5eb; /* ★ グラデーション色1 / ボタン・MV背景の開始色 (default: #d8ffff) */
  --color_gradient2: #7be8b9; /* ★ グラデーション色2 / ボタン・MV背景の終了色 (default: #87e7ff) */
  /* --- ヘッダー / フッター ---
     カスタマイザー「ヘッダー」「フッター」で設定される。
     ※ 子テーマはカスタムヘッダー/フッターを使うため直接影響は少ないが、
       SWELLのモバイルメニューやウィジェットエリアで参照される。 */
  --color_header_bg: #fdfdfd; /* ヘッダー背景 / .l-header (default: #fdfdfd) */
  --color_header_text: #333; /* ヘッダーテキスト / .l-header a, ナビリンク (default: #333) */
  --color_footer_bg: #fdfdfd; /* フッター背景 / .l-footer (default: #fdfdfd) */
  --color_footer_text: #333; /* フッターテキスト / .l-footer, .l-footer a (default: #333) */
  --color_content_bg: #ffffff; /* コンテンツエリア背景 / .post_content 領域 (default: #ffffff) */ /* SWELL互換性変数（子テーマでは未使用、削除不可） */
  /* --- リスト装飾 ---
     is-style-* クラス付きリストのアイコン色。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     ピラーページの装飾リスト、投稿本文のリスト装飾で表示される。 */
  --color_list_check: var(--hd-color-primary); /* ★ ✓ チェックリスト / .is-style-check_list li::before (default: #04384c) */
  --color_list_num: var(--hd-color-primary); /* ★ ① 丸数字リスト / .is-style-num_circle li::before (default: #04384c) */
  --color_list_good: #86dd7b; /* ○ メリットリスト / .is-style-good_list li::before (default: #86dd7b) */
  /* TODO(design): --color_icon_check (#86d67c) とほぼ同色。統一可能か確認 */
  --color_list_triangle: #f4e03a; /* △ 三角リスト / .is-style-triangle_list li::before (default: #f4e03a) */
  --color_list_bad: #f36060; /* × デメリットリスト / .is-style-bad_list li::before (default: #f36060) */
  /* TODO(design): --color_icon_batsu と完全一致。共通変数に抽出可能 */
  /* --- FAQ ---
     SWELLのFAQブロック（wp:swell/faq）のQ/Aアイコン色。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     ※ 子テーマのFAQ（hd-faq.php）は独自CSSのため直接影響しない。 */
  --color_faq_q: var(--hd-color-primary); /* ★ FAQ「Q」アイコン色 / .swell-block-faq .faq_q::before (default: #d55656) */
  --color_faq_a: var(--hd-color-green-accent); /* ★ FAQ「A」アイコン色 / .swell-block-faq .faq_a::before (default: #6599b7) */
  /* --- マーカー（蛍光ペン） ---
     エディタのツールバーで適用するテキストハイライト色。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     投稿本文中の <span class="swl-marker"> や <mark> で使用。 */
  --color_mark_blue: #8ed1ff; /* 青マーカー / .mark_blue (default: #b7e3ff) */
  --color_mark_green: #8ef0a0; /* 緑マーカー / .mark_green (default: #bdf9c3) */
  --color_mark_yellow: #f9eb6c; /* 黄マーカー / .mark_yellow (default: #fcf69f) */
  --color_mark_orange: #ffcb99; /* 橙マーカー / .mark_orange (default: #ffddbc) */
  /* --- カラーパレット Deep ---
     ブロックエディタの「色設定」で選べる濃い色のプリセット。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     ボタン・背景・テキスト色の選択肢として使用。 */
  --color_deep01: #e44141; /* Deep 赤 / ブロック背景・ボタン色 (default: #e44141) */
  --color_deep02: #3d79d5; /* Deep 青 / ブロック背景・ボタン色 (default: #3d79d5) */
  --color_deep03: var(--hd-color-primary); /* ★ Deep 緑 / ブロック背景・ボタン色 (default: #63a84d) */
  --color_deep04: #f09f4d; /* Deep 橙 / ブロック背景・ボタン色 (default: #f09f4d) */
  /* --- カラーパレット Pale ---
     ブロックエディタの「色設定」で選べる淡い色のプリセット。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     ボックス背景・グループブロック背景の選択肢として使用。 */
  --color_pale01: #fff2f0; /* Pale 赤 / ブロック背景 (default: #fff2f0) */
  --color_pale02: #f3f8fd; /* Pale 青 / ブロック背景 (default: #f3f8fd) */
  --color_pale03: #EBF6F1; /* ★ Pale 緑 / ブロック背景 (default: #f1f9ee) */
  --color_pale04: #fdf9ee; /* Pale 黄 / ブロック背景 (default: #fdf9ee) */
  /* --- アイコンボックス ---
     SWELLアイコンボックスブロック（is-style-icon_*）の前景・背景色。
     カスタマイザー「エディター設定 > カラーセット」で設定。
     投稿本文中の装飾ボックスで使用。 */
  --color_icon_good: #3cd250; /* Good ○ 前景 / .is-style-icon_good::before (default: #3cd250) */
  --color_icon_good_bg: #ecffe9; /* Good ○ 背景 / .is-style-icon_good background (default: #ecffe9) */
  --color_icon_bad: #4b73eb; /* Bad × 前景 / .is-style-icon_bad::before (default: #4b73eb) */
  --color_icon_bad_bg: #eafaff; /* Bad × 背景 / .is-style-icon_bad background (default: #eafaff) */
  --color_icon_info: #f578b4; /* Info ℹ 前景 / .is-style-icon_info::before (default: #f578b4) */
  --color_icon_info_bg: #fff0fa; /* Info ℹ 背景 / .is-style-icon_info background (default: #fff0fa) */
  --color_icon_announce: #ffa537; /* Announce 📢 前景 / .is-style-icon_announce::before (default: #ffa537) */
  /* TODO(design): --color_icon_point (#ffa639) とほぼ同色。統一可能か確認 */
  --color_icon_announce_bg: #fff5f0; /* Announce 📢 背景 / .is-style-icon_announce background (default: #fff5f0) */
  --color_icon_pen: #7a7a7a; /* Pen ✏ 前景 / .is-style-icon_pen::before (default: #7a7a7a) */
  --color_icon_book: #787364; /* Book 📖 前景 / .is-style-icon_book::before (default: #787364) */
  --color_icon_book_bg: #f8f6ef; /* Book 📖 背景 / .is-style-icon_book background (default: #f8f6ef) */
  --color_icon_point: #ffa639; /* ポイント / .is-style-big_icon_point (default: #ffa639) */
  /* TODO(design): --color_icon_announce (#ffa537) とほぼ同色。統一可能か確認 */
  --color_icon_check: #86d67c; /* チェック / .is-style-big_icon_check (default: #86d67c) */
  /* TODO(design): --color_list_good (#86dd7b) とほぼ同色。統一可能か確認 */
  --color_icon_batsu: #f36060; /* バツ / .is-style-big_icon_batsu (default: #f36060) */
  /* TODO(design): --color_list_bad と完全一致。共通変数に抽出可能 */
  --color_icon_hatena: #5295cc; /* はてな / .is-style-big_icon_hatena (default: #5295cc) */
  --color_icon_caution: #f7da38; /* 注意 / .is-style-big_icon_caution (default: #f7da38) */
  --color_icon_memo: #84878a; /* メモ / .is-style-big_icon_memo (default: #84878a) */
  /* --- ボーダープリセット ---
     ブロックエディタの「ボーダー設定」で選べるプリセット4種。
     カスタマイザー「エディター設定 > ボーダーセット」で設定。
     グループブロック・カラムブロック等の枠線に使用。 */
  --border01: solid 1px var(--hd-color-primary); /* 実線 / .is-style-border_sg 等 (default: solid 1px color_main) */
  --border02: double 4px var(--hd-color-primary); /* 二重線 / .is-style-border_dg 等 (default: double 4px color_main) */
  --border03: dashed 2px hsla(0, 0%, 78%, 0.5); /* 破線 / .is-style-border_dd 等 (default: dashed 2px グレー50%) */
  --border04: solid 4px hsla(0, 0%, 78%, 0.15); /* 太実線 / .is-style-border_bg 等 (default: solid 4px グレー15%) */
  /* --- ステップブロック ---
     SWELLステップブロック（wp:swell/step）の矢印色。
     投稿本文中の手順説明ブロックで使用。 */
  --swl-step_arrow_color: #dedede; /* ステップ間の矢印色 / .swell-block-step .step_arrow (default: #dedede) */
  /* --- フォント（SWELL側出力のため参照のみ） ---
     カスタマイザー「サイト全体設定 > 基本デザイン」で設定。
     子テーマでは body の font-family で上書きしている。 */
  --swl-fz--root: 16px; /*                     html の font-size / 全体の rem 基準 (default: 16px) */
  /* --swl-fz--content: 16px;                  投稿本文の font-size / .post_content (default: 16px, SP は別値) */
  /* --swl-fz--side: 14px;                     サイドバーの font-size / .l-sidebar (default: 14px) */
  /* --swl-font_family: "游ゴシック体",...;     フォントファミリー / body (default: 游ゴシック系) */
  /* --swl-font_weight: 500;                   フォントウェイト / body (default: 500) */
  /* --- サイジング（SWELL側出力のため参照のみ） ---
     カスタマイザー「サイト全体設定 > 基本デザイン」で設定。
     子テーマでは --hd-content-width 等で独自に制御。 */
  /* --container_size: 1200px;                 サイト幅 / .l-container (default: 1200px) */
  /* --article_size: 900px;                    記事幅 / .l-mainContent (default: 900px) */
  /* --swl-pad_container: 48px;                コンテナ左右パディング / .l-container (default: 48px, SP: 4vw) */
}

@media (width < 768px) {
  :root {
    --hd-card-gap: 16px;
    --hd-single-gap: 20px;
    --hd-gutter: 16px;
  }
}
/*!
    Template: swell
    Theme Name: Helpdog SWELL Theme
    Theme URI: https://github.com/nocoinc/hd-wordpress
    Description: SWELLの子テーマ - Helpdogプロジェクト用
    Version: 1.0.0
    Author: nocoinc
    Author URI: https://github.com/nocoinc

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ==========================================================================
   共有 Mixin
   ========================================================================== */
/* ==========================================================================
   ベース
   ========================================================================== */
/* スクリーンリーダー専用（フォーカス時のみ表示） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only--focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--hd-color-primary, #00704A);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

body {
  font-family: var(--hd-font-body);
}

body.home,
body.archive,
body.search,
body.error404 {
  color: var(--hd-color-text-main);
}

/* ==========================================================================
   SWELL上書き（共通）
   ========================================================================== */
body.home .l-content,
body.search .l-content,
body.error404 .l-content,
body.single .l-content {
  max-width: none;
  padding: 0;
}

body.home #content,
body.search #content,
body.error404 #content,
body.single #content {
  max-width: none;
  padding: 0;
}

/* #body_wrap の z-index:1 を解除し、ヘッダー/ドロワーが sticky CTA の上に出られるようにする */
#body_wrap {
  z-index: auto;
}

body.home #body_wrap,
body.search #body_wrap,
body.error404 #body_wrap,
body.single #body_wrap,
body.archive #body_wrap {
  padding-top: 135px;
}
@media (width < 768px) {
  body.home #body_wrap,
  body.search #body_wrap,
  body.error404 #body_wrap,
  body.single #body_wrap,
  body.archive #body_wrap {
    padding-top: 129px;
  }
}

body.home .l-header,
body.single .l-header {
  display: none;
}

body.home .l-footer:not(.hd-footer),
body.single .l-footer:not(.hd-footer) {
  display: none;
}

body.home .hd-footer.l-footer,
body.home .hd-footer,
body.single .hd-footer.l-footer,
body.single .hd-footer {
  background: #fff;
  margin: 0;
  padding: 0;
}

body.home .p-mainVisual,
body.home .p-postSlider {
  display: none;
}

/* ==========================================================================
   共通コンテナ
   ========================================================================== */
.hd-inner {
  max-width: var(--hd-content-width);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

/* ==========================================================================
   WordPress管理バー対応（ログイン時のみ）
   ========================================================================== */
body.admin-bar .hd-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .hd-header {
    top: 46px;
  }
}
/* ==========================================================================
   カスタムヘッダー
   ========================================================================== */
.hd-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  will-change: transform;
}

.hd-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-header__main {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--hd-color-border);
  padding: 15px 24px;
}

.hd-header__main .hd-header__inner {
  display: flex;
  align-items: center;
  height: 48px;
  gap: 40px;
}

.hd-header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  flex-shrink: 0;
}

.hd-header__logo-img {
  height: 44px;
  width: auto;
}

.hd-header__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.hd-header__nav > a,
.hd-header__dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--hd-color-text-dark);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  height: 48px;
  line-height: 20px;
}

.hd-header__nav > a:hover,
.hd-header__dropdown > a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-header__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* --- メガメニュー --- */
.hd-header__dropdown {
  position: static;
  display: flex;
  align-items: center;
}

.hd-header__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-top: 1px solid var(--hd-color-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
}

/* ホバーブリッジ（トリガーとパネル間のギャップをカバー） */
.hd-header__mega::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.hd-header__dropdown:hover .hd-header__mega {
  opacity: 1;
  visibility: visible;
}

.hd-header__dropdown:hover > a .hd-header__chevron {
  transform: rotate(180deg);
}

.hd-header__mega-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* ヘルプドッグとは: 2カラムレイアウト */
.hd-header__mega-cols {
  display: flex;
  gap: 48px;
}

.hd-header__mega-group {
  flex: 1;
  min-width: 0;
}

.hd-header__mega-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-header__mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-header__mega-list a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--hd-color-text-main);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
}

.hd-header__mega-list a:hover {
  background: var(--hd-color-bg-main, #f5f5f5);
  color: var(--hd-color-primary);
}

/* 特長: 4カラムグリッド */
.hd-header__mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-header__mega-grid a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--hd-color-text-main);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.hd-header__mega-grid a:hover {
  background: var(--hd-color-bg-main, #f5f5f5);
  color: var(--hd-color-primary);
}

.hd-header__mega-links {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hd-color-border);
}

.hd-header__mega-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--hd-color-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: opacity 0.2s;
}

.hd-header__mega-links a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hd-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--hd-border-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hd-header__btn:hover {
  opacity: 0.8;
}

.hd-header__btn--primary {
  color: #fff;
  background: var(--hd-color-primary);
  border: 1px solid var(--hd-color-primary);
}

.hd-header__btn--ghost {
  color: var(--hd-color-primary);
  border: 1px solid var(--hd-color-primary);
  background: #fff;
}

.hd-header__btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hd-header__categories {
  position: relative;
  background: var(--hd-color-text-dark);
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-header__cat-inner {
  display: flex;
  align-items: stretch;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-header__cat-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* グラデーションマスク: スクロール位置に応じて端をフェード */
  mask-image: linear-gradient(to right, black, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 80px), transparent);
}
.hd-header__cat-nav::-webkit-scrollbar {
  display: none;
}
.hd-header__cat-nav.is-scrolled-start {
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.hd-header__cat-nav.is-scrolled-end {
  mask-image: linear-gradient(to right, transparent, black 80px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px);
}
.hd-header__cat-nav.no-scroll {
  mask-image: none;
  -webkit-mask-image: none;
}

.hd-header__cat-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-decoration: none;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.1;
  transition: opacity 0.2s;
}

.hd-header__cat-nav a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-header__cat-nav a.is-active {
  background: #fff;
  color: var(--hd-color-text-dark);
  opacity: 1;
}

/* --- カテゴリバー検索 --- */
.hd-header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s;
}

.hd-header__search-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.hd-header__search {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  margin: 0;
  z-index: 2;
}

.hd-header__search-field {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.hd-header__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.hd-header__search-input {
  width: 100%;
  height: 36px;
  padding: 0 16px 0 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--hd-border-radius-md);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.hd-header__search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.hd-header__search-input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.hd-header__search-submit {
  height: 36px;
  padding: 0 20px;
  background: #fff;
  color: var(--hd-color-text-dark);
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  border-radius: var(--hd-border-radius-md);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.hd-header__search-submit:hover {
  background: rgba(255, 255, 255, 0.85);
}

.hd-header__search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}

.hd-header__search-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.hd-header__categories.is-searching .hd-header__cat-nav,
.hd-header__categories.is-searching .hd-header__search-btn {
  visibility: hidden;
}

.hd-header__categories.is-searching .hd-header__search {
  display: flex;
}

@keyframes hd-progress-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.hd-header__progress {
  height: 8px;
}

.hd-header__progress::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--hd-color-primary);
  transform-origin: left;
  transform: scaleX(0);
  animation: hd-progress-grow linear;
  animation-timeline: scroll();
}

/* ==========================================================================
   ハンバーガーボタン（タブレット以下で表示）
   ========================================================================== */
.hd-menu-toggle {
  display: none;
}

.hd-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.hd-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hd-color-text-main);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.hd-header__hamburger span + span {
  margin-top: 6px;
}

/* ✕ アニメーション */
.hd-menu-toggle:checked ~ .hd-header__main .hd-header__hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hd-menu-toggle:checked ~ .hd-header__main .hd-header__hamburger span:nth-child(2) {
  opacity: 0;
}
.hd-menu-toggle:checked ~ .hd-header__main .hd-header__hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   モバイルメニュードロワー
   ========================================================================== */
.hd-mobile-menu {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
}

.hd-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: var(--hd-color-overlay);
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.hd-mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 85vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s;
}

/* ドロワー開状態 — ヘッダーのz-indexを目次(1002)より上に引き上げる */
.hd-header:has(.hd-menu-toggle:checked) {
  z-index: 1100;
}

.hd-menu-toggle:checked ~ .hd-mobile-menu {
  pointer-events: auto;
  visibility: visible;
}
.hd-menu-toggle:checked ~ .hd-mobile-menu .hd-mobile-menu__overlay {
  opacity: 1;
}
.hd-menu-toggle:checked ~ .hd-mobile-menu .hd-mobile-menu__panel {
  transform: translateX(0);
}

/* スクロールロック */
body:has(.hd-menu-toggle:checked) {
  overflow: hidden;
}

/* ドロワーヘッダー */
.hd-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hd-color-border);
}
.hd-mobile-menu__header img {
  height: 28px;
  width: auto;
}

.hd-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--hd-color-text-secondary);
}

/* ドロワーボディ */
.hd-mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

/* アコーディオン */
.hd-mobile-menu__accordion {
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  cursor: pointer;
  list-style: none;
}
.hd-mobile-menu__trigger::-webkit-details-marker {
  display: none;
}
.hd-mobile-menu__trigger::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.hd-mobile-menu__accordion[open] .hd-mobile-menu__trigger::after {
  transform: rotate(180deg);
}

.hd-mobile-menu__sub {
  padding: 0 20px 12px;
}
.hd-mobile-menu__sub a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--hd-color-text-main);
  font-size: 0.875rem;
  border-radius: 6px;
  transition: background-color 0.15s;
}
.hd-mobile-menu__sub a:hover {
  background: var(--hd-color-bg-main, #f5f5f5);
}

/* フラットリンク */
.hd-mobile-menu__link {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  color: var(--hd-color-text-main);
  font-size: 0.9375rem;
  font-weight: 700;
  border-bottom: 1px solid var(--hd-color-border);
}

/* ドロワーCTA */
.hd-mobile-menu__actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hd-color-border);
}

.hd-mobile-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: var(--hd-border-radius-md);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.hd-mobile-menu__btn--primary {
  color: #fff;
  background: var(--hd-color-primary);
}

.hd-mobile-menu__btn--ghost {
  color: var(--hd-color-primary);
  border: 1px solid var(--hd-color-primary);
  background: #fff;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
/* --- 段階的ナビ格納 --- */
@media (width < 1400px) {
  .hd-header__hamburger {
    display: flex;
  }
  .hd-header__btn-arrow {
    display: none;
  }
  .hd-header__cat-nav {
    justify-content: flex-start;
  }
  .hd-header__mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hd-header__mega-cols {
    gap: 32px;
  }
  .hd-header__nav > :nth-child(n+7) {
    display: none;
  }
}
@media (width < 1150px) {
  .hd-header__nav > :nth-child(n+5) {
    display: none;
  }
}
@media (width < 1024px) {
  .hd-header__nav > :nth-child(n+3) {
    display: none;
  }
}
@media (width < 900px) {
  .hd-header__main {
    padding: 15px 16px;
  }
  .hd-header__main .hd-header__inner {
    gap: 16px;
  }
  .hd-header__nav {
    display: none;
  }
  .hd-header__actions {
    margin-left: auto;
  }
  .hd-header__hamburger {
    margin-left: 0;
  }
}
@media (width < 768px) {
  .hd-header__main {
    padding: 12px 16px;
  }
  .hd-header__main .hd-header__inner {
    gap: 12px;
  }
  .hd-header__btn--ghost {
    display: none;
  }
}
/* ==========================================================================
   ヒーローセクション
   ========================================================================== */
.hd-hero {
  padding: 60px 0 110px;
  background: #fff;
}

.hd-hero__inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-hero__heading {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 84px;
  color: var(--hd-color-hero-heading);
  line-height: 1.24;
}

/* NEW + 新着記事 の見出し行 */
.hd-hero__label-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hd-hero__featured {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "label image" "text  image";
  grid-template-rows: auto 1fr;
  gap: var(--hd-card-gap);
  margin-bottom: 48px;
}

.hd-hero__label-row {
  grid-area: label;
}

.hd-hero__featured-image {
  grid-area: image;
  aspect-ratio: 16/9;
}

.hd-hero__featured-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hd-hero__featured-label {
  color: var(--hd-highlight-red);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.24;
}

.hd-hero__featured-sub {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  margin: 0;
  line-height: 1.24;
}

.hd-hero__featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.5;
}

.hd-hero__featured-title a {
  color: var(--hd-color-text-main);
  text-decoration: none;
}

.hd-hero__featured-title a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-hero__featured-image a {
  display: block;
}

.hd-hero__featured-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--hd-border-radius-lg);
  border: 1px solid var(--hd-color-border);
}

@media (width < 768px) {
  .hd-hero {
    padding: 40px 0 60px;
  }
  .hd-hero__heading {
    font-size: 1.75rem;
    margin-bottom: 28px;
  }
  .hd-hero__label-row {
    grid-area: auto;
    order: -1;
    margin-bottom: 4px;
  }
  .hd-hero__featured-sub {
    font-size: 1.5rem;
  }
  /* モバイルではgrid-template-areasを解除してHTML順（画像→テキスト）で表示 */
  .hd-hero__featured {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .hd-hero__featured::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--hd-color-divider);
  }
  .hd-hero__featured-image {
    grid-area: auto;
    order: 0;
  }
  .hd-hero__featured-text {
    grid-area: auto;
    order: 1;
  }
  .hd-hero__featured-title {
    font-size: 1.125rem;
  }
}
/* ==========================================================================
   記事カード
   ========================================================================== */
.hd-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hd-card-gap);
}

.hd-card-grid--2row {
  row-gap: 54px;
}

.hd-card {
  min-width: 0;
}

.hd-card a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

.hd-card a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-card__thumb {
  order: -1;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--hd-border-radius-sm);
  border: 1px solid var(--hd-color-border);
  aspect-ratio: 16/9;
}

.hd-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.hd-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 20px;
  line-height: 1.34;
  color: var(--hd-color-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hd-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--hd-color-text-secondary);
  flex-wrap: wrap;
}

.hd-card__date {
  font-weight: 700;
  white-space: nowrap;
}

.hd-card__author {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--hd-color-text-main);
}

.hd-card__author-icon {
  display: inline-block;
  width: 18px;
  height: 16px;
  background: url("images/common/author-icon.svg") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

@media (width < 768px) {
  .hd-card-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .hd-card a {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }
  .hd-card__body {
    flex: 1;
    min-width: 0;
  }
  .hd-card__thumb {
    order: 0;
    width: 120px;
    flex-shrink: 0;
    margin-bottom: 0;
    aspect-ratio: 16/9;
  }
  .hd-card__title {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .hd-card {
    padding-bottom: 16px;
    position: relative;
  }
  .hd-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--hd-color-divider);
  }
  .hd-card:last-child {
    padding-bottom: 0;
  }
  .hd-card:last-child::after {
    display: none;
  }
  .hd-card__meta {
    gap: 8px;
  }
}
/* ==========================================================================
   PickUpセクション
   ========================================================================== */
.hd-pickup {
  background: var(--hd-color-bg-dark);
  padding: 90px 0 110px;
}

.hd-pickup__inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-pickup__header {
  margin-bottom: 58px;
}

.hd-pickup__label {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--hd-color-accent);
  margin-bottom: 12px;
  line-height: 1.24;
}

.hd-pickup__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.24;
}

.hd-pickup .hd-card__title {
  color: #fff;
}

.hd-pickup .hd-card__meta {
  color: rgba(255, 255, 255, 0.6);
}

.hd-pickup .hd-card__thumb img {
  border-color: var(--hd-color-border);
}

.hd-pickup .hd-card__author {
  color: rgba(255, 255, 255, 0.6);
}

.hd-pickup .hd-card__author-icon {
  width: 20px;
  height: 20px;
}

@media (width < 768px) {
  .hd-pickup {
    padding: 48px 0 56px;
  }
  .hd-pickup__header {
    margin-bottom: 32px;
  }
}
/* ==========================================================================
   カテゴリセクション
   ========================================================================== */
.hd-category {
  padding: 60px 0;
}

.hd-category__inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-category__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.hd-category__title {
  font-size: 2.125rem;
  font-weight: 700;
  margin: 0;
}

.hd-category__title a {
  text-decoration: none;
  color: var(--hd-color-text-main);
}

.hd-category__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hd-color-text-secondary);
  text-decoration: none;
  line-height: 24px;
  transition: opacity 0.2s;
}

.hd-category__more::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("images/common/expand-circle-right.svg") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}

.hd-category__more:hover {
  opacity: var(--hd-hover-opacity);
}

@media (width < 768px) {
  .hd-category {
    padding: 40px 0;
  }
  .hd-category__header {
    margin-bottom: 24px;
  }
  .hd-category__title {
    font-size: 1.375rem;
  }
}
/* ==========================================================================
   アーカイブページ
   ========================================================================== */
body.error404 {
  background: var(--hd-color-bg-main);
}

.hd-archive-header {
  background: var(--hd-color-bg-main);
  padding: 30px 0 0;
}

.hd-archive-header__inner {
  max-width: var(--hd-single-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 0 var(--hd-single-gap);
}

.hd-archive-header__inner > .hd-breadcrumb,
.hd-archive-header__inner > .hd-archive-header__title,
.hd-archive-header__inner > .hd-archive-header__count {
  grid-column: 2;
}

.hd-archive-header__count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hd-color-text-secondary);
  margin: 8px 0 0;
}

.hd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
}

.hd-breadcrumb__item {
  color: var(--hd-color-text-secondary);
  text-decoration: none;
  padding: 4px 0;
}

.hd-breadcrumb__item:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-breadcrumb__item--current {
  color: var(--hd-color-primary);
}

.hd-breadcrumb__sep {
  display: flex;
  align-items: center;
  color: var(--hd-color-text-secondary);
}

.hd-breadcrumb__sep svg {
  width: 16px;
  height: 16px;
}

.hd-archive-header__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  margin: 0;
  line-height: 1.24;
}

.hd-archive-content {
  background: var(--hd-color-bg-main);
  padding: 30px 0 110px;
}

.hd-archive-content__inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-card-grid--archive {
  row-gap: 54px;
}

.hd-pagination {
  display: flex;
  justify-content: center;
  margin-top: 54px;
  padding: 0 var(--hd-gutter);
}

.hd-pagination__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hd-pagination__btn,
.hd-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-sm);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  text-decoration: none;
  letter-spacing: -0.2px;
  line-height: 1.5;
  transition: background 0.2s, color 0.2s;
}

a.hd-pagination__btn:hover,
a.hd-pagination__num:hover {
  background: var(--hd-color-bg-hover);
}

.hd-pagination__num--current {
  background: var(--hd-color-primary);
  color: #fff;
  border-color: var(--hd-color-primary);
}

.hd-pagination__btn--disabled {
  opacity: 0.3;
  cursor: default;
}

.hd-pagination__dots {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  letter-spacing: -0.2px;
}

.hd-pagination__btn svg {
  width: 24px;
  height: 24px;
}

@media (width < 1280px) {
  .hd-archive-header__inner {
    padding: 0 var(--hd-gutter);
    grid-template-columns: 1fr;
  }
  .hd-archive-header__inner > .hd-breadcrumb,
  .hd-archive-header__inner > .hd-archive-header__title,
  .hd-archive-header__inner > .hd-archive-header__count {
    grid-column: 1;
  }
  .hd-archive-header__title {
    font-size: 1.75rem;
  }
}
@media (width < 768px) {
  .hd-archive-header__title {
    font-size: 1.5rem;
  }
}
@media (width >= 768px) {
  .hd-pagination__links {
    gap: 20px;
  }
}
/* ==========================================================================
   カテゴリページ - 記事一覧（3カラム外）
   ========================================================================== */
.hd-category-posts {
  background: #fff;
  padding: 100px 0;
}

.hd-category-posts .hd-inner {
  max-width: var(--hd-inner-width-wide);
}

.hd-category-posts__heading {
  font-size: 2.125rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 40px;
  line-height: 1.24;
}

@media (width < 768px) {
  .hd-category-posts {
    padding: 60px 0;
  }
  .hd-category-posts__heading {
    font-size: 1.5rem;
  }
}
/* ==========================================================================
   カテゴリページ - 2ページ目以降のタイトル付きパンくずエリア
   ========================================================================== */
.hd-category-title {
  grid-column: 2;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--hd-color-text-main);
  margin: 20px 0 0;
}

.hd-3col-breadcrumb--title {
  padding-top: 60px;
  padding-bottom: 60px;
}

.hd-category-posts--flat {
  padding-top: 0;
  background: var(--hd-color-bg-main);
}

@media (width < 1280px) {
  .hd-3col-breadcrumb--title .hd-category-title {
    grid-column: 1;
  }
}
@media (width < 768px) {
  .hd-category-title {
    font-size: 1.75rem;
  }
  .hd-3col-breadcrumb--title {
    padding: 40px var(--hd-gutter) 40px;
  }
}
/* ==========================================================================
   カテゴリページ - ピラーコンテンツ
   ========================================================================== */
.hd-pillar {
  background: #fff;
  padding: 0 0 60px;
}

.hd-pillar__inner {
  max-width: var(--hd-inner-width-narrow);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-pillar__content {
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--hd-color-text-main);
}

/* ピラーコンテンツ hr 装飾 */
.hd-pillar__content hr {
  border: none;
  border-top: 1px solid var(--hd-color-border);
  margin: 48px 0;
}

/* ピラー目次 */
.hd-pillar-toc {
  background: var(--hd-color-bg-main);
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-sm, 4px);
  padding: 24px 32px;
  margin-bottom: 40px;
}

.hd-pillar-toc__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--hd-color-text-main);
}

.hd-pillar-toc ol {
  margin: 0;
  padding-left: 1.5em;
  list-style: decimal;
}

.hd-pillar-toc li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.hd-pillar-toc li:last-child {
  margin-bottom: 0;
}

.hd-pillar-toc a {
  color: var(--hd-color-primary);
  text-decoration: none;
  font-weight: 500;
}

.hd-pillar-toc a:hover {
  text-decoration: underline;
}

/* ピラー関連記事リンクリスト */
.hd-pillar-links {
  background: var(--hd-color-bg-main);
  padding: 20px 24px;
  border-radius: var(--hd-border-radius-sm, 4px);
  margin: 24px 0;
}

.hd-pillar-links__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hd-color-primary);
  margin: 0 0 12px;
}

.hd-pillar-links ul {
  margin: 0;
  padding-left: 1.5em;
  list-style: disc;
}

.hd-pillar-links li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.hd-pillar-links li:last-child {
  margin-bottom: 0;
}

.hd-pillar-links a {
  color: var(--hd-color-primary);
  text-decoration: none;
  font-weight: 500;
}

.hd-pillar-links a:hover {
  text-decoration: underline;
}

/* ピラーコンテンツ レスポンシブ */
@media (width < 768px) {
  .hd-pillar-toc {
    padding: 16px 20px;
  }
  .hd-pillar-intro {
    padding: 16px 20px;
  }
  .hd-pillar-links {
    padding: 16px 20px;
  }
  .hd-pillar__content hr {
    margin: 36px 0;
  }
}
/* ==========================================================================
   カテゴリページ - 記事一覧見出し
   ========================================================================== */
.hd-archive-content__heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  margin: 0 0 32px;
  line-height: 1.3;
}

/* ==========================================================================
   カテゴリページ - 3カラムレイアウト対応
   ========================================================================== */
body.category {
  color: var(--hd-color-text-main);
  background: var(--hd-color-bg-main);
}

.hd-main .hd-pillar__content {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-main .hd-card-grid--archive {
  grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   投稿ページ - カテゴリバナー
   ========================================================================== */
/* ==========================================================================
   検索結果ページ - リスト形式
   ========================================================================== */
.hd-search-results {
  max-width: 800px;
  margin: 0 auto;
}

.hd-search-result {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-search-result:first-child {
  padding-top: 0;
}

.hd-search-result:last-child {
  border-bottom: none;
}

.hd-search-result__thumb {
  flex-shrink: 0;
  order: 1;
  width: 160px;
  height: 107px;
  border-radius: var(--hd-border-radius-md);
  overflow: hidden;
  display: block;
}

.hd-search-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hd-search-result__body {
  flex: 1;
  min-width: 0;
}

.hd-search-result__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
}

.hd-search-result__title a {
  color: var(--hd-color-text-main);
  text-decoration: none;
  transition: color 0.2s;
}

.hd-search-result__title a:hover {
  color: var(--hd-color-primary);
}

.hd-search-result__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  margin: 0 0 10px;
}

.hd-search-result__cat {
  color: var(--hd-color-primary);
  font-weight: 700;
  text-decoration: none;
}

.hd-search-result__cat:hover {
  text-decoration: underline;
}

.hd-search-result__sep {
  color: var(--hd-color-text-secondary);
}

.hd-search-result__date {
  color: var(--hd-color-text-secondary);
}

.hd-search-result__excerpt {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--hd-color-text-main);
  margin: 0;
}

.hd-search-result__excerpt mark,
.hd-search-result__title mark {
  background: var(--color_mark_yellow);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}

@media (width < 768px) {
  .hd-search-result {
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }
  .hd-search-result__thumb {
    order: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }
  .hd-search-result__title {
    font-size: 1.0625rem;
  }
  .hd-search-result__excerpt {
    font-size: 0.8125rem;
  }
}
/* ==========================================================================
   検索・404ページ - 結果なし / エラー表示
   ========================================================================== */
.hd-no-results {
  text-align: center;
  padding: 80px 0;
}

.hd-no-results__text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  margin: 0 0 12px;
}

.hd-no-results__hint {
  font-size: 0.9375rem;
  color: var(--hd-color-text-secondary);
  margin: 0 0 32px;
}

.hd-no-results__btn {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background: var(--hd-color-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--hd-border-radius-md);
  text-decoration: none;
  transition: opacity 0.2s;
}

.hd-no-results__btn:hover {
  opacity: var(--hd-hover-opacity-btn);
}

.hd-search-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  gap: 8px;
}

.hd-search-form__input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-md);
  font-size: 0.9375rem;
  font-family: inherit;
  outline: none;
}

.hd-search-form__input:focus {
  border-color: var(--hd-color-primary);
}

.hd-search-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--hd-color-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  border: none;
  border-radius: var(--hd-border-radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.hd-search-form__btn:hover {
  opacity: var(--hd-hover-opacity-btn);
}

/* ==========================================================================
   検索プレースホルダー ローテーション
   ========================================================================== */
.hd-search-placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.4s;
}

.hd-search-placeholder.is-visible {
  opacity: 1;
}

/* ヘッダー検索 */
.hd-header__search-field .hd-search-placeholder {
  left: 40px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  max-width: calc(100% - 56px);
}

/* 404検索 */
.hd-search-form .hd-search-placeholder-wrap {
  position: relative;
  flex: 1;
}
.hd-search-form .hd-search-placeholder-wrap .hd-search-form__input {
  width: 100%;
}

.hd-search-form .hd-search-placeholder {
  left: 16px;
  color: var(--hd-color-text-secondary);
  font-size: 0.9375rem;
  max-width: calc(100% - 32px);
}

/* ==========================================================================
   投稿ページ - ベース
   ========================================================================== */
body.single {
  color: var(--hd-color-text-main);
  background: var(--hd-color-bg-main);
}

/* ==========================================================================
   投稿ページ - メインコンテンツ
   ========================================================================== */
.hd-main > .hd-breadcrumb {
  margin-bottom: 20px;
}

.hd-main h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 24px;
  line-height: 1.24;
}

.hd-main__updated {
  margin-bottom: 16px;
}

.hd-main__updated time {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hd-color-text-secondary);
}

.hd-main__author-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.hd-main__author-icon {
  display: inline-block;
  width: 18px;
  height: 16px;
  background: url("images/common/author-icon.svg") no-repeat center;
  background-size: contain;
}

.hd-main__author-mini span {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--hd-color-text-secondary);
}

.hd-main__eyecatch {
  margin-top: 24px;
  margin-bottom: 28px;
  aspect-ratio: 16/9;
}

.hd-main__eyecatch img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-sm);
}

/* ==========================================================================
   投稿ページ - ピラーコールアウト
   ========================================================================== */
.hd-pillar-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  margin-bottom: 28px;
  background: var(--hd-color-bg-main);
  border-left: 4px solid var(--hd-color-primary);
  border-radius: 0 var(--hd-border-radius-sm) var(--hd-border-radius-sm) 0;
}

.hd-pillar-callout__icon {
  width: 20px;
  height: 20px;
  color: var(--hd-color-primary);
  flex-shrink: 0;
}

.hd-pillar-callout__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--hd-color-text-main);
  line-height: 1.6;
}

.hd-pillar-callout__text a {
  color: var(--hd-color-primary);
  text-decoration: none;
  font-weight: 700;
}

.hd-pillar-callout__text a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   投稿ページ - 著者プロフィール
   ========================================================================== */
.hd-single-author {
  padding: 36px 0;
}

.hd-single-author__inner {
  max-width: var(--hd-inner-width-narrow);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
  display: flex;
  gap: 28px;
  align-items: center;
}

.hd-single-author__avatar img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.hd-single-author__info {
  flex: 1;
}

.hd-single-author__label {
  font-size: 1rem;
  color: var(--hd-color-text-secondary);
  display: block;
  margin-bottom: 10px;
}

.hd-single-author__name {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--hd-color-text-main);
}

.hd-single-author__desc {
  font-size: 1rem;
  margin: 0;
  line-height: 2;
  color: var(--hd-color-text-main);
}

/* ==========================================================================
   投稿ページ - ピラーガイド（本文末尾の導線）
   ========================================================================== */
.hd-pillar-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 880px;
  margin-top: 48px;
  margin-inline: auto;
  padding: 32px 24px;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-lg);
  background: #fff;
}

.hd-pillar-guide__icon {
  color: var(--hd-color-primary);
  margin-bottom: 8px;
}

.hd-pillar-guide__text {
  font-size: 0.875rem;
  color: var(--hd-color-text-secondary);
  margin: 0 0 14px;
}

.hd-pillar-guide__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 28px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--hd-color-primary);
  border-radius: var(--hd-border-radius-md);
  text-decoration: none;
  transition: opacity 0.2s;
}

.hd-pillar-guide__link:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-pillar-guide__link svg {
  flex-shrink: 0;
}

/* ==========================================================================
   投稿ページ - 関連記事
   ========================================================================== */
.hd-related-posts {
  background: #fff;
  padding: 100px 0;
}

.hd-related-posts .hd-inner {
  max-width: var(--hd-inner-width-wide);
}

.hd-related-posts__heading {
  font-size: 2.125rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 40px;
  line-height: 1.24;
  color: var(--hd-color-text-main);
}

/* --- 投稿ページ レスポンシブ --- */
@media (width < 1280px) {
  .hd-main h1 {
    font-size: 1.75rem;
  }
}
@media (width < 768px) {
  .hd-main h1 {
    font-size: 1.5rem;
  }
  .hd-main__eyecatch {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  .hd-pillar-guide {
    padding: 24px 16px;
  }
  .hd-related-posts {
    padding: 60px 0;
  }
  .hd-related-posts__heading {
    font-size: 1.5rem;
  }
  .hd-single-author__inner {
    flex-direction: column;
    text-align: center;
  }
  .hd-single-author__avatar img {
    width: 120px;
    height: 120px;
  }
}
/* ==========================================================================
   3カラムレイアウト - パンくずリストエリア
   ========================================================================== */
.hd-3col-breadcrumb {
  max-width: var(--hd-single-width);
  margin: 0 auto;
  padding: 30px 40px;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 0 var(--hd-single-gap);
}

.hd-3col-breadcrumb .hd-breadcrumb {
  grid-column: 2;
}

/* ==========================================================================
   3カラムレイアウト - グリッドコンテナ（投稿・カテゴリ共通）
   ========================================================================== */
.hd-3col {
  max-width: var(--hd-single-width);
  margin: 0 auto;
  padding: 0 40px 80px;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: var(--hd-single-gap);
}

.hd-3col__left,
.hd-3col__right {
  min-width: 0;
}

.hd-3col__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hd-3col__left {
  grid-column: 1;
  order: 1;
  position: sticky;
  top: calc(var(--swl-offset_y, 140px) + 20px);
  align-self: start;
}

.hd-main {
  grid-column: 2;
  order: 2;
  min-width: 0;
}

.hd-3col__right {
  grid-column: 3;
  order: 3;
}

/* ==========================================================================
   3カラムレイアウト レスポンシブ: 2カラム（投稿・カテゴリ共通）
   ========================================================================== */
@media (width < 1280px) {
  .hd-3col-breadcrumb {
    padding: 40px var(--hd-gutter) 30px;
    grid-template-columns: 1fr;
  }
  .hd-3col-breadcrumb .hd-breadcrumb {
    grid-column: 1;
  }
  .hd-3col {
    padding: 0 var(--hd-gutter) 80px;
    grid-template-columns: 1fr;
  }
  .hd-3col__left {
    display: none;
  }
  .hd-main {
    grid-column: 1;
  }
  .hd-3col__right {
    display: none;
  }
}
@media (width < 768px) {
  .hd-3col-breadcrumb {
    grid-template-columns: 1fr;
    padding: 30px var(--hd-gutter) 20px;
  }
  .hd-archive-content__heading {
    font-size: 1.375rem;
    margin-bottom: 24px;
  }
  .hd-3col {
    grid-template-columns: 1fr;
    padding: 0 var(--hd-gutter) 40px;
  }
  .hd-3col__right {
    display: none;
  }
  .hd-main {
    grid-column: 1;
  }
  .hd-card-grid,
  .hd-main .hd-card-grid--archive {
    grid-template-columns: 1fr;
  }
}
/* TODO: レスポンシブ対応
   - ヒーロー: .hd-hero__featured のグリッドを狭い画面で1カラムに
   - カードグリッド: タブレット（~1024px）で2カラム
   - ヘッダー: モバイルナビ（ハンバーガーメニュー）
   - フッター: ナビカラム・会社概要の折り返し
   - フッターCTA: ビジュアル要素の非表示 or リフロー
*/
/* ==========================================================================
   3カラムレイアウト - 左サイドバー目次（投稿・カテゴリ共通）
   Figma: https://www.figma.com/design/zJvZNmMm9fkkFBw9rlrz4m?node-id=6114-17134
   ========================================================================== */
.hd-sidebar-toc {
  background: var(--hd-color-bg-main);
  border-radius: 4px;
  padding: 0 20px 24px;
  max-width: 300px;
  position: sticky;
  top: calc(var(--swl-offset_y, 140px) + 20px);
}

.hd-sidebar-toc__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  margin: 0 0 20px;
  color: var(--hd-color-text-main);
}

.hd-sidebar-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-sidebar-toc__item {
  margin-bottom: 0;
  line-height: 1.34;
}

.hd-sidebar-toc__item a {
  display: block;
  padding: 5px 5px 5px 8px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  color: var(--hd-color-text-dark);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.34;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s, text-shadow 0.2s;
}

.hd-sidebar-toc__item a:hover {
  background: var(--hd-color-toc-hover-bg);
}

.hd-sidebar-toc__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd-sidebar-toc__subitem {
  margin-bottom: 0;
  line-height: 1.34;
}

.hd-sidebar-toc__subitem a {
  display: block;
  padding: 5px 5px 5px 23px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  color: var(--hd-color-text-dark);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.34;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s, text-shadow 0.2s;
}

.hd-sidebar-toc__subitem a:hover {
  background: var(--hd-color-toc-hover-bg);
}

.hd-toc-active {
  border-left-color: var(--hd-color-primary) !important;
  background: rgba(0, 112, 74, 0.08) !important; /* #00704a の opacity 変形 */
  color: var(--hd-color-primary) !important;
  text-shadow: 0.5px 0 0 currentColor !important;
}

/* ==========================================================================
   3カラムレイアウト - 右サイドバー（投稿・カテゴリ共通）
   ========================================================================== */
/* 新着記事セクション */
.hd-sidebar-section__title-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.hd-sidebar-section__label {
  display: block;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--hd-highlight-red); /* TODO: Figmaでは#ff5d7aだが、TOPのNEWと統一。要確認 */
  line-height: 1.24;
}

.hd-sidebar-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.24;
  color: var(--hd-color-text-main);
}

.hd-sidebar-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hd-sidebar-recent li {
  border-bottom: 1px solid var(--hd-color-border);
  padding-bottom: 24px;
}

.hd-sidebar-recent a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--hd-color-text-main);
  transition: opacity 0.2s;
}

.hd-sidebar-recent a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-sidebar-recent__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.34;
}

.hd-sidebar-recent__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.hd-sidebar-recent__date {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hd-color-text-secondary);
}

.hd-sidebar-recent__author {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--hd-color-text-main);
}

.hd-sidebar-recent__author-icon {
  display: inline-block;
  width: 18px;
  height: 16px;
  background: url("images/common/author-icon.svg") no-repeat center;
  background-size: contain;
}

/* SNSシェアボタン */
.hd-sidebar-sns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hd-sidebar-sns a,
.hd-sidebar-sns__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: opacity 0.2s;
}

.hd-sidebar-sns__copy {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.hd-sidebar-sns a:hover,
.hd-sidebar-sns__copy:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-sidebar-sns img {
  display: block;
}

.hd-sidebar-sns__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--hd-color-text-main);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.hd-sidebar-sns__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--hd-color-text-main);
}
.hd-sidebar-sns__tooltip.is-visible {
  opacity: 1;
}

/* CTAバナー */
.hd-sidebar-cta {
  display: block;
  width: 280px;
  position: sticky;
  top: calc(var(--swl-offset_y, 140px) + 20px);
  transition: opacity 0.2s;
}

.hd-sidebar-cta:hover {
  opacity: var(--hd-hover-opacity-btn);
}

.hd-sidebar-cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   投稿ページ - FAQセクション
   ========================================================================== */
.hd-single-faq {
  background: var(--hd-color-bg-green-light);
  padding: 60px 0;
}

.hd-single-faq__inner {
  max-width: var(--hd-inner-width-narrow);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-single-faq__heading {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 32px;
  color: var(--hd-color-text-main);
}

.hd-single-faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hd-single-faq__card {
  background: #fff;
  border-radius: var(--hd-border-radius-sm);
  padding: 20px 28px 28px 24px;
}

.hd-single-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}

.hd-single-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.hd-single-faq__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--hd-border-radius-sm);
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.375rem;
  font-weight: 900;
  flex-shrink: 0;
}

.hd-single-faq__badge--q {
  background: var(--hd-color-primary);
  color: #fff;
}

.hd-single-faq__badge--a {
  background: #fff;
  color: var(--hd-color-green-accent);
  border: 2px solid var(--hd-color-green-accent);
}

.hd-single-faq__q-text {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
  line-height: 2;
}

.hd-single-faq__a-text {
  font-size: 1.0625rem;
  font-weight: 400;
  margin: 0;
  line-height: 2;
  padding-top: 4px;
  color: var(--hd-color-text-main);
}

/* --- FAQ レスポンシブ --- */
@media (width < 1280px) {
  .hd-single-faq__q-text {
    font-size: 1.125rem;
  }
  .hd-single-faq__a-text {
    font-size: 0.9375rem;
  }
}
@media (width < 768px) {
  .hd-single-faq {
    padding: 40px 0;
  }
  .hd-single-faq__card {
    padding: 16px;
  }
  .hd-single-faq__q-text {
    font-size: 1rem;
  }
}
/* ==========================================================================
   インラインCTA（TOPページ カテゴリ間バナー）
   ========================================================================== */
.hd-inline-cta {
  max-width: calc(var(--hd-content-width) + var(--hd-gutter) * 2);
  margin: 0 auto;
  padding: 60px var(--hd-gutter);
}

.hd-inline-cta__link {
  display: flex;
  align-items: center;
  gap: 60px;
  background: var(--hd-color-primary);
  border: 2px solid #41aa6d;
  border-radius: 20px;
  overflow: clip;
  text-decoration: none;
  color: #fff;
  padding: 50px 60px;
  position: relative;
  transition: opacity 0.2s;
}

.hd-inline-cta__link:hover {
  opacity: 0.92;
  color: #fff;
}

.hd-inline-cta__logo {
  display: block;
  width: 204px;
  height: auto;
}

.hd-inline-cta__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 540px;
}

.hd-inline-cta__text {
  display: flex;
  flex-direction: column;
}

.hd-inline-cta__text-top {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.37;
  color: var(--hd-highlight-yellow);
  margin: 0;
  white-space: nowrap;
}

.hd-inline-cta__text-bottom {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.37;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.hd-inline-cta__text-accent {
  font-size: 2.5rem;
}

.hd-inline-cta__btn {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  border-radius: var(--hd-border-radius-lg);
  padding-right: 52px;
  width: 480px;
  height: 90px;
  position: relative;
  margin-top: 10px;
  box-shadow: var(--hd-shadow-cta-btn);
}

.hd-inline-cta__btn-img {
  display: block;
  width: 204px;
  height: 90px;
  flex-shrink: 0;
}

.hd-inline-cta__btn-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.hd-inline-cta__btn-sub {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hd-color-primary);
}

.hd-inline-cta__btn-main {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 28px;
  color: var(--hd-color-primary);
}

.hd-inline-cta__btn-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hd-color-primary);
}

.hd-inline-cta__visual {
  position: absolute;
  right: 48px;
  bottom: 48px;
  width: 501px;
}

.hd-inline-cta__visual-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (width < 1280px) {
  .hd-inline-cta__link {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 40px 48px;
  }
  .hd-inline-cta__body {
    align-items: center;
    padding-right: 0;
  }
  .hd-inline-cta__text {
    align-items: center;
  }
  .hd-inline-cta__text-top,
  .hd-inline-cta__text-bottom {
    white-space: normal;
    text-align: center;
    word-break: auto-phrase;
  }
  .hd-inline-cta__visual {
    position: static;
    width: 100%;
    max-width: 501px;
  }
}
@media (width < 768px) {
  .hd-inline-cta__link {
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    border-radius: 16px;
  }
  .hd-inline-cta__text-top {
    font-size: 1rem;
    white-space: normal;
  }
  .hd-inline-cta__text-bottom {
    font-size: 1.25rem;
    white-space: normal;
  }
  .hd-inline-cta__text-accent {
    font-size: 1.5rem;
  }
  .hd-inline-cta__btn {
    width: 100%;
    height: auto;
    min-height: 72px;
    padding-right: 16px;
    justify-content: center;
  }
  .hd-inline-cta__btn-img {
    display: none;
  }
  .hd-inline-cta__btn-main {
    font-size: 1.125rem;
  }
  .hd-inline-cta__btn-arrow {
    right: 12px;
  }
  .hd-inline-cta__visual {
    display: none;
  }
}
/* ==========================================================================
   投稿ページ下部CTA（single.php）
   Figmaデザイン準拠: 横2カラム（左ビジュアル / 右テキスト+ボタン）
   ========================================================================== */
.hd-single-cta {
  margin-bottom: 80px;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: 40px;
}

.hd-single-cta__link {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: linear-gradient(#fff, #fff) padding-box, var(--hd-gradient-cta-border) border-box;
  border: 2px solid transparent;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--hd-color-primary);
  padding: 30px 32px;
  transition: opacity 0.2s;
}

.hd-single-cta__link:hover {
  opacity: 0.92;
  color: var(--hd-color-primary);
}

/* --- 左カラム: ビジュアル --- */
.hd-single-cta__visual {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.hd-single-cta .hd-single-cta__logo {
  display: block;
  width: 112px;
  height: auto;
}

.hd-single-cta__visual-img {
  display: block;
  width: 100%;
  max-width: 249px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* --- 右カラム: テキスト + ボタン --- */
.hd-single-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-width: 0;
}

.hd-single-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-weight: 700;
}

.hd-single-cta__text-top {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 0.96;
  margin: 0;
}

.hd-single-cta__text-bottom {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/* --- ボタン --- */
.hd-single-cta__btn {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--hd-color-primary);
  border-radius: var(--hd-border-radius-lg);
  padding-right: 20px;
  max-width: 480px;
  width: 100%;
  height: 90px;
  position: relative;
  overflow: hidden;
}

.hd-single-cta .hd-single-cta__btn-img {
  display: block;
  flex-shrink: 0;
  width: 204px;
  height: 90px;
  object-fit: cover;
}

.hd-single-cta__btn-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

.hd-single-cta__btn-sub {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.hd-single-cta__btn-main {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.33;
  color: #fff;
  white-space: nowrap;
}

.hd-single-cta__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 2px;
  color: #fff;
}

/* --- モバイル --- */
@media (width < 768px) {
  .hd-single-cta {
    padding-inline: var(--hd-gutter);
    margin-bottom: 40px;
  }
  .hd-single-cta__link {
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    border-radius: 16px;
    gap: 16px;
  }
  .hd-single-cta__visual {
    display: none;
  }
  .hd-single-cta__body {
    gap: 16px;
  }
  .hd-single-cta__text-top {
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .hd-single-cta__text-bottom {
    font-size: 1.25rem;
    white-space: normal;
  }
  .hd-single-cta__btn {
    width: 100%;
    height: auto;
    padding: 16px 36px 16px 20px;
    justify-content: center;
  }
  .hd-single-cta .hd-single-cta__btn-img {
    display: none;
  }
  .hd-single-cta__btn-main {
    font-size: 1.0625rem;
  }
}
/* ==========================================================================
   フッターCTAセクション
   ========================================================================== */
.hd-footer-cta {
  background: var(--hd-color-primary);
  overflow: hidden;
}

.hd-footer-cta__inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 90px 20px;
  position: relative;
  min-height: 590px;
}

.hd-footer-cta__content {
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.hd-footer-cta__heading {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.26;
  margin: 0;
}

.hd-footer-cta__desc {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.68;
  margin: 0;
  max-width: 600px;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.hd-footer-cta__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.hd-footer-cta__link {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  width: 100%;
  max-width: 480px;
  height: 90px;
  padding-right: 40px;
  border-radius: var(--hd-border-radius-lg);
  overflow: visible;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
}

.hd-footer-cta__link:hover {
  opacity: 0.9;
}

.hd-footer-cta__link--trial {
  background: var(--hd-highlight-yellow);
}

.hd-footer-cta__link--download {
  background: var(--hd-color-bg-main);
  box-shadow: var(--hd-shadow-cta-btn);
}

.hd-footer-cta__link-img {
  display: block;
  width: 204px;
  height: 90px;
  flex-shrink: 0;
}

.hd-footer-cta__link-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-self: center;
}

.hd-footer-cta__link-sub {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.hd-footer-cta__link-main {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 28px;
}

.hd-footer-cta__link--trial .hd-footer-cta__link-sub,
.hd-footer-cta__link--trial .hd-footer-cta__link-main {
  color: var(--hd-color-text-main);
}

.hd-footer-cta__link--download .hd-footer-cta__link-sub,
.hd-footer-cta__link--download .hd-footer-cta__link-main {
  color: var(--hd-color-primary);
}

.hd-footer-cta__link-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hd-footer-cta__link--trial .hd-footer-cta__link-arrow {
  color: var(--hd-color-text-main);
}

.hd-footer-cta__link--download .hd-footer-cta__link-arrow {
  color: var(--hd-color-primary);
}

.hd-footer-cta__visual {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  background: url("./images/cta/footer-cta-visual@2x.png") right center/contain no-repeat;
}

@media (width < 1080px) {
  .hd-footer-cta__visual {
    display: none;
  }
  .hd-footer-cta__inner {
    display: flex;
    justify-content: center;
  }
  .hd-footer-cta__content {
    align-items: center;
    text-align: center;
  }
}
@media (width < 768px) {
  .hd-footer-cta__inner {
    padding: 60px 20px;
    min-height: auto;
  }
  .hd-footer-cta__content {
    max-width: none;
  }
  .hd-footer-cta__heading {
    font-size: 2rem;
    word-break: auto-phrase;
  }
  .hd-footer-cta__desc {
    font-size: 1rem;
    max-width: none;
  }
  .hd-footer-cta__link {
    width: 100%;
    height: auto;
    min-height: 72px;
    padding-right: 28px;
  }
  .hd-footer-cta__link-img {
    width: 100px;
    height: auto;
    align-self: flex-end;
  }
  .hd-footer-cta__link-body {
    white-space: nowrap;
  }
  .hd-footer-cta__link-main {
    font-size: 1.125rem;
  }
  .hd-footer-cta__link-arrow {
    right: 12px;
  }
}
/* ==========================================================================
   フッター共通
   ========================================================================== */
.hd-footer {
  background: #fff;
  border-top: 1px solid var(--hd-color-border);
}

/* ==========================================================================
   フッターナビゲーション
   ========================================================================== */
.hd-footer__nav-inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 54px 20px 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hd-footer__brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 250px;
}

.hd-footer__logo {
  flex-shrink: 0;
}

.hd-footer__logo-img {
  height: 46px;
  width: auto;
}

.hd-footer__tagline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--hd-color-footer-tagline);
  line-height: 20px;
  margin-top: 20px;
}

.hd-footer__tagline-en {
  font-family: var(--hd-font-heading);
  font-size: 1.1875rem;
  font-weight: 900;
  margin: 0;
}

.hd-footer__tagline-ja {
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0;
}

.hd-footer__social {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 54px;
}

.hd-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: opacity 0.2s;
}

.hd-footer__social a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-footer__social img {
  display: block;
}

.hd-footer__nav-columns {
  display: flex;
  flex: 1;
  gap: 20px;
  max-width: 910px;
}

.hd-footer__nav-col {
  flex: 1;
  min-width: 0;
}

.hd-footer__nav-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-color-primary);
  margin: 0 0 8px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

.hd-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-footer__nav-list li {
  margin: 0;
  padding: 0;
}

.hd-footer__nav-list a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hd-color-text-main);
  text-decoration: none;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hd-footer__nav-list a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-footer__nav-list a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("images/footer/circle-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* ==========================================================================
   サービス一覧
   ========================================================================== */
.hd-footer__services {
  display: flex;
  justify-content: center;
}

.hd-footer__services-inner {
  width: var(--hd-content-width);
  max-width: 100%;
  padding: 36px 20px 46px;
  border-top: 1px solid var(--hd-color-border);
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-footer__services-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-color-primary);
  margin: 0 0 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

.hd-footer__services-grid {
  display: flex;
  gap: 20px;
}

.hd-footer__service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-lg);
  text-decoration: none;
  transition: opacity 0.2s;
  min-width: 0;
}

.hd-footer__service-card:hover {
  opacity: 0.8;
}

.hd-footer__service-name {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--hd-color-text-secondary);
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
}

.hd-footer__service-logo-img {
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

/* ==========================================================================
   会社概要セクション
   ========================================================================== */
.hd-footer__company {
  display: flex;
  justify-content: center;
}

.hd-footer__company-inner {
  max-width: var(--hd-inner-width-wide);
  width: 100%;
  padding: 36px 20px 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hd-footer__company-left {
  width: 204px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.hd-footer__company-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hd-footer__noco-logo {
  width: 154px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

.hd-footer__mission {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 20px;
}

.hd-footer__mission-label {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--hd-color-text-secondary);
  margin: 0;
}

.hd-footer__mission-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hd-color-text-main);
  margin: 0;
}

.hd-footer__security-badges {
  width: 184px;
  height: 64px;
  object-fit: contain;
  object-position: left center;
}

.hd-footer__company-right {
  flex: 1;
  max-width: 910px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hd-footer__company-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-color-primary);
  margin: 0;
  line-height: 24px;
}

.hd-footer__company-dl {
  margin: 0;
  line-height: 1.48;
}

.hd-footer__company-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--hd-color-border);
}

.hd-footer__company-row dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hd-color-text-secondary);
  width: 96px;
  flex-shrink: 0;
}

.hd-footer__company-row dd {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hd-color-text-dark);
  margin: 0;
}

.hd-footer__company-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}

.hd-footer__company-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.hd-footer__company-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px 6px 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hd-color-text-main);
  text-decoration: none;
  transition: opacity 0.2s;
}

.hd-footer__company-link:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-footer__company-link::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("images/footer/circle-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.hd-footer__company-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hd-footer__hire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  padding: 7px 25px;
  background: var(--hd-color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--hd-border-radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hd-footer__hire-btn:hover {
  opacity: 0.8;
}

.hd-footer__hire-btn-arrow {
  display: flex;
  align-items: center;
}

.hd-footer__company-actions a:has(.hd-footer__dev-blog) {
  display: block;
  width: 194px;
  height: 60px;
  flex-shrink: 0;
}

.hd-footer__company-actions a:has(.hd-footer__dev-blog) picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hd-footer__dev-blog {
  width: 100%;
  height: 100%;
  border-radius: var(--hd-border-radius-md);
  object-fit: cover;
}

/* ==========================================================================
   フッター最下部バー
   ========================================================================== */
.hd-footer__bottom {
  background: #111; /* TODO: デザイナー確認 — --hd-color-bg-dark (#121212) と近似だが値が異なる。統一するか専用変数にするか確認を。 */
}

.hd-footer__bottom-inner {
  max-width: var(--hd-inner-width-wide);
  margin: 0 auto;
  padding: 0 var(--hd-gutter);
}

.hd-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--hd-color-border-bottom-bar);
}

.hd-footer__legal a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hd-color-border);
  text-decoration: none;
  padding-right: 12px;
  border-right: 1px solid var(--hd-color-border);
  margin-right: 12px;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.hd-footer__legal a:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.hd-footer__legal a:hover {
  opacity: var(--hd-hover-opacity);
}

.hd-footer__copyright {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 20px;
  color: var(--hd-color-text-secondary);
}

.hd-footer__copyright-notice {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 16px;
  margin: 0;
}

.hd-footer__copyright-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hd-footer__copyright-bottom p {
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0;
}

/* ==========================================================================
   タブレット対応（< 1280px）
   ========================================================================== */
@media (width < 1280px) {
  .hd-footer__nav-inner {
    flex-direction: column;
    gap: 32px;
  }
  .hd-footer__brand {
    width: 100%;
  }
  .hd-footer__nav-columns {
    width: 100%;
    max-width: none;
  }
  .hd-footer__nav-list a {
    white-space: normal;
  }
  .hd-footer__company-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hd-footer__company-nav {
    flex-wrap: wrap;
  }
}
/* ==========================================================================
   モバイル対応（< 768px）
   ========================================================================== */
@media (width < 768px) {
  .hd-footer__nav-inner {
    padding: 20px;
  }
  .hd-footer__social {
    margin-top: 24px;
  }
  .hd-footer__nav-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .hd-footer__services-inner {
    padding: 24px 20px 32px;
  }
  .hd-footer__services-grid {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hd-footer__service-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    width: 100%;
    max-width: 320px;
  }
  .hd-footer__service-name {
    text-align: left;
    flex: 1;
    min-width: 0;
    white-space: normal;
    font-size: 0.75rem;
  }
  .hd-footer__service-logo-img {
    width: 80px;
    flex-shrink: 0;
  }
  .hd-footer__company-inner {
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
  }
  .hd-footer__company-left {
    width: 100%;
    gap: 24px;
  }
  .hd-footer__company-row {
    flex-direction: column;
    gap: 4px;
  }
  .hd-footer__company-row dt {
    width: auto;
  }
  .hd-footer__company-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hd-footer__company-nav {
    flex-wrap: wrap;
  }
  .hd-footer__legal a {
    font-size: 0.75rem;
    line-height: 18px;
    padding: 4px 0;
    border-right: none;
    margin-right: 12px;
  }
  .hd-footer__copyright-bottom {
    flex-direction: column;
    gap: 8px;
  }
}
/* ==========================================================================
   セクションリンク（H2末尾の関連記事リンク）
   ========================================================================== */
.hd-section-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  background: #fff;
  border: 1px solid var(--hd-color-border);
  border-radius: var(--hd-border-radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.hd-section-link::before {
  content: "→";
  color: var(--hd-color-primary);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1.6;
}

.hd-section-link__text {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--hd-color-text-main);
  line-height: 1.6;
  margin: 0;
}

.hd-main .post_content .hd-section-link p {
  margin: 0;
}

.hd-section-link__anchor {
  color: var(--hd-color-primary);
  text-decoration: none;
  font-weight: 700;
}

.hd-section-link__anchor:hover {
  text-decoration: underline;
}

/* ==========================================================================
   フローティング目次ボタン＆オーバーレイ（モバイル用）
   ========================================================================== */
.hd-toc-float-btn {
  display: none;
}

.hd-toc-float-overlay {
  display: none;
}

@media (width < 1280px) {
  .hd-toc-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 60px;
    right: 16px;
    z-index: 1002;
    padding: 12px 20px;
    background: #fff;
    color: var(--hd-color-primary);
    border: 2px solid var(--hd-color-primary);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .hd-toc-float-btn.is-visible {
    opacity: 1;
    visibility: visible;
  }
  .hd-toc-float-btn__label {
    display: inline;
  }
  .hd-toc-float-btn__close {
    display: none;
    font-size: 20px;
    line-height: 1;
  }
  .hd-toc-float-btn[aria-expanded=true] .hd-toc-float-btn__label {
    display: none;
  }
  .hd-toc-float-btn[aria-expanded=true] .hd-toc-float-btn__close {
    display: inline;
  }
  .hd-toc-float-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--hd-color-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .hd-toc-float-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
  .hd-3col__left.is-open {
    display: block;
    position: fixed;
    bottom: 112px;
    right: 16px;
    left: 16px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1001;
    background: #fff;
    border-radius: var(--hd-border-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 20px;
  }
  .hd-3col__left.is-open .hd-sidebar-toc {
    max-width: none;
  }
}
/*!
    Template: swell
    Theme Name: Helpdog SWELL Theme
    Theme URI: https://github.com/nocoinc/hd-wordpress
    Description: SWELLの子テーマ - Helpdogプロジェクト用
    Version: 1.0.0
    Author: nocoinc
    Author URI: https://github.com/nocoinc

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.hd-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -4px 8px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hd-sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hd-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
}
.hd-sticky-cta__text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--hd-color-green-accent);
  white-space: nowrap;
}
.hd-sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: var(--hd-color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.hd-sticky-cta__btn:hover {
  opacity: 0.85;
  color: #fff;
}
.hd-sticky-cta__btn svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

@media (width < 768px) {
  .hd-sticky-cta__inner {
    gap: 10px;
    padding: 10px 16px;
  }
  .hd-sticky-cta__text {
    font-size: 12px;
  }
  .hd-sticky-cta__btn {
    font-size: 12px;
    padding: 8px 16px;
  }
}
@media print {
  .hd-header,
  .hd-breadcrumb,
  .hd-footer-cta,
  #hd-sticky-cta,
  .hd-inline-cta,
  .hd-sidebar-cta,
  .hd-single-cta,
  #hd-toc-float-btn,
  #hd-toc-float-overlay,
  .hd-sidebar-sns,
  .hd-footer {
    display: none !important;
  }
}
/* ==========================================================================
   投稿ページ - 記事本文（post_content）
   scss/_content.scss の mixin を使用（editor-style.css と共有）
   ========================================================================== */
.hd-main .post_content p,
body.page .post_content p {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 2;
  color: var(--hd-color-text-main);
  margin: 16px 0 24px;
}

.hd-main .post_content h2,
body.page .post_content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--hd-color-text-main);
  background: none;
  padding: 8px 11px;
  border-radius: 0;
  border: none;
  border-left: 5px solid var(--hd-color-primary);
  scroll-margin-top: calc(var(--swl-offset_y, 140px) + 16px);
  margin: 40px 0 12px;
}

.hd-main .post_content h2::before,
.hd-main .post_content h2::after,
body.page .post_content h2::before,
body.page .post_content h2::after {
  content: none;
}

.hd-main .post_content h3,
body.page .post_content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--hd-color-text-main);
  padding: 0;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  scroll-margin-top: calc(var(--swl-offset_y, 140px) + 16px);
  margin: 24px 0 12px;
}

.hd-main .post_content h3::before,
body.page .post_content h3::before {
  content: "";
  display: inline-block;
  position: static;
  width: 32px;
  height: 2px;
  min-width: 32px;
  margin-top: 14px;
  background: var(--hd-color-text-secondary);
}

.hd-main .post_content h3::after,
body.page .post_content h3::after {
  content: none;
}

.hd-main .post_content h4,
body.page .post_content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--hd-color-text-main);
  padding: 0;
  border: none;
  text-decoration: underline dashed var(--hd-color-text-secondary);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  margin: 20px 0 12px;
}

.hd-main .post_content h4::before,
.hd-main .post_content h4::after,
body.page .post_content h4::before,
body.page .post_content h4::after {
  content: none;
}

/* リスト */
.hd-main .post_content ul,
.hd-main .post_content ol,
body.page .post_content ul,
body.page .post_content ol {
  font-size: 1.0625rem;
  color: var(--hd-color-text-main);
  line-height: 2;
}

/* リスト項目（SWELL の li { line-height: 1.5 } を上書き） */
.hd-main .post_content li,
body.page .post_content li {
  line-height: 2;
}

/* テーブルセル */
.hd-main .post_content td,
.hd-main .post_content th,
body.page .post_content td,
body.page .post_content th {
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--hd-color-text-main);
}

/* 引用 */
.hd-main .post_content blockquote,
body.page .post_content blockquote {
  border-left: 4px solid var(--hd-color-primary);
  background: var(--hd-color-bg-main);
  padding: 20px 24px;
  color: var(--hd-color-text-main);
}
.hd-main .post_content blockquote::before,
body.page .post_content blockquote::before {
  content: none;
  border: none;
}
.hd-main .post_content blockquote p,
body.page .post_content blockquote p {
  margin: 0;
}

/* テーブル */
.hd-main .post_content table,
body.page .post_content table {
  border: 1px solid var(--hd-color-border);
}

.hd-main .post_content th,
body.page .post_content th {
  background: var(--hd-color-bg-hover); /* TODO: デザイナー確認 — 元は #f0f0f0、変数統一で #f5f5f5 に変更。th背景が薄くなるが許容範囲か確認を。 */
  color: var(--hd-color-text-main);
}

/* コード */
.hd-main .post_content code,
body.page .post_content code {
  background: var(--hd-color-bg-main);
  border-radius: 4px;
  color: var(--hd-color-text-main);
}

/* 画像 */
.hd-main .post_content img,
body.page .post_content img {
  border: 1px solid var(--hd-color-border);
  border-radius: 4px;
}

/* ブログカード（SWELLデフォルト 2.5em/2em → 縮小） */
.hd-main .post_content .p-blogCard,
body.page .post_content .p-blogCard {
  margin: 20px auto;
}

.hd-main .post_content .p-blogCard + br,
body.page .post_content .p-blogCard + br {
  display: none;
}

/* ブログカード「合わせて読みたい」キャプションの背景をbodyと同じ色に */
.hd-main .post_content .p-blogCard__caption,
body.page .post_content .p-blogCard__caption {
  background: var(--hd-color-bg-main) !important;
}

/* マーカー（蛍光ペン）: padding除去 + グラデーション位置調整 */
.hd-main .post_content .swl-marker,
body.page .post_content .swl-marker {
  padding: 0;
  background: linear-gradient(transparent 50%, var(--color_mark_yellow) 0%);
}

.hd-main .post_content .mark_blue,
body.page .post_content .mark_blue {
  background: linear-gradient(transparent 50%, var(--color_mark_blue) 0%);
}

.hd-main .post_content .mark_green,
body.page .post_content .mark_green {
  background: linear-gradient(transparent 50%, var(--color_mark_green) 0%);
}

.hd-main .post_content .mark_yellow,
body.page .post_content .mark_yellow {
  background: linear-gradient(transparent 50%, var(--color_mark_yellow) 0%);
}

.hd-main .post_content .mark_orange,
body.page .post_content .mark_orange {
  background: linear-gradient(transparent 50%, var(--color_mark_orange) 0%);
}

/* プルクォート（blockquote スタイルの上書き） */
.hd-main .post_content .wp-block-pullquote blockquote,
body.page .post_content .wp-block-pullquote blockquote {
  border-left: none;
  background: none;
  padding: 24px 0;
  border-top: 3px solid var(--hd-color-primary);
  border-bottom: 3px solid var(--hd-color-primary);
  text-align: center;
}

/* 整形済みテキスト */
.hd-main .post_content .wp-block-preformatted,
body.page .post_content .wp-block-preformatted {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background: var(--hd-color-bg-main);
  padding: 20px 24px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ボタン */
.hd-main .post_content .wp-block-button__link,
body.page .post_content .wp-block-button__link {
  background-color: var(--hd-color-primary);
  color: #fff;
}

.hd-main .post_content .is-style-outline .wp-block-button__link,
body.page .post_content .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--hd-color-primary);
  color: var(--hd-color-primary);
}

/* SWELLブロック内のp要素をリセット（段落スタイルの過剰適用を防ぐ） */
.post_content .swell-block-abTest p,
.post_content .swell-block-accordion p,
.post_content .swell-block-bannerLink p,
.post_content .swell-block-box-menu p,
.post_content .swell-block-button p,
.post_content .swell-block-column p,
.post_content .swell-block-columns p,
.post_content .swell-block-dl p,
.post_content .swell-block-faq p,
.post_content .swell-block-fullWide p,
.post_content .swell-block-linkList p,
.post_content .swell-block-postLink p,
.post_content .swell-block-review p,
.post_content .swell-block-step p,
.post_content .swell-block-tab p,
.post_content .p-blogCard p,
.post_content .c-balloon__body p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* 吹き出しブロック — Helpdogカラーでコントラスト向上 */
.post_content .c-balloon.-bln-left .c-balloon__text {
  background-color: var(--hd-color-balloon-left-bg);
  border-color: var(--hd-color-balloon-left-border);
}
.post_content .c-balloon.-bln-left .c-balloon__before {
  border-right-color: var(--hd-color-balloon-left-bg) !important;
}
.post_content .c-balloon.-bln-left .c-balloon__after {
  border-right-color: var(--hd-color-balloon-left-bg) !important;
}
.post_content .c-balloon.-bln-right .c-balloon__text {
  background-color: var(--hd-color-balloon-right-bg);
  border-color: var(--hd-color-balloon-right-border);
}
.post_content .c-balloon.-bln-right .c-balloon__before {
  border-right-color: var(--hd-color-balloon-right-bg) !important;
}
.post_content .c-balloon.-bln-right .c-balloon__after {
  border-right-color: var(--hd-color-balloon-right-bg) !important;
}
.post_content .c-balloon.-thinking .c-balloon__before,
.post_content .c-balloon.-thinking .c-balloon__after {
  background-color: inherit;
  border-color: inherit;
}

/* タブ — helpdog カラー（SWELL の .is-style-default > .c-tabList .c-tabList__button[aria-selected] (0,4,0) に対抗） */
.post_content .swell-block-tab > .c-tabList .c-tabList__button {
  color: var(--hd-color-primary);
  border-color: var(--hd-color-primary);
}

.post_content .swell-block-tab > .c-tabList .c-tabList__button[aria-selected=true],
.post_content .swell-block-tab > .c-tabList .c-tabList__button:hover {
  background-color: var(--hd-color-primary);
  color: #fff;
  border-color: var(--hd-color-primary);
}

/* --- 本文見出しレスポンシブ --- */
@media (width < 768px) {
  .hd-main .post_content h2,
  body.page .post_content h2 {
    font-size: 1.5rem;
    border-left-width: 6px;
    padding-left: 16px;
  }
  .hd-main .post_content h3::before,
  body.page .post_content h3::before {
    width: 24px;
  }
}