/*********************** パソコン ***********************/
@media screen and (min-width: 1025px) {
    .sp_on {display: none;}

    /* ヘッダー　ここから */
    #header{
        display: flex;
        align-items: center;

    }

    .main-img{
        text-align: right;
    }

    /* .main-img img{
        width: 100%;
    } */

    .main-img img{
        height: 80vh;
    }

    .main-title{
        flex-basis: calc(100% - 10px);
        text-align: center;
    }
    /* ヘッダー　ここまで */

    /* メイン　ここから */
    .mainBody{
        margin-top: 3rem;
    }

    #introduction{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }

    #introduction h3{
        margin: 1rem;
    }

    #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 3rem;
    }

    .container:nth-child(odd){
        background-image: url(../img/features_bg_1.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem;
        width: 1257px;
        height: 750px;
        margin-top: 2rem;
    }

    .container:nth-child(even){
        background-image: url(../img/features_bg_2.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem;
        width: 1257px;
        height: 750px;
        margin-top: 2rem;
    }

    .features-text {
        width: 80%; /* 横いっぱいに */
        padding-top: 2rem; 
        padding-bottom: 2rem;
        padding-left: 8rem;
        font-size: 2rem;
    }

    .features-img {
        display: flex;
        justify-content: center; 
        gap: 1.5rem; 
        margin-top: 2rem; /* 上のテキストとの余白 */
    }

    .features-img img{
        width: 85%;
        /* max-width: 480px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }
    .features-img .bigger-img{
        width: 75%;
        /* max-width: 840px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }

    .features-text h4{
        font-family: "Zen Kaku Gothic New","Yu Gothic",
        "HiraKakuProN-W3","Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,Osaka,
        "MS UI Gothic","ＭＳ Ｐゴシック","MS PGothic",
        sans-serif;
        margin-bottom: 2rem;
        color: rgb(252, 251, 236);
    }

    .features-text p{
        color: rgb(252, 251, 236);
    }
    /* メイン　ここまで */
}

/*********************** タブレット ***********************/
@media screen and (max-width: 1024px) {    
    .pc_on {display: none;}

    /* ヘッダー　ここから */
    #header{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
        gap: 2rem;
        margin-top: 6rem;
    }
        
    .main-img{
        width: 100%;
    }
    
    .main-img img{
        width: 100%;
    }
        
    .main-title{
        text-align: center;
        margin-bottom: 0.8rem;
    }
    /* ヘッダー　ここまで */

    /* メイン　ここから */
    .mainBody{
        width: 100%;
        margin-top: 2rem;
    }
    
    #introduction{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }

    #introduction p{
       width: 90%;
    }
    
    #introduction h3{
        margin: 2rem;
        letter-spacing: 0.2rem;
    }

    #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 3rem;
    }

    .container:nth-child(odd){
        background-image: url(../img/features_bg_1.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem;
        width: 88%;
        height: 630px;
    }

    .container:nth-child(even){
        background-image: url(../img/features_bg_2.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 3rem;
        width: 88%;
        height: 630px;
    }

    .features-text {
        /* width: 98%; 横いっぱいに */
        padding-top: 2rem; 
        padding-bottom: 2rem;
        font-size: 2rem;
    }

    .features-img {
        display: flex;
        justify-content: center; 
        gap: 1.5rem; 
        margin-top: 2rem; /* 上のテキストとの余白 */
    }

    .features-img img{
        width: 90%;
        /* max-width: 450px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }

    .features-img .bigger-img{
        width: 70%;
        /* max-width: 840px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }

    .features-text h4{
        font-family: "Zen Kaku Gothic New","Yu Gothic",
        "HiraKakuProN-W3","Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,Osaka,
        "MS UI Gothic","ＭＳ Ｐゴシック","MS PGothic",
        sans-serif;
        margin-bottom: 2rem;
        color: rgb(252, 251, 236);
    }
    
    .features-text p{
        color: rgb(252, 251, 236);
    }
    
    .features-img{
        width: 100%;
        text-align: center;
    }
    /* メイン　ここまで */
}

/*********************** スマホ ***********************/
@media screen and (max-width: 599px) {
    .pc_on {display: none;}

    /* ヘッダー　ここから */
    #header{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
        gap: 1rem;
        margin-top: 4rem;
    }
    
    .main-img{
        width: 100%;
    }

    .main-img img{
        width: 100%;
    }
    
    .main-title{
        text-align: center;
        margin-bottom: 0.8rem;
    }
    /* ヘッダー　ここまで */

    /* メイン　ここから */
    .mainBody{
        width: 100%;
    }
    
    #introduction{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }

    #introduction p{
       width: 90%;
    }
    
    #introduction h3{
        margin: 1rem;
        letter-spacing: 0rem;
    }

    #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 0;
    }

    .container:nth-child(odd){
        background-image: url(../img/features_bg_sp1.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 2rem;
        width: 80%;
        height: 500px;
    }

    .container:nth-child(even){
        background-image: url(../img/features_bg_sp2.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 2rem;
        width: 80%;
        height: 500px;
    }

    .container:nth-child(4){
        background-image: url(../img/features_bg_sp4.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 2rem;
        width: 80%;
        height: 440px;
    }

    .features-text {
        width: 100%; /* 横いっぱいに */
        font-size: 2rem;
    }

    .features-img {
        display: block;
        margin-top: 0rem;
    }

    .features-img img{
        width: 100%;
        /* max-width: 500px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }
    .features-img .bigger-img{
        width: 90%;
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }

    /* #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 3rem;
    }
    
    .container{
        margin-top: 1rem;
    }

    .container:nth-child(odd){
        background-image: url(../img/features_bg_sp1.png);  
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 480px; 
    }
    
    .container:nth-child(even){
        background-image: url(../img/features_bg_sp2.png);     
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100%;
        height: 480px; 
    } */
    
    .features-text h4{
        font-family: "Zen Kaku Gothic New","Yu Gothic",
        "HiraKakuProN-W3","Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,Osaka,
        "MS UI Gothic","ＭＳ Ｐゴシック","MS PGothic",
        sans-serif;
        margin-bottom: 2rem;
        color: rgb(252, 251, 236);
    }
    
    /* .features-text{
        padding: 2rem;
    }
    
    .features-text p{
        color: rgb(252, 251, 236);
    }
    
    .features-img{
        width: 100%;
        text-align: center;
    }
    
    .features-img img{
        width: 80%;
    }  */
    /* メイン　ここまで */
}

/*********************** iPhone8以下 ***********************/
@media screen and (max-width: 375px) {
    .pc_on {display: none;}

    /* ヘッダー　ここから */
    #header{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
        gap: 1rem;
        margin-top: 4rem;
    }
    
    .main-img{
        width: 100%;
    }

    .main-img img{
        width: 100%;
    }
    
    .main-title{
        text-align: center;
        margin-bottom: 0.8rem;
    }
    /* ヘッダー　ここまで */

    /* メイン　ここから */
    .mainBody{
        width: 100%;
    }
    
    #introduction{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }

    #introduction p{
       width: 90%;
    }
    
    #introduction h3{
        margin: 1rem;
        letter-spacing: 0rem;
    }

    #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 0;
    }

    .container:nth-child(odd){
        background-image: url(../img/features_bg_sp1.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0rem;
        width: 95%;
        height: 500px;
    }

    .container:nth-child(even){
        background-image: url(../img/features_bg_sp2.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0rem;
        width: 95%;
        height: 500px;
    }

    .container:nth-child(4){
        background-image: url(../img/features_bg_sp2.png); 
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 0rem;
        width: 95%;
        height: 500px;
    }

    .features-text {
        width: 90%; /* 横いっぱいに */
        font-size: 2rem;
        position: relative;
        top: 4rem;
        left: 1rem;
        padding: 0rem;
    }

    .features-img {
        display: block;
        margin-top: 1rem;
        position: relative;
        top: 4.5rem;
    }

    .features-img img{
        width: 90%;
        /* max-width: 500px; 画像サイズの上限を設定 */
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }
    .features-img .bigger-img{
        width: 80%;
        height: auto;
        /* border-radius: 10px; 角を少し丸く */
    }
    
    .features-text h4{
        font-family: "Zen Kaku Gothic New","Yu Gothic",
        "HiraKakuProN-W3","Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,Osaka,
        "MS UI Gothic","ＭＳ Ｐゴシック","MS PGothic",
        sans-serif;
        margin-bottom: 1rem;
        color: rgb(252, 251, 236);
    }
    /* メイン　ここまで */
}