/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20170614
*/
body{
	font-feature-settings: "kern" !important;	
	word-spacing: .1em !important;	
}
#copy{
	font-family: 'Lucida Sans',sans-serif;
	color: #666;
}
#footer-bottom p{
	font-size:12px !important;
	text-align:center;
	margin-top:0;
	line-height: 30px;
}
#footer-bottom .aligncenter{
	margin:0 auto !important;
}
.breadcrumbs{
	clear:both;
	margin:0 0 15px 0;
}
.breadcrumbs,
.breadcrumbs a{
	font-size:12px !important;
	text-decoration:none;
}
.promotion {
	font-size: .9em;
	float:right;
}
.blue {
	color: #4390ef !important;
	background-color: aliceblue !important;
}
.migi{
	display:flex;
	justify-content: flex-end;
}
blockquote i {
	font-size:30px;
	vertical-align: -6px;
	margin-right:5px;
}
.blogbox {
	float:left;
	font-size:14px;
}
.blogbox i {
	margin-right:3px;
}
.fa-redo-alt{
	margin-left:5px !important;
}
.footer-content ul{
    padding: 0 5px 0 5px !important;
	margin-bottom:40px;
}	
.footer-content li{
	font-size:12px;
	display: inline;
	margin:0 12px 0 0 !important;
	line-height:28px;
}
.footer-content li a{
	color:#555 !important;
}
.withbox {
    position: relative;
    margin: 1.5em 0 2.3em 0;
    padding: 0 18px 17px;
    border: solid 1px #ef9c99;
    border-radius: 10px;
}
.withbox .with:before {
	font-size: 22px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f5da";
    padding-right:5px;
}
.withbox .with {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 7px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #ef9c99;
    font-weight: bold;
}
.withbox p {
	font-size: 14px;
    margin: 0; 
    padding: 20px 0 0 0;
	line-height:25px;
}
.bline{
	text-decoration:underline;
}
.introduction {
    position: relative;
    margin: 2.1em 0;
    padding: 18px;
    border: solid 1px #E0E0E0;
    border-radius: 10px;
}
.introduction p {
    margin: 0;
    padding: 0;
}
.introduction a{
	color: #333;
	text-decoration:none !important;
}
.koshiki {
    position: relative;
    margin: 2.1em 0;
    padding: 0 18px 17px;
    border: solid 1px #ec7eb4;
    border-radius: 10px;
}
.koshiki a{
	color: #007185;
	text-decoration:underline !important;
}
.koshiki a:hover{
	text-decoration:none !important;
}
.koshiki .koshi:before {
	position: relative;
	top:3px;
	font-size: 22px;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f107";
    padding-right:5px;
}
.koshiki .koshi {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 7px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;   
}
.koshiki p {
	font-size: 18px;
    margin: 0;
    padding: 25px 0 8px;
	line-height:35px;
	font-weight: bold;
}
.sen,.internal {
	line-height:23px;
}
.sen:after {
  	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
      content: "\f35d";
      width: 10px; /* 線の長さ */
}
.sen:after,.internal:after {
      margin-left:7px;
}
.internal:after {
  	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
      content: "\f0c1";
}
/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: absolute;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  -webkit-transition: 0.5s all;
  -moz-transition   : 0.5s all;
  transition        : 0.5s all;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active{
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.hamburger.active span:nth-child(3) {
  opacity: 0;
}

nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 25%;
  color: #000;
  background: #fff;
  text-align: left;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
  opacity: 0.9;
}

