@charset "UTF-8";
/*///////////////////////////////////////////////////*/
/* 共通                                              */
/*///////////////////////////////////////////////////*/
.container {
  padding: 0;
  box-sizing: border-box;
}
.container .row {
  margin: 0 auto;
}
.container .row .col-1,
.container .row .col-2,
.container .row .col-3,
.container .row .col-4,
.container .row .col-5,
.container .row .col-6,
.container .row .col-7,
.container .row .col-8,
.container .row .col-9,
.container .row .col-10,
.container .row .col-11,
.container .row .col-12 {
  padding: 0;
}

body {
  padding-top: 60px;
  background-color: #f3f3f3;
  color: #696969;
}
body h1 {
  font-size: 22px;
}
body h2 {
  font-size: 20px;
}
body h3 {
  font-size: 18px;
}
body h4 {
  font-size: 16px;
}
body h5 {
  font-size: 14px;
}
body h6 {
  font-size: 12px;
}
body header {
  background-color: #f3f3f3;
}
body header .navbar {
  width: 100%;
  height: 60px;
  position: fixed;
}
body header .navbar .nav-item {
  background-color: #fafafa;
}
body .container {
  margin-top: 20px;
  margin-bottom: 20px;
}
body footer {
  background-color: #f7f7f7;
  height: 30px;
}

/*///////////////////////////////////////////////////*/
/* mysqltable                                        */
/*///////////////////////////////////////////////////*/
.mysqltable h4 form {
  display: inline-block;
}
.mysqltable .test {
  height: 500px;
  overflow-x: scroll;
  white-space: normal;
}
.mysqltable .test table {
  font-size: 14px;
}

/*///////////////////////////////////////////////////*/
/* designworks                                       */
/*///////////////////////////////////////////////////*/
.designworks .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.designworks .relese_area i {
  font-size: 24px;
  color: red;
}
.designworks .relese_area .scroll_list {
  overflow-x: scroll;
  white-space: nowrap;
  padding-left: 0;
}
.designworks .relese_area .scroll_list .item {
  display: inline-block;
  width: 360px;
  padding: 0;
  margin: 5px;
}
.designworks .relese_area .scroll_list .item .card {
  width: 360px;
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.designworks .relese_area .scroll_list .item .card img {
  width: 360px;
  height: 360px;
  -o-object-fit: contain;
     object-fit: contain;
}
.designworks .relese_area .scroll_list .item .card .card-body {
  text-align: center;
  padding: 0;
}
.designworks .count_area h2 #countup {
  color: #116db8;
}
.designworks .contents_area .tabs {
  width: 100%;
  padding: 0;
  /*選択されているタブのスタイルを変える*/
  /*選択されているタブのコンテンツのみを表示*/
}
.designworks .contents_area .tabs input[name=tab_item] {
  display: none;
}
.designworks .contents_area .tabs .tab_item {
  width: 20%;
  height: 40px;
  border-bottom: 3px solid #f5deb3;
  background-color: #d9d9d9;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #116db8;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.designworks .contents_area .tabs .tab_item:hover {
  opacity: 0.9;
}
.designworks .contents_area .tabs input:checked + .tab_item {
  background-color: #f5deb3;
  color: #116db8;
}
.designworks .contents_area .tabs .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 10px;
}
.designworks .contents_area .tabs .tab_content .card {
  width: 180px;
  margin: 10px auto;
  display: inline-block;
  background-color: #f3f3f3;
  border: none;
}
.designworks .contents_area .tabs .tab_content .card img {
  width: 180px;
  height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}
.designworks .contents_area .tabs .tab_content .card .card-body {
  width: 180px;
  padding: 10px 0 10px 0;
  text-align: center;
  background-color: #f3f3f3;
}
.designworks .contents_area .tabs #contents_01:checked ~ #contents01_content,
.designworks .contents_area .tabs #contents_02:checked ~ #contents02_content,
.designworks .contents_area .tabs #contents_03:checked ~ #contents03_content,
.designworks .contents_area .tabs #contents_04:checked ~ #contents04_content,
.designworks .contents_area .tabs #contents_05:checked ~ #contents05_content {
  display: block;
}
.designworks .contents_area .tabs .modal .modal-body {
  padding: 10px 10px 0 10px;
  background-color: #f3f3f3;
}
.designworks .contents_area .tabs .modal .modal-body .scroll_list {
  overflow-x: scroll;
  white-space: nowrap;
  padding-left: 0;
  background-color: #f3f3f3;
}
.designworks .contents_area .tabs .modal .modal-body .scroll_list .item {
  display: inline-block;
  width: 330px;
  margin: 5px;
}
.designworks .contents_area .tabs .modal .modal-body .scroll_list .item img {
  width: 100%;
  height: 330px;
  -o-object-fit: contain;
     object-fit: contain;
}

