/* https://www.design-memo.com/coding/text-emphasis */

.wavy {
  text-decoration: underline wavy #f00;
}

.emph1 {
  -webkit-text-emphasis: dot #f00;
  text-emphasis: dot #f00;
}

.emph2 {
  -webkit-text-emphasis: circle #f00;
  text-emphasis: circle #f00;
}

.emph3 {
  -webkit-text-emphasis: double-circle #f00;
  text-emphasis: double-circle #f00;
}

.emph4 {
  -webkit-text-emphasis: sesame #f00;
  text-emphasis: sesame #f00;
}

.emph5 {
  -webkit-text-emphasis: triangle #f00;
  text-emphasis: triangle #f00;
}

/* https://www.webcreatorbox.com/tech/css-tips-for-text */

/* https://naifix.com/strong-css-sample/ */
.deco1 {
     border-bottom: 2px solid #ff3333;
     margin: auto .4em;
 }

.deco2 {
     border-top: 2px dotted #66ff66;
     border-bottom: 2px dotted #66ff66;
}

.deco3 {
     border: 4px double #9966ff;
}

.deco4 {
     background-color: #ffff66;
}

.deco5 {
     background-color: #ffff66;
     color: #ff3333;
}

.deco6 {
     background-color: #ffff66;
     color: #ff3333;
     border-bottom: 2px solid #ff3333;
}

.deco7 {
     background: linear-gradient(transparent 60%, #ffff66 60%);
}

.deco8 {
     background: linear-gradient(transparent 60%, #ff99ff 60%);
}

.deco9 {
     border-bottom: 2px solid #ff3333;
     font-size: 120%;
}

.deco10 {
     transform: rotate(-10deg);
     display: inline-block;
}

.deco11 {
     text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}

.deco12 {
     text-shadow: 1px 1px 0 rgba(0,0,0,.1);
     color: #ff3333;
}



/* https://1-notes.com/css-text-design/ */
.deco13 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFAB91;
	text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
}

.deco14 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #01579B;
	text-shadow: 0 0 0.2em rgba(255,255,255,1);
}

.deco15 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 0 0 0.2em rgba(0,0,0,1);
}

.deco16 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FF6F00;
	text-shadow:
		0 0.01em 0 #999,
		0 0.02em 0 #888,
		0 0.03em 0 #777,
		0 0.04em 0 #666,
		0 0.05em 0 #555,
		0 0.06em 0 #444,
		0 0.08em 0 #000;
}

.deco17 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	text-shadow:
		0 0.03em 0.03em #FFAB91,
		0 0.03em 0.03em #000,
		0 0.03em 0.03em #FBE9E7;
}

.deco18 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #fffff0;
	text-shadow: 
		0 0.05em 0.08em rgba(0,0,0,0.7);
}

.deco19 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #03A9F4;
	text-shadow: 
		0.04em 0.02em 0 #B0BEC5, 
		0.08em 0.05em 0 rgba(0, 0, 0, 0.6);
}

.deco20 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FDF5E6;
	text-shadow:
		1px -1px 1px #BDBDBD,
		-1px 2px 1px #737272,
		-2px 4px 1px #767474,
		-3px 6px 1px #787777,
		-4px 8px 1px #424242,
		-5px 10px 1px #616161,
		-6px 12px 1px #757575,
		-7px 14px 1px #9E9E9E,
		-8px 16px 1px #BDBDBD,
		-9px 18px 1px #E0E0E0;
}

.deco21 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #A5D6A7;
	text-shadow:
		1px -1px 1px #BDBDBD,
		-1px 2px 1px #737272,
		-2px 4px 1px #767474,
		-3px 6px 1px #787777,
		-4px 8px 1px #424242,
		-5px 10px 1px #616161,
		-6px 12px 1px #757575,
		-7px 14px 1px #9E9E9E,
		-8px 16px 1px #BDBDBD,
		-9px 18px 1px #E0E0E0;
}

.deco22 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background : rgba(0,0,0,1);
	text-shadow : 
		0 0 0.1em rgba(255,255,255,0.05),
		0.01em 0.04em 0.03em rgba(255,255,255,0.4);
	-webkit-background-clip : text;
}

.deco23 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background : rgba(0,0,0,1);
	text-shadow : 
		0 0 0.1em rgba(255,255,255,1),
		0.01em 0.02em 0.02em rgba(255,255,255,1);
	-webkit-background-clip : text;
}

.deco24 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
 	color: transparent;
	background : rgba(0,0,0,1);/*追加した*/
	-webkit-text-stroke: 0.02em rgba(255,255,255,1);
}

.deco25 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background : rgba(0,0,0,1);/*追加した*/
	-webkit-text-stroke: 0.04em rgba(255,255,255,0.5);
}

.deco26 {
	font-size:7em;
	text-align:center;
	line-height:0.95em;
	letter-spacing: 0.05em;
	color: transparent;
	-webkit-text-stroke: 0.03em rgba(0,0,0,1);
}

.deco27 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #000; 
	text-shadow:
		-1px 0 white,
		0 1px white,
		1px 0 white,
		0 -1px white; 
}

.deco28 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 
		0 0 0.05em #F06292,
		0 0 0.10em #F06292,
		0 0 0.15em #F06292,
		0 0 0.30em #F06292;
	filter: saturate(80%);
}

.deco29 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 
		0 0 0.10em #2962FF,
		0 0 0.15em #2962FF,
		0 0 0.80em #2962FF,
		0 0 1.00em #2962FF;
}

.deco30 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #000;
	text-shadow: 
		0 0 0.05em #FFF59D,
		0 0 0.06em #FFF59D,
		0 0 0.07em #FFF59D,
		0 0 0.08em #FFF59D,
		0 0 0.09em #FFF59D,
		0 0 0.20em #FFF59D,
		0 0 0.20em #FFF59D,
		0 0 0.20em #FFF59D,
		0 0 0.50em #FFF59D;
}

.deco31 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 0deg, #A1887F 0 0.1em, #6D4C41 0.1em 0.2em );
	-webkit-background-clip: text;
}

.deco32 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 90deg, #2196F3 0 0.1em, #90CAF9 0.1em 0.2em );
	-webkit-background-clip: text;
}

.deco33 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 45deg, #9E9E9E 0 0.1em, #000 0.1em 0.2em );
	-webkit-background-clip: text;
}

.deco34 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( 45deg, #FF3D00 0 0.4em, #0091EA 0.4em 0.8em);
	-webkit-background-clip: text;
}

