@charset "utf-8";

/*全体にかかわる設定*/
html *,
::before,
::after {
	box-sizing: border-box;
}

html {
	font-size: 10px;
}

@media (max-width: 768px) {
	html {
		font-size: 9.5px;
	}
}

body {
  font-family: "游ゴシック体", sans-serif;
	color: #707070;
	line-height: 1.7;
	font-size: 1.6rem;
	letter-spacing: 0.08em;
}

a {
	text-decoration: none;
	transition: 0.4s all
}

a:hover {
	opacity: 0.8;
}

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

.text-center {
	text-align: center;
}


/*見出し*/
.heading-box {
  position: relative;
	width: 300px;
	height: 70px;
}

.heading-box--level2 {
	margin-left: auto;
	margin-right: auto;	
	margin-bottom: 28px;
}
.heading-box--food {
	margin-bottom: 28px;
	width: 167px;
}

.heading-box--drink {
	margin-bottom: 28px;
	width: 210px;
}

.heading-box--level4 {
	margin-bottom: 24px;
	margin-left: auto;
	margin-right: auto;	
}



.heading-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);	
}

.heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.level2-heading {
	font-size: 2.8rem;
	font-weight: bold;
}

.level3-heading {
	font-size: 2.4rem;
	font-weight: bold;
}



/*====================================ヘッダー====================================*/
.fv {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(250, 252, 252), rgb(188, 220, 234) );
}

.header {
	height: 764px;
	position: relative;
}

.kv {
	position: absolute;
	right: 0;
	width: 85%;
	height: 764px;
	object-fit: cover;
}

.header__logo {
	position: absolute;
	top: 10%;
	left: 3.5%;	
}

.header__text {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;	
	top: 25%;
	left: 8%;
	font-size: 2.2rem;
	letter-spacing: 0.6rem;
	font-family: serif;
	line-height: 2;
}

@media (max-width: 1150px) {
	.header__logo {
		top: 70%;
		left: 3.5%;	
		width: 200px;
	}
	.header__text {
		top: 20%;
		left: 6%;
	}
}

@media (max-width: 700px) {
	.header {
		height: 600px;
	}
	.kv {
		width: 80%;
		height: 600px;
	}
	.header__logo {
		top: 80%;
		left: 3.5%;	
		width: 200px;
	}
	.header__text {
		top: 20%;
		left: 10%;
		font-size: 1.8rem;
  transform: translate(-50%, -0%);
	}
}





/*====================================アバウト====================================*/
.about {
	position: relative;
}
.about__image-1 {
	position: absolute;
	top: 15%;
	left: 15%;
}
.about__image-2 {
	position: absolute;
	top: 35%;
	right: 15%;
}
.about__image-3 {
	position: absolute;
	top: 60%;
	left: 8%;
}
.about__image-4 {
	position: absolute;
	top: 75%;
	right: 0%;
}

.about__text {
	text-align: center;
	padding: 300px 0;
}

.about__text p:not(:last-child) {
	margin-bottom: 44px;
}


@media (max-width: 1100px) {
	.about__image-1 {
		width: 200px;
	}
	.about__image-2 {
		width: 150px;
	}
	.about__image-3 {
	}
	.about__image-4 {
		width: 200px;
	}
}


@media (max-width: 900px) {
	.about__image-1 {
		top: 15%;
		left: 5%;
	}
	.about__image-2 {
		top: 35%;
		right: 8%;
	}
	.about__image-3 {
		top: 65%;
		left: 5%;
	}
	.about__image-4 {
		top: 75%;
	}
}


@media (max-width: 680px) {
	.about__image-1 {
		top: 8%;
		left: 5%;
		width: 150px;
	}
	.about__image-2 {
		top: 15%;
		right: 8%;
		width: 120px;
	}
	.about__image-3 {
		top: 70%;
		left: 5%;
		width: 120px;
	}
	.about__image-4 {
		top: 75%;
		width: 150px;
	}
}





/*====================================メニュー====================================*/
.menu {
	background-image: url(../image/menu-bg.jpg);
	background-size: cover;
}


