section {
  width: 100%;
  overflow: hidden;
  scroll-snap-align: start;
}

header .logo,
.link_text {
  color: #444 !important;
}

.toggle_button {
  border: solid 1px #333 !important;
  color: #333 !important;
}

.toggle_button:hover {
  border: 1px solid #4C7FD7 !important;
  background-color: #4C7FD7 !important;
  color: white !important;
}

.close {
  border: none !important;
}

section.container {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  padding: 0;
}

.top_main_img {
  display: block;
}

.main-image {
  width: 100%;
  height: 65vh;
  object-fit: cover;
}

.sp_main_img {
  display: none;
}

.main_title {
  padding: 60px 60px 0;
}

.page_title {
  font-size: clamp(20px, 8vw, 80px);
  color: #333;
  font-family: 'Meiryo', sans-serif;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
}

.page_sub_title {
  display: block;
  font-size: 14px;
  margin: 14px 14px 0;
  text-align: center;
  font-weight: 500;
  color: var(--dark-color);
  text-align: left;
}

p {
  text-align: justify;
}

/*------------------------
セクション・メッセージエリア 
--------------------------*/
.message_content {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 94px 260px;
}

.message_content h1 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02rem;
  margin-bottom: 30px;
}

.message_text {
  line-height: 2.5;
  font-size: 14px;
}

/*---------------------
  セクション・メンバー 
-----------------------*/
section.members_details:nth-of-type(even),
section.office_details:nth-of-type(even),
section.ceo_details:nth-of-type(even) {
  flex-direction: row-reverse;
}

.members_details,
.office_details,
.ceo_details {
  display: flex;
  padding: 120px 80px;
  align-items: center;
}

.members_details>img,
.office_details>img {
  width: 50%;
  aspect-ratio: 4/3;
  object-fit: cover;
  height: auto;
  display: block;
}

.ceo_details>img {
  width: 50%;
  aspect-ratio: 3/4;
  object-fit: cover;
  height: auto;
  display: block;
}

.ceo_details {
  display: flex;
  padding: 120px 100px 120px 125px;
  align-items: center;
  gap: 70px;
}

h1 .sub_text {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 30px;
  color: #4c7fd7;
}

.content h1,
.inversion_content h1,
.ceo_content h1 {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.6;
  letter-spacing: .02rem;
  margin-bottom: 30px;
}

.content,
.inversion_content,
.ceo_content {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 0 0 70px;
}

.inversion_content {
  padding: 0 70px 0 0;
}

.ceo_content {
  width: 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.img {
  max-width: 50%;
}

.ceo_img {
  max-width: 35%;
}

.contents_text {
  line-height: 2.5;
  font-size: 14px;
}

/*---------------------
  セクション・募集要項 
-----------------------*/

.offer_detail {
  padding: 0;
}

.offer_title,
.job_title {
  text-align: left;
  font-size: clamp(25px, 4vw, 30px);
  color: #333;
  font-family: 'Meiryo', sans-serif;
  font-weight: 600;
  line-height: 1;
  padding: 60px 120px 20px;
}

.offer_sub_title {
  display: block;
  font-size: 14px;
  margin: 10px 0;
  text-align: center;
  font-weight: 500;
  color: var(--dark-color);
  text-align: left;
}

.row {
  padding: 0 250px 100px;
}

#table tr {
  border-bottom: 1px solid #ddd;
}

#table th,
#table td {
  padding: 24px 0;
  border: none;
}

#table th {
  width: 30%;
  font-weight: 400;
}

/*------------------------
  セクション・応募要項
------------------------*/
#job_datail tr {
  border-bottom: 1px solid #ddd;
}

#job_datail .job_title,
#job_datail .job_text {
  padding: 24px 0;
  border: none;
  color: #fff;
}

.job_datail_title {
  color: #fff;
  font-size: clamp(20px, 2.5vw, 25px);
  padding: 24px 0 5px;
  font-family: 'Meiryo', sans-serif;
}

.job_sub_title {
  color: #fff;
}

#job_datail th {
  width: 30%;
  white-space: nowrap;
}

.offer_job {
  padding: 0;
  background: #333;
}

.job_title {
  color: #fff;
}

/*-----------------------
   お問い合わせ・会社概要
------------------------*/
section.contact {
  height: 54vh;
}

.image_container {
  display: flex;
}

.image_wrap {
  display: inline-block;
  overflow: hidden;

}

.image_overlay {
  position: relative;
  top: 0;
  left: 0;
}

.top_career_img {
  cursor: pointer;
  height: auto;
  transition: transform 0.6s;
  width: 100%;
}

.image_overlay:hover .top_career_img {
  filter: brightness(70%);
  transform: scale(1.1);
  transition: transform 0.6s ease
}


.overlay_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.contents_title,
.description {
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}

.contents_title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(20px, 5vw, 30px);
  font-family: 'Meiryo', sans-serif;
  font-weight: 600;
  z-index: 2;
}

