@charset "UTF-8";
/* ----------------------------------------------
リストページ共通
----------------------------------------------*/
:root {
  --Beige: #F6F6D8;
  --LightBlue: #ADDCDF;
  --Yellow: #F3BE57;
}
li {
  list-style: none;
}
.memberArea > h2 {
  padding-top: 60px;
  margin-bottom: 35px;
}
@media print, screen and (min-width: 768px) {
  .memberArea > h2 {
    padding-top: 100px;
    margin-bottom: 70px;
  }
}
/* ----------------------------------------------
ヘッダー・ページメインタイトル
----------------------------------------------*/
.mainTitle {
  position: relative;
  width: 100%;
  height: 160px;
  background: url(../img/list-top-sp.webp) no-repeat center center;
  background-size: cover;
}
.mainTitle::after {
  content: "";
  position: absolute;
  background: linear-gradient(270deg, rgba(21, 62, 10, 0.50) 0%, rgba(21, 62, 10, 0.00) 100%);
  width: 240px;
  height: 160px;
  top: 0;
  right: 0;
  z-index: 1;
}
.mainTitle h1 {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  color: #FFF;
  top: 20px;
  right: 15px;
  z-index: 2;
}
.mainTitle h1 .titleEn {
  font-size: 1.6rem;
  font-weight: 400;
}
.mainTitle h1 .titleJa {
  font-size: 3.2rem;
  font-weight: 500;
}
@media print, screen and (min-width: 768px) {
  header {
    background: rgba(255, 255, 255, 0.80);
  }
  .mainTitle {
    height: 450px;
    background: url(../img/list-top-pc.webp) no-repeat left center;
    background-size: cover;
    margin-top: -120px;
  }
  .mainTitle::after {
    width: 730px;
    height: 450px;
  }
  .mainTitle h1 {
    gap: 30px;
    top: 177px;
    right: 50px;
  }
  .mainTitle h1 .titleEn {
    font-size: 2.4rem;
  }
  .mainTitle h1 .titleJa {
    font-size: 6.0rem;
  }
}

/* ----------------------------------------------
ページ内リンク
----------------------------------------------*/
nav.pageNav {
  width: 100%;
  height: auto;
  background-color: var(--Blue);
}
nav .pageNavUl {
  display: flex;
  justify-content: space-between;
}
nav .pageNavUl li {
  position: relative;
  flex: 1;
  width: calc(100% / 4);
  padding: 8px 10px;
}
nav .pageNavUl a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 143%;
}
.pageNavUl span {
  display: inline-block;
}
.pageNavUl li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  background: #FFF;
  transform: translateY(-50%);
}
@media print, screen and (min-width: 768px) {
  nav .pageNavUl {
    max-width: 980px;
    margin: 0 auto;
  }
  nav .pageNavUl li {
    height: 70px;
  }
  nav .pageNavUl a {
    font-size: 1.6rem;
  }
  .pageNavUl li:not(:last-child)::after {
    height: 28px;
  }
  nav .pageNavUl li:hover {
    background-color: #80B3BE;
    transition: 0.4s ease;
  }

}

/* ----------------------------------------------
市名
----------------------------------------------*/
.cityBlock h3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 50px;
  background: var(--Beige);
  padding-left: 35px;
}
.cityBlock h3 span {
  position: relative;
  display: block;
  width: 100%;
  font-size: 1.9rem;
  color: var(--textBase);
  padding-left: 12px;
}
.cityBlock h3 span::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 2px;
  background: var(--Khaki);
  top: 50%;
  left: -20px;
  border-radius: 999px;
}
@media print, screen and (min-width: 768px) {
  .cityBlock h3 {
    height: 70px;
    justify-content: center;
    padding: 0;
  }
  .cityBlock h3 span {
    max-width: 980px;
    font-size: 2.6rem;
    padding-left: 37px;
  }
  .cityBlock h3 span::before {
    height: 3px;
    width: 25px;
    left: 0;
  }
}

/* ----------------------------------------------
会員リスト一覧
----------------------------------------------*/
/* メンバータイプ */
.memberType {
  width: 80px;
  height: 28px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 200%;
  color: var(--textBase);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.blue {
  background-color: var(--LightBlue);
}
.yellow {
  background-color: var(--Yellow);
}
.green {
  background-color: var(--Green);
}

.memberArea {
  margin: 0 0 10px 0;
}
.listWrap {
  width: 100%;
  padding: 0 10px;
}
ul.memberList {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 70px;
}
.memberList a ,
.companyInfo .telLin a {
  color: var(--textBase);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-position: from-font;
}
li.memberListItem {
  width: 100%;
  padding: 30px 5px;
}
.memberListItem h4 {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 160%;
}
.memberListItem .companyInfo {
  font-size: 1.6rem;
  color: var(--textBase);
  font-weight: 400;
  line-height: 150%;
}
.memberListItem .companyInfo p:first-of-type {
  margin-bottom: 8px;
}
@media print, screen and (max-width: 767px) {
  li.memberListItem {
    border-top: 1px dashed var(--Green);
  }
  li.memberListItem:first-of-type {
    border: none;
  }
}
@media print, screen and (min-width: 768px) {
  .memberArea {
    margin: 0 0 30px 0;
  }
  .memberType {
    width: 95px;
    height: 32px;
    font-size: 1.5rem;
  }
  .listWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 30px 120px 30px;
  }
  ul.memberList {
    max-width: 980px;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, calc(100% / 3));
    padding: 0;
  }
  li.memberListItem {
    width: 100%;
    padding: 30px;
    outline: 1px dashed var(--Green);
  }
  .memberList a:hover {
    text-decoration: none;
    color: #666;
    transition: 0.3s ease;
  }
  .companyInfo .telLink a {
    text-decoration-line: none;
  }
  .memberListItem h4 {
    font-size: 1.9rem;
  }
  .memberListItem .companyInfo span{
    display: inline-block;
  }
}