@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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-style: normal;
text-align: left;
zoom: 1;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
table th,table td {
white-space: nowrap;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
height: auto;
width /***/:auto;
}
.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    min-height: 1px;
}
html{
    height:100%;
	background-image: url(../img/bg.jpg);
}
body{

    font-size:14px;
    line-height:2.0;
    font-family: 'Noto Sans JP', sans-serif;
}
@media screen and (min-width: 1000px){
    body{
        font-size:16px;
    }
}
a:hover{
    color:#000;
}
a:visited{
    color:#000;
}
.pc{
    display:none;
}
.sp{
    display:block;
}
@media screen and (min-width: 1000px){
	.pc{
		display: block !important;
	}
	.sp{
		display: none !important;
	}
}

/* mvArea */
.mainlogo{
    width:50%;
    margin:20% auto 10% auto;
}
.mvArea p{
    width: 90%;
    margin: 10% auto;
    line-height: 2.5;
    text-align: center;
    font-size: 1.1em;
}
.mvArea p.otherlanguage{
    text-align:left !important;
}
.mvArea .date{
    font-weight:bold;
    font-size:1.2em;
    text-align:center;
    margin:0 auto 10% auto;
}

/* adressArea */
.addressArea{
    text-align:center;
    margin:10% auto;
}

/* footerArea */
.footerArea .copyright{
	text-align: center;
	font-size: 12px;
    letter-spacing:1px;
    color:#000;
    line-height:2.0em;
    margin:10% auto;
    padding-bottom:5%;
}
 @media screen and (min-width: 1000px){
    /* mvArea */
    .logo{
        width:20%;
        margin:3% 40%;
    }
    .mainlogo{
    width: 12%;
    margin: 0 auto;
    padding-top:80px;
    }
    .mvArea p{
        width:100%;
        margin: 3% auto;
        line-height:2.5;
        text-align:center;
        padding-bottom:20px;
        font-size:18px;
    }
    .mvArea p.otherlanguage{
        width:1000px;
        margin:0 auto !important;
    }
    .mvArea .date{
        font-weight:bold;
        font-size:1.4em;
        text-align:center;
        margin:0 auto 3% auto;
    }
    
    /* adressArea */
    .addressArea{
        text-align:center;
        margin:3% auto;
        line-height:2.0em;
    }
    
    /* footerArea */
    .footerArea{
        margin-top:50px;
        padding-top:30px !important;
        padding-bottom:20px !important;
    }
    .footerArea .copyright{
        text-align: center;
        font-size: 10px;
        margin: 0 auto 30px auto;
        letter-spacing:1px;
        padding-bottom:0 !important;
    }
}





.hamburger {
    margin: 20px auto 10px;
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    font-family: Futura, 'Century Gothic'
}
.hamburger .btn-gNav {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 12;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #cd4819;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
    top: 0;
}

.hamburger .btn-gNav span:nth-child(2) {
    top: 10px;
}

.hamburger .btn-gNav span:nth-child(3) {
    top: 20px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
    background: #cd4819;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #cd4819;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}



.logo{
        width:200px;
        margin:0 0 10px 0;
    }
.btn-gNav {
    display: none;
}
.gNav .gNav-menu {
    display: flex;
    justify-content: space-between;
}
.gNav .gNav-menu li {
    margin: 0 auto;
    padding: 15px 10px 0 10px;
    font-size:1em;
}
.gNav .gNav-menu li a{
    color:#000000;
    text-decoration: none;
}
@media screen and (max-width: 999px) {
    .hamburger {
    margin: 10px auto 0;
    }
    .logo{
        width:40%;
        margin:0 auto 3% auto;
    }
    .btn-gNav {
        display: block;
    }
    .gNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        font-size: 16px;
        box-sizing: border-box;
        z-index: 1;
        padding-top: 50px;
        transition: .3s;
    }
    .gNav.open {
        right: 0;
    }
    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }
    .gNav .gNav-menu li {
        width: 86%;
        padding: 15px;
        border-bottom: #525252 1px solid;
    }
    .gNav .gNav-menu li a{
    color:#ffffff;
    text-decoration: none;
}
}

/* btn */
.btnarea{
    margin:0 auto 20% auto;
    text-align:center;
}
 @media screen and (min-width: 1000px){
     .btnarea{
        margin:0 auto 100px auto;
        text-align:center;
    }
 }
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn-flat{
    margin:0 auto !important;
}
.btn,
a.btn,
button.btn {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 7rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #cd4819;
  border-radius: 0.5rem;
  border:1px solid #cd4819;
}
a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 7rem;
  color: #000;
  border-radius: 0;
  background: #fff;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 30px;
  width: 120%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-98%) translateY(-70%) rotate(135deg);
  background: #cd4819;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-9%) translateY(-25%) rotate(135deg);
}


