@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) {

/* slider
--------------------------------------------*/
#mv { position: relative; z-index: 1; }
.slider { width: 90%; margin: 0 0 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; }


/*loop_wrap
-------------------------------*/
article { position: absolute; width: 90%; bottom: 0; right: 0; z-index: 100; }
article .loop_wrap { display: flex; width: 100%; overflow: hidden; margin: 0 auto 0; }
article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 14rem;
font-family: "Roboto", sans-serif;
font-weight:200;
line-height:1;
overflow: hidden;
color: rgba(255, 255, 255, 0.3);
}
article .loop_wrap div:nth-child(odd) { animation: txtloop 70s -35s linear infinite; }
article .loop_wrap div:nth-child(even) { animation: txtloop2 70s linear infinite; }


.slider_txt_box { position: absolute; top: 20%; left: 5%; }
.slider_txt_box h2 { font-size: 3em; font-weight: 700; color: #00488a; text-shadow: 0 0px 10px rgba(255, 255, 255, 0.8); }

.kv__scroll {
position: absolute;
left: 4%;
bottom: 100px;
padding-bottom: 90px;
writing-mode: vertical-rl;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 1;
transition: all .3s;
}
.kv__scroll::after {
content: "";
position: absolute;
left: 50%;
top: 63px;
display: block;
width: 1px;
height: 0;
background: #1e1e1e;
transition: all .3s;
transform-origin: top;
animation: scroll-bar 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}




/* vision
--------------------------------------------*/
#vision {
position: relative;
margin: -100px auto 0;
background: linear-gradient(90deg, #00488a, #087fba);
padding: 200px 0 150px;
z-index: 0;
}

#vision .flex_wrap {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
#vision .flex_wrap .txtbox { width: 47%; color: #fff; }
#vision .flex_wrap .txtbox h3 { font-size: 5em; margin-bottom: 30px; }
#vision .flex_wrap .txtbox h4 { font-size: 1.8em; }
#vision .flex_wrap .txtbox .txt { margin-top: 40px; line-height: 2; }

#vision .flex_wrap .imgbox { width: 50%; position: relative; }
#vision .flex_wrap .imgbox h5 {
position: absolute;
top: -40px; left: 20px;
writing-mode: vertical-rl;
font-size: 1.2em;
background: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}
#vision .flex_wrap .imgbox .img01 { width: 80%; }
#vision .flex_wrap .imgbox .img02 { width: 75%; margin: -5% 0% 0 20%; }



/* about
--------------------------------------------*/
#about { position: relative; margin: 0 auto; padding: 200px 0 300px; background: #f2f5fc; }

#about .flex_wrap {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#about .flex_wrap .txtbox { width: 47%; }
#about .flex_wrap .txtbox h3 { font-size: 5em; margin-bottom: 30px; }
#about .flex_wrap .txtbox h4 { font-size: 1.8em; }
#about .flex_wrap .txtbox .txt { margin-top: 40px; line-height: 2; }

#about .flex_wrap .imgbox { width: 50%; position: relative; }
#about .flex_wrap .imgbox h5 {
position: absolute;
top: -40px; left: 20px;
writing-mode: vertical-rl;
font-size: 1.2em;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}
#about .flex_wrap .imgbox .img01 { width: 80%; }
#about .flex_wrap .imgbox .img02 { width: 75%; margin: -5% 0 0 20%; }

#about article { width: 100%; }
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 10em;
font-family: "Roboto", sans-serif;
font-weight:200;
line-height:1;
overflow: hidden;
color: #d0d8ea;
}



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

#person .person_img { width: 100%; margin: 0; }
#person .bg { position: relative; width: 80%; margin: -100px auto 0; padding: 80px 50px 100px; background: #fff; box-sizing: border-box; }

#person h3 { font-size: 5em; margin: 0 0 30px; }
#person h3 span {
font-size: 1.8rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
margin-left: 30px;
}
#person h4 { font-size: 1.8em; }
#person .txt { margin-top: 40px; line-height: 2; }


#person ul li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-top: 50px;
padding: 40px 50px;
border: 1px solid #00488a;
}
#person ul li .txtbox { width: 60%; }
#person ul li .txtbox h5 { font-size: 1.6em; margin-bottom: 30px; }
#person ul li .txtbox h5 span { position: relative; display: table; font-size: 0.9em; padding: 0 40px 0 0; margin-bottom: 10px; }
#person ul li .txtbox h5 span::after {
content: '';
background: linear-gradient(90deg, #00488a, #087fba);
width: 30px; height: 2px;
position: absolute;
top: 50%; right: 0;
}
#person ul li .txtbox .txt { margin-top: 40px; line-height: 2; }

#person ul li .imgbox { width: 35%; }



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

