/** W3C **/
html {
    font-size: 24px;
    background-color: #FFF;
    min-height: 100%;
    -ms-overflow-style: scrollbar;
}
body {
    font-family: Univers, Arial, sans-serif, "ヒラギノ角ゴ Std W3", "HiraKakuStd-W3", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic";
    background-color: #FFF;
    padding: 0;
    color: #000;
}
h1 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
h2 {
    font-size: 1.25rem;
    text-align: center;
}
h3 {
    font-size: 1.25rem;
    text-align: center;
    border: 1px solid #000;
    padding: 0.5rem 0;
}
img {
    border: 1px solid #999;
    background-color: #999;
}


/** Bootstrap **/
.btn-outline-dark:hover {
    color: #fff;
    background-color: #168f00;
    border-color: #212529;
}


/** Custom **/
.width_auto {
    width: auto !important;
}
.width_xxxs {
    width: 2rem !important;
}
.width_xxs {
    width: 4rem !important;
}
.width_xs {
    width: 6rem !important;
}
.width_sm {
    width: 8rem !important;
}
.width_md {
    width: 10rem !important;
}
.width_lg {
    width: 12rem !important;
}
.width_xl {
    width: 14rem !important;
}
.width_xxl {
    width: 20rem !important;
}
.width_xxxl {
    width: 28rem !important;
}

.back {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.noframe {
    background-color: transparent;
    border: none;
}
img.viewer {
    cursor: pointer;
}

/** xs **/
@media (max-width: 767px) {
.width_auto,
.width_xs,
.width_sm,
.width_md,
.width_lg,
.width_xl,
.width_xxl,
.width_xxxl {
    width: 100% !important;
}

.back {
    position: initial;
    margin-bottom: 1rem;
    display: block;
}
}