/*--------------------------------------*/
/* Font									*/
/*--------------------------------------*/

* {
    margin: 0;
    padding: 0;
}

/*--------------------------------------*/
/* Body									*/
/*--------------------------------------*/
body {
	height: 100%;
	font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
	color: #333333;
	font-size: 100%;
	text-align: center;
	position: relative;
}

/*--------------------------------------*/
/* Contents									*/
/*--------------------------------------*/
div.Frame{
	height: 30px;
	background-color: #3c5aa0;
}

#BackGroundBox {
	width: 100%;
	height:100%;
	background-image: url('../images/search_background.gif');
}

@media only screen and (max-width: 767px) {
	#ContentsBox {
		width: 100%;

		padding: 0px;
	}
}
@media only screen and (min-width: 768px) {
	#ContentsBox {
		width: 1000px;

		padding: 30px;
	}
}

#ContentsBox {
	margin: 0px auto;

	background-color: #FFFFFF
}
@media only screen and (max-width: 767px) {
	#LogoBox{
		margin-left: 0px;
	}
	#LogoBox img{
		height: 72px;
		width: 150px;
	}
}
@media only screen and (min-width: 768px) {
	#LogoBox{
		margin-left: 15px;
	}
	#LogoBox img{
		height: 96px;
		width: 200px;
	}
}

@media only screen and (max-width: 767px) {
	#TitleBox{
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	#TitleBoxSP{
		display: none;
	}
}
#TitleBoxSP img{
	width: 100%;
}

@media only screen and (max-width: 767px) {
	#SearchBox {
		float: none;
		width: 100%;

		margin: 0px;
	}
}
@media only screen and (min-width: 768px) {
	#SearchBox {
		float: left;
		width: 300px;
		border: #000080 solid 1px;

		margin:  10px 0px 0px 20px;
	}
}
#SearchBox {
	background-color: #d9edf7;

	text-align: center;
	padding-bottom: 5px;
}

#SearchBox div.Title{
	padding-bottom: 0px;
}

@media only screen and (max-width: 767px) {
	#PrefectureBox {
		width: 100%;
		margin: 0px 0px 0px 0px;

		border-top: #000080 dashed 1px;	
		border-bottom: #000080 dashed 1px;	
	}
}
@media only screen and (min-width: 768px) {
	#PrefectureBox {
		width: 90%;
		margin: 0px auto 10px auto;

		border: #000080 dashed 1px;	
	}
}

#PrefectureBox {
	text-align: left;
	
	background-color: #FFFFFF
}

#ClearCheckBox {
	text-align: right;
	margin-right: 20px;
}

#ClearCheckBox span {
	cursor: pointer;
    color: #0062DE;
    text-decoration: underline;
}


.AreaCheckBox {
	margin: 5px 5px 5px 5px;
}

.PrefectureCheckBox {
	margin: 3px 3px 3px 20px;
}
.PrefectureCheckBox label {
	display: inline-block;
	width: 32%;
}

@media only screen and (max-width: 767px) {
	#CalendarTop {
		float: none;
		width: 100%;
		margin:  0px;

		border-top: #000080 solid 1px;	
		border-bottom: #000080 solid 1px;	
	}
}
@media only screen and (min-width: 768px) {
	#CalendarTop {
		float: right;
		width: 630px;
		margin:  10px 20px 0px 0px;

		border: #000080 solid 1px;	
	}
}
#CalendarTop {
	background-color: #d9edf7;

	text-align: center;
}
#MonthBox {
	width: 100%;

	margin: 10px auto 0px auto;
	
}

#MonthBox div{
	border: #000080 solid 1px;	
	background-color: #FFFFFF;
	
	display: inline-block;
}

#MonthBox div.Month{
	width: 150px
}

#MonthBox div.Navi{
	width: 30px
}
#MonthBox div.Navi a{
	color: #000080;
	text-decoration: none;

	display: inline-block;
}
#TargetBox {
	height: 35px;
	width: 100%;

	text-align: right;
}

#TargetBox div{
	margin-right: 100px;
}

#ReturnBox{
	padding: 15px;
}

#EndFrame{
	width: 100%;
	height: 30px;
	background-image: url('../images/search_background.gif');
}

#FooterBox{
//	height: 500px;

	background-color: #FFFFFF;
}

