@charset "UTF-8";
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #333;
  background-color: #f6f6f6; }

hr {
  display: none; }

label {
  font-weight: normal; }

#header {
  background-color: #dddddd;
  border-bottom: 1px solid #bbbbbb; }
  #header .inner {
    text-align: center; }
  #header h2 {
    margin-bottom: 20px; }

#nav {
  background-color: #cccccc;
  padding: 10px 0;
  margin-bottom: 30px;
  border-bottom: 1px solid #bbbbbb; }
  #nav ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  #nav li {
    display: inline-block; }
  #nav .li-right {
    float: right; }
  #nav .btn:before {
    font-family: "FontAwesome";
    margin-right: 5px; }
  #nav .btn-home:before {
    content: "\f015"; }
  #nav .btn-left:before {
    content: "\f0a8"; }
  #nav .btn-right:before {
    content: "\f0a9"; }
  #nav .btn-up:before {
    content: "\f0aa"; }
  #nav .btn-dn:before {
    content: "\f0ab"; }

#footer {
  margin-top: 30px;
  border-top: 1px solid #cccccc;
  background-color: #dddddd;
  padding: 15px 0; }
  #footer .inner {
    text-align: center; }

.page-header {
  padding-bottom: 3px;
  margin: 0 0 20px;
  border-bottom: 1px solid #ccc; }
  .page-header h1 {
    margin: 0; }

.section {
  margin-bottom: 50px;
  background-color: #ffffff;
  border-radius: 5px; }

.section:last-child {
  margin-bottom: 0; }

.section-header {
  border-bottom: 1px solid #cccccc;
  padding: 20px; }
  .section-header h2 {
    margin: 0; }

.section-body {
  padding: 20px; }
  .section-body h2 {
    padding-bottom: 5px;
    border-bottom: 1px solid #777777;
    font-weight: bold; }
  .section-body h3 {
    padding-bottom: 5px;
    border-bottom: 1px dotted #777777;
    font-weight: bold;
    margin-top: 20px; }
  .section-body h4 {
    padding: 8px 10px;
    background-color: #dddddd;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px; }
  .section-body h5 {
    font-weight: bold;
    margin-top: 20px; }
  .section-body table:last-child {
    margin-bottom: 0; }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border-color: #ccc; }

#reserve th {
  text-align: center;
  background-color: #f6f6f6;
  color: #333; }

.reserve-table {
  margin-top: 15px !important; }
  .reserve-table caption {
    padding-top: 0;
    padding-bottom: 5px;
    font-weight: bold; }
  .reserve-table th, .reserve-table td {
    white-space: nowrap;
    text-align: center;
    padding: 2px !important; }
  .reserve-table a {
    color: #333;
    display: block;
    height: 100%;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 6px 1px;
    line-height: 1; }
  .reserve-table a:hover {
    text-decoration: none;
    background-color: #efefef; }
  .reserve-table span {
    padding: 7px 2px;
    display: block;
    line-height: 1; }
  .reserve-table .sun, .reserve-table .sun a {
    color: #ed0000; }
  .reserve-table .sat, .reserve-table .sat a {
    color: #217bea; }
  .reserve-table .holiday {
    background-color: #f5cfcf; }
  .reserve-table .off {
    background-color: #eee; }
  .reserve-table .off.holiday {
    background-color: #ddbaba; }
  .reserve-table .select {
    border: 2px solid orange !important; }
  .reserve-table .yoyaku {
    background-color: yellow; }

.cal-sample {
  line-height: 1;
  overflow: hidden;
  margin: 5px 0;
  padding: 0; }
  .cal-sample li {
    list-style: none;
    float: right;
    margin-left: 1.5em; }
  .cal-sample span {
    width: 20px;
    height: 14px;
    display: inline-block;
    margin: 2px 3px 0 0;
    vertical-align: bottom; }
  @media (max-width: 767px) {
    .cal-sample li {
      margin-left: 1em; }
    .cal-sample li:last-of-type {
      margin-left: 0; }
    .cal-sample span {
      width: 20px; } }
  .cal-sample .off {
    background-color: #eee;
    border: 2px solid #eee; }
  .cal-sample .holiday {
    background-color: #f5cfcf;
    border: 2px solid #f5cfcf; }
  .cal-sample .select {
    background-color: #fff;
    border: 2px solid orange; }
  .cal-sample .yoyaku {
    background-color: yellow;
    border: 2px solid yellow; }

#form .required input, #form .required textarea, #form .required select {
  background-color: rgba(248, 237, 172, 0.7); }

#form .required .checkbox, #form .required .radio {
  background-color: rgba(248, 237, 172, 0.7);
  border-radius: 3px;
  padding: 3px 5px; }

#form .form-table {
  background-color: #eee;
  padding: 1px;
  border-radius: 5px;
  border: 1px solid #ccc; }
  #form .form-table .form-th {
    padding: 5px 8px; }
  #form .form-table .form-td {
    padding: 5px 8px;
    background-color: #fff; }

.form-group h3 {
  font-size: 16px;
  margin: 5px 0;
  font-weight: normal;
  display: block; }
  .form-group h3 span {
    color: red;
    margin-left: 5px; }

.form-group p, .form-group input, .form-group button, .form-group select, .form-group textarea {
  margin-bottom: 5px; }

.form-group .alert {
  margin-bottom: 5px;
  padding: 3px 8px; }

.form_actions {
  border-top: 1px solid #aaaaaa;
  text-align: center; }
  .form_actions .btn {
    margin: 10px 5px; }
  .form_actions .btn-lg {
    padding: 15px; }
  .form_actions .btn-primary {
    padding-left: 60px;
    padding-right: 60px; }

form img.thumb {
  margin: 0 5px 5px 0;
  max-width: 160px;
  vertical-align: bottom; }

.sp-list .k-th {
  display: none; }

.sp-list .row {
  margin: 0; }

.sp-list .sp-thead div, .sp-list .sp-thead th {
  font-weight: bold;
  background-color: #eee;
  padding: 4px 5px;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #ddd; }

.sp-list .sp-tbody, .sp-list tbody tr {
  border-bottom: 1px solid #aaa; }
  .sp-list .sp-tbody:hover, .sp-list tbody tr:hover {
    background-color: #f6f6f6; }
  .sp-list .sp-tbody div, .sp-list .sp-tbody td, .sp-list .sp-tbody th, .sp-list tbody tr div, .sp-list tbody tr td, .sp-list tbody tr th {
    padding: 4px 5px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #eeeeee;
    min-height: 2.3em; }
    @media (max-width: 767px) {
      .sp-list .sp-tbody div, .sp-list .sp-tbody td, .sp-list .sp-tbody th, .sp-list tbody tr div, .sp-list tbody tr td, .sp-list tbody tr th {
        min-height: auto; } }
    .sp-list .sp-tbody div i, .sp-list .sp-tbody td i, .sp-list .sp-tbody th i, .sp-list tbody tr div i, .sp-list tbody tr td i, .sp-list tbody tr th i {
      line-height: 20px; }

.sp-list .sp-thead .sort:before {
  font-family: "FontAwesome";
  content: "\f0dc";
  color: #aaa;
  margin: 0 5px; }

@media (max-width: 767px) {
  .table-list table {
    display: block; }
    .table-list table thead {
      display: none; }
    .table-list table tbody {
      display: block; }
      .table-list table tbody tr {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ccc; }
      .table-list table tbody th, .table-list table tbody td {
        display: list-item;
        list-style-type: none;
        border: none;
        text-align: left; }
      .table-list table tbody th {
        margin-bottom: 2px;
        list-style-type: none;
        color: #fff;
        background: #555 !important; }
      .table-list table tbody td {
        padding: 2px 5px;
        background: none !important; }
      .table-list table tbody .k-th {
        display: inline-block;
        white-space: pre; }
      .table-list table tbody .td-btn {
        display: inline-block;
        padding: 15px 0 5px; }
        .table-list table tbody .td-btn .k-th {
          margin-left: 5px; }
        .table-list table tbody .td-btn a {
          padding: 8px 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          line-height: 1; }
        .table-list table tbody .td-btn a:hover {
          background-color: #aaa;
          color: #fff; } }

.td-selected {
  background-color: #eee; }

.sp-list .sp-thead .sort-desc, .sp-list .sp-thead .sort-asc {
  background-color: #ddd; }

.sp-list .sp-thead .sort-desc:before {
  font-family: "FontAwesome";
  content: "\f0dd";
  color: red; }

.sp-list .sp-thead .sort-asc:before {
  font-family: "FontAwesome";
  content: "\f0de";
  color: red; }

.table-caption {
  margin: 10px 0; }

@media only screen and (max-width: 767px) {
  .table-trans {
    display: block;
    margin: 10px 0;
    width: 100%; }
    .table-trans thead {
      display: block;
      float: left;
      overflow-x: scroll; }
    .table-trans tbody {
      display: block;
      width: auto;
      overflow-x: auto;
      white-space: nowrap; }
    .table-trans th {
      display: block;
      width: auto;
      min-height: 2.3em;
      padding-right: 1.2em !important; }
    .table-trans tbody tr {
      display: inline-block;
      margin: 0 -3px; }
    .table-trans td {
      display: block;
      min-height: 2.3em; }
  .dataTables_info,
  #example_paginate {
    text-align: center;
    margin: 0 auto 10px; } }

.p-navi {
  margin: 20px 0;
  overflow: auto;
  text-align: center; }
  .p-navi .form-control {
    width: auto;
    display: inline-block; }
  .p-navi div.pagination {
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0;
    letter-spacing: -.40em;
    /* 文字間を詰めて隙間を削除する */ }
    .p-navi div.pagination span {
      margin: 0;
      padding: 0;
      letter-spacing: normal;
      /* 文字間を通常に戻す */ }
      .p-navi div.pagination span:first-child a {
        border: none; }
      .p-navi div.pagination span a {
        display: inline-block;
        font-size: 14px;
        min-width: 30px;
        padding: 0 5px;
        height: 32px;
        border-left: 1px solid #ddd;
        text-align: center;
        line-height: 32px;
        background-color: #fff; }
        .p-navi div.pagination span a i {
          line-height: inherit; }
      .p-navi div.pagination span a:hover {
        text-decoration: none; }
      .p-navi div.pagination span.active a, .p-navi div.pagination span a:hover {
        background-color: #337ab7;
        border-color: #337ab7;
        color: #fff; }
      .p-navi div.pagination span.disabled a, .p-navi div.pagination span.disabled a:hover {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd; }
  .p-navi ul.pagination {
    margin: 0; }
  .p-navi ul.pagination > li > a, .p-navi .pagination > li > span {
    padding: 5px 7px;
    min-width: 30px; }

@media screen and (max-width: 767px) {
  .p-navi .kensu-sec {
    float: left;
    text-align: left; }
  .p-navi .navi-sec {
    text-align: center;
    width: 100%;
    clear: both; }
  .p-navi .sort-sec {
    float: right;
    text-align: right; }
  .p-navi .form-control {
    width: auto; }
  .table-list #tHead {
    display: none; }
  .table-list .sp-tbody {
    margin-top: 5px;
    border: 1px solid #ddd; }
    .table-list .sp-tbody .k-th {
      display: inline-block;
      white-space: pre; }
    .table-list .sp-tbody div {
      border: none; }
    .table-list .sp-tbody div:first-child {
      background-color: #555;
      color: #fff;
      margin-bottom: 5px; }
    .table-list .sp-tbody div:not(:first-child) {
      display: list-item;
      /*padding: 0 0 0 5px;*/
      list-style-type: none; }
    .table-list .sp-tbody div:last-child {
      margin-bottom: 5px; } }

@media screen and (min-width: 768px) {
  .p-navi .kensu-sec {
    float: left;
    text-align: left;
    width: 25%; }
  .p-navi .navi-sec {
    float: left;
    text-align: center;
    width: 50%; }
  .p-navi .sort-sec {
    float: right;
    text-align: right;
    width: 25%; }
  .p-navi.navi-only .navi-sec {
    width: 100%; } }

.form-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 15px 1px;
  margin-bottom: 25px;
  box-shadow: 0 0 3px #ccc; }
  .form-section h2 {
    margin: 0 0 15px;
    font-size: 20px; }
  .form-section .row {
    margin-left: 0;
    margin-right: 0; }

.form-xs {
  width: 3em !important;
  display: inline-block; }

.form-sm {
  width: 10em !important;
  display: inline-block; }

.form-md {
  width: 20em !important;
  display: inline-block; }

.form-lg {
  width: 30em !important;
  display: inline-block; }

.pointer {
  cursor: pointer; }

.form-vertical .form-th, .form-vertical .form-td {
  width: 100%;
  float: none; }

.cell-blue {
  background-color: rgba(100, 181, 246, 0.3); }

.cell-red {
  background-color: rgba(229, 115, 115, 0.3); }

.cell-orange {
  background-color: rgba(255, 171, 64, 0.3); }

.cell-gray {
  background-color: rgba(144, 164, 174, 0.3); }

.table-reserve td, .table-reserve th {
  height: 40px;
  text-align: center;
  vertical-align: middle !important;
  line-height: 1;
  padding: 5px !important; }

.table-reserve .non {
  background-color: #eee; }

.table-reserve .ng:before {
  content: "\f00d";
  font-family: FontAwesome;
  color: red; }

.table-reserve .holiday {
  background-color: #f5cfcf !important; }

.table-reserve .sun, .table-reserve .sun a {
  color: #ed0000 !important; }

.table-reserve .sat, .table-reserve .sat a {
  color: #217bea !important; }

.table-reserve th.select {
  border: 2px solid orange !important; }

.table-reserve td.select {
  border-left: 2px solid orange !important;
  border-right: 2px solid orange !important; }

.table-reserve tr:last-of-type td.select {
  border-bottom: 2px solid orange !important; }

.table-reserve .ok a, .table-reserve .yoyaku a {
  border: 1px solid #ddd;
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  background-color: #fff;
  display: block; }

.table-reserve .ok a:hover, .table-reserve .yoyaku a:hover {
  background-color: #cfe7f5;
  text-decoration: none; }

.table-reserve .ok a:before, .table-reserve .yoyaku a:before {
  font-family: FontAwesome; }

.table-reserve .ok a:before {
  content: "\f10c";
  color: blue; }

.table-reserve .yoyaku a:before {
  content: "\f08e";
  color: #333; }

.table-reserve .yoyaku a:hover:before {
  color: #fff; }

.table-reserve .yoyaku a {
  border: 1px solid #ddd;
  width: 100%;
  background-color: yellow; }

.table-reserve .yoyaku a:hover {
  background-color: orange;
  text-decoration: none; }

@media screen and (min-width: 768px) {
  .table-reserve .ok a:after {
    content: "：OPEN"; }
  .table-reserve .ng:after {
    content: "：CLOSE"; } }

.u-list .user-box {
  width: 150px;
  height: 200px;
  display: inline-block;
  text-align: center;
  padding: 15px;
  margin: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
  vertical-align: top; }
  .u-list .user-box .user-photo {
    height: 120px;
    width: 120px;
    position: relative;
    background-color: #efefef;
    overflow: hidden;
    margin-bottom: 10px; }
    .u-list .user-box .user-photo img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto; }

.u-list .user-type {
  font-size: 0.9em; }

.u-list .user-name {
  font-weight: bold;
  font-size: 1.2em; }

#user-main {
  width: 100%;
  min-height: 300px;
  border: 1px solid #ddd;
  position: relative;
  margin: 20px 0 10px; }
  #user-main img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; }

#thumb-list ul {
  margin: 0;
  padding: 0; }

#thumb-list li {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #ddd;
  list-style: none;
  margin-top: 0px;
  position: relative;
  background-color: #efefef;
  overflow: hidden; }
  #thumb-list li img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; }

.user-movie {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 15px 0; }
  .user-movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.voice-box {
  margin-bottom: 15px; }
  .voice-box ul, .voice-box li {
    margin: 0;
    padding: 0;
    list-style: none; }
  .voice-box li {
    display: inline-block;
    margin-right: 1em;
    vertical-align: bottom; }
    .voice-box li img {
      vertical-align: text-bottom; }
  .voice-box ul {
    padding: 5px 8px;
    background-color: #efefef;
    border-radius: 5px;
    margin-bottom: 5px; }
  .voice-box .name {
    font-weight: bold; }

#user-schedule th, #user-schedule td {
  text-align: center; }

#user-schedule .ok a:after {
  content: ""; }

#user-schedule .ng:after {
  content: ""; }

.tspin-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px; }