#sec3_parent {
    height: 50%;
    width: 100%;
    padding: 20px;
    text-align: center;
    background-color: #ffffff;
}

body.fixed {
    position: fixed;
    left: 0;
}

/* ヘッダー設定 */
.sec3_heading {
    color: white;
    background-color: rgb(237,140,114);
    border-radius: 10px;
    margin: 0 auto;
    width: 60%;
    height: 50%;
}

.sec3_headingText {
    font-weight: bold;
    padding: 10px 0;
}

/* タイトル設定 */
.sec3_title {
    font-size: 2.5vw;
    font-weight: bold;
    text-align: left;
    margin: 2% 0 0 2%;
    border-left: solid 20px rgb(237,140,114); /*左側の線*/
    padding: 0.5em;
}

/* コンテンツ設定 */
.sec3_child_contents {
    width: 85%;
    margin: 0 auto;
}

.sec3_child2 {
    position: relative;
    right: 10%;
    text-align: left;
}

.sec3_child3 {
    position: relative;
    width: 100%;
    height: 100%;
    left: 17%;
    padding-top: 30px;
}

/* 画像設定 */
.sec3_image {
    height: auto;
    width: 80%;
}

.sec3_image1 {
    position: absolute;
    top: 85%;
    z-index: 2;
    width: 29vw;
}

.sec3_image3 {
    position: absolute;
    right: 8vw;
    bottom: 38%;
    width: 18vw;
    padding: 0;
}

/* 吹き出し部分設定 */
.sec3_fukidasi {
    width: 100%;
    position: relative;
    margin: 2em 0 2em 40px;
    padding: 15px;
    background: rgb(244,234,222);
    border-radius: 50px;
    display: inline-block;
}

    .sec3_fukidasi:before {
        content: "";
        position: absolute;
        left: 15vw;
        width: 25px;
        height: 15px;
        bottom: -47px;
        background: rgb(244,234,222);
        border-radius: 50%;
    }

    .sec3_fukidasi:after {
        content: "";
        position: absolute;
        left: 15.5vw;
        width: 60px;
        height: 38px;
        bottom: -20px;
        background: rgb(244,234,222);
        border-radius: 50%;
    }

.sec3_fukidasi_text {
    font-size: 20px;
    text-align: left;
    font-weight: bold;
    margin: 1em 0px;
}

/* 診断結果部分設定 */
#sec3_box {
    background-color: rgb(244,234,222);
    font-size: 1.2vw;
    padding: 20px;
    width: 87%;
    height: 80%;
}

.sec3_schema_title_p {
    text-align: left;
}

.sec3_schema_title {
    display: inline-block;
}

.sec3_contents {
    text-align: left;
    font-weight: bold;
    padding: 10px 0;
    padding-left: 1vw;
}

.sec3_report {
    text-align: left;
    font-weight: bold;
}

.sec3_price {
    color: rgb(233, 117, 85);
    font-size: 2.5vw;
    font-weight: 700;
}

.sec3_example {
    display: inline-block;
}

/* ボタン設定 */
.checkOutput {
    color: #284168;
    background: #ffffff;
    border: 5px solid #284168;
    padding: 1% 4%;
    line-height: 40px;
    outline: none;
    border-radius: 140px 140px 140px 140px/50px 50px 50px 50px;
    font-weight: 600;
    font-size: 2vw;
    margin: 40px 0 0 0;
    text-align: center;
}

button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* アウトプットイメージ(矢印)設定 */
.slick-prev {
    z-index: 1000;
    display: inline-block;
    left: 5%;
    border-bottom: solid 4px #5bc8ac;
    border-left: solid 4px #5bc8ac;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
}

.slick-next {
    /* スライド画像の後ろに隠れないようにする */
    z-index: 1000;
    display: inline-block;
    right: 30%;
    width: 24px;
    height: 24px;
}

.slick-slider {
    width: 80%;
}

