/* test */
/* .mv,
.startset,
.consept,
.pint,
.step,
.cv,
.combi {
	display: none;
} */

/* pending */
.PEND-main,
.PEND {
	position: relative;
}

.PEND-main::after {
	content: '新外観に差し替え？';
	display: block;
	width: fit-content;
	color: #fff;
	padding: .5em;
	font-size: 13px;
	letter-spacing: 0;
	font-weight: bold;
	background-color: #AF1313;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.PEND::after {
	content: '差し替え予定';
	display: block;
	width: fit-content;
	color: #fff;
	padding: .5em;
	font-size: 13px;
	letter-spacing: 0;
	font-weight: bold;
	background-color: #AF1313;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#lodina .marker {
	background: linear-gradient(transparent 60%, #FFF066 60%);
	font-weight: bold;
}

#lodina .marker2 {
	background: linear-gradient(transparent 60%, #cbd6d8 60%);
}

#lodina .casestudy .tabcontents .tab li {
	position: relative;
}

#lodina .casestudy .tabcontents .tab li .family {
	display: block;
	position: absolute;
	bottom: 0;
	left: 1em;
	width: 120px;
}

@media screen and (max-width : 768px) {
	#lodina .tabcontents .sp-title p {
		display: block;
		text-align: center;
		width: 100%:
	}

	#lodina .tabcontents .sp-title p .family {
		display: block;
		width: 22%;
		position: absolute;
		bottom: 0;
		left: 1em;
	}
}

#lodina .columns-2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


#lodina .columns-2.w95 {
	width: 95%;
	margin: 0 auto;
}

#lodina .columns-2.w90 {
	width: 90%;
	margin: 0 auto;
}

#lodina .columns-2.w80 {
	width: 80%;
	margin: 0 auto;
}

@media screen and (max-width:767px) {
	#lodina .columns-2.w80 {
		width: 100%;
		margin: 0 auto;
	}
}

#lodina .columns-2 .cs-img-box {
	width: 48%;
	position: relative;
}

@media screen and (max-width:767px) {
	#lodina .columns-2 .cs-img-box {
		width: 100%;
	}

	#lodina .slider-cs-box img {
		margin-bottom: 0 !important;
	}
}


#lodina .casestudy .tabcontents .area {
	padding: 40px 60px;
}

#lodina .slider-casestudy .slider-cs-box {
	position: relative;
	padding: 0 1em;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .slider-cs-box {
		padding: 0;
	}
}

#lodina .slider-casestudy * {
	box-sizing: border-box;
}

#lodina .slider-casestudy figure {
	padding: 0;
	margin: 0;
	display: block;
}

#lodina .slider-casestudy .cs-title-wrp {
	width: 94%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto 1em;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-title-wrp {
		width: 100%;
		margin: 0 auto;
	}
}

#lodina .slider-casestudy .cs-title-wrp .cs-data {
	width: 28%;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-title-wrp .cs-data {
		width: 100%;
		padding: 0 20%;
		margin-bottom: 1em;
	}

}

#lodina .slider-casestudy .cs-title-wrp .cs-title-box {
	width: 68%;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-title-wrp .cs-title-box {
		width: 100%;
	}
}

#lodina .slider-casestudy .cs-title-wrp .cs-title {
	font-size: min(1.35em, 4vw);
	font-weight: normal;
	line-height: 1.5;
	font-feature-settings: "palt";
	letter-spacing: .15em;
	margin-bottom: 1em;
	color: #466A7E;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-title-wrp .cs-title br {
		display: none;

	}
}

/* #lodina .slider-casestudy .cs-main-img-wrp {
	position: relative;
} */

#lodina .slider-casestudy .cs-main-img-wrp {
	width: 100%;
	position: relative;
	margin-bottom: 2em;
}

#lodina .slider-casestudy .cs-main-img {
	width: 100%;
	position: relative;
	aspect-ratio: 16/9;
	/* overflow: hidden;
	border-radius: 10px; */
}

#lodina .slider-casestudy .img-with-bg {
	position: relative;
}

#lodina .slider-casestudy .img-with-bg::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: .5em;
	left: .5em;
	background-color: #f6d06d;
	z-index: -1;
}

