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

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

.midashi02 {
position: relative;
}

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

.midashi03 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}

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

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

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

.midashi04:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

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

.midashi05: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);
}
.midashi05:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);
}

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

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

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

.midashi07 {
  position:relative;
  padding:5px 25px;
  border-bottom:3px solid #81c2fa;
}
.midashi07:before,
.midashi07:after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border:2px solid #81c2fa;
  position:absolute;
  top:11px;
  left:3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.midashi07:after{
  top:12px;
  left:10px;
  height:12px;
  width:12px;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
  border:none;
  background:rgba(129,194,250,0.3);
}