/*===============================
about
================================*/
#about {
}
@media screen and (min-width: 768px) {
}
/* ===============================
about : corporate hero
================================ */
#about-corporate .about-corporate-hero {
 position: relative;
 height: 520px;
 overflow: hidden;
}

#about-corporate .about-corporate-hero img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}

#about-corporate .hero-content {
 position: absolute;
 top: 50%;
 left: 10%;
 transform: translateY(-50%);
 max-width: 310px;
 z-index: 5;
}
@media screen and (min-width: 768px) {
 #about-corporate .hero-content {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  max-width: 620px;
  z-index: 5;
 }
}
#about-corporate .hero-title {
 font-size: 60px;
 font-weight: 700;
 text-shadow: 0px 0px 20px #878787;
 color: #ffffff;
 margin-bottom: 24px;
}

#about-corporate .hero-lead {
 font-size: 16px;
 line-height: 1.8;
 text-shadow: 0px 0px 20px #000000;
 color: #ffffff;
}
@media screen and (min-width: 768px) {
 #about-corporate .hero-lead {
  font-size: 18px;
  line-height: 1.8;
  text-shadow: 0px 0px 20px #000000;
  color: #ffffff;
 }
}

/* ===============================
about : white overlap box
================================ */
#about-corporate .about-corporate-box {
 position: relative;
 margin-top: -120px;
 z-index: 10;
}

#about-corporate .about-corporate-box .wrap {
 background: #fff;
 padding: 50px 40px 80px;
}

#about-corporate .lead-text {
 font-size: 16px;
 line-height: 1.8;
 font-weight: 500;
 margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
 #about-corporate .lead-text {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: 24px;
 }
}
#about-corporate .text-body p {
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
 #about-corporate .text-body p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
 }
}
/* ===============================
about : bottom gray
================================ */
#about-corporate .about-corporate-bottom {
 background: #f2f4f6;
 padding: 60px 0 80px;
}

#about-corporate .bottom-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
}

#about-corporate .bottom-col h3 {
 font-size: 26px;
 font-weight: 700;
 margin-bottom: 24px;
 border-bottom: 2px solid #0a1a2a;
 display: inline-block;
 padding-bottom: 6px;
}

#about-corporate .bottom-col p {
 font-size: 16px;
 line-height: 1.8;
}
@media screen and (min-width: 768px) {
 #about-corporate .bottom-col p {
  font-size: 18px;
  line-height: 1.8;
 }
}
/* ===============================
about : responsive
================================ */
@media screen and (max-width: 767px) {
 #about-corporate .about-corporate-hero {
  height: 420px;
 }

 #about-corporate .hero-title {
  font-size: 36px;
 }

 #about-corporate .about-corporate-box .wrap {
  padding: 50px 20px;
 }

 #about-corporate .bottom-grid {
  grid-template-columns: 1fr;
  gap: 60px;
 }
}

/* ===============================
about : hero
================================ */
#about .about-hero {
 padding: 120px 0;
 background: #ffffff;
 text-align: center;
}

#about .about-hero__title {
 text-align: center;
 font-size: 50px;
 font-weight: bold;
 letter-spacing: 0.08em;
 color: #0a1a2a;
 margin-bottom: 20px;
}

#about .about-hero__lead {
 text-align: center;
 max-width: 800px;
 margin: 0 auto;
 font-size: 18px;
 line-height: 1.9;
 color: #333;
}

/* ===============================
SP
================================ */
@media screen and (max-width: 767px) {
 #about .about-hero {
  padding: 120px 0 60px;
 }

 #about .about-hero__title {
  font-size: 32px;
 }

 #about .about-hero__lead {
  font-size: 16px;
 }
}
/* ===============================
about : global scale
================================ */
#about-global {
 padding: 120px 0;
 background: #f2f4f6;
}

#about-global .about-global-grid {
 display: grid;
 gap: 80px;
}

@media screen and (min-width: 1024px) {
 #about-global .about-global-grid {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
 }
}

/* left */
#about-global .about-global-title {
 font-size: 35px;
 font-weight: bold;
 color: #0a1a2a;
 margin-bottom: 30px;
}

#about-global .about-global-list {
 display: grid;
 gap: 50px;
 padding-bottom: 70px;
}
@media screen and (min-width: 768px) {
 #about-global .about-global-list {
  display: grid;
  gap: 40px;
 }
}
#about-global .about-global-item .head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 12px;
 flex-direction: column;
}
@media screen and (min-width: 768px) {
 #about-global .about-global-item .head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-direction: row;
 }
}
#about-global .about-global-item i {
 font-size: 30px;
 color: #ff5a60;
}

#about-global .about-global-item h3 {
 font-size: 25px;
 font-weight: 700;
 color: #0a1a2a;
}

#about-global .about-global-item p {
 padding-left: 0px;
 font-size: 16px;
 line-height: 1.9;
 color: #333;
}
@media screen and (min-width: 768px) {
 #about-global .about-global-item p {
  padding-left: 36px;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
 }
}
/* right */
#about-global .about-global-visual {
 position: relative;
 max-width: 420px;
 margin: 0 auto;
 aspect-ratio: 1 / 1;
}

#about-global .globe {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}

#about-global .globe i {
 font-size: 550px;
 color: #e60012;
 opacity: 0.08;
}

/* stats */
#about-global .stats {
 position: relative;
 z-index: 2;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 32px;
}

#about-global .stat-box {
 background: rgba(255, 255, 255, 0.9);
 backdrop-filter: blur(6px);
 border: 1px solid rgba(0, 74, 159, 0.2);
 padding: 28px 36px;
 text-align: center;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

