/* ============================================================
   meganav.css — メガドロップダウンメニュー（PR1）
   出典: 20260712_サイト全体リニューアル検討/20_design_concepts/meganav-current.html
   （確定モック。構造・文言・件数はそのまま移植）
   スコープ: header.php の .header-menu（オレンジ帯ナビ）以下のみ。
   上段白帯ヘッダー（.dnhls_header_top 等）・.header-menu / .nav-wrap /
   .menu_title 自体のスタイルは既存 dnhl.css をそのまま使う（無改変）。
   新規クラスは全て `mgnv-` プレフィックスで既存CSSとの衝突を回避。
   ============================================================ */

:root{
  --mgnv-border: #EEEEEE;
  --mgnv-text: #222222;
  --mgnv-text-secondary: #555555;
  --mgnv-shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --mgnv-shadow-2: 0 6px 20px rgba(0,0,0,0.16);
  --mgnv-radius-card: 8px;
  --mgnv-radius-btn: 6px;
  --mgnv-container: 1240px;
}

.mgnv-hide-mobile{ display:none; }
@media (min-width:640px){ .mgnv-hide-mobile{ display:inline; } }

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

.mgnv-icon{ width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   「Menu」フラグ内の追加要素（ハンバーガーアイコン・モバイルのみ）
   .menu_title 自体の見た目（背景色・切り欠き三角）は既存 dnhl.css を継承
   ============================================================ */
.mgnv-menu-title-ico{ display:none; width:16px; height:16px; flex-shrink:0; }
@media (max-width:999px){
  .menu_title{ cursor:pointer; position: relative;}
  .mgnv-menu-title-ico{ display:block; position: absolute;}
}

/* ============================================================
   PC メガナビ本体（.nav-wrap 内・.menu_title の右）
   ============================================================ */
.header-menu{ position:relative; } /* メガパネルの位置基準（帯フル幅） */

.mgnv-nav{ display:none; align-items:stretch; margin-left:6px; }
@media (min-width:1000px){ .mgnv-nav{ display:flex; } }

/* ============================================================
   QA Round3: 黄色帯（.header-menu）のPCスクロール追従（sticky）
   .header-menu の直接の親 #dnhl__header は「白帯（.dnhls_header_top）＋黄色帯」の
   高さしか持たない（=containing blockが浅い）ため、.header-menu自体をstickyにしても
   親の高さ分（白帯＋黄色帯）を超えて下スクロールすると帯ごとページと一緒に流れて
   消えてしまう（sticky要素は自身のcontaining block＝直接の親の範囲内でしか留まれない
   仕様のため。実機検証で確認済み）。
   そのため #dnhl__header 自体をsticky化し、白帯の高さ分だけ上へ負オフセットする
   ことで「白帯だけが画面外へスクロールアウトし、黄色帯だけが画面上部に残る」見た目を
   実現する（#dnhl__headerの親 .dnhl_header_wrap はページ全体近くまで及ぶ高さがあり、
   sticky要素として十分な範囲を確保できることを実機で確認済み）。
   白帯の高さはロゴ・検索アイコンの折返し等でブレークポイントごとに変わるため、
   固定px値ではなくJS（meganav.js）が実測してセットする --dnhl-topbar-h を使う
   （フォールバック値は実測値ベースの106px）。
   .mgnv-panel（absolute; top:100%）の位置基準は.header-menu自身（position:relative、
   無改変）のままなので、#dnhl__header側がstickyになっても帯の直下に正しく表示される。
   モバイル（999px以下）は対象外＝無改変。
   ============================================================ */
@media (min-width:1000px){
	#dnhl__header{
		position: sticky;
		top: calc(-1 * var(--dnhl-topbar-h, 106px));
		/* .mgnv-panel（z-index:60）を含む配下要素より確実に上位、かつ本文中のカード等（最大z-index:99）より上 */
		z-index: 500;
	}
	.header-menu{
		box-shadow: var(--mgnv-shadow-1); /* DESIGN.md Depth Level1: 控えめな「浮いてる」影 */
	}
	/* WPログイン時の管理バー（32px固定）と重ならないようにする */
	body.admin-bar #dnhl__header{ top: calc(-1 * var(--dnhl-topbar-h, 106px) + 32px); }

	/* sticky帯（実測41px）にアンカー見出しが隠れないよう、ページ内リンク着地時のオフセットを確保 */
	[id^="h-"]{ scroll-margin-top: 64px; }
}

