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

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

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

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

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

/*---------------------------------------
* 各種設定、ここから追記
*---------------------------------------*/


/* 目次カスタマイズ　ここからhttps://digipress.info/members/expert-customize/toc-custom-css-sample//*/

/* TOC+ */
#toc_container{
	margin:20px auto 30px;
	background-color:rgba(44,153,181,.04); /* 目次全体の背景カラー */
	border:3px solid rgba(64,105,144,.2); /* 目次全体の枠線 */
	border-radius:3px;
	box-sizing:border-box;
	padding:38px 52px;
	display:table;
	min-width: 68%;
	counter-reset:li;
}
 
/* テーマによるリストの装飾を一旦無効化 */
#toc_container ul.toc_list li::before{
	content:none;
	padding:0;
	margin:0;
	width:0;
	height:0;
	background:none;
	box-shadow:none;
}
 
/* 目次の見出しタイトル */
#toc_container .toc_title{
	text-align:center;
	font-weight:bold;
	font-size:118%;
	padding:0;
}
 
/* 見出しタイトル左のアイコン */
#toc_container .toc_title::before{
	position:relative;
	font-size:28px;
	content:"\2254";
	display:inline-block;
	width:40px;
	height:40px;
	line-height:38px;
	margin-right:8px;
	border-radius:50%;
	vertical-align:baseline;
	speak:none;
	-webkit-font-smoothing:antialiased;
	color:#fff;
	background-color:#5f7b96;
}
 
/* 表示／非表示トグル */
#toc_container .toc_toggle a{
	font-size:13px;
	font-weight:normal;
	padding:2px 4px;
}
 
/* 目次エリア */
#toc_container p.toc_title + ul.toc_list{
	padding:20px 0 0;
	margin:20px 0 0;
	border-top:1px solid rgba(0,0,0,.1);
}
 
/* リスト共通スタイル */
#toc_container ul.toc_list li{
	position:relative;
	padding:0;
	margin:0;
}
 
/* 目次リンク共通スタイル */
#toc_container ul.toc_list li a{
	position:relative;
	font-size:94%;
	font-weight:normal;
	text-decoration:none;
	display:inline-block;
	line-height:1.6;
	padding:3px 0;
	margin:5px 0;
	transition:all .3s ease;
}
#toc_container ul.toc_list a,
#toc_container ul.toc_list a:visited{
	color:#5f7b96; /* リンクカラー */
}
/* マウスオーバー時 */
#toc_container ul.toc_list li a:hover{
	text-decoration:none;
	box-shadow:0 2px;
}
 
/* 親の目次 */
#toc_container ul.toc_list > li > a{
	font-size:104%;
	font-weight:bold;
	margin-left:60px;
}
 
/* 親の目次(左側の連番) */
#toc_container ul.toc_list > li::before,
#toc_container ul.toc_list > li::after{
	position:absolute;
	top:3px;
	left:10px;
}
/* 連番背景 */
#toc_container ul.toc_list > li::before{
	content:'';
	display:inline-block;
	vertical-align:bottom;
	width:32px;
	height:32px;
	margin-right:7px;
	border-radius:16px;
	background-color:rgba(125,157,188,0.66);
}
/* 連番 */
#toc_container ul.toc_list > li::after{
	counter-increment:li;
	content:counter(li);
	width:32px;
	line-height:32px;
	font-family:'Avenir Next', 'Helvetica Neue', Arial, 'Meiryo','Yu Gothic', san-serif;
	font-weight:400;
	text-align:center;
	color:#fff;
}
 
/* 子の目次 */
#toc_container ul.toc_list > li > ul{
	margin-left:40px;
}
 
/* 子の目次の左側のアイコン */
#toc_container ul.toc_list > li ul li::before{
	position:absolute;
	top:6px;
	left:0;
	content:'\2023';
	display: inline-block;
	width:14px;
	height:30px;
	line-height:30px;
	font-size:35px;
	color:#5f7b96;
}
#toc_container ul.toc_list > li ul li a{
	font-weight: normal;
	margin-left:30px;
}
 
/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
	#toc_container{
		padding:20px 3vw;
		min-width:auto;
		width:100%!important;
	}
	#toc_container p.toc_title + ul.toc_list{
		padding:20px 0 0;
	}
	#toc_container ul.toc_list > li > ul{
		margin-left:30px;
	}
}

/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
	/* 見出しタイトル左のアイコン */
	#toc_container .toc_title::before{
	position:relative;
	font-size:20px;
	content:"\2254";
	display:inline-block;
	width:25px;
	height:25px;
	line-height:25px;
	margin-right:8px;
	border-radius:50%;
	}
	/* 親の目次 */
	#toc_container ul.toc_list > li > a{
	font-size:100%;
	font-weight:bold;
	margin-left:30px;
	}
	/* 親の目次(左側の連番) */
	#toc_container ul.toc_list > li::before,
	#toc_container ul.toc_list > li::after{
	position:absolute;
	top:9px;
	left:0px;
	}
	/* 連番背景 */
	#toc_container ul.toc_list > li::before{
	content:'';
	display:inline-block;
	vertical-align:bottom;
	width:22px;
	height:22px;
	margin-right:7px;
	border-radius:16px;
	}
	/* 連番 */
	#toc_container ul.toc_list > li::after{
	counter-increment:li;
	content:counter(li);
	width:22px;
	line-height:22px;
	font-weight:400;
	color:#fff;
	}
	/* 子の目次 */
	#toc_container ul.toc_list > li > ul{
	margin-left:10px;
	}
	/* 子の目次の左側のアイコン */
	#toc_container ul.toc_list > li ul li::before{
	position:absolute;
	top:3px;
	left:0;
	content:'\2023';
	display: inline-block;
	width:10px;
	height:25px;
	line-height:25px;
	font-size:30px;
	color:#5f7b96;
	}
	#toc_container ul.toc_list > li ul li a{
	font-weight: normal;
	margin-left:30px;
	}
}

/* 目次カスタマイズ　ここまで*/

/*---------------------------------------
* 見出しの設定ココから
*---------------------------------------*/

/* ★★ 見出し設定ここから ★ */
/* ここから取得https://www.nxworld.net/tips/50-css-heading-styling.html */

/* -----------h1-------------- */
/* h1 シンプル太さ 色*/
.article h1 {
	padding-bottom: .3em;
	border-bottom: 1px solid .article h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
.article h1:first-letter {
	margin-right: .1em;
	font-size: 1.7em;
};
}
.article h1:first-letter {
	margin-right: .1em;
	font-size: 1.7em;
}
/* h1 シンプル太さ 色*/
/* h1 home タイトルだけフォント*/
.home h1 {
	font-family: 'Poiret One', cursive;
	font-weight:900; 
}
/* h1 home タイトルだけフォント*/

/* -----------h2-------------- */
/* h2 背景リボンcountなし*/
.article h2 {
	font-size: 1.5rem;
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
	border-left: none;
	text-align:center;
}


/*480px以下*/
@media screen and (max-width: 480px){
.article h2 {
font-size: 1.2rem;
}
}


/* h2 背景リボンcountなし*/


/* -----------h3-------------- */


.article h3 {
  padding: .75em 0 .25em .75em;
  border-left: none;
margin-left:0.1em;
}
.article h3 {
	padding: .5em .5em .5em 1em;
	border-left: 5px solid #777;
	border-bottom: none;
	margin-left:-1.3em;
}
/*480px以下*/
@media screen and (max-width: 480px){
.article h3 {
font-size: 1.1rem;
}
}


/* -----------h4-------------- */
/* h4 線の種類（●〇重ね）*/


body:not(.home) h4 {
  border-top: 1px solid #fff;
  position: relative;
  padding: 0 .5em .5em 2em;
  border-bottom: 1px solid #ccc;
}
body:not(.home) h4::before,
.article h4::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
body:not(.home) h4::before {
  top: .0em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: rgba(150, 150, 150, .5);
}
body:not(.home) h4::after {
  top: .4em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: rgba(210, 210, 210, .5);
}

