/* ================================================================
   保険ラボ トップページ デザインシステム
   Design System: Enterprise Trust × Warm Nature
   Fonts: Noto Serif JP (見出し) + Noto Sans JP (本文)
   Colors: Forest Green #2E7D32 + Warm Orange #F57C00
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');

/* ----------------------------------------------------------------
   デザイントークン（CSS カスタムプロパティ）
   ---------------------------------------------------------------- */
:root {
  /* --- カラー --- */
  --hl-primary:        #2E7D32; /* フォレストグリーン：信頼・健康 */
  --hl-primary-light:  #388E3C;
  --hl-primary-dark:   #1B5E20;
  --hl-primary-bg:     #E8F5E9; /* 淡緑の背景 */

  --hl-accent:         #F57C00; /* ウォームオレンジ：行動喚起 */
  --hl-accent-light:   #FF9800;
  --hl-accent-dark:    #E65100;
  --hl-accent-bg:      #FFF3E0;

  --hl-bg:             #FAFDF7; /* ウォームホワイト */
  --hl-surface:        #FFFFFF;
  --hl-surface-alt:    #F1F8E9;

  --hl-text:           #1A2F1E; /* 深緑黒：メインテキスト */
  --hl-text-secondary: #3D5A42; /* やや薄い緑：サブテキスト */
  --hl-text-muted:     #6B7280; /* グレー：補足テキスト */

  --hl-border:         #C8E6C9;
  --hl-border-light:   #E8F5E9;
  --hl-shadow-sm:      0 1px 4px rgba(46, 125, 50, 0.08);
  --hl-shadow-md:      0 4px 16px rgba(46, 125, 50, 0.12);
  --hl-shadow-lg:      0 8px 32px rgba(46, 125, 50, 0.16);

  /* --- タイポグラフィ --- */
  --hl-font-serif: 'Noto Serif JP', 'ヒラギノ明朝 ProN', 'Yu Mincho', 'YuMincho', Georgia, serif;
  --hl-font-sans:  'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', sans-serif;

  /* --- スペーシング（4pxベース） --- */
  --hl-sp-1:  4px;
  --hl-sp-2:  8px;
  --hl-sp-3:  12px;
  --hl-sp-4:  16px;
  --hl-sp-6:  24px;
  --hl-sp-8:  32px;
  --hl-sp-10: 40px;
  --hl-sp-12: 48px;
  --hl-sp-16: 64px;
  --hl-sp-20: 80px;

  /* --- 角丸 --- */
  --hl-radius-sm:  4px;
  --hl-radius-md:  8px;
  --hl-radius-lg:  16px;
  --hl-radius-xl:  24px;
  --hl-radius-full: 9999px;

  /* --- アニメーション --- */
  --hl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hl-duration-fast:   150ms;
  --hl-duration-normal: 220ms;
  --hl-duration-slow:   350ms;
}

/* ----------------------------------------------------------------
   ベースリセット（Cocoon競合対策）
   ---------------------------------------------------------------- */
.hl-hero,
.hl-section,
.hl-container,
.hl-cat-grid,
.hl-features-grid {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------
   コンテナ
   ---------------------------------------------------------------- */
.hl-container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--hl-sp-6);
}

/* ----------------------------------------------------------------
   セクション共通
   ---------------------------------------------------------------- */
.hl-section {
  padding-block: var(--hl-sp-12);
  background: var(--hl-bg);
}

.hl-section--alt {
  background: var(--hl-surface-alt);
}

.hl-section__header {
  text-align: center;
  margin-bottom: var(--hl-sp-8);
}

.hl-section__title {
  font-family: var(--hl-font-serif);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--hl-text);
  margin: 0 0 var(--hl-sp-3);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.hl-section__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--hl-primary), var(--hl-accent));
  border-radius: var(--hl-radius-full);
  margin: var(--hl-sp-3) auto 0;
}

.hl-section__desc {
  font-family: var(--hl-font-sans);
  font-size: 1rem;
  color: var(--hl-text-secondary);
  margin: var(--hl-sp-3) 0 0;
  line-height: 1.75;
}

/* ================================================================
   ヒーローセクション
   ================================================================ */
.hl-hero {
  position: relative;
  background: linear-gradient(
    145deg,
    var(--hl-primary-dark) 0%,
    var(--hl-primary) 45%,
    #43A047 100%
  );
  overflow: hidden;
  padding-block: var(--hl-sp-16) var(--hl-sp-12);
}

