@charset "UTF-8";



.menu-wrap{
	position: relative;
    background-color: #FEF5F6;
    padding-top: 11em;
	padding-bottom: 13em;
  background-image:url("../img/circle-wrap.png");

  background-position: top center;
	background-repeat: repeat-y;
	background-size: contain;
}




.menu-bk{
	
	position: relative;
    z-index: 998;
    max-width: 1760px;
    width: 87%;
    margin: 0 auto;
	border-radius: 85px;
}



.menu {
  padding: 40px 0 100px;

}
@media screen and (max-width: 767px) {
  .menu {
    background: none;
  }
	
.menu-wrap{
	position: relative;
    background-color: #FEF5F6;
    padding-top: 6em;
	padding-bottom: 2em;
  background-image:none;
}	
	
	.menu-wrap::before{
		  content: "";
  	position: absolute;
  	width: 130px;
  	height:130px;
  	background: url("../img/circle1.png") no-repeat;
  	background-size: contain;
        left: 24%;
        top: 0.3%;
	}	

	.menu-bk{
		width: 97%;

	}
	
}




.menu__ttl {
  position: relative;
  text-align: center;
	margin-top: 5em;
}



.menu__ttl p {
  position: relative;
  z-index: 99;
  font-size: 3em;
  color: #99714F;
  line-height:0;
	padding-bottom: 39px;
/*
	margin-top: 1em;
	    padding-top: 28px;
*/
	display: inline-block;
	text-align: center;
}


.menu__ttl p::after{
	position: absolute;
	   top:36px;
   
    width: 100%;
    content: '';
	    border-bottom: solid 3.5px #99714F;
    right: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}



.menu__listwrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1100px;
	background: #fff;
	    padding-bottom: 3em;
    z-index: 99;
	margin-top: 2em;
}

.curve-top{
	line-height: 0;
  width: 92%;
  margin: 0 auto;
  max-width: 1760px;
}


.dome-frame {
  position: relative;
  width: 100%; /* ビューポート幅の50% */
  max-width: 1760px; /* 最大幅を設定 */
  aspect-ratio: 2 / 1; /* 幅と高さの比率を2:1に設定 */
  border-top: 3px solid #99714F; /* 外側の線 */
 border-left: 3px solid #99714F; /* 外側の線 */
	 border-right: 3px solid #99714F; /* 外側の線 */
  border-radius: 50% 50% 0 0; /* ドーム型の形状を作る */

  overflow: hidden; /* 内部要素がはみ出ないようにする */
  margin: 0 auto; /* 中央揃え */
	height: 178px;
	
	background-color: #FEF5F6;  /*  背景を透明にする */
	z-index: 99;
}


/* 内側の二重線を作成 */
.dome-frame::before {
  content: '';
  position: absolute;
  top: 20px; /* 外枠から均等な距離 */
  left: 20px; /* 外枠から均等な距離 */
  right: 20px; /* 外枠から均等な距離 */
  bottom: 20px; /* 外枠から均等な距離 */
  border-top: 3px solid #99714F; /* 外側の線 */
 border-left: 3px solid #99714F; /* 外側の線 */
	 border-right: 3px solid #99714F; /* 外側の線 */
  border-radius: 50% 50% 0 0; /* ドーム型の形状を作る */
  background-color: transparent; /* 背景を透明にする */
}

.dome-frame::after {
  content: '';
  position: absolute;
  top: 38%; /* 外枠から均等な距離 */
  left: 6%; /* 外枠から均等な距離 */
  right: 6%; /* 外枠から均等な距離 */
  bottom: 0%; /* 外枠から均等な距離 */

  border-radius: 50% 50% 0 0; /* ドーム型の形状を作る */
  background-color: #fff; /* 背景を透明にする */
}




.brown-line{

border-left: solid 3px #99714F;	
border-right: solid 3px #99714F;	
border-bottom: solid 3px #99714F;		
    background-color: #FEF5F6;
position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1760px;
    margin-top: -42px;

	padding-bottom: 4em;
}



.brown-line::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-bottom: 3px solid #99714F;
    border-left: 3px solid #99714F;
    border-right: 3px solid #99714F;
 
    background-color: transparent;
	z-index: 99;
}


/**********枠線sp************/

