@charset "UTF-8";
@media screen and (min-width: 768px),print {

.main-title{background: url(../images/resident/h1.png)no-repeat top right;margin-bottom: -226px;z-index: 3;position: relative;}

#staff{background: url(../images/resident/contentsmain-back01.png)no-repeat top center;padding: 676px 0 150px;margin: 0 0 -150px 0;}



#resident{ }
#resident .system-list {max-width: 1400px;width: 100%;min-width: 1280px;margin: 0 auto;position: relative;display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#resident .system-list li{width: 22.9%;position: relative;margin-right: 2.8%;margin-bottom: -3%;cursor: pointer;}
#resident .system-list li:nth-child(4),#resident .system-list li:nth-child(11),#resident .system-list li:nth-child(18){margin-right: 0;}
#resident .system-list li:nth-child(5),#resident .system-list li:nth-child(12),#resident .system-list li:nth-child(19){ margin-left: 12.8%; }
#resident .system-list li .system-pic{  }
#resident .system-list li .system-pic img{width: 100%;height: auto;filter: drop-shadow(0px 8px 24px #19191999);}
#resident .system-list li .wkstext{font-size: 14px;line-height: 1.6;letter-spacing: 0.7px;font-weight: 500;position: absolute;top: 421px;text-align: center;width: 320px;}
#resident .system-list li .system-ttl-01{font-size: 24px;line-height: 1.6;letter-spacing: 0.8px;font-weight: 500;position: absolute;top: 447px;width: 320px;text-align: center;}
#resident .system-list li .system-ttl-01::before{content: "";background: #fff;width: 24px;height: 1px;position: absolute;left: 50%;bottom: -7px;transform: translateX(-50%);}
#resident .system-list li .wkstext2{font-size: 16px;line-height: 30px;letter-spacing: 0.8px;font-weight: 500;width: 260px;position: absolute;top: 508px;left: 30px;}
#resident .system-list li .wkstext2 span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#resident .system-list li a:hover{ text-decoration: none;}
#resident .system-list li .arr{color: #00B7FF;font-size: 16px;line-height: 1.6;letter-spacing: -0.96px;font-weight: 600;font-style: italic;text-decoration: underline;position: absolute;top: 623px;left: 119px;}


#resident .open-box {display: none;z-index: 4;position: fixed;top: 10%; /* 上部からの余白を調整 */left: 50%;transform: translate(-50%, 0);height: 72vh; /* 高さの最大値を設定 */background: rgba(0,0,0,0.84);padding: 20px;max-width: 1400px;width: 100%;/* overflow-y: auto; */ /* スクロールを有効化 */}
#resident .open-box .mi-box {height: 67.5vh;}
#resident .open-box .m-box {border: #00B7FF 1px solid;padding: 54px 69px;max-height: 68vh; /* コンテンツの最大高さを設定 */overflow-y: auto; /* コンテンツが多い場合のスクロール */}
#resident .open-box .close {  position: absolute;  top: 42px;  left: 41px;  z-index: 3;}
#resident .open-box .popimg {  position: absolute;  top: 110px;  right: 120px;  width: 440px;  overflow: hidden;}
#resident .open-box .popimg img {  width: 100%;  height: 320px;}
#resident .open-box .optext1 {  font-size: 18px;  line-height: 23px;  letter-spacing: 0.9px;  font-weight: 500;  color: #fff;  margin: 36px 0 39px 30px;}#resident .open-box .optext2 {  font-size: 12px;  line-height: 1.6;  letter-spacing: 0.8px;  font-weight: 500;  color: #fff;  margin: 0px 0 0 30px;}#resident .open-box .optext2 span {  display: inline-block;  border-top: #fff 1px solid;  border-bottom: #fff 1px solid;  padding: 2px 14px;}#resident .open-box .optext3 {  font-size: 70px;  line-height: 1.6;  letter-spacing: 3.5px;  font-weight: 700;  color: #fff;  margin: 0px 0 0 30px;}#resident .open-box .optext4 {  font-size: 16px;  line-height: 30px;  letter-spacing: 0.8px;  font-weight: 500;  color: #fff;  margin: 30px 0 0 30px;  width: 640px;}
#resident .open-box .snsbox {margin: 40px 0 0 30px;}
#resident .open-box .snsbox ul {  display: flex;  flex-wrap: wrap;}
#resident .open-box .snsbox ul li{margin:0px 0 0 0;}
#resident .open-box .snsbox ul li.sns01, #resident .open-box .snsbox ul li.sns02 {  margin-right: 10px;  background: #191919;  width: 80px;  height: 80px;  padding: 25px 0 0 25px;}
#resident .open-box .snsbox ul li.sns03 {  height: 80px;  width: 980px;  padding: 24px 0 0 22px;  background: #191919;  margin: 0;}
#resident .open-box .snsbox ul li.sns03 img{display: inline-block;padding: 0 0px 0px 0;}
#resident .open-box .snsbox ul li.sns03 span{margin: 0px 0 0 15px;}
#resident .open-box .snsbox ul li.sns03 a span {  text-decoration: underline;}/* スクロールバーのカスタマイズ */
#resident .open-box .snsbox ul li.sns03 a{
    text-decoration: underline;
}
#resident .open-box .m-box::-webkit-scrollbar {width: 8px;}
#resident .open-box .m-box::-webkit-scrollbar-track {background-color: #004CFF;border-radius: 10px;}
#resident .open-box .m-box::-webkit-scrollbar-thumb {background-color: #555;border-radius: 10px;border: 2px solid #f1f1f1;}
#resident .open-box .m-box::-webkit-scrollbar-thumb:hover {background-color: #333;}

}




