/* デフォルト */
* {
	margin: 0; padding: 0;  
	font-family: 'Dosis', 'Lato', sans-serif;
/*	font-family: 'Georgia','Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Verdana,Sans-serif; */
	font-size:17px;
	line-height:160%;
	letter-spacing:1px;font-family: 'Poiret One', cursive;
}
#info img{
  border-radius: 8%;
  -webkit-border-radius: 8%;
  -moz-border-radius: 8%;
}
body{
    overflow-y: scroll;
	background-color:#000;
}
#footer a{
	color:#BBB !important;
}
.none2{
	display:none;
}
.sp{
	display:none;
}
.key{
	display:none;
}
/*
div#cslogo{
	position:absolute;
	width:100%;
	height:100%;
	background:url(./img/cslogo.png) no-repeat center; 
	-webkit-animation: cslogo 1.1s linear 0s 1;
	-moz-animation: cslogo 1.1s linear 0s 1;
	-o-animation: cslogo 1.1s linear 0s 1;
	-ms-animation: cslogo 1.1s linear 0s 1;
			opacity:0;
}
div#cslogo h2{
}
*/
#topimg{
	position:absolute;
	width:100%;
	height:100%;
	background:url(./img/Journey_illust.jpg) no-repeat right top;
	background-size:cover;
	-webkit-animation: fadein	 1.1s linear 0s 1;
	-moz-animation: fadein 1.1s linear 0s 1;
	-o-animation: fadein 1.1s linear 0s 1;
	-ms-animation: fadein 1.1s linear 0s 1;
		opacity:1;
}
/*
@media screen and (min-width: 1px) and (max-width: 1280px){
#topimg{
	position:absolute;
	width:100%;
	height:100%;
	background:url(./img/Journey_jacket_front.jpg) no-repeat right top;
	background-size:cover;
	-webkit-animation: fadein	 1.1s linear 0s 1;
	-moz-animation: fadein 1.1s linear 0s 1;
	-o-animation: fadein 1.1s linear 0s 1;
	-ms-animation: fadein 1.1s linear 0s 1;
		opacity:1;
}
}
*/
@media screen and (min-width: 2560px) and (max-width: 9999px) {
div#title{
	position:absolute;
	
	margin-left:4%;
	width:96%;
	height:100%;
	background:url(./img/logoW900.png) no-repeat center left;
	-webkit-animation: fadein2 3.1s linear 0s 1;
	-moz-animation: fadein2 3.1s linear 0s 1;
	-o-animation: fadein2 3.1s linear 0s 1;
	-ms-animation: fadein2 3.1s linear 0s 1;
		opacity:0.82;
}
}
@media screen and (min-width: 1701px) and (max-width: 2559px) {
div#title{
	position:absolute;
	
	margin-left:4%;
	width:96%;
	height:100%;
	background:url(./img/logoW800.png) no-repeat center left;
	-webkit-animation: fadein2 3.1s linear 0s 1;
	-moz-animation: fadein2 3.1s linear 0s 1;
	-o-animation: fadein2 3.1s linear 0s 1;
	-ms-animation: fadein2 3.1s linear 0s 1;
		opacity:0.82;
}
}
@media screen and (min-width: 1367px) and (max-width: 1700px) {
div#title{
	position:absolute;
	
		margin-left:3.4%; 
		width:96.6%;
	height:100%;
	background:url(./img/logoW650.png) no-repeat center left;
	-webkit-animation: fadein2 3.1s linear 0s 1;
	-moz-animation: fadein2 3.1s linear 0s 1;
	-o-animation: fadein2 3.1s linear 0s 1;
	-ms-animation: fadein2 3.1s linear 0s 1;
		opacity:0.82;
		}
}
@media screen and (min-width: 1281px) and (max-width: 1366px) {
div#title{
	position:absolute;
	
	margin-left:2.8%;
	width:97.2%;
	height:100%;
	background:url(./img/logoW600.png) no-repeat center left;
	-webkit-animation: fadein2 3.1s linear 0s 1;
	-moz-animation: fadein2 3.1s linear 0s 1;
	-o-animation: fadein2 3.1s linear 0s 1;
	-ms-animation: fadein2 3.1s linear 0s 1;
		opacity:0.82;
}
}

