@charset 'utf-8';

/* -----------------------------------------------------------
CSS Information

File name:      solidemo150610.css
Update:         2015/05/25
Style Info:     

	01. 全体用
	02. アイテムページ用

----------------------------------------------------------- */



/* ----------------------------------------------------------------------
  01. 全体用
---------------------------------------------------------------------- */

/* import style
------------------------------------------------------------------- */
@import url('../../mod_default.css');
@import url('../../mod_layout.css');
@import url('../../mod_headerfooter.css');
@import url('../../mod_common.css');
/*@import url('../../mod_login.css');
@import url('../../mod_form.css');*/


/* siteTitleArea
---------------------------------------------------------------------- */
body#event #siteTitleArea {
	display: none;
}

/* This page style
---------------------------------------------------------------------- */
#eventContentsArea {
	margin: 0 auto;
	width: 810px;
	background: #f3d8c0;
	text-align: left;
	color:#592822;
}

#eventContentsArea img {
	vertical-align: bottom;
}


/* ----------------------------------------------------------------------
  02. イベントページ用
---------------------------------------------------------------------- */




/* イベント枠用
------------------------------------------- */
#eventContentsArea #titleArea h2{
	display:none;
}


/* clearfix
------------------------------------------- */
#eventContentsArea #mainArea:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* 共通　＆ スマホ用
------------------------------------------ */

#wrap01purin160403 { width:100%; background:url(../../../image/event/camp/pompompurin_160413/bg01.png) repeat;}


@media screen and (max-width:738px) { 


/*ナビゲーション
------------------------------------------------*/

body #event{
	background:none;
}

body #event.festivalEvent{
	width:320px;
}

#event #container {
    width: 100%;
	background: background:url(../../../image/event/camp/pompompurin_160413/bg01.png) repeat;
}

#event #headerArea {
    width: 320px;
    margin: 0 auto;
	height:70px;
	background: url("/image/event/camp/bearsschool_151202/sp/bg_spheader.png") repeat-x;
}
div#headerArea {
    width: 100%;
    height: 29px;
}

#headerArea.simple .headerArea-inner {
    position: relative;
    width: 320px;
}

.simple #globalNavi {
    top: 25px;
    left: 26px;
    width: 280px;
    height: 41px;
}

.simple #globalNavi li {
    width: auto;
    height: 20px;
	margin:0 3px;
}

#headerArea.simple #utilityNavi {
    top: 7px;
	right:2px;
}

#utilityNavi li {
    display: inline;
    list-style-type: none;
    margin-left: 0px;
    padding-right: 2px;
    padding-top: 1px;
    border-right: 1px solid #aaa;
}

html>body #footerArea,
html .btnList{
	display:none;
}

.HeaderArea{
	background:#ffaaa2;
}

/*ここまで　ナビゲーション
------------------------------------------------*/



		
	#purin_contents { 
		margin:0 auto;
		}

img { max-width:100%; vertical-align:bottom;}


.pagetitle { position:relative; }

.socialBtnArea ul{
	position:absolute;
	width:70%;
	top:90.8%;
	left:20.0%;
}

.socialBtnArea li { float:left; width:40px; margin-right:10px;  }
.socialBtnArea li:last-child { margin-right:0px; }


.nav { display:none; }

.dummy  { display:none; }

/*ブログ投稿エリア スマホ
------------------------------------------------*/


#blog_event { position:relative; }


.gotobloglist {	
	position:absolute;
	top:50.95%;
	left:55.1%;
	z-index:1;
}

.btnBlog {
	position:absolute;
	top:88.92%;
	z-index:1;
	padding:10px;
}


.blogList{
	width:150px;
}

.blogListArea{
	background:url(../../../image/event/camp/pompompurin_160413/bg_bloglist.png) no-repeat top center;
	width:100%;
	min-height:100%;
    background-size: 95% auto;
	padding: 3% 0 10% 0px;
	margin:10px auto;
	position:absolute;
	top:47.86%;
	
}

