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

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


/*基本カスタマイズ*/



/* 見出しのデザインリセット */
.article h3,.article h4,.article h5,.article h6{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/*見出し3カスタマイズ*/
.article h3{
	border-top : 1px solid #1b813e;
	border-bottom: 1px solid #1b813e;
	border-left: 7px solid #1b813e;
	border-right: 1px solid #1b813e;
    padding: 8px 20px;
	line-height: 1.6em;
	font-size: 1.2em;/*サイズ*/
}

/*見出し4カスタマイズ*/
.article h4{
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4em;/*行高*/
  color: #333333;/*文字色*/
  font-size: 1.1em;/*サイズ*/
  border-bottom: solid 2px #1b813e;
  background: #ffffff;
}

.article h4:before {
 font-family: FontAwesome;/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #1b813e; /*アイコン色*/
}

/*見出し5カスタマイズ*/
.article h5{
	color: #333333;
	font-size: 1.0em;
	line-height: 1.2em;
}

/*見出し6カスタマイズ*/
.article h6{
	color: #666666;
	font-size: 0.95em;
	line-height: 1.0em;
}

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

@media screen and (max-width: 480px){
	.box-green .box-title {
		font-size: 16px;/* タイトル文字の大きさ */
	}
}


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

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

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