@charset "UTF-8";
/* Sass Document */
@import url(reset.css);
header h1 a, #piatti h3 strong, #vini h3 strong, footer p { font-family: "Vollkorn", serif; font-weight: 400; font-style: italic; font-size: 18px; letter-spacing: 1px; }

#top h2, #piatti h2, #vini h2, #access h2 { font-family: "Vollkorn", serif; font-weight: 400; font-size: 36px; letter-spacing: 2px; }

header nav.nav ul a { font-family: "Vollkorn", serif; font-weight: 400; font-size: 14px; }

body { background-color: #fff; color: #000; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-size: 16px; line-height: 1.6; }

a { text-decoration: none; }

.alpha { -webkit-transition: all 0.15s ease; transition: all 0.15s ease; opacity: 1; }
.alpha:hover, .alpha:focus { opacity: 0.6; filter: alpha(opacity=60); }
.alpha:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

header { width: 100%; height: 50px; position: fixed; top: 0px; left: 0px; z-index: 1000; background: rgba(0, 102, 0, 0.8); }
header .inner { width: 100%; height: 50px; max-width: 1220px; position: relative; margin: 0 auto; }
header h1 { position: absolute; top: 14px; left: 12px; }
header h1 a { color: #fff; }
header h2 { display: none; cursor: pointer; }
@media screen and (max-width: 767px) { header h2 { display: block; color: #fff; font-size: 20px; position: absolute; top: 10px; right: 12px; } }
header nav.nav { text-align: center; padding-top: 12px; }
@media screen and (max-width: 767px) { header nav.nav { position: absolute; top: 50px; left: 0px; width: 100%; padding-top: 0px; z-index: 1001; } }
header nav.nav ul li { display: inline-block; letter-spacing: 1px; margin: 0px 20px; }
@media screen and (max-width: 767px) { header nav.nav ul li { display: block; margin: 0px; background: rgba(0, 0, 0, 0.6); border-bottom: 1px solid #000; } }
header nav.nav ul a { color: #fff; }
@media screen and (max-width: 767px) { header nav.nav ul a { color: #fff; padding: 20px; display: block; } }
header nav.sns { position: absolute; top: 10px; right: 12px; }
@media screen and (max-width: 767px) { header nav.sns { right: 45px; } }
header nav.sns ul li a { color: #fff; font-size: 20px; }

.wrap { max-width: 1060px; margin: 0px auto; position: relative; overflow: hidden; padding-top: 100px; padding-right: 20px; padding-bottom: 80px; padding-left: 20px; }

#top, #piatti, #vini, #access { width: 100%; }
#top h2, #piatti h2, #vini h2, #access h2 { margin-bottom: 30px; text-align: center; }

#top { background-image: url(../img/bg_top.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
@media screen and (max-width: 767px) { #top { background-image: url(../img/bg_top_sp.jpg); background-size: cover; } }

#piatti { background-image: url(../img/bg_piatti.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; color: #fff; }
#piatti .inner a { color: #fff; }
#piatti p { margin-bottom: 20px; }
#piatti h3 { font-size: 14px; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #fff; }
#piatti h3 strong { font-size: 20px; }

#vini { background-image: url(../img/bg_vini.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; color: #fff; }
#vini p { margin-bottom: 20px; }
#vini h3 { font-size: 14px; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #fff; }
#vini h3 strong { font-size: 20px; }

#access { background-image: url(../img/bg_access.jpg); background-repeat: no-repeat; background-position: center bottom; background-size: cover; position: relative; color: #000; }
#access iframe { width: 100%; display: block; margin-top: 20px; }
#access p.access { padding: 20px; margin-top: 20px; background: rgba(255, 255, 255, 0.7); font-size: 14px; }
#access p.access strong { color: #006600; font-size: 16px; margin-right: 10px; }

footer p { text-align: center; color: #fff; font-size: 12px; padding-bottom: 20px; }