@media screen and (max-width: 767px){
	.dome-frame{
		border: none;
		overflow:inherit;
		    height: 146px;
		background-color: revert;
	}
	
	.dome-frame::before{
		display: none;
	}
	
	.brown-line{
		border: none;
		margin-top:-41px;
	}
	
	.brown-line::before{
		border: none;
	}
	
	.dome-frame::after{
		left: 1.5%;
    	right: 1.5%;
		border-top: solid 3px #99714F;
    	border-left: solid 3px #99714F;
    	border-right: solid 3px #99714F;
	}
	
	.menu__ttl p{
		    padding-bottom: 0px;
        font-size: 1.8em;
	}
	
	.menu__ttl{
		height: 40px;
	}
}











.menu__list {
  width: 100%;
  margin: 0 auto;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
/*    padding: 1em 2em 5em 2em;*/
}
@media screen and (max-width: 767px) {
  .menu__list {
    justify-content: space-around;
	      padding: 0.1em 0.6em 5em 0.6em;
        width: auto;
  }

}

.menubtn {
  /* width: 100%; */
  max-width: 780px;
  margin: 0 auto;
  margin-top: 3em;
  margin-bottom: 2em;
	padding: 0 10px;
}
@media screen and (max-width: 767px) {
  .menubtn {
	margin: 0 auto;
    margin-bottom: 30px;
  }
}



.menu-box{
/* 	display: flex;
	justify-content: center;
	align-items: center; */
	/* max-width: 878px; */
	width: 80%;
	margin: 0 auto;
	border: solid 2px #357F96; 
	padding: 20px;
  position: relative;

}

.category_ttl{
  text-align: center;
 border-radius: 50px;
  background-color: #357F96;
  padding: 3% 7%;
  font-size: 1.4em;
  line-height: 0;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15%;
}




.menubtn__list {
  display: flex;
	justify-content: center;
	max-width: 780px;
flex-wrap: wrap; 
}
.menubtn__list a {
  /* width: calc((100% - 20px) / 3); */
/* 	background-color: #D5E48C; */
  margin: 0 10px;
	margin-bottom: 10px;
/* 	border-radius: 50px; */
padding: 20px 5px 0px 5px;
/* 	box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.15); */
}

.menubtn__list a:hover{
  border-bottom: solid #543C16 2px;
}



.menubtn__list li p{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	color: #543C16;
	letter-spacing: 0.1em;
}





.menu1column{
	background-color: #D5E48C;
padding:20px 5px;
	margin-bottom: 10px;
	border-radius: 50px;
	position: relative;
	box-shadow: 2px 3px 2px 0px rgba(0, 0, 0, 0.15);
}

.menu1column p{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	color: #543C16;
	letter-spacing: 0.1em;
}





/* 
.newshop_wrap{
	position: relative;
} */

/* .newshop_wrap::after{
	  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 3px #543C16;
  border-right: solid 3px #543C16;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  transform: rotate(45deg);
    
    transition: all .3s;
} */


.newshop_wrap:hover::after{
	right: 10px;
}

.newshop_wrap:hover{
	box-shadow:none;
	 transition: all .3s;
}






