@charset "utf-8";

/* =================================
   ■ renovation
================================== */

/* --------------------------------
   □ 共通変数の定義
-------------------------------- */
:root {
    --box-padding-left: 20px;
    --box-padding-right: 20px;

    @media screen and
    (max-width : 767px) {
        --box-padding-left: 3vw;
        --box-padding-right: 3vw; 
    }
}

.contents main > section:not(.wide),
.contents .chapter,
.visual .container,
.contents .wide .container{
    max-width:1000px;
    margin-inline: auto;
    text-align: left;
    box-sizing:border-box;

    @media only screen and
    (max-width : 1000px) {
        max-width: 100%;
        padding-left: var(--box-padding-left);
        padding-right: var(--box-padding-right);
    }
}

.contents section.wide, .contents .chapter.wide {
    padding: 80px 0;
	@media(max-width : 767px) {
		padding: 48px 0;
	}
}

footer {
	margin-top: 100px;
	@media(max-width : 767px) {
		margin-top: 50px;
	}
}


/* ----------------------------
   ■ 共通ボタン
---------------------------- */
.contents .buttonStyle a {
    font-size: 87.5%;
    letter-spacing: 0.04em;
    width: 248px;
    padding: 13px 30px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    color: #fff;
	background: #c8a84b;
    text-decoration: none;
    transition: all 300ms 0s ease;
    border-radius: 24px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;

	&:hover {
		background: #a88a35;
	}
}

.contents .title {
    letter-spacing: 0.1em;
    font-weight: 500;

	&._lv1 {
		font-size: 168%;
		text-align: center;
		line-height: 1.5;

		.en {
			display: block;
			font-size: 50%;
			color: #d0a54c;
			padding-top: 16px;
			font-family: 'Hind', sans-serif;
			font-weight: 400;
		}

		@media(max-width : 767px) {
			font-size: 140%;
			.en {
				font-size: 50%;
				padding-top: 8px;
			}
		}
	}

	&._lv2 {
		font-size: 160%;
		line-height: 1.5;

		& + *{
			margin-top: 16px;
		}
		@media(max-width : 767px) {
			font-size: 132%;
		}
	}

	&._lv3 {
		font-size: 140%;
		line-height: 1.5;

		& + *{
			margin-top: 16px;
		}
		@media(max-width : 767px) {
			font-size: 120%;
		}
	}

	& + *{
		margin-top: 40px;
	}
}

.contents {
    p.text {
		line-height: 1.8;
	}
}

.bg_gray {
	background: #f1f0ec;
}

/* ----------------------------
   ■ ヒーローセクション
---------------------------- */
#rn-hero {
	position: relative;
	padding: 0;
}

#rn-hero img {
	width: 100%;
}

/* ----------------------------
   ■ concept_box
---------------------------- */
#concept_box {
	.grid_box {
		gap: 60px;
		align-items: center;
		.image {
			img {
				width: 100%;
			}
		}
	}
	@media(max-width : 767px) {
		.grid_box {
			gap: 20px;
			.image {
				order: 2;
			}
			.explain {
				order: 1;
			}
		}
	}
}

/* ----------------------------
   ■ セクション共通レイアウト
---------------------------- */
.intro_box {
	padding: 80px 0;
}

.rn-section__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 70px 40px;
	display: flex;
	align-items: center;
	gap: 60px;
}

.rn-section__inner--reverse {
	flex-direction: row-reverse;
}

.rn-section__inner--column {
	flex-direction: column;
	align-items: flex-start;
}

.rn-section__text {
	flex: 1;
	min-width: 0;
}

.rn-section__image {
	flex: 1;
	min-width: 0;
}

.rn-section__image img {
	width: 100%;
	display: block;
}

.rn-section__image-sub {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.rn-section__image-sub img {
	flex: 1;
	object-fit: cover;
	height: 180px;
}

.rn-section__label {
	font-size: 12px;
	letter-spacing: 0.3em;
	color: #c8a84b;
	margin-bottom: 6px;
}

.rn-section__title {
	font-size: 26px;
	font-weight: 700;
	color: #222;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 2px solid #e8e0d0;
	letter-spacing: 0.05em;
}

.rn-section__lead {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 14px;
	line-height: 1.7;
}

.rn-section__body {
	font-size: 14px;
	color: #555;
	line-height: 2;
	margin-bottom: 28px;
}

.rn-section__btn {
	margin: 0;
}

/* ----------------------------
   ■ リノベーションセクション
---------------------------- */
#rn-renovation {
	background: #fff;
}

/* ----------------------------
   ■ 古民家再生セクション
---------------------------- */
#rn-kominka {
	background: #f7f5f0;
}

/* ----------------------------
   ■ 耐震+断熱 フィーチャーセクション
---------------------------- */
#rn-feature.rn-feature {
	background: #111 url(../../images/renovation/feature_title.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	padding: 0;
}

.rn-feature__header {
	text-align: center;
	padding: 80px 0;
}

.rn-feature__subtitle {
	font-size: 120%;
	letter-spacing: 0.2em;
	margin-bottom: 10px;
	text-align: center;
}

.rn-feature__title {
	font-size: 2.8rem;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
}

@media(max-width : 767px) {

	.rn-feature__subtitle {
		font-size: 110%;
	}
	.rn-feature__title {
		font-size: 1.8rem;
	}
}

