@charset "UTF-8";
/* CSS Document */
@keyframes slideranim {
0% {
filter: blur(30px);
transform: scale(1.6);
opacity: 0;
}
100% {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}
@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.1);
}
100% {
transform: scale(1.4); /* 拡大率 */
}
}
/*PC*/
@media print, screen and (min-width: 768px) {
/* mv
--------------------------------------------*/
#mv {
position: relative;
margin: 0 auto 120px;
}
#mv .slider_wrap {
width: 96%;
margin: auto;
border-radius: 1rem;
overflow: hidden;
position: relative;
}
#mv .slider_wrap .red_txt_img {
position: absolute;
top: 4%;
right: 4%;
width: 170px;
z-index: 5;
}
#mv .slider_wrap .sc_mv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 5;
mix-blend-mode: hard-light;
opacity: .2;
}
#mv .slider_wrap .sc_mv::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
#mv .slider_wrap .sc_mv .inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden
}
#mv .slider_wrap .sc_mv .inner video {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 110%;
min-height: 110%
}
#mv .slider_wrap .slider {
width: 100%;
}
#mv .swiper-slide-active {
animation-name: slideranim;
animation-duration: 1.5s;
}
#mv .ttl_box {
position: relative;
width: calc(100% - 8%);
padding-top: 220px;
box-sizing: border-box;
margin: 0 auto 60px;
text-align: center;
}
#mv .ttl_box .m_catch {
font-size: 7.6rem;
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
color: rgb(48, 65, 107);
margin-bottom: 20px;
}
#mv .ttl_box .m_catch span {
background: radial-gradient(circle, #20293b 0%, #2e6eb9 50%, #d9b8cd 80%, rgba(242, 229, 194, .8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mv .ttl_box h1 {
font-size: 2.4rem;
font-weight: 200;
line-height: 1.2;
color: rgb(48, 65, 107);
}
#mv .ttl_box h1 span {
background: radial-gradient(circle, #20293b 0%, #2e6eb9 50%, #d9b8cd 80%, rgba(242, 229, 194, .8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mv .ttl_box h1 em {
font-size: 1rem;
font-weight: 500;
font-style: normal;
line-height: 1;
color: rgb(48, 65, 107);
display: block;
margin-top: 20px;
padding-left: 35px;
position: relative;
}
#mv .ttl_box h1 em::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 1px;
background: rgb(48, 65, 107);
}
#mv .ttl_box .m_txt {
position: absolute;
top: 230px;
right: 0;
color: rgb(48, 65, 107);
font-size: 1.1rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .1rem;
text-align: right;
}
#mv .maker_list {
position: relative;
margin: 30px auto 0;
}
#mv .maker_list .slick-slide {
margin: 0 30px;
}
/* mission
--------------------------------------------*/
#mission {
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#mission article {
overflow: hidden;
}
#mission article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#mission article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 100;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#mission article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#mission article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
#mission .txt_box {
width: 50%;
padding: 0 5%;
box-sizing: border-box;
}
#mission .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#mission .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mission .txt_box .txt {
font-size: 1.2rem;
line-height: 2;
font-weight: 700;
}
#mission .img {
width: 50%;
box-sizing: border-box;
}
#mission .simpleparallax {
width: 100%;
height: 44vh;
overflow: hidden;
margin: 0;
min-width: 1300px;
}
#mission .simpleParallax .parallax {
width: 100%;
}
#mission article {
width: 100%;
overflow: hidden;
margin: 30px 0 -15px;
}
#mission article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#mission article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#mission article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#mission article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

/*why_chosen
--------------------------------------------*/
#why_chosen {
background: url("../images/index/bg_w.jpg") top right no-repeat #f1f4f8;
background-size: 100% auto;
padding:160px 5%;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
#why_chosen .txt_box {
width: 100%;
margin: 0 0 60px;
position: relative;
z-index: 2;
}
#why_chosen .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#why_chosen .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#why_chosen .txt_box .red_ttl {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 30px;
}


