/* ------------------------------------------------------------------------------
    Global Style
-------------------------------------------------------------------------------*/
a.btn:hover {
    opacity: 0.8;
    transition: all  0.3s ease;
}


/* ------------------------------------------------------------------------------
    Jumbotron
-------------------------------------------------------------------------------*/
#jumbotron {
    padding: 13% 0;
}
.jumbotron {
    background: url(../images/05_system/sp/asset-system01_hero_sp.jpg) #f7f8f8;
    background-size: cover;
}
#jumbotron h1 {
    color: #a62125;
}


/* ------------------------------------------------------------------------------
    Main
-------------------------------------------------------------------------------*/
/* -System---------------------------------------------------------------------*/
#system table {
    width: 100%;
    margin-bottom: 3.2rem;
    vertical-align: middle;
    line-height: 3.2rem;
}
#system th {
    width: 20%;
    border: solid 2px #fff;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
    background: #3e3a39;
    color: #fff;
}
#system th.mac-th {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
}
#system td {
    width: 30%;
    padding: 0 2%;
    vertical-align: middle;
    border: solid 2px #fff;
    background: #f7f8f8;
}
#system td.td-padding {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
#system img {
    width: 20%;
    max-width: 44px;
    background: #3e3a39;
    color: #fff;
}
#system p.top-p {
    margin-bottom: 1.6rem;
}
#system a.red {
    color: #a62125;
}
#system a:hover {
    color: #880d11;
}
#system .fa-square {
    margin-right: 0.5rem;
}

/* -Note-----------------------------------------------------------------------*/
#note {
    margin-bottom: 70px;
}


/* ******************************************************************************
    Media Query
********************************************************************************/
/*　画面サイズが768pxからここを読み込む　*/
@media (min-width:768px) {

    #header .btn {
        background: #fff;
        color: #a62125 !important;
    }


/* ------------------------------------------------------------------------------
    Jumbotron
-------------------------------------------------------------------------------*/
    #jumbotron {
        padding: 14.5% 0;
    }
    .jumbotron {
        background: url(../images/05_system/pc/asset-system01_hero_pc.jpg);
        background-size: cover;
    }

}