@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ====================================
   ポケカ図鑑 詳細ページ用デザイン
   ==================================== */

/* --- プレースホルダー（将来用） --- */
.pokeca-placeholder-box {
    background: #f7f7f7;
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 8px;
    color: #888;
    background-image: repeating-linear-gradient(45deg, #f7f7f7 0, #f7f7f7 10px, #eee 10px, #eee 20px);
}

/* --- メインエリア（画像とスペック） --- */
.pokeca-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.pokeca-image-area {
    flex: 0 0 100%;
    max-width: 400px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pokeca-image-area {
        flex: 0 0 40%;
    }
    .pokeca-info-area {
        flex: 1;
    }
}

.pokeca-main-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- スペック表 --- */
.pokeca-spec-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}
.spec-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.spec-row:last-child {
    border-bottom: none;
}
.spec-row dt {
    width: 30%;
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}
.spec-row dd {
    width: 70%;
    padding: 10px 15px;
    margin: 0;
    font-size: 0.95em;
}

/* タイプバッジ */
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    color: #fff;
    background: #555; /* デフォルト */
    margin-right: 5px;
}
/* 簡易的な色分け（必要に応じて追加） */
.type-草 { background: #78C850; }
.type-炎 { background: #F08030; }
.type-水 { background: #6890F0; }
.type-雷 { background: #F8D030; color:#333; }
.type-超 { background: #F85888; }
.type-闘 { background: #C03028; }
.type-悪 { background: #705848; }
.type-鋼 { background: #B7B7CE; color:#333; }
.type-妖 { background: #EE99AC; }
.type-竜 { background: #7038F8; }
.type-無色 { background: #A8A878; color:#333; }

/* --- ワザ一覧 --- */
.pokeca-sec-title {
    font-size: 1.2em;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.attack-item {
    border-bottom: 1px dashed #ddd;
    padding: 15px 0;
}
.attack-item:last-child {
    border-bottom: none;
}
.attack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.attack-name {
    font-weight: bold;
    font-size: 1.1em;
    flex: 1;
    margin: 0 10px;
}
.attack-damage {
    font-weight: bold;
    font-size: 1.2em;
}
.attack-text {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
}
.attack-cost {
    font-family: monospace;
    font-weight: bold;
    color: #666;
}

/* --- 特殊ルール --- */
.pokeca-rule-box {
    border: 1px solid #cce5ff;
    background-color: #e6f2ff;
    color: #004085;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 0.85em;
    font-weight: bold;
}

/* --- サブテーブル（弱点など） --- */
.pokeca-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.pokeca-sub-table th {
    background: #f0f0f0;
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
}
.pokeca-sub-table td {
    text-align: center;
    padding: 8px;
    border: 1px solid #ddd;
}

/* モバイル調整 */
@media (max-width: 480px) {
    .attack-header {
        flex-wrap: wrap;
    }
    .attack-damage {
        margin-left: auto;
    }
}

/* ====================================
   レイアウト修正（自動幅調整 ＆ 背景色変更）
   ★カード詳細(single-pokeca) と パック詳細(single-pokeca_pack) の両方に適用
   ==================================== */

/* --- 共通：メイン記事エリアの背景を白くする --- */
.single-pokeca .l-main_content,
.single-pokeca_pack .l-main_content {   /* ←★ここを追加しました */
    background-color: #fff; /* 背景を白に */
    padding: 30px 40px;     /* 内側に余白 */
    border-radius: 8px;     /* 角丸 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 影 */
}

/* スマホでは余白を少し狭くする */
@media (max-width: 599px) {
    .single-pokeca .l-main_content,
    .single-pokeca_pack .l-main_content {
        padding: 20px 20px;
    }
}

/* --- PCサイズ（960px以上）のレイアウト --- */
@media (min-width: 960px) {
    /* コンテナを横並びにする */
    .single-pokeca .l-content,
    .single-pokeca_pack .l-content {      /* ←★ここを追加しました */
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* メイン記事：残りの幅をすべて埋める */
    .single-pokeca .l-main_content,
    .single-pokeca_pack .l-main_content { /* ←★ここを追加しました */
        flex: 1;
        min-width: 0;
        width: auto;
        margin-right: 40px; /* サイドバーとの隙間を確保 */
    }
    
    /* サイドバー */
    .l-sidebar {
        width: 300px;
        flex-shrink: 0;
        margin-top: 0 !important;
    }
}

/* --- スマホ・タブレット（959px以下）のレイアウト --- */
@media (max-width: 959px) {
    .single-pokeca .l-content,
    .single-pokeca_pack .l-content {      /* ←★ここを追加しました */
        display: block;
    }
    .single-pokeca .l-main_content,
    .single-pokeca_pack .l-main_content { /* ←★ここを追加しました */
        width: 100%;
        margin-right: 0;
    }
    .l-sidebar {
        width: 100%;
        margin-top: 40px;
    }
}

/* ====================================
   ポケカ図鑑 デザイン修正版
   ==================================== */

/* --- エネルギーアイコン --- */
.cost-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;  /* 少し大きくしました */
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    margin-right: 3px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.1);
    line-height: 1; /* 文字の縦位置調整 */
}

/* 属性別カラー（無色を追加） */
.icon-grass { background: #78C850; }
.icon-fire { background: #F08030; }
.icon-water { background: #6890F0; }
.icon-electric { background: #F8D030; color: #333; }
.icon-psychic { background: #F85888; }
.icon-fighting { background: #C03028; }
.icon-dark { background: #705848; }
.icon-metal { background: #B7B7CE; color: #333; }
.icon-fairy { background: #EE99AC; }
.icon-dragon { background: #7038F8; }
.icon-normal { background: #A8A878; color: #333; }

/* その他のデザイン（前回同様） */
.pokeca-placeholder-box {
    background: #f7f7f7;
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 8px;
    color: #888;
}
.pokeca-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}
.pokeca-image-area {
    flex: 0 0 100%;
    max-width: 400px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pokeca-image-area { flex: 0 0 40%; }
    .pokeca-info-area { flex: 1; }
}
.pokeca-main-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pokeca-spec-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
}
.spec-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
    width: 30%;
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}
.spec-row dd {
    width: 70%;
    padding: 10px 15px;
    margin: 0;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 2px;
}
.type-grass { background: #78C850; }
.type-fire { background: #F08030; }
.type-water { background: #6890F0; }
.type-electric { background: #F8D030; color: #333; }
.type-psychic { background: #F85888; }
.type-fighting { background: #C03028; }
.type-dark { background: #705848; }
.type-metal { background: #B7B7CE; color: #333; }
.type-fairy { background: #EE99AC; }
.type-dragon { background: #7038F8; }
.type-normal { background: #A8A878; color: #333; }

.pokeca-sec-title {
    font-size: 1.3em;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 20px;
    margin-top: 0;
}
.attack-item {
    border-bottom: 1px dashed #ddd;
    padding: 15px 0;
}
.attack-item:last-child { border-bottom: none; }
.attack-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.attack-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-right: auto;
}
.attack-damage {
    font-weight: bold;
    font-size: 1.3em;
    margin-left: 10px;
}
.attack-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}
.pokeca-rule-box {
    border: 2px solid #cce5ff;
    background-color: #f0f7ff;
    color: #004085;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 0.9em;
}
.pokeca-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: fixed;
}
.pokeca-sub-table th {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 8px;
    border: 1px solid #333;
}
.pokeca-sub-table td {
    text-align: center;
    padding: 12px 8px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

/* ====================================
   レイアウト修正（自動幅調整版）
   ==================================== */

/* PCサイズ（960px以上）のとき */
@media (min-width: 960px) {
    /* 1. コンテナを横並びにする */
    .single-pokeca .l-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* 上揃え */
    }

    /* 2. メイン記事：残りの幅をすべて埋める（自動調整） */
    .single-pokeca .l-main_content {
        flex: 1;       /* ★ここがポイント：余った幅を自動で使う */
        min-width: 0;  /* コンテンツへのはみ出し防止 */
        width: auto;   /* 固定幅を解除 */
        margin-right: 40px; /* サイドバーとの隙間 */
    }
    
    /* 3. サイドバー：幅を固定して縮まないようにする */
    .l-sidebar {
        width: 300px;  /* 好きな幅（300pxが一般的） */
        flex-shrink: 0; /* 絶対に縮めない */
        margin-top: 0 !important; /* 余計なマージンを消す */
    }
}

/* スマホ・タブレット（959px以下）のとき */
@media (max-width: 959px) {
    .single-pokeca .l-content {
        display: block; /* 縦並び */
    }
    .single-pokeca .l-main_content {
        width: 100%;
        margin-right: 0;
    }
    .l-sidebar {
        width: 100%;
        margin-top: 40px;
    }
}


/* ====================================
   画像アイコンの設定
   ==================================== */
.type-icon-img {
    width: 25px;       /* アイコンのサイズ */
    height: 25px;
    vertical-align: middle; /* 文字と高さを合わせる */
    margin-right: 2px;
    object-fit: contain; /* 縦横比を崩さない */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* 軽く影をつける */
    border-radius: 50%;
}

/* スペック表の中のアイコン調整 */
.spec-row dd .type-icon-img {
    margin-right: 5px;
    width: 28px;
    height: 28px;
}

/* 弱点・抵抗力テーブル内の整列 */
.u-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-ml-5 {
    margin-left: 5px;
}


/* ====================================
   その他のデザイン（前回と同じ）
   ==================================== */
.pokeca-placeholder-box {
    background: #f7f7f7;
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 8px;
    color: #888;
}
.pokeca-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}
.pokeca-image-area {
    flex: 0 0 100%;
    max-width: 400px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .pokeca-image-area { flex: 0 0 40%; }
    .pokeca-info-area { flex: 1; }
}
.pokeca-main-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pokeca-spec-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
}
.spec-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
    width: 30%;
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}
.spec-row dd {
    width: 70%;
    padding: 10px 15px;
    margin: 0;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.pokeca-sec-title {
    font-size: 1.3em;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 20px;
    margin-top: 0;
}
.attack-item {
    border-bottom: 1px dashed #ddd;
    padding: 15px 0;
}
.attack-item:last-child { border-bottom: none; }
.attack-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.attack-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-right: auto;
    margin-left: 10px;
}
.attack-damage {
    font-weight: bold;
    font-size: 1.3em;
    margin-left: 10px;
}
.attack-text {
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
}
.pokeca-rule-box {
    border: 2px solid #cce5ff;
    background-color: #f0f7ff;
    color: #004085;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 0.9em;
}
.pokeca-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    table-layout: fixed;
}
.pokeca-sub-table th {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 8px;
    border: 1px solid #333;
}
.pokeca-sub-table td {
    text-align: center;
    padding: 12px 8px;
    border: 1px solid #ddd;
    vertical-align: middle;
}

/* ====================================
   特性（Tokusei）のデザイン
   ==================================== */
.pokeca-ability-list {
    margin-bottom: 30px;
}
.ability-item {
    border-bottom: 1px dashed #ddd;
    padding: 15px 0;
}
.ability-item:last-child {
    border-bottom: none;
}
.ability-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
/* 特性ラベル（赤いやつ） */
.ability-label {
    background-color: #d00; /* ポケモンカード風の赤 */
    color: #fff;
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
}
/* 特性名 */
.ability-name {
    font-weight: bold;
    font-size: 1.2em;
    color: #d00;
}
.ability-text {
    font-size: 0.95em;
    color: #333;
    line-height: 1.6;
}

/* ====================================
   デザイン調整（余白・ワザ・テキスト）
   ==================================== */

/* 1. タイトル下の余白を広げる */
.c-postTitle {
    margin-bottom: 30px !important; /* ギチギチ解消 */
    line-height: 1.4;
}

/* 2. ワザのダメージ位置修正 */
.attack-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    /* justify-content: space-between; を削除（デフォルトは左寄せ） */
}

.attack-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 10px;
    margin-right: 20px; /* ★ここでダメージとの距離を調整（右端に飛ばさない） */
}

.attack-damage {
    font-weight: bold;
    font-size: 1.3em;
    /* margin-left: auto; を削除して、名前のすぐ横に置く */
}

/* 3. カード本文（トレーナーズ詳細など）のデザイン */
.pokeca-body-text-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.body-text-p {
    font-size: 1em;
    line-height: 1.8;
    color: #333;
    margin-bottom: 10px;
}
.body-text-p:last-child {
    margin-bottom: 0;
}


/* ====================================
   以下、既存のスタイル（念のため保持）
   ==================================== */
/* レイアウト */
.single-pokeca .l-main_content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
@media (max-width: 599px) {
    .single-pokeca .l-main_content { padding: 20px 20px; }
}

@media (min-width: 960px) {
    .single-pokeca .l-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .single-pokeca .l-main_content {
        flex: 1;
        min-width: 0;
        width: auto;
        margin-right: 40px;
    }
    .l-sidebar {
        width: 300px;
        flex-shrink: 0;
        margin-top: 0 !important;
    }
}
@media (max-width: 959px) {
    .single-pokeca .l-content { display: block; }
    .single-pokeca .l-main_content { width: 100%; margin-right: 0; }
    .l-sidebar { width: 100%; margin-top: 40px; }
}

/* アイコン */
.type-icon-img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-right: 2px;
    object-fit: contain;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 50%;
}
.spec-row dd .type-icon-img { margin-right: 5px; width: 28px; height: 28px; }
.u-flex-center { display: flex; justify-content: center; align-items: center; }
.u-ml-5 { margin-left: 5px; }

/* 共通パーツ */
.pokeca-placeholder-box {
    background: #f7f7f7;
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 8px;
    color: #888;
}
.pokeca-detail-grid { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; }
.pokeca-image-area { flex: 0 0 100%; max-width: 400px; margin: 0 auto; }
@media (min-width: 768px) {
    .pokeca-image-area { flex: 0 0 40%; }
    .pokeca-info-area { flex: 1; }
}
.pokeca-main-img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.pokeca-spec-list { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 0; }
.spec-row { display: flex; border-bottom: 1px solid #eee; }
.spec-row:last-child { border-bottom: none; }
.spec-row dt { width: 30%; background: #f9f9f9; padding: 10px 15px; font-weight: bold; font-size: 0.9em; display: flex; align-items: center; }
.spec-row dd { width: 70%; padding: 10px 15px; margin: 0; font-size: 0.95em; display: flex; align-items: center; flex-wrap: wrap; }

.pokeca-sec-title { font-size: 1.3em; border-bottom: 2px solid #333; padding-bottom: 5px; margin-bottom: 20px; margin-top: 0; }
.attack-item { border-bottom: 1px dashed #ddd; padding: 15px 0; }
.attack-item:last-child { border-bottom: none; }
.attack-text { font-size: 0.95em; color: #444; line-height: 1.6; }
.pokeca-rule-box { border: 2px solid #cce5ff; background-color: #f0f7ff; color: #004085; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: bold; font-size: 0.9em; }

/* 特性 */
.pokeca-ability-list { margin-bottom: 30px; }
.ability-item { border-bottom: 1px dashed #ddd; padding: 15px 0; }
.ability-item:last-child { border-bottom: none; }
.ability-header { display: flex; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ability-label { background-color: #d00; color: #fff; font-size: 0.8em; padding: 3px 8px; border-radius: 4px; margin-right: 10px; font-weight: bold; letter-spacing: 0.05em; line-height: 1; }
.ability-name { font-weight: bold; font-size: 1.2em; color: #d00; }
.ability-text { font-size: 0.95em; color: #333; line-height: 1.6; }

.pokeca-sub-table { width: 100%; border-collapse: collapse; font-size: 0.9em; table-layout: fixed; }
.pokeca-sub-table th { background: #333; color: #fff; text-align: center; padding: 8px; border: 1px solid #333; }
.pokeca-sub-table td { text-align: center; padding: 12px 8px; border: 1px solid #ddd; vertical-align: middle; }

/* ====================================
   テキストアイコン・バッジ調整
   ==================================== */

/* 文中に埋め込まれるアイコン画像 [無色]など */
.text-inline-icon {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom; /* 文字のベースラインに合わせる */
    margin: 0 1px;
    object-fit: contain;
    display: inline-block;
}

/* タイプが画像の無い文字（グッズ、サポート等）だった場合のバッジ表示 */
.type-text-badge {
    display: inline-block;
    background-color: #555; /* デフォルトのグレー */
    color: #fff;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 5px;
    vertical-align: middle;
}

/* もし特定の文字列に色をつけたい場合は以下のように追加可能 */
/* 例: トレーナーズ系の色 */
/* .type-text-badge:contains("グッズ") はCSSではできないため、
   厳密にやるならPHP側でクラスを分ける必要がありますが、
   まずは統一デザインで見やすくします */

/* ====================================
   共通ルール文のデザイン
   ==================================== */
.pokeca-common-rules {
    border-top: 1px dashed #ddd; /* 上に区切り線 */
    padding-top: 10px;
    margin-top: 15px;
}

.common-rule-text {
    font-size: 0.85em; /* 少し小さめに */
    color: #666;       /* 少し薄い色で */
    margin-bottom: 5px;
    line-height: 1.5;
}

.rule-marker {
    color: #999;
    margin-right: 5px;
}

.u-mt-15 {
    margin-top: 15px;
}

/* ====================================
   パック詳細ページ：レイアウト完全調整版
   ==================================== */

/* --- 1. 全体の隙間調整 --- */
.single-pokeca_pack .pokeca-detail-grid {
    gap: 20px; /* 画像と表の隙間を狭くする（元は30px） */
    align-items: flex-start; /* 上揃え */
}

/* --- 2. 画像エリアの拡大設定 --- */
.single-pokeca_pack .pokeca-image-area {
    /* 画像エリアの幅制限を解除して広く取る */
    flex: 0 0 45%; 
    max-width: none;
    margin: 0;
}

@media (max-width: 768px) {
    .single-pokeca_pack .pokeca-image-area {
        flex: 0 0 100%; /* スマホは縦積み */
        margin-bottom: 20px;
    }
}

/* --- 3. 画像の余白カット（超拡大トリミング） --- */
.pack-img-wrapper {
    width: 100%;
    overflow: hidden; /* はみ出した余白をカット */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.pack-zoom-img {
    /* ★左右の余白を消すために160%まで拡大 */
    width: 160% !important; 
    max-width: none !important;
    height: auto !important;
    
    /* 拡大した分、中心がずれるのを補正して真ん中に持ってくる */
    margin-left: -30%; 
    margin-right: -30%;

    /* 白背景を透過 */
    mix-blend-mode: multiply;
    
    object-fit: contain;
}

/* --- 4. 公式サイトボタン（クール＆控えめグラデーション） --- */
.pack-official-btn-area {
    margin-top: 1.5em; /* 余白を広げました */
    text-align: right; /* 右寄せ */
}

.btn-official-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    
    /* ★修正：!important をつけて強制適用 & グラデーションを少し明るくして分かりやすく */
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
	/* もしくは、もっと青っぽくするなら以下を使ってください */
    /* background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important; */

    color: #fff !important;
    
    font-size: 0.95em;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0.05em;
    
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.btn-official-custom:hover {
    /* グラデーションの角度を変えてキラッとさせる */
    background: linear-gradient(135deg, #2c5364 0%, #203a43 50%, #0f2027 100%) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    opacity: 0.95;
}

/* アイコン */
.u-ml-5 {
    margin-left: 8px;
    font-size: 0.9em;
}

/* ====================================
   ポケカ図鑑＆パック図鑑：日付・投稿日を完全非表示
   ==================================== */

/* 1. カード詳細ページ (.single-pokeca) */
.single-pokeca .c-postTitle__date,       /* タイトル横の大きな日付 */
.single-pokeca .p-articleMeta__date,     /* 記事下のメタ情報の日付 */
.single-pokeca .c-postTitle__meta .c-date, /* タイトル下の投稿日・更新日 */
.single-pokeca .c-date,
.single-pokeca .p-articleMetas__times
{                 /* その他のあらゆる日付表示 */
    display: none !important;
}

/* 2. パック詳細ページ (.single-pokeca_pack) ★ここを追加 */
.single-pokeca_pack .c-postTitle__date,
.single-pokeca_pack .p-articleMeta__date,
.single-pokeca_pack .c-postTitle__meta .c-date,
.single-pokeca_pack .c-date,
.single-pokeca_pack .p-articleMetas__times
{
    display: none !important;
}

/* ついでに、日付を消したことで余白がおかしくなった場合の調整 */
.single-pokeca .c-postTitle__meta,
.single-pokeca_pack .c-postTitle__meta {
    margin-top: 5px;
}