@charset "utf-8";

/* CSS Document */
@media screen and (max-device-width: 1024px) {

    .tokushu .pc {
        display: none;
    }

    .tokushu .sp {
        display: inline-block;
    }

    .sns-wrap .fb-like,
    .sns-wrap .fb-share-button {
        top: -3.5px;
    }

    .sns_wrap iframe {
        margin-top: -3px !important
    }

    .tokushu {
        width: 100%;
    }

    .tokushu h3 {
        font-size: 2.5em !important;
        background: none !important;
    }

    .tokushu h4 {
        font-size: 1.5em !important;
    }

    .tokushu p,
    .tokushu li,
    .tokushu table,
    .tokushu dl {
        font-size: 1.45em !important;
    }

    .tokushu .contents {
        width: calc(100% - 20px);
    }

    .tokushu .contents .box .yellow {
        font-size: 1.3em !important;
    }

    .tokushu strong {
        font-size: 1.2em !important;
    }

    .tokushu p span strong {
        font-size: 1.2em !important;
    }

    .tokushu table th {
        width: 18%;
        font-weight: bold;
    }

    .tokushu table th span:after {
        padding-left: 5px !important;
        box-sizing: border-box;
        font-family: "Font Awesome 5 Free";
        content: "\f0da";
    }

    .tokushu table td {
        width: 82%;
    }

    .tokushu .guide .comment {
        width: 98%;
    }

    .tokushu .guide .comment img {
        width: 100%;
    }

    /*商品のご購入はこちら*/
    .tokushu .column_1 {
        width: 99%;
        padding: 5px !important;
    }

    .tokushu .column_1 .fin {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 30%;
    }

    .tokushu .column_1 .fin img {
        width: 100%;
        min-height: 0%;
        height: auto;
    }

    .tokushu .column_1 h5 {
        font-size: 1.5em !important;
        padding: 3px 10px !important;
    }

    .tokushu h5 + p {
        font-size: 1.5em !important;
        font-weight: bold;
        border: none !important;
    }

    .tokushu .column_1 img {
        width: 35%;
        height: auto;
    }

    .tokushu .column_1 > span {
        width: 100%;
        height: auto;
    }

    .tokushu .column_1 p {
        width: 60% !important;
        display: inline-block;
        font-size: 1.3em !important;
        line-height: 1.1 !important;
        margin-left: 5px !important;
        margin-bottom: 5px !important;
    }

    .tokushu .column_1 p:nth-of-type(2) {
        display: inline-block;
        width: 35% !important;
        font-size: 1.15em !important;
        color: #fff;
        text-align: center;
        padding: 3px 0 2px !important;
    }

    .tokushu .column_1 dl {
        width: 60%;
        font-size: 1.4em !important;
        text-align: right;
    }

    .tokushu .column_1 dl dd span {
        font-size: 1.3em !important;
    }

    .tokushu .live a:link {
        font-size: 1.3em !important;
    }

    .tokushu .itemList p {
        width: 100%;
    }

    .tokushu .itemList .fin {
        width: 100%;
        margin: 10px auto 2px !important;
        padding: 8px 10px 10px !important;
        font-size: 1.6em;
        font-size: 16px !important;
        font-weight: 900;
        border: 3px solid #aaa;
    }
    
    .tokushu .itemList a:link {
        position: relative;
        display: block;
        width: 100%;
        margin: 10px auto 2px !important;
        padding: 8px 10px 10px !important;
        background-color: #fff;
        border-radius: 10px;
        color: #000 !important;
        border: 3px solid #000 !important;
        font-size: 1.6em;
        font-size: 16px !important;
        font-weight: 900;
        text-decoration: none !important;
        line-height: 1.2 !important;
        box-sizing: border-box;
    }

    .tokushu .live a:link {
        width: 100%;
        box-sizing: border-box;
    }

    /*footer*/
    .tokushu .footer {
        font-size: 1.3em !important;
    }
}

@media screen and (max-device-width: 480px) {

    .tokushu .item p a {
        /*font-size: 1.4em !important;*/
        font-size: 12px !important;

    }

    .tokushu .item p span {
        /*font-size: 0.7em !important;*/
        font-size: 10px !important;
    }

    .tokushu .item dl {
        display: block;
        line-height: 1.3;
        margin: 0 !important;
        margin-top: auto !important;
        /*font-size: 1.6em !important;*/
        font-size: 14px !important;
    }

    .tokushu .item dt {
        display: inline-block;
        /*font-size: 1.3em !important;*/
        font-size: 12px !important;
    }

    .tokushu .item dd {
        /*font-size: 0.7em !important;*/
        font-size: 12px !important;
        font-weight: normal;
        display: inline-block;

    }

    .tokushu .item dd span {
        margin-left: 3px !important;
        /*font-size: 1.6em !important;*/
        font-size: 14px !important;
    }


    .tokushu .item:nth-child(2n+1):last-child {
        margin-right: 50% !important;
    }

    .tokushu .item .end:before {
        content: url("../images/end_sp.png");
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 2;
    }

    /* -- dl/dt/dd -- */
    .tokushu dl.product {
        width: 100%;
    }

    .tokushu dl.product dt {
        margin: 0 !important;
        padding: 0 3px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    .tokushu dl.product dd {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    .tokushu dl.product dd strong {
        font-size: 13px !important;
    }

}