@charset "UTF-8";


/*****************************************************
　メインビジュアル　
*****************************************************/
#main-visual{
	padding:0 0 40px;
}
/* スライダー 
------------------------------------------------- */
#main-slide .slick-slide{
	border-radius:25px;
	margin:0 25px;
	overflow:hidden;
}
/*#main-slide .slide_1,
#main-slide .slide_2,
#main-slide .slide_3{
	background:url('../img/top/slide_1.jpg') no-repeat center center;
	background-size:cover;
	height:500px;
	width:100%;
}*/
#main-slide .slick-prev,
#main-slide .slick-next{
	z-index:1000;
}
#main-slide .slick-prev{
	background:url('../img/common/arrow_gray_left.png') no-repeat center center;
	background-size:contain;
	height:40px;
	left:60px;
	width:40px;
}
#main-slide .slick-prev:hover,
#main-slide .slick-prev:focus{
	background:url('../img/common/arrow_gray_left.png') no-repeat center center;
	background-size:contain;
}
#main-slide .slick-next{
	background:url('../img/common/arrow_gray_right.png') no-repeat center center;
	background-size:contain;
	height:40px;
	right:60px;
	width:40px;
}
#main-slide .slick-next:hover,
#main-slide .slick-next:focus{
	background:url('../img/common/arrow_gray_right.png') no-repeat center center;
	background-size:contain;
}
#main-slide .slick-prev:before,
#main-slide .slick-next:before{
	display:none;
}
#main-slide .slick-slide img{
	max-width:none;
	width:100%;
}
#main-slide .slick-slide img.sp{
	display:none;
}


/*****************************************************
　最新チラシ・インフォメーション　
*****************************************************/
#flyer-information{
	background:#fff;
	padding:40px 0 60px;
}
#flyer-information > .inner{
	display:flex;
	justify-content:space-between;
	padding:0 50px;
}


/*****************************************************
　最新チラシ　
*****************************************************/
#flyer{
	max-width:450px;
	width:37%;
}
#flyer .img{
	border-radius:26px;
	margin:35px 0 5px;
	overflow:hidden;
}
#flyer .ttl{
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:0.2em;
	line-height:1.4;
	text-align:center;
	text-decoration:underline;
}


/*****************************************************
　インフォメーション　
*****************************************************/
#information{
	max-width:680px;
	width:56%;
}
/* リスト 
------------------------------------------------- */
.information-list{
	margin:40px 0 0;
}
.information-list .information-item{
	align-items:center;
	border-bottom:1px solid #a6a29c;
	display:flex;
	padding:20px 0 10px 25px;
}
.information-list .information-item:before{
	background:url('../img/common/gray_arrow.png') no-repeat center center;
	background-size:15px auto;
	content:'';
	display:block;
	height:20px;
	width:20px;
}
.information-list .information-item .date{
	letter-spacing:0.1em;
	color:#64b82b;
	margin:0 30px 0 25px;
}
.information-list .information-item a{
	letter-spacing:0.1em;
	text-decoration:underline;
	line-height: 1.4em;
}
/* 投稿なし 
------------------------------------------------- */
#information .none{
	margin:40px 0 0;
}
/* 「一覧を見る」ボタン 
------------------------------------------------- */
#information .btn{
	display:none;
}


/*****************************************************
　リフォームラインナップ　
*****************************************************/
#reform-lineup{
	padding:70px 0 80px;
}


