/*
Theme Name: bikeno1-theme
Theme URI: https://bikeno1.com/
Description: バイク手続きの覚え書き（bikeno1.com）の子テーマ。親テーマ Twenty Twenty-One に対し、VISUAL_REQUIREMENTS.md に定義した見た目（色・書体・余白・罫線）を適用する。
Author: bikeno1.com
Template: twentytwentyone
Version: 1.0.0
Text Domain: bikeno1-theme
*/

/*
 * デザイントークン。VISUAL_REQUIREMENTS.md §2.1 の8色に限定する。
 * 個別テンプレート・プラグイン側パーシャル（bikeno1-core/templates/partials/*.php）は
 * このCSS変数名をそのままクラス名の参照先とする（§5.2）。
 */
:root {
	--b1-bg: #FAF9F5;
	--b1-bg-muted: #F2F0E9;
	--b1-ink: #2E2E2B;
	--b1-ink-soft: #55544D;
	--b1-ink-muted: #8A887E;
	--b1-border: #E4E1D8;
	--b1-border-soft: #C9C6BA;
	--b1-link: #0E1BBB;
}

/* ==========================================================================
   共通レイアウト
   ========================================================================== */

body {
	background: var(--b1-bg);
	color: var(--b1-ink);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 14px;
	line-height: 1.9;
}

/*
 * 既定のリンクスタイル（VISUAL_REQUIREMENTS.md §2.1）。
 * クリック可能な本文中のリンクは常にこの色＋下線にする。訪問済みも
 * 色を変えない。ナビゲーション・パンくず等の非コンテンツリンクは
 * 個別のセレクタで --b1-ink ＋ 下線なしに上書きする。
 */
a,
a:visited {
	color: var(--b1-link);
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit;
}

h1 {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
}

h2 {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.b1-container {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ==========================================================================
   共通ヘッダー・ナビゲーション（VISUAL_REQUIREMENTS.md §3.1）
   ========================================================================== */

.b1-site-header {
	border-bottom: 1px solid var(--b1-border);
}

.b1-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 16px;
}

.b1-site-header__name {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}

.b1-site-header__name a {
	color: var(--b1-ink);
	text-decoration: none;
}

.b1-primary-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.b1-primary-nav__list a {
	display: inline-block;
	padding-block: 2px;
	font-size: 14px;
	color: var(--b1-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.b1-primary-nav__list .current-menu-item > a,
.b1-primary-nav__list .current_page_item > a {
	border-bottom-color: var(--b1-ink);
}

.b1-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.b1-nav-toggle__bar {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--b1-ink);
}

@media (max-width: 767px) {
	.b1-nav-toggle {
		display: flex;
	}

	.b1-primary-nav {
		display: none;
	}

	.b1-primary-nav.is-open {
		display: block;
		width: 100%;
	}

	.b1-site-header__inner {
		flex-wrap: wrap;
	}

	.b1-primary-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
		padding-block: 16px 4px;
	}
}

/* ==========================================================================
   トップページ（VISUAL_REQUIREMENTS.md §3.3）
   ========================================================================== */

.b1-hero {
	padding-block: 40px 32px;
}

.b1-hero__title {
	margin: 0 0 12px;
}

.b1-hero__lead {
	margin: 0 0 20px;
	max-width: 32em;
}

.b1-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 24px;
	margin: 0;
}

.b1-hero__cta-link--muted {
	opacity: 0.6;
}

.b1-top-teaser {
	padding-block: 32px 40px;
	border-top: 1px solid var(--b1-border);
}

.b1-top-teaser h2 {
	margin: 0 0 12px;
}

.b1-top-teaser p {
	margin: 0 0 12px;
	max-width: 32em;
}

/* ==========================================================================
   手続き窓口ページ（VISUAL_REQUIREMENTS.md §3.4）
   ========================================================================== */

.b1-office {
	padding-block: 24px 48px;
}

/*
 * 窓口名の見出しは §2.3 の一般的な H1（20〜22px）ではなく、
 * §3.4 が明示するレコード型ページ専用の 15px/500 にする。
 */
