@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* staff -------------------------------------*/
.main-ttl-box {
   background: url(../images/staff/main-ttl-bg.jpg) no-repeat center;
   background-size: cover;
   height: calc(772 / 1920 * 100vw);
}
   
#staff .system-list {
   display: grid;
   gap: 24px 24px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-inline: auto;
   max-width: 1200px;
   width: 95%;
   padding-bottom: 80px;
}

#staff .system-list li:hover img {transform: scale(1.1);}
#staff .system-list li a:hover{ text-decoration: none; }
#staff .system-list .btn{ text-align: center; background: #333; color: #fff; font-size: 14px; position: absolute; bottom: 10px; left: 13px; width: 90%; padding: 5% 0%;}
#staff .system-list .btn::after { content: ' >';}
#staff .system-pic{ width: 100%; height: 220px; margin-bottom: 15px; overflow: hidden; text-align: center; }
#staff .system-pic img{ width: 100%; height: 100%;object-fit: cover;transition: all 0.5s ease-in-out; }
#staff .system-job{ font-size: 16px; margin-bottom: 5px; line-height: 1.4; text-align: center;}
#staff .system-name{font-size: 16px;margin-bottom: 10px;line-height: 1.4;text-align: center;font-weight: bold;}
#staff .system-en-name{font-size: 14px;margin-bottom: 10px;line-height: 1.4;text-align: center;}
#staff .system-dl {
   display: grid;
   grid-template-columns: 30% 1fr;
   gap: 10px;
}

#staff .system-contents{padding: 40px;margin-bottom: 30px;}
#staff .system-contents-inner { background: #fff; padding: 80px;}
#staff .system-contents .system-info { width: 46%; float: left; }
#staff .system-contents .system-job{font-size: 16px;margin-bottom: 15px;line-height: 1.4;padding-bottom: 30px;text-align: left;}
#staff .system-contents .system-name{ font-size: 32px; line-height: 1.4; text-align: left;}
#staff .system-contents .system-en-name{font-size: 14px;margin-bottom: 10px;line-height: 1.4;text-align: left;}
#staff .system-contents .system-kana{ font-size: 16px; margin-bottom: 15px; line-height: 1.4; }
#staff .system-contents .system-comment{ font-size: 16px; margin-bottom: 25px; line-height: 1.6; }
#staff .system-contents .num-bx{/* width: 46%; *//* float: left; */padding-top: 90px;}
#staff .system-contents .staff-info-box {
   margin-inline: auto;
   display: grid;
   gap: 10px;
}
#staff .system-dl dt{
   font-weight: bold;
}

#staff-anchor {
   position: relative;
   top: 0;
   height: 0;
   display: block;
}


}



/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {

/* staff -------------------------------------*/
.main-ttl-box {
   background: url(../images/staff/main-ttl-bg_sp.jpg) no-repeat center;
   background-size: cover;
   height: 66.43vw;
}
   
#staff .system-list{padding: 4vw 2vw;margin-bottom: 10vw;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
}
#staff .system-list li{position: relative;line-height: 1.4;background: #fff;}
#staff .system-list li a:hover{ text-decoration: none; }
#staff .system-list li .system-ttl{font-size: 3.6vw;font-weight: 700;text-align: center;}
#staff .system-list .btn{ text-align: center; background: #333; color: #fff; font-size: 3.2vw; position: absolute; bottom: 3vw; left: 3vw; width: 95vw; padding:4vw 3vw;}
#staff .system-list .btn::after { content: ' >';}
#staff .system-pic{width: 100%;height: 35vw;overflow: hidden;text-align: center;margin-bottom: 3vw;}
#staff .system-pic img{width: 100%;height: 35vw;}
#staff .system-job{ font-size: 3.4vw; line-height: 1.6; text-align: center;}
#staff .system-name{font-size: 3.8vw;font-weight: bold;margin-bottom: 2vw;line-height: 1.6;text-align: center;}
#staff .system-en-name{font-size: 3.4vw;margin-bottom: 1vw;line-height: 1.6;text-align: center;}

#staff .system-list02{ background: #eeefef; padding: 4vw 2vw; margin-bottom: 10vw; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#staff .system-list02 li{ position: relative; line-height: 1.4; width: 49%; margin-right: 2%; background: #fff; position: relative; margin-bottom: 5vw; padding: 2vw 2vw 2vw;}
#staff .system-list02 li:nth-child(2n){ margin-right: 0}
#staff .system-list02 li a:hover{ text-decoration: none; }
#staff .system-list02 .btn{ text-align: center; background: #333; color: #fff; font-size: 3.2vw; position: absolute; bottom: 0; left: 0; width: 100%; padding: 3vw;}
#staff .system-list02 .btn::after { content: ' >';}
#staff .system-list02 .system-ttl-01{font-size: 3.8vw; font-weight: bold; margin-bottom: 5vw; line-height: 1.6; text-align: center;}

