@charset "utf-8";

:root {
    --color-white: #fff;
    --color-black: #222;
    --color-gray: #999;
    --color-red: #E50707;
    --color-blue: #0E82E1;
    --color-yellow: #F7C011;
    --color-green: #0DB565;
    --color-red-star: #FFBBBB;
    --color-blue-star: #C4E3F8;
    --color-yellow-star: #FFF1C3;
    --color-green-star: #C6F3DE;

    --font-common: "M PLUS Rounded 1c", sans-serif;
    --font-title: "bello-caps", sans-serif;
}


/*===================================================
  anim
====================================================*/
.loader {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-wrap: nowrap;
    transition: .5s ease-out;
}
.loader span {
    width: 25%;
    height: 100%;
    transition: .5s ease-out;
}
.loader span:nth-child(1) {background: var(--color-red);}
.loader span:nth-child(2) {background: var(--color-blue);}
.loader span:nth-child(3) {background: var(--color-yellow);}
.loader span:nth-child(4) {background: var(--color-green);}

.loaded .loader span:nth-child(1) {transition-delay: 0.5s;}
.loaded .loader span:nth-child(2) {transition-delay: 0.75s;}
.loaded .loader span:nth-child(3) {transition-delay: 1s;}
.loaded .loader span:nth-child(4) {transition-delay: 1.25s;}
.loaded .loader {transition-delay: 1.5s;}

.bgBox .bg02 .mainTit img {
    opacity: 0;
    transition: .5s ease-out;
    transform: scale(0.5) rotate(180deg);
}
.loaded .bgBox .bg02 .mainTit img {
    animation: fadeSplash 0.3s ease 1.5s 1 forwards;
    -webkit-animation: fadeSplash 0.3s ease 1.5s 1 forwards;
    transition-delay: 1.5s;
}
@keyframes fadeSplash {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}	
}

.mainWrap .anim.fadeX,
.mainWrap .anim.fadeY {
    opacity: 0;
    transition: all .5s ease-out;
}
.mainWrap .anim.fadeX {
    transform: translateX(20px);
}
.mainWrap .anim.fadeY {
    transform: translateY(20px);
}
.mainWrap .anim.fadeX.on,
.mainWrap .anim.fadeY.on {
    opacity: 1;
}
.mainWrap .anim.fadeX.on {
    transform: translateX(0px);
}
.mainWrap .anim.fadeY.on {
    transform: translateY(0px);
}

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

    .loaded .loader,
    .loaded .loader span {
        transform: translateY(-100%);
    }

}

@media screen and (max-width: 960px){

    .loader {
        flex-direction: column;
    }
    .loader span {
        width: 100%;
        height: 25%;
    }

    .loaded .loader,
    .loaded .loader span {
        transform: translateX(-100%);
    }

}



