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

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

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

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

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

/* ===== チャイルドLINE design 2026-10-08 (BEGIN) ===== */
/* 仕様: F:\REALINEAI\childrealine\child_P1デザイン仕様書_S2施策案_20261008.md（色を変える時は :root と仕様書の表を合わせる） */
/* 画像の URL は完全な URL で書く（Cocoon の CSS 縮小化が url(/…) を子テーマ基準に壊すため） */
:root{--cl-ink:#2A2C5A;--cl-blue:#2C55C2;--cl-blue-d:#21439C;--cl-sun:#FFC83D;--cl-coral:#EF7A63;--cl-leaf:#5DBB86;--cl-sky:#EAF2FF;--cl-sun-l:#FFF4D6;--cl-bg:#FFFDF8;--cl-text:#25273D;--cl-muted:#555A75;--cl-line:#E2E5F0;--cl-radius:10px;--cl-blocks:linear-gradient(90deg,var(--cl-sun) 0 25%,var(--cl-coral) 25% 50%,var(--cl-leaf) 50% 75%,var(--cl-blue) 75% 100%)}
body{background:var(--cl-bg);color:var(--cl-text)}
a{color:var(--cl-blue)}
a:hover{color:var(--cl-blue-d)}
/* ヘッダー：上端の4色の積み木の帯・ロゴ・タグライン・ナビ */
#header-container::before{content:"";display:block;height:6px;background:var(--cl-blocks)}
#header,#header-container,#navi,#navi .navi-in>ul{background:#fff}
.header .site-name-text,.tagline{color:var(--cl-ink)}
.tagline{color:var(--cl-muted);font-size:12px;letter-spacing:.04em}
.logo-header img{height:52px;width:auto;max-height:none}
#navi{border-top:1px solid var(--cl-line);border-bottom:1px solid var(--cl-line)}
#navi .navi-in>ul>li>a{color:var(--cl-ink);font-weight:700;letter-spacing:.02em;border-bottom:3px solid transparent}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li>a:focus-visible{background:var(--cl-sky);color:var(--cl-ink);border-bottom-color:var(--cl-blue)}
/* スマホのヘッダーメニューは1行で横に送る（折り返すと画面上部を大きく取る。av の罠） */
#navi .navi-in>.menu-mobile{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
#navi .navi-in>.menu-mobile>li{flex:0 0 auto;width:auto}
#navi .navi-in>.menu-mobile>li>a{padding:0 14px}
/* 検索ボックス（全ページ上部の既存ウィジェット） */
.widget-content-top .wp-block-search{max-width:760px;margin:14px auto;padding:0 12px}
.widget-content-top .wp-block-search__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.widget-content-top .wp-block-search__inside-wrapper{border:2px solid var(--cl-ink);border-radius:999px;background:#fff;overflow:hidden;padding:0}
.widget-content-top .wp-block-search__input{border:0;padding:10px 18px;background:#fff;color:var(--cl-text)}
.widget-content-top .wp-block-search__button{background:var(--cl-blue);color:#fff;border:0;margin:0;padding:0 24px;font-weight:700;border-radius:0}
.widget-content-top .wp-block-search__button:hover{background:var(--cl-blue-d)}
/* トップのハブ（子テーマでトップの1ページ目だけに出力。念のため CSS でも他では隠す） */
body:not(.home) .cl-hub,body.paged .cl-hub{display:none}
.cl-hero{position:relative;border-radius:16px;overflow:hidden;background:var(--cl-sky) url(https://child.realine.me/wp-content/uploads/2026/10/child-hero.jpg) right center/auto 100% no-repeat;min-height:260px;margin:0 0 26px;border:1px solid var(--cl-line);display:flex;align-items:center}
/* 見出しの下に生成りの面を敷き、絵の上でも文字のコントラストを保つ（藍×生成り 13:1 前後） */
.cl-hero-inner{margin:22px;padding:22px 24px;max-width:440px;background:rgba(255,253,248,.95);border-radius:12px;box-shadow:0 2px 10px rgba(42,44,90,.08)}
.cl-hero-kicker{display:inline-block;background:var(--cl-sun);color:var(--cl-ink);font-weight:800;font-size:13px;padding:4px 14px;border-radius:6px;margin:0 0 14px;letter-spacing:.06em}
.cl-hero-title{color:var(--cl-ink);font-size:26px;font-weight:800;line-height:1.45;margin:0 0 12px}
.cl-hero-lead{color:var(--cl-muted);font-size:14px;line-height:1.85;margin:0}
.cl-hub h2.cl-hub-h{position:relative;font-size:20px;font-weight:800;color:var(--cl-ink);background:none;border:0;border-radius:0;padding:2px 0 2px 46px;margin:30px 0 14px}
.cl-hub h2.cl-hub-h::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:2px;background:var(--cl-sun);box-shadow:13px 0 0 var(--cl-coral),26px 0 0 var(--cl-leaf)}
.cl-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cl-pillar{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:#fff;border:1px solid var(--cl-line);border-top:4px solid var(--cl-blue);border-radius:var(--cl-radius);padding:14px 14px 16px;text-decoration:none!important;color:var(--cl-ink);transition:transform .15s,box-shadow .15s}
.cl-pillar:nth-child(5n+1){border-top-color:var(--cl-sun)}
.cl-pillar:nth-child(5n+2){border-top-color:var(--cl-coral)}
.cl-pillar:nth-child(5n+3){border-top-color:var(--cl-leaf)}
.cl-pillar:hover,.cl-pillar:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,44,90,.12)}
.cl-pillar-icon{display:inline-flex;width:52px;height:52px;border-radius:12px;background:var(--cl-sky);align-items:center;justify-content:center}
.cl-pillar-icon svg{width:34px;height:34px;fill:none;stroke:var(--cl-blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cl-pillar-name{font-weight:800;font-size:15px;line-height:1.4}
.cl-pillar-desc{font-size:12px;line-height:1.65;color:var(--cl-muted)}
.cl-lists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cl-hub .cl-list h2.cl-hub-h{font-size:17px;margin-top:26px}
.cl-rank,.cl-guide{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--cl-line);border-radius:var(--cl-radius)}
.cl-guide{background:var(--cl-sky);border-color:#D3E1FA}
.cl-rank{counter-reset:r}
.cl-rank li,.cl-guide li{position:relative;padding:10px 10px 10px 46px;border-bottom:1px solid var(--cl-line);font-size:14px;line-height:1.55}
.cl-guide li{border-bottom-color:#D3E1FA}
.cl-rank li:last-child,.cl-guide li:last-child{border-bottom:0}
.cl-rank li{counter-increment:r}
.cl-rank li::before{content:counter(r);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:6px;background:var(--cl-ink);color:#fff;font-weight:800;font-size:13px;text-align:center;line-height:26px}
.cl-rank li:nth-child(-n+3)::before{background:var(--cl-sun);color:var(--cl-ink)}
.cl-guide li::before{content:"";position:absolute;left:18px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:2px;background:var(--cl-leaf)}
.cl-rank a,.cl-guide a{color:var(--cl-text);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cl-rank a:hover,.cl-guide a:hover,.cl-rank a:focus-visible,.cl-guide a:focus-visible{color:var(--cl-blue-d);text-decoration:underline}
/* 一覧の見出し（トップの新着。Cocoon の既定の線を置き換える） */
.list-title{color:var(--cl-ink)}
.list-title .list-title-in::before,.list-title .list-title-in::after{background:var(--cl-blue)!important;border-color:var(--cl-blue)!important}
.list-more-button{border:2px solid var(--cl-blue)!important;color:var(--cl-blue)!important;border-radius:999px!important;font-weight:700;background:#fff}
.list-more-button:hover{background:var(--cl-blue)!important;color:#fff!important}
/* 記事一覧：格子に固定し、自動広告の挿入枠で並びが崩れないようにする（広告の数・位置は変えない。dense は使わない） */
.list.ect-vertical-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.list.ect-vertical-card>.entry-card-wrap{width:auto;max-width:none;margin:0}
.list.ect-vertical-card>.google-auto-placed,.list.ect-vertical-card>ins.adsbygoogle{grid-column:1/-1;width:100%}
.list.ect-vertical-card>ins.adsbygoogle[data-ad-status="unfilled"],.list.ect-vertical-card>.google-auto-placed>ins[data-ad-status="unfilled"]{display:none!important}
.archive-title,.archive-title.entry-title{position:relative;text-align:left;background:#fff!important;color:var(--cl-ink)!important;border:1px solid var(--cl-line)!important;border-left:6px solid var(--cl-blue)!important;border-radius:var(--cl-radius);padding:.6em 1em;font-size:1.4em}
/* 記事カード */
.entry-card-wrap{background:#fff;border:1px solid var(--cl-line);border-radius:var(--cl-radius);overflow:hidden;box-shadow:0 1px 3px rgba(42,44,90,.06);transition:transform .15s,box-shadow .15s}
.entry-card-wrap:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,44,90,.12)}
.entry-card-title{font-weight:700;color:var(--cl-text);line-height:1.5}
.entry-card-snippet,.entry-card-meta,.post-date,.post-update{color:var(--cl-muted)}
.cat-label{background:var(--cl-blue)!important;color:#fff!important;border:0!important;border-radius:6px;font-weight:700;padding:2px 9px}
/* 記事の見出し・目次（本文の直下の子だけ。A8 CTA や本文内のボックスに効かせない） */
.article h1.entry-title{text-align:left;color:var(--cl-ink);line-height:1.5}
.single .article .entry-content>h2{position:relative;text-align:left;background:none!important;color:var(--cl-ink)!important;border:0!important;border-bottom:2px solid var(--cl-line)!important;border-radius:0;padding:.45em .4em .5em 1.7em;font-size:1.3em;font-weight:800}
.single .article .entry-content>h2::before{content:"";position:absolute;left:.15em;top:.62em;width:.7em;height:1.05em;border-radius:2px;background:linear-gradient(var(--cl-sun) 0 33%,var(--cl-coral) 33% 66%,var(--cl-blue) 66% 100%)}
.single .article .entry-content>h2::after{content:"";position:absolute;left:0;bottom:-2px;width:5em;height:2px;background:var(--cl-blue)}
.single .article .entry-content>h3{position:relative;background:none!important;color:var(--cl-ink)!important;border:0!important;padding:.25em .2em .25em .9em}
.single .article .entry-content>h3::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:5px;border-radius:3px;background:var(--cl-blue)}
.entry-content>.toc{background:var(--cl-sky);border:0;border-radius:var(--cl-radius);padding:1em 1.4em}
.entry-content>.toc .toc-title{color:var(--cl-ink);font-weight:800}
.pr-label{border-color:var(--cl-ink)!important;color:var(--cl-ink)!important;background:#fff}
.pr-label-s{background:var(--cl-sun)!important;color:var(--cl-ink)!important}
/* サイドバー・フッター */
.sidebar h2,.sidebar h3{position:relative;background:none!important;color:var(--cl-ink)!important;border:0!important;border-bottom:2px solid var(--cl-line)!important;padding:.2em .2em .35em 1.2em;font-weight:800}
.sidebar h2::before,.sidebar h3::before{content:"";position:absolute;left:0;top:.45em;width:.65em;height:.65em;border-radius:2px;background:var(--cl-sun);box-shadow:0 .75em 0 -.05em var(--cl-blue)}
.footer{background:var(--cl-ink);border-top:6px solid transparent;border-image:var(--cl-blocks) 1}
.footer,.footer a,.footer .copyright,.footer .site-name-text{color:#E6E8F5}
.navi-footer-in a:hover{color:var(--cl-sun)}
/* 濃い色のフッターでロゴが読めるよう、白い角丸の台を敷く（beauty の罠） */
.logo-footer img{background:#fff;border-radius:10px;padding:8px 12px;height:52px;width:auto;box-sizing:content-box}
/* フォーカスの見える化（outline を消さない。暗い面では黄） */
.cl-hub a:focus-visible,#navi a:focus-visible,.entry-card-wrap:focus-visible,.widget-content-top button:focus-visible{outline:3px solid var(--cl-blue);outline-offset:2px}
.footer a:focus-visible{outline:3px solid var(--cl-sun);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cl-pillar,.entry-card-wrap{transition:none}.cl-pillar:hover,.entry-card-wrap:hover{transform:none}}
/* レスポンシブ */
@media screen and (max-width:1023px){.cl-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:834px){
 .logo-header img{height:40px}
 .list.ect-vertical-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cl-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cl-hero{display:block;background-image:url(https://child.realine.me/wp-content/uploads/2026/10/child-hero-sp.jpg);background-position:right bottom;background-size:contain;min-height:0;padding-bottom:132px}
 .cl-hero-inner{margin:0;padding:22px 20px 0;max-width:none;background:none;box-shadow:none}
 .cl-hero-title{font-size:22px}
 .cl-hero-lead{font-size:13px}
 .cl-lists{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:480px){.cl-pillar{padding:12px}}
/* ===== チャイルドLINE design (END) ===== */