@charset "UTF-8";
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
body {
  margin: 0;
}
body::-webkit-scrollbar {
  display: none;
}

img {
  vertical-align: top;
}

* {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

table {
  border-collapse: collapse;
}
table th,
table td {
  border: solid 1px #000;
  padding: 5px 10px;
}

.toggle-button-001 {
  display: inline-block;
  position: relative;
  width: 45px;
  height: 22.5px;
  border-radius: 22.5px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color 0.4s;
}

.toggle-button-001:has(:checked) {
  background-color: #00d1b2;
}

.toggle-button-001::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 22.5px;
  height: 22.5px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  content: "";
  transition: left 0.4s;
}

.toggle-button-001:has(:checked)::after {
  left: 22.5px;
}

.toggle-button-001 input {
  display: none;
}

#column {
  display: flex;
  flex-direction: row;
}
#column aside {
  width: 250px;
  height: 100vh;
  border-right: solid 0.5px #dcdcdc;
  overflow: scroll;
  /* スクロールの幅の設定 */
  /* スクロールの背景の設定 */
}
#column aside::-webkit-scrollbar {
  width: 5.5px;
  height: 0;
}
#column aside::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #f1f1f1;
}
#column aside::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #a8a8a8;
}
#column aside #header {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-weight: 700;
  border-bottom: solid 0.5px #dcdcdc;
}
#column aside #header #logo {
  width: 65%;
}
#column aside #header #logo a img {
  margin: 0 auto;
}
#column aside #account {
  padding: 20px;
  border-bottom: solid 0.5px #dcdcdc;
}
#column aside #account #account-icon {
  margin-bottom: 5px;
}
#column aside #account #account-info #account-name {
  font-size: 20px;
  font-weight: 700;
}
#column aside #account #account-info #account-detail {
  display: flex;
  flex-wrap: wrap;
}
#column aside #account #account-info #account-detail div {
  font-size: 14px;
  color: #646464;
  display: flex;
}
#column aside #account #account-info #account-detail div:nth-child(1) {
  margin-right: 8px;
}
#column aside #account #account-info #account-detail div span {
  font-size: 17px;
  display: block;
  margin-top: 1.5px;
  user-select: none;
}
#column aside #account #logout {
  display: flex;
  justify-content: right;
  margin-top: 5px;
}
#column aside #account #logout a {
  color: #cc0f35;
}
#column aside #menu {
  padding: 0 20px;
  color: #646464;
  margin-bottom: 50px;
}
#column aside #menu .menu-category {
  margin-top: 20px;
}
#column aside #menu .menu-category .menu-category-title {
  font-size: 15px;
}
#column aside #menu .menu-category ul .menu-category-item {
  margin: 5px 0;
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
}
#column aside #menu .menu-category ul .menu-category-item:hover {
  background: rgba(255, 185, 54, 0.1882352941);
}
#column aside #menu .menu-category ul .menu-category-item a {
  color: #646464;
  display: flex;
  padding: 10px 15px;
}
#column aside #menu .menu-category ul .menu-category-item a span {
  display: inline-block;
  font-size: 22px;
  width: 22px;
  height: 22px;
  margin-right: 8px;
}
#column aside #footer {
  margin: 0 20px;
  margin-bottom: 5px;
}
#column aside #footer ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#column aside #footer ul li {
  font-size: small;
}
#column aside #footer ul li a {
  text-decoration: none;
  color: #646464;
}
#column aside #footer ul li a:hover {
  text-decoration: underline;
}
#column #avatar-menu {
  display: none;
}
#column main {
  width: calc(100% - 250px);
  height: 100vh;
  overflow: scroll;
  padding-bottom: 100px;
  /* スクロールの幅の設定 */
  /* スクロールの背景の設定 */
}
#column main::-webkit-scrollbar {
  width: 5.5px;
  height: 0;
}
#column main::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #f1f1f1;
}
#column main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #a8a8a8;
}
#column main header {
  width: 100%;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 39;
  padding-left: 20px;
  line-height: 60px;
  font-size: 23px;
  font-weight: 700;
  background: #ffb936;
  color: #fff;
}

#top {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#top section {
  width: 850px;
  margin: 0 auto;
}
#top #top-analytics .row {
  display: flex;
  gap: 30px;
}
#top #top-analytics .row .canvas {
  height: 300px;
}
#top #top-analytics #guest_type_ratio {
  width: 200px;
}
#top #top-analytics #activities {
  width: 100%;
}
#top #top-menu-smh {
  display: none;
}
#top #top-menu ul,
#top #top-menu-smh ul {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
}
#top #top-menu ul li,
#top #top-menu-smh ul li {
  list-style: none;
  width: 200px;
  height: 80px;
  background: rgba(255, 185, 54, 0.1882352941);
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
#top #top-menu ul li:hover,
#top #top-menu-smh ul li:hover {
  opacity: 0.7;
}
#top #top-menu ul li a,
#top #top-menu-smh ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 80px;
  text-decoration: none;
  color: #646464;
}

