@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 .logo_wrap {
filter: brightness(0) invert(1);
}

#header.scroll-nav .logo_wrap{
filter:none;
}


#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);
}

#header .gnav .sns_list li a{
filter: invert(100%);
}

#header.scroll-nav .gnav .sns_list li a{
filter: invert(0%);
}


/* MV
--------------------------------------------*/
.top-hero {
width:100%;
height:100vh;
height:100svh;
overflow:hidden;
position: relative;
}

.top-hero .txt_box{
position: absolute;
bottom:24%;
left:3.5%;
z-index:2;
}

.top-hero .txt_box ul{
display: flex;
flex-wrap: wrap;
margin: 0 0 20px 15px;
}

.top-hero .txt_box ul li{
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
border: 1px solid #FFF;
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: #FFF;
}

.top-hero .txt_box h1{
font-size:6rem;
font-weight:900;
line-height: 1;
letter-spacing:-.3rem;
color: #FFF;
font-style: italic;
margin-bottom:40px;
}

.top-hero .txt_box h1 span{
font-size: 4rem;
}

.top-hero .txt_box p{
font-size: 1.2rem;
font-weight: 700;
font-style: italic;
color: #FFF;
line-height: 1.8;
margin:0 0 0 10px;
letter-spacing: .2rem;
}

.top-hero h2{
position: absolute;
bottom: -.7%;
left: -.5%;
display: block;
font-size:8rem;
font-weight: 800;
line-height:.9;
letter-spacing: .1rem;
white-space: nowrap;
color: #6e65b1;
mix-blend-mode: plus-lighter;
z-index: 2;
}

.top-hero .move {
overflow: hidden;
position: relative;
width:100%;
height:100vh;
height:100svh;
min-height: 50vh;
margin: 0 auto;
}

.top-hero .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(61, 145, 255, 0.2);
z-index: 1;
}

.top-hero .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}




/*thoughts
--------------------------------------------*/
#thoughts{
position: relative;
padding:10rem 0 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#thoughts .txt_box{
width:30%;
margin-left:8%;
}

#thoughts .txt_box .en_ttl{
font-size:2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:60px;
}

#thoughts .txt_box .red_ttl{
font-size: 2.6rem;
line-height: 1.5;
margin: 0 0 40px;
}

#thoughts .txt_box .txt{
}

#thoughts .img{
width:57%;
position: relative;
}

#thoughts .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#thoughts article{
overflow: hidden;
position: relative;
margin:-5px 0 0;
}

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

#thoughts .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:7rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing:2rem;
}

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

/*strengths
--------------------------------------------*/
#strengths{
position: relative;
background:url("../images/index/bg_st.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
padding: 10rem 5rem 8rem;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#strengths .txt_box{
position: relative;
width: 50%;
margin:0;
}


#strengths .txt_box .en_ttl{
font-size:2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:60px;
color: #f1352b;
}

#strengths .txt_box .red_ttl{
font-size: 2.6rem;
line-height: 1.5;
color: #FFF;
margin: 0 0 40px;
}

#strengths .txt_box .txt{
color: #FFF;
}

#strengths .img{
width:45%;
position: relative;
}

#strengths .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#strengths .slider2{
width: 100%;
position: relative;
margin:80px 0;
}

#strengths .slider2 .slick-slide{
margin:0 5px;
}

#strengths .list{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#strengths .list li{
width:calc(33.333% - 1px);
color: #FFF;
border-left: 1px solid rgba(255,255,255,.3);
padding: 40px 40px;
box-sizing: border-box;
}

#strengths .list li:first-child{
border-left: none;
}

#strengths .list li .img{
width: 100%;
margin: 0 0 30px;
}

#strengths .list li h3{
font-size: 1.4rem;
font-weight: 700;
line-height: 1.6;
text-align: center;
margin: 0 0 20px;
letter-spacing: .1rem;
}

#strengths .list li .txt{
padding:0 2%;
box-sizing: border-box;
font-size: 1rem;
font-weight: 300;
line-height: 2;
}

