@charset "UTF-8";
/* 自動生成（_src/build_frame.py）。直接編集せず style.css を直して再生成する。
   /recruit/ 以下の移植ページで、旧CSSの後に読み込む新サイトのヘッダー・フッター */

/* ---------- 枠の土台 ---------- */
/* 旧 settings.css と変数名が同じため、トークンは :root に置かず枠の中だけで効かせる */
.m_skipLink,
.m_header,
.m_footer {
  /* design-locked: 値はAI版カンプ（dist/styles.css）の実測 */
  --color-main:       #b41467;
  --color-main-line:  #dda4bf;
  --color-text:       #20232a;
  --color-text-muted: #626973;
  --color-reverse:    #ffffff;
  --color-bk:         #fff3f8;
  --color-bk-sub:     #f4f7f8;
  --color-border:     #e1e4e8;

  --font-base: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en:   Arial, "Helvetica Neue", sans-serif;
  --font-num:  Georgia, "Times New Roman", serif;
  --fz-main:   16px;
  --lh-main:   1.9;

  --space-band:   75px;
  --space-bandSp: 48px;

  --shadow-card: 0 8px 24px rgba(32, 35, 42, 0.07);

  --transition: 0.2s;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fz-main);
  font-weight: 400;
  line-height: var(--lh-main);
}
/* style.css の要素セレクタ（a・img）は旧ページ本文にも効いてしまうため、枠の中に限って当て直す */
.m_header a,
.m_footer a {
  color: inherit;
  transition: color var(--transition);
}
.m_header a:hover,
.m_footer a:hover {
  color: var(--color-main);
}
.m_skipLink:focus-visible,
.m_header a:focus-visible,
.m_header button:focus-visible,
.m_footer a:focus-visible {
  outline: 3px solid var(--color-main);
  outline-offset: 5px;
}
/* 旧 recruit.css の a, button { cursor: revert } でボタンが矢印カーソルになるため */
.m_header button {
  cursor: pointer;
}
.m_header img {
  vertical-align: top;
}
/* !important は .m_gnav--entry .m_gnav__link の transition に詳細度で負けないため（style.css の全体指定と同じ方式） */
@media (prefers-reduced-motion: reduce) {
  .m_header a,
  .m_footer a {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- アンカー位置 ---------- */
/* sticky ヘッダーの下にアンカー先やスキップリンクの移動先が隠れないよう、style.css の html 指定をそのまま使う */
html {
  scroll-behavior: smooth;
  /* sticky ヘッダーの高さぶん、アンカー移動先が隠れないようにする */
  scroll-padding-top: 135px;
}
@media screen and (max-width: 768px) {
  html {
    scroll-padding-top: 220px;
  }
}
@media screen and (max-width: 599px) {
  html {
    scroll-padding-top: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- l_cont ---------- */
/* design-locked: カンプは画面幅に追従する流体幅。PC保護の min-width は持たせない */
.l_cont {
  margin-inline: auto;
  /* l_grid--gutterLg の負マージン（26px）が左右余白（24px）を越える幅で横スクロールを出さないため。clip はスクロールコンテナを作らず sticky を壊さない */
  overflow-x: clip;
}
.l_cont__inner {
  width: calc(100% - 48px);
  max-width: 1060px;
  margin-inline: auto;
}
@media screen and (max-width: 599px) {
  .l_cont__inner {
    width: calc(100% - 36px);
  }
}


.l_cont__inner--narrow790 {
  max-width: 790px;
}

/* ---------- m_skipLink ---------- */
.m_skipLink {
  position: absolute;
  top: 20px;
  left: -999px;
  z-index: 1000;
  background: var(--color-reverse);
}
.m_skipLink:focus {
  left: 20px;
}

/* ---------- m_header / m_headerLogo ---------- */
.m_header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-reverse);
  border-bottom: 1px solid var(--color-border);
}
.m_header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  min-height: 88px;
}
.m_header__logo {
  flex-shrink: 0;
}
.m_header__nav {}
.m_header__menuBtn {}
@media screen and (max-width: 768px) {
  .m_header__inner {
    padding-block: 18px;
  }
  .m_header__nav {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .m_header__inner {
    min-height: 75px;
  }
  .m_header__nav {
    display: none;
  }
  .m_header__nav.is_open {
    display: block;
  }
}

.m_headerLogo {}
.m_headerLogo__link {
  display: block;
}
.m_headerLogo__img {
  width: auto;
  height: 60px;
}
@media screen and (max-width: 599px) {
  .m_headerLogo__img {
    height: 48px;
  }
}

/* ---------- m_gnavList / m_gnav ---------- */
.m_gnavList {
  padding-block: 12px;
}
.m_gnavList__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
}
.m_gnavList__list + .m_gnavList__list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.m_gnavList__list--sub {
  gap: 20px;
  font-size: 13px;
}
.m_gnavList__item {}
/* エントリーボタンを足した採用系ページのメインナビ */
.m_gnavList__list--entry {}
@media screen and (max-width: 950px) {
  /* 項目が1つ多く、769〜800px でロゴの下へ、600〜635px で3段に折り返すため間隔を詰める */
  .m_gnavList__list--entry {
    gap: 10px;
  }
}
@media screen and (max-width: 768px) {
  .m_gnavList {
    padding-block: 0 6px;
  }
  .m_gnavList__list {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 599px) {
  .m_gnavList {
    padding-block: 10px;
  }
  /* SP の2列は l_grid__item の u_resSmCol6 が担う。% 幅と合算させないため gap を外す */
  .m_gnavList__list {
    justify-content: flex-start;
    gap: 0;
  }
  .m_gnavList__list--sub {
    font-size: 14px;
  }
}

.m_gnav {}
.m_gnav__link {
  display: block;
}
.m_gnav__link.is_current {
  color: var(--color-main);
}
.m_gnav--cta .m_gnav__link,
.m_gnav--entry .m_gnav__link {
  padding: 10px 18px;
  border: 1px solid var(--color-main);
}
.m_gnav--cta .m_gnav__link {
  color: var(--color-main);
}
/* 採用情報は常に主色の文字のため、現在地は is_current の文字色では区別できない。背景で示す */
.m_gnav--cta .m_gnav__link.is_current {
  background: var(--color-bk);
}
/* 採用系の移植ページだけに置く応募ボタン。採用情報（枠線）と区別するため塗りにする */
.m_gnav--entry .m_gnav__link {
  background: var(--color-main);
  color: var(--color-reverse);
  transition: background var(--transition), color var(--transition);
}
.m_gnav--entry .m_gnav__link:hover {
  background: var(--color-bk);
  color: var(--color-main);
}
/* 外部リンク。m_gnav--external の矢印は主色で塗りに埋もれるため、文字色を継ぐ矢印を別に持つ */
.m_gnav--entry .m_gnav__link::after {
  content: " ↗";
  content: " ↗" / "";
}
.m_gnav--external .m_gnav__link::after {
  content: " ↗";
  content: " ↗" / "";
  color: var(--color-main);
}
@media screen and (max-width: 599px) {
  .m_gnav__link {
    padding: 10px;
  }
  .m_gnav--cta .m_gnav__link,
  .m_gnav--entry .m_gnav__link {
    padding: 10px;
  }
}

/* ---------- m_menuBtn ---------- */
/* 開閉の状態（is_open・aria）は HamburgerMenu が付与する。文言の出し分けだけをここで持つ */
.m_menuBtn {
  display: none;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  background: var(--color-reverse);
  font-size: 13px;
}
.m_menuBtn__label {}
.m_menuBtn__label--close {
  display: none;
}
.m_menuBtn.is_open .m_menuBtn__label--open {
  display: none;
}
.m_menuBtn.is_open .m_menuBtn__label--close {
  display: inline;
}
@media screen and (max-width: 599px) {
  .m_menuBtn {
    display: block;
  }
}

/* ---------- m_footer / m_footerCompany / m_footerNav ---------- */
.m_footer {
  padding-block: 46px 24px;
  border-top: 1px solid var(--color-border);
}
/* 会社情報とリンク群という異種2領域の配置のため、l_grid ではなく内部 grid で持つ */
.m_footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.m_footer__company {}
.m_footer__nav {}
.m_footer__inner + .m_footer__copy {
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  .m_footer__inner {
    display: block;
  }
  .m_footer__company + .m_footer__nav {
    margin-top: 40px;
  }
}

.m_footerCompany {}
.m_footerCompany__name {
  font-weight: 700;
}
.m_footerCompany__address {
  color: var(--color-text-muted);
  font-size: 13px;
}
.m_footerCompany__name + .m_footerCompany__address {
  margin-top: 18px;
}

.m_footerNav {}
.m_footerNav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 23px;
  font-size: 14px;
}
.m_footerNav__item {}

.m_copyright {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* ---------- utility ---------- */
.u_srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 旧 recruit.css との衝突対策 ---------- */
/* follow-legacy: 旧 recruit.css は .l_grid に負マージン・.l_grid__item に余白・.u_resSmCol6 に 768px 以下の 50% 幅を持つ。
   ヘッダーの中に限って新サイトの値に戻す（本文の .l_grid には触れない） */
/* 2段目の上余白（.m_gnavList__list + .m_gnavList__list）は残すため、margin-top は1段目だけ戻す */
.m_header .l_grid {
  margin-inline: 0;
  margin-bottom: 0;
}
.m_header .l_grid:first-child {
  margin-top: 0;
}
.m_header .l_grid__item {
  padding: 0;
}
@media screen and (min-width: 600px) and (max-width: 768px) {
  .m_header .u_resSmCol6 {
    width: auto;
  }
}