@charset "UTF-8";

/* ===== INSTAGRAM BUTTON - SCOPED TO #instagram ===== */

#instagram + div.contents_btn01 a[target=_blank] span:after,
#instagram + div.contents_btn01 a[target=_blank] span:before {
  border: 1px solid #fff;
}

/* Remove transitions/animations on everything EXCEPT the button itself */
#instagram ~ div.contents_btn01,
#instagram ~ div.contents_btn01 *,
#instagram ~ div.contents_btn01 .content_wrapper a::before,
#instagram ~ div.contents_btn01 .content_wrapper a:hover::before,
#instagram ~ div.contents_btn01 .content_wrapper a:hover::after {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Center the wrapper */
#instagram ~ div.contents_btn01 .content_wrapper {
  display: flex !important;
  justify-content: center !important;
}

/* ── Button base (desktop-first: 902px+) ── */
#instagram ~ div.contents_btn01 .content_wrapper a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background-color: #FF0069 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  gap: 0 !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 40% !important;
  box-sizing: border-box !important;
  margin: 20px !important;
  border: 1px solid transparent !important;
  transition: background-color 0.25s ease !important;
  margin-left:26px !important;
}

/* ── Hover state ── */
#instagram ~ div.contents_btn01 .content_wrapper a:hover {
  background-color: #cc0054 !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ── Tablet / SP: max-width 900px ── */
@media screen and (max-width: 900px) {
  #instagram ~ div.contents_btn01 .content_wrapper a {
    width: 100% !important;
    max-width: none !important;
    margin: 20px auto !important;
    margin-left:2px !important;
  }
}

/* Hide site's existing ::before */
#instagram ~ div.contents_btn01 .content_wrapper a::before {
  display: none !important;
  content: none !important;
}

/* ── Instagram icon via ::after — fixed 40×40, pinned left with 20px gap ── */
#instagram ~ div.contents_btn01 .content_wrapper a::after {
  content: "" !important;
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E") !important;
  background-size: 40px 40px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  order: -1 !important;
  position: static !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 20px !important;
  transition: background-color 0.25s ease !important;
}

/* Keep icon fully visible on hover */
#instagram ~ div.contents_btn01 .content_wrapper a:hover::after {
  opacity: 1 !important;
  transform: none !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  transition: background-color 0.25s ease !important;
}

/* ── Text span ── */
#instagram ~ div.contents_btn01 .content_wrapper a span {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  order: 1 !important;
  position: static !important;
  flex: 1 !important;
  text-align: center !important;
  padding: 0 !important;
  opacity: 1 !important;
  transition: letter-spacing 0.25s ease !important;
}

/* Keep text fully visible on hover */
#instagram ~ div.contents_btn01 .content_wrapper a:hover span {
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Text size — tablet / SP */
@media screen and (max-width: 900px) {
  #instagram ~ div.contents_btn01 .content_wrapper a span {
    font-size: 4vw !important;
  }
}

/* Text size — mobile M */
@media screen and (max-width: 480px) {
  #instagram ~ div.contents_btn01 .content_wrapper a span {
    font-size: 16px!important;
    white-space: normal !important;
  }
}

/* Text size — mobile S */
@media screen and (max-width: 360px) {
  #instagram ~ div.contents_btn01 .content_wrapper a span {
    font-size: 13px !important;
  }
}

@media (min-width: 901px) and (max-width: 970px) {

#instagram ~ div.contents_btn01 .content_wrapper a span {
font-size:17px !important;
}
}

@media screen and (max-width: 380px) {
  #instagram ~ div.contents_btn01 .content_wrapper a span {
    font-size: 14px !important;
  }
}