:root {
    --ft-dela: "Dela Gothic One", sans-serif;
    --ft-alfa: "Alfa Slab One", serif;
}
* {
    box-sizing: border-box;
    color: #0d0d0d;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.open {
    overflow: hidden;
}
a {
    text-decoration: none;
}
img {
    height: auto;
    max-width: 100%;
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.pc2 {
    display: block;
}
.sp2 {
    display: none;
}
@media screen and (max-width: 968px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
}
@media screen and (max-width: 768px) {
    .pc2 {
        display: none;
    }
    .sp2 {
        display: block;
    }
}

/* フェードインアップ */
.js-fadeUp {
	opacity:0;
	transform: translateY(30px);
}

/* inviewになったらバウンド付きフェードイン */
.js-fadeUp.is-inview {
	animation: fadeUpBounce 1s ease-out forwards;
}

/* バウンドアニメーション */
@keyframes fadeUpBounce {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	40% {
		opacity:1;
		transform:translateY(0);
	}
	60% {
        opacity:1;
		transform:translateY(-6px); /* 1回目のバウンド（上に） */
	}
	75% {
        opacity:1;
		transform:translateY(0px);   /* 下に落ちる */
	}
	88% {
        opacity:1;
		transform:translateY(-2px);  /* 2回目の小さなバウンド */
	}
	100% {
        opacity:1;
		transform:translateY(0);     /* 最終位置で止まる */
	}
}

.container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: clip;
    width: 100%;
    max-width: 1920px;
}

/* fv */
.fv {
    position: relative;
    z-index: 1;
}
.chara {
    position: absolute;
    right: 6.5%;
    bottom: 12%;
    width: 458px;
}
.fv picture {
    display: block;
    line-height: 0;
}
.fv img {
    width: 100%;
    max-width: none;
}
@media screen and (max-width: 1880px) {
    .chara {
        width: 23.5vw;
    }
}
@media screen and (max-width: 968px) {
    .fv {
        margin: 0 0 -1px;
        position: relative;
    }
    .fv-main {
        position: relative;
    }
    .chara {
        top: 10.5%;
        right: 0;
        bottom: inherit;
        width: 51vw;
    }
}
@media screen and (max-width: 568px) {
    .chara {
        top: 10.5%;
    }
}


/* loopsliders */
.loopsliders {
    background:#fff;
    background-image: url(../images/loopslider-bg.png);
    background-position: center;
    background-size: 1999px;
    filter: drop-shadow(0 0 27px rgb(0 0 0 / 45%));
    line-height: 0;
    padding: 14px 0;
    position: relative;
}
.loopslider {
    animation: scroll-left 45s linear infinite;
    display: flex;
    width: max-content;
}
.loopslide {
    flex-shrink: 0;
    width: 1999px;
}
/* CSSアニメーション */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 1168px) {
    .loopslide {
        width: 2392px;
    }
}
@media screen and (max-width: 968px) {
    .loopsliders {
        background-image: url(../images/loopslider-bg-sp.png);
        background-size: cover;
        margin-top: -1px;
        padding: 2.5vw 0;
    }
    .loopsliders::before,
    .loopsliders::after {
        background-size: 1225px;
        height: 48px;
    }
    .loopslide {
        width: 340vw;
    }
}
/* floating */
.floating {
    display: none;
    height: auto;
    margin: auto;
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 100%;
    max-width: 179px;
    z-index: 2;
}
.floating-inner {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 auto;
    width: 100%;
}
.floating-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.floating-item {
    filter: drop-shadow(17px 0 16px rgb(70 70 70 / 30%));
    position: relative;
    width: 100%;
}
.floating-item a {
    display: block;
    line-height: 0;
}
@media screen and (max-width: 968px) {
    .floating {
        max-width: 25vw;
    }
    .floating-items {
        gap: 3vw;
    }
}