nav.globalMenuSp ul {
  background: #ccc;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0 0 0 10px;
  width: 75%;
  border-bottom: 1px solid #fff;
	line-height:25px;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration :none;
}
@media (min-width: 768px) {
nav.globalMenuSp {
  left : 75%;
}	
nav.globalMenuSp ul li {
  width: 25%;
}	
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

.supervisor a{
	color:#007185 !important;
	text-decoration: none !important;
}
.supervisor a:hover{
	text-decoration: underline !important;
}
.supervisor {
	font-size:12px !important;
	font-weight:normal !important;
	width:auto;
	margin:10px 3px 25px 0 !important;
	text-align:right !important;
}
.hide{
	transform: translateY(100%); /* 下に消えるようにする */
}
#scrollArea2{	
	margin: 0 auto;
	position: fixed;
	bottom: 0; /* 表示場所を一番下に */
	z-index: 100; /* 前面に表示されるようにする */
	left: 0;
	right: 0;
}
#scrollArea{
	max-width: 600px;
	margin: 0 auto;
    position: fixed; /* 固定して表示されるようにする */
    bottom: 0; /* 表示場所を一番下に */
    transition: .5s; /* スクロール時に一瞬で消えると物足りないので.hideの処理を0.5秒で行う */
    z-index: 100; /* 前面に表示されるようにする */
    left: 0;
    right: 0;
}
.blogcardfu {
	background-color:#fff !important;
	border:1px solid #E0E0E0 !important;
	border-radius:3px !important;
	text-align:left !important;
	line-height:1.2;
	padding:.5em;
}
.blogcardfu-title{
	font-size:85%;
	font-weight:700;
	color:#333;
	margin:0;
}
.blogcardfu-content{
	font-size:80%;
	color:#666;
}
.hidari{
	float:left;
}
.blogcardfu img{
	margin: 1px .3em 0 .3em !important;
}
h3.bln{
	font-size: 14px;
	margin:0 !important;
	padding:0 !important;
	border-bottom: none !important;
	font-weight:normal;
}
#text-8{
	margin-bottom:30px;
}
#text-8 h6{
	color:#555;
	font-size:13px;
	margin-bottom:5px;
}
#text-8 ul {
	margin-left: 5px !important;
	padding:0 !important;
}
#text-8 li {
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}
#text-8 li a {
	color:#777;
	font-size:12px;
}
#text-8 li li{
	margin-left:5px;
}
.yokosen {
      display: flex;
      align-items: start; /* 垂直中心 */
      justify-content: left; /* 水平中心 */
      line-height:26px;
}
.yokosen:before {
      border-top: 1px solid;
      content: "";
      width: 20px; /* 線の長さ */
	margin-top:12px;
}
.yokosen:before {
      margin-right: 5px; /* 文字の右隣 */
}
/* 揺れるボタン */
/* btnAnime01 */

.btnAnime01 {
    -webkit-animation-name:btnAnime02;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease;
    
    -moz-animation-name:btnAnime02;
    -moz-animation-duration:1s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease;
}
.btnAnime01 a {
	color:#fff !important;
}
/*ボタンデザイン（拡大縮小）*/
.btnAnime02 {
      margin: 0 auto 38px auto;
	  animation: anime1 0.8s ease 0s infinite alternate;
      transform-origin:center;
    }
    @keyframes anime1 {
      from {
        transform: scale(0.9,0.9);
      }
      to {
        transform: scale(1,1);
      }
}
}

@-webkit-keyframes btnAnime02 {
    0% {-webkit-transform:translate(0, 0);}
    50% {-webkit-transform:translate(0, -8px);}
    100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes btnAnime02 {
    0% {-moz-transform:translate(0, 0);}
    50% {-moz-transform:translate(0, -8px);}
    100% {-moz-transform:translate(0, 0);}
}
.footerBtn {
	   width: 90%;
		font-size:15px;	
  clear:both;
  display: inline-block;
  padding: 0.7em 1em;
 margin-top: 1.5em;
	margin-bottom: 1em;
  text-decoration: none;
  background: rgba(89,179,185,1);/*ボタン色*/
  color: #FFF;
  border-bottom: solid 3px #4f8984;
  border-radius: 5px;
	    text-align: center;
}
.footerBtn:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.footerBtn a {
  color: #fff;
  text-decoration: none;
}
.footerBtn:after{
	content: "●";
	color: #fc0d1b;
	position: relative;
	font-size: 5px;
	left: -7px;
	top: -11px;
}
.reco,.reco2{
	margin:0 !important;
	padding:0 !important;
}
.reco2{
	margin-top:5px !important;
	font-size:12px !important;
}
.reco3{
	margin-top:20px;
}
.up-10 {
	margin-top:10px !important;
}
.up-20 {
	margin-top:20px !important;
}
.up-30 {
	margin-top:30px !important;
}
.up-40 {
	margin-top:40px !important;
}
.kihon {
	text-align:center !important;
	padding-bottom:3px;
}
.under-10 {
	margin-bottom:10px !important;
}
.under-20 {
	margin-bottom:20px !important;
}
.under-30 {
	margin-bottom:30px !important;
}
.under-40 {
	margin-bottom:40px !important;
}
.under-50 {
	margin-bottom:50px !important;
}
.under-60 {
	margin-bottom:60px !important;
}
.under-blue {
	background: linear-gradient(transparent 60%, #e4f4ee 50%);
	font-weight:bold;
}
.under-yellow {
	background: linear-gradient(transparent 60%, #fff3b8 50%);
	font-weight:bold;
}
.under-red {
	background: linear-gradient(transparent 60%, #fedee7 50%);
	font-weight:bold;
}
.komidashi{
	font-weight:bold;
	font-size: 22px;
	text-align: left;
	padding-top: 25px;
	line-height: 28px;
}
.redbold,.redboldbig{
	font-weight:bold;
	color: #f56978;
}
.redboldbig{
	font-size: 22px;
}
.deka{
	font-size: 22px;
}
.sage {
	clear:left !important;
	margin-top: 70px !important;
}
.sagekanren {
	clear:both !important;
}
.mini{
	font-size:12px;	
}
.mini a {
	font-style: italic !important;
}
/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 70px;
height: 70px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
margin-left: 0;
}
.balloon-image-right {
float: right;
margin-left: 20px;
margin-right: 0;	
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 0 0 30px 0;
font-size: 11px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
margin-top: 15px;	
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #aaa;
}
.balloon-text-left {
border-color: #aaa;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}

/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
 border-radius: 30px;
}
.think .balloon-text-right:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 left: -12px;
}
.think .balloon-text-right:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 left: -19px;
}
.think .balloon-text-left:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 right: -12px;
}
.think .balloon-text-left:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 right: -19px;
}
.fuki {
  color: white;
  font-weight:bold;	
  position: relative;
  padding: 0.8em;
  background: #ffb107;
}

