@charset "UTF-8";


body {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 0;
    font-size: min(2.8vw , 20px);
    box-sizing: border-box;
    background-color: #F5F2E9;
}



img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

p, a,span {
    font-size: 1em;
    line-height: 1.5;
    color: #550001;
    font-family: "M PLUS Rounded 1c", sans-serif;    
    font-weight: 500;
    text-align: justify;
}


h2,h3,h4,h5 {
    font-family: "M PLUS Rounded 1c", sans-serif;    
    line-height: 1.5;
}

.sec {
    padding: 5em 0;
    text-align: center;
    font-size: min(2.8vw , 20px);

}

.sec-in {
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
}


.deco {
    position: absolute;
}

.sp {
    display: none;
}
.pc {
    display: block;
}



/* ------------------------------------------------- 追従 ------------------------------------------------- */


/* 固定ボタン */
#fix-btn {
    position: fixed;
    z-index: 99;
    width: 20%;
    max-width: 200px;
    bottom: .5em;
    right: .5em;
    transform: scale(1);
    transition: .2s ease all;
}
#fix-btn:hover {
    transform: scale(1.1);
}

#fix-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* トップへ戻るボタン */
#top-btn {
    position: fixed;
    z-index: 50;
    width: 10%;
    max-width: 100px;
    bottom: .5em;
    left: .5em;
    transform: scale(1);
    transition: .2s ease all;
    background-color: #fff;
    padding: .5em;
    border-radius: .5em;
}
#top-btn:hover {
    transform: scale(1.1);
}
@media (hover: hover) and (min-width: 769px) {
    #top-btn:hover {
        transform: scale(1);
    }
}

#top-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* ハンバーガーメニュー */


#menu-ham {
    pointer-events: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF3D0;
    opacity: 0;
    /* transform: translateY(-100%); */
    transition: .2s ease all;
    /* display: none; */

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
#menu-ham.active {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0);
}

#menu-ham .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    /* background-color: #ccc; */
}
#menu-ham .top::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translate(-50% , -130%);
    width: 100%;
    height: 11.5%;
    background: url(../images/kv-bg_2-t.webp) repeat-x center top / 14.5% 100%;
    transition: .5s ease all;
}
#menu-ham.active .top::before {
    transform: translate(-50% , -30%);
}

#menu-ham .menu-in {
    pointer-events: none;
    position: relative;
    width: 90%;
    height: auto;
    min-height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 8em;
    padding-bottom: 5em;
    box-sizing: border-box;
}

#menu-ham .menu-in::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -100%);
    transform-origin: center top;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../images/menu-bg.webp) repeat-y center top / 70%;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

#menu-ham .menu-in::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , 0);
    z-index: -1;
    width: 110%;
    max-width: 1300px;
    min-width: 1000px;
    height: 100%;
    background: url(../images/flower_side.webp) repeat-y left top / 5em,
                url(../images/flower_side_2.webp) repeat-y right top / 5em;
    /* opacity: 0;
    transition: opacity 0.5s ease 1s; */
}

#menu-ham.active .menu-in {
    pointer-events: all;
}

#menu-ham.active .menu-in::before {
    transform: translate(-50% , 0);
}

/* #menu-ham.active .menu-in::after {
    opacity: 1;
} */

#menu-ham .menu-in::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , 0);
    z-index: -1;
    width: 110%;
    max-width: 1300px;
    min-width: 1000px;
    height: 100%;
    background: url(../images/flower_side.webp) repeat-y left top / 5em,
    url(../images/flower_side_2.webp)repeat-y right top / 5em;

}


.menu-in .logo-t {
    width: 80%;
    max-width: 550px;
    height: auto;
    aspect-ratio: 10  / 3;
    margin: 0 auto 2em auto;
}


#ham-btn {
    visibility: hidden;
    position: fixed;
    top: .5em;
    right: .5em;
    z-index: 100;
    cursor: pointer;
    pointer-events: all;
    transform: translate(-.5em , .5em);
    margin-left: auto;
    width: 5em;
    height: auto;
    aspect-ratio: 4 / 5;
    opacity: 0;
    transition: .5s ease all;
}
#ham-btn.is-show {
    visibility: visible;
    opacity: 1;
}


#ham-btn .ham-btn-in {
    position: relative;
    width: 100%;
    height: 100%;
}

#ham-btn .ham-btn-in img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#ham-btn .ham-btn-in img.btn_1 {
    position: relative;
    z-index: 2;
    opacity: 1;
    transition: .2s ease all;
}
#ham-btn:hover .ham-btn-in img.btn_1 {
    opacity: 0;
}


#menu-ham ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    width: 90%;
    max-width: 700px;
    margin: 0 auto 4em auto;
    /* display: none; */
}

#menu-ham ul li {
    flex: 0 0 calc(var(--w-ratio2) * 300px);
    max-width: 100%;
}

#menu-ham ul li img {
    width: 100%;
    height: auto;
    display: block;
}


#menu-ham ul li:nth-child(1) { --w-ratio2: 0.642; }
#menu-ham ul li:nth-child(2) { --w-ratio2: 0.779; }
#menu-ham ul li:nth-child(3) { --w-ratio2: 1.129; }
#menu-ham ul li:nth-child(4) { --w-ratio2: 0.796; }
#menu-ham ul li:nth-child(5) { --w-ratio2: 1.000; }




#menu-ham .btn-wrap {
    text-align: center;
    display: none;
}
#menu-ham .btn-wrap.timer-visible {
    display: block;
}

#menu-ham .btn-wrap p {
    text-align: center;
}

#menu-ham .btn-box {
    margin: 0 auto 1.5em auto;
}


#menu-ham .menu-item {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}


#menu-ham.active .menu-item {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
}

#menu-ham ul li {
    flex: 0 0 calc(var(--w-ratio2) * 300px);
    max-width: 100%;
    transform: translateY(0) scale(1);
    transition: opacity 1s ease, transform .25s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (min-width: 769px) {
    #menu-ham ul li:hover {
        transform: translateY(-6px) scale(1.05);
    }
}




/* ------------------------------------------------- KV ------------------------------------------------- */


@keyframes popBounce {
    0% {
        opacity: 0;
        transform: var(--base-trans) scale(0.3);
    }
    60% {
        opacity: 1;
        transform: var(--base-trans) scale(1.5);
    }
    80% {
        transform: var(--base-trans) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: var(--base-trans) scale(1);
    }
}





.kv-bg {
    overflow: hidden;
    position: relative;
    background-color: #9bd4e1;
}
.kv-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay;
    background: url(../images/kv-bg.webp) no-repeat center / cover;
}

.kv-bg span.border {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    transform: translate(-50% , 17%);
    width: 100%;
    height: 11.5%;
    background: url(../images/kv-bg_2.webp) repeat-x center top / 14.5% 100%;
}

.kv-bg span.border.b-t {
    transform: translate(-50% , -17%);
    background: url(../images/kv-bg_2-t.webp) repeat-x center top / 14.5% 100%;
}

.kv-bg span.border.b-b {
    top: auto;
    bottom: 0;
}

.kv-bg .deco.deco_9 {
    top: 0;
    right: 0;
    transform: translate(-.5em , 10%);
    z-index: 4;
    width: 12%;
    max-width: 200px;
}


#kv {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 2160px;
    z-index: 1;
    aspect-ratio: 2 / 1;
    min-height: 0; 
    margin: 0 auto;
}


.kv-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.kv-logo {
    display: flex;
    justify-content: space-between;
    width: 95.8%;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 1.5%;
}

.kv-logo .kv-logo_1 {
    width: 15.1%;
}

.kv-logo .kv-logo_2 {
    width: 24%;
    padding-top: 1%;
}

.kv-logo img {
    width: 100%;
    height: auto;
}

.kv-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    /* max-width: 2160px; */
    height: 100%;
    /* background-color: #ccc; */
    /* max-height: 100vh; */
}

.kv-box .kv-box-in {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.kv-title {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 57%;
    max-width: 1040px;
    height: auto;
    opacity: 0;
    --base-trans: translate(-50%, -50%);
    transform: var(--base-trans) scale(0.3);
}

#kv.active .kv-title {
    animation: popBounce 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#kv .text-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(-48%, -52%); */
    width: 81.5%;
    max-width: 1240px;
    height: auto;
    aspect-ratio: 1 / 1;
    opacity: 0;
    --base-trans: translate(-48%, -52%);
    transform: var(--base-trans) scale(0.3);
}
#kv.active .text-bg {
    animation: popBounce 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* 提灯 */
#kv .deco.deco_1 {
    top: 50%;
    left: 0;
    width: 13.8%;
    opacity: 0;
    pointer-events: none;
    --from-pos: translate(20%, -30%) scaleX(-1) rotate(25deg) scale(0.3);
    --over-pos: translate(55%, -52%) scaleX(-1) rotate(-5deg) scale(1.1);
    --to-pos: translate(51%, -49%) scaleX(-1) rotate(0deg) scale(1);
    animation-delay: 0.45s;
}

#kv .deco.deco_2 {
    top: 50%;
    right: 0;
    width: 13.8%;
    opacity: 0;
    pointer-events: none;
    --from-pos: translate(-20%, -35%) rotate(25deg) scale(0.3);
    --over-pos: translate(-55%, -57%) rotate(-5deg) scale(1.1);
    --to-pos: translate(-50%, -54%) rotate(0deg) scale(1);
    animation-delay: 0.45s;
}

@keyframes sideDecoBurst {
    0% {
        opacity: 0;
        transform: var(--from-pos);
    }
    70% {
        opacity: 1;
        transform: var(--over-pos);
    }
    100% {
        opacity: 1;
        transform: var(--to-pos);
    }
}

#kv.active .deco.deco_1,
#kv.active .deco.deco_2 {
    animation: sideDecoBurst 0.65s 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


/* 周り花 */
#kv .deco {
    opacity: 0;
    pointer-events: none;
}

@keyframes burstOut {
    0% {
        opacity: 0;
        transform: var(--from-pos) scale(0.2);
    }
    70% {
        opacity: 1;
        transform: var(--over-pos) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

#kv .deco.deco_3 {
    top: 60%;
    left: 1.5%;
    width: 5%;
    --from-pos: translate(160%, -40%);
    --over-pos: translate(-10%, 5%);
    animation-delay: 0.2s;
}

#kv .deco.deco_4 {
    top: 75%;
    left: 8%;
    width: 6.3%;
    --from-pos: translate(120%, -100%);
    --over-pos: translate(-10%, 10%);
    animation-delay: 0.25s;
}

