body{background-color: #f2f2f2;}
.container{width: 100%;padding: 0;}
a:hover{text-decoration:none;color: #ffc700;}

html, body {
    position: relative;
    height: 100%;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}
.swiper-container .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
}



.swiper-container .swiper-slide > .background {
    width: 100%;
    height: 100%;
    display: inline-block;
    box-sizing: content-box;
    background-repeat: no-repeat;
    background-size: cover;
}

.title ,.sub-title, .sub-title-list{color: #595959; font-weight: 700; float: left; }


.row{ height: 80%; width: 100%; }


.btn-back{border-radius:20pt;background: #ffffff;color: #595959;border: 1px solid #d1d1d1; margin-right: 20px;}
.btn-upload{border-radius:20pt;background: #ffc700;color: #595959; border: 1px solid #ffc700; }
.value { float: left; color: #595959; font-weight: 100;}

@media (min-width: 375px){

    .swiper-container {
        height: auto;
    }

    .row{padding-top: 80px;}

    .title{font-size: 26px; width: 100%;}

    .sub-title ,.sub-title-list, .value {font-size: 16px;  margin-top: 10px;}

    .value { margin-right: 40px; }
    .btn-back,.btn-upload{padding: 10px 45px;font-size: 16px;}
    .btn-back {float: left;}
    .btn-upload {float: right;}
    .details{ font-size: 14px; padding: 5% 8% 5% 8% ; margin: 2% 0;font-weight: 100;}

}


@media (min-width: 768px){

    .row{  padding-top:84px;  }

    .title{font-size: 28px;}

    .sub-title ,.sub-title-list, .value {font-size: 18px; margin-top: 20px;}

    .value { margin-right: 60px; }
    .btn-back,.btn-upload{padding: 10px 45px;font-size: 16px; float: right;}
    .details{ font-size: 16px; padding: 5% 8% 5% 8% ; margin: 2% 0;font-weight: 100;}

}


@media (min-width: 1000px){
    /*固定液使用*/
    body { margin-left: -15px; margin-right: -15px;overflow-x: hidden; }


    .row{  padding-top:100px;  }

    .title{font-size: 28px;}

    .sub-title ,.sub-title-list, .value {font-size: 18px; margin-top: 20px;}

    .value { margin-right: 60px; }
    .btn-back,.btn-upload{padding: 10px 45px;font-size: 16px; float: right;}
    .details{ font-size: 16px; padding: 5% 8% 5% 8% ; margin: 2% 0;font-weight: 100;}

}



@media (min-width: 1400px){

    body { margin-left: auto; margin-right: auto;overflow-x: auto; }

    .row{  padding-top:110px;  }

    .title{font-size: 28px;}

    .sub-title ,.sub-title-list, .value {font-size: 18px;}

    .value { margin-right: 60px; }
    .btn-back,.btn-upload{padding: 10px 45px;font-size: 16px;}
    .details{ font-size: 16px; padding: 5% 8% 5% 8% ; margin: 2% 0;font-weight: 100;}
}