/* ============================================================
   満天ノ 辻のや HIS特集ページ — スタイルシート
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&display=swap");

/* ---------- CSS変数 ---------- */
:root {
  --mn-white: #ffffff;
  --mn-cream: #f5f2ee;
  --mn-accent: #615b54;
  --mn-accent-light: rgba(97, 91, 84, 0.15);
  --mn-text: #2c2a29;
  --mn-text-head: #313131;
  /* --mn-text-muted: rgba(1, 1, 1, 0.5);
  --mn-text-sub: rgba(1, 1, 1, 0.65); */
  --mn-border: #e4ddd4;
  --mn-border-light: #c3c3c3;
  --mn-hero-dark: #0d0c0a;
  --font-size-pc: 16px;
  --font-size-sp: calc(16vw / 3.75);
  --content-font-size: min(var(--font-size-sp), var(--font-size-pc));
  --mn-serif-ja: "Noto Serif JP", serif;
  --mn-sans: "Noto Sans JP", serif;
  --mn-max-w: min(1104px, 100vw);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: var(--content-font-size);
}
body {
  font-family: var(--mn-serif-ja);
  line-height: 2.4;
  letter-spacing: 0.2em;
  background: var(--mn-white);
  color: var(--mn-text);
  overflow-x: hidden;
}

.is-sp,
.is-tb {
  display: none;
}

.ui-static-breadcrumb-list {
  font-family: var(--mn-sans);
  letter-spacing: normal;
  line-height: 1;
}

/* ---------- タイポグラフィ ---------- */
.mn-eyebrow {
  font-family: var(--mn-sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mn-accent);
  display: block;
  margin-bottom: 1.5rem;
}

.mn-h2 {
  font-family: var(--mn-serif-ja);
  font-weight: 300;
  font-size: 1.625rem;
  line-height: 1.9;
  letter-spacing: 0.3em;
  color: var(--mn-text-head);
}

.mn-h3 {
  font-family: var(--mn-serif-ja);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 2;
  letter-spacing: 0.25em;
  color: var(--mn-text-head);
}

.mn-body {
  font-size: 0.875rem;
  line-height: 2.4;
  letter-spacing: 0.15em;
}
.mn-body#cuisine-subtitle {
  font-style: italic;
}

.mn-note {
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--mn-text-muted);
}

/* ---------- 区切り線 ---------- */
.mn-rule {
  display: block;
  width: 1px;
  height: 60px;
  background: var(--mn-border-light);
  margin: 1.5rem auto;
}

.mn-rule--h {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--mn-accent);
  margin: 1.5rem auto;
}

.mn-rule--h-left {
  margin-left: 0;
}

/* ---------- セクション共通 ---------- */
.mn-section {
  padding: 96px 24px;
}

.mn-section--white {
  background: var(--mn-white);
}
.mn-section--cream {
  background: var(--mn-cream);
}

.mn-container {
  max-width: var(--mn-max-w);
  margin: 0 auto;
}

/* ---------- Hero ---------- */
.mn-hero {
  position: relative;
  height: 100svh;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.mn-hero__bg {
  position: absolute;
  inset: 0;
  background: var(--mn-hero-dark);
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}

.mn-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 12, 10, 0.25) 0%, rgba(13, 12, 10, 0.1) 35%, rgba(13, 12, 10, 0.5) 75%, rgba(13, 12, 10, 0.75) 100%);
  z-index: 1;
}

.mn-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  max-width: 720px;
}

.mn-hero__facility {
  font-family: var(--mn-sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 238, 0.5);
  margin-bottom: 40px;
  text-transform: uppercase;
}

.mn-hero__copy {
  font-family: var(--mn-serif-ja);
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 2.1;
  letter-spacing: 0.25em;
  color: #f5f2ee;
  margin-bottom: 32px;
}

.mn-hero__sub {
  font-family: var(--mn-serif-ja);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 2.4;
  letter-spacing: 0.2em;
  color: rgba(245, 242, 238, 0.82);
}

