@charset "UTF-8";
body#faq .c-relatedpages {
	.item-faq {
		display: none;
	}
}
/* -----------------------------------------------------------
	.p-intro
----------------------------------------------------------- */
.p-intro {
	position: relative;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	&::before {
		content: '';
		width: 100%;
		height: 240px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	@media (max-width: 767px) {
		min-height: 160px;
		padding: 40px 0;
		&::before {
			height: 160px;
		}
	}
	.text {
		letter-spacing: 0.08em;
		position: relative;
		z-index: 1;
	}
}

/* -----------------------------------------------------------
	.p-faq
----------------------------------------------------------- */
.p-faq {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.l-wrap-faq {
		.container-faq {
			display: flex;
			@media (min-width: 1025px) {
				justify-content: space-between;
				align-items: flex-start;
			}
			@media (max-width: 1024px) {
				flex-direction: column;
			}
			.outline-faq {
				border-top: 1px solid var(--color-border);
				border-left: 1px solid var(--color-border);
				padding: 32px 0 0 32px;
				@media (min-width: 1025px) {
					width: 30%;
				}
				@media (max-width: 1024px) {
					margin-bottom: 64px;
				}
				.type {
					font-family: var(--font-sans);
					font-size: calc(20 * var(--rem));
					font-weight: 400;
					line-height: 1;
					color: var(--color-txt-red);
					margin-bottom: 32px;
					@media (max-width: 767px) {
						margin-bottom: 16px;
						font-size: calc(18 * var(--rem));
					}
				}
				.c-list-basic {
					display: flex;
					gap:8px;
					padding-left: 16px;
					@media (min-width: 1025px) {
						flex-direction: column;
					}
					@media (min-width: 768px) and (max-width: 1024px) {
						flex-wrap: wrap;
						gap:8px 0;
						padding-left: 0;
					}
					@media (max-width: 767px) {
						flex-wrap: wrap;
						padding-left: 0;
					}
					li {
						@media (min-width: 768px) and (max-width: 1024px) {
							width: calc(100%/3);
						}
						@media (max-width: 767px) {
							width: calc(100%/2 - 16px);
							line-height: 1.5;
						}
						a {
							@media (hover: hover) {
								transition: 0.3s;
								&:hover {
									opacity: 0.6;
								}
							}
						}
					}
				}
			}
			.container-faq-detail {
				display: flex;
				flex-direction: column;
				gap:64px;
				@media (min-width: 1025px) {
					width: 65.4%;
				}
				@media (max-width: 1024px) {
					order:2;
				}
				.wrap-faq-detail {
					display: flex;
					flex-direction: column;
					gap:24px;
				}
				&.page-detail {
					@media (min-width: 1025px) {
						width: 100%;
					}
				}
			}
			.list-faq {
				display: flex;
				flex-direction: column;
				gap:8px;
				.item-faq {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.50);
					&::details-content {
						content-visibility: unset;
						display: grid;
						@media (prefers-reduced-motion: no-preference) {
							transition-duration: 400ms;
							transition-property: grid-template-rows;
						}
					}
					&:not([open])::details-content {
						grid-template-rows: 0fr;
					}
					&[open]::details-content {
						grid-template-rows: 1fr;
					}
					&.no-accordion {
						&::details-content {
							display: initial;
							grid-template-rows: none;
							transition: none;
						}
					}
				}
				summary {
					display: grid;
					grid-template-columns: 60px 1fr 16px;
					gap: 6px;
					align-items: center;
					padding: 24px 32px;
					font-weight: 500;
					font-size: calc(18 * var(--rem));
					line-height: 1.4;
					transition-duration: 300ms;
					cursor: pointer;
					[open] > & {
						.icon {
							transform: scale(1,-1);
						}
					}
					@media (hover: hover) {
						&:hover {
							background: rgba(255, 255, 255, 1);
							border-radius: 8px;
						}
					}
					@media (max-width: 767px) {
						grid-template-columns: 36px 1fr 16px;
						padding: 16px;
						font-size: calc(15 * var(--rem));
					}
					.q {
						background-color: var(--color-red);
						color: #fff;
						font-family: var(--font-sans);
						font-weight: 400;
						border-radius: 9999px;
						font-size: 20px;
						line-height: 40px;
						width: 28px;
						height: 40px;
						text-align: center;
						margin-right: 32px;
						@media (max-width: 767px) {
							font-size: 16px;
							margin-right: 8px;
						}
					}
					.icon {
						transition: transform 0.4s;
					}
				}
				._overflow-hidden {
					overflow: hidden;
				}
				._contents {
					padding: 40px;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 0 0 8px 8px;
					@media (max-width: 767px) {
						padding: 24px;
					}
				}				
			}
		}
	}
}