@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%;}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html{font-size:62.5%;}
body{font-size:15px; font-size:1.5rem; font-family:"mizolet",'Noto Sans JP',system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; letter-spacing:0.05em; line-height:1.6; text-align:center; background:#fff; -webkit-text-size-adjust:100%; color:#040000; max-height: 100%; box-sizing:content-box; margin:0;}

img {width:100%; max-width:100%; height:auto;}
img[src$=".svg"] {width: 100%;}

/*Layout*/
a{color:#040000; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
a:hover{transition: 0.5s; -webkit-transition:0.5s;}
a.line{text-decoration:underline;}

br.pc{display:none;}
br.smp{display:block;}
@media only screen and (min-width:540px) {
br.smp{display:none;}
}
@media only screen and (min-width:740px) {
br.pc{display:block;}
}

.sml{padding-left:4px; font-size:0.8em;}

.box{max-width:800px; padding:10px 20px;}
@media only screen and (min-width:1010px) {
.box{padding:10px 0;}
}

body{border-top:4px solid #000;}
#content{border-top:8px solid #d580b2;}
header{padding-top:30px; padding-bottom:30px;}
header h1{width:80%; max-width:420px; margin:0 auto;}

@media only screen and (min-width:740px) {
header h1{max-width:600px;}
}

#lineup{display:flex; border-top:4px solid #000; border-bottom:4px solid #000;}
@media only screen and (min-width:740px) {
#lineup{display:flex; border-top:8px solid #000; border-bottom:8px solid #000;}
}
@media only screen and (min-width:1400px) {
#lineup{overflow:hidden;}
#lineup .artist{margin-top:-100px;}
}


#date{padding:20px; max-width:500px; margin:0 auto;}
@media only screen and (min-width:740px) {
#date{margin:30px auto; max-width:600px; padding:20px 0;}
}


#sec01{padding:30px 20px; background:#d580b2; border-top:4px solid #000; border-bottom:4px solid #000; text-align:left;}
#sec01 .box{max-width:800px; margin:0 auto;}
#sec01 h2{font-family: "fot-udkakugo-large-pr6n", sans-serif; font-weight: 700; font-style: normal; font-size:1.7rem; line-height:1.8;}
#sec01 p{margin-top:16px; font-size:1.5rem; line-height:1.5; line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict;}

@media only screen and (min-width:740px) {
#sec01 h2{text-align:center; font-size:1.9rem;}
#sec01 p{font-size:1.6rem; line-height:1.6;}
}


#gallery{padding:30px 0; padding:30px 3vw;  background: #f7f7f7;}
#gallery h3{margin-bottom:30px; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; font-size:3.4rem;}
#gallery h3::first-letter{color:#d580b2;}
#gallery p.right{max-width:1200px; margin:20px auto; text-align:right; letter-spacing:0; font-size:1.3rem;}
#gallery p a{text-decoration:underline;}
#gallery ul{max-width:1200px; margin:20px auto; display:flex; justify-content:flex-start; flex-wrap:wrap;}
#gallery ul li{max-width:250px; width: calc(33% - 8px); margin:4px;}
#gallery ul li{overflow:hidden;}
#gallery ul li img{object-fit:cover; aspect-ratio:800 / 533;}
#gallery ul li img.pt01{object-position: center -30px;}
#gallery ul li img.pt02{object-position: center -10px;}
#gallery ul li img.pt03{object-position: center -40px;}
@media only screen and (min-width:740px) {
#gallery ul{max-width:1200px; margin:20px auto;}
#gallery ul li{max-width:250px; width: calc(16.6% - 16px); margin:8px;}
}


#ticket{padding:30px 0}
#ticket h3{margin-bottom:30px; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; font-size:3.4rem;}
#ticket h3::first-letter{color:#d580b2;}
#ticket .type{font-size:1.6rem; margin-bottom:20px;}
#ticket .type span{font-size:1.3rem;}
#ticket ul.note{display:flex; flex-wrap:wrap; justify-content: center; font-size:1.4rem;}
#ticket ul.note li:before{content:"＊"; padding-right:2px;}

#ticket h4{margin:40px 0 15px; padding:10px 0; border-top:5px double #000; background:#d580b2; font-weight:400; font-size:1.8rem;}
#ticket .t-date{font-size:1.7rem;}
#ticket .t-date span{font-size:1.4rem;}

#ticket .btn a{position:relative; display:inline-block; margin:20px 10px 0; height:46px; line-height:44px; width:75%; max-width:360px; color:#fff; border-radius:50px; background:#2da08a; border-bottom: 5px solid #236256; font-size:1.8rem; }
#ticket .btn a:hover{border-bottom: 2px solid #236256;}
#ticket .btn .arrow{position:absolute; top:40%; right:16px; width:5px;}

#ticket .ticketendbox{margin-top:30px;}

@media only screen and (min-width:740px) {
#ticket h3{font-size:4rem;}
#ticket .type{font-size:1.7rem; margin-bottom:20px;}
#ticket .btn{margin-bottom:60px;}
#ticket ul.note{gap:16px;}
}

#goods{padding:30px 0; border-top:4px solid #000; margin-top:30px; background:url("../lib/goods-line.jpg") repeat-x top left #fff; background-size:contain;}
#goods h3{margin-bottom:30px; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; font-size:3.4rem;}
#goods h3::first-letter{color:#fff;}
#goods .goodsimage{max-width:940px; padding:0 20px; margin:0 auto;}
#goods .goodsimage p{margin-top:4px; text-align: left; font-size:1.4rem;}
@media only screen and (min-width:740px) {
#goods h3{font-size:4rem;}
}

footer{margin-top:30px; padding:30px 0; background:#995882;font-size:1.4rem; font-weight:400; text-align:center; color:#fff; font-family:'Noto Sans JP',sans-serif; border-top:4px solid #000;}
footer .contact{margin-bottom:15px; font-size:1.4rem; letter-spacing:0}
footer .copy{margin-top:30px; font-size:12px; font-size:1.2rem; color:#fff; letter-spacing:0;}


/*fadein*/
.fadeUpTrigger,.fadeTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity: 0;}
.fade{animation-name:fadeAnime; animation-duration:1.8s; animation-fill-mode:forwards; opacity:0;}
.fadeUp{animation-name:fadeUpAnime; animation-duration:.8s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
from {opacity: 0; transform: translateY(15px);}
to {opacity: 1; transform: translateY(0);} 
}
@keyframes fadeAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);} 
}

.fadeDown{animation-name:fadeDownAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeDownAnime{
from {opacity: 0; transform: translateY(-100px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeLeft{animation-name:fadeLeftAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{
from {opacity: 0; transform: translateX(-100px);}
to {opacity: 1; transform: translateX(0);}
}

.fadeRight{animation-name:fadeRightAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeRightAnime{
from {opacity: 0; transform: translateX(100px);}
to {opacity: 1; transform: translateX(0);}
}

/*TOP PAGE*/
#pagetop {
	position:fixed;
	bottom:20px;
	right:10px;
	font-size:1.3rem;
	font-weight:700;
	z-index:999;
}
#pagetop a {
	background: rgba(0, 0, 0, 0.70);
	text-decoration: none;
	color: #f8f8df;
	padding:10px 20px;
	text-align: center;
	display: block;
	border-radius: 3px;
}
#pagetop a:hover {
	text-decoration: none;
}