/* topics
--------------------------------------------*/
#topics{
position: relative;
margin: 0 auto;
background:#f4f4f3;
padding:10%;
box-sizing: border-box;
z-index:5;
}

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

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

#topics .section_wrap .en_ttl{
font-size:2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:60px;
color:#443E6E;
}

#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: #00488a;
}

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


/*recruit
------------------------------------------*/
#recruit {
padding: 10% 10% 9%;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}

#recruit .txt_box{
position: relative;
width: 80%;
color: #FFF;
z-index: 5;
margin: auto;
text-align: center;
text-shadow: 0px 0px 10px rgb(0, 0, 0);
}

#recruit .txt_box .en_ttl{
font-size:2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:60px;
color: #f1352b;
}

#recruit .txt_box .red_ttl{
font-size: 2.6rem;
line-height: 1.5;
color: #FFF;
margin: 0 0 40px;
}

#recruit .txt_box .txt{
color: #FFF;
}

#recruit .txt_box .common_btn_box{
margin-top:60px;
}

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

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

#recruit .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}


/*contact
------------------------------------------*/
#contact {
background: url("../images/index/bg_contact.jpg") center center no-repeat;
background-size: cover;
padding: 10% 15% 9%;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: flex-end;
}

#contact .section_wrap{
position: relative;
}

#contact .section_wrap .en_ttl{
font-size:2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:60px;
color:#443E6E;
}

#contact .section_wrap .red_ttl{
font-size: 1.4rem;
line-height: 1.6;
color: #121212;
margin: 0 0 40px;
}

#contact .section_wrap .tel{
margin-top: 25px;
font-size: 2.6rem;
font-weight: 800;
}

#contact .section_wrap .tel span{
display: block;
font-size: 1.2rem;
}


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


}

@media (max-width: 768px) {
.container {
flex-direction: column;
}
.image-box {
order: -1;
}
}


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

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

#header.scroll-nav .logo_wrap{
filter:none;
}


#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);
}

#header .gnav .sns_list li a{
filter: invert(100%);
}

#header.scroll-nav .gnav .sns_list li a{
filter: invert(0%);
}



/* MV
--------------------------------------------*/
.top-hero {
width:100%;
height:100vh;
height:100svh;
overflow:hidden;
position: relative;
}

.top-hero .txt_box{
position: absolute;
bottom:18%;
right: 2%;
left: 2%;
z-index:2;
}

.top-hero .txt_box ul{
display: flex;
flex-wrap: wrap;
margin: 0 0 15px 0px;
}

.top-hero .txt_box ul li{
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
border: 1px solid #FFF;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
color: #FFF;
}

.top-hero .txt_box h1{
font-size:2.2rem;
font-weight:900;
line-height: 1;
color: #FFF;
font-style: italic;
margin-bottom:30px;
}

.top-hero .txt_box h1 span{
font-size: 1.6rem;
}

.top-hero .txt_box p{
font-size: 0.9rem;
font-weight: 700;
font-style: italic;
color: #FFF;
line-height: 2;
letter-spacing: .2rem;
}

.top-hero h2{
position: absolute;
bottom: 60px;
display: block;
font-size: 7vw;
font-weight: 800;
line-height:.9;
letter-spacing: .1rem;
color: #6e65b1;
mix-blend-mode: plus-lighter;
z-index: 2;
}

.top-hero .move {
overflow: hidden;
position: relative;
width:100%;
height:100vh;
height:100svh;
min-height: 50vh;
margin: 0 auto;
}

.top-hero .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(61, 145, 255, 0.2);
z-index: 1;
}

.top-hero .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}




/*thoughts
--------------------------------------------*/
#thoughts{
width: 90%;
margin: auto;
position: relative;
padding:4rem 0 0 0;
}

#thoughts .txt_box .en_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
letter-spacing: .1rem;
margin-bottom: 10px;
}

