@charset "utf-8";

.gjs-dashed .modal {
    opacity: 1 !important;
    position: relative;
    display: block;
}

.gjs-dashed .staff-grid {
   grid-template-columns: repeat(1, 1fr);
}

.gjs-dashed .staff-item {
    max-width: 1200px;
    display: flex;
}

.gjs-dashed .intModal01 {
    transform: translate(0,0%) !important;
    /*height: 80px;*/
	/*height: 460px;*/
}

.gjs-dashed .modal-dialog-centered {
        min-height: auto;
    }

.gjs-dashed .modal-dialog-centered::before {
    height: auto;
}

.staff-item {
    position: relative;
    box-shadow: 0 0 40px rgba(38, 24, 0, .2);
    max-width: 400px;
    margin: 0 auto;
  	transition: .3s;
}

.staff-item:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, .2);
  	transition: .3s;
}

.staffItem .modal {
	padding: 15px 0;
}

/*.modal {
	bottom: auto !important;
}*/

.modal, .modal-open {
    padding-right: 0 !important;
}

.modal-backdrop {
    z-index: 999999990 !important;
}

.modal {
    z-index: 999999999 !important;
}

.modal.show {
  	display: flex !important;
    align-items: center;
    justify-content: center;
	top: 0;
    bottom: 0;
    padding: 0;
    /*background: rgba(0, 0, 0, .5);*/
}

.modalBtn {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    background: #FAF8F5;
    padding: 10px 10px 18px;
}

.staff-name-box {
    font-family: var(--font-family03);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.03em;
    margin: 17px 0 0;
	padding: 0 18px;
    position: relative;
}

.staff-name-box:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 15px;
	height: 13px;
    transform: translateY(-50%);
    z-index: 1;
}

.staff-name-box.arrow-pink:after {
    background: url(/system_panel/uploads/images/arrow-right-pink.svg) no-repeat center / contain;
}

.staff-name-box.arrow-blue:after {
    background: url(/system_panel/uploads/images/n-arrow-right-blue.svg) no-repeat center / contain;
}

.modal-content {
	background: #FAF8F5;
	width: 100%;
	margin: 0 auto;
	height: 85vh;
}

.modal-dialog-centered::before {
    content: none;
}

.inModalBody {
    padding: 40px 4% 30px 4%;
    overflow-y: auto;
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
}

.in-modal-box {
    position: relative;
}

.in-modal-box-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.modalCloseBtn {
    max-width: 30px;
    width: 100%;
    height: 30px;
    /* border: 1px solid #333; */
    /* border-radius: 100vmax; */
    /* background: #333; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 99999;
}

.modalCloseBtn > div {
    width: 100%;
    height: 1px;
    background: var(--base-body-color);
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    transition: .5s;
}

.modalCloseBtn > div:nth-child(1) {
	top: 50%;
	transform: rotate(135deg) translateY(-50%);
}

.modalCloseBtn > div:nth-child(2) {
	top: 50%;
	transform: rotate(-135deg) translateY(-50%);
}

.intModal01 {
    max-width: 1000px;
    width: 96%;
    margin: auto auto auto auto;
}

.in-modal-left {
    width: 100%;
    max-width: 380px;
}

.in-modal-right {
    width: 100%;
    margin: 30px 0 0;
}

.staffItemImgBox {
    width: 100%;
    padding: 133.33% 0 0;
    position: relative;
    background: rgba(208,196,185,0.4);
    overflow: hidden;
    transition: all .5s;
}

.staffItemImgBox>img {
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    max-height: 100%;
    height: auto;
    max-width: 100%;
    width: auto;
    bottom: 0;
    left: 0;
    margin: auto;
}

.staffItemImgBox:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    transition: all .5s;
}

.staff-name-row {
  	display: flex;
    flex-direction: row;
    align-items: center;
}
  
.in-staff-name {
    font-family: var(--font-family03);
    font-size: 35px;
    font-weight: 300;
    letter-spacing: 0.03em;
    margin: 0 18px 0 0;
    position: relative;
}

.in-modal-text-box {
	margin: 37px 0 0;
	line-height: 2.2;
}

.in-modal-grid {
  	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 30px 0 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:576px) {

.in-modal-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 30px 0 0;
}
  
.staff-name-box {
    font-size: 25px;
}
  
.modalCloseBtn {
    top: -20px;
}
  
} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:768px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.staffItemWr {
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.in-modal-box-row {
    flex-direction: row;
    align-items: center;
}

.in-modal-left {
    width: 42%;
}

.in-modal-right {
    width: 53%;
    max-width: 480px;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.staffNameFlex {
    align-items: flex-end;
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */