#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
.container-md {
  font-family: 'Noto Sans JP', sans-serif;
}
h1 {
  /*線の種類（実線） 太さ 色*/
  /* border-bottom: solid 1px #999999 !important; */
  border-bottom: solid 2px #6699cc !important;
  font-size:1.25rem !important;
  padding: 5px 0 !important;
  font-weight: bold !important;
  color:#333333 !important;
}
h2 {
  font-size:1.2rem !important;
}
h3 {
  font-size:1.5rem !important;
}
a {
  text-decoration: none;
}
#calendar th {
  height: 30px;
  text-align: center;
}
#calendar td {
  height: 0px;
  text-align: center;
}

#calendar table table{
  margin: auto!important;
}

.calendar-txt{
  text-align: center;
}
.today {
  background: orange !important;
}
/* #calendar th:nth-of-type(1), #calendar td:nth-of-type(1) {
  color: red;
} */
/* #calendar th:nth-of-type(7), #calendar td:nth-of-type(7) {
  color: blue;
} */
.calendar-right {
  height: 0px;
  /*線の種類（実線） 太さ 色*/
  border-right: solid 1px #808080 !important;
}
.img-responsive-overwrite{
  margin: 0 auto;
  display:block;
}
.bgcolor-sun{
  background-color:#ffc0cb !important;
}
.bgcolor-sat{
  background-color:#87cefa !important;
}
.bgcolor-green{
  background-color: #ccffcc !important;
}
/* .container {
  padding: 0.5rem !important;
} */
.containe {
  padding: 2rem !important;
  background: #ffffff !important;
  border-radius: 0.4rem !important;
  /* Thanks Stripe */
  box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
      0 3px 6px 0 rgba(0, 0, 0, 0.07) !important;
}
/* Flash messages */
.message {
  padding: 1rem;

  background: #eff8ff;
  color: #2779bd;

  border-color: #6cb2eb;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  margin-bottom: 2rem;
}
.message.hidden {
  display: none;
}
.message.success {
  background: #e3fcec;
  color: #1f9d55;
  border-color: #51d88a;
}
.message.error {
  background: #fcebea;
  color: #cc1f1a;
  border-color: #ef5753;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
/* Paginator */
.paginator {
  text-align: right;
}
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.pagination li {
  margin: 0 0.5rem;
}
.prev.disabled a,
.next.disabled a {
  cursor: not-allowed;
  color: #606c76;
}
.asc:after {
  content: " \2193";
}
.desc:after {
  content: " \2191";
}
.side-nav,
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}
.side-nav a,
th a,
.actions a {
    color: #606c76;
}
.side-nav a:hover,
.side-nav a:focus {
    color:#2f85ae;
}
.re-clr{
background-color: #66cccc;
}
.cu-clr{
  background-color: #fdb56d;
}
.my-gray {
  color: #666666;
}
.my-skyblue {
  color: skyblue;
}
.my-orange {
  color: #fecb81;
}
.list-group-item {
  border: 0!important;
}
.nav-icon a{
  background-color: #fdfdfd;
}
.btn-icon {
  line-height: 1;
  padding: 15px 0 3px;
}
.btn-label {
  font-size: 12px;
  padding: 0 0 15px;
  /* color: #333 !important; */
}
.nav-icon:hover {
  background-color: #99ffff;
}
.nav-color {
  background-color: #002060 !important;
}
.required_icon {
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.8em;
  padding: 0.3em;
  border-radius: 0.5em;
  margin-left:0.3em;
  }
