:root {
    --main-width: 1100px;

    /* +*********+*********
     * サイト別カラー 
     +*********+********* */
    /* メインカラー */
    --brand: #8fc31f;
    --brand-color1: #2b986c;
    --brand-color1-1: #5db391;
    --brand-color2: #2a986c;
    --brand-color3: #3bc6ae; /* ボーダーなど */
    --brand-color4: #2f6c54; /* タイトル文字 */
    --brand-color5: #43888b; /* プラン一覧・年数背景 */
    --brand-color6: #00bba5; /* 施工事例・背景 */
    --brand-color7: #14ae5c; /* 施工事例・ポイント説明・背景 */
    --brand-color8: #00bbbb; /* 前へ・次へボタン */
    --brand-color9: #b0e6d1; /* FAQ の Q */
    --brand-color10: #34a853;
    --brand-subcolor1: #ff0000;
    --brand-subcolor2: #ffdddd;
    --brand-subcolor3: #fe5900;
    --brand-subcolor4: #f57631;
    --brand-subcolor5: #74671b; /* ボタンの色 */

    --brand-bg-typo: #00bb0020; /* 背景文字（PLAN/VOICES） */

    --brand-bg-grad1: #b0e6d100; /* 背景グラデ */
    --brand-bg-grad2: #b0e6d1ff;
    --brand-bg-grad2-1: var(--brand-color1);
    --brand-bg-grad2-2: #5db391;
    --brand-bg-grad3: #80ebd9; /* 背景グラデ・FooterCTA */
    --brand-bg-grad3-1: #4fd5be;
    --brand-bg-grad3-2: var(--brand-color1);

    --brand-border: #b0e6d1;

    --brand-estimate: #6ebd0e;
    --brand-estimate2: #8bca3f;
    --brand-shindan: #20ba7d;
    --brand-shindan2: #4ec898;
    --brand-contact: #306ed5;
    --brand-contact2: #598bdd;

    /* お問い合わせ系のカラー */
    /* ヘッダー・TELのアイコンと番号のグラデーション */
    --color-tel: #2a986c; /* TELアイコン */
    --color-tel0: #ff3a3a; /* TEL全般 */
    --color-tel1: #00bb00; /* 0% */
    --color-tel2: #23d944; /* 〜47% */
    --color-tel3: #17a939; /* 〜56% */
    --color-tel4: #2b986c; /* 〜100% */

    /* ドロップシャドウ要素のホバー時のドロップシャドウ */
    --color-hover-drop-shadow: 0 0 10px var(--color-tel1);

    /* プランカテゴリの文字の背景色。プランカテゴリが増えたらここに追加 */
    --category-color-gaiheki: var(--brand-color1);
    --category-color-yane: #00bbbb;
    --category-color-yane-cover: #00bbbb;
    --category-color-other: #ea4335;

    /* お知らせカテゴリの背景色 */
    --brand-category-color0: var(--brand-color1);
    --brand-category-color1: #ea4335;
    --brand-category-color2: #1fbad8;

    /* サブページCTA・CTAカラー関係 */
    --brand-cta-color: #bbff00;
    --brand-cta-drop-shadow: 0 0 10px var(--brand-cta-color);

    /* 強みテーブル */
    --color-compare-1: #e95e5e;
    --color-compare-2: #da4e4e;
    --color-compare-icon: #f00;

    /* 施工事例ボタン */
    --color-case-part: #fe9c00;
    --color-case-all: #fe5900;

    /* +*********+*********
     * 共通カラー 
     +*********+********* */
    /* 文字色ベース */
    --font-main: #000000;
    /* LINEアイコン */
    --color-line: #00c300;
    /* Google口コミ */
    --color-googlereview-bg: #2b986c;
    --color-googlereview-star: #ffea00;
    /* メールアイコン */
    --color-mail: #fe5900;
    --color-mail-new: #bbff00;
    /* フッター固定メールアイコン */
    --color-bg-mail: #328dd7;
    /* フッター固定営業時間 */
    --color-bg-contact: #ffea00;
    /* ホバーカラー */
    --color-anchor-hover: #f0f0f0;
    /* ボタンカラー */
    --color-button: var(--color-mail);
    /* 黄色の下線 */
    --color-underline-yellow: #ffea00;
    /* テーブル見出しカラー */
    --color-table-th: #f0f0f0;

    /* 基本的なボックスシャドウ */
    --default-drop-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    --dark-drop-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    --gray-drop-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);

    /* グレー罫線 */
    --color-border: #c0c0c0;
    /* 薄いグレー罫線 */
    --color-border-gray: #e5e5e5;
    /* 黒っぽい罫線・CTAなど */
    --color-border-black: #2f7459;
    /* グレー背景・プランなど */
    --color-bg-gray: #dadada;
    /* グレー背景・フッターなど */
    --color-bg-footer: #2f2f2f;
    /* グレー背景・施工事例など */
    --color-bg-gray2: #f1f1ee;
    /* 明るいグレー背景・プロフィールパネルなど */
    --color-bg-gray3: #f2f2ee;
    /* さらに明るいグレー背景・絞り込みヘッダーなど */
    --color-bg-gray4: #fafafa;
    /* グレー背景・任意入力など */
    --color-bg-gray5: #898989;
    /* スマホメニューの背景 */
        --color-bg-gray6: #616161;

    /* 黒背景・CTAなど */
    --color-bg-cta-target: #191919;
    /* 薄黄色背景・CTAなど */
    --color-bg-cta2: #fbf7dc;
    --color-bg-area: #fffced;
    --color-bg-area2: #f7f2d8;
    --color-bg-area3: #1c4635;

    /* 黒文字 */
    --color-black: #303030;
    /* 赤文字 */
    --color-red: #f00;
    /* グレー文字・お知らせの日付など */
    --color-gray1: #535353;
    --color-gray2: #887878;

    /* 価格表示 */
    --color-price: #ff0000;
    /* 金文字グラデーション */
    --color-gold1: #ac982d; /* 0% */
    --color-gold2: #e6ce46; /* 〜34% */
    --color-gold3: #f6e9a0; /* 〜69% */
    --color-gold4: #c7b13e; /* 〜98% */

    /* Google文字色 */
    --color-google-14: #4285f4; /* G  g   */
    --color-google-26: #ea4335; /*  o   e */
    --color-google-3: #fbbc05; /**   o    */
    --color-google-5: #34a853; /**     l  */

    /* table罫線・背景 */
    --color-table-wrap-bg: #f5f5f5;
    --color-table-border: #bcbcbc;
    --color-table-th-bg: #f2f2ee;

    /* フッター・対応エリアの文字 */
    --color-area: #7cffcb;

    /* 比較 */
    --color-bg-compare-before: #303030;
    --color-bg-compare-after: var(--brand-color1);

    /* グラデーション */
    --color-bg-grad-1-1: #d847f5;
    --color-bg-grad-1-2: #fe1616;
    /* Impactフォント */
    --font-family-impact: "impact", sans-serif;
    --font-fanily-awesome: "Font Awesome 7 Free";
    --font-family-mochiy-pop: "Mochiy Pop P One", sans-serif;
    --font-family-kurenaido: "Zen Kurenaido", sans-serif;
}