@charset "UTF-8";

/************************************
** ヘッダー共通CSS
************************************/

/************************************
** Common Header (PC)
************************************/
/*** Header ***/
.header-container {
  align-items: center;
  display: flex;
  height: 70px;
  margin-bottom: 40px;
  position: relative !important;
  z-index: 1000;
}
.header-container.fixed-header {
  box-shadow:  0 1px 4px rgba(0, 0, 0, .25);
  position: fixed !important;
} 
.header-container-in a img.header__logo {
  display: block;
  max-height: 25px;
  width: auto;
}
.logo-image span,
.logo-image a {
  display: block;
}
.fixed-header .menu-item:hover > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/*** Navigation ***/
.header-container-in .menu-item:not(.header__viewPhone) {
  width: fit-content;
}
.header-container-in .sub-menu .menu-item a .caption-wrap {
  border-right: none;
}
.header-container-in .menu-header > .header__cv {
  margin: 0 0 0 12px;
}
.header-container-in .menu-header > .menu-item .sub-menu .menu-item {
  margin: 0 ;
}
.navi-in a {
  align-items: center;
}
.navi-in > ul li {
  height: auto;
}
.navi-in > .menu-header .menu-item:not(:has(.sub-menu)) a {
  align-items: center;
  display: flex;
  font-weight: bold;
  justify-content: center;
}
.navi-in > .menu-header .menu-item a .caption-wrap {
  padding: 4px 24px;
}
.navi-in > .menu-header .menu-item a .caption-wrap .item-label {
  font-size: var(--font-size-content-S);
  line-height: 1;
}
#navi .navi-in a:hover {
  background-color: transparent;
}
.icon__targetLink a::after { 
  color: var(--color-LinkusSecondary-030);
  content: '\f35d';
  font-family: 'Font Awesome 5 Free';
  font-size: var(--font-size-caption);
  font-weight: 900;
  position: absolute;
  right: 4px;
}

/*** 今すぐ電話相談 ***/
.header-container-in .header__viewPhone .item-label {
  overflow: hidden;
  text-indent: -9999px;
}
.header-container-in .header__viewPhone {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
#menu-header_menu_linkus_pc .header__viewPhone,
#menu-header_menu_corporate_pc .header__viewPhone {
  background-image: url(../img/linkus/bhr_phone.png);
}
#menu-header_menu_consult_pc .header__viewPhone {
  background-image: url(../img/consult/bhr_phone.png);
}

.header-container-in .header__viewPhone a:hover {
  background-color: transparent;
  opacity: 1;
}

/*** Accordion ***/
.fixed-header .has-sub {
  display: flex;
}
.navi-in .has-icon {
  display: none;
}
.navi-in .sub-menu .menu-item .caption-wrap {
  height: 30px;
}
.navi-in .menu-item-has-children a .caption-wrap .item-label,
.navi-in .sub-menu .menu-item .caption-wrap .item-label {
  font-size: var(--font-size-content-S);
  font-weight: bold;
}
.header-container-in .menu-header > .menu-item:not(.header__button) a,
.header-container-in .sub-menu .menu-item a {
  border-bottom: 2px solid transparent;
}
.header-container-in .sub-menu .menu-item a:hover {
  border-bottom: 2px solid transparent !important;
}

/*** Sub-menu ***/
.header-container-in .navi-in > ul .sub-menu {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}
.header-container-in .navi-in > ul .sub-menu a {
  padding: 0 !important;
}
.navi-in > ul .sub-menu {
  border-radius: 0 0 8px 8px;
  padding: 16px 0;
}
.sub-menu .menu-item a .item-label::before {
  content: '\f0da';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 8px;
}
.navi-in .sub-menu .menu-item a .caption-wrap {
  justify-content: flex-start;
}
.navi-in .sub-menu .menu-item a .caption-wrap .item-label {
  font-size: var(--font-size-caption);
}

/*** ヘッダー用のボタン ***/
.header__button a {
  border-radius: var(--border-radius-M);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
  padding: 4px 24px;
}
.navi-in > .menu-header > .menu-item.header__button a .caption-wrap {
  padding: 0;
}
.header__contact a {
  background-size: 100%;
  color: var(--color-grayscale-100);
  transition: background-position .5s ease;
}
.header__contact a::before {
  content: '\f0e0';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 8px;
}
.menu-item .caption-wrap {
  height: 40px;
}
.menu-item .caption-wrap > div {
  width: fit-content;
}