/*///////////////////////////////////////////////////*/
/* accounting                                        */
/*///////////////////////////////////////////////////*/
.accounting .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.accounting .contents_area .tabs {
  width: 100%;
  padding: 0;
  /*選択されているタブのスタイルを変える*/
  /*選択されているタブのコンテンツのみを表示*/
}
.accounting .contents_area .tabs input[name=tab_item] {
  display: none;
}
.accounting .contents_area .tabs .tab_item {
  width: 33.3333333333%;
  height: 40px;
  border-bottom: 3px solid #f5deb3;
  background-color: #d9d9d9;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #116db8;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.accounting .contents_area .tabs .tab_item:hover {
  opacity: 0.9;
}
.accounting .contents_area .tabs input:checked + .tab_item {
  background-color: #f5deb3;
  color: #116db8;
}
.accounting .contents_area .tabs .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 10px;
}
.accounting .contents_area .tabs .tab_content h4 {
  color: #116db8;
  display: inline-block;
  margin-right: 100px;
}
.accounting .contents_area .tabs #contents_01:checked ~ #contents01_content,
.accounting .contents_area .tabs #contents_02:checked ~ #contents02_content,
.accounting .contents_area .tabs #contents_03:checked ~ #contents03_content {
  display: block;
}

/*///////////////////////////////////////////////////*/
/* index                                             */
/*///////////////////////////////////////////////////*/
.index a {
  text-decoration: none;
}
.index .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.index .menu_area .card {
  width: 110px;
  height: 110px;
  margin: 10px auto 10px auto;
  border: 1px solid #696969;
  color: #4682b4;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}
.index .menu_area .card:hover {
  opacity: 0.9;
  transform: scale(1.1, 1.1);
}
.index .menu_area .card h4 {
  margin: 0 0 2px 2px;
}
.index .menu_area .card h5 {
  font-size: 14px;
  margin: 2px 0 0 2px;
}
.index .menu_area .card .card-header {
  padding-top: 5px;
  height: 55px;
  background-color: #f5deb3;
  text-align: center;
  font-weight: bold;
}
.index .menu_area .card .card-header i {
  font-size: 30px;
}
.index .menu_area .card .card-body {
  height: 55px;
  padding: 5px 5px 0 5px;
}

/*///////////////////*/
/*  kaonavi          */
/*///////////////////*/
.kaonavi .row {
  margin: auto;
}
.kaonavi .area {
  padding: 0;
}
.kaonavi .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.kaonavi .card {
  width: 90%;
  margin: 10px auto;
}
.kaonavi .card img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaonavi .card .card-body {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0;
}
.kaonavi .card .card-body .person {
  margin: 0;
  padding: 5px;
  text-align: center;
}
.kaonavi .card .card-body .person h4 {
  margin: 0;
  padding: 0;
}
.kaonavi .card .card-body .person h5 {
  margin: 0;
  padding: 0;
}

/*///////////////////*/
/*  layout           */
/*///////////////////*/
.layout .row {
  margin: auto;
}
.layout .area {
  padding: 0;
}
.layout .area_01 {
  background-color: #ffaaaa;
}
.layout .area_01 .area_0101 {
  background-color: #f2ffaa;
}
.layout .area_01 .area_0102 {
  background-color: #aaffea;
}
.layout .area_01 .area_0103 {
  background-color: #ffaaf1;
}
.layout .area_02 {
  background-color: #f2ffaa;
}
.layout .area_02 .area_0201 {
  background-color: #aaffbc;
}
.layout .area_02 .area_0202 {
  background-color: #ffaabc;
}
.layout .area_02 .area_0203 {
  background-color: #cbaaff;
}
.layout .area_02 .area_0204 {
  background-color: #edffaa;
}
.layout .area_02 .area_0205 {
  background-color: #ffc9aa;
}
.layout .area_03 {
  background-color: #aaffdc;
}
.layout .area_03 .area_0301 {
  background-color: #adffaa;
}
.layout .area_03 .area_0302 {
  background-color: #ffaafb;
}
.layout .area_03 .area_0303 {
  background-color: #ffddaa;
}
.layout .area_04 {
  background-color: #aabeff;
}
.layout .area_04 .area_0401 {
  background-color: #ffaac4;
}
.layout .area_04 .area_0402 {
  background-color: #b8ffaa;
}
.layout .area_04 .area_0403 {
  background-color: #fff7aa;
}

/*///////////////////*/
/*  layout2          */
/*///////////////////*/
.layout2 {
  background-color: #929292;
  height: 500px;
}
.layout2 .row {
  background-color: #5ab4bd;
  height: 100px;
  padding: 0;
}
.layout2 .row .row {
  background-color: #aaffbc;
  padding: 0;
}
.layout2 .row .col-12 {
  background-color: #35d321;
  height: 40px;
}

/*///////////////////////////////////////////////////*/
/* login                                             */
/*///////////////////////////////////////////////////*/
.login .card {
  width: 100%;
  max-width: 350px;
  min-height: 350px;
  margin: 100px auto;
  border-radius: 20px;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}
.login .card h1 {
  margin: 10px auto 20px;
  font-size: 32px;
  text-align: center;
}
.login .card input {
  width: 90%;
  margin: 20px auto;
}
.login .card .button {
  text-align: center;
}
.login .card .btn {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}
.login .card p {
  text-align: center;
  margin-top: 15px;
}
.login .card a {
  text-decoration: underline;
  color: green;
}
.login .card a:hover {
  color: red;
}
.login .card .alart {
  color: red;
}
.login .card .modal-content {
  width: 80%;
  margin: 0 auto;
}
.login .card .modal-content .modal-header h2 {
  margin: 0 auto;
}
.login .card .modal-content .modal-body {
  padding-top: 50px;
  text-align: center;
  background-color: #f3f3f3;
}

/*///////////////////////////////////////////////////*/
/* orgimages_01                                      */
/*///////////////////////////////////////////////////*/
.orgimages_01 .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}

