@charset "UTF-8";
:root {
  --footer-height: 31.25rem;

  --space-0: 0;
  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 3rem;    /* 48px */
  --space-6: 4rem;    /* 64px */
  --space-7: 6rem;    /* 96px */
  --space-8: 8rem;    /* 128px */

}





/**************************************************
* 共通
***************************************************/
#container {
  background-attachment: fixed;
  background-size: cover;
}
@media (min-width: 600px) {
  #container {
    background-attachment: fixed;
  }
}


/*フッター位置調整*/
.l-wrapper {
  min-height: calc(100vh - var(--footer-height));
}


#l-container {
  margin: 0;
  padding: 0;
}
 
/* HDとコンテンツの被さりを調整 */
#contents {
  padding-top: 3.75rem;
}
@media screen and (min-width: 600px) {
  #contents {padding-top: 4.375rem;}
}
@media screen and (min-width: 1023px) {
  #contents {padding-top: 5rem;}
}






/* 上余白（section 間用） */
.l-mt-0 { margin-top: var(--space-0); }
.l-mt-1 { margin-top: var(--space-1); }
.l-mt-2 { margin-top: var(--space-2); }
.l-mt-3 { margin-top: var(--space-3); }
.l-mt-4 { margin-top: var(--space-4); }
.l-mt-5 { margin-top: var(--space-5); }
.l-mt-6 { margin-top: var(--space-6); }

/* 下余白 */
.l-mb-0 { margin-bottom: var(--space-0); }
.l-mb-1 { margin-bottom: var(--space-1); }
.l-mb-2 { margin-bottom: var(--space-2); }
.l-mb-3 { margin-bottom: var(--space-3); }
.l-mb-4 { margin-bottom: var(--space-4); }
.l-mb-5 { margin-bottom: var(--space-5); }
.l-mb-6 { margin-bottom: var(--space-6); }
.l-mb-7 { margin-bottom: var(--space-7); }
.l-mb-8 { margin-bottom: var(--space-8); }

/* padding（セクション内コンテンツ用） */
.l-pt-3 { padding-top: var(--space-3); }
.l-pb-3 { padding-bottom: var(--space-3); }
.l-pt-5 { padding-top: var(--space-5); }
.l-pb-5 { padding-bottom: var(--space-5); }
.l-pt-6 { padding-top: var(--space-6); }

/* gap */
.l-gap-0 { gap: var(--space-0); }
.l-gap-1 { gap: var(--space-1); }
.l-gap-2 { gap: var(--space-2); }
.l-gap-3 { gap: var(--space-3); }
.l-gap-4 { gap: var(--space-4); }
.l-gap-5 { gap: var(--space-5); }
.l-gap-6 { gap: var(--space-6); }

/* 画面幅毎に変更 */
.l-gap-3-4-5 {
  gap: var(--space-3);
}
.l-gap-2-3-3 {
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .l-mb-0--tb-pc {
    margin-bottom: 0;
  }
  .l-gap-3-4-5 {
    gap: var(--space-4);
  }
  .l-gap-2-3-3 {
    gap: var(--space-3);
  }
}
@media (min-width: 1023px) {
    .l-gap-3-4-5 {
    gap: var(--space-5);
  }
}

/**************************************************
* Layout: Section spacing
**************************************************/

