/* harel.css
========================================*/
/* ==========================
	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;
}

/* ==========================
	base style
============================= */
html {
	overflow:auto;
	scroll-behavior:smooth;
}
@media screen and (max-width: 768px) {
	html {
		font-size:2.7777777778vw;
		-webkit-text-size-adjust:100%;
	}
}
@media print, screen and (min-width: 769px) {
	html {
		font-size:18px;
	}
}

body {
	color:#191919;
	font-family:"Noto Serif JP", serif;
	font-weight:300;
}
@media print, screen and (min-width: 769px) {
	body {
		min-width:1200px;
	}
}
@media screen and (max-width: 768px) {
	body {
		width:100vw;
	}
}

a {
	color:#191919;
}

#main {
	letter-spacing:.03rem;
}
@media screen and (max-width: 768px) {
	#main {
		line-height:1.7;
	}
}
@media print, screen and (min-width: 769px) {
	#main {
		line-height:1.6;
	}
}

@media screen and (max-width: 768px) {
	.pconly {
		display:none;
	}
}
@media print, screen and (min-width: 769px) {
	.sponly {
		display:none;
	}
}
/* ==========================
	project style
============================= */
.p-title {
	color:#f87e3d;
	letter-spacing:.05em;
}
@media print, screen and (min-width: 769px) {
	.p-title {
		font-size:1.2222222222rem;
		margin-bottom:40px;
	}
}
@media screen and (max-width: 768px) {
	.p-title {
		font-size:3.6111111111vw;
		margin-bottom:4.1666666667vw;
	}
}

/* contents
========================================*/
body {
	background-color:#ece9e1;
}

#header {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
}
@media print, screen and (min-width: 769px) {
	#header {
		background:url(../img/harel/mv_bg_pc.jpg) no-repeat center top/cover;
		height:1000px;
	}
}
@media screen and (max-width: 768px) {
	#header {
		background:url(../img/harel/mv_bg_sp.jpg) no-repeat center top/cover;
		height:138.8888888889vw;
	}
	#header img {
		width:61.8055555556vw;
	}
}

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

