@charset "utf-8";
/* core	================================================	*/

h2 {
	color: #ffffff;
	/*font-family: 'Source Sans Pro', sans-serif;*/
	font-family: 'Lobster', cursive; font-weight: 400; 
	font-size:23px;
	line-height: 40px;
	padding-left: 20px;
	/*letter-spacing: 0.5px;*/
}

#mainLeft {
	width: 719px;
	float: left;
	position: relative;
}
#mainLeft .contents{
	width: 729px;
	position: relative;
	left: -11px;
}

#mainRight {
	width: 281px;
	float: right;
	position: relative;
}

#mainRight .contents {
	width: 292px;
	position: relative;
}

.mainlogo {
	position:absolute;
	top:20px;
	left:20px;
	width:186px;
}
.maintxt {
	position:absolute;
	bottom:20px;
	left:20px;
}
#spmain2 { display:none}
.mainArea {
	position:relative;
	margin-bottom: 25px;
/*
	background:#FFFFFF;
	box-sizing:border-box;
	padding:15px;
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.18);
	 border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	margin-bottom: 25px;
*/
}

	.yvid {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.yvid iframe {
	 position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*.mainArea .photo img {
	width:100%;
}*/

.mainArea .banner{
	position: absolute;
	left: 0;
	top: 300px;
	width: 94%;
	text-align: center;
	background:url(../img/top/main/cdbg.png);
	margin:0px 3%;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}


.pickup {
	width:100%;
	margin-bottom:35px;
}

.pickup h2{
	background: url(../img/top/main/boxh2bg0.png) no-repeat center top;
	margin:-35px auto 12px auto;
	width:300px;
	text-align:center;
	padding:3px 0 0 0;
	height:45px;
}

.pickup ul{
	margin: 0 auto;
}

.pickup ul li{
	margin:0;
	float:left;
	width:25%;
	box-sizing:border-box;
	padding:1%;
}


.whatsnew {
	width: 100%;
	height: 260px;
	/*background: url(../img/top/whatsnew/bg.png) no-repeat left top;*/
	/*position: relative;*/
	margin-bottom:30px;
}

.whatsnew h2{
	background: url(../img/top/main/boxh2bg0.png) no-repeat center top;
	margin:-35px auto 12px auto;
	width:300px;
	text-align:center;
	padding:3px 0 0 0;
	height:45px;
}

.whatsnew .list{
	width: 910px;
	height: 165px;
	overflow: auto;
	margin-left: 20px;
}

.jspContainer { overflow:hidden; position:relative; }

.jspPane { position:absolute; }

.jspVerticalBar { position:absolute; top:0; right:0; width:8px; height:100%; }

.jspHorizontalBar { position:absolute; bottom:0; left:0; width:100%; height:10px; }

.jspTrack { background:#fae5ec; position:relative; }

.jspDrag { background:#ef67b1; position:relative; top:0; left:0; cursor:pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float:left; height:100%; }


.whatsnew .list ul{
	width: 880px;
	float: left;
}

.whatsnew .list ul li{
	width: 880px;
	padding-bottom: 1px;
	border-bottom:#EFEFEF dotted 1px;
	/*background: url(../img/common/contents/line_bottom.png) repeat-x right bottom;*/
	color: #fffffff;
}

.whatsnew .list ul li .date{
	width: 130px;
	padding-left: 33px;
	background: url(../img/top/whatsnew/bullet.png) no-repeat left 10px;
	float: left;
	font-weight:bold;
	line-height: 40px;

}

.whatsnew .list ul li .title{
	width: 680px;
	padding-right: 30px;
	background-repeat: no-repeat;
	background-position: right top;
	float: left;
	white-space: nowrap;
	overflow: hidden;
/*	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;*/
	line-height: 40px;
	
}

.whatsnew .list ul li.list0 .title {
	/*background:url(../img/top/whatsnew/img_nyappy01.gif) right no-repeat;*/
}
.whatsnew .list ul li.list1 .title {
	/*background:url(../img/top/whatsnew/img_nyappy02.gif) right no-repeat;*/
}
.whatsnew .list ul li.list2 .title {
	/*background:url(../img/top/whatsnew/img_nyappy03.gif) right no-repeat;*/
}
.whatsnew .list ul li.list3 .title {
	/*background:url(../img/top/whatsnew/img_nyappy04.gif) right no-repeat;*/
}

.whatsnew .list ul li:hover p{
	color: #ff4080;
	text-decoration: underline;
	cursor: pointer;
}

#mainsns .yt {
	width: 66.6%;
	float:left;
	box-sizing:border-box;
	padding:0 10px;
	color:#000000;
	/*background: url(../img/top/ameblo/bg.png) no-repeat left top;
	float:left;
	margin-right:55px;*/
}

#mainsns .yt h2{
	background: url(../img/top/main/boxh2bg.png) no-repeat center top;
	margin:-35px auto 10px auto;
	width:95%;
	text-align:center;
	padding:0;
	height:45px;
	color:#D40003;
}

#mainsns .blog {
	width: 33.3%;
	height: 330px;
	float:left;
	box-sizing:border-box;
	padding:0 10px;
	color:#000000;
	/*background: url(../img/top/ameblo/bg.png) no-repeat left top;
	float:left;
	margin-right:55px;*/
}
#mainsns .blog h2{
	background: url(../img/top/main/boxh2bg.png) no-repeat center top;
	margin:-35px auto 10px auto;
	width:95%;
	text-align:center;
	padding:0;
	height:45px;
	color:#3eb134;
}
#mainsns .blog .list  {
	background:#FFFFFF;
}
#mainsns .blog ul{
	width: 90%;
	margin: 0 auto;
	height: 250px;
}