/*===================================================
    bgBox
====================================================*/
.bgBox {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    min-height: 600px;
    transform: translate3d(0, 0, -1px);
    pointer-events: none;
    overflow: hidden;
    background-color: var(--color-white);
    box-sizing: border-box;
}
.bgBox .bg {
    position: absolute;
    inset: 0;
}
.bgBox .bg01 {
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
}
.bgBox .bg01 span {
    width: 25%;
    height: 100%;
}
.bgBox .bg01 span:nth-child(1) {background: var(--color-red);}
.bgBox .bg01 span:nth-child(2) {background: var(--color-blue);}
.bgBox .bg01 span:nth-child(3) {background: var(--color-yellow);}
.bgBox .bg01 span:nth-child(4) {background: var(--color-green);}
.bgBox .bg02 {
    z-index: 2;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: var(--color-white);
    border-radius: 20px;
    margin: auto;
    overflow: hidden;
}
.bgBox .bg02 .slideBox {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: url(/static/fcopen/fanplakit/artist/Tani_Yuuki_zS4VdQwK/feature/fcTour2026/image/ph_bgItem_1e2t1N0w.png);
    background-size: 45px;
    background-repeat: repeat;
    opacity: 0.05;
    animation: bgFlow 15s linear infinite;
}
@keyframes bgFlow {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 90px 0px;
    }
}
.bgBox .bg02 .starBox {
    position: absolute;
    z-index: 2;
    inset: 0;
}
.bgBox .bg02 .starBox svg {
    position: absolute;
    width: 40%;
    max-width: 700px;
    aspect-ratio: 1000 / 957;
}
.bgBox .bg02 .starBox svg:nth-child(1) {
    color: var(--color-yellow-star);
    top: 40%;
    left: 10%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.bgBox .bg02 .starBox svg:nth-child(2) {
    color: var(--color-red-star);
    top: 5%;
    left: 55%;
    transform: translate(-50%, -50%) rotate(20deg);
}
.bgBox .bg02 .starBox svg:nth-child(3) {
    color: var(--color-green-star);
    bottom: 5%;
    left: 45%;
    transform: translate(-50%, 50%) rotate(60deg);
}
.bgBox .bg02 .starBox svg:nth-child(4) {
    color: var(--color-blue-star);
    bottom: 40%;
    right: -32%;
    transform: translate(-50%, 50%) rotate(5deg);
}
.bgBox .bg02 .mainTit {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    max-width: 1200px;
}

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

    .bgBox .bg02 .starBox {
        max-width: 1920px;
        margin: auto;
    }

}

@media screen and (max-width: 960px){

	.bgBox {
	    height: 100svh;
        min-height: 450px;
	}
	.bgBox .bg {}
    .bgBox .bg.bg01 {
        flex-direction: column;
    }
    .bgBox .bg01 span {
        width: 100%;
        height: 25%;
    }
    .bgBox .bg01 span:nth-child(1) {}
    .bgBox .bg01 span:nth-child(2) {}
    .bgBox .bg01 span:nth-child(3) {}
    .bgBox .bg01 span:nth-child(4) {}
    .bgBox .bg02 {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        border-radius: 10px;
    }
    .bgBox .bg02 .slideBox {
        background-size: 30px;
        animation: bgFlow 10s linear infinite;
    }
    @keyframes bgFlow {
        from {
            background-position: 0 0;
        }
        to {
            background-position: 60px 0px;
        }
    }
    .bgBox .bg02 .starBox {}
    .bgBox .bg02 .starBox svg {
        width: 65%;
    }
    .bgBox .bg02 .starBox svg:nth-child(1) {
        color: var(--color-red-star);
        top: 23%;
        left: 13%;
    }
    .bgBox .bg02 .starBox svg:nth-child(2) {
        color: var(--color-yellow-star);
        top: 6%;
        right: 20%;
        left: initial;
        transform: translate(50%, -50%) rotate(20deg);
    }
    .bgBox .bg02 .starBox svg:nth-child(3) {
        color: var(--color-blue-star);
        bottom: 6%;
        left: 17%;
    }
    .bgBox .bg02 .starBox svg:nth-child(4) {
        color: var(--color-green-star);
        bottom: 25%;
        right: -54%;
    }
    .bgBox .bg02 .mainTit {
        width: 85%;
    }

}



/*===================================================
    nav
====================================================*/
@media screen and (min-width: 961px){

    .navigation {
        display: none;
    }

}

