/* ==========================================
   全体の基本設定（黒メインのシックなトーン）
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #121212; /* 深いダークグレー */
  color: #e0e0e0;            /* 目に優しい明るいグレー文字 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 100px 0;
}

.bg-darker {
  background-color: #0a0a0a; /* さらに暗い黒でセクション区切り */
}

/* ==========================================
   見出し・共通パーツ
   ========================================== */
.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
  color: #d4af37; /* ゴールド系アクセント */
  letter-spacing: 0.15em;
}

.section-title.left {
  text-align: left;
}

.section-sub {
  text-align: center;
  color: #888;
  margin-bottom: 50px;
}

/* ==========================================
   1. ヘッダー
   ========================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(5px);
  z-index: 1000;
  border-bottom: 1px solid #222;
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #fff;
}

.nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav a {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: #ccc;
  transition: color 0.3s;
}

.nav a:hover {
  color: #d4af37;
}

/* ==========================================
   2. ヒーローエリア（背景画像＋グラデーション）
   ========================================== */
.hero {
  height: 100vh;
  /* 画像の上に黒い透過グラデーションを重ねて文字を見やすくしています */
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(18, 18, 18, 1)),
              url('image_12.png') no-repeat center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 300;
  margin-bottom: 20px;
  color: #fff;
}

.hero-content p {
  font-size: 1.1rem;
  color: #ccc;
}

/* ==========================================
   3. ABOUT
   ========================================== */
.about-flex {
  display: flex;
  gap: 50px;
  align-items: center;
}

.about-text {
  flex: 1;
}

.about-text h3 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.5;
}

.about-text p {
  color: #aaa;
}

.about-img {
  flex: 1;
  border-radius: 4px;
  overflow: hidden;
}

/* ==========================================
   4. BEER LIST (カード型デザイン)
   ========================================== */
.beer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.beer-card {
  background-color: #1a1a1a;
  padding: 30px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  position: relative;
  transition: transform 0.3s, border-color 0.3s;
}

.beer-card:hover {
  transform: translateY(-5px);
  border-color: #d4af37;
}

.beer-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #d4af37;
  color: #000;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 2px;
}

.beer-card h3 {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 5px;
}

.beer-style {
  font-size: 0.85rem;
  color: #d4af37;
  margin-bottom: 15px;
}

.beer-desc {
  font-size: 0.9rem;
  color: #999;
}

/* ==========================================
   5. SPACE (ギャラリー)
   ========================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.gallery-grid img {
  height: 300px;
  border-radius: 4px;
  transition: opacity 0.3s;
}

.gallery-grid img:hover {
  opacity: 0.85;
}

/* ==========================================
   6. ACCESS
   ========================================== */
.access-flex {
  display: flex;
  gap: 50px;
  align-items: center;
}

.access-info {
  flex: 1;
}

.access-info dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 15px 0;
  border-top: 1px solid #222;
  padding-top: 20px;
}

.access-info dt {
  color: #d4af37;
  font-weight: bold;
}

.access-info dd {
  color: #ccc;
}

.access-img {
  flex: 1;
  border-radius: 4px;
  overflow: hidden;
}

/* ==========================================
   フッター
   ========================================== */
.footer {
  text-align: center;
  padding: 30px 0;
  background-color: #050505;
  color: #555;
  font-size: 0.8rem;
  border-top: 1px solid #1a1a1a;
}
/* フードメニュー用スタイル */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 30px;
}

.food-category h3 {
  font-size: 1.2rem;
  color: #d4af37;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}

.food-category ul {
  list-style: none;
}

.food-category li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #222;
  font-size: 0.95rem;
  color: #ccc;
}
/* ==========================================
   MENU セクション拡張用スタイル
   ========================================== */
.menu-block {
  margin-bottom: 70px;
}

.menu-cate-title {
  font-size: 1.5rem;
  color: #d4af37;
  border-left: 4px solid #d4af37;
  padding-left: 15px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.menu-sub-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
  background-color: #1a1a1a;
  padding: 25px;
  border-radius: 6px;
  border: 1px solid #333;
}

.sub-box-item h4 {
  color: #d4af37;
  font-size: 1rem;
  margin-bottom: 5px;
}

.sub-box-item p {
  color: #ccc;
  font-size: 0.9rem;
}