#lodina .slider-casestudy .img-with-bg figure {
	z-index: 1;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-main-img {
		/* aspect-ratio: 1/1; */
	}

	#lodina .slider-casestudy .img-with-bg figure {
		height: 100%;
	}
}

#lodina .slider-casestudy .cs-main-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#lodina .slider-casestudy .cs-subtitle {
	font-size: min(1.15em, 3vw);
	font-weight: normal;
	line-height: 1.6;
	position: absolute;
	top: 1em;
	left: 1em;
	z-index: 2;
	color: #466A7E;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-subtitle {
		position: static;
		margin-bottom: 1.5em;
	}
}

#lodina .slider-casestudy .cs-subtitle span {
	display: inline-block;
	background-color: rgba(255, 255, 255, .9);
	padding: .25em .4em;
	margin-bottom: .5em;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-subtitle span {
		background-color: unset;
		padding: 0;
		margin-bottom: 0;
	}
}

#lodina .slider-casestudy .cs-lead {
	font-size: min(.8em, 3vw);
	line-height: 1.6;
	width: 90%;
	margin: 0 auto;
}

#lodina .slider-casestudy .cs-img-box .img {
	margin-bottom: 2em;
	border-radius: 5px;
	/* overflow: hidden; */
	position: relative;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .cs-img-box .img {
		margin-bottom: 1em;
	}
}

#lodina .slider-casestudy .cs-img-box .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#lodina .slider-casestudy .img.data1-2 {
	width: 70%;
	margin: 2em auto;
}

#lodina .slider-casestudy .img.data1-3 {
	width: 80%;
	margin: 4em auto 2em;
}

@media screen and (max-width:767px) {

	#lodina .slider-casestudy .img.data1-2,
	#lodina .slider-casestudy .img.data1-3 {
		width: 55%;
		margin: 2em auto;
	}

	#lodina .slider-casestudy .img.data1-2 {
		aspect-ratio: 1/1;
	}
}


#lodina .cs-comment {
	border: 2px solid #abbbc4;
	background-color: #fff;
	border-radius: 5px;
	padding: 1em;
	color: #466A7E;
	font-size: min(.8em, 2.8vw);
	line-height: 1.6;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 3;
	text-align: justify;
}

#lodina .cs-comment:after,
#lodina .cs-comment:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#lodina .cs-comment:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 10px;
	margin-left: -10px;
}

#lodina .cs-comment:before {
	border-color: rgba(204, 204, 204, 0);
	border-bottom-color: #abbbc4;
	border-width: 13px;
	margin-left: -13px;
}

#lodina .cs-comment.arrow-left:after,
#lodina .cs-comment.arrow-left:before {
	right: 100%;
	top: 50%;
	left: unset;
	bottom: unset;
}

#lodina .cs-comment.arrow-left:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-top: -10px;
	margin-left: unset;
}

#lodina .cs-comment.arrow-left:before {
	border-color: rgba(204, 204, 204, 0);
	border-right-color: #abbbc4;
	border-width: 13px;
	margin-top: -13px;
	margin-left: unset;
}

#lodina .cs-comment.w90 {
	width: 90%;
}

#lodina .cs-comment.w80 {
	width: 80%;
}

#lodina .cs-comment.w70 {
	width: 70%;
}

@media screen and (max-width:767px) {

	#lodina .cs-comment.w90,
	#lodina .cs-comment.w80,
	#lodina .cs-comment.w70 {
		width: 100%;
	}
}

#lodina .cs-check {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

#lodina .cs-check .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1em;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	vertical-align: middle;
	background-color: #466A7E;
	border-radius: 100%;
}

#lodina .cs-check.w80 {
	width: 80%;
}

#lodina .cs-check .cs-check-icon {
	display: block;
	width: 30%;

}

@media screen and (max-width:767px) {
	#lodina .cs-check .cs-check-icon {
		display: block;
		width: 25%;

	}
}

#lodina .cs-check {}

#lodina .cs-check p {
	font-size: min(.8em, 3vw);
	line-height: 1.6;
	width: 65%;
}