#thoughts .txt_box .red_ttl{
font-size: 1.6rem;
line-height: 1.5;
margin: 0 0 30px;
}

#thoughts .txt_box .txt{
}

#thoughts .img{
position: relative;
margin-top: 30px;
}

#thoughts .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#thoughts article{
overflow: hidden;
position: relative;
}

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

#thoughts .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:3rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing:0.5rem;
}

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

/*strengths
--------------------------------------------*/
#strengths{
position: relative;
background:url("../images/index/bg_st.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
padding: 4rem 5%;
box-sizing: border-box;
}

#strengths .txt_box{
position: relative;
}


#strengths .txt_box .en_ttl{
font-size:1.2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:10px;
color: #f1352b;
}

#strengths .txt_box .red_ttl{
font-size: 1.6rem;
line-height: 1.5;
color: #FFF;
margin: 0 0 30px;
}

#strengths .txt_box .txt{
color: #FFF;
}

#strengths .img{
position: relative;
margin-top: 30px;
}

#strengths .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#strengths .slider2{
width: 100%;
position: relative;
margin:50px 0;
}

#strengths .slider2 .slick-slide{
margin:0 5px;
}

#strengths .list{
width: 100%;
}

#strengths .list li{
color: #FFF;
border-top: 1px solid rgba(255,255,255,.3);
padding: 30px 0px;
box-sizing: border-box;
}

#strengths .list li .img{
width: 100%;
margin: 0 0 20px;
}

#strengths .list li h3{
font-size: 1.2rem;
font-weight: 700;
line-height: 1.6;
text-align: center;
margin: 0 0 20px;
letter-spacing: .1rem;
}

#strengths .list li .txt{
font-size: 0.9rem;
font-weight: 300;
line-height: 2;
}

/* topics
--------------------------------------------*/
#topics{
position: relative;
margin: 0 auto;
background:#f4f4f3;
padding: 4rem 5%;
box-sizing: border-box;
z-index:5;
}

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

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

#topics .section_wrap .en_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
letter-spacing: .1rem;
margin-bottom: 30px;
color: #443E6E;
}

#topics .section_wrap .topics_wrap dl{
line-height: 1;
margin: 0 0 20px;
border-bottom: 1px solid rgba(0,0,0,.08);
padding-bottom: 15px;
box-sizing: border-box;
}

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

#topics .section_wrap .topics_wrap dl dt{
position: relative;
font-weight: 500;
font-size: 1rem;
margin-bottom: 10px;
}

#topics .section_wrap .topics_wrap  dl dd{
position: relative;
font-size: 0.9rem;
}

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

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


/*recruit
------------------------------------------*/
#recruit {
padding: 4rem 5%;
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}

#recruit .txt_box{
position: relative;
color: #FFF;
z-index: 5;
margin: auto;
text-align: center;
}

#recruit .txt_box .en_ttl{
font-size: 1.2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom: 10px;
color: #f1352b;
}

#recruit .txt_box .red_ttl{
font-size: 1.6rem;
line-height: 1.5;
color: #FFF;
margin: 0 0 30px;
}

#recruit .txt_box .txt{
color: #FFF;
}

#recruit .txt_box .common_btn_box{
margin-top: 40px;
}

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

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

#recruit .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 101%;
height: 101%;
}


/*contact
------------------------------------------*/
#contact {
background: url("../images/index/bg_contact.jpg") center center no-repeat;
background-size: cover;
padding: 4rem 5%;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: flex-end;
}

#contact .section_wrap{
position: relative;
color: #fff;
text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

#contact .section_wrap .en_ttl{
font-size: 1.2rem;
font-weight:800;
line-height: 1;
letter-spacing:.1rem;
margin-bottom:30px;
}

#contact .section_wrap .red_ttl{
font-size: 1.2rem;
line-height: 1.6;
margin: 0 0 30px;
}

#contact .section_wrap .tel{
font-size: 1.8rem;
font-weight: 800;
}

#contact .section_wrap .tel span{
display: block;
font-size: 1.2rem;
}


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

}