@media screen and (max-width: 960px){

    .hamBtn {
        display: block;
        position: fixed;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        transition: all .3s ease;
        cursor: pointer;
        z-index: 9997;
        background: var(--color-red);
        border: 15px solid var(--color-red);
        padding: 15px;
        border-radius: 0 0 0 10px;
    }
    .hamBtn span {
        display: block;
        position: absolute;
        right: 0;
        width: 100%;
        height: 3px;
        border-radius: 100vmax;
        background: var(--color-white);
        transition: all .3s ease;
    }
    .hamBtn :nth-of-type(1) {
        top: 25%;
    }
    .hamBtn :nth-of-type(2) {
        bottom: 25%;
    }
    .hamBtn.open span {}
    .hamBtn.open span:nth-of-type(1) {
        transform: translateY(-50%) rotate(-45deg);
        top: 50%;
    }
    .hamBtn.open span:nth-of-type(2) {
        transform: translateY(50%) rotate(45deg);
        bottom: 50%;
    }

    .navigation {
        opacity: 0;
        pointer-events: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9996;
        position: fixed;
        transition: all 0.5s ease-out;
    }
    .navigation.active {
        transition: opacity 0.5s ease;
        pointer-events:auto;
        opacity:1;
    }

    .navigation .headerNavBox {
        background: var(--color-white);
        margin: 0 auto;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        transition: all 0.5s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }
    .navigation .heroNavLogo {
        width: 60%;
        max-width: 250px;
        margin: 0px 0 40px;
    }
    .navigation .headerNav li {
        position: relative;
        margin: 0 0 15px;
        padding: 0;
        text-align: center;
    }
    .navigation .headerNav li:last-child {
        margin: 0;
    }
    .navigation .headerNav li a {
        font-family: var(--font-title);
        color: var(--color-white);
        font-size: 32px;
        text-decoration: none;
        line-height: 1;
        letter-spacing: 0.03em;
        display: block;
        padding: 5px 20px;
        border-radius: 100vmax;
    }
    .navigation .headerNav li:nth-child(1) a {background-color: var(--color-red);}
    .navigation .headerNav li:nth-child(2) a {background-color: var(--color-blue);}
    .navigation .headerNav li:nth-child(3) a {background-color: var(--color-yellow);}

}



/*===================================================
	ALL
====================================================*/
html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-green);
}

.mainWrap {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    font-family: var(--font-common);
    font-size: 16px;
    line-height: 1.5;
}
.mainWrap img {
    display: block;
}

.container {
    position: relative;
    z-index: 2;
}

section {
    position: relative;
    padding: 120px 0 200px;
    border-radius: 80px 80px 0 0;
}
section:not(#schedule) {
    margin-top: -80px;
}
section#schedule {background: var(--color-red);}
section#ticket {background: var(--color-blue);}
section#goods {background: var(--color-yellow);}
section#contact {background: var(--color-green); padding: 120px 0;}

section h3 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1;
}
section h3 span {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 96px;
    text-align: center;
    letter-spacing: 0.03em;
    background: var(--color-white);
    padding: 10px 40px;
    border-radius: 20px 20px 0 0;
}
section#schedule h3 span {color: var(--color-red);}
section#ticket h3 span {color: var(--color-blue);}
section#goods h3 span {color: var(--color-yellow);}

section .inBox {
    position: relative;
    width: 90%;
    max-width: 1200px;
    padding: 40px;
    background-color: var(--color-white);
    margin: -1px auto 0;
    border-radius: 0 20px 20px 20px;
}
section#schedule .inBox {color: var(--color-red);}
section#ticket .inBox {color: var(--color-blue);}
section#goods .inBox {color: var(--color-yellow);}

.mainWrap .btn {}
.mainWrap .btn a {
    text-align: center;
    background-color: var(--color-red);
    border: 1px solid var(--color-red);
    color: var(--color-white);
    width: 100%;
    max-width: 350px;
    text-decoration: none;
    border-radius: 100vmax;
    padding: 20px;
    display: block;
    margin: 0px auto;
    font-weight: bold;
}

.mainWrap .soon {
    text-align: center;
    border: 1px solid;
    border-radius: 20px;
    padding: 80px 40px;
    font-weight: bold;
    font-size: 24px;
}

