@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/************************************
** 合同会社こころの図書館 — 見栄え改善 Phase 1
** 追記先: 外観 > テーマファイルエディター > cocoon-child-master / style.css
** 既存の記述は消さず、末尾にこのブロックを追記してください
** 反映前に現行 style.css をコピーしてバックアップを取ること
************************************/

/* ---- 0. カラーとタイポの基準値 ---- */
:root{
  --tb-navy:#1f3a5f;      /* 基調色：知的・医療系の落ち着き */
  --tb-navy-dark:#16293f;
  --tb-accent:#c9a45c;    /* アクセント：書物・箔のイメージ */
  --tb-ink:#2b2b2b;       /* 本文 */
  --tb-ink-sub:#5d6470;   /* 補助テキスト */
  --tb-bg:#f7f5f1;        /* 生成りの背景 */
  --tb-line:#e3ded6;
  --tb-radius:10px;
  --tb-shadow:0 2px 14px rgba(31,58,95,.08);
}

body{
  color:var(--tb-ink);
  background:var(--tb-bg);
  font-feature-settings:"palt" 1;   /* 日本語の詰め。これだけで印象が変わる */
  letter-spacing:.02em;
}
.main, .sidebar{
  background:#fff;
  border:1px solid var(--tb-line);
  border-radius:var(--tb-radius);
  box-shadow:var(--tb-shadow);
}

/* ---- 1. ヘッダー：白地ベタ → 濃紺の帯 ---- */
.header-container{
  background:var(--tb-navy);
  border-bottom:3px solid var(--tb-accent);
}
.logo-header .site-name-text-link,
.logo-header a{
  color:#fff !important;
  font-weight:700;
  letter-spacing:.08em;
}
.header-in{ padding-top:18px; padding-bottom:18px; }