/* h4 線の種類（●〇重ね）*/

/*home top　h4 だけ見出し */


.home h4{
	text-align: center;
   font-size: 20px;
}

.home h4{
	color: #333333;/*文字色*/
	padding: 0.5em;/*文字周りの余白*/
	line-height: 1.5;/*行高*/
	background: #F6F6F6;/*背景色*/
	text-shadow:1px 1px 0 white,-1px 1px 0 white,1px -1px 0 white,-1px -1px 0 white;
	vertical-align: middle;
	border-radius: 40px 40px 40px 40px;/*左側の角を丸く*/
	margin: 0em 0 0em 0;
	border-top: 1px solid #ccc;/*上の線を薄くグレーに　fffにしたらcocoonデフォのグレー線消える*/
	border-bottom: 1px solid #ccc;/*下の線を薄くグレーに　fffにしたらcocoonデフォのグレー線消える*/
}



/*見出しを画像の上に重ね調整 ⇊*/
.home h4{
	z-index: 30;/*追加*/
	position: relative;/*追加*/
	
}
img.one{
position:relative; z-index: 20; }
img.two{
position:relative; z-index: 10; }
/*見出しを画像の上に重ね調整⇈ */

/*home top　h4 だけ見出し（見出しの重ね調整したけど没）⇈ */

.three {
  top: -45px;
}

/*見出しを画像の上に重ね調整 見出しをclass threeにする↑*/

/*home top　h4 だけ見出し */

/*480px以下*/
@media screen and (max-width: 480px){
.article h4 {
font-size: 1.0rem;
}
}


/* -----------h5-------------- */
/* h5 の設定 */


.article h5 {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #f8f8ff;
  font-size: 18px;
  color: #696969;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom:solid 1px #a9a9a9;
  z-index:-2;
}

.article h5:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.article h5:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}


/* h5 の設定 */

/* -----------h6-------------- */
/* h6 の設定途中までの薄い線 */
.article h6{
	font-size: 1.2rem;
}
/* h6 の設定途中までの薄い線 */

/* ★★ 見出し設定ここまで ★ */


/*---------------------------------------
* 見出しの設定ここまで
*---------------------------------------*/

/*---------------------------------------
* BOX設定ココから
*---------------------------------------*/


/* パンチ　BOX　Ａ */
.punch-box-a {
 position: relative;
 margin: 2em auto;
 padding: 40px 20px 15px;
 width: 90%; /* ボックス幅 */
 background-color: #f7f7f7; /* ボックス背景色 */
 color: #666666; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 2px #ccc; /* 影 */
}
.punch-box-a::before, 
.punch-box-a::after {
 position: absolute;
 content: '';
 top: 10px;
 width: 18px;
 height : 18px;
 background-color: #fff; /*穴背景色*/
 box-shadow: -1px -1px 8px #cccccc inset;
 border: 1px solid #ccc; /*穴*/
 border-radius: 50%;
}
.punch-box-a::before { left: 140px;}
.punch-box-a::after { right: 140px;}



/* 通常BOX系設定ここまで */





/* タイトル付BOX　黒シンプル　*/

/* タイトル付　枠　listなし▶　*/
.kakomi-box0 {
font-size: 1.125rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 1rem 1.5625rem 1rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box0 {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}




/* タイトル付　枠　list込み　*/
.kakomi-box11 {
font-size: 1.0625rem;
 position: relative;
 margin: 2em auto;
padding: 20px 25px 18px 15px;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 45px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}


/*------------------------　ノーマル　----------------------------*/

/* タイトル付　枠　list込み　*/
.kakomi-normal {
font-size: 1.0625rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 0rem 1.625rem 0rem 1.625rem;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 border-radius:7px; /* ボックス角丸 */
 width: 95%;
}
.title-normal {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
	font-size: 1.0625rem;
}

/* タイトル付　枠　list込み -見やすい番号リスト破線付き- */
.ol_normal{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}
.ol_normal li{
  border-bottom: dashed 1px grey;
  position: relative;
  padding: 0.5em 0.5em 0.5em 40px;
  line-height: 2em;

}
.ol_normal li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: grey;
  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%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.ol_normal li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}


/*------------------------　Pink　----------------------------*/

/* タイトル付　枠　pink用　*/
.kakomi-pink {
font-size: 1.0625rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 0rem 1.5625rem 0rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #FFF8F9; /* 背景色 */
 border: 2px solid #EB6980; /* 枠線の太さ・色 */
 border-radius:7px; /* ボックス角丸 */
 width: 95%;
}
.title-pink {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #FFF8F9; /* タイトル背景色 */
 color: #EB6980; /* タイトル文字色 */
}


/* タイトル付　枠　list込み -見やすいpink番号リストpink破線付き- */

.ol_pink{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}
.ol_pink li{
  border-bottom: dashed 1px #CE5065;
  position: relative;
  padding: 0.5em 0.5em 0.5em 40px;
  line-height: 2em;

}
.ol_pink li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #CE5065;
  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%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.ol_pink li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}


/*------------------------　Yellow　----------------------------*/

/* タイトル付　枠　yellow用　*/
.kakomi-yellow {
font-size: 1.0625rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 0rem 1.5625rem 0rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #FFFFF0; /* 背景色 */
 border: 2px solid #FFD700; /* 枠線の太さ・色 */
 border-radius:7px; /* ボックス角丸 */
 width: 95%;
}
.title-yellow {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #FFFFF0; /* タイトル背景色 */
 color: #ee7800; /* タイトル文字色 */
}


/* タイトル付　枠　list込み -見やすいyellow番号リストyellow破線付き- */

.ol_yellow{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
	margin: 0rem 0rem 0rem 0.625rem; /**/
}
.ol_yellow li{
  border-bottom: dashed 1px #FFD700;
  position: relative;
  padding: 0.5em 0.5em 0.5em 40px;
  line-height: 2em;

}
.ol_yellow li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #ee7800;
  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%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.ol_yellow li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}

/*------------------------　Green　----------------------------*/

/* タイトル付　枠　green用　*/
.kakomi-green {
font-size: 1.0625rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 0rem 1.5625rem 0rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #F0FFF0; /* 背景色 */
 border: 2px solid #98E093; /* 枠線の太さ・色 */
 border-radius:7px; /* ボックス角丸 */
 width: 95%;
}
.title-green {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #F0FFF0; /* タイトル背景色 */
 color: #008015; /* タイトル文字色 */
}



/* タイトル付　枠　list込み -見やすいyellow番号リストyellow破線付き- */

.ol_green{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}
.ol_green li{
  border-bottom: dashed 1px #98E093;
  position: relative;
  padding: 0.5em 0.5em 0.5em 40px;
  line-height: 2em;

}
.ol_green li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #008015;
  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%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.ol_green li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}


/*------------------------　Blue　----------------------------*/
/* タイトル付　枠　blue用　*/
.kakomi-blue {
font-size: 1.0625rem;
 position: relative;
 margin: 3.5rem 0rem 2.5rem 1rem;
padding: 0rem 1.5625rem 0rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #F0FFFF; /* 背景色 */
 border: 2px solid #00ECFF; /* 枠線の太さ・色 */
 border-radius:7px; /* ボックス角丸 */
 width: 95%;
}
.title-blue {
 position: absolute;
 padding: 0 .5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #F0FFFF; /* タイトル背景色 */
 color: #0077b3; /* タイトル文字色 */
}



/* タイトル付　枠　list込み -見やすいyellow番号リストyellow破線付き- */

.ol_blue{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
}
.ol_blue li{
  border-bottom: dashed 1px #00ECFF;
  position: relative;
  padding: 0.5em 0.5em 0.5em 40px;
  line-height: 2em;

}
.ol_blue li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #0077b3;
  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%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.ol_blue li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}











