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

/* ウィジェットカード設定（Grid）---------------------------------------------- */

/* カード内の画像リンク最大幅を600pxに制限（横幅100%で拡縮対応） */
[class*="is-style-column-"] .widget-entry-cards.card-large-image .a-wrap {
   max-width: 600px;
   width: 100%;
}

/* 大きなサムネイル画像を中央寄せ */
[class*="is-style-column-"] .widget-entry-cards.large-thumb {
   justify-items: center; /* Gridのアイテムを水平方向に中央配置 */
}

/* 各カラム数に応じたグリッド表示 */
[class*="is-style-column-2"] .widget-entry-cards,
[class*="is-style-column-3"] .widget-entry-cards,
[class*="is-style-column-4"] .widget-entry-cards {
   display: grid;
}

/* 2カラム表示 */
[class*="is-style-column-2"] .widget-entry-cards {
   grid-template-columns: repeat(2, 1fr);
}

/* 3カラム表示 */
[class*="is-style-column-3"] .widget-entry-cards {
   grid-template-columns: repeat(3, 1fr);
}

/* 4カラム表示 */
[class*="is-style-column-4"] .widget-entry-cards {
   grid-template-columns: repeat(4, 1fr);
}

/* モバイル用レスポンシブ設定 */
@media (max-width: 768px) {
   /* column-x-1系：モバイルでは1列 */
   :is(.is-style-column-2-1, .is-style-column-3-1, .is-style-column-4-1) .widget-entry-cards {
   grid-template-columns: 1fr;
   }

/* column-x-2系：モバイルでは2列 */
   :is(.is-style-column-3-2, .is-style-column-4-2) .widget-entry-cards {
   grid-template-columns: repeat(2, 1fr);
   }
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}