@charset "UTF-8";
@import"https://fonts.googleapis.com/css2?family=Akshar:wght@300..700&display=swap";
@keyframes scroll-hint-appear {
    0% {
        transform: translate(40px);
        opacity: 0
    }
    10% {
        opacity: 1
    }
    50%,
    to {
        transform: translate(-40px);
        opacity: 0
    }
}

.scroll-hint.is-right-scrollable {
    background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0))
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0))
}

.scroll-hint.is-left-scrollable {
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0))
}

.scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: 80px;
    border-radius: 5px;
    transition: opacity .3s;
    opacity: 0;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    padding: 20px 10px 10px
}

.scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none
}

.scroll-hint-text {
    font-size: 10px;
    color: #fff;
    margin-top: 5px
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .8
}

.scroll-hint-icon:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    content: "";
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon:after {
    content: "";
    width: 34px;
    height: 14px;
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
    opacity: 0;
    transition-delay: 2.4s
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
    opacity: 1
}

.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation: scroll-hint-appear 1.2s linear;
    animation-iteration-count: 2
}

.scroll-hint-icon-white {
    background-color: #fff;
    box-shadow: 0 4px 5px #0006
}

.scroll-hint-icon-white:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=)
}

.scroll-hint-icon-white:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==)
}

.scroll-hint-icon-white .scroll-hint-text {
    color: #000
}

#uni2024 {
    font-family: Akshar, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif
}

#uni2024 .w960 {
    max-width: 100rem
}

.sec-mv {
    width: 100%;
    position: sticky;
    z-index: -1
}

@media screen and (min-width: 768px) {
    .sec-mv {
        top: 126px
    }
}

@media screen and (max-width: 767px) {
    .sec-mv {
        top: 90px
    }
}

.sec-mv img {
    width: 100%
}

.content-wrap {
    position: relative;
    background-color: #fffc;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.content-wrap:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #edededa8;
    display: block;
    position: absolute;
    top: 0;
    z-index: -10;
    mask-image: url(/special/2024_25_ACLE_uniform/assets/img/bg-acl-pattern.svg);
    mask-size: 30%
}

@media screen and (max-width: 767px) {
    .content-wrap:after {
        mask-size: 100%
    }
}

.sec-title {
    line-height: 1;
    font-size: 3.86rem;
    margin-bottom: 4.8rem
}

@media screen and (max-width: 767px) {
    .sec-title {
        margin-bottom: 3.2rem
    }
}

.sec-title p {
    font-size: 1.1rem;
    display: block;
    font-weight: 700;
    color: #23b7fe
}

.sec-concept {
    padding: 8rem 0
}

@media screen and (min-width: 768px) {
    .sec-concept .main-txt {
        width: 70%
    }
}

@media screen and (min-width: 768px) {
    .sec-concept .flex-wrap {
        display: flex;
        justify-content: space-between
    }
}

.sec-concept .main-txt {
    line-height: 180%;
    font-size: 1.3rem
}

.sec-concept .main-txt p+p {
    margin-top: 1rem
}

.sec-detail {
    padding: 0 0 8rem;
    position: relative
}

.sec-detail:after {
    content: "";
    display: block;
    width: 100%;
    height: 60%;
    background-color: #333c46;
    position: absolute;
    bottom: 0
}

@media screen and (max-width: 767px) {
    .sec-detail:after {
        height: 85%
    }
}

.sec-detail .inner {
    position: relative;
    z-index: 10;
    color: #fff
}

.sec-detail .uniform-wrap {
    display: flex;
    justify-content: center;
    gap: 0rem
}

.sec-detail .ph-uniform {
    width: 45rem;
    aspect-ratio: 108/90;
    display: block
}

.sec-detail .ph-uniform:first-child {
    margin-right: -8%;
    z-index: 10
}

@media screen and (max-width: 767px) {
    .sec-detail .ph-uniform:first-child {
        margin-right: -14%
    }
}

