@charset "UTF-8";

main.feature {
	--appeal-theme-mv-url: url('../images/appeal/feature/mv-back.png');
	--appeal-theme-ttlline: url('../images/appeal/feature/appeal-ttl_line.svg') ;
	--appeal-theme-color: #114667;
	--appeal-theme-background: #EAE6E1;
	--appeal-theme-dark: #114667;
	--appeal-theme-marker: #FFF8C3;
	--appeal-theme-accent-01: #499892;
	--appeal-theme-accent-02: #9D8772;
	--appeal-theme-reserve-line: #AA8546;
	--appeal-theme-reserve-button: linear-gradient(90deg, #AA8546 0%, #BE9F6B 50%, #AA8546 100%);
}

main.property {
	--appeal-theme-mv-url: url('../images/appeal/property/mv-back.png');
	--appeal-theme-ttlline: url('../images/appeal/property/appeal-ttl_line.svg') ;
	--appeal-theme-color: #715F35;
	--appeal-theme-background: #FFF6E3;
	--appeal-theme-dark: #806b39;
	--appeal-theme-marker: #FFF8C3;
	--appeal-theme-accent-01: #499892;
	--appeal-theme-accent-02: #9D8772;
	--appeal-theme-reserve-line: #AA8546;
	--appeal-theme-reserve-button: linear-gradient(90deg, #AA8546 0%, #BE9F6B 50%, #AA8546 100%);
}

main.suburbs {
	--appeal-theme-mv-url: url('../images/appeal/suburbs/mv-back.png');
	--appeal-theme-ttlline: url('../images/appeal/suburbs/appeal-ttl_line.svg') ;
	--appeal-theme-color: #114667;
	--appeal-theme-background: #D2EBEE;
	--appeal-theme-dark: #155579;
	--appeal-theme-marker: #fff8c3;
	--appeal-theme-accent-01: #499892;
	--appeal-theme-accent-02: #9D8772;
	--appeal-theme-reserve-line: #AA8546;
	--appeal-theme-reserve-button: linear-gradient(90deg, #AA8546 0%, #BE9F6B 50%, #AA8546 100%);
}

.appeal-l-section {
	margin-bottom: min(6vw, 84px);
}

.appeal-l-container {
	width: min(90%, 680px);
	margin: auto;
}

.appeal-page {
	font-size: min(3.467vw, 15.6px);
	line-height: 1.8;
	color: var(--appeal-theme-color);
	background: var(--appeal-theme-background);
}

.appeal-hide__sp{
	display: none;
}

.appeal-grid-container{
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	gap: 1.5rem;
}

.appeal-attent{
	font-size: .9rem;
}

@media (min-width: 769px) {

	.appeal-l-section {
		margin-bottom: 80px;
	}

	.appeal-l-container {
		width: min(90%, 1000px);
	}

	.appeal-page {
		font-size: 14px;
	}

	.appeal-hide__sp{
		display: revert;
	}
	.appeal-show__sp{
		display: none;
	}

	.appeal-grid-container{
		grid-template-columns: 50% 1fr;
		gap: 2.8rem;
	}

	.appeal-attent{
		font-size: 1.0rem;
	}

}

.appeal-mv .appeal-l-container {
	padding-bottom: min(26vw, 120px);
}


.appeal-mv-picture {
	margin-bottom: min(6vw, 84px);
	padding-left: 10%;
}

.appeal-mv .sp-none{
	display: contents;
}

.appeal-mv {
	position: relative;
	background: var(--appeal-theme-mv-url) no-repeat center / auto 100%, url(../images/appeal/connected.svg) no-repeat right bottom / 62%;
}

.appeal-mv::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 5em;
	border-left: min(.267vw, 1.2px) solid var(--appeal-theme-color);
	transform: translate(-50%, 50%);
}

.appeal-mv .appeal-l-section {
	margin-bottom: min(22vw, 108px);
}
.appeal-mv-image {
	display: block;
	width: 100%;
}

.appeal-mv-intro-title {
	margin: 0 0 min(8.533vw, 38.4px);
	font-size: min(7.2vw, 30px);
	line-height: 2;
}

.appeal-mv-intro-title-line {
	display: inline-block;
	border-bottom: min(.267vw, 1.2px) solid var(--appeal-theme-color);
}

@media (min-width: 769px) {
	.appeal-mv {
		padding: 0;
		background: var(--appeal-theme-mv-url) no-repeat center / cover;
	}

	.appeal-mv .sp-none{
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr 50%;
		align-items: center;
		width: min(90%, 1180px);
		padding: 80px 0 48px;
	}
	.appeal-mv .sp-none .appeal-l-container{
		display: contents;
	}

	.appeal-mv-picture {
		order: 2;
		margin: 0 0 0 auto;
		padding: 0;
		transform: scale(108%);
		transform-origin: bottom left;
	}

	.appeal-mv-intro {
		position: relative;
		z-index: 1;
		margin-right: -10%;
	}

	.appeal-mv-intro-title {
		margin-bottom: 38px;
		font-size: clamp(2.7rem, 3.25vw, 4.4rem);
		line-height: 1.75;
	}

	.appeal-mv-intro-text {
		font-size: 1.4rem;
		line-height: 2;
	}
}

/* --- --- */
.appeal-points-title {
	margin: 0 -5vw min(12.8vw, 57.6px);
	text-align: center;
}

.appeal-points-title .appeal-points-title_img {
	display: block;
	width: 35vw;
	margin: auto;
}

.appeal-points-title__grid{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
}

.appeal-points-title .appeal-points-deco{
	line-height: 1;
}

.appeal-points-title-text {
	margin-top: -1.0em;
	font-size: min(2.0rem, 5.4vw);
	line-height: 1.0;
}

.appeal-points-title .appeal-points-line {
	margin: 0 -.25em;
	padding: 0 1.0em 0 .25em;
	background: var(--appeal-theme-ttlline) bottom center / 100% auto no-repeat;
}

.appeal-points-title-number {
	padding: 0 .1em;
	font-size: 2.0em;
	font-weight: 400;
}

.appeal-point {
	position: relative;
	z-index: 1;
	margin-top: min(10.133vw, 45.6px);
	padding: min(13.333vw, 60px) min(4.333vw, 24px) min(10.667vw, 48px);
	border-radius: min(1.333vw, 6px);
	background: #fff;
}

.appeal-point:first-child {
	margin-top: 0;
}

.appeal-point-number {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	font-size: min(9.867vw, 44.4px);
	line-height: 1;
	transform: translate(-50%, -50%);
}

.appeal-point .appeal-point-title {
	margin-bottom: min(5.333vw, 24px);
	font-size: min(4vw, 18px);
	line-height: 2;
	text-align: center;
}

.appeal-point .appeal-point-subtitle{
	width: fit-content;
	margin: .5em auto 1em;
	text-align: center;
	font-size: min(4vw, 18px);
}

.appeal-point .appeal-point-subtitle .underline{
	display: block;
	border-bottom: 1px solid #231815;
}

.appeal-point .appeal-point-subtitle .underline.sp-none{
	display: contents;
}

.appeal-point .appeal-point-title .underline{
	background: linear-gradient(transparent 70%, var(--appeal-theme-marker) 70%);
}

.appeal-point-text {
	margin-bottom: min(10.133vw, 45.6px);
}

.appeal-point-dark {
	color: #fff;
	background: var(--appeal-theme-dark);
}

.appeal-point-dark .appeal-point-title {
	background: none;
}

main.suburbs .appeal-point-bubble-img {
	position: static;
	display: block;
	width: min(100%, 30rem);
	margin: 0 auto min(4vw, 18px);
	line-height: 0;
}

@media (min-width: 769px) {


	.appeal-points-title {
		margin-bottom: 7.6rem;
	}

	.appeal-points-title .appeal-points-title_img {
		width: 18.0rem;
	}

	.appeal-points-title-text {
		margin-top: 0;
		font-size: 3.0rem;
	}

	.appeal-points-title__grid{
		gap: 2em;
		margin-top: -4em;
	}

	.appeal-point {
		margin-top: 70px;
		padding: 7.0rem 7.6rem;
		border-radius: 10px;
	}

	.appeal-point-number {
		font-size: 7rem;
	}

	.appeal-point-title {
		font-size: clamp(1.7rem, 1.6vw, 2.2rem);
	}

	.appeal-point-text {
		text-align: center;
	}

	.appeal-point .appeal-point-title {
		font-size: min(4vw, 22px);
	}

	.appeal-point .appeal-point-subtitle{
		margin: -1em auto 2em;
	}

	.appeal-point .appeal-point-subtitle .underline{
		padding: 0 1em;
	}

	.appeal-point .appeal-point-subtitle .underline.sp-none{
		display: block;
	}

	.appeal-point .appeal-point-subtitle .underline.pc-none{
		display: contents;
	}

	main.suburbs .appeal-point-bubble-img {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: min(20vw, 246px);
		margin: 0;
		transform: translate(15%, -13%);
	}
}

/* --- --- */

.appeal-reserve {
	position: relative;
	display: block;
	width: min(100%, 590px);
	margin: min(17.333vw, 78px) auto 0;
	padding: min(7.467vw, 33.6px) min(5.333vw, 24px) min(6.4vw, 28.8px);
	border-top: min(.267vw, 1.2px) solid var(--appeal-theme-reserve-line);
	border-bottom: min(.267vw, 1.2px) solid var(--appeal-theme-reserve-line);
	color: #333;
	background: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 20%, rgba(255,255,255, 1) 80%, rgba(255,255,255, 0) 100%);
	text-align: center;
	text-decoration: none;
}

.appeal-reserve .appeal-reserve-label {
	display: block;
	margin-bottom: min(4.8vw, 21.6px);
	font-size: min(6.4vw, 28.8px);
	line-height: 1.5;
}

.appeal-reserve .appeal-reserve-btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(16vw, 7.2rem);
	padding: 0 min(8vw, 36px);
	color: #fff;
	line-height: 1;
	font-size: min(4.8vw, 21.6px);
	font-weight: 400;
	letter-spacing: .08em;
	background: var(--appeal-theme-reserve-button);
}