/* 新しいレイアウト - テキストを画像の上に重ねる */

 :root {
            --bracket-font-size: 24px;
            --bracket-bottom: 15px;
            --bracket-right: 15px;
            --text-overlay-top: -50px;
            --text-overlay-left: 20px;
            --text-overlay-right: 20px;
            --text-overlay-padding: 15px 20px;
        }

        .rl-item.new-layout a {
            display: block;
            position: relative;
        }

        .rl-item.new-layout .img {
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .rl-item.new-layout .img::after {
            content: '';
			background: url('../img/common/arrow_blue_right.png') no-repeat center center;
            background-size: contain;
            position: absolute;
            bottom:  15px;
            right:  15px;
            width:  24px;
            height: 24px;
			display:block;
        }

        .rl-item.new-layout .text-wrapper {
            position: absolute;
            top: var(--text-overlay-top);
            left: var(--text-overlay-left);
            right: var(--text-overlay-right);
            z-index: 2;
            background: var(--text-overlay-bg);
            border-radius: 4px;
			width: 99%;
        }

        .rl-item.new-layout .catchcopy {
    background: #fff;
    font-size: 17px;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    margin: -15px 15px 0 0;
	margin-top: 6px;
    padding: 11px 11px;
    position: relative;
	width:101%;		
}
        }

        .rl-item.new-layout .ttl {
            padding: 0;
            margin: 0;
            font-size: 20px;
            color: #333;
        }

        .rl-item.new-layout .item {
            padding: 5px 10px 20px;
        }

        /* レスポンシブ */
        @media (max-width: 768px) {
            .rl-list {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .control-panel {
                padding: 15px;
            }

            .control-group input[type="range"] {
                width: 100%;
            }
        }

        /* 注意書き */
        .notice {
            background: #fff3cd;
            border: 1px solid #ffc107;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .notice h3 {
            margin-bottom: 10px;
            color: #856404;
        }

        .notice p {
            color: #856404;
            line-height: 1.6;
        }





.rl-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 90px auto 0;
    max-width: 1355px;
    width: 100%;
    /* float: left; */
}
.rl-item {
    margin: 0px 2%;
    max-width: 280px;
    width: 33%;
    margin-bottom: 30px;
}
.rl-item .img{
	border-radius:15px;
	margin:0 0 0 15px;
	overflow:hidden;
}
.rl-item .img img{
	width:100%;
}
.rl-item .catchcopy{
	background:#fff;
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:0.04em;
	margin:-15px 15px 0 0;
	padding:11px 18px;
	position:relative;
}
.rl-item .catchcopy:after{
	content:'';
	background:url('../img/common/arrow_blue_right.png') no-repeat center center;
	background-size:contain;
	display:none;
	height:31px;
	position:absolute;
	right:-15px;
	top:50%;
	transform:translate(0,-50%);
	width:33px;
	z-index:0;
}
.rl-item .ttl{
	background:#64b82b;
	color:#fff;
	letter-spacing:0.05em;
	margin:10px 0 0;
    font-size: 2.42rem;
    padding: 6px 18px;
    width: 90%;
}
.rl-item .item{
	font-size:12px;
	font-size:1.4rem;
	letter-spacing:0.1em;
	line-height:1.4;
	margin: 10px 20px 20px 15px;
    width: 100%;
}




