/* =========================
   Omoiyari Taxi: clean + lite
   2025-10-23 FINAL (mobile-bg fixed)
   ========================= */

/* ---- Reset / base ---- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html,body{ height:100%; margin:0; padding:0; overflow-x:hidden; }
img, video, iframe { max-width:100%; height:auto; display:block; }
a:focus,button:focus{ outline:3px solid #2b6cb0; outline-offset:2px; }
:where(h1,h2,h3,[id]){ scroll-margin-top: calc(var(--head-h,64px) + 16px); }

/* ---- Tokens ---- */
:root{
  --accent:#2b6cb0; --accent-2:#215494;
  --ok:#10b981; --warn:#ef4444;
  --text:#0f172a; --muted:#586174;
  --glass:rgba(255,255,255,.85);
  --card:#ffffff; --shadow:0 10px 28px rgba(0,0,0,.15);
  --radius:18px; --radius-sm:12px;
  --head-h:64px;
  --section-gap: clamp(20px, 4.8vw, 48px);
  --card-gap:    clamp(12px, 3.2vw, 20px);
  --border:#dbe0e6; --bg:#f6f8fb;
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
body{
  line-height:1.7; color:var(--text); background:var(--bg);
  font-family:'Noto Sans JP',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  padding-top: var(--head-h, 64px);
}
.muted{ color:var(--muted); font-size:.98rem; }

/* =========================
   Header
   ========================= */
header{
  position:fixed; inset:0 auto auto 0; right:0; z-index:1000;
  background:var(--glass); backdrop-filter:blur(10px);
  display:flex; gap:.8rem; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; border-bottom:1px solid rgba(0,0,0,.06); min-height:56px;
}
.logo{ display:flex; align-items:center; gap:.6rem; }
.logo .mark{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff; box-shadow:var(--shadow); }
.site-ttl{ font-size:1.1rem; color:var(--accent); margin:0; }

.admin-btn{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  padding:.5rem .8rem; border-radius:999px; font-weight:700; color:#334155; background:#ffffffcc;
  border:1px solid rgba(0,0,0,.06);
}
.admin-btn:hover{ filter:brightness(.98); }
.tel-btn,.line-btn{
  border:0; border-radius:999px; padding:.6rem .95rem; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  justify-content:center; text-align:center; min-height:44px;
}
.tel-btn{ background:var(--accent); color:#fff; } .tel-btn:hover{ background:var(--accent-2); }
.line-btn{ background:#06C755; color:#fff; } .line-btn:hover{ filter:brightness(.95); }

/* =========================
   Background stack（JS切替版・競合解消）
   ========================= */
.bg-base,.bg-slideshow,.bg-overlay,.bg-focus{
  position:fixed; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  pointer-events:none; height:100vh;
}
@supports (height:100svh){ .bg-base,.bg-slideshow,.bg-overlay{ height:100svh; } }
@supports (height:100dvh){ .bg-base,.bg-slideshow,.bg-overlay{ height:100dvh; } }

/* z-index: iOS対策で非負 */
.bg-base{ z-index:0; }
.bg-slideshow{ z-index:1; overflow:hidden; }
.bg-overlay{
  z-index:2;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.05),
    rgba(0,0,0,.12)
  );
}

/* 本文は前面 */
body > header, main, footer, .hero-omo, .card { position:relative; z-index:10; }

/* 画像フォールバック（jpg → -webkit-image-set → image-set） */
.bg-base{
  background-image:url('/assets/helper-bg1.jpg?v=20251023z');
  background-image:-webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251023z') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  1x
  );
  background-image:image-set(
    url('/assets/helper-bg1.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  type('image/jpeg') 1x
  );
}

/* ===== JS駆動フェード =====
   ※ CSSアニメ（.s1/.s2/.s3, @keyframes）は使わない */
.bg-slideshow .slide{
  position:absolute; inset:0; opacity:0;
  background-position:center; background-size:cover; pointer-events:none;
  -webkit-backface-visibility:hidden; transform:translateZ(0);
  transition: opacity 1.05s ease; will-change: opacity;
}
.bg-slideshow .slide.is-active{ opacity:1; }

/* 3枚の画像指定（フォールバック込み） */
.slide.bg1{
  background-image:url('/assets/helper-bg1.jpg?v=20251023z');
  background-image:-webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251023z') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  1x
  );
  background-image:image-set(
    url('/assets/helper-bg1.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  type('image/jpeg') 1x
  );
}
.slide.bg2{
  background-image:url('/assets/helper-bg2.jpg?v=20251023z');
  background-image:-webkit-image-set(
    url('/assets/helper-bg2.webp?v=20251023z') 1x,
    url('/assets/helper-bg2.jpg?v=20251023z')  1x
  );
  background-image:image-set(
    url('/assets/helper-bg2.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg2.jpg?v=20251023z')  type('image/jpeg') 1x
  );
}
.slide.bg3{
  background-image:url('/assets/helper-bg3.jpg?v=20251023z');
  background-image:-webkit-image-set(
    url('/assets/helper-bg3.webp?v=20251023z') 1x,
    url('/assets/helper-bg3.jpg?v=20251023z')  1x
  );
  background-image:image-set(
    url('/assets/helper-bg3.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg3.jpg?v=20251023z')  type('image/jpeg') 1x
  );
}

/* Reduced motion: 切替は行いフェードのみ無効化（不透明固定はしない） */
@media (prefers-reduced-motion: reduce){
  .bg-slideshow .slide{ transition:none; }
}

/* =========================
   Sections / cards / grid
   ========================= */
main{ max-width:980px; margin: var(--section-gap) auto; padding:1rem; position:relative; z-index:1; }
section{ margin-block: var(--section-gap); }
.stack{ display:grid; gap: var(--card-gap); }
.grid{ display:grid; gap: var(--card-gap); grid-template-columns:repeat(12,1fr); }
.col-4{ grid-column:span 4; } .col-6{ grid-column:span 6; } .col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } .col-4,.col-6,.col-8,.col-12{ grid-column:1 / -1; } }

