@charset "UTF-8";

/* ------------ read ------------- */
.read-txt{
    text-align:center;
    padding:80px 0;
}
.read-txt p{
    line-height: 2.5;
    font-size:18px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .read-txt{
        padding:10vw 0;
        line-height: 2.5;
    }
    .read-txt p{
        font-size: 3.4vw;
        line-height: 2.5;
    }
}
/* ------------ 製品・サービス紹介 ------------- */
.sec-products{
    padding:0 0 80px;
}
.products-item:not(:first-child){
	margin-top: 80px
}

.products-name{
	/*color:#95999c;*/
	color:rgba(149,153,156,0.80);
	font-size:40px;
	font-weight:700;
}
.products-item:nth-child(odd) .products-name{
	text-align: right
}
.products-con{
    display: flex;
	padding-bottom: 60px;
	position: relative
}

.products-item:nth-child(odd) .products-con{
	flex-direction: row-reverse
}

.products-no{
	width:37%;
	/*color:#95999c;*/
	color:rgba(149,153,156,0.80);
	font-size:140px;
	font-weight:700;
	line-height: 1;
}
.products-item:nth-child(odd) .products-no{
	text-align: right
}


.products-con::after{
	width:100%;
	height:100%;
	position: absolute;
	content:'';
	bottom:0;
	background-position: center bottom;
    background-size:contain;
	background-repeat:  no-repeat;
}
.products-item:nth-child(odd) .products-con::after{
	right:0
}
.products-item:nth-child(even) .products-con::after{
	left:0
}
.products-item.item-01 .products-con::after{
	width:calc(37% + 20px);
	 background-image: url( "../../img/products/img_products_01.png");
}
.products-item.item-02 .products-con::after{
	width:calc(37% + 70px);
	 background-image: url( "../../img/products/img_products_02.jpg") ;
}
.products-item.item-03 .products-con::after{
	width:calc(37% + 70px);
	 background-image: url( "../../img/products/img_products_03.jpg") ;
}
.products-item.item-04 .products-con::after{
	width:calc(37% + 95px);
	background-image: url( "../../img/products/img_products_04.png");
}
.products-item.item-05 .products-con::after{
	width:calc(37% + 70px);
	background-image: url( "../../img/products/img_products_05.jpg");
}

.products-box{
	width:63%;
    background:#ffffff ;
    box-shadow: 0 0 15px rgba(205,169,173,0.8);
	border:1px solid #95999c;
	padding:50px 40px 40px;
}
.products-item:nth-child(odd) .products-box{
	padding-right: 100px
}
.products-item:nth-child(even) .products-box{
	padding-left: 100px
}
.products-ttl{
    font-size:38px;
    font-weight: 700;
	line-height: 1.2;
    margin-bottom:10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:20px
}
.products-ttl span.nowrap{
	white-space: nowrap
}
.products-ttl .logo{
	width:180px;
}
.products-ttl-sub{
    /*color:#95999C;*/
	color:#818486;
    padding-bottom:40px;
    border-bottom:1px solid #e82727;
    margin-bottom:40px;
}
.products-btn{
	width:320px;
	height:70px;
	margin: 40px 0 0 auto
}
.products-btn a{
	background: #E82727;
	font-size:20px;
	line-height: 1;
	color:#fff;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	padding: 0 30px;
	position: relative
}
.products-btn a:not(.disabled)::after {
	content: '';
	width: 26px;
	height: 26px;
	background: url('https://aps-net.jp/wp-content/themes/aps_202504/assets/img/common/icon_arrow.svg') 0 0 no-repeat;
	background-size: 100%;
	position: absolute;
	top: calc(50% - 13px);
	right: 20px;
}
.products-btn a.disabled{
	background:#95999c;
	justify-content: center
}
.products-tag-list{
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap:10px
}
.products-tag-item{
	font-size:14px;
	line-height: 1;
	padding: 0.4em 2em;
	border: 1px solid #363636;
	border-radius:2em;
	white-space: nowrap;
} 
.products-note{
	font-size:14px;
	margin-top: 20px
}


@media (max-width: 768px) {
	.sec-products{
		padding:0 0 12vw;
	}
	.products-item:not(:first-child){
		margin-top: 12vw
	}

	.products-name{
		font-size:6vw;
	}
	.products-con{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 18vw
	}

	.products-no{
		width:100%;
		font-size:18vw;
		font-weight:700;
		line-height: 1;
		z-index: 3;
	}


	.products-con::after{
		width:100%;
		height:100%;
		position: absolute;
		content:'';
		background-position: center bottom;
		background-size:contain;
		background-repeat:  no-repeat;
	}
	.products-item:nth-child(odd) .products-con::after{
		right:0
	}
	.products-item:nth-child(even) .products-con::after{
		left:0
	}
	.products-item.item-01 .products-con::after{
		right:-17vw;
		width:60%;
	}
	.products-item.item-02 .products-con::after{
		width:60%;
	}
	.products-item.item-03 .products-con::after{
		width:60%;
	}
	.products-item.item-04 .products-con::after{
		width:65%;
	}
	.products-item.item-05 .products-con::after{
		width:60%;
	}


	.products-box{
		width:90%;
		position: relative;
		top:-8vw;
		padding:10vw 6vw 12vw;
	}
	.products-item:nth-child(odd) .products-box{
		right:10%;
		padding-right: 6vw
	}
	.products-item:nth-child(even) .products-box{
		left:10%;
		padding-left: 6vw
	}
	.products-ttl{
		font-size:5.8vw;
		font-weight: 700;
		line-height: 1.2;
		margin-bottom:2vw;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap:2vw;
		flex-direction: column
	}
	.products-ttl .logo{
		margin: 0 0 0 auto;
		width:30vw;
	}
	.products-ttl-sub{
		padding-bottom:4vw;
		margin-bottom:4vw;
	}
	.products-btn{
		width:70%;
		height:10vw;
		
	}
	.products-item:nth-child(odd) .products-btn{
		margin: 6vw auto 0 0
	}
	.products-item:nth-child(even) .products-btn{
		margin: 6vw  0 0 auto
	}
	
	

	.products-btn a{
		background: #E82727;
		font-size:3.6vw;
		padding: 0 4vw;
	}
	.products-btn a:not(.disabled)::after {
		width: 4.8vw;
		height: 4.8vw;
		top: calc(50% - 2.4vw);
		right:2vw
	}

	.products-tag-list{
		margin-top: 4vw;
		gap:2vw
	}
	.products-tag-item{
		font-size:3.0vw;
		padding: 0.2em 1em;
	} 
	.products-note{
		font-size:2.8vw;
		margin-top: 4vw
	}


}