@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){
	  .footer-widgets{ display:block !important; }
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	  .footer-widgets{ display:block !important; }
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 検索フォーム全体の横並び設定 */
.custom-search-form {
  display: flex;         /* 横並びにする */
  gap: 6px;              /* 入力欄とボタンの間隔 */
  margin-bottom: 1em;    /* フォーム下に余白を追加 */
}

/* 検索入力欄のデザイン */
.custom-search-field {
  flex: 1;               /* 残りの横幅を全て使う */
  padding: 6px 10px;     /* 内側の余白 */
  border: 1px solid #ccc;/* グレーの枠線 */
  border-radius: 4px;    /* 角を丸める */
}

/* 検索ボタンのデザイン */
.custom-search-button {
  padding: 6px 12px;         /* 内側の余白 */
  background-color: #444;    /* 濃いグレーの背景 */
  color: white;              /* 文字色を白に */
  border: none;              /* 枠線なし */
  border-radius: 4px;        /* 角を丸める */
  cursor: pointer;           /* ホバー時にポインタ表示 */
}

/* 広告全体を包むラッパーのスタイル設定 */
.fanza-ad-wrapper {
  display: flex;           /* 子要素を横並びに配置 */
  flex-wrap: wrap;         /* 複数行に折り返し可能にする */
  justify-content: center; /* 中央寄せにする */
  gap: 20px;               /* 各カードの間に余白を作る */
  margin-top: 20px;        /* 上部のマージンを追加 */
}

/* 個別の広告カードのスタイル */
.fanza-ad-card {
  flex: 1 1 45%;                 /* カード幅を2列に収めやすい比率に設定 */
  max-width: 330px;             /* 最大幅を320pxに制限 */
  min-width: 280px;             /* 最小幅を280pxに固定（崩れ防止） */
  background: #fff;             /* 背景を白に設定 */
  padding: 10px;                /* 内側の余白 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 軽いシャドウで立体感を出す */
  box-sizing: border-box;       /* パディングを含めてサイズを計算 */
  border-radius: 8px;           /* 角を丸くする */
  text-align: center;           /* 中のテキストや画像を中央揃え */
}

/* 画面幅が768px以下（スマホ）の場合、1列レイアウトに変更 */
@media screen and (max-width: 768px) {
  .fanza-ad-card {
    flex: 1 1 100%;     /* 幅を100%に広げる */
    max-width: 100%;    /* 最大幅も100%にして横いっぱいに表示 */
  }
}

/* ========================================
   ▼ 人気記事ウィジェット（#popular-entry-cards） カスタムCSS
   目的：5列×4行で20件表示 /
/* Swiperのスライド表示を無効化し、5列のグリッドに */
.swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);  /* 5列 */
  gap: 20px;
  overflow: visible !important;
  width: 100% !important;
  transform: none !important;
}

/* 各人気記事のカードサイズ調整 */
.widget-entry-card-link {
  width: 100% !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* モバイル時は2列または1列に調整 */
@media screen and (max-width: 768px) {
  .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);  /* モバイルは2列 */
  }
}

/* グリッドの余白をゼロに調整 */
.swiper-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* 人気記事カードの間隔をなくす */
.widget-entry-card-link {
  margin: 0 !important;
  padding: 0 !important;
}

/* 矢印ナビゲーションを非表示に */
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* グリッドレイアウトに合わせて余白を詰める */
#popular-entry-cards .swiper-container {
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width: 480px) {
  #popular-entry-cards .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* 2列 */
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #popular-entry-cards .swiper-slide {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: span 1 !important;
  }

  #popular-entry-cards .popular-entry-card-link {
    height: auto !important;
  }

  #popular-entry-cards .popular-entry-card-thumb {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}
/* ヘッダー画像を全体表示 */
#site-header {
    height: auto !important;
    min-height: unset !important;
}
#site-header-image {
    height: auto !important;
}
#site-header-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: unset !important;
}
/* ヘッダーのサイトタイトル・キャッチフレーズを非表示 */
#site-header .site-name,
#site-header .site-description,
#site-header .header-title {
    display: none !important;
}