/* =========================================================
  common.css  (Hirado Kaijyo Hotel)
  ---------------------------------------------------------
  POLICY
  1) Hero background image is NOT defined in common.css.
     Each page must set it via inline CSS, e.g.
       .hero{ --hero-bg-image: url("image/xxx.jpg"); }
  2) English subtitle (e.g. News / Cuisine / Rooms) is GOLD.
  3) Language topbar / main navigation / hamburger can be tuned
     centrally via CSS variables in :root.
  4) Footer layout is owned by common.css. Background image is optional
     via --footer-bg-image.

  QUICK EDIT (global)
   - Gold:            --gold
   - Kicker color:    --subtitle-en
   - Header:          --header-bg / --header-border
   - Hamburger:       --hamburger-* / --drawer-bg
   - Language topbar: --langbar-* / --langbtn-*
   - Footer image:    --footer-bg-image

========================================================= */

/* === Block A: unified styles === */

/* common.css - generated from restyled pages */

/* === from restyled_index.html === */
/* News内の控えめな重要告知（美観を崩さない薄いカード） */
@media (max-width: 520px){
  .noticeText{ font-size: 13.5px; }
  .noticeInner{ padding: 13px 14px; }
}
/* Header *//* Mobile drawer *//* Drawer open state *//* Hero *//* Cards & grids *//* Pet icon sizing (修正点：犬の写真を250×250に) *//* Footer *//* Responsive */
@media (max-width: 1100px){
      .foodGrid{grid-template-columns: repeat(2, 1fr)}
      .newsGrid{grid-template-columns: 1fr}
    }
@media (max-width: 860px){
      .nav{display:none}
      .hamburger{display:inline-flex}
      .brand img{width:190px}
      .hero{min-height:72vh}
      .roomGrid{grid-template-columns: 1fr}
      .footGrid{grid-template-columns: 1fr}
    }
@media (max-width: 520px){
      .container{width: min(var(--w), calc(100% - 28px))}
      .heroBox{padding:18px}
      .heroTitle{letter-spacing:.08em}
      .btn{width:100%}
      .petIconWrap img{width:250px; height:250px}
    }

  /* スペシャル会席プランカード */

@media (max-width: 720px){
  .planInner{
    grid-template-columns: 1fr;
    padding: 14px 14px;
  }
  .planMedia{
    aspect-ratio: 16 / 9;
  }
}

    /* =========================
      Back to Top（ページ最上部へ戻るボタン）
      - 一定スクロールで表示
      - クリックで滑らかに上へ
    ========================= */
@media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .toTop{ transition: none; }
    }

/* === from restyled_index.html === */
/* -----------------------------------------
  重要告知（寒波・ボイラー不調）
----------------------------------------- */

@media (max-width: 520px){
  .noticeInner{ padding: 13px 14px; }
  .noticeText{ font-size: 13.5px; }
}

/* -----------------------------------------
  スペシャル会席プラン（ペットカードとの間を約20px）
----------------------------------------- */
.planCard{
  position: relative;
  margin-top: 20px; /* ★ ここで「ペット同伴プラン」との間を確保 */
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .18s ease;
}

@media (max-width: 720px){
  .planInner{
    grid-template-columns: 1fr;
    padding: 14px 14px;
  }
  .planMedia{
    aspect-ratio: 16 / 9;
  }
}

/* === from restyled_access.html === */

    .kicker{font-family:"Noto Serif JP", serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(200,176,106,.95); font-size:.82rem}
/* News内の控えめな重要告知（美観を崩さない薄いカード） */
@media (max-width: 520px){
  .noticeText{ font-size: 13.5px; }
  .noticeInner{ padding: 13px 14px; }
}
/* Header *//* Mobile drawer *//* Drawer open state *//* Hero *//* Cards & grids *//* Pet icon sizing (修正点：犬の写真を250×250に) *//* Footer *//* Responsive */
@media (max-width: 1100px){
      .foodGrid{grid-template-columns: repeat(2, 1fr)}
      .newsGrid{grid-template-columns: 1fr}
    }
