@charset "utf-8";

html {
  scroll-padding-top: 70px;
  @media screen and (max-width: 767px) {
    
  }
}
main {
  padding-top: 70px;
  &:has(.page_head--outer) {
    padding-top: 100px;
  }
  @media screen and (max-width: 767px) {
    &:has(.page_head--outer) {padding-top: 76px;}
  }
}

/* ------------------
 グローバル変数
------------------ */
:root {
  /* 色 */
  --var-color: #222;
  --gradient-main: linear-gradient(115deg, #A981FF 0%, #46FFDA 100%);
  --gradient-sub: linear-gradient(90deg, #F7F3FF 0%, #EDFFFC 100%);
  --blue-color: #395EA3;
  --light-blue01: #F5F7FA;
  --light-blue02: #E2E7F1;
  --green-color: #00AB84;
  --light-green01: #DFF4EF;
  --light-green02: #80D5C2;
  --purple-color: #364388;

  /* 文字サイズ */
  --font-64: 6.4rem;
  --font-50: 5rem;
  --font-40: 4.2rem;
  --font-32: 3.2rem;
  --font-24: 2.4rem;
  --font-20: 2rem;
  --basic-txt: 1.6rem;

  /* 行間 */
  --letter-64: 6.4px;
  --letter-48: 4.8px;
  --letter-40: 4px;
  --letter-12: 1.2px;

  /* 余白 */
  --space-65: 65px;
  --space-45: 45px;
  --space-30: 30px;
}
@media screen and (max-width: 767px) {
  :root {
    /* 文字サイズ */
    --font-64: 4.2rem;
    --font-50: 3.2rem;
    --font-40: 2.8rem;
    --font-32: 2.2rem;
    --font-24: 1.8rem;
    --font-20: 1.7rem;
    --basic-txt: 1.5rem;

    /* 行間 */
    --letter-64: 3.2px;
    --letter-48: 2.4px;
    --letter-40: 2px;
    --letter-12: 0.6px;

    /* 余白 */
    --space-65: 40px;
    --space-45: 30px;
    --space-30: 20px;
  }
}

/* ------------------
 フォント
------------------ */
body {
  position: relative;
  font-family: 'BIZ UDPGothic','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  font-size: var(--basic-txt);
  line-height: 1.8;
  @media screen and (max-width: 1279px) {
    width: 1280px;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

/* ------------------
 共通パーツ
------------------ */
.sp_block, .spNav_btn, .spNav_panel {display: none;}
section {position: relative;}

:where(a) {
  color: #000;
  letter-spacing: 0.8px;
  &:hover {
    opacity: 0.8;
  }
}

/* レイアウト */
.cmn_container {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
.cmn_section {
  width: 90%;
  max-width: 1240px;
  padding: var(--space-65) 0;
  margin: 0 auto;
}
.cmn_section--item {
  &:not(:last-child) {
    margin-bottom: var(--space-65);
  }
}
.cmn_flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  &.jus-between {
    justify-content: space-between;
  }
}

/* 内部の要素をスクロール */
.scroll {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  overflow: auto;
}


/* ------------------
 テキスト
------------------ */
.paragraph {
  margin-bottom: var(--space-45);
}
.sentence:not(:last-child) {
  margin-bottom: var(--space-30);
}
.pb_1 {
  padding-bottom: 1em;
}
.center_txt {
  text-align: center;
  img {
    margin: auto;
  }
}
.bold_txt {
  font-weight: bold;
}
.normal_txt {
  font-weight: normal;
  font-size: var(--basic-txt);
}
.blue_txt {color: var(--blue-color);}
.green_txt {color: var(--green-color);}
.purple_txt {color: var(--purple-color);}

.txt_link {
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}
.font-20 {
  font-size: var(--font-20);
  letter-spacing: var(--letter-12);
  font-weight: 500;
}
/* 箇条書き、インデント関連 */
.indent_list {
  padding-left: 1em;
  li {
    list-style: disc;
  }
}
.indent_txt {
  padding-left: 1em;
  text-indent: -1em;
  &.type02 {
    padding-left: 2.65em;
    text-indent: -2.65em;
  }
}

/* 横並び要素（2カラム）*/
.flex_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  & > * {
    width: 100%;
    max-width: calc(50% - 10px);
  }
  @media screen and (max-width: 767px) {
    & > * {
      max-width: 100%;
    }
  }
}
.flex_box:has(img[width="415"]) {
  justify-content: center;
  & > * {
    width: calc(50% - 10px);
    max-width: 415px;
  }
  @media screen and (max-width: 767px) {
    & > * {width: 100%;}
  }
}

/* 見出し */
.cmn_normal--ttl {
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  margin-bottom: var(--space-30);
  &.has-line {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-65);
    gap: 0.5em;
    span {
      width: 100%;
      max-width: max-content;
      white-space: nowrap;
    }
    &::after {
      content: '';
      display: block;
      background: var(--gradient-main);
      width: 100%;
      height: 5px;
    }
  }
  &.has-line.not-span {
    white-space: nowrap;
  }
  @media screen and (max-width: 767px) {
    &.has-line::after {display: none;}
  }
}
/* 見出し：font-24 */
.cmn_normal--ttlSub {
  font-weight: bold;
  font-size: var(--font-24);
  letter-spacing: var(--letter-48);
  margin-bottom: 1em;
}
/* 見出し上の詳細ボタン */
div:has(.abs-link) {position: relative;}
p:has(.abs-link) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding-left: 1em;
}
.abs-link {
  margin: auto;
  font-weight: bold;
  font-size: var(--font-24);
  letter-spacing: var(--letter-48);
  color: var(--blue-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
}
@media screen and (max-width: 767px) {
  .abs-link {height: 100%;}
  .abs-link,
  div:has(.abs-link) .cmn_normal--ttl.has-line {
    font-size: min(2.2rem, 5vw);
  }
}

/* 詳細ボタン */
.more_btn {
  position: relative;
  padding: 0.5em var(--space-45);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: var(--var-color);
  color: #fff;
  font-weight: 700;
  min-width: 328px;
  @media screen and (max-width: 767px) {
    min-width: initial;
  }
}
.more_btn.type02 {
  padding: 0.25em var(--space-45);
  background: transparent;
  color: var(--var-color);
  border-radius: 50px;
  border: 1px solid var(--var-color);
}

/* table */
.cmn_table--2rows {
  width: 100%;
  margin: 0 auto;
  tr {border-bottom: 3px solid #fff;}
  th {
    width: 20%;
    padding: 0.75em;
    padding-left: var(--space-30);
    background: var(--blue-color);
    color: #fff;
    vertical-align: middle;
    font-weight: bold;
    border-right: 3px solid #fff;
    text-align: left;
  }
  td {
    padding: 1em var(--space-45);
  }
  tr:nth-child(odd) td {background: var(--light-blue01);}
  tr:nth-child(even) td {background: var(--light-blue02);}
  a {
    text-decoration: underline;
    &:hover {text-decoration: none;}
  }
  @media screen and (max-width: 767px) {
    th {
      display: block;
      width: 100%;
      &:first-child {
        width: 100%;
      }
    }
    td {
      display: block;
      padding: 1em 20px;
    }
  }
}

/* ------------------
 header
------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 70px;
  padding-left: var(--space-65);
  border-top: 5px solid var(--sub-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  z-index: 999;
  @media screen and (max-width: 767px) {
    height: 56px;
    padding: 0 1.5em;
  }
}
.hd_logo--outer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-30);
  & + nav {
    height: 100%;
  }
}
.hd_logo--ttl {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    background: #BFBFBF;
    width: 1px;
    height: 36px;
    top: 0;
    left: -15px;
    bottom: 0;
    margin: auto;
  }
  a {
    display: block;
    color: var(--blue-color);
    font-size: var(--font-20);
    font-weight: 700;
  }
  @media screen and (max-width: 767px) {
    &::before {left: -10px;}
  }
}

.pc_nav {
  height: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
}
.pc_nav--item {
  height: 100%;
  &.cont .pc_nav--itemLink {
    background: var(--var-color);
    color: #fff;
    gap: 1em;
    padding: 0.5em 1em;
  }
}
.pc_nav--itemLink {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--basic-txt);
  letter-spacing: var(--letter-12);
}

/* ------------------
  メニュー
------------------ */
@media screen and (max-width: 767px) {
  .spNav_btn {
    display: block;position: absolute; width: 56px;height: 56px;background: var(--blue-color);top:0;right: 0;transition: all 0.5s;z-index: 100;
    span {position: absolute;display: block;height: 2px;background: #fff;margin: auto;}
    
    /* 閉じた状態 */
    &[aria-pressed="false"] span {width: 30px;transition: all 0.5s;}
    &[aria-pressed="false"] span:nth-child(1) {top: 18px;left: 0;right: 0;}
    &[aria-pressed="false"] span:nth-child(2) {top: 50%;left: 0;right: 0; transform: translateY(-50%);}
    &[aria-pressed="false"] span:nth-child(3) {bottom: 18px;left: 0;right: 0;}
    
    /* 開いた状態 */
    &[aria-pressed="true"] span {width: 30px;transition: all 0.5s;}
    &[aria-pressed="true"] span:nth-child(1) {top: 50%;transform: translateY(-1.5px) rotate(45deg);left: 13px;}
    &[aria-pressed="true"] span:nth-child(2) {display: none;}
    &[aria-pressed="true"] span:nth-child(3) {bottom: 50%;transform: translateY(1.5px) rotate(-45deg);left: 13px;}
  }
  .spNav_panel {
    display: block;
    height: 100vh;
    width: 260px;
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.5s;
    background: var(--blue-color);
    box-shadow: -8px 0px 8px -1px rgba(0, 0, 0, 0.2);
    overflow: auto;
    z-index: 99;
    
    /* パネルが閉じている状態 */
    &[aria-hidden="true"] {
      visibility: hidden;
      pointer-events: none;
      transform: translateX(100%);
    }

    /* パネルが開いている状態 */
    &[aria-hidden="false"] {
      visibility: visible;
      transform: translateX(0);
    }
  }

  /* メニューパネル内の項目 */
  .spNav_list {
    width: 100%;
    padding: 56px 0 0;
    font-size: 1.5rem;
  }
  .spNav_list--item {
    border-bottom: 1px solid #fff;
    a {
      display: block;
      padding: 12px 20px;
      color: #fff;
    }
  }
  .spNav_accordion--title {
    width: 100%;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    &::after {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
    
    /* アコーディオン開閉時の状態表示 */
    &[aria-expanded="false"]::after {content: "+";}
    &[aria-expanded="true"]::after {content: "-";}

    /* アコーディオン内の項目 */
    &[aria-expanded="false"] + .spNav_accordion {
      max-height: 0;
      height: auto;
    }
    &[aria-expanded="true"] + .spNav_accordion {
      max-height: 1000px;
    }
  }
  .spNav_accordion {
    overflow: hidden;
    background: #fff;
    transition: all 0.5s;
    a {
      padding-left: 15%;
      color: var(--blue-color);
      border-bottom: 1px dashed #ccc;
    }
  }
  /* bodyをタッチ不可に */
  #onbody {position: absolute;height: 100%;width: 100%; top: 0;left: 0;background: rgba(0, 0, 0, 0.6);z-index: 98;overflow: hidden;pointer-events: none;}
  body:has(#onbody[aria-hidden="true"]) {height: 100%; overflow: hidden;}
}


/* ------------------
お知らせ
------------------ */
.news_list {
  
}
.news_item {
  padding: 1em var(--space-65);
	display: flex;
  flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.25em 20px;
  border-top: 1px solid var(--blue-color);
  &:last-child {
    border-bottom: 1px solid var(--blue-color);
  }
  a {
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
  }
  @media screen and (max-width: 767px) {
    padding: 1em;
    flex-direction: column;
    gap: 0.5em;
  }
}
.news_ttl {
  font-size: var(--basic-txt);
  font-weight: 400;
}


.news_head {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  color: var(--blue-color);
}
.news_head--ttl {
  font-size: var(--blue-color);
  font-size: var(--font-32);
  font-weight: 700;
  letter-spacing: var(--letter-48);
  padding-bottom: var(--space-30);
  margin-bottom: var(--space-65);
  border-bottom: 1px solid var(--blue-color);
}
.news_btn {
  color: var(--blue-color);
  font-size: var(--font-24);
  letter-spacing: var(--letter-48);
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-65);
}

/* cmn_lv--fig */
.cmn_lv--fig {
  width: 100%;
  height: 266px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    height: 202px;
  }
}
/* cmn_lv--btn（募集要項専用） */
.cmn_lv--btn {
  width: 100%;
  max-width: 606px;
  margin: 0 auto;
  padding: 0.25em 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  background: var(--blue-color);
  color: #fff;
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  border-radius: 10px;
  &.mt65 {margin-top: var(--space-65);}
  img {margin: 0;}
}
p:has(.cmn_lv--btn):has(+ *) {margin-bottom: var(--space-65);}

/* ------------------
footer
------------------ */
.footer {
  width: 100%;
  background: var(--light-gray);
}

.ft_rec--cont {
  background: var(--gradient-main);
}
.ft_rec--contLink {
  width: 100%;
  padding: 96px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 767px) {
    padding: 56px 0;
  }
}
.ft_rec--contBtn {
  width: 90%;
  max-width: 606px;
  padding: 0.25em 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  background: var(--blue-color);
  color: #fff;
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  border-radius: 10px;
}

.ft_inner {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-65) 0;
  background: var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 28px;
  }
}
.ft_left {
  width: 100%;
  max-width: 125px;
}
.ft_logo {
  margin-bottom: 28px;
}
.ft_left--icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  a {
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.ft_nav {
  width: 100%;
  max-width: 780px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0 2em;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 0.5em;
  }
}
.ft_nav--top {
  width: 33.3%;
  @media screen and (max-width: 767px) {width: 100%;}
}
.ft_nav--rec {
  width: 66.7%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0 2em;
  p {
    width: calc(50% - 1em);
  }
  @media screen and (max-width: 767px) {
    width: 100%;
    gap: 0.5em 1em;
    p {
      width: calc(50% - 0.5em);
    }
  }
}

.copyright {
  width: 100%;
  padding: 0.5em 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--purple-color);
  color: #fff;
  letter-spacing: 0.04em;
}


