/* 寿司バビロン / Vegan Sushi BABYLON — 共有スタイルシート
   素の CSS3 のみ。ビルドツール不使用。ブレークポイントは 720px の 1 つのみ。 */

:root {
  /* color */
  --color-washi: #F1ECDD;
  --color-ink:   #14140F;
  --color-moss:  #2F4A3C;
  --color-hair:  #E6DFCB;
  --color-sumi:  #4A4A4A;

  /* typography */
  --font-jp:         "Noto Serif JP", serif;
  --font-en-display:  "Cormorant Garamond", serif;
  --font-en-body:      "EB Garamond", serif;

  /* spacing */
  --section-gap: 168px;
  --gap-md:      48px;
  --gap-sm:      24px;

  /* max width */
  --w-content: 720px;
  --w-hero:   1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, address { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; font-size: 93.75%; }

@media (min-width: 720px) {
  html { font-size: 100%; }
}

body {
  background: var(--color-washi);
  color: var(--color-ink);
  font-family: var(--font-jp), var(--font-en-body), serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-jp), serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ---------- layout ---------- */

.page {
  max-width: var(--w-hero);
  margin: 0 auto;
  padding-left: 36px;
  padding-right: 36px;
}

.content-narrow {
  max-width: var(--w-content);
  margin: 0 auto;
}

.section {
  padding-top: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-top: 1px solid var(--color-hair);
}
.section:first-child { border-top: none; }

@media (min-width: 720px) {
  .section { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
  .mobile-break { display: none; }
  .page { padding-left: 24px; padding-right: 24px; }
}

/* ---------- site header (subpages) ---------- */

.site-header { padding: 10px 0; border-top: none; }

.site-header-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
}

.site-brand {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.1rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-jp), serif;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-ink);
  border-radius: 4px;
  font-family: var(--font-en-body), serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.lang-current {
  color: var(--color-ink);
  font-weight: 600;
}

.lang-sep { color: var(--color-sumi); }

.lang-switch {
  color: var(--color-moss);
  font-weight: 600;
}

.lang-switch:hover { text-decoration: underline; }

/* ---------- home: hero (full-bleed slideshow with text overlay) ---------- */

.section-hero-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: none;
}

.hero-slideshow {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
  background: #FFFFFF;
}

.hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero-fade 20s infinite;
}

.hero-slideshow img:nth-child(1) { animation-delay: 0s; object-position: center 70%; }
.hero-slideshow img:nth-child(2) { animation-delay: 5s; }
.hero-slideshow img:nth-child(3) { animation-delay: 10s; }
.hero-slideshow img:nth-child(4) { animation-delay: 15s; }

@keyframes hero-fade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow img { animation: none; opacity: 0; }
  .hero-slideshow img:first-child { opacity: 1; }
}

.hero-slideshow img.hero-logo {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
  opacity: 1;
  animation: none;
  z-index: 2;
}

/* ---------- home: full-screen menu overlay (CSS-only checkbox toggle) ---------- */

.menu-toggle-input { display: none; }

.hero-strip {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  background: #FFFFFF;
}

.menu-toggle-text {
  cursor: pointer;
  font-family: var(--font-en-body), serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  padding: 6px 16px;
}
.menu-toggle-text:hover { text-decoration: underline; }

@media (min-width: 720px) {
  .hero-strip { padding: 16px 32px; }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  background: rgba(20, 20, 15, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.menu-toggle-input:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
}

.menu-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}

.menu-overlay-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--gap-md);
}

.menu-overlay-nav a {
  writing-mode: vertical-rl;
  font-family: var(--font-jp), serif;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--color-washi);
}
.menu-overlay-nav a:hover { color: var(--color-moss); text-decoration: none; }

.menu-overlay-brand {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-washi);
}

.menu-overlay-brand-jp {
  display: block;
  font-family: var(--font-jp), serif;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-hair);
  margin-top: 6px;
}

.menu-overlay-lang {
  position: relative;
  z-index: 1;
  font-family: var(--font-en-body), serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-washi);
  border: 1px solid var(--color-washi);
  border-radius: 4px;
  padding: 6px 14px;
}
.menu-overlay-lang:hover { color: var(--color-moss); border-color: var(--color-moss); text-decoration: none; }

@media (min-width: 720px) {
  .hero-slideshow { height: 88vh; }
}

/* ---------- home: concept ---------- */

.section-concept .content-narrow { text-align: left; }

.concept-primary-ja {
  font-family: var(--font-jp), serif;
  font-size: 1.1rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
}
.concept-primary-ja p { margin-bottom: 0.4em; }
.concept-primary-ja p:not(.concept-lead) { font-size: 0.9rem; line-height: 1.6; }

.concept-primary-en {
  font-family: var(--font-en-body), serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink);
}
.concept-primary-en p { margin-bottom: 0.4em; }
.concept-primary-en p:not(.concept-lead) { font-size: 0.9rem; line-height: 1.5; }

p.concept-lead { font-weight: 600; font-style: italic; margin-bottom: var(--gap-sm); }

