@charset "UTF-8";
/*------------------------
トップイメージ
------------------------*/
.top-bg{
	background: #fff url(../img/common/pattern_line_w.png);
}
#topimg .inner{
	padding: 0 6.25vw 80px;
	display: flex;
	justify-content: space-between;
	position: relative;
}
#topimg .inner::before{
	content: "";
	width: 19.64vw;
	height: 17.19vw;
	background: url(../img/index/top_illust_01.svg) no-repeat;
	background-size: contain;
	position: absolute;
	right: 20px;
	bottom: 0;
}
#topimg .text-wrap{
	width: 580px;
	margin-right: 5.21vw;
	padding-top: 60px;
	position: relative;
}
#topimg .text-wrap::after{
	content: "";
	width: 14.58vw;
	height: 18.54vw;
	background: url(../img/index/top_illust_02.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -80px;
	left: 540px;
}
#topimg .text-wrap .sub{
	width: 490px;
	height: 47px;
	background: var(--bg_grad);
	background: var(--bg_grad2);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 10px;
}
#topimg .text-wrap .middle{
	font-size: 38px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .04em;
	margin-bottom: 25px;
}
#topimg .text-wrap h1{
	width: 100%;
	margin-bottom: 170px;
	position: relative;
}
#topimg .text-wrap h1::before{
	content: "";
	width: 131px;
	height: 96px;
	background: url(../img/index/top_bg_house.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: -30px;
	right: 60px;
}
#topimg .text-wrap h1::after{
	content: "";
	width: 180px;
	height: 160px;
	background: url(../img/index/solar_illust.svg) no-repeat;
	background-size: contain;
	position: absolute;
	top: 120px;
	right: -10px;
}
#topimg .text-wrap h1 img{
	position: relative;
	z-index: 10;
	width: 100%;
}
/* #topimg .text-wrap .txt{
	margin-bottom: 5px;
}
#topimg .text-wrap .txt span{
	font-size: 20px;
	display: inline-block;
	font-weight: 600;
	background: linear-gradient(transparent 60%, #fce6ce 70%);
	line-height: 1.5;
	letter-spacing: 0;
}
#topimg .text-wrap .graph{
	width: 320px;
	position: absolute;
	bottom: -50px;
} */

#topimg .box-wrap {
	display: flex;
}
#topimg .box-wrap .box{
	width: 240px;
	background: #fff;
	margin-right: 10px;
}
#topimg .box-wrap .box .ttl{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	background: var(--blue);
	color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 5px 0;
}
#topimg .box-wrap .box:nth-child(2) .ttl{
	background: var(--orange);
}
#topimg .box-wrap .box .textarea{
	padding: 8px 10px 15px;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	border: 1px solid var(--blue);
}
#topimg .box-wrap .box:nth-child(2) .textarea{
	border: 1px solid var(--orange);
}
#topimg .box-wrap .box .textarea b{
	font-size: 30px;
	padding: 0 2px;
}
#topimg .text-wrap .min{
	font-size: 14px;
}

#topimg .main{
	flex: 1;
	width: 990px;
	height: 595px;
}
#topimg .main img{
	border-radius: 30px;
	object-fit: cover;
}

@media screen and ( max-width:1220px) {
	#topimg .inner{
		padding: 0 76px 80px;
	}
	#topimg .text-wrap{
		margin-right: 63px;
	}
	#topimg .inner::before{
		width: 239px;
		height: 209px;
	}
	#topimg .text-wrap::after{
		width: 177px;
		height: 225px;
	}
}

