@charset "UTF-8";
/* CSS Document */

@keyframes slideranim{
0%{
filter: blur(30px);
transform: scale(1.6);
opacity: 0;
}
100%{
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}

@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}


@keyframes svg {
0% {
fill: transparent;
stroke-dashoffset: 1600px;
}
80% {
fill: transparent;
}
100%{
stroke-dashoffset: 0;
fill: #FFF;
}
}


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


/*index
-----------------------------------------------*/
#departments .idx_list{
display: flex;
flex-wrap: wrap;
}

#departments .idx_list li{
width: 31.333%;
margin-right: 2%;
margin-bottom: 2%;
}

#departments .idx_list li:nth-child(3n){
margin-right: 0;
}


/*staff
-----------------------------------------------*/
#departments .staff_box{
width: 100%;
border:1px solid #ddd;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(221, 221, 221);
border-top: 2px solid #0b60b0;
padding: 29px 20px 23px;
box-sizing: border-box;
transition: .3s;
margin: 0 auto 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#departments .staff_box .staff_img_box{
width:30%;
}

#departments .staff_box .staff_img_box img{
border-radius: .6rem;
overflow: hidden;
}

#departments .staff_box .staff_txt_box{
width: 65%;
}

#departments .staff_box .staff_txt_box .name_box{
position: relative;
width:100%;
margin-bottom:30px;
}

#departments .staff_box .staff_txt_box .name_box .kana_txt{
font-size: 14px;
line-height: 1;
margin-bottom: 10px;
}

#departments .staff_box .staff_txt_box .name_box .name_txt{
font-size: 25px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
}

#departments .staff_box .staff_txt_box .name_box .pos{
font-size: 14px;
}

#departments .staff_box .staff_txt_box .keireki_box{
position: relative;
width: 100%;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box{
width: 100%;
position: relative;
margin: 0 0 40px;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box{
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box h4 {
font-size: 14px;
line-height: 1;
margin: 0 0 10px;
color: #0B60B0;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl{
display: flex;
flex-wrap: wrap;
font-size: 1rem;
margin-bottom: 40px;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl dt{
width:20%;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl dd{
width:80%;
border-left: 1px solid #d1d1d1;
box-sizing: border-box;
padding-left:1rem;
}

/*photo
-----------------------------------------------------*/
#departments .ph_list2,
#departments .ph_list3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#departments .ph_list2 li{
width: 48%;
}

#departments .ph_list3 li{
width: 31%;
}

#departments .ph_list2 li img,
#departments .ph_list3 li img{
border-radius: 1rem;
overflow: hidden;
}

#departments .ph2_list3{
display: flex;
flex-wrap: wrap;
}

#departments .ph2_list3 li{
width: 31.333%;
margin-right:3%;
margin-bottom:3%;
}

#departments .ph2_list3 li:nth-child(3n){
margin-right: 0;
}

#departments .ph2_list3 li h4{
text-align: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
margin: 10px 0 10px;
}

#departments .ph2_list3 li p{
font-size: 12px;
}

#departments .ph2_list3 li img{
border-radius: 1rem;
overflow: hidden;
}

/*img
-----------------------------------------------------*/
#departments .img10{
width: 10%;
margin: 0 auto 40px;
}

#departments .img20{
width: 20%;
margin: 0 auto 40px;
}

#departments .img30{
width: 30%;
margin: 0 auto 40px;
}

#departments .img40{
width: 40%;
margin: 0 auto 40px;
}

#departments .img50{
width: 50%;
margin: 0 auto 40px;
}

#departments .img60{
width: 60%;
margin: 0 auto 40px;
}

#departments .img70{
width: 70%;
margin: 0 auto 40px;
}

#departments .img80{
width: 80%;
margin: 0 auto 40px;
}

#departments .img90{
width: 90%;
margin: 0 auto 40px;
}

#departments .img100{
width: 100%;
margin: 0 auto 40px;
}


#departments .img_r10{
width: 10%;
float: right;
margin: 0 0 30px 30px;
}

#departments .img_r20{
width: 20%;
float: right;
margin: 0 0 30px 30px;
}

#departments .img_r30{
width: 30%;
float: right;
margin: 0 0 30px 30px;
}

#departments .img_r50{
width: 50%;
float: right;
margin: 0 0 30px 30px;
}

#departments .img_r30 img,
#departments .img_r50 img{
border-radius: 1rem;
overflow: hidden;
}

#departments .ph_list2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto 50px;
}

#departments .ph_list2 li{
width: 48%;
}

#departments .ph_list2 li p{
text-align: center;
line-height: 1;
font-weight: bold;
margin-top: 10px;
}

#departments .person_box{
width: 300px;
margin: 0 auto 60px;
position: relative;
}

#departments .person_box .alnk01{
position:absolute;
top: 30px;
right:0;
width:50%;
z-index: 1
}

#departments .person_box .alnk02{
position: absolute;
top: 160px;
right: -70px;
width: 53%;
z-index: 1;
}

#departments .person_box .alnk03{
position: absolute;
top: 210px;
left: -90px;
width: 45%;
z-index: 1;
}

#departments .person_box .alnk04{
position: absolute;
top: 240px;
left: -20px;
width: 50%;
z-index: 1;
}

