/**************** common ****************/

img {
    width: 100%;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 2;
}
@media (min-width: 992px) {
    body {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}
@media (min-width: 1400px) {
    body {
        font-size: 23px;
    }
}

.pc {
    display: none;
}
.sp {
    display: block;
}
@media (min-width: 768px) {
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
}
.mt-n4 {
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .mt-n4 {
        margin-top: -1.5rem!important;
    }
}

/**************** header ****************/

header .wrap {
    background: url(../img/hero_bg_sp.png) center center / cover no-repeat;
    height: 133vw;
}
header .logo_PlatiumTrain {
    width: 38%;
}
header .logo_Mitsubishi {
    width: 56%;
}
header .hero_rid_logo {
    width: 100%;
}
@media (min-width: 576px) {
    header .wrap {
        height: 767px;
    }
}
@media (min-width: 768px) {
    header .wrap {
        background: url(../img/hero_bg_pc.png) center center / auto 100% no-repeat;
        height: 604px;
    }
    header .logo_PlatiumTrain {
        width: 22%;
    }
    header .logo_Mitsubishi {
        width: 30%;
    }
    header .hero_rid_logo {
        width: 64%;
        margin: 0 auto;
    }
}
@media (min-width: 992px) {
    header .wrap {
        height: 780px;
    }
}
@media (min-width: 1200px) {
    header .wrap {
        height: 944px;
    }
}
@media (min-width: 1400px) {
    header .wrap {
        height: 1102px;
    }
}

/**************** dl ****************/

.title {
    margin: auto;
}
section#point1 .title {
    width: 75%;
}
section#point2 .title {
    width: 74%;
}
section#point3 .title {
    width: 82%;
}
section#point4 .title {
    width: 72%;
}
@media (min-width: 768px) {
    section#point1 .title {
    width: 79%;
    }
    section#point2 .title {
        width: 81%;
    }
    section#point3 .title {
        width: 62%;
    }
    section#point4 .title {
        width: 81%;
    }
}
section#point1 .emphasis {
    background-color: #ffff66;
}
section#point1 .diagram {
    width: 100%;
    margin: auto;
}

@media (min-width: 768px) {
    section#point1 .diagram {
        width: 87%;
    }
    section#point1 .relative {
        position: relative;
    }
    section#point1 .text {
        position: absolute;
    }
    section#point1 .unit {
        position: absolute;
        width: 24%;
        right: 0;
    }
}
section#precautions .wrap {
    border: solid 5px #286ab2;
}
section#precautions h2 {
    color: #286ab2;
    font-size: 16px;
}
section#precautions ul {
    padding-left: 1.5em;
}
@media (min-width: 768px) {
    section#precautions h2 {
        font-size: 16px;
    }
    section#precautions ul {
        padding-left: 2em;
    }
}
@media (min-width: 992px) {
    section#precautions h2 {
        font-size: 20px;
    }
}
@media (min-width: 1200px) {
    section#precautions h2 {
        font-size: 26px;
    }
}
@media (min-width: 1400px) {
    section#precautions h2 {
        font-size: 30px;
    }
}
section#tec .wrap {
    background: url(../img/tec_bg.png) center center / cover no-repeat;
}
section#tec .title {
    display: block;
    width: 100%;
}
section#tec h3 {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
}
@media (min-width: 768px) {
    section#tec h3 {
        font-size: 16px;
    }
    section#tec .title {
        display: block;
        width: 50%;
    }
}
@media (min-width: 992px) {
    section#tec h3 {
        font-size: 20px;
    }
}
@media (min-width: 1200px) {
    section#tec h3 {
        font-size: 26px;
    }
}
@media (min-width: 1400px) {
    section#tec h3 {
        font-size: 30px;
    }
}
section#tec a {
    text-decoration: none;
    color: #286ab2;
    font-weight: bold;
}

/**************** footer ****************/

footer {
    font-size: 10px;
}
@media (min-width: 992px) {
    footer {
        font-size: 11px;
    }
}
@media (min-width: 1200px) {
    footer {
        font-size: 12px;
    }
}
@media (min-width: 1400px) {
    footer {
        font-size: 14px;
    }
}