.tx-warn {
    color: red;
    font-size: 1.3em
}

.page_caption {
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.section {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 10em;
}

/****************************************
/ 級選択
****************************************/
.optional-nav {
    padding: 1em;
    text-align: right;
}

.optional-btn {
    width: 80px;
    padding: 1.5px 2px;
    border-radius: 2px;
    font-size: 1.4em;
    font-weight: bold;
    background: #fff;
}

.optional-btn:hover {
    opacity: .6;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000000b5;
    z-index: 999999;
}

.overlay-content {
    position: relative;
    max-width: 900px;
    width: 80%;
    margin: 0 auto;
    margin-top: 10em;
    padding: 6em 8em;
    border: 3px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
}

.overlay-content>p {
    margin-bottom: 3em;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

.navigation-grade {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    max-width: 500px;
    margin: 0 auto;
    justify-content: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
}

.btn-grade {
    display: block;
    min-width: 100px;
    height: 34px;
    margin-right: 4px;
    margin-bottom: 1em;
    border-bottom: 3px solid;
    border-radius: 3px;
    line-height: 34px;
    text-align: center;
    font-size: 1.4em;
    color: #fff;
    font-weight: bold;
}

.btn-grade:hover {
    border-bottom: 0;
    height: 34px;
}

.close-btn {
    position: absolute;
    top: -8px;
    right: 8px;
    background: transparent;
    font-size: 4em;
    font-weight: bold;
}

.close-btn:hover {
    opacity: .6;
}

@media screen and (max-width: 768px) {
    .overlay-content>p {
        margin-bottom: 1.5em;
    }

    .overlay-content {
        padding: 3em;
    }

    .btn-grade {
        margin: .2em;
    }
}

/****************************************
/ 書籍・特典情報
****************************************/
.section-card {
    margin-bottom: 5em;
}

.item-card {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    padding: 0 6em;
    width: 900px;
    margin: 0 auto;
}

/* 書影・アイコン */
.thumbnail {
    margin-right: 3em;
}

.item-card:not(:last-child) {
    margin-bottom: 10em;
}

.thumbnail>div>img {
    width: 190px;
}

/* .area-option_btn {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: space-around;
    margin-top: 1.2em;
} */

/* .option-icon{
  display: block;
  width: 50px;
} */
.option-icon {
    display: flex;
}

.movie-icon {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 24%;
}

.typing-icon {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 34%;
}

.other-icon {
    margin-bottom: 10px;
    margin-right: 10px;
    width: 30%;
}

.moshi-icon {
    width: 31.1%;
    margin-bottom: 10px;
    margin-right: 10px;
}

@media screen and (max-width: 1023px) and (min-width: 767px) {
    .movie-icon {
        width: 18%;
    }

    .typing-icon {
        width: 25%;
    }

    .other-icon {
        width: 23%;
    }

    .moshi-icon {
        width: 24%;
    }
}

@media screen and (max-width: 767px) {
    .movie-icon {
        width: 35%;
    }

    .typing-icon {
        width: 51%;
    }

    .other-icon {
        width: 46%;
    }

    .moshi-icon {
        width: 47%;
    }
}

/* 書籍情報 */
.product-information {
    width: 600px;
    position: relative;
}

.product-title {
    padding-bottom: .5em;
    margin-bottom: .8em;
    border-bottom: 1px solid #eaeaea;
    font-size: 2.7em;
    font-weight: bold;
    line-height: 1.5;
}

/* 特典内容 */
.tokuten-description {
    margin-bottom: 2em;
    font-size: 1.6em;
    line-height: 1.5;
}

.tokuten-description .label {
    display: block;
    padding-bottom: .4em;
    font-weight: bold;
    font-size: 1.2em;
}

.tokuten-detail {
    margin-bottom: .8em;
}

.tokuten-detail dt {
    font-weight: bold;
}

.tokuten-detail dd {
    padding-left: 1em;
}

.list-n-slash {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-wrap: wrap;
}

.list-n-slash>li {
    margin-right: 1.5em;
    position: relative;
}

.list-n-slash>li:not(:last-child):after {
    content: '/';
    position: absolute;
    right: -11px;
    top: 0px;
    font-size: 1.1em;
    color: #ababab;
}

/* 使ってみるボタン */
.product-information .area-btn {
    text-align: center;
    /* position: absolute; */
    bottom: 0;
    width: 100%;
}

.btn {
    display: block;
    font-size: 2em;
    max-width: 300px;
    margin: 15px auto;
    /* margin: 0 auto; */
    padding: 10px;
    border-radius: 5px;
    border-bottom: 4px solid #999;
    background: #ccc;
    color: #fff;
    font-weight: bold;
}

.btn.inactive {
    border-bottom: 4px solid #999 !important;
    background: #ccc !important;
    color: #fff !important;
    pointer-events: none;
}

.product-information .area-btn .btn {
    margin-bottom: .6em;
}

.btn:hover {
    padding: 12px;
    border: 1px;
}

@media screen and (max-width: 768px) {
    .item-card {
        display: block;
        width: 100%;
        padding: 0;
    }

    .thumbnail {
        margin-right: 3em;
        width: 190px;
        margin: 0 auto;
        margin-bottom: 2em;
    }

    .product-information {
        width: 100%;
        padding-bottom: 60px;
    }
}


/****************************************
/ トップへ戻る
****************************************/
#totop {
    position: fixed;
    bottom: 2em;
    right: 2em;
    width: 60px;
    height: 60px;
    z-index: 99999;
}

#totop img {
    width: 100%;
}

#totop>a:hover {
    opacity: .6;
}

.site-footer {
    margin: 50px 0;
}

.fotter-link {
    font-size: 1.3em;
    width: 70%;
    margin: 6% auto 3%;
    text-align: center;
}

.fotter-link a {
    color: #000;
}

.caution {
    font-size: 1.2em;
    width: 75%;
    margin: 0 auto;
}

.copyright {
    font-size: 1.2em;
    padding: 20px;
    font-family: Helvetica, sans-serif;
}

.text-center {
    text-align: center;
}