@charset "utf-8";

/*
////////////////////////////////////////////////////////////////////////////////////////////// 

	RESPONSIVE CSS

//////////////////////////////////////////////////////////////////////////////////////////////
*/

/*
	-------------------------------------
	HACKS
	-------------------------------------
*/
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
a img { border: 0px; }

.video-container {position: relative;padding-bottom: 49.5%;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.video-container .mejs-video, .video-container .mejs-layer, .video-container video{position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}



/*
	-------------------------------------
	Smaller than standard 980 (devices and browsers)
	-------------------------------------
*/
@media only screen and (min-width: 769px) and (max-width: 980px) { 
	*, html{
		-webkit-font-smoothing: antialiased;
	}
	#header .contwrap, #main .contwrap, #footer .inner {width:720px;}
	#main-cont .one-half { width:50%; }
	.col1 {  width:240px; }
	.col2 { width:480px; }
	.col3 { width:480px; }
	
	#header #header_logo h1{
		display:block; 
		margin-left:10px;
		font-size:11px;
	}
	#header #navigation ul li{ margin:0 2px; width:45%;}
	#header #navigation ul li a {
	padding: 0 8px;
	}
	#main-cont h2 { margin:10px; }
	#main-cont .inner { padding:10px; }
	
	#support img {
		width:180px;
	}
	
	.inputarea dt.long + dd {
		margin-left:0;
	}
	.inputarea dd {
		width:auto;
	}
	.inputarea dd .half li {
		width:100%;
		margin-right:0;
	}
	
	.job-detail .com-txt {
		width:auto;
		float:none;
	}
	.job-photo {
		float:none;
		width:auto;
	}
	.job-photo div {
		width:32%;
		margin-left:3%;
		float:left;
	}
	.job-photo div:first-child {
		margin-left:0;
	}
	.job-photo img {
		width:100%;
		margin-bottom:0px;
	}
	
	#signup.box {
		height:auto;
	}
	#info .inner {
		min-height:auto;
	}
	#main p.sem-txt {
		float:none;
		width:auto;
	}
	.job-photo1,
	.seminar-photo1 {
		display:none;
	}
	.job-photo2,
	.seminar-photo2 {
		width:100%;
		display:block;
	}
	.job-photo2 div,
	.seminar-photo2 img {
		width:31%;
		margin-right:3%;
		float:left;
	}
	.job-photo2 div:nth-child(3),
	.seminar-photo2 img:nth-child(3) {
		margin-right:0;
	}
	#signup-pc {
		display:none;
	}
	#signup-smp {
		display:block;
	}
	.facebook-pc {
		display:none;
	}
	.facebook-tablet {
		display:block;
		height:350px;
	}

}


/*
	-------------------------------------
	SMARTPHONE and IPHONE Landscape
	-------------------------------------
*/

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

	#header .contwrap, #main .contwrap, #footer .inner {width:480px;}
	.col1, .col2, .col3 {float:none; width:100%; margin-bottom:5px; }
	
	h1{
		font-size:28px;
		line-height:32px;
	}
	h2{
		font-size:16px;
		line-height:20px;
	}
	h3{
		font-size:14px;
		line-height:20px;
	}
	h4{
		font-size:14px;
		line-height:24px;
		margin-bottom:10px;
	}
	h5{
		font-size:14px;
		line-height:22px;
		margin-bottom:8px;
	}
	h6{
		font-size:14px;
		line-height:17px;
		margin-bottom:5px;
	}
	
	#header{
		height:65px;
		background:#F2F2F2;
		position:fixed;
		z-index:100;
	}
	#header .contwrap {}
	#main .contwrap {padding-top:60px;}
	#menu_zone {display:none;}
	#sliderflex .box {height:auto;}
	#signup.box {height:auto;}
	#sidearea #signup { display:none;}
	.col2 { width:100%; }
	/*#main-cont .one-half { width:46%; margin:10px 2%; }*/
	#main-cont .inner { padding:10px; }
	
	#breadcrumb, #page_content { width: 100%; float:none; margin:0; }
	
	#header .logo_img { width:254px; }
	#header .logo_img img{ width: width:254px; margin-left:10px;}

	#header hgroup{ width:140px;}
	#header .open_phone_nav, #header #phone_navigation{
		display:block !important;
	}
	
	#header #navigation{ display:none; }
	
	#header #topnav {
		float:right;
		width:142px;
		margin:15px 0;
	}
	#header #topnav li{
		float:left;
		background:rgba(0, 0, 0, 0.2) no-repeat center center;
		/* CSS3 ROUND CORNER */
		-webkit-border-radius:		4px 4px 4px 4px;
		 -khtml-border-radius:		4px 4px 4px 4px;
		   -moz-border-radius:		4px 4px 4px 4px;
		     -o-border-radius:		4px 4px 4px 4px;
		        border-radius:		4px 4px 4px 4px;
	
		/* CSS3 SHADOW */
		-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
		   -moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
		     -o-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
		        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
		width:35px;
		height:30px;
		margin:0 13px 0 0;
		line-height:9px;
	}
	#header #topnav li#top {
		display:none;
	}
	
	#header #topnav li.iconwhite{
		float:left;
		background:rgba(0, 0, 0, 0.0) no-repeat center center;
		/* CSS3 ROUND CORNER */
		-webkit-border-radius:		4px 4px 4px 4px;
		 -khtml-border-radius:		4px 4px 4px 4px;
		   -moz-border-radius:		4px 4px 4px 4px;
		     -o-border-radius:		4px 4px 4px 4px;
		        border-radius:		4px 4px 4px 4px;
	
		/* CSS3 SHADOW */
		-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.0), 0px 1px 2px 0px rgba(0, 0, 0, 0.0) inset;
		   -moz-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.0), 0px 1px 2px 0px rgba(0, 0, 0, 0.0) inset;
		     -o-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.0), 0px 1px 2px 0px rgba(0, 0, 0, 0.0) inset;
		        box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.0), 0px 1px 2px 0px rgba(0, 0, 0, 0.0) inset;
		width:35px;
		height:30px;
		margin:0 8px 0 0;
		line-height:18px;
	}
	
	#header #topnav li a {
		width:35px;
		height:30px;
		display:block;
	}
	#header #topnav li img{
		padding-top:2px;
	}
	#header #topnav li span{ clear:both; font-size:0.7em; text-align:center; margin:0 -5px; width:45px; display:block;}
	#header #topnav li span.logout{ letter-spacing: -0.17em;}
	#header a.open_phone_nav{ display:block; clear:both; font-size:0.7em; text-align:center; line-height:72px; margin:-10px auto;}
	#header #topnav li span { display:none; }
	
	#footer .copyright {
		float:none;
		text-align:center;
		clear:left;
	}
	#main-cont h2 { margin:10px; }
	
	.inputarea dt {
		width:auto;
		float:none;
	}
	.inputarea dt p {
		display:inline;
		padding-left:10px;
	}
	.inputarea dt br {
		display:none;
	}
	.inputarea dd {
		width:auto;
		margin:0 0 20px 0px;
		padding-left:30px;
	}
	#support {
		position:relative;
		margin:10px;
		bottom:0;
		left:0;
		top:5px;
	}
	.member-logo {
		width:100%;
		margin-bottom:30px;
	}
	.member-logo br {
		display:none;
	}
	.member-logo img {
		width:140px;
	}
	#info .inner {
		min-height:auto;
	}
	
	.regist-info {
		clear:both;
		margin-left:0;
	}
	#main p.sem-txt {
		float:none;
		width:auto;
	}
	.job-photo1,
	.seminar-photo1 {
		display:none;
	}
	.job-photo2,
	.seminar-photo2 {
		width:100%;
		display:block;
	}
	.job-photo2 div,
	.seminar-photo2 img {
		width:31%;
		margin-right:3%;
		float:left;
	}
	.job-photo2 div:nth-child(3),
	.seminar-photo2 img:nth-child(3) {
		margin-right:0;
	}
	
	.pc {
		display:none;
	}
	.facebook-pc {
		display:none;
	}
	.first-smp {
		display:block;
	}
	.facebook-tablet {
		display:none;
	}
	.facebook-smp {
		display:block;
		height:250px;
	}
	
}