/* endroll */
.endroll {
    background: url(../images/endroll-bg.jpg) no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 125px 0 85px;
    position: relative;
}
.endroll-inner {
    position: relative;
    z-index: 1;
}
.endroll-head {
    margin: 0 auto 90px;
}
.endroll-logo {
    filter: drop-shadow(0 0 84px rgb(1 82 151 / 54%));
    line-height: 0;
    margin: 0 auto 85px;
    width: 95%;
    max-width: 313px;
}
.endroll-movie {
    aspect-ratio: 16 / 9;
    filter: drop-shadow(0 3px 90px rgb(0 0 0 / 25%));
    margin: 0 auto;
    width: 92%;
    max-width: 981px;
}
.endroll-top {
    margin: 0 auto 100px;
}
.endroll-date {
    filter: drop-shadow(8px 0 8px rgb(26 26 26 / 59%));
    line-height: 0;
    margin: 0 auto 60px;
    width: 100%;
    max-width: 331px;
}
.endroll-text span {
    background: linear-gradient(transparent 60%, #01437c 60%);
    color: #fff;
    display: inline;
    font-size: 30px;
    font-weight: 900;
    filter: drop-shadow(8px 0 8px rgb(26 26 26 / 59%));
    text-shadow:0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72,0 0 3px #023f72;
}
.endroll-items {
    display: flex;
    flex-direction: column;
    gap: 85px;
}
.endroll-ttl {
    margin: 0 auto 30px;
    text-align: center;
}
.endroll-ttl h3 {
    font-family: var(--ft-alfa);
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
}
.story-ttl h3 {
    color: #fe7d6c;
}
.cast-ttl h3 {
    color: #97e067;
}
.endroll-text {
    text-align: center;
}
.endroll-text .story-txt {
    color: #fe7d6c;
    font-size: 16px;
    font-weight: 900;
    line-height: 35px;
    letter-spacing: 0.08em;
}
.endroll-text .cast-txt {
    color: #97e067;
    font-size: 18px;
    font-weight: 900;
    line-height: 34px;
    letter-spacing: 0.08em;
}
@media screen and (max-width: 968px) {
    .endroll {
        background-image: url(../images/endroll-bg-sp.jpg);
        padding: 10vw 0 15vw;
    }
    .endroll-inner {
        margin: 0 auto;
        width: 88%;
    }
    .endroll-head {
        margin: 0 auto 10vw;
    }
    .endroll-logo {
        margin: 0 auto 9vw;
        width: 48%;
    }
    .endroll-movie {
        margin-left: -2.5%;
        width: 105%;
    }
    .endroll-top {
        margin: 0 auto 16vw;
    }
    .endroll-date {
        filter: drop-shadow(1vw 0 1vw rgb(26 26 26 / 59%));
        margin: 0 auto 10vw;
        width: 45vw;
    }
    .endroll-text span {
        font-size: 3.5vw;
    }
    .endroll-items {
        gap: 14vw;
    }
    .endroll-ttl {
        margin: 0 auto 4vw;
    }
    .endroll-ttl h3 {
        font-size: 8vw;
    }
    .endroll-ttl h2 {
        font-size: 8vw;
    }
    .endroll-text .story-txt {
        font-size: 2.5vw;
        line-height: 2.3em;
    }
    .endroll-text .cast-txt {
        font-size: 2.7vw;
        line-height: 2em;
    }
    .endroll-cta {
        margin: 15vw auto 0;
        width: 92%;
    }
}

/* bottom */
.bottom {
    padding: 105px 0 0;
}
.bottom-inner {
    margin: 0 auto;
    width: 92%;   
}
.information-items {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin: 0 auto 50px;
    width: 100%;
    max-width: 486px;
}
.information-item a {
    display: block;
    line-height: 0;
}
.copyright {
    text-align: center;
}
.copyright p {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
@media screen and (max-width: 968px) {
    .bottom {
        padding: 14vw 0 0;
    }
    .bottom-inner {
        width: 100%;
    }
    .information-items {
        gap: 5vw;
        margin: 0 auto 5vw;
        width: 85%;
    }
    .copyright p {
        font-size: 1.6vw;
    }
}
@media screen and (max-width: 768px) {}

/* share */
.share {
    background: #e5e5e5;
    padding: 50px 0;
}
.share-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 775px;
}
.share-head {
    margin: 0 0 15px;
    text-align: center;
}
.share-head h2 {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.share-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.share-item {
    width: 100%;
    max-width: 150px;
}
@media screen and (max-width: 968px) {
    .share {
        padding: 12vw 0;
    }
    .share-inner {
        width: 80%;
    }
    .share-head {
        margin: 0 0 4vw;
    }
    .share-head h2 {
        font-size: 3vw;
    }
    .share-items {
        gap: 2vw;
    }
    .share-item {
        width: 30vw;
        max-width: 120px;
    }
}
@media screen and (max-width: 768px) {}

/* attention */
.attention {
    background: url(../images/attention-bg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    padding: 180px 0 130px;
}
.attention-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 924px;
}
.attention-content {
    background: #fff;
	position: relative;
	border-radius: 37px;
    position: relative;
}
.attention-content h2 {
    color: #626468;
    font-size: 27px;
    font-weight: 900;
    padding: 45px 0 35px;
    text-align: center;
}
.attention-content__text {
    display: flex;
    flex-direction: column;
    padding: 0 50px 35px;
    position: relative;
}
.attention-content__text div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 23px;
}
.attention-content .attention-content__text p {
    color: #626468;
    font-size: 14px;
    font-weight: 700;
    line-height: 23px;
}
.attention-content__text p a {
    border-bottom: 1px solid #ff8411;
    color: #ff8411;
    font-size: 14px;
    font-weight: 700;
}
@media screen and (max-width: 968px) {
    .attention {
        background-image: url(../images/attention-bg-sp.jpg);
        background-size: cover;
        padding: 10vw 0;
    }
    .attention-inner {
        width: 85%;
    }
    .attention-content {
        border-radius: 4.5vw;
    }
    .attention-content h2 {
        font-size: 3.8vw;
        padding: 7vw 0 0vw;
    }
    .attention-content .attention-content__text {
        padding: 5vw 5vw 6vw;
    }
    .attention-content .attention-content__text div {
        line-height: 3.2vw;
    }
    .attention-content .attention-content__text p {
        font-size: 2vw;
        line-height: 3.2vw;
    }
    .attention-content__text p a {
        font-size: 2vw;
    }
}
@media screen and (max-width: 768px) {}

/* selectgoods */
.selectgoodslineup {
    background: url(../images/selectgoods-bg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    padding: 120px 0;
}
.selectgoodslineup-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 1310px;
}
.selectgoodslineup-head {
    margin: 0 0 65px;
    text-align: center;
}
.selectgoodslineup-ttl {
    line-height: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 532px;
}
.selectgoodslineup-items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 45px 25px;
    margin: 0 auto;
    width: 100%;
    max-width: 1005px;
}
.selectgoodslineup-item {
    filter: drop-shadow(9px 0 9px rgb(5 47 57 / 15%));
    position: relative;
    width: calc((100% - (25px * 3)) / 4);
}
.selectgoodslineup-item::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15.5%;
    text-align: center;
}
.selectgoodslineup-item.limitstock::after {
    content: "＼残りわずか／";
    color: #41712a;
    font-size: 12px;
    font-weight: 500;
}
.selectgoodslineup-item.soldout::after {
    content: "SOLO OUT";
    color: #ff2121;
    font-size: 14px;
    font-weight: 500;
    bottom: 15%;
}
.selectgoodslineup-item__image {
    line-height: 0;
    position: relative;
}
@media screen and (max-width: 968px) {
    .selectgoodslineup {
        background-image: url(../images/selectgoods-bg-sp.jpg);
        padding: 10vw 0 20vw;
    }
    .selectgoodslineup-head {
        margin: 0 0 10vw;
    }
    .selectgoodslineup-ttl {
        max-width: 60vw;
    }
    .selectgoodslineup-items {
        gap: 5vw;
        margin: 0 auto;
        width: 98%;
    }
    .selectgoodslineup-item {
        filter: drop-shadow(9px 0 9px rgb(5 47 57 / 15%));
        width: calc((100% - (5vw * 1)) / 2);
    }
    .selectgoodslineup-item::after {
        bottom: 15%;
    }
    .selectgoodslineup-item.limitstock::after {
        font-size: 1.8vw;
    }
    .selectgoodslineup-item.soldout::after {
        font-size: 1.85vw;
        bottom: 15%;
    }
}
@media screen and (max-width: 768px) {

}