#mainsns .blog ul li{
	background: url(../img/common/contents/line_bottom.png) repeat-x left bottom;
	padding: 12px 0;
}

#mainsns .blog ul li:hover{
	cursor: pointer;
}

#mainsns .blog ul li p{
	padding-right: 30px;
	background: url(../img/top/ameblo/arrow_off.png) no-repeat center right;
}
#mainsns .blog ul li:hover p{
	background: url(../img/top/ameblo/arrow_on.png) no-repeat center right;
}

#mainsns .blog ul li span.title{
	display: block;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

#mainsns .blog ul li:hover span.title{
	color: #3eb134;
	text-decoration: underline;
}

#mainsns .blog ul li span.date{
	color: #3eb134;
	font-size: 11px;
}



#mainsns .twitter {
	width: 33.3%;
	float:left;
	box-sizing:border-box;
	padding:0 10px;
}

#mainsns .twitter h2{
	background: url(../img/top/main/boxh2bg.png) no-repeat center top;
	margin:-35px auto 10px auto;
	width:95%;
	text-align:center;
	padding:0;
	height:45px;
	color:#11beed;
}
#mainsns .twitter .twwidget,
#mainsns .facebook .fbwidget{
	width: 90%;
	height: 330px;
	margin: 0 auto;
	background:#FFFFFF;
	
}

#mainsns .facebook {
	width: 33.3%;
	height: 330px;
	margin-bottom: 10px;
	float:left;
	box-sizing:border-box;
	padding:0 10px;
}

#mainsns .facebook h2{
	background: url(../img/top/main/boxh2bg.png) no-repeat center top;
	margin:-35px auto 10px auto;
	width:95%;
	text-align:center;
	padding:0;
	height:45px;
	color:#4260b4;
}

#main .bnr_niconama {
	position: absolute;
	left: -11px;
	top: 492px;
	background: url(../img/top/main/bg_niconama.png) no-repeat left top;
}


#mainLeft .youtube {
	width: 730px;
	height: 660px;
	background: url(../img/top/youtube/bg.png) no-repeat left top;
	position: relative;
}

#mainLeft .youtube h2{
	margin-bottom: 28px;
}

#mainLeft .youtube .playerwrap{
	margin-bottom: 20px;
	width: 520px;
	height: 292px;
	padding: 20px 35px 67px 35px;
	background: url(../img/top/youtube/bg_player.png) no-repeat left top;
	position: relative;
	left: 71px;
}

#mainLeft .youtube .playerwrap #player{
	width: 520px;
	height: 292px;
}

#mainLeft .youtube .list{
	width: 626px;
	margin: 0 auto;
	position: relative;
}

#mainLeft .youtube .slide{
	width: 480px;
	height: 140px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

