@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong { font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0; margin:0; padding:0; vertical-align:bottom;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img {padding:0; margin:0; vertical-align:bottom;}
.clearfix:after {content: ".";  display: block; clear: both;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}
.clear {clear: both;}
label {cursor:pointer;}
a { text-decoration:none;}
a:hover { }

body{color:#FFF; font-size:16px; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; line-height:1.7; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; background-color:#000;}

header { position: relative; background-image: url("../images/utuwa.png"); background-repeat: no-repeat; background-position: center center;}

header.close_read { width: 100%;}
header.close_read div:first-child {display: flex; justify-content: center; align-items: center;min-height: 100vh;}
header.close_read div:first-child h1 {-webkit-animation: fadein 0.5s linear 0s 1;position: absolute; margin: auto; }
header.close_read div:first-child h1 img {max-width: 100%;}
header.close_read div:first-child div { width: 100%; background-color: rgba(0,0,0,.7); padding: 0px; box-sizing: border-box; margin: 0px auto;}
header.close_read div:first-child div span { color: #FF0004; font-size: 16px;}
header.close_read div:first-child div h4 { margin-bottom: 10px;}
header.close_read div:first-child div h5 { margin-bottom: 10px;}
header.close_read div:first-child div h6 { font-weight: bold;}
header.close_read div:first-child p { display: none;}
header.close_read div:first-child div a {color: chocolate;}

@-webkit-keyframes fadein {
0%{opacity:0;}
75%{opacity:0.5;}
100% {opacity:1;}
}

.top_info {font-family: 'Josefin Sans', sans-serif;  text-align: center; padding: 70px 10px 30px; width: 800px; margin: 0px auto; box-sizing: border-box;}

.read {font-family: 'Josefin Sans', sans-serif;  text-align: center; padding: 70px 10px; width: 800px; margin: 0px auto; box-sizing: border-box;}
.read h2 { font-size: 32px;}
.read h2 + p { margin-bottom: 50px;}
.read h3 { font-size: 20px; font-weight: bold;margin-top: 10px;}
.read ul { text-align: center; margin-top: 20px;}
.read h3 + p { margin-bottom: 50px;}
.read h3 + p + p { margin-bottom: 10px;}
.read ul {margin-top: 30px;}
.read ul li a { display: inline-block; color: #FFF; border: 1px solid #fff; padding: 7px 40px 5px 40px; font-size: 16px; text-align: center; background-color: #FFF; color: #000;}
.read ul li a em { margin-left: 1em;}

.menu {font-family: 'Josefin Sans', sans-serif; max-width: 800px; margin: 0px auto; padding: 70px 10px;}
.menu h2 { text-align: center; font-size: 22px; margin-bottom: 30px;}
.menu h2 span { font-size: 16px;}
.menu div { text-align: center;}
.menu div figure { width: 30%; margin-left: 4%; display: inline-block;margin-bottom: 5%;}
.menu div figure:nth-child(3n+1) {margin-left: 0%;}
.menu div figure > p {overflow: hidden; border-radius: 50%;}
.menu div figure > p img { width: 100%;}
.menu div figure figcaption { text-align: center; margin-top: 20px;}
.menu div figure figcaption dl dt span { font-size: 13px; display: block;}
.menu div:after {content: ".";  display: block; clear: both;height: 0;visibility: hidden;}

.gallery {font-family: 'Josefin Sans', sans-serif; max-width: 800px; margin: 0px auto; padding: 70px 10px;}
.gallery h2 { text-align: center; font-size: 22px; margin-bottom: 30px;}
.gallery div ul li { float: left; width: 49%; margin-left: 2%; margin-bottom: 2%;}
.gallery div ul li:nth-child(2n+1) {margin-left: 0%;}
.gallery div ul li img { width: 100%; height: auto;}
.gallery div ul:after {content: ".";  display: block; clear: both; height: 0;visibility: hidden; font-size:0;}

.drink {font-family: 'Josefin Sans', sans-serif; max-width: 800px; margin: 0px auto; padding: 70px 10px;}
.drink h2 { text-align: center; font-size: 22px; margin-bottom: 30px;}
.drink h2 + p {text-align: center;}
.drink h2 + p a {display: inline-block; color: #FFF; border: 1px solid #BEBEBE; padding: 7px 40px 5px 40px; font-size: 16px; text-align: center;  background-color: #BEBEBE; color: #000;}
.drink h2 + p a em { margin-left: 1em;}

.shopdata { position: relative; padding: 50px 50px; max-width: 1200px; box-sizing: border-box; margin: 0px auto;}
.shopdata h2 {font-size: 22px;font-family: 'Josefin Sans', sans-serif; line-height: 120%; margin-bottom: 40px; text-align: center;}
.shopdata figure { font-family: 'Josefin Sans', sans-serif; }
.shopdata figure > p {width: 150px; margin: 0px auto 20px;}
.shopdata figure > p img { max-width: 100%;}
.shopdata figure h5 { text-align: center; }
.shopdata figure h6 {  text-align: center; margin-top: 20px;}
.shopdata figure figcaption p { text-align: center; margin-top: 20px;}
.shopdata figure figcaption p a { display: inline-block; color: #FFF; border: 1px solid #fff; padding: 5px 40px 5px 40px; font-size: 13px; text-align: center;}
.shopdata figure figcaption ul { text-align: center; margin-top: 20px;}
.shopdata figure figcaption ul li a { display: inline-block; color: #FFF; border: 1px solid #fff; padding: 7px 40px 5px 40px; font-size: 16px; text-align: center;  background-color: #FFF; color: #000;}
.shopdata figure figcaption ul li a em { margin-left: 1em;}
footer {font-family: 'Josefin Sans', sans-serif;  font-size: 12px; padding: 5px 50px; text-align: center;}
.map {width: 100%; height: 600px;}

@media only screen and (max-width:960px){
.read {font-family: 'Josefin Sans', sans-serif;  text-align: center; padding: 70px 10px; width: 96%; margin: 0px auto; box-sizing: border-box;}
.top_info {font-family: 'Josefin Sans', sans-serif;  text-align: center; padding: 70px 10px 30px; width: 96%; margin: 0px auto; box-sizing: border-box;}
}
@media only screen and (max-width:768px){

header.close_read div:first-child div { width: 90%; background-color: rgba(0,0,0,.7); padding: 20px; box-sizing: border-box; margin: 0px auto;}


}
@media only screen and (max-width:640px){

header div:first-child p { font-size: 60px; }

.menu div figure { width: 46%; margin-left: 4%; display: inline-block;margin-bottom: 5%;}
.menu div figure:nth-child(3n+1) {margin-left: 4%;}
.menu div figure:nth-child(2n+1) {margin-left: 0%;}
.menu div figure > p {overflow: hidden; border-radius: 50%;}
.menu div figure > p img { width: 100%;}
.menu div figure figcaption { text-align: center; margin-top: 20px;}
.menu div figure figcaption dl dt span { font-size: 13px; display: block;}

.gallery div ul li { float: none; width: 100%; margin-left: 0%; margin-bottom: 2%;}
.gallery div ul li:nth-child(2n+1) {margin-left: 0%;}

}
@media only screen and (max-width:414px){
header { position: relative; background-image: url("../images/utuwa.png"); background-repeat: no-repeat; background-size:contain;background-position: center center;}
header div:first-child h1 {-webkit-animation: fadein 0.5s linear 0s 1; width: 90%; position: absolute; left: 0;right: 0;margin: auto; top: 50%; margin-top: -146px; text-align: center; color: #FFF; font-weight: bold;}
header.close_read div:first-child h1 {position: static;top: 10%;margin-top: 50%; margin-bottom: 0px;}
}
@media only screen and (max-width:400px){
.read h2 { font-size: 28px;}
.read h2 + p { margin-bottom: 50px;}
.read h3 { font-size: 18px; font-weight: bold;}
.read h3 + p { font-size: 14px;}


}
@media only screen and (max-width:320px){
header div:first-child h1 + p { font-size: 40px; }
.read h2 + p br { display: none;}
.read h3 + p br { display: none;}
.menu div figure { width: 100%; margin-left: 0%; display: block;margin-bottom: 5%;}
.menu div figure:nth-child(3n+1) {margin-left: 0%;}
.menu div figure:nth-child(2n+1) {margin-left: 0%;}
.shopdata figure figcaption ul li a { display: inline-block; color: #FFF; border: 1px solid #fff; padding: 7px 20px 5px 20px; font-size: 16px; text-align: center;  background-color: #FFF; color: #000;}
}