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

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

/* ==========================================================================
   楽天商品検索アプリ（ACF連動）専用スタイル【編集用パーツ】
   ========================================================================== */
/* アプリ全体のコンテナ外枠 */
.rakuten-app-container { 
    margin: 40px auto !important; 
    padding-top: 30px !important; 
    border-top: 2px dashed #e0e0e0 !important; 
    clear: both !important; 
    max-width: 1200px; 
}

/* アプリのタイトル（注目のおすすめ商品一覧） */
.rk-app-title { 
    font-size: 20px !important; 
    font-weight: bold !important; 
    margin-bottom: 20px !important; 
    padding-left: 10px !important; 
    border-left: 4px solid #bf0000 !important; /* 左側の縦線の色 */
    color: #333 !important; 
    text-align: left !important; 
    line-height: 1.4 !important; 
}

/* 商品を並べるグリッド構造 */
.rk-item-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; 
    gap: 20px !important; 
    margin-top: 20px !important; 
    padding: 0 !important; 
}

/* 商品カード1枚ごとの装飾 */
.rk-item-card { 
    border: 1px solid #e0e0e0 !important; 
    padding: 15px !important; 
    border-radius: 8px !important; 
    text-align: center !important; 
    display: flex !important; 
    flex-direction: column !important; 
    background: #fff !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; 
    box-sizing: border-box !important; 
}

/* 商品画像 */
.rk-item-card img { 
    max-width: 100% !important; 
    height: 160px !important; 
    object-fit: contain !important; 
    margin: 0 auto 10px !important; 
    display: block !important; 
}

/* 商品タイトル（2行〜3行で綺麗に高さを統一） */
.rk-item-card h3 { 
    font-size: 13px !important; 
    line-height: 1.5 !important; 
    height: 4.5em !important; 
    overflow: hidden !important; 
    margin: 10px 0 !important; 
    text-align: left !important; 
    color: #333 !important; 
    font-weight: normal !important; 
}

/* 価格表示 */
.rk-price { 
    color: #bf0000 !important; /* 値段の文字色 */
    font-weight: bold !important; 
    font-size: 16px !important; 
    margin: auto 0 15px !important; 
    text-align: center !important; 
}

/* 楽天ボタン */
.rk-buy-btn { 
    background: #bf0000 !important; /* ボタンの通常背景色 */
    color: #fff !important; 
    text-decoration: none !important; 
    padding: 8px !important; 
    border-radius: 4px !important; 
    font-weight: bold !important; 
    display: block !important; 
    font-size: 13px !important; 
    transition: background 0.2s !important; 
    margin-top: auto !important; 
}

/* 楽天ボタン：ホバー時 */
.rk-buy-btn:hover { 
    background: #990000 !important; /* マウスを乗せた時の色 */
}

/* ページネーションの外枠 */
.rk-pagination { 
    margin-top: 40px !important; 
    display: flex !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    flex-wrap: wrap !important; 
    padding: 0 !important; 
}

/* ページ番号ボタン */
.rk-page-btn { 
    padding: 6px 14px !important; 
    border: 1px solid #ccc !important; 
    background: #fff !important; 
    cursor: pointer !important; 
    border-radius: 4px !important; 
    color: #333 !important; 
}

/* 現在選択されているページ番号 */
.rk-page-btn.active { 
    background: #bf0000 !important; /* 選択中ボタンの背景色 */
    color: #fff !important; 
    border-color: #bf0000 !important; 
    pointer-events: none !important; 
}

.rk-page-btn:hover:not(.active) { 
    background: #f5f5f5 !important; 
}

/* ローディング・エラーメッセージの枠 */
.rk-status-msg { 
    text-align: center !important; 
    padding: 40px 20px !important; 
    font-size: 15px !important; 
    border: 1px dashed #ccc !important; 
    background: #fafafa !important; 
    border-radius: 6px !important; 
    color: #666 !important; 
    width: 100% !important; 
}

.rk-error-msg { 
    color: #bf0000 !important; 
    background: #fff5f5 !important; 
    border-color: #ffcccc !important; 
}

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

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

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