@media (max-width: 860px){
      .nav{display:none}
      .hamburger{display:inline-flex}
      .brand img{width:190px}
      .hero{min-height:72vh}
      .roomGrid{grid-template-columns: 1fr}
      .footGrid{grid-template-columns: 1fr}
    }
@media (max-width: 520px){
      .container{width: min(var(--w), calc(100% - 28px))}
      .heroBox{padding:18px}
      .heroTitle{letter-spacing:.08em}
      .btn{width:100%}
      .petIconWrap img{width:250px; height:250px}
    }

  /* スペシャル会席プランカード */
.planCard{
  position: relative;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 720px){
  .planInner{
    grid-template-columns: 1fr;
    padding: 14px 14px;
  }
  .planMedia{
    aspect-ratio: 16 / 9;
  }
}

    /* =========================
      Back to Top（ページ最上部へ戻るボタン）
      - 一定スクロールで表示
      - クリックで滑らかに上へ
    ========================= */
@media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .toTop{ transition: none; }
    }

    /* =========================
      Topics Card（お知らせ内）
    ========================= */
    .topicCard{
      position: relative;
      margin-top: 20px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .18s ease, background .18s ease;
    }
    .topicCard:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.075);
    }
    .topicInner{
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 14px;
      padding: 14px 16px;
      align-items: center;
    }
    .topicMedia{
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.10);
      aspect-ratio: 4 / 3;
    }
    .topicMedia img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .topicTitle{
      margin: .35rem 0 0;
      font-size: 1.2rem;
      letter-spacing: .06em;
    }
    .topicLead{
      margin: .7rem 0 0;
      color: rgba(255,255,255,.82);
      line-height: 1.85;
    }
@media (max-width: 720px){
      .topicInner{ grid-template-columns: 1fr; padding: 14px 14px; }
      .topicMedia{ aspect-ratio: 16 / 9; }
    }
    /* =========================
      Access（空港からのアクセス）: Elegant rebuild
      - 2 cards within one parent card
      - semantic <ol> steps + subtle timeline
    ========================= */
    .accessGrid{grid-template-columns: 1fr 1fr}
    .accessCard{
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
      border-color:rgba(255,255,255,.12);
    }
    .routeList{
      list-style:none;
      padding:0;
      margin:16px 0 0;
      display:grid;
      gap:12px;
    }
    .routeItem{
      position:relative;
      padding:14px 14px 14px 16px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      background:rgba(0,0,0,.16);
      overflow:hidden;
    }
    .routeItem::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:3px;
      background:linear-gradient(180deg, rgba(200,176,106,.9), rgba(127,185,185,.85));
      opacity:.42;
    }
    .routeItem.-goal::before{opacity:.75}
    .routeHead{
      font-weight:700;
      letter-spacing:.05em;
    }
    .routeItem .small{margin:.55rem 0 0}
    .routeItem .tagRow{margin-top:10px}
    .ctaRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:18px;
    }
