@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: #F8FCFD;
  color: var(--color-text);
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic', sans-serif;
}

/* ===== ヘッダー ===== */
.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: var(--color-main) !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 {
  border-left: 4px solid var(--color-main);
  border-bottom: 1px solid var(--color-sub);
  background-color: var(--color-light);
  color: var(--color-text);
  padding: .5em .8em;
}
.entry-content h3 {
  border-left: 3px solid var(--color-sub);
  padding-left: .6em;
  color: var(--color-text);
}

/* ===== サイドバー ===== */
.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);
}

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