@charset "UTF-8";
/* CSS Document */

/*********************************************************
					　　　　初期設定
**********************************************************/

.pc{display: block;}

.sp{display: none;}

.tb{display: none;}

.brpc{display: block;}

.brsp{display: none;}

.brtb{display: none;}

.eng{
	font-family: 'Montserrat', sans-serif;
}

/*********************************************************
*********************************************************
			ここからカフェページ
*********************************************************
**********************************************************/


/*********************************************************
					カフェページメインビュー
**********************************************************/


.cafe_main {
	width: 100%;
	max-width: 1366px;
	height: 45vw;
	max-height: 450px;
	min-height: 160px;
	margin: 0 auto;
	background: url(../img/cafe_mv.webp) no-repeat center / cover;
}


.cafe_main_h1 {
	width: 80%;
	padding-bottom: 0.05em;
	margin: 0 auto;
	border-bottom: 3px solid #fff;
	font-size: min(6vw,5rem);
	text-align: center;
	color: #fff;

}

.cafe_title {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	width: 100%;
	max-width: 800px;
	height: 100%;
	margin: 0 auto;
}

/* 下からフェードイン */
.cafe_text1 {
	opacity: 0;
	animation: fadein-bottom 1s 0.5s ease-out forwards;
}

.cafe_text2 {
	opacity: 0;
	animation: fadein-bottom 1s 1s ease-out forwards;
}

.cafe_text3 {
	opacity: 0;
	animation: fadein-bottom 1s 1.8s ease-out forwards;
}

/*********************************************************
					ここからcafeshop
**********************************************************/

.cafeshop {
	width: 100%;
	max-width: 1366px;
	padding: 100px 0 200px;
	margin: 0 auto;
	background: url(../img/top_haikei_04.jpg) repeat-y center ;
}

.cafeshop_inner {
	width: 85%;
	margin: 0 auto;
}

.cafeshop_01 {
	width: 100%;
	margin: 0 auto;
}

.cafeshop img {
	display: block;
	width: 15%;
	min-width: 150px;
	height: auto;
	margin: 0 auto;
}

.cafeshop_title {
	text-align: center;
	font-size: min(6vw,4.5rem);
	font-family: 'Libre Baskerville', serif;
}

.cafeshop_01 p {
	padding-top: 2em;
	text-align: center;
	font-size: min(4.57vw,2.2rem);
	letter-spacing: 0.2em;
}

.cafeshop_text {
	width: 73%;
	margin: 0 auto;
}

.cafeshop_02 {
	width: 88%;
	margin: min(7vw, 110px) auto;
}

.cafeshop_photo1 {
	display: flex;
	justify-content: space-between;
	width: 100%;
	aspect-ratio: 10 / 3;
}


.cafeshop_photo1_left {
	width: 69%;
	background: url(../img/cafe01.webp) no-repeat center / cover;

}

.cafeshop_photo1_right {
	width: 30%;
	background: url(../img/cafe02.webp) no-repeat center / cover;
}

.cafeshop_photo2 {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 0.22;
	margin-top: 1%;
}
     
.cafeshop_photo2_left {
	width: 22%;
	height: 100%;
	aspect-ratio: 1  / 1;
	background: url(../img/cafe03.webp) no-repeat center / cover;
}
.cafeshop_photo2_center {
	width: 46%;
	height: 100%;
	aspect-ratio: 1 / 2;
	background: url(../img/cafe04.webp) no-repeat center / cover;
}
.cafeshop_photo2_right {
	width: 30%;
	height: 100%;
	aspect-ratio: 10 / 7;
	background: url(../img/cafe05.webp) no-repeat center / cover;
} 

.cafeshop_03 {
	width: 100%;
	padding: min(7vw, 110px) 0;
	margin: 0 auto;
	background-color: #faf3e6;
}

.cafeshop_03 .cafeshop-inner {
	width: 88%;
	margin: 0 auto;
}

.cafeshop_03 .cafeshop-wrap {
	width: 85%;
	margin: 0 auto;
}
.cafeshop_03 .cafeshop-wrap:nth-child(2) {
	margin: min(5vw,72px) auto 0 auto;
}

