/*********************************************************************************************************************************

	サービス

*********************************************************************************************************************************/

/*PCの左右余白････････････････････････････････････････････*/
#main_message, /*ナビゲーション上*/
#company, /*企業・団体の方へ*/
#to_user .baseArea, /*ご利用者さまへ*/
#in_preparation, /*準備中のサービス*/
section#bannerArea>.baseArea{ /*お問い合わせ*/
	width: 1100px!important;
	padding-left: 50px;
	padding-right: 50px;
	max-width: 1100px;
}

/*カードリストA03B･････････････････････････････････････････････････*/
.cardListA03B{
	display:inline-block;
	width:100%;
	text-align:center;
	text-align-last:center;
}
	.cardListA03B_list{/*リスト*/
		display:inline-block;
		width:1100px;
		margin-top:68px;
	}
		.cardListA03B_list *{
			display:inline-block;
		}
		.cardListA03B_list>li{
			height:400px;
			width:346px;
			margin-left:31px;
			overflow-y:hidden;
			float:left;
		}
		.cardListA03B_list>li:nth-of-type(3n+1){/*3の倍数+1番目(1,4,7…)*/
			margin-left:0;
		}
		.cardListA03B_list>li:nth-of-type(n+4){/*4番目以降*/
			margin-top:24px;
		}
			.cardListA03B_list>li>a{
				height:400px;
				width:100%;
				overflow:hidden;
			}
			.cardListA03B_list>li>a:hover{
				opacity: 1;
			}
				.cardListA03B_list>li>a:hover>img{/*サムネイル画像*/
					opacity: 0.7;
				}
				.cardListA03B_list>li>a:hover>.cardListA03B_list__contents:not(:has(.no-arrow))>h4:before{
					background: url(../images/ico/ico_service_arrow_green.png) center / contain no-repeat;
				}
				.cardListA03B_list>li>a:hover>.cardListA03B_list__contents:not(:has(.no-arrow))>h4,
				.cardListA03B_list>li>a:hover>.cardListA03B_list__contents>p{/*本文*/
					color:var(--Green_01);
				}
				.cardListA03B_list>li>a>img{/*サムネイル画像*/
					height:177px;
					width:100%;
					object-fit:cover;
					object-position:center center;
					overflow:hidden;
					/* border-left:7px solid #193a8e; */
					box-sizing:border-box;
				}
				.cardListA03B_list>li>a>img.gLine{/*ライン（緑）*/
					/* border-left:7px solid #27763b; */
				}
				.cardListA03B_list>li>a>img.oLine{/*ライン（オレンジ）*/
					/* border-left:7px solid #fc5200; */
				}
				.cardListA03B_list>li>a>img.outline{/*囲い線*/
					border:0.5px solid #ccc; */
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents{
					margin-top: 20px;
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents>h4,
				.cardListA03B_list>li>a>.cardListA03B_list__contents>h4>span,
				.cardListA03B_list>li>a>.cardListA03B_list__contents>p{
					letter-spacing:0;
				}

				.cardListA03B_list>li>a>.cardListA03B_list__contents>h4{
					font-size:2rem;
					text-align-last: left;
					text-align: left;
					font-weight: normal;
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents:not(:has(.no-arrow))>h4{
					position: relative;
					padding-left: 30px;
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents:not(:has(.no-arrow))>h4:before{
					content: "";
					position: absolute;
					width: 25px;
					height: 25px;
					margin: auto;
					left: 0;
					top: 2px;
					bottom: 0;
					background: url(../images/ico/ico_service_arrow.png) center / contain no-repeat;
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents>h4>span{
					font-size:1.8rem;
					vertical-align: baseline;
				}
				.cardListA03B_list>li>a>.cardListA03B_list__contents>p{/*本文*/
					height:208px;
					width:100%;
					margin-top:15px;
					line-height:1.75em;
					overflow-y:hidden;
				}


/*企業・団体の方へ･････････････････････････････････････････････････*/
section#company{
	padding-top:110px !important;
	padding-bottom:110px !important;
}


/*ご利用者さまへ･･･････････････････････････････････････････････････*/
section#to_user{
	padding-top:110px !important;
	padding-bottom:110px !important;
	background-color:var(--Gray_04);
}


/*準備中のサービス･････････････････････････････････････････････････*/
section#in_preparation{
	padding-top:110px !important;
	padding-bottom:110px !important;
}


/*バナーエリア･････････････････････････････････････････････････････*/
section#bannerArea{
	padding-top:45px !important;
	padding-bottom:51px !important;
}



/*********************************************************************************************************************************

		メディアクエリ（ ～500px以下：モバイル対応 ）

*********************************************************************************************************************************/
@media(max-width:500px){
	/*SPの左右余白････････････････････････････････････････････*/
	#main_message, /*ナビゲーション上*/
	#company, /*企業・団体の方へ*/
	#to_user .baseArea, /*ご利用者さまへ*/
	#in_preparation{ /*準備中のサービス*/
		width: calc(100% - 50px)!important;
		padding-left: 0;
		padding-right: 0;
		margin-left: auto!important;
		margin-right: auto!important;
	}

	section#bannerArea>.baseArea{ /*お問い合わせ*/
		width: 100%!important;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0!important;
		margin-right: 0!important;
	}

	/*文字並び････････････････････････････････････････････*/
	#contents p {
		text-align: left!important;
    	text-align-last: left!important;
	}

	/*カードリストA03B･････････････････････････････････････････････････*/
	.cardListA03B{
		margin-top: 0!important;
	}
		.cardListA03B_list{/*リスト*/
			width:100%;
		}
			.cardListA03B_list *{
			}
			.cardListA03B_list>li{
				height:auto;
				width:100%;
				margin-left:0;
			}
			.cardListA03B_list>li:not(:first-child){
				margin-top: 60px;
			}
				.cardListA03B_list>li>a{
					height:auto;
				}
					.cardListA03B_list>li>a>img{/*サムネイル画像*/
						height: auto!important;
					}

					.cardListA03B_list>li>a>.cardListA03B_list__contents>h4{
						font-size:2.2rem;
					}
					.cardListA03B_list>li>a>.cardListA03B_list__contents>h4>span{
						font-size:2rem;
					}
					.cardListA03B_list>li>a>.cardListA03B_list__contents>p{/*本文*/
						height:auto;
					}
}