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

詳しくは上のヘルプアイコンをクリックしてください。
*/
/* カエレバ,ヨメレバ カスタマイズ */
.kaerebalink-link1 img, .booklink-link2 img{display:none;}

.kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 15px;
  overflow: hidden; /* float解除用 */
  margin-bottom: 20px;
}
.kaerebalink-image, .booklink-image {
  margin-right: 18px;
  float:left;
}
.kaerebalink-image img, .booklink-image img {
  box-shadow: 0 0 1px 1px #ccc;
}
.kaerebalink-info, .booklink-info {
  font-size: 14px;
  margin: 0;
  overflow: hidden; /* float解除用 */
}
.kaerebalink-name, .booklink-name {
  font-size: 18px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 12px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 16px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
  float: left;
  width: 30%;
  text-align: center;
  margin: 15px 1% 0 auto;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background: -moz-linear-gradient(top,#FFF 0%,#EEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
/* ショップリンクの文字色をAMPページと統一 */
/* 以下 Simplicityのamp.cssから拝借 */
.shoplinkamazon a {
  color: #ff9901;
}
.shoplinkrakuten a {
  color: #c20004;
}
.shoplinkkindle a {
  color: #007dcd;
}
.shoplinkyahoo a {
  color: #7b0099;
  font-size:14px;
}
/* 楽天koboはamp.cssになかった */
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkrakukobo a {
  text-decoration: none;
  display: block;
}
.shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover {
  opacity: 0.7;
  background: -moz-linear-gradient(top,#FFF 80%,#EEE);
}
@media only screen and (max-width: 580px) {
  .kaerebalink-box, .booklink-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 1px 1px 3px 1px #ddd;
  padding: 10px 15px;
}
.kaerebalink-image, .booklink-image {
  margin: 0 0 10px 0;
  float: none;
}
.kaerebalink-image img, .booklink-image img {
  margin: 0 auto;
}
.kaerebalink-info, .booklink-info {
  font-size: 12px;
  margin: 0;
}
.kaerebalink-name, .booklink-name {
  font-size: 15px;
  margin-top: 2px;
}
.kaerebalink-detail, .booklink-detail {
  margin-top: 5px;
}
.kaerebalink-powered-date, .booklink-powered-date {
  font-size: 11px;
  margin-top: 5px;
}
.kaerebalink-link1, .booklink-link2 {
  font-size: 14px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkyahoo, .shoplinkkindle, .shoplinkrakukobo {
  float: none;
  width: 96%;
  margin: 10px 0; 
  padding: 5px 0;
}
}/* カエレバ,ヨメレバ カスタマイズ END */


/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 60px;
height: 60px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #aaa;
}
.balloon-text-left {
border-color: #aaa;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}
/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
border-radius: 30px;
}
.think .balloon-text-right:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
left: -12px;
}
.think .balloon-text-right:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
left: -19px;
}
.think .balloon-text-left:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
right: -12px;
}
.think .balloon-text-left:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
right: -19px;
}