#kv .deco.deco_5 {
    top: 15.5%;
    left: 3.5%;
    width: 7.2%;
    --from-pos: translate(140%, 120%);
    --over-pos: translate(-10%, -10%);
    animation-delay: 0.15s;
}

#kv .deco.deco_6 {
    bottom: 15%;
    right: 4.5%;
    width: 6.8%;
    --from-pos: translate(-130%, -110%);
    --over-pos: translate(10%, 10%);
    animation-delay: 0.3s;
}

#kv .deco.deco_7 {
    top: 12%;
    right: 15%;
    width: 5%;
    --from-pos: translate(-120%, 130%);
    --over-pos: translate(10%, -10%);
    animation-delay: 0.15s;
}

#kv .deco.deco_8 {
    top: 35%;
    right: 0%;
    width: 5.8%;
    --from-pos: translate(-160%, 40%);
    --over-pos: translate(10%, -5%);
    animation-delay: 0.35s;
}

#kv.active .deco {
    animation: burstOut 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* img用の回転＋大小変化ループキーフレーム */
@keyframes floatScaleRotate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.3) rotate(15deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* 逆回転のバリエーション */
@keyframes floatScaleRotateReverse {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.2) rotate(-15deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* 各アイコンのimgにループを適用（出現完了後に動き出すようディレイ調整） */
#kv.active .deco_3 img,
#kv.active .deco_5 img,
#kv.active .deco_7 img {
    animation: floatScaleRotate 3.5s ease-in-out 0.8s infinite;
}

#kv.active .deco_4 img,
#kv.active .deco_6 img,
#kv.active .deco_8 img {
    animation: floatScaleRotateReverse 4s ease-in-out 0.9s infinite;
}



.kv-text-deco {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}


#kv .text-deco_1 {
    position: absolute;
    top: 21.5%;
    left: 50%;
    width: 52.5%;
    opacity: 0;
    --base-x: -66.5%;
    transform: translate(var(--base-x), 5%);
    transition: transform .5s .5s ease-in-out, opacity .5s .5s ease-in-out;
}
#kv.active .text-deco_1 {
    opacity: 1;
    transform: translate(var(--base-x), 0);
}

#kv .text-deco_2 {
    position: absolute;
    bottom: 21%;
    left: 50%;
    width: 46%;
    opacity: 0;
    --base-x: -49%;
    transform: translate(var(--base-x), 5%);
    transition: transform .5s .5s ease-in-out, opacity .5s .5s ease-in-out;
}
#kv.active .text-deco_2 {
    opacity: 1;
    transform: translate(var(--base-x), 0);
}


/* ------------------------------------------------- メニュー ------------------------------------------------- */


.menu {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 4.7em;
    font-size: min(2.8vw , 20px);
 
}

.menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: 0;
    list-style: none;
}




.menu ul li {
    flex: 0 0 calc(var(--w-ratio) * 240px);
    max-width: 100%;
    opacity: 0;
    transform: translateY(0) scale(1);
    /* 出現時のフェードとホバー解除時の戻りを管理 */
    transition: opacity .5s ease, transform .25s cubic-bezier(0.25, 1, 0.5, 1);
}

.menu ul li.active {
    opacity: 1;
}

/* PC（マウス操作時）限定のホバーアクション */
@media (hover: hover) and (min-width: 769px) {
    .menu ul li:hover {
        transform: translateY(-6px) scale(1.05);
    }
}

.menu ul li img {
    width: 100%;
    height: auto;
    display: block;
}

/* 各メニューの比率（240px基準） */
.menu ul li:nth-child(1) { --w-ratio: 0.642; }
.menu ul li:nth-child(2) { --w-ratio: 0.779; }
.menu ul li:nth-child(3) { --w-ratio: 1.129; }
.menu ul li:nth-child(4) { --w-ratio: 0.796; }
.menu ul li:nth-child(5) { --w-ratio: 1.000; }



/* ------------------------------------------------- イベント内容 ------------------------------------------------- */

.wrap-1 {
    position: relative;
    overflow: hidden;

}

.wrap-1 .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    background: url(../images/event-bg_2.webp) repeat center / 14.5%;
}


.wrap-2 {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #ccc; */
}

.wrap-2::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translate(-50% , 0);
    width: 100%;
    max-width: 1600px;
    height: 100%;
    background: url(../images/flower_side.webp) repeat-y top left / 5em,
    url(../images/flower_side_2.webp) repeat-y top right / 5em;

}




/* ライト */
.event-bg {
    overflow: hidden;
    position: relative;
    margin-top: 10em;
    height: auto;
    width: 100%;
    aspect-ratio: 10 / 2;
}

.event-bg-in {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 107%;
    height: auto;
}

.event-bg-in img {
    width: 100%;
    height: auto;
}


#event {
    overflow: hidden;
    /* padding: 7.5em 0 calc(17vw + 5em) 0; */
    padding: 7.5em 0 min(31.2vw , 340px) 0;
}

#event .event-wrap {
    position: relative;
    width: 100%;
    max-width: 1110px;
    height: auto;
    margin: 0 auto;

    border-width: 3em 3em 6em 3em;
    border-style: solid;
    border-color: transparent;
    border-image-source: url(../images/svg/event-bg.svg);
    border-image-slice: 60 fill;
    border-image-repeat: stretch;
    padding: 4% 0 .5% 0;
}

#event .event-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -11%);
    width: calc(100% + 5em);
    /* width: 100%; */
    height: 100%;
    background: url(../images/event-top.webp) no-repeat center top / contain;
}

#event .event-wrap::before {
    pointer-events: none;
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50% , 70%);
    width: calc(100% + 2.5em);
    height: 65%;
    background: url(../images/event-bg.webp) no-repeat left center / contain,
    url(../images/event-bg_r.webp) no-repeat right center / contain;
}

#event .t-deco {
    position: absolute;
    top: -3em;
    left: 50%;
    transform: translate(-50%, -115%);
    width: 71%;
    height: auto;
    aspect-ratio: 20 / 1;
    background: url(../images/event-deco_6.webp) no-repeat center / contain;
}


#event h2 span.lead,
#event h2 span.project-name {
    display: block;
    margin-bottom: .7em;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#event h2 span.lead.active,
#event h2 span.project-name.active {
    opacity: 1;
    transform: translateY(0);
}

#event h2 span.project-name {
    margin-bottom: .4em;
}
#event h2 span.project-name span {
    font-weight: 600;
    display: inline-block;
}

#event h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    color: #550001;
    line-height: 1.5;
}


#event .text-point {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease all;
}
#event .text-point.active {
    opacity: 1;
    transform: translateY(0);
}



#event .text-point .t-1,
#event .text-point .t-2 {
    z-index: 2;
    display: flex;
    gap: .5em;
    font-size: min(5.85vw , 58px);
    color: #fff;
}
#event .text-point p {
    margin-bottom: 0;
}

#event .text-point .t-1 {
    margin-right: .5em;
}
#event .text-point .t-2 {
    margin-left: .5em;
    margin-right: .5em;
}

#event .text-point span {
    position: relative;
    color: #fff;
    font-weight: 600;
}
#event .text-point span.t-sp {
    color: #550001;
}

#event .text-point .t-1 span::after,
#event .text-point .t-2 span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: -1;
    width: 1.7em;
    height: auto;
    aspect-ratio: 1 / 1; 
    border-radius: 50vw;
    background-color: #FFBB00;
}

#event .text-point .t-2 span::after {
    background-color: #0CC0A1;
}

#event h2 .t-3 {
    display: block;
    margin-bottom: .35em;
    line-height: 1;
    font-size: min(5.85vw, 58px);
    font-weight: 800;
    text-align: center;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#event h2 .t-3.active {
    opacity: 1;
    transform: translateY(0);

}

#event .from {
    position: relative;
    z-index: 2;
    width: 50%;
    max-width: 370px;
    margin: 0 auto;
}


#event .date {
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50% , 80%);
    width: 135%;
    max-width: 1280px;
    height: auto;
}

/* .date-in {
    position: relative;
    width: 100%;
    height: 100%;
} */

.date-in span.deco-1 {
    position: absolute;
    top: 25%;
    left: 14%;
    transform: rotate(5deg);
    width: 10%;
}
.date-in span.deco-2 {
    position: absolute;
    top: 12%;
    right: 8%;
    transform: rotate(10deg);
    width: 20%;
}

.deco-wrap {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , 0);
    z-index: 2;
    width: 100%;
    height: 100%;
}
.deco-in {
    position: relative;
    width: 100%;
    height: 100%;
}

.date-in .date-bg img {
    display: block;
    width: 100%;
    height: auto;
}

.date-in .date-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.date-in .date-text.active {
    opacity: 1;
    transform: translateY(0);
}

.date-in .date-text img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* イベント装飾 */

#event .deco-wrap .deco {
    opacity: 0;
    pointer-events: none;
}

@keyframes eventDecoPop {
    0% {
        opacity: 0;
        transform: rotate(var(--base-deg)) scale(0.2);
    }
    70% {
        opacity: 1;
        transform: rotate(var(--base-deg)) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: rotate(var(--base-deg)) scale(1);
    }
}

#event .deco.deco_1 {
    top: 36%;
    right: -1.5%;
    width: 5%;
    max-width: 40px;
    --base-deg: -20deg;
    transform: rotate(var(--base-deg));
}

#event .deco.deco_2 {
    top: -34%;
    right: 1.5%;
    z-index: 2;
    width: 15%;
    max-width: 146px;
    --base-deg: 18deg;
    transform: rotate(var(--base-deg));
} 

#event .deco.deco_3 {
    top: -30%;
    left: 0;
    z-index: 2;
    width: 20%;
    max-width: 165px;
    --base-deg: -10deg;
    transform: rotate(var(--base-deg));
}  

#event .deco.deco_4 {
    top: 43%;
    left: -4%;
    z-index: 2;
    width: 10%;
    max-width: 95px;
    --base-deg: 0deg;
    transform: rotate(var(--base-deg));
}

#event .deco-wrap.active .deco {
    animation: eventDecoPop 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

#event .deco-wrap.active .deco_4 {
    animation-delay: 0.1s;
}

#event .deco-wrap.active .deco_3 {
    animation-delay: 0.25s;
}

#event .deco-wrap.active .deco_2 {
    animation-delay: 0.4s;
}

#event .deco-wrap.active .deco_1 {
    animation-delay: 0.55s;
}


#event .deco-wrap {
    width: 110%;
    max-width: 1000px;
}


/* ------------------------------------------------- こども応援プロジェクトとは？ ------------------------------------------------- */


#event-about.sec {
    padding: 0;
    background-color: #fff;
}

