/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.0
*/

/* ============================================
   ROOT VARIABLES
   Tsuzuki Blog（SWELL）の設計を解析して再現
   --color_main: #014172（ネイビー）
   --color_text: #434347（チャコール）
   --color_link: #0077c6（ブルー）
   --color_htag: #213555（濃紺）
   --color_bg:   #fcfcfc（オフホワイト）
   ============================================ */
:root {
  --accent:        #014172;   /* ネイビー：ヘッダー・H2ボーダー・ボタン */
  --accent-light:  #0077c6;   /* ブルー：リンク・H3ボーダー */
  --accent-thin:   rgba(1, 65, 114, 0.06);
  --text-primary:  #434347;   /* 本文：チャコールグレー */
  --text-heading:  #213555;   /* 見出し：濃紺 */
  --text-muted:    #888;      /* 補足テキスト */
  --bg:            #fcfcfc;   /* 背景：オフホワイト */
  --bg-card:       #ffffff;   /* カード背景 */
  --bg-header:     #fdfdfd;   /* ヘッダー背景 */
  --bg-footer:     #f4f6f8;   /* フッター背景 */
  --border-light:  #e4eaf0;   /* 薄いボーダー */
  --max-width:     900px;     /* 記事最大幅 */
  --card-radius:   8px;       /* カード角丸 */
  --font:          "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                   "Hiragino Sans", Meiryo, sans-serif;
}

/* ============================================
   BASE
   ============================================ */
body {
  background-color: var(--bg) !important;
  font-family: var(--font) !important;
  font-size: 17px !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.025em !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   LAYOUT: 1カラム強制・中央寄せ
   ============================================ */
/* 2カラム: 本文 + サイドバー(Tsuzuki流) */
.wrap {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

#sidebar,
.sidebar {
  width: 320px;
}

@media (max-width: 1023px) {
  #main, .main { padding: 16px 12px; }
}

/* ============================================
   HEADER
   ============================================ */
#header-container,
#header {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
}

/* ヘッダー内部：高さ・縦中央揃え */
#header-in,
.header-in {
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 0 !important;
}

/* ロゴ画像を非表示（テキストタイトルを使用） */
#header img.site-logo-image,
#header img.header-site-logo-image,
img.site-logo-image,
img.header-site-logo-image {
  display: none !important;
}

/* ロゴ（h1）のスタイルリセット */
.logo.logo-header,
.logo-header {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* サイト名テキスト */
.site-name-text,
.header .site-name-text,
#header .site-name-text {
  display: block !important;
  font-family: var(--font) !important;
  font-size: 1.5em !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.site-name-text:hover,
.header .site-name-text:hover {
  color: var(--accent-light) !important;
  text-decoration: none !important;
}

/* サイト名リンク */
a.site-name-text-link {
  text-decoration: none !important;
}

/* キャッチフレーズ */
.header .site-description-text,
.catchphrase,
.site-description {
  display: block !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.06em !important;
  margin-top: 4px !important;
}

/* ============================================
   NAVIGATION
   ============================================ */
#navi,
.navi {
  background-color: #fff !important;
  border-bottom: 3px solid var(--accent) !important;
  box-shadow: 0 2px 6px rgba(1, 65, 114, 0.08) !important;
}

#header-container .navi,
#navi .navi-in a,
.navi .navi-in a {
  background-color: transparent !important;
  color: var(--text-heading) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 18px !important;
  transition: color 0.2s, background 0.2s;
}

#navi .navi-in a:hover,
.navi .navi-in a:hover {
  color: var(--accent-light) !important;
  background-color: var(--accent-thin) !important;
}

/* ============================================
   ENTRY CARDS（トップページ記事一覧）
   ============================================ */
.entry-card-wrap,
.a-wrap {
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background: var(--bg-card) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  text-decoration: none !important;
}

.entry-card-wrap:hover,
.a-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 28px rgba(1, 65, 114, 0.14) !important;
  border-color: #c8d8ec !important;
}

.entry-card-title,
.card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  line-height: 1.65 !important;
  letter-spacing: 0.02em !important;
}

.entry-card-content {
  padding: 14px 16px !important;
}

