@charset "UTF-8";
/*===============================
scss 変数ファイル
================================*/
/*
カラー
================================*/
/*
メディアクエリ
================================*/
#staff .pageHeading {
 /*background-image: url("../../images/page/staff/p_staff_back.jpg");*/
}
#staff .p_staff__container {
 padding: 50px 0px;
 background-color: #333333;
}
#staff .p_staff__container__newsList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
#staff .p_staff__container__newsList .item {
 width: calc(50% - 10px);
 margin-right: 20px;
 margin-top: 20px;
 /* モーダルアニメーション */
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item {
  width: calc(33.3% - 20px);
  margin-right: 30px;
  margin-top: 30px;
 }
}
@media screen and (min-width: 768px) {
 #staff .p_staff__container__newsList .item {
  width: calc(33.3% - 33.3px);
  margin-right: 50px;
  margin-top: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #staff .p_staff__container__newsList .item {
  width: calc(25% - 37.5px);
 }
}
#staff .p_staff__container__newsList .item:nth-child(-n + 2) {
 margin-top: 0;
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item:nth-child(-n + 3) {
  margin-top: 0;
 }
}
@media screen and (min-width: 1024px) {
 #staff .p_staff__container__newsList .item:nth-child(-n + 4) {
  margin-top: 0;
 }
}
#staff .p_staff__container__newsList .item:nth-child(2n) {
 margin-right: 0;
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item:nth-child(2n) {
  margin-right: 30px;
 }
}
@media screen and (min-width: 768px) {
 #staff .p_staff__container__newsList .item:nth-child(2n) {
  margin-right: 50px;
 }
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item:nth-child(3n) {
  margin-right: 0;
 }
}
@media screen and (min-width: 1024px) {
 #staff .p_staff__container__newsList .item:nth-child(3n) {
  margin-right: 50px;
 }
}
@media screen and (min-width: 1024px) {
 #staff .p_staff__container__newsList .item:nth-child(4n) {
  margin-right: 0;
 }
}
#staff .p_staff__container__newsList .item .modal__overlay {
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 background: rgba(0, 0, 0, 0.6);
 bottom: 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 z-index: 100;
}
#staff .p_staff__container__newsList .item .modal__overlay .modal__container {
 background-color: #fff;
 max-height: 80vh;
 max-width: 1000px;
 overflow-y: auto;
 padding: 30px;
 width: 80%;
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item .modal__overlay .modal__container {
  padding: 50px;
 }
}
@media screen and (min-width: 768px) {
 #staff .p_staff__container__newsList .item .modal__overlay .modal__container {
  padding: 80px;
  width: 85%;
 }
}
@media screen and (min-width: 1024px) {
 #staff .p_staff__container__newsList .item .modal__overlay .modal__container {
  width: 85%;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__header {
 position: relative;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__header:before {
 display: none;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__header
 .modal__close {
 position: absolute;
 top: 0;
 right: 0;
 background: transparent;
 border: 0;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__header
 .modal__close:before {
 content: "✕";
 font-size: 2rem;
 color: #20427b;
}
@media screen and (min-width: 1024px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__img {
 text-align: center;
}
@media screen and (min-width: 1024px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img {
  width: 250px;
  margin-right: 80px;
 }
}
@media screen and (min-width: 1200px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img {
  width: 300px;
  margin-right: 100px;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__img
 img {
 max-width: 140px;
}
@media screen and (min-width: 640px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img
  img {
  max-width: 160px;
 }
}
@media screen and (min-width: 768px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img
  img {
  max-width: 200px;
 }
}
@media screen and (min-width: 1024px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img
  img {
  max-width: 250px;
 }
}
@media screen and (min-width: 1200px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__img
  img {
  max-width: 300px;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text {
 margin-top: 30px;
}
@media screen and (min-width: 1024px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text {
  margin-top: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__title,
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__name {
 text-align: center;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__title {
 font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__title {
  font-size: 1.8rem;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__name {
 margin-top: 15px;
 font-weight: 900;
 font-size: 2.2rem;
 color: #20427b;
}
@media screen and (min-width: 768px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__name {
  margin-top: 20px;
  font-size: 2.6rem;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList {
 margin-top: 30px;
 font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__infoList {
  margin-top: 50px;
  font-size: 1.6rem;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl {
 padding-bottom: 15px;
 border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 640px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__infoList
  dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl:not(:first-child) {
 margin-top: 25px;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl
 dt {
 font-weight: bold;
}
@media screen and (min-width: 640px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__infoList
  dl
  dt {
  width: 70px;
  margin-right: 30px;
 }
}
@media screen and (min-width: 768px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__infoList
  dl
  dt {
  margin-right: 50px;
  width: 80px;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl
 dd {
 margin-top: 15px;
 line-height: 1.6em;
}
@media screen and (min-width: 640px) {
 #staff
  .p_staff__container__newsList
  .item
  .modal__overlay
  .modal__container
  .modal__content
  .modal__content__staff__text__infoList
  dl
  dd {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  margin-top: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
 }
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl
 dd
 ul
 li:not(:first-child) {
 margin-top: 10px;
}
#staff
 .p_staff__container__newsList
 .item
 .modal__overlay
 .modal__container
 .modal__content
 .modal__content__staff__text__infoList
 dl
 dd
 .paragraphs {
 margin-top: -7px;
}
#staff .p_staff__container__newsList .item .modal__open {
 display: block;
}
#staff .p_staff__container__newsList .item .modal__open .staff__img {
 position: relative;
}
#staff .p_staff__container__newsList .item .modal__open .staff__text {
 margin-top: 15px;
 color: #ffffff;
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item .modal__open .staff__text {
  margin-top: 20px;
 }
}
#staff .p_staff__container__newsList .item .modal__open .staff__text__name {
 margin-top: 10px;
 font-size: 1.6rem;
 font-weight: 900;
}
@media screen and (min-width: 640px) {
 #staff .p_staff__container__newsList .item .modal__open .staff__text__name {
  font-size: 1.8rem;
 }
}
@media screen and (min-width: 768px) {
 #staff .p_staff__container__newsList .item .modal__open .staff__text__name {
  margin-top: 15px;
  font-size: 2rem;
 }
}
#staff .p_staff__container__newsList .item .micromodal-slide {
 display: none;
}
#staff .p_staff__container__newsList .item .micromodal-slide.is-open {
 display: block;
}
#staff
 .p_staff__container__newsList
 .item
 .micromodal-slide[aria-hidden="false"]
 .modal__overlay {
 -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
 animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#staff
 .p_staff__container__newsList
 .item
 .micromodal-slide[aria-hidden="false"]
 .modal__container {
 -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
 animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#staff
 .p_staff__container__newsList
 .item
 .micromodal-slide[aria-hidden="true"]
 .modal__overlay {
 -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
 animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#staff
 .p_staff__container__newsList
 .item
 .micromodal-slide[aria-hidden="true"]
 .modal__container {
 -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
 animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#staff .p_staff__container__newsList .item .micromodal-slide .modal__container,
#staff .p_staff__container__newsList .item .micromodal-slide .modal__overlay {
 will-change: transform;
}
@-webkit-keyframes mmfadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
@keyframes mmfadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
@-webkit-keyframes mmfadeOut {
 from {
  opacity: 1;
 }
 to {
  opacity: 0;
 }
}
@keyframes mmfadeOut {
 from {
  opacity: 1;
 }
 to {
  opacity: 0;
 }
}
@-webkit-keyframes mmslideIn {
 from {
  -webkit-transform: translateY(15%);
  transform: translateY(15%);
 }
 to {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}
@keyframes mmslideIn {
 from {
  -webkit-transform: translateY(15%);
  transform: translateY(15%);
 }
 to {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
}
@-webkit-keyframes mmslideOut {
 from {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
 to {
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
 }
}
@keyframes mmslideOut {
 from {
  -webkit-transform: translateY(0);
  transform: translateY(0);
 }
 to {
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
 }
}
