@charset "utf-8";
/* 
CSS Document 
株式会社メルコテクノ横浜
https://www.mt-yokohama.com/
*/


/* html, body { margin: 0; padding: 0; } */

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

mv

---------------------------- */
.mv_area {
    position: relative;
    overflow: hidden;
}

.mv_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.mv_area .gs21-PageTitle {
    /*background: rgba(3, 25, 59, 0.6);*/
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.40),
        0 3px 8px rgba(0, 0, 0, 0.30);
    max-width: 660px;
    margin: 20px auto 130px;
    padding: 16px 24px;
}

/* 会社案内PDFボタン */
.button:has(#mv-btn-pdf) {
    position: absolute;
    top: 400px;
    right: 0;
    left: 0;
    z-index: 10000;
    text-align: center;
}

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

キッティングサービス 事例紹介
businesses/service03/case

---------------------------- */
#sec-service03-case .cmp-image__image {
    max-width: 360px;
}


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

contact

---------------------------- */
#contact-col1 {}

#contact-col2 {}

#contact-col1__tel,
#contact-col1__mail,
#contact-col2__tel,
#contact-col2__mail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

#sec-contact .cmp-container div.image,
#sec-contact .cmp-container .button {
    margin: 0;
}

#contact-col1__tel-icon,
#contact-col1__mail-icon,
#contact-col2__tel-icon,
#contact-col2__mail-icon {
    width: 60px;
    height: auto;
}

#contact-col1 .cmp-text p,
#contact-col2 .cmp-text p {
    margin: 0;
}

#contact-col1__tel-text-num p,
#contact-col2__tel-text-num p {
    font-size: 2rem;
    font-weight: 700;
    color: #595959;
    margin-top: 0;
}

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

xf-contact

---------------------------- */
#sec-xf-contact {
    margin: 100px 0 0 0;
    border-top: 3px solid #595959;
    padding: 4% 4% 0 4%;
}

#sec-xf-contact .cmp-title__text {
    text-align: center;
    color: #595959;
    margin: 40px 0;
}


#xf-contact__tel-no p {
    font-size: 2rem;
    font-weight: 700;
    color: #595959;
    margin-top: 0;
}

a#xf-contact__form01 {
    background: #c40001;
    border-radius: 4px;
    padding: 8px 60px 10px 60px;
}

a#xf-contact__form01:hover {
    opacity: 0.8;
}

a#xf-contact__form01 .cmp-button__text {
    color: #ffffff;
    font-weight: 600;
}

.cmp-experiencefragment--basic-footer .container.responsivegrid.cmp-container--2col.aem-GridColumn.aem-GridColumn--default--12 {
    margin-top: 0;
}

#xf-contact__col2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
}

#xf-contact__col2 .image {
    width: 100px;
    margin-top: 0;
}

#xf-contact__col2 .image+.container {
    width: calc(100% - 100px);
}

#xf-contact__col2>.container>.cmp-container {
    display: flex;
    gap: 18px;
}

#xf-contact__col2 .image+.container .cmp-container .text p {
    margin-top: 0;
}


#sec-contact {
    max-width: 1000px;
    margin: 0 auto;
    width: 90%;
}


/* ----------------------------
PC
---------------------------- */
@media screen and (min-width: 1920px) {
    .gs21-PageTitleUnit__Inner {
        padding: 140px 40px;
    }

    .button:has(#mv-btn-pdf) {
        top: 480px;
    }
}

@media screen and (max-width: 1920px) {
    .gs21-PageTitleUnit__Inner {
        padding: 140px 40px;
    }

    .button:has(#mv-btn-pdf) {
        top: 480px;
    }
}

@media screen and (max-width: 1280px) {
    .gs21-PageTitleUnit__Inner {
        padding: 80px 40px;
    }

    .button:has(#mv-btn-pdf) {
        top: 400px;
    }
}



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

mv 767px  MV（スマホ） 

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

    .mv_area {
        min-height: clamp(320px, 46vh, 520px);
    }

    .mv_area img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 12%;
    }

    .mv_area .gs21-PageTitle {
        font-size: 1.2rem;
        line-height: 1.5;
        margin: 24px 16px 36px;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.46),
            0 4px 10px rgba(0, 0, 0, 0.32);
    }

    .mv_area .gs21-PageTitle br {
        display: none;
    }

    .button:has(#mv-btn-pdf) {
        top: 380px;
    }

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

contact 767px

---------------------------- */
    #contact-col1 .cmp-text p,
    #contact-col2 .cmp-text p {
        margin: 10px 0 0 0;
    }

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

xf-contact 767px

---------------------------- */
    a#xf-contact__form01 {
        padding: 8px 0 10px 0;
        width: 100%;
        text-align: center;
    }

    #xf-contact__col2 {
        justify-content: start;
        gap: 30px;
    }

    #xf-contact__col2 .image+.container .cmp-container .text p {
        margin-top: 9px;
    }

    #xf-contact__col2 .image {
        margin-top: 15px;
        width: 50px;
    }

    #xf-contact__col2 .image+.container {
        width: calc(100% - 50px);
    }

}

/* end767 */


@media screen and (max-width: 480px) {
    /* ----------------------------
mv 480px  MV（スマホ） 
---------------------------- */

    .mv_area .gs21-PageTitle {
        margin: 0 0 48px;
        padding: 0 16px;
    }

    .button:has(#mv-btn-pdf) {
        top: 360px;
    }

    /* ----------------------------
contact 480px （スマホ） 
---------------------------- */
    #contact-col1__tel-icon,
    #contact-col1__mail-icon,
    #contact-col2__tel-icon,
    #contact-col2__mail-icon {
        width: 50px;
    }
}