/* ----------------------------------------------------------
    WEBメールログイン画面一覧
------------------------------------------------------------- */

.mailPanelList {
    width: 870px;
    margin: 40px auto;
    padding: 25px;
    border: 20px solid #fcf1f1;
}

.mailPanelList__ttl {
    padding-bottom: 18px;
    margin-bottom: 30px;
    border-bottom: 5px solid #cd0a0d;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.mailPanelList--serviceList { margin-left: 20px; }

.mailPanelList--serviceBlock {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
}
.mailPanelList--serviceBlock:last-child {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 0;
}

.mailPanelList--serviceBlock__ttl {
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.mailPanelBtn__box { margin-top: 10px; }

.mailPanelBtn { display: inline-block; }

.mailPanelBtn a {
    display: block;
    width: 198px;
    height: 38px;
    margin-right: 10px;
    border: 1px solid #cd0a0d;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 38px;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.mailPanelBtn a:hover { background: #fcf1f1; }

.mailPanelOthers {
    display: flex;
    align-items: center;
    line-height: 1.2;
}
.mailPanelOthersItem {
    display:flex;
    align-items: center;
    margin:0 0 0 25px;
}
.mailPanelOthersItem:first-child {
    margin: 0;
}
.mailPanelOthersItem__caption {
    font-size:15px;
    font-weight:bold;
    color:#333;
}
.mailPanelOthersItem__links {
    display:flex;
    align-items: center;
    margin:0 0 0 20px;
}
.mailPanelOthersItem__links li{
    display:flex;
    align-items: center;
    margin:0 0 0 10px;
    font-size:12px;
}
.mailPanelOthersItem__links li:first-child{
    margin:0;
}
.mailPanelOthersItem__links li > a{
    background:url(../../images/mail_panel_list/ico_link_arrow.png) no-repeat 0 3px;
    padding:0 0 0 12px;
    color:#333;
}

.serviceSiteLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -2px auto 50px;
    font-size: 14px;
}
.serviceSiteLinks li {
    margin:2px 20px;
}
.serviceSiteLinks a {
    color:#333;
}
.serviceSiteLinks i {
    color:#999;
}
/* SP - Tab */
@media only screen and (max-width: 960px) {
    .mailPanelList {
        width: 88%;
        margin: 10px auto;
        padding: 2.5%;
        border-width:25px;
    }

    .mailPanelBtn { margin-bottom: 2%; }

    .mailPanelOthers {
        display:block;
    }
    .mailPanelOthersItem {
        display:block;
        margin:15px 0 0;
    }
    .mailPanelOthersItem__links {
        display:flex;
        align-items: center;
        margin:10px 0 0;
    }
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .mailPanelList {
        width: 84%;
        margin: 5px auto;
        padding: 3%;
        border-width:15px;
    }

    .mailPanelList--serviceList { margin-left: 3%; }

    .mailPanelList__ttl img {
        width: 58%;
        max-width:236px;
        margin-bottom: 5px;
    }
    .mailPanelList__ttl {
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 100%;
    }

    .mailPanelList--serviceBlock__ttl img {
        width: 60%;
        margin-bottom: 5px;
    }
    .mailPanelList--serviceBlock:nth-child(4) .mailPanelList--serviceBlock__ttl img {
        width: 40%;
    }
    .mailPanelList--serviceBlock__ttl {
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 90%;
    }

    .mailPanelList--serviceBlock {
        padding-bottom: 3%;
        margin-bottom: 3%;
        border-bottom: 1px solid #ccc;
    }
    .mailPanelList--serviceBlock:last-child {
        padding-bottom: 0.1%;
        margin-bottom: 0.1%;
        border-bottom: 0;
    }

    .mailPanelBtn__box { margin-top: 0.5%; }

    .mailPanelBtn { margin-bottom: 2%; }

    .serviceSiteLinks {
        display: block;
        margin: 5px 0 40px;
        text-align:center;
    }

    .serviceSiteLinks li {
        margin:10px 0;
    }
}