/* ===== 診療のご案内（淡い面に見出しと文。その下に、罫線で区切った表のような升目に線の絵と名前を3列×2段） ===== */
.treatment__ttl { margin-bottom: 48px; }
.treatment__body { margin-bottom: 64px; }
.treatment__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tr-item a { display: block; height: 100%; padding: 40px 20px; transition: background-color 0.3s; }
.tr-item a:hover { background-color: rgba(255, 255, 255, 0.6); }
/* 升目の内側の線：PC は3列なので、2列目・3列目の左と、2段目の上に引く */
@media (min-width: 768px) {
  .tr-item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
  .tr-item:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
.tr-item__icon { display: flex; justify-content: center; align-items: center; height: 110px; margin-bottom: 16px; }
.tr-item__icon svg { width: 84px; height: 84px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-item__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 58px;
  color: var(--main);
  font-family: var(--maru);
  font-weight: 500;
  font-size: 1.063rem;
  line-height: 1.6;
  text-align: center;
}
.tr-item__name small { font-size: 0.813rem; }

/* 自費診療：内容・費用の目安・期間・リスクを、診療時間と同じ罫線の表で並べる */
.self-pay { margin-top: 64px; }
.self-pay__ttl { margin-bottom: 16px; color: var(--main); font-family: var(--kaku); font-weight: 500; font-size: 1.5rem; line-height: 1.6; letter-spacing: 0.1em; }
.self-pay__lead { margin-bottom: 40px; line-height: 2; }
.self-pay__item + .self-pay__item { margin-top: 40px; }
.self-pay__name {
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 4px solid var(--main);
  color: var(--ink-dark);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.price-table table { width: 100%; background-color: #fff; }
.price-table th, .price-table td { padding: 1em 1.2em; border: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.9; }
.price-table th { width: 24%; background-color: var(--th); color: #4f4f4f; font-weight: 500; font-size: 0.938rem; }
@media (min-width: 768px) { .price-table th { white-space: nowrap; } }
.price-table td { font-size: 0.938rem; }
.self-pay__btn { margin-top: 40px; }
@media (max-width: 767px) {
  .treatment__ttl { margin-bottom: 24px; }
  .treatment__body { margin-bottom: 32px; }
  /* スマホは2列なので、2列目の左と、2段目からの上に線を引く */
  .treatment__list { grid-template-columns: repeat(2, 1fr); }
  .tr-item:nth-child(2n) { border-left: 1px solid var(--line); }
  .tr-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tr-item a { padding: 24px 12px; }
  .tr-item__icon { height: 60px; }
  .tr-item__icon svg { width: 56px; height: 56px; }
  .tr-item__name { font-size: 1rem; }
  .tr-item__name small { font-size: 0.786rem; }
  .self-pay { margin-top: 40px; }
  .self-pay__ttl { font-size: 1.286rem; }
  .self-pay__lead { margin-bottom: 24px; }
  .price-table th, .price-table td { display: block; width: 100%; padding: 0.7em 1em; }
  .price-table tr + tr th { border-top: 0; }
  .price-table td { border-top: 0; }
}