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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ボックスメニュー共通 */
.box-menu-icon {
  display: none;
}

.box-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #dd4a68;
  min-height: 70px;
}

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/

/* 順位数表示のカスタマイズ */
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before {
  border-radius: 50%;
  top: -4px;
  left: -4px;
  width: 14px;
  height: 14px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
}

/* 各順位の数字位置 */
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
  line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {
  background: #d0d0d1;
  line-height: 14px;
}

/* サイドバー人気記事のタイトル余白 */
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content {
  padding: 0.2em 0 0 0.8em !important;
  letter-spacing: 0.8px;
}

/* サイドバー人気記事カード間余白 */
.sidebar a.popular-entry-card-link.a-wrap {
  margin-bottom: 8px;
}

/************************************
** サイドバー：ジャンル・女優ボタン
************************************/

.genre-button-grid,
.actress-button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid #e5e5e5;
  background: #fff;
}

.genre-button-item,
.actress-button-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 12px 8px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  color: #e84b7a;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  transition: .2s;
  text-align: center;
}

.genre-button-item:nth-child(2n),
.actress-button-item:nth-child(2n) {
  border-right: none;
}

.genre-button-item:hover,
.actress-button-item:hover {
  background: #fff5f8;
  color: #d93d6d;
}

/************************************
** 固定ページ：ジャンル一覧
************************************/

.genre-button-grid-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid #e5e5e5;
  background: #fff;
}

.genre-button-item-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 14px 10px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  color: #e84b7a;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  background: #fff;
  transition: .2s;
  text-align: center;
}

.genre-button-item-page:nth-child(4n) {
  border-right: none;
}

.genre-button-item-page:hover {
  background: #fff5f8;
  color: #d93d6d;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/* 1023px以下 */
@media screen and (max-width: 1023px) {
  /* 必要ならここに追加 */
}

/* 834px以下 */
@media screen and (max-width: 834px) {
  /* サイドバー：PC2列 → スマホ1列 */
  .genre-button-grid,
  .actress-button-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .genre-button-item,
  .actress-button-item {
    border-right: none;
  }

  /* 固定ページのジャンル一覧：4列 → 2列 */
  .genre-button-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }

  .genre-button-item-page:nth-child(4n) {
    border-right: 1px solid #e5e5e5;
  }

  .genre-button-item-page:nth-child(2n) {
    border-right: none;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  /* 必要ならここに追加 */
}