@charset "shift_jis";

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

/********************
ステップ横
********************/
.step{
  list-style-type: none;
  display:flex;
  width:100%;
  padding:0;
  margin-left:0;
  margin-right:0;
  overflow:hidden;
}
.step li{
	flex:1;
  position:relative;
  background: #666666;
  padding: 10px 5px 10px 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
	}
.step li:first-child{
	padding-left:10px;
}
.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: 100px 0 100px 20px;
  z-index: 10;
}
.step li:after{
  right:-18px;
  border-style: solid;
  border-color: transparent transparent transparent #666666;
  border-width: 100px 0 100px 20px;
  z-index: 10;
}
.step li.is-current{
  background: var(--color-blue);
}
.step li.is-current:after{
  border-color: transparent transparent transparent var(--color-blue);
}
/*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;}
}

@media only screen and (min-width : 980px){
.step li:first-child{
	padding-left:20px;
}
.step li{ text-align:center;}
}
/********************
ステップ縦
********************/
.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: #504944 transparent transparent transparent;
  border-width: 10px 50px 0 50px;
  z-index: 1;
}
.stepT li.is-current{
  background: #9bbb30;
  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>
*/