html,
    body {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
      width: 100%;
      min-height: 0 !important;
    }

    :root {
      --main-bg: #fff;
      --main-border: #aaa;
      --main-radius: 12px;
      --header-bg: #f7f9fb;
      --btn-bg: #e9ecef;
      --btn-active: #b6d7ff;
      --btn-radius: 8px;
      --today-bg: #e0f7fa;
      --selected-bg: #a5d8ff;
      --inactive-bg: #f3f3f3;
      --inactive-color: #bbb;
      --shadow: 0 2px 16px #0001;
    }

    body {
      font-family: 'Segoe UI', 'メイリオ', 'Hiragino Sans', sans-serif;
      background: #fafafd;
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }


    .calendar-title-area {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      margin-top: 12px;
      min-height: 48px;
    }

    .calendar-shop-logo {
      height: 44px;
      max-width: 70px;
      object-fit: contain;
      margin-right: 16px;
      margin-left: 2px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 8px rgba(60, 40, 90, .07);
      display: block;
    }

    .calendar-shop-title {
      flex: 1;
      text-align: center;
      font-size: 1.25em;
      font-weight: 700;
      color: #4e345c;
      letter-spacing: 0.05em;
    }


    .calendar-container {
      max-width: 500px;
      margin: 40px auto;
      background: var(--main-bg);
      border: 1px solid var(--main-border);
      border-radius: var(--main-radius);
      box-shadow: var(--shadow);
      padding: 18px 10px 22px;
    }

    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--header-bg);
      border-radius: var(--main-radius) var(--main-radius) 0 0;
      padding: 6px 0 10px;
      margin-bottom: 5px;
    }

    .calendar-header button {
      background: var(--btn-bg);
      border: 1px solid var(--main-border);
      border-radius: var(--btn-radius);
      padding: 3px 16px;
      margin: 0 12px;
      font-size: 1.3em;
      color: #333;
      cursor: pointer;
      transition: background .18s;
      outline: none;
      box-shadow: none;
    }

    .calendar-header button:active {
      background: var(--btn-active);
    }

    .calendar-header button:disabled {
      background: var(--inactive-bg);
      color: var(--inactive-color);
      cursor: not-allowed;
    }

    .calendar-month-label {
      font-weight: bold;
      font-size: 1.2em;
      letter-spacing: .5px;
      min-width: 110px;
      text-align: center;
      color: #222;
    }

    .calendar-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 2px;
      margin: 0 auto;
    }

    .calendar-table th,
    .calendar-table td {
      width: 13.7%;
      min-width: 35px;
      max-width: 50px;
      height: 38px;
      text-align: center;
      vertical-align: middle;
      font-size: 1.05em;
      border-radius: 7px;
      user-select: none;
      transition: background .13s, color .13s;
      background: #fff;
      border: none;
      position: relative;
    }

    .calendar-table th {
      font-weight: 600;
      background: #f3f6fa;
      color: #6b778d;
      font-size: 0.95em;
    }

    .calendar-table td {
      cursor: pointer;
      color: #333;
    }

    .calendar-table td.today {
      background: var(--today-bg);
      border: 1.5px solid #39f;
      font-weight: bold;
    }

    .calendar-table td.selected {
      background: var(--selected-bg);
      font-weight: bold;
      color: #0366d6;
    }

    .calendar-table td.inactive {
      color: var(--inactive-color);
      background: var(--inactive-bg);
      cursor: not-allowed;
    }

    .calendar-table td:hover:not(.inactive):not(.selected) {
      background: #eaf6ff;
    }

    .calendar-table td.closed {
      background: #fff0f0;
      color: #e74c3c;
      cursor: not-allowed;
      font-weight: bold;
    }

    .calendar-table td.special_closed {
      background: #ffeded;
      color: #b80000;
      cursor: not-allowed;
      font-weight: bold;
    }

    /* モーダルのオーバーレイ */
    .modal-overlay {
      position: fixed;
      /* iOS12 は inset を未サポート。明示指定にする */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      /* 念のための保険（古い WebView 用） */
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.35);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .modal-overlay .modal-content {
      background: #fff;
      border-radius: 12px;
      width: 95vw;
      max-width: 440px;
      max-height: 82vh;
      padding: 24px 18px 26px;
      box-shadow: 0 6px 36px #0004;
      overflow-y: auto;
      position: relative;
    }

    .modal-close-btn {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 50%;
      background: rgba(240, 196, 66, 0.82);
      font-size: 1.6em;
      font-weight: bold;
      color: #555;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .modal-close-btn:hover {
      background: rgba(0, 0, 0, 0.15);
      color: #e7ab3c;
      transform: scale(1.1);
    }

    .modal-close-btn:active {
      transform: scale(0.95);
      background: rgba(0, 0, 0, 0.25);
    }

    .modal-content {
      max-height: 80vh;
      /* 画面高の8割まで */
      overflow-y: auto;
      /* 中身だけ縦スクロール可 */
      background: #fff;
      border-radius: 10px;
      padding: 18px;
    }

    .modal-bottom-space {
      height: 50px;
      min-height: 50px;
      width: 100%;
      pointer-events: none;
    }

    /* ======= 入力フォームとボタンのエレガント調整 ======= */
    .modal-overlay form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 0;
    }

    .modal-overlay label {
      display: flex;
      align-items: center;
      margin-bottom: 3px;
      font-size: 1em;
      color: #444;
      gap: 0.4em;
      font-weight: 500;
    }

    .modal-overlay label[for="adultCount"],
    .modal-overlay label[for="childCount"],
    .modal-overlay label[for="infantCount"] {
      display: inline-flex;
      margin-right: 1.1em;
      margin-bottom: 0;
    }


    /* --- 人数選択 横並び --- */
    .people-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px;
    }

    .people-row label {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 5px;
      margin: 0;
      font-size: 1em;
      font-weight: 500;
      color: #333;
      background: #f8fafb;
      padding: 4px 10px 4px 6px;
      border-radius: 7px;
      border: 1px solid #eee;
    }

    .people-row input[type="number"] {
      width: 3.1em;
      min-width: 2.7em;
      font-size: 1.1em;
      padding: 4px 2px;
      border-radius: 6px;
      border: 1px solid #ccc;
      background: #fff;
      text-align: right;
    }

    .people-row input[type="number"]:focus {
      border-color: #2196f3;
      outline: none;
    }

    /* --- 電話番号リンク --- */
    .tel-link {
      color: inherit;
      text-decoration: none;
    }

    /* --- 他入力欄ラベル調整 
    .modal-overlay form label:not(.people-row label):not(#privacyLabel) {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 3px 0 0 0;
      font-size: 0.9em;
      font-weight: 500;
    }

    .modal-overlay form label:not(.people-row label):not(#privacyLabel) {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
--- */

    /* ── people-row 以外のラベルは縦配置 ───────────────── */
    .modal-overlay form>label:not(#privacyLabel) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin: 3px 0 0 0;
      font-size: .9em;
      font-weight: 500;
    }

    /* プライバシーポリシー専用：中央揃え・横並び */
    .modal-overlay label#privacyLabel {
      justify-content: center;
      margin: 20px 0;
      font-size: .85em;
      font-weight: 500;
    }

    .modal-overlay input[type="checkbox"] {
      margin: 0 4px 0 0;
      width: 18px;
      height: 18px;
      accent-color: #2196f3;
      vertical-align: middle;
      flex-shrink: 0;
    }

    /* ボタン */
    .reserve-next-btn {
      background: #2196f3;
      color: #fff;
      padding: 7px 24px;
      border-radius: 8px;
      border: none;
      font-size: 1.09em;
      font-weight: 500;
      cursor: pointer;
      transition: background .14s, box-shadow .13s;
      box-shadow: 0 2px 8px #2196f322;
    }

    .reserve-next-btn:hover,
    .reserve-next-btn:focus {
      background: #0073c6;
      box-shadow: 0 3px 12px #0073c633;
    }

    .modal-overlay input[type="text"],
    .modal-overlay input[type="email"],
    .modal-overlay input[type="tel"],
    .modal-overlay input[type="number"],
    .modal-overlay textarea,
    .modal-overlay select {
      border: 1px solid #bbb;
      border-radius: 7px;
      font-size: 1.06em;
      padding: 7px 9px;
      margin: 3px 0 0 0;
      background: #fafbfc;

      box-sizing: border-box;
      outline: none;
      transition: border 0.16s;
    }

    .modal-overlay textarea {
      min-height: 44px;
      resize: vertical;
    }

    .modal-overlay input[type="text"]:focus,
    .modal-overlay input[type="email"]:focus,
    .modal-overlay input[type="tel"]:focus,
    .modal-overlay input[type="number"]:focus,
    .modal-overlay textarea:focus,
    .modal-overlay select:focus {
      border-color: #2196f3;
      background: #fff;
    }

    #contactError {
      color: #e74c3c;
      margin-top: 3px;
      margin-bottom: 1px;
      font-size: 0.85em;

      text-align: center;
    }

    #selectedSummary {
      text-align: center;
      font-size: 1.04em;
      margin-bottom: 20px;
      color: #345;
      letter-spacing: 0.01em;
    }

    .reservation-lookup-container {
      max-width: 500px;
      margin: 32px auto 0;
      background: #fffbe7;
      border: 1px solid #ffe082;
      border-radius: 12px;
      box-shadow: 0 2px 12px #0001;
      padding: 20px 18px 18px 18px;
      text-align: center;
      margin-bottom: 30px;
      margin-top: -20px;
    }

    .reservation-lookup-container h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 0.9em;
      color: #ce8800;
      letter-spacing: 1px;
    }

    #lookupForm label {
      font-weight: 500;
      color: #554a00;
      margin-bottom: 4px;
      font-size: 0.9em;
    }

    #lookupForm input[type="text"] {
      padding: 6px 10px;
      border: 1px solid #bbb;
      border-radius: 7px;
      font-size: 1.04em;
      margin-left: 2px;
      width: 120px;
      letter-spacing: 1px;
    }

    #lookupForm button {
      margin-left: 12px;
      padding: 7px 12px;
      background: #2196f3;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.9em;
      font-weight: 500;
      cursor: pointer;
      transition: background .13s;
    }

    #lookupForm button:hover {
      background: #1976d2;
    }

    /* 無効化状態 */
    #lookupForm button[type="submit"]:disabled {
      background: #aaa !important;
      color: #fff !important;
      opacity: 0.65;
      cursor: not-allowed;
    }

    #lookupError {
      display: block;
      margin-top: 8px;
      color: #e74c3c;
      font-size: .97em;
    }

    #lookupResult {
      background: #f9fbe7;
      border: 1px solid #e1edab;
      border-radius: 9px;
      padding: 15px 10px 13px 10px;
      color: #333;
      text-align: left;
      font-size: 1.06em;
      margin-top: 18px;
      word-break: break-all;
    }

    #lookupResult .actions {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #lookupResult .action-row {
      display: flex;
    }

    #lookupResult .actions button {
      display: inline-block;
      margin: 0 7px 15px 7px;
    }

    #lookupResult button {
      background: #ef5350;
      color: #fff;
      border: none;
      border-radius: 7px;
      padding: 7px 18px;
      font-size: .98em;
      cursor: pointer;
      margin-bottom: 15px;
    }

    #lookupResult button.modify-btn {
      background: #cf0e72;
    }

    #lookupResult button.modify-datetime-btn {
      background: #d6b306;
    }

    #lookupResult button.ok-btn {
      padding: 7px 40px;
      background: #2196f3;
      font-weight: 500;
    }

    #lookupResult button:disabled {
      background: #ccc;
      color: #eee;
      cursor: not-allowed;
    }

    .note-message {
      font-size: 0.8em;
      font-weight: bold;
      color: #b04a45;
      margin: 1em 0 1.5em;
      line-height: 1.7;
    }

    /* ======= モバイル幅で最適化 ======= */
    @media (max-width: 650px) {
      .modal-overlay .modal-content {
        width: 99vw;
        max-width: 100%;
        min-width: 0;
        padding: 12px 2vw 30px;
      }

      .modal-overlay input,
      .modal-overlay select,
      .modal-overlay textarea {
        font-size: 1em;
        width: 97vw;
        max-width: 100%;
        padding: 8px 8px;
      }

      /* ======= 
      .reserve-next-btn {
        min-width: 82vw;
        padding: 11px 0;
        font-size: 1.14em;
      }
 ======= */

      .modal-overlay label#privacyLabel {
        font-size: 0.85em;
      }

      .people-row {
        gap: 10px;
      }

      .people-row label {
        font-size: 1em;
        padding: 3px 7px 3px 4px;
      }

      .people-row input[type="number"] {
        width: 2.6em;
        min-width: 2.2em;
        font-size: .97em;
        padding: 5px 1px;
      }

    }

    /* ======= カレンダー等そのまま ======= */
    #timeSlotsList {
      margin-top: 14px;
    }

    .time-slot-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid #eee;
    }

    .time-slot-status {
      font-weight: bold;
      min-width: 2.5em;
      text-align: center;
    }

    .time-slot-row button {
      padding: 5px 14px;
      border-radius: 8px;
      background: #2196f3;
      color: #fff;
      border: none;
      font-size: 1em;
      cursor: pointer;
      transition: background .15s;
    }

    .time-slot-row button:disabled {
      background: #ccc;
      color: #eee;
      cursor: not-allowed;
    }

    #modifyDateTimeModal label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    #modifyDateTimeModal .label-text {
      display: inline-block;
      min-width: 90px;

      font-size: 1.15em;
      /* お好みで1.2emや1.3emでもOK */
      font-weight: bold;
      /* 太字にしたい場合 */
      color: #333;

    }

    #modifyDateTimeModal input[type="date"],
    #modifyDateTimeModal select {
      flex: 1 1 auto;
      max-width: 200px;
      width: 100%;
      font-size: 1em;
      box-sizing: border-box;
    }

    /* 日付入力欄の中の文字を大きく */
    #modifyDateTimeModal input[type="date"] {
      font-size: 1.16em;
      padding: 8px 10px;
      height: 2.2em;
      box-sizing: border-box;
      /* これが無いとpaddingで幅超えやすい */
    }

    #modifyDateTimeModal .modal-buttons {
      margin-top: 20px;
      text-align: center;
    }

    @media (max-width: 650px) {

      .calendar-shop-title {
        font-size: 0.95em;
      }

      .calendar-container {
        max-width: 99vw;
        padding: 6px 2vw 14px;
      }

      .calendar-table th,
      .calendar-table td {
        font-size: .98em;
        min-width: 9vw;
        max-width: 13vw;
        height: 8vw;
      }

      .calendar-header button {
        font-size: 1em;
        padding: 2px 7vw;
      }

      #modifyDateTimeModal input[type="date"],
      #modifyDateTimeModal select {
        max-width: 68vw;
      }

    }

    @media (max-width: 500px) {
      .calendar-header button {
        padding: 2px 5vw;
      }
    }

    #loadingMessage {
      /* 上下ゆっくり動かすアニメーション */
      animation: loadingUpDownBlink 1.4s linear infinite;
    }

    @keyframes loadingUpDownBlink {
      0% {
        transform: translateY(0);
        opacity: 1;
      }

      15% {
        transform: translateY(-8px);
        opacity: 0.85;
      }

      25% {
        transform: translateY(-10px);
        opacity: 0.7;
      }

      50% {
        transform: translateY(0);
        opacity: 1;
      }

      75% {
        transform: translateY(10px);
        opacity: 0.7;
      }

      85% {
        transform: translateY(8px);
        opacity: 0.85;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* number と checkbox を除外して 100 % */
    .modal-overlay input:not([type="number"]):not([type="checkbox"]),
    .modal-overlay textarea {
      width: 100%;
    }

    /* クリックできる見た目 */
    .calendar-title-area .calendar-shop-title,
    .calendar-title-area .calendar-shop-logo {
      cursor: pointer;
    }

    /* ノーツ用モーダル（上品に） */
    #shopNotesModal.modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10001;
      background: rgba(15, 23, 42, .42);
      /* 紺がかった半透明 */
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(2px);
    }

    #shopNotesModal .modal-content.notes {
      width: min(92vw, 560px);
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
      background: #fff;
      overflow: hidden;
      padding: 0;
    }

    .notes-head {
      padding: 16px 18px;
      background: linear-gradient(180deg, #f7fafc, #ffffff);
      border-bottom: 1px solid #eef2f6;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .notes-head .icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #e8f2ff;
      color: #2a78d0;
    }

    .notes-head .ttl {
      font-weight: 700;
      color: #334155;
      letter-spacing: .02em;
    }

    .notes-body {
      padding: 18px 20px 6px 20px;
      color: #444;
      line-height: 1.8;
      font-size: 0.98rem;
      max-height: 70vh;
      overflow: auto;
    }

    .notes-body img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .notes-body a {
      color: #2a78d0;
      text-decoration: underline;
    }

    #shopNotesClose {
      position: absolute;
      top: 10px;
      right: 12px;
      background: transparent;
      border: none;
      font-size: 24px;
      line-height: 1;
      color: #64748b;
      cursor: pointer;
    }

    #shopNotesClose:active {
      opacity: .7;
    }

    /* キーボード操作の見た目 */
    .calendar-title-area .calendar-shop-title:focus,
    .calendar-title-area .calendar-shop-logo:focus {
      outline: 2px solid #2a78d0;
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* 既存の body 背景（#fafafd）を、theme=dark のときだけ黒に上書き */
    .theme-dark body {
      background: #000000e8 !important;
    }