@charset "utf-8";



/* -----------------------------------------------------------

#header

----------------------------------------------------------- */

/* transition */
#header,
#header .logoArea,
#header .logoAreaSmall,
#header .snsArea,
#header .calendarArea,
#header .contactArea{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }

/* #header */
#header,
#header:after{ -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }

/* --- #header --- */
#header {height: 90px;position: fixed;top: 10%;left: 5%;right:0;width: 90%;background: rgba(255,255,255,0.9);background: #743916;z-index: 1000;}
#header.autofix_sb.fixed {height: 80px;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);background: #743916;width: 100%;}

@media only screen and (max-width: 900px) {
    #header { display: none; }
}


/* ======== #header .logoArea ======== */
#header .logoArea {position: absolute;top: 5px;left: 8%;z-index: 3;margin-left: -60px;width: 100px;}
#header .logoArea h1 {width: 70px;height: 70px;line-height: 0;font-size: 0;margin: 0;}
#header .logoArea h1 a {background: url(../images/logo-header.svg) center center no-repeat;display: block;position: relative;overflow: hidden;text-indent: -999px;/* z-index: 1003; */width: 100px;height: 70px;background-size: 100px 70px;}
#header .logoArea h1 a:hover { opacity: 0.7; }
#header.autofix_sb.fixed .logoArea { top: -90px; opacity: 0; height: 0; }

/* IE9 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #header .logoArea h1 a {background: url(../images/logo_Header.png) center center no-repeat;
        display: block;position: relative;
        overflow: hidden;text-indent: -999px;/* z-index: 1003; */
        width: 80px;height: 45px;background-size: 80px 45px;top: 10px}

}


/* ======== #header .logoAreaSmall ======== */
#header .logoAreaSmall { position: absolute; top: -90px; left: 0; z-index: 1002; opacity: 0; }
#header .logoAreaSmall h1 {width: 80px;height: 50px;line-height: 0;font-size: 0;margin: 0;padding-left: 40px;}
#header .logoAreaSmall h1 a {width: 100px;height: 70px;background: url(../images/logo-header.svg) center center no-repeat;background-size: 100px 65px;display: block;position: relative;overflow: hidden;text-indent: -999px;z-index: 1003;}
/* #ie9 #header .logoAreaSmall h1 a { background: url(../images/logo_Header.png) center center no-repeat; } */
#header .logoAreaSmall h1 a:hover { opacity: 0.7; }
#header.autofix_sb.fixed .logoAreaSmall { top: 0; opacity: 1; }

/* IE9 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #header .logoAreaSmall h1 a {
        background: url(../images/logo_Header.png) no-repeat 100% 22%;
        width: 80px;height: 45px;
        top: 10px;
    }

}





/* ======== #header .navArea ======== */
#header .navArea {position: absolute;top: 15%;left: 120px;right: 0;display: block;z-index: 2;text-align:left;}
#header.autofix_sb.fixed .navArea  {top: 8px;}

#header .navArea ul.navi {font-size: 0;width: 90%;position: relative;right: 0;top: 3px;margin-left: 3%;}
#header .navArea ul.navi li {display: inline-block; *display: inline;*zoom: 1;position: relative;margin: 0 12px;padding: 0 12px;width: auto;height: 60px;}
#header .navArea ul.navi li a {display: block;margin: 0;height: 50px;font-size: 15px;font-weight: 300;letter-spacing: 1.5px;letter-spacing:1px;text-align: center;position: relative;z-index:2;}
/* span.en */
#header .navArea ul.navi li span.en {font-size: 16px;/* font-family: 'Catamaran', sans-serif; *//* font-family: 'Playfair Display', Verdana, serif; */font-weight:400;letter-spacing:2.5px;line-height: 40px;color: #fff;}
#header .navArea ul.navi a:hover {  color:#fff;  }
#header .navArea ul.navi a:after { position: absolute; bottom: 12px; left: 33%; right: 33%; height: 1px; display: block; content: ""; background: transparent; z-index:-1; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/* focus */
#header .navArea ul.navi li:hover a {  color:#fff;  }
#header .navArea ul.navi li:hover a:after { left: 0px; right: 0px; background: #fff; }


#header .navArea ul.navi a:before { position: absolute; bottom: 14px; left: 0; right: 0; height: 1px; display: block; content: ""; background: transparent; z-index:-2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.navi a:hover:before { left: 33%; right: 33%; background: transparent;}