@media (max-width: 1100px){
      .accessGrid{grid-template-columns: 1fr}
    }
    /* =========================
      Tabs（福岡／長崎 切替）
    ========================= */
    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:12px;
      padding:8px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:18px;
      background:rgba(0,0,0,.18);
    }
    .tabBtn{
      appearance:none;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:inherit;
      font:inherit;
      padding:10px 14px;
      border-radius:14px;
      cursor:pointer;
      letter-spacing:.04em;
      transition:transform .12s ease, background .2s ease, border-color .2s ease;
    }
    .tabBtn:hover{transform:translateY(-1px)}
    .tabBtn.is-active{
      background:rgba(200,176,106,.14);
      border-color:rgba(200,176,106,.35);
    }
    .tabPanels{margin-top:12px}
    .tabPanel[hidden]{display:none !important}

    /* =========================
      Meter（所要時間メーター）
    ========================= */
    .meterWrap{margin-top:14px}
    .meterTitle{
      font-weight:700;
      letter-spacing:.06em;
      margin-bottom:10px;
      opacity:.92;
    }
    .meter{
      position:relative;
      height:12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      overflow:hidden;
    }
    .meterBar{
      height:100%;
      width:calc((var(--value) / var(--max)) * 100%);
      background:linear-gradient(90deg, rgba(200,176,106,.85), rgba(127,185,185,.85));
      opacity:.85;
    }
    .meterMeta{
      margin-top:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

/* === from restyled_spa.html === */
:root{
      --bg:#0b1220;
      --surface:#0f172a;
      --card:#111c36;
      --text:#e5e7eb;
      --muted:#cbd5e1;
      --line:rgba(255,255,255,.12);
      --accent:#7dd3fc;
      --accent2:#a5b4fc;
      --hero-default-bg: url("https://www.hiradokaijyohotel.co.jp/_src/19853/7627000100046_20190623233418433.jpg?v=1744134997754");
      --shadow:0 16px 50px rgba(0,0,0,.35);
      --radius:20px;
      --max:1100px;
    }
body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 12% 0%, rgba(125,211,252,.18), transparent 60%),
        radial-gradient(900px 500px at 88% 10%, rgba(165,180,252,.18), transparent 60%),
        linear-gradient(180deg, #061022, var(--bg)),
        url("image/haikei.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      font:16px/1.75 "Noto Serif JP", serif;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
    .topbar{
      position:sticky; top:0; z-index:10;
      background:rgba(6,16,34,.72);
      backdrop-filter: blur(12px);
      border-bottom:1px solid var(--line);
    }
    .topbar .inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:14px 0;
    }
    .brand{
      display:flex; align-items:baseline; gap:10px; text-decoration:none;
    }
    .brand strong{
      font-family:"Noto Serif JP", serif;
      letter-spacing:.02em;
      font-size:18px;
    }
    .brand span{
      color:var(--muted); font-size:13px;
    }
    .actions{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px; border-radius:999px;
      border:1px solid var(--line);
      text-decoration:none;
      background:rgba(255,255,255,.04);
    }
    .btn.primary{
      border-color:rgba(125,211,252,.4);
      background:linear-gradient(135deg, rgba(125,211,252,.18), rgba(165,180,252,.14));
    }

    .hero{padding:36px 0 18px}
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:18px;
      align-items:stretch;
    }
