@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/

/*
top
-------------------------------- */
.top-txt-1{ margin-top: 0.6em; font-size: 1.4em; font-weight: 400; line-height: calc(25/14); color: var(--gray-color); }
.top-txt-1--column{ margin-top: 3.571em; }
/*
top-visual.title-2--ja
-------------------------------- */
.top-visual{ position: relative; }
.top-visual-slider-wrapper { position: relative; height: 36em; z-index: 1; }
.top-visual .splide,
.top-visual .splide__track { height: 100%; }
.top-visual-desc{ position: absolute; left: 1.875em; top: 2.4em; font-size: 4.8em; font-weight: 900; letter-spacing: 0.1em; line-height: calc(84/64); color: #fff; text-shadow: 2px 2px 8px #1F2933; }
.top-visual-logo { position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, 0.6); width: 100%; height: 100%; }
.top-visual-logo img { position: absolute; top: calc(50% + 2em); left: 50%; transform: translate(-50%, -50%); width: calc(840 / 1280 * 100%); height: auto; max-width: 840px; }
.top-visual-en { display: flex; align-items: center; position: absolute; bottom: 0; left: 0; padding-left: 3em; width: 40%; height: 5em; background-color: rgba(46, 61, 81, 0.6); border-radius: 0 9em 0 0; font-size: 2.6em; font-weight: 900; letter-spacing: 0.1em; line-height: 1.6; color: #fff; }
.top-visual-controls{ position: absolute; bottom: 2em; right:calc(160/1920 * 100%); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5em; }
.top-visual-progress-nav{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.top-visual-nav-item span{ position: relative; display: block; width: 3.6em; height: .6em; background-color: #F7FCFF; opacity: .5; }
.top-visual-nav-item.active span{ background-color: #09A6DC; opacity: 1; }
.top-visual-nav-item.active span::before{ content: ''; position: absolute; left: -1px; top:-1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 1px solid #fff; }
.top-visual-arrow-btn{ cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 2.7em; height: 2.7em; line-height: 1; background-color: transparent; border:1px solid rgba(136, 136, 136, .3); border-radius: 50%; }
.top-visual-arrow-btn:hover{ background-color: #fff; }
.top-visual-arrow-btn:hover svg path{ fill:var(--blue-color) }
.top-visual-news{ position: absolute; top: 26.7em; right: 0; width: 44em; height: 37.2em; background-color: #fff; border-radius: 3em 0 0 3em; z-index: 2; }
.top-visual-news__inner { padding: 1em 2em; height: 100%; overflow-y: auto; }
.top-visual-news__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 1.2em; }
.top-visual-news__ttl{ display: flex; align-items: baseline; gap: 1em; padding-top: 1em; font-size: 1em; }
.top-visual-news__more{ white-space: nowrap; font-size: 1.2em; line-height: 150%; color:var(--blue-color); }
.top-visual-news__ttl--en,
.top-visual-news__ttl--jp { white-space: nowrap; }
.top-visual-news__ttl--en{ font-size: 2.4em; font-weight: 900; line-height: 1.2; letter-spacing: .02em; color: var(--blue-color); }
.top-visual-news__ttl--jp{ font-size: 1.4em; font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: rgba(2, 63, 129, 0.4); }
.top-visual-news__list{ width: 100%; }
.top-visual-news__list li+li{ border-top:1px solid #DCE3F0; }
.top-visual-news__list li a{ padding: 1em 0; display: grid; grid-template-columns: 6.4em calc(100% - 6.4em); background: url(../../img/icons/arrow_next_2.png) no-repeat right center / 1em; font-size: 1.4em; font-weight: 400; }
.top-visual-news__date{ color: rgba(54, 54, 54, 0.8); }
.top-visual-news__txt{ padding-right: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#000;}

@media only screen and (min-width: 1367px) {
    .top-visual-desc { font-size: 3.4rem; }
    .top-visual-en { padding-left: 5.5rem; height: 9.2rem; border-radius: 0 16.6rem 0 0; font-size: 1.8rem; }
}

@media only screen and (min-width: 769px) {
    .top-visual-news__inner { display: grid; column-gap: 2.6em; }
    .top-visual-logo { width: 50%; }
    .top-visual-logo img { top: calc(50% + 5em); }
}

@media only screen and (max-width: 1366px) and (min-width: 769px) {
    .top-visual { font-size: 0.732vw; }
}

@media only screen and (max-width: 1920px) and (min-width: 769px) {
    .top-visual .splide__slide { font-size: 0.52083vw; }
}

@media only screen and (max-width: 768px) {
    .top-visual-slider-wrapper{ position: relative; }
    .top-visual-desc{ top: 3em; left: 1em; width: calc(100% - 2em); font-size: 6vw; }
    .top-visual-en { width: 100%; min-height: 10rem; border-radius: calc(140 / 100 * 2.4em) 0 0 0; font-size: 2em; line-height: 1.4; }
    .top-visual-controls{ bottom: 2em; right: 0; width: 100%; justify-content: center; }
    .top-visual-news{ position: relative; top: auto; right: auto; margin: 1em auto 0; padding: 0; width: 100%; height: 33em; }
    .top-visual-news__inner { padding-top: 0; padding-bottom: 0; }
    .top-visual-news__ttl--en{ font-size: 2.24em; }
    .top-visual-news__ttl--jp{ font-size: 1.4em; }
    .top-visual-news__more{ font-size: 1.3em; }
}

/*
top-services
-------------------------------- */
.top-services{ padding-top: 1.6em; padding-bottom: 1.6em; }
.top-services__list{ display: flex; flex-wrap: wrap; gap: 1.2em; position: relative; margin-top: 2em; }
.top-services__list-item{ position: relative; width: calc(290 / 1366 * 100%); z-index: 1; }
.top-services__list-item a{ display: block; position: relative; width: 100%; }
.top-services__list-card { position: relative; aspect-ratio: 2.2391304347 / 1; padding: 2em 1.4em; border-radius: 2.2em; overflow: hidden; }
.top-services__list-icon{ position: absolute; bottom: 2em; right: 2em; line-height: 1; }
.top-services__list-icon svg{ width: 3em; height: 3em; }
.top-services__list-ttl{ text-shadow: 2px 2px 8px #1F2933; font-size: 2em; font-weight: 700; line-height: calc(28/24); color: #fff; }
.top-services__list-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-services__list-txt{ margin-top: 1.5384em; font-size: 1.3em; font-weight: 400; line-height: calc(20/13); color: #1F2933; }

.top-services__list.u-lazy .top-services__list-item { transition: transform 0.2s cubic-bezier(0.64, 0, 0.78, 0), opacity 0.2s cubic-bezier(0.64, 0, 0.78, 0); transform-origin: center center; transform: scale(1.1); opacity: 0; }
.top-services__list.u-lazy-done .top-services__list-item { transform: scale(1); opacity: 1; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(2) { transition-delay: 0.15s; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(3) { transition-delay: 0.3s; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(4) { transition-delay: 0.45s; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(5) { transition-delay: 0.6s; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(6) { transition-delay: 0.75s; }
.top-services__list.u-lazy .top-services__list-item:nth-of-type(7) { transition-delay: 0.9s; }

@media only screen and (min-width: 769px) {
    .top-services .title-row { width: calc(100% - 44em); }
    .top-services__list-item:nth-of-type(3) { margin-right: calc((290 / 1366 * 100%) + 1.2em); }
    .top-services__list-item:last-child { position: absolute; bottom: 0; left: calc(((290 / 1366 * 100%) * 3) + (1.2em * 3)); height: calc((50% - (1.2em / 2)) / 2); }
    .top-services__list-item:last-child > a { height: 100%; }
    .top-services__list-item:last-child .top-services__list-card { aspect-ratio: inherit; height: 100%; }
    .top-services__list-item:last-child .top-services__list-ttl br { display: none; }
    .top-services__list-txt{ max-width: 22.923em; }
}

@media only screen and (min-width: 1366px) {
    .top-services__list-item{ width: calc(((100% - 440px) / 3) - (1.2em / (3 / 2))); }
    .top-services__list-item:nth-of-type(3) { margin-right: 440px; }
    .top-services__list-item:last-child { left: calc(((((100% - 440px) / 3) - (1.2em / (3 / 2))) * 3) + (1.2em * 3)); }
}

@media only screen and (max-width: 1366px) and (min-width: 769px) {
    .top-services { font-size: 0.732vw; }
}

@media only screen and (max-width: 768px) {
    .top-services{padding: 3em 0 6em; }
    .top-services__list{ margin-top: 3em; flex-direction: column; }
    .top-services__list-item{ width: 100%; }
    .top-services__list-ttl{ font-size: 1.7em; }
    .top-services__list-icon svg{ width: 3.15em; height: 3.15em; }
}

/*
top-column
-------------------------------- */
.top-column{ position: relative; padding-bottom: 2em; }
.top-column-desc{ width: 35.5em; position: relative; z-index: 2; }
.top-column-slider{ margin-top: 2em; }
/* .top-column-slider .splide { padding-bottom: 6.5em; } */
.top-column-slider .splide__track{  overflow: visible; }
.top-column-slider .splide__arrows{ position: absolute; right: 0; bottom: 0; min-height: 5.1em; width: 12.6em; }
.top-column-slider .splide__arrow{ font-size: 1em; width: 5.1em; height: 5.1em; background-color: #fff; opacity: 1; }
.top-column-slider .splide__arrow:disabled{ opacity: .3; }
.top-column-slider .splide__arrow svg{ width: 2em;height: 2em; }
.top-column-slider .splide__arrow svg path{ fill:var(--main-color) }
.top-column-slider .splide__arrow--prev{ left: 0; }
.top-column-slider .splide__arrow--next{ right: 0; }

@media only screen and (min-width: 769px) {
    .top-column-row{ position: relative; display: flex; flex-wrap: wrap; gap: 9em; height: 52.5em; }
    .top-column-posts{ overflow: hidden; position: absolute; left: 44.5em; top:0; width: 100%; }
    .top-column-desc{ padding-top: 4.6em; }
}
@media only screen and (max-width: 768px) {
    .top-column{ padding-top: 6em; padding-bottom: 6em; }
    .top-column-slider{ margin-top: 3em; width: 100%; }
    .top-column-desc{ width: 100%; }
    .top-column-posts{ margin-top: 3em; }
}

/*
top-isp
-------------------------------- */
.top-isp{ padding-top: 2em; background: linear-gradient(140.28deg, #FFFFFF 0%, rgba(255, 255, 255, 0.8) 47.6%, #FFFFFF 100%); box-shadow: 0px 4px 50px 10px rgba(0, 55, 185, 0.02); }
.top-isp__logos{ padding-top: 2em; padding-bottom: 2em; position: relative; overflow: hidden; }
.top-isp__logos::before,
.top-isp__logos::after{ content: ''; position: absolute; top:0; width: 15.5em; height: 100%; z-index: 1; pointer-events: none; }
.top-isp__logos::before{left:0;background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 84.62%); }
.top-isp__logos::after{right:0;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 84.62%); }
.top-isp__logos-lists{ display: flex; flex-wrap: nowrap; gap:3em; }
.top-isp__logos-lists--bottom{ margin-top: 1em; }
.top-isp__logos-lists--link{ display: block; padding: 1em;border-radius: 2.2em; }
.top-isp__logos-lists--link:hover{ background-color: #fff; box-shadow: 0px 20px 100px 5px rgba(0, 0, 0, 0.12); }
.top-isp__logos-lists .splide__slide{ display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.top-isp__logos-lists .splide__track{ overflow: visible; }

@media only screen and (max-width: 768px) {
    .top-isp{ padding-top: 6em; }
    .top-isp__logos::before,
    .top-isp__logos::after{ width: 5em; }
    .top-isp__logos-lists--link{ padding: 1.5em; }
}

.top-recruit-row{ display: flex; flex-wrap: wrap; background-color: var(--blue-color); min-height: 49em; }
.top-recruit-colleft{ padding-left: 8.4em; display: inline-flex; flex-wrap: wrap; align-items: center; flex: 1; background:url(../../img/top/recruit_bnr.jpg) no-repeat 0 center / cover; }
.top-recruit-colright{ width: calc(835/1920 * 100%); }
.top-recruit__btn{ padding: 6em 5em 5em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 57.5em; background-color: #fff; border-radius: .8em; }
.top-recruit__ttl{ font-size: 1em; }
.top-recruit__ttl-en{ display: block; font-size: 4em; font-weight: 700; font-family: var(--ff-dm-sans); line-height: calc(53/40); letter-spacing: 0.04em; color: var(--sky-blue-color); }
.top-recruit__ttl-ja{ display: block; font-size: 1.4em; font-weight: 700; line-height: 150%; letter-spacing: 0.04em; color: #1A1C1D; }
.top-recruit__contact{ position: relative; padding: 0 2em 0 16em; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; height: 100%; font-size: 1em; }
.top-recruit__contact-en{ display: block; font-family: var(--ff-dm-sans); font-size: 1.2em; font-weight: 700; line-height: calc(22/12); letter-spacing: 3px; text-transform: uppercase; color: var(--sky-blue-color); }
.top-recruit__contact-ja{ display: block; font-size: 3.8em; font-weight: 700; line-height: calc(48/38); color:#fff; }
.top-recruit__contact-txt{ margin-top: .42857em; font-size: 1.4em; font-weight: 500; line-height: calc(32/14); color:#fff; }
.top-recruit__contact-tel{ text-indent: 1.8461em; margin-top: .5769em; font-size: 2.6em; font-weight: 700; line-height: calc(32/26); color:#fff; }
.top-recruit__contact-icon{ padding-top: 2.6em; position: absolute; top:50%; right: 16em; transform: translateY(-50%); }


@media only screen and (max-width: 1920px) and (min-width: 769px) {
	.top-recruit-row{ font-size: 0.52083vw; }
}

@media only screen and (max-width: 768px) {
    .top-recruit-row{ min-height: unset; }
    .top-recruit-colleft{ width: 100%; padding: 3em; }
    .top-recruit__btn{ padding: 3em; width: 100%; max-width: 32em; }
    .top-recruit-colright{ width: 100%; }
    .top-recruit__contact{ padding: 3em; }
    .top-recruit__contact-icon{ right: 3em; }
    .top-recruit__contact-ja{ font-size: 2.66em; }
    .top-recruit__contact-txt{ max-width: 17.85714em; line-height: 1.5; }
}