@charset "utf-8";

/* **************************************************

Name: dslosaka_responsive.css

Create: 2020.10.19
Update: 2020.10.19
Update: 2024.12.19

***************************************************** */


/* Base Riset
=========================================================================================== */

/* Common
=========================================================================================== */
@media screen and (max-width: 767px) {
    .sponly {
        display: block;
    }
}

/* Floating Menu
=========================================================================================== */
@media screen and (max-width: 767px) {
    #floatingCover { display: none; }
}

/* Contents Area
=========================================================================================== */
@media screen and (max-width: 994px) {
    .over965Only { display: none; }
}
@media screen and (max-width: 767px) {
    .dslTitle {
        padding-left: 0!important;
        font-size: 24px;
        letter-spacing: 3px;
    }
    .dslSubTitle {
        margin-top: 5px;
        padding-left: 0!important;
        font-size: 12px;
        color: #e60027;
    }
    .bgWrap {
        background-size: cover;
    
    }
}


/*  FACILITY CORNER Area
=========================================================================================== */
@media screen and (max-width: 767px) {
    .facilityTitleArea {
        padding: 0 0 20px 0;
    }
    .btnNum01 {
        top: 6.462745098%;
        right: 3.155440414%;
        width: 30%;
    }
    .btnNum02 {
        top: 36.403225806%;
        right: 3.155440414%;
        width: 30%;
    }
    .lineNum02 {
        top: 30.954838709%;
        right: 27.479274611%;
    }
    .btnNum03 {
        top: 58.032258064%;
        right: 3.155440414%;
        width: 30%;
    }
    .lineNum04 {
        left: 21.860103626%;
    }
    .btnNum04 {
        top: 85.322580645%;
        left: 3.25388601%;
        width: 30.134715025%;
    }
    .btnNum05 {
        top: 58.225806451%;
        left: 3.25388601%;
        width: 30%;
    }

    .facilityImg {
        display: block;
    }
    .facilityImg li {
        width: 100%;   
    }
    .facilityImg li + li {
        margin-block-start: 10px;
    }
    .facilityImg li figure {
        padding: 0;
        margin: 0;
    }
    .facilityImg li figure figcaption {
        text-align: center;
        padding: 5px 0 0;
    }
    .facilityImg li img {
        aspect-ratio: 193/99;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

}


/*  ACCESS Area
=========================================================================================== */
@media screen and (max-width: 767px) {
    #accessArea {
        background: url("/-/media/digitalization/dslosaka/image/bg_access.png") bottom center no-repeat;
        background-size: 100% auto;
    }
    .accessBoxCover { padding: 0; }
    .accessBox {
        margin-top: 15px;
        display: block;
    }
    .accessBox .col1 {
        display: block;
        width: 100%;
    }
    .accessBox .col2 {
        display: block;
        width: 100%;
        padding: 30px 15px;
    }
}

/* v-showroom AREA
=========================================================================================== */
@media screen and (max-width: 767px) {
    #v-showroom {
        padding: 50px 0 0 0;
    }
}

/*  CONTACT Area
=========================================================================================== */
@media screen and (max-width: 767px) {
    #contactArea {
        padding: 50px 0 30px 0;
    }
    .contactBox {
        padding: 20px 15px;
        box-sizing: border-box;
    }
    .contactBtn {
        line-height: 1.4;
        padding: 15px 40px 15px 65px;
    }
    .contactBtn::before {
        left: 20px;
        width: 30px;
        height: 19px;
        margin-top: -10px;
        background-size: 30px 19px;
    }
    .contactBtn::after {
        right: 20px;
        width: 7px;
        height: 13px;
        margin-top: -7px;
        background-size: 7px 13px;
    }
    .contactBtn:hover::after {
        right: 12px;
    }
}