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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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) ===== */
/* 色は仕様書（デザイン仕様書_20261008.md）の値。変えるときは :root だけを直す */
:root{--bl-plum:#3D2335;--bl-plum2:#5A3550;--bl-rose:#A8466A;--bl-rose-l:#E9CDD7;--bl-blush:#F8EEF2;--bl-ivory:#FBF8F6;--bl-champ:#E8D3B0;--bl-text:#2B2228;--bl-muted:#66545F;--bl-foot:#F3E7EC}
body{background:var(--bl-ivory);color:var(--bl-text)}
a{color:var(--bl-rose)}
/* ヘッダー：上端の細いグラデーション線・ロゴ・タグライン */
#header-container{background:#fff;border-bottom:1px solid var(--bl-rose-l)}
#header-container::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--bl-plum),var(--bl-rose) 55%,var(--bl-champ))}
.header{background:#fff}
.tagline{color:var(--bl-muted);font-size:13px;letter-spacing:.08em;border:0!important;padding-top:10px}
.logo-header img{max-height:56px;width:264px;max-width:100%;height:auto;aspect-ratio:264/56}
/* グローバルナビ（PC） */
#navi,#navi .navi-in{background:#fff}
#navi .navi-in>ul{justify-content:center}
#navi .navi-in>ul>li>a{color:var(--bl-plum);font-weight:600;font-size:15px;letter-spacing:.06em;position:relative}
#navi .navi-in>ul>li>a::after{content:"";position:absolute;left:50%;right:50%;bottom:6px;height:2px;background:var(--bl-rose);transition:left .2s,right .2s}
#navi .navi-in>ul>li>a:hover,#navi .navi-in>ul>li>a:focus-visible{background:var(--bl-blush);color:var(--bl-plum)}
#navi .navi-in>ul>li>a:hover::after,#navi .navi-in>ul>li>a:focus-visible::after{left:22%;right:22%}
/* モバイルのヘッダーメニュー・スライドメニュー */
.navi-menu-content a,.menu-drawer a{color:var(--bl-plum)}
/* 検索・カテゴリ選択（全ページ上部のウィジェット）：1行にまとめて小さく */
.widget-content-top{margin-bottom:14px}
.widget-content-top .wp-block-search__label,.widget-content-top .widget-content-top-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.widget-content-top .wp-block-search__inside-wrapper{border:1px solid var(--bl-muted);border-radius:999px;background:#fff;overflow:hidden;padding:0}
.widget-content-top .wp-block-search__inside-wrapper:focus-within{outline:3px solid var(--bl-rose);outline-offset:2px}
.widget-content-top .wp-block-search__input{border:0;padding:10px 18px;background:#fff}
.widget-content-top .wp-block-search__input:focus-visible,.widget-content-top .wp-block-search__button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--bl-rose)}
.widget-content-top .wp-block-search__button{background:var(--bl-plum);color:#fff;border:0;margin:0;padding:0 22px;border-radius:0 999px 999px 0;font-weight:600}
.widget-content-top select{border:1px solid var(--bl-muted);border-radius:999px;padding:8px 16px;background:#fff;color:var(--bl-text)}
.widget-content-top select:focus-visible{outline:3px solid var(--bl-rose);outline-offset:2px}
@media screen and (min-width:835px){
 #content-top-in{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:center}
 #content-top-in .widget-content-top{margin-bottom:0}
}
/* トップのハブ（トップの1ページ目だけ。functions.php でも他ページには出さない） */
body:not(.home) .bl-hub,body.paged .bl-hub{display:none}
.bl-hero{position:relative;border-radius:18px;overflow:hidden;background:var(--bl-ivory);margin:0 0 30px;border:1px solid var(--bl-rose-l)}
.bl-hero-img{display:block;width:100%;height:auto;aspect-ratio:1600/560}
.bl-hero-inner{position:absolute;inset:0 auto 0 0;width:50%;display:flex;flex-direction:column;justify-content:center;padding:28px 40px}
.bl-hero-kicker{display:inline-block;align-self:flex-start;color:var(--bl-rose);font-weight:700;font-size:13px;letter-spacing:.14em;margin:0 0 10px;padding-bottom:4px;border-bottom:1px solid var(--bl-champ)}
.bl-hero-title{color:var(--bl-plum);font-size:28px;font-weight:700;line-height:1.5;margin:0 0 12px;letter-spacing:.04em}
.bl-hero-lead{color:var(--bl-muted);font-size:14px;line-height:1.9;margin:0}
.bl-hub h2.bl-hub-h{font-size:20px;font-weight:700;color:var(--bl-plum);background:none;border:0;border-radius:0;padding:0 0 0 2px;margin:34px 0 14px;letter-spacing:.06em;display:flex;align-items:center;gap:12px}
.bl-hub h2.bl-hub-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bl-rose-l),transparent)}
.bl-hub h2.bl-hub-h::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--bl-rose);flex:none}
.bl-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bl-pillar{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:#fff;border:1px solid var(--bl-rose-l);border-radius:16px;padding:16px 16px;text-decoration:none!important;color:var(--bl-text);transition:box-shadow .2s,border-color .2s}
.bl-pillar:hover,.bl-pillar:focus-visible{border-color:var(--bl-rose);box-shadow:0 10px 24px rgba(61,35,53,.10)}
.bl-pillar:focus-visible{outline:3px solid var(--bl-rose);outline-offset:2px}
.bl-pillar-icon{grid-row:1/3;width:52px;height:52px;border-radius:50%;background:var(--bl-blush);display:flex;align-items:center;justify-content:center}
.bl-pillar-icon svg{width:30px;height:30px;fill:none;stroke:var(--bl-rose);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.bl-pillar-name{font-weight:700;font-size:16px;color:var(--bl-plum);line-height:1.4}
.bl-pillar-desc{font-size:12.5px;line-height:1.6;color:var(--bl-muted)}
.bl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bl-chips li{margin:0}
.bl-chips a{display:inline-block;padding:7px 16px;border:1px solid var(--bl-rose);border-radius:999px;background:#fff;color:var(--bl-rose);font-size:14px;text-decoration:none;line-height:1.4}
.bl-chips a:hover,.bl-chips a:focus-visible{background:var(--bl-rose);color:#fff}
.bl-rank{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;background:#fff;border:1px solid var(--bl-rose-l);border-radius:16px;padding:8px 18px}
.bl-rank li{counter-increment:r;position:relative;padding:12px 4px 12px 44px;border-bottom:1px solid var(--bl-blush);font-size:14.5px;line-height:1.55;margin:0}
.bl-rank li::before{content:counter(r);position:absolute;left:2px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--bl-plum);color:#fff;font-weight:700;font-size:13px;text-align:center;line-height:28px}
.bl-rank li:nth-child(-n+3)::before{background:var(--bl-rose)}
.bl-rank a{color:var(--bl-text);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-rank a:hover,.bl-rank a:focus-visible{color:var(--bl-rose);text-decoration:underline}
/* 記事一覧：格子状に固定し、自動広告の挿入で並びが崩れないようにする（広告の数・位置は変えない） */
#list.ect-vertical-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;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,#list.ect-vertical-card>.ad-area{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:#fff!important;color:var(--bl-plum)!important;border:1px solid var(--bl-rose-l)!important;border-left:6px solid var(--bl-rose)!important;border-radius:12px;padding:.75em 1em;font-size:1.4em;letter-spacing:.04em}
/* 記事カード */
.entry-card-wrap{background:#fff;border:1px solid var(--bl-rose-l);border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.entry-card-wrap:hover,.entry-card-wrap:focus-visible{border-color:var(--bl-rose);box-shadow:0 10px 24px rgba(61,35,53,.10)}
.entry-card-title{font-weight:700;color:var(--bl-plum);line-height:1.55}
.entry-card-snippet{color:var(--bl-muted)}
.cat-label{background:var(--bl-rose)!important;color:#fff!important;border:0!important;border-radius:999px;padding:2px 10px!important;font-weight:600;top:8px!important;left:8px!important}
.pagination .page-numbers{border-color:var(--bl-rose-l);color:var(--bl-plum);border-radius:999px}
.pagination .page-numbers.current{background:var(--bl-plum);color:#fff;border-color:var(--bl-plum)}
.pagination-next-link{border:1px solid var(--bl-rose);color:var(--bl-rose);border-radius:999px;background:#fff}
.pagination-next-link:hover{background:var(--bl-rose);color:#fff}
/* 記事：タイトル・見出し・目次・PR表記 */
.article h1.entry-title{color:var(--bl-plum);letter-spacing:.03em;line-height:1.55;border-bottom:1px solid var(--bl-rose-l);padding-bottom:.55em}
.article .entry-content h2{background:var(--bl-blush)!important;color:var(--bl-plum)!important;border:0!important;border-left:5px solid var(--bl-rose)!important;border-radius:0 12px 12px 0;padding:.7em 1em;font-size:1.25em;letter-spacing:.03em}
.article .entry-content h3{background:none!important;color:var(--bl-plum)!important;border:0!important;border-bottom:2px solid var(--bl-rose-l)!important;padding:.3em .1em .35em;position:relative}
.article .entry-content h3::after{content:"";position:absolute;left:0;bottom:-2px;width:3.5em;height:2px;background:var(--bl-rose)}
.toc{background:#fff;border:1px solid var(--bl-rose-l)!important;border-top:4px solid var(--bl-rose)!important;border-radius:14px}
.toc-title{color:var(--bl-plum);font-weight:700;letter-spacing:.08em}
.toc a{color:var(--bl-text)}
.pr-label{border:1px solid var(--bl-muted)!important;color:var(--bl-muted)!important;background:#fff!important;border-radius:999px;padding:1px 10px}
.breadcrumb a,.breadcrumb{color:var(--bl-muted)}
.related-entry-heading,.comment-title{color:var(--bl-plum)}
.entry-content img{max-width:100%;height:auto}
/* フッター */
.footer{background:var(--bl-plum);color:var(--bl-foot);border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--bl-plum),var(--bl-rose) 55%,var(--bl-champ)) 1}
.footer a,.footer .copyright,.footer .site-name-text{color:var(--bl-foot)}
.logo-footer img{background:#fff;border-radius:10px;padding:6px 12px;box-sizing:content-box}
.navi-footer-in>.menu-footer li{border-color:rgba(243,231,236,.35)!important}
.navi-footer-in a:hover,.navi-footer-in a:focus-visible{color:#fff;text-decoration:underline}
.footer a:focus-visible{outline:2px solid var(--bl-champ);outline-offset:2px}
/* レスポンシブ */
@media screen and (max-width:1023px){
 .bl-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bl-hero-inner{width:58%}
}
@media screen and (max-width:834px){
 #list.ect-vertical-card{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 /* スマホのヘッダーメニュー：1行の横スクロールにまとめ、本文を押し下げない */
 /* Cocoon はPC用（.menu-pc）とスマホ用（.menu-mobile）の2つを出すので、表示はテーマに任せ、スマホ用だけ並べ方を変える */
 #navi .navi-in>ul.menu-mobile{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 #navi .navi-in>ul.menu-mobile>li{flex:0 0 auto;width:auto!important}
 #navi .navi-in>ul.menu-mobile>li>a{padding:0 14px;font-size:14px;min-height:44px;display:flex;align-items:center}
 .bl-hero{border-radius:14px}
 .bl-hero-inner{position:static;width:auto;padding:18px 18px 20px}
 .bl-hero-title{font-size:21px}
 .bl-hero-lead{font-size:13.5px}
 .bl-rank{grid-template-columns:1fr;padding:4px 12px}
 .bl-hub h2.bl-hub-h{font-size:18px;margin-top:28px}
}
@media screen and (max-width:480px){
 #list.ect-vertical-card.sp-entry-card-1-column{grid-template-columns:1fr}
 .bl-pillars{grid-template-columns:1fr;gap:10px}
 .bl-pillar{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){.bl-pillar,.entry-card-wrap,#navi .navi-in>ul>li>a::after{transition:none}}
/* ===== ビューティLINE design (END) ===== */
/* 記事の CLS 対策：自動広告が入る高さを先に確保（html.rl-adr は functions.php が付け外し。広告が入ると :has で外れる） */
@media(max-width:767px){html.rl-adr body.single .article-header:not(:has(>.google-auto-placed))>.date-tags{margin-top:calc(100vw + 20px)}}
@media(min-width:768px){html.rl-adr body.single .article-header:not(:has(>.google-auto-placed))>.date-tags{margin-top:306px}}