.sec-detail h3 {
    text-align: center;
    margin: 4rem;
    color: #069fe8;
    font-weight: 300;
    font-size: 7rem;
    line-height: 1
}

@media screen and (max-width: 767px) {
    .sec-detail h3 {
        font-size: 3.4;
        line-height: .9
    }
}

.sec-detail h3 p {
    font-size: 1.3rem;
    color: #fff
}

.sec-detail .block-price dl {
    display: flex
}

@media screen and (min-width: 768px) {
    .sec-detail .block-price dl {
        gap: 3rem;
        justify-content: center;
        align-items: center
    }
}

@media screen and (max-width: 767px) {
    .sec-detail .block-price dl {
        flex-direction: column;
        align-items: center
    }
}

.sec-detail .block-price dt {
    font-size: 1.1rem;
    width: 10em;
    background-color: #fff;
    color: #333c46;
    font-weight: 700;
    text-align: center;
    padding: .2rem 0;
    height: 2rem
}

.sec-detail .block-price dd {
    width: 20rem;
    text-align: center
}

.sec-detail .block-price .block-size-box {
    margin-bottom: 2rem
}

.sec-detail .block-price .block-size-box dd {
    font-size: 1.2rem;
    letter-spacing: .15rem
}

@media screen and (max-width: 767px) {
    .sec-detail .block-price .block-size-box {
        gap: 2rem
    }
}

.sec-detail .block-price .block-price-box dd p {
    font-size: 4rem
}

.sec-detail .block-price .block-price-box dd p:before {
    content: "\a5";
    font-size: 2rem
}

.sec-detail .block-price .block-price-box dd p:after {
    content: "(\7a0e\8fbc)";
    font-size: .9rem
}

.sec-feature {
    padding: 8rem 0
}

.sec-feature .box-feature .sub-ttl,
.sec-feature .box-acle .sub-ttl {
    padding: 1rem 0;
    line-height: 1.2;
    font-size: 2.4rem;
    font-weight: 300
}

.sec-feature .box-feature .sub-ttl span,
.sec-feature .box-acle .sub-ttl span {
    font-size: 1.1rem;
    display: block;
    color: #23b7fe;
    font-weight: 700
}

.sec-feature .box-feature .txt-box,
.sec-feature .box-acle .txt-box {
    font-size: 1.2rem
}

.sec-feature .box-feature {
    display: flex;
    margin-bottom: 4rem
}

@media screen and (min-width: 768px) {
    .sec-feature .box-feature {
        gap: 4rem;
        justify-content: center;
        align-items: start
    }
}

@media screen and (max-width: 767px) {
    .sec-feature .box-feature {
        gap: 4rem;
        flex-direction: column
    }
}

@media screen and (min-width: 768px) {
    .sec-feature .flex-item {
        width: calc((100% - 12rem) / 3)
    }
}

@media screen and (max-width: 767px) {
    .sec-feature .flex-item {
        width: 80%;
        margin-inline: auto
    }
    .sec-feature .flex-item .txt-box {
        font-size: 1.1rem
    }
}

.sec-feature .flex-item .img-feature {
    aspect-ratio: 1/1;
    width: 100%;
    display: block
}

.sec-feature .box-acle {
    margin: 0 2rem;
    padding: 2.4rem 3.2rem;
    display: flex;
    align-items: center;
    gap: 3.2rem
}

@media screen and (max-width: 767px) {
    .sec-feature .box-acle {
        flex-direction: column;
        gap: 2.4rem
    }
    .sec-feature .box-acle .sub-ttl span {
        margin-top: .2rem
    }
}

.sec-feature .box-acle .box-acle-img {
    height: 274px;
    aspect-ratio: 588/784
}

.sec-feature .box-acle .notice-txt {
    margin-top: 1rem;
    font-size: .9rem;
    color: #b00
}

.sec-feature .box-acle.sec {
    opacity: 0;
    position: relative
}

.sec-feature .box-acle.sec:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.sec-feature .box-acle.sec.show {
    animation-name: opacity-control;
    animation-duration: 1s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
    visibility: visible;
    opacity: 0
}

