@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 95px;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
font-style: normal;
font-size:14px;
line-height:2;
color:#000;
letter-spacing:0;
width:100%;
max-width: 1920px;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
.sp,.u1200{display: none;}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
}

img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}
a.op07:hover{
opacity:0.7;
transition: .4s opacity;
}
a.op06{
position: relative;
}
a.op06:hover{
opacity:0.7;
transition: .4s opacity;
}
a.text-ud {
text-decoration: underline;
text-underline-offset: 5px;
}
/*
a.op06:hover::after{
position: absolute;
width: 100%;
height: 2px;
background: #001F6B;
bottom: -6px;
left: 0;
content: '';
}
*/
.open{
overflow-y: hidden;
}
.u1200{
display: none;
}
body{
position: relative;
}


/*+++++++++++++++++++++++++HEADER++++++++++++++++++++++++++++++*/

header{
position: fixed;
width: 100%;
height: 95px;
top: 0;
left: 0;
z-index: 200;
background: #fff;
padding: 0 48px;
}
header{
padding: 0 2.5%;
}
header .inner{
display: flex;
justify-content: space-between;
max-width: 1600px;
margin: 0 auto;
padding: 0;
position: relative;
}
header .left-box{
display: flex;

}
header .logo{
width: 154px;
margin: 0 40px 0 0;
display: flex;
align-items: center;
}
header .logo img{
line-height: 95px;
}
header .site-info{
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 12px;
color: #001F6B;
line-height: 95px;
}
header .right-box{
display: flex;
padding: 0 78px 0 0;
}
header .links{
padding: 0 14px;
line-height: 95px;
display: inline-block;
}
header .links:nth-child(3){
display: none;
}
header .links a{
color: #001F6B;
font-size: 16px;
font-weight: 500;
line-height: 95px;
}
.open .menu-btn-box{
}
.menu-btn-box{
width: 95%;
max-width: 1600px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 300;
}
.menu-btn{
position: absolute;
right: 0;
top: 16px;
width: 64px;
height: 64px;
background: #001F6B;
border-radius: 100px;
}
.menu-btn:hover{
cursor: pointer;
}
.menu-btn::before {
content: '';
display: block;
position: absolute;
top: 23px;
left: 20px;
width: 24px;
height: 2px;
background-color: #fff;
transition: all ease-in-out 0.4s;
transform-origin: 0 0;
}
.menu-btn::after {
content: '';
display: block;
position: absolute;
bottom: 23px;
left: 20px;
width: 24px;
height: 2px;
background-color: #fff;
transition: all ease-in-out 0.4s;
transform-origin:0 100%;
}
.menu-btn span{
display: block;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 24px;
height: 2px;
background-color: #fff;
transition: all ease-in-out 0.4s;
}
.menu-btn.active::before {
width: 24px;
left: 24px;
transform: rotate(45deg);
transform-origin: 0 0;
}
.menu-btn.active::after {
width: 24px;
left: 24px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.menu-btn.active span{
background-color: rgba(255, 255, 255, 0);
}
main{
margin: 95px 0 0;
}
.front-wrap{
width: 100%;
padding: 15px 2.5% 0;
position: relative;
background: url(../images/front-bg.jpg) no-repeat center bottom;
background-size: 100% auto;
}
.main-kv-wrap{
position: relative;
}
.slide-text{

}
.slide01 .slide-text {
position: absolute;
top: 18%;
left: 34%;
}
.slide02 .slide-text {
position: absolute;
top:23%;
right: 32%;
}
.slide03 .slide-text,
.slide05 .slide-text{
position: absolute;
bottom: 15%;
left: 26%;
}
.slide04 .slide-text {
position: absolute;
bottom:5%;
left: 30%;
}

.slide06 .slide-text {
position: absolute;
top:20%;
left: 33%;
}



.slide-text p{
font-size: 22px;
font-weight: 500;
 font-family: "Noto Serif JP", serif;
 color: #001F6B;
 line-height: 40px;
}
.slide01 .slide-text p,
.slide04 .slide-text p{
writing-mode: vertical-rl;
line-height: 36px;
}
.slide-text p span{
background: #fff;
margin: 0 0 4px;
padding: 2px 4px 2px 8px;
}
.slide01 .slide-text p span,
.slide04 .slide-text p span{
background: #fff;
padding: 6px 0 4px;
line-height: 10px;
letter-spacing: 0.24em;
}
.slide02 .slide-text p{
text-align: right;
}
.slide02 .slide-text p span{
padding: 2px 2px 2px 8px;
}

@media (max-width: 1400px) {
.slide-text p{
font-size: 20px;
 line-height: 36px;
}
.slide01 .slide-text p,
.slide04 .slide-text p{
writing-mode: vertical-rl;
line-height: 33px;
}

}




.clip-x{
clip-path: inset(0 100% 0 0);
opacity: 0;
transition:clip-path 1.4s 0.4s,opacity 0.8s 0s;
}
.slick-active .clip-x{
clip-path: inset(0);
opacity: 1;
transition:clip-path 1.4s 0.4s,opacity 0.4s 0s;
}

.clip-y{
clip-path: inset(0 0 100% 0);
opacity: 0;
transition:clip-path 1.4s 0.4s,opacity 0.8s 0s;
}
.loaded .slick-active .clip-y{
clip-path: inset(0);
opacity: 1;
transition:clip-path 1.4s 0.4s,opacity 0.4s 0s;
}
.primary-block{
position: relative;
max-width: 1600px;
margin: 0 auto;
}
.primary-block-inner{
margin: 0 auto 7.7%;
position: relative;
}
.main-catch{
position: absolute;
width: 33%;
height: 100%;
left: 0;
top: 0;
background: url("../images/main-catch-bg.svg") no-repeat;
background-size: 100% auto;
z-index: 100;
padding: 5.75% 0 0 4%;
line-height: 1.6;
letter-spacing:0.06em;
}
.main-catch h1{
font-family: "Noto Serif JP", serif;
font-size: 40px;
font-weight: 500;
color: #fff;
}
.main-catch h1{
font-size: 48px;
}

.jobtitle-box,
.people-box,
.data-box,
.business-box,
.core-box,
.strategic-box,
.environment-box,
.message-box{
position: relative;
border-radius: 4px;
overflow: hidden;
}

.data-box,
.business-box,
.core-box,
.strategic-box{
width: calc(50% - 16px);
}
.core-box,
.strategic-box{
aspect-ratio: 35 / 22;
}
.core-box a,
.strategic-box a{
display: block;
aspect-ratio: 35 / 22;
height: 100%;
}
.core-box video,
.strategic-box video{
width: auto;
height: 100%;
position: relative;
left: -5.2%;
will-change: transform;
backface-visibility: hidden;
    transform: translateZ(0);
}
.core-box video,
.strategic-box video{
    transform: translateZ(0);
    transition: transform .4s ease;
}

.core-box a:hover video,
.strategic-box a:hover video{
    transform: translateZ(0) scale(1.15);
}



.video-box {
  position: relative;
}


.video-box .fallback {
  display: none;
}

.video-box.is-fallback video {
display: none;
}

.video-box.is-fallback .fallback {
  display: block;
}



.mv-video.is-fallback video{
    display:none;
}



.jobtitle-box a img,
.people-box a img,
.data-box a img,
.business-box a img,
.core-box a img,
.strategic-box a img,
.environment-box a img,
.message-box a img,
.strategic-box a:hover video,
.core-box a:hover video{
transform: scale(1);
transition: transform .4s ease;
}


.jobtitle-box a:hover img,
.people-box a:hover img,
.data-box a:hover img,
.business-box a:hover img,
.core-box a:hover img,
.strategic-box a:hover img,
.environment-box a:hover img,
.message-box a:hover img,
.strategic-box a:hover video,
.core-box a:hover video{
transform: scale(1.15);
}


.r1-box{
position: absolute;
width: fit-content;
min-width: 104px;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
font-weight: 700;
line-height: 1.5;
padding: 8px 16px;
color: #fff;
margin: auto;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
backdrop-filter: blur(2px);
}

.cs-t1{
position: absolute;
background: rgba(255,255,255,0.85);
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 0 0;
}
.cs-t1 p{
font-size: 20px;
font-weight: 700;
color: #001F6B;
line-height: 1.5;
margin: 0 0 8px;
}
.cs-t1 span{
font-size: 16px;
font-weight: 700;
color: #001F6B;
line-height: 1.5;
}

.cs-t1 p.line-sub{
font-size: 16px;
font-weight: 500;
color: #001F6B;
line-height: 1.5;
margin: 0;
}
.cs-t1 p.num-line{
font-size: 16px;
font-weight: 500;
color: #001F6B;
line-height: 2;
margin: 0 0 18px;
text-decoration: underline;
text-underline-offset: 14px;
}




@media (max-width: 1500px) {
.main-catch h1{
font-size: 40px;
}

.slide02 .slide-text {
    top: 23%;
    right: 34%;
}


}



@media (max-width: 1280px) {
.main-catch{
padding: 5.75% 0 0 3%;
}
.main-catch h1{
font-size: 34px;
}



}

@media (max-width: 1000px) {
.slide06 .slide-text {
position: absolute;
top:20%;
left: 30.5%;
}
.slide-text p span {
    background: #fff;
    margin: 0 0 4px;
    padding: 2px 0px 2px 4px;
}
}



@media (max-width: 1000px) {
.main-catch{
padding: 5.75% 0 0 3%;
}
.main-catch h1{
}
.slide-text p {
}
}
.primary-float-block{
position: absolute;
width: 28.2%;
height: calc(100% - 64px);
top:32px;
right: 32px;
background: #fff;
border-radius: 4px;
display: flex;
align-items: center;
}
.primary-float-block-inner{
height: 100%;
max-height: 660px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.people-box,
.jobtitle-box{
z-index: 50;
}
.people-box{
z-index: 40;
}
.float-entry-box{
display: flex;
justify-content: space-between;
}
.entry-new-box,
.entry-career-box{
width: 48%;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.entry-cont{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 24% 0 0;
border: 1px solid #001F6B;
}
.entry-ttl-jp{
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 1.5;
}
.entry-ttl-en{
text-align: center;
color: #fff;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 100;
line-height: 1.5;
}
.entry-select-box{
display: flex;
justify-content: space-between;
position: absolute;
width: 84%;
bottom: 20px;
left: 8%;
margin: 0 auto;
}
.entry-select{
width: 47%;
}
.entry-select a{
display: block;border: 1px solid #fff;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #fff;
line-height: 2.1;
padding: 0 0 0 8px;
position: relative;
}
@media (min-width: 768px) {
.entry-select a:hover{
border: 1px solid #fff;
color: #001F6B;
background: #fff;
transition: background-color 0.4s, color 0.4s;
}
}
.entry-t1 span {
overflow: hidden;
position: absolute;
top: 3px;
right: 6px;
bottom: 0;
width: 14px;
margin: auto 0;
line-height: 1;
}
.entry-t1 span:before,
.entry-t1 span:after {
content: "→";
position: absolute;
top: 4px;
right: 0;
font-size: 14px;
color: #fff;
font-weight: 100;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
.entry-t1 span:after {
transform: translateX(-100%);
color: #001F6B;
}
.entry-t1:hover span:before {
animation-name: transformRightLeft; /* 修正: hover時のアニメーションを指定 */
animation-delay: 0s;
opacity: 1;
color: #001F6B;
}
.entry-t1:hover span:after {
animation-name: transformLeftRight; /* 修正: hover時のアニメーションを指定 */
animation-delay: 0.2s;
opacity: 1;
color: #001F6B;
}
.entry-career-box a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid #001F6B;
}
.entry-career-box a:hover{
background: #fff;
transition: background-color 0.4s;
}
.entry-career-box a:hover .entry-ttl-jp,
.entry-career-box a:hover .entry-ttl-en{
color: #001F6B;
transition: color 0.4s;
}
.entry-career-box a .arrow {
overflow: hidden;
position: absolute;
right: 0;
left: 0;
bottom: 28px;
width: 30px;
height: 30px;
margin: 0 auto;
line-height: 1;
}
.entry-career-box a .arrow:before,
.entry-career-box a .arrow:after {
content: "→";
position: absolute;
top: 4px;
right: 0;
font-size: 32px;
color: #fff;
font-weight: 100;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
.entry-career-box a .arrow:after {
transform: translateX(-100%);
}
.entry-career-box a:hover .arrow:before {
animation-name: transformRightLeft;
animation-delay: 0s;
opacity: 1;
color: #001F6B;
}
.entry-career-box a:hover .arrow:after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
opacity: 1;
color: #001F6B;
}

.block-inner{
width: 100%;
display: flex;
justify-content: space-between;
margin: 0 auto 44px;
position: relative;
}
.secondary-block{
position: relative;
max-width: 1600px;
margin: 0 auto;
}
.tertiary-block{
position: relative;
max-width: 1600px;
margin: 0 auto 8.8%;
display: flex;
justify-content: space-between;
}
.news-box{
width: calc(50% - 22px);
position: relative;
}
.news-ttl{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 48px;
color: #001f6a;
line-height: 1.5;
}
.news-box p{
font-weight: 700;
font-size: 16px;
margin: 0 0 1.5%;
color: #001f6a;
}
.news-box p a{
color: #001f6a;
text-decoration: underline;
text-underline-offset: 5px;
}
.news-box p a:hover{
opacity:0.7;
transition: .4s opacity;
}
.news-box p span:nth-child(1){
padding: 0 14px 0 0;
}
.about-box{
width: calc(50% - 22px);
position: relative;
z-index: 30;
}
.about-box .ex-text{
position: absolute;
width: 100%;
left: 0;
bottom: -60px;
color: #fff;
display: none;
}
.about-box a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.1s;
border-radius: 6px;
overflow: hidden;
}
.about-box a:hover{
position: absolute;
width: 111.522%;
height: 140%;
top: -8.3769%;
left: -5.7613%;
content: '';
border-radius: 8px;
transition: all 0.2s;
}
.about-box-cont{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background: #001f6a;
z-index: -1;
border-radius: 6px;
display: flex;
align-items: flex-end;
}
.large{
width: calc(50% - 22px);
position: relative;
border-radius: 4px;
}
.middle{
width: 100%;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.small{
position: relative;
width: calc(50% - 22px);
border-radius: 4px;
overflow: hidden;
}
.rlt-wrap{
position: relative;
border-radius: 4px;
overflow: hidden;
}
.small .ex-text,
.middle .ex-text,
.large .ex-text{
position: absolute;
width: 100%;
left: 0;
bottom: -74px;
color: #000;
display: none;
opacity: 0;
transition: opacity 0.1s, display 0.1s;
  transition-behavior: allow-discrete;
}






.large a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: all 0.3s;
border-radius: 6px;

}
.large a:hover{
position: absolute;
width: calc(100% + 44px);
height: calc(100% + 140px);
top: -30px;
left: -22px;
content: '';
border-radius: 8px;
transition: all 0.3s;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.large-box-bg,
.middle-box-bg,
.small-box-bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background: #fff;
z-index: -1;
border-radius: 6px;
display: flex;
align-items: flex-end;

}
.large:has(a:hover),
.middle:has(a:hover),
.small:has(a:hover){
overflow: visible;
}
/*
.large:has(a:hover) .t2-box,
.large:has(a:hover) .t3-box,
.middle:has(a:hover) .t2-box,
.small:has(a:hover) .t2-box,
.small:has(a:hover) .t3-box{
background: #001f6a;
color: #fff;
transition: background-color 0.2s, color 0.2s;
}
*/
.large:has(a:hover) .ex-text,
.middle:has(a:hover) .ex-text,
.small:has(a:hover) .ex-text{
bottom: -74px;
color: #000;
display: block;
opacity: 1;
  transition: opacity 0.5s, display 0.5s allow-discrete;

}


@starting-style {
.large:has(a:hover) .ex-text,
.middle:has(a:hover) .ex-text,
.small:has(a:hover) .ex-text{
    opacity: 0;
  }
}





.secondary-block .float-box{
position: absolute;
width: calc(50% - 22px);
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
}
.data-box,
.core-box,
.business-box,
.strategic-box,
.environment-box,
.message-box{
position: relative;
}
.data-box,
.business-box{
z-index: 30;
}
.core-box,
.strategic-box{
z-index: 20;
}
.core-box, .strategic-box {
    aspect-ratio: 27 / 17;
}
.core-box video, .strategic-box video {
    left: -5.1%;
}
.environment-box,
.message-box{
z-index: 10;
}
.block{
display: block;
position: relative;
border-radius: 4px;
overflow: hidden;
}

.t1-box{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #001F6B;
}
.t1-box p{
text-align: center;
}
.t1-box p img{
display: none;
}
.t2-box{
position: absolute;
width: auto;
height: auto;
top: -1px;
left: -1px;
font-size: 18px;
font-weight: 700;
color: #001F6B;
padding: 0 20px;
border-radius: 4px 0 4px 0;
background: #fff;
line-height: 46px;
}
.t3-box{
position: absolute;
width: auto;
height: auto;
top: -1px;
left: -1px;
font-size: 18px;
font-weight: 700;
color: #001F6B;
padding: 10px 20px;
border-radius: 4px 0 4px 0;
background: #fff;
}
.t3-box p{
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.project-num{
position: absolute;
width: auto;
right: -1px;
bottom: -1px;
background: #001f6a;
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 24px;
padding: 0 32px;
line-height: 44px;
border-radius: 4px 0 4px 0;
}

.project01-box{
margin: 0 0 17.2%;
z-index: 20;
}
.project02-box{
margin: 17.2% 0 0;
z-index: 10;
}

.tertiary-block .float-box-right{
position: absolute;
width: calc(50% - 22px);
top: 0;
right: 0;
display: flex;
justify-content: space-between;
}
.tertiary-block .float-box-left{
position: absolute;
width: calc(50% - 22px);
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
}

.ending-recruit-info{
max-width: 1600px;
margin: 0 auto;
}
.ending-recruit-info-ttl-en{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 24px;
text-align: center;
color: #001F6B;
line-height: 1.5;
}
.ending-recruit-info-ttl{
font-weight: 700;
font-size: 40px;
text-align: center;
color: #001F6B;
line-height: 1.1;
margin: 0 0 40px;
}
.ending-recruit-info .cont-box{
display: flex;
justify-content: space-between;
}
.ending-recruit-info .cont-once{
width: calc(50% - 22px);
background: #001F6B;
padding: 3.28% 2.5% 2.5%;
color: #fff;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.entry-new-box::after,
.entry-career-box::after,
.ending-recruit-info .cont-once::after{
position: absolute;
width: 48px;
height: 44px;
content: '';
top: 0;
left: 0;
background: url("../images/ending-recruit-info-corner.svg") no-repeat;
background-size: 100% auto;
}
.ending-recruit-info-box-ttl-en{
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 20px;
line-height: 1;
}
.ending-recruit-info-box-ttl{
margin: 0 0 4%;

}
.ending-recruit-info-box-ttl a{
display: block;
position: relative;
font-weight: 700;
font-size: 24px;
color: #fff;
}
.ending-recruit-info-box-ttl a:hover{
opacity:0.7;
transition: .4s opacity;
}


.ending-recruit-info-box-ttl a .arrow {
overflow: hidden;
position: absolute;
top: 4px;
right: 0;
bottom: 0;
width: 28px;
margin: auto 0;
line-height: 1;
}
.ending-recruit-info-box-ttl a .arrow:before,
.ending-recruit-info-box-ttl a .arrow:after {
content: "→";
position: absolute;
top: 4px;
right: 0;
font-size: 32px;
color: #fff;
font-weight: 100;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
.ending-recruit-info-box-ttl a .arrow:after {
transform: translateX(-100%);
}
.ending-recruit-info-box-ttl a:hover .arrow{
opacity: 1!important;
}
.ending-recruit-info-box-ttl a:hover .arrow:before {
animation-name: transformRightLeft;
animation-delay: 0s;
opacity: 1!important;
}
.ending-recruit-info-box-ttl a:hover .arrow:after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
opacity: 1!important;
}

@keyframes transformLeftRight {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes transformRightLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}


.ending-recruit-info .cont-once .lower-box{
display: flex;
justify-content: space-between;
}
.ending-recruit-info .cont-once .lower-box .link-box{
width: 49%;
height: 132px;
display: flex;
}
.ending-recruit-info .cont-once .lower-box .link-box a{
width: 100%;
display: block;
font-size: 20px;
font-weight: 700;
color: #fff;
text-align: center;
padding: 22px 0 0;
border: 1px solid #fff;
position: relative;
line-height: 1.5;
}
.ending-recruit-info .cont-once .lower-box .link-box a p{
font-size: 18px;
}
.ending-recruit-info .cont-once .lower-box .link-box a:hover{
background: #fff;
color: #001F6B;
opacity: 1;
transition: background 0.4s, color 0.4s;
}
.ending-recruit-info .cont-once .lower-box .link-box a.large{
font-size: 24px;
padding: 32px 0 0;
border-radius: 0;
}

.ending-recruit-info .cont-once .lower-box .link-box a .arrow {
overflow: hidden;
position: absolute;
right: 0;
left: 0;
bottom: 26px;
width: 24px;
height: 24px;
margin: auto;
line-height: 1;
content: '';
}
.ending-recruit-info .cont-once .lower-box .link-box a.large .arrow {
bottom: 32px;
}
.ending-recruit-info .cont-once .lower-box .link-box a .arrow:before,
.ending-recruit-info .cont-once .lower-box .link-box a .arrow:after {
content: "→";
position: absolute;
top: 4px;
right: 0;
font-size: 24px;
color: #fff;
font-weight: 100;
animation-fill-mode: forwards;
animation-duration: 0.6s;
}
.ending-recruit-info .cont-once .lower-box .link-box a .arrow:after {
transform: translateX(-100%);
}
.ending-recruit-info .cont-once .lower-box .link-box a:hover .arrow{
opacity: 1!important;
}
.ending-recruit-info .cont-once .lower-box .link-box a:hover .arrow:before {
animation-name: transformRightLeft;
animation-delay: 0s;
opacity: 1!important;
color: #001F6B;
}
.ending-recruit-info .cont-once .lower-box .link-box a:hover .arrow:after {
animation-name: transformLeftRight;
animation-delay: 0.2s;
opacity: 1!important;
color: #001F6B;
}




footer{
position: relative;
text-align: center;
padding: 54px 0 30px;
}
footer .to-corporate{
font-size: 14px;
font-weight: 400;
color: #001F6B;
}
footer .cr{
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 12px;
color: #001F6B;
padding: 14px 0 0;
}

.page-top{
position: fixed;
width: 52px;
height: 52px;
bottom: 64px;
right: 2%;
cursor: pointer;
display: none;
z-index: 90;
}

@media (max-width: 1500px) {
.primary-float-block {
width: 30%;
}
.entry-select a {
border-radius: 4px;
line-height: 2.1;
padding: 0 0 0 4px;
}
.entry-t1 span {
top: 3px;
right: 2px;
width: 14px;
}
}
@media (max-width: 1400px) {
.news-box p {
font-size: 14px;
margin: 0;
}
.front-wrap {
padding: 15px 2.5% 0;
}
.entry-select-box {
width: 84%;
bottom: 14px;
left: 8%;
margin: 0 auto;
}
.entry-career-box a .arrow {
overflow: hidden;
position: absolute;
right: 0;
left: 0;
bottom: 22px;
width: 30px;
height: 30px;
margin: 0 auto;
line-height: 1;
}
.news-box,
.large,
.small,
.tertiary-block .float-box-right,
.tertiary-block .float-box-left,
.secondary-block .float-box{
width: calc(50% - 16px);
}
.block-inner {
margin: 0 auto 32px;
}
.primary-float-block {
width: 30%;
height: calc(100% - 40px);
top: 20px;
right: 20px;
}
.primary-float-block-inner {
padding: 20px;
}
.large a:hover{
width: calc(100% + 32px);
height: calc(100% + 140px);
top: -16px;
left: -16px;
}
.middle a:hover{
width: calc(100% + 32px);
height: calc(100% + 140px);
top: -16px;
left: -16px;
}
.small a:hover{
width: calc(100% + 32px);
height: calc(100% + 140px);
top: -16px;
left: -16px;
}

}

@media (max-width: 1200px) {
header .right-box {
display: none;
}
.u1200 {
display: block;
}

.entry-ttl-jp {
font-size: 16px;
font-weight: 700;
}
.entry-ttl-en {
font-size: 18px;
line-height: 1.5;
}
.front-wrap {
}
.entry-cont {
padding: 18% 0 0;
border: 1px solid #001F6B;
}
.primary-float-block {
width: 30%;
height: calc(100% - 32px);
top: 16px;
right: 16px;
}
.entry-select-box {
width: 84%;
bottom: 10px;
left: 8%;
margin: 0 auto;
}

}


@media (max-width: 1000px) {
.primary-float-block-inner {
padding: 10px;
}
.primary-float-block {
width: 30%;
height: calc(100% - 20px);
top: 10px;
right: 10px;
}
.news-box, .large, .small, .tertiary-block .float-box-right, .tertiary-block .float-box-left, .secondary-block .float-box {
width: calc(50% - 8px);
}
.news-ttl {
font-size: 48px;
line-height: 1;
}
.large-box-bg, .middle-box-bg, .small-box-bg {
display: none;
}
.small a:hover,
.middle a:hover,
.large a:hover{
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.large:has(a:hover), .middle:has(a:hover), .small:has(a:hover) {
overflow: hidden;
}
.news-box p {
font-size: 14px;
margin: 0;
line-height: 1.7;
}

}

@media (max-width: 900px) {
.pc{display: none;}
.sp{display: block;}
html {
scroll-padding-top: 104px;
}
header {
position: fixed;
width: 100%;
height: 104px;
top: 0;
left: 0;
z-index: 200;
background: #fff;
padding: 0 6%;
}
header .left-box {
width: 154px;
height: 104px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
}
header .logo {
width: 154px;
margin: 0;
display: flex;
align-items: center;
padding: 16px 0 0;
}
header .site-info {
font-size: 12px;
color: #001F6B;
line-height: 1;
padding: 0 0 8px;
}
.menu-btn-box {
width: 88%;
}
.menu-btn {
top: 20px;
width: 64px;
height: 64px;
background: #001F6B;
border-radius: 100px;
}
main {
margin: 152px 0 0;
}
footer {
text-align: center;
padding: 34px 0 30px;
}
.front-slider{
margin: 0 0 7%;
}
.main-catch {
width: 100%;
height: auto;
left: 0;
top: auto;
bottom: 0;
background: url(../images/main-catch-bg_sp.svg) no-repeat;
background-size: 100% auto;
padding: 12% 0 3% 39%;
line-height: 1.6;
letter-spacing: 0.06em;
}
.main-catch h1 {
font-size: 5.7vw;
line-height: 1.3;
}
.slide-text {
z-index: 200;
}
.slide01 .slide-text {
top: 5%;
left: 4%;
}
.slide02 .slide-text {
top:7%;
right:6%;
}
.slide03 .slide-text,
.slide05 .slide-text{
bottom: auto;
top: 47%;
left: 5%;
}
.slide04 .slide-text {
bottom:auto;
top: 11%;
left: 5%;
}
.slide06 .slide-text {
top: 46%;
left: 5%;
}



.slide-text p{
font-size: 4.1vw;
 font-family: "Noto Serif JP", serif;
 color: #001F6B;
 line-height: 8vw;
}
.slide01 .slide-text p,
.slide04 .slide-text p{
writing-mode: vertical-rl;
line-height: 8.1vw;
}
.slide-text p span{
margin: 0 0 4px;
padding: 0.4vw 0.8vw 0.8vw 1.6vw;
letter-spacing: 0em;
}
.slide01 .slide-text p span,
.slide04 .slide-text p span{
background: #fff;
padding: 1.53vw 0.6vw 0.6vw;
line-height: 10px;
letter-spacing: 0.14em;
}
.slide02 .slide-text p{
text-align: right;
}
.slide02 .slide-text p span{
padding: 0.4vw 0 0.8vw 1.6vw;
letter-spacing: 0em;
}









.news-ttl {
font-size: 48px;
line-height: 1.5;
}
.news-box p {
margin: 0 0 3%;
line-height: 1.5;
}
.large-box-bg, .middle-box-bg, .small-box-bg {
display: none;
}
.front-wrap {
margin: 104px 0 0;
padding: 8px 6% 0;
}


.primary-float-block {
position: relative;
width: 100%;
height: auto;
top: 0;
right: 0;
background: #fff;
border-radius: 4px;
display: block;
align-items: center;
}
.primary-float-block-inner {
padding: 0;
max-height: none;
}

.large, .small, .tertiary-block .float-box-right, .tertiary-block .float-box-left, .secondary-block .float-box,
.data-box,.core-box {
width: 100%;
margin: 0 0 5.5%;
}
.data-box, .business-box, .core-box, .strategic-box {
    width: 100%;
}
.jobtitle-box {
margin: 0 0 7%;
}
.news-box{
width: 100%;
margin: 0 0 12%;
}
.large,
.middle,
.small{
border-radius: 8px;
}

.float-entry-box {
margin: 0 0 7%;
}
.middle {
margin: 0 0 7%;
}
.primary-block-inner {
margin: 0 auto 11%;
}
.entry-ttl-jp {
font-size: 24px;
}
.entry-ttl-en {
font-size: 24px;
}
.entry-select-box {
bottom: 10%;
left: 8%;
}
.entry-cont {
width: 100%;
height: 100%;
top: 0;
padding: 22% 0 0;
border: none;
}
.entry-career-box a .arrow {
bottom: 14%;
width: 30px;
height: 30px;
}

.block-inner {
display: block;
margin: 0;
}

.secondary-block .float-box,
.tertiary-block .float-box-right,
.tertiary-block .float-box-left {
position: relative;
width: 100%;
top: 0;
right: 0;
display: block;
}
.project01-box,
.project02-box{
margin: 0 0 5.5%;
}
.tertiary-block {
    margin: 0 auto 25%;
}
.r1-box {
    position: absolute;
    width: fit-content;
    min-width: 126px;
    font-size: 20px;
    padding: 10px 20px;
    backdrop-filter: blur(2px);
}

.t2-box {
font-size: 20px;
padding: 0 16px;
border-radius: 4px 0 4px 0;
line-height: 44px;
}
.t3-box {
font-size: 18px;
padding: 10px 16px;
border-radius: 4px 0 4px 0;
background: #fff;
}
.t3-box p {
font-size: 14px;
line-height: 1.4;
}
.large a, .middle a, .small a {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
.large:has(a:hover) .ex-text,
.middle:has(a:hover) .ex-text,
.small:has(a:hover) .ex-text{
display: none;
}




.ending-recruit-info-ttl {
font-size: 32px;
line-height: 1.1;
margin: 0 0 12%;
}
.ending-recruit-info-ttl-en {
font-size: 24px;
line-height: 1.5;
}



.ending-recruit-info .cont-box {
display: block;
}
.ending-recruit-info .cont-once {
width: 100%;
padding: 12% 10% 6%;
color: #fff;
border-radius: 4px;
position: relative;
margin: 0 0 6%;
}
.ending-recruit-info .cont-once .lower-box {
display: block;
}
.ending-recruit-info .cont-once .lower-box .link-box {
width: 100%;
height: 96px;
display: block;
margin: 0 0 5%;
}
.ending-recruit-info-box-ttl a {
font-size: 24px;
line-height: 2.2;
}
.ending-recruit-info-box-ttl a .arrow:before, .ending-recruit-info-box-ttl a .arrow:after {
top: 8px;
font-size: 28px;
}
.ending-recruit-info .cont-once .lower-box .link-box a.large {
font-size: 24px;
line-height: 96px;
padding:0 0;
}

.ending-recruit-info .cont-once .lower-box .link-box a {
font-size: 20px;
padding: 18px 0 0;
height: 96px;
}
.ending-recruit-info .cont-once .lower-box .link-box a p {
font-size: 18px;
}
.ending-recruit-info .cont-once .lower-box .link-box a .arrow,
.ending-recruit-info .cont-once .lower-box .link-box a.large .arrow{
overflow: hidden;
right: 18px;
left: auto;
top: 50%;
width: 24px;
height: 24px;
margin: auto;
line-height: 1;
content: '';
transform: translateY(-50%);
}



.t1-box p{
text-align: center;
}
.t1-box p img{
display: block;
width: 46px;
margin: 14px auto 0;
}
.t1-box p img.wide-icon{
width: 80px;
}

.front-wrap{
background: url("../images/front-bg_sp.png") no-repeat center bottom 420px;
background-size: 100% auto;
}
.entry-new-box::after, .entry-career-box::after, .ending-recruit-info .cont-once::after {
position: absolute;
width: 62px;
height: 62px;
content: '';
top: 0;
left: 0;
background: url(../images/ending-recruit-info-corner.svg) no-repeat;
background-size: 100% auto;
}

.small a:hover,
.middle a:hover,
.large a:hover{
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.large:has(a:hover), .middle:has(a:hover), .small:has(a:hover) {
overflow: hidden;
}



}




@media only screen and (max-width : 389px) {
.entry-ttl-jp {
font-size: min(6.1vw, 24px);
}
.entry-ttl-en {
font-size: min(6.1vw, 24px);
}
.t3-box {
font-size: 18px;
padding: 10px 10px;
border-radius: 4px 0 4px 0;
background: #fff;
}
.ending-recruit-info .cont-once .lower-box .link-box a.large {
font-size: 20px;
}
}

@media print {
body {width:1000px;}
}