#why_chosen .txt_box .read_txt {
margin-bottom: 40px;
font-weight: 600;
font-size: 1.2rem;
line-height: 2;
}

#why_chosen .container {
display: flex;
flex-direction: row;
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
z-index: 2;
margin: 60px auto 0;
}
#why_chosen .items {
flex: 1.5;
list-style: none;
padding: 20px;
}
#why_chosen .items li {
padding: 15px 5px;
box-sizing: border-box;
cursor: pointer;
border-bottom: 1px solid rgba(0, 72, 138, .5);
transition: background 0.3s ease;
}
#why_chosen .items li:last-child {
border-bottom: none;
}
#why_chosen .items li a {
color: #20293b;
}
#why_chosen .items li a .s_ttl {
display: block;
font-size: .6rem;
color: #00488a;
margin-bottom: 10px;
}
#why_chosen .items li a .w_ttl {
font-size: 1.8rem;
font-weight: 300;
line-height: 1;
margin: 0 0 15px;
}
#why_chosen .items li a .w_ttl2 {
font-size: 1.4rem;
font-weight: 300;
line-height: 1.2;
color: #00488a;
margin: 0 0 10px;
}
#why_chosen .items li a .s_txt {
font-size: .9rem;
line-height: 1.6;
}
#why_chosen .items li:hover {
background: rgba(0, 72, 138, .05);
}
#why_chosen .image-box {
flex: 1.5;
display: flex;
align-items: center;
justify-content: center;
background: #222;
padding: 20px;
position: relative;
overflow: hidden;
}
#why_chosen .image-box img {
max-width: 100%;
height: auto;
position: absolute;
opacity: 0;
transform: scale(1.4);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
#why_chosen .image-box img.active {
opacity: 1;
transform: scale(1.2);
}

/* examples_customer
--------------------------------------------*/
#examples_customer {
position: relative;
margin: 0 auto 160px;
}
#examples_customer .txt_box {
width: 90%;
margin: auto;
}

#examples_customer .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#examples_customer .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#examples_customer .swiper {
width: 95%;
margin: -50px 0 0 auto;
position: relative;
overflow: hidden;
padding-right: 80px;
box-sizing: border-box;
}

#examples_customer .swiper ul {
padding: 90px 0px;
}

#examples_customer .swiper ul li {
position: relative;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
padding:15px;
box-sizing: border-box;
border-radius: 1rem;
}

#examples_customer .swiper ul li .hover_wrap {
overflow: hidden;
}

#examples_customer .swiper ul li .hover_wrap .img {
transition: all 0.7s ease;
margin: 0 0 30px;
overflow: hidden;
border-radius:.4rem;
}

#examples_customer .swiper ul li a:hover .hover_wrap .img {
transform: scale(1.1);
}

#examples_customer .swiper ul li .txt {
position: relative;
color: #FFF;
}

#examples_customer .swiper ul li .txt h3 {
font-size: 1.1rem;
line-height: 1;
margin: 0 0 15px;
}

#examples_customer .swiper ul li .txt h4 {
font-size: .9rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 10px;
}

#examples_customer .swiper ul li .txt p {
font-size: .8rem;
line-height: 1.42;
}

#examples_customer .swiper .swiper-slide {
transform: scale(.9);
transform-origin: top;
transition: .7s;
}

#examples_customer .swiper .swiper-slide-active {
transform: scale(1.1);
transform-origin: top left;
margin-right: 50px;
}

#examples_customer .swiper .swiper-prev,
#examples_customer .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;
}

#examples_customer .swiper .swiper-prev {
right: 130px;
}

#examples_customer .swiper .swiper-next {
right: 50px;
}

#examples_customer .swiper .swiper-prev::before,
#examples_customer .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;
}

#examples_customer .swiper .swiper-prev::before {
content: "<";
}

