/* Container======================================================= */
.container {
    padding: 9.38rem 7vw; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.description {
    color: var(--black);
    text-align: center;
    font-size: var(--font-size-pc-p);
    font-weight: 400;
    line-height: 190%;
    margin-top: 6.25rem;
    letter-spacing: 0.0625rem;
}
@media screen and (max-width: 1024px) {
  .description {
    margin-top: 3.12rem;
  }
}
@media screen and (max-width: 768px) {
  .description {
    font-size: var(--font-size-sp-p);
    font-weight: 350;
    line-height: 160%;
    letter-spacing: 0.05rem;
  }
  
}

/* Double Color Title and Subtitle======================================================= */
/* .double-color-header {
    width: 800px;
} */
.double-color-title {
    color:var(--lightblue);
    text-align: center;
    font-family: var(--font-archivo-black);
    font-size: 3.28125rem;
    font-weight: 400;
    line-height: 160%;
    position: relative;
    z-index: 1;
}

.double-color-title::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 7.03125rem;
    font-family: var(--font-archivo-black);
    font-weight: 400;
    line-height: 160%;
    color: transparent;
    -webkit-text-stroke: 0.47px var(--primary-blue);
    z-index: -1;
    white-space: nowrap;
}

.double-color-subtitle {
    position: relative;
    color: #333;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 2.625rem; /* 82.353% */
}

.ttl-divider {
    width: 4.375rem;
    height: 0.625rem;
    background: var(--lightblue);
    margin: 20px auto 0;
}
#nav .double-color-title::before { 
  content: 'MENU'; 
  -webkit-text-stroke: 0.47px var(--primary-blue);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7.03125rem;
  font-family: var(--font-archivo-black);
  font-weight: 400;
  line-height: 160%;
  color: transparent;
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.1rem;
}
@media (max-width: 1300px) {
  .double-color-title {
    font-size: 3rem;
}
}
@media screen and (max-width: 1024px) {
  .double-color-title::before {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 5rem;
}
}
@media screen and (max-width: 768px) {
  #nav .double-color-title::before {
    font-size: 4rem;
    letter-spacing: 0.1rem;
  }

  .double-color-title {
    font-size: 1.875rem;
  }
  .double-color-subtitle {
    font-size: var(--font-size-ttl-jp-sp-p);
    line-height: 0.875rem; /* 140% */
  }
  .double-color-title::before {
    font-size: 3.59375rem;
  }
  .ttl-divider {
    width: 3.125rem;
    height: 0.4375rem;
    margin-top: 0.94rem;
  }
}



/* More Button======================================================= */
.more-btn,
.back-btn,
.entry-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 23.90831rem;
    height: 4.11669rem;
    padding: 0.5rem 1rem 1rem;
    background-color: #cceaf9;
    color: var(--primary-blue);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-ropa-sans-regular);
    font-style: italic;
    font-size: 1.645rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease;
    position: relative;
    border: none;
}
.back-btn {
    width: 18.75rem;
    height: 3.125rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.back-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 9rem;
}
.page-our-job .back-button-wrapper,
.page-recruit .back-button-wrapper {
  margin-top: 0rem;
}
.page-company .back-button-wrapper {
  margin-top: 0;
  margin-bottom: 6.25rem;
}
.page-company .back-btn {
  background-color: var(--white);
}

.more-btn::before,
.back-btn::before,
.entry-button::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid var(--primary-blue);
    pointer-events: none;
    z-index: 0;
}

@media (hover: hover) {
    .more-btn:hover,
    .back-btn:hover {
        background-color: #0097E0;
        color: #fff;
    }
}
@media screen and (max-width: 768px) {
  .more-btn::before,
  .back-btn::before,
  .entry-button::before {
      top: -5px;
      left: -5px;
      right: 5px;
      bottom: 5px;
      border: 1px solid var(--primary-blue);
      /* pointer-events: none;
      z-index: 0; */
  }
  .back-button-wrapper {
    margin-top: 3.12rem;
}
}
/* Member Image Wrapper======================================================= */
.member-image-container {
    position: relative;
    width: 25.625rem;
    height: 20.5rem;
    /* margin-top: 1.88rem; */
}
.member-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* .member-image-container::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    width: 80px;
    height: 80px;
    background-color: #0097E0;
    z-index: 2;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.member-image-container::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    width: 80px;
    height: 80px;
    background-color: #0097E0;
    z-index: 2;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
} */

/* Appear Animation======================================================= */
/* パターン1: 左から右に出現 */
.appear-from-left,
.entry-section.appear {
  opacity: 0;
  transform: translateX(-50px);
  transition: none; /* 初期状態ではtransitionを無効にする */
  will-change: opacity, transform;
}

.appear-from-left.transition-enabled,
.entry-section.appear.transition-enabled {
  transition: opacity 1s cubic-bezier(0.4,0.4,0,1), transform 1s cubic-bezier(0.4,0.4,0,1);
}

.appear-from-left.active,
.entry-section.appear.active {
  opacity: 1;
  transform: translateX(0);
}

/* パターン2: 右から左に出現 */
.appear-from-right {
  opacity: 0;
  transform: translateX(50px);
  transition: none; /* 初期状態ではtransitionを無効にする */
  will-change: opacity, transform;
}

.appear-from-right.transition-enabled {
  transition: opacity 1s cubic-bezier(0.4,0.4,0,1), transform 1s cubic-bezier(0.4,0.4,0,1);
}

.appear-from-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* パターン3: 下から上に出現 */
.appear-from-bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: none; /* 初期状態ではtransitionを無効にする */
  will-change: opacity, transform;
}

.appear-from-bottom.transition-enabled {
  transition: opacity 1s cubic-bezier(0.4,0.4,0,1), transform 1s cubic-bezier(0.4,0.4,0,1);

}

.appear-from-bottom.active {
  opacity: 1;
  transform: translateY(0);
}

/* パターン4: 移動しないプレーンな出現 */
.appear {
  opacity: 0;
  transition: none; /* 初期状態ではtransitionを無効にする */
  will-change: opacity;
}

.appear.transition-enabled {
  transition: opacity 1s cubic-bezier(0.4,0.4,0,1);
}

.appear.active {
  opacity: 1;
}

/* appear-fast: 早く出現するバージョン */
.appear-fast {
  opacity: 0;
  transition: none;
  will-change: opacity;
}

.appear-fast.transition-enabled {
  transition: opacity 0.8s ease-out;
}

.appear-fast.active {
  opacity: 1;
}


@media screen and (max-width: 1200px) {
  .container {
      padding: 7rem 7vw;
  }
}
@media (max-width: 768px) {
  .container {
      padding: 10rem 7vw;
  }
  .back-btn {
    width: 12.5rem;
    max-width: 12.625rem;

}
}