/* CSS Document */
/*ページタイトル*/
section.page_title > h1::before{
  content: "Staff";
}
/*コンテンツ*/
div.staff_wrap{
  background-color: #f2f2f5;
  width: 100vw;
}
div.staff_text_box{
  background-color: #fff;
  padding: calc(var(--headerHeight) * 1.5) 0;
  display: flex;
  box-sizing: border-box;
}
body[wc-view-type="sp"] div.staff_text_box{
  padding: var(--headerHeight) 6.5vw calc(var(--headerHeight) * 1.5) 6.5vw;
  flex-direction: column;
}
body[wc-view-type="tb-l"] div.staff_text_box{
  padding: calc(var(--headerHeight) * 1.5) 0 calc(var(--headerHeight) * 1.5) 10vw;
}
div.staff_text_box div.staff_text{
  box-sizing: border-box;
  -ms-filter: blur(4px);
  filter: blur(4px);
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out,transform 1000ms ease-out,filter 1000ms ease-out;
  transition: opacity 1000ms ease-out,transform 1000ms ease-out,filter 1000ms ease-out;
  transform: translateY(1rem);
}
div.staff_text_box div.staff_text.wcvisible{
  -ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
body[wc-view-type="tb"] div.staff_text_box div.staff_text,
body[wc-view-type="tb-l"] div.staff_text_box div.staff_text{
  width: 55%;
}
body[wc-view-type="pc"] div.staff_text_box div.staff_text{
  width: 60%;
  padding: var(--headerHeight) 0 var(--headerHeight) calc((100vw - 1100px) / 2);
}
div.staff_text_box div.staff_text > span{
  font-size: 3.5rem;
  letter-spacing: 0.5rem;
  margin-bottom: 2rem;
  color: #ebebeb;
  display: block;
}
body[wc-view-type="sp"] div.staff_text_box div.staff_text > span{
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
body[wc-view-type="tb"] div.staff_text_box div.staff_text > span{
  font-size: 2.4rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
}
body[wc-view-type="tb-l"] div.staff_text_box div.staff_text > span{
  margin-bottom: 1.5rem;
  font-size: 3rem;
}
div.staff_text_box div.staff_text > p{
  line-height: 2.5rem;
  color: #444;
  font-size: 1.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}
body[wc-view-type="sp"] div.staff_text_box div.staff_text > p{
  padding: 0;
  margin-bottom: 1rem;
  font-size: 1.35rem;
}
body[wc-view-type="tb"] div.staff_text_box div.staff_text > p{
  padding: 0 1rem 0 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
div.staff_text_box div.staff_text_img{
}
body[wc-view-type="tb"] div.staff_text_box div.staff_text_img,
body[wc-view-type="tb-l"] div.staff_text_box div.staff_text_img{
  width: 45%;
}
body[wc-view-type="pc"] div.staff_text_box div.staff_text_img{
  width: 40%;
}
div.staff_text_box div.staff_text_img figure{
}
div.staff_text_box div.staff_text_img figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
div.staff_text_box div.staff_text_img figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*スタッフ一覧*/
div.staff_wrap section.staff_block{
  padding:calc(var(--headerHeight) * 1.5) 0;
  box-sizing: border-box;
}
body[wc-view-type="sp"] div.staff_wrap section.staff_block{
  padding:calc(var(--headerHeight) * 1.5) 6.5vw;
}
body[wc-view-type="tb"] div.staff_wrap section.staff_block,
body[wc-view-type="tb-l"] div.staff_wrap section.staff_block{
  padding:calc(var(--headerHeight) * 1.5) 10vw;
}
section.staff_block > h1{
  font-size: 1.35rem;
  color: #444;
  font-weight: 400;
  text-align: center;
  margin-bottom: 2.5rem;
  -ms-filter: blur(4px);
  filter: blur(4px);
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out;
  transition: opacity 1000ms ease-out;
}
section.staff_block > h1.wcvisible{
  -ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
}
body[wc-view-type="sp"] section.staff_block > h1{
  margin-bottom: 1.5rem;
}
body[wc-view-type="pc"] section.staff_block > h1{
}
section.staff_block > h1::before{
  content: "Staff";
  display: block;
  color: #444;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1em;
  margin-bottom: 1rem;
}


div.staff_list{
  display: flex;
  flex-wrap: wrap;
}
body[wc-view-type="sp"] div.staff_list{
  flex-direction: column;
}
body[wc-view-type="pc"] div.staff_list{
  width: 1100px;
  margin: 0 auto;
}
div.staff_list div.staff_box{
  padding: 1.5rem;
  background: -moz-linear-gradient(top, rgba(253,253,253,1) 0%, rgba(253,253,253,0) 100%);
  background: -webkit-linear-gradient(top, rgba(253,253,253,1) 0%,rgba(253,253,253,0) 100%);
  background: linear-gradient(to bottom, rgba(253,253,253,1) 0%,rgba(253,253,253,0) 100%);
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  -ms-filter: blur(4px);
  filter: blur(4px);
  opacity: 0;
  -webkit-transition: opacity 1000ms ease-out,transform 1000ms ease-out,filter 1000ms ease-out;
  transition: opacity 1000ms ease-out,transform 1000ms ease-out,filter 1000ms ease-out;
  transform: translateY(1rem);
}
div.staff_list div.staff_box.wcvisible{
  -ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
body[wc-view-type="sp"] div.staff_list div.staff_box{
  padding: 1rem;
  margin-bottom: 1.5rem;
}
body[wc-view-type="sp"] div.staff_list div.staff_box:last-of-type{
  margin-bottom: 0;
}
body[wc-view-type="tb"] div.staff_list div.staff_box,
body[wc-view-type="tb-l"] div.staff_list div.staff_box{
  margin-bottom: 2rem;
}
body[wc-view-type="tb"] div.staff_list div.staff_box:last-of-type,
body[wc-view-type="tb-l"] div.staff_list div.staff_box:last-of-type{
  margin-bottom: 0;
}
body[wc-view-type="tb-l"] div.staff_list div.staff_box{
 width: 100%;
}
body[wc-view-type="pc"] div.staff_list div.staff_box{
  width: calc((100% / 2) - 1.5rem);
}
body[wc-view-type="pc"] div.staff_list div.staff_box:nth-of-type(odd){
  margin-right: 1.5rem;
  margin-bottom: 3rem;
}
body[wc-view-type="pc"] div.staff_list div.staff_box:nth-of-type(even){
  margin-left: 1.5rem;
  margin-bottom: 3rem;
}
div.staff_list div.staff_box div.staff_top{
  display: flex;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top{
}
body[wc-view-type="pc"] div.staff_list div.staff_box div.staff_top{
}
div.staff_list div.staff_box div.staff_top figure{
  width: 164px;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top figure{
  width: 115px;
}
body[wc-view-type="pc"] div.staff_list div.staff_box div.staff_top figure{
}
div.staff_list div.staff_box div.staff_top figure picture{
  width: 100%;
  height: 100%;
  display: block;
}
div.staff_list div.staff_box div.staff_top figure img{
  width: 100%;
  height: 219px !important;
  object-fit: cover;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top figure img{
  height: 153px !important;
}
div.staff_list div.staff_box div.staff_top div.staff_info{
  width: calc(100% - 164px);
  padding: 1.8rem 1.5rem;
  box-sizing: border-box;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top div.staff_info{
  width: calc(100% - 115px);
  padding: 0.5rem 0 0 1rem;
}
body[wc-view-type="tb"] div.staff_list div.staff_box div.staff_top div.staff_info,
body[wc-view-type="tb-l"] div.staff_list div.staff_box div.staff_top div.staff_info{
  padding:1.5rem 0 1.5rem 1.5rem;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name{
  display: flex;
  flex-direction: column;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top div.staff_info div.name{
  margin-bottom: 0.75rem;
}
body[wc-view-type="tb"] div.staff_list div.staff_box div.staff_top div.staff_info div.name{
  margin-bottom: 0.75rem;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.name{
  font-size: 1.25rem;
  color: #444;
  margin-bottom: 0.5rem;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top div.staff_info div.name span.name{
  font-size: 1.15rem;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free{
}
body[wc-view-type="tb-l"] div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free{
  margin-bottom: 0.5rem;
}
body[wc-view-type="pc"] div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free{
  margin-bottom: 0.75rem;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free > span{
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
  color: #444;
  display: table;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free > span::before,
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free > span::after{
  position: absolute;
  z-index: 2;
  color: #444;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free > span::before{
  content: "[";
  left: 0;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.name span.free > span::after{
  content: "]";
  right: 0;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.message{
  padding: 0.75rem;
  box-sizing: border-box;
  color: #444;
  font-size: 0.9rem;
  background-color: #f2f2f5;
  border: dashed 1px #b5b5b5;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_top div.staff_info div.message{
  padding: 0.5rem;
}
div.staff_list div.staff_box div.staff_top div.staff_info div.message > p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 4;
  word-break: break-all;
}
div.staff_list div.staff_box div.staff_bottom{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_bottom div.btn a{
  padding: 0.65rem 1.8rem 0.65rem 1rem;
}
div.staff_list div.staff_box div.staff_bottom div.btn.yoyaku a::before{
  display: none;
}
div.staff_list div.staff_box div.staff_bottom div.btn.yoyaku a::after{
  background-color: #fff;
}
body[wc-view-type="sp"] div.staff_list div.staff_box div.staff_bottom div.btn.yoyaku a::after{
  right: 0.35rem;
}