/* Japanese Font */
body{
    font-family: "Yu Mincho", "游明朝", serif;
}
body#historyHistory8 #wrapper #visual {
    width: 100%;
    height: 660px !important;
    overflow: hidden;
    position: relative;
}

/* Make image behave like background */
body#historyHistory8 #wrapper #visual-bg img {
    width: 100%;
    height: 660px !important;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Two-Column Layout */
#lead {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Left Column */
#lead .innerL {
  width: 41%;
  flex-shrink: 0;           /* ← keeps left column from collapsing */
}

#lead .innerL img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(105%) brightness(95%);
}

#lead .innerL span {
  display: block;
  font-size: 16px;
  color: #1a3f6f;
  text-align: left;
  margin-top: 10px;
}

/* Right Column */
#lead .innerR {
  width: 59%;
}

#lead .innerR h2 {
  font-size: 32px;
  line-height: 1.5;
  color: #1a3f6f;
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: 400;
}

#lead .innerR p {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 2.3;
  color: #333333;
}

.philosophyBox p {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 2.0;
  color: #333333;
}

.factorySection {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
  margin-top: 90px;
}

/* Left Content */
.factoryLeft {
  width: 60%;
}

.factoryLeft h2 {
  font-size: 32px;
  line-height: 1.5;
  color: #1a3f6f;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 400;
}

.factoryLeft p {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 2.0;
  color: #333333;
}

/* Right Image */
.factoryRight {
  width: 40%;
  flex-shrink: 0;
}

.factoryRight img {
  width: 100%;
  display: block;
  filter: grayscale(100%) contrast(105%) brightness(95%);
}

.factoryRight span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #1a3f6f;
  text-align: left;
}
.reverseText {
  width: 100%;
  margin-top: 50px;
}

.reverseText p {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 2.0;
  color: #333333;
}

.technologySection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 50px !important;
}

/* Left Image */
.technologyLeft{
    width: 40%;
}

.technologyLeft img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.technologyLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    color: #1a3f6f;
    text-align: left;
    line-height: 1.8;
}

/* Right Text */
.technologyRight{
    width: 60%;
}

.technologyRight p{
  font-size: 16px;
  margin-top: 0;
  font-weight: 400;
  font-style: normal;
  line-height: 2.0;
  color: #333333;
}

.bottomText p{
    margin-top: 0 !important;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 2.0;
    color: #333333;
}


.productSection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}

/* Left Image */
.productLeft{
    width: 40%;
}

.productLeft img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.productLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Right Content */
.productRight{
    width: 60%;
}

.productRight h2{
    margin-top: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    font-style: normal;
}

.productRight p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

.productDetailText p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
   
}

.thailand{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}


/* Left Content */
.thailandLeft{
    width: 60%;
}

.thailandLeft h2{
    margin-top: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    font-style: normal;
}

.thailandLeft p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

.thailandRight{
    width: 40%;
}

.thailandRight img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.thailandRight span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

.thailandSection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}

/* Left Image */
.thailandSectionLeft{
    width: 40%;
}

.thailandSectionLeft img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.thailandSectionLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Right Content */
.thailandSectionRight{
    width: 60%;
}


.thailandSectionRight p{
    margin-top: 0;
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

.thailandSectioncontent p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
   
}

.robotSection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}

/* Left Image */
.robotSectionLeft{
    width: 40%;
}

.robotSectionLeft img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.robotSectionLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Right Content */
.robotSectionRight{
    width: 60%;
}

.robotSectionRight h2{
    margin-top: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    font-style: normal;
}

.robotSectionRight p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

.robotcontent p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
   
}

.internationalSection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}

/* Left Image */
.internationalSectionLeft{
    width: 40%;
}

.internationalSectionLeft img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.internationalSectionLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Right Content */
.internationalSectionRight{
    width: 60%;
}

.internationalSectionRight h2{
    margin-top: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    font-style: normal;
}

.internationalSectionRight p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

.internationalSectioncontent p{
    font-size: 16px;
    line-height: 2.0;
    font-weight: 400;
    font-style: normal;
    color: #333;
   
}


.ogusuHdSection{
    margin-top: 50px !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
}

/* LEFT CONTENT */
.ogusuHdLeft{
    width: 45%;
}

.ogusuHdLeft h2{
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    margin-top: 0;
    margin-bottom: 25px;
}

.ogusuHdLeft p{
    font-size: 18px;
    line-height: 2;
    color: #333;
    margin-top: 0;
}

