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

section {
	padding-block: 2rem;
}

/* XD：管理人室セクションの背景は全幅で白 */
body.family .manager_room_section {
	background-color: #FFF;
}

.anshin_ttl_wrap {
	color: var(--main-green);
	line-height: 1;
	display: grid;
	justify-content: center;
	row-gap: 5px;
	.anshin_ttl {
		font-size: clamp(30px, 7.33334vw, 44px);
	}
	& > span {
		font-size: clamp(22px, 4.66667vw, 28px);
	}
}

.anshin_wrap {
	margin-block: 3rem;
	position: relative;
	display: grid;
	row-gap: 3rem;
	.anshin_box {
		position: relative;
		.anshin_num_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			max-width: 108px;
			width: 100%;
			max-height: 108px;
			height: 100%;
			top: 0px;
			left: 0px;
			position: absolute;
			z-index: 1;
			aspect-ratio: 1/1;
			&::after {
				content: '';
				background: #FFF;
				display: inline-block;
				border-radius: 50px;
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: -1;
			}
			.anshin_num {
				display: grid;
				justify-content: center;
				align-items: center;
				font-size: clamp(30px, 7.33334vw, 44px);
				position: relative;
				color: var(--main-green);
				text-align: center;
				line-height: 1;
				&::before {
					content: '安心';
					font-size: clamp(22px, 4.66667vw, 28px);
					top: 0px;
					position: relative;
					display: inline-block;
				}
			}
		}
		.anshin_box_inner {
			display: grid;
			justify-content: center;
			top: 0px;
			position: relative;
			.anshin_img {
				display: flex;
				justify-content: center;
				border-radius: 200px;
				width: 340px;
				height: 340px;
				overflow: hidden;
				margin: 0px auto;
				top: 20px;
				position: relative;
				border: 5px solid #FFF;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.anshin_white_box {
				background: #FFF;
				border-radius: 20px;
				padding: 44px 26px;
				display: grid;
				row-gap: 1rem;
				.anshin_white_box_ttl {
					color: var(--main-green);
					text-align: center;
					font-size: clamp(22px, 4.66667vw, 28px);
					line-height: 130%;
				}
				.anshin_white_box_txt {
					font-size: clamp(15px, 3vw, 18px);
					font-family: '游ゴシックMedium';
					text-align: justify;
					line-height: 160%;
				}
				.anshin_white_box_img {
					display: flex;
					border-radius: 10px;
					overflow: hidden;
					height: 220px;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.btn_wrap {
					margin-top: 0px;
				}
			}
		}
	}
}

.manager_greeting_btn {
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid var(--main-green);
	border-radius: 12px;
	background: #FFF;
	color: var(--main-green);
	min-height: 60px;
	padding: 10px 20px;
	margin-inline: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 12px;
	font: inherit;
	cursor: pointer;
	box-shadow: 0 4px 0 rgba(132, 166, 61, .18);
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
	.manager_greeting_btn_icon {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: var(--main-green);
		color: #FFF;
		display: grid;
		place-items: center;
		font-family: serif;
		font-size: 30px;
		line-height: 1;
		padding-top: 6px;
	}
	.manager_greeting_btn_label {
		display: grid;
		row-gap: 2px;
		font-size: clamp(15px, 3vw, 18px);
		font-weight: bold;
		line-height: 1.2;
		text-align: left;
		small {
			font-family: "Oswald", sans-serif;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: .14em;
		}
	}
	&:hover,
	&:focus-visible {
		background: var(--main-green);
		color: #FFF;
		transform: translateY(-2px);
		box-shadow: 0 6px 0 rgba(90, 120, 30, .2);
		.manager_greeting_btn_icon {
			background: #FFF;
			color: var(--main-green);
		}
	}
}

.manager_greeting_modal[hidden] {
	display: none;
}

