@charset "UTF-8";
/*
	Filename: daikibo
	Version: 1.0.4
*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------
	PC , daikibo page
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------
	各セクション共通(common.cssの.wrap相当の幅)
------------------------------------------------------*/
#daikibo_proposal,
#daikibo_scaffold,
#daikibo_works {
	width: 1100px;
	margin: 0 auto 100px;
}

/* 最初のセクションは上部のACFコンテンツとの間に余白を確保 */
#daikibo_proposal {
	margin-top: 80px;
}

#daikibo_works {
	margin-bottom: 50px;
}


/*-----------------------------------------------------
	矢印(Font Awesome)共通スタイル
------------------------------------------------------*/
.proposal_arrow,
.works_arrow {
	flex: 0 0 auto;
	font-size: 4.5rem;
	color: #EC6B38;  /* サイトのオレンジ */
	line-height: 1;
}


/*-----------------------------------------------------
	ご提案例(1100px幅いっぱいに展開)
------------------------------------------------------*/
.proposal_flow {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}

.proposal_current {
	flex: 0 0 320px;
}

.proposal_current img {
	width: 100%;
	height: auto;
}

.proposal_options {
	flex: 0 0 auto;
	gap: 20px;
	justify-content: flex-start;
}

.proposal_options img {
	width: 320px;
	height: auto;
}

.proposal_comment {
	margin-top: 20px;
	font-size: 1.6rem;
	text-align: center;
}


/*-----------------------------------------------------
	足場組立の様子(1100px幅いっぱいに展開)
------------------------------------------------------*/
.scaffold_photo {
	justify-content: space-between;
	align-items: flex-start;
}

.scaffold_photo img {
	width: 48%;
	height: auto;
}


/*-----------------------------------------------------
	施工例(Before / After, 1100px幅いっぱいに展開)
------------------------------------------------------*/
.works_item {
	align-items: center;
	justify-content: space-between;
	margin-bottom: 60px;
}

.works_item:last-child {
	margin-bottom: 0;
}

.works_before,
.works_after {
	flex: 0 0 47%;
	text-align: center;
}

.works_label {
	margin-bottom: 15px;
	font-size: 1.6rem;
	font-weight: 700;
	color: #1A1311;
}

.works_before img,
.works_after img {
	width: 100%;
	height: auto;
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------
	~767px SP
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

	/*-----------------------------------------------------
		各セクション共通
	------------------------------------------------------*/
	#daikibo_proposal,
	#daikibo_scaffold,
	#daikibo_works {
		width: 90%;
		margin: 0 auto 70px;
	}

	/* SP版: 最初のセクションの上余白(PCより小さめ) */
	#daikibo_proposal {
		margin-top: 50px;
	}

	#daikibo_works {
		margin-bottom: 30px;
	}


	/*-----------------------------------------------------
		矢印(SP版): 縦向きに回転、サイズ調整
	------------------------------------------------------*/
	.proposal_arrow,
	.works_arrow {
		transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		font-size: 3.5rem;
	}


	/*-----------------------------------------------------
		ご提案例
	------------------------------------------------------*/
	.proposal_flow {
		flex-direction: column;
		gap: 20px;
	}

	.proposal_current {
		flex: 0 0 auto;
		width: 90%;
		max-width: 360px;
		margin: 0 auto;
	}

	.proposal_options {
		flex-direction: column;
		gap: 20px;
		align-items: center;
		width: 100%;
	}

	.proposal_options img {
		width: 90%;
		max-width: 360px;
	}

	.proposal_comment {
		font-size: 1.4rem;
	}


	/*-----------------------------------------------------
		足場組立の様子
	------------------------------------------------------*/
	.scaffold_photo {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.scaffold_photo img {
		width: 90%;
		max-width: 360px;
	}


	/*-----------------------------------------------------
		施工例(Before / After)
	------------------------------------------------------*/
	.works_item {
		flex-direction: column;
		gap: 15px;
		margin-bottom: 50px;
	}

	.works_before,
	.works_after {
		flex: 0 0 auto;
		width: 90%;
		max-width: 360px;
	}

	.works_label {
		font-size: 1.4rem;
	}
}