/* ---------- home: neta of the month ---------- */

.neta-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.neta-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }

.neta-text { text-align: left; }

.neta-title-jp { font-family: var(--font-jp), serif; font-size: 1.15rem; font-weight: 600; }
.neta-title-jp.neta-title-en {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.3rem;
}
.neta-body { font-family: var(--font-en-body), var(--font-jp), serif; margin-top: 8px; font-size: 0.8rem; line-height: 1.4; }
.neta-date { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--color-sumi); margin-top: var(--gap-sm); }

@media (min-width: 720px) {
  .neta-grid { flex-direction: row; align-items: flex-start; gap: var(--gap-md); }
  .neta-image { flex: 0 0 50%; width: 50%; }
  .neta-text { flex: 0 0 50%; }
  .neta-body { font-size: 0.95rem; line-height: 2.5; margin-top: 34px; }
}

@media (min-width: 720px) {
  .concept-primary-ja p,
  .concept-primary-en p { margin-bottom: 2.2em; }
  .concept-primary-ja p:not(.concept-lead) { line-height: 2.6; }
  .concept-primary-en p:not(.concept-lead) { line-height: 2.4; }
}

/* ---------- home: opening notice ---------- */

.section-opening { text-align: center; }

.opening-main {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.5rem;
}

.opening-sub {
  margin-top: var(--gap-sm);
  font-family: var(--font-jp), serif;
  font-style: italic;
  font-size: 1.1rem;
}

/* ---------- menu: reserve cta ---------- */

.section-reserve { text-align: center; }

.reserve-lead {
  font-family: var(--font-jp), var(--font-en-body), serif;
  font-style: italic;
  font-size: 1.1rem;
}

.reserve-link {
  display: inline-block;
  margin-top: var(--gap-sm);
  padding: 12px 32px;
  border: 1px solid var(--color-ink);
  font-family: var(--font-en-body), serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.reserve-link:hover { background: var(--color-hair); text-decoration: none; }

/* ---------- footer ---------- */

.footer { }

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-size: 0.85rem;
  color: var(--color-sumi);
}

.footer-brand {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink);
}

.footer-phone a:hover { color: var(--color-moss); }

.footer-social { display: flex; align-items: center; gap: var(--gap-sm); }
.footer-social a { display: inline-flex; align-items: center; gap: 6px; }
.footer-social svg { width: 18px; height: 18px; }
.footer-social .coming-soon { color: var(--color-sumi); font-size: 0.75rem; }

.footer-note {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  margin-top: var(--gap-sm);
}

/* ---------- omakase page: chef photo (full-bleed with message overlay) ---------- */

.section-chef-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
  border-top: none;
}

.chef-photo-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

.chef-message-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.chef-message {
  margin: 0;
  padding: 16px;
  max-width: var(--w-content);
  font-family: var(--font-jp), serif;
  line-height: 1.95;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (min-width: 720px) {
  .section-chef-full { height: 88vh; }
  .chef-message-overlay { padding: 32px; }
}

.course-list { }
.course-item {
  padding: var(--gap-md) 0;
  border-top: 1px solid var(--color-hair);
}
.course-item:first-child { border-top: none; }

.course-head { display: flex; align-items: baseline; gap: var(--gap-sm); flex-wrap: wrap; }

.course-price {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-moss);
}

.course-name { font-family: var(--font-jp), serif; font-size: 1.1rem; }

.course-subtitle {
  font-family: var(--font-jp), serif;
  font-size: 0.8rem;
  color: var(--color-sumi);
}

.course-subtitle-en {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-moss);
}

.course-tagline {
  margin-top: 6px;
  font-family: var(--font-jp), serif;
  font-size: 0.85rem;
  color: var(--color-sumi);
}

.course-desc { margin-top: 8px; color: var(--color-sumi); font-size: 0.9rem; }

.course-menu { margin-top: 8px; }
.course-menu li {
  padding: 3px 0;
  color: var(--color-sumi);
  font-size: 0.9rem;
  line-height: 1.6;
}
.course-menu li::before {
  content: "・";
  color: var(--color-moss);
  margin-right: 2px;
}

.pairing-note { color: var(--color-sumi); font-size: 0.9rem; }

/* ---------- menu: dining notice ---------- */

.section-notice .content-narrow { text-align: left; }

.notice-body {
  font-family: var(--font-jp), var(--font-en-body), serif;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--color-sumi);
  margin-bottom: 1em;
}

.notice-transition {
  margin-top: var(--gap-sm);
  font-family: var(--font-jp), var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.05rem;
}

.pairing-title { font-family: var(--font-jp), serif; font-size: 1.2rem; font-weight: 600; }

.pairing-subtitle {
  font-family: var(--font-jp), serif;
  font-size: 1rem;
  font-weight: 600;
  margin-top: var(--gap-md);
  margin-bottom: 4px;
}

.pairing-brand-note { font-size: 0.75rem; color: var(--color-sumi); margin-top: 4px; }