@media screen and (min-width:768px) and (max-width:1540px) {
  #resident {}
  #resident .system-list {max-width: 89.91vw;width: 100%;min-width: 83.12vw;margin: 0 auto;position: relative;display: -webkit-box;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -ms-flexbox;display: flex;-webkit-box-lines: multiple;-moz-box-lines: multiple;-ms-flex-wrap: wrap;flex-wrap: wrap;}
  #resident .system-list li {width: 23.4%;position: relative;margin-right: 1.82vw;margin-bottom: -0.19vw;cursor: pointer;}
  #resident .system-list li:nth-child(4),#resident .system-list li:nth-child(11),#resident .system-list li:nth-child(18) {margin-right: 0;}
  #resident .system-list li:nth-child(5),#resident .system-list li:nth-child(12),#resident .system-list li:nth-child(19) {margin-left: 8.31vw;}
  #resident .system-list li .system-pic {}
  #resident .system-list li .system-pic img {width: 100%;height: auto;filter: drop-shadow(0vw 0.52vw 1.56vw #19191999);}
  #resident .system-list li .wkstext {font-size: 0.91vw;line-height: 1.6;letter-spacing: 0.05vw;font-weight: 500;position: absolute;top: 27.34vw;text-align: center;width: 20.78vw;}
  #resident .system-list li .system-ttl-01 {font-size: 1.56vw;line-height: 1.6;letter-spacing: 0.05vw;font-weight: 500;position: absolute;top: 29.03vw;width: 20.78vw;text-align: center;}
  #resident .system-list li .system-ttl-01::before {content: "";background: #fff;width: 1.56vw;height: 0.07vw;position: absolute;left: 50%;bottom: -0.45vw;transform: translateX(-50%);}
  #resident .system-list li .wkstext2 {font-size: 1.04vw;line-height: 1.95vw;letter-spacing: 0.05vw;font-weight: 500;width: 16.88vw;position: absolute;top: 33vw;left: 1.95vw;}
  #resident .system-list li .wkstext2 span {-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
  #resident .system-list li a:hover {text-decoration: none;}
  #resident .system-list li .arr {color: #00B7FF;font-size: 1.04vw;line-height: 1.6;letter-spacing: -0.06vw;font-weight: 600;font-style: italic;text-decoration: underline;position: absolute;top: 40.45vw;left: 7.73vw;}
  
  #resident .open-box {display: none;z-index: 4;position: fixed;top: 6.49vw;left: 50%;transform: translate(-50%, 0);height: 73.86vh;background: rgba(0, 0, 0, 0.84);padding: 1.3vw;max-width: 90.91vw;width: 100%;}
  #resident .open-box .mi-box {height: 529px;}
  #resident .open-box .m-box {border: #00B7FF 0.07vw solid;padding: 2.51vw 4.48vw;max-height: 69vh;overflow-y: auto;}
  #resident .open-box .close {position: absolute;top: 2.73vw;left: 2.66vw;z-index: 3;}
  #resident .open-box .popimg {position: absolute;top: 7.14vw;right: 7.79vw;width: 28.57vw;overflow: hidden;}
  #resident .open-box .popimg img {width: 100%;height: 20.78vw;}
  #resident .open-box .optext1 {/* font-size: 1.17vw; *//* line-height: 1.5vw; *//* letter-spacing: 0.06vw; */font-weight: 500;color: #fff;margin: 2.34vw 0 2.53vw 1.95vw;}
  #resident .open-box .optext2 {/* font-size: 0.78vw; *//* line-height: 1.6; *//* letter-spacing: 0.05vw; */font-weight: 500;color: #fff;margin: 0vw 0 0vw 1.95vw;}
  #resident .open-box .optext2 span {display: inline-block;border-top: #fff 0.07vw solid;border-bottom: #fff 0.07vw solid;padding: 0.13vw 0.91vw;}
  #resident .open-box .optext3 {font-size: 4.55vw;line-height: 1.6;letter-spacing: 0.23vw;font-weight: 700;color: #fff;margin: 0vw 0 0vw 1.95vw;}
  #resident .open-box .optext4 {/* font-size: 1.04vw; *//* line-height: 1.95vw; *//* letter-spacing: 0.05vw; */font-weight: 500;color: #fff;margin: 1.95vw 0 0vw 1.95vw;width: 44.56vw;}
  #resident .open-box .snsbox {margin: 3.58vw 0 0vw 1.95vw;}
  #resident .open-box .snsbox ul {display: flex;flex-wrap: wrap;}
  #resident .open-box .snsbox ul li {margin: 0px 0 0 0;}
  #resident .open-box .snsbox ul li.sns01,#resident .open-box .snsbox ul li.sns02 {margin-right: 0.65vw;background: #191919;width: 5.19vw;height: 5.19vw;padding: 1.62vw 0 0 1.62vw;}
  #resident .open-box .snsbox ul li.sns03 {height: 5.19vw;width: 63.64vw;padding: 1.56vw 0 0 1.43vw;background: #191919;margin: 0;}
  #resident .open-box .snsbox ul li.sns03 img {display: inline-block;padding: 0 0px 0px 0;}
  #resident .open-box .snsbox ul li.sns03 span {margin: 0px 0 0 1.04vw;}
  #resident .open-box .snsbox ul li.sns03 a span {text-decoration: underline;}
  
  #resident .open-box .m-box::-webkit-scrollbar {width: 0.52vw;}
  #resident .open-box .m-box::-webkit-scrollbar-track {background-color: #004CFF;border-radius: 0.65vw;}
  #resident .open-box .m-box::-webkit-scrollbar-thumb {background-color: #555;border-radius: 0.65vw;border: 0.13vw solid #f1f1f1;}
  #resident .open-box .m-box::-webkit-scrollbar-thumb:hover {background-color: #333;}
}







