/* =========================================================
   酒と私 — sections.css
   ナビ・ヒーロー・各セクション・フッター・スクロール出現
   ※色とフォントは base.css のCSS変数だけを使う
   ※ブレークポイントは 600px / 960px の2つ（モバイルファースト）
   ========================================================= */

:root {
  /* このファイル内で使う半透明色（base.css のトークンから合成） */
  --kami-kage:     color-mix(in srgb, var(--sumi) 9%,  transparent); /* 紙のやわらかい影 */
  --kami-kage-koi: color-mix(in srgb, var(--sumi) 15%, transparent); /* すこし濃い影 */
  --keisen:        color-mix(in srgb, var(--murasaki) 30%, transparent); /* 和風の罫線 */
  --keisen-usu:    color-mix(in srgb, var(--murasaki) 16%, transparent); /* 淡い罫線 */
}

/* 固定ナビにかくれないように（ページ内ジャンプの着地余白） */
main section[id] { scroll-margin-top: 4.2rem; }

/* =====================================================
   ナビ（上部固定・生成り半透明＋ぼかし）
   ===================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  flex-wrap: wrap;                 /* せまい画面では折り返す */
  align-items: center;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  padding: 0.55rem 1rem;
  background: var(--kinari);       /* color-mix 非対応ブラウザへの保険 */
  background: color-mix(in srgb, var(--kinari) 82%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--keisen-usu);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-fude);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--sumi);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
}

.nav-links a {
  position: relative;
  padding: 0.15rem 0;
  color: var(--sumi-usu);
  transition: color 0.3s ease;
}
/* 下線が左からすっと伸びる */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--murasaki);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--murasaki-koi); }
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* =====================================================
   ヒーロー（名刺のような上品さで）
   ===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;              /* スマホのアドレスバー対策 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4vh, 2.6rem);
  padding: 5rem 1.25rem 6.5rem;
}

.hero-mon {
  width: clamp(60px, 11vmin, 96px);
  height: auto;
}

/* 縦書きの屋号（三色は base.css の .ji-* が担当） */
.hero-title {
  font-family: var(--font-fude);
  font-weight: 400;
  font-size: clamp(3.9rem, 17vmin, 8rem);
  line-height: 1;
  letter-spacing: 0.16em;
}

/* 右側にそっと添える縦書きの一筋 */
.hero-sub {
  position: absolute;
  top: 50%;
  right: clamp(0.9rem, 6vw, 5rem);
  transform: translateY(-50%);
  font-size: clamp(0.78rem, 2.2vmin, 1rem);
  letter-spacing: 0.4em;
  color: var(--sumi-usu);
  border-right: 1px solid var(--murasaki-usu);
  padding-right: 0.85em;
}

/* 下部のキャッチコピー */
.hero-copy {
  position: absolute;
  left: 50%;
  bottom: clamp(2.4rem, 8vh, 4.5rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  font-size: clamp(0.86rem, 2.4vmin, 1.05rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;              /* 字間ぶんの中央バランス調整 */
  color: var(--sumi-usu);
  text-align: center;
}

/* =====================================================
   セクション共通
   ===================================================== */
.omenu, .ongaku, .tennai, .goannai {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(4rem, 11vh, 6.5rem) 1.25rem;
}

/* 見出し: 小さな梅紋＋筆文字＋左右へかすれて消える罫線 */
.sec-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding-top: 38px;
  background: url("../assets/brand/ume-mon.svg") no-repeat top center / 24px auto;
  font-family: var(--font-fude);
  font-weight: 400;
  font-size: clamp(1.65rem, 5vmin, 2.3rem);
  letter-spacing: 0.3em;
  color: var(--murasaki-koi);
}
.sec-title span { margin-right: -0.3em; } /* 末尾の字間ぶんを引いて中央に */
.sec-title::before,
.sec-title::after {
  content: "";
  flex: 0 1 6.5rem;
  height: 1px;
}
.sec-title::before { background: linear-gradient(to left,  var(--murasaki-usu), transparent); }
.sec-title::after  { background: linear-gradient(to right, var(--murasaki-usu), transparent); }

.sec-lead {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  color: var(--sumi-usu);
}

.sec-note {
  margin-top: 2.6rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--sumi-usu);
}

/* =====================================================
   お品書き（短冊）
   600px未満: 読みやすい横書きカード
   600px以上: 紐で吊るした縦書きタイトルの短冊
   ===================================================== */
.tanzaku-row {
  margin: 3rem auto 0;
  display: grid;
  gap: 1.6rem;
  max-width: 27rem;
}

.tanzaku {
  position: relative;
  background: var(--kinari);
  border: 1px solid var(--kinari-fukami);
  box-shadow: 0 5px 16px var(--kami-kage);
  padding: 1.4rem 1.5rem 1.5rem;
}

