@charset "UTF-8";


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

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

@keyframes vertical-animation {
from {
transform: translateY(0);
}

to {
transform: translateY(-100%);
}
}

@keyframes vertical-animation2 {
from {
transform: translateY(-100%);
}

to {
transform: translateY(0%);
}
}


/*PC*/
@media print, screen and (min-width: 769px) {
#hed_wrap{
margin-bottom: 0;
}

#work_life_balance{
position: relative;
margin: 0 auto 120px;
overflow: hidden;
}

#work_life_balance .block{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: hidden;
height: 1000px;
}


.slider-container_l,
.slider-container_r{
width:20%;
height:100%;
overflow: hidden;
}

.slider-container_l .slider-wrapper {
display: grid; /* slideのmargin-bottom値を全て内包させる為 */
animation: vertical-animation 50s linear infinite;
}

.slider-container_r .slider-wrapper {
display: grid; /* slideのmargin-bottom値を全て内包させる為 */
animation: vertical-animation2 50s linear infinite;
}

.slider-container_l .slide,
.slider-container_r .slide{
width: 100%;
margin: 0 auto 10px;
}

.slider-container_l .slide img,
.slider-container_r .slide img{
width: 100%;
height: auto;
vertical-align: bottom;
border-radius: 1rem;
}

#work_life_balance .block .txt_box{
width: 50%;
position: relative;
padding: 120px 0;
}

#work_life_balance .block .txt_box .logo_mark{
width: 260px;
margin: 0 auto 60px;
}

#work_life_balance .block .txt_box .red_ttl{
font-size: 2.8rem;
font-style: italic;
font-weight: 700;
line-height: 1.6;
letter-spacing: -.1rem;
margin: 0;
text-align: center;
}

#work_life_balance .block .txt_box .red_ttl2{
font-size: 2.6rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: .1rem;
margin: 0 0 40px;
text-align: center;
}

#work_life_balance article{
overflow: hidden;
position: relative;
margin:0 0 -12px;
}

#work_life_balance .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#work_life_balance .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:7rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 4rem;
}

#work_life_balance .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#work_life_balance .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#work_life_balance .fv_img{
width: 100%;
height:560px;
overflow: hidden;
margin: 0 0 80px;
}

#work_life_balance .block2{
width: 1200px;
margin:0 auto 60px;
}

#work_life_balance .block2:last-child{
margin-bottom:0;
}

#work_life_balance .block2 .ttl_border{
font-size: 2rem;
font-weight: 500;
color:#443E6E;
text-align: center;
position: relative;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 5px;
margin: 0 0 40px;
}

#work_life_balance .block2 .ttl_border::after{
position: absolute;
left: 50%;
bottom:-2px;
content: '';
display: block;
width: 75px;
height: 4px;
background-color: #9966CC;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
}

#work_life_balance .block2 .list{
display: flex;
flex-wrap: wrap;
}

#work_life_balance .block2 .list li{
width: 31.33%;
margin-right: 2%;
margin-bottom: 2%;
border: 2px solid #9966CC;
padding: 20px;
box-sizing: border-box;
border-radius: 1rem;
}

#work_life_balance .block2 .list li:nth-child(3n){
margin-right: 0;
}

#work_life_balance .block2 .list li h4{
background: #9966CC;
font-size: 1.2rem;
font-weight: 300;
line-height: 1;
color: #FFF;
padding:10px;
box-sizing: border-box;
border-radius: 50rem;
text-align: center;
margin: 0 0 10px;
}

#work_life_balance .block2 .list li p{
font-weight: 500;
}

#work_life_balance .block2 .list2{
margin: 0;
}

#work_life_balance .block2 .list2 li{
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
}

#work_life_balance .block2 .list2 li:nth-child(odd){
flex-direction: row-reverse;
}

#work_life_balance .block2 .list2 li .img{
width: 40%;
}

#work_life_balance .block2 .list2 li .txt_box{
width: 57%;
}

#work_life_balance .block2 .list2 li .txt_box h5{
font-size: 1.2rem;
color: #634e4a;
position: relative;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 11px;
padding-left: 1.2em;
margin-bottom: 15px;
font-weight:400;
}

