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

#conWrap {
    background-color: #0000c8;
}

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

}


/* #topmain
----------------------------------------- */
#topmain {
    width: 100%;
    height: 100vh;
}

#topmain .inner {
    max-width: none;
    width: 100%;
	height: 100%;
}

#topmain .topmain_layout {
    width : 100%;
	height: 100%;
    display: flex;
    justify-content: space-between;
	position: relative;
}

#topmain .swiper-container,
#topmain .swiper-wrapper,
#topmain .swiper-slide {
	width: 100%;
    height: 100%;
}

#topmain .swiper-slide {
    width: 100% !important;
	display: flex;
    align-items: center;
    justify-content: center;
}
#topmain .slide_wrap {
    width: 100%;
    height: 100%;
}
#topmain .slide_wrap img {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

#topmain .topmain_layout .txt_wrap {
    position: absolute;
    left: calc(80/1920*100%);
    bottom: 8rem;
    z-index: 2;
}
#topmain .topmain_layout .txt_wrap .ttl {
    display: flex;
    flex-flow: column;
    gap: 3rem;
    color: #0096fa;
}
#topmain .topmain_layout .txt_wrap .ttl .en {
    font-size: 16rem;
    letter-spacing: -0.02em;
    line-height: calc(150/160)
}
#topmain .topmain_layout .txt_wrap .ttl .jp {
    font-size: 3.8rem;
    letter-spacing: 0.18em;
    font-weight: 700;
}

#topmain .slider_wrap.is_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
#topmain {
	/*height : calc(100vh - 8rem);
    height : calc(calc(var(--vh, 1vh) * 100) - 8rem);*/
    height: 100vh;
    /*height: calc(100dvh - 7rem);*/
    height: 100dvh;
    padding: 0;
}
#topmain .slider_wrap.is_fixed {
    /*height: calc(100dvh - 7rem);*/
}
#topmain .topmain_layout .txt_wrap {
    left: 3rem;
    bottom: 3rem;
}
#topmain .topmain_layout .txt_wrap .ttl {
    gap: 1.5rem;
}
#topmain .topmain_layout .txt_wrap .ttl .en {
    font-size: 7.5rem;
    letter-spacing: -0.02em;
    line-height: calc(68/80)
}
#topmain .topmain_layout .txt_wrap .ttl .jp {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
}

}


/* #strength
----------------------------------------- */
#strength {
    position: relative;
    z-index: 1;
}
#strength::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /*background: #0096FA;
    background: linear-gradient(0deg, rgba(0, 150, 250, 1) 0%, rgba(0, 0, 200, 1) 100%);*/
    
    background: #0096FA;
    background: linear-gradient(0deg, rgba(0, 150, 250, 1) 0%, rgba(0, 0, 200, 0) 90%);
}
#strength .inner {
    max-width: 136rem;
    padding-top: 28rem;
    padding-bottom: 30rem;
}
#strength .layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#strength .img_wrap {
    width: calc(550/1360*100%);
    display: flex;
    flex-flow: column;
    gap: 10rem;
}
#strength .img_wrap .img_1 {
    width: 100%;
    aspect-ratio: 700 / 560;
    margin-left: calc(calc(100vw - 136rem) / 2);
}
@media only screen and (max-width: 1480px) {
#strength .img_wrap .img_1 {
    margin-left: 8rem;
}
}
#strength .img_wrap .img_1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#strength .img_wrap .img_2 {
    margin-top: auto;
    width: 100%;
    aspect-ratio: 550 / 360;
}
#strength .img_wrap .img_2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#strength .txt_wrap {
    width: auto;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    color: #FFFFFF;
}
#strength .ttl {
    font-size: 2.5rem;
    line-height: calc(62/25);
    font-weight: 700;
    letter-spacing: 0.05em;
}
#strength .txt {
    margin-top: 5rem;
    font-size: 1.8rem;
    line-height: calc(50/18);
}
#strength .btn_wrap {
    margin-top: 10rem;
}