/*
@media screen and (min-width: 1px) and (max-width: 1280px) {
div#title{
	position:absolute;
	
	margin-left:5.2%;
	width:94.8%;
	height:100%;
	background:url(./img/logoW500.png) no-repeat center left;
	-webkit-animation: fadein2 3.1s linear 0s 1;
	-moz-animation: fadein2 3.1s linear 0s 1;
	-o-animation: fadein2 3.1s linear 0s 1;
	-ms-animation: fadein2 3.1s linear 0s 1;
		opacity:0.82;
}
}
*/

@-webkit-keyframes cslogo {
	0%{
		opacity:0;

	}
	30%{
	opacity:0.8;
	}
	70%{
	opacity:0.82;	
	}
	100% {	
		opacity:0;
	}
}

@-webkit-keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-webkit-keyframes fadein2 {
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100% {
		opacity:0.82;
	}
}@-moz-keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-moz-keyframes fadein2 {
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100% {
		opacity:0.82;
	}
}@-o-keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-o-keyframes fadein2 {
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100% {
		opacity:0.82;
	}
}@-ms-keyframes fadein {
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@-ms-keyframes fadein2 {
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100% {
		opacity:0.82;
	}
}
#center{
	top:100%;
	background:#2C2E2D;
	border-top:1px solid #BBB;
	position:absolute;
	overflow:hidden;
	width:100%;
	margin:0 auto;
	padding-top:100px;
	text-align:center;
}
img.bn{
	margin-bottom:96px;
}
#contents{
	width:1024px;
	margin:0 auto;
}
#chara{
	vertical-align:top;
	opacity:0.9;
	display:inline-block;
	width:500px;
	height:100%;
  border-radius: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 100%;
}
#chara img{
	width:500px;
	height:auto;
	border:1px solid #333;
  border-radius: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 100%;

}
#tracklist{
	display:inline-block;
	text-align:left;
	vertical-align:top;
	width:500px;
	height:500px;
}
#tracklist ul{
/*	font-style:italic; */
	vertical-align:middle;
	margin-left:190px;
	margin-top:10px;
}
#tracklist img{
	margin-left:-92px;
}
#tracklist li{
	list-style:decimal;
	color:#BBB;
	font-size:20px;
}
#music{
	opacity:.7;
	margin-top:50px;
	transition:.3s;
}
#music:hover{
	transition:.5s;
}
#info{
	text-align:right;
	margin-top:50px;
	font-size:16px;
	font-weight:normal;
	color:#BBB;
	margin-right:20px;

}
big{
	font-size:38px;
}
small{
	font-size:14px;
}
#footer{
	margin-top:100px;
	padding:50px 0px;
	width:100%;
	color:#BBB;
	text-align:center;
	background:#111;
}

#share{
	margin-top:100px;
}
#share li{
	display:inline-block;
	margin:0 28px;
	color:#BBB;
	font-size:28px;
	vertical-align:middle;
}
#share li img{
  border-radius: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 100%;
	opacity:.7;
	transition:.2s;
	width:56px;
	height:56px;
}
#share li img:hover{
	opacity:.9;
	transition:.3s;
}
.products{
	border-top:1px solid #AAA;
	margin-top:100px;
	padding-top:100px;
	text-align:left;
	margin-left:50px;
}
.products li{
	display:inline-block;
	margin:0 25px;
	color:#BBB;
	font-size:28px;
	vertical-align:middle;
}

.products li small{
	font-size:18px;
	font-weight:normal;
}
.products li img{
	opacity:.8;
	float:right;
	margin-top:-66px;
	margin-right:160px;
	transition:.1s;
}
.products li img:hover{
	opacity:1;
	transition:.2s;
}
.products a{
	color:#BBB;
	font-size:20px;
	transition:.2s;
}
.products a:hover{
	color:#DDD;
	transition:.3s;
}
.products .right{
	width:100%;
}


#main_banner{
background:#000;
color:#BBB;
font-size:15px;
width:900px;
margin:20px auto;
}
#main_banner textarea{
	background:#2C2E2D;
	color:#BBB;
	font-size:15px;
	font-weight:normal;
	padding:5px;
	width:100%;
	height:100px;
	line-height:120%;
	letter-spacing:100%;
	font-family: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic ProN','MS PGothic', Verdana,Sans-serif;
}
#main_banner p{
	margin:50px 5px;
}
.to-top{
	position:relative;
	bottom:-210px;
	right:5%;
	text-align:right;
}
.to-top img{

  border-radius: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 100%;
	opacity:.3;
	transition:.2s;
  width:60px;
}
.to-top img:hover{
	opacity:.5;
	transition:.3s;
}
#mov{
	margin:50px auto;
}