@-webkit-keyframes scrollLine {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(100%)
    }

    50.1% {
        transform: translateY(-100%)
    }
}

@keyframes scrollLine {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(100%)
    }

    50.1% {
        transform: translateY(-100%)
    }
}

.toscroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 1.2vw;
    text-transform: uppercase;
    text-align: center;
}

.toscroll span {
    overflow: hidden;
    display: block;
    position: relative;
    margin: 8px auto 0;
    width: 1px;
    height: 1.4vw
}

.toscroll span:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: scrollLine 2s cubic-bezier(.165,.84,.44,1) infinite;
    animation: scrollLine 2s cubic-bezier(.165,.84,.44,1) infinite
}

.toscroll.color-white {
    color: #fff
}

.toscroll.color-white span:before {
    background-color: #fff
}

.toscroll.color-black {
    color: #272727
}

.toscroll.color-black span:before {
    background-color: #272727
}

.toscroll.color-blue {
    color: #22439c
}

.toscroll.color-blue span:before {
    background-color: #22439c
}


.t-fadeIn,.t-fadeInGroup .t-fadeInItem1 {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1),opacity 1.6s cubic-bezier(.165,.84,.44,1)
}

.t-fadeInGroup .t-fadeInItem2 {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .2s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .2s
}

.t-fadeInGroup .t-fadeInItem3 {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .4s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .4s
}

.t-fadeInGroup .t-fadeInItem4 {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .6s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .6s
}

.t-fadeInGroup .t-fadeInItem5 {
    opacity: 0;
    transform: translateY(60px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .8s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .8s
}

.t-fadeInGroup .t-fadeInItem1h {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1),opacity 1.6s cubic-bezier(.165,.84,.44,1)
}

.t-fadeInGroup .t-fadeInItem2h {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .2s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .2s
}

.t-fadeInGroup .t-fadeInItem3h {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .4s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .4s
}

.t-fadeInGroup .t-fadeInItem4h {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .6s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .6s
}

.t-fadeInGroup .t-fadeInItem5h {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .8s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .8s
}

.t-fadeInGroup .t-fadeInItem1s {
    opacity: 0;
    transform: scale(1.1);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1),opacity 1.6s cubic-bezier(.165,.84,.44,1)
}

.t-fadeInGroup .t-fadeInItem2s {
    opacity: 0;
    transform: scale(1.1);
    transition: transform 1.6s cubic-bezier(.165,.84,.44,1) .2s,opacity 1.6s cubic-bezier(.165,.84,.44,1) .2s
}

.t-fadeIn.is-active,.t-fadeInGroup.is-active .t-fadeInItem1,.t-fadeInGroup.is-active .t-fadeInItem1h,.t-fadeInGroup.is-active .t-fadeInItem2,.t-fadeInGroup.is-active .t-fadeInItem2h,.t-fadeInGroup.is-active .t-fadeInItem3,.t-fadeInGroup.is-active .t-fadeInItem3h,.t-fadeInGroup.is-active .t-fadeInItem4,.t-fadeInGroup.is-active .t-fadeInItem4h,.t-fadeInGroup.is-active .t-fadeInItem5,.t-fadeInGroup.is-active .t-fadeInItem5h {
    opacity: 1;
    transform: translateY(0)
}

.t-fadeInGroup.is-active .t-fadeInItem1s {
    opacity: 1;
    transform: scale(1)
}

.c-button {
    position: relative;
    z-index: 5;
    display: inline-block;
    padding-right: 94px;
    font-size: 2.4rem;
    text-align: left;
    /*font-family: Gelasio,"Noto Serif SC",serif;*/
    text-decoration: none;
}

.c-button .arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -3px;
    width: 58px;
    height: 6px
}

.c-button .arrow:after,.c-button .arrow:before {
    content: "";
    position: absolute
}

.c-button .arrow:before {
    right: -14px;
    margin-top: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: -1
}

.c-button .arrow:after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0
}

.c-button.min {
    padding-right: 54px;padding-right: 3vw;
    font-size: 1.3vw;
}

.c-button.min .arrow {
    right: 8px; right: 0.47vw;
    margin-top: -2px; margin-top: -0.1175vw;
    width: 38px; width: 2.226vw;
    height: 4px; height: 0.235vw;
}