/*------------------------
受賞
------------------------*/
#award{
	background: var(--bg_grad);
	background: var(--bg_grad2);
}
#award .inner{
	padding: 25px 0;
	display: flex;
	justify-content: space-between;
}
#award .box{
	background: #fff;
	width: 378px;
	border-radius: 8px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 20px 30px;
}
#award .box::before,#award .box::after{
	content: "";
	width: 54px;
	height: 90px;
	background: url(../img/index/award_bg.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -30px;
	top: 0;
	margin: auto;
}
#award .box::before{
	left: 15px;
	transform: scale(-1, 1);
}
#award .box::after{
	right: 15px;
}
#award .box .in{
	position: relative;
	z-index: 10;
}
#award .box .ttl{
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
}
#award .box .ttl b{
	color: var(--orange);
}
#award .box b.num{
	color: var(--orange);
	font-size: 44px;
	line-height: 1;
	letter-spacing: -.04em;
	padding: 0 3px;
}
#award .box .min{
	font-weight: 500;
	line-height: 1.3;
	padding-top: 8px;
}

/* 1つめ */
#award .box.box01 .ttl{
	margin-bottom: 10px;
}
#award .box.box01  b.num{
	font-size: 34px;
}
#award .box.box01 .txt{
	font-weight: 600;
	display: flex;
	align-items: baseline;
	justify-content: center;
}
#award .box.box01 .txt p{
	margin-right: 12px;
	font-size: 20px;
}

/* 2つめ */
#award .box.box02 .textarea{
	font-size: 14px;
	margin-top: 10px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.5;
}


/*------------------------
まずは無料でご相談ください
------------------------*/
#top-contact{
	background: #faeabd;
}
#top-contact .inner{
	padding: 60px 0;
}
#top-contact .text{
	width: 800px;
	text-align: center;
	margin: 0 auto;
}
#top-contact .hukidasi{
	padding-bottom: 20px;
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 420px;
	background: var(--orange);
	height: 80px;
	clip-path: polygon(
		/* 左上 */     0%   0%,
		/* 右上 */   100%   0%,
		/* 右下ベース */100% 80%,
		/* 三角の右根元 */53% 80%,
		/* 三角の先端 */ 50% 95%,
		/* 三角の左根元 */47% 80%,
		/* 左下ベース */ 0%  80%
	);
	/* Safari などのためにベンダープレフィックスも併記するとより安全です */
	-webkit-clip-path: polygon(
		0% 0%, 100% 0%, 100% 80%, 53% 80%, 50% 95%, 47% 80%, 0% 80%
	);
	font-size: 28px;
	color: #fff;
	font-weight: bold;
}
#top-contact .hukidasi::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
	transform: skewX(-20deg);
	animation: diagonalShine 2.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes diagonalShine {
	0% {
	transform: translateX(-150%) translateY(-150%) skewX(-20deg);
	opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(150%) translateY(150%) skewX(-20deg);
		opacity: 0;
	}
}
#top-contact .hukidasi span{
	padding-top: 7px;
	display: inline-block;
}

#top-contact .hukidasi::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--orange) transparent transparent transparent;
	border-width: 15px 12px 0px 12px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -14px;
	margin: auto;
}
#top-contact h2{
	font-size: 36px;
	line-height: 1.6;
	margin-bottom: 30px;
	background: linear-gradient(transparent 70%, #ffd5a6 40%);
	display: inline-block;
}

/* --- タブ --- */
#top-contact .tab-buttons {
	display: flex;
}
#top-contact .tab-button {
    padding: 30px 20px;
    cursor: pointer;
    background: #ffffff;
    width: 45%;
    font-size: 34px;
    text-align: center;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    margin-left: 15px;
}
#top-contact .tab-button.active {
	background: #0d5388;
	color: #fff;
}

