@charset "UTF-8";

/*!
Theme Name: Theme-Kintore
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*
 * TOPページカスタムCSS
 * アクセントカラー: #0c4c91
 */

/* ============================
   1. アクセントカラー設定
   ============================ */

/* リンク色とホバー */
a {
  color: #333;
}
a:hover {
  color: #0c4c91; /* 青をポイントに */
}

/* カスタムセクションの見出し */
.section-title {
  border-bottom: 2px solid #0c4c91; /* 青い下線 */
  padding-bottom: 5px;
  margin-bottom: 20px;
  color: #333;
}

.category-title {
  background: #f4f4f4;
  padding: 10px 15px;
  border-left: 5px solid #0c4c91; /* 青い強調線 */
  margin-top: 30px;
  font-size: 1.5em;
  color: #333;
}

/* ============================
   2. 新着記事カルーセル (簡易デザイン)
   ============================ */

.new-article-carousel {
  display: flex; /* 横並び */
  gap: 20px;
  overflow-x: auto; /* カルーセル動作はJavaScriptで実装することを推奨しますが、CSSだけでも横並び表示 */
  padding: 10px 0;
}

.carousel-item {
  min-width: 250px; /* PCでの表示幅 */
  max-width: 300px; 
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.carousel-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel-item .post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-item .item-body {
  padding: 10px;
}

.carousel-item .item-date {
  display: block;
  font-size: 0.8em;
  color: #888;
}

/* ============================
   3. カテゴリ別コンテンツ (グリッドレイアウト)
   ============================ */

.post-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC: 3カラム */
  gap: 20px;
  margin-bottom: 40px;
}

.grid-item {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
}

.grid-item .item-body {
  padding: 10px;
}

/* ============================
   4. レスポンシブ対応 (スマホ/タブレット)
   ============================ */

/* タブレット (例: 768px以下) */
@media screen and (max-width: 768px) {
  /* カテゴリ別コンテンツを2カラムに */
  .post-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン (例: 480px以下) */
@media screen and (max-width: 480px) {
  /* カテゴリ別コンテンツを1カラムに */
  .post-list-grid {
    grid-template-columns: 1fr;
  }

  /* カルーセルアイテムの幅調整 */
  .carousel-item {
    min-width: 80%; /* スマホでは画面幅の80%程度 */
  }
}