@charset "UTF-8";
/* =========================================================
<header>タグのレイアウト
========================================================= */
/* 設定用 */
/* ヘッダ用 */
/* フッタ用 */
/* 選ばれる理由用 MDX追加 */
/* =========================================================
@extendされるパーツ
========================================================= */
/* clearfix
--------------------------------------------------------- */
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* border-box
--------------------------------------------------------- */
.isBorderBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.lightheader .u-spacer {
  height: 76px;
}
@media screen and (max-width: 1259px) {
  .lightheader .u-spacer {
    height: 76px;
  }
}
@media screen and (max-width: 767px) {
  .lightheader .u-spacer {
    height: 12.6666666667vw;
  }
}
@media screen and (max-width: 1259px) {
  .lightheader:has(.js-menuButton) .u-spacer {
    height: 80px;
  }
}
@media screen and (max-width: 767px) {
  .lightheader:has(.js-menuButton) .u-spacer {
    height: 12.6666666667vw;
  }
}
#js-fixedHeader .lightheader .u-spacer {
  height: 87px;
}
@media screen and (max-width: 1259px) {
  #js-fixedHeader .lightheader .u-spacer {
    height: 87px;
  }
}
@media screen and (max-width: 767px) {
  #js-fixedHeader .lightheader .u-spacer {
    height: 12.6666666667vw;
  }
}
.lightheader .identity {
  top: 24px;
}
.lightheader .identity .logo {
  width: 208px;
}
@media screen and (max-width: 767px) {
  .lightheader .identity .logo {
    width: 33.7333333333vw;
  }
}
.lightheader .utility {
  top: 12px;
}
@media screen and (max-width: 1259px) {
  .lightheader .utility {
    text-align: right;
    top: 0;
  }
}
@media screen and (max-width: 1259px) {
  .lightheader .above {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .lightheader .above {
    height: 12.6666666667vw;
  }
}
@media screen and (max-width: 1259px) {
  .lightheader .above:has(.js-menuButton) {
    padding-right: 93px;
  }
}
@media screen and (max-width: 767px) {
  .lightheader .above:has(.js-menuButton) {
    padding-right: calc(18px + 12vw);
  }
}
@media screen and (max-width: 1259px) {
  .lightheader .above:has(.js-menuButton) .identity .logo {
    width: 248px;
  }
}
@media screen and (max-width: 767px) {
  .lightheader .above:has(.js-menuButton) .identity .logo {
    width: 33.0666666667vw;
  }
}
@media screen and (max-width: 1259px) {
  .lightheader .above:has(.js-menuButton) .utility {
    text-align: left;
    top: 3px;
  }
}

#js-fixedHeader {
  height: auto;
}