.manager_greeting_modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 20px;
	.manager_greeting_modal_overlay {
		position: absolute;
		inset: 0;
		background: rgba(28, 42, 20, .72);
		backdrop-filter: blur(4px);
	}
	.manager_greeting_modal_panel {
		position: relative;
		z-index: 1;
		width: min(920px, 100%);
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		background: #FFF;
		border-radius: 20px;
		box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
		outline: none;
	}
	.manager_greeting_modal_close {
		appearance: none;
		-webkit-appearance: none;
		position: absolute;
		top: 14px;
		right: 14px;
		z-index: 2;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: var(--main-green);
		color: #FFF;
		font-size: 30px;
		line-height: 1;
		cursor: pointer;
	}
	.manager_greeting_modal_inner {
		display: grid;
		grid-template-columns: minmax(280px, 42%) 1fr;
	}
	.manager_greeting_modal_photo {
		display: block;
		min-height: 100%;
		background: var(--pale-green);
		img {
			width: 100%;
			height: 100%;
			min-height: 560px;
			object-fit: cover;
			object-position: center;
		}
	}
	.manager_greeting_modal_body {
		padding: 56px 48px 42px;
	}
	.manager_greeting_modal_kicker {
		color: var(--main-green);
		font-family: "Oswald", sans-serif;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: .18em;
		margin-bottom: 6px;
	}
	h2 {
		color: var(--main-green);
		font-size: clamp(24px, 5.66667vw, 34px);
		line-height: 1.3;
		margin-bottom: 24px;
	}
	.manager_greeting_modal_text {
		display: grid;
		row-gap: 14px;
		p {
			font-family: '游ゴシックMedium';
			font-size: clamp(14px, 2.66667vw, 16px);
			line-height: 1.9;
			text-align: justify;
		}
	}
	.manager_greeting_modal_signature {
		font-family: '游ゴシックMedium';
		font-size: 14px;
		line-height: 1.6;
		text-align: right;
		margin-top: 24px;
		strong {
			font-size: 18px;
		}
	}
}

body.manager_modal_open {
	overflow: hidden;
}

