@charset "UTF-8";
/********************************************/
/*	設定値									*/
/********************************************/
/********************************************/
/*	基本設定									*/
/********************************************/
input[type='text'],
textarea,
select {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  line-height: 1.5;
  font-size: 12px;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}



/********************************************/
/*	入力画面／確認画面						*/
/********************************************/
.form {
  clear: both;
  overflow: hidden;
  position: relative;
  padding-top: 50px;
  padding-bottom: 40px;
  line-height: 1.5;
  font-size: 14px;
}

.form b {
  font-weight: normal;
  font-size: 16px;
}

table.richform {
  width: 900px;
  margin: 0 auto;
}
table.richform caption {
  box-sizing: border-box;
  margin: 20px 0;
  padding: 10px;
  border-bottom: 1px solid #ff6699;
  color: #ff6699;
  font-size: 18px;
}
div.form table.richform tbody tr.required th:after {
  content: "必須";
  color:#fff;
  background-color: #e30;
}
table.richform tbody tr:first-child th, table.richform tbody tr:first-child td {
  border-top: none;
}
table.richform tbody th, table.richform tbody td {
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  padding: 10px;
  position: relative;
}
table.richform tbody th {
  width: 200px;
  vertical-align: middle;
}
table.richform tbody th.noname {
  width: 70px;
}
div.form table.richform tbody th:not(.static):after {
  float: right;
  padding: 2px 5px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  font-size: 11px;
  content: "任意";
  background-color: #03e;
}

/*テキスト入力欄のフォーカス時にChromeなどが自動付加する枠線を消す方法 https://www.nishishi.com/css/chrome-textform-clear-border.html */
:focus {
	outline: none;
}

input[type='text'],
input[type='password'],
input[type='number'],
input[type='email'],
input[type='tel'],
textarea,
select {
  background-color: #ccc;
}
input[type='text']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='tel']:focus,
textarea:focus,
select:focus {
  background-color: #fff;
}
input[type='text'].error,
input[type='password'].error,
input[type='number'].error,
input[type='email'].error,
input[type='tel'].error,
textarea.error,
select.error {
  border: 2px solid #f00;
}
input[type='text'].complete,
input[type='password'].complete,
input[type='number'].complete,
input[type='email'].complete,
input[type='tel'].complete,
textarea.complete,
select.complete {
  background-color: #fff;
}
input[type='text'].short,
input[type='password'].short,
input[type='number'].short,
input[type='email'].short,
input[type='tel'].short,
textarea.short,
select.short {
  width: 100px;
}
input[type='text'].medium,
input[type='password'].medium,
input[type='number'].medium,
input[type='email'].medium,
input[type='tel'].medium,
textarea.medium,
select.medium {
  width: 195px;
}
input[type='text'].semilong,
input[type='password'].semilong,
input[type='number'].semilong,
input[type='email'].semilong,
input[type='tel'].semilong,
textarea.semilong,
select.semilong {
  width: 290px;
}
input[type='text'].long,
input[type='password'].long,
input[type='number'].long,
input[type='email'].long,
input[type='tel'].long,
textarea.long,
select.long {
  width: 385px;
}
input[type='text'].biglong,
input[type='password'].biglong,
input[type='number'].biglong,
input[type='email'].biglong,
input[type='tel'].biglong,
textarea.biglong,
select.biglong {
  width: 555px;
}

label a {
  color: #ff6699;
}
label input[type='checkbox'] {
  margin-right: 5px;
  vertical-align: bottom;
}

input[type='text'].half {
  ime-mode: disabled;
}

textarea {
  height: 100px;
  width: 500px;
}

.example {
  color: #333333;
  font-size: 11px;
}

span.example {
  margin-left: 5px;
}

p.example {
  margin-top: 5px;
}

p.explain {
  margin-top: 5px;
  color: #ccc;
  font-size: 10px;
}

p.error {
  margin-top: 5px;
  color: #c30;
  font-weight: bold;
  font-size: 11px;
}

