@font-face {
  font-family: "myfont";
  src: url("../fonts/KORURI-REGULAR.ttf") format("truetype");
}

@font-face {
  font-family: "smartfont";
  src: url("../fonts/03SmartUI.otf") format("truetype");
}

body {
  /* font-family: 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'MS Pゴシック', Arial, sans-serif !important; */
  font-family: "myfont", sans-serif;
}

table {
  font-size: 85%;
}

.calendar {
  border-collapse: separate;
  border-spacing: 0;
  background-color: #FFFFFF;
  table-layout: fixed;
  width: 100%;
}

.calendar thead th {
  background-color: #F8F9FA;
  font-weight: normal;
  font-size: 0.85rem;
}

.calendar th,
.calendar td {
  border: 1px solid #DEE2E6;
  vertical-align: top;
  height: 80px;
  font-size: 0.9rem;
  padding: 6px;
}

/* カレンダー月移動ボタン */
.calendar-nav {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: #555;
  cursor: pointer;
}

/* ホバー時だけ反応させる */
.calendar-nav:hover {
  color: #EE7C31;
}

/* フォーカス時の枠も消す（スマホ・Chrome対策） */
.calendar-nav:focus {
  outline: none;
  box-shadow: none;
}

.calendar td.closed {
  background-color: #F5F5F5;
  color: #999999;
}

.calendar td.closed>div:first-child,
.calendar td.closed {
  font-weight: normal;
}

.calendar td.closed .dot {
  opacity: 0.9;
}

.calendar thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.calendar thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

.calendar tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.calendar tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.dots {
  margin-top: 4px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
}

.dot.open {
  background-color: #EE7C31;
}

.dot.event {
  background-color: #77B347;
}

.dot.cafe {
  background-color: #4A90E2;
}

.dot.close {
  background-color: #999999;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.legend-dot.open {
  background-color: #EE7C31;
}

.legend-dot.event {
  background-color: #77B347;
}

.legend-dot.cafe {
  background-color: #4A90E2;
}

.calendar th {
  background-color: #fff !important;
}

/* 曜日ヘッダーと1行目の境界線を消す */
.calendar thead th {
  border-bottom: none;
}

/* 祝日は休室でも赤文字を優先 */
.calendar td.closed.holiday-text {
  color: #E74C3C;
}

.legend-dot.close {
  background-color: #999999;
}

.legend-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 3px;
}

.legend-box.closed {
  background-color: #F5F5F5;
  border: 1px solid #D0D0D0;
  margin-left: -1px;
  /* 丸ドットとの視覚的な位置合わせ */
}

.calendar td.sat,
.calendar th.sat {
  color: #4A90E2;
  border-color: #dee2e6 !important;
}

.calendar td.sun,
.calendar th.sun,
.calendar td.holiday-text {
  color: #E74C3C;
  border-color: #dee2e6 !important;
}

.navbar {
  background-color: #EE7C31 !important;
  /* ダークグレー */
}

.navbar-dark .navbar-nav .nav-link {
  color: #FFFFFF !important;
}

.navbar-toggler {
  /* background-color: #EE7C31; */
  background-color: #FFFFFF;
}

.navbar-toggler .navbar-toggler-icon {
  /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23EE7C31' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.border-custom {
  border-color: rgb(242, 171, 60) !important;
}

.btn-custom {
  background-color: rgb(34, 24, 22) !important;
  /* ボタンの背景色 */
  border-color: rgb(34, 24, 22) !important;
  /* ボタンの枠線の色 */
}

.btn-custom .text-white {
  color: #FFFFFF !important;
  /* テキストの色を白にする */
}

.custom-btn-color {
  background-color: #EE7C31;
}

.footer-custom {
  background-color: rgb(34, 24, 22) !important;
  /* フッターの背景色を変更 */
  text-align: center;
  color: white;
  /* padding: 3rem; */
  /* p-5 に相当するパディング */
  /* margin-top: 5rem; */
  /* mt-5 に相当するマージントップ */
}

input[type="date"] {
  text-align: left;
  /* テキストを左寄せにする */
  direction: ltr;
  /* left-to-right 文字の流れを左から右へ */
}

.conts {
  width: 85%;
  margin: 0 auto;
}

.logo-message {
  width: 85%;
}

.rooms {
  width: 100%;
}

.table-data {
  width: 90%;
}

.nav-room-img {
  width: 85%;
}

.thought-title {
  width: 90%;
}

.send_done {
  width: 80%;
}

.place-text {
  position: absolute;
  top: 50%;
  /* 上からの位置 */
  left: 50%;
  /* 左からの位置 */
  transform: translate(-40%, -60%);
  /* 中心からのオフセット */
}

.playroom-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  /* これにより、比率を保ったまま、指定のサイズに合わせて画像をトリミングします */
  margin: 0 auto;
}

.custom-small {
  font-size: 0.80rem;
  /* 例えば、12pxよりも小さいサイズを指定 */
}

.fukidashi {
  width: 10%;
}

.fukidashi2 {
  width: 15%;
}

.dotted-line {
  border-bottom: 1px dashed #000;
  /* 点線の色と太さを指定 */
  padding-bottom: 5px;
  /* テキストと線の間隔を調整 */
}

.eyeCatch {
  width: 100%;
}

.carousel-inner img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

@media all and (min-width: 768px) {
  body {
    /* width: 750px; */
    width: 100%;
    margin: 0 auto;
  }

  .conts {
    width: 50%;
    margin: 0 auto;
  }

  .logo-message {
    width: 50%;
  }

  .rooms {
    width: 50%;
  }

  .table-data {
    width: 35%;
  }

  .thought-title {
    width: 50%;
  }

  .pc-half {
    width: 55%;
    margin: 0 auto;
  }

  .pc-half .col-md-3 {
    font-size: larger;
    /* 大きい画面ではより大きな文字サイズ */
  }

  .pc-half .col-md-9 p {
    font-size: 18px;
    /* 説明文の文字サイズ */
  }

  .send_done {
    width: 30%;
  }

  .playroom-photo {
    width: 100%;
    height: 250px;
    object-fit: cover;
    /* これにより、比率を保ったまま、指定のサイズに合わせて画像をトリミングします */
  }

  .custom-small {
    font-size: 1rem;
    /* 例えば、12pxよりも小さいサイズを指定 */
  }

  .fukidashi {
    width: 8%;
  }

  .fukidashi2 {
    width: 12%;
  }

  .eyeCatch {
    width: 50%;
  }

  .carousel-inner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
  }
}

/* スマホ用：カレンダーの高さを詰める */
@media (max-width: 767px) {

  .calendar th,
  .calendar td {
    height: 56px;
    padding: 4px;
    font-size: 0.8rem;
  }

  .dots {
    margin-top: 2px;
  }

  .dot {
    width: 8px;
    height: 8px;
    margin: 0 1px;
  }
}

/* カレンダー全体の背景（ごく薄いブルーグレー） */
.calendar-wrapper {
  background-color: #F7FBFD;
  border-radius: 10px;
  padding: 20px 20px;
}

/* 開室情報画像（info.png）専用 */
.info-image {
  width: 90%;
  max-width: 520px;
}