@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 0; 
    padding-top: 30px; 
    border-top: 2px dashed #e0e0e0; 
}

.rk-app-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #bf0000;
}

.rk-item-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
}

.rk-item-card { 
    border: 1px solid #e0e0e0; 
    padding: 15px; 
    border-radius: 8px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    background: #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.rk-item-card img { 
    max-width: 100%; 
    height: 160px; 
    object-fit: contain; 
    margin: 0 auto 10px; 
}

.rk-item-card h3 { 
    font-size: 13px; 
    line-height: 1.5; 
    height: 4.5em; 
    overflow: hidden; 
    margin: 10px 0; 
    text-align: left; 
    color: #333; 
}

.rk-price { 
    color: #bf0000; 
    font-weight: bold; 
    font-size: 16px; 
    margin: auto 0 15px; 
}

.rk-buy-btn { 
    background: #bf0000; 
    color: #fff !important; 
    text-decoration: none !important; 
    padding: 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    display: block; 
    font-size: 13px; 
    transition: background 0.2s;
}

.rk-buy-btn:hover { 
    background: #990000; 
}

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

.rk-page-btn { 
    padding: 6px 14px; 
    border: 1px solid #ccc; 
    background: #fff; 
    cursor: pointer; 
    border-radius: 4px; 
}

.rk-page-btn.active { 
    background: #bf0000; 
    color: #fff; 
    border-color: #bf0000; 
    pointer-events: none; 
}

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

/* ステータス・エラーメッセージ */
.rk-status-msg { 
    text-align: center; 
    padding: 40px 20px; 
    font-size: 15px; 
    border: 1px dashed #ccc; 
    background: #fafafa; 
    border-radius: 6px; 
}

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

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

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

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