@media screen and (max-width:1064px) {
    .slider2 {
        height: 200px
    }

    .page-content-body {
        overflow: hidden
    }
}

@media screen and (max-width:768px) {
    .pc {
        display: none
    }

    .sp {
        display: block !important
    }

    .swiper-container1:before {
        padding-top: calc(9 / 16 * 213.5%)
    }

    .bg_label {
        background-image: url(../img/front/bg_title_img_sp.svg);
aspect-ratio: 106 / 233;
    height: 48vw;
        left: 10vw;
        display: block;
        bottom: 10%;
    }
    .bg_wh {
        aspect-ratio: 5 / 9;
        left: 6vw;
        height: 46%;
        bottom: 8vw;
    }
    .date_area {
        aspect-ratio: 5 / 9;
        display: flex;
        flex-direction: column;
        justify-content: start;
        line-height: 1.4;
    }
    
    .held_box, .year_box {
        font-size: 3.5vw;
        font-size: 3vw;
        margin-left: 5px;
    }
    .date01_box, .date02_box {
        font-size: 4.3vw;
        font-size: 4vw;
    }

    .catchcopy {
        width: 50.4vw;
        top: 74vw;
        right: 7vw;
        text-align: left;
    }

    .catchcopy h3 {
        font-size: 3vw;
    line-height: 2;
    }
    
    .catchcopy h3::before {
        top: -15.5vw;
        left: -2vw;
        width: 12vw;
        height: 12vw;
    }

    .movie-wrap {
        bottom: 22px;
        left: 43vw;
        flex-direction: inherit;
        align-items: center
    }

    .movie-btn {
        width: 58px;
        height: 58px;
        background: rgba(255, 255, 255, 0);
        margin-top: 0
    }

    .movie-btn::before {
        border-width: 8px 0 8px 12px
    }

    .movie-wrap p {
        line-height: 58px;
        padding-top: 0;
        font-size: 24px;
        padding-left: 24px;
        white-space: nowrap
    }

    .swiper-container-horizontal>.swiper-pagination-progressbar,
    .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        width: 30%;
        top: 80%;
        right: 27%
    }

    .news-wrap {
        width: 100%;
        text-align: center;
        padding: 40px 0
    }

    .news-title {
        width: 90%;
        height: auto;
        display: inline-flex;
        align-items: flex-end;
        padding: 15px 0 10px
    }

    .news-title h2 {
        padding-bottom: 0;
        font-size: 40px;
        letter-spacing: 2px
    }

    .news-title p {
        padding-left: 35px;
        font-size: 21px
    }

    .news-contents-wrap {
        display: block
    }

    .news-contents-right {
        width: 90%;
        display: inline-block
    }

    .news-name,
    .news-time {
        font-size: 24px;
        text-align: left;
        line-height: 1.5
    }

    .sticky {
        display: flex;
        font-size: 24px
    }

    .fa-exclamation-circle {
        font-size: 24px
    }

    .page-btn a {
        font-size: 22px;
        padding: 10px 0;
        border-radius: 50px
    }

    .to-newslist {
        margin-top: 30px
    }

    .to-newslist a {
        width: 40%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        box-sizing: border-box;
        bottom: -50px;
        margin-top: 30px
    }

    .to-newslist a:hover {
        background-color: #21215a;
        color: #fff
    }

    .news-sns {
        width: 90%;
        display: inline-flex;
        flex-direction: inherit;
        gap: 0 23px;
        margin-top: 120px;
        padding-bottom: 5%;
        position: relative
    }

    .news-sns-contents {
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .news-sns a {
        height: 50px
    }

    .info-img {
        width: 30% !important;
        position: absolute;
        left: 0;
        top: -50%
    }

    .news-sns p {
        font-family: "EB Garamond";
        font-size: 32px;
        margin-left: 23px
    }

    .fa-facebook,
    .fa-instagram,
    .fa-youtube {
        font-size: 48px
    }

    .about-contents-wrap {
        margin: 0 0 10%
    }

    .about-contents-wrap::after {
        height: 65%;
        bottom: auto;
        top: 180px
    }

    .about-contents-body {
        width: 90%
    }

    .about-wrap,
    .outline-wrap {
        width: 50%
    }

    .about-img,
    .outline-img {
        max-width: none;
        max-height: none
    }

    .about-text,
    .outline-text {
        width: 15%
    }

    .outline-text {
        bottom: auto;
        top: 60%
    }

    .parades-slider_pc,
    .sp_520 {
        display: none
    }

    .parades-slider_sp {
        display: flex;
        gap: 58px
    }

    .parades-wrap-top-img {
        width: 100%
    }

    .item-wrap1 img {
        width: 645px;
        height: 398px
    }

    .item-wrap2 img {
        width: 357px;
        height: 438px
    }

    .item-wrap3 img {
        width: 315px;
        height: 367px
    }

    .item-wrap4 img {
        width: 553px;
        height: 347px
    }

    .item-wrap5 img {
        width: 964px;
        height: 488px
    }

    .item-wrap6 img {
        width: 1058px;
        height: 430px
    }

    div.item1.item-parent1 img,
    div.item2.item-parent2 img,
    div.item3.item-parent3 img,
    div.item4.item-parent4 img,
    div.item5.item-parent5 img {
        width: 62px;
        height: 47px
    }

    .item4 {
        bottom: 122px
    }

    .item5 {
        right: 290px;
        top: 34px
    }

    img.item1-2 {
        width: 203px;
        height: 77px
    }

    img.item6-1 {
        width: 153px;
        height: 48px
    }

    .item1-2 {
        right: 95px
    }

    .item6-1 {
        left: 220px
    }

    .to-parades a {
        width: 40%;
        display: inline-block;
        box-sizing: border-box
    }

    .page-content-body {
        width: 100%;
        height: 300px;
        max-height: none;
        text-align: center;
        padding: 0 0;
        margin-bottom: 0
    }

    .slider3 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative
    }

    .slider3 img {
        width: 70%;
        height: auto;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%)
    }

    .swiper-wrapper {
        display: inline-flex
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 41px;
        height: 41px
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        border-width: 7px 0 7px 13px
    }

    .swiper-button-next,
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        top: 150px
    }

    .banner-bottom {
        text-align: center
    }

    .banner-bottom ul {
        width: 90%;
        display: inline-flex;
        flex-wrap: wrap;
        gap: 20px 0;
        justify-content: flex-start
    }

    .banner-bottom img {
        width: 325px
    }
}

