/* =========================================================
   PINE Rental Car — Unified Stylesheet
   File: /wp-content/themes/highlight-pro/css/mts-style.css
   Version: 2026-04-19 (ordered cascade)
   ---------------------------------------------------------
   [ORDER]
     S0. Tokens
     S1. Page Layout
     S2. Base (buttons, inputs 共通)
     S3. Area Nav Bar / Accordion / Area Buttons
     S4. Rental Finder (検索フォーム)
     S5. Booking Entry Form (予約入力)
     S6. Booking Confirm Form (予約内容確認)
     S7. Vehicle Calendar Card (車両一覧)
     S8. Schedule Calendar (予約カレンダー)
     S9. jQuery UI Datepicker
     S10. Hide Unused UI
     S11. Responsive (最後に媒体別に上書き)
     S12. A11y / Motion
   ========================================================= */


/* =========================================================
   S0. Tokens
   ========================================================= */
:root{
  --pine-green:      #4CAF50;
  --pine-green-dark: #3d8b40;
  --pine-green-soft: #e8f5e9;
  --pine-border:     #d6d9dd;
  --pine-text:       #1f2937;
  --pine-muted:      #6b7280;
  --pine-bg:         #ffffff;
  --pine-surface:    #f9fafb;
  --pine-radius:     10px;
  --pine-radius-sm:  6px;
  --pine-shadow:     0 2px 8px rgba(0,0,0,.06);
  --pine-shadow-lg:  0 8px 28px rgba(0,0,0,.12);
  --pine-focus:      0 0 0 3px rgba(76,175,80,.35);
  --pine-gap:        clamp(10px, 1.3vw, 16px);
}


/* =========================================================
   S1. Page Layout
   ========================================================= */
.mesmerize-content-padding #page > .page-content,
.mesmerize-inner-page      #page > .page-content{
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}


/* =========================================================
   S2. Base
   ========================================================= */

/* S2-1. Buttons（共通クラス。必要なら .pine-btn で使う） */
.pine-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px;
  border-radius:var(--pine-radius-sm);
  background:var(--pine-green); color:#fff;
  font-weight:700; font-size:15px;
  cursor:pointer;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
}
.pine-btn--ghost{ background:#fff; color:var(--pine-green); }
.pine-btn--pill { border-radius:999px; }

/* S2-2. Form inputs 共通 */
.mts-form-table input[type="text"],
.mts-form-table input[type="email"],
.mts-form-table input[type="tel"],
.mts-form-table select,
.mts-form-table textarea{
  box-sizing:border-box;
  height:42px; padding:0 12px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  background:#fff;
  font-size:14px; color:var(--pine-text);
  transition:border-color .2s, box-shadow .2s;
}
.mts-form-table textarea{
  height:auto; min-height:100px; padding:10px 12px; resize:vertical;
}
.mts-form-table input:focus,
.mts-form-table select:focus,
.mts-form-table textarea:focus{
  outline:none;
  border-color:var(--pine-green);
  box-shadow:var(--pine-focus);
}


/* =========================================================
   S3. Area Nav Bar / Accordion / Area Buttons
   ========================================================= */

/* S3-1. Nav Bar（戻る + アコーディオン横並び） */
.area-nav-bar{
  display:flex; align-items:flex-start; gap:10px;
  margin:10px 0 20px;
}
.area-nav-bar .back-button{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:0 16px 0 12px;
  min-height:48px;
  font-weight:700; font-size:14px; line-height:1;
  text-decoration:none !important;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
}

.area-nav-bar .back-button__icon{
  width:10px; height:10px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-left:4px;
}
.area-nav-bar .area-accordion{ flex:1 1 auto; margin:0; min-width:0; }

/* S3-2. Accordion */
.area-accordion{
  border:2px solid var(--pine-green);
  border-radius:var(--pine-radius);
  background:#fff; overflow:hidden;
  transition:box-shadow .2s;
}
.area-accordion[open]{ box-shadow:0 4px 14px rgba(76,175,80,.18); }
.area-accordion__summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  background:var(--pine-green); color:#fff;
  font-weight:700; user-select:none;
  transition:background .2s;
}
.area-accordion__summary::-webkit-details-marker{ display:none; }
.area-accordion__summary:hover{ background:var(--pine-green-dark); }
.area-accordion__label  { font-size:13px; opacity:.85; letter-spacing:.04em; }
.area-accordion__current{ flex:1; text-align:left; font-size:16px; font-weight:800; }
.area-accordion__icon{
  width:12px; height:12px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(45deg);
  transition:transform .25s ease;
  margin-right:4px;
}
.area-accordion[open] .area-accordion__icon{ transform:rotate(-135deg); }
.area-accordion .area-buttons{
  padding:12px !important; margin:0 !important;
  background:#fff; border-top:1px solid var(--pine-border);
}

