@charset "UTF-8";

body {
  overflow-x: hidden;
}

:root {
    --bbw: 10px;
}

p {
  font-feature-settings: "palt";
}

.sh-gradient-wrapper {
}

.sh-page-title {
  background: url(images/smp/img_main_smp.jpg) top center no-repeat;
  background-size: cover;
}

.sh-contents {
  max-width: 1120px;
}

.sh-value-img2 {
    width: 35%;
    max-width: 240px;
    position: absolute;
    top: -30vw;
    right: 0px;
}
.sh-value-img4 {
    width: 80%;
    max-width: 480px;
}
.sh-value-img7 {
    width: 40%;
    max-width: 370px;
    position: absolute;
    top: -38vw;
    right: 0px;
}


.sh-value-title1 {
    background-color: #f1bc18;
    color: #fff;
    padding: 30px 2.7%;
    position: relative;
}
.sh-value-title1::before {
    content: "";
    background-color: #f1bc18;
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -15px;
    left: 0;
}
.sh-value-title1 > p:first-child {
    font-family: "Figtree", sans-serif;
    line-height: 1;
}

.MT110 {
    margin-top: 110px;
}

sup {
    top: 0;
}
sub {
    bottom: 0.25em;
}


@media screen and (min-width: 768px) {
    .sh-gradient-wrapper {
        padding-bottom: 40px;
    }
    .sh-page-title {
        background-image: url(images/img_main.jpg);
    }

    .sh-value-box1 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 100px;
    }
    .sh-value-box1 > div:first-child {
        width: 36.3636364%;
        max-width: 400px;
    }
    .sh-value-box1 > div:last-child {
        width: 59.0909091%;
        max-width: 650px;
    }

    .sh-value-box2 {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    .sh-value-box2 > div:first-child {
        width: 28.1818182%;
        max-width: 310px;
    }
    .sh-value-box2 > div:last-child {
        width: 67.2727273%;
        max-width: 740px;
    }

    .sh-value-box3 {
        display: flex;
        justify-content: space-between;
    }
    .sh-value-box3 > div:first-child {
        width: 52.7272727%;
        max-width: 580px;
    }
    .sh-value-box3 > div:last-child {
        width: 45.4545455%;
        max-width: 500px;
        position: relative;
        border-bottom: 1px solid #333;
        padding: 0 3.63636364% 40px;
        box-sizing: border-box;
    }
    .sh-value-box3 > div:last-child::after {
        content: "";
        position: absolute;
        bottom: 0%;
        right: 0;
        width: 1px;
        height: 80%;
        background-color: #333;
    }

    .sh-value-box4 {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    .sh-value-box4 > div:first-child {
        width: 33.6363636%;
        max-width: 370px;
        position: relative;
        z-index: 1;
    }
    .sh-value-box4 > div:last-child {
        width: 61.8181818%;
        max-width: 680px;
    }

    .sh-value-box5 {
        display: flex;
        justify-content: space-between;
    }
    .sh-value-box5 > div:first-child {
        width: 44.5454545%;
        max-width: 490px;
    }
    .sh-value-box5 > div:last-child {
        width: 50.9090909%;
        max-width: 560px;
    }

    .sh-value-box6 {
        display: flex;
        justify-content: space-between;
    }
    .sh-value-box6 > div:first-child {
        width: 35.4545455%;
        max-width: 390px;
        position: relative;
        z-index: 1;
    }
    .sh-value-box6 > div:last-child {
        width: 60%;
        max-width: 660px;
    }

    .sh-value-img1 {
        width: 75.4545455%;
        max-width: 830px;
    }
    .sh-value-img2 {
        width: 21.8181818%;
        top: initial;
        bottom: 0;
        right: clamp(-90px, 396px - 36vw, 0px);
    }
    .sh-value-img3 {
        width: 52.7272727%;
        max-width: 580px;
        margin-top: 70px;
    }
    .sh-value-img4 {
        width: 43.6363636%;
        position: absolute;
        bottom: 0;
        right: clamp(-90px, 396px - 36vw, 0px);
    }
    .sh-value-img5 {
        width: 62.7272727%;
        max-width: 690px;
        position: relative;
        top: -20px;
        left: clamp(-90px, 396px - 36vw, 0px);
    }
    .sh-value-img6 {
        width: 52.7272727%;
        max-width: 580px;
    }
    .sh-value-img7 {
        width: 33.6363636%;
        top: initial;
        bottom: 20px;
        right: clamp(-90px, 396px - 36vw, 0px);
    }
    .sh-value-img8 {
        width: 43.6363636%;
        max-width: 480px;
        position: absolute;
        bottom: -30px;
        right: clamp(-90px, 396px - 36vw, 0px);
    }
    .sh-value-img9 {
        width: 43.6363636%;
        max-width: 480px;
        position: relative;
        top: -150px;
        left: clamp(-90px, 396px - 36vw, 0px);
        margin-bottom: -50px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1270px) {
    .sh-value-img8 {
        width: 38%;
    }
    .sh-value-img9 {
        width: 38%;
    }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    .sh-value-img8 {
        bottom: clamp(-140px, 50.83vw - 530.33px, -30px);
    }
    .sh-value-img9 {
        top: clamp(-150px, 300px - 46.88vw, -60px);
    }
    .sh-value-img1.MT110 {
        margin-top: 18vw;
    }
}


@media screen and (max-width: 767px) {
    .sh-gradient-wrapper {
        padding-bottom: 0;
    }

    .sh-value-box3 > div:last-child img {
        width: 80%;
        margin-inline: auto;
        display: block;
    }
    .sh-value-box5 > div:last-child {
        margin-top: 30px;
    }

    .sh-value-img4 {
        margin: 10px auto 50px;
    }
    .sh-value-img5 {
        margin: 10px auto 50px;
        width: 90%;
    }
    .sh-value-img8 {
        margin: 20px auto 0px;
        width: 80%;
    }
    .sh-value-img9 {
        margin: 20px auto 50px;
        width: 80%;
    }
}


@media screen and (max-width: 600px) and (orientation: portrait) {
    .hide-smp2 {
        display: none;
    }
    .TC._smp_TL {
        text-align: left;
    }
}