@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.2
*/

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

/* 産地記事で使ったかんたんリンクを入れ込めるテーブル */
/* 外枠全体のテーブル */
.myancai-table {
  width: 100%;
  max-width: 480px;
  margin: 1.5em auto;
  border-collapse: collapse;
  background-color: #fffaf2;
  box-shadow: 0 4px 10px rgba(255, 140, 0, 0.1);
  border: 2px solid #ffd8a0;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* 見出し列 */
.myancai-table th {
  width: 35%;
  background-color: #ffe0b3;
  color: #a85600;
  padding: 0.8em 1em;
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #ffd2a0;
  font-size: 0.95em;
  vertical-align: top;
}

/* 内容列 */
.myancai-table td {
  background-color: #fffdf7;
  color: #444;
  padding: 0.8em 1em;
  border-bottom: 1px solid #ffe8c0;
  font-size: 0.95em;
  line-height: 1.6;
}

/* 最終行のボーダー削除 */
.myancai-table tr:last-child td,
.myancai-table tr:last-child th {
  border-bottom: none;
}

/* リンク部分 */
.myancai-table td a {
  display: inline-block;
  margin: 0.3em 0;
  padding: 0.4em 0.9em;
  border-radius: 6px;
  background-color: #fff1dd;
  color: #d26900;
  text-decoration: none;
  border: 1px solid #ffd2a0;
  transition: background 0.3s ease;
  font-size: 0.9em;
}

.myancai-table td a:hover {
  background-color: #ffe1b2;
}

/* リンクボタン行（見出しなし） */
.myancai-table .myancai-links td {
  padding: 1em;
  background-color: #fff7e8;
  text-align: center;
  border-top: 1px solid #ffd8a0;
}

/* ボタンの見た目をそろえる */
.myancai-buttons a {
  display: inline-block;
  margin: 0.4em 0.4em;
  padding: 0.5em 1em;
  background-color: #ffe1b2;
  border: 1px solid #ffcc88;
  border-radius: 6px;
  color: #a35300;
  font-size: 0.9em;
  text-decoration: none;
  transition: background 0.3s ease;
}

.myancai-buttons a:hover {
  background-color: #ffd799;
}


/*商品ボックス用*/

.myancai-box {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  background: #fff;
}
.myancai-img {
  flex: 0 0 auto;
  max-width: 120px;
  margin-right: 16px;
}
.myancai-img-link {
  display: block;
  width: 100%;
}
.myancai-img-link img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.myancai-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.myancai-info {
  flex: 1 1 200px;
}
.myancai-title {
  font-size: 1.2em;
  margin-bottom: 8px;
  color: #e60033;
}
.myancai-info ul {
  padding-left: 1em;
  margin: 0 0 10px;
}
.myancai-info ul li {
  margin-bottom: 4px;
  list-style: disc;
}
.myancai-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.myancai-btn {
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 0.95em;
}
.myancai-btn.amazon {
  background-color: #476e9e
}
.myancai-btn.rakuten {
  background-color: #e4685d;
}
.myancai-btn.yahoo {
  background-color: #ffb36b;
}

/* 指定のURLに飛ばしたいときのボタンデザイン用 */
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.btn--blue,
a.btn--blue {
  color: #fff;
  background-color: #0095eb;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #00bcf5;
}


/* タグの文字列を変更 */
.bb-herb .bb-label::after{
	content: "HERBS"!important;
}

.bb-herb .bb-label::after{
	content: "HERBS"!important;
}

.bb-method .bb-label::after{
	font-weight: bold;
	content: "作り方";!important
}

.bb-zairyo .bb-label::after{
	font-weight: bold;
	content: "材料";!important
}

/* 値段の強調 */
.price {
	font-size: 120%;
	color: #c53d43;
	font-weight: bold;
}

/* 売り場リンクのためのボタン */
.iherb-btn {
	margin: 10px 0px 30px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: 100%;
	box-shadow:0px 5px 5px 0px #a7d28d;
	font-size: 90%!important;
	background-color: #65ab31;
	border-radius:3px;
	cursor:pointer;
	color:#ffffff;
	font-size: 80%;
	font-weight:bold;
	text-decoration:none;
	border: none;
}

.iherb-btn:hover {
	color: #fff;
	background-color: #9fc24d;
}
.iherb-btn:active {
	position:relative;
	top:1px;
}

/* iherbletで作ったリンクの囲み */
.iherbbox {
	margin: 2em auto;
	padding: 1em;
	width: 100%;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	box-shadow: 1px 1px 2px #cccccc;
}

.point {
	font-weight: bold;
	color: #d2691e;
	font-size: 1.1em;
}

.point-s {
	font-weight: bold;
	color: #ff8c00;
}

.blank-box.bb-pink {
	border-color: #f6ad49;
}

.blank-box.bb-tab.bb-pink .bb-label, .bb-tab.bb-pink.is-style-blank-box-red .bb-label,
.bb-tab.bb-pink.is-style-blank-box-navy .bb-label,
.bb-tab.bb-pink.is-style-blank-box-blue .bb-label,
.bb-tab.bb-pink.is-style-blank-box-yellow .bb-label,
.bb-tab.bb-pink.is-style-blank-box-green .bb-label,
.bb-tab.bb-pink.is-style-blank-box-pink .bb-label,
.bb-tab.bb-pink.is-style-blank-box-orange .bb-label, .bb-tab.bb-pink.is-style-sticky-gray .bb-label,
.bb-tab.bb-pink.is-style-sticky-yellow .bb-label,
.bb-tab.bb-pink.is-style-sticky-red .bb-label,
.bb-tab.bb-pink.is-style-sticky-blue .bb-label,
.bb-tab.bb-pink.is-style-sticky-green .bb-label {
  background-color: #f6ad49;
}

/* H2～H4の見出しをカスタマイズ */
.article h2 {
	position: relative;
	padding-left: 40px!important;
	border-bottom: none;
	border-top: none;
	background: #ed6d35!important;
	color: #fff!important;
}
.article h2:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f55f";
	position: absolute;
	left : 0.5em;
	color: white;
}

