/* ==========================================================================
   AOKI TRAVEL — page-tours.css（ツアー一覧固有・子CC-B）
   一覧（紙色セクション＋紺本体カード＋紺破れ紙帯の白カード）＋左サイドバー絞り込み
   ========================================================================== */

/* ページ見出し（squiggle の -4% はみ出しを見出しブロック内で切る：sticky は含まないので clip でよい） */
.page-tours .page-head{padding-bottom:44px;overflow-x:clip}

/* 一覧セクション（紙色） */
.tours-sec{padding-top:48px}
.tours-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:40px;align-items:start}
.tours-side{position:sticky;top:24px}

/* 絞り込みパネル（details：SP/タブレットで畳む） */
.filter{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-card);border-top:6px solid var(--orange)}
.filter__summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;font-family:var(--font-serif);font-weight:700;font-size:var(--h-xs);line-height:1.4}
.filter__summary::-webkit-details-marker{display:none}
.filter__summary::after{content:"";flex:none;width:22px;height:22px;background:var(--chev) no-repeat center/16px;transition:transform var(--t-mid)}
.filter[open] .filter__summary::after{transform:rotate(180deg)}
.filter__summary small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--fs-xs);color:var(--ink-2);margin-top:2px}
.filter__body{padding:2px 22px 22px}
.filter__row{margin-bottom:14px}
.filter__label{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
.filter .form__select{font-size:15px;padding:10px 36px 10px 12px}
.filter__reset{margin-top:8px}
.filter__note{margin:14px 0 0;font-size:var(--fs-xs);color:var(--ink-2)}
@media (min-width:1024px){
  .filter__summary{pointer-events:none}
  .filter__summary::after{display:none}
}

/* 件数バー */
.tours-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tours-bar__count{margin:0;font-family:var(--font-serif);font-weight:700;font-size:var(--h-xs)}
.tours-bar__count strong{color:var(--orange-text);font-size:1.3em;line-height:1;margin:0 .1em}
.tours-bar__note{margin:0;font-size:var(--fs-xs);color:var(--ink-2)}

/* 空状態 */
.tours-empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);padding:44px 24px;text-align:center}
.tours-empty p{margin:0 0 6px}
.tours-empty .small{margin:0}

/* 詳細ページの無いツアーの概要（アコーディオン） */
.tours-more{margin-top:64px}
.tours-more .sec-head{margin-bottom:28px}
.tours-more .sec-head__lead{margin-top:12px;font-size:15px}
.tours-acc{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-card);border-top:0;padding:0 22px}
.tours-acc .acc__btn{padding:18px 0}
.tours-acc .acc__btn .tag{flex:none;margin-right:2px}
.tours-acc .acc__btn > span:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--font-serif);font-size:17px}
.tours-acc .acc__body{padding:0 0 22px}
.tour-brief{margin:0}
.tour-brief > div{display:grid;grid-template-columns:104px 1fr;gap:6px 14px;padding:10px 0;border-top:1px solid var(--paper)}
.tour-brief > div:first-child{border-top:0;padding-top:0}
.tour-brief dt{font-weight:700;font-size:var(--fs-small);color:var(--orange-text);letter-spacing:.04em}
.tour-brief dd{margin:0;font-size:15px;color:var(--ink)}
.tour-brief__cta{margin-top:16px}
@media (max-width:767px){.tour-brief > div{grid-template-columns:1fr;gap:2px}}

/* 紺の破れ紙帯：白カード3列（一覧下部） */
.why{margin-top:27px}
.why-card{position:relative;max-width:1000px;margin:0 auto;background:var(--white);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:52px 44px 48px;text-align:center}
.why-card__title{display:block;margin:0 auto 40px;color:var(--ink)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.why-grid > div{padding:4px 28px;border-left:1px solid var(--orange)}
.why-grid > div:first-child{border-left:0}
.why-grid h3{margin-bottom:12px}
.why-grid p{margin:0;font-size:15px;color:var(--ink-2)}
.why-card__more{margin-top:34px}
.why-card .link{color:var(--orange-text);box-shadow:var(--shadow-link)}
.why-card .link:hover{color:var(--orange-2)}

/* タブレット以下：サイドバーを上へ畳む */
@media (max-width:1023px){
  .tours-layout{grid-template-columns:1fr;gap:28px}
  .tours-side{position:static}
  .filter__body{border-top:1px solid var(--line);padding-top:16px}
  .why-card{padding:40px 28px 36px}
  .why-grid{grid-template-columns:1fr;gap:26px}
  .why-grid > div{padding:0;border-left:0;border-top:1px solid var(--orange);padding-top:22px}
  .why-grid > div:first-child{border-top:0;padding-top:0}
}
@media (max-width:767px){
  .tours-sec{padding-top:36px}
  .tours-bar{margin-bottom:18px}
  .tours-more{margin-top:48px}
  .tours-acc{padding:0 16px}
  .why-card{padding:32px 20px 30px}
}

/* ---------- エリアで選ぶ（オリーブ帯・見出しと一覧の間の緩急） ---------- */
.areas{padding-top:56px;padding-bottom:60px}
.areas__head{max-width:var(--text);margin:0 auto 32px;text-align:center}
.areas__title{font-family:var(--font-script);font-size:var(--script-inline);line-height:1.2;color:var(--buff);margin-bottom:10px}
.areas__lead{margin:0;color:rgba(255,255,255,.86);font-size:var(--fs-small);line-height:1.9}
.areas__list{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.areas__list a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:14px 10px;border:1px solid rgba(235,217,153,.55);border-radius:var(--radius-sm);color:#fff;text-align:center;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.areas__list a:hover{background:var(--buff);border-color:var(--buff);color:var(--ink)}
.areas__ja{font-family:var(--font-serif);font-weight:700;font-size:15px;line-height:1.4}
.areas__en{font-family:var(--font-script);font-size:15px;line-height:1;color:var(--buff)}
.areas__list a:hover .areas__en{color:var(--olive)}
@media (max-width:1023px){.areas{padding-top:44px;padding-bottom:48px}.areas__list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.areas__list{grid-template-columns:repeat(2,1fr);gap:10px}.areas__list a{min-height:72px}}