.sake-list { margin-top: var(--gap-sm); }
.sake-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 8px 0;
  border-top: 1px solid var(--color-hair);
  font-family: var(--font-jp), serif;
}
.sake-list li:first-child { border-top: none; }

.sake-price {
  font-family: var(--font-en-body), serif;
  color: var(--color-sumi);
  white-space: nowrap;
}

/* ---------- journal list ---------- */

.journal-list { }
.journal-item {
  display: flex;
  gap: var(--gap-md);
  padding: var(--gap-sm) 0;
  border-top: 1px solid var(--color-hair);
}
.journal-item:first-child { border-top: none; }

.journal-date {
  flex: 0 0 96px;
  font-family: var(--font-en-body), serif;
  color: var(--color-sumi);
}
.journal-month { display: block; font-size: 0.75rem; letter-spacing: 0.1em; }
.journal-day { display: block; font-size: 1.6rem; }

.journal-title { font-family: var(--font-jp), serif; font-size: 1.05rem; font-weight: 600; }
.journal-summary { margin-top: 6px; color: var(--color-sumi); font-size: 0.9rem; }

.journal-empty {
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-style: italic;
  color: var(--color-sumi);
}

/* ---------- journal article ---------- */

.article-header { text-align: center; }
.article-title-en {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 1.6rem;
}
.article-title-ja {
  font-family: var(--font-jp), serif;
  font-size: 1.1rem;
  margin-top: 8px;
}

.article-body h2 {
  font-size: 1.05rem;
  margin-top: var(--gap-md);
  margin-bottom: var(--gap-sm);
}
.article-body h2:first-child { margin-top: 0; }
.article-body p { margin-bottom: var(--gap-sm); }

.article-note {
  text-align: right;
  font-style: italic;
  margin-top: var(--gap-md);
  font-size: 0.85rem;
  color: var(--color-sumi);
}

/* ---------- access page ---------- */

.access-address { font-style: normal; margin-bottom: var(--gap-sm); }

.access-phone { margin-bottom: var(--gap-sm); }
.access-phone a:hover { color: var(--color-moss); }

.stations-list { margin-top: var(--gap-sm); }
.stations-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--color-hair);
  font-size: 0.9rem;
}
.stations-list li:first-child { border-top: none; }

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: var(--gap-md);
  border-radius: 8px;
  overflow: hidden;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.simple-map { width: 100%; height: 100%; display: block; }

.map-bg { fill: var(--color-washi); }
.map-border { fill: none; stroke: var(--color-hair); stroke-width: 1; }

.map-roads line, .map-roads polyline { fill: none; stroke: var(--color-sumi); stroke-width: 1.5; opacity: 0.35; }
.map-roads .map-road-main { stroke-width: 7; opacity: 0.5; }
.map-roads .map-road-rail { stroke-width: 4; opacity: 0.3; stroke-dasharray: 1 3; stroke-linecap: round; stroke-linejoin: round; }

.map-road-label {
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-size: 12px;
  fill: var(--color-sumi);
  opacity: 0.6;
}

.map-line { stroke: var(--color-moss); stroke-width: 1.5; stroke-dasharray: 4 4; }

.map-road-central { stroke: var(--color-ink); stroke-width: 2; opacity: 0.4; }

.map-road-alley {
  fill: none;
  stroke: var(--color-moss);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-venue { fill: var(--color-moss); }
.map-label-bg { fill: var(--color-washi); }
.map-venue-label {
  font-family: var(--font-en-display), serif;
  font-style: italic;
  font-size: 20px;
  fill: var(--color-ink);
}

.map-station { fill: var(--color-washi); stroke: var(--color-ink); stroke-width: 1.5; }
.map-station-name {
  font-family: var(--font-jp), serif;
  font-size: 15px;
  fill: var(--color-ink);
}
.map-station-time {
  font-family: var(--font-en-body), serif;
  font-size: 13px;
  fill: var(--color-sumi);
}

.map-landmark { fill: var(--color-ink); }
.map-landmark-name {
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-size: 13px;
  fill: var(--color-sumi);
}

.map-landmark-sub {
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-size: 11px;
  fill: var(--color-sumi);
  opacity: 0.75;
}

.map-compass line, .map-compass path { stroke: var(--color-sumi); fill: var(--color-sumi); stroke-width: 1.5; }
.map-compass text { font-family: var(--font-en-body), serif; font-size: 13px; fill: var(--color-sumi); }

.map-offmap path { fill: var(--color-moss); stroke: none; }
.map-offmap text {
  font-family: var(--font-en-body), var(--font-jp), serif;
  font-size: 11px;
  fill: var(--color-sumi);
}

.map-attribution {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--color-sumi);
}

.map-gmaps-link {
  display: inline-block;
  margin-top: var(--gap-sm);
  padding: 4px 10px;
  border: 1px solid var(--color-ink);
  border-radius: 4px;
  font-family: var(--font-en-body), serif;
  font-size: 0.7rem;
}

.map-gmaps-link:hover { background: var(--color-hair); text-decoration: none; }