/* ==========================================================
   COMPANY（会社概要）ページ専用スタイル
   共通部分は /css/sub-common.css にあります
   ========================================================== */
/* --- ページ見出し（イントロ） --- */
.intro:before {
  content: "COMPANY";
  position: absolute;
  right: -5vw;
  top: 12%;
  font:
    900 clamp(120px, 22vw, 380px)/1 Arial,
    sans-serif;
  color: rgba(255, 255, 255, 0.035);
  letter-spacing: -0.09em;
  pointer-events: none;
}

/* --- CONTACT（お問い合わせ導線） --- */
.contact {
  padding: 80px 7vw;
  display: flex;
  align-items: center;
  gap: 45px;
  background: #fff;
}
.contact > b {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.contact h2 {
  font:
    40px Georgia,
    "Yu Mincho",
    serif;
  font-weight: 400;
  flex: 1;
}
.contact a {
  background: #c90012;
  color: #fff;
  padding: 27px 50px;
}

/* --- スマホ・タブレット（画面幅 900px 以下） --- */
@media (max-width: 900px) {
  .contact {
    display: block;
  }
  .contact h2 {
    font-size: 32px;
  }
  .contact a {
    display: block;
    margin-top: 25px;
  }
}

/* --- OSで「動きを減らす」設定にしている人向け：アニメーションを止める --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- 会社概要 --- */
.company-wrap {
  max-width: 1320px;
  margin: auto;
}
.company-kicker {
  font:
    12px Arial,
    sans-serif;
  color: #bd0018;
  letter-spacing: 0.24em;
}
.company-profile {
  background: #f4f4f4;
  padding: 125px 8vw 145px;
}
.company-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid #ccc;
  padding-bottom: 28px;
  margin-bottom: 50px;
}
.company-section-head h2 {
  font:
    800 clamp(52px, 8vw, 120px)/1 Arial,
    sans-serif;
  letter-spacing: -0.075em;
  margin: 0;
}
.company-section-head span {
  font-size: 14px;
  letter-spacing: 0.15em;
}
.profile-table {
  width: 100%;
  border-collapse: collapse;
}
.profile-table th,
.profile-table td {
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
  padding: 29px 20px;
  font-size: 15px;
  line-height: 2;
}
.profile-table th {
  width: 26%;
  font-weight: 600;
  color: #555;
}
.profile-table td {
  color: #222;
}

/* --- OUR APPROACH（考え方） --- */
.company-values {
  background: #111;
  color: #fff;
  padding: 135px 8vw 150px;
  overflow: hidden;
}
.company-values h2 {
  font:
    800 clamp(50px, 9vw, 140px)/0.95 Arial,
    sans-serif;
  letter-spacing: -0.075em;
  margin: 35px 0 65px;
}
.company-values h2 span {
  color: #bd0018;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}
.value {
  border-top: 2px solid #bd0018;
  padding-top: 26px;
}
.value b {
  font:
    40px Georgia,
    serif;
  color: #bd0018;
}
.value h3 {
  font-size: 23px;
  margin: 30px 0 15px;
}
.value p {
  font-size: 13px;
  line-height: 2.4;
  color: #aaa;
}

/* --- 会社概要 --- */
.company-profile .reveal,
.company-values .reveal {
  transition:
    opacity 0.9s,
    transform 0.9s;
}

/* --- スマホ・タブレット（画面幅 850px 以下） --- */
@media (max-width: 850px) {
  .company-profile,
  .company-values {
    padding: 80px 7vw 90px;
  }
  .value-grid {
    grid-template-columns: 1fr;
  }
  .company-section-head {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }
  .profile-table th {
    width: 32%;
  }
  .profile-table th,
  .profile-table td {
    padding: 20px 8px;
    font-size: 13px;
  }
  .value-grid {
    gap: 55px;
  }
}