/* =========================================================
   top-menu.css
   Modern Horizontal Navigation
   WIDES / White + Light Gray Glass
========================================================= */


/* =========================================================
   Header Area
========================================================= */

#header-area {

  position: relative;

  z-index: 10000;

}


#header-area .site-header {

  position: relative;

  z-index: 10000;

  overflow: visible;

}


/* =========================================================
   横ヘッダー全体
   外側：薄いグレー＋ガラス
========================================================= */

.top-nav {

  position: relative;

  z-index: 10000;

  display: flex;

  align-items: center;

  width: 100%;

  padding: 12px 14px;

  margin: 0 auto 10px;

  box-sizing: border-box;

  /*
     外側
  */

  background: #ffffff;

  /*
     ガラス感
  */

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  /*
     薄いグレーの境界線
  */

  border: 1px solid rgba(226,232,240,0.8);

  border-radius:
    22px;

  /*
     柔らかい影
  */

  box-shadow:
    0 12px 30px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);

  gap:
    18px;


}


/* =========================================================
   ヘッダー上部の淡い光
========================================================= */

.top-nav::before {

  content: "";

  position: absolute;

  top: 0;

  left: 8%;

  width: 45%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.95),
      transparent
    );

  pointer-events: none;

}


/* =========================================================
   WIDES Logo Banner
   内側：白
========================================================= */

.top-nav .top-menu-banner {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 190px;

  height: 58px;

  padding: 5px 14px;

  box-sizing: border-box;

  background: #ffffff;

  border: none;

  border-radius: 16px;

  /* 影はカードの外側だけ */
  box-shadow: none:

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


/* 内側の光・影を完全に無効化 */

.top-nav .top-menu-banner::before,
.top-nav .top-menu-banner::after {

  display: none;

}

/* =========================================================
   Logo Link
========================================================= */

.top-nav .top-menu-banner a {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  text-decoration: none;

  border: none;

  background: transparent;

}


/* =========================================================
   Logo Image
========================================================= */

.top-nav .top-menu-banner img {

  display: block;

  width: auto;

  max-width: 155px;

  max-height: 44px;

  height: auto;

  object-fit: contain;

}


/* =========================================================
   Logo Hover
========================================================= */

.top-nav .top-menu-banner:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 8px 22px rgba(15,23,42,0.11),
    inset 0 1px 0 rgba(255,255,255,1);

}


.top-nav .top-menu-banner:hover img {

  transform:
    scale(1.025);

}

/* ============================================================
   会社名
============================================================ */

.top-company-name {

  font-size: 22px;

}

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

.top-nav ul.top-menu {

  flex: 1;

  min-width: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap:
    12px;

  margin: 0;

  padding: 0;

  list-style: none;

  position: relative;

  z-index: 10001;

}


/* =========================================================
   Menu Item
========================================================= */

.top-nav ul.top-menu > li {

  position: relative;

  overflow: visible;

  z-index: 10002;

  margin: 0;

  padding: 0;

  transition:
    transform 0.25s ease;

}


/* =========================================================
   通常メニューのHover
========================================================= */

.top-nav ul.top-menu > li:not(.has-submenu):hover {

  transform:
    translateY(-2px);

}


/* =========================================================
   Menu Link
========================================================= */

.top-nav ul.top-menu > li > a {

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 115px;

  height: 46px;

  padding:
    0 22px;

  box-sizing: border-box;

  text-decoration: none;

  font-size: 15px;

  font-weight: 600;

  letter-spacing:
    0.04em;

  line-height: 1;

  color:
    #334155;

  /*
     メニュー
  */

  background: #f1f3f6;

  border: 1px solid #e2e6eb;



  border-radius:
    13px;

  box-shadow:
    0 3px 10px rgba(15,23,42,0.06);

  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;

}


/* =========================================================
   Menu Hover
========================================================= */

.top-nav ul.top-menu > li:hover > a {

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #60a5fa,
      #3b82f6
    );

  border-color:
    transparent;

  box-shadow:
    0 8px 20px rgba(37,99,235,0.20);

  transform:
    translateY(-2px);

}


/* =========================================================
   Active
========================================================= */

.top-nav ul.top-menu
> li.current
> a,

.top-nav ul.top-menu
> li.active
> a {

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #0f2742,
      #2563eb
    );

  border-color:
    transparent;

  box-shadow:
    0 7px 18px rgba(15,23,42,0.18);

}


/* =========================================================
   サービス一覧
========================================================= */

.top-nav ul.top-menu
> li.has-submenu {

  position: relative;

  overflow: visible;

  z-index: 100000;

}


/* =========================================================
   Submenu Arrow
========================================================= */