#scan #scan-info {
  display: flex;
}
#scan #scan-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: solid 2px #646464;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
#scan #scan-frame #camera-change-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  user-select: none;
}
#scan #scan-frame #camera-change-btn:hover {
  cursor: pointer;
}
#scan #scan-frame #camera-change-btn span {
  display: block;
  color: #fff;
  font-size: 26px;
}
#scan #input-id-hand {
  margin-top: 20px;
  display: flex;
  gap: 5px;
}

.ticket {
  width: 350px;
  margin-top: 24.5px;
}
.ticket .rip {
  position: relative;
}
.ticket .rip.border {
  border: dashed 1px #aaa;
}
.ticket .rip::before, .ticket .rip::after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  position: absolute;
  background: #fff;
}
.ticket .rip:before {
  top: -7.5px;
  left: -7.5px;
}
.ticket .rip::after {
  top: -7.5px;
  right: -7.5px;
}
.ticket .ticket-header {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 22px;
}
.ticket .ticket-header.family {
  background: #8a2be2;
  color: #fff;
}
.ticket .ticket-header.other {
  background: #ff8c00;
  color: #fff;
}
.ticket .ticket-middle {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.ticket .ticket-middle.entered {
  background: #FFDD57;
  color: #646464;
}
.ticket .ticket-middle.not_entered {
  background: #00d1b2;
  color: #fff;
}
.ticket .ticket-middle.disable {
  background: #FF3860;
  color: #fff;
}
.ticket .ticket-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #e9e8e8;
}
.ticket .ticket-body .ticket-title {
  font-size: 14px;
}
.ticket .ticket-body .first-guest .first-guest-info div {
  font-size: 23px;
  font-weight: 800;
}
.ticket .ticket-body .first-guest .first-guest-info div span {
  font-size: 16px;
}
.ticket .ticket-body .guests ul {
  display: flex;
  flex-wrap: wrap;
}
.ticket .ticket-body .guests ul li {
  width: 50%;
  font-size: 19px;
  font-weight: 600;
}
.ticket .ticket-body .guests ul li span {
  font-size: 15px;
}
.ticket .ticket-body .st_info .st_name {
  font-size: 19px;
  font-weight: 600;
}
.ticket .ticket-body .st_info .st_belong {
  font-size: 15px;
  font-weight: 600;
}
.ticket .ticket-body .data-box .data {
  font-size: 15px;
  font-weight: 600;
}

#first {
  width: 850px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 15px 0;
  font-size: 17px;
  color: #646464;
}

#enter #row,
#exit #row,
#check #row {
  display: flex;
  width: 850px;
  margin: 0 auto;
}
#enter #row #scan,
#exit #row #scan,
#check #row #scan {
  margin-right: 100px;
}
#enter #row #operate #process_btn,
#enter #row #operate #already_entered,
#exit #row #operate #process_btn,
#exit #row #operate #already_entered,
#check #row #operate #process_btn,
#check #row #operate #already_entered {
  margin-top: 15px;
}
#enter #row #operate #activity-title,
#exit #row #operate #activity-title,
#check #row #operate #activity-title {
  margin-top: 20px;
  font-size: 19px;
  font-weight: 600;
}
#enter #row #operate .exhibit-id-name div:nth-child(2),
#exit #row #operate .exhibit-id-name div:nth-child(2),
#check #row #operate .exhibit-id-name div:nth-child(2) {
  font-size: 14px;
}

#search section {
  width: 850px;
  margin: 0 auto;
}
#search #search-box form {
  display: flex;
  justify-content: space-between;
}
#search #search-box form .field {
  margin: 0;
}
#search #search-box form .field:nth-child(2) {
  width: calc(100% - 165px - 66px - 50px);
}
#search #search-box form .control {
  display: flex;
  align-items: end;
}
#search #search-result {
  margin-top: 40px;
}
#search #search-result thead tr th:nth-child(7) {
  padding: 0;
}
#search #search-result tbody tr td:nth-child(1) .flex {
  display: flex;
  align-items: center;
}
#search #search-result tbody tr td:nth-child(1) .flex div {
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
#search #search-result tbody tr td:nth-child(1) .flex span {
  font-size: 16px;
  user-select: none;
  cursor: pointer;
}
#search #search-result tbody tr td:nth-child(7) {
  position: relative;
  padding: 0;
  vertical-align: middle;
}
#search #search-result tbody tr td:nth-child(7) .pop-menu span {
  font-size: 21px;
  user-select: none;
  display: block;
  cursor: pointer;
}
#search #search-result tbody tr td:nth-child(7) .pop {
  position: absolute;
  right: 0;
  z-index: 10;
  padding: 10px;
  background-color: #dcdcdc;
  border-radius: 6px;
  display: none;
  width: 90px;
}
#search #search-result tbody tr td:nth-child(7) .pop .operate-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#search #search-result tbody tr td:nth-child(7) .pop .operate-btns button {
  cursor: pointer;
}

