@charset "UTF-8";
/* ----- Widget ウィジェットの記述 ----- */

/* ---------- トップページ メインコンテンツ（お知らせは _w-top-info） ---------- */

/* ---------- ご利用の流れ ---------- */
.w-main-contents-usage{
	.w-main-contents-usage__list{
		display: flex;
		flex-wrap: wrap;
		gap:5%;
	}
	.w-main-contents-usage__item{
		width: calc((100% - 10%)/3);
		position: relative;
		margin-bottom:20px;
		&::after {
			content:"";
			position:absolute;
			top:10%;
			right:-16%;
			height:76px;
			width:16%;
			background-image: url("../images/common/arrow02.png");
			background-repeat:no-repeat;
			background-position:center center;
			background-size:60% auto;
		}
		&:nth-child(3n),
		&:last-child{
			&::after {
				content:none;
			}
		}
	}
	.w-main-contents-usage__title{
		margin-top: 10px;
		margin-bottom: 5px;
		line-height: 140%;
		font-size: 12px;
		position: relative;
		font-weight: 700;
		text-align: center;
	}
	.w-main-contents-usage__text{
		font-size: 12px;
	}
	.w-main-contents-usage__image{
		width: 100%;
		margin: auto;
		display: block;
	}
	@media (min-width: 481px) {
		.w-main-contents-usage__item{
			width: calc((100% - 20%)/5);
			&::after {
				content:"";
				background-size:25% auto;
				top:6%;
				right:-30%;
				width:30%;
			}
			&:nth-child(3n){
				&::after {
					content:"";
				}
			}
		}
		.w-main-contents-usage__title{
			font-size: 13px;
		}
	}
	@media (min-width: 641px) {
		.w-main-contents-usage__item{
			&::after {
				top:10%;
			}
		}
	}
	@media (min-width: 751px) {
		.w-main-contents-usage__item{
			&::after {
				background-size:11px auto;
				top:15%;
			}
		}
	}
}

/* ---------- サービス ---------- */
.w-main-contents-service{
	.c-list-03 {
		column-gap: 4%;
		.w-main-contents-service__item {
			width: 48%;
			&:nth-child(n+3) {
				margin-top: 4%;
			}
		}
	}
	@media (min-width: 481px) {
		.c-list-03 {
			column-gap: 2%;
			.w-main-contents-service__item {
				width: 32%;
				&:nth-child(n+3) {
					margin-top:0;
				}
				&:nth-child(n+4) {
					margin-top: 2%;
				}
			}
		}
	}
}

/* ---------- よくある質問 ---------- */
.w-main-contents-faq{
	.w-main-contents-faq__list{
		display:flex;
		flex-wrap: wrap;
	}
	.w-main-contents-faq__item{
		width: 100%;
		margin-right: 0;
		
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-child(3n) {
			margin-right: 0;
		}
		&:nth-child(n+1) {
			margin-top: 2%;
		}
		&:nth-child(1) a {
			background: url("../images/common/question05.png") no-repeat left 10px center;
		}
		&:nth-child(2) a {
			background: url("../images/common/question04.png") no-repeat left 10px center;
		}
		&:nth-child(3) a {
			background: url("../images/common/question06.png") no-repeat left 10px center;
		}
		&:nth-child(4) a {
			background: url("../images/common/question03.png") no-repeat left 10px center;
		}
	}
	.w-main-contents-faq__link{
		color: var(--color-black);
		font-size: font-size: var(--f-size-xs);
		line-height: 140%;
		vertical-align: middle;
		display: block;
		padding: 10px 10px 8px 40px;
		border: 3px solid #F0F0F0;
		
		&:hover {
			opacity: 1;
			border: 3px solid #F5ECE5; /* color-secondary_lightより少し薄い色（他になし）*/
			background-color: var(--color-secondary_light) !important;
		}
	}
	@media (min-width: 481px) {
		.w-main-contents-faq__item{
			width: 49%;
			margin-right: 2%;
			
			&:nth-child(3n) {
				margin-right: 2%;
			}  
			&:nth-child(4n) {
				margin-right: 0;
			}
			&:nth-child(even) {
				margin-right: 0;
			}
			&:nth-child(n+3) {
				margin-top: 2%;
			}
		}
	}
	@media screen and (min-width: 521px) {
		.w-main-contents-faq__link{
			font-size: font-size: var(--f-size-s);
		}
	}
	@media screen and (min-width: 1081px) {
		.w-main-contents-faq__item{
			width: 32%;
			margin-right: 2%;
			border-radius: 4px;
			&:nth-child(even) {
				margin-right: 2%;
			}
			&:nth-child(3n) {
				margin-right: 0;
			}
			&:nth-child(n+4) {
				margin-top: 2%;
			}
		}
	}
}