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

/************************************
** HOSHIMIYA カラー Phase 1（ボタン・見出しアクセント・リンク・目次）
** 戻す場合は、この区間（PHASE1 START〜END）を削除
************************************/
/* PHASE1 START */
:root{
  --hg-bg:#FAF8F4;
  --hg-text:#3F3A36;
  --hg-main:#A58C73;
  --hg-main-dark:#7A6650;
  --hg-beige:#EFE6D8;
  --hg-sage:#DCE5DA;
  --hg-terra:#E7D2CA;
}

/* 見出しアクセント */
html body .article h2,
html body .article h3,
html body .article h4,
html body .article h5,
html body .article h6{color:var(--hg-main-dark)}
html body .article h2{border-top-color:var(--hg-main);border-bottom-color:var(--hg-main)}
html body .article h3{border-bottom-color:var(--hg-main)}
html body .article h4{border-left-color:var(--hg-main)}
html body .article h5,
html body .article h6{border-bottom-color:var(--hg-main)}

/* 目次 */
html body .toc{border-color:var(--hg-main)}
html body .toc .toc-title,
html body .toc .toc-content{color:var(--hg-main-dark)}
html body .toc a{color:var(--hg-text)}
html body .toc a:hover{color:var(--hg-main-dark)}

/* 記事内リンク（class付きのボタン・ブログカード・図鑑は対象外） */
html body .entry-content p a:not([class]),
html body .entry-content li a:not([class]),
html body .entry-content td a:not([class]){
  color:var(--hg-main-dark);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--hg-main);
}
html body .entry-content p a:not([class]):hover,
html body .entry-content li a:not([class]):hover,
html body .entry-content td a:not([class]):hover{color:var(--hg-text);text-decoration-color:var(--hg-main-dark)}

