@keyframes bg-gradient {
    0% {
        background-position: 0% 0%
    }

    50% {
        background-position: 25% 50%
    }

    75% {
        background-position: 50% 100%
    }

    100% {
        background-position: 100% 100%
    }
}

.ttl-h1 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0
}

.l-header {
    position: absolute;
    background-color: rgba(0,0,0,0)
}

.l-header::before {
    display: none
}

.l-header__logo {
    position: absolute
}

.l-header__logo a {
    background: rgba(0,0,0,0) url("../images/common/logo_w.png") 50% 50% no-repeat;
    background-size: 33.1rem auto
}

@media screen and (max-width: 1400px) {
    .l-header__logo a {
        background-size:24rem auto
    }
}

@media screen and (max-width: 1024px) {
    .l-header__logo a {
        background-size:18.5rem auto
    }
}

.l-gnav__btnMail {
    display: none
}

.l-gnav__btnMenu {
    display: none
}

.l-gnav__menu01 li a {
    color: #fff
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .l-gnav__menu01 li a:hover::before {
        background-color:#fff
    }
}

.l-snav {
    height: 100svh
}

@media screen and (max-width: 1024px) {
    .l-snav {
        height:auto
    }
}

.l-snav__menu01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1
}

@media print,screen and (min-width: 1025px) {
    .l-snav__menu01 {
        display:flex !important
    }
}

@media screen and (min-width: 1025px)and (max-height: 750px) {
    .l-snav__menu01 {
        gap:.8rem 0
    }
}

@media screen and (max-width: 1024px) {
    .l-snav__menu01 {
        display:none
    }
}

.l-snav__pagetop {
    display: block
}

@media screen and (max-width: 1024px) {
    .l-snav__pagetop {
        display:none
    }
}

.l-main {
    padding-top: 0
}

.l-main::before {
    display: none
}

.l-footer {
    margin-top: -15rem;
    padding: 24rem 0 7.5rem
}

@media screen and (max-width: 1024px) {
    .l-footer {
        padding:16.5rem 0 2rem;
        margin-top: -10rem
    }
}

.bg01 {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    max-width: 130rem;
    padding: 0 13rem;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 1024px) {
    .bg01 {
        padding:0 2rem
    }
}

.bg01 .inner {
    display: flex;
    height: 100%;
    border-left: 1px solid #e3e3e3
}

.bg01 .inner .line {
    width: 33.3333333333%;
    height: 100%;
    border-right: 1px solid #e3e3e3
}

.bg01 .inner .line.w100p {
    width: 100%
}

.mv {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 60rem;
    border-bottom: 2px solid #195586;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .mv {
        min-height:70rem
    }
}

.mv__image {
    width: 100%;
    height: 100%
}

.mv__image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mv__txtBox {
    position: absolute;
    bottom: 21.5rem;
    left: 8.5rem
}

@media screen and (min-width: 1025px)and (max-height: 700px) {
    .mv__txtBox {
        bottom:20rem
    }
}

@media screen and (max-width: 1024px) {
    .mv__txtBox {
        top:19rem;
        left: 2rem
    }
}

.mv__txt .txt {
    display: block;
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .22em;
    line-height: 1.56;
    text-shadow: 0 0 20px #000
}

@media screen and (min-width: 1025px)and (max-height: 700px) {
    .mv__txt .txt {
        font-size:4rem
    }
}

@media screen and (max-width: 1024px) {
    .mv__txt .txt {
        font-size:2.8rem
    }
}

.mv__txt .txt .outer {
    display: block
}

.mv__txt .txt .outer .line {
    display: inline-block
}

.mv__txt .txt .outer .inner {
    width: 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    transition: all .3s
}

.mv__txt.is-animate .txt .outer .inner {
    width: 100%
}

.mv__en {
    margin-top: 2.5rem
}

@media screen and (max-width: 1024px) {
    .mv__en {
        margin-top:1rem
    }
}

.mv__en .en {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: "Montserrat",sans-serif;
    color: #fff;
    letter-spacing: .2em;
    line-height: 1
}

@media screen and (min-width: 1025px)and (max-height: 700px) {
    .mv__en .en {
        font-size:1.4rem
    }
}

@media screen and (max-width: 1024px) {
    .mv__en .en {
        font-size:1rem
    }
}

.mv__en .en .outer {
    display: block
}

.mv__en .en .outer+.outer {
    margin-top: .9rem
}

@media screen and (max-width: 1024px) {
    .mv__en .en .outer+.outer {
        margin-top:.7rem
    }
}

.mv__en .en .line {
    display: inline-block
}

.mv__en .en .inner {
    width: 0;
    display: inline-block;
    overflow: hidden;
    transition: all .3s .35s
}

.mv__en .en .inner .bg {
    display: inline-block;
    padding: .3rem;
    background-color: #363636;
    white-space: nowrap
}

@media screen and (max-width: 1024px) {
    .mv__en .en .inner .bg {
        padding:.2rem
    }
}

.mv__en.is-animate .en .outer .inner {
    width: 100%
}

.topics {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 99rem;
    padding-right: 9rem;
    background: linear-gradient(to right, rgb(43, 115, 162) 0, rgb(6, 63, 120) 100%)
}

@media screen and (max-width: 1024px) {
    .topics {
        width:100%;
        background: linear-gradient(to right, rgba(43, 115, 162, 0.9) 0, rgba(6, 63, 120, 0.9) 100%)
    }
}

@media screen and (max-width: 767px) {
    .topics {
        padding-right:0
    }
}

.topics dl {
    padding: 3.3rem 4.3rem
}

@media screen and (min-width: 1025px)and (max-height: 700px) {
    .topics dl {
        padding:2.5rem 4.3rem
    }
}

@media screen and (max-width: 1024px) {
    .topics dl {
        padding:2rem 2rem 1.5rem
    }
}

.topics dl dt {
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Montserrat",sans-serif;
    color: #fff;
    letter-spacing: .28em
}

@media screen and (max-width: 1024px) {
    .topics dl dt {
        font-size:1rem
    }
}

.topics dl dt span {
    display: inline-block;
    border-bottom: 1px solid #fff
}

.topics dl dt a {
    position: absolute;
    top: .3rem;
    left: 9rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    letter-spacing: .05em;
    font-weight: 500;
    padding-bottom: 1px
}

@media screen and (max-width: 767px) {
    .topics dl dt a {
        display:none
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .topics dl dt a:hover {
        border-bottom:1px solid #fff
    }
}

.topics dl dt a .ico {
    margin-left: .5rem
}

.topics dl dt a .ico svg {
    width: .6rem;
    stroke-width: 2.5;
    stroke: #fff
}

.topics dl dd {
    margin-top: 2.5rem
}

@media screen and (min-width: 1025px)and (max-height: 700px) {
    .topics dl dd {
        margin-top:1.5rem
    }
}

@media screen and (max-width: 1024px) {
    .topics dl dd {
        margin-top:.5rem
    }
}

.topics dl dd ul li {
    display: flex
}

@media screen and (max-width: 1024px) {
    .topics dl dd ul li {
        flex-wrap:wrap
    }
}

.topics dl dd ul li:nth-child(n+2) {
    margin-top: 1.3rem
}

@media screen and (max-width: 1024px) {
    .topics dl dd ul li:nth-child(n+2) {
        margin-top:.5rem
    }
}

.topics dl dd ul li .date {
    position: relative;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: "Montserrat",sans-serif;
    color: #fff;
    letter-spacing: .08em;
    width: 12rem
}

@media screen and (max-width: 1024px) {
    .topics dl dd ul li .date {
        font-size:1.2rem;
        width: 8.5rem
    }
}

.topics dl dd ul li .cat {
    position: relative;
    top: .1rem;
    width: 8.5rem;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
    margin-right: 3rem
}

@media screen and (max-width: 1024px) {
    .topics dl dd ul li .cat {
        font-size:1rem
    }
}

.topics dl dd ul li .cat span {
    display: block;
    border: 1px solid rgba(255,255,255,.39)
}

.topics dl dd ul li .txt {
    position: relative;
    top: -0.3rem;
    font-size: 1.5rem;
    color: #fff
}

@media screen and (max-width: 1024px) {
    .topics dl dd ul li .txt {
        margin-top:.5rem;
        display: block;
        width: 100%;
        top: 0;
        font-size: 1.2rem
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .topics dl dd ul li .txt a:hover {
        text-decoration:underline
    }
}

.topics dl dd .more {
    margin-top: 2.6666666667vw
}

@media print,screen and (min-width: 768px) {
    .topics dl dd .more {
        display:none
    }
}

.topics dl dd .more a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2.6666666667vw;
    letter-spacing: .05em;
    font-weight: 500;
    padding-bottom: 1px;
    color: #fff
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .topics dl dd .more a:hover {
        border-bottom:1px solid #fff
    }
}

.topics dl dd .more a .ico {
    margin-left: 1.3333333333vw
}

.topics dl dd .more a .ico svg {
    width: 1.6vw;
    stroke-width: 2.5;
    stroke: #fff
}

.philosophy {
    position: relative;
    padding: 13.3rem 0 15rem;
    z-index: 2;
    background-color: #fff
}

@media screen and (max-width: 1024px) {
    .philosophy {
        padding:5rem 0 1.5rem
    }
}

.philosophy__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .philosophy__inner {
        padding:0 2rem
    }
}

