/*
Template: jin
Theme Name: jin-child
Author: CrossPiece
Version: 1.00
*/

/* ============================================================
   子カテゴリーセクション専用スタイル
   
   目的:
   - JINテーマの.post-list-magはトップページタブ機能用に
     opacity: 0.2, width: 25%が設定されているため、
     カテゴリーページの子カテゴリー表示ではオーバーライドが必要
   
   修正内容:
   - 透明度を完全に不透明に
   - 幅を100%に展開
   - Flexboxグリッドレイアウトを適用
   ============================================================ */

/* 
   子カテゴリーセクションのコンテナ
   - JINのデフォルトスタイルをオーバーライド
   - 2カラムグリッドレイアウトを実現
*/
.child-categories-section .post-list,
.child-categories-section .post-list-mag,
.child-categories-section .post-list-mag-sp1col {
    /* JINデフォルトのopacity: 0.2をオーバーライド */
    opacity: 1 !important;
    
    /* JINデフォルトのwidth: 25%をオーバーライド */
    width: 100% !important;
    
    /* floatレイアウトを解除 */
    float: none !important;
    
    /* Flexboxグリッドレイアウトを適用 */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    
    /* 余白調整 */
    padding: 0 !important;
}

/* 
   各カードアイテムのスタイル
   - 2列レイアウト（PCでは48.5%幅）
   - モバイルでも2列を維持
*/
.child-categories-section .post-list-item {
    /* 2カラムレイアウト用の幅（JINのデフォルトと同じ） */
    width: 48.5% !important;
    margin-bottom: 20px !important;
}

/* モバイル用レスポンシブ調整 */
@media (max-width: 767px) {
    .child-categories-section .post-list-item {
        width: 48.4% !important;
        margin-bottom: 15px !important;
    }
    
    /* 奇数番目のアイテムに右マージン */
    .child-categories-section .post-list-item:nth-child(2n-1) {
        margin-right: 3% !important;
    }
}

/* 
   カードリンクのスタイル
   - 白い背景とシャドウを確保
   - ホバー時のアニメーション
*/
.child-categories-section .post-list-link {
    background-color: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18) !important;
    display: block !important;
    overflow: hidden !important;
}

/* ホバー時の浮き上がりエフェクト */
.child-categories-section .post-list-link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 
   カード内部構造のスタイル
   - サムネイルとメタ情報を縦に配置
*/
.child-categories-section .post-list-inner {
    display: block !important;
}

/* サムネイル画像 */
.child-categories-section .post-list-thumb {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}

.child-categories-section .post-list-thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* メタ情報エリア */
.child-categories-section .post-list-meta {
    width: 100% !important;
    padding: 15px !important;
}

/* タイトル */
.child-categories-section .post-list-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    color: #333 !important;
}

/* 日付・記事数 */
.child-categories-section .post-list-date {
    font-size: 12px !important;
    color: #888 !important;
}

/* 説明文 */
.child-categories-section .post-list-desc {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
}