/* ============================================================
   神戸テラス 三宮駅前店 - Kobe Terrace Sannomiya
   Bright group-dining theme. VARIANCE 6 / MOTION 4 / DENSITY 4
   Theme lock: light, whole page. Accent lock: deep tomato.
   Radius lock: 20px everywhere (small elements read as pills).
   Accent note: #b3372a is dark enough to serve BOTH as a surface
   (white ink on it) and as text on every background used here,
   so no second accent token is needed.
   ============================================================ */

:root {
  --bg: #fbfaf8;
  --bg-2: #f3efe9;
  --bg-3: #ebe5dc;
  --line: rgba(38, 33, 30, 0.14);
  --text: #26211e;
  --muted: #5f564f;
  --accent: #b3372a;
  --accent-hover: #932a1f;
  --accent-ink: #ffffff;
  --warn: #8a5a00;
  --r: 20px;
  --font-display: "Kiwi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "M PLUS 1p", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(251, 250, 248, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap { width: 100%; display: flex; align-items: center; gap: 1.75rem; }

.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a { color: var(--muted); transition: color 0.25s; }
.nav-links a:hover { color: var(--accent); }

.lang { display: flex; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; }
.lang a {
  padding: 0.3rem 0.6rem;
  border-radius: var(--r);
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.lang a:hover { color: var(--accent); }
.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s, background 0.25s, border-color 0.25s;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost { border-color: var(--line); color: var(--text); background: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.nav .btn { padding: 0.55rem 1.2rem; font-size: 0.9rem; }

/* ---------- Hero: image mosaic left, copy right ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 6fr 6fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding: calc(var(--nav-h) + 2.5rem) clamp(1.25rem, 4vw, 3rem) 3rem;
  max-width: 1180px;
  margin: 0 auto;
}

.hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.75rem;
}

.hero-mosaic img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(1.04) contrast(1.02);
}
.hero-mosaic img:first-child { grid-row: span 2; aspect-ratio: 1 / 2.06; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.4;
  margin-bottom: 1.3rem;
}

.hero-sub { color: var(--muted); max-width: 32em; margin-bottom: 2rem; }

.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- Section shell ---------- */

section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.45;
}
.sec-head p { color: var(--muted); max-width: 42em; margin-top: 0.8rem; }

.note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.2rem;
}

/* ---------- Courses: two comparison cards ---------- */

.courses { background: var(--bg-2); }

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.course {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.course-top {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 1.5rem 1.6rem;
}
.course-top h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.45;
}
.course-top .price {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  margin-top: 0.3rem;
  display: block;
}
.course-top .tax { font-size: 0.85rem; font-weight: 500; }

.course-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }

.course-body .lead { font-weight: 700; }

.incl { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.incl li { display: flex; gap: 0.7rem; align-items: flex-start; }
.incl li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.85rem; height: 0.85rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  border: 3px solid var(--accent);
}
.incl li.off { color: var(--muted); }
.incl li.off::before { border-color: var(--line); }

.course .flag {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.limit {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.6rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
}
.limit strong { font-size: 1.05rem; }
.limit span { color: var(--muted); }

/* ---------- Private rooms: fact tiles + full image ---------- */

.room-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem;
  background: var(--bg-2);
}
.tile .big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--accent);
  display: block;
}
.tile p { color: var(--muted); font-size: 0.92rem; margin-top: 0.4rem; }

.room-photo img {
  width: 100%;
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(1.04) contrast(1.02);
}

/* ---------- Access: three columns ---------- */

.access { background: var(--bg-2); }

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.access-col h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
}

.hours dt { font-weight: 700; margin-top: 1rem; font-size: 0.92rem; }
.hours dt:first-child { margin-top: 0; }
.hours dd { color: var(--muted); }

.info-list { list-style: none; }
.info-list li { padding: 0.7rem 0; }
.info-list li + li { border-top: 1px solid var(--line); }
.info-list .label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.info-list a.link { color: var(--accent); font-weight: 700; text-decoration: underline; }

.info-actions { margin-top: 1.5rem; }

/* ---------- FAQ: disclosure list ---------- */

.faq-list { border-top: 1px solid var(--line); }

.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 3rem 1.25rem 0;
  font-weight: 700;
  font-size: 1.02rem;
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 0.75rem; top: 1.65rem;
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.faq-list .answer { padding: 0 3rem 1.4rem 0; color: var(--muted); }

/* ---------- Reservation ---------- */

.reserve { background: var(--bg-2); }

.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
  line-height: 1.45;
}
.reserve-copy p { color: var(--muted); max-width: 34em; }

.reserve-alt {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--muted);
}
.reserve-alt a { color: var(--accent); font-weight: 700; text-decoration: underline; }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 700; }

