/* ==========================================================================
   company-style.css
   会社概要ページ（page-company.php）専用スタイル
   デザイントークン：ネイビー #004183／コーラル #C63031
   フォント：Zen Old Mincho（見出し）／Zen Kaku Gothic New（本文）
   product-style.css の構成に準拠（同じ子テーマ内でのトーン統一のため）

   ★2026-07-20：本文が小さいとのフィードバックにより、全フォントサイズを
     一律120%（×1.2）にスケールアップ（タイトルも含め同率で拡大し、
     見出しと本文の相対バランスは変更前と同じ比率を維持）。
   ========================================================================== */

.company-page {
  --co-navy: #004183;
  --co-coral: #C63031;
  --co-bg-soft: #F7F9FB;
  --co-text: #262626;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--co-text);
  line-height: 1.8;
}

.company-page h1,
.company-page h2,
.company-page h3 {
  font-family: "Zen Old Mincho", serif;
  color: var(--co-navy);
}

.company-page section > div {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 24px;
}

.co-section-title {
  text-align: center;
  font-size: 1.92rem; /* 旧1.6rem×1.2 */
  margin-bottom: 40px;
  position: relative;
}
.co-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--co-coral);
  margin: 12px auto 0;
}

/* ---------- ヒーロー ---------- */
.co-hero {
  position: relative;
  background: var(--co-navy);
  padding: 88px 0;
  text-align: center;
  overflow: hidden;
  /* 2026-07-29：全ページのメインビジュアル高さ統一（Scientific Hubの数値に合わせる）。
     モバイルファースト：まず縦幅を抑えたバナー比率で確保し、PC側で広げる（下記メディアクエリ参照） */
  min-height: 300px;
  display: flex;
  align-items: center;
}
.co-hero .co-hero__inner { width: 100%; }
.co-hero .co-hero__bg {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  z-index: 0;
}
.co-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 2026-07-20：写真が見えにくいほどブルーが強すぎるとのフィードバックにより、
     画像の不透明度を上げ（0.55→0.85）、下記::afterの色重ねも薄くした */
  opacity: 0.85;
}
.co-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 文字の可読性を保つ最小限のネイビーの重ねに調整（旧0.55〜0.75→0.3〜0.5） */
  background: linear-gradient(180deg, rgba(0,65,131,0.3), rgba(0,65,131,0.5));
}
.co-hero__inner {
  position: relative;
  z-index: 1;
}
.co-hero__eyebrow {
  color: #fff;
  opacity: 0.7;
  font-size: 1.02rem; /* 旧0.85rem×1.2 */
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.co-hero .co-hero__title {
  /* 「.company-page h1」（ネイビー文字色）より詳細度を上げて確実に白を優先させる。
     このh1がネイビー背景上にあるにもかかわらずネイビー文字になり視認できなくなっていたバグの修正（2026-07-20）。
     ★併せて、下記レスポンシブ側のfont-sizeもこの詳細度（.co-hero .co-hero__title）に揃え、
     メディアクエリが正しく効くように修正（旧実装は詳細度不一致でPC/モバイルの拡縮が
     機能していなかった） */
  color: #fff;
  font-size: 2.52rem; /* 2026-07-29：Scientific Hub(.sh-hero__title)と揃えてヒーロー高さを一致させるため変更（旧2.28rem） */
  margin: 0 0 16px;
}
.co-hero__sub {
  color: #fff;
  opacity: 0.92;
  font-size: 1.2rem; /* 2026-07-29：Scientific Hub(.sh-hero__sub)と揃えてヒーロー高さの残差(3.65px)を解消（旧1.26rem） */
  line-height: 1.9;
}

/* ---------- 代表挨拶 ---------- */
.co-message {
  background: #fff;
  padding: 64px 0;
}
/* モバイルファースト：デフォルトは縦積み（写真→本文）、700px以上で2カラム */
.co-message__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.co-message__photo img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 65, 131, 0.12);
}
.co-section-title--left {
  text-align: left;
}
.co-section-title--left::after {
  margin: 12px 0 0;
}
.co-message__body p {
  font-size: 1.18rem; /* 旧0.98rem×1.2 */
  margin: 0 0 20px;
}
.co-message__sign {
  text-align: right;
  font-weight: 700;
  color: var(--co-navy);
  margin-top: 32px !important;
}

