@charset "utf-8";


/*  l-plan
--------------------------------------------------*/
.l-detail {
	padding-block: 10.0rem 13.0rem;
	background: url('../../img/common/bg_diagonal.jpg') no-repeat center center/cover,rgba(255,255,255,0.1);
	background-blend-mode:lighten;
}
.detail-inner {
	padding-block: 8.0rem 7.0rem;
	background: #fff;
}
.detail-inner::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1.2rem;
	background: var(--background-gradation);
	z-index: 1;
}
.detail-contents {
	width: calc(1300 / 1500 * 100%);
	margin-inline: auto;
}
.detail-head {
	width: min(100%,1190px);
	margin-inline: auto;
	margin-bottom: 7.0rem;
}
.detail-info {
    padding-bottom: 1.3rem;
    margin-bottom: 2.2rem;
	border-bottom: solid 1px var(--black);
}
.detail-info__type {
	font-size: 5.6rem;
	line-height: 1.2;
	letter-spacing: .05em;
	color: #c69c6d;
	text-align: center;
	margin-bottom: 2.7rem;
}
.detail-info__type em {
	font-size: calc(65 / 56 * 1em);
	line-height: 1;
    padding-right: .2em;
}
.detail-info__floor {
	font-size: 4.4rem;
	letter-spacing: .05em;
	line-height: 2.25;
	text-align: center;
}
.detail-info__floor span {
	font-size: calc(60 / 44 * 1em);
	line-height: 1;
}
.detail-info__floor em {
	font-size: calc(65 / 60 * 1em);
	line-height: 1;
}
.detail-spec {
	text-align: center;
}
.detail-spec__meter {
	margin-bottom: 3.0rem;
	gap: 2.0rem;
}
.detail-spec__meter__heading {
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .05em;
	padding-top: 2em;
}
.detail-spec__meter__desc {
	font-size: 4.4rem;
	line-height: 1;
	letter-spacing: .05em;
}
.detail-spec__meter__desc em {
	font-size: calc(60 / 44 * 1em);
	line-height: 1;
	letter-spacing: .05em;
}
.detail-spec__meter__desc i {
	font-family: "Noto Serif JP", serif;
}
.detail-spec__meter__desc small {
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .05em;
}
.detail-spec__other {
	gap: 2.0rem;
}
.detail-spec__other__txt {
	font-size: 1.8rem;
	line-height: 1.75;
	letter-spacing: 0;
}
.detail-main {
	width: min(100%,1190px);
	margin-inline: auto;
}
.detail-madori {
	width: 100%;
	text-align: center;
}
.detail-madori__item img {
	width: 100%;
}
.detail-legend {
	position: relative;
	width: 100%;
	margin-top: 4.5rem;
}
.detail-legend__mark {
	font-size: max(1.1rem,10px);
	letter-spacing: .1em;
	line-height: 1;
	gap: 1.0rem 2.5rem;
}
.detail-legend__mark i{
	display: inline-block;
	margin-right: 1.0rem;
	vertical-align: -.05em;
	width: max(3.0rem,27px);
}
.detail-legend__desc {
	font-size: max(1.1rem,10px);
	letter-spacing: .02em;
	line-height: 1;
	gap: 1.0rem 1.2rem;
	margin-top: 1.0rem;
}
.detail-btn {
	margin-top: 12.5rem;
}
.detail-btn__back {
	position: relative;
	gap: 0 2.2rem;
}
.detail-btn__back__txt {
	font-size: 2.7rem;
}
.detail-btn__back__icon {
	position: relative;
	width: 7.0rem;
	height: 4.0rem;
}
.detail-btn__back__icon::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: 5.0rem;
	height: 1px;
	background: #c7b299;
}
.detail-btn__back__icon i {
	position: absolute;
	right: 0;
	top: 0;
	width: 4.0rem;
	height: 4.0rem;
}
.detail-btn__back__icon i::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background : linear-gradient(90deg, rgba(255, 246, 225, 1) 0%, rgba(180, 153, 131, 1) 100%);
}
.detail-btn__back__icon i::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: solid 1px #c7b299;
}
@media (any-hover: hover){
	.detail-btn__back__icon::before {
		transition: left .3s linear;
	}
	.detail-btn__back:hover .detail-btn__back__icon::before {
		left: 5.0rem;
	}
	.detail-btn__back__icon i::after {
		transform: scale(1);
		opacity: 1;
	}
	.detail-btn__back:hover .detail-btn__back__icon i::after {
		animation: ripple 1.4s linear forwards infinite;
	}
}
@keyframes ripple { 
	0%{ opacity: 0;transform: scale(0); } 
	50%{ opacity: 1;transform: scale(1); } 
	100%{ opacity: 0;transform: scale(2); } 
}
@media screen and (max-width: 768px){
	.l-detail {
		padding-block: 10.0rem 7.0rem;
	}
	.detail-inner {
		padding-block: 5.0rem;
	}
	.detail-inner::before {
		height: .8rem;
	}
	.detail-contents {
		width: calc(280 / 320 * 100%);
	}
	.detail-head {
		margin-bottom: 4.0rem;
	}
	.detail-info {
	    padding-bottom: 1.3rem;
	    margin-bottom: 1.8rem;
	}
	.detail-info__type {
		font-size: 3.4rem;
		margin-bottom: 2.3rem;
	}
	.detail-info__type em {
		font-size: calc(40 / 34 * 1em);
	}
	.detail-info__floor {
		font-size: 2.3rem;
	}
	.detail-info__floor span {
		display: block;
		font-size: calc(30 / 23 * 1em);
	}
	.detail-info__floor em {
		font-size: calc(40 / 30 * 1em);
	}
	.detail-spec__meter {
		margin-bottom: 1.5rem;
		gap: 1.0rem 1.5rem;
		justify-content: flex-start !important;
	}
	.detail-spec__meter__heading {
		font-size: 1.6rem;
		padding-top: 1.3em;
	}
	.detail-spec__meter__desc {
		font-size: 2.6rem;
	}
	.detail-spec__meter__desc em {
		font-size: calc(40 / 26 * 1em);
	}
	.detail-spec__meter__desc small {
		font-size: 1.6rem;
	}
	.detail-spec__other {
		gap: .5rem 1.0rem;
		justify-content: flex-start !important;
	}
	.detail-spec__other__txt {
		font-size: 1.6rem;
	}
	.detail-legend {
		margin-top: 2.5rem;
	}
	.detail-legend__mark {
		font-size: 1.0rem;
		line-height: 1;
		gap: .8rem 1.0rem;
	}
	.detail-legend__mark i{
		margin-right: .7rem;
		width: 2.2rem;
	}
	.detail-legend__desc {
	    font-size: 1.0rem;
	    line-height: 1;
	    gap: .8rem .8rem;
	}
	.detail-btn {
    	margin-top: 5.5rem;
	}
	.detail-btn__back {
		gap: 0 1.0rem;
	}
	.detail-btn__back__txt {
		font-size: 1.8rem;
	}
	.detail-btn__back__icon {
		width: 7.0rem;
		height: 4.0rem;
	}
	.detail-btn__back__icon::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		translate: 0 -50%;
		width: 5.0rem;
		height: 1px;
		background: #c7b299;
	}
	.detail-btn__back__icon i {
		position: absolute;
		right: 0;
		top: 0;
		width: 4.0rem;
		height: 4.0rem;
	}
	.detail-btn__back__icon i::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		background : linear-gradient(90deg, rgba(255, 246, 225, 1) 0%, rgba(180, 153, 131, 1) 100%);
	}
	.detail-btn__back__icon i::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		translate: -50% -50%;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: solid 1px #c7b299;
	}
}