@charset "UTF-8";
form.mailform .required {
  background: #da2424;
  color: white;
  display: inline-block;
  padding: 3px 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 3px; }

form.mailform fieldset {
  border: none; }

form.mailform .input-form {
  border: none;
  border-top: 1px solid #dedede; }
  form.mailform .input-form .form-group {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #dedede; }
    form.mailform .input-form .form-group > .control-label {
      flex: 0 0 200px;
      display: flex;
      justify-content: space-between;
      margin-right: 20px; }
      form.mailform .input-form .form-group > .control-label .title {
        flex: 1 1 auto;
        font-weight: 700; }
      form.mailform .input-form .form-group > .control-label .icon {
        display: block;
        flex: 0 0 50px;
        text-align: right; }
    form.mailform .input-form .form-group > .controls {
      position: relative;
      flex: 1 1 auto; }
      form.mailform .input-form .form-group > .controls input[type=text],
      form.mailform .input-form .form-group > .controls input[type=email],
      form.mailform .input-form .form-group > .controls input[type=tel],
      form.mailform .input-form .form-group > .controls textarea,
      form.mailform .input-form .form-group > .controls button.zip-search {
        border: 1px solid #ccc;
        font-size: 16px;
        line-height: 1.3;
        padding: 5px 10px;
        border-radius: 4px;
        background: #f4f4f4; }
        form.mailform .input-form .form-group > .controls input[type=text]:focus,
        form.mailform .input-form .form-group > .controls input[type=email]:focus,
        form.mailform .input-form .form-group > .controls input[type=tel]:focus,
        form.mailform .input-form .form-group > .controls textarea:focus,
        form.mailform .input-form .form-group > .controls button.zip-search:focus {
          background: #fff; }
        form.mailform .input-form .form-group > .controls input[type=text].size-sss,
        form.mailform .input-form .form-group > .controls input[type=email].size-sss,
        form.mailform .input-form .form-group > .controls input[type=tel].size-sss,
        form.mailform .input-form .form-group > .controls textarea.size-sss,
        form.mailform .input-form .form-group > .controls button.zip-search.size-sss {
          width: 60px; }
        form.mailform .input-form .form-group > .controls input[type=text].size-ss,
        form.mailform .input-form .form-group > .controls input[type=email].size-ss,
        form.mailform .input-form .form-group > .controls input[type=tel].size-ss,
        form.mailform .input-form .form-group > .controls textarea.size-ss,
        form.mailform .input-form .form-group > .controls button.zip-search.size-ss {
          width: 120px; }
        form.mailform .input-form .form-group > .controls input[type=text].size-s,
        form.mailform .input-form .form-group > .controls input[type=email].size-s,
        form.mailform .input-form .form-group > .controls input[type=tel].size-s,
        form.mailform .input-form .form-group > .controls textarea.size-s,
        form.mailform .input-form .form-group > .controls button.zip-search.size-s {
          width: 200px; }
        form.mailform .input-form .form-group > .controls input[type=text].size-m,
        form.mailform .input-form .form-group > .controls input[type=email].size-m,
        form.mailform .input-form .form-group > .controls input[type=tel].size-m,
        form.mailform .input-form .form-group > .controls textarea.size-m,
        form.mailform .input-form .form-group > .controls button.zip-search.size-m {
          width: 300px; }
        form.mailform .input-form .form-group > .controls input[type=text].size-l,
        form.mailform .input-form .form-group > .controls input[type=email].size-l,
        form.mailform .input-form .form-group > .controls input[type=tel].size-l,
        form.mailform .input-form .form-group > .controls textarea.size-l,
        form.mailform .input-form .form-group > .controls button.zip-search.size-l {
          width: 400px; }
        form.mailform .input-form .form-group > .controls input[type=text].size-ll,
        form.mailform .input-form .form-group > .controls input[type=email].size-ll,
        form.mailform .input-form .form-group > .controls input[type=tel].size-ll,
        form.mailform .input-form .form-group > .controls textarea.size-ll,
        form.mailform .input-form .form-group > .controls button.zip-search.size-ll {
          width: 100%; }
        form.mailform .input-form .form-group > .controls input[type=text].zip1,
        form.mailform .input-form .form-group > .controls input[type=email].zip1,
        form.mailform .input-form .form-group > .controls input[type=tel].zip1,
        form.mailform .input-form .form-group > .controls textarea.zip1,
        form.mailform .input-form .form-group > .controls button.zip-search.zip1 {
          width: 70px; }
        form.mailform .input-form .form-group > .controls input[type=text].zip2,
        form.mailform .input-form .form-group > .controls input[type=email].zip2,
        form.mailform .input-form .form-group > .controls input[type=tel].zip2,
        form.mailform .input-form .form-group > .controls textarea.zip2,
        form.mailform .input-form .form-group > .controls button.zip-search.zip2 {
          width: 100px; }
        form.mailform .input-form .form-group > .controls input[type=text].tel1, form.mailform .input-form .form-group > .controls input[type=text].tel2, form.mailform .input-form .form-group > .controls input[type=text].tel3,
        form.mailform .input-form .form-group > .controls input[type=email].tel1,
        form.mailform .input-form .form-group > .controls input[type=email].tel2,
        form.mailform .input-form .form-group > .controls input[type=email].tel3,
        form.mailform .input-form .form-group > .controls input[type=tel].tel1,
        form.mailform .input-form .form-group > .controls input[type=tel].tel2,
        form.mailform .input-form .form-group > .controls input[type=tel].tel3,
        form.mailform .input-form .form-group > .controls textarea.tel1,
        form.mailform .input-form .form-group > .controls textarea.tel2,
        form.mailform .input-form .form-group > .controls textarea.tel3,
        form.mailform .input-form .form-group > .controls button.zip-search.tel1,
        form.mailform .input-form .form-group > .controls button.zip-search.tel2,
        form.mailform .input-form .form-group > .controls button.zip-search.tel3 {
          width: 100px; }
        form.mailform .input-form .form-group > .controls input[type=text].type11, form.mailform .input-form .form-group > .controls input[type=text].type12,
        form.mailform .input-form .form-group > .controls input[type=email].type11,
        form.mailform .input-form .form-group > .controls input[type=email].type12,
        form.mailform .input-form .form-group > .controls input[type=tel].type11,
        form.mailform .input-form .form-group > .controls input[type=tel].type12,
        form.mailform .input-form .form-group > .controls textarea.type11,
        form.mailform .input-form .form-group > .controls textarea.type12,
        form.mailform .input-form .form-group > .controls button.zip-search.type11,
        form.mailform .input-form .form-group > .controls button.zip-search.type12 {
          width: 120px; }
        form.mailform .input-form .form-group > .controls input[type=text].zip-search,
        form.mailform .input-form .form-group > .controls input[type=email].zip-search,
        form.mailform .input-form .form-group > .controls input[type=tel].zip-search,
        form.mailform .input-form .form-group > .controls textarea.zip-search,
        form.mailform .input-form .form-group > .controls button.zip-search.zip-search {
          display: inline-block;
          background: #eee;
          margin-left: 5px; }
          form.mailform .input-form .form-group > .controls input[type=text].zip-search:hover,
          form.mailform .input-form .form-group > .controls input[type=email].zip-search:hover,
          form.mailform .input-form .form-group > .controls input[type=tel].zip-search:hover,
          form.mailform .input-form .form-group > .controls textarea.zip-search:hover,
          form.mailform .input-form .form-group > .controls button.zip-search.zip-search:hover {
            background: #ddd; }
          form.mailform .input-form .form-group > .controls input[type=text].zip-search.loading,
          form.mailform .input-form .form-group > .controls input[type=email].zip-search.loading,
          form.mailform .input-form .form-group > .controls input[type=tel].zip-search.loading,
          form.mailform .input-form .form-group > .controls textarea.zip-search.loading,
          form.mailform .input-form .form-group > .controls button.zip-search.zip-search.loading {
            opacity: .7; }
      form.mailform .input-form .form-group > .controls textarea {
        width: 100%; }
      form.mailform .input-form .form-group > .controls select {
        border: 1px solid #ccc;
        line-height: 1.3;
        padding: 5px 10px; }
        form.mailform .input-form .form-group > .controls select.type10 {
          width: 100px; }
      form.mailform .input-form .form-group > .controls label.radio,
      form.mailform .input-form .form-group > .controls label.checkbox {
        display: block;
        width: 45%;
        float: left; }
      form.mailform .input-form .form-group > .controls .example {
        display: block;
        color: #666;
        line-height: 1.2;
        margin: 5px 0; }
      form.mailform .input-form .form-group > .controls .error {
        color: #da2424; }
      form.mailform .input-form .form-group > .controls label.error-tooltip {
        position: absolute;
        z-index: 10;
        background: #da2424;
        border-radius: 3px;
        padding: 4px 6px;
        margin-top: 3px;
        color: white;
        opacity: .85;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        font-size: 12px; }
        form.mailform .input-form .form-group > .controls label.error-tooltip::before {
          position: absolute;
          top: -6px;
          left: 10px;
          content: '';
          width: 0;
          height: 0;
          border: 0 solid transparent;
          border-right-width: 6px;
          border-left-width: 6px;
          border-bottom: 6px solid #da2424; }
      form.mailform .input-form .form-group > .controls span.sub {
        display: inline-block;
        margin-right: 5px; }
      form.mailform .input-form .form-group > .controls * + span.sub {
        margin-left: 10px; }

form.mailform .submit {
  margin: 20px;
  text-align: center; }
  form.mailform .submit input {
    display: inline-block;
    background-color: #ddd;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer; }
    form.mailform .submit input:hover {
      background-color: #ccc; }

form.mailform div.reserve-calendar .wrapper {
  margin: 30px 0; }
  form.mailform div.reserve-calendar .wrapper > .title {
    border: 1px solid #ccc;
    padding: 3px 6px; }

form.mailform div.reserve-calendar table {
  width: auto;
  margin: 20px auto;
  border: none; }
  form.mailform div.reserve-calendar table caption nav {
    display: flex;
    padding: 5px 0 10px; }
    form.mailform div.reserve-calendar table caption nav span.month {
      flex: 1 1 auto;
      text-align: left;
      font-size: 18px; }
    form.mailform div.reserve-calendar table caption nav span.next,
    form.mailform div.reserve-calendar table caption nav span.prev {
      color: #aaa;
      border-radius: 3px;
      border: 1px solid #ccc;
      padding: 3px 6px;
      font-size: 13px;
      background: #f0f0f0; }
      form.mailform div.reserve-calendar table caption nav span.next.active,
      form.mailform div.reserve-calendar table caption nav span.prev.active {
        cursor: pointer;
        color: #333;
        background: white; }
        form.mailform div.reserve-calendar table caption nav span.next.active:hover,
        form.mailform div.reserve-calendar table caption nav span.prev.active:hover {
          background: #ffffb1; }
        form.mailform div.reserve-calendar table caption nav span.next.active:active,
        form.mailform div.reserve-calendar table caption nav span.prev.active:active {
          background: #ffff52;
          border-color: #ddd;
          color: #999; }
    form.mailform div.reserve-calendar table caption nav span.prev {
      margin-right: 15px; }
  form.mailform div.reserve-calendar table thead th {
    text-align: center;
    padding: 3px 0;
    border-bottom: 3px double #ccc; }
    form.mailform div.reserve-calendar table thead th.week-0 {
      background-color: #ffecf5; }
    form.mailform div.reserve-calendar table thead th.week-6 {
      background-color: #e4f1fd; }
  form.mailform div.reserve-calendar table tbody td {
    padding: 10px 20px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif; }
    @media screen and (max-width: 500px) {
      form.mailform div.reserve-calendar table tbody td {
        padding: 10px 15px; } }
    form.mailform div.reserve-calendar table tbody td.disabled {
      background: #eee;
      color: #666; }
    form.mailform div.reserve-calendar table tbody td.enabled {
      background: white;
      transition-duration: .3s;
      cursor: pointer; }
      form.mailform div.reserve-calendar table tbody td.enabled:hover {
        background: #e9ff99 !important; }
      form.mailform div.reserve-calendar table tbody td.enabled.active {
        background: #92da84 !important;
        color: white; }
      form.mailform div.reserve-calendar table tbody td.enabled.week-0 {
        background-color: #ffecf5; }
      form.mailform div.reserve-calendar table tbody td.enabled.holiday {
        background-color: #ffecf5;
        color: #e01414;
        font-weight: 700; }
      form.mailform div.reserve-calendar table tbody td.enabled.week-6 {
        background-color: #e4f1fd; }

form.mailform div.reserve-calendar .time_options ul {
  padding: 0;
  text-align: center; }
  form.mailform div.reserve-calendar .time_options ul li {
    display: inline-block;
    list-style: none;
    margin: 5px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 6px;
    white-space: nowrap; }
    form.mailform div.reserve-calendar .time_options ul li.enabled {
      color: #2e9b49;
      border-color: #92da84;
      cursor: pointer;
      transition-duration: .3s; }
      form.mailform div.reserve-calendar .time_options ul li.enabled:hover {
        background: #ffffb1; }
      form.mailform div.reserve-calendar .time_options ul li.enabled.active {
        background: #92da84;
        border-color: #92da84;
        color: white; }
    form.mailform div.reserve-calendar .time_options ul li.disabled {
      color: #c27878;
      border-color: #c27878; }
    form.mailform div.reserve-calendar .time_options ul li span.entry,
    form.mailform div.reserve-calendar .time_options ul li span.capacity {
      display: inline-block;
      background: #ddd;
      padding: 0 4px;
      /* 標準では隠す */
      display: none; }
    form.mailform div.reserve-calendar .time_options ul li span.entry {
      margin-left: 5px;
      border-radius: 3px 0 0 3px;
      padding-right: 0; }
      form.mailform div.reserve-calendar .time_options ul li span.entry::after {
        content: '/';
        padding-left: 4px; }
    form.mailform div.reserve-calendar .time_options ul li span.capacity {
      margin-right: 5px;
      border-radius: 0 3px 3px 0; }
    form.mailform div.reserve-calendar .time_options ul li span.status {
      display: inline-block;
      margin-left: 5px;
      font-family: Osaka, Meiryo; }

form.mailform.confirm .input-form .controls span.sub {
  display: none; }