.mgnv-item{ position:static; display:flex; }
.mgnv-trigger{
  display:flex; align-items:center; gap:6px;
  padding:0 18px; height:auto; min-height:41px;
  font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; font-size:15px; color:#000;
  /* UAデフォルトのbutton装飾（枠線・グレー背景）を解除し、オレンジ帯に馴染ませる */
  background:transparent; border:0; margin:0; border-radius:0;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  box-shadow:none; outline:none; cursor:pointer;
}
.mgnv-trigger:hover{ background: rgba(255,255,255,.38); }
.mgnv-item.is-open .mgnv-trigger{ background:#fff; color:#000; }
.mgnv-trigger:focus-visible{ outline:2px solid #000; outline-offset:-2px; }
.mgnv-trigger .mgnv-chev{
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease; margin-top:-3px;
}
.mgnv-item.is-open .mgnv-trigger .mgnv-chev{ transform: rotate(-135deg); margin-top:3px; }

.mgnv-panel{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-top:3px solid var(--main-orange);
  box-shadow: var(--mgnv-shadow-2); z-index:60;
}
.mgnv-item.is-open .mgnv-panel{ display:block; }
.mgnv-panel-inner{ padding: 30px 40px 34px; }

.mgnv-cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 28px 24px; }
.mgnv-col-head{
  display:flex; align-items:center; gap:8px; margin-bottom:12px; padding-bottom:10px;
  border-bottom: 2px solid var(--bg-menu); color: var(--mgnv-text);
}
a.mgnv-col-head:hover{ color: var(--main-orange); border-bottom-color: var(--main-orange); }
.mgnv-col-head .mgnv-row-name{ font-size:15px; font-weight:700; }
.mgnv-col-head .mgnv-row-index{
  font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-size:10.5px; color: var(--mgnv-text-secondary);
  letter-spacing:.08em; background:#f2f2f2; padding:1px 6px; border-radius:3px;
}
.mgnv-col ul{ display:flex; flex-direction:column; gap:2px; }
.mgnv-col a{
  display:flex; align-items:center; gap:8px;
  padding:7px 6px; border-radius:6px; font-size:13.5px; color: var(--mgnv-text-secondary);
}
.mgnv-col a:hover{ background: var(--bg-menu); color: var(--mgnv-text); }
.mgnv-col a .mgnv-icon{ color: var(--mgnv-text-secondary); }
.mgnv-col-head .mgnv-icon{ width:18px; height:18px; }
.mgnv-col-subhead{
  margin-top:10px; padding:10px 6px 2px; border-top:1px dashed var(--mgnv-border);
  font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; font-size:11px; color: var(--mgnv-text-secondary); letter-spacing:.04em;
}
.mgnv-col-note{
  display:block; padding:7px 6px; font-size:12px; color: var(--mgnv-text-secondary); font-style:italic;
}
.mgnv-count{ margin-left:auto; padding-left:8px; font-size:11.5px; color: var(--mgnv-text-secondary); flex-shrink:0; white-space:nowrap; }

/* テーマ・気分から探すパネル：2列のみのため幅を絞って左寄せ */
.mgnv-cols-mood{ grid-template-columns: repeat(auto-fit, minmax(210px,260px)); justify-content:start; gap:28px 56px; }

.mgnv-footer-row{
  margin-top:26px; padding-top:20px; border-top:1px dashed var(--mgnv-border);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; font-size:13px; color: var(--mgnv-text-secondary);
}
.mgnv-footer-row b{ font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); color: var(--mgnv-text); font-size:12.5px; }
.mgnv-footer-row a{ color: var(--mgnv-text-secondary); border-bottom:1px solid transparent; }
.mgnv-footer-row a:hover{ color: var(--main-orange); border-bottom-color: var(--main-orange); }
.mgnv-footer-row .mgnv-sep{ color: var(--mgnv-border); }

/* 現地ツアー：バナー風カード */
.mgnv-tour-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.mgnv-tour-top h3{ font-size:15px; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; margin:0; }
.mgnv-tour-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-bottom:24px; }
.mgnv-tour-card{
  display:flex; flex-direction:column; border:1px solid var(--mgnv-border); border-radius: var(--mgnv-radius-card);
  overflow:hidden; box-shadow: var(--mgnv-shadow-1); transition: box-shadow .15s ease, transform .15s ease;
  color: inherit; text-decoration:none;
}
.mgnv-tour-card:hover, .mgnv-tour-card:visited{ box-shadow: var(--mgnv-shadow-2); transform: translateY(-2px); color:inherit; text-decoration:none; }
.mgnv-tour-card .mgnv-thumb{ aspect-ratio: 4/3; overflow:hidden; }
.mgnv-tour-card .mgnv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mgnv-tour-card .mgnv-tbody{ padding:14px; display:flex; flex-direction:column; gap:6px; }
/* QA修正: カード全体を包む<a>に色/下線のリセットが無く、タイトルがUAデフォルトの青リンクになっていたため明示指定 */
.mgnv-tour-card h4{ font-size:14px; line-height:1.5; margin:0; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; color: var(--mgnv-text); text-decoration:none; }
.mgnv-tour-price{ font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:900; color: var(--main-orange); font-size:17px; text-decoration:none; }
.mgnv-tour-price small{ font-weight:500; color: var(--mgnv-text-secondary); font-size:11.5px; }

.mgnv-tour-cta-row{ text-align:center; }
.mgnv-btn-tour-cta{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  background: var(--main-orange); color:#fff; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:900; font-size:16px;
  padding:16px 40px; border-radius:999px; transition: filter .15s ease, transform .1s ease;
}
.mgnv-btn-tour-cta:hover{ filter:brightness(.94); }
.mgnv-btn-tour-cta:active{ transform: translateY(1px); }
.mgnv-btn-tour-cta .mgnv-arrow{ font-size:18px; }

