/** --------------------------------------------------------------- *
 *   Root
 *  --------------------------------------------------------------- */
.header-accordion {
    position    : relative;
    transition  : max-height 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
    background  : #1A1A1A;
    box-shadow  : 0 6px 10px rgba(0,0,0,0.4);
    font-size   : 1rem;
    overflow-x  : hidden;
    overflow-y  : scroll;
    -ms-overflow-style : none;
    scrollbar-width    : none;
}
.header-accordion::-webkit-scrollbar {
    display     : none;
}
.header-accordion[aria-hidden="true"] {
    max-height  : 0;
}

/** --------------------------------------------------------------- *
 *   Body / Foot
 *  --------------------------------------------------------------- */
.header-accordion-body {
    width       : 100%;
}
.header-accordion-foot {
    width       : 100%;
    border-top  : 1px dashed #565656;
    box-sizing  : border-box;
}


/** --------------------------------------------------------------- *
 *   Children - Link Sections
 *  --------------------------------------------------------------- */
.header-link-sections {
    display         : flex;
    flex-direction  : column;
}
.header-link-sections__common {
    position        : relative;
    box-sizing      : border-box;
}
.header-link-sections__common::after {
    content         : '';
    position        : absolute;
    width           : 100%;
    border-bottom   : 1px solid #707070;
}

.header-link-sections__profile {
}

/** --------------------------------------------------------------- *
 *   Children - Close Button
 *  --------------------------------------------------------------- */
.header-close-button {
    outline         : none;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    color           : white;
    background      : #1a1a1a;
    border          : none;
    cursor          : pointer;
}
.header-close-button__icon {
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.header-close-button__icon svg {
    width           : 1em;
    height          : 1em;
}
.header-close-button__text {
    margin          : 0 0 0 0.6em;
    font-size       : 1em;
    line-height     : 1em;
    user-select     : none;
}



/** =============================================================== *
 *   phone-portrait（300px-560px）
 *  =============================================================== */
@media screen and (max-width: 561px) {
    .header-accordion {
        max-height  : calc(100vh - 44px);
    }
    .header-accordion-foot {
        height      : 34px;
        font-size   : 1em;
    }
    /** --------------------------------------------------------------- *
     *   Children - Link Sections
     *  --------------------------------------------------------------- */
    .header-link-sections {
        padding         : 0 12px;
        box-sizing      : border-box;
    }
    .header-link-sections__common {
        position        : relative;
        box-sizing      : border-box;
    }
    .header-link-sections__profile {
        margin          : 16px 0;
        box-sizing      : border-box;
    }
    /** --------------------------------------------------------------- *
     *   Children - Close Button
     *  --------------------------------------------------------------- */
    .header-close-button {
        font-size       : 10px;
    }
}

/** =============================================================== *
 *   phone-landscape （561px〜767px）
 *  =============================================================== */
@media screen and (min-width: 561px) and (max-width: 768px) {
    .header-accordion {
        max-height  : calc(100vh - 48px);
    }
    .header-accordion-foot {
        height      :  49px;
    }
    /** --------------------------------------------------------------- *
     *   Children - Link Sections
     *  --------------------------------------------------------------- */
    .header-link-sections {
        padding         : 0 22px;
        box-sizing      : border-box;
    }
    .header-link-sections__common {
        position        : relative;
        box-sizing      : border-box;
    }
    .header-link-sections__profile {
        margin          : 20px 0;
        box-sizing      : border-box;
    }
    /** --------------------------------------------------------------- *
     *   Children - Close Button
     *  --------------------------------------------------------------- */
    .header-close-button {
        font-size       : 12px;
    }
}

/** =============================================================== *
 *   tablet-portrait （768〜1193px）
 *  =============================================================== */
@media screen and (min-width: 768px) and (max-width: 1194px) {
    .header-accordion {
        max-height  : calc(100vh - 56px);
    }
    .header-accordion-body {
    }
    .header-accordion-foot {
        height      :  54px;
    }
    /** --------------------------------------------------------------- *
     *   Children - Link Sections
     *  --------------------------------------------------------------- */
    .header-link-sections {
        padding         : 0 32px;
        box-sizing      : border-box;
    }
    .header-link-sections__common {
        position        : relative;
        box-sizing      : border-box;
    }
    .header-link-sections__profile {
        margin          : 24px 0;
        box-sizing      : border-box;
    }
    /** --------------------------------------------------------------- *
     *   Children - Close Button
     *  --------------------------------------------------------------- */
    .header-close-button {
        font-size       : 14px;
    }
}




/** =============================================================== *
 *   tablet-landscape （1194〜1349px）
 *  =============================================================== */
@media screen and (min-width: 1194px) and (max-width: 1350px) {
    .header-accordion {
        max-height  : calc(100vh - 56px);
    }
    .header-accordion-foot {
        height      :  61px;
    }
    /** --------------------------------------------------------------- *
     *   Children - Link Sections
     *  --------------------------------------------------------------- */
    .header-link-sections {
        justify-content: center;
        padding     : 0 32px;
        margin      : 0 auto;
        box-sizing  : border-box;
    }
    .header-link-sections__common {
        position        : relative;
        box-sizing      : border-box;
    }
    .header-link-sections__profile {
        margin          : 32px 0;
        box-sizing      : border-box;
    }
    /** --------------------------------------------------------------- *
     *   Children - Close Button
     *  --------------------------------------------------------------- */
    .header-close-button {
        font-size   : 14px;
    }
}

/** =============================================================== *
 *   laptop （1350〜1899px）
 *  =============================================================== */
@media screen and (min-width: 1350px) { /* and (max-width: 1900px) { */
    .header-accordion {
        max-height  : calc(100vh - 56px);
    }
    .header-accordion-body {
        height      : 100%;
    }
    .header-accordion-foot {
        display     : none;
    }
    /** --------------------------------------------------------------- *
     *   Children - Link Sections
     *  --------------------------------------------------------------- */
    .header-link-sections {
        padding         : 0;
        justify-content : center;
        width           : 1242px;
        margin          : 0 auto;
        box-sizing      : border-box;
    }
    .header-link-sections__common {
        position        : relative;
        box-sizing      : border-box;
    }
    .header-link-sections__profile {
        margin          : 32px 0;
        box-sizing      : border-box;
    }
    /** --------------------------------------------------------------- *
     *   Children - Close Button
     *  --------------------------------------------------------------- */
}

/*!** =============================================================== **/
/* *   desktop (1900px〜)*/
/* *  =============================================================== *!*/
@media screen and (min-width: 1900px) {
}