@media screen and (min-width:961px) {
    
    .sp {
        display: none;
    }

    a, img, i {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .mainWrap .btn a:hover {
        opacity: 0.7;
    }

}

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

    html {}

    .mainWrap {}

    section {
        padding: 80px 0 120px;
        border-radius: 40px 40px 0 0;
    }
    section:not(#schedule) {
        margin-top: -40px;
    }
    section#contact {
        padding: 80px 0;
    }

    section h3 {}
    section h3 span {
        font-size: 42px;
        padding: 10px 20px;
        border-radius: 10px 10px 0 0;
    }

    section .inBox {
        padding: 20px;
        border-radius: 0 10px 10px 10px;
    }

    .mainWrap .btn {}
    .mainWrap .btn a {
        padding: 15px;
        font-size: 14px;
        width: 90%;
    }

    .mainWrap .soon {
        padding: 40px 20px;
        font-size: 18px;
        border-radius: 5px;
    }

}



/*===================================================
    heroView
====================================================*/
#heroView {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    margin: 0 auto 100px;
}

#heroView .navList {
    position: fixed;
    z-index: 999;
    top: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 10px;
}
#heroView .navList li {}
#heroView .navList li a {
    display: block;
    font-family: var(--font-title);
    font-size: 32px;
    line-height: 1;
    padding: 5px 20px;
    border-radius: 100vmax;
    border: 1px solid;
}
#heroView .navList li:nth-child(1) a {background: var(--color-red);}
#heroView .navList li:nth-child(2) a {background: var(--color-blue);}
#heroView .navList li:nth-child(3) a {background: var(--color-yellow);}

#heroView .scrollBox {
    position: fixed;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    inset: 0;
    pointer-events: none;
}
#heroView .scrollBox .scrollArrow {
    position: absolute;
    z-index: 1;
	width: 2px;
    height: 60px;
    left: 40px;
    bottom:40px;
    background: var(--color-black);
    animation: scrollArrow 3s cubic-bezier(.19,1,.22,1) 0.5s infinite;
}
@keyframes scrollArrow {
    0% {clip-path: inset(0 0 100% 0);}
    25% {clip-path: inset(0 0 0 0);}
    75% {clip-path: inset(0 0 0 0);}
    100% {clip-path: inset(100% 0 0 0);}
}

#heroView .snsWrap {
    position: fixed;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    inset: 0;
}
#heroView .snsWrap .menuList {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}
#heroView .snsWrap .menuList li {}
#heroView .snsWrap .menuList li a {
    background: var(--color-green);
    font-size: 18px;
    width: 40px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100vmax;
}
#heroView .snsWrap .menuList li a i {}

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

    #heroView .navList li a:hover,
	#heroView .snsWrap .menuList li a:hover {
	    opacity: 0.7;
	}

}

@media screen and (max-width: 960px) {

	#heroView {
        height: 100svh;
	    min-height: 450px;
	    margin: 0 auto 80px;
	}

    #heroView .navList {
        display: none;
    }

    #heroView .scrollBox {
        height: 100svh;
        min-height: 450px;
    }
    #heroView .scrollBox .scrollArrow {
        left: 30px;
        bottom: 30px;
    }

    #heroView .snsWrap {
        height: 100svh;
        min-height: 450px;
	}
    #heroView .snsWrap .menuList {
        bottom: 30px;
        right: 30px;
        gap: 10px;
    }
    #heroView .snsWrap .menuList li a {
        font-size: 16px;
        width: 35px;
    }

}



/*===================================================
    schedule
====================================================*/
#schedule {}
#schedule .inBox {}

#schedule .tourTit {
    background: var(--color-red);
    color: var(--color-white);
    display: inline-block;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 5px;
    margin: 0 0 40px;
    font-size: 20px;
}

#schedule .tourDateBox .tourDateList.listHead {
    padding: 0 0 10px;
}
#schedule .tourDateBox .tourDateList.listHead li {
    justify-content: center;
    font-size: 70%;
    font-weight: 600;
}
#schedule  .tourDateBox .tourDateList.listHead li:after {
    display: none;
}
#schedule  .tourDateBox .listHead .scheduleInfo {
    justify-content: center!important;
    font-size: 100%;
}