.philosophy__ttl01 {
    position: relative;
    z-index: 2;
    margin-top: 5rem
}

@media screen and (max-width: 1024px) {
    .philosophy__ttl01 {
        margin-top:1.5rem
    }
}

@media screen and (max-width: 1400px) {
    .philosophy__ttl01 .txt {
        font-size:2.1413276231vw
    }
}

@media screen and (max-width: 1024px) {
    .philosophy__ttl01 .txt {
        font-size:2.4rem
    }
}

.philosophy__ttl01 .txt .outer:nth-child(1) .bg span:nth-child(-n+8) {
    color: #064778
}

@media print,screen and (min-width: 768px) {
    .philosophy__ttl01 .txt .outer:nth-child(2) .bg span:nth-of-type(n+9):nth-of-type(-n+14) {
        color:#064778
    }
}

@media screen and (max-width: 767px) {
    .philosophy__ttl01 .txt .outer:nth-child(3) .bg span:nth-child(-n+6) {
        color:#064778
    }
}

.philosophy__txt01 {
    position: relative;
    z-index: 2;
    margin-top: 6.5rem
}

@media screen and (max-width: 1400px) {
    .philosophy__txt01 {
        width:39.2576730906vw;
        margin-top: 4.6395431834vw
    }
}

@media screen and (max-width: 1024px) {
    .philosophy__txt01 {
        width:100%;
        margin-top: 2rem
    }
}

.philosophy__image01 {
    position: absolute;
    top: 0;
    left: 72rem;
    width: 76.7rem
}

@media screen and (max-width: 1500px) {
    .philosophy__image01 {
        left:69rem
    }
}

@media screen and (max-width: 1400px) {
    .philosophy__image01 {
        left:50.6780870807vw;
        width: 48.5367594575vw
    }
}

@media screen and (max-width: 1024px) {
    .philosophy__image01 {
        position:relative;
        left: 0;
        width: 100%;
        max-width: 550px;
        margin: 1.5rem auto 0
    }
}

@media screen and (max-width: 767px) {
    .philosophy__image01 {
        width:calc(100% + 4rem);
        margin: 1.5rem -2rem 0
    }
}

.solution {
    position: relative;
    padding: 14rem 0 0;
    width: 90vw;
}

@media screen and (max-width: 1024px) {
    .solution {
        padding:6.5rem 0 0
    }
}

.solution::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    z-index: 2
}

.solution .bg01 {
    z-index: 3
}

.solution__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .solution__inner {
        padding:0 2rem
    }
}

.solution__ttl01 {
    position: relative;
    z-index: 3
}

.solution__slider {
    position: relative;
    margin-top: 5.8rem
}

@media screen and (max-width: 1024px) {
    .solution__slider {
        margin-top:4rem
    }
}

.solution__slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1*(100vw - 100%)/2);
    width: calc(100% + 100vw - 100%);
    height: 29rem;
    background: linear-gradient(to right, #2B73A2 0, #063F78 100%);
    z-index: 3
}

@media screen and (max-width: 1400px) {
    .solution__slider::before {
        height:20.6995003569vw
    }
}

@media screen and (max-width: 767px) {
    .solution__slider::before {
        height:17.5rem;
        display: none
    }
}

.solution__slider .solution-prev {
    position: absolute;
    top: 11.4rem;
    left: -3.4rem;
    width: 6.3rem;
    height: 6.3rem;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 1400px) {
    .solution__slider .solution-prev {
        top:8.1370449679vw;
        left: -2.4268379729vw;
        width: 4.4967880086vw;
        height: 4.4967880086vw
    }
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-prev {
        top:9.1707317073vw;
        width: 3.9024390244vw;
        height: 3.9024390244vw;
        left: -1rem;
        border: none
    }
}

@media screen and (max-width: 767px) {
    .solution__slider .solution-prev {
        top:6.8rem;
        width: 4rem;
        height: 4rem;
        box-shadow: 0 3px 25px rgba(0,0,0,.11)
    }
}

.solution__slider .solution-prev .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(180deg);
    display: block;
    width: .9rem;
    height: 1.4rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-prev .ico {
        width:.4rem;
        height: .8rem
    }
}

.solution__slider .solution-prev .ico svg {
    stroke: #1c6bbb;
    stroke-width: 2
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-prev .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .solution__slider .solution-prev:hover .ico {
        right:calc(50% + .5rem)
    }
}

.solution__slider .solution-prev.swiper-button-disabled {
    display: none
}

.solution__slider .solution-next {
    position: absolute;
    top: 11.4rem;
    right: -3.4rem;
    width: 6.3rem;
    height: 6.3rem;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 1400px) {
    .solution__slider .solution-next {
        top:8.1370449679vw;
        right: -2.4268379729vw;
        width: 4.4967880086vw;
        height: 4.4967880086vw
        +  top: 5rem;
+  width: 4rem;
+  height: 4rem;
    }
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-next {
        top:9.1707317073vw;
        width: 3.9024390244vw;
        height: 3.9024390244vw;
        right: -1rem;
        border: none
    }
}

@media screen and (max-width: 767px) {
    .solution__slider .solution-next {
        top:6.8rem;
        width: 4rem;
        height: 4rem;
        box-shadow: 0 3px 25px rgba(0,0,0,.11)
    }
}

.solution__slider .solution-next .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    display: block;
    width: .9rem;
    height: 1.4rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-next .ico {
        width:.4rem;
        height: .8rem
    }
}

.solution__slider .solution-next .ico svg {
    stroke: #1c6bbb;
    stroke-width: 2
}

@media screen and (max-width: 1024px) {
    .solution__slider .solution-next .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .solution__slider .solution-next:hover .ico {
        right:calc(50% - .5rem)
    }
}

.solution__slider .solution-next.swiper-button-disabled {
    display: none
}

.solution .js-solution-slider {
    position: relative;
    overflow: hidden;
    border-left: 1px solid #e3e3e3;
    z-index: 3
}

@media screen and (max-width: 767px) {
    .solution .js-solution-slider {
        overflow:visible;
        width: 66.6666666667%;
        border-left: none
    }
}

.solution .js-solution-slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #e3e3e3;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .solution .js-solution-slider::after {
        display:none
    }
}

.solution .js-solution-slider .item {
    position: relative;
    height: auto;
    padding-bottom: 10rem
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item {
        padding-bottom:7rem
    }
}

.solution .js-solution-slider .item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #e3e3e3;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .solution .js-solution-slider .item::before {
        display:none
    }
}

.solution .js-solution-slider .item .inner {
    height: 100%
}

.solution .js-solution-slider .item .image {
    position: relative;
    height: 29rem;
    overflow: hidden
}

@media screen and (max-width: 1400px) {
    .solution .js-solution-slider .item .image {
        height:20.6995003569vw
    }
}

@media screen and (max-width: 767px) {
    .solution .js-solution-slider .item .image {
        height:17.5rem
    }
}