/* フードメニュー・ドリンク一覧スタイル */
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.food-category h4 {
  font-size: 1.1rem;
  color: #fff;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.food-category ul {
  list-style: none;
}

.food-category li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #222;
  font-size: 0.88rem;
  color: #bbb;
}

.food-category li span:last-child {
  color: #d4af37;
  font-weight: bold;
}
/* ==========================================
   MENU セクション（木目背景適用）
   ========================================== */
#menu {
  /* 木目画像の読み込みと繰り返し・フィット設定 */
  background: url('wood-bg.jpg') center center / cover no-repeat;
  position: relative;
  /* 画像の上に少し暗めのフィルターを重ねて文字を読みやすくします */
  background-color: rgba(0, 0, 0, 0.4);
  background-blend-mode: overlay;
}

/* 木目背景の上でも見やすいようにカードの枠組みを透過ブラックに変更 */
#menu .beer-card {
  background-color: rgba(18, 18, 18, 0.85); /* ほんのり木目が透ける漆黒 */
  border: 1px solid rgba(212, 175, 55, 0.3); /* 金色の薄いフレーム */
  backdrop-filter: blur(4px);                  /* 背景を少しぼかして高級感を出す */
}

#menu .menu-sub-box {
  background-color: rgba(18, 18, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

#menu .food-category {
  background-color: rgba(18, 18, 18, 0.85);
  padding: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

/* 木目上の見出しをより一層引き立たせる処理 */
#menu .section-title {
  color: #f3e5ab; /* 少し明るめのゴールド */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#menu .section-sub {
  color: #ddd;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

#menu .menu-cate-title {
  color: #fff;
  border-left: 4px solid #d4af37;
  padding-left: 15px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* フード・ドリンクメニューのリスト項目調整 */
.food-category h4 {
  font-size: 1.1rem;
  color: #d4af37;
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.food-category ul {
  list-style: none;
}

.food-category li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #333;
  font-size: 0.9rem;
  color: #eee;
}

.food-category li span:last-child {
  color: #f3e5ab;
  font-weight: bold;
}
/* ==========================================
   MENU セクション（和紙背景適用）
   ========================================== */
#menu {
  /* ダウンロードした和紙画像を読み込み */
  background: url('和紙１.jpg') center center / cover no-repeat;
  position: relative;
  /* 背景の明度を抑えて質感を馴染ませる */
  background-color: rgba(10, 10, 10, 0.4);
  background-blend-mode: overlay;
}

/* メニューカードのフレーム設定（和紙の上でくっきり見せる） */
#menu .beer-card,
#menu .menu-sub-box,
#menu .food-category {
  background-color: rgba(18, 18, 18, 0.88); /* 上品な半透明ブラック */
  border: 1px solid rgba(212, 175, 55, 0.35);  /* ゴールドの細い縁取り */
  backdrop-filter: blur(3px);                  /* 背面の和紙質感をうっすらぼかす */
  border-radius: 4px;
}

/* タイトル周りのゴールドアクセント */
#menu .section-title {
  color: #d4af37;
  letter-spacing: 0.15em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

#menu .menu-cate-title {
  color: #fff;
  border-left: 3px solid #d4af37;
  padding-left: 12px;
}
/* ==========================================
   MENU セクション（桜色和紙背景・和モダン最適化）
   ========================================== */
#menu {
  /* 和紙背景画像の設定 */
  background: url('和紙１.jpg') center center / cover no-repeat;
  position: relative;
  /* 背景のピンク色を殺さないよう、薄い暗がりだけを重ねる */
  background-color: rgba(15, 10, 12, 0.25);
  background-blend-mode: overlay;
  padding: 80px 0;
}

/* メニューカード：深い墨色 ＋ 半透明 ＋ 金の細フレーム */
#menu .beer-card,
#menu .menu-sub-box,
#menu .food-category {
  /* 背景を真っ黒ではなく、ほんのり赤み・紫みを含んだ深い墨色に */
  background-color: rgba(22, 18, 20, 0.78);
  /* 和紙のテクスチャをすりガラス越しに見せる */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* シャンパンゴールドの繊細な枠線 */
  border: 1px solid rgba(230, 202, 101, 0.3);
  border-radius: 6px;
  /* やわらかい影で立体感を出す */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* ホバー時にカードがほんのり浮き上がる演出（お好みで） */