#LinkBox{
	background-image: url('../images/search_background.gif');
}

@media only screen and (max-width: 767px) {
	#Link{
		width: auto;
	}
}
@media only screen and (min-width: 768px) {
	#Link{
		width: 1000px;
		margin: 0px auto;

		padding-left: 30px;
		padding-right: 30px;
	}
}
#Link{
	text-align: left;
	
	padding-bottom: 5px;
	background-color: #FFFFFF;
}

#Link div.Link2{
	padding-left: 20px;
}
#Link div.Link2 a{
	display: inline-block;
}

#Company{
	padding: 15px;

	color: #FFFFFF;
	background-color: #3c5aa0;
}


/*--------------------------------------*/
/* Table									*/
/*--------------------------------------*/
#CalendarTable{
	width:95%;
    text-align: left;
	
	margin: 10px auto;

    border: none;
	table-layout: fixed;
}
#CalendarTable th{
	text-align: center;

    border: none;
}

@media only screen and (max-width: 767px) {
	#CalendarTable div.Detail{
		display: none
	}
}
@media only screen and (min-width: 768px) {
	#CalendarTable div.Detail{
		padding-left: 0px;
	}
}

@media only screen and (max-width: 767px) {
	#CalendarTable td{
		overflow: auto;
		white-space: normal;
		
		font-size: 14px;
	}
}
@media only screen and (min-width: 768px) {
	#CalendarTable td{
		overflow:hidden;
		white-space: nowrap;
	}
}

#CalendarTable td{
	height: 110px;
	width:14%;

	background: #FFFFFF;
    border: none;

	padding: 0px 3px;
	vertical-align: top;
	text-align: left;
}

@media only screen and (max-width: 767px) {
	#CalendarTable div.Detail{
		display: none
	}
}
@media only screen and (min-width: 768px) {
	#CalendarTable div.Detail{
		padding-left: 0px;
	}
}

#CalendarTable div.Total{
	padding-left: 0px;
}

.Sunday{
	color: #d9534f;
}
.Satday{
	color: #0062DE;
}
#CalendarTable td.Today{
	background: #f7ecb5
}

#ListTable{
	width:95%;
    text-align: left;
	
	margin: 10px auto;

    border: none;
	table-layout: fixed;
}
#ListTable th{
	text-align: center;

    border: none;
}

@media only screen and (max-width: 767px) {
	#ListTable td{
		overflow:hidden;
		white-space:  normal;
	}
}
@media only screen and (min-width: 768px) {
	#ListTable td{
		overflow:hidden;
		white-space: nowrap;
	}
}
#ListTable td{
	height: 70px;

	background: #FFFFFF;
    border: none;

	padding: 0px 3px;
	vertical-align: middle;
	text-align: left;

}

#ListTable th.Colmn_Area{
	width: 12%;
}
#ListTable th.Colmn_Time{
	width: 15%;
}
#ListTable th.Colmn_Place{
	width: 40%;
}
#ListTable th.Colmn_Button{
	width: 33%;
}

#ListTable div.MapLink{
	text-align: right;
}

#ListTable div.RegistButton{
	text-align: center;
}


@media only screen and (max-width: 449px) {
	#ListTable div.RegistButton input{
		width:  83px;
		height: 44px;
		background:url('../images/regist_button_sp2.gif');
	}
}
@media only screen and (min-width: 450px) and (max-width: 767px ) {
	#ListTable div.RegistButton input{
		width:  106px;
		height:  56px;
		background:url('../images/regist_button_sp1.gif');
	}
}
@media only screen and (min-width: 768px) {
	#ListTable div.RegistButton input{
		width:  184px;
		height:  44px;
		background:url('../images/regist_button.gif');
	}
}

/*--------------------------------------*/
/* Button									*/
/*--------------------------------------*/
@media only screen and (max-width: 767px) {
	#SearchButton {
		width:  139px;
		height:  43px;
		background:url('../images/search_button_sp.gif')  no-repeat;
		
		margin-top: 20px;
		margin-bottom: 10px;
	}
}
@media only screen and (min-width: 768px) {
	#SearchButton {
		width:  186px;
		height:  58px;
		background:url('../images/search_button.gif')  no-repeat;

		margin-top: 20px;
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 767px) {
	#SearchButtonSP {
		width:  139px;
		height:  43px;
		background:url('../images/search_button_sp2.gif')  no-repeat;

		margin-top: 10px;
		margin-bottom: 10px;
	}
}
@media only screen and (min-width: 768px) {
	#SearchButtonSP {
		display: none;
	}
}


