@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.4
*/

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


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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.article H2 {
  margin-left: -0.4em;
  margin-right: -0.4em;
  width: auto;
  max-width: none;
  border-radius: none;
}
.article H3 {
  margin-left: -0.4em;
  margin-right: -0.4em;
  width: auto;
  max-width: none;
  border-radius: none;
}
}

/*ipad以下の大きさのデザインを調整*/
@media screen and (max-width: 768px){/*ipad以下の大きさのデザインを調整*/
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像を中央寄せ*/
} 
.booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
  margin-top: 8em;/*商品名以下の文章を画像の下に下げる*/
}

.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a{
  font-size:85%;/*文字の大きさを調整*/
  padding: .8em;/*ボタンの大きさを調整*/
    }
}

/*480px以下*//*iPhone5Sぐらいの大きさのデザインの調整*/
@media screen and (max-width: 480px){
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
  width: 100%;/*商品画像の大きさの調整*/
}
}

/*アイテムボックスの枠を変更*/
.product-item-box{
  border: 4px double #dfdfdf;/*枠線を灰色の２重線にする*/
  box-shadow: 0 1px 2px rgba(0,0,0,.29);/*枠線に薄い影をつける*/
}

/*商店名を調整*/
.product-item-maker{
  text-align:center;/*商店名を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin:.5em;/*文字位置の調整*/
}

/*価格文章を調整*/
.product-item-price{
  text-align:center;/*価格文書を中央寄せ*/
  font-size:90%;/*文字の大きさを調整*/
  font-weight:lighter;/*文字を細く変更*/
  margin-top:-.5em;/*価格文章を表示した時の文字位置の調整*/
  margin-bottom:.5em;/*価格文章を表示した時の文字位置の調整*/
}
.product-item-title-link{
  font-weight:bold;/*商品名を太字に変更*/
}
/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
}
.article h2 {
   font-size: 1.9rem;
 }

.article h3 {
   font-size: 1.6rem;
 }

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}