@charset "utf-8";

/*スタッフ*/
.ul_members { width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; margin:30px 0; }
.ul_members li { width:100%; height:100%; position:relative; margin-bottom:50px; }
.ul_members li a { width:100%; height:100%; display:block; }
.ul_members li img { width:100%; }
.ul_members li span { font-size:18px; font-weight:normal; display:block; letter-spacing:0.05em; color:#fff; text-align:left; }
.ul_members li:nth-child(even) { margin-top:0px; margin-bottom:100px; } 
.ul_members li:last-child { margin-top:0px; margin-bottom:0px; } 

@media screen and (min-width:798px) {
  .ul_members { width:80%; margin:50px 10% 0 10%; }
}
@media screen and (min-width: 1200px) {
  .ul_members { width:100%; margin-top:0; }
  .ul_members  { margin:80px 0 80px 0;}
  .ul_members li { margin-bottom:100px; }
  .ul_members li { width:48%; height:100%; position:relative; margin-bottom:50px; }
  .ul_members li .circle { position:absolute; bottom:50px; right:0; }
  .ul_members li:nth-child(even) .circle { position:absolute; bottom:-30px; right:0; }
  .ul_members li span { text-align:center; }
  .ul_members li span small {font-size:16px; }
  .contents_wrap.members {
    background-color: #fff;
    width: 100%;
    height: 100%;
    transition: background-color 5s ease-in-out, opacity 1s ease-in-out;}
    .ul_members li:nth-child(even) { margin-top:30px; } 
}

.ul_members li a.murasaki:hover + .contents_wrap.members {background-color:#883B87; }
.ul_members li a.green:hover + .contents_wrap.members {background-color: #EBEB00;}
.ul_members li a.navy:hover + .contents_wrap.members {background-color: #2883D1;}
.ul_members li a.lightblue:hover + .contents_wrap.members {background-color: #39A5AE;}
.ul_members li a.orange:hover + .contents_wrap.members {background-color: #EA5E2A;}
.ul_members li a.pink:hover + .contents_wrap.members {background-color: #DE295A; z-index:-9;}
.ul_members li .st_katagaki { width:34%; display:inline-block; background:rgba(0, 0, 0, 0.8); color:#fff; position:absolute; right:0; top:170px; text-align:left; padding:15px; }
.ul_members li img.fuidashi { width:auto; left:-30px; bottom:50px; position:absolute; }
.ul_members li a {
  position: relative;
}

.ul_members li a::before {
  content: ''; 
  width: 300px;
  height: 300px;
  background-color:none; 
  border-radius: 50%; 
  transition: background-color 0.2s, transform 0.2s ease-in-out; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:-9;
  transform-origin: center; 
}

/*社員紹介のところ　ホバーしたらページに色がつく*/
.ul_members li a.murasaki:hover::before {
  background-color:#883B87; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-4; 
}
.ul_members li a.green:hover::before {
  background-color:#EBEB00; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-5; 
}
.ul_members li a.navy:hover::before {
  background-color:#2883D1; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-6; 
}
.ul_members li a.lightblue:hover::before {
  background-color:#39A5AE; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-7; 
}
.ul_members li a.orange:hover::before {
  background-color:#EA5E2A; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-8; 
}
.ul_members li a.pink:hover::before {
  background-color:#DE295A; 
  transform: translate(-50%, -50%) scale(100); transition: background-color 1s ease;
  z-index:-9; 
}

.bgextend { overflow:visible; }
.ul_members li a { position:relative; overflow:visible; }
.members_wrap { position:relative; z-index:1; }
.image-container {position: relative;display: inline-block; /* 画像のサイズに合わせて要素を調整 */}

.ul_members li img.img_arrow { width:15px; position:absolute; right:0px; bottom:45px; }
.ul_members li:nth-child(even) img.img_arrow { width:20px; position:absolute; right:0px; bottom:-20px; }
@media screen and (min-width: 840px) {
.ul_members li img.img_arrow { width:20px; right:20px; bottom:20px; }
.ul_members li:nth-child(even) img.img_arrow { width:20px; right:20px; bottom:-30px; }
}

/*吹き出し*/
.image-container .em_wrap { width:90%; height:100px; display:block; background:url(https://www.daylife-recruit.com/img/fukidashi.png)no-repeat; background-size:contain; position:relative; 
  margin-top:-10px; }
  .image-container .em_wrap em { width:100%; text-align:center; font-style:normal; margin:10vw 0 0 0px; display:block; float:left; font-weight:bold; }
@media screen and (min-width: 840px) {
  .image-container .em_wrap { width:360px; height:100px; display:block; background:url(https://www.daylife-recruit.com/img/fukidashi.png)no-repeat; background-size:cover; position:relative; 
  margin-top:-50px; margin-left:-20px; display:block; }
  .image-container .em_wrap em { font-style:normal; margin:50px 0 0 0px; display:block; float:left; font-weight:bold; font-size:18px; }
}

/*肩書き*/
.overlay-text {
  position: absolute;
  top: 40%; /* 画像の上部から中央に配置 */
  left: 0%; /* 画像の左端から中央に配置 */
  background-color: rgba(0, 0, 0, 0.5); /* 背景色（白色で透明度80%） */
  padding: 10px; /* パディング */
  font-size: 14px; /* フォントサイズ */
}

.ul_members li:nth-child(even) .overlay-text { width:auto;  } 
.ul_members li:nth-child(even) .image-container .em_wrap { margin-top:-50px; margin-left:initial; position:absolute; left:-20px; }
.overlay-text small { font-size:12px; }
@media screen and (min-width: 840px) {
  .overlay-text { top:50%; right:0; left:initial; }
  .ul_members li:nth-child(even) .overlay-text { width:90%; left:0; } 
.ul_members li:nth-child(even) .overlay-text { width:50%; right:0; left:initial; padding:10px 20px; } 
.ul_members li:nth-child(even) .image-container .em_wrap { margin-top:-50px; margin-left:initial; position:absolute; right:80px; }
.overlay-text small { font-size:16px; }
}



/*リンク*/
@media screen and (min-width: 840px) {
  .ul_members.link li { width:47%; margin-left:3%; position:relative; }
}
.ul_members.link li .div_title { width:200px; position:absolute; left:-50px; top:0; z-index:1; }
.ul_members.link li .div_title span { font-size:16px; writing-mode: vertical-lr; color:#00E0E0; }
.ul_members.link li .div_title strong { transform: rotate(90deg); display: inline-block; position:absolute; top:50px; left:-50px; font-size:62px; }
.ul_members.link li .circle {bottom: 5px;}
.ul_members.link li:nth-child(2) { margin-top:0; }
.ul_members.link li img { width:95%; }

.ul_links { width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; }
.ul_links li { width:100%; margin-bottom:15px; }
.ul_links li a { width:100%; height:auto; padding:11px 2.5%;border:1px solid #000; display:block;  }
.ul_links li a span {font-size:14px; font-weight:bold; color:#00E0E0;  display:inline-block;  }
.ul_links li a .div_arrow { width:90%; display:flex; justify-content:space-between; align-items: center;}
.ul_links li a .div_arrow div strong { font-size:30px; font-family: "futura-pt-bold", sans-serif; line-height:1.2em; }
.ul_links li a .div_arrow div svg { top:0px; }
@media screen and (min-width: 840px) {
  .ul_links li { width:33%; margin-bottom:30px; }
  .ul_links li a { padding:15px 5%;}
  .ul_links li a span {font-size:16px; }
  .ul_links li a { width:90%;}
  .ul_links li a .div_arrow { width:90%; }
  .ul_links li a .div_arrow div strong { font-size:39px; }
  .ul_links li a .div_arrow div svg { top:initial; }
}
.ul_links li a:hover { background:#DDF1FA; }

.ul_links li a:hover .circle span::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: black;border-radius: 50%;transform: translate(-50%, -50%);transition: width 0.3s ease, height 0.3s ease;}
.ul_links li a:hover .circle span::before {width: 120px;height: 120px;}
.ul_links li a:hover .circle span svg path {stroke: #ffffff;}