/*****************************************************
　施工事例　
*****************************************************/
#works{
	padding:40px 0 90px;
}
/* 施工事例一覧 
------------------------------------------------- */
.works-list{
	display:flex;
	flex-wrap:wrap;
	margin:50px auto;
	max-width:1740px;
	width:100%;
}
.works-list .works-item{
	background:#f8f7f5;
	border-radius:22px;
	margin:0 0.5%;
	max-width:560px;
	width:32%;
}
.works-list .works-item a{
	display:block;
	height:100%;
	padding:25px 40px 70px;
	position:relative;
}
.works-list .works-item a:after{
	background:url('../img/common/arrow_blue_right.png') no-repeat center center;
	background-size:contain;
	display:block;
	bottom:23px;
	content:'';
	height:36px;
	position:absolute;
	width:37px;
	right:50px;
	z-index:0;
}
/* ----- カテゴリー、日付 ----- */
.works-item .category-date{
	align-items:flex-end;
	display:flex;
	justify-content:space-between;
	margin:0 0 15px;
}
.works-item .category-date .category{
	font-size:20px;
	font-size:2.0rem;
	font-weight:bold;
	letter-spacing:0;
	line-height:1.4;
}
.works-item .category-date .date{
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:0.1em;
	line-height:1.4;
}
/* ----- 画像 ----- */
.works-item .before-after-img{
	display:flex;
	justify-content:space-between;
}
.works-item .before-after-img figure{
	max-width:222px;
	position:relative;
	width:47%;
}
.works-item .before-after-img figure img{
	border-radius:15px;
}
.works-item .before-after-img figcaption{
	bottom:-17px;
	color:#fff;
	display:inline-block;
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:0.05em;
	left:50%;
	line-height:35px;
	position:absolute;
	text-align:center;
	transform:translate(-50%,0);
	width:127px;
	z-index:1;
}
.works-item .before-after-img .before-img figcaption{
	background:#b7b7b7;
}
.works-item .before-after-img .after-img figcaption{
	background:#64b82b;
}
.works-item .before-after-img .before-img{
	position:relative;
}
.works-item .before-after-img .before-img:after{
	background:url('../img/common/arrow_white_right.png') no-repeat center center;
	background-size:contain;
	content:'';
	display:block;
	height:55px;
	position:absolute;
	right:-46px;
	top:50%;
	transform:translate(0,-50%);
	width:56px;
	z-index:1;
}
/* ----- タイトル ----- */
.works-item .ttl-wrap{
	position:relative;
}
.works-item .ttl{
	background:#fff;
	display:inline-block;
	font-size:22px;
	font-size:2.2rem;
	letter-spacing:0.04em;
	line-height:1.4;
	margin:35px 0 10px;
	padding:9px 20px;
}
/* ----- 「NEW」アイコン ----- */
.works-item .ttl-wrap .new{
	left:-35px;
	position:absolute;
	top:18px;
	z-index:0;
}
/* ----- 詳細 ----- */
.works-item .detail{
	margin:0 20px;
}
.works-item .detail dl{
	display:flex;
}
.works-item .detail dl + dl{
	margin:3px 0 0;
}
.works-item .detail dl dt,
.works-item .detail dl dd{
	letter-spacing:0.16em;
	line-height:1.4;
}
.works-item .detail dl dt{
	width:5em;
}
.works-item .detail dl dd{
	width:calc(100% - 5em);
}
/* ----- 工事費 ----- */
.works-item .construction-cost_wrap{
	margin:0 20px;
	text-align:right;
}
.works-item .construction-cost{
	display:inline-block;
	margin:0 0 0 auto;
}
.works-item .construction-cost dl{
	align-items:flex-end;
	border-bottom:2px solid #aaa1a1;
	display:flex;
	margin:25px 0 0;
	padding:0 10px 10px;
}
.works-item .construction-cost dl dt{
	color:#332b2c;
	font-size:20px;
	font-size:2.0rem;
	letter-spacing:0.1em;
	margin:0 10px 0 0;
}
.works-item .construction-cost dl dd .price{
	color:#890000;
	font-size:36px;
	font-size:3.6rem;
	letter-spacing:0.01em;
}
.works-item .construction-cost dl dd .price2{
	color:#890000;
	font-size:25px;
	font-size:2.5rem;
	letter-spacing:0.01em;
}

.works-item .construction-cost dl dd .en{
	color:#890000;
	font-size:22px;
	font-size:2.2rem;
	letter-spacing:0.05em;
}
.works-item .construction-cost dl dd .tax{
	color:#332b2c;
	font-size:16px;
	font-size:1.6rem;
	letter-spacing:0.01em;
}
/* ----- 担当者からのメッセージ ----- */
.works-item .pic-text{
	margin:7px 20px 0;
}
.works-item .pic-text dt{
	background:#64b82b;
	color:#fff;
	display:inline-block;
	letter-spacing:0.05em;
	line-height:30px;
	text-align:center;
	width:110px;
}
.works-item .pic-text dd{
	display:-webkit-box;
	letter-spacing:0.075em;
	line-height:1.8;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
/* 「施工事例一覧」ボタン 
------------------------------------------------- */
#works .btn-wrap{
	text-align:center;
}
#works .btn{
	text-align:center;
}


/*****************************************************
　コラム　
*****************************************************/
#column{
	padding:40px 0 100px;
}
/* リスト 
------------------------------------------------- */
.column-list{
	display:flex;
	flex-wrap:wrap;
	margin:50px 0;
}
.column-item{
	margin:0 2.6% 0 0;
	max-width:305px;
	width:23%;
}
.column-item:nth-child(4n){
	margin:0;
}
.column-item a{
	display:block;
}
/* ----- 画像 ----- */
.column-item .img{
	border-radius:24px;
	margin:0 0 18px;
	overflow:hidden;
}
/* ----- カテゴリー ----- */
.column-item .category{
	margin:0 0 10px;
}
.column-item .category span{
	background:#014099;
	color:#fff;
	display:inline-block;
	font-size:14px;
	font-size:1.4rem;
	letter-spacing:0.05em;
	padding:4px 18px;
}
/* ----- 日付 ----- */
.column-item .date{
	color:#64b82b;
	display:block;
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:0.1em;
	margin:0 0 10px;
}
/* ----- タイトル ----- */
.column-item .ttl{
	display:-webkit-box;
	font-size:16px;
	font-size:1.6rem;
	letter-spacing:0.1em;
	line-height:1.5;
	overflow:hidden;
	text-decoration:underline;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
/* 投稿なし 
------------------------------------------------- */
#column .none{
	margin:50px 0;
}
/* 「コラム一覧」ボタン 
------------------------------------------------- */
#column .btn-wrap{
	text-align:center;
}
#column .btn{
	text-align:center;
}


