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

    100% {
        transform: translateX(0)
    }
}

@keyframes in-left_anime {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

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

@keyframes fade-up_anime {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

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

@keyframes mission_object_bg-anime {
    0% {
        transform: rotate(0deg);
        background-position: 0%
    }

    50% {
        transform: rotate(-180deg);
        background-position: 100%
    }

    100% {
        transform: rotate(-360deg);
        background-position: 0%
    }
}

@keyframes logo_scale_anime {
    0% {
        opacity: 0;
        transform: scale(0.6)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shooting-star {
    0% {
        height: 0;
        opacity: .5
    }

    50% {
        height: 200px;
        opacity: 1
    }

    100% {
        opacity: 0;
        height: 260px
    }
}

@keyframes twinkle-stars {
    0% {
        opacity: 0
    }

    50% {
        transform: scale(1.1);
        opacity: 1
    }

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

@keyframes marker_anime {
    0% {
        background-size: 0 30%
    }

    100% {
        background-size: 100% 30%
    }
}

@keyframes fixed-notice_anime_pc {
    0% {
        bottom: -50%
    }

    100% {
        bottom: 0
    }
}

@keyframes no1_anime {
    0% {
        transform: scale(1, 1) translate(0%, 0%)
    }

    15% {
        transform: scale(0.5, 0.5) translate(0%, 20%)
    }

    30% {
        transform: scale(1.8, 0.2) translate(0%, 40%)
    }

    50% {
        transform: scale(0.5, 1.5) translate(0%, -40%)
    }

    70% {
        transform: scale(2, 0.6) translate(0%, 20%)
    }

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

@keyframes no1_anime {
    0% {
        transform: scale(1, 1)
    }

    40% {
        transform: scale(5, 5)
    }

    80% {
        transform: scale(0.5, 0.5)
    }

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

.oc-schedule {
    margin-bottom: 60px
}

@media screen and (min-width: 1025px) {
    .oc-schedule {
        margin-bottom: 140px
    }
}

.oc-schedule_title {
    margin: 0 auto 25px
}

@media screen and (min-width: 768px) {
    .oc-schedule_title {
        margin: 0 auto 50px
    }
}

.oc-schedule_container {
    padding: 40px 10px;
    position: relative
}

@media screen and (min-width: 768px) {
    .oc-schedule_container {
        padding: 100px 6vw 80px
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_container {
        padding: 100px 5vw 80px
    }
}

@media screen and (min-width: 1366px) {
    .oc-schedule_container {
        padding: 100px 13vw 80px
    }
}

.oc-schedule_inner {
    padding: 10px;
    background: #fff;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .07);
    position: relative
}

@media screen and (min-width: 1025px) {
    .oc-schedule_inner {
        padding: 3.6vw 5vw;
        box-shadow: 12px 12px 0 rgba(0, 0, 0, .07)
    }
}

.oc-schedule_inner::before {
    content: "";
    display: block;
    width: 21px;
    height: 21px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1
}

@media screen and (min-width: 1025px) {
    .oc-schedule_inner::before {
        width: 60px;
        height: 60px
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_date_box {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3.6vw
    }
}

.oc-schedule_date_txt {
    text-align: center;
    font-size: min(5.5vw, 24px);
    color: #7c7c7c
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_txt {
        margin-bottom: 10px;
        font-size: clamp(24px, 20vw, 38px)
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_date_txt {
        font-size: 30px
    }
}

@media screen and (min-width: 1536px) {
    .oc-schedule_date_txt {
        font-size: clamp(30px, 18vw, 38px)
    }
}

.oc-schedule_date_txt_num {
    padding: 0 7px;
    font-family: "Roboto", sans-serif;
    font-size: min(18vw, 75px);
    vertical-align: middle
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_txt_num {
        font-size: clamp(75px, 8vw, 150px)
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_date_txt_num {
        padding: 0 12px;
        font-size: 80px
    }
}

@media screen and (min-width: 1536px) {
    .oc-schedule_date_txt_num {
        font-size: clamp(80px, 7vw, 150px)
    }
}

.oc-schedule_date_wrap {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

@media screen and (min-width: 1025px) {
    .oc-schedule_date_wrap {
        margin: 0
    }
}

.oc-schedule_date_year,
.oc-schedule_date_day {
    color: #7c7c7c;
    font-family: "Roboto", sans-serif
}

.oc-schedule_date_year {
    font-size: 21px;
    align-self: flex-start;
    position: relative
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_year {
        font-size: clamp(21px, 1.7vw, 31px)
    }
}

.oc-schedule_date_year::after {
    content: "";
    display: block;
    width: 55px;
    height: 1px;
    background: #7c7c7c;
    position: absolute;
    bottom: 5px;
    right: -35px;
    transform: rotate(-45deg)
}

@media screen and (min-width: 1025px) {
    .oc-schedule_date_year::after {
        width: 60px;
        right: -40px
    }
}

.oc-schedule_date_day {
    padding-top: 25px;
    font-size: 25px
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_day {
        font-size: clamp(25px, 1.8vw, 34px)
    }
}

.oc-schedule_date_day span {
    padding: 0 10px;
    font-size: min(21.8vw, 94px)
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_day span {
        font-size: clamp(94px, 6.3vw, 120px)
    }
}

.oc-schedule_date_speech-bubble {
    padding: 4px 12px;
    font-size: clamp(12px, 3.4vw, 15px);
    font-size: 15px;
    color: #fff;
    border-radius: 18px;
    position: absolute;
    top: 0px;
    right: 0
}

@media screen and (min-width: 768px) {
    .oc-schedule_date_speech-bubble {
        font-size: clamp(15px, 2vw, 20px)
    }
}

.oc-schedule_date_speech-bubble::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    clip-path: polygon(0 0, 0 70%, 100% 0);
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%)
}

@media screen and (min-width: 768px) {
    .oc-schedule_info-list {
        margin-bottom: 40px;
        font-size: 21px;
        line-height: 1.6
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_info-list {
        margin-bottom: 60px;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2vw
    }
}

.oc-schedule_info-list dt {
    padding: 10px
}

@media screen and (min-width: 1025px) {
    .oc-schedule_info-list dt {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_info-list dd {
        width: calc(70% - 2vw)
    }
}

.oc-schedule_info-list dd span {
    font-weight: 700
}

.oc-schedule_info-list_period {
    padding: 20px 10px 40px
}

@media screen and (min-width: 1025px) {
    .oc-schedule_info-list_period {
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }
}

.oc-schedule_info-list_way {
    padding: 20px 10px
}

@media screen and (min-width: 1025px) {
    .oc-schedule_info-list_way {
        padding: 5px 0
    }
}

.oc-schedule_timetable_txt {
    margin-bottom: 5px
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_txt {
        font-size: 21px
    }
}

.oc-schedule_timetable_box {
    padding: 10px 15px;
    background: #efefef
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_box {
        padding: 4vw 5vw
    }
}

.oc-schedule_timetable_list {
    margin-bottom: 20px
}

.oc-schedule_timetable_list>li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_list>li {
        gap: 20px
    }
}

.oc-schedule_timetable_list>li:not(:last-child) {
    margin-bottom: 20px
}

.oc-schedule_timetable_time {
    width: 9em
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_time {
        font-size: 21px
    }
}

.oc-schedule_timetable_detail {
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    border-top: 1px solid #7c7c7c;
    border-left: 1px solid #7c7c7c
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_detail {
        padding: 35px
    }
}

.oc-schedule_timetable_detail p {
    line-height: 1.6
}

@media screen and (min-width: 768px) {
    .oc-schedule_timetable_detail p {
        font-size: 21px
    }
}

.oc-schedule_timetable_detail_title {
    font-weight: 700
}

.oc-schedule_ornamental_odd,
.oc-schedule_ornamental_even {
    display: none
}

@media screen and (min-width: 1025px) {

    .oc-schedule_ornamental_odd,
    .oc-schedule_ornamental_even {
        display: block;
        font-size: clamp(90px, 8vw, 130px);
        font-weight: 700;
        font-family: "Roboto", sans-serif;
        color: rgba(0, 0, 0, .07);
        position: absolute;
        top: 0;
        z-index: 1
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_ornamental_odd {
        left: 3vw
    }
}

@media screen and (min-width: 1025px) {
    .oc-schedule_ornamental_even {
        right: 3vw
    }
}

.oc-schedule_container-1 {
    position: relative
}

.oc-schedule_container-1::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background: #fff;
    clip-path: polygon(0 0, 50% 30%, 100% 0);
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1
}

@media screen and (min-width: 1025px) {
    .oc-schedule_container-1::before {
        width: 120px;
        height: 120px;
        bottom: -119px
    }
}

.oc-schedule_container-3 {
    position: relative
}

.oc-schedule_container-3::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background: #ead8ae;
    clip-path: polygon(0 0, 50% 30%, 100% 0);
    position: absolute;
    bottom: -59px;
    left: 50%;
    transform: translate(-50%);
    z-index: 1
}

@media screen and (min-width: 1025px) {
    .oc-schedule_container-3::before {
        width: 120px;
        height: 120px;
        bottom: -119px
    }
}

.oc-schedule_container-1 {
    background: #e3c6e3
}

.oc-schedule_container-1 .oc-schedule_inner::before {
    background: #e3c6e3
}

.oc-schedule_container-1 .oc-schedule_date_txt_num {
    color: #aa7fa5
}

.oc-schedule_container-1 .oc-schedule_date_day span {
    color: #aa7fa5
}

.oc-schedule_container-1 .oc-schedule_date_speech-bubble {
    background: #aa7fa5
}

.oc-schedule_container-1 .oc-schedule_date_speech-bubble::after {
    background: #aa7fa5
}

.oc-schedule_container-1 .oc-schedule_info-list dt {
    background: rgba(227, 198, 227, .5)
}

.oc-schedule_container-2 {
    background: #b2d5d6
}

.oc-schedule_container-2 .oc-schedule_inner::before {
    background: #b2d5d6
}

.oc-schedule_container-2 .oc-schedule_date_txt_num {
    color: #7f9eaa
}

.oc-schedule_container-2 .oc-schedule_date_day span {
    color: #7f9eaa
}

.oc-schedule_container-2 .oc-schedule_date_speech-bubble {
    background: #7f9eaa
}

.oc-schedule_container-2 .oc-schedule_date_speech-bubble::after {
    background: #7f9eaa
}

.oc-schedule_container-2 .oc-schedule_info-list dt {
    background: rgba(178, 213, 214, .5)
}

.oc-schedule_container-3 {
    background: #ead8ae
}

.oc-schedule_container-3 .oc-schedule_inner::before {
    background: #ead8ae
}

.oc-schedule_container-3 .oc-schedule_date_txt_num {
    color: #aa8e7f
}

.oc-schedule_container-3 .oc-schedule_date_day span {
    color: #aa8e7f
}

.oc-schedule_container-3 .oc-schedule_date_speech-bubble {
    background: #aa8e7f
}

.oc-schedule_container-3 .oc-schedule_date_speech-bubble::after {
    background: #aa8e7f
}

.oc-schedule_container-3 .oc-schedule_info-list dt {
    background: rgba(234, 216, 174, .5)
}

.oc-experience {
    margin-bottom: 60px;
    overflow: hidden;
    position: relative
}

@media screen and (min-width: 1025px) {
    .oc-experience {
        margin-bottom: 100px
    }
}

.oc-experience_pic01 {
    margin-bottom: 40px;
    aspect-ratio: 2/1;
    overflow: hidden;
    -webkit-mask-image: url(../images/common/mask-img.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: cover;
    mask-image: url(../images/common/mask-img.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: cover;
    position: relative
}

.oc-experience_pic01-bg {
    /* width: 100%;
    height: 100%; */
    background: #916195;
    background: -webkit-gradient(linear, left center, right center, from(#DEE1F5), to(#916195));
    background: -webkit-linear-gradient(left, #DEE1F5 0%, #916195 100%);
    background: linear-gradient(to right, #DEE1F5 0%, #916195 100%);
    position: absolute;
    top: 0;
    left: 0
}

@media screen and (min-width: 1025px) {
    .oc-experience_pic01 {
        margin-bottom: 0;
        width: 38.5vw;
        max-width: 740px;
        aspect-ratio: 3/2;
        position: absolute;
        top: 7%;
        right: 0;
        z-index: 1
    }
}

.oc-experience_pic01 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oc-experience_list {
    margin-bottom: 45px;
    padding: 0 10px
}

@media screen and (min-width: 768px) {
    .oc-experience_list {
        margin-bottom: 100px;
        padding: 0 10%
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_list {
        padding: 0;
        padding-left: calc(6vw + 1rem)
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_list>div {
        position: relative;
        width: fit-content
    }

    .oc-experience_list>div:nth-of-type(2) {
        margin-left: 70px
    }

    .oc-experience_list>div:nth-of-type(3) {
        margin-left: 140px
    }
}

.oc-experience_list>div:not(:last-of-type) {
    margin-bottom: 30px
}

@media screen and (min-width: 768px) {
    .oc-experience_list>div:not(:last-of-type) {
        margin-bottom: 60px
    }
}

.oc-experience_list dt {
    text-align: center;
    font-size: 30px;
    font-weight: 700
}

@media screen and (min-width: 768px) {
    .oc-experience_list dt {
        font-size: 39px
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_list dt {
        position: absolute;
        top: -30px;
        left: -1rem;
        z-index: 1
    }
}

.oc-experience_list dd {
    padding: 10px;
    text-align: center;
    background: #eceef8;
    border-radius: 10px
}

@media screen and (min-width: 768px) {
    .oc-experience_list dd {
        font-size: 24px
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_list dd {
        padding: 40px 45px;
        font-size: clamp(22px, 1.6vw, 30px)
    }
}

.oc-experience_list dd span {
    padding: 0 5px;
    font-size: 21px;
    font-weight: 700;
    color: #916195
}

@media screen and (min-width: 768px) {
    .oc-experience_list dd span {
        font-size: 36px
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_list dd span {
        font-size: clamp(26px, 1.9vw, 36px)
    }
}

.oc-experience_slide ul {
    transition-timing-function: linear
}

.oc-experience_slide ul li {
    width: 250px;
    aspect-ratio: 4/3
}

@media screen and (min-width: 768px) {
    .oc-experience_slide ul li {
        width: 350px
    }
}

@media screen and (min-width: 1025px) {
    .oc-experience_slide ul li {
        width: 450px
    }
}

.oc-experience_slide ul li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oc-program {
    overflow: hidden
}

.oc-program_box {
    margin-left: 36px;
    padding-top: 50vw;
    padding-bottom: 15%;
    background: #eceef8;
    position: relative
}

.oc-program_box::before {
    content: "";
    display: block;
    width: 100%;
    height: 13vw;
    background: #fff;
    transform: skewY(-4deg);
    position: absolute;
    top: -5vw;
    z-index: 1
}

@media screen and (min-width: 1025px) {
    .oc-program_box::before {
        height: 25%;
        top: -14%
    }
}

.oc-program_box::after {
    content: "";
    display: block;
    width: 100%;
    height: 13vw;
    background: #fff;
    position: absolute;
    bottom: -5vw;
    transform: skewY(-4deg)
}

@media screen and (min-width: 1025px) {
    .oc-program_box::after {
        height: 11vw;
        bottom: -5vw
    }
}

.oc-program_box:not(:last-of-type) {
    margin-bottom: 20px
}

@media screen and (min-width: 1025px) {
    .oc-program_box:not(:last-of-type) {
        margin-bottom: 6%
    }
}

@media screen and (min-width: 768px) {
    .oc-program_box {
        padding-top: 40vw
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_box {
        margin-left: 0;
        padding-top: 10vw;
        padding-bottom: 10%
    }
}

@media screen and (min-width: 1025px) {

    .oc-program_box-even::before,
    .oc-program_box-even::after {
        transform: skewY(4deg)
    }

    .oc-program_box-even .oc-program_pic01 {
        overflow: hidden;
        -webkit-mask-image: url(../images/common/mask-img_reverse.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center center;
        -webkit-mask-size: cover;
        mask-image: url(../images/common/mask-img_reverse.svg);
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        right: auto;
        left: 0
    }

    .oc-program_box-even .oc-program_txt-wrap {
        margin-left: auto
    }

    .oc-program_box-even .oc-program_fancy-script {
        left: auto;
        right: 1vw
    }

    .oc-program_box-even .oc-program_list_title {
        padding-left: 0;
        padding-right: 120px
    }
}

.oc-program_pic01 {
    width: 80vw;
    aspect-ratio: 3/2;
    overflow: hidden;
    -webkit-mask-image: url(../images/common/mask-img.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: cover;
    mask-image: url(../images/common/mask-img.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: cover;
    position: relative;
    position: absolute;
    top: -5%;
    right: 0;
    z-index: 1
}

.oc-program_pic01-bg {
    /* width: 100%;
    height: 100%; */
    background: #916195;
    background: -webkit-gradient(linear, left center, right center, from(#DEE1F5), to(#916195));
    background: -webkit-linear-gradient(left, #DEE1F5 0%, #916195 100%);
    background: linear-gradient(to right, #DEE1F5 0%, #916195 100%);
    position: absolute;
    top: 0;
    left: 0
}

@media screen and (min-width: 768px) {
    .oc-program_pic01 {
        width: 60vw
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_pic01 {
        width: 38.5vw;
        max-width: 740px;
        top: -10%
    }
}

.oc-program_pic01 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oc-program_txt-wrap {
    margin-left: 36px;
    position: relative
}

@media screen and (min-width: 768px) {
    .oc-program_txt-wrap {
        width: 40%
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_txt-wrap {
        margin-left: 0
    }
}

.oc-program_fancy-script {
    margin-bottom: 10px;
    font-size: 54px;
    font-weight: 700;
    color: rgba(100, 81, 154, .1);
    line-height: 1
}

@media screen and (min-width: 768px) {
    .oc-program_fancy-script {
        text-align-last: right
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_fancy-script {
        font-size: clamp(80px, 7.8vw, 150px);
        position: absolute;
        top: -9vw;
        left: 1vw;
        z-index: 1
    }

    .oc-program_fancy-script_two-lines {
        top: calc(-9vw - 1em)
    }
}

.oc-program_list_title {
    margin-bottom: 20px;
    padding: 4px 10px;
    background: #7a7291
}

@media screen and (min-width: 768px) {
    .oc-program_list_title {
        margin-left: calc(-36px * 2);
        text-align: right
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_list_title {
        padding-left: 120px
    }
}

.oc-program_list_title span {
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

@media screen and (min-width: 768px) {
    .oc-program_list_title span {
        font-size: 24px
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_list_title span {
        display: block;
        margin: 0 auto;
        width: fit-content;
        font-size: clamp(24px, 2.3vw, 44px)
    }
}

@media screen and (min-width: 768px) {
    .oc-program_list {
        font-size: 20px;
        margin-left: auto;
        width: fit-content
    }
}

@media screen and (min-width: 1025px) {
    .oc-program_list {
        margin: 0 auto;
        font-size: clamp(20px, 1.6vw, 30px);
        min-height: 6em
    }
}

.oc-program_list>li span {
    margin-left: 1em
}

@media screen and (min-width: 1025px) {
    .oc-program_list>li span {
        font-size: clamp(16px, 1.1vw, 21px)
    }
}

.oc-program_list>li::before {
    content: "・"
}

.oc-bottom {
    width: 100vw;
    margin-bottom: 50px;
    overflow: hidden
}

@media screen and (min-width: 768px) {
    .oc-bottom {
        margin-bottom: 100px
    }
}

.oc-access {
    margin-bottom: 60px
}

@media screen and (min-width: 768px) {
    .oc-access {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        gap: 3vw
    }
}

@media screen and (min-width: 1025px) {
    .oc-access {
        gap: 7vw
    }
}

.oc-access_pic01 {
    margin-bottom: 10px;
    width: 100%;
    aspect-ratio: 2/1
}

@media screen and (min-width: 768px) {
    .oc-access_pic01 {
        width: 44vw
    }
}

.oc-access_pic01 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oc-access_title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .1em
}

@media screen and (min-width: 768px) {
    .oc-access_title {
        position: absolute;
        top: -23px;
        left: -10px
    }
}

.oc-access_txt-wrap {
    margin: 0 10px 30px;
    position: relative
}

@media screen and (min-width: 768px) {
    .oc-access_txt-wrap {
        margin: 0 0 20px
    }
}

@media screen and (min-width: 1025px) {
    .oc-access_txt-wrap {
        margin-right: -8vw;
        margin-bottom: 50px
    }
}

.oc-access_txt-wrap p {
    padding: 10px;
    text-align: center;
    background: #eceef8;
    border-radius: 10px
}

@media screen and (min-width: 768px) {
    .oc-access_txt-wrap p {
        padding: 20px 25px
    }
}

@media screen and (min-width: 1025px) {
    .oc-access_txt-wrap p {
        padding: 2vw 3vw;
        font-size: clamp(18px, 1.6vw, 30px)
    }
}

.oc-access_txt-wrap p span {
    font-size: 21px;
    font-weight: 700;
    color: #916195
}

@media screen and (min-width: 1025px) {
    .oc-access_txt-wrap p span {
        padding-left: 5px;
        font-size: clamp(22px, 1.9vw, 36px)
    }
}

@media screen and (min-width: 768px) {
    .oc-report {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3vw
    }
}

@media screen and (min-width: 1025px) {
    .oc-report {
        gap: 7vw
    }
}

.oc-report_pic01 {
    margin-bottom: 10px;
    width: 100%;
    aspect-ratio: 2/1
}

@media screen and (min-width: 768px) {
    .oc-report_pic01 {
        width: 44vw
    }
}

.oc-report_pic01 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.oc-report_title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .1em
}

@media screen and (min-width: 768px) {
    .oc-report_title {
        position: absolute;
        top: -23px;
        right: -20px
    }
}

.oc-report_txt-wrap {
    margin: 0 10px 30px;
    position: relative
}

@media screen and (min-width: 768px) {
    .oc-report_txt-wrap {
        margin: 0 0 20px
    }
}

@media screen and (min-width: 1025px) {
    .oc-report_txt-wrap {
        margin-left: -8vw;
        margin-bottom: 50px
    }
}

.oc-report_txt-wrap p {
    padding: 10px;
    text-align: center;
    background: #eceef8;
    border-radius: 10px
}

@media screen and (min-width: 768px) {
    .oc-report_txt-wrap p {
        padding: 20px 25px
    }
}

@media screen and (min-width: 1025px) {
    .oc-report_txt-wrap p {
        padding: 2vw 3vw;
        font-size: clamp(18px, 1.6vw, 30px)
    }
}

.oc-report_txt-wrap p span {
    font-size: 21px;
    font-weight: 700;
    color: #916195
}

@media screen and (min-width: 1025px) {
    .oc-report_txt-wrap p span {
        padding-left: 5px;
        font-size: clamp(22px, 1.9vw, 36px)
    }
}

.sub-pages_title-box {
    padding-top: 65px;
    padding-right: 20px;
    width: 100%;
    height: 250px;
    background: url(../images/common/bg-star.jpg) center center/cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden
}

@media screen and (min-width: 768px) {
    .sub-pages_title-box {
        padding-top: 100px;
        padding-right: 5vw;
        height: 350px
    }
}

.sub-pages_title-wrap {
    padding-left: 36px;
    /* animation: in-right_anime .6s both */
}

@media screen and (min-width: 768px) {
    .sub-pages_title-wrap {
        padding-left: 10vw
    }
}

/* @media screen and (min-width: 1025px) {
    .sub-pages_title-wrap {
        animation: in-right_anime 1s both
    }
} */

.sub-pages_title-wrap .section-title,
.sub-pages_title-wrap .title-addition {
    color: #fff
}

.sub-pages_title-wrap .section-title::after {
    background: #fff
}

.sub-pages_header-default {
    background: rgba(0, 0, 0, .15);
    transition: background-color .5s
}

.sub-pages_header-default .header_logo_svg {
    display: none
}

.sub-pages_header-default .header_logo-white_svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.sub-pages_header-default .header_drawer-btn span {
    background: #fff
}

.sub-pages_header-default .application-oc .application-icon_bg,
.sub-pages_header-default .application-entry .application-icon_bg {
    fill: none;
    stroke: #fff
}

.sub-pages_header-default .application-oc .application-icon_line,
.sub-pages_header-default .application-entry .application-icon_line {
    stroke: #fff
}

.sub-pages_header-default .application_txt {
    color: #fff
}

.body.drawer-open .sub-pages_header {
    background: #fff;
    transition: background-color .5s
}

.body.drawer-open .sub-pages_header .header_logo_svg {
    display: block
}

.body.drawer-open .sub-pages_header .header_logo-white_svg {
    display: none
}

.body.drawer-open .sub-pages_header .header_drawer-btn span {
    background: #fff
}

.body.drawer-open .sub-pages_header .application-oc .application-icon_bg {
    fill: #82429a
}

.body.drawer-open .sub-pages_header .application-oc .application-icon_line {
    stroke: #82429a
}

.body.drawer-open .sub-pages_header .application-oc .application_txt {
    color: #82429a
}

.body.drawer-open .sub-pages_header .application-entry .application-icon_bg {
    fill: #3b6a9a
}

.body.drawer-open .sub-pages_header .application-entry .application-icon_line {
    stroke: #3b6a9a
}

.body.drawer-open .sub-pages_header .application-entry .application_txt {
    color: #3b6a9a
}

.outline-text {
    color: #dee1f5;
    -webkit-text-stroke: 1px #64519a
}

.outline-text span {
    display: inline-block;
    margin-left: 10px;
    transform: rotate(30deg)
}