/* ============================================================
 * 名づけハブページ（/naming/）専用スタイル
 *
 * front-page.css（.pmn-top スコープ）の上から差分のみ加える設計。
 *  - パンくず
 *  - クイック検索下部のリンク
 *  - 機能カード4つ（4-col grid）
 *  - FAQ アコーディオン
 * ============================================================ */

/* ---- パンくず ---- */
.pmn-naming__bc {
	padding: 14px 0;
	font-size: 13px;
	color: var(--pm-text-sub);
	background: var(--pm-base);
}
.pmn-naming__bc a { color: var(--pm-primary); text-decoration: none; }
.pmn-naming__bc a:hover { text-decoration: underline; }
.pmn-naming__bc .sep { margin: 0 6px; color: var(--pm-text-sub); }
.pmn-naming__bc .here { color: var(--pm-text-sub); }

/* ---- §3 機能カード 4 つ ---- */
.pmn-top.pmn-naming .pmn-naming__features {
	background: var(--pm-surface-2);
	padding: 80px 0;
}
@media (max-width: 767px) {
	.pmn-top.pmn-naming .pmn-naming__features { padding: 48px 0; }
}

.pmn-top.pmn-naming .feat-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1023px) { .pmn-top.pmn-naming .feat-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pmn-top.pmn-naming .feat-grid-4 { grid-template-columns: 1fr; gap: 16px; } }

.pmn-top.pmn-naming .feat-card {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 28px 20px 24px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease), border-color var(--pm-dur-1) var(--pm-ease);
	box-shadow: var(--pm-shadow-1);
}
.pmn-top.pmn-naming .feat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pm-shadow-2);
	border-color: var(--pm-primary);
}
.pmn-top.pmn-naming .feat-card .ico {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.pmn-top.pmn-naming .feat-card .ico svg,
.pmn-top.pmn-naming .feat-card .ico i { width: 32px; height: 32px; }
.pmn-top.pmn-naming .feat-card h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--pm-text);
}
.pmn-top.pmn-naming .feat-card p {
	font-size: 13px;
	color: var(--pm-text-sub);
	line-height: 1.7;
	margin: 0 0 14px;
}
.pmn-top.pmn-naming .feat-card .more {
	margin-top: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--pm-primary);
	font-family: var(--pm-font-heading);
}

/* ---- §7 FAQ アコーディオン ---- */
.pmn-top.pmn-naming .pmn-naming__faq {
	padding: 80px 0;
	background: var(--pm-base);
}
@media (max-width: 767px) {
	.pmn-top.pmn-naming .pmn-naming__faq { padding: 48px 0; }
}

.pmn-top.pmn-naming .faq-list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pmn-top.pmn-naming .faq-item {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	overflow: hidden;
	transition: border-color var(--pm-dur-1) var(--pm-ease);
}
.pmn-top.pmn-naming .faq-item[open] { border-color: var(--pm-primary); }

.pmn-top.pmn-naming .faq-item summary {
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--pm-text);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
	transition: background var(--pm-dur-1) var(--pm-ease);
}
.pmn-top.pmn-naming .faq-item summary::-webkit-details-marker { display: none; }
.pmn-top.pmn-naming .faq-item summary:hover { background: var(--pm-primary-soft); }
.pmn-top.pmn-naming .faq-item summary::after {
	content: "＋";
	color: var(--pm-primary);
	font-family: var(--pm-font-num);
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0;
	transition: transform var(--pm-dur-1) var(--pm-ease);
	width: 24px;
	text-align: center;
}
.pmn-top.pmn-naming .faq-item[open] summary::after {
	content: "−";
}

.pmn-top.pmn-naming .faq-answer {
	padding: 0 22px 18px;
	color: var(--pm-text);
	font-size: 14px;
	line-height: 1.85;
}
.pmn-top.pmn-naming .faq-answer p { margin: 0 0 8px; }
.pmn-top.pmn-naming .faq-answer p:last-child { margin-bottom: 0; }
.pmn-top.pmn-naming .faq-answer a {
	color: var(--pm-primary);
	text-decoration: underline;
	font-weight: 600;
}
.pmn-top.pmn-naming .faq-answer a:hover { color: var(--pm-primary-hover); }
.pmn-top.pmn-naming .faq-answer b { font-weight: 700; }

@media (max-width: 767px) {
	.pmn-top.pmn-naming .faq-item summary { padding: 14px 16px; font-size: 14px; }
	.pmn-top.pmn-naming .faq-answer { padding: 0 16px 14px; font-size: 13px; }
}

/* ---- §3.5 便利ツール（漢字辞典・命名書） ---- */
.pmn-naming__tools {
	padding: 1.5rem 0 2rem;
}
.pmn-naming__tools-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 600px) {
	.pmn-naming__tools-grid { grid-template-columns: 1fr; }
}
.pmn-naming__tool-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.pmn-naming__tool-card:hover {
	border-color: var(--pm-primary);
	box-shadow: 0 2px 12px rgba(111,179,210,.15);
	transform: translateY(-2px);
}
.pmn-naming__tool-ico {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: var(--pm-primary-soft);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-primary);
}
.pmn-naming__tool-body { flex: 1; min-width: 0; }
.pmn-naming__tool-body h3 {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
	color: var(--pm-text);
}
.pmn-naming__tool-body p {
	font-size: 0.78rem;
	color: var(--pm-text-sub);
	margin: 0;
	line-height: 1.5;
}
.pmn-naming__tool-more {
	flex-shrink: 0;
	font-size: 0.78rem;
	color: var(--pm-primary);
	font-weight: 600;
	white-space: nowrap;
}