/* =========================================================
   みずほ美装
   HEADER COMPLETE STYLE
   2026.09
========================================================= */


/* =========================================================
   01. HEADER BASE
========================================================= */

#header.l-header {
  background: #ffffff;
  box-shadow: none;
  border-bottom: 1px solid #eeeeea;
}


/* ヘッダー全体の幅 */
#header .l-header__inner {
  width: calc(100% - 80px);
  max-width: 1320px;

  min-height: 74px;

  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   02. BRAND AREA
========================================================= */

#header .l-header__logo {
  padding: 0;
}


/* 日本語社名 */
#header .c-headLogo.-txt .c-headLogo__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  gap: 4px;

  color: #222222;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 14px;
  line-height: 1.15;

  font-weight: 500;

  letter-spacing: .10em;

  text-decoration: none;
}


/* 英字ブランド */
#header .c-headLogo.-txt .c-headLogo__link::before {
  content: "MIZUHO BISOU";

  display: block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 15px;
  line-height: 1;

  font-weight: 400;

  letter-spacing: .20em;

  color: #222222;
}


/* =========================================================
   03. GLOBAL NAVIGATION
========================================================= */

#header .l-header__gnav {
  margin-left: auto;
}


/* ナビ全体 */
#header .c-gnav {
  display: flex;
  align-items: center;

  gap: 0;
}


/* 各メニュー */
#header .c-gnav > li {
  display: flex;
  align-items: center;
}


/* 通常メニュー */
#header .c-gnav > li > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 74px;

  padding: 0 11px;

  font-size: 11px;
  line-height: 1;

  font-weight: 400;

  letter-spacing: .07em;

  color: #333330;

  text-decoration: none;

  transition:
    opacity .25s ease,
    color .25s ease;
}


/* hover */
#header .c-gnav > li > a:hover {
  color: #222222;
  opacity: .55;
}


/* =========================================================
   04. NAV UNDERLINE
========================================================= */

#header .c-gnav > li:not(:last-child) > a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 18px;

  width: 0;
  height: 1px;

  background: #333330;

  transform: translateX(-50%);

  transition: width .25s ease;
}


#header .c-gnav > li:not(:last-child) > a:hover::after {
  width: calc(100% - 22px);
}


/* =========================================================
   05. CONTACT BUTTON
========================================================= */

#header .c-gnav > li:last-child {
  display: flex;
  align-items: center;

  margin-left: 12px;
}


/* お問い合わせ */
#header .c-gnav > li:last-child > a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 0;
  height: 38px;

  padding: 0 18px;

  border: 1px solid #c6c6c0;

  background: #ffffff;

  font-size: 11px;
  line-height: 1;

  font-weight: 400;

  letter-spacing: .07em;

  color: #333330;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}


/* お問い合わせには通常下線を付けない */
#header .c-gnav > li:last-child > a::after {
  display: none;
}


/* お問い合わせ hover */
#header .c-gnav > li:last-child > a:hover {
  background: #222222;

  border-color: #222222;

  color: #ffffff;

  opacity: 1;
}


/* =========================================================
   06. PC HAMBURGER
========================================================= */

@media (min-width: 960px) {

  #header .l-header__menuBtn {
    display: flex !important;
    visibility: visible !important;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 74px;

    margin-left: 8px;

    background: transparent !important;

    color: #222222;
  }

}


/* =========================================================
   07. FIXED HEADER
========================================================= */

#fix_header {
  background: rgba(255, 255, 255, .98);

  box-shadow: none;

  border-bottom: 1px solid #eeeeea;
}


/* 固定ヘッダー幅 */
#fix_header .l-fixHeader__inner {
  width: calc(100% - 80px);
  max-width: 1320px;

  margin: 0 auto;
}


/* 固定時 日本語社名 */
#fix_header .c-headLogo.-txt .c-headLogo__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 3px;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  font-size: 12px;
  line-height: 1.15;

  font-weight: 500;

  letter-spacing: .10em;

  color: #222222;
}


/* 固定時 英字ブランド */
#fix_header .c-headLogo.-txt .c-headLogo__link::before {
  content: "MIZUHO BISOU";

  display: block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 13px;
  line-height: 1;

  font-weight: 400;

  letter-spacing: .18em;

  color: #222222;
}


/* 固定時ナビ */
#fix_header .c-gnav > li > a {
  font-size: 10px;

  font-weight: 400;

  letter-spacing: .07em;

  color: #333330;
}


/* =========================================================
   08. TABLET
========================================================= */

@media (max-width: 959px) {

  #header .l-header__inner {
    width: calc(100% - 32px);

    min-height: 64px;
  }


  #header .c-headLogo.-txt .c-headLogo__link {
    gap: 3px;

    font-size: 12px;
  }


  #header .c-headLogo.-txt .c-headLogo__link::before {
    font-size: 13px;

    letter-spacing: .17em;
  }

}


/* =========================================================
   09. SMARTPHONE
========================================================= */

@media (max-width: 599px) {

  #header .l-header__inner {
    width: calc(100% - 24px);
  }


  #header .c-headLogo.-txt .c-headLogo__link {
    font-size: 11px;
  }


  #header .c-headLogo.-txt .c-headLogo__link::before {
    font-size: 12px;
  }

}