.border-cl-gray{
  border-color: #cccccc;
}
.cal-tbl{
  table-layout: fixed; 
}
.cal-day{
  text-align: left; 
}
.cal-text{
  text-align: center; 
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer{
	background-image: url(../img/footer.png);
	color:#FFFFFF;
  background-position: center;
  background-repeat: no-repeat;
	text-align:center;
	padding:20px 0;
  /* フッターを下に固定 */
  /* position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; */
}
footer a{
	color:#FFFFFF !important;
}
footer a:hover{
	color:#cccccc !important;
}

@media (min-width: 1025px) {
  .footer-bottom {
    /* フッターを下に固定 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

.footer-special {
  position: static; /* デフォルトの値に戻します */
  width: auto; /* デフォルトの値に戻します */
}

.silver{
  background-color: #DDDDDD;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.light-green{
  background-color: #66CC66;
}
.dark-bule{
  color:dodgerblue;
}
.font-small {
  font-size: 1rem;
}
.font-middle {
  font-size: 1.5rem;
}
.font-large {
  font-size: 2rem;
}
.calendar-margin  {
  margin: 30px !important;
}
.calendar-padding  {
  /* padding: 0 20px !important; */
  border-right: dashed 1px #cccccc;
  width:30px;
  padding: 0 10px 0 0 !important;
  text-align:center !important;
}
.calendar-padding-t  {
  padding: 0 10px !important;
}
.error-message{
  color:red !important;
  }
form .required label:after {
  border-radius: 0.25em;
  color: #fff;
  display: inline;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  padding: 0.1em 0.5em;
  margin-left: 0.7em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  background-color: #d9534f;
  /* content: '必須' */
  content: '\5FC5\9808';
}
.scroll{
  height: 300px;
  overflow: auto;
}
.bg-number {
  background-image: url(../img/number.png);
  background-repeat: no-repeat;
}
.box1 {
  padding: 0.5em 1em;
  color: #009933;
  background: #ddffdd;/*背景色*/
  border-top: solid 10px #33cc66;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box1 p {
  margin: 0;
  padding: 0;
}
.box2 {
  padding: 0.5em 1em;
  color: #fa7060;;
  background: #ffebe9;
  border-top: solid 10px #ff7d6e;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box2 p {
  margin: 0; 
  padding: 0;
}
.v_line_left_a {
  border-left: thick solid #007bff;
  padding-left: 10px;
}
.v_line_left_m {
  border-left: thick solid #28a745;
  padding-left: 10px;
}
.error{
  color: red;
}
#calendar > table > tbody > tr > td:first-of-type {
  background-color: #fde8e8;
  /* color: #F00;
  font-weight: bold; */
}
#calendar > table > tbody > tr > td:last-of-type {
  background-color: #d8e7ff;
  /* color: #0000FF;
  font-weight: bold; */
}
#calendarW td {
  height: 50px;
  text-align: center;
}
#calendarW td:first-of-type {
  background-color: #ededed;
  font-weight: bold;
  width:100px;
  text-align: center;
}
#calendarW th{
  text-align: center;
}
#calendarW th:nth-child(even){
  background-color: #ededed;
}
/* #calendarW th:first-of-type{
  background-color: #ffffff;
} */
#calendar > table > tbody > tr > th:nth-child(odd)  {
  background-color: #ededed;
}
.bg-color-gr{
  background-color: #f0f0f0 !important;
}
.bg-color-wh{
  background-color: #ffffff !important;
}
.image {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.image img {
	display: block;
	width: 100%;
	height: auto;
}
.clear{
  clear: both;
  display: block;
}
.rsv_cancel{
  color:red;
}
.rsv_cancel:hover{
  color:#CC0000;
}

/* 承認を緑 */
.rsv_approval {
  color: #008907;
}

.rsv_approval:hover {
  color: #1e7e34;
}

/* 確定を青 */
.rsv_confirmed {
  color: #007BFF;
}

.rsv_confirmed:hover {
  color: #0056b3;
}

/* 仮予約をオレンジ */
.rsv_provisional {
  color: #efa503;
}

.rsv_provisional:hover {
  color: #ffa000;
}

/* .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: none !important;
  background-clip: border-box;
  border: none !important;
  border-radius: none !important;
}

.card-img-overlay {
  padding: 0 !important;
  top: calc(50% - 0.5rem) !important;
  text-align: center !important;
  font-weight: bold !important;
} */

/* .box-top{
  position: relative;
}
.center-top {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
} */

.search-box {
  background-color: #e7e7e7;
  padding: 15px 20px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.search-result {
  padding: 15px 20px;
  background-color: white;
}

.btn1 {
  background-color: #002060;
  color: #fff;
  text-align: center;
}

.text-color-darkblue {
  color: #002060 !important;
}

.btn1:hover {
  /* background-color: #1a3366; */
  opacity: 0.7;
  color: #fff;
  text-align: center;
}

.btn2 {
  text-align: center;
}

.btn2:hover {
  /* background-color: #1a3366; */
  opacity: 0.7;
  text-align: center;
}

.custom-modal .modal-dialog {
  max-width: 800px;
}

.modal-header {
	color: #333 !important;
	background: #f2f2f2 !important;
	margin: 0 !important;
	padding: 15px !important;
	border: none !important;
	font-weight: 400 !important;
}

.modal-title {
  text-align: center !important;
}

.modal-custom-scrollbar {
  overflow-x: auto;
}

.custom-scrollbar {
  overflow-x: auto;
}

/* .table-responsive {
  max-height: 300px;
} */

.input-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.input-wrapper .form-control.custom-width {
  width: 70px;  /* input要素の幅を調整します。適切な値に変更してください */
}

.input-wrapper .unit {
  white-space: nowrap;  /* '部屋' という文字列が折り返さないようにします */
}


.unit {
  margin-left: 5px;
  display: inline;
}

.hidden {
  display: none;
}

.table-middle {
  vertical-align: middle;
}

.search-title-bg {
  background-color: #f0f0f0 !important;
}

.search-title-bg2 {
  background-color: #cfe2fa !important;
}

.search-title-bg3 {
  background-color: #d1facf !important;
}

/* 入力ボックスの幅を広げる */
.input-wrapper .form-control {
  width: 100px; 
}

/* 追加：モバイルデバイスでの入力ボックスの幅を広げる */
@media (max-width: 576px) {
  .input-wrapper .form-control {
    width: 60px; /* この行を追加 */}
}

/* Add this CSS for mobile spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
}


/* 数値の入力欄にスピナーを常時表示する */
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
} */

/* .no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
} */

.center-container {
  display: flex;
  justify-content: center;
}

/* .calendar {
  border-collapse: collapse;
  margin-right: 20px;
}

.calendar th,
.calendar td {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

.calendar th {
  background-color: #ccc;
}

.calendar .sunday {
  color: pink;
}

.calendar .saturday {
  color: blue;
}

.calendar-container {
  display: flex;
} */

/* 左カラムの背景色を設定 */
/* .d-lg-flex {
  background-color: #f8f9fa; 
} */

.table-custom th {
  background-color: #f0f0f0;
  vertical-align: middle;
  width: 20%;
}

.table-custom td {
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  .table-custom th, .table-custom td {
      display: block;
      width: 100%;
  }
  .table-custom th {
      background-color: #f0f0f0;
  }
  .search-result .line {
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 10px;
  }
  .search-result .border-end {
    border-right: none !important;
  }
}

.text-red{
  color:red;
}

.progressbar {
  display: flex;
  margin-bottom: 100px;  /* これはデスクトップ表示時の余白 */
  /* padding: 50px 0; */
}

.progressbar .item {
  position: relative;
  flex-grow: 1;
  text-align: center;
  background: #ddeafa;
  color: #999999;
  padding: 10px 0;
  border: 2px solid white;
}

.progressbar .item .step {
  font-size: 1.3em;
}

.progressbar .item .step-description {
  position: absolute;
  width: 100%;
  top: 140%;
  left: 50%;
  transform: translateX(-50%);
  color: #999999;
  font-weight: normal;
}

/* .progressbar .item:not(:last-child):after {
  content: '';
  position: absolute;
  top: calc(50% - 22px); 
  right: -22px;
  border: solid transparent;
  border-width: 22px 0 22px 22px;
  border-left-color: #ddeafa;
  z-index: 2;
}

.progressbar .item:not(:last-child):before {
  content: '';
  position: absolute;
  top: calc(50% - 22px); 
  right: -24px;
  border: solid transparent;
  border-width: 24px 0 24px 24px;
  border-left-color: #fff;
} */

/* active */
.progressbar .item.active {
  background: #0070BD;
  color: #FFF;
  /* font-weight: bold; */
}

.progressbar .item.active .step-description {
  color: #000;
  font-weight: bold;
}

.progressbar .item.active:not(:last-child):after {
  border-left-color: #0070BD;
}

#privacy-policy {
  height: 210px;
  /* overflow: auto; */
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background: #ddd;
}

