/* ===============================
	base
 =============================== */
html, body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-size: 1em;
  line-height: 1.8em;
  color: #000;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
}
.fs26{
font-size: 22px;
}
.spo {
  display: none;
}
.pco {
  display: block;
}
.sp76 {
  display: none;
}
.pc76 {
  display: block;
}
@media screen and (min-width: 1201px) {
	.sp120{
    display: none!important;		
	}
}
@media screen and (max-width: 1200px) {
.pc120{
    display: none!important;		
	}
}
@media screen and (max-width: 991px) {
  .pco {
    display: none!important;
  }
}
@media only screen and (min-width:769px) {
  .sp76 {
    display: none!important;
  }
}
@media only screen and (max-width:768px) {
  body {
    font-size: 0.9em;
  }
  .pc76 {
    display: none!important;
  }
}
/* ===============================
	nav
 =============================== */
.higologo{
top:0px;
position: absolute;
margin-top: -35px;
}
.tel-btn{
display: inline-block;
font-size: 1.4rem;
background-color:#75939d;
color: #fff!important;
text-decoration: none;
border-radius: 14rem;
padding: 5px 45px;
}
.headtel{
position: relative;
z-index: 20;
}
.nav-link {
  font-size: 1.1rem;
}
.navbar-brand img {
  width: 300px;
  height: auto;
}
.top-tel {
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
}
nav ul li.nav-item a {
font-weight: 600;
  list-style: none;
  display: inline-block;
  width:auto; /* ここで項目の幅を指定します */
}
nav ul li.nav-item a::after {
  content: "/";
  padding-left: 1rem; /* li要素のwidthと調整が必要 */
  color: #888;
}
a.btn--orange {
  color: #fff;
  background-color: #ff801e;
  border-radius: 30px;
}
.nav-itemorange a {
  color: #fff !important;
}
.topteltel {
  font-size: 2rem;
  font-weight: bold;
}
.topteltel span {
  font-size: 0.9rem;
  font-weight: normal;
}
.headtel p{
margin-top: 20px;
margin-bottom:0px;	
}
.tit001{
margin-top: 20px;
margin-bottom: -20px;
}
.tit2{
line-height:1.6em;
}
.navbar-toggler {
  border: none;
  border-radius: 0;
}
.navbar-toggler:focus {
outline:0;
box-shadow:0 0 0 0;
}
.pc-tel{
margin-top:3px;
font-size: 1.2rem;
}
.time{
position:absolute;
right:350px;
padding: 5px 20px;
border: solid 1px #000;
font-size: 0.8rem;
border-radius: 30px;
margin-right: 20px;
display: inline-block;
}
.time2{
padding: 5px 20px;
border: solid 1px #000;
font-size: 0.8rem;
border-radius: 30px;
margin-right: 20px;
display: inline-block;
margin-bottom:20px;
}
.head-tel{
display:inline-block;
  font-family: "Noto Serif JP", serif;
margin-top: 3px;
font-size: 2.5rem;
}
.contact-btn{
color: #fff;
background-color:#39ae4a;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
.taikyo-btn{
color: #fff;
background-color:#efa400;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
nav ul li.nav-item a {
font-size: 1.5rem;
}
.h35{
height:200px;
}
@media screen and (max-width: 1200px) {
.higologo{
top:0px;
position: absolute;
margin-top: 0px;
width: 260px;
}
.h35 {
    height: 100px;
}
}
@media screen and (max-width: 992px) {
  nav ul li.nav-item a::after {
    content: "";
  }
.navbar-light .navbar-toggler-icon {
background-image: url(../img/sp-menu.png);
background-size:100%;
width:50px;
height:50px;
}
.navbar-nav {
text-align: center;
}
.navbar-nav li{
margin-top: 10px;
}
}
@media screen and (max-width: 991px) {

nav ul li.nav-item a {
    font-size: 1.2rem;
}
}
@media only screen and (max-width:768px) {
  .navbar-brand img {
    width: 250px;
    height: auto;
  }
nav ul li.nav-item a {
    font-size: 1.0rem;
}
}
@media only screen and (max-width:576px) {
nav ul li.nav-item a {
    font-size: 0.9rem;
}
}
@media only screen and (max-width:350px) {
  .navbar-brand img {
    width: 180px;
    height: auto;
  }
}
@media screen and (max-width: 1200px) {
.time-sp{
margin-right:15px;
}
/* ここから */
#global-head {
	position: fixed;
	color: #033560;
	width: 100%;
	text-align: center;
	padding-top: 60px;
	z-index: 100;
		right: 0;
}
#sidebartop {
	padding-top: 40px;
	width: 100%;
	height: 100%;
	position: fixed;
	color: #033560;
	background: #f2ece7;
	right: 0;
}
#global-nav ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0rem;
}
#global-nav > ul > li {
	position: relative;
}

