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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ===================================================
 * スペック表・プレイ一覧・レシートバーのリンク＆バッジ装飾
 * =================================================== */

/* 1. スペック表：ジャンルタグチップ */
.specs-table td .ot-spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
}
.ot-tag-link {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: #5c4b37 !important;
    background-color: #f7f3ed;
    border: 1px solid #dcd3c5;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.ot-tag-link:hover {
    background-color: #ede2d2;
    border-color: #bfae97;
    color: #2b1f14 !important;
    transform: translateY(-1px);
}

/* 2. 著者・サークルのインラインテキストリンク（スペック表） */
.ot-spec-text-link {
    color: #2b1f14 !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.ot-spec-text-link:hover {
    color: #d97706 !important;
}

/* 3. 第3セクション：プレイ一覧チップ（リンク化対応） */
.ot-play-chip-box .ot-play-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ot-play-chip-box .play-chip {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #4b5563 !important;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.ot-play-chip-box .play-chip:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c !important;
    transform: translateY(-1px);
}

/* 4. まとめレシートバー内の著者・サークルリンク馴染ませ */
.ot-ticket-spec .ticket-meta .ot-spec-text-link {
    color: #5c4b37 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-weight: normal;
}
.ot-ticket-spec .ticket-meta .ot-spec-text-link:hover {
    color: #d97706 !important;
}

/* ===================================================
 * スペック表：ジャンル見出し（th）内の注記テキスト
 * =================================================== */
.specs-table th .specs-th-note {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: normal;
    color: #8c7e70;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* ===================================================
 * ジャンルタグ（スリムなカプセルボタン型・#なし）
 * 横幅を抑えて無駄な改行を防ぎつつ、押せる質感を維持
 * =================================================== */
.specs-table a.genre-tag {
    display: inline-flex;
    align-items: center;
    padding: 2.5px 7.5px; /* 余白をキュッと引き締めてスリム化 */
    margin: 2px 2px;
    font-size: 11px; /* 読みやすさを保ちつつコンパクトに */
    font-weight: 600;
    line-height: 1.3;
    border-radius: 9999px; /* カプセル型でボタンらしさをキープ */
    background: #ffffff;
    border: 1px solid #dcd3c3; /* 押し心地のある枠線 */
    color: #4a3e35;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* ホバー時に少し浮き上がり、色が変わる（押せるフィードバック） */
.specs-table a.genre-tag:hover {
    background: #fdfaf5;
    border-color: #8c7355;
    color: #1a1510;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

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

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

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