@charset "UTF-8";

/* ========================================
@media screen and (min-width: 768px),print {
======================================== */
@media screen and (min-width: 768px),print {
#page-house-renovation {
	background: url(../images/house_renovation/bg.jpg) repeat top center/contain;
	margin-inline: auto;
	max-width: 1920px;
	width: 100%;
}

.c-sec__en {
	color: #A78A37;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5869565217;
	margin-bottom: 13px;
	text-align: center;
}

.c-sec__ttl {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2.25;
	margin-bottom: 83px;
	text-align: center;
}

.c-sec__ttl.merit {
  margin-bottom: 50px;
}

.p-before-after {
	padding-bottom: 120px;
}

.p-before-after .l-inner.l-before-after {
	margin-inline: auto;
	padding-block: 160px 0;
	width: min(95%, 1280px);
}

.p-before-after .beer-slider {
}

.p-before-after .p-before-after__txt {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.053em;
	line-height: 2.7272727273;
	margin-block: 47px 127px;
	margin-inline: auto;
	width: min(95%, 1000px);
}

.p-before-after .p-before-after__contents {
	background: #fff;
	border: 4px solid #E6E6E6;
	margin-inline: auto;
	padding-block: 52px 95px;
	width: min(100%, 1280px);
}

.p-before-after .p-before-after__contents-ttl {
	border-bottom: 2px solid #1A1A1A;
	border-top: 2px solid #1A1A1A;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 114px;
	margin-inline: auto;
	padding-block: 8px;
	text-align: center;
	width: 200px;
}

.p-before-after .p-point__items {
	display: grid;
	gap: 40px 27px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-inline: auto;
	width: min(95%, 1100px);
}

.p-before-after .p-point__item {
	background: #F2F2F2;
	height: 397px;
	padding-block: 20px 0;
}

.p-before-after .p-point__item:nth-child(3) h4,
.p-before-after .p-point__item:nth-child(4) h4,
.p-before-after .p-point__item:nth-child(5) h4 {
	margin-bottom: 30px;
}

.p-before-after .p-point__item h4 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-align: center;
}

.p-before-after .p-point__item .img {
	margin-bottom: 21px;
	text-align: center;
}

.p-before-after .p-point__item p {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 2;
	padding-inline: 23px;
}

.p-merit-demerit {
	padding-bottom: 109px;
}

.p-merit-demerit .p-merit-demerit__fig {
	text-align: center;
}

.p-order {
	background: #fff;
	padding-block: 163px 200px;
}

.p-order .l-inner.l-order {
	margin-inline: auto;
	width: min(100%, 1920px);
}

.p-order .p-order__contents {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: -250px;
	margin-left: auto;
	width: min(95%, 1600px);
}

.p-order .p-order__contents-left {
	position: relative;
	top: -90px;
}

.p-order .p-order__en {
	margin-bottom: 63px;
}

.p-order .p-order__ttl {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.6666666667;
	white-space: nowrap;
}

.p-order .p-order__contents02 {
	display: flex;
	justify-content: space-between;
	margin-bottom: -152px;
	margin-right: auto;
	position: relative;
	width: min(95%, 1717px);
}

.p-order .p-order__contents02-right {
	bottom: 270px;
	position: absolute;
	right: 0px;
}

.p-order .p-order__bottom {
	position: relative;
	z-index: 10;
}

.p-order .p-order__bottom-img {
	left: 50%;
	margin-bottom: 64px;
	position: relative;
	transform: translateX(-50%);
	width: 2045px;
}

.p-order .p-order__bottom-link {
	text-align: center;
}

.p-order .p-order__bottom-link a {
	border-bottom: 1px solid #1A1A1A;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 3.375;
	margin-inline: auto;
	padding-block: 0 13px;
	padding-inline: 0 40px;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}

.p-order .p-order__bottom-link a::after {
	content: ">";
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5625;
	position: absolute;
	right: 4px;
	top: -2px;
}

.p-link {
	background: #fff;
	padding-block: 0 220px;
}

.p-link .p-link__top {
	margin-bottom: 98px;
	text-align: center;
}

.p-link .p-link__top .img {
	margin-bottom: 10px;
}