.newBlogList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
	width:320px;
}

.newBlogList .avatarImg {
	float: left;
	width: 68px;
	height: 68px;
	margin-left: 5px;
	padding: 2px 0 0 2px;
	background: url("/image/common/bg_avatarbust.gif") no-repeat;
	z-index:5;
}

.newBlogList dl {
	position: relative;
	padding-top: 5px;
	margin-left: 80px;
	height: 70px;
}

* html .newBlogList dl{
	\height /**/: 75px; /* IE5 */
}

.newBlogList dt {
	font-weight: normal;
	overflow: hidden;
	color: #978356;
	font-weight: bold;
}

.newBlogList dt a:link{
	color: #978356;
	text-decoration: none;
}

.newBlogList dt a:hover{
	color: #978356;
	text-decoration: underline;
}

.newBlogList dd.post {
	position: absolute;
	top: 4px;
	right: 3px;
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-weight:normal;
	font-family:Verdana, sans-serif;
}

.newBlogList dd.id {
	/*padding-top: 1px;
	padding-bottom: 5px;*/
	padding-top: 7px;
	padding-bottom: 1px;
	font-size: 11px;
}

.newBlogList dd.time {
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id span.category,
.newBlogList dd.time span.category {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;
	/* border-left: 1px solid #ddd; */
 }

.newBlogList dd.title{
	overflow: hidden;
	padding-left: 11px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}

.newMessageList dd.comment {
	overflow: hidden;
	padding-left: 14px;
	background: url("/image/common/ico_comment.gif") no-repeat 0 4px;
}

.newBlogList dd.id a:link,
.newBlogList dd.title a:link {
	color: #777;
	text-decoration: none;
}

.newBlogList dd.id a:hover,
.newBlogList dd.title a:hover{
	color: #777;
	text-decoration: underline;
}

/*ブログスクロールバー*/
#scrollbar1{
	width: 93%;
	margin:0 auto;
	padding-top:20px;
}

#scrollbar1 .viewport{
  width: 85%;

  min-height:200px;
  max-height:90%;
  overflow: hidden;
  position: relative;
  top:25px;
  left:10px;

}

#scrollbar1 .overview{
	list-style: none; width:80%; position: absolute; left: 0; top: 0; padding: 10px; margin: 0px 0 0 0;
}

#scrollbar1 .scrollbar{
	position: relative;
	background:url(../../../image/event/camp/bearsschool_160203/sp/img_bar.gif) no-repeat;
	float: right; 
	width: 20px;

	padding: 2px 0 0 0;
	margin:5% 0 0 3%;
}

#scrollbar1 .thumb .end{
	background:url(../../../image/event/camp/bearsschool_160203/sp/img_bar_end.png) no-repeat 50% 0;
	overflow: hidden;
	height: 7px;
	width: 10px;
}
#scrollbar1 .thumb{
	background:url(../../../image/event/camp/bearsschool_160203/sp/img_bar.png) no-repeat 50% 100%;
	width: 10px;
	height:100px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	left:2px;
	margin-top:5px;
}

/* //ブログここまで-------------------- */

.btnTwon, .btnTowns, .btnPresent  { visibility:hidden; display:none; }

#item {position:relative;}
.btnItem { position:absolute; top:88.44%; padding:0 10px 20px; } 
#interior {position:relative;}
.btnInterior { position:absolute; top:85.55%; padding:0 10px 10px; } 

#present {position:relative;}
.btnItem2 { position:absolute; top:87.82%; padding:0 10px 10px; } 


.sanrio_link { background:url(../../../image/event/camp/pompompurin_160413/bg02.png) repeat;}
.sanrio_link ul { paddign:120px auto 50px; }
.sanrio_link li { text-align:center; }

.copy_smp { margin-bottom:0px; }


.purinFooter { margin:20px; }
#purinbackBtn img { width:50%; } 


/* ブログ一覧  スマホ用
------------------------------------------ */

.sp_induce {
	display:none;
}

