@charset "utf-8";
.txt_content,.cardArea{
	margin-bottom: 100px;
}
#mainBlock > .mainVisual > .mv_inner > .txt_box h2 span{
	color: #fff;
}
.mainVisual{
	background: url("../../digital-marketing/img/mainvisual_digital-marketing.jpg") no-repeat center;
}

.figure01{
	max-width: 616px;
	width: 60%;
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	.txt_content,.cardArea{
		margin-bottom: 40px;
	}
    
    .visualArea{
        overflow: auto;
    }
    .visualArea .item{
        width: 600px;
        max-width: inherit;
    }
}

@media screen and (max-width: 480px){
	.figure01{
		width: 90%;
	}
}

/* cardArea
---------------------------------------------------------------------------*/
.cardArea ul{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
	.cardArea ul li{
		background-repeat: no-repeat;
		background-position: 10px 10px;
		border: solid 1px #ccc;
		max-width: 245px;
		width: 23%;
	}
		.cardArea ul li a{
			color: #333;
			display: block;
			padding: 40px 20px 20px;
		}
			.cardArea ul li a .ttl{
				text-align: center;
				font-weight: 700;
				font-size: 18px;
			}
			.cardArea ul li a p{
				text-align: left;
			}
			.cardArea ul li a figure{
				max-width: 160px;
				width: 100%;
				margin: 25px auto;
				background-color: #fff8f2;
				border-radius: 50%;
			}


.cardArea ul li:hover{
	border: solid 1px #ff7f00;
}
	.cardArea ul li:hover a{
		text-decoration: none;
	}
		.cardArea ul li:hover a .ttl{
			color: #ff7f00;
		}

@media screen and (max-width: 1023px){
	.cardArea ul{
		flex-wrap: wrap;
	}
		.cardArea ul li{
			width: 49%;
			max-width: inherit;
			margin-bottom: 2%;
		}
	
	.cardArea ul li:nth-child(3),
	.cardArea ul li:nth-child(4){
		margin-bottom: 0;
	}
}

@media screen and (max-width: 767px){
	.cardArea ul li a{
		padding: 30px 10px 10px;
	}
	.cardArea ul li a > div{
		display: flex;
		flex-direction: column-reverse;
	}
	.cardArea ul li a figure{
		margin: 0 auto 15px;
		width: 40%;
	}
	.cardArea ul li a .ttl{
		margin-bottom: 15px;
	}
}
@media screen and (max-width: 480px){
	.cardArea ul li{
		width: 100%;
		margin-bottom: 20px;
		background-position: 10px 20px;
	}
		.cardArea ul li:nth-child(3){
			margin-bottom: 20px;
		}
	

	
	.cardArea ul li a {
		padding: 10px;
	}
		.cardArea ul li a > div{
			flex-direction: unset;
			align-items: center;
		}
		.cardArea ul li a .ttl{
			margin-bottom: 0;
			width: 65%;
		}
		.cardArea ul li a figure{
			width: 25%;
			margin: 0 auto;
		}

}


/* plan_sec
---------------------------------------------------------------------------*/
#plan_sec ul{
	padding-left: 100px;
}
	#plan_sec ul li{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 40px;
	}
		#plan_sec ul li:last-child{
			margin-bottom: 0;
		}

		#plan_sec ul li figure{
			margin-right: 25px;
			max-width: 80px;
			width: 100%;
		}
		#plan_sec ul li .txt_box{
			text-align: left;
		}
			#plan_sec ul li .txt_box h4{
				margin-bottom: 5px;
			}

@media screen and (max-width: 1024px){
	#plan_sec ul{
		padding-left: 50px;
	}
}

@media screen and (max-width: 900px){
	#plan_sec ul{
		padding-left: 0;
	}
}
@media screen and (max-width: 767px){
	#plan_sec ul li{
		display: block;
		border-bottom: solid 1px #ccc;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	#plan_sec ul li .sptxt_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}
		#plan_sec ul li figure{
			margin-right: 15px;
			max-width: 58px;
			width: 15%;
		}
	
	#plan_sec ul li .txt_box h4{
		margin-bottom: 0;
	}

}