.entry-card-snippet {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}

/* カテゴリーラベル（ピル型） */
.cat-label,
.cat-label a,
.card-cat-label {
  background-color: var(--accent) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  border: none !important;
}

.cat-label:hover,
.cat-label a:hover {
  background-color: var(--accent-light) !important;
  color: #fff !important;
}

.entry-date,
.entry-card-date,
.post-date {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
}

/* サムネイルホバーズーム */
.entry-card-thumb img,
.card-thumb img {
  transition: transform 0.3s ease !important;
}

.entry-card-wrap:hover .entry-card-thumb img,
.a-wrap:hover .card-thumb img {
  transform: scale(1.04) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
p {
  line-height: 1.9;
  margin-bottom: 2em;
  color: var(--text-primary);
  font-size: 17px;
}

strong, b {
  font-weight: 700;
  color: var(--text-heading);
}

.speech-balloon,
.speech-wrap .speech-balloon {
  line-height: 1.8;
}

/* ============================================
   HEADING DESIGN
   H2: 左4px ネイビー＋薄い下線（Tsuzuki Blog inspired）
   H3: 左3px ライトブルー
   H4: 下破線
   ============================================ */
.article h2,
.entry-content h2,
#main h2 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-left: 4px solid var(--accent) !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 10px 16px !important;
  margin-top: 2.8em !important;
  margin-bottom: 1.2em !important;
  font-size: 1.35em !important;
  font-weight: 800 !important;
  color: var(--text-heading) !important;
  letter-spacing: 0.03em !important;
}

.article h3,
.entry-content h3,
#main h3 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-left: 3px solid var(--accent-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 4px 14px !important;
  margin-top: 2.2em !important;
  margin-bottom: 0.9em !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
}

.article h4,
.entry-content h4,
#main h4 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px dashed #c0cdd8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 6px 4px !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.7em !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
}

/* ============================================
   TABLE OF CONTENTS（目次）
   ============================================ */
.toc {
  background: #f0f5fa !important;
  border: 1px solid #c8d8ec !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  margin: 2em 0 2.5em !important;
}

.toc-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.04em !important;
}

.toc li a {
  color: var(--accent-light) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}

.toc li a:hover {
  text-decoration: underline !important;
  color: var(--accent) !important;
}

/* ============================================
   BLOCKQUOTE
   ============================================ */
blockquote,
.article blockquote {
  border-left: 4px solid #b8cfe8 !important;
  background: #f5f8fc !important;
  padding: 16px 20px !important;
  border-radius: 0 8px 8px 0 !important;
  color: #555 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

blockquote::before,
blockquote::after {
  content: none !important;
}

/* ============================================
   RELATED POSTS（関連記事）
   ============================================ */
.related-entry-card-wrap {
  border-radius: 6px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  overflow: hidden !important;
}

.related-entry-card-wrap:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(1, 65, 114, 0.1) !important;
}

.related-entry-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
}

/* ============================================
   BLOG CARD（あわせて読みたい）
   ============================================ */
.blogcard-wrap,
.a-wrap.blogcard {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.blogcard-label {
  background-color: var(--accent) !important;
  color: #fff !important;
  font-size: 11px !important;
}

.blogcard-title {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
}

/* ============================================
   CTA BUTTON
   ============================================ */
.cta-container {
  text-align: center;
  margin: 2.8em auto;
  padding: 0 20px;
}

.micro-copy {
  display: block;
  font-size: 12.5px;
  color: #666;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

.cta-button {
  display: inline-block;
  position: relative;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.05em;
  font-family: var(--font);
  text-decoration: none !important;
  padding: 18px 52px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 16px rgba(1, 65, 114, 0.35);
  letter-spacing: 0.06em;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(1, 65, 114, 0.45);
  color: #ffffff !important;
  text-decoration: none !important;
}

.cta-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: cta-shine 4s ease-in-out infinite;
}

@keyframes cta-shine {
  0%   { left: -80%; }
  30%  { left: 130%; }
  100% { left: 130%; }
}

/* ============================================
   LINKS
   ============================================ */
a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent);
}

/* ============================================
   PAGINATION
   ============================================ */
