コクーンの商品リンクをかっこよくカスタマイズして収益をあげよう！

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

/*商品名を調整*/
.product-item-title{
  text-align:left;/*商品名を左詰め*/
  font-size:95%;/*文字の大きさを調整*/
  padding: 1rem;/*文字を表示位置を調整*/
}

/*商品名リンクを調整*/
.product-item-title-link{
  color:#555;/*商品リンクの文字色を変更*/
  text-decoration:none;/*商品リンクの下線を消す*/
  font-weight:bold;/*商品名を太字に変更*/
}

/*商店名を調整*/
.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;/*価格文章を表示した時の文字位置の調整*/
}

/*価格の色を黒に*/
.item-price{
  color:#555;/*金額を黒字に変更*/
}

/*ボタンのはみ出し部分を非表示*/
#main{
  overflow:hidden;
}

/*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, .kaerebalink-link1, .tomarebalink-link1, .product-item-buttons {
  display: flex;/*ボタンをフレックスボックス化*/
  flex-flow: column;/*ボタン縦並びに変更*/
  justify-content: space-between;/*ボタンを均等配置*/
  width:300%;/*ボタンの長さを調整*/
}
.booklink-link2>*>a, .kaerebalink-link1>*>a, .tomarebalink-link1>*>a, .product-item-buttons>*>a{
  font-size:85%;/*文字の大きさを調整*/
  padding: .8em;/*ボタンの大きさを調整*/
    }
}

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