.appeal-reserve .appeal-reserve-btn::after {
	position: absolute;
	right: min(9.6vw, 43.2px);
	content: "›";
}

@media (min-width: 769px) {
	.appeal-reserve {
		width: 100%;
		margin-top: 100px;
		padding: 34px 0 40px;
	}

	.appeal-reserve-label {
		font-size: 2.2rem;
	}

	.appeal-reserve strong {
		font-size: 1.6rem;
	}

	.appeal-reserve .appeal-reserve-btn {
		width: 65.0rem;
		height: 10.0rem;
		margin: auto;
	}
}

/* --- --- */

.appeal-voice {
	padding: min(18.667vw, 84px) 0 min(24vw, 108px);
	border-radius: min(1.333vw, 6px) 0 0 min(1.333vw, 6px);
	background: #fff;
}

.appeal-section-title {
	margin: 0 5% min(7.467vw, 33.6px);
	color: #333;
	font-size: min(4.8vw, 21.6px);
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
}

.appeal-section-title-en {
	display: block;
	margin-bottom: min(4.8vw, 21.6px);
	color: #493e39;
	font-family: "Cormorant", serif;
	font-size: min(11.733vw, 52.8px);
	line-height: 1;
	letter-spacing: .03em;
}

.appeal-section-title-en .accent-01 {
	color: var(--appeal-theme-accent-01);
}

