/* CSR BEGIN */
.p-csr {
  padding-bottom: 60px; }

.p-csr-box-pic {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 50px; }

.p-csr-txt-lead {
  width: 510px;
  font-size: 1.6rem; }

.p-csr-pic {
  width: 430px; }

@media screen and (max-width: 767px) {
  .p-csr {
    padding-bottom: 13.33333vw; }

  .p-csr-box-pic {
    flex-direction: column;
    margin-top: 6.66667vw; }

  .p-csr-txt-lead {
    width: 100%;
    margin-top: 5.33333vw;
    font-size: 4.26667vw; }

  .p-csr-pic {
    width: 100%; }
}

/* カードのGrid設定 */
.csr-card {
  display: grid;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 30px;
  margin: 0px 20px 30px;
  column-gap: 30px;
  /* PC用の配置: 上段にタイトル、下段にテキストと写真 */
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "title title"
    "text  image";
}

.csr-card__title {
  grid-area: title;
  font-size: 2.2rem;
  font-weight: bold;
  padding-left: 15px;
  border-left: 4px solid #00896c;
  margin-bottom: 25px;
  align-self: start;
}

.csr-card__text {
  grid-area: text;
  line-height: 1.7;
  font-size: 1.7rem;
}

.csr-card__image {
  grid-area: image;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------
   モバイル対応 (767px以下)
------------------------------------------- */
@media screen and (max-width: 767px) {
  .csr-card {
    padding: 15px;
    margin: 0px 10px 30px;
    grid-template-columns: 1fr; /* 1カラムに変更 */
    /* 順序を入れ替え: 写真 -> タイトル -> テキスト */
    grid-template-areas:
      "image"
      "title"
      "text";
  }

  .csr-card__image {
    margin-bottom: 20px;
  }

  .csr-card__title {
    font-size: 1.7rem;
    margin-bottom: 15px;
    padding-left: 8px;
  }

  .csr-card__text {
    margin-bottom: 0;
    font-size: 1.4rem;
  }
}