/*----- Common --------*/
.wrapper-40em {
  max-width: 40em;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 0 3em;
}
.wrapper-64em {
  max-width: 64em;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.wrapper-70em {
    max-width: 70em;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.wrapper {
    position: relative;
    top: 100px;
}
/* footer固定用 */
.footer-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 93.5vh;
}
.footer-content {
    flex: 1;
}
.footer {
    width: 100%;
}

.article {
  margin-bottom: 3em;
}
.article-mt {
  margin-top: 5em;
}
.header-caution {
  padding: 0.7em 1em 0.1em;
  background-color: black;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  font-weight: 500;
	margin-bottom: 3em;
}
.caution {
  color: #FD6062;
}
.callout__txt {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
}
.callout__note {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.3rem;
}
.callout__notice {
  color: #e63c32;
}
.shadow {
  box-shadow: 0px 3px 3px #bbb;
}
.shadow:hover {
  box-shadow: 0px 1px 1px #bbb;
  transition-duration: 0.5s;
}
@media print, screen and (max-width: 40em) {
  .wrapper-40em {
    padding: 0 1em;
  }
}
.br_40 {
  display: none;
}
/*-------- header --------- */
.header {
    background-color: white;
    background-image: url("../img/common/header.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    top: 0;
    left: 0;
}
.header__top {
  background-image: none;
}
.navtext-container {
  width: 180px;
  height: 66px;
  margin: 1.5em 0 0 1.5em;
}
.navtext-container img {
  width: 100%;
  height: auto;
}
.menu {
  list-style: none;
  display: flex;
  margin: 1.5em 1.5em 0 0;
  /*font-size:medium;*/
}
.menu a {
  text-decoration: none;
  display: inline-block;
  padding: 0 1.5em 0 0;
  color: white;
}
.menu__top a {
  color: black;
}
.menu a:hover {
  opacity: 0.6;
  transition-duration: 0.5s;
}
.menu__login a {
  color: #ab7e04;
  padding-left: 24px;
}
.menu__login a::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -22px;
  background-image: url("../img/common/menu-login.svg");
}
.hamburger-menu {
  display: none;
}
.hamburger-line__top {
  background-color: #333;
}
.button__logout {
	background-color: #f3f0e6;
	color: #926c2a;
}

/*-------- ドロップダウンメニュー --------- */
.dropdown {
  position: relative;           /* メニュー項目の親要素として基準点を設定 */
}
.dropdown-menu {
  display: none;                /* 初期状態で非表示 */
  position: absolute;           /* ドロップダウンメニューを絶対配置 */
  top: 40%;                     /* 親要素の下に表示 */
  left: 0;                      /* 左端を合わせる */
  background-color: #f3f0e6;    /* 背景色を既存スタイルに合わせる */
  padding: 5px;                 /* 内側の余白 */
  list-style: none;             /* リストのデフォルトスタイルを削除 */
  margin: 0;                    /* 外側余白を削除 */
  z-index: 1000;                /* 前面に表示 */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 少し影を追加 */
  border-radius: 5px;           /* 角を丸くする */
  /* width: fit-content; */
  /* min-width: 120px; */
}

.dropdown-menu li {
  margin: 5px 0;                /* 各アイテムに間隔を付与 */
  width:200px;
}
.dropdown-menu a {
  color: #333;              /* テキストカラー */
  text-decoration: none;    /* 下線を削除 */
  display: block;           /* ブロック要素として配置 */
  padding: 5px 10px;        /* 内側の余白を設定 */
  transition: opacity 0.5s; /* ホバー時のアニメーションを追加 */
}
.dropdown-menu a:hover {
  opacity: 0.6;     /* ホバー時に少し透明に */
}
.dropdown-menu.show {
  display: block;   /* 表示 */
}
/* 利用者検索画面用のスタイル */
.table-user-search th.buttons {
    width: 100px;
}
.table-user-search th.u_account {
    width: 100px;
}
table.table-user-search th.name {
    width: 150px;
}
table.table-user-search th.representative_name {
    width: 150px;
}
table.table-user-search th.mail_address {
    width: 200px;
}
table.table-user-search th.zip {
    width: 90px;
}
table.table-user-search th.address {
    width: 200px;
}
table.table-user-search th.telephone_number {
    width: 100px;
}
table.table-user-search th.application_count {
    width: 100px;
}
.dialogbutton-ok {
    width:43%;
}
.dialogbutton-cancel {
    width: 43%;
}
.dialogbutton-margin {
    width: 3%;
}
#deleteDialog .modal-footer {
    display: flex;
    justify-content: space-between; /* 両端に配置し、間のスペースを均等に */
    padding: 0.75rem;
}

