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

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

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

@keyframes p_anime {
0%{
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
70%{
-webkit-transform: scale(11);
transform: scale(11);
-webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
box-shadow: 0 0 0 15px rgba(233,30,99, 0);
}
100%{
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}


@keyframes moveFV {
0% {
transform: translateX(30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

@keyframes conceptRotate {
0% {
transform: rotateY(180deg);
opacity: 0;
}
100% {
transform: rotateY(0);
opacity: 1;
}
}

@keyframes zoomUp {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.4); /* 拡大率 */
}
}

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

/*header
--------------------------------------*/
#header.scroll-nav .logo_wrap img{
filter: brightness(1) invert(0);
}

#header .logo_wrap img{
filter: brightness(0) invert(1);
}


#header .menu ul a{
color: #FFF;
}

#header .menu .menu-dropdown-icon a:hover{
color:rgba(33,34,36);
}

#header .menu .menu-dropdown-icon a{
color:#FFF;
}

#header .menu li a:hover{
color:#FFF;
}


#header .menu .menu-dropdown-icon ul li a{
color:rgba(33,34,36);
}

#header .menu .normal-sub a{
color:rgba(33,34,36)!important;
}


#header.scroll-nav .menu a{
color:rgba(33,34,36);
}

#header .hi_menu li a{
color:#FFF;
}

#header.scroll-nav .hi_menu li a{
color:rgba(33,34,36);
}


/* MV
--------------------------------------------*/
.top-hero {
width: 100%;
height: 100vh;
height: 100svh;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
overflow:hidden;
position: relative;
}

.top-hero .top-hero__video {
width: 50%;
position: relative;
height: 100vh;
height: 100svh;
overflow: hidden;
}


.top-hero .top-hero__video::before{
content: "";
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
z-index: 2;
}

.top-hero .top-hero__video video {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%,-50%);
}

.top-hero .top-hero__slider {
width: 50%;
position: relative;
overflow: hidden;
}

.top-hero .top-hero__slider .swiper-slide {
width: 100%;
height: 100vh;
height: 100svh;
position:relative
}

.top-hero .top-hero__slider .swiper-slide .top-hero__bg {
width:100%;
height:100%;
-o-object-fit:cover;
object-fit:cover;
-o-object-position:center center;
object-position:center center;
font-family:"object-fit: cover; object-position: center center;";
-webkit-transition:-webkit-transform 16s linear;
transition:-webkit-transform 16s linear;
-o-transition:transform 16s linear;
transition:transform 16s linear;
transition:transform 16s linear,-webkit-transform 16s linear;
-webkit-transform:scale(1.4);
-ms-transform:scale(1.4);
transform:scale(1.4);
will-change:transform;
}

.top-hero .top-hero__slider .swiper-slide .top-hero__img {
position:absolute;
top:50%;
left:50%;
z-index:5;
overflow:hidden;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
width:384px;
height:408px;
}

/* バックグラウンドズームの設定 */
.top-hero .swiper-slide .top-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 2s ease-in-out; /* アニメーションの速度 */
transform: scale(1.2); /* 初期スケール */
}

.top-hero .swiper-slide.swiper-slide-active .top-hero__bg img {
transform: scale(1); /* アクティブ時のスケール */
transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかになるよう調整 */
}

/* フロント画像ズームの設定 */
.top-hero .swiper-slide .top-hero__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 2s ease-in-out; /* アニメーションの速度 */
transform: scale(1); /* 初期スケール */
}

.top-hero .swiper-slide.swiper-slide-active .top-hero__img img {
transform: scale(1.4); /* アクティブ時のスケール */
transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかになるよう調整 */
}


.top-hero .txt_box{
position: absolute;
top: 30%;
left: 55%;
z-index: 5;
}

.top-hero .txt_box h1{
font-size: 3.6rem;
font-weight: 600;
line-height: 1.6;
color: #FFF;
margin-bottom: 40px;
}