.field input,
.field select {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f564f' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.field input:focus,
.field select:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input::placeholder { color: var(--muted); }

.field .hint { font-size: 0.8rem; color: var(--muted); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.93rem;
}
.form-error.show { display: block; }

.form-ok {
  grid-column: 1 / -1;
  display: none;
  background: var(--bg-3);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
}
.form-ok.show { display: block; }

.form .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- Footer ---------- */

footer {
  padding: 2.75rem 0 3.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}
.foot-links { display: flex; gap: 1.4rem; align-items: center; }
.foot-links a:hover { color: var(--accent); }
.demo-note { margin-top: 1.5rem; font-size: 0.8rem; }

/* ---------- Reveal on scroll ---------- */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .lang a, .nav-links a, .faq-list summary::after { transition: none; }
}

/* ---------- Owner portal (admin.html shares these tokens) ----------
   Kiwi Maru tops out at weight 500, so the shared portal markup's
   800 weights are pulled back here to avoid synthetic bold, and the
   portal's chips/badges pick up the 20px radius lock. */

.portal-head h1,
.gate h1,
.stat .num { font-weight: 500; }

.chip, .badge, .stat, .empty, .gate form, .seg, .res-row .who .tag {
  border-radius: var(--r);
}
.seg { overflow: hidden; }
.stat-row { border-radius: var(--r); overflow: hidden; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2rem);
    gap: 2rem;
  }
  .hero-mosaic { order: 2; }
  .hero-copy { order: 1; }

  .course-grid { grid-template-columns: 1fr; }
  .room-tiles { grid-template-columns: 1fr; }
  .access-grid { grid-template-columns: 1fr; }
  .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nav .wrap { gap: 0.8rem; }
  .lang { font-size: 0.72rem; }
  .lang a { padding: 0.3rem 0.45rem; }
  .hero-ctas .btn { width: 100%; }
  .hero-mosaic img:first-child { grid-row: auto; aspect-ratio: 1 / 1; }
}


/* ============================================================
   Chrome differentiation. Twelve sibling sites were sharing one
   nav, reservation block and footer, so two open tabs read as the
   same template. Variants are distributed so no two neighbouring
   sites repeat a combination.
   ============================================================ */

/* Chrome variant RES-C: full-width band, copy across the top, form in a
   three-column rank beneath it. */
.reserve-grid { grid-template-columns: 1fr; gap: 2.4rem; }
.reserve-copy p { max-width: 62ch; }
.form { grid-template-columns: repeat(3, 1fr); }
.form .field.full { grid-column: auto; }
.form .btn { grid-column: 1 / -1; justify-self: center; min-width: 16rem; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; } }

/* Chrome variant FOOT-B: everything centred in a single stacked block. */
.foot-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.foot-links { justify-content: center; }
.demo-note { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   MEDIA LAYER OVERRIDES
   media.css loads after this file; its generic .m-gallery grid would
   flatten the mosaic. The class is carried only as the hook media.js
   binds the full-screen viewer to, so the composition is restored
   here at higher specificity.
   ============================================================ */

.hero-mosaic.m-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.75rem;
}
.hero-mosaic.m-gallery > button,
.room-photo.m-gallery > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hero-mosaic.m-gallery > button:focus-visible,
.room-photo.m-gallery > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Each img is now first child of its own button, so the original
   `.hero-mosaic img:first-child` would hit all three. Reset, then
   re-apply the tall aspect to the signature cell only. */
.hero-mosaic.m-gallery > button img { aspect-ratio: 1 / 1; }
.hero-mosaic.m-gallery > button:first-child { grid-row: span 2; }
.hero-mosaic.m-gallery > button:first-child img { aspect-ratio: 1 / 2.06; }

.room-photo.m-gallery { display: block; }

@media (max-width: 520px) {
  /* Matches the site's own rule: the signature cell squares off. */
  .hero-mosaic.m-gallery > button:first-child { grid-row: auto; }
  .hero-mosaic.m-gallery > button:first-child img { aspect-ratio: 1 / 1; }
}


/* ============================================================
   MOBILE HEADER REPAIR (2026-09-13)
   Found by rendering this site at a TRUE 390px viewport. Every
   code-level check passed: JSON-LD parsed, contrast computed,
   node --check clean. None of them can see that the shop's own
   name was breaking character by character in its own header
   (シ/ャ/ル/メ) and that 日本語 was stacking vertically in the
   language switcher.

   Appended last so it wins on source order without raising
   specificity, and uses no colour values, so nothing can regress.
   ============================================================ */

/* A shop's name must never break mid-word in its own header. */
.brand { white-space: nowrap; }

/* 日本語 is one word to a reader; it must not become 日/本/語. */
.lang a { white-space: nowrap; }

@media (max-width: 430px) {
  /* THE BOOKING BUTTON WAS RUNNING OFF THE SCREEN.
     Measured at a 358px viewport, the nav CTA's right edge sat between
     366px and 466px on eleven of fifteen sites. The nav is fixed and
     does not scroll, so the document reported no overflow and every
     automated check passed while the primary conversion control was
     partly invisible on a small phone.
     The header keeps brand, languages and the booking button; they just
     stop competing for room. */
  .nav .wrap { gap: 0.5rem; }
  .nav .btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    min-width: 0;
  }
  .lang { gap: 0.1rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.68rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.04em; }
}