.page-numbers,
.pagination .page-numbers {
  border-radius: 4px !important;
  color: var(--accent-light) !important;
  border: 1px solid var(--border-light) !important;
}

.page-numbers.current,
.pagination .current {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ============================================
   FOOTER
   ============================================ */
#footer {
  background-color: var(--bg-footer) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 32px 0 !important;
}

#footer a {
  color: var(--text-heading) !important;
  font-size: 13px !important;
}

#footer a:hover {
  color: var(--accent-light) !important;
  text-decoration: underline !important;
}

/* フッターロゴ・サイト名を非表示 */
.footer-bottom-logo,
#footer .footer-bottom-logo,
#footer .logo-footer,
#footer .logo-text,
#footer .logo-image,
#footer img,
img.footer-site-logo-image {
  display: none !important;
  visibility: hidden !important;
}

.footer-copy,
.source-org.copyright {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
}

/* ============================================
   AUTHOR BOX（プロフィール）
   ============================================ */
.author-box,
.author-card {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--card-radius) !important;
  background: #fff !important;
  padding: 24px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.author-name {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
}

/* ============================================
   Cocoon スキン背景色（#dcc）を上書き
   ============================================ */
#header-container,
#navi .navi-in>.menu-header .sub-menu {
  background-color: #fff !important;
}

/* ============================================
   スマホ対応（768px以下）
   ============================================ */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;
  }

  p {
    font-size: 16px !important;
    margin-bottom: 1.8em !important;
  }

  #main,
  .main,
  .entry-content,
  .article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .article h2,
  .entry-content h2,
  #main h2 {
    font-size: 1.2em !important;
    padding: 6px 0 8px 12px !important;
  }

  .article h3,
  .entry-content h3,
  #main h3 {
    font-size: 1.08em !important;
  }

  .cta-button {
    padding: 16px 32px !important;
    font-size: 0.98em !important;
  }

  .entry-card-title {
    font-size: 13.5px !important;
  }
}

