/* =========================================================================
   大衆酒場「とら吉」専用デザイン上書き（style.css の後に読み込む）
   -------------------------------------------------------------------------
   コンセプト：賑わい・下町・炭火の熱気。余白を削り、太い縁取りと赤提灯色で
   「安い・うまい・にぎやか・今すぐ行きたい」を前面に出す。丸みは最小限、
   写真は彩度・コントラスト高めでシズル感を強調。カードは木札・黒板のような
   太い縁取りで、上品さより体温と勢いを優先する。
   theme.css（色）・style.css（骨格）はそのまま。ここでは
   フォント・写真の見せ方・カード/ボタンの形・区切りの意匠だけを差し替える。
   ========================================================================= */

:root {
  --font-serif: "Shippori Antique B1", "Noto Sans JP", sans-serif;
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-brush: "Yuji Syuku", var(--font-serif);
}

body { letter-spacing: 0; }

/* ---- 見出し全般：極太・字間を締めて力強く ---- */
.section-title,
.feature-band__title,
.article__title,
.staff__name,
.menu-category__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- セクションラベルを提灯（ちょうちん）風の小さな札に ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background-color: var(--color-brand-accent);
  color: #fff;
  padding: 0.32em 0.9em 0.32em 0.7em;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}
.section-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  flex: none;
}
.section--deep .section-label,
.section--gold .section-label {
  background-color: var(--color-gold);
  color: var(--color-brand-deep);
}
.section--gold .section-label::before { background-color: rgba(30, 23, 18, 0.6); }

/* =========================================================================
   ヒーロー：全面写真＋濃いめの座布団。下端をのれん（暖簾）風のギザギザで断つ
   ========================================================================= */
.hero { background-color: var(--color-brand-deep); }
.hero__bg { filter: saturate(1.3) contrast(1.12) brightness(1.03); }
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4rem); }

.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: 0.12em;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 0.35em 0.9em;
  border-radius: 3px;
}
.hero__title {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: calc(var(--font-size-hero) * 1.05);
  letter-spacing: 0.02em;
}

/* 提灯の光がにじむような縁取りをタイトルに */
.hero__title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 0 28px rgba(192, 57, 43, 0.35); }

/* 「本日も営業中」の木札バッジ */
.hero__content--izakaya { position: relative; }
.hero__content--izakaya::before {
  content: "本日も営業中";
  display: inline-block;
  background-color: var(--color-gold);
  color: var(--color-brand-deep);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--font-size-micro);
  letter-spacing: 0.08em;
  padding: 0.35em 1em;
  border-radius: 3px;
  margin-bottom: var(--space-4);
}

/* のれん（curtain）のギザギザで、ヒーローと次のセクションを区切る */
.hero { overflow: visible; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16px;
  background:
    linear-gradient(135deg, var(--color-surface) 50%, transparent 50%),
    linear-gradient(-135deg, var(--color-surface) 50%, transparent 50%);
  background-size: 22px 22px;
  background-position: bottom left, bottom left;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
}

/* =========================================================================
   カード・写真：木札・黒板のような太い縁取り。丸みは最小限
   ========================================================================= */
.card,
.review,
.staff {
  border-radius: 4px;
  box-shadow: none;
  border: 2px solid var(--color-brand-deep);
}
.card__media { border-radius: 0; }
.card__media img { filter: saturate(1.2) contrast(1.08); }

.section-figure,
.page-figure,
.article__lead,
.feature-band__media,
.map-embed {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-brand-deep);
  border: 4px solid var(--color-surface);
}

.staff__photo {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-brand-deep);
  border: 4px solid var(--color-surface);
}
.staff__photo img { filter: saturate(1.15) contrast(1.05); }

/* 看板メニューの写真：白フチ＋黒縁の額装＋「オススメ」木札タグ */
/* フェードをやめて額装にした分、style.cssの負のマージンを解除して下の項目とかぶらないようにする */
.signature-photos { margin-bottom: var(--space-5); }
.signature-photos figure { position: relative; margin: 6px 0 0; }
.signature-photos img {
  border-radius: 4px;
  -webkit-mask-image: none;
          mask-image: none;
  border: 4px solid var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-brand-deep);
  filter: saturate(1.28) contrast(1.12) brightness(1.02);
}
.signature-photos figure::before {
  content: "オススメ";
  position: absolute;
  top: -10px; left: -8px;
  background-color: var(--color-brand-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.28em 0.7em;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* =========================================================================
   ボタン：角の立った太枠。押すと沈み込む看板ボタン
   ========================================================================= */
.btn {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-width: 2px;
}
.btn--primary {
  border-color: var(--color-brand-deep);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.btn--primary:hover { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); transform: translateY(1px); }
.btn--outline { border-width: 2px; }
.btn:active { transform: translateY(1px) scale(var(--button-active-scale)); }

.frap { border-radius: 6px; font-weight: 700; letter-spacing: 0.02em; }

/* =========================================================================
   価格表示：山吹色・太字で「安い」を一目で
   ========================================================================= */
.signature-item__price,
.menu-item__price {
  color: var(--color-gold);
  font-weight: 700;
  font-size: 1.08em;
}

/* =========================================================================
   区切り：セクションとセクションの間に、祭りの縄のような斜めストライプ
   ========================================================================= */
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-brand-accent) 0 10px,
    var(--color-gold) 10px 20px
  );
}

/* お品書き：カテゴリ見出しを黒板の下線風に太く */
.menu-category__title {
  border-bottom: 4px solid var(--color-brand-accent);
  padding-bottom: var(--space-2);
}
.menu-category { margin-bottom: var(--space-9); }
.menu-nav__list a { border-radius: 4px; font-weight: 700; }

/* お知らせタグ：黒板風の塗りつぶし札 */
.news-list__tag {
  background-color: var(--color-brand-deep);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: 3px;
  font-weight: 700;
  padding: 0.18em 0.8em;
}

/* アクセス手順の丸数字を赤提灯色に */
.access-steps li::before { background-color: var(--color-brand-accent); }

/* 引用の星マークを少し大きく */
.review__stars { font-size: 1.1em; letter-spacing: 0.1em; }