img { max-width: 100%; height: auto; }
  :root {
    --night: #14182b;
    --night-2: #1c2140;
    --moon: #f3e9c6;
    --moon-dim: #c9bf9d;
    --text: #ece8dc;
    --muted: #a9a8b5;
    --line: rgba(243, 233, 198, 0.18);
    --accent: #e0b651;
    --paper: #f7f3e8;
    --ink: #22212b;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--night);
    color: var(--text);
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    -webkit-text-size-adjust: 100%;
  }
  img { max-width: 100%; display: block; }
  a { color: var(--accent); }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

  /* header */
  .bar {
    position: sticky; top: 0; z-index: 10;
    background: rgba(20, 24, 43, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  .bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
  .logo img { width: 36px; height: 36px; border-radius: 50%; }
  .logo { display: flex; align-items: center; gap: 10px; font-family: "Noto Serif JP", serif; font-size: 20px; color: var(--moon); text-decoration: none; letter-spacing: .08em; white-space: nowrap; }
  .bar nav { display: flex; gap: 18px; font-size: 14px; }
  .bar nav a { color: var(--muted); text-decoration: none; }
  .bar nav a:hover { color: var(--moon); }
  .tel-btn {
    background: var(--accent); color: var(--night); font-weight: 700;
    padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; white-space: nowrap;
  }
  @media (max-width: 720px) { .bar nav { display: none; } }

  /* hero */
  .hero {
    position: relative; overflow: hidden;
    padding: 96px 0 88px;
    background:
      linear-gradient(90deg, rgba(20,24,43,.94) 0%, rgba(20,24,43,.78) 55%, rgba(20,24,43,.35) 100%),
      url(images/hero.jpg) center 40% / cover no-repeat, var(--night);
  }
  .hero .eyebrow { color: var(--moon-dim); font-size: 14px; letter-spacing: .2em; margin: 0 0 12px; }
  .hero h1 {
    font-family: "Noto Serif JP", serif; font-weight: 700; color: var(--moon);
    font-size: clamp(34px, 7vw, 60px); line-height: 1.3; margin: 0 0 18px; letter-spacing: .06em;
  }
  .hero h1 small { display: block; font-size: .42em; color: var(--text); letter-spacing: .12em; margin-top: 6px; }
  .hero .lead { max-width: 36em; color: var(--text); margin: 0 0 28px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
  .chips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 14px; color: var(--moon); }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border-radius: 10px; text-decoration: none; font-weight: 700; min-height: 48px;
  }
  .btn.primary { background: var(--accent); color: var(--night); }
  .btn.ghost { border: 1px solid var(--moon-dim); color: var(--moon); }

  /* sections */
  section { padding: 72px 0; border-top: 1px solid var(--line); }
  h2 {
    font-family: "Noto Serif JP", serif; color: var(--moon); font-size: clamp(24px, 4.5vw, 32px);
    margin: 0 0 8px; letter-spacing: .06em;
  }
  .sub { color: var(--muted); margin: 0 0 36px; }

  .dishes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  @media (max-width: 860px) { .dishes { grid-template-columns: 1fr; } }
  .dish { background: var(--night-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .photo {
    aspect-ratio: 4 / 3; background: #262b4d center / cover no-repeat;
    display: flex; align-items: flex-end;
  }
  .photo span { font-size: 12px; color: var(--muted); padding: 8px 12px; }
  .dish .body { padding: 20px 22px 24px; }
  .dish h3 { font-family: "Noto Serif JP", serif; color: var(--moon); font-size: 21px; margin: 0 0 8px; }
  .dish p { margin: 0 0 10px; }
  .dish .note { font-size: 14px; color: var(--muted); margin: 0; }

  .gallery { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
  @media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); } .gallery figure:first-child { grid-column: 1 / -1; } }
  .gallery figure { margin: 0; }
  .gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
  .gallery figure:first-child img { aspect-ratio: auto; height: 100%; max-height: 420px; }
  .gallery figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .floor { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 12px; }
  @media (max-width: 860px) { .floor { grid-template-columns: 1fr 1fr; } .floor img:first-child { grid-column: 1 / -1; } }
  .floor img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
  .floor img:first-child { aspect-ratio: auto; max-height: 520px; }
  .room-sub { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
  .room-sub img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
  .front { margin: 24px 0 0; }
  .front img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; }
  .front figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .room { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 32px; align-items: center; }
  @media (max-width: 860px) { .room { grid-template-columns: minmax(0,1fr); } }
  .room .photo { border-radius: 14px; aspect-ratio: 16 / 10; }
  .facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
  .facts li { background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
  .facts b { display: block; font-family: "Noto Serif JP", serif; color: var(--moon); font-size: 22px; }
  .facts small { color: var(--muted); font-size: 13px; }

  /* menu & course on paper */
  .paper { background: var(--paper); color: var(--ink); }
  .paper h2 { color: var(--ink); }
  .paper .sub { color: #6b6875; }
  .courses { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-bottom: 48px; }
  @media (max-width: 860px) { .courses { grid-template-columns: 1fr; } }
  .course { background: #fff; border: 1px solid #e3dccb; border-radius: 14px; padding: 22px; }
  .course h3 { margin: 0 0 4px; font-family: "Noto Serif JP", serif; font-size: 19px; }
  .price { font-size: 26px; font-weight: 700; color: #8a5a00; margin: 0 0 6px; }
  .price small { font-size: 14px; color: #6b6875; font-weight: 500; }
  .course p { margin: 0; font-size: 15px; }
  .menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 48px; }
  @media (max-width: 720px) { .menu { grid-template-columns: 1fr; } }
  .menu h3 { grid-column: 1 / -1; margin: 24px 0 4px; font-family: "Noto Serif JP", serif; font-size: 18px; border-bottom: 1px solid #d8d0bc; padding-bottom: 4px; }
  .item { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted #d8d0bc; padding: 6px 0; }
  .item span:last-child { white-space: nowrap; }
  .fine { font-size: 13px; color: #6b6875; margin-top: 20px; }

  /* faq */
  details { border-bottom: 1px solid var(--line); padding: 16px 0; }
  summary { cursor: pointer; font-weight: 700; color: var(--moon); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "＋"; color: var(--accent); }
  details[open] summary::after { content: "－"; }
  details p { margin: 10px 0 0; }

  /* access */
  .info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  @media (max-width: 860px) { .info { grid-template-columns: 1fr; } }
  dl { margin: 0; display: grid; grid-template-columns: 7em 1fr; gap: 10px 16px; }
  dt { color: var(--muted); }
  dd { margin: 0; }
  .map { border: 0; width: 100%; height: 320px; border-radius: 14px; background: var(--night-2); }

  footer { padding: 36px 0 96px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); text-align: center; }

  .float-tel {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20;
    display: none; text-align: center;
  }
  @media (max-width: 720px) { .float-tel { display: block; } .float-tel .btn { width: 100%; box-shadow: 0 6px 20px rgba(0,0,0,.35); } }
  img.photo { width: 100%; height: auto; object-fit: cover; display: block; }
  .more-links a { margin-left: 1em; }