@charset "UTF-8";

/* ===BASIC=== */
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   color: #333;
   background-color: transparent;
   overflow-x: hidden;
   overflow-y: scroll;
   font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
}

a {
   text-decoration: none;
}

a:hover {
   color: #66cccc;
}

img {
   border: none;
   vertical-align: bottom;
}

strong{
   color: #ff0000;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block;
}

header {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   background-color: #003366
}

nav {
   width: 84%;
   margin: 0 auto;
   padding: 0;
   box-sizing: border-box;
}

@media all and (max-width: 568px) {
    nav {
	width: 92%;
    }
}

@media all and (min-width: 1500px) {
    nav {
	width: 1024px;
    }
}

main {
   width: 84%;
   margin: 0 auto;
   padding: 20px 0;
   box-sizing: border-box;
}

@media all and (max-width: 568px) {
    main {
	width: 92%;
    }
}

@media all and (min-width: 1500px) {
    main {
	width: 1024px;
    }
}

footer {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   padding: 0;
   background-color:#003366;
}

span.br:before {
   content: "\A";
   white-space: pre;
}

/* ===PRELISTEN=== */
.prelisten_img{
   margin: 1em auto 0;
   width: 100%;
   height: auto;
}

.prelisten_img img{
   display: block;
   margin: 0 auto;
   padding: 0;
   border: none;
   width: 100%;
   height: auto;
}

.prelisten_img .video{
   margin: 0 auto 0;
   position: relative;
   padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
   height: 0;
   overflow: hidden;
}

.prelisten_img .video iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* === HEADER === */
header a.header {
   margin: 0 auto;
   padding: 0;
   width: 84%;
}

@media all and (max-width: 568px) {
    header a.header {
	width: 92%;
    }
}

header a.header img {
   border: none;
   display: block;
   margin: 0 auto;
   padding: 30px 0 10px;
   width: 6%;
   height: auto;
}

@media all and (max-width: 414px) {
    header a.header img {
	width: 14%;
	height: auto;
    }
}

@media all and (min-width: 415px) and (max-width: 768px) {
    header a.header img {
	width: 8%;
	height: auto;
    }
}

@media all and (min-width: 1500px) {
    header a.header img {
	width: 120px;
	height: auto;
    }
}

header a.header h1 {
   margin: 0;
   padding-bottom: 20px;
   text-align: center;
   font-size: 12px;
   font-weight: normal;
   color: #fff;
}

/* === NAV === */
nav ul {
   margin: 0 auto;
   padding: 0;
   width: 100%;
}

nav ul li {
   display: inline-block;
   width: 19.2%;
   margin: 0;
   padding: 0;
   text-align: center;
   list-style-type: none;
}

nav ul li a {
   display: block;
   width: 100%;
   font-size: 15px;
   line-height: 30px;
   margin: 0;
   padding: 0;
   color:#66cccc;
}

#index nav ul li#index a,
#demo nav ul li#demo a,
#biography nav ul li#biography a,
#goods nav ul li#goods a,
#contact nav ul li#contact a,
nav ul li a:hover{
   color: #fff;
}

@media all and (max-width: 666px) {
    nav ul li {
       display: block;
       width: 100%;
       margin: 0;
       padding: 0;
       text-align: left;
       list-style-type: none;
       border-bottom: 1px solid #66cccc;
    }
    
     nav ul li:last-child {
       border: none;
    }

    nav ul li a {
       display: block;
       width: 100%;
       margin: 0;
       padding: 0;
       color: #66cccc;
       text-decoration: none;
       line-height: 3em;
    }
}

@media all and (min-width: 667px) and (max-width: 768px) {
    nav ul li {
       display: inline-block;
       width: 19%;
       margin: 0;
       padding: 0;
       text-align: center;
       list-style-type: none;
    }
    
    nav ul li a {
       display: block;
       width: 100%;
       font-size: 13px;
       line-height: 26px;
       margin: 0;
       padding: 0;
       color: #66cccc;
    }
}


/* === MAIN TEXT-BASIC === */

main h2 {
   margin: 1em 0 0 0;
   padding: 0;
   font-size: 18px;
   line-height: 36px;
   border-bottom: 1px solid #003366;
}

main h3,
main h4,
main h5,
main h6 {
   margin: 2em 0 0 0;
   padding: 0;
   font-size: 16px;
   line-height: 32px;
   border-bottom: 1px dotted #66cccc;
}

main article{
   margin: 0 0 2em 0;
   padding: 0;
   width: 100%;
}

/* ========MAIN TEXT-LIST======== */
main article ul,
main section ul,
main section ol{
   margin: 1em 0 0 0;
   padding: 0;
}

main article ul li,
main section ul li,
main section ol li{
   margin: 0;
   padding: 0;
   list-style-type: square;
   list-style-position: inside;
}

main ol.biography li{
   margin: 0 0 1em 0;
   padding: 0;
   list-style-type: square;
   list-style-position: inside;
}

main ul.contact li{
   margin: 0 0 1em 0;
   padding: 0;
   list-style-type: square;
   list-style-position: inside;
}


