@charset "UTF-8";

/* ==========================================================
   個人セラピスト募集バナー
   templates_parts/solo_banner.php 専用

   比率は img の width / height 属性で決める。
   toppage-lp.css などの img 指定に負けないよう、
   クラスを重ねて指定を強くしている。
   ========================================================== */

.solo-bnr {
  width: 60%;
  max-width: calc(120rem + 3.2rem);
  margin: 2.4rem auto 0 auto;
  box-sizing: border-box;
}

.solo-bnr .solo-bnr__link {
  display: block;
  overflow: hidden;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.solo-bnr .solo-bnr__link:hover {
  opacity: 0.85;
}

.solo-bnr .solo-bnr__pic {
    display: block;
}

.solo-bnr .solo-bnr__img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 768px) {

  .solo-bnr {
    margin: 1.6rem 0 0 0;
    padding: 0 12px;
    width: 100%;
  }
  
.solo-bnr .solo-bnr__pic {
    width: 100%;
  }
}