#event-about .sec-in {
    position: relative;
    margin: 2.5em auto;
}

#event-about h2 {
    display: flex;
    align-items: end;
    justify-content: center;
    margin-bottom: 1.5em;
    font-size: 1em;
    font-weight: 500;
    color: #550001;
    opacity: 0;
    transition: .5s ease-in-out all;
}
#event-about h2.active {
    opacity: 1;
}

#event-about h2 span.about-img {
    width: 75%;
    max-width: 600px;
    margin-right: .5em;
}
#event-about h2 span.about-t {
    font-weight: 700;
}


#event-about .text-box {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 1em auto;
    text-align: center;
}
#event-about .text-box p {
    text-align: center;
    line-height: 2;
}
#event-about .text-box p span.in-b {
    display: inline-block;
} 


.about-btn {
    position: relative;
    z-index: 2;
    display: inline-block;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.about-btn.active {
    opacity: 1;
    transform: translateY(0);
}


.about-btn .btn-in {
    transform: translate(0 , 0);
    width: 100%;
    height: 100%;
    padding: .6em 3.3em;
    border-radius: 50vw;
    border: .2em solid #E50038;
    background: url(../images/about-btn_2.webp) no-repeat 5% center / 1.5em, 
                url(../images/arrow-w.webp) no-repeat 90% center / 0.5em #E50038;
    transition: .2s ease all;
}
.about-btn:hover .btn-in {
    transform: translate(3% , 10%);
    background: url(../images/about-btn_1.webp) no-repeat 5% center / 1.5em, 
                url(../images/arrow-r.webp) no-repeat 90% center / 0.5em #fff;
}

.about-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(3% ,10%);
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50vw;
    background-color: #550001;
}

.about-btn p {
    color: #fff;
    transition: .2s ease all;
}
.about-btn:hover p {
    color: #E50038;
}

.about-btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 50vw;
    /* background-color: #ccc; */
}

#event-about span.line {
    display: block;
    width: 100%;
    height: 2.5em;
    background-color: #F5F2E9;
    background: #F5F2E9 url(../images/dot.webp) repeat-x center / 3.5em;
}


#event-about .deco-wrap {
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #ccc; */
    max-width: 1200px;
    width: 100%;
}

#event-about .deco_1,
#event-about .deco_2 {
    opacity: 0;
    pointer-events: none;
}

@keyframes aboutDecoPop {
    0% {
        opacity: 0;
        transform: var(--base-trans) scale(0.2);
    }
    70% {
        opacity: 1;
        transform: var(--base-trans) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: var(--base-trans) scale(1);
    }
}

#event-about .deco_1 {
    top: 0;
    right: 0;
    width: 12%;
    max-width: 100px;
    --base-trans: translate(-20%, -150%) rotate(-20deg);
    transform: var(--base-trans) scale(0.2);
}

#event-about .deco_2 {
    bottom: 0;
    left: 0;
    width: 13%;
    max-width: 120px;
    --base-trans: translate(10%, 90%) rotate(18deg);
    transform: var(--base-trans) scale(0.2);
}

#event-about .deco-wrap.active .deco_1,
#event-about .deco_1.active {
    animation: aboutDecoPop 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.1s forwards;
}

#event-about .deco-wrap.active .deco_2,
#event-about .deco_2.active {
    animation: aboutDecoPop 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.25s forwards;
}




/* 1行目強調 */
#event-about .t-1 {
    text-align: center;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#event-about .t-1.active {
    opacity: 1;
    transform: translateY(0);
}

#event-about .t-1 p {
    position: relative;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: .5em;
    text-align: center;
}

#event-about .text-box p.about-t {
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#event-about .text-box p.about-t.active {
    opacity: 1;
    transform: translateY(0);
}

#event-about .t-1 p span.border {
    position: relative;
    font-size: 1.4em;
    font-weight: 700;
    padding: 0 .2em;
    z-index: 2;
    color: #550001;
    transition: color 0.4s ease 0.4s;
}

#event-about .t-1.active p span.border {
    color: #E50038;
}

#event-about .t-1 p span.border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-55%, 20%) scaleX(0);
    transform-origin: left center;
    width: 120%;
    z-index: -1;
    height: auto;
    aspect-ratio: 5 / 1;
    background: url(../images/border-1.webp) no-repeat center / contain;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

#event-about .t-1.active p span.border::after {
    transform: translate(-55%, 20%) scaleX(1);
}

#event-about .t-1 p span.sp {
    font-weight: 700;
    display: inline-block;
}

#event-about .t-1 p span.icon {
    position: relative;
}
#event-about .t-1 p span.icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-130%, -30%) rotate(-20deg) scale(0);
    width: 1.3em;
    height: auto;
    aspect-ratio: 4 / 5;
    background: url(../images/about-deco_3.webp) no-repeat center / contain;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.6s, opacity 0.3s ease 0.6s;
}

#event-about .t-1.active p span.icon::before {
    opacity: 1;
    transform: translate(-130%, -30%) rotate(-20deg) scale(1);
}

/* ------------------------------------------------- スライダー（イベントイメージ、目玉イベント） ------------------------------------------------- */


#feature.sec {
    padding: 0 0 5em 0;
    background-color: #F5F2E9;
}

#feature .splide {
    height: 100%;
}

#feature .splide li {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 1em;
    background-color: #0CC0A1;
}

#feature .splide li:nth-child(even) {
    background: #FFBB00 url(../images/pattern-b_1.webp) repeat center / 20%;
}

#feature .splide-img {
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 1em;
    border: .2em solid #fff;
    background-color: #ccc;
}
#feature .splide-img img {
    object-fit: cover;
}


#feature .splide {
    position: relative;
    margin-bottom: 3em;
}

.feature-add {
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
    /* background-color: #ccc; */
}
.feature-add p {
    font-size: min(3.4vw , 20px);
    text-align: right;
}

#feature .splide__arrow svg {
    display: none;
}

#feature .splide__arrows {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    max-width: 1920px;
    height: 100%;
}

#feature .splide__arrow {
    pointer-events: all;
    position: absolute;
    top: auto;       
    bottom: -1.5em;            
    transform: none;         
    width: 3em;
    height: 3em;
    border-radius: 50%;
    opacity: 1;
    transition: 0.2s ease all;
}

#feature .splide__arrow--prev {
    right: 4.5em;
    left: auto;
    background: #E50038 url(../images/arrow-w_2.webp) no-repeat 45% / 1em;
}

#feature .splide__arrow--next {
    right: 1em;
    left: auto;
    background: #E50038 url(../images/arrow-w_2r.webp) no-repeat 55% / 1em;

}
/* #feature .splide__arrow--prev:hover {
    background: #fff url(../images/arrow-r_2.webp) no-repeat 45% / 1em;
}

#feature .splide__arrow--next:hover {
    background: #fff url(../images/arrow-r_2r.webp) no-repeat 55% / 1em;

} */
@media (min-width: 769px) and (hover: hover) {
    #feature .splide__arrow--prev:hover {
        background: #fff url(../images/arrow-r_2.webp) no-repeat 45% / 1em;
    }

    #feature .splide__arrow--next:hover {
        background: #fff url(../images/arrow-r_2r.webp) no-repeat 55% / 1em;
    }
}

/* スライダーイラスト */


.splide__track {
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #ccc;
}


.slide_1 .deco-1 {
    bottom: 0;
    left: 0;
    transform: translate(10% ,50%);
    width: 20%;
}

.slide_1 .deco-s {
    top: 0;
    left: 50%;
    transform: translate(-50% ,-50%);
    width: 90%;
}




#feature {
    overflow-x: clip;
    padding: min(8vw, 80px) 0 min(10vw, 100px) 0;
    background-color: #F5F2E9;
}

#feature .splide__track {
    overflow: visible !important;
}

#feature .splide__slide {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 1em;
    background-color: #0CC0A1;

    height: auto !important;
    max-height: none;
    align-self: flex-start;
    box-sizing: border-box;
}

/* #feature .splide-img {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    border: .2em solid #fff;
    background-color: #ccc;
} */

/* 装飾 */
#feature .splide__slide .deco {
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

#feature .splide__slide.is-show-deco .deco {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* スライド1 */
.slide_1 .deco-s {
    top: 0;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -20%) scale(0.6);
}

.slide_1 .deco-1 {
    bottom: 0;
    left: 0;
    width: 25%;
    transform: translate(10%, 20%) scale(0.6);
}

/* スライド2 */
.slide_2 .deco-1 {
    top: 0;
    right: 0%;
    width: 20%;
    transform: translate(0 , 0) scale(0.6);
}
.slide_2 .deco-2 {
    top: 0;
    right: 0%;
    width: 25%;
    transform: translate(0 , 0) scale(0.6);
}


/* スライド3 */
.slide_3 .deco-s {
    top: 0;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -30%) scale(.6);
}

/* スライド4 */
.slide_4 .deco-1 {
    bottom: 0;
    right: 0;
    width: 25%;
    transform: translate(-40%, 30%) scale(.6);
}
.slide_4 .deco-2 {
    top: 0;
    left: 0;
    width: 20%;
    transform: translate(40%, -50%) scale(.6);
}

/* スライド5 */
.slide_5 .deco-s {
    top: 0;
    left: 50%;
    width: 85%;
    transform: translate(-50%, -30%) scale(.6);
}

/* スライド6 */
.slide_5 .deco-1 {
    bottom: 0;
    left: 0%;
    width: 20%;
    transform: translate(0 , 0) scale(0.6);
}
/* .slide_5 .deco-2 {
    bottom: 0;
    left: 0%;
    width: 25%;
    transform: translate(0 , 0) scale(0.6);
} */


/* 装飾アニメーション */

#feature .splide__slide.is-visible.slide_1 .deco-s {
    opacity: 1;
    transform: translate(-50%, -64%) scale(1);
    transition-delay: 0.1s; 
}
#feature .splide__slide.is-visible.slide_1 .deco-1 {
    opacity: 1;
    transform: translate(10%, 45%) scale(1);
    transition-delay: 0.2s;
}

#feature .splide__slide.is-visible.slide_2 .deco-1 {
    opacity: 1;
    transform: translate(-70%, -60%) scale(1);
    transition-delay: 0.2s;
    z-index: 10;
}
#feature .splide__slide.is-visible.slide_2 .deco-2 {
    opacity: 1;
    transform: translate(15%, -33%) scale(1);
    transition-delay: 0.2s;
}

#feature .splide__slide.is-visible.slide_3 .deco-s {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