/* ------------------
Backtop
------------------ */
#backtop {
  position: fixed;
  display: block;
  width: 50px;
  height: 50px;
  right: 3%;
  bottom: 50px;
  border-radius: 50%;
  background: var(--var-color);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  z-index: -10;
  &::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-25%) rotate(-45deg);
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
  }
  &.active {
    opacity: 1;
    visibility: visible;
    z-index: 99;
  }
}


/* ------------------
下層ページ共通
------------------ */
/* パンくずリスト */
.breadcrumb {
  position: relative;
  width: 100%;
}
.breadcrumb_list {
  width: 90%;
  max-width: 1240px;
  margin: auto;
  padding: 0.5em 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 8px;
  overflow: auto;
  white-space: nowrap;
}
.breadcrumb_item {
  a {
    color: var(--var-color);
    text-decoration: underline;
    &:hover {text-decoration: none;}
  }
  &:has(a[href]) {
    display: flex;
    align-items: center;
    gap: 0 8px;
  }
  &:has(a[href])::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 2px;
    background: var(--var-color);
  }
}

/* ページ上部 ・ ページタイトル */
.page_head--outer {
  position: relative;
  width: 100%;
  &::before {
    content: '';
    position: absolute;
    background: var(--gradient-main);
    width: 100%;
    height: 184px;
    right: 0;
    bottom: -45px;
    left: 0;
    margin: auto;
  }
  @media screen and (max-width: 767px) {
    &::before {bottom: -42px;}
  }
}
.page_head--inner {
  position: relative;
  width: 95%;
  margin: 0 auto;
}
.page_head {
  width: 100%;
  img {
    width: 100%;
    height: 356px;
    object-fit: cover;
    border-radius: 10px;
  }
  @media screen and (max-width: 767px) {
    img {
      height: 280px;
    }
  }
}
.page_head--ttl {
  position: absolute;
  bottom: 24px;
  left: 0;
  min-width: 598px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0 10px 10px 0;
  font-weight: bold;
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  color: var(--blue-color);
  padding: 0.5em;
  padding-left: var(--space-65);
  line-height: 1.8;
  @media screen and (max-width: 767px) {
    min-width: initial;
    width: 90%;
    padding: 0.5em var(--space-45);
  }
}