#analytics section {
  width: 850px;
  margin: 0 auto;
}
#analytics #analytics_first {
  display: flex;
  gap: 40px;
}
#analytics #analytics_first #guest_type_ratio {
  width: 200px;
}
#analytics #activities .canvas {
  height: 350px;
}
#analytics #exhibits_data .canvas {
  height: 350px;
}

#settings #row {
  display: flex;
  width: 850px;
  margin: 0 auto;
}
#settings #row #settings-aside {
  width: 210px;
  margin-top: 7px;
}
#settings #row #settings-aside ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#settings #row #settings-aside ul li {
  width: 100%;
  text-align: right;
  border-radius: 22px 0 0 22px;
}
#settings #row #settings-aside ul li:hover {
  background: rgba(255, 185, 54, 0.1882352941);
}
#settings #row #settings-aside ul li.selected {
  background: #ffb936;
}
#settings #row #settings-aside ul li.selected a {
  color: #fff;
}
#settings #row #settings-aside ul li a {
  width: 100%;
  padding: 10px 20px;
  border-radius: 22px 0 0 22px;
  border: solid 1px #ffb936;
  color: #646464;
  display: block;
}
#settings #row #smh-settings-aside {
  display: none;
}
#settings #row #settings-main {
  width: 640px;
  padding: 0 23px;
}
#settings #row #settings-main #settings-main-header div:nth-child(1) {
  font-size: 22px;
  font-weight: 600;
}
#settings #row #settings-main .s-m-m-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}
#settings #row #settings-main #settings-main-main #user-account {
  display: flex;
  margin-top: 20px;
  gap: 25px;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-name {
  font-size: 19px;
  font-weight: 600;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-id {
  color: #646464;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-exhibit {
  font-size: 14px;
  color: #646464;
  display: flex;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-exhibit span {
  font-size: 17px;
  display: block;
  margin-top: 1.5px;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-roles ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-roles ul li {
  display: flex;
  align-items: center;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-roles ul li button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
#settings #row #settings-main #settings-main-main #user-account .s-m-m-user-info .s-m-m-account-roles ul li button span {
  user-select: none;
  cursor: pointer;
  font-size: 19px;
}
#settings #row #settings-main #settings-main-main #users tbody td .user-id-name div:nth-child(2),
#settings #row #settings-main #settings-main-main #users tbody td .exhibit-id-name div:nth-child(2) {
  font-size: 13px;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(3) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(3) ul li {
  display: flex;
  align-items: center;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(3) ul li button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(3) ul li button span {
  user-select: none;
  cursor: pointer;
  font-size: 19px;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(4) button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
#settings #row #settings-main #settings-main-main #users tbody td:nth-child(4) button span {
  user-select: none;
  cursor: pointer;
  font-size: 19px;
}
#settings #row #settings-main #settings-main-main #roles #role-edit #edit-name {
  margin-top: 10px;
}
#settings #row #settings-main #settings-main-main #roles #role-edit #auth-list {
  margin-top: 20px;
  margin-bottom: 10px;
}
#settings #row #settings-main #settings-main-main #roles #role-edit #auth-list .toggle .toggle-select {
  display: flex;
  justify-content: space-between;
  margin-right: 200px;
}
#settings #row #settings-main #settings-main-main #roles #role-edit #auth-list .toggle .auth-description {
  margin-right: 200px;
  font-size: 15px;
  color: #646464;
}
#settings #row #settings-main #settings-main-main #invitations #code-list tbody td:nth-child(6) {
  display: flex;
  align-items: center;
}
#settings #row #settings-main #settings-main-main #invitations #code-list tbody td:nth-child(6) button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
#settings #row #settings-main #settings-main-main #invitations #code-list tbody td:nth-child(6) button span {
  user-select: none;
  cursor: pointer;
  font-size: 19px;
}
#settings #row #settings-main #settings-main-main #exhibits #exhibit-list tbody td:nth-child(3) {
  display: flex;
  align-items: center;
}
#settings #row #settings-main #settings-main-main #exhibits #exhibit-list tbody td:nth-child(3) button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
#settings #row #settings-main #settings-main-main #exhibits #exhibit-list tbody td:nth-child(3) button span {
  user-select: none;
  cursor: pointer;
  font-size: 19px;
}
#settings #row #settings-main #settings-main-main #dcenter .datafile {
  margin: 20px 0;
}
#settings #row #settings-main #settings-main-main #dcenter .datafile .datafile-title {
  font-size: 18px;
  font-weight: 600;
}
#settings #row #settings-main #settings-main-main #dcenter .datafile button {
  margin-top: 5px;
}