.article h3 {
	position: relative;
	padding-left: 40px!important;
	border: none!important;
	background: #ed8a5f!important;
	color: #fff;
}
.article h3:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f551";
	position: absolute;
	left : 0.5em;
	color: #fff;
}

.pan:before {
	content: "\f7ec"!important;
	color: #bf783e!important;
}

.cake:before {
	content: "\f7ef"!important;
	color: #bf783e!important;
}

.cookie:before {
	content: "\f563"!important;
	color: #bf783e!important;
}

.article h4 {
	position: relative;
	padding-left: 40px!important;
	border: none!important;
	background: #fbdac8!important;
	color: #98605e;
}
.article h4:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f61f";
	position: absolute;
	left : 0.5em;
	color: #bf783e;
}

/* 強調ポップアップ文のためのｐ要素用クラス */
.fuki {
	position: relative;
	padding-left: 25px!important;
	font-weight: bold;
	color: #ed6d35!important;
	font-size: 1.2em;
}

.fuki:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f816";
	position: absolute;
	left : 0em;
	color: #dc143c;
}

.marker-red {
	background: linear-gradient(rgba(255, 255, 255, 0) 20%, #ffdab9 60%);
	font-weight:bold;
}

.f-red {
	font-weight:bold;
	color: #ee7800;
}

.f-green {
	font-weight:bold;
	color: #191970;
}

.sb-id-11 .speech-icon img,.sb-id-11  .speech-icon amp-img{
border:2px solid #ed6d35;
}

a {
	color: #d2691e;
	text-decoration: none;
}
/* hoverでの色を指定、下線を消す */
a:hover {
	text-decoration: none;
	color: #ff8c00;
}

/* list-1（順番アリ） */
.list-1{
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.list-1 li {
   border-bottom:2px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:600px; /* 横幅 */
   padding: 0 0 0.5em 1.8em;
}

.list-1 li:last-child {
   border:none;
}

.list-1 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #cd5c5c; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}

/* list-2（順番なしボーダーのみ） */
.list-2{
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.list-2 li {
   border-bottom:2px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:600px; /* 横幅 */
   padding: 0 0 0.5em 1.8em;
}

.list-1 li:last-child {
   border:none;
}

/* list-c（順番なしチェックボックス） */
.list-c{
   list-style: none;
   padding:0em!important;
   margin:0em;
}
.list-c li {
	position: relative;
	margin:0.5em 0 !important;
	padding-left: 25px;
}
.list-c li:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f14a"; /*アイコン*/
   color:  #cd5c5c; /* 色 */
   position: absolute;
   left:0;
}

.list-q li:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f059"; /*アイコン*/
   color:  #9fc24d; /* 色 */
   position: absolute;
   left:0;
}

.list-good li:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f118"; /*アイコン*/
   color:  #e8383d; /* 色 */
   position: absolute;
   left:0;
}

