/*┌──────────────────────────────────────
/*│  スタイルシート v0.0.1 (2017/01/05)
/*│  style.css
/*└─────────────────────────────────────*/

/*-- [ メイン ] --------------------------------------------------------------*/


/*------------------------------------*/
/* 申込フォーム */
#Application>p {
	width: 80%;
	margin:0 auto;
}
#Application table {
	border-top : 2px solid #f08e59;
	border-bottom : 2px solid #f08e59;
	width: 95%;
	border-collapse: collapse;
	border-spacing: 0;
	margin:0 auto 30px;
}

#Application th, 
#Application td {
	color:#000;
	padding: 25px;
	background : #FFF url( '../assets/images/dot_table.gif' ) top left repeat-x;
	line-height:180%;
	font-size: 20px; font-size: 2rem;
}
#Application th {
	background-color:  #f2f2f2;
	width: 270px;
	line-height:125%;
	vertical-align:top;
	text-align: left;
}
#Application th p {
	font-size: 15px; font-size: 1.5rem;
	margin-top: 1rem;
}

#Application tr.Req>th::before, 
#Application tr.Free>th::before {
	display: block;
	color: #FFF;
	width:auto;
	padding: 2px;
	float: right;
	font-size: 16px; font-size: 1.6rem;
}
#Application tr.Req>th::before {
	content: "必須";
	border: 1px solid #ed7d31;
	background-color: #ffffff;
	color: #ed7d31;
	padding: .2em .5em;
	border-radius: 5px;
}
#Application tr.Free>th::before {
	content: "任意";
	border: 1px solid #b6b6b6;
	background-color: #ffffff;
	color: #b6b6b6;
	padding: .2em .5em;
	border-radius: 5px;
}

#Application tr:nth-of-type(1)>th, 
#Application tr:nth-of-type(1)>td {
	background-image:none;
}
#Application td>span, #Application td>p {
	font-size: 162px; font-size: 1.62rem;
	line-height:125%;
}
#Application td p {
	font-size: 15px; font-size: 1.5rem;
}
.InputName {
	display: flex;
	gap: 4px;
}
.InputName>div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
#Zip>td>div {
	display: flex;
	justify-content: space-between;
}
#Zip>td>div>div {
	display: flex;
}
#Zip label {
	width: 10%;
	display: inline-block;
}
#Zip input {
	width: 90%;
	display: inline-block;
}
#Zip>td>div>button {
	width: 30%;
	height: auto;
	display: inline-block;
	border-radius: 0;
	border: none;
	background-color: #ed7d31;
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	padding: .25em .5em;
	margin: 0 2%;
}
#Zip a {
	width: 30%;
	display: inline-block;
	border: 1px solid #DDD;
	box-shadow: 2px 3px 1px #DDD;
	padding-left: 1em;
	color: #000000;
	font-weight: bold;
}

.mlc_span {
	display: none;		
}

#InputText td>span {
	display: block;
	text-align: right;
	font-size: 15px;
    font-size: 1.5rem;
}

@media screen and (max-width: 767px){
	#Application table {
		width: 100%;
	}

	#Application th, 
	#Application td {
		display: block;
		padding: 12px;
		font-size: 12px; font-size: 1.2rem;
	}
	#Application th {
		width: 100%;
	}
	#Application td {
		width: 100%;
	}
  #Application th, 
	#Application td,
  #Application th p,
  #Application td label {
    font-size: 16px;
  }
  #Application th p {
    margin-bottom: 0;
  }

	#Zip>td>div {
		flex-direction: column;
	}

	#Zip>td>div>div {
		padding: .5em;
	}
	#Zip>td>div>button,
	#Zip>td>div>a {
		width: 100%;
		margin: .5em;
	}

	.mlc_span {
		display: inline;
	}
	#mlc_0,#mlc_1,#mlc_2,
	#inq_0,#inq_1,#inq_2,
  #cnst {
		width: auto;
	}
}
/* ヘッダー */

nav {
  background: #333;
  color: #fff;
  text-align: center;
}

/*ナビゲーションを横並びに*/
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
  position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
  display: block;
  text-decoration: none;
  color: #999;
  padding: 20px 35px;
  transition: all .3s;
}

