@charset "UTF-8";
/* ============================================================
   SEFU — FAQ Page Specific CSS
   page-faq.php でのみ読み込まれる。
   左サイドナビ + 右アコーディオンレイアウト。
   ============================================================ */


/* ----- FAQ layout --------------------------------------- */

/* リード文: page__inner の外（前）に置き、サイドメニュー有無に関わらずページ中央。
   テキストブロックは480pxで中央寄せ。 */
.faq__layout {
	display: grid;
	grid-template-columns: 280px 880px; /* サイドナビ280 / コンテンツ880 */
	column-gap: 120px;                  /* 間のマージン */
	justify-content: center;            /* 合計1280pxを中央寄せ */
}
.faq__content { min-width: 0; }

@media (max-width: 768px) {
	.faq__layout {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 2rem;
		justify-content: stretch;
	}
}


/* ----- FAQ sidebar nav ---------------------------------- */

.faq__sidebar {
	/* スクロール追従は次フェーズのJS制御。
	   骨格段階では position: sticky で簡易固定。 */
	position: sticky;
	top: calc(var(--h-header) + 2rem);
	align-self: start;
}

.faq__nav-list {
	display: flex;
	flex-direction: column;
	gap: 2.6rem;
}

.faq__nav-item a {
	display: flex;
	gap: 0.5rem;
	font-size: 1.5rem; /* 15px */
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--c-rule);
}

.faq__nav-number {
	flex-shrink: 0; /* 色は a に追従（通常mute / 現在地で明色） */
}

.faq__nav-label {
	flex: 1;
}


/* ----- FAQ content -------------------------------------- */

.faq__category {
	margin-bottom: 3rem;
}

.faq__category-title {
	font-family: var(--f-jp);
	font-size: 2.2rem; /* 22px */
	font-weight: 500;
	margin-bottom: 2.8rem;
	display: flex;
	gap: 0; /* "1.SEFUについて" を詰める */
	align-items: baseline;
}

.faq__category-number {
	color: inherit; /* ゴールド廃止：カンプに合わせ本文と同色 */
}


/* ----- FAQ accordion ------------------------------------ */

.faq__list {
	border-top: 1px solid var(--c-rule);
}

.faq__item {
	border-bottom: 1px solid var(--c-rule);
}

.faq__question {
	display: flex;
	width: 100%;
	gap: 0.8rem;
	padding: 3rem 0; /* カンプの空気感に合わせ上下を広く */
	text-align: left;
	align-items: flex-start;
}

.faq__question-mark {
	font-family: var(--f-en);
	color: inherit; /* ゴールド廃止：カンプに合わせ本文と同色 */
	flex-shrink: 0;
}

.faq__question-text {
	flex: 1;
	font-size: 1.6rem; /* 16px */
}

.faq__question-icon {
	flex-shrink: 0;
	width: 1rem;  /* 10px */
	height: 1rem; /* 10px */
	margin-right: 10px; /* 右端から10px内側へ */
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	margin-top: 6px;
	transition: transform 0.3s ease;
}

.faq__question[aria-expanded="true"] .faq__question-icon {
	transform: rotate(-135deg);
	margin-top: 10px;
}

.faq__answer {
	padding: 1rem 0 3rem 0; /* 質問とのアキ + 下マージン */
}

.faq__answer-body {
	font-size: 1.44rem; /* 14px */
	line-height: 2;
	color: var(--c-ink-mute);
}
/* 回答内のテキストリンク（例: ニュースレターのご登録はこちら）＝下線つき */
.faq__answer-body a {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: opacity 0.3s ease;
}
.faq__answer-body a:hover {
	opacity: 0.7;
}

.faq__empty {
	text-align: center;
	color: var(--c-ink-mute);
	padding: 3rem 0;
}

/* ============================================================
   page-faq.php 実装分（v2.3）: ボタンリセット / 開閉アニメ /
   ナビのアクティブ表示 / アンカーオフセット
   ============================================================ */

/* sticky追従の余白（ヘッダー分のオフセット） */
.faq__category { scroll-margin-top: calc(var(--h-header) + 2rem); }

/* サイドナビ: 通常はミュート、ホバー/現在地で明色＋下線強調 */
.faq__nav-item a {
	color: var(--c-ink-mute);
	transition: color 0.3s ease, border-color 0.3s ease;
}
.faq__nav-item a:hover,
.faq__nav-item a.is-active {
	color: var(--c-ink);
}
.faq__nav-item a.is-active {
	border-bottom-color: var(--c-ink);
}

/* 質問ボタンのリセット */
.faq__question {
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font-family: var(--f-jp);
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.25s ease;
}
.faq__question:hover { opacity: 0.7; }
.faq__question:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.faq__question-text { font-family: var(--f-jp); }

/* アコーディオン開閉（閉=0 / 開=実コンテンツ高さ。高さはJSが付与し、開閉ともスムーズ） */
.faq__answer-wrap {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.faq__answer-wrap { transition: none; }
	.faq__question-icon { transition: none; }
}

/* SP: サイドナビは上部に横並び（sticky解除） */
@media (max-width: 768px) {
	.faq__sidebar {
		position: static;
		top: auto;
	}
	.faq__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}
	.faq__nav-item a { border-bottom: none; }
}


/* ----- フラット表示（カテゴリなし・1列、公開初期） ----- */
.faq__flat {
	width: 880px;       /* サイドナビ有無に関わらずコンテンツ880px固定 */
	max-width: 100%;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.faq__flat { width: auto; }
}

/* ============================================================
   タイトル（Hero = hero-title）上の余白：リーガル系（legal.css）と同値で統一
   ・タイトル上: PC 240px / SP 150px（ヘッダー高さ込み）
   ============================================================ */
.hero--title {
	padding-top: calc(var(--h-header) + 11.8rem); /* PC: 92 + 118 = 210px */
}

@media (max-width: 767px) {
	.hero--title {
		padding-top: calc(var(--h-header) + 9rem); /* SP: 60 + 90 = 150px */
	}
}