/* S3-3. Area Buttons */
details > .area-buttons{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:12px !important;
  padding:10px !important;
  margin:10px 0 20px !important;
}
.area-buttons br{ display:none !important; }
.area-btn{
  display:flex !important; align-items:center; justify-content:center;
  box-sizing:border-box;
  width:100% !important;
  height:56px; min-height:56px;
  margin:0 !important;
  padding:0 10px !important;
  border:2px solid var(--pine-green) !important;
  border-radius:var(--pine-radius) !important;
  background:#fff;
  color:var(--pine-green) !important;
  font-weight:700; font-size:15px; line-height:1;
  letter-spacing:.02em; text-align:center;
  text-decoration:none !important; white-space:nowrap;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.area-btn:hover,
.area-btn:focus-visible{
  background:var(--pine-green) !important; color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(76,175,80,.28);
  outline:none;
}
.area-btn.is-active,
.area-btn[aria-current="page"]{
  background:var(--pine-green) !important; color:#fff !important;
  cursor:default; pointer-events:none;
}


/* =========================================================
   S4. Rental Finder (検索フォーム)
   ========================================================= */
.rental-finder{
  background:var(--pine-bg);
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius);
  padding:clamp(16px, 2vw, 24px);
  box-shadow:var(--pine-shadow);
}
.rental-finder form{ margin:0; }
.rental-finder .finder-type-description{
  color:var(--pine-muted); font-size:14px; margin:0 0 16px;
}

/* 2カラム（➤ 非表示前提） */
.rental-finder .finder-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "start end"
    "type  type";
  align-items:end;
  gap:var(--pine-gap);
}
.rental-finder .finder-box > *{ min-width:0; }
.rental-finder .finder-date-box.start{ grid-area:start; }
.rental-finder .finder-date-box.end  { grid-area:end; }
.rental-finder .finder-type-box      { grid-area:type; }

/* 日付ボックス */
.rental-finder .finder-date-box,
.rental-finder .finder-date-box.start,
.rental-finder .finder-date-box.end{
  display:block !important; width:100% !important; min-width:0 !important;
  box-sizing:border-box;
}
.rental-finder label,
.rental-finder .finder-date-box > label{
  display:block; width:100%; margin:0;
}
.rental-finder .finder-date-label,
.rental-finder .finder-select-label{
  display:block; font-size:13px; font-weight:600;
  color:var(--pine-text); margin:0 0 6px; white-space:nowrap;
}

/* 入力/セレクト */
.rental-finder .date-box,
.rental-finder .select-box,
.rental-finder input.finder-start,
.rental-finder input.finder-end{
  display:block; box-sizing:border-box;
  width:100% !important; max-width:100%; min-width:0;
  height:46px; padding:0 14px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  background:#fff; font-size:15px; color:var(--pine-text);
  appearance:none; -webkit-appearance-webkit-appearance:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.rental-finder .date-box:hover{ border-color:var(--pine-green); }
.rental-finder .date-box:focus,
.rental-finder .select-box:focus{
  outline:none;
  border-color:var(--pine-green);
  box-shadow:var(--pine-focus);
}
.rental-finder .date-box[readonly]{
  background-color:var(--pine-surface); cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:38px;
}
.rental-finder .select-box{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%234CAF50' d='M6 8L0 0h12z'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px;
}

/* 検索 / リセット ボタン */
.rental-finder .button-box{
  display:flex; gap:8px; margin-top:10px !important; flex-wrap:wrap;
}
.rental-finder .finder-button{ flex:1 1 160px; display:block; }
.rental-finder .finder-button input{
  width:100%; min-height:48px; padding:0 20px;
  border-radius:var(--pine-radius-sm);
  border:2px solid var(--pine-green);
  font-weight:700; font-size:15px; cursor:pointer;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
}
.rental-finder .finder-button input[type="submit"]{
  background:var(--pine-green); color:#fff;
}
.rental-finder .finder-button input[type="submit"]:hover{
  background:var(--pine-green-dark);
  border-color:var(--pine-green-dark);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(76,175,80,.3);
}
.rental-finder .finder-button input[type="button"]{
  background:#fff; color:var(--pine-green);
}
.rental-finder .finder-button input[type="button"]:hover{
  background:var(--pine-green-soft);
}


/* =========================================================
   S5. Booking Entry Form (予約入力)
   ========================================================= */
#mtsrcb-entry-form.mtsrcb-page-block,
#mtsrcb-entry-form.entry-page{
  max-width:960px; margin:0 auto;
  padding:clamp(14px, 2vw, 24px);
  background:var(--pine-bg);
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius);
  box-shadow:var(--pine-shadow);
  color:var(--pine-text); font-size:15px;
}
#mtsrcb-entry-vehicle .rental-vehicle-name{
  margin:0 0 12px; padding:10px 14px;
  background:var(--pine-green-soft);
  border-left:4px solid var(--pine-green);
  border-radius:var(--pine-radius-sm);
  font-size:18px; font-weight:800;
  color:var(--pine-green-dark);
}
#mtsrcb-entry-form .action-row.description{
  margin:0 0 14px; padding:10px 12px;
  background:var(--pine-surface);
  border-radius:var(--pine-radius-sm);
  color:var(--pine-muted); font-size:13px; line-height:1.5;
}