/* 背景デコレーション（葉のような有機的な形） */
.hl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(245,124,0,0.12) 0%, transparent 50%);
  pointer-events: none;
}

.hl-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--hl-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}

.hl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin-inline: auto;
  padding-inline: var(--hl-sp-6);
  text-align: center;
}

.hl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-sp-2);
  font-family: var(--hl-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--hl-radius-full);
  padding: var(--hl-sp-1) var(--hl-sp-4);
  margin-bottom: var(--hl-sp-6);
}

.hl-hero__title {
  font-family: var(--hl-font-serif);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0 0 var(--hl-sp-6);
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.hl-hero__title em {
  font-style: normal;
  color: #FFD54F; /* 温かみのある黄 */
}

.hl-hero__desc {
  font-family: var(--hl-font-sans);
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: rgba(255,255,255,0.9);
  line-height: 1.8;
  margin: 0 0 var(--hl-sp-8);
}

.hl-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hl-sp-3);
  justify-content: center;
}

/* ================================================================
   ボタン
   ================================================================ */
.hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hl-sp-2);
  font-family: var(--hl-font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--hl-radius-full);
  padding: 14px var(--hl-sp-8);
  min-height: 48px;
  cursor: pointer;
  transition:
    transform var(--hl-duration-fast) var(--hl-ease-out),
    box-shadow var(--hl-duration-normal) var(--hl-ease-out),
    background-color var(--hl-duration-fast) var(--hl-ease-out);
  white-space: nowrap;
}

.hl-btn--primary {
  background: var(--hl-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(245,124,0,0.35);
}

.hl-btn--primary:hover,
.hl-btn--primary:focus-visible {
  background: var(--hl-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245,124,0,0.45);
  color: #FFFFFF;
  text-decoration: none;
}

.hl-btn--outline {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.7);
}

.hl-btn--outline:hover,
.hl-btn--outline:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  color: #FFFFFF;
  text-decoration: none;
}

.hl-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,0.8);
  outline-offset: 3px;
}

/* ================================================================
   カテゴリーナビ
   ================================================================ */
.hl-section--category {
  background: var(--hl-bg);
  padding-top: var(--hl-sp-12);
}

.hl-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hl-sp-3);
}

.hl-cat-card {
  display: flex;
  align-items: center;
  gap: var(--hl-sp-3);
  background: var(--hl-surface);
  border: 1.5px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: 1rem;
  text-decoration: none;
  color: var(--hl-text);
  box-shadow: var(--hl-shadow-sm);
  transition:
    transform var(--hl-duration-normal) var(--hl-ease-out),
    box-shadow var(--hl-duration-normal) var(--hl-ease-out),
    border-color var(--hl-duration-fast) var(--hl-ease-out);
  cursor: pointer;
}

.hl-cat-card:hover,
.hl-cat-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--hl-shadow-lg);
  border-color: var(--hl-primary);
  text-decoration: none;
  color: var(--hl-text);
}

.hl-cat-card:focus-visible {
  outline: 3px solid var(--hl-primary);
  outline-offset: 2px;
}

.hl-cat-card__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--hl-primary-bg);
  border-radius: var(--hl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--hl-duration-fast);
}

.hl-cat-card:hover .hl-cat-card__icon {
  background: var(--hl-primary);
}

.hl-cat-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--hl-primary);
  transition: color var(--hl-duration-fast);
}

.hl-cat-card:hover .hl-cat-card__icon svg {
  color: #FFFFFF;
}

.hl-cat-card__body {
  flex: 1;
  min-width: 0;
}

.hl-cat-card__title {
  font-family: var(--hl-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hl-text);
  margin: 0 0 var(--hl-sp-1);
  line-height: 1.4;
}

.hl-cat-card__meta {
  font-family: var(--hl-font-sans);
  font-size: 0.8125rem;
  color: var(--hl-text-muted);
  margin: 0;
  line-height: 1.4;
}

.hl-cat-card__arrow {
  flex-shrink: 0;
  color: var(--hl-text-muted);
  transition: color var(--hl-duration-fast), transform var(--hl-duration-normal) var(--hl-ease-out);
}

.hl-cat-card:hover .hl-cat-card__arrow {
  color: var(--hl-primary);
  transform: translateX(3px);
}