#menu .beer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 202, 101, 0.6);
}

/* タイトル・文字色の調整 */
#menu .section-title {
  color: #e6ca65; /* シャンパンゴールド */
  letter-spacing: 0.15em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

#menu .section-sub {
  color: #e0d6d8; /* ほんのりサクラがかった白 */
}

#menu .menu-cate-title {
  color: #fff;
  border-left: 3px solid #e6ca65;
  padding-left: 12px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ビールカード内のテキスト配色 */
#menu .beer-card h3 {
  color: #ffffff;
  font-size: 1.15rem;
}

#menu .beer-style {
  color: #e6ca65; /* スタイル表記（アルコール度数等）を品のあるゴールドに */
  font-size: 0.85rem;
  margin: 6px 0 10px 0;
}

#menu .beer-desc {
  color: #d0c8ca; /* 説明文を少し柔らかい白に */
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ==========================================
   全体の基本設定（白・和モダンテイスト）
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fcfbfa; /* 暖かみのある明るいオフホワイト */
  color: #2b2b2b;            /* 視認性の良い濃いグレーの文字 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 100px 0;
}

/* ==========================================
   1. ヘッダー（白背景＋スリガラス）
   ========================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  border-bottom: 1px solid #eae6e1;
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #1a1a1a;
}

.nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav a {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: #555;
  transition: color 0.3s;
}

.nav a:hover {
  color: #c49a45; /* 品のあるゴールド */
}

/* ==========================================
   2. ヒーローエリア（背景画像＋パララックス固定効果）
   ========================================== */
.hero-parallax {
  height: 100vh;
  /* お酒やボトルの写真を指定 */
  background-image: url('image_12.png');
  background-size: cover;
  background-position: center;
  /* ▼ ここがポイント：背景を固定してスクロールで流れる効果を演出 */
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

/* 写真の上にうっすら暗い膜を重ねて文字を浮き立たせる */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   3. MENU セクション（明るい和紙風＋白カード）
   ========================================== */
.menu-parallax {
  /* 背景に桜色の和紙画像を敷きつつ、スクロールで固定させる場合 */
  background-image: url('IMG_5483.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

/* 背景和紙のピンクを上品に見せる明るいオーバーレイ */
.menu-parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(253, 251, 248, 0.65); /* 白を多めに透けさせる */
  z-index: 1;
}

.menu-parallax .container {
  position: relative;
  z-index: 2;
}

.section-title {
  font-size: 2.2rem;
  text-align: center;
  color: #8c2a38; /* 桜・ビールに映える深いえんじ色（アクセント） */
  letter-spacing: 0.15em;
  margin-bottom: 5px;
}

.section-sub {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 50px;
}

.menu-block {
  margin-bottom: 60px;
}

.menu-cate-title {
  font-size: 1.3rem;
  color: #1a1a1a;
  border-left: 4px solid #8c2a38;
  padding-left: 12px;
  margin-bottom: 25px;
  letter-spacing: 0.1em;
}

/* 白ベースのカードデザイン */
#menu .beer-card,
#menu .menu-sub-box,
#menu .food-category {
  background-color: rgba(255, 255, 255, 0.92); /* 清潔感のある白 */
  border: 1px solid #eae2d8;
  border-radius: 6px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 上品で柔らかい影 */
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#menu .beer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ビールカード内のテキスト（明るい背景用） */
#menu .beer-card h3 {
  color: #1a1a1a;
  font-size: 1.15rem;
}

#menu .beer-style {
  color: #9e7527; /* 落ち着いたアンバーゴールド */
  font-size: 0.85rem;
  font-weight: bold;
  margin: 5px 0 10px 0;
}

#menu .beer-desc {
  color: #555;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* フードメニュー用リスト（白背景用） */
.food-category h4 {
  font-size: 1.05rem;
  color: #8c2a38;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.food-category ul {
  list-style: none;
}

.food-category li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e8e8e8;
  font-size: 0.9rem;
  color: #333;
}

.food-category li span:last-child {
  color: #9e7527;
  font-weight: bold;
}

/* フッター */
.footer {
  text-align: center;
  padding: 30px 0;
  background-color: #1a1a1a;
  color: #888;
  font-size: 0.8rem;
}

