/* Destinations (All) page styling */
.dest-hero{ background: var(--brand, #172601); color:#fff; padding: 48px 0; }
.dest-hero__title{ font-size:2rem; margin:0; }

.dest-layout{ display:grid; grid-template-columns: 300px 1fr; gap:24px; padding:24px 0; }
@media (max-width: 900px){ .dest-layout{ grid-template-columns:1fr; } }

.dest-filters{ position: sticky; top: 80px; align-self: start; }
.filters-form{ border:1px solid var(--border,#e6e6e6); border-radius:12px; padding:16px; background:#fff; box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.06)); }
.filter-block{ margin: 12px 0; }
.filter-label{ font-weight:600; margin-bottom:6px; }
.filter-list{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }

.price-row{ display:flex; gap:8px; align-items:center; }
.filter-actions{ display:flex; gap:8px; margin-top:12px; }
.btn{ display:inline-block; padding:.55rem .9rem; border-radius:10px; border:1px solid #111; }
.btn.btn-primary{ background: var(--brand,#172601); color:#fff; border:none; }
.btn.btn-reset{ background:#fff; }

.dest-results .cards{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card{ background:#fff; border:1px solid var(--border,#e6e6e6); border-radius:12px; overflow:hidden; box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.06)); }
.card img{ display:block; width:100%; height:auto; }
.card-body{ padding:12px; }
.card-body h2{ font-size:1.05rem; margin:.25rem 0 .5rem; }
.meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:.5rem; }
.badge{ border:1px solid var(--border,#e6e6e6); border-radius:999px; padding:.15rem .5rem; font-size:.85rem; }
.price{ font-weight:700; }
.pagination{ margin-top:16px; }
/* 帯パンくず */
/* 親の狭いコンテナを無視して “全面幅” に見せるトリック */
.ta-breadcrumb{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 0;
}


/* タイトル＆説明 */
.ta-header{ padding:22px 0 10px; }
.ta-title{ font-size:2rem; margin:0 0 .25rem; }
.ta-desc{ opacity:.9; }

/* フィルタ（sticky bar） */
.ta-filter-wrap{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
.ta-filter{ padding:10px 0; }
.tf-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.tf-row label{ display:flex; flex-direction:column; font-size:.8rem; gap:4px; }
.tf-row select{ min-width:200px; padding:8px; border:1px solid #ddd; border-radius:8px; background:#fff; }

/* グリッド */
.ta-grid .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 1024px){ .ta-grid .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .ta-grid .cards{ grid-template-columns:1fr; } }

/* カード（枠線ナシ） */
.card{ background:#fff; border-radius:14px; overflow:hidden; }
.card .card-media img{ width:100%; height:auto; display:block; }
.card-tags{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.card-tags .tag{ font-size:.8rem; border:1px solid #eee; border-radius:999px; padding:.15rem .5rem; text-decoration:none; }
.card-title{ font-size:1.15rem; margin:.5rem 0 .25rem; }
.card-excerpt{ opacity:.9; font-size:.95rem; }
.card-meta{ display:flex; gap:18px; margin:.5rem 0 0; font-size:.95rem; }
.card-meta .lbl{ opacity:.7; margin-right:6px; }

/* シンプルカルーセル */
.slider{ position:relative; display:block; }
.slider .slides{ display:flex; overflow:hidden; }
.slider .slide{ min-width:100%; flex:0 0 100%; }
.slider .nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; }
.slider .nav.prev{ left:8px; }
.slider .nav.next{ right:8px; }
.slider .noimg{ display:flex; align-items:center; justify-content:center; aspect-ratio: 16 / 9; background:#f1f1f1; color:#888; }
/* 画像枠を一定比率にしてカード高さを揃える */
.card .card-media{ aspect-ratio: 16 / 9; display:block; overflow:hidden; background:#f1f1f1; }
.slider .slides{ height:100%; }
.slider .slide{ min-width:100%; height:100%; }
.slider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slider .noimg{ height:100%; display:flex; align-items:center; justify-content:center; }

/* 管理バーがある時のsticky位置ズレ対策（ログイン時） */
body.admin-bar .ta-filter-wrap{ top:32px; }
@media (max-width: 782px){ body.admin-bar .ta-filter-wrap{ top:46px; } }
/* ===== Destination ヒーロー動画（全幅） ===== */
.ux-hero{
  position: relative;
  z-index: 0;
  /* フルブリード（親の狭いコンテナを無視して画面端まで） */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  overflow: hidden;
  background: #000;
}

/* 中身の最大幅はサイト幅に合わせる（タイトル等） */
.ux-hero__inner{
  max-width: min(1320px, 94vw);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* 自前動画 */
.ux-hero__video{
  width: 100%;
  height: clamp(220px, 36vw, 460px);  /* 高さは画面に応じて可変 */
  object-fit: cover;
  display: block;
  filter: brightness(92%);
}

/* YouTube/Vimeo埋め込みの16:9保持 */
.ux-hero__embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.ux-hero__embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* タイトル/キャプション（動画の上に重ねる） */
.ux-hero__title{
  position: absolute; left: 24px; bottom: 28px;
  margin: 0; color: #fff; font-size: clamp(28px, 4vw, 44px); line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ux-hero__caption{
  position: absolute; left: 24px; bottom: 8px;
  margin: 0; color: #f5f5f5; font-size: clamp(14px, 1.6vw, 18px);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* 大画面で少し高さを出したい時はここを大きく */
@media (min-width: 1280px){
  .ux-hero__video{ height: 460px; }
}