.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem; }
h2,h3{ color:var(--accent-2); margin:.35rem 0 .5rem; }

/* Hero */
.hero{
  display:grid; gap:16px; padding:24px 16px; background:var(--glass);
  backdrop-filter:blur(8px); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-omo{
  display:grid; gap:16px; padding:24px 16px; border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden;
}
.hero-omo .hero-ttl{ font-size:clamp(22px,6vw,36px); line-height:1.25; margin:0; }
.hero-omo .hero-lead{ font-size:clamp(14px,4.2vw,18px); line-height:1.7; margin:0; }
.hero-omo .hero-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hero-omo .hero-cta .btn{
  flex:1 1 180px; max-width:100%; text-align:center; padding:12px 16px;
  border-radius:9999px; min-height:44px; text-decoration:none;
}
.btn.tel{ background:#e53935; color:#fff; }
.btn.line{ background:#06C755; color:#fff; }
.btn.outline{ background:transparent; color:#333; border:2px solid #333; }

/* Chips */
.chip{ display:inline-block; background:#eef2f7; border-radius:999px; padding:.25rem .6rem; font-size:.85rem; color:#334; }

/* 地図（HTML変更なしでフルブリード化） */
.grid[aria-label="地図と連絡先"] .card:first-child{ padding:0; overflow:hidden; }
.grid[aria-label="地図と連絡先"] .card:first-child .map-wrap{
  margin:0; border-radius:0; box-shadow:none; height: clamp(380px, 62vh, 720px);
}
.grid[aria-label="地図と連絡先"] .card:first-child iframe{ width:100%; height:100%; display:block; border:0; }
@media (max-width:768px){
  .grid[aria-label="地図と連絡先"] .card:first-child .map-wrap{
    height: clamp(320px, 56vh, 620px);
  }
}

/* Footer */
footer{
  max-width:980px; margin: var(--section-gap) auto; color:#e7ecf3;
  background:rgba(0,0,0,.55); border-radius:16px; padding:1rem; text-align:center;
}

/* =========================
   Form (予約)
   ========================= */
label{ display:block; margin-top:.7rem; font-weight:700; }
input,select,textarea{
  width:100%; padding:.65rem; margin-top:.35rem;
  border:1px solid var(--border); border-radius:10px; font-size:1rem; background:#fff;
}
input:focus,select:focus,textarea:focus{ outline:3px solid #93c5fd; outline-offset:2px; }
button.primary{
  width:100%; padding:.85rem; border:0; border-radius:12px;
  background:var(--accent); color:#fff; font-size:1.05rem; font-weight:800; margin-top:.8rem; cursor:pointer;
}
button.primary:hover{ background:var(--accent-2); }

/* グリッドとオーバーフロー対策 */
#reserve{ overflow-x:hidden; }
.reserve-form{ display:grid; gap:.75rem; grid-template-columns:1fr 1fr; position:relative; }
@media (max-width:900px){ .reserve-form{ grid-template-columns:1fr; } }
.reserve-form, .reserve-form .field { min-width:0; }

/* 並び順 */
.field--when{ grid-column:1 / -1; order:1; }
.field--name{ order:2; }
.field--phone{ order:3; }
.field--from{ order:4; }
.field--to{ order:5; }
.field--trip{ order:6; }
.field--wheel{ order:7; }
.field--note{ grid-column:1 / -1; order:8; }
.field--auto{ grid-column:1 / -1; order:9; }

/* PCでは出発地/目的地を横並びに */
@media (min-width:901px){
  .field--from{ grid-column:1 / 2; }
  .field--to{ grid-column:2 / 3; }
}

/* 日時入力フィット & iOSズーム抑止 */
#reserve .field--when input#when,
input#when.flatpickr-input,
input[type="datetime-local"]#when{
  width:100% !important; max-width:100% !important; inline-size:100%; box-sizing:border-box;
}
@supports (width: -webkit-fill-available){
  #reserve .field--when input#when { width: -webkit-fill-available; }
}
@media (max-width:768px){
  .reserve-form .field input,
  .reserve-form .field select{ font-size:16px; min-width:0; box-sizing:border-box; }
  .reserve-form .field--when{ padding-right:0; }
  .reserve-form .field--when input#when{
    max-width:calc(100% - 12px) !important; margin-inline:auto; display:block;
  }
  .flatpickr-calendar{
    z-index:100000 !important; max-width:calc(100vw - 24px) !important;
    width:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    inset-inline:auto auto !important;
  }
}
.flatpickr-calendar{ z-index:100000 !important; }

/* Segmented control (往復/片道・手帳あり/なし) */
.seg-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.seg{ display:flex; gap:6px; background:#f1f5f9; padding:4px; border-radius:9999px; border:1px solid #e2e8f0; }
.seg input[type="radio"]{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.seg label{
  position:relative; user-select:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem .8rem; border-radius:9999px; font-weight:800; color:#334155; min-width:4.8em; border:1px solid transparent;
}
.seg label + label{ margin-left:6px; }
.seg label:has(input:checked){
  background:#fff; color:#0f172a; border-color:#cbd5e1; box-shadow:0 4px 18px rgba(2,6,23,.06);
}
.seg label:focus-within{ outline:3px solid #93c5fd; outline-offset:2px; }

/* 日時(左)＋区間/割引(右) 2カラム（>=640px） */
.row-when-trip { display:block; }
@media (min-width: 640px){
  .row-when-trip{
    display:grid; grid-template-columns: 1fr minmax(280px, 420px);
    gap: 12px; align-items: end;
  }
  #reserve .field--trip{ margin-top:0 !important; }
  #reserve .field--trip .help-inline{ display:none; }
}

/* =========================
   Voice widget (FAB)
   ========================= */
.voice-widget{
  position:fixed; right:calc(16px + var(--safe-r)); bottom:calc(16px + var(--safe-b));
  display:flex; flex-direction:column; gap:10px; z-index:2147483647;
}
.voice-widget button{
  width:56px; height:56px; border-radius:50%; border:none; box-shadow:var(--shadow);
  display:grid; place-items:center; font-size:22px; cursor:pointer; color:#fff;
}
#btnSpeak{ background:#0ea5e9 }  #btnSpeak.mute{ background:#64748b }  #btnListen{ background:var(--ok) }
.badge{ position:absolute; right:0; top:-8px; background:var(--warn); color:#fff; border-radius:999px; padding:2px 6px; font-size:12px; display:none }
#listening.on{ display:inline-block }

/* =========================
   Splash
   ========================= */
#splash{
  position:fixed; inset:0; z-index:100000;
  display:grid; place-items:center; background:#000; transition:opacity .6s ease;
}
#splash picture,#splash img{ width:100vw; height:100vh; object-fit:cover; display:block; }
#splash.is-hiding{ opacity:0; pointer-events:none; }
body.is-splashing{ overflow:hidden; padding-top:0 !important; }
body.is-splashing > header{ visibility:hidden; }
.splash-caption{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(1);
  font-family:'Yuji Syuku',serif; color:#fff; font-size:clamp(28px,6vw,56px); letter-spacing:.08em;
  text-shadow:0 3px 20px rgba(0,0,0,.5); opacity:0; animation:captionGrow var(--splash-dur,2500ms) ease-in-out forwards;
}
@keyframes captionGrow{
  0%{opacity:0; transform:translate(-50%,-50%) scale(1)}
  20%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1; transform:translate(-50%,-50%) scale(1.12)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.15)}
}
#skipSplash{
  position:absolute; right:calc(16px + var(--safe-r)); bottom:calc(16px + var(--safe-b));
  border:0; border-radius:999px; padding:.5rem .9rem; background:rgba(255,255,255,.9); color:#111;
  font-weight:700; cursor:pointer; box-shadow:var(--shadow);
}

/* =========================
   LINE QR
   ========================= */
#line-qr{ text-align:center; padding:40px 0; background:#fff; }
#line-qr h2{ font-size:1.8em; margin-bottom:20px; color:#333; }
#line-qr img{
  display:block; margin:12px auto; max-width:min(220px,80%); height:auto;
  border:3px solid #ddd; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1);
}
#line-qr a[role="button"]{
  display:inline-flex; align-items:center; gap:.5em; background:#06C755; color:#fff; font-size:1.2em;
  padding:12px 20px; border-radius:12px; text-decoration:none; min-height:44px; line-height:1;
}

/* =========================
   Mobile refinements
   ========================= */
@media (max-width:768px){
  header{ padding:.6rem .8rem; gap:.5rem; }
  .logo .mark{ width:32px; height:32px; border-radius:10px; }
  .hero,.hero-omo{ padding:20px 14px; gap:12px; }
  .hero-omo .hero-ttl{ font-size:clamp(22px,3.2vw + .9rem,28px); line-height:1.28; letter-spacing:.02em; }
  .hero-omo .hero-lead{ font-size:clamp(15px,1.2vw + .7rem,17px); line-height:1.7; }
  .hero-omo .hero-cta .btn{ padding:10px 14px; border-radius:9999px; min-height:44px; font-size:clamp(15px,2vw + .5rem,18px); flex-basis:100%; }
}

/* =========================
   Admin page “left-gap” cleaner (scoped to #app)
   ========================= */
#app aside,#app .sidebar,#app .left,#app .left-rail,#app nav[aria-label="sidebar"],#app .spacer-left,#app .rail-left{
  display:none !important; width:0 !important;
}
#app, #app .admin-wrap, #app .content-wrap{
  max-width:720px !important; width:min(92vw,720px) !important;
  margin:0 auto !important; padding-left:0 !important;
}
#app .grid, #app .admin-wrap .grid, #app .ap-page .grid{ grid-template-columns:1fr !important; }
#app *{ max-width:100% !important; }
#app table{ width:100% !important; table-layout:fixed !important; }