.render {
    display: block;
    color: #ffffff;
    font-size: 1.2rem;
    /* font-family: "������", YuMincho, "�q���M�m���� ProN W3", "Hiragino Mincho ProN","HG����E","�l�r �o����","�l�r ����",serif; */
    font-family: 'Kievit', sans-serif;
    /* font-weight: normal; */
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-top: 12px;
}

.fsize_1{
    font-size: 0.4rem;
    line-height: 0.3;
}





/* ======== .subNav ======== */

.subNav 
{width: 300px;
    text-align: center;
    position: absolute;
    top: 60px;
    padding:0 2px 10px;
    margin: 0;
    left: -30px; 
    z-index: -1;
    overflow: hidden;}
.off .subNav { display:none; opacity:0;}
.off .subNav .inner {/* width: 250px; */height: 100%;padding: 0;}
.subNav .inner {width: 100%;width:auto;margin:0 -2px 0;padding: 15px;overflow: hidden;background: #ffffff;background: url(../images/noise.png) repeat #fefefe;background:#f9fcfd;background: #036b6e;-webkit-animation:show 0.2s ease-in 0s;-moz-animation:show 0.2s ease-in 0s;-ms-animation:show 0.2s ease-in 0s;-o-animation:show 0.2s ease-in 0s;animation:show 0.2s ease-in 0s;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);position:relative;z-index:1;}
.subNav .inner:before { position:absolute; top:0; left:0; right:50%; bottom:0; content:""; border:#eee 0px solid; border-right:none; z-index:-1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.subNav .inner:after { position:absolute; top:0; left:50%; right:0; bottom:0; content:""; border:#eee 0px solid; border-left:none; z-index:-1; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.off .subNav .inner > * { opacity: 0; }


/* ul.inner2 */
#header .navArea ul.navi .subNav ul.inner2 { font-size: 0; margin:0 0 0 1px; text-align: left; position: relative; }
#header .navArea ul.navi .subNav ul.inner2 li {width: 25%;width: 100%;height: auto;margin: 0 0 -1px -1px;padding:0;position: relative;z-index: 0;overflow:hidden;background: #01696c;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

#header .navArea ul.navi .subNav ul.inner2 {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /*   border: 1px solid #eee; */
    padding: 0.4em;
    margin: 0 0 2em;
    /*   background: #fff;*/
    justify-content: center;
    /* width: 600px; */
}

#header .navArea ul.navi .subNav ul.inner2 li {
    padding: 1em;
    border-radius: 5px;
    flex: 1 0 0;
    margin: 0.4em;
    text-align: center;
}





#header .navArea ul.navi .subNav ul.inner2 li:after { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; border: #eee 0px solid; content: ""; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .navArea ul.navi .subNav ul.inner2 li:before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; background: #036b6e; content: ""; z-index: -1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .navArea ul.navi .subNav ul.inner2 li:hover:before { background:#ffffff; }







/* ul.inner2 li a */
#header .navArea ul.navi .subNav ul.inner2 li a {display: block;margin: 0;padding: 0;height: 60px;color: #fff;line-height: 0;position: relative;text-align: left;}
#header .navArea ul.navi .subNav ul.inner2 li a:after { display:none; }
#header .navArea ul.navi .subNav ul.inner2 li a:hover { color:#fff; }

/* .txtArea */
#header .navArea ul.navi .subNav ul.inner2 li a .txtArea {font-size: 15px;line-height: 60px;text-align: left;padding-left: 30px;position:relative;letter-spacing:2px;}

#header .navArea ul.navi .subNav ul.inner2 li a .txtArea:before { 
    position:absolute; top:0; 
    right:20px; bottom:0; 
    color:#fff; font-size:12px; 
    line-height:60px; font-family: 'themify'; 
    content:"\e61a"; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}

#header .navArea ul.navi .subNav ul.inner2 li a:hover .txtArea:before { 
    color: #fff; content: "\e649"; 
    -webkit-transform:translate(5px,0);
    -moz-transform:translate(5px,0);
    -o-transform:translate(5px,0);
    -ms-transform:translate(5px,0);
    transform:translate(5px,0);}


@keyframes show{from{opacity:0}to{opacity:1}}@-moz-keyframes show{from{opacity:0}to{opacity:1}}@-webkit-keyframes show{from{opacity:0}to{opacity:1}}@-o-keyframes show{from{opacity:0}to{opacity:1}}@-ms-keyframes show{from{opacity:0}to{opacity:1}}

