@charset "UTF-8";

.onlineShop {
    /*background-color: #efefef;*/  /*20191101 + docomo update */
}

#onlineShopContainer {
    text-align: center;
}

.onlineTitle {
    position: relative;
    display: block;
}

.onlineTitle h2 {
    padding-top: 49px;
    padding-bottom: 10px;
    font-size: 30px;
}

.goToDetail {
    position: absolute;
    top: 60%;
    right: -1%;
}
.menuIcon {
    width: 25%;
    height: 142px;
    margin: 40px 10px;
    vertical-align: top;
    background-color: white;
}
.annotationMerit {
    margin-bottom: 86px;
}

.menuIcon div {
    position: relative;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    -ms-flex-pack: center;
    -ms-flex-align: center;
}

.menuIcon div a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.menuIcon div .appealMain {
    position: absolute;
    top: 12%;  /*20191101 + docomo update */
    right: 0;
    left: 0;
    margin: auto;
    font-weight: bold;
    font-size: 120%;  /*20191101 + docomo update */
    line-height: 1.3em;    /*20191101 + docomo update */
}

.menuIcon div .appealRed {
    bottom: 35%;
    max-width: 70%;
}

.menuIcon div .appealRed br {
    display: none;
}

.menuIcon div img {
    position: absolute;
    top: 42%; /*20191101 + docomo update */
    right: 0;
    left: 0;
    max-width: 85%;
    max-height: 50%;  /*20191101 + docomo update */
    margin: auto;
}

.appealList {
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: auto;
    /*padding-bottom: 90px;*/ /*20191101 + docomo update */
    vertical-align: middle;
    -ms-flex-pack: center;
    -ms-flex-align: center;
}
@media screen and (min-width: 960px) and (max-width: 1200px) {
    .menuIcon div .appealRed {
        font-size: 1.15vw;
    }
}

@media screen and (max-width: 1000px) {
    .menuIcon div .appealMain {
        font-size: 110%;  /*20191101 + docomo update */
    }
}

@media screen and (max-width: 959px) {
    .onlineTitle h2 {
        padding-bottom: calc(64px - 20px);
    }
    .goToDetail {
        top: 50%;
    }
    .appealList {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: calc(80px - 45px + 5px);  /*20191101 + docomo update */
    }

    .menuIcon {
        width: calc((80% - 20px) / 2);
        margin: 10px;  /*20191101 + docomo update */
    }
}
@media screen and (min-width: 768px) and (max-width: 876px) {
    .goToDetail {
        top: 70%;
        left: 80%;
    }
    .goToDetail a {
        min-width: 100px;
    }
}
@media screen and (max-width: 767px) {
    .onlineTitle {
        margin-left: 4%;
    }

    .onlineTitle h2 {
        padding: 2%;
        padding-top: 33px;
        padding-bottom: calc(40px - 5px);
        font-size: 19px;
        line-height: 1.5em;
        text-align: left;
    }
    .appealList {
        padding-bottom: calc(40px - 5px + 5px);  /*20191101 + docomo update */
    }
    .goToDetail {
        top: 40%;
        left: 73%;
    }

    #endSpMenu {
        margin-bottom: 20%;
    }

    .menuIcon {
        width: calc((89% - 20px) / 2);
        height: 130px;  /*20191101 + docomo update */
        margin: 5px 15px;
    }
    .menuIcon div .appealRed {
        max-width: 70%;
        font-weight: bold;
        line-height: 1.3em;
    }
    .menuIcon div .appealRed::before,
    .menuIcon div .appealRed::after {
        width: 2px;
    }
    .annotationMerit {
        margin-bottom: 45px;
    }
}

@media screen and (max-width: 630px) {
    .onlineShop {
        padding: 0 4%;
    }
}
@media screen and (max-width: 600px) {
    .onlineTitle h2 {
        padding-bottom: calc(40px - 5px);
    }
    .appealList {
        padding-bottom: calc(40px - 5px + 5px);  /*20191101 + docomo update */
    }
    .goToDetail {
        left: 70%;
    }
    .menuIcon {
        height: 150px;  /*20191101 + docomo update */
        margin: 5px 10px;
    }
    .onlineShop {
        padding: 0 3%;
    }
}
@media screen and (max-width: 570px) {
    .menuIcon {
        height: 175px;
    }
    .onlineShop {
        padding: 0 2%;
    }
}
@media screen and (max-width: 550px) {
    .appealList li:nth-child(odd) {
        margin-left: 0;
    }
    .appealList li:nth-child(even) {
        margin-right: 0;
    }
    .menuIcon div .appealMain {
        font-size: 120%;  /*20191101 + docomo update */
    }
    .menuIcon div .appealRed {
        font-size: 95%;
    }
    .menuIcon div .appealRed br {
        display: block;
    }
}

@media screen and (max-width: 520px) {
    .menuIcon {
        height: 170px;
    }
    .onlineShop {
        padding: 0 1%;
    }
    .goToDetail {
        right: 0;
    }
}

@media screen and (max-width: 500px) {
    .onlineShop {
        padding: 0;
    }
}

@media screen and (max-width: 470px) {
    .goToDetail {
        left: 65%;
    }

    .menuIcon {
        height: 150px;  /*20191101 + docomo update */
    }

    .menuIcon div .appealMain {
        font-size: 110%;  /*20191101 + docomo update */
    }

    .menuIcon div .appealRed {
        font-size: 90%;
    }
}

@media screen and (max-width: 430px) {
    .goToDetail {
        top: 80%;
        left: 60%;
    }
    .menuIcon {
        height: 160px;
    }
}

@media screen and (max-width: 400px) {
    .menuIcon {
        height: 150px;
    }
    .menuIcon div .appealMain {
        font-size: 100%;  /*20191101 + docomo update */
    }
    .menuIcon div .appealRed {
        font-size: 80%;
    }
}
@media screen and (max-width: 360px) {
    .goToDetail {
        left: 57%;
    }
    .menuIcon {
        height: 140px;
        margin: 8px;
        margin-bottom: 3px;
    }
    .menuIcon div .appealRed {
        font-size: 75%;
    }
}
@media screen and (max-width: 340px) {
    .onlineTitle h2 {
        padding-bottom: calc(40px - 5px);
    }
    .appealList {
        padding-bottom: calc(40px - 5px + 5px);  /*20191101 + docomo update */
    }
    .menuIcon {
        height: 130px;
        margin: 5px 7px;
    }
    .menuIcon div .appealRed {
        font-size: 70%;
    }
    .menuIcon div .appealMain {
        font-size: 90%;  /*20191101 + docomo update */
    }
}
@media screen and (max-width: 335px) {
    .goToDetail {
        left: 52%;
    }
}

/*== ↓firefox用↓ ==*/
@-moz-document url-prefix() {
    .menuIcon div {
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    }

    @media screen and (max-width: 340px) {
        .goToDetail {
            left: 51%;
        }
        .menuIcon div .appealMain {
            font-size: 83%;
        }
    }
}
/*== ↑firefox用↑ ==*/

/*== ↓Edge用↓ ==*/
@supports (-ms-ime-align: auto) {
    @media screen and (max-width: 600px) {
        .appealList {
            width: 90%;
        }
    }
    @media screen and (max-width: 420px) {
        .menuIcon div .appealRed {
            font-size: 80%;
        }
    }
    @media screen and (max-width: 350px) {
        .menuIcon div .appealRed {
            font-size: 70%;
        }
        .menuIcon div .appealMain {
            font-size: 80%;
        }
    }
}
/*== ↑Edge用↑ ==*/