@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:'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{opacity: 0.7; 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{background:rgb(119, 43, 77); color:#fff;}

h3{margin:0 auto; padding:40px 0 20px 0; width:90%; max-width:396px;}
@media only screen and (min-width:740px) {
}


header{position:relative; height:100vh; background:linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 30%),url("../lib/mv.jpg") center center no-repeat; background-size:cover;}
header h1{width:90%; max-width:700px; margin:0 auto; position:absolute; bottom:4vh; left:0; right:0; color:#fff; font-size:15px; font-size:1.5rem; font-weight:500; line-height:1.6; text-align:left;}
@media only screen and (min-width:740px) {
header{}
header h1{bottom:40px; text-align:center; font-size:18px; font-size:1.8rem;}
}

#release{margin:0 0 30px 0; padding:0 20px 30px 20px; text-align:left;}
#release .album{margin:20px 0 120px 0;}
#release .jacket{max-width:270px;}
#release .type{display:inline-block; margin:16px 0 8px 0; padding:2px 4px; font-size:12px; color:#344e3c; background:#fff; font-weight:500;}
#release h4{margin-bottom:16px; font-size:1.8rem; line-height:1.4;}
#release p{margin-bottom:30px;}
#release .btn a{display:inline-block; margin:16px 0; padding:8px 16px; border:1px solid #fff; color:#fff;}
#release .btn a:hover{background:rgba(0, 0, 0, 0.3);}
#release .songslist:before{content:"[";}
#release .songslist:after{content:"]";}
#release ol{margin-left:34px; list-style:decimal-leading-zero;}
#release .songs{margin-bottom:32px; font-size:1.4rem;}
@media only screen and (min-width:740px) {
#release .album{max-width:700px; padding:30px 0 30px 0; margin:0 auto;}
#release .discinfobox{display:flex; margin-bottom:30px;}
#release .jacket{width:270px; margin-right:40px;}
#release h4{font-size:2.4rem; margin-bottom:16px;}
#release .discinfo{flex:1;}
#release .type{margin:0 0 8px 0; font-size:1.5rem;}
}
@media only screen and (min-width:1100px) {
#release .album{max-width:1100px; padding:30px 0 30px 0; margin:0 auto;}
#release .songsbox{display:flex; gap:32px;}
#release .songsbox .songs{widht:50%; letter-spacing:0;}
}

#live{color:#fff; margin-bottom:40px;}
#live .liveclass{margin:32px auto 16px auto; color:#fff; font-size:1.8rem; font-weight:700;}
#live .livebox{display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-bottom:40px; padding: 0 20px;}
#live .livebox a{position:relative; display:block; width:100%; padding:8px 40px 8px 16px; color:#fff; border:1px solid #fff; text-align:left;}
#live .livebox a:hover{background:rgba(0, 0, 0, 0.3);}
#live .livebox h4{margin:0; padding:0; font-size:1.9rem;}
#live .livebox a img{position:absolute; top:45%; right:14px; width:8px;}
@media only screen and (min-width:360px) {
#live .livebox h4{font-size:2.4rem;}
}

footer{padding:30px 0; font-size:14px; font-size:1.4rem; font-weight:400; text-align:center; color:#f8f8df;}

footer .copy{margin-top:30px; font-size:12px; font-size:1.2rem; color:#f8f8df; letter-spacing:0; font-weight:100;}
footer a{color:#fff;}


/*fadein*/
.fadeUpTrigger,.fadeUpTrigger2,.fadeLeftTrigger,.fadeRightTrigger{opacity: 0;}
.fadeUp{animation-name:fadeUpAnime; animation-duration:2.5s; animation-fill-mode:forwards; opacity:0;}
.fadeUp2{animation-name:fadeUpAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
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);}
}
.fadeInMonoTrigger{filter: grayscale(100%);}
.fadeInMono{animation: fadeInMonoAnime 3s forwards; filter: grayscale(100%);}
@keyframes fadeInMonoAnime {
100% {-webkit-filter: grayscale(0%);  filter: grayscale(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;
}