.mj-ac {
  background-color: rgb(var(--color-background));
}

.mj-ac__cards {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.mj-ac__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.mj-ac__visual {
  height: 210px;
  margin-block-end: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(var(--color-button-background), 0.08);
  color: rgb(var(--color-button-background));
}

.mj-ac__image,
.mj-ac__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 大きな文字（例: 01—04） */
.mj-ac__visual--figure {
  background: linear-gradient(140deg, rgba(var(--color-button-background), 0.07), rgba(var(--color-button-background), 0.2));
}

.mj-ac__figure {
  font-family: var(--mj-font-figure);
  font-size: clamp(42px, 5vw, 72px);
  letter-spacing: 0.02em;
}

/* 円の記号（例: H₂）。SVGを使わずCSSだけで描く */
.mj-ac__orb {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(var(--color-button-background), 0.5);
  border-radius: 50%;
  box-shadow: inset -20px -10px 40px rgba(var(--color-button-background), 0.18);
}

.mj-ac__orb span {
  font-family: var(--mj-font-figure);
  font-size: 42px;
}

.mj-ac__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgb(var(--color-light-text));
}

.mj-ac__title {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.8;
  margin-block: 10px;
  color: rgb(var(--color-text));
}

.mj-ac__text {
  font-size: 14.5px;
  margin-block-end: 16px;
}

.mj-ac__more {
  margin-block-start: auto;
  align-self: flex-start;
  display: inline-flex;
  gap: 24px;
  padding-block: 7px;
  border-block-end: 1px solid rgba(var(--color-text), 0.35);
  font-size: 14px;
}

.mj-ac__more::after {
  content: "→";
}

.mj-ac__card:hover .mj-ac__title {
  color: rgb(var(--color-button-background));
}

@media (max-width: 760px) {
  .mj-ac__visual { height: 230px; }
}

/* 画像未設定のときは枠を出さない（仮画像で埋めない方針のため） */
.mj-ac__visual--image:not(:has(img)) {
  display: none;
}

/* 参照実装 .sectionhead に合わせる
   .sectionhead{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}
   .sectionhead h2{font-size:36px;letter-spacing:.07em;margin:0}
   .sectionhead .eyebrow{margin-bottom:12px} */
.mj-section .mj-ac__head {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-block-end: 45px;
}

.mj-section .mj-ac__head .mj-head__title {
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: 0.07em;
  line-height: 1.6;
  margin: 0;
}

.mj-section .mj-ac__head .mj-eyebrow {
  margin-block-end: 12px;
}

.mj-ac__headlink {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mj-section .mj-ac__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-block-end: 30px;
  }
}

/* 設定欄で入れた改行をそのまま反映する */
.mj-section .mj-ac__head .mj-head__title {
  white-space: pre-line;
}

/* カードの見出しも、設定欄の改行をそのまま反映する
   （参照 .articles h3{font-weight:400;font-size:19px;line-height:1.8;margin:10px 0}） */
.mj-ac__title {
  white-space: pre-line;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.8;
  margin: 10px 0;
}