/*** Mobile menu ***/
@media screen and (max-width: 1023px) {
  .header-container { 
    display: none;
  }
  .mobile-header-menu-buttons .menu-button > a,
  .mobile-header-menu-buttons .menu-button label {
    color: var(--color-LinkusSecondary-030) !important;
  }
  .logo-menu-button a img.header__logo--mobile {
    max-height: 20px;
  }
  .menu-close-button {
    color: var(--color-grayscale-005);
    display: flex;
    justify-content: flex-end;
    padding-right: 32px;
    padding-top: 16px;
  }
  .menu-content .menu-drawer {
    padding: 16px 32px 0 32px;
  }
  .menu-drawer a {
    color: var(--color-LinkusSecondary-030);
  }
  .mobile-menu-buttons .logo-menu-button.menu-button {
    justify-content: left;
    padding-left: 16px;
  }
  .mobile-header-menu-buttons .menu-item {
    width: 100%;
  }
  .icon__targetLink a::after { 
    margin-left: 8px;
    position: static;
  }
  .nav-menu-phone img {
    height: auto;
    margin: 4px auto;
    width: 19px;
 }
  /*** モバイルナビゲーションのボタン ***/
  .menu-drawer .nav__heading .sub-menu {
    padding-left: 0;
  }
  .menu-drawer .cv__button--sp a {
    border-radius: var(--border-radius-M);
    color: var(--color-grayscale-100);
    display: block;
    font-size: var(--font-size-content-M);
    font-weight: bold;
    margin-bottom: 24px;
    padding: 24px;
    text-align: center;
  }
  .cvContact a::before,
  .cvLogin a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
  } 
  .cvContact a::before {
    content: '\f0e0';
  }
  .menu-drawer .cvPhone a {
    align-items: center;
    background-color: var(--color-LinkusSecondary-030);
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .cvPhone a::before {
    background-image: url(../img/linkus/phone-volume-solid-w.png);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 20px;
    width: 20px;
  }
}

@media screen and (max-width: 640px) {
  .menu-content {
    max-width: 90%;
  }
}

/************************************
** Common Navigation (SP)
************************************/
@media screen and (max-width: 1023px) {
  /*** メニューボタン ***/
  .mobile-header-menu-buttons .menu-drawer .nav__button--sp > a {
    background-color: var(--color-grayscale-080);
    border-radius: var(--border-radius-M);
    color: var(--color-grayscale-005);
    display: block;
    font-weight: bold;
    margin-bottom: 24px;
    padding: 16px 24px;
    position: relative;
    width: 100%;
  }
  .mobile-header-menu-buttons .menu-drawer .nav__button--sp > a::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-size: var(--font-size-heading-S);
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  /*** サブメニュー ***/
  .mobile-header-menu-buttons .navMenu--sp .sub-menu {
    margin-bottom: 32px;
  }
  .mobile-header-menu-buttons .navMenu--sp .sub-menu .menu-item {
    margin-bottom: 16px;
  }
  .mobile-header-menu-buttons .navMenu--sp  .sub-menu .menu-item a::before {
    content: '\f0da';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
  }
  /*** お問い合わせはこちら・アカウントをお持ちの方はこちら ***/
  .nav__heading > a {
    border-bottom: 1px solid var(--color-grayscale-005);
    color: var(--color-grayscale-005);
    font-size: var(--font-size-content-M);
    font-weight: bold;
    margin-bottom: 16px;
    padding-bottom: 8px;
  }
  /*** お電話での相談 ***/
  .menu-drawer .cvPhone a {
    background-color: var(--color-LinkusSecondary-030) !important;
  }
}

/************************************
** Page Common Header (PC)
************************************/
/*** Logo ***/
.page .header-container {
  margin-bottom: 0 !important;
}
.page .header-container-in a img.header__logo {
  max-height: 30px;
}
/*** Navigation ***/
.header-container-in .nav__case .item-label::after {
  content: '\f35d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left: 8px;
}

/************************************
** Linkus Header (PC)
************************************/

/*** Navigation ***/
.header-container-in .headerLinkus__nav .item-label {
  color: var(--color-LinkusSecondary-030);
}
.header-container-in .headerLinkus__nav .item-label:hover,
.header-container-in .headerLinkus__nav .sub-menu .menu-item .item-label:hover {
  color: var(--color-LinkusSecondary-060) !important;
}
.header-container-in .headerLinkus__nav a .caption-wrap {
  border-right: 1px solid var(--color-LinkusSecondary-030);
}

/*** Accordion ***/
#menu-header_menu_linkus_pc .navi-in .menu-item-has-children a .caption-wrap .item-label,
#menu-header_menu_linkus_pc .navi-in .sub-menu .menu-item .caption-wrap .item-label {
  color: var(--color-LinkusSecondary-030);
}
.header-container-in .menu-header > .menu-item.nav__linkus a:hover {
  border-bottom: 2px solid var(--color-LinkusSecondary-060);
}
.header-container-in .menu-item.headerLinkus__nav a:hover .caption-wrap .item-label {
  color: var(--color-LinkusSecondary-060);
}

