/*---------------------------------
    LapTop Styling
---------------------------------*/

/*　　アウトライン　
*{
    outline: 2px rgb(7, 239, 7) solid;
} */

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


    h2 {
        font-size: 1.5rem;
    }


    h4 {
        font-size: 1rem;
    }

    p {
        font-size: 0.9rem
    }

    /* ---------------------------------
            Reusable Classes
    ---------------------------------- */

    .container {
        width: 80%;
        margin: 0 auto;
    }

    .top-tittle {
        width: 60vw;
        padding-top: 150px;
    }

    .top-tittle h3 {
        margin-bottom: 50px;
    }

    /* ---------------------------------
            Header
    ---------------------------------- */

    .header {
        padding: 5px 30px;
    }

    .header-logo img {
        width: 150px;
    }

    .header-nav-menu a {
        margin-left: 15px;
    }

    /*-----------------------------------
            Main - Hero 
    ------------------------------------*/

    .main-hero {
        padding-top: 80px;
        margin-bottom: 50px;
    }

    .main-hero-logo img {
        width: 200px;
    }

    /* -----------------------------------------
            Main - Works 
    ------------------------------------------*/

    .main-works {
        margin: 50px 0;
    }

    .main-works-about img {
        margin-bottom: 10px;
    }

    .main-works-button {
        margin-bottom: 50px;
    }

    /* -----------------------------------------
        Main - News 
    ------------------------------------------*/

    .main-news {
        padding: 50px 0;
    }

    .main-news-button {
        font-size: 1.2rem;
        padding: 5px 20px 5px 5px;
    }
    
    .main-news-button :after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 0 8px 12px;
        border-color: transparent transparent transparent #ffffff;
        position: absolute;
        top: 12%;
        left: 65px;
    }

    /* -----------------------------------------
            Main - ACCESS
    ------------------------------------------*/

    .main-access {
        padding: 50px 0;
    }

    .main-access-img iframe {
        height: 100%;
    }

    .main-access-address h5 {
        letter-spacing: 1px;
        line-height: 1.5rem;
    }

    .main-access-address li {
        font-size: 1.3vmin;
        letter-spacing: 1.5px;
        line-height: 1.8rem;
    }

    /* -----------------------------------------
                Footer
    ------------------------------------------*/

    .footer-info {
        padding: 30px 30px 30px 30px;
    }

    .footer-info-logo img {
        width: 150px;
    }
    
    .footer-info-nav-menu a {
        margin-left: 15px;
    }

    /* -----------------------------------------
        COMPANY - STYLING
    ------------------------------------------*/

    .company-top img {
        width: 170px;
        padding-bottom: 10px;
    }

    .company-top h1, h3 {
        padding-bottom: 10px;
    }

    .company-table {
        flex-wrap: wrap;
    }

    .company-profile1, .company-profile2 {
        width: 100%;
    }

    .company-table td:nth-of-type(1) {
        width: 20%;
    }
    
    .company-profile2 {
        margin-bottom: 100px;
    }

    /* -----------------------------------------
        WORKS - STYLING
    ------------------------------------------*/

    .works-top h1, h3 {
        padding-bottom: 10px;
    }

    .works-tittle {
        margin-bottom: 50px;
    }

    .works-items {
        gap: 20px;
        margin-bottom: 80px;
    }

    /* -----------------------------------------
        TOP MESSAGE - STYLING
    ------------------------------------------*/

    .tm-message {
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    .tm-text {
        width: 80%;
    }

    .tm-photo {
        width: 35%;
        margin-bottom: 20px;
    }

    .tm-message {
        padding-bottom: 60px;
    }

    /* -----------------------------------------
            CONTACT - STYLING
    ------------------------------------------*/

    .contact-form p {
        margin-bottom: 20px;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    .contact-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
    }
    
    .contact-must::after {
        text-align: left;
        margin-left: 20px;
    }
}