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

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

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

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

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

/* === PRODUCT-BOX START (商品リンクボックス 楽天メイン/Amazon後付け) === */
/* 全サイト共通 / cocoon-child-master/style.css の末尾に追記して使う         */
/* このSTART〜ENDのブロックごと差し替えれば冪等に再展開できる               */
.item-box{
  display:flex; gap:16px;
  border:1px solid #e3e3e3; border-radius:12px;
  padding:16px; margin:24px 0; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.item-thumb{flex-shrink:0;}
.item-thumb img{
  width:120px; height:120px; object-fit:contain;
  border-radius:8px; background:#fafafa; border:1px solid #f0f0f0;
}
.item-detail{flex:1; min-width:0; display:flex; flex-direction:column;}
.item-title a{
  font-size:15px; font-weight:bold; color:#333;
  text-decoration:none; line-height:1.5;
}
.item-title a:hover{color:#bf0000;}
.item-price{color:#cc0000; font-weight:bold; font-size:16px; margin:8px 0 12px;}
.item-price small{font-weight:normal; font-size:12px; color:#999;}
.item-btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto;}
.item-btns a{
  flex:1; min-width:130px; text-align:center;
  padding:10px 16px; border-radius:8px;
  color:#fff; font-weight:bold; text-decoration:none; font-size:14px;
  transition:opacity .2s, transform .1s;
}
.item-btns a:hover{opacity:.85; transform:translateY(-1px);}
.btn-rakuten{background:#bf0000;}
.btn-amazon{background:#ff9900;}
@media(max-width:500px){
  .item-box{flex-direction:column; align-items:center; text-align:center;}
  .item-thumb img{width:160px; height:160px;}
  .item-detail{width:100%;}
  .item-btns a{min-width:0;}
}
/* === PRODUCT-BOX END === */