/* =========================================================
   宿泊約款（mstay-fukui-terms.html）だけのスタイル
   色・書体の設定は common.css にあります
   ========================================================= */
html{ scroll-behavior:smooth; scroll-padding-top:calc(64px + env(safe-area-inset-top,0px)); }
body{ line-height:1.85; font-size:15px; }
.page{ max-width:560px; margin:0 auto; }  /* 館内案内（guide.css）と同じ幅 */

/* ---------- 上部バー（スクロールしても残る） ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  background:var(--sea); color:#fff;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.back{
  display:inline-flex; align-items:center; gap:4px;
  color:#fff; text-decoration:none; font-size:14px; font-weight:700;
  padding:6px 10px 6px 4px; border-radius:999px; min-height:36px;
}
.back svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 見出し ---------- */
.head{ background:var(--sea); color:#fff; padding:18px 22px 28px; }
.head .logo-svg{ display:block; width:min(200px, 60%); height:auto; }
.head h1{ font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1.4; margin-top:22px; }
.head p{ font-size:13px; color:var(--foam); margin-top:4px; }

.notice{
  margin:16px 16px 0; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--lamp);
  border-radius:0 12px 12px 0; font-size:14px;
}
.notice[hidden]{ display:none; }

/* ---------- 目次 ---------- */
.toc{ margin:16px 16px 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.toc summary{ list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary svg{ width:18px; height:18px; stroke:var(--ink-soft); fill:none; stroke-width:2; transition:transform .2s; }
.toc[open] summary svg{ transform:rotate(180deg); }
.toc ol{ list-style:none; border-top:1px solid var(--line); padding:6px 0; }
.toc a{ display:flex; gap:10px; padding:7px 16px; text-decoration:none; font-size:14px; }
.toc a:active{ background:rgba(20,60,114,.06); }
.toc .no{ flex:0 0 4.5em; color:var(--ink-soft); }

/* ---------- 本文 ---------- */
main{ padding:8px 20px 0; }
article{ padding:22px 0; border-bottom:1px solid var(--line); }
article h2{ font-size:16px; font-weight:700; display:flex; gap:12px; align-items:baseline; margin-bottom:8px; }
article h2 .no{ font-family:var(--font-display); color:var(--sea-2); flex:0 0 auto; }
@media (prefers-color-scheme: dark){ article h2 .no{ color:var(--lamp);} }
.clause{ position:relative; padding-left:1.4em; }
.clause + .clause{ margin-top:8px; }
.clause .cn{ position:absolute; left:0; top:0; color:var(--ink-soft); }
.items{ list-style:none; margin-top:6px; }
.items li{ padding-left:2.4em; text-indent:-2.4em; }
.items li + li{ margin-top:4px; }
/* 番号は本文の左にぶら下げる。2けた（(１０)、１０．）でも本文と重ならない */
.items .inum, .notes .inum{ display:inline-block; min-width:2.4em; padding-right:.4em; text-indent:0; color:var(--ink-soft); }
.items .sub{ list-style:none; margin-top:4px; }
.items .sub li{ padding-left:1.6em; text-indent:-1.6em; }
.items .sub .inum{ min-width:1.6em; }

/* ---------- 利用規則・備考（１．２．…） ---------- */
.rules{ padding:28px 0 4px; }
.rules[hidden]{ display:none; }
.rules h2{ font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:10px; }
.notes{ list-style:none; }
.notes li{ padding-left:2.4em; text-indent:-2.4em; }
.notes li + li{ margin-top:6px; }
.rules-list{ margin-top:10px; }
.table-note-title{ font-size:13px; font-weight:700; margin-top:10px; }
.appendix .notes{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

/* 未入力の箇所（【 】で囲んだ文字）を目立たせます */
.ph{
  display:inline; background:rgba(214,154,45,.14); color:var(--ink-soft);
  border-bottom:1px dashed var(--mark); padding:0 2px;
}

/* ---------- 別表 ---------- */
.appendix{ padding:28px 0 4px; }
.appendix h2{ font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:10px; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table{ border-collapse:collapse; width:100%; min-width:420px; font-size:13px; }
th, td{ padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
tr:last-child td{ border-bottom:0; }
th{ background:rgba(20,60,114,.06); font-weight:700; white-space:nowrap; }
.table-note{ font-size:13px; color:var(--ink-soft); margin-top:8px; }

.enacted{ padding:24px 0 8px; font-size:14px; color:var(--ink-soft); }
.enacted div + div{ margin-top:2px; }

footer{ padding:24px 20px calc(40px + env(safe-area-inset-bottom,0px)); font-size:13px; color:var(--ink-soft); }
footer .logo-svg{ display:block; width:160px; height:auto; margin-bottom:10px; }

@media print{
  .topbar, .toc, .lang{ display:none !important; }
  .head{ background:none; color:#000; padding:0 0 12px; }
  .head .logo-svg{ filter:brightness(0); } /* 白いロゴを印刷用に黒くする */
  .head p{ color:#555; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .ph{ background:none; }
  article{ break-inside:avoid; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }