@charset "UTF-8";
/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.3
Description: Cocoon child theme — chihiro-toushi.com 専用カスタム
Author: chihiro-toushi.com
*/

/* :root variables */
:root {
  /* Base colors */
  --bg-base:        #F5F0EB;
  --bg-card:        #FFFFFF;
  --bg-section:     #E8DDD0;
  --bg-takeaway:    #FFF8F0;

  /* Accent colors */
  --accent-main:    #C08081;
  --accent-hover:   #A86870;
  --accent-soft:    #E8C5C2;

  /* Text colors */
  --text-main:      #3A3A3A;
  --text-sub:       #6B5A4A;
  --text-muted:     #8B8478;
  --text-on-accent: #FFFFFF;

  /* Borders */
  --border-soft:    #F0E8DC;
  --border-medium:  #E8DDD0;
  --border-strong:  #D4C5B5;

  /* Shadows */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-body:      "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-heading:   var(--font-body);
  --font-mono:      "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --max-width:      1100px;
  --gap-page:       24px;
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-pill:    999px;
}

/* Base & typography */
body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.8;
}

a {
  color: var(--accent-main);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  line-height: 1.5;
}

p { margin-bottom: 1.2em; }

/* 数字は等幅化(stat-table 等での縦揃え) */
table, .num { font-variant-numeric: tabular-nums; }

/* Header */
.header,
.header-container {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-medium);
}

.site-name a,
.logo-text {
  color: var(--accent-main) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tagline {
  color: var(--text-sub);
  font-size: 13px;
}

.navi,
.navi-in {
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-medium);
}

.navi .menu-header li a,
.navi-in > .menu-header li a {
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s, background-color 0.15s;
}

.navi .menu-header li a:hover,
.navi-in > .menu-header li a:hover {
  color: var(--accent-main);
  background-color: var(--bg-base);
}

/* モバイルメニュー */
.navi-menu-button,
.navi-menu-content {
  background-color: var(--bg-card);
}

.navi-menu-button .menu-bars > span,
.navi-menu-button .menu-bars > span::before,
.navi-menu-button .menu-bars > span::after {
  background-color: var(--accent-main);
}

/* Hero */
.hero,
.hero-section {
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-section) 100%);
  padding: 48px 32px;
  text-align: center;
}

.hero h1,
.hero-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}

.hero .subtitle,
.hero-subtitle {
  font-size: 14px;
  color: var(--text-sub);
}

@media (max-width: 768px) {
  .hero,
  .hero-section { padding: 32px 20px; }
  .hero h1,
  .hero-title { font-size: 22px; }
}

/* Cards */
.entry-card,
.related-entry-card,
.card,
.a-wrap {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: none;
  transition: box-shadow 0.15s, transform 0.15s;
}

.entry-card:hover,
.related-entry-card:hover,
.card:hover,
.a-wrap:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.entry-card-title,
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 6px;
}

.entry-card-snippet,
.card-snippet {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.6;
}

.entry-card-meta,
.card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.cat-label,
.entry-card-cat-label,
.card-tag {
  display: inline-block;
  background-color: var(--bg-section);
  color: var(--text-sub);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

/* Article body */
.article,
.entry-content {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.article h1,
.entry-content h1,
.entry-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin-bottom: 16px;
}

.article h2,
.entry-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  border-left: 4px solid var(--accent-main);
  border-right: none;
  border-top: none;
  border-bottom: none;
  background: none;
  padding: 0 0 0 14px;
  margin: 32px 0 16px;
}

.article h3,
.entry-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin: 24px 0 12px;
  padding: 0;
  border: none;
  background: none;
}

.article h4,
.entry-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin: 18px 0 10px;
}

.article p,
.entry-content p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  .article h1,
  .entry-content h1,
  .entry-title { font-size: 24px; }
  .article h2,
  .entry-content h2 { font-size: 20px; }
  .article p,
  .entry-content p { font-size: 15px; }
}

/* Takeaway / blockquote */
.takeaway,
blockquote.takeaway,
.entry-content blockquote {
  background-color: var(--bg-takeaway);
  border-left: 3px solid var(--accent-main);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 15px;
  color: var(--text-sub);
  font-style: normal;
}

.takeaway p:last-child,
blockquote.takeaway p:last-child { margin-bottom: 0; }

/* Stat tables */
.stat-table,
.entry-content table.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
  background-color: var(--bg-card);
}

.stat-table th {
  background-color: var(--bg-takeaway);
  color: var(--text-sub);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-medium);
  border-top: none;
  border-left: none;
  border-right: none;
}

.stat-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--text-main);
}

.stat-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Buttons */
.btn,
.btn-default,
.entry-content .btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.btn-primary,
.btn-default {
  background-color: var(--accent-main);
  color: var(--text-on-accent);
  border-color: var(--accent-main);
}

.btn-primary:hover,
.btn-default:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  text-decoration: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-main);
  border-color: var(--accent-main);
}

.btn-secondary:hover {
  background-color: var(--accent-main);
  color: var(--text-on-accent);
  text-decoration: none;
}