.deco35 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(45deg,
		#F5B090 0.1em 0.2em,
		#FCD7A1 0.2em 0.3em,
		#FFF9B1 0.3em 0.4em,
		#A5D4AD 0.4em 0.5em,
		#A3BCE2 0.5em 0.6em,
		#A59ACA 0.7em 0.8em,
		#CFA7CD 0.8em 0.9em);
	-webkit-background-clip: text;
}

.deco36 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(45deg,
		#E60012 0.1em 0.2em,
		#F39800 0.2em 0.3em,
		#FFF100 0.3em 0.4em,
		#009944 0.4em 0.5em,
		#0068B7 0.5em 0.6em,
		#1D2088 0.7em 0.8em,
		#CFA7CD 0.8em 0.9em);
	-webkit-background-clip: text;
}

.deco37 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient( 45deg, #DD2C00 0% 40%, #01579B 60% 100% );
	-webkit-background-clip: text;
}

.deco38 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient( 90deg, #0091EA 0% 30%, #00B0FF 40% 60%, #80D8FF 70% 100% );
	-webkit-background-clip: text;
}

.deco39 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient( 45deg,
		#E60012 20%,
		#F39800 30%,
		#FFF100 40%,
		#009944 50%,
		#0068B7 60%,
		#1D2088 70%,
		#920783 80%);
	-webkit-background-clip: text;
}

.deco40 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient( 0deg, #F57C00 0% 60% , #FFB74D 60% 100%);
	-webkit-background-clip: text;
}

.deco41 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient( -45deg, #FF3D00 0% 50%, #0091EA 50%
		 100% );
	-webkit-background-clip: text;
}

.deco42 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
	-webkit-background-clip: text;
}

.deco43 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #0277BD 0.1em, #4FC3F7 0.2em, #E1F5FE 0.3em, #4FC3F7 0.4em, #0277BD 0.5em); 
	-webkit-background-clip: text;
}

.deco44 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #C62828 0.1em, #EF5350 0.2em, #FFEBEE 0.3em, #EF5350 0.4em, #C62828 0.5em); 
	-webkit-background-clip: text;
}

.deco45 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #FFF;
	text-shadow: 
		0 0 0.05em #F06292,
		0 0 0.10em #F06292,
		0 0 0.15em #F06292,
		0 0 0.30em #F06292;
	filter: saturate(80%);
	-webkit-background-clip: text;
	-webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
}

.deco46 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(90deg,
		#E60012 0.1em 0.2em,
		#F39800 0.2em 0.3em,
		#FFF100 0.3em 0.4em,
		#009944 0.4em 0.5em,
		#0068B7 0.5em 0.6em,
		#1D2088 0.7em 0.8em,
		#CFA7CD 0.8em 0.9em);
	-webkit-background-clip: text;
	-webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
}

.deco47 {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
	-webkit-background-clip: text;
	-webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
}

.deco48 {
	font-size:1em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color:#FFF;
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
}

.deco49 {
	font-size:6em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%),
		linear-gradient(45deg, #0277BD 25%, transparent 25%, transparent 75%, #0277BD 75%);
	background-color: #03A9F4;
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
	-webkit-background-clip: text;
}

.deco50 {
	font-size:8em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(	 13,  71, 161, .6) 0px 6px, /*青*/
			rgba( 255, 255, 255, .6) 6px 8px, /*白*/
			rgba(	 13,  71, 161, .6) 8px 10px, /*青*/
			rgba(	255, 214,   0, .6) 10px 12px, /*黄*/
			rgba(	 13,  71, 161, .6) 12px 18px, /*青*/
			rgba( 213,   0,   0, .6) 18px 34px /*赤*/
		),
			repeating-linear-gradient( 90deg,
			rgba(	 13,  71, 161, 1) 0px 6px, /*青*/
			rgba( 255, 255, 255, 1) 6px 8px, /*白*/
			rgba(	 13,  71, 161, 1) 8px 10px, /*青*/
			rgba(	255, 214,   0, 1) 10px 12px, /*黄*/
			rgba(	 13,  71, 161, 1) 12px 18px, /*青*/
			rgba( 213,   0,   0, 1) 18px 34px /*赤*/
		);
	-webkit-background-clip: text;
}

.deco51 {
	font-size:6em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background-color : #FFF;
	background-image:
		repeating-linear-gradient( 0deg,
			rgba(   0,   0,   0, 0.4) 0px 4px, /*黒*/
			rgba( 255, 255, 255, 0.4) 4px 8px, /*白*/
			rgba(   0,   0,   0, 0.4) 8px 12px, /*黒*/
			rgba( 255, 255, 255, 0.4) 12px 16px, /*白*/
			rgba(   0,   0,   0, 0.4) 16px 20px, /*黒*/
			rgba( 209, 172, 118, 0.4) 20px 30px, /*香*/
			rgba( 213,   0,   0, 0.4) 30px 32px,/*赤*/
			rgba( 209, 172, 118, 0.4) 32px 36px, /*香*/
			rgba( 213,   0,   0, 0.4) 36px 38px,/*赤*/
			rgba( 209, 172, 118, 0.4) 38px 48px /*香*/
		),
			repeating-linear-gradient( 90deg,
			rgba(   0,   0,   0, 1) 0px 3px, /*黒*/
			rgba( 255, 255, 255, 1) 3px 6px, /*白*/
			rgba(   0,   0,   0, 1) 6px 9px, /*黒*/
			rgba( 255, 255, 255, 1) 9px 12px, /*白*/
			rgba(   0,   0,   0, 1) 12px 15px, /*黒*/
			rgba( 209, 172, 118, 1) 15px 30px, /*香*/
			rgba( 213,   0,   0, 0.8) 30px 31px,/*赤*/
			rgba( 209, 172, 118, 1) 31px 33px, /*香*/
			rgba( 213,   0,   0, 0.8) 33px 34px,/*赤*/
			rgba( 209, 172, 118, 1) 34px 49px /*香*/
		);
	-webkit-background-clip: text;
}


/*見出しデザイン*/

.midasi01 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}


.midasi02 {
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 2px #6594e0;
}

.midasi03 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
}