#cancel-policy {
  height: 210px;
  /* overflow: auto; */
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background: #ddd;
}

#policy-text {
  height: 300px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background: #ddd;
}

@media screen and (max-width: 767px) {
  .progressbar {
    margin-bottom: 30px;  /* モバイル表示時の余白 */
  }
  .progressbar .item {
    font-size: 11px;
    padding: 10px 0;
  }
  .progressbar .item:not(:last-child):after {
    border-width: 15px 0 15px 15px;
    right: -15px;
    top: calc(50% - 15px);
  }
  .progressbar .item:not(:last-child):before {
    border-width: 17px 0 17px 17px;
    right: -17px;
    top: calc(50% - 17px);
  }
  .progressbar .item .step-description {
    display: none;
  }
  #privacy-policy, #cancel-policy {
    box-sizing: border-box;  /* パディングとボーダーを要素の内部に含める */
    width: 100%;  /* 全幅を使用する */
    overflow-x: scroll !important;
    overflow-y: scroll !important;
    height: 205px !important;  
    white-space: nowrap; 
  }

  label[for="agree-check-2"] {
    font-size: 15px; /* 小さいフォントサイズに設定 */
  }
}

/* .element::-webkit-scrollbar {
  width: 10px; 
}

.element::-webkit-scrollbar-thumb {
  background-color: darkgrey; 
  outline: 1px solid slategrey;
} */

