:root{
  --bg:#fbfbfa;
  --text:#0b1220;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);
  --shadow: 0 18px 60px rgba(17,24,39,.08);
  --radius:18px;
  --max:1120px;
  --accent:#4f6aa9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "PingFang SC", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color:var(--text);
  background: var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}

/* NAV (clean + dropdown) */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:60;
  backdrop-filter:saturate(150%) blur(12px);
  background: rgba(251,251,250,.72);
  border-bottom:1px solid rgba(17,24,39,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:14px}
.brand{display:flex;align-items:center;gap:10px;line-height:1.1}
.brand .logo{width:140px;height:auto;display:block}
.brand .sub{display:none}
@media (max-width: 520px){.brand .logo{width:128px}}

.nav-links{display:flex;align-items:center;gap:18px}
.nav-item{position:relative}
.nav-links a, .nav-links button{
  position:relative;
  font-size:13px;color:rgba(11,18,32,.78);
  padding:10px 8px;border-radius:12px;
  border:none;background:transparent;cursor:pointer;
}
/* desktop hover underline */
@media (hover:hover){
  .nav-links a::after, .nav-links button::after{
    content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 220ms ease;
    border-radius:999px;
  }
  .nav-links a:hover::after, .nav-links button:hover::after{transform:scaleX(1)}
}
.nav-links a:hover, .nav-links button:hover{background:rgba(255,255,255,.7);color:rgba(11,18,32,.95)}
/* hover-open dropdown on desktop */
@media (hover:hover){
  .dropdown:hover .dropdown-menu{opacity:1;transform:none;pointer-events:auto}
}

.pill{border:1px solid rgba(11,18,32,.10);padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.72)}
.pill.accent{border-color:rgba(79,106,169,.45);background:rgba(79,106,169,.10)}
.pill:hover{box-shadow:0 12px 34px rgba(17,24,39,.10)}

.lang{display:flex;gap:8px;align-items:center}
.lang a{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(11,18,32,.10);color:rgba(11,18,32,.62);background:rgba(255,255,255,.72)}
.lang a.active{color:rgba(11,18,32,.92);border-color:rgba(11,18,32,.18);background:rgba(255,255,255,.86)}

/* Mobile menu */
.burger{display:none;width:42px;height:42px;border-radius:14px;border:1px solid rgba(11,18,32,.10);background:rgba(255,255,255,.76)}
.burger span{display:block;width:18px;height:2px;background:rgba(11,18,32,.75);margin:4px auto;border-radius:999px}
.mobile-panel{
  display:none;
  position:fixed;left:0;right:0;top:72px;z-index:59;
  background:rgba(251,251,250,.96);
  border-bottom:1px solid rgba(11,18,32,.10);
  padding:10px 18px 18px;
}
.mobile-panel a, .mobile-panel button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 10px;border-radius:14px;border:1px solid rgba(11,18,32,.08);background:rgba(255,255,255,.85);margin-top:10px;font-size:14px;color:rgba(11,18,32,.85)}
.mobile-panel button{cursor:pointer}
.mobile-panel .sub{margin-left:10px}
.mobile-panel .mp-sub{padding-left:6px}
.mobile-panel .mp-toggle::after{content:"＋";color:rgba(11,18,32,.55)}
.mobile-panel .mp-toggle[aria-expanded="true"]::after{content:"－"}
.mobile-panel .mp-sub .sub{margin-top:8px}

@media (max-width: 980px){
  .nav-links{display:none}
  .burger{display:inline-block}
  .lang{display:none}
  .mobile-panel{display:block;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity 200ms ease, transform 200ms ease}
  body.menu-open .mobile-panel{opacity:1;transform:none;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .hero-pad{height:72px}
}

.dropdown{position:relative}
/* Fix hover gap + widen hover area to cover the dropdown menu width */
@media (hover:hover){
  /* Transparent bridge so moving mouse downward doesn't break :hover.
     IMPORTANT: use absolute positioning so it doesn't change nav spacing. */
  .dropdown::after{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:220px; /* match dropdown-menu min width */
    height:12px;
    background:transparent;
  }
}
.dropdown-menu{
  position:absolute;top:100%;left:0;min-width:220px;
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.92);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(17,24,39,.12);
  opacity:0;transform:translateY(6px);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
.dropdown.open .dropdown-menu{opacity:1;transform:none;pointer-events:auto}
.dropdown-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 10px;border-radius:12px;color:rgba(11,18,32,.82)}
.dropdown-menu a:hover{background:rgba(11,18,32,.05)}
.dropdown-menu small{color:var(--muted)}

/* HERO full-screen slider */
.hero{height:100vh;min-height:720px;position:relative}
@media (max-width: 520px){.hero{min-height:640px}}
.hero-pad{height:72px} /* space for fixed nav */

