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

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

/* 8. フォント設定: BIZ UDPGothicの読み込みと適用 [cite: 30, 31] */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');

body { 
    font-family: 'BIZ UDPGothic', sans-serif; 
    font-size: 16px; 
    line-height: 1.9; 
}

/* 2. 見出しスタイルの調整 [cite: 10] */
/* H1（記事タイトル）: 薄青背景・角丸・下線ネイビー */
.article h1 {
    background-color: #eef2fa;
    border-bottom: 3px solid #003399;
    border-radius: 4px;
    padding: 10px;
    margin-top: 0;      /* ← 追加：上の余白を削除 */
    margin-bottom: 0;   /* ← 追加：下の余白も削除（必要に応じて調整） */
}

/* H2（大見出し）: ネイビー左ボーダー */
.article h2 {
    border-left: 4px solid #003399;
    border-bottom: none; /* デフォルトの線を消す場合 */
    background: none;
    color: #222222;
    padding-left: 15px;
}

/* H3（小見出し）: ゴールド左ボーダー */
.article h3 {
    border-left: 3px solid #ffcc33;
    border-bottom: none;
    color: #222222;
    padding-left: 10px;
}

/* 3. 記事カードの枠線とホバー */
.entry-card-wrap {
    border: 1px solid #eeeeee !important;
    border-radius: 4px;
}
.entry-card-wrap:hover {
    background-color: #dfdfdf !important;
    color: #003399 !important;
}

/* 4. サイドバー・検索フォーム */
.widget-sidebar .widget-title {
    border-left: 3px solid #ffcc33;
    color: #222222;
    padding-left: 10px;
}
.search-edit {
    border: 1px solid #dddddd !important;
    background-color: #fdfdfd !important;
}
.search-submit {
    background-color: #ffcc33 !important;
    color: #003366 !important;
}


/* 5. カテゴリーバッジ */
.cat-label {
    background-color: #003399 !important;
    color: #ffffff !important;
    border-radius: 3px;
}

/* 9. フッターエリア */
.footer {
    background-color: #003366 !important;
}
.footer .footer-content a {
    color: #ffcc33 !important;
}
.copyright {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 6. グローバルナビ ホバー */
#navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover {
    background-color: #003366 !important;
    color: #ffffff !important;
}

/* 7. タグボタン・アイコン */
.cat-label::before {
    color: #888888;
}
.tag-label::before {
    color: #888888;
}
.post-tags a,
.entry-footer .tag-links a {
    background-color: #f0f0f0;
    color: #555555;
    border-radius: 3px;
    padding: 2px 8px;
}

/* 8. シェア・フォローエリア */
.sns-share-label,
.sns-follow-label {
    text-align: center;
    color: #003399;
}
.sns-share-buttons,
.sns-follow-buttons {
    background-color: #efefef;
    border-radius: 12px;
    padding: 10px;
}
.search-menu-content .search-submit {
    height: 96%;
    top: 1px;
    right: 1px;
    border-radius: 0 4px 4px 0;
}
/* 9. 関連記事タイトル */
.related-entries-title,
.related-entry-heading {
    border-left: 4px solid #ffcc33 !important;
    color: #222222 !important;
    background: none !important;
    padding-left: 0.5em;
}

/* 10. SP下部ナビゲーション */
#sp-footer-nav {
    background-color: #003399 !important;
}
#sp-footer-nav a {
    color: #ffffff !important;
}

/* ============================================================
   13. サイドバーウィジェットタイトル（ブロックウィジェット修正）
   ============================================================ */

/* ウィジェットタイトル（Gutenbergブロック）：ゴールド左ボーダー3px */
.sidebar h2,
.sidebar h3 {
    padding-top: .3em;
    padding-bottom: .3em;
    border-left: 3px solid #ffcc33;
    background-color: rgba(255,255,255,0);
    color: #222;
}

/* ============================================================
   14. 検索ブロック（Gutenbergブロックウィジェット修正）
   ============================================================ */

/* 検索ラベル「検索」：ゴールド左ボーダー3px・文字色 #222222 */
.widget-sidebar .wp-block-search__label {
  display: block;
  border-left: 3px solid #ffcc33;
  color: #222222;
  padding-left: 0.5em;
  margin-bottom: 0.4em;
  font-weight: bold;
}

/* 検索入力フィールド：枠線 #dddddd・背景 #fdfdfd */
.wp-block-search__input {
  border: 1px solid #dddddd !important;
  background-color: #fdfdfd !important;
  border-radius: 3px;
}

/* 検索ボタン：背景 #ffcc33・文字色 #003366 */
.wp-block-search__button,
.wp-block-search__button.wp-element-button {
  background-color: #ffcc33 !important;
  color: #003366 !important;
  border: none !important;
  border-radius: 3px !important;
}

.wp-block-search__button:hover,
.wp-block-search__button.wp-element-button:hover {
  background-color: #e6b800 !important;
  color: #003366 !important;
}

