@charset "utf-8";
/* suisan.html - ページ固有スタイル */

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

/* レイアウト */
.suisan-wrap{
  display: grid;
  grid-template-columns: minmax(260px, 520px) 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 880px){
  .suisan-wrap{ grid-template-columns: 1fr; }
}

/* 図ラッパー */
.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;
}

/* マーカー */
.mark{
  position: absolute;               
  transform: translate(-50%, -50%); 
  text-decoration: none;
}
.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: .9rem;
  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);
}
.panel .sub-title{
  margin-bottom: 0;
}
fieldset{
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  margin:12px 0;
}
legend{
  font-weight:700;
  font-size:.95rem;
}
.ports{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px 14px;
  font-size:.9rem;
}

/* 年月日（潮汐カレンダー風） */
.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); }

/* 補助要素 */
.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){
  .panel .sub-title{
    font-size: 0.85rem;
  }
  .ports{
    font-size:0.8rem;
    gap: 4px 10px;
  }
  .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; }
  .ports input[type="radio"]{
    transform: scale(0.8);
    transform-origin: left center
  }
}

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