@charset "utf-8";

/* 
variables.css - デザイン設計値の管理
プレフィックス：なし
編集者 人間：編集する
	   AI ：編集する
役割：:root の CSS カスタムプロパティのみ。色・余白・角丸・影・フォントサイズ・z-index 等。
禁止：クラス定義
	 セレクタ
	 メディアクエリ
	 通常のCSSプロパティ
*/

:root {
    /* ブランド色（Figmaのカラー変数と対応 fileKey=SSIhy4GaHaTyi5FzfJwLUO） */
    --color-navy: #16263F;/*紺 見出し・footer背景・ink*/
    --color-cream: #F3EEE3;/*生成り サイト全体の地色*/
    --color-red: #A8321F;/*朱 CTA・リンク*/
    --color-gold: #B8924A;/*金 罫線・装飾*/
    --color-ivory: #FAF6EC;/*生成りより明るい地色 白セクションの代わり*/
    --color-white: #FFFFFF;

    /* 色 */
    --color-main: var(--color-navy);
    --color-sub: var(--color-cream);
    --color-txt: var(--color-navy);
    --color-accent: var(--color-red);
    --color-strong: var(--color-navy);
    --color-txtlink: var(--color-navy);/*本文リンク。赤はコンバージョン専用色のため通常リンクには使わない（下線で本文と区別）*/
    --color-subtlebg: var(--color-ivory);
    --color-border: var(--color-gold);

    --color-table-border: #DCD5C4;
    --color-table-bg: var(--color-cream);
    --color-table-bg-2n: var(--color-white);
    --color-table-hover: var(--color-ivory);
    --color-table-th-bg: #EEE9D7;/*表の見出しセル。既定の#eeeは地色の生成りと同化するため、生成りより一段濃い色にする*/

    --color-conversionbg: var(--color-red);
    --color-conversiontxt: var(--color-white);
    --color-morebg: var(--color-cream);

    /* パーツ装飾色（regulationパーツ一覧をブランド色に合わせる。既定はv2の青系） */
    --color-deco-main: var(--color-navy);/*c-deputy3・c-catch1〜3の文字・罫線・帯*/
    --color-deco-dark: var(--color-navy);/*c-deputy2の理念見出しの文字・上罫線*/
    --color-deco-accent: var(--color-gold);/*c-deputy2 上罫線の左端アクセントバー*/
    --color-faq-q-bg: var(--color-navy);/*dl.c-faq のQアイコン背景*/
    --color-sidelink: var(--color-navy);/*c-sidelink のリンク文字・現在地ドット*/
    --color-st2-marker: #E6D3A3;/*c-st2 強調テキスト2のマーカー。金の淡色（生成り地で見えるように）*/
    --color-mark-marker: var(--color-gold);/*markタグのマーカー線*/

    /* パーツ装飾色の上書き（2026-07-31 追加分。component.cssの既定はv2の青・緑系のため紺・金・朱へ調整。
       CTAボタン系のみコンバージョンの朱を使い、それ以外の装飾は紺・金で統一する */
    --color-check-icon: var(--color-gold);/*チェックリスト・必要書類1のチェックアイコン*/
    --color-numlist1-border: var(--color-navy);/*番号リスト1の左罫線*/
    --color-numlist-txt: var(--color-navy);/*番号リスト1・2の本文*/
    --color-numlist2-border: var(--color-gold);/*番号リスト2の枠線*/
    --color-numlist2-num-bg: var(--color-navy);/*番号リスト2の5番目以降の丸数字*/
    --color-numlist2-step1: #C5C9CF;/*番号リスト2 丸数字の濃淡（紺の淡→濃）*/
    --color-numlist2-step2: #969DA9;
    --color-numlist2-step3: #687282;
    --color-numlist2-step4: #394760;
    --color-achievement-frame: var(--color-gold);/*実績表示の枠線・アイコン*/
    --color-achievement-num: var(--color-navy);/*実績表示の数字*/
    --color-greeting1-bg: var(--color-ivory);/*代表挨拶1の写真背面の色面*/
    --color-update-marker: #E6D3A3;/*ニュース更新日のNEWマーカー（st2マーカーと同じ金の淡色）*/
    --color-sidelink-dot: var(--color-gold);/*横スクロールナビの未選択ドット枠*/
    --color-breadcrumb-hover: var(--color-navy);/*パンくずリンクhover*/
    --color-cta2-grad1: #C86A50;/*CTA2 グラデーション始点（朱の明るめ）*/
    --color-cta2-main: var(--color-red);/*CTA2 グラデーション終点・ボタン文字*/
    --color-cta3-bg: var(--color-ivory);/*CTA3 ボックス背景*/
    --color-cta3-btn: var(--color-red);/*CTA3 ボタン*/
    --color-cta4-btn1: var(--color-red);/*CTA4 ボタン1（資料請求）*/
    --color-cta4-btn2: var(--color-navy);/*CTA4 ボタン2（電話）*/
    --color-cta5-btn: var(--color-red);/*CTA5 ボタン*/
    --color-cta6-bg: #E6D3A3;/*CTA6 背景（金の淡色）*/
    --color-cta6-btn: var(--color-red);/*CTA6 ボタン*/
    --color-flow2-border: var(--color-table-border);/*フロー2 カード枠線*/
    --color-flow2-num-bg: var(--color-navy);/*フロー2 5番目以降の丸数字*/
    --color-flow2-step1: #C5C9CF;/*フロー2 丸数字の濃淡（紺の淡→濃）*/
    --color-flow2-step2: #969DA9;
    --color-flow2-step3: #687282;
    --color-flow2-step4: #394760;
    --color-flow2-grad1: #C5C9CF;/*フロー2 下部矢印バーの始点*/
    --color-flow2-grad2: var(--color-navy);/*フロー2 下部矢印バーの終点*/
    --color-flow3: var(--color-navy);/*フロー3 丸枠・番号・連結線*/
    --color-flow4: var(--color-navy);/*フロー4 全体の文字色*/
    --color-flowsec-num-bg: var(--color-navy);/*フローセクション1 h3番号の背景*/
    --color-flowsec2-bg: #E6D3A3;/*フローセクション2 背景（金の淡色）*/
    --color-flowsec2-accent: var(--color-navy);/*フローセクション2 STEP表記・矢印*/
    --color-flowsec2-border: var(--color-gold);/*フローセクション2 見出し下罫線*/
    --color-price1-bar2: var(--color-gold);/*料金比較1 おすすめプランの上部バー*/
    --color-price-num: var(--color-navy);/*料金比較1・4の価格数字*/
    --color-price2-a: var(--color-navy);/*料金比較2 プランA*/
    --color-price2-b: var(--color-gold);/*料金比較2 プランB*/
    --color-price3-num1: var(--color-gold);/*料金比較3 1列目の数字*/
    --color-price3-num2: var(--color-red);/*料金比較3 2列目の数字*/
    --color-price3-num3: var(--color-navy);/*料金比較3 3列目の数字*/
    --color-price3-bg1: #45526B;/*料金比較3 下段の帯（紺の淡→濃）*/
    --color-price3-bg2: #2C3A54;
    --color-price3-bg3: var(--color-navy);
    --color-price4-th: var(--color-navy);/*料金比較4 見出し行*/
    --color-price4-td-bg: #EEE9D7;/*料金比較4 データセル背景（表見出しセルと同色）*/
    --color-price5-th: var(--color-navy);/*料金比較5 タイトルバー*/
    --color-price6-th1: #45526B;/*料金比較6 プランA見出し*/
    --color-price6-th2: var(--color-navy);/*料金比較6 プランB見出し*/

    --color-aside-titbg: var(--color-navy);/*サイドメニュー タイトルBG*/
    --color-aside-tittxt: var(--color-cream);/*サイドメニュー タイトルテキスト*/
    --color-aside-tree: var(--color-gold);/*サイドメニュー ツリーマップの棒*/
    --color-aside-here: var(--color-red);/*サイドメニュー 現在地の文字・矢印。既定はv2の青#009bde*/
    --color-aside-hoverbg: var(--color-ivory);/*サイドメニュー hover背景。既定はv2の#f0f2f4*/

    --color-header-searchbg: #eee;
    --color-header-searchhover: #dcdcdc;
    --color-header-searchplaceholder: #aaa;
    
    --color-mega-hover: var(--color-red);
    --color-mega-here: var(--color-red);
    --color-mega-bg: var(--color-cream);
    --color-mega-bg2nd: var(--color-ivory);
    --color-mega-border: var(--color-gold);
    --color-mega-txt2nd: var(--color-navy);
    --color-mega-txt3rd: var(--color-navy);
    --color-mega-txt4th: #6B7787;
    --color-mega-underline: var(--color-navy);/*グロナビの現在地・hoverの下線。金の帯に載るのでロゴと同じ紺*/

    /* form */
    --color-form-will-bg: var(--color-gold);/*フォームの任意アイコンBG*/
    --color-form-will-txt: var(--color-white);/*フォームの任意アイコン テキスト*/
    --color-form-required-bg: var(--color-red);/*フォームの必須アイコンBG*/
    --color-form-required-txt: var(--color-white);/*フォームの必須アイコン テキスト*/

    --color-form-error-bg: #c80000;/*フォームのエラーメッセージBG バリデーション*/
    --color-form-error-txt: #fff;/*フォームのエラーメッセージ テキスト バリデーション*/

    /* area */
    --color-area-kanto-bg: #eee;
    --color-area-prefecture-hover-bg: #f29600;
    --color-area-prefecture-hover-txt: #fff;
    --color-area-prefecture-border: #eee;
    --color-area-jpmap-bg: #eee;
    --color-area-jpmap-border: #fff;

    /* 書体（Figma：見出しは明朝、本文はゴシック） */
    --font-mincho: 'Shippori Mincho B1', "游明朝", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", serif;
    --font-gothic: 'Noto Sans JP', sans-serif;

    /* 余白・角丸・影（拡張用） */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow:0 1rem 2rem rgba(50, 50, 100, 0.2);

    /* 見出しの既定装飾
       Figmaでデザインが決まっているサイトのため、foundation.css がタグに付けている
       装飾（h2の下線、h3〜h6の左の縦棒、h1 spanの行間3倍）はすべて外す。
       リンクの下線は記事本文で必要なため残す。 */
    --h1-span-font-size: 100%;
    --h1-span-line-height: 1.5;
    --h2-border-bottom: none;
    --h2-padding-bottom: 0;
    --h3-border-left: none;
    --h3-padding-left: 0;
    --h4-border-left: none;
    --h4-padding-left: 0;
    --h5-border-left: none;
    --h5-padding-left: 0;
    --h6-border-left: none;
    --h6-padding-left: 0;
    --a-text-decoration: underline;

    /* フォントサイズ */
    --font-size-h1: 4.0rem;
    --font-size-h2: 3.2rem;
    --font-size-h3: 2.6rem;
    --font-size-h4: 2.4rem;
    --font-size-h5: 2.2rem;
    --font-size-h6: 2.0rem;
    --font-size-p:  1.8rem;
}