@charset "utf-8";

img{
    width: auto;
    max-width: 100%;
}

.sp{
    display: none;
}

.inner{
    width: 1040px;
    margin: 0 auto;
    text-align: center;
}

.main_mv img{
    width: 100%;
}

.read{
    padding: 83px 0 60px;
}

.readbox{
    padding-bottom: 100px;
}

.question{
    background: url("../images/bk.png")no-repeat;
    background-position: center;
}

.if{
    width: 100%;
    background: url("../images/bk02.png")no-repeat;
    background-position: center;
}

.bluebox{
    background: #16dae5;
}

.yellowbox{
    background: #fff9e5;
}

.readyellow{
    padding: 83px 0 60px;
}

.o-footer{
    padding-top: 0;
}

@media screen and (max-width: 1200px){
    .inner{
        width: 100%;
    }
} 

@media screen and (max-width: 1040px){
    .inner{
        padding: 0 20px;
    }
    
    .readyellow{
         padding: 83px 20px 60px;
    }

}

@media screen and (max-width: 767px) {

    .pc{
        display: none;
    }

    .sp{
        display: block;
    }
    
    .readsp{
        padding: 80px 0 90px;
    }
    
    .readboxsp{
        padding-bottom: 123px;
    }
    
    .readyellow{
         padding: 40px 20px 50px;
    }
    
    .sp_change{
        margin: 50px 0  100px;
        background: #FFFFFF;
    }
    
}

@media screen and (max-width: 500px){
    .readsp{
        padding: 40px 0 45px;
    }
    
    .readboxsp{
        padding-bottom: 60px;
    }
    
    .readyellow{
         padding: 20px 10px 25px;
    }
}