@charset "utf-8";

/**
 *
 *  フォーム用CSS
 *　form
 */



input:focus:placeholder-shown, textarea:focus:placeholder-shown {
  color: transparent;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: transparent;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
  color: transparent;
}

input:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder {
  color: transparent;
}

label {
	cursor: pointer;
}



/* テキストボックス・テキストエリア
--------------------------------------------------------------------------*/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea{
	padding: 0.6em 0.8em;
	border: 1px solid #bbb;
  	background:#F0F0EE;
	font-size:100%;
}




/* @SP */

@media all and (max-width: 1000px) {
	
	
}



/* セレクトボックス
--------------------------------------------------------------------------*/

select:not(.ui-timepicker-select){
	padding: 0.7em 2em;
	border: 1px solid #bbb;
  	background:#F0F0EE;
	font-size:94%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor:pointer;	
}

label.form_select {
  position: relative;
  display: inline-block;
  margin-right: 8px;
}

label.form_select:before{
  display: block;
  content: "";
  position: absolute;
  left:0;
  top:0;
  pointer-events: none;
  width: 20px;
  height: 100%;
  background:#1E3566;

}

label.form_select:after {
  display: block;
  content: " ";
  position: absolute;
  top: 43%;
  left: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #ffffff transparent transparent transparent;
  pointer-events: none;
}

.form_table select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.8em 1.4em;
  font-size: 0.88em;
  position: relative;
  border-right: 32px solid #111;
  cursor: pointer;
  background: #FEF5E0;
}


/* @SP */

@media all and (max-width: 1000px) {

  label.form_select:after {
    top: 45%;
  }	
	
}


/* ラジオボタン・チェックボックス
--------------------------------------------------------------------------*/
input[type="radio"], input[type="checkbox"] {
  opacity:0;
}


input[type="checkbox"]+label,
input[type="checkbox"]+label span{
  position: relative;  
}

input[type="checkbox"]+label span:before {
  position: absolute;
  left: -27px;
  top: 2px;
  display: block;
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #111111;
  border-radius:3px;
  background:#FFF;
}

input[type="checkbox"]:checked+label:before {
  position: absolute;
  left: -32px;
  top: 18px;
  display: block;
  /* -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); */
  content: "";
  width: 14px;
  height: 3px;
  background: #FE4E4E;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: right center;
  transform: rotate(45deg);
  transform-origin: right center;
  z-index:5;
}

input[type="checkbox"]:checked+label:after {
  display: block;
  position: absolute;
  left: -19px;
  top: 18px;
  content: "";
  /* -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); */
  width: 26px;
  height: 3px;
  background: #FE4E4E;
  -webkit-transform: rotate(-53deg);
  -webkit-transform-origin: left center;
  transform: rotate(-53deg);
  transform-origin: left center;
  z-index:5;
}

input[type="radio"]+label{
	position: relative;	
}
input[type="radio"]+label:before{
  display: block;
  position: absolute;
  left: -21px;
  top:4px;
  content: "";
  border: 1px solid #111111;
  margin-right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#FFF;	
}
input[type="radio"]:checked+label:after {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  left: -17px;
  top: 8px;
  background-color: #F3AB04;
  border-radius: 50%;
}



/* @SP */

@media all and (max-width: 1000px) {

input[type="checkbox"]+label span:before {
  top: 5px;	
}
input[type="checkbox"]:checked+label:before {
  top: 20px;
}
input[type="checkbox"]:checked+label:after {
  top: 20px;	
}
  
}


/* ファイル送信
--------------------------------------------------------------------------*/
label.file_form{
  position: relative;
  display: inline-block;
  width: 90%;
}

label.file_form::after{
	display:block;
	position: absolute;
	left:0;
	top:0;
	content:"ファイルを選択";
	width: 100px;
	height: 38px;
	padding: 0 5px;
	line-height:38px;
	background:url(../image/common/icon-arrow_05.png) no-repeat 95% center #1E3566;
	background-size:auto 35%;
	color:#FFF;
	font-size:12px;
	pointer-event:none;	
}


input[type="file"] {
  width: 100px;
	font-size:94%;
	margin-left: 45px;	
}

.file_form input[type="file"] + span{
	position: relative;
	top:3px;
	display:inline-block;
	margin-left: 120px;
	font-size:88%;
}

