@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 640px) {

/*============================
#topPanelArea
============================*/
#topPanelArea { height: 60vh; }
#topPanelArea .image { height: 100%; }
#topPanelArea .image img {}
#topPanelArea .pageTitle { padding: 0 30px; bottom: 40px; }
#topPanelArea .pageTitle .main { font-size: 3em; }
#topPanelArea .pageTitle .sub { margin-top: 15px; line-height: 1.5; }

/*============================
#foodArea
============================*/
#foodArea { margin-top: 80px; }
#foodArea .top { flex-direction: column; gap: 20px; }
#foodArea .top h2 { font-size: 2.875em; }
#foodArea .top .copy {}
#foodArea .top .copy .text {}
#foodArea .top .copy .insta { margin-top: 20px; padding: 10px 25px; border-radius: 32px; font-size: 0.875em; }
#foodArea .top .copy .insta a {}
#foodArea .top .copy .insta a:before { right: 225px; top: 76%; }
#foodArea .top .copy .insta a span {}
#foodArea ul { flex-direction: column; gap: 40px; }
#foodArea ul li {}
#foodArea ul li .image { width: 100%; height: 250px; }
#foodArea ul li .image img {}
#foodArea ul li .content { margin-top: 15px; }
#foodArea ul li .content .name { font-size: 1em; }
#foodArea ul li .content .copy {}
#foodArea ul li .content .price { margin-top: 15px; }
#foodArea ul li .content .price span {}

/*============================
#breadArea
============================*/
#breadArea { margin-top: 60px; }
#breadArea .top { flex-direction: column; gap: 20px; }
#breadArea .top h2 { font-size: 2.875em; }
#breadArea .top .copy {}
#breadArea ul { gap: 2%; margin-top: 40px; }
#breadArea ul li { width: 49%; }
#breadArea ul li:nth-child(n+3) { margin-top: 30px; }
#breadArea ul li .image { width: 100%; height: 150px; }
#breadArea ul li .image img {}
#breadArea ul li .content { margin-top: 15px; }
#breadArea ul li .content .name { font-size: 1em; line-height: 1.5; }
#breadArea ul li .content .price { margin-top: 15px; }
#breadArea ul li .content .price span {}

/*============================
#drinkArea
============================*/
#drinkArea { margin-top: 60px; }
#drinkArea .top { flex-direction: column; gap: 20px; }
#drinkArea .top h2 { font-size: 2.875em; }
#drinkArea .top .copy {}
#drinkArea ul { gap: 2%; margin-top: 40px; }
#drinkArea ul li { width: 49%; }
#drinkArea ul li:nth-child(n+3) { margin-top: 30px; }
#drinkArea ul li .image { width: 100%; height: 150px; }
#drinkArea ul li .image img {}
#drinkArea ul li .content { margin-top: 15px; }
#drinkArea ul li .content .name { font-size: 1em; line-height: 1.5; }
#drinkArea ul li .content .price { margin-top: 15px; }
#drinkArea ul li .content .price span {}

/*============================
#btnArea
============================*/
#btnArea
#btnArea .button { margin-top: 80px!important; }
#btnArea .button a.md_btn_main { padding: 20px 35px 18px 0; }
#btnArea .button a { min-width: inherit; }
#btnArea .button a:after {}
#btnArea .button a:hover::after {}
#btnArea .button a span {}
#btnArea .button a span:after {}

/*============================
.md_pankuzuArea
============================*/
.md_pankuzuArea { margin-top: 80px; }
	
}