@charset "utf-8";

html, body {
height: 100%;
}

body, text {
font-family: 'Noto Serif JP', serif;
word-break: break-all;
-webkit-text-size-adjust: 100%;
letter-spacing: 2px;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
margin: 0;
color: #c7c0b6;
background-color: #16110a;
}

a:hover {color: #c7c0b6;}
a {
text-decoration: none;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
a {color: #c7c0b6; outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}


* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

img {
vertical-align: bottom;
width: 100%;
}

h1, h2, h3, h4, p {
margin: 0;
font-size: 100%;
font-weight: normal;
}

ul, li {
list-style: none;
margin: 0;
padding: 0;
}

input, input [type="text"], textarea {
font-size:16px;
}


/* comon ------------------------- */
.contents_wrap {
padding: 130px 0;
overflow: hidden;
}

.contents_wrap2 {
padding: 0 0 130px;
overflow: hidden;
}

.contents_inner {
max-width: 1500px;
width: 90%;
margin: 0 auto;
overflow: hidden;
}

/* under 1200 ------------------------- */
@media (max-width: 1200px) {
.contents_wrap {
padding: 100px 0;
}

.contents_wrap2 {
padding: 0 0 100px;
}
}

/* under 800 ------------------------- */
@media (max-width: 800px) {
.contents_wrap {
padding: 70px 0;
}

.contents_wrap2 {
padding: 0 0 70px;
}
}


/* first view ------------------------- */
.first_contents {
border: 1px solid rgba(0,0,0,0);
min-height: 100vh;
position: relative;
}

.main_logo {
margin: auto;
width: 40px;
position: absolute;
top: 50px;
left: 50px;
height: 220px;
}

.main_logo img {
display: block;
width: 100%;
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.main_logo {
width: 30px;
top: 30px;
left: 20px;
}
}


/* Scrollanime ------------------------- */
.scrollanime {
opacity: 0;
}

.fadeInDown {
animation-name: fadeInDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}

@keyframes fadeInDown {
0% {opacity: 0;}
100% {
opacity: 1;
transform: translate(0);}
}
 
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
 
.sect02 {overflow: hidden;}
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}


/* Scroll down ------------------------- */
.hero__scroll {
position: absolute;
color: #c7c0b6;
text-align: center;
font-size: 80%;
font-weight: 600;
letter-spacing: 3px;
text-indent: 3px;
display: block;
top: auto;
right: 0;
bottom: 50px;
left: 0;
margin: auto;
text-transform: uppercase;
font-family: 'Noto Sans JP', sans-serif;
}

.hero__scroll img {
width: 20px;
}

.hero__scroll .chevron {
display: block;
margin-top: 10px;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;}

@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px); }
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }}

@keyframes pulse {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}
50% {
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);}
  100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);}}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.hero__scroll {
bottom: 30px;
}
}


/* yoshitomi area ------------------------- */
.yoshitomi {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;}

.yoshitomi_photo {
float: left;
width: 50%;
}

.yoshitomi_message {
float: right;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.yoshitomi_message_text, .koshitu_message_text {
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 40px;
}

.name {
font-size: 22px;
margin: 0 0 0 50px;
letter-spacing: 7px;
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.yoshitomi {
display: block;
}

.yoshitomi_photo, .yoshitomi_message {
float: none;
width: 100%;
}

.yoshitomi_message {
margin-top: 40px;
}

.yoshitomi_message_text, .koshitu_message_text {
-ms-writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
line-height: 27px;
}

.name {
margin: 0 0 20px 0;
}
}


/* menu area ------------------------- */
.umemusubi {
margin: 0 auto 20px;
width: 70px;
}

.menu_wrap_left {
float: left;
width: 49%;
}

.menu_wrap_right {
float: right;
width: 49%;
}

.menu_wrap {
overflow: hidden;
width: 100%;
max-width: 600px;
margin: 50px auto 0;
color: #675c4c;
text-align: center;
}

.menu_ttl {
font-size: 22px;
}

.menu_ttl_en {
margin-bottom: 10px;
}

.menu_left {
float: left;
width: 48%;
}

.menu_right {
float: right;
width: 48%;
}

.menu_sub_ttl, .price {
font-size: 120%;
}

.price {
margin-bottom: 20px;
}

.meu_list li {
border-bottom: 1px solid #aea9a2;
margin-bottom: 10px;
padding-bottom: 5px;
}

.menu_info {
background-color: rgba(188, 181, 172, 1);
color: #38342d;
padding: 40px;
text-align: center;
margin: 30px 0 0;
}

.new_price {
margin-top: 20px;
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.menu_wrap_left, .menu_wrap_right {
float: none;
width: 100%;
}

.menu_wrap {
margin: 30px auto 0;
}

.menu_info {
padding: 20px;
}
}


/* drink area ------------------------- */
.drink {
overflow: hidden;
width: 100%;
max-width: 600px;
margin: 40px auto 0;
color: #675c4c;
}

.drink_wrap {
overflow: hidden;
}

.drink li {
border-bottom: 1px solid #9b948b;
margin-bottom: 10px;
padding-bottom: 5px;
}

.drink_name {
width: 40%;
float: left;
}

.drink_name2 {
width: 40%;
float: left;
}

.drink_price {
width: 20%;
float: left;
text-align: right;
}

/* under 1200 ------------------------- */
@media screen and (max-width : 1200px) {
.drink_name {
width: 100%;
float: left;
}

.drink_name2 {
width: 70%;
float: left;
}

.drink_price {
width: 30%;
float: left;
text-align: right;
}
}


/* koshitu area ------------------------- */
.koshitu ul {
overflow: hidden;
}

.koshitu li {
float: left;
width: 25%;
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.koshitu li {
width: 50%;
}
}


/* Loop slideshow AREA ------------------------- */
.loopSlide_photo {
margin-top: 50px;
}

.loopSlide_photo2 {
margin-top: 50px;
}

#roop_photo {
width: 100%;
height: 230px;
background: url(image/slide.png) repeat-x;
background-position: 0 0;
background-size: cover;
-webkit-animation: bgroop 60s linear infinite;
animation: bgroop 60s linear infinite;}

