/*******************************************
    campaign indicator
*******************************************/


.campaignBox{
  padding-bottom:16px;
}
.campaignBox__title{
  background: linear-gradient(90deg, #0b35f9 ,#0b35f9 20%, #04a001 80% ,#04a001);
  text-align: center;
}

.campaignBox__textArea{
  background: #f5f5f5;
  border: 1px solid #0D449E;
  padding:16px;
}

.campaignBox__text{
  padding:0 6px 14px;
  color: #231916;
  font-size: 14px; 
}

.campaignBox__text em{
  display: block;
  font-size: 10px;
  font-style: normal;
}

.campaignBox__textBold{
  font-weight: bold;
}

.campaignBox__achievement{
  background: #fff;
  border: 1px solid #000;
  border-top:0;
}
.campaignBox__achievementTitle{
  position: relative;
  border-top: 1px solid #000;
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(90deg, #000, #000 20%, transparent calc(20% + 1px), transparent 80%, #000 calc(80% + 1px), #000);
  border-image-slice: 1;
  border-right: 0;
  border-bottom:0;
  border-left:0;
  font-size: 15px; 
}
.campaignBox__achievementTitleInner{
  position: absolute;
  margin-left: 0.5em;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  width: 220px;
  text-align: center;
}
.campaignBox__achievementTitleInnerBold{
  font-weight: bold;
}

.campaignBox__achievementSubText{
  font-size: 12px;
  padding-top:16px;
  text-align: center;
}


.campaignBox__indicatorArea{
  padding:12px 14px 15px;
}

.campaignBox__indicatorBox{
  margin-bottom: 10px;
  position:relative;
}
.campaignBox__achievementText{
  position: absolute;
  top:-32px;
  right:0;
  font-size: 12px;
  border: 1px solid #E80000;
  border-radius: 100px;
  padding:2px 10px;
  color: #E80000;
  font-weight: bold;
  display: none;
}
.campaignBox__achievementText.complete{
  color: #50B44E;
  border: 1px solid #50B44E;
}

.campaignBox__achievementText::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #e80100 transparent transparent;
    translate: -50% 100%;
}

.campaignBox__achievementText::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 5px 4px 0px 4px;
    border-color: #ffffff transparent transparent;
    translate: -50% 100%;
}

.campaignBox__achievementText.complete::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #50B44E transparent transparent;
    translate: -50% 100%;
}




.campaignBox__achievementSubTitle::before{
  content:"●";

}
.campaignBox__achievementSubTitle{
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: bold;
}

.campaignBox__endText{
  margin-top: 16px;
  text-align: center;
  color: #231916;
  font-size: 17px;
  font-weight: bold;
}


.progressBarBackground{
    width:100%;
    height:16px;
    background-color:#fff;
    position:relative;
    overflow: hidden;
    border: 1px solid #bbbbbb;
    border-radius:100px;
}
.progressBarBackground .progressBar{
  position:absolute;
  height:100%;
  background-color: #4062FF;
  border-radius:100px 0 0 100px;
  width: 0%;
}


.campaignBox__entry{
  background: #fff;
  border: 1px solid #000;
  padding: 20px;
  box-sizing: border-box;
}
.campaignBox__entry img{
  max-width: 500px;
}
.campaignBox__entry__ttl{
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 12px;
}
.campaignBox__entry__txt{
  font-size: 14px;
  font-weight: bold;
}

.campaignBox .submitBtn a{
  display: block;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
}
.campaignBox .register{
margin-right:-0.5em
}