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











/* wdp-site-style:start (apply_site_style.ps1 が足したブロック。外すときは apply_site_style.ps1 -Revert) */
@media screen and (max-width: 1023px) {
  /* ヘッダーのメニュー(スマホ): 項目を縮めず、2段に折り返して全項目を見せる(横スクロールだと「水づくり・餌」「早見表」が画面の外に出ていた) */
  #navi .navi-in > .menu-mobile { flex-wrap: wrap; justify-content: center; overflow: visible; }
  #navi .navi-in > .menu-mobile > li { flex: 0 0 auto; width: auto; padding: 0 9px; }
}
@media screen and (min-width: 1024px) {
  /* ヘッダーのメニュー(PC): 項目の幅を内容に合わせる。テーマの既定(幅176px固定)だと、項目が6つになると2段に折り返し、1項目だけ2段目に残る */
  #navi .navi-in > .menu-pc > li { flex: 1 1 auto; width: auto; padding: 0 10px; }
}
/* 記事の画像の左上のカテゴリーのラベル: 長い名前を切らない */
.cat-label { max-width: 100%; }
/* カテゴリーページの先頭の案内: 小さく詰めて、記事の一覧が先に見えるようにする(スマホで、案内が画面の大半を占めていた) */
.category-page-content.entry-content { font-size: 14px; line-height: 1.7; }
.category-page-content.entry-content p { margin: 0 0 .5em; }
.category-content.article { margin-bottom: 1em; }
@media screen and (max-width: 600px) {
  /* 安全な本文HTMLのまま、列の多い表を1文字ずつ折り返さず横スクロールで読めるようにする */
  .entry-content > table { display: block; width: 100%; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}
/* 筆者(運営者)の吹き出し: 記事の中の、運営者自身の経験。人物のイラスト(サイドバーのプロフィールと同じ画像)を、CSSの背景で丸く切り出して出す。本文に画像タグは入れない */
.entry-content .wdp-author-balloon { display: flex; align-items: flex-start; gap: 14px; margin: 1.8em 0; }
.entry-content .wdp-author-balloon-person { flex: 0 0 72px; text-align: center; }
.entry-content .wdp-author-balloon-icon { width: 64px; height: 64px; margin: 0 auto; border: 2px solid #e3c98f; border-radius: 50%; background: #fff url(https://shuminoburoguu.com/wp-content/uploads/2024/08/%E7%AD%86%E8%80%85-1024x576.gif) no-repeat 50% 46%; background-size: 284% auto; }
.entry-content .wdp-author-balloon-name { margin-top: 4px; font-size: 12px; line-height: 1.3; color: #6b6b6b; }
.entry-content .wdp-author-balloon-name a { display: inline-block; padding: 4px 6px; margin: -4px -6px; color: inherit; text-decoration: underline; }
.entry-content .wdp-author-balloon-name a:hover { color: #44566d; }
.entry-content .wdp-author-balloon-text { position: relative; flex: 1 1 auto; min-width: 0; padding: 12px 16px; background: #fff8e6; border: 2px solid #e3c98f; border-radius: 10px; }
.entry-content .wdp-author-balloon-text::before { content: ""; position: absolute; top: 20px; left: -10px; border: 8px solid transparent; border-left-width: 0; border-right-color: #e3c98f; }
.entry-content .wdp-author-balloon-text::after { content: ""; position: absolute; top: 21px; left: -6px; border: 7px solid transparent; border-left-width: 0; border-right-color: #fff8e6; }
.entry-content .wdp-author-balloon-text p { margin: 0; word-break: auto-phrase; text-wrap: pretty; }
.entry-content .wdp-author-balloon-text p + p { margin-top: .7em; }
@media screen and (max-width: 600px) {
  .entry-content .wdp-author-balloon { gap: 10px; }
  .entry-content .wdp-author-balloon-person { flex-basis: 56px; }
  .entry-content .wdp-author-balloon-icon { width: 52px; height: 52px; }
  .entry-content .wdp-author-balloon-text { padding: 10px 12px; }
}
/* 文字と背景の差(コントラスト): 水色(#88abda)・薄緑(#84cdc9)の上の白文字や、白地の上の水色・灰色の文字が2:1前後で読みにくかった。色を濃くして、基準の4.5:1以上にする(大きい見出しは3:1以上) */
#header-container, #header-container .navi, #navi, #footer, .mobile-footer-menu-buttons, .mobile-menu-buttons, .widget-sidebar-title, .widget-sidebar-scroll-title, .sidebar h2.wp-block-heading, .tag-link { background-color: #44709f !important; }
.cat-label, .cat-link, .pagination .page-numbers.current { background-color: #2a7f7b !important; }
#main .pagination-next-link, .pagination-next-link, #header-container .navi a:hover, .menu-drawer a, .menu-drawer li a, .gam-heading > span, .gam-subheading > span, .entry-content h2 > span, .entry-content h3 > span, .entry-content h4 > span, .archive-title, .toc-title { color: #44709f !important; }
.pagination a.page-numbers, #main .pagination a.page-numbers, .pagination .page-numbers.dots, .pagination .screen-reader-text { color: #246f6b !important; }
.page-top a { color: #1f2d3d !important; }
.entry-card-snippet, .card-snippet, .breadcrumb a, .breadcrumb-caption { color: #6b6b6b !important; }
.entry-date, .post-date, .post-update, .entry-card-meta { color: #5e6c7e !important; }
/* ダウンロードボックス(WPDM。古い記事の本文にある): 薄い灰色の文字と、白文字の青いボタン */
.w3eden .text-muted { color: #5b6779 !important; }
.w3eden a.wpdm-download-link.btn, .w3eden .btn-primary { background-color: #2a5db8 !important; }
/* 「カテゴリーから探す」(トップと404ページ): カテゴリーごとに1行。塗りがカテゴリーページ、枠が中のカテゴリー。押しやすい高さ(44px) */
ul.gam-catnav { list-style: none; margin: 0 0 1em !important; padding: 0 !important; display: grid; grid-template-columns: 1fr; gap: 8px; }
ul.gam-catnav > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 !important; padding: 8px 10px; background: #f3f7fc; border: 1px solid #d3deed; border-radius: 8px; list-style: none; }
.gam-catnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #44709f; border-radius: 22px; background: #fff; color: #44709f; font-size: 14px; line-height: 1.2; text-decoration: none; box-sizing: border-box; }
.gam-catnav a:hover { background: #44709f; color: #fff; }
.gam-catnav a.gam-catnav-head { background: #44709f; color: #fff; font-weight: 700; }
.gam-catnav a.gam-catnav-head:hover { background: #2f5580; }
.gam-catnav-label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: #44566d; font-size: 14px; font-weight: 700; }
.gam-catnav-lead { margin: 0 0 .8em; font-size: 14px; }
@media screen and (min-width: 768px) { ul.gam-catnav { grid-template-columns: 1fr 1fr; } }
/* wdp-site-style:end */