/* === INFORMATION === */
main ul.information {
   margin: 1em 0 0 0;
   padding: 0;
}

main ul.information li {
   margin: 0 0 2em 0;
   padding: 0;
   list-style-type: none;
}

main ul.information li time {
   display: block;
   text-indent: 0;
   color: #66cccc;
   font-weight: 600;
}

main ul.information li img{
   display: block;
   margin: 0 auto;
   padding: 0;
   width: 100%;
   max-width: 100%;
   height: auto;
   border: 1px solid #003366;
}

/* === DISCOGRAPHY === */

main article section.discography {
   margin: 0;
   padding: 0;
   background-color: transparent;
}

main article section.discography h3{
   margin: 3em 0 0 0;
   padding: 0 0 20px 0;
   font-size: 20px;
   border-bottom: 8px solid #66cccc;
}

main article section.discography .video{
   margin: 0 auto 0;
   position: relative;
   padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
   height: 0;
   overflow: hidden;
}

main article section.discography .video iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

main .discography-top,
main .discography-top-demo {
   margin: 0 auto;
   padding: 0;
   background-color: #003366;
   width: 100%;
   border-bottom: 8px solid #66cccc;
}

main .discography img,
main .discography-top img {
   display: block;
   margin: 0 auto;
   padding: 0;
   max-width: 100%;
   height: auto;
   box-sizing: border-box;
}

main .discography-top-double {
   margin: 0 auto;
   padding: 0;
   background-color: #003366;
   width: 100%;
   overflow: hidden;
   border-bottom: 8px solid #66cccc;
}

main .discography-top-double img {
   float: left;
   margin: 0;
   padding: 0;
   width: 50%;
   height: auto;
   box-sizing: border-box;
}

main .discography-top-demo img {
   display: block;
   margin: 0 auto;
   padding: 0;
   max-width: 50%;
   height: auto;
   box-sizing: border-box;
}

@media all and (max-width: 768px){
    main .discography-top-double img {
       display: block;
       margin: 0 auto;
       padding: 0;
       max-width: 100%;
       height: auto;
    }
}

main .discography-album {
   margin: 0 auto 10px;
   padding: 0;
   width: 100%;
   overflow: hidden;
}

@media all and (min-width: 1500px){
    main .discography-album img {
       float: left;
       display: block;
       margin: 0 10px 0 0;
       padding: 0;
       width: 360px;
       height: auto;
       box-sizing: border-box;
    }
    main .discography-album-text {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
    }
}

main ol.stafflist{
   margin: 0;
   padding: 1em;
   background-color: #003366;
}

main ol.stafflist li{
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-position: inside;
   line-height: 1.6em;
   font-size: 14px;
   color: #fff;
}

main ol.musiclist li{
   margin: 0;
   padding: 0;
   list-style-type: decimal;
   list-style-position: inside;
}

/* === SNS-BUTTON === */
#sns {
   position: fixed;
   bottom: 10px;
   right: 4px;
   margin: 0;
   padding: 0;
   width: 40px;
}

#sns img {
   display: block;
   margin: 0 0 10px 0;
   padding: 0;
   max-width: 100%;
   height: auto;
}

#sns .pageTop {
   display: block;
   margin: 0 0 10px 0;
   padding: 0;
   width: 40px;
   height: 40px;
   background-color: #66cccc;
   border-radius: 100%;
}

#sns .pageTop a {
   display: block;
   margin: 0;
   padding: 0;
   width: 40px;
   height: 40px;
   color: #fff;
   text-align: center;
   font-size: 16px;
   line-height: 40px;
   font-weight: 600;
}

/* === FOOTER ==== */
#footerNav {
   margin: 0 auto;
   padding: 20px 0;
   width: 84%;
   height: 100%;
}

#footerNav span.br:before {
   content: "\A";
   white-space: nowrap;
}

#footerNav ul {
   margin: 0;
   padding: 0;
}

#footerNav ul li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   line-height: 3em;
}

#footerNav ul li a {
   display: block;
   width: 100%;
   margin: 0;
   padding: 1em 0;
   color: #66cccc;
   text-decoration: none;
   line-height: 2em;
   border-bottom: 1px solid #66cccc;
}

@media all and (max-width: 568px) {
    #footerNav {
	width: 92%;
    }
     #footerNav ul li a {
       font-size: 12px;
    }
}

@media all and (max-width: 667px) {
    #footerNav span.br:before {
       content: "\A";
       white-space: pre;
    }
}

@media all and (min-width: 1500px) {
    #footerNav {
	width: 1024px;
    }
}

#footerNav li a:hover{
   color: #fff;
}

footer img{
   display: block;
   margin: 0 auto;
   padding: 0;
   width: 15%;
   height: auto;
}

@media all and (max-width: 414px) {
    footer img {
	width: 30%;
	height: auto;
    }
}

@media all and (min-width: 415px) and (max-width: 768px) {
    footer img {
	width: 20%;
	height: auto;
    }
}

@media all and (min-width: 1500px) {
    footer img {
	width: 240px;
    }
}

footer p{
   margin: 1em 0 0 0;
   padding: 0 0 16px;
   color: #fff;
   text-align: center;
}