@media (max-width: 900px){
      .heroGrid{grid-template-columns:1fr}
    }
    .heroCard{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .heroMedia{
      position:relative; aspect-ratio: 16/9;
      background:#0a1328;
    }
    .heroMedia img{
      width:100%; height:100%;
      object-fit:cover; display:block;
      filter:saturate(1.05) contrast(1.02);
    }
    .badge{
      position:absolute; left:16px; top:16px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(15,23,42,.72);
      border:1px solid var(--line);
      font-size:12px;
      color:var(--muted);
    }
    .heroBody{padding:18px 18px 16px}
    h1{
      margin:0 0 8px;
      font-family:"Noto Serif JP", serif;
      font-size:34px;
      line-height:1.2;
      letter-spacing:.02em;
    }
    .lead{margin:0 0 14px; color:var(--muted)}
    .chips{
      display:flex; flex-wrap:wrap; gap:10px;
      margin:0; padding:0; list-style:none;
    }
    .chip{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      font-size:13px;
      color:var(--muted);
      text-decoration:none;
    }
    .sideCard{
      padding:18px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .sideTitle{margin:0 0 10px; font-weight:700}
    .note{margin:0; color:var(--muted); font-size:14px}
    .sideList{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px}
    .sideList li{
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(17,28,54,.5);
    }
    .sideList strong{display:block; font-size:14px}
    .sideList span{display:block; font-size:13px; color:var(--muted)}

    .sectionNav{
      margin:18px 0 0;
      display:flex; flex-wrap:wrap; gap:10px;
    }

    .main{padding:10px 0 50px}
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      margin-top:18px;
    }
@media (max-width: 900px){
      .grid{grid-template-columns:1fr}
    }
    .card{
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .media{aspect-ratio: 16/9; background:#0a1328}
    .media img{width:100%; height:100%; object-fit:cover; display:block}
    .body{padding:18px}
    .kicker{
      display:inline-flex; gap:8px; align-items:center;
      font-size:12px;
      color:var(--muted);
      margin-bottom:8px;
    }
    h2{margin:0 0 8px; font-size:20px; letter-spacing:.02em}
    h3{margin:16px 0 8px; font-size:14px; color:var(--muted); font-weight:700}
    .desc{margin:0 0 10px; color:var(--text)}
    .dl{
      margin:0; display:grid; grid-template-columns: 130px 1fr;
      gap:8px 12px;
      padding:12px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(17,28,54,.55);
    }
    .dl dt{color:var(--muted); font-size:13px}
    .dl dd{margin:0; font-size:14px}
    .fine{
      margin:10px 0 0;
      color:var(--muted);
      font-size:13px;
    }

    footer{
      border-top:1px solid var(--line);
      color:var(--muted);
      padding:26px 0;
      background:rgba(6,16,34,.6);
    }
    .foot{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
    }
    .foot a{color:var(--muted); text-decoration:none}
    .foot a:hover{color:var(--text)}

/* === Block B: patch === */

/* ページ固有：SPAの上部余白だけ維持（ボディの見た目はcommon_unified.cssのまま） */
    .pageHero{ padding:36px 0 18px; }
/* 現在地ハイライト（共通CSS側に未実装の場合の保険） */

/* === Block C: latest theme & overrides === */

:root{
      --bg:#0b1110;
      --bg2:#0a1416;
      --card:rgba(255,255,255,.06);
      --card2:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.14);
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.70);
      --soft:rgba(255,255,255,.55);
      --accent:#c8b06a;
      --accent2:#7fb9b9;
      --shadow:0 18px 50px rgba(0,0,0,.45);
      --radius:18px;
      --radius2:26px;
      --w:1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    html{scroll-behavior:smooth}
body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(127,185,185,.18), transparent 60%),
        radial-gradient(900px 480px at 95% 0%, rgba(200,176,106,.16), transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, #081012 100%),
        url("image/haikei.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      font-family:"Noto Serif JP", serif;
      letter-spacing:.02em;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; height:auto; display:block}

    .container{width:min(var(--w), calc(100% - 40px)); margin:0 auto}
    .pill{
      display:inline-flex; align-items:center; gap:.55rem;
      padding:.4rem .8rem;
      border:1px solid var(--line);
      background:rgba(0,0,0,.25);
      border-radius:999px;
      color:var(--muted);
      font-size:.86rem;
      backdrop-filter: blur(10px);
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:.6rem;
      padding:.95rem 1.15rem;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      color:var(--text);
      box-shadow:0 12px 34px rgba(0,0,0,.35);
      transition:transform .15s ease, background .15s ease, border-color .15s ease;
      font-weight:600;
      letter-spacing:.04em;
    }
    .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.10); border-color:rgba(200,176,106,.55)}
    .btn.-primary{
      background:linear-gradient(135deg, rgba(200,176,106,.95), rgba(127,185,185,.85));
      color:#091112;
      border-color:rgba(255,255,255,.08);
      box-shadow:0 18px 55px rgba(0,0,0,.45);
    }
    .btn.-primary:hover{transform:translateY(-1px); filter:saturate(1.05)}
    .btn.-ghost{background:transparent; box-shadow:none}
    .btn.-ghost:hover{background:rgba(255,255,255,.08)}
    .grid{display:grid; gap:18px}
    .card{
      background:linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
      border:1px solid var(--line);
      border-radius:var(--radius2);
      box-shadow:var(--shadow);
            position:relative;
overflow:hidden;
    }
    .card .inner{padding:22px}
    .kicker{font-family:"Playfair Display", serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(200,176,106,.95); font-size:.82rem}
    .h2{
      margin:.35rem 0 0;
      font-size:clamp(1.45rem, 2.2vw, 2.05rem);
      letter-spacing:.06em;
      font-weight:700;
    }
    .lead{margin:.75rem 0 0; color:var(--muted); line-height:1.95}
    .section{padding:56px 0}
    .section.-tight{padding:42px 0}
    .hr{
      height:1px; width:100%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
      margin:22px 0;
    }
/* News内の控えめな重要告知（美観を崩さない薄いカード） */
.noticeCard{
  margin: 14px 0 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
}

.noticeInner{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
}

.noticeBadge{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  margin-top: 2px;
}

.noticeText{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,.86);
}