@media screen and (max-width: 767px) {
.main-title{background: url(../images/resident/sp-h1.png)no-repeat top right;background-size: 100% auto;margin-bottom: -28.6vw;z-index: 3;position: relative;}
#staff{background: url(../images/resident/sp-contentsmain-back01.png)no-repeat top center;padding: 93vw 0 0;background-size: 100% auto;}
#staff .system-list{width: 100%;padding: 0 0 0 0%;justify-content: center;
    margin: 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;}

#resident{ }
#resident .system-list li{margin: 0 4% -10.3vw 0;width: 45%;position: relative;padding-bottom: 17vw;}
#resident .system-list li:nth-child(2n){margin:0 0 -10.3vw 0;}

#resident{ }
#resident .system-list li{margin: 0 4% -10.3vw 0;width: 45%;position: relative;padding-bottom: 17vw;}
#resident .system-list li:nth-child(2n){margin:0 0 -10.3vw 0;}

#resident .system-list li .system-pic{  }
#resident .system-list li .system-pic img{width: 100%;height: auto;filter: drop-shadow(0.0vw 1.9vw 5.8vw #19191999);}
#resident .system-list li .wkstext{font-size: 3.4vw;line-height: 1.6;letter-spacing: 0.3vw;font-weight: 500;position: absolute;top: 53.1vw;text-align: center;width: 100%;}
#resident .system-list li .system-ttl-01{width: 100%;font-size: 4.5vw;line-height: 1.6;letter-spacing: 0.3vw;font-weight: 500;position: absolute;top: 59.3vw;text-align: center;}
#resident .system-list li .system-ttl-01::before{content: "";background: #fff;height: 0.2vw;position: absolute;left: 50%;bottom: -1.7vw;transform: translateX(-50%);width: 5vw;}
#resident .system-list li .wkstext2{font-size: 3vw;line-height: 1.5;letter-spacing: 0.16vw;font-weight: 500;position: absolute;top: 71vw;left: 5.9vw;width: 80%;/* margin: 0 auto; */}
#resident .system-list li .wkstext2 span{  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#resident .system-list li a:hover{ text-decoration: none;}
#resident .system-list li .arr{color: #00B7FF;font-size: 3vw;line-height: 1.6;letter-spacing: 0.3vw;font-weight: 600;font-style: italic;text-decoration: underline;position: absolute;top: 86.5vw;/* left: 11.7vw; */text-align: center;width: 100%;}