/* ticket */
.ticketlineup {
    background: #b8e3ff;
    padding: 120px 0;
}
.ticketlineup-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 1310px;
}
.ticketlineup-head {
    margin: 0 0 65px;
    text-align: center;
}
.ticketlineup-ttl {
    line-height: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 569px;
}
.ticketlineup-items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 30px 27px;
    margin: 0 auto;
    width: 100%;
    max-width: 1293px;
}
.ticketlineup-item {
    filter: drop-shadow(9px 9px 0 #005ead);
    overflow: hidden;
    width: calc((100% - (27px * 3)) / 4);
}
.ticketlineup-item__image {
    line-height: 0;
}
@media screen and (max-width: 968px) {
    .ticketlineup {
        padding: 14vw 0;
    }
    .ticketlineup-head {
        margin: 0 0 8vw;
    }
    .ticketlineup-ttl {
        max-width: 70vw;
    }
    .ticketlineup-items {
        gap: 5vw;
        margin: 0 auto;
    }
    .ticketlineup-item {
        filter: drop-shadow(1vw 1vw 0 #005ead);
        width: calc((100% - (5vw * 1)) / 2);
    }
}
@media screen and (max-width: 768px) {}

.rope {
    line-height: 0;
    margin: -5vw auto -5vw;
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 1568px) {
    .rope {
        margin: -6vw auto -5vw;
    }
}
@media screen and (max-width: 968px) {
    .rope {
        margin: -9vw auto -8vw;
    }
}

/* limited */
.limited {
    background: url(../images/bg-sea.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    margin: -5vw auto 0;
    padding: 170px 0;
    width: 100%;
}
.limited-inner {
    margin: 0 auto;
    width: 92%;
}
.limited-head {
    margin: 0 0 65px;
    text-align: center;
}
.limited-head h2 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px;
}
.limited-head h2 span {
    color: #fff;
    font-size: .8em;
    font-weight: 700;
}
.limited-ttl {
    margin: 0 auto;
    width: 100%;
    max-width: 309px;
}
.limited-head__txt {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.limited-items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 auto 55px;
    position: relative;
    width: 100%;
    max-width: 987px;
}
.limited-item a,
.limited-date,
.limited-cta a {
    display: block;
    line-height: 0;
}
.limited-item {
    filter: drop-shadow(11px 0 21px rgb(66 66 66 / 29%));
    width: calc((100% - (28px * 1)) / 2);
}
.limited-date {
    margin: 0 auto;
    width: 100%;
    max-width: 1290px;
}
.limited-cta {
    filter: drop-shadow(29px 0 12px rgb(90 90 90 / 70%));
    margin: 40px auto 0;
    width: 100%;
    max-width: 504px;
}
@media screen and (max-width: 968px) {
    .limited {
        background-image: url(../images/bg-sea-sp.jpg);
        margin: -8vw auto 0;
        padding: 15vw 0 20vw;
    }
    .limited-head {
        margin: 0 0 10vw;
    }
    .limited-head h2 {
        font-size: 4vw;
        line-height: 7vw;
    }
    .limited-head__txt {
        font-size: 3vw;
    }
    .limited-ttl {
        margin: 0 auto;
        max-width: 50vw;
    }
    .limited-items {
        gap: 4vw;
        margin: 0 auto 12vw;
    }
    .limited-item {
        width: 100%;
    }
    .limited-cta {
        margin: 8vw auto 0;
        max-width: 85%;
    }
}

/* blockname */
.campaign {
    background: url(../images/campaign-bg.jpg) no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 150px 0;
    position: relative;
}
.campaign-inner {
    margin: 0 auto;
    width: 92%;
}
.campaign-head {
    margin: 0 auto 65px;
    text-align: center;
}
.campaign-head h2 {
    color: #005ead;
    font-size: 35px;
    font-weight: 900;
    margin: 0 0 20px;
}
.campaign-head h2 span {
    color: #005ead;
    font-size: .8em;
    font-weight: 900;
}
.campaign-ttl {
    margin: 0 auto 10px;
    width: 100%;
    max-width: 398px;
}
.campaign-head__txt {
    color: #005ead;
    font-size: 23px;
    font-weight: 900;
}
.campaign-head__txt span {
    color: #005ead;
    font-size: .8em;
    font-weight: 900;
}
.campaign-subttl {
    line-height: 0;
    margin: 0 auto 32px;
    width: 100%;
    max-width: 912px;
}
.campaign-subttl.mar {
    margin: 42px auto 32px;
}
.campaign-items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 817px;
}
.campaign-items.bottom {
    gap: 20px;
    padding: 0;
    max-width: 1263px;
}
.campaign-item a,
.campaign-date,
.campaign-cta a {
    display: block;
    line-height: 0;
}
.campaign-items.top .campaign-item {
    width: calc((100% - (18px * 1)) / 2);
}
.campaign-items.bottom .campaign-item {
    width: calc((100% - (20px * 3)) / 4);
}
.campaign-notice {
    color: #005ead;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 19px;
    text-align: center;
}
.campaign-date {
    margin: 60px auto 0;
    width: 100%;
    max-width: 1299px;
}
.campaign-cta {
    filter: drop-shadow(29px 0 12px rgb(90 90 90 / 70%));
    margin: 34px auto 0;
    width: 100%;
    max-width: 558px;
}
@media screen and (max-width: 968px) {
    .campaign {
        background-image: url(../images/campaign-bg-sp.jpg);
        padding: 18vw 0;
    }
    .campaign-head {
        margin: 0 auto 6vw;
    }
    .campaign-head h2 {
        font-size: 5vw;
        margin: 0 0 2vw;
    }
    .campaign-ttl {
        margin: 0 auto 1vw;
        max-width: 58vw;
    }
    .campaign-head__txt {
        font-size: 2.5vw;
    }
    .campaign-subttl {
        margin: 0 auto 3.5vw;
        max-width: 912px;
    }
    .campaign-subttl.mar {
        margin: 4vw auto 3.5vw;
    }
    .campaign-items,
    .campaign-items.bottom {
        gap: 0;
        max-width: none;
    }
    .campaign-items.bottom {
        width: 85%;
    }
    .campaign-items.top .campaign-item,
    .campaign-items.bottom .campaign-item {
        width: 50%;
    }
    .campaign-notice {
        font-size: 1.68vw;
        line-height: 3vw;
    }
    .campaign-items.top + .campaign-notice {
        padding: 0 1vw;
    }
    .campaign-items.bottom + .campaign-notice {
        margin: 0 auto;
        width: 85%;
        padding: 0 1vw;
    }
    .campaign-date {
        margin: 6vw auto 0;
    }
    .campaign-cta {
        filter: drop-shadow(3vw 0 1.2vw rgb(90 90 90 / 29%));
        margin: 3.5vw auto 0;
        width: 85%;
        max-width: none;
    }
}
@media screen and (max-width: 768px) {
    .campaign-cta {
        margin: 5vw auto 0;
    }
}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* blockname */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}