#examples_customer .swiper .swiper-next::before {
content: ">";
}

#examples_customer .red_txt{
font-size: 1.6rem;
font-weight:300;
line-height:1.6;
text-align: center;
margin: 60px 0 0;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* about
--------------------------------------------*/
#about {
position: relative;
margin: 0 auto;
padding:160px 0;
box-sizing: border-box;
overflow: hidden;
}
#about article {
position: absolute;
top: -25px;
left: 0;
overflow: hidden;
}
#about article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#about article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#about article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
#about .section_wrap {
position: relative;
width: 95%;
margin: 0 auto 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
#about .section_wrap .txt_box {
width: 45%;
}
#about .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#about .section_wrap .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#about .txt_box .red_ttl {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 40px;
}

#about .section_wrap .txt_box .read_txt {
margin-bottom: 40px;
font-weight: 600;
font-size: 1.2rem;
line-height: 2;
}
#about .section_wrap .txt_box .cm_btn {
margin: 0 auto 60px 0;
}
#about .section_wrap .txt_box dl {
width: 60%;
margin: 0;
padding: 0;
padding: 10px;
box-sizing: border-box;
border-radius: .6rem;
border: 1px solid rgba(0, 0, 0, .3);
background: rgba(0, 0, 0, .03);
}
#about .section_wrap .txt_box dl dt {
font-size: .7rem;
font-weight: 600;
margin: 0 0 10px;
}
#about .section_wrap .txt_box dl dd {
font-size: .6rem;
}
#about .section_wrap .img {
width: 50%;
position: relative;
overflow: hidden;
}
#about .add-animation {
animation: zoomUp 10s linear 0s normal both;
}
#about .slider6 {
width: 100%;
position: relative;
margin: 100px 0 0;
}
#about .slider6 .slick-slide {
margin: 0 12px;
border-radius: .6rem;
overflow: hidden;
}

/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 160px;
background: url("../images/index/bg_rec.jpg") center center no-repeat;
background-size: cover;
padding: 6.5% 5%;
box-sizing: border-box;
}
#recruit .section_wrap {
position: relative;
margin: 0;
}
#recruit .section_wrap .txt_box {
width: 100%;
}
#recruit .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
color: rgba(255, 255, 255, 1);
}
#recruit .section_wrap .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 40px -5px;
color: rgba(255, 255, 255, 1);
}
#recruit .section_wrap .txt_box .read_txt {
margin-bottom: 60px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
font-size: 1rem;
letter-spacing: 1px;
}
#recruit .section_wrap .txt_box .cm_btn {
margin: 0 auto 0 0;
}

/* news
--------------------------------------------*/
#news {
position: relative;
width: 76%;
margin: 0 auto 160px;
padding: 60px 60px;
box-sizing: border-box;
border-radius: 20px;
background-color: #f1f4f8;
}
#news .section_wrap {
position: relative;
width: 100%;
margin: 0 auto;
}
#news .ttl_en {
display: block;
font-size: 1.4rem;
font-weight: 600;
}
#news .section_wrap h2 {
font-size: 2.4rem;
font-weight: 300;
line-height: 1.6;
margin: 0 0 60px -5px;
}
#news .section_wrap .news_wrap {
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 60px;
}
#news .section_wrap .news_wrap dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1;
margin: 0 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
padding-bottom: 16px;
box-sizing: border-box;
}
#news .section_wrap .news_wrap dl:last-child {
margin-bottom: 0;
}
#news .section_wrap .news_wrap dl dt {
position: relative;
width: 12%;
font-family: "Poppins", sans-serif;
font-weight: 500;
}
#news .section_wrap dl dd {
position: relative;
width: 88%;
}
}