/* ============================================================
   帯右端：検索・LINE
   ============================================================ */
.mgnv-header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; padding-right:2px; }

.mgnv-band-search-form{ display:none; }
@media (min-width:1000px){
  .mgnv-band-search-form{
    display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.55);
    border-radius:20px; padding:6px 6px 6px 14px; width:180px; transition: width .2s ease, background-color .2s ease;
  }
  .mgnv-band-search-form:focus-within{ width:250px; background:#fff; }
  .mgnv-band-search-form input{ border:0; background:transparent; flex:1; min-width:0; outline:none; font-size:13px; color:#5a4200; }
  .mgnv-band-search-form input::placeholder{ color:#8a6a1f; }
  .mgnv-band-search-form button{ display:flex; padding:5px; color:#5a4200; background:none; border:0; cursor:pointer; }
  .mgnv-band-search-form button svg{ width:15px; height:15px; }
}

.mgnv-btn-line-nav{
  display:inline-flex; align-items:center; gap:7px;
  background: var(--bg-green); color:#fff; font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition: filter .15s ease, transform .1s ease;
}
.mgnv-btn-line-nav:hover{ filter:brightness(.95); }
.mgnv-btn-line-nav:active{ transform: translateY(1px); }
.mgnv-btn-line-nav svg{ width:16px; height:16px; flex-shrink:0; }

/* ============================================================
   モバイルドロワー
   ============================================================ */
#mgnv-mobile-nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.mgnv-mobile-nav{ display:none; }
@media (max-width:999px){
  #mgnv-mobile-nav-toggle:checked ~ .mgnv-mobile-nav{
    display:block; position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.45);
  }
}
.mgnv-mobile-nav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(360px,88vw);
  background:#fff; padding:18px; overflow-y:auto; box-shadow:-4px 0 24px rgba(0,0,0,.25);
}
.mgnv-mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.mgnv-mobile-nav-head img{ height:34px; width:auto; display:block; }
.mgnv-mobile-close{
  width:36px; height:36px; border:1px solid var(--mgnv-border); border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
}
.mgnv-mobile-search-form{
  display:flex; align-items:center; border:1px solid var(--mgnv-border); border-radius:8px;
  padding:10px 12px; margin-bottom:18px; gap:8px;
}
.mgnv-mobile-search-form input{ border:0; flex:1; outline:none; font-size:14px; }
.mgnv-mobile-search-form button{ color: var(--mgnv-text-secondary); display:flex; background:none; border:0; padding:0; cursor:pointer; }

.mgnv-accordion{ border-bottom:1px solid var(--mgnv-border); }
.mgnv-accordion summary{
  list-style:none; cursor:pointer; padding:14px 2px; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; font-size:15px;
  display:flex; justify-content:space-between; align-items:center; color: var(--mgnv-text);
}
.mgnv-accordion summary::-webkit-details-marker{ display:none; }
.mgnv-accordion .mgnv-chev{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg); flex-shrink:0; }
.mgnv-accordion[open] > summary .mgnv-chev{ transform: rotate(-135deg); }
.mgnv-accordion-body{ padding-bottom:10px; }
.mgnv-group{ padding-bottom:10px; }
.mgnv-group-title{ font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; font-size:12px; color: var(--main-orange); padding:8px 10px 2px; margin:0; }
.mgnv-accordion a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 10px; border-radius:6px; font-size:14px; color: var(--mgnv-text-secondary);
}
.mgnv-accordion a:hover{ background:#f2f2f2; }
.mgnv-m-tour-price{ color: var(--main-orange); font-weight:700; font-size:12.5px; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); flex-shrink:0; }
.mgnv-m-count{ color: var(--mgnv-text-secondary); font-weight:700; font-size:11.5px; font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); flex-shrink:0; }
.mgnv-subhead{
  margin-top:6px; padding:10px 10px 4px; border-top:1px dashed var(--mgnv-border);
  font-family: var(--font-head, "Zen Kaku Gothic Antique", sans-serif); font-weight:700; font-size:11px; color: var(--mgnv-text-secondary); letter-spacing:.04em; list-style:none;
}
.mgnv-cta-link{
  display:block; text-align:center; margin-top:8px; padding:12px; border-radius:8px; background: var(--bg-menu);
  font-weight:700; font-size:13.5px; color:#8a5a00;
}

.mgnv-mobile-nav-cta{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.mgnv-btn-block{ display:block; text-align:center; padding:13px; border-radius:8px; font-weight:700; font-size:14.5px; }
.mgnv-btn-line-block{ background: var(--bg-green); color:#fff; }

@media (prefers-reduced-motion: reduce){
  .mgnv-trigger .mgnv-chev,
  .mgnv-accordion .mgnv-chev,
  .mgnv-band-search-form,
  .mgnv-tour-card,
  .mgnv-btn-tour-cta,
  .mgnv-btn-line-nav{
    transition-duration: .001ms !important;
  }
}