.sec-feature .box-acle.sec.show:before {
    animation-name: bg-acle-anime;
    animation-duration: 1s;
    animation-delay: .9s;
    animation-fill-mode: forwards
}

@keyframes bg-acle-anime {
    0% {
        opacity: 0;
        transform-origin: top;
        transform: scaleY(0)
    }
    to {
        opacity: .8;
        transform-origin: top;
        transform: scaleY(1)
    }
}

.sec-delivery {
    padding: 8rem 0;
    color: #fff;
    background: #333c46
}

.sec-delivery .box-delivery dl {
    margin-bottom: 2.4rem
}

@media screen and (min-width: 768px) {
    .sec-delivery .box-delivery dl {
        display: flex;
        gap: 2rem;
        align-items: center;
        font-size: 1.4rem;
        justify-content: center
    }
}

.sec-delivery .box-delivery dl:last-child {
    margin-bottom: 0
}

.sec-delivery .box-delivery dl dt {
    width: 10em;
    padding: .25em 0;
    background-color: #fff;
    color: #333c46;
    font-weight: 700;
    text-align: center
}

@media screen and (max-width: 767px) {
    .sec-delivery .box-delivery dl dt {
        margin-bottom: 1rem
    }
}

@media screen and (min-width: 768px) {
    .sec-delivery .box-delivery dl dd {
        width: 40rem
    }
}

.sec-delivery .box-delivery dl dd span {
    font-size: 2.8rem
}

.sec-nn {
    color: #fff;
    background: linear-gradient(0deg, #069fe8 0%, #21a9ec 50%);
    padding: 8rem 0
}

.sec-nn .sec-title span {
    font-size: 2.4rem
}

.sec-nn .sec-title p {
    color: #333c46
}

.sec-nn .img-font-sample {
    text-align: center;
    margin-inline: auto
}

@media screen and (min-width: 768px) {
    .sec-nn .img-font-sample {
        width: 65rem
    }
}

.sec-nn .img-font-sample img {
    width: 100%
}

.sec-nn .option-price {
    display: flex;
    background-color: #333c46;
    margin-inline: auto;
    align-items: center;
    margin: 4.8rem auto
}

@media screen and (max-width: 767px) {
    .sec-nn .option-price {
        flex-direction: column
    }
}

@media screen and (min-width: 768px) {
    .sec-nn .option-price .price-ttl {
        width: 50rem
    }
}

@media screen and (max-width: 767px) {
    .sec-nn .option-price .price-ttl {
        line-height: 4
    }
}

.sec-nn .option-price .price-ttl h4 {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700
}

.sec-nn .option-price .price-txt {
    background-color: #fff;
    text-align: center;
    color: #333c46;
    display: flex;
    justify-content: center;
    gap: 1rem
}

@media screen and (min-width: 768px) {
    .sec-nn .option-price .price-txt {
        width: 50rem;
        align-items: center
    }
}

@media screen and (max-width: 767px) {
    .sec-nn .option-price .price-txt {
        width: 100%;
        align-items: center
    }
}

.sec-nn .option-price .price-txt .txt01 {
    font-size: 1.3rem;
    font-weight: 700
}

.sec-nn .option-price .price-txt .txt02 {
    font-size: 3.2rem
}

.sec-nn .option-price .price-txt .txt02:before {
    content: "\a5";
    font-size: 2rem
}

.sec-nn .option-price .price-txt .txt02:after {
    content: "(\7a0e\8fbc)";
    font-size: .9rem
}

.sec-nn .table-box {
    width: 70rem;
    margin-inline: auto
}

@media screen and (max-width: 767px) {
    .sec-nn .table-box {
        width: 100%;
        overflow: scroll
    }
}

.sec-nn .table-box h4 {
    display: none
}

.sec-nn .table-box table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1rem .5rem
}

.sec-nn .table-box table th {
    line-height: 3;
    font-size: 1.1rem;
    color: #333c46;
    background-color: #fff
}