/* ==========================================
   MENUサブボックス・カード内の可読性強化
   ========================================== */

/* カード背景（少しだけ締め色をプラス） */
#menu .menu-sub-box,
#menu .beer-card,
#menu .food-category {
  background-color: #ffffff; /* 純白にしてコントラストを最大化 */
  border: 1px solid #e0d8cd;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* 見出し（DRAFT BEER, BEER FLIGHT など）：濃いブロンズゴールド */
#menu .menu-sub-box h3,
#menu .menu-sub-box h4,
#menu .beer-card h3 {
  color: #8b5a2b !important; /* 視認性の高いシックな茶褐色 */
  font-weight: 700;           /* しっかり太字に */
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* 見出しの横にあるカッコ書き（飲み比べ、各800yen など） */
#menu .menu-sub-box h3 span,
#menu .menu-sub-box h4 span {
  color: #4a3319;
  font-size: 0.9em;
}

/* 補足文章・価格の文字色（1 glass : 800yen... など）：濃いグレー */
#menu .menu-sub-box p,
#menu .menu-sub-box li,
#menu .beer-desc,
#menu .food-category li {
  color: #2b2b2b !important; /* はっきり読めるダークグレー */
  font-size: 0.92rem;        /* 気持ちサイズをアップ */
  font-weight: 500;           /* ややしっかりめの太さに */
  line-height: 1.6;
}

/* フードメニューの価格表記など */
#menu .food-category li span:last-child,
#menu .beer-price {
  color: #8b5a2b !important;
  font-weight: bold;
}

/* ==========================================
   ABOUT US セクションの文字可読性強化
   ========================================== */

/* ABOUT US 全体背景（白・明るいベース） */
#about {
  background-color: #fcfbfa; /* 明るい背景 */
  padding: 80px 0;
}

/* タイトル (ABOUT US) */
#about .section-title {
  color: #8c2a38 !important; /* 濃いエンジ色で視認性UP */
  font-weight: bold;
}

/* 小見出し（素材と職人技が織りなす、唯一無二の味わい） */
#about h3,
#about .about-subtitle {
  color: #1a1a1a !important; /* 白と同化していた文字をくっきり濃い墨色へ */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* 本文（SAKURA BREWERY では...） */
#about p,
#about .about-text {
  color: #333333 !important; /* 薄いグレーから読みやすい濃いグレーへ */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

/* ==========================================
   MENU タイトル周りの可読性強化
   ========================================== */

/* 「MENU」メインタイトル */
#menu .section-title {
  color: #8c2a38 !important; /* 桜色背景に映える深いエンジ色 */
  font-weight: 800;           /* 太字で存在感を出す */
  letter-spacing: 0.15em;
  text-shadow: none !important; /* ぼやけたドロップシャドウを削除 */
  margin-bottom: 8px;
}

/* 「全メニュー一覧（表示価格は税込です）」サブタイトル */
#menu .section-sub {
  color: #2b2b2b !important; /* 白・グレーからくっきり読めるダークグレーへ */
  font-weight: 600;           /* 少し太めの設定に */
  font-size: 0.95rem;
  text-shadow: none !important; /* シャドウを消して輪郭をクッキリさせる */
}

/* ==========================================
   1. ファーストビュー（固定背景）の設定
   ========================================== */
.hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh; /* 画面全体の高さ */
  z-index: 1;    /* コンテンツ層より下に配置 */
  
  /* --------------------------------------------------
     ▼ ここでお酒の背景画像を自由に差し替えられます
     -------------------------------------------------- */
  background: url('お酒.jpg') center center / cover no-repeat;
}

/* 背景写真の上に少し暗めの透過オーバーレイを重ねて文字を際立たせる */
.hero-inner {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* 暗さの調整（0.2〜0.5で好みに変更可） */
  display: flex;
  align-items: flex-end; /* CRAFT BEER BASE風に文字を左下に配置 */
  padding: 0 0 80px 8%;
}

.hero-content h1 {
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}

.hero-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* ==========================================
   2. 上から覆いかぶさるコンテンツ層（重ね順制御）
   ========================================== */
.main-content-layer {
  position: relative;
  z-index: 10; /* ファーストビューより手前に重ねる */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); /* 境目に立体的な影をつける */
}

