@import url("global.css");
@import url("common_recruitment.css");
#contents {
  --radius: 8px;
  padding-bottom: 0; }

.thankscnt #contents {
  padding-bottom: 120px; }

.introduction {
  position: relative;
  margin-bottom: 140px; }
  .introduction .image {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    overflow: hidden; }
  .introduction .wrapper {
    display: flex; }
    .introduction .wrapper::after {
      content: "";
      width: 0;
      height: 720px;
      display: block; }
  .introduction .main {
    padding: 30px min(50px,4.5vw) 0 0;
    width: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative; }
    .introduction .main .catch {
      font-size: min(44px,4.5vw);
      font-weight: 700;
      margin: 0 0 60px 0;
      word-break: keep-all; }
    .introduction .main .text {
      line-height: 2;
      font-weight: 500; }
      .introduction .main .text p + p {
        margin-top: 30px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint ( 1500px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1500px) {
  .introduction .main .text p br {
    display: none; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .introduction .main {
    padding-top: 10px; }
    .introduction .main .catch {
      margin: 0 0 40px 0; }
    .introduction .main .text p + p {
      margin-top: 20px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .thankscnt #contents {
    padding-bottom: 100px; }

  .introduction {
    margin-bottom: 100px; }
    .introduction .main {
      padding: 20px 5vw 0 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #contents {
    --radius: 5px; }

  .thankscnt #contents {
    padding-bottom: 80px; }

  .introduction {
    margin-bottom: 60px; }
    .introduction .image {
      position: static;
      width: auto;
      aspect-ratio: 3 / 2;
      border-radius: var(--radius);
      margin: 0 5vw 30px; }
    .introduction .wrapper {
      display: block; }
      .introduction .wrapper::after {
        display: none; }
    .introduction .main {
      padding: 0;
      width: auto; }
      .introduction .main .catch {
        font-size: min(30px,6vw);
        margin: 0 -4vw 20px 0; }
      .introduction .main .text {
        line-height: inherit; }
        .introduction .main .text p + p {
          margin-top: 1em; } }