@charset "utf-8";
/* ============================================================
   お品書きタブナビ 共通CSS
   ------------------------------------------------------------
   使い方：
     <ul class="oshinagaki_nav">
       <li><a href="...">ランチ<span>Lunch</span></a></li>
       <li class="now">パーティ<span>Party</span></li>
     </ul>

   ・項目数に応じて自動で列数が決まります（列数の指定不要）
   ・PC：1行  /  SP：2列
   ・index0811.css より後ろで読み込むこと
   ============================================================ */

.oshinagaki_nav {
  --nav-accent: #ae5547;
  --nav-line: #000;
  --nav-gap: 8px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--nav-gap);
  margin: 40px auto;
}

.oshinagaki_nav li {
  /* 既存 .oshinagaki_list_inner li の float / width を使わない */
  width: auto;
  float: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* リンク・現在地で共通の見た目 */
.oshinagaki_nav li > a,
.oshinagaki_nav li.now {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 4px;
  border: 1px solid var(--nav-line);
  color: #000;
  text-align: center;
  text-decoration: none;
  transition: .4s;
}

/* 英語表記：字間を詰めて2行目に */
.oshinagaki_nav li span {
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  margin-top: 2px;
}

/* 現在地 */
.oshinagaki_nav li.now {
  border-color: var(--nav-accent);
  background: var(--nav-accent);
  color: #fff;
}

/* hover */
.oshinagaki_nav li > a:hover {
  border-color: var(--nav-accent);
  background: var(--nav-accent);
  color: #fff;
}

/* ページ最下部に置くとき（既存 .last_code 相当） */
.oshinagaki_nav.last_code { margin-bottom: 80px; }


/* ------------------------------------------------------------
   スマホ（既存と同じ 768px）
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .oshinagaki_nav {
    width: 90%;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .oshinagaki_nav li { font-size: 14px; }
  .oshinagaki_nav li > a,
  .oshinagaki_nav li.now { min-height: 56px; }
  .oshinagaki_nav li span { font-size: 11px; }
}