@charset "UTF-8";

/*======================================================================
  Reset CSS for HTML5
======================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
    text-align: left;
    zoom: 1;
    color: #333333;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
table {
    border-collapse: collapse;
    font-family: inherit;
}
h1,h2,h3,h4,h5 {
    font-size: 100%;
    font-weight: normal;
    line-height: 1;
}
input,textarea,select {
    font-family: inherit;
    font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}
textarea {
    resize: none;
    -webkit-appearance: none;
    border-radius: 0;
}
body {
    color: #333333;
    background: #FCFCFD;
}
th,td {
    border-collapse: collapse;
}
table th,table td {
    white-space: nowrap;
}
ul,ol {
    list-style-type: none;
}
img {
    vertical-align: text-bottom;
    vertical-align: -webkit-baseline-middle;
}
a {
    color: #333333;
    text-decoration: none;
}
a span {
    text-decoration: none;
    transition: 1s all;
}
a:hover {
    transition: 1s all;
}

/*======================================================================
  Base
======================================================================*/
body{
    overscroll-behavior-y: none;
}

.header-title .logo {
    font-size: 0;
}

.inner {
    position: relative;
    width: 1100px;
    margin: 0 auto;
}
.contents {
    position: relative;
    padding-top: 224px;
}
.single-header {
    position: relative;
}
.breadcrumb {
    width: 1100px;
    margin: 0 auto;
}
.breadcrumb ul {
    position: absolute;
    right: 0;
    bottom: 40px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
}
.breadcrumb li,
.breadcrumb li a {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
}
.breadcrumb li:first-child a {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
.breadcrumb li {
    position: relative;
    padding-right: 24px;
    color: #333;
}
.breadcrumb li:last-child {
    padding-right: 0;
}
.breadcrumb li::before {
    position: absolute;
    content: '／';
    width: 24px;
    height: 24px;
    top: -1px;
    right: 0;
    color: #D1D1D1;
    font-size: 16px;
    text-align: center;
    transition: 1s all;
}
.breadcrumb li:last-child:before {
    content: none;
}
.breadcrumb li a {
    color: #0F0F93;
    transition: 1s all;
}
.breadcrumb li a:hover {
    opacity: 0.5;
}
.breadcrumb-bg-on li,
.breadcrumb-bg-on li a {
    color: #fff;
}

.sp {
    display: none;
}
.pc {
    display: block;
}

@media screen and (max-width: 1180px) {
    .inner {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    .contents {
        padding-top: 71px;
    }
    .contents .header-title {
        padding-top: 77px;
    }
    .breadcrumb {
        width: 100%;
    }
    .sp {
        display: block;
    }
}
@media screen and (max-width: 1080px) {
    .contents .header-title {
        padding-top: 112px;
    }
    .breadcrumb ul {
        top: -112px;
    }
}
@media screen and (max-width: 640px) {
    .pc {
        display: none;
    }
}
@media screen and (max-width: 460px) {
    .breadcrumb ul {
        height: 56px;
    }
    .breadcrumb li,
    .breadcrumb li a {
        font-size: 16px;
    }
}



/*見出し*/
.header-title {
    text-align: center;
}
.header-title span {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.header-title h1,
.header-title h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 46px;
    text-align: center;
    margin: 12px 0 20px;
    letter-spacing: 1.5px;
}
.header-title p,
.header-txt p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    line-height: 26px;
}

@media screen and (max-width: 640px) {
    .header-title h1,
    .header-title h2 {
        font-size: 38px;
    }
}
@media screen and (max-width: 400px) {
    .header-title h1,
    .header-title h2 {
        font-size: 29px;
    }
    .header-title p br,
    .header-txt p br {
        display: none;
    }
}


/*View moreボタン*/
.btn-white {
    display: flex;
    justify-content: center;
    width: 480px;
}
.btn-white a {
    position: relative;
    width: 260px;
    height: 57px;
    line-height: 57px;
    padding: 0 24px;
    border: #CFD5DE 1px solid;
    border-radius: 2px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    background: #fff;
    transition: .6s all;
    overflow: hidden;
    z-index: 1;
}
.btn-white a::before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    top: 40%;
    right: 24px;
    background: url('../img/icon_viewmore.svg')no-repeat;
    z-index: 1;
}
.btn-white a:hover::before {
    transition: .6s all;
    background: url('../img/icon_viewmore_hover.png')no-repeat;
}
.btn-white a:hover {
    color: #fff;
    transition: .6s all;
}
.btn-white a::after {
    position: absolute;
    content: '';
    width: 0;
    height: 57px;
    top: 0;
    left: 0;
    transition: .6s all;
    z-index: -1;
}
.btn-white a:hover::after {
    width: 320px;
    background: #0F0F93;
}

@media screen and (max-width: 640px) {
    .btn-white {
        width: 100%;
    }
}

/*エントリーボタン*/
.btn-red {
    display: flex;
    justify-content: center;
    padding: 144px 0;
}
.btn-red a {
    position: relative;
    display: inline-block;
    width: 420px;
    height: 80px;
    box-sizing: border-box;
    background: #C42D00;
    vertical-align: top;
    overflow-y: hidden;
}
.btn-red a::after {
    position: absolute;
    content: '';
    width: 48px;
    height: 48px;
    top: 16px;
    right: 24px;
    border: #E5EBF5 1px solid;
    border-radius: 50px;
}
.btn-red a::before {
    position: absolute;
    content: '';
    width: 22px;
    height: 22px;
    top: 30px;
    right: 60px;
    background: url('../img/icon_entry.svg')no-repeat;
    transition: .5s all;
}
.btn-red a:hover::before {
    right: 40px;
    transition: .5s all;
}
.btn-red a span {
    position: relative;
    display: inline-block;
    width: 420px;
    height: 100%;
    top: 28px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    transition: .5s all;
}
.btn-red a:hover span {
    top: -52px;
    transition: .5s all;
}
.btn-red a span.hover {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 640px) {
    .btn-red {
        padding: 80px 0;
    }
    .btn-red a,
    .btn-red a span {
        width: 100%;
    }
}
@media screen and (max-width: 460px) {
    .btn-red a::before {
        position: absolute;
        content: '';
        width: 22px;
        height: 22px;
        top: 30px;
        right: 42px;
        background: url(../img/icon_entry.svg)no-repeat;
        transition: .5s all;
    }
    .btn-red a::after {
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        top: 20px;
        right: 16px;
        border: #E5EBF5 1px solid;
        border-radius: 50px;
    }
    .btn-red a span {
        font-size: 16px;
    }
}


/*======================================================================
  nav
======================================================================*/

.nav-box {
    margin-bottom: 168px;
}
.nav-box ul,
.nav-box-sub ul {
    display: flex;
    flex-wrap: wrap;
}
.nav-box > ul > li {
    width: calc(100% / 2);
}
.nav-box-sub ul li {
    width: 144px;
    margin-right: 40px;
}
.nav-box-sub ul li:nth-child(2n) {
    width: 176px;
}
.nav-box-sub ul li:nth-child(3n) {
    width: 224px;
}
.nav-box > ul > li > ul {
    margin-bottom: 32px;
}
.nav-box a,
.nav-box-sub a {
    display: inline-block;
    color: #fff;
    transition: 1s all;
}
.nav-box a:hover,
.nav-box-sub a:hover {
    color: #00B4CC;
}
.nav-box a.nav-main,
.nav-box-sub a.nav-main {
    padding: 0 0 24px 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 18px;
    background: url('../img/icon_fnav_main.png')no-repeat top left;
}
.nav-box a.nav-sub,
.nav-box a.nav-link,
.nav-box-sub a.nav-sub,
.nav-box-sub a.nav-link {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-size: 16px;
}
.nav-box a.nav-sub,
.nav-box-sub a.nav-sub {
    margin-left: 24px;
    padding: 0 0 8px 24px;
    font-weight: 700;
    background: url('../img/icon_fnav_sub.png')no-repeat top 2px left;
}
.nav-box a.nav-link,
.nav-box-sub a.nav-link {
    margin: 0 0 24px;
    padding-right: 16px;
    font-weight: 500;
    background: url('../img/icon_fnav_target_blank.svg')no-repeat top 4px right;
    background-size: 12px;
}

/*======================================================================
  Header
======================================================================*/

.header {
    position: fixed;
    width: 100%;
    height: 70px;
    background: rgba(51, 51, 51,.2);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(255,255,255,.3);
    z-index: 9998;
}
.bg-bk {
    background: linear-gradient(to left, #444, #222);
}
.header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);/*ぼかし*/
}
.header .header-title {
    display: flex;
    align-items: center;
}
.header .logo {
    margin: 0 32px;
    transition: 1s all;
}
.header .logo:hover {
    opacity: 0.5;
}
.header .logo + span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 0 32px;
    height: 70px;
    background-clip: padding-box;
    border-right: 1px solid rgba(255,255,255,.3);
    border-left: 1px solid rgba(255,255,255,.3);
}
.header nav ul {
    display: flex;
    align-items: center;
}
.header nav a span {
    display: block;
    width: 100%;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.header nav li {
    margin-right: 32px;
}
.header nav li:last-child {
    margin-right: 0;
}
.header nav li a.normal {
    position: relative;
    display: block;
    width: 120px;
    height: 19px;
    text-align: center;
    overflow: hidden;
    transition: .4s all;
    transform: translateX(0);
}
.header nav li:nth-child(1) a.normal,
.header nav li:nth-child(2) a.normal{
    width: 96px;
}
.header nav li a.normal span:first-child {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
.header nav li a.normal span:last-child {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
}
.header nav li a.normal:hover span {
    position: relative;
    transform: translateY(-21px);
    transition: .4s all;
}

@media screen and (max-width: 1180px) {
    .header-nav {
        display: none;
    }
    .header .inner {
        position: relative;
        padding: 0 20px;
    }
    .header .logo {
        margin: 0 20px 0 0;
    }
    .header .logo + span {
        padding: 0 20px;
    }
}


/*エントリーボタン*/
a.btn-entry {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 52px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-right: 10px;
    border-radius: 2px;
    background: linear-gradient(to right, #00C8F8, #00004B);
    background-size: 120% 50%;
    transition: 1s all;
}
a.btn-entry:hover {
    background-position: 100% 100%;
}


/*ハンバーガーメニュー*/
.btn-hamburger,
.fnav-box .sp-nav,
.gnav-box.active .nav-box,
.gnav-box.active .nav-box-sub {
    display: none;
}
.gnav-box {
    position: absolute;
    content: '';
    top: 70px;
    right: -100%;
    overflow: hidden;
}

@media screen and (max-width: 1180px) {
    .btn-hamburger {
        position: absolute;
        display: block;
        top: 0;
        right: 20px;
        width: 50px;
        height: 70px;
        padding: 24px 0 0 20px;
        border-left: 1px solid rgba(255,255,255,.3);
        box-sizing: border-box;
    }
    .btn-hamburger span {
        width: 100%;
        height: 1px;
        background-color: #fff;
        position: relative;
        transition: ease .4s;
        display: block;
    }
    .btn-hamburger span:nth-child(1) {
        top: 0;
    }
    .btn-hamburger span:nth-child(2) {
        margin: 8px 0;
    }
    .btn-hamburger span:nth-child(3) {
        top: 0;
    }


    /* ハンバーガーメニュークリック後のスタイル */
    .btn-hamburger.active {
        transform: translateX(0);
    }
    .btn-hamburger.active span:nth-child(1) {
        top: 12px;
        transform: rotate(32deg);
    }
    .btn-hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .btn-hamburger.active span:nth-child(3) {
        top: -6px;
        transform: rotate(-32deg);
    }
    .header {
        transition: ease .4s;
    }
    .header.active {
        background: #444;
        transition: ease .4s;
    }
    .gnav-box.active .nav-box,
    .gnav-box.active .nav-box-sub {
        display: block;
    }
    .gnav-box .nav-box {
        margin-bottom: 0;
    }
    .gnav-box .nav-box > ul li {
        width: 100%;
    }
    .gnav-box .nav-box > ul > li > ul {
        margin-bottom: 0;
    }
    .gnav-box .nav-box > ul > li {
        margin-bottom: 24px;
    }
    .gnav-box a.nav-main {
        padding: 0 0 16px 32px;
        font-size: 26px;
        background: url(../img/icon_fnav_main.svg)no-repeat top 5px left;
        background-size: 22px;
    }
    .gnav-box a.nav-sub {
        margin-left: 34px;
        padding-left: 28px;
        font-size: 19px;
        background: url(../img/icon_fnav_main.svg)no-repeat top 7px left;
        background-size: 16px;
    }
    .gnav-box .nav-box-sub {
        width: calc(100% - 64px);
        margin-top: 80px;
    }
    .footer-nav-sub ul {
        width: 353px;
    }
    .gnav-box .nav-box-sub ul li {
        width: 180px;
        margin-right: 0;
    }
    .gnav-box .nav-box-sub ul li.long {
        width: 100%;
    }
    .gnav-box .nav-box-sub ul:last-child li:last-child a.nav-sub {
        margin-bottom: 0;
    }
    .gnav-box .sp-nav {
        display: block;
    }
    .gnav-box a.nav-link {
        font-size: 16px;
        padding-right: 18px;
        background: url(../img/icon_fnav_target_blank.svg)no-repeat top 6px right;
        background-size: 12px
    }
    .fnav-box {
        display: none;
    }
    .gnav-box {
        width: 100%;
        height: calc(100vh - 70px);
        transition: all .4s;
        padding: 64px 32px;
        background: linear-gradient(to bottom, #444, #222);
        box-sizing: border-box;
    }
    .gnav-box.active {
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        height: calc(100vh - 70px);
        z-index: 9999;
        border-top: 1px solid rgba(255,255,255,.3);
        border-left: 0;
        background: linear-gradient(to bottom, #444, #222);
        overflow-x: auto;
        opacity: 1;
        overflow-y: auto;
        transform: translateX(0);
    }
}
@media screen and (max-width: 420px) {
    .gnav-box.active .nav-box-sub ul {
        display: block;
    }
    .gnav-box.active .nav-box-sub ul li {
        width: 100%;
    }
}

/*======================================================================
  ローディング
======================================================================*/

#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #0E25D9;
    background: #fff;
    z-index: 9999;
}

/* Loadingバー中央配置　*/
#splash_text {
    position: absolute;
    width: 100%;
    left: 50%;
    bottom: 28%;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #0E25D9;
    transform: translate(-50%, -50%);
    z-index: 999;
}
span.percent {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 40px;
}
span.loaging {
    display: block;
    color: #444;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 20px;
    padding-left: 8px;
}

path {
   /*fillはプレゼンテーション属性なので, CSSから値を指定できる*/
   fill: url(#g)!important;
}

/*======================================================================
  モーダル
======================================================================*/

.modal-container {
    position: fixed;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(68,68,68,.6);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 9999;
}
.modal-container:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.modal-container.active {
    opacity: 1;
    visibility: visible;
}
.modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 1100px;
}
.modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -40px;
    right: 50%;
    width: 1px;
    height: 1px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}
.modal-content {
    background: #fff;
    text-align: left;
    padding: 88px 48px;
    height: calc(100vh - 240px);
    box-sizing: border-box;
}
@media screen and (max-width: 1180px) {
    .modal-body {
        width: calc(100% - 40px);
    }
    .modal-content {
        padding: 40px 20px;
    }
}
@media screen and (max-width: 640px) {
    .modal-container {
        align-items: flex-start;
        padding-top: 20px;
    }
    .modal-body {
        width: calc(100% - 40px);
    }
    .modal-content {
        padding: 40px 20px;
        height: calc(100vh - 120px);
    }
}


/*リファラル採用*/
.recruit-bg {
    position: relative;
    background: #fff url('../img/modal-recruit_img.png')no-repeat right 24px bottom 24px;
}
.recruit-bg::before {
    position: absolute;
    content: 'REFERRAL';
    top: 16px;
    left: 96px;
    color: #CFD5DE;
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 182px;
    z-index: 1;
    opacity: 0.4;
}
.modal-recruit {
    position: relative;
    z-index: 2;
}
.modal-recruit h2,
.modal-recruit h3,
.modal-recruit h4,
.modal-recruit div,
.modal-recruit p,
.modal-recruit strong {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    direction: ltr;
}
.modal-recruit p {
    font-weight: 500;
}
.modal-recruit span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}
.modal-recruit .modal-box {
    margin: 40px 0 56px;
    padding: 0 40px 32px;
    border-radius: 2px;
    border: #0F0F93 1px solid;
    background: #0F0F93;
}
.modal-recruit h2 {
    color: #0F0F93;
    font-size: 30px;
    line-height: 48px;
    margin-bottom: 12px;
}
.modal-recruit h2 span {
    position: relative;
    top: -8px;
    left: 1px;
    display: inline-block;
    color: #C42D00;
    font-size: 18px;
}
.modal-recruit .scroll-box {
    width: 518px;
    height: calc(100vh - 400px);
    padding-left: 40px;
    overflow-y: scroll;
    direction: rtl;
}
.modal-recruit .scroll-box::-webkit-scrollbar {
    width: 7px;
}
.modal-recruit .scroll-box::-webkit-scrollbar-track {
    background: #F6F7F9;
}
.modal-recruit .scroll-box::-webkit-scrollbar-thumb {
    background: #CFD5DE;
}

.modal-recruit .contents-box {
    width: 400px;
    margin-right: auto;
}
.modal-recruit .contents-box .txt {
    position: relative;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 32px;
    padding-left: 16px;
}
.modal-recruit .contents-box .txt::after {
    position: absolute;
    content: '※';
    top: 0;
    left: 0;
    color: #C42D00;
    font-size: 16px;
}
.modal-recruit .scroll-box p {
    font-size: 16px;
    line-height: 32px;
}
.modal-recruit .modal-box {
    position: relative;
}
.modal-recruit .modal-box::before {
    position: absolute;
    content: '';
    width: 88px;
    height: 123px;
    right: -24px;
    bottom: -32px;
    background: url('../img/modal-recruit-box_img.png')no-repeat;
}
.modal-recruit .modal-box h3 {
    padding: 6px 40px;
    margin-bottom: 32px;
    border-radius: 0 0 4px 4px;
    color: #0F0F93;
    font-size: 16px;
    background: #fff;
    text-align: center;
}
.modal-recruit .modal-box p {
    color: #fff;
    font-size: 16px;
}
.modal-recruit .modal-box p span {
    color: #FFCE00;
}
.modal-recruit .modal-box p span.number {
    font-size: 26px;
}
.modal-recruit .modal-box p span.money {
    font-size: 16px;
    margin-right: 8px;
}
.modal-recruit .modal-box span.supplement {
    display: block;
    color: #fff;
    font-size: 12px;
    margin-top: 16px;
}
.modal-recruit ul li {
    position: relative;
    padding: 16px 0 40px;
}
.modal-recruit ul li::after,
.modal-recruit ul li::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
}
.modal-recruit ul li::after {
    width: 100%;
    height: 1px;
    background: #D1D1D1;
    z-index: 1;
}
.modal-recruit ul li::before {
    width: 25%;
    height: 1px;
    background: #0E25D9;
    z-index: 2;
}
.modal-recruit ul li h4 {
    color: #0E25D9;
    font-size: 16px;
}
.modal-recruit ul li a {
    color: #0E25D9;
    text-decoration: underline;
    padding-right: 16px;
    background: url('../img/icon_modal-link.png')no-repeat center right 4px;
    transition: .5s all;
}
.modal-recruit ul li a:hover {
    color: #444;
}
.modal-recruit strong {
    font-size: 18px;
}

