@charset "UTF-8";
/* 全国店舗一覧（全ページ共通）
   page.css の .branch #content .branchBox は body.branch でしか効かないため、
   #branchList 配下として同じ見た目を全ページで再現する */
#branchList {
  overflow: hidden;
  padding: 0;
}
#branchList .branchBox {
  background: url("../images/content/map.webp") no-repeat 100% 85%;
  padding: 100px 0;
}
.no-webp #branchList .branchBox {
  background: url("../images/content/map.png") no-repeat 100% 85%;
}
#branchList .branchBox .areaBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0 50px;
}
#branchList .branchBox .areaBox .title {
  width: 200px;
  padding: 20px 0;
  text-align: center;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  background-color: #e8ab06;
  position: relative;
}
#branchList .branchBox .areaBox .title:after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #e8ab06;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  position: absolute;
  top: 50%;
  right: -20px;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
#branchList .branchBox .areaBox .list {
  width: 78%;
}
#branchList .branchBox .areaBox .list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 15px 0;
}
#branchList .branchBox .areaBox .list ul li {
  font-size: 18px;
  padding: 0 10px;
  border-right: 1px solid #cecece;
  line-height: 200%;
}
#branchList .branchBox .areaBox .list ul li:last-child {
  border-right: none;
}
#branchList .branchBox .areaBox .list ul li a {
  display: block;
  text-decoration: none;
  color: #000;
}
#branchList .branchBox .areaBox .list ul li a:hover {
  color: #dc6932;
}
@media screen and (max-width: 768px) {
  #branchList .branchBox {
    padding: 50px 0px;
    background-size: 90%;
    background-position: 100% 20%;
  }
  #branchList .branchBox .areaBox {
    padding: 20px 0 0;
  }
  #branchList .branchBox .areaBox .title {
    padding: 20px;
    width: 100%;
    text-align: left;
  }
  #branchList .branchBox .areaBox .title:after {
    display: none;
  }
  #branchList .branchBox .areaBox .list {
    width: 100%;
    padding: 20px 0 15px;
  }
  #branchList .branchBox .areaBox .list ul {
    padding: 0;
  }
  #branchList .branchBox .areaBox .list ul li {
    font-size: 14px;
    width: 48%;
    padding: 0;
    margin: 0 1%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: none;
    border-bottom: 1px dotted #cecece;
    position: relative;
  }
  #branchList .branchBox .areaBox .list ul li:before {
    content: "";
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: auto;
    right: 10px;
    top: 15px;
    width: 5px;
    height: 5px;
  }
  #branchList .branchBox .areaBox .list ul li a {
    padding: 10px 5px;
  }
}