@media screen and (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* FVアンカーリンク（背景黒） */
.cmn_fv--anchor {
  width: 100%;
  background: var(--var-color);
  padding: var(--space-30);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3em;
  margin-bottom: var(--space-65);
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    gap: 1em;
  }
}
p.cmn_fv--anchorItem {
  a {
    display: flex;
    align-items: center;
    gap: 1em;
    color: #fff;
    &::after {
      content: '';
      display: block;
      background: url(/recruit/common/img/more_icon_grad.png) no-repeat center;
      background-size: contain;
      width: 20px;
      height: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    gap: 0.5em;
  }
}
a.cmn_fv--anchorItem {
  display: flex;
  align-items: center;
  gap: 1em;
  color: #fff;
  @media screen and (max-width: 767px) {
    gap: 0.5em;
  }
}
/* FVアンカーリンク（背景なし、文言青）　 */
.cmn_fv--normalAnchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5em var(--space-45);
  margin-bottom: var(--space-65);
  a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: bold;
    font-size: var(--font-24);
    letter-spacing: var(--letter-48);
    color: var(--blue-color);
    &:not(:has(img))::after {
      content: '';
      display: block;
      background: url(/recruit/common/img/more_icon_blue.png) no-repeat center;
      background-size: contain;
      width: 20px;
      height: 20px;
      transform: rotate(90deg);
    }
  }
  a img {
    transform: rotate(90deg);
  }
}