#feature .splide__slide.is-visible.slide_4 .deco-1 {
    opacity: 1;
    transform: translate(-40%, 30%) scale(1);
    transition-delay: 0.2s;
}
#feature .splide__slide.is-visible.slide_4 .deco-2 {
    opacity: 1;
    transform: translate(40%, -50%) scale(1);
    transition-delay: 0.2s;
}

#feature .splide__slide.is-visible.slide_5 .deco-s {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.2s;
}

#feature .splide__slide.is-visible.slide_5 .deco-1 {
    opacity: 1;
    transform: translate(-50%, 33%) scale(1);
    transition-delay: 0.2s;
    z-index: 10;
}





/* ------------------------------------------------- イベント概要 ------------------------------------------------- */

#overview {
    overflow: hidden;
    padding: 0; 
}

#overview .bg {
    width: 100%;
    padding: 5em 0 10em 0;
    background: 
        url(../images/pattern-b_2t.webp) repeat-x left top / auto 11.5em,
        url(../images/pattern-b_2bt.webp) repeat-x left bottom / auto 11.5em #78D0E5;
    
}


#overview .overview-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0 auto;

}

 #overview .title {
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    aspect-ratio: 15 / 2;
    font-size: min(1.82vw , 20px);
 }


#overview .title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translate(-50% , 8%);
    width: 50%;
    height: auto;
    aspect-ratio: 10 / 3;
    background: url(../images/overview-bg.webp) no-repeat center / 100%;
}

#overview .title-in {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    height: 100%;
}


#overview .title h2 {
    display: flex;
    width: auto;
    height: 3em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
 }
 #overview .title.active h2 {
    opacity: 1;
    transform: translateY(0);
 }


#overview .overview-cnt {
    position: relative;
    max-width: 1440px;
    margin: 0 auto 4em auto;
    padding: min(10vw , 120px) 2em;
    border-radius: 3vw;
    background-color: #fff;
}
#overview .overview-cnt::after {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    height: 100%;
    /* background-color: #ccc; */
    /* border: 19px solid #fff; */
    border: min(1.25vw , 19px) solid #fff;
    /* box-shadow: inset 0 0 0 14px #E50038; */
    box-shadow: inset 0 0 0 min(1.1vw , 14px) #E50038;
    border-radius: 3vw;
    /* opacity: .5; */
}
#overview .overview-cnt::before {
    pointer-events: none;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    background: url(../images/overview-deco_1a.webp) no-repeat 2.5em 2.5em / 2.5em,
    url(../images/overview-deco_1b.webp) no-repeat calc(100% - 2.5em) 2.5em / 2.5em,
    url(../images/overview-deco_1c.webp) no-repeat 2.5em calc(100% - 2.5em) / 2.5em,
    url(../images/overview-deco_1d.webp) no-repeat calc(100% - 2.5em) calc(100% - 2.5em) / 2.5em;

    font-size: min(1.8vw , 20px);
}

.overview-cnt .deco-1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 14%;
    --base-trans: translate(72%, -72%);
    transform: var(--base-trans);
    animation: peekLoop 3.2s .5s ease-in-out infinite;
}

@keyframes peekLoop {
    0%, 100% {
        transform: var(--base-trans) translateY(75%);
    }
    15% {
        transform: var(--base-trans) translateY(-8%);
    }
    20% {
        transform: var(--base-trans) translateY(0);
    }
    50% {
        transform: var(--base-trans) translateY(0);
    }
    65% {
        transform: var(--base-trans) translateY(75%);
    }
}



#overview .overview-box {
    position: relative;
}

/* #overview .item-cnt p {
    overflow-wrap: anywhere;
    word-break: break-word; 
} */


#overview .overview-box span.b-t {
    /* border-bottom: .2em solid #E50038; */
    background: linear-gradient(transparent 60%, #FFD6D6 60%);
}

#overview .overview-box .cnt-t {
    position: relative;
    margin: 1em 0;
    padding: 1em;
    background-color: #fff;
    /* border: .1em dashed #E50038; */
}
#overview .overview-box .cnt-t::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translate(-.1em , -.1em); */
    width: 1.2em;
    height: 1.2em;
    border-left: .4em solid #E50038;
    border-top: .4em solid #E50038;
}
#overview .overview-box .cnt-t::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    /* transform: translate(.1em , .1em); */
    width: 1.2em;
    height: 1.2em;
    border-right: .4em solid #E50038;
    border-bottom: .4em solid #E50038;
}

#overview .overview-box .cnt-t p {
    margin-bottom: 0;
}

#overview .overview-box p.n-t {
    margin-bottom: 1em;
}


.overview-box .item {
    display: flex;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 2em auto;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.overview-box .item.active {
    opacity: 1;
    transform: translateY(0);
}

.overview-box .item:last-child {
    margin: 0 auto;
}


.overview-box .item .item-t {
    align-content: center;
    width: 15%;
    min-width: 7em;
    padding: 1em;
    border-radius: 2vw 0 0 2vw;
    background-color: #550001;

}
.overview-box .item .item-t h3 {
    color: #fff;
}

.overview-box .item .item-cnt {
    width: 85%;
    padding: 1em;
    border-radius: 0 2vw 2vw 0;
    text-align: left;
    background-color: #F5F2E9;

}



/* 料金表 */
.price-list {
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    margin: 2em auto 4em auto;
    border-collapse: separate;
    border-spacing: 0; 
    background-color: #F5F2E9;
    border-radius: 0 0 1em 1em ;
    /* overflow: hidden; */
    /* border: .1em solid #E50038; */
    border-top: 0;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.price-list.active {
    opacity: 1;
    transform: translateY(0);
}

.price-list caption {
    /* padding: 1em; */
    text-align: center;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: #fff;
    background-color: #E50038;
    border-bottom: 0;
    border-radius: 1em 1em 0 0;
}
.price-list caption span.caption-in {
    padding: 1em;
}

.price-list caption span {
    display: inline-block;
    color: #fff;
    text-align: center;
}

.price-list caption span.t-1 {
    margin-left: .5em;
    margin-top: .25em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
}

.price-list caption span.t-2 {
    width: 100%;
    background-color: #fff;
    color: #E50038;
    padding: .25em 0;
    /* border: .1em solid #E50038; */
}


.price-list th,
.price-list td {
    padding: .8em 0;
    font-family: "M PLUS Rounded 1c", sans-serif;
    text-align: center;
    color: #550001;
    font-weight: 500;
}
.price-list th {
    border-bottom: .1em dashed #550001;
}

.price-list th:nth-child(even) {
    background-color: #FFDECA;
}
.price-list td:nth-child(even) {
    background-color: #FFDECA;
}


.price-list td {
    position: relative;
    font-size: 1.8em;
}
.price-list td img {
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 2;
    width: 110%;
    max-width: 180px;
    height: auto;
    opacity: 0;
    transform: translate(-50%, 50%) scale(0);
}

@keyframes priceImpactStamp {
    0% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(1.5) rotate(-15deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(0.92) rotate(3deg);
    }
    80% {
        transform: translate(-50%, 50%) scale(1.08) rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 50%) scale(1) rotate(0deg);
    }
}

@keyframes priceScaleLoop {
    0%, 100% {
        transform: translate(-50%, 50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-50%, 50%) scale(1.1) rotate(0deg);
    }
}

.price-list td img {
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 2;
    width: 110%;
    max-width: 180px;
    height: auto;
    opacity: 0;
    transform: translate(-50%, 50%) scale(0);
}

.price-list.active td img {
    animation: 
        priceImpactStamp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards,
        priceScaleLoop 2s ease-in-out 1.05s infinite;
}

@media screen and (max-width: 768px) {
    .price-list td img {
        width: auto;
        height: 150%;
    }
}
.price-list td span {
    margin-left: .25em;
    font-size: .6em;
}



/* CVボタン */
.btn-wrap {
    display: none;
}
.btn-wrap.timer-visible {
    display: block;
}
.btn-wrap.v-2 {
    pointer-events: none;
}

.btn-wrap .b-t {
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}

.btn-wrap .b-t.active {
    opacity: 1;
    transform: translateY(0);
}

.btn-wrap .b-t::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 12%;
    height: auto;
    aspect-ratio: 10 / 9;
    background: url(../images/btn-arrow.webp) no-repeat center / contain;
    opacity: 0;
    pointer-events: none;
    --target-trans: translate(-30%, 120%);
    --target-deg: 35deg;
    transform: var(--target-trans) rotate(calc(var(--target-deg) + 180deg)) scale(0);
}

@keyframes arrowSpinIn {
    0% {
        opacity: 0;
        transform: var(--target-trans) rotate(calc(var(--target-deg) + 180deg)) scale(0);
    }
    70% {
        opacity: 1;
        transform: var(--target-trans) rotate(calc(var(--target-deg) - 15deg)) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: var(--target-trans) rotate(var(--target-deg)) scale(1);
    }
}

.btn-wrap .b-t.active::after {
    animation: arrowSpinIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

@media screen and (max-width: 822px) {
    .btn-wrap .b-t::after {
        --target-trans: translate(80%, 26%);
        --target-deg: 54deg;
    }
}

.btn-wrap .b-t span {
    display: inline-block;
    font-weight: 500;
    text-align: center;
}
.btn-wrap .b-t span.t-deco {
    position: relative;
}
.btn-wrap .b-t span.t-deco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-100% , -80%);
    width: 12%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: url(../images/btn-deco.webp) no-repeat center / contain;
}

.btn-box {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 0 auto 4em auto;
    transform: rotate(-2deg) scale(0.3);
    opacity: 0;
    pointer-events: none;
}

@keyframes btnPopBounce {
    0% {
        opacity: 0;
        transform: rotate(-2deg) scale(0.3);
    }
    60% {
        opacity: 1;
        transform: rotate(-2deg) scale(1.08); 
    }
    80% {
        transform: rotate(-2deg) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: rotate(-2deg) scale(1); 
    }
}

.btn-box.active {
    pointer-events: all;
    animation: btnPopBounce 0.65s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}


.btn-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(5%, 12%) rotate(3deg);
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../images/ticket_2.webp) no-repeat center / contain;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (min-width: 769px) {
    .btn-box:hover {
        transform: rotate(0deg) scale(1) !important;
        transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1) 0.05s;
    }

    .btn-box:hover::after {
        transform: translate(0, 0) rotate(0deg);
        transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
    }
}

/* チケット利用・購入時のご注意 */
.ticket-note {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 3em 2em 2em 2em;
    border-radius: 2vw;
    background-color: #F5F3E9;
}

.ticket-note h3 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -45%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    font-size: 1.5em; 
    font-weight: 500;
    color: #E50038;
    opacity: 0;
    transition: .5s ease-in-out all;
}
.ticket-note h3.active {
    opacity: 1;
    transform: translate(-50% , -50%);
}

