@charset "shift_jis";

/*reset*/
*{	box-sizing:border-box;}

/********************
ステップ横
********************/
.step{
  list-style-type: none;
  display:table;
  width:100%;
  padding:0;
  margin-left:0;
  margin-right:0;
  overflow:hidden;
	border:none;
}
.step li{
  display:table-cell;
  position:relative;
  background: #ccc;
  padding: 10px 5px 10px 30px;
	width:25%;
	border:none !important;
}
.step li:first-child{
	padding-left:20px;
}
.step li:last-child:before,
.step li:last-child:after{
  display:none;
}
.step li:before,
.step li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.step li:before{
  right:-20px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 40px 0 40px 20px;
  z-index: 10;
}
.step li:after{
  right:-18px;
  border-style: solid;
  border-color: transparent transparent transparent #ccc;
  border-width: 40px 0 40px 20px;
  z-index: 10;
}
.step li.is-current{
  background: #0c7cc4;
	color:#fff
}
.step li.is-current:after{
  border-color: transparent transparent transparent #0c7cc4;
}




/*html
<ol class="step">
  <li class="is-current">STEP1</li>
  <li>STEP2</li>
  <li>STEP3</li>
</ol>
*/
@media all and (-ms-high-contrast:none){
	.step li{padding: 13px 5px 7px 30px;}
}

/********************
ステップ縦
********************/
.stepT{
  list-style-type: none;
  padding:0;
  margin:0;
}
.stepT li{
  position: relative;
  width:100px;
  background: #504944;
  padding: 1em;
  margin-bottom: 1em;
  text-align:center;
  color: #fff;
}
.stepT li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -10px;
  left: 0;
  border-style: solid;
  border-color: #666 transparent transparent transparent;
  border-width: 10px 50px 0 50px;
  z-index: 1;
}
.stepT li.is-current{
  background: #666;
  font-weight: bold;
}
.stepT li.is-current:after{
  border-color: #9bbb30 transparent transparent transparent;
}

/*html
<ol class="stepT">
  <li class="is-current">STEP1</li>
  <li>STEP2</li>
  <li>STEP3</li>
</ol>
*/