/* info：3階層目 */
.flow_list {
  margin-top: var(--space-65);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  @media screen and (max-width: 767px) {
    gap: 10px;
  }
}
.flow_ttl {
  color: #fff;
  background: var(--blue-color);
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  border-radius: 10px;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 1em 0.25em;
}
.flow_dir {
  width: calc(100% - 28px);
  @media screen and (max-width: 767px) {
    width: calc(100% - 10px);
  }
}
.flow_dir--item {
  position: relative;
  background: var(--gradient-sub);
  padding: var(--space-30);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 104px;
  &::before {
    content: '';
    position: absolute;
    background: var(--blue-color);
    width: 16px;
    height: 16px;
    border-radius: 16px;
    top: 40px;
    left: calc(30px + 104px + 44px);
    z-index: 2;
  }
  &::after {
    content: '';
    position: absolute;
    background: var(--light-green02);
    width: 3px;
    height: calc(100% + 30px);
    top: 40px;
    left: calc(30px + 104px + 50.5px);
    z-index: 1;
  }
  &:last-child::after {
    height: calc(100% - 40px);
  }
  &:not(:last-child) {
    margin-bottom: 1.5em;
  }
  time {
    min-width: 104px;
    font-weight: bold;
    font-size: var(--font-24);
    letter-spacing: var(--letter-48);
  }
  @media screen and (max-width: 767px) {
    padding-inline: 10px;
    gap: 30px;
    &::before {
      top: 28px;
      left: calc(10px + 80px);
    }
    &::after {
      height: calc(100% + 28px);
      top: 28px;
      left: calc(10px + 80px + 7px);
    }
    &:last-child::after {
      height: calc(100% - 28px);
    }
    time {
      min-width: 80px;
    }
  }
}
.flow_dir--item .cmn_normal--ttlSub {
  margin-bottom: 0;
}
.flow_dir--cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  & > *:not(figure) {
    width: calc(100% - 272px);
  }
  &:not(:has(figure)) > * {
    width: 100%;
  }
  figure {
    width: 100%;
    max-width: 242px;
  }
  @media screen and (max-width: 767px) {
    flex-direction: column;
    gap: 15px;
    & > *:not(figure) {
      width: 100%;
    }
  }
}

