/* ===== STAFF & RESERVE（参考：タブ → 上に濃い線の入った灰色の帯 → 白いカードが横に送られる。カードの右下に差し色の影） ===== */
.staff { margin-bottom: 60px; padding: 0 20px; scroll-margin-top: 20px; }
.staff__tabs { display: flex; justify-content: center; }
.staff__tab { width: 40%; max-width: 260px; margin: 0 10px; padding: 0; border: 1px solid var(--accent); border-bottom: 0; background: #fff; font-size: 1.6rem; line-height: 4rem; font-weight: 700; color: var(--accent); text-align: center; cursor: pointer; }
.staff__tab.is-active { background: var(--accent); color: #fff; }
.staff__contents { position: relative; margin: 0 -20px; background: var(--band); border-top: 1px solid var(--accent); }
.staff__content { width: 100%; margin: 0 auto; padding: 35px 20px 50px; }
.staff__heading { margin-bottom: 10px; text-align: center; }
.staff__heading-in { position: relative; font-size: 1.6rem; line-height: 1.6rem; font-weight: 700; color: var(--ink-head); letter-spacing: .1rem; }
.staff__heading-in::before, .staff__heading-in::after { content: ""; position: absolute; bottom: -2px; width: 0; height: 19px; border-left: 1px dashed var(--ink); }
.staff__heading-in::before { left: -18px; transform: rotate(-28deg); }
.staff__heading-in::after { right: -18px; transform: rotate(28deg); }
.staff__date { margin-bottom: 30px; font-size: 1.2rem; line-height: 2rem; text-align: center; color: var(--ink); }
.staff__now { margin-left: .8em; }

/* --- 横に送る列 --- */
.staff__slide { position: relative; }
.staff__viewport { overflow: hidden; padding: 0 0 30px; }
.staff__row { display: flex; align-items: stretch; will-change: transform; }
.staff__col { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; margin: 0 10px 18px; padding: 30px 20px 40px; background: #fff; box-shadow: var(--shadow); }
.staff__more { position: absolute; left: 0; right: 0; bottom: -18px; width: 146px; font-family: var(--f-sans); font-weight: 700; font-size: 1.3rem; }
.staff__arrow { position: absolute; top: 50%; z-index: 3; width: 30px; height: 40px; margin-top: -32px; padding: 0; border: 0; background: none; cursor: pointer; }
.staff__arrow::after { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto; border: 1px solid transparent; transform: rotate(45deg); }
.staff__arrow--prev { left: -12px; }
.staff__arrow--prev::after { border-color: transparent transparent var(--accent) var(--accent); }
.staff__arrow--next { right: -12px; }
.staff__arrow--next::after { border-color: var(--accent) var(--accent) transparent transparent; }

.staff__meta { margin-bottom: 10px; }
.staff__name { margin-bottom: 5px; font-family: var(--f-serif); font-size: 1.8rem; line-height: 2.6rem; font-weight: 500; letter-spacing: .2rem; color: var(--ink-head); text-align: center; }
.staff__shop { margin-bottom: 15px; font-size: 1.2rem; line-height: 2.4rem; color: var(--accent); text-align: center; }
.staff__situation { margin-bottom: 15px; background: var(--band-2); font-size: 1.4rem; line-height: 2.5rem; font-weight: 700; color: var(--ink); text-align: center; }
.staff__time { font-size: 1.2rem; line-height: 2.2rem; color: var(--ink); text-align: center; }
.staff__treat { width: 100%; margin-top: auto; }
.staff__treat-h { margin-bottom: 14px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 1.4rem; line-height: 3.5rem; font-weight: 700; text-align: center; color: var(--ink-head); }
.staff__treat-txt { font-size: 1.2rem; line-height: 2.4rem; }

.staff__reserve { display: none; }

@media (min-width: 768px) {
  .staff { margin-bottom: 80px; }
  .staff__tab { font-size: 1.8rem; line-height: 5rem; }
  .staff__content { max-width: 980px; padding: 50px 30px 10px; }
  .staff__heading-in { font-size: 1.8rem; }
  .staff__slide { margin-bottom: 60px; }
  .staff__arrow--prev { left: -10px; }
  .staff__arrow--next { right: -10px; }
  .staff__col { padding: 25px 25px 40px; }
  .staff__meta { display: block; }
    .staff__info { width: 100%; }
  .staff__name { font-size: 1.8rem; line-height: 2.6rem; }
  .staff__shop { text-align: center; }
  .staff__situation { font-size: 1.6rem; line-height: 3rem; }
  .staff__time { font-size: 1.3rem; line-height: 2.4rem; text-align: center; }
  .staff__treat-txt { font-size: 1.4rem; line-height: 2.8rem; }
  .staff__reserve { display: block; }
  .staff__reserve-btn { position: relative; display: block; max-width: 700px; margin: 0 auto 50px; padding: 34px 5px; background: #fff; border: 1px solid var(--accent); color: var(--accent); font-size: 1.8rem; line-height: 2.8rem; letter-spacing: .3rem; text-align: center; transition: opacity .3s; }
  .staff__reserve-btn:hover { opacity: .6; }
  .staff__reserve-btn::after { content: ""; position: absolute; top: 0; bottom: 0; right: 170px; width: 10px; height: 10px; margin: auto 0; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  .staff__reserve-in { position: relative; padding-left: 44px; }
  .staff__reserve-in::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 26px; transform: translateY(-50%); background: var(--accent); -webkit-mask: url("../../assets/img/icon-line.svg") center / contain no-repeat; mask: url("../../assets/img/icon-line.svg") center / contain no-repeat; }
}
@media (min-width: 980px) { .staff { padding: 0; } .staff__contents { margin: 0; } }
@media (min-width: 768px) and (max-width: 979px) {
  .staff__contents { margin: 0 -20px; }
  .staff__reserve-btn::after { right: 60px; }
}

/* 全員が1画面に収まる幅：送らずに中央へ並べる */
.staff__slide.is-static .staff__arrow, .staff__slide.is-static .is-clone { display: none; }
.staff__slide.is-static .staff__row { justify-content: center; }
.staff__slide.is-static .staff__col { width: calc((100% - 60px) / 3); max-width: 210px; }
@media (min-width: 768px) { .staff__slide.is-static .staff__col { width: 210px; } }