/* Mission Section */
.mission-section {
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 100%;
  }
  .mission-section .section-inner {
    padding-bottom: 5rem;
  }

  .mission-section .section-title {
    margin-bottom: 3.3rem;
  }
  
  .mission-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFF 18.22%, rgba(204, 225, 240, 0.80) 99.9%);
    opacity: 0.2;
    z-index: -1;
  }
  
  .mission-subtitle {
    margin-bottom: 2.5rem;
    color: #002C44;
text-align: center;
font-family:  "noto-sans-cjk-jp", sans-serif;
font-size: 1.4375rem;
font-style: normal;
font-weight: 700;
line-height: 1.9375rem; /* 134.783% */
letter-spacing: 0.02875rem;
  }
  
  .mission-content {
    font-size: 1.125rem;
    line-height: 2;
    margin-bottom: 4rem;
  }
  
  .mission-content p {
    margin-bottom: 2rem;
    color: #002C44;
text-align: center;
font-family:  "noto-sans-cjk-jp", sans-serif;
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.5625rem; /* 166.667% */
letter-spacing: 0.01875rem;
  }
  
  .make-standard {
    text-align: center;
  }
  
  .make-standard p {
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 2rem;
    color: #002C44;
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: 1.5625rem;
letter-spacing: 0.05625rem;
  }
  
  .logo-mark {
    width: 2.3rem;
    height: auto;
  }
  
  /* Vision Section */
  .vision-section {
    position: relative;
    color: #FFF;
    margin: 0;
    overflow: hidden;
    width: 100%;
    
 
  }
  .vision-section .section-inner {
    padding: 6rem 0;
    /* padding-left: 12.5rem; */
  }
  
  .vision-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: -2;
    background: #FFF;
  }
  
  .vision-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .vision-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #041623;
    opacity: 0.4;
    z-index: -1;
  }
  
  .vision-content {
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6875rem;
    letter-spacing: 0.0375rem;
  }
  
  .vision-subtitle {
    margin-bottom: 3rem;
  }
  
  .vision-content p {
    margin-bottom: 2rem;
    color: #FFF;
  }
  
  /* Philosophy Section */
  .philosophy-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 8rem;
    padding-bottom: 4rem;
  }
  
  .value-diagram {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
  }
  
  .diagram-image {
    width: 80%;
    height: auto;
    max-width: 100%;
  }
  
  .ethical-value {
    flex: 1;
  }
  
  .ethical-value h2 {
    /* font-size: 2.625rem; */
    font-weight: 700;
    margin-bottom: 1.5rem;
  }
  
  .ethical-value h3 {
    margin: 3rem 0 1.3rem;

    color: #002C44;
font-family: "Open Sans", sans-serif;
font-size: 1.4375rem;
font-style: normal;
font-weight: 700;
line-height: 1.9375rem; /* 134.783% */
letter-spacing: 0.02875rem;
  }
  
  .ethical-value p {
    color: #002C44;
    font-family:  "noto-sans-cjk-jp", sans-serif;
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.5625rem; /* 166.667% */
letter-spacing: 0.01875rem;
  }
  
  /* Fade In Animation */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }
  

  .blur-in {
    filter: blur(1rem);
    transition:  filter .8s ease-in;
  }
  
  .blur-in.visible {
    filter: blur(0);
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .vision-section .section-inner {
        padding-left: 3.7rem;
      }
  }
  @media (max-width: 768px) {
    section {
      padding: 4rem 1.5rem;
    }
    .mission-section .section-title {
        margin-bottom: 1.8rem;
      }
      
    .vision-section .section-inner {
        padding:6rem 1.8rem 0 1.8rem;
      }

  
    .mission-content,
    .ethical-value p {
      font-size: 1rem;
    }
  
    .philosophy-content {
      flex-direction: column-reverse;
      gap: 2rem;
      padding-bottom: 0;
      margin-top: 4rem;
    }
  
    .value-diagram {
      max-width: 100%;
      margin: 0 auto;
    }
  }
  
  @media (max-width: 768px) {
  .ethical-value h3 {
    margin: .3rem 0 2.5rem;
  }
}
  @media (max-width: 480px) {
    section {
      padding: 3rem 1rem;
    }
  
    .section-title {
      font-size: 1.75rem;
    }
  
    .mission-subtitle {
      font-size: 1.25rem;
    }
  
    br {
      display: none;
    }
  }



  /* layerd animation  */

  section {
    position: relative;
    z-index: 1;
    background: #FFF;
  }
  
  .js-section-first {
    height: 100svh; /* 1番目のセクションの高さ */
  }
  
  .js-section-second {
    min-height: calc(100vh); /* padding分を追加 */
    padding: 6rem 0; /* 上下に6remの余白 */
    padding-left: 12.5rem; /* 左側に12.5remの余白 */
    box-sizing: border-box; /* paddingを高さ計算に含める */
  }


  .vision-section .section-inner {
    position: absolute;
    top: 0;
    left: 20%;
    width: 100%;
    height: 100%; /* デフォルトの高さ */
    z-index: 2;
  }
  .section-inner {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%; /* デフォルトの高さ */
    z-index: 2;
  }
  
  .section-inner.is-active {
    position: fixed; /* 固定状態 */
    top: 0;
    width: 100%;
    z-index: 3; /* 前面に表示 */
  }
  
  @media (max-width: 1700px) {
    .js-section-second {
      min-height: calc(100vh + 10rem); /* padding分を追加 */
      padding: 6rem 0; /* 上下に6remの余白 */
      padding-left: 12.5rem; /* 左側に12.5remの余白 */
      box-sizing: border-box; /* paddingを高さ計算に含める */
    }
    
  }
  @media (max-width: 1600px) {
    .js-section-second {
      min-height: calc(100vh + 12rem); /* padding分を追加 */
      padding: 6rem 0; /* 上下に6remの余白 */
      padding-left: 12.5rem; /* 左側に12.5remの余白 */
      box-sizing: border-box; /* paddingを高さ計算に含める */
    }
    
  }

  @media (max-width: 1024px) {

    .js-section-second {
      min-height: calc(80vh); /* padding分を追加 */
      padding: 6rem 0 0; /* 上下に6remの余白 */
    }
    .vision-section .section-inner {
      left: 0%;
    }
  }
  
  @media (max-width: 768px) {
    .section-inner {
      padding:0 1.8rem;
    }
      
  .js-section-second {
    min-height: calc(100vh + 10rem ); /* padding分を追加 */
    padding: 0 0 6rem; /* 上下に6remの余白 */
  }
  }