@charset "utf-8";
/* suisan.html - ページ固有スタイル（共通 tyoseki.css 読み込み後） */

:root{
  --border: #c9ddff;
  --accent: #126bcd;
  --accent-dark: #0f56a4;
}

/* レイアウト：PC=左図/右パネル、SP=縦積み（図→パネル） */
.suisan-wrap{
  display: grid;
  grid-template-columns: minmax(260px, 520px) 1fr; /* 左=図の最大幅は520px目安 */
  gap: 16px;
  align-items: start;
}
@media (max-width: 880px){
  .suisan-wrap{ grid-template-columns: 1fr; }
}

/* ---- タイトル・説明（従来トーン維持） ---- */
.page-head h1 {
  margin: 0 0 4px;
  line-height: 1.25;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #000;
}
.page-head p.desc {
  margin: 0 0 4px;
  line-height: 1.4;
  font-size: 14px;
  color: #333;
}
.page-head p.advisory {
  margin: 0 0 2px;
  line-height: 1.35;
  font-size: 14px;
  color: #c00;
}


/* 図ラッパー */
.map-wrap{
  position: relative;
  max-width: 520px;
  width: min(92vw, 520px);
  margin: 0 auto;
}
.map-img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* マーカー（A案：赤丸＝原点固定、ラベルは別レイヤ） */
.mark{
  position: absolute;               /* 親 .map-wrap を基準に%配置（left/topはインラインで） */
  transform: translate(-50%, -50%); /* 原点＝中心 */
  text-decoration: none;
  display: inline-block;
}
.mark::before{
  content: "";
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: #d60000; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px #d60000, 0 1px 6px rgba(0,0,0,.25);
}
.label{
  position: absolute; left: 12px; top: 0; transform: translateY(-50%);
  font-size: 13px; line-height: 1.2; color: #222;
  background: rgba(255,255,255,.9);
  border: 1px solid #ddd; border-radius: 6px;
  padding: 2px 6px; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
.label--left{ left: auto; right: 12px; transform: translateY(-50%); }
.label--bottom{ left: auto; top: 12px; bottom: auto; transform: translateX(-50%); }
.label--top{ left: auto; bottom: 12px; top: auto; transform: translateX(-50%); }


/* 選択パネル（潮汐カレンダーのトーン） */
.panel{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding: 12px 16px; box-shadow: 0 2px 8px rgba(10,58,122,.06);
}
fieldset{
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:12px; margin:12px 0;
}
legend{ font-weight:700; color:#333; padding:0 6px; }

/* 港一覧：常に3列固定 */
.ports{
  display:grid; gap: 8px 14px; font-size:14px;
}
.ports.cols-3{ grid-template-columns: repeat(3, 1fr); }
.ports label{ display:flex; align-items:center; gap:6px; margin:0; line-height:1.1; }
.ports input[type="radio"]{ margin:0; }

/* 年月日（潮汐カレンダー風） */
.ymd-row{
  display:flex; justify-content:flex-start; align-items:flex-end; flex-wrap:wrap;
  gap:10px; margin: 12px 0;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.select-compact{
  width:auto; min-width:90px; max-width:140px; padding:6px 10px;
  background:#fff; border:1px solid var(--border); border-radius:8px; font-size:16px;
}
.select-compact.year{ min-width:110px; }
button{
  appearance:none; display:inline-block; padding:6px 14px;
  border:1px solid var(--accent); border-radius:8px;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
button:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
button:focus{ outline:none; border-color:var(--accent-dark); box-shadow:0 0 0 3px rgba(18,107,205,.18); }

/* 補助要素 */
.hint.small{ color:#666; font-size:.85rem; margin:6px 0 0; }
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; border:0 !important;
}

/* スマホ微調整 */
@media (max-width:600px){
  html{ font-size:12.5px; }
  .select-compact{ font-size:13.5px; }
  button{ font-size:12.5px; }
  .label{ font-size:11px;
    left:8px;
    padding:1px 3px;
    border-radius:4px; }
  .label--left{ left:auto; right:8px; }
  .label--top{ left:auto; bottom:8px; }
  .label--bottom{ left:auto; top:8px; }
  .mark::before{ width:9px; height:9px; }
}

@media (max-width:500px){
  html{ font-size:12px; }
  .select-compact{ font-size:13px; }
  button{ font-size:12px; }
  .label{ font-size:10.5px; }
}