@charset "UTF-8";

.anchor-position {
    font-size: 0;
    line-height: 0;
    padding-top: 8vw;
    margin-top: -8vw
}

.anchor-position.anchor03 {
    padding-top: 0;
    margin-top: 0
}

.anchor-position.anchor04 {
    padding-top: 30vw;
    margin-top: -30vw
}

.popup-movie-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vw 0
}

.popup-movie-box iframe {
    display: block;
    width: 70%;
    margin: 0 auto;
    aspect-ratio: 16/9
}

.modaal-wrapper.is-movie01 .modaal-container,
.modaal-wrapper.is-movie02 .modaal-container,
.modaal-wrapper.is-movie03 .modaal-container {
    width: 60% !important
}

.modaal-wrapper.is-movie01 .modaal-close,
.modaal-wrapper.is-movie02 .modaal-close,
.modaal-wrapper.is-movie03 .modaal-close {
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 1vw 0 10vw !important;
    border-top: unset !important;
    border-right: unset !important
}

.top-fv-content {
    width: 100%;
    height: 45vw;
    position: relative;
    z-index: 0;
    padding: 4vw 6vw 0;
    background: #f29c9f;
    opacity: 1;
    margin-bottom: 5vw
}

.top-fv-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 35vw;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, rgba(242, 156, 159, 0) 0, #f29c9f 100%);
    transform: translateY(99%)
}

.top-fv-content::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 7vw;
    top: 0;
    left: 0;
    background: #f29c9f;
    z-index: 1;
    transform: translateY(-99%)
}

.top-fv-content .fv-bg {
    width: 100%;
    height: 38vw;
    position: absolute;
    background: url(../images/top/fv-bg.svg) no-repeat center center;
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 3;
    pointer-events: none
}

.top-fv-content ul.top-fv-slider {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 35vw;
    z-index: 2;
    transform: translateY(-50%) translateX(-50%);
    overflow: hidden
}

.top-fv-content ul.top-fv-slider li {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform .3s ease-in-out !important
}

.top-fv-content ul.top-fv-slider li img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover
}

.top-fv-content ul.top-fv-slider li.is-scaled {
    transform: scale(1.06)
}

.top-fv-content .text-box {
    position: relative;
    z-index: 3;
    width: 50%;
    margin-bottom: 1vw
}

.top-fv-content .text-box .title-copy {
    width: 25vw;
    margin-bottom: 1vw;
    opacity: 0;
    transition: .3s ease all;
    transform: translateY(20%)
}

.top-fv-content .text-box .title-copy img {
    width: 100%
}

.top-fv-content .text-box h2.main-title {
    width: 40vw;
    margin-bottom: 2vw;
    position: relative
}

.top-fv-content .text-box h2.main-title img {
    width: 100%;
    position: absolute;
    height: 100%;
    object-fit: contain;
    left: 0;
    top: 0;
    opacity: 0
}

.top-fv-content .text-box h2.main-title img:nth-of-type(1) {
    position: relative
}

.top-fv-content .text-box p.copy {
    padding-left: 3vw
}

.top-fv-content .text-box p.copy span {
    color: #fff;
    font-weight: 500;
    letter-spacing: .2em;
    font-size: 2vw;
    line-height: 1em;
    padding: 1vw 1vw;
    position: relative;
    z-index: 0;
    display: inline-block;
    opacity: 0;
    transition: .4s ease all
}

.top-fv-content .text-box p.copy span::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: #f29c9f;
    z-index: -1;
    width: 0;
    height: 100%;
    opacity: 0;
    transition: .4s ease all
}

.top-fv-content .text-box p.copy span:nth-of-type(1) {
    margin-bottom: 1vw
}

.top-fv-content .img-box {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding-right: 14vw
}

.top-fv-content .img-box::after {
    position: absolute;
    content: "";
    width: 22vw;
    height: 18vw;
    right: 4vw;
    top: -2vw;
    opacity: 0;
    transition: .3s ease all;
    background: url(../images/top/fv-kirinuki-img01.webp) no-repeat center center;
    background-size: contain
}

.top-fv-content .img-box .top-movie-link {
    display: block;
    width: 29vw;
    height: 17vw;
    opacity: 0;
    transition: .3s ease-in-out all
}

.top-fv-content .img-box .top-movie-link.no-link {
    pointer-events: none
}

.top-fv-content .img-box .top-movie-link img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.top-fv-content.is-show .text-box .title-copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.7s;
    animation: popUp .4s ease-in-out 1.7s forwards
}

.top-fv-content.is-show .text-box h2.main-title img {
    opacity: 1;
    animation: bound 1.4s ease both
}

.top-fv-content.is-show .text-box h2.main-title img:nth-of-type(2) {
    animation-delay: .1s
}

.top-fv-content.is-show .text-box h2.main-title img:nth-of-type(3) {
    animation-delay: .15s
}

.top-fv-content.is-show .text-box h2.main-title img:nth-of-type(4) {
    animation-delay: .2s
}

.top-fv-content.is-show .text-box p.copy span {
    opacity: 1;
    transition-delay: 1.4s
}

.top-fv-content.is-show .text-box p.copy span::after {
    opacity: 1;
    width: 100%;
    transition-delay: 1.4s
}

.top-fv-content.is-show .text-box p.copy span:nth-of-type(2) {
    transition-delay: 1.5s
}

.top-fv-content.is-show .text-box p.copy span:nth-of-type(2)::after {
    transition-delay: 1.5s
}

.top-fv-content.is-show .img-box::after {
    opacity: 1;
    transition-delay: 2.2s;
    animation: popUp .5s ease-in-out 2.2s forwards, FvSwitching 3.5s ease infinite
}

.top-fv-content.is-show .img-box .top-movie-link {
    opacity: 1;
    transition-delay: 2s;
    animation: popUp .5s ease-in-out 2s forwards
}

@keyframes FvSwitching {
    0% {
        background: url(../images/top/fv-kirinuki-img01.webp) no-repeat center center;
        background-size: contain
    }

    49% {
        background: url(../images/top/fv-kirinuki-img01.webp) no-repeat center center;
        background-size: contain
    }

    50% {
        background: url(../images/top/fv-kirinuki-img02.webp) no-repeat center center;
        background-size: contain
    }

    99% {
        background: url(../images/top/fv-kirinuki-img02.webp) no-repeat center center;
        background-size: contain
    }

    100% {
        background: url(../images/top/fv-kirinuki-img01.webp) no-repeat center center;
        background-size: contain
    }
}

@keyframes bound {
    0% {
        transform: translateY(-20%) scale(1, 1)
    }

    30% {
        transform: translateY(0) scale(1, .95)
    }

    50% {
        transform: translateY(-10%) scale(1, 1.05)
    }

    70% {
        transform: translateY(0) scale(1, .95)
    }

    85% {
        transform: translateY(-3%) scale(1, 1)
    }

    100% {
        transform: translateY(0) scale(1, 1)
    }
}

.student-content {
    width: 100%;
    position: relative;
    padding: 8vw 12vw 5vw;
    z-index: 0
}

.student-content::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(90deg, #f29c9f 2px, transparent 2px), linear-gradient(#f29c9f 2px, transparent 2px);
    background-size: 2vw 2vw;
    background-position: 10px 12px;
    opacity: .7
}

.student-content h3.student-section-title {
    width: 100%;
    position: relative;
    margin: 0 auto 4vw;
    opacity: 1
}

.student-content h3.student-section-title span {
    display: block
}

.student-content h3.student-section-title span.copy {
    position: absolute;
    color: #fff;
    font-weight: 500;
    letter-spacing: .5em;
    font-size: clamp(2.49rem, 2.43vw, 4.67rem);
    z-index: 0;
    left: 5vw;
    top: 0;
    opacity: 0;
    transition: .4s ease all;
    transform: translateY(0) scale(.9)
}

.student-content h3.student-section-title span.copy::after {
    position: absolute;
    content: "";
    width: 26vw;
    height: 9vw;
    left: 50%;
    top: 50%;
    background: url(../images/top/student-section-copy.svg) no-repeat center center;
    background-size: contain;
    z-index: -1;
    transform: translateY(-40%) translateX(-52%)
}

.student-content h3.student-section-title span.main {
    width: 80%;
    margin: 0 3vw 0 auto;
    position: relative;
    opacity: 0;
    transition: .4s ease all
}

.student-content h3.student-section-title span.main::after,
.student-content h3.student-section-title span.main::before {
    position: absolute;
    content: "";
    width: 11vw;
    height: 11vw;
    background: url(../images/top/student-section-icon.svg) no-repeat center center;
    background-size: contain
}

.student-content h3.student-section-title span.main::after {
    left: 0;
    bottom: 0;
    animation: StTitleSwitchingLeft 2s linear infinite
}

.student-content h3.student-section-title span.main::before {
    top: 0;
    right: 0;
    animation: StTitleSwitchingRight 2s linear infinite
}

.student-content h3.student-section-title span.main img {
    width: 100%
}

.student-content h3.student-section-title.is-show span.copy {
    opacity: 1;
    animation: popUp .4s ease-in-out .25s forwards;
    transition-delay: .25s
}

.student-content h3.student-section-title.is-show span.main {
    opacity: 1;
    animation: popUp .4s ease-in-out forwards
}

.student-content ul.student-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.student-content ul.student-list li {
    width: 28%;
    margin-bottom: 1vw;
    opacity: 1
}

.student-content ul.student-list li a {
    width: 100%;
    display: block;
    position: relative;
    cursor: pointer
}

.student-content ul.student-list li a::after,
.student-content ul.student-list li a::before {
    position: absolute;
    content: "";
    top: 43%;
    opacity: 0;
    transition: .3s ease all
}

.student-content ul.student-list li a::after {
    background: url(../images/top/student-icon01.svg) no-repeat center center;
    background-size: contain;
    left: 0;
    height: 14vw;
    width: 4vw;
    transform: translateY(-50%) translateX(-100%)
}

.student-content ul.student-list li a::before {
    background: url(../images/top/student-icon02.svg) no-repeat center center;
    background-size: contain;
    right: 0;
    height: 14vw;
    width: 4vw;
    transform: translateY(-50%) translateX(80%)
}

.student-content ul.student-list li a .title {
    text-align: center;
    margin-bottom: 1vw
}

.student-content ul.student-list li a .title span {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .15em;
    font-size: clamp(1.42rem, 1.39vw, 2.67rem)
}

.student-content ul.student-list li a .title .txt-red {
    color: #ff5f59 !important
}

.student-content ul.student-list li a .img-box {
    width: 18vw;
    height: 24vw;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: end;
    border-radius: 50%;
    margin: 0 auto
}

.student-content ul.student-list li a .img-box::after,
.student-content ul.student-list li a .img-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    transition: .3s ease all
}

.student-content ul.student-list li a .img-box::after {
    background: #fff;
    z-index: -1;
    border: 1px #000 solid
}

.student-content ul.student-list li a .img-box::before {
    background-image: linear-gradient(90deg, #b3e1f0, #b3e1f0 50%, #d5c9f6);
    z-index: -2;
    transform: translateY(4%) translateX(4%)
}

.student-content ul.student-list li a .img-box figure {
    width: 100%;
    height: 100%;
    object-position: 0 100%;
    margin: 0 auto;
    border-radius: 50%;
    opacity: 0;
    transition: .3s ease all;
    overflow: hidden
}

.student-content ul.student-list li a .img-box figure img {
    width: 80%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    transition: .3s ease all;
    object-position: 0 100%
}

.student-content ul.student-list li a p.name {
    width: fit-content;
    margin: 0 auto;
    transform: translateY(-50%)
}

.student-content ul.student-list li a p.name span {
    display: inline-block
}

.student-content ul.student-list li a p.name span.main,
.student-content ul.student-list li a p.name span.sub {
    padding: .5vw 1vw;
    line-height: 1em;
    letter-spacing: .15em;
    position: relative;
    z-index: 0
}

.student-content ul.student-list li a p.name span.main::after,
.student-content ul.student-list li a p.name span.main::before,
.student-content ul.student-list li a p.name span.sub::after,
.student-content ul.student-list li a p.name span.sub::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0
}

.student-content ul.student-list li a p.name span.main::before,
.student-content ul.student-list li a p.name span.sub::before {
    background: #000;
    z-index: -2;
    transform: translateY(15%) translateX(3%)
}

.student-content ul.student-list li a p.name span.main::after,
.student-content ul.student-list li a p.name span.sub::after {
    z-index: -1;
    background: #fff;
    border: 2px #000 solid
}

.student-content ul.student-list li a p.name span.sub {
    font-size: clamp(1.14rem, 1.11vw, 2.13rem);
    margin-bottom: .5em;
    transform: translateX(-10%)
}

.student-content ul.student-list li a p.name span.main {
    font-size: clamp(1.56rem, 1.53vw, 2.93rem);
    transform: translateX(10%)
}

.student-content ul.student-list li a p.name span.main .small {
    font-size: clamp(1.07rem, 1.04vw, 2rem);
    letter-spacing: .02em
}

.student-content ul.student-list li.is-show a .img-box figure {
    opacity: 1;
    animation: popUp .5s ease-in-out both
}

.student-content ul.student-list li.is-show a:hover {
    opacity: 1
}

.student-content ul.student-list li.is-show a:hover::after,
.student-content ul.student-list li.is-show a:hover::before {
    opacity: 1
}

.student-content ul.student-list li.is-show a:hover::after {
    animation: StIconSwitchingRight 1s linear infinite
}

.student-content ul.student-list li.is-show a:hover::before {
    animation: StIconSwitchingLeft 1s linear infinite
}

.student-content ul.student-list li.is-show a:hover .img-box figure img {
    animation: SwitchingLeft 1s linear forwards !important
}

@keyframes StTitleSwitchingLeft {

    0%,
    100%,
    49% {
        transform: translateY(7%) translateX(-75%) rotate(45deg) scale(-1, -1)
    }

    50%,
    99% {
        transform: translateY(7%) translateX(-75%) rotate(55deg) scale(-1, -1)
    }
}

@keyframes StTitleSwitchingRight {

    0%,
    100%,
    49% {
        transform: translateY(-50%) translateX(60%) rotate(5deg)
    }

    50%,
    99% {
        transform: translateY(-50%) translateX(60%) rotate(-5deg)
    }
}

@keyframes StIconSwitchingRight {

    0%,
    100%,
    49% {
        transform: rotate(3deg) translateY(-50%) translateX(-100%)
    }

    50%,
    99% {
        transform: rotate(-3deg) translateY(-50%) translateX(-100%)
    }
}

@keyframes StIconSwitchingLeft {

    0%,
    100%,
    49% {
        transform: rotate(-3deg) translateY(-50%) translateX(90%)
    }

    50%,
    99% {
        transform: rotate(3deg) translateY(-50%) translateX(93%)
    }
}

.modaal-overlay {
    opacity: .4 !important
}

.modaal-container {
    width: 85% !important;
    max-width: unset !important;
    border-radius: 1vw !important;
    border: .11em #000 solid
}

.modaal-content-container {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 1vw !important
}

.modaal-close {
    width: 7vw !important;
    height: 7vw !important;
    top: 2.7vw !important;
    right: calc(3vw - .11em) !important;
    background: #ffe019 !important;
    border-radius: 0 0 0 10vw !important;
    border: .11em #000 solid !important
}

.modaal-close::after,
.modaal-close::before {
    width: .11em !important;
    background: #000 !important;
    height: 3vw !important;
    top: 1.1vw !important;
    left: 3.9vw !important
}