.hero .swiper{height:100%}
.hero .swiper-slide{position:relative}
.hero .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background: radial-gradient(800px 420px at 15% 30%, rgba(0,0,0,.58), rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 70%),
              linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:54px;z-index:3;
}
.hero-copy .container{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap}
.hero-title{max-width:760px}
.hero-title h1{margin:0 0 10px;font-size:44px;letter-spacing:-.02em;color:#fff}
.hero-title p{margin:0;color:rgba(255,255,255,.86);line-height:1.7;font-size:14px}
@media (max-width: 520px){.hero-title h1{font-size:30px}}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.btn.primary{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));border-color:rgba(255,255,255,.26)}
.btn b{font-size:13px}
.btn span{font-size:12px;color:rgba(255,255,255,.78)}

/* Swiper UI */
.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:22px}
.swiper-pagination-bullet{width:6px;height:6px;background:rgba(255,255,255,.55);opacity:1}
.swiper-pagination-bullet-active{background:#fff}
.swiper-button-prev,.swiper-button-next{color:#fff}
.swiper-button-prev:after,.swiper-button-next:after{font-size:18px}
.swiper-button-prev,.swiper-button-next{
  width:42px;height:42px;border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}

/* sections */
.section{padding:56px 0}
.section h2{font-size:18px;margin:0 0 14px;letter-spacing:.02em}
.small{font-size:12px;color:var(--muted)}

/* reveal */
/* Reveal animations: default should be visible (so no-JS/no-IO won't render a blank page).
   We only hide elements after JS confirms IntersectionObserver is available. */
.reveal{opacity:1;transform:none;filter:none}
html.reveal-on .reveal{opacity:1;transform:translateY(14px);filter:blur(2px);transition:transform 650ms ease, filter 650ms ease}
html.reveal-on .reveal.show{opacity:1;transform:none;filter:none}

/* page header */
.page-head{padding:110px 0 18px}
.page-head h1{margin:0 0 10px;font-size:30px;letter-spacing:-.01em}
.page-head p{margin:0;color:var(--muted);line-height:1.75}

/* cards */
.card{background:rgba(255,255,255,.86);border:1px solid rgba(11,18,32,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
.route{padding:18px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border:1px solid rgba(11,18,32,.10);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.7)}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 860px){.routes{grid-template-columns:1fr;}}
.route h3{margin:12px 0 8px;font-size:15px}
.route ul{margin:0;padding-left:16px;color:var(--muted);font-size:13px;line-height:1.75}
.price{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.price b{font-size:20px}
.price span{color:var(--muted);font-size:12px}

/* Portfolio masonry (modern + more content) */
.masonry{columns:3;column-gap:12px}
.masonry a{break-inside:avoid;display:block;margin:0 0 12px;border-radius:16px;overflow:hidden;border:1px solid rgba(11,18,32,.08);background:#fff}
.masonry img{width:100%;height:auto;display:block}
@media (max-width: 980px){.masonry{columns:2}}
@media (max-width: 520px){.masonry{columns:1}}

/* footer */
.footer{padding:34px 0 46px;color:var(--muted);font-size:12px}
.footer .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(11,18,32,.08);padding-top:16px}

/* Home: photographer intro */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media (max-width: 980px){.split{grid-template-columns:1fr;}}
.photo-card{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(11,18,32,.08);box-shadow:var(--shadow);background:#fff}
.photo-card img{width:100%;height:420px;object-fit:cover;display:block}
@media (max-width: 520px){.photo-card img{height:360px}}
.copy-card{padding:22px}
.copy-card h3{margin:0 0 10px;font-size:18px;letter-spacing:.01em}
.copy-card p{margin:0;color:var(--muted);line-height:1.85}
.copy-card .meta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.tag{font-size:12px;color:rgba(11,18,32,.70);border:1px solid rgba(11,18,32,.10);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.8)}

/* Home: route preview (similar feel to “ロケーションフォト”) */
.route-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
@media (max-width: 980px){.route-grid{grid-template-columns:1fr;}}
.route-tile{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(11,18,32,.08);background:#fff;box-shadow:var(--shadow);min-height:360px}
.route-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 900ms cubic-bezier(.22,.61,.36,1)}
.route-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.58));}
.route-tile:hover img{transform:scale(1.06)}
.route-tile .info{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.route-tile .info b{display:block;color:#fff;font-size:16px;letter-spacing:.02em}
.route-tile .info span{display:block;margin-top:6px;color:rgba(255,255,255,.82);font-size:12px;line-height:1.6}

/* Home: location photo blocks */
.loc-block{margin-top:18px}
.loc-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.loc-head b{font-size:16px;letter-spacing:.02em}
.loc-head a{color:rgba(11,18,32,.72)}
.loc-head a:hover{color:rgba(11,18,32,.92)}
.thumb-scroll{display:flex;gap:12px;overflow:auto;padding:12px 2px 2px;scroll-snap-type:x mandatory}
.thumb{flex:0 0 auto;width:min(320px, 72vw);height:220px;border-radius:18px;overflow:hidden;border:1px solid rgba(11,18,32,.08);background:#fff;box-shadow:0 16px 50px rgba(17,24,39,.08);scroll-snap-align:start;transition:transform 220ms ease, box-shadow 220ms ease}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .thumb:hover{transform:translateY(-6px);box-shadow:0 22px 70px rgba(17,24,39,.14)}
}
.thumb:hover img{transform:scale(1.06)}
@media (max-width: 520px){.thumb{height:200px}}

/* Tabs */
.tabs{margin-top:10px}
.tabbar{display:flex;gap:10px;flex-wrap:wrap}
.tabbtn{position:relative;border:1px solid rgba(11,18,32,.10);background:rgba(255,255,255,.8);padding:10px 14px;border-radius:999px;font-size:13px;color:rgba(11,18,32,.75);cursor:pointer}
.tabbtn.active{color:rgba(11,18,32,.92);border-color:rgba(11,18,32,.20)}
.tabbtn::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--accent);border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform 220ms ease}
.tabbtn.active::after{transform:scaleX(1)}
.tabpanes{margin-top:14px}
.tabpane{display:none;animation:tabFade 320ms ease}
.tabpane.active{display:block}
@keyframes tabFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Instagram */
.ig-card{padding:22px}
.ig-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.ig-top b{font-size:16px}
.ig-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:10px;margin-top:14px}
.ig-grid a{border-radius:16px;overflow:hidden;border:1px solid rgba(11,18,32,.08);background:#fff}
.ig-grid img{width:100%;height:120px;object-fit:cover;display:block}
@media (max-width: 980px){.ig-grid{grid-template-columns:repeat(3, 1fr)}.ig-grid img{height:110px}}

/* Youtube */
.video{border-radius:20px;overflow:hidden;border:1px solid rgba(11,18,32,.08);box-shadow:var(--shadow);background:#000}
.video .ratio{position:relative;padding-top:56.25%}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Vehicle section (dynamic + swapped vs photographer split) */
.vehicle-band{border-radius:22px;border:1px solid rgba(11,18,32,.08);box-shadow:var(--shadow);background:rgba(255,255,255,.86);overflow:hidden}
.vehicle-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;align-items:stretch}
@media (max-width: 980px){.vehicle-grid{grid-template-columns:1fr}}
.vehicle-panel{padding:22px}
.vehicle-panel h3{margin:0 0 10px;font-size:18px}
.vehicle-panel p{margin:0;color:var(--muted);line-height:1.8}
.vehicle-stats{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-top:14px}
@media (max-width: 520px){.vehicle-stats{grid-template-columns:1fr}}
.vstat{border:1px solid rgba(11,18,32,.10);border-radius:16px;padding:12px;background:rgba(255,255,255,.9);transition:transform 220ms ease, box-shadow 220ms ease}
.vstat b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,18,32,.70)}
.vstat span{display:block;margin-top:6px;font-size:13px;color:rgba(11,18,32,.88)}
@media (hover:hover){.vstat:hover{transform:translateY(-4px);box-shadow:0 18px 55px rgba(17,24,39,.10)}}

