@charset "utf-8";

main {
	opacity: 1 !important;
}

.top-kv {
	position: relative;
	height: calc(var(--doc-height) - 75px);
	min-height: 165vw;
}
.top-kv .inner {
	position: relative;
	width: 100%;
	height: calc(100vw - 50px);
	z-index: 10;
	overflow: hidden;
}
.top-kv .inner span {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.top-kv .inner span img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}




.top-kv .inner img {
	opacity: 0;
	transform: scale(1.1);
	transition: all 2000ms ease-out;
}
.top-kv.start .inner img {
	opacity: 1;
	transform: scale(1);
}
.top-kv .inner span.ready {
	transition: all 1500ms ease-out;
}
.top-kv .inner span.hidden {
	opacity: 0;
}


.top-kv .logo {
	position: relative;
	width: 82vw;
	height: 46.13vw;
	z-index: 20;
	margin: 10px auto 0;
}
.top-kv .logo img {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: contain;
	visibility: hidden;
}
.top-kv .logo img.current {
	visibility: visible;
}
.top-kv .logo img.base {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	visibility: hidden !important;
}





.top-kv	.arrow {
	position: absolute;
	width: 72vw;
	height: 48px;
	left: 14vw;
	bottom: 30px;
	z-index: 30;
	transition: all 500ms ease-out;
}
.top-kv	.arrow a {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	text-align: center;
	color: #1e1e1e;
	font-size: 11px;
	font-family: "UniversLTPro-55Roman", sans-serif;
	letter-spacing: 1px;
	text-indent: -1px;
}
.top-kv	.arrow a::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url(../img/arrow_down.svg) 50% 100% no-repeat;
	background-size: 46px auto;
}



.top-kv	.arrow {
	opacity: 0;
}
.top-kv	.arrow.show {
	opacity: 1;
}
.top-kv .arrow.show a::after {
	animation: loopscroll infinite 2500ms ease-out;
}


@keyframes loopscroll {
	0% {
		transform: translateY(0px);
	}
	70% {
		transform: translateY(0px);
	}
	80% {
		transform: translateY(8px);
	}
	90% {
		transform: translateY(8px);
	}
	100% {
		transform: translateY(0px);
	}
}









.top-kv .ticker {
	position: relative;
	width: 100%;
	height: 50px;
	z-index: 100;
	background: #1e1e1e;
}
.top-kv .ticker .extra {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 20px;
}
.top-kv .ticker dl {
	display: flex;
	align-items: center;
	height: 50px;
	color: #fff;
}
.top-kv .ticker dt {
	display: none;
}
.top-kv .ticker dd {
	width: calc(100vw - 20px - 80px);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.top-kv .ticker dd a {
	color: #fff;
}

.top-kv .ticker .extra > a {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	right: 15px;
	top: calc(50% - 15px);
	background: url(../img/icon_close_white.svg) 50% 50% no-repeat;
	background-size: 15px auto;
}




.top-intro {
	margin: 90px 20px 0 50px;
}
.top-intro h1 {
	font-size: 22px;
}
.top-intro p {
	margin: 35px 0 0 30px;
	font-size: 14px;
	line-height: 2;
}
.top-intro p br {
	display: none;
}





.top-list {
	box-sizing: border-box;
	margin: 120px auto 0;
	padding: 0 20px;
}
.top-list h2 {
	margin: 0 0 30px;
	letter-spacing: 3px;
	font-size: 20px;
	font-family: "UniversNextPro-Thin", sans-serif;
}

.top-list + .top-list {
	margin-top: 100px;
}
.top-list .box + .box {
	margin-top: 40px;
}

.top-list .box {
	position: relative;
}





.top-list .box .image {
	display: block;
	overflow: hidden;
}
.top-list .box .image img {
	width: 100%;
	height: auto;
}



.top-list .box ul {
}
.top-list .box li {
	position: relative;
	padding: 0 0 30px;
}
.top-list .box li + li {
	margin-top: 30px;
}
.top-list .box li::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	z-index: 10;
	background: #c8c8c8;
}
.top-list .box dl {
	margin: 25px 0 0;
}
.top-list .box dt {
	letter-spacing: 4px;
	line-height: 1.5;
	font-size: 28px;
	font-family: "UniversNextPro-Thin", sans-serif;
}
.top-list .box dd {
	margin: 5px 0 0;
	text-align: right;
}
.top-list .box dd span {
	position: relative;
	display: inline-block;
	padding: 0 48px 0 0;
	font-size: 12px;
}
.top-list .box dd span em {
	position: absolute;
	display: block;
	width: 42px;
	height: 6px;
	right: 0;
	top: calc(50% - 4px);
	background: url(../img/arrow_long.svg) 50% 50% no-repeat;
	background-size: 100% auto;
}