/* Rank badges */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  margin: 12px 0;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.rank-badge .rank-letter {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.rank-badge.rank-s {
  background: #C4A04A;
  box-shadow:
    0 2px 6px rgba(196, 160, 74, 0.5),
    0 0 16px rgba(196, 160, 74, 0.5);
}

.rank-badge.rank-a {
  background: #A03340;
  box-shadow: 0 2px 6px rgba(160, 51, 64, 0.3);
}

.rank-badge.rank-b {
  background: #7C6A95;
  box-shadow: 0 2px 6px rgba(124, 106, 149, 0.3);
}

.rank-badge.rank-c {
  background: #7E947D;
  box-shadow: 0 2px 6px rgba(126, 148, 125, 0.3);
}

.rank-badge.rank-d {
  background: #6B82A0;
  box-shadow: 0 2px 6px rgba(107, 130, 160, 0.3);
}

/* Footer */
.footer,
.footer-container,
.footer-bottom {
  background-color: var(--bg-section);
  color: var(--text-sub);
  border-top: 1px solid var(--border-strong);
}

.footer a,
.footer-container a,
.footer-bottom a {
  color: var(--text-sub);
  text-decoration: underline;
}

.footer a:hover,
.footer-container a:hover,
.footer-bottom a:hover {
  color: var(--accent-main);
}

.copyright {
  color: var(--text-muted);
  font-size: 12px;
}

/* Breadcrumbs */
.breadcrumb,
#breadcrumb {
  background-color: transparent;
  color: var(--text-sub);
  font-size: 12px;
  border: none;
  padding: 12px 24px;
}

.breadcrumb a,
#breadcrumb a {
  color: var(--text-sub);
}

.breadcrumb a:hover,
#breadcrumb a:hover {
  color: var(--accent-main);
}

.breadcrumb .fa-home,
#breadcrumb .fa-home {
  color: var(--accent-main);
}

/* Type cards */
.type-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 32px 0;
}

@media (max-width: 768px) {
  .type-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.type-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 24px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  display: block;
}

.type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-main);
  text-decoration: none;
}

.type-card .icon {
  font-size: 32px;
  color: var(--accent-main);
  margin-bottom: 12px;
  display: block;
}

.type-card h3 {
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 8px;
  font-weight: 700;
}

.type-card p {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Sidebar & widgets */
.sidebar {
  background-color: transparent;
}

.widget {
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
}

.widget-title,
.widget h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: 2px solid var(--accent-main);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* Code blocks */
code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background-color: var(--bg-takeaway);
  color: var(--accent-hover);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background-color: var(--text-main);
  color: var(--bg-base);
  padding: 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 10px 14px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-main);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="submit"],
button[type="submit"],
.wpcf7-submit {
  background-color: var(--accent-main);
  color: var(--text-on-accent);
  border: 2px solid var(--accent-main);
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
}

.entry-content table th,
.entry-content table td {
  padding: 10px 14px;
  border: 1px solid var(--border-medium);
  text-align: left;
}

.entry-content table th {
  background-color: var(--bg-takeaway);
  color: var(--text-sub);
  font-weight: 600;
}

.entry-content table tbody tr:nth-child(even) {
  background-color: var(--bg-base);
}

/* Mobile responsive */
@media (max-width: 768px) {
  /* Cocoon メインラッパーの横 padding 削減 */
  .main,
  .content-in,
  #content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 記事/コンテンツ自身の padding も最小化 */
  .article,
  .entry-content {
    padding: 12px 8px !important;
  }
  /* type-card-grid をモバイルで 1 列・余白 詰める */
  .type-card-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 4px 0 !important;
  }
  .type-card {
    padding: 16px 14px !important;
  }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .main,
  .content-in,
  #content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .article,
  .entry-content {
    padding: 10px 6px !important;
  }
  .article p,
  .entry-content p { line-height: 1.75; }
  /* モバイル最小幅で h2 のテキスト折返し配慮 */
  .article h2,
  .entry-content h2 {
    font-size: 19px;
    padding-left: 10px;
  }
}

/* ============================================================
   Header overrides
   ============================================================ */
.site-name a,
.site-name-text-link,
.site-name-text,
.logo-text,
h1.site-name a,
.header .site-name {
  color: var(--accent-main) !important;
}

.tagline,
.site-description,
.site-name + .tagline {
  display: none !important;
}

/* ============================================================
   Page decoration overrides (固定ページで post 装飾を抑制)
   ============================================================ */
body.page .sns-share,
body.page .sns-share-top,
body.page .sns-share-buttons,
body.page .sns-share-buttons-bottom,
body.page .sns-follow,
body.page .author-info,
body.page .author-box,
body.page .post-date,
body.page .post-update,
body.page .post-meta,
body.page .entry-meta,
body.page .updated,
body.page time.post-date,
body.page time.post-update,
body.page time.entry-date,
body.page time.updated,
body.page .related-entry,
body.page .comment-box {
  display: none !important;
}

/* ホームページ(LP)固有:重複ページタイトル h1 を隠す */
body.home .entry-title,
body.page-id-141 .entry-title {
  display: none !important;
}