#career .career_img { width: 90%; margin: 0 0 0 auto; }
#career .bg {
margin: -200px auto 0;
padding: 150px 0 150px;
background: linear-gradient(90deg, #00488a, #087fba);
}

#career .txtbox { width: 80%; margin: 0 auto; color: #fff; }
#career h3 {
position: relative;
display: inline-block;
font-size: 5em;
margin: 0 0 30px;
padding: 20px 80px 0 0;
background: linear-gradient(90deg, #054d8f, #00669a);
}
#career h3 span {
font-size: 1.8rem;
background: #fff;
color: #00488a;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
margin-left: 30px;
}


.history { position: relative; margin: 100px auto 0; padding-bottom: 50px; }
.history::before {
content: "";
width: 1px;
height: 100%;
background: orange;
position: absolute;
transform: translateX(-50%);
}

.history h4 { text-align: center; color: #054d8f; }
.history h4 span {
position: relative;
display: inline-block;
font-size: 1.2em;
margin: 0 auto 50px;
background: #fff;
padding: 10px 40px;
border: 2px solid #054d8f;
border-radius: 50px;
}

.history .history__item { position: relative; display: flex; padding: 0 0 35px 20px; }
.history .history__item:nth-of-type(2n) { justify-content: flex-end; }
.history .history__item::before {
content: "";
width: 8px;
height: 8px;
background: orange;
position: absolute;
border-radius: 50%;
left: 0;
transform: translateX(-50%);
}

.history .history__inner { width: 45%; }
.history .history__text { letter-spacing: 0.05em; }
.history .history__text h5 { font-size: 1.6em; margin-bottom: 20px; }
.history .history__text ul { margin-top: 20px; background: #f2f7ff; padding: 20px; }
.history .history__text ul li { font-size: 0.8em; margin-bottom: 5px; color: #333; }
.history .history__text 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;
}
.history .history__text ul li:first-child::before {
content: '▽';
position: absolute;
top: 0; left: 0;
color: #FF0004;
}

.history .history__item:nth-of-type(2n+1) .history__text h5,
.history .history__item:nth-of-type(2n+1) .history__text p { text-align: right; }


/* pcのみ */
.history::before { left: 50%; }
.history .history__item { padding: 0; }
.history .history__item:nth-of-type(2n) { justify-content: flex-end; }
.history .history__item::before { left: 50%; top: 0; width: 10px; height: 10px; }



/* interview
--------------------------------------------*/
#interview { position: relative; margin-bottom: 100px; padding: 150px 0; background: #f2f5fc; }

#interview h3 { font-size: 5em; margin: 0 0 30px 10%; }
#interview h3 span {
font-size: 1.8rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
margin-left: 30px;
}


#interview .swiper { width: 90%; margin: 100px 0 0 auto; position: relative; padding: 0 30px 80px 0; overflow: hidden; }
#interview .swiper ul { padding-bottom: 50px; }
#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 {
background: linear-gradient(to top, rgba(1, 82, 147, 0.8) 0%, rgba(28, 44, 67, 0) 60%);
padding: 100px 20px 20px;
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
}
#interview .swiper ul li .txt h4 { font-size: 1.1em; font-weight: 500; }
#interview .swiper ul li .txt h4 span { font-size: 0.8em; margin-left: 15px; }

#interview .swiper .swiper-prev,
#interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
bottom: 0;
display: block;
border-radius: 50%;
width: 60px;
height: 60px;
border: 1px solid #0659a2;
text-align: center;
}
#interview .swiper .swiper-prev { right: 10%; }
#interview .swiper .swiper-next { right: 3%; }
#interview .swiper .swiper-prev::before,
#interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 25px;
line-height: 2.5;
opacity: 1;
color: #0659a2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#interview .swiper .swiper-prev::before { content: "←"; }
#interview .swiper .swiper-next::before { content: "→"; }

#interview .swiper .swiper-scrollbar { position: unset; width: 100%; height: 3px; background: #e9e9e9; }
#interview .swiper .swiper-scrollbar .swiper-scrollbar-drag { background: #00488a; }



/* welfare
--------------------------------------------*/
#welfare { position: relative; margin: 0 auto 200px; }

#welfare h3 { font-size: 5em; width: 80%; margin: 0 auto 60px; }
#welfare h3 span {
font-size: 1.8rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
margin-left: 30px;
}

#welfare .flex_wrap { width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
#welfare .flex_wrap .box { position: relative; width: 50%; }
#welfare .flex_wrap .box .img { position: relative; }
#welfare .flex_wrap .box .txt {
background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%);
padding: 100px 20px 30px;
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
}
#welfare .flex_wrap .box .txt h4 { font-size: 1.6em; margin-bottom: 10px; }
#welfare .flex_wrap .box .txt .button { margin-top: 50px; }



	
}





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

