@charset "UTF-8";

.faq {
	.faq__qa {
		padding-top: 20px;
		dl {
			box-shadow: 0 0 5px rgba(0, 0, 0, .1);
			border-radius: 10px;
			overflow: hidden;
			+dl {
				margin-top: 15px;
			}
		}
		dt, dd {
			position: relative;
			background-color: #fff;
			line-height: 1.75;
			padding: 10px 10px 10px 35px;
			&:after {
				position: absolute;
				top: 3px;
				left: 10px;
				content: "";
				font-family: var(--accent-font);
				color: var(--color-secondary);
				font-size: 24px;
			}
		}
		dt {
			&:after {
				content: "Q";
			}
		}
		dd {
			display: none;
			&:after {
				content: "A";
			}
		}
		.open {
			dd {
				display: block;
				border-top: 1px solid var(--color-border-2);
			}
			.faq__qa--arrow {
				>span {
					&:after {
						top: 12px;
						transform: rotate(-45deg);
					}
				}
			}
		}
	}
	.faq__qa--arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		display: inline-block;
		width: 26px;
		height: 26px;
		background-color: var(--color-primary);
		border-radius: 50px;
		margin: auto;
		>span {
			display: block;
			width: 26px;
			height: 26px;
			position: relative;
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 8px;
				left: 0;
				right: 0;
				width: 8px;
				height: 8px;
				border: 0px;
				border-top: solid 1px #fff;
				border-right: solid 1px #fff;
				transform: rotate(135deg);
				z-index: 1;
				margin: auto;
				transition-duration: 0.4s;
			}
		}
	}
	@media (min-width: 1120px) {
		.faq__qa {
			padding-top: 40px;
			dl {
				+dl {
					margin-top: 20px;
				}
			}
			.open {
				.faq__qa--arrow {
					>span {
						&:after {
							top: 16px;
						}
					}
				}
			}
			dt, dd {
				padding: 20px 20px 20px 50px;
				&:after {
					top: 10px;
					left: 15px;
					font-size: 30px;
				}
			}
		}
		.faq__qa--arrow {
			right: 20px;
			width: 36px;
			height: 36px;
			>span {
				width: 36px;
				height: 36px;
				&:after {
					top: 13px;
					width: 8px;
					height: 8px;
				}
			}
		}
	}
}