.hero-banner img {
    width: 100%;
    margin: 0 auto;
}

.hero-banner-block {
    position: relative;
}

.windows-icon {
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
    width: 300px;
}

.top-banner-pc {
    display: block;
}

.top-banner-sp {
    display: none;
}

.bar-img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.mh-main-title {
    padding: 20px 0 16px;
}

.mh-main-title hr {
    width: 70%;
    height: 2px;
    border: 0;
    border-color: #4e444d;
    position: relative;
    margin: 20px auto 8px;
}

.main-title-line {
    display: flex;
    margin-top: -20px;
    justify-content: center;
}

.bar-item {
    width: 71%;
}

.recommend-spec hr {
    width: 60%;
    border-color: #4e444d;
    margin: 10px auto;
}

.bar-item-2 {
    width: 61.5%;
}

.table-title-bottom {
    display: flex;
    justify-content: center;
    margin-top: -1.3vw;
}

.table-title-line {
    width: 15%;
}

.main-title-line img {
    width: 30px;
    margin-top: -6px;
}

.mh-main-title h1 {
    font-size: 34px;
    line-height: 52px;
    text-align: center;
    color: white;
    background-color: #4e444d;
    width: 70%;
    margin: -12px auto -16px;
}

.main-content-pc {
    background-image: url(//p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/mh-wilds/content-main-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    padding: 0 0 80px;
}

.main-content-pc h2 {
    color: white;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    padding-top: 60px;
    margin-bottom: 40px;
}

.recommend-spec {
    width: 70%;
    background-image: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/mh-wilds/content-bg.jpg);
    background-repeat: repeat;
    background-position: left;
    padding: 20px 0;
    margin: 0 auto;
    border-radius: 10px;
}

.recommend-spec-table-title {
    display: flex;
    color: black;
    justify-content: center;
    margin: 5px auto -8px;
    column-gap: 28%;
    padding-right: 4%;
}

.recommend-spec-table-title p {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
}

.table-title {
    width: 95%;
    margin: 0 auto;
}

.main-content-pc table {
    margin: 10px auto 0;
    width: 85%;
    text-align: left;
    color: black;
    font-size: 18px;
    line-height: 24px;
    border-collapse: separate;
    border-spacing: 8px 8px;
}

.pc-spec-table {
    display: block;
}

.white-line th,
.white-line td {
    padding: 10px 0 10px 25px;
    background-color: rgb(255, 255, 255, 0.8);
}

.black-line th,
.black-line td {
    padding: 10px 0 10px 25px;
    color: white;
    background-color: rgb(78, 68, 77, 0.8);
}

.no-line th {
    color: white;
    font-size: 16px;
    line-height: 22px;
    font-weight: normal;
}

.sp-table-title {
    display: block;
}

#th1 {
    width: 20%;
}

#th3,
#th2 {
    width: 40%;
}

.check-more-btn {
    position: relative;
    background-color: black;
    width: 300px;
    text-align: center;
    padding: 12px 26px 12px 0;
    margin: 0 auto 30px;
    border-radius: 8px;
    border: 3px solid rgb(194, 188, 167);
}

.check-more-btn p {
    margin: 5px 0;
    color: rgb(194, 188, 167);
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

.check-more-btn p::after {
    content: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/mh-wilds/arrow.png);
    z-index: 1;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    position: absolute;
}

