:root {

    /* color */
    --black: #0F1524;
    --blue: #0084CE;
    --blueDeep: #0071BC;
    --white: #fff;
    --lightBlue:#E5F3FA;
    --gray: #707070;
    --GrayDark:#808080;
    --grayLight: #BDBDBD;
    --gradation: linear-gradient(90deg, #0071BC 0%, #0097E0 100%);    
  

    /* font family */
    --ja-font: "noto-sans-cjk-jp", sans-serif;
    --en-font:"Roboto", sans-serif;


    /* border radius */
    --radius-s: 0.3125rem;
    --radius-r: 0.625rem;


    /* font size */
    --fontSize-pcS: 1.05rem;
    --fontSize-pcR: 1.125rem;
    --fontSize-tabR: 1rem;
    --fontSize-spR: 1rem;
    --fontSize-spS: 0.875rem;


    /* line height */
    --lineHeight-pcR: 1.875;
    --lineHeight-tabR: 1.75rem;


    /* margin */
    --sp-contentMargin: 4.37rem;
    --sec-margin-r: 4.38rem;
    --sec-margin-l: 6.25rem;
  }

 
  
  .mission-section {
    position: relative;
    width: 100%;
  }
  
  .mission-section::before {
    content: '';
    position: absolute;
    background: url("../img/about/about-BG-text.webp") no-repeat center center;
    background-size: contain;
    bottom: -83%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
  }
  
  .mission-title {
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.125rem; /* 142.857% */
    letter-spacing: 0.09rem;
    color: var(--blue);
    margin-bottom: 4.38rem;
    position: relative;
  }

  .mission-content {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 6.5rem;
  }
  

  
  .mission-description {
    max-width: 1100px;
    text-align: center;
    font-size: 1.225rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.5rem; /* 181.818% */
    letter-spacing: 0.09rem;
    margin: 0 auto;
    text-align: center;
  }

  .mission-description span{
    display: block;
    margin-bottom: 1.56rem;
  }
  
  /* Important Section */
  .important-section {
    padding: 13.56rem 0 0;
    background-color: var(--bg-light);
  }
  
  
  /* Qualification Section */
  .qualification-section {
    max-width: 1400px;
    margin: 6.24rem auto 0;

  }
  
  .qualification-content {
    padding: 3.25rem 8.5rem;
    background-color: var(--white);
    border-radius: var(--radius-r);
    box-shadow: 0px 0px 17px 0px rgba(0, 132, 206, 0.21);
  }

  .qualification-title {
    text-align: center;
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.8125rem; /* 180% */
    letter-spacing: 0.03125rem;
    color: var(--blue);
    margin-bottom: 1.5rem;
    position: relative;
  }
  

  .qualification-description {
    font-size: var(--fontSize-pcR);
    font-style: normal;
    font-weight: 500;
    line-height: var(--lineHeight-pcR);
    letter-spacing: 0.09rem;
    text-align: left;
  }
  
  .service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border: 2px solid var(--primary-blue);
    border-radius: 50px;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: transparent;
  }
  
  @media (hover: hover) and (pointer: fine) {
  .service-link:hover {
    background-color: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(74, 144, 226, 0.3);
  }
}
  
  .arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
  }
  
  @media (hover: hover) and (pointer: fine) {
  .service-link:hover .arrow {
    transform: translateX(4px);
  }
}
  

  

  
  /* Mobile Responsive */
  @media (max-width: 1500px) {

    .mission-description {
      max-width: 1000px;
      font-size: 1.175rem;
    }

    .mission-content {
      margin-bottom: 2rem;
    }

    .mission-title {
      font-size: 1.65rem;
      margin-bottom: 2.75rem;
    }



  .qualification-section {
    max-width: 1000px;
    margin: 6.24rem auto 0;

  }

  .qualification-description {
    font-size: var(--fontSize-tabR);
    line-height: var(--lineHeight-pcR);
  }
  

  }
  @media (max-width: 1100px) {



  .qualification-content {
    padding: 3.1875rem 3.05rem;
    border-radius: 1.25rem;
  }


  .important-section {
    padding: 8.56rem 0 0;
    background-color: var(--bg-light);
  }

  .mission-title {
    font-size: 1.45rem;
    margin-bottom: 2rem;
  }

  .mission-section::before {
    content: '';
    position: absolute;
    background: url("../img/about/about-textBG-sp.webp") no-repeat center center;
    background-size: contain;
    bottom: -70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
  }
  

    
  }
  @media (max-width: 768px) {
    .second-container {
      padding: 0 16px;
    }
    
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
  
    
    .mission-section {
      padding:0;
    }
    

    .mission-title {
      font-size: 1.25rem;
  line-height: 2.1875rem; /* 175% */
  letter-spacing: 0.025rem;
      margin-bottom: 2.8rem;
  }
    
    .mission-section::before {
      background: url("../img/about/about-textBG-sp.webp") no-repeat center center;
      width: 100%;
      height: 43rem;
      background-size: contain;
      bottom: -100%;
      margin-top: 5rem;

    }

      
  .mission-content {
    margin-bottom: 1rem;
    padding: 0 1.75rem;
  }
    



    .mission-description {
      font-size: 1rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.75rem; 
      text-align: center;
    }
  
    /* Important Section Mobile */
    .important-section {
      padding: 7.87rem  0 0;
    }
  
  
    /* Qualification Section Mobile */

    .qualification-content {
      padding: 1.9875rem 1.55rem;
      border-radius: 1.25rem;
    }
  


    .qualification-section {
      margin-top: 5rem;
    }
  
    .qualification-title {
      font-size: 1.125rem;
      line-height: 2.1875rem; /* 194.444% */
      letter-spacing: 0.0225rem;
      margin-bottom: 1.88rem;
    }
  
    .qualification-description {
      font-size: 1rem;
      line-height: 1.75rem; 
      text-align: left;
    }
  
    .service-link {
      padding: 14px 28px;
      font-size: 14px;
    }
  



  }
  
  @media (max-width: 480px) {

  
    
    .second-container {
      padding: 0;
    }
  
  }