/* ===== お品書きページ専用 ===== */
.category-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; width: min(92%, var(--wrap)); margin: 28px auto 8px; font-size: 13px; }
.category-nav a { padding: 2px 20px; border-left: 1px solid var(--line); white-space: nowrap; }
.category-nav a:first-child { border-left: 0; }

.m-sec { display: grid; grid-template-columns: 90px 1fr; gap: 32px; width: min(92%, var(--wrap)); margin: 0 auto; padding: 48px 0; border-bottom: 1px solid var(--line); }
.m-sec:last-of-type { border-bottom: 0; }
.vhead { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; padding-left: 14px; border-left: 1px solid var(--gold); align-self: start; }
.vhead h2 { writing-mode: vertical-rl; font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; }
.vhead .en { writing-mode: vertical-rl; color: var(--sub); font-size: 8px; letter-spacing: 0.3em; }

.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rec-grid img { aspect-ratio: 16 / 10; height: auto; }
.rec-grid h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 600; }
.rec-grid p { color: var(--sub); font-size: 12px; line-height: 1.9; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 14px; color: var(--ink) !important; font-size: 12px !important; }
.price b { font-size: 22px; font-weight: 500; }

.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px; }
.list-grid h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 19px; font-weight: 600; }
.list-grid h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.list-grid dl { padding-left: 14px; border-left: 1px solid var(--line); }
.list-grid dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.list-grid dd { white-space: nowrap; }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.course-grid img { aspect-ratio: 16 / 10; height: auto; }
.course-grid h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; font-size: 19px; font-weight: 600; }
.course-grid h3 b { font-size: 20px; font-weight: 500; }
.course-grid h3 small { font-size: 11px; }
.course-grid p { color: var(--sub); font-size: 12px; line-height: 1.9; }

/* =================== タブレット・スマホ =================== */
@media (max-width: 900px) {
  .category-nav { margin: 0 auto; padding: 16px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
  .category-nav a { padding: 2px 12px; }

  .m-sec { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .vhead { flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; text-align: center; }
  .vhead h2, .vhead .en { writing-mode: horizontal-tb; }
  .vhead h2 { display: flex; align-items: center; gap: 14px; font-size: 22px; white-space: nowrap; }
  .vhead h2::before, .vhead h2::after { content: ""; width: 36px; height: 1px; background: var(--gold); }

  .rec-grid { grid-template-columns: 1fr; gap: 32px; }
  .rec-grid h3 { font-size: 18px; }
  .rec-grid p { font-size: 13px; }

  .list-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .list-grid h3 { font-size: 17px; }
  .list-grid dl { padding-left: 0; border-left: 0; }
  .list-grid dl div { font-size: 12px; }

  .course-grid { grid-template-columns: 1fr; gap: 16px; }
  .course-grid article { display: grid; grid-template-columns: 40% 1fr; gap: 14px; align-items: center; }
  .course-grid img { aspect-ratio: 4 / 3; }
  .course-grid h3 { margin-top: 0; font-size: 16px; }
  .course-grid h3 b { font-size: 16px; }
}