/* タイトル付BOX gray chart*/
.box2-gray{
	font-size: 18px;
	margin: 2em auto; /* ボックスの余白 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	border:1px solid #ccc; /* ボックス線 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box2-gray .box-title {
	background: #F6F6F6; /* タイトル背景色 */
	color: #565656; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-bottom:1px solid #ccc;	/* タイトル下線（追加） */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box2-gray p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

/* タイトル付BOX gray chart*/



/* タイトル付BOX black chart*/
.box2-black{
	font-size: 18px;
	margin: 2em auto; /* ボックスの余白 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	border:1px solid #333333; /* ボックス線 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box2-black .box-title {
	background: #333333; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box2-black p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

/* タイトル付BOX gray chart*/



/* ノーマル▶リストの設定 */
ul.sankaku {
  padding: 0 0.5em;
  position: relative;
}
ul.sankaku li {
  line-height: 1.5;
  padding: 0.5rem 0rem 0.5rem 1.4rem;

	
	
	
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.sankaku li:before {
  font-family: FontAwesome;
  content: "\f04B";/*アイコン種類*/
  position: absolute;
  left :10px; /*左端からのアイコンまで*/
  color: #555555 /*アイコン色*/
}
ul.sankaku li:last-of-type{
  border-bottom: none;
}

/* ノーマル▶リストの設定 タイトル付きboxとの合わせ技 */

.kakomi-box0 ul.sankaku{
margin: -10px 0px -25px 0px;
padding: 0px 0px 15px 15px;
}

/* ノーマル▶リストの設定 タイトル付きboxとの合わせ技ここまで */






/* -----------infomation系------------- */

/* 補足情報「？」「i」共に黄色 */
.question{
border:2px;
border-style: solid; border-color: #FFD700;
}
.question::before {
    color: #FFD700;
}

.information{
border:2px;
border-style: solid; border-color: #87CEFA;
}
.information::before {
    color: #87CEFA;
}


/* 補足情報「！」赤色 */
.alert{
border:2px;
border-style: solid; border-color: #FFA07A;
}

/* -----------大きな枠組み------------- */

/* 「黄」BOX枠線・背景色 */
.sp-warning{
border:2px;
border-style: solid; border-color: #FFD700;
background-color:#ffffdf;
}

/* 「青」BOX枠線・背景色 */
.sp-info{
border:2px;
border-style: solid; border-color: #B0C4DE;
background-color:#F0FFFF;
}

/* 「緑」BOX枠線・背景色 */
.sp-success{
border:2px;
border-style: solid; border-color: #8FBC8F;
background-color:#efffef;
}

/* 「赤」BOX枠線・背景色 */
.sp-danger{
border:2px;
border-style: solid; border-color: #FFA07A;
background-color:#fff8f8;
}

/* ベージュBOX枠線・背景色 */
.sp-soft{
border:2px;
border-style: solid; border-color: #dede8c;
background-color:#f5f5dc;
}

line-height: 32px; 
padding: 0.8em 0.8em 0.8em 0.8em;
position: relative;
}

/*---------------------------------------
* cocoonBOX の色合い変更　
*---------------------------------------*/




/*補足情報（！）*/
.information-box{
border:1px;
border-style: solid;
border-color: #A4C6FF;
background-color:#F0FFFF;
}
.information-box::before {
color: #00ECFF;
}


/*補足情報（？）*/
.question-box{
border:1px;
border-style: solid;
border-color: #FFD700;
background-color:#FFFFF0;
}
.question-box::before {
color: #FFD700;
}


/*注意喚起（！）*/
.alert-box{
border:1px;
border-style: solid;
border-color: #EB6980;
background-color:#FFF8F8;
}
.alert-box::before {
color: #FF69A3;
}


/*メモ memo-box*/
.memo-box{
border:1px;
border-style: solid;
border-color: #01100b;
background-color:#FFFFFF;
	
}
.memo-box::before {
color: #01100b;
border-right:1px solid;
opacity: 0.5;
border-color:#01100b;	
}


/*ＯＫ*/
.ok-box{
border:1px;
border-style: solid;
border-color: #A4C6FF;
background-color:#F0FFFF;
}
.ok-box::before {
color: #00ECFF;
}

/*ＮＧ*/
.ng-box{
border:1px;
border-style: solid;
border-color: #FF0461;
background-color:#FFEDF2;
}
.ng-box::before {
color: #FF0461;
}

/*ＧＯＯＤ*/
.good-box{
border:1px;
border-style: solid;
border-color: #98E093;
background-color:#F0FFF0;
}
.good-box::before {
color: #7FFF00;
}

/*ＢＡＤ*/
.bad-box{
border:1px;
border:1px;
border-style: solid;
border-color: #EB6980;
background-color:#FFF8F8;
}
.bad-box::before {
color: #FF6691;
}


/**********************************/
/* ＯＫを黄色に変更処理 */
/********************************/
.ok-box{
border:1px;
border-style: solid;
border-color: #FFD700;
background-color:#FFFFF0;
}
.ok-box::before {
color: #FFD700;
border-right:1px solid;
border-color:#FFD700;
}
/**********************************/
/* ＯＫを黄色に変更処理 */
/********************************/
/*------profアイコン語りを自分版で作成---------┐*/

.jibun-box{
  padding: 20px 20px 20px 72px;
  border-radius: 4px;
  position: relative;
  display: block;
border:1px;
border-style: solid;
border-color: #DDDDDD;
background-color:#FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.jibun-box::before {
	
display: inline-block;
position: absolute;
content: url(https://www.eisaisha.com/wp-content/uploads/eueueueu.png) ;
  font-size: 34px;
  position: absolute;
  padding-right: .15em;
  line-height: 1em;
  top: 40%;
  margin-top: -.5em;
  left: 7px;
  width: 44px;
  text-align: center;
border-right:1px solid;
border-color:#DDDDDD;	
}

.jibun-box p {
position: relative;
padding: 0;
margin: 10px 0;
line-height: 1.6;
}


@media screen and (max-width: 440px) {
.jibun-box {
    padding: 50px 6px 6px;
  }
	
.jibun-box::before {
    padding: 0;
    top: 0.7em;
    left: 45%;
    margin-left: -0.5em;
    font-size: 18px;
    border: none;
    width: auto;
}}

/*------profアイコン語りを自分版で作成---------┘*/

/**********************************/
/* 案内系　これをタイトル付きに変える */
/********************************/
/*------　ここまで　まだ、OLのほうボックス（案内）で8種設定必要…あとスマホサイズ-------------*/

/* プライマリー（濃い水色）---------------------------------------------------┐ */
.primary-box{
	border:1px;
border-style: solid;
border-color: #0077b3;
background-color:#F0FFFF;
	margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/* プライマリー（濃い水色）タイトル */


.title-primary {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#F0FFFF; /* タイトル背景色 */
 color: #0077b3; /* タイトル文字色 */
}

/* プライマリー（濃い水色）✓✓✓ ┐*/
ul.check-primary {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-primary li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-primary li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #0077B3; /*アイコン色*/
}

/* プライマリー（濃い水色）✓✓✓ ┘*/

/* プライマリー（濃い水色）▶▶▶ ┐*/
ul.sankaku-primary {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-primary li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.sankaku-primary li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #0077B3; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* プライマリー（濃い水色）▶▶▶ ┘*/


/* プライマリー（濃い水色）①②③ ┐*/
ol.bangou-primary {
	counter-reset: li;
}

ol.bangou-primary > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-primary li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-primary > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #0066CC; /*ボタン色*/
	border: 2px solid #0077B3; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/* プライマリー（濃い水色）①②③ ┘*/


/* プライマリー（濃い水色）---------------------------------------------------┘ */


/*セカンダリー（濃い灰色）---------------------------------------------------┐*/
.secondary-box{
border:1px;
border-style: solid; border-color: #555555;
background-color:#f8f8f8f8;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*セカンダリー（濃い灰色）タイトル*/
.title-secondary {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#f8f8f8; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}

/*セカンダリー（濃い灰色）✓✓✓┐*/
ul.check-secondary {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-secondary li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555; /*リストの文字色*/
}
ul.check-secondary li:before {
  font-family: FontAwesome;
   content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #777777; /*アイコン色*/
}
/*セカンダリー（濃い灰色）✓✓✓┘*/

/*セカンダリー（濃い灰色）▶▶▶┐*/
ul.sankaku-secondary {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-secondary li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}
ul.sankaku-secondary li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #777777; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*セカンダリー（濃い灰色）▶▶▶┘*/


/*セカンダリー（濃い灰色）①②③┐*/
ol.bangou-secondary {
	counter-reset: li;
}

ol.bangou-secondary > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-secondary li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-secondary > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #949799; /*ボタン色*/
	border: 2px solid #666666; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*セカンダリー（濃い灰色）①②③┘*/

/*セカンダリー（濃い灰色）---------------------------------------------------┘*/



/*サクセス（薄い緑）---------------------------------------------------┐*/
.success-box{
border:1px;
border-style: solid;
border-color: #008015;
background-color:#F0FFF0;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*サクセス（薄い緑）タイトル*/
.title-success {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#F0FFF0; /* タイトル背景色 */
 color: #008015; /* タイトル文字色 */
}

/*サクセス（薄い緑）✓✓✓┐*/
ul.check-success {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-success li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-success li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #008015; /*アイコン色*/
}
/*サクセス（薄い緑）✓✓✓┘*/


/*サクセス（薄い緑）▶▶▶┐*/
ul.sankaku-success {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-success li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}
ul.sankaku-success li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #008015; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*サクセス（薄い緑）▶▶▶┘*/


/*サクセス（薄い緑）①②③┐*/
ol.bangou-success {
	counter-reset: li;
}

ol.bangou-success > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-success li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-success > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #00AA00; /*ボタン色*/
	border: 2px solid #008015; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*サクセス（薄い緑）①②③┘*/

/*サクセス（薄い緑）---------------------------------------------------┘*/



/*インフォ（薄い青）---------------------------------------------------┐*/
.info-box{
border:1px;
border-style: solid;
border-color: #6666FF;
background-color:#F0F8FF;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/*インフォ（薄い青）タイトル*/
.title-info {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#F0F8FF; /* タイトル背景色 */
 color: #0077b3; /* タイトル文字色 */
}

/*インフォ（薄い青）✓✓✓┐*/
ul.check-info {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-info li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-info li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #6666FF; /*アイコン色*/
}
/*インフォ（薄い青）✓✓✓┘*/

/*インフォ（薄い青）▶▶▶┐*/
ul.sankaku-info {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-info li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}
ul.sankaku-info li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #0077b3; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*インフォ（薄い青）▶▶▶┘*/

/*インフォ（薄い青）①②③┐*/
ol.bangou-info {
	counter-reset: li;
}

ol.bangou-info > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-info li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-info > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #5D99FF; /*ボタン色*/
	border: 2px solid  #0077b3;; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*インフォ（薄い青）①②③┘*/

/*インフォ（薄い青）---------------------------------------------------┘*/


/*ワーニング（薄い黄色）---------------------------------------------------┐*/
.warning-box{
border:1px;
border-style: solid; border-color: #EE7800;
background-color:#FFFFF0;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*ワーニング（薄い黄色）タイトル*/
.title-warning {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#FFFFF0; /* タイトル背景色 */
 color: #EE7800; /* タイトル文字色 */
}

/*ワーニング（薄い黄色）✓✓✓┐*/
ul.check-warning {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-warning li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-warning li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #EE7800; /*アイコン色*/
}
/*ワーニング（薄い黄色）✓✓✓┘*/

/*ワーニング（薄い黄色）▶▶▶┐*/
ul.sankaku-warning {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-warning li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}
ul.sankaku-warning li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #EE7800; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*ワーニング（薄い黄色）▶▶▶┘*/

/*ワーニング（薄い黄色）①②③┐*/
ol.bangou-warning {
	counter-reset: li;
}

ol.bangou-warning > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-warning li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-warning > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #FF8856; /*ボタン色*/
	border: 2px solid #EE7800; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*ワーニング（薄い黄色）①②③┘*/

/*ワーニング（薄い黄色）---------------------------------------------------┘*/


/*デンジャー（薄い赤色）---------------------------------------------------┐*/
.danger-box{
border:1px;
border-style: solid; border-color: #EB6980;
background-color:#FFF8F8;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*デンジャー（薄い赤色）タイトル*/
.title-danger {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#FFF8F8; /* タイトル背景色 */
 color: #EB6980; /* タイトル文字色 */
}

/*デンジャー（薄い赤色）✓✓✓┐*/
ul.check-danger {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-danger li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-danger li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #EB6980; /*アイコン色*/
}
/*デンジャー（薄い赤色）✓✓✓┘*/

/*デンジャー（薄い赤色）▶▶▶┐*/
ul.sankaku-danger {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-danger li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}
ul.sankaku-danger li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #EB6980; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*デンジャー（薄い赤色）▶▶▶┘*/

/*デンジャー（薄い赤色）①②③┐*/
ol.bangou-danger {
	counter-reset: li;
}

ol.bangou-danger > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-danger li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-danger > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #FF82B2; /*ボタン色*/
	border: 2px solid #EB6980;; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*デンジャー（薄い赤色）①②③┘*/

/*デンジャー（薄い赤色）---------------------------------------------------┘*/

/*ライト（白色）---------------------------------------------------┐*/
.light-box{
border:1px;
border-style: solid; border-color: #999999;
background-color:#FFFFFF;
	margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: #555555; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*ライト（白色）タイトル*/
.title-light {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#FFFFFF; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}

/*ライト（白色)✓✓✓┐*/
ul.check-light {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-light li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#333333 /*リストの文字色*/
}
ul.check-light li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #777777; /*アイコン色*/
}
/*ライト（白色)✓✓✓┘*/

/*ライト（白色)▶▶▶┐*/
ul.sankaku-light {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-light li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#333333; /*リストの文字色*/
}
ul.sankaku-light li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #777777; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*ライト（白色)▶▶▶┘*/

/*ライト（白色)①②③┐*/
ol.bangou-light {
	counter-reset: li;
}

ol.bangou-light > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-light li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-light > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #EEEEEE; /*ボタン色*/
	border: 1px solid #666666; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #708090; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*ライト（白色)①②③┘*/


/*ライト（白色）---------------------------------------------------┘*/


/*ダーク（暗い灰色）---------------------------------------------------┐*/
.dark-box{
border:1px;
border-style: solid; border-color: black;
background-color:#E6E6E6;
		margin:3.5rem 0rem 4rem 0rem;/* box上下のスペース設定*/
color: black; /* 文章色 　次のポジション指定ででタイトル付与可*/
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/*ダーク（暗い灰色）タイトル*/
.title-dark {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color:#E6E6E6; /* タイトル背景色 */
 color: black; /* タイトル文字色 */

}

/*ダーク（暗い灰色）✓✓✓┐*/
ul.check-dark {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-dark li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:black; /*リストの文字色*/
}
ul.check-dark li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: black; /*アイコン色*/
}
/*ダーク（暗い灰色）✓✓✓┘*/

/*ダーク（暗い灰色）▶▶▶┐*/
ul.sankaku-dark {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku-dark li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:black; /*リストの文字色*/
}
ul.sankaku-dark li:before {
  font-family: FontAwesome;
  content: "\f276";/*アイコン種類*/
  position: absolute;
  left :0.8rem; /*左端からのアイコンまで*/
  color: #444444; /*アイコン色*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/*ダーク（暗い灰色）▶▶▶┘*/


/*ダーク（暗い灰色）①②③┐*/
ol.bangou-dark {
	counter-reset: li;
}

ol.bangou-dark > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.bangou-dark li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.bangou-dark > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #555555; /*ボタン色*/
	border: 2px solid #8f8f8f; /*〇を囲むボーダーの太さと色y*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}
/*ダーク（暗い灰色）①②③┘*/

/*ダーク（暗い灰色）---------------------------------------------------┘*/

/*----　ボックスリスト内の　最初行と最終行の位置取り-----------------*/
ul.check-primary li:first-of-type,dl.check-primary dt:first-of-type,
ul.sankaku-primary li:first-of-type,dl.sankaku-primary dt:first-of-type,
ul.bangou-primary li:first-of-type,dl.bangou-primary dt:first-of-type,

ul.check-secondary li:first-of-type,dl.check-secondary dt:first-of-type,
ul.sankaku-secondary li:first-of-type,dl.sankaku-secondary dt:first-of-type,
ul.bangou-secondary li:first-of-type,dl.bangou-secondary dt:first-of-type,

ul.check-success li:first-of-type,dl.check-success dt:first-of-type,
ul.sankaku-success li:first-of-type,dl.sankaku-success dt:first-of-type,
ul.bangou-success li:first-of-type,dl.bangou-success dt:first-of-type,

ul.check-info li:first-of-type,dl.check-info dt:first-of-type,
ul.sankaku-info li:first-of-type,dl.sankaku-info dt:first-of-type,
ul.bangou-info li:first-of-type,dl.bangou-info dt:first-of-type,

ul.check-warning li:first-of-type,dl.check-warning dt:first-of-type,
ul.sankaku-warning li:first-of-type,dl.sankaku-warning dt:first-of-type,
ul.bangou-warning li:first-of-type,dl.bangou-warning dt:first-of-type,

ul.check-danger li:first-of-type,dl.check-danger dt:first-of-type,
ul.sankaku-danger li:first-of-type,dl.sankaku-danger dt:first-of-type,
ul.bangou-danger li:first-of-type,dl.bangou-danger dt:first-of-type,

ul.check-light li:first-of-type,dl.check-light dt:first-of-type,
ul.sankaku-light li:first-of-type,dl.sankaku-light dt:first-of-type,
ul.bangou-light li:first-of-type,dl.bangou-light dt:first-of-type,

ul.check-dark li:first-of-type,dl.check-dark dt:first-of-type,
ul.sankaku-dark li:first-of-type,dl.sankaku-dark dt:first-of-type,
ul.bangou-dark li:first-of-type,dl.bangou-dark dt:first-of-type{
	padding-top:1.3rem; /*タイトルと最初のリストの間の余白*/
}


ul.check-primary li:last-of-type,dl.check-primary dd:last-of-type,
ul.sankaku-primary li:last-of-type,dl.sankaku-primary dd:last-of-type,
ol.bangou-primary li:last-of-type,dl.bangou-primary dd:last-of-type,

ul.check-secondary li:last-of-type,dl.check-secondary dd:last-of-type,
ul.sankaku-secondary li:last-of-type,dl.sankaku-secondary dd:last-of-type,
ol.bangou-secondary li:last-of-type,dl.bangou-secondary dd:last-of-type,

ul.check-success li:last-of-type,dl.check-success dd:last-of-type,
ul.sankaku-success li:last-of-type,dl.sankaku-success dd:last-of-type,
ol.bangou-success li:last-of-type,dl.bangou-success dd:last-of-type,

ul.check-info li:last-of-type,dl.check-info dd:last-of-type,
ul.sankaku-info li:last-of-type,dl.sankaku-info dd:last-of-type,
ol.bangou-info li:last-of-type,dl.bangou-info dd:last-of-type,

ul.check-warning li:last-of-type,dl.check-warning dd:last-of-type,
ul.sankaku-warning li:last-of-type,dl.sankaku-warning dd:last-of-type,
ol.bangou-warning li:last-of-type,dl.bangou-warning dd:last-of-type,

ul.check-danger li:last-of-type,dl.check-danger dd:last-of-type,
ul.sankaku-danger li:last-of-type,dl.sankaku-danger dd:last-of-type,
ol.bangou-danger li:last-of-type,dl.bangou-danger dd:last-of-type,

ul.check-light li:last-of-type,dl.check-light dd:last-of-type,
ul.sankaku-light li:last-of-type,dl.sankaku-light dd:last-of-type,
ol.bangou-light li:last-of-type,dl.bangou-light dd:last-of-type,

ul.check-dark li:last-of-type,dl.check-dark dd:last-of-type,
ul.sankaku-dark li:last-of-type,dl.sankaku-dark dd:last-of-type,
ol.bangou-dark li:last-of-type,dl.bangou-dark dd:last-of-type{
  padding-bottom:1.5rem; /*最後のliの下だけ少し広めのパディング*/
}

/*----　ボックスリスト内の　最初行と最終行の位置取り-----------------*/





/*-----------　まとめてスマホ設定案内（box）のぶん　---------------------*/


/*834px以下*/
@media screen and (max-width: 834px){

/* box外部のスペース、内部のスペース */
.primary-box,.secondary-box,.success-box,.info-box,.warning-box,.danger-box,.light-box,.dark-box{
margin:2.5rem 0.0rem 4rem 0.0rem;/* box枠外の上下スペース*/
	padding:0.0rem 0.5rem 0.0rem 0.5rem;/* box内の上下スペース*/	
}
	

/* boxタイトルの位置取り（横スペース） */
.title-primary,.title-secondary,.title-success,.title-info,.title-warning,.title-danger,.title-light,.title-dark {
	left: 0.8rem;　/*タイトルの横スペース*/
font-size:0.9rem; /*タイトルの文字サイズ*/
}

/* box内リスト✓、文字などの位置取り（横スペース） */
	
/*------------------------✓✓✓リスト------------------------┐*/
ul.check-primary,ul.check-secondary,ul.check-success,ul.check-info,ul.check-warning,ul.check-danger,ul.check-light,ul.check-dark {
  padding: 0rem 0rem 0rem 0.0rem;	　/*本文の位置取り*/
}
	
ul.check-primary li,ul.check-secondary li,ul.check-success li,ul.check-info li,ul.check-warning li,ul.check-danger li,ul.check-light li,ul.check-dark li {
font-size:0.9rem;/*本文の文字サイズ*/
line-height: 2.0rem;/*本文の行間*/
}

ul.check-primary li:before,ul.check-secondary li:before,ul.check-success li:before,ul.check-info li:before,ul.check-warning li:before,ul.check-danger li:before,ul.check-light li:before,ul.check-dark li:before {
  left :0.2rem; /*左端からのアイコンまで*/	
}	
/*------------------------✓✓✓リスト------------------------┘*/
	
/*-------------------------▶▶▶リスト--------------------------┐*/

ul.sankaku-primary,ul.sankaku-secondary,ul.sankaku-success,ul.sankaku-info,ul.sankaku-warning,ul.sankaku-danger,ul.sankaku-light,ul.sankaku-dark {	
  padding: 0rem 0rem 0rem 0.0rem;	　/*本文の位置取り*/
}	
	
ul.sankaku-primary li,ul.sankaku-secondary li,ul.sankaku-success li,ul.sankaku-info li,ul.sankaku-warning li,ul.sankaku-danger li,ul.sankaku-light li,ul.sankaku-dark li {	
font-size:0.9rem;/*本文の文字サイズ*/
line-height: 2.0rem;/*本文の行間*/
}	
	
ul.sankaku-primary li:before,ul.sankaku-secondary li:before,ul.sankaku-success li:before,ul.sankaku-info li:before,ul.sankaku-warning li:before,ul.sankaku-danger li:before,ul.sankaku-light li:before,ul.sankaku-dark li:before {	
  left :0.2rem; /*左端からのアイコンまで*/	
}	

/*-------------------------▶▶▶リスト--------------------------┘*/

	
/*------------------------　①②③リスト　----------------------┐*/
	

ol.bangou-primary > li,ol.bangou-secondary > li,ol.bangou-success > li,ol.bangou-info > li,ol.bangou-warning > li,ol.bangou-danger > li,ol.bangou-light > li,ol.bangou-dark > li,ol.red-number > li {
font-size:0.9rem;/*本文の文字サイズ*/
line-height: 2.0rem;/*本文の行間*/
  padding-top:0.0rem;
	padding-left: 0.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}

ol.bangou-primary li:last-of-type,ol.bangou-secondary li:last-of-type,ol.bangou-success li:last-of-type,ol.bangou-info li:last-of-type,ol.bangou-warning li:last-of-type,ol.bangou-danger li:last-of-type,ol.bangou-light li:last-of-type,ol.bangou-dark li:last-of-type,ol.red-number li:last-of-type{
  padding-bottom:0.1rem; /*最後のliの下だけ少し広めのパディング*/
}


ol.bangou-primary > li:before,ol.bangou-secondary > li:before,ol.bangou-success > li:before,ol.bangou-info > li:before,ol.bangou-warning > li:before,ol.bangou-danger > li:before,ol.bangou-light > li:before,ol.bangou-dark > li:before,ol.red-number > li:before {
	border: 1px solid; /*〇を囲むボーダーの太さと色y*/
  font-weight:normal;/*太字に*/
  font-size: 0.85rem;/*数字の大きさ*/
	border-radius: 50%; /*丸く*/
	text-align:center; /*端に寄ってる数字を真ん中に*/
	width: 1.1rem; /*幅を決めるheightと同じ数値に*/
	height: 1.1rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.8rem; /*項目の基準、左にあわせる*/
	top: 0.4rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.3;/*数字の位置あわせで数値を指定*/
}
	


/*------------------------　①②③リスト　----------------------┘*/
	
}

/*-----------　まとめてスマホ設定案内（box）のぶん　---------------------*/



/**********************************/
/* 案内系　ここまで */
/********************************/

/**********************************/
/* ここから付箋BOX */
/********************************/

/*ボックス（付箋風）灰色*/
.blank-box.sticky {
border-color: #888888;
background-color:#f8f8f8;

color: #333333; /* 文章色 */
position: relative; /* 文章色 ここまで記述タイトル付与可*/
border-radius: 0.5rem;
	
}


/*ボックス（付箋風）黄色*/
.blank-box.sticky.st-yellow {
border-color: #FFD700;
background-color:#FFFFF0;
}

/*ボックス（付箋風）赤色*/
.blank-box.sticky.st-red {
border-color: #FF0461;
background-color:#FFEDF2;
}

/*ボックス（付箋風）青色*/
.blank-box.sticky.st-blue {
border-color: #A4C6FF;
background-color:#F0FFFF;
}

/*ボックス（付箋風）緑色*/
.blank-box.sticky.st-green {
border-color: #98E093;
background-color:#F0FFF0;
}

/*線の形状変更*/
.blank-box {border: 3px double;}

/*バッジを淡い色に変更https://sec.ayaito.net/cocoon/customize/14974/*/
.badge{background-color: #f0c886;}
.badge-red {background-color: #bf4762;}
.badge-pink {background-color: #ebb2cb;}
.badge-purple {background-color: #bb8bc7;}
.badge-blue {background-color: #92c1d6;}
.badge-green {background-color: #8bd9ac;}
.badge-yellow {background-color: #edde8a;}
.badge-brown {background-color: #9e735d;}
.badge-grey {background-color: #888888;}

/*バッジを少し大きく*/
.badge{
padding: 0.4375rem;
border-radius: 0.4375rem;
font-size: 0.875rem;
}


/*ボタンを淡い色に変更https://sec.ayaito.net/cocoon/customize/14984/*/
.btn-red{background-color: #bf4762;}
.btn-pink{background-color: #ebb2cb;}
.btn-purple{background-color: #bb8bc7;}
.btn-deep{background-color: #7b5980;}
.btn-indigo{background-color: #5475ab;}
.btn-blue{background-color: #0095d9;}
.btn-light-blue{background-color: #92c1d6;}
.btn-cyan{background-color: #89d1d6;}
.btn-teal{background-color: #85d4b0;}
.btn-green{background-color: #8bd9ac;}
.btn-light-green{background-color: #c6eb9b;}
.btn-lime{ background-color: #e2eba0;}
.btn-yellow{ background-color: #edde8a;}
.btn-amber{background-color: #edd793;}
.btn-orange{background-color: #e60033;}
.btn-deep-orange{background-color: #e6a583;}
.btn-brown{background-color: #8f6e5d;}
.btn-grey{background-color: #b9b9bd;}
.btn-blue-grey{background-color: #9aa5ab;}
.btn-black{background-color: #696666;}


/*---------------------------------------
* cocoonも含め BOX設定ここまで
*---------------------------------------*/

/*---------------------------------------
* リスト横並び　div classでul ol の前にくくる　https://bibabosi-rizumu.com/ol-list-design/
*---------------------------------------*/
.inline ol li {
	display: inline-block;
	margin-right: 1em;
}
/*---------------------------------------
* リスト横並び　div classでul ol の前にくくる
*---------------------------------------*/



/*---------------------------------------
* 他者サイト導入用念のため BOX設定
*---------------------------------------*/

.tasha-box {
    position: relative;
    margin: 3rem 1rem;
    padding: 0.0rem 0.5rem 0.5rem 1.0rem;
    border: solid 0.18rem #18A89F;
border-radius: 0.0rem 0.5rem 0.5rem 0.5rem;
}
/*-------　ボックスタイトルの設定　--------*/
.tasha-title {
    position: absolute;
    display: inline-block;
    top: -1.6875rem;
    left:-0.1875rem;
    padding: 0 9px;
    height: 1.5625rem;
    line-height: 1.75rem;
    font-size: 1.0625rem;
    background: #18A89F; /* タイトル背景色 */
    color: #ffffff; /* タイトル文字色 */
    font-weight: bold;
	border-radius: 0.5rem 0.5rem 0.0rem 0.0rem;
}

/*--------　✓✓✓　番号無しリストの設定---------*/
ul.tasha-check{
 padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}

ul.tasha-check li {
   line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
  color:#555555; /*リストの文字色*/
}

ul.tasha-check li:before {
 font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left : 0.5rem; /*左端からのアイコンまで*/
  color: #18A89F; /*アイコン色*/
}

/*834px以下*/
@media screen and (max-width: 834px){
ul.tasha-check li:before {
  position: absolute;
  left : 0rem; /*左端からのアイコンまで*/
}
ul.tasha-check li {
  line-height: 1.0rem;
  padding: 0.5rem 0rem 0.5rem 0rem;
  list-style-type: none!important;
}
}


/*----------　①②③　番号リストの設定-----------*/
ol.tasha-bangou{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0rem 0rem 0rem 0rem;
	margin: 0rem 0rem 0rem 0.625rem;
}
ol.tasha-bangou li{
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 2.0rem;
  line-height: 2.0rem;

}
ol.tasha-bangou li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #18A89F;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 0.9375rem;
  border-radius: 50%;
  left: -0.6rem; /*左端からのアイコンまで*/
  width: 1.5625rem;
  height: 1.5625rem;
  line-height: 1.5625rem;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 1.1rem;
  -moz-transform: translateY(-0.5rem);
  	-webkit-transform: translateY(-0.5rem);
  	-o-transform: translateY(-0.5rem);
  	-ms-transform: translateY(-0.5rem);
  	transform: translateY(-0.5rem);
}

/*834px以下*/
@media screen and (max-width: 834px){
ol.tasha-bangou li:before{
	  left: -2.6rem; /*左端からのアイコンまで*/
	}
ol.tasha-bangou li{
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 0rem;
  line-height: 1.0rem;

}
}




/*---------------------------------------
* 他者サイト導入用念のため BOX設定　ここまで
*---------------------------------------*/


/*---------------------------------------
* マウスオンアクション系ここから
*---------------------------------------*/

/* リンク付き画像をへこませる */


a:hover img{
position : relative;
top : 1pt;
left : 1pt;
}

/* ブログカードの色付け */
.internal-blog-card{
  padding:12px 12px 0;
  border:1px solid #FFAD90;
  word-wrap:break-word;
  border-radius:5px;
  background-color: #FFFFEE;
  min-width: initial;
  min-width: auto;
}


/*記事一覧の画像*/
.entry-card:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*人気記事の画像*/
.popular-entry-card-link.a-wrap:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}
/*新着記事の画像*/
.new-entry-card-link.a-wrap:hover figure img{
opacity: 0.6;
transition: all 0.8s ease;
}




/*---------------------------------------
* マウスオンアクション系ここまで
*---------------------------------------*/







/*---------------------------------
サイドバーのカテゴリーカスタマイズhttps://yuzuyu3.com/cocoon-cate/　親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #C1B596; /* アイコンの色 */
  padding-right: 6px;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114"; /* FontAwesomeのユニコード */
  color: #C1B596; /* アイコンの色 */
  padding-right: 6px;
}


/*---------------------------------
トップ上段のボックスメニューのカスタマイズ　https://sec.ayaito.net/cocoon/manual/582/
--------------------------------*/


.box-menu:hover { /*オンマウス時*/
box-shadow: inset 1px 1px 0 0 #839b5c,
 1px 1px 0 0 #011F17, 1px 0 0 0 #0ECBD6;
border-radius: 10px; /*枠線角丸　×かも？*/
 background: #021F1B; /*背景色*/
color:#fff; /*文字色*/
	opacity: 0.8;
}
	

.box-menu-icon { /*アイコン*/
color: #0ECBD6; /*アイコンカラー*/
}


/* モバイルトップメニュー https://unity-right.com/box-menu/*/
@media screen and (max-width: 599px){
	.box-menus .box-menu {
		width: calc(100%/4); /* メニューの数 */
		padding: 1em 2px 5px 2px;
		min-height:80px !important;
	}
	.box-menu-icon{
		font-size: 25px;
		margin:0;
		padding-bottom: 1.5px;
		height:30px;
	}
    .box-menu-label{
		font-size: 10px; /* 文字サイズ */
	}
	.box-menu{
	min-height: 50px; /* 高さ */
	}
}


/*box menu カスタマイズ　ここまで⇈*/




/*------------------------
  トップに戻るボタンの画像大きく&位置　https://bibabosi-rizumu.com/cocoon-go-to-top-button/
----------------------------*/

.go-to-top-button {
	opacity: 0.5;
	width: auto; /* 高さに合わせてauto */
	height: 100px;
}

.go-to-top {
	right: 10px;
	bottom: 40px;
}


@media screen and (max-width: 834px){
	.go-to-top-button {
	opacity: 0.5;
	width: 50px; /* 高さに合わせてauto */
	height: 50px;
	}
}

/*------------------------
  トップに戻るボタンの画像大きく&位置
----------------------------*/


/*------------------------
  トップヘッダーの勝手に作った帯
----------------------------*/
.header-text {
height:80px;
width: 100%;
font-size: 16px;
padding-left:35px;
padding-top:10px;
color: #ffffff;
background-color: #021F1B;
}

.header-text-inner {
width: 100%;
}

/*834px以下*/
@media screen and (max-width: 834px){
	
.header-text {
height:80px;
width: 100%;
font-size: 16px;
padding-left:20px;
padding-top:10px;
color: #ffffff;
background-color: #021F1B;
}
	
}


/*------------------------
  トップヘッダーの勝手に作った帯
----------------------------*/



/********************************************/
/* tableクラス関連 */
/********************************************/
/* 全セルを中央寄せにする */
table.center,
table.all-center{
	text-align: center;
}

table{
	border:double 3px rgba(2,0,199,0.6);
}

table th, table td{
	border:dashed 1px rgba(2,0,199,0.6);
}

/* thセルを青系配色にする */
table th.bb{
	background-color: rgba(44,200,255,.8);
	color: white;
}

/* blank-tblクラス：tdセル背景を全部白にするクラスの設定 */
table.blank-tbl td{
	background-color: white;
	border: 0px;
}

table.blank-tbl td a{
	font-weight: bold;
}

/* セル背景を白くする */
table td.white{
	background-color: #fff;
}

/* セル背景を赤にする */
table td.rb{
	background-color: #ffb3ba;
}

/* セル背景を緑にする */
table td.gb{
	background-color: #9ff03d;
}

/* セル背景を青にする */
table td.bb{
	background-color: #a3dcff;
}

/* 偶数奇数段で色分けしたい時の奇数 */
table td.odd{
	background-color: #ffffff;
}

/* 偶数奇数段で色分けしたいときの偶数 */
table td.even{
	background-color: #f2faff;
}

/* 文章の中央寄せ */
table td.center{
	text-align: center;
}

/* 文章の左寄せ */
table td.left{
	text-align: left;
}

/* 文章の右寄せ */
table td.right{
	text-align: right;
}

/********************************************/
/* tableクラス関連　他サイト参考ここまで */
/********************************************/

/*------------------------
 フッター部分のメニューアイコンの色　
----------------------------*/
.menu-item{
color: #C1B596;
font-size: 1.5rem;
}
/*------------------------
 フッター部分のメニューアイコンの色ここまで　
----------------------------*/


/*------------------------
 自作設定プロフィール文字サイズ色　
----------------------------*/
.profile {
  font-size: 16px;
	color: black; 
}
.sp-success{
border:2px;
border-style: solid; border-color: #8FBC8F;
background-color:#efffef;
	padding:20px 20px 0px 40px;
}

/*834px以下*/
@media screen and (max-width: 834px){
	
.profile {
  font-size: 14px;
	color: black;  
}
.sp-success{
border:2px;
border-style: solid; border-color: #8FBC8F;
background-color:#efffef;
	padding:0px 10px 0px 10px;
}
	
}




/*------------------------
 自作設定プロフィール文字サイズ色ここまで　
----------------------------*/

/*****************************
  ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #66c2c3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: auto;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}





/*------------------------
  スマホ表示用まとめ設定　特にBOX系とリスト系
----------------------------*/

/*1023px以下*/
@media screen and (max-width: 1023px){
  
.title-box0 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  
.title-box0 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}
	
}

/*480px以下*/
@media screen and (max-width: 480px){
  
.title-box0 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
	
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 10px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}
	
	
	
}





/*480px以下*/
@media screen and (max-width: 834px){


/* タイトル付　枠　list込み -見やすい番号リスト破線付き- */
.ol_normal{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px -30px;
}
	
.title-normal {
position: absolute;
padding: 0rem;
left: 15px;
top: -15px;
font-weight: bold;
background-color: #fff; /* タイトル背景色 */
color: #555555; /* タイトル文字色 */
}


.ol_pink{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -30px;
}
	
.title-pink {
position: absolute;
padding: 0rem;
left: 15px;
top: -15px;
font-weight: bold;
background-color: #FFF8F9; /* タイトル背景色 */
color: #EB6980; /* タイトル文字色 */
}


.ol_yellow{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -30px;
}
	
.title-yellow {
position: absolute;
padding: 0rem;
left: 15px;
top: -15px;
font-weight: bold;
background-color: #FFFFF0; /* タイトル背景色 */
color: #ee7800; /* タイトル文字色 */
}


.ol_green{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -30px;
}
	
.title-green {
position: absolute;
padding: 0rem;
left: 15px;
top: -15px;
font-weight: bold;
background-color: #F0FFF0; /* タイトル背景色 */
color: #008015; /* タイトル文字色 */
}


.ol_blue{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -30px;
}
	
.title-blue {
position: absolute;
padding: 0rem;
left: 15px;
top: -15px;
font-weight: bold;
background-color: #E0FFFF; /* タイトル背景色 */
color: #0077b3; /* タイトル文字色 */
}
	
}

/*------------------------
  スマホ表示用まとめ設定　特にBOX系とリスト系
----------------------------*/



/*-----------------------------------------------------------------------
  囲みボックス　リストの合わせ技　再設定
------------------------------------------------------------------------*/

/* タイトル付囲みボックス設定*/
.kakomi-box {
  font-size: 1.0625rem;
 position: relative;
 margin: 1rem 0rem 2rem 1rem;
padding: 0rem 1.5625rem 0rem 0.625rem;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 3rem;
}
.box-title {
 position: absolute;
 padding: 0rem 0.5rem 0rem 0.5rem;
 left: 2.8125rem;
 top: -0.9375rem;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}





/*------------------------　Gray ▶▶▶　list(ul)　----------------------------*/
ul.sankaku {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.sankaku li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem 1.0rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.sankaku li:before {
  font-family: FontAwesome;
  content: "\f04B";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #555555 /*アイコン色*/
}


/*------------------------　Gray ✓✓✓　list(ul)　----------------------------*/

ul.check-gray {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-gray li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-gray li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: "gray"; /*アイコン色*/
}

/*------------------------　Blue  ✓✓✓　list(ul)　----------------------------*/

ul.check-blue {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-blue li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-blue li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #0077B3; /*アイコン色*/
}


/*------------------------　Yellow  ✓✓✓　list(ul)　----------------------------*/

ul.check-yellow {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-yellow li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-yellow li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #EE7800; /*アイコン色*/
}

/*------------------------　Green  ✓✓✓　list(ul)　----------------------------*/


ul.check-green {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-green li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-green li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #008015; /*アイコン色*/
}

/*------------------------　Pink  ✓✓✓　list(ul)　----------------------------*/

ul.check-pink {
  padding: 0rem 0rem 0rem 1.0rem;
  position: relative;
}
ul.check-pink li {
  line-height: 2.5rem;
  margin: 0rem 0rem 0rem -0.20rem;
  padding: 0rem 0.5rem 0rem 1.4rem;
  list-style-type: none!important;
	color:#555555 /*リストの文字色*/
}
ul.check-pink li:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left :0.625rem; /*左端からのアイコンまで*/
  color: #CE5065; /*アイコン色*/
}





/*------------------------　Gray ①②③　list(ol)　----------------------------*/
ol.gray-number {
	counter-reset: li;
}

ol.gray-number > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.8rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.gray-number li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.gray-number > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #949799; /*ボタン色のアシエAcier*/
	border: 1px solid #8F8F8F; /*アッシュグレイAsh Grey*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}


/*------------------------　Red ①②③　list(ol)　----------------------------*/

ol.red-number {
	counter-reset: li;
}

ol.red-number > li {
	list-style: none;
	position: relative;/*リストの項目の位置を基準に*/
  padding-top:0.6rem;
	padding-left: 1.0rem; /*li:before分左に余白を。調整可*/
	/*margin-bottom: 0.8rem;*//*リストの数字がくっついてしまう場合*/
}
ol.red-number li:last-of-type{
  padding-bottom:1.2rem; /*最後のliの下だけ少し広めのパディング*/
}

ol.red-number > li:before {
	counter-increment: li;
	content: counter(li);
	margin-right: 1rem;
	background: #D70100; /*ボタン色の赤*/
	border: 1px solid #C93329; /*濃い赤*/
  font-family: 'Avenir','Arial Black','Arial',sans-serif;/*数字のフォント種*/
  font-weight:bold;/*太字に*/
  font-size: 0.9375rem;/*数字の大きさ*/
	color: #ffffff; /*数字色白*/
	border-radius: 50%; /*丸く*/
	text-align: center; /*端に寄ってる数字を真ん中に*/
	width: 1.3rem; /*幅を決めるheightと同じ数値に*/
	height: 1.3rem; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
	position: absolute; /*リストの基準から移動させる*/
	left: -1.5rem; /*項目の基準、左にあわせる*/
	top: 1.0rem; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
	line-height: 1.35;/*数字の位置あわせで数値を指定*/
}



/*------------------------
  囲みボックス　リストの合わせ技　再設定
----------------------------*/







/*------------------------
  カテゴリーラベルのカスタマイズhttps://bokorepo.com/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%99%E3%83%AB/
----------------------------*/


.cat-label {
border: none;
top: 0;
left:6px;
padding: 3px 5px 2px 5px;
margin: -5px 0 0 0;
border-radius: 0px 0px 5px 5px;
overflow: visible;
}
.cat-label::after { 
position: absolute;
content: '';
top: 0;
right: -4px;
border: none;
border-bottom: solid 5px gray; 
border-right: solid 4px transparent;
}

/*------------------------
  カテゴリーラベルのカスタマイズhttps://bokorepo.com/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E7%94%BB%E5%83%8F%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E3%83%A9%E3%83%99%E3%83%AB/
----------------------------*/

/*------------------------
 サイドバーのプロフ　https://s41t0h.jp/cocoon-author-box-customize/
----------------------------*/

.author-box {
	border: none !important;
	padding: 0 !important;
}

.pwa .author-box {
	text-align: left; /* 文字を左揃えに */
}
.author-box .author-widget-name{
	color: #666;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}

.author-box .author-widget-name::before {
	content: '';
	position: absolute;
	left: 20%;
	bottom: -15px;
	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid transparent;
	border-top: 15px solid #eaedf2;
	border-left: 15px solid transparent;
	z-index: 1;
}

.author-box figure.author-thumb{
	float: none;
	margin: 0 !important;
	text-align: center;
	width: 100% !important;
	background: url(https://www.eisaisha.com/wp-content/uploads/profile-backgrouund.jpg) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 60%;
	z-index: 0;
}

.author-box figure.author-thumb img{
	border: 3px solid #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	height: auto;
	width: 40%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -4.5em;
}

.author-box .author-content{
	margin-left: 0 !important;
	margin-top: 5.5em !important;
}

.author-box .author-content .author-name{
	text-align: center;
	font-size: 1.3rem;
}

.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
}
.author-box .author-content .author-name a:hover{
	color: #14171a;
	text-decoration: underline;
}

.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
	font-size: 90%;
	text-align: left;
}

.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}


/*------------------------
 サイドバーのプロフ　ここまで　https://s41t0h.jp/cocoon-author-box-customize/
----------------------------*/

/*-------フッターデザイン-------*/
.footer-background {
	padding-top:1rem;
	padding-bottom:1rem;
	padding-left:0.5rem;
	text-decoration: none;
	text-decoration:none;
	background-color:#2D2D2D;/*文字色 */
	color: #F8F8F8;
	font-size:0.8rem;	

}

.footer-background a:link {/*アクセスしたことのないリンク*/
	color: #D3D3D3; }
.footer-background a:visited { /*アクセスしたことのあるリンク*/
	color: #D3D3D3; }
.footer-background a:hover {/*マウスが上に乗っている状態*/
color:#FF0099;　←ピンク色
text-decoration:underline;　←下線を表示
}
.footer-background a:active {/*クリック中*/
color:#33CC00;　←緑色
}
/*-------フッターデザイン-------*/




/*-------記事内ギャラリーなどの背景設定-------*/
.background-1{
padding-top:1.5rem;
 border: 1px solid #6666; /* 枠線の太さ・色 */
	 border-radius:10px; /* ボックス角丸 */
background: url(https://www.eisaisha.com/wp-content/uploads/background-1.png) ;
}

.background-2{
padding-top:1.5rem;
 border: 1px solid #6666; /* 枠線の太さ・色 */
	 border-radius:10px; /* ボックス角丸 */
background: url(https://www.eisaisha.com/wp-content/uploads/background-2.png) ;
}

/*-------記事内ギャラリーなどの背景設定-------*/




/*------------------------　
 画像表示アニメーション
---------------------------*/
.box{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0px 0;
}

.screen{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FAFAFA;
    transition: 2.5s cubic-bezier(.26,0,.07,1);
}
.screen.show-migishita{
    transform: translate(100%,100%);
}

/*------------------------　
 見出しアニメーション
---------------------------*/
.heading-ani{
    position: absolute;
    top: 69px;
    left: 0;
    width: 100%;
    height: 53%;
    background: #fff;
    transition: 2.5s cubic-bezier(.26,0,.07,1);
}
.heading-ani.heading-ani-migi{
    transform: translateX(100%);
}

/*------------------
　画像下からふわっと設定
----------------------------*/
.js-animation {
  opacity: 0;
  visibility: hidden;
	transform: translateY(75px);
	transition: all 1.2s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}







/*-----------------------両端揃え--------------------------*/
p {
  text-align: justify;
  text-justify: inter-ideograph;
}
/*------------------キャプション左寄りになる分の修正--------*/
.wp-caption-text{
	text-align:center;
}
/*-----------------------両端揃え--------------------------*/