/**
 * 入学情報FAQページの検索、カテゴリ、質問一覧、補助導線の基底表示を管理する。
 *
 * FAQ本文は可読性を優先して左揃えを維持し、ページ全体のスマホ中央寄せルールから除外する。
 * 検索入力や開閉状態は assets/js/pages/admissions/faq.js と連携するため、状態クラス名を変更する場合はJSも確認する。
 */

/**
 * 1.0 FAQページ基盤
 *
 * 検索・カテゴリ・質問一覧で共有するコンテナ、文字色、余白を定義する。
 * ブランド色と白は `pages/admissions/base.css` の共通トークンを利用し、FAQ固有の半透明境界線・背景だけを
 * `.shs-admissions-faq` に閉じたトークンとして保持する。これにより同じRGBA値の散在を防ぐ。
 */

.page-faq {
	background: var(--white);
}

.shs-admissions-faq {
	--faq-surface-soft: #fffafc;
	--faq-border-section: rgba(239, 120, 188, 0.72);
	--faq-border-strong: rgba(239, 120, 188, 0.94);
	--faq-border-strongest: rgba(239, 120, 188, 0.95);
	--faq-accent-faint: rgba(239, 120, 188, 0.03);
	--faq-shadow-soft: rgba(158, 83, 105, 0.06);
}

body.page-faq .site-container {
	overflow-x: clip;
}

/**
 * 2.0 キーワード検索
 *
 * 質問文と回答文の両方を検索できる入力欄を大きく表示し、検索意図を例示するプレースホルダーも読みやすくする。
 */

.faq-search-section {
	position: relative;
	z-index: 2;
	margin-top: 0;
	padding: 72px 0 90px;
	background: var(--white);
	border-top: 1px solid var(--faq-border-section);
}

.faq-search-panel {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: 44px;
	padding: 36px 42px;
	background: var(--white);
	border: 1px solid var(--faq-border-strong);
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(158, 83, 105, 0.08);
}

.faq-search-panel h2 {
	margin: 0;
	color: var(--wine);
	font-family: "Yu Mincho", serif;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.faq-search-panel__copy > p:last-child {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 12px;
}

.faq-search-box {
	position: relative;
}

.faq-search-box__icon {
	position: absolute;
	top: 50%;
	left: 20px;
	width: 24px;
	height: 24px;
	color: var(--rose);
	transform: translateY(-50%);
	pointer-events: none;
}

.faq-search-box__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.7;
}

