/* =========================
   Page: ABOUT US（/aboutus）
========================= */

.aboutus-page .area-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 上の説明（センター） */
.ap-lead {
  text-align: center;
  line-height: 1.9;
  font-size: 1.2rem;
  margin: 0 0 44px;
  font-weight: bold;
}

/* 交互レイアウト */
.ap-block {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 48px;
  align-items: center;
  margin-top: 70px;
}

/* 2段目：左右反転 */
.ap-block--reverse {
  grid-template-columns: 4fr 3fr;
}

/* テキスト（縦中央＋本文は左寄せ） */
.ap-text {
  display: flex;
  align-items: center; /* vertical-align middle 相当 */
}

.ap-text p {
  margin: 0;
  line-height: 2;
  text-align: left;
}

/* 写真 */
.ap-photo {
  margin: 0;
}

.ap-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-20);
}

/* CTA（既存 .news-more を利用。上下だけ調整） */
.aboutus-page .news-more {
  margin-top: 64px;
}

/* =========================
   テキスト寄せの切り替え
========================= */

/* 通常ブロック（左がテキスト）→ 左寄せ */
.ap-block .ap-text {
  text-align: left;
}

/* 反転ブロック（右がテキスト）→ 右寄せ */
.ap-block--reverse .ap-text {
  text-align: right;
}

/* 見出しも連動 */
.ap-block .ap-text h3 {
  text-align: left;
}

.ap-block--reverse .ap-text h3 {
  text-align: right;
}

/* =========================
   PC：偶数列テキスト右寄せ
========================= */
@media (min-width: 901px) {
  /* 右側に来るテキストブロック */
  .ap-block--reverse .ap-text {
    text-align: right;
    justify-content: flex-end; /* flex内の配置を右へ */
  }

  /* 見出しがある場合 */
  .ap-block--reverse .ap-text h3 {
    text-align: right;
  }

  /* 本文 */
  .ap-block--reverse .ap-text p {
    text-align: right;
  }
}

/* =========================
   Responsive
========================= */
@media (max-width: 900px) {
  .ap-lead {
    margin-bottom: 34px;
    font-weight: 700;
    text-align: left;
  }

  .ap-block,
  .ap-block--reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
    text-align: left;
  }

  /* スマホ：順番をテキスト→画像に固定 */
  .ap-block .ap-text,
  .ap-block--reverse .ap-text {
    order: 1;
  }

  .ap-block .ap-photo,
  .ap-block--reverse .ap-photo {
    order: 2;
  }

  /* ★ここが重要：中央寄せをやめる */
  .ap-text {
    justify-content: flex-start; /* center をやめる */
    text-align: left;
  }

  /* ★幅制限を外して左端まで使う */
  .ap-text p {
    max-width: none; /* 34em を無効化 */
    width: 100%;
    text-align: left;
  }

  .ap-block .ap-text h3,
  .ap-block--reverse .ap-text h3 {
    text-align: left;
  }
}