@charset "UTF-8";

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

/* 旧カスタムデザイン(明朝+緑+テラコッタ)は2026-07-03に撤去。バックアップ: automedia/wordpress/backup/ */

/* ============ HR REDESIGN v1.0 (tokens + theme) ============ */
:root {
  --hr-ink: #1E3A5F;
  --hr-text: #2A2E35;
  --hr-sub: #5B6572;
  --hr-bg: #F7F9FB;
  --hr-line: #D9E2EC;
  --hr-cta: #C2410C;
  --hr-cta-dark: #9A3412;
  --hr-accent: #2A9D8F;
  --hr-accent-nisa: #2563EB;
  --hr-accent-ai: #7C3AED;
  --hr-accent-kotei: #0E7490;
  --hr-font-head: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
  --hr-font-body: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
  --hr-radius: 10px;
  --hr-radius-lg: 12px;
}
body { font-family: var(--hr-font-body); color: var(--hr-text); background: var(--hr-bg) !important; }
@media (max-width: 833px) { body { background: #fff !important; } }
@media (min-width: 834px) { .wrap .main { background: #fff; border: 1px solid var(--hr-line); border-radius: var(--hr-radius-lg); } }
h1, h2, h3, h4, .site-name-text, .entry-card-title, .entry-title { font-family: var(--hr-font-head); font-weight: 700; color: var(--hr-ink); }
.article { font-size: 16px; line-height: 1.9; }
.article p { margin-bottom: 1.4em; }
.article h2 { background: transparent !important; border: none !important; border-left: 4px solid var(--hr-accent) !important; border-radius: 0 !important; padding: 0.35em 0.7em !important; font-size: 1.3em; line-height: 1.5; color: var(--hr-ink) !important; }
.article h3 { background: none !important; border: none !important; border-bottom: 2px solid var(--hr-line) !important; padding: 0.2em 0.1em 0.4em !important; font-size: 1.12em; color: var(--hr-ink) !important; }
.article a:not(.hr-cta) { color: var(--hr-ink); text-decoration: underline; text-decoration-color: var(--hr-accent); text-underline-offset: 3px; }
.article table, .hr-raku { font-feature-settings: "tnum"; }
.article table th { background: var(--hr-bg); color: var(--hr-ink); }
.article table th, .article table td { border-color: var(--hr-line) !important; }
.article a.hr-cta:hover, #hr-stickybar-link:hover { background: var(--hr-cta-dark) !important; }
.article .af-box { background: #fff !important; border: 1px solid var(--hr-line) !important; border-left: 4px solid var(--hr-accent) !important; border-radius: var(--hr-radius) !important; }
.article .af-box a { display: block !important; text-align: center !important; margin: 0.3em 0 !important; padding: 0.9em 1em !important; min-height: 48px; box-sizing: border-box; background: var(--hr-cta) !important; color: #fff !important; border-radius: 8px !important; font-weight: 700 !important; text-decoration: none !important; }
.article .af-box a:hover { background: var(--hr-cta-dark) !important; }
.article .af-a8 { border-left-color: var(--hr-accent) !important; }
.hr-trust { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 0 1.3em; }
.hr-trust-chip { display: inline-block; padding: 0.28em 0.85em; border: 1px solid var(--hr-line); border-radius: 999px; background: #fff; font-size: 0.78em; color: var(--hr-sub); text-decoration: none !important; line-height: 1.6; }
a.hr-trust-chip:hover { border-color: var(--hr-accent); color: var(--hr-ink); }
#hr-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.8em calc(0.55em + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.97); border-top: 1px solid var(--hr-line); box-shadow: 0 -2px 12px rgba(30,58,95,0.10); }
#hr-stickybar[hidden] { display: none; }
#hr-stickybar-link { flex: 1; display: block; text-align: center; padding: 0.85em 0.8em; min-height: 48px; box-sizing: border-box; background: var(--hr-cta); color: #fff !important; font-weight: 700; border-radius: 8px; text-decoration: none !important; line-height: 1.4; }
#hr-stickybar-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--hr-line); border-radius: 50%; background: #fff; color: var(--hr-sub); font-size: 20px; line-height: 1; cursor: pointer; }
@media (min-width: 960px) { #hr-stickybar { left: auto; right: 16px; bottom: 16px; max-width: 400px; border: 1px solid var(--hr-line); border-radius: var(--hr-radius-lg); padding: 0.55em 0.7em; } }
@media print { #hr-stickybar { display: none !important; } }
.related-entry-card-wrap, .navi-entry-cards .a-wrap { border: 1px solid var(--hr-line); border-radius: var(--hr-radius); overflow: hidden; background: #fff; }
.related-entry-heading, .related-entries h2 { color: var(--hr-ink); }
:focus-visible { outline: 3px solid var(--hr-accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* ============ HR REDESIGN v1.1 (UI polish: header/nav/cards/footer) ============ */
/* ヘッダー: 上端にブランドの帯＋白基調ですっきり */
.header-container, .header-container-in { background: #fff; }
.header { border-top: 4px solid var(--hr-accent); }
.header-in { border-bottom: 1px solid var(--hr-line); }
.site-name-text { color: var(--hr-ink) !important; font-weight: 700; letter-spacing: 0.02em; }
.tagline { color: var(--hr-sub); font-size: 0.78em; }

/* グローバルナビ: 下線スライドではなくシンプルな帯強調（アニメ最小） */
.navi, .navi-in { background: #fff; }
.navi-in > ul li a {
  color: var(--hr-ink);
  font-weight: 700;
  font-size: 0.92em;
  border-bottom: 3px solid transparent;
}
.navi-in > ul li a:hover {
  background: var(--hr-bg);
  border-bottom-color: var(--hr-accent);
  color: var(--hr-ink);
}

/* トップ/一覧の記事カード: 枠+ホバーで軽く持ち上げ、雑誌っぽく */
.ect-entry-card .a-wrap, .entry-card-wrap {
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-radius);
  background: #fff;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ect-entry-card .a-wrap:hover, .entry-card-wrap:hover {
  transform: translateY(-2px);
  border-color: var(--hr-accent);
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.10);
}
.entry-card-title { color: var(--hr-ink) !important; font-weight: 700; line-height: 1.5; }
.entry-card-snippet { color: var(--hr-sub); font-size: 0.85em; }
.entry-card-meta, .post-date, .post-update { color: var(--hr-sub); }

/* カテゴリラベル: アクセント色のタグ風 */
.cat-label {
  background: var(--hr-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.68em !important;
  padding: 2px 8px !important;
}

/* サムネイル画像の角を内側でそろえる */
.entry-card-thumb { border-radius: 0; }

/* サイドバー: 見出しをアクセント罫で統一 */
.sidebar h3, .sidebar .widget > h3 {
  background: none !important;
  border: none !important;
  border-left: 4px solid var(--hr-accent) !important;
  padding: 0.3em 0.6em !important;
  color: var(--hr-ink) !important;
  font-size: 1em;
}
.sidebar { font-size: 0.92em; }
.sidebar .widget { background: #fff; border: 1px solid var(--hr-line); border-radius: var(--hr-radius); padding: 1em; margin-bottom: 1.2em; }

/* フッター: 墨紺でサイトを締める */
.footer { background: var(--hr-ink) !important; color: #E8EEF5; }
.footer a { color: #E8EEF5 !important; }
.footer .footer-bottom, .copyright { color: #9FB3C8; }

/* ページ送り・ボタン類 */
.pagination .current, .page-numbers.current { background: var(--hr-ink); border-color: var(--hr-ink); }
.pagination a:hover { border-color: var(--hr-accent); }

/* パンくず */
.breadcrumb { color: var(--hr-sub); font-size: 0.78em; }
.breadcrumb a { color: var(--hr-sub); }

/* 記事タイトル(H1)を主役に */
.entry-title { font-size: 1.55em; line-height: 1.45; letter-spacing: 0.01em; }
@media (max-width: 833px) { .entry-title { font-size: 1.3em; } }

/* モバイルメニューボタン */
.mobile-menu-buttons { background: #fff; border-top: 1px solid var(--hr-line); }
.menu-button > a { color: var(--hr-ink); }


/* ============ HR REDESIGN v1.2 (誰でも読みやすく・雑誌品質) ============ */
/* --- 可読性: 本文をゆったり・確実に読める文字組みへ --- */
.article { font-size: 17px; line-height: 2.0; letter-spacing: 0.015em; }
@media (max-width: 833px) { .article { font-size: 16px; line-height: 1.95; } }
.article p { margin-bottom: 1.6em; }
.article ul li, .article ol li { margin-bottom: 0.5em; line-height: 1.85; }

/* --- 見出しを雑誌風に: 通し番号+アクセント帯 --- */
.article { counter-reset: hr-h2; }
.article h2 {
  counter-increment: hr-h2;
  background: var(--hr-bg) !important;
  border-left: 5px solid var(--hr-accent) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 0.55em 0.8em 0.55em 0.9em !important;
  margin-top: 2.4em;
}
.article h2::before {
  content: counter(hr-h2, decimal-leading-zero);
  display: inline-block;
  margin-right: 0.55em;
  color: var(--hr-accent);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.article h2:first-of-type { margin-top: 1.6em; }
/* FAQ・まとめの見出しには番号を付けない */
.article h3 { margin-top: 1.8em; }

/* --- 引用・リスト・強調のポリッシュ --- */
.article blockquote {
  background: var(--hr-bg);
  border-left: 4px solid var(--hr-line);
  border-radius: 0 8px 8px 0;
  color: var(--hr-sub);
}
.article strong { background: linear-gradient(transparent 72%, rgba(42,157,143,0.25) 72%); }
.article table { border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.article table th { font-size: 0.9em; }

/* --- 目次を「ナビゲーション」らしく --- */
.toc {
  background: #fff !important;
  border: 1px solid var(--hr-line) !important;
  border-radius: var(--hr-radius) !important;
  padding: 1em 1.3em !important;
}
.toc-title { color: var(--hr-ink) !important; font-weight: 700 !important; }
.toc a { color: var(--hr-text); text-decoration: none; }
.toc a:hover { color: var(--hr-ink); text-decoration: underline; text-decoration-color: var(--hr-accent); }

/* --- イチ押しウィジェット(C) --- */
.hr-pickwidget .hr-pick-item { transition: transform 0.12s ease, border-color 0.12s ease; }
.hr-pickwidget .hr-pick-item:hover { transform: translateY(-2px); border-color: var(--hr-accent) !important; }
.hr-pickwidget-top { margin: 0 0 1.6em; padding: 1.1em 1.2em; background: #fff; border: 1px solid var(--hr-line); border-radius: var(--hr-radius-lg); }
@media (min-width: 834px) {
  .hr-pickwidget-top > div, .hr-pickwidget-top { }
  .hr-pickwidget-top .hr-pick-item { margin-bottom: 8px; }
}

/* --- スムーススクロール(動きが苦手な人には無効) --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- 「あわせて読みたい」ボックス(D) --- */
.hr-readnext a:hover { color: var(--hr-accent) !important; }

/* --- サイト全体の締め: 選択色・スクロールバー --- */
::selection { background: rgba(42,157,143,0.25); }


/* ============ HR REDESIGN v1.3 (モバイルを雑誌の顔に) ============ */
@media (max-width: 833px) {
  /* 1. ヒーローヘッダー: 墨紺の帯に白ロゴ */
  .header { background: var(--hr-ink); border-top: none; }
  .header-in { border-bottom: none; padding: 16px 0 14px; }
  .site-name-text, .site-name-text a { color: #fff !important; font-size: 1.32em; letter-spacing: 0.05em; }
  .tagline { color: #A7C4BC; font-size: 0.7em; letter-spacing: 0.18em; margin-bottom: 4px; }
  .header::after { content: ""; display: block; height: 3px; background: var(--hr-accent); width: 62%; }

  /* 2. カテゴリ: 横スクロールのチップ列 */
  .navi { background: var(--hr-ink); border: none; }
  .navi-in > ul {
    display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 12px 14px; gap: 8px; scrollbar-width: none;
  }
  .navi-in > ul::-webkit-scrollbar { display: none; }
  .navi-in > ul li { flex: 0 0 auto; width: auto !important; border: none !important; }
  .navi-in > ul li a {
    display: block; padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.12); color: #fff !important;
    font-size: 0.8em; font-weight: 700; border-bottom: none !important; line-height: 1.4;
  }
  .navi-in > ul li:nth-child(3) { order: -3; }
  .navi-in > ul li:nth-child(2) { order: -2; }
  .navi-in > ul li:nth-child(4) { order: -1; }
  .navi-in > ul li:nth-child(1) { order: 99; }
  .navi-in > ul li:nth-child(3) a { background: var(--hr-accent); }

  /* 3. 記事カード: 最新1件フィーチャー */
  .ect-entry-card .a-wrap { box-shadow: 0 1px 5px rgba(30,58,95,0.07); margin-bottom: 14px; }
  .ect-entry-card .a-wrap:first-of-type .entry-card-thumb { float: none; width: 100%; margin: 0; }
  .ect-entry-card .a-wrap:first-of-type .entry-card-thumb img { border-radius: 0; }
  .ect-entry-card .a-wrap:first-of-type .entry-card-content { padding: 12px 14px 14px; margin-left: 0; }
  .ect-entry-card .a-wrap:first-of-type .entry-card-title { font-size: 1.08em; line-height: 1.55; }
  .entry-card-title { font-size: 0.95em; line-height: 1.55; }
  .entry-card-snippet { font-size: 0.8em; color: var(--hr-sub); }
  .entry-card-meta { font-size: 0.72em; }
  .cat-label { background: var(--hr-accent) !important; border-radius: 3px !important; font-weight: 700; }

  /* 4. セクション見出しを統一 */
  .widget-index-top h1, .list-title, h1.list-title, .index h2 {
    background: none; border-left: 5px solid var(--hr-accent); padding: 0.25em 0.6em;
    font-size: 1.05em; color: var(--hr-ink); text-align: left;
  }

  /* 5. もっと見る: アウトラインピル */
  .list-more-button, a.list-more-button {
    display: block; text-align: center; padding: 11px; border-radius: 999px;
    border: 1.5px solid var(--hr-ink); color: var(--hr-ink) !important;
    background: #fff !important; font-weight: 700; font-size: 0.88em;
  }

  /* 6. モバイル下部メニュー: 墨紺 */
  .mobile-menu-buttons { background: var(--hr-ink); border-top: none; box-shadow: 0 -2px 8px rgba(0,0,0,0.15); }
  .mobile-menu-buttons .menu-button > a, .mobile-menu-buttons .menu-icon, .mobile-menu-buttons .menu-caption { color: #fff !important; }

  /* 7. ウィジェット余白 */
  .sidebar .widget { margin-bottom: 16px; }
  .sidebar h3 { font-size: 0.95em !important; }
  .widget-entry-cards figure img, .popular-entry-card-thumb img, .new-entry-card-thumb img { border-radius: 8px; }
}
.hr-pickwidget-top { border-left: 4px solid var(--hr-cta); }


/* v1.3 hotfix: navi-inの旧白背景がチップを不可視化していた */
@media (max-width: 833px) {
  .navi-in { background: transparent !important; }
  .navi-in > ul { flex-wrap: nowrap !important; }
}


/* ============ HR REDESIGN v1.4 (メニュー展開UI + カテゴリ折返し) ============ */
@media (max-width: 833px) {

  /* --- ① ホームのカテゴリ: 横スクロール廃止 → 折り返しで全部見せる --- */
  .navi-in > ul {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center;
    padding: 10px 10px 14px;
    gap: 7px;
  }
  .navi-in > ul li a { font-size: 0.82em; padding: 6px 13px; }

  /* --- ② ドロワーメニュー(#navi-menu-content)を見やすいリストに --- */
  #navi-menu-content, .navi-menu-content {
    box-shadow: 6px 0 30px rgba(30,58,95,0.28);
    background: #fff;
  }
  /* ドロワー上部に見出しバーを付ける */
  #navi-menu-content::before {
    content: "カテゴリー";
    display: block;
    background: var(--hr-ink);
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.08em;
    padding: 16px 20px;
  }
  #navi-menu-content .navi-menu, #navi-menu-content > ul, #navi-menu-content ul { padding: 0 !important; margin: 0 !important; }
  #navi-menu-content li {
    list-style: none !important;
    border-bottom: 1px solid var(--hr-line) !important;
    margin: 0 !important;
  }
  #navi-menu-content li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 18px 0 20px !important;
    font-size: 1em !important;
    font-weight: 600;
    color: var(--hr-ink) !important;
    text-decoration: none;
    line-height: 1.4;
  }
  /* 右端に「›」を付けてタップ可能と分かる */
  #navi-menu-content li a::after {
    content: "\203A";
    color: var(--hr-sub);
    font-size: 1.3em;
    margin-left: 12px;
  }
  #navi-menu-content li a:active { background: var(--hr-bg); }
  /* 主戦場カテゴリ(NISA/AI副業/固定費)を左アクセント罫で強調 */
  #navi-menu-content li:nth-child(2) a,
  #navi-menu-content li:nth-child(3) a,
  #navi-menu-content li:nth-child(4) a {
    border-left: 4px solid var(--hr-accent);
    padding-left: 16px !important;
  }
  #navi-menu-content li:first-child a { color: var(--hr-sub) !important; } /* ホーム */

  /* --- ③ 下部メニューバー: アイコンに余白と押しやすさ --- */
  .mobile-menu-buttons .menu-button { border-color: rgba(255,255,255,0.12); }
  .mobile-menu-buttons .menu-button > a { min-height: 56px; }
  .mobile-menu-buttons .menu-caption { font-size: 0.62em; letter-spacing: 0.02em; }
}


/* ============ HR REDESIGN v2.0 (可読性ファースト / 2026-07-19) ============ */
/* 実測課題: h2 17.6px・h3 16px が本文16pxと同等以下で見出し階層が崩壊。
   モバイルでサイドバー(286px)が記事の前に入り、本文が1画面目に出なかった。 */

/* --- 1. 見出し階層の再構築(最重要) --- */
.entry-content h2 {
  font-size: clamp(1.32rem, 4.6vw, 1.72rem) !important;
  line-height: 1.45 !important; font-weight: 700; color: var(--hr-ink);
  background: none !important; border-radius: 0 !important;
  border-left: 5px solid var(--hr-accent) !important;
  border-bottom: 1px solid var(--hr-line);
  padding: 0.3em 0 0.42em 0.62em !important;
  margin: 2.6em 0 1.05em !important;
}
.entry-content h3 {
  font-size: clamp(1.08rem, 3.9vw, 1.3rem) !important;
  line-height: 1.5 !important; font-weight: 700; color: var(--hr-ink);
  background: none !important; border: none !important;
  border-left: 3px solid #C8D3DF !important;
  padding: 0.05em 0 0.05em 0.6em !important;
  margin: 2.1em 0 0.75em !important;
}
.entry-content h4 { font-size: 1.03rem; font-weight: 700; color: var(--hr-ink); margin: 1.7em 0 .6em; }

/* --- 2. 日本語長文の字送り --- */
.entry-content { font-size: 17px; line-height: 1.95; letter-spacing: .012em; }
.entry-content p { margin: 0 0 1.5em; }
.entry-content strong { background: linear-gradient(transparent 60%, rgba(42,157,143,.3) 60%); font-weight: 700; }
.entry-content ul, .entry-content ol { margin: 0 0 1.6em; padding-left: 1.35em; }
.entry-content li { margin-bottom: .5em; line-height: 1.85; }
.entry-content table { width:100%; border-collapse:collapse; margin:1.7em 0; font-size:.95em; display:block; overflow-x:auto; }
.entry-content th, .entry-content td { border:1px solid var(--hr-line); padding:.68em .8em; }
.entry-content th { background: var(--hr-bg); font-weight:700; color:var(--hr-ink); white-space:nowrap; }
.entry-content blockquote { border-left:4px solid var(--hr-accent); background:var(--hr-bg); padding:1em 1.1em; margin:1.7em 0; }
.entry-content img { border-radius: 10px; }

/* --- 3. モバイル: 本文をファーストビューへ --- */
@media (max-width: 833px) {
  /* v2.0のflex指定は撤去(v2.9): .mainがflexアイテム化しmin-width:autoで320px時に560px膨張していた */
  .eye-catch img { width:100%; height:190px; object-fit: cover; border-radius: 10px; }
  .entry-title { font-size: 1.44rem !important; line-height: 1.45 !important; margin: .1em 0 .55em !important; }
  .entry-content { font-size: 16.5px; line-height: 1.9; }
  .entry-content h2 { margin-top: 2.2em !important; }
}

/* --- 4. 目次 --- */
.toc { border:1px solid var(--hr-line) !important; border-radius:10px; padding:14px 16px !important; }
.toc-title { font-weight:700; color:var(--hr-ink); }
.toc li { margin:.35em 0; line-height:1.6; }


/* ============ HR REDESIGN v2.1 (ファーストビュー最終調整) ============ */
/* 実測: モバイルでカテゴリナビ(NAV.navi)が285px=チップ11個が5行×60px。
   記事ページで本文を押し下げる最大要因だったため、圧縮+記事ページでは畳む。 */
@media (max-width: 833px) {
  /* チップを大幅コンパクト化(1行60px→約34px) */
  .navi-in > ul { padding: 8px 10px 10px !important; gap: 6px !important; }
  .navi-in > ul li { height: auto !important; min-height: 0 !important; line-height: 1.3 !important; }
  .navi-in > ul li a {
    padding: 5px 11px !important; font-size: .78em !important;
    line-height: 1.35 !important; height: auto !important; min-height: 0 !important;
  }
  /* 記事ページは読書優先: カテゴリナビを畳む(ドロワー/下部メニューから到達可能) */
  body.single .navi { display: none !important; }
}


/* ============ HR REDESIGN v2.2 (記事冒頭のノイズ除去) ============ */
/* 記事冒頭のSNSシェア7個が159pxを占有し、原色が配色と衝突していた。
   シェアは読了後の行動なので上部は撤去し、記事末尾のシェアのみ残す。
   ※2つのルールに分けて記述(セレクタリストにすると:has非対応時に両方無効化されるため) */
.article .sns-share.ss-col-6 { display: none !important; }
.article .sns-share:not(:has(.sns-share-message)) { display: none !important; }


/* ============ HR REDESIGN v2.3 (PCのアイキャッチ適正化) ============ */
/* PCでアイキャッチが533pxあり、本文がファーストビューから押し出されていた */
@media (min-width: 834px) {
  .eye-catch img { width: 100%; height: 340px; object-fit: cover; border-radius: 12px; }
}


/* ============ HR REDESIGN v2.4 (アイキャッチ全幅化) ============ */
/* figure.eye-catch 自体が510pxに縮んでおり右に余白が出ていた */
.eye-catch { width: 100% !important; max-width: 100% !important; display: block; margin-left: 0; margin-right: 0; }
.eye-catch img { width: 100% !important; max-width: 100% !important; }


/* ============ HR REDESIGN v2.5 (モバイル固定ヘッダー + 配色統一) ============ */
/* 課題1: PCは fixed-header が付くのにモバイルは position:static でヘッダーが流れて消える。
   ただし現ヘッダーは146pxと厚く、そのまま固定すると本文を潰すため約56pxにスリム化して固定。 */
@media (max-width: 833px) {
  /* 固定ヘッダーは不要との指示により撤去(v2.7) */
  .header-container .header-in { min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 6px 12px !important; }
  .header-container .header { padding: 0 !important; border: none !important; }
  .header .tagline { display: none !important; }
  .site-name-text, .site-name-text a { font-size: 1.04em !important; letter-spacing: .02em !important; margin: 0 !important; }
  .header::after { display: none !important; }
}

/* 課題2: 「この記事でわかること」の見出しがサーモン#E76F51/淡ピンク背景で
   コントラスト比2.94(WCAG基準4.5未満)。さらに紺×ティールの配色から浮いていた。 */
.hibiraku-summary { background: #F2F7F9 !important; border-color: #CBDDE4 !important; }
.hibiraku-summary > p:first-child {
  color: var(--hr-ink) !important; font-size: 14.5px !important;
  font-weight: 700 !important; letter-spacing: .04em;
}
.hibiraku-summary > p { color: #24282F !important; }

/* 課題3: 本文リンクが見出しと同じ紺色でリンクと判別できなかった → 識別可能な青に */
.entry-content p a:not([class]), .entry-content li a:not([class]) {
  color: #1665A8 !important; text-decoration: underline; text-underline-offset: .18em;
}


/* ============ HR REDESIGN v2.8 (iOSの文字サイズ自動膨張を停止) ============ */
/* 症状: iPhoneだけサイズ感が微妙に合わない(Chromeでは正常)。
   原因: html の -webkit-text-size-adjust が auto のため、iOS Safari が独自の判断で
   フォントを膨張させ、CSSの指定値と実際の表示がズレていた(bodyは100%だがhtmlがauto)。
   対処: 100% を明示して自動膨張のみ停止。ユーザーのピンチ拡大は従来どおり可能
   (user-scalable=no のようなアクセシビリティ阻害はしない)。 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ============ HR REDESIGN v2.9 (狭い画面での横はみ出しを根治) ============ */
/* 実機報告: iPhoneで右側が切れて読めない。320px幅で .main が560pxに膨張し240pxはみ出していた。
   原因はv2.0で追加した .content-in{display:flex} により .main がフレックスアイテム化し、
   flexの min-width:auto によって中身の最小幅より縮まなくなったこと(上で撤去済)。以下は再発防止。 */
.main, .content-in, .content, .container { min-width: 0; max-width: 100%; }
.article, .entry-content { max-width: 100%; }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; }
.entry-content, .entry-title { overflow-wrap: break-word; }


/* ============ HR REDESIGN v3.0 (一覧カードのクリック誘発 / 2026-07-21) ============ */
.ect-entry-card .a-wrap, .widget-entry-cards .a-wrap { background: #fff; border: 1px solid var(--hr-line); border-radius: 12px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.ect-entry-card .a-wrap:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30,58,95,.14); border-color: #AFC3D6; }
.ect-entry-card .a-wrap:hover .entry-card-title { color: var(--hr-accent); }
.ect-entry-card .a-wrap:active { transform: scale(.985); transition-duration: .06s; }
.entry-card-title { color: var(--hr-ink); font-weight: 700; }
.entry-card-snippet { color: var(--hr-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ect-entry-card .entry-card-content::after { content: "続きを読む →"; display: block; margin-top: 7px; text-align: right; color: var(--hr-accent); font-size: .8em; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 833px) {
  .entry-card-title { font-size: 1.02em !important; line-height: 1.5 !important; }
  .entry-card-snippet { font-size: .86em !important; line-height: 1.6; }
  .ect-entry-card .a-wrap { margin-bottom: 14px; }
  .widget-index-top h1, .list-title, h1.list-title { font-size: 1.16em !important; padding: .3em .65em !important; }
  .navi-in > ul li a { padding: 8px 13px !important; }
}