nav ul li li a {
  padding: 10px 35px;
}

nav ul li a:hover {
  color: #fff;
}

/*==矢印の設定*/
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 0;
  top: 62px;
  z-index: 4;
  /*形状を指定*/
  background: #28BFE7;
  width: 180px;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul {
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav li.has-child ul li:last-child a {
  border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
  background: #3577CA;
}

/*==3階層目*/
/*3階層目の位置*/
nav li.has-child ul ul {
  top: 0;
  left: 182px;
  background: #66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active {
  background: #448ED3;
}

/*==768px以下の形状*/
@media screen and (max-width: 1301px) {
  nav {
    padding: 0;
  }

  nav ul {
    display: block;
  }

  nav li.has-child ul,
  nav li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JSで制御するため一旦表示*/
    opacity: 1;
    /*JSで制御するため一旦表示*/
    display: none;
    /*JSのslidetoggleで表示させるため非表示に*/
    transition: none;
    /*JSで制御するためCSSのアニメーションを切る*/
  }

  /*矢印の位置と向き*/
  nav ul li.has-child::before {
    left: 20px;
  }

  nav ul ul li.has-child::before {
    transform: rotate(135deg);
    left: 20px;
  }

  nav ul li.has-child.active::before {
    /* transform: rotate(-45deg); */
  }
}
@media screen and (max-width: 1301px) and (max-width: 968px) {
  .header nav.main-nav.show ul li.has-child.active::before {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 1301px) and (max-width: 968px) {
  .header nav.main-nav.show ul li.has-child.active::before {
    transform: rotate(0deg);
  }
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #fff;
  z-index: 10;
  left: 0;
  padding: 0 1.5rem 0 0.5rem;
}
@media screen and (max-width: 767px) {
  .header>.header__main {
    width: 100%;
    margin-top: 1.5rem;
  }
}
@media screen and (min-width: 1300px) {
  .header {
    padding: 0;
  }
}
.header__main {
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
@media screen and (min-width: 1300px) {
  .header__main {
    height: 7.1rem;
  }
}
.header__logo {
  max-width: 20.8rem;
  margin: 0;
  margin-right: auto;
}
@media screen and (min-width: 1300px) {
  .header__logo {
    margin-left: 2rem;
    max-width: 52rem;
  }
}
.header__logo .logo {
  display: flex;
}
.header__logo img {
  width: 100%;
}
.header .close-nav {
  width: 3.1rem;
  height: 2.2rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
}
.header .close-nav:after, .header .close-nav:before {
  content: '';
  position: absolute;
  right: 0;
  width: 100%;
  height: 0.4rem;
  background-color: #152A8B;
  transition: .3s ease-in-out;
}
.header .close-nav:after {
  bottom: 0;
}
@media screen and (min-width: 1300px) {
  .header .close-nav {
    display: none !important;
  }
}
.header .close-nav.show::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.header .close-nav.show::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.header .close-nav.show .line {
  display: none;
}
.header .close-nav .line {
  content: '';
  position: absolute;
  right: 0;
  width: 100%;
  height: 0.4rem;
  background-color: #152A8B;
  top: 50%;
  transform: translateY(-50%);
}
.header .main-nav {
  display: block;
  max-width: calc(100% - 20rem);
  width: 100%;
  transition: all 0.3s ease-in;
}
.header .main-nav.show {
  left: 0;
  opacity: 1;
  z-index: 9;
}
@media screen and (max-width: 1301px) {
  .header .main-nav {
    position: absolute;
    left: -100%;
    top: 100%;
    background: transparent;
    height: calc(100vh - 4.2rem);
    max-width: 100%;
    opacity: 0;
    z-index: -1;
    overflow: auto;
  }
}


.header .main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #2C3F97;
}
.header .main-nav>ul {padding-right: 12em;}
@media screen and (min-width: 1300px) {
  .header .main-nav ul {
    background-color: #fff;
  }
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul {
    position: unset;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}
.header .main-nav ul li {
  width: auto;
  border-bottom: 0;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li {
    margin-right: 4rem;
    border-bottom: none;
  }
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.active:after {
    border-top: 4px solid #152a8b;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
.header .main-nav ul li.has-child:before {
  content: '';
  position: absolute;
  left: unset;
  right: 2.4rem;
  top: 2.2rem;
  width: 1.4rem;
  height: 1px;
  border: 1px solid #B9BFDC;
  transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.has-child:before {
    display: none;
  }
}
@media screen and (max-width: 1301px) {
  .header .main-nav ul li.has-child:after {
    content: '';
    position: absolute;
    left: unset;
    right: 3rem;
    top: 1.5rem;
    width: 1px;
    height: 1.5rem;
    border: 1px solid #B9BFDC;
    transition: all 0.3s ease-in-out;
  }
}
.header .main-nav ul li.has-child.show:after {
  transform: rotate(-90deg);
  opacity: 0;
}
.header .main-nav ul li.has-child.show:before {
  transform: rotate(0);
}
.header .main-nav ul li.has-child ul {
  flex-flow: column;
  background-color: #2C3F97;
  top: 100%;
  transition: all .3s;
  min-width: 24.4rem;
}
@media screen and (max-width: 968px) {
  .header .main-nav ul li.has-child ul {
    background-color: #152A8B;
  }
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.has-child ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.header .main-nav ul li.has-child ul li {
  margin-right: 0;
  width: 100%;
  border-bottom: none;
}
.header .main-nav ul li.has-child ul li:before {
  top: 23px;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.has-child ul li:before {
    left: 140px;
    top: 39%;
    transform: rotate(135deg) translateY(-50%);
  }
}
.header .main-nav ul li.has-child ul li a {
  color: #fff;
  padding: 1.5rem 0;
  border-bottom: none;
}
.header .main-nav ul li.bg-grey {
  background-color: #E5E5E5;
  margin-right: 0;
  width: 100%;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.bg-grey {
    max-width: 8.5vw;
  }
}
.header .main-nav ul li.bg-grey a {
  border-bottom: transparent;
  color: #333;
}
.header .main-nav ul li.bg-red {
  background-color: #CC2C22;
  margin-right: 0;
  width: 100%;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li.bg-red {
    max-width: 8.5vw;
  }
}
.header .main-nav ul li.bg-red a {
  color: #fff;
  border-bottom: transparent;
}
.header .main-nav ul li.bg-red a span {
  color: #fff;
}
.header .main-nav ul li a {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  display: block;
  transition: .2s;
  line-height: 1.4;
  padding: 1.2rem;
  position: relative;
  text-decoration: none !important;
  border-bottom: solid thin #4455A2;
}
@media screen and (min-width: 1300px) {
  .header .main-nav ul li a {
    padding: 1.7rem 0;
    text-align: center;
    color: #333;
    font-size: 1.5rem;
    border-bottom: none;
  }
}
.header .main-nav ul li a span {
  font-size: 1.1rem;
  color: #8A94C5;
  font-weight: 400;
  display: block;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}
@media screen and (max-width: 968px) {
  .header .main-nav ul li a span {
    display: none;
  }
}
@media screen and (min-width: 969px) {
  .header .main-nav ul li.bg-grey a span {
    color: #808080;
  }
}
/* ヘッダー終わり */

/*フッター */
.footer {
	background-color: #f7f7f7;
    padding-bottom: 25px;
    overflow: hidden;
	display: block;
	height: auto;
	position: relative;
}
.footer .row {
  padding: 4.5rem 0;
  align-items: center;
  justify-content: space-between;
}
.container {
	width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer .col-1 {
  width: 100%;
}
@media screen and (min-width: 969px) {
  .footer .col-1 {
    max-width: 410px;
  }
}
@media screen and (min-width: 1250px) {
  .footer .col-1 .logo {
    max-width: 34.5rem;
    display: block;
  }
}
.footer .col-1 .logo img {
  padding: 0 3rem;
}
@media screen and (min-width: 969px) {
  .footer .col-1 .logo img {
    padding: 0;
  }
}
.footer .col-1 ul {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (min-width: 969px) {
  .footer .col-1 ul {
    padding-bottom: 0;
    padding-top: 25px;
  }
}
.footer .col-1 ul li {
  color: #333333;
  line-height: 1.4;
  font-size: 1.2rem;
  text-align: center;
}
@media screen and (min-width: 969px) {
  .footer .col-1 ul li {
    font-size: 1.4rem;
    text-align: left;
    padding-bottom: 10px;
  }
}
.footer .col-1 ul li:last-of-type {
  padding-bottom: 0;
}
.footer .col-2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media screen and (min-width: 969px) {
  .footer .col-2 {
    flex-wrap: nowrap;
    max-width: 65rem;
  }
}
.footer .col-2 ul {
  margin: 0 -1rem;
  display: none;
}
@media screen and (min-width: 969px) {
  .footer .col-2 ul {
    max-width: 650px;
    justify-content: flex-start;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.footer .col-2 ul li {
  padding: 0 0.6rem 0.8rem;
  font-size: 1.2rem;

}
@media screen and (min-width: 969px) {
  .footer .col-2 ul li {
    font-size: 1.4rem;
    padding: 0 12px 18px;
	width: 212px;
  }
}
.footer .col-2 ul li.custom {
  width: 100%;
  padding: 0;
}
@media screen and (min-width: 969px) {
  .footer .col-2 ul li.custom {
    display: none;
  }
}
.footer .col-2 ul li a {
  color: #333333;
  line-height: 1.4;
  font-weight: 500;
  font-size: 1.2rem;
}
@media screen and (min-width: 969px) {
  .footer .col-2 ul li a {
    font-size: 1.4rem;
  }
}
.footer .continer {
	width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    padding: 0 1rem;
}
.row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.footer .text__coppt {
    font-size: 1.1rem;
    font-weight: 300;
    text-align: center;
    color: #b2b2b2;
    font-family: 'Poppins', sans-serif;
}

@media screen and (min-width: 969px) {
    .row {
        flex-wrap: nowrap;
    }
}
@media screen and (min-width: 1200px) {
    .footer .container {
        padding: 0;
    }
}
body .h-sp {
    display: none;
}
@media screen and (min-width: 969px) {
    body .h-sp {
        display: block;
    }
}
@media screen and (min-width: 969px) {
    body .h-pc {
        display: none;
    }
}
.footer .line {
    display: inline-block;
    width: 1rem;
}
@media screen and (min-width: 969px) {
    .footer .line {
        display: none;
    }
}
.footer .cl-default {
    color: #333;
}
@media screen and (min-width: 1250px) {
    .footer .col-1 .logo {
        max-width: 34.5rem;
        display: block;
    }
}
/* フッター終わり */

/* input[type="text"], input[type="email"], input[type="date"], textarea {width: 480px;} */
input[type="text"], input[type="email"], input[type="date"] {width: 350px;}
textarea {width: 100%;}
#kiboubi1, #kiboubi2, #kiboubi3, select {width: 300px;}
#birth_yyyy {width: 60px;}
#birth_mm, #birth_dd {width: 40px;}
#graduation {width: 200px;}

#cmnt {
	height: 64px;height: 6.4rem;
}
#license_etc {width: 120px;}
select, input, textarea, button {
	vertical-align:2px; vertical-align:0.2rem;
	margin-right:5px;
}


#Consent {
	padding  : 5px;
	overflow : auto;
	width    : 100%;
	height   : 150px;
	border   : 1px #C6BA9D solid;
	font-size: 12px; font-size: 1.2rem;
	line-height: 125%;
}
#Consent h3,
#Consent li {
	position: relative;
	padding-left: 1em;	
}
#Consent h3::before {
  content: "■";
}
#Consent li::before {
	content: "・";
}
#Consent h3::before,
#Consent li::before {
  position: absolute;
	left: 0;
}



#Application button {
	width: 706px;
	height: 142px;
	display: block;
	border-radius: 10px;
	background-color: #E7350D;
	color:#FFF;
	font-size: 56px; font-size: 5.6rem;
	font-weight: bold;
	margin:0 auto;
}
@media screen and (max-width: 767px){
	input[type="text"], input[type="email"], input[type="date"], textarea {width: 100%;}
	select, input, textarea, button {
		vertical-align:-2px; vertical-align:-0.2rem;
	}
	#Consent {width: 100%;}
	#Application button {
		font-size: 28px; font-size: 2.8rem;
		width: 250px;
		height: 70px;
	}
}

textarea#cmnt {height: 10em;}


.Mono>ul>li+li {
	margin-top: 2em;
}


.Chapter > h2::before {
	vertical-align: -3px;
	content: "";
	background: url("/qjin/assets/images/ico_handle32x32.svg") center center no-repeat;
	background-size: cover;
	display: inline-block;
	height: 32px;
	width: 32px;
	margin-right: 0;
}

/* プログレッシブバー */
.Progressbar {
	position: relative;
	margin: 0 0 2em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.Progressbar li {
	position: relative;
	list-style-type: none;
	text-align: center;
	text-transform: uppercase;
	width: 33.333%;
	color: #eee;
	font-weight: bold;
}

.Progressbar li.active,
.Progressbar li.complete {
	color: #d60000;
}


/* マーク */
.Progressbar li:before {
	display: block;
	width: 32px;
	height: 32px;
	margin: 1px auto 0.5em auto;
	content: '';
	border: 3px #bbb solid;
	background: url('data:image/svg+xml;utf8,<svg version="1.1" id="_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><g><g><g><g><path fill="%23BBB" d="M8.644,24.087v1.057c0,0.387,0.315,0.704,0.7,0.704h1.401c0.385,0,0.701-0.317,0.701-0.706v-1.056L8.644,24.087L8.644,24.087z"/><path fill="%23BBB" d="M20.553,25.144c0,0.387,0.316,0.704,0.701,0.704h1.4c0.387,0,0.701-0.317,0.701-0.704v-1.057h-2.803V25.144z"/><path fill="%23BBB" d="M25.957,10.026h-0.135l-1.416-1.424V7.155c0-0.554-0.471-1.003-1.051-1.003H8.644c-0.581,0-1.051,0.449-1.051,1.003v1.448l-1.417,1.423H6.043c-0.194,0-0.351,0.158-0.351,0.352v2.818c0,0.194,0.156,0.352,0.351,0.352h0.701c0.193,0,0.35-0.157,0.35-0.352v-2.818c0-0.194-0.156-0.352-0.35-0.352H6.672l0.921-0.925v12.194l0,0v1.498c0,0.409,0.46,0.743,1.033,0.749c0.006,0,0.012,0,0.018,0h14.712c0.008,0,0.014,0,0.02,0c0.572-0.008,1.031-0.34,1.031-0.749v-1.498l0,0V9.1l0.922,0.926h-0.072c-0.193,0-0.352,0.158-0.352,0.352v2.818c0,0.194,0.158,0.352,0.352,0.352h0.701c0.193,0,0.35-0.157,0.35-0.352v-2.818C26.307,10.184,26.15,10.026,25.957,10.026z M10.861,7.085c0-0.104,0.304-0.187,0.679-0.187h8.919c0.375,0,0.68,0.083,0.68,0.187v1.1c0,0.103-0.305,0.187-0.68,0.187H11.54c-0.375,0-0.679-0.084-0.679-0.187V7.085z M9.104,9.673h13.793c0.578,0,1.051,0.474,1.051,1.057v4.637c0,0.583-0.473,1.056-1.053,1.056H9.103c-0.58,0-1.05-0.473-1.05-1.056V10.73C8.053,10.147,8.523,9.673,9.104,9.673z M23.795,19.731c0,0.564-0.455,1.021-1.018,1.021c-0.559,0-1.014-0.457-1.014-1.021c0-0.563,0.455-1.021,1.014-1.021C23.34,18.711,23.795,19.169,23.795,19.731z M21.598,19.731c0,0.564-0.453,1.021-1.016,1.021c-0.561,0-1.014-0.457-1.014-1.021c0-0.563,0.453-1.021,1.014-1.021C21.145,18.711,21.598,19.169,21.598,19.731z M12.432,19.731c0,0.564-0.455,1.021-1.015,1.021c-0.561,0-1.016-0.457-1.016-1.021c0-0.563,0.455-1.021,1.016-1.021C11.977,18.711,12.432,19.169,12.432,19.731z M10.236,19.731c0,0.564-0.455,1.021-1.015,1.021c-0.562,0-1.016-0.457-1.016-1.021c0-0.563,0.455-1.021,1.016-1.021C9.782,18.711,10.236,19.169,10.236,19.731z"/></g></g></g></g></svg>') center center no-repeat #fff;
	background-size: cover;
	text-align: center;
	border-radius: 50%;
}


.Progressbar li.active:before,
.Progressbar li.complete:before {
	display: block;
	width: 32px;
	height: 32px;
	margin: 1px auto 0.5em auto;
	content: '';
	border: 3px #d60000 solid;
	background: url('data:image/svg+xml;utf8,<svg version="1.1" id="_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><g><g><g><g><path fill="%23d60000" d="M8.644,24.087v1.057c0,0.387,0.315,0.704,0.7,0.704h1.401c0.385,0,0.701-0.317,0.701-0.706v-1.056L8.644,24.087L8.644,24.087z"/><path fill="%23d60000" d="M20.553,25.144c0,0.387,0.316,0.704,0.701,0.704h1.4c0.387,0,0.701-0.317,0.701-0.704v-1.057h-2.803V25.144z"/><path fill="%23d60000" d="M25.957,10.026h-0.135l-1.416-1.424V7.155c0-0.554-0.471-1.003-1.051-1.003H8.644c-0.581,0-1.051,0.449-1.051,1.003v1.448l-1.417,1.423H6.043c-0.194,0-0.351,0.158-0.351,0.352v2.818c0,0.194,0.156,0.352,0.351,0.352h0.701c0.193,0,0.35-0.157,0.35-0.352v-2.818c0-0.194-0.156-0.352-0.35-0.352H6.672l0.921-0.925v12.194l0,0v1.498c0,0.409,0.46,0.743,1.033,0.749c0.006,0,0.012,0,0.018,0h14.712c0.008,0,0.014,0,0.02,0c0.572-0.008,1.031-0.34,1.031-0.749v-1.498l0,0V9.1l0.922,0.926h-0.072c-0.193,0-0.352,0.158-0.352,0.352v2.818c0,0.194,0.158,0.352,0.352,0.352h0.701c0.193,0,0.35-0.157,0.35-0.352v-2.818C26.307,10.184,26.15,10.026,25.957,10.026z M10.861,7.085c0-0.104,0.304-0.187,0.679-0.187h8.919c0.375,0,0.68,0.083,0.68,0.187v1.1c0,0.103-0.305,0.187-0.68,0.187H11.54c-0.375,0-0.679-0.084-0.679-0.187V7.085z M9.104,9.673h13.793c0.578,0,1.051,0.474,1.051,1.057v4.637c0,0.583-0.473,1.056-1.053,1.056H9.103c-0.58,0-1.05-0.473-1.05-1.056V10.73C8.053,10.147,8.523,9.673,9.104,9.673z M23.795,19.731c0,0.564-0.455,1.021-1.018,1.021c-0.559,0-1.014-0.457-1.014-1.021c0-0.563,0.455-1.021,1.014-1.021C23.34,18.711,23.795,19.169,23.795,19.731z M21.598,19.731c0,0.564-0.453,1.021-1.016,1.021c-0.561,0-1.014-0.457-1.014-1.021c0-0.563,0.453-1.021,1.014-1.021C21.145,18.711,21.598,19.169,21.598,19.731z M12.432,19.731c0,0.564-0.455,1.021-1.015,1.021c-0.561,0-1.016-0.457-1.016-1.021c0-0.563,0.455-1.021,1.016-1.021C11.977,18.711,12.432,19.169,12.432,19.731z M10.236,19.731c0,0.564-0.455,1.021-1.015,1.021c-0.562,0-1.016-0.457-1.016-1.021c0-0.563,0.455-1.021,1.016-1.021C9.782,18.711,10.236,19.169,10.236,19.731z"/></g></g></g></g></svg>') center center no-repeat #fff;
	background-size: cover;
	text-align: center;
	border-radius: 50%;
}

/* 線 */
.Progressbar li:after {
	position: absolute;
	z-index: -1;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 3px;
	content: '';
	background-color: #bbb;
}
.Progressbar li:first-child:after {
	content: none;
}

.Progressbar li.active:after,
.Progressbar li.complete:after {
	background-color: #d60000;
}
/*----------------------------------------------------------------------------*/