@charset "UTF-8";

/* Base Styles - Mobile First */
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

a {
  text-decoration: none;
  color: #432;
}
a:hover {
  color: rgb(218, 165, 32);
}

img {
  max-width: 100%;
  height: auto;
}
/* スクリーンリーダー用ユーティリティ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* 画像のベースライン隙間を防ぐ（カルーセルと一覧） */
.carousel-item img,
.home-grid .item img {
  display: block;
}

.wrapper {
  padding: 0 4%;
  max-width: 100%;
  margin: 0 auto;
}



/* ===== Breadcrumb (統合版) ===== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 1em 0;
  font-size: 0.9rem;
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;       /* 横並び */
  flex-wrap: wrap;     /* 狭い時は折り返し */
}
.breadcrumb li + li::before {
  content: "›";        /* 区切り矢印（統一） */
  margin: 0 0.5em;
  color: #999;
}
.breadcrumb a {
  text-decoration: none;
  color: #432;
}
.breadcrumb a:hover {
  text-decoration: underline;
  color: rgb(218,165,32);
}



/* Headings */
.page-title,
.post-title {
  font-family: 'Philosopher', serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #d6a90d;
}

.sub-title {
  font-size: 1.2rem;
  border-bottom: 2px solid rgb(218, 165, 32);
  padding-bottom: 8px;
}

.home-contents .post-title {
  color: #d6a90d;
}





/* Home Content */
.home-content p,
.home-content a {
  font-size: 1rem;
  text-align: left;
  color: rgb(67, 65, 62);
}

.home-main img {
  width: 100%;
  height: auto;
}

/* Grid Layout - モバイルファースト */
.home-grid {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：1カラム */
  gap: 10px;
}

/* Items */
.item p {
  color: #432;
}
.item p:hover {
  color: rgb(218, 165, 32);
}

/* Layout Containers */
.home-contents {
  display: flex;
  flex-direction: column;
}

article, aside {
  width: 100%;
}

/* Sidebar */
aside {
  margin-top: 2em;
}
.sub-menu {
  list-style: none;
  padding: 0;
}




.sub-menu li {
  border-bottom: 1px solid #ddd;
}
.sub-menu a {
  padding: 10px;
  display: block;
}

/* Footer */
footer {
  background: rgb(218, 165, 32);
  text-align: center;
  padding: 1em 0;
}
footer p {
  color: #432;
  font-size: 0.875rem;
}

/* タブレット（768px〜1279px） */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレット：2カラム */
  }
  .post-title {
    font-size: 2.5rem;
  }
}

/* PC（1280px〜） */
@media (min-width: 1280px) {
  .home-grid {
    grid-template-columns: repeat(4, 1fr); /* PC：4カラム */
  }
  .post-title {
    font-size: 3rem;
  }
}


/* タブレット（768px〜1279px）で aside を表示（横並び） */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-contents {
    flex-direction: row;
    justify-content: space-between;
  }

  article {
    width: 65%; /* ← ここが効くように */
  }

  aside {
    width: 30%; /* ← 22%からちゃんと拡大される！ */
    margin-top: 0;
    display: block;
  }
}


/* PC（1280px〜）で aside を表示（横並び） */
@media (min-width: 1280px) {
  .home-contents {
    flex-direction: row;
    justify-content: space-between;
  }

  article {
    width: 74%;
  }

  aside {
    width: 22%;
    margin-top: 0;
    display: block;
  }
}

/* ========== NEW HEADER DESIGN ========== */

.site-header {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.25), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15), transparent 70%),
    linear-gradient(135deg, #a86f02, #d6a90d, #f5f1d5);
  padding: 10px 0;
}


.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo img {
  height: 48px;
  width: auto;
}



/* キーボード操作でヘッダーのメニューにフォーカスした時の視認性UP */
.main-nav .menu a:focus-visible,
.main-nav .sns-icons a:focus-visible {
  background-color: rgba(218, 165, 32, 0.15); /* 薄い金色背景 */
  color: rgb(218, 165, 32);                   /* 文字も金色に */
  outline: none;                              /* 既定の青枠は消す */
  border-radius: 4px;                         /* 見栄えを少し整える（任意） */
  text-decoration: none;                      /* 下線を消して背景強調に統一（任意） */
}


