/* =========================
   Global 基本設定
   ========================= */
:root{
  --wrap: 960px;
  --gutter: 24px;
  --ink:#222;
  --paper:#fff;
  --accent:#981e23;  /* ブランド赤 */
  --navH: 56px;
}
@media (min-width: 992px){
  :root { --nav-h: 72px; }
}

#heroText {
  transition: opacity 0.5s ease;
}
.fade-out { opacity: 0; }
.fade-in  { opacity: 1; }

section {
  scroll-margin-top: 40px;
}
html, body { height:100%; }

html::before {
  content: "";
  position: fixed;
  inset: 0;

  /* フォールバック用 */
  background: url('../img/bg-motif.png') center/cover no-repeat;

  /* WebP優先 */
  background-image: image-set(
    url('../img/bg-motif.webp') type("image/webp"),
    url('../img/bg-motif.png') type("image/png")
  );

  z-index: -1;
  will-change: transform;
}

body{
  background-color:#fff;
}

body::after{
  content:"";
  position: fixed;
  inset:0;
  background: rgba(255,255,255,0.85);
  z-index: -1;
  pointer-events:none;
}

h1,h2,h3,h4,h5,h6,.section-title{
  font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  font-weight:600; letter-spacing:.05em; line-height:1.4;
}

.wrap{
  width:min(1100px, 100% - 48px);
  margin-inline:auto;
}
.object-fit-cover{ object-fit:cover; }
.map-embed{ width:100%; height:100%; border:0; }

/* =========================
   Navbar
   ========================= */
.navbar {
  background-color: var(--accent) !important;
}

.navbar .navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar.fixed-top {
  padding-top: env(safe-area-inset-top);
}

.navbar-tagline {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 2px;
  color: #fff !important;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
}

.logo-img {
  height: 40px;
  width: auto;
}

.navbar .nav-link {
  color: #fff !important;
}
.navbar .nav-link:hover {
  color: #f0c0c0 !important;
}

.navbar .nav-item {
  position: relative;
}
.navbar .nav-item + .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* =========================
   Hero（メインビジュアル）
   ========================= */
.full-bleed{
  inline-size:100dvw;
  margin-inline:calc(50% - 50dvw);
}
@supports not (width:100dvw){
  .full-bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}

.hero{
  position: relative;
  min-height: 100dvh;
  min-height: 100svh;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("../img/mv_001.png") center/cover no-repeat;
  background-image: image-set(
    url("../img/mv_001.webp") type("image/webp"),
    url("../img/mv_001.png") type("image/png")
  );
}
.hero .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:-1; }

.hero .hero-content{
  position: relative;
  z-index: 2;
  padding: 24px;
  margin-top: 0;
  transform: none;
}
.hero .hero-content h1{ text-shadow:0 2px 12px rgba(0,0,0,.45); }
.hero .hero-content p { text-shadow:0 1px 8px rgba(0,0,0,.35); }

@media (orientation: landscape) and (max-height: 600px) {
 
  .hero{
    min-height: calc(100dvh - var(--navH));
    padding-top: var(--navH);
  }

  .hero .hero-content{
    top: 0;
    padding-top: 0;
  }

  .hero .hero-content .mv-title{
    font-size: clamp(22px, 4.6vw, 40px);
    line-height: 1.25;
  }

  .hero::before{ background-position: center; }
}

.hero .hero-steam{
  position: absolute; inset:0;
  pointer-events: none;
  z-index: 1;
}
.hero .hero-steam::before,
.hero .hero-steam::after{
  content:"";
  position:absolute; left:50%;
  width: 50vmin; height: 60vmin;
  transform: translateX(-50%) translateY(20%);
  background:
    radial-gradient(60% 40% at 50% 60%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.18) 40%, transparent 70%),
    radial-gradient(40% 30% at 60% 40%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.14) 45%, transparent 70%),
    radial-gradient(50% 35% at 40% 70%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 40%, transparent 70%);
  filter: blur(18px) saturate(110%);
  animation: steamUp 9s ease-in-out infinite;
}
.hero .hero-steam::after{
  width:60vmin; height:70vmin;
  opacity:.75;
  filter: blur(22px) saturate(115%);
  animation: steamUp2 12s ease-in-out infinite;
}
@keyframes steamUp{
  0%{ transform:translateX(-50%) translateY(20%) scale(.95); opacity:0; }
  10%{ opacity:.55; }
  50%{ transform:translateX(calc(-50% - 2%)) translateY(-10%) scale(1.05); opacity:.45; }
  100%{ transform:translateX(calc(-50% + 2%)) translateY(-35%) scale(1.10); opacity:0; }
}
@keyframes steamUp2{
  0%{ transform:translateX(-50%) translateY(25%) scale(.9); opacity:0; }
  15%{ opacity:.5; }
  50%{ transform:translateX(calc(-50% + 2%)) translateY(-8%) scale(1.05); opacity:.4; }
  100%{ transform:translateX(calc(-50% - 2%)) translateY(-38%) scale(1.12); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero .hero-steam,
  .hero .hero-steam::before,
  .hero .hero-steam::after{ animation:none !important; opacity:0; }
}
@media (max-width:991.98px){ .hero{ min-height:70vh; } }
@media (max-width:575.98px){
  .hero{ min-height:60vh; }
  .hero .hero-content{ padding:16px; }
}

/* =========================
   Intro（薬膳をラーメンに）
   ========================= */
#intro .intro-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
#intro .section-title{
  order:0;
  writing-mode:horizontal-tb !important;
  margin:0 0 1rem 0 !important;
}
#intro .vertical-text{
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align:start;
  margin:1rem 0 2rem;
  line-height:2;
  padding:1rem;
  border-radius:10px;
}
#intro .intro-image{
  order:2;
  max-width:480px;
  width:100%;
  margin:0 auto;
}
#intro .intro-image img{
  width:100%; border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