@media screen and (max-width:766px) {
    .banner-bottom img {
        width: 255px
    }
}

@media screen and (max-width:600px) {
    .news-sns p {
        font-size: 28px
    }

    .fa-facebook,
    .fa-instagram,
    .fa-youtube {
        font-size: 35px
    }

    .about-contents-wrap {
        height: 399px
    }

    .about-contents-wrap::after {
        top: auto;
        bottom: 0
    }
}

@media screen and (max-width:586px) {
    .movie-wrap {
        bottom: 10px
    }

    .movie-btn {
        width: 48px;
        height: 48px
    }

    .movie-wrap p {
        font-size: 20px
    }
}

@media screen and (max-width:520px) {
    .movie-wrap {
        bottom: 7px
    }

    .movie-wrap p {
        font-size: 14px;
        padding-left: 12px
    }

    .movie-btn {
        width: 39px;
        height: 39px
    }

    .movie-btn::before {
        border-width: 7px 0 7px 10px;
        padding-right: 1px
    }

    .about-contents-wrap {
        margin: 3% 0 5%
    }

    .news-wrap {
        padding: 30px 0 0
    }

    .news-title h2 {
        font-size: 22px
    }

    .news-title p {
        font-size: 13px
    }

    .news-name,
    .news-time,
    .sticky {
        font-size: 14px
    }

    .fa-exclamation-circle {
        font-size: 21px
    }

    .page-btn a {
        font-size: 16px
    }

    .news-sns p {
        font-size: 20px;
        margin-left: 15px
    }

    .fa-facebook,
    .fa-instagram,
    .fa-youtube {
        font-size: 29px
    }

    .news-sns {
        margin-top: 20%
    }

    .about-contents-wrap {
        margin: 5% 0
    }

    .parades-slider_sp {
        display: none
    }

    .sp_520 {
        height: 240px;
        display: flex;
        gap: 58px;
        padding-top: 36px
    }

    .slider__inner {
        gap: 25px;
        align-items: center
    }

    .parades-wrap {
        padding-bottom: 30px
    }

    .item-wrap1 {
        padding-left: 10px
    }

    .item-wrap1 img {
        width: 313px;
        height: 195px
    }

    .item-wrap2 img {
        width: 196px;
        height: 240px
    }

    .item-wrap3 img {
        width: 206px;
        height: 240px
    }

    .item-wrap4 img {
        width: 382px;
        height: 240px
    }

    .item-wrap5 img {
        width: 474px;
        height: 240px
    }

    .item-wrap6 img {
        width: 591px;
        height: 240px
    }

    div.item1.item-parent1 img,
    div.item2.item-parent2 img,
    div.item3.item-parent3 img,
    div.item4.item-parent4 img,
    div.item5.item-parent5 img {
        width: 30px;
        height: 23px
    }

    img.item1-2 {
        width: 105px;
        height: 37px
    }

    img.item6-1 {
        width: 79px;
        height: 23px
    }

    .item1-2 {
        right: 48px
    }

    .item6-1 {
        left: 220px
    }

    .item1 {
        left: -14px
    }

    .item2 {
        right: 2px;
        top: 23px
    }

    .item3 {
        right: 8px;
        top: 63px
    }

    .item4 {
        bottom: 54px;
        right: -32px
    }

    .item5 {
        right: 138px;
        top: 21px
    }

    .item6-1 {
        left: 129px
    }

    .to-parades {
        margin: 30px 0 0
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 28px;
        height: 28px
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        border-width: 4px 0 4px 7px
    }

    .page-content-body {
        height: 193px
    }

    .swiper-button-next,
    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        top: 105px
    }

    .slider3 img {
        width: 65%
    }

    .banner-bottom ul {
        gap: 10px 0
    }

    .banner-bottom li {
        padding: 0 5px;
        width: 46.9%
    }

    .banner-bottom a {
        display: flex;
        justify-content: center;
        align-items: flex-start
    }

    .banner-bottom img {
        width: 100%
    }
}