.blogsubTit{
	width:90%;
	margin:0 auto;
	
}

.blogsubTit img{
	width:100%;
	
}

#purinMovie160203 #blogListArea .bloglist {
    margin-bottom: 5px;
    padding: 5px 5px 15px 5px;
    clear: both;
    background: url("/image/common/line_dot.gif") bottom left repeat-x;
    overflow: hidden;
}




.purinblogArea {

	position: relative;
	padding:0;
	margin:0 auto 180px;
		
	
	
}

#purinbackBtn {
	margin:5px;
	
}

.purinbloglist{
	background:#FFFFFF;
	width:98%;
	padding:5px;
	margin:0 auto;
	overflow:hidden;
	
}



.purinbloglist #contentsArea {
    margin-bottom: 10px;
    float: left;
    width: 95%;
}

.purinbloglist.avatarImg {
    float: left;
    width: 68px;
    height: 68px;
    margin-left: 5px;
    _margin-left: 3px;
    padding: 2px 0 0 2px;
    background: url("/image/common/bg_avatarbust.gif") no-repeat;
}
	
.purinbloglist dl {
    position: relative;
    padding-top: 5px;
    margin-left: 80px;
    height: 70px;
}

.purinbloglist dl dd.post {
    position: relative;
    font-size: 12px;
    color: #666;
	margin-bottom:10px;
}

.purinbloglist .post a {
	display:none;
}

#wrap01purin160403 #purinMovie160203 .purinbloglist .bloglist dl dd.post span.time {
    font-size: 11px;
    color: #999;
    font-family: Verdana, sans-serif;
	border-left: 0px solid #fff;
}

.purinbloglist .bloglist dl dd.post span.time:before {
    content:"\A";
 white-space: pre;
}



#purinMovie160203 .purinbloglist .bloglist dd.blogTxt {
    position: absolute;
    bottom: 0px;
    left: 0;
    padding-left: 11px;
    overflow: hidden;
    word-break: break-all;
    background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}



.purinbloglist .bloglist dl dd.category {
    position: absolute;
    top: 2px;
    right: 3px;
}	

#purinMovie160203 .purinbloglist dl dd.more {
    padding-left: 12px;
    position: absolute;
    bottom: -13px;
    right: 0;
    font-size: 10px;
    background: url("/image/common/ico_more.gif") no-repeat 0 0.3em;
}



}


/***** 739px 以上*******
------------------------------------------ */

@media only screen and (min-width: 738px) {
	
	#wrappurin160403 { 
		width:1000px;
		margin:0 auto;
		background:url(../../../image/event/camp/pompompurin_160413/bg02.png) repeat;
		}
		
	#purin_contents { 
		width:980px;
		margin:0 auto;
		}
		

		
	.nav {
	display:block;
	background:url(../../../image/event/camp/pompompurin_160413/bg_menu.png) no-repeat;
	width:980px;
	height:94px;
	position:relative;
	z-index:999;
	}
	
	.nav ul { width:860px; padding:27px 0 0 63px;}
	.nav li { float:left; margin-right:20px; position:relative;}
	.nav li:last-child { margin-right:0px; }
	
	

	.nav .new span { position:absolute; top:-16px; left:-5px;}

	
	
	.fixed {
    position: fixed;
    top: 0;
    z-index: 10000;
}

	.pagetitle {
		background:url(../../../image/event/camp/pompompurin_160413/top_title.png) no-repeat ;
		height:673px;
		margin-top:-40px;
		position:relative;
	}
	
	.pagetitle img { visibility:hidden; }
	
	
	.socialBtnArea ul{
	position:absolute;
	width:160px;
	top:580px;
	left:736px;
	z-index:1;
	}
	.socialBtnArea li { float:left;  margin-right:5px;}
	.socialBtnArea li:last-child { margin-right:0px; }	
	.socialBtnArea li img { visibility:visible; width:32px;}
		

	
	
/*ブログ投稿エリア
------------------------------------------------*/

