@charset "UTF-8";

/*!
Theme Name: Cocoon Child - Deluxcombo Edition
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: Deluxcombo
Author URI: https://www.deluxcombo.com/
Template:   cocoon-master
Version:    0.0.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* アフィリエイトCTAボタン横並び修正 */
.entry-content div[style*="display:flex"] {
  flex-wrap: nowrap !important;
}
.entry-content div[style*="display:flex"] > a {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 8px !important;
  font-size: 0.9em !important;
  white-space: nowrap !important;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-content div[style*="display:flex"] > a {
    padding: 10px 4px !important;
    font-size: 0.8em !important;
  }
}


/* Product card buttons - Cocoon style matching */
.btn-amazon,
.btn-rakuten,
.btn-yahoo {
  display: inline-block;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid transparent;
  text-decoration: none;
  text-align: center;
  min-width: 130px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn-amazon {
  background-color: #f90 !important;
  color: #fff !important;
}
.btn-rakuten {
  background-color: #bf0000 !important;
  color: #fff !important;
}
.btn-yahoo {
  background-color: #4ca82b !important;
  color: #fff !important;
}
.btn-amazon:hover,
.btn-rakuten:hover,
.btn-yahoo:hover {
  opacity: 0.8;
  color: #fff !important;
  text-decoration: none;
}
.product-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mobile: product card + buttons vertical layout */
@media screen and (max-width: 768px) {
  div[style*="display:flex"][style*="align-items:center"],
  div[style*="display: flex"][style*="align-items: center"] {
    flex-direction: column !important;
    text-align: center;
  }
  div[style*="display:flex"][style*="align-items:center"] img,
  div[style*="display: flex"][style*="align-items: center"] img {
    margin: 0 auto;
  }
  .product-buttons {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .btn-amazon,
  .btn-rakuten,
  .btn-yahoo {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    margin: 0;
  }
}

.product-buttons br {
  display: none;
}

/* Table header fix - prevent Cocoon from overriding inline colors */
.entry-content table th {
  color: inherit;
}
.entry-content table th[style*="background"] {
  color: #fff !important;
}
.entry-content table th[style*="color"] {
  color: inherit;
}