/* ABOUT セクション（白地ベースでしっかり覆い隠す） */
.about-section {
  background-color: #fcfbfa; /* 覆い隠すための背景色（白・オフホワイト） */
  padding: 100px 0;
}

/* MENU セクション（桜色和紙背景） */
.menu-section {
  /* --------------------------------------------------
     ▼ MENUの背景（桜色和紙など）もここで設定
     -------------------------------------------------- */
  background: url('和紙１.jpg') center center / cover no-repeat;
  position: relative;
  padding: 100px 0;
}

.menu-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(253, 251, 248, 0.5); /* 和紙の赤みを綺麗に見せる透過度 */
  z-index: 1;
}

.menu-section .container {
  position: relative;
  z-index: 2;
}

/* ==========================================
   全セクションの左右透過（端のすけ）完全解消
   ========================================== */

/* 1. 上から覆いかぶさるレイヤー全体を画面幅100%で塗りつぶす */
.main-content-layer {
  width: 100%;
  background-color: #fcfbfa !important; /* ベースの背景色 */
  position: relative;
  z-index: 10;
}

/* 2. 各セクション要素自体の横幅を100%にして背景を端まで敷き詰める */
#about, #space, #access,
.about-section, .space-section, .access-section {
  width: 100% !important;
  background-color: #fcfbfa !important; /* 完全に塗りつぶす */
  box-sizing: border-box;
}

/* 3. MENUセクションも横幅100%で和紙背景を端まで敷き詰める */
#menu, .menu-section {
  width: 100% !important;
  box-sizing: border-box;
}

/* 4. 幅を制限するのは内部の .container だけにする */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================
   SHOP INFO (ACCESS) エリアの背景をダークグレーに変更
   ========================================== */

/* ACCESS / SHOP INFO セクション全体の背景をダークグレーにし、文字を白・淡色へ */
#access,
.access-section {
  width: 100% !important;
  background-color: #1a1a1a !important; /* シックなダークグレー */
  position: relative;
  z-index: 10;
  padding: 80px 0;
  box-sizing: border-box;
}

/* SHOP INFO のタイトル（濃いエンジ色またはゴールド） */
#access .section-title {
  color: #e6ca65 !important; /* ダークグレーに映えるゴールド */
  font-weight: 800;
  letter-spacing: 0.15em;
  text-shadow: none !important;
  margin-bottom: 30px;
}

/* 左側の項目名（店名・営業時間・定休日など） */
#access th,
#access .info-label,
#access dt {
  color: #c49a45 !important; /* 上品なゴールド/ブロンズ */
  font-weight: bold;
}

/* 右側のテキスト内容（17:00-23:00、月曜日・第2火曜日 など） */
#access td,
#access .info-value,
#access dd,
#access p {
  color: #e0e0e0 !important; /* ダークグレーの背景でくっきり読める明るいグレー・オフホワイト */
  font-weight: 500;
}
/* ==========================================
   セクション間の余白（隙間）調整
   ========================================== */

/* 上のセクション（SPACE等）の下側に十分なマージンをとる */
#space,
.space-section {
  margin-bottom: 60px !important; /* セクション外側の隙間を確保 */
  padding-bottom: 60px !important; /* セクション内部下の余白も調整 */
}

/* 下のセクション（ACCESS / SHOP INFO）の上側に余白を設ける */
#access,
.access-section {
  margin-top: 40px !important;    /* 上のセクションとの間に隙間をつくる */
  padding-top: 80px !important;   /* セクション内側の上のゆとり */
}

/* ==========================================
   ABOUT セクション（テキスト ＋ ビールサーバー1枚）
   ========================================== */

.about-flex {
  display: flex;
  gap: 50px;
  align-items: center;
  margin-top: 30px;
}

/* 左側テキスト領域 */
.about-text-box {
  flex: 1.1;
}