#mainLeft .youtube .slide ul{
	height: 140px;
	position: absolute;
	top: 0;
	left: -120px;
}

#mainLeft .youtube .slide ul li{
	width: 110px;
	height: 140px;
	margin: 0 5px;
	overflow: hidden;
	display: inline;
	float: left;
}
#mainLeft .youtube .slide ul li.list0{
	background-image: url(../img/top/youtube/thumb01.png)
}
#mainLeft .youtube .slide ul li.list1{
	background-image: url(../img/top/youtube/thumb02.png)
}
#mainLeft .youtube .slide ul li.list2{
	background-image: url(../img/top/youtube/thumb03.png)
}
#mainLeft .youtube .slide ul li.list3{
	background-image: url(../img/top/youtube/thumb04.png)
}

#mainLeft .youtube .slide ul li:hover{
	cursor: pointer;
	opacity: 0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

#mainLeft .youtube .slide ul li .thumb{
	width: 90px;
	height: 48px;
	margin: 12px auto;
	overflow: hidden;
	position: relative;
}

#mainLeft .youtube .slide ul li .thumb img{
	position: absolute;
	top: -10px;
}

#mainLeft .youtube .slide ul li .title{
	margin: 0 10px;
	color: #ffffff;
	font-size: 11px;
	line-height: 13px;
}


#mainLeft .youtube .slide ul li .date{
	margin: 0 10px;
	color: #ffffff;
	font-size: 11px;
	line-height: 13px;
	padding-top: 5px;
}


#mainLeft .youtube .ytnavi{
	width: 56px;
	height: 70px;
	position: absolute;
	top: 35px;
	background-position: 0 0;
	background-repeat: none;
}
#mainLeft .youtube .ytnavi:hover{
	cursor: pointer;
	background-position: 0 -70px
}
#mainLeft .youtube .ytnavi.prev{
	background-image:url(../img/top/youtube/btn_l.png);
	left: 0;
}
#mainLeft .youtube .ytnavi.next{
	background-image:url(../img/top/youtube/btn_r.png);
	right: 0;
}
#mainLeft .youtube .mark{
	position: absolute;
	left: 591px;
	top: 29px;
}

#opening {
	position: fixed;
	top:0;
	left:0;
	z-index:9999;
	background:#000000;
	width:100%;
}


#skip {
	width:179px;
	height:41px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:230px;
	margin-left:-90px;
}
#skip:hover { cursor:pointer;}
#slider {
	margin-bottom: 25px;
	/*width:640px;
	height:480px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-240px;
	margin-left:-320px;*/
}
@media only screen and (max-width: 909px) {
.mainArea { padding: 0!important; margin-bottom:0}
#slider {margin-bottom:0}
#opening { display:none;}
.maintxt, .mainlogo { display:none;}
#spmain2 { display: block; margin-bottom:30px;}
.pickup li {
	width:50% !important;
	padding:2% !important;
}
.pickup li img { width:100%; height:auto;}
.whatsnew .list{
	width: 98% !important;
	height: 165px;
	overflow: auto;
	box-sizing:border-box;
	margin:auto;
}

.whatsnew .list ul{
	width: 95%;
	float: left;
}

.whatsnew .list ul li{
	width: 96%;
	padding-bottom: 1px;
	background: url(../img/common/contents/line_bottom.png) repeat-x right bottom;
}

.whatsnew .list ul li .date{
	width: 100%;
	padding-left: 33px;
	background: url(../img/top/whatsnew/bullet.png) no-repeat left 10px;
	float: none;
	font-weight:bold;
	line-height: 40px;
}

.whatsnew .list ul li .title{
	width: 100%;
	padding-right: 0px;
	background-repeat: no-repeat;
	background-position: right top;
	float: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	line-height: 100%;
	box-sizing:border-box;
}
.list0 .title,.list1 .title,.list2 .title,.list3 .title { background:none !important;}

#mainsns .blog { width:100%}
#mainsns .yt {width: 100%;}
#mainsns .twitter { width:100%}
#mainsns .facebook { width:100%}
#mainsns .twitter .twwidget,
#mainsns .facebook .fbwidget{
	width: 90%;
	margin: 0 auto;
	
}
	
	#mainsns .twitter{
		margin-bottom: 80px;
		height: 330px;
	}
}