#blog_event {
		background:url(../../../image/event/camp/pompompurin_160413/blog_event.png) no-repeat;
		height:637px;
		position:relative;
}



#blog_event img { visibility:hidden; }
#blog_event #scrollbar1 .avatarImg img { visibility:visible; }

.gotobloglist {
	position:absolute;
	top:159px;
	left:825px;
	z-index:1;	
}

#blog_event .gotobloglist img, #blog_event .btnBlog img {visibility:visible;}

.btnBlog { padding:0;
position:absolute;
top:520px;
left:240px;
}

.blogList{
	width:150px;
}

.blogListArea{
	position:absolute;
	background:url(../../../image/event/camp/pompompurin_160413/bg_bloglist.png) no-repeat;
	width:370px;
	height:304px;
	top:144px;
	left:590px;
	padding:50x 0 0 0px;
}



.blogArea .blogList{
	width:150px;
}



.newBlogList {
	margin-bottom: 5px;
	padding: 0;
	clear: both;
	background: url("/image/common/line_dot.gif") bottom left repeat-x;
	overflow: hidden;
	width:320px;
}

.newBlogList .avatarImg {
	float: left;
	width: 68px;
	height: 68px;
	margin-left: 5px;
	_margin-left: 3px;
	padding: 2px 0 0 2px;
	background: url("/image/common/bg_avatarbust.gif") no-repeat;
}

.newBlogList dl {
	position: relative;
	padding-top: 5px;
	margin-left: 80px;
	height: 70px;
}

* html .newBlogList dl{
	\height /**/: 75px; /* IE5 */
}

.newBlogList dt {
	font-weight: normal;
	overflow: hidden;
	color: #978356;
	font-weight: bold;
}

.newBlogList dt a:link{
	color: #978356;
	text-decoration: none;
}

.newBlogList dt a:hover{
	color: #978356;
	text-decoration: underline;
}

.newBlogList dd.post {
	position: absolute;
	top: 4px;
	right: 3px;
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-weight: normal;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id {
	/*padding-top: 1px;
	padding-bottom: 5px;*/
	padding-top: 7px;
	padding-bottom: 1px;
	font-size: 11px;
}

.newBlogList dd.time {
	padding-bottom: 5px;
	font-size: 11px;
	color: #999;
	font-family: Verdana, sans-serif;
}

.newBlogList dd.id span.category,
.newBlogList dd.time span.category {
	margin-left: 7px;
	padding-top: 1px;
	padding-left: 7px;
	font-size: 11px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;
	border-left: 1px solid #ddd;
}

.newBlogList dd.title{
	overflow: hidden;
	padding-left: 11px;
	background: url("/image/common/ico_blogtxt.gif") no-repeat 0 4px;
}

.newMessageList dd.comment {
	overflow: hidden;
	padding-left: 14px;
	background: url("/image/common/ico_comment.gif") no-repeat 0 4px;
}

.newBlogList dd.id a:link,
.newBlogList dd.title a:link {
	color: #777;
	text-decoration: none;
}

.newBlogList dd.id a:hover,
.newBlogList dd.title a:hover{
	color: #777;
	text-decoration: underline;
}

/*ブログスクロールバー*/
#scrollbar1{
	width: 355px;
	margin:0;
	padding:48px 0 0 15px;

}

#scrollbar1 .viewport{
  width: 320px;
  height: 243px;
  overflow: hidden;
  position: relative;
}

#scrollbar1 .overview{
	list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 10px 0 0 0;
}

#scrollbar1 .scrollbar{
	position: relative;
	background:url(../../../image/event/camp/bearsschool_160203/img_bar.gif) no-repeat;
	float: right; 
	width: 20px;
	margin-top:5px;
	padding: 2px 0 0 0;
}

#scrollbar1 .thumb .end{
	background:url(../../../image/event/camp/bearsschool_160203/img_bar_end.png) no-repeat 50% 0;
	overflow: hidden;
	height: 7px;
	width: 10px;
}
#scrollbar1 .thumb{
	background:url(../../../image/event/camp/bearsschool_160203/img_bar.png) no-repeat 50% 100%;
	width: 10px;
	height:100px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	left:2px;
	margin-top:5px;
}