#global-nav a {
	color: #323232;;
	text-decoration: none;
	display: block;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
}
#global-nav li {
	padding: 10px 0;
	}
	
/* nav-toggle */
#nav-toggle {
	display: none;
	position:absolute;
	top: 0px;
	right: 30px;
	height: 32px;
}
#nav-toggle > div {
	position: relative;
	width: 32px;
}
#nav-toggle span {
	width: 150%;
	height: 1.5px;
	left: 0;
	top:30px;
	margin-top:30px;
	display: block;
	background: #000;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;
}

#overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
	#main-in {
		padding-left: 0;
	}
	#global-head {
		width: 100%;
		padding: 10px;
		background: rgba(255,255,255,.8);
		display: -webkit-flex;
		display: flex;
	}
	#sidebartop {
		/*display: none;*/
		position: fixed;
		right: -100%;
		top: 65px;
		height: 100%;
		width: 100%;
		color: #333;
background-color:#f2eeeb;
		-webkit-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		z-index: 900;
	}

	/* サブメニューは開けない */
	#global-nav .sub-menu-head:after,
	#global-nav .sub-menu-nav {
		display: none;
	}
	#nav-toggle {
		display: block;
	}

	/* nav open */
	.open {
		overflow: hidden;
	}
	.open #overlay {
		display: block;
	}
	.open #sidebartop  {
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}

	/* #nav-toggle close */
	.open #nav-toggle span:nth-child(1) {
		top: 5px;
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		transform: rotate(20deg);
	}
	.open #nav-toggle span:nth-child(2) {
		top: 5px;
		-webkit-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	/* z-index */
	#overlay {
		z-index: 20;
	}
	#sidebartop {
		z-index: 300;
	}
	#nav-toggle {
		z-index: 400;
	}
	#global-btm{
		display: none;
	}
	#global-nav{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 20px;
	}
	#global-nav span{
	display: inline-block;
	float: right;
	font-size: 16px;
	}
	#global-nav li img{
    width: 400px;
	max-width: 100%;		
	}
	.head-logo {
    margin-left: 15px;
}
	.under-line{
	border-bottom: 1px solid #000;	
	}
.sp-menu-text{
margin-top: 40px;
font-size: 14px;
line-height: 1.2rem;
letter-spacing: 0.05em;
}
.sp-m-logo{
max-width: 100%;
}
.sp-m-con img{
margin-bottom: 10px;
}
.sp-cont-mt{
margin-top: 20px;
padding-left: 5px;
}
.sp-cont-mt a{
display: inline-block!important;
}
.sp-cont-mt a img{
margin-right: 20px;		
}
.sp-m-p01 {
margin-top: 70px;
font-size: 14px;
letter-spacing: 0.05em;
clear: both;
margin-right: 15px;
}
}
.sp-m-p02{
margin-top:25px;
font-size: 14px;
margin-bottom: 0px;
line-height: 1.2rem;
letter-spacing: 0.05em;
margin-right: 15px;
}
.sp-m-p03{
font-size: 10px;
line-height: 1.2rem;
letter-spacing: 0.05em;
margin-right: 15px;
}
.float-left{
position:absolute;
top:10px;
left:10px;
}
}
/* ===============================
	共通
 =============================== */
a.btn--green {
  color: #fff;
  background-color: #229f73;
}
a.btn--navy:hover {
  color: #fff;
  background: #1c7f59;
}
a.btn-c {
  font-size: 1.1rem;
  position: relative;
  padding: 0.5rem 2rem 0.5rem 2rem;
  border-radius: 100vh;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 30px;
}
.btn {
  text-align: center;
}
a.btn--green:hover {
  color: #fff;
  background: #1c7f59;
}
a.btn-o {
    text-align: center;
    display: inline-block;
    color: #000;
    border: 1px solid #000;
    border-radius: 30px;
    padding: 10px 80px;
    text-decoration: none;
    margin: auto;
    font-size: 1.4rem;
}
.text-right{
text-align: right
}
.kuro{
color: #000;	
}
@media screen and (max-width: 991px) {
.row {
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x)* 0);
    margin-left: calc(var(--bs-gutter-x)* 0);
}
}
@media only screen and (max-width:576px) {
.row {
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x)* -0.3);
    margin-left: calc(var(--bs-gutter-x)* -0.3);
}
}
/* ===============================
	info
 =============================== */
