@charset "utf-8";

.wrap h3{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#4b2501;font-size:2em;text-align:center;font-weight:bold;padding:1.5em 0}
.point{background:#fcecdc}

.catch{display:flex;flex-wrap:wrap;align-items:center;padding:2em 0}
.catch figure{margin:0 1em}
.catch h4{border:1px #4b2501 solid;text-align:center;width:100%;margin:1em auto;padding:.4em 0;color:#4b2501}

.catch+.clex{align-items: center}
ul.topbtn li a{border:2px #fff dotted;text-align:center;display:block;background:#ffad2d;padding:1em;outline:2px #ffad2d solid}
ul.topbtn li:first-child{margin-bottom:2em}
ul.topbtn li:first-child a{background:#ef5146;padding:2.5em 0;outline:2px #ef5146 solid}
ul.topbtn li a,ul.topbtn li a:hover img{opacity:.8}

figure.ta_c{margin:2em auto}

.pics{display:flex;margin:0 auto;}
.pics figure{width:calc(100% / 3)}
.pics figure img{width:100%}
.pics figcaption{text-align:center;padding:.2em;font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#4b2501;}

.flex.col3{padding-bottom:2em}
.flex.col3 li{background:#fff}

.flex figure{overflow:hidden;display:block}
.flex figcaption{padding:.5em 0;font-size:.9em;color:#4b2501}
.flex.col3 img{width:100%}
.flex.col3 figcaption{padding:.5em 1em;}
.flex.col3 h4{text-align:center;margin:.5em auto;}
.flex.col3 h4 b{display:inline-block;border-bottom:1px solid;margin:0 auto;letter-spacing:.1em;font-size:1.2em}

.cake h4 b{color:#ff6d78;border-color:#ff6d78}
.bread h4 b{color:#ff8702;border-color:#ff8702}
.cook h4 b{color:#5cc103;border-color:#5cc103}

.flex.col4 li{margin-bottom:1em;}

.flex.col4 .trim{overflow: hidden;
width: 230px;/* トリミングしたい枠の幅 */
height: 178px;/* トリミングしたい枠の高さ */
position: relative;}
.flex.col4 .trim img{position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
height: auto;
}
.flex.col4 h5{color:#f38200;font-size:1.1em;font-weight:bold}

.flex a img{transform-origin:bottom center;transition:.4s}
.flex a:hover img{transform:scale(1.05)}

.flex.col4 a .trim img{transform-origin:0 0;}
.flex.col4 a:hover .trim img{transform:scale(1.05) translate(-50%, -50%)}


div.taste{margin:2em auto;}
div.taste a{display:block;width:800px;margin:0 auto}
div.taste figure{background:#f1f1ef;display:flex;justify-content:space-between;align-items:center;overflow:hidden;}
div.taste figcaption{padding:0 2em;color:#4b2501;width:50%}
div.taste img{width:50%;transform:translateX(10px);margin:0;transition:.4s}
div.taste figcaption h3{font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";color:#4b2501;font-size:1.6em;text-align:center;font-weight:bold;margin-bottom:.8em}
div.taste a:hover img{transform:translateX(0)}

@media screen and (max-width: 540px){
.wrap h3{font-size:1.5em;padding:1em 0}
.catch{padding:.5em}
.catch figure{margin:0}
.catch figure:first-child{display:none}
.catch h4{text-align:left;font-size:.9em;padding:.2em .4em;margin:.5em auto;width:95%}

ul.topbtn{width:90%;margin:0 auto}
ul.topbtn li a{padding:.5em 1em}
ul.topbtn li:first-child a{padding:1em}
ul.topbtn li:first-child{margin-bottom:1em}

.pics{flex-wrap:wrap}
.pics figure{width:95%;margin:0 auto .2em;position:relative;}
.pics figcaption{position:absolute;width:100%;padding:.2em .5em;background:rgba(255,255,255,.8);bottom:0;font-size:.85em}    
    
figure.ta_c{margin:1em auto;padding:0 1em}

.flex.col3 li{width:95%;margin:.5em auto}
.flex.col4 li{width:49%}

.flex.col4 .trim{
width: 100%;/* トリミングしたい枠の幅 */
height: 100px;/* トリミングしたい枠の高さ */
}    

#variation .wrap{width:95%}    
    
div.taste a{width:95%}
div.taste figure{flex-wrap:wrap;}
div.taste figcaption,div.taste img{width:100%}
    div.taste figcaption{padding:1em}
div.taste img{transform:translateX(0) translateY(10px)}
div.taste a:hover img{transform:translateY(0)}
}