.file_form input[type="file"] + span + br{
	display:none;
}

.file_form #filename{
	width:200px;
	padding: 5px 0;	
	border:0;
	background:transparent;
	text-decoration:underline;
	color:#1E3566;
	font-size:100%;
}

.btn_file_delete{
	display:inline-block;
	width: 52px;
	margin-left: 0;
	cursor:pointer;	
}
.btn_file_delete img{
	max-width: 100%;
	height: auto;	
}

/* @SP */

@media all and (max-width: 1000px) {

	.attachment_file{
		position: relative;	
	}
	
	.file_form input[type="file"] + span{
		top:0;
		margin: 40px 0 0 0;
	}
	
	.file_form input[type="file"] + span + br{
		display:inline;
	}

 	.file_form #filename{
		width:calc(100% - 60px);
		padding: 5px 0;	
	}
	
	.btn_file_delete{
		position: absolute;
		right:0;
		bottom:20px;
	}

	
}


/* 送信ボタン
--------------------------------------------------------------------------*/
.submit {
  margin: 40px auto 40px;
  overflow: hidden;
  width: 74%;
}

input[type="button"]{
	cursor:pointer;
	transition:.3s;
}

input[type="button"]:hover{
	opacity:.7;	
}

/* @SP */

@media all and (min-width: 1001px) {
  .submit input[type="submit"] {
    width: 58%;
    max-width: 370px;
  }
}

@media all and (max-width: 1000px) {
  .submit {
    width: 100%;
  }
}




input[type*="image"], input[type*="submit"] {
  cursor: pointer;
}

input[type*="image"]:hover, input[type*="submit"]:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input, select {
  vertical-align: middle;
}

select {
  border: 1px solid #bbb;
}

select::-ms-expand {
  display: none;
}

button {
  cursor: pointer;
  background: none;
  /*これ以降はデフォルトの枠を消す指定です*/
  border: 0;
  font-size: 10px;
  /*ベースライン合わせる*/
}


.btn_exe{
	width: 160px;
	padding: 15px 0;
	border: 0;
	outline: none;
	background: -moz-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: -webkit-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: -ms-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: linear-gradient(to bottom, #f8d176 0%, #f3ab04 80%);
	color:#FFF;
	font-weight:500;
	font-size:100%;
	text-align:center;
	cursor:pointer;	
}

.btn_search{
	position: relative;	
	font-size:129%;	
}
.btn_search::after{
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-2.4em,-30%);
	content:"";
	width: 22px;
	height: 20px;
	background:url(../image/common/icon_search.png) no-repeat;
	background-size:auto 100%;	
}


/*
.btn_search{
	width: 160px;
	padding: 10px 0;
	border: 0;
	background: url("../image/common/icon_search.png"),-moz-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: url("../image/common/icon_search.png"),-webkit-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: url("../image/common/icon_search.png"),-ms-linear-gradient(top, #f8d176 0%, #f3ab04 80%);
	background: url("../image/common/icon_search.png"),linear-gradient(to bottom, #f8d176 0%, #f3ab04 80%);
	background-repeat: no-repeat;
	background-position: 26% center;
	background-size: auto 40%, 100% 100%;
	color:#FFF;
	font-weight:500;
	font-size:129%;
	text-align:center;
	cursor:pointer;	
}*/

/* @SP */

@media all and (max-width: 1000px) {
	.btn_exe{
		width: 100%;	
	}
}





