@charset "utf-8";

/* ========================================================================== */
/* header */
/* ========================================================================== */
/* nav-head */
.nav-head {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  cursor: default;
}

@media (min-width: 1280px) {
  .nav-head {
    height: auto;
    cursor: pointer;
  }
}

/* nav-head 装飾線 */
.nav-head::before,
.nav-head::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 0;
  width: 10px;
  height: 2px;
  margin: auto;
  background-color: #0d3955;
  transition: transform 0.3s ease;
  display: none;
}

@media (min-width: 1280px) {
  .nav-head::before {
    right: -5px;
    transform: rotate(45deg);
    display: block;
  }

  .nav-head::after {
    right: -11px;
    transform: rotate(-45deg);
    display: block;
  }
}

.nav-head.active::before {
  transform: rotate(-45deg);
}

.nav-head.active::after {
  transform: rotate(45deg);
}

/* nav-head-text */
.nav-head p {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #0d3955;
}

/* nav-content */
.nav-content {
  position: static;
  width: 100%;
  height: 0;
  top: 57px;
  left: 0;
  z-index: 3;
  background-color: white;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@media (min-width: 1280px) {
  .nav-content {
    position: absolute;
    width: 230px;
    padding: 5px 20px;
  }
}

.nav-content li a {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0d3955;
  letter-spacing: 0.025em;
  line-height: 2.0;
}

.nav-content li a:hover:active {
  background-color: rgba(0, 122, 255, 0.1);
  color: #09293c;
  border-radius: 4px;
}

@media (hover: hover) {
  .nav-content li a:hover {
    text-decoration: underline;
  }
}

.sp-nav-head-container {
  width: 80%;
  margin: 0 auto;
}

/* ========================================================================== */
/* end header */
/* ========================================================================== */

/* ========================================================================== */
/* FV */
/* ========================================================================== */

/* FV */
.main-catch_newgrad {
  top: auto;
}

@media screen and (min-width: 768px) {
  .main-catch-newgrad {
    top: 35%;
    left: 45%;
  }
}

/* ========================================================================== */
/* end FV */
/* ========================================================================== */

/* ========================================================================== */
/* anker-nav */
/* ========================================================================== */
.newgrad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  width: 95%;
}

@media (min-width: 430px) {
  .newgrad-grid {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    width: 93%;
  }
}

@media (min-width: 768px) {
  .newgrad-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    width: auto;
  }
}

@media (min-width: 1280px) {
  .newgrad-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: min-content;
  }
}

/* ========================================================================== */
/* end anker-nav */
/* ========================================================================== */

/* ========================================================================== */
/* section */
/* ========================================================================== */

/* wrapper-section */
.wrapper-section {
  max-width: 1180px;
  width: 93%;
  margin: 0 auto;
}

@media (min-width: 1280px) {
  .wrapper-section {
    width: 100%;
  }
}

/* career-section */
.career-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

/* training-section */
.training-section {
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
}

@media (min-width: 768px) {
  .training-section {
    padding-bottom: 80px;
    border: none;
  }
}

/* flex-section */
.flex-section {
  width: 95%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin: 20px auto 50px;
}

@media (min-width: 768px) {
  .flex-section {
    flex-direction: row;
    gap: 40px;
    margin-bottom: 80px;
  }
}

/* ========================================================================== */
/* end section */
/* ========================================================================== */

/* ========================================================================== */
/* career */
/* ========================================================================== */
.career-detail {
  margin-bottom: 35px;
}

@media screen and (min-width: 768px) {
  .career-detail {
    margin-bottom: 80px;
  }
}

.career-detail h4 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0d3955;
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .career-detail h4 {
    font-size: 2.5rem;
  }
}

.career-detail img {
  width: 100%;
}
/* ========================================================================== */
/* end career */
/* ========================================================================== */

/* ========================================================================== */
/* training */
/* ========================================================================== */
.training-list {
  text-align: center;
  margin-bottom: 50px;
}

.training-list img {
  max-width: 1000px;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .scroll-x-wrapper {
    position: relative;
    padding-bottom: 50px;
  }

  .training-list {
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 40px;
    margin-bottom: 0;
  }

  .training-list::-webkit-scrollbar {
    height: 6px;
  }

  .training-list::-webkit-scrollbar-thumb {
    background-color: #b6c3cc;
    border-radius: 4px;
  }

  .training-list::-webkit-scrollbar-track {
    background-color: #f9f9f9;
  }

  .training-list img {
    width: auto;
  }
}

.scroll-lead {
  position: absolute;
  bottom: 60px;
  left: 0;
}

.scroll-lead p {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0d3955;
}


.add-training-container {
  align-items: flex-start;
}

.training-text-box {
  max-width: 690px;
}

@media screen and (min-width: 768px) {
  .training-text-box {
    max-width: 540px;
  }
}

.training-head {
  width: 100%;
  margin: clamp(20px, 3vw, 50px) 0 clamp(5px, 1.5vw, 20px);
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

@media screen and (min-width: 768px) {
  .training-head {
    padding-bottom: 20px;
  }
}

.training-head h4 {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: bold;
  letter-spacing: 0.04em;
}

.training-detail {
  width: 100%;
  margin: 0 auto 40px;
}

@media screen and (min-width: 768px) {
  .training-detail {
    margin: 0 auto 80px;
  }
}

.training-detail p {
  font-size: clamp(1.4rem, 1.78vw, 1.6rem);
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #333;
  white-space: pre-wrap;
}

.training-detail p:nth-of-type(2) {
  margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
  .training-detail p:nth-of-type(2) {
    margin-bottom: 60px;
  }
}

.training-detail-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
  .training-detail-flex {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(40px, 8.3vw, 100px);
    margin-bottom: 0;
  }
}

.training-detail-flex:nth-of-type(odd) {
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .training-detail-flex:nth-of-type(odd) {
    flex-direction: row-reverse;
  }
}

.training-detail-img img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .training-detail-img img {
    width: clamp(320px, 42vw, 500px);
  }
}
/* ========================================================================== */
/* end training */
/* ========================================================================== */