.c-button.min .arrow:before {
    right: -8px;right: -0.47vw;
    margin-top: -11px;margin-top: -0.66vw;
    width: 26px;width: 1.5275vw;
    height: 26px;height: 1.5275vw;
}

.c-button.min.color-black .arrow {
    background: url(../images/3dspace/icon_arrowright-black-min.png) no-repeat 100% 100%;
    background-size: 38px 4px;background-size: 100%;
}

.c-button.min.color-black .arrow:after,.c-button.min.color-white .arrow {
    background: url(../images/3dspace/icon_arrowright-white-min.png) no-repeat 100% 100%;
    background-size: 38px 4px;background-size: 100%;
}

.c-button.min.color-white .arrow:after {
    background: url(../images/3dspace/icon_arrowright-black-min.png) no-repeat 100% 100%;
    background-size: 38px 4px;background-size: 100%;
}

.c-button.min.color-blue .arrow {
    background: url(../images/3dspace/icon_arrowright-blue-min.png) no-repeat 100% 100%;
    background-size: 38px 4px;background-size: 100%;
}

.c-button.min.color-blue .arrow:after {
    background: url(../images/3dspace/icon_arrowright-white-min.png) no-repeat 100% 100%;
    background-size: 38px 4px;background-size: 100%;
}

.c-button.color-black {
    color: #272727
}

.c-button.color-black .arrow {
    background: url(../images/3dspace/icon_arrowright-black.png) no-repeat 100% 100%;
    background-size: 68px 6px
}

.c-button.color-black .arrow:before {
    border: 1px solid #272727
}

.c-button.color-black .arrow:after {
    background: url(../images/3dspace/icon_arrowright-white.png) no-repeat 100% 100%;
    background-size: 68px 6px
}

.c-button.color-white {
    color: #fff
}

.c-button.color-white .arrow {
    background: url(../images/3dspace/icon_arrowright-white.png) no-repeat 100% 100%;
    background-size: 68px 6px
}

.c-button.color-white .arrow:before {
    border: 1px solid #fff
}

.c-button.color-white .arrow:after {
    background: url(../images/3dspace/icon_arrowright-black.png) no-repeat 100% 100%;
    background-size: 68px 6px
}

.c-button.color-blue {
    color: #22439c
}

.c-button.color-blue .arrow {
    background: url(../images/3dspace/icon_arrowright-blue.png) no-repeat 100% 100%;
    background-size: 68px 6px
}

.c-button.color-blue .arrow:before {
    border: 1px solid #13449d
}

.c-button.color-blue .arrow:after {
    background: url(../images/3dspace/icon_arrowright-white.png) no-repeat 100% 100%;
    background-size: 68px 6px
}




.kv{
    position: relative;height: 100vh;margin-bottom: 3vw;margin-bottom: 10vw;
}

.kv .logo{ 
    position: absolute;
    width: 13vw;height: auto; background-color: transparent;
    transform: translateX(-50%);
    left: 50%;
    top: 3%;
}
.kv .title{
    font-size: 4vw; 
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    text-align: center;
    width: 100%;
} 
.kv .txt{
    font-size: 1.8vw;
    transform: translate(-50%,39%);
    position: absolute;
    top: 50%;
    line-height: 1.8;
    left: 50%;
    color: #fff;
    text-align: center;
    width: 100%;
} 
.kv .title,
.kv .txt{
    text-shadow: 0px 0px 0px #000, 0px 0px 0px #000, 2px 2px 4px #000, 0px 0px 0px #000;
}
.kv .bg{
    width: 100%;height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    max-width: none;
    vertical-align: bottom;
} 
.kv .bg.view-pc{
    display:inline;
}
.kv .bg.view-sp{
    display:none;
}

@media screen and (max-width:520px) {


    .kv .bg.view-pc{
        display:none;
    }
    .kv .bg.view-sp{
        display:inline;
    }
    .kv .bg img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        max-width: none;
        vertical-align: bottom;
    }
}


.contents {
    max-width: 84vw;
    margin: 0 auto;
    padding-bottom: 0px
}