.student-modal-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 0;
    padding: 5vw 6vw 3.2vw 3.6vw
}

.student-modal-inner::after {
    position: absolute;
    content: "";
    width: calc(100% + 15vw);
    height: calc(100% + 15vw);
    background: url(../images/top/student-popup-common-icon04.svg) repeat center center;
    background-size: contain;
    left: 50%;
    top: 40%;
    z-index: -3;
    transform: translateY(-50%) translateX(-50%)
}

.student-modal-inner .popup-bar01 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-bottom: .11em #000 solid;
    display: flex;
    padding: .8vw 1.3vw;
    background-image: linear-gradient(90deg, #adcae9, #b3e1f0 50%, #d5c9f6);
    z-index: 1
}

.student-modal-inner .popup-bar01 .circle {
    width: 1.1vw;
    height: 1.1vw;
    border-radius: 50%;
    border: .11em #000 solid;
    margin-right: .6vw;
    background: #fff
}

.student-modal-inner .popup-bar02 {
    position: absolute;
    right: 0;
    top: 2.7vw;
    height: calc(100% - 2.7vw);
    border-left: .11em #000 solid;
    width: 3vw;
    background: #fff
}

.student-modal-inner .popup-bar02::after {
    position: absolute;
    content: "";
    width: calc(100% + .22em);
    height: 60%;
    bottom: 0;
    left: -.11em;
    background-image: linear-gradient(90deg, #adcae9, #b3e1f0 50%, #d5c9f6);
    border-radius: 10vw 10vw 0 0;
    border: .11em #000 solid;
    border-bottom: none
}

.student-modal-inner .group01 {
    width: 31%
}

.student-modal-inner .group01 .title-img {
    width: calc(100% + 2vw);
    transform: translateY(18%);
    z-index: 1;
    position: relative
}

.student-modal-inner .group01 .title-img img {
    width: 100%
}

.student-modal-inner .group01 .bg-text {
    width: 100%;
    position: relative
}

.student-modal-inner .group01 .bg-text .paper-layer {
    width: 100%;
    background: #fff;
    border: .11em #000 solid;
    padding: 2vw 2.5vw;
    position: relative;
    z-index: 0;
    margin-bottom: 3vw
}

.student-modal-inner .group01 .bg-text .paper-layer p.name {
    text-align: end
}

.student-modal-inner .group01 .bg-text .paper-layer p.name span {
    display: inline-block;
    font-size: clamp(1.42rem, 1.39vw, 2.67rem)
}

.student-modal-inner .group01 .bg-text .paper-layer .subimg {
    width: 9vw;
    height: 7vw;
    position: absolute;
    left: -2vw;
    bottom: 0;
    animation: SwitchingLeft 1.5s linear infinite
}

.student-modal-inner .group01 .bg-text .paper-layer .subimg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.student-modal-inner .group01 .bg-text .bg-box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1
}

.student-modal-inner .group01 .bg-text .bg-box .bg {
    width: 100%;
    height: 100%;
    background: #fff;
    border: .11em #000 solid;
    position: absolute
}

.student-modal-inner .group01 .bg-text .bg-box .bg.bg01 {
    transform: translateY(2%) translateX(2%);
    z-index: -1
}

.student-modal-inner .group01 .bg-text .bg-box .bg.bg02 {
    transform: translateY(4%) translateX(4%);
    z-index: -2
}

.student-modal-inner .group01 a.popup-link-btn {
    display: block;
    width: 100%;
    color: #fff;
    background: #f56c34;
    border-radius: 10vw;
    font-size: clamp(1.14rem, 1.11vw, 2.13rem);
    padding: .5vw 4vw .5vw 2vw;
    text-align: center;
    border: .11em #000 solid;
    position: relative;
    letter-spacing: .15em;
    transition: .3s ease all;
    box-shadow: .5vw .5vw 0 rgba(170, 170, 170, .8);
    cursor: pointer
}

.student-modal-inner .group01 a.popup-link-btn::after {
    position: absolute;
    content: "";
    width: 1vw;
    height: 1vw;
    background: #fff;
    top: 50%;
    right: 2vw;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateY(-50%)
}

.student-modal-inner .group01 a.popup-link-btn span {
    color: #fff;
    font-size: clamp(1.28rem, 1.25vw, 2.4rem);
    letter-spacing: .15em
}

.student-modal-inner .group01 a.popup-link-btn:hover {
    opacity: 1;
    box-shadow: 0 0 0 #aaa;
    transform: translateY(.25vw) translateX(.25vw)
}

.student-modal-inner .group02 {
    width: 64%;
    display: flex;
    align-items: center
}

.student-modal-inner .group02 .kirinuki {
    width: 38%;
    position: relative
}

.student-modal-inner .group02 .kirinuki img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    animation: popupblinking 2s ease infinite;
    opacity: 0
}

.student-modal-inner .group02 .kirinuki img:nth-of-type(2) {
    position: absolute;
    left: 0;
    top: 0;
    animation-delay: 1s
}

.student-modal-inner .group02 .img-wrap {
    width: 61%
}

.student-modal-inner .group02 .img-wrap .text-copy {
    width: 65%;
    margin: 0 auto 1vw;
    padding-left: 2vw
}

.student-modal-inner .group02 .img-wrap .text-copy img {
    width: 100%
}

.student-modal-inner .group02 .img-wrap .box {
    width: 100%;
    display: flex;
    position: relative
}

.student-modal-inner .group02 .img-wrap .box img {
    display: block
}

.student-modal-inner .group02 .img-wrap .box.pattern01 {
    align-items: end;
    margin-bottom: -1vw;
    position: relative
}

.student-modal-inner .group02 .img-wrap .box.pattern01::after {
    position: absolute;
    content: "";
    width: 4vw;
    height: 5vw;
    background: url(../images/top/student-popup-common-icon01.svg) no-repeat center center;
    background-size: contain;
    left: -4vw;
    top: 0;
    animation: SwitchingRight 1.5s linear infinite
}

.student-modal-inner .group02 .img-wrap .box.pattern01::before {
    position: absolute;
    content: "";
    width: 2vw;
    height: 3vw;
    background: url(../images/top/student-popup-common-icon02.svg) no-repeat center center;
    background-size: contain;
    left: 22vw;
    top: 4vw;
    animation: SwitchingLeft 1.5s linear infinite
}

.student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(1) {
    width: 18vw;
    height: 18vw
}

.student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(2) {
    position: absolute;
    width: 6vw;
    height: 6vw;
    left: 15vw;
    top: 0;
    object-fit: contain
}

.student-modal-inner .group02 .img-wrap .box.pattern02 {
    align-items: center;
    flex-direction: row-reverse
}

.student-modal-inner .group02 .img-wrap .box.pattern02 img {
    transform: translateY(30%)
}

.student-modal-inner .group02 .img-wrap .box.pattern02 img:nth-of-type(1) {
    width: 10vw;
    height: 10vw
}

.student-modal-inner .group02 .img-wrap .box.pattern03 {
    align-items: end;
    margin-top: -1vw;
    position: relative
}

.student-modal-inner .group02 .img-wrap .box.pattern03::after {
    position: absolute;
    content: "";
    width: 3vw;
    height: 4vw;
    background: url(../images/top/student-popup-common-icon03.svg) no-repeat center center;
    background-size: contain;
    right: -2vw;
    top: 4vw;
    animation: SwitchingRight 1.5s linear infinite
}

.student-modal-inner .group02 .img-wrap .box.pattern03 img:nth-of-type(1) {
    width: 14vw;
    height: 14vw
}

@keyframes popupblinking {

    0%,
    49.99% {
        opacity: 1
    }

    100%,
    50% {
        opacity: 0
    }
}

.life-content {
    width: 100%;
    padding: 5vw 4vw;
    position: relative;
    box-shadow: 0 -4px 23px rgba(0, 0, 0, .1);
    z-index: 1
}

.life-content .gradation-bg {
    width: 100%;
    height: calc(100% + 18vw);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

.life-content .gradation-bg svg.life-gradation-svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: url(#life-gradation);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .05))
}

.life-content p.life-ssection-copy {
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: clamp(2.13rem, 2.08vw, 4rem);
    margin-bottom: 4vw;
    letter-spacing: .15em
}

.life-content h3.life-section-title {
    width: 100%;
    background: #fff;
    padding: 4vw 0 4.5vw 16vw;
    border: 4px #000 solid;
    position: relative;
    z-index: 1;
    opacity: 1
}

.life-content h3.life-section-title span {
    display: block
}

.life-content h3.life-section-title span.text {
    width: fit-content;
    font-size: 2.8vw;
    letter-spacing: .35em;
    font-weight: 700;
    position: relative;
    z-index: 0;
    display: block;
    line-height: 1em
}

.life-content h3.life-section-title span.text::after {
    position: absolute;
    content: "";
    width: 102%;
    height: .35em;
    left: -2%;
    bottom: -.12em;
    transition: .3s ease all;
    background: #ee87b4;
    z-index: -1
}

.life-content h3.life-section-title span.logo-img {
    position: absolute;
    opacity: 0;
    transition: .3s ease all
}

.life-content h3.life-section-title span.logo-img.logo01 {
    width: 24vw;
    right: 26vw;
    top: -3vw
}

.life-content h3.life-section-title span.logo-img.logo02 {
    right: 6vw;
    top: 2vw;
    width: 24vw
}

.life-content h3.life-section-title span.logo-img img {
    width: 100%
}

.life-content h3.life-section-title span.circle {
    position: absolute;
    width: 1em;
    height: 1em;
    background: #000;
    border-radius: 50%;
    z-index: 1
}

.life-content h3.life-section-title span.circle.circle01 {
    left: .8vw;
    top: .6vw
}

.life-content h3.life-section-title span.circle.circle02 {
    left: .8vw;
    bottom: .6vw
}

.life-content h3.life-section-title span.circle.circle03 {
    right: .8vw;
    top: .6vw
}

.life-content h3.life-section-title span.circle.circle04 {
    right: .8vw;
    bottom: .6vw
}

.life-content h3.life-section-title.is-show span.logo-img {
    opacity: 1
}

.life-content h3.life-section-title.is-show span.logo-img.logo01 {
    animation: popUp .5s ease-in-out forwards
}

.life-content h3.life-section-title.is-show span.logo-img.logo02 {
    animation: popUp .4s ease-in-out .2s forwards;
    transition-delay: .2s
}

.life-content .life-qa-inner {
    width: 100%;
    padding: 3vw 0 0;
    border-left: 4px #000 solid;
    border-right: 4px #000 solid;
    border-bottom: 4px #000 solid;
    background: #fff;
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3vw;
    overflow: hidden
}

.life-content .life-qa-inner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-image: radial-gradient(circle, #000 4px, transparent 4px), radial-gradient(circle, #000 4px, transparent 4px);
    background-position: 0 0, 8.5px 17px;
    background-size: 17px 34px;
    animation: moveDots 6s linear infinite
}

.life-content .life-qa-inner .qa-box {
    opacity: 1;
    transition: .3s ease-in-out all
}

.life-content .life-qa-inner .qa-box dl.qa-list dt {
    position: relative;
    padding-left: 3em;
    color: #fff;
    font-weight: 500;
    letter-spacing: .25em;
    font-size: clamp(1.32rem, 1.28vw, 2.47rem);
    margin-bottom: 2vw;
    line-height: 2em
}

.life-content .life-qa-inner .qa-box dl.qa-list dt::after {
    position: absolute;
    content: "Q.";
    color: #fff;
    left: 0;
    line-height: 1em;
    top: 0;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.13rem, 2.08vw, 4rem)
}

.life-content .life-qa-inner .qa-box dl.qa-list dd {
    position: relative;
    padding-left: 3em
}

.life-content .life-qa-inner .qa-box dl.qa-list dd::after {
    position: absolute;
    content: "A.";
    left: 0;
    line-height: 1em;
    top: 0;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.13rem, 2.08vw, 4rem)
}

.life-content .life-qa-inner .qa-box.box01 {
    grid-column: 1/3;
    grid-row: 1/2;
    background: #84ccc9;
    padding: 5.5vw 23vw 6vw 3.5vw;
    border-radius: 0 20vw 20vw 0;
    position: relative;
    overflow: hidden;
    transform: translateX(-40%)
}

.life-content .life-qa-inner .qa-box.box01 dl.qa-list {
    width: 100%
}

.life-content .life-qa-inner .qa-box.box01 .img-box {
    width: 16vw;
    position: absolute;
    right: 6vw;
    bottom: 0;
    max-width: 280px
}

