#container {
  position: relative; }
  #container .inner {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    @media screen and (max-width: 640px) {
      #container .inner {
        width: 100%; } }
  #container p.msg {
    margin-bottom: 0.5em;
    line-height: 1.6em; }
    #container p.msg:last-of-type {
      margin-bottom: 1.7em; }
  #container p.blank {
    background: #f5f5f5;
    padding: 3em 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold; }
  #container a {
    color: #009c84; }
    #container a:hover {
      color: #000; }
  #container a.btn {
    background: url(../../images/btn-arrow.svg) right 0.5em center/1.2em no-repeat #009c84;
    color: #fff;
    font-size: 14px;
    padding: 0.3em 2.2em 0.3em 1em;
    font-weight: bold;
    border-radius: 2em;
    display: inline-block;
    -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    white-space: nowrap; }
    #container a.btn:hover {
      -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2); }
  #container .rencon-att {
    font-size: inherit;
    color: #f00; }
  #container .rencon-error {
    display: inline-block;
    font-size: 14px;
    color: #f00;
    border: solid 1px #f00;
    margin-bottom: 0.5em;
    padding: 0.2em 0.5em;
    border-radius: 0.3em; }
  #container .msg {
    font-weight: bold; }
    #container .msg.alert {
      color: #f00; }
  #container .week {
    display: inline-block;
    background: #009c84;
    font-size: 70%;
    border-radius: 100%;
    color: #fff;
    padding: 0.2em; }
    #container .week.sat {
      background: #009cff; }
    #container .week.sun {
      background: #ff5700; }
  #container .invalid {
    text-align: center;
    padding: 4em 0;
    background: #f5f5f5; }
    #container .invalid p.msg {
      margin-bottom: 0; }