.form-control.custom-width {
  width: 70px !important;
}

.calendar-admin {
  table-layout: fixed;
  width: 100%;
}

.calendar-admin td {
  width: 14.2857%;
}

.calendar-admin .event-container {
  display: flex;
  overflow-x: auto;
  height: 100%;
}

.calendar-admin .event-group {
  display: flex;
  flex-direction: column;
}

/* .calendar-admin .overflow-group {
  min-width: 100%;
} */

.calendar-admin .event-item {
  white-space: nowrap;
}

.circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgb(109, 109, 188); /* 太さと色を変更できます */
  border-radius: 50%;
}

/* 日曜日の日付を赤にする */
td.sun .day {
  color: red;
}

/* 土曜日の日付を青にする */
td.sat .day {
  color: blue;
}

/* 月曜から金曜までの背景色を薄いグレーにする */
td.weekday {
  background-color: #f0f0f0;
}

.reservation-wrapper {
  width: 100%;
  max-height: 100px; /* 高さの設定はお好みで調整してください */
  overflow-x: hidden;
  overflow-x: auto; /* 横方向のスクロールを有効にする */
  /* overflow-y: auto; 縦方向のスクロールを有効にする */
  white-space: nowrap;
}

.reservation {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.day-total-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom:10px;
}

.total {
  border-bottom: 1px solid;
}

.nav-tabs .nav-link.active {
  background-color: #515c9a;
  color: white;
  border-color: #515c9a;
}

.active-button {
  /* アクティブなボタンの設定 */
  opacity: 1.0; /* 透明度 100% */
}

.inactive-button {
  /* 非アクティブなボタンの設定 */
  opacity: 0.5; /* 透明度 50% */
}

/* .tbl-required{
  content: "必須";
  color: #ffffff;
  background: #cc0000;
  font-size: 0.8em;
  padding: 0.3em;
  border-radius: 0.5em;
  margin-left:0.3em;
} */

.tbl-required{
  color: #ffffff;
  background: #cc0000;
  font-size: 0.8em;
  padding: 0.3em;
  border-radius: 0.5em;
  margin-left: 0.5em; /* 左のマージンを加えて、"団体名"から距離をつけます。*/
  display: inline-block; /* 行内に表示 */
}

.cross {
  color: #F44336;
  font-size: 20px;
  /* padding: 10px; */
  padding-bottom: 5px;
}

.circle-container {
  text-align: center;
}

.circle {
  display: inline-block;
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
  border: 2px solid #6f8da9;
  border-radius: 50%;
  box-sizing: border-box; /* Add this to include the border in the element's total width and height */
}

/* .bold-circle .circle {
  border: 3px solid #025abe;
  transition: transform 0.3s;
}

.bold-circle .circle:hover {
  transform: scale(1.3);
} */

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

.bold-circle .circle {
  border: 3px solid #025abe;
  animation: grow 1s forwards;
}

.bold-circle .triangle {
  /* filter: brightness(0.8); */
  animation: grow 2s forwards;
}



/* @keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.bold-circle .triangle {
  animation: heartbeat 2s infinite;
} */