/* --- タブコンテンツ --- */
#top-contact .tab-contents {
	border: 3px solid #0d5388;
	padding: 40px 50px 50px;
	background: #fff;
	border-radius: 12px;
}
#top-contact .tab-content {
	display: none;
}
#top-contact .tab-content.active {
	display: block;
}
#top-contact .tab-contents h3{
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
	line-height: 1.4;
	letter-spacing: .05em;
}
#top-contact .tab-contents h3::before,
#top-contact .tab-contents h3::after{
	content: '';
	width: 6px;
	height: 32px;
	border-radius: 50px;
	background: var(--orange);
	margin-top: 4px;
}
#top-contact .tab-contents h3::before{
	margin-right: 25px;
	transform: rotate(-25deg);
}
#top-contact .tab-contents h3::after{
	margin-left: 25px;
	transform: rotate(25deg);
}
#top-contact .tab-contents .docs{
	background: #c9c9c9;
	width: 580px;
	height: 600px;
	margin-right: 40px;
}
#top-contact .txt-wrap{
	flex: 1;
}
#top-contact .txt-wrap .point-wrap{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
}
#top-contact .txt-wrap .point-wrap li{
	display: inline-block;
	background: #0d5388;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	padding: 3px 17px 5px;
	margin-right: 8px;
	border-radius: 5px;
}
#top-contact .txt-wrap .merit{
	margin-bottom: 20px;
}
#top-contact .txt-wrap .merit li{
	font-size: 21px;
	line-height: 1.4;
	margin-bottom: 5px;
	font-weight: 500;
}
#top-contact .txt-wrap .merit li:last-child{
	margin-bottom: 0;
}

/* コンタクト */
#top-contact .btn-wrap .btn a{
	width: 460px;
	height: 90px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: .04em;
	background: linear-gradient(to right, #f08309, #f4b91b) border-box border-box;
	padding: 3px;
	border-radius: 70px;
	margin-bottom: 10px;
}
#top-contact .btn-wrap .btn a span{
	background: #fff8f0;
	width: 100%;
	height: 100%;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
#top-contact .btn-wrap .btn a span b{
	font-size: 24px;
	position: relative;
}
#top-contact .btn-wrap .btn a span::after{
	content: '';
	width: 8px;
	height: 8px;
	border-bottom: 2px solid var(--orange);
	border-left: 2px solid var(--orange);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	transition: all .3s ease 0s;
}
#top-contact .btn-wrap .btn.request a span::before{
	content: "";
	background: url(../img/common/icon_data_o.svg) no-repeat;
	background-size: contain;
	width: 44px;
	height: 58px;
	position: absolute;
	left: 30px;
}
/* 色変更 */
#top-contact .btn-wrap .btn.estimate a{
	background: linear-gradient(to right, #1cb7c1, #7febec) border-box border-box;
}
#top-contact .btn-wrap .btn.estimate a span{
	background: #f7ffff;
}
#top-contact .btn-wrap .btn.estimate a span::before{
	content: "";
	background: url(../img/common/icon_estimate_b.svg) no-repeat;
	background-size: contain;
	width: 46px;
	height: 57px;
	position: absolute;
	left: 30px;
	z-index: 0;
}
#top-contact .btn-wrap .btn.estimate a span::after{
	border-bottom: 2px solid #27bdc6;
	border-left: 2px solid #27bdc6;
}


/*------------------------
コストリノベーションが選ばれる理由
------------------------*/
#value .inner{
	padding: 60px 0 70px;
}
#value .ttl-wrap{
	margin-bottom: 25px;
}
#value .ttl-wrap .sub{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	font-weight: 500;
	margin-bottom: 5px;
}
#value .ttl-wrap .sub::before,#value .ttl-wrap .sub::after{
	content: '';
	width: 4px;
	height: 22px;
	border-radius: 50px;
	background: var(--blue);
	margin-top: 2px;
}
#value .ttl-wrap .sub::before{
	margin-right: 20px;
	transform: rotate(-25deg);
}
#value .ttl-wrap .sub::after{
	margin-left: 20px;
	transform: rotate(25deg);
}
#value .ttl-wrap h2{
	line-height: 1.3;
	font-size: 42px;
}

#value .top-in{
	width: 1100px;
	margin: 0 auto 110px;
	justify-content: space-between;
}
/* graph */
#value .graph-wrap{
	width: 450px;
	margin-right: 60px;
}
#value .graph-wrap .ttl{
	background: var(--blue);
	color: #fff;
	text-align: center;
	padding: 8px;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}
