/** --------------------------------------------------------------- *
 *   Overlay
 *  --------------------------------------------------------------- */
.header-overlay {
    position    : absolute;
    width       : 100%;
    background  : #222;
    opacity     : 0.7;
}
.header-overlay[aria-hidden="true"] {
    display     : none;
    opacity     : 0;
}

/** --------------------------------------------------------------- *
 *   Body
 *  --------------------------------------------------------------- */
.header-body {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    height          : 100%;
    margin          : 0;
    padding         : 0;
    box-sizing      : border-box;
}


/** --------------------------------------------------------------- *
 *   Logo
 *  --------------------------------------------------------------- */
.header-body__logo {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 100%;
}
.header-body__logo-icon {
    position        : relative;
}

/** --------------------------------------------------------------- *
 *   Menu
 *  --------------------------------------------------------------- */
.header-body__menu {
    position         : relative;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    height           : 100%;
    cursor           : pointer;
    box-sizing       : border-box;
}
.header-body__menu--hidden {
    display: none;
}
.header-body__menu::after {
    content          : '';
    transition       : transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
    position         : absolute;
    bottom           : 0;
    left             : 0;
    width            : 100%;
    height           : 2px;
    background       : #fff;
    transform        : scale(0, 1);
    transform-origin : center top;
}
.header-body__menu-icon {
    position         : relative;
    color            : #FFFFFF;
}
.header-body__menu-icon::before {
    content          : '';
    position         : absolute;
    top              : -10%;
    left             : -10%;
    height           : 120%;
    width            : 120%;
    border-radius    : 50%;
    background-color : inherit;
    transition       : background-color 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
}
.header-body__menu-icon > svg {
    width            : 100%;
    height           : 100%;
}
.header-body__menu-icon[aria-live="assertive"]::after {
    content          : "";
    position         : absolute;
    top              : 0;
    right            : -3px;
    width            : 6px;
    height           : 6px;
    background       : #CC0033;
    border-radius    : 50%;
}


/** --------------------------------------------------------------- *
 *   Menu - Hover
 *  --------------------------------------------------------------- */
.header-body__menu:hover::after {
    transform        : scale(1, 1);
}
/** --------------------------------------------------------------- *
 *   Menu - background
 *  --------------------------------------------------------------- */
.header-body__menu:hover .header-body__menu-icon::before{
    background       : rgba(255,255,255, 0.1);
}


/** =============================================================== *
 *   phone-portrait（300px-560px）
 *  =============================================================== */
@media screen and (max-width: 560px) {
    /** --------------------------------------------------------------- *
     *   Overlay
     *  --------------------------------------------------------------- */
    .header-overlay {
        margin      : 44px 0 0 0;
        height      : calc(100vh - 44px);
    }
    /** --------------------------------------------------------------- *
     *   Logo
     *  --------------------------------------------------------------- */
    .header-body__logo {
        margin   : 0 0 0 16px;
    }
    .header-body__logo-icon {
        width    : 50px;
        height   : 21px;
    }
    /** --------------------------------------------------------------- *
     *   Menu
     *  --------------------------------------------------------------- */
    .header-body__menu {
        margin   : 0 14px 0 0;
    }
    .header-body__menu-icon {
        height   : 15px;
        width    : 15px;
    }
}



/** =============================================================== *
 *   phone-landscape （561px〜767px）
 *  =============================================================== */
@media screen and (min-width: 561px) and (max-width: 768px) {
    /** --------------------------------------------------------------- *
     *   Overlay
     *  --------------------------------------------------------------- */
    .header-overlay {
        margin      : 48px 0 0 0;
        height      : calc(100vh - 48px);
    }
    /** --------------------------------------------------------------- *
     *   Logo
     *  --------------------------------------------------------------- */
    .header-body__logo {
        margin   : 0 0 0 22px;
    }
    .header-body__logo-icon {
        width    : 50px;
        height   : 21px;
    }
    /** --------------------------------------------------------------- *
     *   Menu
     *  --------------------------------------------------------------- */
    .header-body__menu {
        margin   : 0 27px 0 0;
    }
    .header-body__menu-icon {
        height   : 15px;
        width    : 15px;
    }
}


/** =============================================================== *
 *   Tablet（768px〜）
 *  =============================================================== */
@media screen and (min-width: 768px) {
    /** --------------------------------------------------------------- *
     *   Overlay
     *  --------------------------------------------------------------- */
    .header-overlay {
        margin      : 56px 0 0 0;
        height      : calc(100vh - 56px);
    }
    /** --------------------------------------------------------------- *
     *   Logo
     *  --------------------------------------------------------------- */
    .header-body__logo {
        margin          : 0 0 0 30px;
    }
    .header-body__logo-icon {
        width           : 64px;
        height          : 27px;
    }
    /** --------------------------------------------------------------- *
     *   Menu
     *  --------------------------------------------------------------- */
    .header-body__menu {
        margin           : 0 32px 0 0;
    }
    .header-body__menu-icon {
        width            : 24px;
        height           : 24px;
    }
}