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

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

/************************************
** h3の前の楽天商品表示用スタイル
************************************/
.my-rakuten-product-box {
    border: 1px solid #e0e0e0; /* 枠線 */
    border-radius: 8px; /* 角を丸くする */
    padding: 16px;
    margin: 0 0 2em; /* h3タグとの間に余白を持たせる */
    background-color: #f9f9f9; /* 少し背景色をつける */
}

/* 商品リンク全体（画像とタイトルを含む） */
.my-rakuten-product-box a.my-rakuten-product-link {
    display: flex; /* Flexboxを使い、画像とタイトルを横並びにする */
    align-items: center; /* 上下中央にそろえる */
    text-decoration: none; /* リンクの下線を消す */
    color: #333; /* 文字色を指定 */
    transition: opacity 0.2s; /* ホバー時のアニメーション */
}

/* リンクにマウスカーソルを乗せたとき */
.my-rakuten-product-box a.my-rakuten-product-link:hover {
    opacity: 0.8; /* 少し透明にする */
}

/* 画像を囲むボックス */
.my-rakuten-product-image-wrapper {
    flex-shrink: 0; /* 画像がコンテナの幅に合わせて縮まないようにする */
    margin-right: 16px; /* 画像とタイトルの間の余白 */
}

/* 商品画像 */
.my-rakuten-product-image {
    width: 120px; /* 画像の幅 */
    height: 120px; /* 画像の高さ */
    object-fit: cover; /* 画像の比率を保ったまま、指定した幅と高さに収める */
    border-radius: 4px; /* 画像の角を少し丸くする */
    border: 1px solid #eee; /* 画像に薄い枠線をつける */
}

/* タイトルを囲むボックス */
.my-rakuten-product-title-wrapper {
    flex-grow: 1; /* タイトルが残りのスペースをすべて使うようにする */
}

/* 商品タイトル */
.my-rakuten-product-title {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5; /* 行の高さを調整 */
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /* h3前の楽天商品のスマホ用スタイル */
  .my-rakuten-product-box a.my-rakuten-product-link {
    /* 横並びから縦積みに変更 */
    flex-direction: column;
  }
  .my-rakuten-product-image-wrapper {
    /* 画像とタイトルの間の余白を調整 */
    margin-right: 0;
    margin-bottom: 12px;
    width: 100%; /* 横幅いっぱいに */
  }
  .my-rakuten-product-image {
    /* 画像サイズを調整 */
    width: 100%;
    height: auto;
  }
  .my-rakuten-product-title {
    /* タイトルの文字サイズを少し小さくする */
    font-size: 15px;
  }
}