@charset "UTF-8";

#mv_outer {
    padding-bottom: 60px;
}

/* 3 buttons in one row (max 1200px total) */
#link_btn01 + section,
#link_btn02 + section,
#link_btn03 + section {
  display: inline-block !important;
  vertical-align: top;
  box-sizing: border-box;
  width: min(calc(33.333% - 8px), 392px) !important; /* 3 x 392px = max 1176px + gaps */
  max-width: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* center the row when the screen is wider than 1200px */
#link_btn01 + section {
  margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
}

#link_btn01 + section .content_wrapper,
#link_btn02 + section .content_wrapper,
#link_btn03 + section .content_wrapper {
  width: 100% !important;
  max-width: none !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

#link_btn01 + section .content_wrapper > div,
#link_btn02 + section .content_wrapper > div,
#link_btn03 + section .content_wrapper > div {
  margin: 0 !important;
}

/* button fills its column */
#link_btn01 + section button,
#link_btn02 + section button,
#link_btn03 + section button {
  width: 100% !important;
  min-height: 72px !important; /* keeps heights similar when text wraps */
  padding: 15px 12px !important;
  font-size: 14px !important;
}

/* stack on mobile */
@media (max-width: 900px) {
  #link_btn01 + section,
  #link_btn02 + section,
  #link_btn03 + section {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  #link_btn01 + section button,
  #link_btn02 + section button,
  #link_btn03 + section button {
    min-height: 48px !important;
  }
}


/* link_btn07: place the button under "当事務所について" (left column) */
#link_btn07 + section {
  position: relative;
  z-index: 1;
  width: 50% !important;      /* same width as the text column (w50) */
  margin-top: -70px !important; /* pull up into the pb100 space of the section above */
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#link_btn07 + section .content_wrapper {
  max-width: none !important;
  padding-left: 60px !important; /* same left edge as the text and the 当事務所について button */
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* left-align the button and remove the default 24px margin */
#link_btn07 + section .content_wrapper > div {
  text-align: left !important;
  margin: 0 !important;
}

/* tablet and mobile: full width, normal flow */
@media (max-width: 900px) {
  #link_btn07 + section {
    width: 100% !important;
    margin-top: 0 !important;
  }
  #link_btn07 + section .content_wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #link_btn07 + section .content_wrapper > div {
    text-align: center !important;
  }
}

/* link_btn12: place the button under "事務所の特徴へ" (right column) */
#link_btn12 + section {
  position: relative;
  z-index: 1;
  width: 50% !important;
  margin-left: 50% !important;
  /* base: cancel pb100 and leave a ~45px gap (text taller than image)
     extra: only grows above ~950px, where the image becomes taller than the text */
  margin-top: calc(-55px - max(0px, (min(100vw, 1800px) - 950px) * 0.21)) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

#link_btn12 + section .content_wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 60px !important;  /* same left edge as the heading and text */
  box-sizing: border-box;
}

/* left-align the button and remove the default 24px margin */
#link_btn12 + section .content_wrapper > div {
  text-align: left !important;
  margin: 0 !important;
}

/* mobile: stacked layout, normal flow */
@media (max-width: 900px) {
  #link_btn12 + section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  #link_btn12 + section .content_wrapper {
    padding: 0 !important;
  }
  #link_btn12 + section .content_wrapper > div {
    text-align: center !important;
  }
}