.top-hero .txt_box p{
font-size: 1.3rem;
font-weight: 600;
color: #FFF;
letter-spacing: .4rem;
}

.top-hero article{
overflow: hidden;
position: absolute;
bottom:-5%;
left: 0;
z-index: 5;
}

.top-hero .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

.top-hero .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight:300;
line-height:1;
overflow: hidden;
color: rgba(0,146,177,.5);
}

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


/*about
--------------------------------------------*/
#about{
position: relative;
overflow: hidden;
padding:220px 0 160px;
box-sizing: border-box;
background: #FFFFFF;
}

#about .section_wrap{
position: relative;
z-index: 5;
width: 95%;
margin: 0 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#about .section_wrap .txt_box{
width: 50%;
margin:0 auto;
position: relative;
}

#about .section_wrap .ttl{
}

#about .section_wrap .ttl span{
color: #0a7fd3;
}

#about .section_wrap .red_ttl{
position: relative;
margin-bottom: 80px;
}

#about .section_wrap .red_txt{
position: relative;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 80px;
}

#about .common_btn_box{
text-align: center;
}

#about .section_wrap .img{
width: 45%;
}


/*business
--------------------------------------------*/
#business{
padding:260px 0 180px;
box-sizing: border-box;
position: relative;
}

#business .background-video {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}


#business .background-video::before{
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
}

#business .background-video video {
min-width: 100%;
min-height: 100%;
}


#business .section_wrap{
width:100%;
margin: auto;
position: relative;
}


#business .section_wrap .txt_box{
width: 100%;
margin:0 0 120px;
position: relative;
}

#business .section_wrap .ttl{
text-align: center;
}

#business .section_wrap .ttl_jp{
text-align: center;
color: #FFF;
}

#business .section_wrap .red_ttl{
color: #FFFFFF;
position: relative;
margin-bottom: 40px;
text-align: center;
}

#business .section_wrap .red_txt{
position: relative;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 80px;
text-align: center;
color: #FFFFFF;
}

#business .section_wrap .illust_img{
width: 70%;
margin:0 auto;
mix-blend-mode: hard-light;
}

#business .section_wrap .idx_list{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
background: rgba(0,0,0,.8);
}

#business .section_wrap .idx_list li{
width: 33.1%;
height:360px;
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,155,175,.5);
margin-bottom: .2%
}

#business .section_wrap .idx_list li a{
width: 100%;
display: block;
}

#business .section_wrap .idx_list li .idx_list_box{
padding: 1.5rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
z-index: 10;
position: relative;
}


#business .section_wrap .idx_list li .idx_list_box .txt_box{
width: 80%;
position: relative;
color: #ececec;
margin: 0;
}


#business .section_wrap .idx_list li .idx_list_box .txt_box h3{
font-size:1.8rem;
font-weight: 800;
line-height: 1.3;
margin: 0 0 10px;
position: relative;
color: #FFF;
}

#business .section_wrap .idx_list li .idx_list_box .txt_box h4{
font-size:.9rem;
font-weight: 700;
line-height: 1;
letter-spacing: .1rem;
margin: 0 0 10px;
position: relative;
color: #FFF;
}

#business .section_wrap .idx_list li .idx_list_box .txt_box p{
font-size: .5rem;
color: rgba(0,155,175);
}


#business .section_wrap .idx_list li .idx_list_box .arrow{
width:2.25rem;
height: 2.25rem;
border-radius: 50%;
background: #0a7fd3;
display: flex;
align-items: center;
justify-content: center;
}

#business .section_wrap .idx_list li .idx_list_box .arrow img{
width: 6px;
}

#business .section_wrap .idx_list li .bg{
background: linear-gradient(rgba(51, 51, 51, 0) 0%, #333 80%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
z-index: 5;
}

#business .section_wrap .idx_list li .pic{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#business .section_wrap .idx_list li .pic img{
transform: scale(1.6);
transition: .5s;
}