/*****************************************************
　補助金　
*****************************************************/
#hojokin{
	align-items:center;
	display:flex;
}
#hojokin .img,
#hojokin .txt{
	width:47.5%;
}
/* 画像 
------------------------------------------------- */
#hojokin .img{
	border-radius:0 24px 24px 0;
	overflow:hidden;
}
/* テキスト 
------------------------------------------------- */
#hojokin .txt{
	margin:0 0 0 5%;
	text-align:center;
}
/* ----- タイトル ----- */
#hojokin .txt .ttl{
	font-size:54px;
	font-size:5.4rem;
	line-height:1.4;
	position:relative;
}
#hojokin .txt .ttl span{
	background:url('../img/top/hojokin_decoration.png') no-repeat top center;
	display:block;
	font-size:38px;
	font-size:3.8rem;
	line-height:1.4;
	padding:85px 0 0;
}
#hojokin .txt .ttl:after{
	content:'';
	/*background:url('../img/top/hojokin_uketsuketyu.png') no-repeat center center;*/
	/*background-size:contain;*/
	display:none;
	height:177px;
	position:absolute;
	right:50px;
	top:-62px;
	width:199px;
	z-index:0;
}
/* ----- サブタイトル ----- */
#hojokin .txt .subttl{
	color:#890000;
	font-size:26px;
	font-size:2.6rem;
	letter-spacing:0.2em;
	line-height:1.4;
}
/* ----- テキスト ----- */
#hojokin .txt .text{
	letter-spacing:0.18em;
	line-height:1.7;
	margin:10px 0 0;
}
/* ----- 例 ----- */
#hojokin .txt .ex{
	margin:15px 0 45px;
}
#hojokin .txt .ex > dt{
	background:#fff;
	border:2px solid #64b82b;
	color:#64b82b;
	display:inline-block;
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:0.1em;
	line-height:30px;
	margin:0 0 15px;
	padding:0 30px;
	text-align:center;
}
#hojokin .txt .ex > dd p{
	letter-spacing:0.18em;
	line-height:1.4;
}
/* 金額 */
#hojokin .txt .ex > dd .price{
	align-items:center;
	display:flex;
	justify-content:center;
	margin:20px 0 0;
}
#hojokin .txt .ex > dd .koujihi,
#hojokin .txt .ex > dd .futangaku{
	align-items:center;
	display:flex;
}
#hojokin .txt .ex > dd .koujihi{
	margin:0 82px 0 0;
	position:relative;
}
#hojokin .txt .ex > dd .koujihi:after{
	content:'';
	background:url('../img/common/arrow_green_right.png') no-repeat center center;
	background-size:contain;
	display:block;
	height:34px;
	position:absolute;
	right:-54px;
	width:34px;
	z-index:0;
}
#hojokin .txt .ex > dd .koujihi .num{
	font-size:25px;
	font-size:2.5rem;
}
#hojokin .txt .ex > dd .futangaku .num{
	color:#982524;
	font-size:30px;
	font-size:3.0rem;
}
#hojokin .txt .ex > dd .koujihi .en,
#hojokin .txt .ex > dd .futangaku .en{
	font-size:23px;
	font-size:2.3rem;
}
#hojokin .txt .ex > dd .futangaku .en{
	color:#982524;
}
#hojokin .txt .ex > dd .futangaku > dt{
	background:url('../img/top/futangaku_bg.png') no-repeat left center;
	background-size:130px auto;
	color:#fff;
	font-size:21px;
	font-size:2.1rem;
	letter-spacing:0.2em;
	line-height:43px;
	width:130px;
}


