@charset "shift_jis";
/* CSS Document */
/*************************************************/
/*common.cssはサイト個別で変更をかける時の       */
/*CSSになります。変更する際は気をつけてください  */
/* 制作を始める時にはtop.css、header.css、h_menu.cssの中身をを削除してください */
/*************************************************/
/* ------------------------------------------　
:root のカラーコードを変更するだけで、
アクセントカラーを一括置換できます。
------------------------------------------ */
:root {
	/* サイト共通（ヘッダー・フッター・サイドバー・見出しなど） */
	--common-color: #8ba1cb;
	/* マイページ・お気に入り・閲覧履歴・検索履歴など */
	--member-color: #607594;
	/* マンションカタログ */
	--catalog-color: #8ba1cb;
	/* カラー系設定 */
	--txt-basic-color: #423e3e;
	--color-white: #FFF;
	--color-beige: #f3f4ec;
	--color-pink: #ff99b8;
	--color-green: #75af98;
	--color-bl-light: #8ba1cb;
	--color-bl-pale: #a7b4ce;
	--color-bl-deep: #7c8cac;
}
.wide_conts {
	width: clamp(950px, 80vw, 1500px);
	margin-left: auto;
	margin-right: auto;
}
/* ----------------------------------------
　common
---------------------------------------- */
body {
	color: var(--txt-basic-color);
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	margin: 35px 0 0 0;
	padding: 0;
	font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
H1 {
	color: #fff;
	font-size: 11px;
	text-align: left;
	width: 50%;
	line-height: 35px;
	padding-left: 10px;
	float: left;
	position: fixed;
	top: 0;
	z-index: 150;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.head_title {
	color: #fff;
	font-size: 11px;
	text-align: left;
	width: 48%;
	line-height: 35px;
	padding-left: 10px;
	float: left;
	position: fixed;
	top: 0;
	z-index: 150;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: bold;
}
.login_show {
	display: none;
}
.logout_show {
	display: none;
}
.pc_off {
	display: none !important;
}
.toushi_mode {
	display: none !important;
}
/* ----------------------------------------
全体のタイトルスタイル統一
---------------------------------------- */
/* H1 */
.rhs_title_h1 {
	margin: 50px auto 30px auto;
	padding: 0 0 15px 0;
	position: relative;
	font-size: 20px;
	line-height: 28px;
	border-bottom: 3px solid #ddd;
	width: auto !important;
	float: none;
	color: #333 !important;
	z-index: 0;
	overflow: initial;
	white-space: normal;
	text-overflow: clip;
}
.rhs_title_h1:after {
	position: absolute;
	content: " ";
	border-bottom: solid 3px var(--common-color);
	bottom: -3px;
	width: 80px;
	display: block;
	left: 0px;
}
.container .rhs_title_h1 {
	margin-top: 20px;
}
/* H2 */
.rhs_title_h2 {
	margin: 50px auto 30px auto;
	padding: 0 0 15px 0;
	position: relative;
	font-size: 20px;
	line-height: 28px;
	border-bottom: 3px solid #ddd;
}
.rhs_title_h2:after {
	position: absolute;
	content: " ";
	border-bottom: solid 3px var(--common-color);
	bottom: -3px;
	width: 80px;
	display: block;
	left: 0px;
}
.container .rhs_title_h2 {
	margin-top: 20px;
}
/* 物件詳細のH3 */
.rhs_title_h3 {
	margin: 0 0 15px 0;
	padding: 0 0 12px 0;
	border-bottom: 2px solid #ddd;
	font-size: 16px;
	line-height: 22px;
	font-weight: bold;
	text-align: left;
	position: relative;
}
.rhs_title_h3:after {
	position: absolute;
	content: " ";
	border-bottom: solid 2px var(--common-color);
	bottom: -2px;
	width: 50px;
	display: block;
	left: 0px;
}
/* ----------------------------------------
　学区を利用しない場合はこちらを読み込む
---------------------------------------- */
/*
.gakku_comment , .srch_school , .s-school , .sho_school , .sho_school_text , .list_map_school , .sho_catalog_school{
	display:none;
}
*/
/* ----------------------------------------
　物件詳細・マンションカタログのスポット情報を
利用しない場合はこちらを読み込む
---------------------------------------- */
/*
.catalog_spot_wrap, .shosai_spot_wrap{
	display:none;
}
*/
/* ----------------------------------------
　来店予約システムを利用しない場合はこちらを読み込む
---------------------------------------- */
/*
.off_raiten{
	display:none !important;
}
*/
/* ----------------------------------------
　header 固定
---------------------------------------- */
.new_header {
	background-color: var(--common-color);
	width: 100%;
	height: 35px;
	position: fixed;
	top: 0;
	z-index: 100;
}
.new_header_inner {
	width: 1200px;
	margin: 0 auto;
	overflow: auto;
}
.new_header_icon {
	float: left;
	margin: 8px 0 0 0;
}
.new_header_menu {
	float: right;
	margin-top: 6px;
}
.new_header_menu ul {
	margin: 0;
	padding: 0;
}
.new_header_menu li {
	list-style-type: none;
	float: left;
	padding: 0;
	margin-right: 10px;
	text-align: center;
}
.new_header_menu li:nth-child(2) a {
	display: flex;
	align-items: center;
}
.new_header_menu li:nth-child(5),
.new_header li:nth-child(6) {
	background-color: #d33f0e;
	border-radius: 2px;
}
.new_header_menu li:nth-child(5) a,
.new_header li:nth-child(6) a {
	color: #ffffff;
	font-weight: bold;
}
.new_header_menu a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 3px 8px;
	height: 16px;
	line-height: 16px;
	font-size: 12px;
	position: relative;
}
.new_header_menu a i {
	margin: 0 5px 0 0;
}
.new_header_menu a img {
	float: left;
}
#header_home {
	width: 40px !important;
	background: none !important;
}
#header_home a {
	padding: 0px !important;
	height: 22px !important;
	width: 100% !important;
}
#header_home a img {
	margin: 0px auto;
	float: none;
}
.new_header_icon:hover,
.new_header_menu li:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.new_header_home {
	width: 75px !important;
}
.new_header_home a {
	padding: 3px 5px;
}
.new_header_menu .favorite_num:not(:empty) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	font-size: 10px;
	line-height: 17px;
	background: #d33f0e;
	color: #fff;
	border-radius: 50%;
	letter-spacing: -1px;
	text-indent: -1px;
	font-weight: bold;
	margin-left: 5px;
}
/* ------------------------------------------　
　　ここから下は削除してOK　
------------------------------------------ */
/* ----------------------------------------
　header
---------------------------------------- */
#h_warp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: clamp(13px, 1.1vw, 20px) clamp(27px, 2.25vw, 40px) clamp(13px, 1.1vw, 20px) clamp(40px, 3.35vw, 60px);
	background: var(--color-beige);
	& h2, & h3, & h4 {
		margin: 0;
	}
	& a {
		text-decoration: none;
		color: var(--txt-basic-color);
	}
	& img {
		max-width: 100%;
	}
	& ul, & ol {
		list-style: none;
	}
	& p, & ul, & ol, & h2, & h3, & hr, & figure {
		margin: 0;
		padding: 0;
	}
	>a {
		display: block;
		width: clamp(180px, 15vw, 270px);
	}
	>nav {
		display: flex;
		align-items: center;
		gap: 0 clamp(20px, 1.65vw, 30px);
		& a {
			font-size: clamp(11px, 0.9vw, 16px);
			line-height: 1.2;
			letter-spacing: 0.04em;
		}
		.h_menu {
			display: flex;
			gap: 0 clamp(30px, 2.5vw, 45px);
			& li {
				overflow: hidden;
				padding: calc(0.5em + 2px) 0;
				>a {
					position: relative;
					&:before {
						content: "";
						width: 100%;
						height: 2px;
						background: var(--txt-basic-color);
						position: absolute;
						bottom: -0.5em;
						left: -100%;
						transition: all 0.2s;
					}
					&:hover {
						&:before {
							left: 0;
						}
					}
				}
			}
		}
		.h_btn {
			display: flex;
			.h_btn_mem {
				>a {
					display: block;
					padding: 0.5em 2em;
					border-radius: 5px 0 0 5px;
					background: var(--color-bl-light);
					&:before {
						background: #8496bb;
					}
				}
			}
			.h_btn_inq {
				>a {
					display: flex;
					align-items: center;
					gap: 0 1em;
					padding: 0.5em 1em 0.5em 1.2em;
					background: var(--color-green);
					border-radius: 0 5px 5px 0;
					&:before {
						background: #5fa086;
					}
					&:after {
						content: "";
						width: clamp(11px, 0.9vw, 16px);
						aspect-ratio: 4 / 3;
						background-image: url(/img/common/header/h_icon_mail.webp);
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						position: relative;
					}
				}
			}
			>li {
				>a {
					overflow: hidden;
					color: var(--color-white);
					font-weight: 500;
					position: relative;
					>span {
						position: relative;
					}
					&:before {
						content: "";
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: -100%;
						transition: all 0.2s;
					}
					&:hover {
						&:before {
							left: 0;
						}
					}
				}
			}
		}
		.header-logo-menu {
			#nav-drawer {
				position: relative;
			}
			/*チェックボックス等は非表示に*/
			.nav-unshown {
				display: none;
			}
			#nav-open {
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				width: clamp(35px, 28vw, 50px);
				aspect-ratio: 1 / 1;
				background: var(--color-pink);
				border-radius: 5px;
				position: relative;
				cursor: pointer;
				z-index: 99;
				>img {
					width: clamp(12px, 0.95vw, 17px);
					position: relative;
				}
				&:before {
					content: "";
					width: 100%;
					height: 100%;
					background: #f28cab;
					position: absolute;
					top: 0;
					left: -100%;
					transition: all 0.2s;
				}
				&:hover {
					&:before {
						left: 0;
					}
				}
			}
			#nav-content {
				overflow: auto;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 98;
				width: 100%;
				height: 100%;
				background: RGBA(255, 255, 255, 0.8);
				transition: .3s ease-in-out;
				display: none;
				transform: scale(0.5);
				transition: 0.2s;
			}
			/*チェックがついたら表示させる*/
			#nav-input:checked~#nav-close {
				display: block;
				opacity: .5;
			}
			#nav-input:checked~#nav-content {
				box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
				display: flex;
				transform: scale(1);
				transition: 0.2s;
				align-items: center;
				justify-content: center;
			}
			#nav-input:checked~#nav-open {
				border-bottom: 1px solid #f0f9ff;
				border-left: 1px solid #f0f9ff;
			}
			#nav-input:checked~#nav-open img {
				display: none;
			}
			#nav-input:checked~#nav-open span {
				height: 0px;
				/*線の太さ*/
			}
			#nav-input:checked~#nav-open span:before {
				position: absolute;
				margin: auto;
				height: 3px;
				border-radius: 8px;
				background: #FFF;
				display: block;
				content: '';
				cursor: pointer;
				transition: 0.2s;
				width: clamp(18px, 1.4vw, 25px);
				transform: rotate(-45deg);
				bottom: 0;
				top: 0;
				right: 0;
				left: 0;
			}
			#nav-input:checked~#nav-open span:after {
				position: absolute;
				margin: auto;
				height: 3px;
				border-radius: 8px;
				background: #FFF;
				display: block;
				content: '';
				cursor: pointer;
				transition: 0.2s;
				width: clamp(18px, 1.4vw, 25px);
				transform: rotate(45deg);
				bottom: 0;
				top: 0;
				right: 0;
				left: 0;
			}
			.nav_content_inner {
				>ul {
					display: flex;
					gap: 0 clamp(20px, 1.65vw, 30px);
					>li {
						width: clamp(310px, 26vw, 465px);
						box-sizing: border-box;
						padding: clamp(20px, 1.65vw, 30px);
						border-radius: 15px;
						.nav_shop_name {
							margin-bottom: 1em;
							font-size: clamp(15px, 1.25vw, 22px);
							line-height: 1.2;
							font-weight: bold;
							color: #FFF;
							text-align: center;
						}
						>div {
							background: #FFF;
							border-radius: 12px;
							padding: clamp(13px, 1.1vw, 20px);
							.nav_shop_time {
								margin-bottom: 1em;
								font-size: clamp(10px, 0.8vw, 14px);
								line-height: 1.2;
								font-weight: bold;
								text-align: center;
							}
							.nav_shop_num {
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 0.5em;
								gap: 0 clamp(7px, 0.55vw, 10px);
								font-size: clamp(24px, 1.95vw, 35px);
								line-height: 1;
								font-weight: bold;
								letter-spacing: 0.05em;
								&:before {
									content: "";
									width: clamp(28px, 2.35vw, 42px);
									height: clamp(28px, 2.35vw, 42px);
									background-repeat: no-repeat;
									background-position: center;
									background-size: cover;
								}
							}
							>a {
								display: block;
								width: fit-content;
								margin: 0 auto;
								border-radius: 70px;
								overflow: hidden;
								position: relative;
								color: var(--color-white);
								&:before {
									content: "";
									width: 100%;
									height: 100%;
									transition: all 0.3s;
									position: absolute;
									top: 0;
									left: -100%;
								}
								&:hover {
									&:before {
										left: 0;
									}
								}
								>div {
									display: flex;
									align-items: center;
									gap: 0 clamp(7px, 0.55vw, 10px);
									padding: 0.5em 1.5em 0.5em 0.5em;
									font-size: clamp(11px, 0.85vw, 15px);
									line-height: 1;
									letter-spacing: 0.12em;
									position: relative;
									&:before {
										content: "";
										width: clamp(24px, 2vw, 36px);
										aspect-ratio: 1 / 1;
										background-repeat: no-repeat;
										background-position: center;
										background-size: cover;
									}
								}
							}
						}
						&:nth-child(1) {
							background: var(--color-bl-pale);
							>div {
								.nav_shop_num {
									color: var(--color-bl-light);
									&:before {
										background-image: url(/img/common/header/shop_icon_tel_01.webp);
									}
								}
								>a {
									background: var(--color-bl-light);
									&:before {
										background: #8496bb;
									}
									>div {
										&:before {
											background-image: url(/img/top/shop_icon_map01.webp);
										}
									}
								}
							}
						}
						&:nth-child(2) {
							background: var(--color-green);
							>div {
								.nav_shop_num {
									color: var(--color-green);
									&:before {
										background-image: url(/img/common/header/shop_icon_tel_02.webp);
									}
								}
								>a {
									background: var(--color-green);
									&:before {
										background: #5fa086;
									}
									>div {
										&:before {
											background-image: url(/img/top/shop_icon_map02.webp);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
/* ----------------------------------------
　footer
---------------------------------------- */
#f_wrap {
	margin-top: clamp(60px, 5vw, 90px);
	padding-top: clamp(60px, 5vw, 90px);
	padding-bottom: clamp(20px, 1.65vw, 30px);
	background: var(--color-beige);
	border-top: 2px solid var(--color-bl-deep);
	& h2, & h3, & h4 {
		margin: 0;
	}
	& a {
		text-decoration: none;
		color: var(--txt-basic-color);
	}
	& img {
		max-width: 100%;
	}
	& ul, & ol {
		list-style: none;
	}
	& p, & ul, & ol, & h2, & h3, & hr, & figure {
		margin: 0;
		padding: 0;
	}
	>div {
		width: clamp(1000px, 85vw, 1600px);
		margin: 0 auto;
		.f_wrap_top {
			display: flex;
			justify-content: space-between;
			padding-bottom: clamp(40px, 3.35vw, 60px);
			.f_btn {
				width: clamp(175px, 14.7vw, 265px);
				& a {
					display: block;
				}
				>a {
					margin-bottom: clamp(18px, 1.4vw, 25px);
				}
				>ul {
					font-size: clamp(11px, 0.9vw, 16px);
					>li {
						>a {
							overflow: hidden;
							padding: 1em 0;
							border-radius: 50px;
							line-height: 1;
							font-weight: 600;
							color: var(--color-white);
							text-align: center;
							position: relative;
							>p {
								position: relative;
							}
							&:before {
								content: "";
								width: 100%;
								height: 100%;
								transition: all 0.3s;
								position: absolute;
								top: 0;
								left: -100%;
							}
							&:hover {
								&:before {
									left: 0;
								}
							}
						}
						&:nth-child(1) {
							margin-bottom: 1em;
							>a {
								background: var(--color-bl-light);
								&:before {
									background: #8496bb;
								}
							}
						}
						&:nth-child(2) {
							>a {
								background: var(--color-green);
								&:before {
									background: #5fa086;
								}
							}
						}
					}
				}
			}
			.f_list {
				display: flex;
				gap: 0 clamp(27px, 2.25vw, 40px);
				.f_list_part {
					.f_list_part_name {
						font-size: clamp(10px, 0.8vw, 14px);
						line-height: 1.2;
						color: var(--color-green);
						font-weight: 600;
						letter-spacing: 0.12em;
					}
					.f_list_part_name+.f_list_part_ul {
						margin-top: clamp(18px, 1.4vw, 25px);
					}
				}
				.f_list_part_col {
					>div {
						display: flex;
						gap: 0 clamp(13px, 1.1vw, 20px);
					}
					.f_list_part_name+div {
						margin-top: clamp(11px, 0.85vw, 15px);
					}
					.f_list_part_col_box {
						.f_list_part_sub {
							display: inline-block;
							margin-bottom: clamp(9px, 0.7vw, 12px);
						}
						>div {
							display: flex;
							gap: 0 clamp(20px, 1.65vw, 30px);
							margin-bottom: clamp(13px, 1.1vw, 20px);
						}
					}
				}
				.f_list_part_ul {
					>li {
						display: flex;
						align-items: center;
						gap: 0 0.8em;
						width: fit-content;
						font-size: clamp(9px, 0.7vw, 12px);
						&:not(:last-child) {
							margin: 0 0 1em 0;
						}
						&:before {
							content: "";
							width: 0.33em;
							height: 0.33em;
							border-radius: 50%;
							background: var(--color-green);
						}
						>a {
							overflow: hidden;
							position: relative;
							line-height: 1.5;
							&:before {
								content: "";
								width: 100%;
								height: 1px;
								background: var(--txt-basic-color);
								position: absolute;
								bottom: 0em;
								left: -100%;
								transition: all 0.2s;
							}
							&:hover {
								&:before {
									left: 0;
								}
							}
						}
					}
				}
				.f_list_part_sub {
					font-size: clamp(9px, 0.7vw, 12px);
					line-height: 1.2;
					color: var(--color-green);
					font-weight: 600;
					letter-spacing: 0.12em;
				}
				a.f_list_part_sub {
					overflow: hidden;
					position: relative;
					z-index: 1;
					transition: all 0.2s;
					&:before {
						content: "";
						width: 100%;
						height: 0.5em;
						background: #d6dbb0;
						position: absolute;
						bottom: 0em;
						left: -100%;
						transition: all 0.2s;
						z-index: -1;
					}
					&:hover {
						color: var(--txt-basic-color);
						&:before {
							left: 0;
						}
					}
				}
				.f_list_part_other {
					display: flex;
					gap: 0 clamp(75px, 6.2vw, 110px);
				}
			}
		}
		.f_wrap_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: clamp(20px, 1.65vw, 30px);
			border-top: 1px solid #d3d4d0;
			>div {
				display: flex;
				align-items: center;
				gap: 0 clamp(20px, 1.65vw, 30px);
				>nav {
					>ul {
						display: flex;
						gap: 0 clamp(15px, 1.25vw, 22px);
						>li {
							>a {
								display: block;
								overflow: hidden;
								font-size: clamp(9px, 0.7vw, 12px);
								line-height: 1.5;
								color: var(--color-bl-deep);
								letter-spacing: 0.04em;
								position: relative;
								&:before {
									content: "";
									width: 100%;
									height: 1px;
									background: var(--color-bl-deep);
									position: absolute;
									bottom: 0em;
									left: -100%;
									transition: all 0.2s;
								}
								&:hover {
									&:before {
										left: 0;
									}
								}
							}
						}
					}
				}
				>a {
					display: block;
					width: clamp(95px, 7.8vw, 140px);
				}
			}
			>p {
				font-size: clamp(9px, 0.7vw, 12px);
				line-height: 1.2;
				color: var(--color-bl-deep);
				letter-spacing: 0.04em;
			}
		}
	}
}
/* ----------------------------------------
　side
---------------------------------------- */
.side {
	& h2, & h3, & h4 {
		margin: 0;
	}
	& a {
		text-decoration: none;
		color: var(--txt-basic-color);
	}
	& img {
		max-width: 100%;
	}
	& ul, & ol {
		list-style: none;
	}
	& p, & ul, & ol, & h2, & h3, & hr, & figure {
		margin: 0;
		padding: 0;
	}
	#s_mem {
		margin: 0 0 30px 0;
		>a {
			display: block;
			padding: 20px 13px;
			background: var(--color-beige);
			position: relative;
			z-index: 1;
			>h2 {
				width: fit-content;
				margin: 0 auto 10px auto;
				padding: 5px 20px;
				background: #FFF;
				border-radius: 30px;
				font-size: 15px;
				line-height: 20px;
				>span {
					color: var(--color-pink);
				}
			}
			.s_mem_tl {
				text-align: center;
				font-weight: bold;
				.s_mem_catch {
					margin: 0 0 10px 0;
					font-size: 23px;
					line-height: 31px;
					color: var(--color-bl-deep);
					letter-spacing: 0.08em;
				}
				.s_mem_en {
					margin: 0 0 5px 0;
					font-size: 12px;
					line-height: 1;
					color: var(--color-pink);
					letter-spacing: 0.08em;
				}
				>img {
					width: 90px;
				}
			}
			>ul {
				margin: 0 0 15px 0;
				>li {
					padding: 15px 0 15px 30px;
					border-radius: 10px;
					background: #FFF;
					position: relative;
					overflow: hidden;
					font-size: 14px;
					line-height: 25px;
					font-weight: bold;
					letter-spacing: 0.12em;
					position: relative;
					.s_mem_num {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30px;
						height: 30px;
						margin: auto;
						background: var(--color-beige);
						border-radius: 50%;
						font-size: 15px;
						line-height: 20px;
						color: #888a7a;
						position: absolute;
						top: 0;
						bottom: 0;
						left: -7px;
					}
					&:not(:last-child) {
						margin-bottom: 7px;
					}
				}
			}
			>p {
				margin-bottom: 15px;
				font-size: 12px;
				line-height: 18px;
				text-align: center;
				letter-spacing: 0.08em;
			}
			.s_mem_btn {
				overflow: hidden;
				width: 240px;
				box-sizing: border-box;
				margin: 0 auto;
				padding: 20px 0 20px 30px;
				background: var(--color-pink);
				border-radius: 50px;
				font-size: 14px;
				line-height: 22px;
				color: var(--color-white);
				letter-spacing: 0.08em;
				font-weight: bold;
				text-align: center;
				position: relative;
				&:before {
					content: "";
					width: 100%;
					height: 100%;
					background: #f28cab;
					position: absolute;
					top: 0;
					left: -100%;
					transition: all 0.2s;
				}
				>div {
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					background: var(--color-beige);
					border-radius: 50%;
					aspect-ratio: 1 / 1;
					margin: auto;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 10px;
					>img {
						width: 15px;
					}
				}
				>p {
					position: relative;
				}
			}
			&:hover {
				.s_mem_btn {
					&:before {
						left: 0;
					}
					>div {
						>img {
							animation: slideOutIn 0.3s forwards;
						}
					}
				}
			}
		}
	}
	#s_nav {
		margin: 0 0 70px 0;
		>ul {
			border-radius: 5px;
			overflow: hidden;
			>li {
				>a {
					display: block;
					padding: 20px 15px 12px 15px;
					position: relative;
					transition: all 0.2s;
					>div {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						.s_nav_l {
							padding-bottom: 30px;
							color: var(--color-white);
							font-weight: bold;
							.s_nav_name {
								margin: 0 0 15px 0;
								font-size: 23px;
								line-height: 1;
								letter-spacing: 0.08em;
							}
							.s_nav_en {
								font-size: 11px;
								line-height: 1;
								letter-spacing: 0.08em;
							}
						}
						.s_nav_r {
							>img {
								position: absolute;
								right: 20px;
								top: 10px;
							}
						}
					}
					.s_nav_btn {
						overflow: hidden;
						width: 140px;
						box-sizing: border-box;
						margin: 0 auto;
						padding: 10px 0 10px 20px;
						background: var(--color-beige);
						border-radius: 50px;
						font-size: 10px;
						line-height: 14px;
						letter-spacing: 0.08em;
						font-weight: bold;
						text-align: center;
						position: relative;
						&:before {
							content: "";
							width: 100%;
							height: 100%;
							background: #dbe5f5;
							position: absolute;
							top: 0;
							left: -100%;
							transition: all 0.2s;
						}
						>div {
							overflow: hidden;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 22px;
							background: var(--color-bl-pale);
							border-radius: 50%;
							aspect-ratio: 1 / 1;
							margin: auto;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 10px;
							>img {
								width: 7px;
							}
						}
						>p {
							position: relative;
						}
					}
					&:hover {
						opacity: 0.8;
					}
				}
				&:nth-child(1) {
					>a {
						background: var(--color-bl-pale);
					}
				}
				&:nth-child(2) {
					>a {
						background: var(--color-bl-light);
					}
				}
				&:nth-child(3) {
					>a {
						background: var(--color-bl-deep);
					}
				}
			}
		}
	}
	#s_sr {
		margin: 0 0 30px 0;
		padding: 35px 20px 20px 20px;
		background: #e4f1ec;
		border-radius: 10px;
		position: relative;
		&:before {
			content: "";
			display: block;
			width: 200px;
			aspect-ratio: 4 / 1;
			margin: auto;
			background-image: url(/img/top/sr_il.webp);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			position: absolute;
			top: -30px;
			left: 0;
			right: 0;
		}
		.s_sr_tl {
			margin: 0 0 15px 0;
			text-align: center;
			>h2 {
				margin: 0 0 10px 0;
				font-size: 23px;
				line-height: 1.2;
				letter-spacing: 0.08em;
			}
			>p {
				font-size: 12px;
				line-height: 1.2;
				color: var(--color-green);
				letter-spacing: 0.08em;
			}
		}
		.s_sr_area {
			margin-bottom: 15px;
			>h3 {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				font-size: 12px;
				line-height: 1.2;
				color: var(--color-green);
				letter-spacing: 0.08em;
				&:before {
					content: "";
					width: 12px;
					aspect-ratio: 4 / 5;
					margin-right: 7px;
					background-image: url(/img/top/sr_tl_icon.webp);
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}
			}
			>ul {
				display: flex;
				flex-wrap: wrap;
				gap: 3px;
				>li {
					>a {
						display: block;
						padding: 5px 0;
						background: #FFF;
						border-radius: 30px;
						font-size: 11px;
						line-height: 20px;
						text-align: center;
						transition: all 0.2s;
						&:hover {
							background: var(--color-beige);
						}
					}
				}
				.s_sr_area_w {
					width: calc((100% - 3px)/2);
				}
				.s_sr_area_t {
					width: calc((100% - 6px)/3);
				}
			}
		}
		.s_sr_type {
			margin-bottom: 15px;
			>h3 {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				font-size: 12px;
				line-height: 1.2;
				color: var(--color-green);
				letter-spacing: 0.08em;
			}
			>ul {
				display: flex;
				flex-wrap: wrap;
				gap: 3px;
				>li {
					>a {
						display: block;
						padding: 5px 0;
						background: var(--color-beige);
						border-radius: 30px;
						font-size: 11px;
						line-height: 20px;
						text-align: center;
						transition: all 0.2s;
						&:hover {
							background: var(--color-white);
						}
					}
				}
				.s_sr_area_w {
					width: 100%;
				}
				.s_sr_area_t {
					width: calc((100% - 3px)/2);
				}
			}
		}
		.t_sr_key_box {
			display: flex;
			gap: 0 5px;
			& input[type="text"] {
				width: 100%;
				box-sizing: border-box;
				padding: 0 1em;
				background: var(--color-white);
				border: none;
				border-radius: 5px;
				font-size: 11px;
				letter-spacing: 0.06em;
				font-weight: bold;
				&::placeholder {
					color: #cecccc;
				}
			}
			& input[type="submit"] {
				cursor: pointer;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 65px;
				aspect-ratio: 2 / 1;
				background: var(--color-green);
				border: none;
				border-radius: 5px;
				font-size: 11px;
				line-height: 1;
				font-weight: bold;
				color: var(--color-white);
				transition: all 0.2s;
				&:hover {
					background: #5fa086;
				}
			}
		}
	}
	.s_catalog {
		display: block;
		margin: 0 0 30px 0;
	}
	#s_sale {
		margin: 0 0 25px 0;
		padding: 25px 15px 20px 15px;
		border-radius: 10px;
		background: #e4e8f1;
		.s_sale_tl {
			margin: 0 0 20px 0;
			text-align: center;
			>h2 {
				margin: 0 0 10px 0;
				font-size: 23px;
				line-height: 1.2;
				letter-spacing: 0.08em;
			}
			>p {
				font-size: 12px;
				line-height: 1.2;
				color: var(--color-bl-deep);
				font-weight: bold;
				letter-spacing: 0.08em;
			}
		}
		.s_sale_txt {
			margin-bottom: 15px;
			font-size: 12px;
			line-height: 18px;
			color: var(--color-bl-deep);
			font-weight: bold;
			text-align: center;
			letter-spacing: 0.08em;
		}
		>ul {
			>li {
				&:not(:last-child) {
					margin: 0 0 9px 0;
				}
				>a {
					display: block;
					overflow: hidden;
					width: 240px;
					box-sizing: border-box;
					margin: 0 auto;
					padding: 20px 0 20px 30px;
					background: var(--color-white);
					border-radius: 50px;
					font-size: 14px;
					line-height: 22px;
					letter-spacing: 0.08em;
					font-weight: bold;
					text-align: center;
					position: relative;
					&:before {
						content: "";
						width: 100%;
						height: 100%;
						background: #dbe5f5;
						position: absolute;
						top: 0;
						left: -100%;
						transition: all 0.2s;
					}
					>div {
						overflow: hidden;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						background: var(--color-bl-deep);
						border-radius: 50%;
						aspect-ratio: 1 / 1;
						margin: auto;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 10px;
						>img {
							width: 15px;
						}
					}
					>p {
						position: relative;
					}
					&:hover {
						&:before {
							left: 0;
						}
						>div {
							>img {
								animation: slideOutIn 0.3s forwards;
							}
						}
					}
				}
			}
		}
	}
	#s_shop {
		margin-bottom: 20px;
		.s_shop_list {
			>li {
				box-sizing: border-box;
				padding: 20px;
				background: var(--color-beige);
				border-radius: 20px;
				position: relative;
				&:not(:last-child) {
					margin: 0 0 20px 0;
				}
				.s_shop_name {
					width: fit-content;
					margin: 0 auto 20px auto;
					font-size: 16px;
					line-height: 1.25;
					padding: 0.5em 1em;
					border-radius: 30px;
				}
				.s_shop_co {
					width: fit-content;
					color: var(--color-white);
				}
				>img {
					width: 100%;
					margin: 0 0 20px 0;
				}
				.s_shop_item {
					padding: 0.5em 1em;
					border-radius: 20px;
					font-size: 11px;
					line-height: 1;
					letter-spacing: 0.08em;
					flex-shrink: 0;
				}
				.s_shop_txt {
					font-size: 11px;
					line-height: 1.5;
					letter-spacing: 0.08em;
				}
				.s_shop_ad {
					display: flex;
					align-items: flex-start;
					gap: 0 7px;
					margin-bottom: 5px;
				}
				.s_shop_date {
					>li {
						display: flex;
						gap: 0 11px;
						margin-bottom: 5px;
					}
				}
				.s_shop_btn {
					display: flex;
					flex-direction: column;
					gap: 10px;
					>li {
						>a {
							width: 100%;
							display: block;
							border-radius: 70px;
							font-weight: bold;
							overflow: hidden;
							position: relative;
							&:before {
								content: "";
								width: 100%;
								height: 100%;
								transition: all 0.3s;
								position: absolute;
								top: 0;
								left: -100%;
							}
							&:hover {
								&:before {
									left: 0;
								}
							}
							>div {
								display: flex;
								align-items: center;
								gap: 0 10px;
								padding: 0.5em 1.5em 0.5em 0.5em;
								font-size: 15px;
								line-height: 1;
								letter-spacing: 0.12em;
								position: relative;
								&:before {
									content: "";
									width: 40px;
									aspect-ratio: 1 / 1;
									background-repeat: no-repeat;
									background-position: center;
									background-size: cover;
								}
							}
						}
						&:nth-child(1) {
							>a {
								background: #fadde9;
								pointer-events: none;
								&:before {
									background: #f2b4c7;
								}
								>div {
									&:before {
										background-image: url(/img/top/shop_icon_tel.webp);
									}
								}
							}
						}
					}
				}
				&:nth-child(1) {
					.s_shop_co {
						background: var(--color-bl-light);
					}
					.s_shop_btn {
						>li {
							&:nth-child(2) {
								>a {
									&:before {
										background: #8496bb;
									}
									>div {
										&:before {
											background-image: url(/img/top/shop_icon_map01.webp);
										}
									}
								}
							}
						}
					}
				}
				&:nth-child(2) {
					.s_shop_co {
						background: var(--color-green);
					}
					.s_shop_btn {
						>li {
							&:nth-child(2) {
								>a {
									&:before {
										background: #5fa086;
									}
									>div {
										&:before {
											background-image: url(/img/top/shop_icon_map02.webp);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.s_com_btn {
		>li {
			&:not(:last-child) {
				margin: 0 0 9px 0;
			}
			>a {
				display: block;
				overflow: hidden;
				width: 300px;
				box-sizing: border-box;
				margin: 0 auto;
				padding: 20px 0 20px 0;
				background: var(--color-white);
				border-radius: 50px;
				box-sizing: border-box;
				border: 2px solid var(--color-bl-deep);
				font-size: 14px;
				line-height: 22px;
				letter-spacing: 0.08em;
				font-weight: bold;
				text-align: center;
				position: relative;
				&:before {
					content: "";
					width: 100%;
					height: 100%;
					background: #dbe5f5;
					position: absolute;
					top: 0;
					left: -100%;
					transition: all 0.2s;
				}
				>div {
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					background: var(--color-bl-deep);
					border-radius: 50%;
					aspect-ratio: 1 / 1;
					margin: auto;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 10px;
					>img {
						width: 15px;
					}
				}
				>p {
					position: relative;
				}
				&:hover {
					&:before {
						left: 0;
					}
					>div {
						>img {
							animation: slideOutIn 0.3s forwards;
						}
					}
				}
			}
		}
	}
}
.mp_side ul {
	margin: 0 auto;
}
.mp_side h3 {
	margin: 10px auto;
	padding: 10px 0;
	@keyframes slideOutIn {
		0% {
			transform: translateX(0);
		}
		49.9% {
			transform: translateX(150%);
			opacity: 1;
		}
		50% {
			transform: translateX(-150%);
			opacity: 0;
		}
		50.1% {
			opacity: 1;
		}
		100% {
			transform: translateX(0);
		}
	}
	.user_right {
		& img {
			max-width: 100%;
		}
	}
}