/* #value .graph-wrap .sub{
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 25px;
}
#value .graph-wrap .sub span{
	font-size: 18px;
	color: #ed632d;
} */
#value .graph-wrap .graph{
	margin-bottom: 10px;
}
#value .graph-wrap .min{
	line-height: 1.4;
}

/* text */
#value .text-wrap{
	flex: 1;
}
#value .text-wrap .ttl{
	font-size: 32px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: .05em;
	margin-bottom: 10px;
}
#value .text-wrap .textarea{
	font-size: 18px;
	line-height: 1.7;
	margin-bottom: 20px;
}
#value .text-wrap .point-wrap{
	display: flex;
	flex-wrap: wrap;
}
#value .text-wrap .point-wrap .point{
	width: 266px;
	min-height: 95px;
	border: 3px solid #f08309;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-right: 12px;
	margin-bottom: 12px;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	color: #f08309;
	position: relative;
	padding: 15px;
}
#value .text-wrap .point-wrap .point:nth-child(1)::before{
	content: "";
	width: 60px;
	height: 75px;
	background: url(../img/index/value_point_icon01.svg) no-repeat;
	background-size: contain;
	position: absolute;
	z-index: -1;
	left: 25px;
}
#value .text-wrap .point-wrap .point:nth-child(2)::before{
	content: "";
	width: 77px;
	height: 77px;
	background: url(../img/index/value_point_icon02.svg) no-repeat;
	background-size: contain;
	position: absolute;
	z-index: -1;
	left: 25px;
}
#value .text-wrap .point-wrap .point:nth-child(3)::before{
	content: "";
	width: 66px;
	height: 60px;
	background: url(../img/index/value_point_icon03.svg) no-repeat;
	background-size: contain;
	position: absolute;
	z-index: -1;
	left: 25px;
}

/* 悩み */
#value .solution{
	background: #fcf0c7 url(../img/index/value_illust_bg.png) no-repeat bottom right;
	background-size: 528px 245px;
	border-radius: 20px;
}
#value .solution .s-ttl{
	text-align: center;
}
#value .solution .s-ttl span{
	width: auto;
	height: 65px;
	background: #0d5388;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	font-weight: 600;
	margin: -35px auto 30px;
	position: relative;
	padding: 20px;
}
#value .solution .s-ttl span::before{
	content: "";
	width: 36px;
	height: 47px;
	background: url(../img/index/value_nayami.svg) no-repeat;
	background-size: contain;
	position: absolute;
	left: -35px;
	top: -30px;
	transform: rotate(-35deg);
}
#value .solution .flex-box{
	padding: 0 50px 0px 70px;
	align-items: flex-end;
}
#value .solution .txt{
	flex: 1;
}
#value .solution h3{
	font-size: 30px;
	line-height: 1.4;
	letter-spacing: .04em;
	font-weight: 600;
	margin-bottom: 35px;
}
#value .solution h3 span{
	background:linear-gradient(transparent 60%, #fcd4c5 60%);
}
#value .solution ul{
	margin-bottom: 50px;
}
#value .solution ul li{
	display: flex;
	align-items: center;
	font-size: 21px;
	font-weight: 500;
	margin-bottom: 10px;
}
#value .solution ul li span{
	flex: 1;
}
#value .solution ul li::before{
	content: "";
	width: 27px;
	height: 27px;
	background: url(../img/index/value_check.svg) no-repeat;
	background-size: contain;
	display: block;
	margin-right: 8px;
}
#value .solution .illust{
	width: 455px;
	height: 290px;
	margin-left: 30px;
}


/*------------------------
安心してお任せください。
------------------------*/
#results {
	background: url(../img/index/results_bg.jpg) no-repeat fixed center;
	position: relative;
}
#results::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	border-width: 56px 50px 0px 50px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
}
#results .inner{
	padding: 70px 0 70px;
}