.menu1column::after{
	  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 3px #543C16;
  border-right: solid 3px #543C16;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}


.menu1column:hover::after{
	right: 10px;
}

.menu1column:hover{
	box-shadow:none;
	 transition: all .3s;
}














@media screen and (max-width: 767px) {
	.menu-box{
		display: block;
    width: 90%;
            padding-top: 7%;
	}
	
	
	.menubtn__list li p{
		font-size: 1em;
	}
	
	/* .menubtn__list a{
		width: calc((100% - 6px) / 2);
	} */
	
}







.swiper-button_wrap {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5em;
}

.swiper-button-next,
.swiper-button-prev {
  position: static;
  width: 30%;
  height: 40px;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-next:after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.item {
width: 28%;
    /* margin: 16px; */
    min-width: 250px;
    margin: 0 1%;
    margin-bottom: 4em;
}
@media screen and (max-width: 767px) {
  .item {
    width: 48%;
    min-width: auto;
    margin: 10px 0;
    margin-bottom: 2em;
  }
}
.item a {
  position: relative;
  display: block;
/*  width: 100%;*/
  height: 100%;
  padding: 0.5em;
  padding-bottom: 1em;
  background: #fff;
  border-radius: 0 0 30px 0;
border: solid #CAAA61 2px;
box-shadow: 0px 0px 10px -5px #CAAA61;
  transition: all 0.3s;
	
}





@media screen and (max-width: 767px) {
  .item a {
    padding-bottom: 1.2em;
	      padding: 0.3em;
	      border-radius: 10px;
  }
}
.item a::after {
  content: "";
  position: absolute;
  width: 16%;
  height: 11%;
  background: url(../img/arrow-circle.png) no-repeat;
  background-size: contain;
  bottom: 2%;
  right: 3%;
}
@media screen and (max-width: 767px) {
  .item a::after {
		width: 23%;
        bottom: -6%;
        right: 1%;
	      height: 22%;
  }
}
.item a:hover {
  box-shadow: none;
}
.item__tenpo p {
  color:#3A3A3A;
}
/*
.item__img img {
  border-radius: 20px;
}
*/
.item__foodcourt {
  position: absolute;
  width: 40%;
  min-width: 108px;
  padding: 4px 7px 4px 12px;
  background: #F4ABB7;
  border-radius: 50px 0 0 50px;
  top: 58%;
  right: 0;
  text-align: center;
}



@media screen and (max-width: 767px) {
  .item__foodcourt {
    width: 32%;
    padding: 2px 0 2px 2px;
	  min-width: 82px;
	      top: 64%;
  }
	
.item__img img {
  border-radius: 10px;
}	
	
	
}
.item__foodcourt p {
  color: #000;
	font-size: 0.9em;
}
.item__txt {
  margin-top: 8px;
}

@media screen and (max-width: 767px) {

	
	.item__foodcourt p {
	font-size: 0.8em;
}
	



	
}


@media screen and (max-width: 630px){
	.item__foodcourt{
		top: 56%;
		width: 38%;
	}
}

@media screen and (max-width: 445px){
	.item__foodcourt{
		top: 48%;
		width: 38%;
	}
	
	


	

	
	
	
	
	
}







.item__floor {
  margin: 0;
  padding: 0;
  margin-top: 4px;
  border: none;
  text-align: center;
}
.item__floor p {
  font-size: 0.8em;
}
.item__detail {
  margin-top: 20px;
  margin-bottom: 8px;
}
.item__detail a {
  display: inline-block;
  line-height: 1.4;
}
.item__detail a span {
  background: linear-gradient(transparent 95%, #573028 5%);
}
.item__price p {
  text-align: right;
  font-size: 1.5em;
}
.item__price p span {
  font-size: 0.7em;
}
.item__price p span.tax {
  font-size: 0.7em;
}


.img-notice{
	text-align: center;
	font-size: 1em;
	font-weight: 400;
	color: #4E4E4E;
}












.search {
  margin-top: 80px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .search {
    margin-top: 40px;
  }
}
.search__txt p {
  position: relative;
  display: inline-block;
  color: #543C16;
    font-size: 1.4em;
    font-weight: 600;	
	letter-spacing: 0.1em;
	
}
.search__txt p::before, .search__txt p::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background: #543C16;
  bottom: 0;
}
.search__txt p::before {
  transform: rotate(-20deg);
  left: -4%;
}
.search__txt p::after {
  transform: rotate(20deg);
  right: -4%;
}
.search__btn {
  width: 90%;
  margin: 0 auto;
  max-width: 400px;
  margin-top: 10px;
}
.search__btn a {
  position: relative;
  display: block;
  padding: 12px 0;
  background: #B08D47;
  border-radius: 40px;
  color: #fff;
  text-align: center;
  font-size: 1.2em;
}
.search__btn a::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: url(../img/lupe.png) no-repeat;
  background-size: contain;
  right: 30%;
  top: 30%;
}
@media screen and (max-width: 767px) {
  .search__btn a::after {
    right: 24%;
  }
	
	.search__txt p{
		font-size: 1.2em;
	}
	.search__txt p::before{
		    left: -10%;
	}
	
	.search__txt p::after{
		 right: -10%;
	}
	
	
	
	
}

.mainnotice {
  width: 90%;
  margin: 60px auto 120px;
  max-width: 1100px;
}
.mainnotice p {
  font-size: 0.9em;
}

#footer {
  position: relative;
  margin-bottom: 80px;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  #footer {
    margin-bottom: 20px;
  }
}

@media all and (-ms-high-contrast: none) {
  .line_anime {
    height: auto;
  }
}
.topbtn {
  display: inline-block;
  padding-top: 0;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 998;
}
.topbtn a {
  text-decoration: none;
  color: #92A920;
	font-size: 1.8em;
font-weight: 800;
    text-shadow: 2px 3px 3px rgba(158, 158, 158, 0.48);
	font-family: "Noto Serif JP", serif;
}
.topbtn::before {
  animation: scroll 3.5s infinite;
  border: solid #92A920;
  border-width: 0 0 2px 2px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(135deg);
  width: 20px;
  height: 20px;
}

