/* Join page scoped responsive refinements */

/* Base */
.page-join .container { box-sizing: border-box; }
/* Ensure inner outlines inside this page's content do not exceed the container */
.page-join .b08-01 .outline {
  width: 100%;
  margin: 0;          /* avoid unexpected centering width from global .outline */
  padding-left: 0;    /* content paddings are managed by this file's rules below */
  padding-right: 0;
  box-sizing: border-box;
}

/* Desktop: comfortable reading width and side paddings */
@media screen and (min-width: 1025px) {
  .page-join .b08-01 {
    box-sizing: border-box;
    max-width: 1040px; /* keeps readable line length around ~70-90 chars */
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }
  .page-join .b08-01 .join_area {
    max-width: 100%;
  }
}

/* Tablet: avoid edge-to-edge content */
@media screen and (min-width: 791px) and (max-width: 1024px) {
  .page-join .b08-01 {
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }
  .page-join .b08-01 .join_area {
    max-width: 100%;
  }
}

/* Mobile: breathing room and readability (extended to 790px for better layout) */
@media screen and (max-width: 790px) {
  .page-join .b08-01 {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-join .b08-01 .join_area {
    max-width: 100%;
  }
  /* Make form layout behave like mobile in the 769–790 range as well */
  .page-join .b08-01 .input_table { flex-direction: column; align-items: start; }
  .page-join .b08-01 .input_table .input_title { width: 100%; padding: 0 0 10px; font-weight: 500; }
  .page-join .b08-01 .input_table .input_content { width: 100%; }
  .page-join .b08-01 .input_section_title { padding-bottom: 24px; }
  .page-join .b08-01 .input_section + .input_section_title { margin-top: 80px; }
  .page-join .b08-01 .input_content .input_text { width: 100% !important; }
  .page-join .b08-01 .input_underlabel { line-height: 20px; }
  .page-join .b08-01 .agreebox { padding: 0 0 24px; }
  .page-join .b08-01 .align_center { margin-top: 56px; }
  .page-join .b08-01 .btn_point { width: 100%; margin-top: 10px; }
  .page-join .b08-01 .btn_dark { width: 100%; }
  /* show the subtitle on mobile as well */
  .page-join .page_title .in_pc { display: inline !important; }
  .page-join .page_title { word-break: keep-all; }
  .page-join .input_text,
  .page-join textarea.input_text { width: 100%; box-sizing: border-box; }
}