@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){
  /*必要ならばここにコードを書く*/
}

/* ======================
   1.aroma（こころ整う香りの処方帖）
====================== */
h2.aroma, h3.aroma, h4.aroma{
  font-family: "Hiragino Mincho ProN", serif;
  color: #5c4333;
  border: none;
}

/* h2 */
h2.aroma {
	position: relative;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
	background-color: rgba(245, 245, 245, 1);
	padding: 0.5em 0;
	margin: 1em 0;
}

h2.aroma::before,
h2.aroma::after {
	content: '';
	display: block;
	position: absolute;
	width: 80%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
	left: 0;
}

h2.aroma::before {
	top: 0;
}

h2.aroma::after {
	bottom: 0;
}

/* h3 */
h3.aroma {
	position: relative;
	padding: 12px, 16px, 12px, 20px;
	margin: 40px 0 20px;
	font-size: 1.6em;
	font-weight: 600;
	border-left: 2px solid transparent;
}

h3.aroma::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
}
h3.aroma {
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent) 1;
}

/* h4 */
h4.aroma {
  position: relative;
  padding: 6px 4px;
  margin: 1.5em 0 1em;
  font-size: 1.2em;
}
h4.aroma::after {
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px dotted #bfa68b;
  margin-top: 0.4em;
}

/* ======================
   2.mind（心の学び部屋）
====================== */
h2.mind, h3.mind, h4.mind {
  font-family: "Hiragino Mincho ProN", serif;
  color: #5c4333;
  border: none;
}

/* h2 */
h2.mind {
	position: relative;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
	background-color: rgba(245, 245, 245, 1);
	padding: 0.5em 0;
	margin: 1em 0;
}

h2.mind::before,
h2.mind::after {
	content: '';
	display: block;
	position: absolute;
	width: 80%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
	left: 0;
}

h2.mind::before {
	top: 0;
}

h2.mind::after {
	bottom: 0;
}

/* h3 */
h3.mind {
	position: relative;
	padding: 12px, 16px, 12px, 20px;
	margin: 40px 0 20px;
	font-size: 1.6em;
	font-weight: 600;
	border-left: 2px solid transparent;
}

h3.mind::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
}
h3.mind {
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent) 1;
}

/* h4 */
h4.mind {
  position: relative;
  padding: 6px 4px;
  margin: 1.5em 0 1em;
  font-size: 1.2em;
}
h4.mind::after {
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px dotted #9bbfa3;
  margin-top: 0.4em;
}

/* ======================
   3.heal（癒しの手ほどき帖）
====================== */
h2.heal, h3.heal, h4.heal {
  font-family: "Hiragino Mincho ProN", serif;
  color: #5c4333;
  border: none;
}

/* h2 */
h2.heal {
	position: relative;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
	background-color: rgba(245, 245, 245, 1);
	padding: 0.5em 0;
	margin: 1em 0;
}

h2.heal::before,
h2.heal::after {
	content: '';
	display: block;
	position: absolute;
	width: 80%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
	left: 0;
}

h2.heal::before {
	top: 0;
}

h2.heal::after {
	bottom: 0;
}

/* h3 */
h3.heal {
	position: relative;
	padding: 12px, 16px, 12px, 20px;
	margin: 40px 0 20px;
	font-size: 1.6em;
	font-weight: 600;
	border-left: 2px solid transparent;
}

h3.heal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
}
h3.heal {
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent) 1;
}

/* h4 */
h4.heal {
  position: relative;
  padding: 6px 4px;
  margin: 1.5em 0 1em;
  font-size: 1.2em;
}
h4.heal::after {
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px dotted #bfa68b;
  margin-top: 0.4em;
}

/* ======================
   4.mama（育みのとまどい日誌）
====================== */
h2.mama, h3.mama, h4.mama {
  font-family: "Hiragino Mincho ProN", serif;
  color: #5c4333;
  border: none;
}

/* h2 */
h2.mama {
	position: relative;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
	background-color: rgba(245, 245, 245, 1);
	padding: 0.5em 0;
	margin: 1em 0;
}

h2.mama::before,
h2.mama::after {
	content: '';
	display: block;
	position: absolute;
	width: 80%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
	left: 0;
}

h2.mama::before {
	top: 0;
}

h2.mama::after {
	bottom: 0;
}

/* h3 */
h3.mama {
	position: relative;
	padding: 12px, 16px, 12px, 20px;
	margin: 40px 0 20px;
	font-size: 1.6em;
	font-weight: 600;
	border-left: 2px solid transparent;
}

h3.mama::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
}
h3.mama {
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent) 1;
}

/* h4 */
h4.mama {
  position: relative;
  padding: 6px 4px;
  margin: 1.5em 0 1em;
  font-size: 1.2em;
}
h4.mama::after {
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px dotted #bfa68b;
  margin-top: 0.4em;
}


/* ======================
   5.forest（精霊たちと心の森めぐり）
====================== */
h2.forest, h3.forest, h4.forest{
  font-family: "Hiragino Mincho ProN", serif;
  color: #5c4333;
  border: none;
}

/* h2 */
h2.forest {
	position: relative;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
	background-color: rgba(245, 245, 245, 1);
	padding: 0.5em 0;
	margin: 1em 0;
}

h2.forest::before,
h2.forest::after {
	content: '';
	display: block;
	position: absolute;
	width: 80%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
	left: 0;
}

h2.forest::before {
	top: 0;
}

h2.forest::after {
	bottom: 0;
}

/* h3 */
h3.forest {
	position: relative;
	padding: 12px, 16px, 12px, 20px;
	margin: 40px 0 20px;
	font-size: 1.6em;
	font-weight: 600;
	border-left: 2px solid transparent;
}

h3.forest::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent);
}
h3.forest {
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, rgba(134, 124, 132, 1), rgba(134, 124, 132, 0.3), transparent) 1;
}

/* h4 */
h4.forest {
  position: relative;
  padding: 6px 4px;
  margin: 1.5em 0 1em;
  font-size: 1.2em;
}
h4.forest::after {
  content: "";
  display: block;
  height: 1px;
  border-bottom: 1px dotted #bfa68b;
  margin-top: 0.4em;
}