@charset "utf-8";

.fmenu_sp li a.sp_members:link span { color:#00E0E0; }
.fmenu_sp li a.sp_members:link em { color:#00E0E0; }
.fmenu_sp li a.sp_members:visited span { color:#00E0E0; }
.fmenu_sp li a.sp_members:visited em { color:#00E0E0; }

#g-nav.panelactive ul li a.a_members:link span { color:#FFFF02;}
#g-nav.panelactive ul li a.a_members:visited span { color:#FFFF02;}
footer a.f_members:link::after {
    content: ''; /* コンテンツを空にする */
    position: absolute; /* 絶対位置指定 */
    bottom:10px;
    left: 50%; /* 左端から中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃え */
    width:50px; /* 要素の幅と同じ */
    height:20px; /* 要素の高さと同じ */
    background-image: url('https://www.daylife-recruit.com/img/color.png');
    background-size: contain; /* 画像を要素に合わせて表示 */
    opacity: 1; /* 初期状態は不透明 */
    transition: opacity 0.3s ease; /* フェードのアニメーション */
    margin:0 auto; 
  }

#g-nav-list ul li a.a_works { }
#g-nav-list ul li a.a_works strong { }
#g-nav-list ul li a.a_works:link { }
#g-nav-list ul li a.a_works span.btnarrow::before{content: '';position: absolute;bottom:-8px;left:15%; width: 85%; height: 1px;  }
#g-nav-list ul li a.a_works span.btnarrow::afer{content: '';position: absolute;bottom:-3px;right:0;width: 15px;height:1px;transform: rotate(35deg);}
.fmenu_sp .sp_works:link em {} 
.fmenu_sp .sp_works:link span {} 
.fmenu_sp .sp_works:visited em {} 
.fmenu_sp .sp_works:visited span {} 
.fmenu_sp li a.sp_works img {}  

.inlin_pc { display:none; } 
.inlin_sp { display:block; } 
@media screen and (min-width: 840px) {
    .inlin_pc { display:block; } 
    .inlin_sp { display:none; } 
    #text-container strong.josefin-sans .fade-in { margin: -6px; }
    #text-container span.japan { margin-top:-210px; }
    
}

.staffgray { background:#333333; color:#fff; }

/* 共通 */
.contents { text-align:center; padding:30px 0; }
.mask-wrap .mask { margin-bottom:-10px; }
h3 { margin-bottom:10px; } 
h3::before { content: '●'; color:#00E0E0; display:inline-block; width:1em; margin-right: 0.5em; }

.top { width:100%; margin:0px auto 0 auto; display:flex; flex-wrap:wrap; }
@media screen and (min-width: 840px) {
    .contents { padding:80px 0 80px 0; }
}

/*トップ*/

.img_back { width:100%; }
.top_wrap { padding-bottom:0; background:none; }
.ul_top li.li_photo p { width:90%; margin: 0 auto; margin-top:15px; text-align: left; }

/* トップの下共通 */
.company_wrap_gray { width: 100%; background:#f7f7f7; }
.company_wrap_gray h3 { text-align:left; }
.companyContentsText  { text-align:left; }
.companyContentsImg li img { max-width:100%; max-height:100%; height:auto; width:auto; }
.companyContentsImg li:first-child { margin-bottom: 10px; }

@media screen and (min-width: 840px) {
    .top_wrap { padding-bottom:30px; background:none; }
    .company { display:flex; margin-top: 70px; gap:5%; }
    .worksContents { width:70%; }
    .companyContentsImg { width:40%; }
}

.ul_staff { width:100%; display:flex; flex-wrap:wrap; flex-direction: column-reverse; margin-bottom:30px; }
.ul_staff li { width:100%;  }
.ul_staff li strong { letter-spacing:0.15em; }
.ul_staff li img { width:100%;  }
.st_title { width:100%; font-size:28px; margin-bottom:30px; text-align:center; display:inline-block; }
.st_title.center { text-align:center; letter-spacing:0.15em; }
.ul_staff li p { text-align:left; text-align: justify; letter-spacing:0.05em; }
.contents p { text-align:left; text-align: justify; line-height:1.8em; }
@media screen and (min-width: 840px) {
    .ul_staff { flex-direction: initial; margin-bottom:0; }
    .ul_staff li { width:50%; margin:0 auto; display:flex; flex-wrap:wrap;align-items: flex-start; }
    .ul_staff li strong { width:100%; display:inline-block; }
    .ul_staff li p { width:100%; display:inline-block; }
    .ul_staff li img { width:80%;  }
    .st_title { text-align:left; margin:10px 0 50px 0;}

}

@media screen and (min-width: 840px) {
    .contents_in { width:100%; margin:0 auto 50px auto; display:block; }
}


.top .ul_top { width:100%; position:relative; flex-direction: column-reverse;}
.top .ul_top .li_info { width:100%; float:left; overflow:visible;}
.top .ul_top .li_staffphoto { width:100%; float:left; }
.top .ul_top .li_staffphoto img { width:100%; }
@media screen and (min-width: 840px) {
    .top { max-width:1400px; margin-bottom:50px; }
    .top .ul_top { width:100%; height:100%; margin:0 auto; display:block; }
    .top .ul_top .li_staffphoto { width:80%; float:right; overflow:hidden;}
    .top .ul_top .li_staffphoto mask { width:100%; }
    .top .ul_top .li_staffphoto mask img { width:100%; }
    .top .ul_top .li_info { width:20%; height:100%; position:relative; }
    .top .ul_top .li_info .div_info { position:absolute; z-index:1; top:22vw; }
    
}


    .div_info.color39A5AE { background:#39A5AE; }
    .div_info.color2983D1 { background:#2983D1; }
    .div_info.color2983D1 { background:#2983D1; }
    .div_info.colorEBEB00 { background:#EBEB00; color:#000; }
    .div_info.color883B87 { background:#883B87; }
    .div_info.colorDE295A { background:#DE295A; }
    .div_info.colorEA5E2A { background:#EA5E2A; }


.div_info { width:100%; margin:0px 0 0 0%; background:#ccc; padding:10px; color:#fff; position:relative; z-index:1; }
.div_info strong { font-size:20px; letter-spacing:0.15em; margin-bottom:20px; display:inline-block;}
.div_info h1 { font-size:19px; }
@media screen and (min-width: 840px) {
    .div_info { width:450px; color:#fff; position:relative; z-index:10; padding:30px;  }
    .div_info strong { font-size:24px; }
}



.contents_wrap.color { background:rgba(136, 59, 135, 0.4);}

.ul_staff_link { width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; text-align:center; }
.ul_staff_link li { width:48%; margin-bottom:20px; }
.ul_staff_link a { color:#fff; }
.ul_staff_link a small { line-height:1.5em; display:inline-block; }
.mask.color2983D1 .mask-bg { background:#2983D1; }
.mask.color2983D1 .mask-bg { background:#2983D1; }
.mask.colorEBEB00 .mask-bg { background:#EBEB00; }
.mask.color883B87 .mask-bg { background:#883B87; }
.mask.colorDE295A .mask-bg { background:#DE295A; }
.mask.colorEA5E2A .mask-bg { background:#EA5E2A; }
@media screen and (min-width: 840px) {
    .ul_staff_link li { width:19%; }
    .ul_staff_link li img { width:100%; }
    .StrongText { width:80%; margin:0 auto; display:block; }
    .ul_staff_link a:hover .image-container { background:#2983D1; }



}

/* 画像コンテナのスタイル */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* 画像のスタイル */
.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #f7f7f7; /* 好きな色に変更 */
    transition: width 0.5s ease;
    z-index: 1; /* 画像の上に表示されるように */
}
/* ホバー時のスタイル */
.image-container:hover::before {
    width: 100%;
}


.image-container.color2983D1::before { background-color:#2983D1; opacity:0.5; }
.image-container.colorEBEB00::before { background-color:#EBEB00; opacity:0.5; }
.image-container.color883B87::before { background-color:#883B87; opacity:0.5; }
.image-container.colorDE295A::before { background-color:#DE295A; opacity:0.5; }
.image-container.colorEA5E2A::before { background-color:#EA5E2A; opacity:0.5; }
.image-container.color39A5AE::before { background-color:#39A5AE; opacity:0.5; }







.st_title_staff { width:100%; font-size:28px; letter-spacing:0.05em; text-align:center; color:#fff; margin:0 0 50px 0; display:inline-block; }
@media screen and (min-width: 840px) {
    .photo_bottom { margin-bottom:80px; display:inline-block; }
}

.st_title_top { font-size:25px; letter-spacing:0.15em; margin:0px 0 20px 0;}
@media screen and (min-width: 840px) {
    .st_title_top { font-size:28px; margin-top:30px; margin-bottom:50px; }
    
}

.top_wrap {  background: none; }
.contents_wrap.gray { background:#f7f7f7 30%; }
.sm_info { width:100%; display:inline-block; line-height:1.5em; }
.sp_name { font-size:18px; font-weight:bold; margin:0px 0 10px 0; display:inline-block; }
@media screen and (min-width: 840px) {
    .top_wrap {  background: linear-gradient(to bottom, transparent 30%, #f7f7f7 30%); }
    .contents_wrap.gray { background: linear-gradient(to bottom, transparent 30%, #f7f7f7 30%); }
    .contents_wrap.gray { background: #f7f7f7; }
    .sp_name { margin:0px 0 10px 0; }
}
.sm_shop { width:100%; display:inline-block; font-size:16px; font-weight:normal; }


@media screen and (min-width: 840px) {
.top_wrap { height:650px; }

}

.contents_wrap { padding:20px 0 50px 0; margin-bottom:0px; }
@media screen and (min-width: 840px) {
    .contents_wrap { padding:0; margin-bottom:30px; }
}

.contents_wrap { overflow: hidden;}
.photo_bottom { width:150%; height:auto; margin-left:-30%; }
@media screen and (min-width: 840px) {
  .photo_bottom { max-width:1070px; margin:-80px auto 0 auto; padding-bottom:150px; display:block; }
}