/* デザイントークン（nishinippori-scratch）。figma_tokens.py が Figma の注意書きと実際のデザインから作った（2026-10-26 14:19）。
   手で直さない：直すときは Figma の注意書きを直して作り直す。テーマでは var(--color-…) などで使う。 */
:root {
	/* 色 */
	/* ブランドカラー */
	--color-brand-orange: #e8a477;	/* Brand / Orange：ボタンやポイント、装飾などサイトの主要なアクセントに使用 */
	--color-brand-orange-light: #f3d0b8;	/* Brand / Orange Light：薄い背景や区切り線など、オレンジをやわらかく補助する要素に使用 */
	--color-brand-orange-dark: #e88f54;	/* Brand / Orange Dark：見出しやボタンなど、より高い視認性が必要な箇所に使用 */
	--color-active-orange: #d7b56d;	/* Active-orange：ラベルや見出し周辺など、情報を区別・強調するポイントに使用 */
	--color-brand-gold-light: #f0e2c4;	/* Brand / Gold Light：英字見出しや淡い装飾など、ゴールドを補助する要素に使用 */
	--color-brand-green: #76983b;	/* Brand / Green：LINE予約ボタンのデフォルト状態に使用 */
	--color-brand-green-dark: #65980e;	/* Brand / Green Dark：LINE予約ボタンのホバー状態に使用 */
	--color-brand-green: #faf0ed;	/* Brand / Green：LINE予約ボタンのデフォルト状態に使用 */
	--color-brand-green-dark: #fae6e1;	/* Brand / Green Dark：LINE予約ボタンのホバー状態に使用 */
	/* テキストカラー */
	--color-text-primary: #514c46;	/* Text Primary：本文・見出しなど、サイト内の基本となるテキストに使用 */
	--color-text-secondary: #333333;	/* Text Secondary：FVなど、より強い視認性が必要なテキスト */
	--color-text-link: #6bbde3;	/* Text Link：テキストリンクなど、クリック可能な要素を示す際に使用 */
	/* 背景カラー */
	--color-background-main: #fbf7f4;	/* Background / Main：サイト全体のベースとなる背景に使用 */
	--color-background-sub: #f7ece4;	/* Background / Sub：セクションの切り替えや情報のまとまりを区別する背景に使用 */
	--color-background-table: #faf9f5;	/* Background / Table：診療時間表など、表組み内の背景に使用 */
	/* ボーダーカラー */
	--color-border-primary: #e0e0e0;	/* Border Primary：カードや要素を区切る基本的な罫線に使用 */
	--color-border-secondary: #bdbdbd;	/* Border Secondary：より明確に区切りたい箇所の罫線に使用 */
	--color-border-table: #ece5dc;	/* Border Table：診療時間表など、表組み内の罫線に使用 */
	/* カテゴリーカラー */
	--color-category-doctor-male: #a1c3ed;	/* Category / Doctor Male：男性医師を視覚的に区別するためのカテゴリーカラー */
	--color-category-doctor-female: #f498ae;	/* Category / Doctor Female：女性医師を視覚的に区別するためのカテゴリーカラー */
	/* 補い（実際のデザイン） */
	--color-white: #ffffff;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（文字 1853・地 6427・線 3） */
	--color-extra-939393: #939393;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（文字 876・地 1057・線 130） */
	--color-extra-877f6e: #877f6e;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（地 179） */
	--color-extra-fffdf5: #fffdf5;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（地 95） */
	--color-extra-d9d9d9: #d9d9d9;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（地 7・線 22） */
	--color-extra-665041: #665041;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（地 25） */
	--color-extra-91ab63: #91ab63;	/* 注意書きに無い：注意書きに無い・実際のデザインで使用（地 21） */
	/* 書体 */
	--font-family-heading: "Shippori Mincho", "Shippori Mincho B1", serif;	/* 見出し */
	--font-family-body: "Noto Sans JP", sans-serif;	/* 本文 */
	--font-family-latin: "Source Serif 4", serif;	/* 英数字 */
	/* 字（font の一括指定：太さ 大きさ/行の高さ 書体。字間は --ls-… を letter-spacing に） */
	--font-pc-body-bold: 700 16px/1.6 var(--font-family-body);	/* PC/Body Bold */
	--ls-pc-body-bold: .1em;
	--font-pc-lead: 400 16px/2 var(--font-family-body);	/* PC/Lead（補い） */
	--ls-pc-lead: .1em;
	--font-pc-body: 400 16px/1.6 var(--font-family-body);	/* PC/Body（補い） */
	--ls-pc-body: .1em;
	--font-pc-body-small: 400 14px/1.6 var(--font-family-body);	/* PC/Body Small（補い） */
	--ls-pc-body-small: .05em;
	--font-sp-body-bold: 700 14px/1.6 var(--font-family-body);	/* SP/Body Bold */
	--ls-sp-body-bold: .1em;
	--font-sp-lead: 400 14px/1.6 var(--font-family-body);	/* SP/Lead（補い） */
	--ls-sp-lead: .1em;
	--font-sp-body: 400 14px/1.6 var(--font-family-body);	/* SP/Body（補い） */
	--ls-sp-body: .1em;
	--font-sp-body-small: 400 12px/1.6 var(--font-family-body);	/* SP/Body Small（補い） */
	--ls-sp-body-small: .05em;
	--font-pc-heading-1: 800 42px/1 var(--font-family-heading);	/* PC/Heading 1（補い） */
	--ls-pc-heading-1: .05em;
	--font-pc-heading-2-large: 700 36px/1 var(--font-family-heading);	/* PC/Heading 2 Large（補い） */
	--ls-pc-heading-2-large: .1em;
	--font-pc-heading-2-small: 700 28px/1.2 var(--font-family-heading);	/* PC/Heading 2 Small（補い） */
	--ls-pc-heading-2-small: .1em;
	--font-pc-heading-3: 700 20px/1.2 var(--font-family-heading);	/* PC/Heading 3（補い） */
	--ls-pc-heading-3: .05em;
	--font-sp-heading-1-large: 800 26px/1 var(--font-family-heading);	/* SP/Heading 1 Large（補い） */
	--ls-sp-heading-1-large: .1em;
	--font-sp-heading-2: 700 24px/1 var(--font-family-heading);	/* SP/Heading 2（補い） */
	--ls-sp-heading-2: .1em;
	--font-sp-heading-2-small: 700 20px/1.2 var(--font-family-heading);	/* SP/Heading 2 Small（補い） */
	--ls-sp-heading-2-small: .05em;
	--font-sp-heading-3: 700 18px/1.2 var(--font-family-heading);	/* SP/Heading 3（補い） */
	--ls-sp-heading-3: .05em;
	--font-lp-heading-2-large: 700 36px/1.4 var(--font-family-heading);	/* LP/Heading 2 Large（補い） */
	--ls-lp-heading-2-large: .05em;
	--font-lp-heading-2: 800 32px/1.2 var(--font-family-heading);	/* LP/Heading 2（補い） */
	--ls-lp-heading-2: .1em;
	--font-lp-heading-2-small: 700 28px/1.2 var(--font-family-heading);	/* LP/Heading 2 Small（補い） */
	--ls-lp-heading-2-small: .05em;
	--font-lp-heading-3-large: 700 24px/1.2 var(--font-family-heading);	/* LP/Heading 3 Large（補い） */
	--ls-lp-heading-3-large: .05em;
	--font-lp-heading-3-small: 700 20px/1.2 var(--font-family-heading);	/* LP/Heading 3 Small（補い） */
	--ls-lp-heading-3-small: .05em;
	--font-lp-body: 400 16px/1.8 var(--font-family-body);	/* LP/Body（補い） */
	--ls-lp-body: .1em;
	--font-lp-body-small: 400 14px/1.6 var(--font-family-body);	/* LP/Body Small（補い） */
	--ls-lp-body-small: 0em;
	/* 字（端末で切り替わる名前。使うときはこちら：font: var(--font-body); letter-spacing: var(--ls-body);） */
	--font-body-bold: var(--font-pc-body-bold);
	--ls-body-bold: var(--ls-pc-body-bold);
	--font-lead: var(--font-pc-lead);
	--ls-lead: var(--ls-pc-lead);
	--font-body: var(--font-pc-body);
	--ls-body: var(--ls-pc-body);
	--font-body-small: var(--font-pc-body-small);
	--ls-body-small: var(--ls-pc-body-small);
	--font-heading-1: var(--font-pc-heading-1);
	--ls-heading-1: var(--ls-pc-heading-1);
	--font-heading-2-large: var(--font-pc-heading-2-large);
	--ls-heading-2-large: var(--ls-pc-heading-2-large);
	--font-heading-2-small: var(--font-pc-heading-2-small);
	--ls-heading-2-small: var(--ls-pc-heading-2-small);
	--font-heading-3: var(--font-pc-heading-3);
	--ls-heading-3: var(--ls-pc-heading-3);
	/* 幅・余白（px） */
	--w-screen-pc: 1440px;	/* 補足の文：デスクトップ（PC） */
	--w-screen-sp: 390px;	/* 補足の文：スマートフォン（SP） */
	--gutter-wide: 60px;	/* トップページ｜Wideセクション：左余白（PC） */
	--gutter-wide-sp: 20px;	/* トップページ｜Wideセクション：左余白（SP） */
	--w-wide-content: 1320px;	/* トップページ｜Wideセクション：コンテンツ最大幅（PC） */
	--w-wide-content-sp: 350px;	/* トップページ｜Wideセクション：コンテンツ幅（SP） */
	--w-lp-care: 1290px;	/* LP｜Careセクション：Careセクション最大幅（PC） */
	--w-inner: 1120px;	/* 通常下層ページ：主要コンテンツ最大幅（PC） */
	--w-text: 960px;	/* 通常下層ページ：長文本文最大幅（PC） */
	--gutter-page: 160px;	/* 通常下層ページ：左余白（PC） */
	--w-hub-outer: 1232px;	/* 補足の文：外枠（PC） */
	--w-hub-inner: 1120px;	/* 補足の文：主要コンテンツ（PC） */
	--space-4: 4px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・5605回 */
	--space-8: 8px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・2649回 */
	--space-10: 10px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・10514回 */
	--space-12: 12px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・3388回 */
	--space-16: 16px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・3698回 */
	--space-20: 20px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・2590回 */
	--space-24: 24px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・5900回 */
	--space-30: 30px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・461回 */
	--space-32: 32px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・1668回 */
	--space-40: 40px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・1845回 */
	--space-60: 60px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・855回 */
	--space-80: 80px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・318回 */
	--space-100: 100px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・307回 */
	--space-120: 120px;	/* 間隔・内側の余白（実際のデザインの gap・padding）・118回 */
}
/* スマホの字（767px 以下）。メディアクエリの中では変数が使えないので、幅は数字で書く */
@media (max-width: 767px) {
	:root {
		--font-body-bold: var(--font-sp-body-bold);
		--ls-body-bold: var(--ls-sp-body-bold);
		--font-lead: var(--font-sp-lead);
		--ls-lead: var(--ls-sp-lead);
		--font-body: var(--font-sp-body);
		--ls-body: var(--ls-sp-body);
		--font-body-small: var(--font-sp-body-small);
		--ls-body-small: var(--ls-sp-body-small);
		--font-heading-1: var(--font-sp-heading-1-large);
		--ls-heading-1: var(--ls-sp-heading-1-large);
		--font-heading-2-large: var(--font-sp-heading-2);
		--ls-heading-2-large: var(--ls-sp-heading-2);
		--font-heading-2-small: var(--font-sp-heading-2-small);
		--ls-heading-2-small: var(--ls-sp-heading-2-small);
		--font-heading-3: var(--font-sp-heading-3);
		--ls-heading-3: var(--ls-sp-heading-3);
	}
}