.contents .unit {
    margin-bottom: 10vw;
    display: flex;
    justify-content: space-between
}

.contents .unit:last-of-type {
    /*margin-bottom: 340px*/
}

.contents .unit.reverse {
    flex-direction: row-reverse
}

.contents .unit.reverse .img .sub{
    right: auto;
    left: -60px
}

.contents .unit.reverse .txt {
    padding: 0vw 2vw 0 2vw
}

.contents .unit .img {
    width: 65%;
    position: relative
}

.contents .unit .img img {
    vertical-align: bottom
}

.contents .unit .img .main,
.contents .unit .img .sub {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(19,68,157,.2)
}
.contents .unit .img .main{
    width: 100%;
}
.contents .unit .img .sub {
    width: 50%;
    position: absolute;
    bottom: -32%;
    right: -9%;
}

.contents .unit .img .sub.top {
    bottom: auto;
    top: -85px
}

.contents .unit .txt {
    width: 45%;
    padding: 1.2vw 2.0vw 0 2.0vw;
    position: relative;
    z-index: 2
}

.contents .unit .txt .sub {
    font-size: 1vw;
    margin-bottom: 1vw
}

.contents .unit .txt h1 {
    font-size: 2vw;
    line-height: 1.1;
    margin-bottom: 1vw;
}
.contents .unit .txt h1 .sub-t-fadeInItem2{
    font-size: 1.2vw;
}
@media screen and (max-width:520px) {
    .contents .unit .txt h1 .sub-t-fadeInItem2{
        font-size: 3.4vw;
    }
}
.contents .unit .txt .description {
    line-height: 1.5;
    margin-bottom: 0.7vw;font-size: 1.2vw;line-height: 2.0;
}
.contents .unit .txt .description .regAlign{
    font-size: 1vw;
}
.contents .unit .txt .note {
    font-size: 0.8vw;
    margin-bottom: 2.8vw;
}

.contents .banner a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px
} 

.contents .banner a img {
    transition: all .4s ease;
    vertical-align: bottom;
    max-width: none;
    width: 100%
}

.contents .banner a .txt {
    position: absolute;
    bottom: 80px;
    left: 50px
}

.contents .unit .txt .intro {
    font-size: 2.6vw;
    font-weight: bold;
    margin-bottom: 1vw;
    display: inline-block;
    color: #22439c;
    padding: 0vw 0vw;
}
.contents .banner a .txt .sub {
    font-size: 1.8rem;
    margin-bottom: 10px
}

.contents .banner a .txt .main {
    font-size: 5rem;
    margin-bottom: 10px;
    line-height: 1.1
}

.contents .banner a .txt .sub2 {
    font-size: 2.4rem;
    margin-bottom: 25px;
    line-height: 1.1
}

.banner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0vw;
}
.banner .banner-item{
    width: 49%;width: 33%;
}

@media screen and (max-width:520px) {
    .banner{
        flex-direction: column;
    }
    .banner .banner-item{
        width: 100%;
    }
}