#business .section_wrap .idx_list li:hover .pic img{
transform: scale(1.8);
transition: .5s;
}


#business .common_btn_box{
text-align: center;
}


/*track　record
--------------------------------------------*/
#track_record{
background: #FFFFFF;
padding:0 0 140px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#track_record .section_wrap{
position: relative;
margin: 0 auto;
z-index: 5;
}

#track_record .section_wrap .mv_img {
width: 100%;
height: 33vw;
margin-left: 8%;
margin-bottom: 6.25vw;
overflow: hidden;
position: relative;
}

#track_record .section_wrap .mv_img img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}


#track_record .section_wrap .txt_box{
width: 84%;
margin:0 auto 40px;
position: relative;
}


#track_record .section_wrap .txt_box .ttl{
margin-bottom: 0;
}

#track_record .section_wrap .txt_box .red_txt{
font-weight: 500;
line-height:2;
text-align: center;
margin-bottom:60px;
}


#track_record .track_record_list{
width: 80%;
margin: 40px auto 60px;
display: flex;
flex-wrap: wrap;
}

#track_record .track_record_list li{
width: 31.5%;
margin-right: 2%;
margin-bottom: 2%;
transition: .5s;
position: relative;
}

#track_record .track_record_list li a{
display: block;
transition: .5s;
color: #121212;
}

#track_record .track_record_list li a:hover{
opacity: .5;
transition: .5s;
}

#track_record .track_record_list li .tag{
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding:10px;
box-sizing: border-box;
font-size: .8rem;
font-weight: 700;
color: #FFF;
line-height: 1;
background:rgb(0, 140, 176);
}

#track_record .track_record_list li:nth-child(3n){
margin-right: 0;
}

#track_record .track_record_list li .img{
border-radius: .5rem;
overflow: hidden;
margin: 0 0 10px;
}

#track_record .track_record_list li h2{
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 10px;
}

#track_record .track_record_list li dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .8rem;
margin: 0 0 20px;
}

#track_record .track_record_list li dl dt{
width: 100px;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px solid rgba(0,155,175,.3);
white-space: nowrap;
font-weight: 500;
}

#track_record .track_record_list li dl dd{
width:calc(100% - 100px);
padding: 5px;
box-sizing: border-box;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.15);
}

#track_record .track_record_list li .btn{
width: 200px;
margin: 0 auto;
background-image: linear-gradient(0deg, rgba(0,100,170, 1), rgba(0,50,125, 1));
transition: .5s;
border-radius: 1rem;
}

#track_record .track_record_list li .btn{
display: block;
font-size: .8rem;
text-align: center;
color: #FFF;
padding: 5px;
box-sizing: border-box;
}


#track_record .business_box{
width: 100%;
margin: 0 auto 60px;
background:url("../images/index/bg_img.jpg") center center no-repeat;
background-size: cover;
padding:7% 5%;
box-sizing: border-box;
}

#track_record .business_box h4{
font-size: 1.8rem;
font-weight: 500;
line-height: 1;
color: #FFF;
text-align: center;
margin: 0 0 80px;
position: relative;
}

#track_record .business_box h4::before{
content: "";
position: absolute;
left: 50%;
bottom: -25px;
margin-left: -25px;
width: 50px;
height: 1px;
background: #FFF000;
}

#track_record .business_box .business_list{
margin: 0 0 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#track_record .business_box .business_list li{
width:49%;
margin-bottom:2%;
background:rgba(0,0,0,.8);
color: #FFF;
box-sizing: border-box;
font-size: 1.2rem;
letter-spacing: .1rem;
font-weight: 700;
border: solid 1px rgba(255,255,255,.4);
}

#track_record .business_box .business_list li span{
padding: 15px;
width: 45px;
height: 100%;
box-sizing: border-box;
background:linear-gradient(0deg, rgba(0,140,176,1), rgba(33,33,33, 1));
margin-right: 15px;
display: inline-block;
}

