@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none;}
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}
*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%;}

.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', sans-serif; letter-spacing:0.05em; line-height:1.6; text-align:center; background:#3f3c3c; -webkit-text-size-adjust:100%; color:#fff; max-height: 100%; box-sizing:content-box; margin:0;}
:root {--header: 60px; scroll-padding: var(--header);}

img {width:100%; max-width:100%; height:auto;}

a{color:#000; 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;}

h2{font-family: 'Kanit', sans-serif; font-weight: 600; font-size:30px; font-size: 3.0rem; text-align: center;}
@media only screen and (min-width:768px) {
h2{font-size: 42px;  font-size: 4.2rem; }
}

ol{font-weight:300; margin-left:20px;}

header{z-index: 999999;}
header{position:absolute; width:100%;}
header h1{position:relative; width:50px; margin:8px auto; z-index:999;}
header #menubox{position:absolute; top:12px; right:15px; background:transparent; z-index:99;}
header #menubox .menu{position:relative; display:block; width:25px; height:16px;}
header #menubox .menu__line{position:absolute; display:block; height:2px; background:#fff; -webkit-transition:transform:.3s; -moz-transition:transform:.3s; -o-transition:transform:.3s; transition:transform:.3s; width:100%;}
#musicindex header #menubox .menu__line{background:#222;}
header #menubox .menu__line--center{top:7px;}
header #menubox .menu__line--bottom{bottom:0;}
header #menubox.active{top:20px; background:none;}
header #menubox .menu.active{width:25px; height:18px;}
header #menubox .menu__line.active{background:#fff;}
#musicindex header #menubox .menu__line.active{background:#fff;}
header #menubox .menu__line--top.active{top: 7px; transform: rotate(45deg);}
header #menubox .menu__line--center.active{top: 8px; transform:scaleX(0); }
header #menubox .menu__line--bottom.active{bottom: 9px; transform: rotate(135deg);}
header nav{position:fixed; display:none; top:0; overflow-y:auto; overflow-x:hidden; width:100%; height:100%; z-index:98; font-size:15px; font-size:1.5rem; color:#fff; text-align:center;}
header nav:after{position:absolute; top:0; left:0; display:block; content:" ";animation-name:sideinAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0; background:rgba(63, 60, 60, 0.9); width:100%; height:100%; z-index:-1;}
@keyframes sideinAnime{from {opacity: 0; transform: translateX(100%);} to {opacity: 1; transform: translateX(0%);}}
header nav #navbox{padding:0; max-height:initial;}
header nav .nav{margin:25% 0 0 0;}
header nav .nav li{opacity: 0; margin-bottom:20px; font-family:'Kanit', sans-serif; font-size:17px; font-size:1.7rem; font-weight: 700;}
header nav .nav li a{color:#fff; display:block; width:100%;}
header nav .nav li.fade,header nav .icon li.fade {animation-name:fadeUpAnime; animation-duration:0.4s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{from {opacity: 0; transform: translateX(700px);} to {opacity: 1; transform: translateY(0);}}

header nav .icon{display:flex; margin-top:24px; gap:16px; justify-content:center;}
header nav .icon li{opacity: 0; margin-bottom:20px;}
header nav .icon li a{display:block; padding:8px; width:40px; background:#fff; border-radius:40px;}
header nav .icon li.instagram a{padding:7px;}
header nav .icon li.line a{padding:5px;}

header.fixed{position:fixed; width:100%; top: 0; left: 0; height:63px; z-index:999999; background:rgba(29, 29, 29, 0.8);}
header.fixed h1{max-width:250px; top:0px;}
header.fixed #menubox{position: absolute; right:15px; top: 10px; padding:10px; z-index:99;}
header.fixed nav #navbox{overflow-y:initial; height:auto;}

@media only screen and (min-width:600px) {
header h1{position:relative; width:65px;}
header #menubox{top:18px;}
}
@media only screen and (min-width:768px) {
header{width:100%; text-align:left; padding-top: 10px;}
header #menubox{display:none;}
header .box{position:relative; max-width:1200px; margin:0 auto;}
header nav{margin-top: 0; height:inherit; display: block; position:relative; width:100%;  background:none; text-align:center;}
header nav:after{background:none;}
header nav #navbox{display:flex; gap:0; align-items:center; justify-content:center;}
header nav .nav{margin:0; display:flex; gap:8px; align-items:center;}
header nav .nav li{opacity:1; flex-wrap: wrap; font-size:16px; font-size:1.6rem; line-height:1.4; font-weight:100;}
#musicindex header nav .nav li a{color:#222;}
header nav .icon{margin:0 0 0 16px;}
header nav .icon li{opacity:1;}
header nav .icon li a{width:30px; height:30px;}
header.fixed h1{width:45px; margin:0 0 0 10px; padding:0;}
header.fixed .box{display:flex; align-items:center;}
header.fixed nav{overflow:hidden;}
header.fixed nav:after{background:none;}
header.fixed nav .nav li,header.fixed nav .icon li{margin:0;}
}
@media only screen and (min-width:960px) {
header nav .nav{gap:24px;}
}

@media (orientation: landscape) and (min-width:960px){
header{position:absolute; background:none;}
header h1{position:absolute; top:0; left:25px; width:100px;}
header nav{position:absolute; display:inline-block; padding:16px 0; width:700px; top:25px; right:25px; background:rgba(63, 60, 60, 0.5); overflow:hidden;}
header nav:after{background:none;}
header nav .nav{gap:12px;}
header nav .nav li,header nav .icon li{margin:0;}
#musicindex header nav .nav li a{color:#fff;}
header nav .icon{margin-left:16px;}

header.fixed nav{top:0; padding:0;}
}



#breadcrumbs{margin:10% auto 0 auto; max-width:1050px; text-align:left; font-size:12px; font-size:1.2rem;}
#breadcrumbs li{display:inline-block;}
#breadcrumbs li:after{content:"»"; padding:0 4px;}
#breadcrumbs li:last-child:after{content:""}

@media only screen and (min-width:400px) {
#breadcrumbs{margin:30px auto 0 auto;}
}

@media only screen and (min-width:800px) {
#breadcrumbs{margin:10px auto 0 auto;}
}
@media only screen and (min-width:900px) {
#breadcrumbs,.breadcrumbs{font-size:13px; font-size:1.3rem;}
}

footer{text-align: center; padding:60px 0 30px 0; font-family:'Kanit', sans-serif; font-size:13px; font-weight:300;}
footer .icon{display:flex; margin:24px auto 20px; gap:16px; justify-content:center;}
footer .icon li{margin-bottom:20px;}
footer .icon li a{display:block; padding:8px; width:40px; background:#fff; border-radius:40px;}
footer .icon li.line a{padding:5px;}
@media only screen and (min-width:600px) {

}
/*TOP PAGE*/
#pagetop {position:fixed; bottom:20px; right:10px; width:30px; height:30px;}
#pagetop a { background: #666; text-decoration: none; text-align: center; display: block; border-radius: 40px;}
#pagetop a:hover {background: #999;}


.fadeInTrigger,.fadeIn2Trigger{opacity: 0;}
.fadeIn{animation-name:fadeInAnime; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
.fadeIn2{animation-name:fadeInAnime2; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeInAnime{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInAnime2{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.mask{position: relative; display:inline-block; padding:2px 32px; color: transparent;}
@media (orientation: landscape) and (min-width:960px){
.mask{padding:2px 32px 2px 0;}
}
.mask::before{content: ""; position: absolute; z-index: 1; top: 0%; right: 100%; bottom: 0%; left: 0%;background : #222;}
.mask.maskline{animation-name: maskin; animation-duration: 0s; animation-delay: 0.5s; animation-fill-mode: forwards;}
.mask.maskline::before{animation-name: maskout; animation-duration: 1s; animation-fill-mode: forwards;}
@keyframes maskin {
  100%{
    color: inherit;
  }
}
@keyframes maskout {
  50%{
    left: 0%; right: 0%;
  }
  100%{
    left: 100%; right: 0%;
  }
}