.solution .js-solution-slider .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.solution .js-solution-slider .item .image .cat {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    padding: .7rem 1rem;
    font-size: 1.2rem;
    min-width: 11rem;
    text-align: center;
    line-height: 1;
    color: #fff;
    background-color: #064778
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item .image .cat {
        padding:.4rem 1rem;
        min-width: 8rem
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .solution .js-solution-slider .item .image a:hover img {
        transform:scale(1.1)
    }
}

.solution .js-solution-slider .item .txtBox {
    padding: 2.5rem 2.5rem 0 0
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item .txtBox {
        padding:2rem 2rem 0 0
    }
}

.solution .js-solution-slider .item .txtBox .ttl {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item .txtBox .ttl {
        font-size:1.4rem
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .solution .js-solution-slider .item .txtBox .ttl a:hover {
        color:#064778
    }
}

.solution .js-solution-slider .item .txtBox .tag {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.solution .js-solution-slider .item .txtBox .tag li {
    font-size: 1.3rem;
    color: #064778;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item .txtBox .tag li {
        font-size:1.1rem
    }
}

.solution .js-solution-slider .item .txtBox .txt {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 2
}

@media screen and (max-width: 1024px) {
    .solution .js-solution-slider .item .txtBox .txt {
        margin-top:1.5rem;
        font-size: 1.2rem
    }
}

.service {
    position: relative;
    padding: 14rem 0 0;
    z-index: 3;
    background-color: #fff
}

@media screen and (max-width: 1024px) {
    .service {
        padding:5rem 0 0
    }
}

.service__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .service__inner {
        padding:0 2rem
    }
}

.service__ttl01 {
    position: relative;
    z-index: 2
}

.service__menu {
    display: flex;
    margin-top: 6rem
}

@media screen and (max-width: 1024px) {
    .service__menu {
        margin-top:4.6rem
    }
}

.service__menu li {
    flex: 1
}

.service__menu li a {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 2px solid rgba(0,0,0,0);
    height: 10.5rem
}

@media screen and (max-width: 767px) {
    .service__menu li a {
        text-align:center;
        justify-content: center;
        height: 100%;
        height: 12.6rem
    }
}

.service__menu li a.list01 {
    padding-left: 9.2rem
}

@media screen and (max-width: 1400px) {
    .service__menu li a.list01 {
        padding-left:5.710206995vw
    }
}

@media screen and (max-width: 1024px) {
    .service__menu li a.list01 {
        padding-left:7.8048780488vw
    }
}

@media screen and (max-width: 767px) {
    .service__menu li a.list01 {
        padding-left:0
    }
}

.service__menu li a.list02 {
    padding-left: 8rem
}

@media screen and (max-width: 1400px) {
    .service__menu li a.list02 {
        padding-left:5.710206995vw
    }
}

@media screen and (max-width: 1024px) {
    .service__menu li a.list02 {
        padding-left:7.8048780488vw
    }
}

@media screen and (max-width: 767px) {
    .service__menu li a.list02 {
        padding-left:0
    }
}

.service__menu li a.list03 {
    padding-left: 7.3rem
}

@media screen and (max-width: 767px) {
    .service__menu li a.list03 {
        padding-left:0
    }
}

.service__menu li a .ico {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    left: 0;
    display: block
}

.service__menu li a .ico.ico01 {
    left: 3.4rem;
    width: 3.6rem
}

@media screen and (max-width: 1400px) {
    .service__menu li a .ico.ico01 {
        left:1.4275517488vw
    }
}

@media screen and (max-width: 1024px) {
    .service__menu li a .ico.ico01 {
        left:1.9512195122vw
    }
}

@media screen and (max-width: 767px) {
    .service__menu li a .ico.ico01 {
        top:2.6rem;
        bottom: auto;
        left: auto;
        right: 50%;
        transform: translateX(50%);
        width: 2.8rem
    }
}

.service__menu li a .ico.ico01 svg {
    fill: #999
}

.service__menu li a .ico.ico02 {
    left: 3.4rem;
    width: 3.1rem
}

@media screen and (max-width: 1400px) {
    .service__menu li a .ico.ico02 {
        left:2.4268379729vw
    }
}

@media screen and (max-width: 1024px) {
    .service__menu li a .ico.ico02 {
        left:3.3170731707vw
    }
}

@media screen and (max-width: 767px) {
    .service__menu li a .ico.ico02 {
        top:2.6rem;
        bottom: auto;
        left: auto;
        right: 50%;
        transform: translateX(50%);
        width: 2.4rem
    }
}

.service__menu li a .ico.ico02 svg {
    fill: #999
}

.service__menu li a .ico.ico03 {
    left: 2.5rem;
    width: 3.1rem
}

@media screen and (max-width: 767px) {
    .service__menu li a .ico.ico03 {
        top:2.6rem;
        bottom: auto;
        left: auto;
        right: 50%;
        transform: translateX(50%);
        width: 2.3rem
    }
}

.service__menu li a .ico.ico03 svg {
    stroke: #999
}

.service__menu li a .txt {
    font-size: 2rem;
    font-weight: 700
}

@media screen and (max-width: 1024px) {
    .service__menu li a .txt {
        font-size:1.4rem
    }
}

@media screen and (max-width: 767px) {
    .service__menu li a .txt {
        display:block;
        padding-top: 3rem;
        line-height: 1.55
    }
}

.service__menu li a.current {
    border-color: #3895c7;
    background-color: #f8f8f8
}

.service__menu li a.current .ico.ico01 svg {
    fill: #3895c7
}

.service__menu li a.current .ico.ico02 svg {
    fill: #3895c7
}

.service__menu li a.current .ico.ico03 svg {
    stroke: #3895c7
}

.service__slider {
    position: relative
}

.service__slider .item {
    position: relative;
    height: auto
}

.service__slider .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1*(100vw - 100%)/2);
    width: calc(100% + (100vw - 100%)/2);
    height: 100%;
    background: linear-gradient(to right, #2B73A2 0, #063F78 100%)
}

@media screen and (max-width: 767px) {
    .service__slider .item::before {
        left:-2rem;
        width: calc(100% + 4rem)
    }
}

.service__slider .item .sliderInner {
    position: relative;
    margin-top: 1rem;
    height: 100%
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner {
        margin-top:0
    }
}

.service__slider .item .sliderInner .txtBox {
    width: 50%;
    min-height: 59rem;
    padding: 9rem 8rem 16rem 0
}

@media screen and (max-width: 1400px) {
    .service__slider .item .sliderInner .txtBox {
        padding-right:2.8551034975vw
    }
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox {
        padding:6rem 8rem 16rem 0;
        min-height: auto
    }
}

@media screen and (max-width: 767px) {
    .service__slider .item .sliderInner .txtBox {
        width:100%;
        padding: 5rem 0 70.6666666667vw
    }
}

.service__slider .item .sliderInner .txtBox .ttl {
    position: relative;
    padding-left: 11rem
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl {
        padding-left:8rem
    }
}

.service__slider .item .sliderInner .txtBox .ttl .ico {
    position: absolute;
    top: 0
}

.service__slider .item .sliderInner .txtBox .ttl .ico.ico01 {
    left: 1rem;
    width: 7.1rem
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl .ico.ico01 {
        top:-0.4rem;
        width: 4.9rem
    }
}

.service__slider .item .sliderInner .txtBox .ttl .ico.ico02 {
    top: .4rem;
    left: 1rem;
    width: 7.5rem
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl .ico.ico02 {
        top:.1rem;
        width: 4.9rem
    }
}

.service__slider .item .sliderInner .txtBox .ttl .ico.ico03 {
    left: 1rem;
    width: 7.5rem
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl .ico.ico03 {
        top:-0.4rem;
        width: 4.9rem
    }
}

.service__slider .item .sliderInner .txtBox .ttl .jpn {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap
}

@media screen and (max-width: 1400px) {
    .service__slider .item .sliderInner .txtBox .ttl .jpn {
        font-size:2.8rem
    }
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl .jpn {
        font-size:2rem;
        margin-bottom: -0.9rem
    }
}

.service__slider .item .sliderInner .txtBox .ttl .en {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Montserrat",sans-serif;
    color: #accfeb;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .ttl .en {
        font-size:1rem
    }
}

.service__slider .item .sliderInner .txtBox .txt {
    margin-top: 5rem;
    font-size: 1.6rem;
    color: #fff;
    line-height: 2
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .txtBox .txt {
        margin-top:4rem;
        font-size: 1.3rem
    }
}

.service__slider .item .sliderInner .imageBox {
    position: absolute;
    top: 8rem;
    left: 50%;
    max-width: 80rem;
    width: calc(50% + (100vw - 100%)/2);
    z-index: 2
}

@media screen and (max-width: 1024px) {
    .service__slider .item .sliderInner .imageBox {
        top:auto;
        bottom: 50%;
        transform: translateY(50%)
    }
}

@media screen and (max-width: 767px) {
    .service__slider .item .sliderInner .imageBox {
        left:0;
        bottom: -12.8vw;
        transform: none;
        width: calc(100% + 2rem)
    }

    .service__slider .item .sliderInner .imageBox .image {
        width: 100%;
        height: 58.6666666667vw
    }

    .service__slider .item .sliderInner .imageBox .image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

@media print,screen and (min-width: 768px) {
    .service__slider .service-btn {
        position:absolute;
        left: 0;
        bottom: 6rem;
        width: 50%
    }
}

.service__slider .service-prev {
    position: absolute;
    left: 0;
    bottom: 0;
    border: 1px solid #e3e3e3;
    width: 6.3rem;
    height: 6.3rem;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 767px) {
    .service__slider .service-prev {
        bottom:53.3333333333vw;
        width: 4rem;
        height: 4rem;
        background-color: #fff
    }
}

.service__slider .service-prev .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(180deg);
    display: block;
    width: .6rem;
    height: 1.2rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 767px) {
    .service__slider .service-prev .ico {
        width:.4rem;
        height: .8rem
    }
}

.service__slider .service-prev .ico svg {
    stroke: #fff;
    stroke-width: 2
}

@media screen and (max-width: 767px) {
    .service__slider .service-prev .ico svg {
        stroke:#1c6bbb;
        stroke-width: 3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .service__slider .service-prev:hover .ico {
        right:calc(50% + .5rem)
    }
}

.service__slider .service-next {
    position: absolute;
    right: 8rem;
    bottom: 0;
    border: 1px solid #e3e3e3;
    width: 6.3rem;
    height: 6.3rem;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 767px) {
    .service__slider .service-next {
        right:0;
        bottom: 53.3333333333vw;
        width: 4rem;
        height: 4rem;
        background-color: #fff
    }
}

.service__slider .service-next .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    display: block;
    width: .6rem;
    height: 1.2rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 767px) {
    .service__slider .service-next .ico {
        width:.4rem;
        height: .8rem
    }
}