@media screen and (max-width:500px) {
    .about-contents-wrap::after {
        top: 113px
    }

    .movie-wrap {
        right: 10%
    }
}

@media screen and (max-width:450px) {
    .about-contents-wrap {
        height: 300px
    }
}

@media screen and (max-width:430px) {
    .movie-wrap {
        bottom: 0
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 20px
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 20px
    }

    .news-sns-contents {
        width: 80%
    }

    .about-contents-wrap {
        height: 325px;
        margin: 0 0 5%
    }
}

@media screen and (max-width:414px) {
    .info-img {
        top: -45%
    }

    .outline-text {
        top: 65%
    }

    .fa-facebook,
    .fa-instagram,
    .fa-youtube {
        font-size: 25px
    }

    .news-sns a {
        padding-bottom: 0
    }

    .news-sns-contents {
        width: 75%
    }
}

@media screen and (max-width:375px) {
    .drawer {
        height: 70px
    }

    .movie-wrap {
        bottom: -3px
    }

    .movie-btn {
        width: 26px;
        height: 26px
    }

    .movie-wrap p {
        font-size: 14px
    }

    .movie-btn::before {
        border-width: 4px 0 4px 7px;
        padding-right: 3px
    }

    .movie-wrap {
        right: 9%;
        left: auto
    }

    .news-wrap {
        padding: 0
    }

    .news-sns-contents {
        width: 70%
    }

    .news-title h2 {
        font-size: 20px
    }

    .news-title p {
        font-size: 11px;
        padding-left: 13px
    }

    .news-time {
        font-size: 10px;
        line-height: 10px;
        padding-bottom: 5px
    }

    .news-name,
    .sticky {
        font-size: 12px;
        line-height: 12px;
        text-align: left
    }

    .page-btn a {
        font-size: 14px
    }

    .to-newslist {
        margin-top: 0
    }

    .to-newslist a {
        width: 145px;
        margin-top: 15px
    }

    .news-contents-wrap {
        padding-top: 15px
    }

    .news-sns p {
        font-size: 16px;
        padding-left: 0;
        margin-left: 11px
    }

    .fa-exclamation-circle {
        font-size: 15px
    }

    .fa-facebook,
    .fa-instagram,
    .fa-youtube {
        font-size: 23px
    }

    img.info-img {
        top: -40px
    }

    .page-btn a {
        width: 145px;
        height: 30px;
        padding: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center
    }

    .sticky {
        margin-bottom: 5px
    }

    .about-contents-wrap {
        height: 273px
    }

    .page-content-body {
        max-height: 139px
    }

    .about-contents-wrap::after {
        height: 160px
    }

    .about-text {
        width: 30px;
        height: 194px
    }

    .outline-text {
        width: 30px;
        height: 94px
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        top: 83px
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        top: 83px
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 20px;
        height: 20px
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 24px
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 24px
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        border-width: 3px 0 3px 5px
    }

    .slider3 img {
        width: 258px;
        height: 80px
    }

    .banner-wrap h2 {
        font-size: 20px;
        padding-bottom: 23px
    }

    .banner-wrap {
        padding: 34px 0 54px
    }

    .banner-bottom ul {
        padding: 30px 0 32px
    }
}