@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: 20px;
    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;
}

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

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

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


/* 【最優先】人気記事の順位を右上に強制移動 */
.widget_popular_entries .entry-card {
    position: relative !important;
}

/* 順位バッジの強制上書き */
.widget_popular_entries .card-thumb .badge {
    left: auto !important;   /* 左固定を解除 */
    right: 0 !important;      /* 右端に固定 */
    top: 0 !important;        /* 上端に固定 */
    bottom: auto !important;
    background-color: #ff5722 !important; /* オレンジ */
    color: #fff !important;
    display: block !important; /* 強制表示 */
    z-index: 10 !important;
}