.service__slider .service-next .ico svg {
    stroke: #fff;
    stroke-width: 2
}

@media screen and (max-width: 767px) {
    .service__slider .service-next .ico svg {
        stroke:#1c6bbb;
        stroke-width: 3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .service__slider .service-next:hover .ico {
        right:calc(50% - .5rem)
    }
}

.service__slider .service-pagination {
    position: absolute;
    bottom: 8.6rem;
    left: 0;
    width: 50%;
    z-index: 100;
    text-align: center;
    line-height: 1;
    padding-right: 8rem
}

@media screen and (max-width: 767px) {
    .service__slider .service-pagination {
        padding-right:0;
        width: 100%;
        bottom: 57.8666666667vw
    }
}

.service__slider .service-pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    border-radius: 0;
    background-color: rgba(197,227,255,.37);
    margin: 0 1.5rem
}

@media screen and (max-width: 767px) {
    .service__slider .service-pagination .swiper-pagination-bullet {
        width:.7rem;
        height: .7rem;
        margin: 0 1rem
    }
}

.service__slider .service-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #c5e3ff
}

.industries {
    position: relative;
    padding: 14rem 0 15rem;
    background-color: #fff;
    z-index: 2
}

@media screen and (max-width: 1024px) {
    .industries {
        padding:5rem 0 3.6rem
    }
}

.industries__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .industries__inner {
        padding:0 2rem
    }
}

.industries__ttl01 {
    position: relative;
    z-index: 2
}

.industries__txt01 {
    margin-top: 3.5rem
}

.industries__list {
    margin-top: 7rem;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #e3e3e3;
    gap: 4rem 0
}

@media screen and (max-width: 1024px) {
    .industries__list {
        margin-top:4rem;
        gap: 0
    }
}

.industries__list li {
    width: 33.3333333333%
}

@media screen and (max-width: 1024px) {
    .industries__list li {
        width:50%
    }
}

.industries__list li a {
    display: block
}

.industries__list li a .image {
    display: block;
    width: 100%;
    border-right: 1px solid #e3e3e3;
    overflow: hidden
}

.industries__list li a .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.industries__list li a .txtBox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 1.7rem;
    height: 8rem;
    padding: 0 8.5rem 0 2rem
}

@media screen and (max-width: 1024px) {
    .industries__list li a .txtBox {
        padding:0 8.5rem 0 1rem;
        height: 7rem
    }
}

@media screen and (max-width: 767px) {
    .industries__list li a .txtBox {
        padding:0 8.5rem 0 0;
        gap: 0 1rem
    }
}

.industries__list li a .txtBox .jpn {
    font-size: 2rem;
    font-weight: 700
}

@media screen and (max-width: 1024px) {
    .industries__list li a .txtBox .jpn {
        font-size:1.4rem
    }
}

@media screen and (max-width: 767px) {
    .industries__list li a .txtBox .jpn {
        white-space:nowrap
    }
}

.industries__list li a .txtBox .en {
    font-size: 1rem;
    font-weight: 500;
    font-family: "Montserrat",sans-serif;
    letter-spacing: .08em;
    color: #3895c7;
    line-height: 1.3
}

@media screen and (max-width: 1024px) {
    .industries__list li a .txtBox .en {
        letter-spacing:0
    }
}

.industries__list li a .txtBox .ico {
    position: absolute;
    bottom: 50%;
    right: 1.7rem;
    transform: translateY(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.7rem;
    height: 4.7rem;
    border-radius: 100vh;
    border: 1px solid #064778
}

@media screen and (max-width: 1024px) {
    .industries__list li a .txtBox .ico {
        width:3.5rem;
        height: 3.5rem;
        right: 1.5rem
    }
}

.industries__list li a .txtBox .ico svg {
    fill: #064778;
    stroke: #064778;
    width: 1.3rem;
    height: 1rem
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .industries__list li a:hover .image img {
        transform:scale(1.1)
    }
}

@media screen and (max-width: 1024px) {
    .industries__list li:nth-child(odd) a .txtBox {
        padding-right:5.5rem
    }
}

@media screen and (max-width: 1024px) {
    .industries__list li:nth-child(odd) a .txtBox .ico {
        right:1.5rem
    }
}

@media screen and (max-width: 1024px) {
    .industries__list li:nth-child(even) a .txtBox {
        padding-right:0
    }
}

@media screen and (max-width: 1024px) {
    .industries__list li:nth-child(even) a .txtBox .ico {
        right:0
    }
}

.modal-industries {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    z-index: 10000;
    background-color: rgba(18,38,54,.83);
    display: none
}

.modal-industries .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.modal-industries .modal-outer {
    position: relative;
    padding: 2rem 8rem;
    max-width: 112rem;
    width: 100%;
    margin: 0 auto
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer {
        padding:2rem 2rem
    }
}

.modal-industries .modal-outer .modal-close01 {
    position: absolute;
    top: 4rem;
    right: 10rem;
    font-size: 0;
    width: 5.3rem;
    height: 5.3rem;
    z-index: 10
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-close01 {
        top:4rem;
        right: 4rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-close01 {
        top:3.2rem;
        right: 2rem;
        width: 4rem;
        height: 4rem
    }
}

.modal-industries .modal-outer .modal-close01 a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 100vh;
    background-color: #064778
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .modal-industries .modal-outer .modal-close01 a:hover {
        opacity:.6
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-close01 a {
        background-color:rgba(0,0,0,0)
    }
}

.modal-industries .modal-outer .modal-close01 a span {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-close01 a span {
        width:1.8rem;
        height: 1.8rem
    }
}

.modal-industries .modal-outer .modal-close01 a span::before {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(45deg);
    width: 100%;
    height: 1px;
    background-color: #fff
}

.modal-industries .modal-outer .modal-close01 a span::after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(-45deg);
    width: 100%;
    height: 1px;
    background-color: #fff
}

.modal-industries .modal-outer .modal-close02 {
    position: absolute;
    bottom: 2rem;
    left: 0;
    font-size: 1.6rem;
    font-family: "Montserrat",sans-serif;
    width: 100%;
    height: 8.5rem;
    z-index: 10
}

.modal-industries .modal-outer .modal-close02 a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #000
}

.modal-industries .modal-outer .modal-close02 a span {
    position: relative;
    display: inline-block;
    padding-left: 4.5rem
}

.modal-industries .modal-outer .modal-close02 a span::before {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 0;
    transform: translate(0, 50%) rotate(45deg);
    width: 3.5rem;
    height: 1px;
    background-color: #000
}

.modal-industries .modal-outer .modal-close02 a span::after {
    content: "";
    position: absolute;
    bottom: 50%;
    left: 0;
    transform: translate(0, 50%) rotate(-45deg);
    width: 3.5rem;
    height: 1px;
    background-color: #000
}