.appeal-section-title-en .accent-02 {
	color: var(--appeal-theme-accent-02);
}

.appeal-voice-note {
	width: 92%;
	margin: 0 auto min(11.733vw, 52.8px);
	color: #333;
	font-size: min(3.2vw, 14.4px);
	line-height: 1.8;
}

.appeal-voice-item {
	position: relative;
	margin-top: min(12.8vw, 57.6px);
}

.appeal-voice-item .appeal-voice-img{
	display: block;
	margin-right: -5vw;
}

.appeal-voice-item:first-child {
	margin-top: 0;
}

.appeal-voice-text {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	padding: min(8.533vw, 38.4px) min(5.333vw, 24px);
	color: #fff;
}

.appeal-voice-text-meta {
	margin-bottom: min(2.4vw, 10.8px);
	font-size: min(3.467vw, 15.6px);
}

.appeal-voice-text .color {
	color: var(--appeal-theme-marker);
}

.appeal-voice-text-title {
	font-size: min(4.8vw, 21.6px);
	font-weight: 400;
	line-height: 1.65;
}

.appeal-voice-text-title::after {
	content: '';
	display: block;
	height: 1px;
	margin-top: min(4.267vw, 19.2px);
	background: linear-gradient(90deg, rgba(255,255,255, 1) 70% , rgba(255,255,255, 0));
}

