/*
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カラム強制・中央寄せ
   ============================================ */
#content-in,
.content-in {
  display: block !important;
}

#main,
.main {
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
  padding-right: 0 !important;
}

.wrap {
  max-width: calc(var(--max-width) + 60px);
  margin-left: auto;
  margin-right: auto;
}

/* サイドバー完全非表示（3種すべて） */
#sidebar,
#sidebar-scroll,
#slide-in-sidebar,
.sidebar,
.sidebar-scroll,
.slide-in-sidebar {
  display: none !important;
  width: 0 !important;
}

/* ============================================
   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;
  }
}