@charset "UTF-8";



/**********************************************/

/**********MESSAGE*****************************/

/**********************************************/

#message_section .block {

  display: flex;

  gap: 60px;

  align-items: flex-start;

}



#message_section .left {

  flex: 0 0 280px;

}



#message_section .left img {

  width: 100%;

  height: auto;

  display: block;

}



#message_section .right {

  flex: 1;

}



#message_section .right .top {

  display: flex;

  flex-direction: column;

  gap: 30px;

}



#message_section .desc {

  line-height: 1.6;

  color: var(--Black);

  margin: 0;

  text-align: justify;

  font-weight: 400;

}



#message_section .name {

  font-weight: 500;

  color: var(--Black);

  text-align: right;

  margin: 0;

}



#message_section .name span {

  font-size: 0.8rem;

  margin-right: 10px;

}





/**********************************************/

/***********MOVIE******************************/

/**********************************************/

#message_section .movie {

  max-width: 800px;

  margin: 40px auto 0;

  position: relative;

}



#message_section .movie::before {

  content: "";

  display: block;

  padding-top: 56.25%;

}



#message_section .movie iframe {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}







/**********************************************/

/**********VISION*****************************/

/**********************************************/

#vision_section {

  padding-top: 20px;

}



#vision_section .block {

  display: flex;

  flex-direction: column;

  gap: 50px;

}



#vision_section .read {

  line-height: 1.9;

  color: var(--Black);

  text-align: center;

  margin: 0;

}

#vision_section .read span {

  font-size: 1.2rem;

}

#vision_section .list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 50px;

}



#vision_section .item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



#vision_section .item img {

  width: 200px;

  height: 200px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 25px;

  background-color: #d0d0d0;

}



#vision_section .item .midashi {

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--Black);

  margin: 0 0 24px;

  position: relative;

}



#vision_section .item .text {

  line-height: 1.6;

  color: var(--Black);

  margin: 0;

  font-size: 0.9rem;

  font-weight: 400;

}



.bk {

  width: 100%;

  height: 260px;

  background-image: url(../img/kv02.jpg); 

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  opacity: 0.5;

}



/**********************************************/

/**********COMPANY*****************************/

/**********************************************/

.company_info {

  margin: 0 auto 80px;

  max-width: 700px;

}



.info_table {

  width: 100%;

  border-collapse: collapse;

}



.info_table tr:first-child {

  border-top: 1px solid #e0e0e0;

}



.info_table tr {

  border-bottom: 1px solid #e0e0e0;

}



.info_table th {

  width: 150px;

  padding: 25px 20px;

  font-weight: 500;

  color: var(--Black);

  text-align: left;

  vertical-align: top;

  background-color: #f9f9f9;

}



.info_table td {

  padding: 25px 30px;

  line-height: 1.8;

  color: var(--Black);

}



.info_table ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.info_table ul li {

  position: relative;

  padding-left: 15px;

  margin-bottom: 8px;

}



.info_table ul li:last-child {

  margin-bottom: 0;

}



.info_table ul li::before {

  content: '■';

  position: absolute;

  left: 0;

  top: 7px;

  font-size: 0.5rem;

  color: var(--Black);

}



.office_info {

  margin-bottom: 60px;

}



.office_info:last-child {

  margin-bottom: 0;

}



.office {

  display: flex;

  gap: 30px;

  margin-bottom: 20px;

}



.office .left {

  flex: 4.5;

}



.office .left img {

  width: 100%;

  height: 250px;

  object-fit: cover;

  display: block;

  margin-bottom: 15px;

}



.office .right {

  flex: 5.5;

}



.office .right iframe {

  width: 100%;

  height: 350px;

  display: block;

}



.office_detail {

  padding: 0 10px;

  font-weight: 400;

}



.office_detail h3 {

  font-size: 1rem;

  font-weight: 600;

  color: var(--Black);

  margin: 0 0 10px 0;

}



.office_detail p {

  color: var(--Black);

  margin: 5px 0;

  line-height: 1.6;

}



/**********************************************/

/**********AF COMPANY**************************/

/**********************************************/

#af_company_section {

  padding-top: 20px;

}



/**********************************************/

/**********HISTORY*****************************/

/**********************************************/

#history_section {

  padding-top: 20px;

}



#history_section .company_info {

  margin-bottom: 0;

}



/**********************************************/

/**********JOIN********************************/

/**********************************************/

#join_section {

  padding-top: 20px;

}





#join_section ul {

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  list-style: none;

  padding: 0;

  margin: 0;

  justify-content: center;

}



#join_section ul li {

  flex: 0 0 calc(33.333% - 10px);

  max-width: calc(33.333% - 10px);

}



#join_section ul li a {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 15px 20px;

  border: 1px solid var(--Lightgray);

  background: var(--White);

  text-align: center;

  text-decoration: none;

  transition: all 0.3s ease;

  text-overflow: ellipsis;

  height: -webkit-fill-available;

}



#join_section ul li a:hover {

  background: var(--Lightgray);

  border-color: var(--Darkgray);

}





@media screen and (max-width: 768px) {

  #message_section .block {

    flex-direction: column;

    gap: 24px;

  }

  #message_section .left img {

    width: 75%;

    margin: 0 auto;

  }

  #message_section .movie {

    max-width: none;

    width: 100%;

    margin-top: 24px;

  }



  #vision_section .block {

    gap: 32px;

  }

  #vision_section .list {

    grid-template-columns: repeat(1, 1fr);

    gap: 32px;

  }

  #vision_section .item img {

    margin-bottom: 12px;

  }

  #vision_section .item .midashi {

    margin: 0 0 12px;

  }



  .info_table th {

    padding: 12px;

    font-size: 0.9rem;

    width: 120px;

  }

  .info_table td {

    padding: 12px;

    font-size: 0.9rem;

  }

  .info_table ul li {

    margin-bottom: 4px;

  }



  .office {

    flex-direction: column;

    gap: 12px;

  }

  .office .left {

    display: flex;

  }

  .office .left img {

    width: 45%;

    height: auto;

  }

  .office_detail h3 {

    font-size: 0.9rem;

    margin-bottom: 4px;

  }

  .office_detail p {

    font-size: 0.9rem;

    line-height: 1.2;

  }

  .office .right iframe {

    height: 200px;

  }

  .company_info {

    margin-bottom: 40px;

  }



  #join_section ul li {

    flex: 0 0 calc(50% - 10px);

    max-width: calc(50% - 10px);

  }

  #join_section ul li a {

    padding: 12px 16px;

    line-height: 1.3;

    white-space: normal;

    min-height: 85px;

    height: auto;

  }
  

}