@charset "utf-8";

/* ----------------------------------------------------------------------
base
---------------------------------------------------------------------- */
.framebox_innder{
	padding: 20px 30px 30px;
}

/* ----------------------------------------------------------------------
    header
---------------------------------------------------------------------- */
#header{margin: 0;}

/* ----------------------------------------------------------------------
#wrap_banner
---------------------------------------------------------------------- */
#wrap_topbanner li{
	display: inline-block;
	background: #fff;
	width: 495px;
	border: solid 1px #000;
	box-shadow:inset 0 0 0 3px #fff;
	-webkit-box-shadow:inset 0 0 0 3px #fff;
	-moz-box-shadow:inset 0 0 0 3px #fff;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	padding: 1px;
	margin:0 0 10px 0;
	font-size: 0;
}

#wrap_topbanner li:nth-child(2n){margin-left: 10px;}

#wrap_topbanner li img{
	width: 100%;
	height: auto;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px;
}


/* ----------------------------------------------------------------------
    #wrap_twitter
---------------------------------------------------------------------- */
#wrap_twitter{
	width: 400px;
}

#wrap_twitter #wrap_twitterinner{
	margin-left: -10px;
	height: 350px;
}

#wrap_twitter .button,#wrap_twitter .button img,
#wrap_bridgeinfo .button,#wrap_bridgeinfo .button img{
	width: 314px;
	height: 50px;
}

/* ----------------------------------------------------------------------
    #wrap_info
---------------------------------------------------------------------- */
#wrap_bridgeinfo{
	width: 580px;
}

#wrap_bridgeinfoinner{
    height: 340px;
	padding-right: 15px;
	overflow-y: auto;
}

#wrap_bridgeinfo .box{
	padding: 0;
	margin-bottom: 10px;
	transition: background-color 0.2s ease-out;
	-webkit-transition: background-color 0.2s ease-out;
}
#wrap_bridgeinfo .box:hover{	background: #333;}

#wrap_bridgeinfoinner a{
	display: block;
	padding: 20px 16px 15px 20px;
	font-weight: normal;
	
}

#wrap_bridgeinfoinner a,
#wrap_bridgeinfoinner a:hover{color: #fff!important;
	text-decoration: none;}

#wrap_bridgeinfo span.date{
    display:block;
    float:left;
    width:240px;
	font-size: 18px;
    line-height: 25px;
    margin-left:10px;
}

#wrap_bridgeinfo span.body{
	clear: both;
    display: block;
    width: 100%;
    line-height: 24px;
    padding-top: 6px;
}

#wrap_bridgeinfo span.category{
    width: 48px;
    height: 25px;
    display:block;
    float:left;
    background-image:url(../images/top/infocategory_sprite.png);
    background-repeat:no-repeat;
    text-indent:-9999px;
    overflow:hidden;
}

#wrap_bridgeinfo span.category.cat1{background-position:0px 0px;}
#wrap_bridgeinfo span.category.cat2{background-position:0px -25px;}
#wrap_bridgeinfo span.category.cat3{background-position:0px -50px;}
#wrap_bridgeinfo span.category.cat4{background-position:0px -75px;}
#wrap_bridgeinfo span.category.cat5{background-position:0px -100px;}
#wrap_bridgeinfo span.category.cat6{background-position:0px -125px;}
#wrap_bridgeinfo span.category.cat7{background-position:0px -150px;}
#wrap_bridgeinfo span.category.cat8{background-position:0px -175px;}
#wrap_bridgeinfo span.category.cat9{background-position:0px -200px;}
#wrap_bridgeinfo span.category.cat10{background-position:0px -225px;}

/* ----------------------------------------------------------------------
    footer
---------------------------------------------------------------------- */
#topfooter{
    width:100%;
    height: 172px;
    background:url(../images/footer/topfooter.jpg) left top repeat-x;
}

#footerbanner li{
	display:  inline-block;
	margin: 23px 5px 0;
	background: #fff;
}

#btnCompany{
	padding: 20px 0;
	background: #fff;
}



/* ----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
for smartphone
----------------------------------------------------------------------
----------------------------------------------------------------------
---------------------------------------------------------------------- */
@media only screen and (max-width:640px){
	/* ----------------------------------------------------------------------
	base
	---------------------------------------------------------------------- */
	.framebox_innder{
		padding: 20px 30px 30px;
	}

	/* ----------------------------------------------------------------------
		header
	---------------------------------------------------------------------- */
	#header{padding-top: 215px;}
	#header,#wrap_topbanner{
		width: 574px;
		margin: 0 auto;}

	#header .button_spec{margin-top: 15px!important;}
	
	/* ----------------------------------------------------------------------
	#wrap_banner
	---------------------------------------------------------------------- */
	#wrap_topbanner li{		width: 574px;	}
	#wrap_topbanner li:nth-child(2n){margin-left: 0;}

	/* ----------------------------------------------------------------------
		#wrap_twitter
	---------------------------------------------------------------------- */
	#wrap_twitter,#wrap_bridgeinfo{
		width: 650px;
		float: none;
	}
	#wrap_twitter{		margin-top: 60px!important;}
	
	#wrap_twitter #wrap_twitterinner{
		margin-left: 0;
	}

	#wrap_twitter .button,#wrap_twitter .button img,
	#wrap_bridgeinfo .button,#wrap_bridgeinfo .button img{
		width: 440px;
		height: 70px;
	}

	/* ----------------------------------------------------------------------
		#wrap_info
	---------------------------------------------------------------------- */
	#wrap_bridgeinfoinner{
		padding: 0;
	}

	#wrap_bridgeinfo .box{
	}

	#wrap_bridgeinfoinner a{
		padding: 25px 15px 20px 25px;
	}

	#wrap_bridgeinfo span.date{
		font-size: 20px;
		line-height: 32px;
	}

	#wrap_bridgeinfo span.body{
		font-size: 22px;
		line-height: 30px;
		padding-top: 10px;
	}

	#wrap_bridgeinfo span.category{
		width: 56px;
		height: 30px;
		background-image:url(../images/top/infocategory_sprite_sp.png);
		background-repeat:no-repeat;
		text-indent:-9999px;
		overflow:hidden;
	}

	#wrap_bridgeinfo span.category.cat2{background-position:0px -30px;}
	#wrap_bridgeinfo span.category.cat3{background-position:0px -60px;}
	#wrap_bridgeinfo span.category.cat4{background-position:0px -90px;}
	#wrap_bridgeinfo span.category.cat5{background-position:0px -120px;}
	#wrap_bridgeinfo span.category.cat6{background-position:0px -150px;}
	#wrap_bridgeinfo span.category.cat7{background-position:0px -180px;}
	#wrap_bridgeinfo span.category.cat8{background-position:0px -210px;}
	#wrap_bridgeinfo span.category.cat9{background-position:0px -240px;}
	#wrap_bridgeinfo span.category.cat10{background-position:0px -270px;}
	
	/* ----------------------------------------------------------------------
    footer
	---------------------------------------------------------------------- */
	#topfooter{
		height: 380px;
		margin-bottom: 40px;
		background:url(../images/footer/topfooter_sp.jpg) left top repeat-x;
	}

	#footerbanner li{
		margin: 28px 10px 0;
	}
	#footerbanner li img{
		width: 280px;
		height: 147px;
	}
	
	#btnCompany{
		padding: 20px ;
	}
}