@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){
  /*必要ならばここにコードを書く*/
}
/* ===== 見出しデザイン：h2/h3/h4 ===== */

/* H2：大見出し（黒字＋左ピンク太め） */
.entry-content h2{
  color: #111827;                 /* 黒に近い濃グレー */
  font-weight: 700;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  padding: .7em .9em;
  border: 1px solid #e6e6e6;
  border-left: 10px solid #d98aa6; /* ←太く */
  margin: 1.8em 0 .9em;
}

/* H3：中見出し（グレー字で一段控えめ） */
.entry-content h3{
  color: #4b5563;                 /* グレー */
  font-weight: 700;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  padding: .55em .85em;
  border: 1px solid #eeeeee;
  border-left: 5px solid #d98aa6;  /* h2より細く */
  margin: 1.2em 0 .7em;
}

/* H4：参考・小見出し（上下ピンク線） */
.entry-content h4{
  color: #374151;
  font-weight: 600;

  padding: .35em 0 .35em;
  margin: 1.1em 0 .6em;

  border-top: 1px solid #d98aa6;     /* 上：ピンク */
  border-bottom: 1px solid #d98aa6;  /* 下：ピンク */
}
/* ===== 見出しデザイン（Cocoon想定） ===== */

/* h2：黒字＋左ピンク太め */
.entry-content h2{
  color:#222;
  background:transparent !important;
  padding:0.6em 0.8em;
  border:1px solid #e6e6e6;
  border-left:10px solid #d98aa6; /* ←太く */
  margin:1.8em 0 0.9em;
}

/* h3：グレー字（薄すぎ注意なので #555 推奨） */
.entry-content h3{
  color:#555;
  background:transparent !important;
  padding:0.5em 0.8em;
  border-left:6px solid #d98aa6;
  border-bottom:1px solid #eeeeee;
  margin:1.4em 0 0.7em;
}

/* h4：上下ともピンク線（動画タイトル用） */
.entry-content h4{
  color:#333;
  background:transparent !important;
  padding:0.45em 0.2em;
  border-top:2px solid #d98aa6;
  border-bottom:2px solid #d98aa6; /* ←下にも追加 */
  margin:1.2em 0 0.6em;
}

	/* ヘッダー画像の上のサイト名・キャッチフレーズを非表示 */
.logo .site-name,
.logo .site-description {
  display: none;
}

/* 背景画像を繰り返さず、トリミングは自然に */
.site-header{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* スマホだけ：高さを整える */
@media (max-width: 768px){
  .site-header{
    min-height: 200px;   /* ←好みで調整OK */
    background-position: center 35%;
  }
  .site-branding{
    padding: 10px 14px;
    background: rgba(255,255,255,0.65);
  }
}

/* =========================
   ヘッダーメニュー：ホバー/現在地/クリックの視認性UP
   ========================= */

/* 共通：メニュー文字の基本（必要なら微調整） */
#navi .navi-in a{
  font-weight: 600;
  transition: all .15s ease;
}

/* 1) ホバー：背景＋下線で分かりやすく */
#navi .navi-in > ul > li > a:hover{
  background: rgba(200, 80, 120, 0.12); /* 薄い色 */
  border-radius: 999px;
  text-decoration: none;
}

/* 2) 現在地：今いるページを“常に”強調 */
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-ancestor > a{
  background: rgba(200, 80, 120, 0.18);
  border-radius: 999px;
}

/* 3) クリック瞬間：押した感 */
#navi .navi-in > ul > li > a:active{
  transform: translateY(1px);
  opacity: .85;
}

/* ドロップダウン（学習配下）もホバーで強調 */
#navi .navi-in ul ul li a:hover{
  background: rgba(200, 80, 120, 0.12);
}
/* 現在地：下線を追加してさらに分かりやすく */
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-ancestor > a{
  box-shadow: inset 0 -2px 0 rgba(200, 80, 120, 0.45);
}
/* 現在地：下線を追加 */
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-ancestor > a{
  box-shadow: inset 0 -2px 0 rgba(200, 80, 120, 0.45);
}
/* ホバー：わずかに浮かせる */
#navi .navi-in > ul > li > a:hover{
  transform: translateY(-1px);
}

	/* ===== スマホ：スライドインメニューの強調（Cocoon向け） ===== */
