@charset "utf-8";
/*専門店スタッフ カセット専用CSS*/
#staff {
  background: var(--staff-waku-bg, #fdeab9);
}
#staff .section__inner {
  padding: var(--staff-inner-yohaku, min((66vw/ 7.5), 60px) 0);
}
/*↓staff__titleは現状ディズニーのスタイル。ページ毎にかわるようであればベースからは削除OK↓*/
.staff__title {
  font-size: var(--staff-title-fs, min((42vw / 7.5), 30px));
  line-height: var(--staff-title-lh, calc(52 / 42));
  font-weight: var(--staff-title-fw, bold);
  text-align: var(--staff-title-align, center);
  .is-pc & {
    display: grid;
    grid-template-columns: 1em auto 1em;
    justify-items: center;
    justify-content: center;
    gap: 0 .5em;
    align-items: baseline;
    &::before, &::after {
      content: "";
      width: 2px;
      height: 1.05em;
      background: currentColor;
      transform: rotate(var(--deg, 45deg)) translateY(.2em);
    }
    &::before {
      --deg: -45deg;
    }
  }
  .is-sp & {
    .base-title__text--main {
      display: block;
    }
  }
}
/*↑staff__titleは現状ディズニーのスタイル。ページ毎にかわるようであればベースからは削除OK↑*/
.staff__lead {
  text-align: var(--staff-lead-align, center);
  font-weight: var(--staff-lead-fw, bold);
  font-size: var(--staff-lead-fs, min((24vw / 7.5), 16px));
  line-height: var(--staff-lead-lh, calc(22 / 16));
  margin: var(--staff-lead-yohaku, var(--staff-lead-yohaku-ue, min((60vw / 7.5), 40px)) 0 var(--staff-lead-yohaku-sita, min((65vw / 7.5), 40px)));
}
.staff__title + .staff__lead {
  margin-top: var(--staff-lead-before-yohaku-ue, .5em);
}
.staff__list {
  --between: var(--staff-list-between, min((50vw/ 7.5), 48px));
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--between);
  margin: auto;
  .is-pc & {
    /*--between: 48px;*/
    grid-template-columns: repeat(auto-fit, calc((100% - var(--between) * 3) / 4));
    max-width: var(--staff-list-width-column4, 944px);
    &.is-column-3 {
      grid-template-columns: repeat(auto-fit, calc((100% - var(--between) * 2) / 3));
      max-width: var(--staff-list-width-column3, 696px);
    }
  }
  :not(:has(.is-pc)) & {
    @media (min-width: 861px) {
      /*--between: 48px;*/
      grid-template-columns: repeat(auto-fit, calc((100% - var(--between) * 3) / 4));
      max-width: var(--staff-list-width-column4, 944px);
      &.is-column-3 {
        grid-template-columns: repeat(auto-fit, calc((100% - var(--between) * 2) / 3));
        max-width: var(--staff-list-width-column3, 696px);
      }
    }
  }
}
.staff__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  grid-template-areas:
    "photo"
    "comment"
    "name"
    "achievement"
    "btn";
  gap: 0;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}
.staff__item--name {
  grid-area: name;
  margin-bottom: .5em;
  display: grid;
  gap: .25em;
}
.staff__item--name--main {
  font-size: min((30vw / 7.5), 22px);
}
.staff__item--name--sub {
  font-size: min((18vw / 7.5), 12px);
  line-height: calc(22 / 18);
  border: 1px solid;
  padding: .25em;
  text-align: center;
}
.staff__item--comment {
  grid-area: comment;
  font-size: min((20vw / 7.5), 14px);
  color: #2c5ea8;
  line-height: calc(16 / 14);
  display: grid;
  align-items: center;
  margin: .5em 0 .1em;
}
.staff__item--photo {
  grid-area: photo;
  width: 100%;
}
.staff__item--photo--image {
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.staff__item--achievement {
  grid-area: achievement;
  font-size: min((18vw / 7.5), 12px);
  line-height: calc(22 /18);
  padding-bottom: min((20vw / 7.5), 15px);
}
.staff__item--button {
  grid-area: btn;
}
.staff__item--button--link {
  display: grid;
  align-items: center;
  grid-template-columns: var(--staff-btn-columns, 1fr);
  background: var(--staff-btn-bg, #f39800);
  font-size: var(--staff-btn-fs, min((20vw / 7.5), 16px));
  line-height: var(--staff-btn-lh, 1);
  color: var(--staff-btn-fc, #fff);
  border-radius: var(--staff-btn-radius, min((8vw / 7.5), 8px));
  border: none;
  min-height: var(--staff-btn-height, min((48vw / 7.5), 40px));
  min-width: 100%;
  padding: var(--staff-btn-yohaku, .4em var(--staff-btn-yohaku-yoko, 1em) .5em);
  &.is-icon {
    --staff-btn-icon-size: 1em;
    --staff-btn-columns: 1fr auto;
    .staff__item--button--text {
      padding-left: var(--staff-btn-icon-size);
    }
    &::after {
      content: "";
      width: var(--staff-btn-icon-size);
      aspect-ratio: 1 / 1;
      background: var(--staff-btn-icon-img, url("/cmn/icon/icon_launch_white.svg")) no-repeat center center / cover;
    }
  }
}