.faq-search-box input {
	width: 100%;
	min-height: 62px;
	padding: 0 58px 0 58px;
	color: var(--ink);
	background: var(--faq-surface-soft);
	border: 1px solid rgba(158, 83, 105, 0.28);
	border-radius: 999px;
	outline: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.faq-search-box input:focus {
	background: var(--white);
	border-color: var(--rose);
	box-shadow: 0 0 0 5px rgba(239, 120, 188, 0.1);
}

.faq-search-box input::placeholder {
	color: #aa9fa4;
}

.faq-search-box input::-webkit-search-cancel-button,
.faq-search-box input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

.faq-search-box__clear[hidden] {
	display: none;
}

.faq-search-box__clear {
	position: absolute;
	top: 50%;
	right: 13px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: var(--rose);
	background: var(--white);
	border: 1px solid var(--faq-border-strongest);
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

/**
 * 3.0 よく見られている質問
 *
 * 初めての利用者が検索前でも主要情報へ到達できるよう、頻出質問を通常一覧より先に提示する。
 */

.faq-popular {
	padding: 20px 0 110px;
	background: var(--white);
}

.faq-section-head {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
}

.faq-section-head .accent-line {
	margin-inline: auto;
}

.faq-popular-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.faq-popular-card {
	position: relative;
	min-height: 265px;
	padding: 34px 34px 30px;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--faq-border-strong);
	border-radius: 19px;
	box-shadow: 0 14px 38px rgba(158, 83, 105, 0.07);
	transition:
		transform var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		box-shadow var(--shs-hover-lift-duration) var(--shs-hover-lift-ease),
		border-color var(--shs-hover-lift-duration) var(--shs-hover-lift-ease);
}

.faq-popular-card::before {
	content: "Q";
	position: absolute;
	right: 16px;
	bottom: 10px;
	color: rgba(158, 83, 105, 0.055);
	font-family: Georgia, serif;
	font-size: 132px;
	line-height: 0.92;
}

.faq-popular-card:hover {
	transform: translateY(var(--shs-hover-card-lift-distance));
	border-color: rgba(239, 120, 188, 0.48);
	box-shadow: 0 22px 48px rgba(158, 83, 105, 0.12);
}

.faq-popular-card__number {
	display: block;
	color: var(--rose);
	font-family: Georgia, serif;
	font-size: 34px;
	line-height: 1;
}

.faq-popular-card__category {
	display: inline-block;
	margin-top: 24px;
	color: var(--rose);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.faq-popular-card h3 {
	position: relative;
	z-index: 1;
	margin: 12px 0 0;
	color: var(--wine);
	font-family: "Yu Mincho", serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.faq-popular-card__arrow {
	position: absolute;
	right: 28px;
	bottom: 24px;
	color: var(--rose);
	font-size: 24px;
}

/**
 * 4.0 カテゴリ絞り込み
 *
 * 入学・学費・学校生活などのカテゴリを横断し、選択中のカテゴリを状態色で明示する。
 */

.faq-browser {
	padding: 108px 0 120px;
	background: var(--faq-surface-soft);
	border-top: 1px solid var(--faq-border-section);
	border-bottom: 1px solid var(--faq-border-section);
}

.faq-browser__layout {
	display: grid;
	grid-template-columns: 255px minmax(0, 1fr);
	gap: 52px;
	align-items: stretch;
	overflow: visible;
	overflow-anchor: none;
}

.faq-categories {
	position: sticky;
	top: 118px;
	z-index: 2;
	align-self: start;
	height: fit-content;
	padding: 26px;
	background: var(--white);
	border: 1px solid var(--faq-border-strong);
	border-radius: 18px;
	box-shadow: 0 14px 34px var(--faq-shadow-soft);
	overflow-anchor: none;
}

.faq-categories__label {
	position: relative;
	margin: 0 0 18px;
	padding-left: 14px;
	color: var(--wine);
	font-family: Georgia, serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.faq-categories__label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rose);
	transform: translateY(-50%);
}

.faq-category-list {
	display: grid;
	overflow: hidden;
	gap: 0;
	border: 1px solid rgba(239, 120, 188, 0.62);
	border-radius: 15px;
	background: var(--white);
	box-shadow: 0 12px 32px var(--faq-shadow-soft);
}

.faq-category-list button {
	width: 100%;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 16px;
	color: #6c5a64;
	text-align: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(239, 120, 188, 0.24);
	border-radius: 0;
	cursor: pointer;
	transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.faq-category-list button > span {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

.faq-category-list button:last-child {
	border-bottom: 0;
}

.faq-category-list button:hover,
.faq-category-list button:focus-visible,
.faq-category-list button.is-active {
	color: var(--wine);
	background: linear-gradient(90deg, rgba(239, 120, 188, 0.09), rgba(239, 120, 188, 0.03));
}

.faq-category-list button.is-active {
	box-shadow: inset 4px 0 0 var(--rose);
}

.faq-category-list button.is-active > span {
	color: var(--rose);
	font-weight: 700;
}

.faq-category-list small {
	min-width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	color: var(--wine);
	background: var(--white);
	border: 1px solid rgba(239, 120, 188, 0.28);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

/**
 * 5.0 絞り込み結果と操作
 *
 * 現在の検索条件、件数、条件解除を同じ領域へまとめ、一覧が変わった理由を把握できるようにする。
 */

.faq-content__status {
	min-height: 42px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(239, 120, 188, 0.78);
}

.faq-content__status p {
	margin: 0;
}

.faq-result-summary {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

.faq-result-summary__icon {
	position: relative;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	background: var(--faq-accent-faint);
	border-radius: 50%;
}

.faq-result-summary__icon::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 7px;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--wine);
	border-radius: 50%;
}

.faq-result-summary__icon::after {
	content: "";
	position: absolute;
	top: 17px;
	left: 17px;
	width: 6px;
	height: 1.5px;
	background: var(--wine);
	transform: rotate(45deg);
	transform-origin: left center;
}

.faq-result-summary__text {
	min-width: 0;
}

.faq-result-summary__text strong {
	color: var(--rose);
	font-weight: 700;
}

.faq-result-summary__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 26px;
	padding: 0 10px;
	color: var(--rose);
	background: var(--faq-accent-faint);
	border: 1px solid rgba(239, 120, 188, 0.2);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.faq-content__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px 18px;
}

.faq-content__actions button {
	padding: 6px 0;
	color: var(--rose);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(158, 83, 105, 0.35);
	font-size: 11px;
	cursor: pointer;
}

.faq-content__actions .faq-filter-reset {
	min-height: 32px;
	padding: 0 14px;
	color: var(--white);
	background: var(--wine);
	border: 1px solid var(--wine);
	border-radius: 999px;
	font-weight: 700;
}

.faq-content__actions .faq-filter-reset:hover {
	background: var(--wine-deep);
	border-color: var(--wine-deep);
}

/**
 * 6.0 質問アコーディオン
 *
 * 質問を見出しとして一覧し、必要な回答だけ展開できるようにする。開閉状態はJavaScriptとaria属性を同期する。
 */

.faq-list {
	display: grid;
	gap: 14px;
}

.faq-item {
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--faq-border-strongest);
	border-radius: 17px;
	box-shadow: 0 10px 28px rgba(158, 83, 105, 0.045);
}

.faq-item[hidden] {
	display: none;
}

.faq-item h3 {
	margin: 0;
}

.faq-question {
	width: 100%;
	min-height: 86px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	color: var(--wine);
	text-align: left;
	background: var(--white);
	border: 0;
	cursor: pointer;
	transition: background 0.25s ease;
}

.faq-question:hover,
.faq-question[aria-expanded="true"] {
	background: #fff9fb;
}

.faq-question > span:nth-child(2) {
	font-family: "Yu Mincho", serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.04em;
}

.faq-question__mark,
.faq-answer__mark {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--white);
	background: var(--rose);
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 17px;
}

.faq-question__toggle {
	position: relative;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(158, 83, 105, 0.36);
	border-radius: 50%;
}

.faq-question__toggle::before,
.faq-question__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1px;
	background: var(--wine);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}

