@charset "utf-8";

/* 導入
-------------------------------------------*/
#introduction{position: relative;}
#introduction::before,#introduction::after{
	content: "";
	position: absolute;
	width: 430px;
	z-index: -1;
}
#introduction::before{
	background: url("../images/service/intro_img01.webp") center / contain no-repeat;
	left: 0;
	top: -120px;
	aspect-ratio: 1/1.047;
}
#introduction::after{
	background: url("../images/service/intro_img02.webp") center / contain no-repeat;
	right: 0;
	bottom: -190px;
	aspect-ratio: 1/.919;
}

/* こんな課題を代行・解決します
-------------------------------------------*/
.task_box{position: relative;}
.task_box h3{
	writing-mode: vertical-rl;
	position: absolute;
	top: -80px;
	left: -35px;
}
.task_box h3 span,.task_box h3 span span{
	font-size: 20px;
	font-weight: bold;
}
.task_box h3 span{
	border-right: 1px solid #230606;
	padding-right: .3em;
	line-height: 2.2;
}
.task_box h3 > span:last-child{margin-top: 2em;}
.task_box h3 span span{color: #af1b14;}
.task_box ul{
	background: linear-gradient(145deg,rgba(237,227,223,.3),rgba(244,235,230,.3));
	padding: 90px 85px;
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.task_box li{width: 47%;}
.task_box li:not(:nth-last-child(-n+2)){margin-bottom: 65px;}
.task_box .sub_title{
	margin-bottom: 35px;
	position: relative;
}
.task_box .sub_title::after{
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 90px;
	aspect-ratio: 1/1;
	background: center / contain no-repeat;
}
#executive .task_box li:first-child .sub_title::after{background-image: url("../images/service/executive_task01.webp");}
#executive .task_box li:nth-child(2) .sub_title::after{background-image: url("../images/service/executive_task02.webp");}
#executive .task_box li:nth-child(3) .sub_title::after{background-image: url("../images/service/executive_task03.webp");}
#executive .task_box li:nth-child(4) .sub_title::after{background-image: url("../images/service/executive_task04.webp");}
#executive .task_box li:nth-child(5) .sub_title::after{background-image: url("../images/service/executive_task05.webp");}
#executive .task_box li:nth-child(6) .sub_title::after{background-image: url("../images/service/executive_task06.webp");}
#oob .task_box li:first-child .sub_title::after{background-image: url("../images/service/oob_task01.webp");}
#oob .task_box li:nth-child(2) .sub_title::after{background-image: url("../images/service/oob_task02.webp");}
#oob .task_box li:nth-child(3) .sub_title::after{background-image: url("../images/service/oob_task03.webp");}
#oob .task_box li:nth-child(4) .sub_title::after{background-image: url("../images/service/oob_task04.webp");}
#executive .task_box .sub_title h4{font-size: clamp(20px,1.5vw,25px);}
.task_box li > p{
	font-size: 18px;
	line-height: 1.7;
}

/* 料金
-------------------------------------------*/
.fee_box > div{padding: 70px 50px;}
.fee_box .sub_title *{text-align: center;}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* 導入
	-------------------------------------------*/
	#introduction::before,#introduction::after{width: 300px;}
	#introduction::before{top: -90px;}
	#introduction::after{bottom: -120px;}
	
	/* こんな課題を代行・解決します
	-------------------------------------------*/
	.task_box h3{
		top: -50px;
		left: -25px;
	}
	.task_box h3 span,.task_box h3 span span{font-size: 16px;}
	.task_box ul{
		padding: 60px 55px;
		border-radius: 20px;
	}
	.task_box li:not(:nth-last-child(-n+2)){margin-bottom: 40px;}
	.task_box .sub_title{margin-bottom: 25px;}
	.task_box .sub_title::after{width: 55px;}
	#executive .task_box .sub_title h4{font-size: 16px;}
	.task_box li > p{font-size: 14px;}
	
	/* 料金
	-------------------------------------------*/
	.fee_box > div{padding: 45px 30px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* 導入
	-------------------------------------------*/
	#introduction::before,#introduction::after{opacity: .4;}
	#introduction::before,#introduction::after{width: 250px;}
	#introduction::before{top: -30px;}
	#introduction::after{bottom: 50px;}
	
	/* こんな課題を代行・解決します
	-------------------------------------------*/
	#executive .img_box{margin-bottom: 80px!important;}
	.task_box h3{left: -17px;}
	.task_box ul{padding: 50px 20px;}
	.task_box li{width: 100%;}
	.task_box li:not(:last-child){margin-bottom: 40px;}
	.task_box .sub_title{padding-top: 90px;}
	.task_box .sub_title::after{
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		width: 65px;
	}
	
	/* 料金
	-------------------------------------------*/
	.fee_box > div{padding: 45px 20px;}
}