@charset "utf-8";


/*/////////////////////////////////////////////////////////////////////
    for PC  パソコン画面用（768px以上）
/////////////////////////////////////////////////////////////////////*/

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

	body {
		min-width: 1280px;
		margin: 0 auto;
	}

	#wrapper {}

	br.pc_none {
		display: none;
	}


	/*==================================================
    h1  for PC
==================================================*/


	.fv_top {
		width: 100%;
		height: 300px;
		padding: 30px;
		background-image: url(../../recruit/img/fv_bg.jpg);
		background-position: center;
		background-repeat: no-repeat;
	}

	.fv_top p {
		font-size: 50px;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin-top: 90px;
		line-height: 0.8;
	}

	.fv_top p span {
		font-size: 30px;
		color: #8CB93A;
		font-weight: bold;
		text-align: center;
	}



	/*==================================================
    Main メリット  for PC
==================================================*/

	#merit {
		margin: 0 auto 60px;
		background-image: url(../../recruit/img/merit_bg.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}


	#merit .merit_in {
		width: 960px;
		margin: auto;
		padding: 35px 0 20px;
	}

	#merit ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 960px;
		margin: 0 auto 20px;
	}

	#merit ul li {
		width: 310px;
		margin-bottom: 20px;
	}

	#merit ul li img {
		width: 100%;
	}

	#merit ul li p {
		margin-top: 10px;
		font-size: 16px;
	}





	/*==================================================
    Main 募集要項を見る  for PC
==================================================*/

	#btn_youkou {
		width: 460px;
		margin: 0 auto;
		padding: 30px 0;
	}

	#btn_youkou a img {
		width: 460px;
		margin: auto;
	}



	/*==================================================
    Main 募集要項  for PC
==================================================*/

	#recruit_wrap {
		margin: 0 auto 60px;

	}


	#recruit_wrap p {
		text-align: center;
		padding-bottom: 60px;

	}

	.recruit {
		margin: 60px auto;
	}

	.recruit .step_naiyou {
		width: 930px;
		margin: auto;
		background-color: #fff;
	}

	.recruit .step_naiyou dl {
		display: flex;
		border-bottom: 1px dotted #bdbdbd;
	}

	.recruit .step_naiyou dl dt,
	.recruit .step_naiyou dl dd {}

	.recruit .step_naiyou dl dt {
		width: 180px;
		height: 32px;
		margin: 30px 30px 30px 0;
		background-color: #000;
		text-align: center;
		font-size: 18px;
		letter-spacing: 0.2em;
		line-height: 32px;
		color: #fff;
	}

	.recruit .step_naiyou dl dd {
		width: 660px;
		padding: 20px 0;
		font-size: 16px;
		line-height: 30px;
		color: #333;
	}

	.recruit .step_naiyou dl dd span {
		font-size: 25px;
		line-height: 50px;
	}

	/*お問い合わせ文字 start
    ------------------------------*/
	.recruit .step_naiyou em {
		font-size: 16px;
	}

	.recruit .step_naiyou a:link {
		color: #333;
	}


	/*==================================================
    Main 募集要項  for PC
==================================================*/




	/*タブ切り替え全体のスタイル*/
	.tabs {
		margin-top: 50px;
		padding-bottom: 40px;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		width: 960px;
		margin: 0 auto;
	}

	/*タブのスタイル*/
	.tab_item {
		width: calc(100%/2);
		height: 50px;
		border-bottom: 3px solid #bdbdbd;
		background-color: #d9d9d9;
		line-height: 50px;
		font-size: 16px;
		text-align: center;
		color: #565656;
		display: block;
		float: left;
		text-align: center;
		font-weight: bold;
		transition: all 0.2s ease;
	}

	.tab_item:hover {
		opacity: 0.75;
	}

	/*ラジオボタンを全て消す*/
	input[name="tab_item"] {
		display: none;
	}

	/*タブ切り替えの中身のスタイル*/
	.tab_content {
		display: none;
		padding: 40px 40px 0;
		clear: both;
		overflow: hidden;
	}


	/*選択されているタブのコンテンツのみを表示*/
	#all:checked ~ #all_content,
	#programming:checked ~ #programming_content,
	#design:checked ~ #design_content {
		display: block;
	}

	/*選択されているタブのスタイルを変える*/
	.tabs input:checked + .tab_item {
		background-color: #bdbdbd;
		color: #fff;
	}


}