.appeal-voice-text-body {
	margin-top: min(4.533vw, 20.4px);
	font-size: min(3.2vw, 14.4px);
	line-height: 1.75;
}

.appeal-pickup {
	padding: min(15.467vw, 69.6px) 5% min(17.333vw, 78px);
}

.appeal-pickup .appeal-section-title {
	margin-bottom: min(8.533vw, 38.4px);
	font-size: min(6.4vw, 28.8px);
	color: #114667;
}

.appeal-pickup .appeal-section-title-en {
	color: var(--appeal-theme-color);
	text-transform: uppercase;
}

.appeal-pickup-list {
	display: grid;
	gap: min(4.267vw, 19.2px);
	width: min(100%, 960px);
	margin: 0 auto;
}

@media (min-width: 769px) {

	.appeal-voice {
		padding: 110px 0 125px;
		border-radius: 10px 10px 0 0;
	}
	.appeal-voice .appeal-l-container{
		width: min(90%, 1180px);
	}

	.appeal-section-title {
		margin-bottom: 35px;
		font-size: 2rem;
	}

	.appeal-section-title-en {
		font-size: 6rem;
	}

	.appeal-voice-note {
		width: min(90%, 1150px);
		margin-bottom: 75px;
		font-size: 1.4rem;
		text-align: center;
	}

	.appeal-voice-item {
		margin-top: 70px;
		padding-top: 0;
	}

	.appeal-voice-text {
		width: 55%;
		padding: 4% 5%;
	}

	.appeal-voice-item:nth-child(even) .appeal-voice-text{
		top: 8%;
		right: 0;
	}

	.appeal-voice-text-meta {
		font-size: clamp(1.2rem, 1.1vw, 1.5rem);
	}

	.appeal-voice-item .appeal-voice-img{
		margin: 0;
	}

	.appeal-voice-text-title {
		font-size: 2.2rem;
	}

	.appeal-voice-text-body {
		font-size: 1.4rem;
	}

	.appeal-pickup {
		padding: 70px 5% 80px;
	}

	.appeal-pickup-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
		width: min(82%, 1200px);
	}

	.appeal-pickup .appeal-section-title {
		font-size: 4.0rem;
	}
}

@media (min-width: 769px) and (max-width: 1279px) {
	.appeal-mv-picture {
		transform: none;
	}

	.appeal-mv-intro {
		margin-right: 0;
	}

	.appeal-mv-intro-title {
		font-size: clamp(2.4rem, 3.25vw, 3.2rem);
	}

	.appeal-voice-text {
		width: 58%;
		padding: 3% 4%;
	}

	.appeal-voice-text-title {
		font-size: clamp(1.8rem, 2.15vw, 2.2rem);
	}

	.appeal-voice-text-body {
		font-size: clamp(1.3rem, 1.7vw, 1.4rem);
	}

	.appeal-voice-image {
		height: 350px;
		object-fit: cover;
	}
}