@charset "utf-8";

/* -----------------------------
	top-area
-------------------------------- */
#solution .page-title-area .mv-img{
	position: relative;
}
#solution .top-area{
	padding: 60px 0;
	background: url(../img/bg-green.jpg) center/cover , no-repeat;
	color: #fff;
}
#solution .top-area .inner{
	display: grid;
	grid-template-areas: "catch txt";
}
#solution .top-area .inner .catch{
	grid-area: catch;
	padding: 0 50px 0  0;
	margin: 0 50px 0 0;
	font-size: 3.4rem;
	border-right: dashed 1px #fff;
}
#solution .top-area .inner .txt{
	font-weight: 500;
}
@media screen and (max-width: 768px){

	#solution .page-title-area .ttl-box .sec-ttl-en{
		font-size: 3.0rem;
	}
	#solution .top-area{
		padding: 40px 20px;
		background: none;
		color: #333;
		background: url(../img/dots-parts.png) no-repeat left top -140px /  880px auto;
	}
	#solution .top-area .inner{
		grid-template-areas: "catch" "txt";
	}
	#solution .top-area .inner .catch{
		padding: 0 0 15px 0;
		margin: 0 0 15px;
		border-right: none;
		/*
		border-bottom: dashed 3px var(--blue);
		*/
		font-size: 2.4rem;
	}
	#solution .top-area .inner .txt{
		font-weight: 400;
	}

}

/* -----------------------------
	service-area
-------------------------------- */
#solution .service-area{
	padding: 120px 0;
	position: relative;
}
#solution .service-area::before{
	position: absolute;
    content: "";
    background: url(../img/dots-parts.png) top center/cover , no-repeat;
    width: 879px;
    height: 192px;
    top: 0px;
    left: 0;
    z-index: -1;
	transform: scale(1, -1);
}#solution .service-area::after{
	position: absolute;
    content: "";
    background: url(../img/dots-parts.png) top center/cover , no-repeat;
    width: 879px;
    height: 192px;
    bottom: 0px;
    right: 0;
    z-index: -1;
	transform: scale(-1, 1);
}
#solution .service-area .service-list .service-item{
	display: grid;
	grid-template-areas: "txt img"
						"dtl img";
	position: relative;
	padding: 0 0 60px;
	border-bottom: dashed 3px var(--blue);
	margin: 0  0 60px;
}
/* #solution .service-area .service-list .service-item:last-of-type{
	margin: 0;
} */
#solution .service-area .service-list .service-item .txt-box{
	grid-area: txt;
	padding: 0 40px 0 0;
	position: relative;
}
#solution .service-area .service-list .service-item .txt-box .no{
	font-size: 8.0rem;
    color: var(--blue);
    font-family: var(--lato);
    font-weight: 800;
    position: absolute;
    line-height: 1;
    z-index: -1;
    left: -20px;
    top: -5px;
}
#solution .service-area .service-list .service-item .txt-box .catch-s{
	margin: 30px 0 15px;
}
#solution .service-area .service-list .service-item .img{
	grid-area: img;
	width: 450px;
	height: 500px;
}
#solution .service-area .service-list .service-item .img img{
	width: 450px;
	height: 500px;
	object-fit: cover;
}
#solution .service-area .service-list .service-item .dtl-list{
	grid-area: dtl;
	margin: 30px 0 0;
	gap: 30px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 40px 0 0;
}

#solution .service-area .service-list .service-item .dtl-list .dtl-item{
	max-width: 200px;
	text-align: center;
}

#solution .service-area .service-list .service-item .dtl-list.type02{
	justify-content: flex-start;
}
#solution .service-area .service-list .service-item .dtl-list.type02 .dtl-item{
	width: calc(100% / 3);
}
#solution .service-area .service-list .service-item .dtl-list.type03{
	justify-content: flex-start;
}

#solution .service-area .service-list .service-item .dtl-list .dtl-item .dtl-ttl{
	font-size: 1.5rem;
	margin: 10px 0 0;
	line-height: 1.5;
}
#solution .service-area .service-list .service-item .dtl-list .dtl-item .icon img{
	height: 70px;
}

