/*
カスタム CSS 機能へようこそ。

使い方についてはこちらをご覧ください
(英語ドキュメンテーション)。http://wp.me/PEmnE-Bt
*/
.shareHtmlAll {
	clear: both;
	width: 75%;
	height: auto;
	margin: 1em 0 1em 2em;
	box-shadow: 0 1px 2px rgba(100,100,100,0.3)inset;
	border: 1px solid #DADADA;
	border-top: 1px solid #757575;
	border-radius: 4px;
	position: relative;
	zoom: 1;
}

.shareHtmlAll-img {
	float: right;
}

.shareHtmlAll a {
	color: #333;
}

.shareHtmlAll a:hover {
	background: #F7F7F7;
}

.shareHtmlAll-title {
	font-size: 60%;
	width: 100%;
	margin: 0;
}

.shareHtmlAll-title a {
	display: block;
	min-height: 30px;
	padding: 7% 5% 2%;
	line-height: 1.5;
	font-size: 140%;
	text-decoration: none;
}

.shareHtmlAll-title a:before {
	content: "合わせて読みたい";
	position: absolute;
	top: 10%;
	left: 5%;
	line-height: 1.2;
	font-size: 120%;
	background: #fc9705;
	letter-spacing: .2em;
	color: #fff;
	font-weight: bold;
	padding: 1% 0 1% 1%;
	top: -.4em;
}

.shareHtmlAll-title a.exit:before {
	content: "参考（外部リンク）";
	background: #333;
}

.shareHtmlAll:before,
.shareHtmlAll:after {
	content: "";
	display: table;
}

.shareHtmlAll:after {
	clear: both;
}

.shareHtmlAll .hatebu {
	display: inline;
	margin: 0 0 0 1%;
	border: none;
	position: absolute;
	right: 0;
	top: 0;
}

figure {
	padding-top: 4px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #f3f3f3;
	text-align: center;
}

figcaption {
	font-size: 80%;
	margin: 1em 0;
}