@media screen and (max-width: 1180px) {
    .modal-recruit .scroll-box {
        height: calc(100vh - 320px);
    }
    .recruit-bg::before {
        top: 16px;
        left: 96px;
        font-size: 120px;
    }
}
@media screen and (max-width: 880px){
    .modal-recruit {
        background: rgba(255,255,255,.9);
    }
}
@media screen and (max-width: 640px) {
    .modal-recruit {
        background: rgba(255,255,255,.9);
    }
    .modal-recruit .scroll-box {
        width: 100%;
        padding-left: 20px;
        height: calc(100vh - 200px);
        box-sizing: border-box;
    }
    .modal-recruit .contents-box {
        width: 100%;
    }
    .modal-recruit .modal-box {
        padding: 0 20px 32px;
    }
    .recruit-bg::before,
    .modal-recruit .modal-box::before,
    .modal-recruit h2 br,
    .modal-recruit .contents-box .txt br,
    .modal-recruit .scroll-box p br{
        display: none;
    }
    .modal-recruit h2 {
        font-size: 24px;
        line-height: 40px;
    }
}

/*======================================================================
  Footer
======================================================================*/

/*join our team*/
.join-box {
    position: relative;
    background-color: #FCFCFD;
    margin-bottom: -5px;
}
.join-box .header-title {
    position: absolute;
    width: 100%;
    z-index: 2;
}
.join-box .header-title p {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
}
.join-box .header-title h2 {
    color: #222222;
    font-weight: 900;
    font-size: 160px;
    margin: 0;
}
.join-box .btn-red {
    padding: 152px 0 96px;
}
.join-box .animesyonn-img {
    position: relative;
    z-index: 1;
    padding-top: 200px;
}

