@charset "UTF-8";
/* CSS Document */
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/

/*******メイン画像*******/
p.title{width:100%; max-width:1200px; padding-top:0; padding-bottom:5%;}

.info{width:80%; margin:6% auto; background-color:#fff;}
#nav{width:70%; max-width:1200px; margin:10% auto 0 auto; overflow:hidden;}
#nav span a{width:23%; display:block; float:left; margin:3% 1%;}

/*******コンテンツ*******/
#con{clear:both; margin:10% 0; overflow:hidden; padding-bottom:10%; border-bottom:1px solid #000;}
#con h3{margin:0 auto 2% auto; width:70%;}
#giftbag a{text-align:center; display:block;}
#giftbag a img{width:70%;}

/*******関連アイテム*******/
#list{overflow:hidden;}
.item_list{clear:both; width:100%; margin:0 auto; display:block;}
.item_list li{width:23%; float:left; margin:2% 1%; height:440px;}
.item{color:#000; font-size:70%; margin:5% 0; line-height:130%; padding:3% 0; display:block; border-top:2px solid #000; border-bottom:2px solid #000;}
.item_list li a div{font-size:80%; line-height:150%; text-align:left; color:#000;}
.item_list li a b{float:right; margin:3% 0; color:#D90508; font-size:90%; font-weight:bold;}
.item_list li a b::after {content: "円(税込)";}

.end{margin-bottom:10%; width:80%; margin:0 auto;}


@media screen and (max-width: 768px) {

/*******タイトル*******/
p.title{width: 100%; padding-top: 0; padding-bottom: 15%;}

.info{width:90%; margin:0 auto;}
#nav{width:90%;}

/*******コンテンツ*******/
#con{margin: 15% 0; padding-bottom: 10%; border-bottom: 1px solid #000;}
#con h3{margin:0 auto 2% auto; width:100%;}
#giftbag a img{width:100%;}

/*******関連アイテム*******/
.item_list{margin-top:7%;}
.item_list li{width:48%; margin:3% 1%; height:370px;}
.item_list li p{margin-top:3%;}
.item{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}

.end{margin-bottom:20%; width:90%;}


}