/***
 *** RESPONSIVE CSS Document
 ***
 ***/

@media (max-width: 480px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    h1 {
        font-size: 1.15em;
    }
    #wraper {
        width: 100%;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        display: inline-block;
        float: left;
        width: 5%;
        overflow: hidden;
        margin: 3.7% 1% 0 3.1%;
        padding: 0;
    }
    #logo-area {
        width: 50%;
        margin: 2.5% 0 2.5% 2%;
    }
    #service-area {
        display: none;
    }
    .header-deco-line {
        display: none;
    }
    #main-nav-area {
        display: none;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title {
        margin-top: 12%;;
    }
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer {
        padding: 0 5% 8%;
    }
        #footer ul.ul-corp-info-area {
            float: none;
            display: block;
            width: 100%;
        }
            #footer li.li-corp-contact-text {
                font-size: 0.875em;
            }
        #footer ul.ul-corp-logo-area {
            float: none;
            display: block;
            width: 60%;
            margin: 6% 0 3%;
        }

       
    /*** BEGIN HOME CSS SETTING ***/
    #main-visual-banner img {
        width: 100%;
    }
    #main-service-item-area {
        padding: 1% 0;
        border: none;
    }
        #main-service-item-area ul.ul-service-item {
            clear: both;
            float: none;
            width: 100%;
            margin: 6% auto 0%;
        }
            .service-item-image {
                width: 96%;
                height: auto;
                background: none;
            }
                .service-item-image img {
                    width: 100%;
                }
            .service-item-text {
                margin: 0% 0 12%;
            }
        #main-service-item-area ul.ul-service-video {
            clear: both;
            float: none;
            width: 96%;
            margin: 2% auto 3%;
        }
    #corp-intro-area {
        margin: 2% auto 0;
        padding: 0;
    }
    
    /*** BEGIN ABOUT CSS SETTING ***/  
    #left-side-column {
        display: none;
    }
    #right-side-column {
        width: 100%;
    }
    #main-content-area {
        font-size: 0.938em;
        margin: 0 auto;
        padding: 6% 6.5% 8%;
        border: none;
    }
        #main-content-area img {
            width: 100%;
            margin: 0 auto;
        }
    
    /*** BEGIN FAQ CSS SETTING ***/
    .faq-deco-arrow {
        width: 12% !important;
    }
    
}

@media (max-width: 375px) {
    
   /*** BEGIN HOME CSS SETTING ***/
    .service-item-text {
        font-size: 0.875em;
    }
        
}

@media (max-width: 360px) {
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        margin-top: 4.5%;
    }
    #logo-area {
        width: 55%;
    }

}

@media (max-width: 320px) {

    /*** BEGIN HOME CSS SETTING ***/
    .service-item-text {
        font-size: 0.75em;
    }
    
}