@charset "UTF-8";

/**************************************************/
/* base */
/**************************************************/
@media (max-aspect-ratio: 12/7) {
    :root {
        font-size: 1.3333333333vw;
    }
}

@media (min-aspect-ratio: 12/7) {
    :root {
        font-size: 2.2857142857vh;
    }
}

@media (max-width: 767px) {
    :root {
        font-size: 4.4444444444vw;
    }
}

html {
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Sans", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
    font-size  : 1rem;
    color      : #000;
    margin     : 0;
}

img {
    width: 100%;
    /* max-width: 100%; */
}

ul,
ol {
    list-style: none;
    margin    : 0;
    padding   : 0;
}

#inbox {
    overflow-x: clip;
}

#inbox::after {
    content            : "";
    display            : block;
    position           : fixed;
    inset              : 0;
    background         : url("../img/bg.png") no-repeat;
    background-size    : cover;
    background-position: top;
    z-index            : -1;
}

@media (max-width: 767px) {
    #inbox::after {
        background: none;
    }
}

#inbox>.wrapper {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: start;
    -ms-flex-align   : start;
    align-items      : flex-start;
    max-width        : 75rem;
    margin           : 0 auto;
}

#inbox>.wrapper>.inner {
    /* max-width: 22.5rem; */
    background-color: #fff;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #inbox>.wrapper>.inner {
        -webkit-box-shadow: 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
        box-shadow        : 0 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
    }
}

.main__img {
    vertical-align: bottom;
}

.updown_box {
    position: relative;
}

.updown {
    position                 : absolute;
    top                      : 15%;
    animation-name           : updown1;
    /* アニメーション名の指定 */
    animation-delay          : 0s;
    /* アニメーションの開始時間指定 */
    animation-duration       : 3s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite;
}

@keyframes updown1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.list_box {
    position: relative;
}

.list_box_left01 {
    position: absolute;
    top     : 10%;
    left    : 7%;
    width   : 37%;
    height  : 54%;
}

.list_box_left02 {
    position: absolute;
    top     : 79%;
    left    : 7%;
    width   : 37%;
    height  : 10%;
}

.list_box_right01 {
    position: absolute;
    top     : 10%;
    right   : 7%;
    width   : 37%;
    height  : 54%;
}

.list_box_right02 {
    position: absolute;
    top     : 79%;
    right   : 7%;
    width   : 37%;
    height  : 10%;
}

.main__kiyaku_box {
    position: relative;
}

.main__kiyaku {
    width          : 80%;
    height         : 90%;
    position       : absolute;
    overflow-y     : scroll;
    scrollbar-width: none;
    top            : 5%;
    right          : 0;
    left           : 0;
    margin         : 0 auto;
    font-size      : 14px;
}

.main__kiyaku>* {
    word-wrap     : break-word;
    letter-spacing: 0;
}

.main__kiyaku h5 {
    font-size  : 14px;
    font-weight: normal;
    margin: 0;
    padding-top: 3%;
    line-height: 1.5;
}

.main__kiyaku h5:first-child {
    padding-top: 0;
}

.main__kiyaku p {
    margin: 0.8% 0 0 0;
}

.main__kiyaku a {
    text-decoration: underline;
    color          : #000;
}

.main__kiyaku ul,
.main__kiyaku ol {
    padding-left: 1em;
    text-indent : -1em;
}

.link_box {
    position: relative;
}

.button14 {
    position: absolute;
    top     : 35%;
    left    : 16%;
    width   : 10%;
    height  : 29%;
}

.button15 {
    position: absolute;
    top     : 35%;
    left    : 31%;
    width   : 10%;
    height  : 29%;
}

.button16 {
    position: absolute;
    top     : 35%;
    left    : 47%;
    width   : 10%;
    height  : 29%;
}

.button17 {
    position: absolute;
    top     : 35%;
    left    : 63%;
    width   : 20%;
    height  : 32%;
}

.menu {
    position: relative;
}

.button18 {
    position: absolute;
    top     : 0%;
    left    : 4%;
    width   : 67%;
    height  : 10%;
}

.button19 {
    position: absolute;
    top     : 27%;
    left    : 4%;
    width   : 67%;
    height  : 10%;
}

.button20 {
    position: absolute;
    top     : 53%;
    left    : 4%;
    width   : 67%;
    height  : 10%;
}

.button21 {
    position: absolute;
    top     : 80%;
    left    : 4%;
    width   : 67%;
    height  : 10%;
}

#inbox>.wrapper>.sidebar {
    position: sticky;
    top     : 0;
    width   : 26.25rem;
    height  : 100vh;
}

@media (max-width: 767px) {
    #inbox>.wrapper>.sidebar {
        display: none;
    }
}

/* #inbox>.wrapper>.sidebar .body {
    padding           : 1.625rem 0;
    height            : calc(100vh - 5.625rem);
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
    overflow          : hidden;
} */

#inbox>.wrapper>.sidebar .body .l-spnav-content {
    width         : -webkit-fit-content;
    width         : -moz-fit-content;
    width         : fit-content;
    min-width     : 21.25rem;
    margin-inline : auto;
    padding-bottom: 0;
}

#inbox>.wrapper>.sidebar>.inner {
    background-size: 75rem auto;
    height         : 100%;
}

#inbox>.wrapper>.sidebar.-left .l-spnav-content,
#inbox>.wrapper>.sidebar.-right .l-spnav-content {
    display        : flex;
    justify-content: center;
    align-items    : center;
    height         : 100vh;
}

.l-spnav-content {
    padding              : 0 2rem;
    -webkit-box-sizing   : border-box;
    box-sizing           : border-box;
    height               : 100%;
    min-height           : 43.75rem;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
}