/* =========================================
   GRM FAQ Front CSS
   ・カラー等はCSSカスタムプロパティ化してあるので、
     テーマ側で :root や .grmfaq に上書き指定すれば
     サイトごとの配色に合わせられる
   ・ジャンプ時のオフセットは --grmfaq-scroll-offset を
     テーマ側で上書きすれば調整可能（固定ヘッダー対策）
   ・実機（nagayo）で確認した結果、テーマ側に
     .grm-page-content ul / a / h3 等の広い型セレクタ指定
     （list-style / color / text-decoration / margin等）があり、
     単一クラスのセレクタ（詳細度0,1,0）だと負けてしまうことが判明。
     そのため全セレクタを .grmfaq 配下の2クラス構成にして
     詳細度を確保している（!important不使用の方針を踏襲）。
========================================= */
.grmfaq{
	--grmfaq-color-primary:#2271b1;
	--grmfaq-color-primary-soft:#eaf3fb;
	--grmfaq-color-text:#1d2327;
	--grmfaq-color-text-soft:#5b6470;
	--grmfaq-color-border:#e3e6ea;
	--grmfaq-color-bg:#ffffff;
	--grmfaq-color-q:#2271b1;
	--grmfaq-color-a:#d63638;
	--grmfaq-radius:14px;
	--grmfaq-scroll-offset:100px;

	max-width:100%;
	color:var(--grmfaq-color-text);
	box-sizing:border-box;
}

.grmfaq *,
.grmfaq *::before,
.grmfaq *::after{
	box-sizing:border-box;
}

.grmfaq .grmfaq-title{
	text-align:center;
	font-size:clamp(22px,4vw,32px);
	font-weight:700;
	margin:0 0 32px;
}

.grmfaq .grmfaq-empty{
	text-align:center;
	color:var(--grmfaq-color-text-soft);
}

/* =========================================
   カテゴリーナビ
   ・見た目（レイアウト・配色・太さ等）はGRM Rentalの
     カテゴリー絞り込みチップと共用するため、
     テーマ側 assets/css/page.css の
     .grm-subcat-nav / .grm-subcat-pill（+:hover）に一本化。
     ここではul/li特有のブラウザデフォルト（マーカー・余白）の
     リセットのみ行う（一括変更できるよう、色や太さの指定は
     あえてここに置かない）。
========================================= */
.grmfaq .grmfaq-nav{
	margin:0 0 48px;
}

.grmfaq .grmfaq-nav-list{
	list-style:none;
	padding:0;
}

.grmfaq .grmfaq-nav-item{
	margin:0;
	padding:0;
	list-style:none;
}

/* =========================================
   カテゴリーセクション
========================================= */
.grmfaq .grmfaq-category{
	scroll-margin-top:var(--grmfaq-scroll-offset);
	margin:0 0 48px;
}

.grmfaq .grmfaq-category:last-child{
	margin-bottom:0;
}

.grmfaq .grmfaq-category-title{
	position:relative;
	font-size:19px;
	font-weight:700;
	margin:0 0 20px;
	padding-left:16px;
}

.grmfaq .grmfaq-category-title::before{
	content:"";
	position:absolute;
	left:0;
	top:2px;
	bottom:2px;
	width:5px;
	border-radius:3px;
	background:var(--grmfaq-color-primary);
}

/* =========================================
   アコーディオン
========================================= */
.grmfaq .grmfaq-accordion{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.grmfaq .grmfaq-item{
	border:1px solid var(--grmfaq-color-border);
	border-radius:var(--grmfaq-radius);
	background:var(--grmfaq-color-bg);
	overflow:hidden;
	transition:box-shadow .2s ease,border-color .2s ease;
}

.grmfaq .grmfaq-item.is-open{
	border-color:var(--grmfaq-color-primary);
	box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

.grmfaq .grmfaq-question{
	display:flex;
	align-items:center;
	width:100%;
	gap:14px;
	padding:18px 20px;
	background:transparent;
	border:none;
	cursor:pointer;
	text-align:left;
	text-decoration:none;
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	color:var(--grmfaq-color-text);
}

.grmfaq .grmfaq-question-mark{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background:var(--grmfaq-color-primary-soft);
	color:var(--grmfaq-color-q);
	font-weight:700;
	font-size:14px;
}

.grmfaq .grmfaq-question-text{
	flex:1;
}

.grmfaq .grmfaq-icon{
	flex:none;
	position:relative;
	width:18px;
	height:18px;
}

.grmfaq .grmfaq-icon::before,
.grmfaq .grmfaq-icon::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	background:var(--grmfaq-color-text-soft);
	transform:translate(-50%,-50%);
	transition:transform .25s ease,opacity .25s ease;
}

.grmfaq .grmfaq-icon::before{
	width:16px;
	height:2px;
}

.grmfaq .grmfaq-icon::after{
	width:2px;
	height:16px;
}

.grmfaq .grmfaq-item.is-open .grmfaq-icon::after{
	transform:translate(-50%,-50%) rotate(90deg);
	opacity:0;
}

.grmfaq .grmfaq-answer{
	max-height:0;
	overflow:hidden;
	transition:max-height .3s ease;
}

.grmfaq .grmfaq-answer-inner{
	display:flex;
	gap:14px;
	padding:0 20px 20px 20px;
}

.grmfaq .grmfaq-answer-mark{
	flex:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:50%;
	background:#fdeeee;
	color:var(--grmfaq-color-a);
	font-weight:700;
	font-size:14px;
}

.grmfaq .grmfaq-answer-text{
	flex:1;
	color:var(--grmfaq-color-text-soft);
	line-height:1.8;
}

.grmfaq .grmfaq-answer-text p:first-child{
	margin-top:0;
}

.grmfaq .grmfaq-answer-text p:last-child{
	margin-bottom:0;
}

@media screen and (max-width:600px){

	.grmfaq .grmfaq-question{
		padding:16px;
		font-size:15px;
	}

	.grmfaq .grmfaq-answer-inner{
		padding:0 16px 16px 16px;
	}

}