@media only screen and (max-width: 768px) {
#strength::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /*background: #0096FA;
    background: linear-gradient(0deg, rgba(0, 150, 250, 1) 0%, rgba(0, 0, 200, 1) 100%);*/
    
    background: #0096FA;
    background: linear-gradient(0deg, rgba(0, 150, 250, 1) 0%, rgba(0, 0, 200, 0) 90%);
}
#strength .inner {
    max-width: 32rem;
    padding-top: 6rem;
    padding-bottom: 7rem;
}
#strength .layout {
    width: 100%;
    flex-flow: column;
    gap: 7rem;
}
#strength .img_wrap {
    width: 32rem;
    display: flex;
    flex-flow: column;
    gap: 0;
}
#strength .img_wrap .img_1 {
    width: 35rem;
    aspect-ratio: 350 / 280;
    margin-left: 3.5rem;
}
#strength .img_wrap .img_2 {
    margin-top: 5rem;
    margin-left: -3.5rem;
    width: 100%;
    aspect-ratio: 275 / 180;
}

#strength .ttl {
    font-size: 1.8rem;
    line-height: calc(38/18);
}
#strength .txt {
    margin-top: 4rem;
    font-size: 1.5rem;
    line-height: calc(34/15);
}
#strength .btn_wrap {
    margin-top: 4rem;
}
#strength .btn_wrap .btn {
    gap: 2.5rem;
    padding: 2.5rem 3rem;
}
#strength .btn_wrap .btn span {
    font-size: 1.2rem;
}
}


/* #about
----------------------------------------- */
#about {
    position: relative;
    z-index: 1;
}
#about .inner {
    width: 100%;
    max-width: none;
    padding-top: 15rem;
    padding-bottom: 20rem;
}
#about .img_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#about .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#about .txt_wrap {
    margin-left: calc(80/1920*100%);
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    color: #FFFFFF;
}
#about .txt_wrap .sec_ttl {
    padding: 4rem 8rem 4rem 0;
    position: relative;
    z-index: 1;
}
#about .txt_wrap .sec_ttl::after {
    content: '';
    display: block;
    width: calc(100% + 16rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: -16rem;
    z-index: -1;
    background-color: #008cf0;
    
    transition: all .6s;
    transform: translateX(-101%);
}
#about.anim_show .txt_wrap .sec_ttl::after {
    transform: translateX(0%);
}

#about .txt_wrap .txt {
    margin-top: 6rem;
}
#about .txt_wrap .btn_wrap {
    margin-top: 6rem;
}

@media only screen and (max-width: 768px) {
#about .inner {
    padding-top: 7rem;
    padding-bottom: 9rem;
}
#about .txt_wrap {
    margin-left: 3.5rem;
}
#about .txt_wrap .sec_ttl {
    padding: 2rem 2rem 2rem 0;
}
#about .txt_wrap .sec_ttl::after {
    width: calc(100% + 3.5rem);
    left: -3.5rem;
}

#about .txt_wrap .txt {
    margin-top: 3rem;
    font-size: 1.5rem;
    line-height: calc(30/15);
}
#about .txt_wrap .btn_wrap {
    margin-top: 3rem;
}
}


/* #service
----------------------------------------- */
#service {
    background-color: #ebf0f5;
}
#service .inner {
    /*width: calc(100% - 32rem);*/
    /*max-width: calc(100% - 32rem);*/
    padding-top: 18rem;
    padding-bottom: 18rem;
    position: relative;
    z-index: 1;
}

#service .sec_ttl {
    padding: 4rem 0 4rem 8rem;
    position: absolute;
    z-index: 2;
    top: 30rem;
    right: 0;
    color: #FFFFFF;
}
#service .sec_ttl::after {
    content: '';
    display: block;
    width: calc(100% + 16rem);
    height: 100%;
    position: absolute;
    top: 0;
    right: -16rem;
    z-index: -1;
    background-color: #008cf0;
    transition: all .6s;
    transform: translateX(101%);
}
#service.anim_show .sec_ttl::after {
    transform: translateX(0%);
}