.description {
  margin: 0;
  padding: 0;
  color: #fff;
  z-index: 2;
  font-size: 14px;
}

.arrow_icon {
  position: relative;
  top: 0;
  left: 0;
}

.overlay_icon {
  position: absolute;
  bottom: 3vh;
  right: 3vw;
  margin: 0;
  padding: 0;
  width: 50px;
  z-index: 2;
}

/*---------------
    タブレット
-----------------*/
@media only screen and (max-width: 1024px) {

  section.container {
    max-width: 100%;
  }

  .close:hover {
    color: white;
  }

  .main_title {
    padding: 60px 60px 0;
  }

  .message_content,
  .ceo_content {
    padding: 60px;
  }

  .members_details,
  .office_details,
  .ceo_details {
    display: flex;
    padding: 0;
    flex-direction: column !important;
  }

  .ceo_details {
    gap: 0;
  }

  .members_details>img,
  .office_details>img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  .ceo_details>img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
  }

  .contents_text {
    margin-bottom: 0;
  }

  .img {
    max-width: 100%;
    object-fit: cover;
    padding-top: 80px;
  }

  .content,
  .inversion_content {
    padding: 60px;
  }

  .content,
  .inversion_content,
  .ceo_content {
    width: 100%;
  }

  .ceo_img {
    max-width: 60%;
    object-fit: cover;
    padding-top: 80px;
  }

  .row {
    padding: 0 80px 80px;
  }

  .offer_title,
  .job_title {
    padding: 60px 60px 30px;
  }

}

/*-----------------
      スマホ
-------------------*/
@media only screen and (max-width: 500px) {
  section.container {
    position: relative;
  }

  header .logo {
    font-size: 24px;
    color: #fff !important;
  }

  .logo.active {
    color: #333 !important;
  }

  .header-logo {
    display: none !important;
  }

  .sp-header-logo {
    display: block !important;
  }

  .toggle_button {
    border: 1px solid #fff !important;
    color: #fff !important;
  }

  .toggle_button:hover {
    border: 1px solid #4C7FD7;
    background-color: #4C7FD7;
    color: white;
  }

  .close {
    border: 1px solid #464646 !important;
    color: #464646 !important;
  }

  .close:hover {
    border: 1px solid #4C7FD7 !important;
    background-color: #4C7FD7 !important;
    color: white !important;
  }

  section.container {
    display: unset;
    max-width: 100%;
    height: 100vh;
  }

  .top_main_img {
    display: none;
  }

  .sp_main_img {
    display: block;
    max-width: 100%;
    width: 100%;
  }

  .sp_main_img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    max-width: 100%;
    object-position: right;
  }

  .career {
    padding: 0;
  }

  .main_title {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    width: 100%;
    padding: 0;
  }

  .page_title {
    text-align: center;
    font-size: 13vw;
    color: #fff;
    font-family: 'Meiryo', sans-serif;
    font-weight: 600;
    line-height: 1;
    padding: 0;

  }

  .page_sub_title {
    display: block;
    font-size: 14px;
    margin: 4px;
    text-align: center;
    font-weight: 500;
    text-align: center;
    color: #fff;

  }

  .container .pankuzu {
    margin: 0;
    padding: 0;
  }

  #table th,
  #table td {
    width: 100%;
    display: block;
  }

  #table th {
    width: 100%;
  }

  #table td {
    padding-top: 0;
  }

  .message_content {
    padding: 40px;
  }

  .message_content h1 {
    font-size: 20px;
  }

  .message_text,
  .contents_text {
    font-size: 14px;
  }

  .members_details,
  .office_details,
  .ceo_details {
    flex-direction: column !important;
    padding: 0;
  }

  .members_details>img,
  .office_details>img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
  }

  .ceo_details>img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
  }

  .img {
    max-width: 100%;
    object-fit: cover;
    padding-top: 40px;
  }

  .content,
  .ceo_content,
  .inversion_content {
    padding: 40px;
    width: 100%;
  }

  .ceo_img {
    max-width: 80%;
    object-fit: cover;
    padding-top: 40px;
  }

  /*-----------------
        募集要項
  -------------------*/
  .offer_sub_title {
    margin: 10px 0;
  }

  .offer_title,
  .job_title {
    padding: 60px 30px 15px;
  }

  #job_datail th {
    font-size: 16px;
  }

  .row {
    padding: 0 40px 40px;
  }

  .job_text {
    font-size: 14px;
  }

  /*-------------------
      採用・会社概要 
  -------------------*/
  .contact {
    display: block;
  }

  .image_container {
    display: flex;
    flex-flow: column;
  }

  .contents_title {
    font-size: 25px;
  }

  .description {
    font-size: 14px;
  }

  .overlay_icon {
    position: absolute;
    bottom: 3vh;
    right: 3vw;
    margin: 0;
    padding: 0;
    width: 40px;
    z-index: 2;
  }

  .bottom_line {
    padding: 0 40px 0;
  }

  .address,
  .email,
  .phone {
    text-align: right;
  }
}