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


@keyframes fadezoom {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}


@keyframes scroll-bar {
0% {
height: 0;
bottom: inherit;
top: 73px;
}
40% {
height: 73px;
bottom: inherit;
top: 73px;
}
41% {
height: 73px;
bottom: 0;
top: inherit;
}
80% {
height: 0;
bottom: 0;
top: inherit;
}
100% {
height: 0;
bottom: 0;
top: inherit;
}
}


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

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15); /* 拡大率 */
}
}



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

/* com
--------------------------------------------*/
h3 {
font-size: 4.6rem;
margin-bottom: 40px;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
h3 span {
display: table;
font-size: 1.6rem;
font-weight: 500;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h4 { font-size: 2.4rem; }
p { margin-top: 20px; line-height: 2; font-weight: 400; }



/* slider
--------------------------------------------*/
#mv { position: relative; z-index: 1; }

#mv h2 { width: 90%; margin: 80px auto 60px; font-size: 4.8em; }
#mv h2 span { display: block; font-size: 0.4em; margin-bottom: 20px; }
#mv h2 strong { background-image: linear-gradient(rgb(0, 64, 154) 0%, rgb(0, 124, 200) 100%); color: transparent; background-clip: text; -webkit-background-clip: text; }

.slider { width: 100%; margin: 0 auto; }
.slider li { background-repeat: no-repeat; background-size: cover; background-position: center; height: 75vh; margin: 0; }
.slider .slider01 { background-image: url("../images/slider/img01.jpg");}
.slider .slider02 { background-image: url("../images/slider/img02.jpg");}
.slider .slider03 { background-image: url("../images/slider/img03.jpg");}
.slider .slick-dots { display: none; }
.slick-slide.moving{ animation: fadezoom 8s; }



/* vision
--------------------------------------------*/
#vision { position: relative; width: 95%; margin: 200px 0 0 auto; }

#vision .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#vision .flex_wrap .txtbox { width: 47%; }
#vision .flex_wrap .imgbox { width: 50%; position: relative; }



/* about
--------------------------------------------*/
#about { position: relative; width: 95%; margin: 200px auto 0 0; }

#about .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
#about .flex_wrap .txtbox { width: 47%; }
#about .flex_wrap .imgbox { width: 50%; position: relative; }



/* person
--------------------------------------------*/
#person { position: relative; margin: 100px auto 0; }
#person .bg { position: relative; padding: 150px 5%; background: #f5f5f6; }

#person ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 50px;
}
#person ul li {
width: 31%;
padding: 10px;
box-sizing: border-box;
background: #2C2826;
}
#person ul li .txtbox { color: #fff; margin-top: 10px; line-height: 2; }
#person ul li .txtbox h5 { font-size: 2rem; line-height: 1.6; margin-bottom: 30px; }
#person ul li .txtbox h5 span {
position: relative;
display: table;
font-size: 1.6rem;
padding: 0px 10px;
margin-bottom: 5px;
background: linear-gradient(90deg, #0050a6, #0071bf);
}
#person ul li .txtbox p { font-size: 1.4rem; }
#person ul li .txtbox p span { font-size: 1.6rem; margin-bottom: 10px; font-weight: 800; display: block; }



/* career
--------------------------------------------*/
#career { position: relative; margin: 100px auto 0; }

#career article { margin-bottom: 150px; padding: 50px 0; border-top: 1px solid #656565; border-bottom: 1px solid #656565; }
#career article .loop_wrap { display: flex; width: 100%; overflow: hidden; }
#career article .loop_wrap div {
display: flex;
align-items: center;
font-size: 8rem;
font-weight: 300;
line-height: 1;
}
#career article .loop_wrap div:nth-child(odd) { animation: txtloop 70s -35s linear infinite; }
#career article .loop_wrap div:nth-child(even) { animation: txtloop2 70s linear infinite; }
#career article .loop_wrap div picture { width: 120px; margin: 0 30px 0 50px; }
#career article .loop_wrap div span {
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#career .txtbox { width: 90%; margin: auto; text-align: center; }
#career .txtbox h3 span { margin: auto; }

