@charset "UTF-8";
html {
	height: 100%;
	overflow-y: scroll;
}
body {
	height: 100%;
	color: #fff;
	background-color: #111;
	font-family: 'Montserrat', "Lucida Grande", "Verdana", "Meiryo", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴPro W3", "HiraKakuPro-W3", "MS Pゴシック", Sans-Serif;
	font-size: 10px;
	line-height: 1.75;
}
a		 { color: #69F; text-decoration: none;}
a:visited { color: #49F;}
a:hover   { color: #06C; text-decoration: underline;}

br.sm {
	display: none;
}

/*
01,common
----------------------------------------------------------------*/
section {
	text-align: left;
}
section h2 {
	font-size: 30px !important;
}
section .inner {
}

/*
01,top
----------------------------------------------------------------*/
section#top {
	text-align: center;
}
section#top h1 {
	margin-bottom: 20px;
}
section#top h1 img {
	width: 600px;
	height: auto
}
section#top h1 img.mark {
	display: block;
	width: 80px;
	margin: 0 auto 20px;
}
/*
01,download
----------------------------------------------------------------*/
#download {
	margin: 0 100px;
}
#download #download320 {
	float: left;
	width: 50%;
}
#download #download192 {
	float: right;
	width: 50%;
}
#download .harfSec dl {
	position: relative;
	margin: 1px 1px 20px;
}
#download .harfSec dl dt {
	margin-bottom: 10px;
	color: #fff;
}
#download .harfSec dl dt a {
	display: block;
	padding: 20px 0 30px;
	border: #111 solid 1px;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	color: #666;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background: url(../img/bg_4.jpg) no-repeat;
}
#download .harfSec dl dt a:hover {
	color: #FFF;
}
#download .harfSec dl dd {
	display: inline;
	margin-right: 10px;
	white-space: nowrap;
	word-break: none;
}
#download .harfSec dl dd a {
	font-size: 1.2em;
	color: #fff;
}
#download .harfSec dl dt span {
	display: block;
	margin: 0 auto;
	padding: 2px 0;
	width: 120px;
	color: #FFF;
	text-align: center;
	line-break: 1;
	font-size: 10px;
}
#download #download320 dl dt span { background-color: #ae3838;}
#download #download192 dl dt span { background-color: #2798c7;}

ul.news {
	margin: 20px;
	padding: 20px 20px 20px 40px;
	border: #FFF solid 1px;
	font-size: 12px;
	text-align: left;
	clear: both;
	list-style: disc;
}

/*
01,jacket
----------------------------------------------------------------*/
#jacket #downloadJacket {
}
#jacket #downloadJacket a {
	display: block;
	width: 240px;
	margin: 0 auto;
	padding: 50px 20px 60px;
	border: #111 solid 1px;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	color: #666;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background: url(../img/bg_4.jpg) no-repeat;
}
#jacket #downloadJacket a:hover {
	color: #FFF;
}
#jacket #downloadJacket a span {
	display: block;
	font-size: 12px;
}
/*
01,information
----------------------------------------------------------------*/
#information h3 {
	margin-bottom: 40px;
}
#information h4 {
	margin-bottom: 20px;
	font-size: 1.4em;
}
#information {
	margin-bottom: 60px;
}
#information dl {
	font-size: 1.3em;
}
#information dl dt {
	font-weight: normal;
	color: #999;
}
#information dl dd {
	margin-bottom: 20px;
}
#information dl dd ul {
	margin-bottom: 20px;
}
#information dl dd ul li {
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 3px;
	background: #FFF;
	color: #000;
}
#information dl dd p.caution {
	font-size: 10px;
}