/* ===== Trip field（区間UIの最終形） ===== */
#reserve .field--trip,
#reserve .field--trip *{ writing-mode:horizontal-tb !important; word-break:keep-all !important; white-space:normal !important; min-width:0 !important; }

#reserve .field--trip{
  display:grid !important;
  grid-template-columns:max-content 1fr !important;
  align-items:center !important;
  gap:10px 12px !important;
  width:100% !important;
}
#reserve .field--trip > label{
  grid-column:1 !important; margin:0 !important; line-height:1.1 !important; white-space:nowrap !important; font-weight:700 !important;
}
#reserve .field--trip .seg-row{
  grid-column:2 !important; display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important;
}
#reserve .field--trip .seg{
  display:inline-flex !important; align-items:center !important; gap:6px !important; padding:6px !important;
  border-radius:9999px !important; background:#f1f5f9 !important; border:1px solid #e2e8f0 !important; line-height:1 !important;
}
#reserve .field--trip .seg label{
  position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-width:4.8em !important; min-height:40px !important; padding:.45rem .9rem !important;
  border-radius:9999px !important; font-weight:800 !important; color:#334155 !important; border:1px solid transparent !important; line-height:1 !important; text-align:center !important;
}
#reserve .field--trip .seg input[type="radio"]{ position:absolute !important; inset:0 !important; opacity:0 !important; pointer-events:none !important; }
#reserve .field--trip .seg label + label{ margin-left:6px !important; }
#reserve .field--trip .seg label:has(input:checked){
  background:#fff !important; color:#0f172a !important; border-color:#cbd5e1 !important; box-shadow:0 4px 18px rgba(2,6,23,.06) !important;
}
#reserve .field--trip > .muted{ grid-column:1 / -1 !important; margin-top:.25rem !important; }
@media (max-width:560px){
  #reserve .field--trip{ grid-template-columns:1fr !important; }
  #reserve .field--trip .seg-row{ grid-column:1 !important; }
}

