@charset "Shift_JIS";

/* 基本設定 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  padding: clamp(4px, 1.6vw, 16px);
  color: #111;
  background: #fff;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Yu Gothic", Meiryo, monospace;
  font-size: clamp(10px, 1.65vw, 16px);
  line-height: 1.35;
}
img { max-width: 100%; height: auto; }
a { overflow-wrap: anywhere; }

/* ページレイアウト */
.page-shell { width: 100%; margin: 0 auto; }
.layout-table,
.content-table { width: 100% !important; max-width: 750px; margin: 0 auto; }
.content-table { border-spacing: clamp(1px, .7vw, 5px); }

/* パンくずリスト */
.breadcrumb {
  padding: 1px 0 4px;
  font-size: clamp(8px, 1.6vw, 12px);
  line-height: 1.3;
  text-align: left;
}
.breadcrumb a { color: inherit; }

/* 潮汐表ヘッダー */
.tide-table-wrap { width: 100%; max-width: 750px; margin: 0 auto; overflow: hidden; }
.tide-title,
.tide-summary { width: 100%; }
.tide-title { min-height: 35px; }
.tide-heading { font-size: clamp(1rem, 3.2vw, 1.5rem); }
.port-data { font-size: clamp(.72rem, 2vw, 1rem); }
.tide-summary td:first-child,
.tide-summary td:last-child { width: clamp(24px, 7vw, 42px); }
.tide-summary img { width: clamp(22px, 6vw, 30px); height: auto; }

/* 単位表示 */
.tide-legend {
  width: 100%;
  margin: 0 0 3px;
  padding-left: 2px;
  color: #333;
  font-size: clamp(8px, 1.7vw, 12px);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

/* カレンダー */
.tide-calendar {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #6699ff;
  border-collapse: collapse;
  font-size: .95em;
}
.tide-calendar th,
.tide-calendar > tbody > tr > td {
  min-width: 0;
  padding: clamp(1px, .65vw, 5px);
  color: #111 !important;
  overflow-wrap: anywhere;
}
.tide-calendar th,
.tide-calendar th * { text-align: center !important; }
.tide-calendar th > * {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.tide-calendar > tbody > tr > td {
  height: clamp(56px, 12vw, 95px);
  vertical-align: top;
}
.tide-calendar > tbody > tr > td > b:first-child,
.tide-calendar > tbody > tr > td > strong:first-child {
  display: block;
  width: 100%;
  text-align: center !important;
}
.t1 { width: 100%; margin: 0; padding: 0; font-size: 1em; line-height: 1.05; table-layout: fixed; }
.t2, .t3 { padding: 0; white-space: nowrap; }
.t2 { text-align: left; }
.t3 { text-align: right; }
.d1 { border: 1px solid #6699ff; }

/* 表下の注記とフッター */
.tide-height-note {
  width: 100%;
  margin: 4px 0 0;
  color: #111;
  font-size: clamp(8px, 1.7vw, 12px);
  line-height: 1.3;
  text-align: left;
}
.tide-calendar th,
.organization-footer { font-size: clamp(8px, 1.7vw, 12px); }
.organization-footer {
  padding: 8px 0 3px;
  color: #111;
  font-weight: normal;
  line-height: 1.25;
  text-align: center;
}

/* フォーム部品 */
select,
input[type="submit"],
button {
  max-width: 100%;
  min-height: 2.25em;
  font: inherit;
}

/* スマートフォン */
@media (max-width: 600px) {
  body { font-size: clamp(9px, 2.45vw, 13px); }
  .tide-calendar { font-size: .88em; }
  .tide-calendar th,
  .tide-calendar > tbody > tr > td { padding: 2px; }
  .tide-calendar > tbody > tr > td { height: clamp(48px, 13vw, 72px); }
  .t1 { font-size: .92em; }
  .port-data { line-height: 1.25; }
}

@media (max-width: 380px) {
  body { padding: 2px; font-size: 9px; }
  .tide-calendar { font-size: 8px; }
  .tide-calendar th,
  .tide-calendar > tbody > tr > td { padding: 1px; }
  .tide-calendar > tbody > tr > td { height: 46px; }
  .t1 { font-size: 8px; letter-spacing: -0.04em; }
  .tide-heading { font-size: 14px; }
  .port-data { font-size: 9px; }
}

/* 印刷 */
@media print {
  @page { margin: 10mm; }
  body {
    padding: 0;
    color: #000;
    background: #fff;
    font-size: 10pt;
  }
  .page-shell,
  .layout-table,
  .content-table,
  .tide-table-wrap { max-width: none; }
  .breadcrumb-row,
  .month-nav { display: none !important; }
  .tide-summary td:nth-child(2) { width: 100% !important; }
  .tide-calendar { break-inside: avoid; page-break-inside: avoid; }
  .tide-calendar th,
  .organization-footer,
  .tide-height-note { font-size: 9pt; }
  a { color: #000; text-decoration: none; }
}