@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
.josefin-sans {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.cinzel {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.NotoSerif {
    font-family: 'Noto Serif JP', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.fw100 {
	font-weight: 100;
}
.fw200 {
	font-weight: 200;
}
.fw300 {
	font-weight: 300;
}
.fw400 {
	font-weight: 400;
}
.fw500 {
	font-weight: 500;
}
.fw600 {
	font-weight: 600;
}
.fw700 {
	font-weight: 700;
}
body {
	color: #4d4d4d;
}
/*main {
	font-feature-settings: "palt" 1;
}*/
.mvID {
	background: url("../../img_new/chumon/build_new/interior_design/main.jpg") center center no-repeat;
	background-size: cover;
	height: 510px;
}
.h2main {
	font-size: 24px;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	white-space: nowrap;
}
.h2main big {
	font-size: 200%;
	display: block;
}
.bgWrap {
	background-color: #f6f2ef;
}
@media screen and (max-width: 600px) {
	.mvID {
		height: 68.25vw;
	}
	.h2main {
		font-size: calc(100vw * 18 / 400);
	}
    .h2main big {
        font-size: 177%;
    }
}
.notes {
	text-align: right;
}
.headCont {
	padding: 100px 0 50px;
}
.h3top {
	font-size: 42px;
	line-height: 1.2;
}
.topTxt {
	font-size: 16px;
	line-height: 2.4;
}
.headFlex {
	display: flex;
	justify-content: center;
	margin-top: 80px;
}
.ccl {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	mix-blend-mode: multiply;
	color: #fff;
}
.ccl.c1 {
	background-color: #bfb4b2;
}
.ccl.c2 {
	background-color: #bfb0a5;
	margin: 0 -22px;
}
.ccl.c3 {
	background-color: #beb098;
}
.cclCont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	white-space: nowrap;
}
.h4ccl {
	font-size: 32px;
	line-height: 1.2;
}
.cclTxt {
	font-size: 14px;
	margin-top: 7px;
}
.ccl.c3 .cclTxt {
	padding-bottom: 10px;
}
.br800 {
	display: none;
}
@media screen and (max-width: 800px) {
    .br800 {
        display: block;
    }
    .ccl {
        width: 31.25vw;
        height: 31.25vw;
    }
    .h4ccl {
        font-size: calc(100vw * 32 / 800);
    }
    .cclTxt {
        font-size: calc(100vw * 14 / 800);
    }
}
@media screen and (max-width: 600px) {
    .headCont {
        padding: 12.5vw 0 4vw;
    }
    .h3top {
        font-size: calc(100vw * 32 / 400);
    }
	.topTxt {
		font-size: calc(100vw * 14 / 400);
		text-align: left;
		line-height: 1.9;
	}
	.topTxt br {
		display: none;
	}
	.headFlex {
        margin-top: 8vw;
    }
    .ccl {
        width: 31.25vw;
        height: 31.25vw;
    }
	.ccl.c2 {
        margin: 0 -3.5vw;
    }
    .h4ccl {
        font-size: calc(100vw * 18 / 400);
    }
    .cclTxt {
        font-size: calc(100vw * 7 / 400);
		margin-top: 3px;
    }
}
.featureWrap {
	padding: 50px 0 0;
}
.h3feature {
	font-size: 100px;
	line-height: 0.85;
	color: #e5e1e0;
}
.h3feature.rev {
	text-align: right;
}
.dotWrap {
	display: flex;
	justify-content: center;
	gap: 4px;
}
.dotWrap span {
	width: 15px;
	height: 15px;
	border-radius: 50%;
}
.dotWrap span.d1 {
	background-color: #bfb4b2;
}
.dotWrap span.d2 {
	background-color: #bfb0a5;
}
.dotWrap span.d3 {
	background-color: #beb098;
}
.h4feature {
	font-size: 42px;
	border-bottom: 3px solid #bfb4b2;
	padding-bottom: 30px;
}
.featureTxt {
	font-size: 16px;
	line-height: 2.0;
}
.imgF1 {
	max-width: 700px;
	width: 100%;
	margin: auto;
}
@media screen and (max-width: 800px) {
    .h3feature {
        font-size: calc(100vw * 100 / 800);
    }
    .h4feature {
        font-size: calc(100vw * 32 / 800);
    }
    .featureTxt {
        font-size: calc(100vw * 16 / 800);
		line-height: 1.8;
	}
}
@media screen and (max-width: 600px) {
    .featureWrap {
        padding: 5vw 0 0;
    }
    .h3feature {
        font-size: calc(100vw * 58 / 400);
    }
    .h4feature {
        font-size: calc(100vw * 32 / 400);
        padding-bottom: 10px;
    }
    .featureTxt {
        font-size: calc(100vw * 14 / 400);
		line-height: 1.8;
	}
    .featureTxt.tac {
		text-align: left;
	}
}
.h5feature {
	font-size: 32px;
	border-bottom: 1px solid #bfb4b2;
	padding-bottom: 15px;
}
@media screen and (max-width: 600px) {
    .h5feature {
        font-size: calc(100vw * 21 / 400);
    }
}
.f2flex {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	gap: 3rem 0;
}
.f2wrap {
	width: 23%;
	display: flex;
	flex-direction: column;
}
.h6feature {
	font-size: 18px;
	border-bottom: 1px solid #bfb4b2;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.f2txt {
	font-size: 13px;
	margin-top: 5px;
	margin-bottom: 15px;
	line-height: 2.0;
}
.f2btm {
	margin-top: auto;
}
@media screen and (max-width: 800px) {
    .f2wrap {
        width: 47.5%;
    }
}
@media screen and (max-width: 600px) {
    .f2flex {
        gap: 1rem 0;
    }
    .h6feature {
        font-size: calc(100vw * 16 / 400);
        margin-bottom: 5px;
    }
	.f2ls {
		letter-spacing: -0.075em;
	}
}
.f5featureBtm {
	border-top: 3px solid #bfb4b2;
	padding-top: 15px;
}
.f2wrap.row2 {
	width: 47.5%;
}
.f2wrap.row1 {
	width: 100%;
}
.f2imgFlex {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.imgFlex2 {
	width: 48.4%;
}
.imgFlex4 {
	width: 23%;
}
.h6feature.f2txtNone {
	margin-bottom: 30px;
}
@media screen and (max-width: 800px) {
    .f2wrap.row2 {
        width: 100%;
    }
    .imgFlex2 {
        width: 47.5%;
    }
    .imgFlex4 {
        width: 47.5%;
    }
    .h6feature.f2txtNone {
        margin-bottom: 5vw;
    }
}
.imgFlex3 {
	width: 31.5%;
}
.f2lh {
	line-height: 1.4;
}
.mbNone .f2txt {
	margin-bottom: 5px;
}
@media screen and (max-width: 600px) {
	.mbNone .f2txt {
        margin-bottom: 3vw;
    }
}
.f2wrap.row3 {
	width: 32%;
}
.h7feature {
	font-size: 26px;
}
.ulFeature {
	font-size: 13px;
}
.featureWrap.last {
	padding-bottom: 100px;
}
@media screen and (max-width: 800px) {
    .f2wrap.row3:nth-child(1) {
        width: 100%;
    }
    .f2wrap.row3:nth-child(2),
    .f2wrap.row3:nth-child(3) {
        width: 47.5%;
    }
}
@media screen and (max-width: 600px) {
	.h7feature {
        font-size: 18px;
    }
    .ulFeature {
        font-size: 12px;
    }
    .featureWrap.last {
        padding-bottom: 15vw;
    }
}
.coordinateWrap {
	padding: 130px 0 200px;
	background-color: #e5e1e0;
}
.h3cord {
	font-size: 42px;
	line-height: 0.9;
}
.h3cord big {
	font-size: 185%;
}
.h3cord small {
	font-size: 66%;
	display: block;
}
.cordTxt {
	font-size: 16px;
}
@media screen and (max-width: 850px) {
    .h3cord {
        font-size: calc(100vw * 42 / 850);
    }
    .cordTxt.tac {
		text-align: left;
	}
}
@media screen and (max-width: 600px) {
    .coordinateWrap {
        padding: 15vw 0 20vw;
    }
    .h3cord {
        font-size: calc(100vw * 30 / 400);
		line-height: 1.0;
    }
    .h3cord small {
		font-size: 56%;
		line-height: 1.8;
    }
    .cordTxt.tac {
		font-size: calc(100vw * 14 / 400);
	}
}
.contBox1235 {
	max-width: 1235px;
	width: 95%;
}
.contBox1235.rev {
	margin-left: auto;
}
.cordFlex {
	display: flex;
	margin-top: 50px;
}
.rev.cordFlex {
	flex-direction: row-reverse;
}
.cordImg {
	width: 80.9%;
	flex-shrink: 0;
	padding-top: 100px;
}
.cordWrap {
	display: flex;
	flex-direction: column;
	margin-left: -1.7%;
}
.rev .cordWrap {
	margin-left: 0;
	margin-right: -1.7%;
}
.cordCcl {
	width: 260px;
	height: 260px;
	border-radius: 50%;
	mix-blend-mode: multiply;
}
.cordCcl.cord1 {
	background-color: #d5ceca;
}
.cordCcl.cord2 {
	background-color: #bbb3b0;
}
.cordCcl.cord3 {
	background-color: #eddfc7;
}
.cordCcl.cord4 {
	background-color: #beafa2;
}
.cordCcl.cord5 {
	background-color: #f1dccc;
}
.cordNumCont {
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translateX(-50%);
}
.cordNum {
	font-size: 36px;
	border-bottom: 1px solid #fff;
	width: fit-content;
	margin: auto;
	line-height: 1.2;
}
.h4cord {
	font-size: 28px;
	line-height: 1.2;
	margin-top: 20px;
}
.h5cord {
	font-size: 29px;
	writing-mode: vertical-rl;
	margin: auto;
	margin-top: -60px;
	line-height: 1.4;
}
@media screen and (max-width: 1200px) {
	.cordCcl {
        width: 21.5vw;
        height: 21.5vw;
    }
    .cordNum {
        font-size: calc(100vw * 36 / 1200);
    }
    .h4cord {
        font-size: calc(100vw * 28 / 1200);
        margin-top: 1.67vw;
    }
    .h5cord {
        font-size: calc(100vw * 29 / 1200);
        margin-top: -5vw;
    }
}
@media screen and (max-width: 800px) {
	.contBox1235 {
		margin-left: 0;
		overflow: hidden;
    }
    .cordFlex {
		flex-direction: column-reverse;
		margin-top: 5vw
    }
	.rev.cordFlex {
        flex-direction: column-reverse;
    }
    .cordImg {
        width: 100%;
        padding-top: 0;
    }
    .cordWrap {
        align-items: center;
        flex-direction: row;
        margin-left: -5vw;
		margin-bottom: -7.5vw;
    }
	.rev .cordWrap {
		flex-direction: row-reverse;
		justify-content: space-between;
        margin-left: 0;
        margin-right: -5vw;
	}
    .cordCcl {
        width: 30vw;
        height: 30vw;
    }
    .cordNumCont {
        top: 5vw;
    }
    .cordNum {
        font-size: calc(100vw * 36 / 800);
    }
    .h4cord {
        font-size: calc(100vw * 28 / 800);
        margin-top: 3.75vw;
    }
    .h5cord {
		font-size: calc(100vw * 29 / 800);
        writing-mode: horizontal-tb;
		margin: 0;
		margin-left: -3vw;
		padding-bottom: 5vw;
    }
    .h5cord.c5 {
		margin-right: -15vw;
    }
    .rev .h5cord {
		margin-left: 0;
    }
	.br1235 {
		display: none;
	}
}
@media screen and (max-width: 600px) {
    .cordCcl {
        width: 36vw;
        height: 36vw;
    }
    .h4cord {
        font-size: calc(100vw * 16 / 400);
    }
    .h5cord {
		font-size: calc(100vw * 21 / 400);
    }
}