@charset "UTF-8";
/* CSS Document toilet*/
#intro{
    background: url(../images/mv_bg.png) top center no-repeat;
}

#intro .commonparts_box {
    /*width: 1100px;*/
    width: 960px;
    height: 500px;
    margin-bottom: 85px;
}
#intro .commonparts_box .point01_hover .hover_num{
    bottom: 115px;
    left: 582px;
}
#intro .commonparts_box .point01_hover .hover_cont{
    bottom:71px;
    left:436px;
    display: none;
}
#intro .commonparts_box .point02_hover .hover_num{
    bottom: 145px;
    left: 655px;
}
#intro .commonparts_box .point02_hover .hover_cont{
    top: 245px;
    left: 597px;
    display: none;
}
#intro .commonparts_box .point01_hover .hover_num:hover,
#intro .commonparts_box .point02_hover .hover_num:hover {
    transform: translate(-2px, 2px);
}

#intro .commonparts_box .point03_hover .hover_num{
    top: 35px;
    left: 384px;
}
#intro .commonparts_box .point03_hover .hover_cont{
    top:75px;
    left:340px;
    display: none;
}

@media screen and (max-width: 767px) {
    #intro{
        background: url(../images/mv_bg.png) top center no-repeat;
        background-size: cover;
    }
    #intro .commonparts_box {
        width: 100%;
        height: 44vw;
    }
    #intro .commonparts_box .point01_hover .hover_num{
        bottom: 8.125vw;
        left: 58.625vw;
    }

    #intro .commonparts_box .point02_hover .hover_num{
        bottom: 10vw;
        left: 65.83333vw;
    }

    #intro .commonparts_box .point03_hover .hover_num{
        top: 2.3125vw;
        left: 38.958333vw;
    }

    #intro .commonparts_box .point04_hover .hover_num{
        top: 21vw;
        left: 46.5vw;
    }

    #intro .commonparts_box .hover_num:hover + .hover_cont{
        display: block;
    }

    #intro .commonparts_box .toilet_bt{
        width: 16.75vw;
        position: absolute;
        top: 37.39583vw;
        left: 70.291vw;
    }
    #intro .commonparts_box .toilet_bt_new{
        width: 16.75vw;
        position: absolute;
        top: 37.39583vw;
        left: 70.291vw;
    }
    #intro .commonparts_box .icon_batc {
        padding-top: 41vw !important;
    }
}

#intro .intro_ann{
    width: 887px;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: right;
    margin: auto;
}
@media screen and (max-width: 767px) {
    #intro .intro_ann {
        width: 100%;
    }
}

.stack_caution {
    font-size: 1.4rem!important;
}
.spt3{
    margin: 0 33px 0 0;
}
.spt3:nth-child(3n){
    margin: 0 ;
}
#sec01 {
/*    margin-bottom: 49px;*/
}
#sec01.commonparts_sec{
}
#sec01 .box_list {
}
#sec01 .box_list#sec01 .box_list#sec01 .split2 {
}

#sec02 {
    width: 100%;
    background: #ebf5fb;
    padding: 30px 0 40px;

}
#sec02 .commonparts_box{
}
#sec02 h3 {
    font-size: 22px;
    font-weight: bold;
    color: #004fa2;
    text-align: center;
    margin-bottom: 22px;
}
#sec02 .stack {
    width: 885px;
    padding: 0;
    margin: 0 auto;
}
#sec02 .stack:after{
    content: "";
    display: block;
    clear: both;
}
#sec02 li.spt3-tr {
    width: 277px;
    margin-right: 27px;
    float: left;
}
#sec02 li.spt3-tr:last-child{
    margin-right: 0;
}
#sec02 .tr_img {
    margin-bottom: 12px;
}
#sec02 img {
}
#sec02 .tar_txt {
    font-size: 1.8rem;
    text-align: center;
}
#sec02 .ann {
    font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
.spt3{
    margin: 0 1% 0 0!important;
}
    #sec01 {
        /*    margin-bottom: 49px;*/
    }
    #sec01.commonparts_sec{
    }
    #sec01 .box_list {
    }
    #sec01 .box_list#sec01 .box_list#sec01 .split2 {
    }

    #sec02 {
        width: 100%;
        background: #ebf5fb;
        padding: 6vw 0 4vw;

    }
    #sec02 .commonparts_box{
    }
    #sec02 h3 {
        font-size: 5vw;
        font-weight: bold;
        color: #004fa2;
        text-align: center;
        margin-bottom: 6vw;
    }
    #sec02 .stack {
        width: 92%;
        padding: 0;
        margin: 0 auto;
    }
    #sec02 .stack:after{
        content: "";
        display: block;
        clear: both;
    }
    #sec02 li.spt3-tr {
        width: 48%;
        margin-right: 4%;
        margin-bottom: 6vw;
        float: left;
    }
    #sec02 li.spt3-tr:nth-child(2n){
        margin-right: 0;
    }
    #sec02 li.spt3-tr:last-child{
        margin-right: 4%;
    }
    #sec02 .tr_img {
        margin-bottom: 1vw;
    }
    #sec02 img {
        margin-bottom: 0;
    }
    #sec02 .tar_txt {
        font-size: 3vw;
        text-align: center;
    }
}
#sec03 {
    width: 100%;
}
#sec03.commonparts_sec{
    margin-bottom: 126px;
}
#sec03 .commonparts_box {
    padding-top: 58px !important;
}
#sec03 .btnBox {
}
#sec03 .btn_link {
}
@media screen and (max-width: 767px) {
    #sec03 {
        width: 100%;
    }
    #sec03.commonparts_sec{
        margin-bottom: 12vw;
    }
    #sec03 .commonparts_box {
        padding-top: 6vw !important;
    }
    #sec03 .btnBox {
    }
    #sec03 .btn_link {
        width: 92%;
        padding: 10px 0px !important;
        text-align: center;
        font-size: 4vw !important;
    }
}