/* lp-harel.css
========================================*/
/* module */
/* ==========================
	default style
============================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}

h1, h2, h3, h4, h5, h6, em, address, small {
	font-size:100%;
	font-style:normal;
	font-weight:normal;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

th {
	font-weight:normal;
	text-align:left;
	vertical-align:top;
}

ul, ol, li {
	list-style-type:none;
}

img {
	border:0;
	vertical-align:bottom;
	max-width:100%;
}

a img {
	vertical-align:middle;
}

a {
	display:inline-block;
	text-decoration:none;
}

strong {
	font-size:100%;
	font-style:normal;
	font-weight:bold;
}

button, input[type=submit] {
	background:none;
	border:0;
	padding:0;
}

input[type=text], input[type=email], input[type=tel], textarea {
	border-radius:0;
	outline:none;
}

input[type=radio], input[type=checkbox] {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	display:none;
}

select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius:0;
}

* {
	box-sizing:border-box;
}

/* font reset */
body {
	font-family:sans-serif;
	line-height:1;
}

input, button, textarea, select {
	color:inherit;
	font:inherit;
}

/* HTML5 */
article, aside, figure, figcaption, footer, header, nav, section, main, picture {
	display:block;
	margin:0;
	padding:0;
}

/* ==========================
	project style
============================= */
@media print, screen and (min-width: 768px) {
	.p-title {
		margin-bottom:3.125vw;
	}
}
@media screen and (max-width: 767px) {
	.p-title {
		margin-bottom:8vw;
	}
}
.p-title._wave {
	background-image:url(../img/common/line_wave.svg);
	text-align:center;
}
.p-title._wave>span {
	font-family:"Montserrat", sans-serif;
	background-color:#fffcfa;
	color:#db7f4d;
	display:inline-block;
	font-weight:600;
	line-height:2;
	padding:0 .5em;
}
@media print, screen and (min-width: 768px) {
	.p-title._wave {
		background-size:16.3541666667vw 3.8020833333vw;
		font-size:2rem;
		height:3.8020833333vw;
		animation:wavePc 8s infinite linear;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.p-title._wave {
		line-height:1;
	}
	.p-title._wave>span {
		line-height:1.4;
	}
}
@media screen and (max-width: 767px) {
	.p-title._wave {
		background-size:52.8vw 12.2666666667vw;
		font-size:6.4vw;
		height:12.2666666667vw;
		animation:waveSp 6s infinite linear;
	}
}
.p-title._orange {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	background-image:url(../img/common/bg_title_orange.svg);
	background-size:100% 100%;
	color:#fff;
	font-weight:500;
	line-height:1.2;
	text-align:center;
}
.p-title._orange>span {
	display:inline-block;
	line-height:1.2;
	margin-left:.5em;
	padding-top:.2em;
}
@media print, screen and (min-width: 768px) {
	.p-title._orange {
		font-size:2rem;
		height:61px;
	}
	.p-title._orange>span {
		font-size:1.25rem;
	}
}
@media screen and (max-width: 767px) {
	.p-title._orange {
		font-size:7.4666666667vw;
		height:16vw;
	}
	.p-title._orange>span {
		font-size:4.8vw;
	}
}

@keyframes wavePc {
	0% {
		background-position:0 0;
	}
	100% {
		background-position:16.3541666667vw 0;
	}
}
@keyframes waveSp {
	0% {
		background-position:0 0;
	}
	100% {
		background-position:52.8vw 0;
	}
}
.p-button {
	font-family:"Montserrat", sans-serif;
	background-color:#db7f4d;
	color:#fff;
	display:table;
	line-height:1.2;
}
.p-button:after {
	background-image:url(../img/common/arrow_01.svg);
	background-repeat:no-repeat;
	background-size:cover;
	content:"";
	display:inline-block;
}
.p-button._white {
	background:transparent;
	border-color:#db7f4d;
	border-style:solid;
	color:#db7f4d;
}
.p-button._white:after {
	background-image:url(../img/common/arrow_02.svg);
}
@media print, screen and (min-width: 768px) {
	.p-button {
		border-radius:25px;
		font-size:1.25rem;
		margin:40px auto 0;
		padding:12px 25px;
		transition:.5s ease;
	}
	.p-button:hover {
		opacity:.7;
	}
	.p-button:after {
		margin-left:12px;
		height:12px;
		width:25px;
	}
	.p-button._sm {
		font-size:1.125rem;
	}
	.p-button._white {
		border-width:2px;
	}
}
@media screen and (max-width: 767px) {
	.p-button {
		border-radius:6.6666666667vw;
		font-size:4.8vw;
		margin:8vw auto 0;
		padding:2.6666666667vw 6.6666666667vw;
	}
	.p-button:after {
		margin-left:3.2vw;
		height:2.9333333333vw;
		width:6.1333333333vw;
	}
	.p-button._white {
		border-width:.5333333333vw;
	}
}

body {
	background-color:#ece9e1;
	color:#191919;
	font-family:"Noto Serif JP", serif;
	font-weight:300;
	letter-spacing:.05em;
}

#header {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
#header .p-button {
	background-color:rgba(255, 255, 255, .25);
	color:#f87e3d;
	display:table;
	font-family:"Noto Serif JP", serif;
	font-weight:600;
	letter-spacing:.2em;
	margin:0 auto;
	text-align:center;
}
#header .p-button:after {
	background-image:url(../img/common/arrow_02.svg);
}
@media print, screen and (min-width: 768px) {
	#header {
		background:url(../img/lp-harel/mv_bg_pc.jpg) no-repeat center top/cover;
		height:1000px;
	}
	#header .p-button {
		border-radius:30px;
		margin-top:60px;
		padding:20px 25px;
		width:450px;
	}
	#header .p-button:after {
		margin-left:30px;
		height:14px;
		width:32px;
	}
}
@media screen and (max-width: 767px) {
	#header {
		background:url(../img/lp-harel/mv_bg_sp.jpg) no-repeat center top/cover;
		height:133.3333333333vw;
	}
	#header img {
		width:59.4666666667vw;
	}
	#header .p-button {
		border-radius:8vw;
		margin:8vw auto 0;
		padding:3.2vw 10.6666666667vw;
	}
}

