#contents{
	position:absolute;
	top:79%;
	z-index:9995;
	width:100%;
}


#twrap{
	position:relative;
	margin-top:-20%;
}

footer{
	clear:both;
}



#plus{
	cursor:pointer;}


.topics{
	float:left;
	padding-left:10px;
	margin-right:20px;
}

.ticon{
font-size:83%;
line-height:120%;
text-align:center;
}
.ticon img{
	margin-bottom:0.5em;
}

.nopad{

}
.banner{
	background:#fff;
	text-align:center;
	height:auto;
}

.ticon a{
	background:#fff;
display:block;
padding:21px 0;
width:100%

}
.ticon a:hover{
	background:#eee;

}

#news{
	
	background:#369;
	color:#fff;
	line-height:32px;
	font-size:83%;
	position:relative;
}

div.news{
	background:url(../images/top/news.png) no-repeat;
	width:118px;
	height:36px;
	top:-2px;
	left:-5px;
	position:absolute;
	margin-right:10px;
}

.news_box{
	float:left;
	margin-left:128px;
}

.news_box a{
	color:#fff;
	display:block;


}

.top_cont_r{
	position:relative;
}

#campaign{
	position:absolute;
	top:-190px;
	right:-10px;
	z-index:9999;
}

.news_box a:hover{
	text-decoration:underline;
}

.news_box dl,.news_box div dl:first-child{
	width:460px;
	border-top:1px solid #fff;
}
.news_box dl:first-child{
	border-top:none;
}
.date{
	float:left;margin-right:20px;
	padding:0 0 0 10px;
}

div#plus{
	width:36px;
	float:right;
	text-align:center;
	border-left:1px solid #000;
	background:#069;
}

div#plus:hover{
	opacity:0.8;
}

.container {
	/* defaults for resposive height container */
	position: relative;
	width: 100%;
	height: 0;
	
	/* 39% being the ratio we are maintaining 
	 * calculated by looking at the image 
	 * ratio: 400/1024 = ~0.39 */
	padding: 0 0 59% 0;
	z-index:9990;
}

.iosSlider {
	width: 100%;
	
	/* this height ends up being your maximum height, 
	 * if you want it to scale forever, set it to 
	 * a very high number */
	height: 1500px;
}

.iosSlider .slider {
	width: 100%;
	height: 100%;
}

.iosSlider .slider .item {
	float: left;
	
	width: 100%;
}

.iosSlider .slider .item img {
	width: 100%;
	height: auto;
}

/* controls */
.container .prevContainer {
	position: absolute;
	top: 0;
	left: 50px;
	width: 100px;
	
	padding: 0 0 32.5% 0;
	z-index: 10;
}

.container .prevContainer .prev {
	position: absolute;
	bottom: -10%;
	left: 0;
	width: 100%;
	height: 20%;

}

.container .nextContainer {
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	padding: 0 0 32.5% 0;
	z-index: 10;
}

.container .nextContainer .next {
	position: absolute;
	bottom: -10%;
	left: 50px;
	width: 100%;
	height: 20%;
}

.container .selectorsBlock {
	position: absolute;
	bottom: 10px;
	width: 100%;
	height: 5%;
}

.container .selectorsBlock .selectors {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 12%;
	height: 100%;
}

.container .selectorsBlock .selectors .item {
	position: relative;
	top: 0;
	left: 0;
	float: left;
	width: 16%;
	height: 100%;
	margin: 0 0 0 5%;
	background: #aaa;
}

#text{
	margin:auto;
	color:#fff;
	position:relative;
}

.text1{
	background: none repeat scroll 0 0 #000000;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    left: 0;
    top: 229px;
    padding: 10px 10px 5px 10px;
	z-index:9994;
}
.text2{
	background: none repeat scroll 0 0 #000000;    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    left: 0;
    top: 266px;
    padding: 10px 10px 5px 10px;
	z-index:9994;
}
.text_jap{
	background: none repeat scroll 0 0 #000000;    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    left: 0;
    top: 181px;
    padding: 10px 10px 5px 10px;
	z-index:9994;
}

.text3{
	background: none repeat scroll 0 0 #B81935;    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    left: 0;
    top: 303px;
    padding: 7px 10px 5px 10px;
	z-index:9999;
}


.text1 span{
	color: #FFFFFF;
    font-size: 12px;
	font-family: 'Julius Sans One', sans-serif;

}


.text2 span {
	color: #FFFFFF;
    font-size: 12px;
	font-family: 'Julius Sans One', sans-serif;
}
.text_jap span {
	color: #FFFFFF;
    font-size: 20px;
}

.text3 span a{
	color: #FFFFFF;
    font-size: 16px;
	font-family: 'Julius Sans One', sans-serif;
}


.container .selectorsBlock .selectors .selected {
	background: #333;
}

.container .selectorsBlock .selectors .first {
	margin-left: 0;
}


@media only screen and (min-device-width: 320px)
and (max-device-width: 787px){
.container {
	/* defaults for resposive height container */
	position: relative;
	width: 100%;
	height: 0;

	/* 39% being the ratio we are maintaining 
	 * calculated by looking at the image 
	 * ratio: 400/1024 = ~0.39 */
	padding: 0 0 69% 0;
}

.iosSlider{
	padding:120px 0 0 0;
}

#visual{
	width:980px;
	margin:auto;
}

#twrap{
	margin-top:10px;
}

.text_jap{
	top:80px;
}
.text1{
    top: 130px;
}
.text2{
    top: 173px;
}

.text3{
    top: 218px;
}
footer{
	margin:100px 0 0 0;
}

}