/* ===================================================================
   Harmony Net - Mobile / Sticky Footer Overlay (harmony-theme CSSは無改変)
   =================================================================== */

/* デスクトップ：ハンバーガー関連を非表示 */
#hmn-hamburger,
#hmn-drawer,
#hmn-drawer-overlay { display: none; }

/* === 全幅対応 (harmony-theme は 992px 固定だが、最低限の幅補正で動作する形に) === */
#global_menu ul.menu > li.menu-item > a { padding: 0 16px !important; height: 37px; line-height: 37px; display: inline-block; }
#global_menu ul.menu > li.menu-item { float: left; }
#global_menu ul.menu { padding: 0; margin: 0; list-style: none; }
#global_menu::after { content: ""; display: table; clear: both; }

/* hero slider: ensure visible even before nivoSlider init */
#index_top { min-height: 320px; }
#slider { background: #f5f5f5; }
#slider:not(.nivoSlider) a:first-of-type img,
#slider.nivoSlider a:first-of-type img { visibility: visible !important; }

/* === 固定フッター（全viewport共通） === */
#hmn-sticky-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: stretch;
  background: rgba(107, 133, 68, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -2px 10px rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.18);
}
#hmn-sticky-footer .sf-link {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 4px 7px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 10.5px;
  line-height: 1.2;
  border-right: 1px solid rgba(255,255,255,.16);
}
#hmn-sticky-footer .sf-link:last-child { border-right: none; }
#hmn-sticky-footer .sf-ico { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
#hmn-sticky-footer .sf-flag { width: 24px; height: 24px; color: #fff; }
#hmn-sticky-footer .sf-link:active { background: rgba(0,0,0,.18); }
body { padding-bottom: 60px; }

@media (min-width: 1024px) {
  #hmn-sticky-footer { max-width: 720px; left: 50%; transform: translateX(-50%); border-radius: 12px 12px 0 0; }
  #hmn-sticky-footer .sf-link { font-size: 12px; padding: 10px 8px 9px; }
  #hmn-sticky-footer .sf-flag { width: 28px; height: 28px; }
}

/* === MOBILE (~768px) ===
   harmony-theme は元々 PC レイアウト固定。モバイルで縦積みに調整。 */
@media (max-width: 768px) {
  body { background: #f5f3e7; padding-top: 0; }
  html, body { overflow-x: hidden; }

  /* ハンバーガー */
  #hmn-hamburger {
    display: block !important;
    position: fixed; top: 12px; right: 12px; z-index: 10001;
    width: 46px; height: 46px;
    background: #6B8544; border: none; border-radius: 6px;
    padding: 0; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  #hmn-hamburger span {
    display: block; position: absolute; left: 12px;
    width: 22px; height: 2px; background: #fff;
    border-radius: 1px;
    transition: transform .25s ease, opacity .15s ease, top .25s ease;
  }
  #hmn-hamburger span:nth-child(1) { top: 15px; }
  #hmn-hamburger span:nth-child(2) { top: 22px; }
  #hmn-hamburger span:nth-child(3) { top: 29px; }
  #hmn-hamburger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
  #hmn-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  #hmn-hamburger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

  #hmn-drawer-overlay {
    display: block !important;
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  #hmn-drawer-overlay[aria-hidden="false"] { opacity: 1; pointer-events: auto; }

  #hmn-drawer {
    display: block !important;
    position: fixed; top: 0; right: 0;
    width: 84vw; max-width: 320px; height: 100vh;
    background: #6B8544;
    z-index: 9999;
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto;
    padding: 60px 14px 20px; box-sizing: border-box;
    box-shadow: -4px 0 14px rgba(0,0,0,.4);
  }
  #hmn-drawer[aria-hidden="false"] { transform: translateX(0); }

  #hmn-drawer-close {
    position: absolute; top: 8px; right: 12px;
    width: 38px; height: 38px;
    background: transparent; color: #fff;
    border: none; font-size: 30px; line-height: 1; cursor: pointer; padding: 0;
  }

  #hmn-drawer h3.side_headline { color: #fff; font-size: 11px; letter-spacing: .14em; margin: 14px 0 8px; padding: 0 2px 6px; border-bottom: 1px solid rgba(255,255,255,.35); }
  #hmn-drawer ul { padding: 0; margin: 0; list-style: none; }
  #hmn-drawer ul.menu li,
  #hmn-drawer ul li { margin: 0 0 6px 0; padding: 0; background: none; }
  #hmn-drawer ul.menu li a,
  #hmn-drawer ul li a { display: block; padding: 4px 0; background: none; color: #fff !important; text-decoration: underline; font-size: 12px; }
  #hmn-drawer ul ul.sub-menu,
  #hmn-drawer ul ul.children { padding-left: 12px; margin: 2px 0 4px; }
  #hmn-drawer ul.children li a { font-size: 11px !important; }
  body.hmn-drawer-open { overflow: hidden; }

  /* harmony-net 元レイアウトをモバイル縦積みに調整 */
  #header { padding: 8px 12px; text-align: center; height: auto !important; }
  #header #site_description { font-size: 11px; margin: 4px 0; color: #6B8544; }
  #header #logo { position: static !important; left: auto !important; top: auto !important; margin: 8px auto; display: block; }
  #header #logo img { max-width: 80% !important; height: auto !important; }
  #header #social_link { display: none; }
  #header .menu_button { display: none; }
  #global_menu { display: none; } /* ハンバーガーで代替 */
  #header_banner { margin: 12px auto; max-width: 100%; }
  #header_banner img { max-width: 100% !important; height: auto !important; }

  #contents { width: 100% !important; max-width: 100% !important; padding: 0 8px; box-sizing: border-box; }
  #index_top,
  #index_main_content,
  #side_col,
  #single_post { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 0 20px 0 !important; }
  .slider-wrapper.recommend_gallery,
  #slider.nivoSlider { width: 100% !important; max-width: 100% !important; height: auto !important; }
  #slider img { max-width: 100%; height: auto; }

  /* 投稿リストはオリジナルCSSが効くので最小限の上書き */
  #index_main_content .post_item,
  .post_list .post_item { width: 100% !important; box-sizing: border-box; }

  #footer { text-align: center; padding: 16px 12px; font-size: 11px; }
  #return_top { display: none; }
}