@charset "UTF-8";
.page-primary-heading{
	font-size: clamp(2.2rem, 3.6vw , 3.6rem) ;
	line-height: 1.7;
	margin-bottom: .8em;
}
.page-secondary-heading{
	font-size: clamp(2rem, 3vw , 2.6rem) ;
	line-height: 1.7;
	margin-bottom: .8em;
}
.page-tertiary-heading{
	font-size: clamp(1.8rem, 2.4vw , 2.2rem) ;
	line-height: 1.7;
	margin-bottom: .8em;
}
.page-lead{
	font-size: clamp(1.4rem, 2vw , 1.8rem) ;
	line-height: 2;
	margin: 1em 0;
}
.page-note{
	font-size: clamp(1.2rem, 1.6vw , 1.4rem) ;
	line-height: 2;
	margin: 1em 0;
}

.line-wide{
	line-height: 2;
}
.is-key{
	color: #5383b1;
}
.is-gry{
	color: #6b6b6b;
}
.is-brn{
	color: #897970;
}
.is-grn{
	color: #b8c885;
}
.is-pnk{
	color: #cb8d92;
}
.is-org{
	color: #d0a05d;
}
.bg-gry{
	background: #f9f8f8;
}
.din-font{
	font-family: "din-2014", sans-serif;
}
.page-has-gap{
	gap: 48px
}
.flex-head{
	width: calc(54% - 24px);
}
.flex-thumb{
	width: calc(46% - 24px);
}
.flex-half{
	width: calc(50% - 24px);
}
.flex-col-03{
	width: calc(100% / 3 - 32px);
}
.inner-mid {
	max-width: 1000px;
}
.layout-stack > * + * {
    margin-top: 32px;
}
.layout-stack-wide > * + * {
    margin-top: 60px;
}
.layout-stack-narrow > * + * {
    margin-top: 16px;
}
.layout-stack-min > * + * {
    margin-top: 8px;
}
.is-bold{
	 font-family: "FP-こぶりなゴシック StdN W6","FP-KoburinaGoStdN-W6", sans-serif;
}
.template-detail{
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 16px;
}
.template-detail dt{
	background: #fff;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 1.5rem;
}
.template-detail dd{
	padding-top: .2em;
	font-size: 1.8rem;
	line-height: 1.3;
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
.template-note{
	font-size: 1.25rem;
	line-height: 1.7;
}
.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
	}
