.prepare {
    display: none;
}

:root {
    --hdrHight: max(60px, calc(200vw / 45));
    --hdrMargin: calc(var(--hdrHight) / 6);
}

@media (max-width: 365px) {
    :root {
        --hdrHight: calc(calc(100vw - 5px) / 6);
    }
}

body {
    --border: 1px solid #bbb;
    --bgColor: #222;
    --bgGrey: #000;
    --txtBg: #444;
    --txtColor: white;
    --btnColor: gray;
    --hoverTxt: #aaa;
    --aDefault: #77f;
    color-scheme: dark;
}

body.light {
    --border: 1px solid #999;
    --bgColor: whitesmoke;
    --bgGrey: #e6e6e6;
    --txtBg: white;
    --txtColor: black;
    --btnColor: #eaea90;
    --hoverTxt: #666;
    --aDefault: #00e;
    color-scheme: light;
}

* {
    box-sizing: border-box;
    margin: 0px;
    overflow-wrap: break-word;
    scrollbar-width: none;
    color: var(--txtColor);
    text-align: center;
    font-family: "UD デジタル 教科書体 NP-R", "Helvetica", "Hiragino Sans", Arial, 'Meiryo', sans-serif;
    border-radius: 5px;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    background-color: var(--bgColor);
    transition: background 0.5s;
}

svg * {
    stroke: var(--txtColor);
    fill: none;
    transform-origin: center;
    stroke-linecap: round;
    stroke-linejoin: round;
}

img,
label,
textarea,
small {
    display: block;
}

small {
    line-height: 18px;
}

a,
button,
select,
label,
summary,
input[type="button"],
input[type="submit"],
input[type="date"] {
    cursor: pointer;
}

.popWin,
.butBox,
dialog,
label:has(input[type="file"]),
input,
select,
button,
textarea {
    border: var(--border);
    font-size: 14px;
    background-color: var(--txtBg);
}

label:has(input[type="file"]),
input,
select,
button {
    overflow: hidden;
    white-space: nowrap;
    height: 30px;
}

textarea {
    overflow: auto;
    resize: vertical;
}

label:has(input[type="file"]),
input[type="button"],
input[type="submit"] {
    width: fit-content;
    padding: 5px 10px;
}

input[type="checkbox"],
input[type="radio"] {
    height: 100%;
}

label > input[type="file"] {
    display: none;
}

.vr {
    width: 0;
    height: 100%;
    border-width: 0 1px 0 0;
}

.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.defa {
    color: var(--aDefault);
    text-decoration: underline;
}

:required {
    border-color: red;
}

.red {
    color: red;
}

.fullfill,
svg {
    width: 100%;
    height: 100%;
}

hr.changeable {
    margin: 25px auto;
    color: #cccc;
    width: clamp(270px, 45%, 500px);
}

@media (max-width: 270px) {
    hr.changeable {
        width: calc(100% - 2px);
    }
}

hr.nochange {
    border-top: 1px;
}

table {
    border-collapse: collapse;
}

td {
    text-align: center;
}

td.right {
    text-align: right;
}

td.left {
    text-align: left;
    width: fit-content;
}

img.sqrimg {
    aspect-ratio: 1;
    border: 1px solid skyblue;
    background-color: black;
    object-fit: contain;
}