.qa_index_area {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: clamp(20px, 4vw, 40px);

	@media screen and (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.qa_index_box {
	display: block;
	border: 1px solid #d5dce5;
	text-decoration: none;
	border-radius: clamp(5px, 1vw, 10px);

	a {
	}

	h3 {
		min-height: clamp(45px, 6vw, 60px);
		padding: 16px clamp(20px, 2.5vw, 30px) 13px;
		box-sizing: border-box;
		border-bottom: 1px solid #d5dce5;

		a {
			display: block;
			text-decoration: none;
			color: #00295e;
		}
	}

	.qa_list {
		padding: 15px;

		> li {
			border: none;

			&:not(:last-of-type) {
				margin-bottom: 5px;
			}

			a {
				padding: 13px 22px 11px 39px;
				position: relative;
				text-decoration: none;
				line-height: 1.5;
				display: block;
				align-content: center;
				color: #222222;

				&::before {
					content: 'Q';
					display: inline-block;
					font-family: "FOT-ニューロダン Pro DB", "NewRodinPro-DB", "Roboto", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
					font-weight: bold;
					font-size: 22px;
					line-height: 1;
					color: #7595ca;
					position: absolute;
					top: 0.8ex;
					left: 15px;
				}

				&:hover {
					background-color: #edf1f5;
					border-radius: 5px;
				}

				@media screen and (max-width: 767px) {
					padding: 13px 2px 11px 28px;

					&::before {
						font-size: 20px;
						top: 1.1ex;
						left: 5px;
					}
				}
			}

		}
	}
}


/* 詳細ページ */
.qa_detail_area {
}
.qa_detail_box {
	display: block;
	border-radius: clamp(5px, 1vw, 10px);
	background-color: #f2f5f8;
	text-decoration: none;

	&:not(:last-of-type) {
		margin-bottom: 20px;
	}

	h4 {
		padding: 17px clamp(20px, 2.9vw, 29px) 15px;
		min-height: clamp(45px, 6vw, 60px);
		align-content: center;
		box-sizing: border-box;

		a {
			display: block;
		}
	}

	.accordion__title {
		color: #00295e;
		background-color: transparent;
		padding-left: 25px;
		box-sizing: border-box;
		text-decoration: none;
		align-content: center;
		position: relative;
		line-height: 1.5;

		&::before {
			content: 'Q';
			display: inline-block;
			font-family: "FOT-ニューロダン Pro DB", "NewRodinPro-DB", "Roboto", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			font-weight: bold;
			font-size: 22px;
			line-height: 1;
			color: #7595ca;
			position: absolute;
			top: -0.2ex;
            left: 2px;

			@media screen and (max-width: 575px) {
				top: -0.2ex;
			}
		
			@media screen and (max-width: 475px) {
				top: -0.1ex;
			}
		}
	}

	.accordion__toggle {
		position: relative;
		padding-right: 20px;

		&.opened {
			.accordion__toggle_btn {
				&::after {
					transform: translate(-50%, -50%) rotate(0deg);
				}
			}
		}
	}

	.accordion__toggle_btn {
		position: absolute;
		width: 12px;
		height: 12px;
		position: absolute;
		top: 50%;
		right: 2px;
		transform: translateY(-50%);

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 12px;
			height: 2px;
			background-color: #2255ab;
			transition: transform 0.2s ease;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&::after {
			transform: translate(-50%, -50%) rotate(90deg);
		}
	}


	.accordion__content {
		position: relative;
		padding-left: clamp(20px, 2.9vw, 29px);
		padding-right: clamp(20px, 2.9vw, 29px);
		box-sizing: border-box;

		&::after {
			content: '';
			display: inline-block;
			width: calc(100% - clamp(30px, 6vw, 60px));
			height: 1px;
			background-color: #d3dae2;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		&.opened {
			padding-top: clamp(20px, 2.9vw, 29px);
			padding-bottom: clamp(20px, 2.9vw, 29px);
		}

		.content_inner {
			padding-left: 25px;
			position: relative;


			&::before {
				content: 'A';
				display: inline-block;
				font-family: "FOT-ニューロダン Pro DB", "NewRodinPro-DB", "Roboto", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
				font-weight: bold;
				font-size: 22px;
				line-height: 1;
				color: #df5979;
				position: absolute;
				top: 0.2ex;
				left: 2px;

				@media screen and (max-width: 575px) {
					top: 0.1ex;
				}
			}
		}
	}
}