@charset "utf-8";

/* ---------------------------------------------------
   File: about.css
   Version: 1.0.0
   Update: 2025-05-13
   Author: https://flowlab.co.jp

   (c)2007-2025 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */

/* ====================================================
		Common
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#contents article {
  padding-top: 160px;
  position: relative;
}

/* -------------------------------
		Photo
------------------------------- */
#contents article .photo {
  width: calc(100% - 100px - 10px);
  margin-left: 10px;
}
#contents article:nth-of-type(even) .photo {
  margin-left: 100px;
}

/* -------------------------------
		Text
------------------------------- */
#contents article .flex {
  padding: 90px 20% 0 10px;
}
#contents article:nth-of-type(even) .flex {
  padding-right: 14%;
  padding-left: 8%;
}

/* Number */
#contents article .flex .number {
  width: 20%;
  padding-top: 20px;
}
#contents article .flex .number span,
#contents article .flex .number strong {
  color: #109519;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .05em;
  text-align: center;
  display: block;
}
#contents article .flex .number span {
  font-size: 1.1rem;
}
#contents article .flex .number strong {
  font-size: 7.4rem;
}

/* Text Area -------------- */
#contents article .flex div {
  width: 72%;
}

/* Title */
#contents article .flex div h2 {
  font-size: 3.8rem;
  font-weight: 400;
  letter-spacing: .05em;
  padding-bottom: 30px;
}

/* Title - Attention */
#contents article .flex div h2 strong {
  color: #109519;
  font-weight: 400;
}

/* Text */
#contents article .flex div p {
  letter-spacing: .05em;
  line-height: 2.2;
}

/* -------------------------------
		Background Text
------------------------------- */
#contents article::before {
  font-size: 10rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-align: right;
  letter-spacing: .05em;
  line-height: 1;
  position: absolute;
  top: calc(150px - 0.65em);
  right: -30px;
  display: block;
  z-index: -1;
  opacity: .05;
  overflow-x: hidden;
  white-space: nowrap;
}
#contents article:nth-of-type(even)::before {
  text-align: left;
  right: auto;
  left: -10px;
}
#contents #strengths1::before {
  content: 'CUSTOMER FIRST';
}
#contents #strengths2::before {
  content: 'ADVANCED FACILITIES';
}
#contents #strengths3::before {
  content: 'SHORT LEAD TIME';
}





/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  
  /* ====================================================
      Common
  ==================================================== */
  /* -------------------------------
      Text
  ------------------------------- */
  /* Text Area -------------- */

  /* Title */
  #contents article .flex div h2 {
    font-size: 3rem;
    padding-bottom: 30px;
  }
  
  /* -------------------------------
      Background Text
  ------------------------------- */
  #contents article::before {
    font-size: 8rem;
  }
  
  
  
  
}




/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  
  /* ====================================================
      Common
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #contents article {
    padding-top: 60px;
  }
  
  /* -------------------------------
      Photo
  ------------------------------- */
  #contents article .photo {
    width: calc(100% - 20px);
  }
  #contents article:nth-of-type(even) .photo {
    margin-left: 10px;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #contents article .flex {
    width: calc(100% - 40px);
    padding: 20px 0 0;
    display: block;
    margin: 0 auto;
  }
  #contents article:nth-of-type(even) .flex {
    padding-right: 10px;
    padding-left: 10px;
  }
  
  /* Number */
  #contents article .flex .number {
    width: 100%;
    padding-top: 0;
    padding-bottom: 10px;
  }
  #contents article .flex .number span {
    font-size: 1rem;
  }
  #contents article .flex .number strong {
    font-size: 2.4rem;
  }
  
  /* Text Area -------------- */
  #contents article .flex div {
    width: 100%;
  }
  
  /* Title */
  #contents article .flex div h2 {
    font-size: 1.6rem;
    padding-bottom: 20px;
  }
  
  /* Text */
  #contents article .flex div p {
    letter-spacing: 0;
    line-height: 2;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}