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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.movie_box{
  margin-bottom: 40px;
}

/* 3x3のグリッド設定 */
.image-grid {
    display: grid;
    /* 3列に分割（1:1:1の比率） */
    grid-template-columns: repeat(3, 1fr); 
    /* 画像同士の隙間（お好みで調整） */
    gap: 10px; 
    width: 100%;
    margin-bottom: 2em;
}

/* スマホでは2列にしたい場合（レスポンシブ） */
@media screen and (max-width: 480px) {
    .image-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 詳細・購入ボタンの立体設定 */
.detail-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    padding: 18px 25px;
    background: #e60012; /* DMM/FANZAレッド */
    color: #fff !important;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    border-radius: 10px;
    /* ボタンの厚み（立体感） */
    border-bottom: 6px solid #b3000e; 
    transition: all 0.1s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    position: relative;
}

/* 右側の矢印アイコン */
.detail-button .arrow {
    margin-left: 12px;
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

/* マウスを置いた時（ホバー） */
.detail-button:hover {
    background: #ff1a2b;
    transform: translateY(2px); /* 少し沈む */
    border-bottom: 4px solid #b3000e; /* 厚みが減る */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* ホバー時に矢印をピコッと右に動かす */
.detail-button:hover .arrow {
    transform: translateX(5px);
}

/* クリックした瞬間（押し込む動き） */
.detail-button:active {
    transform: translateY(6px); /* 完全に押し込む */
    border-bottom: 0px solid transparent; /* 厚みをゼロに */
    box-shadow: none;
}

.caution{
  font-size: 12px;
}

/* サイドバーのメニューをタグクラウド風にする */
.widget_nav_menu ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* 横に並べて折り返す */
    gap: 8px; /* タグ同士の間隔 */
}

.widget_nav_menu ul li {
    margin: 0;
}

.widget_nav_menu ul li a {
    display: inline-block;
    padding: 4px 12px;
    background: #fff; /* タグの背景色 */
    color: #333; /* 文字色 */
    text-decoration: none;
    font-size: 13px;
    border-radius: 2px; /* 角丸 */
    border: 1px solid #999;
    transition: 0.3s;
}

.widget_nav_menu ul li a::before {
    content: "\f02b"; /* タグのアイコン */
    font-family: "Font Awesome 5 Free"; /* Cocoon標準のフォント指定 */
    font-weight: 900; /* アイコンを正しく表示するために必須 */
    margin-right: 5px; /* アイコンと文字の間の隙間 */
    color: #333; /* アイコンの色（お好みで） */
}

.widget_nav_menu ul li a:hover {
    background: #efefef; /* ホバー時の色 */
    color: #333;
    border-color: #999;
}

.entry-categories-tags {
    margin-bottom:30px;
}

.custom-tax-tree{
    font-size: 18px;
}

.tax-child-list{
    margin-bottom: 20px;
}

/* 一覧タイトル下のdmm_commentスタイル */
.entry-card-title{
    margin-top: 10px;
}

.dmm-comment-box {
  font-size: 0.85em;
  color: #666666; /* 文字色（赤系などお好みで） */
  margin: 4px 0 6px 0;
  line-height: 1.4;
}

.card-custom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.card-custom-tag {
  background-color: #333333;
  color: #ffffff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

.card-custom-tag i {
  font-size: 10px;
}

/* 1. 既存の炎アイコン（fa-fire）の表示を消す */
.widget_popular_entries .widget-title-icon.fa-fire,
.widget_new_popular_entries .widget-title-icon.fa-fire {
  display: none !important;
}

/* 2. タイトル先頭に Font Awesome 5 の王冠を表示 */
.widget_popular_entries .widget-title::before,
.widget_new_popular_entries .widget-title::before {
  content: "\f521" !important;                 /* fa-crown */
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;                 /* Solidスタイル */
  color: #e6b422 !important;                  /* ゴールド色 */
  margin-right: 2px !important;
  display: inline-block !important;
}

h2.related-entry-heading{
    border-bottom:1px solid #333 !important;
}

/* -----------------------------------
   関連記事カード同士の間隔（20px強制化）
----------------------------------- */
/* 表示形式（カード/リスト/ミニカード）に対応する親コンテナをFlex化 */
.related-entry-card-list,
.related-entry-cards,
.related-entry-card-wrap-list,
.related-entries {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important; /* 縦の間隔を強制的に20pxに固定 */
}

/* 個別カードの余白干渉をクリア */
.related-entry-card-wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* gapで制御するためmarginをリセット */
}

/* -----------------------------------
   カードホバー時のガクつき解消CSS
----------------------------------- */
.entry-card-wrap,
.related-entry-card-wrap {
  border: 1px solid #e5e5e5 !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  border-color: #e0cb90 !important;
  background-color: rgb(250, 248, 238) !important;
  outline: none !important;
}

.related-entry-card-wrap a,
.entry-card-wrap a {
  border: none !important;
}

/* -----------------------------------
   キャンペーン
----------------------------------- */

.campaign_box{
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 2px dotted #e0cb90;
  background-color: #fff8e6;
  border-radius: 6px;
  margin: 80px 10px 0;
}

.campaign_box p{
  margin-bottom: 0;
  font-weight: bold;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
#content{
  width: 96%;
  margin: 0 auto;
}
#main{
  padding: 16px;
}
.entry-card-content{
  padding:0 4px;
}
div.sidebar{
  padding:16px;
}

}