.modal {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: none;
	backdrop-filter: blur(12px);
}
.modal-box{
	background: rgba(255, 255, 255, 0.9);
	max-width: 450px;
	width: calc(100% - 48px);
	border-radius: 12px;
	padding: 24px;
	position: relative;
}
.town .modal-box{
	background: linear-gradient(-20deg,rgba(203, 141, 146, 1), rgba(203, 141, 146, 0.7)) ;
}
.residence .modal-box{
	background: linear-gradient(-20deg,rgb(184, 200, 133), rgba(184, 200, 133, 0.7)) ;
}
.modal-box .img-wrapper{
	margin-bottom: 16px;
}
.modal-box .img-wrapper .fit-img{
	border-radius: 12px;
}
.modal-box-body .template-detail dt{
	width: 36px;
	height: 36px;
	font-size: 1.8rem;
}
.modal-box-body .template-detail dd{
	font-size: 2.2rem;
}
.modal-box-body .template-note{
	font-size: 1.6rem;
}
.modal-inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-close {
	position: absolute;
	top: -18px;
	right: -12px;
	cursor: pointer;
	z-index: 1;
}
.modal-close-box{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #575758;
	position: relative;
}
.modal-close-box::before,.modal-close-box::after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 20px;
	background: #fff;
}
.modal-close-box::before{
	transform: translate(-50% , -50%) rotate(45deg);
}
.modal-close-box::after{
	transform: translate(-50% , -50%) rotate(-45deg);
}
.fixed{
	overflow: hidden;
}
.template-link{
	position: absolute;
	/* background: rgba(255, 0, 0, 0.3); */
	display: block;
	transform: translateY(16px);
	opacity: 0;
}
@keyframes pokopoko {
	0%{
		opacity: 0;
		transform: translateY(16px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
.is-anime .template-link.num01{
	animation: pokopoko .5s .6s ease-in-out forwards;
}
.is-anime .template-link.num02{
	animation: pokopoko .5s .7s ease-in-out forwards;
}
.is-anime .template-link.num03{
	animation: pokopoko .5s .8s ease-in-out forwards;
}
.is-anime .template-link.num04{
	animation: pokopoko .5s .9s ease-in-out forwards;
}
.is-anime .template-link.num05{
	animation: pokopoko .5s 1s ease-in-out forwards;
}
.is-anime .template-link.num06{
	animation: pokopoko .5s 1.1s ease-in-out forwards;
}
.is-anime .template-link.num07{
	animation: pokopoko .5s 1.2s ease-in-out forwards;
}
.is-anime .template-link.num08{
	animation: pokopoko .5s 1.3s ease-in-out forwards;
}
.is-anime .template-link.num09{
	animation: pokopoko .5s 1.4s ease-in-out forwards;
}
.is-anime .template-link.num10{
	animation: pokopoko .5s 1.5s ease-in-out forwards;
}
.is-anime .template-link.num11{
	animation: pokopoko .5s 1.6s ease-in-out forwards;
}
.is-anime .template-link.num12{
	animation: pokopoko .5s 1.7s ease-in-out forwards;
}
.is-anime .template-link.num13{
	animation: pokopoko .5s 1.8s ease-in-out forwards;
}
.template-link dl{
	display: flex;
	gap: .3vw;
	font-size: .9vw;
	background: #fff;
	border-radius: 4vw;
	padding: .3em .7em .3em .4em;
	transition: .2s;
}
.template-link dl dt{
	flex-shrink: 0;
	width: 1.2vw;
	height: 1.2vw;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: .9vw;
	flex-shrink: 0;
	transition: .2s;
}
.template-link dl dt.is-pnk{
	background: #cb8d92;
	color: #fff;
}
.template-link dl dt.is-grn{
	background: #b8c885;
	color: #fff;
}
.template-link dl dd{
	line-height: 1.4;
	flex-shrink: 0;
	letter-spacing: 0.075em;
	font-feature-settings: "palt";
	transition: .2s;
	font-family: "FP-こぶりなゴシック StdN W6", "FP-KoburinaGoStdN-W6", sans-serif;
}
.template-link:hover dl dd{
	color: #fff;
}
.town .template-link:hover dl{
	background: #cb8d92;
}
.town .template-link:hover dl dt{
	background: #fff;
	color: #cb8d92;
}
.residence .template-link:hover dl{
	background: #b8c885;
}
.residence .template-link:hover dl dt{
	background: #fff;
	color: #b8c885;
}

.template-link.town-01{
	top: 69.4%;
	left: 44%;
}
.template-link.town-02 {
    top: 60.3%;
    left: 24.7%;
}
.template-link.town-03 {
    top: 63.9%;
    left: 33.7%;
}
.template-link.town-04 {
	top: 56.8%;
	left: 33.9%;
}
.template-link.town-05 {
    top: 47.7%;
    left: 38.8%;
}
.template-link.town-06 {
    top: 55.4%;
    left: 15.7%;
}
.template-link.town-07 {
    top: 52.6%;
    left: 54.5%;
}
.template-link.town-08 {
    top: 59.1%;
    left: 47.5%;
}
.template-link.town-09 {
    top: 58.8%;
    left: 70.7%;
}
.template-link.residence-01{
	top: 74.78%;
	left: 65.4%;
}
.template-link.residence-02 {
		top: 65.68%;
    left: 70.7%;
}
.template-link.residence-03 {
		top: 86.83%;
	left: 45.4%;
}
.template-link.residence-04 {
	top: 53.83%;
	left: 50.9%;
}
.template-link.residence-05 {
	top: 43.36%;
	left: 36.2%;
}
.template-link.residence-06 {
	top: 59.34%;
	left: 40.3%;
}
.template-link.residence-07 {
	top: 86.18%;
	left: 67%;
}
.template-link.residence-08 {
	top: 55.78%;
	left: 60.8%;
}
.template-link.residence-09 {
	top: 75.93%;
	left: 55.1%;
}
.template-link.residence-10 {
	top: 52.39%;
	left: 79.68%;
}
.template-link.residence-11 {
  top: 71.4%;
	left: 27.7%;
}
.template-link.residence-12 {
	top: 67.18%;
	left: 45.3%;
}
.template-link.residence-13 {
		top: 73.63%;
    left: 45.7%;
}
@media screen and (max-width: 900px) {
	
}
@media screen and (max-width: 767px) {
	.flex-head{
		width: 100%;
	}
	.flex-thumb{
		width: 100%;
	}
	.flex-half{
		width: 100%;
	}
	.flex-col-03{
		width: 100%;		
	}
	.sp-text-left{
		text-align: left;
	}
	.page-has-gap{
		gap: 16px
	}
	.layout-stack-wide > * + * {
    margin-top: 32px;
	}
	.layout-stack > * + * {
    margin-top: 24px;
	}
	.template-detail {
    gap: 4px;
    margin-bottom: 8px;
	}
	.template-detail dt {
    width: 28px;
    height: 28px;
    font-size: 1.4rem;
	}
	.template-detail dd {
    font-size: 1.6rem;
	}
	.template-wrap .flex-col-03 .layout-stack-narrow{
		display: flex;
		align-items: center;
		gap: 16px;
	}
	.template-wrap .flex-col-03:nth-child(even) .layout-stack-narrow{
		flex-direction: row-reverse;
	}
	.template-wrap .flex-col-03 .layout-stack-narrow div:first-child{
		width: calc(50% - 16px);
	}
	.template-wrap .flex-col-03 .layout-stack-narrow div:last-child{
		width: 50%;
		margin-top: 0;
	}
	.template-note{
		font-size: 1.2rem;
		line-height: 1.7;
	}
	.modal-box-body .template-detail{
		gap: 8px;
	}
	.modal-box-body .template-detail dt{
		width: 32px;
		height: 32px;
		font-size: 1.6rem;
	}
	.modal-box-body .template-detail dd{
		font-size: 2rem;
	}
	.modal-box-body .template-note{
		font-size: 1.4rem;
	}

	.template-link dl{
		gap: .3vw;
		font-size: 1.6vw;
	}
	.template-link dl dt{
		width: 2.2vw;
		height: 2.2vw;
		font-size: 1.4vw;
	}

	.template-link.town-01 {
    top: 67.7%;
    left: 51.5%;
	}
	.template-link.town-02 {
			top: 60.7%;
			left: 16.2%;
	}
	.template-link.town-03 {
			top: 64%;
			left: 33.2%;
	}
	.template-link.town-04 {
			top: 56.6%;
			left: 30.4%;
	}
	.template-link.town-05 {
			top: 50.2%;
			left: 42.6%;
	}
	.template-link.town-06 {
			top: 55.6%;
			left: 8.4%;
	}
	.template-link.town-07 {
			top: 56%;
			left: 61%;
	}
	.template-link.town-08 {
		top: 58.9%;
		left: 46.1%;
	}
	.template-link.town-09 {
			top: 62.2%;
			left: 74.9%;
	}
	.template-link.town-09 dl{
		padding: .8vw 1.2vw;
	}
	.template-link.residence-01 {
			top: 74.3%;
			left: 65.4%;
	}
	.template-link.residence-02 {
		top: 63.2%;
    left: 71.2%;
	}
	.template-link.residence-03 {
		top: 83.3%;
    left: 36.1%;
	}
	.template-link.residence-04 {
		top: 51.6%;
    left: 38.7%;
	}
	.template-link.residence-05 {
		top: 40.5%;
    left: 21.4%;
	}
	.template-link.residence-06 {
		top: 60.6%;
    left: 25.3%;
	}
	.template-link.residence-07 {
		top: 88.61%;
    left: 64.2%;
	}
	.template-link.residence-08 {
    top: 54.38%;
    left: 62.5%;
	}
	.template-link.residence-09 {
		top: 67.88%;
    left: 39.8%;
	}
	.template-link.residence-10 {
		top: 50.9%;
    left: 81.68%;
	}
	.template-link.residence-11 {
		top: 67.7%;
    left: 8.2%;
	}
	.template-link.residence-12 {
		top: 57.32%;
    left: 44.8%;
	}
	.template-link.residence-13 {
		top: 75.47%;
    left: 26.7%;
	}
	.sp-line-wide{
		line-height: 1.7;
	}
}
.off{
    filter: brightness(.5);
    cursor: default;
    pointer-events: none;
}