.sy-contact, .sy-contact * { box-sizing: border-box; }
.sy-contact {
  width: 100%;
  max-width: 1200px;
  margin: 48px auto 32px;
  color: #075357;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.65;
}
.sy-contact a { text-decoration: none; }
.sy-contact a:focus-visible {
  outline: 3px solid #072f32;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #fff;
}
.sy-contact__desktop { position: relative; container-type: inline-size; }
.sy-contact__image { display: block; width: 100%; height: auto; margin: 0; }
.sy-contact__hotspot { position: absolute; display: block; }
.sy-contact__hotspot--line { left: 3.9%; top: 46.8%; width: 54.15%; height: 21.5%; border-radius: calc(100cqi * 22 / 1200); }
.sy-contact__hotspot--form { left: 16.2%; top: 78.4%; width: 31.8%; height: 16%; }
.sy-contact__hotspot--phone { left: 54.7%; top: 77.3%; width: 29.7%; height: 18.2%; }
@media (hover: hover) and (pointer: fine) {
  .sy-contact__desktop .sy-contact__hotspot--line:hover { box-shadow: inset 0 0 0 3px rgba(255,255,255,.85); }
  .sy-contact__desktop .sy-contact__hotspot--form:hover {
    border-radius: 5em;
    border-bottom: 5px solid #084E52;
  }
}
.sy-contact__mobile { display: none; position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.sy-contact__mobile .sy-contact__hotspot { min-height: 44px; padding: 0; border: 0; background: transparent; z-index: 1; }
.sy-contact__mobile .sy-contact__hotspot--line { left: 4.209446%; top: 47.576737%; width: 91.478439%; height: 9.612278%; border-radius: 14px; }
.sy-contact__mobile .sy-contact__hotspot--form { left: 4.414784%; top: 63.651050%; width: 91.273101%; height: 12.277868%; border-radius: 999px; }
.sy-contact__mobile .sy-contact__hotspot--phone { left: 5.646817%; top: 80.613893%; width: 88.706366%; height: 14.943457%; border-radius: 8px; }
@media (max-width: 767px) {
  .sy-contact { margin: 24px auto 16px; }
  .sy-contact__desktop { display: none; }
  .sy-contact__mobile { display: block; }
}