/* ===== Mobile & Reduced-Motion BG FORCE-ON (final patch) ===== */
/* スライドは止めるが、透明にしない */
@media (prefers-reduced-motion: reduce){
  .bg-slideshow .slide{
    animation: none !important;
    opacity: 1 !important;      /* ← ここがポイント */
  }
}
/* モバイルでも非表示にしない */
@media (max-width: 768px){
  .bg-slideshow .slide{
    animation: none !重要;
    opacity: 1 !important;      /* ← ここがポイント */
  }
}

/* 画像読み込みの互換フォールバック（保険で再定義） */
.bg-base{
  background-image: url('/assets/helper-bg1.jpg?v=20251023z') !important;
  background-image: -webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251023z') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  1x
  ) !important;
  background-image: image-set(
    url('/assets/helper-bg1.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  type('image/jpeg') 1x
  ) !important;
}
.slide.bg1{
  background-image: url('/assets/helper-bg1.jpg?v=20251023z') !important;
  background-image: -webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251023z') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  1x
  ) !important;
  background-image: image-set(
    url('/assets/helper-bg1.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251023z')  type('image/jpeg') 1x
  ) !important;
}
.slide.bg2{
  background-image: url('/assets/helper-bg2.jpg?v=20251023z') !important;
  background-image: -webkit-image-set(
    url('/assets/helper-bg2.webp?v=20251023z') 1x,
    url('/assets/helper-bg2.jpg?v=20251023z')  1x
  ) !important;
  background-image: image-set(
    url('/assets/helper-bg2.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg2.jpg?v=20251023z')  type('image/jpeg') 1x
  ) !important;
}
.slide.bg3{
  background-image: url('/assets/helper-bg3.jpg?v=20251023z') !important;
  background-image: -webkit-image-set(
    url('/assets/helper-bg3.webp?v=20251023z') 1x,
    url('/assets/helper-bg3.jpg?v=20251023z')  1x
  ) !important;
  background-image: image-set(
    url('/assets/helper-bg3.webp?v=20251023z') type('image/webp') 1x,
    url('/assets/helper-bg3.jpg?v=20251023z')  type('image/jpeg') 1x
  ) !important;
}