#track_record .business_box .business_list li:nth-child(3n){
margin-right: 0;
}

#track_record .business_box .dl_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 60px;
}

#track_record .dl_list{
width:31%;
margin: 0 auto;
background:rgba(255,255,255,.9);
border: 1px solid rgba(0,0,0,.6);
}

#track_record .dl_list dt{
background:linear-gradient(0deg, rgba(0,0,0,1), rgba(33,33,33, 1));
padding: 15px;
box-sizing: border-box;
line-height: 1;
color: #FFF;
text-align: center;
font-weight: 700;
letter-spacing: .2rem;
}

#track_record .dl_list dd{
padding: 15px;
font-size: .9rem;
box-sizing: border-box;
}

#track_record .business_box .s_txt{
font-size: .9rem;
font-weight: 500;
line-height: 2;
color: #FFF;
text-align: center;
}

#track_record article{
overflow: hidden;
margin-top: -180px;
}

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

#track_record .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight:300;
line-height:1;
overflow: hidden;
color: rgba(0,155,175,.1);
}

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

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

#track_record .section_wrap .common_btn_box{
margin: 0 auto;
text-align: center;
position: relative;
z-index: 5;
}

/* recruit
--------------------------------------------*/
#recruit{
position: relative;
overflow: hidden;
width: 100%;
padding: 140px 0;
box-sizing: border-box;
z-index: 5;
margin: 0 auto;
}

#recruit::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
}

#recruit .section_wrap{
width: 70%;
margin: 0 auto;
position: relative;
z-index: 5;
}

#recruit .section_wrap .txt_box{
width: 100%;
margin: 0 0 60px;
text-align: center;
}

#recruit .section_wrap .txt_box .ttl{
margin-bottom: 60px;
}

#recruit .section_wrap .txt_box .ttl,
#recruit .section_wrap .txt_box .ttl span,
#recruit .section_wrap .txt_box .red_ttl{
color: #FFF;
}

#recruit .section_wrap .txt_box .red_txt{
font-size: 1.1rem;
font-weight: 600;
color: #FFF;
}

#recruit .common_btn_box{
text-align: center
}

#recruit .move {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

#recruit .move::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url("../images/com/bg_noise.png");
background-repeat:repeat;
background-position:50% 0%;
background-size:8rem auto;
mix-blend-mode:overlay;
opacity:0;
transform:translate3d(0, 0, 0);
z-index: 2;
}

#recruit .move::after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,.5);
z-index: 2;
}

#recruit .move video {
position: relative;
object-fit: cover;
width: 100%;
height: 100%;
}


/* topics
--------------------------------------------*/
#topics{
position: relative;
margin: 0 auto;
background: rgba(0,0,0,.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 140px;
box-sizing: border-box;
z-index: 10;

}

#topics .section_wrap{
width: 70%;
padding:60px 60px;
box-sizing: border-box;
border-radius: 20px;
background-color: #f1f4f8;
margin: auto;
}


#topics .section_wrap .topics_wrap{
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 60px;
}

#topics .section_wrap .ttl{
margin: 0 0 30px;
}

#topics .section_wrap .topics_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;
}

#topics .section_wrap .topics_wrap dl:last-child{
margin-bottom: 0;
}

#topics .section_wrap .topics_wrap dl dt{
position: relative;
width:150px;
font-weight: 500;
}

#topics .section_wrap .topics_wrap  dl dd{
position: relative;
width: calc(100% - 160px);
}

#topics .section_wrap .topics_wrap  dl dd a{
text-decoration: underline;
color: #0a7fd3;
}

#topics .common_btn_box{
text-align: center;
}

/*contact
------------------------------------------*/
#contact {
background: url("../images/index/bg_contact.jpg") center center no-repeat;
background-size: cover;
padding: 120px 15% 120px;
box-sizing: border-box;
position: relative;
z-index: 5;
}

#contact .section_wrap{
position: relative;
color: #FFF;
}

