/* ===== SALON（参考：点線の枠の上辺に見出しを重ね、2列に「写真｜名前・住所・行き方」） ===== */
.salon { margin-bottom: 80px; padding: 0 20px; }
.salon__card { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: 40px 20px 30px; border: 1px dotted #c9a9bf; }
.salon__ttl { position: absolute; top: -10px; left: 50%; width: 125px; margin: 0; background: #fff; transform: translateX(-50%); }
.salon__lead { margin-bottom: 20px; text-align: center; }
.salon__col { margin-bottom: 40px; }
.salon__col:last-child { margin-bottom: 0; }
.salon__img { margin: 12px 0 5px; }
.salon__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.salon__h { margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); font-family: var(--f-serif); font-size: 1.6rem; line-height: 4rem; font-weight: 500; color: var(--accent); letter-spacing: .1rem; }
.salon__text { margin-bottom: 12px; font-size: 1.2rem; line-height: 2.2rem; }
.salon__access { position: relative; padding-left: 22px; font-size: 1.2rem; line-height: 2.2rem; }
.salon__icon { position: absolute; left: 0; top: 3px; width: 17px; height: 17px; fill: var(--accent); }
.salon__note { margin-top: 12px; font-size: 1.2rem; line-height: 2.2rem; }

@media (min-width: 768px) {
  .salon { margin-bottom: 100px; }
  .salon__card { padding: 55px 60px; }
  .salon__lead { margin-bottom: 45px; }
  .salon__row { display: flex; margin: 0 -20px; }
  .salon__col { display: flex; justify-content: space-between; width: 50%; margin-bottom: 0; padding: 0 20px; }
  .salon__img { width: 47%; }
  .salon__img img { aspect-ratio: 192 / 128; }
  .salon__body { width: 47%; }
  .salon__note { font-size: 1rem; line-height: 1.8; }
}
@media (min-width: 980px) { .salon { padding: 0; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .salon__card { padding: 55px 30px; }
  .salon__row { margin: 0 -12px; }
  .salon__col { flex-direction: column; padding: 0 12px; }
  .salon__img, .salon__body { width: 100%; }
}