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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.logo,
.tagline {
  text-align: left;
}

/* ===== 比較表 ===== */
.hikaku-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.8em 0 .6em;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.07);
}
.hikaku{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:660px;
  background:#fff;
  font-size:.94em;
  line-height:1.7;
}

/* 見出し行 */
.hikaku thead th{
  background:#19448e;
  color:#fff;
  font-weight:600;
  text-align:left;
  padding:14px 12px;
  vertical-align:middle;
  letter-spacing:.02em;
}
.hikaku thead th:first-child{ width:22%; }

/* 本体 */
.hikaku tbody th,
.hikaku tbody td{
  padding:13px 12px;
  border-top:1px solid #e6e9f0;
  vertical-align:top;
  text-align:left;
}
.hikaku tbody tr:nth-child(even) td{ background:#f7f9fc; }

/* 左端の項目名 */
.hikaku tbody th{
  font-weight:600;
  color:#19448e;
  background:#f1f4fa;
  white-space:nowrap;
}
.hikaku tbody tr:nth-child(even) th{ background:#e9eef7; }

/* 角を丸く */
.hikaku thead th:first-child{ border-top-left-radius:10px; }
.hikaku thead th:last-child{ border-top-right-radius:10px; }
.hikaku tbody tr:last-child th{ border-bottom-left-radius:10px; }
.hikaku tbody tr:last-child td:last-child{ border-bottom-right-radius:10px; }

/* スクロールバー */
.hikaku-wrap::-webkit-scrollbar{ height:8px; }
.hikaku-wrap::-webkit-scrollbar-thumb{ background:#c5cfdf; border-radius:4px; }
.hikaku-wrap::-webkit-scrollbar-track{ background:#f0f2f6; border-radius:4px; }

/* 案内文 */
.hikaku-note{
  margin:0 0 1.8em;
  font-size:.82em;
  color:#8a92a3;
  text-align:right;
}

.hikaku-wrap.narrow .hikaku { min-width: 0; }

/* スマホ：項目名を左に貼り付けて、比べやすく */
@media screen and (max-width:834px){
  .hikaku{ min-width:620px; font-size:.87em; }
  .hikaku thead th,
  .hikaku tbody th,
  .hikaku tbody td{ padding:10px 9px; }
  .hikaku thead th:first-child,
  .hikaku tbody th{
    position:sticky;
    left:0;
    z-index:1;
    box-shadow:1px 0 0 #dfe4ee;
  }
  .hikaku thead th:first-child{ z-index:2; }
}
@media screen and (min-width:835px){
  .hikaku-note{ display:none; }
}





/* 金継ぎ 追補CSS — Cozy雑貨（cozyzakka.com） 2026-09-12
   本体は無改変。Cocoonの「追加CSS（独自CSS）」欄にこのまま貼れる形。
   方針: 既存の色に寄せる（新色は発明しない）／サイトのキーカラー #19448e を軸にそろえる。 */

/* ───────── ① 読めない色を床（コントラスト比4.5）まで上げる ───────── */

/* カテゴリの札・スマホの下メニュー: 水色 #0095D9（比3.33）→ サイトのキーカラー紺 #19448e（比9.3） */
.cat-label,
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button,
.navi-menu-button,
#navi-menu-open,
#sidebar-menu-open,
#search-menu-open,
#home-menu-button,
#top-menu-button,
.mobile-menu-buttons .menu-button-in,
.mobile-footer-menu-buttons a,
.mobile-menu-buttons a { background-color: #19448e !important; }
.mobile-menu-buttons .menu-button,
.mobile-menu-buttons a { color: #ffffff !important; }

/* 買い物リンクのボタン: 淡すぎて白抜き文字が読めない（比2.28〜2.95）→ 同じ色相のまま濃くする */
.easyLink-info-btn-amazon,
a.easyLink-info-btn-amazon { background-color: #b45f10 !important; }
.easyLink-info-btn-rakuten,
a.easyLink-info-btn-rakuten { background-color: #b8332b !important; }
.easyLink-info-btn-yahoo,
a.easyLink-info-btn-yahoo { background-color: #19448e !important; }
.easyLink-info-btn-amazon,
.easyLink-info-btn-rakuten,
.easyLink-info-btn-yahoo { color: #ffffff !important; }

/* シェアボタンのLINE緑: 白抜き文字が比2.38 → 同色相で濃くする */
.line-button, a.line-button,
.bc-brand-color.line-button,
.sns-buttons a.line-button { background-color: #007a2f !important; border-color: #007a2f !important; }

/* 補助文字のグレー: #999999 / #8A92A3（比2.85 / 3.12）→ 1色の #6b7280（比4.9）へ */
.breadcrumb .breadcrumb-caption,
.breadcrumb,
.breadcrumb a,
.hikaku-note,
p.hikaku-note { color: #6b7280 !important; }


/* ───────── ② 文字の大きさを役割ごとにそろえる（12 / 14 / 16 / 18 / 22） ───────── */

/* 小さすぎる札・日付を12pxの床へ（役割「その他・ボタン」の一番下の段） */
.cat-label, .cat-link, span.cat-label,
.entry-date, .post-date, time.entry-date, span.entry-date,
.breadcrumb, .breadcrumb-caption, span.breadcrumb-caption,
.menu-caption, .home-menu-caption, .search-menu-caption,
.top-menu-caption, .sidebar-menu-caption, .navi-menu-caption { font-size: 12px !important; }

/* 小さな文字（ボタン・カードの説明・注記） */
.button-caption, span.button-caption,
.related-entry-card-snippet, .popular-entry-card-snippet,
.next-post-title, .prev-post-title,
.wp-block-search__button, button.wp-block-search__button,
.list-item-caption, span.list-item-caption,
#comment-reply-btn,
.tagline, #header-in .tagline,
.pr-label, div.pr-label,
.sns-share-message, .sns-follow-message,
.author-name, span.author-name,
.post-count, span.post-count { font-size: 14px !important; }
/* 買い物リンクのボタンは12pxのまま（14pxにすると「Yahoo!ショッピングで見る」が2行に折れる） */
.easyLink-info-btn-amazon, .easyLink-info-btn-rakuten, .easyLink-info-btn-yahoo { font-size: 12px !important; }

/* 見出しまわり */
.entry-content h3, #toc3, .entry-content h3 span { font-size: 22px !important; }
.related-entry-card-title, .popular-entry-card-title,
.widget-sidebar-title, .widget-entry-cards .card-title,
h3.related-entry-card-title, h3.widget-sidebar-title { font-size: 18px !important; }
.toc-title, #toc > label.toc-title, label.toc-title,
.wp-block-search__label, label.wp-block-search__label { font-size: 16px !important; }

/* 本文の段（12 / 16 / 18） */
.easyLink-info-maker, p.easyLink-info-maker { font-size: 12px !important; }
.easyLink-info-name, .easyLink-info-name a,
.toc-list a, .toc-list > li > a, ol.toc-list > li > a,
.entry-content table th, .entry-content table td,
.hikaku th, .hikaku td, table.hikaku th, table.hikaku td,
.hikaku-note, p.hikaku-note { font-size: 16px !important; }
.entry-content p { font-size: 18px !important; }

@media (max-width: 1023px) {
  .easyLink-info-name, .easyLink-info-name a,
  .toc-list a, .toc-list > li > a, ol.toc-list > li > a,
  .entry-content table th, .entry-content table td,
  .hikaku th, .hikaku td, table.hikaku th, table.hikaku td,
  .hikaku-note, p.hikaku-note { font-size: 14px !important; }
}

/* ───────── ③ 似た色をまとめる（表の地・罫線が5種類→2種類） ───────── */
/* 見出し行の紺 #19448e はサイトのキーカラー＝役割色なので残す */
.hikaku tbody th,
.hikaku tbody tr:nth-child(even) th,
.entry-content table:not(.hikaku) th { background-color: #e9eef7 !important; }
.hikaku tbody th, .hikaku tbody td { border-top-color: #e9eef7 !important; }
#comment-reply-btn { background-color: #f7f9fc !important; border-color: #e9eef7 !important; }
.entry-content blockquote { border-color: #e9eef7 !important; }
.wp-block-search__button, button.wp-block-search__button { background-color: #333333 !important; color: #ffffff !important; }

/* ───────── ④ 角丸を役割で3種類に（札とボタン=4px／面=8px／表=10px） ───────── */
/* 一律1種類にすると「型紙っぽさ」が出るので、役割で分ける */
.cat-label, .pr-label, .post-count, .btn, .button-block,
.easyLink-info-btn-amazon, .easyLink-info-btn-rakuten, .easyLink-info-btn-yahoo,
.wp-block-search__button, #comment-reply-btn, .sns-buttons a,
.entry-content h2, .entry-content h3,
.cat-link, a.cat-link, .widget-sidebar-title, h3.widget-sidebar-title,
.go-to-top-button, button.go-to-top-button { border-radius: 4px !important; }
.entry-card, .related-entry-card, .popular-entry-card, .widget-entry-card,
.easyLink-box, .entry-content blockquote, .card-thumb img { border-radius: 8px !important; }
.hikaku-wrap, div.hikaku-wrap { border-radius: 10px !important; }

/* ───────── ⑤ そのほかの破れ ───────── */
/* 押しにくい検索ボタン（35×23）を両辺24px以上に */
.search-submit, button.search-submit, .search-box .search-submit { min-width: 44px !important; min-height: 32px !important; }
/* 場当たりのz-index 9999 → 層の上段100へ／引き出しメニューの中身が枠外へ出て後ろの文字に被るのを止める */
#sidebar-menu-content, #search-menu-content { z-index: 100 !important; max-height: 100vh !important; overflow-y: auto !important; }
#sidebar-menu-content .search-box, #sidebar-menu-content .search-edit { max-height: 100vh !important; }

/* ───────── ⑥ 言葉の泣き別れ（文節で折る） ───────── */
.entry-content p, .entry-content li, .entry-content td, .entry-content th,
.related-entry-card-title, .popular-entry-card-title,
.easyLink-info-name { word-break: auto-phrase; }

/* サイト名（頭と足元）は幅ごとに1値にそろえる */
.site-name-text, .footer .site-name-text, .logo-text { font-size: 28px !important; }
@media (max-width: 1023px) { .site-name-text, .footer .site-name-text, .logo-text { font-size: 22px !important; } }
@media (max-width: 480px) { .site-name-text, .footer .site-name-text, .logo-text { font-size: 18px !important; } }

/* ───────── ⑦ 記事下のプロフィールボックス（2026-09-12に設置） ───────── */
/* ウィジェットの見出しと本文が、文字の段を2つ増やしていたので既存の段へ寄せる */
.widget-single-content-bottom-title,
[id^="author_box"] > .widget-single-content-bottom-title { font-size: 14px !important; }
.author-description, .author-description p { font-size: 16px !important; }

.widget-single-content-bottom .btn { font-size: 14px !important; }
.navi-in .item-label, .ad-label { font-size: 14px !important; }

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

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

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