/* ----------------------------
   ■ feature_box
---------------------------- */
.feature_box {
	.grid_box.col2 {
		gap: 60px;
		align-items: center;
		.image {
			img {
				width: 100%;
			}
		}
	}
	.grid_box:first-of-type {
		margin-bottom: 60px;
	}
	
	@media(max-width : 767px) {
		.grid_box.col2 {
			gap: 30px;
		}
		.grid_box:first-of-type {
			margin-bottom: 40px;
		}
	}
}

/* ----------------------------
   ■ newlife_box
---------------------------- */
#newlife_box {
	.lead_text {
		text-align: center;
		margin-bottom: 40px;
	}
	
	@media(max-width : 767px) {
		.lead_text {
			text-align: left;
			margin-bottom: 30px;
		}
	}
}

/* --------------------------------
   □ imageList
-------------------------------- */
.imageList{
    margin-top: 24px;

    > li{
        figure{
			position: relative;
			z-index: 1;
			.image {
				img{
					width: 100%;
					height: auto;
				}
			}
            figcaption{
				position: absolute;
				z-index: 2;
				bottom: 0;
				right: 0;
				background-color: #F1F0EC;
				padding: 20px 20px 0;

				.text {
					margin-bottom: 0;
				}
				.text:last-of-type {
					font-size: 112%;
				}

                @media only screen and
                (max-width : 767px) {
                    margin-top: 8px;
                }

                dl{
                    dt{
                        font-weight: 700;
                        letter-spacing: 0.04em;
                    }
                    dd{
                        margin-top: 9px;
                        font-size: 1.4rem;
                        line-height: 1.7;
                    }

                    &.space{
                        padding: 0 24px 24px 24px;
                    }
                }
            }
        }

        &.round6{
            border-radius: 6px;
            overflow: hidden;
        }
    }
}

/* ----------------------------
   ■ total_renovation_box
---------------------------- */
#total_renovation_box {
	.grid_box.col2 {
		gap: 60px;
		align-items: center;
		.image {
			img {
				width: 100%;
			}
		}
		.explain {
			section {
				width: auto;
				&:not(:last-child) {
					margin-bottom: 16px;
				}
			}
		}
	}
	
	@media(max-width : 767px) {
		.grid_box.col2 {
			gap: 40px;
			.explain {
				section {
					width: auto;
					&:not(:last-child) {
						margin-bottom: 20px;
					}
				}
			}
		}
	}
}


/* ----------------------------
   ■ 小さな修繕セクション
---------------------------- */
#rn-repair.rn-repair {
	background: url(../../images/renovation/repair_bg.jpg) 0 0 no-repeat;
	background-size: cover;
	h3 {
		color: #fff;
	}
	li {
		grid-template-columns: 1.8fr 1fr;
		background: #ffffff;
		gap: 0;
		align-items: center;
		p {
			margin-bottom: 0;
			span {
				font-size: 120%;
				display: block;
				padding-left: 40px;
				padding-bottom: 4px;
				width: 70%;
				border-bottom: 1px solid #ccab69;
			}

		}
		img {
			width: 100%;
		}
	}
	
	@media(max-width : 767px) {
		h3 {
			font-size: 130%;
		}
		li {
			grid-template-columns: 1.4fr 1fr;
			p {
				span {
					font-size: 106%;
					padding-left: 20px;
					width: 80%;
				}
	
			}
		}
	}

}


/* --------------------------------
   □ sideImageBox
-------------------------------- */

.sideImageBox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:0 40px;
}


.sideImageBox .explain{
    width: 30%;
    flex-shrink: 0;

	section{
		width: auto!important;
	}

	.sub_image {
		margin-bottom: 40px;

		img {
			width: 100%;
		}

	}
}

.sideImageBox .image img{
    display: block;
    margin-left: auto;
	width: 100%;
	height: auto;

    & + span.image{
        display: block;
        margin-right: 37px;
        margin-top: 37px;
    }
}

.sideImageBox.reverse{
    flex-direction: row-reverse;
}

.sideImageBox.reverse .image img{

}

@media only screen and
(max-width : 767px) {
    
    .sideImageBox,
	.sideImageBox.reverse {
		flex-direction: column-reverse;
		gap: 30px;
    }

    .sideImageBox .explain{
        width: 100%;
		.sub_image {
			width: 40%;
			float: right;
			margin: 0 0 16px 20px;
		}
		p.text {
			font-size: 90%;
		}
    }

    .sideImageBox .image {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

}


/* ◇ .grid_box
-------------------------------- */
.grid_box {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 1.02675585284%
}
.grid_box.col1 {
    grid-template-columns: 1fr;
}
.grid_box.col2 {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;

    @media screen and
    (max-width : 767px) {
		grid-template-columns: 1fr;
        gap: 4vw 3.2vw;
    }
}
.grid_box.col3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px 32px;
}


.grid_box{
    &.gap8 {
        gap: 8px;
    }
    &.gap20 {
        gap: 20px 20px;
    }
    &.gap32 {
        gap: 32px;
    }
    &.gap40 {
        gap: 40px;
    }
    &.colgap32 {
        column-gap: 32px;
    }
}

* + .grid_box.content {
    margin-top: 34px;
}

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

    .grid_box.pclimit_col1 {
        grid-template-columns: 1fr;
    }
    
}
@media only screen and
(max-width : 999px) {

    .grid_box.md_col1 {
        grid-template-columns: 1fr;
    }
    
}

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

    .grid_box.sp_col1 {
        grid-template-columns: 1fr;
    }
    
}