.about-text-box h3 {
  color: #1a1a1a !important;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.about-text-box p {
  color: #333333 !important;
  font-size: 0.98rem;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* 右側画像領域（ビールサーバー写真） */
.about-single-image {
  flex: 0.9;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

.about-single-image img {
  width: 100%;
  height: 380px;         /* 写真の高さ */
  object-fit: cover;     /* アスペクト比を保って綺麗に切り抜き */
  display: block;
  transition: transform 0.5s ease;
}

/* マウスを乗せた時にうっすらズームする演出 */
.about-single-image:hover img {
  transform: scale(1.03);
}

/* 写真右下の英語ラベル */
.about-single-image .img-caption {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: #e6ca65;         /* ブロンズゴールド */
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  border-radius: 4px;
}

/* スマホ表示対応（縦並びへ自動切り替え） */
@media (max-width: 768px) {
  .about-flex {
    flex-direction: column;
    gap: 30px;
  }
  .about-single-image img {
    height: 250px;
  }
}

/* ==========================================
   ABOUT セクション（写真の高さ拡張・ラベル非表示）
   ========================================== */

.about-flex {
  display: flex;
  gap: 50px;
  align-items: center; /* 上下に中央揃え（必要に応じて flex-start に変更可） */
  margin-top: 30px;
}

/* 左側テキスト領域 */
.about-text-box {
  flex: 1.1;
}

/* 右側画像領域（高さアップ＆フィット感調整） */
.about-single-image {
  flex: 0.9;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.about-single-image img {
  width: 100%;
  height: 460px;         /* 380pxから460pxに広げて文章の高さとバランスを調整 */
  object-fit: cover;     /* アスペクト比を崩さず綺麗に納める */
  display: block;
  transition: transform 0.5s ease;
}

/* ラベル削除用の指定（HTMLに残っていても非表示にします） */
.about-single-image .img-caption {
  display: none !important;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
  .about-single-image img {
    height: 280px;
  }
}

/* ==========================================
   SHOP INFO & ACCESS（マップ ＋ Instagramボタン）
   ========================================== */

.access-flex {
  display: flex;
  gap: 40px;
  align-items: stretch;
  margin-top: 30px;
}

/* 左側：店舗情報 */
.access-info {
  flex: 1;
}

.access-info h3 {
  color: #e6ca65 !important; /* ゴールド */
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.access-info .address {
  color: #dddddd !important;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.info-table th, 
.info-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-table th {
  color: #c49a45 !important;
  text-align: left;
  width: 100px;
  font-weight: bold;
}

.info-table td {
  color: #e0e0e0 !important;
}

/* ★ Instagram ボタンのデザイン */
.sns-box {
  margin-top: 20px;
}

.insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.5);
}

.insta-icon {
  fill: #ffffff;
}

/* 右側：Googleマップ */
.access-map {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* スマホ対応（縦並びへ自動調整） */
@media (max-width: 768px) {
  .access-flex {
    flex-direction: column;
    gap: 30px;
  }
}

/* ==========================================
   SHOP INFO & ACCESS（外観写真・情報・マップの3列構造）
   ========================================== */

.access-flex {
  display: flex;
  gap: 30px;
  align-items: stretch;
  margin-top: 30px;
}

/* 1. 外観写真スタイル */
.access-photo {
  flex: 0.9;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  min-height: 300px;
}

.access-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #e6ca65; /* ゴールド */
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

/* 2. 店舗情報スタイル */
.access-info {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.access-info h3 {
  color: #e6ca65 !important;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.access-info .address {
  color: #dddddd !important;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.info-table th, 
.info-table td {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.info-table th {
  color: #c49a45 !important;
  text-align: left;
  width: 90px;
  font-weight: bold;
}

.info-table td {
  color: #e0e0e0 !important;
}

/* Instagramボタン */
.insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
  transition: transform 0.3s ease;
}

.insta-btn:hover {
  transform: translateY(-2px);
}

.insta-icon {
  fill: #ffffff;
}

/* 3. Googleマップスタイル */
.access-map {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  min-height: 300px;
}

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

/* スマホ表示（画面が狭いときは縦並び） */
@media (max-width: 900px) {
  .access-flex {
    flex-direction: column;
  }
  .access-photo,
  .access-map {
    min-height: 250px;
  }
}

/* ==========================================
   ACCESS & FOOTER （透け解消 ＆ ゆったりレイアウト）
   ========================================== */

/* 1. ACCESSセクション背景と十分なパディング */
#access,
.access-section {
  width: 100% !important;
  background-color: #1c1c1c !important; /* 完全に塗りつぶす */
  position: relative;
  z-index: 10;
  padding: 80px 0 60px 0 !important;   /* 上下にたっぷりと余白を作る */
  box-sizing: border-box;
}

/* 2. 上段（写真 ＋ 情報）を横幅ゆったり2列に */
.access-top-grid {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

/* 左：写真 */
.access-photo {
  flex: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.access-photo img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.photo-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #e6ca65;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
}

/* 右：店舗情報 */
.access-info {
  flex: 1.2;
}

.access-info h3 {
  color: #e6ca65 !important;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.access-info .address {
  color: #dddddd !important;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.info-table th, 
.info-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
}

.info-table th {
  color: #c49a45 !important;
  text-align: left;
  width: 100px;
  font-weight: bold;
}

.info-table td {
  color: #e0e0e0 !important;
}

/* Instagramボタン */
.insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.3);
  transition: transform 0.3s ease;
}

.insta-btn:hover {
  transform: translateY(-2px);
}

/* 3. 下段：マップ（横幅いっぱい） */
.access-bottom-map {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.access-bottom-map iframe {
  display: block;
  width: 100%;
}

/* 4. ★一番下の透け完全防止（フッターの背景黒塗り） */
.footer {
  width: 100% !important;
  background-color: #1c1c1c !important; /* ACCESSセクションと同色で接続 */
  position: relative;
  z-index: 10;
  padding: 40px 0 60px 0;
  text-align: center;
  color: #888888;
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .access-top-grid {
    flex-direction: column;
  }
  .access-photo img {
    height: 240px;
  }
}

/* ==========================================
   スマホ表示時の画像縦長（伸び）解消
   ========================================== */

@media (max-width: 768px) {
  
  /* 1. ファーストビュー（メイン画像）の高さをスマホ用に最適化 */
  .hero,
  .hero-section,
  .main-visual {
    height: 60vh !important;       /* 画面高さの60%程度に抑える */
    min-height: 400px !important;  /* 極端に小さくなりすぎるのを防ぐ */
  }

  .hero img,
  .main-visual img {
    height: 100% !important;
    object-fit: cover !important;  /* 比率を崩さず綺麗に納める */
  }

  /* 2. SPACEセクションのギャラリー画像を縦1列（または自然な比率）にする */
  .space-grid,
  .space-gallery,
  .gallery-grid {
    grid-template-columns: 1fr !important; /* 横2列から縦1列に変更 */
    gap: 15px !important;
  }

  /* SPACE内の画像自体の高さ調整 */
  .space-grid img,
  .space-gallery img,
  .space-section img {
    width: 100% !important;
    height: 220px !important;      /* 横長〜使いやすい高さに固定 */
    object-fit: cover !important;  /* 元の縦横比を崩さない */
  }
}

/* ==========================================
   MENU 週替わり案内のデザイン（くっきり調整版）
   ========================================== */

.menu-lead {
  text-align: center;
  margin-bottom: 35px;
  padding: 20px 25px;
  background: #ffffff;                    /* 背景を清潔感のある「白」に */
  border: 2px solid #8b263e;              /* 枠線を上品なバーガンディ/桜色に */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* うっすら影をつけて浮き立たせる */
}

.menu-lead .lead-highlight {
  color: #8b263e !important;              /* タイトルを濃いバーガンディ/ワインレッドに */
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.menu-lead .lead-sub {
  color: #222222 !important;              /* 説明文を濃いダークグレー（ほぼ黒）に */
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}
/* 店舗詳細テーブル内の電話番号リンク */
.tel-link {
  color: #c49a45 !important; /* 目立つゴールド・アクセントカラー */
  text-decoration: none;
  font-weight: bold;
}

.tel-link:hover {
  text-decoration: underline;
}
/* 電話番号リンクの色を周りの文字と同じ白にする */
.tel-link {
  color: #ffffff !important; /* 周りの文字と同じ白に設定 */
  text-decoration: none;
  font-weight: normal;       /* 周りと同じ太さに合わせる場合 */
}

.tel-link:hover {
  text-decoration: underline;
}
/* メニューカードの基本構造 */
.menu-card {
  background-color: #222222;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.menu-img-box img {
  width: 100%;
  height: 250px;
  object-fit: cover; /* 写真のアスペクト比を崩さず枠いっぱいに表示 */
  display: block;
}

.menu-content {
  padding: 20px;
  color: #ffffff;
}

.menu-badge {
  background-color: #8b263e; /* ブランドカラーの深い赤 */
  color: #ffffff;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.menu-title {
  font-size: 1.4rem;
  margin: 10px 0 5px 0;
  color: #ffffff;
}

.menu-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #c49a45; /* アクセントのゴールド */
  margin-bottom: 10px;
}

.menu-price .tax {
  font-size: 0.85rem;
  color: #cccccc;
  font-weight: normal;
}

.menu-desc {
  font-size: 0.9rem;
  color: #dddddd;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* コース内容リスト */
.course-detail-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  border-top: 1px dashed #444444;
  padding-top: 10px;
}

.course-detail-list li {
  font-size: 0.85rem;
  color: #bbb;
  padding: 3px 0;
  position: relative;
  padding-left: 15px;
}

.course-detail-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #c49a45;
}
.menu-img-box img {
  width: 100%;
  height: auto;      /* 高さを自動調整にして、写真が潰れないようにする */
  max-height: 400px; /* 必要であれば、写真が大きくなりすぎないように高さを制限（調整可能） */
  object-fit: contain; /* ★重要：写真全体を枠の中に収める（見切れなくなる） */
  display: block;
}
/* カード全体の設定 */
.menu-card {
  background-color: #222222;
  border-radius: 8px;
  overflow: hidden; /* 角丸からはみ出ないようにする */
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* 画像表示エリア */
.menu-img-box {
  width: 100%;
  background-color: transparent; /* 余計な背景色を消す */
}

.menu-img-box img {
  width: 100%;          /* カードの横幅ぴったりに広げる */
  height: auto;         /* 高さは写真本来の比率に任せる（縦横比が崩れず、見切れません） */
  display: block;       /* 下のスキマを消す */
  object-fit: initial;  /* 切り取りや無理な縮小を解除 */
}
/* メニューカード全体（PCでは左右横並び） */
.menu-card {
  display: flex;
  background-color: #222222;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  align-items: center; /* 写真と文章の上下中央を揃える */
}

/* 左側：写真エリア */
.menu-img-box {
  flex: 0 0 45%; /* カード全体の45%の幅を写真にする */
  max-width: 45%;
}

.menu-img-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* 綺麗にフィットさせる */
}

/* 右側：テキストエリア */
.menu-content {
  flex: 1; /* 残りのスペース（55%）を文章エリアにする */
  padding: 25px;
  color: #ffffff;
}

.menu-badge {
  background-color: #8b263e;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.menu-title {
  font-size: 1.3rem;
  margin: 10px 0 5px 0;
  color: #ffffff;
}

.menu-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #c49a45;
  margin-bottom: 10px;
}

.menu-price .tax {
  font-size: 0.85rem;
  color: #cccccc;
  font-weight: normal;
}

.menu-desc {
  font-size: 0.85rem;
  color: #dddddd;
  line-height: 1.5;
  margin-bottom: 12px;
}

.course-detail-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  border-top: 1px dashed #444444;
  padding-top: 10px;
}

.course-detail-list li {
  font-size: 0.8rem;
  color: #bbb;
  padding: 2px 0;
  position: relative;
  padding-left: 12px;
}

.course-detail-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #c49a45;
}

/* スマホ表示時の設定（画面幅が狭いときは自動で縦並びに戻す） */
@media (max-width: 768px) {
  .menu-card {
    flex-direction: column; /* 縦並びに変更 */
  }
  
  .menu-img-box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
/* スマホ表示時（画面幅768px以下）のヘッダー調整 */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* ロゴとメニューを上下2行に分ける */
    padding: 10px 15px;
    align-items: center;
  }

  /* ロゴの大きさと余白調整 */
  .logo, header h1 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    text-align: center;
  }

  /* メニューのリンク一覧 */
  nav ul {
    display: flex;
    justify-content: center;
    gap: 12px; /* リンク同士の間隔を少し狭くする */
    padding: 0;
    margin: 0;
    width: 100%;
  }

  nav ul li a {
    font-size: 0.75rem; /* 文字サイズを少し小さくして収める */
    white-space: nowrap; /* 改行を防ぐ */
  }
}