@charset "utf-8";


/*
page-title
*/
.page-title {
    h1 {
        .en {
            @media (width <= 800px) {
                font-size: 50px;
            }
        }
    }
}


/*
faq
*/
.faq {
    background-color: #F6F6FA;
    padding: 120px 0;
    @media (width <= 800px) {
        padding: 64px 0;
    }
	.cbox {
		display: flex;
		flex-wrap: wrap;
		gap: 0 8.3%;
		@media (width <= 800px) {
			display: block;
		}
	}
	h2 {
		position: relative;
		width: 128px;
		margin-bottom: 0;
		@media (width <= 800px) {
			width: 100%;
			margin-bottom: 24px;
		}
		.jp {
			display: block;
			color: var(--blue);
			margin-bottom: 5px;
		}
		.en {
			display: block;
			font-size: 56px;
			font-weight: 600;
			line-height: 1;
			@media (width <= 800px) {
				font-size: 40px;
			}
		}
	}
	.r-faq {
		width: 74.1%;
		@media (width <= 800px) {
			width: 100%;
		}
	}
	.faq-content {
		width: 100%;
		background-color: var(--white);
		border-radius: 19px;
		margin-bottom: 40px;
		padding: 0 64px;
		@media (width <= 800px) {
			padding: 0 16px;
			margin-bottom: 24px;
		}
		&:last-child {
			margin-bottom: 0;
		}
		h3 {
			background-repeat: no-repeat;
			background-position: left 56%;
			padding: 48px 40px 48px 80px;
			margin: 0;
			@media (width <= 800px) {
				background-size: 40px 33px;
				background-position: left 50%;
				padding: 24px 32px 24px 56px;
			}
			&.question {
				color: var(--darkblue-30);
				font-size: 20px;
				line-height: 1.45;
				background-image: url(../img/question.svg);
				cursor: pointer;
				@media (width <= 800px) {
					font-size: 18px;
				}
				&::before,
				&::after {
					position: absolute;
					right: 0;
					top: 50%;
					translate: 0 -50%;
					width: 20px;
					height: 4px;
					content: "";
					background-color: var(--darkblue-30);
					transition: rotate 0.3s ease-out;
					@media (width <= 800px) {
						width: 16px;
					}
				}
				&::after {
					rotate: -90deg;
				}
				&.open {
					&::after {
						rotate: 0deg;
					}
				}
			}
		}
		.answer {
			display: none;
			border-top: 1px solid var(--lightgray);
			padding-bottom: 48px;
			@media (width <= 800px) {
				padding-bottom: 24px;
			}
			h3 {
				color: #52CBB0;
				background-image: url(../img/answer.svg);
			}
			h4 {
				display: flex;
				align-items: flex-end;
				color: var(--blue);
				font-size: 18px;	
				margin-bottom: 14px;
				@media (width <= 800px) {
					font-style: 16px;
					margin-bottom: 8px;
				}
			}
			p {
				&:last-child {
					margin-bottom: 0;
				}
			}
			.answer-detail {
				width: 100%;
				background-color: rgba(234, 239, 245, 0.5);
				border-radius: 19px;
				padding: 24px 32px;
				margin-bottom: 16px;
				@media (width <= 800px) {
					padding: 16px 24px;
					border-radius: 16px;
				}
				&:last-child {
					margin-bottom: 0;
				}
			}
			.half {
				display: flex;
				justify-content: space-between;
				gap: 0 32px;
				margin-bottom: 24px;
				@media (width <= 800px) {
					flex-wrap: wrap;
					gap: 24px 0;
				}
				.answer-detail {
					margin-bottom: 0;
				}
			}
		}
	}
}






/*
related-pages
*/
.related-pages {
	ul {
		li {
			&:nth-child(3) {
				display: none;
			}
		}
	}
}