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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*archive-vocaboli.php START*/
.taxonomy-list ul {
  list-style: none;        /* 中黒（・）を消す */
  padding: 0;
  margin: 0;
  display: grid;           /* グリッドレイアウトにする */
  grid-template-columns: repeat(4, 1fr); /* PCは4列 */
  gap: 0px;               /* 画像同士の間隔 */
  justify-items: center;   /* 中央寄せ */
  align-items: center;
}

.taxonomy-list li {
  text-align: center;
}

.taxonomy-list img {
  max-width: 100%;         /* 横幅に収まるように */
  height: auto;
  border-radius: 8px;      /* 少し角丸（好みに応じて） */
  transition: transform 0.3s ease;
}

.taxonomy-list a:hover img {
  transform: scale(1.05);  /* ホバー時に拡大 */
}

/* スマホ表示（768px以下）は2列 */
@media (max-width: 768px) {
  .taxonomy-list ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* h1 class="page-title"を非表示に */
.page-title {
  display: none;
}
/*archive-vocaboli.php END*/


/*固定ページ「○○一覧」ショートコード共通CSS START*/
.categories-shortcode-list ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.categories-shortcode-list li a {
    display: inline-block;          /* ブロック化 */
    padding: 10px 20px;             /* 横に少し余裕 */
    border-radius: 9999px;          /* 最大値で丸く */
    background-color: #FFE681;      /* デフォルト背景色 */
    color: #333;                     /* デフォルト文字色 */
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;     /* 文字色だけホバーで変化 */
}

.categories-shortcode-list li a:hover {
    color: #fff;                     /* ホバー時の文字色 */
    /* 背景色はそのまま */
}

.categories-shortcode-list li:hover {
  transform: scale(1.05);  /* ホバー時に拡大 */
}

/*固定ページ「○○一覧」ショートコード共通CSS END*/



/*新着記事カードサイズ調整 START*/

/* PC・タブレットサイズ (835px以上) でのみ、カスタムな幅と中央寄せを適用 */
@media screen and (min-width: 835px) {
    /* 1. 中央寄せとFlexboxの強制適用 (PC版のみ) */
    .swiper-wrapper {
        display: flex !important;
        justify-content: center !important;
        transform: none !important; /* スライダーの自動位置調整を無効化 */
        flex-wrap: wrap !important; /* 横並びを強制 */
    }

    /* 2. 個々のカードの幅と最大幅の固定 (PC版のみ) */
    .widget-entry-card {
        width: 19em !important;
    }

    .is-list-horizontal.large-thumb .widget-entry-card-link, 
    .is-list-horizontal.large-thumb-on .widget-entry-card-link {
        max-width: 350px !important; /* 幅を広げるための設定 */
        flex-shrink: 0 !important; /* Flexboxで縮まないようにする */
    }

    /* 3. Cocoonの隙間調整を上書き */
    .new-entry-card-link.widget-entry-card-link.a-wrap.entry-card-wrap.swiper-slide {
        width: 350px !important; /* 固定幅を再設定 */
        margin-right: 10px !important; /* 右側の隙間を適切に設定 */
    }

    .widget-entry-card-content {
        margin-left: 0 !important;
    }

    /* 4. 3列目のマージン調整 (Cocoonの横並びデザインの調整) */
    .list.ect-3-columns .new-entry-card-link:nth-child(3n) {
        margin-right: 0 !important;
    }
}

/* モバイル版 (834px以下) ではカスタムCSSを解除 */
@media screen and (max-width: 834px) {
    /* モバイルではSwiper.jsが幅を計算するため、カスタムな幅指定をすべて解除 */
    .widget-entry-card, 
    .new-entry-card-link,
    .swiper-wrapper,
    .swiper-slide {
        width: auto !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* Swiper.jsが計算するtransformを阻害する可能性があるため、無効化を解除 */
        /* transform: none !important; の記述をモバイル側では避ける */
    }
}
/*新着記事カードサイズ調整 END*/



/*特定のページのみパンくず非表示*/
body.page-id-152 .breadcrumb,
body.page-id-164 .breadcrumb,
body.page-id-166 .breadcrumb,
body.page-id-168 .breadcrumb {
    display: none;
}



/*全固定ページで公開日・更新日非表示*/
.page .date-tags {
display: none;
}


/************************************
** ■次の記事／前の記事のフォント
************************************/
.prev-post.a-wrap.cf,
.next-post.a-wrap.cf{
  font-size: 16px; /*フォントサイズ*/
  font-weight:bold; /*文字強調*/
}
/* スマホでのフォントサイズ */
@media screen and (max-width: 480px){
  .prev-post.a-wrap.cf,
  .next-post.a-wrap.cf{
    font-size: 12px; /*フォントサイズ*/
    font-weight:bold; /*文字強調*/
  }
}



/* Cocoon テーマ: コンテンツ下部エリアの最大幅をメインカラム（600px）に合わせるCSS */
.content-bottom {
    /* 親要素の幅を600pxに制限 */
    max-width: 600px; 
    
    /* 左右の余白を自動で調整し、コンテンツを中央に配置 */
    margin-left: auto;
    margin-right: auto;
    
    /* 必要に応じて、コンテンツの左右に少しパディングを持たせる（任意） */
    /* padding: 0 15px; */
}




/*おすすめ記事カードサイズ調整 START*/

/*おすすめ記事カードサイズ調整 END*/