/* ================================================================
   特徴セクション（3ポイント）
   ================================================================ */
.hl-section--features {
  background: var(--hl-surface-alt);
}

.hl-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hl-sp-6);
}

.hl-feature-card {
  background: var(--hl-surface);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-8) var(--hl-sp-6);
  text-align: center;
  box-shadow: var(--hl-shadow-sm);
  border: 1.5px solid var(--hl-border-light);
  transition: transform var(--hl-duration-normal) var(--hl-ease-out), box-shadow var(--hl-duration-normal) var(--hl-ease-out);
}

.hl-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hl-shadow-md);
}

.hl-feature-card__icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--hl-primary-bg), #DCEDC8);
  border-radius: var(--hl-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--hl-sp-6);
  transition: transform var(--hl-duration-normal) var(--hl-ease-out);
}

.hl-feature-card:hover .hl-feature-card__icon {
  transform: scale(1.08) rotate(-2deg);
}

.hl-feature-card__icon svg {
  width: 36px;
  height: 36px;
  color: var(--hl-primary);
}

.hl-feature-card__num {
  display: inline-block;
  font-family: var(--hl-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hl-primary);
  background: var(--hl-primary-bg);
  border-radius: var(--hl-radius-full);
  padding: 2px 10px;
  letter-spacing: 0.05em;
  margin-bottom: var(--hl-sp-3);
}

.hl-feature-card__title {
  font-family: var(--hl-font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hl-text);
  margin: 0 0 var(--hl-sp-3);
  line-height: 1.4;
}

.hl-feature-card__desc {
  font-family: var(--hl-font-sans);
  font-size: 0.9375rem;
  color: var(--hl-text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* ================================================================
   最新記事セクション見出し
   ================================================================ */
.hl-section--latest {
  background: var(--hl-bg);
}

.hl-latest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hl-sp-4);
  margin-bottom: var(--hl-sp-8);
  padding-bottom: var(--hl-sp-4);
  border-bottom: 2px solid var(--hl-border);
}

.hl-latest-header .hl-section__title {
  text-align: left;
  margin: 0;
}

.hl-latest-header .hl-section__title::after {
  margin-left: 0;
}

.hl-latest__more {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-sp-1);
  font-family: var(--hl-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hl-primary);
  text-decoration: none;
  border: 1.5px solid var(--hl-primary);
  border-radius: var(--hl-radius-full);
  padding: var(--hl-sp-2) var(--hl-sp-4);
  transition:
    background-color var(--hl-duration-fast),
    color var(--hl-duration-fast),
    transform var(--hl-duration-normal) var(--hl-ease-out);
  min-height: 44px;
}

.hl-latest__more:hover,
.hl-latest__more:focus-visible {
  background: var(--hl-primary);
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}

.hl-latest__placeholder {
  background: var(--hl-surface);
  border: 1.5px dashed var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-12);
  text-align: center;
  color: var(--hl-text-muted);
  font-family: var(--hl-font-sans);
  font-size: 0.9375rem;
}

/* ================================================================
   信頼バナー（ヒーロー下のトラストシグナル）
   ================================================================ */
.hl-trust-bar {
  background: var(--hl-surface);
  border-top: 1px solid var(--hl-border-light);
  border-bottom: 1px solid var(--hl-border-light);
  padding-block: var(--hl-sp-4);
}

.hl-trust-bar__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--hl-sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hl-sp-6);
}

.hl-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hl-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hl-text-secondary);
  white-space: nowrap;
}

.hl-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--hl-primary);
  flex-shrink: 0;
  vertical-align: middle;
}

/* ================================================================
   レスポンシブ（モバイルファースト拡張）
   ================================================================ */

/* タブレット (768px+) */
@media (min-width: 768px) {
  .hl-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hl-sp-4);
  }

  .hl-cat-card {
    padding: 1rem var(--hl-sp-4);
  }
}

/* デスクトップ (1024px+) */
@media (min-width: 1024px) {
  .hl-cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hl-cat-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    gap: var(--hl-sp-2);
  }

  .hl-cat-card__arrow {
    display: none;
  }

  .hl-cat-card__icon {
    width: 56px;
    height: 56px;
  }
}

