.tide-table {
  table-layout: fixed; /* 列幅を均等にする */
}
.tide-table th {
  background-color: #0d6efd; /* BootstrapのPrimaryカラー */
  color: white;
}
.tide-table th:hover {
  background-color: #0d6efd; /* ホバー時も背景色を維持 */
  cursor: default; /* カーソルをデフォルトのままにする */
}
.tide-table thead th {
  position: sticky;
  top: 0;
  z-index: 10; /* セルより前に出す */
  background-color: #0d6efd; /* 既存の色を維持 */
}
.tide-table tbody th {
  background-color: #fff;
  color: black;
}
.tide-table-head2{
  width: 100%;
}
.tide-table td {
  word-break: break-all;
}
.tide-table th,
.tide-table td {
  white-space: normal;       /* 折り返しを許可 */
  word-break: break-word;    /* 長い単語を折る */
  overflow-wrap: break-word; /* はみ出し防止 */
}

.tide-info{
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem; /* 要素間のスペース */
}
#tideChart {
  height: 400px !important;
}
.tide-details-col-1 {
  width: 25%;
}
/* 月齢アイコンのスタイル */
.moon-graphic {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  background: #ffdb4d; /* 月の黄色 */
  margin-right: 6px;
  overflow: hidden;
  position: relative;
}

.moon-graphic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #333; /* 影（黒） */
  border-radius: 50%;
}
.moon-age-0::after  { width: 100%; left: 0; }
.moon-age-1::after  { width: 93%; left: 0; }
.moon-age-2::after  { width: 88%; left: 0; }
.moon-age-3::after  { width: 83%; left: 0; }
.moon-age-4::after  { width: 76%; left: 0; }
.moon-age-5::after  { width: 70%; left: 0; }
.moon-age-6::after  { width: 65%; left: 0; }
.moon-age-7::after  { width: 100%; clip-path: inset(0 50% 0 0); /* 左半分を黒くする */ } /* 上弦 */
.moon-age-8::after  { width: 65%; left: 0; }
.moon-age-9::after  { width: 70%; left: 0; }
.moon-age-10::after { width: 76%; left: 0; }
.moon-age-11::after { width: 83%; left: 0; }
.moon-age-12::after { width: 88%; left: 0; }
.moon-age-13::after { width: 93%;  left: 0; }
.moon-age-14::after { width: 0%;  left: 0; } /* 満月 */
.moon-age-15::after { width: 0%; }
.moon-age-16::after { width: 93%;  right: 0; left: auto; }
.moon-age-17::after { width: 88%; right: 0; left: auto; }
.moon-age-18::after { width: 83%; right: 0; left: auto; }
.moon-age-19::after { width: 76%; right: 0; left: auto; }
.moon-age-20::after { width: 70%; right: 0; left: auto; }
.moon-age-21::after { width: 65%; right: 0; left: auto; }
.moon-age-22::after { width: 100%; clip-path: inset(0 0 0 50%); /* 右半分を黒くする */ } /* 下弦 */
.moon-age-23::after { width: 65%; right: 0; left: auto; }
.moon-age-24::after { width: 70%; right: 0; left: auto; }
.moon-age-25::after { width: 76%; right: 0; left: auto; }
.moon-age-26::after { width: 83%; right: 0; left: auto; }
.moon-age-27::after { width: 88%; right: 0; left: auto; }
.moon-age-28::after { width: 93%; right: 0; left: auto; }
.moon-age-29::after { width: 100%; right: 0; left: auto; } /* 晦日 */
.moon-age-30::after { width: 100%; right: 0; left: auto; }

.moon-age-8,
.moon-age-9,
.moon-age-10,
.moon-age-11,
.moon-age-12,
.moon-age-13,
.moon-age-16,
.moon-age-17,
.moon-age-18,
.moon-age-19,
.moon-age-20,
.moon-age-21 {
  background: #333; /* ベースを黒に */
  transform: rotate(180deg);
}

.moon-age-8::after,
.moon-age-9::after,
.moon-age-10::after,
.moon-age-11::after,
.moon-age-12::after,
.moon-age-13::after,
.moon-age-16::after,
.moon-age-17::after,
.moon-age-18::after,
.moon-age-19::after,
.moon-age-20::after,
.moon-age-21::after {
  background: #ffdb4d; /* 影を黄色に（明るい部分） */
}

.tide-detail-btn {
  font-size: 14px !important;     /* ← 絶対値で固定 */
  line-height: 1 !important;      /* ← 行間も固定 */
  padding: 6px 10px !important;   /* ← ボタンの高さ・横幅を固定 */
  height: 32px !important;        /* ← 高さを完全固定したい場合 */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* Bootstrap の rem ベースの影響を完全に排除 */
  font-weight: 600;
  border-width: 1px;
}

.tide-pin-red {
  color: #ff3b30; /* 赤 */
}
.tide-pin-blue {
  color: #007aff; /* 青 */
}

.moon-text{
  font-size: 18px;
  padding: 10px 16px;
}

.tide-text{
  font-size: 16px;
}



@media (max-width: 768px) {
  #tideChart {
    height: 400px !important;
  }
}