@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){
  /*必要ならばここにコードを書く*/
}

/********************
 * Amazon楽天Yahoo!ボタン
 * **********************/
/* カード */
.shop-card{
  display:flex;
  gap:20px;
  margin:20px 0;
  align-items:flex-start;
}

/* 画像 */
.shop-image{
  flex:none;
}

.shop-image img{
  display:block;
  height:auto;
  max-width:480px; /* 必要なら制限 */
  border-radius:6px;
}

/* ボタンエリア */
.shop-buttons{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ボタン共通 */
.shop-buttons a{
  display:block;
  padding:14px;
  border-radius:6px;
  color:#fff;
  font-weight:700;
  text-align:center;
  text-decoration:none;
}

/* 色 */
.btn-amazon{ background:#FF9900; }
.btn-rakuten{ background:#bf0000; }
.btn-yahoo{ background:#ff0033; }

/* 画像なし */
.shop-card.no-image .shop-buttons{
  flex-direction:row;
}

.shop-card.no-image .shop-buttons a{
  flex:1;
}

/* スマホ */
@media (max-width:600px){

.shop-card{
  flex-direction:column;
}

.shop-image img{
  max-width:100%;
}

.shop-buttons{
  flex-direction:column;
}

}