.cafeshop-img {
	display: flex;
	width: 100%;
}
.cafeshop-img img {
	width:  calc(100% / 2 - 2%);
	aspect-ratio: 16 / 10;
	padding-right: 4%;
}
.cafeshop-img img:last-child {
	padding-right: 0;
}

.cafeshop_menu_title {
	padding: 0 0 1em 0;
	font-size: min(4.57vw,3rem);
	font-family: 'Libre Baskerville', serif;
}

.cafeshop_menu_01 p,
.cafeshop_menu_02 p {
	padding-bottom: 1em;
	font-size: min(4.57vw,2rem);
	line-height: 1.5em;
	letter-spacing: 0.2em;
}

.drink,
.coffee {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	font-size: min(4.57vw,1.8rem);
}

.drink {
	padding-bottom: 88px;
}

.drink_left,
.drink_right,
.coffee_left,
.coffee_right {
	width: 45%;
}

.coffee {
	padding-bottom: 48px;
}

.menulist {
	padding: 16px 0 16px 10px;
	border-bottom: 1px solid #333;

}

.menulist_ceylon {
	padding: 11px 0 9px 10px;
	border-bottom: 1px solid #333;
}

.drink_left_menu,
.drink_right_menu,
.coffee_left_menu,
.coffee_right_menu {
	border-top: 1px solid #333;
}

.ceylon_dtail {
	font-size: min(4.57vw,1.6rem);
}

.cafeshop_menu_info p {
	width: 100%;
	padding-top: 2em;
	margin: 0 auto;
	font-size: min(4.57vw,1.6rem);
}

.cafeshop-inner2 {
	width: 85%;
    margin: 0 auto;
}

.cafeshop_04 {
	display: flex;
	width: 88%;
	padding: 180px 0 0px;
	margin: 0 auto;
	gap: 20px;
}

.cafeshop_feature_01,
.cafeshop_feature_02 {
	width: 50%;
}

.surroundedbynature {
	width: 100%;
	background-image: url(../img/cafe06.jpg);
	aspect-ratio: 2/1;
	background-size: cover;
	background-position: bottom;
}

.roofbalcony {
	width: 100%;
	background-image: url(../img/cafe07.jpg);
	aspect-ratio: 2/1;
	background-size: cover;
	background-position: bottom;
}

.cafeshop_04 p  {
	width: 95%;
	margin: 0 auto;
	font-size: min(4.57vw,1.8rem);
	text-align: left;
	line-height: 1.5em;
}

.cafeshop_feature_title {
	height: 2.5vw;
	max-height: 30px;
	min-height: 30px;
	padding: 36px 0 10px;
	font-size: min(5.14vw,2.4rem);
	text-align: center;
	font-family: 'Libre Baskerville', serif;
	line-height: 1em;
}

.temp {
	font-family: 'Libre Baskerville', serif;
	font-size: min(3.42vw,1.6rem);
	color: #a2a2a2;
}

.etc {
	text-align: right;
	font-family: 'Libre Baskerville', serif;
	font-size: min(3.42vw,1.6rem);
	color: #a2a2a2;

}

@keyframes fadein-bottom {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 100%;
		transform: translateY(0);
	}
}
	
/*********************************************************
					ここからcafe_section2_イメージ
**********************************************************/


.cafe_footer_photo_img {
	width: 100%;
	height: 30vw;
	max-height: 450px;
	min-height: 160px;
	background: url(../img/cafe_footer.webp) no-repeat center / cover;
}

/*************************************************************************************
			ここからメディアクエリ(タブレット）1000px
**************************************************************************************/