.modal-industries .modal-outer .modal-inner {
    padding: 0;
    background-color: #f7f7f8;
    z-index: 10
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider {
    position: relative
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev {
    position: fixed;
    bottom: 50%;
    right: calc(50% + 48rem + .5rem);
    transform: translate(50%, 50%);
    width: 6.3rem;
    height: 6.3rem;
    border-radius: 100vh;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 3px 25px rgba(0,0,0,.11);
    cursor: pointer
}

@media screen and (max-width: 1150px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev {
        right:auto;
        left: 1.7rem
    }
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev {
        left:-0.3rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev {
        position:absolute;
        left: -1.5rem;
        top: 7.2rem;
        bottom: auto;
        right: auto;
        transform: none;
        width: 4rem;
        height: 4rem;
        border: none;
        background-color: #fff
    }
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(180deg);
    display: block;
    width: .6rem;
    height: 1.2rem;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev .ico {
        width:.4rem;
        height: .8rem
    }
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev .ico svg {
    stroke: #1c6bbb;
    stroke-width: 2
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-prev:hover .ico {
        right:calc(50% + .5rem)
    }
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next {
    position: fixed;
    bottom: 50%;
    right: calc(50% - 48rem + 1rem);
    transform: translate(50%, 50%);
    width: 6.3rem;
    height: 6.3rem;
    border-radius: 100vh;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 3px 25px rgba(0,0,0,.11);
    cursor: pointer
}

@media screen and (max-width: 1150px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next {
        right:10.2rem
    }
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next {
        right:7.7rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next {
        position:absolute;
        left: auto;
        right: -1.5rem;
        top: 7.2rem;
        bottom: auto;
        transform: none;
        width: 4rem;
        height: 4rem;
        border: none;
        background-color: #fff;
        box-shadow: 0 3px 25px rgba(0,0,0,.11)
    }
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next .ico {
    position: absolute;
    bottom: 50%;
    right: calc(50% - 1px);
    transform: translate(50%, 50%);
    display: block;
    width: .6rem;
    height: 1.2rem;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next .ico {
        width:.4rem;
        height: .8rem
    }
}

.modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next .ico svg {
    stroke: #1c6bbb;
    stroke-width: 2
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .modal-industries .modal-outer .modal-inner .modal-industries-slider .modal-industries-next:hover .ico {
        right:calc(50% - .5rem)
    }
}

.modal-industries .modal-outer .modal-inner .js-modal-industries-slider {
    overflow: hidden;
    width: 100%
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox {
    position: relative;
    width: 100%;
    padding: 0 8rem;
    height: 19rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox {
        padding:0 1.8rem;
        height: 13rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8rem);
    height: 100%;
    background: linear-gradient(to right, #2B73A2 0, #063F78 100%)
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox::before {
        width:100%
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner {
        height:6.2rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl {
        display:flex;
        align-items: center;
        gap: 0 1.5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl .ttl01 {
    display: block;
    font-size: 3.6rem;
    font-weight: 400;
    color: #fff;
    line-height: 1
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl .ttl01 {
        font-size:2rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl .ttl01.en {
    font-family: "Montserrat",sans-serif;
    font-weight: 500
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl .ttl02 {
    margin-top: 1rem;
    display: block;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Montserrat",sans-serif;
    color: #accfeb;
    line-height: 1
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox .inner .ttl .ttl02 {
        font-size:1rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .image {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 32rem);
    height: 17rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .ttlBox .image {
        top:6.2rem;
        height: 9rem;
        width: calc(100% - 6rem)
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .ttlBox .image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea {
    padding: 3rem 8rem 8.5rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea {
        padding:3rem 2rem 8.5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .txtBox+.txtBox {
    margin-top: 3rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox {
    display: flex;
    gap: 0 2rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox {
        display:flex;
        flex-direction: column;
        gap: 2rem 0
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .txtBox {
    position: relative;
    width: calc(50% - 1rem)
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .txtBox {
        width:100%
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .txtBox .ttl01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .txtBox .ttl01 {
        position:relative
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .txtBox+.txtBox {
    margin-top: 0
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox+.txtBox {
    margin-top: 3rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01 {
    padding-top: 8.5rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01 {
        padding-top:2.5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01>li .txt {
    font-size: 1.6rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01>li .txt {
        font-size:1.4rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01>li.pt01 {
    margin-top: 4rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox .listImage01>li.pt01 {
        margin-top:0
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .rowBox+.rowBox {
    margin-top: 4rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01 {
    padding-top: 2.5rem;
    height: 100%
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01 {
        padding-top:2.5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li {
    position: relative;
    padding: 1.5rem;
    background-color: #fff;
    height: 100%
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image {
    text-align: center
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image01 {
    position: absolute;
    bottom: 2rem;
    right: 5rem
}

@media screen and (max-width: 1400px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image01 {
        bottom:2rem;
        right: 3.5688793719vw;
        width: 26.1241970021vw
    }
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image01 {
        width:33.1707317073vw
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image01 {
        position:relative;
        width: 100%;
        top: auto;
        right: auto;
        bottom: auto
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image02 {
    position: absolute;
    top: 2rem;
    right: 2rem
}

@media screen and (max-width: 1400px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image02 {
        top:2rem;
        right: 1.4275517488vw;
        width: 26.7665952891vw
    }
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image02 {
        width:36.5853658537vw
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .image02 {
        position:relative;
        width: 100%;
        top: auto;
        right: auto;
        margin: 2rem 0
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .listTxtBox {
    width: 50%
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .listTxtBox {
        width:100%
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .listTxtBox.w44p {
    width: 44%
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .listTxtBox.w44p {
        width:100%
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li .listTxtBox .txt {
        font-size:1.3rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li.a-center {
    display: flex;
    flex-direction: column;
    align-items: center
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listImage01>li.j-center {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .ttl01 {
    position: relative;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 2.15;
    padding-bottom: 1rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .ttl01 {
        font-size:2rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .ttl01::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(197,197,197,.48)
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .ttl01::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8rem;
    height: 1px;
    background-color: #3895c7
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .ttl02 {
    margin: 5rem 0 4rem;
    padding: 1.2rem 0;
    font-size: 2.6rem;
    font-weight: 700;
    color: #064778;
    text-align: center;
    border-top: 1px solid #2b73a2;
    border-bottom: 1px solid #2b73a2
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01 {
    margin-top: 2rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li {
    padding: 2rem 1.5rem;
    background-color: #fff
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li+li {
    margin-top: .5rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl {
    display: flex
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl {
        display:block
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dt {
    position: relative;
    padding-left: 1.7rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #064778;
    line-height: 1.6;
    width: 100%
}

@media print,screen and (min-width: 1025px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dt {
        width:28rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dt {
        font-size:1.4rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dt::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: .8rem;
    height: .2rem;
    background-color: #064778
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dd {
    flex: 1;
    font-size: 1.6rem;
    line-height: 1.6
}

@media screen and (max-width: 1024px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dd {
        margin-top:2rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list01>li dl dd {
        margin-top:1rem;
        font-size: 1.4rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02 {
    margin-top: 3rem;
    padding: 2rem 1.5rem 2rem 2.5rem;
    background-color: #fff;
    border-left: 2px solid #064778
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02 {
        padding:2rem 1.5rem 2rem 2rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02+.ttl01 {
    margin-top: 3rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li {
    position: relative;
    font-size: 1.6rem;
    line-height: 2.25;
    padding-left: 2.7rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li {
        padding-left:2rem;
        font-size: 1.4rem;
        line-height: 1.6
    }

    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li+li {
        margin-top: .5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li.ico-check::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 0;
    display: block;
    width: 1.4rem;
    height: 1.8rem;
    background: rgba(0,0,0,0) url("../images/top/ico_check.png") 0 0 no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li.ico-check::before {
        top:.8rem;
        width: 1rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list02>li .listDisc02 {
    margin-left: 1em
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.6;
    padding-left: 2.7rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li+li {
    margin-top: .5rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li {
        padding-left:2rem;
        font-size: 1.3rem;
        line-height: 1.6
    }

    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li+li {
        margin-top: .5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li.ico-check::before {
    content: "";
    position: absolute;
    top: .8rem;
    left: 0;
    display: block;
    width: 1.4rem;
    height: 1.8rem;
    background: rgba(0,0,0,0) url("../images/top/ico_check.png") 0 0 no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .list03>li.ico-check::before {
        top:.8rem;
        width: 1rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc>li {
    font-size: 1.6rem;
    line-height: 1.6;
    padding-left: 1em;
    text-indent: -1em
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc>li {
        font-size:1.4rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc>li small {
    font-size: 1.4rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc>li small {
        font-size:1.2rem
    }
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex01_sp>li {
        width:100% !important
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02 {
    display: flex;
    flex-wrap: wrap
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02>li {
    width: 50%;
    padding-right: 1rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02.row02 {
    position: relative
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02.row02>li:nth-child(3) {
    position: absolute;
    left: 50%;
    bottom: 0
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02.row02>li {
        width:100%
    }

    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex02.row02>li:nth-child(3) {
        position: relative;
        left: 0
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex03 {
    display: flex;
    flex-wrap: wrap
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex03>li {
    width: 33.3333333333%;
    padding-right: 1rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc.flex03>li {
        width:50%
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc02>li {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.6;
    padding-left: 1.7rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc02>li {
        font-size:1.4rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDisc02>li::before {
    content: "";
    position: absolute;
    top: .8rem;
    left: 0;
    width: .7rem;
    height: .7rem;
    background-color: #3895c7;
    border-radius: 100vh
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listTag {
    margin-top: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listTag li {
    padding: 0 1rem;
    font-size: 1.3rem;
    color: #fff;
    background-color: #064778;
    border-radius: 100vh
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 {
    margin-top: 2rem
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 {
        margin-top:1rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 li {
    position: relative;
    padding-left: 3rem;
    font-size: 1.6rem;
    line-height: 1.6
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 li {
        padding-left:2.2rem;
        font-size: 1.3rem
    }

    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 li+li {
        margin-top: .5rem
    }
}

.modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 li .num {
    position: absolute;
    top: .4rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Montserrat",sans-serif;
    color: #fff;
    background-color: #1c6bbb;
    border-radius: 100vh
}

@media screen and (max-width: 767px) {
    .modal-industries .modal-outer .modal-inner .modalBox .txtArea .listDecimal01 li .num {
        top:.2rem;
        width: 1.6rem;
        height: 1.6rem
    }
}

.features {
    position: relative;
    padding: 14rem 0 26.5rem;
    background-color: #f5f5f5;
    z-index: 2;
    overflow: hidden
}

@media screen and (max-width: 1024px) {
    .features {
        padding:5rem 0 20rem
    }
}

@media screen and (max-width: 767px) {
    .features {
        padding-bottom:9.7rem
    }
}

.features::before {
    content: "Dental Medical Sceince";
    position: absolute;
    bottom: -2.4rem;
    right: 50%;
    transform: translateX(50%);
    font-size: 17rem;
    font-weight: 600;
    font-family: "Montserrat",sans-serif;
    white-space: nowrap;
    line-height: 1;
    color: #ececef
}

@media screen and (max-width: 1024px) {
    .features::before {
        font-size:14rem
    }
}

@media screen and (max-width: 767px) {
    .features::before {
        display:none
    }
}

.features__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .features__inner {
        padding:0 2rem
    }
}

.features__ttl01 {
    position: relative;
    z-index: 2
}

.features__box {
    position: relative;
    height: 58rem;
    margin-top: 5.5rem
}

@media screen and (max-width: 1024px) {
    .features__box {
        height:45rem
    }
}

@media screen and (max-width: 767px) {
    .features__box {
        margin:0 -2rem 0;
        height: auto
    }
}

.features__menu {
    position: relative;
    left: -5.2rem;
    width: 58rem;
    height: 58rem;
    background: rgba(0,0,0,0) url("../images/top/features_menuBg.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 1400px) {
    .features__menu {
        left:-3.7116345468vw;
        width: 41.3990007138vw;
        height: 41.3990007138vw
    }
}

@media screen and (max-width: 1024px) {
    .features__menu {
        left:0
    }
}

@media screen and (max-width: 767px) {
    .features__menu {
        width:37.5rem;
        height: 24.6rem;
        background: rgba(0,0,0,0) url("../images/top/features_menuBg_sp.png") 50% 50% no-repeat;
        background-size: 100% auto;
        margin: 0 auto
    }
}

.features__menu .features-pagination {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination {
        right:50%;
        left: auto;
        top: 7.8rem;
        transform: translateX(50%);
        width: 33.6rem;
        height: 13.2rem;
        display: flex;
        flex-wrap: wrap
    }
}

.features__menu .features-pagination .swiper-pagination-bullet {
    position: absolute;
    display: block;
    width: 19.8rem;
    height: 19.8rem;
    font-size: 0;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,0) !important;
    opacity: 1 !important
}

@media screen and (max-width: 1400px) {
    .features__menu .features-pagination .swiper-pagination-bullet {
        width:14.1327623126vw;
        height: 14.1327623126vw
    }
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet {
        position:relative;
        width: 16.8rem;
        height: 6.6rem;
        display: block
    }
}

.features__menu .features-pagination .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet::before {
        top:-2rem;
        right: 50%;
        transform: translateX(50%);
        width: 20.3rem;
        height: 10.1rem;
        pointer-events: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet::after {
        top:-2rem;
        right: 50%;
        transform: translateX(50%);
        width: 20.3rem;
        height: 10.1rem;
        pointer-events: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    opacity: 0
}

.features__menu .features-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    opacity: 1
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(1) {
    top: 0;
    right: 50%;
    transform: translateX(50%)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(1) {
        right:auto;
        transform: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(1)::before {
    background: rgba(0,0,0,0) url("../images/top/features_menu01.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(1)::before {
        background:rgba(0,0,0,0) url("../images/top/features_menu01_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(1)::after {
    background: rgba(0,0,0,0) url("../images/top/features_menu01_on.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(1)::after {
        background:rgba(0,0,0,0) url("../images/top/features_menu01_on_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(2) {
    bottom: 50%;
    right: 0;
    transform: translateY(50%)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(2) {
        bottom:auto;
        transform: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(2)::before {
    background: rgba(0,0,0,0) url("../images/top/features_menu02.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(2)::before {
        background:rgba(0,0,0,0) url("../images/top/features_menu02_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(2)::after {
    background: rgba(0,0,0,0) url("../images/top/features_menu02_on.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(2)::after {
        background:rgba(0,0,0,0) url("../images/top/features_menu02_on_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(3) {
    bottom: 0;
    right: 50%;
    transform: translateX(50%)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(3) {
        right:auto;
        transform: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(3)::before {
    background: rgba(0,0,0,0) url("../images/top/features_menu03.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(3)::before {
        background:rgba(0,0,0,0) url("../images/top/features_menu03_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(3)::after {
    background: rgba(0,0,0,0) url("../images/top/features_menu03_on.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(3)::after {
        background:rgba(0,0,0,0) url("../images/top/features_menu03_on_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(4) {
    bottom: 50%;
    left: 0;
    transform: translateY(50%)
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(4) {
        bottom:auto;
        transform: none
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(4)::before {
    background: rgba(0,0,0,0) url("../images/top/features_menu04.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(4)::before {
        background:rgba(0,0,0,0) url("../images/top/features_menu04_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__menu .features-pagination .swiper-pagination-bullet:nth-child(4)::after {
    background: rgba(0,0,0,0) url("../images/top/features_menu04_on.png") 50% 50% no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 767px) {
    .features__menu .features-pagination .swiper-pagination-bullet:nth-child(4)::after {
        background:rgba(0,0,0,0) url("../images/top/features_menu04_on_sp.png") 50% 50% no-repeat;
        background-size: 100% auto
    }
}

.features__slider {
    position: absolute;
    left: 52%;
    top: 0;
    width: 145.5rem
}

@media screen and (max-width: 1024px) {
    .features__slider {
        width:141.9512195122vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider {
        position:relative;
        left: 0;
        width: 100%
    }
}

.features__slider::before {
    content: "";
    position: absolute;
    top: -1.1rem;
    left: -3.7rem;
    width: 10rem;
    height: 10rem;
    background: rgba(0,0,0,0) url("../images/top/features_item01.svg") 0 0 no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 1024px) {
    .features__slider::before {
        top:-1.0731707317vw;
        left: -3.6097560976vw;
        width: 9.756097561vw;
        height: 9.756097561vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider::before {
        top:auto;
        bottom: -9.7rem;
        left: 0;
        width: 37.5rem;
        height: 19rem;
        background: rgba(0,0,0,0) url("../images/top/features_item01_sp.png") 0 0 no-repeat;
        background-size: 100% auto
    }
}

.features__slider .js-features-slider {
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .features__slider .js-features-slider {
        width:31.5rem;
        overflow: visible;
        margin: 0 auto
    }
}

.features__slider .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48.5rem;
    height: 52rem;
    padding-right: 3rem
}

@media screen and (max-width: 1024px) {
    .features__slider .item {
        width:47.3170731707vw;
        height: auto;
        padding-right: 2.9268292683vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item {
        width:100%;
        padding: 0 1rem
    }
}

.features__slider .item .outer {
    position: relative;
    width: 100%;
    height: 52rem
}

@media screen and (max-width: 1024px) {
    .features__slider .item .outer {
        height:100%
    }
}

.features__slider .item .bg {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 100%;
    height: calc(100% - 4rem);
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .features__slider .item .bg {
        height:calc(100% - 3.9024390244vw)
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item .bg {
        height:100%
    }
}

.features__slider .item .bg .bgInner {
    position: relative;
    border-top: 2px solid #064778;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.features__slider .item .bg .bgInner::before {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right bottom, rgba(10, 169, 255, 0.29) 0, rgba(94, 126, 255, 0.29) 100%)
}

.features__slider .item .bg .bgInner::after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.features__slider .item .inner {
    position: relative;
    padding: 5rem 7rem;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 1024px) {
    .features__slider .item .inner {
        padding:5rem 4rem
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item .inner {
        padding:2.5rem 2rem
    }
}

.features__slider .item .ttl .en {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: "Montserrat",sans-serif;
    color: #3895c7
}

@media screen and (max-width: 767px) {
    .features__slider .item .ttl .en {
        display:none
    }
}

.features__slider .item .ttl .jpn {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.6
}

@media screen and (max-width: 1024px) {
    .features__slider .item .ttl .jpn {
        font-size:2rem
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item .ttl .jpn {
        font-size:1.8rem
    }
}

.features__slider .item .txt {
    margin-top: 4rem;
    font-size: 1.5rem;
    line-height: 2
}

@media screen and (max-width: 1024px) {
    .features__slider .item .txt {
        margin-top:2rem
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item .txt {
        margin-top:1rem;
        font-size: 1.3rem
    }
}

.features__slider .item .txt+.txt {
    margin-top: 2rem
}

@media screen and (max-width: 1024px) {
    .features__slider .item .txt+.txt {
        margin-top:1.9512195122vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item .txt+.txt {
        margin-top:1rem
    }
}

.features__slider .item.swiper-slide-active .bg {
    height: 100%
}

.features__slider .item.swiper-slide-active .bg .bgInner::after {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem)
}

@media screen and (max-width: 1024px) {
    .features__slider .item.swiper-slide-active .bg .bgInner::after {
        width:calc(100% - 1.9512195122vw);
        height: calc(100% - 1.9512195122vw)
    }
}

@media screen and (max-width: 767px) {
    .features__slider .item.swiper-slide-active .bg .bgInner::after {
        width:calc(100% - 1rem);
        height: calc(100% - 1rem)
    }
}

.features__slider .features-prev {
    position: absolute;
    bottom: -8rem;
    left: 0;
    width: 4.7rem;
    height: 4.7rem;
    border: 1px solid #1c6bbb;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 1024px) {
    .features__slider .features-prev {
        bottom:-7.8048780488vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider .features-prev {
        left:-1rem;
        bottom: 50%;
        width: 4rem;
        height: 4rem;
        border: none;
        background-color: #fff;
        transform: translateY(50%);
        box-shadow: 0 3px 25px rgba(0,0,0,.11)
    }
}

.features__slider .features-prev .ico {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(180deg);
    display: block;
    width: .5rem;
    height: .8rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .features__slider .features-prev .ico {
        width:.4rem;
        height: .8rem
    }
}

.features__slider .features-prev .ico svg {
    stroke: #1c6bbb;
    stroke-width: 3
}

@media screen and (max-width: 1024px) {
    .features__slider .features-prev .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .features__slider .features-prev:hover .ico {
        right:calc(50% + .5rem)
    }
}

.features__slider .features-next {
    position: absolute;
    bottom: -8rem;
    left: 8rem;
    width: 4.7rem;
    height: 4.7rem;
    border: 1px solid #1c6bbb;
    border-radius: 100vh;
    z-index: 1000;
    cursor: pointer
}

@media screen and (max-width: 1024px) {
    .features__slider .features-next {
        bottom:-7.8048780488vw
    }
}

@media screen and (max-width: 767px) {
    .features__slider .features-next {
        left:auto;
        right: -1rem;
        bottom: 50%;
        width: 4rem;
        height: 4rem;
        border: none;
        background-color: #fff;
        transform: translateY(50%);
        box-shadow: 0 3px 25px rgba(0,0,0,.11)
    }
}

.features__slider .features-next .ico {
    position: absolute;
    bottom: 50%;
    right: calc(50% - 1px);
    transform: translate(50%, 50%);
    display: block;
    width: .5rem;
    height: .8rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .features__slider .features-next .ico {
        width:.4rem;
        height: .8rem
    }
}

.features__slider .features-next .ico svg {
    stroke: #1c6bbb;
    stroke-width: 3
}

@media screen and (max-width: 1024px) {
    .features__slider .features-next .ico svg {
        stroke-width:3
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .features__slider .features-next:hover .ico {
        right:calc(50% - .5rem)
    }
}

.company {
    position: relative;
    padding: 14rem 0 0;
    z-index: 4
}

@media screen and (max-width: 1024px) {
    .company {
        padding:5rem 0 0
    }
}

.company__movie {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to right, #2B73A2 0, #063F78 100%);
    display: none
}

.company__movie::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(to right, rgb(43, 115, 162) 0, rgba(29, 95, 146, 0) 100%)
}

.company__movie .video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    -moz-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: .1
}

.company__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .company__inner {
        padding:0 2rem
    }
}

.company__ttl01 {
    position: relative;
    z-index: 2
}

.company__btn01 {
    position: relative;
    margin-top: 5rem;
    font-size: 2rem;
    font-weight: 700;
    width: 21rem;
    z-index: 5;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1400px) {
    .company__btn01 {
        margin-top:3.5688793719vw
    }
}

@media screen and (max-width: 1024px) {
    .company__btn01 {
        margin-top:3.5rem;
        width: 15rem;
        font-size: 1.5rem
    }
}

.company__btn01.hide {
    opacity: 0 !important
}

.company__btn01 a {
    display: flex;
    align-items: center;
    gap: 0 2rem;
    color: #fff
}

@media screen and (max-width: 1024px) {
    .company__btn01 a {
        gap:0 1rem
    }
}

.company__btn01 a .ico {
    position: relative;
    display: block;
    width: 4.7rem;
    height: 4.7rem;
    border: 1px solid #fff;
    border-radius: 100vh
}

@media screen and (max-width: 1024px) {
    .company__btn01 a .ico {
        width:3.5rem;
        height: 3.5rem
    }
}

.company__btn01 a .ico svg {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: .6rem;
    stroke: #fff;
    stroke-width: 2.5;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .company__btn01 a:hover .ico svg {
        right:43%
    }
}

.company__wrapper {
    position: relative;
    margin-top: -6rem
}

@media screen and (max-width: 1024px) {
    .company__wrapper {
        margin-top:-8rem
    }
}

.company__outer {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s
}

.company__outer.current {
    position: relative;
    display: block;
    z-index: 2;
    opacity: 1
}

.company__box01 {
    position: relative;
    padding: 6rem 0 18rem
}

@media screen and (max-width: 1024px) {
    .company__box01 {
        padding:12rem 0 8rem
    }
}

.company__box01 .inner {
    max-width: 90rem;
    width: 100%
}

@media screen and (max-width: 1024px) {
    .company__box01 .inner {
        max-width:100%
    }
}

.company__btnClose01 {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    font-weight: 700;
    z-index: 5
}

@media screen and (max-width: 1024px) {
    .company__btnClose01 {
        top:4.5rem;
        font-size: 1.5rem
    }
}

.company__btnClose01 a {
    display: flex;
    align-items: center;
    gap: 0 1rem;
    color: #fff
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .company__btnClose01 a:hover {
        opacity:.7
    }
}

.company__btnClose01 a .ico {
    position: relative;
    display: block;
    width: 5.3rem;
    height: 5.3rem;
    border-radius: 100vh;
    background-color: rgba(255,255,255,.11)
}

@media screen and (max-width: 1024px) {
    .company__btnClose01 a .ico {
        width:3.5rem;
        height: 3.5rem
    }
}

.company__btnClose01 a .ico::before {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(45deg);
    width: 2.5rem;
    height: 1px;
    background-color: #fff
}

@media screen and (max-width: 1024px) {
    .company__btnClose01 a .ico::before {
        width:1.6rem
    }
}

.company__btnClose01 a .ico::after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) rotate(-45deg);
    width: 2.5rem;
    height: 1px;
    background-color: #fff
}

@media screen and (max-width: 1024px) {
    .company__btnClose01 a .ico::after {
        width:1.6rem
    }
}

.company__ttl02 {
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4
}

@media screen and (max-width: 1024px) {
    .company__ttl02 {
        font-size:2rem;
        line-height: 1.5
    }
}

.company__txt01 {
    margin-top: 4.3rem;
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    line-height: 2.4
}

@media screen and (max-width: 1024px) {
    .company__txt01 {
        margin-top:4rem;
        font-size: 1.3rem;
        line-height: 2
    }
}

.company__box02 {
    position: relative;
    top: 13.2rem;
    width: 74.5rem
}

@media screen and (max-width: 1024px) {
    .company__box02 {
        top:12rem;
        width: 100%
    }
}

.company__box02::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1*(100vw - 100%)/2);
    width: calc((100vw - 100%)/2 + 74.5rem);
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 3px 60px 0px rgba(0,0,0,.1)
}

@media screen and (max-width: 1024px) {
    .company__box02::before {
        width:calc(100% + 2rem);
        left: -2rem
    }
}

.company__box02::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1*(100vw - 100%)/2);
    width: calc((100vw - 100%)/2 + 11rem);
    height: 100%;
    background-color: #f7f7f8;
    z-index: 2
}

@media screen and (max-width: 1024px) {
    .company__box02::after {
        width:9rem;
        left: -2rem
    }
}

.company__box02 .inner {
    position: relative;
    padding: 5.5rem 9.8rem 5rem .8rem;
    z-index: 3
}

@media screen and (max-width: 1024px) {
    .company__box02 .inner {
        padding:3.5rem 2rem 3.5rem 0
    }
}

.company__box02 .table {
    width: 100%
}

.company__box02 .table th {
    padding: 2rem 0;
    width: 10.2rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.86;
    border-bottom: 1px solid #1c6bbb;
    text-align: left
}

@media screen and (max-width: 1024px) {
    .company__box02 .table th {
        width:7rem;
        font-size: 1.3rem
    }
}

.company__box02 .table td {
    padding: 2rem 0 2rem 4rem;
    font-size: 1.5rem;
    line-height: 1.86;
    border-bottom: 1px solid #eee
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td {
        padding:2rem 0 2rem 2rem;
        font-size: 1.3rem
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .company__box02 .table td a:hover {
        text-decoration:underline
    }
}

.company__box02 .table td .ico {
    position: relative;
    top: .3rem;
    display: inline-block;
    margin-left: 1rem;
    width: 1.4rem
}

.company__box02 .table td .ico svg {
    fill: #dc7878
}

.company__box02 .table td .list01 li {
    display: flex
}

.company__box02 .table td .list01 li span {
    display: block
}

.company__box02 .table td .list01 li span:nth-child(1) {
    width: 11.5rem
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td .list01 li span:nth-child(1) {
        width:9.6rem
    }
}

.company__box02 .table td .list01 li span:nth-child(2) {
    flex: 1
}

.company__box02 .table td .list02 li {
    display: flex
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td .list02 li {
        display:block
    }

    .company__box02 .table td .list02 li+li {
        margin-top: 1rem
    }
}

.company__box02 .table td .list02 li span {
    display: block
}

.company__box02 .table td .list02 li span:nth-child(1) {
    width: 11.5rem
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td .list02 li span:nth-child(1) {
        width:100%;
        display: block
    }
}

.company__box02 .table td .list02 li span:nth-child(2) {
    flex: 1
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td .list02 li span:nth-child(2) {
        display:block
    }
}

.company__box02 .table td .list02 li span.image {
    padding-bottom: 1.5rem;
    width: 21.7rem
}

@media screen and (max-width: 1024px) {
    .company__box02 .table td .list02 li span.image {
        width:17.2rem
    }
}

.company__box02 .table td .list02 li span b {
    font-weight: 500
}

.company__box02 .table tr:last-child th {
    border-bottom: none
}

.company__box02 .table tr:last-child td {
    border-bottom: none
}

.recruit {
    position: relative;
    padding: 14rem 0 54rem;
    background-color: #fff;
    z-index: 2
}

@media screen and (max-width: 1024px) {
    .recruit {
        padding:12rem 0 40rem
    }
}

@media screen and (max-width: 767px) {
    .recruit {
        padding:12rem 0 37rem
    }
}

.recruit__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 14rem 13rem 0
}

@media screen and (max-width: 1024px) {
    .recruit__inner {
        padding:5rem 2rem 0
    }
}

.recruit__ttl01 {
    position: relative;
    z-index: 2
}

.recruit__image {
    position: absolute;
    top: 14rem;
    left: calc(33.3333333333% + 3rem);
    width: calc(74.6rem + (100vw - 100%)/2);
    height: 48.2rem
}

@media screen and (max-width: 1400px) {
    .recruit__image {
        height:34.4039971449vw
    }
}

@media screen and (max-width: 1024px) {
    .recruit__image {
        top:2rem;
        left: 25rem;
        width: calc(100% - 25rem);
        height: 36rem
    }
}

@media screen and (max-width: 767px) {
    .recruit__image {
        position:relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        margin-top: 4rem
    }
}

.recruit__image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.recruit__txt01 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem 0;
    margin-top: 12.5rem;
    z-index: 2
}

@media screen and (max-width: 1400px) {
    .recruit__txt01 {
        margin-top:8.9221984297vw
    }
}

@media screen and (max-width: 1024px) {
    .recruit__txt01 {
        gap:.4rem 0;
        margin: 10rem 0 0 0
    }
}

@media screen and (max-width: 767px) {
    .recruit__txt01 {
        gap:.4rem 0;
        margin: -4rem 0 0 2rem
    }
}

.recruit__txt01 .outer {
    display: block
}

.recruit__txt01 .line {
    display: inline-block
}

.recruit__txt01 .inner {
    display: inline-block;
    padding: 1.3rem 1.8rem 1.7rem 2.5rem;
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: .18em;
    border-radius: 1rem;
    background: linear-gradient(to right, #08AACB 0, #0883CB 100%);
    white-space: nowrap
}

@media screen and (max-width: 1024px) {
    .recruit__txt01 .inner {
        border-radius:.4rem;
        padding: .4rem .4rem .8rem .4rem;
        font-size: 1.8rem
    }
}

.recruit__txt01 .inner.inner01 {
    padding-right: 0
}

.recruit__btn01 {
    margin-top: 5rem;
    font-size: 2rem;
    font-weight: 700
}

@media screen and (max-width: 1400px) {
    .recruit__btn01 {
        margin-top:3.5688793719vw
    }
}

@media screen and (max-width: 1024px) {
    .recruit__btn01 {
        margin-top:2.7rem;
        font-size: 1.5rem
    }
}

.recruit__btn01 a {
    display: flex;
    align-items: center;
    gap: 0 2rem
}

@media screen and (max-width: 1024px) {
    .recruit__btn01 a {
        gap:0 1rem
    }
}

.recruit__btn01 a .ico {
    position: relative;
    display: block;
    width: 4.7rem;
    height: 4.7rem;
    border: 1px solid #064778;
    border-radius: 100vh
}

@media screen and (max-width: 1024px) {
    .recruit__btn01 a .ico {
        width:3.5rem;
        height: 3.5rem
    }
}

.recruit__btn01 a .ico svg {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: .6rem;
    stroke: #1c6bbb;
    stroke-width: 2.5;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .recruit__btn01 a .ico svg {
        width:.4rem;
        stroke-width: 3.5
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .recruit__btn01 a:hover {
        color:#064778
    }

    .is-view-pc .recruit__btn01 a:hover .ico svg {
        right: 43%
    }
}

.contact {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 4;
}


.contact__inner {
    position: relative;
    margin: 0 auto;
    max-width: 130rem;
    width: 100%;
    padding: 0 13rem
}

@media screen and (max-width: 1024px) {
    .contact__inner {
        padding:0 2rem
    }
}

.contact__btn {
    display: block
}

.contact__btn .box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2rem;
    height: 36rem
}

@media screen and (max-width: 1024px) {
    .contact__btn .box {
        height:26rem
    }
}

@media screen and (max-width: 1024px) {
    .contact__btn .box {
        height:31rem
    }
}

@media screen and (max-width: 767px) {
    .contact__btn .box {
        padding:4.3rem 2rem 0;
        display: block;
        height: 36rem
    }
}

.contact__btn .box::before {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 142rem;
    height: 100%;
    background: linear-gradient(to right, #2B73A2 0, #063F78 100%)
}

@media screen and (max-width: 1024px) {
    .contact__btn .box::before {
        width:100%
    }
}

.contact__btn .box::after {
    content: "";
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 142rem;
    height: 100%;
    background: rgba(0,0,0,0) url("../images/top/contact_img.jpg") 50% 50% no-repeat;
    background-size: cover;
    opacity: 0;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .contact__btn .box::after {
        width:100%
    }
}

.contact__btn .box .ttl {
    position: relative;
    z-index: 2;
    display: block
}

.contact__btn .box .ttl::before {
    content: "";
    position: absolute;
    top: -4rem;
    left: -4rem;
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(0,0,0,0) url("../images/top/contact_item01.svg") 0 0 no-repeat;
    background-size: 100% auto
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ttl::before {
        top:-3rem;
        left: -2rem;
        width: 3.3rem;
        height: 2.6rem;
        background: rgba(0,0,0,0) url("../images/top/contact_item01_sp.svg") 0 0 no-repeat;
        background-size: 100% auto
    }
}

.contact__btn .box .ttl .en {
    display: block;
    font-size: 4.8rem;
    font-weight: 700;
    font-family: "Montserrat",sans-serif;
    color: #fff;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ttl .en {
        font-size:2.6rem
    }
}

.contact__btn .box .ttl .en .outer {
    display: block
}

.contact__btn .box .ttl .en .line {
    display: inline-block
}

.contact__btn .box .ttl .en .inner {
    display: inline-block
}

.contact__btn .box .ttl .en .bg {
    display: inline-block;
    line-height: 1;
    white-space: nowrap
}

.contact__btn .box .ttl .jpn {
    display: block;
    margin-top: 2rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(255,255,255,.73);
    letter-spacing: .15em;
    line-height: 1
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ttl .jpn {
        margin-top:1rem;
        font-size: 1.2rem;
        letter-spacing: 0
    }
}

.contact__btn .box .ttl .jpn .outer {
    display: block
}

.contact__btn .box .ttl .jpn .line {
    display: inline-block
}

.contact__btn .box .ttl .jpn .inner {
    display: inline-block
}

.contact__btn .box .ttl .jpn .bg {
    display: inline-block;
    line-height: 1;
    white-space: nowrap
}

.contact__btn .box .txt {
    margin-top: 4rem;
    position: relative;
    z-index: 2;
    font-size: 1.6rem;
    color: rgba(255,255,255,.73);
    line-height: 2;
    display: block
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .txt {
        font-size:1.3rem
    }
}

.contact__btn .box .txt small {
    margin-top: .5rem;
    display: block;
    text-indent: -1em;
    padding-left: 1em
}

.contact__btn .box .ico {
    position: absolute;
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
    display: block;
    width: 10rem;
    height: 10rem;
    border: 1px solid #fff;
    border-radius: 100vh;
    z-index: 3
}



@media screen and (max-width: 1500px) {
    .contact__btn .box .ico {
        right:2rem
    }
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ico {
        width:7rem;
        height: 7rem
    }
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ico {
        bottom:2rem;
        right: 2rem;
        transform: none
    }
}

.contact__btn .box .ico img {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 2.6rem;
    transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1)
}

@media screen and (max-width: 1024px) {
    .contact__btn .box .ico img {
        width:1.8rem
    }
}

@media print,screen and (min-width: 768px) {
    .is-view-pc .contact__btn:hover .box::after {
        opacity:1
    }

    .is-view-pc .contact__btn:hover .box .ico img {
        right: calc(50% - .5rem)
    }
}