/* slider
--------------------------------------------*/
#mv { position: relative; z-index: 1; }
.slider { width: 90%; margin: 0 0 0 auto; }
.slider li { background-repeat: no-repeat; background-size: cover; background-position: center; height: 60vh; 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; }


/*loop_wrap
-------------------------------*/
article { position: absolute; width: 90%; bottom: 0; right: 0; z-index: 100; }
article .loop_wrap { display: flex; width: 100%; overflow: hidden; margin: 0 auto 0; }
article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 7rem;
font-family: "Roboto", sans-serif;
font-weight:200;
line-height:1;
overflow: hidden;
color: rgba(255, 255, 255, 0.3);
}
article .loop_wrap div:nth-child(odd) { animation: txtloop 70s -35s linear infinite; }
article .loop_wrap div:nth-child(even) { animation: txtloop2 70s linear infinite; }


.slider_txt_box { position: absolute; bottom: 15%; left: 12%; }
.slider_txt_box h2 { font-size: 5.2vw; font-weight: 700; color: #00488a; text-shadow: 0 0px 7px rgb(255, 255, 255); }

.kv__scroll {
position: absolute;
left: 4%;
bottom: 100px;
padding-bottom: 90px;
writing-mode: vertical-rl;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 1;
transition: all .3s;
}
.kv__scroll::after {
content: "";
position: absolute;
left: 50%;
top: 63px;
display: block;
width: 1px;
height: 0;
background: #1e1e1e;
transition: all .3s;
transform-origin: top;
animation: scroll-bar 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}




/* vision
--------------------------------------------*/
#vision {
position: relative;
margin: -100px auto 0;
background: linear-gradient(90deg, #00488a, #087fba);
padding: 120px 0 100px;
z-index: 0;
}

#vision .flex_wrap { width: 90%; margin: auto; }
#vision .flex_wrap .txtbox { color: #fff; }
#vision .flex_wrap .txtbox h3 { font-size: 3em; margin-bottom: 10px; }
#vision .flex_wrap .txtbox h4 { font-size: 1.4em; }
#vision .flex_wrap .txtbox .txt { margin-top: 30px; line-height: 2; }

#vision .flex_wrap .imgbox { position: relative; margin-top: 70px; }
#vision .flex_wrap .imgbox h5 {
position: absolute;
top: -40px; left: 20px;
writing-mode: vertical-rl;
font-size: 0.9em;
background: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}
#vision .flex_wrap .imgbox .img01 { width: 80%; }
#vision .flex_wrap .imgbox .img02 { width: 75%; margin: -5% 0% 0 25%; }



/* about
--------------------------------------------*/
#about { position: relative; margin: 0 auto; padding: 100px 0 150px; background: #f2f5fc; }

#about .flex_wrap { width: 90%; margin: auto; }
#about .flex_wrap .txtbox h3 { font-size: 3em; margin-bottom: 10px; }
#about .flex_wrap .txtbox h4 { font-size: 1.4em; }
#about .flex_wrap .txtbox .txt { margin-top: 30px; line-height: 2; }

#about .flex_wrap .imgbox { position: relative; margin-top: 70px; }
#about .flex_wrap .imgbox h5 {
position: absolute;
top: -40px; left: 20px;
writing-mode: vertical-rl;
font-size: 0.9em;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}
#about .flex_wrap .imgbox .img01 { width: 80%; }
#about .flex_wrap .imgbox .img02 { width: 75%; margin: -5% 0 0 25%; }

#about article { width: 100%; }
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 5em;
font-family: "Roboto", sans-serif;
font-weight:200;
line-height:1;
overflow: hidden;
color: #d0d8ea;
}



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

#person .person_img { width: 100%; margin: 0; }
#person .bg {
position: relative;
width: 90%;
margin: -50px auto 0;
padding: 20px 20px 0px;
background: #fff;
box-sizing: border-box;
}

#person h3 { font-size: 3em; margin: 0 0 10px; }
#person h3 span {
display: table;
font-size: 1.4rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}
#person h4 { font-size: 1.4em; }
#person .txt { margin-top: 30px; line-height: 2; }


#person ul li { margin-top: 50px; padding: 20px 30px; border: 1px solid #00488a; }
#person ul li .txtbox {  }
#person ul li .txtbox h5 { font-size: 1.2em; margin-bottom: 20px; }
#person ul li .txtbox h5 span { position: relative; display: table; font-size: 0.9em; padding: 0 30px 0 0; margin-bottom: 10px; }
#person ul li .txtbox h5 span::after {
content: '';
background: linear-gradient(90deg, #00488a, #087fba);
width: 20px; height: 2px;
position: absolute;
top: 50%; right: 0;
}
#person ul li .txtbox .txt { margin-top: 40px; line-height: 2; }