/*** Sub-menu ***/
.headerLinkus__nav .sub-menu {
  background-color: var(--color-LinkusSecondary-090) !important;
}

/*** ヘッダー用のボタン ***/
#menu-header_menu_linkus_pc .header__contact a,
#menu-header_menu_media_pc .header__contact a {
  background-color: var(--color-LinkusPrimary-030);
}
#menu-header_menu_linkus_pc .header__contact a:hover,
#menu-header_menu_media_pc .header__contact a:hover {
  background-image: linear-gradient(to right, #df4661, #f07389);
  background-position: 0 0;
}
#menu-header_menu_linkus_pc .header__login a {
  background-color: var(--color-grayscale-100);
  border: solid 2px var(--color-LinkusPrimary-030);
  color: var(--color-LinkusPrimary-030) !important;
}
#menu-header_menu_linkus_pc .header__login a:hover {
  background-color: var(--color-LinkusPrimary-090) !important;
}
#menu-header_menu_linkus_pc .header__login a::before {
  content: '\f2f6';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 8px;
}

/************************************
** Linkus Navigation (SP)
************************************/
@media screen and (max-width: 1023px) {
  /*** メニューボタン ***/
  .mobile-header-menu-buttons .menu-drawer .navCase--sp a::after {
    content: '\f35d';
    font-size: var(--font-size-content-M);
  }

  /*** お問い合わせフォームでの相談 ***/
  .cvContact--linkus a {
    background-color: var(--color-LinkusPrimary-030);
  }

  /*** ログイン ***/
  .menu-drawer .sub-menu .cvLogin a {
    background-color: var(--color-grayscale-100);
    border: 1px solid var(--color-LinkusPrimary-030);
    color: var(--color-LinkusPrimary-030);
  }
  .sub-menu .cvLogin a::before {
    content: '\f2f6';
  }
}

/************************************
** Consult Header (PC)
************************************/
/*** Navigation ***/
.header-container-in .headerConsult__nav .item-label {
  color: var(--color-ConsultPrimary-030);
}
.header-container-in .headerConsult__nav .item-label:hover,
.header-container-in .headerConsult__nav .sub-menu .menu-item .item-label:hover {
  color: var(--color-ConsultPrimary-040);
}

/*** Accordion ***/
#menu-header_menu_consult_pc .navi-in .menu-item-has-children a .caption-wrap .item-label,
#menu-header_menu_consult_pc .navi-in .sub-menu .menu-item .caption-wrap .item-label {
  color: var(--color-ConsultPrimary-030);
}
.header-container-in .menu-header > .menu-item.headerConsult__nav a:hover {
  border-bottom: 2px solid var(--color-ConsultPrimary-050);
}
.header-container-in .menu-item.headerConsult__nav a:hover .caption-wrap .item-label {
  color: var(--color-ConsultPrimary-050);
}

/*** Sub-menu ***/
.headerConsult__nav .sub-menu {
  background-color: var(--color-ConsultPrimary-090) !important;
}

/*** ヘッダー用のボタン ***/
#menu-header_menu_consult_pc .header__contact a {
  background-color: var(--color-ConsultPrimary-040) !important;
}
#menu-header_menu_consult_pc .header__contact a:hover {
  background-image: linear-gradient(to right, #0e6694, #2888ba);
  background-position: 0 0;
}

/************************************
** Consult Navigation (SP)
************************************/
@media screen and (max-width: 1023px) {
  /*** お問い合わせフォームでの相談 ***/
  .cvContact--consult a,
  .cvContact--consult a:hover {
    background-color: var(--color-ConsultPrimary-040) !important;
  }
}

/************************************
** Corporate Header (PC)
************************************/
/*** ヘッダー用のボタン ***/
#menu-header_menu_corporate_pc .header__contact a {
  background-color: var(--color-LinkusPrimary-030) !important;
}
#menu-header_menu_corporate_pc .header__contact a:hover {
  background-image: linear-gradient(to right, #df4661, #f07389);
  background-position: 0 0;
  text-decoration: none;
}

/************************************
** Corporate Navigation (SP)
************************************/
@media screen and (max-width: 1023px) {
  /*** お問い合わせフォームでの相談 ***/
  .cvContact--corporate a,
  .cvContact--corporate a:hover {
    background-color: var(--color-LinkusPrimary-030);
  }
  .cvPhone a {
    background-color: var(--color-LinkusSecondary-030);
  }
}