.b1-office__title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 500;
}

.b1-office__number-plate {
	font-weight: 400;
	color: var(--b1-ink-muted);
}

.b1-office__verified {
	margin: 0 0 24px;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-office__description {
	margin: 0 0 24px;
}

/* 参照情報（§6.2-11）。記事ページの参照情報と同じmutedトーン。URLは
   <code>でプレーンテキスト表示し、リンクにしない（クリック不可）。 */
.b1-office__reference {
	margin: 0;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-office__reference code {
	font-family: "JetBrains Mono", monospace;
	color: var(--b1-ink-soft);
}

/*
 * 各セクションの区切りは罫線1本のみ（§2.4・§3.4）。h2 の上罫線ひとつで
 * 前セクションとの境界を表す。
 */
.b1-office h2 {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--b1-border);
}

.b1-office h2 + * {
	margin-top: 16px;
}

/* 基本情報テーブル。ラベル列は muted、データはJetBrains Mono（§2.2） */
.b1-basic-info {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.b1-basic-info th,
.b1-basic-info td {
	padding-block: 10px;
	border-bottom: 1px solid var(--b1-border);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.b1-basic-info th {
	width: 88px;
	color: var(--b1-ink-muted);
}

.b1-basic-info td {
	font-family: "JetBrains Mono", monospace;
}

.b1-basic-info tr:last-child th,
.b1-basic-info tr:last-child td {
	border-bottom: 0;
}

/* モバイルはラベル列をさらに詰める（§4.2） */
@media (max-width: 767px) {
	.b1-basic-info th {
		width: 44px;
	}
}

/* 管轄区域：地の文（§6.5） */
.b1-jurisdiction {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
}

/*
 * 排気量ルーティング（§3.5）。色ブロックを使わず罫線区切りの表にする。
 * デスクトップ／モバイルとも「区分（左）＋行き先（右寄せ）」の1行で、
 * ブレークポイントによる構造の出し分けは不要。
 */
.b1-displacement-router ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.b1-displacement-router li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-block: 10px;
	border-bottom: 1px solid var(--b1-border);
}

.b1-displacement-router li:last-child {
	border-bottom: 0;
}

.b1-displacement-router__range {
	font-family: "JetBrains Mono", monospace;
}

.b1-displacement-router__range + * {
	margin-inline-start: auto;
	text-align: right;
}

.b1-displacement-router__target {
	font-weight: 500;
}

/* 手続き別の流れ／必要書類：罫線区切りのリンクリスト */
.b1-office__procedures,
.b1-office__documents {
	margin: 0;
	padding: 0;
	list-style: none;
}

.b1-office__procedures li,
.b1-office__documents li {
	border-bottom: 1px solid var(--b1-border);
}

.b1-office__procedures li:last-child,
.b1-office__documents li:last-child {
	border-bottom: 0;
}

.b1-office__procedures a,
.b1-office__documents a,
.b1-office__procedure-pending {
	display: block;
	padding-block: 10px;
}

/* リンク先ページ未作成の手続き（single-b1_office.php の 'ready' => false）：
   リンクと行の高さを揃えつつ、クリックできないことが分かるよう色を落とす */
.b1-office__procedure-pending {
	color: var(--b1-ink-muted);
}

.b1-office__access,
.b1-office__congestion {
	margin: 0 0 8px;
}

/* 注意書き（座標・管轄区域の要再確認など）：引用ブロックスタイル（§2.4） */
.b1-office__note {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: var(--b1-bg-muted);
	border-left: 2px solid var(--b1-border-soft);
	border-radius: 0;
	font-size: 13px;
	color: var(--b1-ink-soft);
}

/* FAQ */
.b1-faq__item {
	padding-block: 16px;
	border-bottom: 1px solid var(--b1-border);
}

.b1-faq__item:last-child {
	border-bottom: 0;
}

.b1-faq__question {
	margin: 0 0 8px;
	font-weight: 500;
}

.b1-faq__answer {
	margin: 0;
	color: var(--b1-ink-soft);
}

/*
 * CTA。§3.8 の「本文中に手動で置くCTAも引用ブロックのスタイルを使う。
 * 独立したバナー画像・色付きボタンにしない」を適用する（クラス名は
 * b1-cta__button だが、見た目はテキストリンクのままにする）。
 * 「[PR]」ラベルも §3.8 の引用ブロック共通パターンとして付与する。
 */
.b1-cta {
	margin-top: 24px;
	padding: 12px 16px;
	background: var(--b1-bg-muted);
	border-left: 2px solid var(--b1-border-soft);
	border-radius: 0;
}

.b1-cta__text {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--b1-ink-soft);
}

.b1-cta__text::before {
	content: "[PR]";
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	color: var(--b1-ink-muted);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   手続き窓口一覧ページ（VISUAL_REQUIREMENTS.md §3.6）
   archive-b1_office.php（都道府県一覧）／taxonomy-b1_pref.php（窓口一覧）
   ========================================================================== */

.b1-office-archive,
.b1-pref-archive {
	padding-block: 24px 48px;
}

.b1-office-archive h1,
.b1-pref-archive h1 {
	margin: 0 0 12px;
}

.b1-office-archive > p {
	margin: 0 0 16px;
}

.b1-office-archive__search-link {
	margin: 0 0 24px;
}

/* 注意書き：原付は市区町村役場である旨。引用ブロックスタイル（§2.4） */
.b1-pref-archive__gentsuki-notice {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--b1-bg-muted);
	border-left: 2px solid var(--b1-border-soft);
	border-radius: 0;
	font-size: 13px;
	color: var(--b1-ink-soft);
}

/* 都道府県一覧（archive-b1_office.php） */
.b1-office-archive__prefs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b1-border);
}