@media (max-width: 520px){
  .noticeText{ font-size: 13.5px; }
  .noticeInner{ padding: 13px 14px; }
}
/* Header */
    .topbar{
      border-bottom:1px solid rgba(255,255,255,.08);
      background:rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
    }
    .topbar .container{
      display:flex; align-items:center; justify-content:flex-end;
      gap:16px; padding:8px 0;
      font-size:.86rem; color:var(--muted);
    }
    .lang a{padding:.1rem .45rem; border-radius:999px}
    .lang a:hover{background:rgba(255,255,255,.08); color:var(--text)}

    .header{
      position:sticky; top:0; z-index:60;
      background:rgba(9,13,14,.68);
      backdrop-filter: blur(14px);
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .header .container{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:14px;
      min-width: 220px;
    }
    .brand img{width:210px; height:auto}
    .brand .name{display:flex; flex-direction:column; gap:2px}
    .brand .name strong{font-weight:700; letter-spacing:.06em}
    .brand .name span{color:var(--soft); font-size:.86rem}

    .nav{
      display:flex; align-items:center; gap:16px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.05em;
      white-space:nowrap;
    }
    .nav a{padding:.45rem .55rem; border-radius:12px}
    .nav a:hover{background:rgba(255,255,255,.08); color:var(--text)}
    .headerActions{display:flex; align-items:center; gap:10px}
/* Mobile drawer */
    .hamburger{
      display:none;
      width:46px; height:42px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      align-items:center; justify-content:center;
      cursor:pointer;
    }
    .hamburger span{
      display:block; width:18px; height:2px;
      background:rgba(255,255,255,.80);
      position:relative;
    }
    .hamburger span::before,.hamburger span::after{
      content:""; position:absolute; left:0;
      width:18px; height:2px; background:rgba(255,255,255,.80);
    }
    .hamburger span::before{top:-6px}
    .hamburger span::after{top:6px}

    .drawerBackdrop{
      position:fixed; inset:0;
      background:rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      opacity:0; pointer-events:none;
      transition:opacity .18s ease;
      z-index:80;
    }
    .drawer{
      position:fixed; right:0; top:0; height:100%; width:min(420px, 92vw);
      background:linear-gradient(180deg, rgba(10,18,18,.96), rgba(8,16,18,.98));
      border-left:1px solid rgba(255,255,255,.10);
      transform:translateX(105%);
      transition:transform .22s ease;
      z-index:90;
      display:flex; flex-direction:column;
    }
    .drawerHeader{
      padding:18px 18px 12px;
      display:flex; align-items:center; justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .drawerHeader .title{
      display:flex; flex-direction:column; gap:2px;
/* 修正点：Menu画面の英字重なりを避け、日本語のみ表示 */
    }
    .drawerHeader .title strong{letter-spacing:.08em}
    .drawerHeader .title span{color:var(--soft); font-size:.86rem}
    .drawerClose{
      width:44px; height:40px; border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      cursor:pointer;
      display:grid; place-items:center;
    }
    .drawerClose:before{
      content:"×";
      font-size:1.35rem;
      line-height:1;
      color:rgba(255,255,255,.85);
    }
    .drawerBody{padding:14px 18px 18px; overflow:auto}
    .drawerNav{display:grid; gap:10px; margin-top:8px}
    .drawerNav a{
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:var(--text);
      font-weight:700;
      letter-spacing:.05em;
    }
    .drawerNav a:hover{background:rgba(255,255,255,.09); border-color:rgba(200,176,106,.55)}
    .drawerCta{margin-top:14px; display:grid; gap:10px}
/* Drawer open state */
    body.-drawerOpen{overflow:hidden}
    body.-drawerOpen .drawerBackdrop{opacity:1; pointer-events:auto}
    body.-drawerOpen .drawer{transform:translateX(0)}
/* Hero */
    .hero{
      position:relative;
      min-height:78vh;
      display:flex; align-items:flex-end;
      padding:34px 0 46px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background-image:
        linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.82) 100%),
        var(--hero-bg, var(--hero-default-bg));
      background-position: center, center;
      background-size: cover, cover;
      background-repeat: no-repeat, no-repeat;
      transform:scale(1.02);
      filter:saturate(1.02) contrast(1.02);
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1200px 520px at 15% 20%, rgba(127,185,185,.22), transparent 62%),
        radial-gradient(900px 520px at 85% 15%, rgba(200,176,106,.22), transparent 58%);
      pointer-events:none;
      mix-blend-mode: screen;
      opacity:.75;
    }
    .hero .container{position:relative; z-index:2}
    .heroBox{
      max-width:780px;
      padding:22px 22px 18px;
      border-radius:var(--radius2);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(0,0,0,.30);
      backdrop-filter: blur(10px);
      box-shadow:0 22px 70px rgba(0,0,0,.55);
    }
    .heroTitle{
      margin:10px 0 0;
      font-size:clamp(2.05rem, 3.2vw, 3.15rem);
      letter-spacing:.10em;
      line-height:1.2;
      font-weight:700;
    }
    .heroSub{
      margin:.75rem 0 0;
      color:rgba(255,255,255,.78);
      line-height:1.95;
    }
    .heroMeta{
      display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
      align-items:center;
    }
    .heroMeta .note{
      color:rgba(255,255,255,.70);
      font-size:.92rem;
      letter-spacing:.06em;
    }
    .heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