@media screen and (max-width: 768px){
	#solution .service-area{
		padding: 0 0 20px;
	}
	#solution .service-area::before,
	#solution .service-area::after{
		display: none;
	}
	#solution .service-area .service-list .service-item{
		grid-template-areas:
        "img""txt""dtl";
		margin: 0 0 50px;
		padding: 0;
		border-bottom: none;
	}

	#solution .service-area .service-list .service-item .txt-box{
		padding: 30px 20px;
	}
	#solution .service-area .service-list .service-item .txt-box .no{
		top: 15px;
    left: 5px;
    font-size: 5.0rem;
	}
	#solution .service-area .service-list .service-item .img{
		width: 100%;
		height: 150px;
		;
	}
	#solution .service-area .service-list .service-item .img img{
		height: 150px;
		width: 100%;
	}
	#solution .service-area .service-list .service-item .txt-box .catch-s{
		margin: 15px 0 15px;
	}
	#solution .service-area .service-list .service-item .dtl-list,
	#solution .service-area .service-list .service-item .dtl-list.type02,
	#solution .service-area .service-list .service-item .dtl-list.type03{
		padding: 0 20px;
		flex-wrap: wrap;
		gap: 30px 15px;
		justify-content: flex-start;
		margin: 0;
	}
	#solution .service-area .service-list .service-item .dtl-list .dtl-item,
	#solution .service-area .service-list .service-item .dtl-list.type02 .dtl-item{
		width: calc((100% - 15px) / 2);
	}

	#solution .service-area .service-list .service-item:last-of-type{
		margin: 0;
	}
}
/* -----------------------------
	case-area
-------------------------------- */
#solution .case-area{
	/* background-color: var(--accent-color-light); */
    position: relative;
    padding: 0 0 100px;
	/* border-bottom: solid 2px var(--accent-color-light); */
}
#solution .case-area .bg-box{
	background: url(../img/img02.jpg) center/cover ,no-repeat;
	height: 500px;
}
#solution .case-area::before {
    position: absolute;
    content: "";
    background:#fff;
    width: calc(100% - 80px);
    height: 100px;
    top: 400px;
    left: 0;
}
#solution .case-area .top-box{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
#solution .case-area .en-ttl,
#solution .case-area .jp-ttl{
	position: relative;
	z-index: 1;
}
#solution .case-area .en-ttl::before{
	position: absolute;
    font-family: var(--opensans);
    font-size: 16.0rem;
    font-weight: 700;
    color: var(--accent-color-light);
    content: "CASES";
    white-space: pre;
    left: -60px;
    top: -46px;
    z-index: -1;
}
#solution .case-area .catch{
	position: relative;
	z-index: 1;
}
#solution .case-area .case-list{
	/* display: flex;
	justify-content: space-between;
	gap: 30px; */
	margin: 80px 0 0;
}
#solution .case-area .case-list .case-item{
	background-color: var(--accent-color-light);
	display: flex;
	justify-content: space-between;
	margin: 0 0 50px;
	padding: 40px;
	position: relative;
}
#solution .case-area .case-list .case-item .no{
	position: absolute;
	font-family: var(--lato);
	font-size: 3.0rem;
	font-weight: 800;
	top: -22px;
	/* color: var(--main-color); */
}
#solution .case-area .case-list .case-item:last-of-type{
	margin: 0;
}
#solution .case-area .case-list .case-item .txt-box{
	width: calc(100% - 415px);
	/* padding: 20px 0px; */
	position: relative;
	/* min-height: 185px; */
}
#solution .case-area .case-list .case-item .req-box::after{
	position: absolute;
	content: "";
	background: url(../img/bg-triangle.png) center/cover , no-repeat;
	width: 100%;
	height: 33px;
	left: 0;
	bottom: -32px;
}
#solution .case-area .case-list .case-item .req-box .list-catch{
	font-size: 2.0rem;
	color: var(--main-color);
	font-weight: 700;
	text-align: center;
}

