@charset "utf-8";
#cont.top header .companyname .txt a {
pointer-events: none;
cursor: default;
}
/*---- mv ----*/
#cont.top #mv {
position: relative;
width: 100%;
max-width: 1600px;
height: 1200px;
margin: 0 auto;
z-index: 7;
overflow: hidden;
}
#cont.top #mv .image {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 1200px;
z-index: 6;
background-repeat: no-repeat;
background-size: 100% auto;
}
#cont.top #mv .shader {
backface-visibility: hidden;
position: relative;
display: block;
margin-left: -1px;
width: calc(100% + 2px); /*両端がチラつくバグ対応*/
height: 1200px;
overflow: hidden;
}
#cont.top #mv .frame img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
#cont.top #mv .slider-container {
position: relative;
width: 100%;
height: 1200px;
overflow: hidden;
opacity: 0;
}
#cont.top #mv .image {
position: absolute;
inset: 0;
overflow: hidden;
}
.slide_anim {
animation: slideAnime 20s infinite;
}
@keyframes slideAnime {
0% {
opacity: 0;
z-index: 8;
}
8% {
opacity: 1;
z-index: 8;
}
25% {
opacity: 1;
z-index: 7;
}
33% {
opacity: 1;
background-size: auto 105%;
z-index: 7;
}
34% {
opacity: 0;
background-size: auto 100%;
z-index: 7;
}
100% {
opacity: 0;
z-index: 6;
}
}
#cont.top #mv .image:nth-of-type(4){
opacity: 0;
background-image: url('../img/top_slider_01.jpg');
background-position: center center;
background-size: auto 100%;
animation-delay: 0s;
}
#cont.top #mv .image:nth-of-type(1) {
opacity: 0;
background-image: url('../img/top_slider_02.jpg');
background-position: center center;
background-size: auto 100%;
animation-delay: 5s;
}
#cont.top #mv .image:nth-of-type(2) {
opacity: 0;
background-image: url('../img/top_slider_03.jpg');
background-position: center center;
background-size: auto 100%;
animation-delay: 10s;
}
#cont.top #mv .image:nth-of-type(3) {
opacity: 0;
background-image: url('../img/top_slider_04.jpg');
background-position: center center;
background-size: auto 100%;
animation-delay: 15s;
}
#cont.top #mv .frame--sticker .specular {
z-index: 9;
background-position: center top;
background-image: repeating-linear-gradient(135deg, rgba(40, 58, 222, 1) , rgba(112, 186, 170, 1) 80px, rgba(189, 177, 49, 1) 160px, rgba(46, 193, 219, 1) 320px, rgba(106, 166, 86, 1) 450px, rgba(59, 126, 235, 1) 550px, rgba(72, 42, 155, 0.7) 580px, rgba(79, 179, 196, 1) 650px, rgba(72, 42, 155, 1) 770px, rgba(40, 58, 222, 1) 820px);
opacity: 0.8;
}
#cont.top #mv .specular {
display: none;
background-color: #000;
mix-blend-mode: color-dodge;
background-attachment: fixed;
}
#cont.top #mv .cname {
position: absolute;
left: 40px;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
opacity: 0;
text-align: center;
background-repeat: no-repeat;
background-size: 85.62%;
background-position: center 29%;
background-image: url('data:image/svg+xml;utf8,');
}
#cont.top #mv .cname_white {
position: absolute;
left: 0px;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
opacity: 0;
text-align: center;
background-repeat: no-repeat;
background-size: 85.62%;
background-position: center 29%;
background-image: url('data:image/svg+xml;utf8,');
}
#cont.top #mv .shader__layer {
display: none;
}
#cont.top #mv .frame--sticker .mask {
background-repeat: no-repeat;
background-size: 85.62%;
background-position: center 29%;
z-index: 9;
mix-blend-mode: multiply;
background-image: url('data:image/svg+xml;utf8,');
}
#cont.top #mv .mask,
#cont.top #mv .mask::after,
#cont.top #mv .mask::before,
#cont.top #mv .specular,
#cont.top #mv .specular::after {
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#cont.top #mv .bg1 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 1200px;
background-image: url("../img/top_mv_bg1.svg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 1600px auto;
z-index: 10;
}
#cont.top #mv .bg2 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 1200px;
background-image: url("../img/top_mv_bg2.svg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 1600px auto;
z-index: 10;
}
@media(min-width:769px) and (max-width:1200px) {
/*---- mv ----*/
#cont.top #mv,
#cont.top #mv .image,
#cont.top #mv .shader,
#cont.top #mv .slider-container {
height: 800px;
}
#cont.top #mv .bg1,
#cont.top #mv .bg2 {
height: 100%;
background-position: center bottom -180px;
}
}
#cont.top section {
margin-bottom: 126px;
}
#cont.top .align_center {
text-align: center;
}
#cont.top .note {
font-size: 12px;
line-height: 18px;
}
#cont.top .title {
position: relative;
margin-top: -390px;
margin-bottom: 55px;
z-index: 10;
width: auto;
}
#cont.top .title h1 {
font-family: "Noto Sans JP";
font-weight: 500;
overflow: hidden;
}
#cont.top .title h1 .title_txt1 {
font-size: 54px;
line-height: 80px;
color: #1740b9;
margin-bottom: 24px;
}
#cont.top .title h1 .title_txt2 {
font-size: 28.8px;
line-height: 36px;
color: #1740b9;
}
#cont.top .intro {
position: relative;
z-index: 11;
}
#cont.top .intro p {
font-size: 20px;
line-height: 32px;
}
#cont.top .intro p:not(:last-child) {
margin-bottom: 24px;
}
@media(max-width:1599px){
#cont.top .title {
}
#cont.top .title h1 .title_txt1 {
font-size: 48px;
line-height: 70px;
}
}
@media(min-width:769px) and (max-width:1200px) {
#cont.top .title {
margin-top: -250px;
width: auto;
max-width: 100%;
}
}
@media(max-width:768px){
#cont.top #mv {
height: auto;
aspect-ratio: 400 / 364;
}
#cont.top #mv .image {
aspect-ratio: 400 / 364;
height: auto;
}
#cont.top #mv .shader {
height: auto;
aspect-ratio: 400 / 364;
}
#cont.top #mv .frame img {
height: auto;
}
#cont.top #mv .slider-container {
height: auto;
aspect-ratio: 400 / 364;
}
#cont.top #mv .image {
aspect-ratio: 400 / 364;
background: url("../img/top_slider_01.jpg") no-repeat center top;
background-size: cover;
}
#cont.top #mv .cname {
background-size: 88%;
background-position: center 37.4%;
}
#cont.top #mv .cname_white {
background-size: 88%;
background-position: center 37.4%;
}
#cont.top #mv .frame--sticker .mask {
background-size: 88%;
background-position: center 37.4%;
}
#cont.top #mv .mask,
#cont.top #mv .mask::after,
#cont.top #mv .mask::before,
#cont.top #mv .specular,
#cont.top #mv .specular::after {
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#cont.top #mv .bg1 {
height: auto;
aspect-ratio: 400 / 364;
background-size: 100% auto;
}
#cont.top #mv .bg2 {
height: auto;
aspect-ratio: 400 / 364;
background-size: 100% auto;
}
#cont.top section {
margin-bottom: 90px;
}
#cont.top .title {
margin-top: -20vw;
margin-bottom: 48px;
width: auto;
max-width: 100%;
}
#cont.top .title h1 .title_txt1 {
font-size: 21px;
line-height: 31px;
margin-bottom: 16px;
}
#cont.top .title h1 .title_txt2 {
font-size: 13px;
line-height: 20px;
}
#cont.top .intro p {
font-size: 16px;
line-height: 27px;
}
}
#cont.top h2.subtitle {
font-weight: normal;
font-size: 32px;
line-height: 48px;
text-align: center;
margin-bottom: 70px;
}
#cont.top h2.subtitle span {
font-size: 24px;
line-height: 36px;
}
#cont.top .bodycopy {
font-size: 16px;
line-height: 27px;
margin-bottom: 52px;
}
#cont.top .btn_winopen {
width: 282px;
margin: 0 auto 12px;
}
#cont.top .btn_winopen a {
position: relative;
display: block;
width: 100%;
text-align: center;
color: #1a1a1a;
font-size: 16px;
border: solid 1px #707070;
text-decoration: none;
line-height: 1;
background: rgba(255,255,255,0.8);
padding: 12px 20px 14px;
transition-duration: .5s;
}
#cont.top .btn_winopen a:hover {
background: #eee;
}
#cont.top .btn_winopen a::after {
position: absolute;
right: 18px;
top: calc(50% - 5.5px);
content: '';
display: inline-block;
width: 11px;
height: 11px;
background-image: url(../img/icon_winopen.svg);
background-size: contain;
vertical-align: middle;
}
@media(max-width:768px){
#cont.top h2.subtitle {
font-size: 24px;
line-height: 36px;
margin-bottom: 36px;
}
#cont.top h2.subtitle span {
font-size: 20px;
line-height: 32px;
}
}
#cont.top .about {
width: 100%;
aspect-ratio: 1600 / 1016;
max-width: 1640px;
padding: 10px 20px 0;
margin: 0 auto;
background: url("../img/top_about.jpg") no-repeat right center;
background-size: 100% auto;
}
#cont.top .about .subtitle {
margin-bottom: 126px;
}
#cont.top .about .copy {
font-size: 32px;
line-height: 48px;
margin-bottom: 24px;
}
#cont.top .about .ceo {
font-size: 18px;
line-height: 32px;
margin-bottom: 16px;
}
#cont.top .about a.link_arrow {
display: inline-block;
font-size: 22px;
}
#cont.top .about a:hover.link_arrow {
color: #1740b9;
text-decoration: none;
}
@media(max-width:768px){
#cont.top .about {
width: 100%;
aspect-ratio: auto;
max-width: 100%;
padding: 0 10px;
margin: 0 auto;
background: url("../img/top_about.jpg") no-repeat center 72px;
background-size: 100% auto;
}
#cont.top .about .subtitle {
margin-bottom: 0;
padding-bottom: 63.5%;
}
#cont.top .about .copy {
font-size: 20px;
line-height: 32px;
}
#cont.top .about a.link_arrow {
font-size: 18px;
}
}
#cont.top a .arrow {
position: relative;
display: inline-block;
width: 18px;
height: 2px;
margin: 12px 0 6px 8px;
border-radius: 9999px;
background-color: #1a1a1a;
}
#cont.top a .arrow::before,
#cont.top a .arrow::after {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 0;
width: 10px;
height: 2px;
border-radius: 9999px;
background-color: #1a1a1a;
transform-origin: calc(100% - 1px) 50%;
}
#cont.top a:hover.link_arrow .arrow,
#cont.top a:hover.link_arrow .arrow::before,
#cont.top a:hover.link_arrow .arrow::after {
background-color: #1740b9;
}
#cont.top a .arrow::before {
transform: rotate(45deg);
}
#cont.top a .arrow::after {
transform: rotate(-45deg);
}
#cont.top ul.btn_wrap {
max-width: 1240px;
gap: 24px;
margin: 188px auto 0;
padding: 0 20px 126px;
display: flex;
justify-content: space-between;
}
#cont.top ul.btn_wrap li {
width: 100%;
}
#cont.top ul.btn_wrap li a {
position: relative;
display: block;
width: 100%;
text-align: center;
color: #1a1a1a;
font-size: 20px;
border: solid 1px #707070;
text-decoration: none;
line-height: 1;
background: rgba(255,255,255,0.8);
padding: 16px 20px 18px;
transition-duration: .5s;
}
#cont.top ul.btn_wrap li a .icon {
position: absolute;
right: 24px;
}
#cont.top ul.btn_wrap li a:hover {
background: #eee;
}
@media(max-width:768px){
#cont.top a .arrow {
width: 14px;
margin: 8px 0 4px 6px;
}
#cont.top a .arrow::before,
#cont.top a .arrow::after {
width: 7px;
}
#cont.top ul.btn_wrap {
max-width: 77%;
gap: 24px;
margin: 54px auto 0;
padding: 0 0 90px;
display: flex;
flex-wrap: wrap;
}
#cont.top ul.btn_wrap li {
width: 100%;
}
#cont.top ul.btn_wrap li a {
font-size: 14px;
}
}
#cont.top ul.bnr {
max-width: 1240px;
gap: 24px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
}
#cont.top ul.bnr li {
display: block;
width: 100%;
aspect-ratio: 588 / 353;
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
transition-duration: .5s;
}
#cont.top ul.bnr li.finance { background-image: url("../img/top_business_01.jpg");}
#cont.top ul.bnr li.hr { background-image: url("../img/top_business_02.jpg");}
#cont.top ul.bnr li:hover {
background-size: 105%;
}
#cont.top ul.bnr li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
#cont.top ul.bnr li a p {
position: relative;
color: #fff;
font-weight: 500;
font-size: 25px;
line-height: 1;
text-shadow: 0px 0px 18px rgba(0, 0, 0, 0.3);
}
#cont.top ul.bnr li a span {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #99C2ED;
mix-blend-mode: multiply;
transition-duration: .5s;
}
#cont.top ul.bnr li a:hover span {
background-color: transparent;
}
#cont.top ul.bnr li a .arrow,
#cont.top ul.bnr li a .arrow::before,
#cont.top ul.bnr li a .arrow::after {
background-color: #FFF;
}
@media(max-width:768px){
#cont.top ul.bnr {
max-width: 100%;
gap: 12px;
padding: 0 10px;
}
#cont.top ul.bnr li a p {
font-size: 14px;
}
}
#cont.top dl.news {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
#cont.top dl.news dt {
border-bottom: solid 1px #CCC;
font-size: 14px;
line-height: 21px;
padding: 20px 20px 20px 0;
width: 200px;
}
#cont.top dl.news dd {
border-bottom: solid 1px #CCC;
font-size: 16px;
line-height: 27px;
padding: 20px 0;
width: calc(100% - 200px);
}
#cont.top dl.news dt:nth-of-type(1),
#cont.top dl.news dd:nth-of-type(1){
border-top: solid 1px #CCC;
}
@media(max-width:768px){
#cont.top dl.news {
width: auto;
max-width: 100%;
margin: 0 10px;
padding: 0;
}
#cont.top dl.news dt {
width: 100px;
}
#cont.top dl.news dd {
width: calc(100% - 100px);
}
}
#cont.top .recruit_bg {
background: url("../img/top_recruit.jpg") no-repeat center top;
background-size: 100% auto;
aspect-ratio: 1600 / 695;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding-top: 360px;
}
@media(max-width:1599px){
#cont.top .recruit_bg {
background: url("../img/top_recruit.jpg") no-repeat center top;
background-size: 100% auto;
aspect-ratio: 1600 / 695;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding-top: 22.5%;
}
}
#cont.top .recruit_txt {
width: 100%;
text-align: center;
}
#cont.top .recruit_txt img {
width: auto;
max-width: 90%;
}
#cont.top .btn_recruit a {
position: relative;
width: 325px;
display: block;
background: #fff;
border: 1px solid #1e88e4;
border-radius: 50px;
font-family: "DIN Pro";
font-weight: 500;
font-size: 21px;
line-height: 31px;
text-align: center;
color: #1e88e4;
padding: 16px 0;
margin: 24px auto 0;
text-decoration: none;
transition-duration: .5s;
}
@media(max-width:1439px){
#cont.top .recruit_bg {
padding-top: 25%;
}
#cont.top .btn_recruit a {
margin: 7% auto 0;
}
}
@media(max-width:1199px){
#cont.top .recruit_bg {
padding-top: 22.5%;
}
#cont.top .recruit_txt img {
max-width: 75%;
}
}
#cont.top .btn_recruit a:hover {
background: #E1F1FF;
}
#cont.top .btn_recruit a::after {
position: absolute;
right: 18px;
top: calc(50% - 5.5px);
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
vertical-align: middle;
}
@media(max-width:768px){
#cont.top .recruit_txt img {
max-width: 90%;
}
#cont.top .btn_recruit a {
width: 75%;
margin: 5% auto 0;
padding: 16px 0;
font-size: 16px;
line-height: 1;
}
}