/*sp*/
@media only screen and (max-width: 767px) {
/* mv
--------------------------------------------*/
#mv {
position: relative;
margin: 0 auto 120px;
}
#mv .slider_wrap {
width: 96%;
margin: auto;
border-radius: 1rem;
overflow: hidden;
position: relative;
}
#mv .slider_wrap .red_txt_img {
position: absolute;
top: 4%;
right: 4%;
width: 170px;
z-index: 5;
}
#mv .slider_wrap .sc_mv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 5;
mix-blend-mode: hard-light;
opacity: .2;
}
#mv .slider_wrap .sc_mv::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
#mv .slider_wrap .sc_mv .inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden
}
#mv .slider_wrap .sc_mv .inner video {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 110%;
min-height: 110%
}
#mv .slider_wrap .slider {
width: 100%;
}
#mv .swiper-slide-active {
animation-name: slideranim;
animation-duration: 1.5s;
}
#mv .ttl_box {
position: relative;
width: calc(100% - 8%);
padding-top: 220px;
box-sizing: border-box;
margin: 0 auto 60px;
text-align: center;
}
#mv .ttl_box .m_catch {
font-size: 7.6rem;
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
color: rgb(48, 65, 107);
margin-bottom: 20px;
}
#mv .ttl_box .m_catch span {
background: radial-gradient(circle, #20293b 0%, #2e6eb9 50%, #d9b8cd 80%, rgba(242, 229, 194, .8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mv .ttl_box h1 {
font-size: 2.4rem;
font-weight: 200;
line-height: 1.2;
color: rgb(48, 65, 107);
}
#mv .ttl_box h1 span {
background: radial-gradient(circle, #20293b 0%, #2e6eb9 50%, #d9b8cd 80%, rgba(242, 229, 194, .8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mv .ttl_box h1 em {
font-size: 1rem;
font-weight: 500;
font-style: normal;
line-height: 1;
color: rgb(48, 65, 107);
display: block;
margin-top: 20px;
padding-left: 35px;
position: relative;
}
#mv .ttl_box h1 em::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 1px;
background: rgb(48, 65, 107);
}
#mv .ttl_box .m_txt {
position: absolute;
top: 230px;
right: 0;
color: rgb(48, 65, 107);
font-size: 1.1rem;
font-weight: 300;
line-height: 1.6;
letter-spacing: .1rem;
text-align: right;
}
#mv .maker_list {
position: relative;
margin: 30px auto 0;
}
#mv .maker_list .slick-slide {
margin: 0 30px;
}
/* mission
--------------------------------------------*/
#mission {
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#mission article {
overflow: hidden;
}
#mission article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#mission article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 100;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#mission article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#mission article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
#mission .txt_box {
width: 50%;
padding: 0 5%;
box-sizing: border-box;
}
#mission .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#mission .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#mission .txt_box .txt {
font-size: 1.2rem;
line-height: 2;
font-weight: 700;
}
#mission .img {
width: 50%;
box-sizing: border-box;
}
#mission .simpleparallax {
width: 100%;
height: 44vh;
overflow: hidden;
margin: 0;
min-width: 1300px;
}
#mission .simpleParallax .parallax {
width: 100%;
}
#mission article {
width: 100%;
overflow: hidden;
margin: 30px 0 -15px;
}
#mission article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#mission article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#mission article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#mission article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

/*why_chosen
--------------------------------------------*/
#why_chosen {
background: url("../images/index/bg_w.jpg") top right no-repeat #f1f4f8;
background-size: 100% auto;
padding:160px 5%;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
#why_chosen .txt_box {
width: 100%;
margin: 0 0 60px;
position: relative;
z-index: 2;
}
#why_chosen .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#why_chosen .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#why_chosen .txt_box .red_ttl {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 30px;
}


#why_chosen .txt_box .read_txt {
margin-bottom: 40px;
font-weight: 600;
font-size: 1.2rem;
line-height: 2;
}

