/* =========================
   Header layout
========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #5F90EB;
}

.site-header__inner{
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.site-logo img{
  display: block;
  width: 467px;
  height: 34px;
}

/* ヘッダー固定ぶんだけ本文を下げる */

@media (min-width:801px){
  .site-content{
    padding-top:80px;
  }
}

@media (max-width:800px){
  .site-content{
    padding-top:70px;
  }
}

/* =========================
   Global nav
========================= */
.site-nav{
  height: 100%;
}

.site-nav__list{
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav__item{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.site-nav__link{
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: #000000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
  padding: 0 8px;
}

.site-nav__link:hover,
.site-nav__link:focus-visible{
  color: #5F90EB;
}

/* a と button の見た目を揃える */
.site-nav__item > a.site-nav__link{
  cursor: pointer;
}

/* =========================
   Submenu
========================= */
.site-submenu{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 50;

  background: #fff;
  border: 1px solid #5F90EB;
  border-radius: 5px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility 0s linear .35s;
}

.site-nav__item--has-sub:hover > .site-submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.site-submenu__list{
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.site-submenu__item{
  margin: 0;
}

.site-submenu__link{
  display: block;
  padding: 10px 16px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}

.site-submenu__link:hover,
.site-submenu__link:focus-visible{
  color: #5F90EB;
  outline: none;
}

/* --- 幅指定（要件） --- */
.site-submenu--company{ width: 144px; }
.site-submenu--group{ width: 284px; }

/* =========================
   Open states
========================= */
.site-nav__item--has-sub:hover > .site-submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  max-height: 520px;
  transition:
    opacity .18s ease,
    transform .18s ease,
    max-height .22s ease,
    visibility 0s;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-submenu{
    transition: none;
  }
}

/* button のフォーカス視認性 */
.site-nav__link:focus-visible{
  outline: 2px solid rgba(95,144,235,.8);
  outline-offset: 3px;
  border-radius: 6px;
}

/*スマホ用***************************************************************************/

/* =========================
   SP Header
========================= */

/* PCではスマホヘッダーを非表示 */
@media (min-width: 801px){
  .site-header-sp{
    display: none;
  }
}

/* SPではPCヘッダーを非表示 */
@media (max-width: 800px){
  .site-header--pc{
    display: none;
  }

  .site-header-sp{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: block;
    height: 70px;
    background: #fff;
    border-bottom: 1px solid rgba(109, 140, 167, 0.18);
  }

  .site-header-sp__inner{
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 22px 0 16px;
    gap: 16px; /* ロゴとトグルの間 */
  }

  .site-header-sp__logo{
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 46px); /* ボタン30px + 間16px */
    text-decoration: none;
    line-height: 1;
  }

  .site-header-sp__logo img{
    display: block;
    width: 100%;
    max-width: 293px;
    height: auto;
  }

  .site-header-sp__toggle{
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
    flex: 0 0 30px;
  }

  .site-header-sp__toggle-line{
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background: #6D8CA7;
    border-radius: 999px;
    transition:
      transform .25s ease,
      opacity .2s ease,
      top .25s ease;
  }

  .site-header-sp__toggle-line:nth-child(1){
    top: 4px;
  }

  .site-header-sp__toggle-line:nth-child(2){
    top: 14px;
  }

  .site-header-sp__toggle-line:nth-child(3){
    top: 24px;
  }

  .site-header-sp__toggle.is-open .site-header-sp__toggle-line:nth-child(1){
    top: 14px;
    transform: rotate(45deg);
  }

  .site-header-sp__toggle.is-open .site-header-sp__toggle-line:nth-child(2){
    opacity: 0;
  }

  .site-header-sp__toggle.is-open .site-header-sp__toggle-line:nth-child(3){
    top: 14px;
    transform: rotate(-45deg);
  }


}