/**
 * mobile.css — 蟠龍閣 スマートフォン向けレスポンシブ改善
 *
 * 読み込み順: inline <style> → public-fonts.css → mobile.css
 * 同一詳細度のルールは後勝ちで上書きされる。
 *
 * hidden/ フォルダ（ARGページ）は対象外。
 */

/* ================================================================
   全画面: 追加基本スタイル（font は public-fonts.css に委譲）
   ================================================================ */

/* 新フッタータイプ（menu / access / recruit） */
#footer-logo {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  letter-spacing: 0.18em;
}

#footer p {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.1em;
}

/* 注目メニュー */
.featured-item-name {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
}

.featured-item-price {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.12em;
}

/* menu-table 英字ヘッダー */
.menu-table th {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
  font-size: 10px;
}

.menu-table .item-name {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
}

.menu-table .item-desc {
  font-family: 'Noto Sans JP', sans-serif;
}

.menu-table .item-price {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.1em;
}

/* ================================================================
   MOBILE  ≤ 600px
   ================================================================ */
@media (max-width: 600px) {

  /* ------  Wrapper  ------ */
  #wrapper {
    padding: 0 14px;
  }

  /* ------  Topline  ------ */
  #topline {
    font-size: 10px;
    padding: 7px 12px;
    letter-spacing: 0.04em;
    line-height: 1.6;
  }

  /* ------  Header  ------ */
  #header {
    padding: 14px 10px 10px;
  }

  /* 長い英字サブタイトルは省略 */
  #site-subtitle {
    font-size: 8.5px;
    letter-spacing: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  #site-catch {
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  /* ------  Navigation ──── 横スクロール + タップ高さ確保 ------ */
  #nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    text-align: left;
    padding: 0 4px;
  }

  #nav::-webkit-scrollbar {
    display: none;
  }

  #nav a {
    display: inline-block;
    padding: 12px 11px;
    font-size: 10px;
    letter-spacing: 0.14em;
    line-height: 1;
    /* current 下線をアンダーラインではなく背景で表現 */
  }

  #nav a.current {
    background-color: rgba(204, 0, 0, 0.22);
    border-bottom: 2px solid #ffcc44;
  }

  /* ------  Section boxes  ------ */
  .section-box {
    padding: 12px 12px;
    margin-bottom: 14px;
  }

  .section-title {
    font-size: 15px;
  }

  /* ------  Hero (index.html)  ------ */
  #hero {
    padding: 16px 12px;
  }

  #hero-copy {
    font-size: 16px;
  }

  #hero-story {
    font-size: 13px;
    line-height: 2;
  }

  /* バッジを縦積み */
  .info-badges {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
    padding: 0 2px;
  }

  .badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    box-sizing: border-box;
  }

  .badge-label {
    min-width: 52px;
    flex-shrink: 0;
  }

  /* ボタン群を縦積み・フルwidth */
  .hero-btn,
  .hero-btn-sub {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 16px;
    margin: 6px 0;
    box-sizing: border-box;
    font-size: 12px;
  }

  /* ------  NEWS table  ------ */
  .news-table td {
    padding: 6px 4px;
    font-size: 12px;
  }

  .news-date {
    width: 74px;
    font-size: 10px;
  }

  .news-cat {
    display: none;
  }

  /* ------  CAST mini-grid (index.html)  ------ */
  .cast-col {
    width: calc(50% - 10px);
    margin: 4px;
  }

  .cast-photo-box {
    font-size: 24px;
  }

  /* ------  SYS grid  ------ */
  .sys-cell {
    padding: 10px;
  }

  /* ------  INFO TABLE  ── th/td を縦積み ------ */
  .info-table tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dotted #550000;
  }

  .info-table tr:last-child {
    border-bottom: none;
  }

  .info-table th {
    display: block;
    width: auto !important;
    white-space: normal;
    padding: 0 0 3px 0;
    border: none;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .info-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 13px;
  }

  /* ------  ARG 検索バー (#search-area / index.html) ------ */
  #search-area input[type="search"] {
    font-size: 16px;
    padding: 10px 8px;
    width: calc(100vw - 130px);
    max-width: 260px;
    min-height: 44px;
    box-sizing: border-box;
  }

  #search-area button {
    font-size: 16px;
    padding: 10px 14px;
    min-height: 44px;
  }

  /* ------  RESERVE  ------ */
  #reserve-box {
    padding: 14px 12px;
  }

  #tel-num {
    font-size: 22px;
    letter-spacing: 0.1em;
  }

  .reserve-note-list li {
    font-size: 12px;
    padding: 6px 0;
    line-height: 1.65;
  }

  /* ------  PAGE TITLE (cast / menu / access / recruit)  ------ */
  #page-title {
    font-size: 22px;
    letter-spacing: 0.12em;
  }

  #page-lead {
    font-size: 12px;
  }

  /* ------  CAST page: カードヘッダー ------ */
  .cast-header {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .cast-header-name {
    font-size: 15px;
  }

  .cast-header-en {
    font-size: 9px;
  }

  /* cast-detail-table を縦積み */
  .cast-detail-table tr {
    display: block;
    padding: 6px 0;
    border-bottom: 1px dotted #440000;
  }

  .cast-detail-table tr:last-child {
    border-bottom: none;
  }

  .cast-detail-table th {
    display: block;
    width: auto !important;
    white-space: normal;
    padding: 0 0 2px 0;
    border: none;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .cast-detail-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 13px;
  }

  .cast-self-intro {
    font-size: 12px;
    line-height: 1.95;
    padding: 10px 10px;
  }

  .cast-divider-stars {
    margin: 6px 0 3px;
  }

  /* 戻るボタンを縦積み・フルwidth */
  .back-btn {
    display: block;
    text-align: center;
    padding: 12px 16px;
    margin: 5px 0;
    box-sizing: border-box;
    font-size: 12px;
  }

  /* ------  MENU page: 注目メニュー横並び → 縦積み ------ */
  .featured-item {
    padding: 12px 10px;
  }

  /* <table>内の td を縦積みに（暗黙 tbody も含む） */
  .featured-item table,
  .featured-item tbody,
  .featured-item tr,
  .featured-item td {
    display: block !important;
    width: 100% !important;
  }

  .cocktail-img-wrap {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .cocktail-img-box {
    width: 100%;
    height: 180px;
  }

  .featured-item-name {
    font-size: 18px;
  }

  .featured-item-price {
    font-size: 16px;
  }

  .featured-item-desc {
    font-size: 12px;
  }

  /* menu-table */
  .menu-table td,
  .menu-table th {
    padding: 7px 6px;
    font-size: 12px;
  }

  .menu-table .item-price {
    font-size: 12px;
    white-space: normal;
  }

  .note-box {
    font-size: 11px;
    padding: 10px;
    line-height: 1.9;
  }

  /* ------  ACCESS page  ------ */
  #map-wrap {
    padding: 8px;
  }

  .route-label {
    font-size: 11px;
  }

  .route-item {
    padding-left: 10px;
    margin-bottom: 10px;
  }

  /* ------  Footer (新型: menu / access / recruit)  ------ */
  #footer {
    padding: 16px 12px;
  }

  #footer-logo {
    font-size: 18px;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
  }

  #footer p {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

}

/* ================================================================
   MOBILE  ≤ 375px（小型端末向け微調整）
   ================================================================ */
@media (max-width: 375px) {

  #site-title {
    font-size: 24px;
    letter-spacing: 0.12em;
  }

  #hero-main-title {
    font-size: 26px;
    letter-spacing: 0.18em;
  }

  #nav a {
    padding: 12px 9px;
    font-size: 9.5px;
  }

  .hero-btn {
    font-size: 11px;
    padding: 12px;
  }

  .hero-btn-sub {
    font-size: 11px;
    padding: 11px;
  }

  .section-title {
    font-size: 14px;
  }

  .cast-col {
    width: calc(50% - 8px);
    margin: 3px;
  }

  #page-title {
    font-size: 20px;
    letter-spacing: 0.1em;
  }
}