/*
* HP 共通スタイル（VISA・採用ページ共通）
* - デザイントークン（色・フォント・文字サイズ・余白）
* - ヘッダー / フッター（サイト標準＝共通レイアウトの見た目に統一）
* 2026-10-05
*/

/* ========== Variables ========== */
:root {
  /* Brand */
  --color-primary:    #5E2BB8;
  --color-secondary:  #1C56CF;
  --color-alert:      #c20020;

  /* Grayscale */
  --color-black:      #000000;
  --color-g-100:      #1E1E1E;
  --color-g-80:       #4B4B4B;
  --color-g-60:       #787878;
  --color-g-40:       #A5A5A5;
  --color-g-30:       #D2D2D2;
  --color-g-10:       #F1F1F1;
  --color-white:      #FFFFFF;

  /* Typography（欧文: Inter / 和文: Noto Sans JP） */
  --font-family:      'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --letter-spacing:   -0.005em;

  /* Line height（採用サイトの基準に合わせる） */
  --lh-title:   1.45;  /* 見出し */
  --lh-body:    1.8;   /* 本文 */
  --lh-ui:      1.5;   /* 補足・ボタン・リンク */

  /* Font weight */
  --fw-thin:          100;
  --fw-light:         200;
  --fw-demilight:     300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-bold:          600;
  --fw-black:         700;

  /* Font size — PC */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-caption: 14px;
  --fs-link:    16px;
  --fs-btn:     24px;

  /* Spacing */
  --m-4:   4px;
  --m-8:   8px;
  --m-16:  16px;
  --m-20:  20px;
  --m-28:  28px;
  --m-32:  32px;
  --m-40:  40px;
  --m-48:  48px;
  --m-60:  60px;
  --m-72:  72px;
  --m-80:  80px;
  --m-96:  96px;
  --m-120: 120px;
}

/* モバイルの文字サイズは採用サイト（recruit.css）に合わせる */
@media (max-width: 768px) {
  :root {
    --fs-h1:      32px;
    --fs-h2:      21px;
    --fs-h3:      16px;
    --fs-h4:      15px;
    --fs-h5:      15px;
    --fs-body:    14px;
    --fs-caption: 13px;
    --fs-link:    14px;
    --fs-btn:     16px;
  }
}

/* モバイル本文（--fs-body / --fs-link）は全幅で14pxに統一 */
@media (max-width: 575px) {
  :root {
    --fs-h2:      19px;
    --fs-h3:      16px;
    --fs-h4:      14px;
    --fs-h5:      14px;
  }
}

/* ========== Header ========== */
header.page-header {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  margin: 0;
  padding: 0;
  background: var(--color-white);
  border-bottom: 1px solid #eaeaea;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-black);
  text-align: left;
}

header.page-header *,
header.page-header *::before,
header.page-header *::after {
  box-sizing: border-box;
}

header.page-header ul,
header.page-header li {
  margin: 0;
  padding: 0;
  list-style: none;
}

header.page-header .navbar-wrap {
  position: relative;
  width: calc(100% - 30px);
  max-width: 1200px;
  margin: 0 auto;
}

header.page-header .navbar-ci {
  display: inline-block;
  width: 160px;
  margin: 0 40px 0 0;
}

header.page-header .navbar-ci img {
  width: 100%;
  vertical-align: middle;
}

header.page-header .menu_upper {
  display: inline-block;
}

header.page-header .dropbtn {
  position: relative;
  display: inline-block;
  background-color: var(--color-white);
}

header.page-header .dropbtn a,
header.page-header .language a {
  display: block;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-black);
  text-decoration: none;
  transition: all 0.2s ease-out;
}

header.page-header .dropbtn a {
  padding: 16px;
}

header.page-header .dropbtn:hover,
header.page-header .dropbtn:hover a {
  color: var(--color-white);
  background-color: var(--color-primary);
}

header.page-header .language {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  padding: 16px 8px;
  background-color: var(--color-white);
}

header.page-header .language li:first-child {
  margin-right: 10px;
}

header.page-header .language .active_bold a,
header.page-header .language:hover a,
header.page-header .language a:hover {
  color: var(--color-primary);
}

@media (max-width: 780px) {
  header.page-header .navbar-ci {
    min-width: 140px;
    margin: 16px 0;
  }

  header.page-header .menu_upper {
    width: 100%;
    line-height: 1;
    overflow-x: auto;
    white-space: nowrap;
  }

  header.page-header .menu_upper::-webkit-scrollbar {
    display: none;
  }

  header.page-header .dropbtn a {
    padding: 12px;
    line-height: 1;
  }

  header.page-header .dropbtn:hover,
  header.page-header .dropbtn:hover a {
    color: var(--color-primary);
    background-color: var(--color-white);
  }

  header.page-header .language li:first-child {
    margin-right: 16px;
  }
}

/* ========== Footer ========== */
footer.footer-advanced {
  display: block;
  margin: 0;
  padding: 0;
  background-color: #f5f6fa;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: normal;
  color: #828282;
  text-align: left;
}

footer.footer-advanced .container {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}

@media (min-width: 1200px) {
  footer.footer-advanced .container {
    max-width: 1200px;
  }
}

footer.footer-advanced .footer-advanced-layout {
  padding: 24px 0;
}

footer.footer-advanced ul,
footer.footer-advanced li {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.footer-advanced .rights {
  display: inline-block;
  width: 100%;
}

footer.footer-advanced a {
  color: inherit;
  text-decoration: none;
}

footer.footer-advanced .privacy {
  display: inline-block;
  font-size: 14.4px;
  text-align: left;
}

footer.footer-advanced .logo-wrap {
  display: flex;
  float: right;
}

footer.footer-advanced .logo-box {
  width: 52px;
  margin-left: 6px;
}

footer.footer-advanced .horizon-logo {
  width: 94px;
}

footer.footer-advanced .logo-box img {
  width: 100%;
  vertical-align: top;
}

footer.footer-advanced .copyright {
  display: block;
  margin: 1.55em 0;
  font-size: 9.6px;
}

@media screen and (max-width: 480px) {
  footer.footer-advanced .privacy {
    display: block;
    font-weight: 700;
    text-align: center;
  }

  footer.footer-advanced .logo-wrap {
    display: block;
    margin: 0 auto;
    padding-bottom: 40px;
    text-align: center;
  }

  footer.footer-advanced .logo-box {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
  }

  footer.footer-advanced .copyright {
    float: none;
    margin: 1em auto;
    padding: 0;
    text-align: center;
  }
}