.top-nav .submenu-arrow {

  display: inline-block;

  margin-left:
    8px;

  font-size:
    10px;

  line-height:
    1;

  transition:
    transform 0.25s ease;

}


.top-nav ul.top-menu
> li.has-submenu:hover
> a
> .submenu-arrow {

  transform:
    rotate(180deg);

}


/* =========================================================
   Submenu
========================================================= */

.top-nav ul.top-menu
> li.has-submenu
> .submenu {

  display:
    none;

  position:
    absolute;

  top:
    100%;

  left:
    50%;

  transform:
    translateX(-50%);

  z-index:
    999999;

  width:
    max-content;

  min-width:
    320px;

  margin:
    0;

  padding:
    8px;

  box-sizing:
    border-box;

  list-style:
    none;

  /*
     サブメニュー：白＋ガラス
  */

  background:
    rgba(255,255,255,0.98);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  border:
    1px solid rgba(226,232,240,0.95);

  border-radius:
    14px;

  box-shadow:
    0 15px 40px rgba(15,23,42,0.16);

}


/* =========================================================
   Hoverで表示
========================================================= */

.top-nav ul.top-menu
> li.has-submenu:hover
> .submenu {

  display:
    block;

}


/* =========================================================
   Submenu Item
========================================================= */

.top-nav ul.top-menu
> li.has-submenu
> .submenu
> li {

  display:
    block;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    visible;

  transform:
    none;

}


/* =========================================================
   Submenu Link
========================================================= */

.top-nav ul.top-menu
> li.has-submenu
> .submenu
> li
> a {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  width:
    100%;

  min-width:
    0;

  min-height:
    46px;

  padding:
    11px 16px;

  box-sizing:
    border-box;

  color:
    #334155;

  background:
    transparent;

  border:
    none;

  border-radius:
    10px;

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.5;

  text-decoration:
    none;

  white-space:
    nowrap;

  box-shadow:
    none;

  transition:
    color 0.2s ease,
    background 0.2s ease;

}


/* =========================================================
   Submenu Hover
========================================================= */

.top-nav ul.top-menu
> li.has-submenu
> .submenu
> li:hover
> a {

  color:
    #2563eb;

  background:
    #f1f5f9;

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1100px) {

  .top-nav {

    gap:
      14px;

    padding:
      10px 12px;

  }


  .top-nav .top-menu-banner {

    width:
      160px;

    height:
      54px;

    padding:
      5px 12px;

  }


  .top-nav .top-menu-banner img {

    max-width:
      135px;

    max-height:
      38px;

  }


  .top-nav ul.top-menu {

    gap:
      8px;

  }


  .top-nav ul.top-menu > li > a {

    min-width:
      100px;

    height:
      44px;

    padding:
      0 15px;

    font-size:
      14px;

  }

}


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

@media (max-width: 768px) {

  .top-nav {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    padding:
      10px;

    border-radius:
      17px;

  }


  /* -----------------------------------------
     Logo
  ----------------------------------------- */

  .top-nav .top-menu-banner {

    width:
      100%;

    height:
      54px;

    border-radius:
      14px;

  }


  .top-nav .top-menu-banner img {

    max-width:
      145px;

    max-height:
      38px;

  }


  /* -----------------------------------------
     Menu
  ----------------------------------------- */

  .top-nav ul.top-menu {

    width:
      100%;

    justify-content:
      center;

    gap:
      7px;

  }


  .top-nav ul.top-menu > li > a {

    min-width:
      100px;

    height:
      43px;

    padding:
      0 14px;

    font-size:
      13px;

    border-radius:
      11px;

  }


  /* -----------------------------------------
     Submenu
  ----------------------------------------- */

  .top-nav ul.top-menu
  > li.has-submenu
  > .submenu {

    left:
      50%;

    min-width:
      280px;

  }

}

/* =========================================================
   currentに着色
========================================================= */
.top-menu > li.current > a {
  color: #1f4e79;
  background: #eef5fb;
  font-weight: 700;
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 480px) {

  .top-nav {

    padding:
      8px;

    border-radius:
      15px;

  }


  .top-nav .top-menu-banner {

    height:
      50px;

    border-radius:
      13px;

  }


  .top-nav .top-menu-banner img {

    max-width:
      135px;

    max-height:
      36px;

  }


  .top-nav ul.top-menu {

    gap:
      6px;

  }


  .top-nav ul.top-menu > li > a {

    min-width:
      90px;

    height:
      41px;

    padding:
      0 11px;

    font-size:
      12px;

  }


  .top-nav .submenu-arrow {

    margin-left:
      5px;

    font-size:
      9px;

  }

}