#person ul li .imgbox { margin-top: 30px; }



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

#career .career_img { width: 90%; margin: 0 0 0 auto; }
#career .bg {
margin: -200px auto 0;
padding: 150px 0 50px;
background: linear-gradient(90deg, #00488a, #087fba);
}

#career .txtbox { width: 90%; margin: 0 auto; color: #fff; }
#career h3 {
position: relative;
display: inline-block;
font-size: 3em;
margin: 0 0 10px;
padding: 20px 20px 0 0;
background: linear-gradient(90deg, #054d8f, #00669a);
}
#career h3 span {
display: table;
font-size: 1.4rem;
background: #fff;
color: #00488a;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}


.history { position: relative; margin: 60px auto 0; padding-bottom: 50px; }
.history::before {
content: "";
width: 1px;
height: 100%;
background: orange;
position: absolute;
transform: translateX(-50%);
}

.history h4 { text-align: center; color: #054d8f; }
.history h4 span {
position: relative;
display: inline-block;
font-size: 1.2em;
margin: 0 auto 50px;
background: #fff;
padding: 10px 40px;
border: 2px solid #054d8f;
border-radius: 50px;
}

.history .history__item { position: relative; display: flex; padding: 0 0 35px 20px; }
.history .history__item::before {
content: "";
width: 8px;
height: 8px;
background: orange;
position: absolute;
border-radius: 50%;
left: 0;
transform: translateX(-50%);
}

.history .history__inner {  }
.history .history__text { letter-spacing: 0.05em; }
.history .history__text h5 { font-size: 1.2em; margin-bottom: 20px; }
.history .history__text p { font-size: 0.8em; }
.history .history__text ul { margin-top: 20px; background: #f2f7ff; padding: 10px; }
.history .history__text ul li { font-size: 0.8em; margin-bottom: 5px; color: #333; }
.history .history__text ul li:first-child {
position: relative;
font-size: 0.9em;
font-weight: 800;
border-bottom: 1px dashed;
padding: 0 0 5px 1.3em;
margin: 0 0 10px 0em;
}
.history .history__text ul li:first-child::before {
content: '▽';
position: absolute;
top: 0; left: 0;
color: #FF0004;
}



/* interview
--------------------------------------------*/
#interview { position: relative; margin-bottom: 50px; padding: 50px 0; background: #f2f5fc; }

#interview h3 { width: 90%; font-size: 3em; margin: 0 auto 10px; }
#interview h3 span {
display: table;
font-size: 1.4rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}


#interview .swiper { width: 90%; margin: 50px 0 0 auto; position: relative; padding: 0 30px 80px 0; overflow: hidden; }
#interview .swiper ul { padding-bottom: 50px; }
#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 {
background: linear-gradient(to top, rgba(1, 82, 147, 0.8) 0%, rgba(28, 44, 67, 0) 60%);
padding: 100px 20px 20px;
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
}
#interview .swiper ul li .txt h4 { font-size: 1.1em; font-weight: 500; }
#interview .swiper ul li .txt h4 span { font-size: 0.8em; margin-left: 15px; }

#interview .swiper .swiper-prev,
#interview .swiper .swiper-next{
font-size: 0;
line-height: 0;
position: absolute;
bottom: 0;
display: block;
border-radius: 50%;
width: 60px;
height: 60px;
border: 1px solid #0659a2;
text-align: center;
}
#interview .swiper .swiper-prev { right: 25%; }
#interview .swiper .swiper-next { right: 3%; }
#interview .swiper .swiper-prev::before,
#interview .swiper .swiper-next::before
{
font-family: 'slick';
font-size: 25px;
line-height: 2.5;
opacity: 1;
color: #0659a2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#interview .swiper .swiper-prev::before { content: "←"; }
#interview .swiper .swiper-next::before { content: "→"; }

#interview .swiper .swiper-scrollbar { position: unset; width: 100%; height: 3px; background: #e9e9e9; }
#interview .swiper .swiper-scrollbar .swiper-scrollbar-drag { background: #00488a; }



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

#welfare h3 { font-size: 3em; margin: 0 0 10px; }
#welfare h3 span {
display: table;
font-size: 1.4rem;
background: linear-gradient(90deg, #00488a, #087fba);
color: #fff;
line-height: 1;
letter-spacing: .12em;
padding: 10px;
}

#welfare .flex_wrap { margin-top: 50px; }
#welfare .flex_wrap .box { position: relative; }
#welfare .flex_wrap .box .img { position: relative; }
#welfare .flex_wrap .box .txt {
background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 90%);
padding: 60px 20px 30px;
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
}
#welfare .flex_wrap .box .txt h4 { font-size: 1.2em; margin-bottom: 10px; }
#welfare .flex_wrap .box .txt .button { margin-top: 30px; }

}