@media screen and (max-width: 1180px) {
    .join-box .header-title p {
        font-size: 22px;
    }
    .join-box .header-title h2 {
        font-size: 60px;
        margin-top: 24px;
    }
    .join-box .btn-red {
        padding: 180px 20px 96px;
    }
}
@media screen and (max-width: 420px) {
    .join-box .btn-red {
        padding: 240px 20px 96px;
    }
}
@media screen and (max-width: 400px) {
    .join-box .header-title h2 {
        font-size: 50px;
    }
    .join-box .header-title {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .join-box .header-title p {
        font-size: 18px;
    }
    .join-box .btn-red {
        padding: 240px 0 96px;
    }
}
@media screen and (max-width: 360px){
    .join-box .header-title h2 {
        font-size: 43px;
    }
}


/*footer*/
footer {
    line-height: 1;
    position: relative;
    z-index: 10;
    background: linear-gradient(to left, #444, #222);
}
footer,
footer .inner {
    display: flex;
}
.footer-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 96px 0 110px;
}
.footer-box .logo {
    transition: 1s all;
}
.footer-box .logo img {
    width: 154px;
    height: 119px;
}
.footer-box .logo:hover {
    opacity: 0.5;
}
.footer-box .logo span,
.footer-box small {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}
.footer-box .logo span {
    display: block;
    letter-spacing: 1px;
    color: #fff;
    font-size: 15px;
    text-align: center;
}
.footer-box small {
    display: flex;
    align-items: flex-end;
    width: max-content;
    color: rgba(255,255,255,.6);
    font-size: 12px;
}

/*fnav*/
.fnav-box {
    padding: 96px 10% 110px 10%;
    margin-left: 10%;
    border-left: 1px solid rgba(112,112,112,.5);
}

/*トップに戻るボタン*/
.top-back {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100%;
    background: #fff;
}
.top-back span {
    position: absolute;
    content: '';
    right: 40px;
    bottom: 56px;
    padding-top: 32px;
    color: #0E25D9;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 15px;
    word-break: keep-all;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background: url('../img/icon_topback.png')no-repeat top center;
    transition: .6s all;
    transform: translateY(0);
}
.top-back a:hover span {
    transform: translateY(-24px);
}
@media screen and (max-width: 1340px) {
    footer .inner {
        padding: 0 56px;
    }
    .footer-box {
        padding: 56px 0;
    }
    .fnav-box {
        padding: 56px 40px;
        margin-left: 40px;
    }
}
@media screen and (max-width: 1180px) {
    footer {
        margin-top: 0;
        height: 536px;
    }
    .top-back {
        display: none;
    }
    .footer-box {
        position: relative;
        padding: 96px 0;
    }
    .footer-box small {
        position: absolute;
        bottom: 96px;
    }
    .footer-box,
    .footer-box small {
        display: block;
        width: 100%;
        text-align: center;
    }
}
@media screen and (max-width: 960px) {
    .join-box .animesyonn-img ul {
        display: flex;
        flex-wrap: wrap;
    }
    .join-box .animesyonn-img ul li {
        width: 50%;
        height: 240px;
        margin: 0;
    }
    .join-box .animesyonn-img ul li img {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 420px) {
    .join-box .animesyonn-img ul {
        overflow: hidden;
    }
    .join-box .animesyonn-img {
        padding-bottom: 176px;
    }
    .join-box .animesyonn-img ul li {
        height: 120px;
    }
    
}

/*======================================================================
  TOP
======================================================================*/

/*メインビジュアル*/
.mv {
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
}
.scrolldown {
    position: absolute;
    content: '';
    left: 32px;
    bottom: 0;
    width: 24px;
    height: 208px;
    z-index: 4;
    word-break: keep-all;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.scrolldown span {
    position: absolute;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
.scrolldown::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 80px;
    left: 12px;
    bottom: 0;
    background: rgba(255,255,255,.6);
}
.scrolldown::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 80px;
    left: 12px;
    bottom: 0;
    background: #fff;
    animation: pathmove 1.5s ease-in-out infinite;
}
@keyframes pathmove {
    100%{
        height: 30px;
        bottom: 0;
        opacity: 0;
    }
    30%{
        height: 30px;
        opacity: 1;
    }
    0%{
        height: 30px;
        bottom: 50px;
    }
}

.mv .movie-box {
    position: fixed;
    z-index: -1;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
.mv .movie-box .movie {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
}
.mv .inner {
    position: relative;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
}
.mv_txt {
    position: absolute;
    left: 0;
    bottom: 80px;
    z-index: 2;
}
.animation {
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
} 
@keyframes slideIn {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
 
.mv_txt img {
    width: auto;
    height: auto;
}
.mv_txt img:nth-child(1) {
    margin-right: 14px;
}
.mv_txt img:nth-child(2) {
    margin: 24px 16px 0 0;
}
.mv_txt img:nth-child(3) {
    margin: 0 12px -1px 0;
}
.mv_txt img:nth-child(4) {
    margin: 4px 8px 0 0;
}
.mv_txt img:nth-child(5) {
    margin: 4px 8px 0 0;
}
.mv_txt img:nth-child(6) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(7) {
    margin: 0 -6px 0 0;
}
.mv_txt img:nth-child(8) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(9) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(10) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(11) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(12) {
    margin: 24px 8px 0 0;
}
.mv_txt img:nth-child(13) {
    margin: 24px 16px 0 0;
}
.mv_txt img:nth-child(14) {
    margin: 40px 8px 0 0;
}
.mv_txt img:nth-child(15) {
    margin: 40px 16px 0 0;
}
.mv_txt img:nth-child(16) {
    margin: 32px 8px 0 0;
}
.mv_txt img:nth-child(17) {
    margin: 32px 8px 0 0;
}
.mv_txt img:nth-child(18) {
    margin: 40px 8px 0 0;
}
.mv_txt img:nth-child(19) {
    margin: 80px 8px 0 0;
}

.top-txt  {
    margin-bottom: 116px;
}
.top-txt p {
    color: #fff;
    font-family: YuGothic, "游ゴシック体", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 60px;
}
.pc-btn-box .btn-red-header {
    position: fixed;
    right: 0;
    bottom: 32px;
    z-index: 10;
}
.btn-red-header a {
    position: relative;
    letter-spacing: 1px;
    color: #fff;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: #C42D00;
    transition: 1s all;
}
.pc-btn-box .btn-red-header a {
    position: absolute;
    content: '';
    display: flex;
    align-items: center;
    right: 0;
    bottom: 32px;
    width: 60px;
    height: 256px;
    padding-top: 32px;
    border-radius: 2px 0 0 2px; 
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    box-sizing: border-box;
}
.pc-btn-box .btn-red-header a::before {
    position: absolute;
    content: '';
    width: 13px;
    height: 13px;
    bottom: 32px;
    background: url('../img/icon_recruit.svg')no-repeat;
    background-size: cover;
}
.btn-red-header a:hover {
    background: #0F0F93;
    transition: 1s all;
}
.sp-btn-box,
.sp-br {
    display: none;
}

@media screen and (max-width: 1180px) {
    .mv_txt {
        left: 20px;
    }
    .mv::before,
    .scrolldown {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .sp-br {
        display: block;
    }
    .mv_txt {
        left: 20px;
        right: 20px;
    }
    .mv_txt img:nth-child(1) {
        width: 43px;
        margin-right: 0;
    }
    .mv_txt img:nth-child(2) {
        width: 34px;
        margin: 12px 4px 0 0;
    }
    .mv_txt img:nth-child(3) {
        width: 27px;
        margin: 0 8px -1px 0;
    }
    .mv_txt img:nth-child(4) {
        width: 43px;
        margin: 4px 4px 0 0;
    }
    .mv_txt img:nth-child(5) {
        width: 43px;
        margin: 4px 0 0 0;
    }
    .mv_txt img:nth-child(6) {
        width: 32px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(7) {
        width: 44px;
        margin: 0 -8px 0 0;
    }
    .mv_txt img:nth-child(8) {
        width: 37px;
        margin: 20px 0 0 0;
    }
    .mv_txt img:nth-child(10) {
        width: 47px;
        margin: 16px 4px 0 2px;
    }
    .mv_txt img:nth-child(11) {
        width: 38px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(12) {
        width: 40px;
        margin: 18px 0 0 0;
    }
    .mv_txt img:nth-child(14) {
        width: 39px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(15) {
        width: 43px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(16) {
        width: 36px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(17) {
        width: 38px;
        margin: 8px 0 0 0;
    }
    .mv_txt img:nth-child(18) {
        width: 43px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(19) {
        width: 15px;
        margin: 40px 0 0 0;
    }
    .top-txt p {
        line-height: 36px;
        margin-bottom: 24px;
    }
    .top-txt p:last-child {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 460px) {
    .pc-btn-box {
        display: none;
    }
    .sp-btn-box {
        position: fixed;
        width: 100%;
        bottom: 0;
        display: flex;
        z-index: 5;
    }
    .sp-btn-box div {
        width: 50%;
    }
    .sp-btn-box div a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 60px;
        color: #fff;
        box-sizing: border-box;
    }
    .sp-btn-box div.btn-red-header a::before {
        position: absolute;
        content: '';
        width: 13px;
        height: 13px;
        right: 16px;
        bottom: 38%;
        background: url('../img/icon_recruit.svg')no-repeat;
        background-size: cover;
    }
    .sp-btn-box div.btn-entry-header a {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 16px;
        background: linear-gradient(to right, #00C8F8, #00004B);
        background-size: 120% 50%;
        transition: 1s all;
    }
}
@media screen and (max-width: 393px) {
    .mv_txt img:nth-child(1) {
        width: 38px;
        margin-right: 0;
    }
    .mv_txt img:nth-child(2) {
        width: 30px;
        margin: 12px 4px 0 0;
    }
    .mv_txt img:nth-child(3) {
        width: 24px;
        margin: 0 8px -1px 0;
    }
    .mv_txt img:nth-child(4) {
        width: 38px;
        margin: 4px 4px 0 0;
    }
    .mv_txt img:nth-child(5) {
        width: 38px;
        margin: 4px 0 0 0;
    }
    .mv_txt img:nth-child(6) {
        width: 28px;
        margin: 16px 0 0 0;
    }
    .mv_txt img:nth-child(7) {
        width: 40px;
        margin: 0 -8px 0 0;
    }
    .mv_txt img:nth-child(8) {
        width: 30px;
        margin: 20px 0 0 0;
    }
    .mv_txt img:nth-child(10) {
        width: 40px;
        margin: 16px 4px 0 2px;
    }
    .mv_txt img:nth-child(11) {
        width: 32px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(12) {
        width: 34px;
        margin: 18px 0 0 0;
    }
    .mv_txt img:nth-child(14) {
        width: 36px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(15) {
        width: 36px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(16) {
        width: 30px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(17) {
        width: 34px;
        margin: 8px 0 0 0;
    }
    .mv_txt img:nth-child(18) {
        width: 38px;
        margin: 16px 4px 0 0;
    }
    .mv_txt img:nth-child(19) {
        width: 14px;
        margin: 40px 0 0 0;
    }
    
}

/*グラデーション背景*/
.bg-top-gradation {
    position: relative;
    content: '';
    z-index: 1;
    padding-bottom: 150px;
}
.bg-top-gradation::after {
    content:"";
    position: absolute;
    width: 100%;
    height: calc(100% + 470px);
    top: -330px;
    left: 0;
    background: linear-gradient(to top, rgba(0,200,248,0.4), rgba(0,0,75,0.4));
    z-index: -2;
    filter: brightness(82%);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);/*ぼかし*/
    clip-path: polygon(0 0, 100% 32%, 100% 73%, 0% 100%);
}
.bg-top-gradation::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -120px;
    left: 0;
    background: linear-gradient(-140deg, rgba(0,200,248,0.8), rgba(0,0,75,0.8));
    z-index: -1;
    filter: brightness(90%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);/*ぼかし*/
    clip-path: polygon(100% 0, 100% 82%, 50% 100%, 0 82%, 0 15%);
}
.bg-top-img {
    position: relative;
    content: '';
    z-index: 1;   
}
.bg-top-img::before {
    content:"";
    position: absolute;
    width: 100%;
    height: calc(100% + 186px);
    top: -160px;
    left: 0;
    background: url(../img/bg_img_top.png)no-repeat;
    background-size: cover;
    z-index: -1;
    clip-path: polygon(100% 0, 100% 83%, 50% 100%, 0 82%, 0 15%);
}

@media screen and (max-width: 1110px) {
    .bg-top-gradation::after {
        height: calc(100% + 512px);
    }
}
@media screen and (max-width: 960px) {
    .bg-top-gradation::after {
        height: calc(100% + 232px);
        top: -311px;
        clip-path: polygon(0 0, 100% 12%, 100% 92.9%, 0% 100%);
    }
    .bg-top-gradation::before {
        top: -150px;
        clip-path: polygon(100% 0, 100% 96%, 50% 100%, 0 96%, 0 8%);
    }
}
@media screen and (max-width: 768px) {
    .bg-top-gradation::after {
        height: calc(100% + 236px);
    }
}
@media screen and (max-width: 675px) {
    .bg-top-gradation::after {
        height: calc(100% + 227px);
        top: -300px;
        clip-path: polygon(0 0, 100% 12%, 100% 92.9%, 0% 100%);
    }
}
@media screen and (max-width: 640px) {
    .bg-top-gradation::after {
        height: calc(100% + 224px);
    }
}
@media screen and (max-width: 560px) {
    .bg-top-gradation::after {
        height: calc(100% + 225px);
    }
}
@media screen and (max-width: 460px) {
    .bg-top-gradation::after {
        height: calc(100% + 227px);
    }
}
@media screen and (max-width: 380px) {
    .bg-top-gradation::after {
        height: calc(100% + 229px);
    }
}


/*文字アニメーション*/
.txt-animesyonn {
    position: relative;
    z-index: 1;
}
.txt-animesyonn div {
    position: absolute;
    top: -100vh;
    right: 0;
    width: 216px;
    height: 400vh!important;
    overflow: hidden;
}
.txt-animesyonn p.scroll3 {
    display: none;
}
.txt-animesyonn p span {
    margin-right: -24px;
    margin-left: auto;
    font-family: 'Lato';
    font-weight: 500;
    font-size: 180px;
    color: #004EFF;
    word-break: keep-all;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transform:rotate(180deg);
    opacity: 0.3;
    filter: brightness(240%);
}

@media screen and (max-width: 1180px) {
    .txt-animesyonn p span {
        font-size: 100px;
    }
}


/*トップ採用コンテンツ*/
.top-box {
    display: flex;
    margin-top: 90px;
}
.top-box .header-title {
    width: 432px;
    padding-right: 168px;
    box-sizing: border-box;
    text-align: left;
}
.top-box .header-title span {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    height: 30px;
    padding-right: 15px; 
    color: #fff;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: #021087;
    box-sizing: border-box;
}
.top-box .header-title span::after {
    position: absolute;
    content: '';
    width: 800px;
    height: 30px;
    background: #021087;
    top: 0;
    left: -800px;
}
.top-box .header-title h2 {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 400px;
    font-size: 60px;
    margin-top: 12px;
}
.top-box .contents-txt {
    width: calc(100% - 404px);
}
.top-box-process .contents-txt {
    min-width: 696px;
    margin: 0 auto;
}
.top-box .contents-txt ul li span,
.top-box .contents-txt ul li h3,
.top-box .contents-txt ul li p,
.top-box .contents-txt ul li a {
    color: #fff;
}
.top-box .contents-txt ul li a {
    transition: 1s all;
}
.top-box .contents-txt ul li h3 {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
}

@media screen and (max-width: 1110px) {
    .top-box {
        display: block;
    }
    .top-box .header-title {
        padding: 0 0 16px 0;
        text-align: left;
    }
    .top-box .header-title h2 {
        text-align: left;
    }
    .top-box .header-title span::after {
        width: 20px;
        left: -20px;
    }
    .top-box-want .contents-txt {
        width: 100%;
    }
}


/*私たちが求める人材*/
.top-box .contents-txt ul.want li {
    display: flex;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,.2);
}
.top-box .contents-txt ul.want li:last-child {
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.top-box .contents-txt ul.want li span {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    margin: -8px 40px 0 0;
}
.top-box .contents-txt ul.want li h3 {
    font-size: 20px;
    margin-bottom: 8px;
}
.top-box .contents-txt ul.want li p {
    word-break: keep-all;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 12px;
}

@media screen and (max-width: 1180px) {
    .top-box .contents-txt ul.want li {
        padding: 32px 24px;
    }
    .top-box .contents-txt ul.want li span {
        margin-right: 20px;
    }
    .top-box .contents-txt ul.want li h3 {
        line-height: 28px;
    }
}


/*採用選考フロー*/
.top-box .contents-txt ul.process {
    display: flex;
    justify-content: space-between;
}
.top-box .contents-txt ul.process li {
    position: relative;
}
.top-box .contents-txt ul.process li div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 120px;
    margin: 0 16px;
}
.top-box .contents-txt ul.process li div::before {
    position: absolute;
    content: '';
    width: 56px;
    top: 50%;
    right: -58px;
    border: 1px dotted rgba(255,255,255,.4);
}
.top-box .contents-txt ul.process li div::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 15px;
    right: 148px;
    background: url('../img/icon_process.png')no-repeat;
}
.top-box .contents-txt ul.process li:first-child div::after,
.top-box .contents-txt ul.process li:last-child div::before {
    display: none;
}
.top-box .contents-txt ul.process li span {
    position: absolute;
    content: '';
    top: -16px;
    left: -24px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 50px;
}
.top-box .contents-txt ul.process li h3 {
    font-size: 15px;
    line-height: 20px;
    text-align: center;
}
.top-box .contents-txt ul.process li p {
    position: absolute;
    content: '';
    width: 152px;
    bottom: -56px;
    font-size: 13px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    text-align: center;
}
.top-box .contents-txt ul.process li p a {
    text-decoration: underline;
}
.top-box .contents-txt ul.process li p a:hover {
    opacity: 0.5;
}

@media screen and (max-width: 768px) {
    .top-box .contents-txt ul.process {
        display: flex;
        flex-wrap: wrap;
    }
    .top-box .contents-txt ul.process li {
        width: 200px;
        margin-top: 32px;
    }
    .top-box .contents-txt ul.process li p {
        display: none;
    }
    .top-box .contents-txt ul.process li span {
        top: -8px;
        left: -16px;
        font-size: 40px;
    }
    .top-box-process .contents-txt {
        width: 400px;
        min-width: 400px;
        padding: 0 20px;
    }
    .top-box .contents-txt ul.process li div {
        margin: 0;
    }
    .top-box .contents-txt ul.process li div::before {
        width: 78px;
        right: -80px;
    }
    .top-box .contents-txt ul.process li div::after {
        right: 156px;
    }
    .top-box .contents-txt ul.process li:nth-child(3)::after {
        position: absolute;
        content: '';
        width: 56px;
        top: 50%;
        left: -58px;
        border: 1px dotted rgba(255,255,255,.4);
    }
}
@media screen and (max-width: 480px) {
    .top-box .header-title {
        width: 100%;
    }
    .top-box-process .contents-txt {
        width: 320px;
        min-width: 320px;
        box-sizing: border-box;
    }
    .top-box .contents-txt ul.process li {
        width: 118px;
        margin-top: 32px;
    }
    .top-box .contents-txt ul.process li div {
        width: 100px;
        height: 100px;
    }
    .top-box .contents-txt ul.process li div::before {
        position: absolute;
        content: '';
        width: 56px;
        top: 50%;
        right: -60px;
        border: 1px dotted rgba(255,255,255,.4);
    }
    .top-box .contents-txt ul.process li div::after {
        position: absolute;
        content: '';
        width: 8px;
        height: 15px;
        right: 125px;
        background: url('../img/icon_process.png')no-repeat;
    }
    .top-box .contents-txt ul.process li span {
        font-size: 32px;
    }
}
@media screen and (max-width: 380px) {
    .top-box-process .contents-txt {
        width: 280px;
        min-width: 280px;
    }
    .top-box .contents-txt ul.process li div::before {
        width: 18px;
        top: 50%;
        right: -22px;
    }
    .top-box .contents-txt ul.process li div::after {
        right: 105px;
    }
}


/*白背景*/
.bg-top-white {
    position: relative;
    content: '';
    z-index: 3;
}
.bg-top-white::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: -384px;
    left: 0;
    background: #FCFCFD;
    z-index: 1;
    clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 100%);
}
.bg-top-white > div {
    position: relative;
    z-index: 4;
}

@media screen and (max-width: 1400px) {
    .bg-top-white::before {
        top: -385px;
        clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
    }  
}
@media screen and (max-width: 1200px) {
    .bg-top-white::before {
        top: -434px;
        clip-path: polygon(0 17%, 100% 0, 100% 100%, 0% 100%);
    }  
}
@media screen and (max-width: 960px) {
    .bg-top-white::before {
        top: -225px;
        clip-path: polygon(0 4%, 100% 0, 100% 100%, 0% 100%);
    }
}
@media screen and (max-width: 500px) {
    .bg-top-white::before {
        top: -248px;
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
    }
}


/*クロストーク*/
.cross-box {
    display: flex;
    justify-content: space-between;
    padding-top: 140px;
}
.cross-box .contents-txt {
    margin: 56px 0 40px;
}
.cross-box .contents-txt li {
    border-top: #D1D1D1 1px solid;
}
.cross-box .contents-txt li:last-child {
    border-bottom: #D1D1D1 1px solid;
}
.cross-box .contents-txt li a {
    position: relative;
    display: block;
    padding: 40px 90px 40px 0;
    transition: .6s all;
    overflow: hidden;
    z-index: 1;
}
.cross-box .contents-txt li a::before {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    top: 29%;
    right: 0;
    background: url('../img/icon_btn_cross.svg')no-repeat center right;
    z-index: 1;
}
.cross-box .contents-txt li a::after {
    position: absolute;
    content: '';
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    transition: .6s all;
    z-index: -1;
}
.cross-box .contents-txt li a:hover::after {
    width: 100%;
    height: 100%;
    transition: .6s all;
    background: #0F0F93;
}
.cross-box .contents-txt li a span {
    position: absolute;
    content: '';
    top: 16px;
    left: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
}
.cross-box .contents-txt li a div {
    padding-left: 40px;
}
.cross-box .contents-txt li a div h3 {
    margin-bottom: 8px;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
.cross-box .contents-txt li a div p {
    color: #1F1FBA;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 12px;
}
.cross-box .contents-txt li a:hover span,
.cross-box .contents-txt li a:hover div h3,
.cross-box .contents-txt li a:hover div p {
    color: #fff;
    transition: .6s all;
}
.cross-box .list-box {
    padding: 0 64px;
}

/*画像切り替わり*/
.cross-box .img-box01 {
    margin-top: 112px;
}
.cross-box .img-box {
    cursor: pointer;
    position: relative;
    width: 380px;
    height: 450px;
    overflow: hidden;
}
.cross-box .img-box img {
    position: absolute;
    width: auto;
    height: 120%;
    left: 0;
    bottom: 0;
}
.cross-box .img-box02 img {
    left: auto;
    right: 0;
}
.off {
    opacity: 0;
    transition: opacity .7s;
}
.on {
    opacity: 1;
    transition: opacity .7s;
}
.cross-box .img-sp {
    display: none;
}

@media screen and (max-width: 1400px) {
    .cross-box {
        position: relative;
        padding-top: 0;
    }
    .cross-box .header-title {
        padding-bottom: 500px;
    }
    .cross-box .img-box {
        position: absolute;
        content: '';
        width: 50%;
        height: 400px;
        top: 212px;
        overflow: hidden;
    }
    .cross-box .img-box01 {
        margin-top: 24px;
    }
    .cross-box .img-box01 {
        right: 0;
    }
    .cross-box .img-box02 {
        left: 0;
    }
    .cross-box .img-box img {
        width: 100%;
        height: auto;
    }
    .cross-box .list-box {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .cross-box .contents-txt {
        width: 480px;
        margin: 0 auto 40px;
    }
    .btn-white {
        width: 100%;
    }
    .cross-box .img-sp {
        display: block;
    }
    .cross-box .img-pc {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .cross-box .header-title {
        padding-bottom: 412px;
    }
    .cross-box .img-box {
        height: 312px;
    }
}
@media screen and (max-width: 640px) {
    .cross-box .header-title {
        padding-bottom: 260px;
    }
    .cross-box .img-box {
        height: 152px;
    }
    .cross-box .contents-txt {
        width: 100%;
        margin: 0 auto 40px;
    }
}
@media screen and (max-width: 400px) {
    .cross-box .contents-txt li a div h3 {
        font-size: 16px;
    }
    .cross-box .contents-txt li a div p {
        font-size: 12px;
    }
}


/*働く環境・制度*/
.environment-box {
    position: relative;
    margin-top: 168px;
    padding: 160px 0 135px;
    text-align: center;
    background: #FCFCFD url('../img/bg_environment.png')no-repeat center;
}
.environment-box::after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -400px;
    width: 100%;
    height: 400px;
    background: #FCFCFD;
}
.environment-txt-animation {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.environment-txt-animation .scroll_item {
    margin-right: 24px;
}
.environment-box .header-title {
    display: inline-block;
    padding: 64px;
    border-top: #1F1FBA 1px solid;
    background: #fff;
}
.environment-box .header-title .btn-white {
    margin-top: 24px;
}
.environment .animesyonn-img ul {
    display: flex;
}

@media screen and (max-width: 960px) {
    .environment-box {
        width: 100%;
        margin-top: 112px;
        padding: 293px 20px;
        box-sizing: border-box;
        background: #FCFCFD url(../img/bg_environment_sp.png)no-repeat top center;
    }
}
@media screen and (max-width: 640px) {
    .environment-txt-animation img {
        width: auto;
        height: 80px;
    }
    .environment-box .header-title {
        width: 100%;
        padding: 56px 24px;
        box-sizing: border-box;
    }
    .environment-box .header-title p {
        text-align: left;
    }
    .environment-box .header-title p br {
        display: none;
    }
}
@media screen and (max-width: 420px) {
    .environment .animesyonn-img ul li {
        height: 248px;
    }
    .environment .animesyonn-img ul li img {
        width: auto;
        height: 248px;
    }
}


/*ISBをもっとよく知る*/
.isb-more {
    position: relative;
    margin: 180px 0 311px;
    z-index: 5;
    background: #FCFCFD;
}
.isb-more::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 344px;
    left: 0;
    bottom: -135px;
    background: #CFD5DE;
    z-index: -3;
}
.isb-more .inner {
    position: relative;
    display: flex;   
}
.isb-more .inner::after {
    position: absolute;
    content: '';
    width: 1200px;
    height: 344px;
    left: -1200px;
    bottom: -135px;
    background: #FCFCFD;
    z-index: -2;
}
.isb-more .header-title {
    position: relative;
    width: 285px;
    padding: 88px 0 104px;
}
.isb-more .header-title::after {
    position: absolute;
    content: '';
    width: 800px;
    height: 302px;
    top: 0;
    left: -515px;
    background: linear-gradient(240deg, #00C8F8, #00004B);
    z-index: -1;
}
.page-bg .isb-more .header-title span,
.isb-more .header-title span,
.isb-more .header-title h2 {
    display: block;
    color: #fff;
    text-align: left;
}
.isb-more .header-title span {
    padding-top: 32px;
    border-top: #fff 1px solid;
}
.isb-more .header-title h2 {
    font-size: 40px;
}
.isb-more .contents-txt {
    position: relative;
    width: calc(100% - 285px);
    margin-top: 88px;
    z-index: 2;
}
.isb-more .contents-txt ul {
    display: flex;
    flex-wrap: wrap;
}
.isb-more .contents-txt ul li {
    width: calc(100% / 2);
    height: 404px;
}
.isb-more .contents-txt ul li a {
    position: relative;
    display: block;
    width: 100%;
    height: 404px;
    overflow: hidden;
}
.isb-more .contents-txt ul li a img.bg {
    position: absolute;
    width: 100%;
    height: auto;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    margin: auto;
    transition: .6s all;
}
.isb-more .contents-txt ul li a:hover img.bg {
    width: 160%;
    height: auto;
    transition: .6s all;
}
.isb-more .contents-txt ul li a > div.box {
    position: absolute;
    content: '';
    width: 100%;
    height: inherit;
    background: linear-gradient(-140deg, rgba(9, 9, 12,.7), rgba(9, 9, 12,.7));
}
.isb-more .contents-txt ul li a > div.box::before {
    position: absolute;
    content: '';
    width: 38px;
    height: 38px;
    right: 16px;
    bottom: 16px;
    background: url(../img/isb_more_btn.svg)no-repeat center;
    z-index: 2;
}
.isb-more .contents-txt ul li a > div.box::after  {
    position: absolute;
    content: '';
    width: 0;
    height: inherit;
    top: 0;
    left: 0;
    background: linear-gradient(-140deg, rgba(0,200,248,.7), rgba(0,0,75,.7));
    transition: .6s all;
    z-index: 1;
    opacity: 0;
}
.isb-more .contents-txt ul li a:hover > div.box::after {
    width: 100%;
    height: inherit;
    background: linear-gradient(-140deg, rgba(0,200,248,.7), rgba(0,0,75,.7));
    transition: .6s all;
    z-index: 1;
    opacity: 1;
}
.isb-more .contents-txt ul li a img.icon,
.isb-more .contents-txt ul li a h3,
.isb-more .contents-txt ul li a span,
.isb-more .contents-txt ul li a p {
    position: relative;
    padding: 0 40px;
    color: #fff;
    z-index: 2;
}
.isb-more .contents-txt ul li a img.icon {
    padding-top: 64px;
}
.isb-more .contents-txt ul li a h3,
.isb-more .contents-txt ul li a p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.isb-more .contents-txt ul li a h3 {
    font-weight: 700;
    font-size: 22px;
    padding-top: 48px;
}
.isb-more .contents-txt ul li a span {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin: 8px 0 24px;
}
.isb-more .contents-txt ul li a p {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

@media screen and (max-width: 1180px) {
    .isb-more {
        margin: 112px 0 80px;
        padding-bottom: 440px;
    }
    .isb-more::after {
        top: 180px;
        height: 484px;
        left: -20px;
    }
    .isb-more .inner {
        display: block;
    }
    .isb-more .header-title {
        padding: 40px 0 56px 20px;
    }
    .isb-more .header-title::after {
        width: 302px;
        height: 160px;
        left: -20px;
    }
    .isb-more .header-title h2 {
        font-size: 38px;
    }
    .isb-more .header-title span {
        border: 0;
        padding: 0;
    }
    .isb-more .contents-txt {
        position: absolute;
        width: calc(100% - 20px);
        top: 160px;
        right: 0;
        margin: 0;
    }
    .isb-more .contents-txt ul li a {
        box-sizing: border-box;
    }
    .isb-more .contents-txt ul li a img.bg {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 860px) {
    .isb-more {
        padding-bottom: 440px;
    }
    .isb-more .contents-txt ul {
        display: block;
    }
    .isb-more .contents-txt ul li,
    .isb-more .contents-txt ul li a {
        width: 100%;
        height: 212px;
    }
    .isb-more .contents-txt ul li a > div.box > div {
        display: flex;
        padding-top: 48px;
    }
    .isb-more .contents-txt ul li a h3,
    .isb-more .contents-txt ul li a span,
    .isb-more .contents-txt ul li a p {
        width: 100%;
    }
    .isb-more .contents-txt ul li a img.icon,
    .isb-more .contents-txt ul li a h3,
    .isb-more .contents-txt ul li a span,
    .isb-more .contents-txt ul li a p {
        padding: 0 24px;
        box-sizing: border-box;
    }
    .isb-more .contents-txt ul li a img.icon {
        width: 76px;
        height: auto;
        padding-right: 0;
    }
    .isb-more .contents-txt ul li a h3 {
        font-size: 20px;
    }
}
@media screen and (max-width: 400px) {
    .isb-more {
        padding-bottom: 500px;
    }
    .isb-more::after {
        height: 572px;
    }
    .isb-more .contents-txt ul li,
    .isb-more .contents-txt ul li a {
        height: 256px;
    }
    .isb-more .contents-txt ul li a p br {
        display: none;
    }
}


/*======================================================================
  下層ページ共通
======================================================================*/

.contents h1,
.contents h2,
.contents span,
.contents .header-title p,
.contents .header-txt p {
    display: block;
    text-align: left;
}
.contents .header-title h1 {
    position: relative;
    padding-bottom: 40px;
    font-size: 55px;
    margin: 16px 0 40px;
}
.contents .header-title h1::after,
.contents .header-title h1::before {
    position: absolute;
    display: block;
    content: '';
    height: 1px;
    bottom: 0;
}
.contents .header-title h1::after {
    width: 100%;
    opacity: 0.5;
}
.contents .header-title h1::before {
    width: calc(100% / 4);
}
.contents .header-title p {
    font-size: 16px;
    line-height: 32px;
}

.page-bg {
    position: relative;
    overflow: hidden;
}
.page-bg::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../img/page-bg.png')no-repeat top -504px right -184px;
    opacity: 1;
}
.page-bg .header-title span {
    color: #0F0F93;
}
.page-bg  .header-title h1::after {
    background: rgba(112,112,112,.5);
}
.page-bg  .header-title h1::before {
    background: #0F0F93;
}
@media screen and (max-width: 1180px) {
    .contents .header-title p br {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .contents .header-title h1 {
        font-size: 50px;
        margin: 12px 0 40px;
    }
    .page-bg::before {
        background: url('../img/page-bg.png')no-repeat top -200px right -80px;
        background-size: 100%;
    }
}
@media screen and (max-width: 460px) {
    .contents .header-title h1 {
        font-size: 40px;
    }
    .page-bg::before {
        background: url('../img/page-bg.png')no-repeat top -80px right -40px;
        background-size: 100%;
    }
}

.title-txt {
    position: relative;
}
.title-txt::after {
    position: absolute;
    width: 100%;
    top: 56px;
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 216px;
    z-index: -1;
}

@media screen and (max-width: 1180px) {
    .title-txt::after {
        font-size: 150px;
    }
}
@media screen and (max-width: 960px) {
    .title-txt::after {
        top: 96px;
        font-size: 104px;
    }
}
@media screen and (max-width: 640px) {
    .title-txt::after {
        top: 112px;
        font-size: 78px;
    }
}
@media screen and (max-width: 460px) {
    .title-txt::after {
        top: 112px;
        font-size: 64px;
    }
}
@media screen and (max-width: 380px) {
    .title-txt::after {
        top: 112px;
        font-size: 54px;
    }
}

/*======================================================================
  クロストーク
======================================================================*/

/*クロストーク一覧*/
.cross-talk-bg {
    position: relative;
}
.cross-talk-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(-140deg, rgba(0,200,248,0.8), rgba(0,0,75,0.8));
    filter: brightness(90%);
    z-index: -2;
}
.cross-talk-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 186px);
    top: -160px;
    left: 0;
    background: url(../img/bg_img_top.png)no-repeat;
    background-size: cover;
    z-index: -1;
}
.cross-talk {
    position: relative;
    padding-bottom: 480px;
    overflow: hidden;
}
.cross-talk::before {
    position: absolute;
    content: '';
    width: 120%;
    height: 400px;
    left: -56px;
    bottom: -64px;
    background: linear-gradient(to bottom, rgba(252,252,253,0) 0%, rgba(252,252,253,1) 50%);
    filter: blur(24px);
}

.cross-talk h1,
.cross-talk h2,
.cross-talk span,
.cross-talk .header-title p {
    color: #fff;
}
.cross-talk .header-title h1::after,
.cross-talk .header-title h1::before {
    background: #fff;
}

.talk-box li a {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 435px;
}
.talk-box li.child02 a {
    justify-content: flex-end;
}
.talk-box li {
    margin-top: 112px;
}
.talk-box li a div.img {
    position: absolute;
    content: '';
    display: flex;
    top: 0;
    left: 64px;
    z-index: -1;
    transition: 1s all;
}
.talk-box li a:hover div.img {
    opacity: 0.5;
}
.talk-box li.child02 a div.img {
    left: auto;
    right: 64px;
}
.talk-box li a div.img::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 40px;
    background: url(../img/icon_btn_cross.svg)no-repeat right bottom;
    z-index: 1;
}
.talk-box li.child02 a div.img::after {
    bottom: 12px;
}
.talk-box li a div.img span {
    display: flex;
    justify-content: center;
    width: 200px;
    height: 360px;
    overflow: hidden;
    margin-top: 32px;
}
.talk-box li.child02 a div.img span,
.talk-box li a div.img span:nth-child(2n) {
    margin-top: 0;
}
.talk-box li.child02 a div.img span:nth-child(2n) {
    margin-top: 32px;
}
.talk-box li a div.img span img {
    width: auto;
    height: 100%;
}
.talk-box li a div.txt h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 100px;
    mix-blend-mode:	exclusion;
}
.talk-box li a div.txt h2 span.sp-right {
    display: inline-block;
}
.talk-box li a div.txt p,
.talk-box li a div.txt > span {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
}
.talk-box li a div.txt p {
    color: #333;
    font-size: 30px;
    line-height: 50px;
    margin: 24px 0 16px;
}
.talk-box li a div.txt p mark {
    background: #fff;
}
.talk-box li a div.txt > span {
    position: relative;
    display: inline-block;
    font-size: 16px;
    padding: 0 16px;
}
.talk-box li a div.txt > span::after,
.talk-box li a div.txt > span::before {
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    font-size: 16px;
}
.talk-box li a div.txt > span::before {
    content: '[';
    left: 0;
}
.talk-box li a div.txt > span::after {
    content: ']';
    right: 0;
    text-align: right;
}
li.cross-animation {
    animation: slideIn 1s cubic-bezier(0.5, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(-64px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
li.cross-animation:nth-child(2n) {
    animation: slideIn2 1s cubic-bezier(0.5, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn2 {
  0% {
    transform: translateX(64px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

@media screen and (max-width: 960px) {
    .cross-talk {
        padding-bottom: 192px;
    }
    .cross-talk::before {
        height: 300px;
        left: -34px;
        bottom: -116px;
    }
    .talk-box li {
        margin-top: 96px;
    }
    .talk-box li.child02 a {
        justify-content: flex-start;
    }
    .talk-box li a div.img {
        flex-wrap: wrap;
    }
    .talk-box li a div.img::after {
        width: 0;
    }
    .talk-box li a div.img,
    .talk-box li.child02 a div.img {
        left: 0;
        right: auto;
    }
    .talk-box li a div.img span,
    .talk-box li.child02 a div.img span:nth-child(2n){
        width: calc(100% / 2);
        height: 160px;
        align-items: flex-start;
        margin-top: -32px;
    }
    .talk-box li a div.img span:nth-child(1),
    .talk-box li.child02 a div.img span:nth-child(2) {
        margin-top: 0;
    }
    .talk-box li a div.img span:nth-child(2),
    .talk-box li.child02 a div.img span:nth-child(1) {
        margin-top: 32px;
    }
    .talk-box li a div.img span img {
        width: 100%;
        height: auto;
    }
    .talk-box li a div.txt {
        margin: 0 auto;
        padding: 0 12px;
        text-align: center;
        box-sizing: border-box;
    }
    .talk-box li a div.txt h2 {
        font-size: 50px;
        margin-bottom: 112px;
    }
    .talk-box li a div.txt p {
        font-size: 21px;
        line-height: 35px;
    }
    .talk-box li a div.txt > span {
        font-size: 16px;
    }

}
@media screen and (max-width: 570px) {
    .talk-box li {
        margin-top: 56px;
    }
    .talk-box li a div.txt h2 span.sp-right {
        display: block;
        text-align: right;
    }
}
@media screen and (max-width: 420px) {
    .talk-box li a div.txt p br { 
        display: none;
    }
}


/*クロストーク下層*/
.cross-talk-single-bg {
    position: relative;
}
.cross-talk-single-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 480px;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(207,222,245,1), rgba(255,255,255,0));
    z-index: -2;
}
.cross-talk-single-bg::after {
    content: "CROSS TALK";
}
.cross-talk-single .header-title span {
    color: #0F0F93;
    font-size: 16px;
}
.cross-talk-single .header-title h1 {
    color: #333;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 64px;
}
.cross-talk-single .header-image .img {
    display: flex;
}
.cross-talk-single .header-image .img span {
    position: relative;
    width: calc(100% / 4);
    height: 424px;
    overflow: hidden;
}
.cross-talk-single .header-image .img span img {
    position: absolute;
    width: 100%;
    height: auto;
    margin: auto;
}
.cross-talk-single .header-title h1::before,
.cross-talk-single .header-title h1::after {
    display: none;
}
.cross-talk-single .header-txt p {
    padding: 64px 0;
    font-size: 18px;
    line-height: 38px;
}
@media screen and (max-width: 1240px) {
    .cross-talk-single .header-image .img span img {
        width: auto;
        height: 100%;
    }
}
@media screen and (max-width: 1180px) {
    .cross-talk-single .header-image .img {
        height: 300px;
        overflow: hidden;
    }
    .cross-talk-single .header-image .img span img {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 1080px) {
    .cross-talk-single .header-title h1 {
        padding-bottom: 24px;
        margin-bottom: 0;
    }
}
@media screen and (max-width: 960px) {
    .cross-talk-single .header-image .img span img {
        width: auto;
        height: 100%;
        left: calc(50% - 150px);
    }
    .cross-talk-single .header-txt p {
        padding: 40px 0;
    }
}
@media screen and (max-width: 640px) {
    .cross-talk-single .header-title h1 {
        line-height: 50px;
    }
    .cross-talk-single .header-title h1 br {
        display: none;
    }
}
@media screen and (max-width: 460px) {
    .cross-talk-single .header-title h1 {
        line-height: 37px;
        font-size: 24px;
        padding-bottom: 0;
        margin-bottom: 32px;
    }
    .cross-talk-single .header-image .img {
        height: 230px;
    }
    .cross-talk-single .header-image .img span img {
        width: auto;
        height: 56%;
        left: calc(80% - 103px);
    }
}

/*プロフィール*/
.cross-talk-single .profile-box {
    position: relative;
    border: #CDD5E2 1px solid;
    border-right: 0;
    background: #E5EBF5;
    box-sizing: border-box;
}
.cross-talk-single .profile-box::after {
    position: absolute;
    content: '';
    width: calc( (100% - 1100px) / 2 );
    height: 100%;
    top: -1px;
    left: 0;
    border: #FCFCFD 1px solid;
    border-right: #CDD5E2 1px solid;
    background: #FCFCFD;
}
.cross-talk-single .profile-box::before {
    position: absolute;
    content: 'PROFILE';
    width: 100%;
    left: 0;
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 195px;
}
.cross-talk-single .profile-box .inner {
    position: relative;
}
.cross-talk-single .profile-box .inner::after {
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    mix-blend-mode: multiply;
    text-align: center;
    color: #CFD5DE;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 100px;
}
.cross-talk-single01 .profile-box .inner::after {
    content: 'Mid career Professional';
}
.cross-talk-single02 .profile-box .inner::after {
    content: 'Professional Engineer';
}
.cross-talk-single .profile-box ul {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 136px 80px 64px;
}
.cross-talk-single .profile-box ul li {
    width: 200px;
}
.cross-talk-single .profile-box ul li span.img {
    position: relative;
    width: 164px;
    height: 180px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
}
.cross-talk-single .profile-box ul li span.img::after {
    position: absolute;
    content: '';
    width: 164px;
    height: 164px;
    bottom: 0;
    border-radius: 50%;
    background: #F4F7FA;
}
.cross-talk-single .profile-box ul li span.img img {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
.cross-talk-single .profile-box ul li span.name {
    position: relative;
    margin: -15px auto 0;
    z-index: 2;
}

span.name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 28px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    background: #fff;
    border: 1px solid;
}
.yellow {
    color: #8F7400;
    border-color: #8F7400;
}
.green {
    color: #106F3C;
    border-color: #106F3C;
}
.blue {
    color: #0F0F93;
    border-color: #0F0F93;
}
.red {
    color: #C71B1B;
    border-color: #C71B1B;
}

.cross-talk-single .profile-box ul li .career {
    margin-top: 12px;
    padding: 16px 8px;
    border-top: #CFD5DE 1px solid;
    border-bottom: #CFD5DE 1px solid;
}
.cross-talk-single .profile-box ul li .career p,
.cross-talk-single .profile-box ul li .career span {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 14px;
}
.cross-talk-single .profile-box ul li .career span {
    margin-top: 8px;
    color: #0F0F93;
}

@media screen and (max-width: 1080px) {
    .cross-talk-single .profile-box ul {
        flex-wrap: wrap;
        padding: 136px 72px 0 20px;
    }
}
@media screen and (max-width: 970px) {
    .cross-talk-single .profile-box {
        overflow: hidden;
    }
    .cross-talk-single .profile-box::before {
        font-size: 150px;
    }
    .cross-talk-single .profile-box .inner::after {
        font-size: 70px;
    }
    .cross-talk-single .profile-box ul {
        flex-wrap: wrap;
        padding: 136px 52px 48px 0;
    }
    .cross-talk-single .profile-box ul li {
        width: calc(100% / 2);
        padding: 0 20px;
        margin-bottom: 32px;
        box-sizing: border-box;
    }
    .cross-talk-single .profile-box ul li .career p,
    .cross-talk-single .profile-box ul li .career span {
        text-align: center;
    }
}
@media screen and (max-width: 600px) {
    .cross-talk-single .profile-box::before {
        font-size: 112px;
    }
    .cross-talk-single .profile-box .inner::after {
        font-size: 52px;
    }
    .cross-talk-single .profile-box ul li .career p,
    .cross-talk-single .profile-box ul li .career span {
        text-align: left;
    }
}
@media screen and (max-width: 460px) {
    .cross-talk-single .profile-box::before {
        font-size: 90px;
    }
    .cross-talk-single .profile-box .inner::after {
        font-size: 44px;
    }
    .cross-talk-single .profile-box ul {
        padding: 80px 0 48px 0;
    }
    .cross-talk-single .profile-box ul li {
        width: calc(100% / 2 - 8px);
        padding: 0 8px;
    }
    .cross-talk-single .profile-box ul li span.img {
        width: 124px;
        height: 144px;
    }
    .cross-talk-single .profile-box ul li span.img::after {
        width: 124px;
        height: 124px;
    }
}
@media screen and (max-width: 380px) {
    .cross-talk-single .profile-box::before {
        font-size: 72px;
    }
    .cross-talk-single .profile-box .inner::after {
        font-size: 32px;
    }
    .cross-talk-single .profile-box ul {
        padding-top: 56px;
    }
}

/*本文*/
.cross-talk-single .talk-box {
    position: relative;
    margin-top: 96px;
    overflow: hidden;
}
.cross-talk-single .talk-box02 {
    margin-top: 136px;
}
.cross-talk-single .talk-box03 {
    position: relative;
    border: #CDD5E2 1px solid;
    border-right: 0;
    background: #E5EBF5;
    box-sizing: border-box;
    overflow: inherit;
}
.cross-talk-single01 .talk-box03 {
    margin-bottom: 112px;
}
.cross-talk-single02 .talk-box03 {
    margin-bottom: 240px;
}
.cross-talk-single .talk-box03::after {
    position: absolute;
    content: '';
    width: calc( (100% - 1148px) / 2 );
    height: 100%;
    top: -1px;
    left: 0;
    border: #FCFCFD 1px solid;
    border-right: #CDD5E2 1px solid;
    background: #FCFCFD;
}
.cross-talk-single .talk-box03 .inner {
    padding: 112px 72px 112px 96px;
    box-sizing: border-box;
}
.cross-talk-single .talk-box04 {
    padding-top: 96px;
}

/*本文画像*/
.cross-talk-single .talk-box .images-box {
    position: absolute;
}
.cross-talk-single .talk-box01 .images-box,
.cross-talk-single .talk-box03 .images-box {
    width: 460px;
    height: 640px;
    left: -196px;
}
.cross-talk-single .talk-box01 .images-box,
.cross-talk-single .talk-box03 .images-box {
    overflow: hidden;
}
.cross-talk-single .talk-box01 .images-box img {
    position: absolute;
    width: auto;
    height: 100%;
    left: -60%;
}
.cross-talk-single .talk-box02 .images-box {
    position: absolute;
    content: '';
    width: 640px;
    height: 410px;
    right: -224px;
}
.cross-talk-single .talk-box03 .images-box {
    z-index: 2;
}
.cross-talk-single01 .talk-box03 .images-box {
    bottom: -180px;
    overflow: hidden;
}
.cross-talk-single02 .talk-box03 .images-box {
    bottom: -240px
}
.cross-talk-single .talk-box04 .images-box {
    position: relative;
    width: 100%;
    height: 480px;
    margin-top: 72px;
    overflow: hidden;
}
.cross-talk-single01 .talk-box03 .images-box img {
    position: absolute;
    width: auto;
    left: calc(50% - 504px);
}
.cross-talk-single .talk-box03 .images-box img {
    position: absolute;
    left: -70%;
    width: auto;
    height: 100%;
}
.cross-talk-single02 .talk-box03 .images-box img {
    position: absolute;
    right: 0;
}
.cross-talk-single .talk-box04 .images-box img {
    width: 100%;
    height: auto;
    position: absolute;	
    top: -30%;
}

/*本文テキストエリア*/
.cross-talk-single .talk-box01 .txt-box {
    width: 700px;
    margin: 0 72px 0 auto;
    padding-left: 64px;
}
.cross-talk-single .talk-box02 .txt-box {
    width: 620px;
    margin-right: auto;
    padding-right: 64px;
}
.cross-talk-single .talk-box03 .txt-box {
    width: 700px;
    margin-left: auto;
}
.cross-talk-single .talk-box .txt-box-wide {
    width: 100%;
    padding-left: 0;
    padding-bottom: 56px;
}
.cross-talk-single .talk-box02 .txt-box-wide {
    padding-top: 40px;
}
.cross-talk-single .talk-txt {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.cross-talk-single .talk-txt:last-child {
    margin-bottom: 0;
}

/*文字設定*/
.cross-talk-single .talk-title span,
.cross-talk-single .talk-title h2,
.cross-talk-single .talk-txt p,
.cross-talk-single .talk-txt p strong {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.cross-talk-single .talk-title span,
.cross-talk-single .talk-title h2,
.cross-talk-single .talk-txt p strong {
    font-weight: 700;
}
.cross-talk-single .talk-title {
    padding-bottom: 40px;
}
.cross-talk-single .talk-title h2 {
    position: relative;
    margin: 0 auto;
    padding: 24px 0 0 56px;
    font-size: 34px;
    line-height: 54px;
}
.cross-talk-single .talk-title-center h2 {
    padding-left: 0;
}
.cross-talk-single .talk-title h2::after {
    position: absolute;
    content: '”';
    top: -16px;
    left: -12px;
    color: #333;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 180px;
    opacity: 0.15;
    transform:rotate(180deg);
}
.cross-talk-single .talk-title-center h2::after {
    left: -64px;
}
.cross-talk-single .talk-title-center,
.cross-talk-single .talk-title-center .talk-theme {
    text-align: center;
}
.cross-talk-single .talk-title-center h2 {
    display: inline-block;
}
.cross-talk-single .talk-title .talk-theme span {
    position: relative;
    display: inline-block;
    padding-left: 164px;
    color: #0F0F93;
    font-size: 18px;
    background: #FCFCFD;
}
.cross-talk-single .talk-title .talk-theme span::before {
    position: absolute;
    content: '[　TALK THEME　]';
    display: flex;
    align-items: center;
    width: 140px;
    height: 26px;
    left: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.cross-talk-single .talk-txt p {
    width: calc(100% - 96px);
    line-height: 26px;
    font-weight: 400;
    font-size: 16px;
}
.cross-talk-single .talk-txt p small {
    display: block;
    line-height: 21px;
    margin-top: 16px;
    font-size: 13px;
}


.cross-talk-single .cross-talk-cat {
    position: relative;
    padding-top: 310px;
    margin-bottom: 224px;
}
.cross-talk-single .cross-talk-cat::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../img/cross-talk-cat-bg.png')no-repeat top -40px left;
}
.cross-talk-single .cross-talk-cat .inner {
    display: flex;
    justify-content: center;
}
.cross-talk-single .cross-talk-cat .talk-box,
.cross-talk-single .talk-box li {
    margin-top: 0;
}
.cross-talk-single .cross-talk-cat .environment-txt-animation {
    top: 200px;
}
.cross-talk-single .cross-talk-cat h2,
.cross-talk-single .cross-talk-cat span {
    color: #fff;
}
.cross-talk-single .cross-talk-cat .talk-box li {
    position: relative;
}
.cross-talk-single .cross-talk-cat .talk-box li::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 60%;
    left: 0;
    bottom: 0;
    background: #FCFCFD;
    z-index: -1;
}
.cross-talk-single .talk-box li.child01 a div.img::after {
    right: 48px;
    bottom: 48px;
}
.cross-talk-single .cross-talk-cat .talk-box li a div.txt > span {
    color: #0F0F93;
}
.cross-talk-single .talk-box .txt-box-pc {
    padding-bottom: 0;
}
.txt-box-sp {
    display: none;
}
@media screen and (max-width: 1180px) {
    .txt-box-pc {
        display: none;
    }
    .txt-box-sp {
        display: block;
    }
    .cross-talk-single .talk-box {
        margin-top: 64px;
    }
    .cross-talk-single .talk-box02,
    .cross-talk-single .talk-box03 {
        margin-top: 56px;
    }
    .cross-talk-single .talk-box04 {
        margin-top: 96px;
    }
    .cross-talk-single .talk-title h2 {
        line-height: 48px;
        font-size: 30px;
    }
    .cross-talk-single .talk-box .images-box img {
        position: absolute;
        width: 100%;
        height: auto;
    }
    .cross-talk-single .talk-box03 .images-box img {
        width: auto;
        height: 100%;
    }
    
    /*1つ目*/
    .cross-talk-single .talk-box01 .inner {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }
    .cross-talk-single .talk-box01 .images-box {
        position: relative;
        width: 40%;
        height: 640px;
        left: 0;
    }
    .cross-talk-single .talk-box01 .images-box img {
        width: auto;
        height: 100%;
        left: -70%;
    }
    .cross-talk-single .talk-box01 .txt-box {
        width: 60%;
        margin: 0 72px 0 0;
        padding-left: 40px;
        box-sizing: border-box;
    }
    
    /*2つ目*/
    .cross-talk-single .talk-box02 .inner {
        padding: 0 20px;
    }
    .cross-talk-single .talk-box02 .images-box {
        width: 40%;
        right: 0;
    }
    .cross-talk-single .talk-box02 .txt-box {
        width: 60%;
        padding-right: 40px;
        box-sizing: border-box;
    }
    
    /*3つ目*/
    .cross-talk-single .talk-box03 {
        margin: 96px 0 0;
    }
    .cross-talk-single .talk-box03 .inner {
        padding: 56px 72px 56px 40px;
    }
    .cross-talk-single .talk-box03 .images-box {
        width: 40%;
        top: -40px;
        left: 0;
    }
    .cross-talk-single .talk-box03 .txt-box {
        width: 60%;
        padding-left: 40px;
        box-sizing: border-box;
    }
    
    /*4つ目*/
    .cross-talk-single .talk-box04 {
        padding-top: 0;
    }
    .cross-talk-single .talk-box04 .inner {
        padding: 0 72px 0 20px;
    }
    .cross-talk-single .talk-box04 .images-box img {
        position: relative;
        top: -15%;
    }
}
@media screen and (max-width: 960px) {
    .cross-talk-single .talk-box04 .images-box {
        height: 320px;
    }
}
@media screen and (max-width: 800px) {
    .cross-talk-single .talk-title h2 {
        padding: 48px 0 0 0;
    }
    .cross-talk-single .talk-title h2::after {
        top: 0;
        left: -12px;
    }
    .cross-talk-single .talk-title .talk-theme span {
        margin-top: 32px;
    }
    .cross-talk-single .talk-box .inner {
        display: block;
        padding: 0;
    }
    span.name {
        width: 50px;
    }
    .cross-talk-single .talk-txt p {
        width: calc(100% - 70px);
    }
    .cross-talk-single .talk-box .images-box {
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .cross-talk-single .talk-box .images-box img {
        width: 100%;
        height: auto;
        left: 0;
    }
    .cross-talk-single .talk-box01 .txt-box,
    .cross-talk-single .talk-box02 .txt-box,
    .cross-talk-single .talk-box03 .txt-box,
    .cross-talk-single .talk-box04 .txt-box {
        width: 100%;
        margin: 0;
        padding: 0 72px 0 20px;
        box-sizing: border-box;
    }
    .cross-talk-single .talk-box03 {
        margin-top: 56px;
        background: #FCFCFD;
        border: 0;
    }
    .cross-talk-single .talk-box03 .images-box {
        top: 0;
    }
    .cross-talk-single .talk-title-center, 
    .cross-talk-single .talk-title-center .talk-theme {
        text-align: left;    
    }
    .cross-talk-single .talk-txt:last-child {
        margin-bottom: 40px;
    }
    .cross-talk-single .cross-talk-cat {
        padding-top: 264px;
        margin-bottom: 128px;
    }
    .cross-talk-single .cross-talk-cat .environment-txt-animation {
        top: 168px;
    }
}
@media screen and (max-width: 640px) {
    .cross-talk-single .talk-box .images-box {
        height: 240px;
    }
    .cross-talk-single .talk-box04 {
        padding-top: 240px;
    }
    .cross-talk-single .talk-box04 .images-box {
        position: absolute;
        top: 0;
        margin-top: 0;
    }
}
@media screen and (max-width: 460px) {
    .cross-talk-single .talk-title h2 br {
        display: none;
    }
    .cross-talk-single .talk-box01 .txt-box,
    .cross-talk-single .talk-box02 .txt-box,
    .cross-talk-single .talk-box03 .txt-box,
    .cross-talk-single .talk-box04 .txt-box {
        padding: 0 20px;
    }
    .cross-talk-single .talk-box04 {
        padding-top: 240px;
    }
}


/*======================================================================
  環境・制度
======================================================================*/

.header-page-nav {
    margin: 64px 0;
}
.header-page-nav .nav-title {
    color: #1E8CC2;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 16px;
}
.header-page-nav,
.header-page-nav .nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.header-page-nav .nav-list li {
    margin-left: 40px;
}
.header-page-nav .nav-list li a {
    display: inline-block;
    color: #0F0F93;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-bottom: #CFD5DE 1px solid;
    padding: 0 0 8px 20px;
    background: url('../img/icon_page-link-down.svg')no-repeat top 5px left;
    box-sizing: border-box;
}
.page-link-box  {
    padding-top: 71px;
    margin-top: -71px;
}

@media screen and (max-width: 800px) {
    .header-page-nav {
        margin: 64px 0 24px;
    }
    .header-page-nav .nav-title,
    .header-page-nav .nav-list,
    .header-page-nav .nav-list li a {
        width: 100%;
    }
    .header-page-nav .nav-title {
        margin-bottom: 16px;
    }
    .header-page-nav .nav-list li {
        width: calc(50% - 8px);
        margin: 0 16px 16px 0;
    }
    .header-page-nav .nav-list li:nth-child(2n) {
        margin-right: 0;
    }
}
@media screen and (max-width: 400px) { 
    .header-page-nav .nav-list li {
        width: 100%;
        margin-right: 0;
    }
}


/*TECH CULTURE*/
.animation-list {
    padding: 96px 0 175px;
    background: url('../img/animation-list-bg.png')no-repeat bottom;
}
.animation-list .inner {
    display: flex;
    justify-content: space-between;
}
.animation-list .header-title .title-fixed-on  {
    position: fixed;
    top: 166px;
    z-index: 2;
}
.animation-list .header-title .title-fixed-off  {
    position: absolute;
    bottom: 0;
    z-index: 2;
}
.animation-list .header-title h2 {
    margin-top: 0;
}
.animation-list-txt {
    width: calc(100% - 370px);
}
.animation-list-txt li {
    position: relative;
    padding: 64px 0;
    border-bottom: #E8E8E8 1px solid;
}
.animation-list-txt li:first-child {
    padding-top: 0;
}
.animation-list-txt li:last-child {
    border: 0;
    padding-bottom: 0;
}
.animation-list-txt li span,
.animation-list-txt li h3,
.animation-list-txt li p {
    color: #CFD5DE;
}
.animation-list-txt li span {
    position: absolute;
    content: '';
    font-family: 'Lato', sans-serif;
}
.animation-list-txt li span,
.animation-list-txt li p {
    font-weight: 400;
    font-size: 16px;
}
.animation-list-txt li h3,
.animation-list-txt li p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.animation-list-txt li h3,
.animation-list-txt li h3 strong {
    font-weight: 700;
}
.animation-list-txt li h3 {
    padding-left: 40px;
    font-size: 22px;
}
.animation-list-txt li h3 strong {
    color: #CFD5DE;
    font-size: 34px;
}
.animation-list-txt li p {
    width: calc(100% - 130px);
    margin: 32px 0 0 auto;
}
.animation-list-txt .color-on span,
.animation-list-txt .color-on h3,
.animation-list-txt .color-on p {
    color: #333333;
}
.animation-list-txt .color-on h3 strong {
    color: #0F0F93;
}

@media screen and (max-width: 1180px) {
    .animation-list .header-title,
    .evaluation .header-title {
        padding-top: 0;
    }
    .animation-list {
        padding-right: 72px;
    }
    .evaluation {
        padding: 0 72px 0 20px;
    }
    
}
@media screen and (max-width: 850px) {
    .animation-list .header-title h2 {
        font-size: 40px;
    }
    .animation-list .header-title span {
        font-size: 16px;
    }
    .animation-list-txt {
        width: calc(100% - 324px);
    }
    .animation-list-txt li h3 {
        font-size: 22px;
    }
    .animation-list-txt li h3 strong {
        font-size: 28px;
    }
}
@media screen and (max-width: 780px) {
    .animation-list {
        padding: 40px 0 136px;
    }
    .animation-list .inner {
        display: block;
        padding: 0 20px;
    }
    .animation-list .header-title .title-fixed-on,
    .animation-list .header-title .title-fixed-off {
        position: relative;
        top: 0;
    }
    .animation-list-txt {
        width: 100%;
        padding-right: 72px;
        box-sizing: border-box;
    }
    .animation-list-txt li {
        padding: 0;
        margin: 56px 0 0;
        border: 0;
    }
}
@media screen and (max-width: 460px) {
    .animation-list-txt {
        padding-right: 0;
    }
}


/*Evaluation*/
.gradation-bg {
    position: relative;
    background: linear-gradient(240deg, #00C8F8, #00004B);
}
.evaluation::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #EFF1F4;
    opacity: 0.2;
}
.evaluation .header-title {
    display: flex;
    align-items: center;
    margin-right: 40px;
}
.evaluation h2,
.evaluation h3,
.evaluation p,
.evaluation span,
.page-bg .evaluation .header-title span {
    color: #fff;
}
.evaluation h3,
.evaluation p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.evaluation h3 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}
.evaluation p {
    font-weight: 500;
    font-size: 16px;
    opacity: 0.8;
}
.evaluation .inner {
    display: flex;
    justify-content: space-between;
    padding: 100px 0;
}
.evaluation-txt {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 672px;
}
.evaluation-txt li {
    position: relative;
    width: 300px;
    padding: 20px 0 48px;
}
.evaluation-txt li:nth-last-child(1),
.evaluation-txt li:nth-last-child(2) {
    padding-bottom: 0;
}
.evaluation-txt li::before,
.evaluation-txt li::after {
    position: absolute;
    content: '';
    height: 1px;
    top: 0;
    left: 0;
    background: #fff;
}
.evaluation-txt li::before {
    width: 100%;
    opacity: 0.4;
}
.evaluation-txt li::after {
    width: 40px;
}

@media screen and (max-width: 1080px) {
    .evaluation-txt li {
        width: 100%;
    }
    .evaluation-txt li:nth-last-child(1), 
    .evaluation-txt li:nth-last-child(2){
        width: 100%;
    }
    .evaluation-txt li:nth-last-child(2) {
        padding-bottom: 48px;
    }
}
@media screen and (max-width: 800px) {
    .gradation-bg {
        background: linear-gradient(to bottom, #04ACD7, #00004B);
    }
    .evaluation::before {
        opacity: 0;
    }
    .evaluation .inner {
        display: block;
        padding: 96px 0;
    }
    .evaluation .header-title {
        margin-bottom: 80px;
    }
    .evaluation h3 {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .evaluation-txt {
        width: 100%;
    }
    .evaluation-txt li {
        padding: 32px 0 64px;
    }
}
@media screen and (max-width: 460px) {
    .evaluation {
        padding: 0 20px;
    }
}


/*SUPPORT*/
.support .inner {
    padding: 0 80px;
}
.support .header-title {
    display: block;
    padding: 128px 0 88px;
}
.support .header-title h2,
.support .header-title span {
    text-align: center;
}
.support-txt li {
    margin-bottom: 40px;
}
.support-txt li:last-child {
    margin-bottom: 0;
}
.support-txt li,
.support-txt li div.txt-box {
    display: flex;
    align-items: center;
}
.support-txt li div.img-box,
.support-txt li div.txt-box {
    width: 50%;
}
.support-txt li div.img-box img {
    width: 100%;
    height: auto;
}
.support-txt li:nth-child(2n) div.img-box,
.support-txt li:nth-child(2n+1) div.txt-box span {
    order: 2;
}
.support-txt li:nth-child(2n) div.txt-box,
.support-txt li:nth-child(2n+1) div.txt-box div {
    order: 1;
}
.support-txt h3,
.support-txt p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.support-txt li div.txt-box span {
    color: #FCFCFD;
    font-family: 'Lato', sans-serif;
    font-size: 120px;
    text-shadow:0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2,0 0 2px #1E8CC2;
}
.support-txt h3 {
    line-height: 28px;
    font-weight: 700;
    font-size: 20px;
    border-bottom: #CFD5DE 1px solid;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.support-txt p {
    line-height: 26px;
    font-size: 16px;
}
.support-txt li:nth-child(2n+1) div.txt-box span {
    padding-left: 40px;
}
.support-txt li:nth-child(2n+1) div.txt-box h3,
.support-txt li:nth-child(2n+1) div.txt-box p {
    padding-left: 48px;
}
.support-txt li:nth-child(2n) div.txt-box span {
    padding-right: 40px;
}
.support-txt li:nth-child(2n) div.txt-box h3,
.support-txt li:nth-child(2n) div.txt-box p {
    padding-right: 48px;
}
.support-view {
    width: 800px;
    padding: 72px 0 64px;
    margin: 104px auto 144px;
}
.support-view h3 {
    line-height: 36px;
    color: #fff;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    margin-bottom: 32px;
}
.support-view .btn-white {
    width: auto;
}
.support-view .btn-white a::before {
    transform:rotate(-45deg);
}

@media screen and (max-width: 1280px) {
    .support .inner {
        padding: 0 72px 0 20px;
    }
}
@media screen and (max-width: 1080px) {
    .support-txt li div.img-box {
        width: 40%;
    }
    .support-txt li div.txt-box {
        width: 60%;
    }
    .support-view {
        width: 100%;
        margin: 104px 0 144px;
    }
}
@media screen and (max-width: 800px) {
    .support .inner {
        padding: 0;
    }
    .support .header-title {
        padding: 80px 20px 32px;
    }
    .support .header-title h2 {
        font-size: 40px;
    }
    .support .header-title span {
        font-size: 16px;
    }
    .support .header-title h2, 
    .support .header-title span {
        text-align: left;
    }
    .support-txt li {
        position: relative;
        display: block;
        margin-bottom: 48px;
    }
    .support-txt li div.img-box,
    .support-txt li div.txt-box {
        width: 100%;
    }
    .support-txt li div.img-box {
        height: 182px;
        overflow: hidden;
    }
    .support-txt li div.txt-box {
        padding: 48px 72px 0 20px; 
        box-sizing: border-box;
    }
    .support-txt li:nth-child(2n+1) div.txt-box h3,
    .support-txt li:nth-child(2n+1) div.txt-box p,
    .support-txt li:nth-child(2n+1) div.txt-box span {
        padding-left: 0;
    }
    .support-txt li:nth-child(2n) div.txt-box h3,
    .support-txt li:nth-child(2n) div.txt-box p,
    .support-txt li:nth-child(2n) div.txt-box span {
        padding-right: 0;
    }
    .support-txt li div.txt-box span {
        position: absolute;
        top: 136px;
        right: 72px;
        color: transparent;
        -webkit-text-stroke: 2px rgb(30, 140, 194, .6);
        text-shadow: none;
        z-index: 1;
    }
    .support-txt h3 {
        position: relative;
        z-index: 2;
    }
    .animation-list-txt li p {
        width: 100%;
    }
    .support-view {
        width: calc(100% - 40px);
        margin: 64px 20px 112px;
    }
    .support-view h3 {
        font-size: 22px;
    }
}
@media screen and (max-width: 460px)  {
    .animation-list {
        background: url(../img/animation-list-bg.png)no-repeat center bottom -120px;
        background-size: 160%;
    }
    .animation-list-txt li h3 {
        padding: 24px 0 0 0;
    }
    .support-txt li div.txt-box {
        padding-right: 20px;
    }
    .support-txt li div.txt-box span {
        right: 20px;
    }
    .support-view {
        padding: 56px 24px 64px;
        box-sizing: border-box;
    }
}


/*TECHNOLOGY STACK*/
.technology-stack {
    padding: 112px 0 144px;
    margin-bottom: 160px;
}
.technology-stack .header-title {
    display: block;
    padding-bottom: 32px;
}
.technology-stack .header-title h2,
.technology-stack .header-title span {
    text-align: center;
    color: #fff;
}
.technology-stack {
    position: relative;
    background: url('../img/technology-stack-bg.jpg')no-repeat center;
    background-size: cover;
}
.technology-stack::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(51,51,51,.8);
}
.technology-stack .item-box {
    display: flex;
    margin-bottom: 24px;
}
.technology-stack .icon-box {
    margin-right: 24px;
}
.technology-stack .icon-box .tag {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 15px;
    background: #0F0F93;
}
.technology-stack .icon-box .tag::before {
    position: absolute;
    content: '';
    width: 14px;
    height: 31px;
    top: 0;
    right: -14px;
    background: #0F0F93;
    clip-path: polygon(0 0, 0% 100%, 50% 100%);
}
.technology-stack .icon-box ul {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
}
.technology-stack .icon-box ul li {
    width: 84px;
    margin: 0 4px;
}
.technology-stack .icon-box ul li span.img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 74px;
    background: #F4F7FA;
    margin: 0 auto;
}
.technology-stack .icon-box ul li span.txt {
    letter-spacing: -0.5px;
    margin-top: 3px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    text-align: center;
}
.txt-info {
    line-height: 24px;
    margin-top: 56px;
    color: #fff;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
}
@media screen and (max-width: 1280px) {
    .technology-stack .item-box {
        display: block;
        margin-bottom: 0;
    }
    .technology-stack .icon-box {
        width: fit-content;
        margin: 0 auto 24px;
    }
}
@media screen and (max-width: 1180px) {
    .technology-stack .header-title {
        padding-top: 0;
    }
}
@media screen and (max-width: 800px) {
    .technology-stack {
        padding: 72px 0 80px;
        margin-bottom: 88px;
    }
    .technology-stack .icon-box {
        width: calc(100% - 72px);
        margin: 0 72px 24px 0;
    }
    .technology-stack .icon-box ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media screen and (max-width: 460px) {
    .header-title h2 {
        font-size: 40px;
    }
    .technology-stack .header-title span {
        font-size: 16px;
        text-align: left;
    }
    .technology-stack .header-title span br {
        display: none;
    }
    .technology-stack .icon-box .tag {
        font-size: 18px;
    }
    .technology-stack .icon-box .tag::before {
        height: 34px;
    }
    .technology-stack .icon-box {
        width: 100%;
        padding-right: 0;
    }
    .technology-stack .icon-box ul {
        justify-content: space-between;
        padding: 16px;
    }
    .technology-stack .icon-box ul.justify-content-center {
        justify-content: center;
    }
    .technology-stack .icon-box ul.justify-content-center li:nth-child(2) {
        margin-left: 16px;
    }
    .technology-stack .icon-box ul li {
        width: calc((100% / 3) - 10px);
        margin: 0 0 16px 0;
    }
    .technology-stack .icon-box ul.justify-content-left::after {
        content: "";
        display: block;
        width: 30%;
    }
    .technology-stack .icon-box ul li:nth-last-child(1),
    .technology-stack .icon-box ul li:nth-last-child(2),
    .technology-stack .icon-box ul li:nth-last-child(3){
        margin-bottom: 0;
    }
    .technology-stack .icon-box ul li span.img {
        width: 100%;
    }
    .txt-info {
        text-align: left;
    }
}

/*======================================================================
  ISBのチャレンジ
======================================================================*/
.challenge .challenge-title h2,
.challenge .challenge-txt p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.challenge .challenge-title h2,
.challenge .challenge-txt span {
    font-weight: 700;
}
.challenge .challenge-title {
    margin: 152px 0 24px;
}
.challenge .challenge-title h2 {
    line-height: 52px;
    font-size: 28px;
}
.challenge .challenge-title h2 strong {
    color: #0F0F93;
}
.challenge .challenge-txt {
    display: flex;
    justify-content: space-between;
}
.challenge .challenge-txt span,
.challenge .challenge-txt p {
    font-size: 16px;
}
.challenge .challenge-txt span {
    color: #AEB8C7;
    font-family: 'Lato', sans-serif;
}
.challenge .challenge-txt p {
    width: 445px;
    line-height: 26px;
    font-weight: 500;
}

/*モーダル*/
.challenge-modal {
    position: relative;
    width: 100%;
    margin: 96px 0 56px;
    background: #D7EFFC url('../img/challenge_bg.png')no-repeat center;
    z-index: 2;
}
.challenge-modal .inner {
    height: 575px;
}
.md-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    text-align: center;
    transition: .5s all;
    box-shadow: 0 0 20px rgba(120,126,170,.8);
}
.md-btn:hover {
    opacity: .5;
    transition: .5s all;
}
.md-btn::before,
.md-btn::after {
    position: absolute;
    content: '';
}
.md-btn::after {
    z-index: -1;
}
.md-btn::before {
    width: 18px;
    height: 5px;
    left: calc(50% - 10px);
    bottom: 14px;
    background: url('../img/icon_md-btn.svg')no-repeat;
}
.md-btn span {
    line-height: 18px;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
    text-align: center;
}
.md-btn img {
    display: block;
    margin: 0 auto 8px;
}
.blue-bg {
    background: #0E25D9;
}
.skyblue-bg {
    background: #00B4CC;
}
.purple-bg {
    background: #A138ED;
}
.yellow-bg {
    background: #FFD153;
}
.daidai-bg {
    background: #FF7600;
}
.orange-bg {
    background: #FFAC3C;
}
.green-bg {
    background: #8DCC00;
}

.modal01 {
    top: 40px;
    left: 56px;
}
.modal01::after {
    width: 243px;
    height: 96px;
    left: 68px;
    bottom: -32px;
    background: url('../img/modal01_after.svg')no-repeat;
}
.modal02 {
    top: 40px;
    left: 224px;
}
.modal02::after {
    width: 105px;
    height: 17px;
    right: -80px;
    bottom: calc(50% - 8px);
    background: url('../img/modal02_after.svg')no-repeat;
}
.modal03 {
    top: -32px;
    right: 80px;
}
.modal03::after {
    width: 372px;
    height: 25px;
    right: 75px;
    bottom: calc(50% - 12px);
    background: url('../img/modal03_after.svg')no-repeat;
}
.modal04 {
    top: 104px;
    right: 224px;
}
.modal04::after {
    width: 96px;
    height: 17px;
    left: -24px;
    background: url('../img/modal04_after.svg')no-repeat;
}
.modal05 {
    left: 232px;
    bottom: -24px;
}
.modal05::after {
    width: 21px;
    height: 146px;
    top: -88px;
    left: 50%;
    background: url('../img/modal05_after.svg')no-repeat;
}
.modal06 {
    left: 400px;
    bottom: -24px;
}
.modal06::after {
    width: 17px;
    height: 66px;
    top: -40px;
    left: calc(50% - 8px);
    background: url('../img/modal06_after.svg')no-repeat;
}
.modal07 {
    right: 408px;
    bottom: -24px;
}
.modal07::after {
    width: 70px;
    height: 57px;
    top: -40px;
    left: calc(50% - 70px);
    background: url('../img/modal07_after.svg')no-repeat;
}
.modal08 {
    right: 104px;
    bottom: -24px;
}
.modal08::after {
    width: 17px;
    height: 60px;
    top: -40px;
    left: calc(50% - 8px);
    background: url('../img/modal08_after.svg')no-repeat;
}
.md-close img {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -77px;
    right: calc(50% - 26px);
    width: 45px;
    height: 45px;
    cursor: pointer;
}
.md-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #575757;
    opacity: .8;
    z-index: 9999;
}
.md-contents {
    display: none;
    position: fixed;
    top: calc(50% - 207px);
    left: 50%;
    width: calc(100% - 40px);
    height: auto;
    transform: translateX(-50%);
    z-index: 10000;
}
.md-inner {
    width: 840px;
    height: auto;
    padding: 0 40px 64px;
    margin: auto;
    border-radius: 4px;
    box-sizing: border-box;
}
.md-inner .title,
.md-inner .md-box .txt h4,
.md-inner .md-box .txt p {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
.md-inner .md-box .txt h4,
.md-inner .md-box .txt p {
    color: #fff;
}
.md-inner .title,
.md-inner .md-box .txt h4 {
    font-weight: 700;
    font-size: 22px;
}
.md-inner .title {
    padding: 16px 24px;
    margin: 0 24px;
    border-radius: 0 0 5px 5px;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}
.md-inner .md-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}
.md-inner .md-box img {
    width: fit-content;
    height: fit-content;
}
.md-inner .md-box .txt {
    width: calc(100% - 244px);
}
.md-inner .md-box .txt h4 {
    line-height: 34px;
    margin-bottom: 24px;
}
.md-inner .md-box .txt p {
    line-height: 26px;
    font-size: 16px;
}

@media screen and (max-width: 1130px) {
    .md-btn::after {
        width: auto;
        height: auto;
    }
    .modal01,
    .modal02,
    .modal03,
    .modal04 {
        top: 40px;
    }
    .modal05,
    .modal06,
    .modal07,
    .modal08 {
        bottom: 40px;
    }
    .modal03,
    .modal07 {
        right: 224px;
    }
    .modal04,
    .modal08 {
        right: 56px;
    }
    .modal05 {
        left: 56px;
    }
    .modal06 {
        left: 224px;
    }
}
@media screen and (max-width: 1080px) {
    .md-contents {
        top: calc(50% - 324px);
    }
    .md-inner {
        width: 80%;
    }
    .md-inner .md-box .txt h4 br {
        display: none;
    }
    .challenge-modal .inner {
        height: 680px;
    }
}
@media screen and (max-width: 770px) {
    .md-contents {
        top: 20px;
    }
    .md-inner {
        width: 100%;
        padding: 0 24px 48px;
    }
    .md-inner .md-box {
        display: block;
        margin-top: 0;
    }
    .md-inner .md-box img {
        display: block;
        margin: 0 auto 32px;
    }
    .md-inner .title {
        margin: 0;
        padding: 16px;
        margin-bottom: 24px;
    }
    .md-inner .title,
    .md-inner .md-box .txt h4 {
        line-height: 28px;
        font-size: 20px;
    }
    .md-inner .md-box .txt h4 {
        margin-bottom: 16px;
    }
    .md-inner .md-box .txt {
        width: 100%;
    }
    .challenge-modal .inner {
        height: 1085px;
    }
    .modal01,
    .modal02 {
        top: 40px;
    }
    .modal03,
    .modal04 {
        top: 218px;
    }
    .modal05,
    .modal06 {
        bottom: 218px;
    }
    .modal07,
    .modal08 {
        bottom: 40px;
    }
    .modal01,
    .modal03,
    .modal05,
    .modal07 {
        right: auto;
        left: 25%;
    }
    .modal02,
    .modal04,
    .modal06,
    .modal08 {
        left: auto;
        right: 25%;
    }
}
@media screen and (max-width: 640px) {
    .challenge .challenge-title {
        margin: 152px 0 16px;
    }
    .challenge .challenge-title h2 {
        font-size: 24px;
    }
    .challenge .challenge-title h2 br {
        display: none;
    }
    .challenge .challenge-txt {
        display: block;
    }
    .challenge .challenge-txt p {
        width: 100%;
        margin-top: 40px;
    }
    .challenge-modal {
        margin-top: 60px;
        background-size: 130%;
    }
    .modal01,
    .modal03,
    .modal05,
    .modal07 {
        left: 15%;
    }
    .modal02,
    .modal04,
    .modal06,
    .modal08 {
        right: 15%;
    }
}
@media screen and (max-width: 460px) {
    .challenge-modal {
        background: #D7EFFC url('../img/challenge_bg_sp.png')no-repeat center;
    }
    .challenge-modal .inner {
        height: 960px;
    }
    .modal01,
    .modal03,
    .modal05,
    .modal07 {
        left: 20px;
    }
    .modal02,
    .modal04,
    .modal06,
    .modal08 {
        right: 20px;
    }
    .md-inner .md-box {
        height: calc(100vh - 256px);
        overflow: auto;
    }
}

/*======================================================================
  数字で見るアイ・エス・ビー
======================================================================*/
.infograhic .pc {
    display: block;
}
.infograhic .sp {
    display: none;
}
@media screen and (max-width: 640px){
    .infograhic .pc {
        display: none;
    }
    .infograhic .sp {
        display: block;
    }
}
.numbers {
    margin-top: 64px;
}
.numbers .contents-header {
    display: block;
    padding: 112px 0 48px;
}
.numbers .contents-header h2 {
    text-align: center;
}
.numbers-bg {
    position: relative;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #EEEFF3;
    padding-bottom: 104px;
}
.numbers-bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 480px;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(207,222,245,1), rgba(255,255,255,0));
    z-index: -2;
}
.numbers-bg::after {
    content: "NUMBERS";
    top: -32px;
    z-index: -1;
}

@media screen and (max-width: 1180px){
    .numbers {
        margin-top: 0;
    }
}
@media screen and (max-width: 960px){
    .numbers-bg::after {
        top: 0;
    }
}
@media screen and (max-width: 640px){
    .numbers-bg {
        padding-bottom: 64px;
    }
    .numbers .contents-header {
        padding: 40px 0 24px;
    }
}
@media screen and (max-width: 460px){
    .numbers-bg::after {
        font-size: 80px;
    }
    .numbers .contents-header h2 {
        line-height: 46px;
    }
}

.numbers .flex {
    display: flex;
    align-items: baseline;
}
.numbers .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.numbers .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.numbers .flex-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.numbers .box {
    position: relative;
    margin-top: 18px;
    border: 1px #CFD5DE solid;
    background: #fff;
}
.numbers .box-left,
.numbers .box-right {
    width: calc(50% - 8px);
}
.numbers .box-half {
    width: calc(50% - 10px);
}
.numbers .box-origin {
    display: inline-block;
}

@media screen and (max-width: 1180px) {
    .numbers .flex {
        justify-content: center;
    }
    .pc .numbers .flex-between {
        display: block;
    }
    .pc .numbers .box-left, 
    .pc .numbers .box-right {
        margin: 0 auto;
    }
    .pc .numbers .box-left, 
    .pc .numbers .box-right,
    .pc .numbers .box-half,
    .pc .numbers .box-origin {
        width: 560px;
    }
}
@media screen and (max-width: 640px) {
    .numbers .flex-center {
        height: calc(100% - 37px);
    }
    .numbers .flex-between {
        align-items: inherit;
    }
    .numbers .box-origin {
        width: 100%;
    }
}


/*画像*/
.numbers .img-bg {
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 12px;
    right: 12px;
    z-index: 1; 
}

/*文字*/
.numbers .contents-header h2,
.numbers .box .title,
.numbers .box small,
.numbers .box span,
.numbers .box strong {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
}
.numbers .contents-header h2 {
    font-size: 28px;
}
.numbers .box .title {
    position: relative;
    display: inline-block;
    font-size: 16px;
    padding: 12px 8px 8px 16px;
    border-bottom: 1px #1E8CC2 solid;
    z-index: 3;
}
.numbers .box .txt {
    padding: 24px 0 40px;
}
.numbers .box-origin .txt {
    padding: 24px 56px 40px;
}
.numbers .box .num {
    font-family: 'Lato', sans-serif;
}
.numbers .box strong {
    position: relative;
    display: block;
    color: #1E8CC2;
    font-size: 32px;
    z-index: 3;
}
.numbers .box strong.num {
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 80px;
    background: linear-gradient(to bottom, #00C8F8 30%, #00004B 70%);
    background: -webkit-linear-gradient(to bottom, #00C8F8 30%, #00004B 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 3;
}
.numbers .box strong.txt-small-bk {
    background: linear-gradient(to bottom, #333333, #333333);
    background: -webkit-linear-gradient(to bottom, #333333, #333333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.numbers .box span.tag {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 24px;
    margin: 0 auto;
    border: #CFD5DE 1px solid;
    border-radius: 24px;
    font-size: 16px;
    z-index: 3;
}
.numbers .box span.num {
    font-weight: 500;
    font-size: 26px;
}
.numbers .box span.txt-left,
.numbers .box span.txt-right {
    display: block;
    font-weight: 400;
    font-size: 14px;
    margin: -16px 12px 12px 0;
}
.numbers .box span.txt-left {
    margin: -16px 0 12px 12px;
}
.numbers .box span.txt-right {
    text-align: right;
}
.numbers .box small {
    word-break: keep-all;
    font-size: 18px;
    z-index: 3;
}
.numbers .box small.medium {
    font-size: 24px;
}
.numbers .txt-center {
    text-align: center;
}

.numbers .txt-space-top-64 {
    margin-top: 64px;
}
.numbers .txt-space-top-112 {
    margin-top: 88px;
}
.numbers .txt-space-top--75 {
    margin-top: -75px;
}
.numbers .txt-space-top--88 {
    margin-top: -88px;
}
.numbers .txt-space-left {
    margin-left: 8px;
}
.numbers .txt-space-right-24 {
    margin-right: 24px;
}
.numbers .txt-space-right-32 {
    margin-right: 32px;
}
.numbers .txt-space-right-56 {
    margin-right: 56px;
}

@media screen and (max-width: 1180px) {
    .numbers .txt-space-top-64,
    .numbers .txt-space-top-112,
    .numbers .txt-space-top--75,
    .numbers .txt-space-top--88 {
        margin-top: 18px;
    }
}
@media screen and (max-width: 640px) {
    .numbers .box {
        padding: 0 24px;
        margin-top: 8px;
        box-sizing: border-box;
    }
    .numbers .box .title {
        font-size: 15px;
        margin-left: -24px;
    }
    .numbers .box .txt {
        padding: 0 0 24px;
    }
    .numbers .box-half {
        width: calc(50% - 4px);
    }
    .numbers .box span.tag {
        margin-top: 24px;
    }
    .numbers .box small {
        font-size: 16px;
    }
    .numbers .box small.medium {
        font-size: 18px;
    }
}
@media screen and (max-width: 460px){
    .numbers .box {
        padding: 0 16px;
    }
    .numbers .box .title {
        margin-left: -16px;
    }
    .numbers .box-half strong.num {
        font-size: 66px;
    }
}

/*平均年齢*/
.numbers .age {
    position: relative;
}
.numbers .age::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: url('../img/numbers_age.png')no-repeat top 20px center;
    z-index: 2; 
}
.numbers .age .txt {
    align-items: center;
    height: 208px;
}
.numbers .age strong.num {
    display: flex;
    justify-content: center;
    font-size: 52px;
    margin-left: 4px;
}
.numbers .age small {
    font-size: 16px;
    margin: 24px 0 0 4px;
}

/*新卒・中途比率*/
.numbers .joining span.to {
    font-size: 50px;
    margin: auto 0 16px;
}
.numbers .joining strong.num {
    padding: 0 24px;
}

/*設立年月日*/
.numbers .day strong.num {
    font-size: 52px;
}

/*年間有給休暇取得日数*/
.numbers .yers-paid img {
    display: block;
    margin: 16px auto 0;
}
.numbers .yers-paid strong.num {
    font-size: 58px;
}
.numbers .yers-paid strong.txt-small-bk {
    font-weight: 500;
    font-size: 39px;
}
.numbers .yers-paid .txt {
    padding-top: 0;
}

/*全国拠点数*/
.numbers .base .txt {
    padding: 24px 32px 40px 56px;
}
.numbers .base .deco {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    padding-bottom: 32px;
    text-align: center;
    background: url('../img/numbers_base_deco.png')no-repeat center bottom;
}
.numbers .base .deco + img {
    margin-top: -96px;
}
/*有休平均取得率*/
.numbers .average .txt {
    padding: 8px 0 40px;
}
.numbers .average .txt-sub {
    justify-content: center;
    margin: -40px auto 32px;
}
.numbers .average strong.txt-small-bk {
    padding-left: 12px;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1px;
}
.numbers .average small.regular {
    font-weight: 400;
}
@media screen and (max-width: 1180px) {
    .numbers .box span.txt-left {
        text-align: right;
        margin-right: 12px;
    }
    .numbers .box span.txt-left br {
        display: none;
    }
}
@media screen and (max-width: 640px) {
    .numbers .box-half span.txt-right {
        display: inline-block;
        text-align: left;
    }
    .numbers .age .txt {
        display: grid;
        height: auto;
        margin: 0;
    }
    .numbers .age strong.num {
        font-size: 32px;
        margin-left: 0;
    }
    .numbers .age::before {
        left: 0;
        background: url(../img/numbers_age.png)no-repeat top 8px center;
        background-size: 200px;
    }
    .numbers .age .flex-center {
        height: 174px;
    }
    .numbers .age small {
        margin: 0;
        font-size: 15px;
        text-align: center;
    }
    .numbers .base .txt {
        display: block;
        width: 335px;
        padding: 0 32px 40px;
        margin: 0 auto;
    }
    .numbers .base .txt-space-right-32 {
        justify-content: flex-end;
    }
    .numbers .base .deco + img {
        margin-top: -64px;
        margin-left: auto;
    }
    .numbers .average strong.txt-small-bk {
        padding-left: 0;
    }
    .numbers .average .txt-sub {
            margin: 0 0 8px 24px;
    }
}
@media screen and (max-width: 480px) {
    .numbers .age::before {
        background: url(../img/numbers_age.png)no-repeat top 16px center;
        background-size: 200px;
    }
    .numbers .age .txt {
        padding-bottom: 0;
    }
　　.numbers .base .deco{
　　　　font-size: 13px;	
　　}
    .numbers .yers-paid img,
    .numbers .base .deco + img {
        width: 100%;
        height: auto;
    }
    .numbers .yers-paid .txt {
        padding-right: 32px;
        padding-left: 32px;
    }
    .numbers .yers-paid .txt-space-right-56 {
        margin-right: 32px;
    }
    .numbers .yers-paid .txt-space-right-24 {
        margin-right: 0;
    }
    .numbers .base .txt {
        display: block;
        width: 100%;
        padding: 0 0 40px;
    }
    .numbers .box strong {
        font-size: 24px;
    }
    .numbers .group strong.num {
        font-size: 80px;
    }
    .numbers .box span.txt-left, 
    .numbers .box span.txt-right {
        margin: -16px 0 12px 0;
    }
    .numbers .box span.txt-left br,
    .numbers .box span.txt-right br {
        display: none;
    }
}
@media screen and (max-width: 380px) {
    .numbers .age::before {
        background: url(../img/numbers_age.png)no-repeat top 24px center;
        background-size: 152px;
    }
    .numbers .age .flex-center {
        height: 136px;
    }
    .numbers .box span.txt-right {
        text-align: left;
        margin: -16px 0 12px 0;
    }
    .numbers .joining strong.num {
        padding: 0 16px;
    }
    .numbers .txt-space-right-32,
    .numbers .yers-paid .txt-space-right-56 {
        margin-right: 16px;
    }
}


/*アイ・エス・ビー社員によるトップ3*/
.ranking {
    padding: 96px 0 136px;
    background: #FCFCFD;
}
.ranking .img-box {
    width: calc((100% - 1100px)/2 + 1100px);
    height: 310px;
    overflow: hidden;
}
.ranking .img-box img {
    width: 100%;
    height: auto;
}
.ranking .contents-header span,
.ranking .contents-header p,
.ranking-list h3,
.ranking-list li p,
.ranking-list li p strong {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
}
.ranking .contents-header {
    margin-bottom: 56px;
}
.ranking .contents-header h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 195px;
    background: linear-gradient(to left, #00C8F8 30%, #00004B 70%);
    background: -webkit-linear-gradient(to left, #00C8F8 30%, #00004B 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ranking .contents-header p {
    font-weight: 200;
}
.ranking .contents-header span {
    font-size: 28px;
    padding: 32px 0 16px;
}
.ranking .left,
.ranking .right {
    width: calc(50% - 20px);
    border-top: #0F0F93 1px solid;
}
.ranking .left {
    margin-top: 80px;
}
.ranking .right {
    margin-top: 172px;
}
.ranking-list h3 {
    position: relative;
    color: #0F0F93;
    font-size: 20px;
    padding: 32px 0 0 64px;
}
.ranking-list h3::before {
    position: absolute;
    content: 'Q';
    width: 48px;
    height: 72px;
    top: 8px;
    left: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 60px;
}
.ranking-list li {
    display: flex;
    margin-top: 40px;
}
.ranking-list li span {
    color: #8F7400;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 26px;
    margin-right: 32px;
}
.ranking-list li:first-child span {
    font-size: 32px;
    margin-right: 24px;
}

.ranking-list li p {
    font-size: 18px;
}
.ranking-list li p strong {
    font-size: 25px;
    padding-bottom: 8px;
    background: url('../img/ranking-list-strong.png')no-repeat center bottom;
}
.ranking .flex {
    display: flex;
    justify-content: space-between;
}

.item-animation {
    animation: slideIn 1s cubic-bezier(0.5, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(-64px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
.item-animation:nth-child(2n) {
    animation: slideIn2 1s cubic-bezier(0.5, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn2 {
  0% {
    transform: translateX(64px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}


@media screen and (max-width: 1180px) {
    .ranking .contents-header h2 {
        font-size: 150px;
    }
}
@media screen and (max-width: 960px) {
    .ranking .contents-header h2 {
        font-size: 104px;
    }
    .ranking .img-box {
        width: 100%;
    }
    .ranking .inner {
        padding: 0 20px;
    }
    .ranking .flex {
        display: block;
    }
    .ranking .left, 
    .ranking .right {
        width: calc(100% - 64px);
        margin-top: 64px;
    }
}
@media screen and (max-width: 640px) {
    .ranking {
        padding: 56px 0 128px;
    }
    .ranking .contents-header {
        margin-bottom: 24px;
    }
    .ranking .contents-header h2 {
        font-size: 80px;
    }
    .ranking .img-box {
        height: 160px;
    }
}
@media screen and (max-width: 460px) {
    .ranking .contents-header h2 {
        font-size: 78px;
        text-align: center;
    }
    .ranking .left, 
    .ranking .right {
        width: 100%;
        text-align: center;
    }
    .ranking-list h3 {
        display: inline-block;
    }
    .ranking-list li {
        display: block;
    }
    .ranking-list li span {
        margin: 0 0 8px;
        text-align: center;
    }
    .ranking-list li p {
        font-size: 17px;
        text-align: center;
    }
    .ranking-list li p strong {
        font-size: 24px;
    }
}
@media screen and (max-width: 380px) {
    .ranking .contents-header h2 {
        font-size: 74px;
    }
}
@media screen and (max-width: 360px) {
    .ranking .contents-header h2 {
        font-size: 68px;
    }
}
@media screen and (max-width: 340px) {
    .ranking .contents-header h2 {
        font-size: 60px;
    }
}
/*======================================================================
  hover除去
======================================================================*/
@media screen and (max-width: 460px) {
    a:hover,
    .header .logo:hover,
    .top-box .contents-txt ul.process li p a:hover,
    .cross-box:hover .img-box img,
    .footer-box .logo:hover,
    .breadcrumb li a:hover,
    .talk-box li a:hover div.img {
        opacity: 1;
    }
    .btn-white a:hover::before {
        background: url(../img/icon_viewmore.svg)no-repeat;
    }
    .nav-box a:hover,
    .nav-box-sub a:hover {
        color: #fff;
    }
    .btn-red-header a:hover {
        background: #C42D00;
    }
    .btn-red a:hover::before {
        right: 42px;
    }
    .btn-red a:hover span {
        top: 28px;
    }
    .cross-box .img-box img,
    .cross-box:hover .img-box img {
        position: relative;
    }
    .btn-white a:hover,
    .cross-box .contents-txt li a:hover span,
    .cross-box .contents-txt li a:hover div h3 {
        color: #333;
    }
    .cross-box .contents-txt li a:hover div p {
        color: #1F1FBA;
    }
    .isb-more .contents-txt ul li a:hover img.bg {
        width: 100%;
    }
    .btn-white a:hover::after,
    .cross-box .contents-txt li a:hover::after,
    .isb-more .contents-txt ul li a:hover > div.box::after {
        width: 0;
        height: 0;
        background: 0;
    }
    .modal-recruit ul li a:hover {
        color: #0E25D9;
    }
    .md-btn:hover {
        opacity: 1;
    }
    
}