#service .layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem;
}
#service .layout .con {
    width: 100%;
    height: 52rem;
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
}
#service .layout .con:first-child {
    grid-column: 1 / 3;
    height: 78rem;
}
#service .layout .con a:hover {
    opacity: 1;
}

#service .layout .con .img_wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}
#service .layout .con .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#service .layout .con .img_wrap::before {
    content: '';
    display: block;
    width: 100%;
    height: 45%;
    position: absolute;
    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(50, 50, 50, 1) 100%);
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all .6s;
}
#service .layout .con a:hover .img_wrap::before {
    /*opacity: 0;*/
}
#service .layout .con .txt_wrap {
    padding: 5rem;
    z-index: 2;
    color: #FFFFFF;
    position: relative;
}
#service .layout .con .txt_wrap .ttl {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}
#service .layout .con .txt_wrap .ttl .jp {
    font-size: 3.2rem;
    line-height: calc(56/32);
    font-weight: 700;
}
#service .layout .con .txt_wrap .txt {
    margin-top: 1rem;
    padding-right: 10rem;
}

#service #btn_arrow {
    width: 8rem;
    height: 8rem;
    position: absolute;
    bottom: 5rem;
    right: 6rem;
    z-index: 2;
}
#service #btn_arrow .cls-1{fill:transparent; transition: all .6s;}
#service #btn_arrow .cls-2{fill:#FFFFFF; transition: all .6s;}
#service #btn_arrow .cls-3{fill:#FFFFFF; transition: all .6s;}

#service a:hover #btn_arrow .cls-1{fill:#008cf0;}
#service a:hover #btn_arrow .cls-2{fill:#FFFFFF;}
#service a:hover #btn_arrow .cls-3{fill:#008cf0;}


#service .layout .con.ptn2 {
    width: 100%;
    height: 16rem;
    background-color: #ffffff;
}
#service .layout .con.ptn2 a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
#service .layout .con.ptn2 .txt_wrap {
    position: relative;
    bottom: auto;
    left: auto;
    color: #333333;
    padding: 5rem;
}
#service .layout .con.ptn2 #btn_arrow {
    width: 8rem;
    height: 8rem;
    position: absolute;
    bottom: 50%;
    right: 6rem;
    transform: translateY(50%);
    z-index: 2;
}

#service .layout .con.ptn2 #btn_arrow .cls-1{fill:transparent; transition: all .6s;}
#service .layout .con.ptn2 #btn_arrow .cls-2{fill:#008cf0; transition: all .6s;}
#service .layout .con.ptn2 #btn_arrow .cls-3{fill:#008cf0; transition: all .6s;}

#service .layout .con.ptn2 a:hover #btn_arrow .cls-1{fill:#008cf0;}
#service .layout .con.ptn2 a:hover #btn_arrow .cls-2{fill:#FFFFFF;}
#service .layout .con.ptn2 a:hover #btn_arrow .cls-3{fill:#008cf0;}


#service .inner > .btn_wrap {
    margin-top: 12rem;
}

@media only screen and (max-width: 768px) {
#service .inner {
    width: 33rem;
    max-width: none;
    padding-top: 14rem;
    padding-bottom: 8rem;
}

#service .sec_ttl {
    padding: 2rem 0 2rem 2rem;
    top: 7rem;
}
#service .sec_ttl::after {
    width: calc(100% + 3.5rem);
    right: -3.5rem;
}

#service .layout {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 3rem;
}
#service .layout .con {
    width: 100%;
    height: 40rem;
}
#service .layout .con:first-child {
    grid-column: 1 / 2;
    height: 50rem;
}

#service .layout .con .img_wrap::before {
    content: '';
    display: block;
    width: 100%;
    height: 55%;
    position: absolute;
    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(50, 50, 50, 1) 100%);
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all .6s;
}