a.ext_icon {
	background: url(https://hirocommu.com/wp-content/uploads/2017/09/link-out.png) center right no-repeat;
	padding-right: 13px;
}

.my-header-ads {
	margin: 0 .5em .9em;
}

/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box {
	padding: 25px;
	margin-bottom: 10px;
	border: double #CCC;
	overflow: hidden;
	font-size: small;
}

.booklink-image, .kaerebalink-image {
	margin: 0 15px 0 0;
	float: left;
	min-width: 160px;
	text-align: center;
}

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

.booklink-info, .kaerebalink-info {
	margin: 0;
	line-height: 120%;
	overflow: hidden;
}

.booklink-name, .kaerebalink-name {
	margin-bottom: 24px;
	line-height: 1.5em;
}

.booklink-powered-date, .kaerebalink-powered-date {
	font-size: 8px;
	margin-top: 10px;
	font-family: verdana;
	line-height: 120%;
}

.booklink-detail, .kaerebalink-detail {
	font-size: 12px;
}

.booklink-powered-date, .kaerebalink-detail {
	margin-bottom: 15px;
}

.booklink-link2, .kaerebalink-link1 {
	margin-top: 10px;
}

.booklink-link2 a,
.kaerebalink-link1 a {
	width: 30%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display: inline-block;
	margin: 5px 2px 0 0;
	padding: 10px 1px;
	text-align: center;
	float: left;
	text-decoration: none;
	font-weight: 800;
	text-shadow: 1px 1px 1px #dcdcdc;
	font-size: 12px;
	color: #fff !important;
}

.booklink-link2 a:hover,
.kaerebalink-link1 a:hover {
	opacity: .6;
}

.booklink-link2 a:active
.kaerebalink-link1 a:active {
	position: relative;
	top: 1px;
}

/*ボタンを変えるときはここから*/
.shoplinkamazon a {
	color: #FF9901 !important;
	border: 1px solid #FF9901 !important;
}

.shoplinkrakuten a {
	color: #c20004 !important;
	border: 1px solid #c20004 !important;
}

.shoplinkkindle a {
	color: #007dcd !important;
	border: 1px solid #007dcd !important;
}

.shoplinkkakakucom a {
	color: #314995 !important;
	border: 1px solid #314995;
}

.shoplinkyahoo a {
	color: #7b0099 !important;
	border: 1px solid #7b0099 !important;
}

/*ここまでを変更*/
.shoplinkyahoo img {
	display: none;
}

.shoplinkyahoo a {
	font-size: 10px;
}

.booklink-footer {
	display: none;
}

@media screen and (max-width: 680px) {
	.booklink-box, .kaerebalink-box {
		padding: 15px;
	}
	
	.booklink-image, .kaerebalink-image {
		width: 100px !important;
		min-width: initial;
	}
	
	.booklink-name > a, .kaerebalink-name > a {
		font-size: 15px;
		font-weight: bold;
	}
	
	.booklink-name, .kaerebalink-name {
		margin-bottom: 12px;
	}
	
	.booklink-powered-date, .kaerebalink-powered-date {
		margin-top: 5px;
	}
	
	.booklink-link2 a,
																							.kaerebalink-link1 a {
		width: calc(100% - 4px);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin: 2px 0;
		padding: 10px 0;
	}
}

/* 黒板 */
.blackboard {
	position: relative;
	margin: 0 auto 1.5rem;
	padding: 1.6rem 1rem;
	font-size: 1.2rem;
	color: #fff;
	border: 2px solid #000;
	border-radius: 5px;
	box-shadow: 0 0 0 4px #fff inset;
	background-color: rgba(0,0,0,0.9);
}

.blackboard.answer p {
	margin-left: 1.7rem;
}

.blackboard .blink-before {
	font-size: 1.2rem;
}

.blackboard a {
	text-decoration: none;
	color: #fff;
}

.blackboard .blink-before::before {
	content: '▶';
	position: absolute;
	left: 1rem;
	animation: blink 1.4s infinite;
}

.blackboard p:last-of-type {
	margin-bottom: 0;
}

/* 回り込み */
.float-r {
	float: right;
}

/* 回り込み解除 */
.clearfix {
	zoom: 1;
}

.clearfix:after {
	clear: both;
	content: "";
	display: block;
}

/* 点滅 */
@keyframes blink {
	50% {
		opacity: 0;
	}
}

@-webkit-keyframes blink {
	50% {
		opacity: 0;
	}
}

/* ===================================================
あわせて読みたい　複数リンク対応カスタマイズ
=================================================== */
.emphasize-link {
	position: relative;
	margin: 36px 0 16px;
	padding: 16px 10px;
	border: 2px solid #df8182;
	background-color: #fffbf5;
}

.emphasize-link p:last-child {
	margin-bottom: 0;
}

.emphasize-link::before {
	position: absolute;
	bottom: 100%;
	left: -2px;
	padding: 2px 6px;
	content: "最後に読んでおきたいイチオシ記事！";
	background-color: #df8182;
	color: #fff;
	font-weight: bold;
}

/* 画像に枠線を付ける */
img.waku {
	border: solid 1px #808080;
	}
	
	
/* 枠線のスタイル 太さ 色 */
	box-shadow: 0 0 5px #808080;
/* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

img.waku {
	border: 1px solid #c7c7c7c7;
}

/* シンプル 枠（影）1 */
.kakomi-box3 {
	margin: 2em auto;
	padding: 1em;
	width: 90%;
	border: 1px solid #ccc;
/* 枠線 */
	background-color: #fff;
/* 背景色 */
	box-shadow: 1px 1px 2px #ccc;
	border-radius: 8px;
/*角の丸み*/
}

.box27 {
	position: relative;
	margin: 3em 0;
	padding: .5em 1em;
	border: solid 3px #62c1ce;
}

.box27 .box-title {
	position: absolute;
	display: inline-block;
	top: -27px;
	left: -3px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 17px;
	background: #62c1ce;
	color: #ffffff;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

.box27 p {
	margin: 0;
	padding: 0;
}

.single div.pre {
	font-size: 16px;
	padding: 20px;
	background-color: #fafafa;
	outline: 1px solid #f0f0f0;
	border-color: #f0f0f0;
	text-align: left;
}

/*枠線青バージョン*/
.box6 {
	padding: .5em 1em;
	margin: 2em 0;
	background: #f0f7ff;
	border: dashed 2px #5b8bd0;
/*点線*/
}

.box6 p {
	margin: 0;
	padding: 0;
}

/*タイトル付き枠線*/
.boxmi7 {
	position: relative;
	margin: 3em 0 1em;
	border: solid 2px #ffdecc;
	padding: 12px 6px 12px 10px;
	color: #ffdecc;
	font-weight: bold;
}

.boxmi7-title {
	position: absolute;
	display: inline-block;
	padding: 1px 10px 0;
	background: #ffdecc;
	color: #4b3a24;
	letter-spacing: .1em;
	margin: -44px 0 0 -12px;
}

.boxmi7 p {
	padding: 0;
	margin: 0;
}