.ticket-note h3::before,
.ticket-note h3::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url(../images/note-icon.webp) no-repeat center / contain;
}

.ticket-note p.t-1 {
    display: inline-block;
    margin-bottom: 1em;
    padding: .25em 2em;
    border-radius: 50vw;
    font-size: 1.2em;
    font-weight: 300;
    color: #fff;
    background-color: #E50038;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.ticket-note p.t-1.active {
    opacity: 1;
    transform: translateY(0);
}
.ticket-note p.t-1 strong {
    color: #fff !important;
}

.ticket-note ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 830px;
    margin: 0 auto;
    text-align: left;
}
.ticket-note ul li {
    position: relative;
    padding-left: 1.4em;
    font-weight: 500;
    font-family: "M PLUS Rounded 1c", sans-serif;   
    color: #550001; 
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.ticket-note ul li.active {
    opacity: 1;
    transform: translateY(0);
}

.ticket-note ul li span.b-t {
    background: linear-gradient(transparent 60%, #FFD6D6 60%);
}


.ticket-note ul li::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0;
    transform: translate(0 , .35em);
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background-color: #E50038; 
}


/* SNS */
/* .sns-wrap {
    transform: scale(1);
    transition: .2s ease-in-out all;
}
.sns-wrap:hover {
    transform: scale(1.05);
} */

.sns {
    position: relative;
    width: 90%;
    max-width: 850px;
    margin: 0 auto;
    padding: 2.5em 1em 1.5em 1em;
    border-radius: 1.5em;
    border: .4em solid #FFBB00;
    background: #FFF3D0 url(../images/pattern-b_1.webp) repeat center / 10%;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.sns.active {
    opacity: 1;
    transform: translateY(0);
}


.sns-wrap.insta .sns {
    margin-top: 2em;
    padding: 3.5em 1em 2.5em 1em;
    border: .4em solid #0CC0A1;
    background: #E4FFF1 url(../images/pattern-g.webp) repeat center / 10%;
}



.sns::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , .5em);
    width: 100%; 
    height: 1em;
    background: url(../images/dot.webp) repeat-x left / 3em;
}

.sns-t {
    position: relative;
    width: 90%;
    max-width: 680px;
    margin: 0 auto;
    transform: scale(1);
    transition: .2s ease all;
}
.sns-t:hover {
    transform: scale(1.05);
}

.sns-t.item-1 {
    margin: 0 auto 2em auto;  
}

.sns-img {
    width: 90%;
    margin: 0 auto;
    /* margin-left: 3%; */
    margin-bottom: .8em;
}
.sns-img img {
    width: 78%;
    margin-left: 3%;
}

.sns-p {
    position: relative;
}
.sns-p::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-75% , 25%) rotate(-20deg);
    width: 13%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: url(../images/insta-deco_3.webp) no-repeat center / contain;
}

.sns-t.item-1 .sns-p::before {
    display: none;
}


.sns-p::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-10% , -80%) rotate(10deg);
    width: 17%;
    height: auto;
    aspect-ratio: 10 / 9;
    background: url(../images/girl.webp) no-repeat center / contain;  
}

.sns-t.item-2 .sns-p::after {
    display: none;
}

.sns-wrap.insta .sns-p::before,
.sns-wrap.insta .sns-p::after {
    display: none;
}

.sns-p p {
    position: relative;
    z-index: 2;
    padding: .5em 2em .5em 1em;
    border-radius: 50vw;
    font-size: 1.2em;
    text-align: center;
    color: #fff;
    background: #0CC0A1 url(../images/arrow-w.webp) no-repeat 95% / .5em;


}
.sns-t.item-2 .sns-p p {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    /* padding: .5em 2em .5em 2em; */
}


.sns-t.item-2 .sns-p p::before {
    content: '';
    /* position: absolute; */
    /* top: 50%;
    transform: translate(-100% , -50%); */
    width: 1.5em;
    height: 1.5em;
    margin-right: .5em;
    background: url(../images/instagram-icon.webp) no-repeat center / contain;
}

.sns-p p span {
    color: #fff;
    display: inline-block;
}
.sns-wrap.insta .sns-p p {
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1.6em;
    font-size: min(3.38vw , 32px);
    padding: 0;
    text-align: left;
}
.sns-wrap.insta .sns-p p span {
    color: #333;
}
.sns-wrap.insta .sns-p p::before {
    content: '';
    width: 1.5em;
    height: 1.5em;
    margin-right: .25em;
    background: url(../images/instagram-icon.svg) no-repeat center / contain;
}

/* .sns-wrap.insta .sns-t {
    max-width: initial;
} */

.sns-wrap.insta .sns-p p::after {
    content: '';
    width: 1em;
    height: 1em;
    background: url(../images/arrow-b.webp) no-repeat center / contain;
}

.sns a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}


/* 親要素で定位置を設定 */
.sns .deco_1 {
    top: 0;
    right: 0;
    transform: translate(-110%, -50%) rotate(-5deg);
    width: 8%;
}

.sns .deco_2 {
    top: 0;
    right: 0;
    transform: translate(40%, -40%) rotate(-10deg);
    width: 13%;
}

.sns .deco_3 {
    top: 0;
    right: 0;
    transform: translate(50%, 120%) rotate(-40deg);
    width: 7%;
}

/* 常時回転キーフレーム（時計回り / 反時計回り） */
@keyframes decoRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes decoRotateReverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* 各imgに回転アニメーションを適用 */
.sns .deco_1 img {
    animation: decoRotate 8s linear infinite;
}

.sns .deco_2 img {
    animation: decoRotateReverse 10s linear infinite;
}

.sns .deco_3 img {
    animation: decoRotate 7s linear infinite;
}


.sns-wrap.insta .sns .deco_1 {
    width: 5%;
}

.sns-wrap.insta .sns .deco_2 {
    width: 10%;
}

.sns-wrap.insta .sns .deco_3 {
    width: 5%;
}

.sns .deco_4 {
    bottom: 0;
    left: 0;
    transform: translate(110%, 50%) rotate(5deg);
    width: 5%;
}

.sns .deco_5 {
    bottom: 0;
    left: 0;
    transform: translate(-40%, 40%) rotate(10deg);
    width: 10%;
}

.sns .deco_6 {
    bottom: 0;
    left: 0;
    transform: translate(-50%, -120%) rotate(40deg);
    width: 5%;
}

/* 常時回転アニメーションの適用 */
.sns .deco_4 img {
    animation: decoRotate 8s linear infinite;
}

.sns .deco_5 img {
    animation: decoRotateReverse 10s linear infinite;
}

.sns .deco_6 img {
    animation: decoRotate 7s linear infinite;
}

/* ------------------------------------------------- ステージ・ブースについて ------------------------------------------------- */

#contents.sec {
    overflow: hidden;
    padding: 12em 0 5em 0;
}

#contents .title {
    position: relative;
    left: 50%;
    transform: translate(-50% , 0);
}
#contents .title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-80% , -100%);
    width: 60%;
    height: auto;
    aspect-ratio: 5 / 1;
    background:  url(../images/contents-deco.webp) repeat-x right / 50%;
}

#contents .title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(80% , -100%);
    width: 60%;
    height: auto;
    aspect-ratio: 5 / 1;
    background:  url(../images/contents-deco-r.webp) repeat-x left / 50%;
}


#contents h2 {
    height: 3em;
    margin-bottom: 1em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#contents .title.active h2 {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 800px) {
    #contents h2 {
        height: 4.5em;
    }
}

#contents .title p {
    text-align: center;
    font-size: 1.2em;
    font-weight: 500;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#contents .title p.active {
    opacity: 1;
    transform: translateY(0);
}

/* 一覧 */

.contents-tab {
    width: 100%;
    margin: 2em auto .5em auto;
}

.tab-nav {
    display: flex;
    justify-content: center;
    gap: 0.5em;
}

.contents-tab h3 {
    width: 50%;
}

.tab-btn {
    position: relative;
    cursor: pointer;
    width: 100%;
    padding: 0.5em 1em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1em;
    font-weight: 700;
    border-radius: 1em 1em 0 0;
    color: #fff;
    background-color: #0CC0A1;
    border: .2em solid #550001;
    border-bottom: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.tab-btn.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50% , 50%);
    width: calc(100%);
    height: .4em;
    background-color: #0CC0A1;
}

.tab-btn#tab-2::after {
    opacity: 0;
}
.tab-btn.is-active#tab-2::after {
    opacity: 1;
    background-color: #FFBB00;
}

.tab-btn#tab-2 {
    background-color: #FFBB00;
}

.tab-btn img {
    height: 1.8em;
}

#tab-contents {
    padding: 2em 1.5em;
    border-radius: 0 0 1.5em 1.5em;
    border: .2em solid #550001;
    background-color: #0CC0A1;

}
#tab-contents.tab-2 {
    background-color: #FFBB00;
}

.tab-panel.is-show{
    display: block;
}
.tab-panel {
    display: none;
}

.content-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2em 1em;
}

/* カード全体 */
.content-item {
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    width: calc(100% / 3 - .7em);
    padding: .5em .5em 2em .5em;
    border: .15em solid #550001;
    border-radius: .5em;
    text-align: left;
    background-color: #fff;
    opacity: 0;
    /* transition: .5s ease all; */
    transition: opacity .5s ease, border-color .2s ease;
}
.content-item.active {
    opacity: 1;
}
#panel-2 .content-item {
    opacity: 1;
}

.content-item:hover {
    border-color: #E50038;
    transition: border-color .2s ease;
}


@media screen and (max-width: 1000px) {
    .content-item {
        width: calc(100% / 2 - .7em);
    }

}

.content-item .time {
    margin-top: .5em;
    background-color: #FFF3D0;
    padding: .5em 1em;
}
/* .content-item .time p {
    text-align: center;
} */

/* 下部ボタン */
.content-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-10% , 50%);
    width: 2.5em;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;
    background: #550001 url(../images/arrow-w-t.webp) no-repeat center / 1em;
    transition: transform 0.3s ease;
}

.content-item.is-active::after {
    transform: translate(-10% , 50%) rotate(180deg);
}

.content-item .cnt-img {
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: .5em;
    border-radius: .5em;
    background-color: #ccc;
}
.content-item .cnt-img img {
    object-position: center;
    object-fit: cover;
}

.content-item h4 {
    min-height: 3em;
    margin-bottom: 0;
    font-size: 1.2em;
    font-weight: 700;
    color: #550001;
}

.cnt-text {
    display: grid;
    grid-template-rows: 0fr; 
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}