.mvArea.menuArea{
    margin:5% !important;
}
.mvArea.menuArea .menuttl{
    width:80%;
    margin:0 auto 10% auto;
}
.mvArea.menuArea li{
    margin:0 auto 10% auto;
        line-height:2;
}
.mvArea.menuArea li .menuphoto{
    margin:0 auto 2% auto;
}
.mvArea.menuArea li .itemname{
    font-weight:700;
    font-size:1.5em;
        width:70%; 
}
.mvArea.menuArea li .itemprice{
    text-align:right;
    font-weight:700;
    font-size:1.2em;
        width:30%; 
}
.mvArea.menuArea li .itemprice span,
.mvArea.menuArea li .itemprice2 span,
.mvArea.menuArea li .itemname3 span,
.mvArea.menuArea li .itemprice3 span{
    font-size:0.6em;
    font-weight:normal;
}
.mvArea.menuArea li .othername{
    margin-left:3%;
}
.mvArea.menuArea li .setbox{
    display: flex;
}
.mvArea.menuArea li .itemname2{
    font-weight:700;
    font-size:1.2em;
    width:70%; 
}
.mvArea.menuArea li .itemprice2{
    text-align:right;
    font-weight:700;
    font-size:1.2em;
    width:30%;
}
.mvArea.menuArea li .itemname3{
    font-weight:700;
    font-size:1.5em;
        width:100%; 
}
.mvArea.menuArea li .itemprice3{
    text-align:right;
    font-weight:700;
    font-size:1.2em;
        width:100%; 
}
     .mvArea.menuArea.drinkmenu li .itemname3{
        font-weight:700;
        font-size:1.5em;
            width:70%; 
            float:left;
}
    .mvArea.menuArea.drinkmenu li .itemprice3{
        text-align:right;
        font-weight:700;
        font-size:1.2em;
            width:30%; 
            float:right;
            margin-top: 5px;
}
.mvArea.shopArea{
    margin:5% !important;
}
.mvArea.shopArea .shopname{
    font-weight:bold;
    font-size:1.5em;
    text-align:center;
    margin-bottom:10%;
}
.mvArea.shopArea .shopname span{
    font-size:0.75em;
}
.mvArea.shopArea .shopphoto{
    margin-bottom:10%;
}
.mvArea.shopArea ul li{
    margin-bottom:3%;
    border-bottom:1px dotted #000;
}
.mvArea.shopArea ul li .shopdetailttl{
    font-weight:bold;
}
.mvArea.shopArea ul li .shopdetail{
    margin-bottom:3%;
}
.mvArea ul.news{
    width:90%;
    margin:0 auto;
}
.mvArea ul.news li{
    margin-bottom:3%;
    border-bottom:1px dotted #000;
}
.mvArea ul.news li .newsdate{
    font-weight:bold;
}
.mvArea ul.news li .newsdetail{
    margin-bottom:3%;
}
.mvArea .conceptphoto{
    width:90%;
    margin:5% 5% 0 5%;
}
 @media screen and (min-width: 1000px){
     .mvArea.menuArea{
        width:1000px;
        margin:50px auto !important;
    }
    .mvArea.menuArea .menuttl{
        width:40%;
        margin:0 auto 3% auto;
    }
     .mvArea.menuArea li{
         margin:0 2.5% 40px;
         width:45%;
         float:left;
     }
     .mvArea.menuArea.drinkmenu li{
         margin:0 20% 40px 20%;
         width:60%;
         float:left;
     }
     .mvArea.shopArea{
            width:1000px;
            margin:50px auto !important;
        }
    .mvArea.shopArea .shopname{
        font-weight:bold;
        font-size:1.7em;
        text-align:center;
        margin-bottom:30px;
    }
    .mvArea.shopArea .shopname span{
        font-size:0.75em;
    }
    .mvArea.shopArea .shopphoto{
        width:70%;
        margin:0 15% 50px 15%;
    }
    .mvArea.shopArea ul{
        width:70%;
        margin:0 15%;
    }
    .mvArea.shopArea ul li{
        margin-bottom:3%;
        border-bottom:1px dotted #000;
    }
    .mvArea.shopArea ul li .shopdetailttl{
        font-weight:bold;
        width:30%;
        float:left;
    }
    .mvArea.shopArea ul li .shopdetail{
        margin-bottom:3%;
        width:70%;
        float:right;
    }
    .mvArea ul.news{
        width:70%;
        margin:20px auto 0 auto;
    }
    .mvArea ul.news li{
        margin-bottom:3%;
        border-bottom:1px dotted #000;
    }
    .mvArea ul.news li .newsdate{
        font-weight:bold;
        width:20%;
        float:left;
    }
    .mvArea ul.news li .newsdetail{
        margin-bottom:3%;
        width:80%;
        float:right;
    }
    .mvArea .conceptphoto{
        width:70%;
        margin:50px 15% 0 15%;
    }
 }
 
 .pagetitle{
     margin:0 auto;
     font-size:2.0em;
     text-align:center;
         font-family: Futura, 'Century Gothic'
 }
 hr{
     height: 1px;
    background-color: #000;
    border: none;
    color: #000;
     }
  @media screen and (min-width: 1000px){
     hr{
         width:1000px;
     }
 }
 
.container {
        width: 100%;
        height: 80vh;
        background-color: #fff;
}
.slider-area {
        position: relative;
        width: 100%;
        height: 80vh;
} 
@media screen and (min-width: 1000px){
    .container {
        width: 100%;
        height: 50vh;
        background-color: #fff;
    }

    .slider-area {
        position: relative;
        width: 100%;
        height: 50vh;
    }
}
.slider-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    animation: slideShow 15s linear infinite 0s;
}

.slider-item:nth-child(2) {
    animation-delay: 10s;
}

.slider-item:nth-child(3) {
    animation-delay: 5s;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slideShow {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }

    20% {
        opacity: 1;
    }

    40%,
    100% {
        opacity: 0;
    }
}