@charset "utf-8";

.security-box {
    padding-bottom: 100px;
}

.secmain {
    width: 700px;
    max-width: 90%;
    margin: 60px auto 0;
}

.sec-flex {
    flex-wrap: wrap;
    justify-content: space-between;
}

.sec-flex .itemttl {
    margin-top: 0;
}

.sec-flex .system {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 56%;
}

.sec-flex .system .text {
    width: 76%;
}

.sec-flex .system .image {
    width: 20%;
}

.sec-flex .camera {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 40%;
}

.sec-flex .camera .text {
    width: 40%;
}

.sec-flex .camera .image {
    width: 56%;
}

.visitor-flex {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.visitor-flex .main {
    width: 66%;
}

.visitor-flex .interphone {
    width: 30%;
}

.visitor-flex .interphone .secu04 {
    width: 70%;
    margin: 20px auto 0;
}

.door-flex {
    flex-wrap: wrap;
    justify-content: space-between;
}

.door-flex .main {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 62%;
}

.door-flex .main .itemttl {
    margin-top: 0;
}

.door-flex .main .image {
    width: 26%;
}

.door-flex .main .door-item {
    width: 70%;
}

.door-flex .main .door-item .item:nth-of-type(n+2) {
    margin-top: 20px;
}

.door-flex .main .door-item .cylinder {
    flex-wrap: wrap;
    justify-content: space-between;
}

.door-flex .main .door-item .cylinder p {
    width: 70%;
}

.door-flex .main .door-item .cylinder .image {
    width: 26%;
}

.door-flex .main .door-item .bolt {
    flex-wrap: wrap;
    justify-content: space-between;
}

.door-flex .main .door-item .bolt p {
    width: 70%;
}

.door-flex .main .door-item .bolt .image {
    width: 26%;
}

.door-flex .sub {
    width: 34%;
}

.door-flex .sub .itemttl {
    margin-top: 0;
}

.door-flex .sub .item {
    flex-wrap: wrap;
    justify-content: space-between;
}

.door-flex .sub .item:nth-of-type(n+2) {
    margin-top: 20px;
}

.door-flex .sub .item .image {
    width: 48%;
}

.door-flex .sub .item .text {
    width: 48%;
}

.equipment-box .enttl {
    width: 100%;
    font-size: 22px;
    margin-bottom: 20px;
}

.sidewall-flex {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.sidewall-flex .room {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 76%;
}

.sidewall-flex .room figure {
    width: 49%;
}


.sidewall-flex .room figure:nth-of-type(1) {
    margin-right: 2%;
}

.sidewall-flex .zumen {
    width: 20%;
}

.subitem-flex {
    flex-wrap: wrap;
    justify-content: space-between;
}

.subitem-flex .enttl {
    width: 100%;
}

.subitem-flex .item {
    width: 48%;
}

.balcony-flex {
    flex-wrap: wrap;
    justify-content: space-between;
}

.balcony-flex .main {
    width: 56%;
}

.balcony-flex .sub {
    width: 40%;
}

.balcony-flex .sub .itemttl {
       margin-top: 0;
}

.balcony-flex .sub .seat {
        flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}

.balcony-flex .sub .seat .text {
    width: 48%;
}


.balcony-flex .sub .seat .image {
    width: 48%;
}

.elevator {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.elevator .itemttl {
    margin-top: 0;
}

.elevator .text {
    width: 56%;
}

.elevator .text .item {
    margin-top: 30px;
}

.elevator .image {
    width: 36%;
}

.luggage .itemttl {
margin-top: 0;
}

.luggage .comfor04 {
    width: 80%;
    margin: 20px 0 0 0 ;
}

.monitor-flex {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.monitor-flex .image {
    width: 40%;
}

.monitor-flex .image figure:nth-of-type(2) {
    margin-top: 5px;
}

.monitor-flex .text {
    width: 54%;
}

.monitor-flex .text .itemtxt {
    margin-top: 0;
    padding: 20px 0;
    border-top: 1px solid #ccc;
}

.monitor-flex .text .itemtxt:last-of-type {
    border-bottom: 1px solid #ccc;
}

.entertainment .itemttl {
    margin-top: 0;
}

.entertainment .item {
        flex-wrap: wrap;
    justify-content: space-between;
}

.entertainment .item:nth-of-type(n+2) {
    margin-top: 30px;
}

.entertainment .item .text {
    width: 60%;
}

.entertainment .item .image {
    width: 32%;
}

.internet .itemttl {
    margin-top: 0;
}

.net-flex {
       flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.net-flex .image {
    width: 42%;
}

.net-flex .text {
    width: 50%;
}

.net-flex .text .comfor09 {
    width: 70%;
    margin: 0 0 20px 0;
}

.life {
     flex-wrap: wrap;
    justify-content: space-between; 
}

.life .itemttl {
    margin-top: 0;
}

.life .text {
    width: 47%;
}

.life .image {
    width: 47%;
}

/*---------------------------
tab
---------------------------*/
@media only screen and (max-width: 1024px) {}

/*---------------------------
sp
---------------------------*/
@media only screen and (max-width: 820px) {
    .secmain {
        max-width: 100%;
        margin: 30px auto 0;
    }

    .sec-flex .system {
        width: 100%;
    }
    
    .sec-flex .system .text {
        width: 100%;
    }

    .sec-flex .system .image {
        width: 50%;
        margin: 10px auto 0;
    }

    .sec-flex .camera {
        width: 100%;
    }

    .sec-flex .camera .text {
        width: 100%;
    }

     .sec-flex .camera .image {
        width: 80%;
        margin: 20px auto 0;
    }

    .visitor-flex .main {
        width: 100%;
    }

    .visitor-flex .interphone {
        width: 100%;
        margin-top: 40px;
    }

     .visitor-flex .js-scrollable {
        overflow-y: hidden!important;
     }

       .visitor-flex .js-scrollable img {
        width: 700px;
        max-width: initial;
       }


       .door-flex .main {
        width: 100%;
       }

       .door-flex .main .door-item {
        width: 100%;
       }

       .door-flex .main .image {
        width: 80%;
        margin: 0 auto 20px;
       }

       .door-flex .sub {
        width: 100%;
        margin-top: 20px;
       }

       .door-flex .main .door-item .cylinder p{
        width: 100%;
       }

         .door-flex .main .door-item .cylinder .image {
            width: 60%;
            margin: 10px auto 0;
         }

         .door-flex .main .door-item .bolt p {
            width: 100%;
         }

          .door-flex .main .door-item .bolt .image {
            width: 100%;
            margin: 10px auto 0;
         }

         .equipment-box .enttl {
            font-size: 22px;
            margin-bottom: 10px;
         }

         .sidewall-flex .room {
            width: 100%;
         }

         .sidewall-flex .room figure {
    width: 100%;
} 

   .sidewall-flex .room figure:nth-of-type(1) {
    margin: 0 0 10px 0;
   }

          .sidewall-flex .zumen {
            width: 80%;
            margin: 20px auto 0;
         }

         .balcony-flex .main {
            width: 100%;
         }

         .balcony-flex .sub {
            width: 100%;
         }

         .balcony-flex .sub .itemttl {
            margin-top: 10px;
         }

         .balcony-flex .sub .seat .itemttl {
            margin-top: 0;
         }

         .elevator .text {
            width: 100%;
         }

          .elevator .image {
            width: 80%;
            margin: 20px auto 0;
         }

         .elevator .text .item {
            margin-top: 20px;
         }

         .luggage .comfor04 {
            width: 100%;
         }

         .monitor-flex .image {
            width: 100%;
            display: flex;
            justify-content: space-between;
         }

          .monitor-flex .image figure {
            width: 48%;
          }

           .monitor-flex .image figure:nth-of-type(2) {
            margin: 0;
           }

           .monitor-flex .text {
            width: 100%;
            margin-top: 20px;
           }

           .monitor-flex .text .itemtxt {
            padding: 10px 0;
           }

           .entertainment .item .text {
            width: 100%;
           }

           .entertainment .item .image {
            width: 100%;
            margin-top: 20px;
           }

           .net-flex {
            margin-top: 10px;
           }

           .net-flex .image {
            width: 100%;
           }

           .net-flex .text {
            width: 100%;
            margin-top: 20px;
           }

           .net-flex .text .comfor09 {
            margin: 0 auto 20px;
           }
           .life .text {
            width: 100%;
           }

           .life .image {
            width: 100%;
            margin-top: 20px;
           }
}