#results  .flex-box{
	justify-content: space-between;
	margin-bottom: 50px;
}
#results .text{
	flex: 1;
}
#results .text h2 {
	margin-bottom: 25px;
}
#results .text h2 .logo {
	display: flex;
	align-items: baseline;
	font-size: 28px;
	line-height: 1;
	margin-bottom: 5px;
}
#results .text h2 .logo img{
	width: 370px;
	margin-right: 8px;
}
#results .text h2 .logo span{
	padding-bottom: 5px;
}
#results .text h2 .col{
	font-size: 40px;
	line-height: 1;
	margin-bottom: 10px;
}
#results .text h2 .col span{
	margin-left: 5px;
}
#results .text h2 .txt{
	font-size: 40px;
	line-height: 1;
}
#results .text .textarea{
	font-size: 20px;
	letter-spacing: .04em;
}
#results .main{
	width: 512px;
	height: 346px;
	margin-left: 50px;
}
#results .main img{
	border-radius: 12px;
}

/* トラブル */
#results .trouble-ttl{
	background: var(--black);
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	padding: 15px 15px;
	border-radius: 15px 15px 0 0;
}
#results .trouble{
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 0 0 12px 12px;
	justify-content: space-between;
	padding: 35px 35px 30px;
	margin-bottom: 30px;
}
#results .trouble .ng{
	width: 500px;
	position: relative;
}
#results .trouble .ng::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent var(--orange);
	border-width: 23.5px 0px 23.5px 25px;
	position: absolute;
	right: -50px;
	top: 0;
	bottom: 0;
	margin: auto;
}
#results .trouble .ng .ttl{
	height: 44px;
	background: var(--black);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 12px;
	position: relative;
}
#results .trouble .ng .ttl::before{
	content: "";
	width: 38px;
	height: 33px;
	background: url(../img/index/results_notics.svg) no-repeat;
	background-size: contain;
	position: absolute;
	left: 100px;
}
#results .trouble .ng ul{
	display: flex;
	flex-wrap: wrap;
}
#results .trouble .ng ul li{
	display: flex;
	align-items: baseline;
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 2px;
	line-height: 1.4;
}
#results .trouble .ng ul li::before{
	content: "";
	width: 20px;
	height: 20px;
	background: url(../img/index/results_point.svg) no-repeat;
	background-size: contain;
	display: block;
	margin: 8px 6px 0 0;
}
#results .trouble .ng ul li span {
	flex: 1;
}
#results .trouble .ok{
	width: 545px;
	position: relative;
}
#results .trouble .ok::after{
	content: "";
	background: url(../img/index/results_illust_ok.png) no-repeat;
	background-size: contain;
	width: 216px;
	height: 180px;
	position: absolute;
	right: -20px;
	bottom: -34px;
	z-index: 10;
}
#results .trouble .ok .ttl{
	font-size: 26px;
	color: var(--blue);
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 10px;
}
#results .trouble .ok .textarea{
	font-size: 20px;
	position: relative;
	z-index: 10;
}
#results .trouble .ok .textarea::after{
	content: "";
	background: url(../img/index/results_ok.svg) no-repeat;
	background-size: contain;
	width: 105px;
	height: 105px;
	position: absolute;
	left: 250px;
	z-index: -1;
	bottom: 0;
	top: 0;
}
#results .trouble .ok .textarea b{
	color: var(--orange);
}
/* 表彰 */
#results .prize{
	display: flex;
	background: #fff;
	border-radius: 12px;
	justify-content: space-between;
	padding: 35px;
	margin-bottom: 30px;
}
#results .prize .text-wrap {
	flex: 1;
}
#results .prize .text-wrap .logo{
	font-size: 25px;
	font-weight: bold;
	display: flex;
	align-items: baseline;
	margin-bottom: 10px;
}
#results .prize .text-wrap .logo img{
	width: 283px;
	margin-right: 5px;
}
#results .prize .text-wrap ul {
	margin-bottom: 10px;
}
#results .prize .text-wrap ul li{
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 8px;
	display: flex;
}
#results .prize .text-wrap ul li::before{
	content: "";
	width: 23px;
	height: 19px;
	background: url(../img/index/icon_crown.svg) no-repeat;
	background-size: contain;
	display: block;
	margin: 2px 10px 0 0;
}
#results .prize .text-wrap ul li p {
	flex: 1;
}
#results .prize .text-wrap .caution {
	background: #f6f6f6;
	padding: 15px;
	line-height: 1.5;
}
#results .prize .image-wrap {
	width: 440px;
	height: auto;
	margin-left: 30px;
}

