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

html, body, div, span, object, iframe,
a, dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

body {
/*	width:320px; */
	margin:0;
	font-family:"メイリオ", Verdana, Roboto, 'Droid Sans', Meiryo, 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 12px;
	text-align:center;
	color: #000000;
	background-color: #FFF;
}

image {
	border:none;
}


#MAIN {
	position:relative;
	width:320px;
	margin:0px auto;
	text-align:left;
}

.NODISP {
	display:none;
}


/**********************************************************************
  CONTENT1
***********************************************************************/
.CONTENT1 {
	position:relative;
	width:320px;
	height:299px;
	background-image:url('image/content1.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}


/**********************************************************************
  CONTENT2
***********************************************************************/
.CONTENT2 {
	position:relative;
	width:320px;
	background-color:#FFFFFF;
}


/**********************************************************************
  CONTENT3
***********************************************************************/
.CONTENT3 {
	position:relative;
	width:320px;
	height:50px;
	background-image:url('image/content3.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

.CONTENT3 .BTN_CENTER {
	position:absolute;
	left:84px;
	top:9px;
	width:152px;
	height:33px;
	cursor:pointer;
}

.CONTENT3 .BTN_LEFT {
	position:absolute;
	left:10px;
	top:9px;
	width:112px;
	height:32px;
	cursor:pointer;
}

.CONTENT3 .BTN_TO_TOP {
	position:absolute;
	left:127px;
	top:13px;
	width:111px;
	height:26px;
	cursor:pointer;
}

.CONTENT3 .BTN_RIGHT {
	position:absolute;
	left:244px;
	top:13px;
	width:66px;
	height:26px;
	cursor:pointer;
}


.CONTENT3 img {
	width:100%;
	height:100%;
}


/*******************
CONTENT3_1
*******************/
.CONTENT3_1 {
	position:relative;
	width:320px;
	height:41px;
	background-image:url('image/content3_1.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

.CONTENT3_1 .BTN_LONG {
	position:absolute;
	left:10px;
	top:9px;
	width:300px;
	height:33px;
}

.CONTENT3_1 img {
	width:100%;
	height:100%;
}


/**********************************************************************
  TOP PAGE
***********************************************************************/
#DIV_TOP .CONTENT2 {
	height:435px;
	background-image:url('image/top_page.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}




/**********************************************************************
  MANGA PAGE
***********************************************************************/
#DIV_MANGA .CONTENT2 {
	height:458px;
}

#DIV_MANGA .CONTENT2 img {
	width:100%;
	height:100%;
}


.MANGA_PAGE {
	position:absolute;
	left:0px;
	top:0px;
	height:458px;
	padding-top:7px;
}

.MANGA_PAGE_HEADER {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:7px;
}

.MANGA_PAGE_FOOTER {
	position:absolute;
	left:0px;
	top:451px;
	width:320px;
	height:7px;
}


//SWIPE

#MANGA_PAGE_VIEW {
	position:absolute;
	left:0px;
	top:7px;
	width:320px;
	height:444px;
	overflow-x: hidden;
    margin: 0 auto;
}

#MANGA_PAGE_BASE {
	width:320px;
	height:431px;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0)!important;
}

.MANGA_PAGE_BODY {
	float:left;
	width:320px;
	height:444px;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0)!important;
}

.MANGA_PAGE_BODY img {
	width:320px;
	height:444px;
}




/**********************************************************************
  LYRIC PAGE
***********************************************************************/
#DIV_LYRIC .CONTENT2 {
	/* height:435px; */
}

#DIV_LYRIC .CONTENT2 img {
	width:100%;
}

.LYRIC_HEADER {
	position:relative;
	width:320px;
	height:52px;
}

.LYRIC_TITLE {
	position:relative;
	width:320px;
	height:31px;
}

.LYRIC_BODY {
	position:relative;
	width:320px;
}

.LYRIC_FOOTER {
	position:relative;
	width:320px;
	height:15px;
}

.LYRIC_TITLE_BTN_OPEN {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:31px;
}

.LYRIC_TITLE_BTN_CLOSE {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:31px;
}



/**********************************************************************
  END PAGE
***********************************************************************/
#DIV_END .CONTENT2 {}



/***************************
  END MAIN AREA
***************************/
#DIV_END .END_MAIN_AREA {
	position:relative
	width:320px;
}

#DIV_END .END_MAIN_AREA .END_BASE_IMG img {
	width:320px;
}

#DIV_END .END_BTN_MUSIC {
	width:277px;
	height:28px;
	padding-left:43px;
	text-align:left;
	line-height:28px;
	cursor:pointer;
	background-image:url('image/btn_music_base.png');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

#DIV_END .END_BTN_BAR {
	width:320px;
	height:8px;
	background-image:url('image/btn_music_bar.png');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}