.cnt-text-in {
    min-height: 0;
    overflow: hidden;
}

.cnt-text.is-active {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: .75em;
}

.cnt-text-in p {
    font-size: min(1.82vw , 18px);
    margin-bottom: .5em;
    word-break: break-all;
}
.cnt-text-in p:last-child {
    margin-bottom: 0;
}

.cnt-text-in .text-box {
    position: relative;
    margin-top: 1em;
}
.cnt-text-in .text-box a {
    color: #E50038;
    border-bottom: .15em solid #E50038;
}

.cnt-text-in .text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -1em);
    width: 100%;
    height: 1em;
    background: url(../images/border-dot.webp) repeat-x left / .4em;
}

#contents .notes {
    margin-bottom: 4em;
    text-align: left;
}
#contents .notes p {
    font-size: min(1.82vw , 18px);
}

#contents .btn-box {
    margin-bottom: 1.5em;
}
#contents .btn-wrap p {
    text-align: center;
    font-size: min(1.82vw , 18px);
}



/* ------------------------------------------------- よくある質問 ------------------------------------------------- */

#faq.sec {
    position: relative;
    /* background-color: #78D0E5;
    background-image: url(../images/pattern-b_2.webp);
    background-repeat: repeat; */

    background: #78D0E5 url(../images/pattern-b_2.webp) repeat top center / 8em;

    -webkit-mask-image: 
        url(../images/svg/zigzag-t.svg),
        linear-gradient(#000, #000),
        url(../images/svg/zigzag-b.svg); 
    -webkit-mask-position: 
        left .5px, 
        center, 
        left bottom .5px;
    -webkit-mask-repeat: 
        repeat-x, 
        no-repeat, 
        repeat-x;
    -webkit-mask-size: 
        auto 20px,            
        100% calc(100% - 38px),
        auto 20px;
    -webkit-mask-composite: source-over;

    mask-image: 
        url(../images/svg/zigzag-t.svg),
        linear-gradient(#000, #000),
        url(../images/svg/zigzag-b.svg);
    mask-position: left .5px, center,  left bottom .5px;
    mask-repeat: repeat-x, no-repeat, repeat-x;
    mask-size: auto 20px, 100% calc(100% - 38px), auto 20px;
    mask-composite: add;

    padding: 6em 0;
}


#faq.sec .sec-in {
    max-width: 1000px;
}

#faq h2 {
    height: 3em;
    margin-bottom: 2em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#faq .title.active h2 {
    opacity: 1;
    transform: translateY(0);
}



/* 質問一覧 */

.faq-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .5em;
}

.faq-item {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease all;
}
.faq-item.active {
    opacity: 1;
    transform: translateY(0);
}




.faq-q {
    cursor: pointer;
    user-select: none;
    position: relative;
    display: flex;
    z-index: 2;
    align-items: center;
    padding: 1em 3em 1em 5.25em;
    margin: .5em auto;
    background-color: #0CC0A1;
    /* border: .15em solid #0CC0A1; */
    border-radius: 50vw;
    text-align: left;

    opacity: 1;
    transition: .2s ease all;
}
/* .faq-q:hover {
    background-color: #fff;
} */

.faq-item:nth-child(even) .faq-q {
    background-color: #FFBB00;
    /* border: .15em solid #FFBB00; */
}
/* .faq-item:nth-child(even) .faq-q:hover {
    background-color: #fff;
} */

.faq-q span.faq-icon-q_2 {
    /* color: #fff; */
    font-size: 1em;
    font-weight: 500;
}

.faq-q span.faq-icon-q {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-.15em , -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;
    font-size: 1.5em;
    font-weight: 500;
    background-color: #fff;
    color: #0CC0A1;
    border: .1em solid #0CC0A1;
}
.faq-item:nth-child(even) .faq-q span.faq-icon-q {
    color: #FFBB00;
    border: .1em solid #FFBB00;
}

.faq-item:nth-child(even) .faq-q.is-open + .faq-a .faq-a-in {
    border-color: #FFBB00;
}

/* 右プラス */
.faq-q::before,
.faq-q::after {
    content: '';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: .25em;
    border-radius: 50vw;
    background-color: #fff;
    transition: transform 0.3s ease;
}
/* .faq-q:hover::before,
.faq-q:hover::after {
    background-color: #550001;
 
} */


.faq-q::after {
    transform: translateY(-50%) rotate(90deg);
}

.faq-q.is-open::after {
    transform: translateY(-50%) rotate(0deg);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    font-size: min(1.56vw , 20px);
    transition: grid-template-rows 0.3s ease;
}

.faq-q.is-open + .faq-a {
    grid-template-rows: 1fr;
}

.faq-a-in {
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1; 
    /* margin-top: -2em;  */
    margin-top: var(--q-offset );
    
    display: flex;
    gap: .5em;
    background-color: #fff;
    box-sizing: border-box;
    text-align: left;
    
    /* 閉じている状態 */
    padding: 0 1.5em 0 1.5em;
    border-radius: 0 0 2em 2em;
    border: 0 solid #0CC0A1;
    border-top: 0;
    opacity: 0;
    transition: padding 0.35s ease, opacity 0.25s ease;
}

.faq-q.is-open + .faq-a .faq-a-in {
    padding: 3.5em 1.5em 1.5em 1.5em;
    border: .2em solid #0CC0A1;
    border-top: 0;
    opacity: 1;
}

.faq-a-in .text-w {
    display: flex;
    max-width: 830px;
    margin: 0 auto;
    /* background-color: #ccc; */
}


.faq-a-in span.t-1 {
    display: block;
    width: 1em;
    line-height: 1.6;
}


.faq-a p {
    margin: 0;
    font-size: 1em;
    /* font-size: clamp(12px , 1.56vw , 18px);
    font-size: ; */
    line-height: 1.6;
    /* color: #231815; */
    text-align: justify;
}

.faq-a p.m-top {
    margin-top: 1em;
}

.faq-a a {
    display: inline;
    color: #E50038;
    border-bottom: 1px solid #E50038;
}

.faq-a-content {
    width: calc(100% - 1em);

}



.faq-t {
    margin-top: 2em;
    text-align: left;
}
.faq-t a {
    margin-left: .4em;
    color: #fff;
    border-bottom: 1px solid #fff;
}


/* ------------------------------------------------- 注意事項 ------------------------------------------------- */

#notes h2 {
    margin-bottom: 2em;
    height: 3em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
#notes .title.active h2 {
    opacity: 1;
    transform: translateY(0);
}

.notice-list {
    max-width: 850px;
    margin: 0 auto;
}

.notice-list li {
    /* list-style: disc; */
    text-align: left;
    margin-bottom: 1em;
    line-height: 1.5;
    font-weight: 500;
    color: #550001;
    font-family: "M PLUS Rounded 1c", sans-serif;   
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all; 
}
.notice-list li.active {
    opacity: 1;
    transform: translateY(0);
} 



/* ------------------------------------------------- 詳 細 ------------------------------------------------- */


#other.sec {
    position: relative;
    background-color: #fff;
    text-align: left;
}
#other.sec::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -100%);
    z-index: -1;
    width: 100%;
    height: 10vw;
    background-color: #fff;
}

#other .sec-in {
    max-width: 1000px;
    margin: 0 auto;
}


.other-box {
    overflow: hidden;
    margin-bottom: 4em;
    border-radius: 1.5em;
}

.other-item {
    display: flex;
    background-color: #F5F2E9;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.other-item.active {
    opacity: 1;
    transform: translateY(0);
}

.other-item:nth-child(even) {
    background-color: #FFDECA;
}
.other-item h3 {
    width: 15%;
    min-width: 6em;
    padding: 1em 1em 1em 2em;
    /* text-align: center; */
    font-weight: 400;
    color: #550001;
}
.other-box p {
    padding: 1em;
    width: 85%;
    font-weight: 400;
}


/* アクセス */
.access {
    margin-bottom: 4em;
}

.access .flex {
    display: flex;
    gap: 2em;
}

.access .flex-item_1 {
    width: 40%;
    min-width: 300px;
}

.access .flex-item_1 h2 {
    height: 2em;
    margin-bottom: 1em;
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease all;
}
.access .flex-item_1 .title.active h2 {
    opacity: 1;
    transform: translateY(0);
}

.access .flex-item_1 h2 img {
    object-position: left;
}


.access .flex-item_2 {
    width: 60%;
    height: auto;
    aspect-ratio: 5 / 3;
    border-radius: 1em;
    overflow: hidden;
}

.access .flex-item_2 iframe {
    width: 100%;
    height: 100%;
}

.access .text p,
.access .text h3 {
    opacity: 0;
    transform: translateY(5%);
    transition: .5s ease-in-out all;
}
.access .text p.active,
.access .text h3.active {
    opacity: 1;
    transform: translateY(0);
}



.access-train {
    margin: .5em 0 1em 0;
}
.access-car  {
    margin-bottom: 1em;
}

.access-train h3,
.access-car h3 {
    margin-bottom: .5em;
    font-size: 1.1em;
    text-align: center;
    font-weight: 500;
    border-radius: 50vw;
    background-color: #0CC0A1;
    color: #fff;
}

.access a {
    color: #E50038;
    border-bottom: 1px solid #E50038;
}







@media screen and (max-width: 768px) {
    .sec {
        font-size: min(3.75vw , 18px);

    }

    .sp {
        display: block;
    }
    .pc {
        display: none;
    }

    #fix-btn {
        width: 30%;
        max-width: 150px;
    }
    #fix-btn:hover {
        transform: scale(1);
    }

    #top-btn {
        width: 20%;
        min-width: 40px;
    }

    .feature-add p {
        text-align: left;
    }

    #ham-btn {
        width: 7em;
        max-width: 90px;
    }




