@charset "UTF-8";

.mod_main {
	padding-top: 11.8rem;
}

.contact_area {
	background-color: #FFF;
	margin-top: 0;
}

@media screen and (max-width:640px) {
	body {
		overflow-x: hidden;
	}
	.mod_main {
		padding-top: calc(75 * 100vw / 375);
	}
}

/**/

.sec_desgin {
	margin-top: 8rem;

	/* LP公開時削除 */
	padding-bottom: 15rem;
}

.sec_desgin > .in {
	max-width: 128rem;
	width: 100%;
	margin: 0 auto;
}

.sec_desgin .txt_box .ttl {
	font-size: 4rem;
	line-height: 1;
	font-weight: 700;
	padding-left: 3.3rem;
	position: relative;
}

.sec_desgin .txt_box .ttl::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-image: url(/img/index/list_type.svg);
	width: 2.2rem;
	height: 2.2rem;
	background-size: cover;
	background-repeat: no-repeat;
}

.sec_desgin .txt_box .txt {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 500;
	margin-top: 2.4rem;
}

.sec_desgin .details_box {
	margin-top: 7rem;
	counter-reset: service-count;
}

.sec_desgin .details_box .detail {
	display: flex;
	justify-content: space-between;
	counter-increment: service-count;
	padding-top: 5.9rem;
	border-top: 1px solid #c7c7c7;
}

.sec_desgin .details_box .detail + .detail {
	margin-top: 5.6rem;
}

.sec_desgin .details_box .detail .ph_box {
}

.sec_desgin .details_box .detail .ph_box .ph {
	width: 100%;
	max-width: 58.1rem;
	height: 39rem;
	border-radius: 1.6rem;
	overflow: hidden;
}

.sec_desgin .details_box .detail .ph_box img {
	vertical-align: bottom;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec_desgin .details_box .detail .ttl_box {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 500;
	max-width: 62.7rem;
	width: 100%;
}

.sec_desgin .details_box .detail .ttl_box .number {
	position: relative;
	padding-bottom: 0.9rem;
}

.sec_desgin .details_box .detail .ttl_box .number::before {
	content: counter(service-count, decimal-leading-zero);
	font-family: sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
}

.sec_desgin .details_box .detail .ttl_box .number::after {
	content: "";
	width: 3.9rem;
	height: 1px;
	background-color: #373737;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.sec_desgin .details_box .detail .ttl_box .ttl {
	font-size: 3.2rem;
	line-height: 1;
	font-weight: 700;
	margin-top: 1.6rem;
}

.sec_desgin .details_box .detail .ttl_box .sub_ttl {
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 500;
	color: #FFF;
	background-color: #e99dc5;
	margin-top: 2rem;
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border-radius: 0.4rem;
}

.sec_desgin .details_box .detail .ttl_box .txt {
	font-size: 2rem;
	line-height: 2;
	font-weight: 500;
	margin-top: 3.1rem;
}

.sec_desgin .details_box .detail .ttl_box .list {
	margin-top: 0.9rem;
}

.sec_desgin .details_box .detail .ttl_box .list li {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 500;
	display: inline-block;
	position: relative;
	padding-left: 2rem;
}

.sec_desgin .details_box .detail .ttl_box .list li + li {
	margin-left: 0.6rem;
}

.sec_desgin .details_box .detail .ttl_box .list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-image: url(/img/index/list_type.svg);
	width: 1.2rem;
	height: 1.2rem;
	background-size: cover;
	background-repeat: no-repeat;
}

.sec_desgin .details_box .detail .ttl_box .ph {
	margin-top: 2.7rem;
}

.sec_desgin .details_box .detail .ttl_box .ph img {
	vertical-align: bottom;
}


