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

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

/*↓↓↓ここから↓↓↓*/
/*2026年6月12日追加*/
/*人気記事を特定ページの本文中に横並びに表示させるCSSテンプレート*/
/* 全体のコンテナ（横並び） */
.wpp-articles-flex {
    display: flex;
    justify-content: space-between;
    gap: 12px; /* 画像同士のスキマ（お好みで調整） */
    flex-wrap: wrap;
}

.wpp-article-item {
    width: calc((100% - (12px * 4)) / 5); /* 5等分 */
    box-sizing: border-box;
    margin-bottom: 15px;
}

.wpp-article-item a {
    display: block;
    transition: opacity 0.3s ease; /* マウスを乗せたときにふわっとさせる */
}

/* マウスホバー時に少し透明にする演出 */
.wpp-article-item a:hover {
    opacity: 0.8;
}

.wpp-thumbnail img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* 16:9の綺麗な横長に統一 */
    object-fit: cover;
    border-radius: 6px; /* 角を少し丸く */
    display: block;
}

/* 【レスポンシブ】タブレットサイズ */
@media screen and (max-width: 960px) {
    .wpp-article-item {
        width: calc((100% - (12px * 2)) / 3); /* 3並び */
    }
}

/* 【レスポンシブ】スマホサイズ */
@media screen and (max-width: 560px) {
    .wpp-article-item {
        width: calc((100% - 12px) / 2); /* 2並び */
    }
}
/*↑↑↑ここまで↑↑↑*/

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

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

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