/* ===== メニュー（縦書きの題＋写真の白い箱を2列。下に幅いっぱいの「来院される方」の箱） ===== */
.menu { margin-top: 1.5rem; }
.menu__wrap { margin-top: 0.6rem; }
.menu__cols { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 0.4rem; }
.menu__cols > * { width: 47.7426637%; }

.box.card { display: flex; flex-wrap: wrap; row-gap: 0.3rem; padding: 0.3rem; }
.card__ttl {
  display: flex;
  align-items: flex-end;
  width: calc(100% - 2.1rem);
  padding: 0.2rem 0 0 0.2rem;
  writing-mode: vertical-rl;
  font-feature-settings: "vpal";
  font-size: max(18px, min(0.32rem, 34px));
  font-weight: 300;
  line-height: 1.2;
}
.card__img { display: block; width: 2.1rem; aspect-ratio: 210 / 220; border-radius: 5px; box-shadow: var(--shadow); }
.card__txt { display: block; width: 100%; }

/* 来院される方の例（参考の一覧の箱の型。札は押せない） */
.people { position: relative; display: flex; flex-wrap: wrap; margin-top: 0.4rem; padding: 0.4rem 0.3rem; }
.people__ttl {
  position: relative;
  writing-mode: vertical-rl;
  font-feature-settings: "vpal";
  font-size: max(24px, min(0.48rem, 50px));
  font-weight: 300;
  line-height: 1.2;
}
.people__tag {
  position: absolute;
  left: 100%;
  top: -0.19rem;
  padding: 0.13rem 0;
  background: var(--accent);
  color: #fff;
  font-size: max(15px, min(0.28rem, 30px));
  font-weight: 500;
  border-radius: 5px;
}
.people__tag::before {
  content: "";
  position: absolute;
  right: calc(100% - 2.5px);
  bottom: 18px;
  width: 12.5px;
  height: 8.5px;
  background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 2px) 0, 100% 100%);
  rotate: 90deg;
}
.people__b1 { align-self: flex-end; margin-left: 1.25rem; }
.people__b1 p { margin-left: 0.05rem; font-size: max(12px, min(0.14rem, 16px)); font-weight: 400; }
.people__list { display: flex; flex-wrap: wrap; gap: 0.08rem; max-width: 2.6rem; margin-top: 0.15rem; }
.people__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.4rem;
  min-width: 0.4rem;
  padding-inline: 0.12rem;
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  color: var(--accent);
  font-size: max(12px, min(0.16rem, 18px));
  font-weight: 700;
}
.people__img { position: absolute; top: 0.3rem; right: 0.3rem; width: 3.2rem; aspect-ratio: 1; }
.people__txt { width: 100%; margin-top: 0.4rem; }

@media (max-width: 767px) {
  .menu { margin-top: 1rem; }
  .menu__cols { display: block; }
  .menu__cols > * { width: auto; }
  .menu__cols > * + * { margin-top: 0.3rem; }
  .box.card { padding: 0.2rem; row-gap: 0.2rem; }
  .card__ttl { padding: 0.1rem 0 0 0.15rem; font-size: min(0.26rem, 28px); width: calc(100% - 1.7rem); }
  .card__img { width: 1.7rem; align-self: flex-start; margin-left: auto; }
  .people { margin-top: 0.3rem; padding: 0.3rem 0.2rem 0.35rem; }
  .people__ttl { font-size: min(0.32rem, 34px); margin-left: 0.1rem; }
  .people__tag { top: -0.1rem; padding: 0.05rem 0; font-size: min(0.18rem, 20px); }
  .people__img { top: 0.3rem; right: 0.2rem; width: 1.59rem; }
  .people__b1 { order: 3; width: 100%; margin: 0.35rem 0 0; }
  .people__list { max-width: none; }
  .people__list li { height: 0.36rem; font-size: min(0.14rem, 16px); }
  .people__txt { order: 4; margin-top: 0.25rem; font-size: min(0.14rem, 16px); }
}