#solution .case-area .case-list .case-item .img img{
	width: 375px;
	height: 100%;
	object-fit: cover;
	/* width: 100%;
	height: 100%;
	object-fit: cover; */
}
#solution .case-area .case-list .case-item .fix-box{
	padding:20px;
	/* background-color: var(--accent-color-light); */
	/* border: solid 1px #333; */
	/* min-height: 346px; */
	background-color: #fff;
	margin: 20px 0 0;
}
#solution .case-area .case-list .case-item .txt-box .icon{
	display: inline-block;
	background-color: var(--main-color);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 0 6px;
	margin: 0 0 10px;
}
#solution .case-area .case-list .case-item .txt-box .sub-ttl{
	font-size: 2.0rem;
	font-weight: 500;
	color: var(--main-color);
	margin: 0 0 15px ;
}
@media screen and (max-width: 768px){
	#solution .case-area{
		padding: 0 0 40px;
	}
	#solution .case-area .bg-box{
		height: 150px;
	}
	#solution .case-area::before{
		height: 40px;
		top: 110px;
		width: calc(100% - 20px);
	}
	#solution .case-area .top-box{
		flex-wrap: wrap;
		gap: 20px 0;
		padding: 0 20px;
		margin: -30px 0 0;
	}
	#solution .case-area .en-ttl::before{
		font-size: 7.2rem;
		top: 0px;
		left: -25px;
	}
	#solution .case-area .case-list{
		margin: 50px 0 0;
		flex-wrap: wrap;
		padding: 0 20px;
	}
	#solution .case-area .case-list .case-item{
		width: 100%;
		flex-wrap: wrap;
		gap: 15px;
		padding: 40px 20px;
		margin: 0 0 30px;
	}
	#solution .case-area .case-list .case-item .txt-box{
		width: 100%;
	}
	#solution .case-area .case-list .case-item .img img{
		width: 100%;
	}
}

/* -----------------------------
	faq-area
-------------------------------- */
#solution .faq-area{
	padding: 80px 0 50px;
	margin: 0 0 80px;
	position: relative;
	background-color: var(--accent-color-light);

}
#solution .faq-area .bg-wrap{
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
	/*
	background-color: #fff;
	*/
}
@media screen and (max-width: 1500px) {
    #solution .faq-area .bg-wrap{
        width: 100% !important;
    }
}
#solution .faq-area .inner{
	padding: 0;
}
#solution .faq-area .inner .ttl-box{
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
#solution .faq-area .inner .ttl-box .en-ttl{
	position: relative;
}
#solution .faq-area .en-ttl::before {
    position: absolute;
    font-family: var(--opensans);
    font-size: 16.0rem;
    font-weight: 700;
	/*
    color: var(--lightgreen);
	*/
	color: #fff;
    content: "FAQ";
    white-space: pre;
	left: -60px;
    top: -46px;
    z-index: 0;
}
#solution .faq-area .faq-list{
	margin: 80px 0 0;
}
#solution .faq-area .faq-list .faq-item:not(:last-of-type){
	/* background: var(--main-color); */
	/* padding: 20px; */
	margin: 0 0 40px;
	border-bottom: solid 1px #ddd;
}
#solution .faq-area .faq-list .faq-item{
	padding: 0 0 40px;
}
#solution .faq-area .faq-list .faq-item .q{
	/* padding:8px 20px; */
	/* background-color: var(--main-color); */
	color: #fff;
	color: #333;
	font-size: 2.3rem;
	font-weight: 700;
}
#solution .faq-area .faq-list .faq-item span{
	font-family: var(--lato);
	color: #fff;
	color: var(--main-color);
	margin: 0 10px 0 0;
	font-weight: 600;
	font-size: 2.8rem;
}
#solution .faq-area .faq-list .faq-item .a span{
	color: #FFA200;
}
#solution .faq-area .faq-list .faq-item .a{
	padding: 0;
	/* margin: 15px 0 0; */
	/* background: var(--accent-color-light); */
}
@media screen and (max-width: 768px){
	#solution .faq-area{
		padding: 10px 20px 40px;
		margin: 0;
	}
	#solution .faq-area .inner{
		padding: 0;
	}
	#solution .faq-area .inner .ttl-box{
		flex-wrap: wrap;
		gap: 20px 0;
	}
	#solution .faq-area .en-ttl::before{
		font-size: 7.2rem;
		top: 0px;
		left: -25px;
	}
	#solution .faq-area .faq-list{
		margin: 30px 0 0;
	}
	#solution .faq-area .faq-list .faq-item{
		padding: 0 0 15px;
	}
	#solution .faq-area .faq-list .faq-item:not(:last-of-type){
		margin: 0 0 15px;
	}
	#solution .faq-area .faq-list .faq-item span{
		font-size: 2.4rem;
	}
	#solution .faq-area .faq-list .faq-item .q{
		font-size: 1.8rem;
	}
	#solution .faq-area .faq-list .faq-item .a{
		padding: 0;
	}
}