@charset "UTF-8";


body{overflow-x: hidden;}

/* container */

#container{
		padding-top: 37px;
		padding-bottom: 290px;
}

/* contents */

#contents{
		width: 1194px;

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;

		background-repeat: no-repeat,no-repeat,no-repeat;
		background-position: 0 0,0 0,0 0;
		background-size: 0 0,0 0,0 0;
}

#masonry{
		position: relative;
		width: 968px;
		zoom: 1;
}
#masonry:after{
		content: " "; display: block; height: 0; clear: both;
}

/* box */

.box{
		float: left;
		margin-bottom: 2px;
		margin-right: 2px;

		width: 482px;
		height: 298px;

		background: #FFF;

		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		
		/*overflow:hidden;*/
}

.box.topics_box{
		padding: 10px;
		background: url(../img/index/type_long_bg.jpg) no-repeat 0 0;		
		/*width: 482px;
		height: 298px;*/
}

.box.topics_box .topics_box{
		width: auto;
		height: auto;
}

.box a{
		display: block;
}
.box a img{
		display: inline;
		vertical-align: top;
}
.box.half{
		width: 236px;
}


/* topics */


.box .topics_box{
		/*width: 478px;
		height: 294px;*/
		border: 4px solid #33B9C8;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
}
.topics_box dl{
	
}
.topics_box dl dt{
		position: relative;
		display: block;
		padding: 10px;
		font-weight: normal;
		font-size: 18px;
		background: #33B9C8;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
}
.topics_box dl dt:before{
		content: "";
		
		position: absolute;
		top: 100%;
		left: 50%;
		
		display: block;

		margin-left: -11px;
		
		width: 23px;
		height: 8px;
		
		/*background: url(../common/img/icon/bottom_arrow_img01.png) no-repeat center bottom;	*/
}


.topics_box dl dt a{
		display: inline-block;
		padding: 0 20px 0 0;
		
		
		/*background: url(../common/img/icon/icon_img01.png) no-repeat right center;	*/
}



.topics_box dl dt a{
		color: #FFF;
}


.topics_box dl dd{
}

.topics_box dl dd ul{
		margin: 0;
		padding: 10px;
		height: 225px;
		
		overflow-y: scroll;
		overflow-x: hidden;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
}
.topics_box dl dd ul li{
}
.topics_box dl dd ul li:after{
		content: " "; display: block; height: 0; clear: both;	
}

.topics_box dl dd ul li a{
		display: block;

		padding: 10px;
		
		width: auto;
}
.topics_box dl dd ul li a:after{
		content: " "; display: block; height: 0; clear: both;	
}


.topics_box dl dd ul li span{
		display: block;
}
.topics_box dl dd ul li span.topics_date{
		float: left;
		
		margin: 0 0 5px;
		
		font-size: 10px;
		font-weight: bold;
		
		line-height: 100%;
}

.topics_box dl dd ul li span.topics_category{
		clear: both;
		float: left;
		width: 74px;
		
		margin: 0 10px 0 0;
		padding: 2px 0;
		
		font-size: 10px;
		font-weight: bold;
		font-family: "Advantage";
		letter-spacing: 1px;
		color: #FFF;
		
		background: #FF9326;
		
		text-align: center;
}
.topics_box dl dd ul li span.topics_category.blog{
		color: #FFF;
		background: #E78991;
}
.topics_box dl dd ul li span.topics_category.topics{
		color: #FFF;
		background: #7EC5C7;
}
/*.topics_box dl dd ul li span.topics_category.careers{
		color: #FFF;
		background: #FF9326;
}
.topics_box dl dd ul li span.topics_category.works{
		color: #FFF;
		background: #FF9326;
}*/

.topics_box dl dd ul li span.topics_title{
		float: left;
		
		width: 300px;
		
		padding: 0 0 16px;
		
		font-size: 12px;
		text-decoration: underline;
		line-height: 160%;
}

.topics_box dl dd ul li a:link span.topics_title,
.topics_box dl dd ul li a:visited span.topics_title{
}
.topics_box dl dd ul li a:hover span.topics_title,
.topics_box dl dd ul li a:active span.topics_title{
		color: #D2DAAD;		
}




/* side */

#side{
		position: absolute;
		right: 0;
		top: 0;
}



@media screen and (max-width:1200px){

#breadcrumbs span,
#contents{
		width: 952px;
}

#masonry{
		width: 736px;
}

#side{
		width: 222px;	
}

}


@media screen and (max-width:960px){

#contents{
		width: 100%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
}

#masonry{
		width: 728px;
		margin: 0 auto;
		padding-left: 0;
}

#side{
		clear: both;
		float: none;
		position: static;
		width: 722px;
		margin: 0 auto;
		padding: 0;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

#side ul li{
		width: 100%;
}

}


@media screen and (max-width:720px){

#masonry{
		width: 488px;
}

.box{
		width: 478px;
		margin: 0 4px 4px 0;
		padding: 0;
}

.box.half{
		width: 236px;
}

#container{
		padding: 4px 0 0 0;
}

#footer #footer_inner ul{
		margin: 0;
		padding: 0;
}

.box .topics_box{
		margin: 0;
		width: 100%;
		
		height: auto;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
}
.box .topics_box dl{

}
.box .topics_box dl dt{
		font-size: 1.4rem;
}
.box .topics_box dl dd{
		padding: 0;
}
.box .topics_box dl dd ul{
		width: 100%;
		height: 200px;
}
.box .topics_box dl dd ul li{
}
.box .topics_box dl dd ul li a{
		padding: 10px;

		border-bottom: 1px dotted #CCC;
}


.box .topics_box dl dd ul li span{
}
.box .topics_box dl dd ul li span.topics_date{
		margin: 3px 10px 0 0;
}
.box .topics_box dl dd ul li span.topics_category{
		clear: none;
}
.box .topics_box dl dd ul li span.topics_title{
		clear: both;
		width: auto;
		padding: 3px 0 0;
		
		font-size: 1.2rem;
}


#side{
	width: 488px;	
}


	
}

@media screen and (max-width:640px){

#header #header_nav ul{
		width: auto;
}

#header #header_nav ul li{
		width: 100%;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

#side{
		width: 100%;
		margin-bottom: 16%;
}

}
	
@media screen and (max-width:480px){

#contents{
		-webkit-transition: none 0 ease;
		-moz-transition: none 0 ease;
		transition: none 0 ease;
}
#masonry{
		width: 100%;
}

.box{
		margin: 0 2px 4px;
		width: auto;
		height: auto;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

.box.topics_box{
		margin: 0 0 4px;
		width: 100%;	
}

.box.half{
		width: 50%;
		margin: 0;
		padding: 0 2px 4px;
		
		background: transparent;
		
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}


.box a{
		display: block;
		width: auto;
}

.box img{
		width: 100%;
		height: auto;
		
		vertical-align: top;
}


}