/*---ブログ　ここまで------- */



#town_event {
		background:url(../../../image/event/camp/pompompurin_160413/town.png) no-repeat;
		height:750px;
		position:relative;
}

#town_event img { visibility:hidden; }
#town_event .btnTwon { display:block; }
#town_event .btnTwon img { visibility:visible; }

.goMovie { position:absolute; top:638px; left:64px;}
.goTown { position:absolute; top:638px; left:518px;}



#item {
		background:url(../../../image/event/camp/pompompurin_160413/item.png) no-repeat;
		height:640px;
		position:relative;
}
#item img { visibility:hidden; }
#item .btnItem img { visibility:visible; }
#item .btnItem { position:absolute; top:533px; left:183px;}


#interior {
		background:url(../../../image/event/camp/pompompurin_160413/interior.png) no-repeat;
		height:970px;
		position:relative;
}
#interior img { visibility:hidden; }
#interior .btnInterior img { visibility:visible; }
#interior .btnInterior { position:absolute; top:825px; left:183px;}


#present {
		background:url(../../../image/event/camp/pompompurin_160413/present.png) no-repeat;
		height:880px;
		position:relative;
}
#present img { visibility:hidden; }
.btnItem2 { visibility:hidden; display:none;}
#present .btnPresent img  { visibility:visible; }
#present .btnTowns img  { visibility:visible; }
#present .btnPresent img, .btnTowns img { width:287px; }
#present .btnPresent { position:absolute; top:765px; left:36px;}
#present .btnTowns { display:block;  }
#present .btnTowns { position:absolute; top:765px; left:355px; }


#pre_interior  {
		background:url(../../../image/event/camp/pompompurin_160413/pre_interior.png) no-repeat;
		height:511px;
		position:relative;
}

#pre_interior img { visibility:hidden; }
#pre_present  {
		background:url(../../../image/event/camp/pompompurin_160413/pre_present.png) no-repeat;
		height:479px;
		position:relative;
}
#pre_present img { visibility:hidden; }



.sanrio_link { background:url(../../../image/event/camp/pompompurin_160413/sanrio_link.png) no-repeat;
height:296px;
position:relative; }

.sanrio_link ul { position:absolute; width:635px; top:38px; left:175px; }
.sanrio_link li { float:left; margin-right:126px; }
.sanrio_link li:last-child { margin-right:0px; }

.copy_smp { display:none; }


/* 紹介ムービー
------------------------------------------ */
#purinMovie160413 {
	background:url(../../../image/event/camp/pompompurin_160413/bg_moviepage.png) repeat;
	
}

.movieTit {
	width:870px;
	height:210px;
	margin:0 auto 0px;
	padding-top:20px;
}

#purinMovie160413 .purinintroArea{
	background:url(../../../image/event/camp/pompompurin_160413/bg_intromovie.png) no-repeat top center;
	width:870px;
	height:729px;
	position: relative;
	padding:0;
	margin:0 auto 20px;
}

#purinMovie160413 .purinintroArea .flash{
	position:absolute;
	top:70px;
	left:40px;
	border:1px solid red;
}

#purinbackBtn {

	position:absolute;
	top:3px;
	left:20px;
}

.purinFooter { width:587px; margin:0 auto; }

/* ブログ一覧
------------------------------------------ */
.blogsubTit {
	width:546px;
	height:53px;
	margin:0 auto 20px;
	
}

.purinblogArea {	
	background:url(../../../image/event/camp/pompompurin_160413/bg_bloglistpage.png) no-repeat top center ;
	width:870px;
	height:1052px;
	position: relative;
	padding:0;
	margin:0 auto 10px;
	
	
}

.purinbloglist{
	width:650px;
	position:absolute;
	top:100px;
	left:103px;
	
	
}

#purinbackBtn img { width:253px; height:39px; } 



}