.b1-office-archive__prefs li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-block: 12px;
	border-bottom: 1px solid var(--b1-border);
}

.b1-office-archive__count {
	flex: 0 0 auto;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--b1-ink-muted);
	white-space: nowrap;
}

/*
 * 窓口一覧（taxonomy-b1_pref.php）。カード枠は使わず、罫線区切りの
 * リスト形式にする。1件＝1ブロック全体が <a> なので、「詳しく見る」は
 * 新規リンクではなく既存リンク内の視覚的な affordance として
 * ::after で表現する。
 */
.b1-pref-archive__cards {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b1-border);
}

.b1-office-card {
	border-bottom: 1px solid var(--b1-border);
}

.b1-office-card__link {
	display: block;
	padding-block: 16px;
	text-decoration: none;
}

.b1-office-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--b1-ink);
}

.b1-office-card__title::after {
	content: "詳しく見る";
	margin-inline-start: auto;
	color: var(--b1-link);
	text-decoration: underline;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
}

.b1-office-card__number-plate {
	font-weight: 400;
	color: var(--b1-ink-muted);
}

.b1-office-card__address {
	margin: 0 0 4px;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--b1-ink-soft);
}

.b1-office-card__jurisdiction-count {
	margin: 0;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

/* ==========================================================================
   カテゴリーアーカイブ（category.php）
   /tetsuzuki/ /baikyaku/ /column/。VISUAL_REQUIREMENTS.mdに記述漏れがあった
   ため、§3.6（archive-b1_office.php / taxonomy-b1_pref.php）と同じトーン
   （カード枠なし、罫線区切りのリスト、--b1-linkの下線）で追加する。
   ========================================================================== */

.b1-column-archive {
	padding-block: 24px 48px;
}

.b1-column-archive h1 {
	margin: 0 0 24px;
}

.b1-column-archive__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b1-border);
}

.b1-article-card {
	border-bottom: 1px solid var(--b1-border);
}

.b1-article-card__link {
	display: block;
	padding-block: 16px;
	text-decoration: none;
}

.b1-article-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--b1-ink);
}

.b1-article-card__title::after {
	content: "続きを読む";
	margin-inline-start: auto;
	color: var(--b1-link);
	text-decoration: underline;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
}