/* Cards & grids */
    .newsGrid{grid-template-columns: 1.3fr .9fr}
    .foodGrid{grid-template-columns: repeat(4, 1fr)}
    .roomGrid{grid-template-columns: repeat(3, 1fr)}
    .thumb{
      aspect-ratio: 4/3;
      background:rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.10);
      overflow:hidden;
    }
    .thumb img{width:100%; height:100%; object-fit:cover}
    .tagRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .small{font-size:.92rem; color:var(--muted); line-height:1.85}
/* Pet icon sizing (修正点：犬の写真を250×250に) */
    .petIconWrap{
      width:250px; max-width:100%;
      margin:0 auto;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      overflow:hidden;
      box-shadow:0 16px 42px rgba(0,0,0,.35);
    }
    .petIconWrap img{width:250px; height:250px; object-fit:cover}
/* Footer */
    .footer{
      padding:40px 0 30px;
      border-top:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
    }
    .footGrid{grid-template-columns: 1.2fr .8fr}
    .footLinks{display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-weight:600}
    .footLinks a{padding:.35rem .55rem; border-radius:12px}
    .footLinks a:hover{background:rgba(255,255,255,.08); color:var(--text)}
    .copyright{
      margin-top:16px;
      color:rgba(255,255,255,.55);
      font-size:.86rem;
      letter-spacing:.05em;
    }
/* Responsive */
@media (max-width: 1100px){
      .foodGrid{grid-template-columns: repeat(2, 1fr)}
      .newsGrid{grid-template-columns: 1fr}
    }
@media (max-width: 860px){
      .nav{display:none}
      .hamburger{display:inline-flex}
      .brand img{width:190px}
      .hero{min-height:72vh}
      .roomGrid{grid-template-columns: 1fr}
      .footGrid{grid-template-columns: 1fr}
    }
@media (max-width: 520px){
      .container{width: min(var(--w), calc(100% - 28px))}
      .heroBox{padding:18px}
      .heroTitle{letter-spacing:.08em}
      .btn{width:100%}
      .petIconWrap img{width:250px; height:250px}
    }

  /* スペシャル会席プランカード */
.planCard{
  position: relative;
  margin-top: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
}

.planInner{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}

.planMedia{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  aspect-ratio: 4 / 3;
}

.planMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.planTitle{
  margin: .35rem 0 0;
  font-size: 1.2rem;
  letter-spacing: .06em;
}

.planLead{
  margin: .7rem 0 0;
  color: rgba(255,255,255,.82);
  line-height: 1.85;
}

.tagPill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

.planCard:hover{
  transform: translateY(-1px);
}