#contact .section_wrap .ttl{
margin-bottom: 40px;
}

#contact .section_wrap .ttl span{
color: #FFF;
}

#contact .section_wrap p{
font-size: 1.1rem;
font-weight: 600;
line-height: 1.6;
}

#contact .section_wrap p span{
display: block;
margin-top: 25px;
font-size: 2rem;
}


#contact .section_wrap .common_btn_box{
margin-top:60px;
}


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



/* MV
--------------------------------------------*/
.top-hero {
width: 100%;
height: calc(100vh - 60px);
height: calc(100svh - 60px);
overflow:hidden;
position: relative;
padding-top: 48px;
box-sizing: border-box;
}

.top-hero .top-hero__video {
width: 100%;
position: relative;
height: 50vh;
height: 50svh;
overflow: hidden;
}


.top-hero .top-hero__video::before{
content: "";
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
z-index: 2;
}

.top-hero .top-hero__video video {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%,-50%);
}

.top-hero .top-hero__slider {
width: 100%;
position: relative;
overflow: hidden;
}

.top-hero .top-hero__slider .swiper-slide {
width: 30%;
height: 50vh;
height: 50svh;
position:relative
}

.top-hero .top-hero__slider .swiper-slide .top-hero__bg {
width:100%;
height:100%;
-o-object-fit:cover;
object-fit:cover;
-o-object-position:center center;
object-position:center center;
font-family:"object-fit: cover; object-position: center center;";
-webkit-transition:-webkit-transform 16s linear;
transition:-webkit-transform 16s linear;
-o-transition:transform 16s linear;
transition:transform 16s linear;
transition:transform 16s linear,-webkit-transform 16s linear;
-webkit-transform:scale(1.4);
-ms-transform:scale(1.4);
transform:scale(1.4);
will-change:transform;
}

.top-hero .top-hero__slider .swiper-slide .top-hero__img {
position:absolute;
top:30%;
left:50%;
z-index:5;
overflow:hidden;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
width:120px;
height:120px;
}

/* バックグラウンドズームの設定 */
.top-hero .swiper-slide .top-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 2s ease-in-out; /* アニメーションの速度 */
transform: scale(1.2); /* 初期スケール */
}

.top-hero .swiper-slide.swiper-slide-active .top-hero__bg img {
transform: scale(1); /* アクティブ時のスケール */
transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかになるよう調整 */
}

/* フロント画像ズームの設定 */
.top-hero .swiper-slide .top-hero__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 2s ease-in-out; /* アニメーションの速度 */
transform: scale(1); /* 初期スケール */
}

.top-hero .swiper-slide.swiper-slide-active .top-hero__img img {
transform: scale(1.4); /* アクティブ時のスケール */
transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかになるよう調整 */
}


.top-hero .txt_box{
position: absolute;
top: 20%;
left:5%;
width: 90%;
z-index: 5;
}

.top-hero .txt_box h1{
font-size: 1.4rem;
font-weight: 600;
line-height: 1.4;
color: #FFF;
margin-bottom: 20px;
}

.top-hero .txt_box p{
font-size: .9rem;
font-weight: 600;
color: #FFF;
letter-spacing: .1rem;
}

.top-hero article{
overflow: hidden;
position: absolute;
bottom:-1%;
left: 0;
z-index: 5;
}

.top-hero .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

.top-hero .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
font-weight:300;
line-height:1;
overflow: hidden;
color: rgba(0,146,177,.5);
}

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


/*about
--------------------------------------------*/
#about{
position: relative;
overflow: hidden;
padding:60px 0 60px;
box-sizing: border-box;
background: #FFFFFF;
}

#about .section_wrap{
position: relative;
z-index: 5;
width:100%;
margin: 0 0 0 auto;
}

#about .section_wrap .txt_box{
width: 90%;
margin:0 auto 20px;
position: relative;
}

#about .section_wrap .ttl{
}

#about .section_wrap .ttl span{
color: #0a7fd3;
}

