.staff { background: #F7F7F7; }
.staff .page__title::before { content: "Staff"; }
.staff__list { display: grid; gap: 10rem 5rem; padding: 5rem 5rem 8rem; }
@media screen and (min-width: 1025px) { .staff__list { grid-template-columns: 1fr 1fr 1fr; } }
.staff__item { position: relative; }
.staff__position { position: absolute; top: .5rem; left: -1rem; padding: 1rem; color: #fff; font-size: 1rem; background: #222; }
.staff__wrap { position: absolute; bottom: -3rem; right: 0; padding: 2rem; width: 90%; font-size: 2rem; background: #fff; }
.staff__name { margin-bottom: 1rem; font-weight: bold; }
.staff__kana { color: #aaa; font-size: 1rem; }
.staff__btn { position: absolute; bottom: 0; right: 0; padding: 0; width: 3rem; height: 3rem; color: #fff; font-size: 1.5rem; background: #222; border: none; }

.popup { display: flex; justify-content: center; align-items: center; padding: 3rem 0; background: #333; }
.popup__wrap { position: relative; background: #fff; }
@media screen and (min-width: 1025px) { .popup__wrap { display: flex; } }
@media screen and (min-width: 1025px) { .popup__fig { width: 50%; height: auto; } }
.popup__cmt { padding: 2rem; text-align: center; }
@media screen and (min-width: 1025px) { .popup__cmt { position: relative; padding: 3rem; width: 50%; height: auto; text-align: left; } }
.popup__position { display: inline-block; margin-bottom: 2rem; padding: 1rem; color: #fff; font-size: 1rem; background: #222; }
@media screen and (min-width: 1025px) { .popup__position { margin-bottom: 3rem; } }
.popup__name { margin-bottom: .5rem; font-size: 1.6rem; }
@media screen and (min-width: 1025px) { .popup__name { margin-bottom: 1rem; font-size: 2rem; font-weight: bold; } }
.popup__kana { margin-bottom: 2rem; color: #aaa; font-size: 1rem; }
@media screen and (min-width: 1025px) { .popup__kana { margin-bottom: 3rem; } }
.popup__txt { font-size: 1.2rem; line-height: 2; text-align: left; max-height: calc(100vh - 100vw - 12.6rem); overflow-y: scroll; }
@media screen and (min-width: 1025px) { .popup__txt { font-size: 1.4rem; } }
.popup__btn { position: absolute; top: 0rem; right: 0; padding: 0; width: 3rem; height: 3rem; font-size: 1.5rem; background: #fff; border: none; }
@media screen and (min-width: 1025px) { .popup__btn { top: -6rem; width: 6rem; height: 6rem; font-size: 3rem; } }

.close .popup { height: 0; overflow: hidden; }
.close .popup__wrap { opacity: 0; }

.open .popup { position: fixed; top: 0; left: 0; z-index: 10; height: 100vh; width: 100vw; }
.open .popup__wrap { opacity: 1; transition: all .5s ease; width: calc( 100% - 6rem ); }
@media screen and (min-width: 1025px) { .open .popup__wrap { width: 96rem; } }