@charset "utf-8";
/* CSS Document */

.faq-category-list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
	gap: 10px;
	margin-block: 0px 3rem;
	li {
		font-size: clamp(14px, 2.66667vw, 16px);
		color: var(--main-green);
		background: var(--pale-green);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		line-height: 150%;
		width: 100%;
		a {
			display: grid;
			justify-content: center;
			padding: 10px 1rem;
			position: relative;
			width: 100%;
			&::after {
				content: '';
				display: inline-block;
				width: 0;
				height: 0;
				border-right: 4px solid transparent;   /* 上辺透明 */
				border-left: 4px solid transparent;/* 下辺透明 */
				border-top: 6px solid var(--main-green);         /* 左辺に色を付けて三角形に */
				left: 50%;
				transform: translateX(-50%);
				position: relative;
			}
		}
		&.is-current,
		&:hover {
			background: var(--main-green);
			color: #FFF;
			transition: ease 0.3s;
			a {
				opacity: 1;
				&::after {
					border-top: 6px solid #FFF;         /* 左辺に色を付けて三角形に */
				}
			}
		}
	}
}

@media screen and (max-width: 599px) {
	/* 600px版のカテゴリ3列を維持 */
	.faq-category-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.667vw;
	}

	.faq-category-list li a {
		min-width: 0;
		padding-inline: 1.667vw;
	}

	.accordion-header {
		padding: 2.667vw;
		padding-right: 12vw;
	}

	.accordion-header::after {
		right: 3.333vw;
	}

	.accordion-body {
		padding-inline: 3.333vw;
	}
}

.faq_cate_ttl {
	font-size: clamp(18px, 3.66667vw, 22px);
	color: var(--main-green);
	display: flex;
	align-items: center;
	column-gap: 5px;
	position: relative;
	margin-bottom: 1rem;
	&::before {
		content: '●';
	}
}

.faq_caution {
	font-size: clamp(14px, 2.66667vw, 16px);
	font-family: '游ゴシックMedium';
	text-align: right;
}


.accordion {
	display: grid;
	row-gap: 1rem;
	margin-block: 5px 3rem;
}

.accordion-item {
	background: #E1DFD9;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.faq_mark {
	display: grid;
	grid-template-columns: 35px auto;
	column-gap: 1rem;
	position: relative;
	&::before {
		display: inline-block;
		position: relative;
		color: #FFF;
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックBold';
		z-index: 1;
		line-height: 0;
		top: 18px;
		width: 0px;
		height: 0px;
	}
	&::after {
		content: '';
		display: inline-block;
		width: 35px;
		height: 35px;
		position: absolute;
		border-radius: 50px;
		z-index: 0;
	}
	&.type_Q::before {
		content: 'Q';
		left: 10px;
		top: 0px;
	}
	&.type_Q::after {
		background: var(--brown);
	}
	&.type_A::before {
		content: 'A';
		left: 12px;
	}
	&.type_A::after {
		background: var(--main-green);
	}
}


.accordion-header {
	cursor: pointer;
	font-size: clamp(15px, 3vw, 18px);
	font-family: '游ゴシックBold';
	border: 0px;
	background: inherit;
	padding: 1rem;
	width: 100%;
	position: relative;
	text-align: left;
	line-height: 130%;
	&::after {
		content: '';
		background: url("../images/faq/icon_open.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 32px;
		height: 32px;
		right: 20px;
		top: 12px;
		position: absolute;
	}
	.faq_mark {
		width: 90%;
		align-items: center;
	}
}

.accordion-body {
    opacity: 1;
    transform: translateY(-12px);   /* ← ふわっと距離を倍にする */
    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(0.25, 0.1, 0.25, 1.0); /* ← 柔らかい動き */
    display: none;
	padding: 1rem 20px 0px;
	.accordion-body_inner {
		background: #FFF;
		font-size: clamp(14px, 2.66667vw, 16px);
		font-family: '游ゴシックMedium';
		padding: 1rem;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		text-align: justify;
		.faq_content {
			strong {
				color: #B7002C;
				font-weight: 500;
				text-decoration: underline;
			}
			.faq_link {
				margin-top: 1rem;
				line-height: 0;
				a {
					color: var(--main-green);
					text-decoration: underline;
					display: flex;
					align-items: center;
					column-gap: 5px;
					position: relative;
					line-height: 100%;
					&::before {
						content: '';
						display: inline-block;
						width: 0;
						height: 0;
						border-top: 4px solid transparent;
						border-bottom: 4px solid transparent;
						border-left: 6px solid var(--main-green);
						top: 1px;
						position: relative;
					}
				}
			}
		}
	}
}

.accordion-item.is-open {
	.accordion-header {
		&::after {
			content: '';
			background: url("../images/faq/icon_close.svg");
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			width: 32px;
			height: 32px;
			right: 20px;
			position: absolute;
		}
	}
}

.accordion-item.is-open .accordion-body {
	display: block;
}