@charset "utf-8";

/*ALL*/
* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Orbitron', 'Hiragino UD Sans W3 JIS2004', "ヒラギノUD角ゴ W3", "Yu Gothic", YuGothic, sans-serif;
    margin: 0;
    letter-spacing: 0.06em
}

ul {
    list-style-type: none;
    padding-left: 0
}

br {
    display: none;
}

/*
    max-width: 940px;
    margin: 0 auto;
    padding: 0 30px;
*/
/*====Scroll*/

.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
    background-image: url(rayler.jpg);
}

.cd-scrolling-bg {
    min-height: 100%;
}

/*====TOP*/
#top {
    width: 100%;
    height: 1080px;
    background-image: url(top_text.png), url(top_pic.jpg);
    background-size: cover;
    background-position: center center;
    display: flex;
}

#grad {
    margin: auto auto 0;
    width: 100%;
    height: 300px;
    background: -moz-linear-gradient(bottom, rgb(0, 0, 0) 3%, rgba(255, 255, 255, 0));
    background: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 3%, rgba(255, 255, 255, 0));
    background: linear-gradient(to top, rgb(0, 0, 0) 3%, rgba(255, 255, 255, 0));
}

/*====TRACKLIST*/
#leadbox {
    padding: 0 0 100px 0;
    font-family: "Yu Gothic", YuGothic, sans-serif;
}

#lead {
    text-align: center;
    padding-bottom: 7px;
}

#lead2 {
    text-align: center;
    font-size: 20px;
}

#lead2 br {
    display: inherit !important
}

#trackbg {
    background-color: rgba(229, 30, 118, 0.9);
    color: rgb(255, 255, 255);
}

#track {
    max-width: 940px;
    margin: 0px auto;
    padding: 50px 30px;
}

#track_lo {
    text-align: center;
    font-size: 40px;
    margin: 0 0 50px
}

#tracklist {
    display: flex;
    justify-content: space-around;

}

.trackinfo {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 50px;
}

.tracknum {
    font-size: 18px;
    margin-right: 20px;
    margin-bottom: 5px
}

.trackgenre {
    font-size: 14px;
}

.tracktitle {
    font-size: 24px;
    margin-bottom: 5px;
}

.trackartist {
    font-size: 18px;
    font-style: italic;
}

.trackartistjp {
    font-size: 18px;
    font-style: italic;
    font-weight: 500
}

/*====INFO*/
#infobg {}

#info {
    max-width: 940px;
    margin: 0 auto;
    padding: 100px 30px 100px;
}

#youtube {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 30px;
}

#youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#soundcloud {
    margin-bottom: 70px
}

#infocontent {
    display: flex;
    justify-content: space-between;
}

#inforight {
    background-color: rgba(229, 30, 118, 0.74);
    color: rgb(255, 255, 255);
    margin-left: 30px;
    padding: 30px 30px 30px;
    height: 390px;
    width: 450px;
}

#infoleft img {
    height: 450px;
    width: 450px;
}

/*====INFO TEXT*/
#infosn {
    font-size: 12px;
    padding-left: 5px;
}

#infotitle {
    font-size: 50px;
    margin-bottom: 30px
}

.infotag {
    font-size: 14px;
    margin-bottom: 3px;
}

#infoplace1pc {
    font-size: 18px;
}

#infoplace2pc {
    font-size: 22px;
    margin-bottom: 20px;
}

#infoplace1sp {
    display: none;
}

#infoplace2sp {
    display: none;
}

#diverse {
    font-size: 16px;
    color: white;
    background-color: black;
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    text-decoration: none;
    margin-right: 10px;
}

#diverse:hover {
    background-color: rgb(38, 38, 38);
}

#bandcamp {
    font-size: 16px;
    color: white;
    background-color: #1da0c3;
    background-color: black;
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    text-decoration: none;
}

#bandcamp:hover {
    background-color: rgb(38, 38, 38);
}

#spec {
    font-size: 18px;
    margin-bottom: 20px;
}

#price {
    font-size: 20px;
    margin-bottom: 20px;
}

/*====LINK*/
#link {
    display: flex;
}

#link li a img {
    width: 40px;
    padding-right: 10px
}

/*====SHOP*/
#shopbg {
    padding: 0 0 100px;
}

#shopwid {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 30px;
    color: #ffffff;
}

#shop {
    padding: 50px;
    background-color: rgba(111, 198, 198, 0.87);
}

#shoptitle {
    font-size: 40px;
    margin-bottom: 50px;
    text-align: center;
}

#shsellnew,
#shsellold {
    font-weight: 600;
}

#shoplist {
    display: flex;
    justify-content: center;
}

#shopleft {
    background-color: rgba(72, 111, 199, 0.58);
    padding: 0 25px 30px;
}

#shopright {
    background-color: rgba(155, 72, 199, 0.58);
    padding: 0 25px 30px;
}