/* ---------- 発地ナビ ---------- */
.navigation-container {
  width: var(--mn-max-w);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 10;
  letter-spacing: normal;
  line-height: 1.5;
}
.dep-select-nav {
  position: absolute;
  top: 0;
  right: 0;
}
.display_selected {
  width: 120px;
  height: 100%;
  background: var(--mn-cream);
  font-size: 1rem;
  font-weight: bold;
  color: var(--mn-accent);
  text-align: center;
  padding-block: 16px;
  position: relative;
  cursor: pointer;
}
.dep-select-zone {
  display: none;
  width: 120px;
  position: absolute;
  z-index: 50;
  background: #fff;
  border: var(--content-border-1) var(--mn-cream);
  border-top: none;
}
.dep-select {
  padding-top: 8px;
}
.dep-select > li {
  margin-bottom: 8px;
}
.dep-select > li > a {
  cursor: default;
  display: block;
  font-size: 1rem;
  font-weight: bold;
  color: var(--mn-accent);
  text-align: center;
  line-height: 1.5;
}
.dep-select > li > a:hover,
.dep-select > li.selected > a {
  background: var(--mn-cream);
}
.close-button {
  display: none;
}

/* ---------- スクロール誘導 ---------- */
.mn-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.mn-hero__scroll-label {
  font-family: var(--mn-sans);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: rgba(245, 242, 238, 0.4);
}

.mn-hero__scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(245, 242, 238, 0.5), transparent);
  animation: mnScrollLine 2.2s ease-in-out infinite;
}

@keyframes mnScrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 1;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 0;
  }
}

/* ---------- Intro ---------- */
.mn-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mn-intro__image {
  aspect-ratio: 3 / 4;
  background: var(--mn-cream);
  overflow: hidden;
  position: relative;
}

.mn-intro__slide {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.8s ease;
  background-size: cover;
  background-position: center;
}

.mn-intro__slide--fading {
  opacity: 0;
}

.mn-intro__lead {
  font-family: var(--mn-serif-ja);
  font-size: 1rem;
  line-height: 2.6;
  letter-spacing: 0.2em;
  color: var(--mn-accent);
  margin-bottom: 24px;
}

.mn-intro__body {
  font-size: 0.875rem;
  line-height: 2.5;
  letter-spacing: 0.15em;
}

.mn-intro__body p + p {
  margin-top: 24px;
}

/* ---------- Chef ---------- */
.mn-chef {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.mn-chef__image-wrap {
  position: sticky;
  top: 120px;
}

.mn-chef__image {
  aspect-ratio: 3 / 4;
  background: var(--mn-border);
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}

.mn-chef__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mn-chef__quote {
  font-family: var(--mn-serif-ja);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2.6;
  letter-spacing: 0.2em;
  color: var(--mn-accent);
  padding-left: 1.2rem;
  border-left: 2px solid var(--mn-accent-light);
}

.mn-chef__awards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--mn-border);
}

.mn-chef__awards li {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--mn-text-muted);
  padding-left: 1rem;
  position: relative;
}

.mn-chef__awards li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--mn-border-light);
  font-size: 0.65rem;
}

/* ---------- Feature ---------- */
.mn-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 540px;
}

.mn-feature--reverse {
  direction: rtl;
}
.mn-feature--reverse > * {
  direction: ltr;
}

.mn-feature__image {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}

.mn-feature__image-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.9s ease;
}

.mn-feature:hover .mn-feature__image-inner {
  transform: scale(1.04);
}

.mn-feature__text {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  background: var(--mn-white);
}

.mn-feature__text--cream {
  background: var(--mn-cream);
}

/* ---------- Cuisine タブ ---------- */
.mn-cuisine-tabs {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--mn-border);
  margin-bottom: 0;
}

.mn-cuisine-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.9rem 2.2rem;
  font-family: var(--mn-serif-ja);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: var(--mn-text-muted);
  cursor: pointer;
  transition:
    color 0.25s,
    border-color 0.25s;
}

.mn-cuisine-tab:hover {
  color: var(--mn-accent);
}

.mn-cuisine-tab.active {
  color: var(--mn-accent);
  border-bottom-color: var(--mn-accent);
}

.mn-cuisine-panel {
  transition: opacity 0.35s ease;
}
.mn-cuisine-panel.fading {
  opacity: 0;
}

/* ---------- バッジ ---------- */
.mn-badge {
  display: inline-block;
  font-family: var(--mn-sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  padding: 4px 16px;
  border: 1px solid var(--mn-border);
  color: var(--mn-accent);
  align-self: flex-start;
}

/* ---------- 料理メニューリスト ---------- */
.mn-menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  list-style: none;
}

.mn-menu-list li {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 4px 0 4px 16px;
  position: relative;
}

.mn-menu-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--mn-border-light);
  font-size: 0.75rem;
}

/* ---------- 温泉施設グリッド ---------- */
.mn-h2#onsen-heading {
  letter-spacing: 0.08em;
}
.mn-onsen-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--mn-border);
}

