/* ======== .scroll_position ======== */ .link_scroll { margin:-40px 0 0; padding:40px 0 0; } @media only screen and (max-width: 738px) { .link_scroll { margin:-60px 0 0; padding:60px 0 0; } } /* ---------------------------------------------------------- border ---------------------------------------------------------- */ .borderTop, .borderRight, .borderBottom, .borderLeft { position: fixed; background:#12cfa7; z-index: 100; } .borderTop { top: 0; right: 0; left: 0; height: 5px; } .borderRight{ top: 0; right: 0; bottom: 0; width: 5px; } .borderBottom{ bottom: 0; right: 0; left: 0; height: 5px; } .borderLeft{ top: 0; left: 0; bottom: 0; width: 5px; } /* ---------------------------------------------------------- #topImg ---------------------------------------------------------- */ #topImg { min-height: 100%; min-height: 100vh; width: 100%; position: relative; z-index: 2; overflow: hidden; } @media screen and (max-width: 900px) { #topImg { min-height: 0; min-height: 0; overflow: hidden; } } /* .img*/ #topImg .img { position: absolute; top: 70px; left: 5%; bottom:50px; right: 50%; background: url(../images/003.jpg) center center no-repeat;background-size: cover; z-index: -1; } @media screen and (max-width: 900px) { #topImg .img { position: static; height: 350px; } } @media screen and (max-width: 738px) { #topImg .img { position: static; height: 250px; } } /* .titleArea */ #topImg .titleArea { position: absolute; top: 70px; right: 5%; bottom: 50px; left: 50%; background: #e6f7f3; z-index: 1;} #topImg .titleArea .inner { width: 1000px; width: 90%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:3; text-align:center; } @media screen and (max-width: 900px) { #topImg .titleArea { position: relative; top: auto; right: 0; left: 0; bottom: auto; margin-top: 60px;height: 400px; } } @media screen and (max-width: 738px) { #topImg .titleArea { height: auto; padding: 60px 0;} #topImg .titleArea .inner { width: auto; display: block; position: static; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);} } /* h3 */ #topImg .titleArea h3 { display: inline-block; padding: 0 45px; background: #fefefe; font-size: 14px; font-weight: 700; line-height: 40px; position: relative;vertical-align: middle;text-align: center; z-index: 1;box-sizing: border-box;} #topImg .titleArea h3:before, #topImg .titleArea h3:after {position: absolute; width: 0; height: 0; content: ""; z-index: 1;} #topImg .titleArea h3:before{top: 0;left: 0;border-width: 20px 0px 20px 15px;border-color: transparent transparent transparent #e6f7f3;border-style: solid;} #topImg .titleArea h3:after{top: 0;right: 0;border-width: 20px 15px 20px 0px;border-color: transparent #e6f7f3 transparent transparent;border-style: solid;} /* h1 */ #topImg .titleArea h1.en { margin-top: 20px; color: #12cfa7; font-size: 75px;font-family: 'Montserrat', sans-serif; font-style: italic;font-weight: 900; line-height: 1;} #topImg .titleArea h1.jp { display: inline-block;color: #12cfa7; margin-top: 15px; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 1px; position: relative; z-index: 1;} @media screen and (max-width: 738px) { #topImg .titleArea h3 { padding: 0 35px; font-size: 15px; line-height: 40px; } #topImg .titleArea h1.en { margin-top: 20px; font-size: 50px;} #topImg .titleArea h1.jp { margin-top: 15px; font-size: 16px; } } @media screen and (max-width: 320px) { #topImg .titleArea h1.en { font-size: 45px;} } /* ======== .arrowArea ======== */ #topImg .arrowArea { position: absolute; bottom: 80px; left: 50%; display: block; text-align: center; height: 60px; width: 60px; margin: 0 0 0 -30px; z-index: 7; } #topImg .arrowArea a.arrowBtn { display: block; height: 60px; width: 60px; color: #fefefe; /*background: #fd7e57;*/ background: #111; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #topImg .arrowArea a.arrowBtn:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size:16px;font-family: 'themify'; content: "\e64b"; font-weight: normal; line-height: 60px; } #topImg .arrowArea a.arrowBtn:after {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; /*border:#fd7e57 2px solid;*/-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} #topImg .arrowArea a.arrowBtn:hover { -webkit-transform: translate(0px, 10px); -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); transform: translate(0px, 10px); } @media only screen and (max-width: 900px) { #topImg .arrowArea { bottom: 17px; left: 50%; height: 60px; width: 60px; margin: 0 0 0 -30px; } #topImg .arrowArea a.arrowBtn:hover { -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -o-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } } @media only screen and (max-width: 738px) { #topImg .arrowArea { display: none;} } /* ---------------------------------------------------------- #about ---------------------------------------------------------- */ #about { margin: 50px 5% 0;} @media screen and (max-width: 900px) { #about { margin: 0;} } #about .headline h2.en { font-size: 35px;} @media only screen and (max-width: 900px) { #about .headline h2.en{ font-size: 40px;} } @media only screen and (max-width: 738px) { #about .headline h2.en{ font-size: 30px; line-height:1.2; } } /* .aboutArea */ #about .aboutArea { position: relative; z-index: 1;} @media screen and (max-width: 900px) { #about .aboutArea { background: #f9f8f6; padding: 70px 0 0;} } @media screen and (max-width: 738px) { #about .aboutArea { padding: 60px 0 0;} } /* .imgArea */ #about .imgArea { position: absolute; top:0; left: 50%; right: 0; bottom: 0; background: url(../images/pot.jpg) center center no-repeat;background-size: cover; z-index: 0; } @media screen and (max-width: 900px) { #about .imgArea { position: static; margin-top: 50px; height: 350px; } } /* .txtArea */ #about .txtArea { float: left; width: 50%; background: #f9f8f6; padding: 100px 5%; text-align: center;} #about .txtArea h3.jp { font-size: 20px; font-weight: 700; line-height: 1.8; letter-spacing: 1px;} #about .txtArea .detailArea { margin: 15px auto 0; max-width: 550px; text-align: left;} @media screen and (max-width: 900px) { #about .txtArea { padding: 0 2.5%; float: none; width: 100%;} } @media screen and (max-width: 738px) { #about .txtArea { padding: 0 5%;} #about .txtArea h3.jp { font-size: 16px; } #about .txtArea .detailArea { padding: 0 5%;} } @media screen and (max-width: 414px) { #about .txtArea h3.jp { font-size: 15px; } } @media screen and (max-width: 320px) { #about .txtArea h3.jp { font-size: 14.5px; } } /* ---------------------------------------------------------- #home_menu ---------------------------------------------------------- */ #home_menu { margin-top: 100px; padding: 100px 5%; background: #12cfa7;} @media screen and (max-width: 900px) { #home_menu { margin-top: 0; padding: 80px 5%; } } @media screen and (max-width: 738px) { #home_menu { padding: 60px 5%; } } #home_menu .headline:after { border-bottom: #fefefe 1px solid;} #home_menu .headline h2 { color: #fefefe;} /* .menuArea */ #home_menu .menuArea { } #home_menu .menuArea .drinkArea { float: left; width: 50%; padding: 80px 5%; background: #fefefe;} #home_menu .menuArea .foodArea { float: right;width: 50%; padding: 80px 5%;background: #e6f7f3;} #home_menu .menuArea h3 { color: #12cfa7; font-size: 25px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic;text-align: center; line-height: 1;} #home_menu .menuArea .sandwichArea, #home_menu .menuArea .sweetsArea{margin: 35px 0 0;} @media screen and (max-width: 900px) { #home_menu .menuArea .drinkArea, #home_menu .menuArea .foodArea { padding: 70px 5%;} #home_menu .menuArea h3 { font-size: 20px; } } @media screen and (max-width: 738px) { #home_menu .menuArea .drinkArea, #home_menu .menuArea .foodArea { float: none; width: 100%; padding: 45px 5%;} #home_menu .menuArea .sweetsArea{margin: 30px 0 0;} } /* table */ #home_menu .menuArea table { margin-top: 25px; width:100%;border-collapse: collapse; } #home_menu .menuArea table tr { font-size: 15px; line-height: 1.5; border-top: #12cfa7 1px dashed; } #home_menu .menuArea table tr:last-child { border-bottom: #12cfa7 1px dashed;} #home_menu .menuArea table tr.drink { font-size: 18px; line-height: 1.5;} #home_menu .menuArea table th { padding: 20px 0; text-align: left; width: 60%; font-weight: 700;letter-spacing: 1px;} #home_menu .menuArea table th span { display: block; font-size: 0.8em; font-weight: 500; } #home_menu .menuArea table td { padding: 20px 0; text-align: right; width: 40%; font-family: 'Montserrat', sans-serif; font-weight: 700;} #home_menu .menuArea table td span.tax { font-size: 0.75em; vertical-align: 0; margin-left: -3px;} @media screen and (max-width: 900px) { #home_menu .menuArea table tr { font-size: 15px; line-height: 1.5; } #home_menu .menuArea table tr.drink { font-size: 16px; line-height: 1.5;} #home_menu .menuArea table th { display: block; padding: 20px 0 0; width: 100%; text-align: center;} #home_menu .menuArea table td { display: block;padding: 10px 0 20px; width:100%; text-align: center;} } /* .setArea */ #home_menu .setArea { margin-top: 25px; text-align: center;} #home_menu .setArea h4 { font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1.8;} #home_menu .setArea h4 span { display: block;font-size: 0.8em; } #home_menu .setArea ul { list-style: none; font-size: 0; margin: 15px -2px 0; text-align: left;} #home_menu .setArea ul li { display: inline-block; width: 50%; border: transparent 2px solid;font-size: 13px; text-align: center; line-height: 45px; position: relative; z-index: 1;} #home_menu .setArea ul li:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #f9f8f6; z-index: -1;} @media screen and (max-width: 738px) { #home_menu .setArea ul li { font-size: 12px; line-height: 45px;} } #home_menu .t_notice { margin: 25px 0 0; line-height: 1.9;} @media screen and (max-width: 738px) { #home_menu .t_notice { margin: 20px 0 0;} } /* .timeArea */ #home_menu .timeArea { margin-top: 50px; padding: 80px 5%; border: #fefefe 15px solid; color: #fefefe; text-align: center;} #home_menu .timeArea h3.en { font-size: 25px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: italic;text-align: center; line-height: 1;} #home_menu .timeArea h3.jp { margin-top: 15px; font-size: 14px; font-weight: 700; letter-spacing: 2px; line-height: 1;} #home_menu .timeArea h4 { margin-top: 15px; font-size: 35px; font-family: 'Montserrat', sans-serif; font-weight: 700;line-height: 1;} @media screen and (max-width: 900px) { #home_menu .timeArea { margin-top: 45px; padding: 70px 5%;} #home_menu .timeArea h3.en { font-size: 25px; } #home_menu .timeArea h3.jp { margin-top: 15px; font-size: 14px; } #home_menu .timeArea h4 { margin-top: 15px; font-size: 30px; } } @media screen and (max-width: 738px) { #home_menu .timeArea { margin-top: 45px; padding: 50px 5%;border: #fefefe 5px solid;} #home_menu .timeArea h3.en { font-size: 20px; } #home_menu .timeArea h3.jp { margin-top: 10px; font-size: 13px; } #home_menu .timeArea h4 { margin-top: 15px; font-size: 25px; } } /* .noticeArea */ #home_menu .timeArea .noticeArea { margin: 35px auto 0; padding: 30px 5%; max-width: 750px; border:#fefefe 1px dashed;} /* ol.notice */ #home_menu .timeArea .noticeArea ul { list-style: none; color: #fefefe; text-align: left;} #home_menu .timeArea .noticeArea ul li { margin-top: 5px; display: inline-block; padding-left: 20px; font-size: 15px; font-weight: 500; line-height: 2.2; letter-spacing: 1px; position: relative; z-index: 1;} #home_menu .timeArea .noticeArea ul li:before { position: absolute; top: 0; left: 0;font-family:themify; content:"\e64c"; z-index: 0;} #home_menu .timeArea .noticeArea ul li:first-child { margin-top: 0;} @media screen and (max-width: 738px) { #home_menu .timeArea .noticeArea { margin-top: 30px; padding: 25px 0; border-left: none; border-right: none;} #home_menu .timeArea .noticeArea ul li { font-size: 14px; line-height: 2; letter-spacing: 0.5px;} } /* ---------------------------------------------------------- #home_menu ---------------------------------------------------------- */ #home_area { margin: 100px 5% 0; } @media screen and (max-width: 900px) { #home_area { margin: 80px 5% 0; } } @media screen and (max-width: 738px) { #home_area { margin: 0; } } /* .areaArea */ #home_area .areaArea { position: relative; z-index: 1;} /* .imgArea */ #home_area .areaArea .imgArea { position: absolute; top: 0; left: 0; bottom: 0; width: 50%; background: url(../images/went.jpg) bottom right no-repeat;background-size: cover; z-index: 0;} @media screen and (max-width: 900px) { #home_area .areaArea .imgArea { position: static; width: 100%; height: 300px;} } @media screen and (max-width: 738px) { #home_area .areaArea .imgArea { width: 100%; height: 250px;} } /* .txtArea */ #home_area .areaArea .txtArea { float: right; width: 50%;padding: 80px 5%; background: #e6f7f3; text-align: center; } #home_area .areaArea .allArea { overflow: hidden;} #home_area .areaArea .oneArea { margin-top: 40px; overflow: hidden;} @media screen and (max-width: 900px) { #home_area .areaArea .txtArea { float: none; width: 100%;padding: 70px 5%; } } @media screen and (max-width: 738px) { #home_area .areaArea .txtArea { padding: 45px 5% 60px; } } /* h3 */ #home_area .areaArea h3 { width: 200px; display: inline-block; color: #fefefe; background:#12cfa7;font-size: 14px; font-weight: 700; letter-spacing: 1px; text-align: center; line-height: 35px; position: relative; z-index: 1;} #home_area .areaArea h3:before { position: absolute; top: 50%; left: -500%; right: 100%; height: 0; content: ""; border-top: #12cfa7 1px dashed; z-index: -1;} #home_area .areaArea h3:after { position: absolute; top: 50%; left: 100%; right: -500%; height: 0; content: ""; border-top: #12cfa7 1px dashed; z-index: -1;} @media screen and (max-width: 738px) { #home_area .areaArea h3 { width: 180px; font-size: 13px;} } /* ul */ #home_area .areaArea ul { list-style: none; font-size: 0; margin: 25px -2px 0; text-align: left;} #home_area .areaArea ul li { display: inline-block; width: 50%; margin: -1px 0 0 -1px; background: #fefefe; font-size: 0; position: relative; z-index: 0;} #home_area .areaArea ul li:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border:#e6f7f3 2px solid; z-index: 1;} #home_area .areaArea ul li h4 { font-size: 16px; font-weight: 700; line-height: 60px; text-align: center;} #home_area .areaArea ul.one li { width: 50%;} #home_area .areaArea ul.one li h4 { font-size: 15px; line-height: 50px;} @media screen and (max-width: 738px) { #home_area .areaArea ul li h4 { font-size: 15px; font-weight: 700; line-height: 50px; } #home_area .areaArea ul.one li h4 { font-size: 15px; line-height: 40px;} } /* ol.notice */ #home_area ol.notice { margin-top: 15px; padding: 0 15px; list-style: none; text-align: left;} #home_area ol.notice li { margin-top: 5px; display: inline-block; padding-left: 20px; font-size: 14px; line-height: 2.2; letter-spacing: 1px; position: relative; z-index: 1;} #home_area ol.notice li:before { position: absolute; top: 0; left: 0; color: #12cfa7;font-family:themify; content:"\e64c"; z-index: 0;} @media screen and (max-width: 738px) { #home_area ol.notice { padding: 0 5%;} #home_area ol.notice li { padding-left: 20px; font-size: 13px; line-height: 2; letter-spacing: 0.5px; } } /* ---------------------------------------------------------- #home_contact ---------------------------------------------------------- */ #home_contact { margin: 100px 5% 0; padding: 100px 5%; border:#12cfa7 15px solid; } @media screen and (max-width: 900px) { #home_contact { margin: 80px 5% 0; padding: 80px 5%; } } @media screen and (max-width: 738px) { #home_contact { margin: 0; padding: 60px 5%; border:none; } } /* .catchArea */ #home_contact .catchArea { text-align: center;} #home_contact .catchArea h3 { font-size: 16px; font-weight: 700; line-height: 2; letter-spacing: 1px;} @media screen and (max-width: 900px) { #home_contact .catchArea h3 { font-size: 15px; } } @media screen and (max-width: 738px) { #home_contact .catchArea { padding: 0 5%; text-align: left;} #home_contact .catchArea h3 { font-size: 14px; } #home_contact .catchArea h3 br { display: none;} } /* .telArea */ #home_contact .telArea { margin-top: 30px; text-align: center;} #home_contact .telArea ul.contact { list-style: none;} #home_contact .telArea ul.contact li { display: block; margin-top: 25px; } #home_contact .telArea ul.contact li.tel { color: #12cfa7; font-size: 38px; font-family: 'Montserrat', sans-serif; font-weight: 700;line-height:40px; } #home_contact .telArea ul.contact li span { margin: 0 auto; padding-left: 30px; display: block;width: 400px; position: relative; z-index: 1;} #home_contact .telArea ul.contact li span:before { position: absolute; top: 0; left: 30px; font-size: 40px;font-family:'FontAwesome';content:"\f098";font-weight: normal;z-index: 0;} #home_contact .telArea ul.contact li a { margin: 0 auto; display: block;width: 400px; font-size: 20px; color: #12cfa7; border: #12cfa7 3px solid;font-family: 'Montserrat', sans-serif; font-weight: 500;line-height: 65px;letter-spacing: 1px;-webkit-border-radius: 33px; -moz-border-radius:33px; border-radius: 33px; position: relative ;z-index: 1;} #home_contact .telArea ul.contact li a:before { position: absolute; top: 0; left: 18px; font-size: 30px; font-family:themify; content:"\e75a"; font-weight: normal;z-index: 0;} #home_contact .telArea ul.contact li a:hover { color: #fefefe; background: #12cfa7;border-color:#12cfa7;} @media screen and (max-width: 900px) { #home_contact .telArea ul.contact li.tel { font-size: 35px; line-height:40px; } #home_contact .telArea ul.contact li span { padding-left: 30px; max-width: 400px; position: relative; z-index: 1;} #home_contact .telArea ul.contact li span:before { position: absolute; top: 0; left: 30px; font-size: 40px;} #home_contact .telArea ul.contact li a { width: 380px;} #home_contact .telArea ul.contact li a:before { left: 20px;} #home_contact .telArea ul.contact li a:hover { color: #12cfa7; background: #fefefe;border-color:#12cfa7;} } @media screen and (max-width: 738px) { #home_contact .telArea ul.contact li { margin-top: 10px; } #home_contact .telArea ul.contact li.tel { font-size: 20px; line-height:50px; } #home_contact .telArea ul.contact li span { padding-left: 0; width: 100%;max-width: 400px;color: #f96625; border: #ffcab3 2px solid; -webkit-border-radius: 25px; -moz-border-radius:25px; border-radius: 25px;} #home_contact .telArea ul.contact li span:before { position: absolute; top: 0; left: 15px; font-size: 30px;} #home_contact .telArea ul.contact li a { width: 100%; max-width: 400px; font-size: 15px; line-height: 50px; color: #f96625; border: #ffcab3 2px solid;-webkit-border-radius: 25px; -moz-border-radius:25px; border-radius: 25px;} #home_contact .telArea ul.contact li a:hover { color: #f96625; background: #fefefe;border-color:#ffcab3;} #home_contact .telArea ul.contact li a:before { left: 15px; font-size: 25px;} } /* .noticeArea */ #home_contact .noticeArea { margin: 35px auto 0; padding: 30px 5%; max-width: 750px; border:#12cfa7 1px dashed;} #home_contact ul.notice { list-style: none; text-align: left;} #home_contact ul.notice li { margin-top: 5px; display: inline-block; padding-left: 20px; font-size: 14px; line-height: 2.2; letter-spacing: 1px; position: relative; z-index: 1;} #home_contact ul.notice li:before { position: absolute; top: 0; left: 0; color: #12cfa7;font-family:themify; content:"\e64c"; z-index: 0;} #home_contact ul.notice li:first-child { margin-top: 0;} @media screen and (max-width: 738px) { #home_contact .noticeArea { margin-top: 30px; padding: 25px 5%;} #home_contact ul.notice li { font-size: 13px; line-height: 2; letter-spacing: 0.5px;} } /* ---------------------------------------------------------- #home_catch ---------------------------------------------------------- */ #home_catch { margin-top: 100px; padding: 100px 5%; background: url(../images/cacth2.jpg) center center no-repeat; background-size: cover;z-index: 1; text-align: center; position: relative; z-index: 0;} #home_catch:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #111; opacity: 0.4; z-index: 2;} #home_catch .inner { position: relative; z-index: 3;} #home_catch .inner h4 {color: #e6f7f3; font-size: 90px;font-family: 'Montserrat', sans-serif; font-style: italic;font-weight: 900; line-height: 1.3;} #home_catch .inner h4 span {color: #12cfa7} @media screen and (max-width: 900px) { #home_catch { margin-top: 80px; padding: 80px 5%; } #home_catch .inner h4 {font-size: 70px;line-height: 1.3;} } @media screen and (max-width: 738px) { #home_catch { margin-top: 0; padding: 70px 5%; } #home_catch .inner h4 { font-size: 40px;line-height: 1.3;} }