@charset 'UTF-8';


/* 共通
----------------------------------------------- */
.only-sp{
	display:none;
}
@media screen and (max-width: 480px) {
	.only-pc{
		display:none;
	}
	.only-sp{
		display:block;
	}
}

/*丸アールなどの文字色が変わらない対策*/
sup{
	color:inherit;
}


/* とは
----------------------------------------------- */
.about_wrap{
	background-color:#F8F8F8;
	border-radius:10px;
	padding:30px;
}
.about_wrap h3{
	font-size:20px;
	font-weight:bold;
	line-height:1.3;
	border-left:6px solid #7F7F7F;
	padding-left:10px;
	margin:0 0 20px;
}

/*ポイント*/
.point_wrap{
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap:20px 10px;
}
.point_num{
	width:60px;
	color:#C03;
	font-size:80px;
	font-weight:bold;
	line-height:1;
}

.point_txt{
	width:calc(100% - 60px - 10px);
	font-size:16px;
	line-height:1.5;
}

/*課題*/
.task_ttl{
	font-size:22px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
	padding:0 0 5px;
	border-bottom:1px solid #333;
	width:fit-content;
	margin:0 auto 50px;
}

.task_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:40px 0;
}
.task_wrap > li{
	width:calc((100% - 100px) / 3);
	background-color:#F2F2F2;
	border-radius:10px;
	padding:20px;
}
@media screen and (max-width: 768px) {
	.task_wrap > li{
		width:100%;
	}
}

/*〇数字*/
.task_num{
	width: 50px;         /* 円の幅 */
	height: 50px;        /* 円の高さ（幅と同じにする） */
	background-color: #666666; /* 背景色 */
	color: #fff;          /* 文字色 */
	border-radius: 50%;   /* 正円にする */
	display: flex;        /* Flexboxを適用 */
	justify-content: center; /* 左右中央揃え */
	align-items: center;     /* 上下中央揃え */
	font-size:20px;
	font-weight: bold;
	line-height:1;
	margin:-45px auto 15px;
}
.task_txt{
	font-size:16px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
}
.task_pic{
	margin-top:10px;
}
.task_pic img{
	display:block;
	margin:0 auto;
}

/*下向き矢印*/
.under_arrow_wrap{
	margin:30px 0;
}
.under_arrow_wrap img{
	display:block;
	max-width:100%;
	margin:0 auto;
}

/*ソリューション*/
.solution_ttl{
	color:#C03;
	font-size:22px;
	font-weight:bold;
	line-height:1.3;
}

.solution_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px 0;
}
.solution_wrap > li{
	width:calc((100% - 100px) / 3);
	background-color:#F9EAE4;
	border-radius:10px;
	border:3px solid #C03;
	padding:20px;
}
@media screen and (max-width: 768px) {
	.solution_wrap > li{
		width:100%;
	}
}

.solution_txt{
	font-size:16px;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
}
.solution_pic{
	margin-top:10px;
}
.solution_pic img{
	display:block;
	margin:0 auto;
}

/* 導入の流れ
----------------------------------------------- */
.flow_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:50px 140px;
	position: relative;
}
.flow_wrap::before {
	content: "";
	display: block;
	width: 70%;
	height: 4px;
	background-color: #CCC;
	position: absolute;
	top: 75px;
	margin: 0 calc((100% - 70%) / 2);
}

.flow_wrap > li{
	width:calc((100% - 280px) / 3);
}
@media screen and (max-width: 768px) {
	.flow_wrap::before {
		content: "";
		display: block;
		width: 4px;
		height: 100%;
		background-color: #CCC;
		position: absolute;
		top: 0;
		margin: 0 calc((100% - 4px) / 2);
	}
	.flow_wrap > li{
		width:100%;
		background-color:#FFF;
	}
}

/*円形*/
.circle{
	width: 150px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 4px solid #C03;
	background-color:#FFF;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.circle img{
	max-width:100%;
}
/*文字*/
.flow_ttl{
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	margin:10px 0;
}
.flow_txt{
	font-size:16px;
	line-height:1.5;
}

/* ユースケース
----------------------------------------------- */
/*内側カラム*/
.usecase_inner_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*align-items: center;*/
	gap:20px;
	padding:30px 50px;
}
.usecase_inner_item{
	width:calc((100% - 80px - 100px) / 3);
}
.usecase_inner_arrow{
	width:50px;
	align-content: center;
}
@media screen and (max-width: 768px) {
	.usecase_inner_item,
	.usecase_inner_arrow{
		width:100%;
	}
}

.usecase_inner_icon img{
	display:block;
	max-width:100%;
	margin:0 auto;
}
.usecase_inner_pic{
	margin:20px 0;
}

.usecase_inner_pic img{
	display:block;
	width:100%;
	max-width:300px;
	margin:0 auto;
}
.usecase_inner_ttl h4{
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	margin:5px 0 0;
}
.usecase_inner_txt{
	line-height:1.5;
	margin:5px 0 0;
}

/*三角*/
.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid #E0E0E0;
	border-right: 0;
	margin: 100px auto 0;
}
@media screen and (max-width: 768px) {
	.triangle {
		width: 0;
		height: 0;
		border-style: solid;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-top: 30px solid #E0E0E0;
		border-bottom: 0;
		margin: 0 auto;
	}
}

/*大枠*/
.usecase_outer_wrap{
	border:3px solid #666666;
	border-radius:10px;
}
/*タイトル部*/
.usecase_outer_head_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	align-items: center;
	gap:10px;
	background:#666666;
	border-radius:5px 5px 0 0;
	padding: 8px 15px;
}
.usecase_outer_head_num{
	width:50px;
	color:#FFF;
	font-size:30px;
	font-weight:bold;
	line-height:1;
	text-align:center;
}
.usecase_outer_head_num > div{
	color:#FFF;
	font-size:12px;
}
.usecase_outer_head_txt{
	width:calc(100% - 50px - 10px);
}
.usecase_outer_head_txt h3{
	color:#FFF;
	font-size:24px;
	font-weight:bold;
	line-height:1.3;
}
.usecase_outer_head_txt p{
	color:#FFF;
	font-size:16px;
	line-height:1.5;
	margin-top:5px;
}

/*業界別用*/
.biz-type{
	width:100% !important;
}

/*フッタ部*/
.usecase_outer_foot_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:10px;
	background:#F9EAE4;
	padding: 8px;
	margin-bottom:30px;
}
.usecase_outer_foot_icon{
	width:40px;
	text-align:center;
}
.usecase_outer_foot_txt{
	width:auto;
	color:#C03;
	font-size:20px;
	font-weight:bold;
	line-height:1.3;
}
@media screen and (max-width: 768px) {
	.usecase_outer_foot_txt{
		width:calc(100% - 40px - 10px);
	}
}