/*
 *Last modified: 2024-07-05 11:25:57
 */
@charset "utf-8";
@import (optional, reference) "var.less";
html {
    font-size: var(--_fs-base);
    width: 100%;
    padding: 0;
    margin: 0;
}
body {
    font-family: var(--_ff);
    font-size: var(--_fs);
    line-height: var(--_lh);
    color: var(--_c-text);
    text-align: left;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}
/*reset*/
* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
*:focus {
    outline-color: transparent;
}
h1,h2,h3,h4,h5,h6{
    margin:0.5em 0;
}
h1 {
    font-size: var(--_sz-body);
    line-height: 1.214em;
}
h2 {
    font-size: var(--_sz-list);
    line-height: 1.27em;
}
h3 {
    font-size: var(--_sz-brief);
    line-height: 1.56em;
}
h4 {
    font-size: var(--_sz-title);
    line-height: 1.375em;
}
h5 {
    font-size: var(--_sz-font);
    line-height: 1.29em;
}
h6 {
    font-size: var(--_sz-ignore);
    line-height: 1.33em;
}
img {
    border: 0;
    vertical-align: middle;
}
svg {
    vertical-align: middle;
}
img,
video,
audio {
    max-width: 100%;
}
iframe {
    display: block;
    width: 100%;
    border-width: 0;
}
span,
a,
input,
textarea,
select,
progress,
meter,
label,
i,
s,
u {
    display: inline-block;
}
form,
div,
pre,
p {
    display: block;
}
p {
    padding: 0.6em 0 0.6em 0;
}
hr {
    border-width: 0;
    height: 1px;
    overflow: hidden;
    background-color: var(--_c-text-bd);
}
sup a {
    color: var(--_c-prim);
}
code {
    font-family: var(--_ff);
    color: var(--_c-prim);
    background-color: var(--_c-text-bg);
    padding: 0 var(--_g);
    border-radius: var(--_r);
}
pre {
    font-family: var(--_ff);
    font-size: var(--_sz-ignore);
    background-color: var(--_c-text-bd);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: var(--_p);
    &>code {
        color: var(--_c-text);
        background: transparent;
        padding: 0;
        border-radius: 0;
        display: block;
    }
}
*:where(ul),
*:where(ol) {
    --_dot-size: .4rem;
    margin-block-start: 0;
    margin-block-end: 0;
    box-sizing: border-box;
    padding-inline-start: 2em;
}
*:where(ul) {
    list-style: none;
}
*:where(ul._reset) {
    padding-inline-start: 0;
    ul {
        padding-inline-start: 0;
    }
}
*:where(ol._reset) {
    list-style: none;
    padding-inline-start: 0;
    ol {
        list-style: none;
        padding-inline-start: 0;
    }
}
*:where(li) {
    position: relative;
}
*:where(ul)>li:before {
    content: '';
    width: var(--_dot-size);
    height: var(--_dot-size);
    border-radius: var(--_dot-size);
    background-color: var(--_c-text-sd);
    position: absolute;
    left: -1em;
    top: calc((var(--_lh) - var(--_dot-size))/2);
}
*:where(ul._reset) li:before {
    display: none;
}
*:where(dl) {
    --_dot-size: .4rem;
    margin-block-start: var(--_m);
    margin-block-end: var(--_m);
    &:where(:not(._reset)) {
        border-top: 1px solid var(--_c-text-bd);
        border-bottom: 1px solid var(--_c-text-bd);
        padding: var(--_p) 0 var(--_p) 1em;
        box-sizing: border-box;
        dt {
            font-weight: bold;
            position: relative;
        }
        dt:before {
            content: '';
            width: var(--_dot-size);
            height: var(--_dot-size);
            border-radius: var(--_dot-size);
            background-color: var(--_c-text-sd);
            position: absolute;
            left: -1em;
            top: calc((var(--_sz-body) - var(--_dot-size))/2);
        }
        dd {
            margin-inline-start: 0;
        }
        dd+dt {
            margin-top: var(--_g-sm);
        }
    }
}
blockquote {
    background-color: var(--_c-prim-bg);
    border-left: var(--_g) solid var(--_c-prim-fc);
    padding: var(--_g) var(--_p);
    margin: var(--_m) 0;
}
cite {
    font-style: normal;
    text-decoration: 1px underline wavy;
    text-underline-offset: .4em;
}
em {
    font-style: normal;
    text-emphasis: circle var(--_c-prim);
    text-emphasis-position: over right;
}
ruby>rt {
    padding: 0 var(--_g);
    font-size: clamp(var(--_sz-root),var(--_sz-em-ignore),var(--_sz-brief));
}
address {
    font-style: normal;
    line-height: 1.29em;
    display: flex;
}
time {
    font-size: var(--_sz-ignore);
    color: var(--_c-ignore);
    line-height: 1.5em;
    display: inline-block;
}
mark {
    background-color: var(--_c-warn-aj);
}
i {
    font-style: normal;
}
s,
u {
    text-decoration: none;
}
article {
    i,
    u,
    s,
    a,
    span {
        display: inline;
    }
    img {
        height: auto !important;
        width: auto !important;
    }
}
form {
    position: relative;
}
fieldset {
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_r-sm);
    padding: var(--_p);
}
:where(fieldset) legend {
    padding: 0 var(--_g-sm);
}
:where(fieldset) td {
    padding: var(--_g);
}
label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    input {
        margin-right: var(--_g);
    }
}
label:where(:has(input[disabled])) {
    cursor: text;
}
input,
select {
    vertical-align: middle;
}
input:where([type="submit"], [type="reset"]) {
    vertical-align: top;
}
input,
textarea,
select {
    --_input-sz:var(--_sz-em-input);
    --_input-p:var(--_sz-em-space);
    --_input-fs:var(--_sz-font);
    --_input-r: var(--_r);
    --_input-w: var(--_w-input);
    font-family: var(--_ff);
    font-size:var(--_input-fs);
    color: var(--_c-text);
}
input:where(:not([type="radio"], [type="checkbox"], [type="submit"], [type="reset"], [type="range"])),
textarea,
select {
    background-color: var(--_c-stage);
    min-width: var(--_input-w);
    box-sizing: border-box;
    border-radius: var(--_input-r);
    border: 1px solid var(--_c-text-bd);
    resize: none;
    position: relative;
    .v3-trans-all(var(--_dur-1), linear);
}
input::-ms-clear,
input::-ms-reveal {
    opacity: .5;
    .v3-trans-all(var(--_dur-1), linear);
    &:hover {
        opacity: 1;
    }
}
input::-webkit-calendar-picker-indicator {
    width: 1em;
    height: 1em;
    padding: 0;
    line-height: 1em;
}
input:where([type="search"])::-webkit-search-cancel-button {
    filter: grayscale(100%);
    opacity: .5;
    .v3-trans-all(var(--_dur-1), linear);
    &:hover {
        opacity: 1;
        cursor: pointer;
    }
}
input:where([type="color"]) {
    min-width: auto;
    height: var(--_input-sz);
    aspect-ratio: 1 / 1;
    padding: 0 2px !important;
}
input:where([type="color"]) ::-webkit-color-swatch {
    border: 0;
}
@-moz-document url-prefix() {
    input:where([type="color"]) {
        padding: 2px !important;
    }
}
input:where(:not([type="radio"], [type="checkbox"], [type="submit"], [type="reset"], [type="range"])),
select {
    height: var(--_input-sz);
    line-height: var(--_input-sz);
    padding: 0 var(--_input-p);
}
textarea {
    --_input-os: var(--_sz-em-space);
    height: calc(7.857em + var(--_input-os)*2 + 2px);
    line-height: var(--_sz-em-list);
    box-sizing: border-box;
    padding: var(--_input-os) var(--_input-p);
    overflow: auto;
    vertical-align: top;
}
input:where([type="checkbox"], [type="radio"]) {
    accent-color: var(--_c-prim);
    height: 1.4rem;
    appearance: checkbox;
    -webkit-appearance: checkbox;
}
select:where([multiple]) {
    padding: 0;
    min-height: calc((var(--_sz-input) + 1px)*5 - 1px);
}
select option {
    padding: 0 var(--_g-sm);
    height: var(--_sz-input);
    border-bottom: 1px solid var(--_c-text-bd);
    display: flex;
    align-items: center;
    .v3-trans-all();
}
select option:last-child {
    border-width: 0;
}
select:where([disabled]) option {
    color: var(--_c-disable);
    pointer-events: none;
}
select:where(:not([disabled])) option:hover {
    background-color: var(--_c-text-bd);
}
select option:checked {
    color: var(--_c-prim);
    background-color: var(--_c-prim-bg);
}
select option:selected {
    background-color: var(--_c-prim);
}
input:where([type="file"]) {
    line-height: 2.429em;
    width: var(--_w-input);
}
input:where([type="file"])::file-selector-button,
input:where([type="file"])::-webkit-file-upload-button {
    color: var(--_c-text);
    background: transparent;
    line-height: 2.571em;
    border: none;
    border-right: 1px solid var(--_c-text-bd);
    padding-right: 0.571em;
    padding-left: 0;
    margin-right: 0.571em;
    .v3-disabled;
    float: left;
}
@-moz-document url-prefix() {
    input:where([type="file"])::file-selector-button,
    input:where([type="file"])::-webkit-file-upload-button {
        color: var(--_c-text);
        float: none;
    }
}
input:where([type="datetime-local"], [type="date"], [type="month"], [type="week"]) {
    &::-webkit-datetime-edit-text {
        margin-right: calc(var(--_g)*2);
        color: var(--_c-text-bd);
    }
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-year-field,
    &::-webkit-datetime-edit-week-field,
    &::-webkit-datetime-edit-hour-field,
    &::-webkit-datetime-edit-minute-field {
        margin-right: calc(var(--_g)*2);
        border-radius: var(--_r);
        padding: 0 var(--_g);
        &:focus {
            background-color: var(--_c-prim);
        }
    }
    &::-webkit-calendar-picker-indicator {
        opacity: .5;
        padding: 0;
        .v3-trans-all(var(--_dur-1), linear);
        &:hover {
            opacity: 1;
        }
    }
}
input:where([type="range"]) {
    --_h-range: 0.3rem;
    height: var(--_h-range);
    width:  var(--_input-w);
    background-color: var(--_c-text-bd);
    border-radius: @radius;
    appearance: none;
    .v3-trans-all(var(--_dur-1), linear);
}
input:where([type="range"])::-webkit-slider-thumb {
    width: 1.6rem;
    height: 1.6rem;
    border: .2rem solid var(--_c-prim);
    border-radius: 50%;
    background-color: var(--_c-stage);
    cursor: pointer;
    appearance: none;
    .v3-trans-all(var(--_dur-1), linear);
}
input:where([type="range"])::-moz-range-thumb {
    width: 1.2rem;
    height: 1.2rem;
    border: .2rem solid var(--_c-prim);
    border-radius: 50%;
    background-color: var(--_c-stage);
    cursor: pointer;
    .v3-trans-all(var(--_dur-1), linear);
}
input:where([type="range"])::-moz-range-progress {
    background-color: var(--_c-prim);
    border-radius: @radius;
    .v3-trans-all(var(--_dur-1), linear);
}
input:where([type="range"]:not([disabled])):hover {
    background-color: var(--_c-prim-bd);
}
input:where([type="range"]:not([disabled]))::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
}
input:where([type="range"]:not([disabled]))::-moz-range-thumb:hover {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
}
input:where([type="range"][disabled])::-webkit-slider-thumb {
    border-color: var(--_c-ignore);
    cursor: text;
}
input:where([type="range"][disabled])::-moz-range-thumb {
    border-color: var(--_c-ignore);
    cursor: text;
}
input:where([type="range"][disabled])::-moz-range-progress {
    background-color: var(--_c-ignore);
}
meter {
    --_h-meter: var(--_sz-min);
    block-size: var(--_sz-min);
    vertical-align: middle;
    &::-webkit-meter-bar {
        height: var(--_h-meter);
        min-width: calc(var(--_sz-input)*3);
        background-color: var(--_c-text-bd);
        border: none;
    }
    &::-webkit-meter-optimum-value,
    &::-webkit-meter-suboptimum-value,
    &::-webkit-meter-even-less-good-value {
        border-radius: var(--_h-meter);
        .v3-trans-all();
    }
    &::-webkit-meter-optimum-value {
        background: var(--_c-succ);
    }
    &::-webkit-meter-suboptimum-value {
        background: var(--_c-warn);
    }
    &::-webkit-meter-even-less-good-value {
        background: var(--_c-error);
    }
}
progress,
progress::-webkit-progress-bar,
progress::-webkit-progress-value {
    border-radius: var(--_h-progress);
}
progress {
    --_h-progress: var(--_sz-min);
    width:  var(--_input-w);
    height: var(--_h-progress);
    border: none;
    vertical-align: middle;
}
progress::-webkit-progress-bar {
    background-color: var(--_c-text-bd);
}
progress::-webkit-progress-value {
    background-color: var(--_c-prim);
    .v3-trans-all();
}
progress::-moz-progress-bar {
    background: var(--_c-prim);
    border-radius: var(--_h-progress);
}
input:where([type="submit"]),
input:where([type="reset"]),
button {
    .v3-btn-native;
    vertical-align: middle;
}
input:where([type="submit"]) {
    color: #fff;
    background-color: var(--_c-prim);
    border: none;
}
input:where([type="reset"]),
button {
    color: var(--_c-text);
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
}
input:where([type="submit"][disabled]) {
    opacity: var(--_o-active);
}
input:where([type="reset"][disabled]),
button:where([disabled]) {
    color: var(--_c-ignore);
}
input:where([type="submit"][disabled]),
input:where([type="reset"][disabled]),
button:where([disabled]) {
    cursor: not-allowed;
    .v3-disabled;
}
input::placeholder,
textarea::placeholder {
    font-size:0.857em;
    color: var(--_c-ignore);
}
input::placeholder{
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%);
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"]):not([disabled])):hover,
textarea:where(:not([disabled])):hover,
button:where(:not([disabled])):hover,
select:where(:not([disabled])):hover {
    border-color: var(--_c-prim);
}
input:where([type="submit"]:not([disabled], ._b, [class*="_b-"])):hover {
    background-color: var(--_c-prim-lt);
    .vague(var(--_c-prim-sd));
}
input:where([type="reset"]:not([disabled], ._b, [class*="_b-"])):hover,
button:where(:not([disabled], ._b, [class*="_b-"])):hover {
    color: var(--_c-prim);
    .vague(var(--_c-prim-sd));
}
input:where(:not([type="range"], [type="checkbox"], [type="radio"])),
input:where([type="reset"]),
button,
select,
textarea,
a {
    .v3-outline;
}
input:where(:not([type="range"], [type="checkbox"], [type="radio"])):focus,
input:where([type="reset"]:not(._b, [class*="_b-"])):focus,
button:where(:not(._b, [class*="_b-"])):focus,
select:focus,
textarea:focus {
    color: var(--_c-prim);
    border-color: var(--_c-prim);
    outline-color: var(--_c-prim-sd);
}
input:where([type="submit"]:not(._b, [class*="_b-"])):focus {
    color: #fff;
}
select:focus option:where(:not([disabled])) {
    color: var(--_c-text);
}
input:where([type="checkbox"], [type="radio"]):focus {
    outline-color: var(--_c-prim-sd);
}
input:where([type="range"]):focus {
    outline: 0;
    background-color: var(--_c-prim-bd);
}
input:where([type="submit"]:not([disabled], ._b, [class*="_b-"])):active {
    color: rgba(255, 255, 255, var(--_o-active));
    background-color: var(--_c-prim-dp);
}
input:where([type="reset"]:not([disabled], ._b, [class*="_b-"])):active,
button:where(:not([disabled], ._b, [class*="_b-"])):active {
    color: var(--_c-prim-tl);
}
/*Hyperlink*/
a {
    --_c-link: var(--_c-prim);
    color: var(--_c-link);
    text-underline-offset: 2px;
    transition: color var(--_dur-1) linear, background-color var(--_dur-1) linear, box-shadow var(--_dur-1) linear, opacity var(--_dur-1) linear, outline-color var(--_dur-1) linear;
    text-decoration: none;
}
/* a:where(:not([disabled])):visited {
    color: var(--_c-text-ht);
}
 */