/* ======== #header .snsArea ======== */
#header .snsArea {position: absolute;top: 28px;right: 10px;z-index: 1001;/* display: none; */color: #fff;}
/*#header.autofix_sb.fixed .snsArea { top: -90px; opacity: 0; height: 0; }*/
#header.autofix_sb.fixed .snsArea {top: 19px;right: 10px;display: block;}



/* .snsArea ul */
#header .snsArea ul { font-size:0; display:inline-block; }
#header .snsArea ul li { display:inline-block; margin:0; text-align:center;}
#header .snsArea ul li a {display:block;width: 30px;height: 40px;font-size:15px;font-size: 18px;color:#fff;font-weight:normal;position:relative;z-index:0;}
#header .snsArea ul li a i { line-height:30px; }
#header .snsArea ul li a:hover { font-size:18px; color:#ffffff;}
#header .snsArea ul li a:hover i { -webkit-transform: rotate(360deg) scale(1.1);-moz-transform: rotate(360deg) scale(1.1);-o-transform: rotate(360deg) scale(1.1);-ms-transform: rotate(360deg) scale(1.1);transform: rotate(360deg) scale(1.1);}
#header .snsArea ul li a.youtube { font-size:18px; }
#header .snsArea ul li a.youtube:hover { font-size:23px;}

/* ul.blog */
#header .snsArea ul.blog { position:relative; z-index:1; margin-left:10px; padding-left:18px; }
#header .snsArea ul.blog:before { position:absolute; top:10px; left:0; bottom:10px; width:0; content:""; border-left:#111 1px dotted; z-index:-1; }
#header .snsArea ul.blog li a { width:auto; height:30px; font-size:12px; font-family: 'Catamaran', sans-serif; font-weight:400; letter-spacing:1.5px; position:relative; z-index:2; }
#header .snsArea ul.blog li a:hover {color:#fff;}
#header .snsArea ul.blog li a i { font-size:14px; line-height:30px; font-weight:normal; padding-right:3px; }
#header .snsArea ul.blog li a:before { position:absolute; bottom:2px; left:0; right:0; height:0; content:""; border-bottom:#ddd 1px dotted; z-index:-2;}
#header .snsArea ul.blog li a:after { position:absolute; bottom:2px; left:0; right:100%; height:0; content:""; border-bottom:transparent 1px solid; z-index:-1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#header .snsArea ul.blog li a:hover:after{ right:0; border-bottom:#fff 1px solid; }



/* ======== #header .contactArea ======== */
#header .contactArea {position: absolute;top: 20px;right: 50px;z-index:2;right: 8%;margin-right: -60px;}
#header.autofix_sb.fixed .contactArea {top: 15px;right: 50px;margin: auto;}

#header .contactArea ul { font-size:0; list-style: none; }
#header .contactArea ul li {display: flex;margin: 0;text-align: center;flex-direction: column;border: #fff 1px solid;justify-content: center;}
#header .contactArea ul li a {display:block;padding: 0 20px 0 20px;height: 40px;color: #fff;font-size: 20px;font-weight:500;letter-spacing:0.5px;line-height:45px;position:relative;z-index:2;}
#header .contactArea li:hover {color: #743916;background: #fff;}
#header .contactArea li:hover a,#header .contactArea li:hover span {color: #743916;}
#header .contactArea ul li a:before {font-family: 'FontAwesome';content: "\f095";}
#header .contactArea ul li a:before,
#header .contactArea ul li a:after {/* -webkit-transition: all 0.5s ease; */-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;/* transition: all 0.5s ease; */}
#header .contactArea ul li a:before {/* position:absolute; *//* top:0; *//* right:0px; *//* bottom:0; *//* left:0px; *//* content:""; *//* border:#eee 1px solid; *//* z-index:-1; *//* color: #fff; */}
#header .contactArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
/* #header .contactArea ul li a:after {  position:absolute; top:0; right:15px; bottom:0;font-size: 8px;font-family: 'themify';content: "\e649";line-height: 45px;font-style: normal;z-index: 1; opacity:0;} */
/* #header .contactArea ul li a:hover:after {right:10px;opacity:1;} */
#header .contactArea ul li span {
    height: 10px;
    color: #fff;
    font-size: 0.6rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 5px;
}

#header .contactArea ul li a .icon { position: absolute; top: 0; left: 15px; bottom: 0; width: 20px; z-index: 0; }
#header .contactArea ul li a .icon:before {color: #fafafa;position:absolute;top:0;left:0;bottom:0;right: 0;font-size:16px;text-align:left;font-family: 'themify';content: "\e75a";font-weight:normal;}

