/* ランキング用画像 */
.rankgazou img {
    width: auto;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
}


/* 投稿一覧を分割してみる */
.home #main {
	padding: 5px;
	border: none;
	background-color: transparent;
}

#main .entry-card {
	background-color: #fff;
	float: left;
	box-sizing: border-box;
	padding: 20px;
	border: 2px solid #d6ac75;
	border-radius: 8px;
	box-shadow: 8px 8px 16px rgba(0,0,0,0.4);
}
.post-meta {
	background-color: #e5ceb1;
}

/* サイドバー */
#sidebar {
	padding: 5px;
	border: none;
	background-color: transparent;
}

#sidebar aside {
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid #603c21;
	box-shadow: 8px 8px 16px rgba(0,0,0,0.4);
}

#sidebar ul {
	padding: 20px 15px;
}

#sidebar h3 {
	background: #603c21;
	color: #fae495;
	border-radius: 8px 8px 0 0;
	font-size: 1.2em;
	margin: 0;
	padding: 10px 15px 8px;
}

@media only screen and (max-width: 740px) {
	#sidebar {
		-webkit-background-size: 20px 20px;
		-moz-background-size: 20px 20px;
		background-size: 20px 20px;
		background-color: #e5ceb1;
		background-image: -webkit-gradient(linear,0 0,100% 0,color-stop(.5,#d2b89a),color-stop(.5,transparent),to(transparent));
		background-image: -moz-linear-gradient(left,#d2b89a 50%,transparent 50%,transparent);
		background-image: -o-linear-gradient(left,#d2b89a 50%,transparent 50%,transparent);
		background-image: linear-gradient(left,#d2b89a 50%,transparent 50%,transparent);
	}
}



/* 背景をドットに */
#container {
	background: #f9f6ed;
	background-image: radial-gradient(#ffffff 20%,transparent 0), radial-gradient(#ffffff 20%,transparent 0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}

/* おすすめポイント枠 */
.maste-box {
  position: relative;
  background-color: #fff;
  background: repeating-linear-gradient(-45deg, #f4efe8, #f4efe8 10px, #f9f6ed 0, #f9f6ed 20px);
  padding: 0px 5px 5px 5px;
	    font-weight: bold;
	margin: 1em;
	border-radius: 10px;
	box-shadow: 5px 5px 13px #454545
}

.maste-tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(186,141,101,.3);
  border-left:4px solid #ba8d65;
  padding: 0.25em 2em;
  color: #000;
  transform: rotate(-3deg);
}

.maste-box p {
  color: #41250c;
  padding: 15px 10px 10px 10px;
}


/* ハートの箇条書き */
ul.kajogaki {
	margin: 1em;
  padding: 0.5px 0;
	list-style-type: none!important;/*ポチ消す*/
}

ul.kajogaki li:before{
    content: "\f004";
    position: relative;
    font-family: FontAwesome;
    margin-right: .5em;
    color: brown; /*アイコン色*/
    font-size: 100%; /*アイコンの大きさ*/
}


/* 見出しを変更 */
.article h2{
	border:0;
color: #fff;/*文字色*/
padding: 1em;/*文字周りの余白*/
line-height: 1.3;/*行高*/
background: #603c21;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.article h2:before {
content: '●';
color: white;
margin-right: 8px;
}


.article h3{
  border:0;
	padding-bottom: .5em;
	border-bottom: 5px solid #895628;
	padding: 2px;
	color: #41250c;
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

.article h3:before{
	font-family: FontAwesome;
  content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #895628; /*アイコン色*/
}

.article h4{
position: relative;
background: #f4e7d7;
box-shadow: 0px 0px 0px 5px #f4e7d7;
border: dashed 2px white;
	border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
padding: 0.4em 0.5em;
color: #41250c;
}

.article h4:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #603c21;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}



/* 引用のカスタマイズ */
blockquote {
    position: relative;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid rgba(96,60,33,.5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: rgba(96,60,33,.5);
    font-size: 30px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 2;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 15px; 
    right: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: rgba(96,60,33,.5);
    font-size: 30px;
    line-height: 1;
}



/* 目次のカスタマイズ */
.toc-title { /* 目次タイトル部分 */
 color:#41250c;
 text-align:center;
 font-size: 1.2em;
 font-weight:bold;
 letter-spacing: 0.3em
 }

.toc li {
 font-size:1em;
 font-weight: bold;
 color:#41250c;
}
.toc a{
 color:#41250c;
 padding:2px 0;/* 列の間隔 */
 display: block;
 text-decoration: none;
 transition-duration: 0.3s /* カーソルが戻る時間 */
}
.toc li a:hover {
 padding-left: 7px; /* カーソル重ねた時に移動する距離 */
 transition-duration: 0.3s /* カーソルが移動する時間 */
}


/* 黒板風　タイトル　1 */
.kokuban-t1 {
 position: relative;
 margin: 2em auto;
 padding: 3.2em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #8b4513; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.kokuban-t1::before,
.kokuban-t1::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-t1::before {
 right: 10px;
 border: solid 3px #ff7fbf; /*チョーク（ピンク）*/
 width: 20px; 
 border-radius: 3px 2px 0 2px;
}
.kokuban-t1::after {
 right: 40px;
 border: solid 3px #fff; /*チョーク（白）*/
 width: 15px; 
 border-radius: 8px 5px 2px 5px;
}
.title-t1 {
 position: absolute;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #ff7fbf; /* タイトル色 */
}








/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/

.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.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	width: 100%;
	border:double #895628;
	background-color: #f4efe8; /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
	background: #fff;
}
.booklink-image a,
.kaerebalink-image a,
.tomarebalink-image a {
	width:100%;
	display:block;
}
.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
	background: #fff;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.booklink-info a,
.kaerebalink-info a,
.tomarebalink-info a {
	text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.booklink-name>a,
.kaerebalink-name>a,
.tomarebalink-name>a {
	border-bottom: 1px solid ;
	font-size:16px;
}
/* powered by */
.booklink-powered-date,
.kaerebalink-powered-date,
.tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.booklink-powered-date a,
.kaerebalink-powered-date a,
.tomarebalink-powered-date a {
	color:#333;
	border-bottom: none ;
}
.booklink-powered-date a:hover,
.kaerebalink-powered-date a:hover,
.tomarebalink-powered-date a:hover {
	color:#333;
	border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
	font-size:12px;
}
.kaerebalink-link1 div img, .booklink-link2 div img, .tomarebalink-link1 div img {
	display:none !important;
}
.booklink-link2 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.booklink-link2>div,
.kaerebalink-link1>div,
.tomarebalink-link1>div {
	float:left;
	width:24%;
	min-width:128px;
	margin:0.5%;
}
/***** ボタンデザインここから ******/
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 0;
	padding:3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border: 2px solid #ff0033;} /* Yahoo!ショッピング */
.kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
.kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a, .booklink-link2 .shoplinkamazon a {
	background:#FF9901;
	border: 2px solid #ff9901;
} /* Amazon */
.kaerebalink-link1 .shoplinkrakuten a, .booklink-link2 .shoplinkrakuten a {
	background: #bf0000;
	border: 2px solid #bf0000;
} /* 楽天 */
.kaerebalink-link1 .shoplinkseven a, .booklink-link2 .shoplinkseven a {
	background:#225496;
	border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/

/***** ボタンデザイン　マウスオーバー時ここから *****/
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover {
	background: #fff;
}
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
.kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a:hover, .booklink-link2 .shoplinkamazon a:hover {
	color:#FF9901; } /* Amazon */
.kaerebalink-link1 .shoplinkrakuten a:hover , .booklink-link2 .shoplinkrakuten a:hover {
	color: #bf0000; } /* 楽天 */
.kaerebalink-link1 .shoplinkseven a:hover, .booklink-link2 .shoplinkseven a:hover {
	color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.booklink-footer {
	clear:both;
}

/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
	.booklink-image,
	.kaerebalink-image,
	.tomarebalink-image {
		width:100%;
		float:none;
	}
	.booklink-link2>div,
	.kaerebalink-link1>div,
	.tomarebalink-link1>div {
		width: 32.33%;
		margin: 0.5%;
	}
	.booklink-info,
	.kaerebalink-info,
	.tomarebalink-info {
	  text-align:center;
	  padding-bottom: 1px;
	}
}

/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
	.booklink-link2>div,
	.kaerebalink-link1>div,
	.tomarebalink-link1>div {
		width: 49%;
		margin: 0.5%;
	}
}