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

/************************************
** BLOG(/blog/)一覧: PC4列グリッド
** ※カスタマイザーの追加CSS(.page-id-9 #main ul { display:flex })を上書き
************************************/
body.page-id-9 #main > ul{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 16px;
  padding-left:0;
}
body.page-id-9 #main > ul::before,
body.page-id-9 #main > ul::after{display:none}
body.page-id-9 #main > ul > li{min-width:0;flex:none}
body.page-id-9 #main > ul > li > a > img{width:100%;height:auto;display:block}

/*1023px以下: 2列*/
@media screen and (max-width: 1023px){
  body.page-id-9 #main > ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/*692px以下: 1列*/
@media screen and (max-width: 692px){
  body.page-id-9 #main > ul{grid-template-columns:1fr}
}