#about .section_wrap .red_ttl{
position: relative;
margin-bottom: 40px;
}

#about .section_wrap .red_txt{
position: relative;
font-size: .9rem;
font-weight: 600;
margin-bottom:40px;
}

#about .common_btn_box{
text-align: center;
}

#about .section_wrap .img{
width: 100%;
}


/*business
--------------------------------------------*/
#business{
padding:60px 0 60px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#business::before{
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
}

#business .background-video {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}


#business .background-video video {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%,-50%);
}

#business .section_wrap{
width:90%;
margin: auto;
position: relative;
}


#business .section_wrap .txt_box{
width: 100%;
margin:0 0 40px;
position: relative;
}

#business .section_wrap .ttl{
text-align: center;
}

#business .section_wrap .ttl_jp{
text-align: center;
color: #FFF;
}

#business .section_wrap .red_ttl{
color: #FFFFFF;
position: relative;
margin-bottom: 20px;
text-align: center;
}

#business .section_wrap .red_txt{
position: relative;
font-size: .8rem;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
color: #FFFFFF;
line-height:2;
}

#business .section_wrap .illust_img{
width: 100%;
margin:0 auto;
}

#business .section_wrap .idx_list{
width:100%;
margin: 0 auto;
background: rgba(0,0,0,.8);
}

#business .section_wrap .idx_list li{
width: 100%;
height:100px;
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
border: 1px solid rgba(0,155,175,.5);
margin-bottom: .2%
}

#business .section_wrap .idx_list li a{
width: 100%;
display: block;
}

#business .section_wrap .idx_list li .idx_list_box{
padding:1rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
z-index: 10;
position: relative;
}


#business .section_wrap .idx_list li .idx_list_box .txt_box{
width: 100%;
position: relative;
color: #ececec;
margin: 0;
}


#business .section_wrap .idx_list li .idx_list_box .txt_box h3{
font-size:1rem;
font-weight: 800;
line-height: 1.5;
margin: 0 0 10px;
position: relative;
color: #FFF;
}

#business .section_wrap .idx_list li .idx_list_box .txt_box h4{
font-size:.8rem;
font-weight: 700;
line-height: 1;
letter-spacing: .1rem;
margin: 0 0 10px;
position: relative;
color: #FFF;
}


#business .section_wrap .idx_list li .idx_list_box .txt_box p{
font-size: .5rem;
color: rgba(0,155,175);
}


#business .section_wrap .idx_list li .idx_list_box .arrow{
width:1.2rem;
height:1.2rem;
border-radius: 50%;
background: #0a7fd3;
display: flex;
align-items: center;
justify-content: center;
}

#business .section_wrap .idx_list li .idx_list_box .arrow img{
width: 4px;
}

#business .section_wrap .idx_list li .bg{
background: linear-gradient(rgba(51, 51, 51, 0) 0%, #333 80%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
z-index: 5;
}

#business .section_wrap .idx_list li .pic{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#business .section_wrap .idx_list li .pic img{
transform: scale(1.8);
transition: .5s;
}

#business .section_wrap .idx_list li:hover .pic img{
transform: scale(2.2);
transition: .5s;
}


#business .common_btn_box{
text-align: center;
}


/*track　record
--------------------------------------------*/
#track_record{
background: #FFFFFF;
padding:0 0 60px;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

#track_record .section_wrap{
position: relative;
margin: 0 auto;
z-index: 5;
}

#track_record .section_wrap .mv_img {
width: 100%;
height: 33vw;
margin-left:5%;
margin-bottom: 6.25vw;
overflow: hidden;
position: relative;
}

#track_record .section_wrap .mv_img img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}


#track_record .section_wrap .txt_box{
width:90%;
margin:0 auto 20px;
position: relative;
}


#track_record .section_wrap .txt_box .ttl{
margin-bottom: 0;
}

#track_record .section_wrap .txt_box .red_txt{
font-weight: 500;
font-size: .8rem;
line-height:2;
margin-bottom:30px;
}


