@charset "UTF-8";

/* 対応エリア — Figma: PC 1165:16827 / SP 1165:18278
   拠点データは microCMS（事故物件サイトの対応エリアと同じソース）
***************************************************************/
.w-area {
  background: var(--w-green02);
  padding: 83px 20px 100px;
}
.w-area__inner {
  width: min(1000px, 100%);
  margin: 0 auto;
}
.w-area__lead {
  font-size: 26px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 1.3px;
  color: var(--w-black);
  text-align: center;
}
/* 都道府県リスト: 900px・白・緑2px枠 */
.w-area__prefs {
  width: min(900px, 100%);
  margin: 38px auto 0;
  padding: 30px 38px;
  background: #fff;
  border: 2px solid var(--w-green);
  border-radius: 20px;
}
.w-area__prefs p {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--w-black);
  text-align: justify;
}
.w-area__ttl {
  margin-top: 76px;
  font-size: 26px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 1.3px;
  color: var(--w-black);
  text-align: center;
}
/* 拠点マップ（PCのみ・Figma SPには無い）
   microCMS の地図画像は白ベタのため、multiply で Figma のグレー下地（#ebebeb）に合わせる */
.w-area__map {
  margin-top: 74px;
  background: #ebebeb;
  border-radius: 30px;
  /* クリック領域を画像に対する%で重ねるための基準 */
  position: relative;
}
.w-area__map img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 567;
  object-fit: cover;
  border-radius: 30px;
  mix-blend-mode: multiply;
}

/* 地図上の拠点クリック領域
   位置とサイズは microCMS branches の top / left / width / height を
   インラインstyleで受け取る（コーポレートサイト /company/access/ と同じ方式）。
   当たり判定を目で確認したいときは background を一時的に色付きにする */
.w-area__mapPin {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.w-area__mapPin:hover {
  background-color: rgba(0, 0, 0, 0.13);
}
.w-area__mapPin:focus-visible {
  outline: 3px solid var(--w-green);
  outline-offset: 2px;
}
/* 行き先を読み上げ・検索に残しつつ、地図の上には出さない */
.w-area__mapPinLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 拠点カード: 左に緑15px帯・右だけ角丸20px */
.w-area__list {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.w-area__item {
  background: #fff;
  border-left: 15px solid var(--w-green);
  border-radius: 0 20px 20px 0;
  padding: 22px 40px 45px 70px;
  /* アンカー着地時に固定ヘッダーへ潜らないように */
  scroll-margin-top: calc(min(106px, 7.361vw) + 20px);
}
.w-area__item .name {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--w-green);
}
.w-area__item .address {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: #000;
}
.w-area__item .media {
  display: flex;
  gap: 27.5px;
  margin-top: 13px;
}
.w-area__item .map {
  flex: 0 1 418.75px;
  min-width: 0;
}
.w-area__item .map iframe {
  display: block;
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 20px;
}
.w-area__item .photo {
  flex: 1 1 auto;
  min-width: 0;
  /* microCMS のメンバー写真は背景透過のため下地を敷く（専門家紹介カードと同じ緑グラデーション） */
  background: linear-gradient(180deg, #e2f1e7 0%, #c8e2d1 100%);
  border-radius: 20px;
}
.w-area__item .photo img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  /* メンバー写真は4:3で枠(約1.7:1)より縦長のため、中央合わせだと頭が切れる。上端合わせで下側を切る */
  object-position: center top;
  border-radius: 20px;
}
.w-area__item .photo.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  background: #d9d9d9;
  border-radius: 20px;
}
.w-area__item .photo.is-empty span {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
}
.w-area .w-cvBtn {
  /* common.css の margin: 30px 0 を打ち消して Figma の余白（上100px）にする */
  margin: 100px 0 0;
}

@media all and (max-width: 680px) {
  /* SP — Figma 1165:18278（コンテンツ340px） */
  .w-area {
    padding: 50px 25px 100px;
  }
  .w-area__lead {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .w-area__prefs {
    width: 100%;
    margin-top: 29px;
    padding: 30px;
  }
  .w-area__prefs p {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
  }
  .w-area__ttl {
    margin-top: 50px;
    font-size: 20px;
    letter-spacing: 1px;
  }
  .w-area__list {
    margin-top: 30px;
    gap: 40px;
  }
  /* SPは上に緑8px帯・下だけ角丸（FAQのSPカードと同じ作り） */
  .w-area__item {
    border-left: none;
    border-top: 8px solid var(--w-green);
    border-radius: 0 0 20px 20px;
    padding: 32px 30px 38px;
  }
  .w-area__item .name {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 1.2px;
  }
  .w-area__item .address {
    margin-top: 20px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.75px;
  }
  /* SPは地図の下に写真の縦積み */
  .w-area__item .media {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }
  .w-area__item .map,
  .w-area__item .photo {
    flex: none;
  }
  .w-area__item .map iframe {
    height: 200px;
    border-radius: 13px;
  }
  .w-area__item .photo img,
  .w-area__item .photo.is-empty {
    height: 200px;
  }
  .w-area .w-cvBtn {
    margin: 60px 0 0;
  }
}