@media (max-width: 720px){
  .planInner{
    grid-template-columns: 1fr;
    padding: 14px 14px;
  }
  .planMedia{
    aspect-ratio: 16 / 9;
  }
}

    /* =========================
      Back to Top（ページ最上部へ戻るボタン）
      - 一定スクロールで表示
      - クリックで滑らかに上へ
    ========================= */
    .toTop{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 95;

      width: 46px;
      height: 46px;
      border-radius: 999px;

      display: grid;
      place-items: center;

      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.28);
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      cursor: pointer;
      user-select: none;

      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .toTop:hover{
      background: rgba(0,0,0,.38);
      border-color: rgba(200,176,106,.55);
      transform: translateY(7px);
    }
    .toTop.is-visible{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .toTop svg{
      width: 18px;
      height: 18px;
      fill: none;
      stroke: rgba(255,255,255,.92);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
@media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .toTop{ transition: none; }
    }

/* Active nav state (current page highlight) */
.nav a.-active,
.drawerNav a.-active{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

/* =========================
   Mobile fixes (override)
   - ハンバーガーメニューの視認性／レイアウト崩れ対策
   - 既存CSSを壊さず、末尾の上書きで調整
========================= */
@media (max-width: 520px){
  /* ヘッダー内ボタンが100%幅指定になっても崩れないように上書き */
  .headerActions .btn{ width:auto; }
  .headerActions{ gap:8px; flex-wrap:nowrap; }

  /* ロゴが横幅を取りすぎてハンバーガーが押し出されるのを防ぐ */
  .brand{ min-width:0; }
  .brand img{ width:170px; }

  /* ハンバーガーを少し濃く・コントラストUP */
  .hamburger{
    width:44px;
    height:40px;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.22);
  }
  .hamburger span,
  .hamburger span::before,
  .hamburger span::after{
    background:rgba(255,255,255,.92);
  }

  /* 本文側のボタンは引き続き押しやすく（必要箇所だけ100%） */
  .heroActions .btn,
  .drawerCta .btn{ width:100%; }
}

/* === Page: Rooms (room.html) === */
/* room.css
   - common.css を主役にし、客室ページ固有の差分だけを記述します。
*/

.roomIntro{ margin-top: 18px; }
.roomFilters h3{ margin-top: 14px; }

.roomPage button.chip{
  appearance:none;
  cursor:pointer;
  font-family: inherit;
  line-height: 1;
}

.roomTitle{
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: .02em;
}

.roomBanner{ margin-top: 22px; }
.roomBannerMedia{ aspect-ratio: 4/1.05; }
.roomBannerLink{ display:block; width:100%; height:100%; }
.roomBannerLink img{ width:100%; height:100%; object-fit:cover; display:block; }

.roomBottom{ margin-top: 18px; }

/* カード内のCTAの並びを美しく（common.css の .ctaRow を微調整） */
.roomPage .ctaRow{ align-items:center; }

@media (max-width: 520px){
  .roomBannerMedia{ aspect-ratio: 16/6; }
  .roomTitle{ font-size: 17px; }
}

/* =========================================================
   Patch: Multi-language sub menu (emoji flags)
   - 使うページだけ <body class="hasTopbar"> を付けてください。
   - 例: <div class="topbar topbar-lang"><div class="container"><div class="lang-flags">...</div></div></div>
========================================================= */
:root{ --langbar-h: 44px; }

/* 言語バー（ヘッダーより上） */
.topbar.topbar-lang{
  position: sticky;
  top: 0;
  z-index: 100; /* .header(=60) より上に表示 */
}
.topbar.topbar-lang .container{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-height: var(--langbar-h);
  padding: 6px 0;
}

/* 絵文字フラグボタン */
.topbar.topbar-lang .lang-flags{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.topbar.topbar-lang .langBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.18);
  text-decoration:none;
  font-size:18px;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.topbar.topbar-lang .langBtn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.28);
}
.topbar.topbar-lang .langBtn.is-active{
  border-color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.35);
}
.topbar.topbar-lang .langBtn:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}

/* 言語バーがあるページでは、stickyヘッダーを下げて重なりを防止 */
body.hasTopbar .header{
  top: var(--langbar-h);
}
/* 万一、別名ヘッダーがある場合の保険 */
body.hasTopbar .siteHeader,
body.hasTopbar .site-header{
  top: var(--langbar-h);
}



