@charset "UTF-8";
/* key */
/* font */
/* grey */
/* background */
/* Information */
/* pink */
/* Font */
/* 
 ----------------------------------------------------------------------
# form 
 ----------------------------------------------------------------------
*/
/* layout */
.form-block .row {
  margin-bottom: 20px;
}

.form-block .row:last-child {
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .form-block .row {
    margin-bottom: 10px;
  }

  .form-block .row div[class^="col-"] {
    margin-bottom: 10px;
  }

  .form-block .row div[class^="col-"]:first-child {
    margin-bottom: 0px;
  }

  .form-block .row div[class^="col-"]:last-child {
    margin-bottom: 0px;
  }
}
.form-block .row div[class^="col-"]:first-child {
  font-size: 15px;
  color: #555;
  font-weight: 600;
  padding-top: 0px;
}

@media (max-width: 767px) {
  .form-block .row div[class^="col-"]:first-child {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.form-block .form-layout-append {
  font-size: 13px;
  color: #888;
}

.form-block .form-layout-append:after {
  content: '';
  display: block;
  clear: both;
}

.form-block .form-layout-explain {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

/* title append */
.form-block .row.form-style-required div[class^="col-"]:first-child:after {
  content: '(必須)';
  font-size: 13px;
  font-weight: normal;
  color: #ff6058;
  margin-left: 3px;
  display: inline-block;
}

/* text field */
.form-block .form-text-field {
  display: block;
  width: 100%;
  height: 36px;
  padding-top: 1px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
}

::-webkit-input-placeholder {
  color: #a9a9a9;
  opacity: 1;
}

:-moz-placeholder {
  color: #a9a9a9;
}

::-moz-placeholder {
  color: #a9a9a9;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #a9a9a9;
}

.form-block .form-text-field:focus {
  border: 1px solid #9b1927;
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
  outline: none;
}

.form-block .field_with_errors .form-text-field {
  border: 1px solid #ffbd2e;
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
  outline: none;
  background-color: #fff5de;
}

.form-block .form-text-field-extend {
  position: relative;
  height: 36px;
}

.form-block .form-text-field-extend .extend-input {
  position: absolute;
  width: 100%;
  z-index: 9;
}

.form-block .form-text-field-extend.extend-style-icon .form-text-field {
  display: inline-block;
  padding-left: 36px;
}

.form-block .form-text-field-extend.extend-style-icon .extend-icon {
  position: absolute;
  color: #aaa;
  top: 6px;
  left: 12px;
  z-index: 10;
}

.form-block .form-text-field-extend.extend-style-unit {
  margin-bottom: 4px;
}

.form-block .form-text-field-extend.extend-style-unit .form-text-field {
  text-align: left;
  padding-right: 36px;
}

.form-block .form-text-field-extend.extend-style-unit .extend-unit {
  position: absolute;
  color: #666;
  top: 1px;
  right: 1px;
  z-index: 10;
  border-left: 1px solid #ccc;
  height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 6px;
  background-color: #f2f0f0;
  border-radius: 0px 3px 3px 0px;
  -webkit-border-radius: 0px 3px 3px 0px;
  -moz-border-radius: 0px 3px 3px 0px;
}

/* text area */
.form-block .form-text-area {
  width: 100%;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 12px 6px 12px;
  margin-bottom: 0px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
  vertical-align: top;
}

.form-block .form-text-area:focus {
  border: 1px solid #9b1927;
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
  outline: none;
}

.form-block .field_with_errors .form-text-area {
  border: 1px solid #ffbd2e;
  transition: border-color 0.15s;
  -webkit-transition: border-color 0.15s;
  -moz-transition: border-color 0.15s;
  outline: none;
  background-color: #fff5de;
}

.form-block .form-layout-append {
  margin-top: 4px;
}

.form-block .form-layout-append .append-count {
  float: left;
  color: #555;
}

.form-block .form-layout-append .append-count:before {
  content: '残り';
  font-size: 13px;
  margin-right: 3px;
  color: #555;
}

.form-block .form-layout-append .append-count:after {
  content: '文字';
  font-size: 13px;
  margin-left: 3px;
  color: #555;
}

.form-block .form-layout-append .append-count.is-alert,
.form-block .form-layout-append .append-count.is-alert:before,
.form-block .form-layout-append .append-count.is-alert:after {
  color: #ff6058;
  font-weight: bold;
}

.form-block .form-layout-append .append-count.is-warning,
.form-block .form-layout-append .append-count.is-warning:before,
.form-block .form-layout-append .append-count.is-warning:after {
  color: #ffbd2e;
  font-weight: bold;
}

.form-block .form-layout-append .append-text-length {
  float: left;
  display: block;
  margin-left: 10px;
}

.form-block .form-layout-append .append-text-length.style-less:after {
  color: #ffbd2e;
  content: "短すぎます";
}

.form-block .form-layout-append .append-text-length.style-more:after {
  color: #ffbd2e;
  content: "長すぎます";
}

.form-block .form-layout-append .append-text-length.style-over:after {
  color: #ff6058;
  content: "超過しています";
}

.form-block .form-layout-append .append-example {
  float: right;
  z-index: 10;
}

.form-block .form-layout-append .append-example-popup {
  float: right;
  margin-top: 15px;
  position: relative;
  width: 100%;
  background-color: #e3effe;
  padding: 0px 15px 20px 15px;
}

.form-block .form-layout-append .append-example-popup:after {
  bottom: 100%;
  right: 12px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(227, 239, 254, 0);
  border-bottom-color: #e3effe;
  border-width: 12px;
  margin-left: -12px;
}

.form-block .form-layout-append .append-example-close {
  text-align: right;
  font-size: 18px;
}

.form-block .form-layout-append .append-example-close a {
  cursor: pointer;
  display: inline-block;
  padding: 5px 0px 5px 5px;
}

.form-block .form-layout-append .append-example-text {
  color: #555;
  font-size: 13px;
}

.form-block .form-layout-append .append-example-text p {
  margin: 0;
}

/* radio */
/* デフォルトは非表示にして、form-radio-textのbefore要素をチェックに見立てる */
.form-block .form-radio input[type=radio] {
  display: none !important;
  visibility: hidden !important;
}

.form-block .form-radio label:after {
  clear: both;
  content: '';
  display: block;
}

.form-block .form-radio label {
  margin-bottom: 2px;
}

.form-block .form-radio .form-radio-text {
  float: left;
  cursor: pointer;
  -webkit-user-select: none;
  padding-bottom: 3px;
  padding-right: 5px;
  z-index: 100;
}

.form-block .form-radio .form-radio-text:before {
  float: left;
  border: 1px solid #bbb;
  content: '';
  width: 16px;
  height: 16px;
  margin-top: 3px;
  content: '';
  margin-right: 6px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
}

/* HTML上の隣のform-radio-textタグを、radioがcheckedのときスタイルを変化させる */
/* ajaxで返却された用にJavascript以外でcssも設定しておく。ただしIE11系だと動かない */
.form-block .form-radio input[type=radio]:checked + .form-radio-text:before {
  content: '';
  border: 4px solid #9b1927;
}

.form-block .form-radio .form-radio-text.form-radio-text-force:before {
  content: '';
  border: 4px solid #9b1927;
}

.form-block .form-radio .form-radio-disabled {
  color: #888;
}

.form-block .form-radio .form-radio-disabled:before {
  float: left;
  border: 1px solid #bbb;
  content: '';
  width: 16px;
  height: 16px;
  margin-top: 3px;
  content: '';
  margin-right: 6px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  cursor: pointer;
  background-color: #efeeee;
  content: '×';
  font-weight: bold;
  text-align: center;
  line-height: 1.3em;
  font-size: 10px;
  color: #aaa;
}

/* checkbox */
/* デフォルトは非表示にして、form-radio-textのbefore要素をチェックに見立てる */
.form-block .form-checkbox input[type=checkbox] {
  display: none !important;
  visibility: hidden !important;
}

.form-block .form-checkbox label:after {
  clear: both;
  content: '';
  display: block;
}

.form-block .form-checkbox label {
  margin-bottom: 2px;
}

.form-block .form-checkbox .form-checkbox-text {
  float: left;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding-bottom: 3px;
  padding-right: 5px;
  z-index: 100;
}

.form-block .form-checkbox .form-checkbox-text:before {
  float: left;
  border: 1px solid #bbb;
  content: '';
  width: 16px;
  height: 16px;
  margin-top: 3px;
  content: '';
  margin-right: 6px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
}

.form-block .form-checkbox .form-checkbox-text.style-disable {
  color: #888;
  cursor: inherit;
}

.form-block .form-checkbox .form-checkbox-text.style-disable:before {
  display: inline-block;
  border: 1px solid #ccc9c9;
  background-color: #f2f0f0;
  color: #ccc9c9;
  cursor: inherit;
  content: '×';
  text-align: center;
  font-size: 12px;
  line-height: 1.1;
  padding-left: 1px;
}

/* HTML上の隣のform-checkbox-textタグを、checkboxがcheckedのときスタイルを変化させる */
/* ajaxで返却された用にJavascript以外でcssも設定しておく。ただしIE11系だと動かない */
.form-block .form-checkbox input[type=checkbox]:checked + .form-checkbox-text:before {
  font-family: FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
  line-height: 1em;
  color: #fff;
  background-color: #9b1927;
  font-size: 12px;
  border: 0px solid #fff;
  padding-top: 2px;
  padding-left: 2px;
}

.form-block .form-checkbox .form-checkbox-text.form-checkbox-text-force:before {
  font-family: FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
  line-height: 1em;
  color: #fff;
  background-color: #9b1927;
  font-size: 12px;
  border: 0px solid #fff;
  padding-top: 2px;
  padding-left: 2px;
}

/* select */
/* 1行で連続したselectをつくる場合 */
.form-block div[class^="col-"]:after {
  content: '';
  clear: both;
  display: block;
}

.form-block div[class^="col-"] .form-select {
  float: left;
  margin-right: 10px;
}

.form-block div[class^="col-"] .form-select:last-child {
  margin-right: 0px;
}

.form-block .form-select {
  position: relative;
  border-width: 0px;
  padding: 0px;
  display: inline-block;
  margin-bottom: 0;
  white-space: nowrap;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-block .form-select select {
  /* デフォルトスタイルを消す */
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  height: 34px;
  border-radius: 3px;
  background: none transparent;
  outline: none;
  font-size: 15px;
  line-height: 1.0em;
  color: #555;
  padding: 0px 30px 0px 15px;
  border: 1px solid #bbb;
  cursor: pointer;
}

.form-block .form-select select::-ms-expand {
  display: none;
}

.form-block .form-select .field_with_errors select {
  border: 1px solid #ffbd2e;
  background-color: #fff5de;
}

@media (max-width: 364px) {
  .form-block .form-select select {
    padding: 0px 25px 0px 10px;
  }
}
.form-block .form-select select:focus {
  border-color: #9b1927;
}

.form-block .form-select:after {
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  font-family: FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f107";
  padding-top: 6px;
  padding-right: 10px;
  pointer-events: none;
  z-index: 999;
}

.form-block .form-info {
  background-color: #efeeee;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  margin-top: 15px;
}

/* datetime */
.form-block .form-layout-datetime:after {
  display: block;
  clear: both;
  content: "";
}

.form-block .form-layout-datetime .form-layout-input {
  float: left;
  width: 40%;
  display: block;
  padding-right: 20px;
}

.form-block .form-layout-datetime .form-select {
  float: left;
  position: relative;
  display: block;
}

@media (max-width: 767px) {
  .form-block .form-layout-datetime .form-layout-input {
    width: 50%;
  }
}
.form-block .form-separator {
  border-top: 1px dotted #d8d6d6;
  font-size: 13px;
  color: #555;
  font-weight: bold;
  padding-top: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .form-block .form-separator {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) {
  .form-block .form-file img {
    display: block;
    width: 200px;
  }

  .form-block .form-file .form-file-text {
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .form-block .form-file .form-file-result {
    width: 200px;
  }

  .form-block .form-file.style-large img {
    width: 300px;
  }

  .form-block .form-file.style-large .form-file-result {
    width: 300px;
  }
}
@media (max-width: 767px) {
  .form-block .form-file img {
    display: block;
  }

  .form-block .form-file .form-file-text {
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.form-block .form-image {
  position: relative;
  width: 100%;
}

.form-block .form-image-upload-action {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: block;
  line-height: 1;
  padding: 10px 10px 10px 10px;
  font-size: 13px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  cursor: pointer;
}

.form-block .form-image-upload-action:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.form-block .form-image-delete-action {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 10px 15px 10px 15px;
  text-shadow: 0px 0px 4px #555;
  cursor: pointer;
}

.form-block .form-image-delete-action:hover {
  text-shadow: 0px 0px 3px #000;
}

.form-block .form-image img {
  width: 100%;
}

.form-image .form-image-upload-new {
  background-color: #efeeee;
  text-align: center;
}

.form-image .form-image-upload-new {
  position: relative;
  width: 100%;
}

.form-image .form-image-upload-new:before {
  content: "";
  display: block;
  padding-top: 75%;
}

.form-image .form-image-upload-new .form-image-not-uploaded {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

.form-image .form-image-upload-new .form-image-not-uploaded p {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 90px;
}

.form-image .form-image-upload-new .form-image-not-uploaded i {
  display: block;
  font-size: 60px;
  margin-bottom: 10px;
  line-height: 1;
}

.form-image .form-image-upload-new .form-image-not-uploaded span {
  text-decoration: underline;
  font-size: 13px;
  line-height: 1;
}

.form-image-file-field {
  display: none !important;
  visibility: hidden !important;
}

.form-block .form-unit-controll ul {
  content: '';
  clear: both;
  display: block;
}
.form-block .form-unit-controll ul:after {
  content: '';
  clear: both;
  display: block;
}
.form-block .form-unit-controll ul li {
  float: left;
}
.form-block .form-unit-controll ul li a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #888;
}
.form-block .form-unit-controll ul li a:hover {
  color: #9b1927;
}

.form-block .row.add-indicator div[class^="col-sm"]:first-child {
  padding-left: 40px;
}
@media (max-width: 767px) {
  .form-block .row.add-indicator div[class^="col-sm"] {
    padding-left: 40px;
  }
  .form-block .row.add-indicator div[class^="col-xs"]:first-of-type {
    padding-left: 40px;
  }
}
.form-block .row.add-indicator div[class^="col-"]:first-child {
  position: relative;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator {
  position: absolute;
  top: 0px;
  left: 15px;
  width: 40px;
  height: 40px;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-complete:before {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  font-family: FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
  line-height: 1;
  width: 17px;
  height: 17px;
  text-align: center;
  color: #2687fb;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-uploading:before {
  position: absolute;
  top: 8px;
  left: 0;
  display: block;
  font-family: FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f1ce";
  line-height: 1;
  width: 17px;
  height: 17px;
  text-align: center;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
  color: #888;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting,
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:before,
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:after {
  color: #888;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: animation-inputting 1s infinite ease-in-out;
  animation: animation-inputting 1s infinite ease-in-out;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting {
  font-size: 10px;
  line-height: 1;
  margin: 0 auto;
  margin-top: -10px;
  margin-left: 4px;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:before,
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:before {
  left: -8px;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.form-block .row.add-indicator div[class^="col-"]:first-child .form-indicator .indicator-icon.style-inputting:after {
  left: 8px;
}
@-webkit-keyframes animation-inputting {
  0%, 80%, 100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes animation-inputting {
  0%, 100% {
    box-shadow: 0 2.5em 0 -0.3em;
  }
  50% {
    box-shadow: 0 2.5em 0 0;
  }
}