.action {
  margin-top: 15px;
  text-align: center;
}
.action input[type='submit'] {
  padding: 27px 20px;
  width: 390px;
  background-color: #080;
  border: none;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.action input[type='submit']:hover {
  background-color: #090;
}
.action a.yet {
  display: inline-block;
  padding: 15px 20px;
  /*background-color: #f00;*/
  color:#fff;
  font-weight: bold;
  font-size: 14px;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
/*.action a.yet:hover {*/
  /*background-color: #ff0a0a;*/
/*}*/
.action a.back {
  display: inline-block;
  padding: 5px 20px;
  background-color: #999;
  color: #000;
  font-size: 14px;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  -webkit-transition-property: background-color;
  transition-property: background-color;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.action a.back:hover {
  background-color: #aaa;
}

/********************************************/
/*	バリデーション							*/
/********************************************/
.valid-counter {
  z-index: 10;
  position: absolute;
  top: 55px;
  right: 5%;
  background-color: #f00;
  -moz-box-shadow: 5px 5px 10px rgba(64, 64, 64, 0.4);
  -webkit-box-shadow: 5px 5px 10px rgba(64, 64, 64, 0.4);
  box-shadow: 5px 5px 10px rgba(64, 64, 64, 0.4);
  padding: 10px;
  opacity: 0.9;
  color:#fff;
}
.valid-counter.complete {
  background-color: #008000;
}
.valid-counter p {
  white-space: nowrap;
}
.valid-counter p span {
  font-weight: bold;
}

.valid {
  z-index: 10;
  position: absolute;
  top: -25px;
  display: inline-block;
}
.valid .valid-inner {
  position: relative;
  padding: 5px 8px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-color: rgba(255, 0, 0, 0.8);
  cursor: pointer;
  color:#fff;
}
.valid .valid-inner:after {
  content: '';
  position: absolute;
  border-top: 10px solid #f00;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  bottom: -9px;
  left: 15px;
  opacity: 0.8;
}
.valid .valid-inner span {
  margin-left: 4px;
  vertical-align: top;
  font-size: 8px;
  line-height: 1;
}

/********************************************/
/*	jQuery UI AutocompleteのCSS部分  		*/
/********************************************/

/* リストの枠のRadius設定 */
.ui-corner-all {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* リストの枠の設定 */
.ui-widget-content {
  border: 1px solid #dddddd;
  background-color: #eeeeee;
  color: #000;
  width: 385px;
}

/* リスト内のデータのリンク設定 */
.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 4px .4em;
  line-height: 1.7;
  min-height: 0; /* support: IE7 */
  font-weight: normal;
  font-size:18px;
}

/* リスト内のデータのリンクカラー*/
.ui-widget-content a {
  color: #ccc;
}

/* リスト内のデータフォーカス時のカラー */
.ui-state-focus {
  font-weight: bold;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
  font-weight: normal;
  margin: -1px;

}

li.ui-menu-item {
  padding: 4px 0px;
  font-size:20px;
  text-align: left;
}

/* ラジオボタン */

label.radio25 {
	display: inline-block;
	width: 25%;
	padding: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	background: #f1f1f1;
	border-radius: 5px;
}


label.radio50 {
	display: inline-block;
	width: 50%;
	padding: 10px;
	margin-bottom: 5px;
	background: #f1f1f1;
	border-radius: 5px;
}
.radio01-parts {
	padding: 0 20px 0 20px;
	border-radius: 0;
	display: inline-block;
	border: none;
	position: relative;
}
.radio01-parts::before {
	left: 0;
}
.radio01-input:checked + .radio01-parts::after {
	left: 3px;
}

.checkbox-text {
	font-size: 1.6rem;
	padding: 0 20px 0 10px;
}

.checkbox01,
.radio01 {
	font-size: 1.6rem;
}
.box .label_wrap {
	display: inline-block;
	line-height: 1.25;
	width: 31%;
}
.label_wrap .radio01-parts {
	border: 1px solid #e5e5e5;
	position: relative;
	border-radius: 5px;
}
.checkbox01-input, .radio02-input, .radio01-input {
	display: none;
}

.border_gry {
	border: 1px solid #e5e5e5;
}
.border_gry02 {
	border: 1px solid #dadada;
}
.checkbox01-parts,
.radio01-parts {
	padding: 10px 20px 10px 40px;
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	display: block;
}
.checkbox01-parts {
	padding: 20px 20px 20px 60px;
	line-height: 1.75;
	position: relative;
	background: #f6f6f6;
	margin-bottom: 5px;
}
.checkbox01-input:checked + .checkbox01-parts,
.radio01-input:checked + .radio01-parts {
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
}
.radio01-input:checked + .bg_ligr {
	background: #89dda1;
}
.radio01-input:checked + .bg_libl {
	background: #aad2f7;
}
.checkbox01-input:checked + .checkbox01-parts {
	background: #e6ffef;
}
.checkbox01-parts::before,
.radio01-parts::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 18px;
	width: 15px;
	height: 15px;
	border: 1px solid #c3c3c3;
	border-radius: 50%;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
	background: #f2f2f2;
}
.checkbox01-input:checked + .checkbox01-parts::after,
.radio01-input:checked + .radio01-parts::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 21px;
	width: 9px;
	height: 9px;
	background: #000000;
	border-radius: 50%;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

.checkbox02-parts {
	padding: 20px 20px 20px 40px;
	-webkit-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
	display: block;
	padding: 20px 20px 20px 60px;
	line-height: 1.75;
	position: relative;
	background: #f6f6f6;
	margin-bottom: 5px;
}

/* form調整 https://www.directbook.jp/bnm/ */

form.richform input:not([type='image']) {
	height: 16px;
	padding: 15px 12px;
	font-size: 16px;
	border-radius: 3px;
	border: solid 1px #999999;
}

form.richform select {
	height: 48px;
	padding-left: 11px;
	font-size: 16px;
	border: solid 1px #999999;
	border-color: linear-gradient(to bottom, #FEFDFE, #E8EBEC);
	border-radius: 2px;
	background-image: linear-gradient(to bottom, #FEFDFE, #E8EBEC);
	color: #797979;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-select-label {
	position: relative;
}

.form-select-label::before {
	display:block;
	content:"";
	position:absolute;
	top:5px;
	right:10px;
	width:11px;
	height:7px;
	background:url("../images/arrow-3a63978a9f15cbae16f2cdfd9254e2dfdc160d7ab5361abcb1e4b6966a5bba1b.svg") 0 0 no-repeat;
	background-size:11px;
	pointer-events:none
}

.w150 {
	width:150px;
}

.w100 {
	width:100px;
}