@charset "utf-8";
/* CSS Document */

.h-line{
	margin: 0 auto 15px;
	font-size: 22px;
	font-weight: 700;
/*	text-align: center;*/
	position: relative;
}
.h-line:after{
	content: "";
	width: 200px;
	height: 1px;
	background-color: #111;
/*	transform: translateX(-50%);*/
	position: absolute;
	bottom: -10px;
	left: 0;
/*	left: 50%;*/
}

@media screen and (max-width: 768px) {
	.h-line{
		padding: 0 5px;
		font-size: 21px;
	}
}

@media screen and (max-width: 480px) {
	.h-line{
		font-size: 20px;
	}
	.h-line:after{
		width: 200px;
	}
}


/*-------------------------------------------------------
    デザイン-作成方法
-------------------------------------------------------*/
/*----ソフトウェア選択----*/
.selectSoftware{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	width: 80%;
	max-width: 650px;
	margin: 40px auto;
}
.selectSoftware > li{
	width: calc((100% - 90px) / 4);
	text-align: center;
}
.selectSoftware > li > a{
	display: block;
	background-repeat: no-repeat;
	background-position: center 10px;
	padding-top: 80px;
	border: 1px solid #c4c4c4;
	border-radius: 10px;
	position: relative;
}
.selectSoftware > li > a:after{
	content: "";
	border: 25px solid transparent;
	border-top: 15px solid #fff;
	transition: all .3s ease;
	transform: translateX(-50%);
	position: absolute;
	left: 50%;
	bottom: -40px;
	z-index: -1;
}
.selectSoftware > li > a p{
	font-size: 16px;
	letter-spacing: 0.05em;
}

.selectSoftware > li.ai > a{ background-image: url(../../../_images/design/making/icon-illustrator.gif);}
.selectSoftware > li.ai > a:hover{ border-color: #ed6d00;}
.selectSoftware > li.ai > a:hover:after{ border-top-color: #ed6d00;}

.selectSoftware > li.ps > a{ background-image: url(../../../_images/design/making/icon-photoshop.gif);}
.selectSoftware > li.ps > a:hover{ border-color: #00afe1;}
.selectSoftware > li.ps > a:hover:after{ border-top-color: #00afe1;}

.selectSoftware > li.office > a{ background-image: url(../../../_images/design/making/icon-office.gif);}
.selectSoftware > li.office > a:hover{ border-color: #1f3275;}
.selectSoftware > li.office > a:hover:after{ border-top-color: #1f3275;}

.selectSoftware > li.image > a{ background-image: url(../../../_images/design/making/icon-image.gif);}
.selectSoftware > li.image > a:hover{ border-color: #3d8d27;}
.selectSoftware > li.image > a:hover:after{ border-top-color: #3d8d27;}



/*----ソフトウェア対応----*/
.softwareBox{
	margin: 50px auto;
}
.softwareBox .h-soft{
	padding-left: 90px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.8em;
	border-bottom: 10px solid;
	position: relative;
}
.softwareBox .h-soft:before{
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	left: 0;
	bottom: -10px;
}
/**/
.softwareBox .softwareInfo{
	display: flex;
	justify-content: center;
	gap: 15px;
	width: 95%;
	margin: 20px auto 5px;
}
.softwareBox .softwareInfo > li{
	width: calc((100% - 45px) / 4);
	height: 100%;
}
.softwareBox .softwareInfo > li dl{
	border: 1px solid #c4c4c4;
	padding: 5px;
	text-align: center;
}
.softwareBox .softwareInfo > li dl dt{
	padding: 5px 0;
	font-size: 15px;
	border-bottom: 1px solid;
}
.softwareBox .softwareInfo > li dl dd{
	padding: 5px 0;
	font-size: 16px;
}
.softwareBox .softwareInfo + p{
	width: 95%;
	margin: auto;
	font-size: 13px;
	text-align: right;
}

/**/
.softwareBox > section{
	width: 850px;
	margin: 50px auto;
}
.softwareBox > section > .imgBox{
	margin: 10px auto;
	text-align: center;
}


/*Ai*/
.softwareBox#ai .h-soft,
.softwareBox#ai .softwareInfo > li dl dt{
	border-bottom-color: #ed6d00;
}
.softwareBox#ai .h-soft:before{
	background-image: url(../../../_images/design/making/icon-illustrator.gif);
}
/*Ps*/
.softwareBox#ps .h-soft,
.softwareBox#ps .softwareInfo > li dl dt{
	border-bottom-color: #00afe1;
}
.softwareBox#ps .h-soft:before{
	background-image: url(../../../_images/design/making/icon-photoshop.gif);
}
/*Office*/
.softwareBox#office .h-soft,
.softwareBox#office .softwareInfo > li dl dt{
	border-bottom-color: #1f3275;
}
.softwareBox#office .h-soft:before{
	background-image: url(../../../_images/design/making/icon-office.gif);
	background-size: 90%;
	border: 3px solid #1f3275
}
/*image*/
.softwareBox#image .h-soft,
.softwareBox#image .softwareInfo > li dl dt{
	border-bottom-color: #3d8d27;
}
.softwareBox#image .h-soft:before{
	background-image: url(../../../_images/design/making/icon-image.gif);
	background-size: 90%;
	border: 3px solid #3d8d27
}