.midasi04 {
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

.midasi05 {
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
}

.midasi06 {
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

.midasi07{
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

.midasi08{
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}


.midasi09{
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}


.midasi10{
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

.midasi11{
  padding: 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}


.midasi12{
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

.midasi12:before {
  content: '●';
  color: white;
  margin-right: 8px;
}


.midasi13{
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

.midasi13:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}


.midasi14{
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
}


.midasi15 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}


.midasi16{
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

.midasi16:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}


.midasi17{
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

.midasi17::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}


.midasi18{
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}


.midasi19{
  border-bottom: solid 3px skyblue;
  position: relative;
}

.midasi19:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}


.midasi20 {
  border-bottom: solid 3px #cce4ff;
  position: relative;
}

.midasi20:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

.midasi21{
  position: relative;
  padding-left: 25px;
}

midasi21:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}
midasi21:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

.midasi22{
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

.midasi22:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

.midasi23{
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #fff0d9;
  font-size: 20px;
  color: #2d2d2d;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 3px orange;
  z-index:-2;
}

.midasi23: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;
}

.midasi23: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;
}

.midasi24{
  color: #010079;
  text-shadow: 0 0 5px white;
  padding: 0.3em 0.5em;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.midasi25{
  color: #010079;
  text-shadow: 0 0 5px white;
  border-left: solid 7px #010079;
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.midasi26{
  color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.midasi27{
  position: relative;
}

.midasi27:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

.midasi28 {
  position: relative;
  padding: 0.6em;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border-radius: 7px;
}

.midasi28:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}

.midasi29{
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.midasi29:before, .midasi29:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.midasi29:before {
  left:0;
}
.midasi29:after {
  right: 0;
}

.midasi30{
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.midasi30:before, .midasi30:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.midasi30:before {
  left:0;
}
.midasi30:after {
  right: 0;
}

.midasi31 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}
.midasi31:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 60px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: black;
  border-radius: 2px;
}

.midasi32{
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.midasi32:before, .midasi32:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.midasi32:before {
  left:0;
}
.midasi32:after {
  right: 0;
}

.midasi33{
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
.midasi33:before, .midasi33:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
.midasi33:before {
  left: 7px;
}
.midasi33:after {
  right: 7px;
}

.midasi34{
  position: relative;
  padding: 0.25em 1em;
  border: solid 2px black;
  border-radius: 3px 0 3px 0;
}

.midasi34:before, .midasi34:after {
  content: '';
  position: absolute;
  width:10px;
  height: 10px;
  border: solid 2px black;
  border-radius: 50%;
}

.midasi34:after {
  top:-12px;
  left:-12px;
}
.midasi34:before {
  bottom:-12px;
  right:-12px;
}

.midasi35{
  position: relative;
  color: #158b2b;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}
.midasi35:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.midasi36{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
}

.midasi36:before, .midasi36:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.midasi36:before {
  border-left: solid 1px #ff5722;
  border-top: solid 1px #ff5722;
  top:0;
  left: 0;
}

.midasi36:after {
  border-right: solid 1px #ff5722;
  border-bottom: solid 1px #ff5722;
  bottom:0;
  right: 0;
}

.midasi37{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

midasi37:before, midasi37:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
midasi37:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
midasi37:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

.midasi38{
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.midasi38:before, .midasi38:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}

.midasi38:before {
  border-top: dotted 1px #535aaa;
  border-left: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  left: 0;
}

.midasi38:after {
  content: '';
  border-top: dotted 1px #535aaa;
  border-right: dotted 1px #535aaa;
  border-bottom: dotted 1px #535aaa;
  right: 0;
}

.midasi39{
  position: relative;
  padding: 0.35em 0.5em;
  background: #b6e9ff;
  color: #393939;
}
.midasi39:before {
  content: " ";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color: #b2ddf0;
}

.midasi40:first-letter {
  font-size: 2em;
  color: #7172ac;
}

/*3. グラデーションを使った見出し*/
.midasi41{
  position: relative;
  padding: 0.25em 0;
}
.midasi41:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

.midasi42 {
  position: relative;
  padding: 0.25em 0;
}
.midasi42:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

.midasi43{
  position: relative;
  padding: 0.1em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
  background: linear-gradient(to right, rgb(255, 186, 115), transparent);
  color: #545454;
}

.midasi44{
  position: relative;
  padding: 0.2em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
  color: white;
  font-weight: lighter;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

.midasi45{
  position: relative;
  padding: 0.3em 0.5em;
  background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  color: #495193;
}

.midasi46{
  position: relative;
  color: #6eb0f9;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

.midasi47{
  background: #b0dcfa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

.midasi48{
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
.midasi48:before {
  content: "";
  position: absolute;
  background: #ffd69d;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

.midasi49{
  position: relative;
  color: #333;
  display: inline-block;
  margin: 47px 0;
  text-shadow: 0 0 2px white;
}
.midasi49:before {
  content: "";
  position: absolute;
  background: #a9e1ff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  border: dashed 1px white;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
  box-shadow: 0px 0px 0px 5px #a9e1ff;
}

.midasi50{
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
}
.midasi50:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.midasi51 {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
  background: #e0f3ff;
  z-index: -4;
  border-radius: 0 10px 10px;
}

.midasi51:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

/* リスト https://saruwakakun.com/html-css/reference/ul-ol-li-design */

ul.list01, ol.list01 {
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}


ul.list02, ol.list02 {
  color: #668ad8;/*文字色*/
  border: dashed 2px #668ad8;/*破線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list03, ol.list03 {
  color: #668ad8; 
  border: double 5px #668ad8;/*二重線 太さ 色*/
  background: #f1f8ff; 
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list04, ol.list04 {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
}

ul.list05, ol.list05 {
  color: #1e366a;
  border: dotted #1e366a 1px;/*ドット 色 太さ*/
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list06, ol.list06 {
  background: #fffcf4;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list07, ol.list07 {
  background: #dadada;/*灰色に*/
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list08, ol.list08 {
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list09, ol.list09 {
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list10, ol.list10 {
  padding: 0;
  position: relative;
}

ul.list10 li, ol.list10 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;/*ポチ消す*/
}


ul.list11, ol.list11 {
  padding: 0;
  position: relative;
}

ul.list11 li, ol.list11 li {
  color: black;
  border-left: solid 8px orange;/*左側の線*/
  background: whitesmoke;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em;
  list-style-type: none!important;
}


ul.list11, ol.list11 {
  padding: 0;
}

ul.list12 li, ol.list12 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;
}


ul.list13, ol.list13 {
  padding: 0;
}

ul.list13 li, ol.list13 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.list13 li:before, ol.list13 li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}


/* https://benri-no1.com/list/#HTML-2 */

ul.list1 {
  padding: 0.3em 0.5em;
  list-style-type: none;
  border: none;
}

ul.list1 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 1.8em;
  line-height: 1.5;
}
ul.list1 li::before {
  position: absolute;
  content:''; 
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #ee8992;
  top: 8px;
  left : 0.5em;
}


ul.list2 {
  padding: 0.3em 0.5em;
  list-style-type: none;
  border: none;
}
ul.list2 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 2.5em;
  line-height: 1.5;
}
ul.list2 li::before {
  position: absolute;
  content:''; 
  height:0; 
  width:0; 
  border:10px transparent solid; 
  border-right-width:0; 
  border-left-color:#ee8992; 
  left:16px;
  top: 7.5px;
}
ul.list2 li::after {
  position: absolute;
  content:''; 
  height:5px; 
  width:10px; 
  background:#ee8992; 
  left: 6px;
  top: 15px;
}


ul.list3 {
  padding: 0.5em 0;
  list-style-type: none;
  border: none;
}
ul.list3 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 2em;
  line-height: 1.5;
}
ul.list3 li::after, ul.list3 li::before{
  content:''; 
  position:absolute; 
  top: 7px;
  left: 11px;
  height: 18px;
  width:4px; 
  background:#ee8992; 
  border-radius:10px;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}
ul.list3 li::after {
  top: 14px;
  left: 3px;
  height: 10px;
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
}


ul.list4 {
  padding: 0.3em 0;
  list-style-type: none;
  border: none;
}
ul.list4 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 1.6em;
  line-height: 1.5;
}
ul.list4 li::before{
  content: '';
  position: absolute;
  background-color: #ee8992;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 10px;
  top: 13px;
}


ul.list5 {
  padding: 0.3em 0;
  list-style-type: none;
  border: none;
}
ul.list5 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 1.6em;
  line-height: 1.5;
}
ul.list5 li::before{
  content: '';
  position: absolute;
  background-color: #fff;
  border: 1px solid #ee8992;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 10px;
  top: 13px;
}


ul.list6 {
  padding: 0.3em 0;
  list-style-type: none;
  border: none;
}
ul.list6 li {
  list-style-type: none;
  position:relative;
  padding: 0.3em 0 0.3em 1.4em;
  line-height: 1.5;
}
ul.list6 li::after,
ul.list6 li::before {
  content: '';
  position: absolute;
}
ul.list6 li::after {
  left: -0.2em;
  top: 8px;
  width: 20px;
  height: 20px;
  background-color: #ee8992;
  border-radius: 50%;
}
ul.list6 li::before {
  z-index: 2;
  left: 3px;
  top: 15px;
  width: 4px;
  height: 4px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


ol.list7 {
  padding: 0.3em 0.5em;
  list-style-type: none;
  border: none;
  counter-reset: number;
}
ol.list7 li {
  list-style-type: none;
  position: relative;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
}
ol.list7 li::before {
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}


ul.list8{
  padding: 0.3em 0.5em;
  list-style-type: none;
  border: none;
}
ul.list8 li {
  list-style-type: none;
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin: 0 0 7px 0;
  line-height: 1.5;
  background: #ffefef;
  vertical-align: middle;
  border-radius: 17px 0px 0px 17px;
}
ul.list8 li::before{
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin: 0 7px 3px 0;
}


ol.list9{
  padding: 0;
  list-style-type: none;
  border: none;
  counter-reset: number;
}
ol.list9 li{
  list-style-type: none;
  position:relative;
  padding:0 0 0 50px; 
  background: #fff5ee;
  border: 2px solid #ffb3cc;
  border-radius: 2px;
  margin: 0 0 5px -15px;
}
ol.list9 li::after{
  content: counter(number);
  counter-increment: number;
  position: absolute;	
  left: 0px;
  top: 0px;
  background: #ffb3cc;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  font-weight: bold;
}
ol.list9 li::before{
  content:''; 
  display:block; 
  position:absolute; 
  box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
  top: 6px;
  left: 30px;
  height:0; 
  width:0; 
  border-top: 10px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #ffb3cc;
}

ol.list10 {
  padding: 0.3em 0.5em;
  list-style-type: none;
  border: none;
  counter-reset: number;
}
ol.list10 li {
  list-style-type: none;
  position: relative;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
}
ol.list10 li:before {
  position: absolute;
  font-style: italic;
  font-family:'Goudy Bookletter 1911',Georgia,serif; 
  content: counter(number)".";
  counter-increment: number;
  left: 0;
  top: 0;
  font-weight: bold;
  font-size: 1.4em;
}

ul.list11, ol.list11{
  color: #ee8992;
  border: 3px solid #ffccd2;
  background: #fffafa;
  padding: 0.5em 0.5em 0.5em 2em;
}


ul.list12, ol.list12{
  border: 3px solid #ffccd2;
  background-color: #fff9fc;
  background-image: radial-gradient(#fff4f9 35%, transparent 0), radial-gradient(#fff4f9 35%, transparent 0);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list13, ol.list13{
  border: 3px solid #ffccd2;
  background-color: #fff;
  background-image: radial-gradient(#fff4f9 50%, transparent 0), radial-gradient(#fff4f9 50%, transparent 0);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list14, ol.list14{
  border: 3px solid #ffccd2;
  background-color: #ffe6ea;
  background-image: radial-gradient(#fff4f9 50%, transparent 0), radial-gradient(#fff4f9 50%, transparent 0);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list15, ol.list15{
  border: 3px solid #ffefef;
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffefef 3px, #ffefef 7px);
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list16,ol.list16{
  border: 3px solid #ffefef;
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 14px,#ffefef 14px, #ffefef 20px);
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list17, ol.list17{
  border: 3px solid #FFE7E7;
  background-color: #fff;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 45px 45px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list18, ol.list18{
  border: 3px solid #FFE7E7;
  background-color: #fff;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 90px 90px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list19, ol.list19{
  border: 3px solid #FFE7E7;
  background-color: #fff;
  background-image:
  linear-gradient(90deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(180deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 45px 45px;
  color: #ee8992;
  padding: 0.5em 0.5em 0.5em 2em;
  margin: 2em 0;
  font-weight: bold;
}


ul.list20, ol.list20 {
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  list-style-type: none;
}
ol.list20 {
  counter-reset: number;
}
ul.list20 li, ol.list20 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #ee8992;
}
ul.list20 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #ee8992;
}
ol.list20 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list20 li:last-of-type,ol.list20 li:last-of-type{
  border-bottom: none;
}


ul.list21, ol.list21 {
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  list-style-type: none;
   background-color: #fff9fc;
  background-image: radial-gradient(#fff4f9 35%, transparent 0), radial-gradient(#fff4f9 35%, transparent 0);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
ol.list21 {
  counter-reset: number;
}
ul.list21 li, ol.list21 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #ee8992;
}
ul.list21 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #ee8992;
}
ol.list21 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list21 li:last-of-type,ol.list21 li:last-of-type{
  border-bottom: none;
}


ul.list22, ol.list22 {
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  list-style-type: none;
  background: repeating-linear-gradient(-45deg, #fef4f4, #fef4f4 3px,#ffefef 3px, #ffefef 7px);
  background-size: 80px 80px;
}
ol.list22 {
  counter-reset: number;
}
ul.list22 li, ol.list22 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #ee8992;
}
ul.list22 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #ee8992;
}
ol.list22 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list22 li:last-of-type, ol.list22 li:last-of-type{
  border-bottom: none;
}


ul.list23, ol.list23 {
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  list-style-type: none;
  background-color: #fff;
  background-image:
  linear-gradient(-45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(255,224,224,.5) 25%, transparent 25%, transparent 50%, rgba(255,224,224,.5) 50%, rgba(255,224,224,.5) 75%, transparent 75%, transparent 100%);
  background-size: 45px 45px;
  background-size: 80px 80px;
}
ol.list23 {
  counter-reset: number;
}
ul.list23 li, ol.list23 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #ee8992;
}
ul.list23 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #ee8992;
}
ol.list23 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list23 li:last-of-type, ol.list23 li:last-of-type{
  border-bottom: none;
}


ul.list24, ol.list24{
  position: relative;
  border: solid 2px #fcb1b1;
  border-radius: 7px;
  background: #fff6e6;
  color: #fcb1b1;
  list-style-type: none;
  padding: 0;
}
ol.list24{
  counter-reset: number;
}
ul.list24 li, ol.list24 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: dashed 1px #fcb1b1;
  font-weight: bold;
}
ul.list24 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #fcb1b1;
}
ol.list24 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #fcb1b1;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list24 li:last-of-type, ol.list24 li:last-of-type{
  border-bottom: none;
}


ul.list25, ol.list25 {
  padding: 0;
  position: relative;
  border: none;
}
ol.list25 {
  counter-reset: number;
}
ul.list25 li, ol.list25 li {
  list-style-type: none;
  color: #fa8072;
  background: #ffe4e1;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: 2px solid #fff;
  list-style-type: none;
  font-weight: bold;
}
ul.list25 li::before {
  font-family: FontAwesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em;
  color: #fa8072;
}
ol.list25 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #fa8072;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}


ul.list26, ol.list26 {
  margin: 3em 0 1em 0;
  border: solid 2px #ee8992;
  padding: 0.3em 0.5em;
  position: relative;
  color: #ee8992;
  list-style-type: none;
}
ol.list26 {
  counter-reset: number;
}
ul.list26 li, ol.list26 li {
  list-style-type: none;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
  border-bottom: dashed 1px #ee8992;
}
ul.list26 li::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #ee8992;
}
ol.list26 li::before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #ee8992;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
ul.list26 li::after, ol.list26 li::after{
  background: #ee8992;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 10px 0 10px;
  content: "POINT";
  letter-spacing: 0.1em;
}
ul.list26 li:last-of-type, ol.list26 li:last-of-type{
  border-bottom: none;
}


/* https://www.yuu-diaryblog.com/2017/03/14/list-design/ */

ol.list27{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}
  
ol.list27 li{
  list-style-type: none;
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}
  
ol.list27 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list28{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}
ol.list28 li{
  list-style-type: none;
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}
 ol.list28 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  top: 0;
  left: -35px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
   z-index:1;
}
ol.list28 li:after{
  content:"";
  position: absolute;
  top: 3px;
  left: -32px;
  width: 25px;
  height: 25px;
  background: #F6A38B;
  color: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


ol.list29{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.list29 li{
  list-style-type: none;
  position:relative;
  padding: 0 0 0 30px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:14px;
  line-height: 29px;
  border: dashed 1px transparent;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.list29 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list29 li:hover{
  border-bottom-color: #F6A38B;
}


ol.list30{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.list30 li{
  list-style-type: none;
  position:relative;
  margin: 7px 0 7px 0px;
  padding-left:40px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border: solid 1px #F6A38B;
  border-radius:20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.list30 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list30 li:hover{
  background: #F6A38B;
  color: #fff;
}
ol.list30 li:hover:before{
  background: #fff;
  color: #F6A38B;
}


ol.list31{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0;
}
ol.list31 li{
  list-style-type: none;
  position:relative;
  line-height: 30px;
  margin: 7px 0 10px 40px;
  padding-left:10px;
  font-weight: bold;
  font-size:14px;
  border-bottom:solid 1px #F6A38B;
}
ol.list31 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -30px;
  width: 30px;
  height: 32px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list32{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.list32 li{
  list-style-type: none;
  position:relative;
  margin: 7px 0 7px 0px;
  padding-left:40px;
  font-weight: bold;
  font-size:16px;
  line-height: 30px;
  border: 2px solid #756C67;
  color: #756C67;
}
ol.list32 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #756C67;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list33{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.list33 li{
  list-style-type: none;
  position:relative;
  line-height: 30px;
  margin: 7px 0 10px 30px;
  padding-left: 10px;
  font-weight: bold;
  background: #fef6f3;
}
ol.list33 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -40px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list33 li:after{
  content:"";
  display: block;
  position: absolute;
  left: -10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list34{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.list34 li{
  list-style-type: none;
  position:relative;
  margin: 7px 0 7px 0px;
  padding-left:43px;
  font-weight: bold;
  font-size:16px;
  line-height: 30px;
  border: 2px solid #756C67;
  color: #756C67;
}
ol.list34 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #756C67;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list34 li:after{
  content:"";
  display: block;
  position: absolute;
  left: 30px;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #756C67;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list35{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 1.5em;
}
ol.list35 li{
  list-style-type: none;
  position:relative;
  padding: 7px 5px 7px 40px;
  margin: 7px 0 10px 30px;
  font-weight: bold;
  font-size:14px;
  border-bottom:dashed 1px #F6A38B;
}
ol.list35 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list36{
  counter-reset:list;
  list-style-type:none;
  position:relative;
  font: 14px/1.6 'Mv Boli', 'arial narrow', sans-serif;
  padding: 1.2em;
  background:#F2EFE7;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  width:340px;
}
ol.list36:after{
  content:"list-sample";  /* 右下の文字 */
  position: absolute;
  bottom: 8px;
  right: 1.2em;
  font-size:12px;
  color:#bbb;
}
ol.list36 li{
  list-style-type: none;
  position:relative;
  padding: 7px 5px 7px 50px;
  margin: 7px 0 10px 0px;
  font-weight: bold;
  font-size:14px;
  border-bottom:dashed 1px #ccc;
  color:#333;
}
ol.list36 li:first-child{
  margin-top:0;
}
ol.list36 li:last-child{
  margin-bottom:20px;
}
ol.list36 li:before{
  counter-increment: list;
  content: counter(list) ",";
  position: absolute;
  left: 15px;
  font-size:1.2em;
   top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list37,
ol.list37 ol{
  counter-reset: list;
  list-style: none;
  padding: 0;
  width:350px;
  font: 14px/1.6 'arial narrow', sans-serif;
}
ol.list37 ol{
  margin: 0 0 0 35px;
  width:315px;
}
 
.list37 a{
  position: relative;
  display: block;
  text-decoration: none;
  padding: 3px 3px 3px 8px;
  margin: 8px 0 8px 30px;
  background: #f1f8ff;
  color: #333;
  font-weight: bold;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out; 
}
 
.list37 a:hover{
  background: #ffd9d3;
}   
 
.list37 a:before{
  content: counter(list);
  counter-increment: list;
  position: absolute;
  left: -35px;
  top: 50%;
  height: 28px;
  width: 28px;
  margin-top: -1em;
  background: #5c9ee7;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
 
.list37 a:after{
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
 
.list37 a:hover:after{
  left: -6px;
  border-left-color: #5c9ee7;
}



ol.list38,
ol.list38 ol{
  counter-reset: list;
  list-style: none;
  padding: 0;
  width:350px;
  font: 14px/1.6 'arial narrow', sans-serif;
}
ol.list38 ol{
  margin: 0 0 0 35px;
  width:315px;
}
 
.list38 a{
  position: relative;
  display: block;
  padding: 4px 4px 4px 31px;
  margin: 7px 0;
  background: #fef6f3;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out; 
}
 
.list38 a:hover{
  background: #b3d5ed;
}
 
.list38 a:hover:before{
  left: -10px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);    
}
 
.list38 a:before{
  content: counter(list);
  counter-increment: list;
  position: absolute;   
  top: 50%;
  left: -15px;
  height: 26px;
  width: 26px;
  margin-top: -15px;
  background: #F6A38B;
  color: #fff;
  line-height: 26px;
  border: 3px solid #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 26px;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}



ol.list39{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ol.list39 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border-bottom: dashed 1px #F6A38B;
}
ol.list39 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list40{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ol.list40 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border-bottom: dashed 1px #F6A38B;
}
ol.list40 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list41{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ol.list41 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border-bottom: dashed 1px #F6A38B;
}
ol.list41 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list41 li:after{
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ol.list42{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ol.list42 li{
  position:relative;
  color: #fff;
  padding: 0 0 0 30px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  background: #77b4fd;
  border-radius: 20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.list42 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.list42 li:hover{
  background: #8393ca;
}


ul.list43{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px 10px 20px;
  color: #448ccb;
  background: #ecf3fa;
  border: solid 2px #adcce8;
  border-radius: 5px;
  list-style: none;
  text-align:left;
}
ul.list43 li{
  position: relative;
  line-height: 30px;
  padding-left: 20px;
  font-weight: bold;
  border-bottom: dashed 1px #448ccb;
}
ul.list43 li:before{
  content: "・";
  position: absolute;
  left: 0px;
}


ul.list44{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px;
  color: #448ccb;
  background: #ecf3fa;
  border: dashed 2px #adcce8;
  border-radius: 20px;
  list-style: none;
  text-align:left;
}
ul.list44 li{
  position: relative;
  line-height: 25px;
  padding-left: 30px;
  font-weight: bold;
}
ul.list44 li:before{
  content: "・";
  position: absolute;
  left: 7px;
  font-size: 20px;
}


ul.list45{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px;
  color: #448ccb;
  background: #ecf3fa;
  border: dashed 2px #adcce8;
  border-radius: 20px;
  list-style: none;
  -webkit-box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
  -moz-box-box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 0px 10px #ecf3fa, 5px 5px 15px rgba(0, 0, 0, 0.3);
  text-align:left;
}
ul.list45 li{
  position: relative;
  line-height: 25px;
  padding-left: 30px;
  font-weight: bold;
}
ul.list45 li:before{
  content: "・";
  position: absolute;
  left: 7px;
  font-size: 20px;
}


ul.list46{
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 10px;
  color: #448ccb;
  background: #ecf3fa;
  border-radius: 20px;
  list-style: none;
  -webkit-box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
  -moz-box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
  box-shadow: 1px 1px 5px rgba( 236, 243, 250, 0.7) ;
  text-align:left;
}
ul.list46 li{
  position: relative;
  line-height: 25px;
  padding-left: 30px;
  font-weight: bold;
}
ul.list46 li:before{
  content: "・";
  position: absolute;
  left: 7px;
  font-size: 20px;
}


ul.list47{
  position: relative;
  padding: 0.8em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  background:#F2EFE7;
  list-style: none;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  text-align:left;
}
 
ul.list47 li{
  position:relative;
  font-weight: bold;
  color: #333;
  border-bottom:dashed 1px #ccc;
  padding:4px 0 4px 2em;
}
ul.list47 li:last-child{
  margin-bottom:15px;
}
ul.list47 li:before{
  content: "・";
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list48{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
  text-align:left;
}
ul.list48 li{
  position: relative;
  padding: 7px 5px 7px 35px;
  margin-bottom:5px;
  background: #5c9ee7;
  color: #fff;
}
ul.list48 li:before{
  content: "";
  position: absolute;
  left: 10px;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list49{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
  text-align:left;
}
ul.list49 li{
  position: relative;
  padding: 7px 5px 7px 35px;
  margin-bottom:5px;
  background: #5c9ee7;
  color: #fff;
}
ul.list49 li:before{
  content: "";
  position: absolute;
  left: 10px;
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}



ul.list50{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
  text-align:left;
}
ul.list50 li{
  position: relative;
  padding: 7px 5px 7px 10px;
  margin-bottom:5px;
  border-left: solid 5px #5c9ee7;
  background: #f1f8ff;
  color: #5c9ee7;
  font-weight: bold;
  -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
  box-shadow:1px 1px 2px rgba(0, 0, 0, 0.1) ;
}



ul.list51{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  text-align:left;
}
ul.list51 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  color: rgb(129,194,250);
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid rgba(129,194,250, 0.5);
}
ul.list51 li:after,
ul.list51 li:before{
  content: "";
  position: absolute;
  border-radius: 50%;
}
ul.list51 li:before{
  left: 0.2em;
  width: 17px;
  height: 17px;
  background: rgba(129,194,250,0.5);
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.list51 li:after{
  top: 1.1em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(129,194,250,0.3);
}


ul.list52{
  padding: 0;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  text-align:left;
}
ul.list52 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.3em;
  margin-bottom:5px;
  color: rgb(129,194,250);
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px solid rgba(129,194,250, 0.5);
}
ul.list52 li:after,
ul.list52 li:before{
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul.list52 li:before{
  top: 0.7em;
  left: 0.2em;
  width: 12px;
  height: 12px;
  border:2px solid rgba(129,194,250,0.5);
}
ul.list52 li:after{
  top: 0.9em;
  left: 0.7em;
  width: 14px;
  height: 14px;
  background: rgba(129,194,250,0.3);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}


ul.list53{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ul.list53 li{
  position:relative;
  color: #333;
  padding: 0 0 0 20px;
  margin: 7px 0px;
  line-height: 30px;
  border-bottom: dashed 1px #ccc;
}
ul.list53 li:before{
  counter-increment: list;
  content: counter(list) ".";
  display: block;
  position: absolute;
  left: 0px;
  font-weight: bold;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list54{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ul.list54 li{
  position:relative;
  color: #333;
  padding: 0 0 0 23px;
  margin: 7px 0px;
  line-height: 30px;
  border-bottom: dashed 1px #ccc;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ul.list54 li:before{
  counter-increment: list;
  content: counter(list) ".";
  display: block;
  position: absolute;
  left: 0px;
  font-weight: bold;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.list54 li:hover,
ul.list54 li:hover:before{
  font-size: 20px;
  color: #FFA79F;
}


ul.list55{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
  text-align:left;
}
ul.list55 li{
  position:relative;
  color: #fff;
  padding: 0 0 0 30px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  background: #77b4fd;
  border-radius: 20px;
  -webkit-box-shadow: 1px 1px 2px #ccc;
  -moz-box-shadow: 1px 1px 2px #ccc;
  box-shadow: 1px 1px 2px #ccc;
}
ul.list55 li:before{
  counter-increment: list;
  content: counter(list);
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list56{
  counter-reset:li;
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  padding:0;
  text-align:left;
}
ul.list56 li{
  position: relative;
  font-weight: bold;
  line-height: 28px;
  padding-left: 40px;
  margin: 10px 0;
}
ul.list56 li:nth-child(4n+1){
  border:dashed 1px #FFA79F;
}
ul.list56 li:nth-child(4n+2){
  border:dashed 1px #fbaf5d;
}
ul.list56 li:nth-child(4n+3){
  border:dashed 1px #9FCDFF;
}
ul.list56 li:nth-child(4n+4){
  border:dashed 1px #AFEBB6;
}
ul.list56 li:before{
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: -1px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.list56 li:nth-child(4n+1):before{
  background: #FFA79F;
}
ul.list56 li:nth-child(4n+2):before{
  background: #fbaf5d;
}
ul.list56 li:nth-child(4n+3):before{
  background: #9FCDFF;
}
ul.list56 li:nth-child(4n+4):before{
  background: #AFEBB6;
}


ul.list57{
  counter-reset:li;
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  padding:0;
  text-align:left;
}
ul.list57 li{
  position: relative;
  font-weight: bold;
  line-height: 28px;
  margin: 10px 0;
  padding-left: 40px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ul.list57 li:nth-child(4n+1){
  border:dashed 1px #FFA79F;
}
ul.list57 li:nth-child(4n+2){
  border:dashed 1px #fbaf5d;
}
ul.list57 li:nth-child(4n+3){
  border:dashed 1px #9FCDFF;
}
ul.list57 li:nth-child(4n+4){
  border:dashed 1px #AFEBB6;
}
ul.list57 li:before{
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: -1px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.list57 li:nth-child(4n+1):before{
  background: #FFA79F;
}
ul.list57 li:nth-child(4n+2):before{
  background: #fbaf5d;
}
ul.list57 li:nth-child(4n+3):before{
  background: #9FCDFF;
}
ul.list57 li:nth-child(4n+4):before{
  background: #AFEBB6;
}
ul.list57 li:hover{
  color:#fff;
  overflow: hidden;
  z-index: 1;
}
ul.list57 li:nth-child(4n+1):hover{
  background: #FFA79F;
}
ul.deco31 li:nth-child(4n+1):hover:before{
  background: #fff;
  color: #FFA79F;
}
ul.list57 li:nth-child(4n+2):hover{
  background: #fbaf5d;
}
ul.list57 li:nth-child(4n+2):hover:before{
  background: #fff;
  color: #fbaf5d;
}
ul.list57 li:nth-child(4n+3):hover{
  background: #9FCDFF;
}
ul.list57 li:nth-child(4n+3):hover:before{
  background: #fff;
  color: #9FCDFF;
}
ul.list57 li:nth-child(4n+4):hover{
  background: #AFEBB6;
}
ul.list57 li:nth-child(4n+4):hover:before{
  background: #fff;
  color: #AFEBB6;
}


ul.list58{
  counter-reset:li;
  padding: 0.5em 0.5em 0.5em 2em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:350px;
  list-style: none;
  text-align:left;
}
.list58 li{
  position: relative;
  padding: 13px 4px 10px 20px;
  margin-top: 0.8em;
  border-bottom: 1px dashed #ccc;
  font-size: 20px;
  color: #333;
}
 
.list58 li:before{
  counter-increment: li;
  content: counter(li);
  position: absolute;    
  z-index: -1;
  left: -5px;
  top: -3px;
  background: #f5f5f5;
  height: 1.5em;
  width: 1.5em;
  border: .1em solid rgba(0,0,0,.05);
  text-align: center;
  font: italic bold 1em/1.3em Georgia, Serif;
  color: #ccc;
  border-radius: 1.5em;
  transition: all .2s ease-out;
}
 
.list58 li:hover:before{
  background-color: #ffd797;
  border-color: rgba(0,0,0,.08);
  border-width: .2em;
  color: #444;
  transform: scale(1.5);
}


ul.list59{
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  padding: 0.5em 0.7em;
  border: solid 2px #5c9ee7;
  border-radius: 5px;
  text-align:left;
}
ul.list59 li{
  position: relative;
  color: #5c9ee7;
  margin-bottom:5px;
  padding-left: 30px;
  line-height: 30px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px dashed #5c9ee7;
}
ul.list59 li:last-child{
  border:none;
  margin: 0;
}
ul.list59 li:before{
  font-family: FontAwesome;
  content: "\f054";
  position: absolute;
  left: 5px;
  font-size: 1.2em;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  background-position: bottom;
}
ul.list59 li:hover:before{
  -webkit-transform:rotateY(-360deg);
  transform:rotateY(-360deg);
  color: red;
}


ul.list60{
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  padding: 0.5em 0.7em;
  border: solid 2px #5c9ee7;
  border-radius: 5px;
  text-align:left;
}
ul.list60 li{
  position: relative;
  color: #5c9ee7;
  margin-bottom:5px;
  padding-left:5px;
  line-height: 30px;
  font-size: 15px;
  font-weight: bold;
  border-bottom: 1px dashed #5c9ee7;
}
ul.list60 li:last-child{
  border:none;
  margin: 0;
}
ul.list60 li:before{
  font-family: FontAwesome;
  content: "\f054";
  position: absolute;
  right: 5px;
  font-size: 1.2em;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
ul.list60 li:hover:before{
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  background-position: bottom;
  color: red;
}


ul.list61{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  text-align:left;
}
ul.list61 li{
  position: relative;
  padding: 0.5em 1em 0.5em 0.7em;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #f1f8fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#d8ecfd), to(#5ab0f9));
  background: -moz-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -o-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -ms-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9')";
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  zoom: 1;
}
ul.list61 li:last-child{
  border:none;
  margin: 0;
}
ul.list61 li:before{
  font-family: FontAwesome;
  content: "\f054";
  position: absolute;
  right: 0.3em;
  color: #fff;
  font-size: 1.2em;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}



ul.list62{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  text-align:left;
}
ul.list62 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2.7em;
  font-size: 15px;
  font-weight: bold;
  border-radius:30px;
  color: #fff;
  background: #f1f8fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#d8ecfd), to(#5ab0f9));
  background: -moz-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -o-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: -ms-linear-gradient(top, #d8ecfd, #5ab0f9);
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d8ecfd', endColorstr='#5ab0f9')";
  background: linear-gradient(top, #d8ecfd, #5ab0f9);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  zoom: 1;
}
ul.list62 li:last-child{
  border:none;
  margin: 0;
}
ul.list62 li:before{
  font-family: FontAwesome;
  content: "\f040";
  position: absolute;
  left: 0.8em;
  color: #fff;
  font-size: 1.2em;
  font-weight: normal;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list63{
  padding: 0 0.7em;
  font: 14px/1.6 'arial narrow', sans-serif;
  width:370px;
  list-style: none;
  text-align:left;
}
ul.list63 li{
  position: relative;
  padding: 0.5em 1em 0.5em 2em;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #5ab0f9;
}
ul.list63 li:last-child{
  border:none;
  margin: 0;
}
ul.list63 li:before{
  font-family: FontAwesome;
  content: "\f04b";
  position: absolute;
  left: 0.8em;
  color: #fff;
  font-size: 0.8em;
  font-weight: normal;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


ul.list64{
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  text-align:left;
}
ul.list64 li{
  position: relative;
  margin-bottom: 3px;
  padding-left: 30px;
  line-height: 30px;
  font-weight: bold;
  color: #5ab0f9;
  border: solid 1px #5ab0f9;
  overflow: hidden;
}
ul.list64 li:before{
  font-family: FontAwesome;
  content: "\f0a9";
  position: absolute;
  left: 0.5em;
  font-size: 1.2em;
  font-weight: normal;
}
ul.list64 li:after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  height:0;
  width: 100%;
  background : #5ab0f9;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  z-index: -1;
}
ul.list64 li:hover{
  color: #fff;
}
ul.list64 li:hover:after{
  height: 840%;
  opacity: 1;
}
ul.list64 li:active:after{
  height: 1000%;
  opacity: 1;
}


/* https://programming-cafe.com/programming/html-css/list-board/ */

ul.kakomi1{ 
  position:relative;
  text-align:center; 
  border:3px solid #3C8DFF;
  color:#3C8DFF;
  max-width:400px;
  padding:0px 20px 0px 0px;
  margin:20px 5px 5px 5px;
}
ul.kakomi1  > li{/* .deco39 の直接の子であるliにのみ適用する。孫のliには影響しない  　ここでデザインを設定すると子に影響してしまうため、marginのみ設定する */
  margin:0px;
  list-style-type:none; /* タイトルについて〇をつけない */
} 

ul.kakomi1  > li::after{ /* 右下の■を表示します */
  position: absolute;
  bottom:10px;
  right:10px;
  content:"";
  border:10px solid #3C8DFF;
} 

ul.kakomi1  > li > span.title-span{ 
  padding:0px 10px; 
  position:absolute;
  background-color: #3C8DFF;
  top:-15px;
  left:15px;
  color:#ffffff;
} 
 
ul.kakomi1  > li > ul{ 
  margin-left: 35px; 
  margin-top:20px;
 text-align:left;
} 
  
ul.kakomi1  > li > ul > li{
 list-style-type:decimal; /* 連番は decimal */ 
 margin-top:5px;
}


ul.kakomi2{
  text-align:center; 
  border:3px dashed #3C8DFF;
  border-radius:15px; 
  background-color:#ffffff;
  color:#3C8DFF;
  max-width:400px;
  padding:20px;
  margin:10px;
}
ul.kakomi2 > li{/* white-blue-boad の直接の子であるliにのみ適用する。孫のliには影響しない*/
 list-style-type:none;
} 
ul.kakomi2 > li > span{ 
  list-style-type:none;/* タイトルについて、リストマーカーである〇を表示しない */ padding:0px 10px; 
  border-bottom:1px solid #3C8DFF;
} 
ul.kakomi2 > li > ul{
  margin-left: 20px; 
  margin-top:20px;
  text-align:left;
}
ul.kakomi2 > li > ul > li{
 list-style-type:decimal;/* 数字のマーカーを表示 */ 
 margin-top:5px;
}


ul.kakomi3{
  text-align:center;
  border:4px solid #996600;
  background-color:#003333;
  color:#f3f3f3;
  max-width:400px;
  padding:20px;
  margin:10px;
}
ul.kakomi3 > li{ /* black-boad の直接の子であるliにのみ適用する。孫のliには影響しない*/
  list-style-type:none;
}
ul.kakomi3 > li > span{
  list-style-type:none;/* 黒板のタイトルについて、リストマーカーである〇を表示しない */
  padding:0px 10px;
  border-bottom:3px dashed #f3f3f3;
}
ul.kakomi3 > li > ul{
  margin-left: 10px;
  margin-top:20px;
  text-align:left;
}

ul.kakomi3 > li > ul > li{
  list-style-type:disc;/* 塗りつぶしの●に変更する　■は square */
  margin-top:5px;
}


/* SVG ICONS 使用 */