#schedule  .tourDateBox .tourDateList {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--color-red);
    padding: 0 0 15px;
    margin: 0 0 15px;
    position: relative;
}
#schedule  .tourDateBox .tourDateList:last-child {
    margin: 0;
}
#schedule  .tourDateBox .tourDateList li {
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90%;
    line-height: 1.5em;
}
#schedule  .tourDateBox .tourDateList li:after{
    content: "";
    position: absolute;
    background: var(--color-red);
    top: 5%;
    right: 0;
    width: 1px;
    height: 90%;
} 
#schedule  .tourDateBox .tourDateList .scheduleDate {
    width: 20%;
    position: relative;
}
#schedule  .tourDateBox .tourDateList .scheduleDate .day {
    font-size: 150%;
    padding: 0 5px 0 0;
    font-weight: bold;
}
#schedule  .tourDateBox .tourDateList .scheduleDate .week {
    width: 24px;
    display: inline-block;
}
#schedule  .tourDateBox .tourDateList .scheduleDate .week.sat {
    color: var(--color-red);
}
#schedule  .tourDateBox .tourDateList .scheduleDate .week.sun {
    color: var(--color-red);
}
#schedule  .tourDateBox .tourDateList .scheduleArea {
    width: 10%;
}
#schedule  .tourDateBox .tourDateList .scheduleVenue {
    width: 27%;
    text-align: center;
}
#schedule  .tourDateBox .tourDateList .scheduleTime {
    width: 16%;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo {
    width: 27%;
    justify-content: left;
    font-size: 70%;
    padding: 0 0 0 20px;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo:after {
	display: none;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner i {
	padding: 0 3px 0 0;
	display: inline-block;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt span {
    display: block;
    padding: 2px 0 0;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt .phone,
#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt .web {
	text-decoration: underline;
}
#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt span .webInquiry {
	border-bottom: 1px solid;
}

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

	#schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt .phone a:hover,
    #schedule  .tourDateBox .tourDateList .scheduleInfo .scheduleInner .txt .web a:hover {
	    opacity: 0.7;
	}
	
}

@media screen and (max-width: 960px){

    #schedule {}
    #schedule .inBox {}

    #schedule .tourTit {
        font-size: 16px;
        padding: 5px 15px;
        margin: 0 0 20px;
    }

    #schedule .tourDateBox .tourDateList.listHead {
        padding: 0;
    }
	#schedule .tourDateBox .tourDateList.listHead li {
	    display: none;
	}

	#schedule  .tourDateBox .tourDateList {
	    display: block;
	    padding: 0;
        margin: 0 0 20px;
	}
	#schedule  .tourDateBox .tourDateList li {
	    padding: 0;
	    display: block;
	    font-size: 100%;
	}
	#schedule  .tourDateBox .tourDateList li:after{
		display: none;
	} 
	#schedule  .tourDateBox .tourDateList .scheduleDate {
	    width: 100%;
	}
    #schedule  .tourDateBox .tourDateList .scheduleDate br.sp {
        margin: 0;
    }
	#schedule  .tourDateBox .tourDateList .scheduleDate .day {
        font-weight: bold;
	}
	#schedule  .tourDateBox .tourDateList .scheduleDate .sp {
        padding: 0px 5px;
        background: var(--color-red);
        color: var(--color-white);
        margin: 0px 0 0px 10px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 3px;
	}
	#schedule  .tourDateBox .tourDateList .scheduleArea {
		display: none;
	}
	#schedule  .tourDateBox .tourDateList .scheduleVenue {
        width: 100%;
        text-align: left;
        font-size: 18px;
        margin: 0 0 10px;
        font-weight: bold;
	}
	#schedule  .tourDateBox .tourDateList .scheduleTime {
	    width: 100%;
	    margin: 0 0 10px;
	}
	#schedule  .tourDateBox .tourDateList .scheduleTime .subTxt {
	    font-size: 70%;
	    line-height: 1;
        width: 100%;
	}
	#schedule  .tourDateBox .tourDateList .scheduleInfo {
	    width: 100%;
	    padding: 0;
	    margin: 0 0 20px;
	}

}



