@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1160px) {
	#main .mainBox {
		padding: 0 1%;
	}
	#mainVisual .bg {
		background: url(/join/images/mainProfessional01.jpg) no-repeat center center #222;
		background-size: 150%;
	}
	#mainVisual .bg2 {
		background: url(/join/images/mainProfessional02.jpg) no-repeat 0 0 #222;
		background-size: 150%;
	}
	#mainVisual .bg3 {
		background: url(/join/images/mainProfessional03.jpg) no-repeat 0 0 #222;
		background-size: 150%;
	}
	#mainVisual h1 {
		padding: 7% 1% 0;
		font-size: 3.2rem;
	}
	#index,
	.indexBox02 section,
	#proCourse,
	#welcome,
	.welcomeBox02 div,
	#recruit,
	#recruitDetail {
    	padding: 0 1% 5%;
	}
}

@media screen and (max-width: 737px) {
	#mainVisual {
		width: 100%;
		height: 30%;
	}
	#mainVisual .bg,
	#mainVisual .bg2,
	#mainVisual .bg3,
	#mainVisualArea .detail {
		top: 0;
		background-size: 150%;
	}
	#mainVisual .bg {
		background: url(/join/images/mainProfessional01.jpg) no-repeat 0 0 #222;
		background-size: 150%;
	}
	#mainVisual .overlay {
		top: 5%;
	}
	#mainVisual h1 {
		font-size: 1.875rem;
		line-height: 1.3em;
	    padding: 15% 1% 0;
   		text-align: center;
	}
	#mainVisualArea h1 {
		font-size: 2em;
		line-height: 1.3em;
		top: 46%;
	}
	#mainVisual a.arrow01 {
		bottom: -20%;
	}
	#subnavBar ul li:nth-child(3n) {
		border-right: 2px solid #3c3c3c;	
	}
	#subnavBar ul li a {
		line-height: 2.5rem;
	}
	#index h2,
	#proCourse h2,
	#welcome h2,
	#recruit h2 {
		font-size: 1.8rem;
		padding-bottom: 0.2em;
	}
	#index h3 {
		margin-top: 1.5em;
	}
	.indexBox03 img {
		width: 42%;
	}
	#index .indexBox01 {
		display: block;
	}
	#index .indexBox01 section {
		width: auto;
		border: none;
	}
	#index .indexBox01 section:first-child {
		margin: 0;
	}
	.indexBox02 {
		padding: 2em 0;
	}
	.indexBox02 section h3 {
		margin-bottom: 1em;
	}
	#proCourse table {
		border: none;
	}
	#proCourse table th,
	#proCourse table td {
		width: auto;
		display: block;
		border: none;
	}
	#proCourse table th {
		margin-top: 0.8em;
	}
	#proCourse table td {
		padding: 0;
	}
	#proCourse table td.name {
		padding: 0.5em;
		margin-bottom: 0.5em;
	}
	#proCourse table td:last-child {
		margin-bottom: 1em;
	}
	#welcome .welcomeBox01 div ul li:not(:last-child) {
		margin-bottom: 0.8em;
	}
	#welcome #btnArea01 {
		margin: 2em auto;
	}
	#welcome #btnArea01 li {
		display: block;
	}
	#welcome #btnArea01 li:first-child {
		margin: 0 0 1em;
		width: auto;
	}
	#welcome #btnArea01 li:last-child {
		width: auto;
	}
	#welcome #btnArea01 li:first-child a {
		padding: 0.8rem 0.5rem 1.2rem;
		line-height: 1.0;
		height: auto;
	}
	#welcome #btnArea01 li:last-child a {
		padding: 1rem;
		line-height: 1.0;
		height: auto;
	}
	#welcome #btnArea01 li a img {
		margin: 0 0.5em 0 0;
	}
	/*#welcome #btnArea01 li a i {
		vertical-align: middle;
	}*/
	.welcomeBox02 {
		padding: 2em 0;
	}
	.welcomeBox02 div h3 {
		margin-bottom: 1em;
	}
	.welcomeBox02 div dl dd a {
		display: block;
	}
	#recruit table {
		border: none;
		text-align: center;
	}
	#recruit table thead {
		display: none;
	}
	#recruit table tr {
		display: block;
		margin-bottom: 20px;
		overflow: hidden;
	}
	#recruit table td {
		border: none;
		display: block;
		padding: 0 0 1em;
	}
	#recruit table td::before {
		content: attr(data-label);
		display: block;
		background: #222;
		color: #fff;
		padding: 0.5em;
		font-weight: bold;
		margin-bottom: 0.5em;
	}
	#recruit table td.mail, #recruit table td.detail {
		width: auto;
	}
	#recruit table td.mail::before,
	#recruit table td.detail::before {
		display: none;
	}
	.recruitDetailBox01 .btn01 {
		position: static;
		width: auto;
		margin: 0 0 2em;
	}
	#recruitDetail table {
	}
	#recruitDetail table th {
		display: block;
		width: auto;
	}
	#recruitDetail table td {
		display: block;
		width: auto;
	}
	#main .bnrArea01 {
		padding: 0 1%;
	}
	#main .bnrArea01 a {
		width: auto;
	}

}