#header .snsArea ul li a .icon:before {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right: 0;
    font-size:16px;
    text-align:left;
    font-family: 'FontAwesome';
    content: "\f003";
    font-weight:normal;
    color: #fff;
}



/* ======== #header .calendarArea ======== */
#header .calendarArea { position: absolute; top: 14px; right: 25px; z-index:2; }
#header.autofix_sb.fixed .calendarArea { top: 7px;right: 10px; }

/* .calendarArea ul */
#header .calendarArea ul { font-size:0; }
#header .calendarArea ul li { display:inline-block; margin:0; text-align:center; }
#header .calendarArea ul li a { display:block; padding:0 15px 0 50px; height:45px; color:#111; font-size:11px; font-weight:500; letter-spacing:1px; line-height:45px; position:relative; z-index:2; }
#header .calendarArea ul li a:hover { color:#016c6e; background:#fefefe; padding:0 30px 0 50px; }
#header .calendarArea ul li a i { font-size:15px; line-height:45px; padding-right:7px; font-weight: normal; }

#header .calendarArea ul li a:before,
#header .calendarArea ul li a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}

#header .calendarArea ul li a:before { position:absolute; top:0; right:0px; bottom:0; left:0px; content:""; border:#ddd 1px solid; z-index:-1; }
#header .calendarArea ul li a:hover:before { right:0px;left:0px; border:transparent 1px dotted; }
#header .calendarArea ul li a:after { position:absolute; top:0; right:15px; bottom:0; font-size: 8px; font-family: 'themify'; content: "\e649"; line-height: 45px; font-style: normal; z-index: 1; opacity:0;}
#header .calendarArea ul li a:hover:after { right:10px; opacity:1;}

/* .calendar */
#header .calendarArea ul li .calendar { position:absolute; top:5px; left:5px; bottom:5px; width:35px; border:#ddd 1px dotted; border-top:#ddd double; z-index:2; text-align:center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .calendarArea ul li a:hover .calendar { border:#016c6e 1px dotted; border-top:#016c6e double;}

/* .calendarArea p */
#header .calendarArea p { color:#111; font-family: 'Catamaran', sans-serif; font-weight:800; line-height:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .calendarArea p.month { position:absolute; top:10px; left:0; right:0; font-size:9px; text-transform:uppercase; }
#header .calendarArea p.day { position:absolute; left:0; right:0; bottom:10px; font-size:10px; font-family: 'Open Sans', sans-serif; font-weight:400; letter-spacing:0.5px;}
#header .calendarArea ul li a:hover p { color:#016c6e; }

@media only screen and (max-width: 1050px) {
    #header .calendarArea ul li a { padding:0 15px 0 40px; }	
    #header .calendarArea ul li a:hover { padding:0 15px 0 40px; }
    #header .calendarArea ul li .calendar { width:30px;}
    #header .calendarArea ul li a:after { display:none;}
}

@media only screen and (max-width: 1140px) {
    #header .navArea ul.navi li { margin:0 6px; padding:0 6px; }
    #header .navArea ul.navi li span.en { font-size:12.5px;letter-spacing:1.5px; }
}

@media only screen and (max-width: 945px) {
    #header .calendarArea ul li a { padding:0 10px; }	
    #header .calendarArea ul li a:hover { padding:0 10px; }
    #header .calendarArea ul li .calendar { display:none;}
}


/* -----------------------------------------------------------

#headerSp

----------------------------------------------------------- */

#headerSp { display: none; }
#headerSp {position: fixed;top:0;left:0;right:0;height: 60px;background: #743916;/* background: #016c6e; */z-index:1000;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);}

@media only screen and (max-width: 900px) {
    #headerSp { display: block; }
}

/* ======== #headerSp a.btnMenu ======== */
#headerSp a.btnMenu {position: absolute;to;top: 5px;ft:0;display: block;width:60px;height: 50px;color:#fefefe;z-index:0;}
#headerSp a.btnMenu span.lineTop {position: absolute;top:18px;left:18px;right:18px;height:1px;background: #fff;z-index:1;}
#headerSp a.btnMenu span.lineMiddle {position: absolute;top:50%;left:18px;right:18px;height:1px;background: #fff;z-index:1;}
#headerSp a.btnMenu span.lineBottom {position: absolute;bottom:17px;left:18px;right:18px;height:1px;background: #fff;z-index:1;}
/* ======== #headerSp .logoArea ======== */
#headerSp .logoArea {position: absolute;top: 5px;left:50%;z-index:1001;margin-left:-65px;}
#headerSp .logoArea h1 { width:129px; height:50px; line-height:0; font-size:0; margin:0; }
#headerSp .logoArea h1 a {position: relative;display: block;width:129px;height: 50px;background: url(../images/logo-footer.svg) center center / 129px 40px no-repeat;overflow: hidden;text-indent:-999px;z-index:1003;}