.life-content .life-qa-inner .qa-box.box01 .img-box::after {
    position: absolute;
    content: "";
    width: 4.5vw;
    height: 4.5vw;
    right: -2vw;
    top: 0;
    background: url(../images/top/qa-box01-icon01.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingLeft 1.5s linear infinite
}

.life-content .life-qa-inner .qa-box.box01 .img-box img {
    width: 100%;
    opacity: 0;
    transition: .3s ease all
}

.life-content .life-qa-inner .qa-box.box02 {
    grid-column: 3/4;
    grid-row: 1/2;
    background: #ffb40f;
    padding: 5vw 2vw 3vw 6.5vw;
    border-radius: 20vw 0 0 20vw;
    transform: translateX(100%)
}

.life-content .life-qa-inner .qa-box.box03 {
    grid-column: 1/2;
    grid-row: 2/4;
    background: #86b3e0;
    padding: 10vw 3vw 0 3vw;
    border-radius: 20vw 20vw 0 0;
    display: flex;
    justify-content: end;
    flex-direction: column;
    transform: translateY(50%)
}

.life-content .life-qa-inner .qa-box.box03 dl.qa-list {
    margin-bottom: 2vw
}

.life-content .life-qa-inner .qa-box.box03 .img-box {
    width: calc(100% + 4vw);
    display: flex;
    justify-content: center;
    margin-left: -2vw;
    position: relative
}

.life-content .life-qa-inner .qa-box.box03 .img-box::after,
.life-content .life-qa-inner .qa-box.box03 .img-box::before {
    position: absolute;
    content: "";
    top: 0
}

.life-content .life-qa-inner .qa-box.box03 .img-box::after {
    width: 3vw;
    height: 4.2vw;
    left: 0;
    background: url(../images/top/qa-box03-icon01.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingLeft 1.5s linear infinite
}

.life-content .life-qa-inner .qa-box.box03 .img-box::before {
    width: 3.5vw;
    height: 3.5vw;
    right: 0;
    background: url(../images/top/qa-box03-icon02.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingRight 1.5s linear infinite
}

.life-content .life-qa-inner .qa-box.box03 .img-box img {
    width: 45%;
    display: block;
    opacity: 0;
    transition: .3s ease all
}

.life-content .life-qa-inner .qa-box.box04 {
    grid-column: 2/4;
    grid-row: 2/3;
    background: #f29c9f;
    padding: 5vw 3vw 5.5vw 23vw;
    border-radius: 20vw 0 0 20vw;
    position: relative;
    transform: translateX(80%)
}

.life-content .life-qa-inner .qa-box.box04 .img-box {
    width: 20vw;
    position: absolute;
    left: 1.5vw;
    top: 50%;
    transform: translateY(-50%) translateX(0)
}

.life-content .life-qa-inner .qa-box.box04 .img-box::after,
.life-content .life-qa-inner .qa-box.box04 .img-box::before {
    position: absolute;
    content: "";
    width: 3vw;
    height: 4vw;
    background: url(../images/top/qa-box04-icon01.svg) no-repeat center center;
    background-size: contain
}

.life-content .life-qa-inner .qa-box.box04 .img-box::after {
    left: 0;
    bottom: 0;
    animation: LifeSwitchingLeft 1.8s linear infinite
}

.life-content .life-qa-inner .qa-box.box04 .img-box::before {
    top: 0;
    right: 0;
    animation: LifeSwitchingRight 2s linear infinite
}

.life-content .life-qa-inner .qa-box.box04 .img-box img {
    width: 100%;
    opacity: 0;
    transition: .3s ease all
}

.life-content .life-qa-inner .qa-box.box04 dl.qa-list {
    width: 100%
}

.life-content .life-qa-inner .qa-box.box05 {
    grid-column: 2/3;
    grid-row: 3/4;
    background: #c490bf;
    padding: 3vw 7vw 3vw 3vw;
    border-radius: 0 20vw 20vw 0;
    margin-bottom: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(20%)
}

.life-content .life-qa-inner .qa-box.box06 {
    grid-column: 3/4;
    grid-row: 3/4;
    background: #049058;
    padding: 9vw 3.5vw 3vw 3.5vw;
    border-radius: 20vw 20vw 0 0;
    position: relative;
    transform: translateY(30%)
}

.life-content .life-qa-inner .qa-box.box06 .img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 16vw;
    transform: translateY(-45%) translateX(-30%)
}

.life-content .life-qa-inner .qa-box.box06 .img-box::after {
    position: absolute;
    content: "";
    width: 4.5vw;
    height: 4.5vw;
    right: -3vw;
    bottom: 1vw;
    background: url(../images/top/qa-box06-icon01.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingRight 2s linear infinite
}

.life-content .life-qa-inner .qa-box.box06 .img-box img {
    width: 100%;
    opacity: 0;
    transition: .3s ease all
}

.life-content .life-qa-inner .qa-box.is-show {
    opacity: 1
}

.life-content .life-qa-inner .qa-box.is-show.box01 {
    transform: translateX(0)
}

.life-content .life-qa-inner .qa-box.is-show.box01 .img-box img {
    opacity: 1;
    transition-delay: .2s;
    animation: popUp .5s ease-in-out .2s forwards
}

.life-content .life-qa-inner .qa-box.is-show.box02 {
    transform: translateX(0);
    transition-delay: .2s
}

.life-content .life-qa-inner .qa-box.is-show.box03 {
    transform: translateY(0)
}

.life-content .life-qa-inner .qa-box.is-show.box03 .img-box img {
    opacity: 1;
    transition-delay: .2s;
    animation: popUp .5s ease-in-out .2s forwards
}

.life-content .life-qa-inner .qa-box.is-show.box04 {
    transform: translateX(0)
}

.life-content .life-qa-inner .qa-box.is-show.box04 .img-box img {
    opacity: 1;
    transition-delay: .2s;
    animation: popUp .5s ease-in-out .2s forwards
}

.life-content .life-qa-inner .qa-box.is-show.box05 {
    transform: translateY(0)
}

.life-content .life-qa-inner .qa-box.is-show.box06 {
    transform: translateY(0)
}

.life-content .life-qa-inner .qa-box.is-show.box06 .img-box img {
    opacity: 1;
    transition-delay: .2s;
    animation: popUp .5s ease-in-out .2s forwards
}

@keyframes moveDots {
    0% {
        background-position: 0 0, 8.5px 17px
    }

    100% {
        background-position: 17px 34px, 25.5px 51px
    }
}

@keyframes LifeSwitchingRight {

    0%,
    100%,
    49% {
        transform: rotate(5deg) translateY(80%) translateX(-70%)
    }

    50%,
    99% {
        transform: rotate(-5deg) translateY(80%) translateX(-70%)
    }
}

@keyframes LifeSwitchingLeft {

    0%,
    100%,
    49% {
        transform: rotate(-5deg) translateY(-75%) translateX(70%) scale(-1, -1)
    }

    50%,
    99% {
        transform: rotate(5deg) translateY(-75%) translateX(70%) scale(-1, -1)
    }
}

.navi-content {
    width: 100%;
    padding: 25vw 10vw 30vw;
    background: #84ccc9;
    overflow: hidden;
    position: relative
}

.navi-content .navi-dot-bg {
    position: absolute;
    width: 100%;
    height: 15vw;
    left: 0;
    background: #ffe045;
    opacity: 1
}

.navi-content .navi-dot-bg::after {
    position: absolute;
    content: "";
    width: 200%;
    height: 23vw;
    left: 0;
    background: url(../images/top/navi-dot-bg01.svg) center center;
    background-size: contain;
    animation: scroll-loop 100s linear infinite
}

.navi-content .navi-dot-bg.top {
    top: 0
}

.navi-content .navi-dot-bg.top::after {
    bottom: -22.5vw
}

.navi-content .navi-dot-bg.bottom {
    bottom: 0
}

.navi-content .navi-dot-bg.bottom::after {
    top: -22.5vw;
    background: url(../images/top/navi-dot-bg02.svg) center center;
    background-size: contain;
    animation: scroll-loop 100s linear
}

.navi-content h3.navi-section-title {
    width: 60%;
    position: relative;
    margin: 0 auto 4vw;
    opacity: 0;
    transition: .3s ease all
}

.navi-content h3.navi-section-title::after {
    position: absolute;
    content: "";
    width: 18vw;
    height: 12vw;
    left: -9vw;
    top: -9vw;
    background: url(../images/top/navi-section-title-copy.svg) no-repeat center center;
    background-size: contain;
    opacity: 0;
    transition: .3s ease all
}

.navi-content h3.navi-section-title img {
    width: 100%
}

.navi-content h3.navi-section-title .icon {
    position: absolute;
    width: 8vw;
    height: 8vw;
    right: 0;
    top: 0;
    transform: translateY(-65%) translateX(65%)
}

.navi-content h3.navi-section-title.is-show {
    opacity: 1;
    animation: popUp .4s ease-in-out forwards
}

.navi-content h3.navi-section-title.is-show::after {
    opacity: 1;
    transition-delay: .4s;
    animation: popUp .3s ease-in-out .4s forwards
}

.navi-content h3.navi-section-title.is-show .icon {
    animation: 2s ease NaviSwitching infinite
}

.navi-content ul.navi-tab-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 0;
    margin: 0 auto 8vw;
    opacity: 1
}

.navi-content ul.navi-tab-list li {
    width: 49%;
    border: 1px #000 solid;
    border-radius: 20vw;
    line-height: 1em;
    padding: 1vw 0;
    text-align: center;
    font-weight: 400;
    font-size: clamp(1.67rem, 1.63vw, 3.13rem);
    letter-spacing: .15em;
    position: relative;
    cursor: pointer
}

.navi-content ul.navi-tab-list li::before {
    opacity: 0;
    transition: .3s ease all
}

.navi-content ul.navi-tab-list li span {
    display: inline-block;
    color: #0661b5;
    font-weight: 700;
    font-size: clamp(1.78rem, 1.74vw, 3.33rem);
    letter-spacing: .15em;
    margin-right: .2em
}

.navi-content ul.navi-tab-list li.active {
    background: #fff;
    padding: 1vw 11vw 1vw 0;
    text-align: end
}

.navi-content ul.navi-tab-list li.active::before {
    position: absolute;
    content: "";
    width: 10vw;
    height: 5vw;
    right: 1.5vw;
    top: -1.7vw;
    background: url(../images/top/navi-section-tab-icon01.svg) no-repeat center center;
    background-size: contain;
    transition: .3s ease all;
    transform: translateY(-70%) translateX(-15%)
}

.navi-content ul.navi-tab-list li.active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    left: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 20vw;
    transform: translateY(21%) translateX(1%)
}

.navi-content ul.navi-tab-list.is-show li.active::before {
    opacity: 1;
    animation: popUp .5s ease-in-out both
}

.navi-content .navi-tab-inner {
    width: 100%;
    position: relative;
    display: none;
    transition: .3s ease all;
    margin-bottom: 8vw
}

.navi-content .navi-tab-inner .navi-slider-icon01-box {
    width: 5vw;
    height: 5vw;
    left: 5vw;
    top: 0;
    position: absolute
}

.navi-content .navi-tab-inner .navi-slider-icon01-box::after,
.navi-content .navi-tab-inner .navi-slider-icon01-box::before {
    position: absolute;
    content: "";
    background: url(../images/top/navi-slider-icon01.svg) no-repeat center center;
    background-size: contain
}

.navi-content .navi-tab-inner .navi-slider-icon01-box::after {
    width: 3vw;
    height: 3vw;
    animation: blinking 1.8s ease-in-out infinite
}

.navi-content .navi-tab-inner .navi-slider-icon01-box::before {
    width: 6vw;
    height: 6vw;
    animation: blinking 2.2s ease-in-out .3s infinite;
    transform: translateY(-50%) translateX(35%)
}

.navi-content .navi-tab-inner .navi-slider-icon02-box {
    position: absolute;
    right: 9vw;
    bottom: 3vw
}

.navi-content .navi-tab-inner .navi-slider-icon02-box::after,
.navi-content .navi-tab-inner .navi-slider-icon02-box::before {
    position: absolute;
    content: ""
}

.navi-content .navi-tab-inner .navi-slider-icon02-box::after {
    background: url(../images/top/navi-slider-icon02.svg) no-repeat center center;
    background-size: contain;
    width: 6vw;
    height: 6vw;
    transform: translateY(-50%) translateX(-70%);
    animation: blinking 1.8s ease-in-out infinite
}

.navi-content .navi-tab-inner .navi-slider-icon02-box::before {
    background: url(../images/top/navi-slider-icon03.svg) no-repeat center center;
    background-size: contain;
    width: 3vw;
    height: 3vw;
    transform: translateY(30%) translateX(35%);
    animation: blinking 2.2s ease-in-out .3s infinite
}

.navi-content .navi-tab-inner ul.navi-slider {
    width: 55%;
    margin: 0 auto;
    position: relative
}

.navi-content .navi-tab-inner ul.navi-slider::after {
    position: absolute;
    content: "";
    width: 110%;
    height: 36vw;
    left: 50%;
    top: -2vw;
    background: url(../images/top/navi-slider-frame-icon.svg) no-repeat center center;
    background-size: contain;
    transform: translateY(0) translateX(-50%);
    pointer-events: none
}

.navi-content .navi-tab-inner ul.navi-slider li img {
    width: 100%;
    height: 32vw;
    object-fit: cover;
    background: #666;
    border-radius: 2vw;
    box-shadow: 7px 7px 14px rgba(0, 0, 0, .3)
}

.navi-content .navi-tab-inner ul.navi-slider li p.copy-text {
    position: absolute;
    left: -5vw;
    bottom: 5vw;
    opacity: 0;
    transition: .3s ease all
}

.navi-content .navi-tab-inner ul.navi-slider li p.copy-text span {
    display: inline-block;
    letter-spacing: .2em;
    font-size: clamp(1.42rem, 1.39vw, 2.67rem);
    background: #fff;
    line-height: 1em;
    padding: 1vw 2vw;
    border-radius: 20vw;
    border: 1px #000 solid;
    letter-spacing: .2em
}

.navi-content .navi-tab-inner ul.navi-slider li p.copy-text span:nth-of-type(1) {
    position: relative;
    z-index: 0
}

.navi-content .navi-tab-inner ul.navi-slider li p.copy-text span:nth-of-type(1)::after {
    position: absolute;
    content: "";
    border-bottom: 4px #fff solid;
    left: 5vw;
    bottom: -3px;
    width: calc(100% - 6vw);
    z-index: 1
}

.navi-content .navi-tab-inner ul.navi-slider li p.copy-text span:nth-of-type(2) {
    margin-left: 4vw;
    margin-top: -3px
}

.navi-content .navi-tab-inner ul.navi-slider li.slick-active p.copy-text,
.navi-content .navi-tab-inner ul.navi-slider li.slick-current p.copy-text {
    opacity: 1;
    transition-delay: .2s;
    animation: popUp .5s ease-in-out .2s both
}

.navi-content .navi-tab-inner ul.navi-slider .slick-list {
    overflow: visible !important
}

.navi-content .navi-tab-inner ul.navi-slider .slick-arrow {
    background: #0661b5;
    width: 2.3vw;
    height: 3vw;
    top: 40%
}

.navi-content .navi-tab-inner ul.navi-slider .slick-arrow::after,
.navi-content .navi-tab-inner ul.navi-slider .slick-arrow::before {
    content: none !important
}

.navi-content .navi-tab-inner ul.navi-slider .slick-arrow.slick-next {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: -7vw
}

.navi-content .navi-tab-inner ul.navi-slider .slick-arrow.slick-prev {
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    left: -7vw
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots {
    position: relative;
    width: 73%;
    margin: 5vw auto 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20vw;
    padding: .2vw;
    bottom: 0
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li {
    background: #0661b5;
    border-radius: 50%;
    width: 1vw;
    height: 1vw;
    padding: 0 !important;
    margin: 0 auto
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li::after {
    position: absolute;
    content: "00:00";
    color: #0661b5;
    text-align: center;
    top: -1.5vw;
    font-weight: 600;
    left: 50%;
    opacity: 0;
    transition: .3s ease all;
    font-size: clamp(1.07rem, 1.04vw, 2rem);
    transform: translateY(-100%) translateX(-50%)
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0 !important
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li button::before {
    content: none
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li button::after {
    transition: .3s ease all;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4vw;
    height: 4vw;
    background: url(../images/top/slider-current-icon.svg) no-repeat center center;
    transform: translateY(-50%) translateX(-50%) scale(0);
    opacity: 0
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li.slick-active::after {
    opacity: 1
}

.navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li.slick-active button::after {
    transform: translateY(-50%) translateX(-50%) scale(1);
    opacity: 1
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider01 ul.slick-dots li:nth-of-type(1)::after {
    content: "9:30"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider01 ul.slick-dots li:nth-of-type(2)::after {
    content: "10:45"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider01 ul.slick-dots li:nth-of-type(3)::after {
    content: "12:15"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider01 ul.slick-dots li:nth-of-type(4)::after {
    content: "14:45"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider01 ul.slick-dots li:nth-of-type(5)::after {
    content: "18:00"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider02 ul.slick-dots li:nth-of-type(1)::after {
    content: "10:45"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider02 ul.slick-dots li:nth-of-type(2)::after {
    content: "13:05"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider02 ul.slick-dots li:nth-of-type(3)::after {
    content: "14:50"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider02 ul.slick-dots li:nth-of-type(4)::after {
    content: "16:30"
}

.navi-content .navi-tab-inner ul.navi-slider.navi-slider02 ul.slick-dots li:nth-of-type(5)::after {
    content: "17:00"
}

.navi-content .navi-tab-inner.active {
    display: block
}

.navi-content .navi-column-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    opacity: 1;
    position: relative;
    z-index: 1
}

.navi-content .navi-column-inner a.navi-movie-link {
    display: block;
    position: relative;
    margin-right: 3vw
}

.navi-content .navi-column-inner a.navi-movie-link img {
    object-fit: contain
}

.navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(1) {
    position: absolute;
    width: 17vw;
    height: 12vw;
    left: 0;
    top: 0;
    transform: translateY(10%) translateX(-20%);
    opacity: 0
}

.navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(2) {
    display: block;
    width: 100%;
    height: 41vw;
    width: 50vw
}

.navi-content .navi-column-inner .navi-link-box {
    display: flex;
    justify-content: center;
    align-items: end
}

.navi-content .navi-column-inner .navi-link-box .kirinuki {
    width: 11vw;
    z-index: 1;
    position: relative;
    opacity: 0
}

.navi-content .navi-column-inner .navi-link-box .kirinuki::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 16vw;
    height: 7vw;
    background: url(../images/top/navi-fukidashi01.webp) no-repeat center center;
    background-size: contain;
    transform: translateY(-50%) translateX(100%)
}

.navi-content .navi-column-inner .navi-link-box .kirinuki img {
    width: 100%
}

.navi-content .navi-column-inner .navi-link-box a.navi-circle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19vw;
    height: 19vw;
    background: #0661b5;
    border-radius: 50%;
    position: relative;
    flex-direction: column;
    margin-bottom: 2vw;
    transform: translateX(-20%)
}

.navi-content .navi-column-inner .navi-link-box a.navi-circle-link::after {
    position: absolute;
    content: "";
    width: 90%;
    height: 90%;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: dotted 3px #fff;
    animation: rotate_anime 80s linear infinite
}

.navi-content .navi-column-inner .navi-link-box a.navi-circle-link span {
    color: #fff;
    text-align: center;
    font-size: clamp(1.35rem, 1.32vw, 2.53rem);
    letter-spacing: .2em;
    position: relative;
    display: inline-block;
    margin-bottom: .5vw;
    line-height: 2em
}

.navi-content .navi-column-inner .navi-link-box a.navi-circle-link .icon {
    width: 5vw;
    height: 3vw;
    margin: 0 auto -2vw;
    position: relative
}

.navi-content .navi-column-inner .navi-link-box a.navi-circle-link .icon img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.navi-content .navi-column-inner.is-show a.navi-movie-link img:nth-of-type(1) {
    opacity: 1;
    animation: popUp .3s ease-in-out forwards
}

.navi-content .navi-column-inner.is-show .navi-link-box .kirinuki {
    opacity: 1;
    transition-delay: .4s;
    animation: popUp .3s ease-in-out .4s forwards
}

@keyframes pop {
    to {
        opacity: 1;
        transform: scale(.8)
    }
}

@keyframes pop_inside {
    to {
        opacity: 1;
        transform: scale(1.05)
    }
}

@keyframes pop_middle {
    to {
        opacity: 1;
        transform: scale(.96)
    }
}

@keyframes NaviSwitching {
    0% {
        background: url(../images/top/navi-section-title-icon01.svg) no-repeat center center;
        background-size: contain
    }

    33.333% {
        background: url(../images/top/navi-section-title-icon01.svg) no-repeat center center;
        background-size: contain
    }

    33.334% {
        background: url(../images/top/navi-section-title-icon02.svg) no-repeat center center;
        background-size: contain
    }

    66.666% {
        background: url(../images/top/navi-section-title-icon02.svg) no-repeat center center;
        background-size: contain
    }

    66.667% {
        background: url(../images/top/navi-section-title-icon03.svg) no-repeat center center;
        background-size: contain
    }

    100% {
        background: url(../images/top/navi-section-title-icon03.svg) no-repeat center center;
        background-size: contain
    }
}

@keyframes blinking {

    0%,
    100%,
    40% {
        opacity: 0
    }

    50%,
    90% {
        opacity: 1
    }

    45%,
    85% {
        opacity: .7
    }
}

@keyframes rotate_anime {
    0% {
        transform: translateY(-50%) translateX(-50%) rotate(0)
    }

    100% {
        transform: translateY(-50%) translateX(-50%) rotate(360deg)
    }
}

.event-content {
    width: 100%;
    overflow: hidden;
    z-index: 3;
    margin-top: -22vw;
    position: relative;
    opacity: 1
}

.event-content .event-inner {
    width: calc(100% + 30vw);
    margin-left: -15vw;
    position: relative;
    z-index: 0;
    padding: 0 15vw 25vw;
    min-height: 40vw;
    overflow: hidden;
    clip-path: url(#eventmask);
    background: #d7d4ea
}

.event-content .event-inner::after {
    position: absolute;
    content: "";
    width: 15vw;
    height: 13vw;
    left: 14vw;
    top: 25vw;
    background: url(../images/top/event-kirinuki01.webp) no-repeat center center;
    background-size: contain;
    opacity: 0
}

.event-content .event-inner::before {
    position: absolute;
    content: "";
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 2vw, transparent 2vw, transparent 5vw);
    animation: StripeLoop 10s linear infinite
}

.event-content .event-inner .event-bg-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

.event-content .event-inner .event-bg-circle svg {
    width: 100%;
    height: 100%;
    display: block
}

.event-content .event-inner .event-title-icon {
    width: 100%;
    height: 5vw;
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto 3vw;
    padding: 2.8vw;
    opacity: 0;
    transition: .2s ease-in-out all;
    transform: translateY(-140%)
}

.event-content .event-inner .event-title-icon::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 4vw;
    background: url(../images/top/event-title-icon01.svg) no-repeat center center;
    background-size: contain;
    left: 50%;
    top: 0;
    transform: translateY(9%) translateX(-50%)
}

.event-content .event-inner .event-title-icon img {
    display: block;
    width: 2vw;
    height: 3vw;
    margin: 0 5vw;
    animation: EventSwingLeft 5s linear infinite;
    transform-origin: top center
}

.event-content .event-inner .event-title-icon img:nth-of-type(2) {
    height: 5vw;
    animation: EventSwingRigth 5s linear infinite
}

.event-content .event-inner .event-title-icon img:nth-of-type(3) {
    animation-delay: .2s
}

.event-content .event-inner .event-title-icon.is-show {
    opacity: 1;
    transform: translateY(0)
}

.event-content .event-inner h3.event-section-title {
    width: 70%;
    position: relative;
    z-index: 0;
    margin: 0 auto 2vw;
    z-index: 0;
    transform: translateY(-170%);
    transition: .3s ease-in-out all;
    opacity: 0
}

.event-content .event-inner h3.event-section-title::after,
.event-content .event-inner h3.event-section-title::before {
    position: absolute;
    content: "";
    border-left: 1px #000 solid;
    height: 7vw;
    transform: translateY(-84%);
    top: 0;
    z-index: -1
}

.event-content .event-inner h3.event-section-title::after {
    left: 12vw
}

.event-content .event-inner h3.event-section-title::before {
    right: 12vw
}

.event-content .event-inner h3.event-section-title img:nth-of-type(1) {
    width: 80%;
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transition: .3s ease all
}

.event-content .event-inner h3.event-section-title img:nth-of-type(2) {
    width: 100%;
    display: block
}

.event-content .event-inner h3.event-section-title.is-show {
    transition-delay: .4s;
    opacity: 1;
    transform: translateY(0)
}

.event-content .event-inner h3.event-section-title.is-show img:nth-of-type(1) {
    opacity: 1;
    transition-delay: .6s;
    animation: .3s EventTitleSwing01 linear .6s both, 1s EventTitleSwing04 ease-in-out .5s both
}

.event-content .event-inner h3.event-section-title.is-show img:nth-of-type(2) {
    animation: 1s EventTitleSwing02 linear both, 1s EventTitleSwing03 ease-in-out .5s both
}

.event-content .event-inner p.paragraph {
    width: 50%;
    margin: 0 auto 5vw;
    position: relative
}

.event-content .event-inner p.paragraph::after {
    position: absolute;
    content: "";
    width: 14vw;
    height: 10vw;
    right: -13vw;
    bottom: -13vw;
    background: url(../images/top/event-icon01.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingRight 2s linear infinite
}

.event-content .event-inner ul.event-card-list {
    margin: 0 auto 8vw;
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 1
}

.event-content .event-inner ul.event-card-list li {
    width: 17vw;
    transform-origin: bottom center;
    transition: .2s ease-in-out
}

.event-content .event-inner ul.event-card-list li img {
    width: 100%
}

.event-content .event-inner ul.event-card-list li:nth-of-type(1) {
    transform: rotate(-22deg) translateY(28%) translateX(53%);
    z-index: 1
}

.event-content .event-inner ul.event-card-list li:nth-of-type(2) {
    transform: rotate(-5deg) translateY(5%) translateX(15%);
    z-index: 2
}

.event-content .event-inner ul.event-card-list li:nth-of-type(3) {
    transform: rotate(6deg) translateY(5%) translateX(-15%);
    z-index: 2
}

.event-content .event-inner ul.event-card-list li:nth-of-type(4) {
    transform: rotate(15deg) translateY(20%) translateX(-40%);
    z-index: 3
}

.event-content .event-inner ul.event-card-list li.is-active {
    transition: .2s ease-in-out;
    z-index: 4
}

.event-content .event-inner ul.event-card-list li.is-active:nth-of-type(1) {
    transform: rotate(-12deg) translateY(0) translateX(34%);
    margin-right: 3vw
}

.event-content .event-inner ul.event-card-list li.is-active:nth-of-type(2) {
    transform: rotate(-2deg) translateY(-9%) translateX(25%);
    margin-right: 6vw
}

.event-content .event-inner ul.event-card-list li.is-active:nth-of-type(3) {
    transform: rotate(6deg) translateY(-10%) translateX(2%);
    margin-right: 6vw
}

.event-content .event-inner ul.event-card-list li.is-active:nth-of-type(4) {
    transform: rotate(12deg) translateY(6%) translateX(-21%);
    margin-left: 2vw
}

.event-content .event-inner ul.event-card-list.is-show::after,
.event-content .event-inner ul.event-card-list.is-show::before {
    opacity: 1 !important;
    animation: popUp .3s ease-in-out forwards
}

.event-content .event-inner ul.event-card-list.list01 {
    margin-right: 12vw
}

.event-content .event-inner ul.event-card-list.list01::after {
    position: absolute;
    content: "";
    width: 14vw;
    height: 19vw;
    right: -7vw;
    bottom: -10vw;
    background: url(../images/top/event-kirinuki02.webp) no-repeat center center;
    background-size: contain;
    opacity: 0
}

.event-content .event-inner ul.event-card-list.list01::before {
    position: absolute;
    content: "";
    width: 13vw;
    height: 17vw;
    left: -2vw;
    bottom: -24vw;
    background: url(../images/top/event-kirinuki03.webp) no-repeat center center;
    background-size: contain;
    opacity: 0
}

.event-content .event-inner ul.event-card-list.list02 {
    margin-left: 12vw
}

.event-content .event-inner ul.event-card-list.list02::before {
    position: absolute;
    content: "";
    width: 20vw;
    height: 28vw;
    left: -10vw;
    bottom: -31vw;
    transform: translateY(92%) translateX(-50%);
    background: url(../images/top/event-kirinuki04.webp) no-repeat center center;
    background-size: contain;
    opacity: 0
}

.event-content .event-inner ul.event-card-list.list02::after {
    position: absolute;
    content: "";
    width: 14vw;
    height: 28vw;
    right: 8vw;
    bottom: -34vw;
    background: url(../images/top/event-kirinuki05.webp) no-repeat center center;
    background-size: contain;
    transform: translateY(100%) translateX(-60%);
    opacity: 0
}

.event-content .event-inner ul.event-card-list.list02 li:nth-of-type(1) {
    z-index: 4
}

.event-content .event-inner ul.event-card-list.list02 li:nth-of-type(2) {
    z-index: 3
}

.event-content .event-inner ul.event-card-list.list02 li:nth-of-type(3) {
    z-index: 2
}

.event-content .event-inner ul.event-card-list.list02 li:nth-of-type(4) {
    z-index: 1
}

.event-content .event-inner ul.event-card-list.list02 li.is-active {
    z-index: 4
}

.event-content .event-inner ul.event-card-list.list02 li.is-active:nth-of-type(1) {
    transform: rotate(-13deg) translateY(0) translateX(40%)
}

.event-content .event-inner ul.event-card-list.list02 li.is-active:nth-of-type(2) {
    transform: rotate(-2deg) translateY(-9%) translateX(32%)
}

.event-content .event-inner .event-kirinuki-box03 {
    width: 33%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(10%) translateX(-50%)
}

.event-content .event-inner .event-kirinuki-box03::after {
    position: absolute;
    content: "";
    width: 15vw;
    height: 6vw;
    left: -7vw;
    top: 4vw;
    background: url(../images/top/event-icon02.svg) no-repeat center center;
    background-size: contain;
    animation: SwitchingRight 2s linear infinite
}

.event-content .event-inner .event-kirinuki-box03 img {
    width: 100%
}

.event-content.is-show .event-inner::after {
    opacity: 1;
    transition-delay: 1s;
    animation: popUp .3s ease-in-out 1s forwards
}

@keyframes StripeLoop {
    0% {
        background-position: 0 0
    }

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

@keyframes EventSwingLeft {
    0% {
        transform: rotate(10deg)
    }

    50% {
        transform: rotate(-10deg)
    }

    100% {
        transform: rotate(10deg)
    }
}

@keyframes EventSwingRigth {
    0% {
        transform: rotate(-10deg)
    }

    45% {
        transform: rotate(10deg)
    }

    100% {
        transform: rotate(-10deg)
    }
}

@keyframes EventTitleSwing01 {
    0% {
        transform: translateY(-50%) translateX(-50%) scaleY(.3)
    }

    60% {
        transform: translateY(-50%) translateX(-50%) scaleY(1.05)
    }

    80% {
        transform: translateY(-50%) translateX(-50%) scaleY(.98)
    }

    100% {
        transform: translateY(-50%) translateX(-50%) scaleY(1)
    }
}

@keyframes EventTitleSwing02 {
    0% {
        transform: translateY(-20%) scaleY(.3)
    }

    60% {
        transform: translateY(5%) scaleY(1.05)
    }

    80% {
        transform: translateY(-2%) scaleY(.98)
    }

    100% {
        transform: translateY(0) scaleY(1)
    }
}

@keyframes EventTitleSwing03 {
    0% {
        transform: rotate(2deg) translateX(-1%)
    }

    25% {
        transform: rotate(-2deg) translateX(1%)
    }

    50% {
        transform: rotate(2deg) translateX(-1%)
    }

    75% {
        transform: rotate(-1deg) translateX(.5%)
    }

    100% {
        transform: rotate(0) translateX(0)
    }
}

@keyframes EventTitleSwing04 {
    0% {
        transform: rotate(1deg) translateY(-50%) translateX(-50.2%)
    }

    25% {
        transform: rotate(-1deg) translateY(-50%) translateX(-49.2%)
    }

    50% {
        transform: rotate(1deg) translateY(-50%) translateX(-50.2%)
    }

    75% {
        transform: rotate(-.5deg) translateY(-50%) translateX(-49.75%)
    }

    100% {
        transform: rotate(0) translateY(-50%) translateX(-50%)
    }
}

.sns-content {
    width: 100%;
    background: #f6babc;
    padding: 35vw 12vw 10vw;
    margin-top: -25vw;
    position: relative;
    overflow: hidden
}

.sns-content ul.sns-bgtext-list {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute
}

.sns-content ul.sns-bgtext-list li {
    width: 154%;
    height: 8vw;
    margin: 2vw auto;
    left: 0;
    z-index: 3;
    transform: rotate(-8deg)
}

.sns-content ul.sns-bgtext-list li::after,
.sns-content ul.sns-bgtext-list li::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .4;
    background: url(../images/top/sns-bg-text.svg) repeat center center;
    background-size: contain;
    z-index: 2
}

.sns-content ul.sns-bgtext-list li::before {
    animation: loop 200s -100s linear infinite
}

.sns-content ul.sns-bgtext-list li::after {
    animation: loop 200s linear infinite
}

.sns-content ul.sns-bgtext-list li:nth-of-type(2n)::before {
    animation: loop02 200s -100s linear infinite
}

.sns-content ul.sns-bgtext-list li:nth-of-type(2n)::after {
    animation: loop02 200s linear infinite
}

.sns-content .sns-inner {
    background: #fff;
    border-radius: 1.5vw;
    border: 2px #f272ac solid;
    box-shadow: 3px 2px 10px rgba(242, 114, 172, .5);
    position: relative;
    padding-bottom: 8vw
}

.sns-content .sns-inner::after {
    position: absolute;
    content: "";
    width: calc(100% - 1vw);
    height: calc(100% - 1vw);
    left: 50%;
    top: 50%;
    border: 2px #f272ac solid;
    box-shadow: inset 3px 2px 10px rgba(242, 114, 172, .5);
    border-radius: 1vw;
    transform: translateY(-50%) translateX(-50%);
    pointer-events: none
}

.sns-content .sns-inner .text-column {
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    position: relative;
    padding: 0 5vw;
    margin-bottom: -4vw;
    opacity: 1
}

.sns-content .sns-inner .text-column .group01 {
    width: 12vw;
    transform: translateY(-5%)
}

.sns-content .sns-inner .text-column .group01 .kirinuki-box {
    position: relative;
    z-index: 0
}

.sns-content .sns-inner .text-column .group01 .kirinuki-box img {
    width: 100%
}

.sns-content .sns-inner .text-column .group01 .kirinuki-box img:nth-of-type(1) {
    opacity: 0
}

.sns-content .sns-inner .text-column .group01 .kirinuki-box img:nth-of-type(2) {
    position: absolute;
    left: -9vw;
    top: -4vw;
    width: 14vw;
    height: 14vw;
    z-index: -1;
    opacity: 1;
    animation: SwitchingRight 2.5s linear infinite
}

.sns-content .sns-inner .text-column .group01 .icon-box {
    position: relative;
    width: 16vw;
    height: 16vw;
    transform: translateY(-35%) translateX(-22%)
}

.sns-content .sns-inner .text-column .group01 .icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0;
    top: 0;
    position: absolute
}

.sns-content .sns-inner .text-column .group02 {
    width: calc(100% - 15vw)
}

.sns-content .sns-inner .text-column .group02 h3.sns-section-title {
    width: calc(100% + 5vw);
    height: 27vw;
    position: relative;
    margin-left: -5vw;
    margin-top: -4vw;
    margin-bottom: 1vw
}

.sns-content .sns-inner .text-column .group02 h3.sns-section-title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 0;
    transition: .3s ease all
}

.sns-content .sns-inner .text-column .group02 p.paragraph {
    width: 65%;
    margin: 0 0 0 auto
}

.sns-content .sns-inner .text-column.is-show .group01 .kirinuki-box img:nth-of-type(1) {
    opacity: 1;
    animation: popUp .3s ease-in-out forwards
}

.sns-content .sns-inner .text-column.is-show .group02 h3.sns-section-title img {
    opacity: 1;
    animation: popUp .3s ease-in-out forwards
}

.sns-content .sns-inner .text-column.is-show .group02 h3.sns-section-title img:nth-of-type(2) {
    transition-delay: .1s;
    animation-delay: .1s
}

.sns-content .sns-inner .text-column.is-show .group02 h3.sns-section-title img:nth-of-type(3) {
    transition-delay: .2s;
    animation-delay: .2s
}

.sns-content .sns-inner ul.sns-slider-list {
    width: calc(100% - 27.5vw);
    margin: 0 auto 3.125vw;
    position: relative;
    z-index: 0
}

.sns-content .sns-inner ul.sns-slider-list::after,
.sns-content .sns-inner ul.sns-slider-list::before {
    position: absolute;
    content: "";
    transform: translateY(-100%) translateX(0)
}

.sns-content .sns-inner ul.sns-slider-list::after {
    width: 10vw;
    height: 10vw;
    top: 1.5vw;
    left: 8vw;
    background: url(../images/top/sns-icon01.svg) no-repeat center center;
    background-size: contain;
    z-index: -2
}

.sns-content .sns-inner ul.sns-slider-list::before {
    width: 10vw;
    height: 10vw;
    top: -15vw;
    left: 11vw;
    background: url(../images/top/sns-icon02.svg) no-repeat center center;
    background-size: contain;
    z-index: -1;
    animation: SwitchingLeft 2.5s linear infinite
}

.sns-content .sns-inner ul.sns-slider-list li {
    margin: 0 2.5vw;
    border-radius: 0.78vw;
    height: 31.56vw;
    position: relative;
    overflow: visible;
    margin-bottom: 8px;
}
@media (max-width: 767px) {
    .sns-content .sns-inner ul.sns-slider-list li {
        border-radius: 2.67vw; 
    }
}

.sns-content .sns-inner .sns-slider-list li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    border-radius: inherit;
    background: linear-gradient(90deg, #B3E1F0 0%, #D5C9F6 100%);
    z-index: -1;

}

.sns-content .sns-inner ul.sns-slider-list li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5vw 7vw 1.5vw;
    z-index: 0;
    position: relative;
    border-radius: 0.78vw;
    overflow: hidden;
    border: 1px solid #000000;
    box-sizing: border-box; 
}
@media (max-width: 767px) {
    .sns-content .sns-inner ul.sns-slider-list li a{
        border-radius: 2.67vw; 
    }
}

.sns-content .sns-inner ul.sns-slider-list li a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background: #000;
    opacity: 0;
    transition: .3s ease all;
    mix-blend-mode: multiply
}

.sns-content .sns-inner ul.sns-slider-list li a img {
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: inherit;
}

.sns-content .sns-inner ul.sns-slider-list li a p.text {
    color: #fff;
    font-size: clamp(.92rem, .9vw, 1.73rem);
    opacity: 0;
    transition: .3s ease all;
    position: relative;
    text-align: center
}

.sns-content .sns-inner ul.sns-slider-list li a p.text::after {
    position: absolute;
    content: "";
    width: 3vw;
    height: 3vw;
    left: 50%;
    bottom: -1vw;
    background: url(../images/top/sns-slider-icon.svg) no-repeat center center;
    background-size: contain;
    transform: translateY(100%) translateX(-50%)
}

.sns-content .sns-inner ul.sns-slider-list li a:hover {
    opacity: 1
}

.sns-content .sns-inner ul.sns-slider-list li a:hover::after {
    opacity: .7
}

.sns-content .sns-inner ul.sns-slider-list li a:hover p.text {
    opacity: 1
}

.sns-content .sns-inner ul.sns-slider-list .slick-arrow {
    width: 3vw;
    height: 3vw;
    background: url(../images/top/sns-arrow-icon.svg) no-repeat center center;
    background-size: contain
}

.sns-content .sns-inner ul.sns-slider-list .slick-arrow::before {
    content: none
}

.sns-content .sns-inner ul.sns-slider-list .slick-arrow.slick-next {
    right: -4vw;
}

.sns-content .sns-inner ul.sns-slider-list .slick-arrow.slick-prev {
    left: -4vw;
    transform: scale(-1, 1) translate(0, -50%);
}

.sns-content .sns-inner ul.sns-link-list {
    width: calc(100% - 10vw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 0
}

.sns-content .sns-inner ul.sns-link-list::after {
    content: "";
    width: calc(100% + 10vw);
    height: 7vw;
    left: -5vw;
    position: absolute;
    top: 0;
    background: url(../images/top/sns-link-border-icon.svg) no-repeat center center;
    background-size: contain;
    transform: translateY(-80%);
    z-index: -1
}

.sns-content .sns-inner ul.sns-link-list li a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

.sns-content .sns-inner ul.sns-link-list li a img {
    width: 100%
}

.sns-content .sns-inner ul.sns-link-list li a img:nth-of-type(2) {
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    opacity: 0;
    transition: .3s ease all
}

.sns-content .sns-inner ul.sns-link-list li a:hover {
    opacity: 1;
    animation: SwitchingLeft 2s linear infinite
}

.sns-content .sns-inner ul.sns-link-list li a:hover img:nth-of-type(2) {
    opacity: 1
}

.sns-content .sns-inner ul.sns-link-list li:nth-of-type(1) {
    width: 24vw;
    margin-top: -2.5vw
}

.sns-content .sns-inner ul.sns-link-list li:nth-of-type(2) {
    width: 16vw
}

.sns-content .sns-inner ul.sns-link-list li:nth-of-type(3) {
    width: 19vw;
    margin-top: -1.75vw
}


.sns-content .sns-inner .sns-pagination {
    display: flex;
    justify-content: center;  /* 全体を中央寄せ */
    align-items: center; 
    gap: 8px;
    font-size: 28px;
    color: #000000;
    padding-bottom: 50px;
}

.sns-content .sns-inner .sns-divider {
    display: inline-block;
    width: 12px;
    height: 1px;
    background-color: #000; 
}


@media screen and (max-width: 767px) {
    .sns-content .sns-inner .sns-pagination {
        font-size: 20px;
    }
}


.sns-current,
.sns-total {
    font-weight: 900;
    color: #FFF7B2;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    paint-order: stroke fill;
}



@keyframes loop {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(-100%)
    }
}

@keyframes loop02 {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.oc-content {
    width: 100%;
    background: #0661b5;
    padding: 10vw 12vw;
    overflow: hidden
}

.oc-content .oc-inner {
    background: #fff;
    padding: 2.5vw 5vw 4vw;
    position: relative;
    z-index: 0
}

.oc-content .oc-inner .oc-bg-box {
    position: absolute;
    transform: translateY(-50%) translateX(-50%);
    top: 50%;
    left: 50%;
    width: calc(100% + 5vw);
    height: calc(100% + 6vw);
    overflow: hidden;
    z-index: -1
}

.oc-content .oc-inner .oc-bg-box .oc-wave-svg {
    width: 100%;
    height: 100%;
    display: block
}

.oc-content .oc-inner .oc-bg-box .oc-wave-svg .cls-1 {
    fill: #fff
}

.oc-content .oc-inner .oc-bg-box .oc-wave-svg .cls-2 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: .95px
}

.oc-content .oc-inner h3.oc-section-title {
    width: 90%;
    position: absolute;
    left: 50%;
    top: -5.5vw;
    z-index: 1;
    opacity: 0
}

.oc-content .oc-inner h3.oc-section-title img {
    width: 100%
}

.oc-content .oc-inner h3.oc-section-title.is-show {
    opacity: 1;
    animation: OcpopUp .3s ease-in-out forwards
}

.oc-content .oc-inner .text-column {
    width: 75%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 1vw;
    align-items: center
}

.oc-content .oc-inner .text-column p.paragraph {
    width: calc(100% - 11vw)
}

.oc-content .oc-inner .text-column .icon {
    width: 10vw;
    height: 10vw;
    animation: SwitchingRight 2.5s linear infinite
}

.oc-content .oc-inner .text-column .icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

.oc-content .oc-inner ul.oc-info-list {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto 4vw
}

.oc-content .oc-inner ul.oc-info-list li {
    width: 32%;
    display: flex;
    align-items: end;
    justify-content: center
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym {
    margin-right: 1em;
    display: flex;
    align-items: center;
    flex-direction: column
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym span {
    display: block;
    text-align: center
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym span.year {
    color: #f56c34;
    font-weight: 900;
    letter-spacing: .001em;
    font-size: clamp(2.13rem, 2.08vw, 4rem);
    line-height: .65em
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym span.month {
    line-height: 1em;
    font-weight: 700;
    font-size: 6vw;
    -webkit-text-stroke: 5px #f56c34;
    text-stroke: 5px #f56c34;
    paint-order: stroke;
    position: relative;
    color: #fff
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym span.month::after {
    position: absolute;
    content: var(--text);
    line-height: 1em;
    font-weight: 700;
    font-size: 6vw;
    color: #ffea4c;
    letter-spacing: -.005em;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    left: 0;
    top: 0;
    transform: translateY(-5%) translateX(-6%);
    opacity: .8;
    paint-order: normal;
    z-index: 1;
    mix-blend-mode: darken
}

.oc-content .oc-inner ul.oc-info-list li p.date-ym span.month::before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    background: url(../images/top/oc-icon02.svg) no-repeat center center;
    background-size: contain;
    width: 1.5vw;
    height: 2vw;
    transform: translateY(-50%) translateX(105%)
}

.oc-content .oc-inner ul.oc-info-list li p.day {
    line-height: 1em;
    font-weight: 700;
    font-size: 9vw;
    -webkit-text-stroke: 5px #f56c34;
    text-stroke: 5px #f56c34;
    paint-order: stroke;
    color: #fff;
    letter-spacing: -.03em;
    position: relative;
    z-index: 0;
    margin-right: .1em
}

.oc-content .oc-inner ul.oc-info-list li p.day::after {
    position: absolute;
    content: var(--text);
    line-height: 1em;
    font-weight: 700;
    font-size: 9vw;
    color: #ffea4c;
    letter-spacing: -.03em;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    left: 0;
    top: 0;
    transform: translateY(-4%) translateX(-3%);
    opacity: .8;
    paint-order: normal;
    z-index: 1;
    mix-blend-mode: darken
}

.oc-content .oc-inner ul.oc-info-list li p.week {
    border: 1px #f56c34 solid;
    line-height: 1em;
    padding: .6vw;
    border-radius: 5px;
    color: #f56c34;
    font-weight: 900;
    font-size: clamp(1.56rem, 1.53vw, 2.93rem)
}

.oc-content .oc-inner ul.oc-slider-list {
    width: calc(100% + 34vw);
    margin-left: -17vw
}

.oc-content .oc-inner ul.oc-slider-list li {
    margin: 0 1vw
}

.oc-content .oc-inner ul.oc-slider-list li img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 4px #000 solid;
    border-radius: 1vw
}

.oc-content .oc-inner a.oc-link-btn {
    display: block;
    width: 14vw;
    height: 14vw;
    position: absolute;
    right: 2vw;
    bottom: -4vw;
    z-index: 0;
    box-shadow: 1vw 1vw 0 #aaa;
    border-radius: 50%;
    transition: .3s ease all
}

.oc-content .oc-inner a.oc-link-btn img {
    width: 103%;
    height: 103%;
    object-fit: contain;
    display: block
}

.oc-content .oc-inner a.oc-link-btn:hover {
    opacity: 1;
    box-shadow: 0 0 0 #aaa;
    transform: translateY(.25vw) translateX(.25vw)
}

@keyframes OcpopUp {
    0% {
        opacity: 0;
        transform: translateY(20%) translateX(-50%) scaleY(.3)
    }

    60% {
        opacity: 1;
        transform: translateY(-5%) translateX(-50%) scaleY(1.05)
    }

    80% {
        opacity: 1;
        transform: translateY(2%) translateX(-50%) scaleY(.98)
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateX(-50%) scaleY(1)
    }
}

@keyframes popUp {
    0% {
        opacity: 1;
        transform: translateY(20%) scaleY(.3)
    }

    60% {
        opacity: 1;
        transform: translateY(-5%) scaleY(1.05)
    }

    80% {
        opacity: 1;
        transform: translateY(2%) scaleY(.98)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1)
    }
}

@keyframes SwitchingRight {

    0%,
    100%,
    49% {
        transform: rotate(5deg)
    }

    50%,
    99% {
        transform: rotate(-5deg)
    }
}

@keyframes SwitchingLeft {

    0%,
    100%,
    49% {
        transform: rotate(-5deg)
    }

    50%,
    99% {
        transform: rotate(5deg)
    }
}

@media screen and (max-width:1024px) and (orientation:portrait) {
    .anchor-position {
        font-size: 0;
        line-height: 0;
        padding-top: 75px;
        margin-top: -75px
    }

    .anchor-position.anchor03 {
        padding-top: 0;
        margin-top: 0
    }

    .anchor-position.anchor04 {
        padding-top: 20vw;
        margin-top: -20vw
    }

    .popup-movie-box {
        padding: 20vw 0
    }

    .popup-movie-box iframe {
        width: 85%
    }

    .modaal-wrapper.is-movie01 .modaal-container,
    .modaal-wrapper.is-movie02 .modaal-container,
    .modaal-wrapper.is-movie03 .modaal-container {
        width: 100% !important
    }

    .modaal-wrapper.is-movie01 .modaal-close,
    .modaal-wrapper.is-movie02 .modaal-close,
    .modaal-wrapper.is-movie03 .modaal-close {
        border-radius: 0 3vw 0 30vw !important
    }

    .top-fv-content {
        height: calc(100svh - 90px);
        padding: 0;
        margin-bottom: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .top-fv-content::after {
        height: 100%
    }

    .top-fv-content::before {
        height: 90px
    }

    .top-fv-content .fv-bg {
        height: 116vw;
        background: url(../images/top/fv-bg-res.svg) no-repeat center center;
        background-size: cover;
        top: 53%
    }

    .top-fv-content ul.top-fv-slider {
        top: 53%;
        height: 115vw
    }

    .top-fv-content ul.top-fv-slider li {
        transform: scale(1) !important
    }

    .top-fv-content ul.top-fv-slider li img {
        height: 115vw
    }

    .top-fv-content ul.top-fv-slider li.slider01 img {
        object-position: 48% 0
    }

    .top-fv-content ul.top-fv-slider li.slider02 img {
        object-position: 60% 0
    }

    .top-fv-content ul.top-fv-slider li.slider03 img {
        object-position: 45% 0
    }

    .top-fv-content ul.top-fv-slider li.slider04 img {
        object-position: 75% 0
    }

    .top-fv-content ul.top-fv-slider li.slider05 img {
        object-position: 55% 0
    }

    .top-fv-content .text-box {
        width: 100%;
        margin-bottom: 2vw;
        padding: 3.5vw 5vw 0
    }

    .top-fv-content .text-box .title-copy {
        width: 42vw;
        margin-bottom: 2vw
    }

    .top-fv-content .text-box h2.main-title {
        width: 60vw;
        margin-bottom: 4vw
    }

    .top-fv-content .text-box p.copy {
        padding-left: 0
    }

    .top-fv-content .text-box p.copy span {
        font-size: 5vw;
        line-height: 1em;
        padding: 2vw
    }

    .top-fv-content .text-box p.copy span:nth-of-type(1) {
        margin-bottom: 2vw
    }

    .top-fv-content .img-box {
        padding-right: 0
    }

    .top-fv-content .img-box::after {
        width: 32vw;
        height: 27vw;
        right: 3vw;
        top: -19vw;
        background: url(../images/top/fv-kirinuki-img01.webp) no-repeat center center;
        background-size: contain
    }

    .top-fv-content .img-box .top-movie-link {
        width: 50%;
        height: 30vw
    }

    .student-content {
        padding: 16vw 4vw 8vw
    }

    .student-content::after {
        background-image: linear-gradient(90deg, #f29c9f 1px, transparent 1px), linear-gradient(#f29c9f 1px, transparent 1px);
        background-size: 7vw 7vw
    }

    .student-content h3.student-section-title {
        margin: 0 auto 4vw
    }

    .student-content h3.student-section-title span.copy {
        font-size: clamp(1.6rem, 4.27vw, 1.83rem);
        z-index: 0;
        left: 15vw;
        top: -5vw
    }

    .student-content h3.student-section-title span.copy::after {
        position: absolute;
        content: "";
        width: 45vw;
        height: 15vw
    }

    .student-content h3.student-section-title span.main {
        width: calc(100% - 16vw);
        margin: 0 auto
    }

    .student-content h3.student-section-title span.main::after,
    .student-content h3.student-section-title span.main::before {
        width: 14vw;
        height: 14vw
    }

    .student-content ul.student-list li {
        width: 50%;
        margin-bottom: 1vw
    }

    .student-content ul.student-list li a .title span {
        letter-spacing: .1em;
        font-size: clamp(1.2rem, 3.2vw, 1.38rem)
    }

    .student-content ul.student-list li a .img-box {
        width: 36vw;
        height: 47vw
    }

    .student-content ul.student-list li a .img-box::before {
        transform: translateY(2%) translateX(4%)
    }

    .student-content ul.student-list li a p.name span.main,
    .student-content ul.student-list li a p.name span.sub {
        padding: 1vw 1.5vw
    }

    .student-content ul.student-list li a p.name span.main::before,
    .student-content ul.student-list li a p.name span.sub::before {
        transform: translateY(10%) translateX(2%)
    }

    .student-content ul.student-list li a p.name span.main::after,
    .student-content ul.student-list li a p.name span.sub::after {
        border: 1px #000 solid
    }

    .student-content ul.student-list li a p.name span.sub {
        font-size: clamp(1.2rem, 3.2vw, 1.38rem);
        transform: translateX(-15%)
    }

    .student-content ul.student-list li a p.name span.main {
        padding: 1.5vw 1.5vw 1vw;
        font-size: clamp(1.5rem, 4vw, 1.72rem);
        transform: translateX(5%)
    }

    .student-content ul.student-list li a p.name span.main .small {
        font-size: clamp(1rem, 2.67vw, 1.15rem)
    }

    .student-content ul.student-list li.is-show a:hover::after,
    .student-content ul.student-list li.is-show a:hover::before {
        content: none
    }

    .modaal-inner-wrapper {
        padding: 80px 4vw !important
    }

    .modaal-container {
        width: 100% !important;
        border-radius: 2vw !important
    }

    .modaal-content-container {
        border-radius: 2vw !important
    }

    .modaal-close {
        width: 15vw !important;
        height: 15vw !important;
        top: 9vw !important;
        right: calc(4.6vw - .11em) !important;
        border-radius: 0 0 0 55vw !important
    }

    .modaal-close::after,
    .modaal-close::before {
        height: 5vw !important;
        top: 3vw !important;
        left: 8.5vw !important
    }

    .student-modal-inner {
        padding: 10vw 12vw 5vw 6vw;
        flex-wrap: wrap
    }

    .student-modal-inner::after {
        width: calc(100% + 25vw);
        height: calc(100% + 100vw)
    }

    .student-modal-inner .popup-bar01 {
        padding: 3vw 3vw
    }

    .student-modal-inner .popup-bar01 .circle {
        width: 3vw;
        height: 3vw;
        margin-right: 1vw
    }

    .student-modal-inner .popup-bar02 {
        width: 4.5vw
    }

    .student-modal-inner .popup-bar02::after {
        height: 76%
    }

    .student-modal-inner .group01 {
        width: 100%;
        margin-bottom: 5vw
    }

    .student-modal-inner .group01 .title-img {
        width: 70%;
        transform: translateY(45%)
    }

    .student-modal-inner .group01 .bg-text {
        width: 100%;
        margin-bottom: 8vw
    }

    .student-modal-inner .group01 .bg-text .paper-layer {
        padding: 9vw 6vw 6vw
    }

    .student-modal-inner .group01 .bg-text .paper-layer p.name span {
        font-size: clamp(1.7rem, 4.53vw, 1.95rem);
        margin-right: .3em
    }

    .student-modal-inner .group01 .bg-text .paper-layer .subimg {
        width: 17vw;
        height: 15vw
    }

    .student-modal-inner .group01 .bg-text .bg-box {
        margin-bottom: 10vw
    }

    .student-modal-inner .group01 .bg-text .bg-box .bg.bg01 {
        transform: translateY(2%) translateX(2%)
    }

    .student-modal-inner .group01 .bg-text .bg-box .bg.bg02 {
        transform: translateY(4%) translateX(4%)
    }

    .student-modal-inner .group01 a.popup-link-btn {
        font-size: clamp(1.3rem, 3.47vw, 1.49rem);
        padding: 1.2vw 7vw 2vw 2vw;
        box-shadow: 1vw 1vw 0 rgba(170, 170, 170, .8);
        margin-bottom: 5vw
    }

    .student-modal-inner .group01 a.popup-link-btn::after {
        width: 3vw;
        height: 4vw;
        right: 4vw
    }

    .student-modal-inner .group01 a.popup-link-btn span {
        font-size: clamp(1.7rem, 4.53vw, 1.95rem);
        margin-right: .2em
    }

    .student-modal-inner .group02 {
        width: 100%;
        flex-direction: column-reverse
    }

    .student-modal-inner .group02 .kirinuki {
        width: 42%;
        margin: 0 auto;
        transform: translateX(10%)
    }

    .student-modal-inner .group02 .kirinuki::after,
    .student-modal-inner .group02 .kirinuki::before {
        position: absolute;
        content: "";
        top: 20vw;
        transition: .3s ease all;
        width: 6vw;
        height: 25vw
    }

    .student-modal-inner .group02 .kirinuki::before {
        background: url(../images/top/student-icon02.svg) no-repeat center center;
        background-size: contain;
        right: -2vw;
        animation: StIconSwitchingLeft 1s linear infinite
    }

    .student-modal-inner .group02 .kirinuki::after {
        background: url(../images/top/student-icon01.svg) no-repeat center center;
        background-size: contain;
        left: -2vw;
        animation: StIconSwitchingRight 1s linear infinite
    }

    .student-modal-inner .group02 .img-wrap {
        width: 100%;
        margin-bottom: 2vw
    }

    .student-modal-inner .group02 .img-wrap .text-copy {
        width: 60%;
        margin: 0 0 0 auto;
        padding-left: 0;
        transform: rotate(10deg)
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 {
        margin-bottom: -2vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01::after {
        width: 12vw;
        height: 13vw;
        left: -2vw;
        top: -8vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01::before {
        width: 4vw;
        height: 7vw;
        left: 55vw;
        top: 12vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(1) {
        width: 48vw;
        height: 48vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(2) {
        width: 15vw;
        height: 15vw;
        left: 35vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 p.text {
        margin-bottom: 4vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 {
        margin-bottom: -3vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 img {
        transform: translateY(15%);
        margin-left: 3vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 img:nth-of-type(1) {
        width: 29vw;
        height: 29vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03::after {
        width: 9vw;
        height: 11vw;
        right: unset;
        top: 0;
        left: 35vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03 img:nth-of-type(1) {
        width: 35vw;
        height: 35vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03 p.text {
        margin: 0 0 2vw 3vw
    }

    .life-content {
        padding: 10vw 2vw 40vw;
        overflow: hidden;
        margin-bottom: -40vw
    }

    .life-content .gradation-bg {
        width: calc(100% + 300vw);
        height: calc(100% + 10vw);
        position: absolute;
        left: unset;
        right: -9%
    }

    .life-content p.life-ssection-copy {
        font-size: clamp(1.65rem, 4.4vw, 1.89rem);
        margin-bottom: 11vw
    }

    .life-content h3.life-section-title {
        padding: 9vw 0 9.2vw 6vw;
        border: 2px #000 solid
    }

    .life-content h3.life-section-title span.text {
        font-size: 5vw
    }

    .life-content h3.life-section-title span.logo-img.logo01 {
        width: 40vw;
        right: 11vw;
        top: -8vw
    }

    .life-content h3.life-section-title span.logo-img.logo02 {
        right: 2vw;
        top: 15vw;
        width: 35vw
    }

    .life-content h3.life-section-title span.logo-img img {
        width: 100%
    }

    .life-content h3.life-section-title span.circle {
        width: .4em;
        height: .4em
    }

    .life-content .life-qa-inner {
        padding: 10vw 0 0;
        border-left: 2px #000 solid;
        border-right: 2px #000 solid;
        border-bottom: 2px #000 solid;
        display: block;
        gap: 0
    }

    .life-content .life-qa-inner::after {
        background-image: radial-gradient(circle, #000 2px, transparent 2px), radial-gradient(circle, #000 2px, transparent 2px);
        background-position: 0 0, 8px 8px;
        background-size: 16px 16px;
        animation: moveDots 6s linear infinite
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dt {
        padding-left: 2.5em;
        font-size: clamp(1.4rem, 3.73vw, 1.61rem)
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dt::after {
        font-size: clamp(2rem, 5.33vw, 2.29rem)
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dd {
        padding-left: 2.5em
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dd::after {
        font-size: clamp(2rem, 5.33vw, 2.29rem)
    }

    .life-content .life-qa-inner .qa-box.box01 {
        padding: 7.5vw 27vw 9vw 3vw;
        border-radius: 0 40vw 40vw 0;
        width: 95%;
        margin-bottom: 4vw
    }

    .life-content .life-qa-inner .qa-box.box01 .img-box {
        width: 23vw;
        right: 3vw;
        bottom: 0;
        max-width: 110px
    }

    .life-content .life-qa-inner .qa-box.box01 .img-box::after {
        width: 5vw;
        height: 5vw;
        right: 1vw;
        top: -3vw
    }

    .life-content .life-qa-inner .qa-box.box02 {
        width: 95%;
        margin: 0 0 0 auto;
        padding: 7.5vw 4vw 8vw 12vw;
        border-radius: 40vw 0 0 40vw;
        transform: translateX(40%);
        margin-bottom: 4vw
    }

    .life-content .life-qa-inner .qa-box.box03 {
        width: 95%;
        padding: 9vw 13vw 0 3vw;
        border-radius: 0 60vw 60vw 0;
        transform: translateX(-40%);
        margin-bottom: 4vw;
        overflow: hidden
    }

    .life-content .life-qa-inner .qa-box.box03 dl.qa-list {
        margin-bottom: 3vw
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box {
        width: 100%
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box::after {
        width: 6vw;
        height: 6.5vw;
        left: 10vw
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box::before {
        width: 6vw;
        height: 6vw;
        right: 8vw
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box img {
        width: 28%;
        margin: 0 1vw
    }

    .life-content .life-qa-inner .qa-box.box04 {
        padding: 8.5vw 5vw 10vw 23vw;
        border-radius: 45vw 0 0 45vw;
        transform: translateX(40%);
        margin: 0 0 4vw auto;
        width: 95%
    }

    .life-content .life-qa-inner .qa-box.box04 .img-box {
        width: 30vw;
        left: -4vw;
        top: unset;
        transform: translateY(-14%) translateX(0);
        bottom: 0
    }

    .life-content .life-qa-inner .qa-box.box04 .img-box::after,
    .life-content .life-qa-inner .qa-box.box04 .img-box::before {
        width: 5vw;
        height: 6vw
    }

    .life-content .life-qa-inner .qa-box.box04 .img-box::after {
        content: none
    }

    .life-content .life-qa-inner .qa-box.box05 {
        padding: 7.5vw 10vw 9vw 3vw;
        border-radius: 0 40vw 40vw 0;
        margin-bottom: 4vw;
        transform: translateX(-40%);
        width: 95%
    }

    .life-content .life-qa-inner .qa-box.box06 {
        padding: 20vw 16vw 6vw;
        border-radius: 120vw 120vw 0 0
    }

    .life-content .life-qa-inner .qa-box.box06 .img-box {
        left: 50%;
        width: 30vw;
        transform: translateY(-40%) translateX(-70%)
    }

    .life-content .life-qa-inner .qa-box.box06 .img-box::after {
        width: 9vw;
        height: 9vw
    }

    .life-content .life-qa-inner .qa-box.is-show.box03 {
        transform: translateX(0)
    }

    .life-content .life-qa-inner .qa-box.is-show.box05 {
        transform: translateX(0)
    }

    @keyframes moveDots {
        0% {
            background-position: 0 0, 8px 8px
        }

        100% {
            background-position: 16px 16px, 24px 24px
        }
    }

    .navi-content {
        padding: 50vw 6vw 30vw
    }

    .navi-content .navi-dot-bg {
        height: 22vw
    }

    .navi-content .navi-dot-bg::after {
        width: 300%;
        height: 35vw
    }

    .navi-content .navi-dot-bg.top::after {
        bottom: -34.5vw
    }

    .navi-content .navi-dot-bg.bottom::after {
        top: -34.5vw
    }

    .navi-content h3.navi-section-title {
        width: 85%;
        margin: 0 auto 6vw
    }

    .navi-content h3.navi-section-title::after {
        width: 26vw;
        height: 18vw;
        left: -5vw;
        top: -17vw
    }

    .navi-content h3.navi-section-title .icon {
        width: 12vw;
        height: 12vw
    }

    .navi-content ul.navi-tab-list {
        width: 90%;
        flex-wrap: wrap
    }

    .navi-content ul.navi-tab-list li {
        width: 100%;
        padding: 2vw 0;
        font-size: clamp(1.3rem, 3.47vw, 1.49rem);
        margin-bottom: 4vw
    }

    .navi-content ul.navi-tab-list li span {
        font-size: clamp(1.6rem, 4.27vw, 1.83rem)
    }

    .navi-content ul.navi-tab-list li.active {
        padding: 3.6vw 21.5vw 3.6vw 0
    }

    .navi-content ul.navi-tab-list li.active::before {
        width: 20vw;
        height: 10vw;
        right: 2.5vw;
        top: -1.5vw
    }

    .navi-content .navi-tab-inner {
        width: 100%;
        margin-bottom: 8vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon01-box {
        left: -3vw;
        top: -6vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon01-box::after {
        width: 4vw;
        height: 4vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon01-box::before {
        width: 7vw;
        height: 7vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon02-box {
        right: 8vw;
        bottom: 2vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon02-box::after {
        width: 8vw;
        height: 8vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon02-box::before {
        width: 4vw;
        height: 4vw
    }

    .navi-content .navi-tab-inner ul.navi-slider {
        width: 76%;
        margin: 0 auto 12vw
    }

    .navi-content .navi-tab-inner ul.navi-slider::after {
        width: 110%;
        height: 72vw;
        top: -3vw;
        background: url(../images/top/navi-slider-frame-icon-res.svg) no-repeat center center;
        background-size: contain
    }

    .navi-content .navi-tab-inner ul.navi-slider li img {
        height: 65vw
    }

    .navi-content .navi-tab-inner ul.navi-slider li p.copy-text {
        left: -8vw;
        bottom: 7vw
    }

    .navi-content .navi-tab-inner ul.navi-slider li p.copy-text span {
        font-size: clamp(1.2rem, 3.2vw, 1.38rem);
        padding: 2.5vw 5vw
    }

    .navi-content .navi-tab-inner ul.navi-slider li p.copy-text span:nth-of-type(1)::after {
        left: 6vw;
        width: calc(100% - 8vw)
    }

    .navi-content .navi-tab-inner ul.navi-slider .slick-arrow {
        width: 4vw;
        height: 6vw;
        top: 43%
    }

    .navi-content .navi-tab-inner ul.navi-slider .slick-arrow.slick-next {
        right: -8vw
    }

    .navi-content .navi-tab-inner ul.navi-slider .slick-arrow.slick-prev {
        left: -8vw
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots {
        width: 73%;
        margin: 10vw auto 0;
        border-radius: 20vw;
        padding: .5vw
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li {
        width: 2vw;
        height: 2vw
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li::after {
        top: -2vw;
        font-weight: 700;
        letter-spacing: .1em;
        font-size: clamp(1.1rem, 2.93vw, 1.26rem)
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li button::after {
        width: 7vw;
        height: 7vw
    }

    .navi-content .navi-column-inner {
        flex-wrap: wrap
    }

    .navi-content .navi-column-inner a.navi-movie-link {
        margin-right: 0;
        margin-bottom: 12vw
    }

    .navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(1) {
        left: 0;
        height: 21vw;
        width: 29vw
    }

    .navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(2) {
        margin: 0 auto;
        width: 85%;
        height: auto
    }

    .navi-content .navi-column-inner .navi-link-box {
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        margin-left: 4vw
    }

    .navi-content .navi-column-inner .navi-link-box .kirinuki {
        width: 23vw
    }

    .navi-content .navi-column-inner .navi-link-box .kirinuki::before {
        width: 34vw;
        height: 14vw;
        transform: translateY(-55%) translateX(100%)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link {
        width: 50vw;
        height: 50vw;
        transform: translateX(-15%)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link span {
        font-size: clamp(1.3rem, 3.47vw, 1.49rem)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link .icon {
        width: 10vw;
        height: 6vw;
        margin: 0 auto -2vw;
        position: relative
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link .icon img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .event-content .event-inner {
        width: calc(100% + 60vw);
        margin-left: -30vw;
        padding: 0 12vw 25vw
    }

    .event-content .event-inner::after {
        width: 20vw;
        height: 15vw;
        left: 26vw;
        top: 60vw
    }

    .event-content .event-inner::before {
        background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 4vw, transparent 4vw, transparent 7vw)
    }

    .event-content .event-inner .event-bg-circle {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1
    }

    .event-content .event-inner .event-bg-circle svg {
        width: 100%;
        height: 100%;
        display: block
    }

    .event-content .event-inner .event-title-icon {
        height: 13vw;
        margin: 0 auto;
        padding: 3.8vw;
        transform: translateY(-140%)
    }

    .event-content .event-inner h3.event-section-title {
        width: 65%;
        margin: 0 auto 3vh;
        transform: translateY(-170%)
    }

    .event-content .event-inner h3.event-section-title img:nth-of-type(1) {
        width: 85%
    }

    .event-content .event-inner p.paragraph {
        width: 45%;
        margin: 0 auto 10vw
    }

    .event-content .event-inner p.paragraph::after {
        width: 21vw;
        height: 14vw;
        bottom: -15vw
    }

    .event-content .event-inner ul.event-card-list {
        margin: 0 auto 30vw;
        padding-right: 1vw
    }

    .event-content .event-inner ul.event-card-list li {
        width: 25vw
    }

    .event-content .event-inner ul.event-card-list li:nth-of-type(4) {
        transform: rotate(20deg) translateY(25%) translateX(-50%)
    }

    .event-content .event-inner ul.event-card-list.list01 {
        margin-right: 0
    }

    .event-content .event-inner ul.event-card-list.list01::after {
        width: 20vw;
        height: 21vw;
        right: 20vw;
        bottom: -33vw
    }

    .event-content .event-inner ul.event-card-list.list01::before {
        width: 14vw;
        height: 20vw;
        left: 19vw;
        bottom: -30vw
    }

    .event-content .event-inner ul.event-card-list.list02 {
        margin-left: 0;
        margin-bottom: 18vw
    }

    .event-content .event-inner ul.event-card-list.list02::before {
        width: 25vw;
        height: 29vw;
        left: 16vw;
        bottom: -40vw
    }

    .event-content .event-inner ul.event-card-list.list02::after {
        width: 18vw;
        height: 27vw;
        right: 24vw;
        bottom: -38vw
    }

    .event-content .event-inner .event-kirinuki-box03 {
        width: 25%;
        transform: translateY(0) translateX(-50%)
    }

    .event-content .event-inner .event-kirinuki-box03::after {
        width: 20vw;
        height: 13vw;
        left: -7vw;
        top: -2vw
    }

    .sns-content {
        padding: 48vw 8vw 10vw;
        margin-top: -35vw
    }

    .sns-content ul.sns-bgtext-list li {
        width: 253%;
        height: 13vw
    }

    .sns-content .sns-inner {
        border: 1px #f272ac solid
    }

    .sns-content .sns-inner::after {
        border: 1px #f272ac solid
    }

    .sns-content .sns-inner .text-column {
        margin-bottom: 10vw
    }

    .sns-content .sns-inner .text-column .group01 {
        width: 20vw
    }

    .sns-content .sns-inner .text-column .group01 .kirinuki-box img:nth-of-type(2) {
        left: -13vw;
        top: -6vw;
        width: 22vw;
        height: 22vw
    }

    .sns-content .sns-inner .text-column .group01 .icon-box {
        width: 30vw;
        height: 30vw;
        transform: translateY(-35%) translateX(-29%)
    }

    .sns-content .sns-inner .text-column .group02 {
        width: calc(100% - 20vw)
    }

    .sns-content .sns-inner .text-column .group02 h3.sns-section-title {
        width: calc(100% + 12vw);
        height: 30vw;
        margin-left: -8vw;
        margin-top: -6vw;
        margin-bottom: 2vw
    }

    .sns-content .sns-inner .text-column .group02 p.paragraph {
        width: 90%;
        margin: 0 0 0 auto
    }

    .sns-content .sns-inner ul.sns-slider-list {
        margin: 0 auto 8vw
    }

    .sns-content .sns-inner ul.sns-slider-list::after {
        width: 17vw;
        height: 17vw;
        top: 3.5vw;
        left: -7vw
    }

    .sns-content .sns-inner ul.sns-slider-list::before {
        width: 17vw;
        height: 17vw;
        top: -23vw;
        left: -1vw
    }

    .sns-content .sns-inner ul.sns-slider-list li {
        height: 96.53vw
    }

    .sns-content .sns-inner ul.sns-slider-list li a p.text {
        font-size: clamp(.8rem, 2.13vw, .92rem)
    }

    .sns-content .sns-inner ul.sns-slider-list li a p.text::after {
        width: 5vw;
        height: 5vw
    }

    .sns-content .sns-inner ul.sns-slider-list .slick-arrow {
        width: 6vw;
        height: 6vw
    }

    .sns-content .sns-inner ul.sns-slider-list .slick-arrow.slick-next {
        right: -9vw
    }


    .sns-content .sns-inner ul.sns-slider-list .slick-arrow.slick-prev {
        left: -9vw
    }

    .sns-content .sns-inner ul.sns-link-list {
        width: calc(100% - 9vw)
    }

    .sns-content .sns-inner ul.sns-link-list::after {
        width: calc(100% + 8vw);
        height: 8vw;
        left: -4vw
    }

    .sns-content .sns-inner ul.sns-link-list li:nth-of-type(1) {
        width: 28vw
    }

    .sns-content .sns-inner ul.sns-link-list li:nth-of-type(2) {
        width: 20vw
    }

    .sns-content .sns-inner ul.sns-link-list li:nth-of-type(3) {
        width: 22vw
    }

    .oc-content {
        padding: 14vw 6vw
    }

    .oc-content .oc-inner {
        padding: 5vw 1vw 4vw
    }

    .oc-content .oc-inner .oc-bg-box {
        width: calc(100% + 8vw);
        height: calc(100% + 11vw)
    }

    .oc-content .oc-inner h3.oc-section-title {
        width: 100%;
        top: -7.5vw
    }

    .oc-content .oc-inner .text-column {
        width: 95%;
        margin: 0 0 1vw auto;
        align-items: flex-start
    }

    .oc-content .oc-inner .text-column p.paragraph {
        width: calc(100% - 16vw)
    }

    .oc-content .oc-inner .text-column .icon {
        width: 16vw;
        height: 16vw
    }

    .oc-content .oc-inner ul.oc-info-list {
        margin: 0 auto 4vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym {
        margin-right: 0;
        width: 2.6em
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.year {
        font-size: clamp(1rem, 2.67vw, 1.15rem)
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.month {
        font-size: 7vw;
        -webkit-text-stroke: 2px #f56c34;
        text-stroke: 2px #f56c34
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.month::after {
        font-size: 7vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.month::before {
        position: absolute;
        content: "";
        right: 0;
        top: 50%;
        background: url(../images/top/oc-icon02.svg) no-repeat center center;
        background-size: contain;
        width: 1.5vw;
        height: 2vw;
        transform: translateY(-50%) translateX(105%)
    }

    .oc-content .oc-inner ul.oc-info-list li p.day {
        font-size: 12vw;
        -webkit-text-stroke: 2px #f56c34;
        text-stroke: 2px #f56c34;
        letter-spacing: -.01em
    }

    .oc-content .oc-inner ul.oc-info-list li p.day::after {
        font-size: 12vw;
        letter-spacing: -.01em
    }

    .oc-content .oc-inner ul.oc-info-list li p.week {
        padding: .6vw .2vw .8vw .6vw;
        border-radius: 2px;
        font-size: clamp(.9rem, 2.4vw, 1.03rem)
    }

    .oc-content .oc-inner ul.oc-slider-list li {
        margin: 0 1vw
    }

    .oc-content .oc-inner ul.oc-slider-list li img {
        border: 2px #000 solid;
        border-radius: 2vw
    }

    .oc-content .oc-inner a.oc-link-btn {
        width: 26vw;
        height: 26vw;
        right: 4vw;
        bottom: -10vw;
        box-shadow: 1.5vw 1.5vw 0 #aaa
    }
}

@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
    .anchor-position {
        font-size: 0;
        line-height: 0;
        padding-top: 8vw;
        margin-top: -8vw
    }

    .anchor-position.anchor03 {
        padding-top: 0;
        margin-top: 0
    }

    .anchor-position.anchor04 {
        padding-top: 30vw;
        margin-top: -30vw
    }

    .popup-movie-box {
        padding: 10vw 0
    }

    .popup-movie-box iframe {
        width: 80%
    }

    .modaal-wrapper.is-movie01 .modaal-container,
    .modaal-wrapper.is-movie02 .modaal-container,
    .modaal-wrapper.is-movie03 .modaal-container {
        width: 100% !important
    }

    .modaal-wrapper.is-movie01 .modaal-close,
    .modaal-wrapper.is-movie02 .modaal-close,
    .modaal-wrapper.is-movie03 .modaal-close {
        border-radius: 0 1vw 0 10vw !important
    }

    .top-fv-content {
        height: 83vw
    }

    .top-fv-content::before {
        height: 90px
    }

    .top-fv-content .fv-bg {
        height: 61vw;
        background: url(../images/top/fv-bg.svg) no-repeat center center;
        background-size: cover
    }

    .top-fv-content ul.top-fv-slider {
        height: 60vw
    }

    .top-fv-content ul.top-fv-slider li img {
        height: 60vw
    }

    .top-fv-content .text-box {
        margin-bottom: 8vw
    }

    .top-fv-content .text-box .title-copy {
        width: 30vw
    }

    .top-fv-content .text-box h2.main-title {
        width: 50vw;
        margin-bottom: 4vw
    }

    .top-fv-content .text-box p.copy span {
        font-size: 3vw;
        padding: 1vw
    }

    .top-fv-content .text-box p.copy span:nth-of-type(1) {
        margin-bottom: 1.5vw
    }

    .top-fv-content .img-box {
        padding-right: 12vw
    }

    .top-fv-content .img-box::after {
        width: 24vw;
        height: 19vw;
        top: 0
    }

    .top-fv-content .img-box .top-movie-link {
        width: 42%;
        height: 22vw
    }

    .student-content {
        padding: 16vw 4vw 8vw
    }

    .student-content::after {
        background-image: linear-gradient(90deg, #f29c9f 1px, transparent 1px), linear-gradient(#f29c9f 1px, transparent 1px);
        background-size: 3vw 3vw
    }

    .student-content h3.student-section-title {
        width: 90%;
        margin: 0 auto 3vw
    }

    .student-content h3.student-section-title span.copy {
        font-size: clamp(2rem, 2.6vw, 2.67rem)
    }

    .student-content ul.student-list li {
        width: 32%;
        margin-bottom: 0
    }

    .student-content ul.student-list li a .title span {
        font-size: clamp(1.4rem, 1.82vw, 1.87rem)
    }

    .student-content ul.student-list li a .img-box {
        width: 25vw;
        height: 34vw
    }

    .student-content ul.student-list li a p.name span.sub {
        font-size: clamp(1.3rem, 1.69vw, 1.73rem)
    }

    .student-content ul.student-list li a p.name span.main {
        font-size: clamp(2rem, 2.6vw, 2.67rem);
        transform: translateX(5%)
    }

    .student-content ul.student-list li a p.name span.main .small {
        font-size: clamp(1rem, 1.3vw, 1.33rem)
    }

    .modaal-close {
        width: 10vw !important;
        height: 10vw !important;
        top: 6vw !important;
        right: calc(3vw - .11em) !important
    }

    .modaal-close::after,
    .modaal-close::before {
        height: 4vw !important;
        top: 2vw !important;
        left: 6vw !important
    }

    .student-modal-inner {
        padding: 9vw 9vw 5vw 4vw
    }

    .student-modal-inner::after {
        width: calc(100% + 25vw);
        height: calc(100% + 100vw)
    }

    .student-modal-inner .popup-bar01 {
        padding: 2vw 3vw
    }

    .student-modal-inner .popup-bar01 .circle {
        width: 2vw;
        height: 2vw
    }

    .student-modal-inner .popup-bar02 {
        width: 3vw
    }

    .student-modal-inner .group01 {
        width: 80%;
        margin: 0 auto 5vw
    }

    .student-modal-inner .group01 .title-img {
        width: 65%
    }

    .student-modal-inner .group01 .bg-text {
        margin-bottom: 6vw
    }

    .student-modal-inner .group01 .bg-text .paper-layer {
        padding: 6vw 6vw 5vw
    }

    .student-modal-inner .group01 .bg-text .paper-layer p.name span {
        font-size: clamp(2rem, 2.6vw, 2.67rem)
    }

    .student-modal-inner .group01 .bg-text .paper-layer .subimg {
        width: 13vw;
        height: 11vw
    }

    .student-modal-inner .group01 .bg-text .bg-box {
        margin-bottom: 10vw
    }

    .student-modal-inner .group01 .bg-text .bg-box .bg.bg01 {
        transform: translateY(3%) translateX(3%)
    }

    .student-modal-inner .group01 .bg-text .bg-box .bg.bg02 {
        transform: translateY(6%) translateX(6%)
    }

    .student-modal-inner .group01 a.popup-link-btn {
        width: 80%;
        margin: 0 auto 5vw;
        font-size: clamp(1.5rem, 1.95vw, 2rem);
        padding: 1vw 7vw 1vw 2vw
    }

    .student-modal-inner .group01 a.popup-link-btn::after {
        width: 1.5vw;
        height: 2vw;
        right: 4vw
    }

    .student-modal-inner .group01 a.popup-link-btn span {
        font-size: clamp(1.7rem, 2.21vw, 2.27rem)
    }

    .student-modal-inner .group02 {
        width: 100%;
        flex-direction: row
    }

    .student-modal-inner .group02 .kirinuki {
        width: 30%;
        margin: 0 auto;
        transform: translateX(0)
    }

    .student-modal-inner .group02 .kirinuki::after,
    .student-modal-inner .group02 .kirinuki::before {
        content: none
    }

    .student-modal-inner .group02 .img-wrap {
        width: 60%;
        margin-bottom: 0
    }

    .student-modal-inner .group02 .img-wrap .text-copy {
        width: 60%;
        margin: 0 0 0 auto;
        padding-left: 0;
        transform: rotate(10deg)
    }

    .student-modal-inner .group02 .img-wrap .box p.text {
        font-size: clamp(1.4rem, 1.82vw, 1.87rem)
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 {
        margin-bottom: -2vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01::after {
        width: 7vw;
        height: 8vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01::before {
        width: 3vw;
        height: 4vw;
        left: 25vw;
        top: 4vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(1) {
        width: 25vw;
        height: 25vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 img:nth-of-type(2) {
        width: 7vw;
        height: 7vw;
        left: 17vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern01 p.text {
        margin-left: 2vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 {
        margin-bottom: 2vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 img {
        margin-left: 2vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern02 img:nth-of-type(1) {
        width: 19vw;
        height: 19vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03::after {
        width: 6vw;
        height: 8vw;
        top: -6vw;
        left: 15vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03 img:nth-of-type(1) {
        width: 15vw;
        height: 15vw
    }

    .student-modal-inner .group02 .img-wrap .box.pattern03 p.text {
        margin: 0 5vw 2vw 2vw
    }

    .life-content {
        padding: 10vw 2vw 25vw;
        margin-bottom: -32vw
    }

    .life-content .gradation-bg {
        height: calc(100% + 7vw)
    }

    .life-content p.life-ssection-copy {
        font-size: clamp(2rem, 2.6vw, 2.67rem);
        margin-bottom: 8vw
    }

    .life-content h3.life-section-title {
        padding: 6vw 0 7.2vw 6vw
    }

    .life-content h3.life-section-title span.text {
        font-size: 4vw
    }

    .life-content h3.life-section-title span.logo-img.logo01 {
        width: 30vw;
        right: 22vw;
        top: -6vw
    }

    .life-content h3.life-section-title span.logo-img.logo02 {
        right: 2vw;
        top: 7vw;
        width: 30vw
    }

    .life-content h3.life-section-title span.circle {
        width: .4em;
        height: .4em
    }

    .life-content .life-qa-inner {
        padding: 5vw 0 0
    }

    .life-content .life-qa-inner::after {
        background-image: radial-gradient(circle, #000 3px, transparent 3px), radial-gradient(circle, #000 3px, transparent 3px);
        background-position: 0 0, 8.5px 17px;
        background-size: 17px 34px
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dt {
        font-size: clamp(1.8rem, 2.34vw, 2.4rem)
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dt::after {
        font-size: clamp(2.5rem, 3.26vw, 3.33rem)
    }

    .life-content .life-qa-inner .qa-box dl.qa-list dd::after {
        font-size: clamp(2.5rem, 3.26vw, 3.33rem)
    }

    .life-content .life-qa-inner .qa-box.box01 {
        padding: 6.5vw 24.5vw 6vw 3vw
    }

    .life-content .life-qa-inner .qa-box.box01 .img-box {
        width: 15vw;
        right: 6vw;
        bottom: 0;
        max-width: unset
    }

    .life-content .life-qa-inner .qa-box.box01 .img-box::after {
        width: 4vw;
        height: 4vw;
        right: 1vw;
        top: -3vw
    }

    .life-content .life-qa-inner .qa-box.box02 {
        padding: 6vw 4vw 7vw 12vw
    }

    .life-content .life-qa-inner .qa-box.box03 {
        padding: 5vw 7vw 0 3vw
    }

    .life-content .life-qa-inner .qa-box.box03 dl.qa-list {
        margin-bottom: 0
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box {
        width: 55%;
        margin: 0 0 0 auto
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box::after {
        width: 5vw;
        height: 5.5vw;
        left: 6vw
    }

    .life-content .life-qa-inner .qa-box.box03 .img-box::before {
        width: 5vw;
        height: 5vw
    }

    .life-content .life-qa-inner .qa-box.box04 {
        width: 90%
    }

    .life-content .life-qa-inner .qa-box.box04 .img-box {
        width: 26vw;
        left: -8vw
    }

    .life-content .life-qa-inner .qa-box.box04 .img-box::after,
    .life-content .life-qa-inner .qa-box.box04 .img-box::before {
        width: 4vw;
        height: 5vw
    }

    .life-content .life-qa-inner .qa-box.box06 {
        width: 16vw 16vw 6vw
    }

    .life-content .life-qa-inner .qa-box.box06 .img-box {
        width: 24vw;
        transform: translateY(-40%) translateX(0)
    }

    @keyframes moveDots {
        0% {
            background-position: 0 0, 8.5px 17px
        }

        100% {
            background-position: 17px 34px, 25.5px 51px
        }
    }

    .navi-content {
        padding: 50vw 6vw 40vw
    }

    .navi-content h3.navi-section-title {
        width: 65%
    }

    .navi-content h3.navi-section-title::after {
        width: 20vw;
        height: 15vw
    }

    .navi-content ul.navi-tab-list {
        width: 100%;
        flex-wrap: nowrap
    }

    .navi-content ul.navi-tab-list li {
        width: 49%;
        padding: 2vw 0;
        font-size: clamp(1.4rem, 1.82vw, 1.87rem);
        margin-bottom: 4vw
    }

    .navi-content ul.navi-tab-list li span {
        font-size: clamp(1.6rem, 2.08vw, 2.13rem)
    }

    .navi-content ul.navi-tab-list li.active {
        padding: 2vw 13.5vw 2vw 0
    }

    .navi-content ul.navi-tab-list li.active::before {
        width: 10vw;
        height: 5vw;
        right: 2.5vw;
        top: -.5vw
    }

    .navi-content .navi-tab-inner {
        width: 100%;
        margin-bottom: -3vw
    }

    .navi-content .navi-tab-inner .navi-slider-icon01-box {
        top: 4vw
    }

    .navi-content .navi-tab-inner ul.navi-slider {
        width: 75%;
        margin: 0 auto 10vw
    }

    .navi-content .navi-tab-inner ul.navi-slider::after {
        width: 130%;
        height: 54vw;
        top: -2vw;
        background: url(../images/top/navi-slider-frame-icon.svg) no-repeat center center;
        background-size: contain
    }

    .navi-content .navi-tab-inner ul.navi-slider li img {
        height: 49vw
    }

    .navi-content .navi-tab-inner ul.navi-slider li p.copy-text {
        bottom: 4vw
    }

    .navi-content .navi-tab-inner ul.navi-slider li p.copy-text span {
        font-size: clamp(1.8rem, 2.34vw, 2.4rem);
        padding: 2vw 5vw
    }

    .navi-content .navi-tab-inner ul.navi-slider .slick-arrow {
        width: 3vw;
        height: 5vw;
        top: 35%
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots {
        margin: 8vw auto 0
    }

    .navi-content .navi-tab-inner ul.navi-slider ul.slick-dots li::after {
        font-size: clamp(1.4rem, 1.82vw, 1.87rem)
    }

    .navi-content .navi-column-inner {
        flex-wrap: nowrap
    }

    .navi-content .navi-column-inner a.navi-movie-link {
        margin-right: 5vw;
        margin-bottom: 0
    }

    .navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(1) {
        height: 15vw;
        width: 20vw
    }

    .navi-content .navi-column-inner a.navi-movie-link img:nth-of-type(2) {
        width: 100%
    }

    .navi-content .navi-column-inner .navi-link-box .kirinuki {
        width: 13vw
    }

    .navi-content .navi-column-inner .navi-link-box .kirinuki::before {
        width: 18vw;
        height: 8vw;
        transform: translateY(-32%) translateX(100%)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link {
        width: 25vw;
        height: 25vw;
        transform: translateX(-13%)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link span {
        font-size: clamp(1.3rem, 1.69vw, 1.73rem)
    }

    .navi-content .navi-column-inner .navi-link-box a.navi-circle-link .icon {
        width: 10vw;
        height: 6vw;
        margin: 0 auto -2vw
    }

    .event-content .event-title-icon {
        height: 12vw
    }

    .event-content .event-inner::after {
        width: 16vw;
        height: 15vw;
        left: 29vw;
        top: 40vw
    }

    .event-content .event-inner ul.event-card-list {
        margin: 0 auto 14vw
    }

    .event-content .event-inner ul.event-card-list.list01::before {
        width: 10vw;
        height: 15vw;
        left: 20vw;
        bottom: -20vw
    }

    .event-content .event-inner ul.event-card-list.list01::after {
        width: 12vw;
        height: 18vw;
        right: 20vw;
        bottom: -23vw
    }

    .event-content .event-inner ul.event-card-list.list02::before {
        left: 18vw;
        bottom: -38vw;
        height: 29vw
    }

    .event-content .event-inner ul.event-card-list.list02::after {
        right: 23vw;
        bottom: -38vw;
        height: 29vw
    }

    .event-content .event-inner .event-kirinuki-box03 {
        width: 23%;
        transform: translateY(0) translateX(-50%)
    }

    .event-content .event-inner .event-kirinuki-box03::after {
        width: 17vw;
        height: 10vw;
        left: -7vw;
        top: 0
    }

    .sns-content {
        padding: 48vw 8vw 10vw;
        margin-top: -35vw
    }

    .sns-content .sns-inner .text-column {
        margin-bottom: 10vw
    }

    .sns-content .sns-inner .text-column .group01 {
        width: 23vw
    }

    .sns-content .sns-inner .text-column .group01 .kirinuki-box img:nth-of-type(2) {
        left: -12vw;
        top: -3vw;
        width: 21vw;
        height: 21vw
    }

    .sns-content .sns-inner .text-column .group01 .icon-box {
        width: 30vw;
        margin-top: -17vw;
        height: 30vw;
        transform: translateY(20%) translateX(-17%)
    }

    .sns-content .sns-inner .text-column .group02 {
        width: calc(100% - 23vw)
    }

    .sns-content .sns-inner .text-column .group02 h3.sns-section-title {
        width: calc(100% + 9vw);
        height: 29vw;
        margin-left: -6vw;
        margin-top: -6vw;
        margin-bottom: 2vw
    }

    .sns-content .sns-inner ul.sns-slider-list {
        margin: 0 auto 10vw
    }

    .sns-content .sns-inner ul.sns-slider-list::after {
        width: 14vw;
        height: 14vw;
        top: 2.5vw;
        left: unset;
        right: 9vw
    }

    .sns-content .sns-inner ul.sns-slider-list::before {
        width: 16vw;
        height: 16vw;
        top: -23vw;
        left: unset;
        right: 4vw
    }

    .oc-content {
        padding: 14vw 8vw
    }

    .oc-content .oc-inner {
        padding: 6vw 2vw 5vw
    }

    .oc-content .oc-inner .text-column {
        width: 70%;
        margin: 0 auto 2vw;
        align-items: flex-start
    }

    .oc-content .oc-inner .text-column p.paragraph {
        width: calc(100% - 13vw)
    }

    .oc-content .oc-inner .text-column .icon {
        width: 11vw;
        height: 11vw
    }

    .oc-content .oc-inner ul.oc-info-list li {
        width: 33%;
        justify-content: center
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym {
        margin-right: 0;
        width: 5em
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.year {
        font-size: clamp(1.2rem, 1.56vw, 1.6rem)
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.month {
        font-size: 8vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.date-ym span.month::after {
        font-size: 8vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.day {
        font-size: 11vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.day::after {
        font-size: 11vw
    }

    .oc-content .oc-inner ul.oc-info-list li p.week {
        padding: .6vw .4vw .8vw .6vw;
        font-size: clamp(1.1rem, 1.43vw, 1.47rem)
    }

    .oc-content .oc-inner a.oc-link-btn {
        width: 20vw;
        height: 20vw
    }
}