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


/* ===== Ring*Ring: STINGER7 からの引き継ぎ（2026-09-23） ===== */

/* ヘッダーの帯にだけ空を横に並べる（旧: 外観 → 背景画像 sora-1.jpg・横に繰り返し）
   2026-09-24 草島「全体ではなく上部にだけ」→ body から #header へ移した。
   高さはヘッダーに合わせて伸縮（auto 100%） */
#header {
  background-color: transparent;
  background-image: url("/wp/wp-content/uploads/2026/09/sora-seamless.jpg");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto 100%;
}

/* ロゴ画像（青空の絵）を幅いっぱい・縦横比のまま出す */
.logo-image,
.logo-image a,
.site-logo-image {
  display: block;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}
.site-logo-image {
  height: auto;
}
.header-in {
  padding-top: 0;
  padding-bottom: 0;
}

/* 旧テーマの追加 CSS（画像キャプション） */
.wp-block-image figcaption {
  font-size: 14px;
  margin-top: -10px;
}

/* 教材一覧: 写真の左寄せで次の教材名が右に回り込むのを止める（STINGER7 では回り込まなかった） */
.page-id-259 .entry-content p { clear: both; }

/* 投稿の頭のアイキャッチを控えめに（正方形 1667px が全幅で出ていた） */
.single .eye-catch { width: fit-content; margin-left: auto; margin-right: auto; }
.single .eye-catch-image { width: auto; max-height: 300px; }

/* プロフィール欄の SNS ボタンを大きく・各サービスの色に（既定は 26px の薄い灰色） */
.author-box .sns-follow-buttons { gap: 10px; flex-wrap: wrap; }
.author-box .sns-follow-buttons a.follow-button {
  width: 44px; height: 44px; font-size: 24px;
  color: #fff; border: none; border-radius: 50%;
}
.author-box .sns-follow-buttons a.follow-button:hover { opacity: .8; }
.author-box .sns-follow-buttons a.instagram-button { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.author-box .sns-follow-buttons a.facebook-button { background-color: #1877f2; }
.author-box .sns-follow-buttons a.line-button { background-color: #06c755; }
/* 保護者向けに要らない feedly と RSS はプロフィール欄から隠す */
.author-box .sns-follow-buttons a.feedly-button,
.author-box .sns-follow-buttons a.rss-button { display: none; }



/* ===== 配色（PB-018）: 柔らかい黄色の地 ＋ 緑寄りのターコイズ ===== */
:root {
  --rr-bg: #fffbea;        /* 地の色（柔らかい黄色） */
  --rr-card: #ffffff;      /* 本文・サイドバーのカード */
  --rr-teal: #1f9e8f;      /* ポイントカラー */
  --rr-teal-dark: #17857a; /* 押したとき・濃い所 */
  --rr-teal-soft: #e3f5f2; /* 薄いターコイズ（見出しの地） */
  --rr-yellow: #fff1b8;    /* 強調の黄色 */
  --rr-line: #ece4c4;      /* 罫線 */
  --rr-ink: #3a3a32;       /* 文字 */
  --cocoon-text-color: #3a3a32;
  --cocoon-basic-border-color: #ece4c4;
  --cocoon-thin-color: #ece4c4;
  --cocoon-xx-thin-color: #f6f1dc;
  --cocoon-xxx-thin-color: #fffdf3;
  --cocoon-current-background-color: #e3f5f2;
  --cocoon-select-background-color: #e3f5f2;
}

/* 地とカード */
body { background-color: var(--rr-bg); }
.main, .sidebar { background-color: var(--rr-card); border: 1px solid var(--rr-line); }

/* リンク（コントラスト比 3.3 → 5.2 に濃くした・2026-09-27） */
a { color: #147a6f; }
a:hover { color: #0f5f56; }

/* ヘッダー下のメニュー */
.navi { border-bottom: 3px solid var(--rr-teal); }
.navi-in > ul > li > a { color: var(--rr-ink); }
.navi-in > ul > li:hover > a, .navi-in > ul > .current-menu-item > a { color: var(--rr-teal-dark); background-color: var(--rr-teal-soft); }
.navi-in > ul .sub-menu { background-color: var(--rr-card); border: 1px solid var(--rr-line); }
.navi-in > ul .sub-menu li:hover > a { background-color: var(--rr-teal-soft); color: var(--rr-teal-dark); }

/* 見出し */
.article h2 { background-color: var(--rr-teal-soft); border-left: 6px solid var(--rr-teal); color: var(--rr-ink); padding: 16px 20px; }
.article h3 { border-left: 6px solid var(--rr-teal); border-top: none; border-right: none; border-bottom: 1px solid var(--rr-line); color: var(--rr-ink); }
.sidebar h3 { background-color: var(--rr-teal-soft); border-left: 6px solid var(--rr-teal); color: var(--rr-ink); padding: 10px 12px; }
.list-title { color: var(--rr-ink); }

/* カテゴリーのラベル・ボタン・ページ送り */
.cat-label { background-color: rgba(31, 158, 143, .9); border-color: transparent; }
.btn, .btn-wrap a, .wpforms-form button[type="submit"], .wpforms-form .wpforms-submit {
  background-color: var(--rr-teal) !important; color: #fff !important; border: none !important; border-radius: 999px !important;
}
.btn:hover, .btn-wrap a:hover, .wpforms-form button[type="submit"]:hover { background-color: var(--rr-teal-dark) !important; }
.pagination .current { background-color: var(--rr-teal); color: #fff; border-color: var(--rr-teal); }
.pagination a:hover { background-color: var(--rr-teal-soft); }
.search-edit { border-color: var(--rr-line); }

/* 記事のカード（一覧）・関連記事 */
.entry-card-wrap:hover, .related-entry-card-wrap:hover { background-color: var(--rr-teal-soft); }
.entry-card-title, .related-entry-card-title { color: var(--rr-ink); }

/* フッター */
.footer { background-color: var(--rr-teal-soft); border-top: 3px solid var(--rr-teal); }
.footer a { color: var(--rr-teal-dark); }

/* お問い合わせの送信ボタンを押しやすい大きさに */
.wpforms-form .wpforms-submit { padding: 12px 48px !important; font-size: 18px !important; font-weight: 700; cursor: pointer; }

/* スマホのメニューボタン・ドロワー */
.mobile-menu-buttons { background-color: var(--rr-card); border-top: 2px solid var(--rr-teal); }
.mobile-menu-buttons .menu-button, .mobile-menu-buttons a { color: var(--rr-teal-dark); }
.menu-drawer a:hover { background-color: var(--rr-teal-soft); }

/* スマホ下の「お問合せ」ボタンを目立たせる */
.mobile-menu-buttons a.menu-button-in[href*="/contact/"] { background-color: #1f9e8f; color: #fff !important; border-radius: 12px; }
/* 「お問合せ」の地を文字の幅まで広げる */
.mobile-menu-buttons a.menu-button-in[href*="/contact/"] { padding: 0 8px; min-width: 64px; }
/* 下のボタンの色をそろえる（リンクのボタンにも効くよう a まで書く） */
.mobile-menu-buttons .menu-button-in,
.mobile-menu-buttons .menu-button > a.menu-button-in { color: #17857a; }

/* ===== メニューの帯だけ黄色に（PB-018・2026-09-26） ===== */
.navi, .navi-in > ul .sub-menu { background-color: #fff1b8; }
.navi-in > ul > li:hover > a, .navi-in > ul > .current-menu-item > a,
.navi-in > ul .sub-menu li:hover > a { background-color: #e3f5f2; }