.top-list.top-villas .box dt {
	min-height: 84px;
}



.top-column {
	box-sizing: border-box;
	margin: 100px auto 0;
	padding: 0 20px;
}
.top-column .header {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 15px;
	border-bottom: 1px solid #c8c8c8;
}
.top-column .header h2 {
	font-size: 14px;
	font-weight: 400;
	font-family: "FP-ヒラギノ角ゴ ProN W6", sans-serif;
}


.top-column .header nav {
	position: absolute;
	right: 0;
	top: 2px;
}
.top-column .header nav a {
	position: relative;
	display: inline-block;
	padding: 0 48px 0 0;
	font-size: 12px;
	font-family: "UniversLTPro-55Roman", sans-serif;
	cursor: pointer;
}
.top-column .header nav a em {
	position: absolute;
	display: flex;
	width: 42px;
	height: 8px;
	right: 0;
	top: calc(50% - 5px);
	background: url(../img/arrow_right_thin.svg) 50% 50% no-repeat;
	background-size: 40px auto;
	transition: all 300ms ease-out;
}

.top-column .map img {
	width: 100%;
	height: auto;
}


.top-news .header {
	margin-bottom: 0;
	border-bottom: none;
}
.top-news .news-list {
	margin-top: 0;
}



.top-access {
	margin-bottom: 100px;
}
.top-access p {
	line-height: 2;
	font-size: 14px;
}
.top-access .link {
	margin: 20px 0 0;
}
.top-access .link a {
	font-size: 14px;
	font-family: "UniversLTPro-55Roman", sans-serif;
	text-decoration: underline;
}
.top-access .link a:hover {
	text-decoration: none;
}



.top-map {
	position: relative;
}
.top-map .map {
	position: relative;
	margin: 0 -20px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.top-map .map img {
	width: 720px;
	margin-left: 20px;
}

.top-map .scroll {
	position: absolute;
	width: 86px;
	right: 0;
	top: 80px;
	z-index: 10;
	color: #1e1e1e;
	font-size: 10px;
}
.top-map .scroll::after {
	position: absolute;
	content: "";
	display: block;
	width: 52px;
	height: 1px;
	right: 0;
	top: 5px;
	background: #1e1e1e;
}










.top-intro h1 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 300ms;
}
.top-intro  p {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 800ms;
}
.top-intro.show h1,
.top-intro.show p {
	opacity: 1;
	transform: translateY(0);
}


.top-list h2 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
.top-list.show h2 {
	opacity: 1;
	transform: translateY(0);
}

.top-list li {
	opacity: 0;
	transition: all 1000ms ease-out 0ms;
}
.top-list li.show {
	opacity: 1;
	transform: translateY(0);
}

.top-list .box .image img {
	opacity: 0;
	transform: scale(1.1);
	transition: all 1000ms ease-out 0ms;
}
.top-list .box .image.show img {
	opacity: 1;
	transform: scale(1);
}




.top-map .header {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
.top-map .map,
.top-map .scroll {
	opacity: 0;
	transition: all 800ms ease-out 500ms;
}
.top-map .scroll {
	transition-delay: 1000ms;
}
.top-map.show .header {
	opacity: 1;
	transform: translateY(0);
}
.top-map.show .map,
.top-map.show .scroll {
	opacity: 1;
}




.top-news .header,
.top-news ul {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
.top-news.show .header,
.top-news.show ul {
	opacity: 1;
	transform: translateY(0);
}

.top-news li {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out;
}
.top-news.show li {
	opacity: 1;
	transform: translateY(0);
}
.top-news li:nth-child(1) {
	transition-delay: 500ms;
}
.top-news li:nth-child(2) {
	transition-delay: 800ms;
}
.top-news li:nth-child(3) {
	transition-delay: 1100ms;
}



.top-access .header {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
.top-access p,
.top-access .link {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 500ms;
}

.top-access.show .header,
.top-access.show p,
.top-access.show .link {
	opacity: 1;
	transform: translateY(0);
}









/* ---------- */
/* English */

html:lang(en) .top-intro h1 {
	font-weight: normal;
	font-family: "UniversLTPro-65Bold", sans-serif;
	line-height: 1.4;
}

html:lang(en) .top-column .header h2 {
	font-family: "UniversLTPro-65Bold", sans-serif;
}

html:lang(en) .top-list .box dd span {
	font-size: 14px;
}