@charset "utf-8";

.container{
    font-size: 16px;
}
.one-column{
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.over{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
/*--Medium screens--*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .one-column .wrap{
        padding: 0 30px;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    .container{
        padding-bottom: 0;
    }
}
/*-----------------------------------
h1
-----------------------------------*/
.h1-wrap{
    padding: 0;
    background-color: #113c67;
    background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/main.jpg);
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light;
    background-size: auto, cover;
}
.h1-wrap .over{
    padding: 100px 0;
}
h1{
    margin-bottom: 20px;
    padding-left: 0;
    background-image: none;
    font-size: 2em;
    text-align: center;
}
.h1-wrap p{
    font-weight: bold;
    text-align: center;
    color: #FFF;
}
/*--Large screens--*/
@media print, screen and (min-width: 768px){
    .h1-wrap p{
        margin-bottom: 20px;
        font-size: 1.1em;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    h1{
        font-size: 1.8em;
    }
}
/*-----------------------------------
parts
-----------------------------------*/
section{
    padding: 50px 0;
}
section:nth-of-type(even){
    background-color: #F3F5F7;
}
h2{
    font-size: 1.6em;
    text-align: center;
}
.em{
    padding: 0 2px;
    background-color: rgba(255, 255, 153, 0.8);
    font-weight: bold;
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    h2{
        font-size: 1.3em;
        text-align: center;
        line-height: 1.6;
    }
}
/*-----------------------------------
lead 
-----------------------------------*/
section.lead{
    padding-top: 0;
}
.what{
    border: 1px solid #333;
    border-radius: 5px;
    font-size: 0.8em;
}
.what dt{
    padding: 10px 20px;
    background-color: #333;
    border-radius: 0 0 10px 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    color: #FFF;
}
.lead .what p{
    clear: both;
    margin-bottom: 0;
    text-align: left;
}
.what p img{
    width: 220px;
    height: auto;
}
.what p img.float_right{
    float: right;
}
/*--Large screens--*/
@media print, screen and (min-width: 768px){
    .lead p{
        margin-bottom: 40px;
        font-size: 1.15em;
        text-align: center;
    }
    .what{
        position: relative;
        padding: 70px 30px 30px;
    }
    .what dt{
        position: absolute;
        top:0;
        left: 50%;
        width: 400px;
        margin-left: -200px;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    .lead p{
        margin-bottom: 20px;
    }
    .what{
        padding: 20px;
    }
    .what dt{
        margin: -20px -20px 20px;
        border-radius: 3px 3px 0 0;
    }
    .what p img{
        width: 150px;
    }
}
/*-----------------------------------
merit & feature
-----------------------------------*/
dl.box{
    background-color: #F3F5F7;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    animation-duration: 0.8s;
    animation-fill-mode: both;
    opacity: 0;
}
dl.box:not(:last-child){
    margin-bottom: 25px;
}
section:nth-of-type(even) dl.box{
    background-color: #FFF;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
dl.box dt{
    color: #FFF;
    text-align: center;
    line-height: 1.6;
}
.merit-container dl.box dt{
    background-color: #113c67;
    background-position: center;
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light;
    background-size: auto, cover;
}
.merit-container dl.box.vacant dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-vacant.jpg);}
.merit-container dl.box.such dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-such.jpg);}
.merit-container dl.box.fromone dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-fromone.jpg);}
.merit-container dl.box.shortterm dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-shortterm.jpg);}
.merit-container dl.box.machine dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-machine.jpg);}
.merit-container dl.box.minimum dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-minimum.jpg);}
.merit-container dl.box.contribution dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-contribution.jpg);}
.merit-container dl.box.fixed dt{ background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/merit-fixed.jpg);}

.feature-container dl.box dt{
    background-color: #333;
    background-position: center 82%;
    background-repeat: no-repeat;
    background-size: 50px auto;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
}
.feature-container dl.box.app dt{ background-image: url(/static/image/owner/smartparking/icon_app.svg);background-size: 45px auto;}
.feature-container dl.box.parking dt{ background-image: url(/static/image/owner/smartparking/icon_car.svg);}
.feature-container dl.box.cashless dt{ background-image: url(/static/image/owner/smartparking/icon_card.svg);}