.navbar{
background:#f2eeeb;	
}
.bg-a{
background:#f2eeeb;	
}
#gallery{
margin-top: -60px;
background:#f2eeeb;
padding-bottom:3%;
}
.slider .slick-slide {
    margin: 0 10px;
}
.main-v{
width:100%;
display: flex;
flex-wrap: wrap;
align-items: end;		
}
.main-a{
margin-left:1%;
width: 30%;
height:auto;
}
.main-b{
margin-left:1%;
width: 67%;
height:auto;
}
.info2{
padding-top:5%;
padding-bottom:5%;
}
.info-list{
margin-top: 20px;
padding-left: 5px;
}

.info-list dt{
display:inline-block;
float:left;	
clear:both;
width:150px;
margin-bottom:0.5rem;
font-weight:normal!important;
}

.info-list dd a{
text-decoration:none;
color:#000;
}


/* ===============================
	about
 =============================== */
ul.slider{
padding-left:0;
}
.about{
padding-top:5%;
padding-bottom:5%;
}
.about-bg{
position:relative;
margin-top:-15%;
padding-top:15%;
padding-bottom:15%;
background-image:url(../img/about-bg-img.jpg);
background-repeat:no-repeat;
background-size:cover;
width:100%;
z-index:-1;
}

.txt-about{
padding:5%;
}
.list-markar li{
list-style:none;
font-size:1.6em;
line-height:1.8em;
}
.list-markar li span{
background: linear-gradient(180deg, #fff 0%, #fff 60%, 	#FFFF00 60%, #FFFF00 100%);
}

/* ===============================
	SERVICE
 =============================== */


/* ===============================
	ftr
 =============================== */
.ftr{
padding-top:5%;
background: linear-gradient(180deg, #fff 0%, #fff 20%, #5AB5B2 20%, #007f89 100%);
color: #fff;
}

.copy {
margin-top: 2rem;
  text-align: center;
}
.f-tel {
  font-size: 3rem;
font-family:"Noto Serif JP", serif;
}

.ftrdit a {
  color: #fff;
}
.ftr .navbar {
  margin-bottom: 50px;
}
.ftr ul li a, .ftr ul li a:hover {
  color: #fff !important;
}
.ftr nav ul li.nav-item a::after {
  content: "/";
  padding-left: 1rem; /* li要素のwidthと調整が必要 */
  color: #fff;
}

.ftr ul {
display: flex; /* 親要素に指定することで、Flexboxが適用される */
flex-wrap: wrap;	
flex-direction: row; /* 左から右に横並び（デフォルト値なのでなくても可） */
justify-content: center; /* 中央揃え */
margin-left: -3px;
padding-left: 0px;
}
.ftr ul li {
margin-left: 3px;
margin-right: 3px;
list-style: none;
}
.p-txt{
margin-top: 30px;
text-align: center;
}
.p-txt a{
color: #fff;
text-decoration: none;
font-size: 16px;
}
.f-contact-btn{
display:inline-block;
color: #fff;
border-radius: 30px;
padding: 5px 20px;
text-decoration: none;
background-color: #e9546b;
margin-right: 20px;
width: 220px;
}
.f-yoyaku-btn{
display:inline-block;
color: #fff;
border-radius: 30px;
padding: 5px 20px;
text-decoration: none;
background-color: #ffb933;
margin-left: 20px;
width: 220px;
}

a.f-contact-btn:hover,a.f-yoyaku-btn:hover{
color: #fff;
}
@media screen and (max-width: 768px) {
.f-contact-btn{
margin-right: 0px;
margin-bottom: 20px;
}
.f-yoyaku-btn{
margin-left: 0px;
}
.f-tel {
font-size:1.8rem;
}
.f-nav .nav-link{
font-size: 14px;
padding: .5rem 0.5rem;
}
}
/* ===============================
	メニューページ
 =============================== */
.menu-head{
padding-top:3%;
padding-bottom:5%;
}
.lunch,.sweets,.softdrinks,.beer{
padding-top:5%;
padding-bottom:5%;	
}
.menu-tit{
height:70px;
width:auto;
}
.appetizer,.coffee,.wine{
background-color:#f2eeeb;
padding-top:5%;
padding-bottom:5%;
}
.appetizer-img,.sweets-img{
text-align: right;
padding-right: 30px;
}
.appetizer-img{
min-width: 100%;
}
.price{
font-size: 1.8rem;
}
.z-price{
font-size: 1rem;
display:inline-block;
margin-left: 20px;
}
.price-bg1{
background-color:#f2eeeb;
padding: 10px;
}
.price-bg2{
background-color: #fff;
padding: 10px;
}
.coffee-price dt{
width: 70%;
float: left;
clear: both;
line-height: 4em;
}

.coffee-price dt h3{
font-size: 1.2rem;
line-height: 4em;
}
.coffee-price dd{
width: 30%;
float: right;
font-size: 1.5rem;
line-height: 2.5em;
text-align: right;
}
.coffee-price .hot{
display: inline-block;
font-size: 1.0rem;
line-height: 4em;
}
.coffee-price dt span,.softdrinks-price dt span{
float: right;	
}
.softdrinks-price dt{
width: 70%;
float: left;
clear: both;
}
.softdrinks-price dt h3{
margin-top: 5px;
font-size: 1.6rem;
margin-bottom: 10px!important;
}
.softdrinks-price dt p{
margin-bottom: 0px!important;
}
.softdrinks-price dd{
width: 30%;
float: right;
font-size: 1.5rem;
text-align: right;
}
.softdrinks-price .hot{
display:inline-block;
font-size: 1.0rem;
margin-bottom: 10px;
}
.softdrinkse-price dt span{
font-size: 1.0rem;
float: right;
}
.softdrinks-price dt{
width: 70%;
float: left;
clear: both;
}
.beer-price dt h3{
margin-top: 5px;
font-size: 1.2rem;
margin-bottom: 10px!important;
}
.beer-price dt p{
margin-bottom: 0px!important;
}
.beer-price dd{
width: 30%;
float: right;
font-size: 1.5rem;
text-align: right;
}
.beer-price .hot{
display:inline-block;
font-size: 1.0rem;
margin-bottom: 10px;
}
.beer-price dt span{
font-size: 1.0rem;
float: right;
}
.beer-price dt{
width: 70%;
float: left;
clear: both;
}
@media screen and (max-width: 991px) {
.coffee-price dt{
width: 100%;
}
.coffee-price dd{
width: 100%;
}
.softdrinks-price dt{
width: 100%;
}
.softdrinks-price dd{
width: 100%;
}
}
@media screen and (min-width: 769px) {
.spbr{
display: none;
}
}
@media screen and (max-width: 768px) {
.lunch,.sweets,.softdrinks,.beer{
padding-top:15%;
padding-bottom:15%;	
}
.appetizer,.coffee,.wine{
background-color:#f2eeeb;
padding-top:15%;
padding-bottom:15%;
}
.coffee-price dt {
line-height: 2.0em;
}
.coffee-price dt h3 {
line-height: 2.0em;
}
}
/* ===============================
	about
 =============================== */
.olmo{
padding: 5% auto;
}
.owner{
padding: 5% auto;
}
.txt-set .hot{
display: inline-block;
font-size: 1.0rem;
}
.txt-set span{
float: right;
}
@media screen and (max-width: 991px) {
.appetizer-img, .sweets-img {
 text-align: center;
 padding-right:10px;
margin-bottom: 20px;
}
}
@media screen and (min-width: 769px) {
.sp768{
display:none;
}
}
@media screen and (max-width: 768px) {
.menu-tit{
height: 60px;
}
.lunch-img{
margin-bottom: 20px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}
.h3, h3 {
font-size: calc(1.2rem + .6vw);
}
.price {
font-size: 1.4rem;
}
.menu-head{
margin-top: 40px;
padding-bottom: 0px;
width: 100%;
height: 400px;
object-fit: cover; 
}
.bg-a{
padding-bottom: 10%;	
	}
.pc768{
display:none;
}
}

@media screen and (max-width: 567px) {
.coffee-price .hot {
    display:block;
    font-size: 1.0rem;
    line-height: 1.0em;
	margin-top: 10px;
	margin-right:15px;
}
.menu-tit {
height: 40px;
}
.softdrinks .mb-5,.beer .mb-5{
	margin-bottom: 10px!important;
	}
.softdrinks dd{
	margin-bottom: 40px;
	}
.softdrinks-price dt h3{
margin-bottom: 40px!important;
}
.softdrinks .hot {
margin-top: 10px;
}
.beer dt{
width: 100%;
}
.beer dd{
width: 100%;
margin-bottom: 30px!important;
}
.bg-a{
padding-bottom: 5%;	
	}
}
.bg-yoyaku {
	padding:40px;
    background: #f2eeeb;
}
.waku th{
font-weight:normal!important;
}

.yoyaku-btn{
position:fixed;
top:40vh;
right:0;
z-index:9999;
}
.yoyaku-btn img{
width:55px;
height:auto;
}
@media screen and (max-width: 567px) {
.yoyaku-btn img{
width:45px;
height:auto;
}}
.ss3-force-full-width {
width:100%!important;
}
span.eiji{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}
.red{
color:red;
}
.mt-5s{
margin-top:10%;
}
#about-head{
width:100%;
}
#about-head img{
margin-top:-60px;
width:100%;
margin-bottom:60px;
}
table.text-left{
text-align:left!important;
}
.text-left{
text-align:left!important;
}
@media screen and (max-width: 1200px) {
mt-5s{
margin-top:0%;
}}
.gaikanimg{
width:100%;
height:420px;
object-fit: cover;
object-position: top 50% left 0px;
}