/*===================================================
    ticket
====================================================*/
#ticket {}
#ticket h3
#ticket .inBox {}

#ticket .inBox .priceBox {
    margin: 0 0 40px;
}
#ticket .inBox .priceBox .ticketPrice {
    margin: 0 0 20px;
    padding: 60px 40px;
    border: 1px solid;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 10px;
}
#ticket .inBox .priceBox .ticketPrice .yen {
    font-size: 16px;
    padding: 0 5px 0 0;
}
#ticket .inBox .priceBox .noteList {}
#ticket .inBox .priceBox .noteList li {
    font-size: 14px;
    text-indent: -1em;
    padding: 0 0 0 1em;
    margin: 0 0 5px;
}
#ticket .inBox .priceBox .noteList li:last-child {
    margin: 0;
}

#ticket .accordWrap {
    margin: 0 auto 40px;
}
#ticket .accordWrap .op_accord {
	margin: 0 0 10px;
}
#ticket .accordWrap .op_accord:last-child {
	margin: 0;
}
#ticket .accordWrap .op_accord .accordionTit {
    background: var(--color-blue);
    color: var(--color-white);
    padding: 30px 65px 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    border-radius: 10px;
}
#ticket .accordWrap .op_accord .accordionTit.open {
    border-radius: 10px 10px 0 0;
}
#ticket .accordWrap .op_accord .accordionTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
#ticket .accordWrap .op_accord .accordionTit.open span {
    transform: translateY(-50%);
}
#ticket .accordWrap .op_accord .accordionTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
}
#ticket .accordWrap .op_accord .accordionDetail {
    display: none;
    padding: 40px;
    border: 1px solid var(--color-blue);
    border-top: none;
    border-radius: 0 0 10px 10px;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoWrap {}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox {
    border-bottom: 1px solid var(--color-blue);
    padding: 0 0 20px;
    margin: 0 0 25px;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox:first-child {
    border-top: 1px solid var(--color-blue);
    padding: 25px 0 20px;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox:last-of-type {
    margin: 0 0 40px;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox .tit {
    padding: 3px 15px;
    background: var(--color-blue);
    display: inline-block;
    color: var(--color-white);
    margin: 0 0 10px;
    border-radius: 5px;
    font-weight: bold;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox .txt {}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox .txt .note {
    text-indent: -1em;
    padding: 0 0 0 1em;
    display: block;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox p {
    margin-bottom: 5px;
}
#ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox p:last-child {
    margin-bottom: 0;
}

#ticket .accordWrap .op_accord .accordionDetail .btn a {}
#ticket .accordWrap .op_accord .accordionDetail .btn.grayBtn a {
    pointer-events: none;
    color: var(--color-white);
    background-color: var(--color-gray);
    border: 1px solid var(--color-gray);
}

#ticket .btnBox {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
}
#ticket .btnBox .btn {
    width: 90%;
    max-width: 350px;
}
#ticket .btnBox .btn a {
    font-size: 14px;
    max-width: initial;
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    padding: 15px;
}

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