.timeline { width: 1100px; margin: 0 auto; background: #fafafa; padding: 50px 30px; }
.timeline > li { overflow: hidden; margin: 0; position: relative; }
.timeline-date {
width: 300px;
float: left;
margin-top: 15px;
text-align: right;
padding-right: 20px;
font-size: 1.8rem;
font-weight: 600;
}
.timeline-content {
position: relative;
width: 740px;
float: left;
border-left: 3px #e5e5d1 solid;
padding: 0 0 80px 30px;
}
.timeline-content:before {
content: '';
width: 12px;
height: 12px;
background: linear-gradient(90deg, #0050a6, #0071bf);
position: absolute;
left: -8px;
top: 24px;
border-radius: 100%;
}

.timeline-content h5 { font-size: 1.8rem; margin-bottom: 10px; color: #0050a6; }
.timeline-content p { font-size: 1.4rem; margin: 0; }
.timeline-content ul { margin-top: 20px; padding: 20px; background: linear-gradient(180deg, #0050a6, #0071bf); }
.timeline-content ul li { font-size: 0.8em; margin-bottom: 5px; color: #fff; }
.timeline-content ul li:first-child {
position: relative;
font-size: 1em;
font-weight: 800;
border-bottom: 1px dashed;
padding: 0 0 5px 1.3em;
margin: 0 0 10px 0em;
}
.timeline-content ul li:first-child::before {
content: '▽';
position: absolute;
top: 0; left: 0;
color: #FF0004;
}



/* interview
--------------------------------------------*/
#interview { position: relative; margin: 150px auto 0; }

#interview .txtbox { width: 90%; margin: auto; }
#interview .txtbox h3 { margin-bottom: 0; }
#interview .txtbox .button a { display: inline-flex; z-index: 20; }

#interview .swiper { width: 95%; margin: -50px 0 0 auto; position: relative; overflow: hidden; padding-right: 80px; box-sizing: border-box;  }
#interview .swiper ul { padding: 90px 0px; }
#interview .swiper ul li { position: relative; }
#interview .swiper ul li .hover_wrap { overflow: hidden; }
#interview .swiper ul li .hover_wrap .img { transition: all 0.7s ease; }
#interview .swiper ul li a:hover .hover_wrap .img { transform: scale(1.1); }
#interview .swiper ul li .txt {
position: absolute;
bottom: 0;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
#interview .swiper ul li .txt h4 { font-size: 2rem; }
#interview .swiper ul li .txt h4 span {
display: table;
font-size: 1.4rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#interview .swiper .swiper-slide {
transform: scale(.9);
transform-origin: top;
transition: .7s;
}
#interview .swiper .swiper-slide-active {
transform: scale(1.1);
transform-origin: top left;
margin-right: 50px;
}

#interview .swiper .swiper-prev,
#interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 50px;
height: 50px;
border: 1px solid #2C2826;
text-align: center;
z-index: 1;
}
#interview .swiper .swiper-prev { right: 130px; }
#interview .swiper .swiper-next { right: 50px; }
#interview .swiper .swiper-prev::before,
#interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 20px;
line-height: 2.5;
opacity: 1;
color: #2C2826;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#interview .swiper .swiper-prev::before { content: "<"; }
#interview .swiper .swiper-next::before { content: ">"; }



/* welfare
--------------------------------------------*/
#welfare { position: relative; margin: 100px auto 150px; border-top: 1px solid #656565; }
#welfare h3 { padding: 100px 0 100px 5%; margin: 0; }

#welfare .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid #656565;
border-bottom: 1px solid #656565;
}
#welfare .flex_wrap .box { position: relative; width: 50%; padding: 50px; box-sizing: border-box; }
#welfare .flex_wrap .box:last-child::before {
content: '';
border-left: 1px solid #656565;
height: 100%;
position: absolute;
top: 0; left: 0;
}
#welfare .flex_wrap .box .img { position: relative; width: 48%; margin: 0 0 0 auto; }
#welfare .flex_wrap .box .txt p {
line-height: 1.8;
margin-top: 50px;
font-size: 2.2rem;
font-weight: 600;
color: #666;
}
#welfare .flex_wrap .box .txt .button a { margin-top: 30px; }



	
}





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

