/* ご相談・お問い合わせ（左に手元の写真が生成りの地へ溶けていく。右に文とボタン） */
.contact { padding: 124px 0; }
.contact__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 58%;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 98%);
  mask-image: linear-gradient(90deg, #000 55%, transparent 98%);
  pointer-events: none;
}
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.contact__inner { width: 90%; max-width: 1308px; margin: 0 auto; }
.contact__txtarea { width: 536px; margin-left: auto; padding-top: 80px; }
.contact__ttl { margin-bottom: 24px; font-size: 1.5rem; font-weight: 700; line-height: 1.83; letter-spacing: 0.14em; }
.contact__txt { margin-bottom: 40px; line-height: 2.13; }

@media (max-width: 1180px) {
  .contact__txtarea { width: 48%; }
  .contact__ttl { font-size: 1.3rem; letter-spacing: 0.12em; }
}
@media (max-width: 767px) {
  .contact { display: flex; flex-direction: column; padding: 40px 0 0; }
  .contact__inner { order: 1; width: 86%; padding-bottom: 40px; }
  .contact__txtarea { width: auto; padding-top: 0; }
  .contact__ttl { font-size: 1.4286rem; letter-spacing: 0.14em; }
  .contact__txt { margin-bottom: 28px; }
  .contact__photo {
    position: relative;
    top: auto;
    order: 2;
    width: 100%;
    height: 72vw;
    margin-bottom: -12vw;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}