@media screen and (max-width: 1000px){
	.pc{display: none;}
	.pc_exception{display: block;}
	.sp{display: none;}
	.tb{display: block;}
	.brpc{display: none;}
	.brsp{display: none;}
	.brtb{display: block;}

	.cafeshop {
		padding: 14vw 0 27.5vw 0;
		background-image: url(../img/top_haikei_04_1000px.jpg);
	}

	.cafeshop_02 {
		margin: min(20vw, 145px) auto;
		width: 100%;
	}

	.cafeshop_text {
		width: 90%;
	}	

	.drink, .coffee {
		display: block;
	}

	.drink_right_menu,
	.coffee_right_menu {
		border-top: none;
	}

	.drink_left, .drink_right, .coffee_left, .coffee_right {
		width: 100%;
	}

	.cafeshop_feature_01, .cafeshop_feature_02 {
		width: 100%;
	}

	.cafeshop_feature_01 {
		margin-bottom: 60px;
	}

	.cafeshop_04 {
		width: 100%;
	}
/*********************************************************
					ページ上部は1000px以下ではフェードインなし
**********************************************************/

.fadein1 {
		transition: unset;
		transform: none;
		opacity: 1;
	}
}
	
/*********************************************************************************
					ここからメディアクエリ(SP） 750px
**********************************************************************************/

@media screen and (max-width: 750px){
	.pc{display: none;}
	.sp{display: block;}
	.brpc{display: none;}
	.brsp{display: block;}

	.cafeshop {
		background-image: url(../img/top_haikei_04_500px.jpg);
	}

/*********************************************************
					ここからカフェ_メインビュー
**********************************************************/


.cafe_main {
	position: relative;
	width: 100%;
	max-width: 750px;
	height: 48vw;
	max-height: 450px;
	min-height: 160px;
	padding-top: 0px;
	background: url(../img/cafe_mv_sp.webp) no-repeat center / cover;
	
}

.cafeshop img {
    width: 25%;
	min-width: 60px;
}

.cafe_main_h1 {
	width: 84%;
	text-align: center;
	font-size: min(7.5vw,4.5rem);
}
.cafeshop_01 p {
	font-size: min(4.57vw, 2.2rem);
	padding-top: 1em;

}

.cafe_text1 {
	padding-top: 50px;
}

.cafeshop_photo1_01_sp {
	width: 100%;
	aspect-ratio: 2 / 1;
	background: url(../img/cafe01.webp) no-repeat center / cover;
}

.cafeshop_photo2_sp {
	width: 100%;
}

.cafeshop_photo2_sp_top {
	display: flex;
	width: 100%;
	margin-top: 0.7em;
	gap: 7px;
}

.cafeshop_photo2_sp_bottom {
	display: flex;
	width: 100%;
	margin-top: 0.7em;
	gap: 7px;

}

.cafeshop_photo2_01_sp {
	width: 50%;
	aspect-ratio: 2/1.2;
	background: url(../img/cafe02.webp) no-repeat center / cover;
}


.cafeshop_text p {
	padding: 50px 0;
}

.cafeshop_photo2_02_sp {
	width: 50%;
	aspect-ratio: 2/1.2;
	background: url(../img/cafe03.webp) no-repeat center / cover;
}

.cafeshop_photo2_03_sp {
	width: 50%;
	aspect-ratio: 2/1.2;
	background: url(../img/cafe04.webp) no-repeat center / cover;
}

.cafeshop_photo2_04_sp {
	width: 50%;
	aspect-ratio: 2/1.2;
	background: url(../img/cafe05.webp) no-repeat center / cover;
}


.cafeshop_03 {
    margin: 0 auto;
    padding: 20vw 0;
}

.cafeshop_03 .cafeshop-wrap:nth-child(2) {
    margin: 15vw auto 0 auto;
}


.cafeshop_menu_01 p,
 .cafeshop_menu_02 p,
 .cafeshop_menu_info p  {
    font-size: min(4.57vw, 1.8rem);
}
.cafeshop_menu_info p {
	font-size: min(3.8vw, 18px);

}

.cafeshop-img {
    width: 100%;
    display: block;
}

.cafeshop-img img {
    width: 100%;
    padding-right: 0;
	margin-bottom: 2em;
}

.cafeshop-img img:last-child {
	margin-bottom: 0;
}

.cafeshop_04 {
	display: block;
}



.cafeshop_04 {
	padding: 16vw 0 0px;
}
/*********************************************************
					カフェページ本文
**********************************************************/
.cafe_text3 {
	padding: 50px 0 100px;
}

/*********************************************************
					ここからcafe_section2_イメージ
**********************************************************/

.cafe_footer_photo_img {
	background: url(../img/cafe_footer_sp.webp) no-repeat center / cover;

}
}