@import "https://trisite.net/services/css/v4.2/basic.css";
@import "https://trisite.net/services/css/v4.2/header.css";
@import "grid.css"; /* TBサイズが異なるためローカル */
@import "https://trisite.net/services/css/v4.2/nav.css";
@import "https://trisite.net/services/css/v4.2/button.css";
@import "https://trisite.net/services/css/v4.2/table.css";
@import "https://trisite.net/services/css/v4.2/form.css";
@import "https://trisite.net/services/css/v4.2/form_file.css";
@import "https://trisite.net/services/css/v4.2/paging.css";


/**************************************************
TRISITE_CSS
**************************************************/
:root {
	--step: 1.25;
	--font-size: 11.5px;
	--line-height: 1.8;
	--small: 0.6em;
	--large: 1.4em;
	--transition: 0.4s;
	--header-offset: 100px;
	--gap: 20px;
	--radius: 0;
	--radius-inner: 0;
	--width-limit: 1280px;
	--section-space: 10vw;
	--margin: 3.5em;
	--padding: 20px;
	--input-width: 260px;
	--brightness: 1.05;
	--outline: 1px;
	--trigger-size: 48px;
	--trigger-bar: 8px;


	--color-light-glass: rgba(255, 254, 254, 0.6);
	--color-dark-glass: rgba(38, 32, 32, 0.3);
	--shadow: 2px 2px 0 #B0B0B0;
	--shadow-2: 2px 2px 4px 2px rgb(10 10 10 / 0.1);

	--color-white: #fff;
	--color-red: #e60012;
	--color-orange: #ED7565;
	--color-green: #079201;
	--color-lightgreen: #ECF8E4;
	--color-yellow: #F8BB00;
    --color-orange: #f6ab00;
	--color-blue: #004ea2;
	--color-lightblue: #5185C5;
	--color-black: #1E1E1E;
    --color-darkgray: #7D7D7D;
	--color-gray: #dbdbdb;
	--color-lightgray: #f7f7f7;
	--color-error: #FE0000;

    --color-blue-clear:rgb(0 78 162 / 0.1);
    --color-orange-clear:rgb(246 171 0 / 0.4);
    --color-white-clear:rgb(255 2555 255 / 0.1);

    --color-text-gray: #595757;

    --super-wide-gap: calc(var(--gap) * 6);
    --wide-padding:calc(var(--padding) * 3);
    --wide-padding-2:calc(var(--padding) * 4);
    --wide-padding-3:calc(var(--padding) * 5);
}

:root {
    --color-body: var(--color-white);
    --color-text: var(--color-black);
    --color-border: var(--color-black);
    --color-table: var(--color-white);
    --color-table-odd: var(--color-lightgray);

    --color-agree-bg: var(--color-blue);
    --color-agree-fr: var(--color-white);

    --color-disagree-bg: var(--color-red);
    --color-disagree-fr: var(--color-white);

    --color-cancel-bg: var(--color-red);
    --color-cancel-fr: var(--color-white);

    --color-trigger-bg: transparent;
    --color-trigger-fr: var(--color-blue);

    --color-outline: var(--color-gray);
    --color-outline-focus: var(--color-orange);
    --color-outline-text: var(--color-black);
    --color-outline-focus-text: var(--color-black);
    --color-link: var(--color-text);
    --color-hover: var(--color-blue);
    --color-form: var(--color-white);

	--input-object-fit: contain;
}

@media (max-width : 720px) {
    :root {
        --step: 1.2;
        --font-size: 12px;
    }
}
@media (max-width : 520px) {
	:root {
        --super-wide-gap: calc(var(--gap) * 4);
        --wide-padding:calc(var(--padding) * 1.4);
        --wide-padding-2:calc(var(--padding) * 2);
        --wide-padding-3:calc(var(--padding) * 2.5);
	}
}