@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,500,600,700&display=swap');

* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; outline:none;}
a {cursor:pointer;text-decoration: none;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,menu,p,ul {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/
a {color: #fff;}
a:hover {color: #fc0;}
img {width: 100%;}

body {background: #000;color: #fff;font-feature-settings: "palt", "swsh";font-family:  'EB Garamond', serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}

header {}
header > div, footer > div {width: 100%;max-width: 980px;margin: 0 auto;}
header > div {padding: 0.5em;font-size: 0.8em;}
header > div a {width: 80%;max-width: 200px;}
header > div a:hover {opacity: 0.8;}

#content {}
section {width: 100%;}
section > div {width: 100%;max-width: 980px;margin: 0 auto;padding: 3em 2em;}
section h2 {font-size: 3em;line-height: 1.2;}
section p {/*text-align: justify;*/}

#head {background: #fff;color: #111;text-align: center;padding-bottom: 3em;}
#head h1 {margin-bottom: 1em;}
#head h1 img {width: 100%;max-width: 500px;margin: 0 auto;}

.disk {text-align: center;}
#single {background: url(img/bg_vinflo_y_b2.jpg) no-repeat center center / cover;text-shadow:0.1em 0.1em 0.25em rgba(0,0,30,0.5),-0.1em 0.1em 0.25em rgba(0,0,30,0.5),-0.1em -0.1em 0.25em rgba(0,0,30,0.5),0.1em -0.1em 0.25em rgba(0,0,30,0.5);}
#album, #event h2 {text-shadow:0.1em 0.1em 0.25em rgba(255,255,255,0.5),-0.1em 0.1em 0.25em rgba(255,255,255,0.5),-0.1em -0.1em 0.25em rgba(255,255,255,0.5),0.1em -0.1em 0.25em rgba(255,255,255,0.5);}
.disk:before {}
#album:before {content: "";display: block; position: fixed;width: 100%;height: 100vh;z-index: -1;top:0;left:0;right:0;background: url(img/bg_starry02.jpg) no-repeat center center / cover;}


.disk h2 span.title {color: #FAEDB6;}
.disk img.jacket {width: 90%;max-width: 800px; margin: 1em auto;}
.disk h4 {font-size: 2em;}
.disk p {}
.disk p.price {font-size: 1.25em;}
.disk p.preorder {color: red;font-weight: 600;font-size: 1.2em; text-shadow:0.1em 0.1em 0.25em rgba(120,0,0,0.5),-0.1em 0.1em 0.25em rgba(120,0,0,0.5),-0.1em -0.1em 0.25em rgba(120,0,0,0.5),0.1em -0.1em 0.25em rgba(120,0,0,0.5);}
.disk ol.tracklist {font-size: 1.2em; text-align: left;margin: 1em auto 0;display: inline-block;text-shadow:none;}
.disk ol.tracklist li span {display: block;font-size: 0.55em;margin-bottom: 0.5em;}
/*#single.disk ol.tracklist {color: #222;}*/

#event {background: #012;}
#event h2 {font-weight: 600;line-height: 1.4;margin-bottom: 0.5em;font-size: 1.75em;}
#event p {font-size: 1.2em;}
#event h5 {font-size: 1.5em;margin-top: 1em;font-weight: 600;margin-bottom: 0.5em;}
#event h6 {font-size: 1em;margin-top: 1em;cursor: pointer;font-weight: 600;padding: 0.5em;transition: 0.3s all ease;}
#event h6.open {background: #fff;color: #012;}
#event h6:after {content:" \3010\958B\304F\25BC\3011";display:inline-block;}
#event h6.open:after {content:" \3010\9589\3058\308B\25B3\3011";display:inline-block;}
#event h6:hover {color:#f30;}
#event p.shrink {font-size: 90%;display: none;border: 1px solid #ccc;border-radius: 0 0 1em 1em;padding: 1em;transition: 0.5s all ease;}
#event p.shrink.open {display: block;}
#event span.att {font-size: 90%;margin-top: 1em;}
#event p.part {font-weight: 600;}
#event p.date.ended {text-decoration: line-through;}
#event p a.venue:after {content: url(img/outlink.png);margin-left: 0.2em;display:inline-block;transition: 0.3s all ease;}
#event p a.venue:hover:after {content: url(img/outlink_hov.png);}
/*
#live {background: url(img/live_bg.png) no-repeat top center / contain;background-color: #171252;text-shadow:0.1em 0.1em 0.25em rgba(255,255,255,0.5),-0.1em 0.1em 0.25em rgba(255,255,255,0.5),-0.1em -0.1em 0.25em rgba(255,255,255,0.5),0.1em -0.1em 0.25em rgba(255,255,255,0.5);text-align: center;font-size: 1.2em;}
#live h5 {font-size: 2.5em;color: #FAEDB6;}
#live h3 {font-size: 3em;transform: scale(0.8, 1);}
#live p {line-height: 1.5;}
#live p.event {font-size: 1.5em;}
#live p.cast_l {font-size: 2em;}
#live p.cast {font-size: 1.5em;}
#live p.venue {font-size: 1.5em;}
#live p.date {font-size: 2em;color: #FAEDB6;}
#live p.ticket {margin-bottom: 1em;}
*/
#profile { background: #fff;color: #222;text-align: left;}
#profile h5 {font-size: 1.25em;border-bottom: 1px solid #333;margin-bottom: 0.25em;padding-bottom: 0.25em;}
#profile > div > p {font-size: 0.9em;line-height: 1.5;}
#profile > div > p b {font-size: 1.2em;}
#profile > div > img {width: 80%;max-width: 500px; margin: 1em auto;}
#profile div.personal {display: flex;justify-content: space-between;flex-wrap: wrap;}
#profile div.personal p {font-size: 0.9em;width: 48%;}
#profile div.personal p:first-of-type {text-align: right;}
#profile div.personal p b {font-size: 1.5em;}
#profile div.personal p span {}
#profile .links {text-align: center;margin-top: 1em;}
#profile .links a {color: #336;font-size: 1.25em;}
#profile .links a:hover {color: #f90;}

a.cart {background: #e03;color: #fff;padding: 0.5em;border-radius: 0.3em;font-size: 1.5em;margin: 0.5em auto;width: 50%;min-width: 300px;font-weight: 600;text-shadow:none;}
a.cart:hover {background: #f93;}

a.twlink {display: inline-block;transition: all ease 0.4s;}
a.twlink img {width: 1.5em;transition: all ease 0.4s;vertical-align: bottom;}
a.twlink:hover img {transform: scale(1.5);}

.youtube{position: relative;padding-bottom: 56.25%;padding-top: 1.5em;height: 0;overflow: hidden;margin: 2em auto;width: 90%;}
.youtube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/*フッター*/
footer {background-color:#222;color:rgba(255,255,255,0.6);width:100%;border-top:1px solid rgba(0,0,0,0.3);}
footer div {padding:20px 0;}
p.copyright {font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}
footer a {color:rgba(255,255,255,0.6);}

/*ページトップへ*/
.pagetop {display: block;position: fixed;right: 10px;bottom: 10px;z-index:+20;}
.pagetop a {display: block;background-color: rgba(50,0,100,0.7);color: rgba(255,255,255,0.6); text-align: center;text-decoration: none;outline:none;width: 50px;height: 50px;line-height: 50px;font-size: 20px;border-radius: 50%;/*transform:rotate(45deg);*/}
.pagetop a i {/*transform:rotate(-45deg);*/}
.pagetop a:hover {color:rgb(233,168,37);}

/*汎用*/
.mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.txtwshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;}
.clearfix:after, ul:after {content:"";display:block;position:relative;clear:both;}

.spshow {display: block;}
.sphide {display: none;}

@media screen and (min-width: 650px) {
  #head {padding-bottom: 5em;}
  #event h2 {font-size: 2em;}
 .spshow {display: none;}
 .sphide {display: block;}
}

/*750 920 1200 1500*/