/* ------------------------------------------------- KV ------------------------------------------------- */


    .kv-bg span.border {
        height: 6.5%;
        background: url(../images/kv-bg_2.webp) repeat-x center top / 20% 100%;

    }


    .kv-bg span.border.b-t {
        transform: translate(-50% , -17%);
        background: url(../images/kv-bg_2-t.webp) repeat-x center top / 20% 100%;
    }

    .wrap-1 .bg {
        background: url(../images/event-bg_2.webp) repeat center / 20%;
    }


    #kv {
        aspect-ratio: 1 / 1;
    }

    .kv-title {
        width: 85%;
        --base-trans: translate(-50%, -60%);
    }

    #kv .deco.deco_1 {
        width: 16%;
        --from-pos: translate(-5%, -40%) scaleX(-1) rotate(20deg) scale(0.3);
        --over-pos: translate(-28%, -60%) scaleX(-1) rotate(-5deg) scale(1.1);
        --to-pos: translate(-25%, -58%) scaleX(-1) rotate(0deg) scale(1);
    }

    #kv .deco.deco_2 {
        width: 16%;
        --from-pos: translate(5%, -40%) rotate(20deg) scale(0.3);
        --over-pos: translate(28%, -60%) rotate(-5deg) scale(1.1);
        --to-pos: translate(25%, -58%) rotate(0deg) scale(1);
    }

    /* 花・アイコン類SP用（既存のサイズ・配置を維持しつつ調整） */
    #kv .deco.deco_3 {
        top: 63%;
        left: 5%;
        width: 8%;
        --from-pos: translate(120%, -30%);
        --over-pos: translate(-5%, 5%);
    }

    #kv .deco.deco_4 {
        top: 74%;
        left: 17%;
        width: 10%;
        --from-pos: translate(90%, -80%);
        --over-pos: translate(-5%, 5%);
    }

    #kv .deco.deco_5 {
        top: 11.5%;
        left: 9.5%;
        width: 15%;
        --from-pos: translate(100%, 90%);
        --over-pos: translate(-5%, -5%);
    }

    #kv .deco.deco_6 {
        bottom: 15%;
        right: 12.5%;
        width: 12.8%;
        --from-pos: translate(-100%, -90%);
        --over-pos: translate(5%, 5%);
    }

    #kv .deco.deco_7 {
        top: 12%;
        right: 20%;
        width: 8%;
        --from-pos: translate(-90%, 100%);
        --over-pos: translate(5%, -5%);
    }

    #kv .deco.deco_8 {
        top: 26%;
        right: -4%;
        width: 10%;
        --from-pos: translate(-120%, 30%);
        --over-pos: translate(5%, -5%);
    }

    .kv-bg .deco.deco_9 {
        width: 18%;
    }

    #kv .text-deco_1 {
        top: 25%;
        width: 80%;
        --base-x: -50%;
    }

    #kv .text-deco_2 {
        bottom: 32%;
        width: 60%;
        --base-x: -50%;
    }

/* ------------------------------------------------- イベント ------------------------------------------------- */
/* メニュー */



    :root {
    --base-menu-w: min(45vw, 240px);
    }

    .menu ul li {
        flex: 0 0 calc(var(--w-ratio) * var(--base-menu-w));
    }

    #event .text-point {
        flex-wrap: wrap;
        margin-bottom: .8em;

    }
    #event .text-point span.t-sp {
        /* width: 100%; */
        margin-top: .25em;
    }

    #event h2 {
        font-size: 1.2em;
    }

    #event .text-point .t-1, #event .text-point .t-2 {
        font-size: min(7.5vw , 30px);
    }
    #event .text-point span {
        font-size: 1.2em;
    }

    #event .event-wrap {
        border-width: 2em 2em 6em 2em;
        padding: 8% 0 .5% 0;
    }

    #event .event-wrap::after {
        width: calc(100% + 4em);
        transform: translate(-50%, -8%);
    }

    #event h2 span.lead, 
    #event h2 span.project-name {
        margin-bottom: .25em;
        line-height: 1.2;
    }

    #event .from  {
        width: 70%;
    }

    #event .date {
        transform: translate(-50% , 95%);
    }

    #event .date .date-in {
        height: auto;
        max-width: 780px;
        margin: 0 auto;
    }
    
   
    
    #event .deco.deco_1 {
        right: -9%;
        width: 8%;
         max-width: 30px;
    }


    #event .deco.deco_2 {
        top: -25%;
        right: -5.5%;
        width: 22%;
        max-width: 100px;
    }

    #event .deco.deco_3 {
        left: -10%;
        top: -27%;
        width: 29%;
        max-width: 130px;
    }

    #event .deco.deco_4 {
        top: 47%;
        left: -12%;
        width: 16%;
        max-width: 62px;
    }


    #event .date .deco-wrap {
        max-height: 230px;
        max-width: 720px;
        top: auto;
        bottom: 0;
    }


    .date-in span.deco-1 {
        top: 11%;
        left: 6%;
        width: 12%;
    }

    .date-in span.deco-2 {
        top: -11%;
        right: 0;
        width: 25%;
        max-width: 200px;
    }


    /* こども応援プロジェクトとは？ */

    #event-about h2 span.about-img {
        width: 70%;
    }


    /* #event-about .deco-wrap {
        width: 100%;
    } */

    #event-about .deco_1 {
        width: 20%;
        max-width: 90px;
    }
    
    #event-about .deco_2 {
        width: 20%;
        max-width: 100px;
        transform: translate(10% , 120%) rotate(18deg);

    }

    #event .deco-wrap {
        width: 100%;
        max-width: 550px;
    }




/* ------------------------------------------------- 参加する ------------------------------------------------- */

    #overview .sec-in {
        width: 100%;
    }

    #overview .title::before {
        width: 65%;
        transform: translate(-50%, 0%);
    }
    #overview .title {
        aspect-ratio: 6 / 1;
    }

    .overview-box .item {
        display: block;
        border-radius: 1em;
        overflow: hidden;
    }
    .overview-box .item .item-t {
        width: 100%;
        border-radius: 0;
    }
    .overview-box .item .item-cnt {
        width: 100%;
        border-radius: 0;
    }

    .price-list {
        display: grid;
        grid-template-columns: 45% 55%; 
        width: 100%;
    }

    .price-list caption {
        grid-column: 1 / -1; 
    }

    .price-list thead,
    .price-list tbody,
    .price-list thead tr,
    .price-list tbody tr {
        display: contents; 
    }

    .price-list th:nth-child(1) { order: 1; }
    .price-list td:nth-child(1) { order: 2; }

    .price-list th:nth-child(2) { order: 3; }
    .price-list td:nth-child(2) { order: 4; }

    .price-list th:nth-child(3) { order: 5; }
    .price-list td:nth-child(3) { order: 6; }

    .price-list th:nth-child(4) { order: 7; }
    .price-list td:nth-child(4) { order: 8; }

    .price-list th,
    .price-list td {
        display: flex;
        align-items: center;
        padding: 1em;
        /* border-bottom: .1em dashed #550001; */
    }

    .price-list th {
        border-right: .1em dashed #550001;
        border-bottom: 0;
    }

    .price-list th {
        justify-content: center;
        font-size: 1.1em;
    }

    .price-list td {
        justify-content: center;
        font-size: 1.5em;
    }

    .price-list th:nth-child(4),
    .price-list td:nth-child(4) {
        border-bottom: none;
    }


    .price-list td img {
        width: auto;
        height: 150%;
    }


    /* .overview-cnt .deco-1 {
        transform: translate(10%, -72%);
        width: 20%;
    } */
    .overview-cnt .deco-1 {
        --base-trans: translate(10%, -72%);
        width: 20%;
    }
    

    .btn-wrap .b-t::after {
        --target-trans: translate(50%, 50%);
        --target-deg: 54deg;
    }

    .btn-wrap .b-t span {
        display: block;
    }

    .ticket-note h3 {
        font-size: 1.25em;
    }

    .ticket-note h3::before, .ticket-note h3::after {
        width: 1.25em;
        height: 1.25em;
    }

    .sns-wrap:hover {
        transform: scale(1);
    }

    /* .sns-img {
        width: 75%;
        margin-left: 0;
    } */

     .sns-img img {
        margin-left: 0;
     }

    .sns-p::after {
        width: 22%;
        transform: translate(-10%, -82%) rotate(10deg);
    }

    .sns-t {
        width: 100%;
        max-width: 550px;
    }
    .sns-t:hover {
        transform: scale(1);
    }

    .sns {
        /* width: 100%; */
        max-width: 620px;
    }

    .sns-p::before {
        opacity: 0;
            transform: translate(-35%, 50%) rotate(-20deg);
    }

    /* .sns-t.item-2 .sns-p p {
        text-align: left;
    } */


    .cnt-text-in p,
    #contents .notes p,
    #contents .btn-wrap p {
        font-size: min(3.75vw , 18px);
    }

    #faq.sec {

        -webkit-mask-image: 
            url(../images/svg/zigzag-t.svg),
            linear-gradient(#000, #000),
            url(../images/svg/zigzag-b.svg); 
        -webkit-mask-position: 
            left .5px, 
            center, 
            left bottom .5px;
        -webkit-mask-repeat: 
            repeat-x, 
            no-repeat, 
            repeat-x;
        -webkit-mask-size: 
            auto 10px,
            100% calc(100% - 19px),
            auto 10px;
        -webkit-mask-composite: source-over;

        mask-image: 
            url(../images/svg/zigzag-t.svg),
            linear-gradient(#000, #000),
            url(../images/svg/zigzag-b.svg);
        mask-position: left .5px, center, left bottom .5px;
        mask-repeat: repeat-x, no-repeat, repeat-x;
        mask-size: 
            auto 10px, 
            100% calc(100% - 19px), 
            auto 10px;
        mask-composite: add;

    }

    .tab-btn img {
        height: 1.4em;
    }

    .other-item {
        display: block;
    }
    
    .other-item h3 {
        text-align: center;
        width: 100%;
        padding: 1em 1em .5em 1em;
        /* font-weight: 700; */
        /* border-bottom: 2px dashed #550001; */
    }

    .other-box p {
        width: 100%;
    }


    .access .flex {
        flex-direction: column-reverse;
        /* display: block; */
    }

    .access .flex-item_1 {
        width: 100%;
        min-width: auto;
        /* margin-bottom: 2em; */
    }

    .access .flex-item_2 {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .access .flex-item_1 h2 img {
        object-position: center;
    }


    #other .sec-in {
        max-width: 550px;
    }
    
    #overview .title h2 {
        height: 5em;
        max-height: 45px;
    }

    #notes h2,
    #faq h2,
    .access h2 {
        height: 2.5em;
    }

    .access h2 {
        margin-bottom: 2.5em;
    }

    #contents h2 {
        height: 5em;
    }

    #contents .title::after {
        transform: translate(80% , -50%);
        width: 100%;
    }

    #contents .title::before {
        transform: translate(-80% , -50%);
        width: 100%;

    }

    .price-list caption span.t-1 {
        margin-left: 0;
    }


    .faq-a {
        font-size: min(3.75vw , 18px);
    }


    #event-about .text-box {
        width: 100%;
    }

    #menu-ham ul li {
        flex: 0 0 calc(var(--w-ratio2) * min(46.8vw , 240px));
        /* max-width: 100%; */
    }

    .about-btn:hover .btn-in {
        transform: translate(0, 0);
        background: url(../images/about-btn_2.webp) no-repeat 5% center / 1.5em, 
                    url(../images/arrow-w.webp) no-repeat 90% center / 0.5em #E50038;
    }

    .about-btn:hover p {
        color: #fff;
    }

    #menu-ham .btn-wrap p {
        font-size: 12px;
    }

    /* .content-item h4 {
        font-size: min();
    } */



}