/* RIGHT IMAGE */
.ogusuHdRight{
    width: 55%;
}

.ogusuHdRight img{
    width: 100%;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.ogusuHdRight span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Full Width Text */
.fullTextSection p{
    width: 100%;
    font-size: 16px;
    line-height: 2;
    color: #333;
    margin-bottom: 30px;
}


.anniversarySection{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 90px;
}

/* Left Image */
.anniversaryLeft{
    width: 45%;
}

.anniversaryLeft img{
    width: 100%;
    height: 280px;
    display: block;
    filter: grayscale(100%) contrast(105%) brightness(95%);
}

.anniversaryLeft span{
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
    color: #1a3f6f;
    text-align: left;
}

/* Right Content */
.anniversaryRight{
    width: 55%;
}

.anniversaryRight h2{
    margin-top: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 400;
    color: #1a3f6f;
    font-style: normal;
}

.anniversaryRight p{
    font-size: 16px;
    line-height: 2.0;
    color: #333;
    font-weight: 400;
    font-style: normal;
}


.closingMessage p{
    font-size: 16px;
    line-height: 2.0;
    color: #333;
    font-weight: 400;
    font-style: normal;
}

/* Final Message Emphasis */
.closingMessage .lastMessage{
    font-size: 16px;
    line-height: 2.0;
    color: #333;
    font-weight: 400;
    font-style: normal;
}


@media screen and (max-width: 768px) {
  body#historyHistory8 #wrapper #visual {
    width: 100%;
    height: 250px !important;
    overflow: hidden;
    position: relative;
}

/* Make image behave like background */
  body#historyHistory8 #wrapper #visual-bg img {
    width: 100%;
    height: 250px !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
  /* ALL FLEX SECTIONS */
  #lead,
  .factorySection,
  .technologySection,
  .productSection,
  .thailand,
  .thailandSection,
  .robotSection,
  .internationalSection,
  .ogusuHdSection,
  .anniversarySection{
    flex-direction: column;
    gap: 25px;
  }

  /* ALL LEFT/RIGHT BLOCKS */
  #lead .innerL,
  #lead .innerR,

  .factoryLeft,
  .factoryRight,

  .technologyLeft,
  .technologyRight,

  .productLeft,
  .productRight,

  .thailandLeft,
  .thailandRight,

  .thailandSectionLeft,
  .thailandSectionRight,

  .robotSectionLeft,
  .robotSectionRight,

  .internationalSectionLeft,
  .internationalSectionRight,

  .ogusuHdLeft,
  .ogusuHdRight,

  .anniversaryLeft,
  .anniversaryRight{
    width: 100%;
  }

  /* IMAGES */
  #lead img,
  .factoryRight img,
  .technologyLeft img,
  .productLeft img,
  .thailandRight img,
  .thailandSectionLeft img,
  .robotSectionLeft img,
  .internationalSectionLeft img,
  .ogusuHdRight img,
  .anniversaryLeft img{
    width: 100%;
    border-radius: 4px;
  }

  /* ANNIVERSARY IMAGE FIX */
  .anniversaryLeft img{
    height: auto;
  }

  /* HEADINGS */
  #lead .innerR h2,
  .factoryLeft h2,
  .productRight h2,
  .thailandLeft h2,
  .robotSectionRight h2,
  .internationalSectionRight h2,
  .ogusuHdLeft h2,
  .anniversaryRight h2{
    font-size: 1.4rem;
    line-height: 1.8 !important;
    margin-bottom: 20px;
  }

  /* PARAGRAPHS */
  #lead .innerR p,
  .factoryLeft p,
  .philosophyBox p,
  .technologyRight p,
  .bottomText p,
  .productRight p,
  .productDetailText p,
  .thailandLeft p,
  .thailandSectionRight p,
  .thailandSectioncontent p,
  .robotSectionRight p,
  .robotcontent p,
  .internationalSectionRight p,
  .internationalSectioncontent p,
  .ogusuHdLeft p,
  .fullTextSection p,
  .anniversaryRight p,
  .closingMessage p{
    font-size: 18px !important;
    line-height: 2.1 !important;
  }

  /* IMAGE CAPTIONS */
  #lead .innerL span,
  .factoryRight span,
  .technologyLeft span,
  .productLeft span,
  .thailandRight span,
  .thailandSectionLeft span,
  .robotSectionLeft span,
  .internationalSectionLeft span,
  .ogusuHdRight span,
  .anniversaryLeft span{
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  .productRight,
  .robotSectionRight,
  .internationalSectionRight,
  .anniversaryRight{
        order: 1;
        width: 100%;   
    }
  .productLeft,
  .robotSectionLeft,
  .internationalSectionLeft,
  .anniversaryLeft{
        order: 2;
        width: 100%;
    }

   .productDetailText,
   .robotcontent,
   .internationalSectioncontent{
        order: 3;
        width: 100%;
    }
    .philosophyBox,
    .technologyRight,
    .bottomText,
    .productDetailText,
    .thailandSection,
    .thailandSectioncontent,
    .robotcontent,
    .internationalSectioncontent,
    .fullTextSection,
    .productRight{
        margin-bottom: 0 !important;
    }
    .factorySection,
    .bottomText,
    .productSection,
    .thailand,
    .thailandSectioncontent,
    .robotSection,
    .internationalSection,
    .ogusuHdSection,
    .anniversarySection,
    .productLeft{
        margin-top: 0 !important;
    }
}


/* =========================
   MOBILE VIEW
========================= */
@media screen and (max-width: 464px){
  body#historyHistory8 #wrapper #visual {
    width: 100%;
    height: 200px !important;
    overflow: hidden;
    position: relative;
}

/* Make image behave like background */
body#historyHistory8 #wrapper #visual-bg img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
  
  /* SECTION SPACING */
  #lead,
  .factorySection,
  .technologySection,
  .productSection,
  .thailand,
  .thailandSection,
  .robotSection,
  .internationalSection,
  .ogusuHdSection,
  .anniversarySection{
    flex-direction: column;
    gap: 20px;
  }

  /* HEADINGS */
  #lead .innerR h2,
  .factoryLeft h2,
  .productRight h2,
  .thailandLeft h2,
  .robotSectionRight h2,
  .internationalSectionRight h2,
  .ogusuHdLeft h2,
  .anniversaryRight h2{
    font-size: 1.4rem;
    line-height: 1.8 !important;
  }

  /* PARAGRAPHS */
  #lead .innerR p,
  .factoryLeft p,
  .philosophyBox p,
  .technologyRight p,
  .bottomText p,
  .productRight p,
  .productDetailText p,
  .thailandLeft p,
  .thailandSectionRight p,
  .thailandSectioncontent p,
  .robotSectionRight p,
  .robotcontent p,
  .internationalSectionRight p,
  .internationalSectioncontent p,
  .ogusuHdLeft p,
  .fullTextSection p,
  .anniversaryRight p,
  .closingMessage p{
    font-size: 17px !important;
    line-height: 2.0 !important;
  }

  /* CAPTIONS */
  #lead .innerL span,
  .factoryRight span,
  .technologyLeft span,
  .productLeft span,
  .thailandRight span,
  .thailandSectionLeft span,
  .robotSectionLeft span,
  .internationalSectionLeft span,
  .ogusuHdRight span,
  .anniversaryLeft span{
    font-size: 0.9rem !important;
  }

  /* IMAGES */
  #lead img,
  .factoryRight img,
  .technologyLeft img,
  .productLeft img,
  .thailandRight img,
  .thailandSectionLeft img,
  .robotSectionLeft img,
  .internationalSectionLeft img,
  .ogusuHdRight img,
  .anniversaryLeft img{
    width: 100%;
    border-radius: 4px;
  }
  .productRight,
  .robotSectionRight,
  .internationalSectionRight,
  .anniversaryRight{
        order: 1;
        width: 100%;   
    }
  .productLeft,
  .robotSectionLeft,
  .internationalSectionLeft,
  .anniversaryLeft{
        order: 2;
        width: 100%;
    }

   .productDetailText,
   .robotcontent,
   .internationalSectioncontent{
        order: 3;
        width: 100%;
    }
    .philosophyBox,
    .technologyRight,
    .bottomText,
    .productDetailText,
    .thailandSection,
    .thailandSectioncontent,
    .robotcontent,
    .internationalSectioncontent,
    .fullTextSection,
    .productRight{
        margin-bottom: 0 !important;
    }
    .factorySection,
    .bottomText,
    .productSection,
    .thailand,
    .thailandSectioncontent,
    .robotSection,
    .internationalSection,
    .ogusuHdSection,
    .anniversarySection,
    .productLeft{
        margin-top: 0 !important;
    }
}