@media screen and (max-width:640px) {

	.sec_desgin {
		margin-top: calc(32 * 100vw / 375);

		/* LP公開時削除 */
		padding-bottom: calc(127 * 100vw / 375);
	}

	.sec_desgin > .in {
	}

	.sec_desgin .txt_box .ttl {
		font-size: calc(24 * 100vw / 375);
		padding-left: calc(19 * 100vw / 375);
		line-height: 1.4;
	}

	.sec_desgin .txt_box .ttl::before {
		left: 0;
		top: calc(11 * 100vw / 375);
		bottom: auto;
		width: calc(11 * 100vw / 375);
		height: calc(11 * 100vw / 375);
	}

	.sec_desgin .txt_box {
		padding-left: calc(24 * 100vw / 375);
		padding-right: calc(24 * 100vw / 375);
	}

	.sec_desgin .txt_box .txt {
		font-size: calc(16 * 100vw / 375);
		margin-top: calc(24 * 100vw / 375);
	}

	.sec_desgin .details_box {
		margin-top: calc(40 * 100vw / 375);
		padding-left: calc(24 * 100vw / 375);
		padding-right: calc(24 * 100vw / 375);
	}

	.sec_desgin .details_box .detail {
		padding-top: calc(38 * 100vw / 375);
	}

	.sec_desgin .details_box .detail + .detail {
		margin-top: calc(32 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ph_box {
		display: none;
	}

	.sec_desgin .details_box .detail .ttl_box {
	}

	.sec_desgin .details_box .detail .ttl_box .number {
		position: relative;
		padding-bottom: 0.9rem;
	}

	.sec_desgin .details_box .detail .ttl_box .number::before {
		font-size: calc(24 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .number::after {
		width: calc(30 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .ttl {
		font-size: calc(22 * 100vw / 375);
		margin-top: calc(22 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .sub_ttl {
		font-size: calc(13 * 100vw / 375);
		margin-top: calc(12 * 100vw / 375);
		padding-top: calc(4 * 100vw / 375);
		padding-right: calc(8 * 100vw / 375);
		padding-bottom: calc(4 * 100vw / 375);
		padding-left: calc(8 * 100vw / 375);
		border-radius: calc(4 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .txt {
		font-size: calc(16 * 100vw / 375);
		margin-top: calc(32 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .list {
		margin-top: calc(40 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .list li {
		font-size: calc(16 * 100vw / 375);
		padding-left: calc(20 * 100vw / 375);
		width: 100%;
	}

	.sec_desgin .details_box .detail .ttl_box .list li + li {
		margin-left: 0;
	}

	.sec_desgin .details_box .detail .ttl_box .list li::before {
		width: calc(12 * 100vw / 375);
		height: calc(12 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .ph {
		margin-top: calc(27 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .ph_item {
		margin-top: calc(24 * 100vw / 375);
	}

	.sec_desgin .details_box .detail .ttl_box .ph_item img {
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}

}

/**/

.sec_lpwork {
	padding-top: 8rem;
	background-color: #fff;
	margin-top: 7rem;
	padding-bottom: 15rem;
}

.sec_lpwork > .in {
	max-width: 128rem;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: #F0E5FC;
	padding-left: 7.9rem;
	padding-right: 6rem;
	padding-bottom: 2.8rem;
	box-sizing: border-box;
	border-radius: 1.6rem;
	overflow: hidden;
}

.sec_lpwork .txt_box {
	width: 100%;
	max-width: 49.4rem;
}

.sec_lpwork .txt_box .ttl {
	font-size: 3.2rem;
	line-height: 1;
	font-weight: 700;
	padding-top: 6.4rem;
}

.sec_lpwork .txt_box .txt {
	padding-top: 3.3rem;
	font-size: 2rem;
	line-height: 2;
	font-weight: 500;
}

.sec_lpwork .ph_box {
	width: 100%;
	max-width: 55.9rem;
}

.sec_lpwork .ph_box img {
	width: 100%;
	vertical-align: bottom;
}


@media screen and (max-width:640px) {

	.sec_lpwork {
		padding-top: calc(40 * 100vw / 375);
		margin-top: calc(40 * 100vw / 375);
		padding-bottom: calc(127 * 100vw / 375);
		padding-left: calc(40 * 100vw / 375);
		padding-right: calc(40 * 100vw / 375);
	}

	.sec_lpwork > .in {
		padding-top: calc(32 * 100vw / 375);
		padding-left: calc(32 * 100vw / 375);
		padding-right: calc(32 * 100vw / 375);
		padding-bottom: 0;
		border-radius: calc(16 * 100vw / 375);
		flex-wrap: wrap;
	}

	.sec_lpwork .txt_box {
	}

	.sec_lpwork .txt_box .ttl {
		font-size: calc(22 * 100vw / 375);
		padding-top: 0;
		line-height: 1.45;
		position: relative;
	}

	.sec_lpwork .txt_box .ttl::before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-image: url(/img/service/icon_tgb.svg);
		width: calc(41 * 100vw / 375);
		height: calc(23 * 100vw / 375);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.sec_lpwork .txt_box .txt {
		padding-top: calc(24 * 100vw / 375);
		font-size: calc(16 * 100vw / 375);
	}

	.sec_lpwork .ph_box {
		margin-top: calc(32 * 100vw / 375);
	}

	.sec_lpwork .ph_box img {
		width: 100%;
		height: auto;
	}

}