/* 固定幅Table */
.table-fixed {
    table-layout: fixed;
    width: 98%;
    margin-left: 2em;
    margin-right: 2em;
}
    .table-fixed td, .table-fixed th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* 一覧内のリンク */
.list-link-style {
    font-size:14px;
}
/* 画面内のリンク */
.contents-link-style {
    font-size: 18px;
}

/* パスワード入力欄用のスタイル */
span.password-icon {
    padding: 0 0.75rem;
    height: 100%;
}
    span.password-icon i {
        font-size: 1.2rem;
    }



@keyframes color-change {
    0% {
    background-color: #333;
  }
  50% {
    background-color: #ff0000;
  }
  100% {
    background-color: #333;
  }
}
@media print, screen and (max-width: 64em) {
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    right: 1.5em;
    top: 1.5em;
  }
  .hamburger-line {
    width: 100%;
    height: 2px;
    background-color: white;
    margin-bottom: 6px;
  }
  .hamburger-line__top {
    background-color: #333;
  }
  /* activeクラスのスタイル */
  .active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    transition-duration: 0.5s;
  }
  .active .hamburger-line:nth-child(2) {
    opacity: 0;
    transition-duration: 0.5s;
  }
  .active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    transition-duration: 0.5s;
  }
  .menu {
    display: none;
  }
  /* activeクラスが付与されたときのメニューのスタイル */
  .active + .menu {
    display: block;
    position: absolute;
    z-index: 500;
    background: #f3f0e6;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 3em 0;
    top: 100px;
    text-align: center;
  }
  .menu a {
    padding: 0 0 0 0;
    margin-bottom: 2em;
    color: black;
  }
  .button__header-menu {
    margin: 0 auto;
  }
  /*-------- ドロップダウンメニュー --------- */
  .dropdown-menu {
    position: static;           /* 小画面では通常フローに */
    background-color: white;    /* 背景色を調整 */
    width: 100%;                /* メニュー幅を100%に拡張 */
    box-shadow: none;           /* 影を削除してシンプルに */
  }
  .dropdown-menu li {
    text-align: center;         /* アイテムを中央揃え */
  }
  .dropdown-menu a {
    padding: 10px 0;            /* 余白を調整 */
    color: #333;                /* テキストカラーを統一 */
  }
}
/*----- footer --------*/
footer {
  background-color: #f3f0e6;
  padding: 2em 2em 5em;
}
.footer-info p {
  font-weight: bold;
  margin: 0;
}
.footer-name {
  font-size: 1.3em;
}
.footer-address {
  font-size: 0.9em;
}
.footer-tel {
  font-size: 2em;
  color: #8f6b24;
  line-height: 1.2;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8em;
}
.footer-list li {
  margin-bottom: 1em;
}
.footer-list li a {
  color: black;
}
.footer-list__link {
  padding-left: 20px;
}
.footer-list__link li a::before {
  content: '';
  width: 15px;
  height: 15px;
  position: absolute;
  margin: 5px 0 0 -20px;
  background-image: url("../img/common/exlink-footer.svg");
}
/*----- Calendar --------*/
.calendar {
  text-align: center;
  background-image: url("../img/top/main.webp");
  background-size: cover;
  background-position: center;
  padding: 1em 0;
}
.calendar-ttl {
  font-size: 1.2em;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendar-nav {
  font-size: 1em;
}
.calendar-nav__month {
  font-size: 1.7em;
}
.calendar-table {
  margin-bottom: 120px;
}
.calendar-table thead {
  background: none;
  border: none;
}
.calendar-table thead th {
  text-align: center;
  font-size: 0.9em;
  margin: 0;
  padding: 0.5em 0;
}
.calendar-table tbody {
  border: none;
}
.calendar-table td {
  border: 1px solid #dedede;
  background-color: white;
}
.calendar-table td:hover {
  background-color: lightgray;
  transition-duration: 0.5s;
}
.calendar-table p {
  margin-bottom: 0;
}
.date-active {
  color: black;
}
.date-inactive {
  color: #bbb;
  background-color: #f1f1f1 !important;
}
.date-holiday {
  color: red;
}
.date-sat {
  color: blue;
}
.top-full {
  width: 18px;
  height: 18px;
}
.top-vacant, .top-some {
  width: 20px;
  height: 20px;
}
.main_contents {
    padding-bottom: 60px;
}
/*----- TOP --------*/
.top-menu {
  background-color: #333;
  padding: 2em 2em 1em 2em;
  margin: -5em 0 5em;
}
.button__exlink {
  width: 14px;
  height: 14px;
  margin-left: 0.3em;
  position: relative;
  bottom: 2px;
}
.top-menu-btn {
  text-align: center;
}
/*.top-menu-btn-l a {
  font-size: 1.5em;
}*/
.top-info-area {
  margin: 5em 0;
}
.top-accordion li {
  border: none;
}
.accordion-title {
  border-bottom: 1px solid #ddd;
  padding-left: 0.5em;
}
.accordion-title p {
  margin: 0;
}
.top-info-area {
  margin: 3em 0;
}
.video {
  text-align: center;
  width: 100%;
  margin-bottom: 3em;
}
.video video {
  width: 100%;
  height: auto;
}
.news-area {
  margin: 3em 0 7em;
}
/*----- Research --------*/
.select-date {
  text-align: center;
  max-width: 400px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.select-date p {
  margin-bottom: 5px;
}
.select-date__box {
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.room-rsv {
  margin: 3em 0;
}
.room-rsv__thead {
  border: none;
  background: none;
}
.room-rsv__thead td {
  text-align: center;
  line-height: 1;
  font-size: 110%;
}
.room-rsv__thead span {
  font-size: 0.6em;
}
.room-connect__thead img {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
}
.room-rsv__small-txt p {
  font-size: 0.8em;
}
.room-rsv__tbody {
  border: none;
}
.room-rsv__tbody th {
  text-align: left;
  font-weight: normal;
  line-height: 1.2;
  background: white;
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
}
.room-rsv__tbody td {
  text-align: center;
  background: white;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 80px;
  padding: 0;
}
.room-rsv__tbody td:last-child {
  border-right: none;
}
.room-rsv__tbody td:hover {
  background-color: lightgray;
  transition-duration: 0.5s;
}
.room-rsv__tbody td img {
  width: 24px;
  height: 24px;
}
.room-modal {
  font-weight: 500;
  font-size: 110%;
  text-align: center;
  padding: 2em;
}
.room-modal span {
  font-size: 2.4em;
}
.room-modal .grid-x {
  margin-top: 3em;
}
/*--room status---*/
.room-rsv__vacant input[type="checkbox"] {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  height: 80px;
  top: 12px;
  background-image: url("../img/common/vacant.svg") !important;
  background-size: 24px 24px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
.room-rsv__vacant input[type="checkbox"]:checked {
  background-image: url("../img/common/vacant-w.svg") !important;
}
.room-rsv__full, .room-rsv__some {
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.room-rsv__full {
  background-image: url("../img/common/full.svg") !important;
  background-size: 22px 22px !important;
}
.room-rsv__some {
  background-size: 24px 24px !important;
  background-image: url("../img/common/some.svg") !important;
}
.clicked {
  background-color: #ab7e04 !important;
}
/*----- Form --------*/
.h1__reserve {
  margin-bottom: 1.5rem;
}
.reserve-nav {
  margin: 0 0 3rem;
}
.reserve-nav ul {
  list-style: none;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.reserve-nav ul li {
  padding: 0;
  margin: 0 0.3rem 0.3rem 0;
  color: gray;
}
.reserve-nav .active {
  color: #8f6b24;
  font-weight: 500;
}
/*----- Equipment --------*/
.accordion-item__equipment {
  background: #8f6b24;
}
.accordion-title__equipment {
  color: white;
  font-weight: 500;
}
.accordion-title__equipment:hover, .accordion-title__equipment:focus {
  background: #ab7e04;
  color: white;
}
.accordion-content__equipment {
  padding: 0;
  border: none;
  overflow-x: scroll;
}
:last-child > .accordion-content__equipment:last-child {
  border-bottom: none;
}
.equipment-table {
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
}
.equipment-table thead td {
  text-align: center;
  background: #f3f0e6;
}
.equipment-table tbody tr {
  background: #f3f0e6;
}
.equipment-table tbody tr:nth-child(2n+1) {
  background: #f9f7f2;
}
.equipment-form {
  font-size: 1rem;
  width: 35px;
  height: 35px;
  display: inline;
  margin-bottom: 0;
}
.equipment-name {
  width: 8rem;
  text-align: left;
}
.equipment-name span {
  font-size: 0.8rem;
}
.equipment-price {
  width: 6rem;
}
/*----- Display --------*/
.display-caption {
  text-align: center;
  margin: 3rem 0 0.5rem;
}
/*----- Confirmation --------*/
.confirmation-table {
  font-size: 0.9rem;
  text-align: center;
}
.confirmation-table thead td {
  text-align: center;
}
.confirmation-table thead, .confirmation-table tbody {
  border: none;
}
.confirmation-table th, .confirmation-table td {
  background: white;
  font-weight: normal;
  border-bottom: 1px solid #ddd;
}
.price-table {
  font-size: 0.8rem;
  color: gray;
  text-align: left;
}
.price-table tbody {
  border: none;
}
.price-table th, .price-table td {
  background: white;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
}
.price-table td {
  text-align: right;
}
.price-table tr:last-child > th, .price-table tr:last-child > td {
  font-weight: 500;
  font-size: 0.9rem;
  color: #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
}
.cancel-table {
  font-size: 0.8rem;
  text-align: left;
}
.cancel-table tbody {
  border: none;
}
.cancel-table th, .cancel-table td {
  background: white;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
}
.cancel-table td {
  text-align: right;
  font-weight: 500;
}
.cancel-table span {
  font-size: 0.65rem;
  font-weight: normal;
}
/*----- Regulation --------*/
.h2-regulation {
  text-align: center;
  font-size: 1rem;
  color: black;
  border: 1px solid black;
  margin-bottom: 2rem;
}
.regulation-area {
  font-size: 0.9rem;
  width: 100%;
  height: 500px;
  border: 1px solid #ddd;
  padding: 1rem;
  overflow-y: scroll;
  margin-bottom: 3rem;
}
.regulation-check {
  text-align: center;
  background: #dcbe78;
  padding-top: 0.5rem;
}
@media print, screen and (max-width: 40em) {
  .top-menu-btn {
    text-align: left;
  }
  .top-menu-btn a {
    width: 49%;
    padding-right: 5px;
    padding-left: 5px;
  }
  .br_40 {
    display: inline;
  }
  .br {
    display: none;
  }
  footer {
    margin-top: 5rem;
  }
  .footer-name {
    line-height: 1.3;
    padding-bottom: 0.5rem;
    font-size: 1.2em;
  }
  .footer-address {
    line-height: 1.3;
    padding-bottom: 0.5rem;
  }
  .footer-tel {
    font-size: 1.6em;
    line-height: 1.2;
  }
  .footer-list li {
    margin-bottom: 0;
  }
  .callout__txt {
    text-align: left;
  }
  .callout__note {
    text-align: left;
  }
  .reserve-nav ul {
    justify-content: flex-start;
  }
  .reserve-nav ul li {
    padding: 0;
    margin: 0 0.5rem 0.3rem 0;
    color: gray;
  }
  .equipment-table {
    overflow-x: scroll;
  }
  .regulation-check {
    display: flex;
    padding: 1rem;
  }
}

/* 編集リンク */
th.edit_link {
    width: 60px;
}
th.edit_link_double {
    width: 130px;
}
a.edit_link {
    color:#1779ba
}
/* アプリ設定一覧 */
th.column_name {
    width: 500px;
}
th.column_type {
    width: 100px;
}
th.edit_value {
    
}
label.configuration_value {
    white-space: pre-line;
    font-weight: initial;
}

/*利用者一覧テーブルヘッダー */
th.user_list_center { 
    text-align:center;
}

/* 非表示列　*/
th.column_hidden {
    display: none;
}

th.column_quantity {
    width: 50px;
}
th.column_order {
    width: 150px;
}
.custom-checkbox {
    margin: 0 !important;
}


/*戻るボタンサイズ */
form.button_back {
    width: 50%;
}

/*スイッチ用サイズ*/
.switch-label {
    height: 30px;
    line-height: 30px;
}
.switch-button {
    width:60px !important;
    height: 30px;
    line-height: 30px;
}

/*画面下部Div中央揃え */
.center-parent-div {
    text-align: center;
  }
.child-inline-block {
    display: inline-block;
}

/*ボタン中央寄せ単体用*/
.center-single-button-width {
    width:50%;
}

/* Mfr000、102*/
.calendar_cell_Link {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* ← paddingを含めてサイズ調整 */
    color: inherit; /* ← セルの文字色と統一 */
}


/* Mfr002*/
th.tbl_title_MFR002 {
    text-align: center;
    justify-content: center;
}
th.col_time_MFR002 {
    width: 180px;
}
td.col_check_MFR002 {
    width: 80px;
    height: 70px;
    text-align: center;
}
button.col_button_MFR002 {
    width: 100%;
    height: 100%;
    font-size: 26px;
    font-weight: bold;
    color: orange; /* 中の色（塗り） */
    -webkit-text-stroke: 2px black; /* 枠線の色（アウトライン） */
}
th.lbl_DeviceName_Mfr002 {
    width: 85%;
}
label.lbl_title_Mfr002 {
    font-size: 16px;
}
label.lbl_room_title_Mfr002 {
    margin-left: 1em;
    font-size: 22px;
}
label.lbl_margin_one_Mfr002 {
    margin-left: 2em;
    display: inline-block;
}
label.lbl_margin_two_Mfr002 {
    margin-left: 3em;
    display: inline-block;
}
label.lbl_inline_top_Mfr002 {
    display: inline-block;
    width: 8em;
}
label.lbl_inline_Mfr002 {
    display: inline-block;
}
label.lbl_over_Mfr002 {
    display: block; /* ラベルをブロック要素にする */
    max-width: 100%; /* 幅を柔軟に調整 */
    white-space: nowrap; /* 改行を防ぐ */
    overflow: hidden; /* はみ出た部分を非表示 */
    text-overflow: ellipsis; /* 「...」を表示 */
    justify-content: center;
}

/* Mfr317 */
.checkBox317 {
    transform: scale(1.5);
    margin-left: 1em;

}

.checkBox317_2 {
    transform: scale(1.5);
    margin-left: 10em;
}


/* Mfr509 */
.under-btn509 button {
    width: 40%;
}
/* Mfr510 */
th.edit_link510 {
    width: 80px;
}
th.column_name510 {
    width:400px;
    max-width: 500px;
}
th.column_type510 {
    width: 120px;
}

/* 予約履歴画面用のスタイル */
.table-reservation-history th.buttons {
    width: 70px;
}
table.table-reservation-history th.reservation_id {
    width: 100px;
}
table.table-reservation-history th.reservation_status {
    width: 100px;
}
table.table-reservation-history th.usage_datetime_and_facility {
    width: 200px;
}
table.table-reservation-history th.reservation_staff {
    width: 100px;
}

.tdPaymentStatus {
    color: white !important;
    background-color: gray !important;
}

.reservation-modal-size {
    max-width: 80%; /* 任意の幅 */
    width: 830px; /* もしくは固定幅 */
    margin: auto; /* 中央揃え */
}

.hidden-before-init {
    visibility: hidden;
}