/* グローバルナビ */
.navi-in > .menu-header .item-label{ color:#fff; }
.navi-in a{
  color:#fff !important;
  font-size:15px;
  letter-spacing:.04em;
}
.navi-in > ul > li > a:hover{
  background:rgba(255,255,255,.12);
}
.navi-in > ul > li.current-menu-item > a{
  box-shadow:inset 0 -3px 0 var(--tb-accent);
}
/* ドロップダウンを読みやすく */
.navi-in > ul .sub-menu{
  background:var(--tb-navy-dark);
  border:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.navi-in > ul .sub-menu li a{ border-bottom:1px solid rgba(255,255,255,.08); }

/* ---- 2. トップページのヒーロー ----
   固定ページ「ようこそいらっしゃいました」(page-id-72) の
   本文先頭に <div class="tb-hero"> ... </div> を入れると効きます（別途HTML案あり） */
.tb-hero{
  margin:-1.2em -1.2em 2em;
  padding:64px 32px 56px;
  background:
    linear-gradient(180deg, rgba(22,41,63,.62), rgba(22,41,63,.80)),
    url('/wp-content/uploads/hero.jpg') center/cover no-repeat;
  border-radius:var(--tb-radius) var(--tb-radius) 0 0;
  color:#fff;
  text-align:center;
}
.tb-hero__lead{
  font-size:clamp(22px,3.4vw,32px);
  font-weight:600;
  line-height:1.5;
  margin:0 0 .8em;
  letter-spacing:.14em;
}
.tb-hero__sub{
  font-size:clamp(14px,1.8vw,17px);
  line-height:1.9;
  color:rgba(255,255,255,.88);
  max-width:34em;
  margin:0 auto 1.8em;
}
.tb-hero__cta{
  display:inline-block;
  padding:12px 32px;
  background:transparent;
  border:1px solid rgba(255,255,255,.7);
  color:#fff !important;
  font-weight:500;
  letter-spacing:.08em;
  border-radius:2px;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tb-hero__cta:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ---- 3. 3領域カード（専門三領域の入口） ---- */
.tb-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin:2.4em 0;
}
.tb-card{
  display:block;
  padding:28px 24px;
  background:#fff;
  border:1px solid var(--tb-line);
  border-top:4px solid var(--tb-navy);
  border-radius:var(--tb-radius);
  text-decoration:none !important;
  color:var(--tb-ink) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tb-card:hover{ transform:translateY(-3px); box-shadow:var(--tb-shadow); }
.tb-card__title{
  font-size:19px; font-weight:700; color:var(--tb-navy);
  margin:0 0 .5em; letter-spacing:.04em;
}
.tb-card__text{ font-size:14px; line-height:1.85; color:var(--tb-ink-sub); margin:0; }

/* ---- 4. 本文の可読性（長文の医学・心理テキスト向け） ---- */
.entry-content{ line-height:2.0; }
.entry-content p{ margin-bottom:1.6em; }
.article h2{
  position:relative;
  margin:2.4em 0 1.2em;
  padding:.5em 0 .5em .9em;
  background:none;
  border:none;
  border-left:5px solid var(--tb-accent);
  font-size:clamp(20px,2.6vw,25px);
  color:var(--tb-navy);
  letter-spacing:.04em;
}
.article h3{
  margin:2em 0 1em;
  padding-bottom:.4em;
  border-bottom:1px solid var(--tb-line);
  border-left:none;
  font-size:clamp(17px,2.2vw,20px);
  color:var(--tb-navy-dark);
}
.entry-content a{ color:#1a5fb4; text-underline-offset:3px; }
.entry-title, .article-header .entry-title{
  font-size:clamp(22px,3vw,30px);
  line-height:1.5;
  color:var(--tb-navy-dark);
}

/* ---- 5. 記事一覧カード ---- */
.entry-card-wrap, .related-entry-card-wrap{
  border:1px solid var(--tb-line);
  border-radius:var(--tb-radius);
  background:#fff;
  transition:box-shadow .18s ease, transform .18s ease;
}
.entry-card-wrap:hover, .related-entry-card-wrap:hover{
  transform:translateY(-2px); box-shadow:var(--tb-shadow);
}
.entry-card-title, .related-entry-card-title{ color:var(--tb-navy-dark); font-weight:700; }
.entry-card-snippet, .related-entry-card-snippet{ color:var(--tb-ink-sub); }
/* ---- 記事一覧カード：サムネイル画像を出さずテキスト主体にする ----
   Cocoonのentry-cardテンプレートはアイキャッチ未設定でも
   no-image画像を必ず出力するため、CSS側で消す */
.entry-card-thumb img,
.related-entry-card-thumb img,
.carousel-entry-card-thumb img,
.widget-entry-card-thumb img,
.popular-entry-card-thumb img,
.navi-entry-card-thumb img,
.blogcard-thumbnail img{
  display:none !important;
}
.entry-card-thumb,
.related-entry-card-thumb,
.widget-entry-card-thumb,
.popular-entry-card-thumb{
  float:none !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 0 .6em !important;
  padding:0 !important;
  background:none !important;
}
.entry-card-content,
.related-entry-card-content,
.widget-entry-card-content,
.popular-entry-card-content{
  margin-left:0 !important;
  min-height:0 !important;
}

/* カテゴリラベル：サムネイル内の絶対配置をやめて通常表示に戻す */
.cat-label{
  position:static !important;
  display:inline-block;
  background:var(--tb-navy);
  border-color:var(--tb-navy);
  color:#fff;
  font-size:12px;
  letter-spacing:.04em;
  padding:2px 10px;
  border-radius:2px;
}

/* ---- 6. サイドバー ---- */
.sidebar h3, .sidebar .widget-sidebar-title{
  background:none;
  border-left:4px solid var(--tb-navy);
  padding:.2em 0 .2em .7em;
  color:var(--tb-navy);
  font-size:16px;
}
.sidebar li a{ color:var(--tb-ink); }
.sidebar li a:hover{ color:var(--tb-navy); }

/* ---- 7. フッター ---- */
.footer{
  background:var(--tb-navy-dark);
  color:rgba(255,255,255,.82);
  border-top:3px solid var(--tb-accent);
}
.footer a{ color:#fff !important; }
.footer-bottom{ background:transparent; }

/* ---- 8. トラウマ療法情報サイトへの導線 ---- */
/* 3領域カードとは別のブロックとして扱う（第4の事業領域に見せない）。
   上に区切り線を置き、横長1枚で並べる。 */
.tb-info-banner{
  margin:3.2em 0 2.4em;
  padding-top:2.4em;
  border-top:1px solid var(--tb-line);
}
.tb-info-banner__link{
  display:block;
  padding:26px 28px;
  background:#fbfaf7;
  border:1px solid var(--tb-line);
  border-left:4px solid var(--tb-accent);
  border-radius:var(--tb-radius);
  text-decoration:none !important;
  color:var(--tb-ink) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tb-info-banner__link:hover{ transform:translateY(-2px); box-shadow:var(--tb-shadow); }
.tb-info-banner__title{
  font-size:18px; font-weight:700; color:var(--tb-navy);
  margin:0 0 .6em; letter-spacing:.04em;
}
.tb-info-banner__text{
  font-size:14px; line-height:1.9; color:var(--tb-ink-sub); margin:0 0 .8em;
}
.tb-info-banner__more{
  display:inline-block; font-size:13px; font-weight:600; color:var(--tb-navy);
}
.tb-info-banner__more::after{ content:" \203A"; }

/* 技法ページ末尾の文脈リンク */
.tb-method-link{
  margin:2.6em 0 0;
  padding:18px 20px;
  background:#fbfaf7;
  border:1px solid var(--tb-line);
  border-left:4px solid var(--tb-accent);
  border-radius:var(--tb-radius);
}
.tb-method-link a{
  display:inline-block; font-size:15px; font-weight:600;
  color:var(--tb-navy) !important; text-decoration:none !important;
}
.tb-method-link a::after{ content:" \203A"; }
.tb-method-link a:hover{ text-decoration:underline !important; }
.tb-method-link__note{
  display:block; margin-top:.4em; font-size:12px; color:var(--tb-ink-sub);
}

/* ---- 9. モバイル（スマホ実機で崩れやすい箇所） ---- */
@media screen and (max-width:834px){
  .main, .sidebar{ border-radius:0; border-left:none; border-right:none; }
  .tb-hero{ margin:-1em -1em 1.6em; padding:44px 20px 40px; border-radius:0; }
  .entry-content{ line-height:1.9; font-size:16px; }
  .article h2{ font-size:20px; }
}
@media screen and (max-width:480px){
  .navi-in a{ font-size:14px; }
  .tb-cards{ gap:14px; }
  .tb-card{ padding:22px 18px; }
  .tb-info-banner__link{ padding:22px 18px; }
}