/*=================================================================================
カエレバ・ヨメレバ・トマレバ (WING)Affinger5用カスタマイズ（光る＆押した感じ）
=================================================================================*/
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba a {
transition: 0.3s ;
/* テキストリンクカラー */
color:#4682B4;
}
.cstmreba a:hover {
/* テキストリンクカラー(マウスオーバー時) */
color:#ff1744;
}
/*全体のボックス設定 */
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
width: 100%;
/* 全体の背景カラー */
background-color: #FFF;
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像 */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
/* サムネイル背景カラー */
background: #Fafafa;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
width:100%;
display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
margin:0 ;
padding: 0;
text-align:center;
background: #F1F8E9;}
.cstmreba .booklink-image a:hover,
.cstmreba .kaerebalink-image a:hover,
.cstmreba .tomarebalink-image a:hover {
opacity: 0.7;
}
/* 著者・住所情報配置 */
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
overflow:hidden;
line-height:170%;
color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
text-decoration: none;
}
/* 本・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
border-bottom: 1px solid ;
font-size:16px;
font-weight: bold;
}
/* タイトル下の余白最小 */
.cstmreba .kaerebalink-name p,
.cstmreba .booklink-name p,
.cstmreba .tomarebalink-name p {
margin: 0;
}
/* powered by （非表示）*/
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
font-size:0px;
line-height:0%;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
float:left;
width:48%;
min-width:128px;
margin:0.5%;
}
/***** ボタンデザイン ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
position:relative;
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
margin: 1px 1px;
padding:3% 0.5%;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
line-height: 180%;
color: #fff;
box-shadow: 0px 4px 0 #FAFAFA;
transition: 0.2s all ease 0s;
}
.cstmreba .shoplinkamazon :after,
.cstmreba .shoplinkrakuten :after,
.cstmreba .shoplinkjalan :after,
.cstmreba .shoplinkjtb :after,
.cstmreba .shoplinkknt :after,
.cstmreba .shoplinkikyu :after,
.cstmreba .shoplinkrurubu :after,
.cstmreba .shoplinkyahoo :after,
.cstmreba .shoplinkbellemaison :after,
.cstmreba .shoplinkcecile :after,
.cstmreba .shoplinkkakakucom :after,
.cstmreba .shoplinkkindle :after,
.cstmreba .shoplinkrakukobo :after,
.cstmreba .shoplinkbk1 :after,
.cstmreba .shoplinkehon :after,
.cstmreba .shoplinkkino :after,
.cstmreba .shoplinktoshokan :after,
.cstmreba .shoplinkseven :after{
content:'';
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* トマレバ */
/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #ff1744; border: 2px solid #ff1744; overflow:hidden}
/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #FB8C00; border: 2px solid #FB8C00; overflow:hidden}
/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #7E57C2; border: 2px solid #7E57C2; overflow:hidden}
/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #A1887F; border: 2px solid #A1887F; overflow:hidden }
/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #e53935; border: 2px solid #e53935; overflow:hidden }
/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #7CB342; border: 2px solid #7CB342; overflow:hidden }
/* カエレバ */
/* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#a1fb5d; border:1px solid #b6ff80; letter-spacing:normal; overflow:hidden }
/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#00ACC1 ; border: 2px solid #00ACC1; overflow:hidden }
/* セシール */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 価格コム */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#7CB342; border: 2px solid #7CB342; overflow:hidden }
/* ヨメレバ */
/* Kindle */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#7E57C2; border: 2px solid #7E57C2; overflow:hidden }
/* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000; overflow:hidden }
/* honto */
.cstmreba .booklink-link2 .shoplinkbk1 a { background:#00ACC1; border: 2px solid #00ACC1; overflow:hidden }
/* ehon */
.cstmreba .booklink-link2 .shoplinkehon a { background:#F9A825; border: 2px solid #F9A825; overflow:hidden }
/* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkkino a { background:#e53935; border: 2px solid #e53935; overflow:hidden }
/* 図書館 */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#546E7A; border: 2px solid #546E7A; overflow:hidden }
/* カエレバ・ヨメレバ共通 */
/* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background:#FFD54F;
border: 1px solid #FFEB3B; overflow:hidden
}
/* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #fb5d5d;
border: 1px solid #fa7878; overflow:hidden
}
/* 7net */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
background:#225496;
border: 2px solid #225496; overflow:hidden
}
/***** ボタンデザイン　マウスオーバー時 *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
box-shadow: none;
transform: translate3d(0, 3px, 0);
}
.cstmreba .booklink-footer {
clear:both;
}
/***** 解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 49%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
text-align:center;
padding-bottom: 1px;
}
}
/***** 解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
width: 98%;
margin: 0.5%;
}
}