@charset "utf-8";

@layer reset, base, component, layout, project, utility, print, override;
@import url("reset.css") layer(reset);
@import url("base.css") layer(base);
@import url("component.css") layer(component);
@import url("layout.css") layer(layout);
@import url("project.css") layer(project);
@import url("utility.css") layer(utility);
@import url("print.css") layer(print);
@import url("override.css") layer(basoverride);

:root {
    --color-pone-card: #d60000;
    --color-collabo-card: #0076c9;
    --color-general-card: #1b9b24;
    --color-business-card: #d39037;
    --color-loan-card: #753b24;
    --color-corp-card: #fa6b1d;

    /* タブの色 */
    --color-tab-all: #d60000;
    --color-tab-pone-card: var(--color-pone-card);
    --color-tab-collabo-card: var(--color-collabo-card);
    --color-tab-general-card: var(--color-general-card);
    --color-tab-business-card: var(--color-business-card);
    --color-tab-loan-card: var(--color-loan-card);
    --color-tab-corp-card: var(--color-corp-card);
    --bg-tab-all: #f5f5f5;
    --bg-tab-pone-card: #f7cccc;
    --bg-tab-collabo-card: #bfddf1;
    --bg-tab-general-card: #c6e6c8;
    --bg-tab-business-card: #f4e3cd;
    --bg-tab-loan-card: #dccec8;
    --bg-tab-corp-card: #fedac7;

    /* 問題解決センターの色 */
    --color-resolution-center: #a7d47e;

    /*table headerの色*/
    --bg-th: #d5ecf4;

    /* listの丸背景色 */
    --bg-list-circle: #8377a0;

    /* indexのバー背景色 */
    --bg-index-bar: #171c60;
    /* indexのライン背景色 */
    --bg-index-line: #666666;

    /* warningの背景色 */
    --bg-warning: #fbe6e5;
    /* warningの文字色 */
    --color-warning: #de1a18;

    /* secondaryの背景色 */
    --bg-secondary: #f2f2f2;
    /* secondaryの文字色 */
    --color-secondary: #3d3d3d;

    --bg-btn: #f5f5f5;
    --bg-btn_hover: #fafafa;
    --color-btn: #0277bd;

    /* borderの色 */
    --border-color: #bcbcbc;

    /* テキストの色 */
    --base-color: #333;
    /* メインの色 */
    --color-main: #e60012;

    /* containerのサイズ */
    --container-size: 1024px;
    /* containerの下余白 */
    --container-bottom: 5rem;

    /*** fontサイズ ***/
    --font-size-base: 16px;
    --line-hight: 1.5;

    /* headerの高さ */
    --header-height: 79px;

    /*** spacing (margin/paddingで使用) ***/
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 2.5rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 3.5rem;
    --spacing-4xl: 4rem;
    --spacing-5xl: 4.5rem;

    --spacing-lg-section: 8rem;

    /* buttonの最低幅 */
    --w-btn: 300px;

    --w-hamburger: 50px;

    /*service-deskのtitle背景色*/
    --bg-service-title: #0c4da2;

    /* benefitのグラデーション 左から右へ*/
    --gradient-benefit: linear-gradient(to right, #d2790d, #ffc509);
}

/*PC用*/
@media screen and (min-width: 769px),
print {
    :root {
        --font-size-base: 16px;
        --header-height: 96px;
        --container-bottom: 6rem;
        --w-btn: 540px;
    }
}