.tanzaku-title {
  writing-mode: horizontal-tb;     /* スマホでは横書き（600px以上で縦書きへ） */
  font-family: var(--font-fude);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  color: var(--murasaki-koi);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--keisen-usu);
  margin-bottom: 0.9rem;
}

.tanzaku-list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.tanzaku-list li + li { border-top: 1px dotted var(--keisen-usu); }
/* 品名の前の小さな点 */
.tanzaku-list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--murasaki-usu);
}

/* =====================================================
   音楽（レコード盤はCSSグラデーションだけで描く）
   ===================================================== */
.record-cards {
  margin-top: 3rem;
  display: grid;
  gap: 1.8rem;
}

.record-card {
  text-align: center;
  padding: 2rem 1.4rem 1.8rem;
  background: var(--kinari);
  border: 1px solid var(--kinari-fukami);
  box-shadow: 0 6px 18px var(--kami-kage);
}

.record {
  width: clamp(118px, 34vw, 148px);
  aspect-ratio: 1;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  background-color: var(--sumi);   /* グラデ非対応でも黒い盤になる保険 */
  background-image:
    /* ほのかな照り返し */
    linear-gradient(135deg, transparent 38%, color-mix(in srgb, var(--kinari) 16%, transparent) 47%, transparent 56%),
    /* 中心の小さな穴 */
    radial-gradient(circle, var(--kinari) 0 5.5%, transparent 5.5%),
    /* レーベルの金の縁（昭和スナックの金） */
    radial-gradient(circle, transparent 0 29%, color-mix(in srgb, var(--kin) 75%, transparent) 29% 30.5%, transparent 30.5%),
    /* 紫のレーベル */
    radial-gradient(circle, var(--murasaki-koi) 0 30.5%, transparent 30.5%),
    /* 盤面の溝 */
    repeating-radial-gradient(circle, var(--sumi) 0 2px, var(--sumi-usu) 2px 3px);
  box-shadow: 0 4px 10px var(--kami-kage-koi);
  transition: transform 0.8s ease;
}
/* 触れるとレコードがすこし回る */
.record-card:hover .record { transform: rotate(28deg); }

.record-card h3 {
  font-family: var(--font-fude);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.3em;
  color: var(--murasaki-koi);
  margin-bottom: 0.4rem;
}
.record-card p {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--sumi-usu);
  text-align: left;
}

/* =====================================================
   店内（額縁風の写真。写真が無いときはCSSだけの代替画）
   ===================================================== */
.photo-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

.photo {
  background: var(--kinari);
  border: 1px solid var(--kinari-fukami);
  border-radius: 6px;
  padding: 0.6rem 0.6rem 0.7rem;
  box-shadow: 0 6px 16px var(--kami-kage);
}

.photo img,
.photo.no-photo::before {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  border: 1px solid var(--kinari-fukami);
}
.photo img { object-fit: cover; }

.photo figcaption {
  padding-top: 0.55rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--sumi-usu);
}

/* --- 写真ファイルが無いとき（main.js が .no-photo を付与）--- */
.photo.no-photo img { display: none; }
.photo.no-photo::before {
  content: "";
  display: block;
  background-color: var(--sumi);
}

/* カウンター: 暗がりに暖色の灯り＋木目の横帯 */
.photo.no-photo[data-fallback="counter"]::before {
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 20%, color-mix(in srgb, var(--kin) 52%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sumi) 92%, var(--kin)) 0 45%, transparent 45%),
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--kin) 42%, var(--sumi)) 0 13px,
      color-mix(in srgb, var(--kin) 30%, var(--sumi)) 13px 15px,
      color-mix(in srgb, var(--kin) 48%, var(--sumi)) 15px 27px,
      color-mix(in srgb, var(--kin) 26%, var(--sumi)) 27px 29px);
}

/* 棚の瓶: 深い色の縦長シルエットが並ぶ */
.photo.no-photo[data-fallback="bottles"]::before {
  background-image:
    radial-gradient(ellipse 90% 45% at 50% 0%, color-mix(in srgb, var(--kin) 38%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--sumi) 96%, var(--murasaki-koi)) 0 14%, transparent 14%),
    linear-gradient(0deg, color-mix(in srgb, var(--kin) 45%, var(--sumi)) 0 7%, transparent 7%),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--kin) 26%, var(--sumi)) 0 24px,
      color-mix(in srgb, var(--kin) 52%, var(--sumi)) 24px 27px,
      color-mix(in srgb, var(--kin) 26%, var(--sumi)) 27px 33px,
      var(--sumi) 33px 45px);
}

/* ランプ: 暗がりの中の、あたたかい灯りひとつ */
.photo.no-photo[data-fallback="lamp"]::before {
  background-image:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--kin) 88%, var(--kinari)) 0 5%,
      color-mix(in srgb, var(--kin) 60%, transparent) 13%,
      color-mix(in srgb, var(--shu) 22%, transparent) 30%,
      transparent 55%),
    radial-gradient(ellipse 120% 60% at 50% 100%, color-mix(in srgb, var(--murasaki-koi) 35%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sumi), color-mix(in srgb, var(--sumi) 86%, var(--murasaki-koi)));
}