#about-global .stat-box .num {
 font-size: 45px;
 text-align: center;
 font-weight: 900;
 color: #e60012;
 margin-bottom: 6px;
}

#about-global .stat-box .label {
 font-size: 15px;
 text-align: center;
 font-weight: 700;
 letter-spacing: 0.14em;
 color: #0a1a2a;
 text-transform: uppercase;
}

#about-global .stat-box .sub {
 margin-top: 4px;
 text-align: center;
 font-size: 16px;
 color: #333;
}

/* ===============================
SP
================================ */
@media screen and (max-width: 767px) {
 #about-global {
  padding: 80px 0 180px;
 }

 #about-global .about-global-title {
  font-size: 26px;
  text-align: center;
  margin-bottom: 50px;
 }

 #about-global .globe i {
  font-size: 400px;
 }
}
/* ===============================
about : technology & innovation
================================ */
#about-technology {
 padding: 120px 0;
 background: #fff;
}

#about-technology .about-technology-head {
 text-align: center;
 margin-bottom: 80px;
}

#about-technology .about-technology-head h2 {
 text-align: center;
 font-size: 35px;
 font-weight: 900;
 color: #0a1a2a;
 margin-bottom: 16px;
}

#about-technology .about-technology-head p {
 max-width: 720px;
 margin: 0 auto;
 font-size: 16px;
 line-height: 1.9;
 color: #333;
}

#about-technology .about-technology-grid {
 display: grid;
 gap: 32px;
}

@media screen and (min-width: 768px) {
 #about-technology .about-technology-grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

#about-technology .about-technology-card {
 border: 1px solid #e5e5e5;
 padding: 48px 40px;
 transition: border-color 0.3s ease;
}

#about-technology .about-technology-card:hover {
 border-color: #e60012;
}

#about-technology .about-technology-card i {
 font-size: 40px;
 color: #ff5a60;
 margin-bottom: 32px;
 display: block;
}

#about-technology .about-technology-card h3 {
 font-size: 20px;
 font-weight: 700;
 color: #0a1a2a;
 margin-bottom: 20px;
}

#about-technology .about-technology-card p {
 font-size: 16px;
 line-height: 1.9;
 color: #333;
}

/* ===============================
SP
================================ */
@media screen and (max-width: 767px) {
 #about-technology {
  padding: 80px 0;
 }

 #about-technology .about-technology-head h2 {
  font-size: 26px;
 }

 #about-technology .about-technology-card {
  padding: 40px 32px;
 }
}
/* ===============================
about : quality & certification
================================ */
#about-quality {
 padding: 120px 0;
 background: #f2f4f6;
}

#about-quality .about-quality-head {
 text-align: center;
 margin-bottom: 80px;
}

#about-quality .about-quality-head h2 {
 text-align: center;
 font-size: 35px;
 font-weight: 900;
 color: #0a1a2a;
 margin-bottom: 16px;
}

#about-quality .about-quality-head p {
 text-align: center;
 max-width: 720px;
 margin: 0 auto;
 font-size: 16px;
 line-height: 1.9;
 color: #333;
}

#about-quality .about-quality-grid {
 display: grid;
 gap: 15px;
}

@media screen and (min-width: 768px) {
 #about-quality .about-quality-grid {
  grid-template-columns: repeat(2, 1fr);
 }
}
@media screen and (min-width: 1024px) {
 #about-quality .about-quality-grid {
  grid-template-columns: repeat(4, 1fr);
 }
}

#about-quality .about-quality-card {
 background: #fff;
 padding: 48px 20px;
 text-align: center;
 border: 1px solid transparent;
 transition: border-color 0.3s ease;
}

#about-quality .about-quality-card:hover {
 border-color: #e60012;
}

#about-quality .about-quality-card i {
 text-align: center;
 font-size: 50px;
 color: #ff5a60;
 margin-bottom: 24px;
 display: block;
}
@media screen and (min-width: 768px) {
 #about-quality .about-quality-card i {
  text-align: center;
  font-size: 42px;
  color: #ff5a60;
  margin-bottom: 24px;
  display: block;
 }
}
#about-quality .about-quality-card .badge {
 display: inline-block;
 background: #ff5a60;
 color: #fff;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 0.14em;
 padding: 6px 16px;
 margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
 #about-quality .about-quality-card .badge {
  display: inline-block;
  background: #ff5a60;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 16px;
  margin-bottom: 20px;
 }
}
#about-quality .about-quality-card h3 {
 text-align: center;
 font-size: 20px;
 font-weight: 700;
 color: #0a1a2a;
 margin-bottom: 14px;
}
@media screen and (min-width: 768px) {
 #about-quality .about-quality-card h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #0a1a2a;
  margin-bottom: 14px;
 }
}
#about-quality .about-quality-card p {
 text-align: center;
 font-size: 17px;
 line-height: 1.8;
 color: #333;
}
@media screen and (min-width: 768px) {
 #about-quality .about-quality-card p {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
 }
}
#about-quality .about-quality-note {
 margin-top: 80px;
 padding-top: 40px;
 border-top: 1px solid #ccc;
 text-align: center;
}

#about-quality .about-quality-note p {
 text-align: center;
 font-size: 17px;
 line-height: 1.9;
 color: #333;
}
@media screen and (min-width: 768px) {
 #about-quality .about-quality-note p {
  text-align: center;
  font-size: 18px;
  line-height: 1.9;
  color: #333;
 }
}
/* ===============================
SP
================================ */
@media screen and (max-width: 767px) {
 #about-quality {
  padding: 80px 0;
 }

 #about-quality .about-quality-head h2 {
  font-size: 26px;
 }

 #about-quality .about-quality-card {
  padding: 40px 18px;
 }
}