﻿/*
    更新日：2019年2月13日 水曜日
    作成者：小林
    ヘッダー（PC版、モバイル版）
*/

html {
	overflow-y: hidden;
	height: 95px;
}

#headBody{
	height: 95px;
	overflow: hidden;
	min-width: 300px;
}

#headerArea {
	background-color: #FFF;
	box-shadow: 0px 8px 10px -10px #488a9e;
	-webkit-box-shadow: 0px 8px 10px -10px #488a9e;
	-moz-box-shadow: 0px 8px 10px 10px #488a9e;
	height: 95px;
	position: relative;
}

/* 画面幅640px以上（ロゴ、ログアウトボタン） */
@media screen and ( min-width: 640px )
{
	/* ロゴ表示領域 */
	#headerImgSet {
		left: 47%;
		max-width: 280px;
		margin: 0px;
		padding: 0px;
		position: relative;
	}

	/* ロゴ本体 */
	#kagisenkunImg {
		left: -47%;
		height: 90px;
		height: auto;
		margin: 0 auto;
		max-width: 300px;
		position: relative;

		width: 100%;
	}

	/* ログアウトボタンの領域 */
	.logoutBtn{
		margin: 0px;
		right: 2%;
		position: absolute;
		top: 7%;

	}

	/* ログアウトボタン本体 */
	.logoutBtn input{
		background-color: #fff;
		background: -moz-linear-gradient(top, #fff, #ccc);
	  	background: -webkit-linear-gradient(top, #fff, #ccc);
		background: linear-gradient(to bottom, #fff, #ccc);
		border: 1px solid #ddd;
		border-radius: 2px;

		font-size: 12px;
		padding: 3px 5px 3px 5px;
	}
}


/* 画面幅以下640px以下、450px以上（ロゴ、ログアウトボタン）*/
@media screen and ( max-width: 640px) and ( min-width: 450px )
{
	/* ロゴ表示領域 */
	#headerImgSet {
		left: 55%;
		max-width: 280px;
		margin: 0px;
		padding: 0px;
		position: relative;
	}

	/* ロゴ本体 */
	#kagisenkunImg {
		left: -55%;
		height: 90px;
		width: 80%;
		margin: 0 auto;
		position: relative;

		max-width: 300px;
		height: auto;
	}

	/* ログアウトボタンの領域 */
	.logoutBtn{
		margin: 0px;
		right: 2%;
		position: absolute;
		top: 7%;

	}

	/* ログアウトボタン本体 */
	.logoutBtn input{
		background-color: #fff;
		background: -moz-linear-gradient(top, #fff, #ccc);
	  	background: -webkit-linear-gradient(top, #fff, #ccc);
		background: linear-gradient(to bottom, #fff, #ccc);
		border: 1px solid #ddd;
		border-radius: 2px;

		font-size: 12px;
		padding: 3px 5px 3px 5px;
	}
}

/* 画面幅450px以下css（ロゴ、ログアウトボタン）*/
@media screen and ( max-width: 450px )
{
	/* ロゴ表示領域 */
	#headerImgSet {
		left: 55%;
		max-width: 280px;
		margin: 0px;
		padding: 0px;
		position: relative;
	}

	/* ロゴ本体 */
	#kagisenkunImg {
		left: -40%;
		height: 90px;
		width: 60%;
		position: relative;
		top: 13px;

		max-width: 220px;
		height: auto;
	}


	/* ログアウトボタンの領域 */
	.logoutBtn{
		margin: 0px;
		right: 2%;
		position: absolute;
		top: 7%;

	}

	/* ログアウトボタン本体 */
	.logoutBtn input{
		background-color: #fff;
		background: -moz-linear-gradient(top, #fff, #ccc);
	  	background: -webkit-linear-gradient(top, #fff, #ccc);
		background: linear-gradient(to bottom, #fff, #ccc);
		border: 1px solid #ddd;
		border-radius: 2px;

		font-size: 10px;
		padding: 3px 5px 3px 5px;
	}
}


/* 画面幅860px以上（電話番号） */
@media screen and ( min-width: 860px )
{
	/* 電話番号表示領域 */
	#telLabel{
		font-size: 90%;
		margin: 0px;
		min-width: 570px;
		position: absolute;
		top: 45%;
		width: 100%;
		/*float: right;*/
		text-align: right;
		right: 10%;
	}

	/* 各電話番号のテキスト */
	#telLabel p{
		/*
		width: 27%;
		min-width: 180px;
		*/
		margin: 0px;
		padding: 0px;
	}
}

/* 画面幅640px以上、860px以下（電話番号）*/
@media screen and ( min-width: 640px )and ( max-width: 860px )
{
	/* 電話番号表示領域 */
	#telLabel{
		font-size: 75%;
		margin: 0px;
		min-width: 570px;
		position: absolute;
		top: 50%;
		width: 100%;
		/*float: right;*/
		text-align: right;
		right: 1%;
	}

	/* 各電話番号のテキスト */
	#telLabel p{
		/*
		width: 30%;
		min-width: 180px;
		*/
		margin: 0px;
		padding: 0px;
	}

}

/* 画面幅450px以上、640px以下（電話番号） */
@media screen and ( min-width: 450px ) and ( max-width: 640px)
{
	/* 電話番号表示領域 */
	#telLabel{
		font-size: 10px;
		-webkit-transform:scale(0.7);
		-moz-transform:scale(0.7);
		-ms-transform:scale(0.7);
		-o-transform:scale(0.7);
		transform:scale(0.7);
		position: absolute;
		text-align: left;
		top: 65px;
		right: -45%;
		width: 100%;
	}

	/* 各電話番号のテキスト */
	#telLabel p{
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
}

/* 画面幅450px以下（電話番号style） */
@media screen and ( max-width: 450px)
{
	/* 電話番号表示領域 */
	#telLabel{
		font-size: 10px;
		margin: 0px;
		-webkit-transform:scale(0.7);
		-moz-transform:scale(0.7);
		-ms-transform:scale(0.7);
		-o-transform:scale(0.7);
		transform:scale(0.7);
		position: absolute;
		top: 65px;
		width: 100%;
		text-align: right;
	}

	/* 各電話番号のテキスト */
	#telLabel p{
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
}
/* ============================================
   モバイル用「求人を検索する」帯ボタン
   ============================================ */
#mobileSearchBanner {
        display: none;
}

@media screen and ( max-width: 750px )
{
        #mobileSearchBanner {
                background-color: #269CE9;
                color: #fff;
                cursor: pointer;
                display: block;
                font-size: 16px;
                font-weight: bold;
                padding: 12px 0px;
                text-align: center;
                width: 100%;
        }

        #mobileSearchBanner:active {
                background-color: #1a7bb8;
        }
}
