@charset "UTF-8";

/* ============================================
   GALLERY BUTTON + INSTAGRAM ICON — FULL CSS
   ============================================ */
/* 1. Desktop layout: button wrapper becomes flex container */
#seo2 + div .contents_btn01.block_button_1 .content_wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* 2. Reset default margins inherited from .contents_btn01 .content_wrapper>a
      and .contents_btn01.block_button_2 .inner_item_img */
#seo2 + div .contents_btn01 .content_wrapper > a,
#seo2 + div .contents_btn01.block_button_2 .inner_item_img,
#seo2 + div .gallery_instra_icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
/* 3. Kill the little dot pseudo-element on the instagram icon link */
#instra_icon + div .contents_btn01 a:before,
#seo2 + div .gallery_instra_icon a:before {
  display: none !important;
  content: none !important;
}
/* 4. Remove gradient background + reset padding/sizing on the icon link */
#instra_icon + div .contents_btn01 a,
#seo2 + div .gallery_instra_icon a {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  min-width: unset !important;
  margin: 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* 5. Icon wrapper: sits inline next to the gallery button (desktop) */
#seo2 + div .gallery_instra_icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* 6. Icon image sizing (40x40 desktop) */
#instra_icon + div .contents_btn01 a img,
#seo2 + div .gallery_instra_icon img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
}
/* 6b. Subtle opacity hover animation on the icon image */
#instra_icon + div .contents_btn01 a img,
#seo2 + div .gallery_instra_icon img {
  transition: opacity 0.3s ease !important;
  opacity: 1;
}
#instra_icon + div .contents_btn01 a:hover img,
#seo2 + div .gallery_instra_icon a:hover img {
  opacity: 0.7 !important;
}
/* ============================================
   SP (MOBILE) RESPONSIVE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 768px) {
  #seo2 + div .contents_btn01.block_button_1 .content_wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
  }
  #seo2 + div .contents_btn01.block_button_1 .content_wrapper > a {
    flex-shrink: 1;
    min-width: 0 !important;
  }
  #seo2 + div .gallery_instra_icon {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  #seo2 + div .gallery_instra_icon img {
    width: 40px !important;
    height: 40px !important;
  }
}
/* Disable hover zoom on the instagram icon image */
#seo2 + div .gallery_instra_icon img,
#instra_icon + div .inner_item_img img {
  transform: none !important;
}
#seo2 + div .gallery_instra_icon img:hover,
#seo2 + div .gallery_instra_icon a:hover img,
#instra_icon + div .inner_item_img img:hover,
#instra_icon + div .inner_item_img a:hover img {
  transform: none !important;
}
/* Kill any before/after pseudo-element animation on the icon link */
#seo2 + div .gallery_instra_icon a:before,
#seo2 + div .gallery_instra_icon a:after,
#instra_icon + div .inner_item_img a:before,
#instra_icon + div .inner_item_img a:after {
  display: none !important;
  content: none !important;
  transform: none !important;
}
/* In case the zoom is applied to the wrapper span itself */
#seo2 + div .gallery_instra_icon:hover,
#instra_icon + div .inner_item_img:hover {
  transform: none !important;
}

/* ============================================
   MENU BUTTON + INSTAGRAM ICON (#con1) — CSS
   ============================================ */
/* 1. Desktop layout: button wrapper becomes flex container, no wrap
      (narrower column than gallery section, so must not wrap) */
#con1 + section .contents_btn01.block_button_1 .content_wrapper {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
}
/* 1b. Prevent the button from ever being flex-shrunk — applies at all sizes,
       not just the SP media query, since the squeeze happened at 768px too */
#con1 + section .contents_btn01.block_button_1 .content_wrapper > a {
  flex-shrink: 0 !important;
}
/* 2. Reset default margins inherited */
#con1 + section .contents_btn01 .content_wrapper > a,
#con1 + section .contents_btn01.block_button_2 .inner_item_img,
#con1 + section .menu_instra_icon {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
/* 3. Kill the little dot pseudo-element on the instagram icon link */
#instra_icon2 + div .contents_btn01 a:before,
#con1 + section .menu_instra_icon a:before {
  display: none !important;
  content: none !important;
}
/* 4. Remove gradient background + reset padding/sizing on the icon link
      only 20px gap on the left side (keeps icon close to button) */
#instra_icon2 + div .contents_btn01 a,
#con1 + section .menu_instra_icon a {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  min-width: unset !important;
  margin: 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* 5. Icon wrapper: sits inline next to the menu button (desktop), never wraps */
#con1 + section .menu_instra_icon {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0 !important;
}
/* 6. Icon image sizing (40x40 desktop) */
#instra_icon2 + div .contents_btn01 a img,
#con1 + section .menu_instra_icon img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
}
/* 6b. Subtle opacity hover animation on the icon image */
#instra_icon2 + div .contents_btn01 a img,
#con1 + section .menu_instra_icon img {
  transition: opacity 0.3s ease !important;
  opacity: 1;
}
#instra_icon2 + div .contents_btn01 a:hover img,
#con1 + section .menu_instra_icon a:hover img {
  opacity: 0.7 !important;
}
/* SP (mobile) responsive adjustments */
@media screen and (max-width: 768px) {
  #con1 + section .contents_btn01.block_button_1 .content_wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
  }
  #con1 + section .menu_instra_icon {
    display: inline-flex !important;
    flex-shrink: 0 !important;
  }
  #con1 + section .menu_instra_icon a {
    margin: 20px !important;
  }
  #con1 + section .menu_instra_icon img {
    width: 40px !important;
    height: 40px !important;
  }
}
/* Disable hover zoom on the instagram icon image */
#con1 + section .menu_instra_icon img,
#instra_icon2 + div .inner_item_img img {
  transform: none !important;
}
#con1 + section .menu_instra_icon img:hover,
#con1 + section .menu_instra_icon a:hover img,
#instra_icon2 + div .inner_item_img img:hover,
#instra_icon2 + div .inner_item_img a:hover img {
  transform: none !important;
}
/* Kill any before/after pseudo-element animation on the icon link */
#con1 + section .menu_instra_icon a:before,
#con1 + section .menu_instra_icon a:after,
#instra_icon2 + div .inner_item_img a:before,
#instra_icon2 + div .inner_item_img a:after {
  display: none !important;
  content: none !important;
  transform: none !important;
}
/* In case the zoom is applied to the wrapper span itself */
#con1 + section .menu_instra_icon:hover,
#instra_icon2 + div .inner_item_img:hover {
  transform: none !important;
}

@media screen and (max-width: 424px) {
  #con1 + section .contents_btn01.block_button_1 .content_wrapper > a {
    min-width: 192px !important;
  }
}

@media screen and (min-width: 901px) and (max-width: 925px) {
  #con1 + section .contents_btn01.block_button_1 .content_wrapper > a {
    min-width: 192px !important;
  }
}