@charset "utf-8";
#main_page .main_cont .ttl::after {
	margin-left: auto;
	margin-right: auto;
}
.sec_head .ttl::after { margin-top: clamp(15px, 1.4880952380952380952vw, 25px);}
.sec_landscape { padding: clamp(60px, 7.1428571428571428571vw, 120px) 0;}
.sec_landscape:not(.bg02,.bg01) { background-color: #efefec;}
.area_list .item {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(30px, 5.6547619047619047619vw, 95px);
}
.area_list .item + .item { margin-top: clamp(70px, 11.90476vw, 200px);}
.area_list .sec_head {
	color: #333333;
	margin: clamp(0px, 0.8928571vw, 15px) 0 0;
	text-align: left;
	position: relative;
	z-index: 1;
	width: 36.8%;
}
.area_list .sec_head .ttl {
	font-size: clamp(1.4rem, 1.4285714vw, 2.4rem);
	margin-bottom: clamp(20px, 3.0vw, 30px);
}
.area_list .sec_head .topic {
	margin-bottom: clamp(20px, 3.0vw, 60px);
}
.area_list .sec_head .txt { line-height: 2.0;}
.area_list .sec_head .ttl::after { display: none; }
.area_list .img { flex: 1;}
.area_list .img figure {
    margin: 0 calc(-1 * (100vw - 1180px) / 2) 0 0;
    width: calc(100% + (100vw - 1180px) / 2);
}
.area_list .item.reverse { flex-direction: row-reverse;}
.area_list .item.reverse .img figure {
	margin: 0 0 0 calc(-1 * (100vw - 1180px) / 2);
    width: calc(100% + (100vw - 1180px) / 2);
}

.thumbnail_list {
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.thumbnail_list .sub {
	margin-top: 8px;
	font-size: clamp(1.1rem,0.8vw,1.3rem);
	letter-spacing: 0.05em;
	line-height: 2;
}
@media only screen and (max-width: 1200px) {
	.area_list .img figure {
		margin: 0 -15px 0 0;
		width: calc(100% + 15px);
	}
	.area_list .item.reverse .img figure {
		margin: 0 0 0 -15px;
		width: calc(100% + 15px);
	}
}
@media only screen and (max-width: 767px) {
	.area_list .sec_head {
		width: 100%;
		text-align: center;
		margin: 0;
	}
	.area_list .item.reverse .img figure,
	.area_list .img figure {
		margin: 0 -15px 0 -15px;
		width: calc(100% + 30px);
	}
	.thumbnail_list {
		grid-template-columns: auto;
	}
	.thumbnail_list .sub {
		letter-spacing: 0.01em;
		line-height: 1.7;
	}
}
.dinb {display: inline-block;}
.note {
	font-size: 1rem;
	letter-spacing: 0.1em;
}
.plan_block {
	margin: clamp(40px, 9.8214285714285714286vw, 165px) auto clamp(60px, 12.797619047619047619vw, 215px);
	max-width: 620px;
}
.plan_block .ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.2rem, 0.77380952380952380952vw, 1.3rem);
	letter-spacing: 0.1em;
	margin-bottom: clamp(10px, 1.1904761904761904762vw, 20px);
	gap: 5px;
}
.plan_block .ttl .icon_circle {
	border: clamp(2px, 0.17857142857142857143vw, 3px) solid rgba(169, 106, 110, 0.8);
	border-radius: 999px;
	display: inline-block;
	height: clamp(15px, 1.547619047619047619vw, 26px);
	width: clamp(15px, 1.547619047619047619vw, 26px);
}
.plan_block .img {
	position: relative;
	margin-bottom: clamp(10px, 1.1904761904761904762vw, 20px);
}
.plan_block .btn_circle {
	cursor: pointer;
	border: 8px solid rgba(169, 106, 110, 1);
	border-radius: 999px;
	position: absolute;
	bottom: -10px;
	left: -7px;
	height: 68px;
	width: 68px;
	animation: scale 3s linear .3s infinite normal;
}
.plan_block .btn_circle:hover {
	animation-play-state: paused;
}
.plan_block .circle01 {
	top: 26.5%;
	left: 19.2%;
}
.plan_block .circle02 {
	top: 14.5%;
	left: 47.5%;
}
.plan_block .circle03 {
	top: 24%;
	left: 73%;
}
.plan_block .circle04 {
	top: 72%;
	left: 57.5%;
}
@keyframes scale {
	0% {
		opacity: 0;
		transform: scale(0.25);
	}

	25% {
		opacity: 0.15;
		transform: scale(0.5);
	}
	50% {
		opacity: 0.8;
		transform: scale(0.75);
	}
	75% {
		opacity: 0.15;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.25);
	}
}
@media screen and (max-width: 767px) {
	.plan_block .btn_circle {
		border: 4px solid rgba(169, 106, 110, 1);
		height: 35px;
		width: 35px;
	}
}

/* modal
--------------------------------------------------------------------*/
.modal_slider {
	background: rgba(239, 239, 236, 0.15);
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	height: 100%;
	overflow-y: auto;
	opacity: 0;
	transition: all 0.5s ease;
	width: 100%;
}
.modal_slider.open {
	visibility: visible;
	opacity: 1;
	backdrop-filter: blur(10px);
}
.modal_slider .btn_close {
	background: url(../imgs/close.svg) no-repeat center center;
	background-size: cover;
	cursor: pointer;
	position: absolute;
	top: 25px;
	right: 40px;
	z-index: 9999;
	height: 30px;
	width: 30px;
}
.modal_slider .modal_wrap {
	position: relative;
	height: 100%;
	margin: auto;
	max-width: 92%;
    width: 765px;
}
.modal_slider .modal_wrap,
.modal_slider .slider_features,
.modal_slider .slider_example,
.modal_slider .slider_item,
.modal_slider .slick-list,
.modal_slider .slick-track {
	height: 100%;
}
.modal_slider .slider_item_inner {
	position: relative;
	top: 50%;
	height: auto;
	max-height: 100%;
	transform: translateY(-50%);
	width: 100%;
}
.modal_slider .slider_features {
	position: static;
	margin: auto;
}
.modal_slider .slider_item {
	outline: none;
}
.modal_contents {
	background: rgba(255, 255, 255, 0.8);
	padding: 40px 40px 50px;
	width: 100%;
}
.modal_contents .info {
	margin: auto;
	max-width: 520px;
	color: #333333;
}
.modal_contents .info .ttl {
	color: #4a655b;
	font-size: clamp(2rem, 1.7857142857142857143vw, 3rem);
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 5px;
}
.modal_contents .info .img { margin-bottom: 5px;}
.modal_contents .info .txt {
	font-size: clamp(1.2rem, 0.95238095238095238095vw, 1.6rem);
	line-height: 1.875;
	letter-spacing: 0.1em;
	text-align: center;
	margin-top: clamp(15px, 1.7857142857142857143vw, 30px);
}
@media screen and (max-width: 767px) {
	.modal_slider .btn_close {
		top: 10px;
		right: 10px;
		height: 25px;
		width: 25px;
	}
	.modal_contents { padding: 30px 15px 30px;}
	.modal_contents .info .txt { letter-spacing: 0;}
}