#why_chosen .container {
display: flex;
flex-direction: row;
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
z-index: 2;
margin: 60px auto 0;
}
#why_chosen .items {
flex: 1.5;
list-style: none;
padding: 20px;
}
#why_chosen .items li {
padding: 15px 5px;
box-sizing: border-box;
cursor: pointer;
border-bottom: 1px solid rgba(0, 72, 138, .5);
transition: background 0.3s ease;
}
#why_chosen .items li:last-child {
border-bottom: none;
}
#why_chosen .items li a {
color: #20293b;
}
#why_chosen .items li a .s_ttl {
display: block;
font-size: .6rem;
color: #00488a;
margin-bottom: 10px;
}
#why_chosen .items li a .w_ttl {
font-size: 1.8rem;
font-weight: 300;
line-height: 1;
margin: 0 0 15px;
}
#why_chosen .items li a .w_ttl2 {
font-size: 1.4rem;
font-weight: 300;
line-height: 1.2;
color: #00488a;
margin: 0 0 10px;
}
#why_chosen .items li a .s_txt {
font-size: .9rem;
line-height: 1.6;
}
#why_chosen .items li:hover {
background: rgba(0, 72, 138, .05);
}
#why_chosen .image-box {
flex: 1.5;
display: flex;
align-items: center;
justify-content: center;
background: #222;
padding: 20px;
position: relative;
overflow: hidden;
}
#why_chosen .image-box img {
max-width: 100%;
height: auto;
position: absolute;
opacity: 0;
transform: scale(1.4);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
#why_chosen .image-box img.active {
opacity: 1;
transform: scale(1.2);
}

/* examples_customer
--------------------------------------------*/
#examples_customer {
position: relative;
margin: 0 auto 160px;
}
#examples_customer .txt_box {
width: 90%;
margin: auto;
}

#examples_customer .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#examples_customer .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#examples_customer .swiper {
width: 95%;
margin: -50px 0 0 auto;
position: relative;
overflow: hidden;
padding-right: 80px;
box-sizing: border-box;
}

#examples_customer .swiper ul {
padding: 90px 0px;
}

#examples_customer .swiper ul li {
position: relative;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
padding:15px;
box-sizing: border-box;
border-radius: 1rem;
}

#examples_customer .swiper ul li .hover_wrap {
overflow: hidden;
}

#examples_customer .swiper ul li .hover_wrap .img {
transition: all 0.7s ease;
margin: 0 0 30px;
overflow: hidden;
border-radius:.4rem;
}

#examples_customer .swiper ul li a:hover .hover_wrap .img {
transform: scale(1.1);
}

#examples_customer .swiper ul li .txt {
position: relative;
color: #FFF;
}

#examples_customer .swiper ul li .txt h3 {
font-size: 1.1rem;
line-height: 1;
margin: 0 0 15px;
}

#examples_customer .swiper ul li .txt h4 {
font-size: .9rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 10px;
}

#examples_customer .swiper ul li .txt p {
font-size: .8rem;
line-height: 1.42;
}

#examples_customer .swiper .swiper-slide {
transform: scale(.9);
transform-origin: top;
transition: .7s;
}

#examples_customer .swiper .swiper-slide-active {
transform: scale(1.1);
transform-origin: top left;
margin-right: 50px;
}

#examples_customer .swiper .swiper-prev,
#examples_customer .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;
}

#examples_customer .swiper .swiper-prev {
right: 130px;
}

#examples_customer .swiper .swiper-next {
right: 50px;
}

#examples_customer .swiper .swiper-prev::before,
#examples_customer .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;
}

#examples_customer .swiper .swiper-prev::before {
content: "<";
}

#examples_customer .swiper .swiper-next::before {
content: ">";
}

