/* =========================
   Company Page — Design based on provided layout
========================= */

body {
  margin: 0;
  font-family: 'Figtree', system-ui, sans-serif;
  color: #333;
  background: #fff;
  padding-top: 93px;
  font-size: 15px;
  line-height: 1.65;
}

/* FV — gradient header */
.fv {
  background: linear-gradient(to right, #9c1d52, #004035);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.fv-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.fv-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 768px) {
  .fv {
    padding: 60px 16px;
  }
  .fv-title {
    font-size: 22px;
  }
}

/* Section common */
.company-section {
  padding: 60px 20px;
  box-sizing: border-box;
}

.company-container {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* About セクションのみ幅を狭める */
.company-about .company-container {
  max-width: 860px;
}

.company-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin: 0 0 40px;
}

.company-section-title--light {
  color: #fff;
  margin-bottom: 32px;
}

/* =========================
   About DripSquare — 画像のようにランダムな左右交互レイアウト
========================= */

.company-about {
  background: #fff;
}

.company-about .company-section-title {
  margin-bottom: 48px;
}

.about-block {
  display: flex;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-block:last-child {
  margin-bottom: 0;
}

/* 1・3ブロック: 画像左・テキスト右 */
.about-block--img-left {
  flex-direction: row;
}

/* 2ブロック: テキスト左・画像右（HTMLでテキスト→画像の順のため row で左から並ぶ） */
.about-block--img-right {
  flex-direction: row;
}

.about-block-img {
  flex: 0 0 min(340px, 100%);
  min-width: 0;
}

.about-block-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.about-block-text {
  flex: 1 1 min(340px, 100%);
  min-width: 0;
}

.about-block-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}

@media (max-width: 768px) {
  .company-about {
    padding: 40px 16px;
  }

  .company-section-title {
    font-size: 20px;
    margin-bottom: 28px;
  }

  .about-block,
  .about-block--img-left {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
  }

  /* 2ブロックはHTMLがテキスト→画像の順のため、画像を上に出す */
  .about-block--img-right {
    flex-direction: column-reverse;
    gap: 20px;
    margin-bottom: 36px;
  }

  .about-block-img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .about-block-text {
    flex: none;
    width: 100%;
  }

  .about-block-text p {
    font-size: 14px;
    text-align: center;
  }
}

/* =========================
   Certificates — dark green background
========================= */

.company-certificates {
  background: #004035;
  padding: 56px 20px;
}

.certificates-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.cert-item {
  flex: 0 0 auto;
  text-align: center;
  max-width: 160px;
}

.cert-item img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 4px;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.cert-label {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 768px) {
  .company-certificates {
    padding: 40px 16px;
  }

  .certificates-list {
    gap: 20px;
    justify-content: center;
  }

  .cert-item {
    max-width: 120px;
  }

  .cert-label {
    font-size: 12px;
    margin-top: 8px;
  }
}

/* =========================
   Partner Suppliers
========================= */

.company-partners {
  background: #fff;
  padding: 56px 20px 80px;
}

.partners-inner {
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}

.partners-map {
  flex: 1 1 min(400px, 100%);
  min-width: 0;
}

.partners-map img {
  width: 100%;
  height: auto;
  display: block;
}

.partners-text {
  flex: 1 1 min(360px, 100%);
  min-width: 0;
}

.partners-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}

@media (max-width: 768px) {
  .company-partners {
    padding: 40px 16px 60px;
  }

  .partners-inner {
    flex-direction: column;
    gap: 28px;
  }

  .partners-map {
    order: 0;
    width: 100%;
  }

  .partners-text {
    order: 1;
    width: 100%;
  }

  .partners-text p {
    font-size: 14px;
    text-align: center;
  }
}