/* ===============================
contact
 =============================== */
.mandatory {
    color: #fff;
    font-size: 0.8rem;
	margin-left: 0.5rem;
	background-color: #FF3333;
	border-radius: 2px;
	padding: 5px;
}

#contact dt{
  float: left;
}

#contact dd{
  margin-left: 13rem;
}
#post-3 li{
	list-style:decimal；
}
#contact dt,
#contact dd{
padding-bottom: 1rem;
}
@media only screen and (max-width:768px) {

#contact dt{
clear: both;
	width: 100%;
}
#contact dd{
width: 100%;
margin-left: 0;
}

}


/*------------------------------ */
/* ------ animation style ------ */
/* ----------------------------- */
/* fade zoom */
.u-fade-type-zoom.is-active{
    transition: 8s;
    transform: scale(1.06);
}

/* fade up */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

.u-fade-type-up.is-active{
    transition: 1.2s;
    transform: translateY(0);
    opacity: 1;
}

.is-active .u-fade-type-up{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

.is-active .u-fade-type-up:nth-child(2){transition-delay: .4s;}
.is-active .u-fade-type-up:nth-child(3){transition-delay: .8s;}
.is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
.is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
.is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}

/* fade left */
.u-fade-type-left{
    transform: translateX(50px);
    opacity: 0;
}