header {
  border-bottom: solid 4px #009c84;
  display: -webkit-flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px 0 0; }
  header .title {
    display: -webkit-flex;
    -webkit-justify-content: flex-start;
    -webkit-align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch; }
    header .title dl {
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      -webkit-align-items: stretch;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column; }
      header .title dl dt {
        background: #000;
        color: #fff;
        font-size: 14px;
        padding: 0.2em 1em;
        font-weight: bold; }
      header .title dl dd {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 20px;
        display: -webkit-flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff; }
        header .title dl dd.role_color_1, header .title dl dd.role_color_2, header .title dl dd.role_color_3 {
          background: #009c84; }
        header .title dl dd.role_color_4 {
          background: #e773c3; }
        header .title dl dd.role_color_5 {
          background: #f9be00; }
  header h1 {
    font-size: 20px;
    color: #009c84;
    padding: 0.7em 1em; }

footer {
  padding: 1em 0;
  text-align: center; }

main {
  background: #f5f5f5; }
  main nav {
    background: #fff;
    padding: 0 10px;
    margin-bottom: 40px; }
    main nav ul {
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      max-width: 960px;
      margin: auto; }
      main nav ul li {
        font-size: 14px;
        margin-right: 1em; }
        main nav ul li a {
          display: -webkit-flex;
          -webkit-justify-content: center;
          -webkit-align-items: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          border: solid 2px #009c84;
          min-width: 7em;
          height: 2.5em;
          padding-right: 2.5em;
          padding-left: 1em;
          background: url(../../images/nav-arrow.svg) right 1em center/1em no-repeat #009c84;
          color: #fff !important;
          font-size: 16px;
          font-weight: bold;
          border-radius: 0.4em; }
        main nav ul li.logout a {
          background: #fff;
          color: #009c84 !important;
          background-image: none;
          padding-left: 1em;
          padding-right: 1em; }
    @media screen and (max-width: 860px) {
      main nav ul li a {
        padding-right: 2.5em;
        padding-left: 1em;
        font-size: 2vw; } }
    @media screen and (max-width: 640px) {
      main nav {
        margin-bottom: 5vw; }
        main nav ul li {
          margin-right: 0.2em; } }
  main .subnav {
    padding-top: 20px; }
    main .subnav ul {
      display: -webkit-flex;
      -webkit-justify-content: flex-start;
      -webkit-align-items: stretch;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch; }
      main .subnav ul li {
        margin-right: 10px; }
        main .subnav ul li a {
          display: block;
          border: solid 1px #ccc;
          background: #fff;
          line-height: 1em;
          white-space: nowrap;
          padding: 0.2em 1em;
          color: #000;
          font-size: 14px; }
          main .subnav ul li a:hover {
            opacity: 0.5; }
  main h3 {
    font-size: 26px;
    margin-bottom: 1em;
    text-align: center;
    background: #e1f3f1;
    padding: 0.5em 0; }
    @media screen and (max-width: 640px) {
      main h3 {
        font-size: 5vw; } }
  main h4 {
    border-left: 5px solid #009c84;
    font-size: 20px;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background: #f5f5f5; }
  main h5 {
    color: #009c84;
    font-size: 16px;
    background: #f5f5f5;
    margin-bottom: 0.2em;
    padding: 0.5em 0.7em; }
    main h5:before {
      content: "";
      display: inline-block;
      width: 0.7em;
      height: 0.7em;
      background: #009c84;
      vertical-align: baseline;
      margin-right: 0.2em; }
    @media screen and (max-width: 640px) {
      main h5 {
        font-size: 4vw; } }
  main .index {
    padding-top: 20px;
    max-width: 660px;
    margin: auto; }
    main .index.mypage-top {
      padding-top: 60px;
      max-width: 960px;
      margin: auto; }
      main .index.mypage-top ul > li {
        padding-top: 50px; }
    main .index h3 span {
      display: block;
      text-align: center; }
    main .index ul {
      display: -webkit-flex;
      -webkit-justify-content: flex-start;
      -webkit-align-items: stretch;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%; }
      main .index ul > li {
        background: #fff;
        border: solid 1px #ccc;
        padding: 40px 50px;
        border-radius: 10px;
        position: relative;
        margin-bottom: 50px;
        width: calc(100% - 100px); }
        main .index ul > li:last-child() {
          margin-right: 0 !important; }
        main .index ul > li ins {
          width: 40px;
          height: 40px;
          border: solid 2px #009c84;
          border-radius: 30px;
          display: -webkit-flex;
          -webkit-justify-content: center;
          -webkit-align-items: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          padding: 0;
          background: #fff;
          position: absolute;
          left: calc(50% - 20px);
          top: -20px; }
          main .index ul > li ins span {
            color: #009c84;
            font-size: 32px; }
        main .index ul > li ol {
          list-style: none; }
          main .index ul > li ol li {
            font-size: 16px; }
            main .index ul > li ol li a {
              color: #009c84;
              font-weight: bold;
              font-size: inherit;
              padding: 0.7em 1em 0.7em 1.5em;
              border-bottom: 1px dashed #ccc;
              background: url(../../images/li.svg) left center/1em no-repeat;
              display: block; }
    main .index.login ul {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      main .index.login ul li h3 {
        text-align: center; }
      main .index.login ul .attr {
        color: #f00;
        font-size: 20px;
        line-height: 1.4em;
        font-weight: bold;
        text-align: center;
        background: #f5f5f5;
        padding: 0.5em 0.5em;
        border: solid 2px #f00;
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
    @media screen and (max-width: 660px) {
      main .index {
        width: 90%; }
        main .index ul li {
          padding: 3vw;
          width: calc(100% - 6vw); } }
  main #wrapper {
    margin: auto;
    padding-bottom: 20px;
    padding-top: 1px; }
    main #wrapper section {
      max-width: 860px;
      background: #fff;
      margin: 20px auto auto;
      padding: 40px 50px;
      border-radius: 10px; }
    @media screen and (max-width: 860px) {
      main #wrapper section {
        width: 90%;
        padding: 3vw; } }
  main .msg {
    font-size: 20px;
    margin-bottom: 1em;
    color: #009c84; }
  main .err {
    font-size: 20px;
    margin-bottom: 1em;
    color: #f00; }
  main .list {
    margin-bottom: 50px; }
    main .list table {
      width: 100%; }
      main .list table tr th, main .list table tr td {
        font-size: 14px;
        padding: 0.5em 1em;
        width: auto; }
      main .list table thead tr th {
        border-top: solid 1px #ccc;
        border-bottom: solid 1px #ccc;
        text-align: center;
        background: #f2faf9;
        white-space: nowrap; }
        main .list table thead tr th:after {
          display: none; }
      main .list table tbody tr th, main .list table tbody tr td {
        text-align: left;
        border-bottom: solid 1px #ccc; }
      main .list table tbody tr:nth-child(even) {
        background: #f5f5f5; }
      main .list table tbody tr:hover {
        background: #f2faf9; }
      main .list table tbody tr.hilight {
        background: #f9be00; }
    main .list .pager {
      text-align: center;
      padding-top: 30px;
      display: -webkit-flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      main .list .pager a {
        display: -webkit-flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: solid 2px #009c84;
        font-size: 16px;
        width: 1.6em;
        height: 1.6em;
        margin: 0 5px 10px;
        border-radius: 1em; }
        main .list .pager a.on {
          background: #009c84;
          color: #fff !important; }
    @media screen and (max-width: 860px) {
      main .list .list-table {
        overflow-x: auto; }
        main .list .list-table table th:nth-child(1), main .list .list-table table th:nth-child(2), main .list .list-table table th:nth-child(3) {
          min-width: 12em; } }
  main .reserve-form {
    margin-bottom: 50px; }
  main .reserve-confirm {
    margin-bottom: 50px; }
    main .reserve-confirm ul {
      margin-bottom: 30px;
      border: solid 1px #ccc; }
      main .reserve-confirm ul li {
        font-size: 26px;
        text-align: center;
        padding: 0.5em 0;
        border-bottom: solid 1px #ccc; }
        main .reserve-confirm ul li span.disabled {
          font-size: inherit;
          opacity: 0.4; }
        main .reserve-confirm ul li p.alert {
          color: #f00;
          font-size: 20px; }
        main .reserve-confirm ul li:last-child {
          margin-bottom: 0;
          border-bottom: 0; }
  main .reserved_stats {
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 0.3em 0.5em;
    font-weight: bold;
    border-radius: 2em; }
    main .reserved_stats.reserved_none {
      background: #00ACFF; }
    main .reserved_stats.reserved_reserved {
      background: #E98181; }
    main .reserved_stats.reserve_disabled {
      background: #ccc; }
  main .stats {
    color: #fff;
    font-size: 14px;
    display: block;
    padding: 0.3em 0em;
    font-weight: bold;
    border-radius: 2em;
    white-space: nowrap;
    text-align: center; }
    main .stats.blue {
      background: #00ACFF; }
    main .stats.red {
      background: #E98181; }
    main .stats.gray {
      background: #e69797; }
    main .stats.orange {
      background: #ffb061; }
  main .calender-title {
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 50px; }
    main .calender-title dl {
      display: -webkit-flex;
      -webkit-justify-content: flex-start;
      -webkit-align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      main .calender-title dl dt {
        font-size: 20px; }
      main .calender-title dl dd {
        background: #f9be00;
        padding: 0.2em 0.5em;
        font-size: 30px;
        line-height: 1em;
        min-width: 10em; }
    main .calender-title .link a {
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      padding: 0.2em 0;
      padding-right: 1.5em;
      background: url(../../images/btn-arrow-green.svg) right center/contain no-repeat; }
  main .calender .cal {
    margin-bottom: 50px; }
    main .calender .cal .cal-month {
      font-size: 20px;
      text-align: center; }
      main .calender .cal .cal-month strong {
        font-size: 35px; }
    main .calender .cal table {
      width: auto;
      margin: auto; }
  main .calender .open-next a {
    display: block;
    background: url(../../images/btn-arrow-green-bottom.svg) right 10% center/1.5em no-repeat #f5f5f5;
    margin: auto;
    font-size: 20px;
    width: 300px;
    margin: auto;
    padding: 1em 0;
    text-align: center;
    border-radius: 2em;
    font-weight: bold; }
    main .calender .open-next a:hover {
      color: #fff !important;
      background-color: #009c84; }

form input[type="text"], form input[type="password"], form input[type="email"], form input[type="tel"], form input[type="date"], form input[type="time"], form input[type="number"], .form-format input[type="text"], .form-format input[type="password"], .form-format input[type="email"], .form-format input[type="tel"], .form-format input[type="date"], .form-format input[type="time"], .form-format input[type="number"] {
  font-size: 16px;
  padding: 0.2em 0.5em;
  max-width: calc(100% - 1em); }

form input[type="text"], form input[type="password"], form input[type="email"], .form-format input[type="text"], .form-format input[type="password"], .form-format input[type="email"] {
  width: calc(100% - 1em); }

form input[type="number"], .form-format input[type="number"] {
  width: 7em; }

form input[type="date"], .form-format input[type="date"] {
  width: calc(95% - 1em); }

form input[type="time"], .form-format input[type="time"] {
  width: calc(40% - 1em); }

form input[type="tel"], .form-format input[type="tel"] {
  width: 5em; }
  form input[type="tel"].rencon-zip, .form-format input[type="tel"].rencon-zip {
    margin-bottom: 0.4em; }

form label input[type="radio"], form label input[type="checkbox"], .form-format label input[type="radio"], .form-format label input[type="checkbox"] {
  vertical-align: top; }

form select, .form-format select {
  font-size: 16px; }

form table, .form-format table {
  border: solid 0px #fff;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 10px; }
  form table th, form table td, .form-format table th, .form-format table td {
    font-size: 16px;
    padding: 0 0.3em;
    border-bottom: solid 5px #fff;
    height: 2em;
    vertical-align: middle; }
  form table th, .form-format table th {
    position: relative;
    background: #f5f5f5;
    white-space: nowrap;
    text-align: left;
    padding: 0.3em 1em;
    min-width: 25%; }
    form table th:after, .form-format table th:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      display: block;
      background: #009c84; }
    form table th.nobg, .form-format table th.nobg {
      background: none; }
      form table th.nobg:after, .form-format table th.nobg:after {
        display: none; }
  form table td, .form-format table td {
    width: 75%;
    font-size: 16px;
    font-weight: bold; }
    form table td strong, .form-format table td strong {
      font-size: 120%; }
    form table td.min, .form-format table td.min {
      width: 10px; }
    form table td.w25, .form-format table td.w25 {
      width: 35%; }

form table.reserve-regist tr td, .form-format table.reserve-regist tr td {
  white-space: nowrap;
  width: 30%; }
  form table.reserve-regist tr td input[type="date"], .form-format table.reserve-regist tr td input[type="date"] {
    width: 10em; }
  form table.reserve-regist tr td input[type="time"], .form-format table.reserve-regist tr td input[type="time"] {
    width: 7em; }
  form table.reserve-regist tr td .reserve-line, .form-format table.reserve-regist tr td .reserve-line {
    height: 30px;
    width: 30px;
    border: solid 2px #009c84;
    border-radius: 100%;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative; }
    form table.reserve-regist tr td .reserve-line:before, .form-format table.reserve-regist tr td .reserve-line:before {
      content: "";
      display: block;
      width: 60%;
      height: 2px;
      background: #009c84;
      position: absolute;
      top: calc(50% - 1px);
      left: 20%; }
    form table.reserve-regist tr td .reserve-line.reserve-plus, .form-format table.reserve-regist tr td .reserve-line.reserve-plus {
      margin-right: 5px; }
      form table.reserve-regist tr td .reserve-line.reserve-plus:after, .form-format table.reserve-regist tr td .reserve-line.reserve-plus:after {
        content: "";
        display: block;
        width: 2px;
        height: 60%;
        background: #009c84;
        position: absolute;
        left: calc(50% - 1px);
        top: 20%; }
    form table.reserve-regist tr td .reserve-line:hover, .form-format table.reserve-regist tr td .reserve-line:hover {
      background: #009c84; }
      form table.reserve-regist tr td .reserve-line:hover:before, form table.reserve-regist tr td .reserve-line:hover:after, .form-format table.reserve-regist tr td .reserve-line:hover:before, .form-format table.reserve-regist tr td .reserve-line:hover:after {
        background: #fff !important; }

form table.reserve-regist tr:first-child td .reserve-line.reserve-minus, .form-format table.reserve-regist tr:first-child td .reserve-line.reserve-minus {
  opacity: 0; }

.btn_flex {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }
  .btn_flex button, .btn_flex .button {
    margin: 0 5px; }

button, .button {
  min-width: 13em;
  font-size: 16px;
  color: #fff;
  background: #009c84;
  border: 0;
  padding: 0 1em;
  line-height: 1em;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: bold;
  margin: 0 0.3em 30px;
  color: #fff !important;
  height: 3em;
  cursor: pointer; }
  button:disabled, .button:disabled {
    background: #ccc;
    cursor: default; }
  button.gray, .button.gray {
    background: #ccc; }

.submit-wrapper {
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .submit-wrapper button, .submit-wrapper .button {
    margin: 0 5px; }

.dl {
  margin-bottom: 1em;
  text-align: right; }
  .dl a {
    font-size: 16px;
    font-weight: bold; }
    .dl a span {
      color: #fff;
      display: inline-block;
      background: #009c84;
      font-size: 90%;
      line-height: 1em;
      padding: 0.2em;
      border-radius: 2em;
      vertical-align: middle;
      margin-bottom: 0.2em;
      margin-left: 0.2em; }

.jigyousho-list.visible {
  display: block; }

.submit {
  text-align: center;
  padding-top: 30px; }
  .submit button {
    display: inline-block; }

.back {
  padding-bottom: 10px; }
  .back a {
    display: inline-block;
    font-size: 14px;
    padding: 0.3em 0.5em;
    font-weight: bold;
    background: #f5f5f5;
    border-radius: 0.2em; }
    .back a span {
      font-size: 10px;
      display: inline-block;
      vertical-align: baseline;
      background: #009c84;
      color: #fff;
      padding: 0.3em;
      border-radius: 2em;
      font-weight: bold;
      text-align: center;
      margin-right: 0.2em; }
    .back a:hover {
      background: #009c84;
      color: #fff !important; }

ins {
  display: inline-block;
  vertical-align: middle;
  background: none;
  position: relative;
  font-size: 24px;
  cursor: pointer; }
  ins > span {
    font-size: inherit !important;
    margin-left: 0.2em;
    color: #009c84 !important; }
  ins .baloon {
    position: absolute;
    left: -100vw;
    top: -0.5em;
    z-index: 1;
    width: 0;
    font-size: inherit;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end; }
    ins .baloon p {
      width: 300px;
      white-space: normal;
      position: absolute;
      left: -150px;
      bottom: 0;
      margin-bottom: 0;
      background: #fff;
      border: solid 2px #009c84;
      padding: 1em;
      line-height: 1.2em;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      -o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      opacity: 0; }
  ins:hover .baloon {
    left: 0; }
    ins:hover .baloon p {
      opacity: 1; }

.enquete table tr.allow.disabled {
  display: none; }

.enquete table tr.bg_type.disabled {
  display: none; }

.enquete table tr.kenkoucheck.disabled, .enquete table tr.affinity.disabled, .enquete table tr.other_event.disabled {
  display: none; }

.enquete table tr th, .enquete table tr td {
  border: solid 1px #ccc; }

.enquete table tr th span {
  color: #fff;
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 0.2em;
  font-size: 14px; }
  .enquete table tr th span.require {
    background: #f00; }
  .enquete table tr th span.optional {
    background: #00f; }

.enquete table tr td {
  line-height: 2em;
  padding: 5px 10px; }
  .enquete table tr td ul li {
    display: inline-block;
    vertical-align: top;
    border: solid 1px #ccc;
    background: #fffcd5;
    border-radius: 0.2em;
    margin-bottom: 0.3em;
    margin-right: 0.2em;
    font-size: 17px;
    padding: 0.3em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt"; }
    .enquete table tr td ul li label {
      border: 0;
      background: none;
      font-size: inherit;
      padding: 0;
      margin: 0;
      margin-right: 0.3em; }
    .enquete table tr td ul li > input[type="text"] {
      display: inline-block;
      width: 20em;
      vertical-align: middle;
      font-size: 14px; }
    .enquete table tr td ul li.rencon-others {
      padding: 0.2em; }
      .enquete table tr td ul li.rencon-others > input[type="text"] {
        font-size: 12px; }
  .enquete table tr td label {
    border: solid 1px #ccc;
    background: #fffcd5;
    font-size: 17px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 0.3em;
    margin-right: 0.2em;
    padding: 0.25em;
    border-radius: 0.2em; }
    .enquete table tr td label input {
      vertical-align: top; }
    .enquete table tr td label input[type="text"] {
      width: 20em;
      vertical-align: middle; }
    .enquete table tr td label input[type="radio"] {
      vertical-align: baseline; }
  .enquete table tr td .hidden {
    display: none; }
  .enquete table tr td .status span {
    font-size: 16px;
    display: inline-block;
    padding: 0 0.6em;
    vertical-align: middle; }
  .enquete table tr td .status label {
    width: auto; }
    .enquete table tr td .status label input {
      width: 20em; }

@media screen and (max-width: 768px) {
  .enquete table tr th, .enquete table tr td {
    display: block;
    border: 0;
    height: auto;
    padding: 0.5em 1em; }
  .enquete table tr td {
    padding: 0.2em 0 0.5em; }
    .enquete table tr td ul li {
      padding: 0.1em; }
    .enquete table tr td label {
      font-size: 3.5vw !important; }
      .enquete table tr td label input[type="text"] {
        width: 12em !important;
        font-size: 3.5vw !important; } }

#csvdl ul li span {
  font-weight: bold;
  font-size: 20px;
  display: inline-block;
  margin-right: 0.5em; }

#csvdl ul li textarea {
  vertical-align: middle; }