/* =====================================================
   ご案内
   ===================================================== */
.info-list {
  max-width: 38rem;
  margin: 3rem auto 0;
  border-top: 1px solid var(--keisen);
}

.info-item {
  padding: 1.15rem 0.4rem;
  border-bottom: 1px solid var(--keisen);
}

.info-item dt {
  font-size: 0.92rem;
  letter-spacing: 0.5em;
  color: var(--murasaki-koi);
}

.info-item dd {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.07em;
}

/* ひとこと（縦書きで、余韻を残して） */
.info-hitokoto {
  width: -moz-fit-content;
  width: fit-content;
  margin: 3.6rem auto 0;
  font-size: 1.02rem;
  line-height: 2.6;                /* 縦書きの行（列）の間隔 */
  letter-spacing: 0.32em;
  color: var(--sumi-usu);
}

/* =====================================================
   フッター
   ===================================================== */
.site-foot {
  margin-top: 2rem;
  padding: 3.2rem 1rem 7rem;       /* 下は女将キャラの居場所ぶん広めに */
  text-align: center;
  border-top: 1px solid var(--keisen-usu);
}
.site-foot img { margin: 0 auto 0.7rem; }
.foot-name {
  font-family: var(--font-fude);
  font-size: 1.45rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.foot-copy {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--sumi-usu);
}

/* =====================================================
   スクロール出現（.reveal は main.js が付与）
   ※ translate プロパティを使い、各要素の transform（中央寄せ等）と
     衝突しないようにしている
   ===================================================== */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.9s ease, translate 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* =====================================================
   600px以上（タブレット〜）
   ===================================================== */
@media (min-width: 600px) {
  .site-nav { padding: 0.6rem 1.6rem; }
  .nav-links { font-size: 0.88rem; gap: 0.1rem 1.5rem; }

  /* --- 短冊: 紐で吊るした縦書きタイトルの下げ札に --- */
  .tanzaku-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1.8rem, 5vw, 3.6rem);
    max-width: none;
    padding-top: 1.4rem;           /* 朱の紐がはみ出すぶん */
  }
  .tanzaku {
    display: flex;
    flex-direction: row-reverse;   /* 縦書きタイトルを右側に */
    gap: 1.3rem;
    width: clamp(15rem, 38vw, 19.5rem);
    min-height: 21rem;
    padding: 3.4rem 1.6rem 2.2rem;
    background-image: linear-gradient(180deg, transparent 78%, color-mix(in srgb, var(--kinari-fukami) 60%, transparent));
    box-shadow:
      0 2px 4px var(--kami-kage),
      0 16px 30px var(--kami-kage-koi); /* 紙の浮いた影 */
    transform: rotate(-0.5deg);    /* 手で吊るしたわずかな傾き */
  }
  .tanzaku:nth-child(2) { transform: rotate(0.6deg); }

  /* 紐穴（上端の丸飾り） */
  .tanzaku::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 50%;
    width: 11px; height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: var(--kinari-fukami);
    box-shadow:
      inset 0 1px 2px color-mix(in srgb, var(--sumi) 40%, transparent),
      0 0 0 3px var(--kinari),
      0 0 0 4px var(--kinari-fukami);
  }
  /* 穴に通した朱の紐 */
  .tanzaku::after {
    content: "";
    position: absolute;
    top: -1.35rem;
    left: 50%;
    width: 2px;
    height: 2.55rem;
    margin-left: -1px;
    background: var(--shu);
  }

  .tanzaku-title {
    writing-mode: vertical-rl;     /* 短冊らしく縦書きに戻す */
    font-size: 1.5rem;
    letter-spacing: 0.42em;
    border-bottom: 0;
    border-left: 1px solid var(--keisen-usu);
    padding: 0.15rem 0 0 1.1rem;
    margin-bottom: 0;
  }
  .tanzaku-list { flex: 1 1 auto; min-width: 0; }

  /* --- レコード・写真は3枚横並び --- */
  .record-cards { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); }
  .photo-grid   { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.5rem); }

  /* --- ご案内: 用語と説明を横並びに --- */
  .info-item {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1.4rem;
    align-items: start;
  }
  .info-item dt { border-right: 1px solid var(--murasaki-usu); }
  .info-item dd { margin-top: 0; }
}

/* =====================================================
   960px以上（デスクトップ）
   ===================================================== */
@media (min-width: 960px) {
  .omenu, .ongaku, .tennai, .goannai {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sec-title { gap: 1.5rem; }
  .sec-title::before,
  .sec-title::after { flex-basis: 8.5rem; }

  .hero-sub { right: clamp(3rem, 11vw, 9rem); }

  .tanzaku-row { gap: 4.5rem; }
  .tanzaku { min-height: 23rem; }

  .record-card p { font-size: 0.9rem; }
}