.sec-nn .table-box table td {
    text-align: center;
    font-size: 1.1rem
}

.sec-nn .table-box table td:not(:nth-child(3)) {
    font-size: 1.24rem
}

.sec-nn .table-box table td:not(:nth-child(3)).kana {
    font-size: 1.1rem
}

@media screen and (max-width: 767px) {
    .sec-nn .table-box table td {
        padding: 0 1rem
    }
}

.sec-nn .table-box table tbody tr td {
    white-space: nowrap;
    padding-top: 1rem
}

.sec-nn .table-box .scroll-hint-icon {
    top: 150px!important;
    left: calc(50% - 70px);
    width: 140px
}

.sec-attention {
    background-color: #fff;
    padding: 8rem 0
}

.sec-attention .sec-title p {
    color: #b00
}

.sec-attention .attn-list>:before {
    color: #111
}

@media screen and (max-width: 767px) {
    .sec-attention .attn-list {
        font-size: 1.1rem
    }
}

.btn-area {
    position: relative
}

.btn-area .sec-buybtn {
    padding: 2.4rem 0;
    background: linear-gradient(0deg, #069fe8 0%, #21a9ec 50%);
    position: sticky;
    z-index: 100;
    width: 100%;
    bottom: 0;
    left: 0
}

.btn-area .sec-buybtn .btn-wrapper .btn {
    font-size: 1.1rem;
    border: 2px solid #ffffff
}

.btn-area .sec-buybtn .btn-wrapper .btn:before {
    background: none
}

@media screen and (min-width: 768px) {
    .btn-area .sec-buybtn .btn-wrapper .btn {
        min-width: 50rem
    }
}

@media screen and (max-width: 767px) {
    .btn-area .sec-buybtn .btn-wrapper .btn {
        min-width: 100%
    }
}

.slide-in {
    overflow: hidden;
    display: inline-block
}

.slide-in-inner {
    opacity: 0;
    display: inline-block
}

.sec.show .slide-in {
    animation-name: slideTextX100;
    animation-duration: .9s;
    animation-fill-mode: forwards;
    opacity: 0
}

.sec.show .slide-in-inner {
    animation-name: slideTextX-100;
    animation-duration: .9s;
    animation-fill-mode: forwards;
    opacity: 0
}

.sec.show .fade {
    animation-name: fade;
    animation-duration: .9s;
    animation-fill-mode: forwards;
    opacity: 0
}

.sec.show .fade.delay01 {
    animation-delay: .8s
}

.sec.show .fade.delay02 {
    animation-delay: 1.2s
}

.sec.show .fade.delay03 {
    animation-delay: 1.6s
}

.sec.show .fade.delay03 {
    animation-delay: 2s
}

@keyframes slideTextX100 {
    0% {
        transform: translate(-100%);
        opacity: 0
    }
    to {
        transform: translate(0);
        opacity: 1
    }
}

@keyframes slideTextX-100 {
    0% {
        transform: translate(100%);
        opacity: 0
    }
    to {
        transform: translate(0);
        opacity: 1
    }
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.sec.show .sec-detail-ttl {
    animation-name: bgextendAnimeBase;
    animation-duration: .9s;
    animation-delay: .6s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden;
    opacity: 0
}

@keyframes bgextendAnimeBase {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.sec.show .sec-detail-ttl div {
    animation-name: opacity-control;
    animation-duration: .9s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
    opacity: 0
}

@keyframes opacity-control {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.sec.show .sec-detail-ttl div:before {
    animation-name: ttl-animation;
    animation-duration: .9s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 80rem;
    margin-inline: auto;
    left: 0;
    right: 0;
    background-color: #069fe8
}

@keyframes ttl-animation {
    0% {
        transform-origin: top;
        transform: scaleY(0)
    }
    50% {
        transform-origin: top;
        transform: scaleY(1)
    }
    50.001% {
        transform-origin: bottom
    }
    to {
        transform-origin: bottom;
        transform: scaleY(0)
    }
}