@charset "UTF-8";
/* ============================================================
   お料理ページ専用スタイル（ryouri.html 専用）
   rhiga-base.css の後に読み込む。共有CSSには追記しないこと。
   ============================================================ */

/* ===== ヒーロー：okonomitempura より低め、短冊は「お料理」1本 ===== */
:root { --hero-h: clamp(260px, 42vw, 420px); }
.page-ryouri .hero-title span {
  font-size: clamp(54px, 8vw, 76px);
  line-height: 1;
  padding: 0.01em 0.08em 0.06em 0;  /* 上 右 下 左 */
}

/* ===== ページ内ナビ ===== */
.page-nav { background: var(--cream2); border-bottom: 1px solid var(--line); }
.page-nav ul {
  list-style: none; display: flex; justify-content: center; gap: 8px;
  max-width: 640px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 24px);
}
.page-nav li { flex: 1; }
.page-nav a {
  display: block; text-align: center; padding: 10px 0;
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
  color: #6b4e30; background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
.page-nav a:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 420px) { .page-nav a { font-size: 15px; letter-spacing: 0.04em; } }

/* ===== 共通：コースの印・価格・品書き ===== */
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-bottom: 10px; }
.tag {
  font-size: 12px; line-height: 1; letter-spacing: 0.08em; color: #fff;
  border: 1px solid var(--gold); padding: 5px 8px; border-radius: 2px; background: var(--gold);
}
.tag.is-cond { color: var(--dark); border-color: var(--line); background: var(--cream2); }
.tag.is-lunch   { background: #9b4038; border-color: #9b4038; color: #fff; }
.tag.is-weekday { background: #55789b; border-color: #55789b; color: #fff; }

.course-name { font-family: var(--mincho); font-weight: 600; font-size: 21px; letter-spacing: 0.06em; line-height: 1.5; }
.course-lead { font-size: 15px; margin-top: 6px; }
.course-price { margin-top: 10px; font-size: 20px; color: var(--link); letter-spacing: 0.02em; }
.course-price .tax-excl { margin-left: 4px; }
.course-items { margin-top: 8px; font-size: 14.5px; color: #4a3d25; line-height: 1.9; }
.course-items small { font-size: 12.5px; color: var(--muted); }
.course-note { margin-top: 8px; font-size: 13px; color: #5a4a2a; line-height: 1.8; }
.course-more { margin-top: 12px; font-size: 14px; }
.course-more a { border-bottom: 1px solid var(--gold-light); padding-bottom: 2px; }

/* ===== ① 今月のおすすめ（大きいカード2枚） ===== */
#osusume { padding-bottom: 36px; }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.feature-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.feature-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feature-body { padding: 22px clamp(18px, 4vw, 26px) 26px; }
.feature-card .course-name { font-size: 23px; }
.feature-text { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 15px; line-height: 2; }
/* 今月のお献立（開閉） */
.kondate { margin-top: 16px; }
.kondate summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-size: 15px; color: var(--link); letter-spacing: 0.04em;
}
.kondate summary::-webkit-details-marker { display: none; }
.kondate summary::after {
  content: "+"; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #fff;
  font-size: 17px; line-height: 22px; text-align: center; transition: transform .25s ease;
}
.kondate[open] summary::after { transform: rotate(45deg); }
.kondate-list { display: grid; grid-template-columns: 5em 1fr; margin-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.kondate-list dt, .kondate-list dd { padding: 9px 0; border-bottom: 1px solid var(--line); }
.kondate-list dt { font-family: var(--mincho); font-weight: 600; color: var(--gold); letter-spacing: 0.08em; }
.kondate-list dd { color: #4a3d25; }
.kondate-note { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .kondate summary::after { transition: none; } }
.osusume-note { margin-top: 18px; font-size: 13px; color: #4d4128; line-height: 1.8; }

/* ===== ② ランチとディナー（営業時間） ===== */
#hiru { background: var(--cream); }
.hours-panel { max-width: 560px; margin: 0 auto; }
.hours-list { border-top: 1px solid var(--gold-light); }
.hours-row {
  display: grid; grid-template-columns: 5.5em 1fr; align-items: baseline;
  padding: 12px 14px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px;
  background: #fff;
}
.hours-row dt { font-family: var(--mincho); font-weight: 600; color: var(--gold); letter-spacing: 0.12em; }
.hours-time { font-size: 18px; letter-spacing: 0.04em; margin-right: 12px; }
.hours-lo { font-size: 13px; color: var(--muted); white-space: nowrap; }
.hours-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.hours-lead { text-align: center; max-width: 640px; margin: 22px auto 0; font-size: 14.5px; line-height: 2; }
@media (max-width: 479px) {
  .hours-lo { display: block; }
  .hours-lead { text-align: left; }
  .hours-lead br { display: none; }
}

/* ===== ③ コースカード ===== */
.course-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.course-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); scroll-margin-top: 80px; }
.course-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.course-body { padding: 20px 20px 22px; }
.photo-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.addon { margin-top: 12px; background: var(--cream2); padding: 12px 14px; font-size: 13.5px; line-height: 1.8; }
.addon-title { font-weight: 600; color: var(--dark); }
.addon ul { list-style: none; margin-top: 4px; }
.addon li::before { content: "・"; }
/* 価格のない案内カード（お好み天ぷら・一品料理） */
.course-card.is-guide { border-top-color: var(--gold-light); background: #fff; }



/* ===== ④ こだわり（縮小版） ===== */
.sozai-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; text-align: center; }
.sozai-seal {
  width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%;
  background: linear-gradient(150deg, #b18f45 0%, #9e7d3a 55%, #856427 100%);
  color: #fff; font-size: 30px; line-height: 60px; font-family: var(--mincho);
  box-shadow: 0 3px 10px rgba(60,40,10,0.28);
}
.sozai-name { font-family: var(--mincho); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; }
.sozai-text { font-size: 13px; color: #5a4a2a; line-height: 1.7; margin-top: 4px; }
.sozai-more { text-align: center; margin-top: 26px; font-size: 15px; }
.sozai-more a { border-bottom: 1px solid var(--gold-light); padding-bottom: 2px; }

#tempura, #faq { background: var(--cream); }

/* ===== スマホ下部の予約バー ===== */
.reserve-bar { display: none; }
@media (max-width: 767px) {
  .reserve-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--dark); box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px;
    transform: translateY(110%); transition: transform .3s ease;
  }
  .reserve-bar.is-shown { transform: translateY(0); }
  .reserve-bar a {
    flex: 1; text-align: center; padding: 11px 0; font-size: 15px; letter-spacing: 0.08em; border-radius: 2px;
  }
  .reserve-bar .bar-tel { color: #f4ecd6; border: 1px solid #6a5a3a; }
  .reserve-bar .bar-web { background: var(--gold); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .reserve-bar { transition: none; } }

/* ===== タブレット以上 ===== */
@media (min-width: 768px) {
  .feature-grid, .course-grid { grid-template-columns: 1fr 1fr; }
  .sozai-list { gap: 30px; }
  .sozai-text { font-size: 14px; }
}

.nowrap { display: inline-block; }
.section-note { margin-top: 12px; font-size: 12px; color: var(--muted);  }


/* ===== お知らせ ===== */
#oshirase { padding: 28px 0 0; }
.info-box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: 14px 18px 12px; }
.info-title { font-family: var(--mincho); font-weight: 600; font-size: 16px; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 4px; }
.info-list { list-style: none; }
.info-list li { font-size: 14.5px; line-height: 1.9; padding: 4px 0; }
.info-list li + li { border-top: 1px dashed var(--line); }