.p-link .p-link__top p {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5625;
	text-align: center;
}

.p-link .p-link__items {
	display: grid;
	gap: 0 100px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-inline: auto;
	width: min(95%, 1280px);
}

.p-link .p-link__item .img {
	margin-bottom: 16px;
}

.p-link .p-link__item p {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 1.7142857143;
	text-align: center;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1800px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1800px) {
.p-order .p-order__contents {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: -8.889vw;
	margin-left: auto;
	width: min(95%, 1600px);
}

.p-order .p-order__contents02-left img {
  width: 90%;
}

.p-order .p-order__contents02-right {
	bottom: 12vw;
	position: absolute;
	right: 8.5vw;
}

.p-order .p-order__contents02 {
	display: flex;
	justify-content: space-between;
	margin-bottom: -3.444vw;
	margin-right: auto;
	position: relative;
	width: min(95%, 1717px);
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1650px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1650px) {
.p-order .p-order__contents-right img {
  width: 100%;
  height: auto;        
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1500px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1500px) {
.p-order .p-order__contents {
  margin-bottom: -10.8vw;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1400px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1400px) {
.p-before-after .beer-slider img {
  width: 100%;
  height: auto;        
}

.p-link .p-link__items {
	display: grid;
	gap: 0 7.407vw;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-inline: auto;
	width: min(95%, 1280px);
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1350px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1350px) {
.p-link .p-link__item .img img {
  width: 100%;
  height: auto;        
}


}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1300px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1300px) {
.p-merit-demerit .p-merit-demerit__fig img {
  width: 95%;
  height: auto;        
}

.p-order .p-order__contents02 {
	display: flex;
	justify-content: space-between;
	margin-bottom: -5.692vw;
	margin-right: auto;
	position: relative;
	width: min(95%, 1717px);
  overflow: hidden;
}

.p-order .p-order__contents {
  margin-bottom: -7.8vw;
}

.p-order .p-order__contents02-right {
	bottom: 10vw;
	position: absolute;
	right: -2vw;
}

.p-order .p-order__contents02-right img {
  width: 90%;
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1200px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1200px) {
.p-order .p-order__bottom {
  overflow: hidden;
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1100px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1100px) {
.p-before-after .p-point__item {
  height: 100%;
  padding-block: 20px;      
}

.p-order .p-order__ttl {
	font-size: 3.273vw;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.6666666667;
	white-space: nowrap;
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1000px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1000px) {
.p-order .p-order__contents02-right {
	bottom: 10vw;
	position: absolute;
	right: -10.5vw;
}

.p-order .p-order__contents02-right img {
  width: 70%;
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:900px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:900px) {
.p-before-after .p-point__item .img img {
  width: 100%;
  height: auto;        
}

.p-link .p-link__top .img img {
  width: 100%;
  height: auto;        
}

}

/* ========================================
@media screen and (max-width: 767px) {
======================================== */
@media screen and (max-width: 767px) {
#page-house-renovation {
	background: url(../images/house_renovation/bg_sp.jpg) repeat top center/contain;
	margin-inline: auto;
	width: 100%;
}

.c-sec__en {
	color: #A78A37;
	font-size: 7.246vw;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 2.831vw;
	text-align: center;
}

.c-sec__ttl {
	font-size: 3.623vw;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2.2666666667;
	margin-bottom: 12.493vw;
	text-align: center;
}

.p-before-after {
	padding-bottom: 26.57vw;
}

.p-before-after .l-inner.l-before-after {
	margin-inline: auto;
	padding-block: 15.942vw 0;
	width: min(95%, 93.961352657vw);
}

.p-before-after .beer-slider {
}

.p-before-after .p-before-after__txt {
	font-size: 3.382vw;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 2;
	margin-block: 11vw 22.647vw;
	margin-inline: auto;
	width: min(95%, 82.1vw);
}

.p-before-after .p-before-after__contents {
	background: #fff;
	border: 4px solid #E6E6E6;
	margin-inline: auto;
	padding-block: 12.077vw;
	width: min(95%, 89.3vw);
}

.p-before-after .p-before-after__contents-ttl {
	border-bottom: 2px solid #1A1A1A;
	border-top: 2px solid #1A1A1A;
	font-size: 4.831vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 5.536vw;
	margin-inline: auto;
	padding-block: 1.932vw;
	text-align: center;
	width: 48.309vw;
}

.p-before-after .p-point__items {
	display: grid;
	gap: 4.831vw 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-inline: auto;
	width: 67.633vw;
}

.p-before-after .p-point__item {
	background: #F2F2F2;
	padding-block: 7.246vw;
}

.p-before-after .p-point__item:nth-child(3) h4,
.p-before-after .p-point__item:nth-child(4) h4,
.p-before-after .p-point__item:nth-child(5) h4 {
	margin-bottom: 0;
}

.p-before-after .p-point__item h4 {
	font-size: 4.831vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 1.208vw;
	text-align: center;
}

.p-before-after .p-point__item .img {
	margin-bottom: 1.208vw;
	text-align: center;
}

.p-before-after .p-point__item p {
	font-size: 3.382vw;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 2;
	padding-inline: 4.831vw;
}

.p-merit-demerit {
	padding-bottom: 8.324vw;
}

.p-merit-demerit .p-merit-demerit__fig-wrap {
	margin-inline: auto;
	padding-block: 0 9.662vw;
	width: min(95%, 94.2vw);
}

.p-merit-demerit .p-merit-demerit__fig {
	width: 309.179vw;
}

.p-order {
	background: #fff;
	padding-block: 22.222vw 0.4vw;
}

.p-order .p-order__contents {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-bottom: 13.043vw;
	margin-left: auto;
	width: min(95%, 94.6859903382vw);
}

.p-order .p-order__contents-left {
	order: 2;
	position: static;
}

.p-order .p-order__en {
	margin-bottom: 6.662vw;
}

.p-order .p-order__en img {
	height: auto;
	width: 46.135vw;
}

.p-order .p-order__ttl {
	font-size: 3.865vw;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.625;
}

.p-order .p-order__contents-right {
	margin-bottom: -8.937vw;
	order: 1;
	text-align: right;
}

.p-order .p-order__contents-right img {
	height: auto;
	width: 73.188vw;
}

.p-order .p-order__contents02 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-bottom: 15.217vw;
	margin-inline: auto;
	position: static;
	width: 100%;
}

.p-order .p-order__contents02-left {
	margin-bottom: -16.324vw;
}

.p-order .p-order__contents02-right {
	padding-inline: 0 2.899vw;
	position: static;
	text-align: right;
}

.p-order .p-order__contents02-right img {
	height: auto;
	width: 45.169vw;
}

.p-order .p-order__bottom {
	margin-bottom: 32.367vw;
}

.p-order .p-order__bottom-img {
	left: 47%;
	margin-bottom: 5.662vw;
	position: relative;
	transform: translateX(-50%);
	width: 225.362vw;
}

.p-order .p-order__bottom-link {
	text-align: center;
}

.p-order .p-order__bottom-link a {
	border-bottom: 1px solid #1A1A1A;
	font-size: 3.865vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 3.375;
	margin-inline: auto;
	padding-block: 0 3.14vw;
	padding-inline: 2vw 9.662vw;
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
}

.p-order .p-order__bottom-link a::after {
	content: ">";
	font-size: 3.865vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5625;
	position: absolute;
	right: 2vw;
	top: -0.483vw;
}

.p-link {
  background: #fff;
  padding-block: 0 39vw;
  
}

.p-link .p-link__top {
	margin-bottom: 20.29vw;
	margin-inline: auto;
	text-align: center;
	width: min(95%, 94.2vw);
}

.p-link .p-link__top .img {
	margin-bottom: 2.314vw;
}

.p-link .p-link__top p {
	font-size: 3.865vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5625;
	text-align: center;
}

.p-link .p-link__items {
	display: grid;
	gap: 7.246vw 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-inline: auto;
	width: min(95%, 86.9vw);
}

.p-link .p-link__item .img {
	margin-bottom: 3.865vw;
}

.p-link .p-link__item p {
	font-size: 3.382vw;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 1.7142857143;
	text-align: center;
}

}