/* クロストーク共通 */
.cross_intro,
.cross_art,
.cross_message {
  .blue_txt {color: #2489AE;}
  .purple_txt {color: #6057B8;}
}

.cross_intro {
  position: relative;
  margin-bottom: var(--space-65);
  padding-bottom: var(--space-45);
  background: linear-gradient(90deg, #F7F3FF 0%, #EDFFFC 100%), #D9D9D9;
}
.cross_intro--fig {
  width: 100%;
  margin-bottom: var(--space-30);
  img {
    width: 100%;
  }
  @media screen and (max-width: 767px) {margin-bottom: var(--space-45);}
}
.cross_intro--txt {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  @media screen and (max-width: 767px) {
    width: 90%;
    margin-inline: auto;
    flex-direction: column;
    gap: 24px;
  }
}
.cross_intro--item {
  width: 100%;
  max-width: 304px;
  @media screen and (max-width: 767px) {
    max-width: initial;
  }
}
.cross_intro--name {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.5em;
  font-weight: bold;
  font-size: var(--font-20);
  letter-spacing: var(--letter-12);
  margin-bottom: 10px;
  span {
    font-size: var(--basic-txt);
    letter-spacing: 0.8px;
  }
}

.cross_art {
  &:not(:last-child) {
    margin-bottom: 80px;
  }
  @media screen and (max-width: 767px) {
    &:not(:last-child) {margin-bottom: 65px;}
  }
}
.cross_art .cmn_normal--ttlSub {margin-bottom: var(--space-45);}
.cross_art--figMain {
  width: 100%;
  margin-bottom: var(--space-45);
  img {
    width: 100%;
  }
}
.cross_art--flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-30);
  &:has(+ .cmn_normal--ttlSub) {margin-bottom: var(--space-45);}
  @media screen and (max-width: 767px) {
    flex-direction: column;
    .sp-rev {flex-direction: column-reverse;}
  }
}
.cross_art--txtItem {
  display: flex;
  gap: 1em;
  &.ali-cen {align-items: center;}
  &:not(:last-child) {
    margin-bottom: var(--space-30);
  }
  p.bold_txt {
    width: 100%;
    max-width: max-content;
  }
  p span.bold_txt {white-space: nowrap;}
}
.cross_art--figSub {
  width: 100%;
  max-width: 328px;
  margin-inline: auto;
}

.cross_message {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}
.cross_message--item {
  width: calc(50% - 10px);
  &.w100 {width: 100%;}
  &.w33 {width: calc(33.3% - 13.3px);}
  @media screen and (max-width: 767px) {
    width: 100%;
    &.w33 {width: 100%;}
  }
}
.cross_message--fig {
  position: relative;
  width: 100%;
  &::after {
    content: '';
    position: absolute;
    background: url(/recruit/interview/img/message_txt.svg)no-repeat center / contain;
    width: 100%;
    max-width: 276px;
    height: 88px;
    right: 10px;
    bottom: 10px;
  }
  img {width: 100%;}
  @media screen and (max-width: 767px) {
    &::after {
      max-width: 160px;
      bottom: 0;
    }
  }
}
.cross_message--item .cross_message--fig {margin-bottom: 12px;}
.cross_message--cont {
  padding: var(--space-30);
  &:has(.green_txt) {background: linear-gradient(0deg, #EDFFFC 0%, #EDFFFC 100%), #D9D9D9;}
  &:has(.purple_txt) {background: #F7F3FF;}
  &:has(.blue_txt) {background: linear-gradient(0deg, #F2F9FE 0%, #F2F9FE 100%), #D9D9D9;}
  p:not(:last-child) {padding-bottom: 10px;}
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}


/* ------------------
 レスポンシブ対応
------------------ */
@media screen and (max-width: 767px) {
	/* スマホのみ表示する要素を表示、PCのみ表示する要素を非表示 */
  .sp_block {display: block;}
  .pc_block, .pc_nav {display: none;}
}

/* 印刷用設定 */
@media print {
  body {
    width:1280px!important;
    zoom: 0.68;
    -webkit-print-color-adjust: exact;
  }
  .header {
    position: absolute;
  }
}
@page {
  size: A4;
  margin: 5px;
}