.nav-justified {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar .nav-justified > li {
    display: table-cell;
    width: 100%;
}

.hp-header-img {
    object-fit: cover;
    width: 100%;
    height: 15vw;
    min-height: 210px;
}

.hp-header {
}

.hp-header-header:before {
    height: max-content;
}

.hp-header-header {
    color: white;
    width: 100%;
}

.hp-header-header-left {
    text-align: left;
    font-weight: bold;
}
.hp-header-header-right {
    text-align: right;
    font-weight: bold;
    font-family: "Tsukushi A Round Gothic", serif;
}
.hp-header-body {
    text-align: right;
    font-size: 400%;
    overflow: hidden;
    font-weight: bold;
    font-family: "Tsukushi A Round Gothic", serif;
}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.nav-tabs-container {
    font-weight: bold;
    font-family: "Tsukushi A Round Gothic", serif;
    background: #e0f1d7;
}

.main-icon-robot {
    text-align: center;
    margin-bottom: 2vh;
    width: 160px;
    height: 200px;
}

.main-icon-system {
    text-align: center;
    margin-bottom: 2vh;
    width: 200px;
    height: 200px;
}

.main-icon-server {
    text-align: center;
    margin-bottom: 2vh;
    width: 300px;
    height: 200px;
}

.main-icon-card {
    text-align: center;
    border: none;
}

.comment-box {
    text-align: center;
    width: 40%;
    margin-left: 30%;
    margin-right: 22%;
}

.main-comment {
    text-align: center;
    margin-top: 4vh;
    font-size: 300%;
    font-weight: bold;
    font-family: "Tsukushi A Round Gothic", serif;
}

.main-comment-underline {
    border-bottom: 4px solid #00cc7b;
}

.sub-comment {
    text-align: center;
    margin-top: 2vh;
    margin-bottom: 4vh;
    font-size: 100%;
    font-weight: bold;
    font-family: "Tsukushi A Round Gothic", serif;
}

.info-box {
    height: 20vh;
    overflow-y: scroll;
}