@charset "utf-8";
/* ===================================================================

 file name  :model.css
 style info :モデルルーム

=================================================================== */

/* =============================

	overwrite

=============================== */
#content{
}
#pageHeader{
	background: url(../images/model/img_mv.jpg) no-repeat center center / cover ;
}
#pageHeader h1{	background:none;}
#pageHeader h1::after{ border-bottom-color: #302517;}
#main {padding-top: 0; padding-bottom: 0;}
#content .page-caption{padding-top: 35px;}
@media screen and (min-width: 768px){
	#content{
		background: url(../images/model/img_mv.jpg) no-repeat center center / cover fixed;
	}
	#pageHeader{
		background: none;
		padding-top: 0 !important;
		height: calc(100vh - 100px) !important;
	}
	#pageHeader .caption{
		font-size: 1.3rem;
	}
	#content .page-caption{padding-top: 55px;}
}


/* =================================== */
.page-bg{
	background: #fff;
}

#main figure{
	position: relative;
}
#main figcaption{
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0.5em;
	font-size: 1rem;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.5),
		1px 0 3px rgba(0,0,0,0.5),
		0 1px 3px rgba(0,0,0,0.5),
		-1px 0 3px rgba(0,0,0,0.5),
		0 -1px 3px rgba(0,0,0,0.5),
		0 0 5px rgba(0,0,0,0.5);
}
@media screen and (min-width: 768px){
	#main figcaption{
		font-size: 1.3rem;
	}
}

#main .lead {
	padding: 40px 0;
	background: #23201e;
	color: #c5c5c5;
}
#main .lead h2 {
	width: 70%;
	max-width: 300px;
	margin: 0 auto 30px;
	padding-bottom: 18px;
	position: relative;
}
#main .lead h2::after{
	content: '';
	background: #919191;
	width: 30px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}
#main .lead p {
	padding: 0 15px;
	text-align: center;
	margin-bottom: 30px;
	line-height: 2.25;
}
#main .lead figure {
	width: 70%;
	max-width: 300px;
	margin: 0 auto;
}
@media screen and (min-width: 768px){
	#main .lead {
		padding: 90px 0;
		background: rgba(35,32,30,0.8);
	}
	#main .lead h2 {
		width: 100%;
		max-width: 508px;
		margin: 0 auto 60px;
		padding-bottom: 48px;
	}
	#main .lead h2::after{
		width: 56px;
	}
	#main .lead p {
		margin-bottom: 80px;
		line-height: 3;
	}
	#main .lead figure {
		width: 100%;
		max-width:524px;
	}
}


#main .ttl-wrap {
	padding: 60px 40px 0 20px;
	margin-bottom: 30px;
	position: relative;
}
#main .ttl-wrap.left {
	padding: 60px 20px 0 40px;
}
#main .ttl-wrap::before,
#main .ttl-wrap::after{
	content: '';
	position: absolute;
	box-sizing: content-box;
}
#main .ttl-wrap::before{
	top: 30px;
	right: 10px;
	width: 187px;
	height: 4px;
	border-top: solid 3px #3c3124;
	border-bottom: solid 1px #3c3124;
}
#main .ttl-wrap.left::before{
	left: 10px;
}
#main .ttl-wrap::after{
	top: 20px;
	right: 20px;
	width: 0;
	height: 187px;
	border-right: solid 1px #3c3124;
}
#main .ttl-wrap.left::after{
	left: 20px;
}
#main .ttl-wrap h3 .en {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 700;
	color: #3c3124;
	font-size: 2.2rem;
}
#main .ttl-wrap h3 .ja {
	display: block;
	font-size: 1.8rem;
	margin-bottom: 1em;
}
@media screen and (min-width: 768px){
	#main .ttl-wrap {
		padding: 40px 70px 0 20px;
		margin-bottom: 70px;
	}
	#main .ttl-wrap.left {
		padding: 40px 20px 0 100px;
	}
	#main .ttl-wrap::before{
		top: -20px;
		right: 0;
		width: 250px;
		height: 5px;
	}
	#main .ttl-wrap.left::before{
		left: 0;
	}
	#main .ttl-wrap::after{
		top: -40px;
		height: 250px;
	}
	#main .ttl-wrap h3 .en {
		font-size: 3.4rem;
	}
	#main .ttl-wrap h3 .ja {
		font-size: 2.6rem;
		line-height: 1.8;
	}
	#main .ttl-wrap p{
		line-height: 2.8;
	}
}