/* モバイル (< 640px) */
@media (max-width: 639px) {
  .hl-hero {
    padding-block: var(--hl-sp-12) var(--hl-sp-10);
  }

  .hl-hero__cta {
    flex-direction: column;
    align-items: center;
  }

  .hl-btn {
    width: 100%;
    max-width: 320px;
  }

  .hl-cat-grid {
    grid-template-columns: 1fr;
  }

  .hl-features-grid {
    grid-template-columns: 1fr;
    gap: var(--hl-sp-4);
  }

  .hl-section {
    padding-block: var(--hl-sp-10);
  }

  .hl-trust-bar__inner {
    gap: var(--hl-sp-4);
  }
}

/* ================================================================
   home-top ページ専用：Cocoon UI 要素の非表示
   body.page-id-35 を対象にして他ページに影響しない
   ================================================================ */

/* SNSシェアボタン非表示 */
.page-id-35 .sns-share,
.page-id-35 .sns-buttons,
.page-id-35 .ss-top,
.page-id-35 .ss-bottom {
  display: none !important;
}

/* パンくずリスト非表示 */
.page-id-35 .breadcrumb,
.page-id-35 .breadcrumbs {
  display: none !important;
}

/* ================================================================
   アイコン・文字のズレ修正
   WordPress の wpautop が <p> を挿入するのを打ち消す
   ================================================================ */

/* flexコンテナ内のSVGをblockに統一してズレを防ぐ */
.hl-hero__eyebrow svg,
.hl-btn svg,
.hl-trust-item svg,
.hl-cat-card__arrow svg,
.hl-latest__more svg {
  display: block;
  flex-shrink: 0;
}

/* hl-cat-card__icon / hl-feature-card__icon 内 SVG */
.hl-cat-card__icon svg,
.hl-feature-card__icon svg {
  display: block;
}

/* WordPress が挿入する不要な <p> の margin をリセット */
.hl-hero p,
.hl-trust-bar p,
.hl-cat-grid p,
.hl-features-grid p,
.hl-cat-card p,
.hl-feature-card p,
.hl-latest-header p {
  margin: 0;
  padding: 0;
}

/* span 内の SVG（ eyebrow・trust-item ）baseline ズレを修正 */
.hl-hero__eyebrow,
.hl-trust-item,
.hl-btn,
.hl-latest__more {
  align-items: center;
  line-height: 1;
}

/* CSSが適用される前にCocoonのデフォルトマージンが効かないよう上書き */
.hl-section h2,
.hl-section h3 {
  margin-top: 0;
}

/* アクセシビリティ：モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .hl-btn,
  .hl-cat-card,
  .hl-feature-card,
  .hl-cat-card__icon,
  .hl-feature-card__icon,
  .hl-cat-card__arrow,
  .hl-latest__more {
    transition: none;
  }
}

.hl-trust-item {
    display: inline-flex !important; /* インラインブロック的に扱い、中央に寄せる */
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important; /* 行高による余計な余白を排除 */
}

.hl-trust-item svg {
    width: 16px;
    height: 16px;
    display: block; /* 余計な下隙間を消す */
    margin-top: -1px; /* 視覚的な微調整（フォントによって調整） */
}

.hl-cat-card {
    padding: 0.75rem 1rem !important; /* 上下をさらに絞る */
    min-height: auto !important; /* 高さを内容に任せる */
    gap: 0.75rem !important;
}

.hl-cat-card__icon {
    width: 32px !important; /* アイコン自体を少し小ぶりに */
    height: 32px !important;
}

.hl-cat-card__title {
    font-size: 0.95rem !important; /* 文字サイズを微減して引き締める */
    margin-bottom: 0 !important;
}

.hl-cat-card__desc {
    font-size: 0.75rem !important; /* 説明文を小さくして情報の優先順位をつける */
}

/* 特徴セクション全体の余白調整 */
.hl-features {
    padding: 3rem 0 !important; /* セクション自体の上下余白も削る */
}

.hl-features-grid {
    display: grid !important;
    /* 768px以上で3列に強制 */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1000px; /* 広がりすぎないよう制限 */
    margin: 0 auto;
}

/* 各カード内の余白も微調整 */
.hl-feature-card {
    padding: 1.5rem !important;
    height: 100%; /* 高さを揃える */
}

/* スマホ表示（767px以下）では1列に戻す */
@media (max-width: 767px) {
    .hl-features-grid {
        grid-template-columns: 1fr !important;
    }
}