@media screen and (max-width:767px) {
	#lodina .cs-check p {
		line-height: 1.5;
		width: 70%;
	}
}

#lodina .cs-point {
	font-size: min(.8em, 2.7vw);
	line-height: 1.8;
	text-align: justify;
	margin-bottom: 1em;
	padding-right: 1.5em;
	padding-bottom: .5em;
	border-bottom: 3px solid #f6d06d;
}

@media screen and (max-width:767px) {
	#lodina .cs-point-title {
		width: 60%;
		margin: 1em auto 0 !important;
		text-align: center;
	}

	#lodina .cs-point {
		line-height: 1.6;
	}

	#lodina .data-house {
		width: 70% !important;
		margin: 0 auto !important;
	}

	#lodina .data-floor {
		width: 70% !important;
		margin: 0 auto !important;
	}
}

#lodina .img.data-house {
	border-radius: unset !important;
	margin-top: -15%;
	transform: translateX(5%);
}

#lodina .slider-casestudy .img.pet {
	border-radius: unset !important;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 220px;
	margin-bottom: 0;
}

@media screen and (max-width:767px) {
	#lodina .slider-casestudy .img.pet {
		width: 120px;
		margin-bottom: -2em;
	}
}

#lodina .data-2-2,
#lodina .data2-1-1 {
	width: 65%;
}

@media screen and (max-width:767px) {

	#lodina .data-2-2,
	#lodina .data2-1-1 {
		width: 49%;
	}

	#lodina .data2-1-1 {
		height: 45vw;
	}
}

#lodina .data2-1-2,
.data2-2-2 {
	width: 30%;
}

@media screen and (max-width:767px) {

	#lodina .data2-1-2,
	.data2-2-2 {
		width: 49%;
	}
}

#lodina .data2-3-1 {
	width: 90%;
	margin: 0 auto 1em;
	position: relative;
}

@media screen and (max-width:767px) {
	#lodina .data2-3-1 {
		width: 100%;
		margin-bottom: 2.5em;
	}
}

#lodina .data2-3-1::after,
#lodina .data2-3-2::after {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: min(.9em, 3.5em);
	line-height: 1;
	width: 1.5em;
	height: 1.5em;
	background-color: #466A7E;
	color: #fff;
	font-weight: bold;
	border-radius: 100%;
	position: absolute;
}

#lodina .data2-3-1::after {
	content: '1';
	left: 1em;
	bottom: 1em;
}

#lodina .data2-3-2::after {
	content: '2';
	left: .5em;
	bottom: .5em;
}

#lodina .data2-3-2 {
	width: 32%;
	position: relative;
}

#lodina .data2-check {
	width: 60%;
	margin-right: 0;
	text-align: justify;
	position: relative;
}

#lodina .cs-check {
	position: relative;
	z-index: 2;
	padding: 1em;
	background-color: #f3ebad;
}

.box-with-bg {
	position: relative;
}

#lodina .box-with-bg::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: .5em;
	left: .5em;
	background-color: #466A7E;
	z-index: -1;
}

@media screen and (max-width:767px) {


	#lodina .data2-3-2 {
		width: 60%;
		margin: 0 auto 1em !important;
	}

	#lodina .data2-check {
		width: 100%;
		margin: 0 auto 1em !important;
	}
}

#lodina .data2-f1 img {
	width: 110%;
	margin-left: -7%;
}

@media screen and (max-width:767px) {
	#lodina .data2-f1 img {
		width: 100%;
		margin-left: 0;
	}
}

@media screen and (max-width:767px) {

	#lodina .order0 {
		order: 0;
	}

	#lodina .order1 {
		order: 1;
	}
}


#lodina .downgrade .lead {
	font-size: min(1.1em, 4vw);
	text-align: center;
	margin-bottom: 1em;

}

#lodina .downgrade .grade-lead {
	font-size: min(.75em, 3vw);
	line-height: 1.6;
	min-height: 4lh;
}

@media screen and (max-width:767px) {
	#lodina .downgrade .grade-lead {
		margin-bottom: 1em;
		min-height: unset;
	}

	#lodina .downgrade .cs-img-box:first-child img {
		margin-bottom: 1.5em;
	}
}