@media screen and (min-width: 768px){
	#main .row{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-start;
	}
}


#livingdining .living{
	margin-bottom: 30px;
}
#livingdining .living .row1 figure{
	box-shadow: -25px 25px 0 #3c3124;
	margin-left: 20px;
}
#livingdining .living .row2{
	padding: 5%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-top: 30px;
}
#livingdining .living .row2 >figure{
	width: 58%;
}
#livingdining .living .row2 ul{
	width: 40%;
}
#livingdining .living .row2 ul li:first-child{
	width: calc(100% - 30px);
	margin-bottom: 10%;
	box-shadow: 20px -20px 0 #efede3;
}
#livingdining .kitchen{
	margin-bottom: 30px;
}
#livingdining .kitchen .block figure{
	width: 60%;
	margin:0 5% 0 auto;
	position: relative;
	z-index: 1;
	box-shadow: 20px 20px 0 #efede3;
}
#livingdining .kitchen > figure{
	width: 70%;
	margin: -12% 0 0 5%;
}
@media screen and (min-width: 768px){
	#livingdining .living{
		padding-top: 100px;
		margin-bottom: 100px;
	}
	#livingdining .living .row1 figure{
		width: calc(100% - 540px);
		max-width: 630px;
		margin-left: 25px;
	}
	#livingdining .living .row2{
		max-width: 980px;
		padding: 0;
		margin: 50px auto 160px;
	}
	#livingdining .living .row2 >figure{
		width: 500px;
	}
	#livingdining .living .row2 ul li:first-child{
		width: 274px;
		margin-bottom: 30px;
		box-shadow: 70px -70px 0 #efede3;
	}
	#livingdining .kitchen{
		margin-bottom: 180px;
	}
	#livingdining .kitchen .ttl-wrap{
		width: 540px;
	}
	#livingdining .kitchen .block figure{
		width: 420px;
		margin:0 0 0 100px;
		box-shadow: 25px 25px 0 #efede3;
	}
	#livingdining .kitchen > figure{
		width: calc(100% - 550px);
		max-width: 591px;
		margin:0 0 0 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px){
	#livingdining .kitchen .block figure{
		width: 400px;
	}
}

#room{
	margin-bottom: 30px;
}
#room .master{
	margin-bottom: 30px;
}
@media screen and (min-width: 768px){
	#room{
		margin-bottom: 180px;
	}
	#room .master {
		margin-bottom: 180px;
		position: relative;
	}
	#room .master .ttl-wrap {
		position: absolute;
		right: 0;
		bottom: 0;
		color: #fff;
		z-index: 2;
		margin: 0;
		padding-bottom: 30px;
	}
	#room .master .ttl-wrap .en{color: #fff;}
	#room .master .ttl-wrap::before,
	#room .master .ttl-wrap::after{
		content: none;
	}
}


#room .private.row {
	margin-bottom: 20px;
}
#room .private.row .img {
	width: 90%;
	margin: 0 auto;
}
#room ul li:nth-child(1){
	width: 44%;
	margin: 5% 0 0 10%;
	box-shadow: -20px 20px 0 #3c3124;
}
#room ul li:nth-child(2){
	position: relative;
	z-index: 1;
	width: 44%;
	margin: -10% 10% 0 auto;
	box-shadow: 40px -40px 0 #efede3;
}
@media screen and (min-width: 768px){
	#room .private.row {
		margin-bottom: 180px;
	}
	#room .private.row .img {
		width: calc(100% - 580px);
		max-width: 502px;
		margin: 0;
		position: relative;
		z-index: 5;
	}
	#room ul{
		padding-left: 130px;
		width:56%;
		margin-top: -35%;
	}
	#room ul li:nth-child(1){
		position: relative;
		width: 48.5%;
		margin: 0;
		box-shadow: none;
	}
	#room ul li:nth-child(2){
		width: 48.5%;
		margin: -20% 0 0 auto;
		box-shadow: none;
	}
	#room ul li:nth-child(1)::after{
		content: '';
		position: absolute;
		top: 35px;
		left: -25px;
		display: block;
		width: 233px;
		height: 225px;
		background: #3c3124;
		z-index: -1;
	}
	#room ul li:nth-child(2)::after{
		content: '';
		position: absolute;
		top: -100px;
		left: 100px;
		display: block;
		width: 420px;
		height: 280px;
		background: #efede3;
		z-index: -1;
	}
}