@media (max-width: 1023px){

  /* メニューリンクを押しやすく */
  #navi-menu-content a,
  #slide-in-menu a,
  .slide-in-menu a,
  .mobile-menu a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    transition: background .15s ease, transform .15s ease;
  }

  /* 現在地（今見ているページ）を強調 */
  #navi-menu-content .current-menu-item > a,
  #navi-menu-content .current-menu-ancestor > a,
  #slide-in-menu .current-menu-item > a,
  #slide-in-menu .current-menu-ancestor > a,
  .slide-in-menu .current-menu-item > a,
  .slide-in-menu .current-menu-ancestor > a{
    background: rgba(200, 80, 120, 0.18);
  }

  /* タップ中（押した瞬間） */
  #navi-menu-content a:active,
  #slide-in-menu a:active,
  .slide-in-menu a:active,
  .mobile-menu a:active{
    background: rgba(200, 80, 120, 0.12);
    transform: translateY(1px);
  }

  /* 子メニュー（学習配下）だけインデント */
  #navi-menu-content ul ul a,
  #slide-in-menu ul ul a,
  .slide-in-menu ul ul a{
    padding-left:28px;
  }
}
@media (max-width: 1023px){
  #navi-menu-content a:active,
  #slide-in-menu a:active,
  .slide-in-menu a:active{
    background: rgba(200, 80, 120, 0.22);
    transform: translateY(1px);
  }
}
@media (max-width: 1023px){
  #navi-menu-content .current-menu-item > a,
  #navi-menu-content .current-menu-ancestor > a,
  #slide-in-menu .current-menu-item > a,
  #slide-in-menu .current-menu-ancestor > a{
    border-left: 4px solid rgba(200, 80, 120, 0.45);
  }
}
/* 記事一覧のカード感（薄い枠＋角丸＋影） */
.entry-card-wrap,
.ecb-entry-border,
.blogcard-wrap,
.widget-entry-card {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* カード同士の間隔を少し広げる */
.entry-card-wrap {
  margin-bottom: 18px;
}
/* 背景色（ごく薄いピンク） */
body{
  background:#fff6f8;
}

/* 記事カード（一覧）の影を少し濃く＋角丸を統一 */
.archive .entry-card,
.ecb-entry-border .entry-card,
.entry-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
}

/* ホバー時に“浮く”感じ（PCで気持ちよく） */
@media (hover:hover){
  .archive .entry-card:hover,
  .ecb-entry-border .entry-card:hover,
  .entry-card:hover{
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    transform:translateY(-2px);
    transition:box-shadow .2s ease, transform .2s ease;
  }
}
/* 背景（全体） */
body{
  background:#FFF6F9; /* 桜っぽい薄ピンク */
}

/* 一覧カード（Cocoonのエントリーカード想定） */
.entry-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.12); /* ←「10より少し強め」 */
  transition:box-shadow .2s ease, transform .2s ease;
}

/* 触った時だけ少し強く（PCで特に気持ちいい） */
.entry-card:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  transform:translateY(-2px);
}
/* グローバルナビ：現在地＆ホバー */
.navi-in a{
  border-radius:999px;
  transition:background-color .2s ease, color .2s ease;
}

.navi-in li.current-menu-item > a,
.navi-in li.current_page_item > a,
.navi-in li.current-menu-ancestor > a,
.navi-in a:hover{
  background:#F6D9E1;
  color:#222;
}

/* ドロップダウン内のホバー */
.navi-in .sub-menu a:hover{
  background:#F6D9E1;
}
/* ページ背景（カードを目立たせる） */
body{
  background:#fbf7f8;
}

/* 一覧のカード（影を少し濃く） */
.entry-card-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  border-radius:12px;
}

/* ついでにホバー時だけ少し強調（PCのみ体感） */
@media (hover:hover){
  .entry-card-wrap:hover{
    box-shadow:0 12px 26px rgba(0,0,0,.16);
    transform:translateY(-2px);
    transition:.2s;
  }
}
/* 背景（薄いピンク） */
body{
  background:#fbf7f8;
}

/* 記事カード */
.entry-card-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;

  /* 影を2段にして自然に */
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06);
}
/* 背景（今の雰囲気を維持） */
body{
  background:#fbf7f8;
}

/* 記事カード全般 */
.entry-card-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  overflow:hidden;

  /* 自然な影（2段） */
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06);
}

/* ホバーで少しだけ浮く（PCで気持ち良い） */
@media (hover:hover){
  .entry-card-wrap:hover{
    box-shadow:
      0 14px 30px rgba(0,0,0,.12),
      0 3px 10px rgba(0,0,0,.07);
    transform: translateY(-1px);
    transition: .2s;
  }
}