.slider .slick-prev::before {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    outline: none;
    background: transparent;
    right: 60%;
    border-bottom: solid 4px white;
    border-left: solid 4px white;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
}

.slider .slick-next::before {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    outline: none;
    background: transparent;
    transform: rotate(45deg);
    border-top: solid 4px white;
    border-right: solid 4px white;
    width: 24px;
    height: 24px;
}

.slide-dots {
    text-align: center;
    margin-right: 8%;
}
/* アウトプットイメージ(モーダル) 設定*/
.modal__bg {
    background: rgba(37, 36, 36, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.js-modal {
    background: rgba(37, 36, 36, 0.8);
}

.modal__content {
    left: 60%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: 0 auto;
    font-size: 40px;
}

.img-fluid1 {
    max-width: 73%;
    height: auto;
    margin-left: 48%;
    background-color: white;
    transform: translateX(-50%);
}

.img-fluid2 {
    max-width: 79%;
    height: auto;
    margin-left: 48%;
    transform: translateX(-50%);
}

.img-fluid3 {
    width: 95%;
    height: 50%;
}

.img-fluid4 {
    width: 70%;
    position: relative;
    left: 12%;
}

.js-modal-close {
    color: rgb(245, 247, 247);
    font-size: 100%;
    position: relative;
    left: 20%;
}


body.fixed {
    position: fixed;
    left: 0;
}

/* スクリーンサイズが1280px以上の場合に適用 */
@media (min-width:1280px) {
    .sec3_fukidasi {
        width: max-content;
    }
}

@media (max-width:768px) {
    .sec3_heading {
        color: white;
        background-color: rgb(237,140,114);
        border-radius: 10px;
        margin: 0 auto;
        width: 100%;
    }

    .sec3_headingText {
        font-size: 5vw;
        font-weight: bold;
    }

    .sec3_child_contents {
        width: 90%;
    }

    .sec3_child3 {
        left: 0;
        padding-top: 15vw;
    }

    #sec3_box {
        width: auto;
        font-size: 2.5vw;
        padding: 3px;
        position: relative;
    }

    .sec3_price {
        font-size: 5vw;
    }

    .sec3_image {
        width: 100%;
    }

    .sec3_image1 {
        width: 30vw;
    }

    #sec3_image2 {
        width: 90%;
        padding-bottom: 8vw;
    }

    .sec3_image3 {
        position: absolute;
        top: 25vw;
        width: 22vw;
    }
}

@media(max-width: 540px) {
    .modal__content {
        left: 53%;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        margin: 0 auto;
        font-size: 40px;
    }

    .img-fluid1 {
        max-width: 73%;
        height: auto;
        margin-left: 55%;
        transform: translateX(-50%);
    }

    .img-fluid2 {
        width: 80%;
        position: relative;
    }

    .img-fluid3 {
        width: 100%;
    }

    .img-fluid4 {
        width: 88%;
        position: relative;
        left: 7%;
    }

    .slider .slick-prev::before {
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: block;
        width: 20px;
        height: 20px;
        padding: 0;
        cursor: pointer;
        outline: none;
        background: transparent;
        left: 152%;
        border-bottom: solid 4px white;
        border-left: solid 4px white;
        width: 24px;
        height: 24px;
        transform: rotate(45deg);
    }

    .slider .slick-next::before {
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: block;
        width: 20px;
        height: 20px;
        padding: 0;
        cursor: pointer;
        outline: none;
        background: transparent;
        left: 24%;
        transform: rotate(45deg);
        border-top: solid 4px white;
        border-right: solid 4px white;
        width: 24px;
        height: 24px;
    }
}

@media(max-width: 395px) {
    .sec3_schema_title {
        display: initial;
    }

    .sec3_image1 {
        top: 95%;
        width: 32vw;
    }

    .sec3_image3 {
        top: 24vw;
        right: 0;
        width: 20vw;
    }
}