#staff .system-contents{padding: 4vw 2vw;margin-bottom: 10vw;}
#staff .system-contents-inner { background: #fff; padding: 5vw 3vw;}
#staff .system-contents .system-ttl{font-size: 5.2vw;font-weight: bold;margin-bottom: 2vw;padding-bottom: 3vw;border-bottom: 0.2vw #ccc solid;line-height: 1.4;text-align: center;}
#staff .system-contents .system-info-box{ display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#staff .system-contents .system-info{ width: 100%; }
#staff .system-contents .system-job{ font-size: 3.4vw; margin-bottom: 1vw; line-height: 1.6;}
#staff .system-contents .system-name{ font-size: 4.2vw; margin-bottom: 5vw; line-height: 1.6; padding-bottom: 3vw; border-bottom: 0.2vw solid #ccc;}
#staff .system-contents .system-kana{ font-size: 3.2vw; margin-bottom: 3vw; line-height: 1.6; }
#staff .system-contents .system-comment{ font-size: 3.8vw; margin-bottom: 5vw; line-height: 1.6;}
#staff .system-contents .comment-bx{ margin-bottom: 3vw;}
#staff .system-contents .comment-bx table{ }
#staff .system-contents .comment-bx tbody{ }
#staff .system-contents .comment-bx tr{ }
#staff .system-contents .comment-bx th{width: 30vw; font-size: 3.2vw; letter-spacing: 0.2vw; border: 0.2vw solid #ccc; padding: 3vw; background: #949494; color: #fff; vertical-align: middle; text-align: left;}
#staff .system-contents .comment-bx td{width: 55vw; font-size: 3.2vw; border: 0.2vw solid #ccc; padding: 3vw; vertical-align: middle;}
#staff .system-contents .system-i-pic{ width: 100%; text-align: center; margin: 0 auto 8vw; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; }
#staff .system-contents .system-i-pic img{ max-width: 100%; max-height: 60vw; width: auto; height: auto; }
#staff .system-contents .wys-ttl{ width: 100%; margin: 3vw auto; padding: 3vw; font-size: 3.8vw; color: #959595; font-weight: bold; background: #f1f1f1;}

#staff .system-contents1{ background: #eeefef; padding: 4vw 2vw; margin-bottom: 10vw; }
#staff .system-contents1-inner { background: #fff; padding: 5vw 3vw;}
#staff .system-contents1 .system-ttl{ font-size: 4.2vw; font-weight: bold;  margin-bottom: 8vw; padding-bottom: 8vw; border-bottom: 0.2vw #ccc solid; line-height: 1.4; }
#staff .system-contents1 .system-info-box{ display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#staff .system-contents1 .system-info{ width: 100%; }
#staff .system-contents1 .system-job{  font-size: 3.4vw; margin-bottom: 1vw; line-height: 1.6;}
#staff .system-contents1 .system-name{ font-size: 4.2vw; margin-bottom: 5vw; line-height: 1.6; padding-bottom: 3vw; border-bottom: 0.2vw solid #ccc;}
#staff .system-contents1 .system-kana{ font-size: 3.2vw; margin-bottom: 3vw; line-height: 1.6; }
#staff .system-contents1 .system-comment{ font-size: 3.8vw; margin-bottom: 5vw; line-height: 1.6;}
#staff .system-contents1 .comment-bx{ }
#staff .system-contents1 .comment-bx table{ }
#staff .system-contents1 .comment-bx tbody{ }
#staff .system-contents1 .comment-bx tr{ }
#staff .system-contents1 .comment-bx th{width: 30vw; font-size: 3.2vw; letter-spacing: 0.2vw; border: 0.2vw solid #ccc; padding: 3vw; background: #949494; color: #fff; vertical-align: middle; text-align: left;}
#staff .system-contents1 .comment-bx td{width: 55vw; font-size: 3.2vw; border: 0.2vw solid #ccc; padding: 3vw; vertical-align: middle;}
#staff .system-contents1 .system-i-pic{ width: 100%; text-align: center; margin: 0 auto 8vw; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -webkit-flex-order: -1; -moz-flex-order: -1; -webkit-order: -1; -moz-order: -1; order: -1; }
#staff .system-contents1 .system-i-pic img{ max-width: 100%; max-height: 60vw; width: auto; height: auto;  }
#staff .system-contents1 .wys-ttl{ width: 100%; margin: 3vw auto; padding: 3vw; font-size: 3.8vw; color: #959595; font-weight: bold; background: #f1f1f1;}

#staff .system-dl {
   margin: 0 0 2vw;
}
#staff .system-dl dt{
   font-weight: bold;
}

#staff-anchor {
   position: relative;
   top: 0;
   height: 0;
   display: block;
}

}