.b1-article-card__excerpt {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--b1-ink-soft);
}

.b1-article-card__date {
	margin: 0;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-column-archive__count {
	margin: 16px 0 0;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--b1-ink-muted);
	text-align: right;
}

/* ==========================================================================
   逆引き検索ページ（search-office.php）
   VISUAL_REQUIREMENTS.md に節はないが、§3.6 と同じ罫線ベースのリスト
   （カード枠なし、--b1-link の下線リンク）を踏襲する。フォームの入力欄・
   ボタンは §2.4 のトークン（罫線のみ・角丸なし）でスタイルする。
   ========================================================================== */

.b1-lookup {
	padding-block: 24px 48px;
}

.b1-lookup h1 {
	margin: 0 0 12px;
}

.b1-lookup > p {
	margin: 0 0 24px;
	max-width: 32em;
}

.b1-lookup__form {
	display: flex;
	gap: 12px;
	margin: 0 0 32px;
}

.b1-lookup__form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	background: var(--b1-bg);
	color: var(--b1-ink);
	border: 1px solid var(--b1-border);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
}

.b1-lookup__form input[type="text"]:focus {
	outline: none;
	border-color: var(--b1-ink);
}

/*
 * 検索ボタンはこのページで唯一のボタン風要素。§3.3 の「罫線のみの矩形」
 * ルール（1画面に1つまで）を満たす。背景塗りにしない。
 */
.b1-lookup__form button {
	flex: 0 0 auto;
	padding: 10px 20px;
	background: none;
	color: var(--b1-ink);
	border: 1px solid var(--b1-ink);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.b1-lookup__form button:hover,
.b1-lookup__form button:focus {
	background: var(--b1-bg-muted);
}

/*
 * 検索結果（assets/js/lookup.js が動的に生成）。マッチした窓口の
 * <ul><li><a> と、候補提示の <ul><li>（リンクなし）のどちらも
 * クラス名を持たないため、#b1-lookup-results 配下を要素セレクタで
 * スタイルする。都道府県名の完全一致案内（.b1-lookup__pref-match）
 * のみ、他の候補より優先して目立たせるため個別にクラスを持つ
 * （§7.2：地名の衝突で誤った市区町村候補が主結果に見えないように）。
 */
.b1-lookup__results p {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--b1-ink-soft);
}

.b1-lookup__results .b1-lookup__pref-match {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--b1-bg-muted);
	border-left: 2px solid var(--b1-border-soft);
	font-size: 14px;
	color: var(--b1-ink);
}

.b1-lookup__results ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b1-border);
}

.b1-lookup__results li {
	padding-block: 12px;
	border-bottom: 1px solid var(--b1-border);
	font-size: 14px;
}

/* ==========================================================================
   コラム記事ページ（VISUAL_REQUIREMENTS.md §3.7）
   ========================================================================== */

.b1-article {
	padding-block: 24px 48px;
}

.b1-article__category {
	margin: 0 0 8px;
	font-size: 11px;
	color: var(--b1-ink-muted);
}

/*
 * 記事タイトルは §2.3 の一般的な H1（20〜22px）の範囲内だが、
 * §3.7 が明示する記事ページ専用の 20px/500 にする（複数行可）。
 */
.b1-article__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.b1-article__dates {
	margin: 0 0 24px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: var(--b1-ink-muted);
}

/*
 * リード文＝本文中の最初の実質的な段落（PR表記の自動挿入がある場合は
 * その次の段落）。§3.7 の指定通り line-height を本文よりわずかに広げる。
 * その後のセクションとの区切りは、直後に来る見出し側の border-top
 * （.b1-article__content h2）だけに担わせる。ここに独自の border-bottom を
 * 併せて持たせると、リード文の直後が見出しの場合に罫線が2本並んでしまう
 * （2026-08-27に発見・修正。段落側は罫線を持たないというのが、通常の本文
 * 段落 .b1-article__content p も含めたサイト全体の統一ルール）。
 */