#service .layout .con .txt_wrap {
    padding: 2.5rem;
    padding-bottom: 1.5rem;
}
#service .layout .con .txt_wrap .ttl .jp {
    font-size: 2.2rem;
    line-height: calc(38/22);
}
#service .layout .con .txt_wrap .txt {
    margin-top: 2rem;
    font-size: 1.4rem;
    padding-right: 0;
}
#service .layout .con .txt_wrap .txt br {
    display: none;
}

#service #btn_arrow {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: auto;
    top: 2rem;
    right: 2.5rem;
    z-index: 2;
}


#service .layout .con.ptn2 {
    height: 16rem;
}
#service .layout .con.ptn2 a {
}
#service .layout .con.ptn2 .txt_wrap {
    padding: 2.5rem;
}
#service .layout .con.ptn2 #btn_arrow {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: auto;
    top: 2rem;
    right: 2.5rem;
    transform: translateY(0);
    z-index: 2;
}

#service .inner > .btn_wrap {
    margin-top: 5rem;
}
}


/* #recruit
----------------------------------------- */
#recruit {
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
}

#recruit > .img_wrap {
    width: 100%;
    height: 97rem;
}
#recruit > .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#recruit .inner {
    /*width: calc(100% - 32rem);*/
    /*max-width: 160rem;*/
    max-width: none;
}

#recruit .sec_ttl {
    padding: 4rem 8rem 4rem 0;
    position: absolute;
    z-index: 2;
    top: 61rem;
    left: calc(80/1920*100%);
    color: #008cf0;
}
#recruit .sec_ttl::after {
    content: '';
    display: block;
    width: calc(100% + 16rem);
    height: 100%;
    position: absolute;
    top: 0;
    left: -16rem;
    z-index: -1;
    background-color: #FFFFFF;
    transition: all .6s;
    transform: translateX(-101%);
}
#recruit.anim_show .sec_ttl::after {
    transform: translateX(0%);
}

#recruit .layout {
    margin-top: -7rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#recruit .layout .txt_wrap {
    width: calc(770/1620*100%);
    display: flex;
    flex-flow: column;
    gap: 4rem;
}
#recruit .layout .txt_wrap .ttl {
    font-size: 3.2rem;
    line-height: calc(56/32);
    letter-spacing: 0.05em;
    font-weight: 700;
}
#recruit .layout .txt_wrap .txt {
    line-height: calc(38/16);
}

#recruit .layout .btn_list {
    width: calc(630/1620*100%);
    display: flex;
    flex-flow: column;
    gap: 4rem;
}
#recruit .layout .btn_list .con a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.5rem 0 3.5rem 8rem;
    position: relative;
    z-index: 1;
}
#recruit .layout .btn_list .con a:hover {
    opacity: 1;
}
#recruit .layout .btn_list .con a::after {
    content: '';
    display: block;
    width: calc(100% + 16rem);
    height: 100%;
    position: absolute;
    top: 0;
    right: -16rem;
    z-index: -1;
    background: #008cff;
    background: linear-gradient(90deg, rgba(0, 140, 255, 1) 0%, rgba(0, 0, 180, 1) 100%);
}
#recruit .layout .btn_list .con a .txt {
    font-size: 2.4rem;
    font-weight: 700;
    color: #FFFFFF;
}

#recruit #btn_arrow {
    width: 6rem;
    height: 6rem;
}
#recruit #btn_arrow .cls-1{fill:transparent; transition: all .6s;}
#recruit #btn_arrow .cls-2{fill:#FFFFFF; transition: all .6s;}
#recruit #btn_arrow .cls-3{fill:#FFFFFF; transition: all .6s;}

#recruit a:hover #btn_arrow .cls-1{fill:#FFFFFF;}
#recruit a:hover #btn_arrow .cls-2{fill:#333333;}
#recruit a:hover #btn_arrow .cls-3{fill:#FFFFFF;}


@media only screen and (max-width: 768px) {
#recruit > .img_wrap {
    width: 100%;
    height: 52rem;
}

#recruit .inner {
    width: 32rem;
}

#recruit .sec_ttl {
    padding: 2rem 2rem 2rem 0;
    position: absolute;
    z-index: 2;
    top: 36rem;
    left: 3.5rem;
}
#recruit .sec_ttl::after {
    width: calc(100% + 3.5rem);
    left: -3.5rem;
}