.u-fade-type-left.is-active{
    transition: .6s;
    transform: translateX(0);
    opacity: 1;
}

.is-active .u-fade-type-left{
    transition: .6s;
    transform: translateX(0);
    opacity: 1;
}

.is-active .u-fade-type-left:nth-child(2){transition-delay: .2s;}
.is-active .u-fade-type-left:nth-child(3){transition-delay: .4s;}
.is-active .u-fade-type-left:nth-child(4){transition-delay: .6s;}
.is-active .u-fade-type-left:nth-child(5){transition-delay: .8s;}

/* img */
.u-fade-type-slide{
    position: relative;
}

.u-fade-type-slide::after{
    content: '';
    display: block;
    width: 100%;
    transform: scaleX(1);
    transform-origin: 100% 0;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
}

.u-fade-type-slide.is-active::after{
    transition: .6s;
    transform: scaleX(0);
}
#colam a{
color:#594f58;
text-decoration:none;
}

/* single marker */
.u-fade-type-marker {
    background: linear-gradient(to right, transparent 0%,transparent 50%, #ffd000 50%, #ffd000 100%);
    background-repeat: repeat-x;
    background-size: 200% .6em;
    background-position: 0 .6em;
    padding-bottom: .6em;
}

.u-fade-type-marker.is-active{
    transition: all 1.8s ease;
    background-position: -100% .6em;
}