@media screen and (max-width: 600px) {
    .content-item {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }


    #contents .title::after {
        transform: translate(80% , -100%);
        width: 100%;
    }

    #contents .title::before {
        transform: translate(-80% , -100%);
        width: 100%;

    }

    .content-item h4 {
        min-height: 0;
    }

}


/* -- HEADER
--------------------------------------------- */
.l-header {
    width: 100%;
    padding: 0 40px;
    height: 100px;
}

/* -- CONTAINER
--------------------------------------------- */
.l-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1280px;
}

@media screen and (max-width: 768px) {
/* -- HEADER SP
--------------------------------------------- */
    .l-header {
        padding: 0;
        min-height: 60px;
        height: 60px;
    }
    [lang="en"] .l-header {
        padding: 0;
        min-height: 60px;
        height: 60px;
    }

/* -- CONTAINER SP
--------------------------------------------- */
    .l-container {
        padding-left: 17px;
        padding-right: 17px;
    }

    


}

/* ===============================================================
OBJECT
=============================================================== */
/* -- HEADER
--------------------------------------------- */
.c-header {
    width: 100%;
    background-color: #f5f5f5;
    -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.c-header__inner {
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.scrollfixed .c-header__inner {
    padding-right: 18px;
}

.c-header__logo {
    min-width: 180px;
    max-width: 180px;
    width: 20%;
    line-height:1;
}

.c-header__logo img {
    width: 100%;
}

.c-header__menu-wrap {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 30px;
    max-width: 950px;
    width: 100%;
    height: 100%;
}

@media all and (-ms-high-contrast: none) {
    .c-header__menu-wrap {
        max-width: 940px;
    }
}

.c-header--en .c-header__menu-wrap {
    max-width: 860px;
}

.c-header__subnav {
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: 15px;
}

.c-header__buttons {
    position: relative;
    width: 260px;
    min-width: 260px;
    height: 40px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    overflow: hidden;
    -webkit-transition: 250ms ease-out;
    transition: 250ms ease-out;
}

.c-header__buttons form {
    width: 100%;
    height: 100%;
}

.c-header--en .c-header__buttons {
    width: 65px;
    min-width: 65px;
}

.c-header__buttons-inner {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px;
    -webkit-transition: 250ms ease-out;
    transition: 250ms ease-out;
}

.c-header__button {
    position: relative;
}

.c-header__button:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -14px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #c8c8c8;
}

.c-header__button:last-child:after {
    content: none;
}

.c-header__button a {
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 14px;
    color: #444;
    font-size: 14px;
    vertical-align: middle;
    text-decoration: none;
    line-height: 1;

    font-weight: 400;
    font-family: "Hiragino Kaku Gothic ProN";
}

.c-header__button a img {
    display: block;
    margin-right: 7px;
    width: 17px;
    height: 18px;
}

.c-header__button a img:last-child {
    margin-right: 0;
}

.c-header__buttons--search-result .c-header__button a img:last-child,
.c-header--en .c-header__button a img:last-child {
    margin-right: 7px;
}

.c-header__subnav form {
    display: block;
    position: relative;
    margin-left: 25px;
    width: 190px;
    height: 38px;
}

.c-header__search {
    display: block;
    padding: 0 10px;
    width: 190px;
    height: 38px;
    font-size: 16px;
    vertical-align: middle;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    -webkit-transition: 250ms ease-out;
    transition: 250ms ease-out;
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    border: 1px solid #c8c8c8;
}

.c-header__search:focus {
    outline: none;
}

.c-header__search:after {
    content: none;
}

.c-header__submit {
    text-indent: -9999px;
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    height: 20px;
    background-color: #fff;
    background-image: url("../images/icon_search.png");
    background-size: 14px 14px;
    background-position: 13px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.c-header__search.is-active + .c-header__buttons-inner {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

.c-header__search.is-active + .c-header__buttons-inner .c-header__button--search {
    pointer-events: none;
}

.c-header__search-sp-btn {
    display: none;
}

.c-header__search-sp {
    display: none;
}

/* -- FOOTER
--------------------------------------------- */
.c-footer {
    position: relative;
    background-color: #f0f0f0;
}

.c-footer__inner {
    padding: 30px 0 20px;
}

.c-footer__logo {
    margin: 0 auto 10px;
    width: 190px;
}

.c-footer__logo img {
    width: 100%;
}

.c-footer__links {
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px;
}

.c-footer__link {
    color: #444;
    margin-right: 24px;
    font-size: 14px;
    font-weight: 700;
    height:14px;
}

.c-footer__link--fb {
    width: 26px;
    height: 26px;
}

.c-footer__link:last-child {
    margin-right: 0;
}

.c-footer__link:last-child img {
    width: auto;
    height: auto;   
}

.c-footer__link:hover {
    text-decoration: underline;
}

.c-footer__copyright {
    text-align: center;
    font-size: 12px;
}

/* -- ICON
--------------------------------------------- */

.c-icon-blank {
    display: inline-block;
    margin-left: 2px;
    top: auto;
    width: 14px;
    height: 100%;
    background-image: url("../images/icon_blank.gif");
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: contain;
}

.c-icon-blank--absolute {
    position: absolute;
    left: calc(100% + 1px);
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    height: 14px;
    background-position: center bottom;
}


@media screen and (max-width: 768px) {
/* -- HEADER SP
--------------------------------------------- */
    .c-header__inner {
        position: relative;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: 50;
        padding-left: 17px;
        padding-right: 17px;
        background-color: #f5f5f5;
    }
    .c-header__menu-wrap {
        display: none;
    }
    .c-header__menu-sp {
        display: block;
        z-index: 40;
    }
    .c-header__menu-sp {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        -webkit-transition: 250ms ease-out;
        transition: 250ms ease-out;
    }
    .c-header.is-open .c-header__menu-sp-bg {
        opacity: 1;
        pointer-events: auto;
    }
    .c-header.is-open .c-header__menu-sp {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .c-header__search-sp-btn {
        position: absolute;
        top: 25px;
        right: 20px;
        display: block;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 20px;
        height:20px;
        z-index: 60;
    }
    .c-header__search-sp-btn img {
        width: 100%;
    }
    .c-header__search-sp {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 10px;
        background-color: #007ac5;
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: 250ms ease-out;
        transition: 250ms ease-out;
    }
    .c-header__search-sp.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    .c-header__search-sp form {
        width: 100%;
    }
    .c-header__search-sp:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 100%;
        right: 30px;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
        border-left: solid 8px transparent;
        border-right: solid 8px transparent;
        border-bottom: solid 10px #007ac5;
    }
    .c-header__search-sp-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    width: 100%;
    }
    .c-header__search-sp-input {
        display: block;
        padding: 12px 10px;
        width: calc(100% - 70px);
        height: 34px;
        background-color: #fff;
        border-radius: 4px 0 0 4px;
    }
    .c-header__search-sp-submit {
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: 70px;
        height: 34px;
        font-size: 15px;
        letter-spacing: 0.2em;
        background-color: #dcdcdc;
        border: none;
        border-radius: 0 4px 4px 0;
    }
    @-webkit-keyframes openMenu1 {
        0% {
            -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
        }
        50% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translate(0) rotate(45deg);
            transform: translate(0) rotate(45deg);
        }
    }
    @keyframes openMenu1 {
        0% {
            -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
        }
        50% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translate(0) rotate(45deg);
            transform: translate(0) rotate(45deg);
        }
    }
    @-webkit-keyframes openMenu2 {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes openMenu2 {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes openMenu3 {
        0% {
            -webkit-transform: translateY(7px);
            transform: translateY(7px);
        }
        50% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translate(0) rotate(-45deg);
            transform: translate(0) rotate(-45deg);
        }
    }
    @keyframes openMenu3 {
        0% {
            -webkit-transform: translateY(7px);
            transform: translateY(7px);
        }
        50% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
        100% {
            -webkit-transform: translate(0) rotate(-45deg);
            transform: translate(0) rotate(-45deg);
        }
    }
    @-webkit-keyframes closeMenu1 {
        0% {
            -webkit-transform: translate(0) rotate(45deg);
            transform: translate(0) rotate(45deg);
        }
        50% {
            -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
        }
        100% {
            -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
        }
    }
    @keyframes closeMenu1 {
        0% {
            -webkit-transform: translate(0) rotate(45deg);
            transform: translate(0) rotate(45deg);
        }
        50% {
            -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
        }
        100% {
            -webkit-transform: translateY(-7px);
            transform: translateY(-7px);
        }
    }
    @-webkit-keyframes closeMenu2 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes closeMenu2 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes closeMenu3 {
        0% {
            -webkit-transform: translate(0) rotate(-45deg);
            transform: translate(0) rotate(-45deg);
        }
        50% {
            -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
        }
        100% {
            -webkit-transform: translateY(7px);
            transform: translateY(7px);
        }
    }
    @keyframes closeMenu3 {
        0% {
            -webkit-transform: translate(0) rotate(-45deg);
            transform: translate(0) rotate(-45deg);
        }
        50% {
            -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
        }
        100% {
            -webkit-transform: translateY(7px);
            transform: translateY(7px);
        }
    }
/* -- FOOTER SP
--------------------------------------------- */
    .c-footer__logo {
        margin-bottom: 22px;
        width: 200px;
    }
    .c-footer__links {
        flex-direction: column;
    }
    .c-footer__link {
        margin-right: 0;
        margin-bottom: 25px;
        height: 14px;
        text-decoration: underline;
    }
}


/* チケット終了後 */
.btn-box-2 {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 0 auto 4em auto;
    transform: rotate(-2deg);
    opacity: 0;
    transition: .5s ease all;
}
.btn-box-2::before {
    content: "【販売終了】前売り券は完売いたしました。";
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 1;
    transform: translate(-50% , -50%) rotate(2deg);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #550001;
    width: 100%;
    font-family: "M PLUS Rounded 1c", sans-serif;    
}

.btn-box-2.active {
    opacity: 1;
}

#menu-ham .btn-box-2,
#contents .btn-box-2 {
    margin-bottom: 1.5em;
}

.btn-box-2 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-box-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(5%, 12%) rotate(3deg);
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url(../images/ticket_2-v2.webp) no-repeat center / contain;
}

#fix-btn.timer-visible {
    display: block;
}
#fix-btn {
    display: none;
}