#work_life_balance .block2 .list2 li .txt_box h5::before{
content: "●";
position: absolute;
top:-2px;
left:0;
color:#ae8db5;
font-size: 1.4rem;
}

#work_life_balance .slider2{
margin:-12px 0 60px;
}


}






/*sp*/
@media only screen and (max-width: 768px) {
#hed_wrap{
margin-bottom: 0;
}

#work_life_balance{
position: relative;
margin: 0 auto 80px;
overflow: hidden;
}

#work_life_balance .block{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow: hidden;
height: 40vh;
min-height: 750px;
}


.slider-container_l,
.slider-container_r{
width:18%;
height:100%;
overflow: hidden;
}

.slider-container_l .slider-wrapper {
display: grid; /* slideのmargin-bottom値を全て内包させる為 */
animation: vertical-animation 50s linear infinite;
}

.slider-container_r .slider-wrapper {
display: grid; /* slideのmargin-bottom値を全て内包させる為 */
animation: vertical-animation2 50s linear infinite;
}

.slider-container_l .slide,
.slider-container_r .slide{
width: 100%;
margin: 0 auto 10px;
}

.slider-container_l .slide img,
.slider-container_r .slide img{
width: 100%;
height: auto;
vertical-align: bottom;
border-radius: 1rem;
}

#work_life_balance .block .txt_box{
width: 55%;
position: relative;
padding: 60px 0;
}

#work_life_balance .block .txt_box .logo_mark{
width: 80%;
margin: 0 auto 40px;
}

#work_life_balance .block .txt_box .red_ttl{
font-size: 1.2rem;
font-weight: 700;
line-height: 1.8;
letter-spacing: -.1rem;
margin: 0;
text-align: center;
}

#work_life_balance .block .txt_box .red_ttl2{
font-size: 2.6rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: .1rem;
margin: 0 0 40px;
text-align: center;
}

#work_life_balance article{
overflow: hidden;
position: relative;
margin:0 0 -12px;
}

#work_life_balance .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#work_life_balance .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:6rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 1.2rem;
}

#work_life_balance .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#work_life_balance .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#work_life_balance .fv_img{
width: 100%;
overflow: hidden;
}

#work_life_balance .block2{
width: 90%;
margin: 30px auto 0;
}

#work_life_balance .block2:last-child{
margin-bottom:0;
}

#work_life_balance .block2 .ttl_border{
font-size: 1.6rem;
font-weight: 500;
color:#443E6E;
text-align: center;
position: relative;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 5px;
margin: 0 0 20px;
}

#work_life_balance .block2 .ttl_border::after{
position: absolute;
left: 50%;
bottom:-2px;
content: '';
display: block;
width: 75px;
height: 4px;
background-color: #9966CC;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1;
}

#work_life_balance .block2 .list {  }
#work_life_balance .block2 .list li{
margin-bottom: 2%;
border: 2px solid #9966CC;
padding: 20px;
box-sizing: border-box;
border-radius: 1rem;
}

#work_life_balance .block2 .list li h4{
background: #9966CC;
font-size: 1rem;
font-weight: 300;
line-height: 1;
color: #FFF;
padding:10px;
box-sizing: border-box;
border-radius: 50rem;
text-align: center;
margin: 0 0 10px;
}

#work_life_balance .block2 .list li p{
font-weight: 500;
}

#work_life_balance .block2 .list2{
margin: 0;
}

#work_life_balance .block2 .list2 li{
margin-bottom: 40px;
}

#work_life_balance .block2 .list2 li .img{
margin-bottom: 20px;
}

#work_life_balance .block2 .list2 li .txt_box h5{
font-size: 1.1rem;
color: #634e4a;
position: relative;
border-bottom: 1px solid #d0d0d0;
padding-bottom: 5px;
padding-left: 1.2em;
margin-bottom: 10px;
font-weight: 400;
}

#work_life_balance .block2 .list2 li .txt_box h5::before{
content: "●";
position: absolute;
top:-3px;
left:0;
color:#ae8db5;
font-size: 1.3rem;
}

#work_life_balance .slider2{
margin:-12px 0 60px;
}


}