/*--Large screens--*/
@media print, screen and (min-width: 768px){
    .merit-container dl.box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .merit-container dl.box dt{
        border-radius: 5px 0 0 5px;
        font-size: 1.2em;
        flex-basis: 30%;
        vertical-align: middle;
    }
    .merit-container dl.box dt .over{
        padding: 50px 30px;
        border-radius: 5px 0 0 5px;
        font-weight: bold;
    }
    .merit-container dl.box dd{
        flex-basis: 70%;
        padding: 30px;
        text-align: center;
        vertical-align: middle;
    }
    .feature-container{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -30px;
    }
    .feature-container dl.box{
        width: calc((100% - 60px) / 3);
        margin-bottom: 30px;
        padding: 30px;
    }
    .feature-container dl.box:not(:nth-child(3n)){
        margin-right: 30px;
    }
    .feature-container dl.box dt{
        position: relative;
        margin: -30px -30px 30px;
        padding: 20px 30px 75px;
        font-size: 1.1em;
    }
    .feature-container dl.box dt::after{
        position: absolute;
        content: "";
        left: 50%;
        bottom: -7px;
        width: 14px;
        height: 14px;
        margin-left: -7px;
        background-color: #333;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
}
/*--Medium screens--*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .merit-container dl.box dt,
    .feature-container dl.box dt{
        font-size: 1em;
    }
    .merit-container dl.box dt{
        flex-basis: 30%;
        text-align: left;
    }
    .merit-container dl.box dt .over{
        padding: 60px 20px;
    }
    .merit-container dl.box dd{
        flex-basis: 70%;
        padding: 20px;
        text-align: left;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){
    dl.box{
        padding: 20px;
    }
    dl.box:not(:last-child){
        margin-bottom: 20px;
    }
    .merit-container dl.box dt,
    .feature-container dl.box dt{
        margin: -20px -20px 20px;
        border-radius: 3px 3px 0;
        font-size: 1.1em;
    }
    .merit-container dl.box dt .over,
    .feature-container dl.box dt{
        padding: 20px;
        border-radius: 5px 5px 0 0;
        font-weight: bold;
    }
    .feature-container dl.box dt{
        background-position: center 15px;
        background-size: 40px auto;
        padding-top: 60px;
    }
    .feature-container dl.box.app dt{ background-image: url(/static/image/owner/smartparking/icon_app.svg);background-size: 35px auto;}
}

/*-----------------------------------
contact
-----------------------------------*/
section.contact{
    margin-bottom: 0;
    padding: 0;
    background-color: #113c67;
    background-image: url(/static/image/owner/smartparking/dot.png), url(/static/image/owner/smartparking/btm.jpg);
    background-position: center;
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light;
    background-size: auto, cover;
    text-align: center;
}
section.contact .over{
    padding: 80px 0;
}
section.contact h2{
    font-size: 1.2em;
    color: #FFF;
}
.mail_tel a{
    display: block;
    padding: 5px 20px;
    border: 3px solid #FFF;
    border-radius: 50px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-decoration: none;
}
.mail_tel li img{
    width: 24px;
    margin-right: 6px;
    vertical-align: -4px;
}
/*--Large screens only--*/
@media print, screen and (min-width: 1025px){
    .mail_tel{
        display: table;
        width: 830px;
        margin: 0 auto;
    }
    .mail_tel li{
        display: table-cell;
    }
    .mail_tel a{
        width: 400px;
        font-size: 1.2em;
    }
    .mail_tel li:first-child a{
        margin-right: 15px;
    }
    .mail_tel li:last-child a{
        margin-left: 15px;
    }
}
/*--Small~Medium screens--*/
@media only screen and (max-width: 1024px){
    .mail_tel li:first-child{
        margin-bottom: 20px;
    }
}
/*--Small screens--*/
@media only screen and (max-width: 767px){

}
/*-----------------------------------
clear
-----------------------------------*/
.wrap{
    display: block;
    min-height: 1%;
}
.wrap:after{
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}