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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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\healthrealine\health_P1デザイン仕様書_S2施策案_20261008.md（色を変える時は :root と仕様書の表を合わせる） */
/* 画像の URL は完全な URL で書く（Cocoon の CSS 縮小化が url(/…) を壊すため） */
:root{--hl-lake:#1D4558;--hl-lake2:#2B5F78;--hl-water:#2F6F8A;--hl-water-d:#245A71;--hl-mist:#E6F0F3;--hl-mist2:#CFE2E8;--hl-linen:#F7F4EE;--hl-sand:#E4D6BD;--hl-clay:#8A5A3C;--hl-text:#22313A;--hl-muted:#56656D;--hl-line:#DDE6E9;--hl-radius:12px}
body{background:var(--hl-linen);color:var(--hl-text)}
a{color:var(--hl-water)}
a:hover{color:var(--hl-water-d)}
/* ヘッダー：上端の霧色の波線・ロゴ・タグライン・ナビ */
#header-container::before{content:"";display:block;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4' fill='none' stroke='%23CFE2E8' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0/40px 8px,var(--hl-linen)}
#header,#header-container{background:#fff}
.tagline{color:var(--hl-muted);font-size:12px;letter-spacing:.04em}
.logo-header img{height:52px;width:auto;max-height:none}
#navi,#navi .navi-in>ul{background:var(--hl-lake)}
#navi .navi-in>ul>li>a{color:#fff;font-weight:700;letter-spacing:.03em}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li>a:focus-visible{background:var(--hl-water);color:#fff}
/* スマホのヘッダーメニュー：折り返さず横にスクロール（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;max-width:none}
#navi .navi-in>.menu-mobile>li>a{padding:0 14px;white-space:nowrap}
/* 検索ボックス（全ページ上部のウィジェット） */
.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(--hl-muted);border-radius:999px;background:#fff;overflow:hidden;padding:0}
.widget-content-top .wp-block-search__input{border:0;padding:10px 18px;background:#fff}
.widget-content-top .wp-block-search__button{background:var(--hl-water);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(--hl-water-d)}
/* トップのハブ（1ページ目のトップだけ。他の一覧では子テーマが出力しない。念のため CSS でも隠す） */
body:not(.home) .hl-hub,body.paged .hl-hub{display:none}
.hl-hero{position:relative;border-radius:16px;overflow:hidden;background:var(--hl-linen) url(https://health.realine.me/wp-content/uploads/2026/10/health-hero.jpg) right center/auto 100% no-repeat;min-height:260px;margin:0 0 26px;border:1px solid var(--hl-line);display:flex;align-items:center}
/* 見出しの下に麻布色の面を敷き、絵の上でも文字のコントラストを保つ（湖色×麻布 9.36:1） */
.hl-hero-inner{margin:22px;padding:22px 24px;max-width:460px;background:rgba(247,244,238,.94);border-radius:12px}
.hl-hero-kicker{display:inline-block;background:var(--hl-mist);color:var(--hl-water-d);font-weight:700;font-size:13px;padding:4px 14px;border-radius:999px;margin:0 0 14px;letter-spacing:.06em}
.hl-hero-title{color:var(--hl-lake);font-size:26px;font-weight:800;line-height:1.45;margin:0 0 12px;letter-spacing:.02em}
.hl-hero-lead{color:var(--hl-text);font-size:14px;line-height:1.85;margin:0;max-width:400px}
.hl-hub h2.hl-hub-h{position:relative;font-size:20px;font-weight:800;color:var(--hl-lake);background:none;border:0;border-radius:0;padding:2px 0 2px 28px;margin:30px 0 14px}
.hl-hub h2.hl-hub-h::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-9px;border-radius:50%;border:2px solid var(--hl-water);box-shadow:0 0 0 4px var(--hl-mist)}
.hl-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hl-pillar{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;background:#fff;border:1px solid var(--hl-line);border-radius:var(--hl-radius);padding:14px;text-decoration:none!important;color:var(--hl-lake);transition:transform .15s,box-shadow .15s,border-color .15s}
.hl-pillar:hover,.hl-pillar:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(29,69,88,.12);border-color:var(--hl-water)}
.hl-pillar-icon{grid-row:1/3;display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--hl-mist);align-items:center;justify-content:center}
.hl-pillar-icon svg{width:32px;height:32px;fill:none;stroke:var(--hl-water);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hl-pillar-name{font-weight:800;font-size:15px;line-height:1.4}
.hl-pillar-desc{font-size:12px;line-height:1.6;color:var(--hl-muted)}
.hl-more{margin:12px 0 0;font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hl-more span{color:var(--hl-muted);font-weight:700}
.hl-more a{display:inline-block;padding:4px 12px;border:1px solid var(--hl-water);border-radius:999px;background:#fff;text-decoration:none}
.hl-more a:hover{background:var(--hl-mist)}
.hl-lists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.hl-hub .hl-list h2.hl-hub-h{font-size:17px;margin-top:26px}
.hl-rank,.hl-guide{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--hl-line);border-radius:var(--hl-radius)}
.hl-rank{counter-reset:r}
.hl-rank li,.hl-guide li{position:relative;padding:10px 10px 10px 46px;border-bottom:1px solid var(--hl-line);font-size:14px;line-height:1.55}
.hl-rank li:last-child,.hl-guide li:last-child{border-bottom:0}
.hl-rank li{counter-increment:r}
.hl-rank li::before{content:counter(r);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--hl-lake);color:#fff;font-weight:800;font-size:13px;text-align:center;line-height:26px}
.hl-rank li:nth-child(-n+3)::before{background:var(--hl-sand);color:var(--hl-lake)}
.hl-guide li::before{content:"";position:absolute;left:17px;top:50%;width:10px;height:10px;margin-top:-7px;border-radius:50%;border:2px solid var(--hl-water)}
.hl-rank a,.hl-guide a{color:var(--hl-text);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hl-rank a:hover,.hl-guide a:hover,.hl-rank a:focus-visible,.hl-guide a:focus-visible{color:var(--hl-water-d);text-decoration:underline}
/* 一覧の見出し・もっと見る */
.list-title{color:var(--hl-lake)}
.list-title .list-title-in::before,.list-title .list-title-in::after{background:var(--hl-mist2)!important;border-color:var(--hl-mist2)!important}
.list-more-button{border:2px solid var(--hl-water)!important;color:var(--hl-water)!important;border-radius:999px!important;font-weight:700;background:#fff}
.list-more-button:hover{background:var(--hl-water)!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>.google-auto-placed:has(ins[data-ad-status="unfilled"]),.list.ect-vertical-card>ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.archive-title,.archive-title.entry-title{text-align:left;background:var(--hl-lake)!important;color:#fff!important;border:0!important;border-radius:12px;padding:.7em 1em;font-size:1.4em}
/* 記事カード */
.entry-card-wrap{background:#fff;border:1px solid var(--hl-line);border-radius:var(--hl-radius);overflow:hidden;box-shadow:0 1px 3px rgba(29,69,88,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.entry-card-wrap:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(29,69,88,.12);border-color:var(--hl-water)}
.entry-card-title{font-weight:700;color:var(--hl-text);line-height:1.5}
.entry-card-snippet,.entry-card-meta,.post-date{color:var(--hl-muted)}
.cat-label{background:var(--hl-sand)!important;color:var(--hl-lake)!important;border:0!important;border-radius:999px;font-weight:700;padding:2px 10px}
/* 記事の見出し・目次（本文直下の要素だけに当てる） */
.article h1.entry-title,.entry-title{text-align:left;color:var(--hl-lake);line-height:1.5}
.single .article .entry-content>h2{position:relative;text-align:left;background:var(--hl-lake)!important;color:#fff!important;border:0!important;border-radius:10px;padding:.7em 1em .7em 2.2em;font-size:1.28em}
.single .article .entry-content>h2::before{content:"";position:absolute;left:.85em;top:50%;width:.55em;height:.55em;margin-top:-.38em;border-radius:50%;border:2px solid #fff;background:none}
.single .article .entry-content>h2::after{display:none}
.single .article .entry-content>h3{background:none!important;color:var(--hl-lake)!important;border:0!important;border-bottom:3px solid var(--hl-sand)!important;padding:.3em .1em}
.single .article .entry-content>h4{position:relative;background:none!important;border:0!important;padding:.1em .1em .1em 1em;color:var(--hl-lake)}
.single .article .entry-content>h4::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;background:var(--hl-water)}
.entry-content>.toc{background:#fff;border:1px solid var(--hl-line);border-top:6px solid var(--hl-mist2);border-radius:var(--hl-radius)}
.entry-content>.toc .toc-title{color:var(--hl-lake);font-weight:800}
.pr-label{border-color:var(--hl-clay)!important;color:var(--hl-clay)!important;background:var(--hl-linen)}
/* 固定ページの見出し（運営者情報など） */
.page .article .entry-content>h2{background:none!important;color:var(--hl-lake)!important;border:0!important;border-left:6px solid var(--hl-water)!important;border-radius:0;padding:.3em .6em}
.page .article .entry-content table th{background:var(--hl-mist);color:var(--hl-lake)}
/* サイドバー・フッター */
.sidebar h2,.sidebar h3{position:relative;background:none!important;color:var(--hl-lake)!important;border:0!important;padding:.2em .2em .2em 1.4em;font-weight:800}
.sidebar h2::before,.sidebar h3::before{content:"";position:absolute;left:0;top:50%;width:.6em;height:.6em;margin-top:-.4em;border-radius:50%;border:2px solid var(--hl-water)}
.footer{background:var(--hl-lake)}
.footer,.footer a,.footer .copyright,.footer .site-name-text{color:var(--hl-mist)}
.footer a:hover,.navi-footer-in a:hover{color:#fff}
/* フッターのロゴは濃い地で読めるよう白地の角丸に載せる（beauty の罠） */
.logo-footer img{background:#fff;border-radius:10px;padding:6px 10px;height:48px;width:auto}
/* スマホの下部ボタン（スキン解除後もテーマ既定の配色にならないよう明示） */
.mobile-menu-buttons{background:#fff;border-top:1px solid var(--hl-line)}
.mobile-menu-buttons .menu-button>a,.mobile-menu-buttons .menu-button .menu-button-in{color:var(--hl-lake)}
/* フォーカスの見える化（outline を消さない） */
.hl-hub a:focus-visible,.entry-card-wrap:focus-visible,.hl-more a:focus-visible{outline:3px solid var(--hl-water);outline-offset:2px}
#navi a:focus-visible,.footer a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.hl-pillar,.entry-card-wrap{transition:none}.hl-pillar:hover,.entry-card-wrap:hover{transform:none}}
/* レスポンシブ */
@media screen and (max-width:1023px){.hl-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:834px){
 .logo-header img{height:42px}
 .list.ect-vertical-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hl-hero{display:block;background-image:url(https://health.realine.me/wp-content/uploads/2026/10/health-hero-sp.jpg);background-position:right bottom;background-size:contain;min-height:0;padding-bottom:130px}
 .hl-hero-inner{margin:0;padding:22px 20px 0;max-width:none;background:none}
 .hl-hero-title{font-size:22px}
 .hl-hero-lead{font-size:13px}
 .hl-lists{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:600px){.hl-pillars{grid-template-columns:minmax(0,1fr);gap:8px}.hl-pillar{padding:12px}}
/* ===== ヘルスLINE design (END) ===== */