.menu__inner {
	max-width: 1150px;
	padding: 180px 2% 30px;
	margin: 0 auto;
}

.menu__text {
	margin-bottom: 12px;
}

@media (max-width: 768px) {
.menu__inner {
	padding: 80px 2% 0px;
}	
}


/*food*/
.food {
	margin: 60px 0;
}



.food__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.food__item {
	width: 44%;
}

.food__img {
	width: 100%;
	border-radius: 10px;
}

.food__item:nth-child(1), .food__item:nth-child(2) {
	margin-bottom: 32px;
}



.food__name {
	margin-top: 20px;
	font-weight: bold;
}

.food__price {
	margin: 12px 0;
}

@media (max-width: 768px) {
	.food__item {
		width: 48%;
	}
	.food__item:nth-child(3) {
		margin-bottom: 32px;
	}
	.food__name, .food__price {
		text-align: center;
	}
}

@media (max-width: 500px) {
	.food__item {
		width: 100%;
	}
}



/*drink*/
.drink__inner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.hot-drink {
	width: 50%;
}

.cold-drink {
	width: 50%;
}

.drink__pickup {
	display: flex;
	justify-content: space-between;
	margin-bottom: 32px;
}

.drink__item {
	width: 29%;
}

.drink__img {
	border-radius: 10px;
}

.drink__name {
	margin: 24px 0 15px;
	font-weight: bold;
}


.drink__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 265px;
	margin-left: auto;
	margin-right: auto;
}

.drink__list dt {
	width: 80%;

}

.drink__list dt:not(:last-child) {
	margin-bottom: 20px;	
}

.drink__list dd {
	width: 20%;
	text-align: right;
}

@media (max-width: 768px) {
	.drink__inner {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.drink__list {
		width: 300px;
	}

	.hot-drink {
		width: 100%;
	}

	.cold-drink {
		width: 100%;
	}
}


/*====================================アクセス====================================*/

.access {
  background: linear-gradient(180deg, rgb(188, 220, 234), rgb(220, 240, 245), rgb(250, 250, 250) );
}


.access__inner {
	padding: 160px 2% 180px;	
}

.access__contents {

	display: flex;
	max-width: 1150px;
	margin: 0 auto;
	align-items: center;
}

.access__map-wrapper {
	width: 700px;
	margin-right: 100px;
	height: 300px;
}

.access__map {
	width: 100%;
	height: 100%;
}

.access__data p {
	margin-bottom: 20px;
	font-size: 1.8rem;
}

.access__link {
	margin-top: 22px;
	font-size: 1.8rem;
	color: #303D61;
}


@media (max-width: 800px) {
.access__contents {
	flex-direction: column;
	align-items: flex-start;
	}
	.access__map-wrapper {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 30px;
	}
	.access__inner {
		padding: 60px 2% 70px;	
	}
}



/*波*/

.wave{
position:relative;
height:200px;/*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
}
canvas{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}



@media (max-width: 800px) {
.wave {
	height: 100px;
}
}



/*====================================フッター====================================*/
.footer {
	background-image: url(../image/footer.jpg);
	background-size: cover;
	padding: 78px 100px 30px;
}


.footer__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

	.footer__sns-link:not(:last-child) {
		margin-right: 6px;
	}


.footer__copyright {
	text-align: center;
}

@media (max-width: 768px) {
	.footer {
		padding-top: 60px;
	}
	.footer__item {
		display: flex;
		flex-direction: column;
	}
	.footer__logo {
		margin-bottom: 30px;
	}
	.footer__sns-link:not(:last-child) {
		margin-right: 10px;
	}
}







/*====================================アニメーション====================================*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}

@keyframes fadeLeftAnime{
  from {
	transform: translateX(-50px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}



/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}


/* ぼかしから */
.fadeBlur{
	animation-name:blurAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(8px);
	opacity: 0;
  }

  to {
	filter: blur(0);
	opacity: 1;
  }
}




/*遅延*/

.delay-time-02{
animation-delay: 0.2s;
}
.delay-time-04{
animation-delay: 0.4s;
}



.none {
	opacity: 0;
}