@media screen and (max-width: 960px) {

    #ticket {}
    #ticket h3
    #ticket .inBox {}

    #ticket .inBox .priceBox {
        margin: 0 0 20px;
    }
    #ticket .inBox .priceBox .ticketPrice {
        padding: 30px 20px;
        font-size: 20px;
        margin: 0 0 10px;
        border-radius: 5px;
    }
    #ticket .inBox .priceBox .ticketPrice .yen {}
    #ticket .inBox .priceBox .ticketPrice .tax {}
    #ticket .inBox .priceBox .noteList {}
    #ticket .inBox .priceBox .noteList li {}
    #ticket .inBox .priceBox .noteList li:last-child {}

    #ticket .accordWrap {
        margin-bottom: 20px;
    }
    #ticket .accordWrap .op_accord {}
    #ticket .accordWrap .op_accord:last-child {}
    #ticket .accordWrap .op_accord .accordionTit {
        padding: 20px 45px 20px 20px;
        font-size: 16px;
        border-radius: 5px;
    }
    #ticket .accordWrap .op_accord .accordionTit.open {
        border-radius: 5px 5px 0 0;
    }
    #ticket .accordWrap .op_accord .accordionTit span {
        right: 20px;
        width: 12px;
        height: 12px;
    }
    #ticket .accordWrap .op_accord .accordionTit.open span {}
    #ticket .inBox .op_ticket .ticketTit span:before,
    #ticket .inBox .op_ticket .ticketTit span:after {
        width: 12px;
    }
    #ticket .accordWrap .op_accord .accordionDetail {
        border-radius: 0 0 5px 5px;
        padding: 20px;
    }
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoWrap {}
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox {
        padding: 0 0 15px;
        margin: 0 0 20px;
        font-size: 14px;
    }
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox:first-child {
        padding: 20px 0 15px;
    }
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox:last-of-type {
        margin: 0 0 20px;
    }
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox .tit {
        padding: 3px 10px;
        margin-bottom: 5px;
    }
    #ticket .accordWrap .op_accord .accordionDetail .ticketInfoBox .txt {}

    #ticket .accordWrap .op_accord .accordionDetail .btn a {
        width: 90%;
    }
    #ticket .accordWrap .op_accord .accordionDetail .btn.grayBtn a {}
    #ticket .accordWrap .op_accord .accordionDetail .btnNote {
        font-size: 12px;
        padding: 10px 0 0;
    }

    #ticket .btnBox {
        gap: 15px;
    }
    #ticket .btnBox .btn {}
    #ticket .btnBox .btn:last-child {}
    #ticket .btnBox .btn a {
        padding: 10px;
        font-size: 12px;
    }

}



/*===================================================
    goods
====================================================*/
#goods {}
#goods .inBox {}

#goods .inBox .lineUp {
    margin: 0 auto 40px;
}
#goods .inBox .btn {}
#goods .inBox .btn a {}

@media screen and (min-width: 961px) {}
        
@media screen and (max-width: 960px) {

    #goods {}
    #goods .copyright {}

    #goods .inBox .lineUp {}
    #goods .inBox .btn {}
    #goods .inBox .btn a {}

}



/*===================================================
    contact
====================================================*/
#contact {}

#contact .copy {
    text-align: center;
    margin-bottom: 20px;
}
#contact .btn {}
#contact .btn a {}

@media screen and (min-width: 961px) {}
        
@media screen and (max-width: 960px) {

    #contact {}

    #contact .copy {
        font-size: 14px;
    }
    #contact .btn {}
    #contact .btn a {
        width: 90%;
        max-width: 300px;
    }

}



/*===================================================
  OP:ACCORDION
====================================================*/
.op_accord .accordionList {}
.op_accord .accordionList .accordionTit{
    background: var(--black); 
    color: var(--white);
    padding: 30px 65px 30px 40px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
}
.op_accord .accordionList .accordionTit span {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 15px;
    height: 15px;
    transform: rotate(180deg) translateY(50%);
    transition: 0.3s ease;
}
.op_accord .accordionList .accordionTit.open span {
    transform: translateY(-50%);
}
.op_accord .accordionList .accordionTit span:before {
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(-45deg);
}
.op_accord .accordionList .accordionDetail{
    display: none;
    padding: 40px;
    border: 1px solid var(--black);
    border-top: none;
}

@media screen and (max-width:960px) {

    .op_accord .accordionList {}
    .op_accord .accordionList .accordionTit{
        padding: 20px 45px 20px 20px;
        font-size: 16px;
    }
    .op_accord .accordionList .accordionTit span {
        right: 20px;
        width: 12px;
        height: 12px;
    }
    .op_accord .accordionList .accordionDetail{
        padding: 20px;
    }

}