.b1-article__content > p:first-child:not(.b1-pr-notice),
.b1-article__content > .b1-pr-notice + p {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.95;
}

/* セクション見出し：上に罫線＋余白（§3.7） */
.b1-article__content h2 {
	margin: 32px 0 12px;
	padding-top: 24px;
	border-top: 1px solid var(--b1-border);
}

.b1-article__content h2:first-child {
	margin-top: 0;
}

.b1-article__content p {
	margin: 0 0 16px;
}

/* 本文中に表がある場合（書類一覧など）の既定スタイル */
.b1-article__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 13px;
}

.b1-article__content th,
.b1-article__content td {
	padding-block: 8px;
	border-bottom: 1px solid var(--b1-border);
	text-align: left;
	vertical-align: top;
}

/* ==========================================================================
   PR表記・アフィリエイト誘導（VISUAL_REQUIREMENTS.md §3.8）
   ========================================================================== */

/*
 * Compliance\PrDisclosure が本文冒頭に自動挿入する通知。引用ブロック
 * パターン（§2.4）＋「[PR]」ラベルの2行構成にする。
 * .b1-pr-notice は PrDisclosure::CSS_CLASS がハードコードした自動挿入
 * 専用の識別子で、記事本文で手書きすると冒頭の自動通知と重複表示されて
 * しまう（PrDisclosureは重複チェックをせず常に先頭へ追加する）ため、
 * 本文中の手動CTA（.b1-text-cta。下記）とはクラスを分けている。
 */
.b1-pr-notice {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--b1-bg-muted);
	border-left: 2px solid var(--b1-border-soft);
	border-radius: 0;
	font-size: 12px;
	color: var(--b1-ink-soft);
}

/*
 * 記事側で本文中に手動で置くテキストCTA。2026-08-27にグレーの箱表示から
 * 変更し、本文の段落（.b1-article__content p）と見分けがつかない見た目に
 * 統一した（フォント・行間・文字色・幅はすべて継承のまま上書きしない）。
 * リンクは独自の上書きをせず、サイト共通の既定リンクスタイル
 * （45行目の a, a:visited）をそのまま使う。本文中の他のリンク
 * （情報源・関連記事・診断チャートへのリンク等）と同じ色・下線になる。
 * 「[PR]」ラベル（.b1-text-cta::before、下記）が唯一の視覚的な目印になる。
 */
.b1-text-cta {
	margin: 0 0 24px;
}

/*
 * 画像バナーCTA（VISUAL_REQUIREMENTS.md §3.8。テキスト引用ブロックの代わりに
 * 記事側でCTA用途に限り選択できる）。<p> ではなく専用クラスの要素にする
 * ことで、.b1-article__content p の margin（16px）ではなく、CTA用の
 * margin（24px）を独立して持たせている。
 * バナー画像自体にPR表記が含まれないため、.b1-text-cta::before と同じ
 * スタイルの「[PR]」ラベル（下記）をバナー画像の直前に表示する。
 */
.b1-banner-cta {
	margin: 0 0 24px;
	text-align: center;
}

.b1-banner-cta img {
	max-width: 100%;
	height: auto;
}

.b1-pr-notice::before,
.b1-text-cta::before,
.b1-banner-cta::before {
	content: "[PR]";
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	color: var(--b1-ink-muted);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   維持費シミュレータ（VISUAL_REQUIREMENTS.md §3.9）
   bikeno1-tools のショートコード [b1_ijihi_simulator] が出力するHTMLに対応。
   見出し（h2）は記事本文中の他の見出しと同じ扱いのため、ここでは
   上書きしない（.b1-article__content h2 の罫線・余白をそのまま使う）。
   ========================================================================== */

.b1-simulator {
	margin: 0 0 16px;
}

.b1-simulator__lead {
	margin: 0 0 20px;
}

.b1-simulator__field {
	margin: 0 0 20px;
}

.b1-simulator__label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 500;
}

