/* =========================
   Omoiyari Taxi: Mobile-safe CSS
   2025-10-13 build "bg-fix+ver"
   ========================= */

/* ---- Reset / safety ---- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html,body{ height:100%; }
body { margin:0; line-height:1.7; color:#111; overflow-x:hidden; background:#f6f8fb;
  font-family:'Noto Sans JP',system-ui,Segoe UI,Roboto,Arial,sans-serif; }
img, video, iframe { max-width:100%; height:auto; display:block; }
.container { max-width:1080px; margin-inline:auto; padding-inline:16px; }
a:focus,button:focus{ outline:3px solid #2b6cb0; outline-offset:2px; }
:where(h2,h3,[id]){ scroll-margin-top:72px; }

/* ---- Map / wide boxes ---- */
.table-wrap,.map-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.map-wrap iframe{ width:100% !important; }

/* =========================
   Hero (generic)
   ========================= */
.hero{
  display:grid; gap:16px; padding:24px 16px;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px);
  border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.hero h1,.hero .ttl,.hero .title{ font-size:clamp(22px,6vw,36px); line-height:1.25; margin:0; }
.hero p,.hero .lead,.hero .desc,.hero .body,.muted{ font-size:clamp(14px,4.2vw,18px); line-height:1.7; margin:0; }
.hero .cta,.hero .cta-wrap,.hero .cta-group,.hero .buttons,.stack{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.hero .cta a,.hero .cta-wrap a,.hero .cta-group a,.hero .buttons a,.stack>*{
  flex:1 1 180px; max-width:100%; text-align:center; padding:12px 16px;
  border-radius:9999px; min-height:44px; text-decoration:none; white-space:normal;
}
.btn.tel{ background:#e53935; color:#fff; }
.btn.line{ background:#06C755; color:#fff; }
.btn.outline{ background:transparent; color:#333; border:2px solid #333; }

/* Hero (page-specific) */
.hero-omo{ display:grid; gap:16px; padding:24px 16px; background-size:cover; background-position:center; }
.hero-omo .hero-ttl{ font-size:clamp(20px,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; color:#333; }
.hero-omo .hero-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-omo .hero-cta .btn{ flex:1 1 180px; text-align:center; padding:12px 16px; border-radius:8px; text-decoration:none; display:inline-block; }

/* =========================
   Vertical text -> horizontal on mobile
   ========================= */
.vertical,[class*="vertical"],[style*="writing-mode"]{ writing-mode:vertical-rl; text-orientation:upright; }
@media (max-width:768px){
  .vertical,[class*="vertical"],[style*="writing-mode"]{
    writing-mode:horizontal-tb !important; text-orientation:mixed !important;
    transform:none !important; white-space:normal !important; height:auto !important; max-width:100%;
  }
}

/* =========================
   Layout grid helpers
   ========================= */
.grid{ display:grid; gap:16px; 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; } }

/* =========================
   Header / floating widgets
   ========================= */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,0.85); 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 .mark{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.15); }
.logo h1{ font-size:1.1rem; color:#2b6cb0; }
.tel-btn,.line-btn{
  border:0; border-radius:999px; padding:.6rem .95rem; font-weight:700; cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.15); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.tel-btn{ background:#2b6cb0; color:#fff; } .tel-btn:hover{ background:#215494; }
.line-btn{ background:#06C755; color:#fff; } .line-btn:hover{ filter:brightness(.95); }

.voice-widget{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:50; }
.voice-widget button{ width:56px; height:56px; border-radius:50%; border:none; box-shadow:0 10px 28px rgba(0,0,0,.15); display:grid; place-items:center; font-size:22px; cursor:pointer; color:#fff; }
#btnSpeak{ background:#0ea5e9 }  #btnSpeak.mute{ background:#64748b }  #btnListen{ background:#10b981 }

@supports (padding:max(0px)){
  .voice-widget{ padding-bottom:max(16px,env(safe-area-inset-bottom)); right:max(16px,env(safe-area-inset-right)); }
}

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

/* =========================
   LINE QR の基本
   ========================= */
#line-qr{ text-align:center; }
#line-qr img{ display:block; margin-inline:auto; max-width:min(220px,80%); height:auto; }
#line-qr a[role="button"]{ display:inline-flex; align-items:center; justify-content:center; }
.tel-btn,.line-btn{ min-height:44px; }
.hero-omo .hero-cta .btn:first-child{ padding:14px 18px; font-weight:800; }
@media (max-width:480px){
  .map-wrap{ border-radius:12px; }
  section.grid[aria-label="地図と連絡先"] .card{ padding:.9rem; }
}
#line-qr h2{ margin-bottom:12px !important; }
#line-qr img{ margin-top:6px !important; margin-bottom:12px !important; }
#line-qr a[role="button"]{ min-width:240px; }

/* =========================
   Cards / general pieces
   ========================= */
main{ max-width:980px; margin:1.2rem auto; padding:1rem; }
.card{ background:#fff; border-radius:18px; box-shadow:0 10px 28px rgba(0,0,0,.15); padding:1rem; }
h2,h3{ color:#215494; margin-bottom:.5rem; }
label{ display:block; margin-top:.7rem; font-weight:700; }
input,select,textarea{ width:100%; padding:.65rem; margin-top:.35rem; border:1px solid #dbe0e6; border-radius:10px; font-size:1rem; }
button.primary{ width:100%; padding:.85rem; border:0; border-radius:12px; background:#2b6cb0; color:#fff; font-size:1.05rem; font-weight:800; margin-top:.8rem; cursor:pointer; }
button.primary:hover{ background:#215494; }
.muted{ color:#586174; font-size:1rem; }
.map-wrap{ overflow:hidden; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.12); }
footer{ margin:1.2rem auto; max-width:980px; color:#e7ecf3; background:rgba(0,0,0,.55); border-radius:16px; padding:1rem; text-align:center; }
.chip{ display:inline-block; background:#eef2f7; border-radius:999px; padding:.25rem .6rem; font-size:.85rem; color:#334; }
.stack{ display:flex; flex-wrap:wrap; gap:.4rem; }
:where(h2,h3,[id]){ scroll-margin-top:84px; }

/* =========================
   Splash
   ========================= */
#splash{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:#000; transition:opacity .6s ease; }
#splash img{ width:100%; height:100%; object-fit:cover; filter:brightness(.9); }
#splash.is-hiding{ opacity:0; pointer-events:none; }
body.is-splashing{ overflow: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:16px; bottom:16px; border:0; border-radius:999px; padding:.5rem .9rem;
  background:rgba(255,255,255,.9); color:#111; font-weight:700; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.15);
}

/* =========================
   Background stack (robust)
   ========================= */
.bg-base,.bg-slideshow,.bg-overlay,.bg-focus{
  position:fixed; inset:0; background-position:center; background-size:cover; pointer-events:none;
}
.bg-base{ z-index:0; filter:brightness(.85); }
.bg-slideshow{ z-index:1; overflow:hidden; }
.bg-overlay{ z-index:2; background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.38)); }
.bg-focus{ z-index:3; opacity:0; }

/* Base image: JPEG fallback, then -webkit-image-set, then image-set (with cache-buster) */
.bg-base{
  background-image:url('/assets/helper-bg1.jpg?v=20251013w');
  background-image:-webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251013w')  type('image/jpeg') 1x
  );
  background-image:image-set(
    url('/assets/helper-bg1.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251013w')  type('image/jpeg') 1x
  );
}

/* Slideshow slides (with cache-buster) */
.bg-slideshow .slide{
  position:absolute; inset:0; opacity:0; filter:brightness(.85); will-change:opacity;
  background-position:center; background-size:cover;
}
.s1{ animation:show1 18s infinite; }
.s2{ animation:show2 18s infinite; }
.s3{ animation:show3 18s infinite; }
@keyframes show1{0%{opacity:1}30%{opacity:1}33.3%{opacity:0}100%{opacity:0}}
@keyframes show2{0%{opacity:0}33.3%{opacity:1}63.3%{opacity:1}66.6%{opacity:0}100%{opacity:0}}
@keyframes show3{0%{opacity:0}66.6%{opacity:1}96.6%{opacity:1}100%{opacity:0}}

.slide.bg1{
  background-image:-webkit-image-set(
    url('/assets/helper-bg1.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251013w')  type('image/jpeg') 1x
  );
  background-image:image-set(
    url('/assets/helper-bg1.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg1.jpg?v=20251013w')  type('image/jpeg') 1x
  );
}
.slide.bg2{
  background-image:-webkit-image-set(
    url('/assets/helper-bg2.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg2.jpg?v=20251013w')  type('image/jpeg') 1x
  );
  background-image:image-set(
    url('/assets/helper-bg2.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg2.jpg?v=20251013w')  type('image/jpeg') 1x
  );
}
.slide.bg3{
  background-image:-webkit-image-set(
    url('/assets/helper-bg3.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg3.jpg?v=20251013w')  type('image/jpeg') 1x
  );
  background-image:image-set(
    url('/assets/helper-bg3.webp?v=20251013w') type('image/webp') 1x,
    url('/assets/helper-bg3.jpg?v=20251013w')  type('image/jpeg') 1x
  );
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-slideshow .slide,.bg-focus{ animation:none !important; opacity:0 !important; }
}

/* =========================
   Petals (canvas)
   ========================= */
#petals{ position:fixed; inset:0; z-index:3; pointer-events:none; }

/* =========================
   Small tweaks
   ========================= */
#line-qr h2{ margin-bottom:12px !important; }
#line-qr a[role="button"]{ min-width:240px; }

/* =========================
   Optional emergency patch (OFF by default)
   絶対URL + !important で確実に表示したい場合だけ、下記のコメントを外してください。
   ========================= */
/*
.bg-base{
  background: url('https://omoiyari-taxi.com/assets/helper-bg1.jpg?v=20251013w') center/cover no-repeat !important;
}
.bg-slideshow .s1{ background: url('https://omoiyari-taxi.com/assets/helper-bg1.jpg?v=20251013w') center/cover no-repeat !important; }
.bg-slideshow .s2{ background: url('https://omoiyari-taxi.com/assets/helper-bg2.jpg?v=20251013w') center/cover no-repeat !important; }
.bg-slideshow .s3{ background: url('https://omoiyari-taxi.com/assets/helper-bg3.jpg?v=20251013w') center/cover no-repeat !important; }
*/
/* === Foreground lift: 背景より前に出す（本文が裏に隠れる問題の修正） === */
:root { --fg-z: 5; }

body > header,
body > main,
body > footer,
body > section:not(.bg-base):not(.bg-slideshow):not(.bg-overlay):not(.bg-focus),
.hero,
.hero-omo,
.card,
.voice-widget {
  position: relative;
  z-index: var(--fg-z);
}
/* === FIX: 背景が前に来て本文が裏に隠れる問題の最終対処 === */
/* 背景レイヤーを強制的に“マイナス”へ */
.bg-base,
.bg-slideshow,
.bg-slideshow .slide,
.bg-overlay,
.bg-focus {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}
.bg-base{ z-index: -30 !important; }
.bg-slideshow{ z-index: -29 !important; }
.bg-slideshow .slide{ z-index: -29 !important; }
.bg-overlay{ z-index: -28 !important; }
.bg-focus{ z-index: -27 !important; }

/* 花びらは背景の上・本文の下に */
#petals{ position:fixed !important; inset:0 !important; z-index:-26 !important; pointer-events:none !important; }

/* 本文（前景）を確実に最前面へ */
body > header,
body > main,
body > footer,
.hero,
.hero-omo,
.card,
.voice-widget,
section:not(.bg-base):not(.bg-slideshow):not(.bg-overlay):not(.bg-focus) {
  position: relative !important;
  z-index: 50 !important;
}

/* 念のため、ヘッダーはさらに上 */
body > header { z-index: 60 !important; }
/* === Voice FABs: right-bottom fixed (safe-area) === */
:root{
  --fab-gap: 12px;
  --fab-size: 56px;
  --fab-pad: 16px;
}

#voice-fabs,
.fab-stack,
.voice-fabs { /* 既存のどれかに当たるように複数指定 */
  position: fixed;
  right: max(var(--fab-pad), calc(env(safe-area-inset-right) + var(--fab-pad)));
  bottom: calc(var(--fab-pad) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--fab-gap);
  z-index: 9999;
  pointer-events: none; /* コンテナは透過 */
}

/* 個々のボタン */
#voice-fabs .fab,
.fab-stack .fab,
.voice-fabs .fab,
#btn-mic, #btn-speaker { /* id直指定にもヒットさせる */
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  background: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto; /* ボタンは操作可能 */
  touch-action: manipulation;
}

/* ふわっと出す（任意） */
#voice-fabs .fab,
.fab-stack .fab,
.voice-fabs .fab,
#btn-mic, #btn-speaker {
  opacity: 0; transform: translateY(8px);
  animation: fabIn .35s ease-out .1s forwards;
}
@keyframes fabIn { to { opacity: 1; transform: translateY(0); } }

/* iOS でホームバーに埋もれないよう最小マージン */
@supports (padding: max(0px)) {
  #voice-fabs,
  .fab-stack,
  .voice-fabs {
    right: max(var(--fab-pad), env(safe-area-inset-right));
    bottom: max(var(--fab-pad), env(safe-area-inset-bottom));
  }
}
/* === Splash / 筆文字の表示制御 === */
/* 対象：#splash（または .splash）に合わせてセレクタ調整 */
#splash, .splash {
  opacity: 0;
  pointer-events: none;
  /* 0.6sでフェードイン → 3.2s後に0.8sでフェードアウト */
  animation:
    splashFadeIn .6s ease-out 0s both,
    splashFadeOut .8s ease-in 3.2s forwards;
  z-index: 10000; /* 必要なら最前面に */
}

@keyframes splashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splashFadeOut {
  to { opacity: 0; }
}