.list-notgood li:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f11a"; /*アイコン*/
   color:  #68a9cf; /* 色 */
   position: absolute;
   left:0;
}

.list-cinema li:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f008"; /*アイコン*/
   color:  #ff6347; /* 色 */
   position: absolute;
   left:0;
}

/* strong用のクラス */
.dotted-st-green {
	border-bottom: dotted 2px #66cdaa;
}

/* タブを変更しちゃう */
.bb-osusume .bb-label::after{
	font-weight: bold;
	content: "おすすめできる人";!important
}

.bb-tokucho .bb-label::after{
	font-weight: bold;
	content: "特徴";!important
}

.bb-saiyasune .bb-label::after{
	font-weight: bold;
	content: "最安値";!important
}

.bct-sanko .blogcard-label::after{
	content: "参考サイト";!important
}

.bct-review .blogcard-label::after{
	content: "詳細記事";!important
}

.blogcard-label {
  background-color: #db8449;
}

.p-bottom {
	padding-bottom: 0px;
	margin-bottom: 0px;
}

/* マーカーを引く */
.marker_red {
	background: linear-gradient(rgba(255, 255, 255, 0) 20%, #ffdab9 60%);
	font-weight:bold;
}

/* 目次をアレンジ */

.toc {
    display: block;
    padding: 0px;
	background: #ffffff;
}

.toc-title {
    position: relative;
    padding:10px 0; /**位置(上下)**/
    background: #f6ad49; /**背景色**/
    color: #fff; /**文字色**/
    font-weight: bold; /**太字*/
}

.toc .toc-content {
    padding:5px;
}

/* h2 */
.toc-list > li {
    font-weight: bold;
}

.toc-list > li a:hover {
	text-decoration: none;
}

/* h3 */
.article .toc-list > li li {
  list-style: none;
}

.toc-list > li li ::before {
  display: inline-block;
  position: relative;
  content: '';
  width: 5px;
  height: 5px;
  left: -5px; /**横(左)の位置**/
  margin-bottom: 2px; /**下の余白**/
  border-radius: 100%;
  background: #cdcdcd; /**・の色**/
}

.toc-list > li li a {
    font-weight: normal;
    font-size: 90%;
    margin-left: 5px;
}

/***　nx2テーブル　（myancai用）***/
.n2-table {
    width:95%;
    table-layout: fixed;
    border: none !important;
    border-collapse: separate;
    border-spacing: 7px 0px;
}

.n2-table tbody td {
	background-color:#fff !important;
}
   
/* ボディ項目 */
.n2-table tbody th {
	background:#f6ad49;
	font-weight: bold;
	line-height:2.5em;
 border-radius: 0px 0px 0px 0px;
}
   
/* ボディデータ */
.n2-table tbody td {
	text-align:center;
}

/* キャプション */
.n2-table caption {
	text-align:center;
	background:#f19072;
	font-weight: bold;
	border-bottom: solid 1px #f5f5f5 !important;
	line-height:2.5em;
	border-radius: 10px 0px 0px 10px;
}
   
/* スマホ調整 */
@media (max-width: 767px) {

}

/***　各列の幅設定 ***/
.n2-table th:nth-child(1)  {
	width: 30%;
}

/***　引用ブロック ***/
.entry-content blockquote:before, .entry-content blockquote:after {
  position: absolute;
  width: 0.5em;
  color: #cd5e3c;
  background: #eee9e6;
}

.entry-content blockquote:before {
  height: 0.5em;
  left: -.1em;
  top: -0.2em;
}

.entry-content blockquote:after {
  right: -.1em;
  bottom: -0.6em;
  line-height: 1em;
}

.entry-content blockquote {
  border-color: #cd5e3c;
  background: #eee9e6;
  padding-top: 0;
  padding-bottom: 0;
}

/***　もしものかんたんリンクのカスタマイズ ***/
.easyLink-box {
	margin-bottom: 1.5em!important;
}
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-btn a{
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: auto!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	font-size: 80%!important;
}
.easyLink-info-btn-amazon{
	background:#476e9e!important;
}
.easyLink-info-btn-amazon:hover {
	background-color: #5c8ecc;
}

.easyLink-info-btn-rakuten{
	background:#e4685d!important;
}
.easyLink-info-btn-rakuten:hover {
	background-color: #ff7569;
}
.easyLink-info-btn-yahoo{
	background:#ffb36b!important;
}
.easyLink-info-btn-yahoo:hover {
	background-color: #f5e56b;
}

.easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    padding-right: 3px;
}

