/*
ここに独自の CSS を追加することができます。

詳しくは上のヘルプアイコンをクリックしてください。
*/

.booklink-box, .kaerebalink-box{
    background-color: #fff;
    border: solid 1px #ccc;
    border-radius: 2px;
    font-size: small;
    margin: 10px auto;
    overflow: hidden;
    padding: 10px;
    width: 90%;
}

.booklink-image img, .kaerebalink-image img{
    display: block;
    margin: 0px auto;
    text-align: center;
}

.booklink-info, .kaerebalink-info{
    line-height: 120%;
    margin: 0px auto;
    overflow: hidden;
    text-align: center;
}

.booklink-name, .kaerebalink-name{
    font-size: 15px;
    line-height: 1.2em;
    margin: 0px auto 5px auto;
}

.booklink-powered-date, .kaerebalink-powered-date{
    font-size: 8pt;
    line-height: 120%;
    margin: 10px 0px;
    text-align: right;
}

.booklink-detail, .kaerebalink-detail{
    font-size: 8pt;
    margin-bottom: 3px;
}

.booklink-link2, .kaerebalink-link1{
    margin: 3px auto;
    text-align: left;
    width: 90%;
}

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a,  .shoplinktoshokan a{
    background-position: 0 0;
    background-size: auto 200%;
    display: inline-block;
    font-weight: 800;
    font-size: 12px;
    margin: 5px auto;
    overflow: hidden;
    padding: 10px 0px;
    text-decoration: none;
    text-align: center;
    transition: .3s;
    width: 49%;
}
    
.shoplinkamazon a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,153,0,0.7) 50%);
    border: 1px solid #ff9900;
    color: #ff9900;
}
.shoplinkrakuten a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(191,0,0,0.7) 50%);
    border: 1px solid #bf0000;
    color: #bf0000;
}
.shoplinkkindle a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(26,141,204,0.7) 50%);
    border: 1px solid #1a8dcc;
    color: #1a8dcc;	
}
.shoplinkrakukobo a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(213,0,0,0.7) 50%);
    border: 1px solid #d50000;
    color: #d50000;
}
.shoplinkyahoo a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,0,51,0.7) 50%);
    border: 1px solid #ff0033;
    color: #ff0033;
    font-size: 10px;
} 
.shoplinkseven a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,101,1,0.7) 50%);
    border: 1px solid #ff6501;
    color: #ff6501;
}
.shoplinkbellemaison a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(132,190,36,0.7) 50%);
    border: 1px solid #84be24;
    color: #84be24;
} 
.shoplinkcecile a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(141,18,75,0.7) 50%);
    border: 1px solid #8d124b;
    color: #8d124b;
} 
.shoplinkkakakucom a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(5,29,147,0.7) 50%);
    border: 1px solid #051D93;
    color: #051D93;
} 
.shoplinkbk1 a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(7,134,203,0.7) 50%);
    border: 1px solid #0786cb;
    color: #0786cb;
}
.shoplinkehon a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,102,0.7) 50%);
    border: 1px solid #000066;
    color: #000066;
}
.shoplinkkino a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,62,146,0.7) 50%);
    border: 1px solid #003e92;
    color: #003e92;
}
.shoplinktoshokan a{
    background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(33,33,33,0.7) 50%);
    border: 1px solid #212121;
    color: #212121;
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkbellemaison a:hover, .shoplinkcecile a:hover, .shoplinkkakakucom a:hover, .shoplinkbk1 a:hover, .shoplinkehon a:hover, .shoplinkkino a:hover,  .shoplinktoshokan a:hover{
    background-position: 0 100%;
    color: #fff;
}
 
.booklink-footer{
    clear: both;
    height: 0px;
}

@media all and (min-width: 481px) {
    .booklink-image, .kaerebalink-image{
        float: left;
        margin: 0 10px 0 0;
    }

    .booklink-name, .kaerebalink-name{
        padding-left: 5px;
        text-align: left;
    }

    .booklink-detail, .kaerebalink-detail{
        padding-left: 5px;
        text-align: left;
    }

    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
        display: inline;
    }
}

@media all and (max-width: 480px) {
    .booklink-image, .kaerebalink-image{
        float: none;
        margin-bottom: 15px;
    }

    .booklink-name, .kaerebalink-name{
        text-align: center;
    }

    .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinktoshokan{
        display: inline;
        float: none;
    }
}