@media screen and (max-width: 768px) {
	/*----ソフトウェア選択----*/
	.selectSoftware{
		gap: 3%;
		width: 90%;
	}
	.selectSoftware > li{
		width: calc((100% - 9%) / 4);
		text-align: center;
	}
	.selectSoftware > li > a{
		background-size: 60px auto;
		padding-top: 70px;
	}
	.selectSoftware > li > a p{
		font-size: 15px;
	}

	/*----ソフトウェア対応----*/
	.softwareBox{
		width: 95%;
	}
	.softwareBox .h-soft{
		padding-left: 70px;
		font-size: 22px;
		border-bottom: 8px solid;
	}
	.softwareBox .h-soft:before{
		background-size: 100%;
		width: 55px;
		height: 55px;
		bottom: -8px;
	}
	/**/
	.softwareBox .softwareInfo{
		gap: 10px 2%;
		width: 100%;
	}
	.softwareBox .softwareInfo > li{
		width: calc((100% - 6%) / 4);
	}
	.softwareBox .softwareInfo > li dl dt{
		font-size: 14px;
	}
	.softwareBox .softwareInfo > li dl dd{
		font-size: 15px;
	}
	.softwareBox .softwareInfo + p{
		width: 100%;
	}

	/**/
	.softwareBox > section,
	.softwareBox > section p{
		width: 100%;
	}
	.softwareBox > section > .imgBox{
		max-width: 100%;
		overflow-x: auto;
	}
	.softwareBox > section > .imgBox img{
		width: auto;
		height: 350px;
	}
}

@media screen and (max-width: 600px) {
	/*----ソフトウェア対応----*/
	/**/
	.softwareBox .softwareInfo{
		flex-wrap: wrap;
	}
	.softwareBox .softwareInfo > li{
		width: calc((100% - 3%) / 2);
	}
	.softwareBox .softwareInfo > li dl dt{
		font-size: 14px;
	}
	.softwareBox .softwareInfo > li dl dd{
		font-size: 15px;
	}
	.softwareBox .softwareInfo + p{
		width: 100%;
	}

	.softwareBox#office .softwareInfo > li,
	.softwareBox#image .softwareInfo > li{
		width: calc((100% - 6%) / 3);
	}
}

@media screen and (max-width: 480px) {
	/*----ソフトウェア選択----*/
	.selectSoftware{
		gap: 2.5%;
		width: 95%;
	}
	.selectSoftware > li{
		width: calc((100% - 7.5%) / 4);
		text-align: center;
	}
	.selectSoftware > li > a{
		background-size: 50px auto;
		padding-top: 70px;
	}
	.selectSoftware > li > a p{
		font-size: 13px;
	}

	/*----ソフトウェア対応----*/
	.softwareBox .h-soft{
		padding-left: 60px;
		padding-bottom: 5px;
		font-size: 20px;
		line-height: 1.3em;
	}
	.softwareBox .h-soft:before{
		width: 50px;
		height: 50px;
	}
	/**/
	.softwareBox#office .softwareInfo > li,
	.softwareBox#image .softwareInfo > li{
		width: calc((100% - 3%) / 2);
	}
}