/*** ランキング用ナンバリングリスト ***/
.list-num ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: #fff;
}
.list-num ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.list-num ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #e49e61;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/***　シネマ概要のボックス ***/
.bb-cinema {
	width: 70%;
	text-align: left;
}

/***　PCでも縦表示になる ***/
.n2-100 th:nth-child(1) {
	width:100%;
	display:block;
	border-bottom: none;
}

.n2-100 td{
	width:100%;
	display:block;
}

/***　アマゾン購入のボタン ***/
.amazon-btn {
	margin: 5px 10px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: auto!important;
	box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
	background-color: #476e9e;
	border-radius:3px;
	cursor:pointer;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
	border: none;
}

.amazon-btn:hover {
	color: #fff;
	background-color: #5c8ecc;
}
.amazon-btn:active {
	position:relative;
	top:1px;
}

/***　楽天購入のボタン ***/
.rakuten-btn {
	margin: 5px 0px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: auto!important;
	box-shadow:0px 1px 0px 0px #f7c5c0;
	background-color:#e4685d;
	border-radius:3px;
	cursor:pointer;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
	border: none;
}
.rakuten-btn:hover {
	color: #fff;
	background-color: #ff7569;
}
.rakuten-btn:active {
	position:relative;
	top:1px;
}

.price {
	font-size: 120%;
	color: #ea5550;
	font-weight: bold;
}

/***　Yahoo購入のボタン ***/
.yahoo-btn {
	margin: 5px 0px 5px 0!important;
	padding: 0 12px!important;
    line-height: 35px!important;
	display: inline-block!important;
	width: auto!important;
	box-shadow:0px 1px 0px 0px #f2d58a;
	font-size: 80%!important;
	background-color: #ffb36b;
	border-radius:3px;
	cursor:pointer;
	color:#ffffff;
	font-weight:bold;
	text-decoration:none;
	border: none;
}

.yahoo-btn:hover {
	color: #fff;
	background-color: #f5e56b;
}
.yahoo-btn:active {
	position:relative;
	top:1px;
}
.price {
	font-size: 120%;
	color: #ea5550;
	font-weight: bold;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.n2-table tbody th {
		padding:0;
	}
}

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

	div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 100%!important;
		position: relative;
	}
	.easyLink-info-btn a:before {
		padding-right: 5px;
		right: 5px;
		position: absolute;
	}

	.n2-table th:nth-child(1) {
		width:100%;
		display:block;
		border-bottom: none;
	}

	.n2-table td{
		width:100%;
		display:block;
	}

	.list-c li {
		padding: 0em 1em 0em 1em!important;
	}

	.amazon-btn {
		font-size: 100%;
		padding:8px 12px;
		width: 100%!important;
		text-align: center;
	}

	.rakuten-btn {
		font-size: 100%;
		padding:8px 12px;
		width: 100%!important;
		text-align: center;
	}

	.eiga-btn {
		font-size: 100%;
		padding:8px 12px;
		width: 100%!important;
		text-align: center;
	}
}