/* com
--------------------------------------------*/
h3 {
font-size: 3rem;
margin-bottom: 30px;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 60%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
h3 span {
display: table;
font-size: 1.4rem;
font-weight: 500;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h4 { font-size: 1.8rem; }
p { margin-top: 20px; line-height: 2; font-size: 1.4rem; font-weight: 400; }



/* slider
--------------------------------------------*/
#mv { position: relative; z-index: 1; }

#mv h2 { width: 90%; margin: 100px auto 40px; font-size: 4rem; }
#mv h2 span { display: block; font-size: 1.8rem; margin-bottom: 10px; }
#mv h2 strong { background-image: linear-gradient(rgb(0, 64, 154) 0%, rgb(0, 124, 200) 100%); color: transparent; background-clip: text; -webkit-background-clip: text; }

.slider { width: 100%; margin: 0 auto; }
.slider li { background-repeat: no-repeat; background-size: cover; background-position: center; height: 40vh; margin: 0; }
.slider .slider01 { background-image: url("../images/slider/img01.jpg");}
.slider .slider02 { background-image: url("../images/slider/img02.jpg");}
.slider .slider03 { background-image: url("../images/slider/img03.jpg");}
.slider .slick-dots { display: none; }
.slick-slide.moving{ animation: fadezoom 8s; }



/* vision
--------------------------------------------*/
#vision { position: relative; width: 90%; margin: 100px auto 0; }

#vision .flex_wrap {  }
#vision .flex_wrap .txtbox { margin-bottom: 30px; }
#vision .flex_wrap .imgbox { position: relative; }



/* about
--------------------------------------------*/
#about { position: relative; width: 90%; margin: 100px auto 0; }

#about .flex_wrap {  }
#about .flex_wrap .txtbox { margin-bottom: 30px; }
#about .flex_wrap .imgbox { position: relative; }



/* person
--------------------------------------------*/
#person { position: relative; margin: 100px auto 0; }
#person .bg { position: relative; padding: 50px 5%; background: #f5f5f6; }

#person ul { margin-top: 50px; }
#person ul li {
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
background: #2C2826;
}
#person ul li .txtbox { color: #fff; margin-top: 10px; line-height: 2; }
#person ul li .txtbox h5 { font-size: 1.8rem; line-height: 1.6; margin-bottom: 30px; }
#person ul li .txtbox h5 span {
position: relative;
display: table;
font-size: 1.4rem;
padding: 0px 10px;
margin-bottom: 5px;
background: linear-gradient(90deg, #0050a6, #0071bf);
}
#person ul li .txtbox p { font-size: 1.2rem; }
#person ul li .txtbox p span { font-size: 1.4rem; margin-bottom: 10px; font-weight: 800; display: block; }



/* career
--------------------------------------------*/
#career { position: relative; margin: 80px auto 0; }

#career article { margin-bottom: 100px; padding: 40px 0; border-top: 1px solid #656565; border-bottom: 1px solid #656565; }
#career article .loop_wrap { display: flex; width: 100%; overflow: hidden; }
#career article .loop_wrap div {
display: flex;
align-items: center;
font-size: 4rem;
font-weight: 300;
line-height: 1;
}
#career article .loop_wrap div:nth-child(odd) { animation: txtloop 70s -35s linear infinite; }
#career article .loop_wrap div:nth-child(even) { animation: txtloop2 70s linear infinite; }
#career article .loop_wrap div picture { width: 90px; margin: 0 10px 0 30px; }
#career article .loop_wrap div span {
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#career .txtbox { width: 90%; margin: auto; text-align: center; }
#career .txtbox h3 span { margin: auto; }