/*/////////////////////////////////////////////////////////////////////
    for sp  スマホ画面用（767px以下）
/////////////////////////////////////////////////////////////////////*/


@media only screen and (max-width:767px) {
	body {
		width: 100%;
		font-size: 13px;
	}

	/*==================================================
    h1  for sp
==================================================*/


	.fv_top {
		width: 100%;
		height: 300px;
		padding: 30px;
		background-image: url(../../recruit/img/fv_bg.jpg);
		background-position: center;
		background-repeat: no-repeat;
	}

	.fv_top p {
		font-size: 30px;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin-top: 90px;
		line-height: 0.8;
	}

	.fv_top p span {
		font-size: 20px;
		color: #8CB93A;
		font-weight: bold;
		text-align: center;
	}


	/*--------------------------------------------------
    Main メリット  for sp
--------------------------------------------------*/

	#merit {
		width: 100%;
		margin: 0 auto 30px;
		padding: 10% 3% 0;
	}

	#merit .merit_in {
		margin: auto;
		padding: 5% 3% 1%;
	}


	#merit ul {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#merit ul li {
		width: 100%;
		margin-bottom: 20px;
	}

	#merit ul li p {
		margin-top: 3%;
	}

	#merit ul li img {}






	/*--------------------------------------------------
    Main 募集要項を見る  for sp
--------------------------------------------------*/

	#btn_youkou {
		padding: 4% 0 6%;
	}

	#btn_youkou a img {
		width: 85%;
		margin: auto;
	}


	/*--------------------------------------------------
    Main 募集要項  for sp
--------------------------------------------------*/
	#recruit_wrap {
		margin: 0 auto 15%;
	}

	#recruit_wrap p {
		text-align: center;
		padding-bottom: 7%;

	}


	.recruit {
		width: 95%;
		margin: 0 auto 5%;
	}

	.recruit .step_naiyou {
		width: 100%;
		margin: auto;
	}

	.recruit .step_naiyou dl {
		border-bottom: 1px dotted #bdbdbd;
	}

	.recruit .step_naiyou dl dt {
		width: 100%;
		margin: 0;
		padding: 0 0 0 0.5em;
		background-color: #000;
		text-align: left;
		font-size: 18px;
		letter-spacing: 0.2em;
		line-height: 32px;
		color: #fff;
	}

	.recruit .step_naiyou dl dd {
		width: 100%;
		margin: 0;
		padding: 13px 0px 13px 0.2em;
		text-align: left;
		font-size: 16px;
		line-height: 19px;
		color: #333;
	}

	.recruit .step_naiyou dl dd span {
		font-size: 100%;
		line-height: 1.5em;
	}

	.recruit .step_naiyou .moji {
		font-size: 20px !important;
	}

	.recruit .step_naiyou em {
		display: block;
		font-style: normal;
		font-size: 13px;
	}



	/*タブ切り替え全体のスタイル*/
	.tabs {
		margin-top: 50px;
		padding-bottom: 5%;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		width: 100%;
		margin: 0 auto;
	}

	/*タブのスタイル*/
	.tab_item {
		width: calc(100%/2);
		height: 50px;
		border-bottom: 3px solid #bdbdbd;
		background-color: #d9d9d9;
		line-height: 50px;
		font-size: 16px;
		text-align: center;
		color: #565656;
		display: block;
		float: left;
		text-align: center;
		font-weight: bold;
		transition: all 0.2s ease;
	}

	.tab_item:hover {
		opacity: 0.75;
	}

	/*ラジオボタンを全て消す*/
	input[name="tab_item"] {
		display: none;
	}

	/*タブ切り替えの中身のスタイル*/
	.tab_content {
		display: none;
		padding: 5% 2% 0;
		clear: both;
		overflow: hidden;
	}


	/*選択されているタブのコンテンツのみを表示*/
	#all:checked ~ #all_content,
	#programming:checked ~ #programming_content,
	#design:checked ~ #design_content {
		display: block;
	}

	/*選択されているタブのスタイルを変える*/
	.tabs input:checked + .tab_item {
		background-color: #bdbdbd;
		color: #fff;
	}




}