@charset "UTF-8";
/* =========================================================
   tokens.css
   デザイントークン(変数)を一元管理する。
   このファイルを編集するだけで全体の見た目が変わる。
   ========================================================= */

:root {
	/* ---------- カラーパレット ----------
	   既存サイトの基調(モノトーン+アクセント)を踏襲 */
	--color-bg:           #ffffff;
	--color-bg-alt:       #f5f5f5;       /* セクション背景・薄グレー */
	--color-text:         #2b2b2b;       /* 本文 */
	--color-text-muted:   #666666;       /* キャプション等 */
	--color-heading:      #1a1a1a;       /* 見出し */
	--color-border:       #e5e5e5;       /* 罫線 */

	/* メインアクセント(ナビ縦書き等で使う青系) */
	--color-accent:       #1a4d7a;
	--color-accent-hover: #16395c;
	--color-link:         #1a4d7a;
	--color-link-hover:   #16395c;

	/* お問い合わせフローティングボタン(ティールグリーン)
	   既存サイトの右側緑タブの色を踏襲 */
	--color-contact:       #4a9b8e;
	--color-contact-hover: #3d8276;

	/* トップへ戻るボタン(明るい青) */
	--color-totop:       #4a9bd6;
	--color-totop-hover: #3a87bf;

	--color-white:        #ffffff;
	--color-overlay:      rgba(0, 0, 0, 0.4);

	/* ヘッダー背景(スクロール後) */
	--color-header-bg:    rgba(255, 255, 255, 0.95);

	/* ---------- タイポグラフィ ---------- */
	--font-family-base:
		"Noto Sans JP",
		"Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ ProN W3",
		"Yu Gothic",
		"游ゴシック",
		"Meiryo",
		"メイリオ",
		sans-serif;
	--font-family-mincho:
		"Noto Serif JP",
		"Hiragino Mincho ProN",
		"ヒラギノ明朝 ProN",
		"Yu Mincho",
		"游明朝",
		"YuMincho",
		serif;
	--font-family-en:
		"Roboto",
		"Helvetica Neue",
		Arial,
		sans-serif;

	--font-size-xs:   0.75rem;   /* 12px */
	--font-size-sm:   0.875rem;  /* 14px */
	--font-size-base: 1rem;      /* 16px */
	--font-size-md:   1.125rem;  /* 18px */
	--font-size-lg:   1.25rem;   /* 20px */
	--font-size-xl:   1.5rem;    /* 24px */
	--font-size-2xl:  2rem;      /* 32px */
	--font-size-3xl:  2.5rem;    /* 40px */

	--line-height-tight:  1.3;
	--line-height-base:   1.7;
	--line-height-loose:  2;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold:   700;

	/* ---------- 余白(8pxベース) ---------- */
	--space-1: 0.25rem;   /* 4px  */
	--space-2: 0.5rem;    /* 8px  */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-7: 3rem;      /* 48px */
	--space-8: 4rem;      /* 64px */
	--space-9: 6rem;      /* 96px */
	--space-10: 8rem;     /* 128px */

	/* ---------- レイアウト幅 ----------
	   ★コンテナ幅は 1200px に確定 */
	--container-max:        1200px;
	--container-narrow-max: 880px;
	--container-padding:    1.5rem;     /* SP用左右余白 */

	/* ---------- ヘッダー高さ ---------- */
	--header-height:        180px;       /* PC: 余裕を持った縦書きナビに合わせて */
	--header-height-sp:     64px;

	/* ---------- フローティングボタン関連 ---------- */
	--floating-contact-width: 56px;      /* お問い合わせタブの幅 */
	--floating-totop-size:    52px;      /* トップへ戻るボタンの直径 */

	/* ---------- 罫線・角丸・影 ---------- */
	--border-width: 1px;
	--radius-sm:    2px;
	--radius-md:    4px;
	--radius-lg:    8px;
	--radius-full:  9999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* ---------- トランジション ---------- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.4s ease;

	/* ---------- z-index 階層 ---------- */
	--z-base:     1;
	--z-header:   100;
	--z-floating: 200;     /* お問い合わせ・トップへ戻る */
	--z-overlay:  900;
	--z-modal:    1000;
}

/* =========================================================
   ブレークポイント定数(ドキュメント目的)
   - sm:  ~640px(スマホ)
   - md:  ~960px(タブレット)
   - lg:  ~1200px(PC小)
   ========================================================= */