@media only screen and (max-width: 480px) {
	
	#header .contwrap, #main .contwrap, #footer .inner {width:auto;}
	
	.box { margin:2%; }
	#main-cont .one-half { width:auto; }
	#header .logo_img { width:180px; }
	#header .logo_img img{ width:180px; margin-left:10px;}
	#header #phone_navigation{

	}
	#header #phone_navigation h2 {
		width:200px;
	}
	#header #phone_navigation li{
		margin:2px 0 5px;
		padding: 0px 3% 2px;
		float:none;
		width:94%;
	}
	#header #phone_navigation li a{
		display:block;
		text-decoration:none;
	}
	#header #phone_navigation .global-circle li:nth-child(even){
		margin:0px;
	}
	#sliderflex {
		min-height:220px;
	}
	.btn-half {
		width:90%;
		margin:10px 5%;
	}
	#main-cont .one-half {
		width:90%;
		margin-right:5%;
		margin-left:5%;
		margin-bottom:10px;
	}
/*	#main-cont .one-half a {
		margin-bottom:0;
	}
*/

	.com-logo {
		width:76px;
		margin:0 10px 10px 0;
	}
	.job-outline .com-name,
	.job-outline .com-catch,
	.job-detail .com-name,
	.job-detail .com-catch {
		margin-left:0px;
	}
	.job-detail .com-txt {
		margin-right:0;
	}
	.com-info dt {
		float:none;
		margin-bottom:0;
	}
	.com-info dd {
		margin-left:0;
	}
	.data {
		float:none;
		width:100%;
	}
	.sem-place {
		top:10px;
		right:10px;
	}
	.com-catch {
		margin:0;
	}
	.sem-info .sem-tit {
		margin:10px 0 10px 0;
		padding-top:10px;
		font-size:16px;
		clear:right;
	}
	.regist-info {
		clear:left;
		margin-top:30px;
		margin-left:0px;
	}
	.sem-list .sem-tit {
		margin-left:0;
	}

	.sem-date dt {
		float:none;
		width:100%;
		margin-bottom:2px;
	}
	.sem-date dt p {
		display:inline;
		padding-left:0.5em;
	}
	.sem-date dd {
		margin-left:1em;
		margin-bottom:10px;
		min-height:1em;
	}
	
	.sem-time {
		float:none;
		width:100%;
	}
	.sem-place,
	.sem-list .sem-tit {
		margin-left:0;
	}
	.entry-top {
		position:relative;
		top:0;
		margin:0 30px 10px;
	}

}

@media only screen and (max-width: 360px) {
	#header .logo_img { width:140px;}
	#header .logo_img img{ width:140px; margin-left:10px;}
}

/*
	-------------------------------------
	RETINA IPHONE 4
	-------------------------------------
*/

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
/*	#header .logo_img img{ width:400px;}*/
}

/*
	-------------------------------------
	IE8  Hack
	-------------------------------------
*/
@media \0screen {
	  img { 
	  	width: auto; /* for ie 8 */
	  }
}