@charset "UTF-8";

/**
 * よくある質問（page-faq.php）
 *
 * design/faq.svg（SP 390）と design/faq-pc.svg（PC 1920）準拠。
 *
 *                    SP(390)                   PC(1920 / 実質最大幅 1048)
 *   見出し           FAQ 19px #e83318          25px
 *                    よくある質問 25px #535353  37px
 *   カード           350x54 角丸9 #ededed      1048x91 角丸9 #ededed
 *   カード間隔       20px                      24px
 *   内余白           左右 12px / 上下 13px     左右 24px / 上下 22px
 *   バッジ→本文      12px                      17px
 *   Q/A バッジ       28px 円                   47px 円（Q:#0b53a4 / A:#e83318）
 *   質問テキスト     14px #535353              19px #535353
 *   開閉アイコン     シェブロン #707070        シェブロン #535353
 *
 * 影は SVG の feGaussianBlur(3) / dy 3 / opacity .161 を再現。
 */

/* --- 設計トークン ------------------------------------------------------- */
.faq-page {
	--faq-card-bg: #ededed;
	--faq-text: #535353;
	--faq-q: #0b53a4;
	--faq-a: #e83318;
	--faq-radius: 9px;
	--faq-badge-size: 28px;
	--faq-gap: 24px;
	--faq-pad-x: 12px;
	--faq-pad-y: 13px;
	--faq-badge-gap: 12px;
	--faq-font: 14px;
	--faq-shadow: 0 3px 6px rgba(0, 0, 0, 0.161);

	background-color: #fffaef;
}

/* --- 見出し ------------------------------------------------------------- */
.faq-page__header {
	width: min(100% - 40px, 1048px);
	margin: 26px auto 0;
	text-align: center;
}

.faq-page .page-title_wrap {
	margin: 0;
	line-height: 1.5;
}

.faq-page .title_en {
	color: var(--faq-a);
	font-family: "Impact";
	font-size: clamp(1.188rem, 1.099rem + 0.38vw, 1.563rem);
	letter-spacing: 0.35em;
}

.faq-page .title_jp {
	color: var(--faq-text);
	font-weight: 800;
	font-size: clamp(1.563rem, 1.116rem + 1.92vw, 2.313rem);
	letter-spacing: 0.05em;
}

/* --- 一覧 --------------------------------------------------------------- */
.faq-page__list {
	display: grid;
	width: min(100% - 40px, 1048px);
	margin: 30px auto 0;
	gap: var(--faq-gap);
}

/* --- カード ------------------------------------------------------------- */
.faq-item {
	border-radius: var(--faq-radius);
	background-color: var(--faq-card-bg);
	box-shadow: var(--faq-shadow);
}

/* --- 質問（サマリー） ---------------------------------------------------- */
.faq-item__question {
	display: grid;
	position: relative;
	align-items: center;
	padding: var(--faq-pad-y) var(--faq-pad-x);
	gap: 0 var(--faq-badge-gap);
	grid-template-columns: var(--faq-badge-size) 1fr auto;
	color: var(--faq-text);
	font-size: var(--faq-font);
	line-height: 1.6;
	list-style: none;
	cursor: pointer;

	/* 長い質問文でもカード幅を押し広げないよう、折り返しを許容する。*/
	overflow-wrap: anywhere;
}

/* Safari の三角マーカーを消す（list-style: none だけでは残る） */
.faq-item__question::-webkit-details-marker {
	display: none;
}

.faq-item__question:focus-visible {
	outline: 3px solid var(--faq-q);
	outline-offset: 2px;
}

/* --- Q / A バッジ -------------------------------------------------------- */
.faq-item__badge {
	display: grid;
	width: var(--faq-badge-size);
	height: var(--faq-badge-size);
	border-radius: 50%;
	color: #ffffff;
	font-weight: 700;
	font-size: calc(var(--faq-badge-size) * 0.6);
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1;
	place-items: center;
}

.faq-item__badge--q {
	background-color: var(--faq-q);
}

.faq-item__badge--a {
	background-color: var(--faq-a);
}

/* --- 開閉アイコン -------------------------------------------------------- */
.faq-item__icon {
	width: 14px;
	height: 14px;
	border-right: 2px solid #707070;
	border-bottom: 2px solid #707070;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__icon {
	transform: translateY(15%) rotate(225deg);
}

/* --- 回答 --------------------------------------------------------------- */
.faq-item__answer {
	display: grid;
	align-items: start;
	padding: 0 var(--faq-pad-x) var(--faq-pad-y);
	gap: 0 var(--faq-badge-gap);
	grid-template-columns: var(--faq-badge-size) 1fr;
	color: var(--faq-text);
	font-size: var(--faq-font);
	line-height: 2;
}

.faq-item__answer-body > :first-child {
	margin-top: 0;
}

.faq-item__answer-body > :last-child {
	margin-bottom: 0;
}

.faq-item__answer-body p {
	margin: 0;
}

.faq-item__answer-body p + p {
	margin-top: 0.75em;
}

.faq-item__answer-body a {
	color: var(--faq-q);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: opacity 0.3s ease;
}

.faq-item__answer-body a:hover {
	opacity: 0.7;
}

.faq-item__answer-body img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.faq-item__answer-body ul , .faq-item__answer-body ol {
	margin: 0.5em 0;
	padding-left: 1.5em;
	list-style: revert;
}

/* --- CTA ---------------------------------------------------------------- */
/* .page-link-button は右に 75px の矢印ブロックを ::after で伸ばすため、
   単純な center だと矢印分だけ見た目が右にずれる。矢印幅を差し戻して中心を揃える。*/
.faq-page__cta {
	display: flex;
	margin-top: 60px;
	padding-left: 75px;
	justify-content: center;
}

.faq-page .page-link-button {
	display: inline-block;
	padding: 16px 46px;
}

@media screen and (max-width: 767px) {
	.faq-page__cta {
		margin-top: 40px;
		padding-left: 60px;  /* SP は矢印幅が 60px */
	}
}

/* --- 該当なし ------------------------------------------------------------ */
.faq-page .no-post {
	width: min(100% - 40px, 1048px);
	margin: 40px auto 0;
	color: var(--faq-text);
	text-align: center;
}

/* --- PC ----------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.faq-page {
		--faq-badge-size: 47px;
		--faq-gap: 34px;
		--faq-pad-x: 24px;
		--faq-pad-y: 22px;
		--faq-badge-gap: 17px;
		--faq-font: 19px;
	}

	.faq-page__cta {
		margin-bottom: 100px;
	}

	.faq-page__header {
		margin-top: 40px;
	}

	.faq-page__list {
		margin-top: 60px;
	}

	.faq-item__answer {
		padding-top: 4px;
	}

	.faq-item__icon {
		width: 18px;
		height: 18px;
		border-width: 4px;
		border-color: #535353;
	}
}