@charset "utf-8";
/* Copyright 2022 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

PC、タブレット、スマートフォン共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

トップページ

------------------------------------------------------------ */

/* common.css 上書き
---------------------------------------------- */
.nav_global ul li a{color: #003D79;}

/* メインビジュアル
---------------------------------------------- */
.wrap_main{
	position: relative;
	padding: 30px 30px 0;
}

.main_image{position: relative;}

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

.main_image .image_sub{display: none;}

.main_txt{
	position: absolute;
    left: 5.729vw;
	bottom: 80px;
	color: #FFF;
	line-height: 1.2;
}

.main_txt p:nth-of-type(1){
	font-size: 7rem;
	letter-spacing: 0.15em;
	font-weight: 700;
	margin-bottom: 15px;
}

.main_txt p:nth-of-type(1) br{display: none;}

.main_txt p:nth-of-type(2){
	font-family: 'Oswald';
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 2.8rem;
}

.main_scroll{
	position: absolute;
	bottom: 80px;
	right: 70px;
	transform: rotate(90deg);
    transform-origin: right;
	display: flex;
	align-items: center;
}

.main_scroll::after{
	content: "";
	display: block;
	background: #003D79;
	width: 100px;
	height: 2px;
	margin-left: 20px;
}

.main_scroll span{
	font-family: 'Oswald';
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: 0.03em;
	line-height: 1.1;
	color: #003D79;
}

/* ご挨拶
---------------------------------------------- */
.sec_greeting{
	position: relative;
	padding: 180px 0 150px;
}

.sec_greeting .greeting{
	position: relative;
	max-width: 1050px;
	padding: 0 50px;
	margin: 0 auto;
}

.sec_greeting .greeting::before{
	content: "";
	display: block;
	background: rgba(74,103,255,.2);
	width: 600px;
	height: 600px;
	border-radius: 50%;
	position: absolute;
	top: -410px;
	left: 50%;
	margin-left: 650px;
	z-index: -1;
	filter: blur(47px);
}

.sec_greeting .greeting::after{
	content: "";
	width: calc((100vw - 100%)/2);
	height: 1px;
	background: #003D79;
	position: absolute;
	top: 30px;
	left: calc((100vw - 100%)/2*-1);
}

.sec_greeting .greeting .inner{max-width: 600px;}

.sec_greeting .greeting .inner .lead_txt{
	line-height: 1.6;
	font-weight: 700;
	font-size: 3rem;
	letter-spacing: 0.05em;
	color: #003D79;
	margin-bottom: 40px;
}

.sec_greeting .greeting .inner .lead_txt p br{display: none;}

.sec_greeting .greeting .inner .txt p:not(:last-of-type){margin-bottom: 20px;}

.sec_greeting .wrap_image .image_l{
	position: absolute;
	bottom: 90px;
	right: 50%;
	transform: translateX(-640px);
	width: 310px;
}

.sec_greeting .wrap_image .image_l img{
	width: 100%;
	height: auto;
}

.sec_greeting .wrap_image .image_r{
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(370px);
	width: 580px;
}

.sec_greeting .wrap_image .image_r img{
	width: 100%;
	height: auto;
}

/* 事業内容
---------------------------------------------- */
.sec_business{
	position: relative;
	margin-left: auto;
	width:calc(100% - 150px);
	background: #003D79;
	padding: 150px 167px 150px 150px;
}

.sec_business::before{
	content: "";
	display: block;
	width: 110px;
	height: 1px;
	background: #FFF;
	position: absolute;
	top: 178px;
	right: 0;
}

.sec_business::after{
	content: "";
	display: block;
	background: rgba(74,103,255,.2);
	width: 600px;
	height: 600px;
	border-radius: 50%;
	position: absolute;
	top: -300px;
	left: -300px;
	z-index: -1;
	filter: blur(47px);
}

.sec_business .heading01{
	text-align: right;
	color: #FFF;
}

.list_business01{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -30px -60px;
}

.list_business01 li{
	width: 33.333%;
	padding: 0 30px;
	margin-bottom: 60px;
}

.list_business01 li .business{position: relative;}

.list_business01 li .business .image{margin-left: 100px;}

.list_business01 li .business .image img{
	width: 100%;
	height: auto;
}

.list_business01 li .business .ttl{
	position: absolute;
	top: 0;
	left: 0;
}

.list_business01 li .business .ttl span{
	background: #FFF;
	color: #003D79;
	font-weight: 700;
	font-size: 2.6rem;;
	padding: 10px;
	display: inline-block;
	line-height: 1;
}

.list_business01 li .business .ttl p.sub{margin-bottom: 5px;}

.list_business01 li .business .ttl p.sub span{
	font-size: 1.8rem;
	padding: 7px 10px;
}

.list_business01 li .business .num{
	position: absolute;
	bottom: -2px;
	left: 27px;
	font-family: 'Oswald';
	font-weight: 600;
	font-size: 5rem;
	letter-spacing: 0;
	color: #4A67FF;
}

/* 施工事例
---------------------------------------------- */
.sec_works{
	background: url("../img/home/bg_works01.jpg") no-repeat bottom center;
	background-size: cover;
	padding: 300px 0 150px;
	margin-top: -150px;
}

.works{
	position: relative;
	max-width: 1455px;
	padding: 0 150px;
	margin: 0 auto;
}

.works::before{
	content: "";
    width: calc((100vw - 100% + 200px)/2);
    height: 1px;
    background: #003D79;
    position: absolute;
    top: 30px;
    left: calc((100vw - 100%)/2*-1);
}

.works .btn_type01{
	text-align: center;
	padding-top: 60px;
}

/* 会社概要
---------------------------------------------- */
.sec_overview{
	padding: 30px;
	display: flex;
	justify-content: space-between;
}

.sec_overview .col_l{
	width: calc(50% - 15px);
	background: #003D79;
	padding: 150px 40px;
}

.sec_overview .col_l .overview_inner{
	max-width: 615px;
    margin: 0 auto;
}

.sec_overview .col_l .overview_inner .heading01{
	color: #FFF;
	text-align: center;
}

.sec_overview .col_l .overview_inner .tbl_type01{color: #FFF;}

.sec_overview .col_r{
	width: calc(50% - 15px);
	position: relative;
}

.sec_overview .col_r iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* お問い合わせ
---------------------------------------------- */
.sec_contact{color: #FFF;}

.contact_image{margin-bottom: -8.75%;}

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

.contact_image img.sp{display: none;}

.contact_inner{
	position: relative;
	width: calc(100% - 150px);
	background: #003D79;
	padding: 150px 0;
}

.contact_inner::before{
	content: "";
	display: block;
	background: rgba(74,103,255,.2);
	width: 800px;
    height: 800px;
	border-radius: 50%;
	position: absolute;
	bottom: -400px;
	right: -400px;
	z-index: -1;
	filter: blur(47px);
}

.contact_inner .contact{
	position: relative;
	max-width: 1140px;
	padding: 0 50px;
	margin: 0 auto;
}

.contact_inner .contact::before{
    content: "";
    width: calc((100vw - 100%)/2);
    height: 1px;
    background: #FFF;
    position: absolute;
    top: 30px;
    left: calc((100vw - 100%)/2*-1);
}

.contact_inner .contact .heading01{color: #FFF;}

.txt_privacy{
	text-align: center;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 50px;
}

.txt_privacy button{
	color: #FFF;
	cursor: pointer;
	text-decoration: underline;
	font-size: 1.4rem;
	letter-spacing: 0.05em;
}

.txt_privacy button:hover{text-decoration: none;}

.txt_privacy button.focus-visible{outline-color: #FFF;}

.contact .btn_form{margin-top: 40px;}

/* --個人情報保護方針-- */
#privacy{
    border: 1px solid #1E1E1E;
    height: 303px;
    overflow: hidden;
	line-height: 1.8;
}

#privacy h4{
	font-weight: 700;
	color: #003D79;
}

#privacy p,
#privacy ul{margin-bottom: 25px;}

#privacy p:last-of-type{margin-bottom: 0;}


@media only screen and (min-width:2217px){ /* 表示領域が2217px以上の場合に適用するスタイル */
	
	/* 事業内容
	---------------------------------------------- */
	.sec_business{
		margin-left: max(150px,calc((100% - 1900px)/2));
		width: calc(100% - calc((100% - 1900px)/2));
	}
	
}


@media only screen and (max-width:1600px){ /* 表示領域が1600px以下の場合に適用するスタイル */
	
	/* ご挨拶
	---------------------------------------------- */
	.sec_greeting .greeting .inner{
		width: 60%;
		max-width: unset;
	}
	
	.sec_greeting .wrap_image .image_l{
		display: none;
		transform: none;
	}

	.sec_greeting .wrap_image .image_r{
		width: 35%;
		top: 120px;
		left: unset;
		right: 0;
		bottom: unset;
		transform: none;
	}
	
	/* 事業内容
	---------------------------------------------- */
	.sec_business{padding: 80px 60px;}
	
	.sec_business::before{
		width: 60px;
		top: 108px;
	}
	
	.sec_business .heading01{padding-right: 50px;}
	
	.list_business01{
		justify-content: space-between;
		margin: 0 0 -60px;
	}
	
	.list_business01 li{
		width: calc(50% - 25px);
		padding: 0;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:1400px){ /* 表示領域が1400px以下の場合に適用するスタイル */

	/* お問い合わせ
	---------------------------------------------- */
	.contact_inner .contact::before{
		width:calc((100vw - 100% + 50px)/2);
		left: calc((100vw - 100% - 50px)/2*-1);
	}
	
	.contact_inner .contact .heading01{padding-left: 50px;}

	
}/*--@media--*/


@media only screen and (max-width:1280px){ /* 表示領域が1280px以下の場合に適用するスタイル */

	/* ご挨拶
	---------------------------------------------- */
	.sec_greeting .greeting{margin: 0 100px;}

	
}/*--@media--*/

	
@media only screen and (max-width:1200px){ /* 表示領域が1200px以下の場合に適用するスタイル */
	
	/* メインビジュアル
	---------------------------------------------- */
	.wrap_main{height: 685.16px;}
	
	.main_image{height: 100%;}
	
	.main_image img{
		height: 100%;
		object-fit: cover;
		object-position: right;
	}
	
	.main_txt{bottom: 5.729vw;}
	
	.main_txt p:nth-of-type(1) br{display: block;}
	
	/* ご挨拶
	---------------------------------------------- */
	.sec_greeting .greeting{
		margin: 0;
		padding: 0 80px;
	}
	
	.sec_greeting .greeting::after{
		width: 60px;
		left: 0;
	}

	/* 事業内容
	---------------------------------------------- */
	.sec_business{
		padding: 80px 60px;
		width: calc(100% - 80px);
	}
	
	.sec_business .heading01{padding-right: 20px;}

	.list_business01 li .business .ttl span{
		font-size: 2.2rem;;
		padding: 9px;
	}

	.list_business01 li .business .ttl p.sub span{
		font-size: 1.4rem;
		padding: 6px 9px;
	}

	.list_business01 li .business .num{
		bottom: -9px;
		left: 17px;
		font-size: 4rem;
	}

	/* 施工事例
	---------------------------------------------- */
	.works{padding: 0 80px;}
	
	.works::before{
		width: 60px;
		left: 0;
	}
	
	/* 会社概要
	---------------------------------------------- */
	.sec_overview .col_l{padding: 80px 40px;}

	/* お問い合わせ
	---------------------------------------------- */
	.contact_inner{
		padding: 80px 0;
		width: calc(100% - 80px);
	}
	
	.contact_inner .contact .heading01{padding-left: 20px;}
	
}/*--@media--*/


@media print{ /* 印刷時のみ */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	/* 事業内容
	---------------------------------------------- */	
	.list_business01 li .business .image{margin-left: 0;}
	
	.list_business01 li .business .ttl,
	.list_business01 li .business .num{position: initial;}
	
	
}/*--@media--*/


@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	/* common.css 上書き
	---------------------------------------------- */
	.nav_global ul li a{color: #FFF;}
	
	/* メインビジュアル
	---------------------------------------------- */
	.wrap_main{height: 100vh;}
	
	.main_image img{object-position: top;}
	
	.main_image .image_sub{
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 50.704%;
    	max-width: 360px;
	}
	
	/* ご挨拶
	---------------------------------------------- */
	.sec_greeting .greeting .inner{width: 100%;}

	.sec_greeting .wrap_image .image_r{display: none;}
	
	/* 施工事例
	---------------------------------------------- */
	.list_business01 li .business .image{margin-left: 75px;}

	/* 会社概要
	---------------------------------------------- */
	.sec_overview{display: block;}

	.sec_overview .col_l{
		width: 100%;
		margin-bottom: 30px;
	}

	.sec_overview .col_l .overview_inner{
		max-width: 615px;
		margin: 0 auto;
	}

	.sec_overview .col_r{
		width: 100%;
		padding-top: 45.83%;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	トップページ

	------------------------------------------------------------ */
	
	/* メインビジュアル
	---------------------------------------------- */
	.wrap_main{padding: 30px 10px 0;}
	
	.main_txt{
		bottom: 30px;
    	left: 30px;
	}
	
	.main_txt p:nth-of-type(1){
		font-size: 10.133vw;
		line-height: 1.3;
	}
	
	.main_txt p:nth-of-type(2){font-size: 4vw;}
	
	.main_scroll{
		bottom: 30px;
		right: 20px;
	}
	
	.main_scroll::after{
		width: 60px;
		height: 1px;
		margin-left: 10px;
	}
	
	.main_scroll span{font-size: 1rem;}
	
	/* ご挨拶
	---------------------------------------------- */
	.sec_greeting{padding: 90px 0 3vw;}

	.sec_greeting .greeting{padding: 0 30px;}
	
	.sec_greeting .greeting::before{
		width: 350px;
		height: 350px;
		top: -140px;
		left: auto;
		right: -167px;
		margin-left: 0;
	}
	
	.sec_greeting .greeting::after{
		width: 15px;
		top: 18px;
		left: 0;
	}

	.sec_greeting .greeting .inner .lead_txt{
		font-size: 2.8rem;
		margin-bottom: 30px;
	}

	.sec_greeting .greeting .inner .lead_txt p br{display: block;}
	
	.sec_greeting .wrap_image{
		display: flex;
		justify-content: space-between;
	}
	
	.sec_greeting .wrap_image .image_l{
		display: block;
		position: unset;
		width: 29.33%;
		padding-top: 80px;
	}
	
	.sec_greeting .wrap_image .image_r{
		display: block;
		position: unset;
		width: 56%;
	}

	/* 事業内容
	---------------------------------------------- */
	.sec_business{
		width: calc(100% - 10px);
		padding: 80px 15px;
	}
	
	.sec_business::before{
		width: 15px;
		top: 98px;
	}
	
	.sec_business::after{
		width: 350px;
		height: 350px;
		top: -170px;
		left: -170px;
	}
	
	.sec_business .heading01{padding-right: 13px;}
	
	.list_business01{
		display: block;
		margin: 0;
	}
	
	.list_business01 li{
		width: 100%;
		margin-bottom: 40px;
	}
	
	.list_business01 li:last-of-type{margin-bottom: 0;}
	
	/* 施工事例
	---------------------------------------------- */
	.sec_works{
		background: url("../img/home/bg_works01_sp.jpg") no-repeat center bottom;
		background-size: 100%;
		padding: 70px 15px 60px;
		margin-top: 0;
	}
	
	.works{padding: 0;}
	
	.works::before{
		width: 15px;
		top: 18px;
		left: -15px;
	}
	
	.works .heading01{padding-left: 15px;}
	
	.works .btn_type01{padding-top: 50px;}
	
	/* 会社概要
	---------------------------------------------- */
	.sec_overview{padding: 15px;}
	
	.sec_overview .col_l{
		padding: 80px 20px;
		margin-bottom: 15px;
	}

	.sec_overview .col_l .overview_inner{
		max-width: 615px;
		margin: 0 auto;
	}

	.sec_overview .col_r{
		padding-top: 100%;
	}
	
	/* お問い合わせ
	---------------------------------------------- */
	.contact_image{margin-bottom: -21.333%;}

	.contact_image img.pc{display: none;}
	.contact_image img.sp{display: block;}

	.contact_inner{
		width: calc(100% - 10px);
		padding: 80px 0;
	}
	
	.contact_inner::before{
		width: 350px;
		height: 350px;
		bottom: -137px;
		right: -163px;
	}
	
	.contact_inner .contact{
		padding: 0 15px;
	}
	
	.contact_inner .contact .heading01{padding-left: 15px;}
	
	.contact_inner .contact::before{
		top: 18px;
		left: 0;
		width: 15px;
	}
	
	/* --個人情報保護方針-- */
	#privacy{line-height: 1.6;}

	#privacy p,
	#privacy ul{margin-bottom: 20px;}
	

}/*--@media--*/