/*****************************************************
　会社情報　
*****************************************************/
#company{
	align-items:center;
	display:flex;
	flex-direction:row-reverse;
	margin:0px 0 110px;
}
/* 画像 
------------------------------------------------- */
#company .img{
	border-radius:24px 0 0 24px;
	max-width:780px;
	width:42%;
	overflow:hidden;
}
/* テキスト 
------------------------------------------------- */
#company .txt{
	margin:0 5% 0 0;
	text-align:center;
	width:53%;
}
/* ----- テキスト ----- */
#company .company-box{
	align-items:center;
	display:flex;
	justify-content:center;
}
#company .company-box .miyazaki-no1{
	max-width:372px;
	width:37%;
}
#company .company-box .sekojisseki{
	margin:0 0 0 7%;
	max-width:335px;
	text-align:center;
	width:34%;
}


/*****************************************************
　ボタン　
*****************************************************/
.btn{
	background:#fff;
	border-radius:31px;
	display:inline-block;
	width:325px;
}
.btn a{
	display:block;
	padding:0 25px;
}
.btn a span{
	background:url('../img/common/arrow_blue_right.png') no-repeat right center;
	background-size:33px 31px;
	content:'';
	display:block;
	font-size:20px;
	font-size:2.0rem;
	letter-spacing:0.2em;
	line-height:63px;
	padding:0 40px 0 0;
}


