@charset "UTF-8";

/* ===== Google Fonts：柔らかい丸ゴシックフォント ===== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ============================================
   カラーテーマ：Surfshark風 水色・ターコイズ・白
   ============================================ */

:root {
  --color-main:    #5EC8CC;  /* 明るい水色 */
  --color-sub:     #93D9DC;  /* 淡い水色 */
  --color-deep:    #3AAAB0;  /* やや深い水色 */
  --color-light:   #F0FAFB;  /* 白ベースの薄水色 */
  --color-white:   #FFFFFF;
  --color-text:    #2C3E50;  /* 読みやすい濃紺グレー */
}

/* ===== 全体背景・テキスト ===== */
body {
  background-color: #F7F2E8;
  color: var(--color-text);
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;
}

/* 記事エリアの白背景をアイボリーに */
.article {
  background-color: #F7F2E8;
}

/* ===== ヘッダー ===== */
.header {
  background-color: var(--color-deep);
}
.header .catch {
  color: #FFFFFF !important;
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif !important;
}
.header .site-name-text,
.site-name-text,
.site-name-text-link {
  color: #FFFFF0 !important;
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif !important;
}

/* ===== グローバルナビ ===== */
.navi {
  background-color: var(--color-main);
}
.navi .menu-item a {
  color: #FFFFFF !important;
}
.navi .menu-item a:hover {
  background-color: var(--color-deep);
  color: #FFFFFF !important;
}

/* ===== リンク・ボタン ===== */
a {
  color: var(--color-deep);
}
a:hover {
  color: var(--color-main);
}

.btn, .button, input[type="submit"] {
  background-color: var(--color-main) !important;
  border-color: var(--color-main) !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}
.btn:hover, .button:hover {
  background-color: var(--color-deep) !important;
}

/* ===== 見出し ===== */
.entry-content h2 {
  position: relative;
  padding: 0.5em 0.8em 0.5em 2.2em;
  background-color: var(--color-light);       /* 目次と同じ #F0FAFB */
  border: 1px solid var(--color-sub);         /* 目次と同じ #93D9DC */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  color: var(--color-text);
  line-height: 1.4;
}
/* 肉球アイコン（Font Awesome 4） */
.entry-content h2::before {
  display: block;
  font-family: "FontAwesome";
  content: "\f1b0";
  font-weight: normal;
  position: absolute;
  left: 0.6em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  color: #ff938b;
  /* Cocoonデフォルトの円スタイルをリセット */
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}
.entry-content h3 {
  position: relative;
  padding: .2em .8em .3em 2em;
  background-color: var(--color-light);       /* 目次背景と同じ薄水色 */
  border-left: none;
  color: var(--color-text);
  line-height: 1.8;
  border-bottom: 1px solid var(--color-sub);  /* 目次の縁と同じ水色 */
  font-size: 20px;                            /* H2(24px)より小さく */
}

/* 二重丸アクセント（共通） */
.entry-content h3::before,
.entry-content h3::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: .6;
}

/* 大きい丸：目次のターコイズ */
.entry-content h3::before {
  top: .3em;
  left: .2em;
  width: 1.1em;
  height: 1.1em;
  background: var(--color-main);
  z-index: 2;
  /* Cocoonデフォルトスタイルをリセット */
  transform: none;
}

/* 小さい丸：目次の水色 */
.entry-content h3::after {
  top: .8em;
  left: .8em;
  width: .7em;
  height: .7em;
  background: var(--color-sub);
}

/* ===== サイドバー ===== */
.widget-title {
  background-color: var(--color-main);
  color: #FFFFFF !important;
}

/* ===== フッター ===== */
#footer {
  background-color: var(--color-main) !important;
  color: #FFFFFF;
}
#footer a {
  color: var(--color-sub);
}

/* ===== ラベルボックス（お悩みボックスなど） ===== */
.label-box-content {
  background-color: #f8fbf8 !important;
}

/* ===== 記事カード ===== */
.entry-card-wrap:hover {
  border-color: var(--color-main);
  box-shadow: 0 4px 16px rgba(58, 181, 187, 0.18);
}

/* ===== 目次 ===== */
.toc-title {
  background-color: var(--color-main);
  color: #FFFFFF;
}
.toc {
  border: 1px solid var(--color-sub);
  background-color: var(--color-light);
}

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

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

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