/*///////////////////////////////////////////////////*/
/* orgimages_02                                      */
/*///////////////////////////////////////////////////*/
.orgimages_02 .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.orgimages_02 .contents_area h5 {
  color: blue;
}
.orgimages_02 .card {
  width: 96%;
  height: 260px;
  margin: 5px auto;
  background-color: rgb(233, 233, 233);
}
.orgimages_02 .card .card-body {
  width: 100%;
  height: 200px;
  padding: 0;
}
.orgimages_02 .card .card-body img {
  width: 100%;
  height: 200px;
  padding: 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.orgimages_02 .card .upload {
  padding: 50px 2px;
  text-align: center;
}
.orgimages_02 .card .upload i {
  font-size: 60px;
}
.orgimages_02 .card .card-footer {
  width: 100%;
  height: 60px;
  padding: 2px;
}
.orgimages_02 .card .card-footer i {
  display: inline-block;
}
.orgimages_02 .modal .modal-body img {
  width: 100%;
  height: 320px;
  padding: 5px;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #e2e2e2;
}
.orgimages_02 .modal .modal-body .modal-body-button {
  text-align: center;
}
.orgimages_02 .modal .modal-body .modal-body-button p {
  margin-top: 10px;
  color: red;
}

/*///////////////////////////////////////////////////*/
/* reissue                                           */
/*///////////////////////////////////////////////////*/
.reissue .card {
  width: 100%;
  max-width: 350px;
  min-height: 350px;
  margin: 100px auto;
  border-radius: 20px;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}
.reissue .card h1 {
  margin: 10px auto 10px;
  font-size: 32px;
  text-align: center;
}
.reissue .card input {
  width: 90%;
  margin: 10px auto 20px;
}
.reissue .card p {
  text-align: center;
}
.reissue .card p .alart {
  color: red;
}
.reissue .card .button {
  text-align: center;
}
.reissue .card .button .up .btn {
  width: 80%;
  text-align: center;
  margin: 0 auto 15px;
}
.reissue .card .button .down .btn {
  width: 80%;
  text-align: center;
  margin: 5px auto 20px;
}

/*///////////////////////////////////////////////////*/
/* reissue accepted                                  */
/*///////////////////////////////////////////////////*/
.reissueacc .card {
  width: 100%;
  max-width: 350px;
  min-height: 350px;
  margin: 100px auto;
  border-radius: 20px;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}
.reissueacc .card h1 {
  margin: 10px auto 10px;
  font-size: 32px;
  text-align: center;
}
.reissueacc .card .button {
  text-align: center;
}
.reissueacc .card .button .btn {
  width: 80%;
  text-align: center;
  margin: 100px auto 0;
}

/*///////////////////*/
/*  shopoinfomation  */
/*///////////////////*/
.shopinfomation .row {
  margin: auto;
}
.shopinfomation .area {
  padding: 0;
}
.shopinfomation .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.shopinfomation .contents_area .area_01 .basic_information .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_01 .basic_information .card p {
  margin: 0;
  padding: 0;
}
.shopinfomation .contents_area .area_01 .member .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_01 .member .card .person {
  width: 100px;
  height: 110px;
  text-align: center;
  display: inline-block;
}
.shopinfomation .contents_area .area_01 .member .card .person img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.shopinfomation .contents_area .area_01 .member .card .person i {
  font-size: 20px;
}
.shopinfomation .contents_area .area_01 .member .card .person span {
  font-size: 12px;
}
.shopinfomation .contents_area .area_01 .news .card {
  border-radius: 10px;
  margin: 5px;
  height: 292px;
}
.shopinfomation .contents_area .area_01 .news .card .news_box {
  width: 100%;
  border: 1px solid gray;
}
.shopinfomation .contents_area .area_02 .photo .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_02 .photo .card img {
  width: 110px;
  height: 110px;
  float: left;
  -o-object-fit: cover;
     object-fit: cover;
  padding: 0;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main h4 {
  font-size: 30px;
  margin: 5px 0 5px 0;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main .bi-caret-up-square {
  font-size: 20px;
  color: red;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main .bi-caret-right-square {
  font-size: 20px;
  color: orange;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main .bi-caret-down-square {
  font-size: 20px;
  color: blue;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main h5 {
  font-size: 20px;
  display: inline-block;
}
.shopinfomation .contents_area .area_02 .gourmetsite .card .card_main .chart {
  width: 55%;
  padding: 0 5px 0 0;
  background-color: #e2f2ff;
  border-radius: 10px;
}
.shopinfomation .contents_area .area_03 .bar_chart_01 .card {
  border-radius: 10px;
  margin: 5px;
  height: 210px;
}
.shopinfomation .contents_area .area_03 .area_0302 {
  background-color: #ffaafb;
}
.shopinfomation .contents_area .area_03 .bar_chart_02 .card {
  border-radius: 10px;
  margin: 5px;
  height: 345px;
}
.shopinfomation .contents_area .area_04 .pie_chart_01 .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_04 .pie_chart_01 .card .piechart_div {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.shopinfomation .contents_area .area_04 .area_0402 {
  background-color: #b8ffaa;
}
.shopinfomation .contents_area .area_04 .profitloss .card {
  border-radius: 10px;
  margin: 5px;
}
.shopinfomation .contents_area .area_04 .profitloss .card p {
  margin: 0;
  font-size: 14px;
}
.shopinfomation .contents_area .area_04 .profitloss .card h4 {
  margin: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card h3 {
  margin: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card h2 {
  margin: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card h5 {
  margin: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card h6 {
  margin: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card hr {
  margin: 5px 5px 10px 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card .row {
  margin-top: 10px;
}
.shopinfomation .contents_area .area_04 .profitloss .card .p {
  padding: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card .p .p_01 {
  background-color: #f0f0f0;
  border: 1px solid white;
  padding-top: 5px;
  padding-left: 5px;
  height: 280px;
}
.shopinfomation .contents_area .area_04 .profitloss .card .l {
  padding: 0;
}
.shopinfomation .contents_area .area_04 .profitloss .card .l .l_01 {
  background-color: #ffbcdd;
  border: 1px solid white;
  padding-top: 5px;
  padding-left: 5px;
  height: 50px;
}
.shopinfomation .contents_area .area_04 .profitloss .card .l .l_02 {
  background-color: #bcffff;
  border: 1px solid white;
  padding-top: 5px;
  padding-left: 5px;
  height: 50px;
}
.shopinfomation .contents_area .area_04 .profitloss .card .l .l_03 {
  background-color: #bcffdd;
  border: 1px solid white;
  padding-top: 5px;
  padding-left: 5px;
  height: 130px;
}
.shopinfomation .contents_area .area_04 .profitloss .card .l .l_04 {
  background-color: #ffffbc;
  border: 1px solid white;
  padding-top: 5px;
  padding-left: 5px;
  height: 50px;
}

/*///////////////////////////////////////////////////*/
/* shoplist                                          */
/*///////////////////////////////////////////////////*/
.shoplist .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.shoplist .list_area .contentscol a {
  text-decoration: none;
  color: #4682b4;
}
.shoplist .list_area .contentscol .card {
  color: #4682b4;
}
.shoplist .list_area .contentscol .card:hover {
  opacity: 0.9;
  transform: scale(1.01, 1.01);
}
.shoplist .list_area .contentscol .card .card-body {
  background-color: #ffffff;
}

/* xs(576p未満)であれば */
@media (max-width: 576px) {
  .shoplist .list_area .contentscol {
    margin: 0 auto;
    padding: 0;
    width: 96vw;
  }
  .shoplist .list_area .contentscol .card {
    margin: 0 0 5px 0;
    padding: 0;
    width: 100%;
    height: 96vw;
  }
  .shoplist .list_area .contentscol .card img {
    width: 100%;
    height: 64vw;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 24vw;
    padding: 4px 4px 0 8px;
    background-color: #cacaca;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 18px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 15px;
    margin: 0;
  }
}
/* sm(576p以上768px未満）以上であれば */
@media (min-width: 576px) {
  .shoplist .list_area .contentscol .card {
    border: #ffffff solid 1px;
  }
}
/* sm(576p以上768px未満）であれば */
@media (min-width: 576px) and (max-width: 768px) {
  .shoplist .list_area .contentscol {
    margin: 0;
    padding: 0;
    width: 270px;
  }
  .shoplist .list_area .contentscol .card {
    margin: 5px;
    padding: 0;
    width: 260px;
    height: 260px;
  }
  .shoplist .list_area .contentscol .card img {
    width: 258px;
    height: 129px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 129px;
    padding: 10px 5px 0 5px;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 16px;
    margin: 1px 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 14px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body .others {
    font-size: 13px;
    margin: 0;
  }
}
/* md(768p以上992px未満)であれば */
@media (min-width: 768px) and (max-width: 992px) {
  .shoplist .list_area .contentscol {
    margin: 0;
    padding: 0;
    width: 240px;
  }
  .shoplist .list_area .contentscol .card {
    margin: 5px;
    padding: 0;
    width: 230px;
    height: 230px;
  }
  .shoplist .list_area .contentscol .card img {
    width: 228px;
    height: 114px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 114px;
    padding: 8px 5px 0 5px;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 15px;
    margin: 1px 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 13px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body .others {
    font-size: 11px;
    margin: 0;
  }
}
/* lg(992p以上1200px未満)であれば */
@media (min-width: 992px) and (max-width: 1200px) {
  .shoplist .list_area .contentscol {
    margin: 0;
    padding: 0;
    width: 240px;
  }
  .shoplist .list_area .contentscol .card {
    margin: 5px;
    padding: 0;
    width: 230px;
    height: 230px;
  }
  .shoplist .list_area .contentscol .card img {
    width: 228px;
    height: 114px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 114px;
    padding: 8px 5px 0 5px;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 15px;
    margin: 1px 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 13px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body .others {
    font-size: 11px;
    margin: 0;
  }
}
/* xl(1200p以上1400px未満）であれば */
@media (min-width: 1200px) and (max-width: 1400px) {
  .shoplist .list_area .contentscol {
    margin: 0;
    padding: 0;
    width: 285px;
  }
  .shoplist .list_area .contentscol .card {
    margin: 5px;
    padding: 0;
    width: 275px;
    height: 275px;
  }
  .shoplist .list_area .contentscol .card img {
    width: 273px;
    height: 136px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 137px;
    padding: 6px 5px 0 5px;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 18px;
    margin: 3px 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 16px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body .others {
    font-size: 13px;
    margin: 0;
  }
}
/* xxl(1400p以上）であれば */
@media (min-width: 1400px) {
  .shoplist .list_area .contentscol {
    margin: 0;
    padding: 0;
    width: 330px;
  }
  .shoplist .list_area .contentscol .card {
    margin: 5px;
    padding: 0;
    width: 320px;
    height: 320px;
  }
  .shoplist .list_area .contentscol .card img {
    width: 318px;
    height: 159px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .shoplist .list_area .contentscol .card .card-body {
    height: 159px;
    padding: 10px 6px 0 6px;
  }
  .shoplist .list_area .contentscol .card .card-body h4 {
    font-size: 20px;
    margin: 3px 0;
  }
  .shoplist .list_area .contentscol .card .card-body p {
    font-size: 18px;
    margin: 0;
  }
  .shoplist .list_area .contentscol .card .card-body .others {
    font-size: 15px;
    margin: 0;
  }
}
/*///////////////////////////////////////////////////*/
/* time_recorder                                     */
/*///////////////////////////////////////////////////*/
.time_recorder .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}
.time_recorder .contents_area .robbot {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}
.time_recorder .contents_area .robbot .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}
.time_recorder .contents_area .robbot .faceicon img {
  width: 100%;
  height: auto;
  /* border: solid 3px #d7ebfe; */
  /* border-radius: 50%; */
}
.time_recorder .contents_area .robbot .chatting {
  width: 100%;
}
.time_recorder .contents_area .robbot .chatting .sys {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}
.time_recorder .contents_area .robbot .chatting .sys p {
  margin: 0;
  padding: 0;
}
.time_recorder .contents_area .robbot .chatting .says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}
.time_recorder .contents_area .timecard .time h2 {
  margin: 20px;
  font-size: 40px;
  text-align: center;
}
.time_recorder .contents_area .timecard .place {
  padding: 10px 0 30px 0;
}
.time_recorder .contents_area .timecard .button {
  padding: 0 auto;
}
.time_recorder .contents_area .timecard .button button {
  display: block;
  width: 90%;
  margin: 10px auto;
}
.time_recorder .contents_area .timecard .correction {
  padding: 0 auto;
}
.time_recorder .contents_area .timecard .correction button {
  display: block;
  width: 90%;
  margin: 20px auto;
}
.time_recorder .contents_area #healthcheck .question h2 {
  margin: 20px;
  font-size: 40px;
  text-align: center;
}
.time_recorder .contents_area #healthcheck .button {
  padding: 0 auto;
}
.time_recorder .contents_area #healthcheck .button button {
  display: block;
  width: 90%;
  margin: 10px auto;
}
.time_recorder .contents_area #healthcheck .button button i {
  font-size: 60px;
}

/*///////////////////////////////////////////////////*/
/* company                                           */
/*///////////////////////////////////////////////////*/
/* title_area */
.company .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}

/* count_area */
/* relese_area */
/* contents_area */
.company .contents_area .tabs {
  width: 100%;
  padding: 0;
}

.company .contents_area .tab_item {
  width: 12.5%;
  height: 40px;
  border-bottom: 3px solid #f5deb3;
  background-color: #d9d9d9;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #116db8;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.company .contents_area .tab_item:hover {
  opacity: 0.9;
}

.company .contents_area input[name=tab_item] {
  display: none;
}

.company .contents_area .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 10px;
}

/*選択されているタブのコンテンツのみを表示*/
.company .contents_area #contents_01:checked ~ #contents01_content,
.company .contents_area #contents_02:checked ~ #contents02_content,
.company .contents_area #contents_03:checked ~ #contents03_content,
.company .contents_area #contents_04:checked ~ #contents04_content,
.company .contents_area #contents_05:checked ~ #contents05_content,
.company .contents_area #contents_06:checked ~ #contents06_content,
.company .contents_area #contents_07:checked ~ #contents07_content,
.company .contents_area #contents_08:checked ~ #contents08_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.company .contents_area .tabs input:checked + .tab_item {
  background-color: #f5deb3;
  color: #116db8;
}

.company .tab_content .card {
  width: 180px;
  margin: 10px auto;
  display: inline-block;
  background-color: #f3f3f3;
  border: none;
}

.company .contents_area .card img {
  width: 180px;
  height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}

.company .contents_area .card-body {
  width: 180px;
  padding: 10px 0 10px 0;
  text-align: center;
  background-color: #f3f3f3;
}

.company .modal .modal-body {
  padding: 10px 10px 0 10px;
  background-color: #f3f3f3;
}

.company .modal .modal-body .scroll_list {
  overflow-x: scroll;
  white-space: nowrap;
  padding-left: 0;
  background-color: #f3f3f3;
}

.company .modal .modal-body .scroll_list .item {
  display: inline-block;
  width: 330px;
  margin: 5px;
}

.company .modal .modal-body .scroll_list .item img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/*///////////////////////////////////////////////////*/
/* archive                                           */
/*///////////////////////////////////////////////////*/
.archive .time {
  text-align: right;
}

.archive .time span {
  display: inline-block;
  margin: 5px 5% 0 0;
}

.archive .card {
  width: 300px;
  height: 300px;
  margin: 10px 0 10px 0;
  border: 1px solid #696969;
  border-radius: 20px;
  color: #4682b4;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}

.archive .card-header {
  padding-top: 5px;
  height: 55px;
  border-radius: 20px 20px 0 0;
  background-color: #f5deb3;
  text-align: center;
  font-weight: bold;
}

.archive .card-body {
  border-radius: 0 0 20px 20px;
  height: 55px;
  padding: 5px 5px 0 5px;
}

.archive .card-header i {
  font-size: 30px;
}

.archive .card h2 {
  margin: 0 0 2px 2px;
}

.archive .card h3 {
  font-size: 14px;
  margin: 2px 0 0 2px;
}

.archive .card:hover {
  opacity: 0.9;
  transform: scale(1.1, 1.1);
}

.archive a {
  text-decoration: none;
}

/*/////////////*/
/*  shoplist2  */
/*/////////////*/
.shoplist2 .time {
  text-align: right;
}

.shoplist2 .time span {
  display: inline-block;
  margin: 5px 5% 0 0;
}

.shoplist2 .table-contents {
  overflow-x: scroll;
  width: 100%;
}

.shoplist2 table {
  white-space: nowrap;
  font-size: 12px;
}

.shoplist2 .modal select {
  width: 100%;
}

.shoplist2 .modal input {
  display: block;
  width: 100%;
  height: 36px;
  margin-bottom: 20px;
}

.shoplist2 button {
  width: 200px;
  margin-bottom: 20px;
}

/*////////////////*/
/*  format_table  */
/*////////////////*/
.format_table .time {
  text-align: right;
}

.format_table .time span {
  display: inline-block;
  margin: 5px 5% 0 0;
}

.format_table form {
  padding-left: 10px;
  display: inline-block;
}

.format_table .table-contents {
  overflow-x: scroll;
  width: 100%;
}

.format_table table {
  white-space: nowrap;
  font-size: 12px;
}

.format_table .modal select {
  width: 100%;
}

.format_table .modal input {
  display: block;
  width: 100%;
  height: 36px;
  margin-bottom: 20px;
}

.format_table button {
  width: 200px;
  margin-bottom: 20px;
}

/*/////////////////*/
/*  paymanage      */
/*/////////////////*/
.paymanage p {
  font-size: 12px;
}
.paymanage span {
  font-size: 12px;
}
.paymanage input {
  font-size: 12px;
}
.paymanage select {
  font-size: 12px;
}
.paymanage table {
  font-size: 12px;
}

/* title_area */
.paymanage .title_area .time h4 {
  text-align: right;
  margin: 10px 0 0 0;
}

/* sql_area */
/* numperiod_area  */
.paymanage .numperiod_area {
  margin: 10px 0;
}

.paymanage .numperiod_area h5 {
  display: inline;
}

.paymanage .numperiod_area .num {
  padding: 0;
}

.paymanage .numperiod_area .display_num {
  display: inline-block;
  width: 90px;
}

.paymanage .numperiod_area .period {
  padding: 0;
}

.paymanage .numperiod_area .display_period {
  display: inline-block;
  width: 180px;
}

/* conditions_area */
.paymanage .conditions_area {
  margin: 10px 0;
}

.paymanage .conditions_area h5 {
  display: inline;
}

.paymanage .conditions_area .condition {
  padding: 0;
}

.paymanage .conditions_area .conditions_cl {
  display: inline-block;
  width: 110px;
}

.paymanage .conditions_area .conditions_con {
  display: inline-block;
  width: 180px;
}

/* table_area */
.paymanage .table_area .table-contents {
  overflow-x: scroll;
  width: 100%;
}

.paymanage .table_area .table-contents table {
  white-space: nowrap;
}

.paymanage .table_area .table-contents input {
  width: 90px;
  text-align: right;
}

.paymanage .table_area .table-contents .table .main00 {
  width: 40px;
}

.paymanage .table_area .table-contents .table .main01 {
  width: 100px;
}

.paymanage .table_area .table-contents .table .main02 {
  width: 120px;
}

.paymanage .table_area .table-contents .table .main03 {
  width: 120px;
}

.paymanage .table_area .table-contents .table .main04 {
  width: 160px;
}

.paymanage .table_area .table-contents .table .main05 {
  width: 120px;
}

.paymanage .table_area .table-contents .table .main06 {
  width: 120px;
}

.paymanage .table_area .table-contents .table .main07 {
  width: 40px;
}

.paymanage .table_area .table-contents .table .main08 {
  width: 90px;
}

.paymanage .table_area .table-contents .table .main09 {
  width: 90px;
}

.paymanage .table_area .table-contents .table .main10 {
  width: 90px;
}

.paymanage .table_area .table-contents .table .main11 {
  width: 90px;
}

/* tablename_area */
/* tablemodal_area */
.paymanage .tablemodal_area input {
  width: 100%;
}

.paymanage .tablemodal_area .modal-body-button {
  text-align: center;
}

.paymanage .tablemodal_area button {
  width: 120px;
  margin: 10px auto;
}

/* button_area */
.paymanage .button_area input {
  width: 100%;
}

.paymanage .button_area .modal-body-button {
  text-align: center;
}

.paymanage .button_area .modal button {
  width: 120px;
  margin: 10px auto;
}

.paymanage .button_area .buttonarea-button {
  display: inline-block;
}

.paymanage .button_area .buttonarea-button button {
  width: 120px;
  margin: 10px auto;
}

.paymanage .button_area select {
  margin: 20px auto 0px;
}

/*//////////////////*/
/*  format_countup  */
/*//////////////////*/
.format_countup .time {
  text-align: right;
}

.format_countup .time span {
  display: inline-block;
  margin: 5px 5% 0 0;
}

.format_countup h2 {
  padding: 0 auto;
  font-size: 50px;
}

/*//////////////////*/
/*  shopoinfo       */
/*//////////////////*/
/* <-------------------- 共通 --------------------> */
.shopinfo h2 {
  margin-bottom: 5px;
  color: #222;
}

@media screen and (max-width: 768px) {
  .shopinfo h2 {
    padding-top: 10px;
  }
}
.shopinfo .card {
  border-radius: 20px;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}

.shopinfo .card-header {
  border-radius: 20px 20px 0 0;
}

/* <-------------------- block01: --------------------> */
.shopinfo .shopimg-main img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.shopinfo .map iframe {
  width: 100%;
  height: 100%;
}

/* <-------------------- block02: --------------------> */
/* <-------------------- block03: --------------------> */
.shopinfo .block03 .card {
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.shopinfo .block03 .card h3 {
  font-size: 16px;
  color: green;
}

.shopinfo .block03 .card h4 {
  font-size: 20px;
  color: green;
}

.shopinfo .block03 .sales .card {
  height: 590px;
}

.shopinfo .block03 .foodlabor .card {
  height: 290px;
  color: ff6347;
}

.shopinfo .block03 .othercosts .card {
  height: 380px;
}

.shopinfo .block03 .profit .card {
  height: 200px;
}

@media screen and (max-width: 676px) {
  .shopinfo .block03 .card {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .shopinfo .block03 .sales {
    padding-right: 2px;
  }
  .shopinfo .block03 .sales .card {
    height: 490px;
  }
  .shopinfo .block03 .foodlabor {
    padding-left: 2px;
    padding-right: 2px;
  }
  .shopinfo .block03 .foodlabor .card {
    height: 243px;
  }
  .shopinfo .block03 .otherprofit {
    padding-left: 2px;
  }
  .shopinfo .block03 .othercosts .card {
    height: 318px;
  }
  .shopinfo .block03 .profit .card {
    height: 168px;
  }
  .shopinfo .block03 .card h3 {
    font-size: 12px;
  }
  .shopinfo .block03 .card h4 {
    font-size: 14px;
  }
  .shopinfo .block03 .card p {
    font-size: 12px;
  }
}
/* <-------------------- image --------------------> */
.shopinfo .shopimg .card {
  margin: 5px 0;
}

.shopinfo .shopimg .card-body {
  padding: 10px;
}

.shopinfo .shopimg .slide {
  /* background-color: #ccc; */
  display: flex;
  margin: 0 auto;
  /* max-width: 1024px; */
  width: 100%;
}

.shopinfo .shopimg .slideb {
  height: auto;
  margin: 0.5%;
  width: 24%;
  /* margin: auto; */
}

.shopinfo .shopimg .slideb a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}

.shopinfo .shopimg img {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 768px) {
  .shopinfo .shopimg .slide {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 768px) {
  .shopinfo .shopimg .slideb {
    flex: 0 0 80%;
    margin: auto 1% auto auto;
  }
}
/* <-------------------- image --------------------> */
.shopinfo .menuimg .card {
  margin: 5px 0;
}

.shopinfo .menuimg .card-body {
  padding: 10px;
}

.shopinfo .menuimg .slide {
  /* background-color: #ccc; */
  display: flex;
  margin: 0 auto;
  /* max-width: 1024px; */
  width: 100%;
}

.shopinfo .menuimg .slideb {
  height: auto;
  margin: 0.5%;
  width: 24%;
  /* margin: auto; */
}

.shopinfo .menuimg .slideb a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}

.shopinfo .menuimg img {
  display: block;
  height: 100%;
  width: 100%;
  /* border-radius: 10px; */
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 768px) {
  .shopinfo .menuimg .slide {
    overflow-x: scroll;
  }
}
@media screen and (max-width: 768px) {
  .shopinfo .menuimg .slideb {
    flex: 0 0 80%;
    margin: auto 1% auto auto;
  }
}
/*円グラフの中に文字を記載する方法*/
/*
.shoplistdt .tabelog .chart01 {
    position: relative;
}

.shoplistdt .tabelog .chart01 p {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    margin: auto;
    text-align: center;
    top: 45%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); 
    font-size: 1.5rem;
    font-weight: bold;
}
*/
.shopinfo .info06 img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.test .bg {
  background-color: #696969;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  overflow-x: scroll;
}

.test .round {
  background-color: #4682b4;
  max-height: 200px;
  border: #fff solid;
}

.test .bg img {
  width: 100%;
  height: 100%;
  background-color: #f5deb3;
  -o-object-fit: contain;
     object-fit: contain;
}

/* sample05 */
/*タブ切り替え全体のスタイル*/
.tabs {
  width: 100%;
  padding: 0;
}

/*タブのスタイル*/
.tab_item {
  width: 20%;
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name=tab_item] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 10px;
}

/*選択されているタブのコンテンツのみを表示*/
#contents_01:checked ~ #contents01_content,
#contents_02:checked ~ #contents02_content,
#contents_03:checked ~ #contents03_content,
#contents_04:checked ~ #contents04_content,
#contents_05:checked ~ #contents05_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

/*タブのスタイル*/
.tab_item2 {
  width: 25%;
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name=tab_item2] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content2 {
  display: none;
  clear: both;
  overflow: hidden;
  padding: 10px;
}

/*選択されているタブのコンテンツのみを表示*/
#contents_11:checked ~ #contents11_content,
#contents_12:checked ~ #contents12_content,
#contents_13:checked ~ #contents13_content,
#contents_14:checked ~ #contents14_content2 {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item2 {
  background-color: #5ab4bd;
  color: #fff;
}

.nippo {
  font-size: 12px;
  text-align: center;
}

/* <-------------------- setting --------------------> */
.setting .card {
  width: 110px;
  height: 110px;
  margin: 10px auto 10px auto;
  border: 1px solid #696969;
  border-radius: 20px;
  color: #4682b4;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}

.setting .card-header {
  padding-top: 5px;
  height: 55px;
  border-radius: 20px 20px 0 0;
  background-color: #f5deb3;
  text-align: center;
  font-weight: bold;
}

.setting .card-body {
  border-radius: 0 0 20px 20px;
  height: 55px;
  padding: 5px 5px 0 5px;
}

.setting .card-header i {
  font-size: 30px;
}

.setting .card h2 {
  margin: 0 0 2px 2px;
}

.setting .card h3 {
  font-size: 14px;
  margin: 2px 0 0 2px;
}

.setting .card:hover {
  opacity: 0.9;
  transform: scale(1.1, 1.1);
}

.setting a {
  text-decoration: none;
}

/* <-------------------- actregi -------------------->*/
.actregi .card {
  width: 100%;
  max-width: 350px;
  min-height: 350px;
  margin: 10px auto;
  border-radius: 20px;
  box-shadow: 0 5px 10px -5px #b0b0b0;
}

.actregi h1 {
  margin: 10px auto 20px;
  font-size: 32px;
  text-align: center;
}

.actregi input {
  width: 90%;
  margin: 20px auto;
}

.actregi select {
  width: 90%;
  margin: 20px auto;
}

.actregi .button {
  text-align: center;
}

.actregi.btn {
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

.actregi p {
  text-align: center;
  margin-top: 15px;
}

.actregi p {
  color: red;
}

.allreceive_companies {
  height: 120px;
  overflow-y: scroll;
}

.target-area {
  height: 150px;
  overflow-y: scroll;
}

.target-area li {
  list-style: none;
  float: left;
}

.target-area .hidden {
  display: none;
}

.table-secondary {
  font-size: 12px;
}

.shiharai {
  font-size: 12px;
  text-align: right;
}

.paymanage .table-block {
  width: 1000px;
}

.paymanage table {
  white-space: nowrap;
}

.fonttest {
  font-size: 11px;
  overflow-x: scroll;
}

.employeelist {
  font-size: 11px;
}

.employeelist .table-contents {
  overflow-x: scroll;
  width: 800px;
}

.employeelist table {
  white-space: nowrap;
}

.paymanage .table-contents {
  overflow-x: scroll;
  width: 1400px;
}

.paymanage table {
  white-space: nowrap;
}

.ctest .card {
  height: 50px;
  background-color: #4682b4;
}

.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img {
  width: 100%;
  height: auto;
  /* border: solid 3px #d7ebfe; */
  /* border-radius: 50%; */
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}/*# sourceMappingURL=style.css.map */