/* 出発 / 返却 ボックス */
#mtsrcb-entry-form .rental-date-entry{
  display:grid;
  grid-template-columns:1fr 40px 1fr;
  grid-template-areas:"start arrow end";
  gap:12px; align-items:stretch;
}
#rental-start-box{ grid-area:start; }
#rental-date-arrow{ grid-area:arrow; }
#rental-end-box  { grid-area:end; }
#mtsrcb-entry-form .rental-date-box{
  display:flex; flex-direction:column; gap:8px;
  padding:14px;
  background:var(--pine-surface);
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius);
  min-width:0;
}
#mtsrcb-entry-form .date-box-label{
  display:inline-block; align-self:flex-start;
  padding:2px 10px;
  border-radius:999px;
  background:var(--pine-green);
  color:#fff !important;
  font-size:12px; font-weight:800; letter-spacing:.08em;
}
#rental-end-box .date-box-label{ background:#64748b; }

#rental-date-arrow{
  align-self:center; justify-self:center;
  color:var(--pine-green);
  font-size:22px; line-height:1; user-select:none;
}

/* スポット選択 + マップボタン（Flex版） */
#mtsrcb-entry-form .rental-premises-box{
  display:flex; align-items:center; gap:6px; min-width:0;
}
#mtsrcb-entry-form .rental-premises-box .rental-premises-select{
  flex:1 1 0; min-width:0;
  box-sizing:border-box;
  height:44px; padding:0 34px 0 12px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%234CAF50' d='M6 8L0 0h12z'/></svg>") no-repeat right 12px center;
  font-size:14px; color:var(--pine-text);
  appearance:none; -webkit-appearance:none;
}
#mtsrcb-entry-form .rental-premises-box .bce-map-btn{
  flex:0 0 auto;
  height:44px; padding:0 12px;
  border:1.5px solid var(--pine-green);
  border-radius:999px;
  background:#fff; color:var(--pine-green);
  font-size:12px; font-weight:700; white-space:nowrap;
  cursor:pointer;
  transition:background .2s, color .2s, transform .15s;
}
#mtsrcb-entry-form .rental-premises-box .bce-map-btn:hover{
  background:var(--pine-green); color:#fff; transform:translateY(-1px);
}

/* 日付入力 + 時刻 */
#mtsrcb-entry-form .date-box-date input.date-entry{
  box-sizing:border-box;
  width:100%; height:46px;
  padding:0 40px 0 14px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") no-repeat right 12px center;
  font-size:15px; font-weight:600; color:var(--pine-text);
  cursor:pointer;
}
#mtsrcb-entry-form .date-entry.focused{
  border-color:var(--pine-green);
  box-shadow:var(--pine-focus);
  background-color:var(--pine-green-soft);
}
#mtsrcb-entry-form .date-box-time{
  display:flex; align-items:center; gap:6px;
}
#mtsrcb-entry-form .date-box-time .rental-time{
  flex:1 1 0;
  box-sizing:border-box;
  height:44px; padding:0 28px 0 12px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%234CAF50' d='M6 8L0 0h12z'/></svg>") no-repeat right 10px center;
  font-size:15px; font-weight:600; color:var(--pine-text);
  appearance:none; -webkit-appearance:none;
  text-align:center; text-align-last:center;
}
#mtsrcb-entry-form .date-box-time .form-addchr{
  font-size:18px; font-weight:800; color:var(--pine-muted);
}

/* 申込む ボタン */
#mtsrcb-entry-form .rental-action-row{
  margin-top:18px; display:flex; justify-content:center;
}
#mtsrcb-entry-form .button-primary{
  min-width:220px; min-height:52px; padding:0 32px;
  border:none; border-radius:999px;
  background:var(--pine-green); color:#fff;
  font-size:16px; font-weight:800; letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(76,175,80,.25);
  transition:background .2s, transform .15s, box-shadow .2s;
}
#mtsrcb-entry-form .button-primary:hover{
  background:var(--pine-green-dark); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(76,175,80,.35);
}


/* =========================================================
   S6. Booking Confirm Form (予約内容確認)
   ========================================================= */
.page-content form[enctype="multipart/form-data"]{
  max-width:960px; margin:0 auto;
  padding:clamp(14px, 2vw, 24px);
}
.rental-form-block{
  margin:0 0 20px;
  padding:clamp(14px, 2vw, 22px);
  background:var(--pine-bg);
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius);
  box-shadow:var(--pine-shadow);
}
.rental-form-title,
.rental-form-block > h3{
  margin:0 0 14px; padding:8px 14px;
  background:var(--pine-green-soft);
  border-left:4px solid var(--pine-green);
  border-radius:var(--pine-radius-sm);
  color:var(--pine-green-dark);
  font-size:16px; font-weight:800; letter-spacing:.02em;
}
.rental-form-block .description,
.rental-form-block .form-required{
  margin:0 0 12px; color:var(--pine-muted); font-size:13px;
}
.mts-required{ color:#ef4444; font-weight:700; }

/* form-table */
.mts-form-table{ width:100%; border-collapse:collapse; }
.mts-form-table th,
.mts-form-table td{
  padding:10px 12px; vertical-align:top;
  border-bottom:1px solid #eef0f3;
  font-size:14px; color:var(--pine-text);
}
.mts-form-table th{
  width:32%;
  background:var(--pine-surface);
  font-weight:700; text-align:left;
  color:var(--pine-text);
  border-right:1px solid #eef0f3;
}
.mts-form-table tr:last-child th,
.mts-form-table tr:last-child td{ border-bottom:none; }

/* 予約期間（出発 ➤ 返却） — Flex版 */
.reserve-period-datetime{
  display:flex; align-items:center; gap:10px;
}
.rental-period-date{
  flex:1 1 0; min-width:0;
  padding:10px 12px;
  background:var(--pine-surface);
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius-sm);
  line-height:1.5;
}
.rental-period-date .rental-premise-name{
  font-size:12px; color:var(--pine-green-dark);
  font-weight:700; margin-bottom:4px;
}
.rental-period-date .rental-period-day{
  font-size:14px; font-weight:700;
}
.rental-period-date .rental-period-time{
  font-size:13px; color:var(--pine-muted);
}
.rental-period-arrow{
  text-align:center; font-size:22px;
  color:var(--pine-green); user-select:none;
}