/*
01,staff
----------------------------------------------------------------*/
#staff {
	text-align: left;
}
#staff .artistSec {
	float: left;
	width: 50%;
	margin-bottom: 20px;
	color: #FFF;
	overflow: hidden;
}
#staff .artistSec p.photo {
	float: left;
	width: 20%;
}
#staff .artistSec .artistInfo {
	float: right;
	width: 76%;
	margin-bottom: 20px;
}
#staff .artistSec .artistInfo ul {
	margin-bottom: 10px;
	overflow: hidden;
}
#staff .artistSec .artistInfo ul li {
	display: inline;
	line-height: 1.5;
}
#staff .artistSec .artistInfo ul li a {
	font-size: 12px;
	color: #FFF;
}
#staff .artistSec .artistInfo ul li a.icon-twitter {
	margin-left: 8px;
}
#staff .artistSec .artistInfo p.artistName {
	font-size: 14px;
	font-weight: bold;
}
#staff .artistSec .artistInfo .artistComment p {
	padding-right: 20px;
	font-size: 12px;
}

/*
01,banner
----------------------------------------------------------------*/
#staff .inner ul.bnr {
}
#staff .inner ul.bnr li img.left {
	float: left;
	margin-right: 5px;
}

/*
01,play
----------------------------------------------------------------*/
#play {
	padding-top: 0;
}
#play h2 {
	text-align: center;
}
#play p.nextDisc {
	text-align: center;
}
#play p.nextDisc a.navigate-down {
	display: none;
	color: #FFF;
}

/*
01,link
----------------------------------------------------------------*/
#link {
	padding: 60px 0;
	overflow: hidden;
}
#link h3 {
	margin-bottom: 40px;
}
#link dl {
	width: 1000px;
	margin-bottom: 40px;
	overflow: hidden;
}
#link dl dt {
	float: left;
	width: 468px;
}
#link dl dd {
	float: right;
	width: 500px;
	text-align: center;
}
#link dl dd.title {
	padding-top: 5px;
	font-size: 1.8em;
	font-weight: bold;
}
#link dl.h100 dd.title {
	padding-top: 20px;
}

/*
01,global
----------------------------------------------------------------*/
small.copyright {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 500;
	color: #FFF;
}
p.keyboardIcon {
	position: fixed;
	bottom: 50px;
	right: 20px;
}
p#backToGateway {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 500;
}
p#backToGateway a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}







@media screen and (max-width: 768px) {
/*================================================================
SmartPhone
================================================================*/
html {-webkit-text-size-adjust: 100%;}
body {
	min-width: inherit;
	text-align: center;
	background: url(../img/logo_mark_bg.jpg) no-repeat 0 center #000;
	background-size: cover;
}
img {
	max-width: 100%;
	height: auto;
}
br.sm {
	display: inherit;
}

/*
01,common
----------------------------------------------------------------*/
section {
	margin: 0 20px;
	padding-top: 60px;
	overflow: hidden;
}
section h2 {
	margin-bottom: 20px;
}
section .inner {
	width: 100%;
	overflow: hidden;
}

/*
01,top
----------------------------------------------------------------*/
section#top {
	text-align: center;
}
section#top h1 {
	margin-bottom: 20px;
}
section#top h1 img {
	width: 600px;
	height: auto
}
section#top h1 img.mark {
	width: 60px !important;
}
/*
01,download
----------------------------------------------------------------*/
#download {
	margin: 0 0 80px;
	padding-bottom: 60px;
}
#download #download320 {
	float: left;
	width: 50%;
}
#download #download192 {
	float: right;
	width: 50%;
}
#download .harfSec dl {
	position: relative;
	margin: 1px;
}
#download .harfSec dl dt {
}
#download .harfSec dl dt a {
	display: block;
	padding: 10px 0 20px;
	font-size: 16px;
	color: #FFF;
}
#download .harfSec dl dd {
	display: inline;
	margin-right: 10px;
	white-space: nowrap;
	word-break: none;
}
#download .harfSec dl dd a {
	font-size: 10px;
	color: #fff;
}
#download .harfSec dl dt span {
	width: 100px;
}
/*
01,play
----------------------------------------------------------------*/
#play {
	margin: 0;
}
#play section {
	width: auto;
	margin: 0 !important;
	padding: 20px 0 0;
}
#play #disc1 { background: url(../img/bg_1.jpg) repeat-y center top;}
#play #disc2 { background: url(../img/bg_2.jpg) repeat-y center top;}
#play #disc3 { background: url(../img/bg_3.jpg) repeat-y center top;}
#play #disc4 { background: url(../img/bg_4.jpg) repeat-y center top;}

