@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; */
}




/************************************
** ウィジェットの「コンテンツ下部」のモバイル版にmainと同じpaddingを付ける
************************************/
/* 中にある各ウィジェットの最大幅を600px（mainの幅）に揃えて中央寄せ */
.content-bottom-in .widget {
    max-width: 600px !important; 
    margin-left: 0 !important;   /* 左寄せにしてpaddingと連動させる */
    margin-right: auto !important;
    margin-bottom: 10px;         /* ウィジェット間の上下の隙間 */
}
/* スマホ表示での調整 */
@media screen and (max-width: 480px) {
    .content-bottom-in.wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}




/************************************
** 検索バー用のスタイル
************************************/
/* 検索結果ページで、強制的にリストを表示させる */
.search-results #list {
    display: flex !important; /* Cocoonのカード型ならflexまたはgrid */
}
/* もし「検索結果がありません」というメッセージが出ていたらそれも消す（任意） */
.search-results .not-found {
    display: none !important;
}
/* 検索結果ページのカード左上のラベルだけを非表示にする */
.search-results .cat-label {
    display: none !important;
}
.header-in {
  position: relative;
}

.header-in .search-box {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  width: 280px;
  transform: translateY(-50%);
}

.header-in input[type="text"] {
  padding: 8px 14px 8px 40px;
  font-size: 14px;
  background: #edf6f9;
  border: 1px solid #9fcde1;
  border-radius: 16px 16px 16px 16px / 50% 50% 50% 50%;
}

.header-in .search-submit {
  left: 3px;
  right: auto;
  color: #378cb0;
}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .header-in .search-box {
    display: none;
  }
}
/* クラス名だけで直接指定し、最優先(!important)で消す */
.posts-not-found {
    display: none !important;
}
/* もし main タグの直下にある場合も考慮 */
main#main > .posts-not-found {
    display: none !important;
}
/*検索バー用のスタイル END*/




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

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