/* ---------- 数字で見るスケアクロウ ---------- */
.co-stats {
  background: var(--co-bg-soft);
  padding: 64px 0;
}
.co-stats__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.co-stats__list li {
  background: #fff;
  border-radius: 12px;
  padding: 28px 12px;
  box-shadow: 0 2px 12px rgba(0, 65, 131, 0.06);
  /* 2行積みのcombo項目だけ縦に長くなるため、flex-end揃えで3項目のラベル位置を底辺で揃える */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.co-stats__num {
  display: block;
  font-family: "Zen Old Mincho", serif;
  color: var(--co-coral);
  font-size: 2.4rem; /* 旧2rem×1.2 */
  font-weight: 700;
}
.co-stats__num small {
  font-size: 1.2rem; /* 旧1rem×1.2 */
  margin-left: 2px;
}
/* 【2026-08-27追加修正】他2項目（2.4rem）と文字サイズが違って見えると指摘あり。
   横幅に収めるための縮小ではなく、同じ2.4remのまま「数字／×／数字」の3行積みにする。
   ×の上下だけ行間を詰め、センター揃えにする指示のためflex columnで各行を個別制御。 */
.co-stats__num--combo {
  font-size: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.co-stats__combo-line {
  line-height: 1.15;
}
.co-stats__combo-sep {
  display: block;
  line-height: 1;
  margin: 1px 0;
  font-weight: 400;
  font-size: 0.5em;
}
.co-stats__label {
  display: block;
  font-size: 0.98rem; /* 旧0.82rem×1.2 */
  margin-top: 8px;
  color: var(--co-text);
}
.co-stats__note {
  text-align: center;
  font-size: 1.02rem; /* 旧0.85rem×1.2 */
  color: #666;
  margin: 0;
}

/* ---------- 沿革 ---------- */
.co-history {
  background: #fff;
  padding: 64px 0;
}
.co-history__lead {
  font-size: 1.14rem; /* 旧0.95rem×1.2 */
  margin: 0 0 20px;
}
.co-history__video {
  margin: 32px 0 40px;
  text-align: center;
}
.co-history__video-lead {
  font-size: 1.1rem;
  color: var(--co-navy);
  font-weight: 700;
  margin: 0 0 20px;
}
.co-history__video-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0, 65, 131, 0.12);
  padding: 0;
  border: 0;
  cursor: pointer;
}
.co-history__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.co-history__video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.co-history__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(198, 48, 49, 0.92); /* var(--co-coral) */
  transition: transform 0.2s ease, background 0.2s ease;
}
.co-history__video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.co-history__video-frame:hover .co-history__video-play,
.co-history__video-frame:focus-visible .co-history__video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--co-coral);
}
.co-history__video-caption {
  font-size: 0.95rem;
  color: #666;
  margin: 14px 0 0;
}
.co-history__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.co-history__table th,
.co-history__table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 1.08rem; /* 旧0.9rem×1.2 */
  border-bottom: 1px solid #E5E9ED;
}
.co-history__table th {
  color: var(--co-navy);
  font-weight: 700;
  width: 30%;
  white-space: nowrap;
}

/* ---------- 事業内容 ---------- */
.co-business {
  background: var(--co-bg-soft);
  padding: 64px 0;
}
.co-business__subtitle {
  font-size: 1.26rem; /* 旧1.05rem×1.2 */
  margin: 0 0 16px;
}
.co-business__list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 1.1rem; /* 旧0.92rem×1.2 */
}
.co-business__list li {
  margin-bottom: 8px;
}

/* ---------- 共同研究機関 ---------- */
.co-research {
  background: #fff;
  padding: 64px 0;
  text-align: center;
}
.co-research__lead {
  font-size: 1.1rem; /* 旧0.92rem×1.2 */
  margin: 0 0 28px;
}
.co-research__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.co-research__list li {
  font-size: 1.08rem; /* 旧0.9rem×1.2 */
  padding-left: 1.2em;
  position: relative;
}
.co-research__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--co-coral);
}
.co-research__link {
  display: inline-block;
  color: var(--co-navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--co-navy);
}

/* ---------- 会社概要表 ---------- */
.co-table {
  background: var(--co-bg-soft);
  padding: 64px 0;
}
.co-table__data {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.co-table__data th,
.co-table__data td {
  padding: 14px 20px;
  text-align: left;
  font-size: 1.08rem; /* 旧0.9rem×1.2 */
  border-bottom: 1px solid #E5E9ED;
}
.co-table__data th {
  color: var(--co-navy);
  font-weight: 700;
  width: 30%;
  white-space: nowrap;
}

/* ---------- CSR（2026-08-27追加：現時点はプレースホルダー文言のみ） ---------- */
.co-csr {
  background: #fff;
  padding: 64px 0;
  text-align: center;
}
.co-csr__lead {
  font-size: 1.1rem;
  margin: 0;
}

/* ---------- アクセス ---------- */
.co-access {
  background: #fff;
  padding: 64px 0;
  text-align: center;
}
.co-access__text {
  font-size: 1.1rem; /* 旧0.92rem×1.2 */
  margin: 0;
}
.co-access__map {
  margin-top: 28px;
  border-radius: 8px;
  overflow: hidden;
}
.co-access__map iframe {
  width: 100%;
  display: block;
}

/* ---------- CTA ---------- */
.co-cta {
  padding: 56px 0 80px;
  text-align: center;
}
.co-cta__button {
  display: inline-block;
  background: var(--co-coral);
  color: #fff;
  font-weight: 700;
  font-size: 1.26rem; /* 旧1.05rem×1.2 */
  padding: 16px 52px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.co-cta__button:hover {
  opacity: 0.85;
  color: #fff;
}

/* ---------- レスポンシブ（モバイルファースト：基本スタイルがモバイル、以下は拡大時の上書き） ---------- */

/* 700px以上：代表挨拶を写真＋本文の2カラムに */
@media (min-width: 700px) {
  .co-message__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
  .co-message__photo {
    flex: 0 0 320px;
  }
  .co-message__photo img {
    margin: 0;
  }
  .co-message__body-wrap {
    flex: 1;
  }
}

/* 768px以上：ヒーローをPC向けワイドバナー比率に拡大（推奨1920×640px程度の画像を想定） */
@media (min-width: 768px) {
  .co-hero {
    /* 2026-07-29：min-height（床）だと文章量でページごとに実描画高さがズレるため、
       全ページ横断で唯一のコンテンツ最大値（company/Scientific Hub実測436.7px）に
       固定heightを設定し、flexで中央寄せする方式に変更。これで文章量に関わらず
       PC幅では常にピクセル単位で同じ高さになる。 */
    height: 437px;
    padding: 110px 0;
  }
  .co-hero .co-hero__title {
    font-size: 3rem; /* 2026-07-29：Scientific Hubと揃えてヒーロー高さを一致させるため変更（旧3.36rem） */
  }
}

@media (max-width: 767px) {
  .co-stats__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .co-research__list {
    grid-template-columns: 1fr;
  }
}