@charset "utf-8";
/* CSS Document */

/*calc(フォントサイズの変化量 * ((100vw - 最小画面幅) / 最大画面幅) + 最小フォントサイズ)*/
/*calc(画像高さ ÷ 画像横幅 × 100%) */

/*!----------------
共有スタイル
-----------------*/

/*!Style
-------------------------------------*/
*{box-sizing:border-box}
html{font-size: 18px;color:#3c2104;line-height: 1.6;}
body{margin:0;padding:0;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
img{vertical-align:bottom;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
a:hover img{opacity:0.7;filter:alpha(opacity=70);-ms-filter:"alpha(opacity=70)"}
ul{list-style: none;}
.red{color:#ea3838}
h1,h2,h4{margin:0;padding:0;}

/*!PCとSP表示
-------------------------------------*/
.only_pc {display: block !important;}
.only_sp {display: none !important;}
@media screen and (max-width: 768px) {
.only_pc {display: none !important;}
.only_sp {display: block !important;}
}

/*大枠
-------------------*/
#container{margin:0 auto;padding:0;text-align:center;width:100%}

/*header
-------------------*/
header{margin:0 auto;padding:0;text-align:center;width:1440px;position: relative;}
header img{width:100%;}

@media screen and (max-width: 1439px) {
header{width:100%;}
}

/*main
-------------------*/
main{margin:-3em 0 0;overflow: hidden;}
main img.nami{object-fit: cover;}
main article#buy{margin:0 auto;padding:0;text-align:center;width:100%;background:url("../img/bg_nami.jpg") top center;}
main article#buy section{margin:0 auto;padding:0;width:1200px;}
main article#buy section h2 img{max-width: 881px;width:100%;}

@media (min-width: 769px) and (max-width: 1439px) {
main{margin:-2em 0 0;overflow: hidden;}
main article#buy section{width:100%;}
}

@media screen and (max-width: 768px) {
main{margin: 0;}
main article#buy section{width:90%;}
}

/*商品*/
ul.product{margin:0 0 5em;padding:0;display: flex;flex-flow: row wrap;justify-content: space-between;}
ul.product li{margin:0;padding:0;width:32%;}
ul.product li a,ul.product li .btn_sold_out{margin:0;padding:0.8em;display: block;background:#ff0000;color:#fff;text-align: center;}
ul.product li a::before{content: "";display: inline-block;width:31px;height:31px;background: url("../img/cart_icon.png");background-size: contain;vertical-align: middle;margin-right: 1em;}
ul.product li a:hover, ul.product li .btn_sold_out:hover{background: #78c9e2}
ul.product li .btn_sold_out{border: none;outline: none;width: 100%;line-height: 1.8em;font-size: 18px;}
ul.product figure img,ul.about li:last-child img{width:100%;}
figure,figcaption{margin:0;padding:0;}

ul.about{margin:0.5em 0;padding:0;text-align: left; display: flex;justify-content: space-between;align-items: center;}
ul.about li:first-child p{margin: 0;padding: 0.5em 0;font-weight: 600;}
ul.about li:first-child p.border{border-bottom:1px solid #000}
ul.about li:first-child,ul.last li ul.about li:first-child{width:73%;}
ul.about li:last-child,ul.last li ul.about li:last-child{max-width:148px;width:27%;}

ul.last{margin:0;padding:0;display: flex;justify-content: space-between;}
ul.last li{margin:0;padding:0;width:50%;}
ul.last li ul.product li{margin:0;padding:0;width:64%;}
ul.last li ul.about li:first-child p{margin: 0 0 1em}

main article#buy h3{text-align: left;margin: 1em 0;}


@media (min-width: 769px) and (max-width: 1439px) {
main article#buy h3{text-align: left;margin: 1em;}
main article#buy h3 img{max-width: 100%;}
ul.product{margin:0 auto 5em;width:90%;}
.last ul.product{ margin-left: 10%;}
}

@media screen and (max-width: 768px) {
main article#buy h3 img{max-width: 70%;}
ul.product{margin:0;}
ul.product li,ul.last li{margin:0 0 3em;padding:0;width:100%;}

ul.about li{margin:0 !important;}
	
ul.last{margin:0;padding:0;display: flex;flex-flow: row wrap;justify-content: space-between;}
ul.last li ul.product li{margin:0;padding:0;width:100%;}	
}

/*注意
-------------------*/
#caution{margin:0;padding:0;background:#e0f5f9 url("../img/caution_bg.png") no-repeat center top;}
#caution section{margin:0 auto;padding:2em 2em 0;width:1200px;text-align: left;font-size: 15px;line-height: 2em;}
#caution section img{width:100%;}
#caution ul{margin:0;padding:0;}

@media screen and (max-width: 1199px) {
#caution{margin:0;padding:0;background-image:none;}
#caution section{width:100%;font-size: 12px;}
}

/*footer
-------------------*/
footer{margin:0;padding:0 0 2em;text-align: center;}
footer ul#sns{margin:0 auto;padding:1em 0 3em;text-align: center;display: flex;justify-content:center;border-bottom:1px solid #000;width:1200px;}
footer ul#sns li{margin:0 1em;padding:0;}
footer ul#f_menu{margin:3em 0;padding:0;text-align: center;display: flex;justify-content:center;flex-flow: row wrap;}
footer ul#f_menu li a{color:#3c2104}
footer ul#f_menu li{padding: 0 1em;border-right:1px solid #000}
footer ul#f_menu li:last-child{border-right:none}
footer #topback{max-width: 1200px;width:100%;margin:0 auto;position: relative;}
footer #topback a{position: absolute;bottom:0;right:1em}
p#minna img{max-width: 499px;width:80%;}
.br{display: none;}

@media screen and (max-width: 1199px) {
footer ul#sns{width:90%;padding:1em 0 2em;}
footer ul#f_menu{font-size: 15px;margin:2em auto 4em;}
footer ul#f_menu li{margin:0 0 0.5em;}	
footer #topback{width:100%;}
footer #topback img{width: 60%;}
footer #topback a{bottom:0;right:0}
.br{display: block;}

}

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