#coordinate {
	padding: 50px 0;
	background: #efede3;
}
#coordinate h3 {
	padding: 30px 0;
	position: relative;
	font-size: 1.8rem;
	text-align: center;
}
#coordinate h3::before{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 100%;
	height: 6px;
	border-top: solid 3px #3c3124;
	border-bottom: solid 1px #3c3124;
}
#coordinate h3 + p {
	margin-bottom: 2em;
	text-align: center;
}
#coordinate .block ul li {
	margin-bottom: 3%;
}
#coordinate .kousakujo {
	margin-top: 30px;
	background: #fff;
	padding:20px 15px;
}
#coordinate .kousakujo .row ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#coordinate .kousakujo .row ul li:nth-child(1){width: 50.3%;}
#coordinate .kousakujo .row ul li:nth-child(2){width: 48%;}
#coordinate .kousakujo .row .notes figure {
	width: 60%;
	max-width: 200px;
	margin: 2.5em auto 2em;
}
#coordinate .kousakujo .row .notes h4 {
	font-size: 1.8rem;
	margin-bottom: 1em;
}
#coordinate .kousakujo .row .notes p{
	font-size: 1.2rem;
}
#coordinate .kousakujo .row .notes .company{
	padding-top: 1em;
	margin-top: 1.2em;
	border-top: 1px solid #efede3;
}
#coordinate .kousakujo .row .notes .company h5{
	font-weight: 700;
	margin-bottom: 0.3em;
	font-size: 1.3rem;
	line-height: 1.3;
}
#coordinate .kousakujo .row .notes .company p{
	font-size: 1rem;
}
@media screen and (min-width: 768px){
	#coordinate {
		padding: 100px 0;
	}
	#coordinate h3 {
		padding: 80px 0 60px;
		font-size: 2.6rem;
	}
	#coordinate h3::before{
		height: 10px;
		border-top-width:4px;
	}
	#coordinate h3 + p {
		line-height: 3;
		margin-bottom: 65px;
	}
	#coordinate .block ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#coordinate .block ul li {
		width: 50%;
		margin-bottom: 0;
	}
	#coordinate .block ul li:nth-child(1){width: 63.1666%;}
	#coordinate .block ul li:nth-child(2){width: 35.6666%;}
	#coordinate .kousakujo {
		margin: 45px auto 0;
		max-width: 1000px;
		padding:30px;
	}
	#coordinate .kousakujo .row ul {
		display: block;
		width: 300px;
	}
	#coordinate .kousakujo .row ul li:nth-child(1){width: auto; margin-bottom: 10px;}
	#coordinate .kousakujo .row ul li:nth-child(2){width: auto;}
	#coordinate .kousakujo .row .notes{
		width: 600px;
	}
	#coordinate .kousakujo .row .notes figure {
		width:240px;
		max-width: 240px;
		margin: 0 0 20px;
	}
	#coordinate .kousakujo .row .notes h4 {
		font-size: 2.2rem;
		line-height: 1.5;
		margin-bottom: 0.7em;
	}
	#coordinate .kousakujo .row .notes p{
		font-size: 1.4rem;
		line-height: 1.7;
	}
	#coordinate .kousakujo .row .notes .company h5{
		font-size: 1.4rem;
	}
	#coordinate .kousakujo .row .notes .company p{
		font-size: 1.2rem;
	}
}