@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');
body {
	font-family: "Zen Kaku Gothic New", sans-serif !important;
	font-style: normal;
	font-weight: 300 !important;
}
.rhd {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.top_movie {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	.main_title {
		position: absolute;
		z-index: 2;
		img {
			width: 80%;
		}
	}
}
.read {
	background: #000;
	color: #FFF;
	text-align: center;
	font-weight: 300 !important;
	position: sticky !important;
	top: 0;
}
.value {
	padding: 80px 0;
	background-image: url('images/value_bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
	position: sticky !important;
	top: 0;
}
.house {
	width: 100%;
	background: #000;
	.info {
		background: #000;
	}
}
.selection {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	background: #000;
}
.coodinate {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: 2;
	background: #000;
}
footer {
	position: relative;
	z-index: 5;
}
@media (min-width:769px) {
	.mgbp100 {
		padding-bottom: 100px !important;
	}
	.read {
		margin-top: 56vw;
		padding: 80px 0;
		.title {
			font-size: 38px;
			letter-spacing: 2px;
			margin-bottom: 30px;
			color: #DDD;
		}
		.script {
			font-size: 17px;
			line-height: 37px;
			letter-spacing: 0.5px;
			color: #DDD;
		}		
	}
	.value {
		padding: 80px 0;
		.main_title img {
			width: 350px;
			margin-bottom: 25px;
		}
		.catch_tx {
			color: #DDD;
			letter-spacing: 1.5px;
			font-size: 16px;
			font-weight: 300 !important;
			margin-bottom: 20px;
		}
		.read_tx {
			color: #DDD;
			letter-spacing: 1.5px;
			font-size: 12px;
			font-weight: 500 !important;
			margin: -10px auto 35px auto;
		}
		.mark {
			position: relative;
			display: inline-block;
			img {
				width: 440px;
			}
			span.luxe {
				position: absolute;
				top: 85px;
				left: 30px;
				img {
					width: 160px;
				}
			}
			span.protect {
				position: absolute;
				top: 85px;
				left: 235px;
				img {
					width: 190px;
				}
			}
		}
	}
	.house {
		display: flex;
		position: sticky;
		top: 0;
		.mov_title {
			background: #000;
			width: 50%;
		}
		.info {
			width: 50%;
			padding: 16vw 0;
			img {
				height: 20px;
				width: auto;
				margin-bottom: 10px;
				padding: 0 70px;
			}
			.tx_title {
				padding: 0 70px;
				font-size: 16px;
				font-weight: 300;
				letter-spacing: 1.5px;
				color: #BBB;
				margin-bottom: 20px;
			}
			.script {
				padding: 0 70px;
				font-size: 14px;
				line-height: 25px;
				color: #DDD;
				margin-bottom: 40px;
				span {
					display: block;
					font-size: 12px;
				}
			}
			.link a {
				display: inline-block;
				color: #DDD;
				padding: 0 70px;
				font-size: 14px;
			}
			.en_title {
				color: #FFF;
				font-size: 27px;
				letter-spacing: 2px;
				margin-left: 70px;
			}
		}
	}
	.rev {
		flex-direction: row-reverse;
	}
	.selection {
		background-image: url('images/selection_bg.png');
		background-size: cover;
		text-align: center;
		padding: 80px 0;
		border-top: 50px solid #000;
		border-bottom: 70px solid #000;
		p {
			color: #FFF;
			font-size: 24px;
			line-height: 40px;
			letter-spacing: 1.5px;
			font-weight: 300;
			color: #DDD;
			img {
				height: 27px;
				margin-bottom: 30px;
			}
		}
		.towa {
			position: relative;
			display: inline-block;
			span {
				position: absolute;
				font-size: 13px;
				top: 30px;
				right: 22px;
			}
		}
		.modal-open{
			font-size: 16px;
			margin-top: 30px;
			text-decoration: underline;
			text-decoration-color:#FFF;
			text-decoration-thickness: 1px;
			text-underline-offset:0.3em;
			text-decoration-skip-ink: none;
			cursor: pointer;
		}
	}
	.coodinate {
		padding: 20px;
		.catch {
			width: 920px;
			margin: auto;
			display: flex;
			justify-content: space-between;
			li:last-child {
				width: 550px;
			}
		}
		img.title_en {
			height: 18px;
			margin-bottom: 15px;
		}
		.title_jp {
			font-size: 16px;
			color: #DDD;
			margin-bottom: 20px;
		}
		.script {
			font-size: 14px;
			font-weight: 300;
			line-height: 28px;
			color: #DDD;
		}
		.list {
			width: 920px;
			margin: auto;
			padding: 50px 0;
			display: flex;
			flex-wrap: wrap;
			li {
				margin-bottom: 50px;
				width: 30%;
				margin-right: 4%;
			}
			li:nth-of-type(3n) {
				margin-right: 0%;
			}
			img.photo {
				object-fit: cover;
				height: 360px;
				width: 100%;
				margin-bottom: 10px;
			}
			.name {
				color: #DDD;
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				.rhd {
					letter-spacing: 1px;
				}
			}
			a {
				display: inline-block;
				color: #FFF;
				font-size: 13px;
				letter-spacing: 0.5px;
				margin-top: 20px;
				text-decoration: underline;
				text-decoration-color:#CCC;
				text-decoration-thickness: 1px;
				text-underline-offset:0.4em;
				text-decoration-skip-ink: none;
			}
			.yotei {
				color: #FFF;
				margin-top: 20px;
			}
		}
	}
	.about {
		background: #000;
		position: sticky;
		.toggle_contents {
			width: 1000px;
			margin: auto;
		}
		.toggle_title {
			position: relative;
			padding: 15px 0;
			cursor: pointer;
			font-size: 16px;
			text-align: center;
			line-height: 1.4;
			color: #DDD;
			letter-spacing: 1px;
		}
		.toggle_btn {
			position: absolute;
			top: 50%;
			right: 35%;
			transform: translateY(-50%);
			display: block;
			width: 24px;
			height: 24px;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
			border-radius: 50%;
		}
		.toggle_btn:before, .toggle_btn:after {
			display: block;
			content: '';
			background-color: #FFF;
			position: absolute;
			width: 15px;
			height: 1px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.toggle_btn:before {
			width: 1px;
			height: 15px;
		}
		.toggle_title.selected .toggle_btn:before {
			content: normal;
		}
		.toggle_contents dd {
			display: none;
		}
		.toggle_contents .profile {
			margin: 0 100px;
			padding: 10px 0 50px 0;
			font-size: 15px;
			line-height: 30px;
			color: #FFF;
			letter-spacing: 0.5px;
		}
	}
}
@media (max-width:768px) {w
	.mgbp100 {
		padding-bottom: 100px !important;
	}
	.top_movie {
		top: 0;
		z-index: 0;
		video {
			object-fit: cover;
			object-position: top center;
			width: 100%;
			height: 550px;
			overflow: hidden;
		}
	}
	.read {
		margin-top: 500px;
		padding: 60px 0;
		.title {
			font-size: 18px;
			letter-spacing: 2px;
			margin-bottom: 25px;
			color: #DDD;
		}
		.script {
			font-size: 12px;
			line-height: 25px;
			letter-spacing: 0.5px;
			color: #DDD;
			text-align: left;
			margin: 0 10%;
		}		
	}
	.value {
		padding: 80px 0;
		.main_title img {
			width: 80%;
			margin-bottom: 25px;
		}
		.catch_tx {
			color: #DDD;
			letter-spacing: 1.5px;
			font-size: 4vw;
			font-weight: 300 !important;
			margin-bottom: 20px;
		}
		.read_tx {
			color: #DDD;
			letter-spacing: 1.5px;
			font-size: 3vw;
			font-weight: 300 !important;
			margin: -10px auto 25px auto;
		}
		.mark {
			position: relative;
			display: inline-block;
			img {
				width: 80%;
			}
			span.luxe {
				position: absolute;
				top: 40%;
				right: 40%;
				img {
					width: 50%;
				}
			}
			span.protect {
				position: absolute;
				top: 40%;
				left: 40%;
				img {
					width: 55%;
				}
			}
		}
	}
	.house {
		.mov_title {
			position: sticky;
			top: 0;
			background: #000;
		}
		.info {
			position: sticky;
			top: 0;
			padding: 50px 20px;
			img {
				height: 15px;
				width: auto;
				margin-bottom: 10px;
			}
			.tx_title {
				font-size: 16px;
				font-weight: 300;
				letter-spacing: 1.5px;
				color: #BBB;
				margin-bottom: 20px;
			}
			.script {
				font-size: 3.6vw;
				line-height: 8vw;
				color: #DDD;
				margin-bottom: 40px;
			}
			.link a {
				color: #DDD;
			}
			.en_title {
				color: #FFF;
				font-size: 25px;
				letter-spacing: 2px;
			}
		}
	}
	.selection {
		background-image: url('images/selection_bg_sp.png');
		text-align: center;
		padding: 60px 0;
		border-top: 50px solid #000;
		border-bottom: 50px solid #000;
		p {
			color: #FFF;
			font-size: 15px;
			line-height: 26px;
			letter-spacing: 1.5px;
			font-weight: 300;
			color: #DDD;
			img {
				height: 16px;
				margin-bottom: 20px;
			}
		}
		.towa {
			position: relative;
			display: inline-block;
			span {
				position: absolute;
				font-size: 11px;
				top: 25px;
				right: 0%;
			}
		}
		.modal-open{
			font-size: 14px;
			margin-top: 40px;
			text-decoration: underline;
			text-decoration-color:#FFF;
			text-decoration-thickness: 1px;
			text-underline-offset:0.3em;
			text-decoration-skip-ink: none;
			cursor: pointer;
		}
	}
	.coodinate {
		padding: 20px;
		img.title_en {
			height: 15px;
			margin-bottom: 10px;
		}
		.title_jp {
			font-size: 16px;
			color: #DDD;
			margin-bottom: 20px;
		}
		.script {
			font-size: 13px;
			font-weight: 300;
			line-height: 28px;
			color: #DDD;
		}
		.list {
			padding: 50px 0;
			li {
				margin-bottom: 50px;
			}
			img.photo {
				object-fit: cover;
				height: 70vw;
				width: 100%;
				margin-bottom: 10px;
			}
			.name {
				color: #DDD;
				display: flex;
				justify-content: space-between;
				font-size: 15px;
				.rhd {
					letter-spacing: 1px;
				}
			}
			a {
				display: inline-block;
				color: #FFF;
				font-size: 13px;
				letter-spacing: 0.5px;
				margin-top: 20px;
				text-decoration: underline;
				text-decoration-color:#CCC;
				text-decoration-thickness: 1px;
				text-underline-offset:0.4em;
				text-decoration-skip-ink: none;
			}
			.yotei {
				color: #FFF;
				margin-top: 20px;
			}
		}
	}
	.about {
		background: #000;
		position: sticky;
		.toggle_contents {
			width: 100%;
			margin: auto;
		}
		.toggle_title {
			position: relative;
			padding: 15px 0;
			cursor: pointer;
			font-size: 15px;
			text-align: center;
			line-height: 1.4;
			color: #DDD;
			letter-spacing: 1px;
		}
		.toggle_btn {
			position: absolute;
			top: 50%;
			right: 5%;
			transform: translateY(-50%);
			display: block;
			width: 24px;
			height: 24px;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
			border-radius: 50%;
		}
		.toggle_btn:before, .toggle_btn:after {
			display: block;
			content: '';
			background-color: #FFF;
			position: absolute;
			width: 13px;
			height: 1px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.toggle_btn:before {
			width: 1px;
			height: 13px;
		}
		.toggle_title.selected .toggle_btn:before {
			content: normal;
		}
		.toggle_contents dd {
			display: none;
		}
		.toggle_contents .profile {
			margin: 0 20px;
			padding: 10px 0 50px 0;
			font-size: 14px;
			line-height: 28px;
			color: #FFF;
			letter-spacing: 0.5px;
		}
	}
}
.modal-open{
	color: #FFF;
}
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 100;
}
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
.modal-content{
	background: #fff;
	border-radius: 10px;
	text-align: left;
	padding: 30px;
	p {
		font-size: 16px;
		line-height: 30px;
		color: #333;
		font-weight: 400;
	}
}