/* ボタン（Cocoon標準・送信・ページ送り・コメント）。Amazon/楽天ボタンは対象外 */
html body .btn-key-color,
html body .btn-wrap.btn-wrap-key-color>a,
html body input[type='submit']{
  background-color:var(--hg-main-dark);
  color:#fff;
  border-color:var(--hg-main-dark);
}
html body .btn-key-color:hover,
html body .btn-wrap.btn-wrap-key-color>a:hover,
html body input[type='submit']:hover{background-color:var(--hg-main);color:#fff}
html body .pagination-next-link,
html body .comment-btn{background:#fff;border-color:var(--hg-main);color:var(--hg-main-dark)}
html body .pagination-next-link:hover,
html body .comment-btn:hover{background:var(--hg-main-dark);border-color:var(--hg-main-dark);color:#fff}
/* PHASE1 END */

/* PHASE2 START */
:root{--hg-marker:#EADCC6;--hg-point-bg:#F3ECE0;--hg-good-bg:#DCE5DA;--hg-check-bg:#E7D2CA}

/* マーカーはベージュ1色に統一（黄・ピンク・青） */
html body .marker,
html body .marker-red,
html body .marker-blue{background:var(--hg-marker)}
html body .marker-under,
html body .marker-under-red,
html body .marker-under-blue{background:linear-gradient(transparent 60%,var(--hg-marker) 60%)}

/* Cocoonの水色パレットをベージュ系へ差し替え（既存のボックス・表に自動反映） */
html:root{--cocoon-watery-blue-color:var(--hg-point-bg);--cocoon-light-blue-color:var(--hg-main)}
html body .has-key-color-border-color{border-color:var(--hg-main-dark)}

/* 旧スキンの水色ボックス */
html body .box1,html body .box5,html body .box6,
html body .list-box-1,html body .list-box-2,html body .list-box-3,html body .list-box-4{background:var(--hg-point-bg)}
html body .box2,html body .box3,html body .box4,html body .box5{border-color:var(--hg-main)}
html body .box1 .box-title,html body .box2 .box-title,html body .box5 .box-title{background:var(--hg-main-dark)}
html body .box3 .box-title,html body .box4 .box-title,html body .box6 .box-title{color:var(--hg-main-dark)}
html body .list-1 li:before,html body .list-2 li:before{background-color:var(--hg-main)}

/* 表見出し（薄ピンク→薄ベージュ） */
html body .entry-content table th{background:var(--hg-point-bg)}

/* 記事内ボックス：POINT（ベージュ）/ GOOD（セージ）/ CHECK（テラコッタ）
   使い方：段落やグループブロックの「追加CSSクラス」に hg-point / hg-good / hg-check を指定 */
.hg-point,.hg-good,.hg-check{
  position:relative;margin:1.6em 0;padding:1em 1.2em;
  border-left:4px solid;border-radius:4px;color:var(--hg-text);line-height:1.8}
.hg-point::before,.hg-good::before,.hg-check::before{
  display:block;margin-bottom:.35em;font-size:.75em;font-weight:700;letter-spacing:.14em}
.hg-point{background:var(--hg-point-bg);border-left-color:var(--hg-main)}
.hg-point::before{content:"POINT";color:var(--hg-main-dark)}
.hg-good{background:var(--hg-good-bg);border-left-color:#8FA58B}
.hg-good::before{content:"GOOD";color:#4A6347}
.hg-check{background:var(--hg-check-bg);border-left-color:#C49A8A}
.hg-check::before{content:"CHECK";color:#8A4B45}
.hg-point>:last-child,.hg-good>:last-child,.hg-check>:last-child{margin-bottom:0}
.hg-point ul,.hg-good ul,.hg-check ul{margin:0;padding-left:1.2em}
/* Cocoonの「水色」ボックス各種（スキン側の強い指定を上書き） */
html body.body .has-light-blue-border-color{border-color:var(--hg-main)}
html body.body .has-light-blue-border-color .box-label,
html body.body .has-light-blue-border-color .bb-label,
html body.body .has-light-blue-border-color .faq-question,
html body.body .has-light-blue-border-color .tab-caption-box-label{background-color:var(--hg-main-dark)}
html body.body .has-light-blue-border-color .box-content,
html body.body .has-light-blue-border-color .tab-caption-box-content{border-color:var(--hg-main)}
html body.body .has-watery-blue-background-color{background-color:var(--hg-point-bg)}
html body.body .has-watery-blue-background-color .box-content,
html body.body .has-watery-blue-background-color .tab-caption-box-content{background-color:var(--hg-point-bg)}
html body.body .has-light-blue-background-color .box-content{background-color:var(--hg-main)}
html body.body .has-light-blue-color{color:var(--hg-main-dark)}
/* PHASE2 END */

/* PHASE3 START */
/* Phase 3：背景・ヘッダー・ナビ・サイドバー・フッター・スマホメニュー・タグ・ページ送り
   ナビ/フッター等の白文字は、コントラスト確保のため濃茶 --hg-main-dark を使用 */
html body.body{background-color:var(--hg-bg);color:var(--hg-text)}
html body.body .content,
html body.body #main,
html body.body #sidebar,
html body.body .header-container{background-color:var(--hg-bg)}

/* ヘッダー・ナビ */
html body.body #header .logo a{color:var(--hg-main-dark)}
html body.body #header-container .navi,
html body.body #header-container .navi-in>ul .sub-menu,
html body.body #header-container.fixed-header,
html body.body .header-container.fixed-header,
html body.body .hlt-top-menu-wrap .header-container{background:var(--hg-main-dark)}
html body.body #header-container .navi a:hover{color:var(--hg-main-dark);background-color:var(--hg-beige)}
html body.body .notice-area{background:var(--hg-beige);color:var(--hg-main-dark)}

/* 記事カード・関連記事 */
html body.body .entry-card-title,
html body.body .related-entry-card-title,
html body.body .widget-entry-cards .widget-entry-card-content,
html body.body .related-entry-heading,
html body.body #comments,
html body.body #reply-title{color:var(--hg-text)}
html body.body .entry-card-snippet,
html body.body .related-entry-card-snippet,
html body.body .e-card-info>span,
html body.body .date-tags{color:#8A817A}
html body.body .related-entry-heading:before,
html body.body #comments:before{color:var(--hg-main)}
html body.body .sns-share-message,
html body.body .sns-follow-message,
html body.body .cta-box{color:var(--hg-text)}
html body.body #archive-title,
html body.body .nwa .author-box .author-name a{color:var(--hg-main-dark)}

/* カテゴリ・タグ・ページ送り */
html body.body .cat-label,
html body.body .cat-link{background:var(--hg-beige);color:var(--hg-main-dark)}
html body.body article .tag-link,
html body.body article .tag-link:hover{background:var(--hg-main-dark);color:#fff}
html body.body .page-numbers{color:var(--hg-main-dark)}
html body.body .pagination a:hover,
html body.body .pagination .current{background:var(--hg-beige);color:var(--hg-main-dark)}
html body.body #main .pagination-next-link,
html body.body #main .comment-btn{background:#fff;border-color:var(--hg-main);color:var(--hg-main-dark)}
html body.body #main .pagination-next-link:hover{background:var(--hg-main-dark);border-color:var(--hg-main-dark);color:#fff}

/* サイドバー */
html body.body .sidebar h2,
html body.body .sidebar h3{background:var(--hg-main-dark);color:#fff}
html body.body .sidebar .widget_recent_entries ul li a,
html body.body .sidebar .widget_categories ul li a,
html body.body .sidebar .widget_archive ul li a,
html body.body .sidebar .widget_pages ul li a,
html body.body .sidebar .widget_meta ul li a,
html body.body .sidebar .widget_nav_menu ul li a{color:var(--hg-text)}
html body.body .sidebar .widget_recent_entries ul li a:hover,
html body.body .sidebar .widget_categories ul li a:hover,
html body.body .sidebar .widget_archive ul li a:hover,
html body.body .sidebar .widget_pages ul li a:hover,
html body.body .sidebar .widget_meta ul li a:hover,
html body.body .sidebar .widget_nav_menu ul li a:hover{color:var(--hg-main-dark);background:none}
html body.body .sidebar .widget_recent_entries ul li a:before,
html body.body .sidebar .widget_categories ul li a:before,
html body.body .sidebar .widget_archive ul li a:before,
html body.body .sidebar .widget_pages ul li a:before,
html body.body .sidebar .widget_meta ul li a:before,
html body.body .sidebar .widget_nav_menu ul li a:before{color:var(--hg-main)}

/* フッター・ページトップ */
html body.body #footer{background:var(--hg-main-dark);color:#fff}
html body.body #footer .tagcloud a:hover{background:#fff;color:var(--hg-main-dark)}
html body.body .page-top a{background:var(--hg-beige);color:var(--hg-main-dark)}
html body.body .page-top a:hover{background:var(--hg-main);color:#fff}
html body.body .go-to-top-button{background:var(--hg-main-dark);color:#fff}

/* スマホメニュー */
html body.body .slicknav_btn,
html body.body .mobile-menu-buttons{background:var(--hg-main-dark);color:#fff}
html body.body .slicknav_nav a,
html body.body .menu-drawer a{color:var(--hg-main-dark)}
html body.body .menu-drawer a{border-bottom-color:var(--hg-main)}
html body.body .menu-close-button::before{color:var(--hg-main-dark)}

/* ブログカードのラベル（多色→メイン色に統一） */
html body.body .blogcard-label{background:var(--hg-main-dark)}
html body.body [class*="bct-"] .blogcard-label{background:var(--hg-main-dark)}
/* PHASE3 END */

/* PHASE4 START */
/* PICK UP 案内枠（図鑑への内部リンクCTA）。使うHTMLは .hg-pickup 〜 の構造 */
html body .hg-pickup{
  position:relative;margin:2em 0;padding:48px 32px 30px;
  border:1px solid var(--hg-main);border-radius:14px;
  background:rgba(165,140,115,.07);
  color:var(--hg-text);box-sizing:border-box;
}
html body .hg-pickup__tag{
  position:absolute;top:-1px;left:-1px;margin:0;padding:6px 20px 6px 18px;
  background:var(--hg-main-dark);color:#fff;
  font-size:12px;line-height:1.4;letter-spacing:.22em;font-weight:500;
  border-radius:14px 0 12px 0;
}
html body .hg-pickup__eyebrow{
  position:relative;margin:0 0 16px;padding-bottom:8px;
  font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--hg-main-dark);
}
html body .hg-pickup__eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:1px;background:var(--hg-main)}
html body .hg-pickup__title{
  text-wrap:balance;margin:0 0 8px;font-size:17px;line-height:1.6;font-weight:600;color:var(--hg-main-dark);
}
html body .hg-pickup__text{margin:0 0 18px;font-size:14px;line-height:1.9;color:var(--hg-text);word-break:auto-phrase}
html body .article .hg-pickup__btn,
html body .hg-pickup__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 32px;box-sizing:border-box;
  border-radius:999px;background:var(--hg-main-dark);color:#fff;
  font-size:15px;line-height:1.4;letter-spacing:.06em;text-decoration:none;
  transition:background-color .2s ease,transform .2s ease;
}
html body .article .hg-pickup__btn:hover,
html body .hg-pickup__btn:hover{background:#8B7560;color:#fff;transform:translateY(-1px);text-decoration:none}
html body .hg-pickup__btn:focus-visible{outline:2px solid var(--hg-main-dark);outline-offset:3px}
@media (max-width:600px){
  html body .hg-pickup{padding:46px 20px 22px;border-radius:12px}
  html body .hg-pickup__title{font-size:16px}
  html body .hg-pickup__text{font-size:13.5px}
  html body .hg-pickup__btn{display:flex;width:100%}
}
@media (prefers-reduced-motion:reduce){html body .hg-pickup__btn{transition:none}html body .hg-pickup__btn:hover{transform:none}}
/* PHASE4 END */