@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/** カエレバっぽいリンク ********************/
.showcase-box {
	padding: 22px 25px;
	width: 96%;
	margin: 1.6em auto;
	border: 3px solid #dfdfdf; /* 外枠の枠線 */
	box-sizing: border-box;
	position: relative;
}
.showcase-image {
	width: 160px;
	min-width: 160px;
	margin: 0 auto 1em !important;
	float: none !important;
	text-align: center;
}
.showcase-image * {
	display: block;
}
.showcase-image > a > img {
	margin: 0 auto;
}
.showcase-info {
	line-height: 125%;
	width: 100%;
}
.showcase-detail {
	color: #333;
	font-size: 12px;
	margin: 0 0 10px;
}
.showcase-link > * {
	 background: none !important;
	 padding: 0 !important;
	 display: block !important;
}
.showcase-link img {
	display: none;
}
.showcase-link a {
	width: 90%;
	display: block;
	margin: 0px auto 8px;
	padding: 10px 0;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	border-radius: 3px; /* ボタンの角の丸み */
	color: #fff; /* ボタンの文字色 */
}
.showcase-link a:hover {
	opacity: 0.6;
}
.showcase-amazon a {
	background: #f79901;; /* Amazonのボタンの色 */
}
.showcase-kindle a {
	background: #0074c1; /* Kindleのボタンの色 */
}
.showcase-rakuten a {
	background: #bf0000; /* 楽天市場のボタンの色 */
}
@media screen and (max-width: 834px) {
	.showcase-box {
		padding: 10px 10px 24px;
		display: block;
	}
	.showcase-image {
		width: 120px;
		min-width: 120px;
		margin-right: 3% !important;
		float: left !important;
		height: 100% !important;
	}
	.showcase-link {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.showcase-link > * {
		width: auto;
		margin: 0 .5% !important;
		flex: 1 1 auto;
	}
	.showcase-link > * > a {
		width: auto;
		font-size: 11px;
		padding: 6px 0;
		border-radius: 3px; /* ボタンの角の丸み */
	}
}
@media screen and (min-width: 769px) {
	.showcase-box {
		text-align: left;
		display: flex;
		font-size: inherit !important;
	}
	.showcase-image {
		vertical-align: top;
		box-sizing: border-box;
		min-width: auto !important;
	}
	.showcase-info {
		line-height: 125%;
		vertical-align: top;
		box-sizing: border-box;
		padding-left: 25px;
		width: 100%;
	}
	.showcase-detail {
		margin: 0 0 14px;
	}
	.showcase-link {
		display: flex;
		flex-wrap: wrap;
	}
	.showcase-link a {
		width: auto;
		text-align: center;
	}
	.showcase-link a img {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.showcase-link > * {
		width: 31.5%;
		margin: 0.5%;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 480px) {
	.showcase-image {
		width: 80px;
		min-width: 80px;
	}
	.showcase-info {
		width: auto !important;
		overflow: visible !important;
		text-align: center !important;
		padding: 0 !important;
	}
	.showcase-link > * {
		width: 49%;
		margin: 0 .5% !important;
	}
}
/****************
タブ見出しボックス
****************/
.tab-caption-box-label{ 
	padding: 6px 16px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
}

.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: 1px; /*上から(1px）移動*/
	border: 2px solid; /*ボックス線*/
/*	padding: 48px 24px; ボックス内側余白*/
	border-radius: 4px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}