#recruit .layout {
    margin-top: 4rem;
    width: 100%;
    flex-flow: column;
    gap: 5rem;
}
#recruit .layout .txt_wrap {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 2rem;
}
#recruit .layout .txt_wrap .ttl {
    font-size: 2.2rem;
    line-height: calc(40/22);
    white-space: nowrap;
}
#recruit .layout .txt_wrap .txt {
    font-size: 1.5rem;
    line-height: calc(34/15);
}

#recruit .layout .btn_list {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 2rem;
}
#recruit .layout .btn_list .con a {
    padding: 1.75rem 0 1.75rem 2.5rem;
}
#recruit .layout .btn_list .con a:hover {
    opacity: 1;
}
#recruit .layout .btn_list .con a::after {
    width: calc(100% + 3.5rem);
    right: -3.5rem;
}
#recruit .layout .btn_list .con a .txt {
    font-size: 1.7rem;
}

#recruit #btn_arrow {
    width: 3.5rem;
    height: 3.5rem;
}
}


/* #interview_list
----------------------------------------- */
#interview_list {
    background-color: #FFFFFF;
}
#interview_list .inner {
}
#interview_list .interview_list_wrap {
    margin-top: 0;
}

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

}


/* #post_list_wrap
----------------------------------------- */
#post_list_wrap {
    background-color: #ebf0f5;
}
#post_list_wrap .inner {
}
#post_list_wrap .layout {
    flex-flow: row;
}

#post_list_wrap .layout .side {
    align-items: flex-start;
    padding-left: calc(80 / 1920 * 100%);
}
#post_list_wrap .layout .main {
    padding-right: calc(80 / 1920 * 100%);
}

#post_list_wrap h2.sec_ttl {
    color: #008cf0;
}

#post_list_wrap .post_list_wrap {
    max-width: 98rem;
}

#post_list_wrap .more_btn_wrap {
    margin-top: 4rem;
    margin-left: auto;
}
#post_list_wrap .more_btn_wrap a {
    display: flex;
    align-items: center;
    gap: 2rem;
}
#post_list_wrap .more_btn_wrap a:hover {
    opacity: 1;
}
#post_list_wrap .more_btn_wrap a span {
    font-weight: 700;
}
#post_list_wrap .more_btn_wrap #btn_arrow {
    width: 4rem;
    height: 4rem;
}
#post_list_wrap .more_btn_wrap #btn_arrow .cls-1{fill:#969696; transition: all .6s;}
#post_list_wrap .more_btn_wrap #btn_arrow .cls-2{fill:#FFFFFF; transition: all .6s;}
#post_list_wrap .more_btn_wrap #btn_arrow .cls-3{fill:#969696; transition: all .6s;}

#post_list_wrap .more_btn_wrap a:hover #btn_arrow .cls-1{fill:#969696;}
#post_list_wrap .more_btn_wrap a:hover #btn_arrow .cls-2{fill:#FFFFFF;}
#post_list_wrap .more_btn_wrap a:hover #btn_arrow .cls-3{fill:#969696;}

@media only screen and (max-width: 768px) {
#post_list_wrap .inner {
    width: 32rem;
}
#post_list_wrap .layout {
    flex-flow: column;
}
#post_list_wrap .layout .side {
    padding-top: 6rem;
    padding-bottom: 0;
    padding-left: 0;
    align-items: flex-start;
}
#post_list_wrap .layout .main {
    padding: 0;
    padding-top: 4rem;
    padding-bottom: 7rem;
}
    
#post_list_wrap .more_btn_wrap {
    margin-top: 3rem;
}
#post_list_wrap .more_btn_wrap a {
    gap: 1.5rem;
}
#post_list_wrap .more_btn_wrap a span {
    font-size: 1.3rem;
}
#post_list_wrap .more_btn_wrap #btn_arrow {
    width: 3rem;
    height: 3rem;
}
}