@media screen and (max-width:1455px) {
    .toscroll {
        width: 5.46075vw;
        /*margin-left: -2.73038vw;*/
        font-size: .95563vw
    }

    .toscroll span {
        margin: .54608vw auto 0;
        height: 1.50171vw
    }
    .c-button {
        padding-right: 6.41638vw;
        font-size: 1.63823vw
    }

    .c-button .arrow {
        right: .95563vw;
        margin-top: -.20478vw;
        width: 3.95904vw;
        height: .40956vw
    }

    .c-button .arrow:before {
        right: -.95563vw;
        margin-top: -1.09215vw;
        width: 2.73038vw;
        height: 2.73038vw
    }

    .c-button.min {
        padding-right: 3.68601vw;
        font-size: .95563vw;font-size: 1.2vw;
    }

    .c-button.min .arrow {
        right: .54608vw;
        margin-top: -.10239vw;
        width: 2.59386vw;
        height: .27304vw
    }

    .c-button.min .arrow:before {
        right: -.54608vw;
        margin-top: -.75085vw;
        width: 1.77474vw;
        height: 1.77474vw
    }

    .c-button.min.color-black .arrow {
        background: url(../images/3dspace/icon_arrowright-black-min.png) no-repeat 100% 100%;
        background-size: 2.59386vw .27304vw
    }

    .c-button.min.color-black .arrow:after,.c-button.min.color-white .arrow {
        background: url(../images/3dspace/icon_arrowright-white-min.png) no-repeat 100% 100%;
        background-size: 2.59386vw .27304vw
    }

    .c-button.min.color-white .arrow:after {
        background: url(../images/3dspace/icon_arrowright-black-min.png) no-repeat 100% 100%;
        background-size: 2.59386vw .27304vw
    }

    .c-button.min.color-blue .arrow {
        background: url(../images/3dspace/icon_arrowright-blue-min.png) no-repeat 100% 100%;
        background-size: 2.59386vw .27304vw
    }

    .c-button.min.color-blue .arrow:after {
        background: url(../images/3dspace/icon_arrowright-white-min.png) no-repeat 100% 100%;
        background-size: 2.59386vw .27304vw
    }

    .c-button.color-black .arrow {
        background: url(../images/3dspace/icon_arrowright-black.png) no-repeat 100% 100%;
        background-size: 4.64164vw .40956vw
    }

    .c-button.color-black .arrow:before {
        border: .06826vw solid #272727
    }

    .c-button.color-black .arrow:after,.c-button.color-white .arrow {
        background: url(../images/3dspace/icon_arrowright-white.png) no-repeat 100% 100%;
        background-size: 4.64164vw .40956vw
    }

    .c-button.color-white .arrow:before {
        border: .06826vw solid #fff
    }

    .c-button.color-white .arrow:after {
        background: url(../images/3dspace/icon_arrowright-black.png) no-repeat 100% 100%;
        background-size: 4.64164vw .40956vw
    }

    .c-button.color-blue .arrow {
        background: url(../images/3dspace/icon_arrowright-blue.png) no-repeat 100% 100%;
        background-size: 4.64164vw .40956vw
    }

    .c-button.color-blue .arrow:before {
        border: .06826vw solid #13449d
    }

    .c-button.color-blue .arrow:after {
        background: url(../images/3dspace/icon_arrowright-white.png) no-repeat 100% 100%;
        background-size: 4.64164vw .40956vw
    }

}
@media screen and (max-width:520px) { 
    .toscroll {
        width: 22.66667vw;
        margin-left: -11.33333vw;margin-left:auto;
        font-size: 3.2vw
    }

    .toscroll span {
        margin: 1.33333vw auto 0;
        height: 4vw
    }

    .t-fadeIn {
        opacity: 0;
        transform: translateY(60px);
        transition: transform 1.6s cubic-bezier(.165,.84,.44,1),opacity 1.6s cubic-bezier(.165,.84,.44,1)
    }

    .t-fadeInGroup .t-fadeInItem1,.t-fadeInGroup .t-fadeInItem2,.t-fadeInGroup .t-fadeInItem3,.t-fadeInGroup .t-fadeInItem4,.t-fadeInGroup .t-fadeInItem5 {
        transform: translateY(30px)
    }

    .t-fadeInGroup .t-fadeInItem1h,.t-fadeInGroup .t-fadeInItem2h,.t-fadeInGroup .t-fadeInItem3h,.t-fadeInGroup .t-fadeInItem4h,.t-fadeInGroup .t-fadeInItem5h {
        transform: translateY(15px)
    }

    .c-button .arrow,.c-button .arrow:after,.c-button .arrow:before {
        transition: all .8s
    }

    .c-button:hover .arrow:before {
        border: 1px solid transparent;
        transform: scale(2.6);
        opacity: .4
    }

    .c-button:hover .arrow:after {
        opacity: 1
    }

    .c-button:hover.color-black .arrow:before {
        background-color: #272727
    }

    .c-button:hover.color-white .arrow:before {
        background-color: #fff
    }

    .c-button:hover.color-blue .arrow:before {
        background-color: #13449d
    }

    .kv .title{ 
        font-size: 9.06667vw;
        transform: translateY(-50%);
        top: 50%;
        left: 0;
        text-align: left;
        padding: 0 8vw;
    }
    .kv .txt{
        font-size: 3.4vw;
    }
    .contents {
        max-width: none;
        padding: 0 8vw 24vw;padding: 0 8vw 12vw;
    }

    .contents .unit {
        display: block
    }

    .contents .unit,.contents .unit:last-of-type {
        margin-bottom: 23.33333vw
    }

    .contents .unit.reverse {
        flex-direction: row-reverse
    }

    .contents .unit.reverse .img .sub {
        right: auto;
        left: 0
    }

    .contents .unit.reverse .txt {
        padding: 0
    }

    .contents .unit .img {
        width: 100%;
        margin-bottom: 30vw;    margin-bottom: 10vw;
    }

    .contents .unit .img .main {
        border-radius: 1.06667vw;
        box-shadow: 0 1.06667vw 2.13333vw rgba(19,68,157,.2);
        margin-left: 9.33333vw;
        width: calc(100% - 9.33333vw)
    }

    .contents .unit .img .main.left {
        margin-left: 9.33333vw
    }

    .contents .unit .img .main.right {
        margin-left: 0;
        margin-right: 9.33333vw
    }

    .contents .unit .img .sub {
        width: 44.66667vw;
        position: absolute;
        bottom: -23.33333vw;
        right: auto;
        left: 0;
        overflow: hidden;
        border-radius: 1.06667vw;
        box-shadow: 0 1.06667vw 2.13333vw rgba(19,68,157,.2)
    }

    .contents .unit .img .sub.top {
        bottom: -18.4vw;
        top: auto
    }

    .contents .unit .img .sub.right {
        left: auto;
        right: 0
    }

    .contents .unit .img .sub.left {
        left: 0;
        right: auto
    }

    .contents .unit .txt {
        width: 100%;
        padding: 0
    }
    .contents .unit .txt .intro{
        font-size: 9vw;
    }
    .contents .unit .txt .sub {
        font-size: 3.4vw;
        margin-bottom: 2.66667vw
    }

    .contents .unit .txt h1 {
        font-size: 6vw;
        line-height: 1.1;
        margin-bottom: 3.46667vw
    }

    .contents .unit .txt .description {
        line-height: 1.5;
        margin-bottom: 5.33333vw;
        font-size: 3.4vw;
    }
    .c-button.min {
        padding-right: 12.53333vw;
        font-size: 3.4vw;
    }
    .c-button.min .arrow {
        right: 1.33333vw;
        margin-top: -0.8vw;
        width: 10.13333vw;
        height: 1.06667vw;
    }
    .c-button.min.color-blue .arrow {
        background: url(../images/3dspace/icon_arrowright-blue-min.png) no-repeat 100% 100%;
        background-size: 10.13333vw 1.06667vw;
    }
    .c-button.min .arrow:before {
        right: -2.13333vw;
        margin-top: -2.4vw;
        width: 6.4vw;
        height: 6.4vw;
    }
    .c-button.color-blue .arrow:before {
        border: 0.26667vw solid #13449d;
    }
    .c-button.min.color-blue .arrow:after {
        background: url(../images/3dspace/icon_arrowright-white-min.png) no-repeat 100% 100%;
        background-size: 10.13333vw 1.06667vw;
    }
}

@media screen and (min-width:521px) and (max-width:1455px) {
    .c-button:hover .arrow:before {
        border: .06826vw solid transparent
    }
}

@media screen and (min-width:521px) { 
    .c-button .arrow,.c-button .arrow:after,.c-button .arrow:before {
        transition: all .8s
    }

    .c-button:hover .arrow:before {
        border: 1px solid transparent;
        transform: scale(2.6);
        opacity: .4
    }

    .c-button:hover .arrow:after {
        opacity: 1
    }

    .c-button:hover.color-black .arrow:before {
        background-color: #272727
    }

    .c-button:hover.color-white .arrow:before {
        background-color: #fff
    }

    .c-button:hover.color-blue .arrow:before {
        background-color: #13449d
    }

    .contents .banner a:hover img {
        transform: scale(1.08)
    }
}
sub {

    font-size: 1.6vw;
}
sub1 {

    font-size: 0.6vw;
}
@media screen and (min-width:521px) and (max-width:1455px) {
    .c-hoverImg:hover .c-button .arrow:before {
        border: .06826vw solid transparent
    }
}