/* ============================================================
   Danang Holic — ピラーページ共通CSS（PR2）
   対象: archive-gourmet.php / archive-beauty.php /
         taxonomy-area-danang.php / taxonomy-area-hue.php /
         category-tips.php / category-shop.php
   出典: 20_design_concepts/pillar-*.html（6モック）の <style> を統合。
   ヘッダー（白帯＋メガナビ）はテーマ本体の header.php を使うため、
   本ファイルにはピラー本文（.pg-*）のスタイルのみを含む。
   ============================================================ */

:root{
  --pillar-brand: #F8B62D;
  --pillar-brand-light: #FFF7E7;
  --pillar-pink: #E85298;
  --pillar-pink-bg: #FFF3F3;
  --pillar-green: #22A977;
  --pillar-line-green: #0BC755;
  --pillar-purple: #8466D4;
  --pillar-consult-blue: #2E6FE0;
  --pillar-consult-blue-bg: #EEF4FF;

  --pillar-text: #222222;
  --pillar-text-secondary: #555555;
  --pillar-bg-gray: #f2f2f2;
  --pillar-border: #EEEEEE;

  --pillar-radius-card: 8px;
  --pillar-radius-btn: 6px;
  --pillar-shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --pillar-shadow-2: 0 6px 20px rgba(0,0,0,0.16);

  --pillar-font-head: "Zen Kaku Gothic Antique", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  --pillar-container: 1240px;
}

.dnhl-pillar{ font-size:16px; line-height:1.8; color: var(--pillar-text); }
.dnhl-pillar *, .dnhl-pillar *::before, .dnhl-pillar *::after{ box-sizing:border-box; }
.dnhl-pillar img{ max-width:100%; display:block; }
/* RUCSS無効化後もUAデフォルトの青リンク色が残るため、.pg-*配下のaは既定でテキスト色を継承する。
   個別要素の配色（.pg-tag/.pg-breadcrumb a等）はこの後の詳細度の高いセレクタで上書きされる。 */
.dnhl-pillar a{ text-decoration:none; color: inherit; }
.dnhl-pillar h1, .dnhl-pillar h2, .dnhl-pillar h3, .dnhl-pillar h4{
  font-family: var(--pillar-font-head); font-weight:700; line-height:1.4; margin:0;
}
.dnhl-pillar p{ margin:0; }
.dnhl-pillar ul{ margin:0; padding:0; list-style:none; }
.dnhl-pillar button{ font-family: inherit; cursor:pointer; background:none; border:0; }

.pg-container{ max-width: var(--pillar-container); margin:0 auto; padding: 0 20px; }
@media (min-width: 769px){ .pg-container{ padding: 0 40px; } }

/* --- パンくず --- */
.pg-breadcrumb{ padding: 14px 0; border-bottom:1px solid var(--pillar-border); }
.pg-breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color: var(--pillar-text-secondary); }
.pg-breadcrumb a{ color: var(--pillar-text-secondary); }
.pg-breadcrumb a:hover{ color: var(--pillar-brand); text-decoration:underline; }
.pg-breadcrumb li[aria-current] { color: var(--pillar-text); }
.pg-breadcrumb .sep{ color: var(--pillar-border); }