@media (max-width: 480px) {
  #main,
  .main,
  .entry-content,
  .article {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============================================
   HERO (APPEAL AREA) — 2026-06 デザイン強化
   ネイビー×シアン / モバイルファースト
   ============================================ */
:root {
  --cyan:       #00c8ff;
  --cyan-dark:  #00a8e0;
  --hero-bg-1:  #021c36;
  --hero-bg-2:  #04305c;
}

#appeal {
  background:
    radial-gradient(ellipse 60% 55% at 88% 15%, rgba(0, 200, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 60% at 8% 95%, rgba(0, 120, 200, 0.20), transparent 55%),
    linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 62%, #014172 100%);
  padding: 76px 20px 84px;
  margin-bottom: 32px;
}

#appeal .appeal-in,
.appeal-in {
  max-width: var(--max-width);
  margin: 0 auto;
  background: transparent;
}

.appeal-content {
  text-align: center;
}

.appeal-title {
  color: #ffffff;
  font-size: clamp(26px, 5.2vw, 46px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(2, 28, 54, 0.45);
}

.appeal-title .appeal-accent {
  color: var(--cyan);
}

.appeal-message {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.9;
  margin-top: 18px;
}

.appeal-button {
  display: inline-block;
  margin-top: 30px;
  padding: 15px 38px;
  background: var(--cyan);
  color: #04223f !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 6px 22px rgba(0, 200, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.appeal-button:hover {
  background: #33d4ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 200, 255, 0.45);
  color: #04223f !important;
}

/* ヘッダー下にシアンの細いアクセントライン */
#header-container {
  border-bottom: 3px solid var(--cyan);
}

/* スマホ最適化 */
@media (max-width: 768px) {
  #appeal {
    padding: 52px 18px 58px;
  }
  .appeal-message {
    text-align: left;
    padding: 0 4px;
  }
  .appeal-button {
    display: block;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* 親テーマのアピールエリア既定スタイルの打ち消し */
#appeal .appeal-content,
.appeal-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#appeal .appeal-button,
.appeal .appeal-button,
a.appeal-button {
  background: var(--cyan) !important;
  color: #04223f !important;
  border: none !important;
}

#appeal .appeal-button:hover,
.appeal .appeal-button:hover,
a.appeal-button:hover {
  background: #33d4ff !important;
  color: #04223f !important;
}

#appeal .appeal-message,
.appeal .appeal-message {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 8px rgba(2, 28, 54, 0.4);
}

#appeal .appeal-content .appeal-message,
#appeal .appeal-message,
div.appeal-message {
  color: #ffffff !important;
  opacity: 0.92;
}

#appeal .appeal-message p,
#appeal .appeal-title p,
#appeal .appeal-content p {
  color: inherit !important;
  margin: 0;
}

/* ============================================
   今の路線を磨く: カード導線・アイブロウ・プロフィール
   ============================================ */

/* ヒーローのアイブロウ(英字ラベル) */
.appeal-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--cyan);
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* おすすめカード: 画像の代わりにグラデーション */
.recommended {
  max-width: var(--max-width);
  margin: 0 auto 36px;
}
.recommended .navi-entry-card-thumb img {
  opacity: 0;
}
.recommended .navi-entry-card-link {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(2, 28, 54, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.recommended .navi-entry-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 160, 220, 0.25);
}
.recommended .navi-entry-card-link:nth-of-type(1) .navi-entry-card-thumb {
  background: linear-gradient(135deg, #021c36, #0a4d8c);
}
.recommended .navi-entry-card-link:nth-of-type(2) .navi-entry-card-thumb {
  background: linear-gradient(135deg, #04305c, #0077c6);
}
.recommended .navi-entry-card-link:nth-of-type(3) .navi-entry-card-thumb {
  background: linear-gradient(135deg, #014172, #00a8e0);
}
.recommended .navi-entry-card-link:nth-of-type(4) .navi-entry-card-thumb {
  background: linear-gradient(135deg, #0a2540, #5b7fa6);
}
.recommended .navi-entry-card-title {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 1px 6px rgba(2, 28, 54, 0.5);
}

/* サイドバーのプロフィールボックス */
.jitasoku-profile {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--card-radius);
  padding: 24px 20px;
  text-align: center;
}
.jp-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #04305c, #00a8e0);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 84px;
}
.jp-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-heading);
  margin: 0 0 8px;
}
.jp-bio {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-primary);
  text-align: left;
  margin: 0 0 14px;
}
.jp-link {
  display: inline-block;
  padding: 9px 22px;
  background: var(--accent);
  color: #fff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.jp-link:hover {
  background: var(--accent-light);
}

/* おすすめカード: スマホでは2列 */
@media (max-width: 768px) {
  .recommended .navi-entry-cards {
    display: flex;
    flex-wrap: wrap;
  }
  .recommended .navi-entry-card-link {
    width: calc(50% - 6px) !important;
    margin: 3px;
  }
}


/* グローバルナビ: 1行固定 */
#navi .navi-in > ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 1160px;
  margin: 0 auto;
}
#navi .navi-in > ul > li {
  white-space: nowrap;
}
#navi .navi-in a {
  font-size: 14px;
  padding: 0 16px;
}

/* ヒーローとカードの幅をコンテンツ幅に合わせる */
.recommended {
  max-width: 1160px;
}

/* 2カラムレイアウトの明示(PC) */
@media (min-width: 1024px) {
  #content-in,
  .content-in {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
  }
  #main,
  .main {
    flex: 1;
    min-width: 0;
    margin-right: 28px;
  }
  #sidebar,
  .sidebar {
    flex-shrink: 0;
    width: 320px;
  }
}

/* おすすめカード スマホ2列(余白計算修正) */
@media (max-width: 768px) {
  .recommended .navi-entry-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
    justify-content: center;
  }
  .recommended .navi-entry-card-link {
    width: calc(50% - 5px) !important;
    margin: 0 !important;
  }
}

/* プロフィールアバターを画像に差し替え */
.jp-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 3px solid #00c8ff;
  background: #e9f3fb;
}


/* アピールエリアタイトルの改行調整（2026-07-20） */
#appeal .appeal-title {
  font-size: 36px;
  line-height: 1.4;
  word-break: keep-all;
}
@media screen and (max-width: 834px) {
  #appeal .appeal-title {
    font-size: 24px;
  }
}