/* mega-menu.css */
/* =========================================================
   mega-menu.css (集約版)
   - グロナビ（通常dropdown含む）
   - メガメニュー（2階層/3階層パネル含む）
   - 初期描画/横はみ出し対策（ナビ領域の安定化）
========================================================= */

/* =========================================================
   Nav base (帯色は head.css に一本化)
========================================================= */

/* ナビ（帯は transparent） */
.navbar.main-nav-bar{background:transparent}
.navbar .navbar-toggler{border-color:rgba(255,255,255,.6)}
.navbar .navbar-toggler-icon{filter:invert(1)}
.topnav-link{
  color:#fff!important; font-size:2.0rem; padding:.9rem 1.2rem; border-radius:.6rem;
}
.topnav-link:hover,.topnav-link:focus{background:rgba(255,255,255,.12)}
.dropdown-menu{
  border:0; border-radius:.6rem; box-shadow:0 10px 24px rgba(0,0,0,.12); padding:.6rem;
}
.dropdown-item{font-size:1.8rem; padding:.6rem 1rem}
.dropdown-item:hover{background:#f6f6f6}

/* =========================================================
   Header nav / Navbar layout
========================================================= */

.site-header .navbar-collapse{flex-grow:1}

#megaMenuNav > .navbar-nav{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  align-items:flex-end;
  width:100%;
  padding-bottom:0;
}

.navbar.main-nav-bar .navbar-nav .nav-item{
  flex:0 0 auto;
  margin:0;
}

.navbar.main-nav-bar .nav-link{
  position:relative;
  color:#ffffff;
  font-weight:700;
  font-size:14px;
  line-height:1.4;
  padding:0.45rem 0.85rem;
  border-radius:0.9rem 0.9rem 0 0;
  margin:0;
  white-space:nowrap;
  transition:color 0.15s, background-color 0.15s;
}

/* hover / focus（確定色） */
.navbar.main-nav-bar .nav-link:hover,
.navbar.main-nav-bar .nav-link:focus{
  color:#cfe9f1;
  text-decoration:none;
}

/* active / open */
.navbar.main-nav-bar .nav-item.show > .nav-link,
.navbar.main-nav-bar .nav-link.active{
  color:#c0392b;
  background:#ffffff;
  border-bottom-color:#ffffff;
}

/* Dropdown arrow */
.navbar.main-nav-bar .dropdown-toggle::after{
  margin-left:0.35em;
}

/* =========================================================
   Dropdown / Mega Menu
========================================================= */

.navbar.main-nav-bar .dropdown-menu{
  background:#ffffff;
  border:1px solid #cccccc;
  border-radius:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
  margin-top:0;
}

.mega-menu{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px 36px;
  padding:20px 40px;
}

.navbar.main-nav-bar .dropdown-item{
  font-size:0.9rem;
  padding:0.45rem 1.25rem;
  color:#222;
}

.navbar.main-nav-bar .dropdown-item:hover{
  color:#c40000;
  font-weight:600;
  background:#f8f9fa;
}

/* PC hover open */
@media (min-width: 992px){
  .navbar.main-nav-bar .dropdown-menu{display:none}
  .navbar.main-nav-bar .dropdown:hover > .dropdown-menu{display:block}
}

/* =========================================================
   Mobile Menu
========================================================= */

@media (max-width: 991.98px){
  .navbar.main-nav-bar{padding:0 0.5rem}
  .navbar.main-nav-bar .nav-item + .nav-item{
    border-top:1px solid rgba(255,255,255,0.25)
  }
  .navbar.main-nav-bar .nav-link{
    border-radius:0;
    padding:0.6rem 1rem
  }
  .navbar.main-nav-bar .dropdown-menu{
    position:static;
    border:none;
    box-shadow:none;
    padding-left:1.5rem;
    display:none
  }
  .navbar.main-nav-bar .dropdown-menu.show{display:block}
}

/* =========================================================
   Mega Menu behavior + compact styles
========================================================= */

/* Desktop hover open (safety) */
@media (min-width: 992px){
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu{display:block}
}

/* Top nav tweaks */
.navbar-nav .nav-link{
  font-size:1.1rem;
  font-weight:600;
  padding:10px 12px
}
.nav-item .nav-link:hover{color:#ffcccc !important}
.dropdown-toggle::after{display:none}
.navbar-nav > li:last-child a.nav-link{padding-right:0}

/* Parent mega panel */
.dropdown-menu.mega-menu{
  position:relative;
  overflow:visible;
  background:#fff8f5 !important;
  border-radius:4px;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  padding:8px 10px !important
}

/* Compact gutter */
.mega-menu .row.g-3{
  --bs-gutter-x:0.45rem;
  --bs-gutter-y:0.20rem
}

/* Items */
.dropdown-menu.mega-menu .dropdown-item{
  padding:1px 2px;
  font-size:0.95rem;
  line-height:1.15
}
.dropdown-menu.mega-menu .dropdown-item:hover{
  background:none;
  color:#d00000 !important;
  text-decoration:underline
}

/* Child (2nd level) heading */
.mega-menu__heading.dropdown-item{
  display:inline-block;
  font-weight:700;
  color:#a40000;
  border-bottom:1px solid #e4c9c2;
  padding:0;
  margin:0;
  line-height:1.1
}

/* Child list container */
.mega-menu__items{position:relative}
.mega-menu__item{position:relative}

/* Grandchild panel (3rd level) */
.mega-menu__panel{
  display:none;
  position:fixed;
  top:0;
  left:0;
  z-index:2000;
  background:#fff;
  border-radius:4px;
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
  padding:8px 10px;
  max-height:calc(100vh - 120px);
  max-width:calc(100vw - 20px);
  overflow:auto
}

/* Panel content */
.mega-menu__panel .dropdown-item,
.mega-menu__panel a{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word
}

/* Grandchild list */
.mega-menu__panel .mega-menu__list{
  margin:0; padding:0; list-style:none
}
.mega-menu__link.dropdown-item{
  display:block;
  padding:2px 2px;
  line-height:1.15;
  color:#212529 !important;
  background:transparent !important
}

/* Mobile: grandchild not required */
@media (max-width: 991px){
  .mega-menu__panel{display:none !important}
}

/* =========================================================
   Nav stabilization / FOUC対策
========================================================= */

html.mm-prepaint,
body.mm-prepaint{overflow-x:clip}
@supports not (overflow-x: clip){
  html.mm-prepaint,
  body.mm-prepaint{overflow-x:hidden}
}
html.mm-prepaint,
html.mm-prepaint body{overflow-x:hidden}
html{scrollbar-gutter:stable}
.navbar-nav .nav-link i{display:inline-block; width:1.25em}
.site-header, .main-nav-bar{max-width:100%}

/* =========================================================
   PC width stabilization
========================================================= */
@media (min-width: 992px){
  #megaMenuNav > .navbar-nav{justify-content:unset !important}
  #megaMenuNav > .navbar-nav > .nav-item{min-width:0}
  #megaMenuNav > .navbar-nav > .nav-item > .nav-link{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis
  }
  #megaMenuNav > .navbar-nav > .nav-item > .nav-link i{
    display:inline-block; width:1.25em
  }
}