@charset "utf-8";



[class$="-box"] {

  margin: 100px auto 0;

}



/* kobetsu */

.sell-info-ttl {

  font-size: 40px;

  color: #015e9e;

  font-weight: 600;

  text-align: center;

  border-bottom: 1px solid #ccc;

  padding-bottom: 20px;

  position: relative;

}



.sell-info-ttl::before {

  content: "";

  display: block;

  width: 46px;

  height: 40px;

  background-image: url(../img/icon_house.svg);

  background-repeat: no-repeat;

  background-size: cover;

  position: absolute;

  top: -58px;

  left: 50%;

  transform: translateX(-50%);

}



.ancher-link {

  flex-wrap: wrap;

  justify-content: space-between;

  margin-top: 40px;

}



.ancher-link li {

  width: 23%;

}



.ancher-link li a {

  display: block;

  font-size: 18px;

  color: #015e9e;

  text-align: center;

  border: 1px solid #015e9e;

  border-radius: 20px;

  padding: 15px 0;

  position: relative;

  transition: all .5s;

}



.ancher-link li a::after {

  content: "";

  position: absolute;

  top: 50%;

  right: 10px;

  transform: translateY(-50%);

  border: 5px solid transparent;

  border-left: 8px solid #015e9e;

}



.ancher-link li.here a {

  color: #fff;

  background: #015e9e;

}



.ancher-link li.here a::after {

  border-left: 8px solid #fff;

}



.ancher-link li a:hover {

  color: #fff;

  background: #015e9e;

  opacity: 1;

}



.ancher-link li a:hover::after {

  border-left: 8px solid #fff;

}



.ancher-link li.here a:hover {

  opacity: 0.7;

}



.area-content {

  margin: 60px auto 0;

}



.sub-ttl {

  font-size: 30px;

  font-weight: 600;

  margin-bottom: 10px;

}



.area-flex {

  flex-wrap: wrap;

  justify-content: flex-start;

  background: #fff;

  padding: 40px 40px;

}



.area-flex li {

  width: 31%;

  margin-right: 3%;

}



.area-flex li:nth-of-type(3n) {

  margin-right: 0;

}



.area-flex.pb li {

  padding-bottom: 60px;

}



.area-flex li figure img {

  object-fit: cover;

}



.area-ttl {

  font-size: 18px;

  font-weight: 600;

  color: #0A51A1;

  margin-top: 20px;

}



.detail {

  font-size: 14px;

  line-height: 1.5;

  margin-top: 10px;

}



.detail-btn {

  display: block;

  font-size: 14px;

  color: #fff;

  border-radius: 20px;

  text-align: center;

  padding: 10px 0;

  margin-top: 20px;

}



.detail-btn.c-sell {

  background: #6ea8a4;

}



.detail-btn.c-kodate {

  background: #5589af;

}



.detail-btn.c-manshon {

  background: #5e6a8b;

}



.detail-btn.c-business {

  background: #6b74a6;

}



.flow-box .sell-flow {

  width: 90%;

  max-width: 600px;

  margin: 0 auto 60px;

}



.flow-list {

  margin: 0 auto 100px;

}



.flow-list li {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid #0d67ad;

  border-radius: 10px;

  padding: 30px 30px;

  position: relative;

}



.flow-list li::after {

  content: "";

  position: absolute;

  bottom: -30px;

  left: 50%;

  transform: translateX(-50%);

  border: 16px solid transparent;

  border-top: 14px solid #0d67ad;

  /* 好みで色を変えてください */

}



.flow-list li:last-of-type::after {

  content: none;

}



.flow-list li .num {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  font-weight: 600;

  width: 50px;

  height: 50px;

  color: #fff;

  border-radius: 50%;

  background: #015e9e;

  position: absolute;

  top: -20px;

  left: -25px;

}



.flow-list li:nth-of-type(n+2) {

  margin-top: 80px;

}



.flow-list li .text {

  width: 100%;

}



.flow-ttl {

  display: inline-block;

  font-size: 22px;

  font-weight: 600;

  text-indent: -0.9em;

  padding-left: 1em;

  margin-bottom: 10px;

}





.flow-ttl mark {

  background: linear-gradient(transparent 60%, yellow 0%);

}



.flow-txt {

  font-size: 16px;

  line-height: 1.6;

}



/* アンカーリンク調整 */

#ancher-sell-area,

#ancher-kodate-area,

#ancher-manshon-area,

#ancher-business-area {

  padding-top: 40px;

  margin-top: -40px;

}



@media only screen and (max-width: 900px) {



  .flow-list li {

    padding: 15px 15px;

    position: relative;

  }



  .flow-list li:nth-of-type(n+2) {

    margin-top: 40px;

  }



  .flow-list li .text {

    width: 100%;

  }



  .flow-list li figure {

    width: 23%;

    max-width: 86px;

    position: absolute;

    top: 10px;

    left: 20px;

  }



  .flow-ttl {

    font-size: 18px;

    margin: 0 0 0 0;

  }



  .flow-list li .num {

    font-size: 14px;

    width: 30px;

    height: 30px;

    top: -11px;

    left: -13px;

  }



  .flow-txt {

    font-size: 14px;

    line-height: 1.5;

    margin-top: 10px;

  }



  [class$="-box"] {

    margin: 60px auto 0;

  }



  .sell-info-ttl {

    font-size: 22px;

  }



  .ancher-link {

    margin-top: 20px;

  }



  .ancher-link li {

    width: 48%;

  }



  .ancher-link li:nth-of-type(n+3) {

    margin-top: 4%;

  }



  .ancher-link li a {

    font-size: 14px;

    padding: 12px 0;

  }



  .ancher-link li a::after {

    right: 2px;

  }



  .sub-ttl {

    font-size: 22px;

  }



  .area-flex {

    padding: 20px 20px;

  }



  .area-flex li {

    width: 100%;

    padding-bottom: 0;

  }



  .area-flex li:nth-of-type(n+2) {

    margin-top: 60px;

  }



  .area-ttl {

    font-size: 16px;

  }



  .detail-btn {

    margin-top: 10px;

  }







}