@charset "UTF-8";
/* ######################################################################################

　ルームプラン

###################################################################################### */
@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&family=Zen+Kaku+Gothic+New&display=swap');

/* ====================================================
  共通
==================================================== */
.pageRoom .wallBelt.roomplan{
    margin-bottom: 60px;
	padding-top: 0;
}
.contents.nmb { padding-bottom: 0 !important;}
.view {margin:50px auto 0; text-align: center;}
.view img { height: auto;}
.wide_w { width: 100%;}
ul.roombtn {display: flex; justify-content:center; flex-wrap: wrap; align-items: flex-end; }
ul.roombtn li { margin:0 5px 15px; width: 20%;}

ul.listroombtn {display: flex; /*justify-content:space-between;*/ justify-content: center; flex-wrap: wrap; align-items: flex-end;}
ul.listroombtn li { width: 14%; margin: 1px;}
ul.listroombtn li a {transition: .5s;}
ul.listroombtn li a:hover { opacity: 0.4;}
ul.listroombtn li.sp { display: none;}
ul.listroombtn li img { }
ul.listroombtn li a img { opacity: 1;}
ul.listroombtn li span img { opacity: 0.3;}

.pdf { display: block; margin-top: 30px;}
a.pdf:hover { opacity: 0.5;}
a.pdf {
    display: block;
    background:radial-gradient(circle, rgba(121, 114, 78, 1) 0%, rgba(71, 63, 37, 1) 100%);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 20px;
	border-radius: 4px;
}


/*グレーアウト*/
a.soon {pointer-events: none;}
a.soon img{/*filter: grayscale(100%)*/ opacity: 0.25 !important;}



/* ====================================================
  attention
==================================================== */
.pageRoom .attentionList li{font-size: 70%; line-height: 1.7;}

@media print, screen and (min-width: 768px) {
	.pageRoom .attention{text-align: left; padding: 3em 15px 0;}
}
@media screen and (max-width: 767px) {
		.pageRoom .attention{text-align: left; padding: 15px;}
}

.pageRoom .updateBox {
	padding: 20px;
	text-align: center;
	font-size: 90%;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
	margin-top: 30px;
}
.pageRoom .updateBox .contents { padding: 30px;}
@media screen and (max-width: 810px) {
	.pageRoom .updateBox .contents { line-height: 1.5;}
}

@media print, screen and (min-width: 809px) {
	.pageRoom .type{display: flex;	justify-content: space-between; margin-bottom: 40px;}
	.pageRoom .type .plan_Item{max-width: 350px; width: 30%;}
	.pageRoom .type .plan_Img{max-width: 800px; width: 67%; text-align: center;}
	.pageRoom .type .plan_Item h3.spec {margin-bottom: 40px;}
	.pageRoom .type .plan_Item p.tori {}
	.pageRoom .type .plan_Item p{margin-bottom: 15px;}	
	
	.pageRoom .typeW { margin-bottom: 40px;}
	.pageRoom .typeW .plan_Item{
		display: flex;
		justify-content:space-between;
		align-items: flex-end;
		margin-bottom: 40px;
		border-bottom: solid 2px #ccc;
		padding-bottom: 30px;
	}
	.pageRoom .typeW .plan_Item a.pdf { display: block; width: 100%; padding: 20px 60px;}
	
}
@media screen and (max-width: 810px) {
	.pageRoom .view { width: 90%; margin:40px auto 0;}
	.pageRoom .type{display:flex; flex-wrap: wrap; margin-bottom: 30px;width: 100%;}
	.pageRoom .type .plan_Item{display: contents;}
	.pageRoom .type .plan_Item h3{width: 100%;}
	.pageRoom .type .plan_Item p{width: 100%; margin-top: 30px;}
	.pageRoom .type .plan_Item p a{margin-bottom: 40px;width: 100%;display: block;}
	.pageRoom .type .plan_Img {margin-bottom: 30px; }
	.pageRoom .type img{width: 100%!important; height: auto;}
	
	ul.listroombtn li.pc { display: none;}
	ul.listroombtn li.sp { display: block; width: 100%;}
	ul.listroombtnG li.pc { display: none;}
	ul.listroombtnG li.sp { display: block; width: 100%;}
	ul.listroombtn li { display: inline-block; width: 30%; margin: 3px;}
	ul.roombtn { text-align: left; display: flex; justify-content: center; flex-wrap: wrap;}
	ul.roombtn li { display: block; width: 47%; text-align: center; margin-bottom: 10px;}
	.pageRoom .updateBox { margin-top: 0;}
}