.b1-simulator__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.b1-simulator__radios label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.b1-simulator__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/*
 * 罫線のみ・角丸なしの入力欄トークンは .b1-lookup__form input と共通。
 * 親テーマ（Twenty Twenty-One）の `input[type=number]`（要素+属性
 * セレクタ、詳細度0,1,1）はクラス単体（0,1,0）より詳細度が高く、素の
 * `.b1-simulator__amount-input` だと初期状態の枠線を上書きできない
 * （3px・パレット外の色で表示される既知の不具合だった）。!important は
 * 使わず、`.b1-simulator` を親文脈として付けクラス2つ（0,2,0）にする
 * ことで詳細度だけ上げて確実に上書きする。
 */
.b1-simulator .b1-simulator__amount-input {
	width: 120px;
	padding: 8px 10px;
	background: var(--b1-bg);
	color: var(--b1-ink);
	border: 1px solid var(--b1-border);
	border-radius: 0;
	font-family: "JetBrains Mono", monospace;
	font-size: 14px;
}

.b1-simulator .b1-simulator__amount-input::placeholder {
	color: var(--b1-ink-muted);
}

.b1-simulator .b1-simulator__amount-input:focus {
	outline: none;
	border-color: var(--b1-ink);
}

.b1-simulator__amount-unit-label {
	font-size: 13px;
	color: var(--b1-ink-soft);
}

.b1-simulator__unit-toggle {
	display: inline-flex;
	gap: 12px;
	font-size: 12px;
	color: var(--b1-ink-soft);
}

.b1-simulator__unit-toggle label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/*
 * 各入力欄の下に出す相場レンジの注記。「※任意保険料・駐輪場代は〜」の
 * 注記（.b1-simulator__note）と同じ控えめなmutedスタイルに揃える。
 */
.b1-simulator__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-simulator__result {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--b1-border);
}

.b1-simulator__result-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 13px;
	font-family: "JetBrains Mono", monospace;
}

/* 合計行のみ罫線＋太さで強調する。色は使わない（§1・§3.9） */
.b1-simulator__result-row--total {
	padding-top: 8px;
	border-top: 1px solid var(--b1-border);
	font-weight: 500;
	font-size: 14px;
}

.b1-simulator__note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

/* ==========================================================================
   必要書類診断チャート（REQUIREMENTS.md §11.6）
   bikeno1-tools のショートコード [b1_shorui_shindan] が出力するHTMLに対応。
   質問部分は維持費シミュレータ（.b1-simulator__field/__label/__radios）と
   同じトークンを流用する。カード枠・色ブロックは使わず、結果は罫線区切りの
   チェックリストにする（VISUAL_REQUIREMENTS.md §1・§2.1）。
   ========================================================================== */

.b1-shindan {
	margin: 0 0 16px;
}

.b1-shindan__lead {
	margin: 0 0 20px;
}

.b1-shindan__field {
	margin: 0 0 20px;
}

.b1-shindan__label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 500;
}

.b1-shindan__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.b1-shindan__radios label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.b1-shindan__result {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--b1-border);
}

.b1-shindan__result-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 500;
}

.b1-shindan__venue {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 500;
}

.b1-shindan__checklist {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--b1-border);
}

.b1-shindan__checklist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	padding-block: 10px;
	border-bottom: 1px solid var(--b1-border);
	font-size: 14px;
}

.b1-shindan__checklist-mark {
	flex: 0 0 auto;
}

.b1-shindan__checklist-label {
	font-weight: 500;
}

.b1-shindan__checklist-note {
	flex-basis: 100%;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-shindan__notes {
	margin: 0 0 16px;
}

.b1-shindan__notes p {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--b1-ink-soft);
}

.b1-shindan__verified {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--b1-ink-muted);
}

.b1-shindan__link {
	margin: 0;
	font-size: 13px;
}

/* ==========================================================================
   共通フッター（VISUAL_REQUIREMENTS.md §3.1）
   ========================================================================== */

.b1-site-footer {
	border-top: 1px solid var(--b1-border);
	margin-top: 48px;
}

.b1-site-footer__text {
	padding-block: 20px;
	font-size: 12px;
	color: var(--b1-ink-muted);
}