/* ═══════════════════════════════════════════════════════════
   shared.css — HOTEL PATINA ISHIGAKIJIMA ゲストポータル
   共通スタイル・デザイントークン
   全ページで <link rel="stylesheet" href="[../]shared.css"> として読み込む
   ページ固有の変数・スタイルは各ページの <style> タグで上書き可能
═══════════════════════════════════════════════════════════ */

/* ── デザイントークン（CSS変数） ──────────────────────────── */
:root {
  /* ブランドカラー */
  --sky:      #29b6f6;
  --sky-d:    #0288d1;
  --sky-l:    #b3e5fc;
  --sky-pale: #e1f5fe;
  --teal:     #00bcd4;
  --coral:    #ff7043;
  --coral-l:  #ffccbc;
  --sun:      #ffab40;
  --sun-l:    #fff3e0;
  --sand:     #f5e6c8;
  --sand-l:   #fdf8f0;
  --green:    #26a69a;
  --white:    #ffffff;
  --ink:      #1a2a3a;
  --gray:     #2d3748;
  --muted:    #6b7a8d;
  --border:   #e2eef5;
  --bg:       #f7fbff;

  /* フェリーカラー */
  --ferry-ykf:  #0055CC;
  --ferry-anei: #DD5500;
  --ferry-sea:  #005580;

  /* シェイプ */
  --r:    16px;
  --r-sm: 10px;
  --r-lg: 24px;

  /* シャドウ */
  --sh:    0 4px 24px rgba(0,100,160,.10);
  --sh-sm: 0 2px 10px rgba(0,100,160,.07);
  --sh-lg: 0 12px 48px rgba(0,100,160,.14);
}

/* ── リセット ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img {
  max-width: 100%;
}

/* ── アクセシビリティ ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--sky-d, #0288d1);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Hamburger Menu ─────────────────────────────────────── */
.menu-btn{background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.mobile-menu{position:fixed;inset:0;z-index:500;pointer-events:none}
.mobile-menu.open{pointer-events:all}
.mm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:.3s}
.mobile-menu.open .mm-backdrop{opacity:1}
.mm-panel{position:absolute;right:0;top:0;bottom:0;width:280px;background:white;transform:translateX(100%);transition:.3s;padding:20px;overflow-y:auto}
.mobile-menu.open .mm-panel{transform:translateX(0)}
.mm-close{background:none;border:1px solid var(--border);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px;float:right;margin-bottom:16px}
.mm-logo{padding:8px 0;text-align:center}
.mm-logo-img{height:44px;width:auto;max-width:100%;display:block;margin:0 auto 4px}
.mm-logo .en{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700}
.mm-logo .ja{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Subpage Header (全サブページ共通) ── */
header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:var(--sh-sm)}
.hinner{max-width:1200px;margin:0 auto;display:flex;align-items:center;padding:0 12px;height:72px;gap:12px;min-width:0}
.hlogo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.hdiv{width:1px;height:22px;background:var(--border);flex-shrink:0}
.hpage{font-size:12px;font-weight:700;color:var(--sky-d);letter-spacing:.3px;white-space:nowrap;flex-shrink:0}
.hsp{flex:1;min-width:0}
#clock{font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
@media(max-width:480px){.hinner{gap:6px;padding:0 10px}}

/* ── Shared logo utilities ── */
.site-logo-icon{height:34px;width:auto;max-width:none;flex-shrink:0;display:block}
.site-logo-wordmark{height:20px;width:auto;max-width:none;flex-shrink:0;display:block}
/* Portal horizontal logo (アートボード 3) — used in all page headers */
.site-logo-h-img{height:52px;width:auto;max-width:none;flex-shrink:0;display:block}
.hlogo-img{height:28px;width:auto;max-width:none;flex-shrink:0}
.hotel-logo-img{height:36px;width:auto;max-width:none;flex-shrink:0}
/* Hotel brand logos */
.hotel-logo-h-img{height:38px;width:auto;flex-shrink:0}
.hotel-logo-v-img{height:120px;width:auto;display:block;margin:0 auto}
.hotel-logo-sq-img{height:52px;width:auto;border-radius:10px}
.mm-divider{height:1px;background:var(--border);margin:12px 0}
.mm-nav{display:flex;flex-direction:column;gap:2px}
.mm-nav a{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:var(--r-sm);font-size:15px;font-weight:600;color:var(--ink);transition:.2s}
.mm-nav a:hover,.mm-nav a.active{background:var(--sky-pale);color:var(--sky-d)}
.mi{font-size:20px;width:28px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.mm-tel{margin-top:16px;padding:14px;background:var(--sand-l);border-radius:var(--r-sm)}
.mm-tel-label{font-size:10px;color:var(--muted);margin-bottom:4px}
.mm-tel a{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--ink)}

/* ── Site Footer (全ページ共通) ────────────────────────── */
.site-footer{position:relative;background-size:cover;background-position:center top;background-repeat:no-repeat}
.site-footer::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.60);pointer-events:none}
.sf-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:40px 20px 24px}
.sf-top{display:flex;flex-direction:column;gap:24px;margin-bottom:20px}
.sf-hotel-link{display:inline-block;background:rgba(255,255,255,.97);border-radius:14px;padding:12px 20px 10px;box-shadow:0 4px 20px rgba(0,0,0,.12);text-decoration:none;margin-bottom:10px}
.sf-hotel-logo{height:38px;width:auto;display:block}
.sf-hotel-cta{display:block;text-align:center;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#bc9a6a}
.sf-address{font-size:12px;color:var(--muted);line-height:1.8}
.sf-address a{color:var(--muted)}
.sf-nav{display:flex;flex-wrap:wrap;gap:8px}
.sf-nav a{font-size:12px;padding:5px 12px;border:1px solid var(--border);border-radius:20px;color:var(--ink);text-decoration:none;transition:.2s;background:rgba(255,255,255,.8)}
.sf-nav a:hover{background:var(--sky-pale);border-color:var(--sky-l);color:var(--sky-d)}
.sf-disclaimer{font-size:11px;color:var(--muted);line-height:1.8;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:12px;text-align:center}
.sf-disclaimer a{color:var(--sky-d);text-decoration:none}
.sf-disclaimer a:hover{text-decoration:underline}
.sf-copy{font-size:11px;color:var(--muted);text-align:center}
@media(min-width:640px){.sf-top{flex-direction:row;justify-content:space-between;align-items:flex-start}}
@media(max-width:640px){.site-footer{padding-bottom:calc(54px + env(safe-area-inset-bottom))}}

/* ── Clock Strip (mobile, above bottom nav) ─────────────── */
.clock-strip{display:none;position:fixed;bottom:calc(54px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;pointer-events:none;z-index:190}
@media(max-width:640px){.clock-strip{display:block}}
.clock-chip{display:inline-block;background:rgba(26,42,58,.78);color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;padding:3px 14px;border-radius:20px;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}