#main {
	font-size:1rem;
}
@media print, screen and (min-width: 769px) {
	#main {
		padding:80px 0;
	}
}
@media screen and (max-width: 768px) {
	#main {
		padding:11.1111111111vw 0;
	}
}
#main .concept-sec>p {
	margin-bottom:2em;
}
@media print, screen and (min-width: 769px) {
	#main .concept-sec {
		margin-bottom:100px;
		padding:0 100px;
	}
	#main .concept-sec>p {
		font-size:1.1111111111rem;
		line-height:1.8em;
	}
}
@media screen and (max-width: 768px) {
	#main .concept-sec {
		margin-bottom:16.6666666667vw;
		padding:0 8.3333333333vw;
	}
	#main .concept-sec>p {
		font-size:3.3333333333vw;
		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: 769px) {
	#main .concept-sec .-subsec {
		margin-top:50px;
	}
	#main .concept-sec .-subsec>h3 {
		font-size:2.3888888889rem;
		margin-bottom:70px;
	}
	#main .concept-sec .-subsec ._interiorimg {
		margin-bottom:40px;
	}
	#main .concept-sec .-subsec ._note {
		font-size:.8333333333rem;
		margin-bottom:10px;
	}
	#main .concept-sec .-subsec ._perthimg {
		margin:0 -100px;
	}
}
@media screen and (max-width: 768px) {
	#main .concept-sec .-subsec {
		margin-top:6.9444444444vw;
	}
	#main .concept-sec .-subsec>h3 {
		font-size:5.8333333333vw;
		margin-bottom:9.7222222222vw;
	}
	#main .concept-sec .-subsec ._illustimg img {
		width:61.1111111111vw;
	}
	#main .concept-sec .-subsec ._interiorimg {
		margin-right:-8.3333333333vw;
		margin-bottom:4.1666666667vw;
	}
	#main .concept-sec .-subsec ._note {
		font-size:2.2222222222vw;
		margin-bottom:1.3888888889vw;
	}
	#main .concept-sec .-subsec ._perthimg {
		margin:0 -8.3333333333vw;
	}
}
#main .concept-sec .-floorlist>li {
	margin-top:1em;
}
#main .concept-sec .-floorlist>li>dl {
	display:flex;
	flex-wrap:wrap;
}
#main .concept-sec .-floorlist>li>dl>dt {
	width:3em;
}
@media print, screen and (min-width: 769px) {
	#main .concept-sec .-floorlist {
		margin-left:auto;
		margin-right:auto;
		width:1000px;
		margin-top:120px;
		width:630px;
	}
}
@media screen and (max-width: 768px) {
	#main .concept-sec .-floorlist {
		margin-top:16.6666666667vw;
	}
}
#main .floor-sec>figure {
	text-align:center;
}
@media print, screen and (min-width: 769px) {
	#main .floor-sec {
		padding:0 250px;
	}
}
@media screen and (max-width: 768px) {
	#main .floor-sec {
		padding:0 8.3333333333vw;
	}
}
@media print, screen and (min-width: 769px) {
	#main .floor-sec .fig-list {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		margin:80px -250px 0;
	}
	#main .floor-sec .fig-list>li {
		width:33.3333333333%;
	}
}
@media screen and (max-width: 768px) {
	#main .floor-sec .fig-list {
		margin-top:5.5555555556vw;
	}
	#main .floor-sec .fig-list>li {
		margin-bottom:2.7777777778vw;
	}
	#main .floor-sec .fig-list>li:last-of-type {
		margin-bottom:0;
	}
}
#main .floor-sec .-subsec {
	position:relative;
	text-align:center;
}
#main .floor-sec .-subsec:before {
	background-color:#cdc8c6;
	content:"";
	display:block;
	position:absolute;
	top:0;
}
#main .floor-sec .-subsec>h3 {
	font-weight:500;
	text-align:center;
}
@media print, screen and (min-width: 769px) {
	#main .floor-sec .-subsec {
		margin-top:100px;
		padding-top:100px;
	}
	#main .floor-sec .-subsec:before {
		left:calc(50% - 310px);
		height:2px;
		width:620px;
	}
	#main .floor-sec .-subsec>h3 {
		font-size:1.2222222222rem;
		margin-bottom:40px;
	}
	#main .floor-sec .-subsec ._splink {
		pointer-events:none;
	}
	#main .floor-sec .-subsec>figure {
		margin:40px 0;
	}
}
@media screen and (max-width: 768px) {
	#main .floor-sec .-subsec {
		margin-top:13.8888888889vw;
		padding-top:13.8888888889vw;
	}
	#main .floor-sec .-subsec:before {
		left:0;
		height:2px;
		width:83.3333333333vw;
	}
	#main .floor-sec .-subsec>h3 {
		font-size:3.3333333333vw;
		margin-bottom:4.1666666667vw;
	}
	#main .floor-sec .-subsec>figure {
		margin:5.5555555556vw 0;
	}
}

#footer {
	text-align:center;
}
@media print, screen and (min-width: 769px) {
	#footer {
		margin-top:30px;
		padding:40px 0;
	}
}
@media screen and (max-width: 768px) {
	#footer {
		margin-top:4.1666666667vw;
		padding:5.5555555556vw 0;
	}
}
@media screen and (max-width: 768px) {
	#footer ._logo img {
		width:33.0555555556vw;
	}
}
#footer ._copyright {
	color:#86807f;
	display:block;
}
@media print, screen and (min-width: 769px) {
	#footer ._copyright {
		font-size:.6666666667rem;
		margin-top:80px;
	}
}
@media screen and (max-width: 768px) {
	#footer ._copyright {
		font-size:1.9444444444vw;
		margin-top:11.1111111111vw;
	}
}