#roop_photo2 {
width: 100%;
height: 230px;
background: url(image/slide2.png) repeat-x;
background-position: 0 0;
background-size: cover;
-webkit-animation: bgroop 60s linear infinite;
animation: bgroop 60s linear infinite;}

@-webkit-keyframes bgroop {
from {
background-position: 0 0;
}
to {background-position: -3200px 0;
}
}
@keyframes bgroop {
from {
background-position: 0 0;
}
to {
background-position: -3200px 0;
}
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
#roop_photo, #roop_photo2 {
height: 140px;
}
}


/* reserve ------------------------- */
#reserve {
background-image: url(image/reserve.jpg);
background-size: cover;
background-position: center center;
}

.reserve_jp {
font-size: 25px;
margin-bottom: 30px;
}

.tel a {
border: 1px solid #c7c0b6;
padding: 15px 40px;
display: inline-block;
font-size: 22px;
margin-bottom: 30px;
letter-spacing: 5px;
text-indent: 5px;
}

.map a {
margin: 5px 0 30px;
font-size: 13px;
text-decoration: underline;
display: block;
}

.yoyaku {
  background-color: rgb(255, 255, 255, .8);
  padding: 20px;
  display: inline-block;
  margin-bottom: 20px;
  color: #000;
}

/* under 1200 ------------------------- */
@media screen and (max-width : 1200px) {
.tel a {
font-size: 19px;
letter-spacing: 3px;
text-indent: 3px;
}
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.tel a {
width: 100%;
text-align: center;
}
}


/* footer ------------------------- */
footer {
background-color: #16110a;
padding: 100px 0;
}

.foot_logo {
margin: 0 auto 100px;
width: 150px;
}

.copy {
font-size: 13px;
text-align: center;
letter-spacing: 2px;
}

.reserve a {
position: fixed;
padding: 15px 10px;
bottom: 50px;
right: 50px;
color: #38342d;
background-color: rgba(188, 181, 172, 1);
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: 4px;
text-indent: 4px;
font-size: 18px;
}

.reserve a:hover {
background-color: #9b968e;
}

/* under 800 ------------------------- */
@media screen and (max-width : 800px) {
.copy {
font-size: 10px;
}

.reserve a {
padding: 12px 10px;
bottom: 20px;
right: 15px;
font-size: 15px;
}

.reserve a:hover {
background-color: rgba(188, 181, 172, 1);
}
}


/* Other ------------------------- */
main {
background-color: #16110a;
display: block;
}

.center {text-align: center;}

.nami_bg {
background-image: url(image/nami_bg.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 1000px;
}

.bg_color {
background-color: #c8c3bb;
}

.bg_color2 {
background-color: #beb7aa;
}

.block_ttl {
margin-bottom: 20px;
}

.title_en {
font-size: 40px;
line-height: 35px;
font-family: 'Noto Serif TC', serif;
letter-spacing: 5px;
color: #675c4c;
font-weight: 700;
}

.title_jp {
font-size: 30px;
line-height: 30px;
letter-spacing: 5px;
text-indent: 5px;
color: #675c4c;
}

.blur {
animation-name:blurAnime;
animation-duration:2s;
animation-fill-mode:forwards;
}

@keyframes blurAnime{
from {
filter: blur(1px);
transform: scale(1.02);
opacity: 0;
}

to {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}
 
.blurTrigger {
opacity: 0;
}

.info_area {
  margin: 0 0 100px;
}
@media (max-width : 800px) {
.info_area {
  margin: 0 0 60px;
}
}

.infotitle {
  font-size: 130%;
}

.info_contents li {
  border-bottom: 1px solid #63605a;
  padding: 30px 0 10px;
}


/* under 800 ------------------------- */
@media (max-width : 800px) {
body, text {
font-size: 14px;
}

.pc {display: none;}

.center2 {text-align: left;}

.nami_bg {
background-image: url(image/nami_bg.png);
background-size: 400px;
}
}

/* over 800 ------------------------- */
@media (min-width : 801px) {
.spbr, .sp {display: none;}
}