/* 日付選択
--------------------------------------------------------------------------*/
input[type="text"].date_select{
	width: 210px;
	height: 40px;
	padding-left: 50px;
	padding-right: 0;
	font-size:108%;
	background: url("../image/common/icon_date.png"),-moz-linear-gradient(top, #FFF 0%, #E5E5E5 80%);
	background: url("../image/common/icon_date.png"),-webkit-linear-gradient(top, #FFF 0%, #E5E5E5 80%);
	background: url("../image/common/icon_date.png"),-ms-linear-gradient(top, #FFF 0%, #E5E5E5 80%);
	background: url("../image/common/icon_date.png"),linear-gradient(to bottom, #FFF 0%, #E5E5E5 80%);
	background-repeat: no-repeat;
	background-position: 9% center;
	background-size: auto 60%, 100% 100%;
	border:1px solid #C0C0C0;
	cursor:pointer;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	border: 1px solid #1E3566;
	background: #1E3566;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	border: 1px solid #f3ab04;
	background: #f3ab04;
	color: #FFF;
}


/* @SP */

@media all and (max-width: 1000px) {
	input[type="text"].date_select{
		width: 46%;
		padding-left: 30px;
		background-position: 5% center;
		background-size: auto 50%, 100% 100%;
		font-size:3vw;
		text-align:center;
	}
		
}


/* エラー表示
--------------------------------------------------------------------------*/
.form_list .error{
	margin-bottom: 18px;	
}
.form_list .error span{
	position: relative;
	display:inline-block;
	padding: 2px 15px 3px;
	background:#D40013;
	color:#FFF;
	font-size:115%;	
}
.form_list .error span::after{
	display:block;
	content:"";
	position: absolute;
	left:50%;
	bottom:-20px;
	transform:translateX(-50%);
	border-top: 10px solid #D40013;
	border-right: 5px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 5px solid transparent;	
}


/* @SP */

@media all and (max-width: 1000px) {
	.form_list .error span,
	.info_edit .error span{
		padding: 2px 10px 3px;
		font-size: 4vw;
	}
}


/* 入力レイアウト
--------------------------------------------------------------------------*/

.form_list > li{
	display:table;
	width: 100%;
	margin-bottom: 14px;
	border:1px solid #D0D0D0;
}
.form_list .item_ttl{
	display:table-cell;
	vertical-align:top;
	background:#E3EBFB;
	width: 200px;
	height: 80px;
	padding: 15px 25px;
	font-size:115%;
}
.form_list .item_ttl .req{
	display:inline-block;
	background:#FF4D4D;
	margin-top: 3px;
	padding: 0 10px;
	color:#FFF;	
	font-size:86%;
}
.form_list .item_form{
	display:table-cell;
	vertical-align:middle;
	padding: 15px 20px;
	font-size:115%;
}
.form_list .item_button{
	display:table-cell;
	vertical-align:middle;
	position: relative;
	width: 215px;
	padding: 15px 20px;
	background:#F8F8F8;
	border-left:1px solid #D0D0D0;
	text-align:center;
}
.form_list .item_button::before{
	position: absolute;
	left:-1px;
	top:50%;
	transform:translateY(-50%);
	display:block;
	width: 12px;
	height: 24px;
	content:"";
	background:url(../image/common/icon_baloon_arrow01.png) no-repeat;	
}


#edit_bttn_wrap{
	text-align:center;
	padding: 50px 0;
}
#edit_bttn_wrap .btn_form_edit{
	display:inline-block;
	width: 340px;
	height: 70px;
	line-height:70px;
	border: 0;
	outline: none;
	background:url("../image/common/icon-arrow_05.png") no-repeat 95% center #1E3566;
	background-size: auto 25%;	
	color:#FFF;
	-webkit-appearance: none;
	border-radius: 0;
}



/* @SP */

@media all and (max-width: 1000px) {

	.form_list > li{
		display:block;
		margin-bottom: 16px;
	}
	.form_list .item_ttl{
		display:block;
		width: 100%;
		height: auto;
		padding: 10px 12px;
		font-size:4vw;
	}
	.form_list .item_ttl .req{
		margin: 0 0 0 5px;
		padding: 0 5px 1px;
		transform:translateY(-2px);
		font-size:86%;
		font-size:2.8vw;
	}
	.form_list .item_form{
		display:block;
		padding: 10px 12px;
		font-size:4vw;
	}
	
	.form_list .item_button{
		display:block;
		width: 100%;
		padding: 25px 10px 15px;
		border-left:none;
		border-top:1px solid #D0D0D0;
	}
	.form_list .item_button::before{
		left:50%;
		top:-1px;
		transform:translate(-50%,0);
		width: 34px;
		height: 14px;
		background:url(../image/common/icon_baloon_arrow01_sp.png) no-repeat;
		background-size:100% auto;	
	}
	
	#edit_bttn_wrap{
		padding: 10px 0;
	}
	#edit_bttn_wrap .btn_form_edit{
		width: 100%;
	}
	
	
}