/* 上下余白（基本セクション） */
.l-section {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
/* 上のみ余白 */
.l-section-pt {
  padding-top: var(--space-5);
  padding-bottom: 0;
}
/* 下のみ余白 */ 
.l-section-pb {
  padding-top: 0;
  padding-bottom: var(--space-5);
}



/* --- レスポンシブ調整 --- */
@media (min-width: 600px) {
  .l-section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .l-section-pt {
    padding-top: var(--space-6);
  }
  .l-section-pb {
    padding-bottom: var(--space-6);
  }
}

@media (min-width: 1023px) {
  .l-section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .l-section-pt {
    padding-top: var(--space-7);
  }
  .l-section-pb {
    padding-bottom: var(--space-7);
  }
}


/*--------------------------------------
  下層ページ共通 レイアウト
--------------------------------------*/
/* .l-pages{;} */



/* ==========================
   Wrap（横幅制御）
========================== */
.l-wrap,
.l-wrap-l,
.l-wrap-m,
.l-wrap-s,
.l-wrap-full {
  margin-inline: auto; /* 中央寄せ */
}

.l-wrap {
  width: 92%;
}
.l-wrap-l {
  width: min(92%, 87.5rem);
}
.l-wrap-m {
  width: min(92%, 75rem);
}
.l-wrap-s {
  width: min(92%, 56.25rem);
}
.l-wrap-full {
  width: 100%;
  max-width: none;
  padding-inline: 0; /* 必要なら余白ゼロ */
}



/*------------------------------
表示非表示 ※変更不可
------------------------------*/
.l-dp-block{  display: block;}

.l-sp {  display: block;}
.l-tb {  display: none;}
.l-pc {  display: none;}
.l-sp-tb {  display: block;}

/* ===== TB（600px〜）：横並び開始（2カラム） ===== */
@media screen and (min-width: 600px) {
.l-sp {  display: none;}
.l-tb {  display: block;}
}
/* ===== PC（1023px〜）：3カラム ===== */
@media (min-width: 1023px) {
.l-tb {  display: none;}
.l-pc {  display: block;}
.l-sp-tb {  display: none;}

}


/*--------------------------------------
  flex
--------------------------------------*/
.l-flex {
  display: flex;
  flex-wrap: wrap;
}
.l-flex--align-center {
  align-items: center;
}
.l-flex--row-reverse {
  flex-direction: row-reverse
}
.l-flex--direction-column {
  flex-direction: column;
}


/*--------------------------------------
  grid
--------------------------------------*/
.l-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch; /* 子要素の高さを揃える */
}
.l-grid--align-center {
  align-items: center;
}

/* 汎用：カード系のグリッド */

/* ===== TB（700px〜）：横並び開始（2カラム） ===== */
@media screen and (min-width: 600px) {


  /* SP:1列, TB,PC:2列 */
  .l-grid--1-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }
  /* SP:1列, TB,PC:3列 */
  .l-grid--1-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
  }

  /* 左右の位置を逆転 */
  .l-grid--reverse {
    grid-template-areas: "second first"; 
  }
  .l-grid--reverse > .first {
    grid-area: first;
  }
  .l-grid--reverse > .second {
    grid-area: second;
  }


}
/* ===== PC（1023px〜）：3カラム ===== */
@media (min-width: 1023px) {


}





/*------------------------------
ぱんくず ※変更不可
------------------------------*/

.l-breadcrumbs {
  padding-top: var(--space-2);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.l-breadcrumbs::-webkit-scrollbar {
  display: none;
}


.l-breadcrumbs li,
.l-breadcrumbs li a {
  font-size: var(--font-ss);
  font-weight: var(--weight-5);
}

.l-breadcrumbs li {
  display: inline;
}
.l-breadcrumbs li a:hover,
.l-breadcrumbs li a:active {
  transition: all 0.3s;
}

.l-breadcrumbs li a {
  display: inline-block;
  position: relative;
  padding-right: 1.5em;
}
.l-breadcrumbs li a:after {
  content: ">";
  vertical-align: middle;
  position: absolute;
  right: -0.375rem;
  width: 0.375rem;
  height: 0.375rem;
  margin: -.0625rem 1rem auto auto;
}


/**************************************************
* フッター
***************************************************/
.l-footer {
  padding-bottom: 3.75rem;
}
.l-footer-menu {
  color: var(--color--white01);
}
.l-footer-menu__main,
.l-footer-menu__sub {
  display: grid;
  gap: var(--space-2);
}

.l-footer-menu__main {
  border-bottom: 1px solid var(--color--white01);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.l-footer__copyright {
  padding: var(--space-1);
}

@media (min-width: 600px) {
  .l-footer-menu-wrap {
    gap: var(--space-4);
  }
  .l-footer-menu__main {
    grid-template-columns: repeat(2, 1fr) 
  }
}

@media (min-width: 1023px) {
  .l-footer {
    padding-bottom: 6.25rem;
  }

  .l-footer-menu__main,
  .l-footer-menu__sub {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    border-bottom: none;
    padding-bottom: 0;
  }
}


/**************************************************
* MV
***************************************************/
.l-mv {
  position: relative;
}
.l-mv h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.l-mv h1 span {
  display: block;
  color: var(--color--key);
  font-family: "Jost", sans-serif;
  font-size: var(--font-small);
  font-weight: var(--weight-4);
  margin-top: var(--space-1);
}






/**************************************************
* ふわっと
***************************************************/

.fade-in {
  opacity: 0;
  transform: translateY(1.875rem); /* 下からスライドイン */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}





/**************************************************
* WP job manager
***************************************************/
.job_listings .showing_jobs {
	display: none !important;
}