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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

/* ====== 回路風見出しデザイン（青〜赤グラデーション版） ====== */

/* H2/H3/H4 共通のベース設定（サイドバーH3を追加） */
.article h2, .article h3, .article h4, .sidebar h3 {
  background: none;
  border: none; /* 既存のボーダーをリセット */
  padding: 0;
  position: relative; /* ← これがないと丸が迷子になります */
  color: #000;
}

/* ====== H2見出し ====== */
.article h2 {
  padding-bottom: 10px;
  margin-top: 3em;
  margin-bottom: 1.5em;
  font-weight: bold;
  /* 下線をグラデーションで描画（青 #1a56c8 → 赤 #ef3c3e） */
  background-image: linear-gradient(to right, #1a56c8, #ef3c3e);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

/* H2 太い線（左側：ロゴの青色） */
.article h2::before {
  content: "";
  position: absolute;
  bottom: 0; /* 下線に重ねる */
  left: 0;
  width: 40%;
  height: 8px;
  background: #1a56c8;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

/* H2 右端の丸（右側：ロゴの赤色） */
.article h2::after {
  content: "";
  position: absolute;
  bottom: -4px; /* 線の中心に合わせる */
  right: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #ef3c3e;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

/* ====== H3見出し ＆ サイドバー見出し ====== */
.article h3, .sidebar h3 {
  padding: 15px 0 10px 0;
  margin-top: 2.5em;
  margin-bottom: 1.5em;
  font-weight: bold;
  /* 上下の線をグラデーションで描画 */
  background-image: 
    linear-gradient(to right, #1a56c8, #ef3c3e), /* 上の線 */
    linear-gradient(to right, #1a56c8, #ef3c3e); /* 下の線 */
  background-size: 
    calc(100% - 10px) 1px, /* 上の線（左の丸の分のスペースを空ける） */
    100% 1px;              /* 下の線 */
  background-position: 
    right top, 
    left bottom;
  background-repeat: no-repeat;
}

/* H3 左上の丸（左側：ロゴの青色） */
.article h3::before, .sidebar h3::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid #1a56c8;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

/* H3 右下の丸（右側：ロゴの赤色） */
.article h3::after, .sidebar h3::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #ef3c3e;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

/* ====== H4見出し ====== */
.article h4 {
  padding-bottom: 10px;
  margin-top: 2em;
  margin-bottom: 1.5em;
  font-weight: bold;
  /* 下線をグラデーションで描画 */
  background-image: linear-gradient(to right, #1a56c8, #ef3c3e);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

/* H4 右下の丸（右側：ロゴの赤色） */
.article h4::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #ef3c3e;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

/* ====== グローバルメニュー（階層含む）：グラデーションホバー線 ====== */

@media screen and (min-width: 1024px) {
  
  /* ">"を外し、すべての階層のメニューリンクに適用させる */
  .navi-in ul li a {
    position: relative; 
  }

  /* ぐにっと伸びるグラデーション下線（初期状態） */
  .navi-in ul li a::after {
    content: '';
    position: absolute;
    bottom: 5px; /* 下線の位置（階層メニューでズレる場合は数値を調整） */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #1a56c8, #ef3c3e);
    border-radius: 2px;
    transition: width 0.3s ease-out;
  }

  /* マウスホバー時に線を伸ばす */
  .navi-in ul li a:hover::after {
    width: 80%; /* 長さの設定（「100%」や「50px」などお好みで変更） */
  }
}

/* ====== 検索バー：ネオン発光 ＋ ぐにっと広がる青ボタン ====== */

/* 検索フォーム全体のラッパー */
.search-box, 
.widget_search form {
    position: relative;
    max-width: 100%;
}

/* 検索入力フィールド（通常時） */
.search-box input[type="text"],
.search-input,
.widget_search input[type="text"] {
    width: 100%;
    /* 右側に「伸びたボタン」が被らないよう、余白を大きめ(70px)に確保 */
    padding: 12px 70px 12px 15px !important; 
    border: 1px solid #ccc !important; 
    border-radius: 6px !important; 
    background-color: #fff !important;
    color: #333 !important;
    font-size: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease-out !important; 
    outline: none !important; 
}

/* 検索入力フィールド（フォーカス時：ネオン発光） */
.search-box input[type="text"]:focus,
.search-input:focus,
.widget_search input[type="text"]:focus {
    border-color: #1a56c8 !important;
    box-shadow: 
        0 0 8px rgba(26, 86, 200, 0.6),  
        0 0 15px rgba(239, 60, 62, 0.2) !important; 
    transform: translateY(-1px);
}

/* 虫眼鏡ボタン（角丸の青いボタン） */
.search-box .search-submit,
.widget_search .search-submit {
    position: absolute;
    top: 50%;
    right: 5px; 
    transform: translateY(-50%);
    width: 40px !important;  
    height: 40px !important; 
    background-color: #1a56c8 !important; 
    border: none !important;

    /* 👇ここを 20px から 6px に変更します */
    border-radius: 6px !important; 

    color: #fff !important; 
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1.5, 0.5, 1) !important; 
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 虫眼鏡ボタン（ホバー時：ぐにっと広がる） */
.search-box .search-submit:hover,
.widget_search .search-submit:hover {
    width: 60px !important; /* 横にぐにっと伸びる */
    background-color: #1646a3 !important; /* ほんの少し濃い青にして押した感を出す */
    box-shadow: 0 0 10px rgba(26, 86, 200, 0.5) !important; /* ボタン自体も少し発光させる */
}

/* PC・スマホ共通：Cocoonの標準リンク下線を文字通り「完全に」抹殺 */
.zg-mag-block, .zg-mag-block *, .zg-mag-block a, .zg-mag-block a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.zg-mag-block {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.zg-mag-large { width: 100% !important; position: relative !important; }
.zg-mag-large-link {
    display: flex !important; align-items: flex-end !important; width: 100% !important; height: 0 !important; padding-bottom: 62% !important;
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
    position: relative !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
}
.zg-mag-large-link::after {
    content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%) !important; z-index: 1 !important;
}
.zg-mag-large-content { position: absolute !important; bottom: 0 !important; left: 0 !important; z-index: 2 !important; padding: 20px !important; width: 100% !important; box-sizing: border-box !important; }
.zg-mag-large-title { color: #fff !important; font-size: 20px !important; font-weight: bold !important; line-height: 1.4 !important; text-shadow: 0 2px 5px rgba(0,0,0,0.7) !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; }

.zg-mag-small-wrap { display: flex !important; flex-direction: column !important; gap: 12px !important; height: 100% !important; }
.zg-mag-small-card { background: #fff !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important; border: 1px solid #f0f0f0 !important; flex: 1 !important; }
.zg-mag-small-link { display: flex !important; align-items: center !important; padding: 8px 12px !important; height: 100% !important; box-sizing: border-box !important; width: 100% !important; }
.zg-mag-small-thumb { width: 120px !important; height: 75px !important; min-height: 75px !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 4px !important; flex-shrink: 0 !important; position: relative !important; }
.zg-mag-small-content { padding-left: 12px !important; flex-grow: 1 !important; min-width: 0 !important; }
.zg-mag-small-title { color: #333 !important; font-size: 13px !important; font-weight: bold !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; margin: 0 !important; }

.zg-badge { position: absolute !important; top: 10px !important; left: 10px !important; color: #fff !important; z-index: 3 !important; pointer-events: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.zg-cat { background-color: rgba(51, 51, 51, 0.8) !important; font-size: 11px !important; font-weight: bold !important; padding: 3px 8px !important; border-radius: 3px !important; }
.zg-large .zg-cat { top: 15px !important; left: 15px !important; font-size: 12px !important; padding: 4px 10px !important; }
.zg-rank { font-size: 11px !important; font-weight: bold !important; width: 22px !important; height: 22px !important; border-radius: 4px !important; }
.zg-large .zg-rank { top: 15px !important; left: 15px !important; width: 26px !important; height: 26px !important; font-size: 14px !important; }
.zg-r1 { background: linear-gradient(135deg, #ffd700, #b8860b) !important; }
.zg-r2 { background: linear-gradient(135deg, #f0f0f0, #8a8a8a) !important; }
.zg-r3 { background: linear-gradient(135deg, #e59866, #935116) !important; }
.zg-r4 { background-color: rgba(40, 40, 40, 0.85) !important; }

/* モバイル（スマホ）での強制上書き設定 */
@media screen and (max-width: 768px) {
    .zg-mag-block { grid-template-columns: 1fr !important; gap: 12px !important; }
    .zg-mag-large-link { padding-bottom: 56.25% !important; border-radius: 8px !important; }
    .zg-mag-large-title { font-size: 15px !important; }
    .zg-mag-small-link { padding: 10px !important; }
    .zg-mag-small-thumb { width: 100px !important; height: 65px !important; min-height: 65px !important; }
    .zg-mag-small-title { font-size: 13px !important; -webkit-line-clamp: 2 !important; }
    .zg-badge { top: 8px !important; left: 8px !important; }
    .zg-cat { font-size: 10px !important; padding: 2px 6px !important; }
    .zg-large .zg-cat { top: 10px !important; left: 10px !important; font-size: 11px !important; }
    .zg-rank { width: 18px !important; height: 18px !important; font-size: 10px !important; }
    .zg-large .zg-rank { top: 10px !important; left: 10px !important; width: 22px !important; height: 22px !important; font-size: 12px !important; }
}

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

}

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

}

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

}