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


/************************************
** おもしろ科学ラボ カスタムデザイン
************************************/

/* ===== カラー変数（科学・宇宙イメージ：深い紺×シアン） ===== */
:root{
  --sci-navy:#0d1b3e;
  --sci-navy2:#16264f;
  --sci-cyan:#12b3c8;
  --sci-cyan-d:#0a8fa3;
  --sci-accent:#3ad0e0;
  --sci-ink:#1f2937;
  --sci-soft:#f3f7fb;
}

/* ===== ヘッダー／サイトタイトル ===== */
#header, .header-container-in{
  background:linear-gradient(120deg,var(--sci-navy) 0%,var(--sci-navy2) 60%,#1e3a6e 100%);
}
.site-name-text, .site-name-text a{
  color:#fff !important;
  font-weight:800;
  letter-spacing:.04em;
}
.tagline, .catchphrase, .site-description{
  color:#bcd6ea !important;
}
#navi .navi-in > ul, #navi{
  background:var(--sci-navy2);
}
#navi .navi-in a{ color:#eaf3fb; }
#navi .navi-in > ul > li > a:hover{ background:var(--sci-cyan-d); }

/* ===== 見出しデザイン ===== */
.entry-content h2{
  position:relative;
  color:var(--sci-navy);
  background:none;
  border:none;
  border-bottom:3px solid var(--sci-cyan);
  padding:.4em 0 .4em .8em;
  margin:2.2em 0 1em;
  font-weight:800;
}
.entry-content h2::before{
  content:"";
  position:absolute;
  left:0; top:.35em; bottom:.35em;
  width:6px;
  border-radius:4px;
  background:linear-gradient(var(--sci-cyan),var(--sci-navy));
}
.entry-content h3{
  color:var(--sci-navy2);
  border:none;
  border-left:5px solid var(--sci-accent);
  background:var(--sci-soft);
  padding:.5em .8em;
  margin:1.8em 0 .9em;
  font-weight:700;
}

/* ===== リンク ===== */
.entry-content a{ color:var(--sci-cyan-d); }
.entry-content a:hover{ color:var(--sci-navy); }

/* ===== 記事一覧カード ===== */
.entry-card, .a-wrap{
  border:1px solid #e3e9f2;
  border-radius:14px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  background:#fff;
}
.entry-card:hover, .a-wrap:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(13,27,62,.16);
  border-color:var(--sci-cyan);
}
.entry-card-title{ font-weight:800; color:var(--sci-navy); }
.cat-label{
  background:var(--sci-cyan-d) !important;
  border-radius:6px;
  font-weight:700;
}

/* ===== オリジナル装飾ボックス ===== */
/* ポイント（気づき）ボックス */
.sci-point{
  position:relative;
  background:var(--sci-soft);
  border:2px solid var(--sci-cyan);
  border-radius:12px;
  padding:1.4em 1.2em 1.2em;
  margin:1.8em 0;
}
.sci-point::before{
  content:"💡 ポイント";
  position:absolute;
  top:-.9em; left:1em;
  background:var(--sci-cyan);
  color:#fff;
  font-weight:700;
  font-size:.85em;
  padding:.15em .8em;
  border-radius:20px;
}
/* 豆知識ボックス */
.sci-note{
  background:#fff8ec;
  border-left:6px solid #f0a500;
  border-radius:8px;
  padding:1em 1.1em;
  margin:1.6em 0;
}
.sci-note::before{
  content:"🔎 豆知識";
  display:block;
  font-weight:700;
  color:#b9770a;
  margin-bottom:.3em;
}
/* まとめボックス */
.sci-summary{
  background:linear-gradient(135deg,var(--sci-navy),var(--sci-navy2));
  color:#eaf3fb;
  border-radius:14px;
  padding:1.5em 1.4em;
  margin:2em 0;
  box-shadow:0 8px 22px rgba(13,27,62,.2);
}
.sci-summary::before{
  content:"📌 この記事のまとめ";
  display:block;
  font-weight:800;
  font-size:1.05em;
  color:#fff;
  margin-bottom:.6em;
  padding-bottom:.4em;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.sci-summary ul{ margin:0; padding-left:1.2em; }
.sci-summary li{ margin:.35em 0; }
.sci-summary a{ color:var(--sci-accent); }

/* ===== ボタン・その他アクセント ===== */
.widget-entry-cards .cat-label{ background:var(--sci-cyan-d); }
.a-wrap:hover .entry-card-title{ color:var(--sci-cyan-d); }