@keyframes scroll {
  0% {
    transform: rotate(135deg) translate(0, 0);
  }
  80% {
    transform: rotate(135deg) translate(-20px, 20px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
}

.leftAnime2 {
  opacity: 0;
}

.leftAnime3 {
  opacity: 0;
}

.leftAnime-main {
  opacity: 0;
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeLeftRight2 {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeLeftRight3 {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeLeftRight-main {
  animation-name: slideTextX100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeRightLeft2 {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeRightLeft3 {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.slideAnimeRightLeft-main {
  animation-name: slideTextX-100;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/*アニメーション*/
.anime-b {
  opacity: 0;
  visibility: hidden;
  transition: 2s;
  transform: translateY(0);
}

.anime-b2 {
  opacity: 0;
  visibility: hidden;
  transition-delay: 2s;
  transition: 1s;
  transform: translateY(0);
}

.anime-b3 {
  opacity: 0;
  visibility: hidden;
  transition-delay: 1.6s;
  transition: 1s;
  transform: translateY(40px);
}

.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}/*# sourceMappingURL=style-2024gourmet_hon.css.map */




/***************スライダー*******************/

.visual-wrap{
	max-width: 1100px;
	margin: 0 auto;
	margin-top: 5em;
	width: 95%;
}


.slick-img{
	padding: 5px;
}


.slick-prev:before{
	content: '<';
	color: #543C16;
	background-color: #fff;
	padding: 6px 10px;
	box-shadow: 0px 0px 15px -5px #777777;
	border-radius: 50px;
	font-weight: 600;
}

.slick-next:before{
	content: '>';
	color: #543C16;
	background-color: #fff;
	padding: 6px 10px;
	box-shadow: 0px 0px 15px -5px #777777;
	border-radius: 50px;
	font-weight: 600;
}


.slick-prev, .slick-next{
	z-index: 998;
}

.slick-prev:before, .slick-next:before{
	opacity: 100;
}


.slick-next{
	    width: 30px;
}


.slick-dots li button:before{
	background:#898989;
	opacity: 75;
}

.slick-dots li.slick-active button:before{
	background: #333333;
	opacity: 75;
}

/***************スライダーfin*******************/
@media screen and (max-width: 767px){
	.slick-next,.slick-prev {
    width: 10px;
}
	
	.slick-prev{
		left: -11px
	}
	
	.slick-next{
		right: 14px;
	}
	
}


/***************ボタンオープン　gray*******************/
.bgblack.active-on {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  z-index: 999;
}
.bgblack.active-on{
  width: auto;
  height: auto;
}
.bgblack.active-on{
  display: block;
  background: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
}
/***************ボタンオープン　gray fin*******************/


/***************rotate　move*******************/
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-img {
  width: 300px;
  height: 300px;
position: absolute;
  margin: 50px auto;
  animation: rotateAnimation 50s linear infinite;
}

.rotate-left{
	top: 1%;
	left: 2%;
}

.rotate-right{
	bottom: 0%;
	right: 2%;
}


@media screen and (max-width: 767px){
.rotate-img {
  width: 190px;
  height: 190px;
}
	
	.rotate-left{
	top: 0%;
}
	
	.rotate-right{
		display: none;
	}
	
	.topbtn a{
		font-size: 1.7em;
	}
	.topbtn{
		    right: 24px;
		    bottom: 26px;
	}
}





.animation {
  animation: fade-in 3s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.item-category{
	display: inline-block;
	background: #F0FAFF;
	padding: 10px;
	border-radius: 50px;
	text-align: center;
	font-size: 1em;
	line-height: 0.8;
	font-weight: 500;
	color: #357F96;
	margin-bottom: 10px;
}


.item-ttl{
	text-align: left;
	font-size: 1.1em;
	font-weight: 500;
	color: #357F96;
	margin-bottom: 10px;
}

.item-info{
	text-align: left;
	font-size: 1em;
	font-weight: 500;
	color: #1D1D1D;
	
}

@media screen and (max-width: 767px){
  .item-ttl{
    font-size: 1em;
  }

  .item-info{
        font-size: 0.9em;
    line-height: 1.6em;
  }
}





@media screen and (max-width: 555px){
      .menu-box{
        width: 82%;
        padding-top: 10%;
      }

      .category_ttl{
            padding: 5% 8%;
           top: -7%;

      }
}