@charset "utf-8";
@import url("/common/css/font.css");

/********** RESET **********/

html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, button, input[type=text], input[type=radio], input[type=checkbox], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] { margin: 0; padding: 0; border: 0; font: inherit; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
caption, figcaption { display: none; }
em, address { font-style: normal; }
label { cursor: pointer; }
legend { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; } /* for screen reader */
:focus { outline: 0 none; }
a:link { text-decoration: none; }
a, button, input { font: inherit; background: none; border: 0 none; cursor: pointer; }
a { color:inherit; }

/********** COMMON **********/

:root {
  --GWD-Green: #028826;
	--GWD-DarkGreen: #06581c;
	--GWD-LightGreen: #edf8f0;
	--GWD-GrayGreen: #dce6df;
	--GWD-LighterGray: #aaa;
	--GWD-LightGray: #777;
	--GWD-DrakGray: #333;
	--GWD-Black: #000;
}

html { height: 100%; font: 400 18px/1.3 "S-CoreDream", sans-serif; letter-spacing: -0.05em; color: var(--GWD-DarkGray); }
body { position: relative; min-height: 100%; background: #fff; box-sizing: border-box; overflow: auto; }
body.menu-on { overflow:hidden; }

.container { width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/********** LAYOUT **********/

header { position: fixed; width: 100%; background: #fff; border-bottom: 1px solid #e1e1e1; overflow: hidden; z-index: 12; }
header div.container { display: flex; justify-content: space-between; }
header h1 { width: 114px; height: 46px; margin-top: 27px; }
header h1 a { display: block; width: 100%; height: 100%; background: url("/img/header-logo.png") center no-repeat; background-size: 100% auto; text-indent: -9999px; overflow: hidden; }
header button.drawer { position: absolute; right: 20px; display: none; background: transparent; border: 0 none; text-indent: -9999px; z-index: 9999; }
header button.drawer::before, header button.drawer::after { position: absolute; display: block; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; box-sizing: border-box; content: ""; z-index: 9999; transition: all 0.3s; }
header button.drawer::before { height: 2px; background: var(--GWD-DrakGray); }
header button.drawer::after { border-width: 2px 0; border-style: solid; border-color: var(--GWD-DrakGray); }
header nav.gnb {}
header nav.gnb > ul { display: flex; padding: 26px 0; }
header nav.gnb > ul > li {}
header nav.gnb > ul > li.home { display: none; }
header nav.gnb > ul > li + li { margin-left: 10px; }
header nav.gnb > ul > li > a { display: block; height: 48px; padding: 0 20px; font-weight: 500; line-height: 48px; transition: all 0.3s ease-out; }
header nav.gnb > ul > li:hover > a { color: var(--GWD-Green); }
header nav.gnb > ul > li > a.on { font-weight: 700; color: var(--GWD-Green); }
header nav.gnb > ul > li > ul { display: none; }
header nav.gnb > ul > li > ul > li { padding-left: 20px; opacity: 0; transition: all 0.3s ease-out; }
header nav.gnb:hover > ul > li > ul > li { opacity: 1.0; }
header nav.gnb > ul > li > ul > li > a { display: block; height: 40px; font-size: 14px; font-weight: 500; line-height: 40px; color: #aaa; transition: all 0.3s ease-out; }
header nav.gnb > ul > li > ul > li > a:hover { color: var(--GWD-Green); }
header nav.gnb > ul > li > ul > li > a.on { font-weight: 600; color: var(--GWD-Green); }
/*
footer { position: absolute; bottom: 0; width: 100%; background: var(--GWD-Green); z-index: 11; margin: 0;padding: 5px 0; }
*/
footer { position: static; bottom: 0; width: 100%; background: var(--GWD-Green); z-index: 11; margin: 0;padding: 20px 0 0 0; }
footer div.container { display: inline-block; justify-content: space-between; align-items: center; height: 90px;}
footer div.container p span.tel{margin-left: 10px;}
footer p.info { font-size: 16px; color: rgba(255, 255, 255, 0.6); margin-left: 10px;}
footer p.info strong { display: inline-block; margin-right: 10px; font-weight: 600; }
footer p.copyright { display: block; font-size: 14px; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); margin-left: 10px; }
footer p.brand { width: 214px; height: 50px; background: url("/img/footer-logo.svg") center no-repeat; background-size: 100% auto; text-indent: -9999px; overflow: hidden; }



main { margin-top:5; height: 100%; padding: 5px 0; box-sizing: border-box; z-index: 0; }

main hgroup { background-position: center; background-repeat: no-repeat; background-size: cover; }
main.intro hgroup { background-image: url("/img/visual-intro.png"); }
main.restaurant hgroup { background-image: url("/img/visual-restaurant.png"); }
main.food hgroup { background-image: url("/img/visual-food.png"); }
main.program hgroup { background-image: url("/img/visual-program.png"); }
main.community hgroup { background-image: url("/img/visual-community.png"); }
/* Ä¿¹Â´ÏƼ À̹ÌÁö »çÀÌÁî 0À¸·Î º¯°æ */
main hgroup div.container { height: 70px; display: none; flex-direction: column; justify-content: center; }
/* Ä¿¹Â´ÏƼ À̹ÌÁö »èÁ¦ */
main hgroup h1 { font: 300 60px/1.0 "MaruBuri", serif; letter-spacing: -0.1em; color: #fff; }
main hgroup p { margin-top: 20px; font-size: 20px; color: #fff; }

main nav.lnb { top:66px; background: var(--GWD-LightGreen); }
main nav.lnb div.container { height: 69px; display: flex; justify-content: center; }
main nav.lnb a { position: relative; flex: 0 0 auto; display: block; height: 69px; font-size: 20px; font-weight: 500; line-height: 69px; transition: all 0.3s ease-out; }
main nav.lnb a:hover { color: var(--GWD-Green); }
main nav.lnb a.on { color: var(--GWD-Green); }
main nav.lnb a.on:before { position: absolute; display: block; bottom: 0; left: 0; right: 0; height: 5px; background: var(--GWD-Green); content: ""; }
main nav.lnb a + a { margin-left: 30px; }

main h2 { width: 1200px; margin: 80px auto 0; }
main h2 span { display: block; font-size: 16px; font-weight: 500; color: #aaa; }
main h2 span em { color: var(--GWD-Green); }
main h2 strong { display: block; margin-top: 5px; font-size: 48px; font-weight: 700; letter-spacing: -0.075em; }

section.content { margin-top: 120px; padding: 0 0 100px; }

/********** INTRO **********/

section.intro { margin-top: 60px; padding: 0 0 100px; }
section.intro p.point { width: 72px; height: 72px; margin: 0 auto; background: var(--GWD-Green) url("/img/icon-gangwon.svg") center no-repeat; background-size: 40px auto; border-radius: 50%; text-indent: -9999px; overflow: hidden; }
section.intro h1 { margin-top: 40px; text-align: center; font: 200 42px/1.3 "MaruBuri", serif; letter-spacing: -0.075em; }
section.intro h1 strong { font-weight: 700; color: var(--GWD-Green); }
section.intro h1 span { font-weight: 700; }
section.intro div.brand { display: flex; justify-content: space-between; align-items: center; margin-top: 80px; }
section.intro div.brand figure { flex: 0 0 480px; }
section.intro div.brand figure img { width: 100%; }
section.intro div.brand div { flex: 0 0 640px; }
section.intro div.brand div p.head { font-size: 30px; font-weight: 700; }
section.intro div.brand div p.head strong { font-size: 36px; color: var(--GWD-Green); }
section.intro div.brand div ul { margin-top: 30px; padding: 0 10px; }
section.intro div.brand div ul li { position: relative; padding-left: 15px; line-height: 1.5; }
section.intro div.brand div ul li:before { position: absolute; display: block; top: 11px; left:0; width: 6px; height: 6px; border-radius: 50%; background: var(--GWD-Green); content: ""; }
section.intro div.brand ul li + li { margin-top: 20px; }

section.push { padding: 100px 0; background: var(--GWD-LightGreen); }
section.push h1 { text-align: center; font: 200 42px/1.3 "MaruBuri", serif; letter-spacing: -0.075em; }
section.push h1 strong { font-weight: 700; color: var(--GWD-Green); }
section.push h1 span { font-weight: 700; }
section.push figure { margin-top: 60px; text-align: center; }
section.push figure img { max-width: 100%; }

section.history { margin-top: 60px; padding: 0 0 100px; }
section.history div.text { padding: 80px 240px; text-align: justify; background: url("/img/intro-history.png") center no-repeat; background-size: cover; }
section.history div.text p.head { padding-bottom: 20px; font-size: 32px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
section.history div.text p.article { margin-top: 20px; font-size: 20px; line-height: 1.5; color: #fff; word-break: keep-all; }
section.history ol { position: relative; margin-top: 80px; }
section.history ol:before { position: absolute; display: block; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background :#d1d1d1; content: ""; }
section.history ol li { position: relative; display: block; box-sizing: border-box; }
section.history ol li:nth-child(2n+1) { padding-right: calc(50% + 40px); text-align: right; }
section.history ol li:nth-child(2n) { padding-left: calc(50% + 40px); text-align: left; }
section.history ol li:before { position: absolute; display: block; top: -2px; width: 32px; height: 32px; background: #fff; border: 1px solid #d1d1d1; border-radius: 50%; box-sizing: border-box; content: ""; }
section.history ol li:after { position: absolute; display: block; top: 8px; width: 12px; height: 12px; background: var(--GWD-Green); border-radius: 50%; content: ""; }
section.history ol li:nth-child(2n+1):before { right: 50%; margin-right: -16.5px; }
section.history ol li:nth-child(2n+1):after { right: 50%; margin-right: -6.5px; }
section.history ol li:nth-child(2n):before { left: 50%; margin-left: -16.5px; }
section.history ol li:nth-child(2n):after { left: 50%; margin-left: -6.5px; }
section.history ol li + li { margin-top: 40px; }
section.history ol li p.year { font-size: 20px; }
section.history ol li p.year strong { font-size: 30px; font-weight: 600; color: var(--GWD-Green); }
section.history ol li dl { position: relative; margin-top: 30px; }
section.history ol li:nth-child(2n+1) dl { padding-right: 110px; }
section.history ol li:nth-child(2n) dl { padding-left: 110px; }
section.history ol li dl dt { position: absolute; top: 0; width: 110px; font-size: 16px; font-weight: 600; line-height: 1.5; }
section.history ol li:nth-child(2n+1) dl dt { right: 0; }
section.history ol li:nth-child(2n) dl dt { left: 0; }
section.history ol li dl dt span { font-size: 14px; font-weight: 400; color: var(--GWD-LightGray); }
section.history ol li dl dd { font-size: 16px; line-height: 1.5; word-break: keep-all; }
section.history ol li dl dd span { color: var(--GWD-LighterGray); }
section.history ol li dl dd + dd { margin-top: 16px; }

/********** RESTAURANT **********/

section.map { padding: 100px 0; background: var(--GWD-LightGreen) url("/img/restaurant-character.svg") calc(50% - 440px) calc(100% + 70px) no-repeat; background-size: 320px auto; }
section.map div.container { position: relative; }
section.map h1 { position: absolute; font-size: 42px; font-weight: 900; }
section.map h1 span { display: block; }
section.map h1 span.adjective { font-size: 30px; font-weight: 300; }
section.map h1 span strong { color: var(--GWD-Green); }
section.map figure { text-align: right; }
section.map figure img { max-width: 100%; }

section.restaurant { padding: 100px 0; }
section.restaurant + section.restaurant { border-top: 1px solid var(--GWD-GrayGreen); }
section.restaurant h1 { font-size: 36px; font-weight: 700; }
section.restaurant h1 span { display: block; }
section.restaurant h1 span.label { display: inline-block; height: 32px; padding: 0 12px; background: var(--GWD-Green); font-size: 18px; font-weight: 500; line-height: 32px; color: #fff; border-radius: 16px; }
section.restaurant p.intro { margin-top: 30px; font-size: 20px; color: var(--GWD-Green); }
section.restaurant div.info { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }
section.restaurant div.info ul.text { flex: 0 0 400px; }
section.restaurant div.info ul.text li {}
section.restaurant div.info ul.text li + li { margin-top: 18px; }
section.restaurant div.info ul.text li dl { display: flex; }
section.restaurant div.info ul.text li dl dt { flex: 0 0 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: 22px auto; text-indent: -9999px; overflow: hidden; }
section.restaurant div.info ul.text li:first-child dl dt { background-image: url("/img/icon-delivery.svg"); }
section.restaurant div.info ul.text li:nth-child(2) dl dt { background-image: url("/img/icon-menu.svg"); background-size: 24px auto; }
section.restaurant div.info ul.text li:nth-child(3) dl dt { background-image: url("/img/icon-price.svg"); }
section.restaurant div.info ul.text li:nth-child(4) dl dt { background-image: url("/img/icon-tel.svg"); }
section.restaurant div.info ul.text li:last-child dl dt { background-image: url("/img/icon-address.svg"); }
section.restaurant div.info ul.text li dl dd { padding: 1px 0 0 10px; }
section.restaurant div.info ul.photo { display: flex; flex: 0 0 760px; }
section.restaurant div.info ul.photo li { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; }
section.restaurant div.info ul.photo li + li { margin-left: 20px; }
section.restaurant div.info ul.photo li img { width: 100%; height: 100%; object-fit: cover; }

/********** FOOD **********/

main.food p.intro { width: 1200px; margin: 30px auto 0; font-size: 20px; color: var(--GWD-Green); }

section.food { margin-top: 60px; padding: 0 0 100px; }
section.food.convenient { padding: 0 0 180px; }
section.food div.flex-wrap { display: flex; justify-content: space-between; }
section.food div.info { flex: 0 0 600px; }
section.food div.info p.head { font-size: 20px; font-weight: 600; }
section.food div.info ul.feature { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; }
section.food div.info ul.feature li { flex: 0 0 295px; height: 56px; background: var(--GWD-LightGreen); text-align: center; font-size: 16px; font-weight: 500; line-height: 54px; color: var(--GWD-Green); border: 1px solid var(--GWD-GrayGreen); border-radius: 28px; box-sizing: border-box; }
section.food div.info ul.feature li:nth-child(n+3) { margin-top: 10px; }
section.food div.info ul.detail { margin-top: 40px; }
section.food div.info ul.detail li {}
section.food div.info ul.detail li + li { margin-top: 10px; }
section.food div.info ul.detail li dl { display: flex; font-size: 14px; }
section.food div.info ul.detail li dl dt { flex: 0 0 60px; font-weight: 500; color: var(--GWD-LightGray); }
section.food div.info ul.detail li dl dd { color: var(--GWD-LighterGray); }
section.food div.info ul.exp { display: flex; justify-content: space-between; margin-top: 40px; }
section.food div.info ul.exp li { flex: 0 0 180px; height: 180px; padding-top: 110px; background-color: var(--GWD-LightGreen); background-position: center calc(50% - 24px); background-repeat: no-repeat; background-size: auto 48px; text-align: center; font-size: 16px; font-weight: 500; color: var(--GWD-Green); border: 1px solid var(--GWD-GrayGreen); border-radius: 50%; box-sizing: border-box; }
section.food div.info ul.exp li:first-child { background-image: url("/img/icon-exp-01.svg"); background-size: auto 52px; }
section.food div.info ul.exp li:nth-child(2) { background-image: url("/img/icon-exp-02.svg"); }
section.food div.info ul.exp li:nth-child(3) { background-image: url("/img/icon-exp-03.svg"); }
section.food figure { flex: 0 0 540px; height: 420px; line-height: 0; border-radius: 40px; overflow: hidden; }
section.food figure img { width: 100%; height: 100%; object-fit: cover; }
section.food a.move { display: block; width: 400px; height:72px; margin: 80px auto 0; text-align: center; font-size: 20px; font-weight: 500; line-height: 70px; color: var(--GWD-Green); border: 1px solid  var(--GWD-Green); border-radius: 36px; box-sizing: border-box; transition: all 0.3s ease-out; }
section.food a.move:hover { background: var(--GWD-Green); color: #fff; }
section.food ul.img-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 80px; }
section.food ul.img-wrap li { flex: 0 0 285px; height: 285px; border-radius: 20px; overflow: hidden; }
section.food ul.img-wrap li:nth-child(n+5) { margin-top: 20px; }
section.food ul.img-wrap li img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
section.food ul.img-wrap li:hover img { transform: scale(1.1); }

section.addition { position: relative; padding: 0 0 100px; background: var(--GWD-LightGreen); }
section.addition p.big-head { position: absolute; top: -80px; left: calc(50% - 600px); width: 1200px; height: 160px; text-align: center; background: url("/img/food-addition.png") center no-repeat; background-size: cover; font-size: 30px; font-weight: 300; line-height: 160px; color: #fff; border-radius: 30px; overflow: hidden; }
section.addition div.container { padding-top: 180px; }
section.addition p.small-head { font-size: 24px; font-weight: 600; }
section.addition ul + p.small-head { margin-top: 60px; }
section.addition ul { margin-top: 30px; padding: 0 60px; }
section.addition ul.online { display: flex; }
section.addition ul.online li { flex: 0 0 auto; height: 40px; line-height: 0; }
section.addition ul.online li + li { margin-left: 26px; }
section.addition ul.offline {}
section.addition ul.offline li {}
section.addition ul.offline li + li { margin-top: 20px; }
section.addition ul.offline li dl { display: flex; align-items: center; }
section.addition ul.offline li dl dt { flex: 0 0 80px; height: 32px; text-align: center; background: var(--GWD-Green); font-weight: 500; line-height: 32px; color: #fff; border-radius: 16px; }
section.addition ul.offline li dl dd { margin-left: 14px; }

/********** PROGRAM **********/

section.season { margin-top: 60px; padding: 0 0 100px; }
section.season div.flex-wrap { display: flex; justify-content: space-between; flex-direction: row-reverse; }
section.season ul.img { display: flex; justify-content: space-between; flex-wrap: wrap; flex: 0 0 590px; }
section.season ul.img li { flex: 0 0 290px; height: 290px; border-radius: 20px; overflow: hidden; }
section.season ul.img li img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
section.season ul.img li:hover img { transform: scale(1.1); }
section.season ul.img li:nth-child(n+3) { margin-top: 10px; }
section.season div.intro { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 600px; background: var(--GWD-Green); border-radius: 20px; box-sizing: border-box; }
section.season div.intro p.preface { padding: 50px 50px 30px; background: var(--GWD-DarkGreen); border-radius: 20px 20px 0 0; font: 600 32px/1.3 "MaruBuri", serif; color: var(--GWD-LightGreen); }
section.season div.intro p.exp { margin-top: 30px; padding: 0 50px; line-height: 1.5; color: rgba(255, 255, 255, 1.0); }
section.season div.intro p.preface span,
section.season div.intro p.exp span { display: block; }
section.season div.intro p.exp strong { font-weight: 600; }
section.season div.intro dl.composition { margin-top: 40px; padding: 0 50px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
section.season div.intro dl.composition dt { font-weight: 600; }
section.season div.intro dl.composition dd { margin-top: 10px; line-height: 1.8; }
section.season div.intro ul.help { padding: 50px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
section.season div.intro ul.help li {}
section.season div.intro ul.help li + li { margin-top: 6px; }

section.table { margin-top: 60px; padding: 0 0 100px; }
section.table div.flex-wrap { display: flex; justify-content: space-between; flex-direction: row-reverse; }
section.table ul.img { display: flex; justify-content: space-between; flex-wrap: wrap; flex: 0 0 810px; }
section.table ul.img li { flex: 0 0 400px; height: 240px; border-radius: 20px; overflow: hidden; }
section.table ul.img li img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
section.table ul.img li:hover img { transform: scale(1.1); }
section.table ul.img li:nth-child(n+3) { margin-top: 10px; }
section.table div.intro { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 380px; background: var(--GWD-Green); border-radius: 20px; box-sizing: border-box; }
section.table div.intro p.exp { padding:50px 50px 0; line-height: 1.5; color: rgba(255, 255, 255, 1.0); }
section.table div.intro p.exp span { display: block; }
section.table div.intro p.exp strong { font-weight: 600; }
section.table div.intro dl.composition { margin-top: 40px; padding: 0 50px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
section.table div.intro dl.composition dt { font-weight: 600; }
section.table div.intro dl.composition dd { margin-top: 10px; line-height: 1.8; }
section.table div.intro ul.help { padding: 50px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
section.table div.intro ul.help li {}
section.table div.intro ul.help li + li { margin-top: 6px; }

section.tour { margin-top: 60px; padding: 0 0 180px; }
section.tour div.flex-wrap { display: flex; justify-content: space-between; }
section.tour figure.map { flex: 0 0 780px; }
section.tour figure.map img { max-width: 100%; }
section.tour div.intro { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 400px; background: var(--GWD-Green); border-radius: 20px; box-sizing: border-box; }
section.tour div.intro p.exp { padding:50px 50px 0; line-height: 1.5; color: rgba(255, 255, 255, 1.0); }
section.tour div.intro p.exp span { display: block; }
section.tour div.intro p.exp strong { font-weight: 600; }
section.tour div.intro dl.composition { margin-top: 40px; padding: 0 50px; font-size: 16px; color: rgba(255, 255, 255, 0.8); }
section.tour div.intro dl.composition dt { font-weight: 600; }
section.tour div.intro dl.composition dd { margin-top: 10px; line-height: 1.8; }
section.tour div.intro ul.help { padding: 50px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
section.tour div.intro ul.help li {}
section.tour div.intro ul.help li + li { margin-top: 6px; }

section.festa { position: relative; padding: 0 0 100px; background: var(--GWD-LightGreen); }
section.festa p.big-head { position: absolute; top: -80px; left: calc(50% - 600px); width: 1200px; height: 160px; text-align: center; background: url("/img/tour-festa.png") center no-repeat; background-size: cover; font-size: 30px; font-weight: 300; line-height: 160px; color: #fff; border-radius: 30px; overflow: hidden; }
section.festa div.container { padding-top: 140px; }
section.festa ul.list { display: flex; justify-content: space-between; }
section.festa ul.list li { flex: 0 0 220px; background: #fff; border-radius: 20px; overflow: hidden; }
section.festa ul.list li dl {}
section.festa ul.list li dl dt { height: 56px; text-align: center; background: var(--GWD-Green); font-size: 22px; font-weight: 500; line-height: 56px; color: #fff; border-radius: 20px 20px 0 0; overflow: hidden; }
section.festa ul.list li dl dd { padding: 24px 18px; font-size: 16px; font-weight: 500; }
section.festa ul.list li dl dd span { display: inline-block; margin-top: 5px; font-size: 14px; color: var(--GWD-LightGray); }
section.festa ul.list li dl dd + dd { padding-top: 0; font-weight: 400; line-height: 1.8; }

/********** COMMUNITY **********/

section.bbs-list ul { width: 1200px; margin: 0 auto; }
section.bbs-list ul li { padding: 40px 0; }
section.bbs-list ul li:first-child { padding-top: 0; }
section.bbs-list ul li:last-child { padding-bottom: 0; }
section.bbs-list ul li + li { border-top: 1px solid var(--GWD-GrayGreen); }
section.bbs-list ul li > dl { display: flex; }
section.bbs-list ul li > dl > dt { flex: 0 0 500px; height: 280px; border-radius: 20px; overflow: hidden; }
section.bbs-list ul li > dl > dt a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
section.bbs-list ul li > dl > dt a:after { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0); content: ""; transition: all 0.3s ease-out; }
section.bbs-list ul li > dl > dt a img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.0); transition: all 0.3s ease-out; }
section.bbs-list ul li > dl > dt a:hover:after { background: rgba(0, 0, 0, 0.3); }
section.bbs-list ul li > dl > dt a:hover img { transform: scale(1.1); }
section.bbs-list ul li > dl > dd { flex: 0 1 auto; margin-left: 30px; }
section.bbs-list ul li > dl > dd a { display: block; font-size: 24px; font-weight: 500; transition: all 0.3s ease-out; }
section.bbs-list ul li > dl > dd a:hover { color: var(--GWD-Green); }
section.bbs-list ul li > dl > dd dl.info { display: flex; margin-top: 20px; font-size: 16px; }
section.bbs-list ul li > dl > dd dl.info + dl.info { margin-top: 10px; }
section.bbs-list ul li > dl > dd dl.info dt { flex: 0 0 auto; color: #999; }
section.bbs-list ul li > dl > dd dl.info dd { flex: 0 0 auto; margin-left: 5px; color: #555; }

div.pagination { display: flex; justify-content: center; margin-top: 80px; }
div.pagination a { flex: 0 0 50px; height: 50px; text-align: center; line-height: 48px; color: #ccc; border-radius: 50%; border: 1px solid #ccc; box-sizing: border-box; transition: all 0.3s ease-out; }
div.pagination a:hover { color: var(--GWD-Green); border-color: var(--GWD-Green); }
div.pagination a.move { background-position: center; background-repeat: no-repeat; background-size: auto 14px; text-indent: -9999px; }
div.pagination a.move.first { background-image: url("/img/icon-first.svg"); }
div.pagination a.move.prev { background-image: url("/img/icon-prev.svg"); }
div.pagination a.move.next { background-image: url("/img/icon-next.svg"); }
div.pagination a.move.last { background-image: url("/img/icon-last.svg"); }
div.pagination a.move.first:hover { background-image: url("/img/icon-first-hover.svg"); }
div.pagination a.move.prev:hover { background-image: url("/img/icon-prev-hover.svg"); }
div.pagination a.move.next:hover { background-image: url("/img/icon-next-hover.svg"); }
div.pagination a.move.last:hover { background-image: url("/img/icon-last-hover.svg"); }
div.pagination span.on { flex: 0 0 50px; height: 50px; background: var(--GWD-Green); text-align: center; font-weight: 500; line-height: 48px; color: #fff; border-radius: 50%; border: 1px solid var(--GWD-Green); box-sizing: border-box; }
div.pagination a + a,
div.pagination a + span,
div.pagination span + a { margin-left: 20px; }

section.bbs-view h1 { font-size: 32px; }
section.bbs-view div.info { display: flex; margin-top: 20px; }
section.bbs-view div.info dl { display: flex; flex: 0 0 auto; }
section.bbs-view div.info dl + dl { margin-left: 20px; }
section.bbs-view div.info dl dt { flex: 0 0 auto; color: #999; }
section.bbs-view div.info dl dd { flex: 0 0 auto; margin-left: 5px; color: #555; }
section.bbs-view div.editor { margin-top: 60px; }
section.bbs-view ul.file { margin-top: 60px; }
section.bbs-view ul.file li { padding-left: 30px; background: url("/img/icon-file.svg") left calc(50% + 1px) no-repeat; background-size: 18px auto; }
section.bbs-view ul.file li + li { margin-top: 15px; }
section.bbs-view ul.file li a { display: inline-block; transition: all 0.3s ease-out; }
section.bbs-view ul.file li a:hover { color: var(--GWD-Green); }
section.bbs-view ul.file li span { display: inline-block; margin-left: 5px; color: #999; }
section.bbs-view div.post { margin-top: 60px; }
section.bbs-view div.post dl { display: flex; justify-content: space-between; align-items: center; }
section.bbs-view div.post dl + dl { margin-top: 15px; }
section.bbs-view div.post dl dt { flex: 0 0 100px; height: 40px; text-align: center; background: #555; line-height: 40px; color: #fff; border-radius: 20px; }
section.bbs-view div.post dl dd { flex: 0 0 calc(100% - 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
section.bbs-view div.post dl dd a { transition: all 0.3s ease-out; }
section.bbs-view div.post dl dd a:hover { color: var(--GWD-Green); }
section.bbs-view a.move-list { display: block; width: 200px; height:72px; margin: 80px auto 0; text-align: center; font-size: 20px; line-height: 70px; color: var(--GWD-Green); border: 1px solid  var(--GWD-Green); border-radius: 36px; box-sizing: border-box; transition: all 0.3s ease-out; }
section.bbs-view a.move-list:hover { background: var(--GWD-Green); color: #fff; }

section.sns {}
section.sns ul { display: flex; justify-content: center; }
section.sns ul li { flex: 0 0 260px; }
section.sns ul li + li { margin-left: 80px; }
section.sns ul li dl { text-align: center; }
section.sns ul li dl dt { height: 130px; }
section.sns ul li dl dt img { max-height: 100%; }
section.sns ul li dl dd { margin-top: 10px; }
section.sns ul li dl dd:nth-child(2) { margin-top: 20px; letter-spacing: 0; }
section.sns ul li dl dd:nth-child(3) { margin-top: 20px; font-size: 20px; font-weight: 700; }
section.sns ul li dl dd a { font-size: 14px; color: var(--GWD-Green); text-decoration: underline; letter-spacing: 0; }

/********** HOME **********/

section.home { position: relative; display: flex; align-items: center; height: calc(100vh - 200px); min-height: 760px; box-sizing: border-box; }
section.home div.center { width: 100%; }
section.home h1 { top :100; text-align: center; font: 400 42px/1.3 "MaruBuri", serif; color: var(--GWD-Green); transform: translateY(-50px); opacity: 0; transition: all 1.0s; }
section.home h1.on { transform: translateY(0); opacity: 1.0; }
section.home figure.brand { height: 160px; margin-top: 50px; text-align: center; opacity: 0; transition: all 3.0s; }
section.home figure.brand.on { opacity: 1.0; }
section.home figure.brand img { max-width: 100%; height: 100%; }
section.home div.quick-menu { margin-top: 120px; }
section.home div.quick-menu ul { display: flex; justify-content: space-between; align-items: center; }
section.home div.quick-menu ul li { position:relative; width: 180px; height: 180px; background: #fff; border-radius: 50%; border: 1px solid var(--GWD-Green);; box-sizing: border-box; overflow: hidden; z-index: 10; opacity: 0; transform: none; transition: all 0.3s cubic-bezier(0.0, -0.4, 0.2, 3.0); }
section.home div.quick-menu ul li:first-child { transition-delay: 0.2s; }
section.home div.quick-menu ul li:nth-child(2) { transition-delay: 0.16s; }
section.home div.quick-menu ul li:nth-child(3) { transition-delay: 0.12s; }
section.home div.quick-menu ul li:nth-child(4) { transition-delay: 0.08s; }
section.home div.quick-menu ul li:last-child { transition-delay: 0.04s; }
section.home.on div.quick-menu ul li { opacity: 1.0; transform: translateY(-50px); }
section.home.on div.quick-menu ul li:first-child { transition-delay: 0.04s; }
section.home.on div.quick-menu ul li:nth-child(2) { transition-delay: 0.08s; }
section.home.on div.quick-menu ul li:nth-child(3) { transition-delay: 0.12s; }
section.home.on div.quick-menu ul li:nth-child(4) { transition-delay: 0.16s; }
section.home.on div.quick-menu ul li:last-child { transition-delay: 0.2s; }
section.home.on div.quick-menu ul li:before { position: absolute; display: block; width: 100%; height: 100%; background: var(--GWD-Green); border-radius: 50%; border: 1px solid var(--GWD-Green); box-sizing: border-box; overflow: hidden; content: ""; z-index: 11; opacity: 0; transform: scale(0.5); transition: all 0.2s ease-in-out; }
section.home div.quick-menu ul li a { position: relative; display: block; width: 100%; height: 100%; padding-top: 110px; background-position: center calc(50% - 24px); background-repeat: no-repeat; background-size: auto 48px; text-align: center; box-sizing: border-box; z-index: 12; transition: all 0.2s ease-in-out; }
section.home div.quick-menu ul li:first-child a { background-image: url("/img/home-icon-01.svg"); }
section.home div.quick-menu ul li:nth-child(2) a { background-image: url("/img/home-icon-02.svg"); }
section.home div.quick-menu ul li:nth-child(3) a { background-image: url("/img/home-icon-03.svg"); }
section.home div.quick-menu ul li:nth-child(4) a { background-image: url("/img/home-icon-04.svg"); }
section.home div.quick-menu ul li:last-child a { background-image: url("/img/home-icon-05.svg"); background-size: 48px auto; }
section.home div.quick-menu ul li:hover:before { opacity: 1.0; transform: scale(1.1); }
section.home div.quick-menu ul li:hover a { color: #fff; }
section.home figure.vegetable { position: absolute; bottom: 320; width: calc(100% - 40px); height: 363px; margin: 0 auto; text-align: center; line-height: 0; transform: none; transition: all 0.3s ease-out; transition-delay: 0.2s; }
section.home.on figure.vegetable { transform: translateY(50px); transition-delay: 0.01s; }
section.home figure.vegetable img { max-width: 100%; height: 80%; }

/******************** ~ 1240PX ********************/

@media all and (max-width:1240px) {

footer { position: static; bottom: 0; width: 100%;  z-index: 11; margin: 0;padding: 0px 0 0 0; }
footer div.container { width: 100%; margin: 0;padding: 0; }

main h2 { width: 100%; padding: 0 20px; box-sizing: border-box; }
section.home { position: relative; display: flex; align-items: center; height: calc(100vh - 200px); min-height: 760px; box-sizing: border-box; }
section.intro p.point { width: 66px; height: 66px; background-size: 38px auto; }
section.intro h1 { margin-top: 36px; font-size: 38px; }
section.intro div.brand { margin-top: 54px; align-items: flex-start; }
section.intro div.brand figure { flex: 0 0 calc(100% - 700px); }
section.intro div.brand div { flex: 0 0 640px; }
section.intro div.brand div p.head { font-size: 26px; }
section.intro div.brand div p.head strong { font-size: 32px; }

section.push h1 { font-size: 38px; }
section.push figure { margin-top: 54px; }

section.restaurant div.info ul.photo { flex: 0 0 590px; }
section.restaurant div.info ul.photo li { width: 190px; height: 190px; }
section.restaurant div.info ul.photo li + li { margin-left: 10px; }

main.food p.intro { width: 100%; padding: 0 20px; box-sizing: border-box; }

section.food div.info { flex: 0 0 50%; }
section.food div.info ul.feature li { flex: 0 0 100%; }
section.food div.info ul.feature li + li { margin-top: 10px; }
section.food div.info ul.exp li { flex: 0 0 160px; height: 160px; }
section.food figure { flex: 0 0 46%; }
section.food ul.img-wrap li { flex: 0 0 calc(25vw - 25px); height: calc(25vw - 25px); }

section.addition p.big-head { left: 20px; width: calc(100% - 40px); }
section.addition ul { padding: 0 30px; }
section.addition ul.online li { height: 30px; }
section.addition ul.online li + li { margin-left: 20px; }
section.addition ul.online li img { height: 100%; }
section.addition ul.offline li dl { display: block; }
section.addition ul.offline li dl dt { width: 80px; }
section.addition ul.offline li dl dd { margin-top: 10px; }

section.season ul.img { flex: 0 0 calc(100% - 450px); flex-direction: column; }
section.season ul.img li { flex: 0 0 140px; width: 100%; }
section.season ul.img li + li { margin-top: 10px; }
section.season div.intro { flex: 0 0 440px; }
section.season div.intro p.preface { padding: 30px 30px 20px; font-size: 30px; }
section.season div.intro p.exp { margin-top: 20px; padding: 0 30px; }
section.season div.intro dl.composition { margin-top: 30px; padding: 0 30px; }
section.season div.intro ul.help { padding: 30px;  }

section.table ul.img { flex: 0 0 calc(100% - 360px); }
section.table ul.img li { flex: 0 0 calc(50% - 5px); }
section.table div.intro { flex: 0 0 350px; }
section.table div.intro p.exp { padding:30px 30px 0; }
section.table div.intro dl.composition { padding: 0 30px; }
section.table div.intro ul.help { padding: 30px; }

section.tour figure.map { flex: 0 0 calc(100% - 330px); }
section.tour div.intro { flex: 0 0 320px; }
section.tour div.intro p.exp { padding:30px 30px 0; }
section.tour div.intro dl.composition { padding: 0 30px; }
section.tour div.intro ul.help { padding: 30px; }

section.festa p.big-head { left: 20px; width: calc(100% - 40px); }
section.festa ul.list li { flex: 0 0 calc(20% - 16px); }

section.bbs-list ul { width: 100%; padding: 0 20px; box-sizing: border-box; }

}

/******************** ~ 1024PX ********************/

@media all and (max-width:1024px) {

html { font-size: 17px; }

footer { position: static; bottom: 0; width: 100%;  z-index: 11; margin: 0;padding: 0px 0 0 0; }
footer div.container { width: 100%; margin: 0;padding: 0; }

footer div.container { height: 60px; }
footer p.info { font-size: 16px; }
footer p.copyright { font-size: 14px; }
footer p.brand { display: none; }

main { padding: 5px 0 60px; }

main hgroup div.container { height: 300px; }
main hgroup h1 { font-size: 54px; }
main hgroup p { font-size: 18px; }

main nav.lnb { width: 100%; overflow-x: auto; }
main nav.lnb div.container { width: auto; height: 60px; }
main nav.lnb a { height: 60px; font-size: 18px; line-height: 60px; }

main h2 { margin-top: 60px; }
main h2 strong { font-size: 42px; }

section.content { margin-top: 50px; padding: 0 0 60px; }

section.intro { margin-top: 50px; padding: 0 0 60px; }
section.intro p.point { width: 60px; height: 60px; background-size: 32px auto; }
section.intro h1 { margin-top: 32px; font-size: 34px; }
section.intro div.brand { margin-top: 48px; }
section.intro div.brand figure { flex: 0 0 calc(100% - 540px); }
section.intro div.brand div { flex: 0 0 500px; }
section.intro div.brand div p.head { font-size: 24px; }
section.intro div.brand div p.head strong { font-size: 28px; }

section.push { padding: 60px 0; }
section.push h1 { font-size: 32px; }
section.push figure { margin-top: 48px; }

section.history { margin-top: 50px; padding: 0 0 60px; }
section.history div.text { padding: 70px 160px; }
section.history div.text p.head { font-size: 28px; }
section.history div.text p.article { font-size: 18px; }
section.history ol { margin-top: 60px; }

section.restaurant { padding: 60px 0; }
section.restaurant h1 { font-size: 34px; }
section.restaurant p.intro { margin-top: 30px; font-size: 20px; color: var(--GWD-Green); }
section.restaurant div.info { display: block; margin-top: 36px; }
section.restaurant div.info ul.photo { margin-top: 36px; }
section.restaurant div.info ul.photo li { width: 26vw; height: 26vw; }
section.restaurant div.info ul.photo li + li { margin-left: 2vw; }

section.food { margin-top: 50px; padding: 0 0 60px; }
section.food.convenient { padding: 0 0 140px; }
section.food div.info { flex: 0 0 50%; }
section.food div.info ul.exp li { flex: 0 0 130px; height: 130px; padding-top: 80px; background-position: center calc(50% - 18px); }
section.food a.move { margin: 60px auto 0; }
section.food ul.img-wrap { margin-top: 50px; }

section.addition { padding: 0 0 60px; }
section.addition div.container { padding-top: 140px; }
section.addition ul + p.small-head { margin-top: 50px; }

section.season { margin-top: 50px; padding: 0 0 60px; }

section.table { margin-top: 50px; padding: 0 0 60px; }

section.tour { margin-top: 50px }

section.festa { padding: 0 0 60px; }
section.festa ul.list li dl dt { height: 50px; line-height: 50px; }
section.festa ul.list li dl dd { padding: 20px 16px; }

section.bbs-list ul li > dl > dt { flex: 0 0 40%; height: 260px; }

div.pagination { margin-top: 50px; }

section.bbs-view div.editor { margin-top: 50px; }
section.bbs-view ul.file { margin-top: 50px; }
section.bbs-view div.post { margin-top: 50px; }
section.bbs-view a.move-list { margin: 60px auto 0; }

section.sns {}
section.sns ul { display: flex; justify-content: center; }
section.sns ul li { flex: 0 0 260px; }
section.sns ul li + li { margin-left: 80px; }
section.sns ul li dl { text-align: center; }
section.sns ul li dl dt { height: 130px; }
section.sns ul li dl dt img { max-height: 100%; }
section.sns ul li dl dd { margin-top: 10px; }
section.sns ul li dl dd:nth-child(2) { margin-top: 20px; letter-spacing: 0; }
section.sns ul li dl dd:nth-child(3) { margin-top: 20px; font-size: 20px; font-weight: 700; }
section.sns ul li dl dd a { font-size: 14px; color: var(--GWD-Green); text-decoration: underline; letter-spacing: 0; }

section.home { height: calc(100vh - 160px); }
section.home div.quick-menu ul li { width: 18vw; height: 18vw; opacity: 1.0; transform: translateY(-50px); }
section.home div.quick-menu ul li a { padding-top: 10vw; background-size: auto 36px; font-size: 14px; }
section.home div.quick-menu ul li:last-child a { background-size: 36px auto; }

}

/******************** ~ 920PX ********************/

@media all and (max-width:920px) {

html { font-size: 16px; }

header { height: 60px; }
header div.container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
header h1 { width: 82px; height: 32px; margin-top: 0; }
header button.drawer { display:block; width: 20px; height: 18px; }
header nav.gnb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; background: rgba(0, 0, 0, 0.5); transform: scale(0); opacity: 0; transition: transform 0s 0.3s, opacity 0.3s; z-index: 999; }
header nav.gnb > ul { display: block; width: 260px; height: 100%;  padding: 0; background: #fff; overflow: auto; transform: translateX(-260px); opacity: 0; transition: all 0.3s; }
header nav.gnb > ul > li.home { display: block; }
header nav.gnb > ul > li + li { margin-left: 0; border-top: 1px solid #e1e1e1; }
header nav.gnb > ul > li > a { display: block; height: 50px; padding: 0 20px; font-size: 14px; font-weight: 500; line-height: 50px; transition: all 0.3s ease-out; }
header nav.gnb > ul > li:hover > a { color: var(--GWD-Green); }
header nav.gnb > ul > li > a.on { font-weight: 700; color: var(--GWD-Green); }
header nav.gnb > ul > li > ul { display: block; background: #f9f9f9; border-top: 1px solid #eee; }
header nav.gnb > ul > li > ul > li { padding-left: 20px; opacity: 1.0; }
header nav.gnb > ul > li > ul > li > a { display: block; height: 40px; font-size: 14px; font-weight: 500; line-height: 40px; color: #aaa; transition: all 0.3s ease-out; }

body.menu-on header button.drawer::before { background: #fff; transform: rotate(45deg); }
body.menu-on header button.drawer::after { height: 2px; background: #fff; border: 0 none; transform: rotate(-45deg); }
body.menu-on header nav.gnb { transform: scale(1.0); opacity:1.0; transition-delay: 0s; }
body.menu-on header nav.gnb > ul { transform: translateX(0); opacity: 1.0; }

main { padding: 5px 0; }

main hgroup div.container { height: 240px; }
main hgroup h1 { font-size: 48px; }
main hgroup p { font-size: 17px; }

main nav.lnb div.container { height: 54px; }
main nav.lnb a { height: 54px; font-size: 18px; line-height: 54px; }
main nav.lnb a + a { margin-left: 24px; }

main h2 { margin-top: 50px; }
main h2 span { font-size: 15px; }
main h2 strong { font-size: 38px; }

section.content { margin-top: 40px; }

section.intro { margin-top: 40px; }
section.intro p.point { width: 42px; height: 42px; background-size: 28px auto; }
section.intro h1 { margin-top: 28px; font-size: 30px; }
section.intro div.brand { margin-top: 42px; }
section.intro div.brand figure { flex: 0 0 calc(100% - 540px); }
section.intro div.brand div { flex: 0 0 500px; }
section.intro div.brand div p.head { font-size: 24px; }
section.intro div.brand div p.head strong { font-size: 28px; }
section.intro div.brand div ul li:before { top: 10px; width: 6px; height: 6px; }

section.push h1 { font-size: 30px; }
section.push figure { margin-top: 42px; }

section.history { margin-top: 40px; }
section.history div.text { padding: 60px 100px; }
section.history div.text p.head { font-size: 24px; }
section.history div.text p.article { font-size: 16px; }
section.history ol { margin-top: 40px; }
section.history ol li + li { margin-top: 32px; }
section.history ol li p.year { font-size: 16px; }
section.history ol li p.year strong { font-size: 20px; }
section.history ol li dl { margin-top: 30px; }
section.history ol li dl dt { font-size: 15px; }
section.history ol li dl dt span { font-size: 13px; }
section.history ol li dl dd { font-size: 15px; }

section.restaurant h1 { font-size: 30px; }
section.restaurant h1 span.label { height: 28px; margin-bottom: 5px; padding: 0 10px; font-size: 16px; line-height: 28px; border-radius: 14px; }
section.restaurant p.intro { margin-top: 20px; font-size: 18px; }

main.food p.intro { font-size: 18px; }

section.food { margin-top: 40px; }
section.food.convenient { padding: 0 0 120px; }
section.food div.info p.head { font-size: 18px; }
section.food div.info ul.feature li { height: 50px; font-size: 15px; line-height: 48px; border-radius: 25px; }
section.food div.info ul.detail li dl { font-size: 13px; }
section.food div.info ul.exp li { flex: 0 0 110px; height: 110px; padding-top: 64px; background-position: center calc(50% - 18px); background-size: auto 36px; font-size: 15px; }
section.food div.info ul.exp li:first-child { background-size: auto 40px; }
section.food a.move { width: 360px; height:60px; margin: 40px auto 0; font-size: 18px; font-weight: 500; line-height: 60px; border-radius: 30px; }
section.food ul.img-wrap { margin-top: 40px; }

section.addition div.container { padding-top: 120px; }
section.addition p.small-head { font-size: 22px; }
section.addition ul + p.small-head { margin-top: 40px; }
section.addition ul { margin-top: 20px; }
section.addition ul.online li { height: 24px; }
section.addition ul.online li + li { margin-left: 14px; }
section.addition ul.offline li dl dt { width: 60px; font-size: 14px; }
section.addition ul.offline li dl dd { margin-top: 10px; font-size: 13px; }

section.season { margin-top: 40px; }
section.season ul.img { flex: 0 0 calc(100% - 390px); }
section.season div.intro { flex: 0 0 380px; }
section.season div.intro p.preface { padding: 20px; font-size: 24px; }
section.season div.intro p.exp { margin-top: 20px; padding: 0 20px; font-size: 14px; }
section.season div.intro dl.composition { margin-top: 20px; padding: 0 20px; font-size: 14px; }
section.season div.intro ul.help { padding: 20px; font-size: 13px; }

section.table { margin-top: 40px; }
section.table ul.img { flex: 0 0 calc(100% - 270px); }
section.table div.intro { flex: 0 0 260px; }
section.table div.intro p.exp { padding:20px 20px 0; font-size: 14px; }
section.table div.intro dl.composition { padding: 0 20px; font-size: 14px; }
section.table div.intro ul.help { padding: 20px; font-size: 13px; }

section.tour { padding: 0 0 120px; }

section.festa div.container { padding-top: 120px; }
section.festa ul.list li dl dt { height: 46px; font-size: 18px; line-height: 46px; }
section.festa ul.list li dl dd { padding: 16px 10px; font-size: 14px; }

section.bbs-list ul li > dl > dd { margin-left: 20px; }
section.bbs-list ul li > dl > dd a { font-size: 18px; }
section.bbs-list ul li > dl > dd dl.info { margin-top: 16px; font-size: 14px; }

div.pagination { margin-top: 40px; }

section.bbs-view h1 { font-size: 28px; }
section.bbs-view div.info dl { font-size: 14px; }
section.bbs-view div.editor { margin-top: 40px; }
section.bbs-view ul.file { margin-top: 40px; }
section.bbs-view div.post { margin-top: 40px; }
section.bbs-view div.post dl dt { flex: 0 0 80px; height: 32px; line-height: 32px; border-radius: 16px; }
section.bbs-view div.post dl dd { flex: 0 0 calc(100% - 90px)}
section.bbs-view a.move-list { display: block; width: 200px; height:60px; margin: 40px auto 0; font-size: 18px; font-weight: 500; line-height: 60px; border-radius: 30px; }

section.home { height: calc(100vh - 120px); min-height: 660px; }
section.home h1 { font-size: 36px; }
section.home figure.brand { height: 140px; margin-top: 30px; }
section.home figure.vegetable { height: 270px; }

}

/******************** ~ 768PX ********************/

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

html { font-size: 15px; }

footer {top:0px ; bottom: 80px; width: 100%; background: var(--GWD-Green); z-index: 11; margin: 0;padding: 0 0 0 0; }
footer div.container {width: 100%;height: 80px;margin: 0;padding: 0; }
footer div.container p.info { font-size: 14px; }
footer div.container p.copyright { font-size: 14px; }

main hgroup div.container { height: 220px; }
main hgroup h1 { font-size: 42px; }
main hgroup p { margin-top: 10px; font-size: 16px; }

main nav.lnb { top:54px; background: var(--GWD-LightGreen); height: 40px; padding : 0;}
main nav.lnb div.container { height: 50px; }
main nav.lnb a { height: 50px; font-size: 16px; line-height: 50px; }
main nav.lnb a.on:before { height: 3px; }
main nav.lnb a + a { margin-left: 20px; }

main h2 { margin-top: 40px; }
main h2 span { font-size: 14px; }
main h2 strong { font-size: 32px; }


section.content {top: 420px; padding: 0; }

section.bbs-list {top: 190px; }
section.bbs-list ul li { padding: 30px 0; }
section.bbs-list ul li > dl > dt { flex: 0 0 30%; height: 180px; }
section.bbs-list ul li > dl > dd a { font-size: 16px; }

section.bbs-view { font-size: 16px; }

section.intro { margin-top: 30px; }
section.intro p.point { width: 36px; height: 36px; background-size: 24px auto; }
section.intro h1 { margin-top: 24px; font-size: 26px; }
section.intro div.brand { margin-top: 36px; }
section.intro div.brand figure { flex: 0 0 calc(100% - 440px); }
section.intro div.brand div { flex: 0 0 400px; }
section.intro div.brand div p.head { font-size: 20px; }
section.intro div.brand div p.head strong { font-size: 24px; }

section.push h1 { font-size: 26px; }
section.push figure { margin-top: 36px; }

section.history { margin-top: 30px; }
section.history div.text { padding: 50px 90px; }
section.history div.text p.head { font-size: 22px; }
section.history div.text p.article { font-size: 15px; }
section.history ol { margin-top: 36px; }
section.history ol:before { left: 16px; }
section.history ol li { padding-left: 56px !important; padding-right:0 !important; text-align:left !important; }
section.history ol li:before { left:0 !important; margin:0 !important; }
section.history ol li:after { left:10px !important; margin:0 !important; }
section.history ol li + li { margin-top: 30px; }
section.history ol li p.year { font-size: 15px; }
section.history ol li p.year strong { font-size: 18px; }
section.history ol li dl { margin-top: 26px; padding-left:100px !important; padding-right:0 !important; }
section.history ol li dl dt { width: 100px; font-size: 14px; left:0 !important; }
section.history ol li dl dt span { font-size: 12px; }
section.history ol li dl dd { font-size: 14px; }

section.restaurant h1 { font-size: 26px; }
section.restaurant h1 span.label { height: 26px; font-size: 15px; line-height: 26px; border-radius: 13px; }
section.restaurant p.intro { margin-top: 16px; font-size: 16px;; }

main.food p.intro { font-size: 16px; }

section.food { margin-top: 30px; }
section.food.convenient { padding: 0 0 100px; }
section.food div.info p.head { font-size: 16px; }
section.food div.info ul.feature li { height: 46px; font-size: 14px; line-height: 44px; border-radius: 23px; }
section.food div.info ul.detail li dl { font-size: 12px; }
section.food div.info ul.exp li { flex: 0 0 96px; height: 96px; padding-top: 56px; background-position: center calc(50% - 16px); background-size: auto 32px; font-size: 13px; }
section.food div.info ul.exp li:first-child { background-size: auto 36px; }
section.food figure { height: 320px; }
section.food ul.img-wrap { margin-top: 30px; }
section.food ul.img-wrap li { flex: 0 0 calc(33.33vw - 26.66px); height: calc(33.33vw - 26.66px); }
section.food ul.img-wrap li:nth-child(n+4) { margin-top: 20px; }

section.addition p.big-head { height: 120px; top: -60px; font-size: 26px; line-height: 120px; }
section.addition div.container { padding-top: 100px; }
section.addition p.small-head { font-size: 20px; }
section.addition ul + p.small-head { margin-top: 30px; }
section.addition ul { padding: 0 20px; }
section.addition ul.online li { height: 20px; }
section.addition ul.online li + li { margin-left: 10px; }

section.tour { margin-top: 40px; padding: 0 0 100px; }
section.tour figure.map { flex: 0 0 calc(100% - 300px); }
section.tour div.intro { flex: 0 0 290px; }
section.tour div.intro p.exp { padding:20px 20px 0; }
section.tour div.intro dl.composition { padding: 0 20px; }
section.tour div.intro ul.help { padding: 20px; }

section.festa p.big-head { height: 120px; top: -60px; font-size: 26px; line-height: 120px; }
section.festa div.container { padding-top: 100px; }
section.festa ul.list { flex-wrap: wrap; justify-content: flex-start; }
section.festa ul.list li { flex: 0 0 calc(33.33% - 16px); }
section.festa ul.list li + li { margin-left: 24px; }
section.festa ul.list li:nth-child(3n+1) { margin-left: 0; }
section.festa ul.list li:nth-child(n+4) { margin-top: 24px; }




div.pagination { margin-top: 30px; }

section.sns ul li { flex: 0 0 220px; }
section.sns ul li + li { margin-left: 60px; }
section.sns ul li dl dt { height: 120px; }
section.sns ul li dl dd:nth-child(3) { font-size: 16px; }
section.sns ul li dl dd a { font-size: 13px; }

section.home { min-height: 580px; }
section.home h1 { font-size: 32px; }
section.home figure.brand { height: 100px; }
section.home figure.vegetable { height: 220px; }


/* ¸ð¹ÙÀÏ ¸Þ´º ¸¸µé±â */
.mobile-menu {position: fixed;top: 10px;right: 10px;z-index: 100;}
#menuToggle {background-color: #00838f;color: white;border: none;padding: 10px 15px;font-size: 20px;cursor: pointer;border-radius: 5px;}
#menuList {list-style: none;padding: 0;margin: 0;background-color: #f0f0f0;position: absolute;top: 40px;right: 0;display: none;border-radius: 5px;box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
#menuList li {padding: 10px 15px;}
#menuList li a {text-decoration: none;color: #333;display: block;}
.hidden {display: none;}


}

/******************** ~ 640PX ********************/

@media all and (max-width:640px) {

html { font-size: 14px; }

footer div.container { display: block; padding-top: 16px; box-sizing: border-box; }
footer p.info { font-size: 11px; }
footer p.info strong { margin-right: 4px; }
footer p.copyright { margin-top: 4px; font-size: 11px; }

main hgroup div.container { height: 200px; }
main hgroup h1 { font-size: 36px; }
main hgroup p { font-size: 15px; }

main nav.lnb div.container { height: 48px; }
main nav.lnb a { height: 48px; font-size: 14px; line-height: 48px; }
main nav.lnb a.on:before { height: 2px; }
main nav.lnb a + a { margin-left: 18px; }

section.content { padding: 0 0 40px; }

section.intro { padding: 0 0 40px; }
section.intro p.point { width: 36px; height: 36px; background-size: 20px auto; }
section.intro h1 { margin-top: 20px; font-size: 24px; }
section.intro div.brand { display: block; margin-top: 24px; }
section.intro div.brand figure { display: block; height: 120px; }
section.intro div.brand figure img { height: 100%; }
section.intro div.brand div { display: block; margin-top: 30px; }
section.intro div.brand div p.head { font-size: 20px; text-align: center; }
section.intro div.brand div p.head strong { font-size: 24px; text-align: center; }
section.intro div.brand div ul li:before { top: 9px; width: 5px; height: 5px; }

section.push { padding: 40px 0; }
section.push h1 { font-size: 24px; }
section.push figure { margin-top: 24px; }

section.history { margin-top: 30px; padding: 0 0 40px; }
section.history div.text { padding: 40px 50px; }
section.history div.text p.head { font-size: 20px; }
section.history div.text p.article { font-size: 14px; }
section.history ol { margin-top: 30px; }

section.restaurant { padding: 40px 0; }
section.restaurant h1 { font-size: 24px; }
section.restaurant h1 span.label { height: 24px; font-size: 14px; line-height: 24px; border-radius: 12px; }
section.restaurant p.intro { margin-top: 14px; font-size: 15px;; }
section.restaurant div.info { margin-top: 20px; }
section.restaurant div.info ul.text li + li { margin-top: 14px; }
section.restaurant div.info ul.text li dl dt { flex: 0 0 20px; height: 20px; background-size: 18px auto; }
section.restaurant div.info ul.text li:nth-child(2) dl dt { background-size: 20px auto; }
section.restaurant div.info ul.text li dl dd { padding: 1px 0 0 10px; }
section.restaurant div.info ul.photo { margin-top: 20px; }

main.food p.intro { font-size: 15px; }

section.food { margin-top: 30px; padding: 0 0 40px; }
section.food.convenient { padding: 0 0 80px; }
section.food div.flex-wrap { position: relative; display: block; padding-top: 330px; }
section.food div.info p.head { font-size: 16px; }
section.food div.info ul.feature li { height: 46px; font-size: 14px; line-height: 44px; border-radius: 23px; }
section.food div.info ul.detail { margin-top: 30px; }
section.food div.info ul.exp { justify-content: center; }
section.food div.info ul.exp li + li { margin-left: 10px; }
section.food figure { position: absolute; top: 0; left: 0; right: 0; width: 440px; height: 300px; margin: 0 auto; border-radius: 20px; }
section.food a.move { width: 280px; height:50px; margin: 30px auto 0; font-size: 16px; line-height: 48px; border-radius: 25px; }

section.addition { padding: 0 0 40px; }
section.addition p.big-head { height: 100px; top: -50px; font-size: 24px; line-height: 100px; }
section.addition div.container { padding-top: 80px; }
section.addition p.small-head { font-size: 18px; }
section.addition ul.online li { height: 16px; }
section.addition ul.online li + li { margin-left: 6px; }

section.season { margin-top: 30px; padding: 0 0 40px; }
section.season div.flex-wrap { flex-wrap: wrap; }
section.season ul.img { flex: 0 0 100%; margin-top: 20px; }
section.season div.intro { flex: 0 0 100%; }
section.season div.intro p.preface { font-size: 20px; }
section.season div.intro ul.help { font-size: 12px; }

section.table { margin-top: 30px; padding: 0 0 40px; }
section.table div.flex-wrap { flex-wrap: wrap; }
section.table ul.img { flex: 0 0 100%; margin-top: 20px; }
section.table div.intro { flex: 0 0 100%; }
section.table div.intro ul.help { font-size: 12px; }

section.tour { margin-top: 30px; padding: 0 0 80px; }
section.tour div.flex-wrap { flex-wrap: wrap; }
section.tour figure.map { flex: 0 0 100%; }
section.tour div.intro { flex: 0 0 100%; margin-top: 20px; }

section.festa { padding: 0 0 40px; }
section.festa p.big-head { height: 100px; top: -50px; font-size: 24px; line-height: 100px; }
section.festa div.container { padding-top: 80px; }

section.bbs-list ul li > dl > dt { flex: 0 0 26%; height: 120px; }

section.bbs-view h1 { font-size: 24px; }
section.bbs-view div.info dl { font-size: 13px; }
section.bbs-view div.editor { margin-top: 30px; }
section.bbs-view ul.file { margin-top: 30px; }
section.bbs-view div.post { margin-top: 30px; }
section.bbs-view div.post dl dt { flex: 0 0 70px; height: 30px; line-height: 30px; border-radius: 15px; }
section.bbs-view div.post dl dd { flex: 0 0 calc(100% - 80px); }
section.bbs-view a.move-list { height:50px; margin: 30px auto 0; font-size: 16px; line-height: 48px; border-radius: 25px; }

section.sns ul li { flex: 0 0 190px; }
section.sns ul li + li { margin-left: 30px; }
section.sns ul li dl dt { height: 100px; }
section.sns ul li dl dd a { font-size: 12px; }

section.home { min-height: 480px; }
section.home h1 { font-size: 24px; }
section.home figure.brand { height: 70px; }
section.home figure.vegetable { height: 160px; }
section.home div.quick-menu ul li a { padding-top: 9vw; background-size: auto 24px; font-size: 13px; }
section.home div.quick-menu ul li:last-child a { background-size: 24px auto; }

}

/******************** ~ 480PX ********************/

@media all and (max-width:480px) {

html { font-size: 13px; }

main hgroup div.container { height: 180px; }
main hgroup h1 { font-size: 32px; }
main hgroup p { font-size: 13px; }

main h2 { margin-top: 30px; }
main h2 span { font-size: 13px; }
main h2 strong { font-size: 28px; }

section.content { margin-top: 26px; padding: 0 0 30px; }

section.intro { margin-top: 26px; padding: 0 0 30px; }
section.intro p.point { width: 30px; height: 30px; background-size: 20px auto; }
section.intro h1 { margin-top: 20px; font-size: 22px; }
section.intro div.brand { display: block; margin-top: 20px; }
section.intro div.brand figure { height: 120px; text-align: center; }
section.intro div.brand div { flex: 0 0 400px; }
section.intro div.brand div p.head { font-size: 17px; }
section.intro div.brand div p.head strong { font-size: 20px; }
section.intro div.brand div ul li:before { top: 9px; width: 5px; height: 5px; }

section.push { padding: 30px 0; }
section.push h1 { font-size: 22px; }
section.push figure { margin-top: 20px; }

section.history { margin-top: 26px; padding: 0 0 30px; }
section.history div.text { padding: 40px; }
section.history div.text p.head { font-size: 20px; }
section.history div.text p.article { font-size: 13px; }
section.history ol { margin-top: 26px; }
section.history ol:before { left:10px; top:3px; }
section.history ol li { padding-left:30px !important; }
section.history ol li:before { top:1px !important; width:20px; height:20px; }
section.history ol li:after { top:7px !important; left:6px !important; width:8px; height:8px; }
section.history ol li + li { margin-top: 26px; }
section.history ol li p.year { font-size: 14px; }
section.history ol li p.year strong { font-size: 16px; }
section.history ol li dl { margin-top: 22px; padding-left:90px; }
section.history ol li dl dt { width: 90px; font-size: 13px; }
section.history ol li dl dd { font-size: 13px; }

section.restaurant { padding: 30px 0; }
section.restaurant h1 { font-size: 22px; }
section.restaurant h1 span.label { height: 22px; font-size: 13px; line-height: 22px; border-radius: 11px; }
section.restaurant p.intro { margin-top: 12px; font-size: 13px;; }
section.restaurant div.info ul.text li + li { margin-top: 12px; }

main.food p.intro { font-size: 13px; }

section.food { margin-top: 26px; padding: 0 0 30px; }
section.food div.flex-wrap { padding-top: 306px; }
section.food div.info ul.detail { margin-top: 26px; }
section.food div.info ul.detail li dl { font-size: 11px; }
section.food figure { width: 100%; height: 280px; }
section.food a.move { width: 220px; height:44px; margin: 26px auto 0; font-size: 14px; line-height: 42px; border-radius: 22px; }
section.food ul.img-wrap li { flex: 0 0 calc(50vw - 30px); height: calc(50vw - 30px); }
section.food ul.img-wrap li:nth-child(n+3) { margin-top: 20px; }

section.addition { padding: 0 0 30px; }
section.addition p.big-head { height: 90px; top: -45px; font-size: 22px; line-height: 90px; }
section.addition p.small-head { font-size: 16px; }
section.addition ul { padding: 0 10px; }
section.addition ul.online { flex-wrap: wrap; }
section.addition ul.online li { margin: 6px; }
section.addition ul.offline li dl dt { width: 50px; font-size: 13px; }
section.addition ul.offline li dl dd { font-size: 12px; }

section.season { padding: 0 0 30px; }

section.table { padding: 0 0 30px; }

section.festa { padding: 0 0 30px; }
section.festa p.big-head { height: 90px; top: -45px; font-size: 22px; line-height: 90px; }
section.festa ul.list li { flex: 0 0 100%; }
section.festa ul.list li + li { margin-left: 0; margin-top: 16px; }

section.bbs-list ul li > dl > dt { flex: 0 0 24%; height: 80px; }
section.bbs-list ul li > dl > dd { margin-left: 10px; }

div.pagination { margin-top: 20px; }

section.bbs-view a.move-list { height:44px; margin: 26px auto 0; font-size: 14px; line-height: 42px; border-radius: 22px; }

section.sns ul { flex-direction: column; }
section.sns ul li { flex: 0 0 200px; }
section.sns ul li + li { margin-left: 0; margin-top: 40px; }
section.sns ul li dl dt { height: 100px; }
section.sns ul li dl dt img { max-height: 100%; }
section.sns ul li dl dd { margin-top: 10px; }
section.sns ul li dl dd:nth-child(2) { margin-top: 20px; letter-spacing: 0; }
section.sns ul li dl dd:nth-child(3) { margin-top: 20px; font-size: 16px; font-weight: 700; }
section.sns ul li dl dd a { font-size: 13px; color: var(--GWD-Green); text-decoration: underline; letter-spacing: 0; }

section.home { min-height: 560px; }
section.home h1 { font-size: 21px; }
section.home figure.brand { height: 60px; }
section.home figure.vegetable { height: 100px; }
section.home div.quick-menu ul { justify-content: center; flex-wrap: wrap; }
section.home div.quick-menu ul li { width: 24vw; height: 24vw; margin: 1vw 2vw; transform: translateY(-70px); }
section.home div.quick-menu ul li a { padding-top: 13vw; background-position: center calc(50% - 20px); background-size: auto 28px; font-size: 13px; }
section.home div.quick-menu ul li:last-child a { background-size: 28px auto; }

}

/******************** ~ 375PX ********************/

@media all and (max-width:375px) {

html { font-size: 12px; }

main hgroup div.container { height: 130px; }
main hgroup h1 { font-size: 28px; }
main hgroup p { font-size: 12px; }

section.history div.text { padding: 30px; }
section.history div.text p.head { font-size: 18px; }
section.history div.text p.article { font-size: 12px; }
section.history ol li { padding-left:26px !important; }
section.history ol li dl { padding-left:80px; }
section.history ol li dl dt { width: 80px; font-size: 12px; }
section.history ol li dl dd { font-size: 12px; }

section.bbs-list ul li > dl > dt { flex: 0 0 22%; height: 60px; }

section.bbs-view h1 { font-size: 20px; }
section.bbs-view div.info dl { font-size: 12px; }

section.home { min-height: 480px; }
section.home h1 { font-size: 20px; }
section.home figure.brand { height: 60px; }
section.home figure.vegetable { height: 100px; }
section.home div.quick-menu ul li { transform: translateY(-90px); }
section.home div.quick-menu ul li a { padding-top: 12vw; background-position: center calc(50% - 16px); background-size: auto 22px; font-size: 12px; }
section.home div.quick-menu ul li:last-child a { background-size: 22px auto; }

}