/* ======== #headerSp a.btnMenu ======== */
#headerSp a.btnCalendar { position: absolute; top:0; right:0; display: block; width:60px; height:50px; z-index:0; text-align:center; }
#headerSp a.btnCalendar span.calendar { position:absolute; top:8px; left:13px; bottom:8px; width:36px; border:#333 1px dotted; border-top:#333 double; z-index:2; text-align:center;}
#headerSp a.btnCalendar p { color:#111; font-family: 'Catamaran', sans-serif; font-weight:800; line-height:0; }
#headerSp a.btnCalendar p.month { position:absolute; top:0; left:0; right:0; line-height:20px; font-size:9px; text-transform:uppercase; }
#headerSp a.btnCalendar p.day { position:absolute; left:0; right:0; bottom:0; line-height:20px;font-size:10px; font-family: 'Open Sans', sans-serif; font-weight:400; letter-spacing:0.5px;}


/* language */
#headerSp .language {position: absolute; top:10px; right:18px;  }
#headerSp .language ul { position:relative; z-index:1; margin-left:10px; padding-left:18px; }
#headerSp .language ul li{ list-style:none;}
#headerSp .language ul:before { position:absolute; top:10px; left:0; bottom:10px; width:0; content:""; border-left:#111 1px dotted; z-index:-1; }
#headerSp .language ul li a { width:auto; height:30px; font-size:12px; font-family: 'Catamaran', sans-serif; font-weight:400; letter-spacing:1.5px; position:relative; z-index:2; }
#headerSp .language ul li a:hover {color:#016c6e;}
#headerSp .language ul li a i { font-size:14px; line-height:30px; font-weight:normal; padding-right:3px; }
#headerSp .language ul li a:before { position:absolute; bottom:2px; left:0; right:0; height:0; content:""; border-bottom:#ddd 1px dotted; z-index:-2;}
#headerSp .language ul li a:after { position:absolute; bottom:2px; left:0; right:100%; height:0; content:""; border-bottom:transparent 1px solid; z-index:-1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#headerSp .language ul li a:hover:after{ right:0; border-bottom:#016c6e 1px solid; }



/*============

予約フォーム

==============*/


.btn_reserve {
    position: fixed;
    /* top: 30%;*/
    top: 20%;
    right: 0px;
    z-index: 9999;
    line-height: 0.8em;
}

.btn_reserve a {
    border: solid 3px #472b14;
    padding: 10px 30px;
    color: #fff;
    background: #472b14;
    font-size: 20px;
    text-decoration: none;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 50px;
    /* height: auto; */

    /* radius */
    border-top-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;

    /* radius */
    border-bottom-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
}

.btn_reserve a:hover {
    border: solid 2px #472b14;
    background: #ffffff;
    color: #472b14;
}

.btn_reserve span{
    display:inline-block;
    text-align:center;
    position: relative;
    transition: .5s}

.btn_reserve :hover span {
    -webkit-transform: rotateX(360deg);
    transform: rotateX(360deg);
    color:#fff;
}

.wave_area {
    position: relative;
    height: 100px;
    top: -80px;
    z-index: 2;
}

canvas{
    position: absolute;
    bottom: -1px;
    left:0;
    width: 100%;
}

.wave2{
    position: relative;
    margin-bottom: 140px;
}

.wave2 canvas{
    position: absolute;
    bottom: 0;
    top:0;
    right: 0;
    left:0;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

@media only screen and (max-width: 812px) {
    .wave_area {
        top: -130px;
    }

    .wave2{
        margin-bottom: 140px;
    }
}

@media only screen and (max-width: 500px) {
    .wave_area {
        top: -150px;
    }

    .wave2{
        margin-bottom: 10px;
    }

    .wave2 canvas {
        max-width: 350px;
        /* top: -30px; */
    }
}

img.side_menu {
    position: absolute;
    max-width: 100%;
    top: 0px;
    left: 0;
    margin: auto;
    right: 0;
    padding: 8px 121px;
    background: #743916;
}