.faq-question__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-question__toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
	height: 0;
	overflow: hidden;
	opacity: 0;
	border-top: 1px solid transparent;
	transition: height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease, border-color 0.28s ease;
	will-change: height;
}

.faq-item.is-open .faq-answer {
	opacity: 1;
	border-top-color: rgba(239, 120, 188, 0.82);
}

.faq-answer > div {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 18px;
	padding: 26px 68px 30px 24px;
	background: linear-gradient(180deg, var(--white), var(--faq-surface-soft));
}

.faq-answer__mark {
	color: var(--wine);
	background: var(--white);
	border: 1px solid rgba(158, 83, 105, 0.35);
}

.faq-answer p {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 2;
}

/**
 * 7.0 検索結果なし
 *
 * 該当質問がない場合は空白にせず、検索条件を変える案内と問い合わせ導線を表示する。
 */

.faq-empty {
	padding: 70px 30px;
	text-align: center;
	background: var(--white);
	border: 1px dashed rgba(158, 83, 105, 0.3);
	border-radius: 18px;
}

.faq-empty span {
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	display: grid;
	place-items: center;
	color: var(--rose);
	background: var(--rose-pale);
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 28px;
}

.faq-empty h3 {
	margin: 0;
	color: var(--wine);
	font-family: "Yu Mincho", serif;
	font-size: 22px;
	font-weight: 500;
}

.faq-empty p {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 13px;
}

/**
 * 8. FAQページのレスポンシブ設計
 *
 * 検索・カテゴリ・質問一覧を画面幅に応じて縦積みへ変更する。FAQ本文は読みやすさを優先し、全ページ共通の中央寄せ対象から除外する。
 */

@media (max-width: 1100px) {
	.faq-browser__layout {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.faq-search-panel {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.faq-popular-grid {
		grid-template-columns: 1fr;
	}

	.faq-popular-card {
		min-height: 210px;
	}

	.faq-browser__layout {
		grid-template-columns: 1fr;
	}

	.faq-categories {
		position: static;
		top: auto;
		padding: 18px;
	}

	.faq-category-list {
		grid-template-columns: 1fr;
	}

	.faq-category-list button {
		min-height: 44px;
	}
}

@media (max-width: 700px) {
	.faq-search-section {
		margin-top: 0;
		padding: 52px 0 70px;
	}

	.faq-search-panel {
		padding: 28px 24px;
		border-radius: 18px;
	}

	.faq-search-panel h2 {
		font-size: 24px;
	}

	.faq-search-box input {
		min-height: 56px;
		padding-left: 52px;
		font-size: 14px;
	}

	.faq-popular {
		padding-bottom: 76px;
	}

	.faq-browser {
		padding-block: 76px;
	}

	.faq-section-head {
		margin-bottom: 32px;
	}

	.faq-category-list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.faq-question {
		min-height: 78px;
		grid-template-columns: 38px minmax(0, 1fr) 30px;
		gap: 13px;
		padding: 18px 16px;
	}

	.faq-question__mark,
	.faq-answer__mark {
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	.faq-question > span:nth-child(2) {
		font-size: 16px;
	}

	.faq-answer > div {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 13px;
		padding: 22px 18px 25px 16px;
	}

	.faq-answer p {
		font-size: 13px;
	}
}

@media (max-width: 430px) {
	.faq-content__status {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.faq-result-summary {
		width: 100%;
	}

	.faq-content__actions {
		width: 100%;
		justify-content: flex-start;
	}

	.faq-popular-card {
		min-height: 222px;
		padding: 28px 24px;
	}

	.faq-popular-card::before {
		bottom: 13px;
	}

	.faq-popular-card h3 {
		font-size: 19px;
	}
}

/**
 * 9.0 モーション抑制
 *
 * prefers-reduced-motion が有効な環境ではアコーディオンやホバーの移動量を抑え、情報取得を待たせない。
 */

@media (prefers-reduced-motion: reduce) {
	.faq-popular-card,
	.faq-question,
	.faq-question__toggle::after,
	.faq-answer {
		transition: none;
	}
}

@media (max-width: 760px) {
	/*
	 * 検索パネルは文字だけでなく内容ブロック自体も中央軸へ揃える。
	 * 全ページ共通の文字寄せはmobile-content-layout.cssで管理する。
	 */
	.shs-admissions-faq .faq-search-panel__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shs-admissions-faq .faq-search-panel h2 {
		line-height: 1.55;
	}
}