/*--------------------------------------*/
/* Select									*/
/*--------------------------------------*/
#TargetSelect{
    width: 150px;
    height: 30px;

	margin-bottom: 10px;
}

/*--------------------------------------*/
/* Line									*/
/*--------------------------------------*/
.DashLine{
	width:95%;
	
	margin: auto;
	
	border-bottom: #888888 dashed 1px;
}

/*--------------------------------------*/
/* Class								*/
/*--------------------------------------*/
.clear {
	clear: both;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.contentBase {
	width: 738px;
	color: #555555;

    /* 中央表示 */
	margin-left:auto;
	margin-right:auto;
	text-align:left;

}

.contentBase .contentBox {
/*	width: 98%; */
	margin: 0;
	margin-left: auto;
	margin-right: auto;
}

div.leftLine {
	border-left: solid 1px #CCCCCC;
}

div.rightLine {
	border-right: solid 1px #CCCCCC;
}

div.topLine {
	border-top: solid 1px #CCCCCC;
}

div.bottomLine {
    border-bottom: solid 1px #CCCCCC;
}

a img {
    border-style: none;
}

a.linkText {
    color: #0062DE;
    text-decoration: underline;
}

a.linkText:hover {
    text-decoration: none;
}

a.linkErrText {
    color: #9D0000;
    text-decoration: underline;
}

a.linkErrText:hover {
    text-decoration: none;
}

.masInput{
    width: 65%;
}
.staffInput{
    width: 25%;
}
.userInput{
    width: 25%;
}
.jobInput{
    width: 25%;
}

.msgBox{
    color: inherit;
}
.errBox{
    color: #9D0000 !important;
}
.nextBox{
    text-align: center;
}
.oathBox{
    border: solid 1px #999999;
    padding: 50px 60px 40px 60px;
}
.masBox{
    text-align: center;
    padding-left: 30px;
}
.memoBox{
    width: 95%;
    height: 100px;
    padding: 5px 5px 5px 5px;
    resize: none;
}

/*--------------------------------------*/
/* コントロール共通                      */
/*--------------------------------------*/
.selectLL{
    width: 320px;
}
.selectL{
    width: 200px;
}
.selectS{
    width: 100px;
}
.textdate{
	ime-mode: disabled;
    width: 100px;
}
.texttime{
	ime-mode: disabled;
    width: 80px;
}
.textL{
    width: 200px;
}
.text4num{
	ime-mode: disabled;
    width: 60px;
}
.text6num{
	ime-mode: disabled;
    width: 80px;
}
.text16num{
	ime-mode: disabled;
    width: 120px;
}
/*--------------------------------------*/
/* テキスト装飾                          */
/*--------------------------------------*/

.red{
	color: #9D0000;
}
.bold{
    font-weight: bold;
}

/*--------------------------------------*/
/* 文字位置                              */
/*--------------------------------------*/
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.center{
    text-align: center;
}

/*--------------------------------------*/
/* ローディング                         */
/*--------------------------------------*/
.loading{
    /* 表示範囲（指定する画像と文字列に合わせて調整してください） */
    width: 150px;
    height: 110px;

    /* 画像名 */
    background: url("../images/loading.gif") center bottom no-repeat;

    /* 文字列位置 */
    text-align: center;

    /* 中央位置 */
    position: absolute;
    left: 50%;
    top: 160px;

    /* widthの半分のマイナス値を指定すること */
    margin-left: -75px;
}
.loaded{
    display: none;
}

.progress {
    height: 55px;
    border-collapse: separate;
    text-align: left;
}
.progress li {
    color: #BBBBBB;
    border: solid 2px #FFFFFF;
    padding-left: 10px;
}
.progress li:hover {
    background-color: #F2F2F2;
}
.progress .active {
    color: #666666;
}
/*--------------------------------------*/
/* CSS3								*/
/*--------------------------------------*/
.outlineShadow {
  background: #FFFFFF;
  -webkit-box-shadow: #777 0px 3px 3px ;
  -moz-box-shadow: #777 0px 3px 3px ;
  box-shadow: #777 0px 0px 10px 0px ;
}