/* .bold-circle .triangle {
  transition: transform 0.3s;
  display: inline-block;
}

.bold-circle .triangle:hover {
  transform: scale(1.3);
  filter: brightness(0.8);
} */

/* @keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.bold-circle .triangle:hover {
  animation: heartbeat 0.5s infinite;
} */

.middle-align {
  vertical-align: middle;
}

#yoyaku {
  border: 2px solid rgb(124, 142, 173);
}

#yoyaku td, #yoyaku th {
  border: 1px solid rgb(156, 175, 209);
}

#yoyaku th {
  background-color: #dcefff;
}

#yoyaku2 {
  border: 2px solid rgb(124, 142, 173);
}

#yoyaku2 td, #yoyaku2 th {
  border: 1px solid rgb(156, 175, 209);
}

#yoyaku2 th {
  background-color: #dcefff;
}

#yoyaku2-1 {
  border: 2px solid rgb(124, 142, 173);
}

#yoyaku2-1 td, #yoyaku2 th {
  border: 1px solid rgb(156, 175, 209);
}

#yoyaku2-1 th {
  background-color: #dcefff;
}



#yoyaku-my {
  border: 2px solid rgb(124, 173, 130);
}

#yoyaku-my td, #yoyaku-my th {
  border: 1px solid rgb(157, 209, 156);
}

#yoyaku-my th {
  background-color: #dcffec;
}

#yoyaku2-my {
  border: 2px solid rgb(124, 173, 130);
}

#yoyaku2-my td, #yoyaku-my th {
  border: 1px solid rgb(157, 209, 156);
}

#yoyaku2-my th {
  background-color: #dcffec;
}

.special-color {
  background-color: #eef6fd !important;
}

.total-number{
  float: right;
  color:#808080;
  font-weight: bold
}

.stay-number{
  float: right;
  color:#808080;
  /* font-weight: bold */
}

.meal-number{
  float: right;
  color:#808080;
  /* font-weight: bold */
}

.largetext{
/*  float: right; */
  color:#0000FF;
  font-size: small; 
}

.aaa {
  display: flex;
  align-items: center;
  justify-content: center; 
}

.highlighted {
  font-size: 18px; /* フォントサイズを大きく */
  font-weight: bold; /* テキストを太字に */
  color: red; /* テキストカラーを赤に */
  background-color: rgb(250, 255, 216);
  padding: 10px; /* パディングを追加 */
}

/* .custom-spacing th, .custom-spacing td {
  padding-right: 20px;
  padding-left: 20px;
} */

.custom-spacing th[colspan], .custom-spacing td[colspan] {
  padding-right: 40px;
}

.custom-spacing th:first-child, .custom-spacing td:first-child {
  border-left: 1px solid #ccc;  /* 行の先頭に境界線を追加 */
}

.custom-spacing th:nth-child(5), .custom-spacing td:nth-child(5),
.custom-spacing th:nth-child(10), .custom-spacing td:nth-child(10),
.custom-spacing th:nth-child(15), .custom-spacing td:nth-child(15),
.custom-spacing th:nth-child(20), .custom-spacing td:nth-child(20),
.custom-spacing th:nth-child(25), .custom-spacing td:nth-child(25) {
  border-right: 1px solid #ccc;  /* 各セットの最後に境界線を追加 */
}

.custom-spacing.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.05);
}

.room-range-header {
  font-size: 20px;
  text-align: left;
  background-color: #f4fbff !important; /* 青色に変更 */
  border: 1px solid #ddd;
}

.scrollable {
  max-width: 150px;
  overflow-x: auto;  /* 横方向のスクロールバーを表示する場合はこれを使用 */
  overflow-y: hidden;  /* 縦方向のスクロールを防ぐために使用 */
  white-space: nowrap;  /* 改行を防ぐために使用 */
}

.table.custom-padding>:not(caption)>*>* {
  /* padding: 0; */
  padding: 0.1rem 0.1rem;
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg),var(--bs-table-accent-bg));
  border-bottom-width: 1px;
}

/* .scrollable-room {
  max-width: 80px;
  overflow-x: auto;  
  overflow-y: hidden;  
  white-space: nowrap;  
} */

