/*
 * 事例カード（職種 × 業務 × 結果）… inc/cases.php
 * トップ・実績ページ（/works/）・4領域ページ（/service/business/ai/{area}/）だけで読む。
 * html の font-size は 62.5%（1rem = 10px）。
 */
.mm-cases {
  --cs-ink: #13241e;
  --cs-muted: #4a5a54;
  --cs-green: #087f57;
  --cs-mint: #e6f4ed;
  --cs-line: rgba(19, 36, 30, .16);
  position: relative;
  z-index: 1;
  padding: clamp(6.4rem, 8vw, 10.4rem) 0;
  border-top: 1px solid var(--cs-line);
  background: #fff;
  color: var(--cs-ink);
  line-break: strict;
  overflow-wrap: anywhere;
}
.mm-cases--area { background: #f7faf8; }

.mm-cases__head { max-width: 72rem; margin-bottom: clamp(3.2rem, 4vw, 4.8rem); }
.mm-cases__en {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--cs-green);
  font-family: "Manrope", "Roboto", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.mm-cases__head h2 {
  margin: 0;
  font-size: clamp(2.6rem, 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.mm-cases__head p {
  margin: 1.6rem 0 0;
  color: var(--cs-muted);
  font-size: 1.5rem;
  line-height: 1.9;
}
.mm-cases__head .mm-cases__custom {
  margin-top: 2rem;
  padding: 1.6rem 2rem;
  border-left: 4px solid var(--cs-green);
  border-radius: 0 6px 6px 0;
  background: var(--cs-mint);
  color: var(--cs-ink);
}
.mm-cases__custom strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--cs-green);
  font-size: 1.7rem;
  line-height: 1.6;
}

.mm-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 44rem), 1fr));
  gap: 2.4rem;
}

.mm-case {
  --cs-pad: clamp(2.4rem, 2.6vw, 3.2rem);
  display: flex;
  flex-direction: column;
  padding: var(--cs-pad);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.mm-case__img {
  margin: calc(var(--cs-pad) * -1) calc(var(--cs-pad) * -1) 2.4rem;
  aspect-ratio: 3 / 2;
  background: var(--cs-mint);
}
.mm-case__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-case__own {
  align-self: flex-start;
  margin-bottom: 1.2rem;
  padding: .4rem 1rem;
  border: 1px solid var(--cs-green);
  border-radius: 999px;
  color: var(--cs-green);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.mm-case__title {
  margin: 0 0 2rem;
  font-size: clamp(1.8rem, 1.7vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  text-wrap: pretty;
}

.mm-case__facts { margin: 0 0 2rem; border-top: 1px solid var(--cs-line); }
.mm-case__facts > div {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 1.6rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--cs-line);
}
.mm-case__facts dt {
  color: var(--cs-muted);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.7;
}
.mm-case__facts dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.7;
}
.mm-case__facts > .mm-case__result {
  margin: .8rem -1.6rem 0;
  padding: 1.4rem 1.6rem;
  border-bottom: 0;
  border-radius: 6px;
  background: var(--cs-mint);
}
.mm-case__result dt { color: var(--cs-green); }
.mm-case__result dd {
  color: var(--cs-ink);
  font-size: 1.7rem;
  font-weight: 700;
}

.mm-case__body p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 1.4rem;
  line-height: 1.9;
}
.mm-case__body p + p { margin-top: .8rem; }

.mm-cases__note {
  max-width: 80rem;
  margin: clamp(3.2rem, 4vw, 4.8rem) 0 0;
  padding-left: 1.6rem;
  border-left: 3px solid var(--cs-green);
  color: var(--cs-muted);
  font-size: 1.4rem;
  line-height: 1.9;
}
.mm-cases__more {
  display: inline-flex;
  gap: .8rem;
  margin-top: 3.2rem;
  color: var(--cs-green);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .4rem;
}
.mm-cases__more:hover { opacity: .75; }

.mm-cases__self,
.mm-cases__topics {
  margin-top: 3.2rem;
  padding: clamp(2.4rem, 2.6vw, 3.2rem);
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  background: #fff;
}
.mm-cases__self h3,
.mm-cases__topics h3 {
  margin: 0 0 1rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.6;
}
.mm-cases__self p,
.mm-cases__topics p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 1.4rem;
  line-height: 1.9;
}
.mm-cases__topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.mm-cases__topics li {
  padding: .6rem 1.4rem;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  background: #f7faf8;
  font-size: 1.4rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .mm-case__facts > div { grid-template-columns: 4.8rem 1fr; gap: 1.2rem; }
  .mm-case__result dd { font-size: 1.6rem; }
}