@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*---------------------------------
固定ページの日付を非表示にする
--------------------------------*/
.post-26272 .date-tags {
  display: none;
}

/*---------------------------------
広告ラベル
--------------------------------*/

.ad-label {
	font-size:10px;
    background: #d2b48c;
    color: white;
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 8px;
    border-radius: 4px;
}
	
/*--------------------------------
フォントサイズ
---------------------------------*/

/* font */
.f10{font-size:10px;}
.f11{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f15{font-size:15px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}

/*--------------------------------
margin調整用css
---------------------------------*/

.mt0 { margin-top:0; }
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt50 { margin-top:50px; }

.mb0 { margin-bottom:0; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.ml0 { margin-left:0; }
.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml30 { margin-left:30px; }
.ml40 { margin-left:40px; }
.ml50 { margin-left:50px; }
.mr0 { margin-right:0; }
.mr5 { margin-right:5px; }
.mr10 { margin-right:10px; }
.mr15 { margin-right:15px; }
.mr20 { margin-right:20px; }

/*--------------------------------------
 過去の蛍光ペン下線CSS
--------------------------------------*/

.kasen_yellow{
	background:linear-gradient(transparent 60%, #ffff66 60%);
}

.kasen_pink{
	background:linear-gradient(transparent 60%, #FFE4E1 60%);
}

/*--------------------------------------
  リンク
--------------------------------------*/

.link_arrow:before {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f0a9';
	color:#0000ff;
}

.entrylink_arrow:before {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f0a9';
	color:#ff69b4;
}

.link_arrow a:visited {
	color:#0000ff;
}

.entrylink_arrow:after {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f0c1';
	color:#ff69b4;
}

.entrylink_arrow a:link{
	color:#3300ff;
}

/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
/*--カエレバ・ヨメレバPC--*/
.cstmreba{
	border: 1px solid #E6E6E6;
	width:90%;
	padding:20px;
	margin:20px auto;
	box-shadow:0 2px 5px #F2F2F2;
}
.kaerebalink-image,
.booklink-image{
	float:left;
}
.kaerebalink-image img,
.booklink-image img{
	max-height:140px;
}
.kaerebalink-info,
.booklink-info{
	overflow:hidden;
	padding-left:10px;
}
.kaerebalink-name{
	margin-bottom:10px;
}

.kaerebalink-powered-date,
.booklink-powered-date,
.kaerebalink-detail,
.booklink-detail{
	font-size:12px;
	margin:10px 0;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan,
.shoplinkseven,
.shoplinkkino,
.shoplinkbk1,
.shoplinkehon,
.shoplinkyahoo{
	float:left;
	width:32%;
	margin-left:5px;
	margin-bottom:8px;
	text-align:center;
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinktoshokan a,
.shoplinkseven a,
.shoplinkkino a,
.shoplinkbk1 a,
.shoplinkehon a,
.shoplinkyahoo a{
	display: block;
	padding:10px 2px;
	font-size:14px;
	color:#fff !important;
	font-weight:bold;
	line-height:15px;
	border-radius: 4px;
	box-shadow:0 2px 5px #999;
	color:#fff;
	text-decoration: none;
}

.shoplinkamazon a{
	background-color:#fe9909;
	border: 2px solid #fe9909 !important;

}
.shoplinkrakuten a,
.shoplinkrakukobo a{
	background-color:#bf0000;
	border: 2px solid #bf0000 !important;

}
.shoplinkkindle a{
	background-color:#2e90cc;
	border: 2px solid #2e90cc !important;

}
.shoplinkkakakucom a{
	background-color:#ff7426;
	border: 2px solid #ff7426 !important;

}
.shoplinktoshokan a{
	background-color:#262626;
	border: 2px solid #262626 !important;

}

.shoplinkseven a{
	background-color:#FF8000;
	border: 2px solid #FF8000 !important;	
}

.shoplinkkino a{
	background-color:#000080;
	border: 2px solid #000080 !important;
}

.shoplinkbk1 a{
	background-color:#4169e1;
	border: 2px solid #4169e1 !important;	
}

.shoplinkehon a{
	background-color:#00008b;
	border: 2px solid #00008b !important;	
}

.shoplinkyahoo a{
	background-color:#FF0000;
	border: 2px solid #FF0000 !important;	
	font-size:13px;
}

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover,
.shoplinkkindle a:hover,
.shoplinkkakakucom a:hover,
.shoplinktoshokan a:hover,
.shoplinkseven a:hover,
.shoplinkkino a:hover,
.shoplinkbk1 a:hover,
.shoplinkehon a:hover,
.shoplinkyahoo a:hover{
	background:#fff;
}
.shoplinkamazon a:hover{
	color:#fe9909 !important;
}
.shoplinkkindle a:hover{
	color:#2e90cc !important;
}
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover{
	color:#bf0000 !important;
}
.shoplinkkakakucom a:hover{
	color:#ff7426 !important;
}
.shoplinktoshokan a:hover{
	color:#262626 !important;
}
.shoplinkseven a:hover{
	color:#FF8000 !important;
}
.shoplinkkino a:hover{
	color:#000080 !important;
}
.shoplinkbk1 a:hover{
	color:#4169e1 !important;
}
.shoplinkehon a:hover{
	color:#00008b !important;	
}
.shoplinkyahoo a:hover{
	color:#FF0000 !important;
}

/*--カエレバ・ヨメレバヤフオクを表示しない--*/
.shoplinkyahooAuc a { display: none !important; }

/*--カエレバ・ヨメレバスマホ--*/
@media screen and (max-width: 480px) {
.cstmreba{
	width:95%;
	margin:30px auto;
	padding:10px;
}
.booklink-image,
.kaerebalink-image{
          float:none;
          margin:0 auto 10px;
          width:50%;
}
.kaerebalink-powered-date,
.booklink-powered-date{
         text-align:center;
}
.booklink-detail,
.kaerebalink-detail{
         text-align:center;
         margin-bottom:20px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkrakukobo,
.shoplinkkindle,
.shoplinkkakakucom,
.shoplinktoshokan,
.shoplinkseven,
.shoplinkkino,
.shoplinkbk1,
.shoplinkehon,
.shoplinkyahoo{
         float:none;
         width:90%;
}

	/*サイドバーランキング順位　ここから*/
.widget .wpp-list {
    counter-reset: wpp-ranking;
}
.widget .wpp-list li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
}
.widget .wpp-list li {
  position: relative;
  list-style-type: none;
}
.widget .wpp-list li::before {
  content: counter(wpp-ranking, decimal);
  counter-increment: wpp-ranking;
  background: #2478e5;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.widget .wpp-list li img {
  margin: 0px 5px 10px 0px;
}
	
/*=================================================================================
	RINKER
=================================================================================*/


div.yyi-rinker-contents {
	width: 98%;
	height: auto;
	margin: 36px auto;
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	background-color: #fafafa;
	overflow: hidden;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
	border: unset;
}
div.yyi-rinker-contents a {
	transition: 0.8s ;
}
div.yyi-rinker-contents div.yyi-rinker-box {
	padding: 0; 
}
div.yyi-rinker-contents div.yyi-rinker-image {
	width: 150px;
	min-width:150px;
	margin: 0 14px 0 0;
	text-align: center;
	background: #fff;
	box-sizing: border-box;
}
div.yyi-rinker-contents div.yyi-rinker-image a {
	width: 100%;
}
/**** タイトル ****/
div.yyi-rinker-contents div.yyi-rinker-title a {
	border-bottom: 1px solid;  /* テキスト下線 */
	color:#285EFF; /* テキストリンクカラー */
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
/**** Credit・価格欄 ****/
div.yyi-rinker-contents div.yyi-rinker-detail {
	font-size: 10px;
}
div.yyi-rinker-contents div.yyi-rinker-detail a {
    color: #999;
}
/****ボタン****/
div.yyi-rinker-contents ul.yyi-rinker-links li {
	border-radius: 0px;
	min-width:128px;
	text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
	padding:0;
	height: auto;
	border-radius: 8px;
	font-size: 0.8em;
	box-sizing: border-box;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink,
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
	background: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
	background: #ff9901;
	border: 2px solid #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{
	background: #bf0000;
	border: 2px solid #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{
	background: #ff0033;
	border: 2px solid #ff0033;
}
/****ボタンマウスオーバー時****/
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
	background: #fff;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover {
	color: #ff9901;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover {
	color: #bf0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
	color: #ff0033;
}
@media screen and (max-width: 768px){
div.yyi-rinker-contents div.yyi-rinker-box {
	display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image{
	width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
	text-align: center;
	width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
	justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 32.33%;
	margin: 0.5%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
	padding: 0 0.5px;
}
}
@media screen and (max-width: 480px) {
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 99%;
	margin: 0.7% 0.5%;
}
}

	
/*=================================================================================
	フェードイン
=================================================================================*/	
	
	#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}