#departments .person_box .alnk05{
position: absolute;
top: 280px;
right: -30px;
width: 60%;
z-index: 1;
}

#departments .person_box .alnk06{
position: absolute;
top: 340px;
right: -5px;
width: 47%;
z-index: 1;
}

#departments .person_box .alnk07{
position: absolute;
bottom: 150px;
left: -18px;
width: 50%;
z-index: 1;
}

#departments .person_box .alnk08{
position: absolute;
bottom: 0px;
left: 0;
width: 40%;
z-index: 1;
}

}
/*sp*/
@media only screen and (max-width: 767px) {

/*index
-----------------------------------------------*/
#departments .idx_list{
}

#departments .idx_list li{
width: 100%;
margin-bottom: 15px;
}

#departments .idx_list li:last-child{
margin-bottom: 0;
}

/*staff
-----------------------------------------------*/
#departments .staff_box{
width: 100%;
border:1px solid #ddd;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(221, 221, 221);
border-top: 2px solid #0b60b0;
padding: 29px 20px 23px;
box-sizing: border-box;
transition: .3s;
margin: 0 auto 30px;
}

#departments .staff_box .staff_img_box{
width:60%;
margin: 0 auto 20px;
}

#departments .staff_box .staff_img_box img{
border-radius: .6rem;
overflow: hidden;
}

#departments .staff_box .staff_txt_box{
width: 100%;
}

#departments .staff_box .staff_txt_box .name_box{
position: relative;
width:100%;
margin-bottom:30px;
}

#departments .staff_box .staff_txt_box .name_box .kana_txt{
font-size: 12px;
line-height: 1;
margin-bottom: 10px;
}

#departments .staff_box .staff_txt_box .name_box .name_txt{
font-size: 20px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
}

#departments .staff_box .staff_txt_box .name_box .pos{
font-size: 14px;
}

#departments .staff_box .staff_txt_box .keireki_box{
position: relative;
width: 100%;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box{
width: 100%;
position: relative;
margin: 0 0 40px;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box{
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box h4 {
font-size: 14px;
line-height: 1;
margin: 0 0 10px;
color: #0B60B0;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl{
font-size: 14px;
margin-bottom: 40px;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl dt{
width:100%;
border-top: 1px solid #d1d1d1;
padding-top: 5px;
}

#departments .staff_box .staff_txt_box .keireki_box .sub_box dl dd{
width:100%;
padding-bottom: 5px;
}

/*photo
-----------------------------------------------------*/
#departments .ph_list2,
#departments .ph_list3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#departments .ph_list2 li{
width: 48%;
}

#departments .ph_list3 li{
width: 31%;
}

#departments .ph_list2 li img,
#departments .ph_list3 li img{
border-radius: 1rem;
overflow: hidden;
}

#departments .ph2_list3{
display: flex;
flex-wrap: wrap;
}

#departments .ph2_list3 li{
width: 31.333%;
margin-right:3%;
margin-bottom:3%;
}

#departments .ph2_list3 li:nth-child(3n){
margin-right: 0;
}

#departments .ph2_list3 li h4{
text-align: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
margin: 10px 0 10px;
}

#departments .ph2_list3 li p{
font-size: 12px;
}

#departments .ph2_list3 li img{
border-radius: 1rem;
overflow: hidden;
}

/*img
-----------------------------------------------------*/
#departments .img10,
#departments .img20,
#departments .img30,
#departments .img40,
#departments .img50,
#departments .img60,
#departments .img70,
#departments .img80,
#departments .img90,
#departments .img100{
width: 80%;
margin: 0 auto 40px;
}



#departments .img_r10,
#departments .img_r20,
#departments .img_r30,
#departments .img_r40,
#departments .img_r50{
width: 80%;
margin: 0 auto 30px;
}

#departments .img_r10 img,
#departments .img_r20 img,
#departments .img_r30 img,
#departments .img_r40 img,
#departments .img_r50 img{
border-radius: .6rem;
overflow: hidden;
}

#departments .ph_list2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto 30px;
}

#departments .ph_list2 li{
width: 48%;
}

#departments .ph_list2 li p{
text-align: center;
line-height: 1;
font-weight: bold;
margin-top: 10px;
}

#departments .person_box{
width: 70%;
margin: 0 auto 30px;
position: relative;
}

#departments .person_box .alnk01{
position: absolute;
top: 5%;
right: 0;
width: 50%;
z-index: 1;
}

#departments .person_box .alnk02{
position: absolute;
top: 28%;
right: -24%;
width: 53%;
z-index: 1;
}

#departments .person_box .alnk03{
position: absolute;
top: 35%;
left: -30%;
width: 45%;
z-index: 1;
}

#departments .person_box .alnk04{
position: absolute;
top: 40%;
left: -5%;
width: 50%;
z-index: 1;
}

#departments .person_box .alnk05{
position: absolute;
top: 48%;
right: -10%;
width: 60%;
z-index: 1;
}

#departments .person_box .alnk06{
position: absolute;
top: 60%;
right: -2%;
width: 47%;
z-index: 1;
}

#departments .person_box .alnk07{
position: absolute;
bottom: 20%;
left: -6%;
width: 50%;
z-index: 1;
}

#departments .person_box .alnk08{
position: absolute;
bottom: 0;
left: 0;
width: 40%;
z-index: 1;
}

}