.main-nav .sns-icons {
  display: flex;
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.main-nav .sns-icons img {
  height: 20px;
  width: 20px;
}

/* ====== Nav (mobile-first) ====== */
.menu-toggle {
  width: 44px;
  height: 44px;
  background-color: #fff;
  border: 2px solid #432;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  font-size: 28px;
  color: #432;
  cursor: pointer;
  padding: 0;
  display: flex;              /* モバイルで表示 */
  align-items: center;
  justify-content: center;
  position: absolute;
  top: .5em;
  right: .9em;
}

.main-nav {
  display: none;              /* モバイルは閉じる */
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 0;
  background-color: #fffdf5;
  gap: 1em;
}
.main-nav.active { display: flex; }

.main-nav .menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.main-nav .sns-icons { margin-top: 10px; }

/* ====== Tablet and up (≥768px) ====== */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .main-nav {
    display: flex !important;     /* 常時表示 */
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.10);
  }
  .main-nav .menu {
    flex-direction: row;
    gap: 20px;
  }
  .main-nav .sns-icons { margin-top: 0; }
}

/* ====== Desktop (≥1280px) ====== */
@media (min-width: 1280px) {
  .main-nav .menu { gap: 20px; }
}


.branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}


.site-title {
  font-size: 1.6rem;
  font-family: 'Philosopher', serif;
  color: #d6a90d;
  margin: 0.3em 0;
}

.tagline {
  font-size: 0.9rem;
  color: #555;
}

@media (min-width: 768px) {
  /* header-inner を「ロゴ」と「ナビ」で分離風に扱う */
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none; /* ← 白背景を消す */
    box-shadow: none;
    border: none;
    padding: 0;
  }

}

/* === Mobile only: Auto-Hide Header を確実に効かせる === */
@media (max-width: 767px) {
  .site-header {
    position: fixed;   /* sticky → fixed に */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform .24s ease, box-shadow .24s ease; /* 既存と同等 */
     /* ← ここに追加 */
    will-change: transform; /* モバイルでも付ける */
    transform: translateZ(0); /* 好みで */
  }

  /* ヘッダーがfixedになるぶん、本文が潜り込まないよう余白を確保（お好みで微調整） */
  body {
    padding-top: 70px; /* ロゴ48px + パディング ≒ 64px 目安 */
  }
}


@media (min-width: 768px) and (max-width: 1024px) {

  .main-nav .menu {
    flex-wrap: wrap;
    gap: 1em;
  }

  .main-nav .sns-icons {
    margin-top: 0.5em;
  }

  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .logo img {
    max-height: 40px;
  }
}

/* Tablet/PC だけ sticky（スマホは fixed のまま） */
@media (min-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform .24s ease, box-shadow .24s ease;
    will-change: transform;
  }
}



.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-reveal { box-shadow: 0 6px 18px rgba(0,0,0,.08); }






/* Food専用2カラムレイアウト */
.food-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 8px;
  box-sizing: border-box; /* ← ここを追加！ */
}
.food-grid .item {
  padding: 5px; /* ← 以前の10pxから少し控えめにしておくとレイアウト安定 */
}
.food-grid .item p {
  margin: 0;
}

/* Food サイドバー：hidden のときは非表示にする */
#sidebar-food[hidden] {
  display: none !important;
}



@media (min-width: 768px) and (max-width: 1279px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-title {
    font-size: 2rem;
  }
}

@media (min-width: 1280px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .menu-title {
    font-size: 2.2rem;
  }
}





/* === カルーセル=== */
.carousel {
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 1em;
  text-align: center;
}

.carousel img {
  width: 90%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
}

/* タブレットでは少し小さく */
@media (min-width: 768px) {
  .carousel img {
    width: 60%;
  }
}

/* PCではさらにコンパクトに */
@media (min-width: 1280px) {
  .carousel img {
    width: clamp(300px, 40%, 1000px);
  }
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(67, 50, 34, 0.6);
  color: #fff;
  border: none;
  font-size: 2rem;
  padding: 0 0.5em;
  cursor: pointer;
  z-index: 10;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

.carousel-button:hover {
  background: rgb(218, 165, 32);
}

/* === Carousel Indicators === */
.carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 11;
}

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(67,50,34,.35); /* デフォは薄め */
  cursor: pointer;
  padding: 0;
}

.carousel-indicators button.is-active {
  background: rgb(218,165,32); /* アクティブ=金色 */
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators button { transition: none; }
}