/* --- リード --- */
.pg-hero{ padding: 34px 0 8px; }
.pg-hero h1{ font-size:1.7rem; }
@media (min-width:769px){ .pg-hero h1{ font-size:2.15rem; } }
.pg-hero .lead{ margin-top:16px; font-size:15.5px; color: var(--pillar-text-secondary); max-width:760px; }
.pg-trust-row{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.pg-trust{
  display:flex; align-items:center; gap:8px; background: var(--pillar-brand-light);
  border-radius:999px; padding:9px 16px; font-size:13px; color:#8a5a00; font-weight:700;
}
.pg-trust svg{ width:16px; height:16px; flex-shrink:0; color: var(--pillar-brand); }
.pg-trust b{ font-family: var(--pillar-font-head); font-size:15px; color:#6d4600; }

/* --- まずはこの2つ（tips固定ページ誘導）--- */
.pg-hub-row{ margin-top:28px; }
.pg-hub-label{ font-family: var(--pillar-font-head); font-weight:700; font-size:12.5px; color: var(--pillar-text-secondary); margin-bottom:10px; }
.pg-hub-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; max-width:760px; }
.pg-hub-card{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius: var(--pillar-radius-card);
  border:1px solid var(--pillar-border); background:#fff; box-shadow: var(--pillar-shadow-1);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pg-hub-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-hub-card .icon-wrap{
  flex-shrink:0; width:38px; height:38px; border-radius:10px; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center;
}
.pg-hub-card .icon-wrap svg{ width:20px; height:20px; }
.pg-hub-card .htext{ min-width:0; }
.pg-hub-card .htag{ font-size:11px; font-weight:700; color: var(--pillar-brand); letter-spacing:.03em; }
.pg-hub-card h3{ margin-top:2px; font-size:13.5px; line-height:1.5; font-weight:700; }
@media (max-width:640px){ .pg-hub-cards{ grid-template-columns: 1fr; } }

/* --- セクション共通 --- */
.pg-section{ padding: 48px 0; }
.pg-section--gray{ background: var(--pillar-bg-gray); }
.pg-head{ margin-bottom:26px; }
.pg-head .eyebrow{ font-family: var(--pillar-font-head); font-size:12px; font-weight:700; color: var(--pillar-brand); letter-spacing:.1em; }
.pg-head h2{ font-size:1.6rem; margin-top:6px; }
.pg-head .desc{ margin-top:10px; font-size:14.5px; color: var(--pillar-text-secondary); max-width:680px; }
@media (min-width:769px){ .pg-head h2{ font-size:1.85rem; } }

/* --- カード共通 --- */
.pg-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--pillar-border);
  border-radius: var(--pillar-radius-card); overflow:hidden; box-shadow: var(--pillar-shadow-1);
  transition: box-shadow .15s ease, transform .15s ease; height:100%;
}
.pg-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-card .ph{ position:relative; overflow:hidden; background:#eee; aspect-ratio: 3/2; }
.pg-card .ph img{ width:100%; height:100%; object-fit:cover; }
.pg-card .ph.ph-empty{ display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#FFE9B8,#FFF7E7); }
.pg-card .ph.ph-empty svg{ width:32px; height:32px; color: var(--pillar-brand); opacity:.55; }
.pg-card .pbody{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pg-tag{
  align-self:flex-start; font-size:11.5px; font-weight:700; color: var(--pillar-pink);
  background: var(--pillar-pink-bg); padding:3px 10px; border-radius:999px;
}
.pg-card h3{ font-size:14.5px; line-height:1.55; font-weight:700; }

/* --- 横長カード（tips/shopping グループ内） --- */
.pg-card--row{ flex-direction:row; }
.pg-card--row .ph{ width:96px; flex-shrink:0; aspect-ratio: 1/1; }
.pg-card--row .pbody{ padding:10px 14px; gap:5px; justify-content:center; }
.pg-card--row h3{ font-size:13px; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.pg-card--row .pg-tag{ font-size:10.5px; padding:2px 8px; }

/* --- 新着記事帯（カードなし・カテゴリページへの正直な導線。tips/shopping） --- */
.pg-latest-strip{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:space-between;
  background:#fff; border:1px solid var(--pillar-border); border-radius: var(--pillar-radius-card);
  padding:24px 28px; box-shadow: var(--pillar-shadow-1);
}
.pg-latest-main{ display:flex; align-items:flex-start; gap:16px; min-width:260px; flex:1; }
.pg-latest-main .icon-wrap{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center;
}
.pg-latest-main .icon-wrap svg{ width:22px; height:22px; }
.pg-latest-main h3{ font-size:16px; }
.pg-latest-main p{ margin-top:6px; font-size:13.5px; color: var(--pillar-text-secondary); max-width:480px; }

/* --- 定番まとめグリッド（4列） --- */
.pg-teiban-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.pg-teiban-grid .pg-card .ph{ aspect-ratio: 4/3; }
.pg-teiban-grid .pg-card h3{ font-size:15.5px; }
.pg-teiban-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: var(--pillar-brand); color:#fff; font-family: var(--pillar-font-head); font-weight:900;
  font-size:12px; padding:5px 11px; border-radius:999px; box-shadow: var(--pillar-shadow-1);
}
.pg-fresh-badge{
  position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  background: rgba(34,169,119,.94); color:#fff; font-family: var(--pillar-font-head); font-weight:700;
  font-size:11px; padding:5px 10px 5px 8px; border-radius:999px; box-shadow: var(--pillar-shadow-1);
}
.pg-fresh-badge svg{ width:12px; height:12px; }
@media (max-width:1000px){ .pg-teiban-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .pg-teiban-grid{ grid-template-columns: 1fr; } }

/* --- ジャンル／タイプ／サブエリアカード（4列。写真＋アイコン見出し） --- */
.pg-genre-grid, .pg-subarea-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.pg-subarea-grid{ grid-template-columns: repeat(3, 1fr); gap:22px; }
.pg-genre-card{
  position:relative; display:block; border-radius: var(--pillar-radius-card); overflow:hidden;
  box-shadow: var(--pillar-shadow-1); background:#fff; border:1px solid var(--pillar-border);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pg-genre-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-genre-card .ph{ aspect-ratio: 4/3; background: linear-gradient(135deg,#FFE9B8,#FFF7E7); }
.pg-genre-card .ph img{ width:100%; height:100%; object-fit:cover; }
.pg-genre-card .gbody{ padding:14px 16px; }
.pg-genre-card .gname{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.pg-genre-card .gname svg{ width:19px; height:19px; color: var(--pillar-brand); flex-shrink:0; }
.pg-genre-card .gcount{ margin-top:6px; font-size:12.5px; color: var(--pillar-text-secondary); }
.pg-genre-card .gcount b{ font-family: var(--pillar-font-head); color: var(--pillar-text); font-size:14px; }
.pg-genre-card .grep{ margin-top:8px; font-size:12px; color: var(--pillar-text-secondary); line-height:1.55; }
@media (max-width:1000px){ .pg-genre-grid{ grid-template-columns: repeat(2, 1fr); } .pg-subarea-grid{ grid-template-columns: 1fr; } }
@media (max-width:560px){ .pg-genre-grid{ grid-template-columns: 1fr 1fr; gap:12px; } }

/* --- 目的から探す（アイコンタイル・ダナンハブ専用） --- */
.pg-purpose-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; }
.pg-purpose-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:26px 16px; border-radius: var(--pillar-radius-card); background:#fff; border:1px solid var(--pillar-border);
  box-shadow: var(--pillar-shadow-1); transition: box-shadow .15s ease, transform .15s ease;
}
.pg-purpose-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-purpose-icon{
  width:54px; height:54px; border-radius:50%; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:2px;
}
.pg-purpose-icon svg{ width:27px; height:27px; }
.pg-purpose-card h3{ font-size:15px; }
.pg-purpose-card .pcount{ font-size:12.5px; color: var(--pillar-text-secondary); }
.pg-purpose-card .pcount b{ font-family: var(--pillar-font-head); color: var(--pillar-text); font-size:14px; }
.pg-purpose-card .pdesc{ font-size:12px; color: var(--pillar-text-secondary); line-height:1.55; }
.pg-purpose-badge{
  font-size:10.5px; font-weight:700; color:#8a5a00; background: var(--pillar-brand-light);
  padding:3px 10px; border-radius:999px;
}
@media (max-width:1000px){ .pg-purpose-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:560px){ .pg-purpose-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; } }

/* --- 新着記事・関連グリッド（3〜4列） --- */
.pg-article-grid, .pg-latest-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.pg-latest-grid{ grid-template-columns: repeat(3, 1fr); }
.pg-more-row{ margin-top:28px; text-align:center; }
.btn-outline{
  display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius: var(--pillar-radius-btn);
  border:1px solid var(--pillar-border); color: var(--pillar-text); font-weight:700; font-size:14px; background:transparent;
  transition: background-color .15s ease;
}
.btn-outline:hover{ background: var(--pillar-bg-gray); }
@media (max-width:1000px){ .pg-article-grid, .pg-latest-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .pg-article-grid, .pg-latest-grid{ grid-template-columns: 1fr; } }

/* --- 雰囲気・時間帯・シーンで選ぶ（統合リアルタイムフィルター：グルメ／スパ） --- */
.pg-chip-group{ margin-bottom:22px; }
.pg-chip-group:last-child{ margin-bottom:0; }
.pg-chip-label{ font-family: var(--pillar-font-head); font-weight:700; font-size:13px; color: var(--pillar-text-secondary); margin-bottom:10px; }
.pg-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pg-chip{
  display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--pillar-border); background:#fff; font-size:13.5px; font-weight:700; color: var(--pillar-text);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pg-chip:hover{ border-color: var(--pillar-brand); background: var(--pillar-brand-light); color:#6d4600; }
.pg-chip svg{ width:15px; height:15px; color: var(--pillar-text-secondary); flex-shrink:0; }
.pg-chip:hover svg{ color: var(--pillar-brand); }
.pg-chip .ccount{ font-size:11.5px; color: var(--pillar-text-secondary); }
.pg-chip[aria-pressed="true"]{ border-color: var(--pillar-brand); background: var(--pillar-brand); color:#fff; }
.pg-chip[aria-pressed="true"] svg{ color:#fff; }
.pg-chip[aria-pressed="true"] .ccount{ color: rgba(255,255,255,.85); }
.pg-chip-note{ margin-top:16px; font-size:12px; color: var(--pillar-text-secondary); }

.pg-filter-toolbar{
  margin-top:24px; padding-top:20px; border-top:1px dashed var(--pillar-border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.pg-filter-status{ font-size:13.5px; color: var(--pillar-text-secondary); }
.pg-filter-status b{ font-family: var(--pillar-font-head); color: var(--pillar-text); }
.pg-filter-clear{ font-size:13px; padding:9px 18px; }
.pg-filter-grid{ margin-top:26px; display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.pg-filter-grid .pg-card .ph{ aspect-ratio: 3/2; }
@media (max-width:1000px){ .pg-filter-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .pg-filter-grid{ grid-template-columns: 1fr; } }
.pg-filter-empty{
  margin-top:26px; padding:40px 24px; text-align:center; border:1.5px dashed var(--pillar-border);
  border-radius: var(--pillar-radius-card); background:#fff;
}
.pg-filter-empty p{ font-size:14.5px; color: var(--pillar-text-secondary); max-width:440px; margin:0 auto 16px; }
.pg-filter-empty .btn-line-cta{ margin-top:0; }

/* --- CTAブロック（LINE予約・相談） --- */
.pg-cta-card{
  border-radius: var(--pillar-radius-card); overflow:hidden; box-shadow: var(--pillar-shadow-1); background:#fff;
  border:1px solid var(--pillar-border); display:flex; flex-direction:column;
}
.pg-cta-reserve{ padding:26px 26px 24px; background: linear-gradient(160deg,#FFFFFF,#F4FBF6); }
.pg-cta-reserve .cta-icon{
  width:46px; height:46px; border-radius:50%; background: var(--pillar-line-green); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.pg-cta-reserve .cta-icon svg{ width:24px; height:24px; }
.pg-cta-reserve h3{ font-size:17px; }
.pg-cta-reserve p{ margin-top:8px; font-size:13.5px; color: var(--pillar-text-secondary); }
.btn-line-cta{
  margin-top:18px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--pillar-line-green); color:#fff; font-weight:700; font-size:14.5px; padding:13px 20px;
  border-radius: var(--pillar-radius-btn); transition: filter .15s ease, transform .1s ease;
}
/* QA修正: `.dnhl-pillar a{color:inherit}`(0,1,1)が`.btn-line-cta{color:#fff}`(0,1,0)より詳細度が高く
   文字色が上書きされていたため、クラス2つで詳細度を上げて白を確定させる */
.dnhl-pillar .btn-line-cta,
.dnhl-pillar .btn-line-cta:visited{ color:#fff; }
.btn-line-cta:hover{ filter:brightness(.95); }
.btn-line-cta svg{ width:17px; height:17px; }
.pg-cta-reserve--wide{ display:flex; flex-direction:row; gap:40px; align-items:center; padding:34px 36px 32px; }
.pg-cta-reserve--wide .cta-main{ flex:1; min-width:0; }
.pg-cta-reserve--wide h3{ font-size:19px; }
.pg-cta-reserve--wide p{ font-size:14.5px; line-height:1.85; }
.cta-visual{ flex-shrink:0; align-self:flex-end; display:flex; align-items:flex-end; }
.cta-visual .cta-girl{ width:180px; height:auto; }
@media (max-width:768px){ .pg-cta-reserve--wide{ flex-direction:column; align-items:stretch; gap:12px; } .cta-visual{ display:none; } }
.pg-cta-single{ max-width:720px; margin:0 auto; }
.cta-features{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px 24px; }
.cta-feature{ font-size:13.5px; color: var(--pillar-text-secondary); }
.cta-feature b{ margin-right:8px; font-family: var(--pillar-font-head); font-weight:700; color:#6d4600; }

/* --- RE送客枠（予告ブロック・スパのみ） --- */
.pg-re-teaser{
  margin-top:22px; border:1.5px dashed #D9CEF2; border-radius: var(--pillar-radius-card);
  background: linear-gradient(160deg,#FBFAFF,#F4F0FC); padding:22px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.pg-re-teaser .re-icon{
  width:44px; height:44px; border-radius:50%; background: var(--pillar-purple); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pg-re-teaser .re-icon svg{ width:22px; height:22px; }
.pg-re-teaser .re-body{ flex:1 1 320px; min-width:0; }
.pg-re-badge{
  display:inline-block; font-family: var(--pillar-font-head); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; color:#fff; background: var(--pillar-purple); padding:3px 10px;
  border-radius:999px; margin-bottom:8px;
}
.pg-re-teaser h3{ font-size:15px; color:#4a3a75; }
.pg-re-teaser p{ margin-top:6px; font-size:13px; color: var(--pillar-text-secondary); line-height:1.7; }
.pg-re-soon{
  flex-shrink:0; font-family: var(--pillar-font-head); font-weight:700; font-size:12.5px; color:#8466D4;
  border:1.5px solid #D9CEF2; border-radius:999px; padding:9px 18px; background:#fff;
}

/* --- ツアーCTA（ダナンハブ：3枚グリッド／メガナビのカードを流用） --- */
.pg-tour-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; margin-top:26px; }
.pg-tour-grid .mega-tour-card{ display:flex; flex-direction:column; border:1px solid var(--pillar-border); border-radius: var(--pillar-radius-card); overflow:hidden; box-shadow: var(--pillar-shadow-1); background:#fff; transition: box-shadow .15s ease, transform .15s ease; }
.pg-tour-grid .mega-tour-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-tour-grid .mega-tour-card .thumb{ aspect-ratio: 4/3; overflow:hidden; }
.pg-tour-grid .mega-tour-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.pg-tour-grid .mega-tour-card .tbody{ padding:14px; display:flex; flex-direction:column; gap:6px; }
.pg-tour-grid .mega-tour-card h4{ font-size:14px; line-height:1.5; }
.pg-tour-grid .mega-tour-price{ font-family: var(--pillar-font-head); font-weight:900; color: var(--pillar-brand); font-size:17px; }
.pg-tour-grid .mega-tour-price small{ font-weight:500; color: var(--pillar-text-secondary); font-size:11.5px; }
.pg-tour-grid .tour-note{ font-size:11px; color: var(--pillar-text-secondary); margin-top:-2px; }
.mega-tour-cta-row{ text-align:center; }
.btn-tour-cta{ display:inline-flex; align-items:center; gap:10px; justify-content:center; background: var(--pillar-brand); color:#fff; font-family: var(--pillar-font-head); font-weight:900; font-size:16px; padding:16px 40px; border-radius:999px; transition: filter .15s ease, transform .1s ease; }
.btn-tour-cta:hover{ filter:brightness(.94); }
.btn-tour-cta .arrow{ font-size:18px; }
@media (max-width:1000px){ .pg-tour-grid{ grid-template-columns: 1fr; } }

/* --- ツアーCTA（フエ：価格訴求カード・写真なし） --- */
.pg-tour-grid--price{ grid-template-columns: 1.3fr 1fr; align-items:stretch; }
.pg-tour-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--pillar-border); border-radius: var(--pillar-radius-card);
  box-shadow: var(--pillar-shadow-1); padding:28px 30px;
}
.pg-tour-card--main{ border:2px solid var(--pillar-brand); }
.pg-tour-badge{
  align-self:flex-start; background: var(--pillar-brand); color:#fff; font-family: var(--pillar-font-head); font-weight:900;
  font-size:11.5px; padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.pg-tour-card .icon-wrap{
  width:42px; height:42px; border-radius:10px; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.pg-tour-card .icon-wrap svg{ width:22px; height:22px; }
.pg-tour-card h3{ font-size:17px; }
.pg-tour-card .tour-price{ margin-top:12px; font-family: var(--pillar-font-head); font-weight:900; font-size:26px; color: var(--pillar-text); }
.pg-tour-card .tour-price small{ font-size:12.5px; font-weight:500; color: var(--pillar-text-secondary); margin-left:4px; }
.pg-tour-card .tour-desc{ margin-top:12px; font-size:13.5px; color: var(--pillar-text-secondary); line-height:1.8; flex:1; }
.pg-tour-card .tour-cta{ margin-top:20px; align-self:flex-start; }
.pg-tour-card--main .tour-cta{
  display:inline-flex; align-items:center; gap:8px; background: var(--pillar-brand); color:#fff; font-weight:700;
  font-size:14.5px; padding:13px 24px; border-radius: var(--pillar-radius-btn); transition: filter .15s ease;
}
.pg-tour-card--main .tour-cta:hover{ filter:brightness(.95); }
.pg-tour-card--sub .tour-cta{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color: var(--pillar-text);
  border-bottom:1.5px solid var(--pillar-text);
}
@media (max-width:768px){ .pg-tour-grid--price{ grid-template-columns: 1fr; } }

/* --- ツアーCTA（ショッピング：横長バナー1枚） --- */
.pg-tour-banner{
  display:flex; align-items:stretch; border-radius: var(--pillar-radius-card); overflow:hidden;
  border:1px solid var(--pillar-border); box-shadow: var(--pillar-shadow-1); background:#fff;
}
.pg-tour-banner .tb-visual{ flex-shrink:0; width:300px; position:relative; background:#eee; }
.pg-tour-banner .tb-visual img{ width:100%; height:100%; object-fit:cover; }
.pg-tour-banner .tb-body{ flex:1; min-width:0; padding:28px 32px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.tb-badge{
  align-self:flex-start; font-family: var(--pillar-font-head); font-weight:700; font-size:11.5px; letter-spacing:.04em;
  color:#fff; background: var(--pillar-brand); padding:5px 14px; border-radius:999px;
}
.pg-tour-banner h3{ font-size:1.2rem; }
@media (min-width:769px){ .pg-tour-banner h3{ font-size:1.35rem; } }
.tb-copy{ font-size:14px; color: var(--pillar-text-secondary); max-width:540px; }
.tb-route{ font-size:12.5px; color: var(--pillar-text-secondary); }
.tb-route b{ color: var(--pillar-text); font-family: var(--pillar-font-head); font-weight:700; }
.tb-bottom-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px; }
.tb-price{ font-family: var(--pillar-font-head); font-weight:900; font-size:1.3rem; color: var(--pillar-brand); }
.tb-price small{ font-weight:500; font-size:11.5px; color: var(--pillar-text-secondary); }
.btn-tb{
  display:inline-flex; align-items:center; gap:8px; background: var(--pillar-brand); color:#fff;
  font-weight:700; font-size:14px; padding:12px 24px; border-radius: var(--pillar-radius-btn); transition: filter .15s ease;
}
.btn-tb:hover{ filter:brightness(.95); }
.tb-sub-link{ margin-top:2px; font-size:12.5px; color: var(--pillar-text-secondary); }
.tb-sub-link a{ color: var(--pillar-brand); font-weight:700; }
.tb-sub-link a:hover{ text-decoration:underline; }
@media (max-width:768px){ .pg-tour-banner{ flex-direction:column; } .pg-tour-banner .tb-visual{ width:100%; height:200px; } }

/* --- テーマから探す／店舗タイプから探す（静的グループ：tips／shopping） --- */
.pg-groups{ display:flex; flex-direction:column; gap:0; }
.pg-group{ padding:30px 0; border-top:1px dashed var(--pillar-border); }
.pg-group:first-child{ padding-top:0; border-top:0; }
.pg-group-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.pg-group-head .icon-wrap{
  flex-shrink:0; width:40px; height:40px; border-radius:10px; background:#fff; color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--pillar-shadow-1);
}
.pg-group-head .icon-wrap svg{ width:21px; height:21px; }
.pg-group-head h3{ font-size:17px; }
.pg-group-head .gcount{
  margin-left:auto; font-size:12px; font-weight:700; color: var(--pillar-text-secondary);
  background:#fff; border:1px solid var(--pillar-border); padding:4px 12px; border-radius:999px; flex-shrink:0;
}
.pg-group-head .gcount b{ font-family: var(--pillar-font-head); color: var(--pillar-text); font-size:13.5px; }
.pg-group-desc{ font-size:13.5px; color: var(--pillar-text-secondary); max-width:680px; margin-bottom:16px; }

.pg-group-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width:900px){ .pg-group-cards{ grid-template-columns: 1fr; } }

.pg-group-more{ margin-top:16px; text-align:right; }
.pg-group-more a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color: var(--pillar-brand); }
.pg-group-more a:hover{ text-decoration:underline; }
.pg-group-more--multi{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 24px; }

.pg-group-subhead{
  font-family: var(--pillar-font-head); font-weight:700; font-size:12.5px; color: var(--pillar-text-secondary);
  letter-spacing:.04em; margin:22px 0 12px; padding-top:18px; border-top:1px dashed var(--pillar-border);
}
.pg-group-subhead--first{ margin-top:0; padding-top:0; border-top:0; }
.pg-group-note{ margin-top:12px; font-size:12px; color: var(--pillar-text-secondary); }

/* ダナン旅行ガイドへの回遊バナー（tips「ベトナムを知る」グループ内） */
.pg-danang-banner{
  margin-top:16px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
  background: linear-gradient(120deg,#FFF7E7,#FFFFFF); border:1px solid var(--pillar-brand-light);
  border-radius: var(--pillar-radius-card); padding:20px 24px;
}
.pg-danang-banner .btext{ display:flex; align-items:center; gap:14px; min-width:240px; flex:1; }
.pg-danang-banner .icon-wrap{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background: var(--pillar-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.pg-danang-banner .icon-wrap svg{ width:20px; height:20px; }
.pg-danang-banner h4{ font-size:14.5px; }
.pg-danang-banner p{ margin-top:3px; font-size:12.5px; color: var(--pillar-text-secondary); }
.pg-danang-banner .btn-brand{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background: var(--pillar-brand); color:#fff;
  font-weight:700; font-size:13.5px; padding:11px 20px; border-radius: var(--pillar-radius-btn);
  transition: filter .15s ease;
}
.pg-danang-banner .btn-brand:hover{ filter:brightness(.95); }

/* --- 無料旅程相談 CTA（tips限定・青系スコープ） --- */
.pg-consult-banner{
  display:flex; align-items:stretch; border-radius: var(--pillar-radius-card); overflow:hidden;
  border:1px solid var(--pillar-border); box-shadow: var(--pillar-shadow-1); background:#fff;
}
.consult-left{ flex:1; min-width:0; padding:32px 34px; display:flex; flex-direction:column; gap:14px; }
.consult-badge{
  align-self:flex-start; font-family: var(--pillar-font-head); font-weight:700; font-size:11.5px; letter-spacing:.04em;
  color: var(--pillar-consult-blue); background: var(--pillar-consult-blue-bg); padding:5px 14px; border-radius:999px;
}
.consult-left h2{ font-size:1.35rem; }
@media (min-width:769px){ .consult-left h2{ font-size:1.6rem; } }
.consult-points{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.consult-point{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color: var(--pillar-text); }
.consult-point svg{ width:20px; height:20px; flex-shrink:0; color: var(--pillar-consult-blue); }
.consult-copy{ font-size:14.5px; color: var(--pillar-text-secondary); max-width:480px; }
.consult-meet-note{ display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--pillar-text-secondary); }
.consult-meet-note svg{ width:16px; height:16px; color: var(--pillar-consult-blue); flex-shrink:0; }
.btn-consult{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:2px;
  background: var(--pillar-consult-blue); color:#fff; font-weight:700; font-size:14.5px;
  padding:13px 26px; border-radius: var(--pillar-radius-btn); transition: filter .15s ease, transform .1s ease;
}
.btn-consult:hover{ filter:brightness(.92); }
.btn-consult:active{ transform: translateY(1px); }
.consult-fine{ font-size:11.5px; color: var(--pillar-text-secondary); }
.consult-visual{ flex-shrink:0; width:340px; position:relative; background:#eee; }
.consult-visual img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .pg-consult-banner{ flex-direction:column; }
  .consult-visual{ width:100%; height:200px; order:-1; }
  .consult-left{ padding:24px 22px; }
}

/* --- フエ：観光セクション代表記事＋件数フィーチャー --- */
.hue-feature-grid{ display:grid; grid-template-columns: 340px 1fr; gap:32px; align-items:center; }
.hue-feature-grid .pg-card .ph{ aspect-ratio: 4/3; }
.hue-feature-info .fi-count{ font-family: var(--pillar-font-head); font-weight:900; font-size:34px; color: var(--pillar-brand); line-height:1; }
.hue-feature-info .fi-count small{ font-size:14px; font-weight:700; color: var(--pillar-text-secondary); margin-left:6px; }
.hue-feature-info p{ margin-top:12px; font-size:14px; color: var(--pillar-text-secondary); line-height:1.85; max-width:440px; }
.hue-feature-info .btn-outline{ margin-top:18px; }
@media (max-width:768px){ .hue-feature-grid{ grid-template-columns:1fr; } }

/* --- フエ：代表記事データなしのため件数訴求のリンクカード --- */
.hue-linkout{
  display:flex; align-items:center; gap:22px; background:#fff; border:1px solid var(--pillar-border);
  border-radius: var(--pillar-radius-card); box-shadow: var(--pillar-shadow-1); padding:28px 30px; max-width:760px; margin:0 auto;
  transition: box-shadow .15s ease, transform .15s ease;
}
.hue-linkout:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.hue-linkout .icon-wrap{
  flex-shrink:0; width:56px; height:56px; border-radius:14px; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center;
}
.hue-linkout .icon-wrap svg{ width:28px; height:28px; }
.hue-linkout .lo-body{ flex:1; min-width:0; }
.hue-linkout h3{ font-size:16.5px; }
.hue-linkout h3 b{ color: var(--pillar-brand); font-size:19px; }
.hue-linkout p{ margin-top:6px; font-size:13.5px; color: var(--pillar-text-secondary); line-height:1.75; }
.hue-linkout .lo-arrow{ flex-shrink:0; font-size:24px; color: var(--pillar-text-secondary); transition: color .15s ease; }
.hue-linkout:hover .lo-arrow{ color: var(--pillar-brand); }
@media (max-width:640px){ .hue-linkout{ flex-direction:column; text-align:center; padding:26px 22px; } .hue-linkout .lo-arrow{ display:none; } }

/* --- フエ：お役立ちセクション3列グリッド／その他ジャンル集約リンク --- */
.hue-tips-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.hue-tips-grid .pg-card .ph{ aspect-ratio: 3/2; }
@media (max-width:1000px){ .hue-tips-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .hue-tips-grid{ grid-template-columns: 1fr; } }
.hue-other-links{
  margin-top:26px; padding-top:20px; border-top:1px dashed var(--pillar-border);
  font-size:13.5px; color: var(--pillar-text-secondary); display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
}
.hue-other-links b{ font-family: var(--pillar-font-head); color: var(--pillar-text); font-size:12.5px; }
.hue-other-links a{ color: var(--pillar-text-secondary); border-bottom:1px solid var(--pillar-border); }
.hue-other-links a:hover{ color: var(--pillar-brand); border-bottom-color: var(--pillar-brand); }

/* --- 関連ピラー回遊 --- */
.pg-related-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.pg-related-card{
  display:flex; flex-direction:column; gap:10px; padding:22px 20px; border-radius: var(--pillar-radius-card);
  background:#fff; border:1px solid var(--pillar-border); box-shadow: var(--pillar-shadow-1);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pg-related-card:hover{ box-shadow: var(--pillar-shadow-2); transform: translateY(-2px); }
.pg-related-card .icon-wrap{
  width:42px; height:42px; border-radius:10px; background: var(--pillar-brand-light); color: var(--pillar-brand);
  display:flex; align-items:center; justify-content:center;
}
.pg-related-card .icon-wrap svg{ width:22px; height:22px; }
.pg-related-card h3{ font-size:15px; margin-top:6px; }
.pg-related-card p{ font-size:12.5px; color: var(--pillar-text-secondary); }
.pg-related-card .arrow-link{ margin-top:auto; font-size:12.5px; font-weight:700; color: var(--pillar-brand); display:inline-flex; align-items:center; gap:4px; }
@media (max-width:1000px){ .pg-related-grid{ grid-template-columns: repeat(2, 1fr); } }

/* --- FAQ --- */
.pg-faq{ max-width:820px; }
.pg-faq-item{ border-bottom:1px solid var(--pillar-border); }
.pg-faq-item summary{
  list-style:none; cursor:pointer; padding:18px 4px; display:flex; align-items:center; gap:14px;
  font-family: var(--pillar-font-head); font-weight:700; font-size:15.5px;
}
.pg-faq-item summary::-webkit-details-marker{ display:none; }
.pg-faq-item summary .q-mark{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background: var(--pillar-brand-light); color:#8a5a00;
  display:flex; align-items:center; justify-content:center; font-family: var(--pillar-font-head); font-weight:900; font-size:14px;
}
.pg-faq-item summary .chev{ margin-left:auto; width:9px; height:9px; border-right:2px solid var(--pillar-text-secondary); border-bottom:2px solid var(--pillar-text-secondary); transform: rotate(45deg); transition: transform .15s ease; flex-shrink:0; }
.pg-faq-item[open] summary .chev{ transform: rotate(-135deg); }
.pg-faq-body{ padding:0 4px 20px 46px; font-size:14.5px; color: var(--pillar-text-secondary); }

@media (prefers-reduced-motion: reduce){
  .dnhl-pillar *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}