@charset "UTF-8";
/*================================================================== 
    cost
===================================================================*/
/*================================================================== 
    キービジュアル
===================================================================*/
#cost #heroArea.underPages {
  background-image: url(../img/cost/bg_cost.png);
}

/*================================================================== 
    container
===================================================================*/
#cost #contents.container {
  padding: 120px 0 150px;
}

@media screen and (max-width: 768px) {
  #cost #contents.container {
    padding: 40px 20px 60px;
  }
}

/*================================================================== 
    相談料・着手金０円
===================================================================*/
#cost #costZero {
  padding-bottom: 40px;
  margin-bottom: 10px;
}
#cost #costZero .tbl01 {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  #cost #costTbl #costTbl01 {
    display: none;
    /*pcのみ表示*/
  }
  #cost #costTbl #costTbl02 {
    display: block;
    margin-bottom: 20px;
  }
	#cost #costZero td {
		font-size: 12px;
	}
}

/*================================================================== 
    #costTbl 日当まで
===================================================================*/
#cost #costTbl {
  margin-bottom: 60px;
}
#cost #costTbl #costTbl01 {
  margin-bottom: 10px;
}
#cost #costTbl #costTbl02 {
  display: none;
}
#cost #costDaily {
  padding-bottom: 60px;
  margin-bottom: 40px;
  border-bottom: 1px solid #ccc;
}
#cost #costDaily .tbl01 {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  #cost #costTbl #costTbl01 {
    display: none;
    /*pcのみ表示*/
  }
  #cost #costTbl #costTbl02 {
    display: block;
    margin-bottom: 20px;
  }
}
/* ----------------------------------------------- 
    annotation
------------------------------------------------*/
.annotation li {
  color: #888888;
  padding-left: 2.2rem;
  position: relative;
  margin-bottom: 0.4rem;
}
.annotation li::after {
  position: absolute;
  content: "※";
  display: block;
  top: 0;
  left: 0;
}

/* ----------------------------------------------- 
    annotation2
------------------------------------------------*/
.annotation2 li {
  color: #333;
  padding-left: 2.2rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.annotation2 li::after {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border-width: 3px;
  border-color: #1678bf;
  border-style: solid;
  display: block;
  top: 4px;
  left: 0;
}

@media screen and (max-width: 768px) {
  .annotation2 li {
    margin-bottom: 1.2rem;
  }
}
/*  #cost
---------------------------------------------*/
#cost .annotation2 {
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  #cost .annotation2 {
    margin-bottom: 50px;
  }
}
/*================================================================== 
    #teiji
===================================================================*/
#cost #teiji .leftBox {
  width: 600px;
}
#cost #teiji .leftBox p {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  #cost #teiji .leftBox {
    float: none !important;
    width: 100%;
    margin-bottom: 40px;
  }
  #cost #teiji .leftBox p {
    margin-bottom: 20px;
  }
  #cost #teiji .rightBox {
    float: none !important;
    text-align: center;
  }
  #cost #teiji .rightBox img {
    width: 260px;
  }
}