@charset "utf-8";
/* CSS Document */


/*-----------------------------------------

Last update:    2020-1-29

---------------------------------------*/

/*=============================
pg_title
=============================*/

/*--index--*/
#index #pg_title{
    background:url(../../service/img/main.jpg) #e8f3fb no-repeat center 50%;
    background-size:cover;
}

/*--cosme--*/
#cosme #pg_title{
    background:url(../../service/img/main_cosme.jpg) #fff no-repeat center 50%;
    background-size:cover;
}

/*--detergent--*/
#detergent #pg_title{
    background:url(../../service/img/main_detergent.jpg) #e1e5ee no-repeat center 50%;
    background-size:cover;
}

/*--material--*/
#material #pg_title{
    background:url(../../service/img/main_material.jpg) #d1e6f2 no-repeat center 50%;
    background-size:cover;
}




/*=============================
snavi
=============================*/
#snavi li{
    width:calc( ( 100% - 0.7em * 4 ) / 4 );
    margin:0 0.34em 0.7em;
}

#snavi li a{
    padding:0.7em 0;
}


@media screen and (max-width:480px){
    #snavi li{
        width:calc( ( 100% - 0.5em * 2 ) / 2 );
        margin:0 0.24em 0.5em;
    }
}





/*=============================
index
=============================*/
#index #mainarea .left_box p{
    padding-right:1em;
}


@media screen and (max-width:480px){
    #index #mainarea .right_box img{
        margin-bottom:1em;
    }
    #index #mainarea .left_box p{
        padding-right:0em;
    }
}




/*=============================
cosme
detergent
material
=============================*/
/*--lead--*/

#lead_img_block li{
    width:49.8%;
    display:inline-block;
    margin:0 auto;
    
}

#lead_img_block02 ul{
    width:70%;
    margin:0 auto;
}
#lead_img_block02 li{
    width:100%;
    display:inline-block;
}

@media screen and (max-width:480px){
    #lead_img_block li{
        width:100%;
        display:block;
        
    }
    #lead_img_block02 ul{
        width:100%;
    }
}



/*--flow_area--*/


#flow_area img{
    max-width:630px;
    margin:0 auto;
}

#flow_area h2{
    text-align:center;
    font-size:160%;
    font-weight:bolder;
    margin-bottom:1em;
}


@media screen and (max-width:768px){
    #flow_area img{
        width:80%;
    }
}

@media screen and (max-width:480px){
    #flow_area img{
        width:100%;
    }
    #flow_area h2{
        font-size:130%;
    }
}