/* 取り扱いメーカー */
#results .maker{
	background: #fff;
	border-radius: 12px;
	padding: 35px;
}
#results .maker .flex{
	display: flex;
	justify-content: space-between;
}
#results .maker .ttl{
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 22px;
}
#results .maker .box{
	width: 49%;
	background: #f6f6f6;
	border-radius: 20px;
}
#results .maker .box .b-ttl{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	background: var(--blue);
	color: #fff;
	border-radius: 12px 12px 0 0;
	padding: 6px 0;
}
#results .maker .box:nth-child(2) .b-ttl{
	background: var(--orange);
}
#results .maker .box ul{
	display: flex;
	flex-wrap: wrap;
	padding: 15px 30px 20px;
}
#results .maker .box ul li{
	width: 33%;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px;
}
#results .maker .box ul li::before{
	content: "・";
}


/*------------------------
コストリノベーションが選ばれる理由
------------------------*/
#reason{
	overflow: hidden;
}
#reason .inner{
	padding: 60px 0 120px;
}
#reason .ttl-wrap{
	margin-bottom: 25px;
}
#reason .sub-text{
	margin-bottom: 40px;
}

#reason .block-wrap .block{
	display: flex;
	position: relative;
	margin-bottom: 95px;
}
#reason .block-wrap .block:last-child{
	margin-bottom: 0;
}
#reason .block-wrap .block::before{
	content: "";
	width: 100vw;
	height: calc(100% + 10px);
	background: var(--bg_grad);
	background: var(--bg_grad2);
	opacity: 0.13;
	position: absolute;
	z-index: -1;
	top: 40px;
	right: 0;
	margin-left: calc(50% - 50vw);
	border-radius: 0 20px 20px 0;
}
#reason .block-wrap .block .main{
	width: 373px;
	height: 305px;
	margin-right: 40px;
}
#reason .block-wrap .block .main img{
	object-fit: cover;
	border-radius: 12px;
}
#reason .block-wrap .block .text-wrap{
	flex: 1;
	padding-top: 20px;
	padding-right: 40px;
}
#reason .block-wrap .block .point{
	width: 153px;
	height: 48px;
	background: #ffd956;
	display: flex;
	align-items: baseline;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	border-left: 13px solid #f5a044;
	padding-right: 13px;
	line-height: 1;
	margin-bottom: 15px;
}
#reason .block-wrap .block .point b{
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	margin: 6px 0 0 5px;
}
#reason .block-wrap .block h3{
	font-size: 32px;
	margin-bottom: 10px;
	line-height: 1.4;
	letter-spacing: .05em;
}
#reason .block-wrap .block .textarea{
	font-size: 19px;
	letter-spacing: .04em;
}

/* 偶数 */
#reason .block-wrap .block:nth-child(2n){
	flex-direction: row-reverse;
}
#reason .block-wrap .block:nth-child(2n)::before{
	margin-left: 0;
	margin-right: calc(50% - 50vw);
	right: auto;
	left: 0;
	border-radius: 20px 0 0 20px;
}
#reason .block-wrap .block:nth-child(2n) .text-wrap{
	padding-right: 0;
	padding-left: 40px;
}
#reason .block-wrap .block:nth-child(2n) .main{
	margin-right: 0;
	margin-left: 40px;
}

