@charset "utf-8";
/*リストデザイン01*/
ul.listd01,
ol.listd01 {
	background: #fcfcfc;/*背景色*/
	padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
	border: solid 3px gray;/*線の種類 太さ 色*/
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd01 li,
ol.listd01 li {
	line-height: 1.5; /*文の行高*/
	padding: 0.5em 0; /*前後の文との余白*/
}

/*リストデザイン02*/
ul.listd02,
ol.listd02 {
	color: #668ad8;/*文字色*/
	border: dashed 2px #668ad8;/*破線 太さ 色*/
	background: #f1f8ff; /*背景色*/
	padding: 0.5em 0.5em 0.5em 2em;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd02 li,
ol.listd02 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン03*/
ul.listd03,
ol.listd03 {
	color: #668ad8; 
	border: double 5px #668ad8;/*二重線 太さ 色*/
	background: #f1f8ff; 
	padding: 0.5em 0.5em 0.5em 2em;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd03 li,
ol.listd03 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン04*/
ul.listd04,
ol.listd04 {
	color: #1e366a;
	border-top: solid #1e366a 1px;/*上のボーダー*/
	border-bottom: solid #1e366a 1px;/*下のボーダー*/
	padding: 0.5em 0 0.5em 1.5em;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd04 li,
ol.listd04 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン05*/
ul.listd05,
ol.listd05 {
	color: #1e366a;
	border: dotted #1e366a 1px;/*ドット 色 太さ*/
	padding: 0.5em 0.5em 0.5em 2em;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd05 li,
ol.listd05 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン06*/
ul.listd06,
ol.listd06 {
	background: #fffcf4;
	border-radius :8px;/*角の丸み*/
	box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
	padding: 0.5em 0.5em 0.5em 2em;
	margin: 2em 0.3em;
}
ul.listd06 li,
ol.listd06 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン07*/
ul.listd07,
ol.listd07 {
	background: #EEE;/*灰色に*/
	border-radius :8px;
	box-shadow :0px 0px 5px silver;
	padding: 0.5em 0.5em 0.5em 2em;
	margin: 2em 0.3em;
}
ul.listd07 li,
ol.listd07 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン08*/
ul.listd08,
ol.listd08 {
	background: #fffde8;
	box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
	border: dashed 2px #ffb03f;/*破線*/
	border-radius: 9px;
	margin: 2rem 10px;/*はみ出ないように調整*/
	padding: 0.5em 0.5em 0.5em 2em;
}
ul.listd08 li,
ol.listd08 li {
	line-height: 1.5;
	padding: 0.5em 0;
}

/*リストデザイン09*/
ul.listd09 {
	padding: 0;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd09 li {
	color: #2d8fdd;
	border-left: solid 6px #2d8fdd;/*左側の線*/
	background: #f1f8ff;/*背景色*/
	margin-bottom: 3px;/*下のバーとの余白*/
	line-height: 1.5;
	padding: 0.5em;
	list-style-type: none!important;/*ポチ消す*/
}

/*リストデザイン10*/
ul.listd10 {
	padding: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd10 li {
	color: #404040;
	border-left: solid 6px #1fa67a;/*左側の線*/
	border-bottom: solid 2px #dadada;/*下に灰色線*/
	background: whitesmoke;
	margin-bottom: 5px;/*下のバーとの余白*/
	line-height: 1.5;
	padding: 0.5em;
	list-style-type: none!important;/*ポチ消す*/
	font-weight: bold;
}

/*リストデザイン11*/
ul.listd11 {
	padding: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd11 li {
	position: relative;
	list-style-type: none!important;/*ポチ消す*/
	padding: 0.5em 0.5em 0.5em 0.5em;
	margin-bottom: 5px;
	line-height: 1.5;
	background: #dbebf8;
	vertical-align: middle;
	color: #505050;
	border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}
ul.listd11 li:before{ /*疑似要素*/
	display:inline-block; 
	vertical-align: middle;
	/*以下白丸つくる*/
	content:'';
	width:1em;
	height: 1em;
	background: #fff;
	border-radius: 50%;
	margin-right: 8px;
}

/*リストデザイン12*/
ul.listd12 {
	border: solid 2px skyblue;
	border-radius: 5px;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd12 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
ul.listd12 li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f138";/*アイコンの種類*/
	position: absolute;
	left : 1em;/*左端からのアイコンまでの距離*/
	color: skyblue;/*アイコン色*/
}

/*リストデザイン13*/
ul.listd13 {
	border: solid 2px skyblue;/*線の設定*/
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd13 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
ul.listd13 li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f075";/*アイコンの種類*/
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: skyblue; /*アイコン色*/
}

/*リストデザイン14*/
ul.listd14 {
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd14 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}
ul.listd14 li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f00c";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
}

/*リストデザイン15*/
ul.listd15 {
	border: double 4px #21b384;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd15 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}
ul.listd15 li:before {
	font-family: FontAwesome;
	content: "\f0a4";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #21b384; /*アイコン色*/
}

/*リストデザイン16*/
ul.listd16 {
	border: solid 2px #ff938b;
	background: #fffaf1;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd16 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}
ul.listd16 li:before {
	font-family: FontAwesome;
	content: "\f1b0";/*アイコン種類*/
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #ff938b; /*アイコン色*/
}

/*リストデザイン17*/
ul.listd17 {
	box-shadow :0px 0px 3px silver;
	border: solid 1px whitesmoke;
	padding: 0.5em 1em 0.5em 2.3em;
	margin: 2em 0.3em;
	position: relative;
	background: #fafafa;
}
ul.listd17 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
ul.listd17 li:before {
	font-family: FontAwesome;
	content: "\f0da";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: gray; /*アイコン色*/
}

/*リストデザイン18*/
ul.listd18 {
	border: solid 2px #ffb03f;
	padding: 0 0.5em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd18 li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}
ul.listd18 li:before {
	font-family: FontAwesome;
	content: "\f138";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
}
ul.listd18 li:last-of-type{
	border-bottom: none;
}

/*リストデザイン19*/
ul.listd19 {
	background: whitesmoke;
	padding: 0 0.5em;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd19 li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.5em;
	border-bottom: 2px solid white;
	list-style-type: none!important;
}
ul.listd19 li:before {
	font-family: FontAwesome;
	content: "\f00c";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #668ad8; /*アイコン色*/
}
ul.listd19 li:last-of-type{
	border-bottom: none;/*最後の線だけ消す*/
}

/*リストデザイン20*/
ul.listd20 {
	padding: 0;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd20 li {
	color: white;
	background: #81d0cb;
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 2em;
	border-bottom: 2px solid white;
	list-style-type: none!important;
	font-weight: bold; /*好みで太字に*/
}
ul.listd20 li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
	color: white; /*アイコン色*/
}

/*リストデザイン21*/
ul.listd21 {
	padding: 0;
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd21 li {
	color: white;
	background: #2d8fdd;
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 2em;
	border-bottom: 1px dashed white;
	list-style-type: none!important;
}
ul.listd21 li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f040";
	position: absolute;
	left : 0.5em/*左端からのアイコンまでの距離*/;
	color: white;/*アイコン色*/
}
ul.listd21 li:last-of-type{
	border-bottom: none;/*最後のliの線だけ消す*/
}

/*リストデザイン22*/
ul.listd22 {
	padding: 0;
	margin-top: 2em;
	margin-bottom: 2em;
}
ul.listd22 li {
	color: black;
	position:relative;
	background: #f1f8ff;/*バーの色*/
	line-height: 1.5;
	padding: 0.5em;
	margin-bottom: 4px;
	border-left : solid 35px #5c9ee7;/*先の色＝アイコン裏の色*/
	list-style-type: none!important;
}
ul.listd22 li:before {
	font-family: FontAwesome;
	content: "\f040";
	position: absolute;
	display: block;
	padding: 0.5em;
	width: 1.2em;
	color: white; /*アイコン色*/
	font-weight: normal;/*アイコンは太字にしない*/
	text-align: center;
	left : -35px; /*左端からのアイコンまでの距離*/
	/*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*リストデザイン23*/
ol.listd23 {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	background: #f5faff;
	margin-top: 2em;
	margin-bottom: 2em;
}
ol.listd23 li{
	position: relative;
	padding-left: 30px;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}
ol.listd23 li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display:inline-block;
	background: #5c9ee7;
	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%);
}

/*リストデザイン24*/
ol.listd24 {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding: 0.3em 0.8em;
	border: solid 2px #ffb107;
	margin-top: 2em;
	margin-bottom: 2em;
}
ol.listd24 li{
	border-bottom: dashed 1px orange;
	position: relative;
	padding: 0.5em 0.5em 0.5em 30px;
	line-height: 1.5em;
}
ol.listd24 li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	background: #ffb107;
	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.listd24 li:last-of-type{
	border-bottom: none; /*最後のliの線だけ消す*/
}

/*リストデザイン25*/
ol.listd25 {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	border: dashed 1px gray;
	margin-top: 2em;
	margin-bottom: 2em;
}
ol.listd25 li{
	position: relative;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}
ol.listd25 li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	background: #74c2f8;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	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%);
}

/*リストデザイン26*/
ol.listd26 {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0;
	margin-top: 2em;
	margin-bottom: 2em;
}
ol.listd26 li{
	position: relative;
	padding: 0.5em;
	line-height: 1.5em;
	background: #f1f8ff;
	border-left : solid 35px #5c9ee7;
	margin-bottom: 5px;
}
ol.listd26 li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: -35px;
	width: 35px;
	height: 1em;
	line-height: 1;
	text-align:center;
}

/*リストデザイン27*/
ol.listd27 {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	border: solid 2px #5c9ee7;
	margin-top: 2em;
	margin-bottom: 2em;
}
ol.listd27 li{
	position: relative;
	padding: 0.5em 0.5em 0.5em 35px;
	line-height: 1.5em;
}
ol.listd27 li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*数字のデザイン変える*/
	display:inline-block;
	background: #5c9ee7;
	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.listd27 li:after {/*吹き出しのちょこんと出た部分*/
	content: '';
	display: block;
	position: absolute;
	left: 20px;/*左からの位置*/
	height: 0;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #5c9ee7;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*リストデザイン28*/
ul.listd28 {
	border: solid 2px #ffb03f;
	padding: 0.5em;
	position: relative;
	margin-top: 3em;
	margin-bottom: 2em;
}
ul.listd28 li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}
ul.listd28 li:last-of-type{
	border-bottom: none;
}
ul.listd28 li:before {/*リスト内のアイコン*/
	font-family: FontAwesome;
	content: "\f138";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
}
ul.listd28 li:after {/*タイトルタブ*/
	background: #ffb03f;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: "POINT";/*タブの文字*/
	letter-spacing: 0.05em;/*字間*/
}

/*リストデザイン29*/
ul.listd29 {
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 3em;
	margin-bottom: 2em;
}
ul.listd29 li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
ul.listd29 li:before {/*リストのアイコン*/
	font-family: FontAwesome;
	content: "\f00c";
	position: absolute;
	left : 1em; /*左端からのアイコンまでの距離*/
	color: #ffb03f; /*アイコン色*/
}
ul.listd29 li:after {/*タブ*/
	background: #ffb03f;
	color: #fff;
	font-family: FontAwesome,'Avenir','Arial',sans-serif;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: '\f0a7  Check';/*アイコンコード＋文字*/
	letter-spacing: 0.05em;/*字間*/
}