.wrapper {
	background-color:#fff;
}
@media print, screen and (min-width: 768px) {
	.wrapper {
		margin:auto;
		width:1200px;
	}
}

#main {
	font-size:1rem;
}
@media print, screen and (min-width: 768px) {
	#main {
		padding:80px 0;
	}
}
@media screen and (max-width: 767px) {
	#main {
		padding:10.6666666667vw 0;
	}
}
#main .concept-sec>p {
	margin-bottom:2em;
}
@media print, screen and (min-width: 768px) {
	#main .concept-sec {
		margin-bottom:100px;
		padding:0 100px;
	}
	#main .concept-sec>p {
		font-size:1.25rem;
		line-height:1.8em;
	}
}
@media screen and (max-width: 767px) {
	#main .concept-sec {
		margin-bottom:16vw;
		padding:0 8vw;
	}
	#main .concept-sec>p {
		font-size:3.2vw;
		line-height:1.8em;
	}
}
#main .concept-sec .-subsec>h3 {
	text-align:center;
}
#main .concept-sec .-subsec>figure {
	text-align:center;
}
#main .concept-sec .-subsec ._note {
	color:#86807f;
	text-align:right;
}
@media print, screen and (min-width: 768px) {
	#main .concept-sec .-subsec {
		margin-top:50px;
	}
	#main .concept-sec .-subsec>h3 {
		font-size:2.6875rem;
		margin-bottom:70px;
	}
	#main .concept-sec .-subsec ._interiorimg {
		margin-bottom:40px;
	}
	#main .concept-sec .-subsec ._note {
		font-size:.9375rem;
		margin-bottom:10px;
	}
	#main .concept-sec .-subsec ._perthimg {
		margin:0 -100px;
	}
}
@media screen and (max-width: 767px) {
	#main .concept-sec .-subsec {
		margin-top:6.6666666667vw;
	}
	#main .concept-sec .-subsec>h3 {
		font-size:5.6vw;
		margin-bottom:9.3333333333vw;
	}
	#main .concept-sec .-subsec ._illustimg img {
		width:58.6666666667vw;
	}
	#main .concept-sec .-subsec ._interiorimg {
		margin-right:-8vw;
		margin-bottom:4vw;
	}
	#main .concept-sec .-subsec ._note {
		font-size:2.1333333333vw;
		margin-bottom:1.3333333333vw;
	}
	#main .concept-sec .-subsec ._perthimg {
		margin:0 -8vw;
	}
}
#main .explan-sec {
	margin-top:5rem;
}
#main .explan-sec>p {
	line-height:1.8;
	margin-bottom:3em;
}
@media print, screen and (min-width: 768px) {
	#main .explan-sec>p {
		font-size:1.25rem;
	}
}
@media screen and (max-width: 767px) {
	#main .explan-sec>p {
		font-size:3.4666666667vw;
	}
}
#main .explan-ttl {
	margin-bottom:1em;
}
@media print, screen and (min-width: 768px) {
	#main .explan-ttl {
		display:flex;
		flex-wrap:wrap;
		align-items:flex-end;
	}
	#main .explan-ttl .p-harelttl {
		margin-right:2em;
		padding-bottom:1em;
	}
}
@media screen and (max-width: 767px) {
	#main .explan-ttl .p-harelttl {
		margin-bottom:0;
	}
	#main .explan-ttl img {
		display:table;
		margin:auto;
		width:26.6666666667vw;
	}
}
@media print, screen and (min-width: 768px) {
	#main .explan-img {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		margin:0 -50px;
	}
	#main .explan-img>figure {
		width:540px;
	}
}
@media screen and (max-width: 767px) {
	#main .explan-img>figure {
		margin:0 -2.6666666667vw 2.6666666667vw;
	}
}
@media print, screen and (min-width: 768px) {
	#main .explan-list {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		margin-top:80px;
		padding:0 80px;
	}
	#main .explan-list>li {
		margin-bottom:80px;
		width:370px;
	}
}
@media screen and (max-width: 767px) {
	#main .explan-list {
		margin-top:16vw;
	}
	#main .explan-list>li {
		margin:0 auto 13.3333333333vw;
		width:74.6666666667vw;
	}
}
#main .floor-sec {
	margin-bottom:7rem;
}
#main .floor-sec>figure {
	text-align:center;
}
#main .floor-sec .p-harelttl {
	margin-bottom:6rem;
}
#main .floor-sec .-access-txt {
	display:table;
	line-height:1.5;
	margin:5rem auto 7rem;
}
@media print, screen and (min-width: 768px) {
	#main .floor-sec {
		padding:0 200px;
	}
	#main .floor-sec .-access-txt {
		font-size:1.25rem;
	}
}
@media screen and (max-width: 767px) {
	#main .floor-sec {
		padding:0 8vw;
	}
	#main .floor-sec .-access-txt {
		font-size:3.7333333333vw;
	}
}
#main .button-list .p-button {
	display:table;
	font-family:"Noto Serif JP", serif;
	font-weight:600;
	letter-spacing:.1em;
	margin:0 auto;
	text-align:center;
}
@media print, screen and (min-width: 768px) {
	#main .button-list {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:25px 0;
	}
	#main .button-list .p-button {
		margin:0 20px;
		width:380px;
	}
	#main .button-list .p-button._wide {
		width:800px;
	}
}
@media screen and (max-width: 767px) {
	#main .button-list .p-button {
		margin:0 auto 5.3333333333vw;
		width:74.6666666667vw;
	}
}
#main .p-harelttl {
	color:#f87e3d;
	letter-spacing:.1em;
}
@media print, screen and (min-width: 768px) {
	#main .p-harelttl {
		font-size:1.375rem;
		margin-bottom:40px;
	}
}
@media screen and (max-width: 767px) {
	#main .p-harelttl {
		font-size:4.2666666667vw;
		margin-bottom:8vw;
	}
}

