@charset "utf-8";

/*~~*/

#qa {
	display: flex;
	flex-direction: column;
	gap: 15px;
	> div {
		position: relative;
		z-index: 0;
	}
	> div::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		/*
		background-color: var(--bg-base);
		border-radius: 5px;
		*/
		z-index: -1;
	}
	.qa-1 dt {
		color: #225BA8;
	}
	.qa-2 dt {
		color: #ff9600;
	}
	.qa-3 dt {
		color: #3cae2f;
	}
	dt {
		margin: 10px 10px 0;
		padding-bottom: 10px;
		border-bottom: 1px solid #000;
		display: flex;
		align-items: center;
		font-size: var(--fs-head);
		line-height: var(--lh-head);
		.icon {
			margin-right: 5px;
			font-size: calc(var(--fs-head) * 1.5);
		}
	}
	dd {
		margin: 10px 10px 15px;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		.more {
			margin-top: 15px;
			font-size: var(--fs-lead);
			line-height: var(--lh-lead);
			a {
				padding: 5px;
				border-radius: 5px;
				background-color: var(--bg-qa);
				color: #fff;
			}
			a:hover {
				background-color: #000;
			} 
			.icon {
				margin-right: 5px;
				font-size: var(--fs-lead);
				line-height: var(--lh-lead);
			}
		}
	}
}

/*SP*/
@media screen and (max-width: 768px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

#qa > div {
	padding-top: 10px;
	border-top: 1px dotted #999;
}
#qa > div:first-child {
	padding-top: 0px;
	border-top: none;
}

#qa .more {
	text-align: center;
}

#qa .more.-s {
	width: 100%;
	margin-top: 5px;
	display: flex;
	justify-content: center;
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*PC*/
@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/    

#qa {
	padding: 15px;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
	background-color: color-mix(in srgb, var(--bg-base) 50%, transparent);
	border-radius: 15px;

	> div {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	> div::before {
		/*
		background-color: color-mix(in srgb, var(--bg-base) 70%, transparent);
		*/
	}

	dt {
		flex-shrink: 0;
	}

	dd {
		display: flex;
		justify-content: space-between;
		.more {
			margin-top: 8px;
			margin-left: 30px;
			a {
				white-space: nowrap;
			}
		}
	}

}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}