@charset "UTF-8";
/* ===================================================================
CSS information

file name  : restaurant_common.css
author     : Abilive
style info : レストランTOP・下層共通
=================================================================== */
/* ===================================================================
CSS information

file name  : _settings.scss
author     : Abilive
style info : 汎用設定
=================================================================== */
.con_rest_others {
	max-width: 1220px;
}

@media only screen and (min-width: 1025px) {
	.con_rest_others {
		width: 92%;
		margin-right: auto;
		margin-left: auto;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_rest_others {
		width: 92%;
		margin-right: auto;
		margin-left: auto;
	}
}

@media only screen and (max-width: 767px) {
	.con_rest_others {
		width: 86.97917%;
		margin-right: auto;
		margin-left: auto;
	}
}

.con_rest_others {
	max-width: 1720px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10.98901%;
	margin-bottom: 8.24176%;
}

@media only screen and (max-width: 767px) {
	.con_rest_others {
		margin-top: 4em;
		margin-bottom: 6em;
	}
}

.con_rest_others .inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 2em 1.74419%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 4.65116%;
}

.con_rest_others .inner .block1, .con_rest_others .inner .block2 {
	width: 49.12791%;
	position: relative;
	overflow: hidden;
}

@media only screen and (max-width: 767px) {
	.con_rest_others .inner .block1, .con_rest_others .inner .block2 {
		width: 100%;
	}
}

.con_rest_others .inner .block1 .tmp_st, .con_rest_others .inner .block2 .tmp_st {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	min-width: 280px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_rest_others .inner .block1 .tmp_st, .con_rest_others .inner .block2 .tmp_st {
		min-width: 168px;
		padding: 5.04142% 3.19527% 3.40828%;
	}
}

@media only screen and (min-width: 768px) {
	.con_rest_others .inner .block1 .tmp_st > img, .con_rest_others .inner .block2 .tmp_st > img {
		max-width: clamp(100px, 15vw, 280px);
	}
}

@media only screen and (max-width: 767px) {
	.con_rest_others .inner .block1 .tmp_st > img, .con_rest_others .inner .block2 .tmp_st > img {
		max-width: clamp(120px, 15vw, 150px);
	}
}

.con_rest_others .inner .block1 .txt, .con_rest_others .inner .block2 .txt {
	position: absolute;
	width: 66.27219%;
	bottom: 6.50888%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
	color: #fff;
	line-height: 1.875;
}

@media screen and (max-width: 1024px) {
	.con_rest_others .inner .block1 .txt, .con_rest_others .inner .block2 .txt {
		width: 90%;
	}
}

.con_rest_others .inner .block1 p.main, .con_rest_others .inner .block2 p.main {
	-webkit-transition: all .6s ease;
	transition: all .6s ease;
	position: relative;
}

.con_rest_others .inner .block1 p.main::before, .con_rest_others .inner .block2 p.main::before {
	content: '';
	background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#773d10));
	background: linear-gradient(transparent 0%, #773d10 100%);
	position: absolute;
	mix-blend-mode: multiply;
	bottom: 0;
	left: 0;
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.con_rest_others .inner .block1 p.main::before, .con_rest_others .inner .block2 p.main::before {
		height: 33%;
	}
}

@media only screen and (max-width: 767px) {
	.con_rest_others .inner .block1 p.main::before, .con_rest_others .inner .block2 p.main::before {
		height: 53%;
	}
}

.con_rest_others .inner .block1 a, .con_rest_others .inner .block2 a {
	display: block;
}

@media screen and (min-width: 1025px) {
	.con_rest_others .inner .block1 a:hover p.main, .con_rest_others .inner .block2 a:hover p.main {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
}

.con_rest_others .tmp_btn {
	margin-inline: auto;
	max-width: 250px;
}

@media only screen and (min-width: 1025px) {
	.con_rest_others .tmp_btn {
		margin-top: 100px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.con_rest_others .tmp_btn {
		margin-top: 40px;
	}
}

@media only screen and (max-width: 767px) {
	.con_rest_others .tmp_btn {
		margin-top: 40px;
	}
}