#floating {
	position:fixed;
	right:0;
	z-index:10;
}
#floating ul {
	display:flex;
	flex-wrap:wrap;
}
#floating ul>li>a {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	color:#fff;
}
#floating ul>li._facility>a {
	background-color:#e3763e;
}
#floating ul>li._reserve>a {
	background-color:#e3a43e;
}
@media print, screen and (min-width: 768px) {
	#floating {
		top:22%;
	}
	#floating ul {
		flex-direction:column;
		gap:15px 0;
	}
	#floating ul>li>a {
		border-radius:10px 0 0 10px;
		font-size:1.5rem;
		letter-spacing:.15em;
		writing-mode:vertical-rl;
		height:260px;
		width:55px;
		transition:.5s ease;
	}
	#floating ul>li>a:hover {
		opacity:.7;
	}
	#floating._fee ul>li>a {
		font-size:24px;
	}
}
@media screen and (max-width: 767px) {
	#floating {
		padding:0 2.6666666667vw;
		bottom:0;
		width:100%;
	}
	#floating ul {
		justify-content:space-between;
	}
	#floating ul>li>a {
		border-radius:10px 10px 0 0;
		font-size:5.3333333333vw;
		letter-spacing:.1em;
		padding:3.4666666667vw 0 3.2vw;
		width:45.3333333333vw;
	}
}

#footer {
	text-align:center;
}
@media print, screen and (min-width: 768px) {
	#footer {
		margin-top:30px;
		padding:40px 0;
	}
}
@media screen and (max-width: 767px) {
	#footer {
		margin-top:4vw;
		padding:5.3333333333vw 0;
	}
}
@media screen and (max-width: 767px) {
	#footer ._logo img {
		width:31.7333333333vw;
	}
}
#footer ._copyright {
	color:#86807f;
	display:block;
}
@media print, screen and (min-width: 768px) {
	#footer ._copyright {
		font-size:.75rem;
		margin-top:80px;
	}
}
@media screen and (max-width: 767px) {
	#footer ._copyright {
		font-size:1.8666666667vw;
		margin-top:10.6666666667vw;
	}
}