/* ===== よくある質問ページ ===== */

/* ファーストビュー背景画像 */
.p-page-fv--faq {
	background-image: url(../../img/faq_header.webp);
	background-size: cover;
	background-position: center;
	min-height: 250px;
}

/* ページタイトルセクション */
.p-page-title {
	padding: 47px 0 16px;
	clip-path: ellipse(95% 100% at 50% 100%);
	background-color: #FFF9F1;
	margin-top: -22px;
}

.p-page-title__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.p-page-title__label {
	letter-spacing: -0.04em;
}

.p-page-title__ja {
	font-size: 2.8rem;
	line-height: 1.6;
}
.l-breadcrumb-wrapper {
	padding-bottom: 21px;
	background-color: #FFF9F1;
}


/* FAQ セクション */
.p-faq {
	padding: 51px 0 45px;
	position: relative;
	background-color: #FFF9F1;
}
.p-faq::after {
	content: "";
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 390 / 334;
	clip-path: ellipse(210% 100% at 50% 100%);
    background-color: #F9EEE8;
}

/* セクションの背景色 */
.p-faq--lesson {
	background-color: #FFF9F1;
}

.p-faq--trial {
	background-color: #F9EEE8;
}
.p-faq--trial::after {
	background-color: #EEF8F7;
}

.p-faq--course {
	background-color: #EEF8F7;
	padding-bottom: 107px;
}
.p-faq--course::after {
	background-color: #FAF0F3;
}

.p-faq__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

/* セクションタイトル */
.p-faq__title {
	color: #E15C45;
	font-family: "Source Han Sans JP", "源ノ角ゴシック JP", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-align: center;
	margin: 0 0 20px 0;
	position: relative;
}
.p-faq--trial .p-faq__title {
	color: #5CC3B2;
} 
.p-faq--course .p-faq__title {
	color: #D05E7D;
} 

/* FAQ アイテム */
.p-faq__items {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 0;
}

/* Q&A タイトル */
.p-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	position: relative;
}

.p-faq__question::before {
	content: "Q";
	position: absolute;
	top: 9px;
    left: 0px;;
	color: #E15C45;
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-size: 3.3rem;
	line-height: 1;
}
.p-faq--trial .p-faq__question::before {
	color: #5CC3B2;
}
/* トグルボタン */
.p-faq__toggle {
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	padding: 12px 0;
	display: flex;
	align-items: flex-start;
	border-bottom: 2px dashed rgba(226, 92, 69, 0.4);
}
.p-faq--trial .p-faq__toggle {
	border-color: rgba(92, 195, 178, 0.4);
}
.p-faq__question-text {
	color: #141429;
	text-transform: uppercase;
	font-family: "Source Han Sans JP", "源ノ角ゴシック JP", sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.75;
	letter-spacing: 0;
	text-align: left;
	margin: 0;
	padding-left: 42px;
	flex: 1;
}


.p-faq__toggle-icon {
	display: block;
	width: 15px;
	height: 15px;
	position: relative;
	transition: transform 0.3s ease;
}

.p-faq__toggle-icon::before {
	content: "";
	position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #E15C45;
    border-right: 2px solid #E15C45;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
}
.p-faq--trial .p-faq__toggle-icon::before {
	border-color: #5CC3B2;
}

.p-faq__toggle[aria-expanded="true"] .p-faq__toggle-icon::after {
	opacity: 0;
}

.p-faq__toggle[aria-expanded="true"] .p-faq__toggle-icon {
	transform: translate(20%, 100%) rotate(180deg);
}

/* アンサーセクション */
.p-faq__answer {
	overflow: hidden;
	margin: 0;
	display: none;
}
.p-faq__answer-inner {
	padding: 12px 0;
}

.p-faq__toggle[aria-expanded="true"] + .p-faq__answer {
	display: block;
}

.p-faq__answer-text {
	color: #141429;
	text-transform: uppercase;
	font-family: "Source Han Sans JP", "源ノ角ゴシック JP", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.75;
	letter-spacing: 0;
	margin: 0 0 16px 0;
}
.p-faq__answer-tel {
	color: #141429  ;
	text-decoration: none;
}
.p-faq__answer-text:last-child {
	margin-bottom: 0;
}

.p-faq__answer-image {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 350/230;
}

.p-faq__answer-image-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-faq__button {
	max-width: 307px;
	margin: 0 auto;
}

/* ===== レスポンシブ ===== */

/* タブレット以上（769px以上） */
@media (min-width: 769px) {
	.p-page-fv--faq {
		aspect-ratio: 1366 / 615;
	}
	.p-page-title {
        padding: 71px 0 16px;
        clip-path: ellipse(53% 100% at 50% 108%);
        background-color: #FFF9F1;
        margin-top: -152px;
    }
	.l-breadcrumb-wrapper {
		padding: 0;
	}
	.breadcrumb {
        max-width: 820px;
        margin: 0 auto;
    }
	.breadcrumb-list {
		padding: 51px 19px 32px;
	}
	.p-faq {
		padding: 0;
	}
	.p-faq--trial,
	.p-faq--course {
		background: #FFF9F1;
	}	
	.p-faq::after {
		display: none;
	}
	.p-faq--trial .p-faq__inner {
		background-color: #F9EEE8;
	}
	.p-faq--course .p-faq__inner {
		background-color: #EEF8F7;
	}
	.p-faq__inner::after {
		content: "";
		position: absolute;
		top: 0px;
		left: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: 390 / 334;
		clip-path: ellipse(140% 100% at 50% 100%);
		background-color: #F9EEE8;
	}
	.p-faq--trial .p-faq__inner::after {
		background-color: #EEF8F7;
	}
	.p-faq--course .p-faq__inner::after {
		background-color: #FAF0F3;
	}
	.p-faq__container {
		position: relative;
		z-index: 1;
		padding: 84px 11px 35px;
	}
	.p-faq--course .p-faq__container {
		padding-bottom: 177px;
	}
	.p-faq__title {
		font-size: 2.4rem;
		margin-bottom: 23px;
	}
	.p-faq__items {
		gap: 10px;
	}
	.p-faq__question::before {
		top: 6px;
	}
	.p-faq__toggle {
		padding: 0 0 19px;
	}
	.p-faq__toggle-icon::before {
		top: 21px;
	}
	.p-faq__toggle[aria-expanded="true"] .p-faq__toggle-icon {
		transform: translate(0%, 216%) rotate(180deg);
	}
	.p-faq__question-text {
		font-size: 2.4rem;
	}
	.p-faq__answer-inner {
		padding: 27px 0;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	/* 画像がある場合のみ横並び */
	.p-faq__answer-inner:has(.p-faq__answer-image) {
		flex-direction: row;
		gap: 21px;
	}
	.p-faq__answer-text {
		flex: 1;
		margin: 0;
	}
	.p-faq__answer-image {
		max-width: 333px;
		flex: 1;
		height: fit-content;
	}
	.p-faq__button {
		width: 100%;
	}
}