#examples_customer .red_txt{
font-size: 1.6rem;
font-weight:300;
line-height:1.6;
text-align: center;
margin: 60px 0 0;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* about
--------------------------------------------*/
#about {
position: relative;
margin: 0 auto;
padding:160px 0;
box-sizing: border-box;
overflow: hidden;
}
#about article {
position: absolute;
top: -25px;
left: 0;
overflow: hidden;
}
#about article .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}
#about article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: .9;
overflow: hidden;
color: #edf1f7;
}
#about article .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#about article .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}
#about .section_wrap {
position: relative;
width: 95%;
margin: 0 auto 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
#about .section_wrap .txt_box {
width: 45%;
}
#about .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#about .section_wrap .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#about .txt_box .red_ttl {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 40px;
}

#about .section_wrap .txt_box .read_txt {
margin-bottom: 40px;
font-weight: 600;
font-size: 1.2rem;
line-height: 2;
}
#about .section_wrap .txt_box .cm_btn {
margin: 0 auto 60px 0;
}
#about .section_wrap .txt_box dl {
width: 60%;
margin: 0;
padding: 0;
padding: 10px;
box-sizing: border-box;
border-radius: .6rem;
border: 1px solid rgba(0, 0, 0, .3);
background: rgba(0, 0, 0, .03);
}
#about .section_wrap .txt_box dl dt {
font-size: .7rem;
font-weight: 600;
margin: 0 0 10px;
}
#about .section_wrap .txt_box dl dd {
font-size: .6rem;
}
#about .section_wrap .img {
width: 50%;
position: relative;
overflow: hidden;
}
#about .add-animation {
animation: zoomUp 10s linear 0s normal both;
}
#about .slider6 {
width: 100%;
position: relative;
margin: 100px 0 0;
}
#about .slider6 .slick-slide {
margin: 0 12px;
border-radius: .6rem;
overflow: hidden;
}
/* recruit
--------------------------------------------*/
#recruit {
position: relative;
margin: 0 auto 60px;
background: url("../images/index/bg_rec.jpg") center center no-repeat;
background-size: cover;
padding: 6.5% 5%;
box-sizing: border-box;
}
#recruit .section_wrap {
position: relative;
margin: 0;
}
#recruit .section_wrap .txt_box {
width: 100%;
}
#recruit .ttl_en {
display: block;
font-size: 1rem;
font-weight: 600;
color: rgba(255, 255, 255, 1);
}
#recruit .section_wrap .txt_box h2 {
font-size: 1.2rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 30px;
color: rgba(255, 255, 255, 1);
}
#recruit .section_wrap .txt_box .read_txt {
margin-bottom: 30px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
font-size: .8rem;
letter-spacing: 1px;
}
#recruit .section_wrap .txt_box .cm_btn {
margin: 0 auto;
}
#recruit .slider3 {
position: relative;
height: 500px;
overflow: hidden;
}
#recruit .slider3::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(32, 41, 51, .86);
z-index: 1;
}
#recruit .slider3 .slick-list {
overflow: inherit;
}
#recruit .slider3 .slick-slide {
margin: 0;
position: relative;
}
#recruit .slider3 .slick-slide img {
height: 600px;
object-fit: cover;
}

/* news
--------------------------------------------*/
#news {
position: relative;
width: 80%;
margin: 0 auto 60px;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
background-color: #f1f4f8;
}
#news .section_wrap {
position: relative;
width: 100%;
margin: 0 auto;
}
#news .ttl_en {
display: block;
font-size: 1rem;
font-weight: 600;
}
#news .section_wrap h2 {
font-size: 1.2rem;
font-weight: 300;
line-height: 1.6;
margin: 0 0 30px;
}
#news .section_wrap .news_wrap {
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 30px;
}
#news .section_wrap .news_wrap dl {
line-height: 1;
margin: 0 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, .08);
padding-bottom: 16px;
box-sizing: border-box;
}
#news .section_wrap .news_wrap dl:last-child {
margin-bottom: 0;
}
#news .section_wrap .news_wrap dl dt {
position: relative;
width: 100%;
font-family: "Poppins", sans-serif;
font-weight: 500;
margin-bottom: 5px;
}
#news .section_wrap dl dd {
position: relative;
width: 100%;
}

}