@charset "utf-8";

:root {
    /* green */
    --color-main: #66CDAA;
    --color-main-accent: #71C7CA; /* logo */
    --color-main-light: #A9DDDF;
    /* yellow */
    --color-sub: #A3A44E;
    --color-sub-accent: #B0B15A; /* logo */
    --color-sub-light: #DEDFBB;
    /* red */
    --color-error: #AE4541;
    /* beige */
    --color-back: #BDB09A;
    --color-back-accent: #E5E0D7; /* logo */
    --color-back-light: #F9F8F6;
    /* grey */
    --color-border: #E0DFDD;
}

::-ms-reveal {
    display: none;
}

* {
    font-family: Hiragino Kaku Gothic ProN, Hiragino Mincho ProN, Arial, sans-serif;
}

html {
    position: relative;
    width: 100%;
    height: 100%;
}

body,
input,
select,
textarea,
button {
    font-size: 16px;
}

input[type="text"],
input[type="select"] {
    border: 1px solid var(--color-border);
}


/*********************************************/
/* button */
.btn-main {
    width: 200px;
    height: 2.5em;
    text-align: center;
    /*    font-weight: bold;*/
    color: #FFFFFF;
    background: var(--color-main);
    padding: 3px;
    margin-bottom: 0;
    border-style: solid;
    border-color: var(--color-main);
    border-radius: 3px;
}

    .btn-main:hover {
        color: var(--color-main);
        background: #FFFFFF;
        border-color: var(--color-main);
    }

.btn-sub {
    width: 200px;
    height: 2.5em;
    text-align: center;
    /*    font-weight: bold;*/
    color: #FFFFFF;
    background: var(--color-sub);
    padding: 3px;
    margin-bottom: 0;
    border-style: solid;
    border-color: var(--color-sub);
    border-radius: 3px;
}

    .btn-sub:hover {
        color: var(--color-sub);
        background: #FFFFFF;
        border-color: var(--color-sub);
    }

.btn-back {
    width: 200px;
    height: 2.5em;
    text-align: center;
    /*    font-weight: bold;*/
    color: #FFFFFF;
    background: var(--color-back);
    padding: 3px;
    margin-bottom: 0;
    border-style: solid;
    border-color: var(--color-back);
    border-radius: 3px;
}

    .btn-back:hover {
        color: var(--color-back);
        background: #FFFFFF;
        border-color: var(--color-back);
    }

