@charset "UTF-8";
/* ========== Document Setting ========== */
/* ========== Font Family ========== */
/* ========== Font Size ========== */
/* ========== Color ========== */
/* ======================================================================
メディア・コンテナークエリ
====================================================================== */
/* ======================================================================
アイコン
====================================================================== */
/* ---------- アイコン（右配置） ---------- */
/* ---------- アイコン（中央配置） ---------- */
/* ======================================================================
テキスト
====================================================================== */
/* ---------- テキスト設定（ショートハンド） ---------- */
/* ---------- 見出し（large） ---------- */
/* ---------- 見出し（mideum） ---------- */
/* ---------- 見出し（small） ---------- */
/* ---------- テキスト（semibold） ---------- */
/* ---------- テキスト（regular） ---------- */
/* ---------- ラベル（semibold） ---------- */
/* ---------- ラベル（regular） ---------- */
/* ---------- コピーライト ---------- */
/* ---------- リンク（テキスト） ---------- */
/* ---------- リンク（アンダーライン） ---------- */
/* ---------- リンク（ボタン） ---------- */
/* ---------- 読み上げ専用テキスト（スクリーンリーダー対応） ---------- */
/* ======================================================================
ユーティリティー
====================================================================== */
/* ---------- インナー（コンテンツ幅の制限あり） ---------- */
/* ---------- インナー（コンテンツ幅の制限なし） ---------- */
/* ---------- インナー（セクション幅） ---------- */
/* ======================================================================
ポジション
====================================================================== */
/* ---------- ポジション設定（ショートハンド） ---------- */
/* ==================================================================================================================================
header
================================================================================================================================== */
#header {
  position: sticky;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: clamp(80px, 76.479px + 0.939vw, 90px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 12.958px + 1.878vw, 40px);
  background-color: #FFFFFF;
  padding-inline: clamp(15px, 6.197px + 2.347vw, 40px);
  transition: all 0.3s;
  z-index: 10;
}
@media (max-width: 1079px) {
  #header {
    height: clamp(72px, 69.183px + 0.751vw, 80px);
  }
}
#header {
  /* ========== ヘッダーロゴ ========== */
}
#header #headerLogo {
  width: clamp(220px, 213.662px + 1.69vw, 238px);
}
@media (max-width: 1079px) {
  #header #headerLogo {
    width: 160px;
  }
}
#header {
  /* ========== ナビゲーション ========== */
}
#header #headerNav {
  margin-inline: auto 0;
  opacity: 1;
  transition: all 0.3s;
}
@media (max-width: 1079px) {
  #header #headerNav {
    display: none;
  }
}
#header #headerNav.js-on {
  visibility: hidden;
  opacity: 0;
}
#header #headerNav .nav-list {
  display: flex;
  align-items: center;
  list-style: none;
}
#header #headerNav .nav-link {
  text-decoration: none;
  text-align: left;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 13.648px + 0.094vw, 15px);
  font-weight: 500;
  color: #222222;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: clamp(10px, 6.479px + 0.939vw, 20px);
  transition: all 0.3s;
}
#header #headerNav .nav-link:hover {
  color: #1D5CA6;
}
#header {
  /* ========== メニューボタン ========== */
}
#header #headerMenuBtn {
  position: relative;
  display: inline-block;
  width: clamp(56px, 53.183px + 0.751vw, 64px);
  height: clamp(56px, 53.183px + 0.751vw, 64px);
  border: none;
  border-radius: 8px;
  background-color: #1D5CA6;
  z-index: 30;
  transition: all 0.3s;
}
#header #headerMenuBtn:hover {
  background-color: #2471CC;
}
#header #headerMenuBtn::before {
  margin-top: -5px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 32px;
  height: 34px;
  background-color: #FFFFFF;
  mask-image: url(../img/common/icon/icon-menu-open.svg);
  mask-size: 32px 34px;
  mask-position: center center;
  mask-repeat: no-repeat;
}
#header #headerMenuBtn.js-on::before {
  mask-image: url(../img/common/icon/icon-menu-close.svg);
}
#header #headerMenuBtn::after {
  content: "MENU";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-size: clamp(8px, 7.296px + 0.188vw, 10px);
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
#header {
  /* ========== メニュー ========== */
}
#header #headerMenu {
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background-color: #FFFFFF;
  transition: all 0.3s;
  z-index: -1;
}
#header #headerMenu.js-on {
  visibility: visible;
  transform: translateX(0);
  opacity: 1;
  overflow-y: scroll;
}
#header #headerMenu .menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 12.958px + 1.878vw, 40px);
  list-style: none;
  margin: 140px 18px;
}
#header #headerMenu a.menu-link {
  position: relative;
  text-decoration: none;
  text-align: left;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(14px, 13.648px + 0.094vw, 15px);
  font-weight: 500;
  color: #222222;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: color 0.2s;
  /* -- hover -- */
}
#header #headerMenu a.menu-link:hover {
  color: #1D5CA6;
}

/*# sourceMappingURL=global-header.css.map */