/***************************
  END SNS AREA
***************************/
#DIV_END .END_SNS_AREA {
	position:relative;
	width:320px;
	height:201px;
	background-image:url('image/end_sns_area.png');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

#DIV_END .END_SNS_AREA img {
	width:100%;
	height:100%;
}


#DIV_END .END_SNS_AREA_2 {
	position:relative;
	width:320px;
	height:108px;
	background-image:url('image/end_sns_area_2.png');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

#DIV_END .END_SNS_AREA_2 img {
	width:100%;
	height:100%;
}


#END_BTN_DL_ALL {
	position:absolute;
	left:59px;
	top:6px;
	width:202px;
	height:33px;
	cursor:pointer;
}

#END_BTN_DL_SHOP {
	position:absolute;
	left:59px;
	top:48px;
	width:202px;
	height:33px;
	cursor:pointer;
}


.END_BTN_SNS_1 {
	position:absolute;
	left:10px;
	top:37px;
	width:147px;
	height:53px;
	cursor:pointer;
}

.END_BTN_SNS_2 {
	position:absolute;
	left:163px;
	top:37px;
	width:147px;
	height:53px;
	cursor:pointer;
}

.END_BTN_SNS_3 {
	position:absolute;
	left:10px;
	top:99px;
	width:147px;
	height:53px;
	cursor:pointer;
}

.END_BTN_SNS_4 {
	position:absolute;
	left:163px;
	top:99px;
	width:147px;
	height:53px;
	cursor:pointer;
}






/**********************************************************************
  NAME INSERT
***********************************************************************/

.IMAGE_DATA_CLASS {
	position:relative;
	width:320px;
}

.MANGA_NAME {
	position:absolute;
	left:0px;
	top:0px;
	width:7px;
	height:100px;
	font-size:8px;
	line-height:1.05em;
	text-align:center;
	color:#505050;
	font-weight:bold;
	word-wrap: break-word;
	overflow-x:hidden;
	overflow-y:hidden;
}


/**********************************************************************
  NAME BOX
***********************************************************************/
.DIV_NAME_BOX {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:435px;
}

.DIV_NAME_BOX img{
	width:100%;
	height:100%;
}

.NAME_BOX_MASK {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:#000000;
	opacity:0.4;
}

.NAME_BOX_BASE {
	position:absolute;
	left:0px;
	top:100px;
	width:320px;
	height:193px;
}

.NAME_BOX_BASE_IMG {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:193px;
}

.NAME_BOX_INPUT_DIV {
	position:absolute;
	left:60px;
	top:92px;
	width:200px;
	height:20px;
}

#NAME_BOX_INPUT {
	position:absolute;
	left:0px;
	top:0px;
	width:200px;
	height:32px;
	font-size:16px;
	line-height:20px;
	padding-left:50px;
	border:none;
	outline: none;
/*	background-color:#Fcc; */
}


.NAME_BOX_BTN_OK {
	position:absolute;
	left:74px;
	top:137px;
	width:172px;
	height:33px;
	cursor:pointer;
}

.NAME_BOX_BTN_CLOSE {
	position:absolute;
	left:256px;
	top:0px;
	width:60px;
	height:50px;
	cursor:pointer;
}


/**********************************************************************
  ANS BOX
***********************************************************************/
.DIV_ANS_BOX {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:444px;
	background-color:#000000;
}

.DIV_ANS_BOX img{
	width:100%;
	height:100%;
}

.ANS_BOX_BASE {
	position:absolute;
	left:0px;
	top:100px;
	width:320px;
	height:193px;
}

.ANS_BOX_BASE_IMG {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:193px;
}

.ANS_BOX_BTN_1 {
	position:absolute;
	left:35px;
	top:145px;
	width:122px;
	height:33px;
	cursor:pointer;
}

.ANS_BOX_BTN_2 {
	position:absolute;
	left:163px;
	top:145px;
	width:122px;
	height:33px;
	cursor:pointer;
}

.ANS_BOX_BTN_CLOSE {
	position:absolute;
	left:256px;
	top:0px;
	width:60px;
	height:50px;
	cursor:pointer;
}




/**********************************************************************
  CONTENT4
***********************************************************************/
.CONTENT4 {
	position:relative;
	width:320px;
	height:772px;
	background-image:url('image/content4.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
}

#BTN_BUY_1 {
	position:absolute;
	left:192px;
	top:424px;
	width:118px;
	height:29px;
	cursor:pointer;
}
#BTN_BUY_1 img {
	width:100%;
	height:100%;
}

#BTN_BUY_2 {
	position:absolute;
	left:192px;
	top:601px;
	width:118px;
	height:29px;
	cursor:pointer;
}
#BTN_BUY_2 img {
	width:100%;
	height:100%;
}






/**********************************************************************
  MASK
***********************************************************************/
#MASK {
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:20;
}