.mh-bottom-content {
    background-color: rgb(23, 19, 8);
    padding-bottom: 60px;
    min-height: 600px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mh-main-logo {
    display: block;
    width: 60%;
    margin: 0 auto;
}

.mh-bottom-content p {
    font-family: "Gotham";
    color: white;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    margin-top: -120px;
    width: 100%;
}

.br-rwd {
    display: none;
}

.bar-img-pc {
    display: block;
}

.bar-img-sp {
    display: none;
}

.sp-table-title {
    display: flex;
    column-gap: 0;
    padding-right: 0vw;
    padding-left: 0vw;
    justify-content: center;
    width: 92%;
    text-align: center;
    margin: 0 auto;
}

.sp-table-title button {
    width: 25%;
    padding: 5px 0;
    background-color: rgb(0, 0, 0, 0.5);
    border: 3px solid rgb(78, 68, 77, 0.8);
    cursor: pointer;
    margin: 0;
    font-size: 18px;
    line-height: 32px;
    font-weight: bold;
    color: white;
    z-index: 1;
}

.sp-table-title .click-on {
    background-color: rgb(0, 0, 0, 0.2);
    border-bottom: none;
    border-left: 3px solid rgb(78, 68, 77, 0.8);
    color: black;
}

.selectable {
    background-color: rgb(0, 0, 0, 0.2);
    width: 92%;
    margin: 0 auto;
    border: 3px solid rgb(78, 68, 77, 0.8);
    border-top: none;
    padding: 8px 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.main-content-pc .table-1-btn,
.main-content-pc .table-2-btn,
.main-content-pc .table-3-btn {
    border-right: none;
}

.main-content-pc .table-1-btn {
    border-top-left-radius: 8px;
}

.main-content-pc .table-4-btn {
    border-top-right-radius: 8px;
}

#table1,
#table2,
#table3,
#table4 {
    display: none;
}

.active-table {
    display: block !important;
}

@media screen and (max-width: 1080px) {
    .recommend-spec {
        width: 85%;
    }

    .main-content-pc table {
        font-size: 14px;
        line-height: 18px;
    }

    .no-line th {
        font-size: 12px;
        line-height: 18px;
    }

    .white-line th,
    .white-line td,
    .black-line th,
    .black-line td {
        padding: 5px 0 5px 10px;
    }

    .table-title-bottom {
        margin-top: -1.7vw;
    }

    .recommend-spec-table-title p {
        font-size: 18px;
    }

    .mh-bottom-content {
        min-height: 450px;
    }

    .mh-main-logo {
        width: 80%;
    }

    .mh-bottom-content p {
        margin-top: -140px;
    }

    .mh-main-title h1 {
        font-size: 28px;
        line-height: 42px;
    }

    .mh-main-title {
        padding: 14px 0 2px;
    }

    .main-content-pc h2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 760px) {
    .mh-main-title h1 {
        font-size: 26px;
    }

    .mh-bottom-content p {
        font-size: 24px;
    }

    .top-banner-pc {
        display: none;
    }

    .top-banner-sp {
        display: block;
    }

    .pc-spec-table {
        display: none;
    }

    .recommend-spec {
        width: 90%;
    }

    .sp-table-title {
        display: flex;
        column-gap: 0;
        padding-right: 0vw;
        padding-left: 0vw;
        justify-content: center;
        width: 92%;
        text-align: center;
        margin: 0 auto;
    }

    .bar-img-pc {
        display: none;
    }

    .bar-img-sp {
        display: block;
    }

    .sp-table-title button {
        padding: 5px 0;
        background-color: rgb(0, 0, 0, 0.5);
        border: 3px solid rgb(78, 68, 77, 0.8);
        cursor: pointer;
        margin: 0;
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
        color: white;
        z-index: 1;
    }

    .sp-table-title .click-on {
        background-color: rgb(0, 0, 0, 0.2);
        border-bottom: none;
        color: black;
    }

    .main-content-pc {
        margin-top: 10px;
        padding: 0 0 60px;
    }

    .main-content-pc table {
        width: 95%;
        border-spacing: 3px 5px;
    }
}

@media screen and (max-width: 460px) {
    .br-rwd {
        display: block;
    }

    .windows-icon {
        top: 15px;
        right: 15px;
        width: 180px;
    }

    .mh-main-title h1 {
        font-size: 20px;
        line-height: 28px;
    }

    .main-content-pc h2 {
        font-size: 18px;
        padding-top: 50px;
        margin-bottom: 8px;
    }

    .bar-item-2 {
        width: 41%;
    }

    .table-title-bottom {
        margin-top: -3.8vw;
    }

    .table-title-line {
        width: 25%;
    }

    .check-more-btn {
        width: 200px;
        padding: 8px 26px 8px 0;
    }

    .mh-main-logo {
        width: 100%;
    }

    .check-more-btn p::after {
        margin-left: 8px;
        margin-top: -3px;
    }

    .check-more-btn-decoration {
        width: 10%;
    }

    .main-content-border {
        width: 40%;
    }
}