@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-09-12 追加
**
** 濃い水色 #1f7ba3 … 文字と色帯（白文字とのコントラスト4.8:1）
** やわらかい水色 #7bc0da … 線と飾り（文字には使わない）
** 淡い水色 #e3f1f8 … ボックス
** 地 #eef6fa ／ ヘッダー #fff3d4 ／ マーカー #fdf3a8
**
** 方針（見本 libeblog.com の構成を踏襲）
**  1. 見出しは塗らない。線だけで区切る
**  2. 色帯はメニュー・サイドバー見出し・フッターの3か所だけ
**  3. ヘッダーだけ暖色ではさむ
**  4. 強調は色文字ではなく黄色マーカー
************************************/

/*--- 全体の地色 ---*/
body.page-body { background-color: #eef6fa; }
#container, #content, #main, #sidebar { background-color: transparent; }

/*--- 本文 ---*/
.entry-content { color: #4a4a4a; line-height: 2.0; }

/*--- ヘッダー（ここだけ暖色） ---*/
#header-container, #header, .header { background-color: #fff3d4; }
.site-name-text { color: #1f7ba3; }
.tagline { color: #8a7f63; }

/*--- グローバルメニュー（濃い水色の帯＋白文字） ---*/
#navi, #navi-in, #navi .navi-in > .menu-header { background-color: #1f7ba3; }
#navi .navi-in a,
#navi .navi-in > .menu-header .item-label { color: #ffffff; }
#navi .navi-in > ul > li:hover { background-color: #2a93c1; }

/*--- 見出し：塗らない。線だけ ---*/
.article h2 {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #7bc0da;
  border-radius: 0;
  color: #1f7ba3;
  padding: 0 0 10px;
  margin-top: 2.2em;
}
.article h3 {
  background-color: transparent;
  border: none;
  border-bottom: 2px dotted #7bc0da;
  border-radius: 0;
  color: #1f7ba3;
  padding: 0 0 8px;
}
.article h4 {
  background-color: transparent;
  border: none;
  border-left: 4px solid #7bc0da;
  color: #1f7ba3;
  padding: 2px 0 2px 12px;
}

/*--- リンク ---*/
.entry-content a { color: #1f7ba3; }
.entry-content a:hover { color: #2a93c1; }

/*--- 表 ---*/
.entry-content table th { background-color: #e3f1f8; color: #17536d; }
.entry-content table th,
.entry-content table td { border-color: #d3e2ea; }

/*--- カテゴリーラベル ---*/
.cat-label { background-color: #1f7ba3; border-color: #1f7ba3; color: #ffffff; }

/*--- サイドバーの見出し ---*/
.sidebar h3,
.sidebar .widget-sidebar-title {
  background-color: #1f7ba3;
  color: #ffffff;
  border: none;
}

/*--- フッター ---*/
.footer { background-color: #1f7ba3; color: #ffffff; }
.footer a, .footer .menu-footer a { color: #ffffff; }
.footer .copyright { color: #e3f1f8; }

/*--- 目次 ---*/
.toc { background-color: #ffffff; border: 1px solid #7bc0da; border-radius: 6px; }
.toc-title { color: #1f7ba3; }

/*--- ボタン ---*/
.btn, .btn-l, .btn-m, .btn-s { background-color: #1f7ba3; }

/*--- 記事カード ---*/
.entry-card-wrap:hover, .related-entry-card-wrap:hover { background-color: #e3f1f8; }

/*--- マーカー ---*/
.marker, .marker-under { background: linear-gradient(transparent 62%, #fdf3a8 62%); }


/************************************
** 記事の中で使う部品（yd-）
** 以前は記事ごとにHTMLへ書いていたものを、ここへ集約した。
** 色を変えたいときは、このファイルだけ直せば全記事に効く。
************************************/
.yd-lead{background:#e3f1f8;border-left:5px solid #1f7ba3;border-radius:0 8px 8px 0;padding:18px 20px;margin:24px 0}
.yd-lead p{margin:0 0 10px}
.yd-lead p:last-child{margin:0}

.yd-point{background:#fffaf0;border:1px solid #f0d9a8;border-left:5px solid #e0a63c;border-radius:0 8px 8px 0;padding:18px 20px;margin:28px 0}
.yd-point .t{display:block;font-weight:700;color:#b07d1e;font-size:.9em;letter-spacing:.08em;margin-bottom:10px}
.yd-point p:last-child,.yd-point ul:last-child{margin-bottom:0}

.yd-alert{background:#fdf5f5;border:1px solid #edbdc0;border-left:5px solid #d9333f;border-radius:0 8px 8px 0;padding:18px 20px;margin:28px 0}
.yd-alert .t{display:block;font-weight:700;color:#c02631;font-size:.9em;letter-spacing:.08em;margin-bottom:10px}
.yd-alert p:last-child{margin-bottom:0}

.yd-q{font-weight:700;color:#1f7ba3;font-size:1.06em;line-height:1.75;margin:34px 0 14px;padding-left:15px;border-left:4px solid #7bc0da}
.yd-a{background:#fbfdfe;border:1px solid #d3e2ea;border-radius:8px;padding:17px 21px;margin:0 0 8px}
.yd-a p{margin:0 0 12px}
.yd-a p:last-child{margin:0}

.yd-sep{display:flex;align-items:center;justify-content:center;gap:12px;margin:42px 0}
.yd-sep i{flex:1;height:1px;background:#d3e2ea}
.yd-sep b{width:7px;height:7px;background:#7bc0da;transform:rotate(45deg);display:block}

.yd-fin{background:#1f7ba3;color:#ffffff;border-radius:10px;padding:24px 26px;margin:32px 0}
.yd-fin p{margin:0 0 12px}
.yd-fin p:last-child{margin:0}
.yd-fin strong{color:#fdf3a8}

/*--- 案内人「ド素人のおやじくん」の吹き出し ---*/
.yd-say{display:flex;gap:14px;align-items:flex-start;margin:30px 0}
.yd-say img{width:84px;height:auto;flex:none;margin:0}
.yd-say .b{position:relative;background:#ffffff;border:1px solid #d3e2ea;border-radius:10px;padding:14px 18px;flex:1;min-width:0}
.yd-say .b::before{content:"";position:absolute;left:-8px;top:26px;width:14px;height:14px;background:#ffffff;border-left:1px solid #d3e2ea;border-bottom:1px solid #d3e2ea;transform:rotate(45deg)}
.yd-say .b p{margin:0 0 10px}
.yd-say .b p:last-child{margin:0}


/*--- 挿絵（イラスト）---*/
.yd-ill{display:block;margin:32px auto;width:auto;height:auto;max-width:60%;max-height:180px}
.yd-ill-s{display:block;margin:26px auto;width:auto;height:auto;max-width:40%;max-height:118px}
.yd-ill-r{float:right;width:140px;height:auto;margin:4px 0 14px 20px}
.yd-ill-l{float:left;width:140px;height:auto;margin:4px 20px 14px 0}
.yd-clear{clear:both}
.yd-ill-row{display:flex;gap:18px;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin:26px 0}
.yd-ill-row img{width:150px;height:auto}


/************************************
** 文字組みと余白のリバランス（2026-09-12）
**
** 余白の優先順位をはっきりさせる
**   セクションの切れ目（見出しの上）54px ＞ 段落の間 27px ＞ 見出しと本文の間 18px
** 見出しの下を詰めることで、見出しが本文とひとかたまりに見える
************************************/
.entry-content{letter-spacing:.02em}
.entry-content > *:first-child{margin-top:0}
.entry-content p{margin:0 0 1.5em;line-height:2.0}
.entry-content ul,.entry-content ol{margin:1.5em 0;padding-left:1.7em}
.entry-content li{margin-bottom:.5em;line-height:1.9}
.entry-content li:last-child{margin-bottom:0}
.entry-content table{margin:1.6em 0}
.entry-content table th,.entry-content table td{line-height:1.75}

.article h2{font-size:1.5em;line-height:1.5;margin:2.6em 0 .6em;padding:0 0 12px}
.article h3{font-size:1.15em;line-height:1.55;margin:1.6em 0 .55em;padding:0 0 8px}
.article h4{font-size:1.05em;line-height:1.6;margin:1.4em 0 .5em}

.yd-lead,.yd-point,.yd-alert,.yd-fin{margin:1.8em 0}
.yd-say{margin:2em 0}
.yd-ill{margin:1.8em auto}
.yd-ill-s{margin:1.4em auto}
.yd-q{margin:2em 0 .8em}
.yd-a{margin:0 0 .6em}
.yd-sep{margin:2.6em 0}


/*--- インタビューの答え（本人の一次情報）だけ色を変える ---*/
.yd-say-me .b{background:#eef6fa;border-color:#bcd9e6}
.yd-say-me .b::before{background:#eef6fa;border-color:#bcd9e6}
.yd-say-me{margin:0 0 1.6em}
.yd-q + .yd-say-me{margin-top:.2em}
.yd-say-me .nm{display:block;font-size:.78em;font-weight:700;color:#1f7ba3;letter-spacing:.06em;margin:0 0 8px}


/*--- プロフィール枠（このブログについて・記事末の著者紹介）---*/
.yd-prof{display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  background:#ffffff;border:1px solid #d3e2ea;border-radius:12px;padding:22px 26px;margin:0 0 2.2em}
.yd-prof > img{width:112px;height:auto;flex:none;margin:0}
.yd-prof .t{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.yd-prof .role{font-size:.72em;letter-spacing:.1em;font-weight:700;color:#1f7ba3}
.yd-prof .nm2{font-size:1.34em;font-weight:700;color:#17536d;line-height:1.4}
.yd-prof p{margin:0;font-size:.92em;line-height:1.9}
.yd-prof .yd-fact{font-size:.84em;line-height:1.7;color:#17536d;background:#eef6fa;border-radius:6px;padding:8px 12px;margin:2px 0 0}
.yd-note{font-size:.86em;color:#8a8a8a;line-height:1.85;margin-top:2.4em}
@media screen and (max-width:480px){
  .yd-prof{gap:16px;padding:18px 18px}
  .yd-prof > img{width:76px}
  .yd-prof .t{min-width:160px}
  .yd-prof .nm2{font-size:1.18em}
}


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

/*834px以下*/
@media screen and (max-width: 834px){
  .article h2 { margin-top: 1.8em; }
  .yd-ill{max-height:160px}
  .yd-ill-s{max-height:104px}
}

/*480px以下*/
@media screen and (max-width: 480px){
  .yd-ill{max-height:150px;max-width:78%;margin:26px auto}
  .yd-ill-s{max-height:92px;max-width:52%}
  .yd-ill-r,.yd-ill-l{width:104px;margin-left:14px;margin-right:14px}
  .yd-ill-row img{width:112px}
  .yd-say img{width:60px}
  .yd-q{font-size:1em;padding-left:12px}
  .yd-a{padding:14px 16px}
  .yd-fin{padding:20px 18px}
}