.navy-bg .inner {
    width: 133rem;
}
.message-compare {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 15rem 1fr;
}
.message-compare .msg {
    display: flex;
}

.message-compare .msg#ats img {order: 1;}
.message-compare .msg#ats .msg-type {order: 2;}
.message-compare .msg#ats .msg-type .msg-type-title {border-radius: 0 8px 0 0; background: #0B5995;}
.message-compare .msg#ats .msg-type dl dd {background: #14304D;}
.message-compare .msg#bms img {order: 2;}
.message-compare .msg#bms .msg-type {order: 1;}
.message-compare .msg#bms .msg-type .msg-type-title {border-radius: 8px 0 0 0; background: #23519F;}
.message-compare .msg#bms .msg-type dl dd {background: #1B2D4C;}

.message-compare .msg .msg-type {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    margin-bottom: 7px;
}
.message-compare .msg .msg-type .msg-type-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6.4rem;
    border-bottom: solid 1px #384B68;
}

.message-compare .msg .msg-type strong {
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: center;
    position: relative;
}
.message-compare .msg .msg-type strong::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FF4800;
    position: absolute;
    top: 0;
    right: -10px;
}
.message-compare .msg .msg-type dl {
    display: flex;
    flex-direction: column;
}
.message-compare .msg .msg-type dl dt {
    display: none;
}
.message-compare .msg .msg-type dl dd {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #FFF;
    text-align: center;
    border-bottom: solid 1px #384B68;
    min-height: 6.8rem;
}
.message-compare .msg .msg-type dl dd:last-child {
    min-height: 10rem;
}
.message-compare .msg .msg-type dl dd div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.message-compare .msg .msg-type dl dd div ul {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
}

.message-compare .versus {
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-bottom: 7px;
}
.message-compare .versus div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: #F2F4F8;
    min-height: 6.8rem;
    border-bottom: solid 1px #384B68;
}
.message-compare .versus .title {
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: normal;
    color: #667090;
}
.message-compare .versus div:last-child {
    min-height: 10rem;
}

.message-compare + .compare-footer {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: #A5B0C6;
}

@media (max-width: 1350px) {
    .navy-bg .inner {
        width: calc(100% - 40px);
    }
}

@media (max-width: 1280px) {
    .message-compare .msg img,
    .message-compare + .compare-footer {
        display: none;
    }
    .message-compare .msg#ats .msg-type .msg-type-title,
    .message-compare .msg#bms .msg-type .msg-type-title {
        border-radius: 8px 8px 0 0;
    }
}
@media (max-width: 735px) {
    .message-compare {
        grid-template-columns: 1fr 10rem 1fr;
    }
    .message-compare .msg .msg-type strong,
    .message-compare .versus .title {
        font-size: 1.6rem;
    }
    .message-compare .msg .msg-type dl dd,
    .message-compare .versus div {
        font-size: 1.4rem;
    }
    .message-compare + .compare-footer {
        font-size: 1.3rem;
    }
}
@media (max-width: 660px) {
    .message-compare {
        display: block;
        position: relative;
        margin-top: 4rem;
        padding-top: 6.5rem;
    }
    .message-compare .msg .msg-type {
        margin-bottom: 0;
    }
    .message-compare .msg .msg-type dl dd div ul li {
        background: none;
        border-radius: unset;
        padding: 0;
        display: list-item;
    }

    .message-compare .msg .msg-type .msg-type-title {
        height: 47px;
        border-bottom: 0;
        width: calc(50% - 25px);
        border-radius: 5px !important;
        background: #2D4C7680 !important;
        position: absolute;
        top: 0;
        cursor: pointer;
    }

    .message-compare .msg#ats .msg-type .msg-type-title {
        left: 0;
    }
    .message-compare .msg#bms .msg-type .msg-type-title {
        right: 0;
    }

    .message-compare .msg .msg-type .msg-type-title strong {
        color: #768090;
    }
    .message-compare .msg .msg-type .msg-type-title strong::after {
        background: #768090;
    }
    .message-compare .msg .msg-type dl {
        display: none;
        border-top: solid 1px #384B68;
    }

    .message-compare .msg .msg-type dl dd:last-child {
        min-height: 8.4rem;
    }
    .message-compare .msg .msg-type dl dt {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-bottom: solid 1px #384B68;
        font-weight: 600;
        font-size: 1.4rem;
        letter-spacing: -0.02em;
        color: #F2F4F8;
        background: #141A2433;
    }
    .message-compare .msg .msg-type dl dd {
        background: none !important;
        line-height: 1.4;
        min-height: 5.8rem;
    }

    .message-compare .versus {
        margin-bottom: 0;
    }

    .message-compare .versus div:not(.title) {
        display: none;
    }
    .message-compare .versus .title {
        height: 47px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 0;
        font-size: 1.8rem;
        min-height: unset;
    }


    .message-compare .msg .msg-type .msg-type-title.active {
        background: #0B5995 !important;
    }

    .message-compare .msg .msg-type .msg-type-title.active strong {
        color: #fff;
    }
    .message-compare .msg .msg-type .msg-type-title.active strong::after {
        background: #FF4800;
    }
    .message-compare .msg .msg-type .msg-type-title.active + dl {
        display: grid;
        grid-template-columns: 9.6rem 1fr;
    }
}