#play h2 {
	text-align: center;
}
#play p.nextDisc {
	text-align: center;
}
#play p.nextDisc a.navigate-down {
	display: none;
	color: #FFF;
}

#play ol {
	text-align: center;
}
#play ol li {
	display: block;
	width: 100%;
	margin: 0 0 1px;
	padding: 10px 0 30px;
	min-height: inherit;
	border-top: #FFF solid 2px;
}
#play ol li#music07,
#play ol li#music08,
#play ol li#music09,
#play ol li#music10,
#play ol li#music35,
#play ol li#music36,
#play ol li#music37,
#play ol li#music38 {
	width: 100%;
}
#play ol li:hover dt a,
#play ol li.playing dt a {
	color: #111;
}

.artistSec,
.movieSec,
.lyricsSec {
	padding: 20px 20px 0;
	font-size: 10px;
}
.movieSec iframe {
	width: 240px !important;
	height: auto !important;
	margin: 0 auto !important;
}
.lyricsSec h3 {
	margin-bottom: 20px;
	text-align: center;
}
.lyricsSec pre {
	width: 240px;
	line-break: 1.4;
	white-space: pre-wrap;
}
.lyricsSec .preWrap {
	width: auto;
	max-height: 200px;
	overflow-y: scroll;
	text-align: left;

}
.artistSec .artistInfo {
	float: none;
	width: auto;
	max-height: 200px;
	overflow-y: scroll;
	text-align: left;
}
.artistSec .artistInfo p {
	margin-bottom: 1em;
	font-size: 1.4em;
}
.artistSec p.photo {
	float: none;
	width: 120px;
	margin: 0 auto 20px;
}

/*
01,jacket
----------------------------------------------------------------*/
#jacket #downloadJacket {
}
#jacket #downloadJacket a {
	display: block;
	width: 240px;
	margin: 0 auto;
	padding: 50px 20px 60px;
	border: #111 solid 1px;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	color: #666;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background: url(../img/bg_4.jpg) no-repeat;
}
#jacket #downloadJacket a:hover {
	color: #FFF;
}
#jacket #downloadJacket a span {
	display: block;
	font-size: 12px;
}
/*
01,information
----------------------------------------------------------------*/
#information h3 {
	margin-bottom: 40px;
}
#information h4 {
	margin-bottom: 20px;
	font-size: 1.4em;
}
#information {
	margin-bottom: 60px;
}
#information dl {
	font-size: 1.3em;
}
#information dl dt {
	font-weight: normal;
	color: #999;
}
#information dl dd {
	margin-bottom: 20px;
}
#information dl dd ul {
	margin-bottom: 20px;
}
#information dl dd ul li {
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 3px;
	background: #FFF;
	color: #000;
}
#information dl dd p.caution {
	font-size: 10px;
}

/*
01,staff
----------------------------------------------------------------*/
#staff {
	text-align: left;
}
#staff .artistSec {
	width: 100%;
	margin-bottom: 20px;
}

/*
01,banner
----------------------------------------------------------------*/
#staff .inner ul.bnr {
}
#staff .inner ul.bnr li img.left {
	float: none;
	margin: 0 0 5px;
}

/*
01,link
----------------------------------------------------------------*/
#link dl {
	width: auto;
	margin-bottom: 40px;
}
#link dl dt {
	float: none;
	width: auto;
	margin-bottom: 10px;
}
#link dl dd {
	float: none;
	width: auto;
}
#link dl.h100 dd.title {
	padding-top: 10px;
}

/*
01,global
----------------------------------------------------------------*/
small.copyright {
	font-size: 8px;
}
p.keyboardIcon {
	display: none;
}
p#backToGateway {
	width: 160px;
}

}