@media screen and (max-width: 599px) {
	.anshin_wrap .anshin_box .anshin_box_inner .anshin_img {
		width: min(340px, 100%);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box {
		padding: clamp(24px, 7.333vw, 44px) clamp(16px, 4.333vw, 26px);
	}

	.anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box .anshin_white_box_img {
		height: auto;
		aspect-ratio: 5 / 2;
	}

	.manager_greeting_modal {
		padding: 12px;
		.manager_greeting_modal_panel {
			max-height: calc(100vh - 24px);
			border-radius: 16px;
		}
		.manager_greeting_modal_inner {
			grid-template-columns: 1fr;
		}
		.manager_greeting_modal_photo {
			height: 230px;
			min-height: 0;
			img {
				min-height: 0;
				object-position: center 32%;
			}
		}
		.manager_greeting_modal_body {
			padding: 28px 22px 30px;
		}
		.manager_greeting_modal_close {
			top: 10px;
			right: 10px;
			width: 40px;
			height: 40px;
		}
		h2 {
			margin-bottom: 18px;
		}
		.manager_greeting_modal_text {
			row-gap: 10px;
			p {
				line-height: 1.75;
			}
		}
	}

	.management_inner .manager_tel_wrap {
		padding: clamp(20px, 5.333vw, 32px) clamp(12px, 4vw, 24px);
	}

	.green_white_table,
	.service_info .service_table {
		display: block;
		width: 100%;
		overflow-x: auto;
	}
}


.management_inner {
	margin-block: 3rem;
	.management_inner_txt {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		margin-block: 10px;
	}
	.management_table_ttl {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		display: flex;
		align-items: center;
		column-gap: 5px;
		margin-block: 1rem 5px;
		&::before {
			content: '●';
			font-size: 12px;
		}
	}
	.management_inner_list {
		margin-block: 10px;
		li {
			font-size: clamp(15px, 3vw, 18px);
			font-family: '游ゴシックMedium';
			display: flex;
			align-items: center;
			column-gap: 5px;
			&::before {
				content: '●';
				font-size: 12px;
			}
		}
	}
	.manager_tel_wrap {
		margin-block: 2rem;
		border-radius: 20px;
		background: var(--main-green);
		color: #FFF;
		padding: 2rem;
		display: grid;
		justify-content: center;
		row-gap: 8px;
		line-height: 1;
		.manager_tel_ttl {
			font-size: clamp(18px, 4.33334vw, 26px);
			text-align: center;
		}
		.manager_tel_num {
			small {
				font-size: clamp(18px, 4.33334vw, 26px);
			}
			a {
				font-size: clamp(30px, 7.33334vw, 44px);
			}
		}
		.manager_tel_txt {
			font-size: clamp(14px, 2.66667vw, 16px);
			font-family: '游ゴシックMedium';
			text-align: center;
			line-height: 160%;
		} 
	} 
}

.green_white_table {
	tr {
		th {
			width: 120px;
		}
	}
}

.service_info {
	width: 100%;
	margin-block: 2rem;
	dl {
		margin-block: 1rem;
		font-size: clamp(14px, 2.66667vw, 16px);
		font-family: '游ゴシックMedium';
		dt {
			background: var(--pale-green);
			padding: 8px 1rem;
			font-weight: bold;
		}
		dd {
			.service_table {
				margin-block: 10px;
				tr {
					& > * {
						padding-block: 2px;
					}
					th {
						font-weight: normal;
						width: auto;
						text-align: left;
						width: 190px;
					}
					td {
						padding-inline: 10px;
					}
				}
			}
		}
	}
} 

/* ----------------------------------------------
管理人室：XD 600pxアートボード実測値
---------------------------------------------- */
@media screen and (min-width: 600px) {
	/* 導入文の下40px＋次セクションの上40px＝セクション間80px */
	body.family .page_green_ttl_wrap {
		padding-bottom: 40px;
	}

	body.family .under_FV .FV_desc {
		font-size: 18px;
		line-height: 30px;
	}

	body.family .anshin_ttl_wrap {
		row-gap: 5px;
	}

	body.family .anshin_ttl_wrap .anshin_ttl {
		font-size: 44px;
		line-height: 1;
	}

	body.family .anshin_ttl_wrap > span {
		font-size: 28px;
		line-height: 1;
	}

	body.family .anshin_wrap .anshin_box .anshin_num_wrap .anshin_num {
		font-size: 44px;
	}

	body.family .anshin_wrap .anshin_box .anshin_num_wrap .anshin_num::before {
		font-size: 28px;
	}

	body.family .anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box .anshin_white_box_ttl {
		font-size: 28px;
		line-height: 34px;
	}

	body.family .anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box .anshin_white_box_txt {
		font-size: 18px;
		line-height: 30px;
	}

	body.family .manager_greeting_btn .manager_greeting_btn_label {
		font-size: 22px;
	}

	body.family .manager_greeting_btn .manager_greeting_btn_label small {
		font-size: 10px;
	}

	body.family .manager_room_section > .sec_FV {
		box-sizing: border-box;
		width: 540px;
		height: 300px;
		margin: 0 auto 80px;
		padding: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	body.family .manager_room_section > .sec_FV > img {
		display: block;
		width: 540px;
		height: 300px;
		aspect-ratio: 9 / 5;
		border-radius: 10px;
		object-fit: cover;
	}

	body.family .manager_room_section > .sec_FV .sec_FV_desc_wrap {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 258px;
		width: 267.383px;
		height: 80px;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 0 10px 0 0;
	}

	body.family .manager_room_section > .sec_FV .sec_FV_desc {
		font-size: 30px;
		line-height: 34px;
	}

	body.family .manager_room_section .management_inner {
		margin-block: 0 48px;
	}

	body.family .manager_room_section .management_inner .sec_sub_ttl {
		font-size: 24px;
	}

	body.family .manager_room_section .management_inner_txt {
		font-size: 18px;
	}

	body.family .manager_room_section .management_table_ttl,
	body.family .manager_room_section .management_inner_list li {
		font-size: 18px;
	}

	body.family .manager_room_section .manager_tel_ttl {
		font-size: 26px;
	}

	body.family .manager_room_section .manager_tel_num,
	body.family .manager_room_section .manager_tel_num small,
	body.family .manager_room_section .manager_tel_num a {
		font-size: 18px;
	}

	body.family .manager_room_section .manager_tel_txt {
		font-size: 16px;
		line-height: 26px;
	}

	body.family .manager_room_section .service_info dl {
		font-size: 16px;
	}

	body.family .manager_room_section .green_white_table {
		width: 540px;
		border-spacing: 0 2px;
	}

	body.family .manager_room_section .green_white_table th {
		box-sizing: border-box;
		width: 146px;
		height: 38px;
		padding: 4px 15px;
		font-size: 16px;
		text-align: left;
	}

	body.family .manager_room_section .green_white_table td {
		box-sizing: border-box;
		width: 395px;
		height: 38px;
		padding: 4px 16px;
		font-size: 16px;
	}
}

@media screen and (max-width: 599px) {
	body.family .page_green_ttl_wrap {
		padding-bottom: clamp(24px, 6.667vw, 40px);
	}

	body.family .under_FV .FV_desc {
		font-size: clamp(15px, 3vw, 18px);
		line-height: 1.667;
	}

	body.family .anshin_ttl_wrap .anshin_ttl {
		font-size: clamp(28px, 7.33334vw, 44px);
	}

	body.family .anshin_ttl_wrap > span {
		font-size: clamp(20px, 4.66667vw, 28px);
	}

	body.family .anshin_wrap .anshin_box .anshin_num_wrap .anshin_num {
		font-size: clamp(28px, 7.33334vw, 44px);
	}

	body.family .anshin_wrap .anshin_box .anshin_num_wrap .anshin_num::before {
		font-size: clamp(20px, 4.66667vw, 28px);
	}

	body.family .anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box .anshin_white_box_ttl {
		font-size: clamp(20px, 4.66667vw, 28px);
		line-height: 1.214;
	}

	body.family .anshin_wrap .anshin_box .anshin_box_inner .anshin_white_box .anshin_white_box_txt {
		font-size: clamp(15px, 3vw, 18px);
		line-height: 1.667;
	}

	body.family .manager_greeting_btn .manager_greeting_btn_label {
		font-size: clamp(16px, 3.66667vw, 22px);
	}

	body.family .manager_room_section > .sec_FV {
		box-sizing: border-box;
		width: 90%;
		height: auto;
		aspect-ratio: 9 / 5;
		margin: 0 auto 13.333vw;
		padding: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	body.family .manager_room_section > .sec_FV > img {
		width: 100%;
		height: 100%;
		aspect-ratio: 9 / 5;
		border-radius: 10px;
		object-fit: cover;
	}

	body.family .manager_room_section > .sec_FV .sec_FV_desc_wrap {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 86%;
		width: 49.515%;
		height: 13.333vw;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 0 10px 0 0;
	}

	body.family .manager_room_section > .sec_FV .sec_FV_desc {
		font-size: clamp(20px, 5vw, 30px);
		line-height: 1.15;
	}

	body.family .manager_room_section .green_white_table {
		display: table;
		width: 100%;
		overflow: visible;
		border-spacing: 0 2px;
	}

	body.family .manager_room_section .green_white_table th {
		width: 27.037%;
		padding: 1vw 2.5vw;
		font-size: clamp(12px, 2.66667vw, 16px);
		text-align: left;
	}

	body.family .manager_room_section .green_white_table td {
		padding: 1vw 2.667vw;
		font-size: clamp(12px, 2.66667vw, 16px);
	}
}