/* ============================================================
   15. H3・カテゴリー・タグ 修正
   ============================================================ */

/* H3：上・右のブルーボーダーを除去（左ゴールドボーダーのみ残す） */
.entry-content h3,
.entry-content h3.wp-block-heading,
.article h3 {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* カテゴリーバッジ：角丸を強める */
a.cat-link,
.entry-categories a {
  border-radius: 20px !important;
  padding: 3px 12px !important;
}

/* タグバッジ：枠線なし・薄グレー背景・角丸 */
a.tag-link,
.entry-tags a {
  background-color: #eeeeee !important;
  color: #555555 !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
}

/* ============================================================
   16. SP下部ナビゲーション（実際のセレクター修正）
   ============================================================ */

/* SP下部ナビ背景：#003399 */
/* SP下部ナビ アイコン・文字：#ffffff */
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons {
  background-color: #003399;
  color: #ffffff;
}

/* ============================================================
   17. 記事一覧・サイドバー　区切り線
   ============================================================ */

/* ─── 記事カード：枠線ボックスを除去し下部区切り線に変更 ─── */
.entry-card-wrap,
.a-wrap.border-element {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* 最後のカードは区切り線なし */
.entry-card-wrap:last-child,
.a-wrap:last-child {
  border-bottom: none !important;
}

/* ホバー時も同じ区切り線を維持 */
.a-wrap:hover,
.entry-card-wrap:hover {
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
.a-wrap:last-child:hover,
.entry-card-wrap:last-child:hover {
  border-bottom: none !important;
}

/* ─── サイドバー記事リスト（最近の投稿・アーカイブ） ─── */
.widget-sidebar .wp-block-latest-posts li,
.widget-sidebar .wp-block-archives li {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
  margin-bottom: 8px;
  list-style: none;
}
.widget-sidebar .wp-block-latest-posts li:last-child,
.widget-sidebar .wp-block-archives li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.widget-entry-cards .a-wrap {
  padding: 10px 5px;
  margin-bottom: 0;
  border-bottom: 1px solid #e0e0e0;
}
.tagcloud a {
	color: rgba(0,51,153,1);
}
/* ─── 関連記事カード ─── */
.related-entry-card-wrap {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
.related-entry-card-wrap:last-child {
  border-bottom: none !important;
}

/* ============================================================
   18. カテゴリー・アーカイブページ H1
   ============================================================ */

/* アーカイブタイトル：薄青背景・ボトムボーダー・角丸 */
h1.archive-title,
#archive-title {
  background-color: #eef2fa;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid #003399;
  border-radius: 4px 4px 0 0;
  padding: 12px 16px;
  margin-top: 0;        /* ← 追加 */
  margin-bottom: 0;     /* ← 追加 */
}

/* アーカイブタイトル アイコン色 */
h1.archive-title .fa,
#archive-title .fa {
  color: #003399;
}


/* ============================================================
 トップページ ショーケース 
   ============================================================ */
.appeal-content {
  padding: 0;
  max-width: inherit;
  background-color: rgba(255,255,255,0);
  text-align: left;
}
.appeal-message {
  margin-bottom: 0;
}
.appeal .wpp-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.appeal .wpp-list li {
  position: relative;
  display: block;
  border-bottom: none;
  padding: 0;
  margin: 0;
  background-color: #fff
}
.appeal .wpp-list li a {
  display: block;
  text-decoration: none;
  line-height: 1.4;
  color: #333;
  transition: all 0.3s ease-in-out;
}
.appeal .wpp-list li a:hover {
  opacity: .9;
  background-color: #fdfcf1;
}
.appeal .wpp-list li .wpp-post-frm {
  display: block;
  overflow: hidden;
  background-color: #999;
}
.appeal .wpp-list li .wpp-post-frm img {
  display: block;
}
.appeal .wpp-list li .wpp-post-title {
  display: block;
  padding: 1em;
  font-size: 14px;
}
.appeal .wpp-list li .wpp-post-frm img {
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .appeal .wpp-list li:first-child {
    width: 100%;
    margin: 0 0 .5em;
  }
  .appeal .wpp-list li:first-child img {
    max-width: inherit;
    width: 100%;
  }
  .appeal .wpp-list li:not(:first-child) {
    width: 49%
  }
}
@media screen and (min-width: 768px), print {
  .logo-image {
    padding-top: 1em;
  }
  .tagline {
    margin-top: -1em;
    margin-bottom: 1em;
    font-size: 75%;
  }
  .go-to-top-button {
    width: 56px;
    height: 56px;
  }
  .appeal .wpp-list {
    flex-wrap: nowrap;
  }
  .appeal .wpp-list li {
    width: 32.2%;
    margin: 0 0 0 1.7%;
  }
  .appeal .wpp-list li:first-child {
    margin-left: 0;
  }
}

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

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

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