/* iOS表示安定化（保険） */
.bg-base, .bg-slideshow, .bg-slideshow .slide, .bg-overlay{
  position: fixed !important;
  inset: 0 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  height: 100vh !important;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@supports (height: 100svh){
  .bg-base, .bg-slideshow, .bg-slideshow .slide, .bg-overlay{ height:100svh !important; }
}
@supports (height: 100dvh){
  .bg-base, .bg-slideshow, .bg-slideshow .slide, .bg-overlay{ height:100dvh !important; }
}

/* ====== モバイル安定版スライドショー（JS駆動） ====== */
/* 既存のCSSアニメを無効化し、JSで .is-active を付け替える */
.bg-slideshow .slide{
  animation: none !important;     /* 既存の @keyframes を殺す */
  opacity: 0;
  transition: opacity 1.05s ease; /* フェード */
  will-change: opacity;
}
.bg-slideshow .slide.is-active{ opacity: 1; }

/* ユーザーが簡易表示設定でも「切替」は行い、フェードだけ外す */
@media (prefers-reduced-motion: reduce){
  .bg-slideshow .slide{ transition: none; }
}

/* ==== Trip row spacing/size hotfix (v20251026) ==== */
/* 2カラムの間隔・高さ・ラベル余白を下のフィールドと統一 */
#reserve .field--trip{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  align-items:end !important;         /* 下の行と揃えて見える */
  margin-top:.25rem !important;
}
#reserve .field--trip .field{ min-width:0 !important; }

/* ラベル：上マージンを消して下だけ少し（他フィールドと同じリズム） */
#reserve .field--trip label{
  margin-top:0 !important;
  margin-bottom:.35rem !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* セレクトの高さ/パディング/角丸を下の input と統一 */
#reserve .field--trip select{
  width:100% !important;
  height:44px !important;
  padding:.65rem .8rem !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  font-size:1rem !important;
  background:#fff !important;
}

/* スマホは1カラムで縦並び */
@media (max-width:560px){
  #reserve .field--trip{ grid-template-columns:1fr !important; }
}