/* 申込車両 */
.reserve-vehicle-name{
  font-size:16px; font-weight:800; margin-bottom:8px;
  color:var(--pine-text);
}
.reserve-vehicle-image{
  max-width:240px; overflow:hidden;
  border-radius:var(--pine-radius-sm);
  background:#f3f4f6;
}
.reserve-vehicle-image .rental-vehicle-img{
  width:100%; height:auto; display:block;
}

/* 料金 */
.vehicle-charge-price{ padding-right:4px; }
.vehicle-charge-charge{
  font-size:22px; font-weight:900;
  color:var(--pine-green-dark); letter-spacing:.02em;
}
.vehicle-premises-charge{
  font-size:12px; color:var(--pine-muted); margin-top:2px;
}

/* オプション（Pillラジオ） */
#mts-option-form th.options-select-title{ width:44%; }
#mts-option-form td.option-select{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
#mts-option-form .rental-option-label{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  border:1.5px solid var(--pine-border);
  border-radius:999px;
  background:#fff; color:var(--pine-text);
  font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
#mts-option-form .rental-option-label:hover{
  border-color:var(--pine-green); color:var(--pine-green);
}
#mts-option-form .rental-option-label input[type="radio"]{
  accent-color:var(--pine-green); margin:0;
}
#mts-option-form .rental-option-label:has(input:checked){
  background:var(--pine-green);
  border-color:var(--pine-green);
  color:#fff;
}
#mts-option-form .rental-option-label:has(input:checked) input{
  accent-color:#fff;
}
#mts-option-form .rental-option-label.unavailable{
  background:#f3f4f6; border-color:#e5e7eb; color:#9ca3af;
  cursor:not-allowed; pointer-events:none;
}
/* 排他制御JSが付ける選択中行のハイライト */
#mts-option-form tr.is-exclusive-selected{
  background:var(--pine-green-soft);
  box-shadow:inset 3px 0 0 var(--pine-green);
  transition:background .2s;
}
.option-charge-price{
  width:120px; text-align:right;
  font-weight:800; color:var(--pine-text); white-space:nowrap;
}

/* 申込者連絡先 */
.customer-name-box{
  display:inline-flex; align-items:center; gap:6px;
  margin-right:10px; margin-bottom:6px;
}
.customer-name-label{
  min-width:24px; font-size:12px;
  color:var(--pine-muted); font-weight:700;
}
.customer-name{ width:150px; height:42px; }

.mts-form-table .mts-fat         { width:100%; max-width:420px; }
.mts-form-table .mts-middle-small{ width:220px; max-width:100%; }
.mts-form-table .mts-char8       { width:140px; }
.mts-form-table .mts-select      { width:200px; height:42px; }

#mts-postcode-button{
  height:42px; padding:0 16px; margin-left:6px;
  border:1.5px solid var(--pine-green);
  border-radius:999px;
  background:#fff; color:var(--pine-green);
  font-weight:700; font-size:13px; cursor:pointer;
  transition:background .2s, color .2s, transform .15s;
}
#mts-postcode-button:hover{
  background:var(--pine-green); color:#fff; transform:translateY(-1px);
}

.mts-form-table dl{
  margin:0; display:grid;
  grid-template-columns:110px 1fr;
  gap:8px 10px; align-items:center;
}
.mts-form-table dl dt.customer-header{
  font-size:12px; color:var(--pine-muted); font-weight:700;
}
.mts-form-table dl dd{ margin:0; }

.mts-form-note textarea{ width:100%; min-height:120px; }

