@charset "UTF-8";

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

:root {
    --contrast-color: #ffe066;
    --footer-height: 3.75rem;
    --gray: #595959;
    --header-height: 3.75rem;
    --lightgray: #EEE;
    --main-color: #16aabe;
    --red: #ff6b6b;
    --sub-color: #e6f7fa;
    --text-color: #1f4247;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.app-name {
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}

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

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

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

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

.breadcrumb .chevron-right::before {
    color: var(--text-color);
    content: ">";
    padding: 0 .5rem;
}

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

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

.circle {
    border-radius: 50%;
}

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

.info:has(input[type="checkbox"]:checked) + p {
    display: block;
}

.read-more {
    left: 50%;
    transform: translateX(-50%);
}

.read-more:has(input[type="checkbox"]:checked) {
    display: none;
}

.read-more:has(input[type="checkbox"]:not(:checked)) + p {
    height: 8lh;
    overflow: hidden;
    mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0) 100%
    );
    -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0) 100%
    );
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: .25rem dotted var(--gray);
    border-top-color: var(--main-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


.spinner--button {
    width: .75rem;
    height: .75rem;
    border: .15rem dotted var(--gray);
    border-top-color: var(--main-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


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

button {
    cursor: pointer;
}

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

input[type="text"]:focus, select:focus, textarea:focus {
    outline: 1px solid var(--main-color);
}

input[type="text"]:focus + label, select:focus + label {
    color: var(--main-color);
}

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

p {
    line-height: 1.5;
}

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;
}