/** --------------------------------------------------------------- *
 *   Root
 *  --------------------------------------------------------------- */
.common-link-navigation {
    height          : 100%;
}
.common-link-navigation__list {
    display         : flex;
    justify-content : space-between;
    list-style      : none;
    height          : 100%;
    margin          : 0;
    padding         : 0;
    box-sizing      : border-box;
}
.common-link-navigation__item {
    position        : relative;
}
.common-link-navigation__item--separator {
    position         : relative;
    display          : none;
    height           : 0;
    flex-basis       : 100%;
}
.common-link-navigation__item--separator::before {
    content          : "";
    position         : absolute;
    top              : -1px;
    left             : 0;
    width            : 100%;
    border-top       : 2px dotted #565656;
}
.common-link-navigation__item::after {
    content          : "";
    position         : absolute;
    top              : 12px;
    right            : -1px;
    height           : calc(100% - 12px * 2);
    border-right     : 2px dotted #565656;
}

.common-link-navigation__item-link {
    position        : relative;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    width           : 100%;
    height          : 100%;
    text-align      : center;
    outline         : none;
    cursor          : pointer;
    user-select     : none;
    color           : white;
    background      : #1a1a1a;
    box-sizing      : border-box;
    text-decoration : none;
}

.common-link-navigation__item-link-icon {
    position        : relative;
    display         : flex;
    align-items     : flex-end;
    height          : 55%;
    color           : white;
    transition       : color 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
}
.common-link-navigation__item-link-icon svg {
    width           : 2em;
    height          : 2em;
}
.common-link-navigation__item-link-icon[aria-live="assertive"]::after {
    content          : "";
    position         : absolute;
    bottom           : 1.2em;
    right            : 0;
    width            : 8px;
    height           : 8px;
    background       : #CC0033;
    border-radius    : 50%;
}
.common-link-navigation__item-link:hover .common-link-navigation__item-link-icon {
    color           : #A3A3A3;
}
.common-link-navigation__item-link-text {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 45%;
    color           : white;
    transition      : color 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
    white-space     : nowrap;
}
.common-link-navigation__item-link-text p {
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin          : 0;
    font-size       : 1em;
    font-weight     : 600;
    line-height     : 1.2;
}
.common-link-navigation__item-link:hover .common-link-navigation__item-link-text {
    color           : #CC0033;
}
.common-link-navigation__item-link-text-separator {
}
.common-link-navigation__item-link-text-linebreak {
    display         : none;
}

/** =============================================================== *
 *   phone-portrait（300px-560px）
 *  =============================================================== */
@media screen and (max-width: 561px) {
    .common-link-navigation {
        height          : 168px;
        font-size       : 10px;
    }
    .common-link-navigation__list {
        flex-wrap       : wrap;
    }
    .common-link-navigation__item {
        height          : 50%;
        padding         : 12px 0;
    }
    .common-link-navigation__item--separator {
        display         : block;
    }
    .common-link-navigation__item:nth-child(n+1):nth-child(-n+3) {
        flex-basis      : 33.33%;
    }
    .common-link-navigation__item:nth-child(n+5):nth-child(-n+6) {
        flex-basis      : 50%;
    }
    .common-link-navigation__item:nth-child(3)::after, .common-link-navigation__item:nth-child(6)::after {
        content         : none;
    }
    .common-link-navigation__item-link-text p {
    }
    .common-link-navigation__item-link-text-separator {
        display         : block;
    }
    .common-link-navigation__item-link-text-linebreak {
        display         : none;
    }
}

/** =============================================================== *
 *   phone-landscape （561px〜767px）
 *  =============================================================== */
@media screen and (min-width: 561px) and (max-width: 768px) {
    .common-link-navigation {
        height          : 110px;
        font-size       : 10px;
    }
    .common-link-navigation__list {
        flex-wrap       : nowrap;
    }
    .common-link-navigation__item {
        height          : 100%;
        padding         : 20px 0;
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item--separator {
        display         : none;
    }
    .common-link-navigation__item:nth-child(n+1):nth-child(-n+3) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item:nth-child(n+5):nth-child(-n+6) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item::after {
        top              : 20px;
        height           : calc(100% - 20px * 2);
    }
    .common-link-navigation__item:nth-child(3)::after {
        content         : '';
    }
    .common-link-navigation__item:nth-child(6)::after {
        content         : none;
    }
    .common-link-navigation__item-link-text {
    }
    .common-link-navigation__item-link-text-separator {
        display         : none;
    }
    .common-link-navigation__item-link-text-linebreak {
        display         : block;
    }
}

/** =============================================================== *
 *   tablet-portrait （768〜1193px）
 *  =============================================================== */
@media screen and (min-width: 768px) and (max-width: 1194px) {
    .common-link-navigation {
        height          : 142px;
        font-size       : 12px;
    }
    .common-link-navigation__list {
        flex-wrap       : nowrap;
    }
    .common-link-navigation__item {
        height          : 100%;
        padding         : 24px 0;
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item--separator {
        display         : none;
    }
    .common-link-navigation__item:nth-child(n+1):nth-child(-n+3) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item:nth-child(n+5):nth-child(-n+6) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item::after {
        top              : 24px;
        height           : calc(100% - 24px * 2);
    }
    .common-link-navigation__item:nth-child(3)::after {
        content         : '';
    }
    .common-link-navigation__item:nth-child(6)::after {
        content         : none;
    }
    .common-link-navigation__item-link-text {
    }
    .common-link-navigation__item-link-text-separator {
        display         : none;
    }
    .common-link-navigation__item-link-text-linebreak {
        display         : block;
    }
}

/** =============================================================== *
 *   tablet-landscape （1194〜1349px）
 *  =============================================================== */
@media screen and (min-width: 1194px) and (max-width: 1350px) {
    .common-link-navigation {
        height          : 144px;
        font-size       : 12px;
    }
    .common-link-navigation__item {
        height          : 100%;
        padding         : 32px 0 26px;
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item--separator {
        display         : none;
    }
    .common-link-navigation__item:nth-child(n+1):nth-child(-n+3) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item:nth-child(n+5):nth-child(-n+6) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item::after {
        top              : 32px;
        height           : calc(100% - 32px - 26px);
    }
    .common-link-navigation__item:nth-child(3)::after {
        content         : '';
    }
    .common-link-navigation__item:nth-child(6)::after {
        content         : none;
    }
    .common-link-navigation__item-link-text {
    }
    .common-link-navigation__item-link-text-separator {
        display         : block;
    }
    .common-link-navigation__item-link-text-linebreak {
        display         : none;
    }
}

/** =============================================================== *
 *   laptop （1350px〜）
 *  =============================================================== */
@media screen and (min-width: 1350px) {
    .common-link-navigation {
        height          : 157px;
        font-size       : 13px;
    }
    .common-link-navigation__item {
        height          : 100%;
        padding         : 32px 0 26px;
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item--separator {
        display         : none;
    }
    .common-link-navigation__item:nth-child(n+1):nth-child(-n+3) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item:nth-child(n+5):nth-child(-n+6) {
        flex-basis      : calc(100% / 5);
    }
    .common-link-navigation__item::after {
        top              : 32px;
        height           : calc(100% - 32px - 26px);
    }
    .common-link-navigation__item:nth-child(3)::after {
        content         : '';
    }
    .common-link-navigation__item:nth-child(6)::after {
        content         : none;
    }
    .common-link-navigation__item-link-text {
    }
    .common-link-navigation__item-link-text-separator {
        display         : block;
    }
    .common-link-navigation__item-link-text-linebreak {
        display         : none;
    }
}

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