/* ====================================================
  multicloset
==================================================== */
.multicloset{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.multicloset .photo{ width: 40%; position: relative;}
.multicloset .photo img { width: 100%; height: auto;}
/*.multicloset .photo:after {
	content: "※当社施工例";
    font-size: 12px;
    color: #fff;
    position: absolute;
    right: 1em;
    bottom: 0.3em;
}*/
.multicloset .text{
	text-align: center;
	width: 55%;
}
.multicloset .text h3 {
	font-size: clamp(18px, 2.25vw, 28px);
    line-height: 1.43;
    color: #564f32;
    margin-bottom: 1em;
	font-weight: normal;
}
.multicloset .text h3 span {
	display: block;
	font-size: 60%;
    font-weight: normal;
}

.multicloset .text p {
	font-size: 110%;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.multicloset .text ul {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.multicloset .text ul li {
	padding:0.5em 1.25em;
	background: #564f32;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 160%;
	margin: 0 5px;
}
.multicloset .text ul li:after {
	content: "";
    display: block;
    position: absolute;
    inset: 2px;
    z-index: 1;
    border: 1px solid #fff;
}

/* youtube
-------------------------------------*/
.youtube-box{
}
.youtube {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  clear: both;
}
.youtube iframe {
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
}
.youtube-box h3 {
	font-size: clamp(18px, 2.25vw, 28px);
	color: #666;
	font-weight: normal;
	position: relative;
}
.youtube-box h3:before {
	content: "";
	position: absolute;
	left: 4.5em;
	top: calc(50% - 0.55em);
	background: url("../../images/original/movieicon.svg") no-repeat center left;
	background-size: contain;
	vertical-align: middle;
	width: 1.5em;
	height: 1.25em;
	filter: invert(56%) sepia(12%) saturate(748%) hue-rotate(3deg) brightness(89%) contrast(83%);
}

@media print, screen and (min-width: 768px) {
  .youtube-box{
    /*padding: 0 4.167% 3em;*/
	margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .youtube-box{
    padding: 0 3% 5%;
	margin-top: 20px;
  }
}

@media print, screen and (max-width: 767px) {
	.multicloset { display: block;}
	.multicloset.contents { padding-top: 0;}
	.multicloset .photo,
	.multicloset .text { width: 100%;}
	.multicloset .photo { margin-bottom: 25px;}
	.multicloset .text ul { display: block;}
	.multicloset .text ul li { width: 100%; padding: 0.5em; font-size: 150%; margin-bottom: 5px;}
	.youtube-box h3:before { left: 5.5em;}
}


/*間取りトップボタンテキスト化*/
.roombtn li.list { width: 24%;}
.roombtn li.list.model:before {
	content: "モデルルームタイプ";
	display: block;
	background: #887753;
	color: #fff;
	font-size: 115%;
	padding: 3px;
}
.roombtn li.list a { display: block; padding: 10px; background: linear-gradient(45deg, #101119, #005939 52%, #101119); color: #fff; transition: .5s filter;}
.roombtn li.list .type {
	font-size: 250%;
	border-bottom: solid 1px #f5f5f5;
	padding-bottom: 8px;
	display: block;
	margin-bottom: 0;
	line-height: 1;
	font-family: "Ibarra Real Nova", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.roombtn li.list .type span { font-size: 65%; margin-right: 15px;}
.roombtn li.list .original { font-size: 80%;}
.roombtn li.list .menseki {
	font-size: 220%;
	font-family: "Google Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
    "GRAD" 0;
	line-height: 1;
}
.roombtn li.list .menseki span { font-size: 45%; font-family: "Noto Serif JP", serif; margin: 0 3px;}

.roombtn li.list a:hover {background: linear-gradient(45deg, #005939, #101119 52%, #005939); color: #fff; filter: brightness(120%) saturate(160%);}

@media print, screen and (max-width: 767px) {
	.roombtn li.list { width: 100%; display: block;}

}

.listroombtn li {
	line-height: 1;
	border: solid 2px #005939;
	/*display: flex;*/
	justify-content: space-between;	
	color: #005939;
	align-items: end;
}
.listroombtn li a { padding:20px 10px; background: #fff; width: 100%; display: flex; justify-content:space-between; align-items: end; color: #005939;}
.listroombtn li a:hover {background: linear-gradient(45deg, #101119, #005939 52%, #101119); color: #fff; opacity: 1 !important;}
.listroombtn li.active a { color: #fff; background: linear-gradient(45deg, #101119, #005939 52%, #101119); }
.listroombtn li .type {
	font-family: "Google Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
    "GRAD" 0;
	display: inherit;
	margin: 0;
    font-size: 230%;
	line-height: 1;
	align-items: baseline;
}
.listroombtn li .type span { font-size: 50%; }
.listroombtn li .ldk {
	font-family: "Ibarra Real Nova", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 185%;
}

.listroombtn li:first-of-type:before {
	content: "モデルルームタイプ";
	display: block;
	background: #564f32;
	color: #fff;
	font-size: 115%;
	padding: 3px;
}
.listroombtn li:first-of-type.active { border: none;}
@media print, screen and (max-width: 767px) {
	ul.listroombtn li { width: 48%;}
	.listroombtn li a { padding: 15px 10px;}
	.listroombtn li .type { font-size: 280%;}
	.listroombtn li .ldk { font-size:240%; }
}

/*間取り詳細のスペックテテキスト化*/
.plan_Item .s_type {
	font-family: "Ibarra Real Nova", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	margin: 0;
    font-size: 500%;
	line-height: 1.5;
	color: #564f32;
	border-bottom: solid 1px #ccc;
}
.plan_Item .s_type span { font-size: 60%;}
.plan_Item .s_ldk {
	font-family: "Ibarra Real Nova", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: 400%;
	border-bottom: solid 1px #ccc;
	line-height: 1.5;
}
.plan_Item .s_ldk span { font-size: 60%;}
.plan_Item .s_original { text-align: left; padding: 10px 0; border-bottom: solid 1px #ccc; font-size: 120%;}
ul.s_menseki { text-align: left; padding: 10px 0; font-size: 110%; margin-bottom: 20px;}
ul.s_menseki li { font-size: 120%;}
ul.s_menseki li em { font-size: 80%; font-style: normal;}

.plan_Item p.modelroomtype { background: #564f32; color: #fff; padding: 5px; font-size: 30%; font-weight: normal;}

@media print, screen and (max-width: 767px) {
	.plan .type { display: block;}
	.plan_Item p.modelroomtype { margin-top: 0 !important;}
}


.pageRoom .doublebtn ul li { color: #000;}

.pageRoom .loantext { font-size: 80%; margin-top: 30px; line-height: 1.8;}

/*メニュープラン切り替え*/
.pageRoom .planchange{}
.pageRoom .planchange ul {
	display: flex;
	justify-content: center;
}
.pageRoom .planchange ul li { width: 20%; margin: 15px; font-size: 130%; position: relative;}
.pageRoom .planchange ul li a { display: block; opacity: 0.7; position: relative; }
.pageRoom .planchange ul li a:hover { text-decoration: none; opacity: 1;}
.pageRoom .planchange ul li a.active { opacity: 1;}
.pageRoom .planchange .basic span,
.pageRoom .planchange .menupaid span,
.pageRoom .planchange .modelroom span{ display: block; padding: 10px;}

.pageRoom .planchange .basic a span.typename{ background: #005939; border:#005939 1px solid; color: #fff; }
.pageRoom .planchange .basic a span.typename2{ background: #fff; border: solid 1px #005939; color: #005939;}


.pageRoom .planchange .menupaid a span.typename{ background: #CD3E41; border:#CD3E41 1px solid; color: #fff; }
.pageRoom .planchange .menupaid a span.typename2{ background: #fff; border: solid 1px #CD3E41; color: #CD3E41;}

.pageRoom .planchange .modelroom a span.typename{ background: #41a39c; border:#41a39c 1px solid; color: #fff; }
.pageRoom .planchange .modelroom a span.typename2{ background: #fff; border: solid 1px #41a39c; color: #41a39c;}

.pageRoom .planchange ul li a:after {
	content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    top: 100%;
    margin: auto;
    width: 14px;
    height: 10px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    pointer-events: none;
}

.pageRoom .planchange li.basic a:after { background: #005939;}
.pageRoom .planchange li.menupaid a:after { background: #CD3E41;}
.pageRoom .planchange li.modelroom a:after { background: #41a39c;}

@media screen and (max-width: 767px) {
	.pageRoom .planchange ul li { width: 48%; margin: 15px 2px;}

}

/*モデルルームプラン*/
.modelplan{}
.modelplan .copy h3 { font-size: 3.5em; color: #3f3a34; font-weight: normal; letter-spacing: 0.075em;}
.modelplan .copy h3 span {
	font-family: "Google Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	padding-right: 15px;
}
.modelplan .copy p { font-size: 1.35em;}
.modelplan p.icon {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 15px;
	align-items: center;
}
.modelplan p.icon span.text { width: 47%; font-size: 1.15em;}
.modelplan p.icon span.iconimg { width: 30%;}


.modelplan .modelpoint { margin-top: 50px;}
.modelplan .modelpoint ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.modelplan .modelpoint ul li { margin-bottom: 50px;}
.modelplan .modelpoint ul li h4 {
	font-weight: normal;
	font-size: 1.5em;
	letter-spacing: 0.2rem;
	background:linear-gradient(transparent 60%, #eeebe7 60%);
	display: block;
	text-align: left;
	line-height: 1.25;
	margin-bottom: 15px;
	padding-left: 8px;
}
.modelplan .modelpoint ul li h4 span.number {
	font-family: "Aoboshi One", serif;
	font-weight: 400;
	font-style: normal;	
	font-size: 1.7em;
}
.modelplan .modelpoint ul li h5 { font-size: 1.4em; text-align: left;}
.modelplan .modelpoint ul li p { text-align: left; font-size: 1.15em;}
.modelplan .modelpoint ul li .flex {
	display: flex;
	/*justify-content: center;*/
	justify-content: space-between;
	align-items: flex-start;
}
.modelplan .modelpoint ul li img { margin-bottom: 20px;}
.modelplan .modelpoint ul li.one .flex .left,
.modelplan .modelpoint ul li.one .flex .right { padding: 0 15px;}
.modelplan .modelpoint ul li.one .flex img { width: 80%; height: auto;}
.modelplan .modelpoint ul li.one .flex .left {border-right: dotted 1px;}
.modelplan .modelpoint ul li.one .flex .right {padding-top: 30px;}

.modelplan .modelpoint ul li.two .flex .left { padding: 0 15px 0 0;}
.modelplan .modelpoint ul li.two .flex .right { padding: 0 0 0 15px;}
.modelplan .modelpoint ul li.two .flex img { width: 100%; height: auto;}

/*.modelplan .modelpoint ul li.two { width: 50%;}*/
.modelplan .modelpoint ul li.three { width: 47%; margin-right: 5%;}
.modelplan .modelpoint ul li.four { width: 48%;}

.modelplan .modelpoint ul li.five { width: 75%; margin-right: 5%;}
.modelplan .modelpoint ul li.five .flex .left { padding: 0 15px 0 0;}
.modelplan .modelpoint ul li.five .flex .right { padding: 0 0 0 15px;}
.modelplan .modelpoint ul li.five .flex img { width: 100%; height: auto;}

.modelplan .modelpoint ul li.six { width: 20%;}

.modelplan .modelpoint ul li.seven { width: 57%;}
.modelplan .modelpoint ul li.eight { width: 40%; margin-left: 3%;}
.modelplan .modelpoint ul li.eight img { width: 100%; margin: auto; margin-bottom: 10px;}
.modelplan .modelpoint ul li.eight .img:last-of-type img { width: 67%; margin: auto; margin-top: 15px;}
.modelplan .modelpoint ul li.eight p span { font-size: 80%; display: block;}

.modelplan .modelpoint ul li.nine,
.modelplan .modelpoint ul li.ten{ width: 48%;}
.modelplan .modelpoint ul li.nine img,
.modelplan .modelpoint ul li.ten img { width: 74%;}

@media screen and (max-width: 767px) {
	.modelplan .copy h3 span { padding: 0;}
	.modelplan .copy p { text-align: left;}
	.modelplan p.icon { justify-content: space-between; padding: 15px 0; text-align: left;}
	.modelplan p.icon span.iconimg { width: 50%;}
	.modelplan .modelpoint ul li h4 { font-size: 2em;}
	.modelplan .modelpoint ul li p { font-size: 1.25em;}
	.modelplan .modelpoint ul li .flex { display: block;}
	.modelplan .modelpoint ul li.one .flex .left {border-bottom: dotted 1px; border-right: none;}
	.modelplan .modelpoint ul li.three,
	.modelplan .modelpoint ul li.four,
	.modelplan .modelpoint ul li.five,
	.modelplan .modelpoint ul li.six,
	.modelplan .modelpoint ul li.seven,
	.modelplan .modelpoint ul li.eight,
	.modelplan .modelpoint ul li.nine,
	.modelplan .modelpoint ul li.ten { width: 100%; margin-left: 0; margin-right: 0;}
	.modelplan .modelpoint ul li.nine img,
	.modelplan .modelpoint ul li.ten img { width: 87%;}
	.modelplan .modelpoint ul li.five .flex .right { margin-top: 15px;}
}

.point { margin-bottom: 30px;}
.point p {
	font-size: 150%;
	letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
	.point { text-align: left;}
	.point p { font-size: 145%;}

}



/*end*/