@charset "utf-8";

/*==================================================================
    IPすまいる2026 ／ faq.css
    よくあるご質問（page-faq.php） 専用スタイル

    アコーディオンの開閉アニメーションは details::details-content の
    block-size 遷移を使う（:root の interpolate-size: allow-keywords が前提）。
    他ページでアコーディオンが必要になった場合は style.css の Object層へ
    引き上げる
==================================================================*/

/*------------------------------------------------------------------
    #list ／ Q&A一覧
------------------------------------------------------------------*/
#list {
	padding-block: var(--m6) var(--m4);
	background: var(--light-gray);
}
#list .wrap {
	max-width: calc(960 * var(--px));
}

#list details {
	padding-inline: var(--m3);
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--pale-gray);
}
#list details + details {
	margin-block-start: var(--m2);
}

/* 開閉アニメーション（prefers-reduced-motionでは無効化） */
@media (prefers-reduced-motion: no-preference) {
	#list details::details-content {
		overflow: clip;
		transition-duration: 0.3s;
		transition-property: content-visibility, block-size;
		transition-behavior: allow-discrete;
	}
}
#list details:not([open])::details-content {
	block-size: 0;
}

/* 質問（summary） */
#list summary {
	display: flex;
	align-items: center;
	gap: var(--m2);
	padding-block: var(--m2);
	list-style: none;
	cursor: pointer;
	position: relative;
}
#list summary::-webkit-details-marker { display: none; }

#list summary h2 {
	flex: 1;
	padding-inline-start: calc(48 * var(--px));
	font-size: var(--medium-size);
	line-height: 1.6;
	position: relative;
}
/* 「Q」マーカー */
#list summary h2::before {
	content: "Q";
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(36 * var(--px));
	height: calc(36 * var(--px));
	border-radius: 50%;
	background: var(--accent);
	color: var(--white, white);
	font-size: var(--regular-size);
	font-weight: 700;
	line-height: 1;

	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	translate: 0 -50%;
}

/* 開閉ボタン（＋ ⇄ −）
   開閉自体は details/summary のネイティブ動作。このbuttonは見た目だけの飾りなので、
   HTML側で tabindex="-1" aria-hidden="true" を付けてタブ順と読み上げから外している
   （付けないと質問ごとに「名前のないボタン」が無効なタブ位置として挟まる） */
#list summary button {
	flex: none;
	width: var(--m3);
	height: var(--m3);
	border-radius: 50%;
	background: var(--white, white);
	pointer-events: none;
	position: relative;
}
#list summary button::before,
#list summary button::after {
	content: "";
	display: block;
	width: 45%;
	height: 4px;
	background: var(--accent);

	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	translate: -50% -50%;
	transition: var(--transition);
}
#list summary button::after {
	rotate: 90deg;
}
#list details[open] summary button::after {
	rotate: 0deg;
	opacity: 0;
}

/* 回答（answer） */
#list .answer {
	border-top: 1px solid var(--border);
	padding-block: var(--m2);
	padding-left: calc(48 * var(--px))
}
#list .answer p {
	font-size: var(--regular-size);
	line-height: 1.9;
}

@media screen and (max-width: 767px) {
	#list {
		padding-block: var(--m3) var(--m2);
		--wrap-padding-inline: var(--m);
	}
	#list details {
		padding-inline: var(--m);
	}
	#list summary {
		padding: var(--m) 0;
		gap: 0;
	}
	#list summary h2 {
		padding-inline-start: calc(48 * var(--px));
		font-size: calc(var(--regular-size) * 1.125);
	}
	#list summary h2::before {
		font-size: var(--regular-size);
	}
	#list .answer {
		padding-inline-start: 0;
	}
}