@charset "utf-8";
/* ============================================================================
   デザイントークン
   ----------------------------------------------------------------------------
   色・余白・文字サイズ・角丸・影を、ここ1か所で定義する。
   各CSSはこの変数を参照すること。値を直書きしないこと。
   （直書きすると「青を少し濃くしたい」だけで12ファイルを直すことになる）

   配色は現行サイトの紺・青を引き継いでいる:
     #003366（紺）  #336699（青）  #1e7fc6（ヘッダーの青）
     #f7b828（お問合せ）  #ff3a45（お申込み）→ 少し落ち着かせて #e0323d
   ========================================================================= */

:root {
	/* --- 基幹色（紺〜青） ------------------------------------------------ */
	--sw-navy-900: #001f3f;
	--sw-navy-800: #003366;   /* 現行の基幹色 */
	--sw-navy-700: #0d4478;
	--sw-blue-600: #336699;   /* 現行 */
	--sw-blue-500: #1e7fc6;   /* 現行ヘッダー */
	--sw-blue-400: #4593ce;
	--sw-blue-300: #7fbde8;
	--sw-blue-200: #b8dcf3;
	--sw-blue-100: #dcedfa;
	--sw-blue-50:  #f1f8fd;

	/* --- 行動を促す色 ---------------------------------------------------- */
	--sw-gold:      #f7b828;  /* お問合せ */
	--sw-gold-dark: #d3960b;
	--sw-red:       #e0323d;  /* お申込み。現行 #ff3a45 は白文字だと眩しいので少し落とす */
	--sw-red-dark:  #b8202b;
	--sw-line-green:#06c755;  /* LINE 公式色 */

	/* --- 文字と背景 ------------------------------------------------------ */
	/* 現行の本文色は #666。白背景でのコントラスト比は 5.7:1 で基準は満たすが、
	   料金表など読み込む情報が多いサイトなので、もう一段濃くして読みやすくする。 */
	--sw-ink:       #2b3440;  /* 本文 */
	--sw-ink-mid:   #55606e;  /* 補足 */
	--sw-ink-weak:  #7a8595;  /* 注記 */
	--sw-ink-invert:#ffffff;

	--sw-bg:        #ffffff;
	--sw-bg-soft:   #f4f8fb;  /* 薄い水色。セクションの区切りに */
	--sw-bg-navy:   var(--sw-navy-800);
	--sw-border:    #dde5ed;
	--sw-border-strong: #b9c6d4;

	/* --- 文字 ------------------------------------------------------------ */
	--sw-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
	                Meiryo, "メイリオ", system-ui, sans-serif;
	--sw-font-serif:"Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W6",
	                "游明朝", YuMincho, "ＭＳ Ｐ明朝", serif;

	--sw-fs-xs:   0.8125rem;  /* 13px 注記 */
	--sw-fs-sm:   0.875rem;   /* 14px */
	--sw-fs-base: 1rem;       /* 16px 本文 */
	--sw-fs-md:   1.125rem;   /* 18px */
	--sw-fs-lg:   1.25rem;    /* 20px */
	--sw-fs-xl:   1.5rem;     /* 24px 小見出し */
	--sw-fs-2xl:  1.875rem;   /* 30px 見出し */
	--sw-fs-3xl:  2.25rem;    /* 36px 大見出し */
	--sw-fs-4xl:  2.75rem;    /* 44px ファーストビュー */

	--sw-lh-tight: 1.35;
	--sw-lh-base:  1.85;      /* 日本語は行間を広めに取る */
	--sw-lh-loose: 2.0;
	--sw-ls:       0.04em;    /* 日本語の字間 */

	/* --- 余白（4px刻み） -------------------------------------------------- */
	--sw-sp-1:  4px;
	--sw-sp-2:  8px;
	--sw-sp-3:  12px;
	--sw-sp-4:  16px;
	--sw-sp-5:  24px;
	--sw-sp-6:  32px;
	--sw-sp-7:  48px;
	--sw-sp-8:  64px;
	--sw-sp-9:  96px;
	--sw-sp-10: 128px;

	/* --- 角丸・影・その他 ------------------------------------------------ */
	--sw-radius-sm: 4px;
	--sw-radius:    8px;
	--sw-radius-lg: 16px;
	--sw-radius-pill: 999px;

	--sw-shadow-sm: 0 1px 2px rgba(0, 31, 63, .06), 0 1px 3px rgba(0, 31, 63, .08);
	--sw-shadow:    0 2px 6px rgba(0, 31, 63, .07), 0 8px 20px rgba(0, 31, 63, .08);
	--sw-shadow-lg: 0 6px 16px rgba(0, 31, 63, .10), 0 20px 44px rgba(0, 31, 63, .12);

	--sw-container: 1120px;   /* 本文の最大幅 */
	--sw-container-narrow: 800px;
	--sw-gutter: var(--sw-sp-5);

	--sw-ease: cubic-bezier(.4, 0, .2, 1);
	--sw-transition: .2s var(--sw-ease);

	--sw-header-h: 64px;      /* 追従ヘッダーの高さ（スマホ） */
}

@media (min-width: 768px) {
	:root {
		--sw-gutter: var(--sw-sp-6);
		--sw-header-h: 80px;
	}
}

/* 動きを減らす設定にしている人にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
	:root { --sw-transition: 0s; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}