#shsellnew {
    font-size: 30px;
    padding: 20px 0;
}

#shsellold {
    font-size: 24px;
    padding: 23px 0;
}

.shcdsn {
    font-size: 10px;
    padding-left: 2px
}

.shcdname {
    font-size: 30px;
}

.shcdinfo {
    font-size: 14px;
    padding-bottom: 10px;
}

.shyen {
    font-size: 20px;
    padding-bottom: 5px;
}

.shspec {
    font-size: 15px;
    padding-bottom: 15px
}

.shjacket {
    display: block;
    width: 300px;
    height: 300px;
}

#ener {
    position: relative;
}

#more {
    text-decoration: none;
    color: white;
    background-color: rgba(171, 107, 204, 0.82);
    padding: 3px 10px 3px 5px;
    position: absolute;
    right: 0;
    bottom: 10px;
    font-size: 14px;
}

#more a:hover {
    color: #fff360;
}

/*＝＝CREDIT*/
#creditbg {
    background-color: rgba(229, 30, 118, 0.78);
    ;
    color: white
}

#credit {
    max-width: 940px;
    margin: 0 auto;
    padding: 50px 30px 50px;
}

#credittitle {
    text-align: center;
    font-size: 40px;
    margin-bottom: 50px;
}

#credittable {
    display: flex;
    justify-content: center;
}

#credittable td {
    padding-bottom: 20px;
    font-size: 17px
}

#credittable td div.role {
    padding-right: 20px;
}

#creditright {
    padding-left: 50px;
}

#credittable a {
    text-decoration: none;
    font-size: 18px;
    color: #ffffff
}

#credittable a:hover {
    color: #fff360;
}

/*====FOOTER*/
#footer {
    text-align: center
}

#record {
    margin: auto;
    background-color: rgba(229, 30, 118, 0.78);
    padding: 0px 0 15px;
}

#record img {
    width: 100px;
}

#copyright {
    font-size: 14px;
    padding: 15px 0 20px;
    color: white
}

/*=======タブレット*/
@media screen and (max-width: 1200px) {
    #top {
        height: 700px;
    }

    br {
        display: inline;
    }
}

@media screen and (max-width: 1024px) {
    #infoleft img {
        height: 350px;
        width: 350px;
    }

    #inforight {
        height: auto;
    }
}

/*================================*/
/*=======スマートフォン750px========*/
/*================================*/
@media screen and (max-width: 780px) {

    /* TOP   */
    br {
        display: inline;
    }

    .cd-fixed-bg.cd-bg-1 {
        background-image: url(rayler.jpg);
        background-size: cover
    }

    #top {
        height: 300px;
    }

    #grad {
        height: 50px;
    }

    /* TRACKLIST   */
    #lead img {
        height: 50px
    }

    #lead2 {
        font-size: 16px;
    }

    #tracklist {
        flex-direction: column;
    }

    .forbr {
        text-indent: -1.6em;
        padding-left: 1.6em;
    }

    #track {
        padding: 100px 30px 50px;
    }

    /*  INFOMATION  */
    #info {
        padding: 70px 30px 70px;
    }

    #infocontent {
        flex-direction: column;
    }

    #infoleft {
        display: none;
    }

    #inforight {
        margin-left: 0px;
        padding: 30px 15px 20px;
        height: auto;
        width: auto;
    }

    #infoplace1pc {
        display: none;
    }

    #infoplace2pc {
        display: none;
    }

    #infoplace1sp {
        font-size: 18px;
        display: block;
    }

    #infoplace2sp {
        font-size: 22px;
        margin-bottom: 20px;
        display: block;
    }

    .infotag {
        padding-left: 1em;
    }

    #infoplace1sp,
    #infoplace2sp,
    #spec,
    #price {
        padding-left: 1.3em;
    }

    #link li a img {
        padding-left: 1em;
        padding-right: 10px
    }

    /*  SHOP  */
    #shoplist {
        flex-direction: column;
    }

    #shop {
        padding: 20px 20px;
    }

    #shopleft {
        padding-bottom: 20px;
    }

    #shoptitle {
        font-size: 40px;
        margin: 30px;
        text-align: center;
    }

    .shjacket {
        display: block;
        max-width: 100%;
        margin: 0 auto;
        height: auto;
    }

    /*  CREDIT  */
    #credittable {
        display: inherit;
    }

    #creditright {
        padding-left: 0px;
    }

    .role {
        width: 100px;
    }

    #more {
        display: none;
    }

}

/*文字間隔とかいじったほうがかっこいいかも(letter-spacing)*/

/* 2021 01 04 subscription in*/
#subscription{
    margin: 0 auto 0;
    max-width: 600px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 5px 50px;
}

#subscription .box{
    padding:40px 20px;
    background: rgba(129, 196, 129, 0.85);
}

#subscription .box h3{
    color: white;
    font-size: 32px;
    padding-bottom: 20px;
}