.vehicle-media{position:relative;overflow:hidden}
/* Fixed media height (no black bars): main image fills the whole media area */
.vehicle-media{height:420px}
@media (max-width: 520px){.vehicle-media{height:340px}}

.vehicle-main{width:100%;height:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(11,18,32,.08);background:#fff;line-height:0}
.vehicle-main img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.vehicle-strip{
  /* Match container width AND center the row when there are only a few thumbs */
  width:100%;
  padding:14px 14px 16px;
  border-top:1px solid rgba(11,18,32,.08);
  background:rgba(255,255,255,.74);

  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:160px;
  gap:10px;
  justify-content:center;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.vehicle-strip img{
  width:160px;
  height:104px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.08);
  cursor:pointer;
  opacity:.86;
  transition:transform 220ms ease, opacity 180ms ease, outline-color 180ms ease;
  scroll-snap-align:start;
}
@media (hover:hover){.vehicle-strip img:hover{transform:translateY(-3px);opacity:1}}
.vehicle-strip img[data-active="true"]{opacity:1;outline:2px solid rgba(79,124,255,.45);outline-offset:2px}
/* Visible draggable scrollbar (desktop + mobile) */
.vehicle-strip{scrollbar-width:thin}
.vehicle-strip::-webkit-scrollbar{height:8px}
.vehicle-strip::-webkit-scrollbar-track{background:rgba(11,18,32,.08);border-radius:999px}
.vehicle-strip::-webkit-scrollbar-thumb{background:rgba(11,18,32,.28);border-radius:999px}
@media (max-width: 520px){
  /* Mobile: unified thumbnail size + horizontal drag scrollbar */
  .vehicle-strip{
    padding:12px 12px 14px;
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    max-width:100%;
    margin:0 auto;
    scrollbar-width:thin; /* Firefox */
  }
  .vehicle-strip img{
    flex:0 0 auto;
    width:140px;
    height:92px;
    border-radius:14px;
    display:block;
    scroll-snap-align:start;
  }
  /* scrollbar styling defined globally */
}


/* footer nav */
.footer-nav{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(11,18,32,.08)}
.footer-nav h4{margin:0 0 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,18,32,.60)}
.footer-nav a{display:block;color:rgba(11,18,32,.70);padding:6px 0}
.footer-nav a:hover{color:rgba(11,18,32,.92)}
@media (max-width: 980px){.footer-nav{grid-template-columns:1fr 1fr}}