.scrollable-room {
  max-width: 80px;
  overflow: hidden; /* 横方向と縦方向のスクロールを防ぐ */
  white-space: nowrap; /* 改行を防ぐ */
  text-overflow: ellipsis; /* テキストがオーバーフローした場合に省略記号を表示する */
}

.custom-input-width {
  /* width: 50px; */
  width: 50px;
}

.custom-input-width-print {
  /* width: 50px; */
  width: 40px;
}

.kibou-text {
  font-family: 'Arial', sans-serif;
  color: #4a4a4a;
  line-height: 1.6;
}

.highlight {
  color: #e74c3c;  /* 赤色で強調 */
  font-weight: bold;  /* 太字にする */
}

/* 下部の注釈 */
.kibou-text:after {
  content: "※()内は希望";
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: #7f8c8d;  /* グレイッシュな色 */
}

.alert {
  background-color: #f8d7da; /* ピンクの背景色 */
  color: #721c24;           /* テキストの色 */
  padding: 10px;            /* 内部の余白 */
  border: 1px solid #f5c6cb;/* 枠線 */
  border-radius: 4px;       /* 角を丸める */
}

.alert:before {
  content: "⚠ ";           /* 警告アイコン */
  font-size: 20px;          /* アイコンのサイズ */
  line-height: 1.5;         /* テキストとアイコンの行間 */
}

.info-alert {
  background-color: #e2e3e5; /* 薄いグレーの背景色 */
  color: #495057;           /* ダークグレーのテキスト色 */
  padding: 10px;            /* 内部の余白 */
  margin-bottom: 15px;      /* 下の余白 */
  border: 1px solid #d6d8db;/* 薄いグレーの枠線 */
  border-radius: 4px;       /* 角を丸める */
}

.info-alert:before {
  content: "ℹ️ ";          /* 情報アイコン */
  font-size: 20px;          /* アイコンのサイズ */
  line-height: 1.5;         /* テキストとアイコンの行間 */
}

.mild-alert {
  background-color: #fff3cd; /* 薄い黄色の背景色 */
  color: #856404;           /* ブラウンのテキスト色 */
  padding: 10px;            /* 内部の余白 */
  border: 1px solid #ffeeba;/* より薄い黄色の枠線 */
  border-radius: 4px;       /* 角を丸める */
}

.mild-alert:before {
  content: "⚠️ ";         /* 警告アイコン */
  font-size: 20px;          /* アイコンのサイズ */
  line-height: 1.5;         /* テキストとアイコンの行間 */
}

.confirmation-message {
  background-color: #d4edda; /* 薄い緑色の背景色 */
  color: #155724;           /* ダークグリーンのテキスト色 */
  padding: 10px;            /* 内部の余白 */

  border: 1px solid #c3e6cb;/* より薄い緑色の枠線 */
  border-radius: 4px;       /* 角を丸める */
}

.icon {
  font-size: 20px;   /* アイコンのサイズ */
  margin-right: 5px; /* アイコンとテキストの間隔 */
}

#yoyaku2-1-my {
  border: 2px solid rgb(124, 173, 130);
}

#yoyaku2-1-my td, #yoyaku2-my th {
  border: 1px solid rgb(157, 209, 156);
}

#yoyaku2-1-my th {
  background-color: #dcffec;
  padding: 8px;
  text-align: center;
}

#yoyaku2-1-my td {
  text-align: center;
  padding: 8px;
  /* background-color: #effff4; */
  background-color: #ffffff;
}

.content2 {
  padding: 0 2rem;
}

@media (max-width: 768px) { /* 768px以下の画面幅で適用されるスタイル */
  .confirmed-guests {
    overflow-x: auto; /* 横スクロールを有効にする */
  }
}


.page-title-container {
  margin-bottom: 1rem;
  text-align: center; /* センタリング */
}

.page-title {
  font-size: 1.75rem; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  color: #4a4a4a; /* 文字色 */
  background-color: #f2f2f2; /* 背景色 */
  padding: 0.5rem 1rem; /* パディング */
  border-radius: 5px; /* 角丸 */
  display: inline-block; /* インラインブロック要素として扱う */
}

.btn-custom {
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
  transition: background-color 0.3s ease; /* 背景色の変更にアニメーションを追加 */
}

