/* 共通設定 */
    .bg {
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: auto auto;
        background-color: #b4db3c;
        background-image: repeating-linear-gradient(135deg, #c6e26b, #c6e26b 15px, #b4db3c 15px, #b4db3c 30px);
    }

    .container {
        /* width: 90%; */
        width: 60%;
        margin: 5%;
    }

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10vh;
        width: 99%;
        margin: 0 auto 20px auto;
        border: solid 4px rgb(47, 47, 47);
        border-radius: 10px 10px 10px 10px;
        background-color: #50D2AF;
        color: rgb(59, 57, 57);
    }

    .title_name {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 2rem;
        font-weight: bold;
    }

    .sub_title {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7b429;
        height: 45px;
        margin-top: 20px;
        border: solid 12px white;
        border-bottom: none;
        font-weight: bold;
    }

    .sub_title_name {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.8rem;
        color: white;
    }

    .content {
        background-color: #FFFCD5;
    }

    .content2 {
        background-color: #fee6e6;
    }

    .content_part {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 12px solid white;
        border-top: none;
    }

    .img {
        width: 38%;
        padding: 20px;
    }

    img {
        width: 100%;
    }

    .explanation {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        height: 100%;
    }

    .explanation_title {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.6vw;
        font-weight: bold;
        text-align: left;
        margin-bottom: 20px;
    }

    .explanation_content {
        font-family: 'Noto Sans JP';
        font-size: 1.4vw;
        line-height: 1.9vw;
        text-align: left;
    }

    p {
        font-size: 1.5rem;
    }

    .remote {
        background-color: #7CDAF2;
        margin-top: 20px;
        border: solid 3px black;
        border-radius: 10px 10px 10px 10px;
    }

    .remote_explanation {
        display: flex;
        align-items: center;
    }

    .remote_explanation_part {
        padding: 20px;
    }

    .remote_img {
        /* width: 36%; */
        width: 150%;
        border: solid 3px white;
        border-radius: 9px 9px 9px 9px;
    }

    .remote_pic {
        display: block;
        border-radius: 6px 6px 6px 6px;
    }

    /* タブレット設定 */
    @media screen and (max-width: 1000px) {
        .title {
            height: 7vh;
        }

        .title_name {
            font-size: 1.7rem;
        }

        .sub_title_name {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.5rem;
        }

        .content_part {
            flex-direction: column;

        }

        .img {
            width: 88%;
        }

        .explanation {
            padding: 10px 10px 30px 10px;
            margin: 0 auto;
            width: 88%;
        }

        .explanation_title {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.4rem;
        }

        .explanation_content {
            font-family: 'Noto Sans JP', sans-serif;
            font-size: 1.1rem;
            line-height: 1.3rem;
        }

        .remote_explanation {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .remote_explanation_part>.explanation_title {
            text-align: center;
            font-size: 20px;
        }

        .remote_img {
            display: flex;
            justify-content: center;
            width: 85%;
            margin-bottom: 20px;
        }

    }

    @media screen and (max-width: 670px) {
        .container {
            width: 80%;
        }

        .sub_title_name {
            font-family: 'Noto Sans JP', sans-serif;
        }

        .remote_explanation {
            display: flex;
            flex-direction: column;
        }

        .remote_img {
            width: 80%;
            margin-bottom: 20px;
        }

        .explanation {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .explanation_title {
            font-family: 'Noto Sans JP', sans-serif;
        }

        .remote_explanation_part>.explanation_title {
            text-align: center;
            font-size: 20px;
        }
    }