/* スタッフ */
#reason .block-wrap .block:nth-child(4) .textarea{

}
#reason .block-wrap .block:nth-child(4) .btn a{
	width: 340px;
	height: 76px;
	background: var(--bg_grad);
	background: var(--bg_grad2);
	font-size: 20px;
	color: #fff;
	letter-spacing: .04em;
	font-weight: 600;
	margin-top: 20px;
	position: relative;
}
#reason .block-wrap .block:nth-child(4) .btn a::after{
	content: '';
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	transition: all .3s ease 0s;
}


/*------------------------
導入事例
------------------------*/
#case{
	background: #f6f6f6;
}
#case .inner{
	padding: 60px 0 70px;
}
#case .ttl-wrap{
	margin-bottom: 25px;
}
#case .sub-text{
	margin-bottom: 30px;
}

#case .btn a{
	width: 360px;
	height: 76px;
	background: var(--bg_o-grad);
	background: var(--bg_o-grad2);
	color: #fff;
	font-size: 20px;
	margin: 0 auto;
	position: relative;
}
#case .btn a::after{
	content: '';
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	transition: all .3s ease 0s;
}

#case .block-outer {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
}
#case .block-outer .block {
	width: 276px;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 32px;
  box-shadow: 0px 0px 20px 0px rgba(170, 170, 170, 0.15);
		border-radius: 10px;
}

#case .block-outer .block a {
	transition: opacity .3s ease 0s;
}

#case .block-outer .block a:hover {
	opacity: .8;
}

#case .block-outer .block .img {
	height: 250px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

#case .block-outer .block .img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#case .block-outer .block .text-area {
	padding: 20px;
}

#case .block-outer .block h3 {
	font-size: 18px;
	margin-bottom: 10px;
	line-height: 1.47;
}

#case .block .category-list {
	display: flex;
	flex-wrap: wrap;
}

#case .block .category-list li {
	display: inline-block;
	padding: 3px 10px 5px;
	border-radius: 100px;
	background: var(--blue);
	color: #fff;
	margin: 2px 7px 2px 0;
	font-size: 14px;
}

/*------------------------
よくある質問
------------------------*/
#faq .inner{
	padding: 60px 0 70px;
}
#faq .ttl-wrap{
	margin-bottom: 25px;
}
#faq .sub-text{
	margin-bottom: 30px;
}

#faq .faq-list{
	width: 1100px;
	margin: 0 auto;
}
#faq .faq-list .item {
	margin-bottom: 30px;
}
#faq .faq-list .item .q-box {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	cursor: pointer;
	background: #ecedee;
	border-radius: 10px;
	padding: 0 60px 0 0;
}
#faq .faq-list .item .q-box::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--black);
	transition: all .3s ease 0s;
	right: 25px;
	width: 4px;
	height: 25px;
	border-radius: 8px;
}
#faq .faq-list .item .q-box::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--black);
	right: 15px;
	width: 25px;
	height: 4px;
	border-radius: 8px;
}
#faq .faq-list .item .q-box.on::before {
	transform: translateY(-50%) rotate(-270deg);
}
#faq .faq-list .item .en {
	color: #fff;
	background: var(--black);
	font-weight: bold;
	border-radius: 10px 0 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 5px;
	width: 60px;
	height: auto;
	font-size: 34px;
	line-height: 1;
}
#faq .faq-list .item .a-box{
	display: none;
	padding-top: 20px;
	border-bottom: 1px solid #147bd8;
	margin-bottom: 30px;
}
#faq .faq-list .item .q-box h3 {
	flex: 1;
	padding: 18px 0px 18px 30px;
	font-size: 18px;
}
#faq .faq-list .item .a-box .txt {
	text-align: justify;
	font-weight: 500;
	font-size: 18px;
	padding-bottom: 25px;
}