@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){
  /*必要ならばここにコードを書く*/
}

/************************************
** 記事一覧のカテゴリーラベルを非表示
** アイキャッチ画像側にカテゴリー名が
** 入っているため、重複を避ける
************************************/
.entry-card-wrap .cat-label,
.related-entry-card-wrap .cat-label,
.carousel .cat-label {
  display: none;
}

/************************************
** ヘッダー背景画像（Geminiで生成・2026年9月）
** 画像の上下中央にあるイラストの帯を見せる
************************************/
#header.header {
  background-size: cover;
  background-position: center center;
}
#header .header-in {
  min-height: clamp(150px, 17vw, 330px);
}
#header .site-name-text,
#header .tagline {
  text-shadow: 0 1px 10px rgba(16, 36, 60, .55);
}
/* スマホでは画像を少し拡大して、イラストとブログ名が重ならないようにする */
@media screen and (max-width: 480px) {
  #header.header {
    background-size: 140% auto;
  }
}

/************************************
** アフィリエイト広告枠（おすすめカード・ボタン帯・結論ボックス）
** 使い方は「わかここ収益化プラン」を参照
************************************/
/* ===== わかここ 広告枠（2026-09） ここから ===== */
.wk-offer{--wk-c:#2F5D8C;background:#fff;border:1px solid #d6dee7;border-radius:10px;padding:1.3em 1.5em 1.5em;margin:2em 0;box-shadow:0 10px 24px -18px rgba(30,41,53,.45)}
.wk-offer--telecom{--wk-c:#3A7AB8}
.wk-offer--money{--wk-c:#AA7426}
.wk-offer--it{--wk-c:#247C6C}
.wk-offer--ai{--wk-c:#5F569E}
.wk-offer .wk-offer__head{display:flex;align-items:center;gap:.5em;margin:0 0 .5em}
.wk-offer .wk-offer__cat{font-size:.72em;font-weight:700;color:#fff;background:var(--wk-c);border-radius:3px;padding:.15em .6em;letter-spacing:.04em}
.wk-offer .wk-offer__pr{font-size:.68em;color:#6b7785;border:1px solid #c5ced8;border-radius:3px;padding:.05em .45em;letter-spacing:.08em}
.wk-offer .wk-offer__name{font-size:1.3em;font-weight:700;color:#1e2935;margin:0 0 .4em;line-height:1.45}
.wk-offer ul.wk-offer__points{list-style:none;margin:0 0 1em;padding:0}
.wk-offer ul.wk-offer__points li{position:relative;padding-left:1.6em;margin:.3em 0;line-height:1.7;list-style:none}
.wk-offer ul.wk-offer__points li::before{content:"";position:absolute;left:.25em;top:.5em;width:.7em;height:.38em;border-left:2px solid var(--wk-c);border-bottom:2px solid var(--wk-c);transform:rotate(-45deg)}
.wk-offer .wk-offer__note{font-size:.78em;color:#6b7785;margin:0 0 1.1em;line-height:1.6}
a.wk-btn{display:block;max-width:22em;margin:0 auto;text-align:center;background:#2F5D8C;color:#fff !important;text-decoration:none !important;font-weight:700;line-height:1.5;padding:.85em 1.2em;border-radius:6px;box-shadow:0 3px 0 #1f4266;transition:transform .15s,box-shadow .15s}
a.wk-btn::after{content:"\203A";margin-left:.6em;font-weight:400}
a.wk-btn:hover{transform:translateY(2px);box-shadow:0 1px 0 #1f4266}
a.wk-btn:focus-visible{outline:3px solid #9cc0e6;outline-offset:2px}
.wk-cta{text-align:center;margin:1.8em 0;padding:1.1em 1em 1.3em;background:#f1f4f8;border-radius:8px}
.wk-cta .wk-cta__lead{font-size:.86em;color:#44505c;margin:0 0 .6em}
.wk-verdict{margin:2em 0;border:2px solid #2F5D8C;border-radius:10px;overflow:hidden;background:#fff}
.wk-verdict .wk-verdict__title{margin:0;padding:.55em 1.2em;background:#2F5D8C;color:#fff;font-weight:700;letter-spacing:.04em}
.wk-verdict .wk-verdict__body{padding:1em 1.2em 1.2em}
.wk-verdict .wk-verdict__text{margin:0 0 .9em;line-height:1.8}
.wk-verdict .wk-verdict__grid{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.wk-verdict .wk-verdict__col{border-radius:6px;padding:.7em .9em}
.wk-verdict .is-yes{background:#e8f3f0}
.wk-verdict .is-no{background:#f1f3f6}
.wk-verdict .wk-verdict__label{margin:0 0 .3em;font-size:.82em;font-weight:700}
.wk-verdict .is-yes .wk-verdict__label{color:#247C6C}
.wk-verdict .is-no .wk-verdict__label{color:#5b6878}
.wk-verdict ul.wk-verdict__list{margin:0;padding:0 0 0 1.2em;font-size:.92em;line-height:1.7}
.wk-verdict ul.wk-verdict__list li{margin:.15em 0}
@media (max-width:600px){.wk-verdict .wk-verdict__grid{grid-template-columns:1fr}.wk-offer{padding:1.1em 1.1em 1.3em}}
@media (prefers-reduced-motion:reduce){a.wk-btn{transition:none}}
/* ASPの計測用画像（1x1）で余白ができないようにする */
.wk-offer,.wk-cta{position:relative}
.wk-offer > img[width="1"],.wk-cta > img[width="1"]{position:absolute;left:0;bottom:0;border:0}
/* ===== わかここ 広告枠 ここまで ===== */

/* =========================================================
   読みやすさ調整（2026-09-16）
   参考：マクリン／ノマド的節約術／副業コンパス
   方針：藍色（#2F5D8C）の世界観はそのまま、本文を読みやすく
   ========================================================= */

/* --- 本文 --- */
.article .entry-content{
  color:#2B2F36;
  letter-spacing:.03em;
}
.article .entry-content > p{
  line-height:1.95;
  margin-bottom:1.7em;
}

/* --- 箇条書き：本文と同じ文字の大きさに --- */
.article .entry-content > ul,
.article .entry-content > ol{
  font-size:inherit;
}
.article .entry-content > ul li,
.article .entry-content > ol li{
  font-size:1em;
  line-height:1.8;
  margin-bottom:.4em;
}

/* --- リンク --- */
.article .entry-content > p a,
.article .entry-content > ul a,
.article .entry-content > ol a,
.article .entry-content .wp-block-table td a{
  color:#1F5FA8;
  text-underline-offset:3px;
}
.article .entry-content > p a:hover,
.article .entry-content > ul a:hover,
.article .entry-content > ol a:hover,
.article .entry-content .wp-block-table td a:hover{
  color:#2F5D8C;
  text-decoration-thickness:2px;
}

/* --- 太字：やわらかい黄色のマーカーを引く --- */
.article .entry-content > p strong,
.article .entry-content > ul strong,
.article .entry-content > ol strong,
.wk-point strong{
  font-weight:700;
  background:linear-gradient(transparent 62%, #FBE3A0 62%);
  padding:0 .08em;
}

/* --- 記事タイトル --- */
.article h1.entry-title{
  line-height:1.5;
  letter-spacing:.02em;
}

/* --- 見出し2：藍色の帯（角を少し丸く、前後に余白） --- */
.article .entry-content h2{
  font-size:22px;
  line-height:1.5;
  letter-spacing:.04em;
  color:#fff;
  background-color:#2F5D8C;
  padding:14px 20px;
  margin:2.6em 0 1.2em;
  border:none;
  border-radius:6px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}

/* --- 見出し3：左の縦線＋下線だけの軽い形に --- */
.article .entry-content h3{
  font-size:20px;
  line-height:1.5;
  color:#1E3A5A;
  background:none;
  padding:6px 0 8px 14px;
  margin:2.2em 0 1em;
  border:none;
  border-left:6px solid #2F5D8C;
  border-bottom:1px solid #C9D6E3;
}

/* --- 見出し4：丸印 --- */
.article .entry-content h4{
  font-size:18px;
  line-height:1.6;
  background:none;
  border:none;
  position:relative;
  padding:0 0 0 1.2em;
  margin:1.8em 0 .8em;
}
.article .entry-content h4::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:.65em;
  height:.65em;
  border-radius:50%;
  background:#2F5D8C;
}

/* --- 表：文字を少し小さく、行を見分けやすく --- */
.article .entry-content .wp-block-table table{
  font-size:16px;
  line-height:1.7;
}
.article .entry-content .wp-block-table th,
.article .entry-content .wp-block-table td{
  font-size:inherit;
}
.article .entry-content .wp-block-table th{
  background:#E8EEF5;
  color:#1E3A5A;
  font-weight:700;
}
.article .entry-content .wp-block-table tbody tr:nth-child(even) td{
  background:#F7F9FC;
}
.article .entry-content .wp-block-table tbody td:first-child{
  min-width:6.5em;
}

/* --- 記事冒頭の「この記事でわかること」ボックス --- */
.wk-summary{
  position:relative;
  background:#fff;
  border:2px solid #2F5D8C;
  border-radius:10px;
  padding:1.6em 1.4em 1em;
  margin:2.2em 0 2.4em;
}
.article .entry-content .wk-summary > .wk-summary__title{
  position:absolute;
  top:-.95em;
  left:1em;
  margin:0;
  padding:.1em 1em;
  font-size:15px;
  line-height:1.7;
  font-weight:700;
  color:#fff;
  background:#2F5D8C;
  border-radius:999px;
}
.wk-summary ul{
  list-style:none;
  margin:0;
  padding:0;
}
.wk-summary li{
  position:relative;
  padding-left:1.8em;
  margin-bottom:.5em;
  font-size:1em;
  line-height:1.7;
  font-weight:700;
}
.wk-summary li::before{
  content:"";
  position:absolute;
  left:.25em;
  top:.42em;
  width:.85em;
  height:.45em;
  border-left:3px solid #2F5D8C;
  border-bottom:3px solid #2F5D8C;
  transform:rotate(-45deg);
}

/* --- ポイントボックス（淡い藍の背景） --- */
.wk-point{
  background:#EEF3F8;
  border-radius:8px;
  padding:1.2em 1.4em;
  margin:1.6em 0 2em;
}
.wk-point > :last-child{
  margin-bottom:0;
}
.wk-point ul{
  list-style:none;
  margin:0;
  padding:0;
}
.wk-point li{
  position:relative;
  padding-left:1.4em;
  margin-bottom:.4em;
  font-size:1em;
  line-height:1.8;
}
.wk-point li::before{
  content:"";
  position:absolute;
  left:.15em;
  top:.55em;
  border-top:.36em solid transparent;
  border-bottom:.36em solid transparent;
  border-left:.55em solid #C98A2B;
}

/* --- スマホ --- */
@media screen and (max-width: 480px){
  .article .entry-content > p{
    line-height:1.9;
  }
  .article .entry-content h2{
    font-size:19px;
    padding:12px 14px;
    margin-top:2.2em;
  }
  .article .entry-content h3{
    font-size:17.5px;
    padding-left:12px;
  }
  .article .entry-content h4{
    font-size:16.5px;
  }
  .article .entry-content .wp-block-table table{
    font-size:14px;
    line-height:1.65;
  }
  .article .entry-content .wp-block-table tbody td:first-child{
    min-width:5em;
  }
  .wk-summary{
    padding:1.5em 1em .8em;
  }
}