.mn-onsen-feature-item__name {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--mn-accent);
  display: block;
  margin-bottom: 4px;
}

.mn-onsen-feature-item__desc {
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--mn-text-muted);
}

/* ---------- 観光セクション ---------- */
.mn-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.mn-sightseeing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--mn-border);
  border: 1px solid var(--mn-border);
}

.mn-sight-card {
  background: var(--mn-white);
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.mn-sight-card__image {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.mn-sight-card__image-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
}

.mn-sight-card:hover .mn-sight-card__image-inner {
  transform: scale(1.05);
}

.mn-sight-card__body {
  padding: 24px 32px;
}

.mn-sight-card__name {
  font-family: var(--mn-serif-ja);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--mn-text-head);
  margin-bottom: 8px;
}

.mn-sight-card__desc {
  font-size: 0.875rem;
  line-height: 2.2;
  letter-spacing: 0.1em;
  color: var(--mn-text-head);
}

/* ---------- フェードインアニメーション ---------- */
.mn-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.mn-fade-in.mn-visible {
  opacity: 1;
  transform: translateY(0);
}

.mn-fade-in--delay-1 {
  transition-delay: 0.15s;
}
.mn-fade-in--delay-2 {
  transition-delay: 0.3s;
}
.mn-fade-in--delay-3 {
  transition-delay: 0.45s;
}

/* ---------- 商品プロダクト ---------- */
#js-product-content * {
  font-family: var(--mn-sans);
}
.mn-h2#product-heading {
  margin-bottom: 24px;
  letter-spacing: normal;
}
.area00 {
  display: none;
}
.product-list {
  text-align: left;
  letter-spacing: normal;
  line-height: 1.5;
}
.link-wrapper {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 24px auto 0;
}
.link-wrapper > li {
  width: min(460px, 100%);
}
.link-wrapper > li:empty {
  display: none;
}
.link-wrapper > li > a {
  display: block;
  background: #2c2a29;
  padding: 16px;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  line-height: 1.5;
}
.link-wrapper > li > a:hover {
  opacity: 0.8;
}

/* ---------- レスポンシブ ---------- */
@media (768px <= width <= 1024px) {
  .navigation-container {
    width: 100vw;
  }
}

@media (max-width: 900px) {
  .mn-h2 {
    font-size: 1.25rem;
  }
  .mn-section {
    padding: 72px 20px;
  }

  .mn-intro {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mn-intro__image {
    aspect-ratio: 3 / 2;
  }

  .mn-feature {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mn-feature--reverse {
    direction: ltr;
  }
  .mn-feature__text {
    padding: 48px 24px;
  }
  .mn-feature__image {
    min-height: 280px;
  }

  .mn-chef {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mn-chef__image-wrap {
    position: static;
    order: -1;
  }

  .mn-chef__image {
    aspect-ratio: 4 / 3;
  }

  .mn-sightseeing-grid {
    grid-template-columns: 1fr;
  }
  .mn-onsen-features {
    grid-template-columns: 1fr 1fr;
  }
  .link-wrapper {
    gap: 16px;
  }
  .link-wrapper > li > a {
    padding: 16px 8px;
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .is-sp {
    display: block;
  }
  .navigation-container {
    width: 100vw;
  }
  .display_selected {
    width: 30vw;
    height: 100%;
    background: var(--mn-cream);
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--mn-accent);
    text-align: center;
    padding-block: 8px;
    position: relative;
    cursor: pointer;
  }
  .dep-select-zone {
    display: none;
    width: 30vw;
    position: absolute;
    z-index: 50;
    background: #fff;
    border: var(--content-border-1) var(--mn-cream);
    border-top: none;
  }
  .dep-select {
    padding-top: 8px;
  }
  .dep-select > li {
    margin-bottom: 8px;
  }
  .dep-select > li > a {
    cursor: default;
    display: block;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--mn-accent);
    text-align: center;
    line-height: 1.5;
  }
  .mn-hero__copy {
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    line-height: 1.9;
  }
  .mn-cuisine-tab {
    padding: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
  .link-wrapper {
    flex-direction: column;
  }
  .link-wrapper > li > a {
    font-size: 0.875rem;
    padding: 8px;
  }
}

/* @media (max-width: 600px) {
  .mn-hero__copy {
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    line-height: 1.9;
  }

  .mn-hero__sub {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .mn-cuisine-tab {
    padding: 0.8rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
} */