@media screen and (max-width:1024px){
	/*****************************************************
	　メインビジュアル　
	*****************************************************/
	#main-visual{
		padding:0;
	}
	/* スライダー 
	------------------------------------------------- */
	#main-slide .slick-slide{
		border-radius:0;
		margin:0;
	}
	#main-slide .slick-prev{
		left:1.28vw;
	}
	#main-slide .slick-next{
		right:1.28vw;
	}
	#main-slide .slick-slide img.sp{
		display:block;
	}
	#main-slide .slick-slide img.pc{
		display:none;
	}


	/*****************************************************
	　最新チラシ・インフォメーション・リフォームラインナップ　
	*****************************************************/
	.flyer_information_reform-lineup{
		display:flex;
		flex-direction:column;
	}


	/*****************************************************
	　最新チラシ・インフォメーション　
	*****************************************************/
	#flyer-information{
		order:2;
		padding:5.12vw 0 7.69vw;
	}
	#flyer-information > .inner{
		display:block;
		padding:0;
	}


	/*****************************************************
	　最新チラシ　
	*****************************************************/
	#flyer{
		max-width:none;
		width:100%;
	}
	#flyer .flyer-item{
		margin:0 auto;
		width:76.92vw;
	}
	#flyer .img{
		border-radius:3.33vw;
		margin:3.2vw 0 1.92vw;
	}
	#flyer .img img{
		width:100%;
	}
	#flyer .ttl{
		font-size:3.07vw;
	}


	/*****************************************************
	　インフォメーション　
	*****************************************************/
	#information{
		margin:6.41vw 0 0;
		max-width:none;
		position:relative;
		width:100%;
	}
	/* リスト 
	------------------------------------------------- */
	.information-list{
		margin:2.56vw 0 5.12vw;
	}
	.information-list .information-item{
		padding:2.56vw 0 0.89vw 3.2vw;
	}
	.information-list .information-item:before{
		background-size:1.92vw auto;
		height:1.92vw;
		width:1.92vw;
	}
	.information-list .information-item .date{
		margin:0 5.12vw 0 2.82vw;
	}
	/* 投稿なし 
	------------------------------------------------- */
	#information .none{
		margin:5.12vw 0;
		text-align:center;
	}
	/* 「一覧を見る」ボタン 
	------------------------------------------------- */
	#information .btn{
		bottom:calc(-31px - 7.69vw - 5.12vw);
		display:block;
		left:50%;
		position:absolute;
		transform:translate(-50%,0);
		width:34.23vw;
		z-index:0;
	}
	#information .btn a span{
		padding:0 5.12vw;
	}


	/*****************************************************
	　リフォームラインナップ　
	*****************************************************/
	#reform-lineup{
		order:1;
		padding:5.76vw 0 8.97vw;
	}
	.rl-list{
		/*flex-wrap:wrap;*/
		justify-content:flex-start;
		margin:17.12vw auto 0;
		max-width:none;
		width:93.6vw;
	}
	.rl-item{
		margin:0 0 3.84vw;
		max-width:none;
		width:80.87vw;
	}
	.rl-item:nth-child(even){
		margin-left:0.86vw;
	}
	.rl-item .img{
		border-radius:4.48vw;
		margin-left:1.92vw;
	}
	.rl-item .catchcopy{
		font-size:2.56vw;
		margin:-1.92vw 1.92vw 0 0;
		padding:1.41vw 2.3vw;
	}
	.rl-item .catchcopy:after{
		height:3.97vw;
		right:-1.92vw;
		width:4.23vw;
	}
	.rl-item .ttl{
		margin:1.28vw 0 0;
		max-width:75%;
		padding:0.76vw 2.3vw;
	}
	.rl-item .item{
		font-size:2.82vw;
		margin:0.64vw 2.3vw;
	}


	/*****************************************************
	　施工事例　
	*****************************************************/
	#works{
		padding:15.38vw 0 11.53vw;
	}
	/* 施工事例一覧 
	------------------------------------------------- */
	.works-list{
		margin:3.2vw auto 0;
		max-width:none;
	}
	.works-list .slick-prev,
	.works-list .slick-next{
		z-index:1000;
	}
	.works-list .slick-prev{
		background:url('../img/common/arrow_gray_left.png') no-repeat center center;
		background-size:contain;
		height:5.12vw;
		left:6.41vw;
		width:5.12vw;
	}
	.works-list .slick-prev:hover,
	.works-list .slick-prev:focus{
		background:url('../img/common/arrow_gray_left.png') no-repeat center center;
		background-size:contain;
	}
	.works-list .slick-next{
		background:url('../img/common/arrow_gray_right.png') no-repeat center center;
		background-size:contain;
		height:5.12vw;
		right:6.41vw;
		width:5.12vw;
	}
	.works-list .slick-next:hover,
	.works-list .slick-next:focus{
		background:url('../img/common/arrow_gray_right.png') no-repeat center center;
		background-size:contain;
	}
	.works-list .slick-prev:before,
	.works-list .slick-next:before{
		display:none;
	}
	.works-list .works-item{
		border-radius:2.82vw;
		margin:0 3.2vw;
		max-width:none;
		width:71.79vw;
	}
	.works-list .works-item a{
		padding:3.2vw 5.12vw 8.97vw;
	}
	.works-list .works-item a:after{
		bottom:3.5vw;
		height:4.61vw;
		width:4.74vw;
		right:6.41vw;
	}
	/* ----- カテゴリー、日付 ----- */
	.works-item .category-date{
		margin:0 0 1.92vw;
	}
	.works-item .category-date .category{
		font-size:3.33vw;
	}
	.works-item .category-date .date{
		font-size:2.56vw;
	}
	/* ----- 画像 ----- */
	.works-item .before-after-img figure{
		max-width:none;
	}
	.works-item .before-after-img figure img{
		border-radius:1.92vw;
	}
	.works-item .before-after-img figcaption{
		bottom:-2.17vw;
		font-size:2.82vw;
		line-height:4.48vw;
		width:16.28vw;
	}
	.works-item .before-after-img .before-img:after{
		height:7.05vw;
		right:-5.89vw;
		width:7.17vw;
	}
	/* ----- タイトル ----- */
	.works-item .ttl{
		font-size:3.58vw;
		margin:1.92vw 0 1.28vw;
		padding:1.15vw 2.56vw;
	}
	/* ----- 「NEW」アイコン ----- */
	.works-item .ttl-wrap .new{
		height:9.16vw;
		left:-7vw;
		top:1vw;
		width:9.16vw;
	}
	.works-item .ttl-wrap .new img{
		width:100%;
	}
	/* ----- 詳細 ----- */
	.works-item .detail{
		margin:0 1.53vw;
	}
	.works-item .detail dl + dl{
		margin:0.38vw 0 0;
	}
	/* ----- 工事費 ----- */
	.works-item .construction-cost_wrap{
		margin:0 1.53vw;
	}
	.works-item .construction-cost dl{
		border-bottom-width:0.25vw;
		margin:1.28vw 0 0;
		padding:0 0 0.76vw;
	}
	.works-item .construction-cost dl dt{
		font-size:2.56vw;
		margin:0 0.64vw 0 0;
	}
	.works-item .construction-cost dl dd .price{
		font-size:4.87vw;
	}
	.works-item .construction-cost dl dd .price2{
		font-size:3.87vw;
	}
	.works-item .construction-cost dl dd .en{
		font-size:3.07vw;
	}
	.works-item .construction-cost dl dd .tax{
		font-size:2.3vw;
	}
	/* ----- 担当者からのメッセージ ----- */
	.works-item .pic-text{
		margin:0.64vw 1.53vw 0;
	}
	.works-item .pic-text dt{
		line-height:4.61vw;
		margin:0 0 1.28vw;
		width:15.38vw;
	}
	/* 「施工事例一覧」ボタン 
	------------------------------------------------- */
	#works .btn-wrap{
		margin:2.56vw 0 0;
		text-align:center;
	}


	/*****************************************************
	　コラム　
	*****************************************************/
	#column{
		padding:0 0 11.63vw;
	}
	/* リスト 
	------------------------------------------------- */
	.column-list{
		margin:3.2vw 0;
	}
	.column-item{
		margin:0 4% 4% 0;
		max-width:none;
		width:48%;
	}
	.column-item:nth-child(2n){
		margin-right:0;
	}
	/* ----- 画像 ----- */
	.column-item .img{
		border-radius:3.07vw;
		margin:0 0 2.3vw;
	}
	.column-item .img img{
		width:100%;
	}
	/* ----- カテゴリー ----- */
	.column-item .category{
		margin:0 0 1.28vw;
	}
	.column-item .category span{
		font-size:2.05vw;
		padding:0.51vw 2.3vw;
	}
	/* ----- 日付 ----- */
	.column-item .date{
		font-size:2.56vw;
		margin:0 0 1.28vw;
	}
	/* ----- タイトル ----- */
	.column-item .ttl{
		font-size:2.56vw;
	}
	/* 投稿なし 
	------------------------------------------------- */
	#column .none{
		margin:3.2vw 0;
	}
	/* 「コラム一覧」ボタン 
	------------------------------------------------- */
	#column .btn-wrap{
		margin:2.56vw 0 0;
		text-align:center;
	}


	/*****************************************************
	　補助金　
	*****************************************************/
	#hojokin{
		display:block;
	}
	#hojokin .img,
	#hojokin .txt{
		width:auto;
	}
	/* 画像 
	------------------------------------------------- */
	#hojokin .img{
		border-radius:0 3.07vw 3.07vw 0;
		width:80.76vw;
	}
	/* テキスト 
	------------------------------------------------- */
	#hojokin .txt{
		margin:3.84vw 0 0;
	}
	/* ----- タイトル ----- */
	#hojokin .txt .ttl{
		font-size:7.94vw;
	}
	#hojokin .txt .ttl span{
		background-size:22.56vw auto;
		font-size:5.38vw;
		padding:12.17vw 0 0;
	}
	#hojokin .txt .ttl:after{
		display:none;
	}
	/* ----- サブタイトル ----- */
	#hojokin .txt .subttl{
		font-size:4.1vw;
	}
	/* ----- テキスト ----- */
	#hojokin .txt .text{
		margin:1.92vw 0 0;
	}
	/* ----- 例 ----- */
	#hojokin .txt .ex{
		margin:1.92vw 0 5.76vw;
	}
	#hojokin .txt .ex > dt{
		border-bottom-width:0.25vw;
		font-size:3.33vw;
		line-height:6.41vw;
		margin:0 0 1.53vw;
		padding:0 2.56vw;
	}
	/* 金額 */
	#hojokin .txt .ex > dd .price{
		display:block;
		margin:2.3vw 0 0;
	}
	#hojokin .txt .ex > dd .koujihi,
	#hojokin .txt .ex > dd .futangaku{
		justify-content:center;
	}
	#hojokin .txt .ex > dd .koujihi{
		margin:0 0 8.46vw;
	}
	#hojokin .txt .ex > dd .koujihi:after{
		background:url('../img/common/arrow_green_bottom.png') no-repeat center center;
		background-size:contain;
		bottom:-5.5vw;
		height:4.35vw;
		right:50%;
		transform:translate(50%,0);
		width:4.35vw;
	}
	#hojokin .txt .ex > dd .koujihi .num{
		font-size:4.61vw;
	}
	#hojokin .txt .ex > dd .futangaku .num{
		font-size:5.25vw;
	}
	#hojokin .txt .ex > dd .koujihi .en,
	#hojokin .txt .ex > dd .futangaku .en{
		font-size:4.1vw;
	}
	#hojokin .txt .ex > dd .futangaku > dt{
		background-size:22.05vw auto;
		font-size:3.58vw;
		line-height:7.43vw;
		width:22.05vw;
	}


	/*****************************************************
	　会社情報　
	*****************************************************/
	#company{
		display:block;
		margin:0vw 0 15.38vw;
	}
	/* 画像 
	------------------------------------------------- */
	#company .img{
		border-radius:3.07vw 0 0 3.07vw;
		margin:0 0 0 auto;
		max-width:none;
		width:80.76vw;
	}
	/* テキスト 
	------------------------------------------------- */
	#company .txt{
		margin:8.97vw 0 0;
		width:auto;
	}
	/* ----- テキスト ----- */
	#company .company-box{
		display:block;
	}
	#company .company-box .miyazaki-no1{
		margin:0 auto;
		max-width:none;
		width:47.69vw;
	}
	#company .company-box .sekojisseki{
		margin:5.76vw auto 0;
		max-width:none;
		width:42.94vw;
	}


	/*****************************************************
	　ボタン　
	*****************************************************/
	.btn{
		border-radius:4.1vw;
		width:41.66vw;
	}
	.btn a{
		padding:0 3.2vw;
	}
	.btn a span{
		background-size:4.23vw 3.97vw;
		font-size:2.82vw;
		line-height:8.07vw;
		padding:0 5.12vw 0 0;
	}
}


	/*****************************************************
	　選ばれる理由　
	*****************************************************/

  /* ===== Section Wrapper ===== */
  .reasons-section {
    max-width: 1325px;
    margin: 0 auto;
    background: #f1eeea;
    padding: 60px 20px 72px;
    border-radius: 16px;
  }

  /* ===== Section Header ===== */
  .section-header {
    text-align: center;
    margin-bottom: 56px;
  }

  .section-eyebrow {
    display: inline-block;
    font-size: 14px;
    color: #64b82b;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .section-title {
	font-family: 'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.4;
    margin-bottom: 16px;
  }

  .section-title .highlight {
    color: #64b82b;
	font-size: clamp(28px, 3vw, 45px);  
  }

  .section-lead {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
  }

  /* ===== Cards Grid ===== */
  .reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  /* ===== Individual Card ===== */
  .reason-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
  }

  .reason-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.11);
  }

  /* ===== Photo Area ===== */
  .card-photo {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #e8e4df;
  }

  .card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .reason-card:hover .card-photo img {
    transform: scale(1.04);
  }

  /* Point badge on photo */
  .point-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #64b82b;
    color: #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(100,184,43,0.35);
  }

  .point-badge .pt-label {
    font-size: 10px;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    opacity: 0.9;
  }

  .point-badge .pt-num {
	font-family: 'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;  
    font-size: 30px;
  }

  /* Photo placeholder (no image) */
  .photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #aaa;
  }

  .photo-placeholder svg {
    opacity: 0.4;
  }

  .photo-placeholder span {
    font-size: 12px;
    letter-spacing: 0.05em;
  }

  /* ===== Card Body ===== */
  .card-body {
    padding: 26px 28px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .card-number {
    font-size: 11px;
    font-weight: 700;
    color: #64b82b;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .card-title {
	font-family: 'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;  
    font-size: 20px;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .card-title .keyword {
    color: #64b82b;
    background: rgba(100,184,43,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 23px;
  }

  .card-divider {
    height: 2px;
    width: 36px;
    background: #64b82b;
    border-radius: 2px;
    margin-bottom: 16px;
  }

  .card-text {
    font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.075em;  
    color: #555;
    line-height: 1.85;
    flex: 1;
  }

  /* ===== Bottom decoration ===== */
  .section-footer {
    text-align: center;
    margin-top: 48px;
  }

  .cta-note {
	font-family: 'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
	font-size: 3.3rem; 
    font-weight: 700;
    color: #64b82b;
  }

  .cta-note::before,
  .cta-note::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #64b82b;
  }

  /* ===== Responsive ===== */
  @media (max-width: 900px) {
    .reasons-section { padding: 44px 24px 56px; }
    .reasons-grid { grid-template-columns: 1fr; gap: 20px; }
    .card-photo { height: 200px; }
  }

  @media (max-width: 600px) {
    .reasons-section { padding: 36px 16px 44px; border-radius: 0; }
    .section-title { font-size: 24px; }
	.cta-note { font-size: 18px; } 
	.section-lead { font-size: 14px; }
  }



