/* スマホ表示の調整（PCの表示は変えない）。 */
@media (max-width: 767.98px) {
  /* 見出しをスマホの大きさに */
  main section .container > h3 { font-size: 1.6rem !important; line-height: 1.45; }
  main h4 { font-size: 1.4rem !important; line-height: 1.45; }
  main h5 { font-size: 1.15rem !important; line-height: 1.5; }

  /* 会社概要の表：項目名が1〜2文字ずつ折り返さないように */
  main .table th { white-space: nowrap; padding: 12px 10px !important; width: 7.5em; vertical-align: middle; }
  main .table td { padding: 12px 10px !important; vertical-align: middle; }

  /* お問い合わせの枠：内側の余白を減らし、入力欄とロボット確認が枠に収まるように */
  main .col-12.page_speed_999056009 { padding-left: 0; padding-right: 0; }
  main .background-white.p-5 { padding: 24px 14px !important; }
  main .cf-turnstile { display: flex; justify-content: center; max-width: 100%; }
}
/* とても狭い画面（幅360px未満）では、ロボット確認を少し縮めて枠に収める */
@media (max-width: 359.98px) {
  main .cf-turnstile { transform: scale(.88); transform-origin: center left; }
}

/* スマホのヘッダー：元のサイトと同じく1行（左にメニューのボタン、右にKOYU・PayPay・CANTALの帯）。電話とメールは画面の下に固定。
   元は1枚の画像だったが「運転代行」の文言が入っているため、今の内容でHTMLに作り直した。 */
.koyu-sp-bar { display: none; }
@media (max-width: 575.98px) {
  .navbar-elixir > .container { padding-left: 0; padding-right: 0; }
  .navbar-elixir .navbar { flex-wrap: wrap; align-items: center; padding: 0; }
  .navbar-elixir .navbar-toggler { order: 1; flex: 0 0 15%; width: 15% !important; margin: 0; padding: 0; display: flex; justify-content: center; }
  .koyu-sp-bar { order: 2; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 54px; padding: 0 10px; background: #2a3656; }
  .navbar-elixir .navbar-collapse { order: 3; flex-basis: 100%; }
  .koyu-sp-bar img { display: block; height: 40px; width: auto; }
  .koyu-sp-bar__koyu { background: #fff; border-radius: 3px; }
  .koyu-sp-bar__cantal { min-width: 0; max-width: 58%; height: auto !important; max-height: 40px; object-fit: contain; background: #fff; }
}
/* PC：白い車の写真の上でも黄色の見出しが読めるように影を付ける */
@media (min-width: 768px) {
  .koyu-hero h1 { text-shadow: 0 2px 12px rgba(20, 30, 60, .55), 0 0 3px rgba(20, 30, 60, .6); }
}

@media (max-width: 767.98px) {
  /* トップの写真の下に空白ができないように、スライド枠の高さを写真に合わせる */
  .flexslider .slides { height: auto !important; }
  /* オプションなどの表が画面からはみ出さないように */
  main table { max-width: 100%; }
  main table img { max-width: 100%; height: auto; }
  main table td, main table th { word-break: break-word; }
}
@media (max-width: 374.98px) {
  main table { font-size: .82rem; }
}

@media (max-width: 767.98px) {
  /* オプション一覧の表：列の幅を画面に合わせて固定し、はみ出さないように */
  #options { table-layout: fixed; width: 100%; }
  #options th, #options td { padding: 6px 4px; overflow-wrap: anywhere; }
  #options img { width: 100%; height: auto; }
}

/* スマホ：電話とメールのボタンを画面の下に固定する */
.koyu-sp-fixed { display: none; }
@media (max-width: 575.98px) {
  .koyu-sp-fixed { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
    padding-bottom: env(safe-area-inset-bottom); background: #2a3656; }
  .koyu-sp-fixed a { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 7px; height: 56px; padding: 0 6px;
    color: #fff !important; font-weight: 700; font-size: .92rem; text-decoration: none; line-height: 1.2; }
  .koyu-sp-fixed i { font-size: 1.25rem; }
  .koyu-sp-fixed span { display: flex; flex-direction: column; line-height: 1.25; }
  /* 1行目は小さい説明、2行目（電話番号・お問い合わせ）を大きく。画面の幅に合わせて大きさを変え、狭くても収まるように */
  .koyu-sp-fixed small { font-size: .7rem; font-weight: 700; opacity: .9; letter-spacing: .05em; }
  .koyu-sp-fixed b { font-size: clamp(.92rem, 4.4vw, 1.1rem); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
  .koyu-sp-fixed__tel { background: #fd9b28; }
  .koyu-sp-fixed__mail { background: #2a3656; }
  /* 下のボタンで、ページの一番下が隠れないように */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}