.fuki:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ffb107;
  width: 0;
  height: 0;
}
.text-right{
	font-size: 18px;
	text-align: right;
	padding-bottom: 50px;
}

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

.ctg ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}
.boldbig {
	font-size: 36px;
	font-weight:bold;
}

/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {

/*-- ここまで --*/
}

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*-- ここまで --*/
}
/*　画面サイズが480px以下の場合ここの記述が適用される　*/
@media screen and (max-width:750px) {
#footerFloatingMenu img {
	margin:0 3px 14px 0 !important; 
	display:inline !important;
}
}
/*media Queries タブレットサイズ（480px以上）
----------------------------------------------------*/
@media only screen and (max-width: 480px) {
#mybox li{
	line-height:28px;	
}
.mainbox .entry-content img{
    display:block;
    margin:0 auto;
}
.footerBtn:after{
	content: "●";
	color: #fc0d1b;
	position: relative;
	font-size: 5px;
	left: -1px;
	top: -11px;
}
.sp img {
float:none;	
}
/*-- ここまで --*/
}
/*-- タイトルの配置 --*/
#header-l {
float: none;
text-align: left;
}

/*-- hannariからの引き継ぎ --*/
#footerFloatingMenu {
	font-size:15px;	
	background: rgba(89,179,185,0.9);
	color: #fff;
    display: block;
    width: 97%;
    position: fixed;
    line-height: 50px;
    left: 5px;
	border-radius: 30px;
    bottom: 5px;
    z-index: 9999;
    text-align: center;
    padding: 7px auto;
}

#footerFloatingMenu img {
    max-width: 99%;
	margin:0 3px 12px 0;
}
#footerFloatingMenu a {
  color: #fff;
  text-decoration: none;
}
#footerFloatingMenu a:hover {
	color: #fff;
	text-decoration: underline;
	padding: 10px auto;
}

@media (min-width: 750px) {
    #footerFloatingMenu{
	background: rgba(89,179,185,0.9);
	border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
	border-bottom: none;
    display: none;
	line-height: 50px;
    width: 400px;
	left:60%;
	bottom:0px;
}
#footerFloatingMenu a {
  color: #fff;
  text-decoration: none;
}
	#scrollArea2{
	max-width: 470px;
	left: 60%;
}
}

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
	margin: 10px 0;
}
 
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.whatsnew h3{
	padding:10px 0 5px 2px;
	margin:0;
	border-bottom:none;
}
.whatsnew dt {
	background-image: none!important;
    padding-left:0px!important;
}
.total {
	padding:0;
	margin:0;
}
.keitaibareul{
	font-size: 15px !important;
	padding:0 0 25px 5px !important;
	margin: 0 !important;
}
.keitaibare{
list-style-type: upper-latin !important;
list-style-position:inside !important;
padding-bottom:20px !important;
}
.ddunder{
	padding-bottom:15px !important;
	margin-bottom: 0 !important;
}
a img {
  filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}
