@charset "UTF-8";

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

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

/* AddQuicktag の装飾 */
.blue{color:#0087ff;}
.green{color:#0ab908;}
.pink{color:#ef6ae9;}
.larger{font-size:150%;font-weight:bold;}
.smaller{font-size:60%;}
.P-highlighter{background:linear-gradient(transparent 60%, rgb(255, 169, 233) 60%);}
.B-highlighter{background:linear-gradient(transparent 60%, rgb(182, 242, 255) 60%);}
.G-highlighter{background:linear-gradient(transparent 60%, rgb(159, 255, 0) 60%);}
.O-highlighter{background:linear-gradient(transparent 60%, rgb(253, 185, 64) 60%);}
.Y-highlighter{background:linear-gradient(transparent 60%, rgb(255, 229, 0) 60%);}

/*バッジのスタイル*/
.sankou,
.sanko,
.reffer,
.ref{
  color: #fff;/*文字色*/
  background-color: #ff699b;/*背景色*/
  padding: 2px 6px 1px;/*内側の余白*/
  border-radius: 3px;/*角丸*/
  font-size: 13px;/*文字サイズ*/
  letter-spacing: 0.07em;/*文字間*/
  margin-right: 6px;/*バッジの右側に余白*/
}
/*バッジのスタイル　オレンジ*/
.price{
  color: #fff;/*文字色*/
  background-color: #ffcd69;/*背景色*/
  padding: 2px 6px 1px;/*内側の余白*/
  border-radius: 3px;/*角丸*/
  font-size: 13px;/*文字サイズ*/
  letter-spacing: 0.07em;/*文字間*/
  margin-right: 6px;/*バッジの右側に余白*/
}

/* サイドバー見出し */
.sidebar h3 {
	color: #773c30;
	background: none;
}

/*アフィリエイト用ボタンリンク*/
.btn_link{
text-align:center;/*中央寄せ*/
}
.btn_link>a{
    margin: .5em .5em .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .3em 1em;
    border-radius: 3px;
    border: solid 2px #f77ea4;/*線のスタイル*/
    color: #f77ea4;/*文字色*/
    font-weight: bold;/*文字の太さ*/
}
.btn_link>a:hover{
    text-decoration: none;
    background: #f77ea4;/*触れたときの背景色*/
    color: #fff;/*触れたときの文字色*/
}

/* メイン部分の枠を消す */
#main {
 border: none;
}

/** 商品リンク ********************/
.showcase-box {
	padding: 20px 20px 10px;
	width: 96%;
	margin: 1.6em auto;
	border: 1px 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;
	margin: 10px auto !important;
}
.showcase-image > a > img {
	margin: 0 auto;
}
.showcase-info {
	line-height: 125%;
	width: 100%;
}
.showcase-detail {
	color: #9b7b6c;
	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 div {
  position: relative;
}

.showcase-link div > ::before {
  font-family: "font awesome 5 free";
  content: "\f0da";
  position: absolute;
  color: #fff;
  right: 5px;
}

.showcase-link div > ::after{
  content: "で探す";
}

/* （イトキンサイズ別検索）「で探す」を消す  */
.size-s a::after {
    content: "";
}

.showcase-link a {
	width: 90%;
	display: block;
	margin: 0px auto 8px;
	padding: 8px 0px;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	border-radius: 3px; /* ボタンの角の丸み */
	color: #fff; /* ボタンの文字色 */
}

.showcase-amazon a {
  background: #ffb36b; /* Amazonのボタンの色 */
}

.showcase-yahoo a {
  background: #ff8a65; /* yahoo!ショッピングのボタンの色 */
}

.showcase-rakuten a {
  background: #ea7373; /* 楽天市場のボタンの色 */
}

.showcase-koushiki a {
  background: #f2c200; /* 公式サイトのボタンの色 */
}

.showcase-paypay a {
  background: #8c7500 !important; /* PayPayモールのボタンの色 */
}

.showcase-brown a {
  background: #9b7b6c !important; /* その他のボタン・茶色 */
}

.showcase-link a:hover {
	opacity: 0.6;
}

/* 白抜きボタン */
.showcase-amazon-b a {
    background: #fff;
    color: #ffb36b;
    border: solid 1px #ffb36b;  /* Amazonのボタンの色 */
}

.showcase-rakuten-b a {
    background: #fff;
    color: #ea7373;
    border: solid 1px #ea7373;  /* 楽天市場のボタンの色 */
}

.showcase-yahoo-b a {
    background: #fff;
    color: #ff8a65;
    border: solid 1px #ff8a65;  /* yahoo!ショッピングのボタンの色 */
}

.showcase-koushiki-b a {
    background: #fff;
    color: #f2c200;
    border: solid 1px #f2c200; /* 公式サイトのボタンの色 */
}

.showcase-paypay-b a {
    background: #fff;
    color: #8c7500;
    border: solid 1px #8c7500; /* PayPayモールのボタンの色 */
}

.showcase-brown-b a {
    background: #fff;
    color: #9b7b6c;
    border: solid 1px #9b7b6c; /* その他のボタン・茶色 */
}

@media screen and (max-width: 834px) {
	.showcase-box {
		padding: 10px;
		display: block;
	}
	.showcase-image {
		width: 120px;
		min-width: 120px;
		margin-right: 3% !important;
		float: left !important;
		height: 100% !important;
	}
  
  .showcase-info {
    padding-left: 20px;
  }
  
	.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: 0.8em;
		/*padding: 6px 0; */
		border-radius: 3px; /* ボタンの角の丸み */
		margin: 3px auto;
	}
}

@media screen and (min-width: 541px) {
	.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: 20px;
		width: 100%;
	}
	.showcase-detail {
		margin: 0 0 14px;
	}
	.showcase-link {
		display: flex;
		flex-wrap: wrap;
	}
	.showcase-link a {
		width: auto;
		text-align: center;
    font-weight: bold;
	}
	.showcase-link a img {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.showcase-link > * {
		width: 49%;
		margin: 0 0.5% !important;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 480px) {
  
  .showcase-image {
    width: 100%;
		min-width: 120px;
	}
  
	.showcase-info {
		width: auto !important;
		overflow: visible !important;
		padding: 0 !important;
	}
  
	.showcase-link > * {
		width: 99%;
		margin: 0 0.5% !important;
	}
}

/*バッジを大きく*/
.badge,.badge-pink,.badge-purple,.badge-green,.badge-yellow,.badge-brown,.badge-grey{
	padding: 5px;
	font-size: 13px;
	font-weight: bold;
}

/*バッジの色変更*/
.badge-yellow{background-color: #f2c200;}
.badge-brown{background-color: #9b7b6c;}
.badge-grey{background-color:#d7cac4;}

/*---------------------------------
ボックス（白抜き）の枠の色と太さを変える
--------------------------------*/
.blank-box {border-width: 1px; border-radius: 0; border-color: #d7cac4;} /* 枠の太さ・角丸・灰色の変更 */

.blank-box.bb-yellow {border-color: #f39800;} /* 黄色 */

.blank-box.bb-red {border-color: #FD8FA3;} /* 赤色 */

.blank-box.bb-blue {border-color: #5FB3F5;} /* 青色 */

.blank-box.bb-green {border-color: #95CE4B;} /* 緑色 */

/*----------------------------------
 タイトル付きアイコンボックス
-----------------------------------*/
.box1-orange {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #f39800;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box1-orange i{
	background: #f39800;/* アイコン背景色 */
	color: #fff; /* アイコン色 */
	padding: 10px; /* アイコン余白 */
	border-radius: 20px; /* アイコン角丸 */
}
.box1-orange .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -21px; /* 上から（-21px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f39800; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 16px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box1-orange p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

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

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

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

/*599px以下*/
@media screen and (max-width: 599px){
  .container .column-wrap > div > {
	padding: 4px 0;
	}
}

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