@charset "utf-8";
@import url("https://unpkg.com/ress@4.0.0/dist/ress.min.css") layer(reset);
@layer reset, base, components, inheritance, utilities;
/* CSS Document */

@layer reset {
  li { list-style: none; }
  table { border-collapse: collapse; }
  summary::-webkit-details-marker { display: none; }
}

/*===============================

    base & layauto

================================*/
@layer base {
:root {
  --main_width: 1220px;/* トップページのコンテンツ幅 */
  --contents_width: 940px;/* 下層ページのコンテンツ幅 */
  --leading-trim: calc((1em - 1lh) / 2);/* 日本語 */
  --leading-trim_en: calc((1cap - 1lh) / 2);/* 英語 */
  --theme_main: #E5002D;
  --scrollbar-width: 15px;
  --headerHeight: 61px;
  --swiper-pagination-bullet-horizontal-gap: 8px;
  --swiper-pagination-bullet-size: 12px;
  --swiper-pagination-color: #333;
  --swiper-pagination-bullet-inactive-color: #ccc;
  --swiper-pagination-bullet-inactive-opacity: 1;
}

body {
  color: #000;
  font-family: YakuHanJPs, "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  /* font-size: 16px; */
  font-size: clamp(14px, 1.32vw, 16px);
  font-weight: 400;
  line-height: 1.5;
}

.l_wrapper {
  container: l_wrapper / inline-size;
  margin-inline: auto;
  max-width: var(--main_width);
  width: 100%;
  @media screen and (max-width: 1024px) {
    padding-inline: 16px;
  }
}

/* ********** ヘッダー */
.l_header {
  height: var(--headerHeight);
}
.l_header__wrapper {
  background-color: #fff;
  margin-inline: calc(50% - 50vw + var(--scrollbar-width) / 2);
  padding-block: 5px;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - var(--scrollbar-width));
  width: 100%;
  z-index: 9999;
  &:has(.is-active) { background-color: #fff; }
}
.l_header__contents {
  display: grid;
  grid-template-areas: "title navi";
  margin-inline: auto;
  max-width: var(--main_width);
  width: 100%;
  @container l_wrapper (max-width: 1024px) {
    grid-template-areas:
    "title"
    "navi";
    /* left: 0; */
  }
}

.l_header__logo {
  grid-area: title;
  place-content: center;
  @container l_wrapper (max-width: 1024px) {
    align-items: center;
    display: grid;
    grid-template-areas: "logo hamb";
    justify-content: space-between;
    padding-inline: 16px;
  }
}

.l_header__naviWrap {
  grid-area: navi;
  transition: opacity .3s;
  @container l_wrapper (max-width: 1024px) {
    display: none;
    height: 100dvh; /* 背景を画面全体にする */

    &.is-active {
      width: 100vw;
      height: calc(100dvh - 60px);
      background-color: #fff;
      z-index: 99999;
    }

    .l_header__navi {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}




.l_header__navi {
  display: grid;
  grid-template-areas: "list entry";
  place-items: center;
  place-content: flex-start space-between;
  @container l_wrapper (max-width: 1024px) {
    gap: 32px;
    grid-template-areas: 
    "entry"
    "list";
    grid-auto-columns: 1fr;
    grid-auto-rows: min-content;
    height: 100%;
    padding: 10px 16px;
    place-content: flex-start center;
  }
}



/* ********** メガメニュー */
.globalNaviBtm {
  position: absolute;
  top: 60px;
  left: 0;
  min-width: 100cqw;
  width: 100%;
}
.globalNaviBtm__ttl {
  flex: 0 0 200px;
}

@media (max-width: 1024px) {
  .globalNaviBtm {
    position: static;
    min-width: auto;
  }
}



/* ********** メインコンテンツ */
.l_mainContainer {
  &:not(:is(#top, #search, #singleCol) &) {
    display: grid;
    gap: 80px;
    grid-template-areas: "sideNavi main";
    grid-template-columns: 200px 1fr;
    @container l_wrapper (max-width: 1024px) {
      grid-template-areas: "main main";
    }
  }
}

.l_main {
  container: l_main / inline-size;
  grid-area: main;
  max-width: var(--main_width);
  width: 100%;
  &:not(:is(#top, #singleCol) &) {
    --main_width: var(--contents_width);
    margin-inline: auto;
    /* max-width: var(--contents_width); */
  }
}

/* ********** １カラムレイアウト（エントリー） */
.l_singleColumn {
  /* display: grid;
  flex-direction: column;
  gap: clamp(40px, 6.56cqw, 80px) 0;
  margin-block: 20vh; */
  /* .heading--singleColumn {
    .heading__title {
      font-size: clamp(35px, 4.1cqw, 50px);
      font-weight: bold;
      display: flex;
      flex-direction: column;
      place-items: center;
      place-content: center;
      span {
        text-transform: uppercase;
        font-size: 0.6em;
      }
    }
  } */
  /* .imageBox--2Dcode {
    img {
      margin: auto;
      width: 60%;
    }
  } */
}

/* ********** サイドナビ（下層のみ） */
.l_sideNavi {
  grid-area: sideNavi;
  height: min-content;
  width: 200px;
  &.is-fixed {
    position: fixed;
    top: var(--headerHeight);
  }
  @container l_wrapper (max-width: 1024px) { display: none; }
}

/* ********** フッター */
.l_footer {
  padding-bottom: 115px;
  @container l_wrapper (max-width: 1024px) {
    padding-bottom: 50px;
  }
  .l_footer__contents {
    background-color: #F5F5F5;
    margin-inline: calc(50% - 50vw + var(--scrollbar-width) / 2);
  }

  .l_footer__bottom {
    display: grid;
    grid-template-areas: 
    "navi marks"
    "copyright marks";
    padding: 24px 120px;
    @container l_wrapper (max-width: 1024px) {
      padding: 24px 0;
    }
    @container l_wrapper (max-width: 800px) {
      grid-template-areas: 
      "navi navi"
      "copyright marks";
      align-items: flex-end;
    }
    @container l_wrapper (max-width: 800px) {
      grid-template-areas: 
      "navi"
      "marks"
      "copyright";
      row-gap: 20px;
      place-items: center;
    }
  }
}

/* ********** ヒーローエリア（TOPのみ） */
.l_heroArea {
  align-items: center;
  aspect-ratio: 16 / 9;
  display: flex;
  max-height: 100vh;
  justify-content: center;
  margin-bottom: clamp(50px, 12.3cqw, 150px);
  overflow: hidden;
  margin-inline: calc(50% - 50vw + var(--scrollbar-width) / 2);
  position: relative;
  width: calc(100vw - var(--scrollbar-width));
  .heroVideo {
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 10;
    @media screen and (max-width: 599px) {
      position: static;
      transform: none;
    }
  }
  @media print { display: none; }
  @media screen and (min-width: 1470px) { max-height: calc(100vh - var(--headerHeight)); }
  @media screen and (max-width: 1220px) {
    margin-inline: auto;
    width: 100%;
  }
  @media screen and (max-width: 599px) {
    aspect-ratio: revert;
    flex-direction: column;
  }
}

/* ********** 下層_メインビジュアル（仮） */
.l_mainTitle {
  background-color: #ccc;
  display: grid;
  place-content: center;
  padding: 5.33cqw;
  h1 {
    font-size: clamp(18px, 2.62cqw, 32px);
    text-transform: uppercase;
  }
}

/* ********** セクション */
.l_section {
  container: l_section / inline-size;
  & + & { margin-top:clamp(70px, 12.29cqw, 150px); }
  &:last-of-type { margin-bottom:12.29cqw; }
}

.l_section--md {
  & + & { margin-top: clamp(40px, 10.64cqw, 100px); }
}
.l_section--sm {
  & + & { margin-top: 40px; }
  > **:not([class*="heading"]) + * { margin-top: 20px; }
}

.l_section__item {
  counter-reset: title-num; /* 働く環境を知るで使用 */
  & + & { margin-top: 20px; }
  > *:not([class*="heading"]) + * { margin-top: 20px; }
}

/* ********** グリッド（flex使用） */
.l_grid{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.l_grid__item{
  display: flex;
}
.l_grid__inner{
  display: block;
  width: 100%;
}
.l_grid--searchFilter{
  margin: -5px -10px;
  .l_grid__item{
    padding: 5px 10px;
  }
  @media screen and (max-width: 768px) {
    margin: -5px;
    .l_grid__item{
      padding: 5px;
    }
  }
}




/* ********** 各種パーツ_デフォルト */
:where(*) { text-wrap: pretty; }
a {
  color: #052674; 
  text-decoration: none;

  &:hover {
    color: #005580;
    text-decoration: underline;
  }
}

img {
  height: auto;
  max-width: 100%;
  &:only-child { display: block; }
}

dl {
  div:not(:first-child) { margin-top: 20px; }
  dt {
    font-size: clamp(16px, 1.64cqw, 20px);
    font-weight: bold;
    margin-bottom: min(0.82cqw, 10px);
  }
  dd { font-size: clamp(14px, 1.32cqw, 16px); }
  @container l_main (width <= 940px) {
    dt { font-size: clamp(16px, 2.13cqw, 20px); }
    dd { font-size: clamp(14px, 1.71cqw, 16px);; }
  }
}


/*
    メディアデザイン
================================*/
.media {
  display: grid;
  gap: clamp(10px, 1.64cqw, 20px);
  grid-template-areas: "mediaContents mediaImage";
  grid-template-columns: 1fr max-content;

  &.__rev {
    grid-template-areas: "mediaImage mediaContents";
    grid-template-columns: max-content 1fr;
    @container l_main (max-width: 560px) {
      grid-template-areas:
      "mediaImage"
      "mediaContents";
      grid-template-columns: auto;
    }
  }

  @container l_main (max-width: 560px) {
    grid-template-areas:
    "mediaImage"
    "mediaContents";
    grid-template-columns: auto;
  }

  /* titleあり */
  &:has(.media__title) {
    display: grid;
    gap: 10px clamp(10px, 1.64cqw, 20px);
    grid-template-areas: 
    "mediaTitle mediaImage"
    "mediaContents mediaImage";
    grid-template-columns: 1fr max-content;
    grid-auto-rows: minmax(1lh, max-content) auto;
  
    &.__rev {
      grid-template-areas: 
      "mediaImage mediaTitle"
      "mediaImage mediaContents";
      grid-template-columns: max-content 1fr;
      @container l_main (max-width: 560px) {
        grid-template-areas:
        "mediaTitle"
        "mediaImage"
        "mediaContents";
        grid-template-columns: auto;
      }
    }
  
    @container l_main (max-width: 560px) {
      grid-template-areas:
      "mediaTitle"
      "mediaImage"
      "mediaContents";
      grid-template-columns: auto;
    }
  }

  & + & { margin-top: 30px; }
}

.media__title {
  font-size: clamp(16px, 1.92cqw, 18px);
  font-weight: bold;
  grid-area: mediaTitle;
}

.media__image {
  grid-area: mediaImage;
  line-height: 0;

  @container l_main (max-width: 560px) {
    > img { margin-inline: auto; }
  }
}

.media__contents {
  grid-area: mediaContents;
  > * + * { margin-top: 20px; }
}

/* スクロールボックス */
.u_scrollBox {
  overflow: auto;
  @container l_main (max-width: 599px) {
    > * { max-width: var(--main_width); }
    img { max-width: none; }
  }
}

/* l_sectionより前に文章がある場合（イベント情報） */
.u_frontMessage {
  margin-bottom: 60px;
}

}/* layer base */

/*===============================

    components

================================*/
@layer components {
/*
    logo
================================*/
.headingLogo {
  grid-area: logo;
  .headingLogo__link {
    align-items: flex-end;
    color: #707070;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 10px;
    &:hover {
      text-decoration: none;
    }
  }
  .headingLogo__text {}
}

/*
    グローバルナビ
================================*/
.globalNavi {
  display: flex;
  font-size: 14px;
  gap: 20px;
  grid-area: list;
  .globalNavi__link {
    color: currentColor;
    display: block;
    letter-spacing: -.02em;
    transition: opacity .3s;
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
  }

  @container l_wrapper (max-width: 1024px) {
    font-size: 16px;
    flex-direction: column;
    width: 100%;
    gap: 0;
    .globalNavi__item {
      border-bottom: 1px solid var(--theme_main);
      padding: 24px 0;
    }
    .globalNavi__item:first-child {
      padding-top: 0;
    }
    .globalNavi__item:has(.globalNavi__link) {
        padding: 0;
      }
    .globalNavi__link {
      padding: 24px 0;
    }
  }
}

.globalNavi__ttl {
  cursor: pointer;
}

/* ********** エントリーボタン */
.headerLink {
  display: flex;
  gap: 5px;
  grid-area: entry;
  height: 100%;

  .headerLink__item {
    display: grid;
    height: 100%;
  }
  .headerLink__link {
    background-color: var(--theme_main);
    color: #fff;
    display: grid;
    font-size: 14px;
    height: 100%;
    padding: 15px 10px;
    place-content: center;
    transition: opacity .3s;
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
  }
}

/* ********** ハンバーガーメニュー */
.hambMenu {
  align-items: center;
  background-color: var(--theme_main);
  display: flex;
  flex-wrap: wrap;
  grid-area: hamb;
  height: 50px;
  justify-content: center;
  margin-left: auto;
  place-content: center;
  width: 50px;

  .hambMenu__body {
    height: 16px;
    position: relative;
    width: 18px;
  }
  .hambMenu__item {
    background-color: #fff;
    display: block;
    height: 2px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: rotate(0);
    transition: transform .2s, top .2s, bottom .2s;
    width: inherit;
    &.__top {
      bottom: auto;
    }
    &.__mid {}
    &.__btm {
      top:  auto;
    }
  }

  &.is-open {
    .hambMenu__item {
      &.__top {
        bottom: 0;
        transform: rotate(-45deg);
      }
      &.__mid { opacity: 0; }
      &.__btm {
        top: 0;
        transform: rotate(45deg);
      }
    }
  }
  @container l_wrapper (min-width: 1025px) {
    display: none;
  }
}

/* ********** メガメニュー */
.l_header__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  -o-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.l_header__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}
.globalNaviBtm {
  background-color: #fff;
}
.globalNaviBtm__inr {
  display: flex;
  gap: 40px;
  padding: 24px 72px 32px;
  max-width: var(--main_width);
  margin-left: auto;
  margin-right: auto;
}
.globalNaviBtm__ttl {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.57;
}
.globalNaviBtm__ttl_en {
  font-size: 13px;
  line-height: 1.57;
  text-transform: uppercase;
}
.globalNaviBtm__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 8px 40px;
}
.globalNaviBtm__list--lg {
  grid-template-rows: repeat(4, auto);
}
.globalNaviBtm__item {
  width: 280px;
}
.globalNaviBtm__item a {
  position: relative;
  display: block;
  width: 100%;
  color: #000;
  transition: .3s;
}
.globalNaviBtm__item_txt {
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 1.57;
  width: 100%;
  padding-right: 32px;
}
.globalNaviBtm__item_txt::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 18px;
  height: auto;
  aspect-ratio: 1/1;
  background-image: url(/resource/img/recruit/recruit2025/icon_localNavi.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: .3s;
}
.js_acd_trg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}
.js_acd.js_open .js_acd_trg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (any-hover:hover) {
  .globalNaviBtm__item a:hover {
    text-decoration: none;
    opacity: 0.7;
  }
  .globalNaviBtm__item a:hover::after {
    opacity: 0.7;
  }
}
@media (max-width:1024px) {
  .l_header__overlay {
    display: none;
  }
  .globalNavi__ttl {
    position: relative;
  }
  .globalNavi__ttl::before,
  .globalNavi__ttl::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    background-color: #000;
    transition: all 0.3s linear;
    border-radius: 3px;
    z-index: 1;
  }
  .globalNavi__ttl::before {
    width: 12px;
    height: 2px;
    right: 0;
    margin: auto;
  }
  .globalNavi__ttl::after {
    width: 2px;
    height: 12px;
    right: 5px;
    margin: auto; 
  }
  .globalNavi__item.js_acd.js_open .globalNavi__ttl::before {
    display: none;
  }
  .globalNavi__item.js_acd.js_open .globalNavi__ttl::after {
    transform: rotate(90deg) translateY(0px);
  }
  .globalNaviBtm__inr {
    padding: 0 16px;
    margin-top: 16px;
  }
  .globalNaviBtm__ttl {
    display: none;
  }
  .globalNaviBtm__list,
  .globalNaviBtm__list--lg {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    width: 100%;
  }
  .globalNaviBtm__item {
    width: 100%;
  }
  .js_acd_trg {
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .js_acd a:focus,
  .js_acd a:active {
    outline: none;       /* ブラウザのフォーカス枠を消す */
    text-decoration: none; /* 下線を消す */
  }
}


/*
    ローカルナビ
================================*/
.localNaviContainer {
  display: flex;
  gap: 15px;
  height: fit-content;
  margin-top: 25px;
  .localNaviContainer__title {
    border-right: 1px solid #000;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    padding-right: 10px;
  }
  * { margin: 0; }
  @container l_main (max-width: 610px) {
    flex-direction: column;
    .localNaviContainer__title {
      border-right: none;
      border-bottom: 1px solid #000;
    }
  }
}

.localNavi {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 35px;
  .localNavi__item {}
  .localNavi__link {
    align-items: center;
    display: flex;
    color: currentColor;
    font-size: 14px;
    font-weight: bold;
    gap: 5px;
    transition: opacity .3s;
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
    &::after {
      background-color: #000;
      content: "";
      display: block;
      flex-shrink: 0;
      height: 20px;
      margin-left: auto;
      mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      width: 20px;
    }
  }

  @container l_main (max-width: 600px) {
    width: 100%;
    .localNavi__item { width: 45% }
  }
}


/*
    サイドナビ（下層のみ）
================================*/
.sideFixedNavi {
  border-left: 4px solid var(--theme_main);
  padding-left: 15px;
  li {
    color: #999;
    font-size: 16px;
    :is(&.is-current, &:hover) {
      align-items: center;
      color: #000;
      display: flex;
      font-weight: bold;
      &::before {
        border-top: 3px solid var(--theme_main);
        border-right: 3px solid var(--theme_main);
        content: "";
        display: block;
        flex-shrink: 0;
        height: .8em;
        margin-right: 0.5em;
        transform: rotate(45deg);
        width: .8em;
      }
    }
    & + & { margin-top: 16px; }
  }
  a {
    color: currentColor;
    &:hover {
      text-decoration: none;
    }
  }
}


  /*
    ぱんくずリスト
================================*/
.breadcrumbList {
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  color: #666;
  display: flex;
  font-size: 14px;
  margin-block-end: 40px;
  padding-block: 10px;
  > .breadcrumbList__item:not(:first-of-type) {
    padding-left: 25px;
    position: relative;
    &::before {
      border-top: 1px solid #666;
      border-right: 1px solid #666;
      content: "";
      display: block;
      height: calc(14px / sqrt(2));
      position: absolute;
      top: 50%;
      left: 0;
      transform: rotate(45deg) translateY(-50%);
      width: calc(14px / sqrt(2));
    }
  }
}


/*
    スライダー（swiper）
================================*/
.swiper-pagination-bullet { border: 1px solid #999; }


  /*
    見出し
================================*/
.heading {}
.heading--primary {
  margin-bottom: 20px;
  .heading__title {
    border-bottom: 2px solid var(--theme_main);
    font-size: clamp(16px, 1.96cqw, 24px);
    /* font-size: 24px; */
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    width: fit-content;
  }
  .heading__catchCopy {
    font-family: "Zen Old Mincho", serif;
    font-size: clamp(30px, 3.6cqw, 44px);
    /* font-size: 44px; */
    font-weight: 400;
    font-style: normal;
    letter-spacing: -.02em;
    img + & {
      display: inline-block;
      margin-top: 20px;
    }
  }
}
.heading--secondary {
  margin-bottom: 15px;
  .heading__title {
    font-size: clamp(16px, 1.96cqw, 24px);
    font-weight: bold;
  }
}
.heading--tertiary:has(.heading__title.job_ttl) {
  margin-bottom: 32px;
  .heading__title.job_ttl {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.44px;
  }
}
.media .heading--tertiary:has(.heading__title.job_ttl) {
  margin-bottom: 0;
}

@media (max-width:600px) {
  .heading--tertiary:has(.heading__title.job_ttl) {
    margin-bottom: 32px;
    .heading__title.job_ttl {
      font-size: 20px;
      letter-spacing: 0.4px;
    }
  }
}

/* 地の文の同じ（働くを環境を知る_福利厚生） */
.heading--tertiary {
  margin-bottom: 10px;
  .heading__title {
    font-size: 16px;
    font-weight: normal;
  }
}

.heading--align_center {
  display: grid;
  margin-bottom: 30px;
  place-content: center;
  .heading__title {
    /* border-bottom: 1px solid #000; */
    font-size: clamp(16px, 1.96cqw, 24px);
    padding-inline: 1em;
  }
}

/* 新卒採用エントリー */
.entry_page .heading--primary {
  .heading__title {
    font-size: 18px;
  }
}
.entry_page .heading--secondary {
  margin-bottom: 16px;
  .heading__title {
    position: relative;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.57;
    letter-spacing: 0.44px;
    padding-left: 12px;
  }
  .heading__title::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: "";
    width: 4px;
    height: 24px;
    background-color: var(--theme_main);
  }
}



  /*
    グリッド
================================*/
.grid {
  display: grid;
  > * { margin: 0; }
  img[class^="grid__item"] {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}


/********** トップページ **********/
.grid--concept {
  gap: 20px;
  grid-template-areas: 
  "image1 "
  "text";
  .grid__item1 { grid-area: text; }
  .grid__item2 {
    filter: contrast(1.1);
    grid-area: image1;
  }
  .grid__item3 { grid-area: image2; }
  .grid__item4 { grid-area: image3; }

  @container l_main (max-width:1024px) {
    /* grid-template-areas: 
    "image1 image1 image1 image1"
    "text   text   text   text"
    "image2 image2 image3 image3"; */
  }
}

.grid--aboutUs {
  gap: 5px;
  grid-template-areas: 
  "image1 image1 image2 image3"
  "image1 image1 image4 image5"
  "image6 image7 image8 image9";
  .grid__item1 { grid-area: image4; }
  .grid__item2 { grid-area: image2; }
  .grid__item3 { grid-area: image1; }
  .grid__item4 { grid-area: image7; }
  .grid__item5 { grid-area: image9; }
  .grid__item6 { grid-area: image8; }
  .grid__item7 { grid-area: image5; }
  .grid__item8 { grid-area: image6; }
  .grid__item9 { grid-area: image3; }
}

.grid--business {
  gap: 30px;
  /* gap: clamp(10px, 2.45cqw, 30px); */
  grid-template-columns: repeat(2, 1fr);

  @container l_main (max-width: 920px) {
    grid-template-columns: 1fr;
  }
  .grid__item3 {
    container: service_it / inline-size;
  }
  /* grid-template-areas: 
  "service1 service2"
  "service3 service4";
  .grid__item1 { grid-area: service1; }
  .grid__item2 { grid-area: service2; }
  .grid__item3 { grid-area: service3; }
  .grid__item4 { grid-area: service4; } */
}

.grid--member {
  gap: 20px 0;
  grid-template-areas: 
  "area1 area2 area3 area4 area5 area6"
  "area1 area7 area8 area9 area10 area11";
  .grid__item1 { grid-area: area1; }
  .grid__item2 { grid-area: area2; }
  .grid__item3 { grid-area: area3; }
  .grid__item4 { grid-area: area4; }
  .grid__item5 { grid-area: area5; }
  .grid__item6 { grid-area: area6; }
  .grid__item7 { grid-area: area7; }
  .grid__item8 { grid-area: area8; }
  .grid__item9 { grid-area: area9; }
  .grid__item10 { grid-area: area10; }
  .grid__item11 { grid-area: area11; }
  .grid__item12 {
    /* grid-area: 2 / 2 / 4 / 4; */
    /* margin-top: -1lh; */
  }

  @container l_main (max-width: 890px) {
    grid-template-areas: 
    "area1 area1 area1 area1 area1"
    "area2 area3 area4 area5 area6"
    "area7 area8 area9 area10 area11";
    /* .grid__item12 { grid-area: 3 / 1 / 3 / 2; } */
  }
  @container l_main (max-width: 777px) {
    grid-template-areas: 
    "area1 area1 area1 area1 area1 area1"
    "area2 area2 area3 area3 area4 area4"
    "area5 area5 area5 area6 area6 area6"
    "area7 area7 area7 area8 area8 area8"
    "area9 area9 area10 area10 area11 area11";
    /* .grid__item12 { grid-area: 4 / 1 / 4 / 2; } */
  }
}

.grid--topMessage {
  gap: 20px;
  grid-auto-columns: 1fr;
  grid-template-areas: 
  "text image"
  "list image";
  .grid__item1 { grid-area: text; }
  .grid__item2 {
    grid-area: image;
    place-items: center;
  }
  .grid__item3 {
    align-self: flex-end;
    grid-area: list;
  }
  @container l_main (max-width: 860px) {
    grid-template-areas: 
    "text"
    "image"
    "list";
  }
}

/********** インソースを知る **********/
.grid--companyInfo {
  gap: 30px 20px;
  grid-template-areas: 
  "table photo"
  "list list";
  grid-template-columns: 1fr auto;
  .grid__item1 { grid-area: table; }
  .grid__item2 {
    grid-area: photo;
    margin: 0 auto;
  }
  .grid__item3 {
    border-top: 1px solid #DCDCDC;
    grid-area: list;
    padding-top: 20px;
  }

  @container l_main (max-width: 899px) {
    grid-template-areas: 
    "photo"
    "table "
    "list";
    grid-template-columns: 1fr;
    }
}
.grid--affiliatedCompany {
  gap: clamp(20px, 0.41cqw, 60px) clamp(10px, 4.56cqw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  @container (max-width: 375px) { grid-template-columns: repeat(2, 1fr); }
}

.grid--location {
  gap: clamp(20px, 4.26cqw, 40px);
  grid-template-areas: 
  "map   area1"
  "area2 area2"
  "area3 area3"
  "room  note";
  grid-auto-columns: 1fr;
  .grid__item1 { grid-area: map; }
  .grid__item2 { grid-area: area1; }
  .grid__item3 { grid-area: area2; }
  .grid__item4 { grid-area: area3; }
  .grid__item5 { grid-area: room; }
  .grid__item6 {
    display: flex;
    grid-area: note;
    justify-content: flex-end;
    > * { color: #666; }
  }

  @container l_main (max-width: 835px) {
    grid-template-areas: 
    "map"
    "area1"
    "area2"
    "area3"
    "room"
    "note";
  }
}



.grid__container {
  > *:not(:first-child) { margin-top: 20px; }
}

/*
    リスト
================================*/
.list {}
.list__item {}
.list__link {
  color: #052674;
  text-decoration: none;

  &:hover {
    color: #005580;
    text-decoration: underline;
  }
}

/* 横並び */
.list--horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;

  > :is(li, .list__item) {
    width: fit-content;
  }
}

/* アスタリスク */
.list--ast {
  font-size: 0.85em;

  > :is(li, .list__item) {
    padding-left: 1em;
    position: relative;
    text-indent: 0;/* 入れ子時の対応 */
    
    &::before {
      content: "\203B";/* ※ */
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  > :is(li + li, .list__item + .list__item) {
    margin-top: 5px;
  }
}

/* 箇条書き */
.list--bullet {
  > :is(li, .list__item) {
    padding-left: 1em;
    position: relative;
    text-indent: 0;/* 入れ子時の対応 */

    &::before {
      content: "\30FB";/* ・（中黒） */
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

/* 数字（全角＋．） */
.list--num {
  > :is(li, .list__item) {
    text-indent: -2em;
    padding-left: 2em;
  }
  > :is(li, .list__item):nth-of-type(n+10){
    text-indent: -2.1em;
    padding-left: 2.1em;
  }
}

/* 数字（１）（２） */
.list--bracketNum {
  > :is(li, .list__item) {
    text-indent: -3em;
    padding-left: 3em;
  }
}

/* チェックマーク */
.list--check {
  > :is(li, .list__item) {
    padding-left: 1.3em;
    position: relative;
    text-indent: 0;/* 入れ子時の対応 */

    &::before {
      border-left: 3px solid red;
      border-bottom: 3px solid red;
      content: "";
      height: .5em;
      position: absolute;
      top: .5em;
      left: 0;
      transform: rotate(-45deg);
      width: 1em;
    }

    &.__theme_main {
      &::before {
        border-left-color: var(--theme_main);
        border-bottom-color: var(--theme_main);
      }
    }
    &.__theme_sub {
      &::before {
        border-left-color: var(--theme_sub);
        border-bottom-color: var(--theme_sub);
      }
    }
    &.__theme_accent {
      &::before {
        border-left-color: var(--theme_accent);
        border-bottom-color: var(--theme_accent);
      }
    }
  }
}

/* 矢印▶（右向き） */
.list--arrow {
  > :is(li, .list__item) {
    padding-left: 1em;
    position: relative;
    text-indent: 0;/* 入れ子時の対応 */

    &::before {
      border: 5px solid transparent;
      border-right: 0;
      border-left: 10px solid currentColor;
      content: "";
      display: block;
      height: 0;
      position: absolute;
      top: .5em;
      left: 0;
      width: 0;
    }
  }

  &.__theme_main {
    > :is(li, .list__item) {
      &::before { border-left-color: var(--theme_main); }
    }
  }
  &.__theme_sub {
    > :is(li, .list__item) {
      &::before { border-left-color: var(--theme_sub); }
    }
  }
  &.__theme_accent {
    > :is(li, .list__item) {
      &::before { border-left-color: var(--theme_accent); }
    }
  }

  /* 下向き */
  &.__bottom {
    > :is(li, .list__item)::before { transform: rotate(90deg); }
  }
}

/* ■、①など */
.list--hasMark {
  > :is(li, .list__item):not(:has(a)) {
    padding-left: 1em;
    text-indent: -1em;
  }

  .list__link {
    display: inline-block;
    padding-left: 1em;
    text-indent: -1em;
  }
}


/*
    リンク
================================*/
.linkWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-block: 20px;

  &:last-child { margin-block-end: 0; }
}

.linkWrapper--align_left { justify-content: flex-start; }
.linkWrapper--align_center { justify-content: center; }
.linkWrapper--align_right { justify-content: flex-end; }

.link--hasIco {
  align-items: flex-end;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
  &::after {
    background-color: currentColor;
    content: "";
    display: block;
    height: 1em;
    margin-left: 5px;
    margin-bottom: calc(-1 * var(--leading-trim));
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
    width: 1em;
  }
  &.__newTab::after {
    mask-image: url("/resource/img/recruit/recruit2025/icon_newTab.svg");
  }
  &.__circleArw {
    align-items: center;
    padding: 10px;
    &::after {
      margin-bottom: 0;
      mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
    }
  }
}

/* ページ内リンクテキスト（矢印アイコン） */
.linkText {
  width: fit-content;
}
.linkText a {
  position: relative;
  display: block;
  width: fit-content;
  padding-right: 34px;
  transition: .3s;
  color: #000;
}
.linkText a::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 18px;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #000;
  mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

@media (any-hover:hover) {
  .linkText a:hover,
  .linkText a:hover::after {
    text-decoration: none;
    opacity: 0.7;
  }
}

/* 画像 */
.link--banner {
  background-color: var(--theme_main);
  color: #fff;
  font-size: clamp(14px, 2.13cqw, 20px);
  font-weight: bold;
  transition: opacity .3s;
  &:hover {
    opacity: .7;
    text-decoration: none;
  }
}

/*
    画像
================================*/
.imageBox {
  margin-block: 40px;
  &:first-child { margin-block-start: 0; }
  &:last-child { margin-block-end: 0; }
  &.__narrow {
    padding-inline: 20%;
  }
  &.__align-center {
    display: grid;
    place-content: center;
  }

  @container l_main (max-width: 599px) {
    margin-inline: auto;
      &.__narrow {
        padding-inline: 0;
      }
    }
}

/********** 動画 **********/
.videoBox {
  &:first-of-type { margin-bottom: 40px; }
}
.videoBox__inner {
  aspect-ratio: 16 / 9;
  iframe {
      width: 100%;
      height: 100%;
  }
}


/*
    news
================================*/
.newsBox {
  background-color: rgba(255, 255, 255, .8);
  max-height: 125px;
  padding: 20px 25px;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 20;
  .newsBox__inner {
    display: grid;
    gap: 40px;
    grid-template-columns: auto 1fr;
  }
  .newsBox__title {
    color: var(--theme_main);
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
  }
  .newsBox__contents {}
  .newsList {
    max-height: 85px;
    overflow: auto;
    .newsList__item {
      color: #666;
      display: grid; 
      gap: 30px;
      grid-template-columns: auto 1fr;
      &:not(:first-of-type){ margin-top: 8px; }
    }
  }
  @media screen and (max-width: 820px) { width: 80%; }
  @media screen and (max-width: 599px) {
    position: static;
    transform: none;
    width: 100%;
  }
}

/*
    事業を知る
================================*/
.l_section__item:has(.featureCard) { margin-top: 40px; }
.featureCard {
  --theme_haken: #D1151B;
  --theme_bup: #0382c0;
  --theme_it: #20B090;
  --theme_other: #DC6A18;
  --borderStyle: 2px solid var(--theme_service);
  --border_radius: 5px;
  --position: 0;
  --width: 12%;
  position: relative;

  &.__haken { --theme_service: var(--theme_haken); }
  &.__bup { --theme_service: var(--theme_bup); }
  &.__it { --theme_service: var(--theme_it); }
  &.__other { --theme_service: var(--theme_other); }

  /* &::before,
  &::after {
    aspect-ratio: 1;
    border-top: var(--borderStyle);
    content: "";
    display: block;
    position: absolute;
    top: var(--position);
    width: var(--width);
  }
  &::before {
    border-left: var(--borderStyle);
    border-top-left-radius: var(--border_radius);
    left: var(--position);
  }
  &::after {
    border-right: var(--borderStyle);
    border-top-right-radius: var(--border_radius);
    right: var(--position);
  } */
}

.featureCard__inner {
  display: grid;
  gap: 30px;
  gap: clamp(15px, 2.46cqw, 30px);
  grid-template-areas: "logo contents";
  grid-template-columns: 150px 1fr;
  grid-auto-rows: minmax(320px, auto);
  /* padding: 20px; */
  /* padding: clamp(15px, 1.63cqw, 20px); */

  /* &::before,
  &::after {
    aspect-ratio: 1;
    border-bottom: var(--borderStyle);
    content: "";
    display: block;
    position: absolute;
    bottom: var(--position);
    width: var(--width);
  }
  &::before {
    border-left: var(--borderStyle);
    border-bottom-left-radius: var(--border_radius);
    left: var(--position);
  }
  &::after {
    border-right: var(--borderStyle);
    border-bottom-right-radius: var(--border_radius);
    right: var(--position);
  } */
  @container l_main (max-width: 500px) {
    grid-template-areas: 
    "logo"
    "contents";
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    .featureCard__logo {
      align-items: flex-end;
      border-right: none;
      border-top: 1px solid var(--theme_service);
      display: flex;
      padding: 15px 0 0 0;
      place-content: center;
    }
  }
}

.featureCard__logo {
  align-content: center;
  border-right: 1px solid var(--theme_service);
  display: grid;
  gap: 20px;
  grid-area: logo;
  place-items: center;
  padding-right: 10px;
}

.featureCard__content { grid-area: contents; }
.featureCard__title {
  color: var(--theme_service);
  font-size: clamp(16px, 1.96vw, 24px);
  margin-bottom: 10px;
}
.featureCard__catchcopy {
  margin-bottom: 20px;
  position: relative;
  /* &::before {
    background-color: var(--theme_service);
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    bottom: -10px;
    width: 15%;
  } */
}

.featureCard__detail {
  padding-left: calc(1em + 5px);
  position: relative;
  >:first-child { font-weight: bold; }
  & + & { margin-top: 10px; }
  > * + * { margin-top: 10px; }
  &::before {
    background-color: var(--theme_service);
    content: "";
    display: block;
    height: 1em;
    position: absolute;
    top: calc(-1 * var(--leading-trim));
    left: 0;
    width: 1em;
  }
}

/* ITサービス実績部分 */
.featureCard__parts {
  display: grid;
  font-size: 14px;
  gap: 5px 15px;
  grid-template-columns: auto auto 1fr auto;
  :is(p:first-of-type, p:nth-of-type(3)) { text-align: right; }
  p:nth-of-type(2) {
    display: grid;
    justify-content: center;
  }
  p:last-child {
    align-self: flex-end;
    font-size: 12px;
  }
  @container l_main (max-width: 920px) {
    width: fit-content;
  }
  @container service_it (max-width: 590px) {
    grid-template-columns: repeat(3, auto);
    margin-left: auto;
    p:last-child {
      grid-area: 2 / 4 / 3 / 3;
      justify-self: flex-end;
    }
    }
}


/*-------------------------------

  仕事・社員を知る

-------------------------------*/
.personnelComposition {
}

.personnelComposition__item {
  display: grid;
  place-content: flex-end center;
  place-items: center;
  &:first-of-type {
    place-content: center;
    border-right: 3px dashed #ccc;
    span:first-of-type {
      color: var(--theme_main);
      font-size: 60px;
      /* font-size: clamp(30px, 4.92cqw, 60px); */
    }
    /* span:last-of-type { font-size: 18px; } */
    @container l_main (max-width: 890px) {
      border-right: none;
      border-bottom: 3px dashed #ccc;
    }
  }
  @container l_main (max-width: 890px) {
    &:not(:first-of-type) {
      border-right: 1px solid #ccc;
      border-left: 1px solid #ccc;
      margin-left: -1px;
    }
  }
}

.personnelComposition__title {}
.personnelComposition__num {
  font-size: 30px;
  font-size: clamp(21px, 2.46cqw, 30px);
  span:last-of-type { font-size: .6em; }
}

/* ********** インタビュー一覧 */
.interviewContainer { container: interviewContainer / inline-size; }
.interviewList {
  display: grid;
  height: 57.063cqw;
  gap: 2px;
  grid-template-areas:
  "interview_item01 interview_item02 interview_item03" 
  "interview_item04 interview_item05 interview_item06";
  grid-template-columns: 32.5cqw 44.625cqw 22.625cqw;
  grid-template-rows: 31.625cqw 25.313cqw;
  @container interviewContainer (max-width: 610px) {
    grid-template-areas: 
    "interview_item01"
    "interview_item02"
    "interview_item03"
    "interview_item04"
    "interview_item05"
    "interview_item06";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
}
.interviewList__item {
  background-size: cover;
  overflow: hidden;
  position: relative;
  &::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 100%;
    z-index: -1;
  }
  &:hover::after {
    transform: scale(1.1);
  }
  &.__grid1 {
    aspect-ratio: 518 / 504;
    /* background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-nu_3_tile.jpg"); */
    grid-area: interview_item01;
    &::after {
      background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-nu_3_tile.jpg");
    }
    @container (max-width: 610px){ background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-nu_3.jpg"); }
  }
  &.__grid2 {
    aspect-ratio: 713 / 404;
    /* background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_dx-ak_1_tile.jpg"); */
    grid-area: interview_item02;
    &::after {
      background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_dx-ak_1_tile.jpg");
    }
    @container (max-width: 610px){ background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_dx-ak_1.jpg"); }
  }
  &.__grid3 {
    aspect-ratio: 361 / 403;
    /* background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_creator-mk_2_tile.jpg"); */
    grid-area: interview_item03;
    &::after {
      background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_creator-mk_2_tile.jpg");
    }
    @container (max-width: 610px){ background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_creator-mk_2.jpg"); }
  }
  &.__grid4 {
    aspect-ratio: 518 / 405;
    /* background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-st_2_tile.jpg"); */
    grid-area: interview_item04;
    &::after {
      background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-st_2_tile.jpg");
    }
    @container (max-width: 610px){ background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_sales-st_2.jpg"); }
  }
  &.__grid5 {
    aspect-ratio: 458 / 507;
    /* background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_mad-so_3_tile.jpg"); */
    grid-area: interview_item05;
    height: 31.688cqw;
    margin-top: -6.375cqw;
    width: 28.688cqw;
    &::after{
      background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_mad-so_3_tile.jpg");
    }
    @container (max-width: 610px){ background-image: url("https://www.insource.co.jp/resource/img/recruit/interview/__ins__interview_mad-so_3.jpg"); }
  }
  &.__grid6 {
    aspect-ratio: 616 / 507;
    grid-area: interview_item06;
    height: 31.688cqw;
    margin-top: -6.375cqw;
    margin-left: -15.937cqw;
    width: 38.563cqw;
    &::after {
      background-image: url("/resource/img/recruit/interview/__ins__interview_dx-mi_1.jpg");
    }
    @container (max-width: 610px){ background-image: url("/resource/img/recruit/interview/__ins__interview_dx-mi_1.jpg"); }
  }
  @container interviewContainer (max-width: 610px) {
    &[class*="__grid"] {
      aspect-ratio: 750 / 240;
      height: auto;
      margin: 0;
      width: auto;
    }
  }

}
.interviewList__body {
  height: 100%;
  width: 100%;
}

.interviewList__link {
  align-items: flex-start;
  /* background-color: rgba(0, 0, 0, .4); */
  background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.821cqw;
  height: 100%;
  justify-content: flex-end;
  padding: 2.341cqw 1.041cqw;
  transition: background-color .3s;
  width: 100%;
  &:hover {
    background-color: transparent;
    text-decoration: none;
  }
  @container (max-width: 610px) {
    /* align-items: flex-end; */
    background-color: transparent;

    .interviewList__comment { display: none; }
    .interviewList__name {
      background-color: rgba(0, 0, 0, .4);
      padding: 5px 10px;
    }
  }
}

.interviewList__comment { font-size: clamp(14px, 1.64cqw, 18px); }



/*
    会社概要
================================*/
.jobInterview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.jobInterview__list--item a {
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: .3s;
}
.jobInterview__img {
  line-height: 0;
  overflow: hidden;
}
.jobInterview__img img {
  aspect-ratio: 33/20;
  object-fit: cover;
  display: inline-block;
  vertical-align: baseline;
  width: 100%;
}
.jobInterview__text {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32px;
  width: fit-content;
  padding-right: 34px;
}
.jobInterview__text::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 18px;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #000;
  mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

@media (any-hover:hover) {
  .jobInterview__list--item a:hover {
    text-decoration: none;
    opacity: .7;
  }
}
@media (max-width:560px) {
  .jobInterview__list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.compare_chart {
  overflow: auto;
  height: 690px;
  margin-top: 16px;
}
.compare_chart table {
  text-align: left;
  width: 1200px;
  table-layout: fixed;
  white-space: nowrap;
}
.compare_chart thead th {
  position: sticky;
  top: 0;
  text-align: center;
  color: #fff;
  padding: 6px 10px;
  width: 316px;
  height: 56px;
  background-color: none;
  border: none;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid rgb(160 160 160);
    border-right: 1px solid #fff;
    border-bottom: 1px solid rgb(160 160 160);
    background-color: #8F1E35;
    z-index: -1;
  }
  &:first-child {
    left: 0;
    width: 161px;
    z-index: 2;
    &::before {
      border-left: 1px solid rgb(160 160 160);
      z-index: -1;
    }
  }
  &:last-child {
    &::before {
      border-right: none;
    }
  }
}
.compare_chart tbody th {
  position: sticky;
  left: 0;
  letter-spacing: 0.28px;
  font-weight: 700;
  vertical-align: middle;
  background-color: none;
  border: none;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 1px solid rgb(160 160 160);
    border-right: 1px solid rgb(160 160 160);
    border-bottom: 1px solid rgb(160 160 160);
    background-color: #F6F6F6;
    z-index: -1;
  }
  &:last-child {
    &::before {
      border-bottom: none;
    }
  }
}
.compare_chart tbody td {
  position: relative;
  vertical-align: baseline;
  z-index: -1;
  &::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 1px solid rgb(160 160 160);
    border-bottom: 1px solid rgb(160 160 160);
  }
}
.compare_chart tbody th,
.compare_chart tbody td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  font-size: 14px;
  padding: 12px 10px;
}
.compare_chart .compare_list li {
  position: relative;
  padding-left: 1em;
}
.compare_chart .compare_list li::before {
  position: absolute;
  content: "";
  top: 8px;
  left: 0;
  width: 5px;
  height: auto;
  background-color: #8F1E35;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

@media(max-width:896px) {
  .compare_chart {
    height: 910px;
    margin-top: 10px;
  }
  .compare_chart thead th {
    width: 212px;
    &:first-child {
      width: 93px;
    }
  }
}  

/*-------------------------------

  インソースを知る

-------------------------------*/
/*
    会社概要
================================*/
.tbl--companyInfo {
  border-collapse: collapse;
  font-size: 16px;
  width: 100%;

  tr {
    &:first-of-type { border-top: 1px solid #DCDCDC; }
    &:not(:last-of-type){ border-bottom: 1px solid #DCDCDC; }
  }
  th {
    padding-block: 20px;
    text-align: left;
    vertical-align: top;
    tr:last-of-type & { padding-block-end: 0; }
  }
  td {
    padding-block: 20px;
    tr:last-of-type &{ padding-block-end: 0; }
  }
}

/* 関連会社 */
.affiliatedCompanyList {
  .affiliatedCompanyList__body {
    display: grid;
    row-gap: 0;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .affiliatedCompanyList__title {
    margin-bottom: 0;
    > img {
      height: auto;
      width: 100px;
    }
  }
  .linkWrapper { margin: 0; }
  [class*="link"] {
    color: #666666;
    font-size: 14px;
    line-height: 1.37;
  }
}


/*
    拠点紹介
================================*/
.locationList {
  .locationList__title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
.regionList {
  display: grid;
  gap: 20px clamp(20px, 4.26cqw, 40px);
  &.__gridCol {
    grid-template-columns: repeat(2, 1fr);

    @container l_main (max-width: 400px) { grid-template-columns: 1fr; }
  }
  .regionList__body { margin: 0; }
  .regionList__title {
    font-size: clamp(14px, 1.7cqw, 16px);
    font-weight: bold;
    margin-bottom: 5px;
  }
  .regionList__contents {}
}

.seminarroomList {
  display: grid;
  gap: 0 clamp(20px, 4.26cqw, 40px);
  grid-template-columns: repeat(2, auto);
  .seminarroomList__body { margin: 0; }
  .seminarroomList__title {
    font-size: clamp(14px, 1.7cqw, 16px);
    font-weight: bold;
  }
  .seminarroomList__contents {
    display: grid;
    gap: 20px 0;
  }
  .seminarroomList__inner {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    font-size: 16px;
    font-weight: bold;
    span { font-size: 2em; }
  }
}


/*
    インソースの強み
================================*/
.companyInformation {
  > *:not([class*=heading]) + * { margin-top: 40px; }
}

.insSystemList {
  display: grid;
  gap: 20px 35px;
  grid-template-columns: auto 1fr;
  grid-template-areas: 
  "title title"
  "image logo";
  .insSystemList__title {
    font-size: 16px;
    font-weight: bold;
    grid-area: title;
  }
  .insSystemList__item1 {
    align-self: flex-end;
    grid-area: image;
    @container l_main (max-width: 900px) { margin-inline: auto; }
  }
  .insSystemList__item2 { grid-area: logo; }
  .logoBox {
    display: grid;
    gap: 20px;
    grid-auto-rows: 80px;
    grid-template-columns: repeat(4, auto);
    > img {
      height: 100%;
      width: 100%;
    }
  }

  @container l_main (max-width: 900px) {
    grid-template-columns: 1fr;
    grid-template-areas: 
    "title"
    "image"
    "logo";
  }
  @container l_main (max-width: 600px) {
    .logoBox {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}


/*
    あゆみ
================================*/
.tableWrap {
  --theme_low: #F2A8A5;
  --theme_mid: #EC696F;
  --theme_high: #E01938;
  --tableBorderColor: #000;
  &.__low { --tableBorderColor: var(--theme_low); }
  &.__mid { --tableBorderColor: var(--theme_mid); }
  &.__high { --tableBorderColor: var(--theme_high); }
  border-left: 20px solid var(--tableBorderColor);
  & + & { margin-top: 20px; }
}
.table--history {
  caption {
    font-size: 18px;
    font-weight: bold;
    padding-left: 20px;
    padding-bottom: 10px;
    text-align: left;
  }
  :is(th,td) {
    padding: 10px 20px;
    vertical-align: top;
    tr:last-of-type & { padding-bottom: 0; }
  }
}


/*-------------------------------

  事業を知る

-------------------------------*/
/*
    事業概要
================================*/
.bizOverviewList {}
.bizOverviewList__body {
  &:not(:first-of-type) { margin-top: 30px; }
}
.bizOverviewList__title {
  font-size: clamp(14px, 1.91cqw, 18px);
}
.bizOverviewList__contents {}


/*
    事業紹介
================================*/
.bizIntroduction {}
.bizIntroduction__body {
  &:not(:first-of-type) { margin-top: 30px; }
}
.bizIntroduction__inner {}
.bizIntroduction__title {
  font-size: 18px;
  margin-bottom: 10px;
}
.bizIntroduction__contents { margin: 0; }

.bizIntroduction__image {
  align-self: center;
  justify-self: center;
  > img {
    aspect-ratio: 1 / 0.537;
    object-fit: cover;
    width: 250px;
    @container (max-width: 599px) { width: 100%; }
  }

  &.__haken {
    > img { object-position: -10px top; }
  }
  &.__bup {
    > img { object-position: right top; }
  }
  &.__it {
    > img { object-fit: contain; }
  }
  &.__other {
    overflow: hidden;
    > img {
      /* object-position: 20px top;
      transform: scale(1.2); */
    }
  }
}


/*-------------------------------

  働く環境をを知る

-------------------------------*/
/*
    教育・研修制度
================================*/
.newcomSchedule {}
.newcomSchedule__body {
  display: grid;
  gap: 20px 30px;
  grid-template-areas: 
  "title image"
  "contents image";
  grid-template-columns: 1fr auto;
  grid-auto-rows: 1lh 1fr;
  &.__first {
    .newcomSchedule__image {
      aspect-ratio: 1 / 1.133;
      object-fit: cover;
      height: 216px;
    }
  }
  &.__noImg {
    grid-template-areas: 
    "title"
    "contents";
    grid-template-columns: 1fr;
  }
  &.__full {
    grid-template-areas: 
    "title"
    "contents";
    grid-template-columns: 1fr;
    .newcomSchedule__inner {
      display: grid;
      gap: 20px 30px;
      grid-template-areas: 
      "contents image"
      "details details";
      .newcomSchedule__detail {
        grid-area: details;
      }
      > * + * { margin-top: 0; }
    }
    .newcomSchedule__image { margin-top: 0; }
    .u_mt-lh { margin-top: calc(-2lh - var(--leading-trim)); }
  }
  &.__noGrid {
    grid-template-columns: minmax(0, 100%);
    grid-template-areas:
    "title"
    "contents";
  }
  @container l_main (max-width: 599px) {
    grid-template-areas: 
    "title"
    "contents"
    "image";
    grid-template-columns: minmax(0, 100%);
    grid-auto-rows: auto;
    &.__first {
      img { display: none; }
    }
    &.__full {
      .newcomSchedule__inner {
        grid-template-areas: 
        "contents"
        "image"
        "details";
        .u_mt-lh { margin-top: 0; }
      }
    }
  }
}

.newcomSchedule__title {
  font-size: 20px;
  font-weight: bold;
  grid-area: title;
  display: flex;
  &::before {
    counter-increment: title-num;
    content: counter(title-num)"．";
    display: block;
  }
}

.newcomSchedule__subHeading {
  margin-bottom: 0;
}

.newcomSchedule__inner {
  border-left: 1px solid #000;
  grid-area: contents;
  margin-left: 0.5em;
  padding-left: 1.5em;
  padding-bottom: 40px;
  > * + * { margin-top: 20px; }
  @container l_main (max-width: 599px) {
    border-left: none;
    margin-left: 0;
    padding: 0;
  }
}
.newcomSchedule__image {
  grid-area: image;
  place-self:  flex-start center;
}

.newcomSchedule__detail {
  background-color: #f8f8f8;
  padding: 20px;
  > * + * { margin-top: 10px; }
}

.table--dx {
  border: 2px solid #d9d9d9;
  font-size: 14px;
  width: 100%;
  tr {
    &:first-of-type th { width: 134px; }
  }
  th,td {
    border: 2px solid #d9d9d9;
    padding: 15px;
    vertical-align: middle;
  }
  th {
    color: #fff;
    /* font-size: 14px; */
    font-weight: bold;
    &.u_level0 {
      background-color: #f0c923;
      + td {
        background-color: #FFFCF4;
        /* font-size: 14px; */
      }
    }
    &.u_level0to2 {
      background-color: #f9a41b;
      + td { background-color: #FFFBF5; }
    }
    &.u_level1 {
      background-color: #F8761C;
      + td { background-color: #FFF8F4; }
    }
    &.u_level2 {
      background-color: #F45B17;
      + td { background-color: #FFF8F5; }
    }
    &.u_level3 {
      background-color: #F2431C;
      + td { background-color: #FFF8F7; }
    }
    &.u_levelx {
      background-color: #ED1A1B;
      + td { background-color: #FFF2F2; }
    }
  }
  /* td { font-size: 12px; } */
  @container l_main (max-width: 599px) {
    border-width: 1px;
    :is(tr,th,td,tr:first-of-type th) {
      display: block;
      width: 100%;
    }
    :is(th, td) { border-width: 1px; }
    th { padding: 10px; }
  }
}

/* ********** アコーディオン */
.detailsAccordion {
  &[open] {
    .detailsAccordion__titleTag {
      &::before {
        transform: rotate(180deg);
      }
      &::after {
        content: "閉じる";
        @container l_main (max-width: 599px) { content: none; }
      }
    }
  }
}
.detailsAccordion__trigger {
  cursor: pointer;
  display: block;
}

.detailsAccordion__title {
  display: grid;
  grid-template-columns: 1fr auto;
}
.detailsAccordion__titleTag {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  &::before {
    background-color: #707070;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%, 90% 0%, 50% 80%, 10% 0%);
    content: "";
    display: inline-block;
    height: .5em;
    transform-origin: center;
    width: 1em;
  }
  &::after {
    content: "詳しく見る";
    display: block;
    @container l_main (max-width: 599px) { content: none; }
  }
}

.detailsAccordion__item {
  & + & { margin-top: 30px; }
}

.detailsAccordion__inner {
  & + & { margin-top: 20px; }
  > p:not([class]) { margin-bottom: 10px; }
  .list {
    .list--num { padding-left: 1em; }
  }
  @container l_main (max-width: 599px) {
    div:has(.detailsAccordion__caption) {
      & + & { margin-top: 20px; }
    }
  }
}

.detailsAccordion__caption {
  + * { margin-left: 1em; }
}

/* ********** 福利厚生 */
.empBenefit {
  > * + * { margin-top: 20px; }
  .l_section--sm + .l_section--sm { margin-top: 60px; }
  & + * { margin-top: 60px; }
}

/* 持株会 */
.stockholding {
  &:not(:last-child) { margin-block: 30px; }
  * + * { margin-top: 10px; }
  /* margin-inline: auto; */
  /* width: 582px; */
  .stockholding__titleWrap {
    align-items: center;
    display: flex;
    gap: 20px;
    img { margin-top: 0; }
  }
  .stockholding__title {
    border: 1px solid;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 10px;
    width: fit-content;
    &.__hasImage {
    }
  }
  .stockholding__body {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    place-content: center;
    max-width: 582px;
    > * {
      font-size: 14px;
      margin-top: 0;
      width: 35%;
    }
  }
  @media screen and (max-width: 599px) {
    width: 100%;
  }
}

/* RS */
.restrictedStock {
  align-items: flex-start;
  display: flex;
  margin-top: 20px;
  dl {
    dt {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 0;
      dd + & { margin-top: 20px; }
    }
    dd {
      font-size: 15px;
      padding-left: 1em;
    }
  }
  @media screen and (max-width: 599px) {
    flex-direction: column;
    gap: 20px;
  }
}

/* 企業型DC */
.companyTypeDC {
  picture {
    img {
      display: block;
      margin-inline: auto;
    }
  }
  .ctDCdetail {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    div {
      flex: 1;
      margin-top: 0;
      padding: 12px;
      &:first-of-type {
        background-color: #fffbf2;
        dt {
          &::before {
            background-color: #ddc856;
            content: "1";
          }
        }
      }
      &:nth-of-type(2) {
        background-color: #fdf4f4;
        position: relative;
        dt {
          &::before {
            background-color: #DC8B9C;
            content: "2";
          }
        }
      }
      &:last-of-type {
        background-color: #f3f7fb;
        position: relative;
        dt {
          &::before {
            background-color: #A7B7C9;
            content: "3";
          }
        }
      }
      &:not(:first-of-type){
        &::before {
          background-color: #333;
          clip-path: polygon(0 0, 100% 50%, 0 100%);
          content: "";
          display: block;
          height: 0.8em;
          position: absolute;
          top: 50%;
          left: -20px;
          transform: translateY(-50%);
          width: 0.5em;
        }
      }
      dt {
        align-items: center;
        display: flex;
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 5px;
        &::before {
          border-radius: 99999px;
          display: grid;
          font-size: 15px;
          height: 25px;
          line-height: 1;
          margin-right: 5px;
          place-items: center;
          width: 25px;
        }
      }
      dd {}
    }
    @media screen and (max-width: 599px) {
      flex-direction: column;
      div {
        &:not(:first-of-type){
          &::before {
            background-color: #333;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            content: "";
            display: block;
            height: 0.5em;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translate(-50% ,0);
            width: 0.8em;
          }
        }
      }
    }
  }
}


/*-------------------------------

  社員を知る

-------------------------------*/
/*
    数字で見る
================================*/
#people {
  dl {
    div { margin-top: 0; }
  }
}

/* ********** 人員構成  */
.personnelComposition {
  /* dl {
    div { margin-top: 0; }
  } */
}
.personnelComposition__upper {
  background-color: #f7f7f7;
  display: grid;
  gap: 30px clamp(40px, 10.34cqw, 100px);
  grid-template-areas: "man total woman";
  padding: 40px;
  place-content: center;
  div {
    place-items: center;
  }
  dt {
    font-size: 20px;
    margin-bottom: 0;
    text-align: center;
  }
  dd {
    font-size: 67px;
    font-weight: bold;
    margin-inline: auto;
    place-items: center;
    div {
      align-items: baseline;
      display: flex;
    }
    .u_unit { font-size: 0.36em; }
    span:not([class]) {
      display: block;
      font-size: 18px;
      margin-inline: auto;
      width: fit-content;
    }
  }
  .u_total {
    color: var(--theme_main);
    display: grid;
    grid-area: total;
    dd { font-size: 110px; }
  }
  .u_man {
    align-self: center;
    grid-area: man;
  }
  .u_woman {
    align-self: center;
    grid-area: woman;
  }
  @container l_main (max-width: 840px) {
    grid-template-areas: 
    "total total"
    "man   woman";
  }
}

.personnelComposition__lower {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
  place-content: center;
  div {
    display: grid;
    place-content: center;
    place-items: center;
    position: relative;
    &:not(:first-of-type)::before {
      background-color: #e0e0e0;
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
    }
  }
  dt { font-size: clamp(16px, 2.13cqw, 20px); }
  dd {
    font-size: 50px;
    font-weight: bold;
    .u_unit { font-size: 16px; }
  }
  @container l_main (max-width: 780px) {
    grid-template-columns: repeat(2, 1fr);
    div {
      padding: 10px;
      &:not(:first-of-type)::before { content: none; }
      &:nth-of-type(even)::before {
        background-color: #e0e0e0;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
      }
      &:nth-of-type(-n+2)::after {
        background-color: #e0e0e0;
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
  }
}

.newMidRecruitment {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr);
  .newMidRecruitment__item {}
  .newMidRecruitment__num {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(80px, 11cqw, 103px);
    font-weight: bold;
    place-content: center;
    .u_unit { font-size: 34px; }
    > img { margin-right: 15px; }
    .u_leadingTrim { display: block; }
  }
  .linkWrapper { grid-column: span 2; }
  @container l_main (max-width: 450px) {
    grid-template-columns: 1fr;
    .linkWrapper { grid-column: 1; }

  }
}

/* ********** 年代構成比  */
.ageRaito {
  position: relative;
  .ageRaitoGraph {
    align-items: flex-end;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 clamp(14px, 3.12cqw, 30px);
    height: 70vh;
    @media screen and (max-width: 599px) { height: 425px; }
  }

  .ageRaitoGraph__item {
    background-color: #ccc;
    color: #fff;
    display: grid;
    height: var(--age_percent);
    place-content: center;
    &.__age-20 { background-color: #E5012D; }
    &.__age-30 { background-color: #F25775; }
    &.__age-40 { background-color: #FA7F96; }
    &.__age-50 { background-color: #FF9DB2; }
    &.__age-60 { background-color: #EAA6B4; }
    div {
      display: grid;
      font-size: clamp(14px, 2.13cqw, 20px);
      font-weight: bold;
      place-items: center;
      place-content: center;
      > span {
        font-size: clamp(32px, 7.45cqw, 70px);
        display: block;
        margin-block: var(--leading-trim);
        .u_unit { font-size: 0.29em; }
      }
    }
  }

  .ageRaitoAverage {
    background-color: #ffebf0;
    border-radius: 99999px;
    display: grid;
    place-content: center;
    height: 192px;
    position: absolute;
    top: 17%;
    right: 11%;
    width: 195px;
    > div {
      display: grid;
      place-items: center;
      place-content: center;
      font-size: 19px;
      > span {
        display: block;
        font-size: 51px;
        margin-block: var(--leading-trim);
        .u_unit { font-size: 0.41em; }
      }
    }
    @media screen and (max-width: 599px) {
      top: 0;
      right: 0;
      transform: scale(.8);
    }
  }
}

/* ********** 職種別構成比  */
.jobType {
  display: grid;
  /* gap: clamp(20px, 7.45cqw, 70px) 10px; */
  grid-template-columns: repeat(3, 1fr);
  @container l_main (max-width: 599px) { grid-template-columns: repeat(2, 1fr); }
}

.jobType__body {
  padding-block: clamp(20px, 3.73cqw, 35px);
  padding-inline: 10px;
  position: relative;
  @container l_main (min-width: 600px) {
    &:is(:not(:nth-of-type(3n)))::before {
      background-color: #e0e0e0;
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      right: -1px;
      width: 2px;
    }
    &:nth-of-type(-n+3)::after {
      background-color: #e0e0e0;
      content: "";
      display: block;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
  @container l_main (max-width: 599px) {
    &:nth-of-type(2n+1)::before {
      background-color: #e0e0e0;
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      right: -1px;
      width: 2px;
    }
    &:not(:nth-last-of-type(-n+2)):after {
      background-color: #e0e0e0;
      content: "";
      display: block;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
}

.jobType__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(13px, 1.71cqw, 16px);
  place-items: center;
  place-content: center;
  &::before {
    content: "";
  }
  &.__cnsl::before { content: url("/resource/img/recruit/recruit2025/people_img03.svg"); }
  &.__contents::before { content: url("/resource/img/recruit/recruit2025/people_img04.svg"); }
  &.__engineer::before { content: url("/resource/img/recruit/recruit2025/people_img05.svg"); }
  &.__designer::before { content: url("/resource/img/recruit/recruit2025/people_img06.svg"); }
  &.__degi::before { content: url("/resource/img/recruit/recruit2025/people_img07.svg"); }
  &.__dxCnsl::before { content: url("/resource/img/recruit/recruit2025/people_img08.svg"); }
}

.jobType__contents {
  display: grid;
  font-size: clamp(40px, 7.45cqw, 70px);
  font-weight: bold;
  margin-block: var(--leading-trim);
  place-content: center;
  .u_unit { font-size: 0.29em; }
}

/* ********** 出身地は？  */
.birthplace {
  position: relative;
}

.birthplace__picture {
  display: grid;
  place-content: center;
}

.birthplace__contents {
  ul {
    li {
      align-items: center;
      display: flex;
      flex-direction: column;
      font-size: clamp(40px, 7.45cqw, 70px);
      font-weight: bold;
      position: absolute;
      top: 0;
      > span:first-of-type {
        color: var(--theme_main);
        font-size: clamp(16px, 2.13cqw, 20px);
        font-weight: bold;
      }
      > span:nth-of-type(2) { margin-block: var(--leading-trim); }
      .u_unit { font-size: 0.29em; }

      &[data-area="埼玉県"] {
        top: 26%;
        left: 81.5%;
      }
      &[data-area="東京都"] {
        top: 49%;
        left: 80%;
      }
      &[data-area="千葉県"] {
        top: 73%;
        left: 75%;
      }
      &[data-area="神奈川県"] {
        top: 84%;
        left: 59%;
      }
      &[data-area="大阪府"] {
        top: 31%;
        left: 34%;
      }
      &[data-area="福岡県"] {
        top: 46%;
        left: 18%;
      }
      &[data-area="その他"] {
        top: 82%;
        left: 11%;
      }
    }
  }
  @media screen and (max-width: 599px) {
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      li {
        padding: 10px;
        position: relative;
        &[data-area] {
          top: 0;
          left: 0;
        }
        &:nth-of-type(2n+1)::before{
          background-color: #e0e0e0;
          content: "";
          display: block;
          height: 100%;
          position: absolute;
          top: 0;
          right: -1px;
          width: 1px;
        }
        &:not(:last-of-type):after {
          background-color: #e0e0e0;
          content: "";
          display: block;
          height: 1px;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }
    }
  }
}

/* ********** 育休取得率  */
.childcareLeave {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 30%);
  justify-content: space-evenly;
  .childcareLeave__body {
    display: grid;
    place-items: center;
  }
  .childcareLeave__title {}
  .childcareLeave__contents {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(80px, 11cqw, 103px);
    font-weight: bold;
    place-content: center;
    .u_unit { font-size: 34px; }
    > img { margin-right: 15px; }
    .u_leadingTrim { display: block; }
  }
  @container l_main (max-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

/* ********** 最終学歴  */
.finalEducation {
  display: grid;
  gap: clamp(10px, 2.13cqw, 20px);
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  @container l_main (max-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
    .finalEducation__body {
      aspect-ratio: auto;
      padding: 20px;
      &:is([class*="__item"]) { grid-column: auto; }
      &.__item1 { grid-column: 1 / 3; }
    }
  }
}

.finalEducation__body {
  aspect-ratio: 300 / 217;
  display: grid;
  place-items: center;
  place-content: center;
  width: 100%;
  &[class*="__item"] { background-color: #F7F7F7; }
  &.__item1 { grid-column: 1 / span 4; }
  &.__item2 { grid-column: 5 / span 4 }
  &.__item3 { grid-column: 9 / span 4; }
  &.__item4 { grid-column: 1 / span 3; }
  &.__item5 { grid-column: 4 / span 3; }
  &.__item6 { grid-column: 7 / span 3 }
  &.__item7 { grid-column: 10 / span 3 }

  &:nth-of-type(-n+3) {
    .finalEducation__title {
      font-size: clamp(16px, 3.41cqw, 32px);
      font-weight: bold;
    }
    .finalEducation__contents {
      align-items: baseline;
      display: flex;
      font-size: clamp(50px, 11.1cqw, 104px);
      font-weight: bold;
      .u_leadingTrim {
        display: block;
      }
      .u_unit { font-size: 0.32em; }
    }
  }
  &:nth-of-type(n+4) {
    .finalEducation__title {
      font-size: clamp(16px, 2.98cqw, 28px);
      font-weight: bold;
    }
    .finalEducation__contents {
      align-items: baseline;
      display: flex;
      font-size: clamp(50px, 9.58cqw, 90px);
      font-weight: bold;
      .u_leadingTrim {
        display: block;
        margin-block: var(--leading-trim);
      }
      .u_unit { font-size: 0.37em; }
    }
  }
}


/*-------------------------------

  採用情報（下層）

-------------------------------*/
.recruitInformation {
  :is( * + p:not(table *), * + ul:not(table *):not(div:not([class]) *), * + div:not(table *):not(.flowList *)) {
    margin-top: 20px;
  }
}

/* ********** 見出し  */
.heading.__recruitInfo {
  .u_empStatus {
    font-size: clamp(21px, 3.41cqw, 32px);
    font-weight: bold;
    &:nth-of-type(n+2)::before { content: "・"; }
  }
  [class="u_empStatus"]::after { content: "\63A1\7528"; }/* 採用 */
}

/* ********** 条件・待遇  */
.table--condition {
  color: #333;
  border-top: 1px solid #6f828e;
  border-bottom: 1px solid #6f828e;
  width: 100%;

  th {
    background-color: #e5e9eb;
    border-right: 1px solid #6f828e;
    font-weight: normal;
    padding: 25px 15px;
    text-align: left;
    width: 200px;
    &:not(tr:last-of-type &) { border-bottom: 1px solid #6f828e; }
  }
  td {
    padding: 25px 15px;
    &:not(tr:last-of-type &) { border-bottom: 1px solid #6f828e; }
    > * + * { margin-top: 20px; }
  }
  .u_td__hasImage {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    img { flex-shrink: 0; }
  }
  @container l_main (max-width: 600px) {
    th {
      border-right: none;
      display: block;
      width: 100%;
      tr:last-of-type & { border-bottom: 1px solid #6f828e; }
    }
    td {
      display: block;
      width: 100%;
    }
    .u_td__hasImage {
      align-items: center;
      flex-direction: column;
    }
  
  }
}

/* ********** 採用ステップ  */
.flowList {
  .list--ast + & { margin-top: 20px; }
  counter-reset: flowStep;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
  [class*="heading"] + & { margin-top: 50px; }
  @media screen and (max-width: 970px) {
    gap: 20px 0;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }

  &.__newgrad {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 20px;
    @media screen and (max-width: 970px) {
      gap: 20px 0;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, 1fr);
    }
    }
}
.flowList__item {
  height: 150px;
  position: relative;
  width: 150px;
  &:not(:first-of-type) {
    &::before {
      border-color: var(--theme_main);
      background: linear-gradient(45deg, transparent 30px, var(--theme_main) 0, var(--theme_main) 32px, transparent 0);
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 45px;
      height: 8px;
      border-bottom: 2px solid var(--theme_main);
      transform: translate(-150%, -50%);
      @media screen and (max-width: 1200px) {
        content: none;
      }
    }
    :is(.__newgrad &)::before {
      transform: translate(-110%, -50%);
      @media screen and (max-width: 970px) {
        content: none;
        /* left: 55px;
        transform: translateY(-115px) rotate(90deg); */
      }
    }
  }
  @media screen and (max-width: 970px) {
    height: auto;
    width: 100%;
  }
}
.flowList__inner {
  aspect-ratio: 1;
  border: 2px solid var(--theme_main);
  border-radius: 50%;
  display: grid;
  grid-auto-rows: 1fr;
  place-items: center;
  place-content: center;
  @media screen and (max-width: 970px) {
    aspect-ratio: revert;
    border-radius: 0;
    grid-auto-rows: auto;
    padding: 15px;
  }
}
.flowList__body {}
.flowList__step {
  align-items: center;
  counter-increment: flowStep 1;
  color: var(--theme_main);
  display: flex;
  flex-direction: column;
  font-size: 16px;
  text-transform: uppercase;
  &::after {
    content: counter(flowStep);
    font-size: 20px;
  }
  @media screen and (max-width: 970px) { flex-direction: row; }
}
.flowList__text {
  align-self: flex-start;
  text-align: center;
  @media screen and (max-width: 970px) {
    > br { display: none; }
  }
}


/*-------------------------------

  インタビュー記事（一覧ページ）

-------------------------------*/
.grid--interviewTopList {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 300px));
  @media screen and (max-width: 599px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));;
  }
}

/* ********** 個々のリンク  */
.interviewCard {}

.interviewCard__body {
}

.interviewCard__link {
  color: currentColor;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.interviewCard__contents {
  /* background-color: rgba(0,0,0,.4); */
  background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
  padding: 20px 10px;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color .3s;
  width: 100%;
  z-index: 2;
  &:hover {
    background-color: transparent;
    + .interviewCard__image > img { transform: scale(1.1); }
  }
}

.interviewCard__title {}
.interviewCard__nametag {}

.interviewCard__image {
  overflow: hidden;
  /* width: 300px; */
  > img {
    aspect-ratio: 6 / 5;
    object-fit: cover;
    transition: transform .3s;
    width: 100%;
  :is(.__side_left) > & { object-position: left; }
  :is(.__side_right) > & { object-position: right; }
  @media screen and (max-width: 599px) { aspect-ratio: 47 / 25; }
  }
}



/*-------------------------------

  インタビュー記事（下層）

-------------------------------*/
.l_mainContainer {
  &.__singleCol {
    grid-template-areas: "main main";
    .l_main {
      margin-inline: auto;
      max-width: var(--contents_width);
    }
  }
}

.interviewsHeader { margin-bottom: 30px; }

.interviewsHeader__mainvisual {
  margin-bottom: clamp(20px, 4.26cqw, 40px);
  > img { margin-inline: auto; }
}

.interviewsHeader__catchcopy {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(24px, 3.41cqw, 32px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
  margin-block: var(--leading-trim);
  &:not(:last-child) { margin-bottom: 30px; }
}

.interviewsHeader__data {
  color: #707070;
  display: flex;
  font-size: clamp(14px, 1.92cqw, 18px);
  gap: 5px 20px;
  @container l_main (max-width: 599px) {
    flex-direction: column;
  }
}

.interviewsData {
  display: flex;
  gap: 10px;
}

.interviewsTag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  > li {
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: clamp(12px, 1.5cqw, 14px);
    margin-block: var(--leading-trim);
    padding: 5px 10px;
  }
}

.interviews {}
.interviews__body {
  & + & { margin-top: 40px; }
}
.interviews__title {
  color: var(--theme_main);
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(16px, 2.56cqw, 24px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  padding-left: 2em;
  position: relative;
  &::before {
    background-color: var(--theme_main);
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: .5lh;
    left: 0;
    width: 1.3em;
  }
}
.interviews__contents {}

.interviewsImage {
  display: grid;
  margin-top: clamp(30px, 4.26cqw, 40px );
  place-content: center;

  &.__2col {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
}


/*-------------------------------

  検索ページ

-------------------------------*/
/* 検索ページのメインコンテンツコンテナ */
.m_searchContainer{}
.m_searchContainer__item{
  & + &{
    margin-top: 35px;
  }
}

/* 検索ボックスのラッパー */
.m_searchBoxWrap{}
.m_searchBoxWrap__header{
  margin-bottom: 40px;
}
.m_searchBoxWrap__ttl{
  font-size: 32px;
}
.m_searchBoxWrap__body{}
.m_searchBoxWrap__footer{
  margin-top: 23px;
}
/* 検索ボックス */
.m_searchBox{
  border-block: 1px solid #ccc;
  @media screen and (max-width: 970px) {
    border-color: #6F828E;
  }
}
.m_searchBox__item + .m_searchBox__item{
  border-top: 1px solid #ccc;
  @media screen and (max-width: 970px) {
    border-color: #6F828E;
  }
}
/* 絞り込み検索のラッパー */
.m_searchFilterWrap{
  display: flex;
  @media screen and (max-width: 970px) {
    display: block;
  }
}
.m_searchFilterWrap__ttl{
  flex: 0 0 280px;
  margin: 0;
  line-height: 1;
  padding: 20px 16px;
  font-weight: normal;
  font-size: 16px;
  background: #E5E9EB;
}
.m_searchFilterWrap__body{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 20px 16px;
}
.m_searchFilterWrap__item + .m_searchFilterWrap__item{
  margin-top: 16px;
}
/* 絞り込み検索 */
.m_searchFilter{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 1em;
  border: 1px solid #6F828E;
  border-radius: 100px;
  line-height: 1;
  cursor: pointer;
  input[type="checkbox"] {
    display: none;
  }
  :is(&:hover, &:has(input[type="checkbox"]:checked)) {
    color: #fff;
    background: #6F828E;
  }  
}


/* ボタンリスト */
.m_btns{
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-inline: -8px;
}
.m_btns__item{
  display: flex;
  padding-inline: 8px;
  @media screen and (max-width: 768px){
    width: 50%;
  }
}
/* ボタン */
.m_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  &:hover{
    opacity: .7;
  }
}
.m_btn--search{
  max-width: 100%;
  width: 282px;
  height: 50px ;
  color: #fff;
  background: #E5002D;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.m_btn--reset{
  padding: 0 25px;
  height: 50px ;
  color: #fff;
  background: #6F828E;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

/* 結果表のラッパー */
.m_resultTableWrap{}
.m_resultTableWrap__header{
  margin-bottom: 25px; 
}
.m_resultTableWrap__body{
  overflow: auto;
}
.m_resultTableWrap__footer{
  margin-top: 25px; 
}
/* 結果表の機能ボックス */
.m_resultTableFuncs{
  display: flex;
  justify-content: center;
  position: relative;
  @media screen and (max-width: 768px) {
    &.m_resultTableWrap__header{
      padding-bottom: 2em;
    }
    &.m_resultTableWrap__footer{
      padding-top: 2em;
    }
  }
}
.m_resultTableFuncs__pager{
  padding: 0 10em;
  @media screen and (max-width: 768px) {
    padding: 0;
  }
}
.m_resultTableFuncs__total{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  height: 1em;
  margin: auto;
  line-height: 1;
  @media screen and (max-width: 768px) {
    .m_resultTableWrap__header &{
      top: auto;
    }
    .m_resultTableWrap__footer &{
      bottom: auto;
    }
  }
}

/* ページャー */
.m_pager{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: -2px;
}
.m_pager__item{
  display: flex;
  padding: 2px;
}
.m_pager__target{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  aspect-ratio: 1;
  border: 1px solid #E5E9EB;
  color: inherit;
  :is(&:hover, &.is_active){
    border: none;
    color: #fff;
    background: #6F828E;
  }
}

/* 結果表 */
.m_resultTable{
  width: 100%;
  min-width: 950px;
  border-collapse: collapse;
  border-block: 1px solid #6F828E;
}
.m_resultTable__header{
  background: #E5E9EB;
}
.m_resultTable__body{
  border-block: 1px solid #6F828E;
}
.m_resultTable__row{
  cursor: pointer;
  & + &{
    border-top: 1px solid #6F828E;    
  }
  &:hover{
    opacity: .7;
  }
}
.m_resultTable__ttl{
  padding: 14px;
  text-align: left;
  word-break: keep-all;
}
.m_resultTable__data{
  padding: 14px;
}

/* 詳細 */
.m_detail{}
.m_detail__link{
  position: relative;
  display: block;
  color: inherit;
  padding-left: 22px;
  &::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: calc(13px / sqrt(2));
    height: calc(13px / sqrt(2));
    margin: auto;
    border-bottom: 2px solid #E6002D;
    border-right: 2px solid #E6002D;
    transform: rotate(-45deg);
  }
  &:hover{
    text-decoration: none;
    /* opacity: .7; */
  }
}
.m_detail__labelWrap{
  display: flex;
  gap: 5px;
}
.m_detail__label{
  width: fit-content;
  padding: 3px 6px;
  color: #fff;
  line-height: 1;
  font-size: 14px;
}
.m_detail__label--urgent{
  background: #E6002D;
}
.m_detail__label--inexperienced{
  background: #00ac9c;
}

/* ローダー */
.m_loader {
  position: relative;
  width: 100%;
  height: 300px;
}
.m_loader__wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.m_loader__bar {
  display: inline-block;
  width: 6px;
  height: 20px;
  border-radius: 100px;
  animation: loading 1s ease-in-out infinite;
  & + &{
    margin-left: 4px;
  }
}
.m_loader__bar:nth-child(1) {
  background-color: #1a8192;
  animation-delay: 0;
}
.m_loader__bar:nth-child(2) {
  background-color: #4260ad;
  animation-delay: 0.09s;
}
.m_loader__bar:nth-child(3) {
  background-color: #b52d61;
  animation-delay: .18s;
}
.m_loader__bar:nth-child(4) {
  background-color: #00c77f;
  animation-delay: .27s;
}
@keyframes loading {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}


/*-------------------------------

  トップメッセージ

-------------------------------*/
.l_mainContainer {
  &.__topMessage {
    .l_main {
      margin-inline: auto;
      max-width: var(--contents_width);
    }
  }
}

.topMessage {}

.topMessageHeader { margin-bottom: 30px; }

.topMessageHeader__mainvisual {
  margin-bottom: clamp(20px, 4.26cqw, 40px);
  > img { margin-inline: auto; }
}

.topMessage__body {
  & + & { margin-top: 40px; }
}

.topMessage__title {
  color: var(--theme_main);
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(16px, 2.56cqw, 24px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  margin-bottom: 20px;
  padding-left: 2em;
  position: relative;
  &::before {
    background-color: var(--theme_main);
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: .5lh;
    left: 0;
    width: 1.3em;
  }
}

.topMessage__keyPhrase {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(24px, 2.63cqw, 32px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  margin-bottom: 30px;
}

.topMessage__contents {
  * + * { margin-top: 10px; }
}

.topMessageSign {
  margin-top: 40px;
  text-align: right;
  .topMessageSign__title {}
  .topMessageSign__sign {
    font-size: 20px;
    font-weight: bold;
  }
}



/*-------------------------------

  イベント

-------------------------------*/
/* ********** イベント一覧  */
.eventList {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  > li {
    position: relative;
    transition: opacity .3s;
    &:hover {
      opacity: .6;
    }
  }
}

.eventListContents {
  .eventListContents__tag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
.eventListContents {
  .eventListContents__tag {
    > li {
      border: 1px solid var(--theme_main);
      border-radius: 9999px;
      color: var(--theme_main);
      font-size: 14px;
      font-weight: bold;
      padding: 0 15px;
      width: fit-content;
    }
  }
  .eventListContents__title {
    font-size: 16px;
    font-weight: bold;
  }
  .eventListContents__link {
    color: currentColor;
    &:hover { text-decoration: none; }
    &::before {
      content: "";
      position: absolute;
      inset: -1px;
    }
  }
  .eventListContents__date {
    font-size: 14px;
  }
}
@media screen and (max-width: 599px) {
  .eventList {
    grid-template-columns: 1fr;
  }
}

.eventSummary {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.5fr 1fr;
  &:has(.eventSummary__image) {/* 画像があるとき */
    grid-template-areas:
    "title image"
    "contents image";
    @container l_section (max-width: 768px) {
      grid-template-areas: 
      "title title"
      "image image"
      "contents contents";
    }
  }
  &:not(:has(.eventSummary__image)) {/* 画像がないとき */
    grid-template-columns: 1fr;
    grid-template-areas:
    "title"
    "contents";
  }
  grid-template-rows: minmax(1lh, auto);
  .eventSummary__tag {
    margin-bottom: 3px;
    > li {
      border: 1px solid var(--theme_main);
      border-radius: 9999px;
      color: var(--theme_main);
      font-size: 14px;
      font-weight: bold;
      padding: 0 15px;
      width: fit-content;
    }
  }
  .eventSummary__title {
    grid-area: title;
    margin-bottom: 0;
    .heading__title {
    font-size: 18px;
    font-size: clamp(16px, 1.92cqw, 18px);
    margin-bottom: 0;
    }
  }
  .eventSummary__image {
    align-self: flex-end;
    display: grid;
    grid-area: image;
  }
  .eventSummary__contents {
    grid-area: contents;
    margin-top: 0;
    > * + * { margin-top: 10px; }
  }
}

.table--event {
  --borderColor: #CECECE;
  /* color: #333; */
  border-top: 1px solid var(--borderColor);
  border-bottom: 1px solid var(--borderColor);
  width: 100%;
  &.__summary {
    th { text-align: left; }
  }

  th {
    background-color: #F5F5F5;
    border-right: 1px solid var(--borderColor);
    font-weight: bold;
    padding: 25px 15px;
    text-align: left;
    width: 250px;
    &:not(tr:last-of-type &) { border-bottom: 1px solid var(--borderColor); }
    > div {
      display: grid;
      place-content: start;
      text-align: left;
      @media screen and (max-width: 599px) {
        br { display: none; }
      }
    }
  }
  td {
    padding: 25px 15px;
    &:not(tr:last-of-type &) { border-bottom: 1px solid var(--borderColor); }
    > * + * { margin-top: 20px; }
  }
  @container l_main (max-width: 600px) {
    th {
      border-right: none;
      display: block;
      width: 100%;
      tr:last-of-type & { border-bottom: 1px solid var(--borderColor); }
    }
    td {
      display: block;
      width: 100%;
    }
  }
}


/*-------------------------------

  新卒採用エントリー

-------------------------------*/
.newgradEntry__wrap {
  width: fit-content;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}
.newgradEntry__box {
  display: grid;
  align-items: center;
  gap: 16px 48px;
  background-color: #F8F8F8;
  border-radius: 8px;
  padding: 24px 48px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
}
.newgradEntry__qr {
  grid-area: 1 / 1 / 3 / 2;
  line-height: 0;
  max-width: 153px;
  aspect-ratio: 1/1;
}
.newgradEntry__lead {
  grid-area: 1 / 2 / 2 / 3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.36px;
}
.newgradEntry__txt {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.newgradEntry__add {
  background-color: #06C755;
  border-radius: 8px;
  width: fit-content;
}
.newgradEntry__add a {
  display: block;
  width: 100%;
  padding: 8px 16px;
  transition: 0.3s;
}
.newgradEntry__add_txt {
  position: relative;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.36px;
  padding-right: 28px;
}
.newgradEntry__add_txt::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: auto;
  aspect-ratio: 1/1;
  margin-left: auto;
  mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #fff;
}
.newgradEntry__confirmation {
  line-height: 1.6;
  letter-spacing: 0.28px;
}
.newgradEntry__link {
  line-height: 1.57;
  letter-spacing: 0.28px;
}
.localNavi.newgradEntry__link {
  justify-content: flex-end;
}
.localNavi.newgradEntry__link .localNavi__link {
  font-size: 16px;
  text-align: right;
}

@media (any-hover:hover) {
  .newgradEntry__add a:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}
@media (max-width:896px) {
  .newgradEntry__box {
    gap: 24px;
    padding: 24px;
  }
  .newgradEntry__qr {
    grid-area: 2 / 1 / 3 / 2;
    margin-left: auto;
    margin-right: auto;
  }
  .newgradEntry__lead {
    grid-area: 1 / 1 / 2 / 2;
  }
  .newgradEntry__txt {
    grid-area: 3 / 1 / 4 / 2;
    gap: 24px;
  }
  .newgradEntry__add {
    margin-left: auto;
    margin-right: auto;
  }
  .newgradEntry__add a {
    padding: 16px 24px;
  }
}
@media (max-width:600px) {
  .localNavi.newgradEntry__link .localNavi__item {
    width: fit-content;
  }
}


/*-------------------------------

  footer

-------------------------------*/
/*
    フッターバナーリンク
================================*/
.bricksLinkContainer {
  container: bricksLink / inline-size;
  > .l_section__item + .l_section__item { margin-top: clamp(20px, 4.1cqw, 50px); }
  &.__freshersSummary {
    .bricksLink--entry {
      grid-template-areas: none;
    }
  }
}
.bricksLink {
  --bcColor: revert;
  --mainColor: #333;
  --fontColor: currentColor;
  --borderStyle: 2px solid var(--mainColor);
  display: grid;
  gap: 10px;
&.bricksLink--grid {
  grid-auto-columns: 1fr;
    grid-template-areas: 
    "newgrad newgrad newgrad midCareer midCareer midCareer"
    "area area staff staff instructor instructor";

    @container l_main (max-width: 930px) {
      grid-template-areas: 
      "newgrad midCareer"
      "area area"
      "staff staff"
      "instructor instructor";
    }
    @container l_main (max-width: 450px) {
      grid-template-areas: 
      "newgrad"
      "midCareer"
      "area"
      "staff"
      "instructor";
    }
  }
  &.bricksLink--entry {
    --bgColor: var(--theme_main);
    --mainColor: var(--theme_main);
    --fontColor: #fff;
    grid-template-areas: "newgradEntry midCareerEntry staffEntry";
    grid-auto-columns: 1fr;
    .bricksLink__link {
      align-items: center;
      padding: clamp(18px, 2.3cqw, 28px);
    }
    @container l_main (max-width: 800px) {
      grid-template-areas: 
      "newgradEntry"
      "midCareerEntry"
      "staffEntry";
      .bricksLink__link br { display: none; }
    }
  }
  &.bricksLink--other {
    --bgColor: #6F828E;
    --mainColor: #6F828E;
    --fontColor: #fff;
    grid-template-areas: "event faq";
    grid-auto-columns: 1fr;
    @container l_main (max-width: 450px) {
      grid-template-areas: 
      "event"
      "faq";
    }
  }

  & + & { margin-top: 30px; }
}

.bricksLink__item {
  width: 100%;
  &.__newgrad { grid-area: newgrad; }
  &.__midCareer { grid-area: midCareer; }
  &.__area { grid-area: area; }
  &.__staff { grid-area: staff; }
  &.__instructor { grid-area: instructor; }
  &.__newgradEntry { grid-area: newgradEntry; }
  &.__midCareerEntry { grid-area: midCareerEntry; }
  &.__staffEntry { grid-area: staffEntry; }
  &.__event { grid-area: event; }
  &.__faq { grid-area: faq; }
}

.bricksLink__link {
  background-color: var(--bgColor);
  border: var(--borderStyle);
  color: var(--fontColor);
  display: flex;
  font-size: clamp(16px, 1.97cqw, 24px);
  font-weight: bold;
  /* min-height: 2lh; */
  height: 100%;
  /* padding: 55px; */
  padding: clamp(20px, 3.69cqw, 45px);
  place-content: center flex-start;
  transition: opacity .3s;
  &:hover {
    opacity: .7;
    text-decoration: none;
  }
  > span {
    align-self: center;
    font-size: 0.75em;
    font-weight: 400;
    margin-inline-start: 20px;
  }
  &::after {
    align-self: center;
    background-color: var(--fontColor);
    content: "";
    display: block;
    flex-shrink: 0;
    height: 28px;
    margin-left: auto;
    mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 28px;
  }
}


/*
    footer
================================*/
.footerNaviLink {
  display: grid;
  gap: 4.92cqw 9.83cqw;
  grid-template-columns: repeat(3, auto);
  margin-inline: auto;
  max-width: var(--main_width);
  width: 100%;
  padding: 32px 120px;
  @container l_wrapper (max-width: 1024px) {
    padding: 32px 16px;
  }
  .footerNaviLink__list {
    margin-top: 8px;
    @container l_wrapper (max-width: 1024px) {
      padding-left: 16px;
    }
  }
  .footerNaviLink__link a {
    color: currentColor;
    display: grid;
    font-size: 14px;
    line-height: 1.57;
    grid-template-rows: auto auto;
    position: relative;
    transition: opacity .3s;
    @container l_wrapper (max-width: 1024px) {
      font-size: 16px;
    }
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
    > span {
      font-size: clamp(11px, 1.15vw, 14px);
      /* text-transform: uppercase; */
    }
  }
  .footerNaviLink__link + .footerNaviLink__link {
    margin-top: 4px;
  }
  .footerNaviLink__ttl {
    display: flex;
    flex-direction: column;
    font-weight: 700;
  }
  .footerNaviLink__ttl_en {
    font-size: 12px;
    line-height: 1.57;
    text-transform: uppercase;
  }
  .footerNaviLink__link_txt {
    position: relative;
    font-size: 18px;
    line-height: 1.57;
    padding-right: 32px;
  }
  .footerNaviLink__link_txt::after {
    position: absolute;
    align-self: center;
    background-color: currentColor;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: auto;
    aspect-ratio: 1/1;
    margin-left: auto;
    mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    position: absolute;
  }
  .footerNaviLink__ttl.footerNaviLink__link_txt::after {
    width: 32px;
    mask-image: url("/resource/img/recruit/recruit2025/icon_localNavi_lg.svg");
  }

  @container l_wrapper (max-width: 1024px) {
    grid-template-columns: repeat(2, auto);
    gap: 32px 48px;
  }
  @container l_wrapper (max-width: 576px) {
    grid-template-columns: 1fr;
    padding-inline: px;
  }
}

.footerNavi {
  --rowGap: 1.64cqw;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rowGap);
  grid-area: navi;
  .footerNavi__item {}
  .footerNavi__link {
    color: #666;
    font-size: 12px;
    transition: opacity .3s;
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
  }
  @container l_wrapper (max-width: 630px) {
    /* flex-direction: column; */
    .footerNavi__item { width: calc(100% / 2 - (var(--rowGap) * 1 / 2)); }
  }
}

.footerMarks {
  display: flex;
  flex-wrap: wrap;
  grid-area: marks;
  margin-top: 10px;
  place-content: flex-end;
  transition: opacity .3s;
  .footerMarks__item {}
  .footerMarks__link {
    &:hover {
      opacity: .7;
      text-decoration: none;
    }
  }
}

.footerCopyright {
  color: #666;
  font-size: 12px;
  grid-area: copyright;
}

}/* layer components */


/* 継承（旧デザイン上書き） */
@layer inheritance {
/* 教育プランナー／リレーションパートナー（中途採用） */
.by_area_header{
  padding: 10px 10px 0 10px;
  font-weight: bold;
  margin-bottom: 0;
}

.by_area_header_attention{  padding-left: 10px;}

.by_area_nav{ 
  font-size: 14px;
  margin-top: 20px;
}

.by_area_nav_list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.by_area_nav_item a{
  border: 1px solid #999;
  padding: 5px;
  display: inline-block;
  color: #333;
}

.by_area_nav_item a:hover{
  text-decoration: none;
  color: #333;
  opacity:.6;
}

.by_area_container{margin-top: 20px;}

.by_area_table{
  /* width: 730px; */
  width: 100%;
}

.by_area_table thead{background-color:#e5e9eb;}

.by_area_table thead th{
  border-top: 1px solid #999;
  text-align: center;
  align-content: center;
}

.by_area_table .by_area_table_location{width :60px!important;}

.by_area_table .by_area_table_station{width :155px!important;}

.by_area_table .by_area_table_note{width:40px!important;}

.by_area_table th,
.by_area_table td{
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 5px;
  width: auto;
  font-size: 12px;
}

.by_area_table th:last-of-type{
  border-right: 1px solid #999;
}

.by_area_table td:first-of-type{
  text-align: center;
  align-content: center; 
}

.by_area_table td:last-of-type{
  border-right: 1px solid #999;
  text-align: center;
  align-content: center; 
}

.by_area_table li{
  min-height: calc(14px * 1.4);
}

.by_area_table li:last-of-type{
  border-top: 1px dashed #999;
  padding-top: 5px;
  margin-top: 5px;
}

.by_area_table tr:last-of-type td{ border-bottom: 1px solid #999;}

.by_area_footer_attention{
  margin-top: 5px;
  margin-bottom: 0;
}
@media screen and  (max-width:768px){
  .by_area_container{overflow-x:auto;}
  .by_area_table {
    min-width: 730px;
    width: 730px;
    margin-right: 10px;
  }
}/* @media */


}/* layer inheritance */


/*===============================

    Utility

================================*/
@layer utilities {
/* uniqe */
.u_em {
  color: var(--theme_main);
}
.u_scrollPrevent { overflow: hidden; }
.u_visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
.u_leadingTrim { margin-block: var(--leading-trim); }
.u_leadingTrim-en { margin-block: var(--leading-trim_en); }

/* 注釈 */
.u_annotation--mark {
  font-size: clamp(10px, .5em, 12px);
  vertical-align: top;
}

.u_annotation {
  font-size: 12px;
  margin-top: 10px;
  text-align: right;
}

/*
    追加情報
================================*/
.u_addInfo {
  border: 1px solid var(--theme_main);
  border-radius: 12px;
  padding: 20px;
  &:not(:last-child) { margin-bottom: 20px; }
  .heading.__recruitInfo + & { margin-top: -20px; }/* 採用情報のタイトル下の時 */
  * + * { margin-top: 10px; }
  .u_addInfo__title {
    color: var(--theme_main);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .u_addInfo__link {
    color: var(--theme_main);
    font-weight: bold;
  }
}


/* display */
.u_d-b { display: block; }
.u_d-n { display: none; }
.u_d-fx { display: flex; }

@media screen and (max-width: 810px){
  .u_resMd_d-n { display: none; }
  .u_resMd_d-b { display: block; }
}

@media screen and (max-width: 599px){
  .u_res_d-n { display: none; }
  .u_res_d-b { display: block; }
}

/* float */
.u_fl-n { float: none; }
.u_fl-l { float: left; }
.u_fl-r { float: right; }

/* font-size */
.u_fz-xs { font-size: .75em; }
.u_fz-sm { font-size: .875em; }
.u_fz-md { font-size: 1em; }
.u_fz-lg { font-size: 1.25em; }
.u_fz-xl { font-size: 1.5em; }
.u_fz-sr { font-size: smaller; }
.u_fz-lr { font-size: larger; }

.u_fz10 { font-size: 10px; }
.u_fz11 { font-size: 11px; }
.u_fz12 { font-size: 12px; }
.u_fz13 { font-size: 13px; }
.u_fz14 { font-size: 14px; }
.u_fz15 { font-size: 15px; }
.u_fz16 { font-size: 16px; }
.u_fz17 { font-size: 17px; }
.u_fz18 { font-size: 18px; }
.u_fz19 { font-size: 19px; }
.u_fz20 { font-size: 20px; }

/* font-weigth */
.u_fw-b { font-weight: bold; }
.u_fw-n { font-weight: normal; }

/* line-height */
.u_lh-nm { line-height: normal; }
.u_lh-ih { line-height: inherit; }
.u_lh0 { line-height: 0; }
.u_lh1 { line-height: 1; }
.u_lh2 { line-height: 2; }
.u_lh3 { line-height: 3; }
.u_lh4 { line-height: 4; }
.u_lh5 { line-height: 5; }
.u_lh6 { line-height: 6; }
.u_lh-xs { line-height: 1.25; }
.u_lh-sm { line-height: 1.33; }
.u_lh-md { line-height: 1.5; }
.u_lh-lg { line-height: 1.75; }
.u_lh-xl { line-height: 2; }

/* padding */
.u_pt0 { padding-top: 0; }
.u_pt-xs { padding-top: 0.2rem; }
.u_pt-sm { padding-top: 0.5rem; }
.u_pt-md { padding-top: 1rem; }
.u_pt-lg { padding-top: 1.5rem; }
.u_pt-xl { padding-top: 3rem; }

.u_pl0 { padding-left: 0; }
.u_pl-xs { padding-left: 0.2rem; }
.u_pl-sm { padding-left: 0.5rem; }
.u_pl-md { padding-left: 1rem; }
.u_pl-lg { padding-left: 1.5rem; }
.u_pl-xl { padding-left: 3rem; }

.u_pb0 { padding-bottom: 0; }
.u_pb-xs { padding-bottom: 0.2rem; }
.u_pb-sm { padding-bottom: 0.5rem; }
.u_pb-md { padding-bottom: 1rem; }
.u_pb-lg { padding-bottom: 1.5rem; }
.u_pb-xl { padding-bottom: 3rem; }

.u_pr0 { padding-right: 0; }
.u_pr-xs { padding-right: 0.2rem; }
.u_pr-sm { padding-right: 0.5rem; }
.u_pr-md { padding-right: 1rem; }
.u_pr-lg { padding-right: 1.5rem; }
.u_pr-xl { padding-right: 3rem; }

.u_py0 { padding-top: 0; padding-bottom: 0; }
.u_py10 { padding-top: 10px; padding-bottom: 10px; }
.u_py20 { padding-top: 20px; padding-bottom: 20px; }
.u_py30 { padding-top: 30px; padding-bottom: 30px; }

.u_pt5 { padding-top: 5px; }
.u_pt10 { padding-top: 10px; }
.u_pt15 { padding-top: 15px; }
.u_pt20 { padding-top: 20px; }
.u_pt30 { padding-top: 30px; }
.u_pt40 { padding-top: 40px; }
.u_pt50 { padding-top: 50px; }
.u_pt100 { padding-top: 100px; }

.u_pl5 { padding-left: 5px; }
.u_pl10 { padding-left: 10px; }
.u_pl15 { padding-left: 15px; }
.u_pl20 { padding-left: 20px; }
.u_pl30 { padding-left: 30px; }
.u_pl50 { padding-left: 50px; }
.u_pl100 { padding-left: 100px; }

.u_pb5 { padding-bottom: 5px; }
.u_pb10 { padding-bottom: 10px; }
.u_pb15 { padding-bottom: 15px; }
.u_pb20 { padding-bottom: 20px; }
.u_pb30 { padding-bottom: 30px; }
.u_pb40 { padding-bottom: 40px; }
.u_pb50 { padding-bottom: 50px; }
.u_pb100 { padding-bottom: 100px; }

.u_pr5 { padding-right: 5px; }
.u_pr10 { padding-right: 10px; }
.u_pr15 { padding-right: 15px; }
.u_pr20 { padding-right: 20px; }
.u_pr30 { padding-right: 30px; }
.u_pr50 { padding-right: 50px; }
.u_pr100 { padding-right: 100px; }


/* margin */
.u_mt0 { margin-top: 0; }
.u_mt-xs { margin-top: 0.2rem; }
.u_mt-sm { margin-top: 0.5rem; }
.u_mt-md { margin-top: 1rem; }
.u_mt-lg { margin-top: 1.5rem; }
.u_mt-xl { margin-top: 3rem; }

.u_ml0 { margin-left: 0; }
.u_ml-xs { margin-left: 0.2rem; }
.u_ml-sm { margin-left: 0.5rem; }
.u_ml-md { margin-left: 1rem; }
.u_ml-lg { margin-left: 1.5rem; }
.u_ml-xl { margin-left: 3rem; }

.u_mb0 { margin-bottom: 0; }
.u_mb-xs { margin-bottom: 0.2rem; }
.u_mb-sm { margin-bottom: 0.5rem; }
.u_mb-md { margin-bottom: 1rem; }
.u_mb-lg { margin-bottom: 1.5rem; }
.u_mb-xl { margin-bottom: 3rem; }

.u_mr0 { margin-right: 0; }
.u_mr-xs { margin-right: 0.2rem; }
.u_mr-sm { margin-right: 0.5rem; }
.u_mr-md { margin-right: 1rem; }
.u_mr-lg { margin-right: 1.5rem; }
.u_mr-xl { margin-right: 3rem; }

.u_my0 { margin-top: 0; margin-bottom: 0; }
.u_my10 { margin-top: 10px; margin-bottom: 10px; }
.u_my20 { margin-top: 20px; margin-bottom: 20px; }
.u_my30 { margin-top: 30px; margin-bottom: 30px; }

.u_mt5 { margin-top: 5px; }
.u_mt10 { margin-top: 10px; }
.u_mt15 { margin-top: 15px; }
.u_mt20 { margin-top: 20px; }
.u_mt30 { margin-top: 30px; }
.u_mt50 { margin-top: 50px; }
.u_mt100 { margin-top: 100px; }

.u_mt-5 { margin-top: -5px; }
.u_mt-10 { margin-top: -10px; }
.u_mt-15 { margin-top: -15px; }
.u_mt-20 { margin-top: -20px; }
.u_mt-30 { margin-top: -30px; }
.u_mt-50 { margin-top: -50px; }
.u_mt-100 { margin-top: -100px; }

.u_ml5 { margin-left: 5px; }
.u_ml10 { margin-left: 10px; }
.u_ml15 { margin-left: 15px; }
.u_ml20 { margin-left: 20px; }
.u_ml30 { margin-left: 30px; }
.u_ml50 { margin-left: 50px; }
.u_ml100 { margin-left: 100px; }

.u_ml-5 { margin-left: -5px; }
.u_ml-10 { margin-left: -10px; }
.u_ml-15 { margin-left: -15px; }
.u_ml-20 { margin-left: -20px; }
.u_ml-30 { margin-left: -30px; }
.u_ml-50 { margin-left: -50px; }
.u_ml-100 { margin-left: -100px; }

.u_mb5 { margin-bottom: 5px; }
.u_mb10 { margin-bottom: 10px; }
.u_mb15 { margin-bottom: 15px; }
.u_mb20 { margin-bottom: 20px; }
.u_mb30 { margin-bottom: 30px; }
.u_mb50 { margin-bottom: 50px; }
.u_mb100 { margin-bottom: 100px; }

.u_mb-5 { margin-bottom: -5px; }
.u_mb-10 { margin-bottom: -10px; }
.u_mb-15 { margin-bottom: -15px; }
.u_mb-20 { margin-bottom: -20px; }
.u_mb-30 { margin-bottom: -30px; }
.u_mb-50 { margin-bottom: -50px; }
.u_mb-100 { margin-bottom: -100px; }

.u_mr5 { margin-right: 5px; }
.u_mr10 { margin-right: 10px; }
.u_mr15 { margin-right: 15px; }
.u_mr20 { margin-right: 20px; }
.u_mr30 { margin-right: 30px; }
.u_mr50 { margin-right: 50px; }
.u_mr100 { margin-right: 100px; }

.u_mr-5 { margin-right: -5px; }
.u_mr-10 { margin-right: -10px; }
.u_mr-15 { margin-right: -15px; }
.u_mr-20 { margin-right: -20px; }
.u_mr-30 { margin-right: -30px; }
.u_mr-50 { margin-right: -50px; }
.u_mr-100 { margin-right: -100px; }

.u_m-a { margin: auto; }
.u_m-l { margin-left: auto; }
.u_m-r { margin-right: auto; }

/* position */
.u_pos-r { position: relative; }
.u_pos-a { position: absolute; }

/* text-align */
.u_ta-c { text-align: center; }
.u_ta-r { text-align: right; }
.u_ta-l { text-align: left; }

/* text-indent */
.u_ti--1 { text-indent: -1em; padding-left: 1em; }
.u_ti-0 { text-indent: 0em; padding-left: 0em; }

/* text-decoration */
.u_td-n { text-decoration: none; }
.u_td-u { text-decoration: underline; }
.u_td-o { text-decoration: overline; }
.u_td-l { text-decoration: line-through; }

/* vertical-align */
.u_va-sup { vertical-align: super; }
.u_va-t { vertical-align: top; }
.u_va-tt { vertical-align: text-top; }
.u_va-m { vertical-align: middle; }
.u_va-bl { vertical-align: baseline; }
.u_va-b { vertical-align: bottom; }
.u_va-tb { vertical-align: text-bottom; }
.u_va-sub { vertical-align: sub; }

/* flexbox */
.u_ac-fs { align-content: flex-start; }
.u_ac-fe { align-content: flex-end; }
.u_ac-c { align-content: center; }
.u_ac-sb { align-content: space-between; }
.u_ac-sa { align-content: space-around; }
.u_ac-s { align-content: stretch; }
.u_ai-fs { align-items: flex-start; }
.u_ai-fe { align-items: flex-end; }
.u_ai-c { align-items: center; }
.u_ai-b { align-items: baseline; }
.u_ai-s { align-items: stretch; }
.u_as-a { align-self: auto; }
.u_as-fs { align-self: flex-start; }
.u_as-fe { align-self: flex-end; }
.u_as-c { align-self: center; }
.u_as-b { align-self: baseline; }
.u_as-s { align-self: stretch; }
.u_jc-fs { justify-content: flex-start; }
.u_jc-fe { justify-content: flex-end; }
.u_jc-c { justify-content: center; }
.u_jc-sb { justify-content: space-between; }
.u_jc-sa { justify-content: space-around; }
.u_fx0-1-a { flex: 0 1 auto; }
.u_fx1-0-a { flex: 1 0 auto; }
.u_fx1-1-a { flex: 1 1 auto; }
.u_fx0-0-a { flex: 0 0 auto; }
.u_fx1-0-0 { flex: 1 0 0%; }
.u_fx1-1-0 { flex: 1 1 0%; }

/* order */
.u_ord0 { order: 0; }
.u_ord1 { order: 1; }
.u_ord2 { order: 2; }
.u_ord3 { order: 3; }
.u_ord4 { order: 4; }
.u_ord5 { order: 5; }
.u_ord6 { order: 6; }
.u_ord9999 { order: 9999; }
.u_ord-1 { order: -1; }

/* table-layout */
.u_tbl-a { table-layout: auto; }
.u_tbl-f { table-layout: fixed; }

/* width */
.u_w350 { width: 350px; }
.u_w400 { width: 400px; }

.u_w40p { width: 40%; }
.u_w45p { width: 45%; }
.u_w50p { width: 50%; }

.u_maW70p { max-width: 70%; }
.u_maW75p { max-width: 75%; }
.u_maW80p { max-width: 80%; }

/*横幅*/
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
@media screen and (max-width:768px){
  .u_resMdCol1{width:8.333%;}
  .u_resMdCol2{width:16.667%;}
  .u_resMdCol3{width:25%;}
  .u_resMdCol4{width:33.333%;}
  .u_resMdCol5{width:41.666%;}
  .u_resMdCol6{width:50%;}
  .u_resMdCol7{width:58.333%;}
  .u_resMdCol8{width:66.666%;}
  .u_resMdCol9{width:75%;}
  .u_resMdCol10{width:83.33%;}
  .u_resMdCol11{width:91.666%;}
  .u_resMdCol12{width:100%;}
}
@media screen and (max-width:599px){
  .u_resSmCol1{width:8.333%;}
  .u_resSmCol2{width:16.667%;}
  .u_resSmCol3{width:25%;}
  .u_resSmCol4{width:33.333%;}
  .u_resSmCol5{width:41.666%;}
  .u_resSmCol6{width:50%;}
  .u_resSmCol7{width:58.333%;}
  .u_resSmCol8{width:66.666%;}
  .u_resSmCol9{width:75%;}
  .u_resSmCol10{width:83.33%;}
  .u_resSmCol11{width:91.666%;}
  .u_resSmCol12{width:100%;}
}

@media screen and (min-width:896px){
  .u_resMdBlock { display: block; }
  .u_resMdHide { display: none; }
}
@media screen and (max-width:896px){
  .u_resSmBlock { display: block; }
  .u_resSmHide { display: none; }
}
}/* layer utilities */