@charset "utf-8";
/*///////////////////////////////////////////////////////////////////
CSS information
 file_name : basic_ex.css
 style_info : Mediaquery Style
///////////////////////////////////////////////////////////////////*/

/*===============================================================
 920px > width Style
===============================================================*/
@media screen and (max-width: 920px) {

.work_wrap{
	max-width: 600px;
}

}/* ---------------------------------- end */



/*===============================================================
 720px > width Style
===============================================================*/
@media screen and (max-width: 720px) {

/* loading */
.loading_visual{
	width: 110px;
	height: 120px;
	margin-left: -55px;
	margin-top: -60px;
}
.loading_icon {
	height: 87px;
}
.loading_wrap .progress {
	padding-top: 9px;
}
.loading_wrap .progress .text {
	font-size: 13px;
	letter-spacing: 0.4px;
}


.wrapper{
	padding-top: 0;
}
.section_top,.mask_block_left,.mask_block_right{
	display: none;
}
.work_wrap{
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	padding-top: 0;
}
.work_wrap .sp_visual_wrap{
	display: block;
}
.work_wrap .info{
	font-size: 12px;
}


}/* ---------------------------------- end */



/*===============================================================
 460px > width Style
===============================================================*/
@media screen and (max-width: 460px) {

.work_wrap .sp_visual_wrap{
	margin-bottom: 18px;
}

h3 p.section_title{
	font-size: 20px;
}
h3 p.section_title:after{
	width: 30px;
	margin-top: 4px;
	background-color: #444444;
}

.work_wrap .info a.portfolio_link{
	width: 220px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 11px;
}

.work_wrap .back a{
	font-size: 11px;
}


}/* ---------------------------------- end */