@charset "UTF-8";

* {
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;;
    font-weight: 500;
}

:root {
    --background-color: #fff;
    --contrast-color: #ffe066;
    --footer-height: 3.75rem;
    --gray: #999;
    --header-height: 3.75rem;
    --lightgray: #EEE;
    --main-color: #18b7cd;
    --red: #ff6b6b;
    --shadow-color: #BCBCBC;
    --sub-color: #e6f7fa;
    --text-color: #1f4247;
}

.bgc-gray {
    background-color: var(--gray);
}

.bgc-lightgray {
    background-color: var(--lightgray);
}

.bgc-red {
    background-color: var(--red);
}

.border-gray {
    border-color: var(--gray);
}

.border-lightgray {
    border-color: var(--lightgray);
}

.border-red {
    border-color: var(--red);
}

.c-gray {
    color: var(--gray);
}

.c-lightgray {
    color: var(--lightgray);
}

.c-red {
    color: var(--red);
}

.circle {
    border-radius: 50%;
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 4px dotted #ccc;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

button {
    cursor: pointer;
}

footer {
    background-color: var(--text-color);
}

input:focus, select:focus {
    background-color: var(--background-color);
    outline: 1px solid var(--main-color);
}

input:focus + label, select:focus + label {
    color: var(--main-color);
}

.logo {
    width: auto;
    height: 1.25rem;
}

ol li::marker {
    color: var(--text-color);
    font-size: .875rem;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'>\<path d='M1 1l4 4 4-4' stroke='%231f4247' stroke-width='1.5' fill='none'/>\</svg>");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
}

select:focus {
    border: 0;
}