/* ====== Hamburger open時はヘッダーを固定表示 ====== */
.site-header.is-forced {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* メニュー展開中は画面のスクロールを止める（ジャンプ防止はJS側で復元） */
.body-lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* iOSのURLバー揺れ対策：合成レイヤー化でチラつきを抑制 */
html.ios .site-header {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* iOSでURLバーが伸縮している瞬間はトランジションを切ってチラつき回避 */
.header-no-transition {
  transition: none !important;
}


/* 他のスタイルがここまで */

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none; /* アニメーション無効化 */
  }
}





/* aside ナビゲーション */
.sidebar-nav,
.sidebar-nav ul {
  list-style: none;     /* 点を消す */
  padding: 0;
  margin: 0;
}

/* aside：トップレベルの a にも金色の下線を付ける */
.sidebar-nav > li > a {
  display: block;
  padding: 6px 0;
  border-bottom: 2px solid rgb(218, 165, 32);
  color: #432;
  text-decoration: none;
}
/* aside：開閉見出しボタン（summary置換用） */
.sidebar-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 0 6px 1.2em; /* 左に矢印ぶんの余白 */
  border: 0;
  background: transparent;
  color: #432;
  cursor: pointer;
  border-bottom: 2px solid rgb(218, 165, 32);
  position: relative;
  font: inherit;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background-color: rgba(218, 165, 32, 0.15);
  color: rgb(218, 165, 32);
  outline: none;
}

.sidebar-toggle::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(218, 165, 32);
  transition: transform .3s;
}

.sidebar-toggle[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}



/* キーボード操作でリンクにフォーカスしたときの視認性UP */
.sidebar-nav a:focus-visible {
  background-color: rgba(218, 165, 32, 0.15); /* 薄い金色背景 */
  color: rgb(218, 165, 32);                   /* 文字も金色に */
  outline: none;                              /* 既定の青枠は消す */
}


/* aside ナビ トップレベル a の hover 時スタイル */
.sidebar-nav > li > a:hover {
  background-color: rgba(218, 165, 32, 0.15);
  color: rgb(218, 165, 32);
}



/* サブメニュー hover 時の統一スタイル */
.sub-menu a:hover {
  background-color: rgba(218, 165, 32, 0.1);
  color: rgb(218, 165, 32);
}

/* ===== Header Central Adjust ===== */

/* タブレット以上（768px～）で少し内側に寄せる */
@media (min-width: 768px) {
  .header-inner {
    padding: 0 8%;     /* 左右に余白を増やす（デフォルト4% → 8%） */
  }
  .main-nav {
    margin: 0 20px;    /* ナビ自体にも左右余白をプラス */
  }
}

/* PC以上（1280px～）でさらに中央感を強める */
@media (min-width: 1280px) {
  .header-inner {
    padding: 0 12%;    /* さらに広げると自然に中央へまとまる */
  }
}

/* 見出し用（例） */
h1, h2, .heading, .post-title{
  font-family: "Philosopher", "Segoe UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
}

/* Tonkotsu list (small thumb + text layout) */
.tonkotsu-list {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 16px;
  margin-top: 1.5em;
}

.shop-card {
  display: flex;
  gap: 12px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.shop-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.shop-card h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #432;
}

.shop-card p {
  font-size: 0.85rem;
  margin: 0;
  color: #555;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .tonkotsu-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC: 2〜3 columnsにしてもOK（お好み） */
@media (min-width: 1280px) {
  .tonkotsu-list {
    grid-template-columns: repeat(2, 1fr);
  }
}





.index-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 1.5em;
}

.index-card {
  display: flex;
  gap: 12px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.index-card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.index-card h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #432;
}

.index-card p {
  margin: 0;
  font-size: 0.85rem;
  color: #555;
}

@media (min-width: 768px) {
  .index-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .index-list {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* PCサイズ以上で大画像グリッドに切り替え */
@media (min-width: 1280px) {
  .index-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .index-card {
    display: block;
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .index-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
  }

  .index-card h3,
  .index-card p {
    margin-left: 0;
    margin-right: 0;
    padding: 4px 0;
  }
}

/* PC（1280px〜）でカードタイトルを大きくする */
@media (min-width: 1280px) {
  .index-card h3,
  .shop-card h3 {
    font-size: 1.3rem;
  }
}