@charset "UTF-8";

:root {
  --primary-white: #FFFFFF;
  --primary-gray: #F2F2F2;
  --primary-blue: #016FD7;
  --primary-orange: #FE9028;
  --primary-black: #222222;
  --section-padding: 72px 5.3%;
}

@media screen and (min-width: 768px) {
  :root {
    --section-padding: 108px 3em;
  }
}

.secTitle.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  position: relative
}

.secTitle.message::before {
  content: '';
  position: absolute;
  display: block;
  width: 1px;
  height: 33px;
  background-color: var(--primary-blue, #10375c);
  bottom: -27px;
  left: 50%;
  transform: translate(0, 0)
}

.secSubTitle.message {
  margin: 24px auto 0;
  line-height: 1.5;
  letter-spacing: 0;
  position: relative;
  max-width: 480px;
  text-align: center
}

.secImg.message {
  margin: 0 auto
}

.secWrapper.message {
  position: relative
}

.secImg {
  width: 100%;
}

.secImg img {
  width: 100%;
  height: auto;
}

@media screen and (min-width:1024px) {
  .secTitle.message::before {
    display: none
  }

  .secTitle.message {
    position: absolute;
    writing-mode: vertical-lr;
    letter-spacing: 2px;
    top: 0;
    left: 0;
    margin-top: 0;
    transform: translateX(-100%)
  }

  .secSubTitle.message {
    margin: 0;
    max-width: none;
    text-align: left
  }

  .secWrapper.message {
    display: flex;
    gap: 4%;
    justify-content: center
  }

  .secTitleWrapper.message {
    margin-top: 0;
    align-items: flex-start
  }

  .secSubTitle.message::before {
    display: none
  }

  .secImg.message {
    width: 36%;
    height: auto;
    margin: 0
  }

  .secTxtWrapper.message {
    width: 60%
  }

  .secTxt.message {
    max-width: none;
  }

  .secTxtWrapper p {
    margin-top: 8px;
  }
}

.secImg img {
  width: 100%;
  height: auto;
}

.secWrapper.companyTour {
  margin-top: 40px;
  display: block;
  padding: 0 1em;
}

.btn.companyTour {
  margin: 40px auto 0;
  width: min(100%, 480px)
}

.secImg.companyTour {
  margin: 0 auto
}

@media screen and (min-width:768px) {
  .secWrapper.companyTour {
    margin-top: 64px
  }

  .secTitleWrapper.companyTour {
    margin-top: 64px
  }

  .secImg.companyTour {
    width: 100%
  }

  .secImg.companyTour img {
    object-position: 50% 100%
  }

  .secTitle.companyTour {
    width: 100%;
    display: inline-block;
    text-align: center
  }

  .btn.companyTour {
    margin: 64px auto 0
  }

  .secTxt.companyTour {
    margin: 40px auto 0;
    text-align: center
  }
}

.name {
  font-size: 2.2rem;
  /* font-weight: 700; */
}

@media screen and (min-width:1024px) {
  .company-message .secImg {
    width: 45%;
  }

  .company-message .secTxtWrapper {
    width: 55%;
  }
}


@media screen and (min-width:1224px) {
  .company-message .inner {
    padding: 10em 8em;
  }

  .company-information .inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    padding: 10em 0em 10em 8em;
  }

  .tableTitle {
    width: 20%;
  }
}