@charset "utf-8";

#kaiyu_banner,
.kaiyu_box {
	position: static;
}
.kaiyu_ttl {
	position: fixed;
	left: 10px;
	bottom: 10px;
	z-index: 90;
}
#btn_kaiyu_open {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 80px;
	height: 80px;
	padding: 28px 0 0;
	border-radius: 100%;
	background: #f9e490;
}
#btn_kaiyu_open::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	translate: -50% 0;
	display: block;
	width: 75px;
	height: 63px;
	background: url(/img/common/kaiyu_img.png) no-repeat center / contain;
}
.kaiyu_list {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 80;
	max-width: calc(100% - 25px);
}
#kaiyu_banner.open .kaiyu_list {
	display: block;
}
.kaiyu_list_box {
	position: relative;
	padding: 25px 40px 25px 120px;
	border-radius: 30px 0 0 0;
	background: #f9e490;
    max-width: 1100px;
}
.kaiyu_list_box2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
}
.kaiyu_list_box2 a {
	display: block;
	width: 300px;
}
#btn_kaiyu_close {
	position: absolute;
	top: -25px;
	right: -25px;
	z-index: 1;
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: url(/img/common/kaiyu_close.png) no-repeat center / contain;
}

/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1100px) {
	#kaiyu_banner {
		position: fixed;
		left: 0;
		top: 100%;
		z-index: 100;
		display: block;
		width: 100%;
		height: auto;
		max-height: 100vh;
		padding: 40px 40px calc(40px + 50px);
		background: #f9e490;
		overflow: auto;
		overscroll-behavior: none;
		transition: .5s translate;
	}
	.spm_kaiyu_open #kaiyu_banner {
		translate: 0 -100%;
	}
	.kaiyu_box {
		height: calc(100% + 1px);
		overflow: auto;
	}
	.kaiyu_ttl,
	#btn_kaiyu_open {
		display: none !important;
	}
	.kaiyu_list {
		display: block;
		position: static;
		max-width: none;
	}
	.kaiyu_list_box {
		position: static;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	.kaiyu_list_box2 {
		justify-content: center;
	}
	.kaiyu_list_box2 a {
		width: 100%;
		max-width: 300px;
	}
	#btn_kaiyu_close {
		display: none !important;
	}
}
/* ==================================================
スマートフォン ここまで
================================================== */