/* モーダルのスタイル */
#resident .open-box {
    display: none;
    z-index: 100;
    position: fixed;
    top: 23vw; /* 上端からの余白を調整 */
    left: 50%; /* 左右中央揃え */
    transform: translateX(-50%);
    max-height: 90vh; /* 高さを画面の90%に制限 */
    background: rgba(0, 0, 0, 0.84);
    padding: 4.8vw;
    overflow-y: auto; /* スクロールを有効化 */
    margin: 0 auto;
    width: 85vw; /* 幅をスマホ画面に合わせる */
}

#resident .open-box .mi-box {
}

#resident .open-box .m-box {
    border: #00B7FF 0.2vw solid;
    padding: 16vw 5.1vw 16vw 5.1vw;
    max-height: 76vh; /* モーダル内部のコンテンツ高さを制限 */
    overflow-y: auto; /* コンテンツが多い場合にスクロール */
}

#resident .open-box .close {
    position: absolute;
    top: 9vw; /* 上端の余白を調整 */
    left: 10vw; /* 閉じるボタンを右端に配置 */
    z-index: 3;
    display: block;
    width: 7vw;
}

#resident .open-box .popimg {
    position: relative;
    overflow: hidden;
    margin-bottom: 7.24vw;
}

#resident .open-box .popimg img {
    width: 100%;
    height: auto;
}

#resident .open-box .optext1 {
    font-size: 4.34vw;
    line-height: 1.6;
    letter-spacing: 0.3vw;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 5vw;
}

#resident .open-box .optext2 {
    font-size: 2.89vw;
    line-height: 1.6;
    letter-spacing: 0.3vw;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 3.6vw;
}

#resident .open-box .optext2 span {
    display: inline-block;
    border-top: #fff 0.2vw solid;
    border-bottom: #fff 0.2vw solid;
    padding: 0.5vw 3.4vw;
}

#resident .open-box .optext3 {
    font-size: 7.72vw;
    line-height: 1.6;
    letter-spacing: 0.3vw;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 5.5vw;
}

#resident .open-box .optext4 {
    font-size: 3.38vw;
    line-height: 2;
    letter-spacing: 0.16vw;
    font-weight: 500;
    color: #fff;
    margin-bottom: 7.17vw;
}

#resident .open-box .snsbox {
}

#resident .open-box .snsbox ul {
    justify-content: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
}

#resident .open-box .snsbox ul li {
    margin: 0;
}

#resident .open-box .snsbox ul li.sns01 {
    background: #191919;
    width: 15vw;
    height: 15vw;
    padding: 5vw 0 0 3vw;
}

#resident .open-box .snsbox ul li.sns02 {
    margin-left: 1.2vw;
    background: #191919;
    width: 15vw;
    height: 15vw;
    padding: 5vw 0 0 3vw;
}

#resident .open-box .snsbox ul li.sns03 {
    margin-left: 1.2vw;
    background: #191919;
    width: 15vw;
    height: 15vw;
    padding: 5vw 0 0 3vw;
}

#resident .open-box .snsbox ul li.sns01 img, 
#resident .open-box .snsbox ul li.sns02 img,
#resident .open-box .snsbox ul li.sns03 img {
    width: 9.62vw;
    height: 5.62vw;
}

#resident .open-box .snsbox ul li.sns03 a{
    text-decoration: underline;
}

/* スクロールバーのカスタマイズ */
#resident .open-box .m-box::-webkit-scrollbar {
    width: 8px;
}

#resident .open-box .m-box::-webkit-scrollbar-track {
    background-color: #004CFF;
    border-radius: 10px;
}

#resident .open-box .m-box::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

#resident .open-box .m-box::-webkit-scrollbar-thumb:hover {
    background-color: #333;
}

}