#track_record .track_record_list{
width:80%;
margin: 40px auto 40px;
}

#track_record .track_record_list li{
width: 100%;
margin-bottom:40px;
transition: .5s;
position: relative;
}

#track_record .track_record_list li:last-child{
margin-bottom: 0;
}

#track_record .track_record_list li a{
display: block;
transition: .5s;
color: #121212;
}

#track_record .track_record_list li a:hover{
opacity: .5;
transition: .5s;
}

#track_record .track_record_list li .tag{
position: absolute;
top: 0;
right: 0;
display: inline-block;
padding:10px;
box-sizing: border-box;
font-size: .7rem;
font-weight: 700;
color: #FFF;
line-height: 1;
background:rgb(0, 140, 176);
}

#track_record .track_record_list li:nth-child(3n){
margin-right: 0;
}

#track_record .track_record_list li .img{
border-radius: .5rem;
overflow: hidden;
margin: 0 0 10px;
}

#track_record .track_record_list li h2{
font-size: .9rem;
font-weight: 600;
line-height: 1.2;
margin: 0 0 10px;
}

#track_record .track_record_list li dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: .7rem;
margin: 0 0 20px;
}

#track_record .track_record_list li dl dt{
width: 100px;
padding: 5px;
box-sizing: border-box;
border-bottom: 1px solid rgba(0,155,175,.3);
white-space: nowrap;
font-weight: 500;
}

#track_record .track_record_list li dl dd{
width:calc(100% - 100px);
padding: 5px;
box-sizing: border-box;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,.15);
}

#track_record .track_record_list li .btn{
width: 200px;
margin: 0 auto;
background-image: linear-gradient(0deg, rgba(0,100,170, 1), rgba(0,50,125, 1));
transition: .5s;
border-radius: 1rem;
}

#track_record .track_record_list li .btn{
display: block;
font-size: .8rem;
text-align: center;
color: #FFF;
padding: 5px;
box-sizing: border-box;
}

#track_record .business_box{
width: 100%;
margin: 0 auto 60px;
background:url("../images/index/bg_img.jpg") center center no-repeat;
background-size: cover;
padding:7% 5%;
box-sizing: border-box;
}

#track_record .business_box h4{
font-size: 1rem;
font-weight: 500;
line-height: 1;
color: #FFF;
text-align: center;
margin: 0 0 40px;
position: relative;
}

#track_record .business_box h4::before{
content: "";
position: absolute;
left: 50%;
bottom: -15px;
margin-left: -25px;
width: 50px;
height: 1px;
background: #FFF000;
}

#track_record .business_box .business_list{
margin: 0 0 40px;
}

#track_record .business_box .business_list li{
width:100%;
margin-bottom:2%;
background:rgba(0,0,0,.8);
color: #FFF;
box-sizing: border-box;
font-size: .8rem;
letter-spacing: .1rem;
font-weight: 700;
border: solid 1px rgba(255,255,255,.4);
padding:0 10px 10px 5px;
}

#track_record .business_box .business_list li span{
padding: 5px;
width: 30px;
box-sizing: border-box;
background:linear-gradient(0deg, rgba(0,140,176,1), rgba(33,33,33, 1));
display:block;
margin: 0 10px 0 0;
text-align: center;
}

#track_record .business_box .business_list li:nth-child(3n){
margin-right: 0;
}

#track_record .business_box .dl_box{
margin: 0 0 30px;
}

#track_record .dl_list{
width:100%;
margin: 0 auto 20px;
background:rgba(255,255,255,.9);
border: 1px solid rgba(0,0,0,.6);
}

#track_record .dl_list dt{
background:linear-gradient(0deg, rgba(0,0,0,1), rgba(33,33,33, 1));
padding: 10px;
box-sizing: border-box;
line-height: 1;
color: #FFF;
text-align: center;
font-size: .9rem;
font-weight: 700;
letter-spacing: .2rem;
}

