@charset "UTF-8";
.js-fadeUp {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s, transform .6s;
}
.js-fadeUp.is-inview {
    opacity: 1;
    transform: translateY(0);
}
/* ===== Keyframes ===== */
@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(201.3, 95%, 24%, 1);
        --y-0: 94%;
        --x-0: 29%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-1: 60%;
        --c-1: hsla(206.9, 83%, 20%, 1);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --y-1: 24%;
        --y-2: 82%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --c-2: hsla(206.9, 83%, 20%, 1);
        --x-2: 13%;
        --x-3: 71%;
        --s-start-3: 13%;
        --s-end-3: 33%;
        --y-3: 9%;
        --c-3: hsla(195.5, 100%, 26%, 1);
        --x-4: 96%;
        --s-start-4: 13%;
        --s-end-4: 68%;
        --y-4: 94%;
        --c-4: hsla(206.9, 83%, 20%, 1);
        --x-5: 6%;
        --s-start-5: 13%;
        --s-end-5: 68%;
        --y-5: 6%;
        --c-5: hsla(206.9, 83%, 20%, 1);
    }
    100% {
        --c-0: hsla(201.3, 95%, 24%, 1);
        --y-0: 80%;
        --x-0: 75%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-1: 2%;
        --c-1: hsla(206.9, 83%, 20%, 1);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --y-1: 25%;
        --y-2: 20%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --c-2: hsla(206.9, 83%, 20%, 1);
        --x-2: 98%;
        --x-3: 44%;
        --s-start-3: 13%;
        --s-end-3: 68%;
        --y-3: 25%;
        --c-3: hsla(195.5, 100%, 26%, 1);
        --x-4: 6%;
        --s-start-4: 13%;
        --s-end-4: 68%;
        --y-4: 95%;
        --c-4: hsla(206.9, 83%, 20%, 1);
        --x-5: 96%;
        --s-start-5: 13%;
        --s-end-5: 68%;
        --y-5: 7%;
        --c-5: hsla(206.9, 83%, 20%, 1);
    }
}
/* ===== Custom Property Registration (Houdini API) ===== */
@property --c-0 { syntax: '<color>'; inherits: false; initial-value: hsla(201.3,95%,24%,1); }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 29%; }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 9%; }
@property --s-end-0 { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 60%; }
@property --c-1 { syntax: '<color>'; inherits: false; initial-value: hsla(206.9,83%,20%,1); }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-end-1 { syntax: '<percentage>'; inherits: false; initial-value: 72%; }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 24%; }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --s-start-2 { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --s-end-2 { syntax: '<percentage>'; inherits: false; initial-value: 52%; }
@property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(206.9,83%,20%,1); }
@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 13%; }
@property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 71%; }
@property --s-start-3 { syntax: '<percentage>'; inherits: false; initial-value: 13%; }
@property --s-end-3 { syntax: '<percentage>'; inherits: false; initial-value: 33%; }
@property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 9%; }
@property --c-3 { syntax: '<color>'; inherits: false; initial-value: hsla(195.5,100%,26%,1); }
@property --x-4 { syntax: '<percentage>'; inherits: false; initial-value: 96%; }
@property --s-start-4 { syntax: '<percentage>'; inherits: false; initial-value: 13%; }
@property --s-end-4 { syntax: '<percentage>'; inherits: false; initial-value: 68%; }
@property --y-4 { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --c-4 { syntax: '<color>'; inherits: false; initial-value: hsla(206.9,83%,20%,1); }
@property --x-5 { syntax: '<percentage>'; inherits: false; initial-value: 6%; }
@property --s-start-5 { syntax: '<percentage>'; inherits: false; initial-value: 13%; }
@property --s-end-5 { syntax: '<percentage>'; inherits: false; initial-value: 68%; }
@property --y-5 { syntax: '<percentage>'; inherits: false; initial-value: 6%; }
@property --c-5 { syntax: '<color>'; inherits: false; initial-value: hsla(206.9,83%,20%,1); }
/* ===== Demo Container ===== */
.hero-bg {
    background-color: hsla(206.9,83%,20%,1);
    background-image:
    radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)),
    radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)),
    radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)),
    radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)),
    radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)),
    radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5));
    animation: hero-gradient-animation 5s linear infinite alternate;
}
.features_slide_wrap {
    padding: 80px 0;
}
.splide.is-features {
    width: 100%;
}
.splide.is-features .splide_part {
    z-index: 4;
    margin-top: 48px;
}
.splide__arrows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.splide__arrow {
    font-size : 12px;
    line-height: 1;
    letter-spacing : 1.44px;
    font-weight: 600;
    color : #192d8c;
    position: relative;
}
.splide__arrow:before {
    background: #fff;
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -2px;
    margin: auto;
    transform-origin: left top;
    transform: scale(0, 1);
    transition: transform .4s;
}
.slide-counter,
.splide__pagination {
    padding: 0 12px;
    color : #192d8c;
    font-size : 12px;
    line-height: 1;
    letter-spacing : 1.44px;
    font-weight: 600;
    margin-bottom: 2px;
}
.slide-current {
    display: inline-block;
}
.slide-current.is-slash {
    padding: 0 .5em;
}
.contents-list-item.is-slide {
    margin-bottom: 0;
}
.contents-list-item.is-slide a {
    padding: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contents-list-item.is-slide .contents-card {
    display: block;
    transition: all .3s linear;
}
.contents-list-item.is-slide .contents-img {
    width: 100%;
    margin: auto 0;
    transition: all .3s linear;
}
.contents-list-item.is-slide.is-active .contents-img {
    animation: slideInImg .3s linear forwards;
}
.contents-list-item.is-slide .contents-content {
    width: 100%;
    padding: 16px 20px 0;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
}
.contents-list-item.is-slide.is-active .contents-content {
    animation: slideIn .3s linear .5s forwards;
    visibility: visible;
    max-height: 500px;
}
@keyframes slideIn {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}@keyframes slideInImg {
    0% {
        transform: translateY(60px);
    }
    100% {
        transform: translateY(0);
    }
}
.contents-list-item.is-slide .contents-content .date,
.contents-list-item.is-slide .contents-content .heading,
.contents-list-item.is-slide .contents-practice .item span {
    color: #fff;
}
.contents-list-item.is-slide .contents-content .heading {
    padding-bottom: 18px;
    margin-bottom:24px;
    border-bottom: 1px solid #fff;
}
.detail_lnk_ttl {
    font-size : 20px;
    letter-spacing : 1.6px;
    color : #141F3F;
    font-weight: 600;
}
.detail_lnk_ttl.is-ver2 {
    font-size : 18px;
    line-height : 25px;
    letter-spacing : 1.44px;
    color : #023859;
}
.c-pageTtl_wrap .ttl.is-ver2 {
    font-size: 40px;
}
@media only screen and (min-width:640px) {
    .cont_cnt {
        position: relative;
    }
    .single-heading-info {
        position: absolute;
        right: 0;
        top: 72px;
        width: -webkit-calc((100% + 10.2%) / 2);
        width: calc((100% + 10.2%) / 2);
    }
}
.single-heading-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #192d8c;
    height: 100%;
    height: 40px;
    padding: 0 38px;
    box-sizing: border-box;
}
.single-heading-category {
    width: 130px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    font-size: 12px;
    letter-spacing: 0.72px;
    color: #192d8c;
    font-weight: 600;
}
.single-heading-date {
    font-size: 12px;
    height: 21px;
    letter-spacing: 0.72px;
    color: #FFFFFF;
    font-weight: 600;
}
.ld_article-list.is-ver2 {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    margin-top: 30px;
}
.keywords_wrap {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
    margin-top: 120px;
}
.keywords_in {
    display: flex;
    padding: 64px 0 84px;
}
.keywords_ttl {
    font-size : 30px;
    line-height: 1;
    color : #142F80;
    margin-right: 50px;
}
.keywords_wrap .contents-practice .item a {
    text-decoration: none;
}
.keywords_wrap .contents-practice {
    margin-top: 0;
}
.keywords_wrap.is-ver2 {
    margin-top: 100px;
}
.keywords_wrap.is-ver2 .keywords_in {
    padding: 42px 0;
}
.keywords_wrap.is-ver2 .contents-practice + .contents-practice {
    margin-top: 42px;
}
.return_btn {
    margin-bottom: 100px;
}
.detail_public_wrap {
    margin: 120px auto;
}
.detail_public_wrap .contents-list.is-ver2 {
    margin-top: 40px;
    gap: 20px 0;
}
.detail_public_wrap .contents-list.is-ver2 .contents-list-item {
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
}
.features-detail-ttl {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.7em;
}
.progressbar {
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -80px;
    left: 0;
    z-index: 1;
}
.progressbar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left top;
    background-color: #da7845;
}
@media only screen and (min-width:640px) {
    .contents-list-item.is-slide a:hover {
        box-shadow: none;
        opacity: .8;
    }
    .contents-list-item.is-slide a:hover .date,
    .contents-list-item.is-slide a:hover .heading {
        color: #fff;
    }
    .keywords_wrap .contents-practice .item a:hover span {
        background: #FAFBFF;
        color: #023859;
        box-shadow: 0 4px 3px rgba(121, 121, 121, 0.1);
    }
}
@media only screen and (max-width:1024) {
    .contents-list-item.is-slide .contents-content {
        width: 100%;
        padding: 16px 0 0;
    }
}
@media only screen and (max-width:640px) {
    .splide.is-features .splide_part {
        margin-top: 7.467vw;
    }
    .features_slide_wrap {
        padding: 40px 0;
    }
    .contents-list-item.is-slide .contents-content .heading {
        font-size: 4.4vw;
        padding-bottom: 16px;
        margin-bottom:18px;
    }
    .detail_lnk_ttl,
    .detail_lnk_ttl.is-ver2 {
        font-size: 4.267vw;
    }
    .c-pageTtl_wrap .ttl.is-ver2 {
        font-size: 10.667vw;
    }
    .single-heading-info {
        height: 10.667vw;
        padding: 0 4.688vw;
    }
    .single-heading-category {
        font-size: 2.667vw;
        width: 32vw;
        height: 5.333vw;
    }
    .single-heading-date {
        font-size: 3.733vw;
    }
    .ld_article-list.is-ver2 {
        padding: 0 4.688vw;
        margin-top: 5.333vw;
        box-sizing: border-box;
    }
    .keywords_wrap {
        margin-top: 21.333vw;
    }
    .keywords_in {
        display: block;
        padding: 7.467vw 4.688vw 10.133vw;
    }
    .keywords_ttl {
        font-size: 8vw;
        margin: 0 0 6.4vw;
    }
    .keywords_wrap.is-ver2 {
        margin-top: 16vw;
    }
    .keywords_wrap.is-ver2 .keywords_in {
        padding: 7.467vw 4.688vw 10.133vw;
    }
    .keywords_wrap.is-ver2 .contents-practice + .contents-practice {
        margin-top: 6.4vw;
    }
    .return_btn {
        margin-bottom: 16vw;
        padding: 0 4.688vw;
    }
    .detail_public_wrap {
        margin: 16vw auto;
    }
    .detail_public_wrap .contents-list.is-ver2 {
        margin-top: 6.933vw;
    }
    .detail_public_wrap .contents-list.is-ver2 .contents-list-item {
        width: 100%;
    }
    .features-detail-ttl {
        font-size: 4.6vw;
        line-height: 1.6em;
        padding: 1.2em 0.65em;
    }
    .progressbar {
        bottom: -40px;
    }
}