a:hover img {
  filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

/**  追加CSS  **/
.important {
	background-color: #FFFAC4;
	font-weight: bold;
}
.redbold {
	color: #EC75A2;
	font-weight: bold;
}
.redboldbig {
	font-size: 20px;
	color: #EC75A2;
	font-weight: bold;
}
.user {
	font-weight: bold;
	text-align: right;
}
.question {
	border: 3px solid #09C;
	background-color: #FFC;
	margin: 10px 0px 15px 0px;
}
.question .doubt {
	font-size: 18px;
	font-weight: bold;
	background-color: #09C;
	padding: 5px 0px 6px 0px;
	text-align: center;
	color: #FFF;
	margin-bottom: 15px;
}
.question p {
	line-height: 22px;
	font-weight: bold;
	padding: 0px 0px 0px 10px;
}

.d-title {
	font-size: 18px;
	line-height: 1.7;
	margin: 30px 0 -20px 0;
	padding: 10px 10px 5px 10px;
	color: #1a1a1a;
	border-bottom: 1px #999999 dotted;
}

.info-title {
	font-size: 16px;
	line-height: 26px;
	font-weight: bold;
	padding: 3px 0px 0px 10px;
	margin: 10px 0px 10px 0px;
	border-left-width: 6px;
	border-left-style: solid;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-color: #0c69bc;
}
.taikendan {
	font-size: 18px;
	line-height: 28px;
	border-left-width: 6px;
	border-left-style: solid;
	font-weight: bold;
	padding: 2px 0px 0px 10px;
	margin: 40px 0px 10px 0px;
	border-left-color: #0c69bc;
}
.question .point {
	line-height: 0px;
	padding: 10px 0px 0px 15px;
	margin: 0px 0px 0px 0px;
}
.answer-zone {
	padding: 0px 0px 0px 0px;
	float: left;
}
.record {
	font-size: 12px;
}
.emphasis{
  font-weight: bold;
}
/**  追加 dldtdd  **/
.mainbox dl{
	margin: 0 0 20px 0px !important;
	line-height:25px !important;
}
.mainbox .first{
	padding-top:0 !important;
	margin-top:0 !important;
}
.mainbox dt{
background-image: url(https://qraft.co.jp/matchx/wp-content/uploads/2018/07/check_white.png) ;
background-repeat: no-repeat;
background-position: 0px 5px;
font-size: 16px;
font-weight:bold;
padding: 0 0 0 22px;
margin: 35px 0 7px 0 !important;
color: #222;
}
.mainbox dd{
font-size: 15px;
margin: 0 5px 10px 5px;
}
.sukima{
	margin-top: 5px !important;
	float:left;
	clear:both;
}
.tsume{
	margin-top:0;
}
.mainbox p a,.mainbox dd a{
	text-decoration: none;
}
.menu_underh2{
	font-size: 16px !important;
	margin: 0px 100px 10px 0;
	background-color:#f3f3f3;
	color:#000;
	padding:5px 10px 3px 10px;
	border-top-right-radius : 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
}
#breadcrumbs,#breadcrumbs a{
	font-size:12px;
    color: #333;
	text-decoration:none;
}
#breadcrumbs a:hover{
   text-decoration:underline;
}
/*メニューの幅を調整する↓↓----------------------*/
header .smanone ul.menu li{
	width:200px;
}
#st-menuwide{
	display: flex;
}
.inyo{
	font-size:12px;	
	float:right;
	margin-right:10px;
}

/*/////////////////////////////////////////////////
//ブログカードのレイアウト変更
/////////////////////////////////////////////////*/

.wp-embedded-content {
	margin:  0 auto;
	min-width: 100%;
	width: 100%;
}

.ron ul {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin-top: 2em;
	margin-bottom:30px !important;
}
.ron ul,
.ron li {
  line-height: 1.5;
  padding: 0.5em 20px;
  list-style-type: none !important;
}
.ron li:last-child{
	padding-bottom:10px !important;
}
.ron ul li:before {
  /*リストのアイコン*/
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまでの距離*/
  color: #ffb03f; /*アイコン色*/
}
.ron ul li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
	font-weight: 900;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;	
  content: '\f0a7  このページの結論';/*アイコンコード＋文字*/
  letter-spacing: 0.05em;/*字間*/
}
/*オレンジ番号リスト↓↓----------------------*/
.mainbox ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em 0.8em;
}
.mainbox ol li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.mainbox ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #EC75A2;
  color: white;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.mainbox ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}