/* =========================
   Auto-hide language topbar on scroll down
   - body に -langbarHidden が付いたら退避
========================= */
.topbar.topbar-lang{
  will-change: transform, opacity;
  transition: transform .22s ease, opacity .22s ease;
}
body.-langbarHidden .topbar.topbar-lang{
  transform: translateY(calc(-1 * var(--langbar-h)));
  opacity: 0;
  pointer-events: none;
}
/* 言語バーが隠れている間は、ヘッダーを top:0 に戻す（gap防止） */
body.hasTopbar.-langbarHidden .header{
  top: 0;
}

/* 動きが苦手な方への配慮 */
@media (prefers-reduced-motion: reduce){
  .topbar.topbar-lang{ transition: none; }
}

/* 画面読み上げ用（必要なら使ってください） */
.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;
  white-space:nowrap!important;
  border:0!important;
}

/* =========================================================
   Common Overrides (Project policy)
   - Hero background image MUST be page-owned (inline CSS or page CSS).
     common.css only controls layout + overlay.
   - English subtitles (.kicker) are unified to GOLD.
   - Language topbar + main nav + hamburger are controlled via CSS variables.
   - News cards spacing: keep cards from touching (gap ~20px).
   - Footer layout is common.css-owned; footer background image is optional via variable.
========================================================= */

:root{
  /* Brand accent (Gold) */
  --gold: rgba(200,176,106,.95);
  --subtitle-en: var(--gold);

  /* Hero fallback image (only if a page does not set --hero-bg / --hero-bg-image) */
  --hero-default-bg: url("image/haikei.jpg");

  /* Language topbar (multi-language menu) */
  --langbar-h: 44px;
  --langbar-bg: rgba(8, 12, 16, .72);
  --langbar-border: rgba(255,255,255,.10);

  --langbtn-bg: rgba(255,255,255,.06);
  --langbtn-border: rgba(255,255,255,.14);
  --langbtn-hover-bg: rgba(255,255,255,.10);
  --langbtn-active-border: var(--gold);

  /* Header / Navigation */
  --header-bg: rgba(9,13,14,.68);
  --header-border: rgba(255,255,255,.10);
  --nav-hover-bg: rgba(255,255,255,.08);

  /* Hamburger / Drawer */
  --hamburger-bg: rgba(255,255,255,.06);
  --hamburger-border: rgba(255,255,255,.14);
  --hamburger-bar: rgba(255,255,255,.92);
  --drawer-bg: linear-gradient(180deg, rgba(10,18,18,.96), rgba(8,16,18,.98));

  /* Footer */
  --footer-bg-image: none;
  --footer-ov-1: rgba(0,0,0,.20);
  --footer-ov-2: rgba(0,0,0,.78);
}

/* --- English subtitle (kicker) --- */
.kicker{ color: var(--subtitle-en) !important; }

/* --- Hero: do NOT hard-code background-image here --- */
/* If your page uses: .hero{ --hero-bg: url("..."); }  it will render automatically. */
.hero::before{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.82) 100%),
    var(--hero-bg, var(--hero-bg-image, var(--hero-default-bg)));
}

/* --- News cards spacing (avoid touching) --- */
.grid.newsGrid{ gap: 20px !important; }
.noticeCard{ margin-top: 20px; }

/* --- Language topbar --- */
.topbar.topbar-lang{
  background: var(--langbar-bg);
  border-bottom: 1px solid var(--langbar-border);
}
.langBtn{
  background: var(--langbtn-bg);
  border: 1px solid var(--langbtn-border);
}
.langBtn:hover{ background: var(--langbtn-hover-bg); }
.langBtn[aria-current="page"],
.langBtn.is-active{
  border-color: var(--langbtn-active-border);
}

/* --- Header / Nav / Hamburger --- */
.header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}
.nav a:hover{ background: var(--nav-hover-bg); }

.hamburger{
  background: var(--hamburger-bg);
  border-color: var(--hamburger-border);
}
.hamburger span,
.hamburger span::before,
.hamburger span::after{
  background: var(--hamburger-bar);
}
.drawer{ background: var(--drawer-bg); }

/* --- Footer layout (common) --- */
.footer{
  position: relative;
  overflow: hidden;
}
.footer::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, var(--footer-ov-1), var(--footer-ov-2)),
    var(--footer-bg-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  z-index: 0;
  pointer-events: none;
}
.footer .inner,
.footer .container{ position: relative; z-index: 1; }