#track_record .dl_list dd{
padding: 10px;
font-size: .8rem;
box-sizing: border-box;
}

#track_record .business_box .s_txt{
font-size: .7rem;
font-weight: 500;
line-height: 2;
color: #FFF;
}

#track_record article{
overflow: hidden;
margin-top: -10px;
}

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

#track_record .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
font-weight:300;
line-height:1;
overflow: hidden;
color: rgba(0,155,175,.1);
}

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

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

#track_record .section_wrap .common_btn_box{
margin: 0 auto;
text-align: center;
position: relative;
z-index: 5;
}

/* recruit
--------------------------------------------*/
#recruit{
position: relative;
overflow: hidden;
width: 100%;
padding: 60px 0;
box-sizing: border-box;
z-index: 5;
margin: 0 auto;
}

#recruit::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
}

#recruit .section_wrap{
width: 90%;
margin: 0 auto;
position: relative;
z-index: 5;
}

#recruit .section_wrap .txt_box{
width: 100%;
margin: 0 0 60px;
text-align: center;
}

#recruit .section_wrap .txt_box .ttl{
margin-bottom: 60px;
}

#recruit .section_wrap .txt_box .ttl,
#recruit .section_wrap .txt_box .ttl span,
#recruit .section_wrap .txt_box .red_ttl{
color: #FFF;
}

#recruit .section_wrap .txt_box .red_txt{
font-size: .9rem;
font-weight: 600;
color: #FFF;
}

#recruit .common_btn_box{
text-align: center
}

#recruit .move {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

#recruit .move::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url("../images/com/bg_noise.png");
background-repeat:repeat;
background-position:50% 0%;
background-size:8rem auto;
mix-blend-mode:overlay;
opacity:0;
transform:translate3d(0, 0, 0);
z-index: 2;
}

#recruit .move::after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,.5);
z-index: 2;
}

#recruit .move video {
position: relative;
object-fit: cover;
width: 100%;
height: 100%;
}


/* topics
--------------------------------------------*/
#topics{
position: relative;
margin: 0 auto;
background: rgba(0,0,0,.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding:60px 5%;
box-sizing: border-box;
z-index: 10;

}

#topics .section_wrap{
width: 100%;
padding:20px;
box-sizing: border-box;
border-radius: 10px;
background-color: #f1f4f8;
margin: auto;
}


#topics .section_wrap .topics_wrap{
width: 100%;
height: 200px;
overflow-x: hidden;
margin: 0 auto 30px;
}

#topics .section_wrap .ttl{
margin: 0 0 30px;
}

#topics .section_wrap .topics_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;
font-size: .8rem;
}

#topics .section_wrap .topics_wrap dl:last-child{
margin-bottom: 0;
}

#topics .section_wrap .topics_wrap dl dt{
position: relative;
width:100%;
font-weight: 500;
margin-bottom: 10px;
}

#topics .section_wrap .topics_wrap  dl dd{
position: relative;
width: 100%;
}

#topics .section_wrap .topics_wrap  dl dd a{
text-decoration: underline;
color: #0a7fd3;
}

#topics .common_btn_box{
text-align: center;
}

/*contact
------------------------------------------*/
#contact {
background: url("../images/index/bg_contactsp.jpg") center center no-repeat;
background-size: cover;
padding: 60px 5% 60px;
box-sizing: border-box;
position: relative;
z-index: 5;
}

#contact .section_wrap{
position: relative;
color: #FFF;
}

#contact .section_wrap .ttl{
margin-bottom: 20px;
}

#contact .section_wrap .ttl span{
color: #FFF;
}

#contact .section_wrap p{
font-size:.9rem;
font-weight: 600;
line-height: 1.6;
}

#contact .section_wrap p span{
display: block;
margin-top: 25px;
font-size: 1.4rem;
}


#contact .section_wrap .common_btn_box{
margin:30px auto 0;
}

}