/*
 * 事例紹介ページ専用スタイル
 * 文字の大きさ・太さ・行間・色は Typography トークンが持つ。ここでは余白・配置のみ。
 */

/*
 * ページタイトル
 */
.cases-head {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--color-rule);
}

.cases-head__kicker {
  margin-bottom: 22px;
}

.cases-head__lead {
  max-width: 44em;
  margin-top: 32px;
}

/*
 * 事例
 * PC: 左に写真、右に「番号 → 見出し → 課題・施策・結果」
 * SP: 番号 → 見出し → 写真 → 課題・施策・結果 の縦積み
 */
.cases-case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  padding: 72px 0;
  border-bottom: 1px solid var(--color-rule);
}

.cases-case:last-child {
  border-bottom: 0;
}

.cases-case__photo {
  align-self: start;
  padding: 10px;
}

.cases-case__photo img {
  /* 写真全体を見せる（切り抜かない）。元画像の比率で高さを決める */
  aspect-ratio: 1052 / 701;
  height: auto;
}

.cases-case__kicker {
  margin-bottom: 18px;
  font-feature-settings: "tnum";
}

.cases-case__title {
  margin-bottom: 34px;
}

/* 課題・施策・結果 */
.cases-case__rows {
  margin: 0;
  border-top: 1px solid var(--color-rule);
}

.cases-case__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-rule);
}

.cases-case__value {
  margin: 0;
}

/*
 * SP
 */
@media (max-width: 767px) {
  .cases-head {
    padding: 44px 0 32px;
  }

  .cases-head__kicker {
    margin-bottom: 14px;
  }

  .cases-head__lead {
    margin-top: 24px;
  }

  /* 文章ブロックをほどいて、番号 → 見出し → 写真 → 本文 の順に並べ替える */
  .cases-case {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 36px 0;
  }

  .cases-case__text {
    display: contents;
  }

  .cases-case__photo {
    order: 1;
    align-self: stretch;
    margin-bottom: 22px;
    padding: 8px;
  }

  .cases-case__photo img {
    height: 190px;
  }

  .cases-case__rows {
    order: 2;
  }

  .cases-case__kicker {
    margin-bottom: 14px;
  }

  .cases-case__title {
    margin-bottom: 20px;
  }

  .cases-case__br-pc {
    display: none;
  }

  .cases-case__row {
    display: block;
    padding: 18px 2px;
  }

  .cases-case__row > dt {
    margin-bottom: 8px;
  }
}