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


/* =========================================
   手動更新用：TOPページお知らせリスト（縦幅極小・強制中央揃え版）自分で追加CSSコード(2026.10.07)
========================================= */

.custom-news-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
  border-top: 1px solid #e0e0e0;
}

/* ★WordPressが勝手に入れる改行・空段落を強制非表示にしてズレを防ぐ */
.custom-news-list br,
.custom-news-list p:empty {
  display: none !important;
}

/* --- 行全体の設定（ここで縦幅を狭くしています） --- */
.custom-news-list li {
  /* 上下の余白を12pxから8pxにさらに縮小 */
  padding: 8px 0 !important; 
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap; 
  align-items: center; /* 上下中央揃え */
}

/* --- 1. 日付のスタイル --- */
.custom-news-list .news-date {
  font-size: 14px;
  color: #333;
  margin: 0 15px 0 0 !important; /* 右側にのみ15pxの余白 */
  line-height: 1;
  white-space: nowrap; 
}

/* --- 2. ラベルの共通スタイル --- */
.custom-news-list .news-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  min-width: 90px;
  margin: 0 15px 0 0 !important; /* 右側にのみ15pxの余白 */
  line-height: 1;
  white-space: nowrap; 
}

/* ラベルの個別色設定 */
.custom-news-list .label-orange { background-color: #f68b3b; }
.custom-news-list .label-green  { background-color: #66c547; }
.custom-news-list .label-red    { background-color: #e55c5c; }
.custom-news-list .label-blue   { background-color: #3b82f6; }
.custom-news-list .label-gray   { background-color: #999999; }

/* --- 3. タイトル（テキスト＋リンク）のスタイル --- */
.custom-news-list .news-title {
  flex: 1; 
  font-size: 15px;
  line-height: 1.5;
  margin: 0 !important; /* 上下の余白を強制リセット */
  padding: 0 !important;
  min-width: 0;
}

.custom-news-list .news-title a {
  color: #333;
  text-decoration: none;
  display: inline-block;
}

.custom-news-list .news-title a:hover {
  text-decoration: underline;
}

/* 赤文字装飾用クラス */
.custom-news-list .text-red {
  color: #d93025;
  font-weight: bold;
}

/* =========================================
   スマホ用（768px以下）2段組レイアウト
========================================= */
@media screen and (max-width: 768px) {
  
  .custom-news-list li {
    align-items: flex-start; /* スマホ時は要素を上から配置 */
    padding: 12px 0 !important; /* スマホはタップしやすさのため少し余白を残す */
  }
  
  .custom-news-list .news-date,
  .custom-news-list .news-label {
    margin-bottom: 6px !important; /* 下段タイトルとの隙間 */
  }
  
  .custom-news-list .news-label {
    margin-right: 0 !important;
  }
  
  .custom-news-list .news-title {
    flex-basis: 100%; /* 強制的に下段へ改行 */
    margin-top: 2px !important;
  }
}