a:where(:not([disabled])):hover {
    color: var(--_c-link);
}
a:where(:not([disabled])):active {
    color: var(--_c-link);
    opacity: var(--_o-active);
}
a:where(:not([disabled])):focus {
    color: var(--_c-link);
}
a:where([disabled]) {
    --_c-link: var(--_c-ignore);
    .v3-disabled;
}
:where([tabindex]) {
    .v3-outline;
}
:where([tabindex]):focus {
    outline-color: var(--_c-prim-sd);
}
/*Table*/
table {
    --_table-fs:var(--_sz-font);
    font-size: var(--_table-fs);
    min-width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--_c-text-bd);
    border-bottom: 1px solid var(--_c-text-bd);
    background-color: var(--_c-stage);
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;
    tr {
        border-bottom: 1px solid var(--_c-text-bd);
        padding: 0.5rem;
        transition: background-color var(--_dur-1) linear;
    }
    tfoot tr {
        border-top: 1px solid var(--_c-text-bd);
    }
    tbody tr:last-child {
        border: none;
    }
    th,
    td {
        font-size: var(--_table-fs);
        font-weight: normal;
        line-height: var(--_sz-brief);
        padding: 1rem;
        box-sizing: border-box;
        position: relative;
    }
    th label {
        font-weight: bold;
        white-space: nowrap;
        flex: auto;
        width: 0;
    }
    td {
        transition: background-color var(--_dur-1) linear, box-shadow var(--_dur-1) linear;
    }
}