.timeline { margin: 0 auto; background: #fafafa; padding: 30px 20px; }
.timeline > li {
position: relative;
border-left: 3px #e5e5d1 solid;
padding: 0 0 50px 30px;
}
.timeline > li:before {
content: '';
width: 12px;
height: 12px;
background: linear-gradient(90deg, #0050a6, #0071bf);
position: absolute;
left: -8px;
top: 24px;
border-radius: 100%;
}
.timeline-date { margin-top: 0px; font-size: 1.6rem; font-weight: 600; }

.timeline-content h5 { font-size: 1.6rem; margin-bottom: 10px; color: #0050a6; }
.timeline-content p { font-size: 1.4rem; margin: 0; }
.timeline-content ul { margin-top: 20px; padding: 15px; background: linear-gradient(180deg, #0050a6, #0071bf); }
.timeline-content ul li { font-size: 0.8em; margin-bottom: 5px; color: #fff; }
.timeline-content ul li:first-child {
position: relative;
font-size: 1em;
font-weight: 800;
border-bottom: 1px dashed;
padding: 0 0 5px 1.3em;
margin: 0 0 10px 0em;
}
.timeline-content ul li:first-child::before {
content: '▽';
position: absolute;
top: 0; left: 0;
color: #FF0004;
}



/* interview
--------------------------------------------*/
#interview { position: relative; margin: 100px auto 0; }

#interview .txtbox { width: 90%; margin: auto; }
#interview .txtbox h3 { margin-bottom: 0; }
#interview .txtbox .button a { display: inline-flex; z-index: 5; }

#interview .swiper { width: 95%; margin: -50px 0 0 auto; position: relative; overflow: hidden; padding-right: 20px; box-sizing: border-box;  }
#interview .swiper ul { padding: 90px 0 0; }
#interview .swiper ul li { position: relative; }
#interview .swiper ul li .txt {
position: absolute;
bottom: 0;
background: #fff;
padding: 10px;
box-sizing: border-box;
}
#interview .swiper ul li .txt h4 { font-size: 1.6rem; }
#interview .swiper ul li .txt h4 span {
display: table;
font-size: 1.2rem;
background: linear-gradient(123deg, #2C2826 0%, #0050a6 45%);
background-size: 200% 200%;
background-position: 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#interview .swiper .swiper-prev,
#interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
top: 0;
display: block;
width: 40px;
height: 40px;
border: 1px solid #2C2826;
text-align: center;
z-index: 1;
}
#interview .swiper .swiper-prev { right: 90px; }
#interview .swiper .swiper-next { right: 20px; }
#interview .swiper .swiper-prev::before,
#interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 18px;
line-height: 2.3;
opacity: 1;
color: #2C2826;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#interview .swiper .swiper-prev::before { content: "<"; }
#interview .swiper .swiper-next::before { content: ">"; }



/* welfare
--------------------------------------------*/
#welfare { position: relative; margin: 100px auto; border-top: 1px solid #656565; }
#welfare h3 { padding: 50px 0 50px 5%; margin: 0; }

#welfare .flex_wrap {
border-top: 1px solid #656565;
border-bottom: 1px solid #656565;
}
#welfare .flex_wrap .box { position: relative; padding: 20px; box-sizing: border-box; }
#welfare .flex_wrap .box:last-child::before {
content: '';
border-top: 1px solid #656565;
width: 100%; height: 1px;
position: absolute;
top: 0; left: 0;
}
#welfare .flex_wrap .box .img { position: relative; width: 100%; margin: 0 0 0 auto; }
#welfare .flex_wrap .box .txt p {
line-height: 1.8;
margin-top: 10px;
font-size: 1.8rem;
font-weight: 600;
color: #666;
}
#welfare .flex_wrap .box .txt .button a { justify-content: flex-start; }



}