@media (max-width:767.98px){ #intro .intro-image{ max-width:320px; } }

/* =========================
   Concept（薬膳麺の心得）
   ========================= */
#concept{ background:var(--accent); color:#fff; }
#concept .section-title{
  position:relative;
  display:block;
  text-align:center;
  margin:0 auto 3rem;
  padding-bottom:.5rem;
}
#concept .section-title::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%);
  width:clamp(140px, 22vw, 260px);
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#000,transparent);
}
.concept-item h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .05em;
  margin-bottom: .75rem;
  white-space: nowrap;
}

.concept-item h3::before,
.concept-item h3::after {
  content: "";
  height: 2px;
  background: rgba(255,255,255,.5);
  flex: 1 1 60px;
  min-width: 28px;
}

/* 本文テキスト：薄い下線を維持 */
.concept-item p {
  font-size: .95rem;
  line-height: 2.0;
  color: rgba(255,255,255,.9);
  display: inline-block;
  padding: 1rem;
  border-radius: 8px;

  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4);
  text-underline-offset: 4px;
}

@media (max-width: 991.98px) {
  .concept-item h3 { font-size: 1.25rem; gap: 10px; }
  .concept-item h3::before,
  .concept-item h3::after { flex-basis: 40px; min-width: 20px; }
}

@media (max-width: 575.98px) {
  .concept-item h3 { font-size: 1.125rem; }
  .concept-item h3::before,
  .concept-item h3::after { opacity: .4; }
}

/* =========================
   Menu（お品書き）
   ========================= */
#menu{
  background:url('../img/wood-texture.jpg') center/cover no-repeat;
  background-color:#f7f2ea;
  padding:4rem 0;
}
#menu .section-title{
  color:#fff;
}
#menu .section-title::after{
  background:linear-gradient(90deg,var(--accent),transparent);
}
.menu-hero{
  width:min(500px,85vw); aspect-ratio:1/1;
  overflow:hidden; margin:0 auto;
}
.menu-hero .hero-img{ width:100%; height:100%; object-fit:cover; }
.menu-text-block{
  background:rgba(255,250,245,.45);
  padding:1.5rem; border-radius:12px;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.menu-thumb{
  font-size:.9rem; white-space:nowrap;
  padding:.6rem 1rem; border:none;
  background:#222; color:#fff;
  border-radius:.35rem;
  transition:transform .2s, box-shadow .2s;
}
.menu-thumb:hover{ transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.3); }
.menu-thumb.is-active{ background:var(--accent); color:#fff; }
#menuHeroTitle{ letter-spacing:.02em; }
#menuHeroPrice{ color:var(--accent); font-weight:700; font-size:1.5rem; }
@media (max-width:575.98px){
  .menu-text-block{ padding:1rem; border-radius:10px; }
  .menu-hero{ border-radius:10px; }
}

/* =========================
   Footer
   ========================= */
footer{ background:#111; color:#bbb; }
footer a{ color:#ddd; }

/* =========================
   Section Title 共通装飾
   ========================= */
.section-title{
  position: relative;
  display: block;
  margin: 0 auto 2.5rem;
  text-align: center;

  font-family: 'Yuji Suk', 'Noto Serif JP', serif; /* ← 追加 */
  font-weight: 400;
  letter-spacing: .05em;
}
.section-title::after{
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(140px, 22vw, 260px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
@keyframes titleIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* =========================
   Scroll Cue (MV下部の矢印)
   ========================= */
.scroll-cue{
  position:absolute; left:50%; bottom:20px;
  transform:translateX(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  display:grid; place-items:center;
  color:#fff; text-decoration:none;
  z-index:3;
  backdrop-filter: blur(2px);
  background: rgba(0,0,0,.18);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.scroll-cue:hover{
  background: rgba(0,0,0,.28);
  border-color: #fff;
  transform: translateX(-50%) translateY(-2px);
}
.scroll-cue__chev{
  width:12px; height:12px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  opacity:.9;
  animation: cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-bounce{
  0%,100%{ transform:translateY(0) rotate(45deg); opacity:.9; }
  50%    { transform:translateY(6px) rotate(45deg); opacity:.7; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue__chev{ animation:none; }
}