/* アクション（確認する / 戻る） */
.rental-form-block.action-row{
  display:flex; justify-content:center; gap:12px;
  flex-wrap:wrap; padding:18px;
  background:transparent; border:none; box-shadow:none;
}
.rental-form-block.action-row .button-primary{
  min-width:180px; min-height:52px; padding:0 28px;
  border:2px solid var(--pine-green);
  border-radius:999px;
  background:var(--pine-green); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(76,175,80,.25);
  transition:background .2s, transform .15s, box-shadow .2s;
}
.rental-form-block.action-row .button-primary:hover{
  background:var(--pine-green-dark); border-color:var(--pine-green-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(76,175,80,.35);
}
.rental-form-block.action-row input[name="return_entry"]{
  background:#fff !important;
  color:var(--pine-green) !important;
  box-shadow:none !important;
}
.rental-form-block.action-row input[name="return_entry"]:hover{
  background:var(--pine-green-soft) !important;
}


/* =========================================================
   S7. Vehicle Calendar Card (車両一覧)
   ========================================================= */
.vehicle-calendar{
  display:grid;
  grid-template-columns:100px 1fr auto;
  grid-template-areas:
    "img  name name"
    "img  cal  cal"
    "img  btn  btn";
  gap:8px 14px; align-items:center;
  padding:10px 14px; margin:0 0 12px;
  background:#fff;
  border:1px solid var(--pine-border);
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:box-shadow .2s, transform .15s;
}
.vehicle-calendar:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.vehicle-calendar .vehicle-name{
  grid-area:name; margin:0; padding:0;
  font-size:14px; font-weight:700; line-height:1.2;
  color:var(--pine-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vehicle-calendar .vehicle-image{
  grid-area:img;
  width:100px; height:75px;
  overflow:hidden; border-radius:8px;
  background:#f3f4f6;
  display:flex; align-items:center; justify-content:center;
}
.vehicle-calendar .vehicle-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.vehicle-calendar .vehicle-calendar-box{ display:contents; }
.vehicle-calendar .rental-calendar{ grid-area:cal; overflow:hidden; }
.vehicle-calendar .rental-calendar table{
  width:100%; border-collapse:collapse;
  table-layout:fixed; font-size:10.5px; line-height:1;
}
.vehicle-calendar .rental-calendar th,
.vehicle-calendar .rental-calendar td{
  width:calc(100%/7);
  padding:0; border:1px solid #eef0f3;
  text-align:center; vertical-align:middle;
  height:26px; box-sizing:border-box;
}
.vehicle-calendar .rental-calendar th{
  background:#f9fafb; color:#6b7280;
  font-weight:600; padding:2px 0; height:auto;
}
.vehicle-calendar .rental-calendar th.sat{ color:#3b82f6; }
.vehicle-calendar .rental-calendar th.sun{ color:#ef4444; }
.vehicle-calendar .day-number{
  display:block; font-size:10px; color:#374151; line-height:1;
}
.vehicle-calendar .day-number-str{ font-weight:600; }
.vehicle-calendar .day-status{
  display:block; font-size:11px; font-weight:700;
  line-height:1; margin-top:1px;
}
.vehicle-calendar .day-note{ display:none; }
.vehicle-calendar td.available{ background:#f0fdf4; }
.vehicle-calendar td.available .day-status{ color:var(--pine-green); }
.vehicle-calendar td.booked   { background:#fef2f2; }
.vehicle-calendar td.booked   .day-status{ color:#ef4444; }
.vehicle-calendar td.closed   { background:#f3f4f6; }
.vehicle-calendar td.closed   .day-status{ color:#9ca3af; }
.vehicle-calendar td.contact  { background:#fffbeb; }
.vehicle-calendar td.contact  .day-status{ color:#d97706; }
.vehicle-calendar td.today    { outline:2px solid #f59e0b; outline-offset:-2px; }
.vehicle-calendar td.holiday .day-number-str{ color:#ef4444; }
.vehicle-calendar td.no-day{ background:#fafafa; border-color:#f1f2f4; }
.vehicle-calendar .booking-link{ grid-area:btn; justify-self:end; margin:0; }
.vehicle-calendar .booking-link a{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 18px;
  border-radius:999px;
  background:var(--pine-green);
  color:#fff !important;
  font-size:13px; font-weight:700;
  text-decoration:none !important;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.vehicle-calendar .booking-link a:hover{
  background:var(--pine-green-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(76,175,80,.3);
}


/* =========================================================
   S8. Schedule Calendar (予約カレンダー / 予約画面)
   ========================================================= */
#mtsrcb-entry-calendar .booking-calendar{
  margin-top:16px; padding:12px;
  border:1px solid var(--pine-border);
  border-radius:var(--pine-radius);
  background:#fff;
  box-shadow:var(--pine-shadow);
}
#change-calendar-pain{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center; gap:8px;
  margin-bottom:10px; padding:8px 10px;
  background:var(--pine-green);
  border-radius:var(--pine-radius-sm);
  color:#fff;
}
#calendar-link-title{
  text-align:center; font-weight:800; font-size:15px; color:#fff;
}
#calendar-link-prev input,
#calendar-link-next input{
  width:36px; height:36px; padding:0;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:16px; font-weight:800; cursor:pointer;
  transition:background .2s, transform .1s;
}
#calendar-link-prev input:hover,
#calendar-link-next input:hover{ background:rgba(255,255,255,.35); }
#calendar-link-prev input[disabled],
#calendar-link-next input[disabled]{ opacity:.35; cursor:not-allowed; }

.booking-calendar .schedule-calendar table{
  width:100%; border-collapse:collapse;
  table-layout:fixed; font-size:12px;
}
.booking-calendar caption{ display:none; }
.booking-calendar th,
.booking-calendar td{
  width:calc(100%/7); height:40px; padding:0;
  border:1px solid #eef0f3;
  text-align:center; vertical-align:middle; box-sizing:border-box;
}
.booking-calendar th{
  height:28px; background:var(--pine-surface);
  color:var(--pine-muted);
  font-size:11px; font-weight:700;
}
.booking-calendar th.sat{ color:#3b82f6; }
.booking-calendar th.sun{ color:#ef4444; }
.booking-calendar td > div{ display:block; line-height:1; }
.booking-calendar .day-number{ font-size:11px; color:var(--pine-text); padding-top:3px; }
.booking-calendar .day-number-str{ font-weight:700; }
.booking-calendar .day-status{
  margin-top:2px; font-size:13px; font-weight:800; line-height:1;
}
.booking-calendar .day-note{ display:none; }
.booking-calendar td.sat:not(.closed) .day-number-str{ color:#3b82f6; }
.booking-calendar td.sun:not(.closed) .day-number-str,
.booking-calendar td.holiday .day-number-str{ color:#ef4444; }
.booking-calendar td.available{
  background:#f0fdf4; cursor:pointer;
  transition:background .15s, transform .1s;
}
.booking-calendar td.available:hover{
  background:var(--pine-green-soft); transform:scale(1.02);
}
.booking-calendar td.available .day-status{ color:var(--pine-green); }
.booking-calendar td.booked { background:#fef2f2; }
.booking-calendar td.booked  .day-status{ color:#ef4444; }
.booking-calendar td.closed { background:#f3f4f6; }
.booking-calendar td.closed  .day-status{ color:#9ca3af; }
.booking-calendar td.contact{ background:#fffbeb; }
.booking-calendar td.contact .day-status{ color:#d97706; }
.booking-calendar td.today{ outline:2px solid #f59e0b; outline-offset:-2px; }

/* 選択状態 */
.booking-calendar td.selected,
.booking-calendar td.start-day,
.booking-calendar td.end-day,
.booking-calendar td.in-range{ background:var(--pine-green) !important; }
.booking-calendar td.selected .day-number-str,
.booking-calendar td.start-day .day-number-str,
.booking-calendar td.end-day .day-number-str,
.booking-calendar td.in-range .day-number-str,
.booking-calendar td.selected .day-status,
.booking-calendar td.start-day .day-status,
.booking-calendar td.end-day .day-status,
.booking-calendar td.in-range .day-status{ color:#fff !important; }

.booking-calendar td.no-day{ background:#fafafa; border-color:#f1f2f4; }
#month-calendar-loading{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(2px);
}


/* =========================================================
   S9. jQuery UI Datepicker (popup)
   ========================================================= */
#ui-datepicker-div.ui-datepicker{
  box-sizing:border-box;
  width:min(340px, calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  left:50% !important; right:auto !important;
  transform:translateX(-50%);
  padding:12px;
  background:#fff;
  border:1px solid var(--pine-border) !important;
  border-radius:var(--pine-radius) !important;
  box-shadow:var(--pine-shadow-lg);
  color:var(--pine-text);
  font-family:inherit; font-size:14px;
  overflow:hidden;
  z-index:9999 !important;
}
#ui-datepicker-div .ui-datepicker-header{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:42px; padding:0 48px; margin:0 0 10px;
  background:var(--pine-green) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--pine-radius-sm) !important;
}
#ui-datepicker-div .ui-datepicker-title{
  flex:1; text-align:center; font-weight:700;
  font-size:15px; line-height:1; color:#fff;
}
#ui-datepicker-div .ui-datepicker-title span{ color:#fff; }
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0;
  border:none !important; border-radius:50% !important;
  background:rgba(255,255,255,.18) !important;
  cursor:pointer;
  transition:background .2s, opacity .2s, transform .1s;
  overflow:hidden;
}
#ui-datepicker-div .ui-datepicker-prev{ left:8px; }
#ui-datepicker-div .ui-datepicker-next{ right:8px; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover{
  background:rgba(255,255,255,.35) !important;
  transform:translateY(-50%) scale(1.05);
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled{
  opacity:.35 !important; cursor:not-allowed; pointer-events:none;
}
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon{
  display:block; width:32px; height:32px; margin:0;
  background:none !important;
  text-indent:200%; white-space:nowrap; overflow:hidden;
  position:relative;
}
#ui-datepicker-div .ui-datepicker-prev .ui-icon::before,
#ui-datepicker-div .ui-datepicker-next .ui-icon::before{
  content:""; position:absolute; top:50%; left:50%;
  width:9px; height:9px;
  border-top:2px solid #fff; border-right:2px solid #fff;
  border-radius:1px;
}
#ui-datepicker-div .ui-datepicker-prev .ui-icon::before{
  transform:translate(-30%, -50%) rotate(-135deg);
}
#ui-datepicker-div .ui-datepicker-next .ui-icon::before{
  transform:translate(-70%, -50%) rotate(45deg);
}

#ui-datepicker-div .ui-datepicker-calendar{
  width:100% !important; max-width:100% !important; min-width:0 !important;
  table-layout:fixed !important;
  border-collapse:separate; border-spacing:2px;
  margin:0;
}
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td{
  width:calc(100%/7) !important;
  max-width:calc(100%/7) !important;
  padding:0; text-align:center; vertical-align:middle;
  box-sizing:border-box; border:none; background:transparent;
}
#ui-datepicker-div .ui-datepicker-calendar th{
  padding:6px 0; font-size:12px; font-weight:700; color:var(--pine-muted);
}
#ui-datepicker-div .ui-datepicker-calendar th:nth-last-child(2){ color:#3b82f6; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child       { color:#ef4444; }
#ui-datepicker-div .ui-datepicker-calendar td{ aspect-ratio:1/1; font-size:13px; }
#ui-datepicker-div .ui-datepicker-calendar td > *{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-width:0;
  border:1px solid transparent !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--pine-text) !important;
  font-weight:500; text-decoration:none; box-sizing:border-box;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
#ui-datepicker-div .ui-datepicker-calendar td > a:hover,
#ui-datepicker-div .ui-datepicker-calendar td > a.ui-state-hover,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-days-cell-over > a{
  background:var(--pine-green-soft) !important;
  border-color:var(--pine-green) !important;
  color:var(--pine-green-dark) !important;
}
#ui-datepicker-div .ui-datepicker-calendar td > a.ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day > a{
  background:var(--pine-green) !important;
  border-color:var(--pine-green) !important;
  color:#fff !important;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today > *{
  background:#fff7d6 !important;
  border-color:#f59e0b !important;
  color:#92400e !important;
  font-weight:700;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable{
  opacity:.45; pointer-events:none;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled > *{
  background:#f3f4f6 !important;
  color:#9ca3af !important;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month{
  visibility:hidden;
}
#ui-datepicker-div .ui-datepicker-calendar td:nth-child(6):not(.ui-state-disabled) > *{ color:#3b82f6 !important; }
#ui-datepicker-div .ui-datepicker-calendar td:nth-child(7):not(.ui-state-disabled) > *{ color:#ef4444 !important; }
#ui-datepicker-div *{ -webkit-tap-highlight-color:transparent; }


/* =========================================================
   S10. Hide Unused UI
   ========================================================= */
.inner-header-description,
.inner-header-description.gridContainer,
.inner-header-description .header-description-row,
.inner-header-description .hero-title,
.rental-finder .finder-arrow,
.finder-arrow{
  display:none !important;
}


/* =========================================================
   S11. Responsive
   ---------------------------------------------------------
   カスケード最終層。すべての media クエリはここに集約。
   ========================================================= */

/* ---- 1024px ---- */
@media (max-width: 1024px){
  .area-buttons{ grid-template-columns:repeat(3, 1fr) !important; }
}

/* ---- 900px ---- */
@media (max-width: 900px){
  table{ min-width:inherit; font-size:.92em; }
}

/* ---- 820px ---- */
@media (max-width: 820px){
  .mts-form-table th{ width:38%; font-size:13px; }
  .option-charge-price{ width:90px; font-size:13px; }
}

/* ---- 768px ---- */
@media (max-width: 768px){
  .mesmerize-content-padding #page > .page-content,
  .mesmerize-inner-page      #page > .page-content{
    padding-top:1rem !important;
    padding-bottom:2rem !important;
  }

  /* 予約入力 */
  #mtsrcb-entry-form.mtsrcb-page-block,
  #mtsrcb-entry-form.entry-page{ padding:12px; }
  #mtsrcb-entry-vehicle .rental-vehicle-name{ font-size:16px; padding:8px 12px; }
  #mtsrcb-entry-form .rental-date-entry{
    grid-template-columns:1fr;
    grid-template-areas:"start" "arrow" "end";
    gap:8px;
  }
  #rental-date-arrow{ display:none !important; }
  #mtsrcb-entry-form .rental-premises-box{ flex-wrap:wrap; }
  #mtsrcb-entry-form .rental-premises-box .bce-map-btn{ width:100%; }
  #mtsrcb-entry-form .button-primary{ width:100%; min-width:0; }
  .booking-calendar th,
  .booking-calendar td{ height:36px; }
  .booking-calendar .day-number{ font-size:10px; }
  .booking-calendar .day-status{ font-size:12px; }
}

/* ---- 680px ---- */
@media (max-width: 680px){
  /* Area */
  .area-buttons{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .area-btn{ height:52px; min-height:52px; font-size:14px; }

  /* Rental Finder */
  .rental-finder .finder-box{
    grid-template-columns:1fr !important;
    grid-template-areas:"start" "end" "type" !important;
  }
  .rental-finder .button-box{
    margin-top:8px !important;
    flex-direction:row !important;
  }
  .rental-finder .button-box .finder-button:nth-child(2),
  .rental-finder .button-box .finder-date-reset{
    display:none !important;
  }
  .rental-finder .button-box .finder-button:first-child{ flex:1 1 100%; }

  /* Confirm form — table → card */
  .mts-form-table,
  .mts-form-table tbody,
  .mts-form-table tr,
  .mts-form-table th,
  .mts-form-table td{
    display:block; width:100% !important;
    box-sizing:border-box; border:none;
  }
  .mts-form-table tr{
    margin-bottom:14px; padding:10px;
    border:1px solid var(--pine-border);
    border-radius:var(--pine-radius-sm);
    background:#fff;
  }
  .mts-form-table th{
    margin:-10px -10px 8px;
    padding:8px 12px;
    background:var(--pine-green-soft);
    border-right:none;
    border-bottom:1px solid var(--pine-border);
    border-radius:var(--pine-radius-sm) var(--pine-radius-sm) 0 0;
    font-size:13px; color:var(--pine-green-dark);
  }
  .mts-form-table td{ padding:0; }

  .reserve-period-datetime{ flex-direction:column; gap:8px; }
  .rental-period-arrow{ transform:rotate(90deg); margin:2px 0; }

  #mts-option-form th.options-select-title{ width:100%; }
  #mts-option-form td.option-select{ justify-content:flex-start; }
  .option-charge-price{
    width:100%; text-align:left; padding-top:4px;
    color:var(--pine-green-dark);
  }
  .option-charge-price::before{
    content:"料金 ";
    color:var(--pine-muted); font-weight:600; margin-right:4px;
  }

  .customer-name-box{
    display:flex; width:48%;
    margin-right:4%; margin-bottom:8px;
  }
  .customer-name-box:nth-child(2){ margin-right:0; }
  .customer-name{ width:100%; flex:1 1 auto; }

  .mts-form-table dl{ grid-template-columns:1fr; gap:6px; }
  .mts-form-table dl dt.customer-header{ margin-top:4px; }
  #mts-postcode-button{ margin:6px 0 0 0; width:100%; }
  .reserve-vehicle-image{ max-width:100%; }

  .rental-form-block.action-row{
    flex-direction:column; gap:10px; padding:12px 0;
  }
  .rental-form-block.action-row .button-primary{
    width:100%; min-width:0;
  }
  .rental-form-block.action-row input[name="return_entry"]{ order:2; }
  .rental-form-block.action-row input[name="check_form"] { order:1; }
}

/* ---- 640px ---- */
@media (max-width: 640px){
  .vehicle-calendar{
    grid-template-columns:72px 1fr;
    grid-template-areas:
      "img name"
      "cal cal"
      "btn btn";
    gap:6px 10px; padding:10px;
  }
  .vehicle-calendar .vehicle-image{ width:72px; height:54px; }
  .vehicle-calendar .rental-calendar th,
  .vehicle-calendar .rental-calendar td{ height:22px; }
  .vehicle-calendar .day-number{ font-size:9px; }
  .vehicle-calendar .day-status{ font-size:10px; }
  .vehicle-calendar .booking-link{ justify-self:stretch; }
  .vehicle-calendar .booking-link a{ width:100%; }
}

/* ---- 480px ---- */
@media (max-width: 480px){
  .area-nav-bar .back-button{
    width:44px; padding:0; justify-content:center;
  }
  .area-nav-bar .back-button__label{ display:none; }
  .area-nav-bar .back-button__icon{ margin:0; }
}

/* ---- 420px ---- */
@media (max-width: 420px){
  #ui-datepicker-div.ui-datepicker{
    width:calc(100vw - 16px) !important;
    padding:10px;
  }
  #ui-datepicker-div .ui-datepicker-calendar th{ font-size:11px; }
  #ui-datepicker-div .ui-datepicker-calendar td{ font-size:12px; }
  .booking-calendar th,
  .booking-calendar td{ height:32px; }
  .booking-calendar .day-number{ font-size:9px; padding-top:2px; }
  .booking-calendar .day-status{ font-size:11px; }
  #calendar-link-title{ font-size:14px; }
  #calendar-link-prev input,
  #calendar-link-next input{
    width:32px; height:32px; font-size:14px;
  }
}

/* ---- 380px ---- */
@media (max-width: 380px){
  .area-buttons{ grid-template-columns:1fr !important; }
  .rental-form-title,
  .rental-form-block > h3{ font-size:15px; }
  .vehicle-charge-charge{ font-size:20px; }
  #mts-option-form .rental-option-label{
    padding:6px 12px; font-size:12px;
  }
}


/* =========================================================
   S12. A11y / Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .area-btn,
  .rental-finder .finder-button input,
  #ui-datepicker-div .ui-datepicker-calendar td > *,
  #ui-datepicker-div .ui-datepicker-prev,
  #ui-datepicker-div .ui-datepicker-next,
  .rental-form-block.action-row .button-primary,
  #mts-option-form .rental-option-label,
  #mts-postcode-button,
  #mtsrcb-entry-form .button-primary,
  .vehicle-calendar,
  .vehicle-calendar .booking-link a{
    transition:none !important;
    transform:none !important;
  }
}
/* =========================================================
   Page Header Hero — 背景画像/背景色を解除（予約画面など）
   ========================================================= */
.header.color-overlay,
.header.custom-mobile-image,
.header.wp-dark-mode-bg-image{
  background-image: none !important;
  background-color: transparent !important;
}

/* オーバーレイも非表示 */
.header .background-overlay{
  display: none !important;
}

/* ページタイトル帯「予約画面」も非表示（前回ルール踏襲） */
.header .inner-header-description,
.header .inner-header-description .hero-title{
  display: none !important;
}

/* 上部の余白（split-header）を詰める */
.header .split-header{ height: 0 !important; }

/* =========================================================
   END
   ========================================================= */