/* 無効状態のボタン */
.btn-disabled {
  background-color: #a3a1a1; /* 薄いグレー */
  color: white;
  cursor: not-allowed; /* マウスオーバー時に「禁止」マークを表示 */
}

.btn-disabled:hover {
  color: white;
}

.btn-disabled:visited {
  color: white;
}

/* 人数ボタン */
.btn-people {
  background-color: #007bff;
  color: white;
}

/* 食事ボタン */
.btn-meal {
  background-color: #d56136;
  color: white;
}

/* 部屋割りボタン */
/* .btn-room {
  background-color: #28a745;
  color: white;
} */

/* 部屋割りボタン */
.btn-room {
  background-color: #ffc107;
  color: black; /* 黒文字 */
}

/* 領収書ボタン */
.btn-receipt {
  background-color: #0056b3;
  color: white;
}

.btn-people:hover {
  color: white;
  background-color: #0056b3;
}

.btn-meal:hover {
  color: white;
  background-color: #ba4a28;
}

.btn-room:hover {
  color: black;
  background-color: #e0a905; 
}

.btn-receipt:hover {
  color: white;
  background-color: #004291;
}

/* 人数ボタン */
.btn-people:visited {
  color: white;
}

/* 食事ボタン */
.btn-meal:visited {
  color: white;
}

/* 部屋割りボタン */
.btn-room:visited {
  color: black;
}

/* 領収書ボタン */
.btn-receipt:visited {
  color: white;
}

ul.no-bottom-margin {
  margin-bottom: 0 !important;
}

.custom-container {
  max-width: 1600px;
}

@media print {
  .print-hide, #page_top {
      display: none !important;
  }
  .content {
      box-shadow: none !important;
      padding: 0rem !important;
  }
}

.print {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
  outline: none; 
}

.print i {
  margin-right: 5px; 
}

.print:hover {
  background-color: #45a049;
}

.print:active {
  background-color: #3e8e41; 
  outline: none;
}

.print:focus {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
  outline: none;
}

.print:visited {
  outline: none;
}

.reservation-details {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 各要素を垂直方向の中央に揃える */
}

.bath-checkboxes {
  display: flex;
  font-size: 1.5em; /* フォントサイズを大きくする */
  align-items: center; /* 高さ方向の中央揃え */
  font-weight: bold; /* テキストを太字にする */
}

.bath-checkboxes .bath-label {
  margin-right: 20px; /* 「大浴場」とチェックボックス間のマージンを増やす */
}

.bath-checkboxes .form-check-input {
  transform: scale(1.0); /* チェックボックスを大きく表示 */
  vertical-align: middle; /* チェックボックスの高さを調整 */
  margin-right: 5px !important; /* チェックボックスとテキストの間の余白を狭める */
}

.form-check {
  padding-left: 0em !important;
}

.form-check .form-check-input {
  margin-left: 0 !important;
}

/* モバイルデバイス用のスタイル */
@media (max-width: 768px) {
  .reservation-details {
      flex-direction: column;
  }

  .bath-checkboxes {
      margin-bottom: 10px; /* 上部の要素からの余白 */
      align-items: flex-start; /* 要素を上端で揃える */
  }

  .bath-checkboxes .form-check-inline {
      display: block;
  }

  .bath-checkboxes .form-check {
      margin-bottom: 0; /* 下部の余白を削除 */
  }
}

#reservationTable {
  width: 80%; /* テーブルの幅を親要素の50%に設定 */
  margin: 0 auto; /* 中央揃え */
  border-collapse: collapse;
}

#reservationTable th, #reservationTable td {
  border: 1px solid #000;
  text-align: center;
  padding: 8px;
}

#reservationTable .header {
  background-color: #c2f2f0; /* ヘッダーの背景色 */
}

#reservationTable .available {
  background-color: #fefeac; /* 利用可能な日にちの背景色 */
}

#reservationTable .unavailable {
  background-color: #d8c7c7; /* 利用不可能な日にちの背景色 */
}

/* 承認を緑 */
.rsv_approval_stay {
  color: #008907;
  font-size: small;
}

.rsv_approval_stay:hover {
  color: #1e7e34;
  font-size: small;
}

/* 確定を青 */
.rsv_confirmed_stay {
  color: #007BFF;
  font-size: small;
}

.rsv_confirmed_stay:hover {
  color: #0056b3;
  font-size: small;
}